/* Default browsersettings reset --------------------------------------------------------------*/ html, body {margin:0; padding:0; min-height: 101%;} html {background:url("../images/bg.gif") 0 0 repeat-x #012E50;} body {color:#000; font:70% Arial, Verdana, Helvetica, sans-serif, Verdana, Helvetica, sans-serif; line-height:1.6em; padding-bottom:20px;} input, select, textarea {font:1em Arial, Verdana, Helvetica, sans-serif, Verdana, Helvetica, sans-serif;} form {margin:0; padding:0;} h1, h2, h3, h4, h5, h6 {margin:0; padding:0;} img {border:0;} p {margin:0; padding:0;} ol, ul, li {margin:0; padding:0; text-indent:0;} /* Float fix --------------------------------------------------------------*/ .clear {clear:both; font-size:0em; height:0; line-height:0; margin:0; padding:0;} /* None display styles --------------------------------------------------------------*/ .print {display:none;} .printheader, .printfooter {display:none;} /* Sreenreader only elements --------------------------------------------------------------*/ .hidden {left:-900em; position:absolute;} /* Quick float addon --------------------------------------------------------------*/ .left {float:left;} .right {float:right;} span.subscript {font-size:1.1em;} /* List styles --------------------------------------------------------------*/ #conhome ul {margin:0 0 15px 30px; } #conhome ol {margin:0 0 15px 30px; } #conhome ul ul {margin-bottom:0px} #conhome ul ol {margin-bottom:0px} #conhome ol ol {margin-bottom:0px} #conhome ol ul {margin-bottom:0px} #conmiddle ul {margin:0 0 15px 30px; } #conmiddle ol {margin:0 0 15px 30px; } #conmiddle ul ul {margin-bottom:0px} #conmiddle ul ol {margin-bottom:0px} #conmiddle ol ol {margin-bottom:0px} #conmiddle ol ul {margin-bottom:0px} #conmiddle .dot-less {list-style:none; margin-left:20px;} /* Headers ----------------------------------------------------*/ h1 {font:bold 1.8em Arial, Verdana, Helvetica, sans-serif; margin-bottom:15px; color:#002A4A;} h2 {font:bold 1.4em Arial, Verdana, Helvetica, sans-serif; margin-bottom:10px;} h3 {font:bold 1.3em Arial, Verdana, Helvetica, sans-serif; margin-bottom:8px;} h4 {color:#002A4A; font:1.3em Arial, Verdana, Helvetica, sans-serif; margin-bottom:5px;} h5 {font:bold 1.1em Arial, Verdana, Helvetica, sans-serif; margin-bottom:5px;} /* Paragraph ----------------------------------------------------*/ p {font-size:1.1em;} /* Use the span inside a link to change underline color ---------------------------------------------------------*/ a {color:#2578B9;} a:hover {color:#022E51;} /* Navigation --------------------------------------------------------------------------*/ #innerMainNav {float:left; width:100%; z-index: 999999999; background:#054575;} #innerMainNav ul {margin-left:10px;} #innerMainNav li {float:left; list-style:none;} #innerMainNav li a {display:block; font:bold 1.2em Arial, Verdana, Helvetica, sans-serif; color:#C7E10E; text-decoration:none; padding:10px 15px;} #innerMainNav li a:hover {text-decoration:underline;} #innerMainNav li a.selected {color:#fff;} #top {font-size:13px; text-align:right; color:#fff; padding:6px 6px 6px 16px;} div#afmCreditWarning {background:#fff; width:960px; height:35px; border:1px solid #000;text-align:center;padding:5px 0;margin:0px auto;} /* Wrapper ---------------------------------------------- */ div#wrapper {background:url("../images/header-bg01.jpg") 0 0 no-repeat; width:960px; margin:0 auto; position:relative;} /* Header ---------------------------------------------- */ div#header {height:160px;} div#header a {display:block; width:180px; position:absolute; top:0px; left:30px; height:160px; text-indent:-900px;} /* Main navigation ---------------------------------------------- */ div#mainNav {float:left; position:relative; width:100%; z-index:30;} /* Type of content (Format) ---------------------------------------------- */ .format {float:left; background:url("../images/main-bg.gif") 0 100% no-repeat #fff; width:930px; padding:30px 0 30px 30px;} /* Main ---------------------------------------------- */ #main {float:left;} /* HOME */ /* Home col ---------------------------------------------------*/ #homepage div#conhome {width:630px; float:left; margin-right:30px;} #homepage div#conhome p {margin-bottom:15px;} #homepage div#conhome h3 {font:bold 1.4em Arial, Verdana, Helvetica, sans-serif; margin-bottom:8px; border-bottom:1px solid #89B9DD; background:#F1F8FE;} #homepage div#conhome .intro {font-family: Arial, Verdana, Helvetica, sans-serif; font-size:1.2em; color:#002A4A; margin-bottom:15px;} #homepage div#conhome .twocol {margin-bottom:25px;} #homepage div#conhome .twocol p {color:#666;} #homepage div#conhome .twocol .col {width:300px; float:left;} #homepage div#conhome .twocol .col h2 {padding:42px 0 14px 10px;} #homepage div#conhome .twocol .col h2 a {text-decoration:none; color:#2578B9;} #homepage div#conhome h3 a {text-decoration:none; padding:30px 0 10px 10px; display:block;} #homepage div#conhome .twocol .col h2 a:hover {color:#022E51;} #homepage div#conhome .twocol .hypotheek {margin-right:30px;} #homepage div#conhome .twocol .lening h2 {background:url("../images/hypotheek-advies-bg.jpg") 0 0 no-repeat;} #homepage div#conhome .twocol .hypotheek h2 {background:url("../images/lening-advies-bg.jpg") 0 0 no-repeat;} #homepage div#conright {width:240px; float:right; margin-right:30px;} #homepage div#conright .berekenen {background:url("../images/berekenen-bottom.gif") 0 100% no-repeat; padding-bottom:5px; color:#fff; margin:35px 0 25px 0;} #homepage div#conright .berekenen .inner {background:url("../images/berekenen-bg.gif") 0 0 repeat-x #2578B9; padding:10px 20px 10px 20px;} #homepage div#conright .berekenen h2 {background:url("../images/berekenen-top.jpg") 0 0 no-repeat; padding:42px 0 14px 20px; margin-bottom:0;} #homepage div#conright .berekenen h2 a {text-decoration:none; color:#fff;} #homepage div#conright .berekenen h2 a:hover {color:#fff;} #homepage div#conright .berekenen p {margin-bottom:10px;} /* CONTENT */ #wrapper #content .footertext {color:#666; font-size:1em; margin-bottom:20px; line-height:1.2em;} #wrapper #berekenen .footertext {color:#666; font-size:1em; margin-bottom:20px; line-height:1.2em;} /* Middle col -----------------------------------------------------*/ #content div#conleft {width:250px; float:left; margin-right:30px; min-height:10px; text-align:left;} #content div#conleft p {margin-bottom:15px; font-size:1.3em; line-height:1.5em; color:#666;} #content div#conleft span {color:#000;} #content div#conleft img {margin:10px 0 15px 0;} #content div#conleft .intro {font-size:1.3em;} #content div#conmiddle {width:570px; float:left; margin-right:30px; padding-top:40px;} #content div#conmiddle p {margin-bottom:15px;} #content div#conmiddle ul {font-size:1.1em;} #content div#conmiddle .intro {font-size:1.3em;} #content div#conmiddle .formulier {background:url("../images/berekenen-large-bottom.gif") 0 100% no-repeat #2578B9; padding-bottom:5px; overflow:auto; color:#fff; margin:-45px 0 20px 0;} #content div#conmiddle .formulier .inner {background:url("../images/form-bg.gif") 0 0 repeat-x; padding:20px 20px 0 20px;} #content div#conmiddle .formulier h2 {background:url("../images/form-top.gif") 0 0 no-repeat; padding:9px 20px 8px 20px; margin-bottom:0; font-size:1.2em; text-align:right;} #content div#conright {width:210px; float:right; margin-right:30px; display:none;} #content div#conright p {font-family: Arial, Verdana, Helvetica, sans-serif; color:#002A4A;} .center {margin:0 auto; width:270px; text-align:center;} /* BEREKENEN */ /* Middle col -----------------------------------------------------*/ #berekenen div#conmiddle {width:300px; float:left; margin-right:30px; text-align:left;} #berekenen div#conmiddle h1 {margin-top:36px;} #berekenen div#conmiddle p {margin-bottom:15px; font-size:1.3em; line-height:1.5em; color:#666;} #berekenen div#conmiddle span {color:#000;} #berekenen div#conmiddle .intro {font-size:1.3em;} #berekenen div#conright {width:570px; float:right; margin-right:30px;} #berekenen div#conright a {font-size:1.3em;} #berekenen div#conright .berekenen {background:url("../images/berekenen-large-bottom.gif") 0 100% no-repeat; padding-bottom:5px; color:#fff; margin-bottom:20px;} #berekenen div#conright .berekenen .inner {background:url("../images/berekenen-bg.gif") 0 0 no-repeat #2578B9; padding:0px 20px 20px 20px;} #berekenen div#conright .berekenen h2 {background:url("../images/berekenen-large-top.jpg") 0 0 no-repeat; padding:38px 0 14px 20px; margin-bottom:0;} #berekenen div#conright .berekenen .item {background:url("../images/item-top.gif") 0 0 no-repeat #fff; float:left; width:250px; height:150px; margin-top:20px; position:relative;} #berekenen div#conright .berekenen .item span {float:left; position:absolute; left:15px;} #berekenen div#conright .berekenen .item a {font-size:1.1em; display:block;} #berekenen div#conright .berekenen .left {margin:40px;} #berekenen div#conright .berekenen .item .b1 {background:url("../images/item-bottom.gif") 0 100% no-repeat; width:240px; padding:13px 15px;} .zelfdehooghte .b1 {height:100px} #berekenen div#conright .berekenen .item h3 {color:#2578B9; font-weight:normal; font-size:1.2em; margin-bottom:5px;} #berekenen div#conright .berekenen .item h4 {color:#032E51; font-weight:normal; font-size:1.2em; margin-bottom:8px;} #berekenen div#conright .berekenen .item p {color:#000; margin:0 0 10px 17px;} #berekenen div#conright .berekenen .module {float:left; width:250px; margin-top:20px;} #berekenen div#conright .berekenen .module p {margin-bottom:15px;} #berekenen div#conright .berekenen .module img {cursor:pointer; margin-top:20px;} #berekenen div#conright .berekenen .module .form {margin:20px 0;} #berekenen div#conright .berekenen .module label {width:143px; display:block; float:left; font-size:1.1em;} #berekenen div#conright .berekenen .module div {margin-bottom:5px;} #berekenen div#conright .berekenen .module .text {width:92px;} #berekenen div#conright .berekenen .calltoaction {margin-top:50px; text-align:right; float:left; clear:left; width:100%;} #berekenen div#conright .berekenen .exeption {margin-top:-48px; text-align:right; float:left; clear:left; width:100%;} #berekenen div#conright div#uitkomst1 {padding:0px;} #berekenen div#conright div#uitkomst1 p {margin:0;} #berekenen div#conright div#uitkomst1 h5 {color:#012D4F; background-color:#C7E10E; font-family:"lucida sans unicode"; font-size:20px; margin:5px 0; padding:10px;} #berekenen div#conright div#uitkomst1 h6 {color:#012D4F; background-color:#C7E10E; font-family:"lucida sans unicode"; font-size:20px; margin:5px 0; padding:10px;} #berekenen div#conright div#uitkomst2 {padding:0px;} #berekenen div#conright div#uitkomst2 p {margin:0;} #berekenen div#conright div#uitkomst2 h5 {color:#012D4F; background-color:#C7E10E; font-family:"lucida sans unicode"; font-size:20px; margin:5px 0; padding:10px;} #berekenen div#conright div#uitkomst2 h6 {color:#012D4F; background-color:#C7E10E; font-family:"lucida sans unicode"; font-size:20px; margin:5px 0; padding:10px;} .panel_body{padding-top:20px;} #berekenen .highlight{background:url(../images/highlight-top.gif) no-repeat 0 20px; width:100%; padding-top:25px;} #berekenen .highlight table {background:url(../images/highlight-bottom.gif) no-repeat 0 100% #fff; width:529px; padding:5px 0 10px 0;} #berekenen .highlight p{display:block; color:#012D4F; font-weight:bold; text-align:right;} #berekenen .highlight span{color:#012D4F; background:#C7E10E; font-family:Arial, Verdana, Helvetica, sans-serif; font-size:20px; font-weight:bold; padding:5px 10px; width:200px; display:block;} #berekenen .text{padding:4px; border:0px; border-right:1px solid #fff;} #berekenen .text2{background:url(../images/ico-europm.gif) 100% 50% no-repeat #fff;} #berekenen .text3{background:url(../images/ico-euro.gif) 100% 50% no-repeat #fff;} #berekenen .text4{background:url(../images/ico-procent.gif) 100% 50% no-repeat #fff; border-right:1px solid #fff;} #berekenen .text5{background:url(../images/ico-jaar.gif) 100% 50% no-repeat #fff; border-right:1px solid #fff;} div.track{width:185px;background:url(../images/track.gif) no-repeat top left;height:22px;margin:4px 20px;} div.slider{width:10px;height:22px;background:url(../images/slider.gif) no-repeat top left;} #berekenen th {text-align:left; font-size:1em; font-weight:normal;} #berekenen #panel4 .tblForm {width:100%;} #berekenen #panel4 .tblForm td {text-align:right; font-weight:bold; line-height:22px; padding:3px 0;} #berekenen #panel4 .tblForm td p {display:inline;} #berekenen #panel4 .tblForm th {text-align:left; width:390px;} #berekenen #panel4 .melding {padding:20px 0; font-weight:bold; display:none} #berekenen #panel4 .save td {background:#012D4F; color:#fff; padding:4px; font-weight:bold; text-align:left;} #berekenen #panel4 .save th {background:#012D4F; color:#C7E10E; padding:4px; font-weight:bold;} #content div#conmiddle ul#Faq {list-style:none; margin:0; font-size:0.9em;} #Faq h2 {font:bold 1.2em Arial, Verdana, Helvetica, sans-serif; color:#032E51; margin-bottom:0px;} #Faq p {margin-bottom:10px;} #Faq li.selected h2 {font-size:1.8em; font-weight:normal; background:url(../images/min.gif) 8px 8px no-repeat #DFEDFD; border-bottom:1px solid #fff; color:#022E51; padding:6px 10px 6px 30px; cursor:pointer;} #Faq li.selected .item {background:#F3F8FE; display:block; padding:10px 10px 0 30px; overflow:auto;} #Faq li.closed h2 {font-size:1.2em; font-weight:normal; background:url(../images/plus.gif) 8px 8px no-repeat #2578B9; border-bottom:1px solid #fff; color:#fff; padding:6px 10px 6px 30px; cursor:pointer;} #Faq li.closed .item {display:none; padding-bottom:10px;} #Faq li .item {margin-bottom:5px; padding-top:10px;} #Faq li .item ul {margin:0 0 11px 25px;} #Faq li .item ol {margin:0 0 11px 25px;} #Faq li .item ul ul {margin:0 0 0 25px;} #Faq li .item ul ol {margin:0 0 0 25px;} #Faq li .item ol ul {margin:0 0 0 25px;} #Faq li .item ol ol {margin:0 0 0 25px;} #Faq li .item li {line-height:1.2em; margin-top:5px;} /* Footer ---------------------------------------------- */ div#footer {font:1em Arial, Verdana, Helvetica, sans-serif; width:960px; margin:0 auto; text-align:right; color:#CCD4DB;} div#footer span {padding-top:6px; display:block;} div#footer ul {float:left; margin-right:10px;} div#footer li {float:left; list-style:none; padding:6px 16px 0 0;} div#footer li a {color:#fff; text-decoration:none;} div#footer li a:hover {text-decoration:underline;} /* Form --------------------------------------------------------------------------*/ .form {padding-bottom:10px;} .form fieldset {border:0; padding:0;} .form legend {margin:0 0 15px 0; padding:0; float:left; text-indent:0; color:#fff; text-align:left; font-weight:bold;} .form div {clear:both; margin-bottom:5px; overflow:hidden;} .form div div {clear:none; margin-bottom:0;} .form label {float:left; line-height:2em; font-size:1.1em; cursor:pointer;} .form label.front {width:150px;} .form .text {border:1px solid #2578B9; padding:3px 2px 3px 5px; font:1.1em Arial, Verdana, Helvetica, sans-serif, Verdana, Helvetica, sans-serif; float:left; width:196px; margin:0 5px 0 0;} .form .file {border:1px solid #2578B9; padding:3px 2px 3px 5px; font:1.1em Arial, Verdana, Helvetica, sans-serif, Verdana, Helvetica, sans-serif; float:left; width:205px; margin:0 5px 0 0;} .form select {font:1.1em Arial, Verdana, Helvetica, sans-serif, Verdana, Helvetica, sans-serif; float:left; width:205px; margin:1px 5px 0 0;} .form textarea {border:1px solid #2578B9; padding:3px 2px 3px 5px; font:1.1em Arial, Verdana, Helvetica, sans-serif, Verdana, Helvetica, sans-serif; float:left; width:196px; margin:0 5px 0 0; height:98px; overflow:auto;} .form .radio {float:left; margin-top:3px; height:15px; width:20px;} .form .checkbox {float:left; margin-top:3px; height:15px;} .form span.hint {line-height:1.9em;float:left; font-style:italic; white-space:nowrap;} .form span.hint label {float:none; margin:0; padding:0; line-height:1em; font-size:1.1em;} .form .button {float:left; padding:2px 5px 2px 5px;} .form .buttonright {float:right; padding:2px 0px 2px 5px;} .form .collection {width:205px; float:left; margin:0;} .form .collection div {float:left;} .form .collection label {margin-right:20px;} .form .vertical div {float:none; overflow:auto;} .form .vertical input {clear:left;} .form .twoColumn {width:100px; float:left; margin-bottom:5px;} .form .char2 {width:19px;} .form .char4 {width:31px;} .form .char7 {width:58px;} .form .messageTop {background:#fff; padding:10px; margin-bottom:20px;} #content div#conmiddle .form .messageTop ul {font-size:0.9em;} #wrapper #content .form .message p {color:#000; font-weight:bold; margin-bottom:10px;} #content .form .message ul {margin:0 0 10px 0; list-style:none; padding:0;} .form .message .front {color:#fff; font-weight:bold;} .form .message li {color:#c00; margin-left:0; padding:0;} .form .message li label {float:none; font-weight:bold;} .form .message li span {display:block; color:#000; padding-bottom:3px; font-size:1.1em;} .form .message select {border:2px solid #CE0011; color:#CE0011;} .form .message textarea {border:2px solid #CE0011; color:#CE0011; padding:2px 1px 2px 4px;} .form .message input.text {border:2px solid #CE0011; color:#CE0011; padding:2px 1px 2px 4px;} .form .message input.file {border:2px solid #CE0011; color:#CE0011; padding:2px 1px 2px 4px;}