/* Theme Name: Azul Silver Author: Benjamin Lu Description: Azul Silver is converted into a responsive theme with the same features as before. It also comes with custom sidebar and full width without no sidebar. Custom Background and Header is available. Version: 0.4.2 License: Azul Silver is distributed under the terms of the GNU GPL. License URI: http://www.gnu.org/licenses/gpl-2.0.html Tested up to: 5.0 Requires PHP: 5.6 Tags: custom-background, custom-header, one-column, right-sidebar, threaded-comments, translation-ready, two-columns Text Domain: azul-silver 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 - Alignments 7.0 - Accessibility 8.0 - Navigation (Links) 9.0 - Navigation (Primary Navigation) 10.0 - Navigation (Footer Navigation) 11.0 - Navigation (Social Navigation) 12.0 - Navigation (Pagination Navigation) 13.0 - Navigation (Search Toggle) 14.0 - Basic Structure 15.0 - Header Area 16.0 - Content Area (Posts and Pages) 17.0 - Content Area (Archives) 18.0 - Content Area (Comments) 19.0 - Content Area (404 and Search) 20.0 - Content Area (Attachments) 21.0 - Content Area (Full Width) 22.0 - Content Area (Post Formats) 23.0 - Widget Area 24.0 - Footer Area 25.0 - Media Area (Captions) 26.0 - Media Area (Galleries) 27.0 - Media Queries (Mobile Small 320px) 28.0 - Media Queries (Mobile Large 600px) 29.0 - Media Queries (Tablet Small 768px) 30.0 - Media Queries (Tablet Large 1024px) ================================================================================================ */ /* ================================================================================================ 1.0 - Normalize (Reset) ================================================================================================ */ /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. * 2. Add the correct display in IE. */ article, aside, details, /* 1 */ figcaption, figure, footer, header, main, /* 2 */ menu, nav, section, summary { /* 1 */ display: block; } /** * Add the correct display in IE 9-. */ audio, canvas, progress, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Add the correct display in IE 10-. * 1. Add the correct display in IE. */ template, /* 1 */ [hidden] { display: none; } /* Links ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct margin in IE 8. */ figure { margin: 0; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /* Forms ========================================================================== */ /** * 1. Change font properties to `inherit` in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, select, textarea { font: inherit; /* 1 */ margin: 0; /* 2 */ } /** * Restore the font weight unset by the previous rule. */ optgroup { font-weight: bold; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* ================================================================================================ 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 { background: #999999; font-family: 'Sanchez', serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Sanchez', serif; } 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 { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } /* ================================================================================================ 4.0 - Elements ================================================================================================ */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } blockquote { font-size: 24px; font-weight: bold; margin: 1.5em 2em 1.5em 2em; position: relative; text-align: center; } blockquote::before { content: "\f10d"; font-size: 24px; font-family: 'FontAwesome'; position: absolute; left: -2em; color: #000000;; } blockquote::after { content: "\f10e"; font-size: 24px; font-family: 'FontAwesome'; position: absolute; right: -2em; top: 0; color: #000000;; } blockquote cite { font-size: 14px; } input[type = "search"] { box-sizing: border-box; width: 100%; } .search-submit { display: none; } img { height: auto; max-width: 100%; } /* ================================================================================================ 5.0 - Forms ================================================================================================ */ button, input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid #000000; border-radius: 0; background: #fff; color: #000000; font-family: 'Sanchez', serif; font-size: 12px; font-size: 0.75rem; line-height: 1; padding: 0.6em; } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #000; color: #fff; } 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 { border-color: #000; color: #fff; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #111; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] { padding: 0.8em; width: 99%; } textarea { padding-left: 3px; width: 97%; height: 20em; } /* ================================================================================================ 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 - Accessibility ================================================================================================ */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; } .screen-reader-text:focus { background: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px; clip: auto !important; color: #21759b; display: block; font-size: 14px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } #content[tabindex="-1"]:focus { outline: 0; } /* ================================================================================================ 8.0 - Navigation (Links) ================================================================================================ */ a { color: #1d1d1d; text-decoration: none; } a:hover { color: #0099cc; } /* ================================================================================================ 9.0 - Navigation (Primary Navigation) ================================================================================================ */ .primary-navigation { clear: both; display: block; width: 100%; } .primary-navigation ul { display: block; list-style: none; margin: 0 0 0 0; } .primary-navigation li { position: relative; } .primary-navigation ul ul { display: none; margin-left: 0.4em; } .primary-navigation a { position: relative; display: block; padding: 0.5em 1em; font-family: 'Sanchez', serif; font-weight: 0.875em; font-weight: 400; text-decoration: none; line-height: 1.6em; color: white; } .primary-navigation a:hover, .primary-navigation a:focus { background: #fff; color: #000; } .primary-navigation a, .primary-navigation ul ul li:lastchild a { border-bottom: 1px solid white; } .primary-navigation ul li:last-child a { border-bottom: none; } .primary-navigation ul .toggled-on { display: block; } .primary-navigation li { border-top: 1px solid #eaeaea; border-top: 1px solid rgba(51, 51, 51, 0.1); position: relative; } .primary-navigation .current-menu-item > a, .primary-navigation .current-menu-ancestor > a, .primary-navigation .current_page_item > a, .primary-navigation .current_page_ancestor > a { font-weight: 700; } .primary-navigation .nav-menu > ul > li:first-child, .primary-navigation .nav-menu > li:first-child { border-top: 0; } .primary-navigation .menu-item-has-children > a, .primary-navigation .page_item_has_children > a{ padding-right: 48px; } .no-js .primary-navigation ul ul { display: block; } .dropdown-toggle { position: absolute; height: 27px; width: 27px; top: 6px; right: 6px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; padding: 0; font-family: 'FontAwesome'; background-color: #000; border: 1px solid #fff; content: ""; color: #fff; text-transform: lowercase; /* Stop screen readers from reading the text as capital letters */ } .dropdown-toggle:after { content: "\f078"; font-size: 14px; line-height: 27px; position: relative; top: 0; left: 0; width: 27px; } .dropdown-toggle:hover, .dropdown-toggle:focus { background-color: #fff; color: #000; } .dropdown-toggle.toggle-on:after { content: "\f077"; } .menu-toggle { position: fixed; z-index: 100; bottom: 1em; left: 1em; display: none; font-size: 1em; font-family: 'Sanchez' serif; background-color: #000; color: #fff; border: solid 2px #fff; transition: all ease-out 400ms; } .menu-toggle.hide { bottom: -2.5em; } .toggled .menu-toggle.hide { bottom: 1em; } .menu-toggle:hover, .menu-toggle:focus { text-decoration: underline; } .primary-navigation.toggled { position: fixed; bottom: 0; padding: 1em; z-index: 1; } .nav-menu { padding: 1em; margin-bottom: 3em; background-color: #000; } .primary-navigation.toggled ul { max-height: calc(100vh - 8em); overflow-y: auto; } .primary-navigation.toggled ul ul { display: none; } .primary-navigation.toggled ul ul.toggled-on, .primary-navigation.toggled ul ul.toggled-on > ul { display: block; } .height { height: 6em; } /* ================================================================================================ 10.0 - Navigation (Footer Navigation) ================================================================================================ */ /* ================================================================================================ 11.0 - Navigation (Social Navigation) ================================================================================================ */ /* ================================================================================================ 12.0 - Navigation (Pagination Navigation) ================================================================================================ */ .paging-navigation { padding: 2em; text-align: center; } .paging-navigation ul { margin: 0; text-align: center; } .paging-navigation li { display: inline; } a.page-numbers, span.page-numbers { border: 1px solid #000000; padding: 0.5em 1.2em; } .paging-navigation .current { font-weight: bold; } /* ================================================================================================ 13.0 - Navigation (Search Toggle ================================================================================================ */ /* ================================================================================================ 14.0 - Basic Structure ================================================================================================ */ .site-container { background: #ffffff; border: 0.063em solid #999999; border-radius: 0.625em; box-shadow: 0 0 0.625em 0; margin: 1.5em auto; max-width: 64em; padding: 0.625em; } .site-content { margin: 1em 0; } /* ================================================================================================ 15.0 - Header Area ================================================================================================ */ .site-header { padding: 4.2em; } .site-branding { padding: 3.2em 0; text-align: center; } .site-title, .site-description { margin: 0; padding: 0; } .site-title a { color: #ffffff; font-size: 1.4em; text-decoration: none; } .site-description { color: #ffffff; } /* ================================================================================================ 16.0 - Content Area (Posts and Pages) ================================================================================================ */ .content-area { float: left; width: 67.72908366533865%; } .content-area.full-width { width: 100%; } .post { margin: 0 0 5em 0; } .entry-header { text-align: center; } .entry-title { margin: 0; padding: 0; } .entry-content { margin: 2em 0; } .cat-link, .tag-link { display: block; font-size: 16px; margin-bottom: 5px; } .tag-link .fa-tags { margin: 0; } .tag-list, .cat-list { font-size: 14px; } .entry-footer { padding: 0; text-align: center; } .sticky { } /* ================================================================================================ 17.0 - Content Area (Archives) ================================================================================================ */ .archive-header { text-align: center; } /* ================================================================================================ 18.0 - Content Area (Comments) ================================================================================================ */ .comments-title { margin-bottom: 20px; text-align: center; } .comment-list { margin: 0; padding: 0; } .comment-body { border: 1px solid #cccccc; margin-bottom: 20px; padding: 10px; } .comments-area > ol { list-style-type: none; } .comment-author .avatar { border: 4px solid #cccccc; border-radius: 50%; float: left; display: block; margin-right: 10px; } .comment-author .fn { font-size: 14px; margin: 0; font-weight: bold; font-style: normal; padding: 0; } .comment-meta { font-size: 12px; } .comments-area p { font-size: 14px; margin-left: 70px; margin-top: 20px; } .comments-area .says { display: none; } .reply { margin-bottom: 1.5em; text-align: right; } .reply a { display: inline-block; padding: .5em 1.4em; font-size: 85%; color: #333; line-height: 1.3em; text-decoration: none; border: 1px solid #c3c3c3; } .reply a:hover, .reply a:focus { background: #000; color: #fff; border-color: #000; } .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; padding: 10px; position: relative; } .comment-reply-title { font-size: 20px; margin: 0; margin-top: 10px; padding: 0; padding-top: 10px; } .comment-form p { margin-left: 0; } .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 { display: inline-block; color: #000000; padding: 16px 20px; font-size: 1em; font-family: "Open Sans", sans-serif; text-decoration: none; border: 1px solid #c3c3c3; } .form-submit .submit:hover { border-color: #000; border-width: 1px; color: #000000; box-shadow: none; } #respond textarea#comment{ height: 200px; width: 99%; } /* ================================================================================================ 19.0 - Content Area (404 and Search) ================================================================================================ */ .entry-content code { font-family: 'Sanchez', serif; font-style: italic; text-decoration: underline; } /* ================================================================================================ 20.0 - Content Area (Attachments) ================================================================================================ */ /* ================================================================================================ 21.0 - Content Area (Full Width) ================================================================================================ */ /* ================================================================================================ 22.0 - Content Area (Post Formats) ================================================================================================ */ /* ================================================================================================ 23.0 - Widget Area ================================================================================================ */ .widget-area { float: right; width: 29.8804780876494%; word-break: break-all; } .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; } /* ================================================================================================ 24.0 - Footer Area ================================================================================================ */ .site-footer { margin: 2em auto 0 auto; text-align: center; } /* ================================================================================================ 25.0 - Media Area (Captions) ================================================================================================ */ .wp-caption { max-width: 100%; margin-bottom: 1.5em; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; 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; } /* ================================================================================================ 26.0 - Media Area (Galleries) ================================================================================================ */ /* ================================================================================================ 27.0 - Media Queries (Mobile Small 320px) ================================================================================================ */ /* ================================================================================================ 28.0 - Media Queries (Mobile Large 600px) ================================================================================================ */ @media screen and (max-width: 600px) { .site-container { border: none; border-radius: 0; box-shadow: none; margin: 0; max-width: 100%;; padding: 0; } .site-content { padding: 0.625em; } .site-header { padding: 3em; } .site-breanding { padding: 3em; } .menu-toggle, .primary-navigation.toggled ul { display: block; } .primary-navigation ul { display: none; } .primary-navigation.toggled { padding: 0.1em; } .nav-menu { margin-bottom: 3.6em; } .primary-navigation .nav-menu { display: none; } .primary-navigation.toggled .nav-menu { display: block; margin: 1em 1em 3.6em 1em; } .content-area { margin: 0; width: 100%; } .widget-area { float: none; width: 100%; } } /* ================================================================================================ 29.0 - Media Queries (Tablet Small 768px) ================================================================================================ */ @media screen and (min-width: 601px) and (max-width: 768px) { .site-container { border: none; border-radius: 0; box-shadow: none; margin: 0; max-width: 100%;; padding: 0; } .site-content { padding: 0.625em; } .site-header { padding: 3em; } .site-breanding { padding: 3em; } .menu-toggle, .primary-navigation.toggled ul { display: block; } .primary-navigation ul { display: none; } .primary-navigation.toggled { padding: 0.1em; } .nav-menu { margin-bottom: 3.6em; } .primary-navigation .nav-menu { display: none; } .primary-navigation.toggled .nav-menu { display: block; margin: 1em 1em 3.6em 1em; } .content-area { float: none; width: 100%; } .widget-area { float: none; width: 100%; } } /* ================================================================================================ 30.0 - Media Queries (Tablet Large 1024px) ================================================================================================ */ @media screen and (min-width: 769px) { .primary-navigation { clear: none; } /* Position the menu in the header */ .primary-navigation, .primary-navigation.toggled { background: #313131; position: relative; max-width: 100%; margin: 0 auto; padding: 0; } .nav-menu { padding: .4em; background-color: transparent; margin: 0; } .nav-menu a { color: #ffffff; } .nav-menu a:hover { color: #ffffff; } .primary-navigation ul, .primary-navigation.toggled ul { max-height: none; padding-left: 0; text-align: center; } .primary-navigation.toggled ul { overflow-y: visible; } /* Display the menu items in a horizontal order */ .primary-navigation li { display: inline-block; border: none; } /* Add an outline to the drop-down menus */ .primary-navigation ul ul { outline: 1px solid #333; } /* Left-align drop-down menu items */ .primary-navigation li li { display: block; text-align: left; } .primary-navigation a { padding: 0.5em 1em; } .primary-navigation a, .primary-navigation ul ul li:last-child a { border-bottom: none; } .primary-navigation ul ul li a { color: #ffffff; } /* Add an outline on hovered and focused menu items */ .primary-navigation a:hover, .primary-navigation a:focus { background: transparent; color: #ffffff; text-decoration: underline; outline: solid 1px #b3b3b3; } /* Create hover and focus contrast on drop-down items */ .primary-navigation li li a:hover, .primary-navigation li li a:focus { background: #eee; color: #000; text-decoration: none; } /* Position drop-down menus absolutely */ .primary-navigation ul ul.toggled-on { position: absolute; width: 17em; display: block; z-index: 10; right: 0.6em; margin-left: 0; background: #000; } .primary-navigation ul ul ul.toggled-on { right: 0; padding-left: 1em; position: relative; } /* Indent 3rd level drop-down menus */ .primary-navigation ul ul ul a { padding-left: 2em; } /* Simplify the drop-down toggle */ .dropdown-toggle { top: 7px; right: 8px; } .dropdown-toggle::after { line-height: 27px; width: 27px; } }