/* CREDITS * ---------------------------------------------------------- * Title: Bovin Beton - CSS Main Stylesheet * Author: David Candreva * Date: 00/00/08 * Last Edit: 00/00/08 David Candreva * ---------------------------------------------------------- * Inventis - Web Architects - We design the Web! * www.inventis.be */ /* Algemene Styles ---------------------------------------------------------- */ textarea, body{font-family:Arial, Helvetica, sans-serif; font-size:12px;} body{background:#cfc6b7 url(../images/layout/body_background.png) repeat-x 0 0;} /*selectors*/ strong,b{font-weight:bold; color:#1e356e;} em{font-style:italic;} a{outline:none; color:#2d4786;} a:hover{text-decoration:none;} div.clear{clear:both;} /* Container ---------------------------------------------------------- */ div#container{width:973px; position:relative; margin:0 auto; background:url(../images/layout/container_tile.png) repeat; margin-bottom:3px;} div.beton{ z-index:50; width:280px; height:145px; position:absolute; right:20px; top:-1px;} /* Header ---------------------------------------------------------- */ div#header{width:961px; height:93px; padding:0 6px; clear:both; background:url(../images/layout/container_top.png) no-repeat 0 0;} /*logo*/ div#header img#bovin_logo{float:left; margin:36px 0 0 23px;} /*navigation*/ div#header div#navigation{width:681px; display:inline; margin-right:10px; float:right; padding-bottom:19px; height:60px; background:#1e356e url(../images/layout/navigation_bottom.png) no-repeat left bottom;} /*main*/ div#header div#navigation ul.main{margin:33px 0 0 34px; height:13px; overflow:hidden;} body#nl div#navigation ul.main{width:337px;} body#fr div#navigation ul.main{width:342px;} div#header div#navigation ul.main li{float:left;} body#nl div#header div#navigation ul.main li a{text-indent:-9000px; display:inline; float:left; background:url(../images/layout/navigation_main_background.png) no-repeat 0 0;} body#fr div#header div#navigation ul.main li a{text-indent:-9000px; display:inline; float:left; background:url(../images/layout/navigation_main_background_fr.png) no-repeat 0 0;} /*items_nl*/ body#nl div#header div#navigation ul.main li a.about{width:51px;} body#nl div#header div#navigation ul.main li a.about:hover{background-position:0 -13px;} body#nl div#header div#navigation ul.main li a.products{width:57px; margin-left:42px; background-position:-93px 0;} body#nl div#header div#navigation ul.main li a.products:hover{background-position:-93px -13px;} body#nl div#header div#navigation ul.main li a.downloads{width:62px; margin-left:39px; background-position:-189px 0;} body#nl div#header div#navigation ul.main li a.downloads:hover{background-position:-189px -13px;} body#nl div#header div#navigation ul.main li a.contact{width:43px; margin-left:43px; background-position:-294px 0;} body#nl div#header div#navigation ul.main li a.contact:hover{background-position:-294px -13px;} /*items_fr*/ body#fr div#header div#navigation ul.main li a.about{width:105px;} body#fr div#header div#navigation ul.main li a.about:hover{background-position:0 -13px;} body#fr div#header div#navigation ul.main li a.products{width:47px; margin-left:28px; background-position:-133px 0;} body#fr div#header div#navigation ul.main li a.products:hover{background-position:-133px -13px;} body#fr div#header div#navigation ul.main li a.downloads{width:62px; margin-left:28px; background-position:-208px 0;} body#fr div#header div#navigation ul.main li a.downloads:hover{background-position:-208px -13px;} body#fr div#header div#navigation ul.main li a.contact{width:43px; margin-left:28px; background-position:-299px 0;} body#fr div#header div#navigation ul.main li a.contact:hover{background-position:-299px -13px;} /*services*/ div#header ul.services{background:#13285d; height:19px; border:1px solid #425585; border-top:0; position:absolute; right:291px; top:0;} div#header ul.services li{float:left; color:#bcbcbc; padding:0 8px; height:19px; line-height:19px;} div#header ul.services li a{color:#bcbcbc; height:19px; line-height:19px; font-size:10px; text-decoration:none;} div#header ul.services li a:hover{color:#d2d2d2;} div#header ul.services li a.home{float:left; text-transform:lowercase; padding-left:16px; background:url(../images/layout/icon_home.gif) no-repeat 0 center;} div#header ul.services li a.sitemap{float:left; text-transform:lowercase; padding-left:16px; background:url(../images/layout/icon_sitemap.gif) no-repeat 0 center;} /* Content container ---------------------------------------------------------- */ div#content_container{clear:both; width:961px; padding:14px 6px 11px 6px;} /*content*/ div#content{background:#f3f9ff; overflow:hidden; color:#353535; width:669px; border:1px solid #e6f1fb; float:right; position:relative; z-index:40; padding:15px 18px;} div#content h1{color:#2d4786; visibility:hidden;height:36px; font-size:20px; padding:0 0 0 22px; background:url(../images/layout/title_bullet.gif) repeat-x left bottom;} div#content h2.subtitle{color:#bcbcbc; font-size:18px;font-weight:bold;margin:10px 0 10px 0} div#content h3 {color:#2d4786;font-size:16px;margin-top:10px;} div#content div.text{padding:8px 0; line-height:17px; width:100%;} div#content ul {margin:10px 0;} div#content ul li { background:transparent url(/design/images/layout/arrow.gif) no-repeat 0 3px;padding-left:25px } div#content ul li li{background:transparent url(/design/images/layout/arrow_second.gif) no-repeat 0 5px;padding-left:14px } div#content ul li li li{background:transparent url(/design/images/layout/arrow_thirth.gif) no-repeat 0 center;padding-left:12px } /*products*/ div.products {padding-bottom:18px; width:100%; clear:both;} div.cat_big{background:#FFF; height:200px; width:180px; padding:2px; float:left; border:1px solid #e4e4e4; text-align:center; position:relative; margin:0 18px 25px 12px;} div.last{margin-right:0;} .titleDiv{background:#1e356e; height:46px; overflow: hidden; } div.cat_big h2{ color:#FFF; height:46px; padding:0 5px; width:170px; display:table-cell; vertical-align:middle;} div.cat_big h2 a{font-size:12px; color:#FFF; text-decoration:none;} div.cat_big img{margin:2px auto; display:block; clear:both;} div.cat_big span{position:absolute; left:-23px; bottom:-20px;} div.cat_big span.bestrating{height:69px; width:93px; background:url(../images/layout/icon_bestrating.png) no-repeat 0 0;} div.cat_big span.riolering{height:73px; width:92px; background:url(../images/layout/icon_riolering.png) no-repeat 0 0;} div.cat_big span.natuursteen{height:75px; width:104px; background:url(../images/layout/icon_natuursteen.png) no-repeat 0 0;} /*products*/ div.products div.product_big{background:#FFF; width:146px; padding:2px; border:1px solid #e4e4e4; float:left; text-align:center; position:relative; margin:0 0 25px 10px;} div.products div.product_big h2{background:#1e356e; color:#FFF; width:150px; padding-top:2px;} div.products div.product_big h2 a{background:#1e356e; font-size:16px; line-height:26px;color:#FFF; text-decoration:none; display:block; width:150px; height:26px;} div.products div.product_big img{margin:2px auto; display:block; clear:both;width:150px;} div.products div.product_big span.stenen{background:url(../images/layout/icon_stenen.png) no-repeat 0 0; height:69px; width:93px; position:absolute; left:-23px; bottom:-20px;} /*products*/ div.product_detail{ width:214px; float:left; text-align:center; position:relative; margin:0 0 25px 10px; display:inline;} div.product_detail h2{background:#1e356e;height:46px; padding:0 5px; line-height:17px; color:#FFF; width:204px; display:table-cell; vertical-align:middle;} div.product_detail h2 span{ color:#FFF; text-decoration:none;} div.product_detail div.hWrapper {float:left;padding:2px;border:1px solid #e4e4e4;background:white;width:214px} /*images*/ div.product_detail .img_wrapper{text-align:center; padding:0;} div.product_detail .img_wrapper span{text-align:left; display:block; padding:0px; font-weight:bold;} div.product_detail .first_item{width:216px;margin-top:2px;} /*list_images*/ div.list_images{width:120px; float:left;} div.list_images .thumbs{clear:both; overflow:hidden; width:100%;} div.list_images .thumbs .img_wrapper{width: 100px; display:inline; overflow:hidden;} div.list_images .thumbs .img_wrapper img{margin:2px;display:block; float:left;padding:2px;border:1px solid #e4e4e4;background-color: white; } div.list_images .thumbs .margin{ margin-right:1px;margin-top:1px; display:inline; clear: both; } div.product_detail .thumbs{clear:both; overflow:hidden; width:100%;} div.product_detail .thumbs .img_wrapper{width: 100px; display:inline; overflow:hidden;} div.product_detail .thumbs .img_wrapper img{margin:2px;display:block; float:left;padding:2px;border:1px solid #e4e4e4;background-color: white; } div.product_detail .thumbs .margin{ margin-right:1px;margin-top:1px; display:inline; clear: both; } div.image{width:80px;float:left;margin:1px 1px 3px 1px;} div.image img {padding:1px;border:2px solid #e4e4e4;background-color:white;} div.image span{font-size:10px; line-height:12px; height:27px; overflow:hidden; text-align:center; display:block; width:69px;} div.left {float:left; width:250px; overflow:hidden; display:inline} div.right {float:right;width:405px} /*product*/ div#content h4{font-size:15px; color:#2D4786; margin-top:2px;} /*sidebar*/ div#content_container div#sidebar{float:left; width:254px;} /*item*/ div#sidebar div.box{margin:21px 0 0 -10px; padding:11px 0 0 0; height:152px; width:265px; position:relative; z-index:99; background:#f6f6f6 url(../images/layout/adres_blok.jpg) no-repeat 0 0;} div#sidebar div.box h2{padding:0 0 0 31px; width:232px; visibility:hidden; font-size:18px;background:#1e356e; border-left:1px solid #1e356e; color:#FFF; height:29px; line-height:29px;} div#sidebar div.box address{color:#FFF; padding:7px 0 0 0; } div#sidebar div.box div.inner{padding:0 0 9px 31px; width:234px; } div#sidebar div.box div.inner strong{color:#FFF;} div#sidebar div.box div.inner a{color:#FFF;} div#sidebar div.box address a{text-decoration:none;} div#sidebar div.box address a:hover{text-decoration:underline;} /*gradient*/ div#sidebar div.gradient{width:232px; padding:12px 0 0 22px; border-top:1px solid #FFF; background:url(../images/layout/gradient_tile.png) repeat-x 0 0;} div#sidebar div.gradient h3.hours{height:26px; visibility:hidden; margin-bottom:8px; line-height:26px; color:#1e356e; font-size:16px; padding-left:27px; background:url(../images/layout/icon_hours.png) no-repeat 0 0;} /* Footer ---------------------------------------------------------- */ div#footer{width:961px; margin:0 auto; clear:both; overflow:hidden; height:61px; background:url(../images/layout/footer_tile.png) repeat-x 0 0;} /*inventis*/ div#footer a#inventis{background:url(../images/layout/icon_inventis.png) no-repeat 0 0; width:72px; height:19px; display:block; overflow:hidden; text-indent:-9000px; float:right; margin:3px 9px 0 0;} div#footer a#inventis:hover{background:url(../images/layout/icon_inventis.png) no-repeat left bottom;}