/*
Theme Name: Monodot
Theme URI: http://monodot.be
Description: Thema voor Monodot
Author: Grrr
Author URI: http://grrr.nl
*/

/* ------------------------------------------------
					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,
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; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
/* remember to define focus styles! */
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
em{ font-style:italic;}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

/* ------------------------------------------------
					General
------------------------------------------------ */
html{ overflow-y: scroll;}
html, body{ height:100%;}
body{ font-family:Tahoma, Geneva, Verdana, sans-serif; line-height:18px; min-height:660px; _height:660px; min-width:960px;}
#container{ min-height:100%; background:url('img/bg.jpg') top center repeat; }
#footer{ display:block; width:100%; height:100px; margin-top:-100px; background:url('img/container-bg.png') bottom center no-repeat;}

h2{ margin-bottom:12px; font-size:15px; font-weight:bold; text-transform:lowercase; line-height:20px; font-family:"ff-speak-web-pro-1","ff-speak-web-pro-2", Tahoma, Geneva, Verdana, sans-serif;}
p{ margin-bottom:16px;}
a{ color:#000; text-decoration:none;}
.white{ color:#fff;}

strong{ font-weight:bold;}

/* ------------------------------------------------
					Header
------------------------------------------------ */
#headerContainer{ display:block; width:100%; height:200px; background:url('img/header-bg.jpg') top center no-repeat; }
#header{ display:block; width:960px; margin:0 auto; position:relative; }
#contact{ display:block; width:160px; height:180px; position:absolute; right:0px; top:40px; color:#fff; font-size:13px; line-height:16px; text-align:right; font-family:"ff-speak-web-pro-1","ff-speak-web-pro-2", Tahoma, Geneva, Verdana, sans-serif; }
#contact h3, #contact a{ color:#000; }
#contact a:hover{ text-decoration:underline;}
h1{ display:block; width:745px; height:200px; position:absolute; top:0; left:0px; text-align:right;}
h1 a{ display:block; height:180px; float:right; text-indent:9999px; overflow:hidden;}
.one h1 a{ width:720px; background:url('img/logo-01.png');}
.two h1 a{ width:682px; background:url('img/logo-02.png');}
.three h1 a{ width:658px; background:url('img/logo-03.png');}
.four h1 a{ width:666px; background:url('img/logo-04.png');}
.five h1 a{ width:704px; background:url('img/logo-05.png');}

/* ------------------------------------------------
					Content
------------------------------------------------ */
#content{ display:block; width:940px; position:relative; overflow:auto; margin:0 auto; padding:20px 0px 100px 20px; }

#nav{ display:block; width:170px; float:left; margin-right:50px; font-size:15px; color:#fff; font-family:"ff-speak-web-pro-1","ff-speak-web-pro-2", Tahoma, Geneva, Verdana, sans-serif; text-transform:lowercase;}
#nav a{ text-decoration:none; color:#fff;}
#nav a:hover{ color:#000;}
#nav > li{ margin-bottom:16px;}
#nav li ul{ margin-left:20px;}
.bodyHome #navHome{ color:#000;}
.bodyNews #navNews{ color:#000;}
.bodyAbout #navAbout{ color:#000;}
.bodyContact #navContact{ color:#000;}
#nav .active{ color:#000;}

#posts{ display:block; width:480px; float:left; margin-right:48px;}

#sidebar{ width:192px; float:left; font-size:12px; text-transform:lowercase;}
#sidebar h3{ color:#725744; border-bottom:1px solid #725744; margin-bottom:2px; padding-bottom:2px;}
#sidebar > li{ margin-bottom:16px;}
#sidebar a{ display:inline-block; text-decoration:none; *display:inline-block; }
#sidebar a:hover{ text-decoration:underline;}
#archive-list{ overflow:auto;}
#archive-list li{ float:left; margin-right:0.5em; }
.year{ color:#725744;}

.post{ overflow:auto; margin-bottom:32px; font-size:12px;}
.post h2 a{ color:#000; text-decoration:none;}
.post h2 a:hover{ color:#fff;}
.post img.size-medium{ float:right; margin-left:10px; }
.post a{ text-decoration:underline;}
.post a:hover{ text-decoration:none;}

.meta, .meta a{ color:#725744;}

.left-arrow{ display:block; float:left; margin-top:-22px; padding-left:9px; font-size:12px; background:url('img/arrow-left.png') left center no-repeat;}
.right-arrow{ display:block; float:right; margin-top:-22px; padding-right:9px; font-size:12px; background:url('img/arrow-right.png') right center no-repeat;}
.left-arrow:hover, .right-arrow:hover{ text-decoration:underline;}

/* Work */
#work-thumbnails{ margin-top:32px; }
#work-thumbnails li{ width:60px; height:60px; float:left; margin:0 5px 5px 0; padding:0; background:#333; position:relative;}
#work-thumbnails li.no-margin{ margin-right:0;}
#work-thumbnails li:hover, #work-thumbnails li.active{ width:58px; height:58px; border:1px solid #fff;}
#work-thumbnails li:hover img, #work-thumbnails li.active img{ position:absolute; top:-1px; left:-1px; clip: rect(1px 59px 59px 1px);}
#work-thumbnails a span{ display:none; width:105px; position:absolute; top:64px; left:-1px; padding:5px 10px 5px 10px; background-color:rgba(0,0,0,0.7); color:#fff; z-index:10; text-transform:none; }
#work-thumbnails li.no-margin a span{ left:-66px;}
#work-thumnbails a{ display:block; margin:0; }
#work-thumbnails li:hover{ z-index:1000;}
#work-thumbnails a:hover span{ display:block; }
#work-thumbnails .active a:hover span{ display:none;}
#work-thumbnails a img{ margin:0;}
#work-thumbnails li a:hover{ text-decoration:none;}

#sidebar .work a{ color:#725744; text-decoration:underline;}
#sidebar .work a:hover{ text-decoration:none;}

/* Contact */
.bodyContact .post ul{ float:left; width:140px; margin:0 30px 36px 0;}
.bodyContact .post ul:nth-of-type(3n), .bodyContact .post ul.no-margin{ margin-right:0;}
#map{ display:block; position:relative; width:480px; height:360px; margin-top:-16px; margin-bottom:18px;}
span#overlay{ display:block; width:135px; height:259px; position:absolute; bottom:246px; right:230px; background:url('img/map-overlay.png') no-repeat;}
#route{ font-size:12px;}
#route:hover{ text-decoration:underline;}