/* Theme Name: BlueMotion Author: DianysEnterprises Author URI: http://www.dianysmedia.com Description: BlueMotion is an elegant designed WordPress theme featuring a splendid fullscreen image slideshow. The clean typography and spacious white layout makes it great to share your stories. You can use the theme as simple blog or easily create a news website with the widget-based Magazine Homepage template. Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: BlueMotion Tags: two-columns, light, blue, custom-background, custom-header, custom-menu, blog, news, editor-style, featured-image-header, featured-images, flexible-header, custom-colors, full-width-template, sticky-post, threaded-comments, translation-ready, theme-options, fluid-layout, responsive-layout, one-column, left-sidebar, right-sidebar, three-columns, black, red, silver, white, green, gray This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. BlueMotion is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 - Normalize 2.0 - Typography 3.0 - Elements 4.0 - Forms 5.0 - Accessibility 6.0 - Alignments 7.0 - Clearings 8.0 - Layout Structure 9.0 - Header 10.0 - Navigation 10.1 - Main Navigation 10.2 - Social Icon Menu 11.0 - Widgets 11.1 - Default Widgets 11.2 - Magazine Posts Widgets 12.0 - Posts and pages 11.0 - Comments 12.0 - Footer 13.0 - Media 13.1 - Captions 13.2 - Galleries 14.0 - Media Queries 14.1 - Desktop Large ( < 1120px ) 14.2 - Desktop Medium ( < 1040px ) 14.3 - Desktop Small ( < 960px ) 14.4 - Tablet Large ( < 880px ) 14.5 - Tablet Medium ( < 800px ) 14.6 - Tablet Small ( < 720px ) 14.7 - Mobile Extra Large ( < 640px ) 14.8 - Mobile Large ( < 560px ) 14.9 - Mobile Medium ( < 480px ) 14.10 - Mobile Small ( < 320px ) 15.0 - Theme Option Styles 15.1 - Sidebar Left Layout 15.2 - Sticky Header 16.0 - Media Query Fixes --------------------------------------------------------------*/ /*-------------------------------------------------------------- # 1.0 - Normalize --------------------------------------------------------------*/ html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; 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; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } 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; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /*-------------------------------------------------------------- # 2.0 - Typography --------------------------------------------------------------*/ body, button, input, select, textarea { color: #404040; font-family: 'Ubuntu', Tahoma, Arial; font-size: 16px; font-size: 1rem; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { clear: both; } p { margin-bottom: 1.5em; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; font-size: 0.9375rem; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { text-decoration: none; } big { font-size: 125%; } /*-------------------------------------------------------------- # 3.0 - Elements --------------------------------------------------------------*/ html { box-sizing: border-box; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ box-sizing: inherit; } body { background: #fff; /* Fallback for when there is no custom background color defined. */ } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: none; } blockquote { margin: 0 0 1.5em; border-left: 4px solid #eee; padding-left: 1.5em; font-size: 19px; font-size: 1.1875rem; font-style: italic; color: #777; } blockquote cite, blockquote small { margin-top: 1em; display: block; font-size: 16px; font-size: 1rem; line-height: 1.75; color: #404040; } blockquote cite:before, blockquote small:before { content: "\2014\00a0"; } blockquote em, blockquote i, blockquote cite { font-style: normal; } blockquote > :last-child { margin-bottom: 0.5em; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 1.25em; padding: 0; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.25em; } dt { font-weight: bold; } dd { margin: 0 0 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } table { margin: 0 0 1.5em; border: none; table-layout: fixed; width: 100%; } th, td { border: 1px solid #ddd; padding: 0.3em 0.6em; } th { background: #eee; } a { color: #22aadd; text-decoration: none; } a:link, a:visited { color: #22aadd; } a:hover, a:focus, a:active { color: #404040; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /*-------------------------------------------------------------- # 4.0 - Forms --------------------------------------------------------------*/ button, input[type="button"], input[type="reset"], input[type="submit"] { padding: 0.4em 0.8em; font-family: 'Raleway', Tahoma, Arial; font-size: 13px; font-size: 0.8125rem; font-weight: bold; color: #fff; background: #22aadd; border: none; text-transform: uppercase; text-decoration: none; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { background: #404040; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { max-width: 100%; padding: 0.3em 0.6em; color: #666; border: 1px solid #ddd; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #111; border: 1px solid #ccc; } textarea { width: 100%; } /*-------------------------------------------------------------- # 5.0 - Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /*-------------------------------------------------------------- # 6.0 - Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } /*-------------------------------------------------------------- # 7.0 - Clearings --------------------------------------------------------------*/ .clearfix:before, .clearfix:after, .post-navigation .nav-links:before, .post-navigation .nav-links:after, .comment-navigation:before, .comment-navigation:after { content: ""; display: table; } .clearfix:after, .post-navigation .nav-links:after, .comment-navigation:after { clear: both; } /*-------------------------------------------------------------- # 8.0 - Layout Structure --------------------------------------------------------------*/ .site { width: 100%; margin: 0; } .container { max-width: 1280px; width: 100%; margin: 0 auto; padding: 0 2em; } .site-content { padding-top: 3em; background: #fff; } .content-area { float: left; width: 70%; padding-right: 4em; box-sizing: border-box; } .sidebar { float: right; width: 30%; } /* Fullwidth Template */ .site-content .fullwidth-content-area { float: none; width: 100%; padding: 0; } /*-------------------------------------------------------------- # 9.0 - Header --------------------------------------------------------------*/ .site-header { background: #fff; border-bottom: 1px solid #ddd; } .site-branding { float: left; max-width: 100%; margin: 1em 0; padding: 0; } .site-branding a:link, .site-branding a:visited, .site-branding a:hover { text-decoration: none; padding: 0; border: none; } .site-title { display: inline-block; margin: 0; padding: 0; color: #404040; font-family: 'Raleway', sans-serif; font-size: 38px; font-size: 2.375rem; font-weight: bold; text-decoration: none; } .site-title a:link, .site-title a:visited { color: #404040; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .site-title a:hover, .site-title a:active { color: #22aadd; } .site-branding .custom-logo { margin: 0.3em 1em 0 0; padding: 0; border: none; vertical-align: top; max-width: 100%; height: auto; } /* Custom Header Image */ .header-image { margin-top: -1px; text-align: center; } .header-image img { max-width: 2500px; max-height: 500px; vertical-align: top; width: 100%; height: auto; } /*-------------------------------------------------------------- # 10.0 - Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## 10.1 - Main Navigation --------------------------------------------------------------*/ .primary-navigation { float: right; margin: 1em 0; } .main-navigation-toggle { display: none; } .main-navigation-menu { float: left; margin: 0; padding: 0; list-style-type: none; list-style-position: outside; position: relative; } .main-navigation-menu li { float: left; } .main-navigation-menu a { display: block; font-family: 'Raleway', Tahoma, Arial; font-size: 15px; font-size: 0.9375rem; font-weight: bold; padding: 1.2em; text-transform: uppercase; text-decoration: none; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .main-navigation-menu > .menu-item-has-children > a:after { display: inline-block; margin: 0.2em 0 0 0.2em; font-size: 16px; line-height: 1; font-family: 'Genericons'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: inherit; vertical-align: top; content: '\f431'; color: #404040; } .main-navigation-menu a:link, .main-navigation-menu a:visited { color: #404040; text-decoration: none; } .main-navigation-menu a:hover, .main-navigation-menu a:hover:after { color: #22aadd; } .main-navigation-menu ul { position: absolute; display: none; z-index: 99; margin: 0; padding: 0; list-style-type: none; list-style-position: outside; background: #fff; border: 1px solid #ddd; border-top: 4px solid #404040; } .main-navigation-menu ul li { float: none; position: relative; } .main-navigation-menu ul a { min-width: 250px; min-width: 16rem; padding: 1em; font-size: 13px; font-size: 0.8125rem; border-bottom: 1px dotted #ccc; -webkit-transition: none; transition: none; } .main-navigation-menu ul li:last-child a { border-bottom: none; } .main-navigation-menu ul .menu-item-has-children > a:after { display: inline-block; margin: 0.2em 0 0 0.2em; font-size: 14px; line-height: 1; font-family: 'Genericons'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: inherit; vertical-align: top; content: '\f431'; color: #404040; -webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); -o-transform:rotate(270deg); -ms-transform:rotate(270deg); } .main-navigation-menu li ul ul { top: 0; left: 100%; margin-top: -4px; } .main-navigation-menu li.menu-item-has-children:hover > ul, .main-navigation-menu li.page_item_has_children:hover > ul, .main-navigation-menu li.menu-item-has-children[aria-expanded="true"] > ul { display: block; } .main-navigation-menu li.current-menu-item > a { color: #22aadd; } /* Mega Menu Styling */ .mega-menu-content .mega-menu-widget ul li { display: block; border-top: 1px dotted #ccc; } .mega-menu-content .mega-menu-widget ul li a { display: block; padding: 0.5em 0.75em; } /*-------------------------------------------------------------- ## 10.2 - Social Icons Menu --------------------------------------------------------------*/ .social-icons-menu { margin: 0; padding: 0; list-style-type: none; list-style-position: outside; line-height: 1; } .social-icons-menu li { float: left; margin: 0; padding: 0; } .social-icons-menu li a { position: relative; display: inline-block; padding: 0.5em; text-decoration: none; } .social-icons-menu li a .screen-reader-text { display: none; } /* Add Genericons */ .social-icons-menu li a:before { color: #fff; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; line-height: 1; font-family: 'Genericons'; text-decoration: inherit; vertical-align: top; } .social-icons-menu li a:before { content: '\f408'; } /* Default Icon */ .social-icons-menu li a[href*="codepen.io"]:before { content: '\f216'; } .social-icons-menu li a[href*="digg.com"]:before { content: '\f221'; } .social-icons-menu li a[href*="dribbble.com"]:before { content: '\f201'; } .social-icons-menu li a[href*="facebook.com"]:before { content: '\f204'; } .social-icons-menu li a[href*="flickr.com"]:before { content: '\f211'; } .social-icons-menu li a[href*="plus.google.com"]:before { content: '\f218'; } .social-icons-menu li a[href*="github.com"]:before { content: '\f200'; } .social-icons-menu li a[href*="instagram.com"]:before { content: '\f215'; } .social-icons-menu li a[href*="linkedin.com"]:before { content: '\f207'; } .social-icons-menu li a[href*="pinterest.com"]:before { content: '\f209'; } .social-icons-menu li a[href*="polldaddy.com"]:before { content: '\f217'; } .social-icons-menu li a[href*="getpocket.com"]:before { content: '\f224'; } .social-icons-menu li a[href*="reddit.com"]:before { content: '\f222'; } .social-icons-menu li a[href*="spotify.com"]:before { content: '\f515'; } .social-icons-menu li a[href*="skype.com"]:before, .social-icons-menu li a[href*="skype:"]:before { content: '\f220'; } .social-icons-menu li a[href*="stumbleupon.com"]:before { content: '\f223'; } .social-icons-menu li a[href*="tumblr.com"]:before { content: '\f214'; } .social-icons-menu li a[href*="twitch.tv"]:before { content: '\f516'; } .social-icons-menu li a[href*="twitter.com"]:before { content: '\f202'; } .social-icons-menu li a[href*="vimeo.com"]:before { content: '\f212'; } .social-icons-menu li a[href*="wordpress.org"]:before { content: '\f205'; } .social-icons-menu li a[href*="wordpress.com"]:before { content: '\f205'; } .social-icons-menu li a[href*="youtube.com"]:before { content: '\f213'; } .social-icons-menu li a[href*="newsletter"]:before, .social-icons-menu li a[href*="mailto"]:before { content: '\f410'; } .social-icons-menu li a[href*="/feed"]:before, .social-icons-menu li a[href*="/feed/"]:before, .social-icons-menu li a[href*="?feed=rss2"]:before, .social-icons-menu li a[href*="feedburner.google.com"]:before, .social-icons-menu li a[href*="feedburner.com"]:before { content: '\f413'; } /*-------------------------------------------------------------- # 11.0 - Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 3em 0; color: #333; -ms-word-wrap: break-word; word-wrap: break-word; } .widget-header { margin: 0 0 1.5em 0; } .widget-title { display: inline-block; margin: 0; padding: 0; font-family: 'Raleway', Tahoma, Arial; font-size: 18px; font-size: 1.125rem; font-weight: bold; text-transform: uppercase; color: #404040; border-bottom: 4px solid #eee; } .widget ul { margin: 0; padding: 0 0.3em; list-style: circle inside; } .widget ul .children, .widget ul .sub-menu { padding: 0; margin: 0.5em 0 0.5em 1em; } .widget-title a:link, .widget-title a:visited { color: #404040; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .widget-title a:hover, .widget-title a:active { color: #22aadd; } /* Make sure select elements fit in widgets. */ .widget select { max-width: 100%; } /*-------------------------------------------------------------- ## 11.1 - Default Widgets --------------------------------------------------------------*/ /* Tagcloud Widget */ .widget_tag_cloud .tagcloud { font-size: 14px; font-size: 0.875rem; } .widget_tag_cloud .tagcloud:before, .widget_tag_cloud .tagcloud:after { content: ""; display: table; } .widget_tag_cloud .tagcloud:after { clear: both; } .widget_tag_cloud .tagcloud a { float: left; display: inline-block; margin: 0 2px 2px 0; padding: 0.2em 0.5em 0.3em; text-decoration: none; background: #eee; font-size: 16px !important; font-size: 1rem !important; } .widget_tag_cloud .tagcloud a:link, .widget_tag_cloud .tagcloud a:visited { color: #777; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .widget_tag_cloud .tagcloud a:hover, .widget_tag_cloud .tagcloud a:active { color: #fff; background: #22aadd; } /* Theme Search Widget */ .search-form { display: block; position: relative; width: 100%; margin: 0; padding: 0; overflow: hidden; } .search-form .screen-reader-text { display: none; } .search-form .search-field { display: inline-block; margin: 0; width: 100%; padding: 0.5em 1.5em 0.5em 0.7em; box-sizing: border-box; -webkit-appearance: none; } .search-form .search-submit { position: absolute; top: 0; right: 0; border: none; padding: 0.6em 0.6em 0 0; cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .search-form .search-submit .genericon-search { display: inline-block; padding: 0.05em 0 0.55em 0.45em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 24px; line-height: 1; font-family: 'Genericons'; text-decoration: inherit; font-weight: normal; font-style: normal; vertical-align: middle; color: #fff; content: '\f400'; } /*-------------------------------------------------------------- ## 11.2 - Magazine Posts Widgets --------------------------------------------------------------*/ .widget-magazine-posts { margin-bottom: -1em; } .widget-magazine-posts .type-post { margin: 0 0 2em 0; padding: 0; border: none; background: none; } .widget-magazine-posts .type-post .wp-post-image { margin: 0 0 0.5em; max-width: 100%; } .widget-magazine-posts .type-post .entry-content { font-size: 16px; font-size: 1rem; } .widget-magazine-posts .type-post .entry-content p { margin: 1em 0 0; } .widget-magazine-posts .type-post .more-link { margin: 1em 0 0; } .widget-magazine-posts .large-post .entry-title { font-size: 24px; font-size: 1.5rem; } .widget-magazine-posts .medium-post { float: left; display: block; width: 33.33333333%; padding-right: 2em; box-sizing: border-box; } .widget-magazine-posts .medium-post .entry-title { font-size: 16px; font-size: 1rem; } .widget-magazine-posts .small-post { float: left; display: block; width: 100%; box-sizing: border-box; } .widget-magazine-posts .small-post .wp-post-image { float: left; margin: 0 1em 0 0; max-width: 40%; } .widget-magazine-posts .small-post .entry-title { font-size: 15px; font-size: 0.9375rem; } .widget-magazine-posts .medium-post .entry-meta, .widget-magazine-posts .small-post .entry-meta { font-size: 12px; font-size: 0.75rem; } /* Magazine Posts Boxed Widget Horizontal Style */ .widget-magazine-posts-boxed .magazine-posts-boxed-horizontal .large-post .wp-post-image { float: left; width: 50%; margin: 0; padding-right: 1em; box-sizing: border-box; } .widget-magazine-posts-boxed .magazine-posts-boxed-horizontal .large-post .post-content { float: right; width: 50%; padding-left: 1em; box-sizing: border-box; } .widget-magazine-posts-boxed .magazine-posts-boxed-horizontal .medium-posts { margin-right: -2em; } /* Magazine Posts Boxed Widget Vertical Style */ .widget-magazine-posts-boxed .magazine-posts-boxed-vertical .large-post { float: left; width: 50%; margin-bottom: 1em; padding-right: 1em; box-sizing: border-box; } .widget-magazine-posts-boxed .magazine-posts-boxed-vertical .small-posts { width: 50%; margin-left: 50%; padding-left: 1em; box-sizing: border-box; } /* Magazine Posts Grid Widget */ .widget-magazine-posts-grid .magazine-posts-grid-row { margin-right: -2em; } .widget-magazine-posts-grid .magazine-posts-grid-row .large-post { float: left; width: 50%; padding-right: 2em; box-sizing: border-box; } /* Magazine Posts Columns Widget */ .widget-magazine-posts-columns .magazine-posts-columns .magazine-posts-columns-content .magazine-posts-columns-post-list { float: left; width: 100%; box-sizing: border-box; } .widget-magazine-posts-columns .magazine-posts-columns .magazine-posts-columns-content { float: left; width: 100%; } .widget-magazine-posts-columns .magazine-posts-column-left { float: left; width: 50%; padding-right: 1em; box-sizing: border-box; } .widget-magazine-posts-columns .magazine-posts-column-right { margin-left: 50%; width: 50%; padding-left: 1em; box-sizing: border-box; } .widget-magazine-posts-columns .medium-post { width: 100%; padding-right: 0; } /*-------------------------------------------------------------- # 12.0 - Posts and pages --------------------------------------------------------------*/ .type-post, .type-page, .type-attachment { margin: 0 0 3em 0; max-width: 100%; } .page-title, .entry-title { display: inline; font-family: 'Raleway', sans-serif; font-size: 40px; font-size: 2.5rem; font-weight: bold; padding: 0; margin: 0; color: #404040; -ms-word-wrap: break-word; word-wrap: break-word; } .entry-title a:link, .entry-title a:visited { color: #404040; text-decoration: none; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .entry-title a:hover, .entry-title a:active{ color: #22aadd; } .type-post .wp-post-image { margin: 0 0 0.5em; } .entry-content { font-size: 17px; font-size: 1.0625rem; } /* Read more Link */ .more-link { display: inline-block; margin: 0; padding: 0; font-family: 'Raleway', Tahoma, Arial; font-size: 14px; font-size: 0.875rem; font-weight: bold; text-transform: uppercase; text-decoration: none; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } /* Small Post Layout */ .post-layout-small .content-area .type-post .wp-post-image { float: left; max-width: 40%; margin: 0 1.5em 1.5em 0; padding: 0.3em 0 0; } .post-layout-small .content-area .type-post .entry-title { font-size: 28px; font-size: 1.75rem; } .post-layout-small .content-area .type-post .entry-content { font-size: 16px; font-size: 1rem; } .post-layout-small .content-area .type-post .entry-excerpt p { margin-bottom: 1em; } /* Page Links | wp_link_pages() */ .page-links { margin: 0; word-spacing: 1em; font-weight: bold; } /* Entry Meta */ .entry-meta { margin: 0.5em 0.2em 0; color: #aaa; font-size: 13px; font-size: 0.8125rem; text-transform: uppercase; } .entry-meta a:link, .entry-meta a:visited { color: #aaa; } .entry-meta a:hover, .entry-meta a:active { color: #777; } .entry-meta span:after { display: inline-block; -webkit-font-smoothing: antialiased; font: normal 16px 'Genericons'; vertical-align: middle; color: #aaa; content: '\f428'; margin-left: 0.2em; } .entry-meta span:last-child:after { display: none; } /* Entry Tags */ .entry-tags { clear: both; margin: 0 0 2em; } .entry-tags .meta-tags { display: block; margin: 0; font-size: 14px; font-size: 0.875rem; } .entry-tags .meta-tags a { float: left; display: inline-block; margin: 0 2px 2px 0; padding: 0.2em 0.5em 0.3em; text-decoration: none; background: #eee; } .entry-tags .meta-tags a:link, .entry-tags .meta-tags a:visited { color: #777; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .entry-tags .meta-tags a:hover, .entry-tags .meta-tags a:active { color: #fff; background: #22aadd; } /* Post Navigation */ .post-navigation { margin: 1em 0 0; padding: 0.6em 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .post-navigation .nav-links .nav-previous { float: left; } .post-navigation .nav-links .nav-next { float: right; } .post-navigation .nav-links .nav-previous a:before { margin-right: 3px; content: "\00AB"; } .post-navigation .nav-links .nav-next a:after { margin-left: 4px; content: "\00BB"; } /* Theme Pagination */ .post-pagination { display: inline-block; border-top: 4px solid #eee; margin: 0 0 3em; } .post-pagination a, .post-pagination .current { display: inline-block; margin: 0; padding: 0.5em 0.9em; text-align: center; text-decoration: none; font-family: 'Raleway', Tahoma, Arial; font-size: 16px; font-size: 1rem; font-weight: bold; text-transform: uppercase; } .post-pagination a:link, .post-pagination a:visited { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } /* Infinite Scroll Pagination */ .infinite-scroll .post-pagination { display: none; } .infinite-scroll #infinite-handle span { display: inline-block; margin: 0 0 3em; padding: 0; background: none; color: #22aadd; font-family: 'Raleway', Tahoma, Arial; font-size: 14px; font-size: 0.875rem; font-weight: bold; text-transform: uppercase; text-decoration: none; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .infinite-scroll #infinite-handle span:hover { color: #404040; } /* Archives and Search Heading */ .page-header { margin: 0 0 1.5em 0; } .page-header .archive-title { display: inline-block; margin: 0; padding: 0; font-family: 'Raleway', Tahoma, Arial; font-size: 18px; font-size: 1.125rem; font-weight: bold; text-transform: uppercase; color: #404040; border-bottom: 4px solid #eee; } .archive-description { color: #666; } /* Breadcrumbs */ .breadcrumbs { margin: 0; padding: 0.5em 0; border-bottom: 1px solid #ddd; } .breadcrumbs-container { color: #222; font-size: 14px; font-size: 0.875rem; } .breadcrumbs .trail-browse, .breadcrumbs .trail-items, .breadcrumbs .trail-items li { display: inline; margin: 0; padding: 0; } .breadcrumbs .trail-browse { margin-right: 0.5em; font-size: 14px; font-size: 0.875rem; font-weight: normal; } .breadcrumbs .trail-items { list-style: none; } .breadcrumbs .trail-items li::after { content: "\00bb"; /* Raquo */ padding: 0 0.5em; } .trail-separator-slash .trail-items li::after { content: "\002F"; } .trail-separator-dash .trail-items li::after { content: "\2013"; } .trail-separator-bull .trail-items li::after { content: "\2022"; } .trail-separator-arrow-bracket .trail-items li::after { content: "\003e"; } .trail-separator-raquo .trail-items li::after { content: "\00bb"; } .trail-separator-single-arrow .trail-items li::after { content: "\2192"; } .trail-separator-double-arrow .trail-items li::after { content: "\21D2"; } .breadcrumbs .trail-items li:last-of-type::after { display: none; } /*-------------------------------------------------------------- # 11.0 - Comments --------------------------------------------------------------*/ /* Comment Header */ .comments-header, .comment-reply-title { margin: 0 0 1.5em 0; } .comments-header .comments-title, .comment-reply-title span { display: inline-block; margin: 0; padding: 0; font-family: 'Raleway', Tahoma, Arial; font-size: 18px; font-size: 1.125rem; font-weight: bold; text-transform: uppercase; color: #404040; border-bottom: 4px solid #eee; } /* Comment List */ .comment-list { margin: 0; padding: 0; list-style: none; } .comment { margin: 0 0 1.5em; padding: 1.5em; border: 2px solid #eee; -ms-word-wrap: break-word; word-wrap: break-word; } .comment-meta { float: left; width: 100%; padding: 0; } .comment-meta .comment-author img { float: left; margin-right: 1em; } .bypostauthor { display: block; } .comment-meta .comment-metadata { margin-top: 0.3em; font-size: 14px; font-size: 0.875rem; } .comment-meta .comment-metadata a { margin-right: 1em; } .comment-content { clear: left; padding: 0.2em 0 0; } .comment-content a { word-wrap: break-word; } .comment ol.children { list-style: none; } .comment .comment-respond { margin-top: 2em; } /* Comment Pagination */ .comment-navigation { margin: 0 0 1.5em; padding: 0.5em 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: 14px; font-size: 0.875rem; } .comment-navigation .nav-previous { float: left; } .comment-navigation .nav-next { float: right; } .comment-navigation .nav-previous a:before { margin-right: 3px; content: "\00AB"; } .comment-navigation .nav-next a:after { margin-left: 4px; content: "\00BB"; } /* Comment Form */ .comment-form { padding: 0; } .comment-form label { display: inline-block; min-width: 150px; font-weight: bold; } .comment-form textarea { margin-top: 0.4em; } .comment-form .submit { padding: 1em 1.6em; } .comment-reply-title small a { margin-left: 1em; text-decoration: underline; font-size: 14px; font-size: 0.875rem; font-weight: normal; } /*-------------------------------------------------------------- # 12.0 - Footer --------------------------------------------------------------*/ .footer-wrap { border-top: 1px solid #ddd; background: #fff; } .site-footer { font-size: 14px; font-size: 0.875rem; } .site-footer .site-info { float: left; padding: 2em 0; } /*-------------------------------------------------------------- # 13.0 - Media --------------------------------------------------------------*/ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } /*-------------------------------------------------------------- ## 13.1 - Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; } .wp-caption-text { text-align: center; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } /*-------------------------------------------------------------- ## 13.2 - Galleries --------------------------------------------------------------*/ .gallery { margin-bottom: 1.5em; } .gallery-item { display: inline-block; margin: 0; padding: 1em 1.5em 0 0; text-align: center; vertical-align: top; width: 100%; box-sizing: border-box; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-caption { display: block; } /*-------------------------------------------------------------- # 14.0 - Media Queries --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## 14.1 - Desktop X-Large ( < 1200px ) --------------------------------------------------------------*/ @media only screen and (max-width: 80em) { .site-content { padding-top: 2em; } .content-area { padding-right: 3em; } } @media only screen and (max-width: 75em) { .main-navigation-menu a { font-size: 14px; font-size: 0.875rem; padding: 1.3em 1.1em; } .page-title, .entry-title { font-size: 36px; font-size: 2.25rem; } .post-layout-small .content-area .type-post .entry-title { font-size: 26px; font-size: 1.625rem; } } /*-------------------------------------------------------------- ## 14.2 - Desktop Large ( < 1120px ) --------------------------------------------------------------*/ @media only screen and (max-width: 70em) { .main-navigation-menu a { font-size: 13px; font-size: 0.8125rem; padding: 1.5em 1em; } .widget-magazine-posts .large-post .entry-title { font-size: 22px; font-size: 1.375rem; } .widget-magazine-posts .medium-post .entry-title { font-size: 15px; font-size: 0.9375rem; } .widget-magazine-posts .small-post .entry-title { font-size: 14px; font-size: 0.875rem; } .widget-magazine-posts-boxed .magazine-posts-boxed-horizontal .large-post .more-link { display: none; } } /*-------------------------------------------------------------- ## 14.2 - Desktop Medium ( < 1040px ) --------------------------------------------------------------*/ @media only screen and (max-width: 65em) { .widget-magazine-posts-boxed .magazine-posts-boxed-horizontal .large-post .entry-content { display: none; } } /*-------------------------------------------------------------- ## 14.3 - Desktop Small ( < 960px ) --------------------------------------------------------------*/ @media only screen and (max-width: 60em) { .page-title, .entry-title { font-size: 32px; font-size: 2rem; } .post-layout-small .content-area .type-post .entry-title { font-size: 24px; font-size: 1.5rem; } /*** Mobile Main Navigation ***/ /* Reset */ .primary-navigation { float: none; margin: 0; } .main-navigation-menu li { float: none; position: static; } .main-navigation-menu ul, .mega-menu-item .mega-menu-content, .mega-menu-item .mega-menu-content .mega-menu-widget { position: static; display: block; left: auto; top: auto; } .main-navigation-menu ul a { width: auto; float: none; } .main-navigation-menu li ul ul { top: auto; left: auto; margin: 0; } .main-navigation-menu > .menu-item-has-children > a:after, .main-navigation-menu ul .menu-item-has-children > a:after { display: none; } /* Main Navigation Toggle */ .main-navigation-toggle { float: right; display: inline-block; margin: 1em 0; padding: 1em; background: none; } .main-navigation-toggle:hover, .main-navigation-toggle:focus, .main-navigation-toggle:active { cursor: pointer; background: none; } .main-navigation-toggle:after { float: left; display: inline-block; font-size: 32px; line-height: 1; font-family: 'Genericons'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: inherit; vertical-align: middle; content: '\f419'; color: #404040; } .main-navigation-toggle:hover:after { color: #22aadd; } /* Main Navigation Menu */ .main-navigation-menu { float: left; width: 100%; display: none; margin-bottom: 1em; border-top: 4px solid #404040; } .main-navigation-menu a { display: block; clear: left; font-size: 15px; font-size: 0.9375rem; padding: 1.2em; border-bottom: 1px dotted #ccc; } .main-navigation-menu li:last-child a { border-bottom: none; } .main-navigation-menu ul { float: none; width: 100%; border: none; } .main-navigation-menu ul a { display: block; width: 100%; padding-left: 2em; } .main-navigation-menu ul li ul a { padding-left: 4em; } .main-navigation-menu ul li ul li ul a { padding-left: 6em; } .main-navigation-menu ul li ul li ul li ul a { padding-left: 8em; } .main-navigation-menu ul li:last-child a { border-bottom: 1px dotted #ccc; } .main-navigation-menu ul ul { border-top: 1px dotted #ccc; } /* Mobile Submenu Dropdowns */ .main-navigation-menu .submenu-dropdown-toggle { float: right; display: block; margin: 0; padding: 0.8em 1.2em; } .main-navigation-menu .submenu-dropdown-toggle:hover { cursor: pointer; } .main-navigation-menu .submenu-dropdown-toggle:before { font-size: 32px; line-height: 1; font-family: 'Genericons'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: inherit; vertical-align: middle; content: '\f431'; color: #404040; } .main-navigation-menu .submenu-dropdown-toggle:hover:before { color: #22aadd; } .main-navigation-menu .submenu-dropdown-toggle.active:before { content: '\f432'; } .main-navigation-menu ul .submenu-dropdown-toggle { padding: 0.5em 1em; } .main-navigation-menu ul .submenu-dropdown-toggle:before { font-size: 24px; } /* Mega Menu Styling */ .mega-menu-item .mega-menu-content { border-bottom: 1px solid rgba(255,255,255,0.1); } .mega-menu-item .mega-menu-two-columns > li, .mega-menu-item .mega-menu-three-columns > li, .mega-menu-item .mega-menu-five-columns > li { width: 100%; } .mega-menu-item .mega-menu-four-columns > li, .mega-menu-item .mega-menu-six-columns > li { width: 50%; } } /*-------------------------------------------------------------- ## 14.4 - Tablet Large ( < 880px ) --------------------------------------------------------------*/ @media only screen and (max-width: 55em) { .content-area, .site-content .fullwidth-content-area { float: none; width: 100%; padding: 0; } .sidebar { float: none; padding: 2em 0 0; width: 100%; border-top: 4px solid #eee; } /* Magazine Post Widgets */ .widget-magazine-posts-boxed .magazine-posts-boxed-horizontal .large-post .entry-content, .widget-magazine-posts-boxed .magazine-posts-boxed-horizontal .large-post .more-link { display: inline-block; } .widget-magazine-posts .large-post .entry-title { font-size: 24px; font-size: 1.5rem; } .widget-magazine-posts .medium-post .entry-title { font-size: 16px; font-size: 1rem; } .widget-magazine-posts .small-post .entry-title { font-size: 15px; font-size: 0.9375rem; } } /*-------------------------------------------------------------- ## 14.5 - Tablet Medium ( < 800px ) --------------------------------------------------------------*/ @media only screen and (max-width: 50em) { .site-branding .site-title { font-size: 35px; font-size: 2.1875rem; } .main-navigation-toggle:after { font-size: 29px; } /* Magazine Post Widgets */ .widget-magazine-posts .large-post .entry-title { font-size: 22px; font-size: 1.375rem; } .widget-magazine-posts .medium-post .entry-title { font-size: 15px; font-size: 0.9375rem; } .widget-magazine-posts .small-post .entry-title { font-size: 14px; font-size: 0.875rem; } .widget-magazine-posts-boxed .magazine-posts-boxed-horizontal .large-post .more-link { display: none; } } /*-------------------------------------------------------------- ## 14.6 - Tablet Small ( < 720px ) --------------------------------------------------------------*/ @media only screen and (max-width: 45em) { .widget-magazine-posts-boxed .magazine-posts-boxed-horizontal .large-post .entry-content { display: none; } } /*-------------------------------------------------------------- ## 14.7 - Mobile Extra Large ( < 640px ) --------------------------------------------------------------*/ @media only screen and (max-width: 40em) { .page-title, .entry-title { font-size: 28px; font-size: 1.75rem; } .post-layout-small .content-area .type-post .entry-title { font-size: 22px; font-size: 1.375rem; } .entry-content { font-size: 16px; font-size: 1rem; } /* Magazine Post Widgets */ .widget-magazine-posts-grid .magazine-posts-grid-row { margin-right: 0; } .widget-magazine-posts-grid .medium-post-row { margin-right: -1.2em; } .widget-magazine-posts-grid .magazine-posts-grid-row .large-post, .widget-magazine-posts-boxed .magazine-posts-boxed-horizontal .large-post .wp-post-image, .widget-magazine-posts-boxed .magazine-posts-boxed-vertical .large-post, .widget-magazine-posts-columns .magazine-posts-column-left { float: none; width: 100%; padding: 0; } .widget-magazine-posts-boxed .magazine-posts-boxed-vertical .small-posts, .widget-magazine-posts-columns .magazine-posts-column-right { width: 100%; padding-top: 1em; margin-left: 0; padding-left: 0; } .widget-magazine-posts .large-post .wp-post-image { float: left; margin: 0 1.5em 0 0; max-width: 50%; } .widget-magazine-posts-boxed .magazine-posts-boxed-horizontal .large-post .post-content { float: right; width: 50%; padding-left: 1.5em; } .widget-magazine-posts-grid .magazine-posts-grid-row .large-post { clear: left; } .widget-magazine-posts-grid .magazine-posts-grid-row .large-post .wp-post-image { margin-bottom: 1em; } .widget-magazine-posts .large-post .entry-content { display: none; } .widget-magazine-posts .small-post .entry-title { font-size: 15px; font-size: 0.9375rem; } /* Mega Menu Styling */ .mega-menu-item .mega-menu-four-columns > li, .mega-menu-item .mega-menu-six-columns > li { width: 100%; } } /*-------------------------------------------------------------- ## 14.8 - Mobile Large ( < 560px ) --------------------------------------------------------------*/ @media only screen and (max-width: 35em) { .site-branding .site-title { font-size: 32px; font-size: 2rem; } .main-navigation-toggle:after { font-size: 26px; } .widget-magazine-posts-grid .medium-post-row { margin-right: 0; } .widget-magazine-posts .medium-post { float: none; width: 100%; padding-right: 0; } .widget-magazine-posts .medium-post .wp-post-image { float: left; margin: 0 1em 0 0; max-width: 120px; } .widget-magazine-posts .large-post .entry-title { font-size: 20px; font-size: 1.25rem; } } /*-------------------------------------------------------------- ## 14.9 - Mobile Medium ( < 480px ) --------------------------------------------------------------*/ @media only screen and (max-width: 30em) { .container { padding-left: 1.5em; padding-right: 1.5em; } .page-title, .entry-title { font-size: 24px; font-size: 1.5rem; } .post-layout-small .content-area .type-post .entry-title { font-size: 20px; font-size: 1.25rem; } .alignright, .alignleft { float: none; margin: 1em 0; } /* Magazine Homepage: Category Post Widgets */ .widget-magazine-posts .medium-post .wp-post-image, .widget-magazine-posts .small-post .wp-post-image { max-width: 30%; } .widget-magazine-posts .medium-post .entry-title { font-size: 14px; font-size: 0.875rem; } .widget-magazine-posts .large-post .wp-post-image, .widget-magazine-posts-grid .magazine-posts-grid-row .large-post .wp-post-image { float: none; margin: 0 0 0.5em 0; max-width: 100%; } .widget-magazine-posts-boxed .magazine-posts-boxed-horizontal .large-post .post-content { float: none; width: 100%; padding: 0; } .widget-magazine-posts .large-post .entry-title { font-size: 22px; font-size: 1.375rem; } .widget-magazine-posts .large-post .entry-content, .widget-magazine-posts .large-post .entry-content .more-link { display: inline-block; } } /*-------------------------------------------------------------- ## 14.9.5 - Mobile Small ( < 320px ) --------------------------------------------------------------*/ @media only screen and (max-width: 25em) { .post-layout-small .content-area .type-post .wp-post-image { float: none; max-width: 100%; margin: 0 0 0.5em; padding: 0; } } /*-------------------------------------------------------------- ## 14.10 - Mobile Small ( < 320px ) --------------------------------------------------------------*/ @media only screen and (max-width: 20em) { .site-branding .site-title { font-size: 28px; font-size: 1.75rem; } .main-navigation-toggle { padding: 0.75em; } .main-navigation-toggle:after { font-size: 24px; } .page-title, .entry-title { font-size: 20px; font-size: 1.25rem; } .entry-meta span { display: block; } .entry-meta span:after { display: none; } } /*-------------------------------------------------------------- # 15.0 - Theme Option Styles --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## 15.1 - Sidebar Left Layout --------------------------------------------------------------*/ .sidebar-left .content-area { float: right; padding-right: 0; padding-left: 4em; } .sidebar-left .sidebar { float: left; } /*-------------------------------------------------------------- ## 15.2 - Sticky Header --------------------------------------------------------------*/ .sticky-header .fixed-header { position: fixed; z-index: 100; top: 0; width: 100%; } .sticky-header.admin-bar .fixed-header { top: 32px; } .sticky-header .fixed-header .site-branding, .sticky-header .fixed-header .primary-navigation, .sticky-header .fixed-header .main-navigation-toggle { margin: 0; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .sticky-header .fixed-header .main-navigation-toggle { padding: 1em; } .sticky-header .fixed-header .site-branding .site-title { margin: 0.25em 0 0; font-size: 28px; font-size: 1.75rem; } .sticky-header .fixed-header .site-branding .custom-logo { margin-top: 1em; max-height: 25px; width: auto; } @media only screen and (max-width: 60em) { .sticky-header .fixed-header .main-navigation-menu { margin-top: 0.5em; } } @media only screen and (max-width: 782px) { .sticky-header.admin-bar .fixed-header { top: 46px; } } @media only screen and (max-width: 600px) { .sticky-header.admin-bar .fixed-header { top: 0; } } /*-------------------------------------------------------------- # 16.0 - Media Query Fixes --------------------------------------------------------------*/ /* Ensure navigation is visible on desktop view */ @media only screen and (min-width: 60.001em) { .main-navigation-menu { display: block !important; } }