/* STYLES.LESS general stylesheet Theme Name: Joe Rogan Author: The Uprising Creative Author URI: http://theuprisingcreative.com/ Version: 1.0 License: All Rights Reserved ****************************************************** See: http://lesscss.org/ for tips and usage ****************************************************** */ /* ----------------------------------- Imports. Only include stylesheets here you don't expect to change, LESS has a known issue that caches imported stylesheets in local storage. They aren't refreshed. --------------------------------------*/ @import 'reset'; @import 'variables'; @import 'modules'; @import 'fancybox'; /* ----------------------------------- Global Styles --------------------------------------*/ html, body {height: 100%;} body { background: #f4f4f4 url(../images/bg_home.jpg) fixed right top no-repeat; background-size: cover; font: 12px/17px Arial, Helvetica, sans-serif; line-height: 2em; color:#777; } /* ----- ANCHORS ----- */ a { color: @linkcolor; text-decoration:none; &:hover { text-decoration:none; color: @linkhover; } } p { line-height: 1.5em; margin-bottom: 12px; } #wpadminbar { display: none; } .back-button { display: block; text-transform: uppercase; color: #00aaa1!important; } .ajax-loader { display: none; position: absolute; width: 32px; height: 32px; background: #000; border-radius: 3px; top: 50%; left: 50%; padding: 6px; margin: -22px 0 0 -22px; z-index: 9999; } #modules { /* padding-top: 10px; */ } /* ----------------------------------- Headings --------------------------------------*/ h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1, h1 a, h1 a:visited, h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited, h4, h4 a, h4 a:visited, h5, h5 a, h5 a:visited, h6, h6 a, h6 a:visited, .side a { text-decoration:none; color: #211e1e; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .side a:hover { color: #333; text-decoration: none; } h2.bgtitle { position: absolute; text-transform: uppercase; font-size: 46px; font-weight: 700; color: #ccc; line-height: 10px; opacity: 0.25; zoom: 1; filter: alpha(opacity=25); top: 131px; left: 18px; z-index: 1; } .ajax-container { position: relative; z-index: 2; } h1.posttitle, h2.posttitle, .post h3, h3.module-title, .title { font-size: 14px; background: url(../images/titlebg.png) no-repeat 0 bottom; text-transform: uppercase; margin: 0 5px 8px 0; padding-bottom: 10px; } h2.posttitle { float: left; } h2 span, h3 span, h4 span { border-bottom: 2px solid #cc4a4a; } h4 { font-size: 13px; } .empty-search-results { font: normal bold 24px Helvetica, Arial, sans-serif; text-align: center; margin-top: 120px; } .post h4 { width: 100%; text-transform: uppercase; border-top: 1px solid #ccc; } .posthead { width: 100%; min-height: 40px; font-size: 14px; } /* ----------------------------------- Banner Ads --------------------------------------*/ .header-banner { display: block; width: 728px; height: 90px; margin: 20px auto; padding: 0; overflow: hidden; } /* ----------------------------------- Main Container --------------------------------------*/ .wrapper { width: 1010px; margin: 0 auto; } /* ----------------------------------- Footer --------------------------------------*/ #footer { position: fixed; bottom: 0; width: 100%; height: 30px; background: #fff; border-top: 1px solid #ccc; text-transform: uppercase; font-size: 10px; z-index: 1000; } .footer-container { width: 980px; margin: 0 auto; text-align: center; } .menu-footer-container { width: 400px; float: left; } #menu-footer { list-style: none; li { list-style: none; float: left; margin-right: 26px; line-height: 30px; } } #copyright { /* float: right; */ line-height: 30px; } /* ----------------------------------- Header, Navigation and Site Player styles. --------------------------------------*/ #header { width: 100%; background: white url(../images/headerbg.png) repeat-x; position: fixed; top: 0; color: #6C6C6C; text-transform: uppercase; font-size: 13px; z-index: 800; } #logo, #player, .mailing, .social { position: relative; margin: 0; float: left; height: 40px; padding: 0 20px; border-right: 1px solid #646464; border-left: 1px solid #232020; } #logo { display: block; width: 175px; padding: 0; border-left: none; } #logo { h1 { margin-top: 11px; margin-left: 20px; a { display: block; width: 140px; height: 18px; background: url(../images/sprite.png) -119px -146px no-repeat; text-indent: -9999px; } } } #player { width: 491px; padding: 0 5px; } .mailing { width: 166px; line-height: 38px; text-align: right; } .social { width: 102px; border-right: none; padding-right: 0; a { float: left; display: block; margin-top: 10px; width: 20px; height: 20px; background: transparent url(../images/sprite.png) no-repeat; background-position: top left; opacity: .5; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } } .social a:hover { cursor: pointer; opacity: 1; } .social a.facebook { background-position: 0 0; } .social a.twitter { background-position: -20px 0; } .social a.itunes { background-position: -40px 0; } .social a.youtube { background-position: -60px 0; } .social a.rss { background-position: -80px 0; } /* ----------------------------------- Nav --------------------------------------*/ #nav-container { clear: both; width: 840px; padding-top: 2px; margin: 0 auto; } #nav, #extern-nav { background: #fff; text-align: center; } #nav li, #extern-nav li { margin: 0 10px; width: auto; display: inline-block; } #nav a, #extern-nav a { color: #211e1e; display: block; font-size: 14px; padding: 5px 6px; text-decoration: none; text-transform: uppercase; border-bottom: 2px solid #fff; font-weight: bold; } #nav a:hover, #extern-nav a:hover { border-bottom: 2px solid #00aaa1; } #nav .current a { color: #444; border-bottom: 2px solid #00aaa1; } /* .current { background: red; } */ /*-------MAIN MENU EXTERNAL LINKS --------*/ #extern-nav { float: left; } /* ----------------------------------- Global Player --------------------------------------*/ .soundcloud-globalplayer { display: block; } .soundcloud-globalplayer ul { float: right; list-style: none; padding-top: 2px; } .soundcloud-globalplayer .track-info, .soundcloud-globalplayer li { float: left; margin: 9px 4px 4px; } .soundcloud-globalplayer ul li a { display: block; height: 20px; width: 20px; background: url(../images/sprite.png) no-repeat; background-position: 0 0; text-indent: -9999px; } .soundcloud-globalplayer ul li a.global-play { background-position: 4px -20px; } .soundcloud-globalplayer ul li a.global-play.is-playing { background-position: -45px -20px; } .soundcloud-globalplayer ul li a.global-prev { background-position: -20px -20px; } .soundcloud-globalplayer ul li a.global-next { background-position: -70px -20px; } .soundcloud-globalplayer ul li a.global-popout { background-position: -262px 2px; } .global-elapsed { display: block; float: left; width: 58px; height: 40px; margin: -1px 10px 0 0; } .global-progress-wrapper { float: left; position: relative; width: 145px; height: 40px; margin-top: -8px; .global-progress-track { display: block; position: absolute; width: 145px; height: 2px; background: #CCC; top: 19px; left: 10px; .global-scrubber { display: block; position: absolute; width: 7px; height: 7px; background: #CCC; top: -3px; left: -3px; cursor: pointer; } } } .global-track-title-wrapper { display: block; float: left; width: 150px; height: 20px; overflow: hidden; } .global-track-title { margin-left: 300px; } /* ----------------------------------- General --------------------------------------*/ .feature { display: block; float: left; } /* ----------------------------------- Page Structure --------------------------------------*/ #container { width: 1000px; margin: 0 auto; } .section { position: relative; clear: both; display: block; width: 100%; min-height: 1000px; } .section p:last-child { margin-bottom: 0; } .inner { width: 1020px; margin: 0 auto; padding: 20px; padding-top: 80px; } .landing, .main, .post { width: 740px; min-height: 285px; } .entry { width: 500px; /* height: 130px; */ /* overflow: hidden; */ } .main, .post { background: #fff; margin-bottom: 8px; padding: 3px 10px 3px 2px; border: 1px solid #fff; /* .box-shadow(); */ } .post { height: 285px; } .post.single { height: auto; } .side { width: 200px; min-height: 285px; padding: 10px 15px; float: left; h3 { .title; } .sidebar-module { border-bottom: 1px solid #969696; padding-bottom: 15px; margin-bottom: 15px; } } .side-body { margin-left: 230px; line-height: 1.7em; margin-top: 12px; .posttitle { position: relative; float: none; padding-right: 75px; span { display: block; position: absolute; top: 0; right: 0; } } img { width: 100%; height: auto; } } .info { float: left; width: 234px; padding: 5px 0 5px 15px; font-size: 12px; line-height: 1.5em; overflow: hidden; } .landing { float: left; padding: 40px 0 0 0; } .entry p, .post p { font-size: 11px; } /* ----------------------------------- Sections --------------------------------------*/ /* ----------------------------------- Pagination --------------------------------------*/ .pagination { clear: both; position: relative; ul.page-numbers { background-color: #fff; padding: 5px 0px; text-transform: uppercase; line-height: 18px; text-align: center; list-style-type: none; li { display: inline-block; *display: inline; zoom: 1; font-size: 14px; color: #000; span.page-numbers, a.page-numbers { display: block; font-size: 14px; color: #000; line-height: 16px; margin: 0 10px; padding: 5px; &.prev { position: absolute; top: 5px; left: 10px; } &.next { position: absolute; top: 5px; right: 10px; } &.current, &:hover { background-color: transparent; background-image: url(../images/titlebg.png); background-position: center bottom; background-repeat: no-repeat; } } } } } .share-response { display: none; } .share-tools { position: absolute; top: 0; right: 0; li { float: left; margin-left: 5px; &.share-twitter{} &.share-twitter{} &.share-facebook{} } } .mailing .share-tools { right: 12px; top: 7px; .share-facebook{margin-top: -3px;} } /*----------------------------------- HOME - Marquee ------------------------------------*/ .marquee-slideshow { height: 300px; margin:0; overflow: hidden; padding:0; width: 736px; .slide-item { width: 736px; height: 290px; img { top:0; left:0; z-index: 1; } a.slide_anchor { display: block; height: 100%; position: absolute; width: 100%; z-index: 100; } .caption { float: right; background: #fff; background: rgba(255,255,255,.8); position: relative; height: 97px; padding: 10px 10px 0; overflow: hidden; margin: -115px 0px 0 0; color: #5e5e5e; width: 208px; z-index: 2; .content { height: 77px; overflow: hidden; } h3 { background: none; font-size: 17px; line-height: 17px; margin-bottom: 12px; text-transform: uppercase; } p { margin: 0; padding: 0 10px 0 0; font-family: Georgia, Times, serif; font-style: italic; font-size: 12px; line-height: 17px; height: 48px; overflow: hidden; } } .more { bottom: 0; position: absolute; right: 0; } } } .more { display: block; width: 40px; height: 24px; text-indent: -9999px; text-transform: uppercase; font-size: 10px; background: url(../images/titlebgsm.png) no-repeat 0 6px; float: right; } #marquee-pager { width: 300px; position: relative; margin: -35px 0 25px 5px; z-index: 600; li { display: inline-block; width: 10px; height: 10px; background: #474747; border: 1px solid #666; border-radius: 10px; margin: 0 5px; text-indent: -9999px; &:hover { cursor: pointer; } &.activeSlide { background: #b4b4b4; } } } /*----------------------------------- PODCOASTS ------------------------------------*/ #podcasts { width: 1000px; margin: 0 auto; .main { width: 1000px; padding: 20px; } } .podcast-content {display: none;} .episode { position: relative; clear: both; display: block; padding: 20px; height: 72px; &:hover { height: auto; .podcast-content, .download-links {display: block;} .podcast-excerpt {display: none;} .info-btn{background-position: -158px -36px!important;} } &.even { background: #f2f2f2; } & h3 { font-size: 14px; text-transform: uppercase; margin: 0 5px 0 0; padding-bottom: 5px; } } .podcast-thumb, .podcast-date, .podcast-details, .podcast-links, .podcast-icons { float: left; padding-right: 20px; } .podcast-thumb { position: relative; width: 118px; height: 83px; .podcast-small-play-icon { position: absolute; display: block; width: 52px; height: 52px; background: url(../images/sprite.png) -130px -69px no-repeat; top: 50%; left: 50%; margin: -28px 0 0 -31px; } } .podcast-date { width: 70px; line-height: 18px; h3 { text-align: right; margin-right: 0; margin-bottom: 10px; } .episode-num { display: block; margin-top: -10px; text-align: right; } } .podcast-details { width: 330px; line-height: 18px; .podcast-content { img { width: 100%; height: auto; } } } .podcast-links { width: 200px; line-height: 17px; .related-links-list { li { a {} } } .download-links { display: none; margin-top: 20px; li { a { color: #00a99d; &:hover {text-decoration: underline;} } } } } .podcast-icons { width: 120px; padding-right: 0; height: 40px; li { float: left; a { display: block; background: url(../images/sprite.png) no-repeat; } &.popout-player a { width: 30px; height: 28px; background-position: -130px 0px; &:hover { background-position: -130px -36px; } } &.info-btn a { width: 27px; height: 30px; background-position: -158px 0px; &:hover { background-position: -158px -36px; } } &.share { width: 18px; height: 28px; background: url(../images/sprite.png) -192px 0px no-repeat; margin-left: 8px; &:hover { background-position: -192px -36px; } } } .share-tools { position: absolute; top: 58px; right: 10px; li { float: left; margin-left: 5px; width: auto!important; background: none!important; } } } .episode:hover { .info-btn a{background-position: -158px -36px!important;} } .search-form { position: absolute; top: -41px; right: -22px; input { width: 252px; height: 36px; border: none; padding: 0 10px; text-transform: uppercase; color: black; font-size: 14px; font-family: Arial; } .submit-search { display: none; } } .pagination { position: absolute; width: 760px; bottom: -46px; right: -22px; } .back-button-search { position: absolute; left: 20px; bottom: 10px; } .podcast-read-more { display: none; margin: 10px 0 0; } .episode:hover .podcast-read-more { display: block; } /*----------------------------------- PODCASTS PERMALINK ------------------------------------*/ .side .download-links { margin-bottom: 20px; } .audio-player { position: relative; width: 511px; height: 34px; margin: 35px 0; background: #444444; /* Old browsers */ background: -moz-linear-gradient(top, #444444 0%, #201d1e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#201d1e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #444444 0%,#201d1e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #444444 0%,#201d1e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #444444 0%,#201d1e 100%); /* IE10+ */ background: linear-gradient(to bottom, #444444 0%,#201d1e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#201d1e',GradientType=0 ); /* IE6-9 */ /* overflow: hidden; */ .play-podcast { float: left; width: 38px; height: 34px; background: url(../images/sprite.png) -212px -56px no-repeat; border: none; border-right: 1px solid #666; box-shadow: 1px 0 1px #232020; text-indent: -9999px; cursor: pointer; &.is-playing { background-position: -212px -28px; } } .progress-wrapper { float: left; position: relative; width: 265px; height: 34px; border: none; border-right: 1px solid #666; box-shadow: 1px 0 1px #232020; .progress-track { display: block; position: absolute; width: 245px; height: 2px; background: #CCC; top: 17px; left: 10px; .scrubber { display: block; position: absolute; width: 7px; height: 7px; background: #CCC; top: -3px; left: -3px; cursor: pointer; } } } .duration { float: left; width: 128px; padding: 7px 0; border: none; border-right: 1px solid #666; box-shadow: 1px 0 1px #232020; font-size: 11px; text-align: center; .elapsed { } .remaining { } } .popout-player-trigger { float: left; width: 39px; height: 34px; background: url(../images/sprite.png) -214px -82px no-repeat; border: none; border-right: 1px solid #666; box-shadow: 1px 0 1px #232020; text-indent: -9999px; cursor: pointer; } .download-episode { float: left; width: 39px; height: 34px; background: url(../images/sprite.png) -214px -110px no-repeat; border: none; text-indent: -9999px; cursor: pointer; } .download-tooltip { display: none; position: absolute; background: #b7b7b7; width: 234px; top: -36px; right: 0; font-size: 10px; color: #fff; text-align: center; border-radius: 2px; padding: 5px 0; .tooltip-arrow { display: block; position: absolute; width: 9px; height: 4px; background: #b7b7b7 url(../images/tooltip-arrow.png) 0 0 no-repeat; bottom: -4px; right: 14px; } } } .podcast-single-footer { position: relative; text-align: right; height: 45px; } .podcast-photo-container { display: block; position: relative; width: 748px; height: 434px; .play-stream { background: url(../images/sprite.png) no-repeat 0 -40px; cursor: pointer; display: block; height: 70px; width: 70px; bottom: 15px; right: 15px; position: absolute; z-index: 100; } } /*----------------------------------- ABOUT ------------------------------------*/ .about-wrapper { position: relative; width: 752px; min-height: 700px; padding-top: 48px; } .about-wrapper .main { width: 720px; padding: 20px; } .side { width: 170px; } .side li a { color: #898989; &:hover {color: #ccc;} } .about-footer { position: relative; min-height: 25px; padding: 10px 0 0; text-align: right; } .about-footer .share-tools { top: 15px; } /*----------------------------------- Generic Lightbox Pages ------------------------------------*/ #overlay { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #000; background: rgba(0,0,0,.80); z-index: 9998; } .generic-lightbox { display: none; position: fixed; width: 960px; height: auto; background: #fff; padding: 20px; left: 50%; margin-left: -500px; z-index: 9999; .close-generic { position: absolute; display: block; top: 0; right: 10px; font-weight: 900; font-size: 16px; z-index: 10000; &:hover { zoom: 1; opacity: .75; filter: alpha(opacity=75); } } .posttitle { display: block; float: none; margin-bottom: 25px; .generic-content { display: block; } } } /* !Contact Lightbox */ .contact-lightbox { display: none; position: fixed; width: 600px; height: 500px; background: #fff; padding: 20px; top: 50%; left: 50%; margin: -250px 0 0 -300px; z-index: 9999; .close-contact { position: absolute; display: block; top: 0; right: 10px; font-weight: 900; font-size: 16px; z-index: 10000; &:hover { zoom: 1; opacity: .75; filter: alpha(opacity=75); } } } #contact-form { width: 410px; margin: 50px auto 0; .form-row { margin-bottom: 20px; label { float: left; width: 128px; margin-top: 3px; font: normal 200 14px "Helvetica Neue",Helvetica,Arial,sans-serif; text-transform: uppercase; color: #211E1E; &.required { font-weight: 500; } } input[type="text"], input[type="email"] { width: 260px; height: 30px; padding: 0 10px; border: 1px solid #CCC; -webkit-box-shadow: inset 1px 1px 3px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 1px 1px 3px 0 rgba(0, 0, 0, 0.15); } textarea { width: 260px; height: 150px; padding: 10px; border: 1px solid #CCC; -webkit-box-shadow: inset 1px 1px 3px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 1px 1px 3px 0 rgba(0, 0, 0, 0.15); } } input[type="submit"] { background: #959595; background: -moz-linear-gradient(top, #959595 0%, #6C6C6C 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #959595), color-stop(100%, #6C6C6C)); background: -webkit-linear-gradient(top, #959595 0%, #6C6C6C 100%); background: -o-linear-gradient(top, #959595 0%, #6C6C6C 100%); background: -ms-linear-gradient(top, #959595 0%, #6C6C6C 100%); background: linear-gradient(to bottom, #959595 0%, #6C6C6C 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#959595', endColorstr='#6c6c6c', GradientType=0); border: 1px solid #6C6C6C; font: normal 200 12px "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; color: white; padding: 6px 15px; border-radius: 3px; letter-spacing: 1px; margin-left: 128px; cursor: pointer; &:hover { background: #6C6C6C; background: -moz-linear-gradient(top, #6C6C6C 0%, #959595 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6C6C6C), color-stop(100%, #959595)); background: -webkit-linear-gradient(top, #6C6C6C 0%, #959595 100%); background: -o-linear-gradient(top, #6C6C6C 0%, #959595 100%); background: -ms-linear-gradient(top, #6C6C6C 0%, #959595 100%); background: linear-gradient(to bottom, #6C6C6C 0%, #959595 100%); } } } .success-message, .error-message { display: none; font-size: 16px; text-align: center; margin-top: 200px; }