/* Document : main-style Created on : 2011-apr-17, 09:45:33 Author : Jennie Andersson Description: Purpose of the stylesheet follows. */ /*********** * * RESET * ************/ 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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: "lucida grande",tahoma,verdana,arial,sans-serif; vertical-align: baseline; font-style:normal; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } html{ height:100%; } body { line-height: 1; height:100% } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*********** * * END RESET * ************/ /*********** Mixins ************/ .headings (@size:21px) { font-size:@size; text-transform:uppercase; font-weight:bold; } .gradient{ background: -moz-linear-gradient(top, #ccc, #fff); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#fff)); background: -webkit-linear-gradient(top, #ccc, #fff); } .menuGradient{ background: -moz-linear-gradient(100% 100% 90deg, #f0f0f0, #fff ); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f0f0f0)); background: -webkit-linear-gradient(top, #fff, #f0f0f0); background-image: url("images/menu-bkgd.png"); background-repeat: x-repeat; } .links (@size:14px){ font-size:@size; .textColor; text-decoration:none; } .textShadow{ text-shadow: 1px 1px 1px #000; } .textShadowLight{ text-shadow: 1px 1px 1px #fff; } .boxShadow { -moz-box-shadow: -2px -2px 4px #ccc; -webkit-box-shadow: -2px -2px 4px #ccc; box-shadow: -2px -2px 4px #ccc; } .border{ border: 1px solid #cdcdcd; -moz-border-radius: 10px; border-radius: 10px; -moz-box-shadow: -1px -1px 5px #999; -webkit-box-shadow: -1px -1px 5px #999; box-shadow: -1px -1px 5px #999; margin: 20px; } .wrap(@width:960px){ margin:auto auto; overflow:hidden; width:@width; } .textColor{ color:#2d2f33; } .blueColor{ color:#017475; } .blueBorder{ border-bottom: 1px solid #02a1a2; padding-bottom:6px; } /*********** END Mixins ************/ body{ font-family:"lucida grande",tahoma,verdana,arial,sans-serif; .textColor; background: #f0f0f0; } #header{ background: url("images/header-div-5x12.png") repeat-x right bottom #fff; height:160px; min-width: 987px; overflow:hidden; padding: 10px 0 0 30px; #logo{ float: left; position: relative; top: 35px; } a{ .links(30px); h1{ position: relative; top: 40px; left: 140px; } } #primary-nav{ float: left; position: relative; top: 79px; left: 39px; li{ display: block; float: left; height:40px; line-height:32px; margin: 0 5px; padding:5px 15px; .headings; border:1px solid transparent; } .current_page_item, li:hover{ .menuGradient; border:1px solid #f7fbfb; border-bottom:none; border-radius: 8px 8px 0 0; .boxShadow; } a { .links (11px); } } } #sidebar { float:left; height:100%; width:200px; .gradient; section{ margin:10px; } h4{ .headings(16px); .textShadowLight; text-align:center; } li{ background: url("images/border-2x2.gif") left top repeat-x; list-style:none; margin: 15px 0; padding: 15px 0 0 0; p{ font-size: 11px; line-height: 12px; margin-bottom: 6px; } } time{ .blueColor; .headings(14px); display:block; } } #content-wrapper { min-width: 670px; overflow:hidden; } #main{ -moz-box-shadow: -7px -1px 6px #999999; -webkit-box-shadow: -7px -1px 6px #999999; box-shadow: -7px -1px 6px #999999; float:left; height:100%; width:70%; #main-inner{ background-color: #fff; .border; padding: 10px; } } /*********** FOOTER ************/ #footer{ clear:both; background: url("images/footer-bkgd.png") repeat-x left top; color: #fff; padding:20px 0 5px 0; .wrapper{ .wrap(770px); } a{ color: #fff; text-decoration:none; } a:hover{ text-decoration:underline; } h3 { .headings(18px); .textShadow; margin-bottom: 10px; } .mail-link{ background: url("images/mail-icon.png") top left no-repeat; height: 27px; display: block; margin: 0 0 8px 0; padding-left: 32px; line-height: 25px; } nav { width:180px; float:left; li{ list-style-image: url("images/icon-arrow.png"); list-style-position: inside; margin:4px 0; } } .copyright{ font-size: 12px; margin-top: 50px; text-align: center; } #copyright{ float:left; margin-top:40px; width:350px; img{ .wrap(60px); margin-top:30px; display:block; margin-bottom:30px; } } address{ width:230px; float:right; } } article{ h2, .entry-title{ .headings(22px); .blueBorder; padding-top:15px; } p{ margin-bottom:10px; font-size:12px; line-height:20px; } .entry-content{ margin: 10px 0; overflow:hidden; } } /*********** * Kontakt ************/ .contact{ width:40%; margin:10px; img{ border:1px solid #ccc; padding:5px; .boxShadow; } } /*********** * End Kontakt ************/ /*********** * Digg Box ************/ #dd_ajax_float{ .boxShadow; .border; } /*********** * End Digg Box ************/ /*********** * Common classes ************/ .floatLeft{ float:left; } .floatRight{ float:right; } .clear{ clear:both; } /* Alignment */ .alignleft { display: inline; float: left; margin-right: 1.625em; margin-left: 4px; } .alignright { display: inline; float: right; margin-left: 1.625em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } .entry-content img{ border:1px solid #ccc; padding:5px; .boxShadow; }