/* Theme Name: Beyond Expectations Theme URI: http://ninjablume.com/themes/beyond-expectations Author: Benjamin Lu Author URI: http://ninjablume.com Description: Beyond Expectations is a responsive WordPress theme with many features such as custom header, custom menu, feature images and many more. License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, white, dark, one-column, two-columns, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, sticky-post, threaded-comments, translation-ready Version: 0.1.0 Text Domain: beyond-expectations 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. */ /* ================================================================================================ Table of Content ================================================================================================ 1.0 - Normalize (Reset) 2.0 - Micro Clearfix Hack 3.0 - Typography 4.0 - Elements 5.0 - Forms 6.0 - Navigation (Links) 7.0 - Navigation (Primary Navigation) 8.0 - Navigation (Footer Navigation) 9.0 - Navigation (Social Navigation) 10.0 - Navigation (Pagination Navigation) 11.0 - Navigation (Search Toggle) 12.0 - Alignments 13.0 - Basic Structure 14.0 - Header Area 15.0 - Content Area 16.0 - Content Area (Archives) 17.0 - Content Area (Comments) 18.0 - Content Area (404 and Search) 19.0 - Content Area (Attachments) 20.0 - Content Area (Full Width) 21.0 - Widget Area 22.0 - Footer Area 23.0 - Media Area (Captions) 24.0 - Media Are (Galleries) 25.0 - Media Queries (Mobile Large) 26.0 - Media Queries (Tablet Small) ================================================================================================ */ /* ================================================================================================ 1.0 - Normalize (Reset) ================================================================================================ */ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 0; margin-top: 10px; max-width: 100%; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* ================================================================================================ 2.0 - Micro Clearfix Hack ================================================================================================ */ /** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; } /* ================================================================================================ 3.0 - Typography ================================================================================================ */ body { font-family: 'Ubuntu', sans-serif; font-size: 18px; font-weight: 300; } /* ================================================================================================ 4.0 - Elements ================================================================================================ */ img { height: auto; max-width: 100%; } /* ================================================================================================ 5.0 - Forms ================================================================================================ */ /* ================================================================================================ 6.0 - Navigation (Links) ================================================================================================ */ a { color: #1a1a1a; text-decoration: none; } a:hover { color: #007acc; } /* ================================================================================================ 7.0 - Navigation (Primary Navigation) ================================================================================================ */ .site-navigation { background: #000000; } .primary-navigation { background: #000000; clear: both; display: block; position: relative; width: 100%; } .primary-navigation ul { list-style: none; margin: 0; padding-left: 0; } .primary-navigation li { float: left; position: relative; } .primary-navigation a { color: #ffffff; font-size: 15px; font-weight: 300; display: block; padding: 9px 15px; text-decoration: none; } .primary-navigation ul ul { background: #1c1c1c; display: none; float: left; left: 0; padding: 0; position: absolute; z-index: 99999; } .primary-navigation ul ul ul { left: 100%; top: 0; } .primary-navigation ul ul a { width: 200px; } .primary-navigation ul ul li { } .primary-navigation li:hover > a, .primary-navigation li > a:focus { background: #1c1c1c; color: #fff; } .primary-navigation ul ul :hover > a { } .primary-navigation ul ul a:hover, .primary-navigation ul ul a:focus { background: #313131; background: hsl(0, 0%, 19%); } .primary-navigation ul li:hover > ul { display: block; } .primary-navigation .current_page_item > a, .primary-navigation .current-menu-item > a, .primary-navigation .current_page_item > a:hover, .primary-navigation .current-menu-item > a:hover, .primary-navigation .current_page_item > a:focus, .primary-navigation .current-menu-item > a:focus { color: #000000; background: #ffffff; } .primary-navigation .current_page_ancestor { background: #4d4d4d; background: hsl(0, 0%, 30%); } .primary-navigation ul ul .current_page_parent, .primary-navigation .current_page_parent .current_page_item > a { color: #fff; color: hsl(0, 0%, 100%); background: #313131; background: hsl(0, 0%, 19%); } .menu-toggle { display: none; } /* ================================================================================================ 8.0 - Navigation (Footer Navigation) ================================================================================================ */ /* ================================================================================================ 9.0 - Navigation (Social Navigation) ================================================================================================ */ .social-search { background: #000000; } .align-center { margin: 0 auto; max-width: 1200px; } .social-navigation { background: #000000; clear: both; display: block; position: relative; width: 100%; } .social-navigation ul { list-style: none; margin: 0; padding-left: 0; } .social-navigation li { float: right; position: relative; } .social-navigation a { color: #ffffff; display: block; padding: 9px 15px; text-decoration: none; } .social-navigation ul ul { background: #1c1c1c; display: none; float: left; left: 0; padding: 0; position: absolute; z-index: 99999; } .social-navigation ul ul ul { left: 100%; top: 0; } .social-navigation ul ul a { width: 200px; } .social-navigation ul ul li { } .social-navigation li:hover > a, .social-navigation li > a:focus { background: #1c1c1c; color: #fff; } .social-navigation ul ul :hover > a { } .social-navigation ul ul a:hover, .social-navigation ul ul a:focus { background: #313131; background: hsl(0, 0%, 19%); } .social-navigation ul li:hover > ul { display: block; } .social-navigation .current_page_item > a, .social-navigation .current-menu-item > a, .social-navigation .current_page_item > a:hover, .social-navigation .current-menu-item > a:hover, .social-navigation .current_page_item > a:focus, .social-navigation .current-menu-item > a:focus { color: #ffffff; background: #4d4d4d; } .social-navigation .current_page_ancestor { background: #4d4d4d; background: hsl(0, 0%, 30%); } .social-navigation ul ul .current_page_parent, .social-navigation .current_page_parent .current_page_item > a { color: #fff; color: hsl(0, 0%, 100%); background: #313131; background: hsl(0, 0%, 19%); } .menu-toggle { display: none; } .menu-social { float: right; list-style: none; text-decoration: none; } .menu-social ul li { display: inline-block; position: relative; } .menu-social li a:before { color: #FFF; content: '\f0c0'; font-family: 'fontawesome'; font-size: 16px; display: inline-block; vertical-align: top; } .menu-social li a[href*="facebook.com"]::before { content: '\f09a'; padding: 2px 0; } .menu-social li a[href*="twitter.com"]::before { content: '\f099'; padding: 2px 0; } .menu-social li a[href*="dribbble.com"]::before { content: '\f17d'; padding: 2px 0; } .menu-social li a[href*="plus.google.com"]::before { content: '\f0d5'; padding: 2px 0; } .menu-social li a[href*="pinterest.com"]::before { content: '\f0d2'; padding: 2px; } .menu-social li a[href*="github.com"]::before { content: '\f09b'; padding: 2px 0; } .menu-social li a[href*="tumblr.com"]::before { content: '\f173'; padding: 2px 0; } .menu-social li a[href*="youtube.com"]::before { content: '\f167'; padding: 2px 0; } .menu-social li a[href*="flickr.com"]::before { content: '\f16e'; padding: 2px 0; } .menu-social li a[href*="vimeo.com"]::before { content: '\f194'; padding: 2px 0; } .menu-social li a[href*="instagram.com"]::before { content: '\f16d'; padding: 2px 0; } .menu-social li a[href*="linkedin.com"]::before { content: '\f0e1'; padding: 2px 0; } .menu-social .screen-reader-text { display: none; } /* ================================================================================================ 10.0 - Navigation (Pagination Navigation) ================================================================================================ */ .paging-navigation { margin-bottom: 30px; } .paging-navigation ul { margin: 0; text-align: center; } .paging-navigation li { display: inline; } a.page-numbers, span.page-numbers { padding: 0 5px; } .paging-navigation .current { font-weight: bold; } /* ================================================================================================ 11.0 - Navigation (Search Toggle) ================================================================================================ */ input[type = "search"] { box-sizing: border-box; width: 100%; } .search-box-wrapper { display: none; margin: 0 auto 10px auto; max-width: 1200px; z-index: 2; } .search-box { background: #000000; margin: 0 auto; max-width: 1200px; float: right; } .search-box .search-field { background: #ffffff; float: right; margin: 10px 10px; padding: 5px 5px; width: 250px; } .search-box .search-submit { display: none; } .search-toggle { color: #ffffff; cursor: pointer; float: right; padding: 7.5px; text-align: center; width: 20px; } .search-toggle:hover, .search-toggle.active { } .search-form .screen-reader-text, .search-toggle .screen-reader-text { display: none; } .fa-search { padding: 2px 0; } /* ================================================================================================ 12.0 - Alignments ================================================================================================ */ .alignleft { float: left; margin: 5px 15px 15px 0; } .alignright { float: right; margin: 5px 0 15px 15px; } .aligncenter { display: block; margin-right: auto; margin-left: auto; } /* ================================================================================================ 13.0 - Basic Structure ================================================================================================ */ .site-container { margin: 5px auto 0 auto; max-width: 1190px; padding: 0 10px; } /* ================================================================================================ 14.0 - Header Area ================================================================================================ */ .site-branding { background: url(images/header-image.jpg) no-repeat; background-size: cover!important; padding: 80px 0; text-align: center; } .title-box { background: hsla(0, 0%, 0%, .7); border: 1px solid #000000; border-radius: 10px 10px; box-shadow: 0 0 10px 0; padding: 60px 0; margin: 0 auto; max-width: 450px; } .site-title, .site-description { margin: 0; paddding: 0; } .site-title a, .site-description { color: #ffffff; font-weight: 300; text-decoration: none; } /* ================================================================================================ 15.0 - Content Area ================================================================================================ */ .content-area { float: left; width: 72.91666666666667%; } .entry-title { font-weight: 400; margin: 0; padding: 0; } .post { border-bottom: 1px solid #cccccc; margin: 0 0 25px 0; padding-bottom: 25px; } .entry-content-container { margin-top: 25px; margin-left: 22.85714285714286%; } .entry-metadata-container { float: left; margin-left: -29.62962962962963%; width: 27%; } .entry-content { margin-top: 10px; } .entry-content p { font-weight: 300; line-height: 25px; margin: 0 0 15px 0; padding: 0; } .post-timestamp { font-size: 14px; margin: 10px 0 5px 0; } .posted-comments { font-size: 13px; } .posted-comments a { background: #333333; color: #ffffff; font-size: 13px; font-weight: 400; padding: 3px 20px; } .posted-comments a:hover { background: #3399ff; } .read-more { clear: both; font-size: 13px; float: right; } .read-more a { background: #333333; color: #ffffff; font-size: 13px; font-weight: 400; padding: 3px 20px; } .read-more a:hover { background: #3399ff; } .index-meta { margin: 0; padding: 0; } .index-meta ul { float: left; list-style: none; margin: 0; padding: 0; } .index-meta li { float: left; margin: 0 2px 0 0; } .index-meta li a:link, .index-meta li a:visited { font-size: 12px; padding: 4px 20px; background: #9b9b9b; text-decoration: none; color: #fff; } .index-meta ul ul li a:link, .index-meta ul ul li a:visited { padding: 2px 10px; } .index-meta li.theComments a:link, .index-meta li.theComments a:visited { background: #333; } .index-meta li a:hover, .index-meta li.theComments a:hover, .index-meta li a:focus, .index-meta li.theComments a:focus { background: #3399FF; } li.theComments span { display: none; } .post-tags li a { margin-right: 2px; } .sticky { } .screen-reader-text { } .post-thumbnail { float: left; margin-right: 10px; margin-top: 10px; } .cat-link, .tag-link, .comments-link, .edit-link { display: block; font-size: 14px; margin-bottom: 5px; } .comments-link .screen-reader-text { display: none; } .tag-link .fa-tags { margin: 0; } /* ================================================================================================ 16.0 - Content Area (Archives) ================================================================================================ */ /* ================================================================================================ 17.0 - Content Area (Comments) ================================================================================================ */ .comments-title { border-bottom: 1px solid #CCCCCC; font-size: 20px; margin-bottom: 5px; } .comment-list { margin: 0; padding: 0; } .comment-body { margin-bottom: 20px; padding: 10px; border-bottom: 1px solid #CCCCCC; } .comments-area > ol { list-style-type: none; } .comment-author .avatar { float: left; display: block; margin-right: 10px; } .comment-author .fn { font-size: 16px; margin: 0; padding: 0; } .comment-meta { font-size: 14px; } .comments-area p { margin-top: 20px; } .reply { font-size: 12px; margin-bottom: 20px; } .comment-list ol { margin-top: 20px; margin-left: 20px; } ol.children { list-style-type: none; } .content-meta { margin-left: 70px; } .comment-navigation { border-top: 1px solid #999; border-bottom: 1px solid #999; } .comment-navigation i { padding: 10px; } .comment-previous { float: left; } .comment-next { float: right; } .bypostauthor > .comment-body { background: #F0F0F0; border-bottom: none; padding: 10px; position: relative; } .comment-reply-title { border-top: 1px dotted #CCCCCC; font-size: 20px; margin: 0; margin-top: 10px; padding: 0; padding-top: 10px; } .comment-form label { display: block; } .required { color: #FF0000; font-size: 10px; } .comment-awaiting-moderation { background: #84BD68; font-size: 12px; padding: 3px 4px; } .form-allowed-tags { font-size: 13px; width: 600px; } .form-submit .submit { -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9)); background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0); background-color:#f9f9f9; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #dcdcdc; display:inline-block; cursor:pointer; color:#666666; font-size:14px; font-weight:bold; padding:6px 24px; text-decoration:none; text-shadow:0px 1px 0px #ffffff; } .form-submit .submit:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9)); background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0); background-color:#e9e9e9; } #respond textarea#comment{ height: 200px; width: 600px; } /* ================================================================================================ 18.0 - Content Area (404 and Search) ================================================================================================ */ .search-submit { display: none; } .search-field { padding: 5px 8px; } /* ================================================================================================ 19.0 - Content Area (Attachments) ================================================================================================ */ /* ================================================================================================ 20.0 - Content Area (Full Width) ================================================================================================ */ /* ================================================================================================ 21.0 - Widget Area ================================================================================================ */ .widget-area { float: right; /* width: 29.296875%; */ width: 25%; } .widget-area .search-submit, .widget-area .screen-reader-text { display: none; } input[type = "search"] { box-sizing: border-box; width: 100%; } .widget-area .search-field { color: #000000; margin: 10px 0; padding: 8px 5px; } .widget { margin: 0 0 30px 0; } .widget ul, .widget ol { list-style-type: none; margin: 0; padding: 0; } .widget li { margin: 5px 0 0 0; } .widget li li { margin-left: 18px; } .widget select { margin: 10px 0; padding: 5px 5px; max-width: 100%; } .widget-title { font-weight: 400; margin: 0; padding: 0; } .rsswidget { display: block; } .rss-date { display: block; margin-top: 5px; text-align: right; } .rssSummary { margin-top: 10px; } #wp-calendar { border: 1px solid #cccccc; margin: 0; margin-bottom: 20px; text-align: center; width: 100%; } #wp-calendar a { color: #0000ff; font-style: italic; font-weight: 400; } #wp-calendar caption { font-weight: 400; margin: 5px 0; text-align: center; } #wp-calendar #today { font-weight: 400; } #wp-calendar th { font-weight: 400; } #wp-calendar td { font-weight: 300; padding: 6px 0; } .textwidget { margin: 10px 0; } /* ================================================================================================ 23.0 - Footer Area ================================================================================================ */ .site-footer { background: #000000; padding: 20px; text-align: center; } .site-info { color: #ffffff; } /* ================================================================================================ 24.0 - Media Area (Captions) ================================================================================================ */ .wp-caption { max-width: 100%; margin-bottom: 1.5em; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; max-width: 100%; } .wp-caption-text { margin-top: 4px; text-align: center; } .wp-caption .wp-caption-text, .gallery-caption { background: #cccccc; color: #000000; padding: 8px; } .wp-caption p { margin: 0; padding: 0; } /* ================================================================================================ 25.0 - Media Area (Galleries) ================================================================================================ */ /* ================================================================================================ 26.0 - Media Queries (Mobile Large) ================================================================================================ */ @media screen and (max-width: 600px) { .entry-content-container { margin-top: 25px; margin-left: 0; } .entry-metadata-container { float: none; margin-left: 0; width: 38%; } .content-area { float: none; width: 100%; } .entry-title { margin-bottom: -15px; } .entry-content { margin-top: 20px; } .widget-area { float: none; width: 100%; } .menu-toggle { background: #000000; display: block; padding: 9px 15px; } .primary-navigation { display: none; } .primary-expanded { display: block; } .primary-navigation ul li { float: none; } .primary-navigation ul li a { } .primary-navigation ul li ul li a { padding-left: 4em; } .primary-navigation ul li ul li ul li a { padding-left: 6em; } .primary-navigation li:hover > a, .primary-navigation li > a:focus { background: #1c1c1c; } .primary-navigation ul ul, .primary-navigation ul ul ul { position: relative; top: inherit; left: 0; display: block; float: none; background: #000000; } .primary-navigation ul ul a { width: 100%; } .primary-navigation ul a:hover, .primary-navigation ul ul a:hover, .primary-navigation ul a:focus, .primary-navigation ul ul a:focus{ background: #1c1c1c; } .primary-navigation .current_page_ancestor { background: inherit; } .primary-navigation ul ul .current_page_parent { color: inherit; background: inherit; } .primary-navigation .current_page_item > a, .primary-navigation .current_page_item > a:hover, .primary-navigation .current_page_item li:hover, .primary-navigation .current_page_item > a:focus, .primary-navigation .current_page_item li:focus, .primary-navigation .current_page_parent .current_page_item > a { color: #fff; background: #1c1c1c; } .fa-bars { background: #000000; color: #ffffff; } .post-thumbnail { width: 100%; } } /* ================================================================================================ 27.0 - Media Queries (Tablet Small) ================================================================================================ */ @media screen and (min-width: 601px) and (max-width: 768px) { .entry-content-container { margin-top: 25px; margin-left: 0; } .entry-metadata-container { float: none; margin-left: 0; width: 38%; } .entry-title { margin-bottom: -15px; } .entry-content { margin-top: 20px; } .content-area { float: none; width: 100%; } .widget-area { float: none; width: 100%; } } .fa-calendar, .fa-archive { margin-right: 5px; } .fa-user, .fa-comments, .fa-pencil, .fa-thumb-tack, .fa-tags { margin: 0 5px 0 10px;; }