/**
 * @section   : Layout CSS
 * @project   : Climatic
 * @author    : Martin Hagedoorn
 * 				aanpassingen/optimalisatie: Boye Oomens <boye@e-sites.nl>
 * @media     : all
 * @version   : 1.0
 */

/* Wrapper + container */
div#wrapper {width:100%; border-bottom:1px solid #ccc; padding-bottom:10px; background:#fff url(/images/borderTop.gif) repeat-x 0 116px;}
div#container {width:982px; margin:0 auto; position:relative; overflow:hidden;}

/**/
div.header {margin:0 auto; width:982px;}
div.header p {float:left; padding-top:10px; position:relative;}
div.header p a {width:102px; height:98px; display:block; overflow:hidden; text-decoration:none; background:url(/images/logos/climatic.png) no-repeat;}
div.header p a span {visibility:hidden;}

/* Kruimelpad */
ul.crumbTrail {width:641px; height:37px; padding:10px 0 0 10px; margin:0 0 27px 0; float:left; clear:both; list-style:none; overflow:hidden; background: url(/images/backgrounds/breadcrumbBg.png) no-repeat top left;}
ul.crumbTrail li {display:block; margin-right:5px; padding:0 7px 0 0; float:left; background:url(/images/icons/greyArrow.gif) no-repeat right 8px; font-size:10px; color:#999;}
ul.crumbTrail li.first,
ul.crumbTrail li.last {background:none; margin-right:0;}
ul.crumbTrail li a {font-size:10px; color:#999;}

/* Zoekformulier */
div#wrapper form.search {float:right; margin:-1px -1px 0 0; clear:right;}
div#wrapper form.search div {float:right; width:222px; height:37px; line-height:37px; color:#999; background:#fff url(/images/backgrounds/questionInput.gif) no-repeat; border:0;}
div#wrapper form.search input#questionInput {width:203px; height:21px; margin:5px 7px 5px 6px; padding:6px 0 0 5px; color:#999; border:0;}
div#wrapper form.search input#questionBtn {float:right; width:98px; height:64px; padding-bottom:28px; color:#fff; font-weight:bold; background:#fff url(/images/backgrounds/questionBtn.gif) no-repeat; border:0; cursor:pointer;}

/* Hoofdnavigatie */
ol#nav {position:relative; z-index:97; float:left; margin:81px 0 0 0; padding:0; list-style:none;}
ol#nav li {float:left; margin-right:2px; position:relative; display:block; z-index:98;}
ol#nav li span {width:5px; height:37px; position:relative; top:-1px;}
ol#nav li span.item {top:7px;}
ol#nav li a {display:block; height:36px; font-size:15px; text-decoration:none; font-family:Arial;}
ol#nav li:hover a,
ol#nav li.active a {background-color:#192443; color:#fff;}
ol#nav li:hover a span.left,
ol#nav li.active a span.left {background:#fff url(/images/menuLeft.gif) no-repeat;}
ol#nav li:hover a span.right,
ol#nav li.active a span.right {background:#fff url(/images/menuRight.gif) no-repeat;}

/* Submenu */
ol#nav li ol {width:205px; z-index:99; margin:0; padding:0; list-style:none; display:none; position:absolute; left:-3px; top:36px; background:url(/images/submenuBg.png) repeat-y top left;}
ol#nav li:hover ol {display:block;}
ol#nav li ol li {width:196px; float:none; padding:0; margin:0 0 0 3px; position:relative; z-index:100; display:block;}
ol#nav li ol li.last {margin-bottom:-8px;}
ol#nav li ol li.last,
ol#nav li ol li.bottom {border:none;}
ol#nav li ol li.bottom {width:205px; height:15px; float:none; z-index:1000; font-size:0; line-height:0; background:url(/images/submenuBottomBg.png) no-repeat bottom left; position:absolute; bottom:-15px; left:-3px;}
ol#nav li ol li a {width:166px; padding:7px 15px; color:#192343; border-bottom:1px solid #ebebeb; background-color:#fff; display:block; height:auto; font-size:12px;}
ol#nav li:hover ol li a {color:#192343; background-color:#fff;}
ol#nav li ol li a:hover {width:161px; padding-left:20px; background:url(/images/submenuArrow.gif) no-repeat 10px 8px; color:#192343; text-decoration:underline;}
ol#nav li.active li a {background-color:#fff; color:#192443;}

/* Sfeerafbeelding op de homepage */
div.newsFlash {width:982px; height:217px; padding-top:10px; position:relative; background:url(/images/rightBg.png) no-repeat top right; overflow:hidden;}
div.newsFlash img {width:670px; height:217px; float:left; margin:-10px 20px 0 0;}
div.newsFlash h2 {color:#fff; font-size:20px; padding:0 20px 0 30px;}
div.newsFlash p {color:#fff; padding:10px 20px 5px 30px; font-size:12px;}
div.newsFlash a {color:#fff; font-size:12px;}
div.newsFlash a.more {padding:0 5px 0 0px;}

div.contentBlock {position:relative; margin:11px 11px 0 0; float:left; width:320px; background:url(/images/backgrounds/itemBgTop.png) no-repeat top;}
div.contentBlock h3 {color:#fff; font-size:13px; padding:7px 0 0 10px; height:25px;}
div.contentBlock ul.news {margin:10px 0 0 0; padding:0; list-style:none;}
div.contentBlock ul.news li {border-bottom:1px solid #ccc; padding:4px 10px 4px 20px;}
div.contentBlock ul.news li h4 {font-size:11px;}
div.contentBlock ul.news li a {padding-right:10px; font-weight:bold;}
div.contentBlock ul.news li.last {border-bottom:0;}
div.contentBlock div.tabContent {width:320px; margin:0 0 4px 0; clear:both;}
div.contentBlock div.bottom {height:18px; width:320px; background:url(/images/itemBgBottom.png) no-repeat bottom; position:absolute; bottom:0;}
div.contentBlock div.content {border-left:1px solid #ccc; border-right:1px solid #ccc; height:220px; display:block;}
div.flexible div.content {height:auto;}

div.services {background:url(/images/backgrounds/itemBgTopLeft.png) no-repeat top;}
div.services div.content {height:226px; overflow:hidden;}
div.services ol {margin-top:10px; list-style:none;}
div.services ol li {border-bottom:1px solid #ccc; padding:4px 10px 4px 20px;}
div.services ol li a {padding-right:10px; font-weight:bold;}
div.services ol li.last {border-bottom:0;}

/* Tabs */
div.tabs ul {margin:0; padding:0 0 0 12px; list-style:none; height:32px;}
div.tabs ul li {position:relative; float:left; height:32px;}
div.tabs ul li.last {margin-right:0;}
div.tabs ul li span {width:5px; height:32px; position:relative; top:-1px;}
div.tabs ul li span.item {top:7px;}
div.tabs ul li a {display:inline-block; height:32px; font-size:13px; text-decoration:none; font-weight:bold;}
div.tabs ul li:hover a,  li.active a {background-color:#192443; color:#fff;}
div.tabs ul li:hover a span.left,  li.active a span.left {background:#fff url(/images/menuLeft.gif) no-repeat;}
div.tabs ul li:hover a span.right, li.active a span.right {background:#fff url(/images/menuRight.gif) no-repeat;}
div.tabs ul li.active {display:block;}

/* Contentblock met Flash element */
div.homeFlashItem {height:220px;}
div#flashGrid div.content img {margin:10px 0;}

/* Nieuwsblock aan de rechterkant */
div.news {margin-right:0;}
div.news h4 {font-size:11px;}
div.news p {padding:0 0 7px 0;}

/* Nieuwsblock aan de rechterkant */
div.offerte {margin-right:0; margin-bottom:20px;}
div.offerte p {padding: 5px 7px 5px 7px;}
div.offerte div.content {border-left:1px solid #ccc; border-right:1px solid #ccc; height:155px; display:block;}
div.offerte div.content p {margin: 10px ; display: block;}
a.button.cta {background-color: #FFF; background-image: url('/images/backgrounds/buttonBg.png'); background-repeat:repeat-x; border-color: #64c5d9;}
a.button.large {font-size: 150%; padding: 13px 30px;}
a.button {background-clip: padding-box; background-color: #FFF; border: 1px solid #007373; border-radius: 2px 2px 2px 2px; box-shadow: 0 0 1px #FFFFFF inset; color: #192443; display: inline-block; font-size: 12px; height: 18px; line-height: 18px; margin-left: 50px; padding: 5px 15px; text-align: center; text-decoration: none; text-shadow: 1px 1px 3px #FFFFFF; width: auto;}
a:focus.button, a:hover.button {text-decoration:underline; background-clip: padding-box; background-image: url('/images/backgrounds/buttonBgHover.png'); background-repeat:repeat-x;}

/* Algemeen links */
div#leftContent {float:left; width:642px; padding:0 10px; position:relative; z-index:1; overflow:hidden;}
div#leftContent img.mainImg {margin-bottom:10px; margin-left:-10px;}
div#leftContent img.refLogo {margin:10px; float:right;}
div#leftContent h1 {color:#192343; font-size:20px; line-height:26px;}
div#leftContent h3,
div#leftContent h4,
div#leftContent h5 {color:#192343; font-size:13px;}
div#leftContent h6 {margin:5px 0 0 10px; font-size:11px;}
div#leftContent p {padding:5px 10px 10px 0;}
div#leftContent td img {margin-left: 0px;}
div#leftContent ul.related {list-style:none; margin:0; padding:5px 0 0 0; overflow:hidden;}
div#leftContent ul.related li {width:82px; height:66px; float:left; margin-right:5px; display:block; position:relative;}
div#leftContent ul.related li img {z-index:1; margin:0 0 0 4px; position:relative;}
div#leftContent ul.related li span {display:block; position:absolute; z-index:2; width:82px; height:66px; top:0; left:0; background:url(/images/merkBg.png) no-repeat;}
div#leftContent a.moreInfo {display:block; text-align:left; width:254px; height:29px; color:#fff; padding:5px 0 0 10px; margin-top:15px; font-weight:bold; background:#fff url(/images/contactBtn.gif) no-repeat; text-decoration:none;}
div#leftContent a.moreInfo:hover {text-decoration:underline;}

/* Algemeen rechts */
div#rightContent {float:left; width:320px; overflow:hidden;}
div#rightContent div.contentBlock {margin-top:0;}
div#rightContent div.contentBlock ul li.last {padding-bottom:10px;}

/* Referenties sorteerfunctionaliteit */
form#refSearch {width:643px; height:30px; padding:5px 0 0 8px; margin-left:-10px; background:url(/images/backgrounds/refFormBg.gif) no-repeat;}
form#refSearch select {width:155px; background-color:#efefef; margin:1px 6px 0 0; padding:1px; border:1px solid #999; color:#999;}
form#refSearch input.submitBtn {float:left; color:#fff; background:#192443; border:none; padding:0 5px 2px 5px; height:20px;}

/* Bladeren balk */
div.browse {width:643px; height:30px; padding:5px 0 0 8px; margin:10px 0 0 -10px; background:url(/images/backgrounds/refFormBg.gif) no-repeat; clear:both;}

/* Lijstopsomming met referenties */
ul.refList {margin:0 0 0 -10px; padding:0; list-style:none; overflow:hidden;}
ul.refList li {float:left; height:123px; width:128px; background:url(/images/refBg.gif) no-repeat; margin:6px 3px 0 0;}
ul.refList li.last {margin-right:0;}
ul.refList li {text-decoration:none; font-size:11px;}
ul.refList li span {left:10px; color:#999; position:relative; width:118px;}
ul.refList li span.refName {width:118px; display:block; clear:left; float:left;}
ul.refList li div {height:59px;width:112px;margin:2px auto 4px auto;line-height: 59px;text-align: center;}
ul.refList li div img {margin:auto; vertical-align: middle;display:inline;}
ul.refList li a {text-decoration: none;}

/* Product detail */
ul.merkList {padding:0; margin:0; list-style:none;}
ul.merkList li {float:left; margin:7px 7px 0 0;}

/* Contact pagina */
div.contactInfo {width:319px; float:left; padding-left:10px; clear:both}
div.contactInfo h1 {color:#192343; font-size:16px; line-height:26px;}
div.contactInfo div {float:left; padding:10px 5px 0 0;}
div.contactRoute {float:right; height:170px; width:635px; background:url(/images/contactBg.jpg) no-repeat;}
div.contactRoute h3 {color:#fff; padding:3px 0 0 10px; font-size:14px; margin-top:3px;}
div.contactRoute form {float:right; margin:102px 5px 0 0;}
div.contactRoute form div {float:right; width:222px; height:37px; color:#999; background:#fff url(/images/backgrounds/questionInput.gif) no-repeat; border:0;}
div.contactRoute input#routeInput {width:203px; height:21px; margin:5px 5px 5px 6px; padding:6px 0 0 5px; color:#999; border:0;}
div.contactRoute input#routeBtn {float:right; width:98px; height:37px; line-height:37px; color:#fff; font-weight:bold; background:#fff url(/images/routeBtn.png) no-repeat; border:0; cursor:pointer;}

/* Contactformulier */
form#contactForm {padding:40px 0 0 10px;}
form#contactForm h3 {color:#192343; font-size:16px; line-height:26px; padding-bottom:10px;}
form#contactForm label {width:55px; color:#999;}
form#contactForm label.left {width:70px;}
form#contactForm div {float:left; width:254px; height:31px; background:url(/images/contactInput.gif) no-repeat; margin:0 8px 4px 0;}
form#contactForm input {width:230px; height:21px; margin:2px; padding:6px 5px 0 5px; color:#999; border:0;}
form#contactForm br {clear:both;}
form#contactForm input#contactBtn {text-align:left; width:254px; height:29px; color:#fff; padding:0 0 0 10px; margin:-39px 0 0 70px; font-weight:bold; background:#fff url(/images/contactBtn.gif) no-repeat; border:0; cursor:pointer;}
form#contactForm div.textBg {width:573px; height:70px; margin-right:2px; background:#fff url(/images/contactTextarea.gif) no-repeat;}
form#contactForm textarea {width:559px; height:62px; margin:2px; padding:2px 5px 2px 5px; color:#999; border:0; overflow-x:hidden;}

form#contactForm div#error {width:100%; background:none; color:red; display:none; clear:both; white-space:pre; margin-bottom:20px;}
form#contactForm div#error.show {display:block;}
form#contactForm div#error.hide {display:none;}

/* Team */
ul.teamList {margin:0; padding:0; list-style:none; width:650px;}
ul.teamList li {float:left; position:relative; margin:0 4px 4px 0; width:126px; height:151px; line-height:110%;}
ul.teamList li.last {margin-right:0;}
ul.teamList li img {position:absolute; top:0; z-index:2; width:126px; height:151px;}
/*ul.teamList li img.foto {position:absolute; top:0; z-index:1; width:128px;}*/
ul.teamList li img.foto {margin-top:2px; z-index:1; width:126px; height:108px; float:left; display:block; position:relative;}
ul.teamList li span {z-index:3; color:#999; clear:left; display:block; position:relative;}
ul.teamList li span strong {color:#192343;}

/* Footer met adresgegevens en tweetal logos */
div#footer {width:982px; margin:0 auto 20px; overflow:hidden; clear:both; padding:0 0 0 0;}
div#footer address {width:800px; font-style:normal; float:left;}
div#footer address span {background:url(/images/icons/greyArrow.gif) no-repeat 0 8px; float:left; font-size:9px; color:#999; display:block; padding:0 11px 0 14px;}
div#footer address span.company {padding-left:20px; text-transform:uppercase; background:none;}
div#footer address a {font-size:10px; color:#999;}
div#footer a.logo {display:block; float:right; margin:0 10px 0 0;}

/* Map */
#map {margin:20px 0 0 0; width: 655px; height: 350px;}

div#locationBox {margin-top:55px; margin-bottom:15px; width:320px; height:217px; background:url(/images/rightBg.png) no-repeat; color:#fff;}
div#locationBox h1 {color:#fff; font-size:20px; padding:20px 20px 0 30px;}
div#locationBox p {color:#fff; padding:10px 20px 5px 30px; font-size:13px;}
div#locationBox form {margin:30px 20px 5px 30px;}
div#locationBox input#routeInput {padding:3px;width:200px;}
div#locationBox input#routeBtn {margin:10px 0 0 0;padding:3px;}

ul#vacanciesOverview {list-style:none; margin:0; padding:0;}
ul#vacanciesOverview li {padding:10px 10px 20px 0; margin:0 0 15px 0;}

form#vacanciesForm {padding:40px 0 0 10px;}
form#vacanciesForm h1 {color:#192343; font-size:20px; line-height:26px; padding-bottom:10px;}
form#vacanciesForm label {width:55px; line-height:31px;}
form#vacanciesForm label.left {width:110px;}
form#vacanciesForm div {float:left; width:254px; height:31px; background:url(/images/contactInput.gif) no-repeat; margin:0 10px 10px 0;}
form#vacanciesForm input {float:none;width:230px; height:22px; margin:2px; padding:5px 5px 0 5px; color:#999; border:0;}
form#vacanciesForm input.file {border:1px;}
form#vacanciesForm input.radioBtn {width:auto; height:auto; margin-left:10px;}
form#vacanciesForm br {clear:both;}
form#vacanciesForm input#vacatureBtn {text-align:left; width:254px; height:29px; color:#fff; padding:0 0 0 10px; margin:10px 0 0 0; font-weight:bold; background:#fff url(/images/contactBtn.gif) no-repeat; border:0; cursor:pointer;}
form#vacanciesForm div.textBg {width:573px; height:70px; margin-right:2px; background:#fff url(/images/contactTextarea.gif) no-repeat;}
form#vacanciesForm textarea {width:559px; height:62px; margin:2px; padding:2px 5px 2px 5px; color:#999; border:0; overflow-x:hidden;}

p.error {color:#ff0000;}
div#searchResults {padding:5px 10px 10px 0;}
ul.searchResults {margin:0 0 10px 0;}

/* Misc */
ul.lidVan {list-style:none; margin:0 0 0 5px; padding:0;}
ul.lidVan li {margin-top:30px;}
ul.lidVan img {float:left; padding:0 15px 0 5px;}