/* ------------------------------------------------- */ /* COMMON STYLES /* ------------------------------------------------- */ body { background:#FFE013; margin:0; padding:0; font:75%/140% 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#111; } h1 { } h2 { font-weight:bold; font-size:1.6em; } h3 { font-weight:bold; font-size:1.1em; margin:0 0 .3em 0; } h4 { } h5 { } p { margin:0 0 1.2em 0; } a span { display:none; } input { outline:none; } div.error { overflow:hidden; padding-top:4px; width:317px; height:28px; background:url(../img/sprites.png) no-repeat -160px -130px; } div.error span { display:block; position:relative; width:301px; height:24px; line-height:24px; padding:0 8px; color:#FFF; font-size:0.9em; } #flash-success { float:left; margin-top:10px; font-size:1em; font-weight:bold; text-align:center; margin-left:35px; width:635px; padding:8px; background:#6EC626; color:#FFF; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; } /* ------------------------------------------------- */ /* LAY-OUT RULES /* ------------------------------------------------- */ #inner-wrapper { width:960px; margin:0 auto; } #footer { background:url(../img/bg-footer.png) no-repeat top center; } #footer #footer-content { position:relative; width:960px; margin:0 auto; } #footer #footer-content a { position:absolute; top:74px; left:135px; width:120px; height:30px; } /* ------------------------------------------------- */ /* HEADER & MENU & SUB-MENU RULES /* ------------------------------------------------- */ #header { float:left; position:relative; width:960px; } #header a#logo { float:left; display:block; width:120px; height:115px; background:url(../img/sprites.png) no-repeat 0 0; margin-left:135px; } #header a#z-staffing-link { position:absolute; top:118px; left:135px; color:#111; text-decoration:none; letter-spacing:1px; } #header ul#menu { float:left; height:34px; list-style:none; margin:53px 0 0 170px; padding:0; } #header ul#menu li { display:inline; list-style:none; margin:0; padding:0; } #header ul#menu li a { display:block; float:left; width:125px; height:34px; background:url(../img/sprites.png) no-repeat -160px -47px; margin-right:10px; } #header ul#menu li a:hover { background-position:-160px -81px; } #header ul#menu #btn-0 { display:none; } #header ul#menu #btn-1 a { width:125px; background-position:-160px -13px; } #header ul#menu #btn-2 a { width:89px; background-position:-285px -13px; } #header ul#menu #btn-3 a { width:149px; background-position:-405px -13px; } #header ul#menu #btn-4 a { width:104px; background-position:-554px -13px; } #header ul#menu #btn-1 a:hover { background-position:-160px -47px; } #header ul#menu #btn-2 a:hover { background-position:-285px -47px; } #header ul#menu #btn-3 a:hover { background-position:-405px -47px; } #header ul#menu #btn-4 a:hover { background-position:-554px -47px; } #header ul#menu #btn-1 a.current { background-position:-160px -81px; } #header ul#menu #btn-2 a.current { background-position:-285px -81px; } #header ul#menu #btn-3 a.current { background-position:-405px -81px; } #header ul#menu #btn-4 a.current { background-position:-554px -81px; } /* ------------------------------------------------- */ /* CONTENT STYLES /* ------------------------------------------------- */ #content { float:left; position:relative; width:960px; height:450px; overflow:hidden; margin-top:20px; } #content #scrollable { position:relative; width:960px; height:450px; overflow:hidden; } #content #scrollable div.items { position:absolute; width:20000em; height:450px; } #content #scrollable div.items div.item { float:left; width:960px; height:450px; } #content a.page-nav { position:absolute; display:block; cursor:pointer; width:25px; height:69px; top:50%; left:0; margin-top:-35px; background:url(../img/sprites.png) no-repeat 0 0; z-index:10; } #content a.prev { left:0; background:url(../img/sprites.png) no-repeat -679px 0; } #content a.disabled { display:none; } #content a.prev:hover { background:url(../img/sprites.png) no-repeat -679px -75px; } #content a.next { left:921px !important; background:url(../img/sprites.png) no-repeat -704px 0; } #content a.next:hover { background:url(../img/sprites.png) no-repeat -704px -75px; } #content div.side-content { float:left; width:385px; } #content div.main-content { float:left; width:575px; } /* HOME STYLES ---------------------- */ div.home h1 { display:block; text-indent:-1000em; background: url(../img/h1-doe-mee-met-de-grote-z-strijd.png) no-repeat top left; width:960px; height:260px; } div.home p { padding:10px 150px 0 385px; font-size:1.2em; line-height:1.4em; } /* PRIJZEN STYLES ------------------- */ div.prijzen div.side-content { float:left; width:300px !important; padding-left:85px; } div.prijzen div.side-content ul { list-style:none; margin:0; padding:0; width:249px; } div.prijzen div.side-content ul li { list-style:none; margin:0; padding:0; } div.prijzen div.side-content ul li a.btn { display:block; width:249px; height:118px; background:url(../img/sprites-prijzen.png) no-repeat 0 0; } div.prijzen div.side-content { position:relative; } div.prijzen div.side-content ul li#btn-prijs-1 a.btn { height:118px; background:url(../img/sprites-prijzen.png) no-repeat 0 0; } div.prijzen div.side-content ul li#btn-prijs-1 a.btn:hover { height:118px; background:url(../img/sprites-prijzen.png) no-repeat -249px 0; } div.prijzen div.side-content ul li#btn-prijs-2 a.btn { height:118px; background:url(../img/sprites-prijzen.png) no-repeat 0 -118px; } div.prijzen div.side-content ul li#btn-prijs-2 a.btn:hover { height:118px; background:url(../img/sprites-prijzen.png) no-repeat -249px -118px; } div.prijzen div.side-content ul li#btn-prijs-3 a.btn { height:118px; background:url(../img/sprites-prijzen.png) no-repeat 0 -236px; } div.prijzen div.side-content ul li#btn-prijs-3 a.btn:hover { height:81px; background:url(../img/sprites-prijzen.png) no-repeat -249px -236px; } div.prijzen div.side-content div.flap { position:absolute; display:none; top:0; left:332px; width:306px; height:169px; background:url(../img/prijs-flappen.png) no-repeat 0 0; color:#FFF; } div.prijzen div.side-content div.flap p { width:134px; margin:10px; font-size:10px; line-height:12px; padding:0 8px; } div.prijzen div.side-content div.flap p a { color:#FFF; } div.prijzen div.side-content #flap-prijs-1 { top:43px; background-position:0 0; } div.prijzen div.side-content #flap-prijs-2 { top:143px; background-position:0 -169px; } div.prijzen div.side-content #flap-prijs-3 { top:143px; background-position:0 -338px; } div.prijzen div.main-content h1 { display:block; text-indent:-1000em; width:575px; height:275px; background:url(../img/h1-wint-jouw-slogan-voor-zoffice-een-grand-prix.png) no-repeat; } div.prijzen div.main-content p { padding:14px 90px 0 46px; font-size:1.3em; line-height:1.3em; } /* DEELNEMEN STYLES -------------- */ div.deelnemen { float:left; padding-left:116px; width:844px; } div.deelnemen h1 { display:block; text-indent:-1000em; width:844px; height:110px; background: url(../img/h1-zoffice-jouw-slogan.png) no-repeat scroll top left; } div.deelnemen ul { float:left; list-style:none; margin:0; padding:0; width:720px; } div.deelnemen ul li { float:left; position:relative; width:317px; list-style:none; margin:0 0 8px 0; padding:0 8px 0 35px; } div.deelnemen ul li.right { float:right; padding:0 35px 0 8px; } div.deelnemen ul li label { display:block; background:url(../img/bg-deelnemen-input.png) no-repeat top left; width:297px; height:32px; line-height:32px; color:#818080; padding:0 10px; } div.deelnemen ul li input.field { position:absolute; top:0; left:35px; width:307px; height:32px; background:transparent; border:none; color:#818080; padding-left:10px; } div.deelnemen ul li.right input { left:8px; } div.deelnemen div#checkbox { float:left; width:720px; padding-left:35px; } div.deelnemen div#checkbox a { color:#111; } div.deelnemen ul li#slogan-box { float:left; width:654px; list-style:none; margin:0; padding:33px; background:url(../img/bg-deelnemen-slogan.png) no-repeat; } div.deelnemen ul li#slogan-box div.error { position:absolute; top:65px; } div.deelnemen ul li#slogan-box label { float:left; display:block; position:relative; width:497px; height:32px; font-size:1.2em; color:#818080; line-height:32px; padding:0 10px; background:transparent url(../img/bg-input-slogan.png) no-repeat top left; border:none; } div.deelnemen ul li#slogan-box input { position:absolute; top:33px; left:33px; width:507px; height:32px; background:transparent; border:none; z-index:2; padding-left:10px; font-size:1.2em; } div.deelnemen ul li#slogan-box button { float:right; background:transparent url(../img/bg-button.png) no-repeat top left; width:115px; height:32px; border:none; } div.deelnemen ul li#slogan-box button span { display:none; } /* REGLEMENT STYLES -------------- */ div.reglement h1 { display:block; text-indent:-1000em; margin-left:105px; background:url(../img/h1-de-z-strijd-is-een-wedstrijd-dus-hier-zijn-de-regels.png) no-repeat top left; width:560px; height:140px; } div.reglement div.side-content { float:left; width:220px !important; padding-left:75px; padding-top:143px; } div.reglement div.main-content { float:left; width:665px !important; } div.reglement div.main-content div.scrollpane { margin-right:95px; width:570px; height:310px; overflow:hidden; } div.reglement div.main-content h5 { padding-left:23px; font-weight:bold; } div.reglement div.main-content p { padding-left:23px; } /* OVER STYLES ------------------- */ div.over div.side-content { float:left; width:310px !important; padding-left:75px; } div.over div.side-content h2 { display:block; text-indent:-1000em; width:310px; height:115px; background:url(../img/h2-ontdek-onze-pijlers.png) no-repeat; } div.over div.side-content ul { list-style:none; margin:0; padding:0; } div.over div.side-content ul li { float:left; color:#FFF; font-size:1.1em; line-height:1.4em; list-style:none; margin:0 0 10px 0; padding:6px; background:#000; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; } div.over div.main-content h1 { display:block; text-indent:-1000em; width:575px; height:125px; background:url(../img/h1-zoffice-niet-alleen-omdat-de-wedstrijd-zo-tof-is.png) no-repeat; } div.over div.main-content p { padding:32px 95px 0 43px; font-size:1.3em; line-height:1.3em; } /* ------------------------------------------------- */ /* jScrollPane STYLES /* ------------------------------------------------- */ .jScrollPaneContainer{position:relative;overflow:hidden;z-index:1;} .jScrollPaneTrack{position:absolute;cursor:pointer;right:0;top:0;height:100%;background:#ffe642;} .jScrollPaneDrag{position:absolute;background:#000;cursor:pointer;overflow:hidden;} .jScrollPaneDragTop{position:absolute;top:0;left:0;overflow:hidden;} .jScrollPaneDragBottom{position:absolute;bottom:0;left:0;overflow:hidden;} a.jScrollArrowUp{display:block;position:absolute;z-index:1;top:0;right:0;text-indent:-2000px;overflow:hidden;/*background-color:#666;*/ height:9px;} a.jScrollArrowUp:hover{/*background-color:#f60;*/} a.jScrollArrowDown{display:block;position:absolute;z-index:1;bottom:0;right:0;text-indent:-2000px;overflow:hidden;/*background-color:#666;*/ height:9px;} a.jScrollArrowDown:hover{/*background-color:#f60;*/} a.jScrollActiveArrowButton,a.jScrollActiveArrowButton:hover{/*background-color:#f00;*/} /* ------------------------------------------------- */ /* FOOTER STYLES /* ------------------------------------------------- */ /* ------------------------------------------------- /* Sticky Footer Solution /* by Steve Hatcher /* http://stever.ca /* http://www.cssstickyfooter.com /* ------------------------------------------------- */ html, body, #wrapper {height: 100%;} body > #wrapper { height:auto; min-height:100%; } #inner-wrapper { padding-bottom:200px; } /* must be same height as the footer */ #footer { position:relative; margin-top:-200px; height:200px; clear:both; } /* CLEAR FIX by Jeff Starr */ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */