/* ------------------------------------------------- */ /* @font-face declarations /* ------------------------------------------------- */ @font-face { font-family: 'RockwellLightRegular'; src: url('rockwell_light-webfont.eot'); src: local('Rockwell Light'), local('Rockwell-Light'), url('rockwell_light-webfont.woff') format('woff'), url('rockwell_light-webfont.ttf') format('truetype'), url('rockwell_light-webfont.svg#webfontUADi0A1B') format('svg'); font-weight: normal; font-style: normal; } /* ------------------------------------------------- */ /* COMMON STYLES /* ------------------------------------------------- */ html, body { overflow:hidden; height:100%; } body { padding:0; margin:0; font:12px/18px Helvetica, Arial, sans-serif; color:#111; } h1 { font:24px/32px 'RockwellLightRegular','Times New Roman', Times, serif; color:#111; text-transform:uppercase; } h2 { font:15px/20px 'RockwellLightRegular','Times New Roman', Times, serif; color:#111; text-transform:uppercase; } img { display:block; } #wrapper { position:relative; } #grid-navigation a { position:fixed; display:block; width:66px; height:66px; background:url(../img/bg-grid-navigatie.png) no-repeat; cursor:pointer; z-index:100; } #grid-navigation a span { display:none; } #grid-navigation a.disabled { display:none; } #grid-navigation a#move-up { left:50%; top:0; margin-left:-33px; background-position:-66px 0; } #grid-navigation a#move-up:hover { left:50%; top:0; margin-left:-33px; background-position:0 0; } #grid-navigation a#move-right { right:0; top:50%; margin-top:-33px; background-position:-66px -132px; } #grid-navigation a#move-right:hover { right:0; top:50%; margin-top:-33px; background-position:0 -132px; } #grid-navigation a#move-down { left:50%; bottom:0; margin-left:-33px; background-position:-66px -198px; } #grid-navigation a#move-down:hover { left:50%; bottom:0; margin-left:-33px; background-position:0 -198px; } #grid-navigation a#move-left { left:0; top:50%; margin-top:-33px; background-position:-66px -66px; } #grid-navigation a#move-left:hover { left:0; top:50%; margin-top:-33px; background-position:0 -66px; } div.page { position:absolute; display:none; } div.page div.content-wrapper { position:absolute; top:50%; left:50%; width:960px; height:600px; margin-left:-480px; margin-top:-300px; } .jScrollPaneContainer { position:relative;overflow:hidden;z-index:1; } .jScrollPaneTrack { position:absolute;cursor:pointer; right:10px; top:0; height:100%; } .jScrollPaneDrag { position:absolute;background:#DDD;cursor:pointer;overflow:hidden; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } .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;height:9px; } a.jScrollArrowUp:hover { } a.jScrollArrowDown { display:block;position:absolute;z-index:1;bottom:0;right:0;text-indent:-2000px;overflow:hidden;height:9px; } a.jScrollArrowDown:hover { } a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover { } /* ------------------------------------------------- */ /* HEADER STYLES /* ------------------------------------------------- */ div.header { padding:0 0 0 36px; float:left; width:924px; height:115px; position:relative; z-index:20; } div.header img { float:left; margin-right:14px; } div.header ul { list-style:none; padding:0; margin:30px 0 0 0; } div.header ul li { float:left; display:inline; list-style:none; padding:0; margin:0; font:14px/15px 'RockwellLightRegular','Times New Roman', Times, serif; text-transform:uppercase; } div.header ul li.subnav { position:relative; padding:8px; cursor:pointer; } div.header ul li.subnav:hover { background:#FFE50C; box-shadow:2px 2px 2px #666; -moz-box-shadow:2px 2px 2px #666; -webkit-box-shadow:2px 2px 2px #666; } div.header ul li.subnav:hover ul { display:block; } div.header ul li.subnav.current { background:#000; color:#FFF; } div.header ul li.subnav.current:hover { background:#FFE50C; color:#000; } div.header ul li.subnav.current:hover ul li a { background:#FFE50C; color:#000; } div.header ul li.subnav.current:hover ul li a:hover { background:#000; color:#FFF; } div.header ul li a { display:block; color:#000; text-decoration:none; padding:8px; white-space:nowrap; } div.header ul li a:hover { background:#FFE50C; } div.header ul li.current a { background:#000; color:#FFF; } div.header ul li ul { position:absolute; top:0; left:0; width:300px; display:none; } div.header ul li ul li { float:left; clear:both; box-shadow:2px 2px 2px #666; -moz-box-shadow:2px 2px 2px #666; -webkit-box-shadow:2px 2px 2px #666; } div.header ul li ul li a { background:#FFE50C; } div.header ul li ul li a:hover { background:#000; color:#FFF; } div.content { float:left; width:888px; padding:0 36px; } div.content div.col { float:left; width:280px; } div.content div.span-2 { float:left; width:580px; } div.content div.last { float:right; } div.content div.push-1 { margin-left:304px; } div.content div.push-2 { margin-left:608px; } div.content div.margin { margin-right:24px !important; } div.content div.yellow { background:#FFE50C; } div.content div.black { background:transparent url(../img/bg-introductie.png); color:#FFF; } div.content div.full-height { height:485px; } div.content div.font-big { font-size:13px; } div.content div.body { padding:20px; } div.content div.body h1 { margin-bottom:0; } div.content div.body p { margin-bottom:20px; } div.content div.body p.first { margin-top:0px; } div.content div.body p.last { margin-bottom:0px; } div.content div.body ul { list-style:none; margin:8px 0 0 0; } div.content div.body ul li { margin:0 0 4px 0; background:url(../img/bullet-arrow.gif) no-repeat 0 6px; padding-left:12px; } /* ------------------------------------------------- */ /* HOME STYLES /* ------------------------------------------------- */ #home div.content-wrapper { background:url(../img/bg-home.jpg) no-repeat 0 0; } #home div.content { position:relative; z-index:10; } #home div.slideshow { position:absolute; top:0; left:0; width:960px; height:600px; overflow:hidden; } #home div.slideshow img { position:absolute; z-index:-1; } #home div.content { margin-top:334px; } #home #introduction { position:relative; margin-left:608px; color:#FFF; background:#FFE50C; padding:20px; height:190px; width:240px; background:url(../img/bg-introductie.png) no-repeat; } #home #introduction a.button { position:absolute; display:block; background:#FFF; color:#000; bottom:0; right:20px; font:12px/22px 'RockwellLightRegular','Times New Roman', Times, serif; text-decoration:none; padding:0 7px; } #home #introduction a.button:hover { background:#000; color:#FFF; } ul.quick-links { list-style:none; padding:0; margin:0; } ul.quick-links li { float:left; list-style:none; padding:0; margin:0; } ul.quick-links li a { float:left; display:block; width:240px; font:21px/49px 'RockwellLightRegular','Times New Roman', Times, serif; margin:0 0 2px 0; background:#FFE50C; color:#000; text-decoration:none; padding:0 20px; } ul.quick-links li a:hover { background:#000; color:#FFF; } ul.quick-links li.current a { background:#000; color:#FFF; } ul.quick-links li.social { position:relative; width:240px; font:21px/49px 'RockwellLightRegular','Times New Roman', Times, serif; margin:0 0 2px 0; background:#000; color:#FFF; padding:0 20px; } ul.quick-links li.social a.share { position:absolute; top:0; width:45px; height:49px; background:url(../img/social-media-icons.png) no-repeat; margin:0; padding:0; } ul.quick-links li.social a.share span { display:none; } ul.quick-links li.social a.facebook { right:5px; background-position:-45px 0; } ul.quick-links li.social a.twitter { right:50px; } #home #news-channel { float:left; position:relative; width:580px; height:151px; background:#FFE50C; padding:0; margin:0; } #home #news-channel a.navi { position:absolute; display:block; top:0; width:27px; height:22px; background:url(../img/nav-scrollable.png) no-repeat; cursor:pointer; } #home #news-channel a.meer-nieuws { position:absolute; display:block; background:#000; color:#FFF; top:-35px; right:0; font:15px/35px 'RockwellLightRegular','Times New Roman', Times, serif; text-decoration:none; padding:0 10px; } #home #news-channel a.meer-nieuws:hover { background:#FFE50C; color:#000; } #home #news-channel a.disabled { display:none; } #home #news-channel a.next { right:-13px; top:53px; } #home #news-channel a.prev { right:-13px; top:75px; background-position:0 -22px; } #home #news-channel a.next:hover { right:-13px; top:53px; background-position:-27px 0; } #home #news-channel a.prev:hover { right:-13px; top:75px; background-position:-27px -22px; } #home #news-channel div.scrollable { position:relative; width:580px; height:151px; overflow:hidden; } #home #news-channel div.scrollable div.items { position:absolute; width:20000em; } #home #news-channel div.scrollable div.items div.item { float:left; width:540px; height:117px; padding:17px 20px; } #home #news-channel div.scrollable div.items div.item div.news-date { float:left; position:relative; width:90px; height:117px; font:14px/16px 'RockwellLightRegular','Times New Roman', Times, serif; } #home #news-channel div.scrollable div.items div.item div.news-date h3 { float:left; font:20px/22px 'RockwellLightRegular','Times New Roman', Times, serif; border-bottom:4px solid #FFF; padding:0 0 2px 0; margin:0 0 4px 0; text-transform:uppercase; } #home #news-channel div.scrollable div.items div.item div.news-date a { position:absolute; bottom:0; width:16px; height:16px; display:block; background:url(../img/social-media-logos.png) no-repeat; } #home #news-channel div.scrollable div.items div.item div.news-date a span { display:none; } #home #news-channel div.scrollable div.items div.item div.news-date a.facebook { background-position:0 0; left:0; } #home #news-channel div.scrollable div.items div.item div.news-date a.twitter { background-position:-16px 0; left:20px; } #home #news-channel div.scrollable div.items div.item div.news-date a.linkedin { background-position:-32px 0; left:40px; } #home #news-channel div.scrollable div.items div.item div.news-picture { float:left; position:relative; width:175px; height:117px; } #home #news-channel div.scrollable div.items div.item div.news-picture { position:relative; z-index:5; } #home #news-channel div.scrollable div.items div.item div.news-picture a.play-btn { position:absolute; top:0; left:0; text-decoration:none; display:block; width:175px; height:115px; z-index:10; background:url(../img/play-btn.png) no-repeat; } #home #news-channel div.scrollable div.items div.item div.news-content { float:left; width:255px; height:115px; padding:2px 0 0 20px; overflow:hidden; } #home #news-channel div.scrollable div.items div.item div.news-content h5 { font-size:12px; font-weight:bold; margin-bottom:8px; } #home #news-channel div.scrollable div.items div.item div.news-content h5 a { color:#000; text-decoration:none; } #home #news-channel div.scrollable div.items div.item div.news-content h5 a:hover { text-decoration:underline; } #home #news-channel div.scrollable div.items div.item div.news-content p { font-size:12px; } #news-channel a.read-more-news { display:block; float:right; text-transform:uppercase; font:12px/12px 'RockwellLightRegular','Times New Roman', Times, serif; color:#000; text-decoration:none; } #news-channel a.read-more-news:hover { text-decoration:underline; } #nieuws #news-channel { float:left; position:relative; width:580px; height:485px; padding:0; margin:0 0 0 304px; } #nieuws #news-channel a.navi { position:absolute; display:block; width:22px; height:27px; background:url(../img/nav-scrollable-vertical.png) no-repeat; cursor:pointer; } #nieuws #news-channel a.disabled { display:none; } #nieuws #news-channel a.prev { left:290px; bottom:-15px; } #nieuws #news-channel a.next { left:312px; bottom:-15px; background-position:-22px 0; } #nieuws #news-channel a.prev:hover { background-position:0 -27px; } #nieuws #news-channel a.next:hover { background-position:-22px -27px; } #nieuws #news-channel div.scrollable { position:relative; width:580px; height:485px; overflow:hidden; } #nieuws #news-channel div.scrollable div.items { position:absolute; width:580px; } #nieuws #news-channel div.scrollable div.items div.item { float:left; background:#FFE50C; width:540px; height:117px; padding:17px 20px; margin-bottom:20px; } #nieuws #news-channel div.scrollable div.items div.item div.news-date { float:left; position:relative; width:90px; height:117px; font:14px/16px 'RockwellLightRegular','Times New Roman', Times, serif; } #nieuws #news-channel div.scrollable div.items div.item div.news-date h3 { float:left; font:20px/22px 'RockwellLightRegular','Times New Roman', Times, serif; border-bottom:4px solid #FFF; padding:0 0 2px 0; margin:0 0 4px 0; text-transform:uppercase; } #nieuws #news-channel div.scrollable div.items div.item div.news-date a { position:absolute; bottom:0; width:16px; height:16px; display:block; background:url(../img/social-media-logos.png) no-repeat; } #nieuws #news-channel div.scrollable div.items div.item div.news-date a span { display:none; } #nieuws #news-channel div.scrollable div.items div.item div.news-date a.facebook { background-position:0 0; left:0; } #nieuws #news-channel div.scrollable div.items div.item div.news-date a.twitter { background-position:-16px 0; left:20px; } #nieuws #news-channel div.scrollable div.items div.item div.news-date a.linkedin { background-position:-32px 0; left:40px; } #nieuws #news-channel div.scrollable div.items div.item div.news-picture { float:left; position:relative; width:175px; height:117px; } #nieuws #news-channel div.scrollable div.items div.item div.news-picture { position:relative; z-index:5; } #nieuws #news-channel div.scrollable div.items div.item div.news-picture a.play-btn { position:absolute; top:0; left:0; text-decoration:none; display:block; width:175px; height:115px; z-index:10; background:url(../img/play-btn.png) no-repeat; } #nieuws #news-channel div.scrollable div.items div.item div.news-content { float:left; width:255px; height:115px; padding:2px 0 0 20px; overflow:hidden; } #nieuws #news-channel div.scrollable div.items div.item div.news-content h5 { font-size:12px; font-weight:bold; margin-bottom:8px; } #nieuws #news-channel div.scrollable div.items div.item div.news-content h5 a { color:#000; text-decoration:none; } #nieuws #news-channel div.scrollable div.items div.item div.news-content h5 a:hover { text-decoration:underline; } #nieuws #news-channel div.scrollable div.items div.item div.news-content p { font-size:12px; } img.next-philosophy-image { position:absolute; top:189px; left:197px; } #wie-nexzt-philosophy div.last div.scrollpane { height:440px; overflow:hidden; padding:0px 20px; } #wie-nexzt-mission div.content-wrapper { background:url(../img/bg-mission.jpg) no-repeat 0 0; overflow:hidden; } #wie-nexzt-mission div.content #nexzt-mission-introduction { margin-top:-19px; } #wie-nexzt-mission div.content #nexzt-mission-introduction h1 { color:#000; margin-bottom:10px; } #wie-nexzt-mission div.content #nexzt-mission-introduction p { margin-bottom:8px; } #wie-nexzt-mission div.content #nexzt-mission-quality { left:36px; } #wie-nexzt-mission div.content #nexzt-mission-health { left:340px; } #wie-nexzt-mission div.content #nexzt-mission-green { left:644px; } #wie-nexzt-mission div.yellow { height:265px; position:absolute; bottom:-205px; } #wie-nexzt-mission div.yellow h2 { margin-bottom:20px; cursor:pointer; } #wie-nexzt-mission div.yellow a.button { position:absolute; display:block; background:#000; color:#FFF; bottom:0; right:20px; font:12px/22px 'RockwellLightRegular','Times New Roman', Times, serif; text-decoration:none; padding:0 7px; } #wie-nexzt-mission div.yellow a.button:hover { background:#FFF; color:#000; } #wie-nexzt-mission div.yellow ul li { font-size:11px; line-height:16px; } #wie-methodiek ul { margin-bottom:20px; } img.next-philosophy-image { position:absolute; top:189px; left:197px; } #waarom-duurzaam-ondernemen p.first { margin-top:74px; } #waarom-duurzaam-hrm div.last { height:440px; overflow:hidden; padding:20px 0; } #waarom-duurzaam-hrm div.last div.scrollpane { height:440px; overflow:hidden; padding:0px 20px; } #waarom-people-profit-planet div.content-wrapper { background:url(../img/bg-people-profit-planet.jpg) no-repeat 0 0; overflow:hidden; } #waarom-people-profit-planet div.content #waarom-people-profit-planet-introduction { height:128px; overflow:hidden; padding:0px; margin-top:-19px; } #waarom-people-profit-planet div.content #waarom-people-profit-planet-introduction h1 { color:#000; margin-bottom:10px; } #waarom-people-profit-planet div.content #waarom-people-profit-planet-introduction p { margin-bottom:10px; } #waarom-people-profit-planet div.content #waarom-people-profit-planet-introduction div.scrollpane { height:128px; padding:0 20px 0 0; } #waarom-people-profit-planet div.yellow { height:250px; position:absolute; bottom:-175px;} #waarom-people-profit-planet div.content #waarom-people { left:36px; } #waarom-people-profit-planet div.content #waarom-planet { left:340px; } #waarom-people-profit-planet div.content #waarom-profit { left:644px; } #waarom-people-profit-planet div.yellow h2 { margin-bottom:20px; cursor:pointer; } #waarom-people-profit-planet div.yellow p { margin:10px 0 0 0; } #waarom-people-profit-planet div.yellow a.button { position:absolute; display:block; background:#000; color:#FFF; bottom:0; right:20px; font:12px/22px 'RockwellLightRegular','Times New Roman', Times, serif; text-decoration:none; padding:0 7px; } #waarom-people-profit-planet div.yellow a.button:hover { background:#FFF; color:#000; } #wat-bedrijven div.content-wrapper { background:url(../img/bg-bedrijven.jpg) no-repeat 0 0; } #wat-bedrijven div.col ul { margin-bottom:20px; } #wat-bedrijven div.col ul li { background:url(../img/bullet-arrow-white.gif) no-repeat 0 6px; } #wat-bedrijven div.last { height:440px; overflow:hidden; padding:20px 0; } #wat-bedrijven div.last div.scrollpane { height:440px; overflow:hidden; padding:0px 20px; } #wat-kandidaten div.content-wrapper { background:url(../img/bg-kandidaten.jpg) no-repeat 0 0; } #wat-health-safety div.content-wrapper { background:url(../img/bg-health.jpg) no-repeat 0 0; } #wat-quality div.content-wrapper { background:url(../img/bg-quality.jpg) no-repeat 0 0; } #wat-green-energy-environment div.content-wrapper { background:url(../img/bg-green.jpg) no-repeat 0 0; } #wat-health-safety div.last div.scrollpane, #wat-quality div.last div.scrollpane, #wat-green-energy-environment div.last div.scrollpane { height:440px; overflow:hidden; padding:0px 20px; } #vacatures #vacature-introductie { position:relative; height:485px; } #vacatures #vacature-introductie div { position:absolute; bottom:0; left:0; width:280px; } #vacatures table { width:560px; border-collapse:collapse; } #vacatures table th { font:14px/42px 'RockwellLightRegular','Times New Roman', Times, serif; height:42px; padding:0 5px; color:#333; } #vacatures table th.header { background-image: url(../img/bg.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer; } #vacatures table th.headerSortUp { background-image:url(../img/asc.gif); color:#000; } #vacatures table th.headerSortDown { background-image:url(../img/desc.gif); color:#000; } #vacatures table td { background:#FFE50C; border-top:2px solid #FFF; line-height:42px; height:42px; padding:0 5px; } #vacatures table td a { color:#111; text-decoration:none; } #vacatures div.span-2 { height:485px; } #vacatures .jScrollPaneTrack, #vacature-detail .jScrollPaneTrack { right:0; } #vacatures .jScrollPaneDrag { background:#111; } #vacature-detail #col-01 { position:relative; height:485px; } #vacature-detail #col-01 #col-01-content { position:absolute; bottom:0; width:280px; } #vacature-detail #col-01 #col-01-content div.yellow { height:140px; padding:20px; } #vacature-detail #col-01 #col-01-content div.yellow div.body { height:140px; padding:0; } #vacature-detail #col-01 h1 { font-size:22px; line-height:22px; margin-bottom:10px; } #vacature-detail #col-01 div.yellow { margin-bottom:2px; height:180px; } #vacature-detail #col-02 { position:relative; height:485px; } #vacature-detail #col-02 div.body { height:435px; padding:0 20px 20px 20px; } #vacature-detail #col-02 .jScrollPaneDrag { background:#FFE50C; } #vacature-detail #col-02 h1 { font-size:20px; line-height:20px; height:20px; padding:0 20px; margin-bottom:10px; } #vacature-detail #col-03 { position:relative; height:485px; } #vacature-detail #col-03 #col-03-content { position:absolute; bottom:0; width:280px; } #vacature-detail #col-03 #col-03-content #logo-container { float:left; position:relative; height:280px; width:280px; text-align:center; } #vacature-detail #col-03 #col-03-content #logo-container img { position:absolute; top:50%; left:50%; } form ul { list-style:none; margin:0 !important; padding:0 !important; } form ul li { position:relative; list-style:none; margin:5px 0 0 0 !important; padding:0 !important; background:none !important; overflow:hidden; } form ul li label { text-transform:uppercase; font-size:10px; } form ul li label.error { position:absolute; top:2px; right:0; color:#FFF; font-size:9px; line-height:9px; padding:3px 2px 2px 2px; background:#900; font-weight:bold; } input, textarea, button { border:none; background:#EEE; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:3px; width:230px; } input:focus, textarea:focus { background:#FFE50C; outline:none; } button { width:auto; background:#DDD; text-transform:uppercase; font:10px/18px Helvetica, Arial, sans-serif; margin:20px 0 0 80px; padding:7px 5px 5px 5px; } button:hover { width:auto; background:#FFE50C; color:#111; } #contact div.content-wrapper { border-color:1px solid #D0D; } #form-contact input, #form-contact textarea { width:520px; padding:5px !important; } #form-contact textarea { height:60px; } #form-contact button { margin-left:0; } #contact-wrapper { float:left; width:280px; margin-top:55px; } #contact-wrapper #contact-map { float:left; width:280px; height:230px; background:#FFE50C; } #contact-wrapper #contact-block { float:left; width:240px; height:162px; background:#FFE50C; padding:20px; margin:0 0 2px 0; } #contact-wrapper #contact-block ul { list-style:none; padding:0; margin:0; font:14px/16px 'RockwellLightRegular','Times New Roman', Times, serif; } #contact-wrapper #contact-block ul li { list-style:none; padding:0; margin:0 0 10px 0; } #contact-wrapper #contact-block ul li.phone { background-position: 0 -51px; } #contact-wrapper #contact-block ul li.web { background-position: 0 -105px; } #contact-wrapper #contact-block ul li a { text-decoration:none; color:#111; } #bericht { height:90px; } textarea { width:230px; height:30px; } input.upload { display:none; } a#upload-placeholder { display:block; width:181px; height:24px; background:url(../img/bg-uploadify.png) no-repeat; } a#upload-placeholder span { display:none; } div.header ul.single-page { float:right !important; } #nieuws-detail div.yellow p { margin-bottom:0; font:14px/20px 'RockwellLightRegular','Times New Roman', Times, serif; } #nieuws-detail div.last div.scrollpane { height:440px; overflow:hidden; padding:0px 20px; } #nieuws-detail div.last a { color:#000; } #nieuws-detail div.thumb-wrapper { width:280px; height:280px; overflow:hidden; position:relative; } #nieuws-detail div.thumb-wrapper { width:280px; position:relative; } #nieuws-detail div.thumb-wrapper a.play-btn { position:absolute; top:0; left:0; display:block; width:280px; height:280px; background:url(../img/play-btn.png) no-repeat center center; } /* ------------------------------------------------- */ /* 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 */