/* ------------------------------------------------------------------------------------------------------ Design builds on interapy base style. ------------------------------------------------------------------------------------------------------- */ @import url("base.css"); /* ------------------------------------------------------------------------------------------------------ force scrollbars, even on pages that fit the window, to prevent the fixed-width centered design from jumping left by half a scrollbar-width when moving between pages (see http://stackoverflow.com/questions/26879/browser-scrollbar) ------------------------------------------------------------------------------------------------------- */ html { height: 101% } /* ------------------------------------------------------------------------------------------------------ Background of design is blue (#BEE3F3;), with a white cloudy gradient image at the top. note: in interapy base.css, body margin and borders are defined. Those are deleted here. ------------------------------------------------------------------------------------------------------- */ body { margin: 0; padding: 0; border: none; background: #BEE3F3 url(img/frame/bg4.jpg) 50% 0 no-repeat; } /* ------------------------------------------------------------------------------------------------------ Design is fixed-width (952px) and centered. Skeleton [ topBar ] [ logo ] [ payoff ] [ main ] [ rightCol ] [ menu ] [ topic-path ] [ ] [ preamble (intro) ] [ content ] [ ] [ footer ] ------------------------------------------------------------------------------------------------------- */ #skeleton { width: 952px; margin: 0 auto } #topBar { height: 40px; margin-top: 30px } #logo { float: left } #payOff { float: left; padding: 7px 0 0 15px } #main { clear: both; width: 648px; padding: 12px; float: left; background: #fff; margin-bottom: 20px; } #nav { float: left; margin-right: 15px } #intro { float: left; width: 490px; } #content { clear: both; width: 642px; background: #fff; padding: 0; padding-top: 10px; line-height: 18px; border-top: 1px solid #c0e8f7; } #footer { float: left; width: 100%; clear: both; border-top: 1px solid #c0e8f7; border-bottom: 1px solid #c0e8f7; font-size: 9px; margin: 6px 0 0 0; padding: 5px 0; line-height: 10px; } #rightCol { float: left; width: 265px; margin-left: 15px; line-height: 1.5em; } #rightCol .block { clear: both; background: #fff; margin-bottom: 10px; padding: 10px;} /* ------------------------------------------------------------------------------------------------------ Left menu is a simple, four-item menu without sub-menu's menu background is dark blue menu-items are white text, items are separated by light-blue borders selected menu-items are blue text on a white background when hovered, menu-item background changes to light-blue ------------------------------------------------------------------------------------------------------- */ #nav ul { position : relative; z-index:100; width: 135px; height: 168px; padding: 3px; margin: 0; background: url(img/menu/bg-nav.gif) 0 0 no-repeat; list-style: none; line-height: 15px } #nav ul li { position: relative; float: left; width: 128px; padding: 0; padding-right: 8px; background: none; list-style: none } #nav ul li a { display: block; padding: 6px 0 7px 6px; border-bottom: 1px solid #65c7eb; font-family: Arial, Verdana, sans-serif; color: #fff } #nav ul li.last a { border-bottom: none; } #nav ul li a:hover { background: url(img/menu/bg-nav-over.gif) 0 50% no-repeat; text-decoration: none; color: #00a1de } #nav ul li.ext a:hover { background: url(img/menu/bg-nav-ext-over.gif) 0 50% no-repeat; text-decoration: none; color: #00a1de } #nav ul li.sel a, #nav ul li.sel a:hover { background: url(img/menu/bg-nav-sel.gif) 0 50% no-repeat; text-decoration: none; color: #00a1de } #nav ul li.ext.sel a, #nav ul li.ext.sel a:hover { background: url(img/menu/bg-nav-ext-sel.gif) 0 50% no-repeat; text-decoration: none; color: #00a1de; } /* ------------------------------------------------------------------------------------------------------ Navpath current leaf is blue (#00a1de) text, rest of tree is light grey (#4b4b4b) ------------------------------------------------------------------------------------------------------- */ #navPath ul { display: block; height: 20px; padding: 0; margin: 0px 0 0 0; list-style: none; line-height: 1.2em } #navPath ul li { float: left; margin-right: 5px; padding: 0; background: none; color: #00a1de } #navPath ul li a, #navPath ul li.sep { color: #4b4b4b; font-family: Arial, Verdana, sans-serif } /* ------------------------------------------------------------------------------------------------------ Intro style duplicates H1 style from base.css ------------------------------------------------------------------------------------------------------- */ #intro p { margin: 0; padding: 0; color: #00a1de; font-family: Arial, Verdana, sans-serif; font-size: 20px; font-weight: normal; line-height: 28px; } /* the design does not accomodate h1; it is used for search engines only */ h1 { display: none; } /* uncomment following lines to hide intro while loading cufon font */ .cufon-loading #intro p { visibility: hidden !important; } /* ------------------------------------------------------------------------------------------------------ Content Core html elements are styled in base.css; Headings and other content are redefined here to allow experimentation with font (color, font-family, size, etc). ------------------------------------------------------------------------------------------------------- */ #content * { font-family: Arial, Helvetica, sans-serif; } #content h2, #content h3, #content h4, #content h5, #content h6 #content th, #content tfoot #content td, #content caption { font-family: Arial, Helvetica, sans-serif;} .clear { clear: both; display: block } .left { float: left } .right { float: right } ul.lower-alpha { list-style-type: lower-alpha; } ul.lower-alpha li { list-style-type: lower-alpha; list-style-position:inside; padding-left: 0; margin-left: 30px; background: none; } /* ------------------------------------------------------------------------------------------------------ Content templates ------------------------------------------------------------------------------------------------------- */ /* search results */ .searchResults form { display: inline; } .searchResults form .border { border: 1px solid #dedede; display: inline-block; } .searchResults form input { border: 0; font-size: 0.95em; width: 215px; padding-left: 5px; margin: 0; } .searchResults form .btnSearch { border: none; cursor: pointer; height: 15px; } .searchResults form .btnSearch:hover { } .searchResults form .btnSearch { border: none; cursor: pointer; height: 15px; background: transparent url(img/forms/btn-search.gif) no-repeat left top; width: 11px !important; } #div-advanced-search { border: 1px solid #E5F5FC; margin-top: 3px; font-size: xx-small; } #div-advanced-search span.label { padding-left: 5px; padding-right: 5px; vertical-align: text-bottom; } #links-advanced-search { padding-left: 3px; font-size: xx-small; display: inline-block; } .searchResults table.navigation { margin-left: 0; margin-top: 2px; border-spacing: 0; width: 100%; border-collapse: collapse; border: none; } .searchResults table.navigation tr { background-color: #E5F5FC; } .searchResults table.navigation span.pages { float: right; margin-right: 5px; } .searchResults table.navigation span.results { float: left; margin-left: 5px; } .searchResults dl { margin: 0; } .searchResults dl strong { color: black; } .searchResults dl dt { background: none; border-bottom: 1px solid #c0e8f7 } .searchResults dl span.rank { font-weight: bold } .searchResults dl span.highlight { background-color: #FFFF99; } .searchResults dl dd { margin: 0px; } .searchResults dl table { border: none; margin: 5px 0 0 0; border-collapse: collapse; width: 10px; line-height: 12px; } .searchResults dl table td { margin: 0; } .searchResults dl table td span.key { white-space: nowrap; font-size: xx-small; } .searchResults dl table td span.val { white-space: nowrap; font-size: xx-small; font-style: italic; } .searchResults dl dt.last { border: none} /* subnav */ .subNav ul { display: block; margin: 0; height: 30px; padding: 0; list-style: none; } .subNav ul li { background: none; padding: 0; color: #fff; margin: 0 3px 0 0; float: left;} .subNav ul li a, .subNav ul li a:visited { padding: 0 10px; line-height: 19px; color: #fff; display: block; width: 138px; background: url(img/subnav/bg-btn-subnav.gif) 0 0 no-repeat; } .subNav ul li a:hover { background-position: 0 -20px; display: block; color: #00a1de; text-decoration: none} .subNav ul li a.selected, /* needed for jquery-tabs */ .subNav ul li.sel a { background-position: 0 -41px; color: #00a1de} .subNav ul li.last { margin: 0} /* simple line separator */ .line { clear: both; width: 100%; height: 1px; margin-bottom: 12px; border-top: 1px solid #c0e8f7; } /* general style to make elements hidden */ .hidden { display: none !important; } /* general style for clickable elements other than normal links */ .clickable { cursor: pointer; } .loading { background: url(img/misc/large-loading.gif) no-repeat transparent top center; padding: 36px 0 0 0; font-style: italic; text-align: center; white-space: normal !important; width: 300px; } /* wrappable image (left) */ img.left { margin: 0 10px 2px 0; } /* img */ .img { text-align: center } /* quote */ .quote { background: url(img/quote/bg-quote-bottom.gif) bottom no-repeat; display: inline-block; width: 642px; margin-bottom: 12px; } .quote .top { background: url(img/quote/bg-quote-top.gif) 0 0 no-repeat; height: 10px; } .quote .img { margin-left: 12px; margin-top: 2px; width: 120px; display: inline-block; float: left; } .quote .video { margin-left: 12px; margin-top: 2px; width: 300px; display: inline-block; float: left; } .quote .txt { padding: 0 12px 0 8px; float: right; width: 486px; display: inline-block; } /* 8px instead of 12, because of IE6; see ticket #102 */ .quote .txt .quoted { font-style: italic; } .quote h2 { margin-bottom: 5px; } .quote .txt .name { font-style: normal; } .quote p.clear { margin: 0; height: 5px; } .quote.wide { margin-bottom: 10px;} .quote.wide .txt { width: 618px; font-style: normal; float: left; } .quote.image .txt { width: 486px; } .quote.video .txt { width: 306px; } .quote.clickable:hover { background-image: url(img/quote/bg-quote-bottom-hover.gif) } .quote.clickable:hover .top { background-image: url(img/quote/bg-quote-top-hover.gif); } .quote.clickable:hover a.onclick-handler { text-decoration: underline; } /* collapse block */ ul.collapse { margin: 0; padding: 0; margin-bottom: .5em;} ul.collapse li { background: none; padding: 0; margin: 0; padding-left: 0;} ul.collapse li .txt { color: #00a1de; } ul.collapse li .txt a { text-decoration: underline; } ul.collapse li .txt ul { list-style-type: none} ul.collapse li .txt ul li { background: url("img/base/li-dot.gif") 0 .35em no-repeat; padding-left: 1em } ul.collapse li .question { } ul.collapse li .question em { font-style: italic; font-weight: normal; } ul.collapse li .answer { display:none; } ul.collapse li .question:hover, ul.collapse li .answer:hover { cursor: pointer; } ul.collapse li .question:hover a { text-decoration: underline; } ul.collapse li .answer a:hover { background-image: url(img/quote/bg-quote-bottom.gif); } /* blocks3 (JR: we should turn this into a component in the xsl) */ /* actions */ .actions ul { display: block; margin: 0; height: 30px; padding: 0; list-style: none; } .actions ul li { background: none; padding: 0; color: #fff; margin: 0 3px 0 0; float: left;} .actions ul li a, .actions ul li a:visited { padding: 0 10px; line-height: 19px; background: url(img/nav/bg-btn-subnav.gif) 0 0 no-repeat; color: #fff; display: block; width: 138px; font-weight: normal; } .actions ul li a:hover { background-position: 0 -20px; display: block; color: #00a1de; text-decoration: none} .actions ul li.sel a { background-position: 0 -41px; color: #00a1de} .actions ul li.last { margin: 0} .actions ul { margin-top: 10px; height: 43px} .actions ul li a, .actions ul li a:visited { display: block; height: 42px; background: url(img/home/bg-btn-home.gif) 0 0 no-repeat; width: 187px; padding-top: 3px; margin-right: 5px;} .actions ul li a:hover { background-position: 0 -45px; } /* blockcontainer */ .blockContainer { clear: both; display: block; line-height: 14px; height: 148px; } .blockContainer .block { float: left; background: #f2fafd url(img/home/bg-block-home.gif) bottom no-repeat; height: 116px; width: 187px; padding: 10px; margin-right: 7px; } .blockContainer .block, .blockContainer .block a, .blockContainer .block a:visited { color: #00a1de; font-weight: normal;} .blockContainer .block a { text-decoration: underline } .blockContainer .block ul { padding: 0; margin: 0; padding: 0px;} .blockContainer .block li { background: none; padding-left: 10px;} .blockContainer .block.right { margin-right: 0 } /* blocks4 (JR: we should turn this into a component in the xsl) */ /* actions4 */ .actions4 ul { display: block; margin: 0; height: 30px; padding: 0; list-style: none; } .actions4 ul li { background: none; padding: 0; color: #fff; margin: 0 3px 0 0; float: left;} .actions4 ul li a, .actions4 ul li a:visited { padding: 0 10px; line-height: 19px; background: url(img/nav/bg-btn-subnav.gif) 0 0 no-repeat; color: #fff; display: block; width: 100px;} .actions4 ul li a:hover { background-position: 0 -20px; display: block; color: #00a1de; text-decoration: none} .actions4 ul li.sel a { background-position: 0 -41px; color: #00a1de} .actions4 ul li.last { margin: 0} .actions4 ul { margin-top: 10px; height: 43px} .actions4 ul li a, .actions4 ul li a:visited { display: block; height: 42px; background: url(img/blocks/bg-btn-4.gif) 0 0 no-repeat; width: 133px; padding-top: 3px; margin-right: 5px;} .actions4 ul li a:hover { background-position: 0 -45px; } /* blockcontainer4 */ .blockContainer4 { clear: both; display: block; line-height: 14px; height: 110px; } .blockContainer4 .block { float: left; background: #f2fafd url(img/home/bg-block-home.gif) bottom no-repeat; height: 80px; width: 133px; padding: 10px; margin-right: 8px; } .blockContainer4 .block, .blockContainer4 .block a, .blockContainer4 .block a:visited { color: #00a1de; } .blockContainer4 .block a { text-decoration: underline } .blockContainer4 .block ul { padding: 0; margin: 0; padding: 0px;} .blockContainer4 .block li { background: none; padding-left: 10px;} .blockContainer4 .block.right { margin-right: 0 } /* forms */ form ul { padding: 0; margin: 0; list-style: none; display: block } form ul li { clear: both; background: none; padding: 10px 5px 10px 0; } form fieldset { position:relative; border-bottom: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; padding: 10px 0; margin: 0 } form fieldset.no-border-bottom { border-bottom: none; } form fieldset li.legend { padding: 0; margin-bottom: 8px; letter-spacing: 2px; color: #00a1de; } form label { padding: 0; margin: 0; float: left; display: inline-block;} form fieldset .fieldItemValue { float: left; width: 25px; } form fieldset.wide .fieldItemValue { width: auto; float: none} form fieldset.wide label { float: left; width: 130px } form fieldset.wide ul li { padding: 4px 0 } form fieldset.wide.ext label { width: 200px } form fieldset .fieldItemValue label { float: none; display: inline; width: auto !important; } /* for labels associated with radio-buttons */ form fieldset.border ul li ul li { border: none; padding: 0; background: url(img/base/li-line.gif) no-repeat; padding-left: 35px; } form input, form select, form textarea, form .readonly { font-size: 1em; padding-left: 5px; color: #4b4b4b; margin-right: 5px; } form .readonly { padding-left: 0; } form .small { width: 50px; } form .medium { width: 180px; } form .large { width: 244px; } /* small + medium = large (incl. margins) */ form .extralarge { width: 410px; } form textarea { height: 50px; } form textarea.large { height: 120px; } form textarea.extralarge { height: 175px; } form em { font-style: italic; font-weight: normal; } form img.info { margin-left: 5px; margin-top: 1px; vertical-align: top; cursor: pointer } form .errora { margin-left: 5px; vertical-align: middle } form .btnNextQ { background: transparent url(img/forms/btn-nextq.gif) no-repeat left top; height: 18px; width: 96px; border: 0 } form .btnClear { background: transparent url(img/forms/btn-reset.gif) no-repeat left top; width: 58px; height: 18px; border: 0 } form .btnSend { background: transparent url(img/forms/btn-send.gif) no-repeat left top; width: 60px; height: 18px; border: 0 } form label.error { background: url('img/forms/btn-foutmelding.gif') no-repeat 0px 2px; padding: 0 0 0 20px; color: #ff0000; margin-left: 5px; width: auto !important; } /* tooltip */ #tooltip { position: absolute; z-index: 3000; border: 1px solid #111; background-color: #eee; padding: 5px; } #tooltip h3, #tooltip div { margin: 0; } /* remember to define focus styles! */ :focus { outline: 0; } #tooltip.pretty { font-family: Arial; padding: 0; border: none; width: 210px; padding: 15px 20px 20px 20px; background: url('img/tooltip/shadow.png') no-repeat; } #tooltip.pretty h3 { margin: 0; padding: 0; font-size: 1em; width: 175px; color: #fff; } #tooltip.pretty div { width: 175px; text-align: left; color: #fff; line-height: 1.2em; } /* ------------------------------------------------------------------------------------------------------ Footer ------------------------------------------------------------------------------------------------------- */ #footer .contact-info { display: inline-block; float: left; } #footer .shortcuts { display: inline-block; float: right; } /* ------------------------------------------------------------------------------------------------------ Right column blocks ------------------------------------------------------------------------------------------------------- */ #rightCol .block form, #rightCol .block ul { margin: 0; padding: 0; } #rightCol .block.clickable:hover a.onclick-handler { text-decoration: underline; } #rightCol .faq ul { display: block; margin: 0 0 10px 5px; padding: 0; list-style: none } #rightCol .faq ul li { background: url(img/base/li-dot.gif) 1px 3px no-repeat; padding: 0 0 0 10px; line-height: 1.35em;} /* search bar */ /* search bar */ .search form { display: inline; } .search form .border { border: 1px solid #dedede; } .search form input { border: 0; font-size: 0.95em; width: 215px; padding-left: 5px; margin: 0; } .search form .btnSearch { border: none; cursor: pointer; height: 15px; } .search form .btnSearch:hover { } .search form .btnSearch { background: transparent url(img/forms/btn-search.gif) no-repeat left top; width: 11px !important; padding: 0 !important;} .address { line-height: 1.35em; } .address dl { display: block; margin: 0 0 10px 5px; padding: 0; list-style: none } .address dl dd { background: url(img/base/li-dot.gif) no-repeat 1px 3px; padding: 0 0 0 10px; line-height: 1.35em; margin: 6px 0 0 0;} .address dl dt { padding: 0 0 0 10px; color: #4B4B4B; } /* quick links */ .quickLinks ul { margin: 0; padding: 0; list-style: none; line-height: 1.6em; } .quickLinks ul li { background: none; color: #fff; margin: 4px 0; padding: 0 } .quickLinks ul li a, .quickLinks ul li a:visited { display: block; padding: 0 10px; line-height: 1.6em; background: url(img/quicklinks/bg-btn.gif) 0 0 no-repeat; color: #fff; } .quickLinks ul li a:hover { } /* downloads */ .downloads ul { padding: 0; margin: 0 0 10px 0; display: block;} .downloads ul li { clear: both; background: none; padding: 0} .downloads ul li a { width: 62%; display: inline-block} .downloads ul li span { text-align: right; width: 35%; display: inline-block } /* ------------------------------------------------------------------------------------------------------ Special pages ------------------------------------------------------------------------------------------------------- */ #home .nav.bottom { background: #0d0d0d none } #home .navPath ul { display: none } #home .subNav ul { margin-top: 10px; height: 43px} #home .subNav ul li a, #home .subNav ul li a:visited { display: block; height: 42px; background: url(img/home/bg-btn-home.gif) 0 0 no-repeat; width: 187px; padding-top: 3px; margin-right: 7px;} #home .subNav ul li a:hover { background-position: 0 -45px; } #home .blockContainer { clear: both; } #home .blockContainer .block { float: left; background: #f2fafd url(img/home/bg-block-home.gif) bottom no-repeat; height: 116px; width: 187px; padding: 10px; margin-right: 10px; } #home .blockContainer .block, #home .blockContainer .block a, #home .blockContainer .block a:visited { color: #00a1de } #home .blockContainer .block a {text-decoration: underline } #home .blockContainer .block ul { padding: 0; margin: 0} #home .blockContainer .block li { background: none;} #home .blockContainer .block.right { margin-right: 0 } .quickscan-label {display: inline-block; float: left; width: 120px; padding: 0px 0; margin: 0 15px 0 0; color: #2eb2e4; font-size: 18px; } .quickscan-info { color: #00a1de; font-size: 18px; width: 460px; float: left; }