/* stylesheet template mcdonalds websites (basic.css) INHOUD 1. Reset 2. Default 3. Headings 4. Links 5. Layout 6. Branding/Masthead 7. Navigation 8. Home 9. Restaurants 10. Kinderfeestjes 11. Acties 12. Werk 13. Sponsoring 14. Contact/Formulieren 15. ClassesU COLOURS Geel = #fac700 Rood = #ff0000 Zwart = #000 /* 1.Reset ------------------------------------------------------------*/ @import url(reset.css); /* 2.Deafult ------------------------------------------------------------*/ body { font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; color:#000; background:url(../_img/tmpl/bg_groen_body.jpg) repeat-x; behavior: url(../_js/csshover.htc); } p, ul, dl, ol { margin-bottom:18px; } /* 3.Headings ------------------------------------------------------------*/ h1, h2, h3, h4, h6 { color:#; font-weight:bold; } h1 { font-size:16px; text-transform:uppercase; margin-bottom:10px; font-weight:bold; } body#kinderfeestjes h1 { text-transform:none; } h2 { font-size:14px; font-weight:bold; clear:both; margin-bottom:2px; } h4 { font-size:14px; } h4 { line-height: 10px;} h5 { color:#fff;} /* 4.Links ------------------------------------------------------------*/ a { text-decoration:none; color:#000; } a:hover { color:#FF0000; } /* 5.Layout ------------------------------------------------------------*/ #wrapper { width:940px; margin:auto; } #content { float:left; border:3px solid #fac700; border-bottom:none; width:692px; padding:26px; min-height:300px; } #main { float:left; width:460px; margin-right:26px; } #images { float:right; } #container { float:left; background:url(../_img/tmpl/bg_container.gif) repeat-y right; } #bottom { border-top:3px solid #fac700; float:left; width:750px; margin:0 0 50px 190px; } *html #bottom { margin-left:95px; } body#home #container { background:none; } /* 6.Branding/Masthead ------------------------------------------------------------*/ #masthead { float:left; height:146px; width:940px; background:url(../_img/tmpl/bg_groen_masthead.jpg) no-repeat; margin-bottom:30px; } #restaurant_detail { float:left; font-family: Arial Black; letter-spacing: -.03em; height:40px; width:700px; padding-left: 10px; padding-top: 45px; font-size:30px; line-height:30px; } #restaurant_home { float:left; font-family: Arial Black; letter-spacing: -.03em; height:40px; width:330px; padding-left: 10px; padding-top: 40px; font-size:35px; line-height:50px; color:#FFF; } *html #masthead { margin-bottom:-60px; } #masthead h1 { text-indent:-9000px; height:20px; margin:0px; } /* 7.Navigation ------------------------------------------------------------*/ ul#mainnav { font-size:11px; line-height:11px; text-transform:uppercase; margin-top:102px; font-weight:bold; } ul#mainnav li { float:left; display:block; height:11px; padding:0 12px; border-right:solid 1px #fac700; } ul#mainnav li.last { border:none; } ul#mainnav li a { color:#CCC; } ul#mainnav li a:hover { color:#FFF; } ul#mainnav li a.active { color:#fac700; } ul#sidenav { border-top:3px solid #fac700; float:left; width:190px; background:url(../_img/tmpl/bg_sidenav.gif) no-repeat bottom; padding-bottom:80px; margin-bottom:20px; } ul#sidenav li { line-height:27px; border-left:3px solid #fac700; float:left; width:187px; } ul#sidenav li a { border-bottom:1px solid #fac700; color:#000; display:block; padding-left:12px; } ul#sidenav li a:hover { background:#fdf9ec; } ul#sidenav li a.active { background:#fbf4d9; } #kinderfeestjes-new ul#sidenav li a:hover { background:#d0abcd; } #kinderfeestjes-new ul#sidenav li a.active { background:#76056d; color:#fff; border-bottom:none; } #kinderfeestjes-new ul#sidenav li a.feest { background:#d0abcd; border-bottom:solid 1px #fff; } #kinderfeestjes-new ul#sidenav li a.feest .active { background:#76056d; color:#fff; } #kinderfeestjes-new ul#sidenav li a.categorie { text-transform:uppercase; font-weight:bold; border-bottom:solid 1px #fff; } #kinderfeestjes-new ul#sidenav li a:hover, #kinderfeestjes-new ul#sidenav li a.active { color:#fff; } #kinderfeestjes-new ul#sidenav ul { float:left; width:187px; } #kinderfeestjes-new ul#sidenav ul li { float:left; width:187px; } #kinderfeestjes-new ul#sidenav li a.doe-spel { background:#8eaf1b; } #kinderfeestjes-new ul#sidenav li a.feest-doe-spel { background:#acc458; border-bottom:solid 1px #fff; } #kinderfeestjes-new ul#sidenav li a.creatief { background:#f98a07; } #kinderfeestjes-new ul#sidenav li a.feest-creatief { background:#feab4a; border-bottom:solid 1px #fff; } #kinderfeestjes-new ul#sidenav li a.sport { background:#2faff9; } #kinderfeestjes-new ul#sidenav li a.feest-sport { background:#9edafc; border-bottom:solid 1px #fff; } #kinderfeestjes-new ul#sidenav li a.cultuur-film { background:#eee000; } #kinderfeestjes-new ul#sidenav li a.feest-cultuur-film { background:#f2ec8e; border-bottom:solid 1px #fff; } #kinderfeestjes-new ul#sidenav li a.outdoor { background:#fb6bf0; } #kinderfeestjes-new ul#sidenav li a.feest-outdoor { background:#fed4fb; border-bottom:solid 1px #fff; } #kinderfeestjes-new ul#sidenav li a.ontdek { background:#fe0000; } #kinderfeestjes-new ul#sidenav li a.feest-ontdek { background:#ff8787; border-bottom:solid 1px #fff; } /* 8.Home ------------------------------------------------------------*/ body#home { background:url(../_img/tmpl/bg_groen_body_home.jpg) repeat-x; } body#home #content { border:none; padding:0; width:940px; background:url(../_img/tmpl/imlovinit.jpg) no-repeat right bottom; height:212px; min-height:0px; } body#home #masthead { height:272px; background:url(../_img/tmpl/bg_groen_masthead_home.jpg) no-repeat; margin-bottom:20px; } *html body#home #masthead { margin-bottom:-195px; } body#home ul#mainnav { margin-top:228px; } ul#banners { height:212px; margin-bottom:0px; } ul#banners li { width:200px; display:block; margin-right:5px; float:left; } ul#banners li a span { display:block; border-top:5px solid #000; background-color:#d8d8d8; padding-left:5px; line-height:34px; font-size:11px; color:#666; } ul#banners li a span:hover { color:#000; } ul#banners li.last { width:100px; margin-left:5px; } *html ul#banners li.last { margin-left:1px; } /* 9.Restaurants ------------------------------------------------------------*/ ul#icons { margin-bottom:15px; float:left; } ul#icons li { width:60px; height:60px; display:block; float:left; margin:0 10px 10px 0; } table#openingstijden, table#activiteiten { margin:5px 0 18px 0; } table#activiteiten { width:100%; border-top:#fac700 1px solid; } table#activiteiten td.datum { width:80px; font-weight:bold; } table#activiteiten tr.uneven { background:#fbf4d9; } table#activiteiten tr td { border-bottom:#fac700 1px solid; padding:4px 4px; } table#openingstijden { border-bottom:1px dashed #999999; padding-bottom:3px; } table#openingstijden td.dag { width:50px; font-weight:bold; } table#openingstijden td.restaurant { width:100px; } table#openingstijden td.drivelane {width:55px; } table#openingstijden tr.toprow td { border-bottom:1px dashed #999999; font-style:italic; } table#openingstijden tr.firstrow td { padding-top:3px; } #plattegrond { border:#999 1px solid; width:459px; height:198px; } #images img { width:200px; height:200px; border:1px solid #999; margin-bottom:20px;} #images img.kampen { width:200px; height:auto; } #images img.sponsor_image { width:200px; height:90px; border:1px solid #999; text-align:center; line-height:10px; vertical-align:middle; margin-bottom:20px;} /* 10.Kinderfeestjes ------------------------------------------------------------*/ body#kinderfeestjes #content { width:718px; padding-right:0px } body#kinderfeestjes #main { width:410px; } #kinderfeestjes-new #main { width:350px; } #table_feestje { width:100%; margin-top:10px; } #table_feestje td { padding:7px; background-color:#d6b4d3; font-weight:bold; } #table_feestje td.omschrijving { width:70px; background:#76056d; color:#FFF; border-right:3px solid #FFF; } #table_feestje td.midden { padding:0 7px; } #kinderfeest_images { float:left; } #feestje-gegevens { width:718px; margin-bottom:20px; float:left; } .overzicht { width:410px; border-top:solid 1px #fff; float:left; margin-right:20px; } .overzicht tr td { padding:10px 0; border-bottom:solid 1px #fff; } .overzicht tr.last td { border:none; } .links { width:100px; font-weight:bold; } ul#overzicht { border-top:solid 1px #fff; width:692px; } ul#overzicht li a { border-bottom:solid 1px #fff; padding:10px 0; float:left; width:336px; font-weight:bold; line-height:50px; margin-right:20px; color:#fff; } ul#overzicht li a:hover { text-decoration:underline; } ul#overzicht li a .thumb { float:left; border:solid 1px #ccc; margin:0 15px 0 5px; background:#fff; } ul#overzicht li a.last { margin-right:0; } ul#overzicht.enkel { width:356px; } #kalender { margin-top:50px; float:left; } .kalender { margin-top:20px; float:left; color:#000; } .kalender button { height:22px; width:90px; margin:0; text-indent:-9999px; background:#9fbe35; float:left; } .kalender button:hover { background:#758c27; } .kalender tr.top td { font-weight:bold; text-align:center; border:none; line-height:15px; color:#fff; text-shadow:#000 0 3px 3px; } .kalender .datum { width:90px; background:#eee; } .kalender .grey { background:#eee; } .kalender .time { width:50px; text-align:center; background:#fac700; font-weight:bold; } .kalender td { border:solid 1px #fff; line-height:22px; height:22px; padding:0; margin:0; } h2.huidige-week { float:left; font-size:25px; } #filter_border { float:left; padding:5px 12px; background:#d0abcd; border-left:solid 3px #fac700; border-bottom:solid 1px #fff; width:163px; } #filter_border ol { margin:0; float:left; width:163px; } #filter_border ol li { border:none; float:left; width:163px; } select.side { width:153px; } .resultaten { font-size:10px; font-weight:bold; color:#76056d; margin-top:15px; float:left; width:100px; } button.wissen { color:#fff; background:none; padding:0; text-transform:none; margin-bottom:5px; font-size:10px; font-style:italic; float:left; width:153px; } button.zoek { background:url(../_img/tmpl/buttons.png); width:77px; padding:0; text-indent:-9999px; height:24px; } button.zoek:hover { background-position:0 -24px; } a.reserveren, button.reserveren { background:url(../_img/tmpl/buttons.png) -77px 0; width:105px; padding:0; text-indent:-9999px; height:24px; display:block; float:left; } a.reserveren:hover, button.reserveren:hover { background-position:-77px -24px; } button.vorige-week, span.vorige-week { background:url(../_img/tmpl/buttons.png) -182px 0; width:105px; padding:0; text-indent:-9999px; height:24px; float:left; } button.vorige-week:hover { background-position:-182px -24px; } span.vorige-week { background-position:-182px -48px; float:left; } button.volgende-week { background:url(../_img/tmpl/buttons.png) -287px 0; width:105px; padding:0; text-indent:-9999px; height:24px; float:left; } button.volgende-week:hover { background-position:-287px -24px; } button.akkoord { background:url(../_img/tmpl/buttons.png) -497px; width:105px; padding:0; text-indent:-9999px; height:24px; } button.akkoord:hover { background-position:-497px -24px; } button.niet-akkoord { background:url(../_img/tmpl/buttons.png) -392px; width:105px; padding:0; text-indent:-9999px; height:24px; } button.niet-akkoord:hover { background-position:-392px -24px; } input.betaal { background:url(../_img/tmpl/buttons.png) -602px; width:105px; padding:0; text-indent:-9999px; height:24px; border:none; cursor:pointer; } input.betaal:hover { background-position:-602px -24px; } #kinderfeestjes-new #content { background:url(../_img/tmpl/bg_feestjes_algemeen.jpg) no-repeat #390335; color:#fff; float:left; min-height:409px; } #akkoord #content, #content.betalen { margin-left:190px; } #meldingen #content { margin-left:190px; background:url(../_img/tmpl/bg_feestjes_algemeen.jpg) no-repeat #390335; color:#fff; min-height:409px; } /* 10.Kinderfeestjes achtergronden ------------------------------------------------------------*/ #kinderfeestjes-new #content.algemeen { background:url(../_img/tmpl/bg_feestjes_algemeen.jpg) no-repeat #390335; } #kinderfeestjes-new #container.algemeen { background:url(../_img/tmpl/bg_container_algemeen.gif) repeat-y right; } #kinderfeestjes-new h1, #kinderfeestjes-new #content.algemeen h1, #kinderfeestjes-new #content.zoeken h1, #meldingen h1, #kinderfeestjes-new #content.algemeen a, #kinderfeestjes-new #content.zoeken a, #meldingen a, #kinderfeestjes-new a { color:#f8c700; } #kinderfeestjes-new #content.zoeken { background:url(../_img/tmpl/bg_zoeken.jpg) no-repeat; } #kinderfeestjes-new #container.zoeken { background:url(../_img/tmpl/bg_container_algemeen.gif) repeat-y right; } #kinderfeestjes-new #content.doe-spel { background:url(../_img/tmpl/bg_doespel.jpg) no-repeat; } #kinderfeestjes-new #content.doe-spel_start { background:url(../_img/tmpl/bg_doespel_start.jpg) no-repeat; } #kinderfeestjes-new #container.doe-spel { background:url(../_img/tmpl/bg_container_doespel.gif) repeat-y right; } #kinderfeestjes-new #content.creatief { background:url(../_img/tmpl/bg_creatief.jpg) no-repeat; } #kinderfeestjes-new #content.creatief_start { background:url(../_img/tmpl/bg_creatief_start.jpg) no-repeat; } #kinderfeestjes-new #container.creatief { background:url(../_img/tmpl/bg_container_creatief.gif) repeat-y right; } #kinderfeestjes-new #content.sport { background:url(../_img/tmpl/bg_sport.jpg) no-repeat #18577c; } #kinderfeestjes-new #content.sport_start { background:url(../_img/tmpl/bg_sport_start.jpg) no-repeat #18577c; } #kinderfeestjes-new #container.sport { background:url(../_img/tmpl/bg_container_sport.gif) repeat-y right; } #kinderfeestjes-new #content.cultuur-film { background:url(../_img/tmpl/bg_cultuurfilm.jpg) no-repeat; color:#000; } #kinderfeestjes-new #content.cultuur-film_start { background:url(../_img/tmpl/bg_cultuurfilm_start.jpg) no-repeat; color:#000; } #kinderfeestjes-new #container.cultuur-film { background:url(../_img/tmpl/bg_container_cultuurfilm.gif) repeat-y right; } #kinderfeestjes-new #content.cultuur-film_start h1, #kinderfeestjes-new #content.cultuur-film h1, #kinderfeestjes-new #content.cultuur-film a, #kinderfeestjes-new #content.cultuur-film_start a { color:#000; } #kinderfeestjes-new #content.outdoor { background:url(../_img/tmpl/bg_outdoor.jpg) no-repeat; } #kinderfeestjes-new #content.outdoor_start { background:url(../_img/tmpl/bg_outdoor_start.jpg) no-repeat; } #kinderfeestjes-new #container.outdoor { background:url(../_img/tmpl/bg_container_outdoor.gif) repeat-y right; } #kinderfeestjes-new #content.ontdek { background:url(../_img/tmpl/bg_ontdek.jpg) no-repeat; } #kinderfeestjes-new #content.ontdek_start { background:url(../_img/tmpl/bg_ontdek_start.jpg) no-repeat; } #kinderfeestjes-new #container.ontdek { background:url(../_img/tmpl/bg_container_ontdek.gif) repeat-y right; } /* 11.Acties ------------------------------------------------------------*/ body#acties #content { padding:0px; width:744px; height:396px; } /* 12.Werk ------------------------------------------------------------*/ body#werk #content { background:url(../_img/tmpl/werk/bg_werk_normaal.jpg) no-repeat #f6f0e4; min-height:374px; } body#welkom #content { background:url(../_img/tmpl/werk/bg_werk_welkom.jpg) no-repeat; height:374px; padding-bottom:0px; } body#werk #main, body#welkom #main { width:385px; } body#werk #content ul, body#welkom #content ul { list-style:disc; list-style-position:outside; margin-left:15px; } body#werk #content ul li, body#welkom #content ul li { margin-bottom:2px; } #werk #content ul li a, #welkom #content ul li a { color:#000; text-decoration:underline; font-weight:bold; } body#werk #content ul li a:hover, body#welkom #content ul li a:hover { color:#FF0000; } .van { font-weight:bold; margin-right:65px; } body#werk #content h2 { font-size:16px; text-transform:uppercase; } body#werk #content h3 { font-size:14px; clear:both; margin-bottom:4px; } body#werk #content ol.opsomming { list-style:decimal; list-style-position:outside; margin-left:20px; } body#werk #content h1, #welkom #content h1 { background: url(../_img/tmpl/werk/koppen_werk.jpg) no-repeat top left; text-indent:-9999px; height:26px; margin-bottom:3px; } body#werk #content h1.werkenbij { background-position:0 -26px; } body#werk #content h1.noteam { background-position:0 -52px; } body#werk #content h1.nocareer { background-position:0 -104px; } body#werk #content h1.workalone { background-position:0 -130px; } body#werk #content h1.training { background-position:0 -312px; } body#werk #content h1.leerweg { background-position:0 -364px; } body#werk #content h1.management { background-position:0 -338px; } body#werk #content h1.crewlid { background-position:0 -130px; } body#werk #content h1.hostess { background-position:0 -156px; } body#werk #content h1.trainee { background-position:0 -182px; } body#werk #content h1.floormanager { background-position:0 -208px; } body#werk #content h1.assistentmanager { background-position:0 -234px; } body#werk #content h1.eersteassistentmanager { background-position:0 -260px; } body#werk #content h1.restaurantmanager { background-position:0 -286px; } /* 13.Sponsoring ------------------------------------------------------------*/ body#sponsoring #content ul { list-style:disc; margin-left:15px; font-weight:bold; } body#sponsoring #content p + ul { margin-top:-10px; } body#sponsoring #content a { text-decoration:underline; } #sponsorloop { width: 424px; padding-top: 92px; margin-right: 20px; background: url(../_img/sponsor/sponsorloop/sponsorloop-top.jpg) no-repeat #00bbf1; float: left; } #sponsoring-landing #content a { color: #233285; font-weight: bold; } #sponsorloop_body { width: 358px; padding: 12px 33px 0 33px; background: url(../_img/sponsor/sponsorloop/sponsorloop_body.jpg) repeat-y; position: relative; } #sponsorloop_body p { margin-bottom: 0; padding-bottom: 12px; font-size: 11px; line-height: 16px; } #sponsorloop_body em { color: #15257d; font-size: 20px; font-weight: bold; } #sponsorloop #afsluiter { width: 210px; padding: 25px 194px 20px 20px; margin-bottom: 0; font-size: 9px; line-height: 13px; color: #233285; background: url(../_img/sponsor/sponsorloop/sponsorloop_bottom.jpg) no-repeat; position: relative; } #sponsorloop #afsluiter img { position: absolute; width: 159px; height: 64px; bottom: 20px; right: 20px; } #logos { display: block; width: 117px; height: 75px; position: absolute; bottom: 15px; right: 20px; overflow: hidden; } #logos img { float: left; } #ijsbeelden_festival { float: left; width: 176px; border: 1px solid #999; padding: 12px; padding-top: 206px; margin-bottom: 0; font-size: 11px; line-height: 15px; background: url(../_img/sponsor/sponsorloop/ijsbeelden.jpg) no-repeat; } #sponsoren { overflow: hidden; clear: both; } #sponsoring-landing #content #sponsoren img { float: left; width: 200px; height: 90px; border: 1px solid #999; margin-top: 20px; margin-right: 20px; } #sponsoring-landing #content #sponsoren a { border: none; } /* 14.Contact/Formulieren ------------------------------------------------------------*/ ol li { margin-bottom:4px; } label { display:block; float:left; width:135px; } select { width:200px; margin-bottom:4px; } .text { border:1px solid #999; background:#fff; padding:2px; height:15px; width:240px; font-family:Arial, Helvetica, sans-serif; font-size:12px; } .file { border:1px solid #999; background:#fff; padding:0px; height:20px; width:240px; font-family:Arial, Helvetica, sans-serif; font-size:12px; } .area { height:70px; overflow:hidden; } .small { width:60px; margin-right:20px; } .cijfers { width:50px; } .letters { width:25px; } .radio { margin-bottom:3px; } .verplicht { font-size:11px; margin-right:35px; } .alert { color:#FF0000; } button, a.button { background:#000; padding:2px; height:20px; border:none; cursor:pointer; text-transform:uppercase; color:#fac700; font-size:11px; } *html button { padding:2px; } button:hover, a.button:hover { color:#FFF; } .statusok { font-weight:bold; color:#34b306; margin-bottom:15px; } .statuserror { font-weight:bold; color:#e72b31; margin-bottom:15px; } .kader { background:#fff; width:360px; padding:10px; line-height:10px; border:solid 2px #000; } .checkbox { position:relative; display:inline; margin-left:-1px; } /* 15.Classes ------------------------------------------------------------*/ .fl { float:left; } .fr { float:right; } .lwr { text-transform:lowercase; } .cv_text {font-size:12px;} .onderschrift { margin-top:6px; font-style:italic; } .breed { width:150px; display:inline-block; } .border { border:solid 1px #fff; margin-bottom:15px; } .new { color:#f8c700; font-weight:bold; } #duurzaamste { margin-bottom:30px; float:left; border-top:solid 1px #ccc; border-bottom:solid 1px #ccc; padding:20px 10px 20px 0; } #duurzaamste img { margin-right:30px; } #duurzaamste p { margin-top:15px; margin-bottom:0; }