/* Theme Name: Bude Rocks Theme Description: Single sidebar theme suitable for personal blogging. Image rotator in header can be easily customised with your own images - instructions in the readme.txt included. oTested compatible with Firefox / Safari / IE 7+ Version: 1.0 Author: Lunamedia Design Author URI: http://www.lunamedia.co.uk Tags: custom-header, brown, two-columns, fixed-width The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/gpl-license.php */ /* Global Styles */ html{ background: url(images/pattern.gif); } body{ width: 960px; margin: 0 auto; font: normal 62.5% "Gill Sans", "Myriad Pro", Myriad, "Lucida Grande", Helvetica, Arial, sans-serif; line-height: 2em; color: #454545; } li{ list-style: none; } a{ text-decoration: none; } a:link, a:visited, a:focus{ color: #7d0f04; } a:hover, a:active{ text-decoration: underline; } a img{ border: none; } h1, h2, h3, h4, h5, h6{ font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; } /* Layout */ #container{ position: relative; top: 0; left: 0; width: 960px; font-size: 1.2em; } #inner-wrap{ float: left; width: 920px; margin: 330px auto 0 auto; background: #48453a url(images/paper.png) repeat-y top center; font-size: 1.2em; } #content-main{ float: left; width: 560px; padding-left: 30px; padding-right: 10px; } #content-inner{ position:relative; z-index: 100; } #sidebar{ float: left; width: 220px; margin-top: -200px; margin-right: 20px; margin-left: 80px; color: #c8c8c8; } #sidebar-inner{ position: relative; z-index: 100; } #footer{ float: left; clear: both; width: 890px; margin: 0; padding: 15px 30px 30px 0; text-align: right; color: #807c72; background: url(images/footer.png) no-repeat top center; } #header{ position: absolute; top: 0; left: 0; width: 960px; height: 330px; margin-left: -20px; background: url(images/header.png) no-repeat top left; z-index: 0; } /* Header Styles */ #header h1{ float: left; height: 236px; width: 300px; margin: 80px 0 10px 40px; padding: 70px 0 0 35px; font-size: 2.4em; line-height: 1.2em; background: url(images/title.png) no-repeat top left; } #header h1 a:link, #header h1 a:visited, #header h1 a:active{ color: #524f47; } #header h1 a:hover{ text-decoration: none; } .description{ float: left; clear: left; width: 270px; margin: -200px 0 0 80px; padding: 10px 0 4px 0; font: italic 1.2em Georgia, Times, serif; color: #807c72; border-top: 1px dotted #9d9a93; } img#polaroid{ position: absolute; top: 73px; left: 473px; z-index: 100; } img#tape{ position: absolute; top: 37px; left: 490px; z-index: 150; } /* Posts */ .post{ margin-bottom: 60px; } .post ol li{ padding-left: 20px; list-style-type: decimal; } .post ul li{ padding-left: 20px; list-style-type: disc; } h2.title-header{ line-height: 1.2em; text-align: center; border-top: 3px double #a6a193; border-bottom: 3px double #a6a193; padding: 10px; font-style: italic; } h2.title-header a{ display: inline-block; width: 100%; margin-bottom: 10px; color: #636260; } h2.title-header span.title-meta, p.postmetadata{ width: 100%; text-align: center; font: normal 11px "Gill Sans", "Myriad Pro", Myriad, "Lucida Grande", Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 2px; color: #807c72; } p.postmetadata{ clear: both; } /* Sidebar Styles */ #sidebar h2{ padding: 0.4em 0 0.2em 0; font-size: 0.9em; text-transform: uppercase; text-align: center; font: normal 1em "Gill Sans", "Myriad Pro", Myriad, "Lucida Grande", Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid #ccc; } #sidebar ul{ padding-left: 0; } #sidebar ul li{ margin: 0 0 40px 0; padding: 0; list-style-position: outside; } #sidebar ul li ul li{ margin: 0.5em 0; padding: 0 0 0.4em 0; list-style-position: outside; font-size: 1em; border-bottom: 1px dotted #777; } #sidebar ul li ul li ul li{ margin: 0.5em 0 0 0; padding: 0 0 0 1em; border: none; } #sidebar a, #sidebar ul li a{ color: #f8f8f8; } /* Footer Styles */ #footer a{ color: #666; } .navigation { display: block; text-align: center; margin-top: 10px; margin-bottom: 60px; } /* Begin Images */ p img { padding: 0; max-width: 100%; } /* Using 'class="alignright"' on an image will (who would've thought?!) align the image to the right. And using 'class="centered', will of course center the image. This is much better than using align="center", being much more futureproof (and valid) */ img.centered, .aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px; } img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; } img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; } .alignright { float: right; } .alignleft { float: left } /* End Images */ /* End Various Tags & Classes*/ /* Begin Comments*/ div.comments{ float: left; margin: 10px 0; padding-top: 10px; } ol#comments{ padding: 0; } ol#comments li{ float: left; clear: left; width: 538px; margin: 5px 0; padding: 10px; border: 1px solid #aaa; } ol#comments li.odd{ background: #fff; } ol#comments li.even{ background: #eee; } div.comment-meta{ float: left; width: 200px; } span.gravatar{ float: left; margin-right: 10px; padding: 5px; background: #f8f8f8; border: 1px solid #aaa; } span.comment-author{ font-size: 17px; } span.comment-author a{ text-decoration: none; } span.comment-date{ position: relative; top: 4px; font: normal 11px "Gill Sans", "Myriad Pro", Myriad, "Lucida Grande", Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: 2px; color: #aaa; } div.comment-text{ padding-left: 210px; } div.comment-text p{ margin-bottom: 10px; } div#comments-form{ float: left; clear: both; margin-top: 20px; } div#comments-form span.label-holder{ float: left; width: 55px; padding-top: 5px; } p#respond{ clear: left; padding-top: 20px; } /* Begin Form Elements */ #searchform { margin: 10px auto; padding: 5px 0; text-align: left; } #sidebar #searchform #s { width: 108px; padding: 2px; } #sidebar #searchsubmit { padding: 1px; } .entry form { text-align:left; } select { width: 130px; } #commentform input { width: 170px; padding: 2px; margin: 5px 5px 1px 0; } #commentform textarea { width: 100%; padding: 2px; } #commentform #submit { margin: 0; float: right; } /* End Form Elements */ /* Captions */ .aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; } /* End captions */ .navigation { display: block; text-align: center; margin-top: 10px; margin-bottom: 60px; } /* End Various Tags & Classes*/ /* Captions */ .aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; } /* End captions */