/*
Theme Name: Schrijfburo-online
Theme URI: http://www.schrijfburo-online.nl
Author: Schrijfburo-online - Lisette Rozenberg
Author URI: http://www.schrijfburo-online.nl
Description: Op maat gemaakte website voor Noorlander techniek met responsive design. Gebouwd door Lisette Rozenberg. Laatste update: 12 november 2014. | Webdesign en programmeren: Schrijfburo-online
Version: 2.0
*/


@import url("css/reset.css");
@import url("css/responsive-gs-24col.css");
@import url("css/ie.css");


html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
a{font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
div.clear{clear:both;width:100%;height:1px;overflow:hidden;}

html, body{
	overflow-x: hidden;
	font-size: 100%;
}

div.stwonline {
color: #ffffff;
text-align: center;
border-top: #82909a solid 1px;
padding-top: 10px;
margin-top: 25px;
}

* {
/*transition:all .5s ease-in-out; 
    -o-transition:all .5s ease-in-out; 
    -moz-transition:all .5s ease-in-out; 
    -webkit-transition:all .5s ease-in-out; */
}

body {
	font: 12px/18px Verdana, sans-serif;
	color: #000;
	font-weight: normal;
	background: #fff;}

i, cite, em, var, address, dfn {
font-style: italic;
}

p {
font: 12px/18px Verdana, sans-serif;
	color: #000;
padding: 5px 0px 5px 0px;
}

strong, b {
font-weight: bold;
}

ol, ul {
	 list-style: square; 
	padding: 0px 0px 0px 20px;
}

ol#menu-footerdienstenmenu, ul#menu-footerdienstenmenu {
padding: 0px;
color: #ffffff;
}

ol#menu-contactmenu, ul#menu-contactmenu {
padding: 0px;
color: #ffffff;
}

ol.sidebar, ul.sidebar {

	padding: 0px;
}

li.sidebar {
 list-style: none; 
color: #ffffff;
padding: 0px;
}

li.footermenu {
 list-style: none; 
color: #ffffff;
padding: 0px;
}

.footermenu a {
color: #ffffff !important;
padding: 1px;
}

ol.footerLinks, ul.footerLinks {
padding: 0px;
}


li.sidebarLinks {
margin: 0px;
 list-style: none; 
}

blockquote, blockquote p, q {
quotes: none;
font-style: italic;
padding: 10px 15px 10px 5px;
}

div.container{
}


div.headerAfbeelding{
	height: 370px;
	width: 100%;
 	margin: 0 auto;
	padding-top: 50px;
	padding-bottom: 35px;
background-repeat: no-repeat;
  background-size: cover;
	}

	


nav{
	background: #5b88a9;
	padding: 3px;
	}
	
nav.row{
	height: 50px !important;
}

nav div.logo{
	float: left; 
	display: inline;
	height: 46px;
	
}

nav div.search{
	float: right; display: inline;
	margin: 12px;
}
	
main.row{
	float: left; display: block;
	width: 100%;
	margin: 40px 0 0 0;}	
	
	

textarea {
	width: 85%;
background: #FAFAFA;
border: #6E6E6E solid 1px;
}



article.content{
}

aside{
	}
div.directPersoon {	
	background: #C8CCD0;
	padding: 5px 3px 10px 3px;
	color:#FFF;
}
div.logoAside {
	text-align:center;
}
div.waterAside {
}

div.blueRow{
	margin: 50px 0 0 0;
	background: #5b88a9;}


div.dienstenContainer{
	display: block;
	margin: 60px 0 0 0;
}

div.dienstBlock{
	float: left;
display: inline;
width: 40%;
margin: 0px 0px 30px 60px;
	
}

div.dienstBlock div.dienstImage{
	float: left;
display: inline;
width: 100%;
padding-right: 1em;
}
	
div.dienstBlock div.dienstImage img {
  display: block;
  width: 100%;
  height: auto !important;
}
	
div.dienstBlock div.dienstBeschrijving{
	float: left; display: inline;
	width: 95%;}


footer.footerRow{
	/*margin: 40px 0 0 0;
	
	padding: 45px 0 20px 0; */
	padding: 45px 0px 0px 0px;
}
div.footerAfbeelding{

background-image: url(images/Blauwfooter.png);
background-repeat: no-repeat;
background-size: cover;
 margin: 0 auto;
padding-top: 50px;
padding-bottom: 35px
background-position: 50% 0;
}

footer.footerRow div.footerBlock{
	float: left; display: inline;
	width: 25%;
	
	margin: 0 0 0 5em;
}

footer.footerRow div.footerBlock.diensten{
	float: left; display: inline;
	width: 25%;
	
	margin: 0 0 0 2em;
}

article.newsArticle{
	float: left; display: block;
	margin: 0 0 40px 0;
}


article.newsArticle div.newsImage{
	float: left; display: inline;
	width: 20%;
	padding-right: 1em;}
	
article.newsArticle div.newsImage img {
  display: block;
  width: 100%;
  height: auto !important;
}
	
article.newsArticle div.newsBeschrijving{
	float: left; display: inline;
	width: 80%;}


/* ##### TEKST ##### */

h1{
	color: #000;
	font-size: 30px;
line-height: 35px;
	font-weight: normal;
	margin: 0 0 20px 0;
	}
	
div.blueRow div.container h2{
	color: #fff;
	text-align: center;
	font-size: 30px;
	font-weight: normal;
	padding: 15px 0;
}

h3{
	font-size: 16px;
	line-height: 36px;
}


/* ##### OPSOMMINGEN ##### */
nav div.hoofdmenu{
	float: left; display: inline;
	margin: 12px 0;}

nav ul.hoofdmenu li{
	float: left; display: inline;
	border-right: 1px solid #fff;
	padding: 0 7px;}
	
nav ul.hoofdmenu li:last-child{
	border-right: 0px;}








/* ##### LINKS ##### */

a,
a:link{
	color: #000000;
	text-decoration: none;}

a:hover{
	color: #566792;
text-decoration: underline;}

nav ul.menu li a,
nav ul.menu li a:link{
	color: #fff;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: normal;}
   
.tinynav{display: none;}


nav ul.hoofdmenu li.mobile,
li.mobile{
	display: none;
}

a.white {
color:#FFFFFF;	
}

/* For tablets & smart phones */
@media (max-width: 1000px) {

		div.footerAfbeelding{

background-image: url(images/Blauwfooter3.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
 margin: 0 auto;
padding-top: 30px;
padding-bottom: 10px;
background-position: 50% 0;
}

}

/* For tablets & smart phones */
@media (max-width: 767px) {
	

footer.footerRow div.footerBlock{
	float: left; display: inline;
	width: 25%;
	
	margin: 0 0 0 3em;
}

	div.headerAfbeelding{
		display: none;}		

div.headerMobielAfbeelding{
	height: 150px !important;
	background-image: url(images/Headermobiel.jpg) !important;
	background-repeat: no-repeat;
	background-size: cover;
 	margin: 0 auto;
	background-position: center;
}
	nav{
		padding: 0;
		background: white;
	}
	
	nav div.hoofdmenu.span_17{
		background: #5b88a9;
		width: 100%;
		padding: 4px 3px 8px 3px;
		margin: 0;
	}
	
	div.logo.span_2{
		/* width: 100%;
		background: #fff;
		clear: both;
		height: 150px; */
		display: none;
	}
	
	div.search.span_5{
		width: 100%;
		margin: 0;
		padding: 4px 3px 8px 3px;
		background: #5b88a9;
	}
	
	div.search.span_5 input{
		width: 100%;
		height: 30px;}
		
	h3{
		font-size: 26px;}
	
	span{
		font-size: 10px;}
	
	aside{
		display: none !important;}
		
	div.dienstBlock.span_10{
		width: 40.5%;
		margin: 0 0 0 23px;
	}
	
	div.dienstBlock div.dienstImage{
		width: 100%;
	}
	
	div.dienstBlock div.dienstBeschrijving{
		text-align: center;
		width: 100%;}
	
	div.dienstBlock div.dienstBeschrijving h3{
		display: inline-block;}
	
	div.dienstBlock div.dienstBeschrijving span{
		display: none;
	}
		
		div.footerAfbeelding{

background-image: url(images/Blauwfooter3.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
 margin: 0 auto;
padding-top: 30px;
padding-bottom: 10px;
background-position: 50% 0;
}
		
}



 /* For smartphones */
@media (max-width: 480px) {
	div.headerAfbeelding{
		display: none;}
	
	nav{
		padding: 0;
		background: white;
	}
	
	nav div.hoofdmenu.span_17{
		background: #5b88a9;
		width: 100%;
		padding: 4px 3px 8px 3px;
		margin: 0;
	}
	
	div.logo.span_2{
		width: 100%;
		background: #fff;
		clear: both;
		height: 150px;
	}
	
	div.search.span_5{
		width: 100%;
		margin: 0;
		padding: 4px 3px 8px 3px;
		background: #5b88a9;
	}
	
	div.search.span_5 input{
		width: 100%;
		height: 30px;}
	
	aside{
		display: none !important;}
	
	div.dienstBlock.span_10{
		width: 40.5%;
		margin: 0 0 0 23px;
	}
	
	div.dienstBlock div.dienstImage{
		width: 100%;
	}
	
	div.dienstBlock div.dienstBeschrijving{
		text-align: center;
		width: 100%;}
	
	div.dienstBlock div.dienstBeschrijving h3{
		display: inline-block;}
	
	div.dienstBlock div.dienstBeschrijving span{
		display: none;
	}
	
	footer div.container div.footerBlock{
		display: none;}

footer.footerRow div.footerBlock.diensten{
	display: none;
}
		
	footer div.container div.footerBlock.contact{
		display: inline;
		width: 80%;
		margin-left: 37%;
		margin-right: 20%;
	}
	
	li.mobile{
		display: block;

	}
li.mobile a{
color: #ffffff !important;
padding: 1px;
}
	
	nav ul.hoofdmenu li.mobile{
		display: inline;}
		
	
		
	h3{
		font-size: 20px;}
	
	span{
		font-size: 12px;}
		
		div.footerAfbeelding{

background-image: url(images/Blauwfooter2.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
 margin: 0 auto;
padding-top: 30px;
padding-bottom: 10px;
background-position: 50% 0;
}

article.newsArticle div.newsBeschrijving {
float: left;
display: inline;
width: 100%;
	}
article.newsArticle div.newsImage {
width: 50%;
padding-right: 1em;
}

}