/** * projekt.ch * * @copyright 2009 * @author Karin Christen * @version 0.1 */ /* * Colors */ /** * @section Reset Styling * Reset browser CSS */ 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; } q:before,q:after { content:''; } abbr,acronym { border:0; } /** * @section Print Styling * Styling of the Print Elements */ .print {display:none;} /** * @section Basic Styling * Styling of the Basic Elements and a small reset */ * {margin:0px; padding:0px;} html {} body {margin:20px 0 0 20px;font-family: Helvetica, Arial, sans-serif; font-size:13px; text-align:left; background:#d4d4d4;} h1 {font-size:28px; font-family: Helvetica, Arial, sans-serif; font-weight: bold;} h2 {font-family: Georgia, Times, serif; padding:1px;margin:0px 0 2px 0;font-size:20px; color:#860909;} h3 {} h4 {} h5 {} h6 {} hr {height: 1px; border-style: none; border-top: 1px solid #B3B3B3;; padding: 0; margin: 5px 0 5px 0; text-align: left;} a {color:#000; text-decoration: none;} a:visited {color:#000;} a:hover {color:#666;} ul li {list-style:none;} ol {list-style:none;} strong {font-weight:bold;} p {margin-bottom:10px;} img {border:none;} .hidden {display: none;} /** * @section Accessibility Styling * hide items for Accessibility */ .accessibility {position:absolute; top:-1000px; left:-1000px;} /** * @section Wrapper Styling * Styling Background and Shadows, Center Page */ #wrapper {width:960px;} /** * @section Header Styling * Styling of the Header elements and items */ #header {z-index:3;position: fixed;top:0px; left:0px; padding:20px; width:960px; height:40px; background:url(../img/header.png) bottom left repeat-x;} #logo h1 {text-transform: uppercase;} #logo span {font-size: 11px; font-style: italic; text-transform: none; font-weight: normal;} /** * @section mainNavigation & subNavigation Styling * Styling of the Main/Sub Navigation elements and items */ #mainNav {position:absolute; right:-10px; top:20px; font-family: Georgia, Times, serif; font-size:18px;} #mainNav.home {top:20px;} #mainNav ul {} #mainNav ul li {padding-right:20px;float:left;} #mainNav li.widg et_pages, #mainNav li.widget_categories {color:#fff;font-size:1%;} #mainNav li.widget_pages ul li, #mainNav li.widget_categories ul li {color:#000;font-size:18px;} #mainNav li.active {color:#860909;} #mainNav li.static {padding-top:2px;padding-left:0px;} #mainNav ul li#categories-3, #mainNav ul li#pages-3 {padding-right:0px;} /** * @section Content Styling * Styling of the Content-Element */ .storycontent a {color:#860909; text-decoration: underline;} .storycontent a:hover {color:#000; text-decoration: none;} #content, #content.home {margin-bottom:200px; margin-top:80px; padding:10px; position:relative; margin-left:486px; width:465px; background: #fff;} #content.home {margin-bottom:0px;} #content.home #visual img {cursor:pointer;margin-bottom:20px;} #content textarea, #content input {width:460px; border:solid 1px #B3B3B3} #content h2.date {display:none;} #post {position:relative;margin-top:10px;} .post {margin-bottom:20px; } #twitter_ico {width:100px; height: 100px; position:absolute; top:0px; left:890px;} .contact li {float:left;} #twitter {position:fixed; top:80px; left:20px; margin-bottom:50px;padding:10px; /*border:1px solid #b3b3b3;*/width:395px; background:#fff;} #sprechblase {z-index:0;display:block; position:absolute; bottom:-17px; left:280px; width:32px; height:17px;background:url(../img/sprechblase.gif) bottom left no-repeat; } #twitter a.twitterIco {z-index:20;display:block; position:absolute; bottom:5px; right:10px; width:71px; height:29px;background:url(../img/twitter.jpg) bottom left no-repeat; } #twitter a.twitterIco span {display: none;} #cloud {width:350px;margin-bottom:20px;} #twitter #cloud a {padding-right:8px; font-style: normal;} .meta, .meta a, .feedback, .feedback a {font-size:9px; font-style: italic; color:#B3B3B3;} .feedback {margin-top:2px; } h2.date {text-align:right;} h2.storytitle {color:#000;} h2.storytitle a {color:#000;} h2.storytitle a:hover {color:#860909; text-decoration:none;} .storycontent {width:445px;padding:10px;border:1px solid #b3b3b3;background:#fff;} #content .storycontent textarea, #content .storycontent input {width:440px; border:solid 1px #B3B3B3; padding:2px;} /* Comment */ form#commentform p.loggedIn, form#commentform p.loggedIn a, .comments p.feedLink {font-style: italic; font-size: 9px; color:#B3B3B3;} .noComments {display:none;} form#commentform input {padding:2px;} /*.storycontent img {margin-right:20px;width:650px; float:left;} .storycontent .text {padding:0px 5px 0 5px;width:260px; height:464px; float:left; background:#f2eef3;} .storycontent h3 {font-size:18px; margin-bottom:10px;} .storycontent #about img {width:363px;} */ /** * @section Footer Styling * Styling of the Footer-Element */ #sofa {z-index:2;position:fixed; bottom:0; left:0; width:441px; height:195px; margin-bottom: 30px; background:url(../img/sofa2.png) bottom left no-repeat;} #karin.karin1 {position:absolute; top:-43px; left:45px; width: 375px; height:155px;} #karin.karin2 {position:absolute; top:-80px; left:200px; width: 161px; height:315px;} #karin.karin3 {position:absolute; top:-75px; left:0px; width: 194px; height:305px;} #footer {z-index:1;position:fixed; bottom:0; left:0; width:100%; height:81px; background:#3e3d3f url(../img/footer.png) bottom left no-repeat;} #footer ul {margin-left:585px;} #footer ul li { float:left;} #footer ul li a { width:160px; height:81px;display:block;} #footer ul li a span {display:none;} /** * @section Clearfix * */ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } /* ************************************************************************************** SmartPhone Tiny Screen ************************************************************************************** */ /* tinyscreen.less */ @media only screen and (max-width: 596px), only screen and (max-device-width: 320px) { img, embed, object, video, #footer ul { margin: 0; padding: 0; max-width: 100%; } #wrapper, #header, #content, #content.home, #twitter, #footer, #post, #visual {width:100%;} body, #header, #content, #content.home {margin:0;padding:0;} #sofa, #visual, #twitter a.twitterIco, .category #twitter {display:none;} #footer, #header, #mainNav, #twitter {position:relative;} #twitter {top:55px; left:0;background: none;} ul#twitter_update_list li.firstTweet span {background: #D4D4D4;} #footer ul li {float:none;} #twitter #cloud a {display:inline-block; margin:5px 10px;padding:5px;background:#fff; border-radius:6px} #mainNav ul li {float:none; display: inline;} #content, #content.home {margin-top:10px;} }