/* CSS Document */

@font-face {
	font-family: Bunglon;
	src: url('../fonts/capture_it-webfont.eot');
	src: url('../fonts/capture_it-webfont.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/capture_it-webfont.woff') format('woff'),
		 url('../fonts/capture_it-webfont.ttf') format('truetype'),
		 url('../fonts/capture_it-webfont.svg#CaptureitRegular') format('svg');
	font-weight: normal; font-style: normal;
}

html, body			{ margin:0; padding:0; background-color: #EEFFEE; }
.clear:after		{ content: ""; display: block; clear: both; }
.succes, .error	{ display:block; margin:20px; padding:10px; font-weight:bold;}
.succes			{ background:#8f8; border:#080 solid 2px; color:#080;}
.error			{ background:#f88; border:#800 solid 2px; color:#800;}



/* containers */
#header				{ height: 150px; position:fixed; width:100%; top:0; 
						background-image: linear-gradient(180deg,rgba(200,249,229,1.00) 0%,rgba(130,198,170,1.00) 100%); box-shadow: 0 0px 10px 0px #222; background-color: #82c6aa; }
	#headerTop		{ width:960px; margin:0 auto; box-sizing:border-box; padding:8px 8px 0 0; position:relative;}

#wrapper			{ max-width:960px; width:100%; margin:165px auto 0 auto; min-height:250px; padding:10px;
						color:rgba(102,102,102,1.00); background-color:#fff; border:2px solid #ccc; border-radius:10px;}
#footer				{ text-align:center;}

/* menu */
#menu li			{ list-style:none; float:left; width:20%; text-align:center; display:block; padding:1px 0;}
#menu ul			{ padding:0;}
#menu a				{ color: #000; text-decoration:none; font-weight:bold; display:block;}
#menu a:hover		{ color: #666; }

.submenu ul			{ color: #333;}
.submenu a			{ color: #333 !important; text-decoration:none; border-bottom:#333 dotted 1px;}
.submenu a:hover	{ color: #000; border-bottom:#666 solid 1px;}

/* misc */
#headerLogo			{ float:right; height: 101px; width:150px;}
.bunglon			{ font-family:Bunglon; }

@media screen and (max-width: 980px),(max-device-width: 980px) and (orientation: portrait) {
	#header			{ }
	#headerTop		{ width:auto;}
	#s2				{ display:none;}
	#wrapper		{ padding:10px; border-left:none; border-right:none; border-radius:0; box-sizing:border-box; max-width:100%; }
}

@media screen and (max-width: 499px),(max-device-width: 499px) and (orientation: portrait) {
	html, body		{ background:#fff;}
	#headerLogo		{ display:none;}
	#wrapper		{ border:none; padding-top:0;}
	#menu li		{ width:30%;}
}
@media screen and (max-width:350px),(max-device-width: 350px) and (orientation: portrait) {
	#s1				{ display:none;}
}