/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
#menuzone nav #mobilemenubutton, #mobilecontactbutton { display:none; }
.maincontainer {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -124px;		
}

footer div #social { margin-left:10px; margin-top:0px; }

footer div.left { margin:60px 10px 0px; }
footer div.right { margin:10px 0px 0px; }

#tel { padding-top:3px; display:block; float:right; }
#menuzone nav a:hover,body,nav ul.submenu a:hover,#menuzone li a.active { background-color:#201b19; } 
body {  background-image:url(../images/bck.jpg); background-repeat:repeat-x; } 

p { color:#CCC; }
.havePaddingTop { padding-top:15px; }
.haveMargin { margin:15px; }
#langselector { display:none; }
#logoholder{ text-align:center; margin:25px 0px 10px; }
.right {float:right;}
.left { float:left; }
.rightalign { text-align:right; }
.subscript {font-style:italic;font-size:11px;}

.achterblauw a,#menuzone li a.active { color:#FFF; }

#menuzone,#header { width:960px; }
#header { height:340px; background-image:url(../images/shade.png); background-position:bottom; background-repeat:no-repeat; }
#header img,img.maxwidth { max-width:100%; }
#header div.label { position:absolute; bottom:40px; left:0px; width:0px; height:60px; }
#header div.label div.shader { position:absolute; width:100%; height:60px; background-color:#222; z-index:0; left:0px; top:0px; opacity:0.6; }
#header div.label h1 { position:absolute; display:none; left:15px; top:4px; color:#FFF; font-size:21px; z-index:10; }
#menuzone {
	position:relative; 
	box-shadow:#999 1px 1px 4px 0px;
	margin-bottom:0px;
	margin-top:10px;
	z-index:100;
}

#dakwerkenmnu,nav a.havesubmenu { background-image:url(../images/arrowDown.png); background-repeat:no-repeat; background-position:120px 20px; }

nav a {
	display:block;
	height:28px; 
	width:160px; text-align:center;
	text-decoration:none;
	padding:14px 0px 3px;
	border-right:1px solid #999;
}

#menuzone a { color:#000; }
#menuzone a:hover { color:#FFF; }

nav li { margin:0px; float:left; position:relative; display:block; }

nav ul.submenu { position:absolute; width:160px; top:45px; left:0px; z-index:100; box-shadow:#999 1px 1px 4px 0px; margin:0px; display:none;  }
nav ul.submenu li { margin:0px; }
nav ul.submenu li a,nav ul.submenu li { float:none; background-color:#FFF; } 

#menuzone nav.submenu li:last-child a { border-right:1px solid #999; width:160px; }
#menuzone nav ul { margin-bottom:0px; }

nav li:hover ul.submenu { display:block; 	
				-webkit-transition: all 0.6s ease;-moz-transition: all 0.6s ease;-o-transition: all 0.6s ease;transition: all 0.6s ease; }

#menuzone nav li:last-child a { border-right:0px; width:155px; }
#menuzone nav ul.submenu li:last-child a { width:160px; }
footer { height:124px; display:block; background-color:#13100f; color:#666; background-image:url(../images/footer.png); }
footer, .push {
	height: 124px; /* .push must be the same height as .footer */
}

footer a { color:#999; text-decoration:none; }



div.teaser { background-image:url(../images/topic.png); background-position:-2px 0px; background-repeat:no-repeat; width:293px; height:175px; padding:10px 10px 5px 15px; position:relative; margin-bottom:40px; }
div.omega div.teaser { margin-left:20px; }
div.teaser h1 { font-size:18px; }
div.teaser h2 { font-size:16px; padding:0px; margin:0px;line-height:normal; margin-top:20px; }
div.teaser img { position:absolute; right:25px; top:85px; }
div.teaser div.content img { position:inherit; margin:9px; }
div.teaser div.tekstvak p { margin-right:19px; } 
div.tekstvak p { line-height:18px; }
#headerpushed { height:130px; }
#headerpushed h2 { margin:30px 1px; text-align:center; }
#offerteimage img { margin-left:45px; }

.w150 {width:150px;}

div.tekstvak p,div.tekstvak li { color:#999; }
div.tekstvak p strong { color:#DCDCDC; }
div.tekstvak h2, div.tekstvak h3 { color:#993333; }
div.teaser h2,span.beige { color:#993333; }

div.tekstvak ul {
	margin: 18px 0px;
}

div.tekstvak ul li ul {
	margin:7px 0px;
}

div.tekstvak ul li {
	margin: 6px 0px;
	margin-left:25px; list-style-type:disc;
	
}
footer #tel { margin-top:50px; margin-bottom:10px; float:none; display:block; }
/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {

		#header,#menuzone,#header.alpha {
			width: 720px;
			margin-left:20px !important;
			}
		#header { height:266px; }
		nav a { width:123px; }
		div.teaser { width:220px; margin-left:15px; }
		div.teaser img { display:none; }
		nav .submenu a { width:160px; }
		#menuzone nav li:last-child a { border-right:0px; width:100px; font-size:11px; }
		#header div.label h1 { font-size:14px; left:25px; }
		#dakwerkenmnu,nav a.havesubmenu { background:none; }
		div.omega div.teaser img { display:inline; margin:5px; width:98px; }
		.hideOnMobile { display:none; }
		#iframecontact,div.teaser  { width:220px !important; }
		.columns.alpha { margin-left:5px !important; }
		div.ten.tekstvak.alpha { margin-left:17px !important; }
		
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
			

		footer div.left,div.container #menuzone nav #dakwerkenmnu,div.container #menuzone nav a.havesubmenu,.hideOnMobile,#geogr { display:none; }
		div.container #menuzone nav a, #header .headinginfo,div.container #header #headertekst,div.tekstvak.hidemobile { display:none; }
		div.container #menuzone.active nav a { display:block; }		
		#menuzone nav #mobilemenubutton a,#menuzone nav #mobilemenubutton { display:block; }
		#logoholder img,img.flexmobile,#header,#menuzone {
			width: 390px;
			}
		#header { height:290px; }
		#header div.label h1 { font-size:14px; left:25px; }
		#menuzone { background-color:#CCC;  }
		nav ul.submenu { display:block; position:inherit; width:289px; top:0px; }
		#menuzone nav ul { margin-bottom:0px; }
		#menuzone nav ul li { margin:0px; float:none; }
		#menuzone nav a,#menuzone nav a:last-child {
			display:block;
			float:none;
			height:28px;
			width:389px; text-align:center;
			text-decoration:none;
			padding:14px 0px 3px;
			border-bottom:1px solid #333;
			border-right:0px;
		}	
		#menuzone nav li:last-child a,#menuzone nav ul.submenu li:last-child a  { width:389px; }
		#tophead { display:none; }	
		#headerpushed { height:180px; }	
		#iframecontact,div.teaser  { height:250px !important; }
		#menuzone li a#itemmnu_3,#menuzone li a#itemmnu_4,#menuzone li a#itemmnu_5 { background-color:#999; color:#333; cursor:default; height:14px; padding-top:2px; }
		div.teaser h1 { padding-top:1px; padding-bottom:4px; }
		div.omega div.teaser, div.teaser { margin-left:0px; }
		#formulier input.field, #formulier textarea.field { width:370px; }
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		footer div.left,div.teaser,.hideOnMobile { display:none; }
		div.container #menuzone nav a,#social div.addthis_toolbox, #header .headinginfo,div.container #header #headertekst,div.tekstvak.hidemobile,#geogr { display:none; }
		div.container #menuzone.active nav a { display:block; }		
		#menuzone nav #mobilemenubutton a,#menuzone nav #mobilemenubutton { display:block; }
		#logoholder img,img.flexmobile,#header,#menuzone {
			width: 290px;
			}
		#header { height:250px; }
		#header div.label h1 { font-size:14px; }
		#menuzone { background-color:#CCC;  }
		nav ul.submenu { display:block; position:inherit; width:289px; top:0px; }
		#menuzone nav ul { margin-bottom:0px; }
		#menuzone nav ul li { margin:0px; float:none; }
		#menuzone nav a,#menuzone nav a:last-child {
			display:block;
			float:none;
			height:28px;
			width:289px; text-align:center;
			text-decoration:none;
			padding:14px 0px 3px;
			border-bottom:1px solid #333;
			border-right:0px;
		}	
		#menuzone nav li:last-child a,#menuzone nav ul.submenu li:last-child a  { width:289px; }
		#tophead { display:none; }	
		#headerpushed { height:180px; }	
		div.omega div.teaser { background-size:100% 100% !important; display:block; margin-left:0px; width:279px; }
		#iframecontact,div.teaser { height:250px !important; }
		div.omega div.teaser img { display:block; float:left; }
		#dakwerkenmnu,nav a.havesubmenu { background:none; cursor:arrow; }	
		#menuzone li a#itemmnu_3,#menuzone li a#itemmnu_4,#menuzone li a#itemmnu_5 { background-color:#999; color:#333; cursor:default; height:14px; padding-top:2px; }
		div.teaser h1 { padding-top:11px; padding-bottom:24px; }
		footer div.right { float:none; width:309px; margin-top:60px; text-align:center; }
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/