/**
 * @section   : Layout CSS
 * @project   : Meppelink Thuis in warmte
 * @author    : Boye Oomens <boye@e-sites.nl>
 * @media     : all
 * @version   : 1.0
 */

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

#header {width:900px; height:112px; position:relative; z-index:97; background:url(/images/backgrounds/header.png) no-repeat bottom left; margin-top:32px;}
#header h1 {margin:0; position:absolute; left:20px; top:-5px; z-index:999;}
#header h1 a {width:174px; height:64px; display:block; color:#e51b24; overflow:hidden; background:url(/images/logos/meppelink.png) no-repeat top left; text-decoration:none; position:relative; z-index:1000;}
#header h1 span {visibility:hidden;}

#besp {width:150px; margin:10px 0; display:block;}

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

/* Hoofdnavigatie */
.nav {width:900px; height:37px; padding:0; margin:0; list-style:none; font-size:90%; z-index:98; position:absolute; bottom:0; left:0;}
.nav li {height:37px; display:block; margin:0; padding:0 12px; position:relative; z-index:99; float:left;}
.nav li a {height:27px; display:inline-block; text-decoration:none; text-transform:uppercase; color:#fff; padding:10px 15px 0 15px; position:relative; z-index:99;}
.nav li a span {display:none; width:5px; height:37px; position:absolute; top:0; z-index:100;}
.nav li a span.left {left:0; background:url(/images/backgrounds/navItemLeft.png) no-repeat 0 0;}
.nav li a span.right {right:0; background:url(/images/backgrounds/navItemRight.png) no-repeat 0 0;}
.nav li a.active span,
.nav li:hover a span {display:block;}
.nav li a.active,
.nav li:hover a,
.nav li a:hover {color:#e51b24; background:#fff;}
.nav li a.first {}
.nav li ol {width:178px; display:none; padding:0 0 7px 0; position:absolute; top:37px; left:11px; margin:0; z-index:100; background:url(/images/backgrounds/subNavBottom.png) no-repeat bottom left;}
.nav li:hover ol {display:block;}
.nav li ol li {width:154px; border-left:1px solid #e51b24; border-right:1px solid #e51b24; float:left; margin:0; padding:0 11px; background:#fff; height:auto; position:relative;}
.nav li:hover ol li a,
#container .nav li ol li a {width:154px; height:auto; text-transform:none; color:#666; background:#fff; font-weight:normal; padding:5px 0 5px 0; position:relative;}
#container .nav li ol li.first a {border:none;}
#container .nav li ol li:hover a,
#container .nav li ol li a:hover {width:146px; background:#fff url(/images/icons/redArrowRight.gif) no-repeat 0 11px; color:#666; text-decoration:underline; padding-left:10px;}
#container .nav li ol li:hover ol a {font-weight:normal; background:none;}
#container .nav ol li.beforeLast a {padding-bottom:0;}
#container .nav ol li.last {display:none;}
#container .nav ol ol li.last {width:178px; height:8px; font-size:0; border:none; display:block; background:url(/images/backgrounds/subNavBottom.png) no-repeat bottom left;}
#container .nav li ol ol {width:178px; display:none; left:176px; top:0; padding:5px 0 0 0; background:url(/images/backgrounds/subNavTop.png) no-repeat top left;}
#container .nav li ol li:hover ol {display:block;}
#container .nav li ol ol li a {width:154px; height:auto; text-transform:none; color:#fff; background:#fff; font-weight:normal; padding:5px 0 5px 0; position:relative;}
#container .nav li ol ol li:hover a,
#container .nav li ol ol li a:hover {width:146px; background:#fff url(/images/icons/redArrowRight.gif) no-repeat 0 10px; color:#666; font-weight:bold; padding-left:10px;}

/* Algemene content divisie */
.content {width:900px; position:relative; z-index:1; padding:4px 0 0 0; overflow:hidden;}
.content .title {color:#e51b24; text-transform:uppercase; font-size:140%;}
.content .mainImg {margin:0 15px 8px 0;}

.section {position:relative;}
.content .left {width:583px; float:left; padding-left:12px;}
.content .left img.mainImg {margin-left:-12px;}
.content .left h1,
.content .left h2,
.content .left h3 {font-size:120%;}
.content .right {width:290px; float:right;}
.content .right h3 {color:#e51b24; font-size:140%; margin:10px 0; text-transform:uppercase;}

/* Content blokken op de homepage */
.contentBlocks {width:900px; height:99px; background:url(/images/backgrounds/greyContentBlock.png) no-repeat top left; padding-top:3px; overflow:hidden; clear:left;}
.contentBlocks ul {overflow:hidden; margin:10px 0 0 0;}
.contentBlocks ul li {width:293px; float:left; position:relative; overflow:hidden; display:block; padding:0 0 0 10px;}
.contentBlocks ul li.last {padding-left:0;}
.contentBlocks ul li img {width:73px; float:left; position:relative; margin:0 8px 0 0;}
.contentBlocks ul li h4 {font-size:100%; line-height:120%;}
.contentBlocks ul li h4 a {color:#820F14; text-decoration:none;}
.contentBlocks ul li p {color:#666;}
.contentBlocks ul li a {color:#ff0000; text-decoration:underline;}
.contentBlocks ul li a:hover {color:#ff0000; text-decoration:none;}

.vertical {width:290px; height:auto; background:none;}
.vertical ul {margin:0;}
.vertical ul li {width:290px; height:78px; float:none; padding:0 0 10px 0; overflow:hidden;}

/* Content blokken */
.contentBlock {width:290px; height:auto; margin:0 0 4px 0;}
.contentBlock .top {width:290px; height:18px; font-size:0; line-height:0; background-repeat:no-repeat; background-position:0 0;}
.contentBlock .body {width:260px; padding:0 15px; overflow:hidden;}
.contentBlock .body h4 {text-transform:uppercase; color:#fff; font-size:14px; margin:0 0 10px 0; line-height:120%;}
.contentBlock .bottom {width:290px; height:18px; font-size:0; line-height:0; background-repeat:no-repeat; background-position:0 0;}

/* Oranje variant */
.orange .top {background-image:url(/images/backgrounds/orangeBoxTop.png);}
.orange .body {background-color:#ff6600; color:#fff;}
.orange .bottom {background-image:url(/images/backgrounds/orangeBoxBottom.png);}
/* Rode variant */
.red .top {background-image:url(/images/backgrounds/redBoxTop.png);}
.red .body {background-color:#820f14; color:#fff;}
.red .bottom {background-image:url(/images/backgrounds/redBoxBottom.png);}

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

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