/* Theme Name: Armadillo Author: J. Cadima Author URI: http://jcadima.com Description: Armadillo's design is focused on simplicity and responsiveness and aims to put the content front and center. Version: 1.0 License: GNU General Public License License URI: license.txt Tags: dark, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout,custom-menu, featured-images,full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 - Reset 2.0 - Typography + Elements 3.0 - Header 3.1 - Header search 4.0 - Menu 5.0 - Main Content 5.1 - Content Meta 5.2 - Content index 6.0 - Sidebar 6.1 - Sidebar Widgets 6.2 - Font Awesome Widget 7.0 - Comments 8.0 - Alignments 8.1 - Clearings 9.0 - Images 9.1 - Image Attachments 10.0 - Forms 11.0 - Comments 12.0 - Footer 12.1 - Footer Tags 13.0 - Accessibility 14.0 - Grids 15.0 - Media Queries --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 - Reset --------------------------------------------------------------*/ @import url('reset.css'); /* Start off with a complete CSS reset */ /*-------------------------------------------------------------- 2.0 - Typography --------------------------------------------------------------*/ body { font-size: 100%; font-family: 'Ubuntu', sans-serif; background-color: #fff; } em { font-style: italic; } strong { font-weight: 600; /*font-weight: bold;*/ } /* Used to highlight content when navigating the site using a keyboard. * custom features extensive focus elements so this style is optional. :focus { outline: #000 solid 1px; } */ .right { float: right; } .left { float: left; } h1, h2, h3, h4, h5, h6 { margin: 1em 0 0.5em 0; } h1 { font-size: 2em; } h2 { font-size: 1.8em; } h3 { font-size: 1.7em; } h4 { font-size: 1.6em; } h5 { font-size: 1.4em; } h6 { font-size: 1.2em; } p { font-size: 0.9em; line-height: 1.3em; margin: 0 0 1em 0; } a { text-decoration: none;} a:link, a:visited { color: #333; } a:hover, a:focus { color: #333; } /* WEB FONTS are loaded from functions.php */ /*-------------------------------------------------------------- 3.0 - Header --------------------------------------------------------------*/ header { display: block; background: #111111; border-bottom: 10px solid #050505; } #site-header { position: relative; max-width: 1000px; margin: 0 auto; } #header_margin { padding: 10px 0 0 0px; } #header_image img { display: block; width: 100%; height: auto; } .header-container { margin-left: 21%; } #header-title { margin-left: -25%; float: left; } #site-title { font-size: 2em; font-weight: 700; margin: 0; font-family: Oswald, sans-serif; text-transform: uppercase; z-index: 10; } #site-title a:link, #site-title a:visited, #site-title a:hover, #site-title a:focus { text-decoration: none; color: #666666; } #site-description { font-size: 0.8em; font-weight: normal; text-transform: uppercase; color: #666666; margin: 0.2em 0; } /*-------------------------------------------------------------- 3.1 - Header Search --------------------------------------------------------------*/ .search-toggle { float: right; width: 54px; height: 56px; padding: 25px 20px 0px 20px; margin-top: -10px; color: #fff; text-align: center; cursor: pointer; } .search-toggle:hover, .search-toggle.active { background: #2a2a2a; } @media screen and (max-width: 600px) { .search-toggle { position: absolute; top: 0; right: 0; margin-right: 0; } } input[type="search"] { box-sizing: border-box; width: 100%; } .search-box-wrapper { z-index: 2; width: 100%; display: none; /* HIDE SEARCH BOX BY DEFAULT */ } .search-box { padding: 1em; background: #2a2a2a; } .search-box .search-field { max-width: 362px; float: right; padding: 0.3rem 2rem 0.3rem 4rem; font-size: 20px; background-color: #fff; border: 0; } .error404 .search-submit, .search .search-submit, .search-box .search-submit { display: none; } /* End Header Search */ /* Header responsive */ @media screen and (max-width: 600px) { .site-branding { padding: 0; } .title-box { max-width: 100%; margin: 0; padding: 4rem; border: none; } } /*-------------------------------------------------------------- 4.0 - Menu --------------------------------------------------------------*/ .menu { float:right; } .main-navigation { position: relative; /*float: left; */ width: 100%; display: block; /*clear: both;*/ font-family: Oswald, sans-serif; text-transform: uppercase; background: #111111; } .main-navigation ul { list-style: none; margin: 0; padding-left: 0; } .main-navigation li { float: left; position: relative; } .main-navigation a { display: block; padding: 28px 1.5em; margin-top: -10px; font-size: 14px; text-decoration: none; line-height: 1.3em; color: #A7A7A7; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; } @media (min-width: 1040px){ .main-navigation a { font-size: 12px; } } .main-navigation ul ul { position: absolute; left: 0; z-index: 99999; display: none; float: left; padding: 0; background: #4d4d4d; background: hsl(0, 0%, 30%); } .main-navigation ul ul ul { left: 100%; top: 0; } .main-navigation ul ul a { width: 200px; } .main-navigation ul ul li { } .main-navigation li:hover > a { color: #fff; background: #2a2a2a; } .main-navigation ul ul :hover > a { } .main-navigation ul ul a:hover { background: #313131; background: hsl(0, 0%, 19%); } .main-navigation ul li:hover > ul { display: block; } .main-navigation ul ul li:hover > ul { /*left: 100%; sub sub menu problems on hover*/ } .main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a:hover, .main-navigation .current-menu-item > a:hover { background: white; color: #313131; color: hsl(0, 0%, 19%); /*border-bottom: solid 1px #A7A7A7;*/ } .main-navigation .current_page_ancestor { background: #4d4d4d; background: hsl(0, 0%, 30%); } .main-navigation ul ul .current_page_parent, .main-navigation .current_page_parent .current_page_item > a { color: #fff; color: hsl(0, 0%, 100%); background: #313131; background: hsl(0, 0%, 19%); } /* ############ Small menu ################ */ .menu-toggle { cursor: pointer; display: none; /* hide small menu if width less than 600px */ } /*-------------------------------------------------------------- 5.0 - Main Content --------------------------------------------------------------*/ .container , .h-container{ max-width: 1000px; margin: 0 auto; padding-top:1px; } #content { margin: 0px; background: #fff; padding: 20px 15px 20px 15px; overflow: hidden; } .content-area { width: 100%; float:left; margin-left: -320px; padding-left: 320px; } .site-main { word-wrap: break-word; } .home-services{ padding: 30px 0 10px 0;} .home-services h3 { border-bottom: solid 5px #050505; font-family: Oswald, sans-serif; } /* Text meant only for screen readers */ .screen-reader-text, .assistive-text { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } /*-------------------------------------------------------------- 5.1 Content Meta --------------------------------------------------------------*/ .sticky { } .entry-header a:link, .entry-header a:visited { text-decoration: none; } .entry-header a:hover, .entry-header a:focus { } .entry-title { font-size: 2em; font-family: Oswald, sans-serif; text-transform: uppercase; margin-top: 0; line-height: 1.3em; word-wrap: break-word; } .name-date { font-size: 0.8em; text-transform: uppercase; margin-top: 1.5em; } .entry-meta { clear: both; display: block; } .index-meta { margin: 1.5em 0; } .index-meta li { float: left; margin: 0 1px 0 0; text-transform: uppercase; } .index-meta li a:link, .index-meta li a:visited { font-size: 0.6em; padding: 2px 20px; background: #9b9b9b; text-decoration: none; line-height: 17px; 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; } .single-thumb { margin: 0 0 1em 0; } .single-thumb img { max-width: 100%; height: auto; } .entry-content p { line-height: 1.4em; /*margin-bottom: 2em;*/ } .entry-content li { font-size: 0.9em; margin: 0 0 1em 2em; line-height: 1.3em; list-style-type: square; } .entry-content ul { /*list-style-type: none;*/ margin-bottom: 2em; } .entry-content ol { list-style-type: decimal; margin-bottom: 2em; } .single-author .entry-meta .byline { } #content nav { display: block; overflow: hidden; margin: 15px 0; } #content nav .nav-previous { float: left; width: 50%; } #content nav .nav-next { float: right; text-align: right; width: 50%; } #content #nav-above { display: none; } .paged #content #nav-above, .single #content #nav-above { display: block; } #nav-below { margin: 1em 0 0; } .page-link { clear: both; margin: 0 0 1em; } .page .edit-link { clear: both; display: block; } .index-title { font-family: Oswald, sans-serif; font-size: 2em; text-transform: uppercase; margin: 20px 0; line-height: 1.3em; word-wrap: break-word; } .index-title a { text-decoration: none; } .index-title a:hover, .index-title a:focus { } .index-name-date { font-size: 0.8em; text-transform: uppercase; margin: 20px; } .index-name-date a { text-decoration: none; } .index-name-date a:hover, .index-name-date a:focus { text-decoration: underline; } .index-content { margin: 20px; } .page-header { background: #EAEAEA; } .page-header h1 { text-transform: uppercase; font-size: 18px; margin: 0; padding: 20px 50px; } /*-------------------------------------------------------------- 5.2 - Content Index --------------------------------------------------------------*/ .entry-content { padding-top: 15px; } /*-------------------------------------------------------------- STYLES FOR TEMPLATE: CONTENT - SIDEBAR; --------------------------------------------------------------*/ .content-area .index-post-container { width: 100%; border: none; float: none; margin: 0 0 30px 0; padding-bottom: 10px; padding-top: 10px; } /*-------------------------------------------------------------- STYLES FOR TEMPLATE: SIDEBAR - CONTENT; --------------------------------------------------------------*/ .content-area-right { float: right; margin-right: -320px; padding-right:320px; width: 100%; } .site-main-right { } #sidebar-left { float: left; width: 300px; margin: 0 20px 0 0px; } hr.index-hr { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); } .content-area .the-thumbnail { } .content-area .index-title, .content-area .index-name-date, .content-area .index-content { margin: 20px 0; } .meta-space{ margin-right: 5px; } .category_list { padding: 15px 0 5px 0; } /*-------------------- single posts pagination ----------------------------*/ .paging-navigation, .post-navigation { font-size: 18px; font-family: 'Ubuntu', sans-serif; color: #000; } .post-nav-box { padding: 2em 15px; background: #F1F0F0; margin-bottom: 4em; border-top: hsl(0, 0%, 80%) solid 1px; border-bottom: hsl(0, 0%, 80%) solid 1px; } /*-------------------- index pagination ----------------------------*/ .paging-navigation ul { margin: 0; } .paging-navigation li { display: inline; } a.page-numbers, span.page-numbers { padding: .3em .7em; color: #333; color: hsl(0, 0%, 20%); } a:hover.page-numbers, a:focus.page-numbers{ color: #000; color: hsl(0, 0%, 0%); } .paging-navigation .current { font-weight: bold; color: #000; color: hsl(0, 0%, 0%); } /* Blog Index continue reading button */ .continue-reading { font-weight: 700; font-size: 17px; } .continue-reading i { margin-left: .5em; } /*-------------------------------------------------------------- 6.0 - Sidebar --------------------------------------------------------------*/ #sidebar { float: right; width: 300px; margin: 0 0 0 20px; } #sidebar .widget, #sidebar-left .widget { width: 298px; float: left; padding: 20px; margin: 0 0 20px 0; box-shadow: 1px 1px 5px #888888; } #sidebar .widget-title, #sidebar-left .widget-title { font-family: Oswald, sans-serif; font-size: 24px; text-transform: uppercase; margin: -20px -20px 10px -20px; padding: 5px 0 5px 20px; background: #111111; line-height: 1.3em; color: #fff; word-wrap: break-word; box-shadow: 0px 3px 5px #888888; } #sidebar .children, #sidebar-left .children { margin-left: 0.5em; padding: 0!important; float: none; } #sidebar ul li a , #sidebar-left ul li a { text-decoration: none; display: block; padding: 0; font-size: 90%; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; } #sidebar ul li a:hover, #sidebar-left ul li a:hover, #sidebar ul li a:focus, #sidebar-left ul li a:focus { background-color: #E5E5E5; text-decoration: none; padding: 10px; } /*-------------------------------------------------------------- 6.1 - Sidebar Widgets --------------------------------------------------------------*/ /* Sidebar search box */ .search-form input.search-field { box-sizing: border-box; width: 100%; } /* Hide search button from sidebar */ .search-form input.search-submit { display: none; } .widget ul, .widget ol { padding: 0; margin: -1em 0 0; list-style-type: none; } .widget li { padding: 1em 0 0; } .widget li ul, .widget li ol { margin-top: 0; } /*-------------------------------------------------------------- 6.2 - Font Awesome Widget --------------------------------------------------------------*/ .widget li li { margin-left: 1.5em; } .widget_recent_entries li:before, .widget_recent_comments li:before, .widget_categories li:before, .widget_archive li:before, .widget_pages li:before, .widget_latest_posts li:before{ display: block; float: left; padding-top: 0px; margin-left: -1.5em; font-family: 'fontawesome'; font-size: 14px; } .widget_recent_entries li, .widget_recent_comments li, .widget_categories li, .widget_pages li, .widget_latest_posts li { margin: 0 0 .5em 2.5em; } .widget_recent_entries li:before { content: "\f15c"; } .widget_recent_comments li:before { content: "\f075"; } .widget_pages li:before { content: "\f15b"; } .widget_archive li:before { content: "\f187"; } .widget_archive li { margin: 0 0 0 2.5em; } .widget_categories li:before { content: "\f07c"; } .widget_latest_posts li:before { content: "\f19a"; } /* Calendar Widget */ .widget_calendar #wp-calendar { color: #555; width: 100%; text-align: center; } .widget_calendar #wp-calendar caption, .widget_calendar #wp-calendar td, .widget_calendar #wp-calendar th { text-align: center; } .widget_calendar #wp-calendar tr { line-height: 1.8em; } .widget_calendar #wp-calendar caption { font-size: 1em; padding: 5px 0 10px 0; text-transform: uppercase; } .widget_calendar #wp-calendar th { background: #f4f4f4; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; font-weight: bold; } .widget_calendar #wp-calendar tfoot td { background: #f4f4f4; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } /*-------------------------------------------------------------- 7.0 - Comments --------------------------------------------------------------*/ .recentcomments { font-size: 90%; padding: 10px 0; } .recentcomments a { font-size: 100%!important; } .recentcomments a:hover, .recentcomments a:focus { background: inherit; text-decoration: underline; } .textwidget { padding: 10px 0 0 0; line-height: 1.3em; font-size: 0.9em; } .textwidget p { font-size: 100%; } /* PAGINATION */ .paginationBox { clear: both; display: block; float: left; margin: 1em 0 2em 0; } ul.pagination { margin: 0px auto 0px auto; padding: 0px 0px 10px 0px; position: relative; font-size: 80%; line-height: 1em; list-style-type: none; } .pagination li { float: left; vertical-align: middle; background-color: #fff; margin-right: 1px; } .pagination span, .pagination a { float: left; border: 1px #ccc solid; padding: 3px 9px 4px 9px; text-decoration: none; width: auto; color: #999; } .pagination a:hover, .pagination a:focus { color: #fff; background-color: #ccc; } .pagination .current{ padding: 3px 9px 4px 9px; color: #fff; background-color: #ccc; border: 1px #ccc solid; } /* END PAGINATION */ /*-------------------------------------------------------------- 8.0 - Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; } .alignright { display: inline; float: right; } .aligncenter { display: block; margin: 0 auto; } .aligncentertxt { text-align: center; } blockquote { font-family: Georgia, "Times New Roman", Times, serif; margin: 1.5em 0; padding-left: 2em; border-left: 1px #ccc solid; font-style: italic; color: #333; line-height: 1.4em; border-left-color: #EFEFEF; border-left-width: 10px; } /*-------------------------------------------------------------- 8.1 - Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ''; display: table; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } /*-------------------------------------------------------------- 9.0 - Images --------------------------------------------------------------*/ img { max-width: 100%; height: auto; } img.size-auto, img.size-full, img.size-large, img.size-medium, .attachment img, #sidebar img, #sidebar-left img, .wp-caption { max-width: 100%; /* When images are too wide for containing element, force them to fit. */ height: auto; /* Override height to match resized width for correct aspect ratio. */ } a img { border: none; } p img { margin-bottom: 1em; } img.alignleft, .wp-caption.alignleft { margin-right: 1.5em; margin-bottom: 1.5em; margin-top: 5px; } img.alignright, .wp-caption.alignright { margin-left: 1.5em; margin-bottom: 1.5em; margin-top: 5px; } img.aligncenter, .wp-caption.aligncenter { margin: 0 auto 1.5em auto; height: auto; } .wp-caption { padding: 10px; text-align: center; border: 1px #ccc solid; } .wp-caption img { margin: 0; } .wp-caption .wp-caption-text { margin: .5em; font-size: 80%; } .gallery-caption { } .wp-smiley { margin: 0; } /* END Images */ /*-------------------------------------------------------------- 9.1 - Image Attachments --------------------------------------------------------------*/ .image-attachment .entry-header { margin-left: 0; width: 100%; float: none; } .image-attachment div.entry-meta { float: left; font-size: .9em; } .image-attachment nav { float: right; margin: 0 0 1em 0; font-size: .9em; } .image-attachment .previous-image { margin-right: 10px; } .image-attachment .next-image { margin-left: 10px; } .image-attachment .entry-content { clear: both; } .image-attachment .entry-content .entry-attachment { background: #eee; margin: 0 0 1em; padding: 1em; text-align: center; } .image-attachment .entry-content .attachment { display: block; margin: 0 auto; text-align: center; } /*-------------------------------------------------------------- 10.0 - Forms --------------------------------------------------------------*/ button, input, select, textarea { font-size: 100%; /* Corrects font size not being inherited in all browsers */ margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ vertical-align: baseline; /* Improves appearance and consistency in all browsers */ } button, input[type="button"], input[type="reset"], input[type="submit"] { padding: 5px; font-size: 16px; font-family: 'Lato'; text-transform: uppercase; line-height: 1; color: hsl(0, 0%, 100%); background: #3c3c3c; background: hsl(0, 0%, 24%); border: none; border-radius: 3px; cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background: #000; background: hsl(0, 0%, 0%); } button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { background: #000; background: hsl(0, 0%, 0%); } input[type="checkbox"], input[type="radio"] { padding: 0; /* Addresses excess padding in IE8/9 */ } input[type="search"] { -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */ -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ -moz-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ border: 0; padding: 0; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { padding: 8px; font-family: 'Lato', sans-serif; color: #333; border: 1px solid #ccc; } 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: 3px; } textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ padding-left: 3px; vertical-align: top; /* Improves readability and alignment in all browsers */ width: 100%; } /* END Forms */ /*-------------------------------------------------------------- 11.0 - Comments --------------------------------------------------------------*/ #comments-title { text-transform: uppercase; font-weight: 100; margin-bottom: 2em; } #reply-title { text-transform: uppercase; margin: 2em 0 1em 0; font-family: Oswald, sans-serif; } article.comment { margin-left: 34.04255319148936%; margin-bottom: 3em; padding-bottom: 1em; border-bottom: 1px solid #CCC; } .comment-footer { margin-left: -51.61290322580645%; width: 48.38709677419355%; float: left; font-size: 0.9em; line-height: 1.3em; } .left-content { float: left; margin-right: 10px; } .comment-author { text-transform: uppercase; color: #999999; } /* Custom style for post author */ .bypostauthor { background: #EBEBEB; padding: 5px 10px; border: none; } .commentlist .children { margin-left: 60px; } .comment-footer a:link, .comment-footer a:visited { color: #999; font-size: 90%; text-decoration: none; } .comment-footer a:hover, .comment-footer a:focus { color: #333; } .comment-footer .reply a:link, .comment-footer .reply a:visited { width: 48px; border: 1px #ccc solid; display: block; text-transform: uppercase; font-size: 70%; text-align: center; padding: 0; } .comment-footer .reply a:hover, .comment-footer .reply a:focus { border-color: #999; } .comment-footer .children li { margin-left: 60px; } #commentform { margin-bottom: 2em; } #commentform input:focus, #commentform textarea:focus { outline: 1px solid #808080; } #commentform label { display: inline-block; margin-bottom: 0.4em; font-size: 90%; } #commentform input, #commentform textarea { padding: 5px; } .comment-notes { margin-left: -51.61290322580645%; width: 38.38709677419355%; float: left; font-size: 80%; color: #999; } .form-allowed-tags { font-size: 80%; color: #999; } #respond input[type=text] { display: block; /* width: 60%;*/ } #respond textarea { display: block; margin: 0 0 1em; /* width: 80%;*/ } #respond .form-allowed-tags { clear: both; /* width: 80%;*/ } #respond .form-allowed-tags code { display: block; } #commentform input#submit { margin: 1em 0 0 0; border: 1px solid #ccc; color: #999; padding: 3px 2em; background: #fff; font-size: 70%; text-transform: uppercase; } #commentform input#submit:hover, #commentform input#submit:focus { border-color: #999; color: #333; cursor: pointer; } .pingback { margin: 0 0 2em 0; } /*-------------------------------------------------------------- 12.0 - Footer --------------------------------------------------------------*/ footer { padding: 0; background: #111111; color: #CCCCCC; font-size: 0.9em; clear: both; display: block; width: 100%; border-top: 10px solid #050505; } #footer-sidebar ul { padding: 50px; } #footer-sidebar ul li { width: 20%; float: left; margin-right: 6.5%; } #footer-sidebar ul li:last-child { margin-right: 0; } #footer-sidebar ul ul, #footer-sidebar ul ul li { margin: 0; padding: 0; float: none; width: 100%; } #footer-sidebar .widget-title { font-family: Oswald, sans-serif; font-size: 1.5em; text-transform: uppercase; margin-top: 0; line-height: 1.3em; word-wrap: break-word; } #footer-sidebar ul ul li a { text-decoration: none; display: block; padding: 0px 0; margin-bottom: 12px; font-size: 90%; line-height: 1.3em; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; } #footer-sidebar ul ul li a:hover, #footer-sidebar ul ul li a:focus { background-color: #666666; text-decoration: none; padding: 10px; } #site-generator p { color: #fff; } /* SPECIAL CASE: RECENT COMMENTS */ #footer-sidebar ul#recentcomments li { padding: 10px 0; } #footer-sidebar ul#recentcomments li:hover, #footer-sidebar ul#recentcomments li:focus { } #footer-sidebar ul li.recentcomments a:link, #footer-sidebar ul li.recentcomments a:visited { border-style: none; color: inherit; text-decoration: none; line-height: 1.2em; } #footer-sidebar ul li.recentcomments a.url { font-weight: normal; font-style: italic; text-transform: none; } #footer-sidebar ul li.recentcomments a:hover, #footer-sidebar ul li.recentcomments a:focus { background-color: transparent; background-image: none; } /* END RECENT COMMENTS */ #footer-credits { margin: 0; padding: 20px 50px; background: #2a2a2a; text-align: center; font-size: 70%; text-transform: uppercase; } #footer-credits p { margin: 0 0 10px 0; } footer a:link, footer a:visited { color: #CCCCCC; text-decoration: none; } footer a:hover, footer a:focus { } /*-------------------------------------------------------------- 12.1 - Footer tags --------------------------------------------------------------*/ .footer-meta { margin: 1em 0; } .footer-tags li { float: left; text-transform: uppercase; margin: 1px 1px 0 0; } .footer-tags li a:link, .footer-tags li a:visited, .footer-tags li.highlight { font-size: 0.7em; padding: 2px 10px; background: #9b9b9b; text-decoration: none; line-height: 15px; color: #fff; } .footer-tags li.highlight, .footer-tags li.highlight { background: #333; padding: 2px 20px; } .footer-tags li a:hover, .footer-tags li a:focus { background: #3399FF; } /*-------------------------------------------------------------- 13.0 - Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; right: 0; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar */ } /*-------------------------------------------------------------- x.0 - Contact form 7 --------------------------------------------------------------*/ .cont-left { width: 500px; float: left; margin-right: 10px; } .cont-right { display: inline-block; width: 400px; } .cont-left input[type=text], input#s { border: 1px solid #A7A7A7; background-color: #fff; width: 90%; height: 30px; padding: 0 10px; } .cont-left input.wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email { border: 1px solid #A7A7A7; background-color: #fff; width: 90%; height: 30px; padding: 0 10px; } .cont-left textarea { border: 1px solid #A7A7A7; background-color: #fff; width: 90%; padding: 10px; } input.wpcf7-form-control.wpcf7-submit { background: #1A1A1A; color: #fff; width: 80px; height: 30px; border: #A7A7A7; } /*-------------------------------------------------------------- 14.0 - GRIDS --------------------------------------------------------------*/ [class*='col-'] { float: left; } .col-2-3 { width: 66.66%; } .col-1-3 { width: 33.33%; } .col-1-2 { width: 50%; } .col-1-4 { width: 25%; } .col-1-8 { width: 12.5%; } /* Clearing Context */ .grid:after { content: ""; display: table; clear: both; } /*-------------------------------------------------------------- GUTTERS --------------------------------------------------------------*/ /* when we set a width, that element stays that width, despite padding or borders being applied. */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* applying a fixed padding to the right side of all columns except the last one. */ [class*='col-'] { padding-right: 20px; } [class*='col-']:last-of-type { padding-right: 0; } /*-------------------------------------------------------------- OUTSIDE GUTTER --------------------------------------------------------------*/ /* add left padding to the grid parent (and optionally top and bottom padding): */ .grid-pad { padding: 20px 0 20px 20px; } /* restore the right padding to the last column: */ .grid-pad > [class*='col-']:last-of-type { padding-right: 20px; } /*-------------------------------------------------------------- 15.0 - Media Queries --------------------------------------------------------------*/ @media (max-width : 1039px) { #header-title { margin-left: 0; margin-bottom: 10px; float: none; } .header-container { margin-left: 0; } .menu { float: left; } .container, .h-container { width: 720px; margin:0 auto; } #site-header { width: 720px; margin:0 auto; } #footer-sidebar ul { padding: 10px; } } /* END (max-width : 1039px) */ @media only screen and (max-width : 719px ) { .menu { float:none;} .container , .h-container { width: 100%; } .search-toggle { padding: 12px 20px 0px 20px; } .content-area { float: none; margin: 0; width: 100%; padding-left:0; } .col-1-3 { width: 100%; } #sidebar { float: none; overflow: hidden; width: 100%; margin: 0; } #sidebar .widget, #sidebar-left .widget { box-sizing: border-box; width: 100%; border: 1px #e3e3e3 solid; float: left; padding: 20px; margin: 0 0 20px 0; } #commentform { margin-left: 0; width: 97%; box-sizing: border-box; margin-bottom: 2em; } .cont-left { width: 100%; float: none; margin-right: 0; } .cont-right { display: block; width: 100%; } #footer-sidebar ul { padding: 10px; } #footer-sidebar ul li { width: 100%; float: none; margin-right: 0; margin-bottom: 30px; } } /* END @media only screen and (max-width : 719px ) */ /* show small menu if below 600px */ @media screen and (max-width: 600px) { .menu-toggle { display: block; height: 3.75em; padding: 0 1em; font-weight: normal; font-size: 14px; text-decoration: none; line-height: 3.75em; color: white; } .main-navigation.toggled .nav-menu { display: block; border-top: 1px solid; border-top-color: #fff; border-top-color: hsla(0, 0%, 100%, .5); } .main-navigation a { margin-top: 0px; } .main-navigation ul { display: none; padding-left: 0; } .main-navigation li { float: none; } .main-navigation li a { padding: 1.3em 2em; } .main-navigation li li a { padding-left: 4em; } .main-navigation li li li a { padding-left: 6em; } .main-navigation li:hover > a { background: #313131; background: hsl(0, 0%, 19%); } .main-navigation ul ul, .main-navigation ul ul ul { position: relative; top: inherit; left: 0; display: block; float: none; background: #313131; background: hsl(0, 0%, 19%); } .main-navigation ul ul a { width: 100%; } .main-navigation ul a:hover, .main-navigation ul ul a:hover { background: #4d4d4d; background: hsl(0, 0%, 30%); } .main-navigation .current_page_ancestor { background: inherit; } .main-navigation ul ul .current_page_parent { color: inherit; background: inherit; } .main-navigation .current_page_item > a, .main-navigation .current_page_item > a:hover, .main-navigation .current_page_item li:hover, .main-navigation .current_page_parent .current_page_item > a { color: #fff; color: hsl(0, 0%, 100%); background: #4d4d4d; background: hsl(0, 0%, 30%); } } /* END @media screen and (max-width: 600px) */ /* END MEDIA QUERIES */