/**
 * @section   : Layout CSS
 * @project   : Hoekstra Installaties
 * @author    : Boye Oomens <boye@e-sites.nl>
 * @media     : all
 * @version   : 1.0
 */

/* Linker- en rechterflank */
div.leftFlank {width:50%; height:100%; background:url(/images/backgrounds/html.png) repeat top left; z-index:1; position:absolute; left:0;}
div.rightFlank {width:50%; height:100%; background:url(/images/backgrounds/html.png) repeat top left; z-index:1; position:absolute; right:0;}

 /* Algemene container en header */
div#wrapper {width:980px; position:relative; font-size:120%; background:#fff; margin:0 auto; overflow:hidden;}
div#container {width:980px; overflow:hidden; margin:0 auto; position:relative;}

div#header {width:980px; height:75px; position:relative; margin:0 auto; z-index:97;}
div#header h1 {margin:0; position:absolute; left:10px; top:15px; z-index:999;}
div#header h1 a {width:160px; height:45px; display:block; color:#003d73; overflow:hidden; background:url(/images/logos/hoekstra.png) no-repeat top left; text-decoration:none; position:relative; z-index:1000;}
div#header h1 span {visibility:hidden;}
div#header .info {position:absolute; right:10px; top:10px; text-align:right;}

/* Kruimelpad in de topheader */
ul.crumbTrail {margin:0; position:absolute; top:8px; left:10px; font-size:90%; display:none;}
ul.crumbTrail li {display:inline; list-style:none;}
ul.crumbTrail a {text-decoration:none; color:#666; font-weight:normal; text-decoration:underline;}
ul.crumbTrail a:hover,
ul.crumbTrail a.active {color:#666; text-decoration:none;}

/* Hoofdnavigatie */
ol.nav {width:980px; height:37px; padding:0; margin:0; list-style:none; font-size:90%; background:url(/images/backgrounds/nav.png) no-repeat top left; z-index:98; position:relative;}
ol.nav li {height:37px; display:block; margin:0; padding:0 12px; position:relative; z-index:99; float:left;}
ol.nav li a {height:27px; display:inline-block; background:red; text-decoration:none; text-transform:uppercase; color:#fff; padding:10px 15px 0 15px; position:relative; z-index:99; background:url(/images/backgrounds/navItem.gif) repeat-x bottom left;}
ol.nav li a span {display:none; width:5px; height:37px; position:absolute; top:0; z-index:100;}
ol.nav li a span.left {left:0; background:url(/images/backgrounds/navItemLeft.png) no-repeat 0 0;}
ol.nav li a span.right {right:0; background:url(/images/backgrounds/navItemRight.png) no-repeat 0 0;}
ol.nav li a.active span,
ol.nav li:hover a span {display:block;}
ol.nav li a.active,
ol.nav li:hover a,
ol.nav li a:hover {color:#003d73; background:#fff url(/images/backgrounds/navItem.gif) repeat-x bottom left;}
ol.nav li a.first {}
ol.nav li ol {width:191px; display:none; padding:5px 0; position:absolute; top:35px; left:11px; margin:0; z-index:100;}
ol.nav li:hover ol {display:block; background:url(/images/backgrounds/subNavTop.png) no-repeat top left;}
ol.nav li ol li {width:169px; float:none; margin:0; padding:0 11px; background:#003b71; height:auto;}
ol.nav li:hover ol li a,
div#wrapper ol.nav li ol li a {width:169px; height:auto; text-transform:none; color:#fff; border-top:1px solid #2d5c87; background:#003b71; font-weight:normal; padding:5px 0 5px 0; position:relative;}
div#wrapper ol.nav li ol li.first a {border:none;}
div#wrapper ol.nav li ol li:hover a,
div#wrapper ol.nav li ol li a:hover {width:159px; background:#003b71 url(/images/icons/redArrowRight.gif) no-repeat 0 10px; color:#fff; font-weight:bold; padding-left:10px;}
div#wrapper ol.nav li ol li:hover ol a {font-weight:normal; background:none;}
div#wrapper ol.nav ol li.beforeLast a {padding-bottom:0;}
div#wrapper ol.nav ol li.last {background:url(/images/backgrounds/subNavBottom.png) no-repeat top left;}
div#wrapper ol.nav li ol ol {display:none; left:191px; top:0;}
div#wrapper ol.nav li ol li:hover ol {display:block;}
div#wrapper ol.nav li ol ol li a {width:169px; height:auto; text-transform:none; color:#fff; border-top:1px solid #2d5c87; background:#003b71; font-weight:normal; padding:5px 0 5px 0; position:relative;}
div#wrapper ol.nav li ol ol li:hover a,
div#wrapper ol.nav li ol ol li a:hover {width:159px; background:#003b71 url(/images/icons/redArrowRight.gif) no-repeat 0 10px; color:#fff; font-weight:bold; padding-left:10px;}

/* Algemene content divisie */
div.content {width:980px; position:relative; z-index:1; padding:24px 0 0 0; overflow:hidden;}
div.content h2.title {color:#00529c; text-transform:uppercase; font-size:140%; margin-bottom:15px;}
div.content .left h3 {font-size:14px;}
div.content img.mainImg {margin:0 15px 8px 0; float:left;}

div.section {width:481px; position:relative; overflow:hidden;}
div.content div.left {float:left; padding-left:12px;}
div.content div.left img.mainImg {margin-left:-12px;}
div.content div.right {float:right;}

/* Content blokken */
div.contentBlock {width:481px; height:122px; background:url(/images/backgrounds/greyContentBlock.png) no-repeat top left; padding-top:3px; float:left; margin-right:18px; overflow:hidden;}
div.rightBlock {margin-right:0;}
div.contentBlock h3 {text-transform:uppercase; color:#00529c; font-size:120%; margin:0 0 17px 42px;}
div.contentBlock ul {overflow:hidden; margin:0;}
div.contentBlock ul li {width:220px; float:left; position:relative; overflow:hidden; display:block; padding:0 0 10px 10px;}
div.contentBlock ul li img {width:73px; float:left; position:relative; margin:0 8px 0 0;}
div.contentBlock ul li h4 {font-size:100%;}
div.contentBlock ul li h4 a {color:#00529c; text-decoration:none;}
div.contentBlock ul li p {color:#00529c; margin-bottom:0;}
div.contentBlock ul li a {color:#ff0000; text-decoration:underline;}

/* Groter variant van contentBlock */
div.expand {height:auto; float:none; margin-right:0;}
div.expand ul {height:auto; background:#eaeaea url(/images/backgrounds/greyContentBlockBottom.png) no-repeat bottom left; padding-bottom:10px;}
div.expand ul li {margin:0; padding-left:10px;}

/* Nieuwsoverzicht in het grijze kader */
ul.news {font-size:90%; color:#333; list-style:none; margin:0; padding:0;}
ul.news li {border-bottom:1px solid #d6d6d6; padding:0 0 5px 0; margin-bottom:5px;}
ul.news li h5 {font-size:100%; margin:0;}
ul.news li h5 a {text-transform:uppercase; text-decoration:none;}
ul.news li p {margin:0; padding:0;}
ul.news li a {color:#000; text-decoration:underline;}
ul.news li a:hover {text-decoration:none;}

/* Overzicht met acties en of producten */
ul.items {font-size:90%; color:#fff; list-style:none; margin:0;}
ul.items li {padding:0; margin:0; display:block; clear:left; overflow:hidden;}
ul.items li img {float:left; margin:0 7px 8px 0;}
ul.items li h5 {font-size:100%; display:inline}
ul.items li h5 a {text-transform:uppercase; text-decoration:none;}
ul.items li p {margin:0; padding:0;}
ul.items li a {color:#fff; text-decoration:underline;}
ul.items li a:hover {text-decoration:none; color:#fff;}

/* Acties/Producten/Nieuws lijstweergave */
ul.listView {margin:10px 0 0 0; padding:0; list-style:none;}
ul.listView li {margin:0 0 10px 0; padding:0; height:94px; display:block; clear:left; overflow:hidden;}
ul.listView li h4 {margin:0; padding:0; text-transform:uppercase; font-size:100%;}
ul.listView li h4 a {text-decoration:none; color:#00529c;}
ul.listView li h4 a:hover {color:#264a92;}
ul.listView li img.nieuwsImg {overflow:hidden; float:left; margin:0 8px 0 0; padding:0;}
ul.listView li a {text-decoration:underline; color:#264a92;}
ul.listView li a:hover {text-decoration:none;}

/* Footer */
div#footer {width:980px; margin:8px 0 0 0; background:#00529c url(/images/backgrounds/footerBottom.png) no-repeat bottom left; color:#fff; font-size:90%; clear:both;}
div#footer address {width:980px; padding:15px 20px 0; display:block; background:url(/images/backgrounds/footerTop.png) no-repeat top left; font-size:100%; overflow:hidden; position:relative;}
div#footer address span {float:left; display:block; margin:0 12px 0 0;}
div#footer address span a {color:#fff; font-weight:normal;}

#bsp {width:321px; margin:20px 0 0 0; display:block;}