/* CREDITS * ---------------------------------------------------------- * Title: Hello World CSS * Author: Chris Ramakers * ---------------------------------------------------------- * 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; } /** * ## Fonts */ html { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } a { color: #0f90ee } a:hover { text-decoration: none } #main h1 { color: #083e63; font-size: 16px; margin-bottom: 10px; font-weight: bold; } /** * ## Layout */ /* Page */ body { background: #fff url(../images/layout/page_background.jpg) no-repeat top center; } #container { width:990px; position:relative; left:50%; margin-left:-495px; } /* Header */ #header { float: left; width: 100%; height: 135px } /* Home link */ #header #homelink { display: block; float: left; width: 270px; margin-right: 10px; height: 100px; text-indent: -9000px } /* Navigation */ #header #navigation { display: block; float: left; width: 679px; margin-top: 27px; position: relative; z-index: 100 } #header #navigation li { float: left } #header #navigation li a { display: block; float: left; height: 41px; background: #fff url(../images/layout/navigation.png); text-indent: -9000px } /* Navigation links */ #header #navigation li#nav_overons a { width: 120px; } #header #navigation li#nav_merken a { width: 100px; background-position: -120px 0 } #header #navigation li#nav_producten a { width: 120px; background-position: -220px 0 } #header #navigation li#nav_cataloog a { width: 115px; background-position: -340px 0 } #header #navigation li#nav_winkels a { width: 105px; background-position: -455px 0 } #header #navigation li#nav_contact a { width: 119px; background-position: -560px 0 } #header #navigation li#nav_overons a:hover { background-position: 0 -41px } #header #navigation li#nav_merken a:hover { background-position: -120px -41px } #header #navigation li#nav_producten a:hover { background-position: -220px -41px } #header #navigation li#nav_cataloog a:hover { background-position: -340px -41px } #header #navigation li#nav_winkels a:hover { background-position: -455px -41px } #header #navigation li#nav_contact a:hover { background-position: -560px -41px } /* French Nav */ #body_fr #header #navigation li a { background: #fff url(../images/layout/navigation_fr.png) } /* Navigation links */ #body_fr #header #navigation li#nav_overons a { width: 164px; } #body_fr #header #navigation li#nav_merken a { width: 100px; background-position: -164px 0 } #body_fr #header #navigation li#nav_producten a { width: 95px; background-position: -264px 0 } #body_fr #header #navigation li#nav_cataloog a { width: 105px; background-position: -359px 0 } #body_fr #header #navigation li#nav_winkels a { width: 105px; background-position: -464px 0 } #body_fr #header #navigation li#nav_contact a { width: 110px; background-position: -568px 0 } #body_fr #header #navigation li#nav_overons a:hover { background-position: 0 -41px } #body_fr #header #navigation li#nav_merken a:hover { background-position: -164px -41px } #body_fr #header #navigation li#nav_producten a:hover { background-position: -264px -41px } #body_fr #header #navigation li#nav_cataloog a:hover { background-position: -359px -41px } #body_fr #header #navigation li#nav_winkels a:hover { background-position: -464px -41px } #body_fr #header #navigation li#nav_contact a:hover { background-position: -568px -41px } /* Servicelinks */ #header #servicelinks { position: absolute; z-index: 90; left: 718px; width: 233px; height: 150px; background: transparent url(../images/layout/servicelinks_background.png) no-repeat bottom center } /* Language Select */ #header #servicelinks #language_select { overflow: hidden; height: 18px; margin-bottom: 52px; margin-top: 7px } #header #servicelinks #language_select li { float: right } #header #servicelinks #language_select li a { display: block; float: left; padding: 0 15px 0 10px; background: transparent url(../images/layout/bullet_arrow_orange.png) no-repeat left center } /* Search form */ #header #servicelinks #searchform { margin: 0 12px 12px 12px; overflow: hidden; } #header #servicelinks #searchform input#search { background-color: #fff; padding: 5px; border: 1px solid #c8c8c8; width: 149px; float: left; } #header #servicelinks #searchform button#searchsubmit { background-color: #104a74; border: 2px solid #307cb3; padding:3px 2px; color: #fff; float: right; text-align: center } #body_fr #header #servicelinks #searchform input#search { width: 122px } /* Content */ #content { clear: both; width: 100%; overflow: hidden } /* Main */ #main { float: left } /* Size options for #main */ #main.small { width: 418px; padding-right: 25px } #main.large { width: 713px } /* Secondary (left sidebar) */ #secondary { float: left; width: 277px; min-height: 305px; padding-top: 120px; background: transparent url(../images/layout/secondary_background.png) no-repeat 240px 0 } /* Tertiary (right sidebar) */ #tertiary { float: right; width: 270px; padding-top: 37px; margin-bottom: 1em } /* Entry styles */ #tertiary h1 { color: #083e63; font-size: 14px; font-weight: bold; margin-bottom: 15px } #tertiary .entry { margin-bottom: 20px; width: 227px; color: #777777 } #tertiary .entry.box { background-color: #e6f4fe; border: 1px solid #cce6f9; padding: 12px 12px 0 12px; width: 203px } #tertiary .entry.box h1 { text-align: center } #tertiary .content { padding-bottom: 15px } #tertiary .content address { line-height: 18px; font-family: Arial, Helvetica, sans-serif; } /* Footer */ #footer { width: 100%; overflow: hidden; clear: both; background-color: #e6f4fe; border: 1px solid #cce6f9; line-height: 28px; color: #083e63; margin-bottom: 15px } /* Copyright */ #footer #copyright { padding-left: 10px; float: left } /* Inventis */ #footer #inventis { padding-right: 10px; text-indent: -9000px; background: url(../images/layout/inventis_link.png) no-repeat left center; display: block; float: right; height: 28px; width: 69px; } #footer #inventis:hover { background-position: -69px center; }