/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/*	Base styles: opinionated defaults ( Boilerplate default )
  	----------------------------------------------------------------------------------------- */
	
	html,
	button,
	input,
	select,
	textarea {
		color: #222;
	}
	
	html {
		font-size: 1em;
		line-height: 1.4;
	}

	::-moz-selection {
		background: #b3d4fc;
		text-shadow: none;
	}
	
	::selection {
		background: #b3d4fc;
		text-shadow: none;
	}

	hr {
		display: block;
		height: 1px;
		border: 0;
		margin: 0;
		padding: 0;
	}

	audio,
	canvas,
	img,
	video {
		vertical-align: middle;
	}

	fieldset {
		border: 0;
		margin: 0;
		padding: 0;
	}

	textarea {
		resize: vertical;
	}

/* Browse Happy prompt ( Boilerplate default )
  	----------------------------------------------------------------------------------------- */
	.browsehappy {
		margin: 0.2em 0;
		background: #ccc;
		color: #000;
		padding: 0.2em 0;
	}

 /*  Site styles ( template )
  	----------------------------------------------------------------------------------------- */
	html, button, input, select, textarea {
		font-family: Arial;
		color:#000;
	}
		
	h1 	{ font-size: 1.8em;	margin: 0  0 10px 0; 	font-weight:900; }
	
	h2 	{ font-size: 1.2em;	margin: 15px  0 5px 0; 	font-weight:900; }
	
	h3 	{ font-size: 0.9em;	margin: 10px  0 5px 0; 	font-weight:500; }
	
	h4 	{ font-size: 0.7em;	margin: 6px  0em 3px 0; font-weight:500; }

	p 	{ font-size: 0.8em;	margin: 0  0 3px 0; font-weight: normal; }
	
	li 	{ font-size: 0.8em; margin: 0  0 3px 0; }
	
	h1:first-child, 
	h2:first-child, 
	h3:first-child, 
	h4:first-child,
	p:first-child {
		margin-top:0 !important;
	}
	
	h1, h2, h3, h4, h5, h6 {
		font-family: 'PT Sans Narrow',Arial,Helvetica,sans-serif;
		color: #333;
		font-weight: 400;
		margin: 0 0 15px;
	}
	button {border:none;}
	
	header, footer, article, section, div {
		position:relative; 
		display: block; 
		clear:both; float:none; 
		overflow:hidden;
		width:100%; height:auto;
		margin:0; padding:0;
	}
	
	 hr { height: 1px; color: #A3AF26; background-color: #A3AF26; }
	 
	 a, a:visited  {text-decoration:none; font-weight:bold; color: #A3AF26;}
	  a:hover {text-decoration:underline; color: #006888; cursor:pointer;} 	
	  
	 a.button, a.button:visited  { color: #FFF;font-weight:normal; padding: 5px 10px 2px 10px;}
	 a.button:hover {text-decoration:none; color: #FFF; } 	
		
	input[disabled="disabled"] {background-color:#CCC; color:#666; font-style:italic;} 
	
 /*  Template positions ( template )
  	----------------------------------------------------------------------------------------- */
	
	/* 	#main_header: */
		#main_header { 
			/*position:fixed; */
			top:0; left:0;
			width:100%;
			height:auto; 
			background-color:#FFF;
			overflow:visible;
			padding-top: 50px;
		}

		#main_header .top-bar{
			background: #0c6986;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 50px;
			float: left;
			z-index: 1100;
			border-bottom: 1px solid #e0e0e0;
		}

		#main_header .top-bar .open-menu{
			width: 40px;
			height: 40px;
			margin: 5px 0 0 10px;
			color: #fff;
			background: #0c6986;
			font-size: 24px;
		}

		.close-menu{
			position: absolute;
			right: 10px;
			top: 10px;
			background: none;
			color: #0c6986;
			font-size: 24px;
		}

		.menu-mobile{
			background: #cce0e7;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1101;
			width: 100%;
			height: 100%;
			padding: 20px;
			box-sizing: border-box;
			transform: translate3d(-100%, 0, 0);
			transition: transform 0.4s ease-in-out;
		}

		.menu-mobile.show{
			transform: translate3d(0, 0, 0);
		}

		.menu-mobile a{
			color: #0c6986;
			display: block;
			padding: 10px;
			font-weight: 400;
			font-size: 14px;
		}
		
		#main_header>div { 
			position:relative; 
			width:100%; 
			height:auto;
		}
		#main_header>div>div{
			padding: 9px 0;
			margin:0 auto 0 auto;
			max-width: 960px;
		}
		#main_header>div>div,
		#main_header>div>nav.menu
		 { 
		 	display:block;
			position:relative; 
			width:100%;
			height:auto;  
			float:none; clear:both;
		}

		#main_header>div>nav.menu{
			background-color: #A3AF26;
			border-bottom: 2px solid #fff;
		}

		#main_header>div>hr{
			display: none;
		}
		
		#main_header>div>div>h2 { 	
			position:absolute; 	bottom:0; right:0; 
			display:block;  
			line-height:1;
			display: none;
		}
		
		#main_header>div>div>h2>span { 
			margin-right:5px; 
			font-size:70%;
		}
		
		#main_header .buttons {
			position:absolute; top: 14px; right:0;
			width:auto; margin:0 ;padding:0;
		}

		#main_header .buttons .icon {
			margin-top: 0; margin-bottom: 0;
		}
		
		#main_header .buttons>* {
			margin-right:0;	margin-left:3px;
		}
		
		#main_header hr { margin-bottom:5px;}

		#main_header>div>nav.menu{
			display: none;
		}
	
	/* 	#MenuMain: */
		 #MenuMain
		 { 
			position:fixed; top:0; left:0; bottom:0; right:0;
			background-color:#FFF;
			padding:20px 10%  20px 10%;
			overflow:auto;
			height:100%;
			margin:0 auto 0 auto;
			max-width: 960px;
		}
		
		#MenuMain a{
			position: relative;
			font-family: 'PT Sans Narrow', sans-serif;
			width: auto;
			height: 36px!important;
			padding: 0 16px;
			line-height: 36px;
			float: left;
			color: #fff;
			font-size: 20px;
			text-decoration: none;
			font-weight: 400;
		}
		
		#MenuMain a:first-child{
			padding-left: 0;
		}
	
	/* 	#main_article: */
		#breadcrumb {
			position:relative;
			display:block;
			width:100%;
			height:auto;
			margin-bottom:5px;
		}
		
	/* 	#breadcrumb: */		
		#breadcrumb>span, #breadcrumb>a {
			float:left; clear: none;
			font-size:0.7em;
			line-height:1.4;
			font-weight:normal;
			margin-right:3px;
		}
		
	/* 	#logo, #logoCompensate: */
		#logo, #logoCompensate {
			 width:100%;  max-width:400px; /* width: 50%; @width > 800px. */
			 height:auto;
			 margin-bottom:15px; /* margin-bottom:0; @width > 800px. */
			 padding: 10px 20px 0 20px;
			 box-sizing: border-box;
		}
		 #logoCompensate { visibility: hidden; display: none; }
			
	/* 	#main_article: */
		#main_article { 
			position:relative; 
			width:100%;  
			margin:	0 auto 20px auto; 
		}
		
		#main_article>div { 
			position:relative;	
			/*width:95%;  max-width:980px;*/ /* width: 88%; @height > 400px. */
			height:auto; 
			margin:0 auto 0 auto; 
		}
		
		#banner { 
			position:relative;
			width:100%; /*	width: 88%; margin-left12%; @height > 400px. */
			height:auto; 		
		}

		.page-image{
			background: #cce0e7;
		}

		.page-image-in{
			background-repeat: no-repeat;
			background-position: 50% 50%;
			background-size: cover;
			width: 100%;
			height: 176px;
			max-width: 1300px;
			margin: 0 auto;
		}

		.article-main{
			margin: 0 auto 0 auto;
    		max-width: 960px;
			width: 100%;
			font-family: 'PT Sans',Arial,Helvetica,sans-serif;
			padding: 20px;
			box-sizing: border-box;
		}

		.article-main p{
			font-size: 14px;
		}

		footer{
			background: #a3ae39;
			border-top: 2px solid #fff;
			overflow: visible;
		}

		footer #footer-in{
			width: 100%;
			min-width: 0;
			max-width: 960px;
			min-height: 10px;
			height: auto!important;
			height: 10px;
			margin: 0 auto;
			position: relative;
			overflow: visible;
		}

		footer #footer-in #plant{
			position: absolute;
			left: -101px;
			bottom: 0;
			background: url(img/v2/footer-bg.png) no-repeat;
			width: 101px;
			height: 240px;
			display: block;	
		}

		footer #footer-in #footer-logos{
			width: 75%;
			padding: 15px;
			float: left;
			box-sizing: border-box;
			clear: none;
		}

		footer #footer-in #footer-naw{
			width: 25%;
			padding: 15px;
			float: left;
			box-sizing: border-box;
			clear: none;
		}

		footer #footer-in #footer-naw ul{
			width: 100%;
			margin: 0;
			float: left;
			list-style: none;
			padding: 0;
		}

		footer #footer-in #footer-naw ul li{
			width: 100%;
			float: left;
			color: #fff;
		}

		footer #footer-in #footer-naw ul li.title {
			font-weight: 700;
			color: #333;
		}
		
		/*	#main_article>div>div see:  margin-left12%; @height > 400px. */
		
	/* 	#main_footer: */
		#main_footer { 
			position:fixed; bottom: 0; left:0; 
			width:100%; 
			height:auto; 
		}
		#main_footer>div { 
			position:relative;	
			width:95%; max-width:980px;
			height:auto; 
			margin:0 auto 0 auto;
		}
		
		#main_footer>div>img {
			width:10%; 
			height:auto;
		}
			
	
	/* 	#account: */
	
		#account>p , #account div.message{
			display:block; clear:both;
			margin: 10px 0 20px 0;
			width:95%;
		}
	#account .frmLogin {
		margin:10px 0 10px 0;
	}
	 	
		 	
		#account .frmLogin label {
			display: none; clear:left; float:left;
			visibility: hidden;
			
			margin:10px 5px 0 0;
			width: 135px;
			font-size:0.8em; font-weight:bold;color: #A3AF26;
			
		}
		
		#account .frmLogin label.after {
			display: block; clear:right; float:left;
			visibility:visible;
			margin:0 0 0 5px;
		}
		
		#account .frmLogin input {
			display:block; clear:right; float:left;
			width:95%; 
			margin:0 0 10px 0;
		}
		
		#account .frmLogin input[type="checkbox"] {
			width:auto;
				clear:left;
				margin:5px 0 15px 0;
		}
		
		 #account>button {
			display:block; clear:none; float:right;
			width:auto;
			margin:0 0  5px;;
			padding: 2px 5px 3px 5px;
			text-align:center;
			background-color: #A3AF26;
			color: #FFF;
		 }
	
	    #account .frmLogin button {
			display:block; clear:both; float:none;
			width:auto;
			margin:10px 0 5px 0;
			padding: 2px 5px 3px 5px;
				line-height:1.2;
				font-size:14px;
			text-align:center;
			background-color: #A3AF26;
			color: #FFF;
		}
		
		 #account .frmLogin a.frmBtn {
			display:inline; clear:both; float:none;
			
			margin:10px 0 5px 0;
			padding: 2px 5px 3px 5px;
			font-weight:normal;
			line-height:1.2;
			font-size:14px;
			
			text-align:center;
			background-color: #A3AF26;
			color: #FFF;
		}

		#account .frmLogin a.frmBtn:hover ,  #account button:hover { background-color: #006888; text-decoration:none; }
		
			
	/*  Z-indices: */	
	   .popupbox 					{ z-index:400;	} 
		#MenuMain 					{ z-index:300;	} 
		#main_header 				{ z-index:200;	} 
		#main_article				{ z-index:100;	}
		#main_footer				{ z-index:10; 	} 
 	
			
	
		
	


 /*  Navigation  ( template )
  	----------------------------------------------------------------------------------------- */
	
	
	
	/* 	menu-item / button: */
		.button{
			position: relative;display:block; float:left; 
			font-size:14px;  line-height:1;
			color: #FFF; background-color: 	#A3AF26;
			text-decoration:none;
			padding: 4px 3px 0 3px;
			margin: 5px 3px 5px 0;
			height: 19px; width:auto;
		}
			
		a.current, a.current:visited 			{ color:#000; } 
		.button:hover { background-color: #006888;}
		
		.button>img {height:14px; }
		.button:hover {cursor:pointer; clear:none;}

 /*  Content link classes ( template )
  	----------------------------------------------------------------------------------------- */		
		
		span.note_popup { color: #006888; text-decoration:none; font-style:italic; font-weight:bold; }
	
	/*	btnSaveAricle _________________________________________________________ */
	img.btnSaveArticle {
		width:18px; height:auto;
		display:block;
		position:absolute; top:5px; right:0;
		background-color: #A3AF26;
		padding:2px;
	}
	img.btnSaveArticle:hover {cursor:pointer; background-color: #006888;}
	
	span.btnRemoveArticle,
	span.btnRemoveArticleAll {
		width:20px; height:20px;
		display:block;
		position:absolute; top:7px; right:2px;
		background-size:cover;
		
	}
	
	span.btnRemoveArticle,
	span.btnRemoveArticleAll { 
		background-image:url(img/x_normal.png);
	}
	span.btnRemoveArticle:hover,
	span.btnRemoveArticleAll:hover { 
		background-image:url(img/x_hover.png); 
		cursor:pointer;
	}
	h1.report {background-color: #A3AF26; color:#FFF; font-size:22px; font-weight:normal; padding:2px 0 2px 1%;}
	
	/*	Popupbox _________________________________________________________ */	
 		.popupbox {
			position: fixed; 
			width:260px;
			background-color:#FFF;
			border: solid thin  #006888;
			padding:10px;
			min-height:100px;
			overflow:hidden;
		}
		
		.check_items .popupbox {width:180px;}

 		.popupbox h2 { font-size:1.1em;  margin-bottom:3px;color: #006888;}
 		.popupbox h2:first-letter {text-transform:capitalize; }
		.popupbox img {width:100%; height:auto;}
		
		.popupbox>img.boxtip_up,.popupbox>img.boxtip_down {
			display:block;
			position:absolute; left:0;
			width:10px; height:10px;
			background-size:cover;
		
		}
		.popupbox>img.boxtip_up 	{top:0px; 		background-image:url(img/boxtip_up.png); }
		.popupbox>img.boxtip_down 	{bottom:0px; 	background-image:url(img/boxtip_down.png); }
	
	/*	list _________________________________________________________ */
		
		
		ul.list {
			margin:5px 0 5px 0;
			padding:0;
		}
		ul.list ul.list ul.list {margin-left:1%;}
		
		ul.current {  padding-bottom:10px; margin-bottom:20px; }
		
		ul.list>span, ul.list>a {
			display:block; width:100%;
			clear: both;
			font-weight:normal !important;
			
			line-height:1;
			color: #FFF; background-color: #A3AF26;
			padding: 3px 1% 3px 1%;
		}
		
		ul.list>span:hover, ul.list>a:hover { background-color: #006888; cursor:pointer; text-decoration:none !important;}
		ul.list>span.current {color:#000;}
		ul.list>li {
			display:block;
			list-style:none;
			margin: 0 0 0 1%;
		}
		
		ul.list>li>div.content {  margin:0; }
		
		ul.list>li>div.content h1 {font-size:1.1em;}
		
		
		ul.note li>h2.open { background-color: #A3AF26; color: #FFF; display:block; clear:both; margin-top:15px; padding: 2px 1% 2px 1%; max-width:550px;}
		ul.note li>h2.open:hover {color:#FFF; text-decoration:none; cursor:pointer; background-color: #006888;} 
		
		ul.note li>div.content {
			margin: 5px 0 20px 2%;
			width:90%; max-width:500px;
			padding:5px;
			border: thin  #006888 solid;
			
		}
		
		ul.list>li>h2 {width:100%; clear: both; margin-top:5px !important; font-size:1em;   }
		
		
		ul.list>li>h2:hover {cursor:pointer; color: #A3AF26; text-decoration:underline;}
		ul.list>li>h2:first-letter{text-transform:capitalize; }
		ul.list>li>div {margin:5px 0 30px 1%; font-size:1.2em; }
		ul.list>li>div>img {width:20%; margin-right:2%; clear: none; float:left;margin-bottom:15px;}
		ul.list>li>div>p {  clear:none; float:left; }
		
		section.introduction>h1 {font-size:1.1em; }
		section.introduction { 
			margin-left:1%; 
			width:90%; max-width:600px;  
			margin-top:10px;
		
		}

 /* Question
  	----------------------------------------------------------------------------------------- */		
		ul.list > li > div.content h1.question , div.question label.question{font-size:0.8em; color: #A3AF26; }
		
		ul.list > li > div.content div.question_box, div.question{ 
			margin:10px  0 10px 0;
		 	width:90%; max-width:600px; 
			line-height:1.05; font-size:0.95em;
			border: solid thin  #A3AF26;
			padding:10px;
		 
		} 
		
		ul.list > li > div.content div.question_question input[type="text"] {
			clear: both;
			float:right;
			text-align:right;
			font-size:0.8em;
			width:60px;
			
		}
		
		ul.list > li div.KeyQuestion h3>span{background-color: #A3AF26; color:#FFF; padding:2px 0 2px 1%%; width:90%; max-width:600px; }
		
 /* Check
  	----------------------------------------------------------------------------------------- */
	
	div.check_header {
		border:solid thin  #006888;
		padding:5px 1% 5px 1%;
		width:80%;
		
	}
	
	
	div.check_header>div>label,
	label.chckitem {
		display:block;
		clear: both;
		font-size:0.8em;
		color: #006888;
		height:auto;
		padding: 3px 0 3px 0;
	}
	
	div.chckitem {margin:0;}
	
	div.check_header>div>input, label.chckitem>input {float:left; margin: 0 3px; 0 0; top: -3px; display:block; clear:none; width:10%; max-width:16px;  }
	div.check_header>div>span, label.chckitem>span {display:block; clear:none; float:left; width:79%;}
	
	div.check_header>h2 {font-size:0.8em; color: #A3AF26; clear: none; float:left; margin-left:2px;}
	div.check_header>span.btnCheckListSettings {
		display:block; position:relative; float: left; clear: none;
		margin-top:9px;
		width:16px; height:16px;
		padding:2px;
		background-color: #A3AF26;
		background-image:url(img/icon_settings.png);
		background-size:cover;
	}
	
	div.check_header>span.btnCheckListSettings:hover {
		cursor: pointer;
		background-color: #006888;
	}
	
	
	
	 div.check_items ul
  {
	 display:block;
	 clear:both; float:none;
	 padding:0;
	 font-size:1em;
	 color: #A3AF26; 
	 font-weight:bold;
 }
 
 

 

  div.check_items li
  {
	  display:block;
	 clear:both; float:none;
	  padding:0;
	  margin:0;
	 list-style:none;
	 
	  font-weight:normal; 
	 
	 color:#006888
 }
 
  
 
 
 
 div.check_items li>span
  {
	  margin-left:2px;
	  font-style:italic;
	  color:#C8CF7D;
  }
  
  div.check_items li>input {
	  float:left; margin: 1px 3px 1px 0;}
	  
 /* Calculate
  	----------------------------------------------------------------------------------------- */	
	 a.calculate {
		 
	 
	  display:block;
	  position:relative; 
	  float:none; clear:both;
	  margin-top:20px !important;
	  background-color: #A3AF26 !important;
	  line-height:1;
	  height:auto !important;
	  padding: 3px 0 2px 0;
	  color:#FFF;
	  font-weight:normal;
	  margin:20px 0 10px 0;
	  text-align:center;
	  text-transform:lowercase;
	 
	 
	 
	  
	  width:70px;
  }
  
 a.calculate:hover {
	  background-color:#006888!important;
	  text-decoration:none;
  }
	
	
 /* Harmonica
  	----------------------------------------------------------------------------------------- */
	
			div.harmonica_item>nav {
				position: relative;
				display:block; clear:none; float:left;
				width:100%;
				background-color: #A3AF26;
				color:#FFF;
				margin-top: 10px;
				
			}
			div.harmonica_item>nav>div.inner {
				width:99%;
				margin:3px auto 2px auto;
			}
			
			div.harmonica_item>nav:hover {
				background-color: #006888;
				cursor:pointer;
			}
			
			nav.btnHarmonica {
				position: relative;
				display:block; clear:none; float:left;
				width:18px; height:18px;
				margin:2px 2px 0 0;
				background-size:	cover;
			    background-image:url(img/icon_menu_closed.png);
			}
			nav.btnHarmonica:hover 	{ cursor:pointer;}
			
		
			div.harmonica_item nav.open 	{ background-image:url(img/icon_menu_open.png); }
			
	ul.maintenance>li {
		background-color:#C8CF7D;
		width:98%;
		padding:1px 0.5% 1px 0.5%;
		margin:3px 0 0 0;
	}
	ul.maintenance>li:nth-child(odd) { background-color:#D0F4F4;}
	
	ul.maintenance>li:hover {background-color: #006888;}
	
	ul.maintenance>li>span {float:right;}
	
	ul.maintenance>li button {background-color: #A3AF26; font-size:0.9em; color:#FFF;}
	ul.maintenance>li button:hover {background-color:#D0F4F4 !important; color:#000;}
	
	ul.maintenance>li button.delete { background-color:#BC261F; font-weight:bold; font-stretch:expanded;}
	ul.maintenance>li button.delete:hover { background-color:#000 !important; color:#BC261F;} 
	
	ul.maintenance>li ul>li { list-style-type:none;}
	ul.maintenance>li ul>li {
		width:98%;
		padding:1px 0.5% 1px 0.5%; 
	
	background-color:#FFF;
	
	}
	
	ul.maintenance>li ul>li:hover {background-color:#F7FFD3;} 
	
	ul.maintenance>li ul>li>button.delete {float:right;}
	
	ul.maintenance>li ul select {width:85%; }
	
	
	

 /* header_settings (report(
  	----------------------------------------------------------------------------------------- */
	
	div.header_settings {
		border:solid thin  #006888;
		padding:0;
		margin: 20px auto 10px 0;
		width:99%; max-width:500px;
		
	}
	
	div.header_settings>div.inner {
		
		width:98%;
		margin: 10px auto 10px auto;
		
	}
	
	div.header_settings label,
	div.header_settings p,
	div.header_settings button,
	div.header_settings select {
		display:block; clear:both;
		margin: 5px 0 0 0;
	}
	
	div.header_settings select , div.header_settings p, div.header_settings input[type="text"]{ width:98%; font-size:0.8em;}
	
	div.header_settings label { font-size:0.8em; color: #A3AF26;}
	
	div.header_settings button {
		padding:3px 5px 2px 5px;
		background-color:#A3AF26;
		color: #FFF;
		text-align:center;
		text-transform:lowercase;
	}
	
	div.header_settings select option.no_owner {
		font-style:italic;
		color:#666;
		
	}
	
	div.header_settings button:hover {background-color: #006888;}
	

	div.header_settings>label.btnShowHide { font-size:0.8em; color: #A3AF26; clear: none; float:left; margin:5px 0 0 3px;}
	div.header_settings>span.btnShowHide {
		display:block; position:relative; float: left; clear: none;
		margin:5px 0 5px 1%;
		width:16px; height:16px;
		padding:2px;
		background-color: #A3AF26;
		background-image:url(img/icon_settings.png);
		background-size:cover;
	}
	
	div.header_settings>span.btnShowHide:hover {
		cursor: pointer;
		background-color: #006888;
	}
	
	div.header_settings h2 {font-size:1em; color: #006888; clear: both; }
	/*
	div.header_settings>div>label
	 {
		display:block;
		clear: both;
		font-size:0.8em;
		color: #006888;
		height:auto;
		padding: 3px 0 3px 0;
	}
	
	div.chckitem {margin:0;}
	
	div.header_settings>div>input, label.chckitem>input {float:left; margin: 0 3px; 0 0; top: -3px; display:block; clear:none; width:10%; max-width:16px;  }
	div.header_settings>div>span, label.chckitem>span {display:block; clear:none; float:left; width:79%;}
	*/
	
	
	 input.maintenance{ width:98%; font-size:0.8em; margin-left:1%}
	  label.maintenance {display:block; clear:both; font-size:0.8em; color: #A3AF26; margin-left:1%; width:98%}
	div.shared_observations select {font-size:0.7em; margin-left:1%}
	
	div.shared_observations button {background-color: #A3AF26; color:#FFF; margin-left:5px; font-size:0.8em;}
	div.shared_observations button:hover { background-color: #006888;}
	
	
	
			nav.btnFolder, nav.btnFolderOpen {
				position: relative;
				display:block; clear:none; float:left;
				width:16px; height:16px;
				margin:0 1px 0 0;
				background-size:	cover;
			   
			}
			nav.btnFolder {  background-image:url(img/icon_menu_closed.png);}
			nav.btnFolderOpen {  background-image:url(img/icon_menu_open.png);}
			nav.btnFolder:hover, nav.btnFolderOpen:hover 	{ cursor:pointer;}
	
	
	
	
 /*  Color classes ( template )
  	----------------------------------------------------------------------------------------- */
  	
	   .green 				{color: #A3AF26;}
	   .blue 				{color: #006888;}
	   .brown				{color: #953E07;}
	   .purper 				{color:	#8A1FBC;}
	   .red 				{color:	#BC261F;}
	   .shadegreen 			{color:	#C8CF7D;}
	   
	   .green_bck 			{background-color: 	#A3AF26;}
	   .blue_bck  			{background-color:	#006888;}
	   .brown_bck  			{background-color: 	#953E07;}
	   .purper_bck 			{background-color:	#8A1FBC;}
	   .red_bck 			{background-color:	#BC261F!important;}
	   .shadegreen_bck 		{background-color:	#C8CF7D;}
	   
	   .shadegreen_bck_important {background-color:	#C8CF7D !important;}
	   .shadegreen_bck_important:hover {background-color:	#006888 !important;}
	   
	   .hover_blue_bck:hover {background-color:	#006888!important;}
	   
	   .green_border 		{border-color: 	#A3AF26;}
	   .blue_border  		{border-color:	#006888;}
	   .brown_border  		{border-color: 	#953E07;}
	   .purper_border 		{border-color:	#8A1FBC;}
	   .red_border 			{border-color:	#BC261F;}
	   .shadegreen_border 	{border-color:	#C8CF7D;}
	   
	

 /*  Helper classes ( template )
  	----------------------------------------------------------------------------------------- */
	 /* 	warning : */
	 		.warning {color:	#BC261F;}
			
	img.article_icon {
		display:inline; 
		background-color: #A3AF26;
		height:16px; width:16px;
		/*padding:3px;*/
		}
		
	
	
	label.option {
		display:block;
		clear: both;
		font-size:0.8em;
		color: #006888;
		height:15px;
		padding: 0;
		margin: 2px 0 0 0;
		
	
	}
	label.option>input {float:left; margin: 1px 3px; 0 0;  display:block; clear:none;  width:13px; height:13px; }
	label.option>span {display:block; clear:none; float:left; width:79%;}
	
	  /* 	imagecontainer classes : */
			div.imagecontainer	 {
				display:block; float:none; display:block;
				width:100%;  
				margin:10px 0 10px 0;
			}	
		
			div.imagecontainer img {display:block; float:left; clear:none; height:auto; margin:0;} 
		
			div.imagecontainer img.images1 			{width:100%;}
			div.imagecontainer img.images2 			{width:47.5%; }
			div.imagecontainer img.images3 			{width:30%; }
			div.imagecontainer img.images4 			{width:21.25%;}
			div.imagecontainer img.next 	        {margin-left:5% !important;}
			
			.srcLR:hover {cursor:pointer;}

	
	/*  Classes to show / hide elements depending on window sizes (will be overwritten by media queries) */
		.MinWidth800 	{  display: none 	!important; 	visibility: hidden; }
	
		
		.MaxWidth800 	{  display:	inherit !important; 	visibility:visible; }
		.MinHeight600 	{  display: none 	!important; 	visibility: hidden; }
		.MaxHeight600 	{  display:	inherit !important; 	visibility:visible; }
		.MinHeight400 	{  display: none 	!important; 	visibility: hidden; }
		.MaxHeight400 	{  display:	inherit !important; 	visibility:visible; }
	
	/*  Cross-browser box shadow: */
		.shadow {  
			-moz-box-shadow: 3px 3px 4px #000; /* Firefox/Mozilla */  
			 -webkit-box-shadow: 3px 3px 4px #000; /*Safari/Chrome */  
			 box-shadow: 3px 3px 4px #000; /* Opera & hoe het zou moeten */  
			 /* Voor IE 8 */  
			-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";  
			/* Voor IE 5.5 - 7 */  
			filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');  
		} 
		
		
	/*  test mail: */	
		.testmail {
			margin: 20px 5% 20px 25%;
			width: 70%;
			padding:10px;
			background-color:#F1FFFE;
			font-family:"Courier New", Courier, monospace;
			font-size:12px;
		}
		
		.testmail>h3  {font-size:10px; margin:0;}
		.testmail>h3>span {width:50px;font-size: 8px; font-weight:bold; margin-right:2px; display:block; clear:none; float:left;}
		.testmail>div.body {margin-top:10px; border-top: 1px solid #000; padding-top:30px;}
		
		/*  .btnRight: */
		
		button.topright {
			
			display: block; clear:both; float:right;
			margin:5px  0 10px 0;
			padding: 2px 5px 3px 5px 2px;
			text-align:center;
			min-width:70px;
			
			color: #FFF; background-color: #A3AF26;
			
			
		}
		button.topright:hover {  background-color: #006888 !important;}
 
 /*  Helper classes ( Boilerplate default )
  	----------------------------------------------------------------------------------------- */
	
	/*	Image replacement: */
		.ir {
			background-color: transparent;
			border: 0;
			overflow: hidden;
			/* IE 6/7 fallback */
			*text-indent: -9999px;
		}
		
		.ir:before {
			content: "";
			display: block;
			width: 0;
			height: 150%;
		}

	/* 	Hide from both screenreaders and browsers: h5bp.com/u */
		.hidden {
			display: none !important;
			visibility: hidden;
		}
	
	/* 	Hide only visually, but have it available for screenreaders: h5bp.com/v*/
		.visuallyhidden {
			border: 0;
			clip: rect(0 0 0 0);
			height: 1px;
			margin: -1px;
			overflow: hidden;
			padding: 0;
			position: absolute;
			width: 1px;
		}
	
	/* 	Extends the .visuallyhidden class to allow the element to be focusable
	   	when navigated to via the keyboard: h5bp.com/p
	*/
		.visuallyhidden.focusable:active,
		.visuallyhidden.focusable:focus {
			clip: auto;
			height: auto;
			margin: 0;
			overflow: visible;
			position: static;
			width: auto;
		}
	
	/*	 Hide visually and from screenreaders, but maintain layout */
		.invisible {
			visibility: hidden;
		}
	
	/* Clearfix: contain floats
	
	  	For modern browsers
	  	1. The space content is one way to avoid an Opera bug when the
	       `contenteditable` attribute is included anywhere else in the document.
	   	   Otherwise it causes space to appear at the top and bottom of elements
	       that receive the `clearfix` class.
	  	2. The use of `table` rather than `block` is only necessary if using
	       `:before` to contain the top-margins of child elements.
	 */
		.clearfix:before,
		.clearfix:after {
			content: " "; /* 1 */
			display: table; /* 2 */
		}
		
		.clearfix:after {
			clear: both;
		}
	
	/*	For IE 6/7 only: Include this rule to trigger hasLayout and contain floats. */
		.clearfix {
			*zoom: 1;
		}


 /*  Media queries style adjustments for viewports that meet the condition ( template )
  	----------------------------------------------------------------------------------------- */
	
	
	
	
	@media only screen and (min-width: 800px) {
		
	/* 	#logo (#logoCompensate): */	
		#logo, #logoCompensate { height: 60px; width: auto; margin-bottom:0; padding: 0;}
		
		
		
		/* 	#MenuMain: */
		 #MenuMain
		 { 
		 	display: block;
			position:relative;	
			height:auto;
			background-color:transparent;
			padding:0;
			overflow:hidden;
		
		 
		}
		#main_header>div>nav.menu{
			display: block;
		}
		.article-main{
			padding: 10px 0;
		}
		
		#main_header{
			padding-top: 0;
		}
		
		#main_header .top-bar{
			display: none;
		}
		
		/*	list _________________________________________________________ */	
			ul.list>span 	{ padding-left: 1%; padding-right: 1%;}
			ul.list>li 		{ margin-left: 1%;}
	
		
	/* 	Menu class: */	
		span.button, nav.menu a	{ clear:none; width:auto;  }	
		
	/*  Classes to show / hide elements depending on window sizes: */	
		.MinWidth800 	{  display:	inherit !important; 	visibility: visible; }
		.MaxWidth800 	{  display: none 	!important; 	visibility: hidden; }
		
	
	/*  Icon classes */
	     nav.menu a.icon,nav.menu a.icon:visited,
		.icon, .icon:visited  {
			width: 22px;
			height: 22px;
			margin: 5px 3px 5px 0px;
			padding: 0;
			color: #FFF; background-color: 	#A3AF26;
			text-decoration:none;
			background-position:center;
			background-size:contain;
			background-repeat:no-repeat;
			display:block;
			clear:none;
			float:left;
		
		}
		 nav.menu a.icon.red,nav.menu a.icon.red:visited,
		.icon.red, .icon.red:visited  {
			background-color: #BC261F;
		}
		 nav.menu a.icon:hover,
		.icon:hover,
		 nav.menu a.icon.red:hover,
		.icon.red:hover {
			background-color: #006888;
			cursor: pointer;
			
		}
		.icon.account 			{ background-image:url(img/v2/icon_account.svg); }
		.icon.account.black 	{ background-image:url(img/v2/icon_account_black.svg); }
		.icon.history 			{ background-image:url(img/v2/icon_history.svg); }
		.icon.img.lr 			{ background-image:url(img/v2/icon_lr.svg); }
		.icon.img.hr 			{ background-image:url(img/v2/icon_hr.svg); }
		.icon.reset 			{ background-image:url(img/v2/icon_reset.svg); }
		.icon.info 				{ background-image:url(img/v2/icon_info.svg); }
	
	
	/*  Z-indices: */		
		#main_header nav.buttons	{ z-index:1110;	} 
		
		
	@media only screen and (min-width: 600px) {
			
			/* 	#account: */
				#account>p {width:500px;}
				
				#account div.message>p, #account div.message>input { width:360px;  margin-left: 140px;}
				#account .frmLogin label { display:block; visibility:visible; }
				#account .frmLogin input { width:360px; }	
				#account .frmLogin button ,  #account .frmLogin a.frmBtn{ margin-left: 140px; }
				
				#account .frmLogin input[type="checkbox"] {width:auto; margin-left: 140px; }
				
		}
				
	}
	

	
	@media only screen and (min-height: 400px) {
		
		#main_header  hr {  margin-left:12%; width:88%;}
		#btnOpenMainMenu{ margin-left:12%;}
		
		
	/* 	#main_article: */
		#main_article>div>div { 
/*
			margin-left:12%; 
			width:88%;
*/
		}
		
	/* 	#banner: */	
		#banner { 
			/*width:88%; 
			margin-left:12%;*/	
		}
			
	/* 	Classes to show / hide elements depending on window sizes: */		
		.MinHeight400 	{  display:	inherit !important; 	visibility: visible; }
		.MaxHeight400 	{  display: none 	!important; 	visibility: hidden; }	
		
	
	}
	
	@media only screen and (min-height: 400px) and (min-width: 800px){
		/*#MenuMain { margin-left:12%;width:88%;}*/
		
	}
	
	
	
	@media only screen and (min-height: 600px) {
	

		
	/*	Classes to show / hide elements depending on window sizes: */	
		.MinHeight600 	{  display:	inherit !important; 	visibility: visible; }
		.MaxHeight600 	{  display: none 	!important; 	visibility: hidden; }
		
	
	
	}
	

	

 /* Media queries for print ( Boilerplate default )
  	----------------------------------------------------------------------------------------- */
	
	@media print,
		   (-o-min-device-pixel-ratio: 5/4),
		   (-webkit-min-device-pixel-ratio: 1.25),
		   (min-resolution: 120dpi) {
		/* Style adjustments for high resolution devices */
	}

	/* ==========================================================================
	   Print styles.
	   Inlined to avoid required HTTP connection: h5bp.com/r
	   ========================================================================== */

		@media print {
			* {
				background: transparent !important;
				color: #000 !important; /* Black prints faster: h5bp.com/s */
				box-shadow: none !important;
				text-shadow: none !important;
			}
		
			a,
			a:visited {
				text-decoration: underline;
			}
		
			a[href]:after {
				content: " (" attr(href) ")";
			}
		
			abbr[title]:after {
				content: " (" attr(title) ")";
			}
	
		/* 	Don't show links for images, or javascript/internal links:*/
			.ir a:after,
			a[href^="javascript:"]:after,
			a[href^="#"]:after {
				content: "";
			}
	
			pre,
			blockquote {
				border: 1px solid #999;
				page-break-inside: avoid;
			}
		
			thead {
				display: table-header-group; /* h5bp.com/t */
			}
		
			tr,
			img {
				page-break-inside: avoid;
			}
		
			img {
				max-width: 100% !important;
			}
		
			@page {
				margin: 0.5cm;
			}
		
			p,
			h2,
			h3 {
				orphans: 3;
				widows: 3;
			}
		
			h2,
			h3 {
				page-break-after: avoid;
			}
	}

/* Changes by Bratpack */
#main_header>div{ overflow:visible;}

#main_header .buttons {
    position: static;
    top: auto;
    right: auto;
  	float:right;
	padding:19px 0 19px 7px;
}

#top-nav{ font-family: 'PT Sans Narrow',Arial,Helvetica,sans-serif; width: auto; min-height:10px; padding:19px 0; float:right; clear: none;}
#top-nav ul {
    min-height: 10px;
    margin: 0;
	padding: 0;
    float: left;
    list-style: none;
}
#top-nav ul li {
    min-height: 10px;
    float: left;
    line-height: 22px;
    color: #a3ae39;
	font-size: 14px;
	margin: 0;
}
#top-nav ul li a {
    min-height: 10px;
    padding: 0 10px;
    float: left;
    font-size: 16px;
    line-height: 22px;
    color: #333;
	font-weight:400;
}
#top-nav ul li a:hover {
    color: #a3ae39;
	text-decoration: none;
}

#MenuMain{ overflow:visible;}

#MenuMain a:before {
    position: absolute;
    left: 50%;
    bottom: -11px;
    width: 0;
    height: 0;
    margin: 0 0 0 -17px;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 11px solid #a3ae39;
    content: '';
    display: none;
    z-index: 2;
}

#MenuMain a:after {
    position: absolute;
    left: 50%;
    bottom: -13px;
    width: 0;
    height: 0;
    margin: 0 0 0 -19px;
    border-left: 19px solid transparent;
    border-right: 19px solid transparent;
    border-top: 13px solid #fff;
    content: '';
    display: none;
    z-index: 1;
}

#MenuMain a.current:after, #MenuMain a.current:before, #MenuMain a:hover:after, #MenuMain a:hover:before{ display: block;}