/* Wordpress CSS requirements ============================================================================================================================================== Theme Name: Code - lewro 2009 Theme URI: http://code.lewro.com/ Description: Code theme by lewro - all rights reserved - copyright 2008. ============================================================================================================================================== Lewro's blog CSS Structure ============================================================================================================================================== Title: Style sheet - Code & Config Type: General File: style.css CSS version: 1.0 Author: Roman Leinwather E-mail: roman.leinwather@gmail.com Website: http://code.lewro.com Copyright: Copyright (c) 2009 - 2010 Roman Leinwather Updated: 01th Nov 2009 ============================================================================================================================================== Comment types: TODO: Something must be fixed KLUDGE: How the problem was fixed BUG: Description of the problem TEST: Used only fof testing. Should be removed in production version ============================================================================================================================================== TABLE OF CONTENT I. Yahoo Reset CSS II. Body III. Default Elements IV. Headings V. Links VI. Media VII. Layout VIII. Branding VIX. Navigation VX. Footer ================================================================================================================================================ */ /* I. Yahoo Reset CSS ================================================================================================================================================ */ @import url(http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css); :focus {-moz-outline-style:none;} /* does not validate */ /* II. Body ================================================================================================================================================ */ html {background: #cc5927 url(images/bg_site.png) 0 -18px repeat-x; line-height:1.1em;} body {font-family: "Gill Sans" , "Lucida Grande", Tahoma, Arial ,sans-serif;} /* III. Default Elements ================================================================================================================================================ */ /* Test - no internet */ * {margin:0px; padding:0px;} p,ul,dl,ol { } ul {list-style:none;} ol { } hr { } blockquote { } blockquote p { } blockquote cite { } abbr { } abbr:hover { } del { } strong {font-weight:bold;} em {font-style:italic;} .float_left {float: left;} .float_right {float: right;} .hide_text {text-indent: -99999px;} .hide_all {display: none;} /* IV. Headings ================================================================================================================================================ */ h1 {font-size:30px;} h2 {font-size:16px; font-family:Arial, Verdana, sans-serif; color:#de3c03; text-shadow: 1px 1px 1px #ddd;} h3 {font-size:15px; font-weight:bold; font-family:Arial, Verdana, sans-serif;} h4 {font-size:13px; font-weight:bold; font-family:Arial, Verdana, sans-serif;} /* V. Links ================================================================================================================================================ */ a:link, a:visited {text-decoration:none; color:#de3c03;} a:hover, a:focus {text-decoration:none; color:#000;} /* VI. Media ================================================================================================================================================ */ img { } /* VII. Layout ================================================================================================================================================ */ #wrapper {width:960px; margin:0 auto;} #content {float:left; width:860px; background:url(images/bg_top.png) 0 34px no-repeat ; margin-top:35px;} /* VIII. Branding ================================================================================================================================================ */ #header {float:left; width:960px;} #header h1 {float:left; width:960px;} #header h1 a {display:block; position:absolute; width:960px; background:url(images/bg_logo.png) 0 0 no-repeat; height:67px; margin-top:25px;} /* VIX. Navigation ================================================================================================================================================ */ #topLinks {float:left; width:960px; height:26px;} #topLinks ul {float:left;} #topLinks ul li {float:left;} #topLinks ul li a {float:left; display:block; text-indent:-9999px;} #navigation {float:left; width:100px; margin-top:103px;} #navigation li a{float:left; clear:both; display:block; width:86px; height:31px; background: url(images/bg_nav_sprite.png) 0 0 no-repeat;} #navigation li a#nav_home {background-position: 0 0;} #navigation li a#nav_about {background-position: 0 -33px; margin-top:3px;} #navigation li a#nav_archive {background-position: 0 -65px; margin-top:3px;} #navigation li a#nav_home:hover {background-position: -90px 0;} #navigation li a#nav_about:hover {background-position: -90px -33px; margin-top:3px;} #navigation li a#nav_archive:hover {background-position: -90px -65px; margin-top:3px;} /* VX. Footer ================================================================================================================================================ */ #footer_cover {float:left; width:960px; clear:both; padding-bottom:50px;} #footer {float:left; clear:both; width:960px; height:44px; margin-top:20px; background:url(images/bg_footer.png) 105px 0px no-repeat;} #footer_wrapp {float:left; width:860px; padding: 3px 0 0 100px;} #footer p {float:left; width:465px; font-size:14px; margin:10px 0 0 20px; color:#eee; text-shadow:0px 1px 1px #333;} #footer ul {float:left; width:345px; margin-top:10px; } #footer ul li {float:left; margin-left:5px;} #footer ul li a {display:block; float:left; font-size:14px; letter-spacing:0.5px; color:#eee; text-shadow:0px 1px 1px #333;} #footer ul li a:hover {color:#000;} /* Content Cover */ #content_inner {float:left; margin-top:318px; padding:0 25px; background:url(images/bg_middle.png) 0 0 repeat-y; width:810px;} #content_cover {float:left; background: url(images/bg_bottom.png) bottom left no-repeat; padding-bottom:20px;} /* Categories */ #tagsList {float:left; clear:both; width:800px;} #tagsList h2 {float:left; clear:both; width:90px; height:17px; background:url(images/bg_title_categories.png) 0 0 no-repeat;} #tagsList #categories_cover {float:left; width:800px; background:url(images/bg_categories_bottom.png) bottom left no-repeat; padding-bottom:5px;} #tagsList #categories_inner {float:left; width:800px; background:url(images/bg_categories_middle.png) 0 0 repeat-y; margin-top: 20px;} #tagsList #categories_cover ul {float:left; width:800px; background: url(images/bg_categories_top.png) 0 0 no-repeat; padding-top:20px; min-height:40px} #tagsList #categories_cover ul li {float:left; padding-bottom:25px;} #tagsList #categories_cover ul li a {float:left; display:block; width:95px; margin-left:25px; font-size:15px; letter-spacing:0.5px; color:#eee; text-shadow:0px 1px 1px #333;} /* Post */ .post {float:left; clear:both; width:800px; margin-top:20px; padding-top:23px; background:url(images/_bg_horizontal_line.png) 0 0 repeat-x;} .post h2 {padding-bottom:2px;} .post h3 {padding: 15px 0 5px 0; color:#666; text-shadow:1px 1px #fff;} .post h4 {padding: 15px 0 5px 0; color:#666; text-shadow:1px 1px #fff;} .post h2 a {float:left; display:block; clear:both; width:800px; color:#de3c03; padding-bottom:5px;} .post .published {float:left; color:#717070; display:block; margin-right:10px; font-size:11px; background:url(images/ico_calendar.png) 0 0 no-repeat; padding: 5px 0 10px 30px;} .post .postDetails {float:left; clear:both; width:800px;} .post .comments {float:left; display:block; color:#717070; margin-right:10px; font-size:11px; padding:5px 0 10px 0;} .post .comments a {float:left; display:block; color:#717070; font-size:11px; padding-right:10px;} .post .comments a:hover {color:#000;} .post .tags {float:left; display:block; color:#717070; margin-right:10px; font-size:11px; padding:5px 0 10px 0;} .post .tags a {float:left; display:block; color:#717070; font-size:11px;} .post .tags a:hover {color:#000;} .post .postmetadata {float:left; clear:both; width:800px;} .post .postmetadata .entry {float:left; width:560px; font-size:13px; color:#505051;} .post .postmetadata .entry p {margin:0px 0 10px 0;} .post .postmetadata .commentsDescription {float:left; width:800px; clear:both; margin-top:20px;} .post .postmetadata .commentsDescription a {float:left; display:block; width:229px; height:51px; background: url(images/btn_join_discussion.png) 0 0 no-repeat; text-indent:-9999px;} /* Category icons */ .post .postmetadata .category_icon {float:left; display:block; width:172px; height:205px; margin:-78px 0 0 68px;} .post .postmetadata .category_icon.jQuery {background:url(images/ico_jquery.png) 0 0 no-repeat;} .post .postmetadata .category_icon.Rails {background:url(images/ico_rails.png) 0 0 no-repeat;} .post .postmetadata .category_icon.HTML {background:url(images/ico_html.png) 0 0 no-repeat;} .post .postmetadata .category_icon.PHP {background:url(images/ico_php.png) 0 0 no-repeat;} .post .postmetadata .category_icon.S3 {background:url(images/ico_s3.png) 0 0 no-repeat;} .post .postmetadata .category_icon.EC2 {background:url(images/ico_ec2.png) 0 0 no-repeat;} .post .postmetadata .category_icon.CSS {background:url(images/ico_css.png) 0 0 no-repeat;} .post .postmetadata .category_icon.GIT {background:url(images/ico_git.png) 0 0 no-repeat;} /* Comments */ #comments {float:left; clear:both; width:800px; margin-top:20px; background:url(images/_bg_horizontal_line.png) 0 0 repeat-x;} #comments h3 {background:url(images/bg_title_comments.png) 0 0 no-repeat; width:91px; height:15px; margin-top:15px;} #comments .commentList {float:left; clear:both; width:800px;} #comments .commentList li {float:left; clear:both; width:800px; margin-top:15px; padding-bottom:15px; background:url(images/_bg_horizontal_line.png) bottom left repeat-x;} #comments .commentTextCover {float:left; width:675px;} #comments .commentTextCover p {float:left; width:655px; font-size:13px; color:#505051; padding-bottom:10px;} #comments .commentTextCover .comment_date {float:left; clear:both; display:block; background:url(images/ico_calendar.png) 0 0 no-repeat;color:#717070; font-size:11px; margin-right:10px; padding:5px 0 20px 30px;} #comments .commentSidecover {float:right; width:120px;} #comments .commentSidecover img {float:right; width:80px;} #comments .commentSidecover cite {float:right; text-align:right; width:120px; margin-top:10px; font-size:13px; color:#717070;} #comments .commentSidecover cite a {color:#000;} #comments .commentSidecover cite a:hover {color:#DE3C03;} /* Comment Form */ #comment_form_cover {float:left; clear:both; width:800px; margin-top:15px; padding-bottom:15px; background:url(images/_bg_horizontal_line.png) bottom left repeat-x;} #comment_form_cover #respond {float:left; clear:both; background:url(images/bg_title_comment_form.png) 0 0 no-repeat; width:800px; height:17px;} #comment_form_cover p#code_coloring {float:left; padding-top:5px; font-size:13px; color:#999;} #comment_form_cover form {float:left; margin-top:20px; font-size:11px;} #comment_form_cover #comment_form_left {float:left; width:320px;} #comment_form_cover #comment_form_left p {float:left; clear:both; width:320px; padding-bottom:12px;} #comment_form_cover #comment_form_left p label {float:left; width:100px; height:27px;} #comment_form_cover #comment_form_left p#author_paragraph label {background:url(images/bg_label_name.png) 0 0 no-repeat;} #comment_form_cover #comment_form_left p#email_paragraph label {background:url(images/bg_label_email.png) 0 0 no-repeat;} #comment_form_cover #comment_form_left p#web_paragraph label {background:url(images/bg_label_web.png) 0 0 no-repeat;} #comment_form_cover #comment_form_left p input {padding:7px 5px 0 5px; width:190px; height:19px; background: #f7f7f7 url(images/bg_textarea.png) 0 0 repeat-x; border-left:1px solid #d3d3d3; border-right:1px solid #d3d3d3; border-top:none; border-bottom:1px solid #fff; font-size:13px;} #comment_form_cover #comment_form_right {float:left; width:475px;} #comment_form_cover #comment_form_right p {float:left; width:397px;} #comment_form_cover #comment_form_right p label {display:none;} #comment_form_cover #comment_form_right p#submit_paragraph {width:65px;} #comment_form_cover #comment_form_right p textarea {float:left; width:387px; height:95px; background: #f7f7f7 url(images/bg_textarea.png) 0 0 repeat-x; border-left:1px solid #d3d3d3; border-right:1px solid #d3d3d3; border-top:none; border-bottom:1px solid #fff; padding:5px; font-family: "Lucida Grande", Verdana !important; font-size: 11px;} #comment_form_cover #comment_form_right p #submit {width:66px; height:109px; margin-left:19px;} /* =SYNTAX HIGHLIGHTER ================================================ */ #wrapper #content .entry .syntaxhighlighter {width:793px !important; background-color: #000 !important; border:2px solid #747474 !important; font-family: "Lucida Grande", Verdana !important; font-size: 11px !important; text-shadow:none; float:left !important; clear:both; margin:0 0 10px 0 !important;} #wrapper #content .entry .syntaxhighlighter .lines {background: #000 !important;} #wrapper #content .entry .syntaxhighlighter .lines .line.alt1 {background: #0a0a0a !important;} #wrapper #content .entry .syntaxhighlighter .lines .line.alt2 {background: #000 !important;} #wrapper #content .entry .syntaxhighlighter .line .number code {color:#333 !important;} #wrapper #content .entry .syntaxhighlighter .line .content {border-left:none !important; color:#d6d6d6 !important;} #wrapper #content .entry .syntaxhighlighter .keyword {color:#d6d6d6 !important;} #wrapper #content .entry .syntaxhighlighter .plain, #wrapper #content .entry .syntaxhighlighter .plain a {color:#d6d6d6 !important;} #wrapper #content .entry .syntaxhighlighter, #wrapper #content .entry .syntaxhighlighter div, #wrapper #content .entry .syntaxhighlighter code, #wrapper #content .entry .syntaxhighlighter table, #wrapper #content .entry .syntaxhighlighter table td, #wrapper #content .entry .syntaxhighlighter table tr, #wrapper #content .entry .syntaxhighlighter table tbody {font-family: "Lucida Grande", Verdana !important; font-size: 11px !important; font-weight:normal !important; line-height:1.5em !important;} #wrapper #content .entry .syntaxhighlighter .string, #wrapper #content .entry .syntaxhighlighter .string a {color:#de3c03 !important;} #wrapper #content .entry .syntaxhighlighter .comments, #wrapper #content .entry .syntaxhighlighter .comments a {color:#919191 !important;} #wrapper #content .entry .syntaxhighlighter .value, #wrapper #content .entry .syntaxhighlighter .value {color:#de3c03 !important;} #wrapper #content .entry .syntaxhighlighter .variable {color:#fff !important;} #wrapper #content .entry .syntaxhighlighter .functions {color:#de3c03 !important;} /* =SYNTAX HIGHLIGHTER COMMENTS AREA ================================================ */ #comments .syntaxhighlighter {width:641px !important; background-color: #2968b4 !important; border:2px solid #1354a3 !important; font-family: "Lucida Grande", Verdana !important; font-size: 11px !important; text-shadow:none; float:left !important; clear:both; margin-top:15px;} #comments .syntaxhighlighter .lines {background: #000 !important;} #comments .syntaxhighlighter .lines .line.alt1 {background: #2968b4 !important;} #comments .syntaxhighlighter .lines .line.alt2 {background: #2968b4 !important;} #comments .syntaxhighlighter .line .number code {color:#333 !important;} #comments .syntaxhighlighter .line .content {border-left:none !important; color:#2968b4 !important;} #comments .syntaxhighlighter .keyword {color:#eef6ff !important;} #comments .syntaxhighlighter .plain, #comments .syntaxhighlighter .plain a {color:#eef6ff !important;} #comments .syntaxhighlighter, #comments .syntaxhighlighter div, #comments .syntaxhighlighter code, #comments .syntaxhighlighter table, #comments .syntaxhighlighter table td, #comments .syntaxhighlighter table tr, #comments .syntaxhighlighter table tbody {font-family: "Lucida Grande", Verdana !important; font-size: 11px !important; font-weight:normal !important; line-height:1.5em !important;} #comments .syntaxhighlighter .string, #comments .syntaxhighlighter .string a, #comments .syntaxhighlighter .variable {color:#9fcbff !important;} #comments .syntaxhighlighter .functions {color:#fff !important;} #comments .syntaxhighlighter .comments, #comments .syntaxhighlighter .comments a {color:#919191 !important;} #comments .syntaxhighlighter .value, #comments .syntaxhighlighter .value {color:#de3c03 !important;} /* =ABOUT PAGE ================================================ */ #about .entry {flaot:left; width:800px;} #about .entry .description_left {float:left; width:370px;} #about .entry .description_right {float:left; width:370px; margin-left:50px;} /* Single Page - ARCHIVE */ #archive .post .postmetadata .entry {width:800px;} #archive #pagetitleArhiveFor {font-size:15px; font-weight:bold; float:left; width:800px; clear:both; color:#999; margin-top:30px; text-align:center; text-transform:uppercase; background: url(images/_bg_horizontal_line.png) 0 0 repeat-x; padding-top:20px; text-shadow:1px 1px 1px #fff;} /* MY ARCHIVE */ #archiveViews {float:left; clear:both; width:400px; margin-top:30px;} #archiveViews a {color:#999;} #archiveViews h4 {float:left; width:400px; background: url(images/_bg_horizontal_line.png) 0 0 repeat-x; padding-top:10px; font-size:13px;} #archiveViews h4 a {float:left; width:400px; display:block; background: url(images/_bg_horizontal_line.png) bottom left repeat-x; padding-bottom:10px;} #archiveViews ul {float:left; width:400px; padding:0px 0 10px 0;} #archiveViews ul li {float:left; width:168px; font-size:13px; border:1px solid #fff; margin-right:10px; padding:5px 10px; background:#ddd; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-top:10px;} #archiveViews ul li a {margin-left:10px;} #archiveViews ul li a:hover {color:#de3c03;}