/* Kierdorf Praezision Global declarations Author: Stephan Belitz Text color: #414042 Border color: #d6d6d6 BROWSER RESET GENERAL ITEMS TYPO FRAMEWORK HEADER FOOTER GENERAL CONTENT SPECIFIC CONTENT FORM FIELDS REMOOZ */ /************************************************************ * BROWSER RESET ************************************************************/ html { height:100%; } 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, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, option, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline: 0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; } :focus { outline:0; } body { line-height:1; color:black; background:white; } ol, ul { list-style:none; } table { border-collapse:separate; border-spacing:0; } caption, th, td { text-align:left; font-weight:normal; } blockquote:before, blockquote:after, q:before, q:after { content:""; } blockquote, q { quotes:"" ""; } img { display:block; } td img { display:inline; } /************************************************************ * GENERAL ITEMS ************************************************************/ body { height:101%; background:#fff; } p { margin:0 0 10px 0; } .left { float:left; } .right { float:right; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { min-width:0; display:block; clear:both; } .yummy { display:none !important; } .pointer { cursor:pointer; } .nomrg { margin:0 !important; } .required { color:#f00; cursor:help; } hr { margin:15px 0 20px; height:1px; border:0; border-top:1px solid #d6d6d6; } /************************************************************ * TYPO ************************************************************/ div,span,p,a,li,td,input,select,option,textarea { font-family:Arial,Verdana,sans; font-size:12px; font-weight:normal; color:#414042; line-height:16px; } a.line:link, a.line:visited, a.line:active { text-decoration:none; } a.line:focus, a.line:hover { text-decoration:underline; } h1 { font-size:21px; font-weight:normal; color:#414042; margin-bottom:30px; } h2 { font-size:21px; font-weight:normal; color:#414042; margin-bottom:15px; } h3 { font-size:16px; font-weight:normal; color:#414042; margin:0; } h4 { font-size:14px; font-weight:normal; color:#414042; margin-bottom:5px; } .error, .error a { font-weight:bold !important; color:#ff0500 !important; } .error input, .error select, .error textarea { border-color:#ff0500 !important; } em { color:#ff0500; cursor:help; } strong { font-weight:bold; } /************************************************************ * FRAMEWORK ************************************************************/ #playground { text-align:left; min-height:100%; height:auto !important; height:100%; margin:0 auto -126px; background:url('../img/page_footer.jpg') bottom center no-repeat; } #playground div.push { height:126px; } div.wrapper { width:941px; margin:0 auto; } /************************************************************ * HEADER ************************************************************/ #header { height:181px; padding-top:22px; background:url('../img/page_header.png') top center no-repeat; } #header a.logo { display:block; width:159px; height:72px; background:url('../img/sprites.png') 0 0 no-repeat; } /* navigation */ #header ul { margin:30px 0 0 -12px; } #header ul li { float:left; margin-right:5px; } #header ul li a { padding:2px 0 2px 12px; font-size:11px; text-decoration:none; cursor:pointer; } #header ul li a span { padding:2px 12px 2px 0; font-size:11px; text-decoration:none; } #header ul li.active a, #header ul li a:hover, #header ul li a:active { background:url('../img/sprites.png') 0 -72px no-repeat; } #header ul li.active a span, #header ul li a:hover span, #header ul li a:active span { background:url('../img/sprites.png') right -72px no-repeat; } /************************************************************ * FOOTER ************************************************************/ #footer { height:126px; } #footer div { width:941px; margin:0 auto; color:#fff; padding-top:20px; } #footer div span { float:right; margin-right:130px; color:#fff; } #footer div ul li { float:left; color:#fff; } #footer div ul li a { color:#fff; } /************************************************************ * GENERAL CONTENT ************************************************************/ #content { margin-bottom:10px; overflow:hidden; } #content div.col_left { float:left; width:695px; margin-top:30px; padding:5px 25px 50px 0; border-right:#d6d6d6 1px solid; } #content div.col_right { float:left; width:200px; padding:20px 10px 0; } #content div.col_left, #content div.col_right { margin-bottom:-3000px; padding-bottom:3000px; } #content div.col_left dl dt { width:200px; float:left; } #content div.col_left dl dd { width:480px; float:right; margin-bottom:15px; } #content div.col_left ul { list-style:disc; margin-bottom:15px; } #content div.col_left ul li { margin-left:17px; } #content div.col_right ul li { margin-bottom:15px; } #content div.col_right ul li h2 { padding:15px 0 17px 60px; } #content div.col_right ul li h2.about { background:url('../img/sprites.png') 0 -89px no-repeat; } #content div.col_right ul li h2.benefits { background:url('../img/sprites.png') 0 -137px no-repeat; } #content div.col_right ul li h2.products { background:url('../img/sprites.png') 0 -185px no-repeat; } #content div.col_right ul li h2.machines { background:url('../img/sprites.png') 0 -233px no-repeat; } #content div.col_right ul li h2.history { background:url('../img/sprites.png') 0 -281px no-repeat; } /************************************************************ * SPECIFIC CONTENT ************************************************************/ /* products */ #content div.products { margin-top:30px; } #content div.products a { width:230px; padding-top:50px; float:left; text-decoration:none; } #content div.products a span.h3 { width:120px; padding-left:110px; font-size:16px; } #content div.products a span.h4 { display:block; margin-bottom:5px; padding-right:10px; } #content div.products a span.h5 { display:block; font-size:11px; padding-right:10px; } #content div.products a.product01 { background:url('../img/product_01_1.jpg') 5px 0 no-repeat; } #content div.products a.product02 { background:url('../img/product_02_1.jpg') 30px 0 no-repeat; } #content div.products a.product03 { background:url('../img/product_03_1.jpg') 35px 0 no-repeat; } #content div.products a.product04 { background:url('../img/product_04_1.jpg') 10px 0 no-repeat; } #content div.products a.product05 { background:url('../img/product_05_1.jpg') 10px 0 no-repeat; } #content div.products a.product06 { background:url('../img/product_06_1.jpg') 0 0 no-repeat; } #content div.products a.product07 { background:url('../img/product_07_1.jpg') 20px 0 no-repeat; } #content div.products a.product08 { background:url('../img/product_08_1.jpg') 15px 0 no-repeat; } #content div.products a.product09 { background:url('../img/product_09_1.jpg') 10px 0 no-repeat; } #content div.products a.product10 { background:url('../img/product_10_1.jpg') 20px 0 no-repeat; } #content div.products a.product11 { background:url('../img/product_11_1.jpg') 5px 0 no-repeat; } #content div.products a.product12 { background:url('../img/product_12_1.jpg') 15px 0px no-repeat; } /* history */ #content img.history { float:left; margin:0 10px 10px 0; } /* google map */ #content div#map { width:695px; height:300px; overflow:hidden; margin-top:30px; } /************************************************************ * FORM FIELDS ************************************************************/ #content input, select, textarea { border:1px solid #d6d6d6; color:#333; padding:1px 2px; background:#fff; margin-bottom:15px; } #content label { display:block; width:200px; float:left; } #content input { width:300px; } #content textarea { width:300px; height:100px; } #content input.submit { width:auto; height:auto; margin-left:200px; margin-bottom:0; } /************************************************************ * REMOOZ ************************************************************/ .remooz-element { cursor:pointer; cursor:-moz-zoom-in; } .remooz-box { position:absolute; top:0; left:0; background:#fff no-repeat center; z-index:100; } .remooz-loading { background-image:url('../img/remooz/spinner.gif'); } .remooz-body { width:100%; height:100%; } .remooz-box-focus.remooz-type-image .remooz-body { cursor:-moz-zoom-out; } .remooz-box-dragging .remooz-body { cursor:move; } .remooz-btn-close { position:absolute; left:-15px; top:-15px; width:30px; height:30px; text-decoration:none; border:0; background:url('../img/remooz/closebox.png') no-repeat center; visibility:hidden; cursor:pointer; } .remooz-engine-trident4 .remooz-btn-close { background-image:url('../img/remooz/closebox.gif'); } .remooz-title { position:relative; left:0; top:15px; text-align:left; } .remooz-title-bg { position:absolute; left:0; top:0; width:100%; height:100%; background-color:#343434; z-index:99; webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9); } .remooz-title-content { position:relative; padding:5px 15px; color:#fff; z-index:101; } .remooz-engine-trident4 .remooz-title-bg { display:none; } .remooz-engine-trident4 .remooz-title-content { background-color:#333; } .remooz-title-content p { color:#eee; } .remooz-type-image img { display:block; border:0; width:100%; height:100%; } .remooz-bg { position:absolute; width:33px; height:40px; } .remooz-bg-n { left:0; top:-40px; width:100%; background:url('../img/remooz/remo_bg_n.png') repeat-x; } .remooz-bg-ne { right:-33px; top:-40px; background:url('../img/remooz/remo_bg_ne.png') no-repeat; } .remooz-bg-e { right:-33px; top:0; height:100%; background:url('../img/remooz/remo_bg_e.png') repeat-y; } .remooz-bg-se { right:-33px; bottom:-40px; background:url('../img/remooz/remo_bg_se.png') no-repeat; } .remooz-bg-s { left:0; bottom:-40px; width:100%; background:url('../img/remooz/remo_bg_s.png') repeat-x; } .remooz-bg-sw { left:-33px; bottom:-40px; background:url('../img/remooz/remo_bg_sw.png') no-repeat; } .remooz-bg-w { left:-33px; top:0; height:100%; background:url('../img/remooz/remo_bg_w.png') repeat-y; } .remooz-bg-nw { left:-33px; top:-40px; background:url('../img/remooz/remo_bg_nw.png') no-repeat; }