html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; font-size: 11px; font-family: verdana, arial, helvetica, sans-serif; }
/* main elements */
h1 { font-weight: normal; font-family: arial, helvetica, sans-serif; font-size: 22px; color: #0095aa; height: 75px; margin: 0; padding: 0; line-height: 33px; }
h2 { color: #0095aa; font-family: arial, helvetica, sans-serif; font-size: 13px; margin: 0; padding: 0; }
h3 { color: #0095aa; font-size: 12px; font-family: arial, helvetica, sans-serif; margin: 0; padding: 0; }
h3 a { text-decoration: none; }
h4 { color: #4c2177; font-size: 11px; margin: 0; padding: 3px 0; }
h5 {}
hr { border: 1px solid; border-color: #0095aa #ffffff #ffffff #ffffff; margin: 18px 0; }
a { color: #0095aa; }
a:hover { text-decoration: none; color: #F15D22; }
img { border: 0; }
p { margin: 0; padding: 0;}
/* cross browser fix to clear floats */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: inline-block; clear:both; }
* html .clearfix {height: 1%;}
/* positioning elements */
div.wrapper { margin: 0 auto; width: 900px; position: relative; }
div.bgwrapper { background: url(../images/bg_wrapper.gif); width: 900px; }
div.top { height: 75px; width: 900px; background: #ffffff; padding-top: 0px; display: block; }
img.logo { float: left; }
div.bumper { height: 50px; }
div.contentcontainer { float: left; width: 700px; }
div.content { float: right; width: 375px; background: #ffffff; }
div.menucontainer { float: left; border-top: 75px solid #ffffff; }
div.menu { width: 300px; height: 450px; background-position:left; }
div.side { float: right; width: 150px; height: 450px; border-top: 75px solid #ffffff; background-position:right; }
/* quicklinks for textbrowsers */
a.quicklink { position: absolute; left: -100em; }
/* servicemenu */
div.servicemenu { background:url(../images/bg_servicemenu.gif) repeat-y; margin: 0; padding: 0; text-align: right; width: 900px; display: block; }
div.servicemenu ul { float: right; padding: 0; margin: 3px 6px 5px 0; }
div.servicemenu ul li { list-style: none; float: left; line-height: 11px; border-left: 1px solid #ffffff; }
div.servicemenu ul li.first { border-left: none; }
div.servicemenu ul li a { color: #ffffff; padding: 0 7px; text-decoration: none; line-height: 14px; font-family: arial, helvetica, sans-serif; }
div.servicemenu ul li a:hover { color: #000000; }
/* sre md menu */
ul.mdmenu { float: right; padding: 0; margin: 8px 6px 0 0; }
ul.mdmenu li { list-style: none; float: left; line-height: 11px; border-left: 1px solid #0095aa; }
ul.mdmenu li.first { border-left: none; }
ul.mdmenu li a { color: #0095aa; padding: 0 7px; text-decoration: none; font-family: arial, helvetica, sans-serif; font-weight: bold; }
ul.mdmenu li a:hover { color: #F15D22; }
/* menu level 1*/
ul.menu { margin: 0 0 0 150px; height: 150px; padding: 0; background: #ffffff; }
ul.menu li { background: #ffffff; list-style: none; padding: 0; margin: 0; }
ul.menu li a { display: block; padding: 0 10px; color: #0095aa; text-decoration: none; font-family: arial, helvetica, sans-serif; font-size: 13px; width: 130px; }
ul.menu li a:hover { color: #000000; }
ul.menu li.active a { font-weight: bold; }
/* menu level 2*/
ul.menu li.active ul { padding: 0 0 3px 0; margin: 0; }
ul.menu li.active ul li a { font-weight: normal; padding: 0 10px 0 25px; width: 115px; color: #000000; }
ul.menu li.active ul li a:hover { color: #0095aa; }
ul.menu li.active ul li.active a { font-weight: bold; }
/* submenu */
ul.submenu { margin: 0 0 0 150px; height: 130px; padding: 10px 0; background: #0095aa; }
ul.submenu li { list-style: none; padding: 0; margin: 0; }
ul.submenu li a { display: block; padding: 1px 10px; color: #ffffff; text-decoration: none; font-weight: bold; font-family: arial, helvetica, sans-serif; font-size: 13px; width: 130px; }
ul.submenu li a:hover { color: #99dfe9; }
/* footmenu */
ul.footmenu { margin: 0; padding: 0; }
ul.footmenu li { list-style: none; float: left; line-height: 11px; }
ul.footmenu li a { display: block; margin: 5px 0; padding: 0 5px; color: #0095aa; border-left: 1px solid #0095aa; text-decoration: none; font-family: arial, helvetica, sans-serif; }
ul.footmenu li.first a { border: none; }
/* transparent overlays */
div.transwhite {
background: #ffffff; width: 150px; height: 150px;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=50);
-moz-opacity: .5;
opacity: .5;
}
div.transgreen {
position: absolute; background: #0095aa; width: 150px; height: 150px; left: 0;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=50);
-moz-opacity: .5;
opacity: .5;
}
/* splitter */
div.split { color: #0095aa; }
div.splitleft { float: left; width: 45%; }
div.splitright { float: right; width: 45%; }
/* styles content / wysiwyg */
div.content div.subheader { color: #0095aa; font-size: 12px; font-family: arial, helvetica, sans-serif; margin: 0; padding: 18px 0; font-weight: bold; }
div.content .error { font-weight: bold; color: #F15D22; }
/* list 3 levels deep */
div.content { line-height: 130% }
div.content ul { margin: 0; padding: 8px 0 8px 22px; }
div.content ul li { list-style-image:url(../images/li_bullit.gif); margin: 0; padding: 2px 0; }
div.content ul li ul { padding: 0 0 0 22px; }
div.content ul li ul li { list-style-image:url(../images/li_li_bullit.gif); }
div.content ul li ul li ul li { list-style: none; }
/* tabel of contents */
div.content ul.toc { padding: 8px 0; }
div.content ul.toc li { list-style: none; }
div.content ul.toc li a { color: #4c2177; font-weight: bold; }
div.content a.totop { display: block; text-align: right; font-weight: bold; border-top: 1px solid #4c2177; text-decoration: none; color: #4c2177; margin: 12px 0; }
/* clean table */
div.content table td { vertical-align: top; }
/* images */
div.content img.imageright { float: right; margin: 8px; }
div.content img.imageleft { float: left; margin: 8px;}
/* form */
div.content form { margin: 0; padding: 0;}
div.content form label { }
div.content form input.text { border: 1px solid #0198ab; }
div.content form input.radio { border: none; }
div.content form input.checkbox { border: none; }
div.content form select { border: 1px solid #0198ab; }
div.content form textarea { border: 1px solid #0198ab; }
div.content form input.button { height: 20px; border: none; background: #ffffff url(../images/bg_button.gif) no-repeat top left; font-weight: bold; font-size: 11px; padding: 0 10px 0 15px; }
div.content a.button { border: none; background: #ffffff url(../images/bg_button.gif) no-repeat top left; font-weight: bold; padding: 3px 10px 5px 15px; color: #000000; text-decoration: none; }
/* downloadlinks */
div.content a.download { font-weight: bold; color: #4c2177; display: block; padding: 2px 0 8px 30px; background: url(../images/download.gif) no-repeat top left; margin: 3px 0; }
div.content a.downloadpdf { font-weight: bold; color: #4c2177; display: block; padding: 2px 0 8px 30px; background: url(../images/download_pdf.gif) no-repeat top left; margin: 3px 0; }
/* table */
div.content table.dressed caption { padding: 2px; font-weight: bold; text-align: left; color: #4c2177; }
div.content table.dressed td, table th { vertical-align: top; }
div.content table.dressed th { text-align: left; color: #ffffff; background-color: #0095aa; padding: 4px 2px; }
div.content table.dressed td { border-bottom: 1px solid #0095aa; padding: 2px; }
/* sitemap */
div.content ul.sitemap { margin: 0; padding: 0; }
div.content ul.sitemap a { text-decoration: none; }
div.content ul.sitemap a:hover { color: #000000; }
div.content ul.sitemap li { list-style: none; background: #0095AA; border-bottom: 2px solid #ffffff; font-weight: bold; margin: 0; padding: 0; list-style-image: none; }
div.content ul.sitemap li a { color: #ffffff; display:block; padding: 2px 6px; }
div.content ul.sitemap li ul { margin: 0; padding: 0; border-bottom: 10px solid #ffffff; }
div.content ul.sitemap li ul li { background: #E4F7F9; border-bottom: 1px solid #ffffff; list-style-image: none; }
div.content ul.sitemap li ul li a { color: #0095AA; padding: 1px 18px; }
div.content ul.sitemap li ul li ul { border: none; }
div.content ul.sitemap li ul li ul li { border: none; padding: 1px 24px; list-style-image: none; }
div.content ul.sitemap li ul li ul li a { font-weight: normal; }
div.content ul.sitemap li ul li ul li ul li { border: none; padding: 1px 24px; list-style-image: none; }
/* poll */
div.content div.pollresult { margin: 8px 0; font-weight: bold; color: #0095AA; }
div.content div.pollresult span { padding: 1px 5px 1px 2px; background: #87CFD7 url(../images/bg_poll_results.gif) no-repeat right; display: block; float: left; margin-right: 7px; color: #ffffff; min-width: 25px; }
/* contactlist */
div.portrait { float: left; width: 70px; }
div.contactdetails { float: right; width: 300px; }
span.telemob { float: left; display: block; width: 25px; color: #0095AA;}
/* homepage */
/* positioning elements - homepage */
div.transposhp { position: absolute; margin-left: 150px; margin-top: 150px;}
div.menucontainerhp { float: left; }
div.sidehp { float: right; width: 150px; height: 450px; background: #71cad6; }
div.sidetophp { width: 150px; height: 150px; background: #b6e7ec; }
div.sidecolorhp { width: 150px; height: 150px; }
div.contentcontainerhp { float: left; width: 750px; margin-right: -20px; }
div.contenthp { float: left; width: 450px; height: 450px; margin-right: -20px; }
/* introduction text top left - homepage */
div.hpintro { height: 70px; padding: 5px 0 0 0; width: 900px; }
div.introtext { float: left; width: 300px; color: #0095aa; position: relative; background-color: #ffffff; z-index: 10; }
div.introtext a { font-weight: bold; color: #0095aa; text-decoration: none; }
div.introtext a:hover { color: #F15D22; }
/* jumpbox to other sre md sites - homepage */
form.hpsitelink { float: right; margin: 0; padding: 33px 0 0 0; }
form.hpsitelink select { width: 150px; border: 1px solid #0095aa; font-size: 10px; color: #0095aa; text-align: center; }
form.hpsitelink select option { text-align: center; }
/* vakgebieden - positioning and menu */
div.containervakhp { min-height: 150px; background: #c0ebf0; width: 450px; margin-right: -20px; }
div.menuvakhp { height: 150px; width: 150px; float: left; background: #87cfd7; }
div.menuvakhp h2 { color: #ffffff; font-size: 110%; padding: 5px 8px; }
div.menuvakhp ul { margin: 8px 0 0 0; padding: 0; }
div.menuvakhp ul li { list-style: none; position: relative; width: 158px; margin-right: -20px; float: left; padding: 0; }
div.menuvakhp ul li a { display: block; padding-right: 13px; text-align: right; text-decoration: none; margin: 3px 0; }
div.menuvakhp ul li a:hover { color: #000000; }
div.menuvakhp ul li.active a { font-weight: bold; background: url(../images/bg_menuhp_vak.gif) no-repeat top right; }
div.textvakhp { width: 260px; float: left; padding: 30px 0 0 20px; line-height: 14px; color: #0198ab; }
/* klanten - positioning and menu */
div.hpblock { width: 450px; height: 300px; background: #8ad7de; margin-right: -20px; }
div.containerklanthp { float: left; width: 150px; height: 150px; border-top: 150px solid #67c8d1; background: #0198ab; }
div.containerklanthp h2 { color: #ffffff; font-size: 12px; padding: 5px; }
div.containerklanthp ul { margin: 0; padding: 8px 0 0 0; }
div.containerklanthp ul li { list-style: none; position: relative; width: 150px; }
div.containerklanthp ul li a { display: block; padding-right: 8px; text-align: right; text-decoration: none; margin: 1px 0; color: #99dfe9; background: #0198AB; }
div.containerklanthp ul li a:hover { color: #000000; }
/* cases */
div.containercasehp { float: left; width: 300px; }
div.containercasehp h2 { padding: 18px; }
div.containercasehp div.imageholder { float: right; width: 150px; height: 150px; }
div.containercasehp div.casetexthp { padding: 18px 18px 0px 18px; color: #0198ab; background: #8AD7DE; }
div.containercasehp div.casetexthp p { margin: 0; padding: 2px 0; }
div.containercasehp div.casetexthp strong{ font-size: 10px;}
div.containercasehp div.casetexthp a.caselinkhp { font-weight: bold; font-size: 10px; text-decoration: none; }