/* All the non-default styles unique to this site. ----------------------------------------------- @file style.css @version 1.0 @author Rommert van der Marel Copyright (c) 2011 Rommert van der Marel */ html, body {height: 100%;} /******************************************************************************************************** * General ********************************************************************************************************/ .wrapper, .center{width: 970px; margin: 0 auto; } .header, .footer {height:1%; width:100%;} /******************************************************************************************************** * Header *******************************************************************************************************/ .header .wrapper{ position: relative; height:100px; } /* #nav { list-style: none outside none; margin: 0; overflow: hidden; position: absolute; right: 0; top:60px; } #nav li { float: left; } #nav li a { display: block; font-size: 13px; line-height: 24px; margin-left: 25px; text-decoration: none; color:#000; } #nav li.here a { color:#B52C2B; } #nav li a:hover { color: #333333;} */ .breadcrumb{ margin:8px 0 30px 0; padding-bottom:3px; font-size:11px; border-bottom:solid 1px #EAEAEA; width:100%; overflow: hidden; line-height: 22px; } .breadcrumb li{ float:left; margin-right:4px; list-style: none!important; margin-left:0px!important; } .breadcrumb li a{ margin-right:2px; text-decoration: none;} #logo{ position: absolute; top:10px; left:0px; } #logo a{ width:258px; height:80px; display: block; text-indent: -9999em; background:url(/template/img/logo.gif) no-repeat; } #top-nav{ position: absolute; width:300px; top:0px; right:0px; font-size:11px; } #top-nav .input-keywords{ width:120px; border:none; line-height: 16px; padding:2px 16px 2px 2px; background: url(/template/img/bg_search.gif) no-repeat right center #fff;} #top-nav form{ background: #CBCBCB; padding:8px 10px; width:135px; float:right; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;} .nav-essential{ float: right; overflow:hidden; margin:10px 12px 0 0;} .nav-essential li{ float:left; margin-left:8px; padding-right:8px; line-height: 12px; border-right:1px solid #CBCBCB; } .nav-essential li a{ text-decoration: none; } .nav-essential li.last{ border:none; padding-right: 0px;} .header-image{ background:#F5F5F5; height: 150px;} /******************************************************************************************************** * Navigation *******************************************************************************************************/ #nav, #nav * { margin: 0;padding: 0; list-style: none; font-size:13px; } #nav { line-height: 1.0; position:absolute; top:60px; right:0px; } #nav ul { position: absolute;top: -999em; width:10em; } #nav ul li { width: 100%; border-bottom:solid 1px #efefef; border-left:solid 1px #efefef; border-right:solid 1px #efefef;} #nav li:hover { visibility: inherit; } #nav li { float: left; position: relative; } #nav a { display: block; position: relative; } #nav li:hover ul, #nav li.sfHover ul { left: 0; top: 2.5em; } ul#nav li:hover li ul, ul#nav li.sfHover li ul { top:-999em; } ul#nav li li:hover ul,ul#nav li li.sfHover ul { left: 10em; top:0; } ul#nav li li:hover li ul, ul#nav li li.sfHover li ul { top: -999em; } ul#nav li li li:hover ul, ul#nav li li li.sfHover ul { left:10em; top:0;} #nav { float: left; margin-bottom: 1em; } #nav a { padding: .75em 1em; text-decoration:none; } #nav a, #nav a:visited { color: #000; } #nav li a:hover{ background:#999999; } #nav li { background:none; } #nav li li { background: #fff; } #nav li li li { background:#444; } #nav li li a, #nav li li li a {text-transform: none;} #nav li li li a{ display: none;} #nav li:hover, #nav li.sfHover, #nav a:focus, #nav a:hover, #nav a:active { background: #eaeaea; outline: 0; color:#fff!important; } #nav li.here a {color:#fff; } #nav li.here, #nav li.parent-here{ background: #a61617!important; } #nav li.parent-here > a, #nav li.here { color:#fff;} #nav li li a:hover { background:#999999;} /*** arrows **/ #nav a.sf-with-ul { padding-right: 2.25em; min-width: 1px; } .sf-sub-indicator { position: absolute; display: block; right: .75em; top: 1.05em; /* IE6 only */ width: 10px; height: 10px; text-indent: -999em; overflow: hidden; background: url('../templates/images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ } a > .sf-sub-indicator { /* give all except IE6 the correct values */ top: .8em; background-position: 0 -100px; /* use translucent arrow for modern browsers*/ } /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ } /* point right for anchors in subs */ #nav ul .sf-sub-indicator { background-position: -10px 0; } #nav ul a > .sf-sub-indicator { background-position: 0 0; } /* apply hovers to modern browsers */ #nav ul a:focus > .sf-sub-indicator, #nav ul a:hover > .sf-sub-indicator, #nav ul a:active > .sf-sub-indicator, #nav ul li:hover > a > .sf-sub-indicator, #nav ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } /*** shadows for all but IE6 ***/ .sf-shadow ul { background: url('../templates/images/shadow.png') no-repeat bottom right; padding: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px; } .sf-shadow ul.sf-shadow-off { background: transparent; } #nav-sub { font-size:12px; } #nav-sub li { border-top: 1px solid #EAEAEA; padding: 3px 0 2px 18px; background: url(/template/img/bg_subnav.gif) no-repeat left center; list-style: none; margin-left:0px; } #nav-sub li.last{ border-top: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; } #nav-sub li a { color:#000; display: block; text-decoration: none; } #nav-sub li a.here { font-weight: bold;} #nav-sub li a:hover{ color:#a61617;} #nav-sub li a span{ color:#999999; margin-right:6px; } .list-item { font-size:14px; border-bottom: 1px solid #EAEAEA; } .list-item li{ border-top: 1px solid #EAEAEA; padding: 10px 0; list-style: none!important; margin-left:0px!important;} .list-item li a { color:#000; display:block; text-decoration: none;} .list-item li a:hover { color:#a61617;} .list-item li a span{ color:#999999; margin-right:6px;} .list-item li p{ font-size:12px; color:#000; margin:3px 0; line-height: 18px; } .list-item.project-list li { padding: 20px 0; } /******************************************************************************************************** * Body *******************************************************************************************************/ #main-wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 0 -325px 0; } .content-container{ width:100%; overflow:hidden; } .col-right .content { width:670px; float:left; overflow:hidden; padding: 0px 30px 40px 0;} .col-left .content { width:720px; float:left; overflow:hidden; padding: 0px 0px 40px 250px; } .content{ color:#232323; font-size:13px; line-height: 20px; } .content ul li{ list-style:disc; margin-left:22px; } .content ol li{ list-style:disc; margin-left:22px; } .call-to-action{ background-color:#B2B1B1; margin-bottom:40px; background-image: url(/template/img/bg_sidebar_button.png); background-repeat: no-repeat; background-position: right center; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .call-to-action.oranje{ background-color:#F3A132; } .call-to-action.oranje:hover{ background-color:#E28920; } .call-to-action.bruin{ background-color:#433320; } .call-to-action.bruin:hover{ background-color:#2D2013; } .call-to-action.rood{ background-color:#B52C2B; } .call-to-action.rood:hover{ background-color:#9B2626; } .call-to-action.grijs{ background-color:#B2B1B1;} .call-to-action.grijs:hover{ background-color:#A3A3A3;} .call-to-action a{ color:#fff; font-size: 20px; line-height: 26px; display: block; padding:16px 44px 16px 24px; font-family: 'Cabin', sans-serif; text-decoration: none; } .call-to-action.info{ color:#fff; font-size: 20px; line-height: 26px; display: block; padding:16px 24px 16px 24px; font-family: 'Cabin', sans-serif; background-image: none; } .call-to-action.info.oranje:hover{ background-color:#F3A132; } .call-to-action.info.bruin:hover{ background-color:#433320; } .call-to-action.info.rood:hover{ background-color:#B52C2B; } .call-to-action.info.grijs:hover{ background-color:#B2B1B1;} .sidebar{ } .sidebar h2{ font-size:12px; } .sidebar-left{ width:220px; float:left; margin-left: -970px;} .sidebar-right{ width:250px; float:right; padding-top:35px; padding-left:20px; background: url(/template/img/bg_sidebar.jpg) no-repeat top left; } .sidebar .title{ color:#686868; font-size:20px; text-transform: uppercase; margin-bottom:20px;} .sidebar ul{ margin-bottom:45px; font-size: 12px; } .sidebar ul li{ border-bottom:solid 1px #EAEAEA; padding:4px 0;} .sidebar ul li a{ color:#383838; text-decoration: none; } .sidebar ul li a:hover{ } .sidebar ul li a .date{ color:#989898; margin-right: 6px; } .sidebar ul li.here a{ color:#B52C2B;} .sidebar #nav-sub li { border-bottom:solid 1px #EAEAEA; border-top:none; padding-top: 6px; padding-bottom: 6px;} .highlight{ width:100%; overflow: hidden; } .highlight a{ text-decoration: none;} .highlight .block{ height:200px; width:205px; overflow: hidden; padding-bottom:20px; font-size:12px; line-height: 20px; color:#686868; border-bottom:solid 1px #EAEAEA; padding-top: 20px;} .highlight .block h2, .highlight .block h2 a{ color:#a61617; font-size:15px; font-weight:normal; line-height: 22px; margin:6px 0 2px 0;} .highlight .block h2 a:hover{ color: #000;} .highlight img{ opacity:0.9; } .highlight img:hover{ opacity:1.0; } .highlight .block{ float:left; padding-right:25px; } .highlight .block.b3, .highlight .block.b6{ padding-right:0px;} .highlight .block.b4, .highlight .block.b5, .highlight .block.b6{ border:none;} .archive{ margin-top:60px;} .archive h3{ font-size:14px; margin-bottom:8px; } .landing{ margin-top: 40px;} .list-block{ border-top: 1px solid #EAEAEA; padding: 25px 0 15px 0;} /* ==|== Expertise ====================================================== */ .tabs{ width:100%; overflow: hidden; margin-top:40px; } .tabNavigation{ width:100%; overflow: hidden; background: #EAEAEA; padding:3px 10px 0 10px;} .tabNavigation li{ float: left; list-style: none!important; margin-left:0px!important; margin-right: 4px; font-size: 13px; } .tabNavigation li a{ display: block; padding:3px 10px; color:#353535; text-decoration: none;} .tabNavigation li a.selected{ background: #fff; color:#B52C2B;} .tab-item{ margin:20px 0; padding: 0 10px; font-size: 12px; color:#353535;} .tab-item ul{ font-size:12px; } .block-special{ margin-bottom: 40px;} .block-special h3 { text-decoration: none; display: block; font-size:12px; font-weight: normal; border-bottom: 1px solid #EAEAEA; padding: 3px 0 2px 18px; background: url(/template/img/bg_subnav.gif) no-repeat left center; margin-bottom: 10px;} .block-special .list-item{ border-bottom: none;} .block-special .list-item li{ border-top:none; } /* ==|== Contact ====================================================== */ #flashregio{ width:340px; float: left;} /******************************************************************************************************** * Footer *******************************************************************************************************/ #spacer { height: 425px; } .footer{ background:#342715; height: 385px; padding: 40px 0 0 0; } .footer, .footer a{ color:#CEC3BC; text-decoration: none; } .footer a:hover{ color:#fff; } .footer .col li{ margin-bottom:8px;} .footer .col{ width:174px; margin-right:20px; float:left; color:#fff; font-size:11px; } .footer h4, .footer h4 a{ font-size:14px; margin-bottom: 8px; color:#fff; } .disclaimer{ border-top:solid 1px #dfdfdf; margin-top:20px; font-size:11px; } .disclaimer li{ float:left; margin:10px 20px 0 0; } .disclaimer li a, .disclaimer li{ color:#B7B7B7; } .overflow{width:100%; overflow: hidden; }