/* ============================================================================================================================ Camaraderie - style.css ============================================================================================================================ Theme Name: Camaraderie Author: Benjamin Lu Description: Camaraderie is a fully functional mobile friendly WordPress theme that allows you to create amazing portfolio for your needs. This theme also comes with a landing page when set as a static page to show your work in a creative format. Camaraderie also lets you set each page its own template allowing you to set each page differently with or without sidebars and of course full width pages. License: GNU General Public License v2.0 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Tags: grid-layout, left-sidebar, one-column, right-sidebar, two-columns, custom-background, custom-header, featured-images, footer-widgets, post-formats, sticky-post, threaded-comments, blog, photography, portfolio Version: 1.0 Text Domain: camaraderie ============================================================================================================================ */ /* ============================================================================================================================ Danger Zone ============================================================================================================================ Please do not make any modifications directly to this file nor any files within the theme, you will lose all modifictions when the theme is next updated if you do so. Please consider using a child theme based on this theme so that all of your modifications will be save when the theme is updated. This theme's styles will automatically loaded for you when you activate this theme. ============================================================================================================================ */ /* ============================================================================================================================ Table of Content ============================================================================================================================ 1.0 - Typography 2.0 - Elements 3.0 - Forms 4.0 - Alignments 5.0 - Accessibility 6.0 - Clearings 7.0 - Basic Structure (Header) 8.0 - Basic Structure (Content) 9.0 - Basic Structure (Aside) 10.0 - Basic Structure (Footer) 11.0 - Navigation (Links) 12.0 - Navigation (Primary Navigation) 13.0 - Navigation (Secondary Navigation) 14.0 - Navigation (Pagination Navigation) 15.0 - Navigation (Social Navigation) 16.0 - Content (Posts and Pages) 17.0 - Content (Comments) 18.0 - Content (Archives) 19.0 - Content (Search and 404) 20.0 - Content (Post Formats) 21.0 - Widgets 22.0 - Captions 23.0 - Galleries 24.0 - Media Queries (Mobile Small 30em (480px)) 25.0 - Media Queries (Mobile Medium 37.5em (600px)) 26.0 - Media Queries (Mobile Large 41.688em (667px)) 27.0 - Media Queries (Mobile Extra Large 46em (736px)) 28.0 - Media Queries (Tablet Small 48em (768px)) 29.0 - Media Queries (Tablet Medium 64em (1024px)) 30.0 - Media Queries (Tablet Large 73.125em (1170px)) ============================================================================================================================ */ /* ============================================================================================================================ 1.0 - Typography ============================================================================================================================ */ h1 { display: block; font-family: 'Fira Sans', serif; font-size: 2em; font-weight: 700; margin: 0.67em 0; } h2 { display: block; font-family: 'Fira Sans', serif; font-size: 1.5em; font-weight: 700; margin: 0.83em 0; } h3 { display: block; font-family: 'Fira Sans', serif; font-size: 1.17em; font-weight: 700; margin: 1em 0; } h4 { display: block; font-family: 'Fira Sans', serif; font-size: 1em; font-weight: 700; margin: 1.33em 0; } h5 { display: block; font-family: 'Fira Sans', serif; font-size: .83em; font-weight: 700; margin: 1.67em 0; } h6 { display: block; font-family: 'Fira Sans', serif; font-size: .67em; font-weight: 700; margin: 2.33em 0; } /* ============================================================================================================================ 2.0 - Elements ============================================================================================================================ */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { background: #eeeeee; font-family: 'Merriweather', serif; } img { height: auto; max-width: 100%; } figure { height: auto; margin: 0; max-width: 100%; } /* ============================================================================================================================ 3.0 - Forms ============================================================================================================================ */ /* ============================================================================================================================ 4.0 - Alignments ============================================================================================================================ */ .alignleft { float: left; margin-right: 1.5em; } .alignright { float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } /* ============================================================================================================================ 5.0 - Accessibility ============================================================================================================================ */ .screen-reader-text { clip: rect(0.063em, 0.063em, 0.063em, 0.063em); height: 0.063em; overflow: hidden; position: absolute !important; width: 0.063em; } .screen-reader-text:focus { background: #f1f1f1; border-radius: 0.188em; box-shadow: 0 0 0.125em 0.125em; clip: auto !important; color: #21759b; display: block; font-size: 0.875em; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 0.938em 1.5em 0.938em; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* ============================================================================================================================ 6.0 - Clearings ============================================================================================================================ */ .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-main:before, .site-main:after, .content-area:before, .content-area:after, .entry-content:before, .entry-content:after, .posts-navigation:before, .posts-navigation:after, .post-navigation:before, .post-navigation:after { clear: both; content: ""; display: table; } /* ============================================================================================================================ 7.0 - Basic Structure (Header) ============================================================================================================================ */ .site-branding { text-align: center; } .site-branding .site-title, .site-branding .site-description { margin: 0; padding: 0; } .site-branding .site-title a { color: #ffffff; font-size: 1.750em; text-decoration: none; text-shadow: 2px 2px #000000; } .site-branding .site-description { color: #ffffff; text-shadow: 2px 2px #000000; } /* ============================================================================================================================ 8.0 - Basic Structure (Content) ============================================================================================================================ */ .site-main { margin: 1.125em auto; max-width: 73.125em; } .left-sidebar .content-area { float: right; width: 69.230769230769231%; } .right-sidebar .content-area { float: left; width: 69.230769230769231%; } /* ============================================================================================================================ 9.0 - Basic Structure (Aside) ============================================================================================================================ */ .left-sidebar .widget-area { float: left; width: 29.230769230769231%; } .right-sidebar .widget-area { float: right; width: 29.230769230769231%; } /* ============================================================================================================================ 10.0 - Basic Structure (Footer) ============================================================================================================================ */ .site-footer { background: #000000; padding: 1.125em; text-align: center; } .site-footer, .site-footer a { color: #ffffff; text-decoration: none; } .site-info { font-size: 0.875em; line-height: 1.5em; } /* ============================================================================================================================ 11.0 - Navigation (Links) ============================================================================================================================ */ a { color: #111111; text-decoration: none; } a:hover { color: #666666; } /* ============================================================================================================================ 12.0 - Navigation (Primary Navigation) ============================================================================================================================ */ .primary-navigation { display: block; width: 100%; } .primary-navigation ul { display: block; list-style: none; margin: 0; } .primary-navigation li { border-top: 0.063em solid #eaeaea; border-top: 0.063em solid rgba(51, 51, 51, 0.1); position: relative; } .primary-navigation ul ul { display: none; margin-left: 0.5em; } .primary-navigation a { color: #ffffff; display: block; line-height: 1.5em; padding: 0.5em 1em; position: relative; text-decoration: none; } .primary-navigation a:hover, .primary-navigation a:focus { background: #ffffff; color: #000000; } .primary navigation a, .primary-navigation ul ul li:lastchild a { border-bottom: 0.063em solid #ffffff; } .primary-navigation ul li:last-child a { border-bottom: none; } .primary-navigation ul .toggled-on { display: block; } .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: 3em; } .no-js .primary-navigation ul ul { display: block; } .dropdown-toggle { background: #000000; border: 0.063em solid #ffffff; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; color: #ffffff; font-family: 'fontawesome'; height: 2em; padding: 0; position: absolute; right: 0.250em; top: 0.188em; width: 2em; } .dropdown-toggle:after { font-size: 1.125em; content: "\f078"; left: 0; line-height: 1.875em; position: relative; top: 0; width: 1.875em; } .dropdown-toggle:hover, .dropdown-toggle:focus { background: #ffffff; color: #000000; } .dropdown-toggle.toggle-on:after { content: "\f077"; } .primary-navigation.toggled { bottom: 0; padding: 1em; position: fixed; z-index: 1; } .nav-menu { background: #000000; padding: 1em; margin-bottom: 3em; } .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; } .menu-toggle { background-color: #000; border: solid 2px #fff; bottom: 1em; color: #fff; display: none; font-size: 1em; left: 1em; padding: 0.4em; position: fixed; transition: all ease-out 400ms; z-index: 100; } .menu-toggle.hide { bottom: -2.5em; } .toggled .menu-toggle.hide { bottom: 1em; } .menu-toggle:hover, .menu-toggle:focus { text-decoration: underline; } /* ============================================================================================================================ 13.0 - Navigation (Secondary Navigation) ============================================================================================================================ */ /* ============================================================================================================================ 14.0 - Navigation (Pagination Navigation) ============================================================================================================================ */ .pagination { text-align: center; } .page-numbers { background: #ffffff; border: 0.063em solid #c3c3c3; color: #333333; display: inline-block; padding: 0.5em 1em; text-decoration: none; } .page-numbers:hover { background: #000; color: #fff; border-color: #000; } .page-number:hover a { color: #ffffff; } .page-numbers.current { background: #000000; color: #ffffff; } .page-links > a { border: 0.063em solid #999999; padding: 0.5em 1em; text-decoration: none; } .page-links > a:hover { background: #000000; color: #ffffff; } .page-links > span { background: #000000; border: 0.063em solid #666666; color: #ffffff; padding: 0.5em 1em; } .posts-navigation, .post-navigation { background: #ffffff; border: 0.063em solid #cccccc; clear: both; padding: 0.938em; } .posts-navigation .nav-links .nav-previous, .post-navigation .nav-links .nav-previous { float: left; margin: 0.5em 0; } .posts-navigation .nav-links .nav-next, .post-navigation .nav-links .nav-next { float: right; margin: 0.5em 0; } .posts-navigation .nav-links .nav-previous .post-previous, .post-navigation .nav-links .nav-previous .post-previous { display: block; font-size: 0.9375em; font-weight: 700; text-align: left; } .posts-navigation .nav-links .nav-next .post-next, .post-navigation .nav-links .nav-next .post-next { display: block; font-size: 0.9375em; font-weight: 700; text-align: right } .posts-navigation .nav-links .nav-previous .post-title, .post-navigation .nav-links .nav-previous .post-title { font-size: 0.813em; } .posts-navigation .nav-links .nav-next .post-title, .post-navigation .nav-links .nav-next .post-title { font-size: 0.813em; } .link-pages { text-align: center; } /* ============================================================================================================================ 15.0 - Navigation (Social Navigation) ============================================================================================================================ */ .site-social { background: #333333; padding: 0.5em; } .menu-social ul { text-align: center; list-style: none; } .menu-social ul li { position: relative; display: inline-block; } .menu-social li a:before { color: #ffffff; content: '\f08e'; display: inline-block; font-family: 'fontawesome'; font-size: 1.625em; padding: 0 0.375em; vertical-align: top; -webkit-font-smoothing: antialiased; } .menu-social li a[href*="dribbble.com"]::before { content: '\f17d'; } .menu-social li a[href*="facebook.com"]::before { content: '\f230'; } .menu-social li a[href*="flickr.com"]::before { content: '\f16e'; } .menu-social li a[href*="foursquare.com"]::before { content: '\f180'; } .menu-social li a[href*="github.com"]::before { content: '\f09b'; } .menu-social li a[href*="plus.google.com"]::before { content: '\f0d5'; } .menu-social li a[href*="instagram.com"]::before { content: '\f16d'; } .menu-social li a[href*="jsfiddle.com"]::before { content: '\f1cc'; } .menu-social li a[href*="linkedin.com"]::before { content: '\f0e1'; } .menu-social li a[href*="pinterest.com"]::before { content: '\f0d2'; } .menu-social li a[href*="reddit.com"]::before { content: '\f1a1'; } .menu-social li a[href*="soundcloud.com"]::before { content: '\f1be'; } .menu-social li a[href*="stackoverflow.com"]::before { content: '\f16c'; } .menu-social li a[href*="tumblr.com"]::before { content: '\f173'; } .menu-social li a[href*="twitter.com"]::before { content: '\f099'; } .menu-social li a[href*="vimeo.com"]::before { content: '\f194'; } .menu-social li a[href*="vine.co"]::before { content: '\f1ca'; } .menu-social li a[href*="yelp.com"]::before { content: '\f1e9'; } .menu-social li a[href*="youtube.com"]::before { content: '\f167'; } .menu-social li a[href*="wordpress.org"]::before { content: '\f19a'; } /* ============================================================================================================================ 16.0 - Content (Posts and Pages) ============================================================================================================================ */ .content-area .post, .content-area .page, .content-area .jetpack-portfolio { background: #ffffff; border: 0.063em solid #cccccc; margin-bottom: 1.125em; min-height: 18.813em; padding: 1.125em; } .content-area .has-post-thumbnail { position: relative; padding-left: 19.938em; } .content-area .has-post-thumbnail .post-thumbnail { left: 0; position: absolute; top: 0; } .content-area .post .entry-header, .content-area .page .entry-header { text-align: center; } .content-area .jetpack-portfolio .entry-header { margin-bottom: 1.125em; text-align: center; } .content-area .post .entry-header .entry-title, .content-area .page .entry-header .entry-title, .content-area .jetpack-portfolio .entry-header .entry-title { margin: 0; padding: 0; } .content-area .post .entry-content, .content-area .post .entry-excerpt, .content-area .page .entry-content, .content-area .page .entry-excerpt { line-height: 1.7em; } .content-area .post .entry-metadata, .content-area .attachment .entry-metadata { background: #eeeeee; border-left: 5px solid #21759b; margin: 1.250em 0; padding: 1em; text-align: center; } .content-area .post .entry-metadata .avatar, .content-area .attachment .entry-metadata .avatar { border: 0.500em solid #cccccc; border-radius: 50%; display: block; margin: 0 auto; } .content-area .post .entry-metadata .by-author, .content-area .attachment .entry-metadata .by-author { display: block; font-size: 1.250em; } .content-area .post .entry-metadata .published, .content-area .post .entry-metadata .entry-comments, .content-area .attachment .entry-metadata .published, .content-area .attachment .entry-metadata .entry-comments { display: block; padding: 0.063em 0; font-size: 12px; } .content-area .post .entry-taxonomies .cat-link, .content-area .post .entry-taxonomies .tag-link { display: block; font-size: 14px; margin-bottom: 5px; } .content-area .post .entry-taxonomies .tag-link .fa-tags { margin: 0; } .content-area .post .entry-taxonomies .tag-list, .content-area .post .entry-taxonomies .cat-list { font-size: 12px; } .content-area .post .entry-timestamp .updated:not(.published) { display: none; } .content-area .sticky { border: 0.063em solid #000000; } /* ============================================================================================================================ 17.0 - Content (Comments) ============================================================================================================================ */ .comments-area { background: #ffffff; border: 0.063em solid #cccccc; margin: 0.938em 0; padding: 1.125em; } .comments-title { background: #999999; margin: 0; padding: 0; } .comment-list { margin: 0; padding: 0; } .comment-body { border: 1px solid #cccccc; margin-bottom: 1.125em; padding: 1.125em; } .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: 1.313em; margin: 0; font-weight: bold; font-style: normal; line-height: 1.6em; padding: 0; } .comment-meta { font-size: 12px; } .comment-content { display: block; line-height: 1.7em; margin: 2.625em 0.5em 0 0.5em; } .comments-area .says { display: none; } .reply { margin-bottom: 1.5em; text-align: right; } .reply a { background: #ffffff; border: 0.063em solid #cccccc; color: #373737; display: inline-block; padding: 0.5em 1.4em; text-decoration: none; } .reply a:hover, .reply a:focus { color: #373737; text-decoration: underline; } .comment-list ol { margin-top: 20px; margin-left: 20px; } ol.children { list-style-type: none; margin-left: 0; } .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: 0.625em; position: relative; } .comment-reply-title { font-size: 1.250em; margin: 0; padding: 0; } .comment-form p { margin: 0 0 1.5em 0; } .required { color: #FF0000; font-size: 0.625em; } .comment-awaiting-moderation { background: #84BD68; color: #ffffff; font-size: 0.750em; padding: 0.188em 0.250em; } .form-allowed-tags { font-size: 0.813em; width: 37.5em; } .comment-form .comment-form-author { float: left; display: block; } .comment-form .comment-form-author:before { font-family: 'fontawesome'; content: "\f007"; float: left; margin-left: 0.063em; margin-right: 0.250em; } .comment-form .comment-form-email { float: right; display: block; } .comment-form .comment-form-email:before { font-family: 'fontawesome'; content: "\f0e0"; float: left; margin-left: 0.063em; margin-right: 0.250em; } .comment-form .comment-form-url { margin-bottom: 1.3em; width: 100%; } .comment-form .comment-form-url:before { font-family: 'fontawesome'; content: "\f0ac"; float: left; margin-left: 0.063em; margin-right: 0.250em; } .comment-form .comment-form-comment label, .comment-form .comment-form-author label, .comment-form .comment-form-email label, .comment-form .comment-form-url label { display: block; font-weight: 700; margin-bottom: 0.250em; } .comment-form .comment-form-comment:before { font-family: 'fontawesome'; content: "\f075"; float: left; margin-left: 0.063em; margin-right: 0.250em; } .comment-form .comment-form-comment textarea { border: 0.063em solid #cccccc; font-family: 'Merriewather', serif; font-size: 1em; min-height: 12.375em; width: 100%; } .comment-form .comment-form-author input[type="text"], .comment-form .comment-form-email input[type="email"] { border: 0.063em solid #cccccc; font-family: 'Merriewather', serif; font-size: 1em; padding: 0.6em; width: 23em; } .comment-form .comment-form-url input[type="url"] { border: 0.063em solid #cccccc; font-family: 'Merriewather', serif; font-size: 1em; padding: 0.6em; width: 100%; } .comment-form .comment-notes { font-size: 12px; } p.comment-awaiting-moderation { margin: 0.125em 0 0 4.063em; padding: 0.188em 0.313em; } .comment-subscription-form .subscribe-label { display: inline !important; font-size: 0.875em; } .comment-form .comment-form-cookies-consent { font-size: 14px; } .comment-form .comment-form-cookies-consent input[type="checkbox"] { margin-right: 0.250em; } /* ============================================================================================================================ 18.0 - Content (Archives) ============================================================================================================================ */ /* ============================================================================================================================ 19.0 - Content (Search and 404) ============================================================================================================================ */ /* ============================================================================================================================ 20.0 - Content (Post Formats) ============================================================================================================================ */ /* ============================================================================================================================ 21.0 - Widgets ============================================================================================================================ */ .widget-area .search-form:before, .widget-area .search-form:after { clear: both; content: ""; display: table; } .widget-area .search-form { padding: 0.938em; background: #555; max-width: 100%; } .widget-area .search-field { border: none; float: left; font-family: 'Merriweather', serif; font-size: 1em; padding: 0.563em; width: 100%; } .widget-area .search-submit { border: none; background: #d88f3c; color: #ffffff; float: right; font-family: 'Merriweather', serif; font-size: 1em; display: none; padding: 0.5em; position: relative; width: 30%; } .download-area .widget, .widget-area .widget { background: #ffffff; border: 0.063em solid #cccccc; margin-bottom: 1.125em; font-size: 0.875em; padding: 1.125em; } .widget ul, .widget ol { list-style-type: none; margin: 0; padding: 0; } .widget li { margin: 0.4em 0 0 0; } .widget li li { margin-left: 1.125em; } .widget select { font-family: 'Merriweather', serif; margin: 0.625em 0; padding: 0.5em; width: 100%; } .widget.widget_post_thumbnail { padding-bottom: 0; } .widget-title { margin: 0 0 0.5em 0; } .rss-widget-icon { display: none; } .rsswidget { display: block; } .widget_rss cite { display: block; font-size: 0.875em; font-weight: 700; margin-bottom: 1.125em; } .widget-area table { border-collapse: collapse; width: 100%; } .widget-area tr:nth-of-type(odd) { background: #eeeeee; } .widget-area th { background: #333333; color: #ffffff; font-weight: 700; } .widget-area th, td { border: 0.063em solid #cccccc; text-align: left; padding: 0.438em; } .rss-date { font-size: 0.875em; } .rssSummary { margin-top: 10px; } #wp-calendar table { border-collapse: collapse; width: 100%; } #wp-calendar tr:nth-of-type(odd) { background: #eeeeee; } #wp-calendar th { background: #999999; color: #ffffff; font-weight: 700; text-align: center; } #wp-calendar th, #wp-calendar td { border: 0.063em solid #cccccc; padding: 0.438em; text-align: center; } #wp-calendar { border: 0.063em solid #cccccc; margin-bottom: 0; text-align: center; width: 100%; } #wp-calendar a { color: #1d1d1d; font-weight: 700; } #wp-calendar caption { font-weight: 700; margin: 5px 0; text-align: center; } #wp-calendar #today { background: #cccccc; font-weight: 700; } .textwidget { line-height: 1.6em; } /* ============================================================================================================================ 22.0 - 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 { text-align: center; } .wp-caption .wp-caption-text, .gallery-caption { background: #eeeeee; font-size: 14px; padding: 0.313em; text-align: center; } .wp-caption .wp-caption-text .jetpack-portfolio-title, .wp-caption .wp-caption-text .jetpack-testimonial-title { margin: 0; padding: 0; } .wp-caption p { margin: 0; padding: 0; } /* ============================================================================================================================ 23.0 - Galleries ============================================================================================================================ */ .attachment-camaraderie-testimonial-thumbnails { border: 5px solid #999999; border-radius: 50%; margin: 0 auto; } /* ============================================================================================================================ 24.0 - Media Queries (Mobile Small 30em (480px)) ============================================================================================================================ */ /* ============================================================================================================================ 25.0 - Media Queries (Mobile Medium 37.5em (600px)) ============================================================================================================================ */ @media screen and (min-height: 30.063em) and (max-width: 37.50em) { .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; } .left-sidebar .content-area, .right-sidebar .content-area { float: none; width: 100%; } } /* ============================================================================================================================ 26.0 - Media Queries (Mobile Large 41.688em (667px)) ============================================================================================================================ */ /* ============================================================================================================================ 27.0 - Media Queries (Mobile Extra Large 46em (736px)) ============================================================================================================================ */ /* ============================================================================================================================ 28.0 - Media Queries (Tablet Small 48em (768px)) ============================================================================================================================ */ @media screen and (min-width: 601px) and (max-width: 48em) { .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; } .right-sidebar .content-area { float: none; width: 100%; } .right-sidebar .widget-area { float: none; margin-top: 1.125em; width: 100%; } } /* ============================================================================================================================ 29.0 - Media Queries (Tablet Medium 64em (1024px)) ============================================================================================================================ */ @media screen and (min-width: 769px) and (max-width: 64em) { .site-main { margin: 2.250em; } .primary-navigation { clear: none; float: left; width: 100%; } /* Position the menu in the header */ .primary-navigation, .primary-navigation.toggled { position: relative; max-width: 100%; margin: 0 auto; padding: 0; } .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 { background: #000000; display: block; margin-left: 0; position: absolute; right: 0; width: 17em; z-index: 10; } .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; } .nav-menu { padding: 0.4em; } } /* ============================================================================================================================ 30.0 - Media Queries (Tablet Large 73.125em (1170px)) ============================================================================================================================ */ @media screen and (min-width: 73.125em) { .primary-navigation { clear: none; float: left; width: 100%; } /* Position the menu in the header */ .primary-navigation, .primary-navigation.toggled { position: relative; max-width: 100%; margin: 0 auto; padding: 0; } .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 { background: #000000; display: block; margin-left: 0; position: absolute; right: 0; width: 17em; z-index: 10; } .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; } .nav-menu { padding: 0.4em; } }