/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ERROR - INFO - LOGIN - DOWNLOAD */

	#LOGIN, #ERROR, #INFO{
	
	}
	
	.popupbody {
	
		min-height:70px;

	} 
	
	.popupbody p{
		line-height:1.6em;

	} 
	
	
	.popupbody img{
		float: left;
		margin-right:10px;
		border:0px;
	} 
	
	
	.popupimage{
		float:left;
		width:80px;
	}
	
	.popupcontent{
		float:left;
		width:240px;
	}

	#LOGIN_ERROR{
		margin-bottom:10px;
		color:red;
		font-size:0.9em;
		font-style:italic;
	
	}

	#LOGIN{
		padding:15px;
	}
	
	#LOGIN label{
		display:block;
		margin-bottom:5px;
	}
	#LOGIN input{
		display:block;
		margin-bottom:15px;
	}
	
	#UPLOAD{
		width:350px;
		height:220px;
		text-align:center;
	}
	
	#status{
		margin-bottom:10px;	
		text-align:left;
		height:90px;
		width:340px;
		overflow:auto;
	}

	
	/*LOADING*/
	.modal {
		display:    none;
		position:   fixed;
		z-index:    1000;
		top:        0;
		left:       0;
		height:     100%;
		width:      100%;
		background: rgba( 255, 255, 255, .8 ) 
		            url('http://i.stack.imgur.com/FhHRx.gif') 
		            50% 50% 
		            no-repeat;
		opacity: 0.80;
		-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
		filter: alpha(opacity = 80)
	};
	
	body.loading {
	    overflow: hidden;   
	}

		
	body.loading .modal {
	    display: block;
	}
 	
 	
 	
 	/* COLORS:
	 * background gray: 3b3738
	 * frame gray: 575757
	 * orange: ff7e00
	*/

	
	.popup{
	}

	.foto_links_boven{
		float:left;
		margin: 0px 10px 10px 0px;
		border:1px solid #8c2e2e;
	}

	.foto_links_midden{
		float:left;
		margin: 10px 10px 10px 0px;
		border:1px solid #8c2e2e;
	}

	.foto_rechts_boven{
		float:left;
		margin: 0px 0px 10px 10px;
		border:1px solid #8c2e2e;
	}

	.foto_rechts_midden{
		float:left;
		margin: 10px 0px 10px 10px;
		border:1px solid #8c2e2e;
	}

	.zoom span{
		background-image:url('../SYS/IMG/icon.zoom.png');
		display:block;
		width:30px;
		height:30px;
		position:relative;
	
	}
	
	
	
	
	
	
@media screen and (min-width: 0px)  {

	
	html{
		margin:0 auto;
		background-color:#3b3738;
		color:#ffffff;
		font-family: Helvetica, sans-serif;
		font-weight:lighter;
		margin:0px;
		padding:0px;
	
	}
	
	body{
		width:100%;
		
	}
	
	input,textarea{
		border:1px solid #ffffff;
		border-radius: 5px;
		padding:3px 8px;
		margin:3px;
		
	}
	
	.input-medium{
		width:120px;
	}
	
	.input-short{
		width:50px;
	}
	
	textarea{
		font-family:inherit;
	}
	
	label{
		float: none;
		display:block;
	}
	
	
	.auto_select input, .auto_select textarea{
	
	
	}
	
	.auto_select .frm_focus{
		
	}
	
	.auto_select .button, .button{
		width:auto;
		padding:3px;
		border-radius: 5px;
		background-color:#575757;
		position:relative;
		color:#ffffff;
		margin:10px 0px;
		cursor:pointer;
	}
	
	.auto_select .button:hover, .button:hover{
		background-color:#ff7e00
	}
	
	.auto_select .button:active, .button:active{
		top:1px;
		left:1px;
	}
	
	.frm_error{
		border:1px solid #ff0000;
		background-color:#cacaca;
	}
	
	.point{
		cursor:pointer;
	}
	
	
	a{
		outline: none;
		text-decoration:underline;
		color:#cacaca;
	}
	

	p{
		line-height:1.8em;
	}
	
	h1,h2,h3,h4{
		margin-bottom:40px;
		
	}
	
	h1{
		font-size:1.9em;
	}
	
	h1 strong{
		color:#ff7e00;
		font-weight:normal;
	}
	
	h2{
		font-size:1.6em;
	}
	
	h3{
		font-size:1.3em;
	}
	
	strong{
		font-weight:bolder;	
	}
	
	small{
		font-size:0.8em;	
	}
	
	.floatleft,.imagefloat{
		float:left;
	}
	

	.floatright{
		float:right;
	}
	
	.imagefloat{
		margin:0px 8px 8px 0px;
	}
	

	.clear{
		clear:both;
	    height:0;
	    font-size: 1px;
	    line-height: 0px;
	}
	
	ul{
		list-style-image:url("../IMG/navlist-small.png");
		margin-left:15px;
	}

	
	.rounded-frame{
		background-color:#575757;
		border-radius:10px;
		min-height:40px;
		margin:10px 0px;
		padding:20px 20px 5px 20px;
	}
	
	#BANNER{
		background-image:url("../IMG/banner2.jpg");
		height:300px;
		background-position:top center;
		position:relative;
	}
	
	.home-diensten-list h1{
		font-size:0.9em;
		margin-bottom:14px;
	}
	
	#FOOTER{
		background-image:url("../IMG/footer.jpg");
		background-repeat:no-repeat;
		min-height:96px;
		background-position:top center;
		background-color:#ff7e00;
		position:relative;
		margin-top:40px;
	}
	
	#BANNER_CONTENT h1{
		color:#3b3738;
		margin-bottom:10px;
		font-size:2.5em;
		font-weight:bold;
		letter-spacing:0.11em;
		float:left;
	}
	
	#BANNER_CONTENT p{
		color:#ff7e00;
		letter-spacing:0.83em;
	}
	
	#NAV>li{
		background-color:#575757;
		cursor:pointer;
	}
	
	#NAV li:hover, #NAV .selected-nav{
		background-color:#ff7e00;
	}
	
	.container{
		margin:0 auto;
	}
	
	.home-projecten{
		height:150px;
	}
	
	.home-project{
		float:left;
		position:relative;
		height:90px;
		margin-bottom:20px;
		overflow:hidden;
	}
	
	.home-project img{
		margin-right:30px;
		border: 3px solid #ffffff;
	}
	
	.home-projecten p{
		font-size:0.9em;
		font-style:italic;
	}
	
	
	#CONTENT{
		background-image:url('../IMG/background.jpg');
		background-repeat:repeat-x;
		background-position:top center;
		min-height:500px;
		padding-top:40px;
	}
	
	.animation{
		-o-transition:background 0.3s ease-in;
		  -ms-transition:background 0.3s ease-in;
		  -moz-transition:background 0.3s ease-in;
		  -webkit-transition:background 0.3s ease-in;
		  /* ...and now override with proper CSS property */
		  transition: background 0.3s ease-in;
	}
	
	.spacer{
		margin:40px 0px;
	}
	
	#CONTENT_OFFERTE a{
		color:#ffffff;
		text-decoration:none;
	}
	
	.watdoenwe-item{
		float:left;
		width:260px;
		margin-right:50px;
		text-align:center;
	}
	
	.watdoenwe-item img{
		width:260px;
		border-radius:10px;
		margin-bottom:30px;
	}
	
	.watdoenwe-item h1{
		color:#ff7e00;
		font-size:1.2em;
		margin-bottom:10px;
	}
	
	.watdoenwe-item p{
		line-height:1.5em;
		font-size:0.9em;
	}
	
	#FRM_CONTACT input,#FRM_OFFERTE input{
		font-size:0.9em;
		margin-bottom:10px;
	}
	
	#FRM_CONTACT textarea, #FRM_OFFERTE textarea{
		font-size:0.9em;
		width:500px;
		height:80px;
	}
	
	#OFFERTE_CHECK label{
		margin-bottom:14px;	
	}
	
	#OFFERTE_CHECK >div{
		font-size:0.8em;
	}
	
	.galerij_foto{
		float:left;
		width:150px;
		height:150px;
		
	}
	
	.galerij_foto img{
		border:3px solid #ffffff; 
		width:100px;
		height:100px;
	}

}

@media screen and (max-width: 600px)  {		/* DIT IS VOOR DE MOBIELE BROWSERS */
	
	.spacerimage{
		width:100%;
	}
	.container{
		width:90%;
		padding:0px 10px;
	}
	
	#CONTENT_CONTACT,#CONTENT_OFFERTE{
		display:none;
	}
	
	#BANNER_LOGO{
		padding-top:5px;
		width:130px;
		margin:0 auto;
	}
	
	#BANNER_LOGO img{
		width:130px;
	}
	
	#BANNER_LOGO img{
		width:130px;
	}
	
	#BANNER_CONTENT {
		width:100%:
		margin:0 auto;
		text-align:center;
		
	}
	
	#BANNER_CONTENT h1{
		float:none;
		margin-bottom:0px;
		font-size:1.8em;
	}
	
	
	#BANNER_CONTENT p{
		color:#ff7e00;
		letter-spacing:0.43em;
	}
	
	#CONTENT_NAVIGATION{
		width:100%;
		margin-bottom:50px;
	
	}
	
	#NAV{
		list-style-image:none;
		margin:0 auto;
		width:320px;
	}
	
	#NAV>li{
		height:52px;
		width:52px;
		margin-bottom:6px;
		cursor:pointer;
		border-radius:10px;
		float:left;
		background-repeat:no-repeat;
		background-position:top left;
		margin:0 3px;
	}
	
	#NAV a{
		text-decoration:none;
		color:#ffffff;
	}
	
	#NAV p{
		display:none;
	}
	
	#NAV_HOME{
		background-image:url("../IMG/home-nav.png");
		
	}
	
	#NAV_CONTACT{
		background-image:url("../IMG/contact2-nav.png");
	}
	
	#NAV_OFFERTE{
		background-image:url("../IMG/offerte-nav.png");
	}
	
	#NAV_GALERIJ{
		background-image:url("../IMG/galery-nav.png");
	}
	
	#NAV_ABOUT{
		background-image:url("../IMG/about-nav.png");
	}
	
	.home-project{
		height:66px;
	}
	
	.home-project img{
		height:60px;
		margin-right:10px;
	}
	
	#FOOTER{
		font-size:0.9em;
		height:200px;
		text-align:center;
	}
	
	#FOOTER_LEFT{
		position:relative;
		top:80px;
	}
	
	#FOOTER_RIGHT{
		position:relative;
		top:90px;
	}
	
	.watdoenwe-item{
		width:100%;
		margin-right:50px;
		text-align:center;
	}
	
	
	
	#FRM_CONTACT textarea, #FRM_OFFERTE textarea{
		font-size:0.9em;
		width:90%;
		height:80px;
	}
	
	.frm-contact-column{
		margin-bottom:40px;
	}
	
	#FRM_CONTACT_PART_CHECK1{
		margin-bottom:0px;
	}
	
	.contact-label{
		float:left;
		width:70px;
		margin-bottom:20px;
	}
	
	.contact-waarde{
		float:left;
		width:200px;
	}
	
	.galerij_foto{
		width:90px;
		height:90px;
	}
	
	.galerij_foto img{
		width:70px;
		height:70px;
	}
	
	#FRM_OFFERTE_FILE{
		font-size:0.8em;
		width:200px;
	}
}

@media screen and (min-width: 600px)  {		/* DIT IS VOOR DE STANDAARD BROWSERS */
	
	body{
		min-width:980px;
	}
	.container{
		width:980px;
	}
	
	#BANNER_LOGO{
		position:relative;
		top:25px;
		left:40px;
		float:left;
	}
	
	
	#BANNER_CONTENT{
		position:relative;
		top:80px;
		left:100px;
		width:400px;
		float:left;
	}
	
	

	
	#CONTENT_LEFT{
		float:left;
		padding-left:30px;
		width:250px;
	}
	
	#CONTENT_RIGHT{
		width:620px;
		float:right;
	}
	
	#CONTENT_NAVIGATION,#CONTENT_CONTACT, #CONTENT_OFFERTE{
		margin-bottom:50px;
		
	}
	#NAV{
		list-style-image:none;
		margin-left:0px;
	}
	
	#NAV>li{
		height:10px;
		padding:18px 0px 24px 70px;
		background-image:url("../IMG/navlist.png");
		background-repeat:no-repeat;
		width:180px;
		margin-bottom:6px;
	}
	
	#NAV li:hover, #NAV .selected-nav{
		background-image:url("../IMG/navlist-white.png");
	}
	
	#NAV p{
		position:relative;
		top:-7px;
	}
	
	
	#NAV a{
		text-decoration:none;
		color:#ffffff;
	}
	
	.first-nav{
		border-top-left-radius:10px;
		border-top-right-radius:10px;
	}
	
	.last-nav{
		border-bottom-left-radius:10px;
		border-bottom-right-radius:10px;
	}
	
	#CONTENT_CONTACT h1{
		font-size:1.4em;;
		color:#ff7e00
	}
	#CONTENT_CONTACT, #CONTENT_OFFERTE{
		position:relative;
	}
	
	#CONTENT_OFFERTE{
		height:50px;
		cursor:pointer;
	}
	
	#CONTENT_OFFERTE:hover{
		background-color:#ff7e00;
	}
	
	
	.home-contact-line{
		margin-bottom:30px;
	}
	.home-contact-icon{
		float:left;
	}

	.home-contact-data{
		float:left;
		position:absolute;
		left:80px;
		font-size:0.9em;
		line-height:1.3em;
	}	
	
	
	#CONTENT_OFFERTE .home-contact-data{
		font-size:1.4em;
		padding-top:7px;
	}	
	
	
	#HOME_CONTACT_GSM{
		padding-top:12px;
	}
	
	#HOME_CONTACT_EMAIL{
		font-size:0.8em;	
	}
	
	.home-diensten-list{
		float:left;
		width:280px;
	}
	
	.contact-label{
		float:left;
		width:100px;
		margin-bottom:20px;
	}
	
	.contact-waarde{
		float:left;
		width:200px;
	}
	
	.frm-contact-column{
		float:left;
		width:300px;
	}
	
	.frm-contact-part{
		margin-bottom:30px;
	}
	
	
	#FOOTER{
		font-size:0.9em;
		position:relative;
	}
	
	#FOOTER a{
		color:#ffffff;
	}
	
	#FOOTER_LEFT{
		float:left;
		width:300px;
		position:relative;
		top:69px;
	}
	
	#FOOTER_RIGHT{
		text-align:right;
		float:right;
		width:400px;
		position:relative;
		top:45px;
	}
	
	.spacerimage{
		width:100%;
	}
}