/* -------------------------------------------------
Version :1.33
Author :Tremani
Email :info@tremani.nl
Website :http://tremani.nl
Client :key Groep (http://www.keygroep.com)
---------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
/* EH:font-weight:inherit; */
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
/* remember to define focus styles! */
:focus {outline:0;}
ol, ul {list-style:none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse:separate; border-spacing:0;}
caption, th, td {text-align:left; font-weight:normal;}
blockquote:before, blockquote:after,
q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
/* END GLOBAL RESET ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-family:Arial, Helvetica, Verdana, sans-serif; font-weight:bold; margin:16px 0;}
h1{ font-size:170%; color:#211458; line-height:26px; text-transform:uppercase; letter-spacing:2px; }
h2{ font-size:160%; color:#211458; line-height:20px; }
h3{ font-size:135%; color:#211458; }
h4{ font-size:112%; }
h5{ font-size:100%; color:#211458; margin-bottom:5px;}
h6{ font-size:80%;}
h2 + p,
h3 + p,
h4 + p {margin-top:-15px;}
body {font:69%/1.5em "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Tahoma, Verdana, sans-serif; color:#666; background:url(../img/bgr-gradient.png) repeat-x;}
a {color:#211458; font-weight:bold; text-decoration:none;}
a:hover {color:#8471ba; font-weight:bold; text-decoration:none;}
p {margin-top:10px; margin-bottom:10px;}
.bold { font-weight:bold;}
/* SITE SPECIFIC ----------------------------------------------------------- */
#outerwrapper { width:908px; margin:0px auto;/* background-color:#fff;*/ background:url(../img/bgr.png) no-repeat 50% 0; padding:0 4px 60px 4px; position:relative; min-height:580px; }
* html #outerwrapper {height:580px;}
#logo {margin-bottom:22px; height:49px;}
#header { height:260px; position:relative;}
* html #header { margin-bottom:-160px;}
#headerimage { position:relative; left:454px; top:-176px; width:454px; height:176px; background:url(../img/headerimage.png) repeat-y 0 0;}
#headerimage-inner { position:absolute; top:-20px; width:454px; height:549px; background:url(../img/main-image-index.jpg) no-repeat 0 0;}
.wit-verloop { position:absolute; bottom:0; width:454px; height:110px; background:url(../img/wit-verloop.png) repeat-x 0 100%; }
#search-wrapper { height:22px; position:absolute; right:15px; top:9px;}
* html #search-wrapper { top:8px;}
#searchform { float:right; position:absolute; width:200px; top:0px; right:0px; font-size:10px;}
#search_field { width:164px; height:22px; background:url(../img/search.png) no-repeat; border:none; padding:5px 5px 5px 5px; margin:0px 0px 0px 0px; text-align:right; }
#search_field2 { width:164px; height:22px; background:url(../img/search.png) no-repeat; border:none; padding:5px 5px 5px 5px; margin:0px 25px 0px 0px; text-align:right;}
#search_field2 {margin-top:-1px;}
#btn_search { background:url(../img/btn-search.jpg) no-repeat; border:none; padding-top:0px; width:22px; height:22px; position:absolute; top:-1px; right:0px; cursor:pointer;}
.intro ul li,
.text ul li {position:relative; background:transparent url(../img/bullet-li-grey-sq.png) no-repeat 0 9px; padding-left:8px; margin:.3em 0 .3em 0}
li.bullets { background:url(../img/bullet.jpg) no-repeat 0 50%; font-size:110%; font-weight:bold; padding-left:18px; line-height:1.5em; color:#211458;}
/* Nav ----------------------------------------------------------- */
#nav {width:908px; background:#211458; font-size:12px; line-height:14px; position:relative; min-height:176px; background:url(../img/navbg.png) repeat-y 0 0; }
* html #nav {height:176px; }
#mainnav {position:absolute; width:227px; background-color:#211458;}
#mainnav li { width:197px; padding:0 0 0 15px; }
* html #mainnav li {height:21px !important; margin-bottom:-1px;}
*:first-child+html #mainnav li {height:22px; margin-bottom:-1px;}
#mainnav li a,
#mainnav li a:visited { color:#fff; display:block; width:197px; min-height:12px; font-weight:normal; border-bottom:1px solid #4b4077; padding:3px 0 4px 0; }
* html #mainnav li a {height:12px !important; }
#mainnav li a:hover,
#mainnav li a:active { background:#b4a2d9; color:#211458; position:relative; left:-15px; margin-right:-15px !important; padding:3px 0 4px 15px !important; width:212px !important; }
#mainnav li.current a { background:#8471ba; position:relative; left:-15px; width:212px; padding:3px 0 4px 15px; }
* html #mainnav li a:hover { margin-right:-15px !important; padding:3px 0 4px 15px !important; }
* html #mainnav li.current a { margin-right:-15px !important; padding:3px 0 4px 15px !important; width:212px !important;}
#subnav {position:relative; width:227px; min-height:176px; left:227px; background:#463c72; }
* html #subnav {height:176px;}
#subnav li { width:197px; padding:0 0 0 15px; }
* html #subnav li {height:21px !important; margin-bottom:-1px;}
*:first-child+html #subnav li {min-height:22px; margin-bottom:-1px;}
#subnav li a,
#subnav li a:visited { color:#fff; display:block; width:197px; min-height:12px; font-weight:normal; border-bottom:1px solid #5c5383; padding:3px 0 4px 0; }
* html #subnav li a {height:12px !important; }
#subnav li a:hover,
#subnav li a:active { background:#8471ba; position:relative; left:-15px; color:#0e0436; margin-right:-15px !important; padding:3px 0 4px 15px !important; width:212px !important; }
#subnav li.current a { background:#6657a5; position:relative; left:-15px; width:212px; padding:3px 0 4px 15px; }
* html #subnav li a:hover,
* html #subnav li.current a { margin-right:-15px !important; padding:3px 0 4px 15px !important; width:212px !important;}
/* Col1 & Col2 -------------------------------------------------------- */
#col1 { width:220px; float:left; position:relative; margin-top:13px;}
#index-col1 {width:454px; padding-top:9px; position:relative; }
* html #index-col1 {height:1px; }
#col2 { width:647px; float:right; display:inline; margin:15px 20px 15px 15px; }
#index-col2 {width:454px; float:right; position:relative;}
#nieuwsbrief { width:235px; height:78px; background:url(../img/nieuwsbrief.png); position:absolute; right:-439px; top:-11px;}
* html #nieuwsbrief {background:transparent url(../img/nieuwsbrief-ie.png) no-repeat 0 0; }
a.rollover {width:195px; height:21px; background:url(../img/btn-inschrijven.png) no-repeat 0 0; text-indent:-3999px; display:block; margin:40px auto auto 20px; /*border:30px solid red;*/} /* can nest this button ie bug!!! */
a.rollover:hover {width:195px; background:url(../img/btn-inschrijven.png) no-repeat 0px -21px;}
a.rollover:active {width:195px; background:url(../img/btn-inschrijven.png) no-repeat 0px -42px;}
.icons {height:12px; position:absolute; right:1px; top:6px;}
* html .icons {top:5px;}
a.btn {width:12px; height:12px; margin:0 5px 0 0; float:left; display:inline; background-repeat:no-repeat; background-position:0 0; text-indent:-999em; overflow:hidden;}
a:hover.btn {background-position:0 -12px;}
a:active.btn {background-position:0 -24px;}
a.icon-more {background-image:url(../img/icon-more.png);}
a.icon-rss {background-image:url(../img/icon-rss.png);}
a.icon-next {background-image:url(../img/icon-next.png); display:none;}
a.icon-previous {background-image:url(../img/icon-previous.png); display:none;}
.js-active a.icon-next {display:inline;}
.js-active a.icon-previous {display:inline;}
#introtekst {padding-left:15px; min-height:188px;}
* html #introtekst {height:188px; position:relative; }
#nieuws {padding-left:0px; color:#211458; background-color:#fff; min-height:200px; overflow:hidden; width:227px; }
* html #nieuws {height:400px;}
#nieuws ul li {margin:6px 5px 6px 15px; border-bottom:1px solid #dfdfdf; padding-bottom:6px; }
#nieuws ul li span a {color:#807f82;}
#nieuws ul li span a:hover{color:#CCCCCC;}
#nieuws h4 {background:#dfdfdf; padding:3px 6px 3px 15px; position:relative; vertical-align:baseline;}
/*20090312 Claire M. Lotion - Make 3->6 news items visible for positions. This also works on the front page next to positions and projects. */
/*#nieuws ul {min-height: 150px;}*/
#nieuws ul {min-height: 350px;}
#vacature {padding-left:0px; color:#211458; background-color:#f1f1f1; min-height:200px; overflow:hidden; width:227px; }
* html #nieuws {height:400px;}
#vacature ul li {margin:15px 5px 15px 15px;}
#vacature ul li span a {color:#807f82;}
#vacature ul li span a:hover{color:#CCCCCC;}
#vacature h4 {background:#d3d3d3 ; padding:3px 5px 3px 15px; position:relative;}
#vacature img {float:right; margin-top:-13px;}
#actueel {width:454px; float:left; position:relative; display:inline; margin-top:2em; min-height:100px; background:url(../img/bg-actueel.gif) repeat-y 0 0; padding:1px 0; }
* html #actueel {margin-bottom:-10px; height:100px; }
*:first-child+html #actueel {margin-bottom:-10px; }
#nieuws-index {padding-left:0px; color:#211458; background-color:#fff; min-height:50px; width:227px; float:left;}
* html #nieuws-index {min-height:50px;}
#nieuws-index ul li {margin:15px 5px 15px 15px;}
#nieuws-index ul li span a {color:#807f82;}
#nieuws-index ul li span a:hover {color:#CCCCCC;}
#nieuws-index h4 {margin-top:-8px; background:#dfdfdf; padding:3px 5px 3px 15px; position:relative;}
#nieuws-index img {position:absolute; top:5px; right:6px;}
#vacature-index {padding:0px; color:#211458; background-color:#efefef; min-height:50px; width:227px; float:left;}
* html #vacature-index {min-height:50px;}
#vacature-index ul li {/*margin:6px 5px 6px 15px;*/ margin:15px 5px 15px 15px; padding:1px 0;}
#vacature-index ul li span a {color:#807f82;}
#vacature-index ul li span a:hover{color:#CCCCCC;}
#vacature-index h4 {margin-top:-8px; background:#d3d3d3; padding:3px 5px 3px 15px; position:relative;}
#vacature-index img {position:absolute; top:5px; right:6px;}
#project-index {padding:0px; color:#211458; background-color:#efefef; min-height:50px; width:227px; float:left;}
* html #project-index {min-height:50px;}
#project-index ul li {/*margin:6px 5px 6px 15px;*/ margin:15px 5px 15px 15px; padding:1px 0;}
#project-index ul li span a {color:#807f82;}
#project-index ul li span a:hover{color:#CCCCCC;}
#project-index h4 {margin-top:-8px; background:#d3d3d3; padding:3px 5px 3px 15px; position:relative;}
#project-index img {position:absolute; top:5px; right:6px;}
/* Footer ----------------------------------------------------------- */
.witvlak1 {width:227px; height:20px; margin-top:0px; margin-right:300px; float:left; position:relative; bottom:0px; background-color:#fff;}
.witvlak2 {width:454px; height:20px; margin-top:0px; float:left; background:#000 url(../img/bg-actueel.gif) repeat-y 0 0;}
.actueel-blok { background:#fff url(../img/bg-actueel.png) repeat-y 0 0;}
#footer { background-color:#211458; height:60px; width:908px; color:#fff; font-size:10px; position:relative; /*bottom:0;left:4px;*/ margin:-60px auto 0 auto;}
#footer span { font-weight:bold;}
#footer-extras {padding:15px 10px 10px 0; width:350px; float:right; display:inline; }
#footer ul li {float:right; padding-left:5px; display:inline; }
#footer a {color:#dfdfdf; text-decoration:none;}
#footer a:hover { color:#a28ccf;}
#contact {padding:15px 20px 10px 20px; width:450px; float:left; display:inline;}
#author { width:14px; height:82px; float:right; display:inline; position:relative; margin-top:-50px; margin-right:-20px;}
* html #author { position:absolute; bottom:10px; right:0px !important;}
*:first-child+html #author {position:absolute; bottom:10px; right:0px !important;}
#author a, #author a:visited { height:80px; display:block; background:url(../img/tremani.png) no-repeat 0 0; position:relative; }
#author a:hover {width:14px; background-position:-13px 0;}
/* Standard extras ----------------------------------------------------------- */
.seo {position:absolute; left:-5000px; top:-5000px}
.clearer {clear:both; height:0; font-size:0px; line-height:0px; }
/*=:project - scalable Inman Flash Replacement (sIFR) version 3.
=:file - Copyright:2006 Mark Wubben. Author:Mark Wubben,
=:history - * IFR:Shaun Inman * sIFR 1:Mike Davidson, Shaun Inman and Tomas Jogin * sIFR 2:Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben
=:license - This software is licensed and provided under the CC-GNU LGPL. See
*/
.sIFR-flash {visibility:visible !important; margin:0; padding:0;}
.sIFR-unloading .sIFR-flash {visibility:hidden !important;}
.sIFR-replaced, .sIFR-ignore {visibility:visible !important;}
.sIFR-alternate {position:absolute; left:0; top:0; width:0; height:0; display:block; overflow:hidden;}
.sIFR-replaced div.sIFR-fixfocus {margin:0pt; padding:0pt; overflow:auto; letter-spacing:0px; float:none;}
.sIFR-active h2{visibility:hidden; text-align:left; line-height:1em; font-size:19px; }
.sIFR-active #index-col1 h2{margin-bottom:0; }
.sIFR-active #index-col1 li.bullets{visibility:hidden; text-align:left; line-height:1em; font-size:16px; margin:3px 0; }
.sIFR-active h3{visibility:hidden; text-align:left; line-height:1em; font-size:16px; margin:0px 0px 7px 0px; }
/* EH Add-ons/Extra's */
#btn-8 {visibility:hidden;}
#newsletter_messages { }
.mail_error_message {color:#e83700; border:2px solid #e83700; margin:30px 0 20px 0px; padding:0 8px 8px 8px; line-height:1.2em; width:440px;}
.mail_succes_message {color:#727272; border:2px solid #727272; margin:30px 0 20px 0px; padding:0 8px 8px 8px; line-height:1.2em;}
.mail_error_message h4 {background:#e83700 url(../img/error-warning.png) no-repeat 6px center; margin:0 -8px 8px; color:#fff; padding:4px 0 4px 20px;}
.mail_succes_message h4 {background:#727272 url(../img/icon-approved-ticked-klein.png) no-repeat 6px center; margin:0 -8px 8px; color:#fff; padding:4px 0 4px 20px;}
.news_header {list-style-type:none!important; list-style:none;}
/* EH Add-ons/Extra's */
/* Contact form ----------------------------------------------------------- */
#formulier {}
#formulier legend {font-size:150%; /*color:#000;*/ line-height:18px; display:block; width:400px !important; padding:0; margin:0;}
* html #formulier legend {margin-left:-8px;}
*:first-child+html #formulier legend {margin-left:-8px;}
#formulier input {position:relative; height:15px; width:453px; padding:4px 0 2px 6px; margin:0 0 7px 0; border:none; font-size:11px; color:#555; background:#ececeb url(../img/input-bg2.png) no-repeat -1px -1px; line-height:16px;}
#formulier input:hover,
#formulier input:focus {color:#000; }
#formulier textarea {position:relative; width:453px; padding:6px 0 0 6px; margin:0; border:none; font-size:11px; color:#555; background:#ececeb url(../img/textarea-bg2.png) no-repeat -1px -1px; overflow:hidden;
font-family:"Lucida Grande", "lucida Sans Unicode", "lucida Sans Console", Verdana, Calibri, Corbel, Arial, Helvetica, serif; }
* html #formulier textarea {overflow:hidden;}
#formulier textarea:hover,
#formulier textarea:focus {color:#000;}
#formulier input.submit_button {position:relative; cursor:pointer; height:23px; width:140px; padding:1px 0 5px 0; margin:0; border:none; font-size:11px; color:#fff; background:#211458;}
* html #formulier input.submit_button {padding:2px 0 4px 0;}
*:first-child+html #formulier input.submit_button {padding:3px 0 3px 0;}
#formulier input.submit_button:hover,
#formulier input.submit_button:focus,
#formulier input.submit_button.over,
#formulier input.submit_button.over:focus { background:#8471ba;}
#formulier input.submit_button:active,
#formulier input.click { background:#000;}
#formulier #cv {height:20px; font-size:11px; color:#555; line-height:16px;}
.index .intro {padding-left:15px; min-height:188px;}
* html .index .intro {height:188px;}
.news-item li {margin:2em 0; padding-bottom:.3em; border-bottom:1px solid #dfdfdf;}
p.news-body {margin:0 0 0 0;}
span.datum {padding-right:.5em; font-weight:bold;}
span.readmore_label {/*margin:-3em 0 1em 0; position:relative;*/}
p.readmore {margin:-1em 0 2em 0; position:relative;}
/* EH 09/10/2008 Add-ons */
.position_outdated { background:#E8E8E8; border:1px solid #211458; }
.position_outdated_text { background:#E8E8E8; padding:10px;}
.sublink_more,
.sublink_more:visited {width:192px; height:18px; margin-left: 15px; display:block;}
/*
.sublink_more:hover {}
.sublink_more:active {}
*/
#nieuws-index .sublink_more, #vacature-index .sublink_more { padding-top:8px; border-top:1px #DFDFDF solid; padding-bottom:20px;}
.spacer { height:12px; border:0px; padding:0; margin:0; }
/* Homepage extra scroll items ------------------------------------------------------------ */
.latest {width:227px; margin:0; padding:0; position:relative; }
.js-active .latest {overflow:hidden !important; height:60px; }
#vacature-index .latest li {margin:0px 5px 15px 15px; height:60px; }