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

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

#header {width:995px; height:130px; position:relative; margin:0 auto; z-index:2;}
#header h1 {margin:10px 0 0 0; height:90px; float:left; padding:20px 10px 0 0; border-right:1px solid #fff;}
#header h1 a {width:163px; height:55px; display:block; color:#fff; overflow:hidden; background:url(/images/logos/velthoven.png) no-repeat top left; text-decoration:none; position:relative; z-index:1000;}
#header h1 span {visibility:hidden;}

/* Kruimelpad in de topheader */
.crumbTrail {margin:0; position:absolute; top:8px; left:10px; font-size:90%; display:none;}
.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 {margin:10px 0 0 0; float:left; list-style:none; padding:37px 0 0 5px; z-index:2; font-size:90%}
#nav li {display:block; float:left; position:relative; margin:0; padding:0; z-index:2;}
#nav li:hover ol {display:block;}
#nav li:hover ol ol {display:none;}
#nav li a {display:inline-block; color:#fff; background:#366394; text-decoration:none; text-transform:uppercase; font-weight:bold; padding:10px; position:relative; z-index:3;}
#nav li:hover a,
#nav li a:hover {color:#00336F; background:#fff;}
#nav li.hasSubs:hover {text-decoration:none; padding:0;}
#nav li.hasSubs:hover a {border-bottom:1px solid #fff;}
#nav li.hasSubs:hover ol a {border-bottom:none;}
#nav li ol {display:none; width:190px; border:1px solid #688AAF; position:absolute; top:36px; left:-1px; margin:0; padding:5px 6px 0 6px; z-index:2; background:#fff;}
#nav li ol li {width:196px; float:none; padding:0;}
#nav li ol li:hover ol {display:block;}
#nav li ol li ol {display:none; width:190px; border:1px solid #688AAF; position:absolute; top:0; left:196px; margin:0; padding:5px 6px 0 6px; z-index:5; background:#fff;}
#nav li ol li a {width:170px; padding:5px 10px; text-transform:none; color:#666; font-weight:normal;}
#nav li ol li a:hover {width:160px; background:url(/images/icons/blueArrowRight.gif) no-repeat 4px 11px; padding-left:20px;}

/* Algemene content divisie */
.content {width:995px; margin:7px auto 0; overflow:hidden; position:relative; z-index:1; background:url(/images/misc/pixel.gif) repeat-y 608px 0;}

.service {width:995px; margin:0; overflow:hidden; height:auto;}
.service li {width:321px; height:159px; display:block; float:left; margin:0 15px 15px 0; position:relative;}
.service li.last {margin-right:0;}
.service li h3 {color:#fff; text-transform:uppercase; font-size:120%; position:absolute; bottom:7px; left:12px;}
.service li img.fullcolor {display:none;}
.service li img.graycolor {display:block;}
.service li a:hover img.fullcolor {display:block;}
.service li a:hover img.graycolor {display:none;}
.service li.clear {width:1px; height:1px; display:inline; font-size:0; line-height:0; float:none;}

.content .imgWrapper {width:995px; height:277px; position:relative;}
.content .section {float:left;}
.content .section h3 {color:#fff; font-size:140%; text-transform:uppercase; margin:0 0 10px 0;}

/* Content op de standaard pagina */
.content .context {width:585px; float:left; position:relative; margin-top:-37px; padding:0 11px;}
.content .context h2.title {color:#fff; font-size:150%; padding:5px 0; text-transform:uppercase; margin:0 0 20px 0;}
.content .context h4 {color:#666; font-size:14px; margin-bottom:5px;}
.content .context h2,
.content .context h3,
.content .context h5,
.content .context h6 {color:#666; font-size:14px;}

/* Uitgebreidde variant context */
.fullWidth {background:none;}
.fullWidth .context {width:995px; float:none; position:relative; margin:0; padding:0 11px;}
.fullWidth .context h2.title {color:#00336F; font-size:150%; padding:5px 0; text-transform:uppercase; margin:0 0 20px 0;}

.content .sidebar {width:377px; float:left; position:relative; margin-top:-132px; padding:0 0 0 10px;}

.sidebar h3 {color:#fff; font-size:150%; padding:5px 0 5px 10px; text-transform:uppercase; margin:0 0 20px 0;}
.sidebar .offer {width:358px; height:65px; color:#00336F; margin:0 0 10px 0; overflow:hidden; padding:10px 10px 10px 0; font-size:90%;}
.sidebar .offer img {border:1px solid #00336F; float:left; margin:0 10px 0 0; padding:0;}
.sidebar .offer h4 {color:#00336F;}
.sidebar .offer h4 a {color:#00336F; text-transform:uppercase; text-decoration:none;}
.sidebar .offer h4 a:hover {text-decoration:underline;}

/* Blauw nieuwskader op de homepage */
.content .news {width:458px; height:215px; background:#2195ec; padding:10px;}
.content .news ul {margin:0; list-style:none;}
.content .news li,
.content .news li a {color:#00336F;}
.content .news li a:hover {text-decoration:none;}
.content .news li h4 {font-size:120%;}
.content .news li h4 a {color:#00336F; text-transform:uppercase; text-decoration:none;}
.content .news li h4 a:hover {color:#00336F; text-decoration:underline;}

/* Verticale variant van .contentBlocks */
.vertical {width:230px; margin:20px 0 0 0; float:right; padding:0;}
.vertical li {margin:0 0 20px 0;}

/* Acties/Producten/Nieuws lijstweergave */
.listView {margin:0 0 0 0; padding:0; list-style:none;}
.sidebar .listView li {min-height:66px; height:auto;}
.sidebar .listView p {margin-bottom:0;}
.listView li {margin:0 0 10px 0; padding:0; height:102px; display:block; clear:left; overflow:hidden; color:#666;}
.listView li h4 {font-size:12px;}
.fullWidth .listView li h4 {margin:0; padding:0; text-transform:uppercase; font-size:90%;}
.listView li h4 a {text-decoration:none; color:#666;}
.listView li h4 a:hover {color:#00336F; text-decoration:underline;}
.listView li img.nieuwsImg {width:100px; overflow:hidden; float:left; margin:0 8px 0 0; border:1px solid #00336F; padding:0;}
.listView li a {text-decoration:underline; color:#666;}
.listView li a:hover {text-decoration:none;}

.horizontal {width:995px; overflow:hidden; margin:0 0 10px 0;}
.horizontal li {float:left; width:325px; display:block; clear:none; margin:0 10px 0 0;}
.horizontal li.last {margin-right:0;}
.horizontal li img.nieuwsImg {margin-left:2px;}
.horizontal li p {font-size:11px;}

/* Footer */
#footer {width:100%; color:#666; font-size:110%; padding:8px 0 0 0; clear:both; border-top:1px solid #ccc;}
#footer address {width:995px; margin:0 auto; overflow:hidden;}
#footer address abbr {text-transform:uppercase; font-weight:bold;}
#footer address a {color:#666; text-decoration:underline; font-weight:normal}
#footer address a:hover {text-decoration:none;}

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