/* stylesheet template beijer-advies.nl (basic.css) INHOUD 1. Reset 2. Default 3. Headings 4. Links 5. Layout 6. Branding/Masthead 7. Navigation 8. Contact/Formulieren 9. Classes 10. Home COLOURS Groen = #409e28 Verandermanagement Paars = #69276b Huisvesting Blauw = #11599e Ontwerp Rood = #cc0900 /* 1.Reset ------------------------------------------------------------*/ @import url(reset.css); /* 2.Default ------------------------------------------------------------*/ body { font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:21px; color:#666; behavior:url(../_js/csshover.htc); } p, dl, ol, ul { margin-bottom:18px; } /* 3.Headings ------------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { color:#409e28; } #verandermanagement h1, #verandermanagement h2, #verandermanagement h3 { color:#69276b; } #huisvesting h1, #huisvesting h2, #huisvesting h3 { color:#11599e; } #ontwerp h1, #ontwerp h2, #ontwerp h3 { color:#cc0900; } h1 { font-size:22px; margin-bottom:18px; } h1 span { font-size:14px; color:#666; } h2 { font-size:18px; margin-bottom:18px; } h3 { font-size:14px; } h4 { font-size:12px; } /* 4.Links ------------------------------------------------------------*/ a { text-decoration:none; color:#409e28; } a:hover { text-decoration:underline; } /* 5.Layout ------------------------------------------------------------*/ #wrapper { width:980px; margin:auto; } #content { float:left; min-height:350px; height:auto !important; height:350px; border-bottom:dashed 1px #999; margin-bottom:10px; width:940px; margin-left:20px; padding-bottom:10px; position:relative; } *html #content { margin-left:10px; } /* 6.Branding/Masthead ------------------------------------------------------------*/ #masthead { background:url(../_img/tmpl/masthead.gif) no-repeat; float:left; width:980px; height:163; line-height:0; font-size:12px; } #masthead a.logo { float:left; text-indent:-9000px; display:block; height:120px; width:134px; margin-bottom:2px; } #masthead p { float:left; width:960px; padding-left:20px; font-size:11px; height:37px; line-height:38px; margin-bottom:0; } #masthead p, #masthead a { color:#6c6c6c; } #masthead p a:hover { text-decoration:underline; } #masthead li { float:left; } #masthead li.last a { background-image:none; } /* 7.Navigation ------------------------------------------------------------*/ ul#littlenav { float:left; margin:100px 0 0 0; text-transform:uppercase; line-height:12px; margin-bottom:0; list-style:none; } ul#littlenav li { padding-right:22px; background:url(../_img/tmpl/bg_lilnav.gif) no-repeat right; } ul#littlenav li.last { background:none; } ul#littlenav li a { color:#d9ecd4; } ul#littlenav li a:hover, ul#littlenav li a.active { color:#fff; text-decoration:none; } ul#mainnav { background:#e6e6df; height:41px; width:960px; padding-right:20px; float:left; margin-bottom:0; line-height:41px; list-style:none; } ul#mainnav li { float:left; } ul#mainnav li.last { background:none; padding-right:0px; } ul#mainnav li a { display:block; background:url(../_img/tmpl/navigatie.gif) no-repeat; text-indent:-9999px } ul#mainnav li a.home { width:80px; } ul#mainnav li a.home:hover { background-position:0 -41px; } ul#mainnav li a.homeactive { width:80px; background-position:0 -82px; } ul#mainnav li a.verandermanagement { width:198px; background-position:-80px 0; } ul#mainnav li a.verandermanagement:hover { background-position:-80px -41px; } ul#mainnav li a.verandermanagementactive { width:198px; background-position:-80px -82px; } ul#mainnav li a.huisvesting { width:119px; background-position:-278px 0; } ul#mainnav li a.huisvesting:hover { background-position:-278px -41px; } ul#mainnav li a.huisvestingactive { width:119px; background-position:-278px -82px; } ul#mainnav li a.interieuradvies { width:226px; background-position:-396px 0; } ul#mainnav li a.interieuradvies:hover { background-position:-396px -41px; } ul#mainnav li a.interieuradviesactive { width:226px; background-position:-396px -82px; } ul#mainnav li a.klantlogin { width:90px; background: url(../_img/tmpl/btn_klantlogin.gif) no-repeat 0 0; margin-left:247px; } ul#mainnav li a.klantlogin:hover { background-position:0 -41px; } ul#subnav { float:left; width:220px; list-style:none; } ul#subnav li { border-bottom:1px solid #FFF; } ul#subnav li a { background:#e6e6df; color:#5a5c5a; width:200px; padding:5px 10px; display:block; line-height:16px; } ul#subnav li a:hover { text-decoration:none; background:#ccc url(../_img/tmpl/bg_subbutton_grijs.gif) right no-repeat; color:#4e504e; } ul#subnav li a.active, ul#subnav li a.active:hover { background:#409e28 url(../_img/tmpl/bg_subbutton.gif) right no-repeat; color:#FFF; text-decoration:none; } #verandermanagement ul#subnav li a.active { background:#69276b url(../_img/tmpl/bg_subbutton_paars.gif) right no-repeat; } #huisvesting ul#subnav li a.active { background:#11599e url(../_img/tmpl/bg_subbutton_blauw.gif) right no-repeat; } #ontwerp ul#subnav li a.active { background:#cc0900 url(../_img/tmpl/bg_subbutton_rood.gif) right no-repeat; } ul#subnav li.subbutton a { background:#e7f3e4; } ul#subnav li.subbutton a:hover, ul#subnav li.subbutton a.active { background:#cfe7c9; color:#5a5c5a; } /* 8.Footer ------------------------------------------------------------*/ #footer { float:left; } #footer p { height:45px; line-height:45px; float:left; width:980px; text-align:center; font-size:11px; background-color:#e6e6df; color:#666;} #footer span { margin:0px 5px;} #footer a { color:#666; } #footer a:hover { text-decoration:underline; } /* 8.Template ------------------------------------------------------------*/ #inleiding { width:940px; border-bottom:1px dashed #999; margin:0 0 10px 20px; padding:35px 0 25px 0; float:left; } *html #inleiding { margin-left:10px; } #inleiding p { color:#409e28; font-size:24px; font-weight:normal; margin:0 0 0 270px; } #verandermanagement #inleiding p { color:#69276b; } #huisvesting #inleiding p { color:#11599e; } #ontwerp #inleiding p { color:#cc0900; } /* 8.Contact/Formulieren ------------------------------------------------------------*/ ol li { margin-bottom:5px; list-style:none; } label { display:block; float:left; width:130px; padding-top:3px; } .text { border:1px solid #999; background:#fff; padding:2px; height:20px; font-size:13px; line-height:20px; color:#666; width:265px; font-family:Arial, Helvetica, sans-serif; } .area { height:140px; overflow:hidden; } .small { width:60px; margin-right:20px; } .radio { margin-bottom:3px; } .verplicht { font-size:11px; margin-right:35px; } .alert { color:#FF0000; } button, a.button { background:url(../_img/tmpl/btns.gif) no-repeat; display:block; text-indent:-9999px; border:none; cursor:pointer; height:22px; margin-bottom:0; } button.send { width:155px; background-position:0 0; } button.send:hover { background-position:-155px 0; } *html button.send:hover { background-position:0 0; } a.projecten { width:126px; background-position:-310px 0; float:left; } a.projecten:hover { background-position:-436px 0; } *html a.projecten:hover { background-position:-310px 0; } a.beijer { width:199px; background-position:-562px 0; margin-left:20px; } a.beijer:hover { background-position:-761px 0; } *html a.beijer:hover { background-position:-562px 0; } a.volgende { width:83px; background-position:-960px 0; float:left; } a.volgende:hover { background-position:-1055px 0; } *html a.volgende:hover { background-position:-960px 0; } a.vorige { width:64px; background-position:-1149px 0; float:left; } a.vorige:hover { background-position:-1223px 0; } *html a.vorige:hover { background-position:-1149px 0; } a.down { width:98px; background-position:-2004px 0; } a.down:hover { background-position:-2102px 0; } *html a.down:hover { background-position:-2004px 0; } a.bekijk { width:125px; background-position:-1877px 0; float:left; } a.leesmeer { width:89px; background-position:-1387px 0; float:left; } a.download { width:137px; background-position:-1614px 0; float:left; } .statusok { font-weight:bold; color:#409e28; } .statuserror { font-weight:bold; color:#F00; } #count { float:right; font-size:14px; width:197px; line-height:22px; color:#666; } #teller { width:50px; text-align:center; float:left; } #teller span { width:10px; margin:0 2px; } /* 9.Classes ------------------------------------------------------------*/ .fl { float:left; } .fr { float:right; } p.melding { } /* 9.Home ------------------------------------------------------------*/ #home #inleiding { width:940px; float:left; margin:0 20px; border-bottom:none; border-bottom:dashed 1px #999; padding:0;} *html #home #inleiding { margin-left:10px; } #home #inleiding h1 { color:#409e28; font-size:26px; margin-top:50px; margin-left:20px; } #home #inleiding p { font-size:14px; line-height:24px; color:#666; margin-left:20px; margin-bottom:15px; } #home #content { background:none; width:940px; margin-left:20px; padding:0px; min-height:200px; height:auto !important; height:200px; } *html #home #content { margin-left:10px; } ul#homeitems { float:left; margin:10px 0 0 0; list-style:none; height:380px; } ul#homeitems li { float:left; } ul#homeitems li a { display:block; text-indent:-9999px; width:300px; height:370px; margin-right:20px; background:url(../_img/home/subjects.jpg) no-repeat;} ul#homeitems li a.verandermanagement { background-position:0 0; } ul#homeitems li a.verandermanagement:hover { background-position:-300px 0; } ul#homeitems li a.huisvesting { background-position:0 -370px; } ul#homeitems li a.huisvesting:hover { background-position:-300px -370px; } ul#homeitems li a.ontwerp { background-position:0 -740px; margin-right:0; } ul#homeitems li a.ontwerp:hover { background-position:-300px -740px; } #slideshow { float:right; width:470px; height:238px; position:relative; background-color:#FFF; margin-bottom:0px; } #slideshow img { position:absolute; top:0px; left:0px; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } #home #nieuws { width:300px; float:left; padding:15px 20px 15px 0; border-top:dashed 1px #999; } #home #nieuws h3 { font-weight:bold; color:#666; font-size:14px; height:70px; } #home #nieuws .thumb { float:left; margin-right:15px; } #home #actueel_home { width:620px; float:left; padding:15px 0; border-top:dashed 1px #999; } #home #nieuws h2, #home #actueel_home h2 { font-size:20px; margin-bottom:10px; } /* 9.Template ------------------------------------------------------------*/ .headimg { float:right; margin-bottom:10px; } #main { float:right; width:480px; padding:30px 30px 12px 30px; margin-right:160px; } *html #main { margin-right:80px; } body#referenties #main, body#nieuws #main { margin-right:0px; padding-left:50px; width:670px; padding-right:0; } .column { width:320px; float:left; margin-right:30px; } .last { margin-right:0; } #main ul#overzicht { width:670px; border-top:1px solid #CCC; float:left; list-style:none; margin:0; } #main ul#overzicht li { padding:10px 0; border-bottom:1px solid #CCC; float:left; width:670px; } #main ul#overzicht li img { float:left; margin-right:40px; } #main ul#overzicht li div { float:left; width:450px; padding:10px 10px 0 0; } #main ul#overzicht li p, #main ul#overzicht li h2 { margin-bottom:0px; } #main ul#overzicht li h2 { margin-top:15px; } a.project { width:130px; height:26px; line-height:27px; padding-left:10px; display:block; background:#999; text-transform:uppercase; color:#FFF; font-size:12px; float:right; cursor:pointer; position:absolute; right:0; top:213px; } a.project:hover { text-decoration:none; } body#huisvesting a.project { background:#11599e url(../_img/tmpl/bg_projectbuttons_blauw.gif) no-repeat right 0; } body#ontwerp a.project { background:#cc0900 url(../_img/tmpl/bg_projectbuttons_rood.gif) no-repeat right 0; } body#verandermanagement a.project { background:#69276b url(../_img/tmpl/bg_projectbuttons_paars.gif) no-repeat right 0; } body#huisvesting a.project:hover { background:#0d4b86 url(../_img/tmpl/bg_projectbuttons_blauw.gif) no-repeat right -26px; } body#ontwerp a.project:hover { background:#af0801 url(../_img/tmpl/bg_projectbuttons_rood.gif) no-repeat right -26px; } body#verandermanagement a.project:hover { background:#5e164b url(../_img/tmpl/bg_projectbuttons_paars.gif) no-repeat right -26px; } ol#projectlist { list-style:decimal; line-height:19px; color:#69276b; } ol#projectlist li a { color:#999; } /* 10.Projecten ------------------------------------------------------------*/ #projecten #content, #project #content { } #projecten h3 { font-size:15px; } #projecten #inleiding, #project #inleiding { width:940px; } #projecten #inleiding p { float:left; margin-left:0px; } #inleiding #filter { float:left; width:600px; } #inleiding #filter p { font-size:12px; color:#666; margin-left:20px; float:left; line-height:26px; margin-top:2px; } #inleiding #filter select { float:left; margin:5px 0 0 5px; } *html #inleiding #filter p { margin-top:0; } *html #inleiding #filter select { margin-top:2px; } #project #inleiding h1 { font-size:26px; margin-bottom:8px; } #project #inleiding { font-size:14px; } ul#projectoverzicht { float:left; margin-bottom:0; list-style:none; } ul#projectoverzicht li { float:left; display:block; width:220px; margin:0 20px 20px 0; height:232px; border-bottom:1px solid #CCC; } ul#projectoverzicht li.last { margin-right:0px; } ul#projectoverzicht li:hover { background:#e7f3e4; cursor:pointer; width:220px; } ul#projectoverzicht li div { padding:10px; } .projectnavigatie { float:left; padding:10px 0; border-bottom:1px dashed #999; width:940px; margin-left:20px; } *html .projectnavigatie { margin-left:10px; } .btm { border-bottom:0; border-top:1px dashed #999; padding-bottom:0px; } .omschrijving { width:380px; float:left; margin-right:100px; padding:20px 0 20px 0; } .gallerij { width:460px; float:left; padding-top:20px; } /* 10.2 Slideshow ------------------------------------------------------------*/ ul.gallery { width:460px; } .galleria { list-style:none; width:460px; float:left; } .galleria li { display:block; width:60px; height:60px; overflow:hidden; float:left; margin:0 20px 20px 0; } .galleria li.last { margin-right:0px; } .galleria li a { display:none; } .galleria li div { position:absolute; display:none; top:0; left:180px; } .galleria li div img { cursor:pointer; } .galleria li.active div img,.galleria li.active div{ display:block; } .galleria li img.thumb { cursor:pointer; top:auto; left:auto; display:block; width:auto; height:auto; } #main_image { width:460px; height:327px; float:left; position:relative; margin-bottom:20px; } a.zoom { position:absolute; bottom:0; right:0; background:url(../_img/tmpl/resize.gif) no-repeat; width:26px; height:20px; text-indent:-9999px; } a.zoom:hover { background-position:0 -20px; } #main_image img { width:460px; height:auto; float:left; } *html .galleria li div span {width:400px; } /* MSIE bug */ /* 11.Contact ------------------------------------------------------------*/ #contact #main { width:630px; padding:30px 30px 12px 50px; margin-right:10px; } h2.big { font-size:22px; } .doublecolumn { width:430px; float:left; margin-right:20px; } .smallcolumn { width:180px; float:left; } .smallcolumn span { width:55px; display:block; float:left; } #plattegrond { height:250px; width:700px; float:right; margin-bottom:10px; border:0; } /* 12.Error ------------------------------------------------------------*/ #error #inleiding { width:960px; padding-left:20px; } #error #content { background:none; padding:20px; width:960px; min-height:200px; height:auto !important; height:200px; } #main ul { margin-left:15px; } #referenties #main ul { list-style:none; margin-left:0; } body#nieuws #main #textblock { float:left; width:380px; } body#nieuws #main img { float:right; } .verander { color:#69276b; } /* 13. Bezuinigingen ------------------------------------------------------------*/ #actueel #main { width:640px; margin-right:0; } #actueel .mrgn { margin:30px 0; } #actueel h2.afsluiting { font-size:16px; border-top:solid 1px #409e28; padding-top:15px; }