/*
Theme Name: Roelofs
Author: Outhands Internet & Media
Author URI: http://outhands.com/

*/


/* =Structure
-------------------------------------------------------------- */

body {
	background: #f0f0f0;
	margin: 0;
	padding: 0;
	font-family: arial, helvetica;
	;
}

#page {
	display: block;
}

#primary {
	float: left;
	width: 615px;
	font-family: arial;
	padding-left: 18px;
	background: url('images/dotsVertical.png') repeat-y left;
}

#primary.frontpage {
	width: 100%;
	position: relative;
	padding-left: 0px;
	background: none;
}

#content {
	float: left;
}

#main .widget-area {
	float: right;
	overflow: hidden;
	width: 220px;
}

#colophon {
	clear: both;
	display: block;
	width: 100%;
}


/* Increase the size of the content area for templates without sidebars */

.full-width #content,
.image-attachment #content,
.error404 #content {
	margin: 0;
}


/* Text meant only for screen readers */

.screen-reader-text,
.assistive-text {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px);
	/* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}


/* Alignment */

.alignleft {
	display: inline;
	float: left;
}

.alignright {
	display: inline;
	float: right;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.clear {
	clear: both;
}

.border {
	height: 5px;
	width: 100%;
	background: url('images/dots.png') repeat-x center center;
	margin: -10px 0 10px 0;
}


/* =wrapper
-------------------------------------------------------------- */

#wrapping {
	position: relative;
	margin: 0 auto;
	width: 940px;
	height: 100%;
	background: #FFF;
	padding-top: 17px;
}


/* =Header
-------------------------------------------------------------- */

#header {
	position: relative;
	height: 120px;
	width: calc(100% - 40px);
	padding: 0 20px;
}

#header #logo {
	float: left;
	width: 161px;
	height: 95px;
	padding-left: 15px;
}

#header #hallmarks {
	float: right;
}

#header #text {
	position: absolute;
	right: 20px;
	top: 78px;
	font-family: Helvetica, Arial, Sans-Serif;
	font-weight: bold;
}

#header #text a {
	color: #1471a0;
	text-decoration: none;
}


/* =imageblock
-------------------------------------------------------------- */

#imageBlock {
	position: relative;
	height: 423px;
	width: 100%;
}

#imageBlock #mainMenu {
	position: absolute;
	background: url('images/backgroundWhite.png');
	right: 0;
	top: 0;
	width: 312px;
	height: 100%;
	z-index: 9;
}

#imageBlock #mainMenu div {
	background: url('images/dots.png') no-repeat center bottom;
	height: 50px;
}

#imageBlock #mainMenu div.last {
	background: none;
}

#imageBlock #mainMenu div a {
	display: block;
	height: 44px;
	width: 297px;
	left: 0;
	position: relative;
	color: #606362;
	text-decoration: none;
	padding: 6px 0 0 15px;
}

#imageBlock #mainMenu div a:hover,
#imageBlock #mainMenu div a.active {
	background: #1471a0;
	color: #FFF;
}

#imageBlock #mainMenu div a #title {
	display: block;
	font-size: 21px;
	font-family: Helvetica, Arial, Sans-Serif;
}

#imageBlock #mainMenu div a #description {
	display: block;
	font-size: 13px;
	font-family: Helvetica, Arial, Sans-Serif;
	font-weight: medium;
}

#imageBlock #mainMenu #searchForm {
	background: none;
	position: absolute;
	height: auto;
	z-index: 1;
	top: 355px;
	left: 15px;
}

#imageBlock #mainMenu #searchForm #searchsubmit {
	border: none;
	background: url('images/searchButton.png');
	height: 23px;
	width: 60px;
}

#imageBlock #textBlock {
	background: url('images/imageText.png') no-repeat left bottom;
	width: 100%;
	height: 169px;
	position: absolute;
	bottom: 0;
	color: #FFF;
}

#imageBlock #textBlock #title {
	position: absolute;
	width: calc(100% - 343px);
	bottom: 60px;
	font-family: Helvetica, Arial, Sans-Serif;
	font-size: 24px;
	left: 15px;
	line-height: 27px;
}

#imageBlock #textBlock #description {
	position: absolute;
	width: calc(100% - 343px);
	font-family: arial;
	top: 110px;
	left: 15px;
	font-size: 14px;
	line-height: 22px;
}

#imageBlock #stripes {
	background: url('images/stripes.png');
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}

#imageBlock #image img {
	display: none;
	max-width: 100%;
	width: 100%;
}

#imageBlock #image img.active {
	display: block;
}


/* =subMenu
-------------------------------------------------------------- */

#subMenu {
	width: 307px;
	height: auto;
	float: left;
}

#subMenu ul {
	list-style: none;
	padding-left: 20px;
	padding-right: 15px;
}

#subMenu ul li {
	background: url('images/dots.png') no-repeat left top;
	font-size: 21px;
	font-family: Helvetica, Arial, Sans-Serif;
	padding-top: 8px;
}

#subMenu ul li:first-child {
	background: none;
	padding-top: 0;
}

#subMenu ul li a {
	text-decoration: none;
	color: #606362;
}

#subMenu ul li ul li {
	font-size: 13px;
	font-family: Helvetica, Arial, Sans-Serif;
	font-weight: medium;
	background: none;
}

#subMenu ul li ul.children {
	padding: 0;
}

#subMenu ul li ul.children li:before {
	content: '>';
	margin: 0 5px 0 0;
	color: #606362;
}

#subMenu ul li a:hover,
#subMenu ul li.current_page_item>a,
#subMenu ul li a:active {
	color: #1471a0;
}


/* =Frontpage
-------------------------------------------------------------- */

.frontBlock {
	float: left;
    margin: 0;
    width: calc( 33% - 30px);
    font-size: 12px;
    font-family: Arial;
    padding: 15px;
}

.frontBlock.last {
	margin-right: 0;
}

.search .entry-title a,
.frontBlock h1 {
	font-family: Helvetica, Arial, Sans-Serif;
	font-weight: bold;
	font-size: 16px;
	text-transform: uppercase;
	color: #ad3037;
	margin: -8px -15px;
}

.frontBlock .wrapper {
	background: url('images/dotsVertical.png') repeat-y right;
	margin-right: -10px;
}

.frontBlock.last .wrapper {
	background: none;
	margin: 0;
}

.frontBlock .wrapper>p a {
	position: absolute;
	bottom: 80px;
	font-weight: bold;
	color: #3c2b3b !important;
	text-decoration: none;
	text-transform: uppercase;
	margin-left: 2px;
}

.frontBlock .content a {
	position: relative;
	bottom: 0;
	display: inline-block;
	color: #54a249 !important;
	font-weight: bold;
	font-size: 13px;
	text-transform: none;
	margin: 3px 0 3px -13px;
}

.frontBlock .content a:before {
	content: ">";
	margin-right: 5px;
}

.frontBlock .content {
	margin-left: 17px;
}

.frontBlock ul {
	list-style: none;
	padding: 0;
	margin-left: -12px;
}

.frontBlock ul li {}

.frontBlock ul li:before {
	content: '>';
	margin-right: 7px;
	color: #54a249;
	font-weight: bold;
}


/* =Search
-------------------------------------------------------------- */

#primary.search {
	width: auto;
	margin-right: 10px;
	background: none;
}

.search .entry-title a {
	text-decoration: none;
	margin-left: 0;
}

.search .entry-title a:before {
	content: '>';
	margin-right: 5px;
	font-size: 12px;
}

.search .entry-summary a {
	color: #54a249;
	font-weight: bold;
	text-decoration: none;
}


/* =Content
-------------------------------------------------------------- */

tr:nth-child(even) {
	background: #f2f2f2
}

.sticky
}
.entry-meta {
	clear: both;
	display: block;
}
.single-author .entry-meta .byline {
	display: none;
}
#content nav {
	display: block;
	overflow: hidden;
}
#content nav .nav-previous {
	float: left;
	width: 50%;
}
#content nav .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}
#content #nav-above {
	display: none;
}
#content {
	color: #606362;
}
#content .entry-title {
	font-size: 21px;
	margin-bottom: -10px;
	font-family: Helvetica, Arial, Sans-Serif;
	font-weight: bold;
}
#content .entry-content {
	font-family: Arial;
	font-size: 13px;
	line-height: 18px;
	margin-right: 10px;
}
#content .entry-content a {
	display: inline-b;
	text-decoration: none;
	color: #1471a0;
}
.paged #content #nav-above,
.single #content #nav-above {
	display: block;
}
#nav-below {
	margin: 1em 0 0;
}
.page-link {
	clear: both;
	margin: 0 0 1em;
}
.page .edit-link {
	clear: both;
	display: block;
}

/* 404 page */
.error404 .widget {
	float: left;
	width: 33%;
}
.error404 .widget .widgettitle,
.error404 .widget ul {
	margin-right: 1em;
}
.error404 .widget_tag_cloud {
	clear: both;
	float: none;
	width: 100%;
}

/* Notices */
.post .notice {
	background: #eee;
	display: block;
	padding: 1em;
}

/* Image Attachments */
.image-attachment div.entry-meta {
	float: left;
}
.image-attachment nav {
	float: right;
	margin: 0 0 1em 0;
}
.image-attachment .entry-content {
	clear: both;
}
.image-attachment .entry-content .entry-attachment {
	background: #eee;
	margin: 0 0 1em;
	padding: 1em;
	text-align: center;
}
.image-attachment .entry-content .attachment {
	display: block;
	margin: 0 auto;
	text-align: center;
}

/* Aside Posts */
.format-aside .entry-header {
	display: none;
}
.single .format-aside .entry-header {
	display: block;
}
.format-aside .entry-content,
.format-aside .entry-summary {
	padding-top: 1em;
}
.single .format-aside .entry-content,
.single .format-aside .entry-summary {
	padding-top: 0;
}

/* Gallery Posts */
.format-gallery .gallery-thumb {
	float: left;
	margin: 0 1em 0 0;
}

/* Image Posts */
.format-image .entry-header {
	display: none;
}
.single .format-image .entry-header {
	display: block;
}
.format-image .entry-content,
.format-image .entry-summary {
	padding-top: 1em;
}
.single .format-image .entry-content,
.single .format-image .entry-summary {
	padding-top: 0;
}

/* =Images
-------------------------------------------------------------- */
a img {
	border: none;
}
p img {
	margin-bottom: 0.4em;
	/* a small bottom margin prevents content floating under images */
}

/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-area img,
.wp-caption {
	max-width: 100%;
	/* When images are too wide for containing element, force them to fit. */
	
	height: auto;
	/* Override height to match resized width for correct aspect ratio. */
}
.entry-content img {
	max-width: 100%;
	height: auto;
}
img.alignleft {
	margin-right: 1em;
}
img.alignright {
	margin-left: 1em;
}
.wp-caption {
	padding: .5em;
	text-align: center;
}
.wp-caption img {
	margin: .25em;
}
.wp-caption .wp-caption-text {
	margin: .5em;
}
.gallery-caption
}
.wp-smiley {
	margin: 0;
}

/* =Forms
-------------------------------------------------------------- */
#searchform label {
	display: none;
}
#searchform input#s {
	width: 140px;
	background: #FFF url('images/searchIcon.jpg') no-repeat right;
	padding-right: 14px;
}
input[type=text],
input#s {
	margin: 0 1em 0 0;
}
textarea {
	width: 80%;
}

/* Class for labelling required form items */
.required {
	color: #cc0033;
}

/* =Footer
-------------------------------------------------------------- */
#footer {
	width: calc(100% - 40px);
	background:url('images/backgroundFooter.jpg');
	min-height: 140px;
	clear:both;
	padding: 20px;
	font-family: arial;
	font-size: 13px;
}
#footer .textBlock {
	width: 200px;
	padding-right: 28px;
	float: left;
	color: #FFF;
}
#footer .textBlock.last {
	padding-right: 0;
}
#footer .textBlock ul {
	list-style:none;
	margin: 5px;
	padding: 0;
	font-size: 12px;
}
#footer .textBlock ul li:before {
	content:'>';
	margin: 0 6px 0 0;
}
#footer .textBlock ul li a {
	text-decoration:none;
	color:#FFF;
	line-height: 17px;
}
#copyrights {
	font-family: arial;
	font-size: 13px;
	color:#606362;
	margin:13px 0 30px 19px;
}
#colophon {
	padding: 1em 0 0;
}
.onlyMob{ display: none; }

.directDoen{display: none;}


@media (max-width: 992px) {
    #wrapping{ width: 100%; }

    #primary{width: calc( 100% - 343px);}
    #primary iframe{ max-width: 100%;  }

    .frontBlock{ width: calc( 50% - 30px); }

    form input[type="text"], form textarea{max-width: 188px;}

}

@media (max-width: 688px) {
	#header{ height: auto;}
    #header #logo { width: 100%; padding-left: 0; text-align: center; float: none;}
    #header #text { position: relative; width: 100%; text-align: center; padding: 20px 0; top: 0; right: 0;}
    #header #hallmarks{ display: none; }

    #imageBlock { height: auto;}
    #imageBlock #image{ width: 100%; overflow: hidden; height: 200px; }
    #imageBlock #image img{min-height: 100%; min-width: 100%; max-width: inherit; width: auto; height: auto; max-height: 100%;}
	#imageBlock #mainMenu { position: relative; width: 100%; margin-top: 259px;}
	#imageBlock #mainMenu div { background: url(images/dots.png) repeat-x bottom left;}
	#imageBlock #mainMenu div a{ width: calc( 100% - 15px); }
	#imageBlock #mainMenu #searchForm { display: none;}
	#imageBlock #textBlock { bottom: inherit; top: 175px; padding: 30px 0; border-top: 5px solid #51a344; background: #707372; height: 219px;}
	#imageBlock #textBlock #title, #imageBlock #textBlock #description { width: calc(100% - 20px); top: 0; left: 0; padding: 0 10px; position: relative;}
	#imageBlock #textBlock #title{ margin-bottom: 10px; }
	#imageBlock #stripes { display: none;}

	.frontBlock .wrapper>p a { position: inherit;}

	#primary{width: calc( 100% - 36px);}
	#subMenu{ width: 100%; }
	#subMenu ul li{ background: url('images/dots.png') repeat-x left top;  }

	.onlyMob{ display: block;}
    .onlyDesk{ display: none; }

    form input[type="text"], form textarea{max-width: 180px;}
}


@media (max-width: 477px) {
	#header #text span{ display: block; }
	#header #text span.sep{display: none;}

    .frontBlock{ width: calc(100% - 30px); }
    .frontBlock .wrapper{ background: none; }

    .entry-content img{width: 100%;}

    #footer .textBlock{ margin-bottom: 14px;}

     form input[type="text"], form textarea{max-width: 141px;}

     .directDoen{ display: block; text-decoration: none; font-weight: bold; color: aqua; position: absolute; bottom: 25px; left: 12px;}

}