body { background: url(../images/backgrounds/body.png); font-family: Verdana, sans-serif; font-size: 11px; line-height: 16px; } a { color: #e31818; } #page { width: 843px; margin: 27px auto; overflow: hidden; } #page-header { height: 253px; width: 100%; background: url(../images/backgrounds/header.jpg) no-repeat; } .full #page-header { height: 253px; width: 100%; background: url(../images/backgrounds/header2.jpg) no-repeat; } #organisation { display: block; text-indent: -10000px; height: 90px; width: 150px; position: absolute; } #site-title { display: none; } #test-teaser { padding: 22px 0 0 275px; } #test-teaser a { display: block; width: 482px; height: 35px; background: url(../images/buttons/vrijwilliger-worden.png); no-repeat; text-indent: -10000px; } #page-navigation { height: 24px; background: #1a171b; padding: 0; margin: 0; position: relative; z-index: 3; } #page-navigation li { display: block; height: 24px; float: left; margin: 0 21px 0 0; } #page-navigation a { display: block; height: 24px; text-indent: -10000px; outline: none; } #page-navigation a:hover, #page-navigation .current a { background-position: 0 -24px; } #page-navigation li#nav-home, #page-navigation li#nav-home a { width: 64px; background-image: url(../images/buttons/home.png); } #page-navigation li#nav-vrijwilligers, #page-navigation li#nav-vrijwilligers a { width: 94px; background-image: url(../images/buttons/vrijwilligers.png); } #page-navigation li#nav-doe-de-test, #page-navigation li#nav-doe-de-test a { width: 86px; background-image: url(../images/buttons/doe-de-test.png); } #page-navigation li#nav-word-vrijwilliger, #page-navigation li#nav-word-vrijwilliger a { width: 115px; background-image: url(../images/buttons/word-vrijwilliger.png); } #page-navigation li#nav-word-donateur, #page-navigation li#nav-word-donateur a { width: 105px; background-image: url(../images/buttons/word-donateur.png); } #page-navigation li#nav-afdelingen, #page-navigation li#nav-afdelingen a { width: 131px; background-image: url(../images/buttons/afdelingen.png); } #page-navigation li#nav-contact, #page-navigation li#nav-contact a { width: 69px; background-image: url(../images/buttons/contact.png); } #page-content { background: #fff; float: left; position: relative; width: 100%; padding: 0 0 40px 0; } #page-title { height: 42px; background: url(../images/backgrounds/page-title.png) no-repeat; } #page-title ul { margin: 0 0 0 295px; padding: 10px 0 0 0; } #page-title li { float: left; list-style: none; } #page-title li h1, #page-title a { display: block; width: 260px; text-indent: -10000px; height: 23px; left: 0; top: 0; } #page-title a { display: block; position: relative; z-index: 4; background-position: 0 -23px; } #page-title a:hover { background-position: 0 0 ; } #page-title #ervaringen-vrijwilligers h1, #page-title #ervaringen-vrijwilligers a { background-image: url(../images/headers/ervaringen.png); background-repeat: no-repeat; margin: 0; padding: 0; } #page-title #soorten-vrijwilligers h1, #page-title #soorten-vrijwilligers a { background-image: url(../images/headers/soorten.png); background-repeat: no-repeat; margin: 0; padding: 0; } #page-title h2, #page-title h1 { margin: 0; padding: 0; text-indent: -10000px; left: 296px; top: 11px; position: relative; width: 363px; height: 23px; } .full #page-title h2, .full #page-title h1 { left: 23px; } .home #page-title h2, .home #page-title h1 { left: 383px; } #page-title #vluchten { background: url(../images/headers/vluchten.png) no-repeat; } #page-title #meld-mij-aan { background: url(../images/headers/word-vrijwilliger.png) no-repeat; } #page-title #donateur { background: url(../images/headers/donateur.png) no-repeat; } #page-title #in-de-buurt { background: url(../images/headers/in-de-buurt.png) no-repeat; } #page-title #contact { background: url(../images/headers/contact.png) no-repeat; } #page-text { background: url(../images/backgrounds/content-visual1.jpg) no-repeat 24px 0; padding: 65px 24px 40px 294px; position: relative; margin: -42px 0 0 0; } .home #page-text { background: url(../images/backgrounds/content-visual2.jpg) no-repeat 24px 0; padding: 65px 24px 20px 383px; } .full #page-text { background: none; padding: 65px 24px 20px 24px; } #page-text p { margin: 0 0 1.75em 0; } .full #page-text p { } #page-text h3, #page-text h2 { color: #e31818; margin: 0; font-size: 12px; } #page-text blockquote { margin: 0 0 0 0; padding: 0; } #page-text img.align-left { float: left; margin: 0 13px 30px 0; clear: left; } #page-text .testimonial { clear: both; margin: 0 0 2em 0; } #cta a { width: 167px; height: 27px; background: url(../images/buttons/cta.png) no-repeat; text-indent: -10000px; float: right; margin: 0 24px 0 0; } #cta2 a { width: 211px; height: 27px; background: url(../images/buttons/cta2.png) no-repeat; text-indent: -10000px; float: left; left: 40px; top: 500px; z-index: 4; position: absolute; } #cta3 a { width: 211px; height: 27px; background: url(../images/buttons/cta2.png) no-repeat; text-indent: -10000px; float: right; margin: 0 0 24px 100px; } #cta4 a { width: 211px; height: 27px; background: url(../images/buttons/cta4.png) no-repeat; text-indent: -10000px; float: right; margin: 0 24px 0 0; } #ctaN a { width: 211px; height: 27px; background: url(../images/buttons/cta4.png) no-repeat; text-indent: -10000px; float: right; margin: 0 24px 0 0; } #get-location { margin: 23px 0 0 0; } #postcode { width: 50px; } #map { width: 525px; height: 466px; margin: 8px 0 13px 0; } #map-error { color: #e31818; display: none; margin: 4px 0; } #map-location { display: none; padding: 8px 10px; border: solid 1px #d3d3d3; margin: 0 0 13px 0; } #application { margin: 36px 0 24px 0; } #error { color: #c00; } #application-jobs { margin: 0; float: left; width: 660px; } #application-jobs ul { width: 50%; float: left; margin: 0; padding: 0; list-style: none; } #amount-section { background: #f1f1f1; float: left; padding: 10px 10px 15px 10px; margin: 0 0 2em 0; } #amount-section label { display: inline; float: none; } #amount-section p { margin: 0 0 1em 0; } .form-section { float: left; width: 330px; margin: 0 0 0 0; } hr { border:0; background: #f1f1f1; height: 4px; } .form-section-wide { width: 780px; clear: both; margin: 0 0 0 0; } .form-element { float: left; clear: both; margin: 5px 0 0 0; width: 100%; } .form-element label { display: block; float: left; width: 130px; } .form-element label.checkbox-label { width: auto; padding: 0 12px 0 0; } .text-box { width: 170px; } .radio-group { width: 480px; } #newsletter-optin { margin: 36px 0 0 0; } #application-initials { width: 30px; } #application-account { width: 90px; } #application-dob-d { width: 20px; } #application-dob-m { width: 98px; margin: 2px 3px 0 3px; } #application-dob-y { width: 40px; } #application-postcode { width: 60px; } #application-housenumber { width: 20px; } #application-suffix { width: 15px; margin: 2px 0 0 3px; } #donateur_ander_bedrag { width: 40px; margin: 0 4px 0 0; } #form-submit { clear: both; width: 400px; float: left; } .hr { background: #f1f1f1; height: 4px; margin: 2em 0; width: 100%; float: left; clear: both; } #test-intro { margin: 26px 0 27px 289px; } #test-intro h1 { width: 281px; height: 26px; background: url(../images/headers/test-intro.png) no-repeat; text-indent: -10000px; margin: 0 0 0.83em 0; padding: 0; } #test-results { width: 219px; height: 20px; background: url(../images/headers/test-results.png) no-repeat; text-indent: -10000px; margin: 0 0 24px 0; } #test { width: 790px; height: 283px; background: url(../images/backgrounds/test.png) no-repeat; clear: both; margin: 50px 0 0 0; position: relative; top: 0; left: 0; } .full #test p { width: auto; } #steps { position: absolute; top: -50px; left: -41px; } #steps li { display: block; float: left; height: 33px; width: 33px; background-image: url(../images/headers/steps.png); background-repeat: no-repeat; text-indent: -10000px; margin: 0 5px 0 0; overflow: hidden; } #steps #step-1 { background-position: 0 0; } #steps #step-1.done { background-position: -33px 0; } #steps #step-1.current { background-position: -66px 0; } #steps #step-2 { background-position: 0 -33px; } #steps #step-2.done { background-position: -33px -33px; } #steps #step-2.current { background-position: -66px -33px; } #steps #step-3 { background-position: 0 -66px; } #steps #step-3.done { background-position: -33px -66px; } #steps #step-3.current { background-position: -66px -66px; } #steps #step-4 { background-position: 0 -99px; } #steps #step-4.done { background-position: -33px -99px; } #steps #step-4.current { background-position: -66px -99px; } #steps #step-5 { background-position: 0 -132px; } #steps #step-5.done { background-position: -33px -132px; } #steps #step-5.current { background-position: -66px -132px; } #donate-teaser { width: 254px; height: 56px; background: url(../images/headers/ik-geef-tijd.png) no-repeat; float: left; } #donate-teaser.alt { background: url(../images/headers/ik-geef-geld.png) no-repeat; padding: 0 23px 0 0; } #donate-teaser span { display: none; } #donate-teaser a { display: block; width: 181px; height: 22px; text-indent: -10000px; position: relative; top: 56px; } #question { text-indent: -10000px; width: 790px; height: 233px; position: absolute; } .tijd #question { background: url(../images/questions/tijd.png) no-repeat 40px 80px; } .juridisch #question { background: url(../images/questions/juridisch.png) no-repeat 40px 55px; } .nederlands #question { background: url(../images/questions/nederlands.png) no-repeat 40px 90px; } .organiseren #question { background: url(../images/questions/organiseren.png) no-repeat 40px 68px; } .computer #question { background: url(../images/questions/computer.png) no-repeat 40px 85px; } #answers { width: 457px; height: 233px; position: relative; left: 359px; } #start-test { display: block; height: 80px; width: 329px; background: url(../images/buttons/start-test.png) no-repeat; text-indent: -10000px; position: relative; left: 290px; } #answer-yes { background-image: url(../images/buttons/ja-nee.png); background-repeat: no-repeat; text-indent: -10000px; outline: none; display: block; position: absolute; } #answer-no { background-image: url(../images/buttons/ja-nee.png); background-repeat: no-repeat; text-indent: -10000px; outline: none; display: block; position: absolute; } .tijd .answer-time { background-image: url(../images/buttons/tijd.png); background-repeat: no-repeat; display: block; width: 143px; text-indent: -10000px; position: absolute; } .tijd #time-1 { height: 80px; background-position: 0 0; top: 15px; } .tijd #time-2 { height: 91px; background-position: 0 -80px; left: 183px; top: -21px; } .tijd #time-3 { height: 94px; background-position: 0 -171px; left: 288px; top: 56px; } .tijd #time-4 { height: 92px; background-position: 0 -345px; left: 51px; top: 121px; } .tijd #time-5 { height: 80px; background-position: 0 -265px; left: 224px; top: 169px; } .juridisch #answer-yes { width: 149px; height: 82px; background-position: 0 0; top: 35px; } .juridisch #answer-no { width: 190px; height: 104px; background-position: 0 -280px; left: 170px; top: 48px; } .nederlands #answer-yes { width: 178px; height: 99px; background-position: 0 -82px; top: 79px; } .nederlands #answer-no { width: 161px; height: 89px; background-position: 0 -384px; left: 200px; top: 30px; } .organiseren #answer-yes { width: 189px; height: 99px; background-position: 0 -181px; top: 74px; } .organiseren #answer-no { width: 161px; height: 89px; background-position: 0 -473px; left: 201px; top: 97px; } .computer #answer-yes { width: 187px; height: 99px; background-position: 0 -82px; top: 80px; } .computer #answer-no { width: 190px; height: 104px; background-position: 0 -280px; left: 201px; top: 37px; } #test.results { background: #f8b322 url(../images/backgrounds/results-top.png) no-repeat; width: 100%; overflow: hidden; height: auto; margin: 24px 0 0 0; } .result { width: 355px; padding: 20px 20px 10px 20px; float: left; } .result-section { clear: both; } .result img { float: left; margin: 0 13px 43px 0; } .result p { height: 150px; } #taalcoach.result p { height: auto; } .result h2 { width: 100%; height: 40px; text-indent: -10000px; } #taalcoach h2 { background: url(../images/headers/taalcoach.png) no-repeat; } #kantoormedewerker h2 { background: url(../images/headers/kantoormedewerker.png) no-repeat; } #medewerkercentraleopvang h2 { background: url(../images/headers/medewerkercentraleopvang.png) no-repeat; } #medewerkercampagnes h2 { background: url(../images/headers/medewerkercampagnes.png) no-repeat; } #maatschappelijkebegeleider h2 { background: url(../images/headers/maatschappelijkebegeleider.png) no-repeat; } #jobcoach h2 { background: url(../images/headers/jobcoach.png) no-repeat; } #activiteitenbegeleider h2 { background: url(../images/headers/activiteitenbegeleider.png) no-repeat; } #spreekuurmedewerker h2 { background: url(../images/headers/spreekuurmedewerker.png) no-repeat; } #klusser h2 { background: url(../images/headers/klusser.png) no-repeat; } #donateur h2 { background: url(../images/headers/donateur2.png) no-repeat; } #test-outro { background: url(../images/backgrounds/results-bottom.png) no-repeat; padding: 30px 0 0 0; }