/****************************************************************** Theme Name: Lightly Theme URI: https://fancythemes.com/themes/lightly Description: Lightly is a WordPress theme for news or magazine website, neatly designed, well coded, and more importantly easy to use. The theme comes with a responsive design and easy to use customization options that are available via WordPress Theme Customizer. This SEO friendly theme is perfect for travel, lifestyle, fashion, food, sports, magazine, tech, or almost any type of blog. Author: FancyThemes Author URI: https://fancythemes.com/ Version: 1.26 License: GPLv2 or later License URI: license.txt Tags: blog, custom-background, custom-menu, entertainment, featured-images, footer-widgets, news, right-sidebar, theme-options, translation-ready, two-columns Text Domain: lightly ******************************************************************/ /****************************************************************** GENERAL NORMALIZE ******************************************************************/ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]), [hidden] { display: none; } /** Base Styles **/ html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; font-size: 13px; line-height: 1.5; word-wrap: break-word; } body, button, input, select, textarea { font-family: sans-serif; color: #333; } /** IE Fixes **/ img { border: 0; -ms-interpolation-mode: bicubic; } svg:not(:root) { overflow: hidden; } figure { margin: 0 0 1.25em; } /** Links **/ a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /** Typography **/ h1 { font-size: 2em; } /* fixes html5 bug */ p { -webkit-hyphens: auto; -moz-hyphens: auto; -epub-hyphens: auto; hyphens: auto; } abbr[title] { border-bottom: 1px dotted; } b, strong, .strong { font-weight: bold; } dfn, em, .em { font-style: italic; } small, .small, sub, sup { font-size: 75%; } ins, .ins { background-color: #ff9; color: #000; text-decoration: none; } mark, .mark { background-color: #ff0; color: #000; font-style: italic; font-weight: bold; } hr { display: block; height: 1px;border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } blockquote { margin: 1.5em 40px; } q { quotes: none; } q:before, q:after { content: ''; content: none; } ul, ol { margin: 1.5em 0; padding: 0; } dd { margin: 0; } nav ul, nav ol, .widget ol, .widget ul, .commentlist { list-style: none; list-style-image: none; margin: 0; } /* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */ sub, sup { line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /** Forms **/ form, fieldset, form ul, form ol, fieldset ol, fieldset ul { margin: 0; border: 0; } legend { border: 0; *margin-left: -7px; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0;padding: 0; } textarea { overflow: auto; vertical-align: top; } /* Colors for form validity */ input:invalid, textarea:invalid { background-color: #f0dddd; } /** Tables **/ table { border-collapse: collapse;border-spacing: 0; } /* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after, nav[role=navigation] .menu ul:before, nav[role=navigation] .menu ul:after, .gallery:before, .gallery:after { content: ""; display: table; } .clearfix:after, nav[role=navigation] .menu ul:after, .gallery:after { clear: both; } .clearfix, nav[role=navigation] .menu ul, .gallery { zoom: 1; } /* wordpress junk */ .wp-smiley { margin: 0 !important;max-height: 1em; } /****************************************************************** PRINT STYLESHEET ******************************************************************/ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } a, a:visited { color: #444 !important; text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999;page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } } /****************************************************************** COMMON & REUSABLE STYLES ******************************************************************/ /* text alignment */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* highlighting search term on search page */ mark, .search-term { background-color: #EBE16F; } /* alerts & notices */ .help, .info, .error, .success { margin: 10px;padding: 5px 18px;border: 1px solid #cecece; } .help { border-color: #E0C618;background-color: #EBE16F; } .info { border-color: #92cae4;background-color: #d5edf8; } .error { border-color: #fbc2c4;background-color: #fbe3e4; } .success { border-color: #c6d880;background-color: #e6efc2; } .placeholder{ color:#bbb !important; } /****************************************************************** BASE MOBILE STYLES Be light and don't over style since everything here will be loaded by mobile devices. You want to keep it as minimal as possible. ******************************************************************/ body { font-family:'Lato', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.571em; color: #222; background-color:#eee; } /********************* LAYOUT & GRID STYLES *********************/ #container { max-width: 90%; max-width:310px; margin:0 auto; -moz-box-shadow:0 -6px 6px rgba(0,0,0,0.4); -webkit-box-shadow:0 0 6px rgba(0,0,0,0.4); box-shadow:0 0 6px rgba(0,0,0,0.4); background-color:#fff; overflow:hidden; } .wrap{} .col60, .col140, .col220, .col300, .col380, .col480, .col540, .col620, .col700, .col780, .col860, .col940 { padding:0 5%; } /********************* LINK STYLES *********************/ a { color:#c22; text-decoration:none; } a:hover, a:focus { text-decoration:underline; } a:active {} a:link { -webkit-tap-highlight-color : rgba(0,0,0,0); } /****************************************************************** H1, H2, H3, H4, H5 STYLES ******************************************************************/ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-family:'Copse', Georgia, "Times New Roman", Times, serif; font-weight: 500; color:#000; line-height: 1.2em; } h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a { color:#130e0e; } h1, .h1 { font-size: 2.571em; line-height: 1.278em; } h2, .h2 { font-size: 1.75em; line-height: 1.333em; margin-bottom:0.750em; } h3, .h3 { font-size: 1.143em; line-height:1.5em; } h4, .h4 { font-size: 1em; line-height:1.429em; } h5, .h5 { font-size: 0.846em; line-height: 2.09em; text-transform: uppercase; letter-spacing: 2px; } img{ width:auto; max-width:100%; height:auto; } /********************* HEADER SYTLES *********************/ #container > .header, #inner-header { background-color: #fff; position:relative; z-index:1000; } #header-ad{ border-bottom:#ddd 1px solid; text-align:center; } #header-ad .widget h4{ display:none; } #logo { text-align:center; } #logo { margin:30px 0 30px; font-size:64px;letter-spacing:-0.05em; line-height:70px; } #logo img { margin-bottom:-5px;} #logo span{ display:block; font-size:16px; letter-spacing:normal; line-height:30px;} #logo a{ color:#000; text-decoration:none; } #sidebar-top{ } #sidebar-top .widget{ margin:0; } /********************* NAVIGATION STYLES *********************/ .primary-menu { background-color: #fff; font-family:'Copse', Georgia, "Times New Roman", Times, serif; float:none; clear:both; width: 100%; } .primary-menu .menu { margin: 1.1em 0 0.75em; } .primary-menu .menu > ul { background:none; text-align:center; padding-bottom:30px; } .primary-menu .menu li, .primary-menu .menu > li { background-color:inherit; background:none; display:inline; text-align:center; } .primary-menu .menu li > a { background-color:inherit; color:#222; display: inline-block; font-size:1.143em; line-height:1.5em; margin-bottom:-1px; text-decoration: none; padding: 0.25em 0.5em; } .primary-menu .menu li:after { content:"/"; color:#bbb; } .primary-menu .menu li:last-child:after { content:""; } .primary-menu .menu li:nth-child(2n) > a { border-right:none; } .primary-menu .menu li > a:hover, .primary-menu .menu li.current-menu-item > a { opacity: .7; text-decoration: underline; } .primary-menu .menu ul li > a { padding-left: 30px; } .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; } /********************* BREADCRUMBS *********************/ #breadcrumbs{ background-color:#fafafa; font-size:0.786em; line-height:1.273em !important; padding-top:20px; padding-bottom:20px; line-height:1em; border-bottom:#ddd 1px solid; } #breadcrumbs a:after{ content:"\f105"; font-family: "FontAwesome"; padding-right:10px; padding-left:10px; } #breadcrumbs a{ text-decoration:none; } /********************* POSTS & CONTENT STYLES *********************/ #content { border-top: 4px solid #bbb; position:relative; } #main{ padding-top:20px; } .hentry { position:relative; } /* post meta */ .meta{ font-size:0.857em; font-style:italic; margin:-5px 0 1em; } .meta, .meta a { color: #bbb; } /* Post title class, The global style for post title, make the link black colored ( inversed color of global link ) */ .post-title, .post-title-small{ font-weight:normal; margin-top:0; margin-bottom:0.243em; } .post-title a{ color:#000; } .post-title-small a{ color:#222; } .post-title a:hover, .post-title-small a:hover{ color:#c22; } .home-thumb{ max-width:100%; } /* Post content */ .post_content { border-bottom:#ddd 1px dotted; margin-bottom:1.5em; } .post_content p { margin-bottom:1em; } .post_content .read-more{ margin-top:0; } .post_content .home-thumb img{ margin:5px 0 0.714em; } .post_content img { margin: 0 0 1.5em; max-width: 100%; height:auto; } .post_content p { margin:0 0 1.25em 0 ; } .post_content ul, .post_content ol, .post_content table, .post_content dl { margin: 1.5em 0; } .post_content ul, .post_content ol { list-style-position:outside; line-height:1.5; margin-left: 1.4em; margin-right: 2.2em; } .post_content li { } .post_content ul li { list-style-type: disc; } .post_content ol li { list-style-type: decimal; } .post_content blockquote { background-color:#fafafa; color:#222; line-height:1.6em; margin: 1.5em 0 ; padding:1em 1.3em 0.1em ; border-left:#bbb 2px dotted; } .post_content dl { margin:1.75em 0 1.75em; } .post_content dt { font-style:italic; margin-top:1.25em; font-size:1.13em; font-weight:700; } .post_content dd { font-style:italic; font-size:.85em; margin-top:1em; line-height:1.6em; } /* image alignment. */ .bypostauthor{} .sticky{} .alignleft, img.alignleft { float:left; margin-right:20px; } .alignright, img.alignright { float:right; margin-left:20px; } .aligncenter, img.aligncenter { clear: both; text-align:center; max-width:100%; } .post_content video, .post_content object, .post_content iframe { max-width: 100%; border:none; } .post_content .fluid-width-video-wrapper{ margin-bottom:2.143em; } .post_content pre, .post_content code { background-color: #eee; border: 1px solid #cecece; padding: 10px; } .post_content code { padding: 4px; } /* wp caption image */ .wp-caption { max-width:100%; background-color: #eee; padding: 5px; } .wp-caption img { margin-bottom: 0; width: 100%; height:auto; } .wp-caption p.wp-caption-text { font-size: 0.85em; margin: 4px 0 7px; text-align: center; } /* image gallery styles */ .gallery { width:100%; margin: 0 -5px 1.429em; } .gallery .gallery-item { float: left; padding:0; margin: 1%; text-align: center; width: 33.33333333%; } .gallery-columns-2 .gallery-item{ max-width:48%; } .gallery-columns-3 .gallery-item{ max-width:31.333%; } .gallery-columns-4 .gallery-item{ max-width:23%; } .gallery-columns-5 .gallery-item{ margin: 0; max-width:18%; } .gallery-columns-6 .gallery-item{ margin: 0; max-width:14.666%; } .gallery-columns-7 .gallery-item, .gallery-columns-8 .gallery-item, .gallery-columns-9 .gallery-item{ max-width:31.333%; } .gallery img { margin:0 0 -5px !important; padding:0; } .gallery img:hover { background-color: white; } .gallery .gallery-caption { display: none; color: #888; font-size: 12px; margin: 0 0 12px; } .gallery dl, .gallery dt { margin: 0; } .gallery br+br { display: none; } .single #main h1.post-title{ font-size: 1.75em; line-height: 1.25em; } #main .default-post{ margin-bottom:10px; } .post_content{ padding-bottom: 10px; } #main .default-post:last-child{ margin-bottom:0; } .type-3 { padding-bottom:4px; margin-bottom:20px; border-bottom:1px dotted #ddd; } .type-3:last-child{ padding-bottom:0; margin-bottom:-0.357em; border-bottom:none; } .type-3 a.home-thumb{ width:55px; } .type-3 .home-thumb img { max-width:55px; margin-top:5px; height:auto; } .widget_posts article{ position:relative; } /* Style for featured slider, big slider placed on homepage */ /* featured posts */ #featured-posts{ position:relative; width:100%; overflow:hidden; border-bottom:#ddd 1px solid; padding-bottom:20px; margin-bottom:20px; } #featured-posts .loop-items{ width:1000%; } #featured-posts .loop-items article{ float:left; width:10%; height:100%; padding:0%; /*margin-bottom:20px;*/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #featured-posts .loop-items article .h1{ font-size:1.75em; line-height:1.25em; } #featured-posts .loop-items .hentry{ border-bottom:none; margin-bottom:0; } #featured-posts .loop-items .hentry img{ margin-bottom:10px; } #featured-posts .custom-loop nav{ display:block; text-align:center; width:100%; border-top:#ddd 1px dotted; padding-top:15px; margin-top:10px; margin-bottom:-5px; } #featured-posts .custom-loop nav a{ color:#222; font-size:0.857em; padding:0px 10px; margin:0; border-right:#ddd 1px dotted; } #featured-posts .custom-loop nav a:last-child{ border-right:none; } #featured-posts .custom-loop nav .active-index{ color:#bbb; } /* Single post special, All individual treatment on single posts */ .single #main, .page #main{ border-top:none; padding-top:30px; } .single .hentry section{ margin-bottom:0 !important; border-bottom:none; } .single .post header, .page .hentry header{ margin-bottom:30px; padding-bottom:10px; border-bottom:#ddd 1px dotted; } .single .post footer{ margin:0 -2.857em; position:relative; padding-left:2.857em; padding-right:2.857em; padding-bottom:0.714em; } /*-x-.single .post_content img, .single .post_content iframe { margin-top:0.571em; }*/ .single #main .post_content, .page-default #main .post_content{ margin-bottom:0; } .single .post footer #article-footer-meta{ position:relative; z-index:10; padding-right:95px; margin-bottom:20px; padding-top:5px; border-top:#ddd 1px dotted; } .single .post footer #article-footer-meta:after{ display:block; content:""; float:none; clear:both; } .single .post footer #author-box{ } .single .post footer #author-box .post-title{ font-size:1.143em; margin-bottom:3px; } .single .post footer #related-box header{ border-bottom:none; margin-bottom:0; } .single .post footer #related-box header img{ margin-bottom:10px; } /* Posts navigation, style for next and previous post on single post */ .post-nav{ /*background-color:#f6f6f6;*/ position:relative; border-top:#ddd 1px dotted; border-bottom:#ddd 1px dotted; margin:0 0 20px; padding:0 ; } .post-nav:before{ content:""; position:absolute; display:block; left:50%; top:0; width:0; height:100%; border-right:#ddd 1px dotted; z-index:0; } .post-nav a{ display:block; width:50%; padding:15px 0; text-decoration:none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .post-nav a .post-title-small, .post-nav a .meta{ padding:0; } #main .post-nav a .post-title-small{ color:#000; } #main .post-nav a:hover .post-title-small{ color:#c22; text-decoration:underline; } .post-nav a[rel=prev]{ float:left; padding-right:20px; } .post-nav a[rel=next]{ float:right; text-align:right; padding-left:20px; } /****************************************************************** PAGE NAVI STYLES ******************************************************************/ .nav-links{ clear:both; float:right; /*-x-background-color:#fff;*/ padding:0; padding-bottom:20px; position:relative; margin-top:-15px !important; } .nav-links a{ color: #333; } .nav-links .current { color:#bbb; } .page-numbers{ border-right: 1px dotted #ddd; padding: 0 8px; } .page-numbers:last-child{ padding: none; border: none; } /****************************************************************** COMMENT STYLES ******************************************************************/ .commentlist { padding:0; margin-bottom:20px; } .commentlist ul.children { padding:0; margin:0; } .commentlist li.comment { position: relative; clear: both; overflow: hidden; margin:0; list-style:none; } .commentlist li.comment[class*=depth-] { margin-left:4%; } .commentlist li.comment.depth-1 { margin-left: 0; } .commentlist article{ padding:1em 0 1.429em; border-bottom:#bbb 1px dotted; /*!important*/ position:relative; } .commentlist li.comment.depth-1 > article{ border-left:none; } .commentlist li.comment.depth-1:first-child > article:first-child{ padding-top:0; } .commentlist .vcard { } .commentlist li.comment.depth-1 > article .vcard { margin-left: 0; } .commentlist .vcard cite.fn { font-style:normal; font-size: 1.143em; } .commentlist .meta{ margin-top:0px; margin-bottom:0; } .commentlist .meta a{ color:#bbb; } .commentlist .vcard .time { font-size:12px; color:#bbb; display:block; } .commentlist .vcard .time a { text-decoration: none; } .commentlist .vcard .time a:hover { text-decoration: underline; } .commentlist .vcard img.photo {} .commentlist .vcard img.avatar { position: absolute; right: 0; top: 1.5em; } .commentlist li.comment.depth-1:first-child > article .vcard img.avatar{ top: 0; } .commentlist li.comment .comment_content { padding-right:60px; } .commentlist li.comment.depth-1 > article .comment_content{ padding-left:0; } .commentlist li.comment .comment_content p { font-size: 1em; margin: 0.7335em 0 0; } .commentlist li.comment ul { } .commentlist .comment-reply-link { font-size:0.786em; } .commentlist a.comment-reply-link:hover { opacity: 1; } /****************************************************************** COMMENT FORM STYLES ******************************************************************/ #respond { margin: -2px 0 20px; padding:0; position:relative; } .commentlist li #respond{ margin-left:4%; border-bottom:#ddd 1px dotted; } #comment-form-title { } #comment-form-elements { margin: 0.75em 0 0; position:relative; } .comment-form-author label, .comment-form-email label, .comment-form-url label, .comment-form-comment label { display: none } .form-submit { overflow: hidden } #respond #comment-form-elements li, .comment-form-author, .comment-form-email, .comment-form-url { clear:none; overflow: hidden; list-style:none; width:50%; border:#ddd 1px solid; margin-bottom:15px; padding:5px 0; } #comment-form-elements label { display:none; } #comment-form-elements label span { color:#ccc; } #comment-form-elements small {} #author, #email, #url, #comment { background:none; font-size: 1em; color:#222; } #author:focus, #email:focus, #url:focus, #comment:focus { outline: none; } #author, #email, #url { padding:6px 10px; width:100%; border:none; } #url{ margin-right:0; } #allowed_tags { font-size: 0.846em; line-height: 1.5em; margin: 1.5em 10px 0.7335em 0; } #comment { resize: none; width:100%; height: 150px; border:#ddd 1px solid; padding:12px 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #commentform {} .comments-logged-in-as { margin-bottom:20px; } .required-attr{ color:#bbb; float:left; width:50%; margin:1.818em 0 0; } #submit { font-size:12px; line-height:10px; color:#fff; text-decoration:none; background-color:#222; padding:10px 10px; border:none; float:right; margin:5px 0; } #submit:hover{ background-color:#c22; } /* form validation */ #commentform input:invalid, #commentform textarea:invalid { border-color: red; outline: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; background-color: #f6e7eb; } #commentform input:valid {} /* no comments */ .nocomments { margin: 0 20px 1.1em; } /********************* SIDEBARS & ASIDES *********************/ .sidebar, #main, .f-widget { overflow:hidden; } .sidebar{ padding-top:20px; } .widget { padding: 0; margin: 0 0 1.429em; } .widgettitle{ font-family:'Copse', Georgia, "Times New Roman", Times, serif; font-size:1.143em; font-size:18px; color:#000; margin-top:0; margin-bottom:20px; position:relative; } .widgettitle:before{ width:100%; position:absolute; content:""; bottom:7px; height:1px; border-top:#888 1px dotted; border-bottom:#888 1px dotted; z-index:1; } .widgettitle > span{ background-color:#fff; padding:0 10px 0 0; z-index:10; position:relative; } /* Search form widget style */ #searchform{ border:#ddd 1px solid; background-color:#fff; padding-bottom:2px; position:relative; padding-right:60px; } #searchform label{ display:none; } #searchform #s{ font-size:0.875em; color:#999; border:none; background:none; padding:10px 6px; width:100%; } #searchform #searchsubmit{ background: transparent; padding:7px 10px; border:none; float:right; margin-top:-1px; display:block; position:absolute; right:2px; top:5px; } #searchform #searchsubmit:before{ content: "\f002"; font-family: "FontAwesome"; } #searchform #searchsubmit:hover{ color:#222; } /* Video widget style */ .widget_video{ boder-top:#ddd 1px solid; overflow:hidden; position:relative; } .widget_video iframe{ border:none; } .widget_video .video-post-wrap{ position:relative; width:1000%; } .widget_video .video-post-wrap .the-video{ width:10%; float:left; } .widget_video .video-post-wrap .meta, .widget_video .video-post-wrap .post-title{ margin-bottom:10px; padding:0; } .widget_video nav{ background-color:#fff; font-size:0.875em; line-height:1em; position:absolute; right:0; bottom:10px; height:20px; } .widget_video nav a{ color:#222; } .widget_video nav .slider-prev{ border-right:#ddd 1px dotted; padding-right:10px; } .widget_video nav .slider-next{ padding-left:10px; } .widget_video .video-container, .widget_video .video-flash, .video-flash { position: relative; padding-bottom: 62.25%; padding-top: 30px; margin-bottom:20px; height: 0; overflow: hidden; } .widget_video .video-container iframe, .widget_video .video-container object, .video-flash object, .widget_video .video-container embed { border:none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Tabs style */ .tabs-widget h4 span{ visibility:hidden; } .tabs{ margin-top:-10px; } .tabs ul.nav-tab{ border-bottom:#ddd 1px dotted; padding-bottom:20px; } .tabs ul.nav-tab li{ float:left; padding:0 10px; margin-bottom:-2px; margin-top:-1px; padding:0 10px 3px; } .tabs ul.nav-tab li.second_tab, .tabs ul.nav-tab li.third_tab{ border-left:#ddd 1px dotted; } .tabs ul.nav-tab li h3{ font-size:14px; padding:0 0 ; margin:0; } .tabs ul.nav-tab li h3 a{ display:inline-block; font-weight:normal; letter-spacing:0; color:#bbb; text-decoration:none; margin-bottom:0; outline:none; } .tabs ul.nav-tab li.tab-active h3 a{ color:#333; } .tabs .tab-content{ margin-top:20px; } .tabs .hide{ display:none; } .widget_comments li{ border-bottom:#ddd 1px dotted; padding-bottom:20px; margin-top:20px; } .widget_comments li:last-child{ border-bottom: none; padding-bottom:0; } #sidebar-top .widgettitle{ display:none; } #sidebar-top .widget ul{ text-align:center; } #sidebar-top .widget ul ul{ display:none; } #sidebar-top .widget ul li{ display:inline; } #sidebar-top .widget ul li:after { content:"/"; margin:0 10px; } #sidebar-top .widget ul li:last-child:after{ content:""; margin:0 0; } #sidebar-top .widget_nav_menu [class^="icon-"], #sidebar-top .widget_nav_menu [class*=" icon-"]{ display:inline; float:none; } #sidebar-top a{ max-width:100%; } #sidebar-top img{ margin-bottom:-5px; max-width:100%; } /********************* FOOTER STYLES *********************/ .footer { background-color:#111; border-top:#000 4px solid; clear: both; padding-top:20px; color:#fff; } .footer .tabs ul.nav-tab li.tab-active h3 a { color:#fff; } .footer .tabs ul.nav-tab li h3 a { color:#bbb; } .footer a, .footer a.widget-more, .footer .post-title{ color:#c22; } .footer .widgettitle{ color:#bbb; border-top-color:#888; } .footer .widgettitle span{ background-color:#111; } .footer-links { margin:0; } .footer-links ul {} .footer-links li { display:inline; } .footer-links li:after{ content:" |"; font-size:0.8em; margin:0 0.4em; } .footer-links li:last-child:after{ display:none; } .footer-links li a { line-height:1em; } /* be careful with the depth of your menus */ .footer-links .sub-menu { display:none; } .attribution { font-size:0.786em; background-color:#000; text-align:center; padding:30px 0 25px; margin:0; } .attribution p{ margin-top: 0; } /** Supporting Contact Form 7 **/ .wpcf7-text, .wpcf7 textarea{ border:#ddd 1px solid; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; padding:6px 10px; } .wpcf7 textarea{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width:100%; } .wpcf7-submit { font-size:10px; line-height:10px; color:#fff; text-transform:uppercase; text-decoration:none; background-color:#222; padding:8px 10px 8px 10px; border:none; margin:5px 0; } .wpcf7-submit:hover{ background-color:#c22; } /****************************************************************** iPAD & TABLET STYLES These is your iPad styles. They will be visible to anyone who resizes their browser from the smallest size to the next break point. ******************************************************************/ @media only screen and (min-width: 480px) { #container{ max-width:460px; max-width:95%; } /* Thumbnail on homepage, this for mobile view, make the image left floated */ #main .home-thumb{ max-width:35%; float:left; margin-bottom:0.714em; margin-right:1.428em; } #main .home-thumb img{ margin-bottom:-5px; } #main .default-post header, #main .default-post .post_content, #main .default-post footer { padding-left:39%; } .single #main h1.post-title { font-size: 2.857em; line-height: 1.2em; } .single .post footer #article-footer-meta p{ margin:0; padding:1.071em 0 0; display:block; float:left; width:auto; } .single .post footer #article-footer-meta .tags-title{ border-left:#ddd 1px dotted; padding-left:10px; margin-left:10px; } #featured-posts .loop-items article .h1{ font-size:2.571em; line-height:1.2em; } .widget_ad125 ul li{ width:25%; } } /* end of media query */ /****************************************************************** DESKTOP & JUST BIGGER THAN AN iPAD This is your standard iPad size or average tablet size. It's also a decent size for desktop users. ******************************************************************/ @media only screen and (min-width: 768px) { /****************************************************************** WORDPRESS BODY CLASSES want to style a page via body class? go ahead ******************************************************************/ #container{ width:95%; max-width:1000px; } #logo{ text-align:left; } #sidebar-top .widget ul{ text-align:right; } /********************* LAYOUT & GRID STYLES *********************/ .wrap { width: 100%; } /***** Grid Options down here, where they are usable ******/ /* layout options */ .col220 { width:25%; } .col300 { width:33.3333333%; } .col480 { width:50%; } .col620 { width:66.66666666%; } .col700 { width:75%; } .col940 { width:100%; } /* layout & column defaults */ .col60, .col140, .col220, .col300, .col380, .col480, .col540, .col620, .col700, .col780, .col860, .col940 { display: inline; float: left; position: relative; padding-left: 1.0638298%; padding-right: 1.0638298%; padding-left:20px; padding-right:20px; padding-left: 2.1276596%; padding-right: 2.1276596%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } /* floats */ .left { float: left; } .right { float: right; } /* default styles & fixes */ .first { margin-left: 0; } /* fixes alignment */ .last { margin-right: 0; } /* fixes alignment */ /********************* HEADER SYTLES *********************/ .header {} #sidebar-top{ margin:30px 0 0; } /********************* NAVIGATION STYLES *********************/ .primary-menu { border-top:#ddd 1px dotted; border-bottom:#ddd 1px solid; } .primary-menu .menu { margin:0; } .primary-menu .menu ul { margin:0; border-bottom:none; padding-bottom:0; } .primary-menu .menu > li { float: left; border-left:#ddd 1px dotted; width:auto; } .primary-menu .menu > li:last-child { border-right:#ddd 1px dotted; } .primary-menu .menu li > a { border-bottom: 0; display:block; background:none; color:#222; font-size:1.143em; border-right:none; border-bottom:none; border-top:none; padding:0.65em 1.071em; } .primary-menu .menu li:after { content:""; } /* plan your menus and drop-downs wisely */ .primary-menu .menu li > ul { background-color:#fff; border: 1px solid #ddd; -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); -moz-border-radius:0; -webkit-border-radius:0; border-radius:0; opacity: 1; position: absolute; text-transform: none; top: auto; width: 200px; z-index: -1; } .primary-menu .menu > li > ul { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -webkit-transition: visibility 0s .4s, -webkit-transform .3s cubic-bezier(.39, .575, .565, 1); transition: visibility 0s .4s, -webkit-transform .3s cubic-bezier(.39, .575, .565, 1); transition: transform .3s cubic-bezier(.39, .575, .565, 1), visibility 0s .4s; transition: transform .3s cubic-bezier(.39, .575, .565, 1), visibility 0s .4s, -webkit-transform .3s cubic-bezier(.39, .575, .565, 1); visibility: hidden; } /* show the dropdowns on hover */ .primary-menu .menu li:hover > ul:nth-child(even), .primary-menu .menu li > ul.is-visible:nth-child(even) { display: block; margin-left:-1px; top: 101%; visibility: visible; } .primary-menu .menu > li:hover > ul:nth-child(even), .primary-menu .menu > li > ul.is-visible:nth-child(even) { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: visibility 0s 0s, -webkit-transform .3s cubic-bezier(.39, .575, .565, 1); transition: visibility 0s 0s, -webkit-transform .3s cubic-bezier(.39, .575, .565, 1); transition: transform .3s cubic-bezier(.39, .575, .565, 1), visibility 0s 0s; transition: transform .3s cubic-bezier(.39, .575, .565, 1), visibility 0s 0s, -webkit-transform .3s cubic-bezier(.39, .575, .565, 1); visibility: visible; } .primary-menu .menu > li > ul ul { display: none; left: 100%; margin-top:-2.143em; top: auto !important; } .primary-menu .menu > li > ul li:hover > ul { display: block; } .primary-menu .menu ul li { display:block; float:none; padding:0; text-align:left; border-left:none; } .primary-menu .menu ul li > a { color:#000; font-size:1em; text-transform:none; font-weight:normal; border-right: 0; display: block; margin:0 1.5em; padding:0.5em 5px 0.5em 0; border-bottom: 1px solid #ddd; } .primary-menu .menu ul li > a:hover { opacity: .7; } .primary-menu .menu ul li:last-child > a { border-bottom: 0 none !important; } /* Menu Levels */ .primary-menu .sub-menu .menu-item-has-children > a { position: relative; } .primary-menu .sub-menu .menu-item-has-children > a:before { content:"\f105"; font-family: "FontAwesome"; position: absolute; right: 6px; vertical-align: middle; font-size:0.786em; } /********************* POSTS & CONTENT STYLES *********************/ .type-3 .home-thumb{ float:left; margin-bottom:0; } .home #inner-content, .archive #inner-content, .single #inner-content, .page #inner-content, .search #inner-content, .error404 #inner-content { position:relative; } #inner-content:before{ content:""; display:block; position:absolute; z-index:0; width:33.333%; height:100%; top:0; right:0; border-left:#ddd 1px solid; } .archive #main{ border-top:none; position:relative; } .single #main .post_content, .page-default #main .post_content{ margin-bottom:0; } /********************* SIDEBARS & ASIDES *********************/ .sidebar iframe{ max-width:100%; } .widget li { margin-bottom: 0.75em; } .widget li ul { margin-top: 0.75em; padding-left: 1em; } .widget_ad125 ul li{ width:50%; } /********************* FOOTER STYLES *********************/ .footer { position:relative; padding-top:0; } .footer #footer-widgets{ padding-top:20px; position:relative; border-right-color:#000; border-left-color:#000; } #inner-footer{ position:relative; border-right-color:#000; } #inner-footer:before{ content:""; display:block; position:absolute; width:50%; height:100%; top:0; left:-1px; border-right:#000 1px solid; border-right-color:inherit; } .footer #footer-widgets:before{ content:""; display:block; position:absolute; z-index:0; width:50%; height:100%; top:0; right:25%; border-right:#000 1px solid; border-left:#000 1px solid; border-right-color:inherit; border-left-color:inherit; } } /* end of media query */ /****************************************************************** AVERAGE VIEWING SIZE This is the average viewing window. So Desktops, Laptops, and in general anyone not viewing on a mobile device. Here's where you can add resource intensive styles. ******************************************************************/ @media only screen and (min-width: 992px) { #container{ max-width:1140px; } } /* end of media query */ /* Colors CSS */ #container > header, #logo a, #logo span {color:#000000;} .primary-menu .menu li > a {color:#222222;} .primary-menu, .primary-menu .menu > li, .primary-menu .menu > li:last-child, #container > header, #searchform {border-color:#dddddd;} .primary-menu .menu > li::after, #sidebar-top .widget ul li::after {color:#dddddd;} #container > header, #inner-header, .primary-menu {background-color:#ffffff;} .primary-menu .menu li ul, .primary-menu .menu ul li > a, .primary-menu .sub-menu .menu-item-has-children > a::before, .mega-dropdown a, .mega-dropdown .post-title a, .mega-dropdown .post-title a:hover, .mega-dropdown .post-title-small a, .mega-dropdown .post-title-small a:hover {color:#000000;} .mega-dropdown .loop-items article .meta, .mega-dropdown .loop-items article .meta a {color:#bbbbbb;} .primary-menu .menu li ul, .primary-menu .menu ul li > a, .mega-dropdown .loop-items article {border-color:#dddddd;} .primary-menu .menu li > ul {background-color:#ffffff;} .widgettitle, .widgettitle a, .tabs ul.nav-tab li h3 a, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {color:#000000;} body, #featured-posts .custom-loop nav a, .post-title a, .post_content blockquote, .nav-links a, #author, #email, #url, #comment, #main .post-nav a .post-title-small, .post-title-small a, .tabs ul.nav-tab li.tab-active h3 a {color:#222222;} #featured-posts .custom-loop nav .active-index, .meta, .meta a, .commentlist .meta, .commentlist .meta a, .nav-links .current {color:#bbbbbb;} a, .post-title a:hover, .post-title-small a:hover, #main .post-nav a:hover .post-title-small {color:#cc2222;} #featured-posts, #featured-posts .custom-loop nav, #featured-posts .custom-loop nav a, #content, #inner-content::before, #breadcrumbs, .post_content, .post_content blockquote, .single .post header, .page .hentry header, .social-share-this, .single .post footer #article-footer-meta, .post-nav, .post-nav::before, .commentlist article, #author, #email, #url, #comment, .page-numbers, .widgettitle::before, .tabs ul.nav-tab, .tabs ul.nav-tab li.second_tab, .tabs ul.nav-tab li.third_tab, .type-3, .widget_comments li {border-color:#dddddd;} #respond #comment-form-elements li, .comment-form-author, .comment-form-email, .comment-form-url, #headline-carousel, #headline-carousel .loop-items article {border-color:#dddddd;} #container, .widgettitle > span {background-color:#ffffff;} #breadcrumbs, .post_content blockquote, .wp-caption {background-color:#fafafa;} #headline-carousel, #headline-carousel .custom-loop .widgettitle span {background-color:#fafafa;} .footer .widgettitle, .footer .widgettitle a, .footer .tabs ul.nav-tab li h3 a, .footer h1, .footer .h1, .footer h2, .footer .h2, .footer h3, .footer .h3, .footer h4, .footer .h4, .footer h5, .footer .h5 {color:#bbbbbb;} #inner-footer, .footer .meta, .footer .meta a, .footer .tabs ul.nav-tab li.tab-active h3 a {color:#ffffff;} .footer a, .footer a.widget-more, .footer .post-title, .footer .post-title a:hover, .footer .post-title-small a:hover {color:#cc2222;} .footer .widgettitle::before, .footer .tabs ul.nav-tab, .footer .tabs ul.nav-tab li.second_tab, .footer .tabs ul.nav-tab li.third_tab, .footer .type-3, .footer .widget_comments li {border-color:#dddddd;} #inner-footer, .footer, .footer .widgettitle span {background-color:#111111;} .attribution {color:#ffffff;background-color:#000000;} .attribution a {color:#cc2222;} .footer {border-top-color:#000000;} .footer #footer-widgets, #inner-footer {border-right-color:#000000;} .footer #footer-widgets {border-left-color:#000000;} #submit, button, .carousel-content .custom-loop nav a {color:#ffffff;background-color:#222222;} #submit:hover, button:hover, .carousel-content .custom-loop nav a:hover {background-color:#cc2222;}