/*! * 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, colors and fonts – or use a child theme as the theme is very child theme friendly. * Version: 1.6.2 * Author: Jesper Johansen * 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, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready * Github Theme URI: https://github.com/jayj/Cakifo * Support URI: http://themehybrid.com/support/forum/cakifo * 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-2014 Jesper Johansen. 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 * https://github.com/jayj/Cakifo/wiki/Child-themes * */ /* ============================================================================= HTML5 display definitions ========================================================================= */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [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; font-family: Georgia, Cambria, "Bitstream Charter", serif; font-size: 16px; font-size: 1.6rem; font-weight: normal; line-height: 1.6; background-color: #e3ecf2; color: #555555; } /** * Set site width and center the site. */ #wrapper { width: 100%; max-width: 1080px; margin: 0 auto; } /** * Remove background color if a user removes the color */ .custom-background-empty { background-color: #fff; } .custom-background-empty .site-content, .custom-background-empty .site-footer { -webkit-box-shadow: none; box-shadow: none; } /* ============================================================================= Links ========================================================================== */ a { color: #3083aa; text-decoration: none; } a:hover { color: #d54e21; } a:focus { outline: thin dotted #333333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } a:hover, a:active { outline: 0; } /* ============================================================================= Typography: Headings ========================================================================== */ h1, h2, h3, h4, h5, h6 { text-rendering: optimizelegibility; } h1 { margin: 0.67em 0; } h1, h2 { font-size: 26px; font-size: 2.6rem; letter-spacing: -1px; } h3 { font-size: 23px; font-size: 2.3rem; color: #d54e21; } h4 { font-size: 21px; font-size: 2.1rem; } h5 { font-size: 20px; font-size: 2rem; } h6 { font-size: 19px; font-size: 1.9rem; font-weight: normal; line-height: 1.6; } /* Entry titles */ .entry-title { font-size: 30px; font-size: 3rem; margin-bottom: 0; word-wrap: break-word; } /* h3 headings in post content */ .entry-content h3 { background: #f5f5f5; padding: 8px 10px; } /* Widget titles */ .widget-title { background-color: #f4f4f4; background-image: -webkit-linear-gradient(top, #f9f9f9, #ececec 100%); background-image: linear-gradient(to bottom, #f9f9f9, #ececec 100%); border: 1px solid #e7e7e7; border-bottom-color: #dfdfdf; border-radius: 50px 30px; color: #333333; font-size: 18px; font-size: 1.8rem; margin: 0 0 25px; padding: 8px 20px; text-shadow: 0 1px 0 #fff; letter-spacing: -1px; } .widget-title a { color: #333333; } .widget-title a:hover { color: #d54e21; } /* Section titles */ .section-title { background-color: #ce4b20; background-image: -webkit-linear-gradient(top, #d54e21, #c3481e 100%); background-image: linear-gradient(to bottom, #d54e21, #c3481e 100%); border-radius: 30px; color: #fff; font-size: 24px; font-size: 2.4rem; margin: 0 0 40px -60px; padding: 10px 60px; text-shadow: 1px 1px 0 #973717; 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 #a93e1a; } .section-title a { display: block; color: #fff; } .section-title a:hover { color: #eeeeee; } /* ============================================================================= Typography: Lists ========================================================================== */ li { line-height: 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: 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.6; } /** * Inline code */ code { color: #009933; } /** * Blocks of code */ pre { overflow: auto; padding: 25px; background: #424242; border-radius: 5px; color: #fff; white-space: pre-wrap; } pre code { color: #fff; } /* ============================================================================= Typography: HTML elements ========================================================================== */ abbr[title] { border-bottom: 1px dotted; cursor: help; } acronym { border-bottom: 1px dashed #555555; text-transform: uppercase; cursor: help; } b, strong { font-weight: bold; } dfn { font-style: italic; } hr { display: block; clear: both; border: 0; height: 0; padding: 0; margin: 25px 0; border-bottom: 4px double #eeeeee; } mark, ins { background: #fff9c0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ============================================================================= Typography: Quotes ========================================================================== */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /** * Block quotes */ blockquote { font-style: italic; margin: 0 40px 25px; } blockquote p { color: #8c8c8c; font-size: 19px; font-size: 1.9rem; } blockquote em, blockquote i, blockquote cite { font-style: normal; } blockquote.aligncenter, blockquote.alignleft, blockquote.alignright { border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; width: 50%; } blockquote.alignleft { margin: 10px 40px 10px 0; } blockquote.alignright { margin: 10px 0 10px 40px; text-align: right; } blockquote.aligncenter { width: 100%; margin-left: 0; text-align: center; } /* Quote attributions */ blockquote cite, .quote-caption { display: block; font-size: 16px; font-size: 1.6rem; font-weight: 400; line-height: 1.6; font-style: normal; margin-top: 25px; } blockquote cite:before, .quote-caption:before { content: '\2014 \00A0'; } blockquote + .quote-caption { margin-left: 40px; } 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: #f5f5f5; } thead th { background: #f2f7fc; } th { font-weight: bold; } tfoot td { background: #f9f9f9; box-shadow: inset 0 1px 1px 0 #eeeeee; color: #666666; font-size: 13px; font-size: 1.3rem; } caption { margin-bottom: 10px; } .site-content, .site-footer { position: relative; padding: 40px 40px 40px; background-color: #fff; border-top: 5px solid #ffc768; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); } .site-main { position: relative; width: 650px; float: left; } .sidebar-primary, .sidebar-secondary { width: 310px; float: right; } .sidebar-secondary { clear: right; } /* ============================================================================= Layout: Header ========================================================================== */ .site-header { padding: 60px 0 50px; } .site-title { float: left; margin: 0 0 0 40px; font-size: 46px; font-size: 4.6rem; font-weight: normal; line-height: 1.6; text-shadow: 0 1px 0 #fff; letter-spacing: -2px; } .site-title img { max-width: 100%; width: auto\9; height: auto; vertical-align: middle; } .site-title a { color: #3083aa; } .site-title a:hover { color: #d54e21; } .site-description { float: right; margin: 25px 40px 0 0; padding: 2px 8px; font-size: 21px; font-size: 2.1rem; font-weight: normal; background-color: #fff; 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 .site-header .home-link { display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } .flexbox .site-title { float: none; margin: auto auto auto 40px; } .flexbox .site-description { float: none; margin: auto 40px auto auto; } /* ============================================================================= Layout: Footer ========================================================================== */ .site-footer { position: relative; margin: 40px 0; background-color: #fff; text-shadow: 1px 1px 0 #fff; } .site-footer .copyright, .site-footer .credit { width: 50%; margin: 0; } .site-footer .copyright { float: left; } .site-footer .credit, .site-footer .column-last { 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 */ .layout-1c .site-main, body.page-template-template-front-page .site-main { float: none; width: 100%; } /* Make sure that the layout on the front page doesn't get overwritten in the Theme Customizer preview */ body.page-template-template-front-page .site-main { margin: 0; } /** * Two columns */ .layout-2c-r .site-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 .site-main, .layout-3c-r .site-main { width: 500px; } /* Three columns, center */ .layout-3c-c .site-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 .site-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 .site-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: Topbar ========================================================================== */ .topbar { position: relative; width: 100%; min-height: 60px; background: #262626 url(images/topbar.png) repeat; color: #cccccc; } .topbar:after { content: ""; position: absolute; bottom: -11px; left: 0; width: 100%; height: 10px; background: url(images/topbar-bottom.png) repeat-x; } /* ============================================================================= Layout: Primary navigation ========================================================================== */ .main-navigation { position: relative; width: 1080px; padding: 0 40px 0 25px; margin: 0 auto; *zoom: 1; /* Level 2 */ } .main-navigation:before, .main-navigation:after { content: ""; display: table; } .main-navigation:after { clear: both; } .main-navigation .menu, .main-navigation .menu ul { list-style-type: none; padding: 0; margin: 0; } .main-navigation .menu-item { position: relative; float: left; } .main-navigation .menu-item > a { display: inline-block; padding: 20px 15px; color: #cccccc; font-size: 15px; font-size: 1.5rem; font-weight: bold; line-height: normal; text-shadow: 1px 1px 0 #1a1a1a; -webkit-transition: all 150ms; transition: all 150ms; } .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-color: #454545; 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: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 100%); color: #f0f0f0; } .main-navigation .menu-item > a:active { background: #3a3a3a; } .main-navigation .sep { color: #999999; } .main-navigation .sub-menu .sep, .main-navigation .menu-item:last-of-type .sep { display: none; } .main-navigation .sub-menu { display: none; position: absolute; z-index: 500; top: 100%; left: 0; min-width: 200px; background: #262626 url(images/topbar.png) repeat; border-radius: 0 0 5px 5px; box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3); } .main-navigation .sub-menu .menu-item { float: none; } .main-navigation .sub-menu .menu-item > a { width: 100%; border-top: 1px solid #404040; border-bottom: 1px solid #0c0c0c; } .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%; border-radius: 0 5px 5px 0; } .main-navigation .menu-item:hover > .sub-menu { display: block; } .main-navigation .menu-toggle { display: none; background-color: #4f4f4f; background-image: -webkit-linear-gradient(top, #555555, #464646 100%); background-image: linear-gradient(to bottom, #555555, #464646 100%); border-bottom: 1px solid #555555; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); color: #ffffff; width: 100%; padding: 15px 0; margin: 0; font-size: 21px; font-size: 2.1rem; font-weight: bold; line-height: 1.6; text-align: center; cursor: pointer; } .main-navigation .menu-toggle:hover { background: #333333; color: #fff; } .main-navigation .menu-toggle:active, .main-navigation .menu-toggle:focus { background: #222222; } .secondary-navigation { background-color: rgba(255, 255, 255, 0.32); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5) 100%); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5) 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 .menu-item > a { display: inline-block; padding: 14px 20px; color: #494949; text-transform: uppercase; } .secondary-navigation .menu-item > a:hover { background-color: #fff; 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; min-width: 200px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); } .secondary-navigation .sub-menu .menu-item { float: none; } .secondary-navigation .sub-menu a { display: block; padding: 10px 12px; border-bottom: 1px solid #4d4d4d; font-size: 14px; font-size: 1.4rem; background: #222222; color: #eeeeee; text-transform: none; white-space: normal; } .secondary-navigation .sub-menu a:hover { background: #010101; } .secondary-navigation .sub-menu .menu-item:last-of-type > a { border-bottom: none; } .secondary-navigation .sub-menu .sub-menu { top: 0; left: 100%; } .secondary-navigation .menu-item:hover > ul { display: block; } .secondary-navigation .menu-toggle { display: none; background-color: #f8f8f8; background-image: -webkit-linear-gradient(top, #fcfcfc, #f2f2f2 100%); background-image: linear-gradient(to bottom, #fcfcfc, #f2f2f2 100%); border-bottom: 1px solid #fcfcfc; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); color: #464646; width: 100%; padding: 15px 0; margin: 0; font-size: 21px; font-size: 2.1rem; font-weight: bold; line-height: 1.6; text-align: center; cursor: pointer; } .secondary-navigation .menu-toggle:hover { background: #333333; color: #fff; } .secondary-navigation .menu-toggle:active, .secondary-navigation .menu-toggle:focus { background: #222222; } @media screen and (max-width: 979px) { .main-navigation, .secondary-navigation { padding: 0; /* Menu is toggled on */ } .main-navigation .menu-toggle, .secondary-navigation .menu-toggle { display: block; } .main-navigation .menu-list-container, .secondary-navigation .menu-list-container, .main-navigation .search-form, .secondary-navigation .search-form { display: none; } .main-navigation.toggled-on .menu-list-container, .secondary-navigation.toggled-on .menu-list-container, .main-navigation.toggled-on .search-form, .secondary-navigation.toggled-on .search-form { display: block; } .main-navigation .menu-list-container, .secondary-navigation .menu-list-container { padding: 40px; } .main-navigation .menu-item, .secondary-navigation .menu-item { float: none; } .main-navigation .menu-item > a, .secondary-navigation .menu-item > a { width: 100%; border-top: 1px solid; border-bottom: 1px solid; } .main-navigation .menu-item:first-of-type > a, .secondary-navigation .menu-item:first-of-type > a { border-top: none; } .main-navigation .menu-item:last-of-type > a, .secondary-navigation .menu-item:last-of-type > a { border-bottom: none; } .main-navigation .sep, .secondary-navigation .sep { display: none; } .main-navigation ul.sub-menu, .secondary-navigation ul.sub-menu { display: block; position: static; list-style-type: disc; box-shadow: none; margin-left: 40px; } .main-navigation .menu-item > a { border-top-color: #404040; border-bottom-color: #0c0c0c; } .secondary-navigation { background: #fff; } .secondary-navigation .menu-item > a { background: #fff; border-top: #fff; border-bottom-color: #e6e6e6; color: #494949; } .secondary-navigation .menu-item > a:hover { background-color: #e6e6e6; } } .main-navigation .search-form { float: right; margin-top: 10px; } .main-navigation .search-form label { margin: 0; } .main-navigation .search-form .search-field { margin-bottom: 0; background-color: #555555; background-color: rgba(255, 255, 255, 0.3); border: 1px solid #000; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.3); color: #fff; color: rgba(255, 255, 255, 0.8); } .main-navigation .search-form .search-field::-moz-placeholder { color: #bfbfbf; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); } .main-navigation .search-form .search-field:-ms-input-placeholder { color: #bfbfbf; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); } .main-navigation .search-form .search-field::-webkit-input-placeholder { color: #bfbfbf; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); } .main-navigation .search-form .search-submit { display: none; padding: 2px 14px; border-color: #000; margin-left: 5px; } @media screen and (max-width: 979px) { .main-navigation .search-form { float: none; padding: 25px 40px; margin-top: -25px; border: 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); } .main-navigation .search-form .search-submit { display: inline-block; } } /* No JS: show the menu */ .no-js .site-navigation .menu-list-container, .no-js .site-navigation .search-form { display: block; } .no-js .menu-toggle { display: none; } /* ============================================================================= Layout: Slider ========================================================================== */ .cakifo-slider { position: relative; background-color: #ffffdf; border: double #eeddbd; border-width: 0 0 4px; margin: -40px -40px 40px -40px; padding: 40px 40px 25px; } .flex-viewport { min-height: 200px; } /* Slider content */ .slide { display: none; -webkit-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: 25px auto 0 -40px; 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-color: #ffc768; border-radius: 50%; text-indent: -9999px; cursor: pointer; -webkit-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); -ms-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: #fff; 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; 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-size: 38px; font-size: 3.8rem; font-weight: bold; line-height: 41px; color: #555555; text-align: center; text-indent: 0; } .cakifo-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; word-wrap: break-word; } .singular .hentry { padding-bottom: 0; border-bottom: none; } .sticky { padding: 25px; background: #ffffdf; } .sticky .entry-title { margin-top: 0; } /** * Entry meta */ .byline, .entry-meta { font-size: 14px; font-size: 1.4rem; font-weight: normal; line-height: 2; color: #808080; clear: both; } .byline { margin-bottom: 15px; } .entry-header .byline { margin-top: 5px; } .singular .entry-meta { padding: 15px 0 0; border-top: 1px solid #eeeeee; margin: 25px 0; } .page-links { clear: both; } /** * Intro */ .intro-post { margin-bottom: 40px; } .intro-post .entry-content { font-size: 21px; font-size: 2.1rem; } .intro-post .post-edit-link { background-color: #eeeeee; border-radius: 3px; color: #6f6f6f; font-size: 12px; font-size: 1.2rem; padding: 3px 10px; text-transform: uppercase; position: absolute; top: 0; right: 25px; } .intro-post .post-edit-link[href]:hover, .intro-post .post-edit-link[href]:focus { background-color: #d54e21; color: #fff; } /* ============================================================================= Components: Breadcrumbs ========================================================================== */ .breadcrumbs { background: #f8f8f7; border-bottom: 1px solid #ecece9; border-radius: 5px; color: #555555; font-size: 14px; font-size: 1.4rem; font-weight: normal; line-height: 2; margin-bottom: 25px; padding: 12px 25px; word-wrap: break-word; } .breadcrumbs a { color: #333333; } .breadcrumbs a:hover { color: #d54e21; } .breadcrumbs .trail-browse { margin-right: 3px; } .breadcrumbs .sep { margin: 0 3px; } .breadcrumbs .trail-end { font-style: italic; } /* ============================================================================= Components: Author box ========================================================================== */ .author-profile { background-color: #f2f7fc; border: double #c6d1db; border-width: 4px 0; margin: 25px 0; padding: 0 25px 25px; } .author-profile .author-name { font-size: 18px; font-size: 1.8rem; } /* ============================================================================= Components: Loop meta ========================================================================== */ .loop-meta { background-color: #ffffdf; border: double #eeddbd; 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 { border-bottom: 5px solid #ffc768; } .loop-title { font-size: 23px; font-size: 2.3rem; } .loop-title span { font-weight: normal; color: #d54e21; } /* ============================================================================= 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: #494949; text-shadow: 0 1px 0 #fff; -webkit-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 #000; color: #fff; 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; } /* Hide pagination when Jetpack Infinite Scroll is active */ .infinite-scroll .loop-pagination { display: none; } /* ============================================================================= 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, .image-info dd { border-bottom: 1px solid #eeeeee; padding: 5px; } .image-info dt { float: left; clear: left; } .image-info dd { 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; } /* ============================================================================= Media: Embedded content ========================================================================== */ img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } /* ============================================================================= Media: Images ========================================================================== */ img { 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; box-shadow: none; } /* 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-size: 14px; font-size: 1.4rem; color: #dfdfdf; } /** * Galleries */ .gallery { display: block; clear: both; overflow: hidden; margin: 25px auto; } .gallery-row { display: block; clear: both; overflow: hidden; margin: 0; } .gallery-item { overflow: hidden; float: left; list-style-type: none; padding: 0; margin: 0; text-align: center; } .gallery-icon img { width: auto; height: auto; max-width: 90%; } .gallery-caption { font-size: 14px; font-size: 1.4rem; margin: 0 0 15px 0; } .gallery-col-7 .gallery-caption, .gallery-col-8 .gallery-caption, .gallery-col-9 .gallery-caption { display: none; } /* Gallery item sizes depending on the number of columns. */ .gallery-col-0 .gallery-item { width: 100%; } .gallery-col-1 .gallery-item { width: 100%; } .gallery-col-2 .gallery-item { width: 50%; } .gallery-col-3 .gallery-item { width: 33.333333333333336%; } .gallery-col-4 .gallery-item { width: 25%; } .gallery-col-5 .gallery-item { width: 20%; } .gallery-col-6 .gallery-item { width: 16.666666666666668%; } .gallery-col-7 .gallery-item { width: 14.285714285714288%; } .gallery-col-8 .gallery-item { width: 12.5%; } .gallery-col-9 .gallery-item { width: 11.11111111111111%; } .gallery-col-10 .gallery-item { width: 10%; } /* ============================================================================= Layout: Post formats ========================================================================== */ /** * Post format link */ .entry-header .post-format-link { background-color: #eeeeee; border-radius: 3px; color: #6f6f6f; font-size: 12px; font-size: 1.2rem; padding: 3px 10px; text-transform: uppercase; position: absolute; top: 10px; right: 0; } .entry-header .post-format-link[href]:hover, .entry-header .post-format-link[href]:focus { background-color: #d54e21; color: #fff; } /** * 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.6; } .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: #6a6a6a; } /** * Format: Status */ .format-status .entry-header { position: relative; margin-bottom: 25px; } .format-status .entry-header .entry-author { margin: 0; font-size: 16px; font-size: 1.6rem; font-weight: normal; } .format-status .entry-header .entry-date { font-size: 14px; font-size: 1.4rem; 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: Aside */ .format-aside .permalink { font-size: 18px; font-size: 1.8rem; } /** * Format: Link */ .format-link .entry-title:hover .meta-nav { margin-left: 5px; -webkit-transition: margin-left 200ms ease-in-out; transition: margin-left 200ms ease-in-out; } /** * Format: Video */ .format-video .entry-header { margin-bottom: 15px; } /** * Format: Image */ .format-image .entry-media { line-height: normal; } .format-image .entry-meta { margin-top: 30px; padding: 25px; font-size: 14px; font-size: 1.4rem; font-weight: normal; line-height: 1.8; background: #e0e6e8; border-radius: 3px; color: #555555; } .format-image .entry-meta p { margin: 0; } /* ============================================================================= 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 { 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 #e7e7e7; 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 #ffe3b4; } .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-size: 13px; font-size: 1.3rem; } /* ============================================================================= Components: Recent Posts ========================================================================== */ .recent-post { float: left; width: 220px; margin-right: 40px; -webkit-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-post-columns:hover .recent-post { opacity: 0.75; } .recent-post-columns:hover .recent-post:hover { opacity: 1; } /* ============================================================================= Components: Headlines Lists ========================================================================== */ .headline-columns { margin: 40px 0; } .headline-columns .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 .headline-item { padding: 25px 20px; border-bottom: 1px solid #e2e2e2; line-height: 1.6; } .headline-list .headline-item:hover, .headline-list .headline-item:active { background-color: #f2f7fc; background-image: -webkit-linear-gradient(left, #f6fafd 50%, #f2f7fc); background-image: linear-gradient(to right, #f6fafd 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: Comments area ========================================================================== */ .comments-area { margin-top: 40px; } .comments-title { background-color: #ffffdf; border: double #eeddbd; border-width: 4px 0; margin: 0; padding: 15px 25px; } /** * Comments */ .comment-list { list-style-type: none; padding: 0; margin: 0; } .comment-body { border-bottom: 4px double #eeeeee; padding: 40px 25px 25px; word-wrap: break-word; } .bypostauthor > .comment-body { background-color: #f2f7fc; } /** * Comment meta */ .comment-author { line-height: 1.5; } .comment-metadata a { color: #555555; font-size: 14px; font-size: 1.4rem; } .comment-metadata a:hover { color: #d54e21; } .comment-edit-link { margin-left: 10px; } .comment-edit-link:before { content: "\270D"; margin-right: 5px; } /** * Closed comments */ .no-comments { background-color: #ffffdf; border: double #eeddbd; border-width: 4px 0; margin: 40px 0; padding: 40px; font-size: 26px; font-size: 2.6rem; text-align: center; } /** * Child comments */ .comment-list .children { list-style: none; } .comment-list .children .comment-body { border-left: 3px solid; padding-left: 40px; } .comment-list .children .depth-2 .comment-body { border-left-color: #04648d; } .comment-list .children .depth-3 .comment-body { border-left-color: #ce3000; } .comment-list .children .depth-4 .comment-body { border-left-color: #008a2e; } .comment-list .children .depth-5 .comment-body { border-left-color: #ea0863; } /* ============================================================================= Forms ========================================================================== */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; /* 1 */ } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } label, input, button, select, textarea { font-size: 15px; font-size: 1.5rem; font-weight: normal; line-height: normal; } /** * Labels */ label { display: block; margin-bottom: 5px; font-size: 15px; font-size: 1.5rem; font-weight: normal; line-height: 1.6; cursor: pointer; } /** * Inputs */ select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { padding: 8px 6px; margin-bottom: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; border: 1px solid #cccccc; border-radius: 3px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); color: #555555; -webkit-transition: all 150ms ease; transition: all 150ms ease; } select:hover, textarea:hover, input[type="text"]:hover, input[type="password"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="date"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, input[type="number"]:hover, input[type="email"]:hover, input[type="url"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="color"]:hover { border-color: #999999; } select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus { border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(82, 168, 236, 0.5); outline: 0; } input, select, textarea { width: 100%; } input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] { width: auto; } input[type="color"] { padding: 0; } select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: thin dotted #333333; 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; } /* ============================================================================= Buttons ========================================================================== */ .btn, input[type="submit"], input[type="reset"], input[type="button"], .comment-reply-link { display: inline-block; padding: 4px 14px; font-size: 16px; font-size: 1.6rem; font-weight: bold; line-height: 1.6; border: 1px solid; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { outline: thin dotted #333333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .btn:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active { background-image: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); outline: 0; } .btn[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled], fieldset[disabled] .btn, fieldset[disabled] input[type="submit"], fieldset[disabled] input[type="reset"], fieldset[disabled] input[type="button"] { background: #eeeeee; border-color: #999999; box-shadow: none; color: #555555; text-shadow: none; opacity: 0.65; cursor: default; pointer-events: none; } .btn, input[type="submit"], input[type="reset"], input[type="button"], .comment-reply-link { background-color: #fafafa; background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4 100%); background-image: linear-gradient(to bottom, #fefefe, #f4f4f4 100%); border-color: #e0e0e0 #e0e0e0 #c1c1c1; color: #555555; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .btn:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .btn:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { background-color: #eaeaea; background-image: -webkit-linear-gradient(top, #f1f1f1, #e0e0e0 100%); background-image: linear-gradient(to bottom, #f1f1f1, #e0e0e0 100%); border-color: #cecece #cecece #a8a8a8; color: #555555; text-decoration: none; } html .btn-primary { background-color: #006dcc; background-image: -webkit-linear-gradient(top, #0088cc, #0044cc 100%); background-image: linear-gradient(to bottom, #0088cc, #0044cc 100%); border-color: #0036a3 #0036a3 #002266; color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } html .btn-primary:hover, html .btn-primary:focus { background-color: #005dac; background-image: -webkit-linear-gradient(top, #0077b3, #0036a3 100%); background-image: linear-gradient(to bottom, #0077b3, #0036a3 100%); border-color: #002a80 #002a80 #001133; color: #ffffff; text-decoration: none; } html .btn-success { background-color: #5bb75b; background-image: -webkit-linear-gradient(top, #62c462, #51a351 100%); background-image: linear-gradient(to bottom, #62c462, #51a351 100%); border-color: #438843 #438843 #2f5f2f; color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } html .btn-success:hover, html .btn-success:focus { background-color: #4ba84b; background-image: -webkit-linear-gradient(top, #4fbd4f, #438843 100%); background-image: linear-gradient(to bottom, #4fbd4f, #438843 100%); border-color: #387038 #387038 #1e3d1e; color: #ffffff; text-decoration: none; } html .btn-warning { background-color: #f8941c; background-image: -webkit-linear-gradient(top, #faa51a, #f47a20 100%); background-image: linear-gradient(to bottom, #faa51a, #f47a20 100%); border-color: #e0660b #e0660b #a64b08; color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } html .btn-warning:hover, html .btn-warning:focus { background-color: #ed8508; background-image: -webkit-linear-gradient(top, #f59a05, #e0660b 100%); background-image: linear-gradient(to bottom, #f59a05, #e0660b 100%); border-color: #be5609 #be5609 #753506; color: #ffffff; text-decoration: none; } html .btn-danger { background-color: #da4f49; background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f 100%); background-image: linear-gradient(to bottom, #ee5f5b, #bd362f 100%); border-color: #9c2d27 #9c2d27 #6b1f1b; color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } html .btn-danger:hover, html .btn-danger:focus { background-color: #cc3d38; background-image: -webkit-linear-gradient(top, #ec4844, #9c2d27 100%); background-image: linear-gradient(to bottom, #ec4844, #9c2d27 100%); border-color: #802420 #802420 #421311; color: #ffffff; text-decoration: none; } html .btn-info { background-color: #49afcd; background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4 100%); background-image: linear-gradient(to bottom, #5bc0de, #2f96b4 100%); border-color: #277b94 #277b94 #1a5363; color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } html .btn-info:hover, html .btn-info:focus { background-color: #39a0be; background-image: -webkit-linear-gradient(top, #46b8da, #277b94 100%); background-image: linear-gradient(to bottom, #46b8da, #277b94 100%); border-color: #1f6377 #1f6377 #0f313b; color: #ffffff; text-decoration: none; } html .btn-inverse { background-color: #373737; background-image: -webkit-linear-gradient(top, #444444, #222222 100%); background-image: linear-gradient(to bottom, #444444, #222222 100%); border-color: #0e0e0e #0e0e0e #000000; color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } html .btn-inverse:hover, html .btn-inverse:focus { background-color: #272727; background-image: -webkit-linear-gradient(top, #373737, #0e0e0e 100%); background-image: linear-gradient(to bottom, #373737, #0e0e0e 100%); border-color: #000000 #000000 #000000; color: #ffffff; text-decoration: none; } html .btn-inverse:hover { background: #d54e21; border-color: #a93e1a; } .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, .comment-reply-link { padding: 3px 7px; font-size: 13px; font-size: 1.3rem; font-weight: normal; } /* ============================================================================= Layout: Comment form ========================================================================== */ .comment-respond { padding: 25px; margin: 60px 0 0; background: #f2f7fc; border-top: 5px solid #ffc768; color: #555555; } .comment-respond .log-in-out { font-size: 18px; font-size: 1.8rem; text-align: center; } .comment-reply-title { background-color: #ffffdf; border: double #eeddbd; border-width: 4px 0; margin: -40px 0 25px; padding: 10px 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 */ .comment-form .form-author { float: left; width: 48%; } .comment-form .form-email { float: right; width: 48%; } .comment-form .form-url { clear: both; } #submit { background-color: #006dcc; background-image: -webkit-linear-gradient(top, #0088cc, #0044cc 100%); background-image: linear-gradient(to bottom, #0088cc, #0044cc 100%); border-color: #0036a3 #0036a3 #002266; color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } #submit:hover, #submit:focus { background-color: #005dac; background-image: -webkit-linear-gradient(top, #0077b3, #0036a3 100%); background-image: linear-gradient(to bottom, #0077b3, #0036a3 100%); border-color: #002a80 #002a80 #001133; color: #ffffff; text-decoration: none; } /* ============================================================================= Layout: Search form ========================================================================== */ .search-form label { display: inline-block; margin-right: 5px; } .search-form .search-field { padding-left: 27px; background: #ffffff url(images/search.png) no-repeat 5px center; } .search-form .search-field[results] { padding-left: 6px; background-image: none; } /* ============================================================================= Components: Message boxes ========================================================================== */ .hentry .note, .hentry .alert, .hentry .warning, .hentry .success, .hentry .download, .hentry .danger, .hentry .error, .hentry .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; } .hentry .warning, .hentry .alert { background-color: #fef9c7; border-color: #fcdd4a; color: #3b3601; } .hentry .success, .hentry .download { background-color: #dff0d8; border-color: #54b646; color: #0d370d; } .hentry .danger, .hentry .error { background-color: #f2dede; border-color: #ce838f; color: #4b0706; } .hentry .info { background-color: #f2f7fc; border-color: #d6e3e5; color: #3c3c3c; } .box-blue { background-color: #f2f7fc; border: double #c6d1db; border-width: 4px 0; margin: 0 0 40px; padding: 25px; } .box-orange { background-color: #ffffdf; border: double #eeddbd; border-width: 4px 0; margin: 0 0 40px; padding: 25px; } /* ============================================================================= 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; 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 .sub-menu .sep { display: none; } .oldie .recent-post, .oldie .headline-list { margin-right: 7.5px; margin-left: 7.5px; } /** * IE7 fixes */ .ie7 .secondary-navigation { position: relative; z-index: 100; } /* ============================================================================= 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) { .site-main { width: 65%; } .sidebar-primary, .sidebar-secondary { width: 32%; } .main-navigation { width: 100%; } /* Remove box-shadow and border-radius */ .site-content, .site-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 .site-main, .layout-3c-r .site-main, .layout-3c-l .site-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 */ .site-content, .site-footer { padding-left: 25px; padding-right: 25px; } .site-title { margin-left: 25px; } .site-description { margin-right: 25px; } .cakifo-slider { margin-left: -25px; margin-right: -25px; } /* Turn 3 column layouts into a layout with a full width .site-main and two 50% width sidebars underneath */ .layout-3c-c .site-main, .layout-3c-r .site-main, .layout-3c-l .site-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 #eeeeee; 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: #f2f7fc; } .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 */ .site-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 */ .site-header { text-align: center; } .site-title, .site-description { float: none; } .site-description { margin: 20px 0 0; } .flexbox .site-header .home-link { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-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 */ .comment-form .form-author, .comment-form .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%; } } /* ============================================================================= Helper classes ========================================================================== */ .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } /** * Alignments */ .alignleft { float: left; } .alignright { float: right; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignnone { clear: both; } .clear { clear: both; } /** * Screen reader text * This is used to hide content from browsers but allow screen readers to see it */ .assistive-text, .screen-reader-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; } /* ============================================================================= 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-area { 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 { page-break-inside: avoid; } pre { border: 1px solid #999; } /** * 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 */ .cakifo-slider, .pagination, .search-form, .topbar, .secondary-navigation, .more-link, .post-edit-link, .entry-meta .permalink, .comments-link, .comment-respond, .comment-reply-link, .comment-edit-link, object, embed, video, audio, iframe[src*="youtube"] { display: none !important; } /** * Change layout */ #wrapper { max-width: 100%; } .site-main, .sidebar-primary, .sidebar-secondary { float: none; width: 100%; } .layout-3c-c .site-main, .layout-3c-r .site-main, .layout-3c-l .site-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 */ .site-content, .site-footer, .comments-area, .widget-title, .section-title, .author-profile { margin: 0; } .site-content, .site-footer, .site-header, .sticky .widget-title, .section-title, .breadcrumbs, .author-profile { padding: 0; } .comment-body { padding: 20px 20px 0; } .site-content, .site-footer, .loop-meta-home, .widget-title, .comments-title, .breadcrumbs, .author-profile { border: 0; } .hentry, .comment-body { border-bottom: 1px solid; } .hentry .note, .hentry .alert, .hentry .warning, .hentry .success, .hentry .download, .hentry .danger, .hentry .error, .hentry .info { padding: 5px 20px; border: 1px solid; } /* Attachment pages */ .singular-attachment .loop-nav, .singular-attachment .byline, .singular-attachment .image-gallery { display: none; } .singular-attachment .image-info { width: 100%; float: none; } .singular-attachment .image-info h3 { margin: 0; } }