/* Theme Name: Admiral Theme URI: https://themezee.com/themes/admiral/ Author: ThemeZee Author URI: https://themezee.com Description: Admiral is a beautiful and stylish Magazine WordPress theme featuring a unique and responsive two sidebar layout. The theme comes with several awesome features, including a featured posts slideshow, a magazine homepage template, a widgetized header area, two different post layouts and support for infinite scroll. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: admiral Tags: three-columns, light, blue, custom-background, custom-menu, 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, two-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. Admiral 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 - 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: #303030; font-family: 'Open Sans', Tahoma, Arial; font-size: 16px; font-size: 1rem; line-height: 1.75; } 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: #e5e5e5; /* Fallback for when there is no custom background color defined. */ } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 3em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } table { margin: 0 0 1.5em; width: 100%; } a { color: #ee4444; text-decoration: underline; } a:link, a:visited { color: #ee4444; } a:hover, a:focus, a:active { color: #303030; text-decoration: none; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /*-------------------------------------------------------------- # 4.0 - Forms --------------------------------------------------------------*/ button, input[type="button"], input[type="reset"], input[type="submit"] { margin: 0; padding: 0.6em 1em; font-family: 'Raleway', Tahoma, Arial; font-size: 15px; font-size: 0.9375rem; font-weight: bold; text-transform: uppercase; color: #fff; background: #ee4444; border: none; text-decoration: none; } 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: #303030; } 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 { content: ""; display: table; } .clearfix:after { clear: both; } /*-------------------------------------------------------------- # 8.0 - Layout Structure --------------------------------------------------------------*/ .container { max-width: 1440px; width: 100%; margin: 0 auto; padding: 0 2em; } .site-content { display: -webkit-flex; display: flex; flex-flow: row wrap; margin-top: -3.5em; } .content-area { order: 2; width: 55%; background: #fff; padding: 0 2em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .main-sidebar { width: 25%; order: 1; background: #f5f5f5; } .small-sidebar { width: 20%; order: 3; background: #f5f5f5; } .sidebar-toggle { display: none; } /*-------------------------------------------------------------- # 9.0 - Header --------------------------------------------------------------*/ .site-header { background: #fff; padding-bottom: 3.5em; } .header-main { padding: 2.5em 2em; } .site-branding { float: left; max-width: 100%; margin: 0 1em; 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: #ee4444; font-family: 'Raleway', sans-serif; font-size: 40px; font-size: 2.5rem; font-weight: bold; text-decoration: none; } .site-title a:link, .site-title a:visited { color: #ee4444; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .site-title a:hover, .site-title a:active { color: #303030; } /* Header Widgets */ .header-widgets { display: inline; } .header-widget { float: right; margin: 1em 0 0 1.5em; } .header-widget ul { margin: 0; padding: 0; } .header-widget-title { margin: 0 0 0.5em; } /*-------------------------------------------------------------- # 10.0 - Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## 10.1 - Main Navigation --------------------------------------------------------------*/ .primary-navigation-wrap { margin: -1em 0 2em; } .main-navigation-menu { margin: 0; padding: 0; list-style: none; } .main-navigation-menu li { margin: 0; padding: 0; } .main-navigation-menu a { display: block; font-family: 'Raleway', Tahoma, Arial; font-size: 14px; font-size: 0.875rem; font-weight: bold; text-transform: uppercase; text-decoration: none; padding: 1em; border-bottom: 1px solid #ccc; } .main-navigation-menu a:before { display: inline-block; margin: 0 0.3em 0 0; font-size: 22px; line-height: 1; font-family: 'Genericons'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: inherit; vertical-align: top; color: #ee4444; content: '\f431'; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .main-navigation-menu a:link, .main-navigation-menu a:visited { color: #303030; } .main-navigation-menu a:hover, .main-navigation-menu a:active { background: #fff; } .main-navigation-menu ul { display: inline-block; margin: 0; padding: 0; list-style: none; width: 100%; } .main-navigation-menu ul a { display: block; padding-left: 3em; font-size: 13px; font-size: 0.8125rem; } .main-navigation-menu ul a:before { margin: 0.1em 0.3em 0 0; font-size: 18px; } .main-navigation-menu ul li ul a { padding-left: 5em; } .main-navigation-menu ul li ul li ul a { padding-left: 7em; } .main-navigation-menu ul li ul li ul li ul a { padding-left: 9em; } .main-navigation-menu li.current-menu-item > a { background: #fcfcfc; } /* Mobile Submenu Dropdowns */ .main-navigation-menu .submenu-dropdown-toggle { float: right; display: block; margin: 0; padding: 0.7em 1em; background: none; } .main-navigation-menu .submenu-dropdown-toggle:hover { cursor: pointer; } .main-navigation-menu .submenu-dropdown-toggle:before { font-size: 28px; line-height: 1; font-family: 'Genericons'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: inherit; vertical-align: middle; content: '\f431'; color: #ee4444; } .main-navigation-menu .submenu-dropdown-toggle:hover:before, .main-navigation-menu .submenu-dropdown-toggle:active:before { color: #303030; } .main-navigation-menu .submenu-dropdown-toggle.active:before { content: '\f432'; } .main-navigation-menu ul li .submenu-dropdown-toggle { padding: 0.65em 1em; } .main-navigation-menu ul li .submenu-dropdown-toggle:before { font-size: 24px; } /*-------------------------------------------------------------- ## 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; padding: 1em 1.5em; max-width: 100%; -ms-word-wrap: break-word; word-wrap: break-word; } .widget-header { margin: 0 0 1em; } .widget-title { display: block; margin: 0; padding: 0; font-family: 'Raleway', Tahoma, Arial; font-size: 15px; font-size: 0.9375rem; text-transform: uppercase; color: #303030; } .widget ul { margin: 0; padding: 0; list-style: circle inside; } .widget ul .children, .widget ul .sub-menu { padding: 0; margin: 0.5em 0 0.5em 1em; } /* Make sure select elements fit in widgets. */ .widget select { max-width: 100%; } .widget a:link, .widget a:visited { text-decoration: none; } .widget-title a:link, .widget-title a:visited { color: #303030; } .widget-title a:hover, .widget-title a:active { color: #ee4444; } /* Small Sidebar */ .small-sidebar .widget a:link, .small-sidebar .widget a:visited { color: #2299dd; } .small-sidebar .widget a:hover, .small-sidebar .widget a:active { color: #303030; } .small-sidebar button, .small-sidebar input[type="button"], .small-sidebar input[type="reset"], .small-sidebar input[type="submit"] { background: #2299dd; } .small-sidebar button:hover, .small-sidebar input[type="button"]:hover, .small-sidebar input[type="reset"]:hover, .small-sidebar input[type="submit"]:hover, .small-sidebar button:active, .small-sidebar input[type="button"]:active, .small-sidebar input[type="reset"]:active, .small-sidebar input[type="submit"]:active { background: #303030; } /*-------------------------------------------------------------- ## 11.1 - Default Widgets --------------------------------------------------------------*/ /* 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; min-width: 300px; width: 100%; padding: 0.5em 1.5em 0.5em 0.7em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; } .search-form .search-submit { position: absolute; top: 0; right: 0; border: none; padding: 0.65em 0.75em 0 0.2em; cursor: pointer; } .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 --------------------------------------------------------------*/ .magazine-homepage-widget-area .widget { margin: 0 0 2em; padding: 0; } .widget-magazine-posts { margin-bottom: -1em; } .widget-magazine-posts .type-post { margin: 0 0 2em 0; padding: 0; border: none; box-shadow: none; background: none; } .widget-magazine-posts .type-post .entry-title { display: inline; } .widget-magazine-posts .type-post .entry-meta { margin: 0; } .widget-magazine-posts .type-post .entry-content { font-size: 16px; font-size: 1rem; } .widget-magazine-posts .type-post .entry-content p { margin-bottom: 0.5em; } .widget-magazine-posts .large-post .entry-title { font-size: 20px; font-size: 1.25rem; } .widget-magazine-posts .medium-post { float: left; display: block; width: 33.33333333%; padding-right: 2em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .widget-magazine-posts .medium-post .entry-title, .widget-magazine-posts .small-post .entry-title { font-size: 15px; font-size: 0.9375rem; } .widget-magazine-posts .small-post { float: left; display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .widget-magazine-posts .small-post .wp-post-image { float: left; margin: 0 1.5em 0 0; max-width: 40%; } .widget-magazine-posts .medium-post .entry-meta, .widget-magazine-posts .small-post .entry-meta { font-size: 13px; font-size: 0.8125rem; } /* 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; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .widget-magazine-posts-boxed .magazine-posts-boxed-horizontal .large-post .post-content { float: right; width: 50%; padding-left: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; 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; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .widget-magazine-posts-boxed .magazine-posts-boxed-vertical .small-posts { width: 50%; margin-left: 50%; padding-left: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; 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; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Magazine Posts Columns Widget */ .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; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .widget-magazine-posts-columns .magazine-posts-column-right { margin-left: 50%; width: 50%; padding-left: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; 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, .comments-area { margin: 0 0 2em; padding: 0; max-width: 100%; } .entry-title { font-family: 'Raleway', Tahoma, Arial; font-size: 28px; font-size: 1.75rem; padding: 0; margin: 0; color: #ee4444; -ms-word-wrap: break-word; word-wrap: break-word; } .entry-title a:link, .entry-title a:visited { color: #ee4444; text-decoration: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .entry-title a:hover, .entry-title a:active{ color: #303030; } .type-post .wp-post-image, .type-page .wp-post-image { margin: 0 0 0.5em; } .entry-content { font-size: 17px; font-size: 1.0625rem; } .entry-content p:first-child { margin-top: 0.5em; } .entry-content p:last-child { margin-bottom: 0; } .sticky {} /* Page Links | wp_link_pages() */ .page-links { margin: 0; word-spacing: 1em; font-weight: bold; } /* Entry Meta */ .entry-meta { margin: 0.5em 0 0; padding: 0; color: #999; font-size: 14px; font-size: 0.875rem; } .entry-meta a:link, .entry-meta a:visited { color: #999; text-decoration: none; } .entry-meta a:hover, .entry-meta a:active { color: #666; } .entry-meta span:after { display: inline-block; -webkit-font-smoothing: antialiased; font: normal 16px 'Genericons'; vertical-align: middle; color: #999; content: '\f428'; margin-left: 0.2em; } .entry-meta span:last-child:after { display: none; } /* Entry Author */ .posted-by { margin: 1em 0; } .posted-by .avatar { float: left; margin: 0 0.75em 0 0; border-radius: 3em; } /* Entry Tags & Tagcloud Widget */ .entry-tags { margin: 0 0 1.5em; } .widget_tag_cloud .tagcloud, .entry-tags .meta-tags { font-size: 14px; font-size: 0.875rem; } .widget_tag_cloud .tagcloud:before, .widget_tag_cloud .tagcloud:after, .entry-tags .meta-tags:before, .entry-tags .meta-tags:after { content: ""; display: table; } .widget_tag_cloud .tagcloud:after, .entry-tags .meta-tags:after { clear: both; } .widget_tag_cloud .tagcloud a, .entry-tags .meta-tags a { float: left; display: inline-block; margin: 0 2px 2px 0; padding: 0.2em 0.5em; text-decoration: none; background: #303030; font-size: 13px !important; font-size: 0.8125rem !important; text-transform: uppercase; } .widget_tag_cloud .tagcloud a:link, .widget_tag_cloud .tagcloud a:visited, .entry-tags .meta-tags a:link, .entry-tags .meta-tags a:visited { color: #fff; } .widget_tag_cloud .tagcloud a:hover, .widget_tag_cloud .tagcloud a:active, .entry-tags .meta-tags a:hover, .entry-tags .meta-tags a:active { color: #fff; background: #ee4444; } /* Small Sidebar */ .small-sidebar .widget_tag_cloud .tagcloud a:hover, .small-sidebar .widget_tag_cloud .tagcloud a:active { background: #2299dd; } /* Post Navigation */ .post-navigation { margin: 1em 0 0; padding: 0.6em 0 0; border-top: 1px solid #ddd; } .post-navigation .nav-links:before, .post-navigation .nav-links:after { content: ""; display: table; } .post-navigation .nav-links:after { clear: both; } .post-navigation .nav-links .nav-previous { float: left; } .post-navigation .nav-links .nav-next { float: right; } /* Theme Pagination */ .post-pagination { margin: 0 0 3em; } .post-pagination a, .post-pagination .current { display: inline-block; margin: 0 3px 3px 0; padding: 0.4em 1em; text-align: center; text-decoration: none; color: #fff; background: #303030; } .post-pagination a:link, .post-pagination a:visited { color: #fff; } .post-pagination a:hover, .post-pagination a:active, .post-pagination .current { background: #ee4444; } /* Infinite Scroll Pagination */ .infinite-scroll .post-pagination { display: none; } .infinite-scroll .post-wrapper:before, .infinite-scroll .post-wrapper:after { content: ""; display: table; } .infinite-scroll .post-wrapper:after { clear: both; } .infinite-scroll #infinite-handle span { display: inline-block; margin: 0 0 2em; background: #303030; padding: 0.6em 1em; font-family: 'Raleway', Tahoma, Arial; font-size: 15px; font-size: 0.9375rem; font-weight: bold; text-transform: uppercase; text-decoration: none; } .infinite-scroll #infinite-handle span:hover { background: #ee4444; } /* Archives and Search Heading */ .page-header, .blog-header, .sidebar-header, .archive-header { margin: 0 0 1em; padding: 0 1.25em; min-height: 3.5em; color: #303030; } .blog-header, .archive-header, .page-header { margin: 0 -2em 2em; background: #f5f5f5; border-top: 1px solid #eee; border-bottom: 1px solid #ddd; } .main-sidebar .sidebar-header { color: #fff; background: #ee4444; border-bottom: 1px solid #ee4444; } .small-sidebar .sidebar-header { color: #fff; background: #2299dd; border-bottom: 1px solid #2299dd; } .blog-title, .page-title, .sidebar-title, .archive-title { font-family: 'Raleway', Tahoma, Arial; font-size: 15px; font-size: 0.9375rem; text-transform: uppercase; padding: 0.95em 0 0; margin: 0; -ms-word-wrap: break-word; word-wrap: break-word; } .blog-title a, .page-title a, .sidebar-title a, .archive-title a { text-decoration: none; } /* Breadcrumbs */ .breadcrumbs { margin: -0.5em 0 1.5em; padding: 0; -ms-word-wrap: break-word; word-wrap: break-word; } .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; } /*-------------------------------------------------------------- ## 12.1 - Post Layouts --------------------------------------------------------------*/ /* Post Styling */ .post-wrapper .type-post .entry-title { font-size: 20px; font-size: 1.25rem; } .post-wrapper .type-post .entry-content { font-size: 16px; font-size: 1rem; } /* One Column Layout */ .post-layout-one-column .post-wrapper .type-post { padding: 0 0 1.5em; border-bottom: 1px solid #eee; } .post-layout-one-column .post-wrapper .type-post .wp-post-image { float: left; max-width: 45%; margin: 0 2em 1em 0; padding: 0; } .post-layout-one-column .post-wrapper .type-post .entry-title { display: inline; } /* Two Column Layout */ .post-layout-two-columns .post-wrapper { display: flex; flex-wrap: wrap; margin-right: -2em; } .post-layout-two-columns .post-wrapper .post-column { width: 50%; padding-right: 2em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .post-layout-two-columns .post-wrapper .post-column .type-post .entry-meta { margin: 0; } .post-layout-two-columns .post-wrapper .post-column:nth-child(2n + 1) { clear: left; } /*-------------------------------------------------------------- # 11.0 - Comments --------------------------------------------------------------*/ /* Comment Header */ .comments-header, .comment-reply-title { margin: 0 0 1em 0; } .comments-header .comments-title, .comment-reply-title span { font-family: 'Raleway', Tahoma, Arial; font-size: 15px; font-size: 0.9375rem; text-transform: uppercase; padding: 0.95em 0 0; margin: 0; -ms-word-wrap: break-word; word-wrap: break-word; } /* Comment List */ .comment-list { margin: 0; padding: 0; list-style: none; } .comment { margin: 0 0 1.5em; padding: 1.5em 0 0; border-top: 1px 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; text-decoration: none; } .comment-content { clear: left; padding: 0.2em 0 0; } .comment-content a { word-wrap: break-word; } .comment ol.children { list-style: none; margin: 1.5em 0 0; } .comment .comment-respond { margin-top: 1.5em; } /* Comment Pagination */ .comment-navigation { margin: 0 0 1.5em; padding: 0; font-size: 14px; font-size: 0.875rem; } .comment-navigation .nav-previous { float: left; } .comment-navigation .nav-next { float: right; } /* 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 .form-submit { margin-bottom: 1em; } .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 { background: #fff; } .footer-content { background: #ee4444; font-size: 15px; font-size: 0.9375rem; } .footer-content a:link, .footer-content a:visited { color: #fff; } .footer-content .site-info { float: left; padding: 1em 2em; color: #fff; } /*-------------------------------------------------------------- # 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; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-caption { display: block; } /*-------------------------------------------------------------- # 14.0 - Media Queries --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## 14.1 - Desktop X-Large ( < 1200px ) --------------------------------------------------------------*/ @media only screen and (max-width: 80em) { .site-content { position: relative; } .content-area { width: 70%; } .main-sidebar { width: 30%; } .blog-header, .archive-header, .page-header { margin-right: 2rem; } .small-sidebar .sidebar-header .sidebar-title { margin-right: 3rem; } .small-sidebar-toggle { display: block; position: absolute; top: 0; right: 2rem; z-index: 300; padding: 0.95rem 1.25rem; min-height: 3.5rem; background: #2299dd; } .small-sidebar-toggle:hover, .small-sidebar-toggle:active, .small-sidebar-toggle:focus { background: #2299dd; } .small-sidebar-toggle:after { float: left; display: inline-block; font-size: 24px; line-height: 1; font-family: 'Genericons'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: inherit; vertical-align: middle; content: '\f510'; color: #fff; } .small-sidebar-toggle.active:after { content: '\f50e'; } .small-sidebar { display: none; position: absolute; top: 0; right: 2em; width: 80%; height: 100%; overflow: hidden; z-index: 200; } } /*-------------------------------------------------------------- ## 14.2 - Desktop Large ( < 1120px ) --------------------------------------------------------------*/ @media only screen and (max-width: 70em) { .header-widget { max-width: 70%; } } /*-------------------------------------------------------------- ## 14.2 - Desktop Medium ( < 1040px ) --------------------------------------------------------------*/ @media only screen and (max-width: 65em) { } /*-------------------------------------------------------------- ## 14.3 - Desktop Small ( < 960px ) --------------------------------------------------------------*/ @media only screen and (max-width: 60em) { .content-area { width: 100%; } .blog-header, .archive-header, .page-header { margin-left: 2rem; } .main-sidebar .sidebar-header .sidebar-title { margin-left: 3rem; } .main-sidebar-toggle { display: block; position: absolute; top: 0; left: 2rem; z-index: 300; padding: 0.95rem 1.25rem; min-height: 3.5rem; background: #ee4444; } .main-sidebar-toggle:hover, .main-sidebar-toggle:active, .main-sidebar-toggle:focus { background: #ee4444; } .main-sidebar-toggle:after { float: left; display: inline-block; font-size: 24px; line-height: 1; font-family: 'Genericons'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: inherit; vertical-align: middle; content: '\f419'; color: #fff; } .main-sidebar-toggle.active:after { content: '\f406'; } .main-sidebar { display: none; position: absolute; top: 0; right: left; width: 90%; height: 100%; overflow: hidden; z-index: 200; } .header-main { padding-top: 1.5em; } .site-branding { float: none; text-align: center; margin: 0; } .header-widgets { display: block; text-align: center; } .header-widget { float: none; display: inline-block; margin: 1em 0 0; vertical-align: top; max-width: 100%; } .header-widget .search-form { max-width: 300px; } } /*-------------------------------------------------------------- ## 14.4 - Tablet Large ( < 880px ) --------------------------------------------------------------*/ @media only screen and (max-width: 55em) { } /*-------------------------------------------------------------- ## 14.5 - Tablet Medium ( < 800px ) --------------------------------------------------------------*/ @media only screen and (max-width: 50em) { .site-content, .site-footer { padding-left: 0; padding-right: 0; } .main-sidebar, .main-sidebar-toggle { left: 0; } .small-sidebar, .small-sidebar-toggle { right: 0; } /* Magazine Widgets */ .widget-magazine-posts .small-post .entry-meta span:after, .widget-magazine-posts .small-post .entry-meta .meta-author { display: none; } } /*-------------------------------------------------------------- ## 14.6 - Tablet Small ( < 720px ) --------------------------------------------------------------*/ @media only screen and (max-width: 45em) { } /*-------------------------------------------------------------- ## 14.7 - Mobile Extra Large ( < 640px ) --------------------------------------------------------------*/ @media only screen and (max-width: 40em) { .blog-header, .archive-header, .page-header { margin-right: -2rem; } .small-sidebar .sidebar-header .sidebar-title { margin-right: 0; } .small-sidebar-toggle { display: none; } .small-sidebar { display: block !important; position: static; top: auto; right: auto; max-width: 100% !important; width: 100%; height: auto; overflow: auto; } .entry-title, .post-wrapper .type-post .entry-title { font-size: 24px; font-size: 1.5rem; } .post-wrapper .type-post .entry-content { font-size: 17px; font-size: 1.0625rem; } .entry-meta { margin: 0; } /* One Column Layout */ .post-layout-one-column .post-wrapper .type-post { padding: 0; border-bottom: none; } .post-layout-one-column .post-wrapper .type-post .wp-post-image { float: none; max-width: 100%; margin: 0 0 0.5em; } /* Two Column Layout */ .post-layout-two-columns .post-wrapper { display: block; margin-right: 0; } .post-layout-two-columns .post-wrapper .post-column { width: 100%; padding-right: 0; } /* Magazine Post Widgets */ .widget-magazine-posts-grid .large-post-row, .widget-magazine-posts-grid .medium-post-row, .widget-magazine-posts-boxed .magazine-posts-boxed-horizontal .medium-posts { margin-right: 0; } .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-horizontal .large-post .post-content, .widget-magazine-posts-boxed .magazine-posts-boxed-vertical .large-post, .widget-magazine-posts-columns .magazine-posts-column-left, .widget-magazine-posts .medium-post { 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-boxed .magazine-posts-boxed-horizontal .large-post .more-link, .widget-magazine-posts-boxed .magazine-posts-boxed-horizontal .large-post .entry-content { display: inline-block; } .widget-magazine-posts-boxed .magazine-posts-boxed-horizontal .large-post .wp-post-image, .widget-magazine-posts .large-post .wp-post-image { margin: 0 0 0.5em; } .widget-magazine-posts .medium-post .wp-post-image { float: left; margin: 0 1.5em 0 0; max-width: 40%; } .widget-magazine-posts .large-post .entry-title { font-size: 24px; font-size: 1.5rem; } .widget-magazine-posts .medium-post .entry-title, .widget-magazine-posts .small-post .entry-title { font-size: 18px; font-size: 1.125rem; } .widget-magazine-posts .small-post .entry-meta span:after, .widget-magazine-posts .small-post .entry-meta .meta-author { display: inline-block; } .widget-magazine-posts .small-post .entry-meta span:last-child:after { display: none; } } /*-------------------------------------------------------------- ## 14.9 - Mobile Medium ( < 480px ) --------------------------------------------------------------*/ @media only screen and (max-width: 30em) { .site-branding .site-title { font-size: 36px; font-size: 2.25rem; } .entry-title, .post-wrapper .type-post .entry-title { font-size: 22px; font-size: 1.375rem; } .entry-content, .post-wrapper .type-post .entry-content { font-size: 16px; font-size: 1rem; } .alignright, .alignleft { float: none; margin: 1em 0; } /* Magazine Homepage: Category Post Widgets */ .widget-magazine-posts .large-post .entry-title { font-size: 22px; font-size: 1.375rem; } .widget-magazine-posts .medium-post .entry-title, .widget-magazine-posts .small-post .entry-title { font-size: 16px; font-size: 1rem; } .widget-magazine-posts .small-post .entry-meta span:after, .widget-magazine-posts .small-post .entry-meta .meta-author { display: none; } } /*-------------------------------------------------------------- ## 14.10 - Mobile Small ( < 320px ) --------------------------------------------------------------*/ @media only screen and (max-width: 20em) { .site-branding .site-title { font-size: 32px; font-size: 2rem; } .entry-title, .post-wrapper .type-post .entry-title { font-size: 20px; font-size: 1.25rem; } .entry-meta .meta-date, .entry-meta .meta-comments { display: block; } .entry-meta span:after { display: none; } /* Magazine Homepage: Category Post Widgets */ .widget-magazine-posts .large-post .entry-title { font-size: 20px; font-size: 1.25rem; } .widget-magazine-posts .medium-post .entry-title, .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 { display: none; } } /*-------------------------------------------------------------- # 16.0 - Media Query Fixes --------------------------------------------------------------*/ /* Ensure small sidebar is visible on desktop view */ @media only screen and (min-width: 80.01em) { .small-sidebar { display: block !important; max-width: 100% !important; } } /* Ensure main sidebar is visible on desktop view */ @media only screen and (min-width: 60.01em) { .main-sidebar { display: block !important; max-width: 100% !important; } }