html, body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
margin: 0;
padding: 0;
text-align: left;
background: #d2e4ef url(/media/img/bg_body.png) repeat-x top;
}
html { overflow-y: scroll; }
/* Basis Verdeling */
#container { width: 962px; margin: 0px auto; background-color: #FFF; }
#top { width: 960px; height: 140px; margin: 0 1px; background: url(/media/img/bg_top.png) repeat-x top; position: relative; }
img#logo { position: absolute; left: 10px; top: 10px; }
#main { width: 940px; padding: 11px; border-top: 1px solid #d2e4ef; overflow: hidden; }
#filteroptions { width: 210px; }
#content { width: 620px; float: left; margin-right: 20px; }
#right { width: 300px; float: left; }
#footer { width: 940px; clear: both; padding: 0 11px; height: 40px; line-height: 40px; border-top: 1px solid #d2e4ef; }
#footerLeft { float: left; }
#footerRight { float: right; }
#webdesign { width: 962px; height: 66px; line-height: 66px; margin: 0px auto; }
.clear { clear: both; width: 99%; height: 1px; line-height: 1px; font-size: 1px;}
/* Overzicht Templates */
body#overview #content { width: 700px; float: left; margin: 0; }
body#overview #main { background: url(/media/img/bg_main_overview.png) repeat-y left; }
body#overview #left { width: 220px; float: left; margin-right: 20px; }
/* Account Templates */
body#account #content { float: right; display: inline; width: 940px; margin: 0; padding: 0;}
body#account #minheight { float: left; display: inline; width: 20px; height: 400px;}
body#account div#left50 { float: left; width: 440px; padding: 4px 9px 0 9px; border: 1px solid #d2e4ef; margin: 10px 0;}
body#account div#left20 { float: left; width: 220px;}
body#account div#right50 { float: right; width: 440px; padding: 4px 9px 0 9px; border: 1px solid #d2e4ef; margin: 10px 0;}
body#account div#right80 { float: right; width: 700px;}
body#account div.contleft50 { float: left; width: 310px; padding: 4px 14px; border: 1px solid #d2e4ef; margin: 10px 0;}
body#account div.contright50 { float: right; width: 310px; padding: 4px 14px; border: 1px solid #d2e4ef; margin: 10px 0;}
body#account div.cont100 { padding: 4px 14px; border: 1px solid #CCC; margin-top: 10px;}
/* Typografie Styles, gelden voor de gehele website */
h1, h2, h3, h4 { font-weight: normal; margin: 0; padding: 0; line-height: 120%; font-weight: normal; }
p, address { font-weight: normal; margin: 0; padding: 0; line-height: 165%; font-style: normal; }
img { margin: 0; padding: 0; border: 0; }
ul, ol, li { margin: 0; padding: 0; line-height: 165%; }
table { margin: 0 0 14px 0; padding: 0; border-collapse: collapse; }
table td { vertical-align: top; padding: 0; line-height: 160%; }
h1 { font-size: 20px; color: #086ca6; margin: 0 0 14px 0; padding: 10px 0 0 0; }
h2 { font-size: 16px; color: #086ca6; margin: 0 0 14px 0; padding: 10px 0 0 0; font-weight: bold; }
h3 { font-size: 14px; color: #086ca6; margin: 0 0 10px 0; padding: 10px 0 0 0; font-weight: bold; }
h4 { font-size: 12px; color: #086ca6; margin: 0 0 10px 0; padding: 10px 0 0 0; font-weight: bold; }
span.h1 { font-size: 20px; color: #8d8d8d; margin: 0 0 14px 0; padding: 10px 0 0 0; display: block; line-height: 120%; }
p { margin: 0 0 14px 0;}
a { color: #4a9287; text-decoration: underline; }
a:hover { color: #4a9287; text-decoration: underline; }
a:focus { outline: none;}
a.more { color: #4a9287; text-decoration: none; padding-right: 8px; font-weight: bold; background: url(/media/img/bullet_right_4a9287.gif) no-repeat right 5px; }
a.more:hover { color: #4a9287; text-decoration: underline; }
a.back { color: #4a9287; text-decoration: none; padding-left: 8px; font-weight: bold; background: url(/media/img/bullet_left_4a9287.gif) no-repeat left 5px; }
a.back:hover { color: #4a9287; text-decoration: underline; }
img { margin: 0; padding: 0; border: 0; }
img.left { float: left; margin: 4px 20px 20px 0px; }
img.right { float: right; margin: 4px 0px 20px 20px; }
ul { margin: 10px 0px 12px 14px;}
ul ul { margin: 4px 0px 4px 14px;}
ul li { list-style: none; padding-left: 14px; background: url(/media/img/bullet_li.png) no-repeat 0 7px; }
ul li li { list-style: none; padding-left: 14px; background: url(/media/img/bullet_li.png) no-repeat 0 7px; }
ol { margin: 0px 0px 12px 25px;}
ol ol { margin: 0px 0px 0px 25px;}
hr { border: 0px none; border-top: 1px solid #FFF; border-bottom: 1px solid #c8c8c8; }
/* Crumbs */
#crumbs { position: absolute; left: 10px; bottom: 17px; width: 460px; height: 12px; overflow: hidden; }
#crumbs p { margin: 0; padding: 0; color: #b5b5b5; line-height: 12px; font-size: 11px; }
#crumbs a { color: #c8c8c8; text-decoration: underline; margin-right: 6px; padding-right: 8px; background: url(/media/img/bullet_crumbs_a.gif) no-repeat right 5px; }
#crumbs a:hover { color: #c8c8c8; text-decoration: underline; }
#crumbs span.sep { display: none; }
/* Account in Top */
#topaccount { position: absolute; right: 10px; bottom: 18px; }
#topaccount { color: #333333; line-height: 12px; text-align: right;}
#topaccount a { color: #4a9287; text-decoration: none; font-weight: bold;}
#topaccount a:hover { color: #4a9287; text-decoration: underline;}
#topaccount span { color: #c8c8c8; margin: 0 10px;}
/* Items Block */
div.blockitem { width: 300px; margin-bottom: 30px; }
div.blockitemLeft { width: 60px; float: left; margin-top: 2px; }
div.blockitemRight { width: 220px; float: right; }
div.blockitem h3 { margin: 0 0 2px 0; padding: 0; font-size: 12px; }
div.blockitem h3 a { color: #086ca6; text-decoration: none; }
div.blockitem h3 a:hover{ color: #086ca6; text-decoration: underline; }
div.blockitem p { margin: 0 0 10px 0; padding: 0; }
/* Items Overzicht */
div.item { width: 700px; margin-bottom: 15px; padding-top: 15px; }
div.itemLeft { width: 60px; float: left; margin-top: 2px; }
div.itemRight { width: 620px; float: right; }
div.item h3 { margin: 0 0 2px 0; padding: 0; }
div.item h3 a { color: #086ca6; text-decoration: none; }
div.item h3 a:hover { color: #086ca6; text-decoration: underline; }
div.item p { margin: 0 0 10px 0; padding: 0; }
/* Filters */
div.filters h4 { margin: 0; padding: 0; color: #333; }
div.filters ul,
div.filters li { margin: 0; padding: 0; list-style: none; background: none; }
div.filters ul { margin: 5px 0 18px 0; padding: 0; width: 210px; }
div.filters li a { padding-left: 28px; color: #4a9287; line-height: 23px; display: block; }
div.filters li a { text-decoration: none; background: #FFF url(/media/img/bg_filter.png) no-repeat 0 0; }
div.filters li a:hover { text-decoration: none; background: #FFF url(/media/img/bg_filter_hover.png) no-repeat 0 0; }
div.filters li a.active { margin-bottom: 2px; padding: 0 20px 0 28px; color: #4a9287; display: block; }
div.filters li a.active { text-decoration: none; background: #ebebeb url(/media/img/bg_filter_active.png) no-repeat 0 0; border: 1px solid #DCDCDC; }
div.filters li a.active:hover { text-decoration: none; background: #ebebeb url(/media/img/bg_filter_active_hover.png) no-repeat 0 0; border: 1px solid #DCDCDC; }
div.filters li a.remove { width: 210px; margin: 0; padding: 8px 0px 5px 0px; text-decoration: none; background: none; border: 0px none; display: block; }
div.filters li a.remove { font-size: 11px; color: #4a9287; }
div.filters li a.remove:hover { text-decoration: underline; background: none; border: 0px none; }
div.filters li.more { margin-top: 8px; }
div.filters li.less { margin-top: 8px; }
div.filters li.more a { color: #4a9287; background: url(/media/img/bg_filter_li_more.png) no-repeat 0 0; }
div.filters li.less a { color: #4a9287; background: url(/media/img/bg_filter_li_less.png) no-repeat 0 0; }
div.filters li.more a:hover { color: #4a9287; background: url(/media/img/bg_filter_li_more_hover.png) no-repeat 0 0; }
div.filters li.less a:hover { color: #4a9287; background: url(/media/img/bg_filter_li_less_hover.png) no-repeat 0 0; }
/* Items Detail */
img#coverLarge { margin-top: 50px; }
table#itemInfo { margin-bottom: 30px; }
table#itemInfo td.col01 { width: 120px; }
table#itemInfo td.col02 { width: 10px; }
table#itemInfo td.col03 { width: 490px; }
#lesinhoud { width: 600px; margin: 40px 0 20px 0; padding: 10px; color: #FFF; background-color: #086ca6; }
#lesinhoud h2 { color: #FFF; margin: 0 0 14px 0; padding: 4px 0 0 0; }
#lesinhoud table { margin-bottom: 30px; }
#lesinhoud td { line-height: 24px; }
#lesinhoud td.col01 { width: 430px; }
#lesinhoud td.col02 { width: 80px; }
#lesinhoud td.col03 { width: 90px; }
#lesinhoud span { padding-left: 24px; }
#lesinhoud span.doc,
#lesinhoud span.docx { background: url(/media/img/ico_filetype_doc.png) no-repeat 0 50%; }
#lesinhoud span.ppt,
#lesinhoud span.pptx { background: url(/media/img/ico_filetype_ppt.png) no-repeat 0 50%; }
#lesinhoud span.xls,
#lesinhoud span.xlsx { background: url(/media/img/ico_filetype_xls.png) no-repeat 0 50%; }
#lesinhoud span.pdf { background: url(/media/img/ico_filetype_pdf.png) no-repeat 0 50%; }
#lesinhoud span.htm,
#lesinhoud span.html { background: url(/media/img/ico_filetype_html.png) no-repeat 0 50%; }
#lesinhoud a#download { width: 600px; height: 44px; line-height: 44px; display: block; color: #4a9287; font-size: 14px; font-weight: bold; text-align: center; text-decoration: none; background-color: #FFF; }
#lesinhoud a#download:hover { background-color: #d2e4ef; }
/* Items Detail Cross-Selling */
#crossWrapper { clear: both; width: 972px; margin-top: 10px; margin-left: -11px; padding: 10px 0 0 10px; border-top: 1px solid #d2e4ef; display: block; }
#crossWrapper span.h1 { color: #086ca6; margin: 0 0 20px 0; }
#crossWrapper div.blockitem { margin: 0 20px 20px 0; float: left; }
/* Account Algemeen */
#lastDownloaded div.blockitem,
#mostDownloaded div.blockitem { height: 110px; margin: 0 20px 20px 0; float: left; overflow: hidden; }
#new-account { color: #333; line-height: 170%; margin: 5px 0px; padding: 5px; border: 1px solid #999; background-color: #e3eef5; }
#new-account p { margin: 0; padding: 0; }
#new-account a.close { color: #999; font-weight: bold; float: right; text-decoration: none; }
body#account address { padding: 10px; background-color: #e3eef5; margin: 0 0 12px 0;}
/* Account Datagrids */
table.datagrid { width: 100%; margin: 0; padding: 0; border: 0px none; border-collapse: collapse;}
table.datagrid thead { background-color: #FFFFFF;}
table.datagrid tbody { background-color: #e3eef5; border-top: 6px solid #e3eef5; border-bottom: 6px solid #e3eef5;}
table.datagrid th { padding: 3px 0 3px 5px; margin: 0; }
table.datagrid td { padding: 3px 0 3px 5px; margin: 0; }
table.datagrid tbody tr:hover { }
table.datagrid tbody td { border-right: 1px solid #ccc; }
table.datagrid tbody td.last { border-right: none; }
table.orderdatagrid { width: 100%; margin: 0; padding: 0; border: 0px none; border-collapse: collapse;}
table.orderdatagrid thead { background-color: #FFFFFF;}
table.orderdatagrid tbody { background-color: #e3eef5; border-top: 6px solid #e3eef5; border-bottom: 6px solid #e3eef5;}
table.orderdatagrid th { padding: 3px 5px 3px 5px; margin: 0; }
table.orderdatagrid td { padding: 3px 5px 3px 5px; margin: 0; vertical-align: top; }
table.orderdatagrid tr.row-brand td { vertical-align: top; padding: 3px 5px 0 5px; font-weight: bold;}
table.orderdatagrid tr.row-product td { vertical-align: top; padding: 0px 5px 3px 5px;}
table.orderdatagrid .kaartje { background-color: #FFFFFF; border: 1px solid #ccc; margin: 3px 0px; margin-right: 9px; padding: 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
table.orderdatagrid td.bordertop { border-top: 1px solid #ccc;}
/* Footer */
#footer { color: #999; }
#footer a { color: #999; text-decoration: none; }
#footer a:hover { color: #999; text-decoration: underline; }
#footer span { color: #999; margin: 0 6px; }
#footerLeft { line-height: 40px; }
#footerRight { line-height: 20px; }
#footerRight img { text-align: right; margin: 7px 0 0 2px; }
/* Webdesign */
#webdesign { font-size: 11px; color: #88b8b7; text-align: center; }
#webdesign a { color: #88b8b7; text-decoration: none; }
#webdesign a:hover { color: #88b8b7; text-decoration: underline; }
/* Navigatie styles */
#nav { position: absolute; right: 0; top: 0; width: 600px; height: 92px; overflow: hidden; }
#nav ul,
#nav ul li { margin: 0; padding: 0; list-style: none; background: none; font-size: 14px; }
#nav ul { float: right; }
#nav ul li { float: left; height: 92px; line-height: 82px; margin-right: -1px; }
#nav ul li a { float: left; height: 92px; line-height: 82px; padding: 0 18px; color: #006699; text-decoration: none; display: inline; }
#nav ul li a:hover { color: #FFF; background-color: #086ca6; padding: 0 17px; border-left: 1px solid #FFF; border-right: 1px solid #FFF; }
#nav ul li a.active { color: #FFF; background-color: #086ca6; padding: 0 17px; border-left: 1px solid #FFF; border-right: 1px solid #FFF; }
/* Subnavigatie */
span.h1 a { color: #8d8d8d; text-decoration: none; }
span.h1 a:hover { color: #8d8d8d; text-decoration: underline; }
#subnav { padding-bottom: 22px;}
#subnav ul,
#subnav li { margin: 0; padding: 0; list-style: none; background: none; }
#subnav li a { padding-left: 14px; text-decoration: none;}
#subnav li a:hover { text-decoration: underline; }
#subnav li a { color: #4a9287; background: url(/media/img/bullet_subnav_li_a.gif) no-repeat 3px 4px; }
#subnav li.active a { color: #4a9287; font-weight: bold; }
/* Pager styles */
#WsPager { clear: both; margin: 10px 0 0 0; padding: 10px 0px; line-height: 20px; font-weight: bold; }
#WsPager a { color: #4A9287; text-decoration: none; text-align: center; margin: 0; padding: 1px 6px; height: 18px; display: inline-block; }
#WsPager span { color: #ffffff; text-decoration: none; text-align: center; margin: 0; padding: 1px 6px; height: 18px; height: 18px; display: inline-block; background-color: #4A9287; }
#WsPager a:hover { color: #ffffff; text-decoration: none; background-color: #4A9287; }
#WsPager a.disabled { opacity: 0.5; filter:alpha(opacity=50); }
#WsPager a.first { width: 8px; background: url(/media/img/btn_pager_first.png) no-repeat 0 0; }
#WsPager a.first:hover { background: url(/media/img/btn_pager_first.png) no-repeat 0 -20px; }
#WsPager a.prev { width: 8px; background: url(/media/img/btn_pager_prev.png) no-repeat 0 0; }
#WsPager a.prev:hover { background: url(/media/img/btn_pager_prev.png) no-repeat 0 -20px; }
#WsPager a.next { width: 8px; background: url(/media/img/btn_pager_next.png) no-repeat 0 0; }
#WsPager a.next:hover { background: url(/media/img/btn_pager_next.png) no-repeat 0 -20px; }
#WsPager a.last { width: 8px; background: url(/media/img/btn_pager_last.png) no-repeat 0 0; }
#WsPager a.last:hover { background: url(/media/img/btn_pager_last.png) no-repeat 0 -20px; }
#WsPager a.disabled:hover { background-position: 0 0; cursor: default; }
/* IE 6 Bugfix extra whitespace */
* html ul li a {
height:1em;
}