/* $Id: screen.css,v 1.87 2009-11-19 13:52:53 jasper Exp $ */

* { margin: 0; padding: 0; }

html { height: 100%; }

body { min-height: 100%; padding: 1px 0; line-height: 1.2em; font-size: 0.75em; color: #000; background: #f29400; }
body.user { border: 10px solid #f00; margin: 5px; }

body, input, button, textarea, select { font-family: "Arial", sans-serif; }

h1, h2, h3 { text-transform: uppercase; line-height: 0.85em; letter-spacing: -0.04em; }
h1 { margin: 17px 0 30px 0; font-size: 2.5em; color: #fff; }
h1 em { font-style: normal; color: #efaa2e; }
h2 { margin: 15px 0 30px 0; font-size: 2.4em; color: #efaa2e; }
h2 em { font-style: normal; color: #000; }
h3 { margin: 8px 0 0 0; font-size: 1.1em; }
h3.position { position: absolute; margin: 0; right: 20px; top: 20px; font-size: 1.4em; color: #EFAA2E; }

p, ul, ol, form, blockquote { margin: 10px 0 20px 0; }

ul { padding-left: 15px; }
ol { padding-left: 45px; }

input, button, select, textarea { font-size: 1em; }
label { cursor: pointer; }
strong label { font-weight: normal; }
form .vraag { overflow: hidden; margin-bottom: 6px; }
form .maxlength { text-align: right; }
form .nummer { display: none; }

blockquote { font-weight: bold; padding: 0 20px; text-align: center; }

a { color: #000; }
a.loading, .buttons a.loading { background: url("loading.gif"); }

img { border: 0; }

#user { position: absolute; z-index: 2; padding: 2px 8px; top: 20px; right: 20px; font-size: 1.3em; background: #fff; line-height: 1.3em; }

#page { margin: 0 auto; width: 980px; padding: 1px 0; }

#header { position: relative; height: 95px; }
#logo { position: absolute; margin: 0; top: 34px; left: 61px; }
.prijs #logo, .na #logo, .eind #logo, .offline #logo { left: 103px; }
#flash { margin: 4px auto; width: 415px; }
#countdown-flash { float: left; width: 160px; margin-top: 11px; }
#clock-flash { float: left; width: 90px; margin: 0 4px; }
#flash img { float: right; margin-top: 11px; }
.prijs #flash, .na #flash, .eind #flash, .offline #flash { width: 251px; }
.prijs #clock-flash, .na #clock-flash, .eind #clock-flash, .offline #clock-flash { margin-left: 0; }

#content { overflow: auto; padding: 0 20px; background: url("ster.png"); }

#content > div, #main > div  { margin: 20px 0; }

#head-block { height: 280px; background: #f29400; }
#head-block-offline img { display: block; }

#ticker { overflow: hidden; height: 60px; background: #f29400 url("ticker.png"); }
#ticker ul { margin: 0; padding: 0; }
#ticker span { float: left; width: 38px; height: 43px; margin: 9px 15px 0 20px; background: url("ticker.png") -940px 0; }
#ticker .reden span { width: 76px; }
#ticker .dennis span { background-position: -1016px 0; }
#ticker .nicolette span { background-position: -1054px 0; }
#ticker .gigi span { background-position: -1092px 0; }
#ticker .ipod span { width: 52px; background-position: -1130px 0; }
#ticker .camera span { width: 52px; background-position: -1182px 0; }
#ticker .beauty span { width: 52px; background-position: -1234px 0; }
#ticker .meet span { width: 52px; background-position: -1286px 0; }
#ticker .vvv span { width: 52px; background-position: -1338px 0; }
#ticker li { list-style-type: none; line-height: 60px; white-space: nowrap; color: #fff; font-size: 1.25em; }

#reporters { height: 178px; }
#reporters h2 { margin-bottom: 30px; color: #000; font-size: 1.25em; line-height: 1.1em; }
#reporters h2 em { color: #efaa2e; }
#reporters .intro { float: left; width: 264px; }
#reporters ul { float: right; width: 585px; margin: 25px 0 0 0; padding: 0; }
#reporters li { float: left; list-style-type: none; margin-left: 40px; }
#reporters li:first-child { margin-left: 0px; }
#reporters p.buttons { margin: 0; }
#reporters p.buttons a { display: block; width: 90px; margin-left: 31px; }
.js .prijs #reporters, .js .na #reporters, .js .eind #reporters, .js .offline #reporters { display: none; }

#main .buttons a, #main .buttons .button { height: 26px; padding: 0 20px; line-height: 26px; font-size: 1.3em; }

#subcontent { overflow: hidden; background: #f29400; }
#subcontent > div { float: left; margin-left: 15px; padding-top: 55px; width: 263px; height: 184px; }
.op #subcontent > div { padding-top: 70px; height: 169px; }
.voor #subcontent > div { padding-top: 35px; height: 204px; }
#subcontent .actieinfo { margin-left: 0; width: 264px; }
.prijs #subcontent .actieinfo, .na #subcontent .actieinfo, .eind #subcontent .actieinfo, .offline #subcontent .actieinfo { width: 582px; }
.voor #subcontent .actieinfo { width: 900px; }
#subcontent h2 { position: absolute; width: 263px; margin-top: -32px; color: #000; font-size: 1.25em; line-height: 1.1em; }
.op #subcontent h2 { margin-top: -47px; }
.voor #subcontent h2 { position: static; margin: 18px 0 10px 0; width: auto; font-size: 1.4em; }
#subcontent h2 em { color: #efaa2e; }
#subcontent p { margin-bottom: 10px; }
#subcontent p.buttons { position: absolute; bottom: 20px; left: 20px; right: 20px; margin: 0; }
#subcontent p.buttons a { float: none; display: block; margin: 0 auto; width: 120px; }
#subcontent blockquote { margin-top: 20px; }
#subcontent .actieinfo .part1 { float: left; width: 260px; }
#subcontent .actieinfo .foto { margin: 0; float: right; width: 305px; }
#subcontent .doe-nu-mee { position: absolute; left: 20px; top: 0; width: 700px; height: 240px; }
#subcontent .doe-nu-mee ul { overflow: hidden;	padding: 0; }
#subcontent .doe-nu-mee li { margin-right: 18px; width: 122px; float: left; text-align: center; list-style-type: none; font-size: 0.9em; line-height: 1.2em; }
#subcontent .doe-nu-mee li img { display: block; margin-bottom: 0.5em; }
.voor #subcontent .doe-nu-mee p.buttons { left: 0; }
.voor #subcontent .doe-nu-mee p.buttons a { width: 180px; height: 28px; line-height: 28px; font-size: 1.4em; }
#subcontent .daaguit { position: absolute; right: 20px; top: 0; width: 165px; }
.voor #subcontent .daaguit h2 { font-size: 1.2em; margin-top: 19px; }
.voor #subcontent .daaguit p.buttons { position: static; margin-top: 20px; }
.voor #subcontent .daaguit p.buttons a { width: 100px; }
.voor #subcontent p.buttons a { margin: 0; }

#footer { position: relative; height: 80px; }
#footer ul { margin: 0; padding: 0; }
#footer #partners { position: absolute; top: 13px; left: 0; }
#footer #partners li { overflow: hidden; float: left; height: 26px; list-style-type: none; margin-left: 56px; }
#footer #partners #af { margin-left: 48px; }
#footer #partners li span { display: block; height: 26px; }
#footer span { height: 26px; background: url("sprite.png"); }
#footer #af span, #af, #af a { width: 21px; }
#footer #kwf span, #kwf, #kwf a { width: 62px; background-position: -21px 0; }
#footer #nhs span, #nhs, #nhs a { width: 124px; background-position: -83px 0; }
#footer #zonmw span, #zonmw, #zonmw a { width: 87px; background-position: -207px 0; }
#footer #af a:hover span { background-position: 0 -26px; }
#footer #kwf a:hover span { background-position: -21px -26px; }
#footer #nhs a:hover span { background-position: -83px -26px; }
#footer #zonmw a:hover span { background-position: -207px -26px; }
#footer p { position: absolute; top: 9px; font-size: 0.8em; letter-spacing: -0.01em; line-height: 1.2em; }
#footer #meerinfo { left: 545px; width: 195px; top: 4px; }
#footer #copyright { left: 765px; }
#footer #voorwaarden { left: 885px; }

#html-advies { width: 600px; }
#html-advies h2 { margin: 30px 0 0 0; font-size: 1.25em; }

input.sizeS { width: 90px; }
input.sizeM, input.sizeL { width: 180px; }

.js .aanmelden .eronder { display: none; position: absolute; left: 657px; top: 65px; width: 263px; }
.eronder h3 { color: #EFAA2E; }
.aanmelden1 > p { width: 500px; }
.aanmelden1 .label, .aanmelden3 .label, .reporter-signup .part1 .label { float: left; width: 100px; }
.aanmelden1 .label label
, .aanmelden3 .label label
, .reporter-signup .part1 .label label { display: block; margin-top: 2px; }
.aanmelden1 .input, .aanmelden1 div.error, .reporter-signup .part1 .error { margin-left: 100px; }
.aanmelden1 .part { float: left; width: 300px; margin-bottom: 20px; }
#vraag-idool { position: relative; min-height: 73px; }
#vraag-idool .label { float: none; width: auto; }
#vraag-idool .input, #vraag-idool .error { margin-left: 0; }
#vraag-idool .thumb { position: absolute; left: 155px; top: 0; width: 76px; height: 73px; background: url("bnr_thumbs.png") no-repeat 0 -73px; }
#vraag-geslacht .input * { float: left; }
#vraag-geslacht .input br { display: none; }
#vraag-geslacht .input input { margin-right: 5px; }
#vraag-geslacht .input #geslacht1 { margin-left: 10px; }

.aanmelden3 .label { width: 380px; }
.aanmelden3 .input, .aanmelden3 .error { margin-left: 385px; }
.aanmelden3 select { width: 425px; }
#vraag-voorwaarden .label { width: 617px; }
#vraag-voorwaarden .label label { text-align: right; }
#vraag-voorwaarden .input, #vraag-voorwaarden div.error { margin-left: 622px; }
#vraag-voorwaarden .input label { visibility: hidden; }

.aanmelden .buttons, .reporter-signup .buttons { position: absolute; right: 20px; bottom: 20px; margin: 0; }
.aanmelden .buttons button
, .aanmelden .buttons a
, .reporter-signup .buttons button
, .reporter-signup .buttons a { margin: 0; float: right; }
.aanmelden .buttons .button, .reporter-signup .buttons .button { width: 145px; }

.aanmelden-bevestig p { margin: 10px 0; }

.aanmelden-afgerond .bevestiging { float: left; width: 264px; margin-right: 55px; }
.aanmelden-afgerond .reporter { float: left; position: relative; width: 263px; font-weight: bold; }
.aanmelden-afgerond .reporter h3 { color: #efaa2e; }
.aanmelden-afgerond .reporter .buttons { right: auto; bottom: auto; }

.reporter-signup .part { float: left; width: 319px; margin-bottom: 20px; }
.reporter-signup .part1 input { width: 190px; }
.reporter-signup #vraag-geboortedatum input { width: 80px; }
.reporter-signup .part2 { width: 318px; }
.reporter-signup .part3 { width: 263px; margin-bottom: 56px; }
.reporter-signup .part3 textarea { width: 259px; height: 80px; }
#vraag-actievoorwaarden .label { visibility: hidden; }
#vraag-actievoorwaarden .input input { float: right; }
.reporter-signup #main .correctMe > p { width: 500px; }
.reporter-signup #main .correctMe > p.buttons { width: auto; }

.error { clear: both; color: #f00; }
.error strong { font-weight: normal; }

.rounded { overflow: hidden; position: relative; padding: 1px 20px; background: #fff; }
.rounded .ne, .rounded .se, .rounded .sw, .rounded .nw { position: absolute; width: 8px; height: 8px; margin: 0; padding: 0; background: url("sprite24.png"); }
.rounded .nw { left: 0; top: 0; }
.rounded .ne { right: 0; top: 0; background-position: -8px 0; }
.rounded .se { right: 0; bottom: 0; background-position: -8px -8px; }
.rounded .sw { left: 0; bottom: 0; background-position: 0 -8px; }
.rounded .rounded { padding: 1px 8px; background: #b1b1b1; }
.rounded .rounded .nw { left: 0; top: 0; background-position: -16px 0; }
.rounded .rounded .ne { right: 0; top: 0; background-position: -24px 0; }
.rounded .rounded .se { right: 0; bottom: 0; background-position: -24px -8px; }
.rounded .rounded .sw { left: 0; bottom: 0; background-position: -16px -8px; }

.popup .rounded { margin: 20px; }

.buttons { overflow: hidden; }
.buttons button { border: 0; background: transparent; margin-right: 10px; }
.buttons a, .buttons button { float: left; margin-right: 10px; cursor: pointer; }
.buttons a, .buttons .button {
  position: relative; height: 20px; padding: 0 10px; line-height: 20px; letter-spacing: -0.02em; font-size: 0.85em; font-weight: bold;
  text-align: center; text-transform: uppercase; text-decoration: none; color: #fff; background: #efaa2e; cursor: pointer;
}
.buttons .ne, .buttons .se, .buttons .sw, .buttons .nw { width: 4px; height: 4px; }
.buttons .nw { left: 0; top: 0; background-position: -45px 0; }
.buttons .ne { right: 0; top: 0; background-position: -49px 0; }
.buttons .se { right: 0; bottom: 0; background-position: -49px -4px; }
.buttons .sw { left: 0; bottom: 0; background-position: -45px -4px; }

.browse { position: relative; height: 13px; }
.browse a { position: absolute; width: 125px; line-height: 13px; text-decoration: none; }
.browse span { float: left; width: 7px; height: 13px; margin: 0 5px 0 0; background: url("sprite24.png") -60px 0; }
.browse .older { right: 0; text-align: right; }
.browse .older span { float: right; margin: 0 0 0 5px; background-position: -53px 0; }

.altImg { overflow: hidden; position: relative; display: block; white-space: nowrap; }
.altImg span { position: absolute; }

.actieinfo .foto { float: right; margin: 0 20px 20px 60px; }
.actieinfo #main .buttons a, #main .actieinfo .buttons a { width: 145px; }

.ecard #main .rounded > p, #main .ecard > p  { float: left; margin-top: 0; width: 582px; }
.ecard form, .tips form { margin-left: 637px; width: 263px; }
.ecard input, .ecard textarea, .tips input, .tips textarea { width: 259px; }
.ecard textarea, .tips textarea { height: 60px; }
.ecard #thumbs { overflow: hidden; float: left; width: 590px; }
.ecard #thumbs a { display: block; float: left; margin-left: 4px; }
.ecard #thumbs a:first-child { margin-left: 0; }
.ecard #thumbs a.selected { background: url("sprite.png") -294px 0; }
.ecard #thumbs img { display: block; }
#preview img { display: block; }
.ecard-preview #main > div { min-height: 1298px; }

.afleiding #spel { float: left; width: 303px; height: 240px; margin: 0 40px 10px 0; }

.redenen ol { float: left; width: 400px; margin-top: 0; }
.redenen ol.part2 { float: right; }
.redenen p.buttons { clear: both; }

.reporter h2 { margin-bottom: 10px; font-size: 1.25em; }
.reporter .intro { float: left; width: 260px; }
.reporter .intro .rounded { padding: 0; }
.reporter .intro .rounded img { display: block; }
.reporter .content { margin-left: 320px; margin-bottom: 20px; }
.reporter input, .reporter textarea { width: 576px; }
.reporter textarea { height: 60px; }
.reporter .content .rounded, .tips .content .rounded { margin: 10px 0; padding-bottom: 16px; }
.reporter .content .rounded p, .tips .content .rounded p { margin: 8px 0; }
.reporter .content .self { background: #efaa2e; }
.reporter .content .self h3 { color: #fff; }
.reporter .content .rounded .time, .tips .content .rounded .time
  { position: absolute; bottom: 4px; left: 8px; margin: 0; line-height: 14px; }
.reporter .content .rounded .time span, .tips .content .rounded .time span
  { float: left; width: 13px; height: 14px; margin: 0 3px 0 0; background: url("sprite24.png") -32px 0; }

.tips h2 { margin-bottom: 0; font-size: 1.25em; }
.tips .content h2:first-child { margin: 20px 0 30px 0; font-size: 2.4em; }
.tips .content h3 { color: #fff; }
.tips .content { float: left; margin-top: 0; width: 582px; }

input.datum { float: left; }
a.calendar { float: left; display: block; overflow: hidden; width: 14px; height: 14px; margin: 0 4px; }
a.calendar > span { position: relative; }
a.calendar span span { display: block; width: 14px; height: 14px; background: url("sprite.png") -487px 0; cursor: pointer; }

.picker { clear: both; position: relative; padding: 4px; width: 175px; font-size: 0.9em; background: #EFAA2E; }
.picker table, .picker .nav { width: 175px; }
.picker td, .picker th { padding: 0; text-align: center; }
.picker td { background: #EFAA2E; width: 14%; }
.picker td a { display: block; height: 16px; text-decoration: none; background: #fff; }
.picker td a:hover, .picker td a:focus { font-weight: bold; background: #eee; }
.picker .nav select { margin: 0 2px; vertical-align: middle; border: 0; }
.picker .nav a { padding: 0 2px; line-height: 1.6em; }
.picker .nav .close { position: absolute; top: 4px; right: 4px; padding: 0; width: 14px; line-height: 14px; text-align: center; font-weight: bold; text-decoration: none; color: #fff; background: #c00; }

h2.reporter { margin-bottom: 10px; }