/*
Theme Name: Marijke Rouhof
Theme URI: Not for download
Description: 
Version: 3.000
Author: Thijs ten brinck
Author URI: http://spiekerboks.nl/
Tags: 
*/

/* colors:
Body Background:	#fff; [Black]
Body Text:			#000; [White]
Highlight 1:	 	#ffb829;[donker geel]
Highlight 2:	    #f28d1f;[oranje]

*/

/* Crossbrowser reset, based on Eric Meyers CSS Reset*/
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, font, 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 {
  margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; }
ol, ul	{  	list-style: none; }
:focus	{  	outline: 0; }

/* Typografie */
body		{	font-family: Arial, sans-serif; font-size: 15px; }
p		{	margin: 0 0 28px 0;  line-height: 21px;  letter-spacing: 1px; text-align: left;}
a		{	text-decoration: none; font-weight: normal; }
a:hover	{	}

h1,h2,h3,h4,h5,h6, .nav
		{ 	font-family: "Century gothic", Arial, sans-serif; }
h1		{ 	font-size: 21px;   }
h2		{ 	font-size: 18px;	}
h3		{ 	font-size: 21px;	}
h4		{ 	font-size: 14px;	margin: 0;}
.small	{	font-size: 12px;	line-height: 21px;  letter-spacing: 1px;}
acronym, abbr
		{	border-bottom: 1px dashed #e6b006; cursor:help; }

/* Structuur */
html		{ 	}
body  	{	margin: 0 auto;	text-align: center; }


#FullWidth,
.wrapper,
.footer	{	width: 100%; }

#MaxWidth,
.header,
.wrapper .container,
.footer .container{	width: 960px; margin: 0 auto;	text-align: left; position: relative;}

/* Kleurvlakken */
#Wit,
body,
.footer .nav
		{	background: #fff; color: #222;}
body a,
.footer .nav a
		{	color: #000;}
body a:hover,
.footer .nav a:hover
		{	color: #333;}

#Oranje,
.wrapper 	{	background: #ffb829 url(images/bg.png) repeat-x bottom;}

.wrapper a:hover
		{	color: #fff;}
#DonkerGrijs,
html,
.container .adres,
.container .nieuws,
.container .infobox
		{	background: #333; color: #ccc; }
.container .adres a,
.container .nieuws a,
.container .infobox a
		{	color: #fff; }
.container .adres a:hover,
.container .nieuws a:hover,
.container .infobox a:hover
		{	color: #ffb829; }
		
#LichtGrijs,
.header .nav,
.footer .side
		{	background: #ddd; color: #222; }
		
		
/* Reusables */
#nav,
.nav li	{ 	position: relative; }
.nav li a	{	font-weight: bold; font-size: 21px; color: #000;
			display: block; width: 120px; margin: 0 10px 7px 0;}
.nav a:hover{	color: #ffb829;}

.nav li ul {	position:absolute; left:140px; top: 0; width: 360px;}
.nav li ul li{	float: left; }
.nav li ul li a{	color: #fff; font-size: 21px;}

#clearfix, /* For modern browsers */
.container:before,
.header:before,
.container:after,
.header:after {   content:"";  display:table; }
.container:after,
.header:after{   clear:both; }
.container,
.header {   zoom:1;} /* For IE 6/7 (trigger hasLayout) */


/* Header */
.header	{	}
.logo		{	width: 420px; padding: 40px 40px 40px 0; float: left; }
.header .nav
		{	width: 420px; padding: 53px 40px 40px 40px; float: left; }
		
/* Wrapper */
.wrapper .container	{	padding: 40px 0 0 0;}
.side		{	width: 500px; float: left;}

#Sideboxes,
.container .adres,
.container .nieuws,
.container .portret,
.container .infobox,
.container .side-container
 		{	width: 180px; margin: 0 40px 40px 0; float: left;}
.container .adres,
.container .nieuws,
.container .infobox
		{	height: 155px;  padding: 10px; }
.container .infobox
 		{	width: 440px; clear: both;}
.container .portret
		{	width: 220px; margin: 0 40px 40px 20px;}
.container .infobox,
.container .side-container
		{	margin: 0 40px 0 0; }
			
.container .portret img { width: 100%;}
.content	{	width: 440px; float: left; padding: 0 0 40px 0;}
.content img{	max-width: 100%;}

/* Footer */
.footer	{	margin: 0 0 40px 0;}
.footer .nav{	width: 460px; padding: 40px 0 ; float: left;}
.footer .nav li ul li a
		{	color: #ccc; font-size: 21px;}
.footer .side{	width: 420px; height: 20px; float: left; padding: 120px 40px 40px 40px; position: relative; text-align: right; }
.footer .side a.boks
		{	color: #fff; font-size: 21px; font-weight: bold;}
.footer .side a.boks span { display: none; }			

/* Big screens ----------- */
@media only screen
and (min-width : 1250px) {

#MaxWidth,
.header,
.wrapper .container,
.footer .container{	width: 1160px;  }

.logo		{	width: 520px;   }
.header .nav
		{	width: 520px;   }
.side		{	width: 600px;  }
#Sideboxes,
.container .adres,
.container .nieuws,
.container .infobox,
.container .side-container
 		{	width: 240px; }
.container .adres,
.container .nieuws,
.container .infobox
		{	height: 190px;  padding: 10px; }
.container .infobox
 		{	width: 540px; }
.container .portret
		{	width: 260px; margin: 0 40px 40px 20px;}
.container .infobox,
.container .side-container
		{	margin: 0 40px 0 0; }
			

.content	{	width: 540px;  }

.footer .nav{	width: 560px; }
.footer .side{	width: 520px;  }

}

/* Smartphones & Small Tablets ----------- */
@media only screen
and (max-width : 1000px) {

#MaxWidth,
html,
body,
.header,
.wrapper .container,
.container .side .adres,
.container .side .side-container,
.container .side,
.header .nav,
.footer .container {	width: 100%; margin: 0; padding: 0; height: auto;}

.logo,
.container .content {	width: 90%; max-width: 600px; margin: 0; padding: 0;}

.side {float: right;}

#Padding,
.logo,
.header .nav ul,
.container .content,
.container .side .adres p
		{	padding: 20px 10px;  margin: 0; height: auto;}
.logo		{	max-width: 475px; }
.footer .side { width: 100%; padding: 10px 0; text-align: left;}
.header .nav ul ul { padding: 0;}

.header .nav li { float: left; padding: 0 15px 80px 0; }
.footer .nav li { float: left; padding: 0 15px 80px 10px; }
.header .nav li a,
.footer .nav li a { width: auto;}

.header .nav li ul,
.footer .nav li ul {	position:absolute; left:0; top: 30px; width: 120px;}
.header .nav li ul li {	float: none;  clear: both; padding: 0 10px 0 0; display: block;}
.footer .nav li ul li {	float: none;  clear: both; padding: 0 10px 0 10px; display: block;}

.footer .nav { 	display: block; width: 100%;}

.footer .side a.boks
		{	color: #222; font-size: 16px; font-weight: normal; margin: 0 10px }
.footer .side a.boks span { display: inline; }
#Hide,
.nieuws,
.portret { 	display: none;}


}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 440px) {
/* Styles */

.header .nav li { float: left; padding: 0 10px 10px 0; }
.header .nav li a,
.footer .nav li a,
.footer .nav li ul li a {font-size: 18px;}
#Hide,
.header .nav ul ul { display: none;}
.footer .nav { 	display: block; width: 100%;}
.footer .nav li {	position: relative; padding: 0 0 60px 10px; width: auto;}
.footer .nav li ul { position: absolute; left: 0; top: 25px;}
}

.adres { display: none; }
.nieuws { height: 439px!important; }