/* ### GENERAL ### */ * { margin: 0px; padding: 0px; } html, body { font-family: Arial; font-size: 12px; color: #545454; } input, select, textarea { font-family: Arial; font-size: 12px; color: #4f87c7; } body { background: url('../images/bodyBg.gif') #fff repeat-x; } img { border: 0px; display: block; } em.error { background:url("../images/warning.gif") no-repeat 0px 0px; padding-left: 20px; color: red; } /* ### GLOBAL CLASSES ### */ .clear { clear: both; } /* ### WRAPPER ### */ #wrapper { display: block; position: relative; min-height: 100%; } /* ### MAIN CONTAINER ### */ #mainCntr { margin: 0 auto; width: 996px; } /* ### HEADER CONTAINER ### */ #headerCntr { position: relative; width: 996px; height: 156px; } #headerCntr h1 { position: absolute; top: 25px; left: 0px; width: 299px; height: 37px; text-indent: -9999px; } #headerCntr h1.nl {background: url('../images/logo_nl.gif') no-repeat; } #headerCntr h1.en {background: url('../images/logo_en.gif') no-repeat; } #headerCntr h1.fr {background: url('../images/logo_fr.gif') no-repeat; } /* ### MENU CONTAINER ### */ #menuCntr { position: absolute; top: 76px; left: 0px; width: 996px; } #menuCntr ul { overflow: hidden; width: 996px; list-style: none; } #menuCntr li { margin-right: 5px; float: left; display: inline; } #menuCntr li a { display: block; float: left; height: 34px; text-transform: uppercase; text-decoration: none; color: #fff; background: url('../images/menuBg.gif') repeat-x; } #menuCntr li a span { display: block; float: left; height: 34px; cursor: pointer; background: url('../images/menuL.gif') no-repeat left; } #menuCntr li a span span { padding: 12px 40px 0px 40px; height: 22px; background: url('../images/menuR.gif') no-repeat right; } #menuCntr li a:hover, #menuCntr li.selected a { color: #05b0d5; background: url('../images/menuHBg.gif') repeat-x; } #menuCntr li a:hover span, #menuCntr li.selected a span { background: url('../images/menuHL.gif') no-repeat left; } #menuCntr li a:hover span span, #menuCntr li.selected a span span { background: url('../images/menuHR.gif') no-repeat right; } /* ### TAAL CONTAINER ### */ #taalCntr { position: absolute; top: 130px; left: 0px; overflow: hidden; width: 996px; } #taalCntr h2 { float: left; line-height: 14px; font-size: 12px; font-weight: normal; color: #04b0d5; } #taalCntr ul { float: right; overflow: hidden; width: 400px; list-style: none; } #taalCntr li { margin-left: 2px; float: right; display: inline; width: 19px; height: 14px; } #taalCntr li a { display: block; float: left; width: 19px; height: 14px; text-indent: -9999px; background: no-repeat center; } #taalCntr li a:hover, #taalCntr li.selected a { background: url('../images/taalBg.gif') no-repeat; } #taalCntr li a span { display: block; float: left; width: 19px; height: 14px; cursor: pointer; background: no-repeat center; } #taalCntr li.nl a span { background-image: url('../images/nl.gif'); } #taalCntr li.en a span { background-image: url('../images/en.gif'); } #taalCntr li.fr a span { background-image: url('../images/fr.gif'); } #taalCntr div.logout { float:right; width:100px; position:absolute; top:0px; right:75px; } #taalCntr div.logout a { float:right; color:#990000; text-decoration:none; font-size:10px; text-transform: uppercase; line-height:14px; } #taalCntr div.logout a:hover { text-decoration:underline; } #taalCntr div.logout a img { float:left; height:16px; width:16px; margin-right:5px; } /* ### INTRO CONTAINER ### */ #introCntr { padding-top: 5px; width: 996px; } /* ### STAP BOX ### */ .stapBox { padding: 10px; float: left; display: inline; width: 300px; height: 317px; background: url('../images/stapBg.gif') no-repeat; } .stapBox h2 { padding: 0px 10px 8px 10px; text-transform: uppercase; font-size: 16px; font-weight: normal; color: #80be42; border-bottom: 1px solid #eae9e9; } .stapBox h2 span { font-weight: bold; color: #2abbd9; } .stapBox ul { padding: 10px 0px 20px 0px; overflow: hidden; width: 300px; } .stapBox a.button { display: block; height: 40px; line-height: 30px; text-transform: uppercase; text-decoration: none; font-size: 18px; font-weight: normal; color: #2abbd9; background: url('../images/buttonBgH.gif') no-repeat right; } .stapBox a.button span { font-weight: bold; color: #FF9900; } .stapBox a.button:hover { text-decoration: underline; background: url('../images/buttonBg.gif') no-repeat right; } .stapBox li { margin-bottom: 3px; padding: 10px; float: left; display: inline; width: 228px; height: 44px; font-size: 11px; line-height: 16px; background: url('../images/stapLi.gif') no-repeat; } .stapBox li span { display: block; font-size: 13px; color: #80be42; } .stapBox li.first { margin-right: 5px; padding: 0px; width: 44px; line-height: 44px; font-size: 24px; text-align: center; color: #fff; background: url('../images/stapFirst.gif') no-repeat; } .stapBoxBig { width: 474px; background: url('../images/stapBgBig.jpg') no-repeat; } .stapBoxBig h2 { width:280px; } .stapBoxBig a.button {width:300px; } /* ### INTRO BOX ### */ .introBox { position: relative; float: right; width: 670px; height: 317px; background: url('../images/introBg.png') no-repeat; } .introBox a.button { position: absolute; top: -5px; left: -25px; display: block; width: 159px; height: 118px; text-indent: -9999px; } .introBox a.nl {background: url('../images/meld_nl.png') no-repeat;} .introBox a.en {background: url('../images/meld_en.png') no-repeat;} .introBox a.fr {background: url('../images/meld_fr.png') no-repeat;} .introBox h1 { position: absolute; top: 200px; left: 20px; font-size: 40px; font-weight: normal; color: #fff; } .introBox p { position: absolute; top: 260px; left: 20px; width: 400px; line-height: 20px; font-size: 14px; color: #fff; } .introBox p a { text-decoration: none; color: #006279; } .introBox p a:hover { text-decoration: underline; } .introBox fieldset { position: absolute; top: 5px; left: 140px; overflow: hidden; width: 180px; border: 0px; } .introBox input.field { margin-bottom: 3px; padding: 2px 5px 2px 5px; width: 140px; border: 1px solid #007794; background: #fff; } .introBox fieldset a { display: block; float: left; height: 22px; line-height: 20px; color: #002f64; } .introBox fieldset a:hover { text-decoration: none; } .introBox input.submit { margin-left: 5px; padding-bottom: 5px; float: left; cursor: pointer; width: 47px; height: 22px; font-weight: bold; color: #fff; border: 0px; background: url('../images/submitBg.gif') no-repeat; } /* ### CONTENT CONTAINER ### */ #contentCntr { padding-top: 5px; overflow: hidden; width: 996px; } /* ### LEFT CONTAINER ### */ #leftCntr { float: left; overflow: hidden; width: 464px; } #leftCntr div.right { float: right; } /* ### LEFT ONE THIRD CONTAINER (user enviroment) ### */ #leftOneThirdCntr { float: left; overflow: hidden; width: 232px; } #leftOneThirdCntr div.right { float: right; } /* ### LIST BOX ### */ .listBox { padding: 10px; float: left; width: 209px; background: url('../images/listBg.gif'); } .listBox h1 { padding: 0px 10px 8px 10px; text-transform: uppercase; font-size: 18px; font-weight: normal; color: #80be42; border-bottom: 1px solid #eae9e9; } .listBox h1 span { font-weight: bold; color: #2abbd9; } .listBox h2 { padding: 0px 10px 8px 10px; text-transform: uppercase; font-size: 18px; font-weight: normal; color: #80be42; border-bottom: 1px solid #eae9e9; } .listBox h2 span { font-weight: bold; color: #2abbd9; } .listBox h3 { padding: 0px 10px 8px 10px; font-size: 12px; font-weight: bold; color: #80be42; text-decoration:none; margin-bottom:-10px; } .listBox h4 { padding: 0px 10px 8px 10px; text-transform: uppercase; font-size: 18px; font-weight: normal; color: #80be42; border-bottom: 1px solid #eae9e9; } .listBox h4 span { font-weight: bold; color: #2abbd9; } .listBox ul { padding: 10px; list-style: none; } .listBox li { line-height: 22px; } .listBox li a { color: #454545; } .listBox li a:hover { color: #2abbd9; } .listBox ul.address { padding: 0px 10px 5px 10px; overflow: hidden; width:195px; list-style: none; float:left;} .listBox li.address { float: left; line-height: 18px;} .listBox li.first { float:left; width: 30px; } .listBox p { padding:10px; text-align:justify; } .listBox ul.withBullet { padding-bottom: 25px; list-style: none; } .listBox li.withBullet { padding-left: 20px; line-height: 20px; background: url('../images/catsBg.gif') no-repeat left; width:100%; } .listBox li.withBullet a { text-decoration: none; color: #454545; } .listBox li.withBullet a:hover { text-decoration: underline; } /* ### LIST BOX WIDE ### */ .listBoxWide { padding: 10px; float: left; width: 450px; background: url('../images/rightBg.gif'); } .listBoxWide h1 { padding: 0px 10px 8px 10px; text-transform: uppercase; font-size: 18px; font-weight: normal; color: #80be42; border-bottom: 1px solid #eae9e9; } .listBoxWide h1 span { font-weight: bold; color: #2abbd9; } .listBoxWide h2 { padding: 0px 10px 8px 10px; text-transform: uppercase; font-size: 18px; font-weight: normal; color: #80be42; border-bottom: 1px solid #eae9e9; } .listBoxWide h2 span { color: #2abbd9; } .listBoxWide h3 { padding: 0px 10px 8px 10px; font-size: 12px; font-weight: bold; color: #80be42; text-decoration:none; margin-bottom:-10px; } .listBoxWide h4 { padding: 0px 10px 8px 10px; text-transform: uppercase; font-size: 18px; font-weight: normal; color: #80be42; border-bottom: 1px solid #eae9e9; } .listBoxWide h4 span { font-weight: bold; color: #2abbd9; } .listBoxWide p { padding:10px; text-align:justify; } .listBoxWide a.button { padding:10px 50px 10px 0px; margin-left:10px; text-transform: uppercase; text-decoration: none; font-size: 20px; font-weight: normal; color: #2abbd9; background: url('../images/buttonBgH.gif') no-repeat right; } .listBoxWide a.button span { font-weight: bold; color: #FF9900; } .listBoxWide a.button:hover { text-decoration: underline; color: #2abbd9; background: url('../images/buttonBg.gif') no-repeat right; } .listBoxWide img.catImage { float:right; width:150px; margin:10px; border:1px solid #eae9e9; padding:2px; background-color:#FFFFFF; } /* BACKUP OUDE BUTTON .listBoxWide a.button { display: block; height: 40px; width:435px; margin-top:10px; margin-left:10px; line-height: 30px; text-transform: uppercase; text-decoration: none; font-size: 14px; font-weight: normal; color: #2abbd9; background: url('../images/buttonBg.gif') no-repeat right; } .listBoxWide a.button span { font-weight: bold; color: #80be42; } .listBoxWide a.button:hover { text-decoration: underline; background: url('../images/buttonBgH.gif') no-repeat right; } */ /* ### RIGHT CONTAINER ### */ #rightCntr { float: right; width: 520px; border-right: 1px solid #eae9e9; background: url('../images/rightBg.gif') repeat-y left top; } /* ### RIGHT CONTAINER ### */ #rightTwoThirdCntr { float: right; width: 750px; border-right: 1px solid #eae9e9; background: url('../images/rightBg.gif') repeat-y left top; } /* ### TEXT BOX ### */ .textBox { padding: 10px; position:relative; } .textBox h1 { margin-bottom: 15px; padding: 0px 10px 8px 10px; text-transform: uppercase; font-size: 18px; font-weight: normal; color: #80be42; border-bottom: 1px solid #eae9e9; } .textBox h1 span { font-weight: bold; color: #2abbd9; } .textBox h2 { font-size: 16px; font-weight: normal; color: #80be42; text-decoration:none; margin-bottom:5px; } .textBox h2 span { font-weight: bold; color: #2abbd9; } .textBox h3 { font-size: 12px; font-weight: bold; color: #80be42; text-decoration:none; margin-bottom:5px; } .textBox p { padding: 0px 10px 15px 10px; line-height: 16px; text-align:justify; } .textBox a.button { display: block; height: 40px; width:300px; margin-top:30px; margin-left:10px; line-height: 30px; text-transform: uppercase; text-decoration: none; font-size: 18px; font-weight: normal; color: #2abbd9; background: url('../images/buttonBgH.gif') no-repeat right; } .textBox a.button span { font-weight: bold; color: #FF9900; } .textBox a.button:hover { text-decoration: underline; background: url('../images/buttonBg.gif') no-repeat right; } .textBox a.buttonWide { padding:15px 50px 15px 0px; height: 40px; margin-top:30px; margin-left:10px; line-height: 30px; text-transform: uppercase; text-decoration: none; font-size: 12px; font-weight: normal; color: #2abbd9; background: url('../images/buttonBgH.gif') no-repeat right; } .textBox a.buttonWide span { font-weight: bold; color: #FF9900; } .textBox a.buttonWide:hover { text-decoration: underline; background: url('../images/buttonBg.gif') no-repeat right; } .textBox a.buttonBack { display: block; height: 40px; line-height: 30px; padding-left:50px; text-transform: uppercase; text-decoration: none; font-size: 18px; font-weight: normal; color: #2abbd9; background: url('../images/buttonBg_backH.gif') no-repeat left; } .textBox a.buttonBack span { font-weight: bold; color: #FF9900; } .textBox a.buttonBack:hover { text-decoration: underline; } .textBox a.buttonBackWide { display: block; height: 40px; width:100%; line-height: 30px; padding-left:50px; text-transform: uppercase; text-decoration: none; font-size: 12px; font-weight: normal; color: #2abbd9; background: url('../images/buttonBg_backH.gif') no-repeat left; } .textBox a.buttonBackWide span { font-weight: bold; color: #FF9900; } .textBox a.buttonBackWide:hover { text-decoration: underline; } .textBox ul { padding: 0px 10px 5px 10px; overflow: hidden; width: 100%; list-style: none; border:0px solid; float:left;} .textBox li { float: left; line-height: 18px; } .textBox li.first { width: 30px;} .textBox div.companyLogo {position:absolute; right:10px; top:10px; border:1px solid #eae9e9; padding:2px; background-color:#FFFFFF; } .textBox a { color: #80be42; text-decoration:none; } .textBox a:hover { text-decoration:underline;} .textBox div.line { float:left; width:100%; height:2px; border-bottom: 1px solid #eae9e9; margin-top:10px; margin-bottom:10px; } .textBox p.warning{ margin-bottom:10px; border: 0px solid #007ec7; color:#FF0000; padding:5px; padding-left:20px; background: url('../images/warning.gif') no-repeat left center; } .textBox p.info{ margin-bottom:10px; border: 0px solid #007ec7; color: #2abbd9; padding:5px; padding-left:20px; background: url('../images/info.gif') no-repeat left center; } .textBox p.success{ margin-bottom:10px; border: 0px solid #007ec7; color:#66CC33; padding:5px; padding-left:20px; background: url('../images/success.gif') no-repeat left center; } .textBox p.success span { color:#545454;} .textBox ul.withBullet { padding-bottom: 25px; list-style: none; } .textBox li.withBullet { padding-left: 20px; line-height: 20px; background: url('../images/catsBg.gif') no-repeat left; width:100%; } .textBox li.withBullet a { text-decoration: none; color: #454545; } .textBox li.withBullet a:hover { text-decoration: underline; } .textBox ol { padding-left:10px; padding-right:10px; margin-bottom:10px; list-style-type: decimal; list-style-position: inside; } .textBox ol li { float:none; font-family: Arial; font-size: 12px; color: #545454; } .textBix table { padding-left:10px; } #_step_1, #_step_2, #_step_3 {background-color:#FFFFFF; margin-left:-10px; padding-left:10px; padding-top:10px; border-top:0px solid #eae9e9; border-right:0px solid #eae9e9; border-bottom:0px solid #eae9e9; } #_step_1 { background: #FFFFFF url('../images/1Bg.gif') no-repeat right top; } #_step_2 { background: #FFFFFF url('../images/2Bg.gif') no-repeat right top; } #_step_3 { background: #FFFFFF url('../images/3Bg.gif') no-repeat right top; } .textBox input[type="text"], .textBox input[type="password"] { height:25px; width:200px; line-height:25px; font-size:14px; border:1px solid #CFCFCF; background: #FFFFFF url('../images/inputBg.gif') repeat-x bottom; } .textBox input[name="user_street_no"], .textBox input[name="user_streetno"] { width:45px; } .textBox select {line-height:25px; font-size:14px; height:25px;} .textBox textarea { border:1px solid #CFCFCF; font-size:14px; } .textBox label { line-height:25px; } .textBox input[type="submit"] { height:25px; line-height:25px; font-size:14px; border:1px solid #CFCFCF; background:#eae9e9; } .textBox img.imgOfferHeader {position:absolute; right:10px; top:10px; border:1px solid #eae9e9; padding:2px; background-color:#FFFFFF; } .textBox #preferenceRow label { font-weight:bold; font-size:16px; color:#FF9900; } /* ### RESULTAAT BOX ### */ .resultaatBox { margin-bottom: 10px; overflow: hidden; width: 500px; border: 1px solid #eae9e9; background: #fff; position:relative; height:120px;} .resultaatBox:hover {background: #FFEAD5; border: 1px solid #cccccc; } .resultaatBox div.image { padding: 15px; float: left; display: inline; width: 70px; } .resultaatBox div.image img { width:65px; padding:0px; } .resultaatBox div.image img.score { width:70px; height:16px; border:0px; margin-top:5px; } .resultaatBox div.image p.score { font-size:9px; margin-left:-10px; margin-right:-20px; } .resultaatBox div.list { padding: 12px 15px 0px 15px; float: right; position:absolute; top:0px; display: inline; width: 455px; height:120px; border-left: 1px solid #dadada; } .resultaatBox div.list ul { overflow: hidden; width: 200px; list-style: none; float:left; border:0px solid;} .resultaatBox div.list ul.right {float:right; width: 100px; border:0px solid; margin-top:0px; color:#666666;} .resultaatBox div.list li { float: left; line-height: 16px; width: 160px;} .resultaatBox div.list li.first { width: 50px; } .resultaatBox div.list a { color: #a10505; } .resultaatBox div.list li.info {line-height: 25px; font-size:9px; width: 80px; vertical-align:bottom; border:0px solid; } .resultaatBox div.list li.mak { line-height: 16px; font-size:9px; width: 145px; border:0px solid; text-align:left; float:left} .resultaatBox div.list li.logo { width: 65px; float: left; border:0px solid; font-size:9px;} .resultaatBox div.list li.logo img { width: 65px; float: right; border:0px solid;} /* ### FULL CONTAINER ### */ #fullCntr { float: left; width: 993px; border-right: 1px solid #eae9e9; background: url('../images/rightBg.gif') repeat-y left top; } #fullCntr table { margin-left:10px;} /* ### 2/3 CONTAINER ### */ #twothirdCntr { float: left; width: 670px; border-right: 1px solid #eae9e9; background: url('../images/rightBg.gif') repeat-y left top; } #twothirdCntr table { margin-left:10px;} /* ### STAP BOX 2 ### */ .stapBox_2 { padding: 10px 0px 10px 10px; float: left; display: inline; width: 310px; background: url('../images/stapBg.gif') no-repeat; } .stapBox_2 h2 { padding: 0px 10px 8px 10px; text-transform: uppercase; font-size: 16px; font-weight: normal; color: #80be42; border-bottom: 1px solid #eae9e9; margin-bottom:5px; } .stapBox_2 h2 span { font-weight: bold; color: #2abbd9; } .stapBox_2 ul { padding: 10px 0px 10px 0px; overflow: hidden; width: 310px; } .stapBox_2 li { margin-bottom: 5px; padding: 10px; float: left; display: inline; width: 228px; height: 44px; font-size: 11px; line-height: 16px; color:#999999; background: url('../images/stapLi.gif') no-repeat; } .stapBox_2 li.selected { margin-bottom: 5px; padding: 10px; margin-right:-35px; width: 265px; height: 53px; font-size: 11px; line-height: 16px; color:#000000; background: url('../images/stepActive.png') no-repeat; } .stapBox_2 li span { display: block; font-size: 13px; color: #999999; } .stapBox_2 li.selected span { display: block; font-size: 13px; color: #80be42; } .stapBox_2 li.first { margin-right: 5px; padding: 0px; width: 44px; line-height: 44px; font-size: 24px; text-align: center; color: #fff; background: url('../images/stapFirst.gif') no-repeat; } .stapBox_2 li.selectedfirst { margin-right: 5px; padding: 0px; width: 44px; line-height: 44px; font-size: 24px; text-align: center; color: #fff; background: url('../images/stapFirst_active.gif') no-repeat; } .stapBox_2 a.buttonBack { display: block; margin-top:-4px; height: 40px; line-height: 30px; padding-left:50px; text-transform: uppercase; text-decoration: none; font-size: 18px; font-weight: normal; color: #2abbd9; background: url('../images/buttonBg_backH.gif') no-repeat left; } .stapBox_2 a.buttonBack span { font-weight: bold; color: #FF9900; } .stapBox_2 a.buttonBack:hover { text-decoration: underline; background: url('../images/buttonBg_back.gif') no-repeat left; } /* ### AD BOX ### */ .adBox { margin: 5px 0px 5px 0px; padding: 5px 0px 5px 0px; width: 994px; border: 1px solid #eae9e9; } .adBox img { margin: 0 auto; } /* ### CATS CONTAINER ### */ #catsCntr { overflow: hidden; width: 996px; } /* ### CATS BOX ### */ .catsBox { padding: 10px 0px 0px 30px; float: left; display: inline; width: 218px; min-height: 545px; border-left: 1px solid #eae9e9; } .catsBox h2 { padding-bottom: 15px; font-size: 14px; font-weight: normal; color: #2abbd9; } .catsBox h2 a { padding-bottom: 15px; font-size: 14px; font-weight: normal; color: #2abbd9; text-decoration:none; } .catsBox h2 a:hover { text-decoration:underline; } .catsBox ul { padding-bottom: 25px; list-style: none; } .catsBox li { padding-left: 20px; line-height: 20px; background: url('../images/catsBg.gif') no-repeat left; } .catsBox li a { text-decoration: none; color: #454545; } .catsBox li a:hover { text-decoration: underline; } /* ### CATS EDIT BOX ### */ .catsBoxEdit { padding: 10px 0px 0px 10px; float: left; display: inline; width: 225px; } .catsBoxEdit h2 { margin-bottom: 5px; font-size: 14px; font-weight: normal; color: #2abbd9;} .catsBoxEdit ul { list-style: none; margin-bottom:20px;} .catsBoxEdit li { padding-left: 1em; border: 1px dotted #80be42; border-width: 0 0 1px 1px; line-height: 20px; width:175px; } .catsBoxEdit li a { text-decoration: none; color: #454545; } .catsBoxEdit li a:hover { text-decoration: underline; } /* ### FOOTER CONTAINER ### */ #footerCntr { margin-top: 20px; width: 100%; height: 126px; background: url('../images/footerBg.gif') repeat-x; } #footerCntr p.footer { text-align: center; padding: 20px 0px 10px 0px; font-size: 12px; } #footerCntr p.footer a { padding: 0px 5px 0px 5px; text-decoration: none; color: #2abbd9; } #footerCntr p.footer a:hover { text-decoration: underline; } #footerCntr p { text-align: center; font-size: 10px; } #footerCntr .mwCntr { text-align: right; margin:auto; width:999px; } #footerCntr .mwCntr a { float:right; }