/* @override http://www.helikajo.fi/assets/css/global.css http://www.helikajo.fi/assets/css/global.20090926.css */ /* ----------------------------------------------------------- Project: Heli Kajo Version: 1.0 Created: 20090925 Modified: [Table of contents] 1. Reset 2. Typography 2.1 Headings 2.2 Text elements 2.3 Lists 2.4 Tables 2.5 Forms 3. Structure 3.1 Header 3.2 Navigation 3.3 Content 3.4 Footer 4. Clear floats ----------------------------------------------------------- */ /* ----------------------------------------------------------- Reset ----------------------------------------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* Tables still need 'cellspacing="0"' in the markup. */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } table, td, th { vertical-align: middle; } /* Remove possible quote marks (") from ,
. */ blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a img { border: none; } /* ----------------------------------------------------------- Typography ----------------------------------------------------------- */ body { font-size: 87.5%; color: #fff; line-height: 1.5; font-family: Georgia, "Times New Roman", Times, serif; } /* Headings -------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6 { font-weight: normal; } h1 { font-size: 1.75em; line-height: 1.25; margin-bottom: 0.5em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; line-height: 1; margin-bottom: 1em; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } /* Text elements -------------------------------------------------------------- */ p { margin: 0 0 1.15em; } p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; } p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; } a:focus, a:hover { color: #000; } a { color: #000; text-decoration: underline; } blockquote { margin: 1.5em; color: #666; font-style: italic; } strong { font-weight: bold; } em,dfn { font-style: italic; } dfn { font-weight: bold; } sup, sub { line-height: 0; } /* Lists -------------------------------------------------------------- */ li ul, li ol { margin:0 1.5em; } ul, ol { margin: 0 1.5em 1.5em 1.5em; } ul { list-style-type: disc; } ol { list-style-type: decimal; } dl { margin: 0 0 1.5em 0; } dl dt { font-weight: bold; } dd { margin-left: 1.5em;} /* Forms -------------------------------------------------------------- */ label { font-weight: bold; } fieldset { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; } legend { font-weight: bold; font-size:1.2em; } input.text, input.title { width: 300px; margin:0.5em 0.5em 0.5em 0; } input.text, input.title { border:1px solid #bbb; background:#f6f6f6; padding:5px; } input.text:focus, input.title:focus { border:1px solid #999; background:#fff; } input.title { font-size:1.5em; } textarea { width: 400px; height: 250px; margin:0.5em 0.5em 0.5em 0; } textarea { border: none; background:#fff; padding:5px; } textarea:focus { border: none; background:#fff; } select { border:1px solid #ccc; background:#f6f6f6; width:200px; } select:focus { border:1px solid #999; background:#fff; } /* ----------------------------------------------------------- Structure ----------------------------------------------------------- */ body { background: #c1c1c1; text-align: center; } #page { margin: auto; background: transparent; width: 960px; text-align: left; } #logo { float: left; } #logo h1, #logo a { background: transparent; display: block; width: 328px; height: 246px; margin: 15px 0 0 125px; text-indent: -9999px; } #main-content #logo a { background: transparent url(../img/heli-kajo-logo-blog.jpg); margin: 0; width: 510px; height: 362px; outline: none; } #front { height: 805px; width: 100%; background: transparent url(../img/heli-kajo.jpg) no-repeat; font-size: 1.15em; position: relative; } #intro { float: right; width: 400px; margin: 62px 50px 0 0; display: inline; } #intro div { clear: both; background: transparent url(../img/bg-intro.png) repeat-x; _background: transparent url(../img/bg-intro.gif) repeat-x; padding-top: 24px; min-height: 400px; height: auto !important; height: 400px; } #intro div * { padding-left: 20px; padding-right: 20px; } #tabs { margin: 0; padding: 0; list-style-type: none; } #tabs li { float: left; } #tabs a { display: block; height: 41px; text-indent: -9999px; background: transparent url(../img/navi-sprite.png) no-repeat; _background: transparent url(../img/navi-sprite.gif) no-repeat; outline: none; } #bio-link { background-position: 0 -82px !important; width: 78px; } #his-link { background-position: -78px -82px !important; width: 119px; } #yht-link { background-position: -197px -82px !important; width: 175px; } #bio-link:hover { background-position: 0 -41px !important; width: 78px; } #his-link:hover { background-position: -78px -41px !important; width: 119px; } #yht-link:hover { background-position: -197px -41px !important; width: 175px; } .ui-state-active #bio-link { background-position: 0 0 !important; width: 78px; } .ui-state-active #his-link { background-position: -78px 0 !important; width: 119px; } .ui-state-active #yht-link { background-position: -197px 0 !important; width: 175px; } #home #social { position: absolute; bottom: 100px; right: 0; width: 430px; } #home #social a { float: left; } #social a { background: transparent url(../img/social-sprite.png) no-repeat 0 0; _background: transparent url(../img/social-sprite.gif) no-repeat 0 0; display: block; width: 150px; height: 45px; margin: 0 0 10px 0; text-indent: -9999px; outline: none; } #facebook { background-position: 0 -1px !important; } #home #facebook { margin-right: 40px !important; } #facebook:hover { background-position: 0 -45px !important; } #myspace { background-position: 0 -90px !important; } #myspace:hover { background-position: 0 -134px !important; } #twitter { background-position: 0 -180px !important; } #twitter:hover { background-position: 0 -225px !important; } #main { background: transparent url(../img/bg-main.jpg) no-repeat 0 0; min-height: 480px; margin-bottom: 40px; } #main-nosto { float: left; width: 450px; margin: 88px 0 0 70px; display: inline; } #sidebar-nosto { float: right; width: 330px; margin: 35px 60px 0 0; display: inline; } .post { padding-bottom: 18px; margin-bottom: 24px; clear: both; } #main-nosto .post { background: transparent url(../img/hr-large.png) no-repeat center bottom; _background: transparent url(../img/hr-large.gif) no-repeat center bottom; } #main-content .post, #comments, #comment-form { margin-left: 60px; } .post h1 { margin-bottom: 0; } .post h1 a { color: #fff; text-decoration: none; } .post h1 a:hover { color: #111; } .post a, p a { color: #7d8a8a; } .post a:hover. p a:hover { color: #111; } .post-meta { font-size: 12px; } .more { text-decoration: none; color: #7d8a8a; } #main-content { float: left; width: 510px; } #sidebar { float: right; width: 390px; margin-top: 362px; margin-bottom: 40px; } #sidebar ul { list-style-type: none; margin-left: 0; color: #7d8a8a; } #sidebar ul a { color: #7d8a8a; text-decoration: none; } #sidebar ul a:hover { color: #111; } #sidebar h3 { height: 29px; text-indent: -9999px; } #latest-blog, #latest-suositus { margin-bottom: 3.5em; } #latest-blog h3 { background: transparent url(../img/aikaisemmat.png) no-repeat 0 0; } #latest-suositus { background: transparent url(../img/suosittelee.png) no-repeat 0 0; } #tutustu { background: transparent url(../img/tutustu.png) no-repeat 0 0; } #pagination { margin: 0 0 40px 60px; width: 450px; overflow: hidden; } #pagination a { text-decoration: none; color: #7d8a8a; float: left; } #blog-single #older { margin-right: 60px; } #blog-main #older { margin-right: 75px; } #newer { float: right !important; } .ui-tabs .ui-tabs-hide { display: none; } #eurovision, .keikka { background: transparent url(../img/hr-small.png) no-repeat center bottom; _background: transparent url(../img/hr-small.gif) no-repeat center bottom; padding-bottom: 1px; margin-bottom: 16px; } #eurovision a img { border: 5px solid #afb3b2; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin: 0 0 12px 50px; } #keikat { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; clear: both; } #keikat span { color: #fe1f1f; } #keikat h3 { background: transparent url(../img/keikat.png) no-repeat 0 0; height: 24px; text-indent: -9999px; } #kuvat h3 { background: transparent url(../img/kuvat.png) no-repeat 0 0; height: 24px; text-indent: -9999px; } #kuvat a { outline: none; } #kuvat a img { border: 5px solid transparent; _border: 5px solid #C1C1C1 !important; } #kuvat a:hover img { border: 5px solid #83b0a5; _border: none !important; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } #comments { margin-bottom: 2.5em; } .comment { margin-top: 24px; background: transparent url(../img/comment-separator.png) no-repeat center bottom; _background: none !important; padding-bottom: 16px; } p.author { color: #7d8a8a; font-size: 20px; line-height: 1.25; margin-bottom: 0.6em; } p.author span { color: #fff; font-size: 12px; display: block; } #comment-form { } #comment-form img { margin-bottom: 0.5em; } #comment-form label { display: block; } #comment-form input.field { background: #fff; border: none; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; padding: 10px 8px 10px 8px; } #comment-form textarea { font-family: Georgia, "Times New Roman", Times, serif !important; font-size: 14px !important; } #comment-form input.field.idleField { color: #7d8a8a; } input.submit { background: transparent url(../img/laheta.gif) no-repeat 0 0; border: none; display: block; width: 109px; height: 29px; padding: 0; text-indent: -9999px; margin-top: -1em; } input.submit:hover { cursor: pointer; } /* Footer -------------------------------------------------------------- */ #footer { clear: both; background: transparent url(../img/bg-footer.jpg) no-repeat center 0; text-align: center; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #7d8a8a; height: 190px; } #footer p { margin: 0; padding-top: 78px; } /* ----------------------------------------------------------- Clear floats ----------------------------------------------------------- */ .wrapper { display: inline-block; } .wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html .wrapper { height: 1%; } .wrapper { display: block; }