/* ===================================================================== * Keep It Simple v2.0 Layout Stylesheet * url: styleshout.com * 07-12-2014 ===================================================================== TOC: a. Default Overrides and Common Styles b. Header Styles c. Content d. Sidebar e. Entry f. Archives g. Footer ===================================================================== */ /* a. Default Overrides and Common Styles /* ------------------------------------------------------------------ */ body { background: #F6F5F5; border-top: 6px solid #EE1C25; } .page { padding-bottom: 18px; margin-bottom: 36px; } .page h2, .entry h2, .entry h2 a { font: 31px/36px 'opensans-semibold', sans-serif; color: #444; margin-bottom: 0; letter-spacing: -.5px; } .page h2 { margin-bottom: 18px; } /* b. Header Styles /* ------------------------------------------------------------------ */ header { width: 100%; height: 150px; background: #fff; } header#chattop{ width: 100%; height: 30px; background: #fff; } header .header-content { background: #fff url(img/header-content-bg.png) no-repeat right bottom; height: 170px; border-bottom: 1px dashed #E8E8E8; position: relative; } /* header logo */ header h1#logo-text { margin: 0; padding: 0; /* change the values of top and left to adjust the position of the logo text */ position: absolute; top: 60px; left: 18px; } header h1#logo-text a { margin: 0; padding: 0; font: normal 75px Georgia, Serif; letter-spacing: -5px; color: #EE1C25; text-decoration: none; } header p#intro { margin: 0; padding: 0; font: 16px/24px 'opensans-light', Georgia, Serif; font-weight: normal; color: #C8C8C8; width: 400px; /* change the values of top and left to adjust the position */ position: absolute; top: 130px; left: 30px; } /* primary navigation --------------------------------------------------------------------- */ #nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a { margin: 0; padding: 0; border: none; outline: none; } /* nav-wrap */ #nav-wrap { font: 12px 'opensans-bold', sans-serif; text-transform: uppercase; letter-spacing: 2px; background: #F5F4F3; border-bottom: 1px solid #EAE8E8; width: 100%; float: left; position: absolute; top: 6px; left: 0; } /* hide toggle button */ #nav-wrap > a { display: none; } ul#nav { min-height: 50px; width: auto; margin-left: 20px; float: left; position: relative; top: 0; /* left align the menu */ text-align: left; } ul#nav li { position: relative; list-style: none; height: 50px; display: inline-block; padding-top: 10px; } /* float left to remove gaps between 1st level list items */ ul#nav > li { float: left; } /* Links */ ul#nav li a { display: inline-block; padding: 0 15px; line-height: 40px; text-decoration: none; color: #666666; -webkit-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; transition: color .2s ease-in-out; } ul#nav li a:hover { color: #222; } ul#nav li a:active { background-color: transparent !important; } ul#nav li.current > a { background: #fff; padding: 0 14px; border-right: 1px solid #EAE8E8; border-top: 1px solid #EAE8E8; border-left: 1px solid #EAE8E8; border-radius: 3px 3px 0 0; } /* sub menu */ ul#nav ul { position: absolute; top: 52px; left: 0px; padding-bottom: 12px; background: #F5F4F3; min-width: 100%; border: 1px solid #EAE8E8; border-top: none; z-index: 20; border-radius: 0 0 3px 3px; /* for transition effects */ opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; -ms-transition: opacity .25s ease .1s; transition: opacity .25s ease .1s; } /* ul#nav ul ul { position: absolute; top: 0; left: 100%; border-radius: 0 3px 3px 0; } */ ul#nav ul li { padding: 0; display: block; text-align: left; /* for transition effects */ height: 0; overflow: hidden; -webkit-transition: height .25s ease .1s; -moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease .1s; } /* on hover */ ul#nav li:hover > ul { opacity: 1; filter: alpha(opacity=100); } ul#nav li:hover > ul li { height: 42px; overflow: visible; } /* sub menu anchor links */ ul#nav ul li a { padding: 6px 20px; margin: 0; white-space: nowrap; font-size: 13px; font-family: 'opensans-regular', sans-serif; text-transform: none; letter-spacing: 0; } /* c. Content --------------------------------------------------------------------- */ #content-wrap { background: #fff; padding: 42px 0 36px 0; } #content-wrap #main { padding-right: 40px; } /* d. Sidebar --------------------------------------------------------------------- */ #sidebar { padding-top: 0px; padding-left: 40px; } #sidebar h3 { font: 15px/24px 'opensans-bold', sans-serif; text-transform: uppercase; letter-spacing: 1px; } #sidebar .widget { margin-bottom: 18px; } #sidebar p { margin-bottom: 12px; } #sidebar hr { margin-bottom: 24px; } /* search */ #sidebar .widget_search { padding-top: 0; margin-bottom: 36px; } #sidebar .widget_search h3 { display: none; } #sidebar .widget_search form { position: relative; margin: 0; } #sidebar .widget_search .text-search { padding-right: 40px; border:none; width: 100%; min-width: 150px; border-radius: 3px; } #sidebar .widget_search .submit-search { background:url(img/search-icon.png) no-repeat; box-shadow: none; border:none; cursor:pointer; width: 18px; height: 18px; min-height: 18px; margin: -9px 0 0 0; padding: 0; position: absolute; top: 50%; right: 18px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { #sidebar .widget_search .submit-search { background:url(img/search-icon_@2x.png) no-repeat; background-size: 18px 18px; } } /* categories */ #sidebar .widget_categories { } #sidebar .widget_categories ul { margin-top: 12px; margin-bottom: 24px; } /* link List */ #sidebar .link-list { padding: 0; margin: 18px 0 24px 0; } #sidebar .link-list li { font: 15px/30px 'merriweather-regular', sans-serif; padding: 8px 0; margin: 0; border-bottom: 1px dotted #E6E6E6; } #sidebar .link-list li:first-child { border-top: 1px dotted #E6E6E6; } #sidebar .link-list li a { color: #4A5153; } #sidebar .link-list li a:hover { color: #313131; /* color: #93B876; */ } /* tag cloud */ #sidebar .tagcloud { margin: 18px 0 24px -12px; padding: 0; font-size: 17px; } #sidebar .tagcloud a { font: 12px/24px 'opensans-bold', sans-serif !important; display: inline-block; float: left; margin: 0 0 12px 12px; padding: 6px 15px; position: relative; text-transform: uppercase; letter-spacing: 0.5px; background: #E9EBEE; text-decoration: none; letter-spacing: .5px; color: #778888; -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; transition: all .2s ease-in-out; border-radius: 3px; } #sidebar .tagcloud a:hover { color: #fff; background: #93B876; } /* e. Entry /* ------------------------------------------------------------------ */ .entry { padding-bottom: 12px; margin-bottom: 24px; } .entry header { height: auto; } .entry .entry-meta ul { margin: 6px 0 18px; color: #B7B9BD; line-height: 24px; } .entry .entry-meta ul li { display: inline; margin: 0; padding: 0; font-size: 14px; font-family: 'merriweather-regular', sans-serif; } .entry .entry-meta ul .meta-sep {} .entry .entry-meta ul li a { color: #B7B9BD; } .entry .entry-content-media { margin: 24px 0 18px; } .entry .tags { margin-top: 18px; font-family: 'opensans-regular', sans-serif; color: #888; } .entry .tags a { font-family: 'opensans-bold', sans-serif; } /* post-nav */ .post-nav { margin: 18px 0 6px; padding: 12px 0 0 0; font: 15px/30px 'opensans-light', sans-serif; } .post-nav li { display: inline-block; margin: 0; padding: 0; width: 49%; line-height: 30px; } .post-nav li a { color: #888; } .post-nav li strong { font: 16px/30px 'opensans-bold', sans-serif; text-transform: uppercase; color: #93B876; letter-spacing: 0.5px; display: block; } .post-nav li.next { float: right; text-align: right; } .post-nav li.prev { float: left; text-align: left; } /* Comments -------------------------------------------- */ #comments { padding-top: 12px; padding-bottom: 12px; } #comments h3 { font: 20px/30px 'opensans-bold', sans-serif; margin-bottom: 6px; } /* Comments List */ ol.commentlist { border-top: 1px dotted #E1E5E3; margin: 29px 0 54px 0; padding: 0; } .commentlist > li { position: relative; list-style: none; margin: 0; border-bottom: 1px dotted #D9DEDB; padding: 24px 0 17px 0; padding-left: 14%; } .commentlist li .avatar { position: absolute; left: 0px; display: block; height: 48px; width: 48px; } .commentlist li .avatar img { margin-top: 6px; height: 48px; width: 48px; border-radius: 100%; } .commentlist li .comment-info cite { font: 16px/30px 'opensans-bold', sans-serif; color: #454545; } .commentlist li .comment-info .comment-meta { font-size: 14px; line-height: 24px; display: block; } .commentlist li .comment-info .comment-meta .reply { font-family: 'opensans-bold', sans-serif; } .commentlist li .comment-info .comment-meta .sep { margin: 0 5px; color: #AEB6B7; } .commentlist li .comment-text { clear: both; margin: 18px 0 0 0; padding: 0; line-height: 30px; } /* children */ .commentlist li ul.children { margin: 0; padding: 18px 0 0 0; } .commentlist li ul.children li { padding-left: 5% ; padding-top: 17px; border-top: 1px dotted #D9DEDB; } /* comment form ----------------------------------------- */ #comments form { margin-top: 36px; } #comments form label { padding-left: 24px; width: 41.66667%; float: right; } #comments form div { margin: 12px 0 18px 0; } #comments form input, #comments form textarea, #comments form select { width: 58.33333%; float: left; } #comments form .message label { display: none; } #comments form textarea { width: 100%; } #comments form button.submit { text-transform: uppercase; letter-spacing: 2px; display: block; margin-top: 12px; } #comments form span.required { color: #93B876; font-size: 15px; } /* page navigation -------------------------------------- */ .pagenav { font: 18px/30px 'opensans-bold', sans-serif; text-align: left; margin-top: 12px; padding-top: 18px; margin-bottom: 48px; border-top: 1px solid #E8E8E8; } .pagenav p { margin-bottom: 18px; } .pagenav span { font: 18px/30px 'opensans-regular', sans-serif; color: #C0C6C9; margin: 0 15px; } .pagenav a[rel="prev"] { margin-right: 10px; padding-right: 15px; border-right: 1px dotted #CBCFD1; } .pagenav a[rel="prev"]:before { /*content: '\f053';*/ /*content: '\f104';*/ content: '\f177'; font-family: 'fontawesome'; font-size: 15px; margin-right: 12px; } .pagenav a[rel="next"]:after { /*content: '\f054';*/ /*content: '\f105';*/ content: '\f178'; font-family: 'fontawesome'; font-size: 15px; margin-left: 12px; } /* f. Archives /* ------------------------------------------------------------------ */ .archive-list h4 { font: 15px/24px 'opensans-bold', sans-serif; text-transform: uppercase; letter-spacing: 1px; } .archive-list ul { list-style: disc; margin-left: 17px; } /* g. Footer /* ------------------------------------------------------------------ */ footer { padding-top: 36px; margin-bottom: 42px; font-size: 13px; line-height: 24px; position: relative; color: #34393A; } footer h3 { font: 14px/24px 'opensans-bold', sans-serif; margin-bottom: 9px; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; } footer p { margin-bottom: 24px; } footer a, footer a:visited { color: #6C934D; } footer a:hover, footer a:focus { color: #34393A; } footer .info { padding-right: 30px; } footer ul { margin: 0; padding: 0; } footer ul li { margin: 0; line-height: 24px; } footer ul li a, footer ul li a:visited { color: #34393A; } footer ul li a:hover, footer ul li a:focus { color: #6C934D; } /* social links */ footer .social-links { margin: 18px auto 42px auto; padding: 0; text-align: center; } footer .social-links li { display: inline-block; font-size: 32px; line-height: 48px; padding: 0; margin: 0 16px; color: #444; } footer .social-links li:first-child { margin-left: 0; } /* Photostream */ footer .photostream { list-style: none; margin: 12px 0 24px -15px; padding: 0; overflow: hidden; } footer .photostream li { display: inline-block; margin: 0 0 12px 12px; padding: 0; } footer .photostream li a { display: block; height: 60px; width: 60px; background: #fff; padding: 9px; border: 1px solid #E9E9E9; border-radius: 3px; } footer .photostream li a img { vertical-align: bottom; } /* copyright */ footer .copyright { margin: 0; padding: 24px 18px 6px 18px; clear: both; text-align: center; } /* Go To Top Button */ #go-top { position: fixed; bottom: 30px; right: 30px; text-align: center; display: none; } #go-top a { text-decoration: none; border: 0 none; display: block; width: 48px; height: 48px; background-color: #494949; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; color: #fff; font-size: 16px; line-height: 48px; border-radius: 3px; } #go-top a:hover { background: #7BA857; }