/* ------------------------------------------------- */ /* COMMON RULES /* ------------------------------------------------- */ html, body { height:100%; overflow:hidden; } body { background:#FFF; font:12px/18px Helvetica, Arial, sans-serif; color:#333; overflow:hidden; } h1 { font:24px/36px "ff-nuvo-web-pro-1","ff-nuvo-web-pro-2", sans-serif; color:#FFF; } a, a:visited { color:#dc1f27; outline: none;} a:hover, a:active {color: #ff0000; text-decoration: none;} div.loading { background:url(../img/ajax-loader.gif) no-repeat 10px 10px; } input { outline:none; } .scrollpane ul, .scrollpane ol {margin-left: 28px;} /* ------------------------------------------------- */ /* CONTAINER RULES /* ------------------------------------------------- */ #content-wrapper { position:relative; top:0; left:0; } div.wrapper { position:absolute; top:0; left:0; background:url(../img/bg-home.png) no-repeat center center; } div.content { position:absolute; top:50%; left:50%; margin:-300px -480px; width:960px; height:600px; } /* ------------------------------------------------- */ /* LOGO RULEZ /* ------------------------------------------------- */ #logo { position:fixed; right:40px; top:-124px; z-index:100; background: url(../img/logo.png) no-repeat scroll top left; width:131px; height:194px; cursor:pointer; } #logo a { width:131px; height:194px; display:block; } #logo a span { display:none; } /* ------------------------------------------------- */ /* NEWSLETTER RULEZ /* ------------------------------------------------- */ #newsletter { position:fixed; left:20px; bottom:-75px; z-index:100; background: url(../img/bg-nieuwsbrief.png) no-repeat scroll top left; width:262px; height:116px; cursor:pointer; } #newsletter form { position:relative; display:block; width:262px; height:116px; } #newsletter form label { position:absolute; left:14px; top:90px; color:#FFF; font-weight:bold; } #newsletter form input { position:absolute; left:14px; top:54px; border:none; width:136px; height:26px; line-height:26px; color:#787474; background:transparent; } #newsletter form button { position:absolute; left:157px; top:55px; border:none; background:transparent; width:92px; height:26px; background:url(../img/btn-nieuwsbrief.png) no-repeat; } #newsletter form button span { display:none; } /* ------------------------------------------------- */ /* MENU RULES /* ------------------------------------------------- */ #menu-wrapper { position:fixed; left:0; top:150px; z-index:100; } #menu-wrapper a#open-close { position:absolute; left:10px; top:-73px; width:59px; height:61px; background:url(../img/bg-btn-menu.png) no-repeat; font:13px/61px "ff-nuvo-web-pro-1","ff-nuvo-web-pro-2", sans-serif; text-align:center; text-decoration:none; color:#808080; padding-right:2px; } #menu-wrapper a#open-close:hover { background:url(../img/bg-btn-menu.png) no-repeat; color:#FFF; } #menu-wrapper ul#menu { list-style:none; position:relative; margin:0; padding:0; left:-165px; } #menu-wrapper ul#menu li { display:block; list-style:none; margin:0; padding:0; } #menu-wrapper ul#menu li a { background:#292929 url(../img/bg-menu.png); color:#808080; text-decoration:none; display:block; margin-bottom:2px; font:14px/40px "ff-nuvo-web-pro-1","ff-nuvo-web-pro-2", sans-serif; font-weight:normal; text-transform:uppercase; color:#FFF; text-align:right; padding:0 15px; width:135px; } #menu-wrapper ul#menu li a:hover { background:#de2129 url(none); } #menu-wrapper ul#menu li a.current { background:#161616 url(../img/bg-menu.png); } #menu-wrapper ul#menu li ul { position:absolute; top:-84px; left:165px; display:none; padding-left:2px; } #menu-wrapper ul#menu li ul li a { float:left; clear:both; width:auto; text-align:left; white-space:nowrap; } #menu-wrapper ul#menu li:hover ul { display:block; } #menu-wrapper #onze-club-menu { } #menu-wrapper #begeleiding-menu { top:0px !important; } #menu-wrapper #groepslessen-menu { } #menu-wrapper #fitness-cardio-menu { top:126px !important; } #menu-wrapper #wellness-menu { top:210px !important; } #menu-wrapper #actueel-menu { top:42px !important; } #menu-wrapper #lid-worden-menu { top:252px !important; } /* ------------------------------------------------- */ /* BACKGROUND WRAPPERS /* ------------------------------------------------- */ div #home, div #leeg { background:url(../img/bg-home.png) no-repeat center center; position:relative; } div .instructor, div #onze-club-tour, div #team { background: url(../img/bg-team1.jpg) repeat-x; } div #team .extraback, div .instructor .extraback { position:absolute; width:100%; height:100%; background: url(../img/bg-team2.png) no-repeat center center;} div .fitnessencardio { background: url(../img/bg-lederlook-mix.png) no-repeat center center; } div .fitnessencardio .extraback { position:absolute; width:100%; height:100%; background-repeat: no-repeat; background-position:center center ; background-color:transparent; } div #actueel, div #contact, div #nieuwsdetail, div #nieuwsoverzicht, div #faqdetail, div #faqoverzicht, div #groepslessen, div #groepslessen-reservatie { background: url(../img/bg-lederlook.png) no-repeat center center; } div #kalender { background: url(../img/bg-kalender.png) no-repeat center center; } div #route { background: url(../img/bg-witte-balk.png) no-repeat center center; } /* ------------------------------------------------- */ /* HOMEPAGE RULES /* ------------------------------------------------- */ #home .row1 { width:666px; float:left; } #home .row2 { width:666px; float:left; position:relative; } #home .row1 .box { position:relative; margin:0; padding:0; background: url(../img/bg-home-box-shadow-1.png) no-repeat; overflow:hidden; width:222px; height:256px; float:left; cursor:pointer; } #home .row1 .box .over { position:absolute; top:0px; left:0; width:222px; height:512px; z-index:10; background: url(../img/overlay-home-box.png) no-repeat;} #home .row1 .box:hover div.over { position:absolute; top:-256px; left:0; z-index:10;} #home .row1 .box .over .inhoud { position:absolute; bottom:6px; left:11px; width:200px; padding:0; z-index:20; } #home .row1 .box .over .inhoud .titel { height:159px; margin-bottom:22px; text-align:center; overflow:hidden; } #home .row1 .box .over .inhoud .titel h1 { font-size:26px; color:#232424; padding:0; text-transform:uppercase; font-weight:normal; } #home .row1 .box .over .inhoud p { font-size:11px; line-height:16px; color:#fff; padding:0; margin:0 0 8px 0; text-align:left; height:50px; overflow:hidden; } #home .row1 .box .visual { position:relative; top:10px; left:10px; width:200px; height:233px; margin:0; padding:0; border:1px solid #d1d2d4;} #home .row2 .box { position:relative; margin:0; padding:0; background: url(../img/bg-home-box-actueel2.png) no-repeat; overflow:hidden; width:222px; height:204px; float:left; text-align:left; } #home .row2 .box h1 { font-size:22px; color:#fff; margin:16px 11px 0 11px; padding:0 0 0px 10px; text-transform:uppercase; font-weight:normal; height:36px; } #home .row2 .box.getstarted .inhoud { position:relative; margin:0 0 0 11px; padding:0; width:200px; height:140px; overflow:hidden; float:left; text-align:left; } #home .row2 .box.getstarted .inhoud ul { } #home .row2 .box.getstarted .inhoud ul li { font:18px "ff-nuvo-web-pro-1","ff-nuvo-web-pro-2"; background:url(../img/bg-list-getstarted.png) repeat-x; height:35px; } #home .row2 .box.getstarted .inhoud ul li a, #home .row2 .box.getstarted .inhoud ul li a:visited { text-decoration:none; color:#404041; padding:3px 0 0 10px; height:35px; display:block;} #home .row2 .box.getstarted .inhoud ul li a:hover, #home .row2 .box.getstarted .inhoud ul li a:active { text-decoration:none; color:#1e1e21; background:#fff;} #home .row2 .box.actueel div.scrollable { position:relative; margin:0 11px; width:200px; height:110px; overflow:hidden; } #home .row2 .box.actueel div.scrollable div.items { position:absolute; width:20000em; height:110px; } #home .row2 .box.actueel div.inhoud { position:relative; margin:0; padding:15px 10px; width:180px; height:80px; overflow:hidden; float:left; text-align:left; } #home .row2 .box.actueel div.inhoud h2 { font-size:12px; color:#404041; margin:0; padding:0; text-transform:none; font-weight:bold; } #home .row2 .box.actueel div.inhoud a { color:#404041; text-decoration:none; } #home .row2 .box.actueel div.inhoud a:hover { color:#ff0000; text-decoration:none; } #home .row2 .box.actueel a.scroll-nav { position:absolute; left:50%; bottom:20px; width:18px; height:18px; background:url(../img/btn-scrollable-actueel.png) no-repeat; z-index:10; } #home .row2 .box.actueel a.prev { margin-left:-25px; background:url(../img/btn-scrollable-actueel.png) no-repeat; } #home .row2 .box.actueel a.next { background:url(../img/btn-scrollable-actueel.png) no-repeat -18px 0; } #home .row2 .box.actueel a.prev:hover { background:url(../img/btn-scrollable-actueel.png) no-repeat 0px -18px; } #home .row2 .box.actueel a.next:hover { background:url(../img/btn-scrollable-actueel.png) no-repeat -18px -18px; } #home .row2 .box.tour a, #home .row2 .box.tour a:visited { margin:12px 11px; width:200px; height:180px; display:block; background-image: url(../img/home-tour.png);} #home .row2 .box.tour a:hover, #home .row2 .box.tour a:active { background-position: 0 -180px; } #home .row2 .box.tour a span { display:none;} #home .row2 .box.route a, #home .row2 .box.route a:visited { margin:12px 11px; width:200px; height:180px; display:block; background-image: url(../img/home-route.png);} #home .row2 .box.route a:hover, #home .row2 .box.route a:active { background-position: 0 -180px; } #home .row2 .box.route a span { display:none;} #home .row2 a.btn-groepslessen-reservatie, #home .row2 a.btn-groepslessen-reservatie:visited { position:absolute; bottom:40px; right:-120px; margin:0; width:98px; height:98px; display:block; background-image: url(../img/btn-groepslessen-reservatie.png); } #home .row2 a.btn-groepslessen-reservatie:hover, #home .row2 a.btn-groepslessen-reservatie:active { background-position: 0 -98px; } #home .row2 a.btn-groepslessen-reservatie span { display:none; } #home .row2 a.btn-kalender, #home .row2 a.btn-kalender:visited { position:absolute; bottom:50px; right:-120px; margin:0; width:98px; height:98px; display:block; background-image: url(../img/btn-kalender.png); background-repeat: no-repeat; } #home .row2 a.btn-kalender:hover, #home .row2 a.btn-kalender:active { background-position: 0 -98px; } #home .row2 a.btn-kalender span { display:none; } /* ------------------------------------------------- */ /* TEAM RULES /* ------------------------------------------------- */ #team .body { position:relative; padding:81px 69px 0 111px ; float:left; } #team .body .left { position:relative; width:130px; height:390px; float:left; } #team .body .thumbs { position:relative; width:650px; height:390px; float:left; overflow:hidden; } #team .body .controller { position:relative; width:780px; height:80px; float:right; } #team .body .thumbs div.items { position:absolute; width:20000em; } #team .body .thumbs div.items div.item { width:650px; height:390px; float:left; } #team .body .thumbs div.tmb { position:relative; margin:5px 6px 6px 5px; padding:0; background:url(../img/bg-thumb.png) no-repeat; overflow:hidden; width:119px; height:119px; text-decoration:none; float:left; } #team .body .thumbs div.tmb a.over { position:absolute; display:block; top:0px; left:0; width:119px; height:238px; z-index:10; } #team .body .thumbs div.tmb:hover a.over { position:absolute; top:-119px; left:0; z-index:10; } #team .body .thumbs div.tmb .over span { position:absolute; bottom:10px; left:5px; width:101px; padding:4px; font:12px/14px "ff-nuvo-web-pro-1","ff-nuvo-web-pro-2", Arial, sans-serif; color:#fff; text-transform:uppercase; text-align:center; font-weight:normal; background: url(../img/bg-naam-tmb.png); } #team .body .thumbs div.tmb img { position:relative; top:5px; left:5px; width:109px; height:109px; margin:0; padding:0; filter:alpha(Opacity=40); opacity:.40; } #team .body .thumbs div.tmb:hover img { filter:none; opacity:1; } #team .body .left h1 { position:relative; margin:5px 6px 6px 5px; padding-top:35px; width:119px; height:84px; color:#dc1f27; text-transform:uppercase; text-align:center; background: url(../img/bg-thumb-wit.png) no-repeat; overflow:hidden; float:left; } #team .body .left p.info { position:absolute; bottom:0px; left:0; padding:50px 6px 6px 9px; line-height:20px; color:#fff; font-weight:normal; background: url(../img/info-bolleke.png) no-repeat 9px 0; } a.scroll-nav { width:40px; height:80px; display:block; float:right; background-image:url(../img/scroll-controller.png); background-repeat:no-repeat; margin-right:10px; } a.scroll-nav span { display:none;} a.scroll-left { background-position: 0px -80px;} a.scroll-left:hover { background-position: 0px 0px; } a.scroll-right { background-position: -40px -80px;} a.scroll-right:hover { background-position: -40px 0px; } a.disabled { opacity:0; filter:alpha(opacity=0); cursor:default; } /* ------------------------------------------------- */ /* EXTRA > INSTRUCTOR RULES /* ------------------------------------------------- */ .instructor .body { position:relative; padding:81px 69px 0 111px ; float:left; } .instructor .body .left { position:relative; width:260px; height:390px; float:left; } .instructor .body .thumbs { position:relative; width:520px; height:390px; float:left; overflow:hidden; } .instructor .body .controller { position:relative; width:780px; height:80px; float:right; } .instructor .body .thumbs div.items { position:absolute; width:20000em; } .instructor .body .thumbs div.items div.item { width:520px; height:390px; float:left; } .instructor .body .thumbs a.tmb { position:relative; margin:5px 6px 6px 5px; padding:0; background:url(../img/bg-thumb.png) no-repeat; overflow:hidden; width:119px; height:119px; float:left; } .instructor .body .thumbs a.tmb img { position:relative; top:5px; left:5px; width:109px; height:109px; margin:0; padding:0; filter: Alpha(Opacity=40); opacity:.40; } .instructor .body .thumbs a.tmb:hover img { filter:none; opacity:1; } .instructor .body .left a.bigtmb { position:relative; margin:5px 6px 6px 5px; padding:0; background:url(../img/bg-bigtmb.png) no-repeat; overflow:hidden; width:249px; height:249px; float:left; } .instructor .body .left a.bigtmb div.over { position:absolute; top:0px; left:0; width:119px; height:238px; z-index:10; } .instructor .body .left a.bigtmb .over h1 { position:absolute; bottom:10px; left:12px; width:226px; height:64px; padding:0; display:block; background: url(../img/bigtmb-portret-cv.png) no-repeat; } .instructor .body .left a.bigtmb .over h1 span { display:none;} .instructor .body .left a.bigtmb img { position:relative; top:5px; left:5px; width:239px; height:239px; margin:0; padding:0; filter: Alpha(Opacity=40); opacity:.40; } .instructor .body .left a.bigtmb:hover img { filter:none; opacity:1; } .instructor .body .left .titel { position:relative; margin:5px 6px 6px 5px; padding:0; width:249px; height:119px; text-align:left; background: url(../img/bg-titel-wit.png) no-repeat; overflow:hidden; float:left; } .instructor .body .left .titel h1 { color:#dc1f27; font-size:26px; text-transform:uppercase; padding:26px 0 0 28px; margin:0; } .instructor .body .left .titel h2 { color:#7d7f86; font-size:12px; text-transform:uppercase; padding:0 0 0 28px; margin:0; } .instructor .body .left p.info { position:absolute; bottom:0px; left:0; padding:50px 6px 6px 9px; line-height:20px; color:#fff; font-weight:normal; background: url(../img/info-bolleke.png) no-repeat 9px 0; } /* ------------------------------------------------- */ /* NIEUWS OVERZICHT RULES /* ------------------------------------------------- */ #nieuwsoverzicht .body { position:relative; padding:0 0 0 205px ; float:left; } #nieuwsoverzicht .body .top { position:relative; width: 490px; height:74px; float:left; } #nieuwsoverzicht .body .overzicht-wrapper { float:left; width:538px; height:476px; background:url(../img/bg-scrollpane-wrapper.png) no-repeat; } #nieuwsoverzicht .body .overzicht { position:relative; width:490px; padding:0 48px 0 0; height:476px; overflow:auto; } #nieuwsoverzicht .body .sideinfo { position:relative; width:217px; height:555px; float:right; } #nieuwsoverzicht .body .top h1 { color: #252a2d; padding: 28px 0 0 26px; } #nieuwsoverzicht .body .overzicht ul { list-style: none; padding:1px 0 0 0; margin: 0; } #nieuwsoverzicht .body .overzicht ul li { border-bottom: 1px solid #d3d1d1; width:419px; padding: 10px 26px; margin: 0; display: block; } #nieuwsoverzicht .body .overzicht ul li h1 a { text-decoration: none; color: #dc1f27; margin: 0; padding: 0; line-height: normal; } #nieuwsoverzicht .body .overzicht ul li h1 { font-size: 14px; padding:0px ; margin: 0px; line-height: normal; font-family:Helvetica, Arial, sans-serif; } #nieuwsoverzicht .body .overzicht ul li h2 { font-size: 11px; color: #44464c; text-transform: uppercase; padding: 0; margin: 0px; line-height: normal; } #nieuwsoverzicht .body .overzicht ul li h2 span.day { color: #909299; } #nieuwsoverzicht .body .overzicht ul li p { font-size: 12px; color: #252a2d; line-height: 16px; } #nieuwsoverzicht .body .overzicht ul li:hover { background-color: #eeeff0;} #nieuwsoverzicht .body .overzicht ul li:hover h2 { color: #000; } #nieuwsoverzicht .body .overzicht ul li:hover h2 span.day { color: #44464c; } #nieuwsoverzicht .body .overzicht ul li:hover p { color: #000; } #nieuwsoverzicht .body .sideinfo p.info { position:absolute; top:32px; left:17px; font-size: 12px; padding:50px 6px 6px 9px; line-height:20px; color:#fff; font-weight:normal; background: url(../img/info-bolleke.png) no-repeat 9px 0; } /* ------------------------------------------------- */ /* NIEUWS DETAIL RULES /* ------------------------------------------------- */ #nieuwsdetail .body { position:relative; padding:0 0 0 205px ; float:left; } #nieuwsdetail .body .scrollable-vertical { float:left; position:relative; width:755px; height:484px; margin:0; overflow:hidden; } #nieuwsdetail .body .scrollable-vertical div.items { position:absolute; width:755px; height:20000em; } #nieuwsdetail .body .scrollable-vertical div.items div.item { float:left; width:755px; height:484px; } #nieuwsdetail .body .nieuwsitem { position:relative; width:430px; height: 444px; float:left; overflow: auto; padding: 20px 80px 20px 28px; } #nieuwsdetail .body .sideinfo { position:relative; width:217px; height:484px; float:right; } #nieuwsdetail div.body a.top { position:relative; width: 755px; height:54px; float:left; background: url(../img/bg-nieuws-detail-top.png) left bottom no-repeat; text-decoration:none; } #nieuwsdetail div.body a.bottom { position:relative; width: 755px; height:54px; float:left; background: url(../img/bg-nieuws-detail-bot.png) no-repeat; text-decoration:none; } #nieuwsdetail div.body a.top span, #nieuwsdetail div.body a.bottom span { background-image: url(../img/nieuws-detail-scroll-up-down.png); background-repeat: no-repeat; width: 490px; height: 38px; display: block; padding: 16px 0 0 28px; color: #404041; text-decoration: none; } #nieuwsdetail div.body a.disabled { opacity:.5; filter:alpha(opacity=0); } #nieuwsdetail div.body a.top span, #nieuwsdetail div.body a.top:visited span { background-position: 0 -54px; } #nieuwsdetail div.body a.top:hover span, #nieuwsdetail div.body a.top:active span{ background-position: 0 0px; color: #000; } #nieuwsdetail div.body a.bottom span, #nieuwsdetail div.body a.bottom:visited span{ background-position: -490px -54px; } #nieuwsdetail div.body a.bottom:hover span, #nieuwsdetail div.body a.bottom:active span { background-position: -490px 0px; color: #000; } #nieuwsdetail .body .nieuwsitem h1 { font-size: 24px; color: #dc1f27; padding:0 0 10px 0 ; margin: 0px; line-height: normal; } #nieuwsdetail .body .nieuwsitem h2 { font-size: 12px; color: #44464c; text-transform: uppercase; padding: 0; margin: 0px; line-height: normal; } #nieuwsdetail .body .nieuwsitem h2 span.day { color: #909299; } #nieuwsdetail .body .nieuwsitem p { font-size: 12px; color:#252a2d; line-height: 16px; } #nieuwsdetail .body .nieuwsitem ul { margin:10px 0 10px 20px; font-weight:11px; color:#475158; list-style:square; } #nieuwsdetail .body .sideinfo ul { width: 177px; padding:0; margin-left:20px; list-style-type: none; } #nieuwsdetail .body .sideinfo ul li { height: 24px; padding: 6px 5px 0 5px; color:#c2c4c9; border-bottom: solid 1px #7a7979; text-transform: uppercase; font-size: 11px; } #nieuwsdetail .body .sideinfo ul li a { color:#c2c4c9; text-decoration: none; display: block;} #nieuwsdetail .body .sideinfo ul li a:hover { color:#fff; } #nieuwsdetail .body .sideinfo ul li.submenu { height:auto; padding: 0; border-bottom: none; text-transform: none; margin: 0; } div.slideshow { position:relative; width:177px; height:113px; } div.slideshow a { position:absolute; display:block; width:177px; height:113px; } #nieuwsdetail .body .sideinfo ul li ul { padding:0; margin-left: 0; } #nieuwsdetail .body .sideinfo ul li ul li { color:#797777; text-transform: none; } #nieuwsdetail .body .sideinfo ul li ul li a { color:#797777;} /* ------------------------------------------------- */ /* FAQ OVERZICHT RULES /* ------------------------------------------------- */ #faqoverzicht .body { position:relative; padding:0 0 0 205px ; float:left; } #faqoverzicht .body .top { position:relative; width: 490px; height:74px; float:left; } #faqoverzicht .body .overzicht-wrapper { float:left; width:538px; height:476px; background:url(../img/bg-scrollpane-wrapper.png) no-repeat; } #faqoverzicht .body .overzicht { position:relative; width:490px; padding:0 48px 0 0; height:476px; overflow:auto; } #faqoverzicht .body .sideinfo { position:relative; width:217px; height:555px; float:right; } #faqoverzicht .body .top h1 { color: #252a2d; padding: 28px 0 0 26px; } #faqoverzicht .body .overzicht ul { display:block; float:left; list-style:none; padding:1px 0 0 0; margin:0; } #faqoverzicht .body .overzicht ul li { border-bottom:1px solid #d3d1d1; width:419px; padding:10px 26px; display:block; } #faqoverzicht .body .overzicht ul li.last { border-bottom:none; } #faqoverzicht .body .overzicht ul li p a { text-decoration:none; color: #252a2d; margin: 0; padding: 0; line-height: 16px; } #faqoverzicht .body .overzicht ul li p { font-size: 12px; padding:0px ; margin: 0px; line-height: normal; } #faqoverzicht .body .overzicht ul li h2 { font-size: 11px; color: #dc1f27; text-transform: uppercase; padding: 0; margin: 0px; line-height: normal; } #faqoverzicht .body .overzicht ul li h2 strong { color: #909299; font-weight: normal; } #faqoverzicht .body .overzicht ul li:hover { background-color: #eeeff0;} #faqoverzicht .body .overzicht ul li:hover h2 { color: #000; } #faqoverzicht .body .overzicht ul li:hover h2 span.day { color: #44464c; } #faqoverzicht .body .overzicht ul li:hover p { color: #000; } #faqoverzicht .body .sideinfo p.info { position:absolute; top:32px; left:17px; font-size: 12px; padding:50px 6px 6px 9px; line-height:20px; color:#fff; font-weight:normal; background: url(../img/info-bolleke.png) no-repeat 9px 0; } #faqoverzicht .body .sideinfo ul { width: 177px; padding:48px 0 0 0; margin-left:20px; list-style-type: none; } #faqoverzicht .body .sideinfo ul li { height: 24px; padding: 6px 5px 0 5px; color:#c2c4c9; border-bottom: solid 1px #7a7979; text-transform: uppercase; font-size: 11px; } #faqoverzicht .body .sideinfo ul li a { color:#c2c4c9; text-decoration: none; display: block;} #faqoverzicht .body .sideinfo ul li a:hover { color:#fff; } #faqoverzicht .body .sideinfo ul li.submenu { height:auto; padding: 0; border-bottom: none; text-transform: none; margin: 0; } #faqoverzicht .body .sideinfo ul li ul { padding:0; margin-left: 0; } #faqoverzicht .body .sideinfo ul li ul li { color:#797777; text-transform: none; } #faqoverzicht .body .sideinfo ul li ul li a { color:#797777;} /* ------------------------------------------------- */ /* FAQ DETAIL RULES /* ------------------------------------------------- */ #faqdetail .body { position:relative; padding:0 0 0 205px ; float:left; } #faqdetail .body .scrollable-vertical { float:left; position:relative; width:755px; height:484px; margin:0; overflow:hidden; } #faqdetail .body .scrollable-vertical div.items { position:absolute; width:755px; height:20000em; } #faqdetail .body .scrollable-vertical div.items div.item { float:left; width:755px; height:484px; } #faqdetail .body .faqitem { position:relative; width:430px; height: 444px; float:left; overflow: auto; padding: 20px 80px 20px 28px; } #faqdetail .body .sideinfo { position:relative; width:217px; height:484px; float:right; } #faqdetail div.body a.top { position:relative; width: 755px; height:54px; float:left; background: url(../img/bg-nieuws-detail-top.png) left bottom no-repeat; text-decoration:none; } #faqdetail div.body a.bottom { position:relative; width: 755px; height:54px; float:left; background: url(../img/bg-nieuws-detail-bot.png) no-repeat; text-decoration:none; } #faqdetail div.body .top span, #faqdetail div.body .bottom span { background-image: url(../img/nieuws-detail-scroll-up-down.png); background-repeat: no-repeat; width: 490px; height: 38px; display: block; padding: 16px 0 0 28px; color: #404041; text-decoration: none; } #faqdetail div.body a.disabled { opacity:.5; filter:alpha(opacity=0); } #faqdetail div.body a.top span, #faqdetail div.body a.top:visited span { background-position: 0 -54px; } #faqdetail div.body a.top:hover span, #faqdetail div.body a.top:active span{ background-position: 0 0px; color: #000; } #faqdetail div.body a.bottom span, #faqdetail div.body a.bottom:visited span{ background-position: -490px -54px; } #faqdetail div.body a.bottom:hover span, #faqdetail div.body a.bottom:active span { background-position: -490px 0px; color: #000; } #faqdetail .body .faqitem h1 { font-size: 16px; color: #dc1f27; padding:0 0 10px 0 ; margin: 0px; line-height: 18px; } #faqdetail .body .faqitem h2 { font-size: 12px; color: #44464c; text-transform: uppercase; padding: 0; margin: 0px; line-height: normal; } #faqdetail .body .faqitem h2 strong { color: #909299; } #faqdetail .body .faqitem p { font-size: 12px; color: #252a2d; line-height: 16px; } #faqdetail .body .sideinfo ul { width: 177px; padding:0; margin-left:20px; list-style-type: none; } #faqdetail .body .sideinfo ul li { height: 24px; padding: 6px 5px 0 5px; color:#c2c4c9; border-bottom: solid 1px #7a7979; text-transform: uppercase; font-size: 11px; } #faqdetail .body .sideinfo ul li a { color:#c2c4c9; text-decoration: none; display: block;} #faqdetail .body .sideinfo ul li a:hover { color:#fff; } #faqdetail .body .sideinfo ul li.submenu { height:auto; padding: 0; border-bottom: none; text-transform: none; margin: 0; } #faqdetail .body .sideinfo ul li ul { padding:0; margin-left: 0; } #faqdetail .body .sideinfo ul li ul li { color:#797777; text-transform: none; } #faqdetail .body .sideinfo ul li ul li a { color:#797777;} /* ------------------------------------------------- */ /* FITNESS & CARDIO / DETAIL PAGE / RULES /* ------------------------------------------------- */ .fitnessencardio .body { position:relative; padding:0 0 0 100px ; float:left; background-color:transparent; } .fitnessencardio .body .txt { position:relative; width: 293px; height:600px; float:left; background-color:transparent; } .fitnessencardio .body .mid { position:relative; width:350px; height:600px; float:left; background-color:transparent; } .fitnessencardio .body .sideinfo { position:relative; width:217px; height: 600px; float:left; background-color:transparent; } .fitnessencardio .body .txt h1 { color: #dc1f27; font-size: 32px; line-height: 30px; text-transform: uppercase; padding: 0 0 20px 0; } .fitnessencardio .body .txt p { color: #252a2d; font-size: 12px; line-height: 20px; } .fitnessencardio .body .mid a, .fitnessencardio .body .mid a:visited { position: absolute; top: 265px; left: 274px; width: 70px; height: 70px; display: block; background-image: url(../img/bol-fotos.png); background-repeat: no-repeat; background-position: -70px 0px; } .fitnessencardio .body .mid a:hover, .fitnessencardio .body .mid a:active { background-position: 0px 0px; } .fitnessencardio .body .mid a span { display: none; } .fitnessencardio .body .sideinfo ul { list-style-type: none; } /* ------------------------------------------------- */ /* KALENDER RULES /* ------------------------------------------------- */ #kalender .content .left { position:relative; width:248px; float:left; padding: 20px 0 0 0; } #kalender .content .mid { position:relative; display:block; width:712px; height:600px; float:left; } #kalender .content .mid .scrollable { position:relative; width:712px; height:600px; float:left; overflow:hidden; } #kalender .content .mid .scrollable .items { position:absolute; width:20000em; height:600px; } #kalender .content .mid .scrollable .items .item { float:left; position:relative; width:712px; height:600px; } #kalender .content .sideinfo { position:absolute; top:0; right:0; width:187px; height:600px; } #kalender .content .left ul.legende { list-style-type: none; float: left; padding: 10px 0 0 30px; margin:0px; } #kalender .content .left ul.legende li { background-image: url(../img/ico-groepslessen_03.png); background-repeat: no-repeat; height: 20px; display: block; padding: 3px 0 6px 30px; text-transform: none; } #kalender .content .left ul.legende li.algemene-info { background-position: 0px 0px; } #kalender .content .left ul.legende li.abdominal-fever { background-position: 0px -32px; } #kalender .content .left ul.legende li.monday-morning-workout { background-position: 0px -64px; } #kalender .content .left ul.legende li.indoor-cycling { background-position: 0px -96px; } #kalender .content .left ul.legende li.striding { background-position: 0px -128px; } #kalender .content .left ul.legende li.fatburning-bbb { background-position: 0px -160px; } #kalender .content .left ul.legende li.x-pressworkout { background-position: 0px -192px; } #kalender .content .left ul.legende li.mind-balance { background-position: 0px -224px; } #kalender .content .left ul.legende li.pump { background-position: 0px -256px; } #kalender .content .left ul.legende li.xco { background-position: 0px -288px; } #kalender .content .left ul.legende li.zumba { background-position: 0px -320px; } #kalender .content .sideinfo div#extra-content-holder { position:absolute; left:10px; top:50px; padding:50px 6px 6px 9px; width:172px; line-height:20px; color:#404041; font-weight:normal; background: url(../img/info-bolleke.png) no-repeat 9px 0px; } #kalender .content .mid a.scroll-nav { position:absolute; top:10px; background-image: url(../img/pijltjes.png); background-repeat: no-repeat; width:20px; height:20px; display:block; border:none; z-index:10; } #kalender .content .mid a.scroll-nav span { display: none; } #kalender .content .mid a.scroll-terug { left:35px; background-position: 0px -20px; } #kalender .content .mid a.scroll-terug:hover { background-position: 0px 0px; } #kalender .content .mid a.scroll-verder { right:200px; background-position: -20px -20px; } #kalender .content .mid a.scroll-verder:hover { background-position: -20px 0px; } #kalender .content .mid a.call_agenda { position:absolute; top:10px; background-image:url(../img/pijltjes-dubbel.png); background-repeat: no-repeat; width:20px; height:20px; display:block; border:none; z-index:11; } #kalender .content .mid a.call_agenda span { display:none; } #kalender .content .mid a.prev-month { left:10px; background-position: 0px -20px; } #kalender .content .mid a.prev-month:hover { background-position: 0px 0px; } #kalender .content .mid a.next-month { right:185px; background-position: -20px -20px; } #kalender .content .mid a.next-month:hover { background-position: -20px 0px; } #kalender .content .mid .dayscroll { height:45px; overflow:hidden; } #kalender .content .mid .dayscroll h1 { color:#404041; text-transform:uppercase; float:left; padding:0px; padding-left:65px; } #kalender .content .mid ul.kalenderitems { float:left; width:477px; height:541px; margin:0; padding: 0 0 0 48px; } #kalender .content .mid ul.kalenderitems li { float:left; display:block; width:40px; } #kalender .content .mid ul.kalenderitems li a.button { display:block; width:40px; height:40px; background:#D0D; } #kalender .content .mid ul.kalenderitems li a.button span { display: none; } #kalender .content .mid ul.kalenderitems li.from0900 { height:541px; padding-top:0px; } #kalender .content .mid ul.kalenderitems li.from0930 { height:521px; padding-top:20px; } #kalender .content .mid ul.kalenderitems li.from1000 { height:501px; padding-top:40px; } #kalender .content .mid ul.kalenderitems li.from1030 { height:481px; padding-top:60px; } #kalender .content .mid ul.kalenderitems li.from1100 { height:461px; padding-top:80px; } #kalender .content .mid ul.kalenderitems li.from1130 { height:441px; padding-top:100px; } #kalender .content .mid ul.kalenderitems li.from1200 { height:421px; padding-top:120px; } #kalender .content .mid ul.kalenderitems li.from1230 { height:401px; padding-top:140px; } #kalender .content .mid ul.kalenderitems li.from1300 { height:381px; padding-top:160px; } #kalender .content .mid ul.kalenderitems li.from1330 { height:361px; padding-top:180px; } #kalender .content .mid ul.kalenderitems li.from1400 { height:341px; padding-top:200px; } #kalender .content .mid ul.kalenderitems li.from1430 { height:321px; padding-top:220px; } #kalender .content .mid ul.kalenderitems li.from1500 { height:301px; padding-top:240px; } #kalender .content .mid ul.kalenderitems li.from1530 { height:281px; padding-top:260px; } #kalender .content .mid ul.kalenderitems li.from1600 { height:261px; padding-top:280px; } #kalender .content .mid ul.kalenderitems li.from1630 { height:241px; padding-top:300px; } #kalender .content .mid ul.kalenderitems li.from1700 { height:221px; padding-top:320px; } #kalender .content .mid ul.kalenderitems li.from1730 { height:201px; padding-top:340px; } #kalender .content .mid ul.kalenderitems li.from1800 { height:181px; padding-top:360px; } #kalender .content .mid ul.kalenderitems li.from1830 { height:161px; padding-top:380px; } #kalender .content .mid ul.kalenderitems li.from1900 { height:141px; padding-top:400px; } #kalender .content .mid ul.kalenderitems li.from1930 { height:121px; padding-top:420px; } #kalender .content .mid ul.kalenderitems li.from2000 { height:101px; padding-top:440px; } #kalender .content .mid ul.kalenderitems li.from2030 { height:81px; padding-top:460px; } #kalender .content .mid ul.kalenderitems li.from2100 { height:61px; padding-top:480px; } #kalender .content .mid ul.kalenderitems li.from2130 { height:41px; padding-top:500px; } #kalender .content .mid ul.kalenderitems li.from2200 { height:21px; padding-top:520px; } #kalender .content .left .maandkalender { width:183px; float:left; background:#f8f8f8; margin-left:18px; padding:13px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; } #kalender .content .left .maandkalender #datepicker { width:183px; padding-right:1px; background:url(images/bg-datepicker.png) no-repeat top right; } div.tooltip { display:none; position:absolute; background:url(../img/bg-tooltip-right.png) no-repeat top right; height:105px; width:auto !important; z-index:100000; } div.tooltip div.inner-tooltip { float:left; display:block; background:url(../img/bg-tooltip-left.png) no-repeat top left; height:65px; margin-right:20px; padding:20px; } div.tooltip h1 { color:#dc1f27; font-size:24px; line-height:24px; text-transform:uppercase; } div.tooltip p { margin:5px 0 0 0; } div.right-tt { background-position:bottom right; } div.right-tt div.inner-tooltip { background-position:bottom left; } div.extra-content-holder { display:none; } div.extra-content { border-top:1px solid #de2129; padding-top:10px; } div.extra-content h3 { font-weight:bold; font-size:11px; line-height:16px; } div.extra-content p { margin-bottom:10px; font-size:11px; line-height:16px; } div.extra-content a { display:block; text-decoration:none; text-transform:uppercase; font:15px/40px "ff-nuvo-web-pro-1","ff-nuvo-web-pro-2", Helvetica, sans-serif; color:#de2129; border-top:1px solid #de2129; border-bottom:1px solid #de2129; } div.openingsuren { position:absolute; right:0; bottom:15px; width:136px; padding:12px; background:#363132; color:#FFF; font:13px/18px "ff-nuvo-web-pro-1","ff-nuvo-web-pro-2", Helvetica, sans-serif; text-transform:uppercase; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; } div.replace { right:50%; bottom:50%; } /* ------------------------------------------------- */ /* ROUTE RULES /* ------------------------------------------------- */ #route .content .left { position:relative; width: 248px; float:left; padding: 60px 0 0 0; } #route .content .mid { position:relative; width: 712px; float:left; } #route .content .left h1 { font-size: 21px; color: #404041; text-transform: uppercase; } #route .content .left h2 { font-size: 13px; color: #404041; text-transform: uppercase; font-weight: bold; padding-top: 20px; } #route .content .left p { } #route .content .left span { width: 80px; float: left; } #route .content .mid .titel { height: 45px; overflow: hidden; } #route .content .mid .titel h1 { color: #404041; text-transform: uppercase; float: left; padding-left: 20px; } #route .content .mid .kaart { height: 541px; margin:0; padding: 0; border: 1px solid #b9b9b8; } #route .content .mid .kaart small a { font-size: 12px; text-decoration: none; color:#404041; width: 168px; height: 30px; display: block; text-align: center; padding-top: 10px; margin: 5px 0 0 5px; background: url(../img/bg-knop.png) no-repeat; } #route .content .mid .kaart small a:hover { color:#dc1f27; } /* ------------------------------------------------- */ /* CONTACT RULES /* ------------------------------------------------- */ #contact .body { position:relative; padding:0 0 0 205px ; float:left; } #contact .body .top { position:relative; width: 490px; height:74px; float:left; } #contact .body .scroll { position:relative; width:538px; height:474px; margin: 5px 0 0 0; float:left; overflow: auto; background: url(../img/bg-nieuws-line.gif) no-repeat; } #contact .body .overzicht { position:relative; width:490px; float:left; } #contact .body .sideinfo { position:relative; width:217px; height:555px; float:right; } #contact .body .top h1 { color: #252a2d; padding: 28px 0 0 26px; } #contact .body .overzicht ul { list-style: none; padding: 0; margin: 0; } #contact .body .overzicht ul li { border-bottom: 1px solid #d3d1d1; padding: 10px 26px; margin: 0; display: block; } #contact .body .overzicht ul li h1 { font-size: 13px; color: #909299; text-transform: uppercase; padding: 0; margin: 0px; line-height: normal; clear: left; } #contact .body .overzicht ul li h1 strong { color: #44464c; font-weight: normal; } #contact .body .overzicht ul li h1 span { font-size: 12px; color: #dc1f27; text-transform: none; } #contact .body .overzicht ul li h2 { font-size: 12px; color: #dc1f27; padding:0px ; margin: 0px; line-height: normal; } #contact .body .overzicht ul li p { font-size: 11px; color: #252a2d; line-height: 16px; } #contact .body .overzicht ul li a { font-size: 12px; color: #dc1f27; } #contact .body .overzicht ul li a:hover { font-size: 12px; color: #252a2d; text-decoration: none; } #contact .body .sideinfo p.info { position:absolute; top:32px; left:17px; font-size: 12px; padding:50px 6px 6px 9px; line-height:20px; color:#fff; font-weight:normal; background: url(../img/info-bolleke.png) no-repeat 9px 0; float: left; } #contact .body .sideinfo p.info span { width: 80px; float: left; } #contact .body .overzicht form { width: 456px; height: 120px; margin-left: 0px; padding: 14px 0 0 26px; margin: 10px 0 0 10px; display: inline; float: left; clear: both; background: url(../img/bg-form-2.png) no-repeat; } #contact .body .overzicht form input{ background: #c00 url(../img/bg-input.png); border: none; width: 280px; height: 32px; margin: 12px 16px 0 0; padding:0 0 0 7px; float: left; color:#787474;} #contact .body .overzicht form button { background-color: transparent; background-image: url(../img/btn-normal.png); background-repeat: no-repeat; border: none; margin: 12px 24px 0 0; padding: 0; width: 126px; height: 32px; line-height: normal; float: right; } #contact .body .overzicht form button:hover { background-position: 0 -32px;} #contact .body .overzicht form button:active { background-position: 0 -64px;} #contact .body .overzicht form button span { display: none;} #contact .body .overzicht form label.error { color: #CE0223; padding-top: 20px; } #contact .body .overzicht form p.feedback { font-size: 14px; line-height: 21px; margin: 36px 0 0 0; overflow: hidden; color: #fff; } /* ------------------------------------------------- */ /* TOUR STYLES /* ------------------------------------------------- */ #onze-club-tour div.content { position:relative; } #onze-club-tour div.content a.scroll-nav { position:absolute; display:block; top:50%; margin-top:-55px; width:69px; height:110px; background:url(../img/bg-arrrows-tours-scrollable.png) no-repeat; } #onze-club-tour div.content a.prev { left:10px; background-position:0 0; } #onze-club-tour div.content a.prev:hover { background-position:0 -110px; } #onze-club-tour div.content a.next { right:0; background-position:-69px 0; } #onze-club-tour div.content a.next:hover { background-position:-69px -110px; } #onze-club-tour div.tour-scrollable { float:left; position:relative; margin:50px; width:860px; height:500px; overflow:hidden; } #onze-club-tour div.tour-scrollable div.items { float:left; position:absolute; width:20000em; height:500px; } #onze-club-tour div.tour-scrollable div.items div.item { float:left; width:860px; height:500px; overflow:hidden; } /* ------------------------------------------------- */ /* NAVIGATIE PIJLEN /* ------------------------------------------------- */ #navigatie a { display:none; width:54px; height:54px; position:fixed; background:url(../img/navigatie-arrows.png) no-repeat; z-index:10000; text-decoration:none; opacity:.2; filter:alpha(opacity=20); } #navigatie a:hover { opacity:1; filter:alpha(opacity=100); } #navigatie a.left { left:10px; top:50%; margin-top:-27px; z-index:10001; } #navigatie a.right { right:10px; top:50%; margin-top:-27px; background-position:-54px 0; z-index:10002; } #navigatie a.top { left:50%; top:10px; margin-left:-27px; background-position:-54px -54px; z-index:10003; } #navigatie a.bottom { left:50%; bottom:10px; margin-left:-27px; background-position:0px -54px; z-index:10004; } /* 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 */