/*************************************************** * * * CSS Styles Chilli Intro website * * * * Aime van Pottelsberghe (auteur) * * in opdracht van Chilli Design & Multimedia * * * ***************************************************/ /* STYLES RESETTER */ html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, li, ol, dl, dd, address, blockquote, hr { margin: 0px; padding: 0px; } html, body, form, fieldset { font: 100%/120% Verdana, Arial, Helvetica, sans-serif; } form input[type="submit"], form input[type="reset"] { cursor: pointer; } fieldset { border: none; } input, select, textarea { font-size: 100%; } h1, h2, h3, h4, h5, h6 { font-size: 10px; font-weight: bold; color: #000000; } a { text-decoration: none; } address { font-style: normal; } /* CLEARDIV STYLE */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } /* End hide from IE-mac */ /* COMMON TEXT STYLES */ html { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #8b8c8d; } body { /*line-height: 16px;*/ } .empty { font-size: 0px; line-height: 0px; } /* MY STRUCTURE STYLES */ html { height: 100%; background: #28282a; } body { height: 100%; width: 100%; text-align: left; } div#site_wrap { width: 100%; background: url(../images/xhtml/body_top_bg_rep.gif) repeat-x top; margin: 0px auto; position: relative; } div#site_wrap { min-height: 100%; height: auto !important; height: 100%; } div#footer_wrap { position: absolute; bottom: 0; width: 100%; height: 30px; padding: 10px 0px 0px 0px; text-align: center; } div#footer_wrap { background: #28282a url(../images/xhtml/html_bottom_bg_rep.gif) repeat-x bottom; } div#footer_cont { width: 216px; height: 28px; font-size: 9px; margin: 0 auto; } div#footer_cont a { float: left; margin: 0px 5px; padding: 0px 2px; text-transform: uppercase; color: #555; } div#footer_cont a:hover { color: #FFF; } div#footer_cont span { text-indent: -9999px; float: left; width: 2px; height: 8px; background: #818283; margin-top: 4px; } div.page_ruler { width: 650px; height: 28px; background: url(../images/xhtml/dubbele_stippellijn.gif) repeat-x; position: relative; } div.page_ruler p { text-transform: uppercase; color: #FFF; position: absolute; top: 8px; } div.page_ruler p span { color: #f52d55; padding-right: 3px; } div.page_ruler p a { color: #FFF; } p.page_ruler_left { left: 0px; } p.page_ruler_right { right: 0px; } /* INTRO STYLES */ body.intro div#page_holder { width: 650px; height: 450px; position: absolute; left: 50%; top: 50%; margin: -225px auto auto -325px; } body.intro div#page_holder { text-align: left; background: url(../images/xhtml/stippellijn.gif) no-repeat bottom; } body.intro div#page_wrap { width: 650px; height: 450px; } body.intro div#header_wrap { width: 650px; height: 50px; background: #121317 url(../images/xhtml/intro_header_bg.gif) no-repeat top left; position: relative; } body.intro div#header_wrap h1 { position: absolute; text-indent: -9999px; width: 60px; height: 29px; background: url(../images/xhtml/chilli_logo.gif) no-repeat; } body.intro div#header_wrap h1 { left: 21px; top: 9px; } body.intro div#header_wrap p { color: #FFFFFF; position: absolute; width: 650px; height: 17px; top: 19px; text-align: center; } body.intro div#header_wrap p:hover { color: #f52d55; } body.intro div#header_wrap p a { color: #686868; text-transform: uppercase; } body.intro div#header_wrap p a:hover { color: #FFFFFF; } body.intro div#page_title_wrap { width: 650px; height: 28px; margin-top: 10px; background: url(../images/xhtml/stippellijn.gif) no-repeat top; } body.intro div#page_title_wrap h2 { font-weight: normal; text-transform: uppercase; color: #FFF; text-align: center; position: relative; top: 7px; } body.intro div#project_teaser_wrap { width: 650px; height: 275px; background: url(../images/xhtml/stippellijn.gif) no-repeat top; text-align: center; } body.intro div#projects_centraliser { height: 257px; margin: 0px auto 0px auto; width: 648px; padding: 13px 0px 0px 0px; } body.intro div.teaser_client { width: 150px; height: 250px; /*border-left: 5px solid #28282a;*/ border-right: /*5px*/16px solid #28282a; float: left; background: #28282a; } body.intro div.last_client { border-right: none; /*border-left: 2px solid #28282a;*/ } body.intro div.client_thumb { border-bottom: 2px solid #28282a; width: 150px; height: 110px; margin-bottom: 5px; } body.intro div.client_thumb a { float: left; outline: none; } body.intro div.client_thumb a img { float: left; border: none; } body.intro div.teaser_client:hover div.client_thumb { border-bottom: 2px solid #f52d55; } body.intro div.client_data_wrap { background: #121317; width: 150px; height: 133px; text-transform: uppercase; text-align: left; font-size: 9px; } body.intro div.client_data_wrap p { width: 140px; padding: 5px 5px 0px 5px; } body.intro div.client_data_wrap p span { color: #FFF; } body.intro p.client_name { height: 35px; background: url(../images/xhtml/stippellijn.gif) no-repeat bottom; } body.intro p.client_jobs { height: 63px; background: url(../images/xhtml/stippellijn.gif) no-repeat bottom; } body.intro p.client_btn a { color: #8b8c8d; } body.intro p.client_btn a:hover { color: #FFF; } body.intro p.client_btn a span { padding-right: 5px; } body.intro p.client_btn a:hover span { color: #f52d55; } body.intro div#contact_data_wrap { width: 650px; height: 86px; background: url(../images/xhtml/stippellijn.gif) no-repeat top; } body.intro div#contact_data_wrap p { text-align: center; text-transform: uppercase; color: #686868; padding-top: 10px; font-size: 9px; position: relative; top: 2px; } body.intro div#contact_data_wrap p.white, div#contact_data_wrap p a { color: #FFF; } body.intro div#contact_data_wrap p a:hover { color: #8b8c8d; } /* ABOUT STYLES */ body.about { font-size: 9px; } body.about div#page_holder { width: 100%; text-align: center; padding: 80px 0px 80px 0px; } body.about div#page_wrap { width: 650px; margin: 0px auto; text-align: left; } body.about div#page_txt { margin: 35px 0px; text-align: center; text-transform: uppercase; color: #686868; line-height: 18px; } body.about div#page_txt a { color: #686868; } body.about div#page_txt a:hover { color: #fff; } /* CLIENTS STYLES */ body.clients { font-size: 9px; } body.clients div#page_holder { width: 100%; text-align: center; padding: 80px 0px 80px 0px; } body.clients div#page_wrap { width: 650px; margin: 0px auto; text-align: left; } body.clients div#page_txt { margin: 35px 0px; text-align: left; text-transform: uppercase; color: #FFF; } body.clients div#page_txt a { color: #FFF; } div#clients_wrap { width: 650px; } div.clients_col_wrap { width: 200px; float: left; margin: 0px; background: url(../images/xhtml/stippellijn.gif) no-repeat top; } div.sec_col { margin: 0px 25px; } div.client_item { width: 175px; padding: 10px 15px 10px 10px; background: url(../images/xhtml/stippellijn.gif) no-repeat bottom; position: relative; } div.client_item a.client_link { position: absolute; top: 12px; right: 1px; display: block; width: 9px; height: 9px; } div.client_item a.client_link { background: url(../images/xhtml/client_btn.gif) no-repeat; } div.client_item a.client_link:hover { background: url(../images/xhtml/client_btn_hover.gif) no-repeat; } div.client_item p.client_name { color: #686868; line-height: 15px; } div.client_item span { position: absolute; top: 12px; left: 0px; color: #fff; }