/* ======================================================================== This file contains all CSS styles used in the Ampersand theme. Use the table of contents below to find your way round. TABLE OF CONTENTS I. - GLOBAL STYLES I.01 - Reset default browser styles I.02 - Styles for basic HTML elements and typography I.02.A - Document I.02.B - Headings I.02.C - Text elements I.02.D - Lists I.02.E - Images and frames I.02.F - Blockquote and Pull-quotes I.02.G - Tables I.02.H - Forms I.02.I - Buttons I.02.J - Styled boxes (info, warning, note, etc) I.02.K - Lists with icons I.03 - Grids I.04 - Utility classes II. - INDIVIDUAL TEMPLATE ELEMENTS + Header + Sidebar + Footer + Top nav + Logo + Main nav + Search form + Dividers + Pagination + Posts and pages + Popular/related posts + Comments + Contact page + Toggle + Tabbed content III. - WIDGETS + List widgets + 2-column list widgets + Search widget + Menu widget + Pages widget + Twitter widget + Follow widget + Recent comments widget + Recent posts widget + Contact widget + Ads 125x125 + Flickr widget + Widget colors in the footer ======================================================================== */ /** * *************************** * * GLOBAL STYLES * * *************************** */ /** * =========================================================== * I.01 - Reset default browser styles * Based on Eric Meyer's CSS reset, v1.0 2008-02-12 * http://meyerweb.com/eric/tools/css/reset/ * =========================================================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /** * =========================================================== * I.02 - Styles for basic HTML elements and typography * =========================================================== */ /** * ----------------------------------------------------------- * I.02.A - Document * ----------------------------------------------------------- */ html, body { height: 100%; font-size: 14px; line-height: 21px; background: #fff url(../img/backgrounds/emboss.png); color: #222; } body, label, legend, input, textarea, select, option { font-family: Georgia, serif; } /** * ----------------------------------------------------------- * I.02.B - Headings * ----------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: Arial, sans-serif; text-transform: uppercase; color: #222; } h1 { font-size: 28px; line-height: 35px; margin-bottom: 21px; letter-spacing: -.5px; } h2 { font-size: 22px; line-height: 28px; margin-bottom: 14px; padding-top: 14px; } h3 { font-size: 19px; line-height: 28px; margin-bottom: 14px; padding-top: 14px; } h4 { font-size: 17px; line-height: 21px; margin-bottom: 10px; padding-top: 5px; } h5 { font-size: 14px; line-height: 21px; margin-bottom: 10px; padding-top: 5px; letter-spacing: .5px; } h6 { font-size: 12px; line-height: 21px; margin-bottom: 10px; letter-spacing: .5px; } h4, h5, h6 { font-weight: bold; } /** * ----------------------------------------------------------- * I.02.C - Text elements * ----------------------------------------------------------- */ a { text-decoration: none; color: #900; padding: 0 1px; } a:hover, a:active { color: #fff; background: #A00; } a.img-link:hover, a.img-link:active { background: none; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #222; } p { margin-bottom: 14px; } p.large { font-size: 16px; font-style: italic; color: #666; } p.small, .small { font-size: 11px; } hr { width: 100%; border:0; line-height: 0; margin: 15px 0; padding: 0; height: 1px; background: #bbb } q { font-style: italic; } dfn { font-weight: bold; font-style: italic; } code,samp,kbd { font-family: monospace; text-decoration: none; background: #fff; border: 1px solid #ebebeb; } var,cite { font-style:italic; } del { text-decoration: line-through; color: #666; } ins { text-decoration: underline; } abbr, acronym { text-decoration: underline; cursor: help; } address { font-style: normal; } big { font-size: 14px; } small, sub, sup { font-size: 11px; } sub { vertical-align: sub; } sup { vertical-align: super; } pre,tt { font-family: monospace; text-decoration: none; font-weight: normal; font-style: normal; } pre { white-space: pre; display: block; overflow-x: auto; overflow-y: hidden; font-size: 12px; line-height: 20px; margin-bottom: 14px; padding: 20px 20px 21px 20px; border: 1px solid #e4e4e4; background: url(../img/code-bg.gif) top left; } /** * ----------------------------------------------------------- * I.02.D - Lists * ----------------------------------------------------------- */ /** Normal ordered and unordered lists */ ul,ol,dl { margin-bottom: 15px; } ul ul, ul ol, ol ol, ol ul { margin-bottom: 0px; } ol, ol li { list-style: decimal; } ul, ul li { list-style: disc; } ul li { padding-left: 0; margin-left: 30px;} ol li { padding-left: 0; margin-left: 30px;} /** Normal definition list */ dt { font-weight: bold; } dd { padding-left: 20px; margin-bottom: 14px;} /** List displayed horizontally */ .horizontal-list { list-style: none; margin-bottom: 0; } .horizontal-list li { display: inline; margin: 0; padding: 0 1em; } /** * ----------------------------------------------------------- * I.02.E - Images and frames * ----------------------------------------------------------- */ img.alignnone, img.alignright, img.alignleft, img.aligncenter, img.pull-left { padding: 1px; background: #fff; border: 1px solid #aaa; } .alignnone { display: block; margin: 28px; margin-top: 0; } .alignright { display: block; float: right; margin: 5px 0 20px 28px; } .alignleft { display: block; float: left; margin: 5px 28px 20px 0; } .indent-left .alignleft { margin: 5px 28px 14px -82px; } .aligncenter {display: block; display: block; margin: 5px auto 20px auto; overflow:hidden; zoom:1; } .pull-left { display: block; float: left; margin: 5px 28px 20px -82px; } .wp-caption-text { margin-bottom: 0; font-size: 11px; color: #888; } .wp-caption img { display: block; margin-bottom: 3px; padding: 1px; background: #fff; border: 1px solid #aaa; } img.border { border: 1px solid #eee; } .frame-left, .frame-right, .frame-center { display: block; overflow:hidden; zoom:1; padding: 21px 0; border-top: 2px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; } .frame-left { float: left; margin: 5px 28px 14px 0; } .indent-left .frame-left { float: left; margin: 5px 28px 14px -82px; } .frame-right { float: right; margin: 5px 0 14px 28px; } .frame-center { margin: 0 auto 14px auto; } .frame-left :first-child, .frame-right :first-child, .frame-center :first-child { margin-top: 0 } .frame-left > :last-child, .frame-right > :last-child, .frame-center > :last-child { margin-bottom: 0 } /** * ----------------------------------------------------------- * I.02.F - Blockquote and Pull-quotes * ----------------------------------------------------------- */ blockquote { display: block; padding: 0 0 0 35px; overflow: hidden; font-style: italic; background: url(../img/quote.png) no-repeat; background-position: 0 5px; color: #888; } .pullquote-right, .pullquote-left, .pullquote-center { font-size: 16px; padding: 21px 21px 21px 35px; background-position: 0 25px; border-top: 2px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; } .pullquote-right { float: right; margin: 5px 0 14px 28px; } .pullquote-left { float: left; margin: 5px 28px 14px 0; } .indent-left .pullquote-left { float: left; margin: 5px 28px 14px -82px; } .pullquote-center { margin: 0 auto 14px auto; } /** * ----------------------------------------------------------- * I.02.G - Tables * ----------------------------------------------------------- */ table { border-spacing: 0; width:100%; margin-bottom: 14px; padding: 4px; font-size: 12px; border: 1px solid #d8d8d8; background: #fff; } th { padding: 5px 10px; font-weight: bold; text-align: left; border: 0; background: #ccc; color: #fff; } td { padding: 5px 10px; border: 0; border-bottom: 1px solid #d8d8d8; background: #fff; } tfoot td { background: #f3f3f3; } caption { text-align: left; font-size: 11px; color: #888; } /** * ----------------------------------------------------------- * I.02.H - Forms * ----------------------------------------------------------- */ fieldset { display: block; margin-bottom: 14px; padding: 10px; border: 1px solid #d8d8d8; } label { display: block; } legend, input, textarea, select, option { font-size:13px; line-height:16px; } input, select, textarea, legend { display:inline; } textarea { overflow:auto; font-family: Arial, sans-serif; } input.radio, input.checkbox { vertical-align:text-top; margin-right:10px; } input.text, input[type=text], input.password, input[type=password], input.fileupload, input[type=file], textarea, select { font-family: Arial, sans-serif; padding: 5px; margin: 0; border: 1px dotted #ccc; background: #f0f0f0; color: #888; } input.text:focus, input[type=text]:focus, input.password:focus, input[type=password]:focus, input.fileupload:focus, input[type=file]:focus, textarea:focus, select:focus, .form-element-focus { outline: none; background: #fff; border: 1px solid #666; color: #222; } .form-element { overflow:hidden; zoom:1; margin-bottom: 7px; } /* Use with a DIV element to wrap a form element and its label */ fieldset .form-element:last-child { margin-bottom: 0; } .req-mark { color: #c00; } label.error { color: #c00; } /** * ----------------------------------------------------------- * I.02.I - Buttons * ----------------------------------------------------------- */ input.submit, input[type=submit], input.reset, input[type=reset], .btn, .link-btn, .large-btn, .pagination a, .pagination .current, .comment-reply-link, #older-comments a, #newer-comments a { display: inline-block; overflow: visible; padding: 5px 10px; color: #fff; border: 0; background: #1b1b1b; text-decoration: none; font-size: 12px; line-height: 12px; font-weight: bold; text-transform: uppercase; font-family: Arial, sans-serif; } .btn, .link-btn, .large-btn, .pagination a, .pagination .current, .comment-reply-link, #older-comments a, #newer-comments a { line-height: 21px; padding: 1px 10px; } .large-btn { padding: 10px 20px; } input.submit:hover, input[type=submit]:hover, input.reset:hover, input[type=reset]:hover, .link-btn:hover, .pagination a:hover, input.submit:active, input[type=submit]:active, input.reset:active, input[type=reset]:hover, .link-btn:active, .pagination a:active, .comment-reply-link:hover, #older-comments a:hover, #newer-comments a:hover, .btn:hover, .large-btn:hover, .comment-reply-link:active, #older-comments a:active, #newer-comments a:active, .btn:active, .large-btn:active { text-decoration: none; outline: none; cursor: pointer; color: #fff; background: #A00; } .btn-black { background: #1b1b1b; } .btn-red { background: #711; } .btn-green { background: #252; } .btn-blue { background: #303061; } .btn-teal { background: #174d4d; } .btn-purple { background: #502050; } /** * =========================================================== * I.02.J - Styled boxes (info, warning, note, etc) * =========================================================== */ .ok-box, .warning-box, .info-box, .note-box { display: block; min-height: 20px; margin: 0 auto 14px auto; overflow:hidden; zoom:1; padding: 21px; } .ok-box :last-child, .warning-box :last-child, .info-box :last-child , .note-box :last-child { margin-bottom: 0 } .ok-box { background: #ddf0dd; border-top: 1px solid #cee0ce; border-bottom: 1px solid #cee0ce; } .warning-box { background: #f5e1e1; border-top: 1px solid #e5d3d3; border-bottom: 1px solid #e5d3d3; } .info-box { background: #e5e5ff; border-top: 1px solid #d8d8eb; border-bottom: 1px solid #d8d8eb; } .note-box { background: #f7f2da; border-top: 1px solid #e8e2c3; border-bottom: 1px solid #e8e2c3; } .ok-box a { color: #238c23; } .warning-box a { color: #bf2626; } .note-box a { color: #bfa10a; } .info-box a { color: #5c5aaa; } .ok-box a:hover { background: none; color: #60bf60; } .warning-box a:hover { background: none; color: #d95757; } .note-box a:hover { background: none; color: #e0bb02; } .info-box a:hover { background: none; color: #8e8dd9; } /** * ----------------------------------------------------------- * I.02.K - Lists with icons * ----------------------------------------------------------- */ ul.with-icons li { list-style:none; margin-left: 0px; padding-left:20px; background: url(../img/list-icons-sprite.png) no-repeat; } ul.with-icons.icon-arrow-3 li { background-position: -128px -20px; } ul.with-icons.icon-arrow-2 li { background-position: -107px -41px; } ul.with-icons.icon-arrow-1 li { background-position: -86px -62px; } ul.with-icons.icon-check li { background-position: -65px -83px; } ul.with-icons.icon-star li { background-position: -44px -105px; } ul.with-icons.icon-plus li { background-position: -23px -125px; } ul.with-icons.icon-heart li { background-position: -2px -146px; } /** * =========================================================== * I.03 - Grids * =========================================================== */ .grid-wrap { width: 984px; clear: both; margin-left: auto; margin-right: auto; } .grid-divider { display: block; clear: both; height: 28px; } .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { display:inline; float: left; position: relative; margin-left: 14px; margin-right: 14px; } .grid-1 { width: 54px; } .grid-2 { width: 136px; } .grid-3 { width: 218px; } .grid-4 { width: 300px; } .grid-5 { width: 382px; } .grid-6 { width: 464px; } .grid-7 { width: 546px; } .grid-8 { width: 628px; } .grid-9 { width: 710px; } .grid-10 { width: 792px; } .grid-11 { width: 874px; } .grid-12 { width: 956px; } /* Content columns */ .one-half, .one-third, .two-third, .one-fourth , .three-fourth { display: block; float:left; overflow:hidden; zoom: 1; position:relative; margin-right: 28px; } .one-half { width: 464px; } .one-third { width: 300px; } .two-third { width: 628px; } .one-fourth { width: 218px; } .three-fourth { width: 710px; } .last { margin-right: 0; } .clear { clear: both; display: block; } .with-sidebar .one-half { width: 300px; } .with-sidebar .one-third { width: 190px; } .with-sidebar .two-third { width: 382px; } .with-sidebar .one-fourth { width: 136px; } .with-sidebar .three-fourth { width: 464px; } .one-half > :last-child, .one-third > :last-child, .two-third > :last-child, .one-fourth > :last-child, .three-fourth > :last-child { margin-bottom: 0; } /* Horizontal dividers */ .divider, .divider-top { display: block; clear: both; margin: 28px 22px 28px 0; height: 1px; border-bottom: 1px solid #d8d8d8; } .divider-top a { font-family: Arial, sans-serif; font-size:11px; line-height: 11px; float:right; text-decoration:none; position: relative; top: -5px; right: -22px; color: #d8d8d8; } .divider-top a:hover { background: none; color: #a00; } .divider { margin-right: 0;} /** * =========================================================== * I.04 - Utility classes * =========================================================== */ .no-border { border: 0 !important; } .no-border-bottom { border-bottom: 0 !important; } .no-border-top { border-top: 0 !important; } .no-border-left { border-left: 0 !important; } .no-border-right { border-right: 0 !important; } .no-margin { margin: 0 !important; } .no-margin-bottom { margin-bottom: 0 !important; } .no-margin-top { margin-top: 0 !important; } .no-margin-left { margin-left: 0 !important; } .no-margin-right { margin-right: 0 !important; } .no-padding { padding: 0 !important; } .no-padding-bottom { padding-bottom: 0 !important; } .no-padding-top { padding-top: 0 !important; } .no-padding-left { padding-left: 0 !important; } .no-padding-right { padding-right: 0 !important; } .center { margin-left: auto !important; margin-right: auto !important; } .float-left { float: left !important; } .float-right { float: left !important; } .text-center { text-align: center !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .block { display: block !important; } .inline { display: inline !important; } /* Clear Floated Elements */ .clear { clear: both; display: block; width: 100%; height: 0; } /** * ****************************************** * * II. - INDIVIDUAL TEMPLATE ELEMENTS * * ****************************************** */ /* Header */ #header-wrap { width: 100%; clear: both; border-top: 5px solid #222; } #header { width: 956px; min-height: 85px; clear: both; position: relative; margin-left: auto; margin-right: auto; } /* Sidebar */ #sidebar { font-size: 12px; line-height: 18px; color: #888; } #sidebar h1, #sidebar h2, #sidebar h3, #sidebar h4, #sidebar h5, #sidebar h6 { color: #555; } #sidebar a { color: #555; } #sidebar a:hover { color: #fff; } /* Footer */ #footer-wrap { width: 100%; clear: both; padding: 28px 0; font-size: 12px; line-height: 18px; background: #111; color: #888; } #footer-1 { margin-bottom: 28px; overflow: hidden; } #footer-2 { width: 956px; clear: both; padding-top: 14px; margin-left: auto; margin-right: auto; font-size: 11px; border-top: 1px solid #222; } #footer-wrap a { color: #991c1c; } #footer-wrap a:hover, #footer-wrap a:active { color: #fff; background: #A00; } #footer-wrap fieldset { border-bottom-color: #222; } #footer-wrap input.text, #footer-wrap input[type=text], #footer-wrap input.password, #footer-wrap input[type=password], #footer-wrap input.fileupload, #footer-wrap input[type=file], #footer-wrap textarea, #footer-wrap select { border-color: #333; background-color: #1a1a1a; color: #999; } #footer-wrap input.text:focus, #footer-wrap input[type=text]:focus, #footer-wrap input.password:focus, #footer-wrap input[type=password]:focus, #footer-wrap input.fileupload:focus, #footer-wrap input[type=file]:focus, #footer-wrap textarea:focus, #footer-wrap select:focus, #footer-wrap .form-element-focus { color: #fff; } /* Top nav */ #top-nav { position: absolute; top: 10px; right: 0; margin: 0; padding: 0; list-style: none; } #top-nav li { display: block; float: left; margin: 0 0 0 12px; list-style: none; } #top-nav a { display: block; padding: 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #222; } #top-nav a:hover, #top-nav a:active { color: #fff; } #top-nav .twitter, #top-nav .facebook, #top-nav .rss { margin-left: 8px; } #top-nav .twitter a, #top-nav .facebook a, #top-nav .rss a { width: 16px; padding: 0; height: 18px; text-indent: -9999px; background: url(../img/black/social-btns-sprite.png) no-repeat; } #top-nav .twitter a { width: 19px; background-position: -32px 2px; } #top-nav .facebook a { background-position: 0 2px; } #top-nav .rss a { background-position: -16px 2px; } /* Logo */ #site-logo { display: block; position: absolute; top: 16px; left: 0; margin: 0; padding: 0; } #site-logo a:hover { background: none; color: #222; } #site-logo.text-logo { font-family: Georgia, serif; text-transform: none; font-weight: normal; letter-spacing: 0; } #site-logo.text-logo .site-name { font-size: 28px; line-height: 28px; font-style: italic; font-weight: normal; } #site-logo.text-logo .tag-line { display: block; font-size: 13px; line-height: 15px; } /* Main nav */ #nav-bar-wrap { clear: both; width: 100%; height: 40px; background: #111; } #nav-bar { width: 956px; clear: both; margin-left: auto; margin-right: auto; position: relative; } #main-nav, #main-nav-menu { display: block; height: 40px; float: left; } .main-nav-list, .main-nav-list li { list-style: none; margin: 0; padding: 0; position: relative; } .main-nav-list.root > li { display: block; float: left; } .main-nav-list.root > li > a { position: relative; z-index: 9999; display: block; height: 12px; font-size: 12px; line-height: 12px; text-transform: uppercase; letter-spacing: 1px; margin: 8px 12px 0 0; padding: 5px 4px; color: #fff; border: 1px solid #111; border-bottom: 0; } .main-nav-list.root > li > a.has-subnav { padding-right: 14px; background-image: url(../img/black/drop-down-sprite.png); background-repeat: no-repeat; background-position: 100% 4px; } .main-nav-list.root > li > a.has-subnav:hover, .main-nav-list.root > li.item-hover > a.has-subnav { background-position: 100% -16px; } .main-nav-list.root > li > a:hover { background-color: #a00; color: #fff; } .main-nav-list.root > li.item-hover > a { background-color: #fff; color: #a00; border-color: #111; } .main-nav-subnav { position:absolute; display:block; width: 160px; padding: 14px; background: #fff; border: 1px solid #111; } .subnav-list { display: none; border-top: 1px dotted #d3d3d3; } .subnav-list li { display:block; border-bottom: 1px dotted #d3d3d3; } .subnav-list a { display:block; padding: 2px 6px 2px 2px; font-size: 12px; text-decoration: none; overflow: hidden; zoom:1 } .subnav-list a.has-subnav { background: url(../img/black/drop-down-sprite.png) no-repeat; background-position: 100% -38px; } .subnav-list .item-hover a.has-subnav { background: #a00 url(../img/black/drop-down-sprite.png) no-repeat; background-position: 100% -100px; } .subnav-list a:hover, .subnav-list a:active, .subnav-list > .item-hover a { color: #fff; } /* Search form */ .search-form { display: block; width: 300px; height: 26px; margin: 0; padding:0; border:0; position: relative; } .search-form .search-label { line-height: 26px; font-size: 11px; font-style: italic; font-weight: bold; color: #fff; } .search-form .search-field-wrap { width: 246px; height: 24px; background: #444; position: absolute; top: 0; right: 0; border: 1px dotted #999; } .search-form .search-field { width: 202px; height: 14px; position: absolute; top: 0; left: 0; border:0; padding: 5px; background: none; color: #999; } .search-form .search-field:focus { outline: none; border: 0; background: #444; color: #fff; } .search-form .search-submit { display: block; width: 34px; height: 24px; position: absolute; top: 1px; right: 1px; margin: 0; padding: 0; text-indent: -9999px; background: url(../img/icons/search.png) no-repeat center center; } .search-form .search-submit:hover { background: url(../img/icons/search.png) no-repeat center center; } #nav-bar .search-form { position: absolute; top: 7px; right: 0; } #footer-wrap .search-form .search-field-wrap { border-color: #333; background-color: #1a1a1a; color: #999; } /* Dividers */ #grid-divider-top { height: 42px; } #grid-divider-bottom { height: 42px; } /* Pagination */ #pagination-wrap { clear: both; padding-top: 14px; border-top: 2px solid #d8d8d8; } .pagination a { padding: 2px 9px; margin: 0 5px 0 0; } .pagination .current { padding: 1px 8px; margin: 0 5px 0 0; background: none; color: #222; border: 1px dotted #aaa; } .page-link { clear: both; padding-top: 7px; border-top: 1px solid #d8d8d8; } .page-link a { padding: 3px 4px; font-weight: bold; } /* Posts and pages */ .archive-heading, .search-heading { font-size: 18px; line-height: 21px; margin-bottom: 21px; padding-top: 0; font-family: Georgia, serif; font-weight: normal; letter-spacing: 0; } .archive-heading .label, .search-heading .label { text-transform: none; } .multi-post-view .post { overflow: hidden; margin-bottom: 28px; border-top: 2px solid #d8d8d8; } .multi-post-view .post h2 { margin-bottom: 14px; padding-top: 14px; } .multi-post-view .post h2 a { padding: 0; } .multi-post-view .post h2 a:hover { color: #A00; background: none; } .single-post-view .post { overflow: hidden; margin-bottom: 14px; border-bottom: 1px solid #d8d8d8; } .multi-post-view .search-result { overflow: hidden; margin-bottom: 14px; border-top: 1px solid #d8d8d8; } .multi-post-view .res-num-1 { border-top-width: 2px; } .post-thumb { display:block; float: left; margin-top: 5px; padding: 1px; background: #fff; border: 1px solid #aaa; } .post-thumb:hover { background: none; } .multi-post-view .with-thumb .post-content { padding-left: 244px; } .single-post-view .indent-left .post-content { padding-left: 82px; } .single-post-view .post-thumb { margin: 5px 28px 26px 0; } .post-thumb-link { padding: 0; } .post-meta { overflow: hidden; margin-bottom: 14px; font-size: 11px; border-top: 1px dotted #d3d3d3; border-bottom: 1px dotted #d3d3d3; color: #777; } .post-meta .post-date { float: left; text-transform: uppercase; } .post-meta .post-author { float: left; margin-left: .25em; font-style: italic; } .post-meta .post-author a { font-style: normal; text-transform: uppercase; } .post-meta .post-comments { float: right; display: inline; } .post-meta-bottom { margin-bottom: 21px; font-size: 11px; font-style: italic; color: #777; } .author-info { overflow: hidden; margin-bottom: 14px; border-bottom: 1px solid #d8d8d8; } .author-info-heading { font-size: 16px; line-height: 21px; margin-bottom: 7px; padding-top: 0; } .author-info.with-avatar .author-info-txt { padding-left: 82px; } .author-info .avatar { float: left; margin-top: 3px; padding: 1px; border: 1px solid #aaa; } /* Popular/related posts */ #other-posts { overflow: hidden; margin-bottom: 7px; } #other-posts h3 { margin-bottom: 7px; padding-bottom: 14px; font-size: 18px; line-height: 21px; border-bottom: 1px solid #d8d8d8; } #other-posts li { list-style:none; margin: 0 0 7px 0; padding: 0 0 7px 0; border-bottom: 1px dotted #d3d3d3; } #other-posts ul.with-thumbnails li { display: block; overflow: hidden; } #other-posts .thumb-link { display: block; float: left; } #other-posts .thumb-link:hover { background: none; } #other-posts .thumbnail { display: block; float: left; padding: 1px; background: #fff; border: 1px solid #aaa; } #other-posts .with-thumbnails .post-link-wrap { padding-left: 68px; } #other-posts .half { width: 300px; float: left; } #related-posts-wrap.half { margin-right: 28px; } #other-posts .full { width: 656px; overflow: hidden; } #other-posts .full li { width: 300px; float: left; margin-right: 28px; } /* Comments */ #comments { font-size: 12px; margin-bottom: 14px; } #comments p { margin-bottom: 7px; } #comments.no-comments h3 { border-bottom: 0; } #comments-heading { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 2px solid #d8d8d8; } .comment-list { list-style: none; padding-bottom: 14px; border-bottom: 1px solid #d8d8d8; } .comment-list-item { list-style: none; margin: 0; overflow: hidden; zoom:1; } .comment { position: relative; overflow: hidden; zoom:1; margin-top: 14px; padding-top: 14px; border-top: 1px solid #d8d8d8; } .comment-list .depth-1:first-child > .comment { border-top: 0; margin-top: 0; padding-top: 0; } .comment .avatar { display: block; float: left; margin: 3px 0; padding: 1px; border: 1px solid #aaa; } .comment-list .children { padding-left: 27px; } .comment-meta { padding-left: 68px; margin-bottom: 5px; } .comment-txt { padding-left: 68px; } .comment-list .children .comment-meta, .comment-list .children .comment-txt { padding-left: 41px; } .comment-author { text-transform: uppercase; } .comment-date { padding-left: 10px; font-size: 11px; color: #777; } .comment-reply-link { display: block; float: right; padding: 4px 10px; font-size: 11px; line-height: 11px; } #cancel-comment-reply-link { margin-bottom: 10px; } #respond { padding-bottom: 14px; border-bottom: 2px solid #d8d8d8; } #comment-form-heading { padding-top: 7px; margin-bottom: 7px; } #comment-form { display: block; margin-top: 14px; } #comment-form .form-element { margin-bottom: 14px; } #comment-form label { margin-left: 10px; color: #444; } #comment-form em { color: #777; } #comment-form textarea { width: 616px; height: 100px; } #comment-form-name-wrap label, #comment-form-email-wrap label, #comment-form-website-wrap label { display: inline; } #comment-form-name-wrap input, #comment-form-email-wrap input, #comment-form-website-wrap input { width: 206px; } .comment-list-item #respond { margin-top: 10px; border: 0; } .depth-2 #comment-form textarea { width: 589px; } .depth-3 #comment-form textarea { width: 562px; } .depth-4 #comment-form textarea { width: 535px; } .depth-5 #comment-form textarea { width: 508px; } #comments-nav { margin-bottom: 14px; overflow: hidden; } /* Contact page */ .contact-form textarea { width: 616px; height: 200px; } .contact-form input.text { width: 616px; } /* Toggle */ .toggle.up .toggle-content { display: none; } .toggle .toggle-heading { cursor: pointer; } .toggle .toggle-icon { display: block; float: left; width: 22px; height: 18px; background: url(../img/list-icons-sprite.png) no-repeat; background-position: -23px -104px; } .toggle.up .toggle-icon { background-position: -23px -127px; } .toggle.down .toggle-icon { background-position: -23px -127px; } .toggle h1 .toggle-icon { margin-top: 6px; } .toggle h2 .toggle-icon, .toggle h3 .toggle-icon { margin-top: 4px; } .toggle h4 .toggle-icon, .toggle h5 .toggle-icon { margin-top: 1px; } /* Tabbed content */ .tabs { clear: both; } .tabs-nav { list-style: none; margin-bottom: 7px; overflow: hidden; border-bottom: 1px solid #999; } .tabs-nav li { display: block; float: left; margin: 0 5px 1px 0; } .tabs-nav li.current { margin-bottom: 0; background: #999; border-bottom: 1px solid #999; } /** * ************************ * * III. - WIDGETS * * ************************ */ .widget { margin-top: 21px; } .widget:first-child { margin-top: 0; } .widget h3 { margin: 0 0 14px 0; padding: 3px 0; font-size: 12px; line-height:12px; font-weight: bold; text-align: center; letter-spacing: 1px; border-top: 2px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; } .footer-widget h3 { border-color: #222; color: #d8d8d8; } /* List widgets */ .widget_categories ul, .widget_categories li, .widget_archive ul, .widget_archive li, .widget_links ul, .widget_links li, .mw-widget-twitter-feed ul, .mw-widget-twitter-feed li, .mw-widget-comments ul, .mw-widget-comments li, .mw-widget-recent-posts ul, .mw-widget-recent-posts li { list-style: none; margin:0; padding: 0; } .widget_categories li, .widget_archive li, .widget_links li, .mw-widget-twitter-feed li, .mw-widget-comments li, .mw-widget-recent-posts li { display: block; border-bottom: 1px dotted #d3d3d3; } .widget_categories a, .widget_archive a, .widget_links a, .mw-widget-nav-menu a, .mw-widget-pages a, .mw-widget-recent-posts a { display: block; } /* 2-column list widgets */ .widget_categories, .widget_links { width: 300px; overflow: hidden; } .widget_categories ul, .widget_links ul { display: block; width: 328px; } .widget_categories li, .widget_links li { width: 143px; float: left; margin-right: 14px; } /* Search widget */ .sidebar-widget.widget_search .search-label { font-family: Arial, sans-serif; font-weight: normal; font-style: normal; text-transform: uppercase; color: #666; } .sidebar-widget.widget_search .search-field-wrap { background: #f0f0f0; border-color: #ccc; } .sidebar-widget.widget_search .search-field:focus { outline: none; border: 0; background: #f0f0f0; color: #222; } /* Menu widget */ .mw-widget-nav-menu ul, .mw-widget-nav-menu li { list-style: none; margin:0; padding: 0; } .mw-widget-nav-menu li { display: block; border-top: 1px dotted #d3d3d3; } .mw-widget-nav-menu li:first-child { border-top: 0; } .mw-widget-nav-menu .sub-menu { border-bottom: 0; } .mw-widget-nav-menu .sub-menu li { padding-left: 14px; border-top: 1px dotted #d3d3d3; } .mw-widget-nav-menu { border-bottom: 1px dotted #d3d3d3; } /* Pages widget */ .mw-widget-pages ul, .mw-widget-pages li { list-style: none; margin:0; padding: 0; } .mw-widget-pages li { display: block; border-top: 1px dotted #d3d3d3; } .mw-widget-pages li:first-child { border-top: 0; } .mw-widget-pages .children { border-bottom: 0; } .mw-widget-pages .children li { padding-left: 14px; border-top: 1px dotted #d3d3d3; } .mw-widget-pages { border-bottom: 1px dotted #d3d3d3; } /* Twitter widget */ .mw-widget-twitter-feed li { overflow: hidden; padding: 6px 0 6px 22px; background: url(../img/list-icons-sprite.png) no-repeat; background-position: -150px 5px; } .mw-widget-twitter-feed li:first-child { padding-top: 0; background-position: -150px -1px; } /* Follow widget */ .mw-widget-follow { overflow: hidden; } .mw-widget-follow a { display: block; float: left; width: 32px; height:32px; margin: 0 0 10px 7px; text-indent: -9999px; } .mw-widget-follow a:first-child { margin-left: 0; } .mw-widget-follow a.facebook, #footer-wrap .mw-widget-follow a.facebook:hover { background: url(../img/icons/social-media/facebook.png) no-repeat top left; } .mw-widget-follow a.buzz, #footer-wrap .mw-widget-follow a.buzz:hover { background: url(../img/icons/social-media/buzz.png) no-repeat top left; } .mw-widget-follow a.twitter, #footer-wrap .mw-widget-follow a.twitter:hover { background: url(../img/icons/social-media/twitter.png) no-repeat top left; } .mw-widget-follow a.flickr, #footer-wrap .mw-widget-follow a.flickr:hover { background: url(../img/icons/social-media/flickr.png) no-repeat top left; } .mw-widget-follow a.vimeo, #footer-wrap .mw-widget-follow a.vimeo:hover { background: url(../img/icons/social-media/vimeo.png) no-repeat top left; } .mw-widget-follow a.youtube, #footer-wrap .mw-widget-follow a.youtube:hover { background: url(../img/icons/social-media/youtube.png) no-repeat top left; } .mw-widget-follow a.rss, #footer-wrap .mw-widget-follow a.rss:hover { background: url(../img/icons/social-media/rss.png) no-repeat top left; } /* Recent comments widget */ .mw-widget-comments li { padding: 6px 0; overflow: hidden; } .mw-widget-comments .avatar-comment-link { display: block; float: left; padding: 0; } .mw-widget-comments .avatar-comment-link:hover { background: none; } .mw-widget-comments .with-gravatar .comment-link { margin-left: 45px; display: block; } .mw-widget-comments .avatar { display: block; float: left; margin-top: 2px; padding: 1px; background: #fff; border: 1px solid #aaa; } .mw-widget-comments .comment-author { text-transform: none; } .mw-widget-comments .comment-text { font-style: italic; color: #777; } .mw-widget-comments .comment-link:hover .comment-text { color: #fff; } /* Recent posts widget */ .mw-widget-recent-posts li { padding: 6px 0; overflow: hidden; } .mw-widget-recent-posts .widget-post-meta { display: block; font-style: italic; font-size: 11px; } .mw-widget-recent-posts .thumb-post-link { display: block; float: left; padding: 0; } .mw-widget-recent-posts .thumb-post-link:hover { background: none; } .mw-widget-recent-posts .thumbnail { display: block; float: left; margin-top: 2px; padding: 1px; background: #fff; border: 1px solid #aaa; } .mw-widget-recent-posts .with-thumbnails .post-link { margin-left: 64px; } .mw-widget-recent-posts .with-thumbnails .widget-post-meta { margin-left: 64px; } /* Contact widget */ .mw-widget-contact-form input.text, .mw-widget-contact-form textarea { width: 288px; } /* Ads 125x125 */ .mw-widget-ads-125 { overflow: hidden; } .mw-widget-ads-125 a { display: block; float: left; padding: 0; } .mw-widget-ads-125 a:hover { background: none; } .mw-widget-ads-125 img { display: block; float: left; margin: 10px; padding: 1px; background: #fff; border: 1px solid #aaa; } /* Flickr widget */ .mw-widget-flickr { overflow: hidden; width: 300px; } .mw-widget-flickr h3 { margin-bottom: 0; } .mw-widget-flickr .widget-body { width: 331px; } .mw-widget-flickr a { display: block; float: left; padding: 0; } .mw-widget-flickr a:hover { background: none; } .mw-widget-flickr img { display: block; float: left; padding: 1px; background: #fff; border: 1px solid #aaa; margin: 21px 31px 0 0; } /* Widget colors in the footer */ #footer-wrap .widget_categories li, #footer-wrap .widget_archive li, #footer-wrap .widget_links li, #footer-wrap .mw-widget-twitter-feed li, #footer-wrap .mw-widget-comments li, #footer-wrap .mw-widget-recent-posts li, #footer-wrap .mw-widget-nav-menu, #footer-wrap .mw-widget-nav-menu li, #footer-wrap .mw-widget-pages, #footer-wrap .mw-widget-pages li { border-color: #222; } #footer-wrap .mw-widget-comments .avatar-comment-link:hover, #footer-wrap .mw-widget-ads-125 a:hover, #footer-wrap .mw-widget-flickr a:hover, #footer-wrap .mw-widget-recent-posts .thumb-post-link:hover { background: none; } #footer-wrap .mw-widget-comments .avatar, #footer-wrap .mw-widget-ads-125 img, #footer-wrap .mw-widget-flickr img, #footer-wrap .mw-widget-recent-posts .thumbnail { background: none; border-color: #444; }