html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,a:hover,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;text-decoration:none}:focus{outline:0}body{line-height:1;color:#000;background:#fff}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:400}h1,h2,h3,h4,h5,h6{font-weight:400}img{vertical-align:text-bottom}a img{border:0}address{font-style:normal;} @clr-wit: #fff; @clr-gry: #999; @clr-blk: #000; @clr-red: #f00; @clr-fad: #eaeaea; @clr-foc: #ffffe1; @fnt-def: normal 15px 'Georgia'; @fnt-smb: bold 11px 'Georgia'; @fnt-big: normal 28px 'Univers 45 Light', 'Arial'; @fnt-nav: normal 22px 'Univers 45 Light', 'Arial'; @fnt-arw: normal 20px 'Times New Roman'; @img-bgr: url('/_images/wervelenderwijs.gif') no-repeat fixed; @img-val: #fff url('/_images/validate.png') 379px 24px no-repeat; html { height: 100%; overflow-y: scroll; } body { font: @fnt-def; color: @clr-blk; width: 100%; background: @img-bgr; } p.hclear { clear: both; padding: 125px 0 0 0; } a { color: @clr-gry; font: @fnt-def; text-decoration: none; } a:hover { color: @clr-red; text-decoration: none; } #container { width: 800px; margin: 25px 0 0 210px; } h1 { font: @fnt-big; text-transform: uppercase; padding: 0 0 10px 0;} h2 { font: @fnt-nav; margin: 8px 0 5px 0; } .home { position: absolute; left: 0; top: 0; } .home a { padding: 0 200px 60px 0; } .home a span { display: none; } .nav { float: left; width: 140px; } .nav li { padding: 10px 0 0 0; } .nav li a { color: @clr-gry; font: @fnt-nav; } .nav li a:hover, ul.nav li a.active { color: @clr-blk; } .nav li a span { color: @clr-blk; font: @fnt-arw; } .content { float: left; width: 660px; padding: 2px 0 30px 0; line-height: 24px; } .content p { padding: 7px 0 7px 0; } .content ul li { list-style-type: circle; list-style-position: outside; margin: 0 0 0 16px; } .smbl { font: @fnt-smb; } #form ol { list-style: none; } #form ol li { line-height: 40px; } #form label { width: 80px; display: inline-block; vertical-align: top; } #form fieldset li input { background: @img-val; } #form fieldset li textarea { margin-top: 9px; } #form fieldset li input, #form fieldset li textarea { font: @fnt-def; display: inline-block; width: 371px; border: 1px solid @clr-gry; padding: 3px 26px 3px 3px; -moz-transition: background-color 1s ease; -webkit-transition: background-color 1s ease; -o-transition: background-color 1s ease; transition: background-color 1s ease; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #form input::-webkit-input-placeholder, #form input:-moz-placeholder { color: @clr-fad; } #form li input.error { border: 1px solid @clr-red; background-color: @clr-fad;background-position: 379px 3px; outline: none; } #form li input.required { background-color: @clr-wit; background-position: 379px -29px; } #form li input.valid { background-color: @clr-wit; background-position: 379px -61px; } #form fieldset li input:required:valid { background-color: @clr-wit; background-position: 379px -61px; } #form input:focus, #form textarea:focus, #form input:required:focus { background: @clr-foc; } #form input.button { margin: 20px 0 50px 83px; width: 52px; cursor: pointer; } #form fieldset li input[type="submit"] { border: 0; background: @clr-gry; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin: 10px 0 15px 85px; cursor: pointer; padding: 7px 20px 7px 20px; width: auto; font: @fnt-def; color: @clr-blk; outline: none; } #form fieldset li input[type="submit"]:hover { background: @clr-blk; color: @clr-wit; } .footer { margin: 0 0 0 129px; } .footer li { float: left; color: @clr-gry; padding: 0 10px 0 10px; margin: 0 0 30px 0; border-left: 1px solid @clr-gry; } .footer li:first-child { border-left: 0; }