/*   
Theme Name: Menno Richardson
Theme URI: http://www.mennorichardson.nl
Description: Website front-end 2011
Author: Menno Richardson 
Author URI: www.mennorichardson.nl
Version: 1.2
.
Menno Richardson
.
*/


body {
	background: #fff;
	margin: 0;
	padding: 0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
p {
	color: #555;
	font-size:13px;
	line-height:25px;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
	color: #888;
	font-size:13px;
	line-height:25px;
	margin-left:50px;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. */
	font-weight:normal;
	
}
h1, h2, h3 {
	font-family: 'Dosis', sans-serif;
	font-weight:200;
}
h1 {
	color:#FFFFFF;
	font-size:3.3em;
	text-align:center;
	width:100%;
	margin:40px 0px;
	font-weight:200;
	/*
	opacity: 0.7;
-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 70);
filter: alpha(opacity = 70);*/

}
header h1 {
	color:#666;
	font-size:2.7em;
	font-weight:200;
	text-align:center;
	width:100%;
	margin:25px 0px;
	/*
	opacity: 0.7;
-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 70);
filter: alpha(opacity = 70);*/

}
footer h1 {
	color:#FFFFFF;
	font-size:2.8em;
	text-align:center;
	width:100%;
	margin:40px 0px;

	opacity: 0.5;
-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 50);
filter: alpha(opacity = 50);

}
h2 {
	color:#ff9000;
	font-size:3.1em;
	margin:25px 0;
	padding:20px 0;
	border-bottom:#eee 1px solid;
	width:100%;
	text-align:left;
}
h3 {
	font-size:1.5em;
	font-family: 'Dosis', sans-serif;
	padding:20px 0;
}
address {
	font-family: 'Dosis', sans-serif;
	color:#fff;
	font-size:20px;
	line-height:50px;
	font-weight:bold;
	text-align:center;
	width:100%;
	opacity: 0.5;
-ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity = 50);
filter: alpha(opacity = 50);
	
}
a img, img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
	outline: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a {
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
	outline: none;
}
a:visited {
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}
/* ~~ This fixed width container surrounds all other blocks ~~ */
.container {
	width: 940px;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
#menubar {
	width:100%;
	border-bottom:#efefef 1px solid;
	position:relative;
	background-color:#FFFFFF;
	z-index:100;
	
}
#linkedinholder {
	position:absolute;
	width:40px;
	height:40px;
	right:20px;
	top:20px;
	
}
#taalwissel {
	position:absolute;
	width:40px;
	height:40px;
	left:20px;
	top:26px;
	
}
#linkedinholder a {
	display:block;
	text-indent:-1000px;
	width:40px;
	height:40px;
	background-image:url(images/facebook.png);
	background-repeat:no-repeat;
	background-position:top;
	overflow:hidden;
	
	
}
#linkedinholder a:hover {
	background-position:bottom;
	
	
}
#menushadow {
	position:absolute;
	width:100%;
	height:40px;
	background-image:url(images/menushadow.png);
	background-repeat:repeat-x;
}
figure#omslag  {
	width: 960px;
	height:300px;
	border:#222222 10px solid;
	background-color:#111111;
	margin: 0 auto;
}
#topsection {
	width:100%;
	background-color:#333;
	/*background-image:url(images/headerback.jpg);*/
}
#topsection header {
	width: 980px;
	height:500px;
	margin: 0 auto;
}
#bottomsection {
	width:100%;
	background-color:#333;
	/*background-image:url(images/footerback.jpg);*/
	position:relative;
}
#copyholder {
	width: 980px;
	height:50px;
	line-height:50px;
	border-top:#666 1px solid;
	text-align:center;
	position:absolute;
	bottom:0px;
	margin: 0 auto;
	color:#777;
	font-size:12px;
	
}

#bottomsection footer {
	width: 980px;
	height:400px;
	padding:50px 0 0;
	margin: 0 auto;
	position:relative;
}
a#inhurenKnop {
	display:block;
	position:absolute;
	color:#FFFFFF;
	text-shadow: 1px 1px 3px #886100;
	font-family: 'Dosis', sans-serif;
	font-size:24px;
	line-height:68px;
	text-decoration:none;
	text-align:center;
	width:218px;
	height:68px;
	top:15px;
	left:15px;
	border-top:#fecd38 1px solid;
	border-left:#fecd38 1px solid;
	border-bottom:#d18f00 1px solid;
	border-right:#d18f00 1px solid;
background-color:#fab700;
	/*
	-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
*/
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#ffbf00', endColorstr = '#eba100');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#ffbf00', endColorstr = '#eba100')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #ffbf00, #eba100);
background-image: -ms-linear-gradient(top, #ffbf00, #eba100);
background-image: -o-linear-gradient(top, #ffbf00, #eba100);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffbf00), to(#eba100));
background-image: -webkit-linear-gradient(top, #ffbf00, #eba100);
background-image: linear-gradient(top, #ffbf00, #eba100);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
	
}

a#inhurenKnop:hover {
	border-top:#fecd38 1px solid;
	border-left:#fecd38 1px solid;
	border-bottom:#d18f00 1px solid;
	border-right:#d18f00 1px solid;
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#34b702', endColorstr = '#0f9201');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#34b702', endColorstr = '#0f9201')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #34b702, #0f9201);
background-image: -ms-linear-gradient(top, #34b702, #0f9201);
background-image: -o-linear-gradient(top, #34b702, #0f9201);
background-image: -webkit-gradient(linear, center top, center bottom, from(#34b702), to(#0f9201));
background-image: -webkit-linear-gradient(top, #34b702, #0f9201);
background-image: linear-gradient(top, #34b702, #0f9201);
/*--IE9 DOES NOT SUPPORT GRADIENT BACKGROUNDS--*/
background-image:url(images/yes.png);
background-repeat:no-repeat;
background-position:center;
background-color:#fab700;
text-indent:-1000px;
overflow:hidden;

}
#inhurenKnopBack {
	
	width:250px;
	height:100px;
	margin:0 auto;
	background-image:url(images/black15.png);
	position:relative;
	
}



/**************************************************************
MENU
***************************************************************/
nav {
	width:420px;
	margin:0 auto;
	height:80px;
	text-align:center;
}
nav ul {

	padding:0px;
	margin:0px;
	text-align:center;
}
nav li {
	list-style:none;
	float:left;
	height:70px;
	font-size:15px;
	line-height:80px;
	}
nav li a {
	font-family: 'Dosis', sans-serif;
	font-size:1.3em;
	text-decoration:none !important;
	display:block;
	padding-right:20px;
	padding-left:20px;
	color:#333;
}
nav li a#homeknop {
	font-family: 'Dosis', sans-serif;
	font-size:1.3em;
	text-decoration:none !important;
	display:block;
	padding-right:20px;
	padding-left:20px;
	color:#333;
	overflow:hidden;
	text-indent:-1000px;
	background-image:url(images/home.png);
	background-repeat:no-repeat;
	background-position:center;
}
nav li a#homeknop:hover {
	background-image:url(images/homehover.png);
}
nav li a:hover {
	color:#000;

}

section {
	clear:both;
	/*border:#eee 1px dashed;*/
	width:100%;
	padding-bottom:50px;
}
section#werk, section#overmij {
	padding-bottom:0px;
}
#overmij article {
	width:430px;
	margin-right:40px;
	float:left;
	
}
#inhuren {
	padding:20px 50px 40px;
	margin-top:30px;
	border:#b3d1e7 1px solid;
	background-color:#f0f8fe;
	color:#0b3c5f !important;
	position:relative;
	border-radius:7px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	
}
#inhuren p, #inhuren a{
	color:#0b3c5f !important;
	
}
#beschikbaar {
	width:149px;
	height:149px;
	position:absolute;
	top:-6px;
	right:-6px;
	background-image:url(images/beschikbaar.png);
	
}
#portfolioitems article {
	width:960px;
	
}

#portfolioitems article div.portitem {
	width:300px;
	height:220px;
	margin-bottom:20px;
	margin-right:20px;
	background-color:#eee;
	float:left;
}
#portfolioitems article div.loadone {
	display:block;
}
#portfolioitems article div.loadtwo {
	display:none;
}
#meerwerkbar {
	width:100%;
	border-top:#eee 1px solid;
}
#meerwerkknop {
	display:block;
	width:160px;
	height:40px;
	margin:0px auto;
	cursor:pointer;
	color:#999999;
	font-size:14px;
	text-align:center;
	line-height:40px;
	background-color:#FFFFFF;
	margin-top:-1px;
	border-bottom:#eee 1px solid;
	border-right:#eee 1px solid;
	border-left:#eee 1px solid;
	
}

section#contact {
	padding-bottom:0px !important;
	border-bottom:#eee 1px solid;
	
}
#bel {
	width:100%;
	height:100px;
}
#bel span {
	display:block;
	font-family: 'Dosis', sans-serif;
	color:#26628d;
	font-size:2em;
	line-height:100px;
	width:100%;
	text-align:center;
}
.telefoonnummer {
	text-decoration:underline;
	
}
#contact div.contactlinks {
	width:300px;
	margin-right:40px;
	float:left;
	
}
#contact div.contactlinks img {
	padding:8px;
	border:#eee 1px solid;
	margin-bottom:-3px !important;
	
}

#contact div.contactRechts {
	width:600px;
	margin-right:0px;
	float:left;
	
}

/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, nav, article, figure {
	display: block;
}
#meerwerkform {
	border:#eee 1px dashed;
	width:100%;
	margin-bottom:20px;
	display:none;
}

/* FORMULER ID 1 CONTACT FORMULIER */

#gform_wrapper_1 ul {
margin:0px;
margin-bottom:30px;
padding:0px;
list-style:none;	
}
#gform_wrapper_1 li label {
font-size:12px;
line-height:40px;	
}
#gform_wrapper_1 {
	padding:35px;
	border:#eee 1px solid;
	border-right:#eee 5px solid;
	border-bottom:#eee 5px solid;
	margin-top:30px;
	margin-bottom:30px;
	position:relative;
	width:520px;
	height:400px;
}
#gform_wrapper_1 li.gfield  {
	margin:0px 15px;
	float:left;
}
#gform_wrapper_1 input, #gform_wrapper_1 textarea  {
	padding-left:10px;
	border:#ddd 1px solid;
	height:40px;
	width:200px;
	background-image:url(images/inputgradient.png);
	background-repeat:repeat-x;
	background-position:bottom;
}
#gform_wrapper_1 textarea  {
	height:100px;
	width:520px;
}

#gform_wrapper_1 input:focus, #gform_wrapper_1 textarea:focus{
background-color: #ecf6fe;
	border:#72b0de 1px solid;
	outline:none
}



input#gform_submit_button_1 {
	display:block;
	position:absolute;
	bottom:20px;
	left:180px;
	margin:0 auto !important;
	padding:0 !important;
	color:#FFFFFF;
	text-shadow: 1px 1px 3px #886100;
	font-family: 'Dosis', sans-serif;
	font-size:18px;
	line-height:40px;
	text-decoration:none;
	text-align:center;
	width:250px;
	height:50px !important;
background-color:#fab700;
	border-top:#fecd38 1px solid;
	border-left:#fecd38 1px solid;
	border-bottom:#d18f00 1px solid;
	border-right:#d18f00 1px solid;
	/*
	-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
*/
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#ffbf00', endColorstr = '#eba100');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#ffbf00', endColorstr = '#eba100')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #ffbf00, #eba100);
background-image: -ms-linear-gradient(top, #ffbf00, #eba100);
background-image: -o-linear-gradient(top, #ffbf00, #eba100);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffbf00), to(#eba100));
background-image: -webkit-linear-gradient(top, #ffbf00, #eba100);
background-image: linear-gradient(top, #ffbf00, #eba100);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
cursor:pointer;
}

/* FORMULER ID 4 MEER WERK FORMULIER */

#gform_wrapper_2 ul {
margin:0px;
margin-bottom:30px;
padding:0px;
list-style:none;	
}
#gform_wrapper_2 li label {
font-size:12px;
line-height:40px;	
}
#gform_wrapper_2 {
	padding:0 !important;
	margin:0px 25px 35px !important;
	position:relative;
	height:100px;
}
#gforms_confirmation_message {
	padding:50px;
	background-color:#f8fff8;
	color:#009900;
	font-size:12px;
	
}
#gform_wrapper_2 li.gfield  {
	margin:0px 15px;
	float:left;
}
#gform_wrapper_2 input {
	padding-left:10px;
	border:#ddd 1px solid;
	height:40px;
	width:180px;
	background-image:url(images/inputgradient.png);
	background-repeat:repeat-x;
	background-position:bottom;
}
#gform_wrapper_2  .gfield_checkbox input {
	width:20px;
	float:left;
	
}
#gform_wrapper_2  .gfield_checkbox {
	margin-top:-35px;
	
}
#gform_wrapper_2  .gfield_checkbox li {
	float:left;
	width:80px;
	
}
#gform_wrapper_2  .gfield_checkbox label {
	display:block;
	color:#999999;
	font-size:11px;
height:40px !important;
line-height:43px !important;
	
}

#gform_wrapper_2 input:focus, #gform_wrapper_2 textarea:focus{
background-color: #ecf6fe;
	border:#72b0de 1px solid;
	outline:none
}



input#gform_submit_button_2 {
	float:left;
	display:block;
	position:absolute;
	bottom:25px;
	right:0px;
	margin:0 auto !important;
	padding:0 !important;
	color:#FFFFFF;
	text-shadow: 1px 1px 3px #886100;
	font-family: 'Dosis', sans-serif;
	font-size:18px;
	line-height:40px;
	text-decoration:none;
	text-align:center;
	width:160px;
	height:50px !important;
background-color:#fab700;
	border-top:#fecd38 1px solid;
	border-left:#fecd38 1px solid;
	border-bottom:#d18f00 1px solid;
	border-right:#d18f00 1px solid;
	/*
	-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
*/
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#ffbf00', endColorstr = '#eba100');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#ffbf00', endColorstr = '#eba100')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #ffbf00, #eba100);
background-image: -ms-linear-gradient(top, #ffbf00, #eba100);
background-image: -o-linear-gradient(top, #ffbf00, #eba100);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffbf00), to(#eba100));
background-image: -webkit-linear-gradient(top, #ffbf00, #eba100);
background-image: linear-gradient(top, #ffbf00, #eba100);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
cursor:pointer;
}

.gfield_error input, .gfield_error textarea {
	border:#ff0000 1px solid !important;
	background-color:#ffe8e8 !important;
	
}

.gfield_error {
	border:none !important;
	background-color:transparent !important;
	padding:0px;
	
}
.validation_message, .validation_error {
	display:none !important;
}
