/*************************************************** * * * CSS Styles Proprint website * * * * Aime van Pottelsberghe (auteur) * * in opdracht van ProPrint * * * ***************************************************/ /* STYLES RESETTER */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit; text-align: left; } form input[type="submit"], form input[type="reset"] { cursor: pointer; } fieldset { border: none; } input, select, textarea { font-size: 100%; } a { text-decoration: none; outline: none; } table { border-collapse: collapse; border-spacing: 0; } ul, li { list-style: none; } /* COMMON TEXT STYLES */ body { font-family: Arial, Helvetica, sans-serif; color: #1a2329; } h1, h2, h3, h4, h5, h6, ul, ol, dl, pre, p, blockquote, table, img { margin: 0; padding: 0; /*padding-bottom: .5em;*/ } h1, h2, h3, h4, h5, h6, strong, em { font-weight: bold; } h1, h2, h3, h4 { font-family: Arial, Helvetica, sans-serif; } h1 { font-size: 1.6em; } h2 { font-size: 1.5em; } h3 { font-size: 1.4em; } h4 { font-size: 1.3em; } a:link, a:visited { color: #1a2329; } a:hover, a:focus { color: #ec008c; } p { font-size: 1em; } span.colored { color: #ec008c; } a span { cursor: pointer; } /* MY STRUCTURE STYLES */ html { background: #f9f9f9 url(../images/html_bg_repeat.gif) top repeat-x; } body { text-align: left; } div#super_wrap { width: 840px; margin: 0px; background: url(../images/header_bg.gif) no-repeat left top; } div#leftcol { width: 321px; float: left; min-height: 680px; height: auto !important; height: 680px; background: url(../images/left_col_bg.jpg) no-repeat left top; } div#logo_wrap { width: 321px; height: 228px; position: relative; background: url(../images/logo_wrap_bg.jpg) no-repeat left top; } div#logo_wrap h1 { position: absolute; left: 17px; top: 86px; width: 290px; height: 55px; background: url(../images/femalabel_logo.jpg) no-repeat; } div#logo_wrap h1 a { display: block; width: 290px; height: 55px; text-indent: -9999px; } ul.subnav { width: 321px; } ul.subnav li { display: block; width: 321px; height: 38px; background: url(../images/subnav_btn_bg.jpg) no-repeat left top; margin-bottom: 1px; } ul.subnav li a { display: block; width: 270px; height: 26px; text-align: right; font-size: 0.8em; padding: 12px 51px 0px 0px; } ul.subnav li a.selected { color: #ec008c; } div#maincol { width: 519px; float: left; } div#header_wrap { width: 519px; height: 94px; position: relative; } div#head_nav { color: #797e81; position: absolute; right: 0px; top: 13px; } div#head_nav span { font-size: 0.0em; float: right; margin: 3px 5px 0px 0px; height: 10px; border-left: 1px solid #797e81; } div#head_nav a { color: #797e81; font-size: 0.8em; float: right; margin-right: 6px; } div#head_nav a:hover { color: #fff; } div#head_nav a.current { color: #ec008c; } div#topnav_wrap { width: 519px; height: 37px; } div#topnav_wrap ul { width: 519px; height: 37px; } div#topnav_wrap ul li { float: left; height: 37px; } div#topnav_wrap ul li a { height: 37px; display: block; } div#topnav_wrap ul li#femalabel_btn, div#topnav_wrap ul li#femalabel_btn a { width: 127px; } div#topnav_wrap ul li#producten_btn, div#topnav_wrap ul li#producten_btn a { width: 129px; } div#topnav_wrap ul li#aanleveren_btn, div#topnav_wrap ul li#aanleveren_btn a { width: 129px; } div#topnav_wrap ul li#contact_btn, div#topnav_wrap ul li#contact_btn a { width: 128px; } div#topnav_wrap ul li#femalabel_btn a { background: url(../images/femalabel_btn_bg.jpg) no-repeat 0px 0px; } div#topnav_wrap ul li#producten_btn a { background: url(../images/producten_btn_bg.jpg) no-repeat 0px 0px; } div#topnav_wrap ul li#aanleveren_btn a { background: url(../images/aanleveren_btn_bg.jpg) no-repeat 0px 0px; } div#topnav_wrap ul li#contact_btn a { background: url(../images/contact_btn_bg.jpg) no-repeat 0px 0px; } div#topnav_wrap ul li a.active { background-position: 0px -37px !important; } div#topnav_wrap ul li a span { display: block; text-transform: uppercase; font-size: 0.8em; color: #FFF; border-top: none; padding-top: 11px; text-align: center; } /*div#topnav_wrap ul li a:hover { background-position: 0px -37px !important; }*/ /*div#topnav_wrap ul li a:hover span { border-top: 3px solid #ec008c; padding-top: 8px; }*/ /*div#topnav_wrap ul li a:hover span { border-top: 1px solid #fff; padding-top: 10px; color: #ec008c; }*/ div#topnav_wrap ul li a:hover span { padding-top: 11px; color: #ec008c; } div#topnav_wrap ul li a.active span { color: #1a2329; border-top: 3px solid #ec008c; padding-top: 8px; } div#main_wrap { padding: 30px 6px 30px 31px; width: 482px; min-height: 100px; height: auto !important; height: 100px; } div#main_wrap { background: url(../images/main_top_bg.gif) no-repeat left top; font-size: 0.8em; } /* CONTENT STYLES */ div.quote { border: 1px solid #eee; background: #f5f5f5; padding: 15px; line-height: 1.5em; margin-bottom: 15px; text-align: justify; } div#main_wrap img { display: block; padding-bottom: 1em; } div#main_wrap h2 { font-size: 1em; font-weight: normal; text-transform: uppercase; padding: 3px 5px; border: 1px solid #eee; background: #f5f5f5 ; } div#main_wrap p { font-size: 1em; line-height: 1.5em; text-align: justify; } div#main_wrap a { text-decoration: underline; } div#main_wrap ul { margin: 5px 0px 0px 15px; } div#main_wrap ul li { padding: 0px 0px 0px 12px; background: url(../images/dash.gif) no-repeat 0px 9px; line-height: 1.5em; } div#main_wrap table { border-collapse: collapse; margin-top: 5px; } div#main_wrap table tr.odd_row { background: #eee; } div#main_wrap table tr.even_row { background: #f5f5f5; } div#main_wrap table td { border-collapse: collapse; vertical-align: top; padding: 5px; } div#main_wrap h3 { background: url(../images/main_h2_dotline.gif) no-repeat bottom left; height: 36px; margin: 20px 0px 10px 0px; } div#main_wrap h3 span { display: block; height: 30px; padding: 6px 0px 0px 40px; font-size: 12px; font-weight: normal; text-transform: uppercase; } h3#fotografie span { background: url(../images/picto1.gif) no-repeat left top; } h3#reproductie span { background: url(../images/picto2.gif) no-repeat left top; } h3#opmaak span { background: url(../images/picto3.gif) no-repeat left top; } h3#aanlevering span { background: url(../images/picto4.gif) no-repeat left top; } h3#dragerslijmen span { position: relative; left: -40px; } h3#kleineoplages span { background: url(../images/picto18.gif) no-repeat left top; /*position: relative; left: -40px;*/ } h3#groteoplages span { background: url(../images/picto17.gif) no-repeat left top; /*position: relative; left: -40px;*/ } h3#offsetrotatie span { position: relative; left: -40px; } h3#flexo span { position: relative; left: -40px; } h3#veredeling span { background: url(../images/picto20.gif) no-repeat left top; /*position: relative; left: -40px;*/ } h3#afwerking span { background: url(../images/picto19.gif) no-repeat left top; /*position: relative; left: -40px;*/ } h3#eigentransport span { background: url(../images/picto16.gif) no-repeat left top; } h3#externtransport span { background: url(../images/picto16.gif) no-repeat left top; } h3#stockage span { background: url(../images/picto17.gif) no-repeat left top; } h3#contactgegevens span { position: relative; left: -40px; } h3#bereikbaarheid span { position: relative; left: -40px; } div.contactgeg { width: 450px; margin: 0px 0px 10px 0px; line-height: 1.7em; } div.contact_left { float: left; width: 60px; } div.contact_right { float: left; width: 390px; } /* CUTE CSS FIXES: */ /* CLEARDIV STYLE */ /* OUD: .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } */ .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; overflow: hidden; } /* .clearfix {display:inline-block;} */ /* Hide from IE Mac \*/ /* .clearfix {display:block;} */ /* End hide from IE Mac */ /* Hides from IE-mac \*/ /* html .clearfix { height: 1%; }*/ /* End hide from IE-mac */ /* VERTICAL CENTERING STYLES (source: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html) */ /* outer wrapping div */ .v_cent_o_wrap { display: table; #position: relative; overflow: hidden; } /* center wrapping div */ .v_cent_c_wrap { #position: absolute; #top: 50%; display: table-cell; vertical-align: middle; } /* inner wrapping div */ .v_cent_i_wrap { #position: relative; #top: -50%; }