/* Theme Name: Hot Topix Description: Hot Topix is the complete makeover for your Wordpress magazine site! This ultra-modern, professional theme is retina-ready, fully-responsive and comes with five different ad units, including a custom wallpaper ad, and is compatible with WooCommerce and BBPress. Hot Topix also comes with a drag-and-drop homepage, featured posts on each category page, a "sticky" menu bar, post/page slideshows and so much more! Author: MVP Themes Author URI: http://themeforest.net/user/mvpthemes Theme URI: http://themeforest.net/user/mvpthemes Version: 3.02.0 License: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html */ html { overflow-x: hidden; } body { color: #444; font: normal 100% helvetica, arial, sans-serif; line-height: 100%; margin: 0px auto; padding: 0px; } h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { -webkit-backface-visibility: hidden; } img { max-width: 100%; height: auto; } iframe, embed, object, video { max-width: 100%; } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } /************************************************ Hyperlinks ************************************************/ a, a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active, a:focus { outline: none; } /************************************************ Layout ************************************************/ #site { float: left; width: 100%; } #wallpaper { display: block; position: fixed; width: 100%; height: 100%; z-index: 1; } .wallpaper-link { margin: 0 auto; position: absolute; top: 0; width: 100%; height: 100%; z-index: 1; } #bot-wrap { float: left; position: relative; width: 100%; } #wrapper { margin: 0 auto; position: relative; width: 1000px; z-index: 5; } .breaker { clear: both; } .right, .alignright { float: right; } .left, .alignleft { float: left; } .relative { position: relative; } .aligncenter { display: block; margin: 0 auto; } .section-div { border-bottom: 1px dotted #ccc; float: left; margin: 20px 0; width: 100%; } /************************************************ Fly-Out Navigation ************************************************/ #fly-wrap { background: #444; overflow: hidden; position: fixed; top: 0; bottom: 0; left: 0; -webkit-transform: translate3d(-370px,0,0); -moz-transform: translate3d(-370px,0,0); -ms-transform: translate3d(-370px,0,0); -o-transform: translate3d(-370px,0,0); transform: translate3d(-370px,0,0); width: 370px; height: 100%; z-index: 10; } .fly-wrap-out { float: right; margin-left: -40px; position: relative; width: 100%; height: 100%; } .fly-wrap-in { margin-left: 40px; position: relative; height: 100%; } .fly-side-wrap { background: #555; position: absolute; left: 0; top: 0; bottom: 0; width: 40px; height: 100%; } #fly-wrap, #nav-wrapper, #top-wrap, #wallpaper, #bot-wrap, #header-wrapper, #main { -webkit-transition: -webkit-transform 0.3s ease; -moz-transition: -moz-transform 0.3s ease; -ms-transition: -ms-transform 0.3s ease; -o-transition: -o-transform 0.3s ease; transition: transform 0.3s ease; } .fly-but-wrap { cursor: pointer; width: 60px; height: 50px; } .fly-boxed { display: none; } .fly-but-wrap span { background: #fff; display: block; position: absolute; left: 15px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; width: 30px; height: 3px; } .fly-but-wrap span:nth-child(1) { top: 15.5px; } .fly-but-wrap span:nth-child(2), .fly-but-wrap span:nth-child(3) { top: 23.5px; } .fly-but-wrap span:nth-child(4) { top: 31.5px; } .fly-but-wrap.fly-open span:nth-child(1), .fly-but-wrap.fly-open span:nth-child(4) { top: 24px; left: 50%; width: 0%; } .fly-but-wrap.fly-open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .fly-but-wrap.fly-open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .fly-menu { -webkit-transform: translate3d(0,0,0) !important; -moz-transform: translate3d(0,0,0) !important; -ms-transform: translate3d(0,0,0) !important; -o-transform: translate3d(0,0,0) !important; transform: translate3d(0,0,0) !important; } .fly-content, .main-nav-over { -webkit-transform: translate3d(370px,0,0) !important; -moz-transform: translate3d(370px,0,0) !important; -ms-transform: translate3d(370px,0,0) !important; -o-transform: translate3d(370px,0,0) !important; transform: translate3d(370px,0,0) !important; } .main-nav-over2 { -webkit-transform: translate3d(0,0,0) !important; -moz-transform: translate3d(0,0,0) !important; -ms-transform: translate3d(0,0,0) !important; -o-transform: translate3d(0,0,0) !important; transform: translate3d(0,0,0) !important; } ul.fly-bottom-soc { overflow: hidden; width: 100%; } ul.fly-bottom-soc li a { border-top: 1px solid #444; color: #888; cursor: pointer; float: left; overflow: hidden; text-align: center; -webkit-transition: all .3s; transition: all .3s; width: 100%; } ul.fly-bottom-soc li i { font-size: 20px; padding: 10px; width: 20px; } ul.fly-bottom-soc li.fb-soc a:hover, .post-soc-fb { background: #3b5997; color: #fff; } ul.fly-bottom-soc li.twit-soc a:hover, .post-soc-twit { background: #00aced; color: #fff; } ul.fly-bottom-soc li.pin-soc a:hover, .post-soc-pin { background: #cb2027; color: #fff; } ul.fly-bottom-soc li.inst-soc a:hover { background: #36658c; color: #fff; } ul.fly-bottom-soc li.goog-soc a:hover { background: #cd3627; color: #fff; } ul.fly-bottom-soc li.yt-soc a:hover { background: #f00; color: #fff; } ul.fly-bottom-soc li.link-soc a:hover { background: #069; color: #fff; } ul.fly-bottom-soc li.tum-soc a:hover { background: #304e6c; color: #fff; } ul.fly-bottom-soc li.rss-soc a:hover { background: #f60; color: #fff; } #fly-menu-wrap { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } nav.fly-nav-menu { -webkit-backface-visibility: hidden; backface-visibility: hidden; margin: 15px 4.54545454545% 0; /* 15px / 270px */ overflow: hidden; position: absolute !important; width: 90.9090909091%; /* 300px / 270px */ height: 87%; } nav.fly-nav-menu ul { float: left; position: relative; width: 100%; } nav.fly-nav-menu ul div.mega-dropdown { display: none; } nav.fly-nav-menu ul li { border-top: 1px solid #555; cursor: pointer; float: left; position: relative; width: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); } nav.fly-nav-menu ul li:first-child { border-top: none; margin-top: -14px; } nav.fly-nav-menu ul li ul li:first-child { margin-top: 0; } nav.fly-nav-menu ul li a { color: #fff; display: inline-block; float: left; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 400; line-height: 100%; padding: 14px 0; text-transform: uppercase; } nav.fly-nav-menu ul li a:hover { color: #bbb; } nav.fly-nav-menu ul li.menu-item-has-children:after { content: '+'; color: #777; font-family: 'Open Sans', serif; font-size: 32px; font-weight: 800; position: absolute; right: 0; top: 3px; } nav.fly-nav-menu ul li.menu-item-has-children.tog-minus:after { content: '_'; right: 1px; top: -12px; } nav.fly-nav-menu ul li ul.sub-menu { border-top: 1px solid #555; display: none; float: left; padding-left: 6.66666666666%; /* 20px / 300px */ width: 93.333333333%; /* 280px / 300px */ } .fly-fade { background: #000; opacity: 0; width: 100%; position: fixed; top: 0; left: 0; } .fly-fade-trans { opacity: .5; height: 100%; } /************************************************ Header ************************************************/ #header-wrapper { float: left; position: relative; width: 100%; } #top-header-wrapper { background: #fff; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd; float: left; overflow: hidden; width: 998px; height: 30px; } #top-nav { float: left; max-width: 705px; } #top-nav ul { display: inline; float: left; } #top-nav ul li { display: inline; float: left; } #top-nav ul li a, #top-nav ul li a:visited { color: #777; float: left; font: 400 12px/12px 'Oswald', sans-serif; padding: 9px; text-transform: uppercase; } #top-nav ul li a:hover { text-decoration: none; } #top-nav ul li:hover a, #top-nav ul li:hover a:visited { background: #eee; } #top-nav ul li ul { display: none; } #content-social { float: right; max-width: 304px; } #content-social ul { display: inline; float: left; } #content-social ul li { border-left: 1px solid #ddd; display: inline; float: left; overflow: hidden; } .fb-but, .twitter-but, .pinterest-but, .instagram-but, .google-but, .tumblr-but, .linkedin-but, .rss-but { float: left; -moz-transition: all .1s; -ms-transition: all .1s; -o-transition: all .1s; -webkit-transition: all .1s; transition: all .1s; width: 30px; height: 30px; } .fb-but { background: #fff url(images/social-buttons.png) 0 0; } .fb-but:hover { background: #3b5997 url(images/social-buttons.png) 0 -30px; } .twitter-but { background: #fff url(images/social-buttons.png) -30px 0; } .twitter-but:hover { background: #00aced url(images/social-buttons.png) -30px -30px; } .pinterest-but { background: #fff url(images/social-buttons.png) -60px 0; } .pinterest-but:hover { background: #cb2027 url(images/social-buttons.png) -60px -30px; } .instagram-but { background: #fff url(images/social-buttons.png) -234px 0; } .instagram-but:hover { background: #36658c url(images/social-buttons.png) -234px -30px; } .google-but { background: #fff url(images/social-buttons.png) -90px 0; } .google-but:hover { background: #000 url(images/social-buttons.png) -90px -30px; } .tumblr-but { background: #fff url(images/social-buttons.png) -264px 0; } .tumblr-but:hover { background: #304e6c url(images/social-buttons.png) -264px -30px; } .youtube-but { background: #fff url(images/social-buttons.png) -120px 0; float: left; -moz-transition: all 0.1s; -ms-transition: all 0.1s; -o-transition: all 0.1s; -webkit-transition: all 0.1s; transition: all 0.1s; width: 54px; height: 30px; } .youtube-but:hover { background: #f00 url(images/social-buttons.png) -120px -30px; } .linkedin-but { background: #fff url(images/social-buttons.png) -174px 0; } .linkedin-but:hover { background: #069 url(images/social-buttons.png) -174px -30px; } .rss-but { background: #fff url(images/social-buttons.png) -204px 0; } .rss-but:hover { background: #f60 url(images/social-buttons.png) -204px -30px; } #logo-wrapper { float: left; line-height: 0; margin-top: 15px; width: 100%; } #logo-small { float: left; margin: 15px 15px 0 0; width: 257px; } /************************************************ Leaderboard ************************************************/ #leader-wrapper { float: left; margin-top: 15px; overflow: hidden; text-align: center; width: 100%; } #ad-970, #ad-728 { line-height: 0; position: relative; text-align: center; width: 100%; } #ad-320 { display: none; width: 320px; height: 50px; } .head-logo-ad { margin: 0 auto; position: relative; width: 1000px; } #leader-small { float: right; margin: 15px 0; overflow: hidden; text-align: center; width: 728px; } /************************************************ Main Navigation ************************************************/ #nav-wrapper { float: left; margin-bottom: 20px; position: relative; width: 1000px; height: 50px; z-index: 2000; } .nav-wrap-out { float: right; margin-left: -40px; position: relative; right: 20px; width: 100%; } .nav-wrap-in { margin-left: 40px; } .mvp-nav-left { float: left; overflow: hidden; position: relative; max-width: 280px; height: 50px; } .nav-logo, .nav-logo-fade { float: left; line-height: 0; margin: 0 10px; position: relative; max-width: 200px; } .nav-logo-fade { display: none; } #main-nav { float: left; overflow: hidden; max-width: 616px; } #main-nav:hover { overflow: visible; } #main-nav .menu { display: block; float: left; line-height: 0; width: 100%; } #main-nav .menu li { display: block; float: left; position: relative; } #main-nav .menu li a { color: #fff; float: left; font-size: 16px; font-weight: 700; line-height: 100%; padding: 17px 15px; text-transform: uppercase; } #main-nav .menu li:hover, #main-nav .menu li a:hover, #main-nav .menu li.current-menu-item, #main-nav .menu li.current-post-parent { text-decoration: none; } #main-nav .menu li ul { background: url(images/featured-bg.png); display: none; position: absolute; top: 50px; left: 0; width: 170px; z-index: 3000; } #main-nav .menu li:hover ul { display: block; } #main-nav .menu li:hover ul li { display: block; float: left; margin: 0 10px; position: relative; width: 150px; } #main-nav .menu li:hover ul li:first-child { margin-top: 10px; } #main-nav .menu li:hover ul li:last-child { margin-bottom: 10px; } #main-nav .menu li:hover ul li a { float: left; font-size: 12px; font-weight: 700; line-height: 100%; padding: 8px; width: 134px; } #main-nav .menu li:hover ul li ul { background: none; display: none; position: absolute; top: 0; left: 150px; width: 150px; } #main-nav .menu li:hover ul li:hover ul { display: block; } #main-nav .menu li:hover ul li:hover ul li { float: left; margin: 0 !important; width: 150px; } .fixed { -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3); -ms-box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3); -o-box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3); box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3); position: fixed !important; } .nav-search-wrap { float: right; position: relative; width: 50px; height: 50px; } .search-fly-wrap { -webkit-border-bottom-left-radius: 5px; -moz-border-bottom-left-radius: 5px; -ms-border-bottom-left-radius: 5px; -o-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-bottom-right-radius: 5px; -ms-border-bottom-right-radius: 5px; -o-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3); -ms-box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3); -o-box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3); box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3); display: none; overflow: hidden; padding: 10px; position: absolute; top: 50px; right: 0; width: 300px; height: 32px; } #searchform input { background: rgba(0,0,0,.2); border: 0; color: #eee; float: left; font-family: 'Lato', sans-serif; font-size: .9rem; font-weight: 400; line-height: 100%; padding: 2px 5%; width: 90%; height: 30px; } #searchform #searchsubmit { border: none; float: left; } #searchform #s:focus { outline: none; } span.nav-search-but { display: inline-block; float: left; padding: 17px 11px; } span.nav-search-but { cursor: pointer; padding: 14px 15px; } span.nav-search-but i { color: #fff; font-size: 16px; line-height: 100%; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } span.nav-search-but i:hover { opacity: .5; } span.nav-search-but i { font-size: 22px; } /************************************************ News Ticker ************************************************/ #ticker-wrapper { background: #eee; -ms-box-shadow: 0 2px 7px -3px #000; -moz-box-shadow: 0 2px 7px -3px #000; -o-box-shadow: 0 2px 7px -3px #000; -webkit-box-shadow: 0 2px 7px -3px #000; box-shadow: 0 2px 7px -3px #000; float: left; overflow: hidden; position: relative; width: 100%; height: 40px; z-index: 12; } h3.ticker-header { background: url(images/ticker-bg.png) no-repeat right center; color: #fff; float: left; font: 700 20px/20px 'Oswald', sans-serif; max-width: 155px; height: 20px; padding: 10px 25px 10px 20px; text-transform: uppercase; } ul.ticker { display: block; float: left; max-width: 800px; height: 40px; overflow: hidden; } ul.ticker li { display: block; float: left; margin: 12px 15px 10px; overflow: hidden; width: 100%; height: 18px; } ul.ticker li h2 a { color: #777; float: left; font: 400 16px/16px 'Open Sans', sans-serif; } /************************************************ Homepage ************************************************/ #main { background: #fff url(images/white-noise.gif); -moz-box-shadow: 0 20px 150px -40px #000; -ms-box-shadow: 0 20px 150px -40px #000; -o-box-shadow: 0 20px 150px -40px #000; -webkit-box-shadow: 0 20px 150px -40px #000; box-shadow: 0 20px 150px -40px #000; float: left; position: relative; width: 100%; } #content-wrapper { float: left; position: relative; width: 100%; } #featured-main { background: #000; -ms-box-shadow: 0 2px 7px -3px #000; -moz-box-shadow: 0 2px 7px -3px #000; -o-box-shadow: 0 2px 7px -3px #000; -webkit-box-shadow: 0 2px 7px -3px #000; box-shadow: 0 2px 7px -3px #000; float: left; overflow: hidden; position: relative; width: 100%; height: 400px; z-index: 11; } #featured-main a:hover, .cat-dark-top a:hover, .carousel-wrapper a:hover { text-decoration: none; } .main-story { float: left; overflow: hidden; position: relative; width: 57%; height: 400px; } .main-story img { float: left; line-height: 0; opacity: 0.8; -moz-transition: opacity .4s; -ms-transition: opacity .4s; -0-transition: opacity .4s; -webkit-transition: opacity .4s; transition: opacity .4s; margin-left: -25px; min-width: 620px !important; } .main-story:hover img { opacity: 0.5; } .main-story-shade { display: block; position: relative; width: 100%; height: 100%; } .main-story-shade:before { content: ''; -moz-box-shadow: 0 0 150px 5px #000 inset; -ms-box-shadow: 0 0 150px 5px #000 inset; -o-box-shadow: 0 0 150px 7px #000 inset; -webkit-box-shadow: 0 0 100px 8px #000 inset; box-shadow: 0 0 150px 5px #000 inset; float: left; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 15; } .main-text { color: #fff; float: left; padding: 20px; position: absolute; bottom: 0; left: 0; width: 530px; z-index: 20; } .main-text h1 { color: #fff; float: left; font-size: 50px; font-weight: 700; line-height: 120%; margin: 0 4% 5px; text-align: center; text-decoration: none; -moz-text-shadow: 1px 1px 2px #000; -ms-text-shadow: 1px 1px 2px #000; -o-text-shadow: 1px 1px 2px #000; -webkit-text-shadow: 1px 1px 2px #000; text-shadow: 1px 1px 2px #000; text-transform: uppercase; width: 92%; } .main-byline { color: #ddd; float: left; font: 400 20px/20px 'Alegreya', serif; font-style: italic; text-align: center; -moz-text-shadow: 1px 1px 2px #000; -ms-text-shadow: 1px 1px 2px #000; -o-text-shadow: 1px 1px 2px #000; -webkit-text-shadow: 1px 1px 2px #000; text-shadow: 1px 1px 2px #000; width: 100%; } .main-excerpt { float: left; font: 400 14px/18px helvetica, arial, sans-serif; margin-top: 10px; max-height: 0; overflow: hidden; text-align: center; -moz-text-shadow: 1px 1px 2px #000; -ms-text-shadow: 1px 1px 2px #000; -o-text-shadow: 1px 1px 2px #000; -webkit-text-shadow: 1px 1px 2px #000; text-shadow: 1px 1px 2px #000; -moz-transition: max-height .4s; -ms-transition: max-height .4s; -o-transition: max-height .4s; -webkit-transition: max-height .4s; transition: max-height .4s; width: 100%; } .main-story:hover .main-excerpt { max-height: 200px; } .comment-bubble { background: url(images/comment-tri.png) no-repeat right bottom; float: right; position: absolute; top: 10px; right: 10px; height: 22px; z-index: 50; } span.comment-count { color: #fff; float: left; font: 700 10px/10px 'Open Sans Condensed', sans-serif; padding: 3px 6px; } .sub-story { border-bottom: 1px solid #222; border-left: 1px solid #222; float: left; margin: 0; overflow: hidden; position: relative; width: 21.4%; height: 199px; } .sub-story img { float: left; line-height: 0; opacity: .8; -moz-transition: opacity .4s; -ms-transition: opacity .4s; -0-transition: opacity .4s; -webkit-transition: opacity .4s; transition: opacity .4s; } .sub-story:hover img { opacity: 0.5; } .sub-text { padding: 10px 10px 8px 10px; position: absolute; bottom: 0; left: 0; width: 194px; } .sub-text h2 { color: #fff; float: left; font-size: 20px; font-weight: 400; line-height: 120%; margin-bottom: 4px; -moz-text-shadow: 1px 1px 2px #000; -ms-text-shadow: 1px 1px 2px #000; -o-text-shadow: 1px 1px 2px #000; -webkit-text-shadow: 1px 1px 2px #000; text-shadow: 1px 1px 2px #000; text-transform: uppercase; } .sub-text p { color: #fff; float: left; font: 13px/17px helvetica, arial, sans-serif; max-height: 0px; overflow: hidden; -moz-transition: max-height .4s; -ms-transition: max-height .4s; -o-transition: max-height .4s; -webkit-transition: max-height .4s; transition: max-height .4s; } .sub-story:hover .sub-text p { max-height: 100px; } #home-main { border-right: 1px dotted #ccc; float: left; width: 659px; } #home-left { border-right: 1px dotted #ccc; float: left; padding-bottom: 20px; width: 458px; } li.home-widget { display: block; float: left; font: 13px/17px helvetica, arial, sans-serif; overflow: hidden; padding: 20px; position: relative; width: 418px; } li.home-widget:first-child { margin-top: 20px; } li.home-widget:first-child span.home-widget-header { border-top: none; } li.home-widget:first-child .category-light { margin-top: -32px; } span.list-byline { color: #999; float: left; font: bold 10px/10px helvetica, arial, sans-serif; margin-bottom: 5px; } .home-widget .category-dark { background: #000; float: left; margin: -32px 0 -20px -20px; position: relative; width: 458px; } .home-widget .cat-dark-top { float: left; position: relative; width: 100%; } .home-widget .category-dark img { float: left; opacity: 0.8; -moz-transition: opacity .4s; -ms-transition: opacity .4s; -0-transition: opacity .4s; -webkit-transition: opacity .4s; transition: opacity .4s; } .home-widget .cat-dark-top:hover img { opacity: 0.5; } .home-widget .cat-dark-text { float: left; overflow: hidden; padding: 20px 20px 10px; position: absolute; bottom: 0; left: 0; width: 418px; } .home-widget .cat-dark-byline { color: #ddd; float: left; font: 400 20px/20px 'Alegreya', serif; font-style: italic; margin-bottom: 5px; -moz-text-shadow: 1px 1px 2px #000; -ms-text-shadow: 1px 1px 2px #000; -o-text-shadow: 1px 1px 2px #000; -webkit-text-shadow: 1px 1px 2px #000; text-shadow: 1px 1px 2px #000; width: 100%; } .home-widget .cat-dark-text h2 { color: #fff; float: left; font-size: 30px; font-weight: 400; line-height: 120%; -moz-text-shadow: 1px 1px 2px #000; -ms-text-shadow: 1px 1px 2px #000; -o-text-shadow: 1px 1px 2px #000; -webkit-text-shadow: 1px 1px 2px #000; text-shadow: 1px 1px 2px #000; width: 100%; } .home-widget .cat-dark-text p { color: #fff; float: left; font: 14px/18px helvetica, arial, sans-serif; margin-top: 10px; max-height: 0; overflow: hidden; -moz-transition: max-height .4s; -ms-transition: max-height .4s; -o-transition: max-height .4s; -webkit-transition: max-height .4s; transition: max-height .4s; } .home-widget .cat-dark-top:hover .cat-dark-text p { max-height: 70px; } .home-widget .cat-dark-bottom { background: #222; float: left; padding: 20px; width: 418px; } .home-widget .cat-dark-bottom img { opacity: 1.0; -moz-transition: opacity .2s; -ms-transition: opacity .2s; -0-transition: opacity .2s; -webkit-transition: opacity .2s; transition: opacity .2s; } .home-widget .cat-dark-bottom img:hover { opacity: 0.8; } .home-widget .cat-dark-bottom ul li { border-top: 1px dotted #555; display: block; float: left; margin-top: 10px; padding-top: 10px; width: 100%; } .home-widget .cat-dark-bottom ul li img { float: left; margin: 0 10px 0 0; opacity: 1.0; -moz-transition: opacity .2s; -ms-transition: opacity .2s; -0-transition: opacity .2s; -webkit-transition: opacity .2s; transition: opacity .2s; } .home-widget .cat-dark-bottom ul li img:hover { opacity: .8; } .home-widget .cat-dark-bottom ul li p a { color: #fff; float: left; font: bold 13px/17px helvetica, sans-serif; margin-bottom: 0; width: 323px; } .home-widget .cat-dark-bottom ul li:first-child { border-top: none; margin-top: 0; padding-top: 0; } .home-widget .category-light h2 a { color: #333; float: left; font-size: 24px; font-weight: 400; line-height: 120%; margin-bottom: 10px; width: 100%; } .home-widget .category-light p { float: left; font: 13px/17px helvetica, arial, sans-serif; margin-bottom: 10px; } .home-widget .cat-light-top { float: left; margin-top: 20px; position: relative; width: 418px; } .home-widget .cat-light-bottom { background: #f6f6f6; float: left; margin: 10px 0 -20px -20px; padding: 20px; width: 418px; } .home-widget .cat-light-bottom ul li p a { color: #333; float: left; font: bold 13px/17px helvetica, sans-serif; width: 323px; } .sidebar-small-widget .category-light h2 a { color: #333; float: left; font-size: 16px; font-weight: 400; line-height: 120%; margin-bottom: 10px; } .sidebar-small-widget .category-light p { float: left; font: 13px/17px helvetica, arial, sans-serif; margin-bottom: 10px; } .sidebar-small-widget .cat-light-top { float: left; margin-top: 20px; position: relative; width: 160px; } .sidebar-small-widget .cat-light-bottom { background: #f6f6f6; float: left; margin: 10px 0 -20px -20px; padding: 20px; width: 160px; } .sidebar-small-widget .cat-light-bottom ul li img { display: none; } .sidebar-small-widget .cat-light-bottom ul li p a { color: #333; float: left; font: bold 13px/17px helvetica, sans-serif; width: 160px; } /************************************************ Carousel ************************************************/ .es-carousel-wrapper{position:relative;clear:both; width: 458px;} .es-carousel{margin: 0; overflow:hidden;} .es-carousel ul{display:none; padding:0; margin:0;} .es-carousel ul li{height:100%;float:left;display:block; position: relative;} .es-carousel ul li a{display:block;} .es-carousel ul li a img{display:block;border:none;max-height:100%;max-width:100%;padding:0px; margin:0px;} .es-nav span{position:absolute;text-indent:-9000px;cursor:pointer;top:45px;} .es-nav span.es-nav-next{right:0px;width:33px;height:53px;background:transparent url(images/car-buttons.png) -41px 0; opacity: 0.7;} .es-nav span.es-nav-prev{left:0px;width:33px;height:53px;background:transparent url(images/car-buttons.png) 0 0; opacity: 0.7;} .es-nav span.es-nav-next:hover{opacity: 1.0;} .es-nav span.es-nav-prev:hover{opacity: 1.0;} .carousel-wrapper { background: #eee; float: left; margin: -32px 0 -20px -20px; overflow: hidden; position: relative; width: 458px; height: 148px; } ul.home-carousel { background: #000; float: left; overflow: hidden; position: relative; width: 458px; } ul.home-carousel li { display: inline; float: left; overflow: hidden; position: relative; width: 229px; } ul.home-carousel li img { opacity: 0.4; -moz-transition: opacity .2s; -ms-transition: opacity .2s; -0-transition: opacity .2s; -webkit-transition: opacity .2s; transition: opacity .2s; } ul.home-carousel li:hover img { opacity: 0.2; } ul.home-carousel li h2 { color: #fff; font-size: 16px; font-weight: 400; line-height: 120%; margin: 0 40px; max-height: 124px; overflow: hidden; position: absolute; bottom: 15px; left: 0; text-align: center; -moz-text-shadow: 1px 1px 2px #000; -ms-text-shadow: 1px 1px 2px #000; -o-text-shadow: 1px 1px 2px #000; -webkit-text-shadow: 1px 1px 2px #000; text-shadow: 1px 1px 2px #000; } /************************************************ Posts ************************************************/ #title-main { border-bottom: 1px dotted #ccc; float: left; padding: 10px 20px 20px; position: relative; width: 960px; } h1.headline { float: left; font-size: 42px; font-weight: 400; line-height: 120%; margin-bottom: 10px; width: 100%; } h1.headline-page { float: left; font-size: 42px; font-weight: 400; line-height: 120%; margin-bottom: 0; width: 100%; } .breadcrumb { border-bottom: 1px dotted #ccc; color: #777; font: 400 11px/13px 'Open Sans', sans-serif; padding: 10px 20px; width: 960px;; } .breadcrumb a { font: 400 11px/11px 'Open Sans', sans-serif; } span.post-byline { color: #777; float: left; font: 400 16px/16px 'Alegreya', serif; font-style: italic; } span.twitter-byline { background: url(images/twitter.png) no-repeat left center; background-size: 12px 10px; float: left; font: 400 16px/16px 'Alegreya', serif; font-style: italic; margin-left: 10px; padding-left: 16px; } .social-sharing-top { float: left; margin: 25px 0 -10px; width: 96%; /* 960px / 1000px */ } .share-count { float: left; margin: -10px 0 10px; overflow: hidden; padding-right: 10px; text-align: center; } span.social-count-num, span.social-count-text { float: left; text-transform: uppercase; width: 100%; } span.social-count-num { color: #555; font: 700 25px/100% 'Oswald', sans-serif; width: 100%; } span.social-count-text { color: #999; font: 400 10px/100% 'Open Sans', sans-serif; width: 100%; } .facebook-share, .twitter-share, .pinterest-share, .google-share { float: left; margin: 0 5px 5px 0; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; width: 100px; height: 25px; } .social-comments { float: left; margin: 0 5px 5px 0; height: 25px; -moz-transition: background 0.2s; -ms-transition: background 0.2s; -o-transition: background 0.2s; -webkit-transition: background 0.2s; transition: background 0.2s; } .facebook-share p, .twitter-share p, .pinterest-share p, .google-share p { color: #fff; display: inline-block !important; font: 800 13px/100% 'Open Sans', sans-serif; margin-bottom: 0 !important; padding: 6px 0 6px 15px; text-transform: uppercase; } .social-comments p { color: #fff; display: inline-block !important; font: 800 13px/100% 'Open Sans', sans-serif; margin-bottom: 0 !important; padding: 6px 15px; text-transform: uppercase; } .facebook-share { background: #3e64ad; } .twitter-share { background: #6aadd1; } .pinterest-share { background: #de010d; } .google-share { background: #cd3627; } .social-comments { background: #aaa; } .facebook-share:hover, .twitter-share:hover, .pinterest-share:hover, .google-share:hover, .social-comments:hover { opacity: 0.8; } .fb-but1, .twitter-but1, .pinterest-but1, .google-but1 { float: left; width: 25px; height: 25px; } .fb-but1 { background: url(images/social-sharing.png) 0 0; } .twitter-but1 { background: url(images/social-sharing.png) -30px 0; } .pinterest-but1 { background: url(images/social-sharing.png) -60px 0; } .google-but1 { background: url(images/social-sharing.png) -90px 0; } li.fb-line { padding: 5px 5px 0 !important; } #post-area, ul.archive-list { float: left; font: 14px/23px helvetica, arial, sans-serif; position: relative; width: 100%; } #post-area p, ul.archive-list p { display: block; margin-bottom: 15px; } .post-image { display: block; float: left; margin-bottom: 20px; width: 100%; } .post-image img { float: left; line-height: 0; width: 100%; } #featured-caption { color: #aaa; float: left; font: italic 10px/100% helvetica, arial, sans-serif; margin-top: 5px; text-align: center; text-transform: uppercase; width: 100%; } #content-area, #related-posts { display: block; float: left; padding: 20px 3.03030303030303%; /* 20px / 660px */ width: 93.93939393939393%; /* 620px / 660px */ } #content-area h1, #content-area h2, #content-area h3, #content-area h4, #content-area h5, #content-area h6 { color: #333; margin: 10px 0; overflow: hidden; width: 100%; } #content-area h1 { font: 700 34px/36px 'Oswald', sans-serif; } #content-area h2 { font: 700 28px/32px 'Oswald', sans-serif; } #content-area h3 { font: 700 24px/28px 'Oswald', sans-serif; } #content-area h4 { font: 700 20px/24px 'Oswald', sans-serif; } #content-area h5 { font: 700 16px/20px 'Oswald', sans-serif; } #content-area h6 { font: 700 12px/16px 'Oswald', sans-serif; } #content-area ul { list-style: disc outside; margin: 10px 0; } #content-area ol { list-style: decimal outside; margin: 10px 0; } #content-area ul li, #content-area ol li { margin-left: 50px; padding: 5px 0px; } #article-ad { line-height: 0; overflow: hidden; margin-bottom: 10px; position: relative; text-align: center; width: 100%; } #bbpress-forums ol, #bbpress-forums ul { list-style: none; margin: 0; } #bbpress-forums ul li, #bbpress-forums ol li { margin-left: 0; padding: 0; } #post-area blockquote { border-left: 1px #ccc solid; color: #777; font: italic 14px/22px verdana, arial, sans-serif;; margin: 10px; padding-left: 40px; } #author-info { float: left; padding: 0 19px 40px 20px; position: relative; width: 620px; } #author-info img, #author-info-page img { -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; float: left; margin-right: 20px; width: 60px; } #author-info-page { border-bottom: 1px dotted #ccc; float: left; margin: 20px 19px 0 20px; padding-bottom: 20px; position: relative; width: 620px; } #author-text { color: #999; float: left; font: italic 14px/20px helvetica, arial, sans-serif; width: 540px; } h3.post-header { color: #fff; float: left; font: 400 12px/12px 'Oswald', sans-serif; margin: -20px 0 10px 0; padding: 5px 7px; position: relative; text-transform: uppercase; z-index: 10; } .post-tags { float: left; font: 400 12px/12px 'Oswald', sans-serif; margin: 0 0 20px; padding: 0 19px 0 20px; width: 620px; } .post-tags a, span.post-tags-header { color: #fff; display: inline-block; float: left; margin: 0 1px 1px; padding: 5px 7px; text-transform: uppercase; } .post-tags a { background: #aaa; } .post-tags a:visited { color: #fff; } .post-tags a:hover { color: #fff; text-decoration: none; } .prev-next-wrapper { background: #f6f6f6; float: left; padding: 30px 4.5454545454545454%; /* 30px / 660px */ width: 90.909090909090909%; /* 600px / 660px */ } .prev-post { float: left; font: bold 14px/14px helvetica, arial, sans-serif; text-align: center; width: 260px; } .next-post { float: right; font: bold 14px/14px helvetica, arial, sans-serif; text-align: center; width: 260px; } .prev-post a, .next-post a { clear: both; color: #333 !important; float: left; font-size: 20px; font-weight: 400; line-height: 120%; margin-top: 5px; } #related-posts img { -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } #related-posts img:hover { opacity: 0.8; } #related-posts ul { display: inline; float: left; width: 100%; } #related-posts ul li { display: inline; float: left; margin-left: 9px; width: 200px; } #related-posts ul li:first-child { margin-left: 0; } .related-image { float: left; overflow: hidden; position: relative; width: 200px; height: 129px; } .related-text { float: left; padding: 5px 0; } .related-text a { color: #333; font-size: 16px; font-weight: 400; line-height:120%; } .related-text a:visited { color: #333; } .full { width: 1000px !important; } .full2 { width: 960px !important; padding-right: 20px !important; } #post-404 { color: #999; margin: 100px 0; text-align: center; } #post-404 h1 { border-bottom: none; font-size: 80px; font-weight: 700; line-height: 80px; margin-bottom: 10px; } #post-404 p { text-align: center; } .wp-caption, .gallery-caption { margin-bottom: 20px; max-width: 100%; text-align: center; } .wp-caption-text { margin-bottom: 2px; } .sticky { } .bypostauthor { } /************************************************ Categories/Archives ************************************************/ #category-header { float: left; padding-bottom: 20px; text-align: center; width: 100%; } h3.cat-header { color: #333; font-size: 40px; font-weight: 700; line-height: 100%; text-transform: uppercase; } #archive-wrapper { float: left; padding: 20px 19px 20px 20px; width: 620px; } ul.archive-list { float: left; width: 100%; } ul.archive-list li { border-bottom: 1px dotted #ccc; display: block; float: left; margin-bottom: 20px; padding-bottom: 20px; width: 100%; } ul.archive-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .archive-image { float: left; margin-right: 20px; position: relative; width: 200px; } .archive-image img { float: left; opacity: 1.0; -moz-transition: opacity .2s; -ms-transition: opacity .2s; -0-transition: opacity .2s; -webkit-transition: opacity .2s; transition: opacity .2s; } .archive-image:hover img { opacity: 0.8; } .archive-text { float: left; width: 400px; } .archive-text-noimg { float: left; width: 100%; } .archive-text h2 a, .archive-text-noimg h2 a { color: #333; float: left; font-size: 20px; font-weight: 400; line-height: 120%; margin-bottom: 7px; width: 100%; } span.archive-byline { color: #777; float: left; font: 400 16px/16px 'Alegreya', serif; font-style: italic; margin-bottom: 6px; } .archive-text p, .archive-text-noimg p { float: left; font: 13px/17px helvetica, arial, sans-serif; overflow: hidden; width: 100%; } /************************************************ WooCommerce ************************************************/ .woocommerce, .add_to_cart_button, .woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count { font: 12px/normal helvetica, arial, sans-serif !important; } .add_to_cart_button { font-weight: bold !important; } .woocommerce a { font-weight: bold; } #woo-content { display: block; float: left; padding: 20px 19px 20px 20px; width: 620px; } #woo-content h1.page-title { float: left; font-size: 40px; font-weight: 700; margin: 10px 0 20px; text-align: center; text-transform: uppercase; width: 100%; } #woo-content h1 { color: #222; font: 700 24px/26px 'Oswald', sans-serif; margin: 10px 0; width: 100%; } #woo-content h2 { color: #222; font: 700 16px/18px 'Oswald', sans-serif; margin: 10px 0; width: 100%; } #woo-content h3 { font-size: 14px; font-weight: 700; line-height: 120%; margin: 10px 0; width: 100%; } #woo-content h4 { color: #222; font: 700 12px/14px 'Oswald', sans-serif; margin: 10px 0; width: 100%; } #woo-content h5 { color: #222; font: 700 10px/12px 'Oswald', sans-serif; margin: 10px 0; width: 100%; } #woo-content h6 { color: #222; font: 700 8px/10px 'Oswald', sans-serif; margin: 10px 0; width: 100%; } .woocommerce ul.cart_list li, .woocommerce ul.product_list_widget li, .woocommerce-page ul.cart_list li, .woocommerce-page ul.product_list_widget li { margin-bottom: 20px !important; } .woocommerce ul.cart_list li img, .woocommerce ul.product_list_widget li img, .woocommerce-page ul.cart_list li img, .woocommerce-page ul.product_list_widget li img { float: left !important; margin-right: 15px !important; width: 60px !important; } .woocommerce div.product .woocommerce-tabs, .woocommerce #content div.product .woocommerce-tabs, .woocommerce-page div.product .woocommerce-tabs, .woocommerce-page #content div.product .woocommerce-tabs { border-bottom: 1px solid #dfdfdf; margin-bottom: 30px; } .woocommerce-tabs ul.tabs { font-size: 14px; } .woocommerce ul.cart_list li a, .woocommerce ul.product_list_widget li a, .woocommerce-page ul.cart_list li a, .woocommerce-page ul.product_list_widget li a, .woocommerce ul.cart_list li, .woocommerce ul.product_list_widget li, .woocommerce-page ul.cart_list li, .woocommerce-page ul.product_list_widget li { color: #777; font-size: 14px; } p.total { font-size: 14px; margin: 20px 0; padding-top: 10px; } .woocommerce .cart-collaterals { float: left; } .woocommerce table.shop_table, .woocommerce-page table.shop_table, .woocommerce .cart-collaterals .cart_totals table, .woocommerce-page .cart-collaterals .cart_totals table { background: #f9f9f9; border: 1px solid rgba(0,0,0,0.1); } .woocommerce table.shop_table td, .woocommerce-page table.shop_table td, .woocommerce .cart-collaterals .cart_totals tr td, .woocommerce .cart-collaterals .cart_totals tr th, .woocommerce-page .cart-collaterals .cart_totals tr td, .woocommerce-page .cart-collaterals .cart_totals tr th { border-top: 1px solid rgba(0,0,0,0.1) !important; } .woocommerce .cart-collaterals .cart_totals table tr:first-child th, .woocommerce .cart-collaterals .cart_totals table tr:first-child td, .woocommerce-page .cart-collaterals .cart_totals table tr:first-child th, .woocommerce-page .cart-collaterals .cart_totals table tr:first-child td { border-top: 0 !important; } .price_label { text-align: right; } #searchsubmit { display: none; } .woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content, .woocommerce-page .widget_price_filter .price_slider_wrapper .ui-widget-content { float: left; margin: 10px 0 20px; width: 100%; } .woocommerce div.product form.cart .variations select, .woocommerce-page div.product form.cart .variations select, .woocommerce #content div.product form.cart .variations select, .woocommerce-page #content div.product form.cart .variations select, .woocommerce .woocommerce-ordering select, .woocommerce-page .woocommerce-ordering select, .woocommerce form .form-row select, .woocommerce-page form .form-row select, .widget_product_categories select#dropdown_product_cat { padding: 5px; background: #f2f2f2; border: 1px solid #DDD; color: #888; font-size: 10px; text-transform: uppercase; } .woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering { margin: 0 0 2em !important; } .woocommerce .cart-collaterals .shipping_calculator, .woocommerce-page .cart-collaterals .shipping_calculator { text-align: right; } .woocommerce .cart-collaterals .cart_totals table th, .woocommerce-page .cart-collaterals .cart_totals table th, .woocommerce .cart-collaterals .cart_totals table td, .woocommerce-page .cart-collaterals .cart_totals table td { padding: 6px 6px !important; width: 40% !important; } .coupon { width: 210px; } #coupon_code { width: 100px !important; } .woocommerce .star-rating span { font-size: 1em; font-family: "star"; line-height: 1; vertical-align: top; width: 5.4em; height: 1em; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { float: right; } /************************************************ Comments ************************************************/ h3.comment-header { color: #fff; float: left; font: 400 12px/12px 'Oswald', sans-serif; margin: 0 0 20px 20px; padding: 5px 7px; position: relative; text-transform: uppercase; z-index: 10; } #comments { display: block; float: left; font: 400 12px/normal helvetica, arial, sans-serif; overflow: hidden; width: 100%; } .comment-inner { border-bottom: 1px dotted #ddd; margin-bottom: 10px; padding: 10px 0 0; } #comments .comment-inner:after { content: ''; display: block; clear: both; } #comments .comment-avatar, #tab3 .comment-avatar { float: left; width: 46px; } #comments .comment-avatar img, #tab3 .comment-avatar img { -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } #comments .avatar { display: block; background-color: #fff; } #comments .commentmeta { display: block; float: left; margin: 0 10px 10px; } .comment-reply a, #cancel-comment-reply-link { clear: both; color: #fff; font: 700 12px/12px 'Open Sans Condensed', sans-serif; padding: 5px 10px; } .comment-reply a { background: #555; float: right; } #cancel-comment-reply-link { background: #ccc; float: left; margin: 0 0 10px 20px; } .comment-reply a:hover, #cancel-comment-reply-link:hover { background: #333; } .comment-reply a:hover, #cancel-comment-reply-link:hover { text-decoration: none; } ol.commentlist { float: left; padding: 0 3.03030303030303% 20px; /* 20px / 660px */ width: 93.93939393939393%; /* 620px / 660px */ } ol.commentlist h3.comment-header { display: none; } ol.commentlist #respond { border-top: none; } #comments .comment-meta-1 { display: block; float: left; font: bold 14px/normal helvetica, arial, sans-serif; margin-bottom: 5px; width: 100%; } #comments .comment-meta-1 .fn { font-weight:bold; float:left; width:auto; } #comments .comment-meta-1 .reply { display: inline-block; float: right; font-size: 11px; line-height: 11px; padding-top: 2px; } #comments .comment-meta-1 .reply a { color: #555; } #comments .comment-meta-2 { float: left; font: italic 12px/normal helvetica, arial, sans-serif; display: block; margin: 0; } #comments .text { clear: both; display: block; float: left; margin-top: 10px; } #comments .text .waiting_approval { font-size: 14px; font-style: italic; font-weight: bold; } #comments .c { line-height: 20px; } #comments .c p, #comments .c code, #comments .c blockquote, #comments .c ul, #comments .c ol { display: block; margin: 5px 0; } #comments .c a { text-decoration: underline; } #comments .c a:hover { text-decoration: none; } #comments .depth-2 .comment-wrapper { padding-left: 40px; } #comments .depth-2 .commentmeta { width: auto; } #comments .depth-3 .comment-wrapper { padding-left: 80px; } #comments .depth-3 .commentmeta { width: auto; } #comments .depth-4 .comment-wrapper { padding-left: 120px; } #comments .depth-4 .commentmeta { width: auto; } #comments .depth-5 .comment-wrapper { padding-left: 160px; } #comments .depth-5 .commentmeta { width: auto; } #respond { clear: both; position: relative; } #respond form { float: left; padding: 0 3.03030303030303% 20px; /* 20px / 660px */ width: 93.93939393939393%; /* 620px / 660px */ } #respond p { font: 12px/normal helvetica, arial, sans-serif; margin: 0; } #respond .logged-in-as { margin-bottom: 10px; } #respond .comment-notes { margin-bottom: 1em; } .children #respond { margin: 0 48px 0 0; } #comments-list #respond { margin: 0 0 18px 0; } #comments-list ul #respond { margin: 0; } #respond .required { color: #ff4b33; font-weight: bold; } #respond label { color: #888; font-size: 12px; } #respond input { background: #f6f6f6; border: 1px solid #ddd; -ms-box-shadow: 2px 2px 5px 0px #eee inset; -moz-box-shadow: 2px 2px 5px 0px #eee inset; -webkit-box-shadow: 2px 2px 5px 0px #eee inset; -o-box-shadow: 2px 2px 5px 0px #eee inset; box-shadow: 2px 2px 5px 0px #eee inset; display:block; margin: 0 0 9px; padding:5px; width: auto; } #respond textarea { background: #f6f6f6; border: 1px solid #ddd; -ms-box-shadow: 2px 2px 5px 0px #eee inset; -moz-box-shadow: 2px 2px 5px 0px #eee inset; -webkit-box-shadow: 2px 2px 5px 0px #eee inset; -o-box-shadow: 2px 2px 5px 0px #eee inset; box-shadow: 2px 2px 5px 0px #eee inset; width: 95%; } #respond #submit { background: #555; border: 0; box-shadow: none; color: #fff; cursor:pointer; font: 700 12px/12px 'Open Sans Condensed', sans-serif; margin-top:10px; padding: 5px 10px; width: 120px; } #respond #submit:hover { background: #333; } h3#reply-title, h2.comments { color: #fff; font: 700 14px/14px 'Oswald', sans-serif; margin-bottom: 10px; padding: 5px 10px; text-shadow: 1px 1px 0 #000; text-transform: uppercase; } h3#reply-title { display: none; } span.comments { background: #fff; color: #aaa; float: left; font: 400 20px/20px 'Open Sans Condensed', sans-serif; padding-right: 15px; text-transform: uppercase; } span.comments a { color: #666; } span.comments a:hover { color: #f00; text-decoration: none; } #comment-input label { margin-bottom: 10px; } p.cancel-comment-reply { clear: both; } .form-allowed-tags { display: none; } #disqus_thread { float: left; padding: 20px 3%; width: 96%; } /************************************************ Sidebar ************************************************/ #sidebar-wrapper { float: right; width: 340px; } #sidebar-small-wrapper { float: right; width: 200px; } li.sidebar-widget { display: block; float: left; font: 13px/17px helvetica, arial, sans-serif; overflow: hidden; padding: 20px; width: 300px; } li.sidebar-small-widget { display: block; float: left; font: 13px/17px helvetica, arial, sans-serif; overflow: hidden; padding: 20px; width: 160px; } span.home-widget-header { float: left; margin: -20px 0 7px -20px; width: 458px; height: 25px; } h3.home-widget-header, h3.home-widget-header a { color: #fff; float: left; font: 400 12px/12px 'Oswald', sans-serif; margin-left: 20px; padding: 5px 7px; position: relative; text-transform: uppercase; z-index: 10; } h3.widget-buzz-header, h3.widget-buzz-header a { color: #aaa; float: left; font: 300 28px/32px 'Oswald', sans-serif; margin: 0 0 20px -20px; padding: 5px 20px; text-align: center; text-transform: uppercase; width: 100%; } span.small-widget-header { float: left; margin: -20px 0 7px -20px; width: 200px; height: 25px; } h3.small-widget-header, h3.small-widget-header a { color: #fff; float: left; font: 400 12px/12px 'Oswald', sans-serif; margin-left: 20px; padding: 5px 7px; position: relative; text-transform: uppercase; z-index: 10; } span.sidebar-widget-header { float: left; margin: -20px 0 7px -20px; width: 340px; height: 25px; } h3.sidebar-widget-header, h3.sidebar-widget-header a { color: #fff; float: left; font: 400 12px/12px 'Oswald', sans-serif; margin-left: 20px; padding: 5px 7px; position: relative; text-transform: uppercase; z-index: 10; } ul.widget-buzz { display: block; float: left; width: 100%; } ul.widget-buzz li { display: block; float: left; margin-bottom: 20px; overflow: hidden; position: relative; text-align: center; width: 100%; } ul.widget-buzz li h2 a { color: #333; float: left; font-size: 16px; font-weight: 400; line-height: 120%; width: 100%; } span.buzz-byline { color: #999; float: left; font: bold 10px/10px helvetica, arial, sans-serif; margin-bottom: 5px; text-align: center; width: 100%; } .sidebar-widget .category-dark { background: #000; float: left; margin: -32px 0 -20px -20px; position: relative; width: 340px; } .sidebar-widget .cat-dark-top { float: left; position: relative; width: 100%; } .sidebar-widget .category-dark img { float: left; opacity: 0.8; -moz-transition: opacity .4s; -ms-transition: opacity .4s; -0-transition: opacity .4s; -webkit-transition: opacity .4s; transition: opacity .4s; } .sidebar-widget .cat-dark-top:hover img { opacity: 0.5; } .sidebar-widget .cat-dark-text { float: left; overflow: hidden; padding: 20px 20px 10px; position: absolute; bottom: 0; left: 0; width: 300px; } .sidebar-widget .cat-dark-byline { color: #ddd; float: left; font: 400 14px/14px 'Alegreya', serif; font-style: italic; margin-bottom: 5px; -moz-text-shadow: 1px 1px 2px #000; -ms-text-shadow: 1px 1px 2px #000; -o-text-shadow: 1px 1px 2px #000; -webkit-text-shadow: 1px 1px 2px #000; text-shadow: 1px 1px 2px #000; width: 100%; } .sidebar-widget .cat-dark-text h2 { color: #fff; float: left; font-size: 22px; font-weight: 400; line-height: 120%; -moz-text-shadow: 1px 1px 2px #000; -ms-text-shadow: 1px 1px 2px #000; -o-text-shadow: 1px 1px 2px #000; -webkit-text-shadow: 1px 1px 2px #000; text-shadow: 1px 1px 2px #000; width: 100%; } .sidebar-widget .cat-dark-text p { color: #fff; float: left; font: 13px/17px helvetica, arial, sans-serif; margin-top: 10px; max-height: 0; overflow: hidden; -moz-transition: max-height .4s; -ms-transition: max-height .4s; -o-transition: max-height .4s; -webkit-transition: max-height .4s; transition: max-height .4s; } .sidebar-widget .cat-dark-top:hover .cat-dark-text p { max-height: 70px; } .sidebar-widget .cat-dark-bottom { background: #222; float: left; padding: 20px; width: 300px; } .sidebar-widget .cat-dark-bottom img { opacity: 1.0; -moz-transition: opacity .2s; -ms-transition: opacity .2s; -0-transition: opacity .2s; -webkit-transition: opacity .2s; transition: opacity .2s; } .sidebar-widget .cat-dark-bottom img:hover { opacity: 0.8; } .sidebar-widget .cat-dark-bottom .list-byline { display: none; } .sidebar-widget .cat-dark-bottom ul li { border-top: 1px dotted #555; display: block; float: left; margin-top: 10px; padding-top: 10px; width: 100%; } .sidebar-widget .cat-dark-bottom ul li img { float: left; margin: 0 10px 0 0; opacity: 1.0; } .sidebar-widget .cat-dark-bottom ul li p a { color: #fff; float: left; font: bold 13px/17px helvetica, sans-serif; margin-bottom: 0; width: 205px; } .sidebar-widget .cat-dark-bottom ul li:first-child { border-top: none; margin-top: 0; padding-top: 0; } .home-widget .category-light, .sidebar-small-widget .category-light, .sidebar-widget .category-light, .footer-widget .category-light { float: left; position: relative; width: 100%; } .sidebar-widget .category-light h2 a { color: #333; float: left; font-size: 18px; font-weight: 400; line-height: 120%; margin-bottom: 10px; width: 100%; } .footer-widget .category-light h2 a { color: #ddd; float: left; font-size: 18px; font-weight: 400; line-height: 120%; margin-bottom: 10px; width: 100%; } .home-widget .category-light img, .sidebar-small-widget .category-light img, .sidebar-widget .category-light img, .footer-widget .category-light img { float: left; margin-bottom: 10px; opacity: 1.0; -moz-transition: opacity .2s; -ms-transition: opacity .2s; -0-transition: opacity .2s; -webkit-transition: opacity .2s; transition: opacity .2s; } .home-widget .category-light img:hover, .sidebar-small-widget .category-light img:hover, .sidebar-widget .category-light img:hover, .footer-widget .category-light img:hover { opacity: 0.8; } .sidebar-widget .category-light p, .footer-widget .category-light p { float: left; font: 13px/17px helvetica, arial, sans-serif; margin-bottom: 10px; } .sidebar-widget .cat-light-top { float: left; margin-top: 20px; position: relative; width: 300px; } .footer-widget .cat-light-top { float: left; margin-top: 20px; position: relative; width: 300px; } .home-widget .cat-light-top:first-child, .sidebar-small-widget .cat-light-top:first-child, .sidebar-widget .cat-light-top:first-child, .footer-widget .cat-light-top:first-child { margin-top: 0; } .sidebar-widget .cat-light-bottom { background: #f6f6f6; float: left; margin: 10px 0 -20px -20px; padding: 20px; width: 300px; } .footer-widget .cat-light-bottom { background: none; float: left; margin: 10px 0 -20px -20px; padding: 20px; width: 300px; } .cat-light-links { background: none !important; margin: 0 !important; padding: 0 !important; } .home-widget .cat-light-bottom ul li, .sidebar-small-widget .cat-light-bottom ul li, .sidebar-widget .cat-light-bottom ul li { border-top: 1px dotted #ccc; display: block; float: left; margin-top: 10px; padding-top: 10px; width: 100%; } .footer-widget .cat-light-bottom ul li { border-top: 1px dotted #444; display: block; float: left; margin-top: 10px; padding-top: 10px; width: 100%; } .home-widget .cat-light-bottom ul li img, .sidebar-widget .cat-light-bottom ul li img, .footer-widget .cat-light-bottom ul li img { float: left; margin: 0 10px 0 0; opacity: 1.0; -moz-transition: opacity .2s; -ms-transition: opacity .2s; -0-transition: opacity .2s; -webkit-transition: opacity .2s; transition: opacity .2s; } .home-widget .cat-light-bottom ul li img:hover, .sidebar-widget .cat-light-bottom ul li img:hover, .footer-widget .cat-light-bottom ul li img:hover { opacity: 0.8; } .home-widget .cat-light-bottom ul li p, .sidebar-small-widget .cat-light-bottom ul li p, .sidebar-widget .cat-light-bottom ul li p, .footer-widget .cat-light-bottom ul li p { margin-bottom: 0; } .sidebar-widget .cat-light-bottom ul li p a { color: #333; float: left; font: bold 13px/17px helvetica, sans-serif; width: 205px; } .footer-widget .cat-light-bottom ul li p a { color: #ddd; float: left; font: bold 13px/17px helvetica, sans-serif; width: 205px; } .home-widget .cat-light-bottom ul li:first-child, .sidebar-small-widget .cat-light-bottom ul li:first-child, .sidebar-widget .cat-light-bottom ul li:first-child, .footer-widget .cat-light-bottom ul li:first-child { border-top: none; margin-top: 0; padding-top: 0; } .sidebar-small-widget .cat-light-bottom .list-byline, .sidebar-widget .cat-light-bottom .list-byline { display: none; } .widget-ad { float: left; overflow: hidden; text-align: center; width: 100%; } .widget-ad h3 { clear: both; color: #ccc; float: left; font: 400 8px/8px 'Open Sans', sans-serif; margin-bottom: 1px; text-transform: uppercase; width: 100%; } ul.tabber-widget { float: left; margin: -20px 0 0 -20px; padding: 0 20px 20px; width: 300px; } ul.tabber-widget li { background: #777; display: inline; float: left; margin-right: 2px; } ul.tabber-widget li a { color: #fff; float: left; font: 400 12px/12px 'Oswald', sans-serif; padding: 5px 7px; text-transform: uppercase; } ul.tabber-widget li a:hover { text-decoration: none; } ul.latest-comments { float: left; width: 300px;; } ul.latest-comments li { border-bottom: 1px dotted #ccc; display: block; float: left; font: 12px/14px helvetica, arial, sans-serif; margin-bottom: 10px; padding-bottom: 10px; width: 100%; } ul.latest-comments li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } ul.latest-comments li p { margin-bottom: 0; } .comment-image { float: left; margin-right: 10px; width: 50px; } .comment-text { float: left; width: 240px; } .comment-text span { float: left; font: bold 13px/17px helvetica, sans-serif; width: 100%; } .comment-text p { color: #555; float: left; font: 13px/17px helvetica, sans-serif; } .comment-text p a { color: #888; } li.home-widget table, li.sidebar-widget table, li.sidebar-small-widget table, li.footer-widget table { border-collapse: separate; text-align: center; width: 100%; } li.home-widget thead, li.sidebar-widget thead, li.sidebar-small-widget thead, li.footer-widget thead { vertical-align: middle; } li.home-widget p.gd-widgets, li.sidebar-widget p.gd-widgets, li.sidebar-small-widget p.gd-widgets, li.footer-widget p.gd-widgets { margin-bottom: 0; } li.home-widget select, li.sidebar-widget select, li.sidebar-small-widget select, li.footer-widget select { width: 100%; } li.home-widget #searchform, li.sidebar-widget #searchform, li.sidebar-small-widget #searchform, li.footer-widget #searchform { background: #fff; float: left; padding: 0; width: 100%; } li.home-widget #searchform input, li.sidebar-widget #searchform input, li.sidebar-small-widget #searchform input, li.footer-widget #searchform input { background: #fff url(images/search2.png) no-repeat right center!important; border: 1px solid #666; box-shadow: none; color: #666; margin: 0; padding: 10px 3%; width: 94%; height: 12px; } li.recentcomments, li cite { float: left; margin-bottom: 10px; width: 100%; } li cite.fn { margin-bottom: 0; } .rss-date { float: left; width: 100%; } table { float: left; } /************************************************ Twitter Widget ************************************************/ .tweet, .query { display: block; float: left; font: 12px/16px helvetica, arial, sans-serif; padding: 10px 10px 0; position: relative; } .tweet_list { float: left; list-style: none; margin: 0; padding: 0; } .tweet_list li { border-bottom: 1px dotted #ccc; float: left; list-style-type: none; margin-bottom: 10px; padding-bottom: 10px; } li.footer-widget .tweet_list li { border-bottom: 1px dotted #444; float: left; list-style-type: none; margin-bottom: 10px; padding-bottom: 10px; } .tweet_list li a { font-weight: normal; } .tweet_list li:last-child, li.footer-widget .tweet_list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .tweet_list .tweet_avatar { float: left; } .tweet_list .tweet_avatar img { vertical-align: middle; } .tweet_time a { font: 11px/11px helvetica, arial, sans-serif; } .tweet_text { margin-bottom: 3px; } .tweet_text, .tweet_time { display: block; margin-left: 45px; } /************************************************ Footer ************************************************/ #footer-wrapper { background: #333 url(images/dark-noise.gif); float: left; width: 100%; } #footer-top { float: left; padding: 25px 0; width: 100%; } li.footer-widget { border-left: 1px dotted #555; color: #aaa; float: left; font: 13px/17px helvetica, arial, sans-serif; margin: 0 0 20px 14px; overflow: hidden; padding-left: 10px; width: 300px; } li.home-widget p, li.sidebar-small-widget p, li.sidebar-widget p, li.footer-widget p { margin-bottom: 10px; } li.footer-widget:first-child { border-left: none; margin-left: 25px; padding-left: 0; } h3.footer-widget-header, h3.footer-widget-header a { color: #ddd; float: left; font: 400 14px/18px 'Oswald', sans-serif; margin-bottom: 20px; -moz-text-shadow: 1px 1px 2px #000; -ms-text-shadow: 1px 1px 2px #000; -o-text-shadow: 1px 1px 2px #000; -webkit-text-shadow: 1px 1px 2px #000; text-shadow: 1px 1px 2px #000; text-transform: uppercase; width: 100%; } #footer-bottom { background: #222; color: #aaa; float: left; font: 11px/13px helvetica, arial, sans-serif; padding: 10px 25px 5px; width: 950px; } #footer-bottom p { float: left; margin: 0 20px 5px 0; max-width: 500px; } #footer-bottom ul { display: block; float: right; max-width: 450px; overflow: hidden; position: relative; } #footer-bottom ul li { display: inline; float: left; margin: 0 10px 5px 0; } #footer-bottom ul li ul { display: none; } .tag-cloud { float: left; width: 100%; } .tag-cloud a { background: #555; color: #ddd; float: left; font: 400 12px/12px 'Oswald', sans-serif; margin: 0 5px 5px 0; padding: 5px 7px; text-transform: uppercase; } .tag-cloud a:hover { text-decoration: none; } .tag-cloud a:visited { color: #ddd; } /************************************************ Pagination ************************************************/ .nav-links { float: left; padding: 20px 19px 20px 20px; position: relative; width: 620px; } .pagination { clear: both; position: relative; font: bold 12px/12px helvetica, arial, sans-serif; } .pagination span, .pagination a { background: #555; border: 1px solid #333; border-radius: 3px; -ms-box-shadow: 0 3px 5px -1px #aaa; -moz-box-shadow: 0 3px 5px -1px #aaa; -o-box-shadow: 0 3px 5px -1px #aaa; -webkit-box-shadow: 0 2px 3px -1px #aaa; box-shadow: 0 3px 5px -1px #ccc; color: #fff; display:block; float:left; margin: 2px 5px 2px 0; padding: 9px 12px 8px 12px; text-decoration: none; width: auto; } .pagination .current, .pagination a:hover { background: #999; border: 1px solid #777; color: #fff; } .pagination a, .pagination a:visited { color: #fff } /************************************************ Media Queries ************************************************/ @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .fb-but, .fb-but:hover, .twitter-but, .twitter-but:hover, .pinterest-but, .pinterest-but:hover, .google-but, .google-but:hover, .tumblr-but, .tumblr-but:hover, .youtube-but, .youtube-but:hover, .linkedin-but, .linkedin-but:hover, .rss-but, .rss-but:hover, .instagram-but, .instagram-but:hover { background-image: url(images/social-buttons@2x.png); background-size: 294px 60px; } span.twitter-byline { background-image: url(images/twitter@2x.png); background-size: 12px 10px; } }