/** * Theme Name: Cakifo * Theme URI: http://wpthemes.jayj.dk/cakifo * Description: Cakifo is a nice, responsive theme built from the rock-solid Hybrid Core theme framework. With its HTML5 markup and support for all the WordPress features you love, it might be the perfect theme and a great starting point for your blog! Other features include a homepage template, content slider, post formats, improved widgets and many more useful features. Customize it with a custom background, logo and link color or use a child theme. The theme is very child theme friendly. * Version: 1.5.0 * Author: Jesper J * Author URI: http://jayj.dk * Tags: blue, white, one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-header, custom-menu, custom-colors, editor-style, featured-images, post-formats, microformats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready * Github Theme URI: https://github.com/jayj/Cakifo * Support URI: http://jayj.dk/2011/cakifo-free-wordpress-theme/ * Documentation URI: https://github.com/jayj/Cakifo/wiki * License: GNU General Public License v2.0 * License URI: http://www.gnu.org/licenses/gpl-2.0.html * Text Domain: cakifo * Domain Path: /languages * * Copyright (c) 2011-2013 Jesper J. All rights reserved. * http://jayj.dk * ********** * NOTICE: Uncompiled .LESS version can be found at style.dev.less ********** */ /** * You shouldn't make changes to this file. Use a child theme instead * @link https://github.com/jayj/Cakifo/wiki/Child-themes */ .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } /* ============================================================================= HTML5 display definitions ========================================================================= */ /** * Corrects `block` display not defined in IE 8/9. */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /** * Corrects `inline-block` display not defined in IE 8/9 */ audio, canvas, video { display: inline-block; } /** * Prevents modern browsers from displaying `audio` without controls * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Addresses styling for `hidden` attribute not present in IE 8/9. */ [hidden] { display: none; } /* ============================================================================= Base ========================================================================== */ /** * Apply a natural box layout model to all elements * @link http://paulirish.com/2012/box-sizing-border-box-ftw/ */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* * 1. Sets 1 rem = 10px * 2. Prevents iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-size: 62.5%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; background-color: #e3ecf2; color: #555555; font-family: Georgia, Cambria, "Bitstream Charter", serif; font-size: 16px; font-size: 1.6rem; font-weight: normal; line-height: 1.8; } /** * Remove background color if a user removes the color */ .custom-background-empty { background-color: #ffffff; } .custom-background-empty #content, .custom-background-empty #footer { -webkit-box-shadow: none; box-shadow: none; } /** * Set site width and center the site. * @siteWidth is defined in less/variables.less */ #wrapper { width: 100%; max-width: 1080px; margin: 0 auto; } /* ============================================================================= Links ========================================================================== */ a { color: #3083aa; text-decoration: none; } a:hover { color: #d54e21; } a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } a:hover, a:active { outline: 0; } /* ============================================================================= Typography: Headings ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-weight: bold; color: inherit; text-rendering: optimizelegibility; } h1, h2 { font-size: 26px; font-size: 2.6rem; letter-spacing: -1px; } h3 { font-size: 22px; font-size: 2.2rem; color: #d54e21; } h4 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 22px; font-size: 2.2rem; font-weight: bold; line-height: 1.8; } h5 { font-size: 20px; font-size: 2rem; } h6 { font-size: 18px; font-size: 1.8rem; font-weight: normal; line-height: 1.8; } /* Entry titles */ .entry-title { margin-bottom: 5px; font-size: 30px; font-size: 3rem; } /* h3 headings in post content */ .entry-content h3 { background: #f4f4f4; padding: 8px 10px; } /* Widget titles */ .widget-title { background-color: #f4f4f4; background-image: -webkit-linear-gradient(top, #f9f9f9, #ececec 100%); background-image: -moz-linear-gradient(top, #f9f9f9, #ececec 100%); background-image: -o-linear-gradient(top, #f9f9f9, #ececec 100%); background-image: linear-gradient(top, #f9f9f9, #ececec 100%); border: 1px solid #e9e9e9; border-bottom-color: #dfdfdf; border-radius: 50px 30px; color: #333333; font-size: 18px; font-size: 1.8rem; padding: 8px 20px; margin: 0 0 25px; text-shadow: 0 1px 0 #ffffff; letter-spacing: -1px; } .widget-title a { color: #333333; } .widget-title a:hover { color: #d54e21; } /* Section titles */ .section-title { background-color: #d04b1f; background-image: -webkit-linear-gradient(top, #d54e21, #c8471b 100%); background-image: -moz-linear-gradient(top, #d54e21, #c8471b 100%); background-image: -o-linear-gradient(top, #d54e21, #c8471b 100%); background-image: linear-gradient(top, #d54e21, #c8471b 100%); border-radius: 30px; color: #ffffff; font-size: 24px; font-size: 2.4rem; padding: 10px 60px; margin: 0 0 40px -60px; text-shadow: 1px 1px 0 #9c3412; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), -4px 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 3px #ac3d18; } .section-title a { display: block; color: #ffffff; } .section-title a:hover { color: #eeeeee; } /* ============================================================================= Typography: Lists ========================================================================== */ li { line-height: 2.2; } ol ol { list-style: upper-roman; } ol ol ol { list-style: lower-roman; } ol ol ol ol { list-style: upper-alpha; } ol ol ol ol ol { list-style: lower-alpha; } dt { font-weight: bold; } /* ============================================================================= Typography: Quotes ========================================================================== */ /* * Sets consistent quote types */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /** * Blockquotes */ blockquote { background: #f5f8f9 url(images/quote.png); box-shadow: inset 0 0 20px #e8f0f4, 0 1px 1px #dde5e8, 0 0 3px rgba(0, 0, 0, 0.05); border: 1px solid #dde5e8; border-top: none; border-radius: 5px; color: #4c636e; text-shadow: 0 1px 0 #ffffff; font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 16px; font-size: 1.6rem; font-weight: normal; line-height: 32px; margin: 25px auto; padding: 30px 50px; position: relative; clear: both; } blockquote blockquote { background: #eef7f9; color: #33505c; } blockquote p { position: relative; margin-top: 5px; } blockquote em, blockquote cite { font-style: italic; } blockquote p:last-of-type { margin-bottom: 0; } blockquote cite, blockquote span { display: block; margin-top: 20px; font-size: 15px; font-size: 1.5rem; color: #91acbe; } blockquote span cite { display: inline; } blockquote.alignleft, blockquote.alignright { clear: none; width: 33%; padding: 30px 25px; } blockquote.aligncenter { width: 66%; text-align: center; } blockquote.alignleft { margin-right: 25px; } blockquote.alignright { margin-left: 25px; } blockquote:before { content: "\201C"; position: absolute; top: -45px; left: -25px; font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 170px; font-size: 17rem; font-weight: normal; line-height: normal; color: #5e8db5; opacity: 0.35; } blockquote p:first-of-type:after { content: "\201E"; position: absolute; bottom: -10px; margin-left: 10px; font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 70px; font-size: 7rem; font-weight: normal; line-height: normal; color: #5e8db5; opacity: 0.25; } blockquote p:only-of-type:after { display: none; } /* Hide the quote for embedded tweets */ .twt-tweet:before { display: none; } /* Pull quotes */ .pull { font-size: 19px; font-size: 1.9rem; /* Reset styles inherited from 'blockquote' */ background: none; border: none; text-shadow: none; box-shadow: none; } .pull.alignleft { padding-right: 0; margin: 0 25px 0 0; } .pull.alignright { margin: 0 0 0 25px; } .pull:before { top: -22px; left: -12px; font-size: 120px; font-size: 12rem; opacity: 0.25; } .pull:after, .pull p:first-of-type:after { font-size: 56px; font-size: 5.6rem; opacity: 0.2; } /* ============================================================================= Typography: Code ========================================================================== */ /* * Corrects font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: Monaco, Consolas, "Courier New", monospace; font-size: 16px; font-size: 1.6rem; font-weight: normal; line-height: 1.8; } /** * Inline code */ code { color: #009933; } /** * Blocks of code */ pre { overflow: auto; padding: 25px; background: #424242; border-radius: 5px; color: #ffffff; /* Improves readability of pre-formatted text in all browsers */ white-space: pre; white-space: pre-wrap; word-wrap: break-word; } pre code { color: #ffffff; } /* ============================================================================= Media ========================================================================== */ /* Removes border when inside `a` element in IE 8/9 */ img { border: 0; -ms-interpolation-mode: bicubic; } /* Corrects overflow displayed oddly in IE9 */ svg:not(:root) { overflow: hidden; } /* Addresses margin not present in IE 8/9 and Safari 5 */ figure { margin: 0; } /** * Responsive images (ensure images don't scale beyond their parents) */ /* Fluid images for posts, comments, and widgets */ .entry-content img, .comment-content img, .widget img { max-width: 100%; width: auto\9; height: auto; } .size-full, .size-large, .wp-post-image { max-width: 100%; height: auto; } /* Add fancy borders to all WordPress-added images */ .entry-content img, .comment-content img, .wp-post-image, .widget img, .thumbnail, .avatar { border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } /* Post thumbnails */ .thumbnail { float: right; margin: 0 0 25px 25px; } /* Aligned images */ img.aligncenter { margin: 25px auto; } img.alignleft { margin: 0 25px 12px 0; } img.alignright { margin: 0 0 12px 25px; } /* Avatars */ .avatar { float: left; margin-right: 18px; } /* Remove borders from some images */ .wp-smiley, .no-image-border, .rsswidget img { border-radius: 0 !important; box-shadow: none !important; } /* Make sure videos and embeds fit their containers */ embed, iframe, object, video { max-width: 100%; } iframe { border: none; } /* Style `seamless` iframes */ iframe[seamless] { overflow: hidden; padding: 0; border: 0 none transparent; background-color: transparent; } /* Override the Twitter embed fixed width */ .entry-content .twitter-tweet-rendered { max-width: 100% !important; } /** * Captions [caption] */ .wp-caption { clear: both; max-width: 100%; padding-top: 5px; margin: 25px 0; background: #222222; border-radius: 0 0 3px 3px; text-align: center; } .wp-caption img { border-radius: 0; box-shadow: none; } .wp-caption.aligncenter { margin: 25px auto; } .wp-caption.alignleft { margin: 0 25px 0 0; } .wp-caption.alignright { margin: 0 0 0 25px; } /* Caption text */ .wp-caption-text { padding: 10px 20px 20px; margin: 0; font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 14px; font-size: 1.4rem; font-weight: normal; line-height: 1.8; color: #dddddd; } /** * Galleries */ .gallery, .gallery-row { display: block; overflow: hidden; clear: both; } .gallery { margin: 25px auto; text-align: center; } .gallery-row { margin: 0; } .gallery-item { overflow: hidden; float: left; list-style-type: none; padding: 0; margin: 0; text-align: center; } .gallery-caption { font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 14px; font-size: 1.4rem; font-weight: normal; line-height: 1.8; margin: 0 0 15px 0; } /* Gallery columns */ .col-30 { width: 3.3333333333333335%; } .col-29 { width: 3.4482758620689653%; } .col-28 { width: 3.571428571428572%; } .col-27 { width: 3.7037037037037033%; } .col-26 { width: 3.8461538461538463%; } .col-25 { width: 4%; } .col-24 { width: 4.166666666666667%; } .col-23 { width: 4.3478260869565215%; } .col-22 { width: 4.545454545454546%; } .col-21 { width: 4.761904761904762%; } .col-20 { width: 5%; } .col-19 { width: 5.2631578947368425%; } .col-18 { width: 5.555555555555555%; } .col-17 { width: 5.882352941176471%; } .col-16 { width: 6.25%; } .col-15 { width: 6.666666666666667%; } .col-14 { width: 7.142857142857144%; } .col-13 { width: 7.6923076923076925%; } .col-12 { width: 8.333333333333334%; } .col-11 { width: 9.090909090909092%; } .col-10 { width: 10%; } .col-9 { width: 11.11111111111111%; } .col-8 { width: 12.5%; } .col-7 { width: 14.285714285714288%; } .col-6 { width: 16.666666666666668%; } .col-5 { width: 20%; } .col-4 { width: 25%; } .col-3 { width: 33.333333333333336%; } .col-2 { width: 50%; } .col-1 { width: 100%; } /* ============================================================================= Typography: HTML elements ========================================================================== */ /* Addresses styling not present in IE 8/9, Safari 5, and Chrome */ abbr[title] { border-bottom: 1px dotted; cursor: help; } acronym { border-bottom: 1px dashed #555555; text-transform: uppercase; cursor: help; } /* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome */ b, strong { font-weight: bold; } em, cite { font-style: italic; } /** * Horizontal rule */ hr { display: block; clear: both; border: 0; height: 0; padding: 0; margin: 25px 0; border-bottom: 4px double #eeeeee; } /* Addresses styling not present in IE 8/9 */ mark { background: #ff0; color: #000000; } /* Addresses styling not present in Safari 5 and Chrome */ dfn { font-style: italic; } /* Addresses inconsistent and variable font size in all browsers */ small { font-size: 80%; } big { font-size: 120%; } address { margin: 0 0 25px 0; font-style: italic; } li address, dd address { margin: 0; } /** * Prevents `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ============================================================================= Typography: Tables ========================================================================== */ table { width: 100%; margin: 0 0 25px 0; background-color: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; border-collapse: collapse; border-spacing: 0; } th, td { padding: 8px; border: 1px solid #dddddd; text-align: left; } tr:hover td { background: #f9f9f9; } thead th { background: #f7fafd; border-left: 1px solid #e9f2f7; } th { font-weight: bold; } tfoot td { background: #f5f5f5; box-shadow: inset 0 1px 1px 0 #eeeeee; color: #666666; font-size: 11px; font-size: 1.1rem; text-transform: uppercase; } caption { margin-bottom: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; font-size: 1.8rem; font-weight: bold; line-height: 1.8; } /* ============================================================================= Typography: Selections ========================================================================== */ /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection declarations have to be separate */ ::-moz-selection { background: #568cbb; color: #ffffff; text-shadow: none; } ::selection { background: #568cbb; color: #ffffff; text-shadow: none; } /* ============================================================================= Misc: Helper classes ========================================================================== */ /** * Alignments */ .alignleft { float: left; } .alignright { float: right; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignnone { clear: both; } .clear { clear: both; } .last { margin-right: 0 !important; } /** * Screen reader text * * This is used to hide content from browsers but allow screen readers to see it */ .assistive-text { overflow: hidden; position: absolute !important; width: 1px; height: 1px; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); } .site-navigation .assistive-text:hover, .site-navigation .assistive-text:active, .site-navigation .assistive-text:focus { display: block; position: absolute; top: 5px; left: 5px; z-index: 100000; /* Above WP toolbar */ width: auto; height: auto; padding: 12px; border: 2px solid #333; background: #fff; border-radius: 3px; color: #000; clip: auto !important; font-size: 12px; } /** * Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /** * Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* ============================================================================= Layout: Topbar ========================================================================== */ #topbar { position: relative; width: 100%; min-height: 60px; background: #262626 url(images/topbar.png) repeat; color: #ccc; } #topbar:after { position: absolute; bottom: -11px; left: 0; width: 100%; height: 10px; background: url(images/topbar-bottom.png) repeat-x; content: ""; } /* ============================================================================= Layout: Main navigation ========================================================================== */ .main-navigation { *zoom: 1; width: 100%; margin: 0 auto; } .main-navigation:before, .main-navigation:after { content: ""; display: table; } .main-navigation:after { clear: both; } .main-navigation .menu { list-style: none; margin: 0; } .main-navigation .menu-item { float: none; width: 100%; margin: 8px 0; } .main-navigation .menu-item > a { display: block; padding: 14px 20px; color: #c6c6c6; } .main-navigation .menu-item > a:hover, .main-navigation .menu-item > a:focus, .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { background: #151515; color: #ececec; } .main-navigation .menu-list-container, .main-navigation .search-form, .main-navigation .sep { display: none; } /* Toggle button */ #menu-toggle { display: block; width: 100%; padding: 15px 0; margin: 0; font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 21px; font-size: 2.1rem; font-weight: bold; line-height: 1.5; background-color: #4e4e4e; background-image: -webkit-linear-gradient(top, #555555, #444444 100%); background-image: -moz-linear-gradient(top, #555555, #444444 100%); background-image: -o-linear-gradient(top, #555555, #444444 100%); background-image: linear-gradient(top, #555555, #444444 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); border-bottom: 1px solid #050505; color: #ffffff; cursor: pointer; text-align: center; } #menu-toggle:hover { background: #333333; } #menu-toggle:active, #menu-toggle:focus { background: #222222; } @media screen and (min-width: 980px) { .main-navigation { position: relative; width: 1080px; margin: 0 auto; padding: 0 40px 0 25px; } .main-navigation ul { list-style-type: none; padding: 0; margin: 0; } .main-navigation .menu-list-container, .main-navigation .search-form { display: block !important; } .main-navigation .menu-list-container { overflow: visible !important; height: auto; } .main-navigation .menu-item { position: relative; float: left; width: auto; margin: 0; background: #262626 url(images/topbar.png) repeat; } .main-navigation .menu-item > a { display: inline-block; padding: 21px 15px; font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 15px; font-size: 1.5rem; font-weight: bold; line-height: normal; text-shadow: 1px 1px 0 #222222; color: #ccc; -webkit-transition: all 150ms; -moz-transition: all 150ms; -o-transition: all 150ms; transition: all 150ms; } .main-navigation .menu-item > a:hover, .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { background-color: #444; background-color: rgba(255, 255, 255, 0.08000000000000002); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 100%); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 100%); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 100%); background-image: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 100%); color: #ececec; } .main-navigation .sub-menu { display: none; position: absolute; z-index: 500; top: 100%; left: 0; background: #262626 url(images/topbar.png) repeat; box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3); border-radius: 0 0 5px 5px; } .main-navigation .sub-menu .menu-item { float: none; background: none; } .main-navigation .sub-menu .menu-item > a { display: block; width: 180px; padding: 18px 14px; border-top: 1px solid #3a3a3a; border-bottom: 1px solid #262627; font-size: 14px; font-size: 1.4rem; } .main-navigation .sub-menu .menu-item:first-of-type > a { border-top: none; } .main-navigation .sub-menu .menu-item:last-of-type > a { border-bottom: none; } .main-navigation .sub-menu .sub-menu { top: 0; left: 100%; } .main-navigation .menu-item:hover > ul { display: block; } .main-navigation .sep { display: inline; color: #808080; } .main-navigation .sub-menu .sep, .main-navigation .menu-item:last-of-type .sep { display: none; } /* Hide toggle button */ #menu-toggle { display: none; } } /* No JS: show the menu */ .no-js .main-navigation .menu-list-container, .no-js .main-navigation .search-form { display: block !important; } .no-js #menu-toggle { visibility: hidden; } .secondary-navigation { background-color: rgba(255, 255, 255, 0.332); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.53) 100%); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.53) 100%); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.53) 100%); background-image: linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.53) 100%); border-radius: 5px 5px 0 0; } .no-rgba .secondary-navigation { background-color: #f8fafb; } .secondary-navigation ul { list-style-type: none; padding: 0; margin: 0; } .secondary-navigation .menu { *zoom: 1; margin-left: 25px; } .secondary-navigation .menu:before, .secondary-navigation .menu:after { content: ""; display: table; } .secondary-navigation .menu:after { clear: both; } .secondary-navigation .menu-item { position: relative; float: left; font-size: 14px; font-size: 1.4rem; } .secondary-navigation a { display: inline-block; padding: 4px 20px; line-height: 3.5; color: #484848; text-transform: uppercase; } .secondary-navigation a:hover { background-color: #ffffff; background-color: rgba(255, 255, 255, 0.53); color: #d54e21; } .secondary-navigation .current-menu-item > a, .secondary-navigation .current-menu-ancestor > a { font-weight: bold; color: #222222; } .secondary-navigation .sep { color: #999999; } .secondary-navigation .sub-menu .sep, .secondary-navigation .menu-item:last-of-type .sep { display: none; } .secondary-navigation .sub-menu { display: none; position: absolute; z-index: 500; top: 100%; left: 0; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15); } .secondary-navigation .sub-menu a { display: block; width: 180px; padding: 8px 10px; border-bottom: 1px solid #dfdfdf; font-size: 14px; font-size: 1.4rem; line-height: 2.2; background: #eeeeee; text-transform: none; white-space: normal; } .secondary-navigation .sub-menu a:hover { background: #e1e1e1; } .secondary-navigation .sub-menu .menu-item:last-of-type > a { border-bottom: none; } .secondary-navigation .menu-item:hover > ul { display: block; } .secondary-navigation .sub-menu .sub-menu { top: 0; left: 100%; } /* ============================================================================= Layout: Header ========================================================================== */ #branding { padding: 60px 0 50px; } #site-title { float: left; margin: 0 0 0 40px; } #site-title img { max-width: 100%; width: auto\9; height: auto; margin-top: 20px; } #site-title span { font-size: 46px; font-size: 4.6rem; font-weight: normal; line-height: 1.8; text-shadow: 0 1px 0 #ffffff; letter-spacing: -2px; } #site-title.display-header-text img { margin-right: 10px; vertical-align: text-bottom; } #site-title.display-header-text span { position: relative !important; clip: auto; } #site-title a { color: #3083aa; } #site-title a:hover { color: #d54e21; } #site-description { float: right; margin: 25px 40px 0 0; padding: 2px 8px; font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 21px; font-size: 2.1rem; font-weight: normal; line-height: 1.8; background-color: #ffffff; background-color: rgba(255, 255, 255, 0.53); border-radius: 3px; color: #555555; } #site-description:empty { background: none; } /** * Use Flexbox to vertical center the site title and description */ .flexbox #branding hgroup { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .flexbox #site-title { float: none; margin: auto auto auto 40px; } .flexbox #site-description { float: none; margin: auto 40px auto auto; } /* ============================================================================= Layout: Content ========================================================================== */ #content, #footer { position: relative; padding: 40px 40px 40px; background: #ffffff url(images/content-orange-line.png) repeat-x; border-radius: 0 0 5px 5px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); } #main { position: relative; width: 650px; float: left; } #sidebar-primary, #sidebar-secondary { width: 310px; float: right; } #sidebar-secondary { clear: right; } /* ============================================================================= Layout: Footer ========================================================================== */ #footer { position: relative; padding-top: 40px; margin: 40px 0; background-color: #f8fafb; text-shadow: 1px 1px 0 #ffffff; } #footer .footer-content { margin-top: 10px; } #footer .copyright, #footer .credit { width: 50%; margin: 0; } #footer .copyright { float: left; } #footer .credit { float: right; text-align: right; } /** * Footer Widget Area */ #sidebar-subsidiary { clear: both; margin-top: 25px; /* Two columns */ /* Three columns */ } #sidebar-subsidiary.two-col .widget-area { float: left; width: 48%; margin-right: 4%; } #sidebar-subsidiary.two-col .widget-area + .widget-area { margin-right: 0; } #sidebar-subsidiary.three-col .widget-area { float: left; width: 31%; margin-right: 3.5%; } #sidebar-subsidiary.three-col .widget-area + .widget-area + .widget-area { margin-right: 0; } /* ============================================================================= Layout: Theme Layouts ========================================================================== */ /** * One column layout * * The first selector makes sure that the theme layout on the front page * don't get overwritten in the Theme Customizer preview */ body.page-template-template-front-page #main, .layout-1c #main { float: none; width: 100%; } /** * Two columns */ .layout-2c-r #main { float: right; } .layout-2c-r #sidebar-primary, .layout-2c-r #sidebar-secondary { float: left; clear: left; margin-left: -15px; } /** * Three columns */ .layout-3c-c #sidebar-primary, .layout-3c-r #sidebar-primary, .layout-3c-l #sidebar-primary, .layout-3c-c #sidebar-secondary, .layout-3c-r #sidebar-secondary, .layout-3c-l #sidebar-secondary { clear: none; width: 225px; } .layout-3c-l #main, .layout-3c-r #main { width: 500px; } /* Three columns, center */ .layout-3c-c #main { float: left; width: 500px; margin-left: 250px; } .layout-3c-c #sidebar-primary { float: left; margin-left: -765px; } .layout-3c-c #sidebar-secondary { float: right; margin-right: -15px; } /* Three columns, left */ .layout-3c-l #main { float: left; } .layout-3c-l #sidebar-primary, .layout-3c-l #sidebar-secondary { float: left; margin-left: 25px; } .layout-3c-l #sidebar-primary { margin-left: 40px; } .layout-3c-l #sidebar-secondary { margin-right: -15px; } /* Three columns, right */ .layout-3c-r #main { float: right; } .layout-3c-r #sidebar-primary, .layout-3c-r #sidebar-secondary { float: left; margin-right: 25px; } .layout-3c-r #sidebar-primary { margin-left: -15px; } /* ============================================================================= Layout: Slider ========================================================================== */ #slider { position: relative; background-color: #ffffdf; border: double #eedbbb; border-width: 0 0 4px; margin: 0 -40px 40px -40px; padding: 0 40px 25px; } #slider:before { content: " "; position: absolute; top: -34px; left: 0; width: 100%; height: 34px; background-color: #ffffdf; } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } /* Slider content */ .slide { /* Hide the slides before the JS is loaded to avoid page jumping */ display: none; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .slide .thumbnail, .slide .slider-video { float: left; max-width: 100%; margin: 0 40px 3px 3px; } .slide .entry-title { margin-top: 0; } /* Control navigation */ .flex-control-nav { list-style: none; margin: 20px auto 0 -60px; text-align: center; } .flex-control-nav li { display: inline-block; margin: 0 0 0 7px; } .flex-control-nav li:first-child { margin-left: 0; } /* Slider pagination */ .flex-control-paging li a { display: block; width: 16px; height: 16px; background: #ffc768; border-radius: 50%; text-indent: -9999px; cursor: pointer; -webkit-transition: all 150ms ease; -moz-transition: all 150ms ease; -o-transition: all 150ms ease; transition: all 150ms ease; } .flex-control-paging li a:hover { background: #f89406; } .flex-control-paging li .flex-active, .flex-control-paging li .flex-active:hover { background: #d54e21; cursor: default; -webkit-transform: scale(1.07); -moz-transform: scale(1.07); -ms-transform: scale(1.07); -o-transform: scale(1.07); transform: scale(1.07); } .flex-pauseplay a { cursor: pointer; } /* Next/prev buttons */ .flex-direction-nav { list-style-type: none; padding: 0; margin: 0; } .flex-direction-nav a { position: absolute; top: 40%; width: 48px; height: 48px; margin: 0; background-color: #ffffff; border-radius: 50%; box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); text-indent: -9999px; opacity: 0.6; -webkit-transition: opacity 150ms ease; -moz-transition: opacity 150ms ease; -o-transition: opacity 150ms ease; transition: opacity 150ms ease; } .flex-direction-nav a:focus { background: #ffc768; outline: 0; } .flex-direction-nav a:after { position: absolute; z-index: 10; top: 0; left: -2px; width: 100%; height: 100%; font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 38px; font-size: 3.8rem; font-weight: bold; line-height: 41px; color: #555555; text-align: center; text-indent: 0; } #slider:hover .flex-direction-nav a { opacity: 1; } .flex-direction-nav .flex-prev { left: -25px; } .flex-direction-nav .flex-prev:after { content: "\00AB"; } .flex-direction-nav .flex-next { right: -25px; } .flex-direction-nav .flex-next:after { content: "\00BB"; left: 1px; } .flex-direction-nav .flex-direction-nav .disabled { cursor: default; opacity: 0.3 !important; filter: alpha(opacity=30); } .flex-direction-nav .flex-prev:active, .flex-direction-nav .flex-next:active { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3), 0 0 7px rgba(0, 0, 0, 0.3); } /* Fallback to a border for browsers without box-shadow support */ .no-boxshadow .flex-direction-nav .flex-prev, .no-boxshadow .flex-direction-nav .flex-next { border: 2px solid #ffc768; } .no-boxshadow .flex-direction-nav .flex-prev:hover, .no-boxshadow .flex-direction-nav .flex-next:hover { border-color: #d54e21; } /* No-javaScript fallback */ .no-js .slides-container > .slide { display: none; } .no-js .slides-container > .slide:first-child { display: block; } .no-js .slides-container > .slide:first-child { display: block; } /* ============================================================================= Layout: Posts ========================================================================== */ .hentry { position: relative; padding-bottom: 25px; border-bottom: 4px double #eeeeee; margin-bottom: 25px; } .singular .hentry { padding-bottom: 0; border-bottom: none; } .sticky { padding: 25px; background: #ffffdf; } .sticky .entry-title { margin-top: 0; } /** * Byline and entry meta */ .byline, .entry-meta { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-size: 1.4rem; font-weight: normal; line-height: 2; color: #808080; clear: both; } .byline { margin-bottom: 15px; } .singular .entry-meta { padding: 15px 0 0; border-top: 1px solid #eeeeee; margin: 25px 0; } .page-links { clear: both; } /** * Intro */ .singular .intro-post { margin-bottom: 40px; } .singular .intro-post .entry-title { display: none; } .singular .intro-post .entry-content { font-size: 21px; font-size: 2.1rem; } .singular .intro-post .post-edit-link { position: absolute; top: 40%; right: 25px; padding: 0 8px; font-size: 12px; font-size: 1.2rem; background: #999999; border-radius: 3px; color: #ffffff; text-decoration: none; } .singular .intro-post .post-edit-link:hover, .singular .intro-post .post-edit-link:focus, .singular .intro-post .post-edit-link:active { background: #777; } /* ============================================================================= Components: Breadcrumbs ========================================================================== */ .breadcrumbs { padding: 12px 25px; border-bottom: 1px solid #eeeeee; margin-bottom: 25px; font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 14px; font-size: 1.4rem; font-weight: normal; line-height: 2; background: #f8f8f7; border-radius: 5px; color: #555555; } .breadcrumbs a { color: #333333; } .breadcrumbs a:hover { color: #d54e21; } .breadcrumbs .trail-before { margin-right: 3px; } .breadcrumbs .sep { margin: 0 3px; } .breadcrumbs .trail-end { font-style: italic; } /* ============================================================================= Layout: Post formats ========================================================================== */ /** * Post format link */ .entry-header .post-format-link { position: absolute; top: 10px; right: 0; float: right; padding: 3px 10px; font-size: 12px; font-size: 1.2rem; background-color: #eeeeee; border-radius: 3px; color: #7b7b7b; text-transform: uppercase; } .entry-header .post-format-link:hover, .format-status .entry-header .post-format-link:hover { background-color: #d54e21; color: #ffffff; } /** * Format: Chat */ .chat-transcript { margin: 25px 0; font-family: Monaco, Consolas, "Courier New", monospace; font-size: 14px; font-size: 1.4rem; font-weight: normal; line-height: 1.8; } .chat-row { margin-bottom: 10px; } /* The name of the soeaker */ .chat-author { color: #000; } .chat-author cite { font-size: 12px; font-size: 1.2rem; font-style: normal; font-weight: bold; text-transform: uppercase; text-decoration: underline; } .chat-speaker-1 .chat-author { color: #d54e21; } .chat-speaker-2 .chat-author { color: #0058b4; } .chat-speaker-3 .chat-author { color: #7a43b6; } .chat-speaker-4 .chat-author { color: #00802b; } .chat-speaker-5 .chat-author { color: #ea0863; } .chat-speaker-6 .chat-author { color: #9d261d; } /* The speaker text */ .chat-text { padding-left: 25px; } .chat-text p { margin-top: 10px; margin-bottom: 0; } .no-speaker .chat-text, .chat-speaker-0 .chat-text { padding-left: 0; color: #696969; } /** * Format: Status */ .format-status .entry-header { position: relative; margin-bottom: 25px; } .format-status .entry-header h1 { display: inline-block; margin: 0; font-size: 16px; font-size: 1.6rem; font-weight: normal; } .format-status .entry-header h2 { margin: 0; font-size: 13px; font-size: 1.3rem; font-weight: normal; } .format-status .entry-header a { color: #555555; } .format-status .entry-header a:hover { color: #d54e21; } /** * Format: Quote */ .format-quote .entry-meta { position: relative; z-index: 10; } /** * Format: Link */ .format-link .entry-title:hover .meta-nav { margin-left: 5px; -webkit-transition: margin-left 200ms ease-in-out; -moz-transition: margin-left 200ms ease-in-out; -o-transition: margin-left 200ms ease-in-out; transition: margin-left 200ms ease-in-out; } /** * Format: video */ .format-video .entry-header { margin-bottom: 15px; } /** * Format: Gallery */ .image-count { font-size: 15px; font-size: 1.5rem; font-style: italic; color: #999999; } /** * Format: Image */ .format-image .entry-meta { padding: 25px; font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 14px; font-size: 1.4rem; font-weight: normal; line-height: 2; background: #e0e6e8; border-radius: 3px; color: #555555; } .format-image .entry-meta .entry-meta-col { display: inline-block; float: left; width: 40%; } .format-image .entry-meta .entry-meta-col + .entry-meta-col { float: none; width: 60%; } .format-image .entry-meta .comments-link, .format-image .entry-meta .edit, .format-image .entry-meta .category { display: block; } /* ============================================================================= Components: Author box ========================================================================== */ .author-profile { background-color: #f2f7fc; border: double #c5d2d8; border-width: 4px 0; margin: 25px 0; padding: 10px 25px; } .author-profile .author-name { font-size: 18px; font-size: 1.8rem; } .author-profile .twitter-link, .loop-meta .twitter-link { text-align: right; } .author-profile .twitter-link a, .loop-meta .twitter-link a { padding-left: 23px; font-size: 14px; font-size: 1.4rem; background: url(images/twitter.png) no-repeat left bottom; } /* ============================================================================= Components: Loop meta ========================================================================== */ .loop-meta { background-color: #ffffdf; border: double #eedbbb; border-width: 4px 0; margin: 0 0 40px; padding: 10px 25px; *zoom: 1; } .loop-meta:before, .loop-meta:after { content: ""; display: table; } .loop-meta:after { clear: both; } .loop-meta-home { padding: 0 0 4px; border: none; margin: 0; background: url(images/content-orange-line.png) repeat-x left bottom; } .paged .loop-meta-home { margin-bottom: 25px; } .loop-title { font-size: 22px; font-size: 2.2rem; } .loop-title span { font-weight: normal; color: #d54e21; } /* ============================================================================= Components: Recent Posts ========================================================================== */ .recent-post { float: left; width: 220px; margin-right: 40px; -webkit-transition: opacity 250ms; -moz-transition: opacity 250ms; -o-transition: opacity 250ms; transition: opacity 250ms; /* Lower opacity on every column except the hovered */ } .recent-post:last-of-type { margin-right: 0; } .recent-post .entry-title { margin: 0; font-size: 16px; font-size: 1.6rem; letter-spacing: 0; word-wrap: break-word; } .recent-post .entry-header { margin: 7px 0; } .recent-post .recent-posts-meta { font-size: 12px; font-size: 1.2rem; font-style: italic; color: #8c8c8c; } .recent-post .thumbnail { float: none; max-height: 150px; margin: 0; } .recent-post .entry-summary { word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } #recent-posts:hover .recent-post { opacity: 0.75; } #recent-posts:hover .recent-post:hover { opacity: 1; } /* ============================================================================= Components: Headlines - Category lists ========================================================================== */ #headlines { margin: 40px 0; } #headlines .widget-title { margin-bottom: 15px; } .headline-list { float: left; width: 470px; margin: 0 60px 40px 0; } .headline-list:nth-child(2n) { margin-right: 0; } .headline-list:nth-child(2n+1) { clear: left; } .headline-list ol { list-style-type: none; padding: 0; margin: 0; } .headline-list li { padding: 25px 20px; border-bottom: 1px solid #e1e1e1; } .headline-list li:hover, .headline-list li:active { background-color: #f2f7fc; background-image: -webkit-linear-gradient(left, #f7fafc 50%, #f2f7fc); background-image: -moz-linear-gradient(left, #f7fafc 50%, #f2f7fc); background-image: -o-linear-gradient(left, #f7fafc 50%, #f2f7fc); background-image: linear-gradient(left, #f7fafc 50%, #f2f7fc); background-repeat: repeat-x; } .headline-list .entry-title { margin: 0; font-size: 18px; font-size: 1.8rem; } .headline-list .headline-meta { font-size: 14px; font-size: 1.4rem; font-style: italic; color: #8c8c8c; } .headline-list .thumbnail { float: left; margin: 0 25px 0 0; } /* ============================================================================= Layout: Attachment pages ========================================================================== */ .attachment-title { margin-top: 0; } .attachment-meta { margin-bottom: 25px; } .image-info { float: left; width: 35%; } .image-info dl { line-height: 40px; } .image-info dt { float: left; clear: left; width: 100%; padding: 5px; border-bottom: 1px solid #eeeeee; font-size: 16px; font-size: 1.6rem; text-align: left; } .image-info dt:hover, .image-info dt:active { background-color: #f2f7fc; background-image: -webkit-linear-gradient(left, #f7fafc 40%, #f2f7fc); background-image: -moz-linear-gradient(left, #f7fafc 40%, #f2f7fc); background-image: -o-linear-gradient(left, #f7fafc 40%, #f2f7fc); background-image: linear-gradient(left, #f7fafc 40%, #f2f7fc); background-repeat: repeat-x; } .image-info dd { float: right; padding-right: 5px; margin-top: -38px; font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 14px; font-size: 1.4rem; font-weight: normal; line-height: 1.8; text-align: right; } .image-gallery { float: right; width: 60%; } /* ============================================================================= Layout: 404 Error Page ========================================================================== */ .error-404 .hentry { font-size: 18px; font-size: 1.8rem; } .error-404 .hentry .entry-title { margin-bottom: 25px; } .not-found-widgets { margin-top: 40px; } .not-found-widgets .widget { float: left; width: 306px; margin: 0 40px 25px 0; } .not-found-widgets .widget:nth-of-type(3n) { margin-right: 0; } /* ============================================================================= Components: Pagination ========================================================================== */ .pagination { margin: 40px 0; } .pagination a, .pagination > span { display: inline-block; padding: 13px 14px 12px; margin-right: 2px; line-height: normal; background-color: #eeeeee; box-shadow: 0 2px 0 #c8c8c8; border-radius: 3px; color: #484848; text-shadow: 0 1px 0 #ffffff; -webkit-transition: all 150ms ease; -moz-transition: all 150ms ease; -o-transition: all 150ms ease; transition: all 150ms ease; } .pagination a:hover { background-color: #ffc768; box-shadow: 0 2px 0 #f89406; color: #511d0c; text-shadow: 0 1px 0 #ffedce; } .pagination a:active { box-shadow: 0 2px 0 #f89406, inset 2px 2px 8px rgba(0, 0, 0, 0.3); } .pagination .current { background-color: #4d4d4d; box-shadow: 0 2px 0 #000000; color: #ffffff; text-shadow: 0 -1px 0 #000000; } /* Prev and next post pagination */ .post-pagination a { max-width: 49%; } .post-pagination a[rel="prev"] { float: left; } .post-pagination a[rel="next"] { float: right; } /* ============================================================================= Components: Widgets ========================================================================== */ .widget { margin-bottom: 25px; word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } /** * Calendar */ #wp-calendar th, #wp-calendar td { font-size: 14px; font-size: 1.4rem; padding: 4px; text-align: center; } .layout-3c-c #wp-calendar th, .layout-3c-c #wp-calendar td, .layout-3c-l #wp-calendar th, .layout-3c-l #wp-calendar td, .layout-3c-r #wp-calendar th, .layout-3c-r #wp-calendar td { padding: 2px; } /** * Related Posts widget */ /* Related Posts with thumbnails turned on */ .related-posts .with-thumbnails { list-style-type: none; padding: 0; margin: 0; margin-left: 20px; } #sidebar-after-singular .related-posts .with-thumbnails, #sidebar-after-single .related-posts .with-thumbnails { margin-left: 0; } .related-posts .with-thumbnails .related-post { float: left; width: 110px; height: 110px; border: 1px solid #e6e6e6; margin: 0 25px 25px 0; background: #ffffff; border-radius: 3px; } .related-posts .with-thumbnails .related-post:hover { background: #ffc768; border-color: #f89406; box-shadow: 0 2px 0 #f89406; color: #511d0c; text-shadow: 0 1px 0 #ffedce; } .related-posts .with-thumbnails .related-post:nth-of-type(5n) { margin-right: 0; } .related-posts .with-thumbnails .related-post > a { display: block; overflow: hidden; width: 100%; height: 100%; padding-top: 4px; text-align: center; word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; } .related-posts .with-thumbnails .related-post > a:hover { color: #511d0c; } .related-posts .with-thumbnails .related-post img { box-shadow: none; } .related-posts .with-thumbnails .related-post span { font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 13px; font-size: 1.3rem; font-weight: normal; line-height: 1.8; } /* ============================================================================= Layout: Comments ========================================================================== */ #comments { margin-top: 40px; } #comments-number { background-color: #ffffdf; border: double #eedbbb; border-width: 4px 0; margin: 0 0 40px; padding: 10px 25px; } .comment-list, .comment-list .children { list-style-type: none; padding: 0; margin: 0; } .comment { border-bottom: 4px double #eeeeee; } .comment .comment-wrapper { padding: 25px; } .comment .comment-meta { font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 13px; font-size: 1.3rem; font-weight: normal; line-height: 25px; color: #999999; } .comment .comment-meta a { color: #555555; } .comment .comment-meta a:hover { color: #d54e21; } .comment .comment-meta .comment-reply-link { font-weight: bold; } .comment .comment-author { display: block; font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 16px; font-size: 1.6rem; font-weight: bold; line-height: 25px; color: #555555; } .comment .comment-author cite { font-style: normal; } /* Comment background colours */ .comment .even { background-color: #ffffff; } .comment .odd { background-color: #ffffe9; } .comment .bypostauthor { background-color: #f2f7fc; } /* Child comments */ .comment-list .children { margin-left: 40px; } .comment-list .children .comment { border-top: 1px solid #eeeeee; border-bottom: none; } .comment-list .children .depth-2 { border-left: 3px solid #04648d; } .comment-list .children .depth-3 { border-left: 3px solid #ce3000; } .comment-list .children .depth-4 { border-left: 3px solid #008a2e; } .comment-list .children .depth-5 { border-left: 3px solid #ea0863; } /* ============================================================================= Layout: Forms ========================================================================== */ /** * Define consistent border, margin, and padding. */ fieldset { padding: 0.35em 0.625em 0.75em; border: 1px solid #c0c0c0; margin: 0 2px; } /** * 1. Corrects color not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * 1. Corrects font family not being inherited in all browsers. * 2. Corrects font size not being inherited in all browsers. * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /** * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Corrects inability to style clickable `input` types in iOS. * 3. Improves usability and consistency of cursor style between image-type * `input` and others. */ button, html [type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], input[disabled] { cursor: default; } /** * 1. Addresses box sizing set to `content-box` in IE 8/9. * 2. Removes excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ } input[type="search"], input[type="color"] { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /** * Removes inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Removes inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Removes default vertical scrollbar in IE 8/9. * 2. Improves readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /** * Set the font for the form fields */ label, input, button, select, textarea { font-size: 15px; font-size: 1.5rem; font-weight: normal; line-height: normal; } input, button, select, textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } /** * Inputs */ input, select, textarea { display: inline-block; padding: 8px 6px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); color: #555555; -webkit-transition: all 150ms ease; -moz-transition: all 150ms ease; -o-transition: all 150ms ease; transition: all 150ms ease; } input:hover, select:hover, textarea:hover { border-color: #999999; } input:focus, select:focus, textarea:focus { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(82, 168, 236, 0.5); border-color: rgba(82, 168, 236, 0.8); outline: 0; outline: thin dotted \9; } select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .input-mini { width: 60px; } .input-small { width: 90px; } .input-medium { width: 150px; } .input-large { width: 210px; } .input-xlarge { width: 270px; } .input-xxlarge { width: 100%; } /** * Disabled and read-only inputs */ input[disabled], button[disabled], select[disabled], textarea[disabled], input[readonly], button[readonly], select[readonly], textarea[readonly] { background: #eeeeee !important; cursor: not-allowed; } input[disabled]:active, button[disabled]:active, select[disabled]:active, textarea[disabled]:active, input[readonly]:active, button[readonly]:active, select[readonly]:active, textarea[readonly]:active { box-shadow: none; } input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] { background-color: transparent; } /** * Select fields */ select { min-width: 180px; } /** * Labels */ label { display: block; margin-bottom: 5px; font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 16px; font-size: 1.6rem; font-weight: normal; line-height: 1.8; cursor: pointer; } /** * Buttons */ .btn, button, input[type="submit"], input[type="reset"], input[type="button"] { background-color: #fafafa; background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4 100%); background-image: -moz-linear-gradient(top, #fefefe, #f4f4f4 100%); background-image: -o-linear-gradient(top, #fefefe, #f4f4f4 100%); background-image: linear-gradient(top, #fefefe, #f4f4f4 100%); background-repeat: repeat-x; border: 1px solid; border-color: #e0e0e0 #e0e0e0 #c1c1c1; color: #333333; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.05); border-radius: 3px; font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif; font-size: 16px; font-size: 1.6rem; font-weight: bold; line-height: 1.8; padding: 4px 14px; } .btn:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { background-color: #f0f0f0; background-image: -webkit-linear-gradient(top, #f6f6f6, #e7e7e7 100%); background-image: -moz-linear-gradient(top, #f6f6f6, #e7e7e7 100%); background-image: -o-linear-gradient(top, #f6f6f6, #e7e7e7 100%); background-image: linear-gradient(top, #f6f6f6, #e7e7e7 100%); border-color: #c1c1c1 #c1c1c1 #a8a8a8; color: #333333; -webkit-transition: background-position 100ms linear; -moz-transition: background-position 100ms linear; -o-transition: background-position 100ms linear; transition: background-position 100ms linear; } .btn:active, button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .btn-large { padding: 9px 16px; font-size: 18px; font-size: 1.8rem; line-height: normal; border-radius: 5px; } .btn-small { padding: 4px 9px; font-size: 14px; font-size: 1.4rem; } .btn-mini { padding: 3px 7px; font-size: 13px; font-size: 1.3rem; font-weight: normal; } /* Button colours */ html .btn-primary { background-color: #006dcc; background-image: -webkit-linear-gradient(top, #0088cc, #0044cc 100%); background-image: -moz-linear-gradient(top, #0088cc, #0044cc 100%); background-image: -o-linear-gradient(top, #0088cc, #0044cc 100%); background-image: linear-gradient(top, #0088cc, #0044cc 100%); background-repeat: repeat-x; border: 1px solid; border-color: #0036a3 #0036a3 #002266; color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } html .btn-primary:hover { background-color: #0063b9; background-image: -webkit-linear-gradient(top, #007ebd, #003bb3 100%); background-image: -moz-linear-gradient(top, #007ebd, #003bb3 100%); background-image: -o-linear-gradient(top, #007ebd, #003bb3 100%); background-image: linear-gradient(top, #007ebd, #003bb3 100%); border-color: #002266 #002266 #001133; color: #ffffff; -webkit-transition: background-position 100ms linear; -moz-transition: background-position 100ms linear; -o-transition: background-position 100ms linear; transition: background-position 100ms linear; } html .btn-primary:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } html .btn-warning { background-color: #f8941c; background-image: -webkit-linear-gradient(top, #faa51a, #f47a20 100%); background-image: -moz-linear-gradient(top, #faa51a, #f47a20 100%); background-image: -o-linear-gradient(top, #faa51a, #f47a20 100%); background-image: linear-gradient(top, #faa51a, #f47a20 100%); background-repeat: repeat-x; border: 1px solid; border-color: #e0660b #e0660b #a64b08; color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } html .btn-warning:hover { background-color: #f58b0b; background-image: -webkit-linear-gradient(top, #fa9f0b, #ef6c0c 100%); background-image: -moz-linear-gradient(top, #fa9f0b, #ef6c0c 100%); background-image: -o-linear-gradient(top, #fa9f0b, #ef6c0c 100%); background-image: linear-gradient(top, #fa9f0b, #ef6c0c 100%); border-color: #a64b08 #a64b08 #753506; color: #ffffff; -webkit-transition: background-position 100ms linear; -moz-transition: background-position 100ms linear; -o-transition: background-position 100ms linear; transition: background-position 100ms linear; } html .btn-warning:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } html .btn-danger { background-color: #da4f49; background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f 100%); background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f 100%); background-image: -o-linear-gradient(top, #ee5f5b, #bd362f 100%); background-image: linear-gradient(top, #ee5f5b, #bd362f 100%); background-repeat: repeat-x; border: 1px solid; border-color: #9c2d27 #9c2d27 #6b1f1b; color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } html .btn-danger:hover { background-color: #d1443f; background-image: -webkit-linear-gradient(top, #ed514d, #a9302a 100%); background-image: -moz-linear-gradient(top, #ed514d, #a9302a 100%); background-image: -o-linear-gradient(top, #ed514d, #a9302a 100%); background-image: linear-gradient(top, #ed514d, #a9302a 100%); border-color: #6b1f1b #6b1f1b #421311; color: #ffffff; -webkit-transition: background-position 100ms linear; -moz-transition: background-position 100ms linear; -o-transition: background-position 100ms linear; transition: background-position 100ms linear; } html .btn-danger:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } html .btn-success { background-color: #5bb75b; background-image: -webkit-linear-gradient(top, #62c462, #51a351 100%); background-image: -moz-linear-gradient(top, #62c462, #51a351 100%); background-image: -o-linear-gradient(top, #62c462, #51a351 100%); background-image: linear-gradient(top, #62c462, #51a351 100%); background-repeat: repeat-x; border: 1px solid; border-color: #438843 #438843 #2f5f2f; color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } html .btn-success:hover { background-color: #51ad51; background-image: -webkit-linear-gradient(top, #57c057, #499249 100%); background-image: -moz-linear-gradient(top, #57c057, #499249 100%); background-image: -o-linear-gradient(top, #57c057, #499249 100%); background-image: linear-gradient(top, #57c057, #499249 100%); border-color: #2f5f2f #2f5f2f #1e3d1e; color: #ffffff; -webkit-transition: background-position 100ms linear; -moz-transition: background-position 100ms linear; -o-transition: background-position 100ms linear; transition: background-position 100ms linear; } html .btn-success:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } html .btn-info { background-color: #49afcd; background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4 100%); background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4 100%); background-image: -o-linear-gradient(top, #5bc0de, #2f96b4 100%); background-image: linear-gradient(top, #5bc0de, #2f96b4 100%); background-repeat: repeat-x; border: 1px solid; border-color: #277b94 #277b94 #1a5363; color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } html .btn-info:hover { background-color: #40a6c4; background-image: -webkit-linear-gradient(top, #4ebbdb, #2a85a0 100%); background-image: -moz-linear-gradient(top, #4ebbdb, #2a85a0 100%); background-image: -o-linear-gradient(top, #4ebbdb, #2a85a0 100%); background-image: linear-gradient(top, #4ebbdb, #2a85a0 100%); border-color: #1a5363 #1a5363 #0f313b; color: #ffffff; -webkit-transition: background-position 100ms linear; -moz-transition: background-position 100ms linear; -o-transition: background-position 100ms linear; transition: background-position 100ms linear; } html .btn-info:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } html .btn-inverse { background-color: #363636; background-image: -webkit-linear-gradient(top, #444444, #222222 100%); background-image: -moz-linear-gradient(top, #444444, #222222 100%); background-image: -o-linear-gradient(top, #444444, #222222 100%); background-image: linear-gradient(top, #444444, #222222 100%); background-repeat: repeat-x; border: 1px solid; border-color: #0e0e0e #0e0e0e #000000; color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } html .btn-inverse:hover { background-color: #2d2d2d; background-image: -webkit-linear-gradient(top, #3c3c3c, #151515 100%); background-image: -moz-linear-gradient(top, #3c3c3c, #151515 100%); background-image: -o-linear-gradient(top, #3c3c3c, #151515 100%); background-image: linear-gradient(top, #3c3c3c, #151515 100%); border-color: #000000 #000000 #000000; color: #ffffff; -webkit-transition: background-position 100ms linear; -moz-transition: background-position 100ms linear; -o-transition: background-position 100ms linear; transition: background-position 100ms linear; } html .btn-inverse:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } html .btn-inverse:hover { background: #d54e21; border-color: #a93e1a; } /* ============================================================================= Layout: Comment form ========================================================================== */ #respond { padding: 25px; margin: 60px 0 0; background: #f2f7fc url(images/content-orange-line.png) repeat-x; color: #555555; } #respond .log-in-out { font-size: 18px; font-size: 1.8rem; text-align: center; } #reply-title { background-color: #ffffdf; border: double #eedbbb; border-width: 4px 0; margin: 0 0 40px; padding: 10px 25px; margin: -40px 0 25px; font-size: 26px; font-size: 2.6rem; letter-spacing: -1px; text-align: center; } #cancel-comment-reply-link { padding-left: 10px; font-size: 18px; font-size: 1.8rem; font-style: italic; font-weight: normal; } /* Comment form fields */ #commentform .form-author { float: left; width: 48%; } #commentform .form-email { float: right; width: 48%; } #commentform .form-url { clear: both; } #commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"], #commentform textarea { display: block; width: 100%; } #submit { background-color: #006dcc; background-image: -webkit-linear-gradient(top, #0088cc, #0044cc 100%); background-image: -moz-linear-gradient(top, #0088cc, #0044cc 100%); background-image: -o-linear-gradient(top, #0088cc, #0044cc 100%); background-image: linear-gradient(top, #0088cc, #0044cc 100%); background-repeat: repeat-x; border: 1px solid; border-color: #0036a3 #0036a3 #002266; color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } #submit:hover { background-color: #0063b9; background-image: -webkit-linear-gradient(top, #007ebd, #003bb3 100%); background-image: -moz-linear-gradient(top, #007ebd, #003bb3 100%); background-image: -o-linear-gradient(top, #007ebd, #003bb3 100%); background-image: linear-gradient(top, #007ebd, #003bb3 100%); border-color: #002266 #002266 #001133; color: #ffffff; -webkit-transition: background-position 100ms linear; -moz-transition: background-position 100ms linear; -o-transition: background-position 100ms linear; transition: background-position 100ms linear; } #submit:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } /* ============================================================================= Layout: Search form ========================================================================== */ .search-form label { display: inline-block; margin-right: 5px; } .search-form .search-text { padding-left: 27px; background: #ffffff url(images/search.png) no-repeat 5px center; } .search-form .search-text[results] { padding-left: 6px; background-image: none; } /* Search form in the topbar */ .main-navigation .search-form { padding: 0; } .main-navigation .search-form label { margin-right: 0; } .main-navigation .search-form .search-text { background-color: #555555; background-color: rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.3); border: 1px solid #000000; color: #ffffff; color: rgba(255, 255, 255, 0.8); } .main-navigation .search-form .search-text:-moz-placeholder { color: #b3b3b3; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); } .main-navigation .search-form .search-text::-webkit-input-placeholder { color: #b3b3b3; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); } .main-navigation .search-form .search-submit { padding: 3px 14px; margin-left: 5px; } @media screen and (max-width: 979px) { .main-navigation .search-form { float: none; padding: 20px; border: 1px solid #222222; border-width: 1px 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); } } @media screen and (min-width: 980px) { .main-navigation .search-form { position: absolute; top: 13px; right: 40px; } .main-navigation .search-form .search-submit { display: none; } } /* ============================================================================= Components: Message boxes ========================================================================== */ .note, .alert, .warning, .success, .download, .danger, .error, .info { padding: 25px; border: double #dadada; border-width: 4px 0; margin-bottom: 25px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #eeeeee; color: #222222; } .warning, .alert { background-color: #fef9c7; border-color: #fcdd4a; color: #3b3601; } .success, .download { background-color: #dff0d8; border-color: #54b646; color: #0d370d; } .danger, .error { background-color: #f2dede; border-color: #ce838f; color: #4b0706; } .info { background-color: #d9edf7; border-color: #049cdb; color: #0c3346; } .box-blue { background-color: #f2f7fc; border: double #c5d2d8; border-width: 4px 0; margin: 0 0 40px; padding: 25px; } .box-orange { background-color: #ffffdf; border: double #eedbbb; border-width: 4px 0; margin: 0 0 40px; padding: 25px; } /* ============================================================================= Components: Twitter share button ========================================================================== */ .facebook-share-button, .twitter-share-button { border: none; } /* Twitter button */ .twitter-share { display: inline-block; overflow: hidden; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-size: 1.2rem; font-weight: bold; line-height: 1.5; text-align: center; } .twitter-button { overflow: hidden; position: relative; float: left; width: 55px; height: 20px; background: url(images/tweet.png) no-repeat; text-indent: -999em; } .twitter-button:hover, .twitter-button:focus { background-position: 0 -20px; } .twitter-button:active { background-position: 0 -40px; } /* The Twitter button count */ .twitter-count { position: relative; float: left; min-width: 20px; padding: 0 4px; border: 1px solid #cee3f0; margin: 0 0 0 7px; border-radius: 2px; color: #2a7090; text-decoration: none; /* The count tooltip. Not displayed in IE < 8 */ } .twitter-count:hover, .twitter-count:focus, .twitter-count:active { border: 1px solid #9dc6e1; background: #e8f3f9; color: #30566d; text-shadow: 0 1px 0 #ffffff; } .twitter-count:before { content: ""; position: absolute; top: 50%; left: -5px; width: 5px; height: 9px; margin: -4px 0 0; background: url(images/tweet.png) no-repeat 0 -60px; } .twitter-count:hover:before, .twitter-count:focus:before, .twitter-count:active:before { background-position: -5px -60px; } /* Vertical Twitter button */ .twitter-button-size-vertical { position: relative; padding-top: 42px; } .twitter-button-size-vertical .twitter-count { position: absolute; top: 0; left: 9%; margin: 0; width: 45px; height: 34px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; font-size: 1.6rem; font-weight: bold; line-height: 34px; text-align: center; } .twitter-button-size-vertical .twitter-count:before { top: 100%; left: 48%; width: 9px; height: 5px; margin: 0 0 0 -4px; background-position: -10px -60px; } .twitter-button-size-vertical .twitter-count:hover:before, .twitter-button-size-vertical .twitter-count:focus:before, .twitter-button-size-vertical .twitter-count:active:before { background-position: -10px -65px; } /* ============================================================================= Components: Surprise! ========================================================================== */ .shake-it-baby { -webkit-animation: shake-it-baby 1s infinite; -moz-animation: shake-it-baby 1s infinite; animation: shake-it-baby 1s infinite; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } @-webkit-keyframes shake-it-baby { 0% { -webkit-transform: scale(1.1) skew(-2deg); } 10% { background-color: #ff0000; } 20% { background-color: #f300ff; } 30% { background-color: #f3ffba; } 40% { background-color: #00f9ff; } 50% { -webkit-transform: scale(1.15) skew(1deg); background-color: #08ff00; } 60% { background-color: #fff700; } 70% { background-color: #ff2a00; } 80% { background-color: #60a63a; } 90% { background-color: #0500ff; } 100% { -webkit-transform: scale(1) skew(0); background-color: #ffffff; } } @-moz-keyframes shake-it-baby { 0% { -moz-transform: scale(1.1) skew(-2deg); } 10% { background-color: #ff0000; } 20% { background-color: #f300ff; } 30% { background-color: #f3ffba; } 40% { background-color: #00f9ff; } 50% { -moz-transform: scale(1.15) skew(1deg); background-color: #08ff00; } 60% { background-color: #fff700; } 70% { background-color: #ff2a00; } 80% { background-color: #60a63a; } 90% { background-color: #0500ff; } 100% { -moz-transform: scale(1) skew(0); background-color: #ffffff; } } @keyframes shake-it-baby { 0% { transform: scale(1.1) skew(-2deg); } 10% { background-color: #ff0000; } 20% { background-color: #f300ff; } 30% { background-color: #f3ffba; } 40% { background-color: #00f9ff; } 50% { transform: scale(1.15) skew(1deg); background-color: #08ff00; } 60% { background-color: #fff700; } 70% { background-color: #ff2a00; } 80% { background-color: #60a63a; } 90% { background-color: #0500ff; } 100% { transform: scale(1) skew(0); background-color: #ffffff; } } /* ============================================================================= Misc: Internet Explorer styles ========================================================================== */ .oldie .main-navigation .sep, .oldie .sub-menu .sep { display: none !important; } .oldie .recent-post { margin-right: 15px; margin-left: 15px; } .oldie .headline-list { margin-right: 15px; margin-left: 15px; } /** * IE7 fixes */ .ie7 .secondary-navigation { position: relative; z-index: 100; } /* ============================================================================= Media Queries for smaller screens ========================================================================== */ /* ============================================================================= Media Queries: Max-width 1130px ========================================================================== */ @media screen and (max-width: 1130px) { /* Move the navigation arrows when the screen is smaller */ .flex-direction-nav .flex-prev, .flex-direction-nav .flex-next { top: auto; bottom: 15px; width: 58px; height: 58px; } .flex-direction-nav .flex-prev:after, .flex-direction-nav .flex-next:after { font-size: 48px; line-height: 48px; } .flex-direction-nav .flex-prev { left: 40px; opacity: 1; } .flex-direction-nav .flex-next { right: 40px; opacity: 1; } } /* ============================================================================= Media Queries: Max-width 1080px ========================================================================== */ @media screen and (max-width: 1080px) { #main { width: 65%; } #sidebar-primary, #sidebar-secondary { width: 32%; } .main-navigation { width: 100%; } /* Remove box-shadow and border-radius */ #content, #footer { border-radius: 0; box-shadow: none; } /* Remove the negative margin and box-shadow */ .section-title { padding-left: 25px; margin-left: 0; box-shadow: none; } /* Fluid width on the Recent Posts and Headlines lists */ .recent-post { width: 23%; margin-right: 2%; } .headline-list { width: 48%; margin-right: 2%; } /* Prevent the sidebars on 3 column layouts from moving underneath the content */ .layout-3c-c #main, .layout-3c-r #main, .layout-3c-l #main { float: none; width: 50%; } .layout-3c-c #sidebar-primary, .layout-3c-r #sidebar-primary, .layout-3c-l #sidebar-primary, .layout-3c-c #sidebar-secondary, .layout-3c-r #sidebar-secondary, .layout-3c-l #sidebar-secondary { width: 20%; } .layout-3c-c #sidebar-primary { margin-left: -740px; } .layout-3c-l #sidebar-primary, .layout-3c-l #sidebar-secondary { margin-right: 1%; } .layout-3c-l #sidebar-secondary { float: right; } .layout-3c-r #sidebar-secondary { margin-left: 2%; } } /* ============================================================================= Media Queries: Max-width 980px ========================================================================== */ @media screen and (max-width: 980px) { /* Switch padding from 40px to 25px */ #content, #footer { padding-left: 25px; padding-right: 25px; } #site-title { margin-left: 25px; } #site-description { margin-right: 25px; } /* Turn 3 column layouts into a layout with a full width #main and two 50% width sidebars underneath */ .layout-3c-c #main, .layout-3c-r #main, .layout-3c-l #main { clear: both; width: 100%; margin-left: 0; margin-right: 0; } .layout-3c-c #sidebar-primary, .layout-3c-r #sidebar-primary, .layout-3c-l #sidebar-primary, .layout-3c-c #sidebar-secondary, .layout-3c-r #sidebar-secondary, .layout-3c-l #sidebar-secondary { clear: none; width: 48%; margin-left: 0; margin-right: 0; } .layout-3c-c #sidebar-secondary, .layout-3c-r #sidebar-secondary, .layout-3c-l #sidebar-secondary { float: right; } /* Show Recent Posts in one column */ .recent-post { *zoom: 1; float: none; width: 100%; padding: 25px 0; border-bottom: 1px solid #e1e1e1; margin-right: 0; opacity: 1 !important; } .recent-post:before, .recent-post:after { content: ""; display: table; } .recent-post:after { clear: both; } .recent-post:hover, .recent-post:active { background-color: #f7fafc; background-image: -webkit-linear-gradient(left, #f2f7fc 50%, #f7fafc); background-image: -moz-linear-gradient(left, #f2f7fc 50%, #f7fafc); background-image: -o-linear-gradient(left, #f2f7fc 50%, #f7fafc); background-image: linear-gradient(left, #f2f7fc 50%, #f7fafc); background-repeat: repeat-x; } .recent-post .entry-title { margin: 0; } .recent-post .thumbnail { float: left; margin: 0 25px 0 0; } .section-title { margin-bottom: 25px; } /* Attachment meta */ .image-info, .image-gallery { float: none; width: 100%; } .image-info { margin-bottom: 25px; } } /* ============================================================================= Media Queries: Max-width 768px ========================================================================== */ @media screen and (max-width: 768px) { /* Make the main content full width and move the sidebars underneath it */ #main { float: none; width: 100%; } #sidebar-primary { float: left; width: 48%; } #sidebar-secondary { width: 48%; float: right; } /* Make the slider smaller */ .slide .thumbnail { max-width: 55%; margin-right: 25px; } .slide .slider-video { display: none; } .flex-control-nav { margin-top: 40px; } /* Make the pagination bigger */ .pagination a, .pagination > span { padding: 18px 22px 17px; margin-bottom: 10px; } /* If there's 3 columns of footer widgets, turn them into 2 columns */ #sidebar-subsidiary.three-col .widget-area { width: 48%; margin-right: 4%; } #sidebar-subsidiary.three-col .widget-area + .widget-area { margin-right: 0; } /* Make the Category Headlines list smaller */ .headline-list .entry-title { font-size: 16px; font-size: 1.6rem; } .headline-list .headline-meta { font-size: 14px; font-size: 1.4rem; } .headline-list .thumbnail { max-width: 50px; } } /* ============================================================================= Media Queries: Max-width 620px ========================================================================== */ @media screen and (max-width: 620px) { /* Turn the header and description into a single column */ #branding { text-align: center; } #site-title, #site-description { float: none; } #site-description { margin: 20px 0 0; } .flexbox #branding hgroup { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } .flexbox #site-title, .flexbox #site-description { margin: 0 auto 20px; } /* Hide the slider */ #slider { display: none; } /* Make the Recent Posts list smaller */ .recent-post .entry-title { font-size: 18px; font-size: 1.8rem; } .recent-post .recent-posts-meta { font-size: 12px; font-size: 1.2rem; } .recent-post .thumbnail { max-width: 150px; margin-bottom: 10px; } .recent-post .entry-summary { font-size: 14px; font-size: 1.4rem; } /* Make the Category Headlines list two columns */ .headline-list { width: 100%; margin-right: 0; } /* Make the widget areas full width */ .widget-area { width: 100% !important; float: none !important; } /* Gallery on attachment pages */ .image-gallery .gallery-item { width: 25%; } /* Make the comment form inputs one column */ #commentform .form-author, #commentform .form-email { float: none; width: 100%; } } /* ============================================================================= Media Queries: Max-width 480px ========================================================================== */ @media screen and (max-width: 480px) { /* Make sure the post format label and post title don't collide */ .entry-header .post-format-link { top: -20px; } /* Hide the Recent Posts thumbnails */ .recent-post .thumbnail { display: none; } /* Gallery on attachment pages */ .image-gallery .gallery-item { width: 33%; } } /* ============================================================================= Print styles ========================================================================== */ @media print { * { background: transparent !important; border-color: #000 !important; border-radius: 0 !important; color: #000 !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } .entry-title { font-size: 18pt; margin: 0; } /** * Insert page breaks before the sidebar and comments */ #sidebar-primary, #comments { page-break-before: always; } /** * Show links */ a, a:visited { text-decoration: underline; } .entry-content a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /** * Don't show links for javascript/internal links */ a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /** * Code and quotes */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } blockquote { font-style: italic; padding: 5px; } blockquote blockquote { margin: 5px; } /** * Tables, images and lists */ thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } li { line-height: 1.3; } /** * Hide elements */ object, embed, video, audio, iframe[src*="youtube"], blockquote:before, blockquote p:first-of-type:after, #topbar, #slider, #respond, #wpadminbar, #site-title img, .pagination, .search, .loop-meta-home, .post-format-link, .twitter-link, .comment .permalink, .comment-edit-link, .comment-reply-link, .twitter-share, .fb-like, .delicious-share-button, .digg-share-button, [id*="___plusone_"], .more-link, .comments-link, .post-edit-link { display: none !important; } .singular-attachment .loop-nav, .singular-attachment .byline, .singular-attachment .image-gallery, .singular-attachment .related-posts { display: none; } .singular-attachment .image-info { width: 100%; float: none; } .singular-attachment .image-info h3 { margin: 0; } /** * Change layout */ #wrapper { clear: both !important; display: block !important; float: none !important; max-width: 100%; position: relative !important; } #main, #sidebar-primary, #sidebar-secondary { float: none; width: 100%; } .layout-3c-c #main, .layout-3c-r #main, .layout-3c-l #main { clear: both; width: 100%; margin-left: 0; margin-right: 0; } .layout-3c-c #sidebar-primary, .layout-3c-r #sidebar-primary, .layout-3c-l #sidebar-primary, .layout-3c-c #sidebar-secondary, .layout-3c-r #sidebar-secondary, .layout-3c-l #sidebar-secondary { clear: none; width: 48%; margin-left: 0; margin-right: 0; } .layout-3c-c #sidebar-secondary, .layout-3c-r #sidebar-secondary, .layout-3c-l #sidebar-secondary { float: right; } /** * Remove margins, paddings and borders */ #content, #footer, #headlines, .author-profile, .singular .hentry, .widget-title, .section-title, .breadcrumbs, blockquote cite, blockquote span { margin: 0; } #branding, #content, #footer, .widget-title, .section-title, .hentry, .breadcrumbs, .author-profile { padding: 0; } .note, .alert, .warning, .success, .download, .danger, .error, .info, .hentry, .widget-title, .breadcrumbs, .pull { border: 0; } .note, .alert, .warning, .success, .download, .danger, .error, .info { padding: 5px 20px; } /** * Site title */ #site-title a:after { content: attr(title); color: #000; font-size: 46px; letter-spacing: -2px; } }