/* CREDITS * ---------------------------------------------------------- * Title: Ramblaz - CSS Main Stylesheet * Author: David Candreva * Date: 19/08/08 * Last Edit: 19/08/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} html{height:100%; background:url(../images/layout/body_background_tile.png) repeat center 0;} body{min-height:100%; background:url(../images/layout/body_background.png) repeat-x center 0; color:#202020} /*selectors*/ strong,b{font-weight:bold; color:#d95936} em{font-style:italic} a{outline:none; color:#FFF} a:hover{text-decoration:none} .clear{clear:both} button{cursor:pointer;} a.more_right{padding-right:13px; background:url(../images/layout/bullet_arrow.gif) no-repeat right center} .ntm{margin-top:0 !important;} /* Container ---------------------------------------------------------- */ div#container{width:960px; margin:0 auto; position:relative; height:auto !important; min-height:100%;} /* Header ---------------------------------------------------------- */ div#header{width:960px; padding-top:29px; height:115px; background:url(../images/layout/header_background.png) no-repeat left bottom} /*headings*/ div#header h1{width:280px; height:62px; margin:11px 0 0 16px; float:left; display:inline} div#header h1 a{width:280px; height:62px; display:block; text-indent:-9000px} div#header h2{position:absolute; top:144px; width:295px; text-indent:-9000px; font-size:14px; right:0; color:#FFF; height:24px; background:url(../images/layout/header_subtitle.png) no-repeat 0 0} /*servicelinks*/ div#header ul.servicelinks{position:absolute; left:16px; top:9px} div#header ul.servicelinks li{float:left; margin:0 40px 0 0} div#header ul.servicelinks li a{font-size:11px; padding:0 0 0 16px} div#header ul.servicelinks li a.email{background:url(../images/layout/icon_email.gif) no-repeat left center} div#header ul.servicelinks li a.sitemap{background:url(../images/layout/icon_sitemap.gif) no-repeat left center} /*main_links*/ div#header ul.main_links{height:30px; position:absolute; left:14px; top:114px; z-index:60; width:612px; background:url(../images/layout/main_menu_background.png) no-repeat 0 0} div#header ul.main_links li{float:left; margin-right:6px} div#header ul.main_links li.last{margin:0} div#header ul.main_links li a{display:block; float:left; height:30px; text-indent:-9000px; width:97px} div#header ul.main_links li a:hover{background:url(../images/layout/main_menu_background.png) left bottom} div#header ul.main_links li a.home:hover{background-position:0 -30px} div#header ul.main_links li a.cases:hover{background-position:-103px -30px} div#header ul.main_links li a.about:hover{background-position:-206px -30px} div#header ul.main_links li a.product:hover{background-position:-309px -30px} div#header ul.main_links li a.logistics:hover{background-position:-412px -30px} div#header ul.main_links li a.references:hover{background-position:-515px -30px} /* Breadcrumbs ---------------------------------------------------------- */ div#breadcrumbs{height:24px; background:url(../images/layout/breadcrumbs_tile.png) repeat-x 0 0} div#breadcrumbs ol{height:18px; font-size:11px; padding:6px 0 0 39px; background:url(../images/layout/ramblaz_icon.gif) no-repeat 14px 2px} div#breadcrumbs ol li{float:left; margin:0 7px 0 0; color:#FFF; text-transform:lowercase;} div#breadcrumbs ol li a{font-size:11px; padding:0 11px 0 0; text-transform:lowercase; background:url(../images/layout/breadcrumbs_a_bullet.gif) no-repeat right 5px} /* Content ---------------------------------------------------------- */ div#content{width:886px; padding:31px 38px 40px 30px; background:#e5f2fe; border:3px solid #FFF; border-top:0} div#main_content{width:659px; float:left} div#main_content_big{width:100%;} /*product_detail*/ div.product_detail{background:#fffeec; width:625px; margin:20px 0; padding:11px 10px; border:2px solid #f7f6dc; overflow:hidden;} div.product_detail h2{font-size:24px; color:#579cc0; margin:8px 0;} div.product_detail h3{font-size:20px; color:#d95936; margin:14px 0;} div.product_detail div.image{width:636px; margin-left:-9px; background:url(../images/layout/product_detail_image_tile.png) repeat-y 0 0} div.product_detail div.image .top{background:url(../images/layout/product_detail_image_top.png) no-repeat 0 0; overflow:hidden; height:9px;} div.product_detail div.image .bottom{background:url(../images/layout/product_detail_image_bottom.png) no-repeat 0 0; overflow:hidden; height:9px;} div.product_detail div.image .padding{padding: 0 9px;} div.product_detail div.image .padding img{display:block; margin:0 auto;} /*buttons*/ div.btns{width:100%; clear:both; overflow:hidden;} div.btns a{float:left; margin-right:10px;} a.btn_products{width:92px; height:23px;text-indent:-9000px; display:block; background:url(../images/layout/btn_all_products.png) no-repeat 0 0;} a.btn_products:hover{background-position:left bottom;} a.btn_category{width:116px; height:23px; text-indent:-9000px; display:block; background:url(../images/layout/btn_to_category.png) no-repeat 0 0;} a.btn_category:hover{background-position:left bottom;} a.btn_cases{width:92px; height:23px; text-indent:-9000px; display:block; background:url(../images/layout/btn_all_cases.png) no-repeat 0 0;} a.btn_cases:hover{background-position:left bottom;} a.btn_catalog{width:174px; float:right !important; margin-right:40px !important; display:inline; height:23px; text-indent:-9000px; display:block; background:url(../images/layout/btn_catalog.png) no-repeat 0 0;} a.btn_catalog:hover{background-position:left bottom;} button.btn_quote{width:117px; border:0; height:23px; text-indent:-9000px; display:block; background:url(../images/layout/btn_quote_request.png) no-repeat 0 0;} button.btn_quote:hover{background-position:left bottom;} button.btn_blue{width:92px; border:0; height:26px; text-indent:-9000px; display:block; background:url(../images/layout/btn_submit_box.png) no-repeat 0 0;} button.btn_blue:hover{background-position:left bottom;} /*sub_background*/ div#main_content div.sub_background{width:635px; position:relative; line-height:18px; background:#fffeec; padding:11px 10px; overflow:hidden; border:2px solid #f7f6dc} /*product_list*/ div#main_content_big ul.product_list{width:890px} div#main_content_big ul.product_list li.middle{margin:0 13px;} ul.product_list{overflow:hidden; margin-top:8px; width:659px; margin-left:-4px;} ul.product_list li{float:left; padding:9px; margin-bottom:27px; width:183px; height:182px; background:url(../images/layout/product_list_background.png) no-repeat 0 0} ul.product_list li.middle{margin:0 28px} ul.product_list li div.image{height:155px;} ul.product_list li h3{ text-align:center; width:183px; height:22px; padding:6px 0 0 0} ul.product_list li h3 a{text-decoration:none;font-size:13px; font-weight:bold; padding-left:15px; background:url(../images/layout/bullet_arrow.gif) no-repeat 0 center} ul.product_list li h3 span{text-decoration:none; font-size:13px; color:#FFF; font-weight:bold; line-height:28px; padding-left:15px; background:url(../images/layout/bullet_arrow.gif) no-repeat 0 center} ul.product_list li h3 a:hover{color:#f3f3f3} div.text ul.submenu{position:absolute; right:6px; top:-4px; margin:0;} div.text ul.submenu li{float:left; margin-right:1px; background:url(../images/layout/submenu_bg.png) no-repeat left bottom; padding:0;} div.text ul.submenu li a{color:#FFF; float:left; text-decoration:none;line-height:30px; height:30px; display:block; padding:0 17px; background:url(../images/layout/submenu_right_bg.png) no-repeat right bottom} /*articles*/ div.text {line-height:17px;} div.text a{color:#d95936} div.text ul{margin:12px 0} div.text ul.center li{background:url(../images/layout/bullet_arrow.gif) no-repeat 0 6px;} div.text ul{height:100%;} div.text ul li{background:url(../images/layout/bullet_arrow.gif) no-repeat 0 3px; padding:0 0 0 21px; margin:4px 0;} div.articles h2, div.text h2{font-size:24px; color:#579cc0; margin:8px 0;} div.text h3{font-size:20px; color:#d95936; margin:14px 0;} div#main_content_big div.articles h2{margin-top:30px;} div#main_content_big p.pb{margin:0 0 30px;} /*images*/ ul.images li {margin:4px; float:left;} ul.images li img{float:left; border:2px solid #8BC7E2} ul.images li a:hover img{border:2px solid #01A6C8;} /*address*/ div.address{float:left} /*news*/ .news .image img{float:left;border:3px solid #8bc7e2; margin:6px 9px 6px 0;} .news .image a:hover img{border:3px solid #01A6C8;} /* Sidebar ---------------------------------------------------------- */ div#sidebar{float:right; width:197px} /*box*/ div#sidebar div.box{width:193px; background:#c9e3ef; border:2px solid #daf1fc; padding-bottom:9px; margin-bottom:12px} div#sidebar div.box a{color:#579cc0} div#sidebar div.box h2{color:#d95936; font-size:18px; padding:9px 0 9px 9px} div#sidebar div.box h3{padding:0 0 0 9px; height:21px; line-height:21px; color:#FFF; font-weight:bold; background:url(../images/layout/sidebar_box_subtitle_background.png) no-repeat 0 0} div#sidebar div.box div.text{padding:2px 9px 15px; line-height:18px; font-size:11px; overflow:hidden;} div#sidebar div.box a.more_right{font-size:11px; background-position:right 4px} /*news*/ div#sidebar div.news img{float:left; border:3px solid #8bc7e2; margin:6px 9px 6px 0;} div#sidebar div.news a:hover img{border:3px solid #01A6C8;} div#sidebar div.box ul.links{padding:2px 0 0 9px} div#sidebar div.box ul.links li{ line-height:20px; } div#sidebar div.box ul.links li a{padding-left:13px; background:url(../images/layout/bullet_arrow.gif) no-repeat left center} div#sidebar form fieldset{padding:2px 0 0 9px} div#sidebar form fieldset input.field{border:0;margin:4px 0 0 0; padding:6px 9px 0; width:160px; height:24px; background:url(../images/layout/submit_bg_box.png)} div#sidebar form fieldset .entry{clear:both; overflow:hidden; width:100%; margin:6px 0;} div#sidebar form fieldset label{overflow:hidden; clear:both; display:block; width:100%; line-height:15px;} div#sidebar form fieldset label input{float:left; margin:0; margin-right:3px;} /* Footer ---------------------------------------------------------- */ div#footer{width:914px; padding:0 20px; border:3px solid #FFF; border-top:none; height:28px; color:#579cc0; clear:both; overflow:hidden; background:#d3e8f1 url(../images/layout/footer_background.png) no-repeat 0 0} /*list*/ div#footer ul{margin-top:8px; float:left} div#footer ul li{float:left; margin-right:19px; font-size:11px} div#footer ul li a{font-size:11px} /*inventis*/ div#footer a#inventis{margin-top:2px; float:right; height:19px; width:67px; text-indent:-9000px; background:url(../images/layout/inventis.png) no-repeat 0 0} div#footer a#inventis:hover{background:url(../images/layout/inventis.png) no-repeat left bottom} /* photoZoom ---------------------------------------------------------- */ div.photoZoom {padding:5px; background: #fff; border:1px solid #ebebeb; } div.photoZoom .tip{background: #fff url(/design/images/slimbox/loading.gif) no-repeat center; min-width:150px; min-height:150px;} div.photoZoom span{line-height:20px; clear:both; display:block; color:#5D5644; font-family:Arial,Helvetica,sans-serif; font-size:11px; overflow:hidden;} /* Logo's ---------------------------------------------------------- */ div.img_1{position:absolute; right:0; top:0; z-index:2; margin:0 -5px 0 0; width:247px; height:144px; background:url(../images/layout/img_1.png) no-repeat 0 0} div.img_2{position:absolute; left:286px; top:0; z-index:2; width:185px; height:144px; background:url(../images/layout/img_2.png) no-repeat 0 0} /* New homepage -------------------------*/ h2.home {font-size:24px; color:#579cc0; margin:8px 0;margin-top:30px;width:300px} a.blue {color:#579CC0;} div.homeLeft {width:410px;float:left;} div.homeRight {width:410px;float:right;} div.homeLeft div.sub_background, div.homeRight div.sub_background {width:369px; position:relative; line-height:18px; background:#fffeec; padding:11px 10px; overflow:hidden; border:2px solid #f7f6dc;height:54px;text-align: justify} div.homeLeft ul.product_list li, div.homeRight ul.product_list li {margin-bottom: 0} strong.homeStrong a {margin-top:10px;display: block;font-size:17px;color:#D95936;text-align: center;width:393px;}