/* ---------------------------------------------------------------------------- TITLE: Main Stylesheet AUTHOR: Paulo Elias URL: http://wearequickpixel.com/ DESCRIPTION: Overrides defualts and sets custom styles for the site. TABLE OF CONTENTS 1.0 Basic HTML 2.0 Global Styles 3.0 Templates 3.1 Homepage Template 3.2 Subpage Template 3.3 Blog Template 4.0 Wordpress Classes & ID's 5.0 Utility Classes COLORS Dark Gray: #2e231b Dark Blue: #0a4049 Light Blue: #0792a8 Khaki: #e8eddd Brown: #aa6949 White: #fafafa PROPERTY ORDER: visibility display overflow position top / right / bottom / left z-index clear float table caption-side margin padding border outline width height color font direction letter-spacing word-spacing line-height text-transform list-style vertical-align background cursor page-break box-shadow border-radius text-shadow transition CREATED: 2007.02.12 MODIFIED: 2011.02.04 ------------------------------------------------------------------------------- 1.0 BASIC HTML ---------------------------------------------------------------------------- */ body { padding-top: 14px; color: #2e231b; font-family: 'Ubuntu', arial, sans-serif; font-size: 12px; background: #0a4049 url('../img/site/ui/bg_header_band.png') repeat-x left top; } h2 { font-size: 30px; } h3 { font-size: 24px; } h4 { font-size: 18px; } h2, h3, h4 { line-height: 125%; } h5, h6 { } /* 1.1 GROUPING CONTENT ---------------------------------------------------------------------------- */ hr { color: #0a4049; background: #0a4049; } hr.space { visibility: hidden; color: #fff; background: #fff; } blockquote { margin: 18px 40px; padding: 9px 10px; border-left: 3px solid #0a4049; font-style: italic; background-color: #f1f1f1; } blockquote p { font-size: 15px; } blockquote :last-child { margin: 0; } figure, .figure { border: 1px solid #0a4049; } figcaption, .figcaption { font-size: 11px; font-style: italic; line-height: 18px; } /* 1.2 TEXT-LEVEL SEMANTICS ---------------------------------------------------------------------------- */ /* Links */ a { color: #aa6949; text-decoration: none; } a img { border: none; } a:visited { border-color: #0a4049; color: #0a4049; } a:hover { border-color: #F26631; color: #F26631; } a:active { border-color: #4D4E53; color: #4D4E53; } a:focus { outline: 0; } ::-moz-selection { color: inherit; background-color: #ff9; } ::selection { color: inherit; background-color: #ff9; } /* 1.3 TABULAR DATA ---------------------------------------------------------------------------- */ table { border: 1px solid #0a4049; border-width: 1px 1px 0 0; } colgroup { } col { } tbody { } thead { } th { font-weight: bold; } thead th { background: #e8eddd; } tfoot { font-style: italic; } th, td, caption { padding: 9px 10px 8px 5px; border: 1px solid #0a4049; border-width: 0 0 1px 1px; font-size: 12px; line-height: 18px; } caption { background: #e8eddd; } tr.even td { background: #e8eddd; } /* ---------------------------------------------------------------------------- 2.0 Global Styles ---------------------------------------------------------------------------- */ /* 2.1 MASTHEAD ---------------------------------------------------------------------------- */ #Masthead { position: relative; height: 90px; } /* Logo */ #Logo { position: absolute; overflow: hidden; top: 20px; left: 0; width: 375px; height: 56px; } #Logo a { display: block; } /* 2.2 HERO ---------------------------------------------------------------------------- */ #Hero { padding-bottom: 18px; height: 133px; width: 100%; background: url('../img/content/hero/subpage.png') no-repeat center bottom; } #Home #Hero { height: 295px; background-image: url('../img/content/hero/home.png'); } #Hero-hidden { padding-bottom: 18px; height: 1px; width: 100%; } /* 2.3 MAIN NAVIGATION ---------------------------------------------------------------------------- */ #Navigation-Main { position: absolute; top: 37px; right: 0; margin: 0; list-style-type: none; } #Navigation-Main li { float: left; margin: 0 12px 0 0; padding-right: 12px; border-right: 1px solid #2e231b; font-size: 16px; text-transform: uppercase; } #Navigation-Main li a { color: #2e231b; } #Navigation-Main li.current_page_item a, #Navigation-Main li.current_page_parent a, #Navigation-Main li a:hover { color: #aa6949; } /* 2.4 SUB NAVIGATION ---------------------------------------------------------------------------- */ #Navigation-Secondary { position: relative; float: left; margin: 0 0 36px; border-top: 1px solid #EBEBED; } #Navigation-Secondary ul { margin: 0; border: none; } #Navigation-Secondary li { position: relative; float: left; margin: 0; width: 270px; font-size: 15px; font-weight: bold; text-transform: uppercase; line-height: 18px; list-style-type: none; } #Navigation-Secondary li li { width: 260px; padding-left: 10px; } #Navigation-Secondary li a { display: block; padding: 10px 35px 10px 10px; border-bottom: 1px solid #EBEBED; color: #2e231b; } #Navigation-Secondary .current_page_item a { color: #aa6949; background: #e8eddd url('../img/site/navigation/arrow_rt_over.png') no-repeat 250px 13px; } #Navigation-Secondary .current_page_item li a { color: #2e231b; background: none; } #Navigation-Secondary li li.current_page_item a { background-position: 240px 13px; } #Navigation-Secondary li a:hover { color: #aa6949; background: #fafafa url('../img/site/navigation/arrow_rt_over.png') no-repeat 250px 13px; } #Navigation-Secondary .current_page_item li a:hover { color: #aa6949; background: #fafafa url('../img/site/navigation/arrow_rt_over.png') no-repeat 240px 13px; } /* 2.5 BANDS ---------------------------------------------------------------------------- */ #Masthead-Band, #Hero-Band, #Content-Band { background-color: #FFF; } #Content-Band { padding: 18px 0 20px; } #Content-Secondary-Band { padding-bottom: 18px; background-color: #E8EDDD; } /* 2.6 MAIN CONTENT ---------------------------------------------------------------------------- */ .page p, .blog p { font-size: 13px; line-height: 18px; } /* 2.7 CONTENT ---------------------------------------------------------------------------- */ /* Headings --------------------------------------------------------------- */ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #2e231b; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #0792a8; } /* 2.8 Footer ---------------------------------------------------------------------------- */ #Footer-Band { border-bottom: 10px solid #0a4049; background-color: #0792a8; } #Footer { padding: 6px 0; text-align: center; } #Footer p, #Footer ul, #Footer li, #Footer a { display: inline; color: #e8eddd; } #Navigation-Footer { margin: 0 0 0 6px; } #Navigation-Footer li { margin: 0 1px 0 0; padding-right: 3px; border-right: 1px solid #e8eddd; } /* ---------------------------------------------------------------------------- 3.0 Templates ---------------------------------------------------------------------------- */ /* 3.1 HOMEPAGE TEMPLATE ---------------------------------------------------------------------------- */ /* =MAIN CONTENT ----------------------------------------------------------- */ #Home #Content-Main div { margin: 0 15px; width: 294px; } #Home #Content-Main .alpha { margin-left: 8px; } #Home #Content-Main .omega { margin-right: 8px; } #Home #Content-Main h2 { margin-bottom: 0; text-transform: none; } #Home #Content-Main p { line-height: 21px; } /* =SECONDARY CONTENT ------------------------------------------------------ */ #Home #Content-Secondary { padding: 18px 0 0; } #Home #Content-Secondary h2 { margin: 0; font-size: 18px; font-weight: bold; text-transform: none; } /* Content Modules on homepage -------------------------------------------- */ #Recent-Posts, #Featured-Post, #Twitter-Feed { margin: 0 15px; width: 294px; } /* Setup the widths and define content in content modules on homepage */ #Recent-Posts { margin: 0 35px 0 8px; width: 274px; } #Recent-Posts h3 { margin: 0 0 8px; font-size: 12px; font-weight: bold; line-height: 15px; } #Recent-Posts h3 a { color: #aa6949; } #Recent-Posts h3 a:hover { color: #F26631; } #Recent-Posts ul { margin: 0; list-style-type: none; } #Recent-Posts li { margin: 0 0 18px; font-size: 12px; line-height: 15px; } #Recent-Posts li p { margin: 0; color: #999; font-size: 12px; font-style: italic; line-height: 15px; } #Featured-Post { width: 394px; } #Featured-Post .post-title { margin-bottom: 18px; font-size: 18px; font-weight: bold; } #Featured-Post .post-info { color: #aa6949; font-size: 14px; font-weight: normal; font-style: italic; text-transform: uppercase; line-height: 15px; } #Featured-Post p { font-size: 13px; line-height: 21px; } #Twitter-Feed { margin-right: 8px; width: 194px; } #Twitter-Feed ul { margin: 0; list-style-type: none; } #Twitter-Feed li { margin: 0 0 18px; font-size: 12px; line-height: 15px; } /* 3.2 Subpage Template ---------------------------------------------------------------------------- */ .page h2 { margin-bottom: 18px; font-weight: normal; text-transform: uppercase; } /* 3.3 Blog Template ---------------------------------------------------------------------------- */ /* Blog listing/post formatting ------------------------------------------- */ .entry { } .entry .share { float: right; margin: 0 0 0 10px; } .entry .share iframe { display: block; margin-bottom: 10px; } .entry .header { margin-bottom: 18px; } .post-title { margin-bottom: 9px; } .post-info { color: #0792a8; font-size: 13px; text-transform: uppercase; line-height: 15px; } .post-info a { color: #0a4049; } .post-info a:hover { color: #aa6949; } .entry-content { clear: both; } .entry .footer { margin: 0 0 30px; padding: 5px; border: 1px solid #e8eddd; border-width: 1px 0; } p.post-meta { margin: 0; font-size: 11px; text-transform: uppercase; line-height: 14px; } .post-meta a { color: #0a4049; } .post-meta a:hover { color: #0792a8; } /* Pagination */ .pagination { margin: 0 0 18px; list-style: none; background-color: #e8eddd; } .pagination li { margin: 0; padding: 5px; color: #0a4049; font-size: 13px; font-weight: bold; text-transform: uppercase; line-height: 18px; } .pagination li a { color: #0a4049; } .pagination li a:hover { color: #aa6949; } .previous { float: left; } .next { float: right; } /* Sidebar --------------------------------------------------------------- */ .widgets, .widgets ul { margin: 0; list-style-type: none; } .widget { margin: 0 0 36px; } .widget-title { font-size: 18px; line-height: 18px; } .widgets ul { margin: 9px 0; } .widgets li li { margin: 5px 0 5px 10px; padding: 3px 0; border: 1px solid #e8eddd; border-width: 0 0 1px; font-size: 12px; line-height: 14px; } .widgets ul :last-child { border: none; } /* Comments --------------------------------------------------------------- */ #Comments { clear: both; margin-bottom: 36px; } #Comments ol { margin: 0; } /* Nested Comments */ #Comments .children { margin: 0 0 0 20px; } #Comments .alt { background-color: #e8eddd; } #Comments .children .alt { background-color: #ccc; } #Comments .children .even { background-color: #fff; } #Comments .bypostauthor { background-color: #D983D7; } #Comments .photo { float: left; margin: 0 5px 9px 0; } #Comments .reply { float: right; margin: 0 0 9px 5px; } #Comments li { overflow: hidden; margin: 9px 0; padding: 9px 10px; list-style-type: none; } #Comments cite { font-size: 14px; font-weight: bold; line-height: 18px; } #Comments span { font-size: 11px; font-weight: bold; line-height: 18px; } #Comments a { border: none; text-decoration: none; } .comment-body h1, .comment-body h2, .comment-body h3, .comment-body h4, .comment-body h5, .comment-body h6 { margin: 9px 0; font-size: 13px; font-weight: bold; line-height: 18px; } .comment-body p { margin: 9px 0; font-size: 12px; } #Comments .comment-body ul, #Comments .comment-body ol { margin: 10px; } #Comments .comment-body ul li, #Comments .comment-body ol li { overflow: visible; margin: 3px 0 3px 10px; padding: 0; } #Comments .comment-body ul li { list-style-type: square; } #Comments .comment-body ol li { list-style-type: decimal; } #Comments .comment-body dl dt { margin: 10px 0 3px; } #Comments .comment-body dl dd { margin-left: 10px; } #Comments .pingback { padding: 8px 7px; border: 1px solid #0a4049; border-width: 0 0 1px 3px; } #Comments .pingback p { margin: 0; font-size: 15px; line-height: 18px; } /* Comment Form ----------------------------------------------------------- */ #respond { margin: 30px 0 0; } #commentform fieldset { border: none; padding: 0; } #commentform legend { color: #5C8127; font-size: 22px; font-weight: normal; } #commentform p { overflow: hidden; clear: both; margin: 9px 0; } #commentform label { float: left; margin-right: 10px; width: 60px; font-weight: normal; text-align: right; } #commentform input { float: left; width: 200px; } #commentform textarea { float: left; width: 400px; height: 144px; } #commentform span.required { margin: 0 5px; } #commentform #submit { margin-left: 65px; width: auto; } /* ---------------------------------------------------------------------------- 4.0 WORDPRESS CLASSES & ID'S ---------------------------------------------------------------------------- */ /* Navigation */ .pagenav { } .page_item { } .current_page_item { } .current_page_parent { } /* Sidebar */ .widget_recent_entries li, .widget_recent_comments li { } /* Categories */ .categories { } .cat-item { } .current-cat { } .current-cat > a { } .current-cat-parent { } .children { } /* Widgets */ .widget { } .widget_text { } /* Links/Blogroll */ .blogroll { } .linkcat { } /* Graphics/Image Gallery */ .gallery { } .gallery-item { } .gallery-icon { } .attachment-thumbnail { } .gallery-caption { } /* Captions */ .wp-caption { } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption p.wp-caption-text { font-size: 12px; line-height: 18px; } .wp-caption-text { margin: 0; color: #999; font-weight: bold; font-style: italic; text-align: center; } /* Alignment */ .alignleft { float: left; } p .alignleft { margin: 9px 20px 9px 0; } .alignright { float: right; } p .alignright { margin: 9px 0 9px 20px; } p img.alignright { float: right; margin: 9px 0 9px 20px; } .alignnone { float: none; } .aligncenter, img.aligncenter, div.aligncenter { display: block; margin: 0 auto; width: auto; text-align: center; } p img.aligncenter { float: none; } .size-full { clear: both; } /* ---------------------------------------------------------------------------- 5.0 Utility Classes DESCRIPTION: Use these classes in the HTML to provide alignment, visual styling, and typography adjustments during prototyping. Ideally removed in production on high traffic sites. ---------------------------------------------------------------------------- */ /* =FLOATS ---------------------------------------------------------------------------- */ .float-left { float: left; margin: 0 40px 18px 0; } .float-right { float: right; margin: 0 0 18px 40px; } /* =BORDERS ---------------------------------------------------------------------------- */ .border { border: 1px solid #0a4049; } .border-top { border-top: 1px solid #0a4049; } .border-right { border-right: 1px solid #0a4049; } .border-bottom { border-bottom: 1px solid #0a4049; } .border-left { border-left: 1px solid #0a4049; } /* =MESSAGES ---------------------------------------------------------------------------- */ .error, .notice, .success { border-width: 2px; border-style: solid; padding: 7px 10px; } .error { border-color: #fbc2c4; color: #8a1f11; background: #fbe3e4; } .notice { border-color: #ffd324; color: #514721; background: #fff6bf; } .success { border-color: #c6d880; color: #264409; background: #e6efc2; } /* Links within success, error, & notice boxes */ a.error, .error a { color: #fd4239; } a.notice, .notice a { color: #514721; } a.success, .success a { color: #264409; } /* =BUTTONS >> Button styles ---------------------------------------------------------------------------- */ a.button { display: block; padding: 5px 15px; border: none; color: #fff; background-color: #e8eddd; } a.button:hover { background-color: #4F8EAE; } /* =COLOR >> Text and font styles ---------------------------------------------------------------------------- */ .quiet { color: #666; } .loud { color: #2e231b; } .highlight { font-weight: bold; background-color: #ff9; } .added { background: #060; color: #fff; } .removed { background: #900; color: #fff; } .disabled { opacity: 0.25; cursor: default; } /* Increase/decrease text size */ .small { font-size: 11px; } .large { font-size: 15px; } /* Align or justify text inside containers */ .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-justify { text-align: justify; } /* Pagebreaks */ .page-break { page-break-before: always; } /* =MARGINS AND PADDING ---------------------------------------------------------------------------- */ /* Remove margins and padding from elements */ .first { margin-left: 0 !important; padding-left: 0 !important; border-left: none !important; } .last { margin-right: 0 !important; padding-right: 0 !important; border-right: none !important; } .top { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; } .bottom { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; } /* Reset margins and padding */ .reset { margin: 0 !important; padding: 0 !important; } .reset-margin { margin: 0 !important; } .reset-padding { padding: 0 !important; } /* Reset border */ .reset-border { border: none !important; } /* =EFFECTS ---------------------------------------------------------------------------- */ /* Rounded corners .rounded { -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } .top-left-rounded { -webkit-border-top-left-radius: 12px; -moz-border-radius-topleft: 12px; border-top-left-radius: 12px; } .top-right-rounded { -webkit-border-top-right-radius: 12px; -moz-border-radius-topright: 12px; border-top-right-radius: 12px; } .bottom-left-rounded { -webkit-border-bottom-left-radius: 12px; -moz-border-radius-bottomleft: 12px; border-bottom-left-radius: 12px; } .bottom-right-rounded { -webkit-border-bottom-right-radius: 12px; -moz-border-radius-bottomright: 12px; border-bottom-right-radius: 12px; } */ /* Drop shadows .shadow { -webkit-box-shadow: 0 2px 4px #4D4E53; -moz-box-shadow: 0 2px 4px #4D4E53; box-shadow: 0 2px 4px #4D4E53; } */ /* Cursors */ .pointer { cursor: pointer; } .offer { display: block; margin: 6px 4px 4px 4px; background-color:#eee; padding: 5px; line-height:14px; width:95%; border: 2px dashed #999; }