/* Theme Name: Alpine Theme URI: http://wordpress.org/themes/alpine Author: Phillip Gooch Author URI: mailto:phillip.gooch@gmail.com Description: Alpine is a clean, minimal, and customizable theme designed with readability in mind. Flexible, responsive layout provies an easily readible page on any size screen. Looking for another customization option? Bugs reports and features suggestions always welcome. Version: 1.0.1 License: GNU General Public License License URI: https://www.gnu.org/licenses/gpl.html Tags: black, white, red, one-column, fluid-layout, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, flexible-header, theme-options, sticky-post, translation-ready Text Domain: alpine */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700|Roboto+Slab); 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { font-size: 100%; font: inherit; padding: 0; border: 0; margin: 0; vertical-align: baseline; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } .clear { clear: both; } .sticky, .bypostauthor, .wp-caption, .wp-caption-text, .gallery-caption, .alignright, .alignleft, .aligncenter { zoom: 1; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body#tinymce { padding: 0 1em !important; } /* color definitions */ /* General Styles (including text and image styles) */ body { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Sans-Serif; font-size: 16px; background-color: #fefefe; color: #020202; line-height: 1.5em; } #wrapper { max-width: 1000px; margin: auto; padding: 0 2em; } @media screen and (max-width: 700px) { #wrapper { padding: 0 1.25em; } } @media screen and (max-width: 425px) { #wrapper { padding: 0 .75em; } } p { margin: 1.25em 0; } ul { list-style: square; } ol { list-style: decimal; } ul, ol { margin: 1.25em 0; } ul li, ol li { margin: 0.625em 0 0.625em 1.5625em; } ul li ul, ul li ol, ol li ul, ol li ol { margin: 0; } blockquote { font-size: 1.25em; line-height: 1.5em; font-style: italic; padding: 0 .5em; opacity: .5; } cite { font-style: italic; } table { width: 100%; margin: 1.25em 0; } table th, table td { padding: 0.625em; } table th { font-weight: bold; text-align: left; } table tr:nth-child(even) { background-color: rgba(2, 2, 2, 0.05); } table tbody { border-collapse: collapse; } table tbody td, table tbody th { border: 1px solid rgba(2, 2, 2, 0.1); } dl { margin: 1.25em; } dl dt { font-weight: bold; margin: 1.25em 0 0 0; } dl dd { margin: 0.3125em 0; } strong, b { font-weight: bold; } del, strike { text-decoration: line-through; } em, i { font-style: italic; } ins { text-decoration: underline; } address { font-style: italic; } abbr, acronym { border-bottom: 1px dotted gray; } big { font-size: 1.25em; } cite { font-style: italic; } code, kbd, tt { font-family: monospace; word-wrap: break-word; } pre { font-family: monospace; white-space: pre; background: rgba(2, 2, 2, 0.05); padding: 0.9375em; overflow: scroll; } q:before { content: '"'; } q:after { content: '"'; } sub { font-size: .75em; vertical-align: sub; } sup { font-size: .75em; vertical-align: super; } var { font-style: italic; } h1, h2, h3, h4, h5, h6 { font-weight: bold; margin: 1.25em 0; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Sans-Serif; } h1 { font-size: 1.8em; } h2 { font-size: 1.65em; } h3 { font-size: 1.5em; } h4 { font-size: 1.35em; } h5 { font-size: 1.2em; } h6 { font-size: 1.05em; } a { text-decoration: none; color: #FF0000; } a:hover { text-decoration: underline; } img, .wp-caption { max-width: 100%; height: auto; } img.alignleft, .wp-caption.alignleft { float: left; padding-right: 1.25em; } img.alignright, .wp-caption.alignright { float: right; padding-left: 1.25em; } img.aligncenter, .wp-caption.aligncenter { float: none; display: block; margin: auto; } .wp-caption p { display: block; margin: 0; font-size: .85em; font-style: italic; margin-top: -.3em; } div.gallery.gallery-columns-1 dl.gallery-item { width: 100%; } div.gallery.gallery-columns-2 dl.gallery-item { width: 50%; } div.gallery.gallery-columns-3 dl.gallery-item { width: 33.3%; } div.gallery.gallery-columns-4 dl.gallery-item { width: 25%; } div.gallery.gallery-columns-5 dl.gallery-item { width: 20%; } div.gallery.gallery-columns-6 dl.gallery-item { width: 16.6%; } div.gallery.gallery-columns-7 dl.gallery-item { width: 14.2%; } div.gallery.gallery-columns-8 dl.gallery-item { width: 12.5%; } div.gallery.gallery-columns-9 dl.gallery-item { width: 11.1%; } div.gallery.gallery-columns-10 dl.gallery-item { width: 10%; } div.gallery dl.gallery-item { margin: 0; padding: 0.625em; } div.gallery dl.gallery-item .wp-caption-text { display: block; margin: 0; font-size: .85em; font-style: italic; margin-top: -.3em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } article.format-image .wp-caption { display: inline-block; } article.format-image section { text-align: center; } article.post.format-image .wp-post-image { margin-bottom: 1.25em; } /* Header Styles */ #header h1 { margin: 0; padding: 0; font-size: 1em; font-weight: normal; } #header #branding { text-align: center; padding: 5em; } #header #branding #site-title { font-size: 2em; line-height: 1.25em; } #header #branding #site-title a { text-decoration: none; color: inherit; font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Sans-Serif; } #header #branding #site-description { font-size: 1.25em; font-style: italic; padding-top: .5em; opacity: .5; display: block; } /* Menu styles */ #menu { border-top: 3px solid #020202; border-bottom: 3px solid #020202; } #menu #search { float: right; border-top: 3px solid black; margin-top: -3px; } #menu > div { display: inline-block; } #menu > div.clear { display: block; clear: both; } #menu a { text-decoration: none; color: #020202; } #menu ul { margin: 0; display: inline-block; } #menu ul li { margin: 0; display: inline-block; position: relative; } #menu ul li a { padding: .75em .5em; display: inline-block; } #menu ul li ul { display: none; } #menu ul li:hover a { background: #020202; color: #fefefe; } #menu ul li:hover ul { display: block; position: absolute; top: 100%; white-space: nowrap; } #menu ul li:hover ul li { display: block; } #menu ul li:hover ul li a { width: 100%; } #menu ul li:hover ul li ul { display: none; } #menu ul li:hover ul li:hover a { background: #fefefe; color: #020202; } #menu ul li:hover ul li:hover ul { display: block; position: absolute; top: 0%; left: 100%; } #menu ul li:hover ul li:hover ul li a { background: #020202; color: #fefefe; } #menu ul li:hover ul li:hover ul li:hover > a { background: #fefefe; color: #020202; } /* The mobile menu */ #mobile-menu { -webkit-appearance: none; font-size: 1em; padding: .75em .5em; border: 3px solid #fefefe; background: #fefefe; border-radius: 0; cursor: pointer; display: none; } #mobile-menu:hover { color: #fefefe; background: #020202; border-color: #020202; } /* Toggle which menu displays and how it displays at size */ @media screen and (max-width: 765px) { #mobile-menu { display: inline-block; } #desktop-menu { display: none !important; } } @media screen and (max-width: 567px) { #mobile-menu { display: inline-block; width: 100%; } } /* Search Forms Styles (in menu) */ #search { z-index: 200; position: relative; } .search-form { height: 100%; } .search-form input { font-size: 1em; line-height: 1.5em; padding: .75em .5em; border-top: none; border-bottom: none; border-left: 3px solid #020202; border-right: 3px solid #020202; outline: none; -webkit-appearance: none; margin: 0; } .search-form input.search-field { margin-right: -.3em; border-right: none; border-radius: 0; } .search-form input.search-submit { background: #fefefe; color: #020202; cursor: pointer; border-radius: 0; } .search-form input.search-submit:hover { border-color: #020202; color: #fefefe; background-color: #020202; } .search-form.outlined { display: inline-block; border-top: 3px solid #020202; border-bottom: 3px solid #020202; } /* Post Styles */ #container .post, #container .page { padding: 1em .5em 5em .5em; } #container .post header, #container .page header { margin: 1.25em 0; } #container .post header .entry-title, #container .page header .entry-title { font-size: 2em; line-height: 1.25em; font-weight: 200; margin: 0 0 0.3125em 0; } #container .post header .entry-title a, #container .page header .entry-title a { color: #020202; -ms-word-wrap: break-word; word-wrap: break-word; } #container .post .wp-post-image.vertical, #container .page .wp-post-image.vertical { float: left; padding-right: 1.25em; } #container .post .wp-post-image.horizontal, #container .post .wp-post-image.square, #container .page .wp-post-image.horizontal, #container .page .wp-post-image.square { display: block; margin: auto; } #container .post .entry-footer, #container .page .entry-footer { clear: both; text-align: center; font-size: .8em; } #container .post .entry-meta, #container .page .entry-meta { display: inline; } /* Navigation Styles (for navigation and things like the more link, pretty much everything but the menu */ #nav-below div.nav-btn { font-size: 1.25em; font-weight: bold; font-family: 'Roboto Slab'; padding: 0em 1em 3em 1em; max-width: 50%; position: relative; } #nav-below div.nav-btn.nav-previous { float: left; text-align: left; } #nav-below div.nav-btn.nav-previous .meta-nav { float: left; left: 0; } #nav-below div.nav-btn.nav-next { float: right; text-align: right; } #nav-below div.nav-btn.nav-next .meta-nav { float: right; right: 0; } #nav-below div.nav-btn .meta-nav { position: absolute; top: 0; } .more-link { font-style: italic; padding-left: 1.25em; } .entry-links, .paginated-comments-links { font-size: 1.25em; font-weight: bold; font-family: 'Roboto Slab'; padding: 0em 1em 3em 1em; text-align: center; } /* The password protected form */ #container .post-password-form { font-size: 1.25em; text-align: center; margin: 1.25em 0; } #container .post-password-form p { margin: 0; } #container .post-password-form input { font-size: 1em; } /* Comment styles */ #container #comments-list > ul, #container #comments-list ul.children { list-style: none; padding: 0; } #container #comments-list > ul > li, #container #comments-list ul.children > li { border-left: 1em solid #f1f1f1; margin: 1.25em 0 1.25em 0; } #container #comments-list > ul > li div.comment-body, #container #comments-list ul.children > li div.comment-body { margin: 0 0 1.25em 1.25em; } #container #comments-list .comment-all-meta img.avatar { float: left; padding-right: 0.625em; width: 55px; height: 45px; } #container #comments-list .comment-all-meta cite a { font-size: 1.25em; } #container #comments-list a.comment-reply-link { font-size: .8em; } #container .comment-form-comment { margin-bottom: 0; } #container .comment-form-comment label { display: block; } #container .comment-form-comment textarea { width: 100%; } #container .form-allowed-tags { margin-top: 0; font-size: .8em; padding: 0 1.25em; } #container .form-submit input { font-size: 1.25em; } #respond { margin-bottom: 6.25em; } /* Widget Area */ #footer-widget-area { margin: 0 0 3.75em 0; padding: 0; } #footer-widget-area li.widget-container { margin: 0.625em 0; padding: 0 0.625em; display: inline-block; width: 33.333%; vertical-align: top; } #footer-widget-area li.widget-container h3.widget-title { font-family: 'Roboto Slab', 'Helvetica Neue', Helvetica, Sans-Serif; font-size: 1.5em; font-weight: bold; } #footer-widget-area li.widget-container > ul { font-size: .9em; } #footer-widget-area li.widget-container > ul li { margin: 0.15625em 0em 0.15625em 1.25em; } @media screen and (max-width: 915px) { #footer-widget-area li.widget-container { width: 50%; } } @media screen and (max-width: 630px) { #footer-widget-area li.widget-container { width: 100%; } } /* The footer */ #footer { text-align: center; padding: 5em; } #footer #copyright { margin: 0.625em 0; } #footer span.footer-contribution { font-size: .9em; display: inline-block; padding-top: 0.4166666667em; opacity: .6; }