/* Theme Name: Venice Version: 1.0 Author: Billion Studio Author URI: http://www.billionstudio.com/ Tags: green, two columns, fixed width, widgets, gravatars Description: A stylish green theme with 2 columns and widget support. This theme is was designed and built by Will Mayo, whose blog you will find at http://www.willmayo.com/ Copyright Will Mayo 2008 The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/gpl-license.php */ @import url('./style-reset.css'); @import url('./style-common.css'); /* Default fonts and colors ========================================== */ body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea,select { color: #333; font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: "Century Gothic", "Gill Sans", "Trebuchet MS", Arial, sans-serif; color: #666; } /* LAYOUT ========================================== */ body { background-color: #333; font-size: 70%; line-height: 150%; } div#page { width: 755px; margin: 0 auto; } div.container { width: 755px; margin: 0 auto; height: 100%; overflow: auto; } div.tiny { width: 125px; float: left; } div.small { width: 270px; float: left; padding-left: 20px; height: 100%; overflow: auto; } div.large { width: 465px; float: left; } div.full { width: 100%; float: left; } div.container.body { padding: 20px 0 0; height: 100%; overflow: auto; } /* HEADER ========================================== */ #header { width: 100%; margin: 0 auto; border-bottom: 3px solid #91C228; } #header .container { padding: 25px 0 0; position: relative; } #header h1, #header p { text-transform: uppercase; } #header h1, #header p, #header h1 a { color: #fff; } #header h1 { font-weight: normal; padding: 0 0 3px; margin: 0; } #header h1 a { text-decoration: none; width: auto; } #header p { font-size: 120%; letter-spacing: 2px; padding: 0; color: #E6E6E6; font-family: "Century Gothic", "Gill Sans", "Trebuchet MS", Arial, sans-serif; } /* Header Main Navigation ========================================== */ #nav { float: right; bottom: 0; right: 0; display: block; padding: 0; margin: 0; border: 0; } #nav li { font-size: 100%; color: #333; font-weight: bold; padding: 0; margin: 0 0 0 1px; list-style: none; display: block; float: left; text-transform: uppercase; } #nav li a { margin: 0; padding: 12px 24px 10px; color: #fff; background-color: #5E840A; display: block; text-decoration: none; line-height: 50%; float: left; border-top: 1px solid #7D8D01; } #nav li a:hover { background-color: #78A419; border-top-color: #9CAF0E; } #nav li a:active, #nav li.current_page_item a { text-decoration: none; color: #fff; background-color: #91C228; border-top-color: #BBD01A; } #nav li.rss a { padding-left: 36px; background-image: url(images/rss.png); background-position: 17px center; background-repeat: no-repeat; } #nav li li, #nav li ul { display: none; } /*hide sub pages*/ /* HOMEPAGE TOP ========================================== */ #home-top { clear: both; width: 100%; margin: 0 auto; background: url('images/bg-first-post.png') no-repeat left top; background-color: #91C228; position: relative; } #home-top .container { height: 100%; overflow: auto; background: url('images/bg-home-top-sidebar.png') repeat-y right top; } #home-top span.logo { /* Floating image */ background: transparent url('images/logo.png') no-repeat right top; width: 150px; height: 150px; display: block; overflow: auto; position: absolute; bottom: -90px; right: -60px; } #home-top .post { padding: 12px 20px 12px; min-height: 100%; } #home-top .post h2, #home-top .post h2 a { font-size: 170%; line-height: 100%; color: #fff; text-shadow: 0px 1px 2px #4F6C11; } #home-top .post h2 a:hover, #home-top .post a.more-link:hover { border-bottom: 1px solid #fff; text-decoration: none; } #home-top .post p { padding: 0 0 12px; } #home-top .post p.read-more { height: 100%; overflow: auto; text-align: right; } #home-top .post p a, #home-top .post p a:visited { color: #fff; font-weight: bold; } #home-top .post a.more-link { color: #fff; font-size: 120%; font-weight: bold; text-shadow: 0px 1px 2px #4F6C11; } /*Home-Top Sidebar*/ #home-top .small { background: url('images/bg-home-top.png') repeat-x center bottom; background-color: #91C228; } #home-top .sidebar { padding: 12px 20px 0 0; } #home-top .sidebar h3, #home-top .sidebar h3 a { color: #fff; padding: 3px 0 6px; text-shadow: 0px 1px 2px #4F6C11; } #home-top .sidebar h3 a:hover { color: #F0FFD1; text-decoration: none; } #home-top .sidebar p { padding-bottom: 6px; } #home-top ul { padding: 0 0 6px; list-style-type: none; } #home-top ul li { background: url('images/bullet.gif') no-repeat 2px 6px; padding: 0 0 0 14px; } #home-top .sidebar p, #home-top .sidebar ul li, #home-top .sidebar a, #home-top .sidebar a:visited { color: #EBFFC1; } /*RSS Subscribe*/ #home-top #rss.sidebar { background: url('images/rss-large.png') no-repeat 0px 12px; background-color: transparent; border-top: 1px solid #91C228; padding: 12px 0 12px 0; margin: 6px 20px 6px 0; height: 100%; overflow: auto; } #home-top #rss.sidebar h3, #home-top #rss.sidebar h4, #home-top #rss.sidebar p { color: #EBFFC1; padding: 0px; } #home-top #rss.sidebar a { padding-left: 40px; } #home-top #rss.sidebar h3, #home-top #rss.sidebar h3 a { color: #fff; } /* SUB HEADER ========================================== */ #sub-header { clear: both; width: 100%; margin: 0 auto; background: url('images/bg-nav.png') repeat-x left top; background-color: #E6E6E6; border-bottom: 1px solid #CCCCCC; } #sub-header ul { padding: 7px 70px 5px 12px; height: 100%; overflow: auto; color: #333; font-weight: bold; } #sub-header ul li { display: block; float: left; white-space: nowrap; border-left: 1px solid #ccc; padding: 0 0px; text-shadow: 0px 1px 1px #fff; } #sub-header ul li.first { border-left: 0; } #sub-header ul li a { display: block; line-height: 100%; float: left; padding: 5px 10px 6px; } #sub-header ul li a:hover { color: #333; text-decoration: none; } #sub-header ul li.current-cat a { color: #333; text-shadow: none; } #sub-header ul li ul { display: none; } /* CONTENT ========================================== */ #content { clear: both; width: 100%; margin: 0 auto; background-color: #fff; } #content .container { background: url('images/bg-content.png') repeat-y 465px top; background-color: #fff; } /*fixes other content inside content box*/ #content #content { background: #fff; width: auto; padding: 20px; margin: 0; border: 0; } #content p a, #content p a:link, #content p a:visited { color: #DE7A01; } #content h1 { color: #000; } #content h2 { padding: 0px 0 6px; } #content h2 a, #content h2 a:link, #content h2 a:visited, #content h3 a, #content h3 a:link, #content h3 a:visited { color: #666; text-decoration: none; } #content h2 a:hover, #content h3 a:hover { color: #333; text-decoration: underline; } #content h3 { padding: 6px 0 12px; } #content h4 a, #content h4 a:visited { color: #666; } #content ul { list-style-type: none; } #content ul, #content ol { padding: 0 0 20px; } #content ul li, #content ol li { background: url('images/bullet.gif') no-repeat 16px 9px; padding: 3px 0 3px 30px; } #content ul li a { font-weight: normal; text-decoration: none } #content ul li a:hover { text-decoration: underline } #content ul ul { padding: 0; } #content ol { margin-left: 30px; } #content ol li { padding-left: 0; background-image: none; } img.right, img.align-right, img.alignright { float: right; margin: 0 0 6px 12px; display: inline; } img.left, img.align-left, img.alignleft { float: left; margin: 0 12px 6px 0; display: inline; } img.centered { display: block; margin: 0 auto 6px; } img.wp-smiley { border: none; } .alignright { float: right; } .alignleft { float: left; } /* POST ========================================== */ #content .post, #content .post-nav, #content #comments { clear: both; padding: 0 20px 0 20px; height: 100%; overflow: auto; } #content .post-content img { padding: 3px; border: 1px solid #EAEAEA; max-width: 417px; } #content .post-title h2 { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #EAEAEA; } #content .post-title h2 a:hover { color: #666; text-decoration: underline; } #content .post-footer h4 { font-size: 110%; padding: 0 0 12px; text-transform: uppercase; } #content .post-footer h4, #content .post-footer h4 a, #content .post-footer h4 a:link, #content .post-footer h4 a:visited { color: #999; } #content .post-footer span { padding-right: 4px; padding-left: 19px; background: url('images/icon-post.png') no-repeat left center; } #content .post-footer span.post-comments { background-image: url('images/icon-comment.png'); } #content .post-footer span.post-date { background-image: url('images/icon-date.png'); background: none; padding-left: 0; } #content .post-footer span.post-category { padding-right: 3px; } #content .post table { background-color: #fff; border-collapse: collapse; border: 1px solid #EAEAEA; border-width: 1px 0px 1px 1px; border-left-width: 3px; } #content .post table th { border: 1px solid #EAEAEA; border-width: 0px 1px 0px 0px; } #content .post table td { border: 1px solid #EAEAEA; border-width: 0px 1px 0px 0px; } /* Next and Previous Post Navigation ========================================== */ #content .post-nav { clear: both; text-align: right; padding-bottom: 20px; } #content .post-nav, #content .post-nav a, #content .post-nav a:link, #content .post-nav a:visited { color: #999; } #content .post-nav .previous { text-align: left; float: left; } #content .post-nav .next { text-align: right; } /* Post Pages Navigation ========================================== */ #content p.pagenav { clear: both; } #content p.pagenav, #content .pagenav a, #content .pagenav a:link, #content .pagenav a:visited { color: #666; } #content .pagenav a, #content .pagenav span { border: 1px solid #EAEAEA; margin: 0 2px 0; padding: 3px 6px 4px; display: inline; } #content .pagenav span.extend { border: 0; padding: 0; } #content .pagenav a { text-transform: lowercase; background-color: #F3F3F3; text-decoration: none; line-height: 50%; } #content .pagenav a:hover { border-color: #ccc; } #content .pagenav span.current { background-color: #fff; } /* COMMENTS ========================================== */ #comments #comment_form { margin-left: 0px; margin-bottom: 20px; padding: 12px 12px 9px; background-color: #fff; border: 1px solid #EAEAEA; border-left-width: 3px; } #comments .comment-wrap { height: 100%; overflow: auto; margin: 0 0 12px 0; padding: 0 12px 0; clear: both; background-color: #fff; border: 1px solid #EAEAEA; } #comments h3 { padding-top: 0; } #comments .comment-wrap img.avatar { margin: 0; margin-bottom: 12px; padding: 2px; background-color: #fff; border: 1px solid #E8E8E8; } #comments .comment-wrap .left { width: 65px; padding-top: 12px; float: left; } #comments .comment-wrap .right { width: 322px; float: left; padding: 12px 0 6px 12px; } #comments .comment-wrap .right a { text-decoration: none; } #comments .comment-wrap .right a:hover { text-decoration: underline; } #comments .comment-wrap .right cite { margin: 0; padding: 0; font-style: normal; display: block; height: 100%; overflow: auto; } #comments .comment-wrap .right cite b { float: left; } #comments .comment-wrap .right cite b a { color: #333; } #comments .comment-wrap .right cite small { font-size: 80%; float: right; } #comments .comment-wrap .right p { padding: 6px 0; clear: both; } #comments .comment-wrap .right blockquote, #comments .comment-wrap .right code, #comments .comment-wrap .right pre { margin: 6px 0; clear: both; } #comments .alt { background-color: #F6F6F6; } #comments .author { background-color: #F6F7D6; border-color: #F1E4BC; } /* SIDEBAR ========================================== */ #content .sidebar { /*padding: 12px 20px 6px;*/ margin: 0 0 20px 0; margin-right: 20px; clear: both; color: #888; } #content .small h3 { color: #DE7A01; padding: 0 0 6px 0; margin: 0; font-weight: normal; text-transform: uppercase; } #content .small h4 { padding: 0; } #content .small p a, #content .small table a, #content .small h3 a, #content .small h3 a:visited { color: #333; } #content .small p { padding-right: 0; padding-bottom: 12px; margin: 0; color: #666; } #content .small ul { margin: 0; padding: 0 0 0px 0; border-top: 1px solid #F1E4BC; } #content .small ul li { color: #666; line-height: 125%; padding: 6px 0; background-image: none; border-bottom: 1px solid #F1E4BC; } #content .small ul li a:link, #content .small ul li a:visited { color: #888; text-decoration: none; } #content .small ul li a:hover, #content .small ul li a:active { color: #333; text-decoration: underline; } #content .small ul li ul { border: 0; } #content .small ul li input, #content .small ul li select { margin-bottom: 0; } #content .small ul li span.recent_date { padding-left: 3px; font-size: 80%; font-weight: bold; color: #889763; } #content .sidebar ul li a:hover { text-decoration: none; } #content .small ul ul { border: 0; padding: 0 0 0 20px; } #content .small ul ul li { border: 0; padding: 3px 0; } /*Custom sidebars*/ #content .sidebar.tiny { float: left; clear: none; margin-right: 0; } #content .sidebar.tiny ul { margin-right: 20px } /*Ads sidebar*/ #content #ads.sidebar { margin-right: 0; margin-bottom: 0; padding-right: 20px; height: 100%; overflow: auto; } #content #ads.sidebar img { float: left; border: 0; margin: 0; padding: 0; } /* FOOTER ========================================== */ #footer { clear: both; width: 100%; padding: 12px 0 0; } #footer .container { height: 100%; overflow: auto; } #footer h3 { color: #fff; } #footer p { padding: 0 20px 12px 0; margin: 0; color: #999; font-size: 90%; } #footer a, #footer a:visited { color: #999; } #footer a:hover, #footer a:active { color: #fff; } /* Footer Navigation ========================================== */ #footer ul.nav { padding: 0 0 12px; text-align: right; } #footer ul.nav li { color: #fff; margin: 0; display: inline; } #footer ul.nav li a { display: inline; margin: 0; padding: 0px 6px 0px 4px; text-decoration: none; border-right: 1px solid #666; } #footer ul.nav li a, #footer ul.nav li a:visited { color: #999; } #footer ul.nav li a:hover, #footer ul.nav li a:active { color: #fff; } #footer ul.nav li a.top { border: 0; padding-right: 0; } /* WIDGETS AND PLUGINS */ /* Search form ========================================== */ form#search-form { width: 100%; height: 25px; overflow: auto; padding: 0; margin: 0; margin-bottom: 20px; position: relative; } form#search-form input.text, form#search-form label.overlabel-apply { font-size: 110%; } form#search-form input.text { position: absolute; top: 0; left: 0; width: 217px; height: 15px; padding: 4px 3px 4px 4px; margin: 0; z-index: 0; border-color: #ccc; background: #fff; border-color: #F1E4BC; } form#search-form input.text:focus { border-color: #EBAB58; } form#search-form input.button-search { background-color: #EBAB58; position: absolute; top: 0px; right: 0px; margin: 0px; display: block; line-height: 100%; width: 25px; height: 25px; } form#search-form label.overlabel { display: none; position: absolute; top: 0; left: 0; } form#search-form label.overlabel-apply { display: block; color: #888; position: absolute; top: 7px; left: 6px; margin: 0; z-index: 1; cursor: text; line-height: 100%; font-size: 100%; text-transform: uppercase; } /* Calendar ========================================== */ #wp-calendar { width: 100%; } #wp-calendar caption { color: #666; text-align: right; } #wp-calendar th { color: #666; font-size: 80%; padding-left: 0; padding-right: 0; } #wp-calendar a { font-weight: bold; } #wp-calendar tfoot td { text-align: left; } #wp-calendar tfoot td#next { text-align: right; } #wp-calendar td#today { background-color: #f3f3f3; } /* Tabbed Widgets ========================================== */ /* hide the non-active tab content */ .tabberlive .tabbertabhide { display: none; } /*-------------------------------------------------- .tabber = before the tabber interface is set up .tabberlive = after the tabber interface is set up --------------------------------------------------*/ .tabber { margin-right: 1px; } .tabberlive { margin-right: 20px; } #content .tabberlive .sidebar { margin-right: 0; } #content .tabberlive ul, .tabberlive ul li { border: 0; } #content .tabberlive .sidebar ul { padding-bottom: 6px; } #content .tabberlive .sidebar ul li { padding: 0 0 6px; margin: 0 0 6px; } #content .tabberlive .sidebar ul li ul, #content .tabberlive .sidebar ul li ul li { padding-bottom: 0; margin: 3px 0; } /*-------------------------------------------------- ul.tabbernav = the tab navigation list li.tabberactive = the active tab --------------------------------------------------*/ #content ul.tabbernav, #content ul.tabbernav li a, #content .tabberlive .tabbertab { background-color: #fff; border-color: #F1E4BC; border-style: solid; } #content ul.tabbernav { background-color: transparent; border-bottom-width: 1px; } #content ul.tabbernav li { text-transform: uppercase; line-height: 175%; margin: 0; padding: 0; border: 0; list-style: none; display: inline; } #content ul.tabbernav li a { background-color: #F6F7D6; padding: 4px 6px 3px; margin-right: -1px; border-width: 1px; border-bottom: 0; text-decoration: none; } #content ul.tabbernav li a:link { } #content ul.tabbernav li a:hover { color: #333; text-decoration: none; } #content ul.tabbernav li.tabberactive a { background-color: #fff; border-bottom: 1px solid #fff; } #content ul.tabbernav li.tabberactive a:hover { color: inherit; cursor: default; } /*-------------------------------------------------- .tabbertab = the tab content Add style only after the tabber interface is set up (.tabberlive) --------------------------------------------------*/ #content .tabberlive .tabbertab { padding: 12px 12px 0; border-width: 1px; border-top: 0; /* height:200px; */ /* overflow:auto; */ } /* hide the heading since its on the tab */ #content .tabberlive .tabbertab h2, #content .tabberlive .tabbertab h3 { display: none; }