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

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

#header {height:71px; position:relative; border-bottom:1px solid #ccc; padding:11px 0 8px 0; z-index:97;}
#header h1 {margin:0; float:left; padding:12px 10px; border-right:1px solid #ccc;}
#header h1 a {width:210px; height:45px; display:block; color:#005499; overflow:hidden; background:url(/images/logos/winkelman.png) no-repeat top left; text-decoration:none; position:relative; z-index:1000;}
#header h1 span {visibility:hidden;}

#logo {position:absolute; right:0; top:6px;}

/* Kruimelpad in de topheader */
.crumbTrail {width:728px; padding:0 0 5px 20px; margin:0; font-size:80%; color:#666; float:left;}
.crumbTrail li {display:inline; list-style:none;}
.crumbTrail a {text-decoration:none; color:#666; font-weight:normal; text-decoration:underline;}
.crumbTrail a:hover,
.crumbTrail a.active {color:#666; text-decoration:none;}

/* Hoofdnavigatie */
.nav {width:728px; padding:0 0 0 20px; margin:0; list-style:none; font-size:120%; text-transform:uppercase; float:left; z-index:98;}
.nav li {display:block; margin:0; padding:0; position:relative; z-index:99; float:left;}
.nav li a {display:inline-block; text-decoration:none; text-transform:uppercase; color:#999; padding:6px 10px; z-index:99;}
.nav li a.first {margin-left:-10px;}
.nav li:hover a,
.nav li a.active,
.nav li a:hover {color:#fff; background:#005499;}
.nav li:hover ol a {color:#666; background:#fff;}
.nav li ol a:hover {color:#000; text-decoration:underline; padding-left:25px; width:151px; background:url(/images/icons/subItemPrefix.png) no-repeat 5px 13px;}
.nav li ol {width:186px; background:#fff; display:none; padding:0; position:absolute; top:30px; left:0; margin:0; z-index:100; border:1px solid #005499; font-size:85%;}
.nav li:hover ol {display:block;}
.nav li:hover ol ol {display:none; position:absolute; margin:0;}
.nav li ol li {width:186px; margin:0; padding:0; height:auto; position:relative;}
.nav li ol li a {width:166px; padding:3px 10px; text-transform:none; font-weight:normal;}
.nav li ol li.first a {border-top:none;}
.nav li ol ol {position:absolute; display:none; top:-1px; left:186px; margin:0; font-size:100%;}
.nav li ol li:hover ol {display:block;}
#container .nav li ol li ol li a {width:166px;}
#container .nav li ol li ol li.first a {border-top:none;}
.complementary {margin:1em 0 0 0; padding:0; font-size:120%; list-style:none;}
.complementary li {padding-bottom:10px;}
.complementary a {text-transform:uppercase;}

/* Algemene content divisie */
.content {width:990px; position:relative; z-index:1; overflow:hidden; padding:10px 0 0 0;}
.content h2.title {color:#00457a; text-transform:uppercase; font-size:140%; margin:12px 0 0 0;}

.section {position:relative;}
.content .left {width:630px; float:left; padding-left:20px;}
.content .left img.mainImg {margin-left:-20px;}
.content .left h4,
.content .left h5,
.content .left h6 {font-size:12px;} 
.content .right {width:300px; float:right; padding:0 20px 0 20px; color:#666; overflow:hidden;}
.content .right h3 {color:#00457a; font-size:160%; margin:12px 0; text-transform:uppercase;}
.content .right h3.subTitle {color:#ccc;}

/* Content blokken op de homepage */
.contentBlocks {width:990px; height:174px; margin:10px 0 10px 0; clear:left; float:right; background:url(/images/backgrounds/greyContentBlock.png) no-repeat top left; padding:0; overflow:hidden; clear:left; position:relative;}
.contentBlocks ul {overflow:hidden; margin:0;}
.contentBlocks ul li {width:240px; height:174px; float:left; position:relative; overflow:hidden; display:block; padding:0; margin-right:10px;}
.contentBlocks ul li.last {margin-right:0;}
.contentBlocks ul li img {width:240px; position:absolute; bottom:0; left:0;}
.contentBlocks ul li .blockImg {display:block;}
.contentBlocks ul li .blockImgHover {display:none;}
.contentBlocks ul li h4 {font-size:120%; text-transform:uppercase; color:#fff;}
.contentBlocks ul li h4 a {color:#fff; text-decoration:none;}
.contentBlocks ul li h4 a:hover {color:#fff;}
.contentBlocks ul li .details {position:absolute; bottom:9px; left:18px;}
.contentBlocks ul li .details p {display:none; color:#fff;}
.contentBlocks ul li:hover .blockImgHover {display:block;}
.contentBlocks ul li:hover .blockImg {display:none;}
.contentBlocks ul li:hover .details a {color:#e52324;}
.contentBlocks ul li:hover .details p {display:block;}
.contentBlocks ul .beoordeling {padding:42px 0 0 20px; height:132px; width:220px;}

/* Overzicht met acties en of producten */
.items {font-size:100%; color:#666; list-style:none; margin:0 0 0 -10px;}
.items li {width:325px; height:89px; padding:0 0 0 5px; margin:0 0 2px 0; display:block; clear:left; overflow:hidden; background:#eaeaea;}
.items li img {width:103px; height:77px; float:left; margin:5px 8px 0 0; border:1px solid #e52324;}
.items li h5 {margin:5px 0 0 0; font-size:12px;}
.items li h5 a {text-decoration:underline; color:#e52324;}
.items li p {margin:0; padding:0; color:#666; line-height:130%;}
.items li a {color:#e52324; text-decoration:underline;}
.items li a:hover {text-decoration:none; color:#e52324;}

/* Footer */
#footer {margin:10px 0 0 0; color:#666; clear:both; border-top:1px solid #ccc; padding:8px 0 8px 20px; width:970px; position:relative;}
#footer address {width:990px; display:block; overflow:hidden; position:relative;}
#footer address span {width:auto; float:left; display:block; margin:0 12px 0 0;}
#footer address span a {color:#666; font-weight:normal;}