/* Theme Name: Alpha Lite Theme URI: https://github.com/DewaneMutunga/alpha_lite Author: Dewane Mutunga Author URI: http://dewanemutunga.com Description: Alpha Lite is a simple theme for WordPress professionals. Version: 1.0.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: alpha_lite Domain Path: /languages/ Tags: red, white, two-columns, right-sidebar, responsive-layout, featured-images, flexible-header, custom-menu, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready Alpha Lite WordPress Theme, Copyright (C) 2014 Dewane Mutunga - UnBoxee LLC Alpha Lite, like WordPress, is licensed under the GPL. Alpha Lite is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc. Font Awesome http://fortawesome.github.io/Font-Awesome/license/ Font Awesome Licenses: SIL Open Font License http://scripts.sil.org/OFL MIT License http://opensource.org/licenses/mit-license.html CC BY 3.0 License – http://creativecommons.org/licenses/by/3.0/ Copyright: Dave Gandy, http://fontawesome.io Resetting and rebuilding styles have been helped along thanks to the fine work of Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ and Blueprint http://www.blueprintcss.org/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 - Reset 1.1 - Structure 2.0 - Typography 3.0 - Elements 3.1 - Tables 4.0 - Forms 5.0 - Navigation 5.1 - Links 5.2 - Menus 6.0 - Accessibility 7.0 - Alignments 8.0 - Clearings 9.0 - Widgets 10.0 - Content 10.1 - Posts and pages 10.2 - Asides 10.3 - Comments 11.0 - Media 11.1 - Captions 11.2 - Galleries --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 - 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, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-word-wrap: break-word; word-wrap: break-word; } body { background: #fff; } article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a img { border: 0; } /*-------------------------------------------------------------- 1.1 - Structure --------------------------------------------------------------*/ .full { /* this class creates the full-width structure */ width: 100%; } .main { /* this class controls main design width and alignment within the above class */ margin: 0 auto; width: 100%; max-width: 1040px; /* THIS SHOULD MATCH THE FIRST MEDIA QUERY VALUE */ } .inner { /* this class insulates actual site content from the two important classes it's nested under */ position: relative; padding: 32px 0; } .site-content.inner { padding: 60px 0; } #primary, #secondary { float: left; } #primary { /* content */ padding-right: 50px; width: 70%; } #secondary { /* sidebar */ width: 30%; } /*-------------------------------------------------------------- 2.0 Typography --------------------------------------------------------------*/ body, button, input, select, textarea, .site-description { color: #333; font-family: 'Nobile', 'Lucida Grande', sans-serif; font-size: 16px; line-height: 1.5; } h1, h2, h3, h4, h5, h6, .site-title a, .widget-title { font-family: 'Droid Sans', 'Helvetica Neue', Helvetica, sans-serif; clear: both; margin-bottom: 15px; letter-spacing: -1px; } h1, h2 { font-size: 24px; } h3, h4 { font-size: 20px; } h5, h6 { font-size: 15px; } p { margin-bottom: 1.5em; } b, strong { font-weight: bold; } dfn, cite, em, i { font-style: italic; } blockquote { position: relative; padding: 20px 20px 20px 40px; margin: 20px 0; text-shadow: #fff 0 1px 1px; color: #373737; font-weight: 500; border-left: 5px solid #d2625a; background: #f1f1f1; background-size: 3px 3px; quotes: "\201C" "\201D" "\2018" "\2019"; clear: both; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } small { font-size: 75%; } big { font-size: 125%; } /*-------------------------------------------------------------- 3.0 Elements --------------------------------------------------------------*/ hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 3em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } figure { margin: 0; } table { margin: 0 0 1.5em; width: 100%; } th { font-weight: bold; } /*-------------------------------------------------------------- 3.1 Tables --------------------------------------------------------------*/ table { border-collapse: collapse; margin-bottom: 3em; width: 100%; background: #fff; } td, th { padding: 0.75em 1.5em; text-align: left; } td.err { background-color: #d2625a; color: #fff; font-size: 0.75em; text-align: center; line-height: 1; } th { background-color: #d2625a; font-weight: bold; color: #fff; white-space: nowrap; } tbody th { background-color: #d2625a; } tbody tr:nth-child(2n-1) { background-color: #f5f5f5; transition: all .125s ease-in-out; } tbody tr:hover { background-color: rgba(246, 193, 193, 0.7); } /*-------------------------------------------------------------- 4.0 Forms --------------------------------------------------------------*/ button, input, select, textarea { font-size: 100%; /* Corrects font size not being inherited in all browsers */ margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ vertical-align: baseline; /* Improves appearance and consistency in all browsers */ *vertical-align: middle; /* Improves appearance and consistency in IE6/IE7 */ } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ font-size: 12px; font-size: 1.2rem; line-height: 1; padding: 15px; } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background: #45637f; } button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { border-color: #aaa #bbb #bbb #bbb; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); } input[type="checkbox"], input[type="radio"] { padding: 0; /* Addresses excess padding in IE8/9 */ } input[type="search"] { -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */ -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ -moz-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ border: 0; padding: 0; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { color: #666; border: none; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #111; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] { padding: 3px; } textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ padding-left: 3px; vertical-align: top; /* Improves readability and alignment in all browsers */ width: 98%; } #secondary input[type="search"] { min-width: 215px; border: none; padding: 8px } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="tel"], input[type="number"], textarea { background: #f1f1f1; border: none; padding: 8px; } input[type="submit"] { display: inline-block; background: #d2625a; color: #FFF; font-size: 18px; text-decoration: none; padding: 15px; border: none; border-radius: 0; } /*-------------------------------------------------------------- 5.0 Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- 5.1 Links --------------------------------------------------------------*/ a { color: #d2625a; } a:hover, a:focus, a:active { color: #45637f; } #secondary a { color: #45637f; } /*-------------------------------------------------------------- 5.2 Menus --------------------------------------------------------------*/ .header-menu { position: absolute; right: 0; top: 30px; } .header-menu ul { list-style: none; margin: 0; padding-left: 0; } .header-menu li { float: left; position: relative; } .header-menu li:not(:last-child) { padding-right: 24px; } .menu-toggle { display: block; color: #fff; text-decoration: none; padding: 15px; } .header-menu a { color: #fff; font-size: 14px; text-decoration: none; } .header-menu a:hover { color: #45637f; font-size: 14px; text-decoration: none; } .skip-link.screen-reader-text { padding: 0; } .header-menu ul ul { display: none; } /* Small menu */ .menu-toggle { cursor: pointer; display: none; padding: 18px; } .site-main .comment-navigation, .site-main .paging-navigation, .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; } .content-area .paging-navigation, .navigation.post-navigation, .comments-area .comment-navigation, .content-area .store-pagination { font-size: 13px; padding: 10px 0; } .comment-navigation .nav-previous, .paging-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 48%; } .social-links { margin-top: 10px; } .social-links .fa { color: #fff; margin-right: 3px; } .navigation a, .comment-navigation a { color: #d2625a; } .navigation a:hover, .page-numbers.current, .comment-navigation a:hover { color: #e44e44; } .nav-previous .fa { margin-right: 6px; } .nav-next .fa { margin-left: 6px; } .page-links { clear: both; margin: 0 0 1.5em; } .comment-navigation .nav-next, .paging-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 48%; } /*-------------------------------------------------------------- 6.0 Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar */ } /*-------------------------------------------------------------- 7.0 Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin: 0 auto; } /*-------------------------------------------------------------- 8.0 Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ''; display: table; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } /*-------------------------------------------------------------- 9.0 Widgets --------------------------------------------------------------*/ #secondary { font-size: 13px; padding-top: 40px; } .widget { margin: 0 0 45px; } .widget-title { display: block; font-size: 15px; font-weight: bold; margin-bottom: 10px; } .widget ul { margin: 0; } .widget .children { border-top: 1px solid #D5E1E4; margin: 5px 0 0; } .widget li { list-style: none; padding: 5px 0 0; } .widget li:not(:last-child) { padding-bottom: 5px; border-bottom: 1px solid #D5E1E4; } .widget li a { text-decoration: none; } .widget li a:hover { text-decoration: underline; } /* Make sure select elements fit in widgets */ .widget select { max-width: 100%; } /* Search widget */ .widget_search .search-submit { display: none; } .widget_calendar table { background: #fff; border: 1px solid #D5E1E4; } .widget_calendar table caption { background: none; font-weight: bold; font-size: 15px; padding: 15px 15px 15px 0; } .widget_calendar table th, .widget_calendar table td { text-align: center; } .widget_calendar table th { padding: 8px 6px; } .widget_calendar table > thead > tr { background: #34495E; color: #fff; } .widget_calendar table td { padding: 6px; } .widget_calendar table tfoot td { padding-bottom: 8px; } .widget_calendar .widget-title { display: none; } #secondary .widget .wp-caption img { vertical-align: bottom; } #secondary .widget .wp-caption-text { background: #FFF; padding: 10px; margin: 0; } /*-------------------------------------------------------------- 10.0 Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- 10.1 Posts and pages --------------------------------------------------------------*/ #content-area { background: #f1f1f1; } .content-area { margin-top: 40px; } .sticky { } .hentry { position: relative; background: #fff; margin: 0 0 30px; } .entry-header, .entry-summary, .entry-content, .entry-footer { padding: 15px 20px; } .entry-header { padding-bottom: 0; } .entry-footer { padding-bottom: 0; } .featured-img { vertical-align: bottom; } .entry-title { margin-bottom: 5px; } .entry-title a { display: block; color: #404040; text-decoration: none; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .entry-meta a { color: #d2625a; text-decoration: none; } .entry-title a:hover { color: #45637f; } .entry-meta { font-size: 13px; } .byline, .updated { display: none; } .single .byline, .group-blog .byline { display: inline; } .byline, .posted-on { margin-right: 2em; } .entry-header .entry-meta .fa, .entry-meta .tax-links .fa { margin-right: 6px; color: #45637f; } .entry-meta .fa { margin-right: 6px; color: #45637f; } .comments-link .fa { margin-right: 3px; } .cats-tags { display: block; } .entry-summary p:last-child { margin-bottom: 0; } .excerpt-link { text-align: right; } .entry-meta .read-more { color: #d2625a; position: absolute; display: inline-block; right: 20px; bottom: 15px; text-decoration: none; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .read-more:hover { color: #e44e44; } .read-more i { margin-left: 3px; } .page-links { clear: both; margin: 0 0 1.5em; } body { background: #d2625a; } .sidenote { color: #ffffff; background: #45637f; border: 15px solid #748BA0; border-width: 0 0 0 15px; margin: 30px -20px; padding: 30px 75px 30px 60px; } .single-post-footer { margin-bottom: 3em; } .single-post-footer { color: #fff; padding: 15px 20px; background: #45637f; } .single-post-footer .post-footer-author { position: relative; border-bottom: 2px solid rgba(0,0,0,.05); margin-bottom: 1.5em; } .post-footer-author-bio p:last-child { margin-bottom: 0; } .post-footer-author .avatar { border-radius: 50%; margin: 6px 6px 12px 0; vertical-align: middle; } .author-name { display: inline-block; font-size: 18px; } .page-header { background: #45637f; padding: 15px 20px; color: #fff; margin-bottom: 30px; } .author-description, .taxonomy-description { font-family: 'Nobile', 'Lucida Grande', sans-serif; font-size: 16px; font-weight: 300; } .error404 #primary { float: none; margin: 0 auto; padding: 0; width: 640px; } .error-404 { margin-top: 40px; } /*-------------------------------------------------------------- Header --------------------------------------------------------------*/ #header-area { background: #d2625a; } .site-header.inner { padding: 0; } .header-elements { padding: 32px 0; } .site-title { display: inline-block; margin-bottom: 10px; } .site-title a { color: #fff; text-decoration: none; font-size: 2em; } .site-title a:hover { color: #45637f; } .site-description { font-size: 13px; font-weight: normal; color: #333; margin-bottom: 0; } .site-branding { padding: 16px; } /*-------------------------------------------------------------- 10.2 Asides --------------------------------------------------------------*/ .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } /*-------------------------------------------------------------- 10.3 Comments --------------------------------------------------------------*/ .comments-area { background: #fff; padding: 15px 20px; } .comment-form label { display: inherit; } #respond { margin-top: 2em; } .response-title { font-style: italic; } .comment-body { font-size: 14px; } .comment-content a { word-wrap: break-word; text-decoration: none; } .comment-body .comment-meta { position: relative; font-size: 13px; border-width: 1px 0; margin-bottom: 1.5em; } .comment-meta a { text-decoration: none; } .pingback { position: relative; font-size: 13px; margin-top: 40px; } .comment-author { background: #F5F5F5; padding: 6px 10px; border-left: 5px solid #d2625a; } .comment-author .avatar { border-radius: 50%; margin: 6px 6px 6px 0; } .comment-author a, .comment-metadata a { color: #d2625a; } .comment-author a:hover, .comment-metadata a:hover { color: #45637f; } .comment-metadata { position: absolute; top: 20px; right: 10px; } .comment-author .fn, .comment-author .says { position: relative; top: -12px; } .comment-list { margin-left: 0; } ol.comment-list, li.comment { list-style: none; } .comment-list > .parent [class*="depth-"] { padding-left: 24px; margin-left: 0; } .comment { margin-top: 2.5em; } .comment-reply-link { color: #d2625a; font-size: 13px; } #comment-nav-below { margin-top: 16px; } .comment-navigation { padding: 0; border: none; } .no-comments { /* comments closed */ font-size: 13px; background: #FFFFE0; padding: 5px 10px; text-align: center; } .bypostauthor .comment-author { color: #fff; padding: 6px 10px; background: #45637f; border-left: 5px solid #999; } .bypostauthor .comment-metadata a, .bypostauthor .comment-meta a.url { color: #fff; } .bypostauthor .comment-metadata a:hover, .bypostauthor .comment-meta a.url:hover { color: #999; } /*-------------------------------------------------------------- Footer --------------------------------------------------------------*/ #footer-area{ background: #d2625a; } .site-footer { color: #fff; font-size: 14px; } .site-footer a { color: #fff; text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: none; } /*-------------------------------------------------------------- 11.0 Media --------------------------------------------------------------*/ .page-content img.wp-smiley, .entry-content img.wp-smiley, .comment-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers */ embed, iframe, object { max-width: 100%; } /*-------------------------------------------------------------- 11.1 Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; } .wp-caption-text { text-align: center; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } /*-------------------------------------------------------------- 11.2 Galleries --------------------------------------------------------------*/ .gallery { margin-bottom: 1.5em; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-caption {} /*-------------------------------------------------------------- Responsive --------------------------------------------------------------*/ @media screen and (max-width: 1040px) { .main { padding-right: 20px; padding-left: 20px; } } @media screen and (max-width: 768px) { #header-area { margin-bottom: -20px; } .site-header { text-align: center; } .header-menu { position: static; margin-bottom: 20px; } .header-menu ul { text-align: center; margin-top: 16px; } .site-header .header-menu li { display: inline-block; float: none; padding: 0 10px; } .main-navigation { padding-left: 0; margin-top: 15px; } .menu-toggle, .main-navigation.toggled .nav-menu { display: block; text-align: center; } .main-navigation ul, .comment-metadata { display: none; } .main-navigation ul ul { display: block; float: none; position: static; box-shadow: none; } .main-navigation li { float: none; } .main-navigation ul ul a { width: 100%; } .header-area .main-navigation ul li:hover > ul { background: none; } #primary, #secondary { float: none; padding: 32px 0; width: 100%; } #secondary { padding: 0; border: none; } .widget { margin-bottom: 1.5em; } } @media screen and (max-width: 550px) { .entry-title { font-size: 24px; } .comments-link { display: inline-block; float: none; } .posted-on, .comments-link { margin-right: 1em; } .entry-meta .read-more { position: inherit; } }