/* CREDITS * ---------------------------------------------------------- * Title:Drukkerij Pietermans - CSS Main Stylesheet * Author:Van Suetendael Raf <> * Date:09/09/08 * Last Edit:03/10/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{height:100%; width:100%; background:#979797 url(../images/layout/bg.jpg) repeat-x} /*selectors*/ strong, b{font-weight:bold} em{font-style:italic} a{outline:none; color:#f15c22} a:hover{text-decoration:none} h1{font-size:25px; color:#f15c22; cursor:default; line-height:25px} h2{font-size:16px; color:#f15c22; font-weight:bold; margin-bottom:10px} h3{font-size:14px; color:#f15c22; font-weight:bold; margin-bottom:2px} .clear{clear:both} /* Splash ---------------------------------------------------------- */ div#splash {width:924px; height:391px; margin:0px auto; position:relative;} div#splash h1 {width:924px; height:391px; background:url(/design/images/layout/splash.jpg) no-repeat 0 0;} div#splash h1 a {width:924px; height:391px; display:block; text-indent:-9000px;} div#splash a#start {width:100px; height:24px; background:url(/design/images/layout/startbtn.jpg) no-repeat 0 0; display:block; text-indent:-9000px; position:absolute; right:120px; top:370px;} div#splash a#start:hover {background-position:bottom left;} /* Container ---------------------------------------------------------- */ div#container_wrapper{width:960px; margin:0 auto; background:transparent url(../images/layout/content_container_bg.jpg) repeat-y} div#container{width:960px; margin:0 auto; overflow:hidden; background:transparent url(../images/layout/container_bg.jpg) no-repeat} /* Header ---------------------------------------------------------- */ div#header{height:81px; overflow:hidden; width:901px; position:relative; background:transparent url(../images/layout/header_bg.jpg) no-repeat right 0;} div#header img{float:left;} div#header h1{position:absolute; font-size:18px; color:#f15c22; z-index:90; left:305px; top:36px;} /* Content ---------------------------------------------------------- */ div#content_container{width:901px; padding:0 0 0 0; overflow:hidden; clear:both; position:relative;} div#content{ min-height:490px; height:auto !important; height:490px; width:635px; float:right; position:relative; background:transparent url(../images/layout/content_bg.jpg) no-repeat left top;} div#left_col{float:left; display:inline; margin-left:40px; padding-top:2px; width:320px; min-height:100px; overflow:hidden;} div#left_col p{margin:0 0 15px; line-height:18px;} div#left_col p.np{margin:0;} div#content ul li{background:url(../images/layout/list_item_bullet.gif) no-repeat 0 8px; line-height:22px; padding:0 0 0 14px} div#content ul {margin:0 0 15px;} p#contactInfo{padding-left:24px} p span{padding-left:24px; display:block; height:16px; margin-top:8px; line-height:16px} small{font-size:11px; color:#9f9f9f; margin-bottom:9px; padding: 0 0 0 9px; display:block;} #adres{padding-left:24px; background:url(../images/layout/icons/gebouw.gif) no-repeat} #tel{padding-left:24px; background:url(../images/layout/icons/telefoon.gif) no-repeat} #fax{padding-left:24px; background:url(../images/layout/icons/fax.gif) no-repeat} #mail{padding-left:24px; background:url(../images/layout/icons/mail.gif) no-repeat} .hr{border:0; background:url(../images/layout/hr.gif) no-repeat; height:18px; width:100%} .hr hr{display:none} div#right_col{float:left; display:inline; margin-left:20px; padding-top:2px; width:220px; min-height:100px} div#right_col a {clear:both; float:right;} div#right_col a:hover img {border: 3px solid #9F9F9F;} div#right_col img{border:3px solid #d8d8d8; margin-bottom:6px;} /*tabs*/ div#content ul.tabs { overflow:hidden; width:100%; clear:both; padding: 0px 0px 0px 9px; font: 12px Arial, Helvetica, sans-serif; margin: 0px; height: 41px; background: #fff url(/design/images/layout/tabsBottom.gif) no-repeat left bottom; } div#content ul.tabs li { margin: 0px; display: block; padding: 0px; float: left; background:none; } div#content ul.tabs li a { border: 1px solid #aeaeae; border-bottom: none; background: #fff url(/design/images/layout/tabsBg.gif) repeat-x left top; text-decoration: none; line-height:15px; height:15px; width: 72px; color: #333; padding: 3px 0px; margin: 0px 0px 0px 1px; display: block; text-align: center; } div#content ul.tabs li a:hover { color: #333; background: #efefef url(/design/images/layout/tabsBg_hover.gif); border-bottom: 1px solid #eee; border-top-color: #aeaeae; border-right-color: #aeaeae; border-left-color: #aeaeae; } div#content ul.tabs li a#active { background: #efefef url(/design/images/layout/tabsBg_hover.gif); border-bottom: 1px solid #eeeeee; } /* Navigation ---------------------------------------------------------- */ div#navigation{width:180px; position:absolute; left:96px; top:121px; height:215px; background:url(../images/layout/nav_bg.jpg) no-repeat 0px -4px;} div#navigation ul li{display:inline; width:180px; height:30px;} div#navigation a{display:block; width:180px; height:30px; text-indent:-9000px} div#navigation a.start:hover, div#navigation a.startactive{background:url(../images/layout/nav_bg.jpg) no-repeat 0px -224px} div#navigation a.producten:hover, div#navigation a.productenactive{background:url(../images/layout/nav_bg.jpg) no-repeat 0px -254px} div#navigation a.technologie:hover, div#navigation a.technologieactive{background:url(../images/layout/nav_bg.jpg) no-repeat 0px -284px} div#navigation a.aanleveren:hover, div#navigation a.aanleverenactive{background:url(../images/layout/nav_bg.jpg) no-repeat 0px -314px} div#navigation a.drukken:hover, div#navigation a.drukkenactive{background:url(../images/layout/nav_bg.jpg) no-repeat 0px -344px} div#navigation a.offerte:hover, div#navigation a.offerteactive{background:url(../images/layout/nav_bg.jpg) no-repeat 0px -374px} div#navigation a.contact:hover, div#navigation a.contactactive{background:url(../images/layout/nav_bg.jpg) no-repeat 0px -404px} /* Footer ---------------------------------------------------------- */ div#footer{clear:both; background:transparent url(../images/layout/footer_bg.jpg) no-repeat 267px top; width:960px; height:40px; margin:auto; font-size:11px; color:#666} div#footer p{text-align:right; margin-right:105px; padding-top:10px}