/* CREDITS * ---------------------------------------------------------- * Title: Projectname - Screen Stylesheet * Author: David Candreva * Date: 00/00/09 * Last Edit: 00/00/00 David Candreva * ---------------------------------------------------------- * Inventis - Web Architects - We design the Web! * www.inventis.be */ /* Reset ---------------------------------------------------------- */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0; } table{ border-collapse:collapse; border-spacing:0; } fieldset,img{ border:0; } address,caption,cite,code,dfn,em,strong,th,var{ font-style:normal; font-weight:normal; } ol,ul{ list-style:none; } caption,th{ text-align:left; } h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal; } strong,b{ font-weight:bold; } em{ font-style:italic; } em strong,strong em { font-weight: bold; font-style: italic; } abbr,acronym{ border-bottom:1px dotted; cursor:help; } button{ cursor:pointer; } /* General elements ---------------------------------------------------------- */ textarea, body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; } body{ background:#efede6; } .clear{ clear:both; } a:focus{ outline:none; } /* Container ---------------------------------------------------------- */ div#container{ background:url(../images/layout/container_bg.png) repeat-x left top; margin:0 auto; width:981px;} /* Header ---------------------------------------------------------- */ div#header{ background:url(../images/layout/header/header_bg.png) no-repeat 0px 36px; height:360px; position:relative; width:981px;} div#header img.logo{ position:absolute; left:0; top:0;} div#header ul.nav{ position:absolute; top:25px; left:162px;} div#header ul.nav li{ float:left; margin-right:23px;} div#header ul.nav li a{ background:#dedbd3; color:#322c23; line-height:26px; font-size:16px; font-weight:bold; text-decoration:none; padding:5px 10px 3px 10px;} div#header ul.nav li a:hover, div#header ul.nav li.active a{ background:#857e71; color:#fff;} div#header div.lang{ position:absolute; right:0px; top:15px;} div#header div.lang a{ color:#212322; float:left;} div#header div.lang a:hover{text-decoration:none;} div#header div.lang span{ color:#212322; float:left; margin:0 5px;} div#header div.slogan1{font-size:22px; color:#fff; position:absolute; left:23px; top:300px;} div#header div.slogan2{font-size:20px; color:#fff; position:absolute; left:485px; top:110px; width:240px;} div#header h1 { text-indent: -9999px; height: 0; width: 0; } div.lang a.nl{ padding-right:23px; background:url(../images/layout/nl.png) no-repeat right center; } div.lang a.fr{ padding-right:23px; background:url(../images/layout/fr.png) no-repeat right center; } div.lang a.en{ padding-right:23px; background:url(../images/layout/gb.png) no-repeat right center; } img.promotion{ position:absolute; left:-15px; top:58px; } span.promotion{ font-size:14px; color:#FFF; position:absolute; left:22px; top:246px; } #shops a{ color:#463E34; } #shops h2{ margin-bottom:5px; font-size:18px; color:#463e34; font-weight:bold; } #shops .col-1, #shops .col-2{ float:left; width:277px; } #shops .cols{ width:100%; clear:both; overflow:hidden; } /* Content ---------------------------------------------------------- */ div#content{ background: url(../images/layout/content/content_bg.png) #fff no-repeat left top; width:873px; margin:0 auto; padding:32px 27px; overflow:hidden;} div#content h1{font-size:22px; color:#463e34; font-weight:bold; margin-bottom:20px; margin-top:-5px;} div#content div.left{float:left; width:555px; overflow:hidden;} div#content div.left div.specs{ background:#857e71; color:#fff; padding:16px 18px; width:520px; overflow:hidden;} div#content div.left div.specs div.image img{margin-bottom:17px;} div#content div.left div.specs.home{margin-bottom:25px;} div#content div.left div.specs h2{font-size:22px; color:#fff; font-weight:bold; margin-bottom:15px;} div#content div.left div.specs ul{color:#fff;} div#content div.left div.specs ul li { clear: both; } div#content div.left div.specs ul li span{margin: 3px 0; line-height:18px;} div#content div.left div.specs ul li.first span{margin:0 0 3px 0;} div#content div.left div.specs ul li.last span{margin:3px 0 0 0;} div#content div.left div.specs ul li span.descr em{color:#e3d2b2;} div#content div.left div.specs ul li span.label{float:left; margin-right:10px; font-weight:bold; width:120px; text-align:right;} body#en div#content div.left div.specs ul li span.label{float:left; margin-right:10px; font-weight:bold; width:150px; text-align:right;} div#content div.left div.specs ul li span.descr{float:left; width:370px;} body#en div#content div.left div.specs ul li span.descr{float:left; width:340px;} div#content div.left p{line-height:19px; margin-bottom:15px;} div.left div.image{float:left; width:298px;} div.left div.image h3{font-size:18px; color:#dfdeda; margin-bottom:19px;} div.left div.text{float:right; width:195px; line-height:19px;} div.left div.text h2{color:#dfdeda; font-size:22px;} div#content div.right{float:right; width:265px; border-left:1px solid #e0dfdb; padding-left:25px;} div#content div.right h1{color:#919191; margin-top:-5px;} table.expos{margin-bottom:15px;} table.expos tr td{ vertical-align:top; font-size:12px; font-weight:bold; line-height:18px; width:243px;} div#content div.right ul.functies{margin-bottom:15px; overflow:hidden;} div#content div.right ul.functies li{float:left;} div#content div.right ul.functies li span{float:left; margin-bottom:10px;} div#content div.right ul.functies li span.descr{float:left; font-size:14px; font-weight:bold; line-height:18px; width:243px; padding-left:6px;} div#content div.right ul.functies li span.one{ float:left; height:16px; width:16px; background:url(../images/layout/sidebar/1.png) no-repeat left top;} div#content div.right ul.functies li span.two{ float:left; height:16px; width:16px; background:url(../images/layout/sidebar/2.png) no-repeat left top;} div#content div.right ul.functies li span.tree{ float:left; height:16px; width:16px; background:url(../images/layout/sidebar/3.png) no-repeat left top;} div#content div.right ul.functies li span.four{ float:left; height:16px; width:16px; background:url(../images/layout/sidebar/4.png) no-repeat left top;} div#content div.right ul.functies li span.none{ float:left; height:16px; width:16px; background:url(../images/layout/sidebar/none.png) no-repeat left top;} div#content div.right img{margin-bottom:66px;} div#content div.right img.last{margin-bottom:0px;} div.download{padding:15px 20px; background:#efede6; font-size:22px; height:47px; color:#463e34; font-weight:bold; margin-top:38px; position:relative;} a.btn_download{ position:absolute; right:50px; top:-28px; background:url(../images/layout/btns/btn_download.png) no-repeat left top; height:106px; width:210px; text-indent:-9999px; } a.btn_download:hover{background-position:0 -106px;} a.btn_download2{ background:url(../images/layout/btns/btn_download.png) no-repeat left top; display:block; margin-top:-30px; height:106px; width:210px; text-indent:-9999px; } a.btn_download2:hover{background-position:0 -106px;} div.contact{padding:15px 20px; background:#efede6; margin-top:38px; overflow:hidden; width:830px} div.contact h1{ font-size:20px; color:#463e34;} div.contact div.details{float:left; width:250px;} div.contact div.details address { margin: 20px 0 0 30px; } div.contact div.details address span { font-weight: bold; } div.contact span.phone{background:url(../images/layout/content/phone_bg.png) no-repeat left top; display:block; /*margin-bottom:35px;*/ font-size:18px; color:#857e71; padding-left:30px;} div.contact span.phone span.number{ display:block; font-size:22px; color:#463e34; font-weight:bold;} div.contact a.weblink { margin: 3px 0 3px 30px; color: #463E34; clear: both; display: block; } div.contact a.emaillink { margin: 5px 0 25px 30px; color: #463E34; clear: both; display: block; } div.contactright{float:right; width:392px; overflow:hidden; position:relative;} form.contact{overflow:hidden;} form.contact div.entry{margin-bottom:10px; position:relative; float:left; clear:both; width:100%;} form.contact div.entry label{width:60px; float:left; padding-top:6px; height:20px; display:block; color:#857e71;} form.contact div.entry input{font-size:12px; float:left; border:none; width:310px; height:24px; padding:4px 2px 0px 2px;} form.contact div.entry textarea{font-size:12px; width:310px; border:none; float:left; height:65px; padding:4px 2px 0px 2px;} form.contact div.entry select{ float:left; font-size:12px; width:314px; padding:6px 2px; border:none; } form.contact div.entry.buttons{} form.contact div.entry.buttons button{ cursor:pointer; margin-right:18px; float:right; margin-top:5px; font-size:16px; font-weight:bold; border:none; color:#fff; background:#857e71; padding:2px 10px; clear:none;} form.contact div.entry.error span.error{position:absolute; top:2px; right:0px; width:16px; height:16px; background:url(../images/layout/icons/error.png) no-repeat left top;} form.contact div.entry.error label{color:#FF8C8F;} form.contact div.entry.error input, form.contact div.entry.error textarea, form.contact div.entry.error select{background:#FCC7D1;} /* Footer ---------------------------------------------------------- */ div#footer{height:40px; position:relative; width:100%;} div#footer a.inada{ margin-left:60px; color:#6f6a62; font-size:16px; font-weight:bold; float:left; text-decoration:none;} div#footer a.inada span.link{ float:left; margin-top:12px; text-decoration:none; border:none;} div#footer a.inada span.logo{ float:left; margin-left:20px; margin-top:2px;} div#footer div{display:inline; width:76px; height:27px; float:right; margin-right:60px; margin-top:3px;} div#footer div a.inventis{margin-top:6px; width:76px; height:27px; background:url(../images/layout/footer/inventis.png) no-repeat left top; display:block; text-indent:-9999px;} div#footer div a.inventis:hover{background-position:0 -27px;} div#footer h2 { text-indent: -9999px; width: 0; height: 0; } /* Photoalbum */ div#content div.left ul.photoalbum li { float: left; margin: 0 20px 20px 0; } div#content div.left ul.photoalbum li.last { margin-right: 0; }