/*
Theme Name: gooitz.nl
Description: Template voor gooitz.nl
Version: 1.0
*/

/** 

	paars: 			#332a86
 	font:			#635f8b
	donkergrijs:	#303030
	lichtgrijs:		#cfcedc
	lichtpaars:		#e6e4f8
	
**/ 


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{background: transparent;border:0;margin:0;padding:0;vertical-align:baseline;}body{line-height:1;}h1,h2,h3,h4,h5,h6{clear:both;font-weight: normal;}ol,ul{list-style: none;}blockquote{quotes: none;}blockquote:before,blockquote:after{content: '';content: none;}del{text-decoration: line-through;}table{border-collapse:collapse;border-spacing:0;}a img{border: none;}

/** FONT STYYLING **/

h1 {
	color: #332a86;
	text-transform: lowercase;
	font-size: 46px;
	font-family: 'ArialRounded', Arial, Helvetica, sans-serif;
}

#main #left h1 { margin-bottom: 20px; }

h2 {
	color: #332a86;
	text-transform: lowercase;
	font-size: 29px;
	font-family: 'ArialRounded', Arial, Helvetica, sans-serif;
	margin-bottom: 35px;
}

h3 {
	color: #332a86;
	text-transform: lowercase;
	font-size: 16px;
	font-family: 'ArialRounded', Arial, Helvetica, sans-serif;
	margin-bottom: 15px;
}

/** Layout **/

body {
	font-family: "ArialRounded", Arial, Helvetica, sans-serif;
}

.wrapper {
	width: 940px;
	margin: 0 auto;	
}

#header {
	float: left;
	width: 100%;
	height: 340px;
	background: #332a86;	
	color: #fff;
	border-bottom: 1px #fff solid;
}

#grey-bar {
	float: left;
	width: 100%;
	background: #e6e4f8 url(img/bg_shadow.png) top center no-repeat;
	padding: 25px 0;
	color: #524f6a;
	height: 130px;
}

#main {
	border-top: 1px #fff solid;
	background: #fff url(img/bg_shadow.png) top center no-repeat;
	padding: 50px 0;
	float: left;
	width: 100%;
	color: #635f8b;
	font-size: 17px;
	line-height: 28px;
	font-family: Arial, Helvetica, sans-serif;
	}

hr {
	border: 1px #e6e4f8 solid;
	padding: 0;
	margin-bottom: 15px;
	display: block;
	clear: both;
}

/** Navigatie & Logo & pay-off **/

#header .wrapper { position: relative; }

#header #logo {
  position: absolute;
  left: 0;
  top: 30px;
  width: 329px;
  height: 282px;
  background: url(img/logo.png);
}

#grey-bar #pay-off {
	width: 370px;
	height: 375px;
	background: url(img/pay-off.png);
	position: absolute;
	right: 0;
	top: -238px;
}

#header #nav {
	float: right;
	height: 80px;
	text-transform: lowercase;	
	font-size: 16pt;
}

#header #nav li { float: left; }
#header #nav a { color: #fff; text-decoration: none; display: block; height: 40px; line-height: 40px; margin: 20px 0 0 0; padding: 0 15px; }
#header #nav li.current_page_item a { 
	background: #fff;
	margin: 20px 15px 0 15px;
	color: #332a86;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
#header #nav li.current_page_item a {
	position: relative;	
}
#header #nav li.current_page_item a .flupje {
	width: 14px;
	height: 9px;
	top: 40px;
	left: 50%;
	margin-left: -7px;	
	background: url(img/flupje.png) no-repeat;
	position: absolute;
}

/** QUOTES SLIDER **/

#grey-bar .wrapper { position: relative; }
#grey-bar h1 { line-height: 130px; }

#quotes { width: 640px; height: 150px;}
#quotes li {
	width:640px;
	height:150px;
	overflow:hidden; 
	float: left;
	text-transform: lowercase;	
}
#quotes li p { width: 590px; font-size: 17px; line-height: 30px; }
#quotes li h3 { color: #332a86; font-size: 13pt; font-family: Arial, Helvetica, sans-serif; margin-top: 20px; }

#nextBtn a, #prevBtn a { position: absolute; bottom: 0; right: 0; }
#nextBtn a{ display: block; width: 20px; height: 20px; background: url(img/next_button.png); cursor: pointer; text-decoration: none; }
#prevBtn a { display: block; width: 20px; height: 20px; background: url(img/previous_button.png); cursor: pointer; text-decoration: none; right: 30px !important; }

/** MAIN STYLING **/

#main ::selection, #grey-bar ::selection {
	background: #332a86; /* Safari */
	color: #fff;
}

#main ::-moz-selection,#grey-bar ::-moz-selection {
	background: #332a86; /* Firefox */
	color: #fff;
}

#main .container {
	float: left;
	width: 100%;
	margin-bottom: 40px;	
}

#main a { font-weight: bold; color: #332a86; text-decoration: none; }
#main .col {
	float: left;
	width: 300px;
	margin-right: 20px;	
}
#main .col.last { margin-right: 0; }
#main .col .title { background: #332a86; color: #fff; position: absolute; left: 0; top: 50%; font-family: 'ArialRounded'; padding: 5px 10px; margin-top: -10px; }

#main p {
	margin-bottom: 20px;
}

#main ul, #main ol {
	margin-bottom: 20px;	
}

#main #left li { list-style: inside; }

#main #left {
	width: 620px;
	float: left;	
}

#main #right {
	float: right;
	width: 300px;
	font-size: 10pt;
	color: #9794b5;	
}

#main #right .item {
	float: left;
	width: 100%;
	margin-bottom: 20px;
	border-bottom: 1px #cfcedc solid;	
}

#main #right h3 {
	font-size: 14pt;	
}

#main #right .item .avatar { float: left; margin-right: 10px; }
#main #right .item .twit { clear: right; display: block; }

img.alignleft { float: left; margin: 15px 15px 15px 0; }
img.alignright { float: right; margin: 15px 0 15px 15px; }

#main #right .children {
	padding-left: 20px;
	margin-bottom: 0;	
}

/*** BLOG HOME ***/

#blog .col {
	height: 180px;
	width: 300px;
	overflow: hidden;
	position: relative;
	text-transform: lowercase;
}

#blog .col .overlay {
	width: 300px;
	height: 180px;
	position: absolute;	
	background: url(img/blog_overlay.png) no-repeat;
	left: 0;
	top: 0;
}

#blog .col a {
	height: 180px;
	width: 300px;
	display: block;
	position: absolute;
	left: 0;
	top: 0;		
}

/** CRUMBS **/

#crumbs {
	margin-bottom: 20px;	
	font-size: 10pt;
	border-bottom: 1px #cfcedc solid;
	padding-bottom: 15px;
}
#crumbs a { text-decoration: none; color: #332a86 }

/** SOCIAL BOTTOM **/

#social {
	float: left;
	width: 100%;
	padding: 20px 0;
	border-top: 1px #cfcedc solid;
	border-bottom: 1px #cfcedc solid;	
	font-family: 'ArialRounded', Arial, Helvetica, sans-serif;
	color: #332a86;
	font-size: 22px;
	line-height: 50px;
	margin-top: 10px;
}

#social #icons {
	float: right;	
}

#social #icons a { float: left; width: 50px; height: 50px; display: block; margin-left: 10px; }
#social #icons a#twitter { background: url(img/social_icons.png) 150px 50px; }
#social #icons a#twitter:hover { background: url(img/social_icons.png) 150px 100px; }
#social #icons a#facebook { background: url(img/social_icons.png) 100px 50px; }
#social #icons a#facebook:hover { background: url(img/social_icons.png) 100px 100px; }
#social #icons a#linkedin { background: url(img/social_icons.png) 50px 50px; }
#social #icons a#linkedin:hover { background: url(img/social_icons.png) 50px 100px; }

/** DISCLAIMER **/

#disclaimer {
	float: left;
	width: 100%;
	margin-top: 20px;
	text-align: center;
	font-size: 10pt;	
}

#disclaimer a {
	font-weight: normal;
}

/** POST NAV **/

.post-nav { float: left; width: 100%; }
.post-nav .nav-previous { float: left; }
.post-nav .nav-next { float: right; }

/** CONTACT FORM **/

.wpcf7-form { padding: 20px 0; }
.wpcf7-form input[type=text] { float: left; height: 30px; padding: 0 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px #332a86 solid; }
.wpcf7-form textarea { padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px #332a86 solid; }
.wpcf7-form label { float: left; width: 200px; }
.wpcf7-form br { display: none }
.wpcf7-form p { width: 100%; float: left; }
.wpcf7-form input[type=submit] { background: #332a86; color: #fff; margin-left: 200px; font-family: 'ArialRounded'; padding: 15px; font-size: 14pt; text-transform: lowercase; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; cursor: pointer;}
.wpcf7-form input[type=text]:focus, .wpcf7-form textarea:focus { background: #f3f2fc; }

.wpcf7-response-output { float: left; }
.wpcf7-not-valid-tip { float: left; clear: both; }

/*** FONT FACE ***/

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