/* ---------------------------------------------------------- **Rocky Dawuni** CSS ---------------------------------------------------------- */ /* 01 =GLOBAL BROWSER RESET ---------------------------------------------------------- */ /* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 3.1.1 build: 47 */ html{ } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} li{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';} abbr,acronym{border:0;font-variant:normal;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} input,textarea,select{*font-size:100%;} legend{color:#000;} /* 02 =TYPOGRAPHY ---------------------------------------------------------- */ html { background: #375c37; /*height: 100%;*/ } body { background: url(/images/interior-bg.gif) left -270px repeat-x; color: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } #home { background: #375c37 url(/images/home-bg.gif) left top repeat-x; } .base h1, .base h2 { color: #fffaee; } .base h1 { margin-bottom: 24px; text-transform: uppercase; } .base h2 { font-size: 27px; line-height: 30px; margin-bottom: 24px; } .base h3 { color: #c3c7b4; font-size: 16px; line-height: 20px; } .base h4 { } .base p { margin-bottom: 16px; } a { color: #ffcc00; text-decoration: none; } #main a, #footer a { -webkit-transition-property: hover; -webkit-transition: color 0.15s ease-in-out; } a:hover { color: #918b60; } a img { border: none; } blockquote { margin: 0 16px 16px; } .base ul, ol { margin: 0 0 16px 16px; } .base ul li { list-style: disc; } .base ul li li { list-style: circle; } .base ol li { list-style: decimal; } .base ul li, .base ol li { } .base li ol, .base li ul { margin: 0 0 0 16px; } .elderkin { text-transform: uppercase; } .sepia { color: #c3c7b4; } .base .section-title { color: #fffaee; font-size: 36px; margin: 8px 0 14px 7px; text-transform: uppercase; } .base p.section-title { margin-bottom: 0; } .page-title { margin: 0 10px; } .date-by-line { color: #c3c7b4; font-size: 12px; } /* 03 =LAYOUT ---------------------------------------------------------- */ #container { width: 100%; } #home #container { background: url(/images/masthead-home.jpg) center top no-repeat; width: 100%; } #header { background: url(/images/interior-bg.jpg) center top no-repeat; overflow: hidden; padding: 10px 0 0 0; } .interior #header #masthead { font-size: 72px; text-transform: uppercase; margin: 21px auto 0; width: 950px; } #header #masthead a { color: #fffaee; } /*=NAVIGATION*/ #site-nav { clear: both; overflow: hidden; padding: 0 10px 10px; margin: 0 auto; width: 950px; } #home #site-nav { padding: 0 5px 10px; } #site-nav li { float: left; font-size: 30px; margin: 0 15px 0 0; text-transform: uppercase; } #breadcrumb { font-size: 18px; letter-spacing: 1px; margin: 18px 7px 20px; text-transform: uppercase; } #section-nav { margin: 0 7px; padding: 0; } #section-nav li { float: left; list-style: none; margin: 0 14px 0 0; padding: 0 0 14px; } #current-section a { color: #c3c7b4; } /*=NEW ALBUM PROMO BAR*/ #features-bar { background: #1d301d url(/images/promo-bg.gif) 0 bottom repeat-x; /*border-top: 1px solid #322f29;*/ border-bottom: 2px solid #ffcc00; padding: 0; text-shadow: #000 -1px 0 -1px; } #features { background: url(/images/feature-bg.png) 100px bottom no-repeat; margin: 0 auto; overflow: hidden; padding: 0; width: 960px; } #features h2 a { color: #c3c7b4; } #features h2 a:hover { color: #ffcc00; } .interior #new-album #features { /*border-bottom: 1px solid #5f7c5f;*/ } .music-player { float: left; margin: 15px 7px; padding: 0; width: 306px; } .music-player h2 { /*color: #fffaee;*/ font-size: 24px; text-transform: uppercase; } .music-player p { margin-left: 30px; } .music-player a.sm2_link { -webkit-transition-property: hover; -webkit-transition: all 0.15s ease-in-out; display: block; min-height: 24px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; padding: 2px 4px 2px 30px; color: #c3c7b4; } .music-player a.sm2_link, .music-player a.sm2_link:hover { background: url(/images/player/m-play.png) no-repeat 0 50%; _background-image:url(/images/player/m-play02.gif); } .music-player a.sm2_paused:hover, .music-player a.sm2_link:hover { /*color: #ffcc00;*/ } .music-player a.sm2_paused { } .music-player a.sm2_paused:hover { background: url(/images/player/m-play02.png) no-repeat 0 50%; _background-image:url(/images/player/m-play.gif); } .music-player a.sm2_playing, .music-player a.sm2_playing:hover { background: url(/images/player/m-pause.png) no-repeat 0 50%; _background-image:url(/images/player/m-pause.gif); } #buy-album { background: url(/images/buy.png) 0 5px no-repeat; padding: 10px 0 10px 60px; float: left; margin: 0 5px; width: 240px; } #buy-album h2 { color: #c3c7b4; font-size: 30px; margin: 5px 0 0 0; text-transform: uppercase; } #promo { float: left; font-size: 12px; line-height: 15px; margin: 10px 5px; width: 310px; } #promo img { float: left; margin: 0 10px 0 0; } #promo p { margin-top: 7px; } /*=MAIN*/ #main { /*background: url(/images/divider.gif) 640px 0 repeat-y;*/ margin: 20px auto 30px; padding: 1px 0 0; position: relative; width: 960px; } /*=CONTENT*/ #content { float: left; font-size: 14px; line-height: 18px; margin: 0; width: 640px; } .interior #content { background: none; } /*#album #content, */#press-kit #content { float: none; overflow: hidden; width: 960px; } .odd { background: rgba(0,0,0,.2); border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } /*=SIDEBAR*/ #sidebar { float: right; padding: 0; width: 319px; } #sidebar .module { /*border-bottom: 1px dotted #4f6f4d;*/ margin: 0; padding: 10px 14px 1px; } #sidebar div.module:last-child { border: none; } #sidebar h2 { text-transform: uppercase; } /*=SIGN UP*/ #subscribe label { font-size: 14px; line-height: 18px; display: block; padding-bottom: 6px; } #submit-bt { background: #ffcc00; border: none; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.25); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.25); box-shadow: 0px 0px 3px rgba(0,0,0,.25); color: #000; cursor: pointer; font-size: 14px; font-weight: bold; padding: 4px 10px; -webkit-transition-property: hover; -webkit-transition: background 0.15s ease-in-out; } input:hover#submit-bt { background: #918b60; } #email { border: 1px solid #c3c7b4; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.25); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.25); box-shadow: 0px 0px 3px rgba(0,0,0,.25); color: #636363; font-size: 14px; padding: 3px; width: 200px; } #sidebar #watch-video { background: #000; -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; border-top-right-radius: 3px; position: relative; } #sidebar #video-reel { background: url(/images/video-reel-bg.gif) 0 center repeat-x; height: 90px; overflow: hidden; } #video-reel .video { padding: 0 16px 0 0; height: 90px; width: 303px; } #sidebar #watch-video h2 { font-size: 21px; line-height: 21px; margin: 15px 0 10px 10px; text-transform: uppercase; } #sidebar #watch-video img { float: left; margin: 0 10px 0 5px; height: 80px; } #sidebar #watch-video a { color: #ffcc00; } #sidebar #upcoming-events, #sidebar #news { background: #2f4e2f; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; border-bottom-right-radius: 3px; border-top: 2px solid #ffcc00; } #sidebar .event { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; margin-bottom: 8px; } #sidebar .event .odd { border-bottom: 1px dotted #2f4e2f; } #sidebar .event td { padding: 5px; vertical-align: top; } #sidebar .event h3 { font-weight: bold; } #sidebar .event p { margin: 0; } #sidebar .event .date { color: #c3c7b4; font-size: 14px; font-weight: bold; } #sidebar #news ul { margin-left: 0; } #sidebar #news li { list-style: none; margin: 0; padding: 7px 0; } /*=SOCIAL NETWORKS*/ #social-networks { border-top: 1px dotted #4f6f4d; border-bottom: 1px dotted #4f6f4d; float: left; font-size: 16px; margin: 40px 0 0 0; width: 960px; } #social-networks h2, #social-networks li { float: left; } #social-networks h2 { color: #c3c7b4; font-size: 14px; font-weight: normal; margin: 6px 14px 0 7px; text-transform: none; } #social-networks li { list-style: none; padding: 0; } #social-networks a { background: url(/images/social-networks.png); display: block; height: 40px; margin: 0 14px 0 0; overflow: hidden; text-indent: -9999em; } #fb-link a { background-position: 0 0; width: 72px; } #fb-link a:hover { background-position: 0 -40px; } #myspace-link a { background-position: -75px 0; width: 107px; } #myspace-link a:hover { background-position: -75px -40px; } #twitter-link a { background-position: -185px 0; width: 70px; } #twitter-link a:hover { background-position: -185px -40px; } #youtube-link a { background-position: -260px 0; width: 60px; } #youtube-link a:hover { background-position: -260px -40px; } /*=FOOTER*/ #footer { color: #c3c7b4; font-size: 12px; margin: 0 auto; overflow: hidden; padding: 8px 0 10px 0; width: 960px; } #footer p { margin: 0 7px; } #footer .copyright-etc, #footer-nav { float: left; } #footer .copyright-etc { width: 310px; } #footer-nav li { float: left; } #footer-nav a { font-weight: bold; margin: 0 7px; } #footer #credit { float: right; text-align: right; } /* 04 =HOMEPAGE ---------------------------------------------------------- */ #home #header { background: none; } #home #header #masthead { margin: 0 auto; width: 950px; height: 320px; } /*#home #masthead a { display: block; float: left; overflow: hidden; text-indent: -9999px; width: 375px; height: 211px; }*/ #home #watch-video { background: rgba(0,0,0,.8); border-radius: 3px;/* -moz-box-shadow: 0px 0px 10px rgba(255,255,255,.25); -webkit-box-shadow: 0px 0px 10px rgba(255,255,255,.25); box-shadow: 0px 0px 10px rgba(255,255,255,.25);*/ float: right; margin: 95px 0 0 0; position: relative; width: 310px; } #video-nav { background: url(/images/video-reel-nav-bg.png) center center no-repeat; position: absolute; right: 3px; width: 20px; z-index: 500; } #video-nav a { display: block; overflow: hidden; text-indent: -9999px; height: 45px; } #video-nav a:hover { background-position: 0 -45px; } a#prev-video { background: url(/images/prev-video.png) 0 0 no-repeat; } a#next-video { background: url(/images/next-video.png) 0 0 no-repeat; } #home #video-reel { background: url(/images/video-reel-bg.gif) 0 center repeat-x; height: 90px; overflow: hidden; } #video-reel .video { padding: 0 16px 0 0; height: 90px; } #home #watch-video h2 { font-size: 21px; margin: 15px 0 10px 10px; text-transform: uppercase; } #home #watch-video img { float: left; margin: 0 10px 0 5px; height: 80px; } #home #watch-video a { color: #ffcc00; } #album-promo { display: block; float: left; margin: 0 10px; overflow: hidden; text-indent: -9999px; width: 528px; height: 211px; } #latest-news { background: #2f4e2f; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; float: left; margin: 0 0 0; padding: 10px 20px 10px 0; font-size: 14px; line-height: 18px; width: 380px; } #latest-news h2 { text-transform: uppercase; margin: 10px 0 0; } #latest-news .entry { margin-bottom: 18px; } #latest-news .more { margin-left: 7px; } #video-hub { background: url(//images/video-icon.png) 0 0 no-repeat; border-bottom: 1px dotted #5f7c5f; margin: 0 0 9px -5px; padding: 7px 0 8px 56px; } .base #video-hub h3 { font-size: 21px; margin-bottom: 0; text-transform: uppercase; } .base #video-hub ul { margin: 0; padding: 0; } .base #video-hub li { list-style: none; } #twitter-feed { background: #2f4e2f; -webkit-border-radius: 3px; -webkit-border-top-left-radius: 0; -moz-border-radius: 3px; -moz-border-radius-topleft: 0; border-radius: 3px; border-top-left-radius: 0; float: right; margin: 0 0 20px; width: 239px; } #twitter-feed h3 { color: #fffaee; font-size: 24px; margin: 7px 13px 18px; text-transform: uppercase; } .twtr-widget { margin: 0 5px; } #twitter-feed .twtr-widget .twtr-tweet { border-color: #5f7c5f; } /* 05 =SUBPAGES ---------------------------------------------------------- */ .entry { padding: 0 7px; } #content .enrty h2 { text-transform: none; } #blog .entry { background: #2f4e2f; border-bottom: 1px dotted #375c37; padding: 10px; } .interior #content div.entry:first-child { border: none; } .more a { /*background: #1d301d; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px;*/ padding: 5px 25px 5px 0; } .pagination { background: #233a23; padding: 10px; } .pagination a { background: #2f4e2f; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; padding: 5px; } /*=BLOG*/ .base #content .entry h2 { font-size: 24px; line-height: 26px; } #blog .base .entry h2 { color: #c3c7b4; margin-bottom: 2px; } .entry-nav { background: #2f4e2f; -webkit-border-radius: 3px; -webkit-border-top-left-radius: 0; -moz-border-radius: 3px; -moz-border-radius-topleft: 0; border-radius: 3px; border-top-left-radius: 0; margin: 1px 0 0 0; padding: 10px 0; } .prev-entry, .next-entry { margin: 0 10px; width: 250px; } .prev-entry { float: left; } .next-entry { float: right; text-align: right; } /*=ALBUMS*/ #music #content { margin: 0; width: 640px; } .album { background: #2f4e2f; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; padding: 10px 0 0 0; } .album td { vertical-align: top; } .album .button a { background: #ffcc00; color: #000; display: block; font-size: 14px; font-weight: bold; margin: 10px 80px; padding: 8px 5px; text-align: center; } .album .button a:hover { background: #375c37; color: #ffcc00; } .album .cover { float: left; text-align: center; width: 320px; margin: 0 30px; padding: 20px 0 0; } .album-cover { -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.25); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.25); box-shadow: 0px 0px 3px rgba(0,0,0,.25); } .cover form { border-bottom: 1px solid #375c37; margin: 0 0 10px 0; padding: 5px 0 10px; } .cover form select { margin-bottom: 10px; } .itunes { font-size: 14px; font-weight: bold; } .album .track-list { float: right; margin: 0 20px 0 0; padding: 20px 0; width: 240px; } #music .entry { border-top: 1px dotted #375c37; clear: both; padding: 10px 14px; } #music .entry h2 { margin-bottom: 0; } #music .entry h3 { font-weight: bold; } #music .entry .first.column { margin-right: 10px; } #music .title { margin: 0 10px; } #open { cursor: pointer; } #music .entry #hidden { display: none; margin-top: 24px; } #other-albums { background: #294529; /*border-top: 1px solid #375c37;*/ -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; clear: both; margin: 0px; overflow: hidden; padding: 15px 0 1px; } #other-albums h2 { float: left; margin-left: 14px; width: 123px; } #other-albums .module { float: left; font-size: 12px; line-height: 16px; width: 123px; } #other-albums .module img, #other-albums .module p { margin-left: 5px; } #other-albums .module img { width: 116px; height: 116px; } /*=LIVE*/ #live #content { padding-bottom: 32px; } #live .event { padding: 0 0 1px 0; } #live .date { background: #2f4e2f; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; color: #ffcc00; float: left; font-weight: bold; width: 44px; } #live .date p { margin: 0; padding: 7px; } #live .event h2 { font-size: 16px; line-height: 22px; margin: 4px 0 11px 0; text-transform: none; } #live .desc { background: #2f4e2f; float: left; width: 596px; } #live .desc h2, #live .desc p { padding: 0 7px; } #soonest { /*font-size: 14px; line-height: 20px;*/ margin: 0 0 1px; } #live #soonest .date, #live #soonest .desc { background: #294529; } #soonest .desc { -webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; border-top-right-radius: 3px; padding-top: 7px; } #soonest h2 { font-size: 20px; line-height: 24px; text-transform: none; } #soonest .share { color: #c3c7b4; font-size: 12px; line-height: 16px; } /*=VIDEOS*/ #video { background: #000; } #video #content { height: 540px; } #video #playlist { height: 520px; float: right; margin: 10px 0; width: 319px } #video #playlist .entry { border-bottom: 1px dotted #222; padding: 5px; } #video #playlist .entry img { float: left; margin-right: 10px; width: 90px; } #video #playlist .entry h3 { margin-top: 10px; } #video #social-networks { position: static; width: 960px; } .jScrollPaneContainer { border-left: 1px solid #222; position: relative; margin: 80px 0 0; overflow: hidden; z-index: 1; } .jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: #444; border-radius: 5px; -moz- border-radius: 5px; -webkit- border-radius: 5px; } .jScrollPaneDrag { position: absolute; background: #222; border-radius: 5px; -moz- border-radius: 5px; -webkit- border-radius: 5px; cursor: pointer; overflow: hidden; } div:hover.jScrollPaneDrag { background: #ffcc00; } .jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; } .jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; } a.jScrollArrowUp { display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; /*background-color: #666;*/ height: 9px; } a.jScrollArrowUp:hover { /*background-color: #f60;*/ } a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; /*background-color: #666;*/ height: 9px; } a.jScrollArrowDown:hover { /*background-color: #f60;*/ } a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover { /*background-color: #f00;*/ } /*=PRESS*/ #press .thumb { float: left; margin: 0 10px 0 0; } #press .entry h2 { margin-bottom: 3px; } /*=PRESS KIT*/ #press-nav { float: left; margin: 100px 20px 0 10px; width: 130px; } #press-nav li { border-top: 1px solid #5f7c5f; list-style: none; padding: 3px 0; } .column { float: left; width: 320px; } .press-photo { float: left; width: 150px; } /*=PHOTOS*/ /*=TEXT PAGES*/ #text-page .entry { background: #2f4e2f; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 7px 14px; } #text-page .entry h1 { font-size: 27px; line-height: 30px; margin-top: 10px; text-transform: none; } #text-page .entry h2 { font-weight: normal; text-transform: none; } /*=ABOUT*/ #about-nav { float: left; margin: 0 20px 50px 0; width: 100px; } #about-nav li { border-top: 1px solid #5f7c5f; list-style: none; padding: 3px 0; } /*=COLORBOX*/ /* ColorBox Core Style The following rules are the styles that are consistant between themes. Avoid changing this area to maintain compatability with future versions of ColorBox. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:visible;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} #cboxOverlay{background:#000;} #colorbox{} #cboxContent{margin-top:32px;} #cboxLoadedContent { background:#000; padding:1px;} #cboxLoadingGraphic { background:url(/images/colorbox/loading.gif) center center no-repeat;} #cboxLoadingOverlay {background:#000;} #cboxTitle { color: #c3c7b4; font-size: 14px; font-weight: bold; position:absolute; top:-22px; left:0; } #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;} #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:25px; height:25px; position:absolute; top:-25px; background:url(/images/colorbox/controls.png) 0 0 no-repeat;} #cboxPrevious{background-position:0px 0px; right:50px;} #cboxPrevious.hover{background-position:0px -25px;} #cboxNext{background-position:-25px 0px; right:25px;} #cboxNext.hover{background-position:-25px -25px;} #cboxClose{background-position:-50px 0px; right:0;} #cboxClose.hover{background-position:-50px -25px;} .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;} .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;} .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;} /*=06 DISQUS COMMENTS ---------------------------------------------------------- */ #disqus_thread { } .base #disqus_thread #dsq-content h3 { } /* 07 =CSS3 ---------------------------------------------------------- */ #about-nav li, #new-album #features, #press-nav li, #updates, .interior .entry, #media-bar, #video-hub, .entry-nav { border-color: rgba(255, 255, 255, .2) } /*#site-nav, */#new-album { background: rgba(0, 0, 0, .5); } #live #upcoming-events { background: rgba(0, 0, 0, .4); } /*.interior #main { background: rgba(0, 0, 0, .15); }*/ #main, #live #upcoming-events, .album .button a, #media-bar, #video-hub { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #other-albums .module img { -webkit-box-shadow: 2px 2px 10px rgba(0,0,0,.2); -moz-box-shadow: 2px 2px 10px rgba(0,0,0,.2); box-shadow: 2px 2px 10px rgba(0,0,0,.2); } /*=PLAYLIST*/ ol.graphic li { list-style: none; padding-bottom: 0px; } ol.graphic { font-size: 12px; padding-left:0px; margin-left:0px; } ol.graphic { /*background: #294529;*/ list-style-type: none; margin:0px; padding:0px; } ol.graphic li { } ol.graphic li:first-child { border: none; } ol.graphic li a, ol.graphic li a.sm2_link { /* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */ border-top: 1px dotted #294529; border-collapse: collapse; display: block; padding-left:22px; min-height:16px; padding: 5px 4px 5px 27px; /* min-width:19em;*/ _width:19em; /* IE 6 */ text-decoration:none; } ol.graphic li a.sm2_link { /* safari 3.1+ fun (or, proprietary crap. TBD.) */ -webkit-transition-property: hover; -webkit-transition: all 0.15s ease-in-out; } ol.graphic li a.sm2_paused:hover, ol.graphic li a.sm2_paused, ol.graphic li a.sm2_link:hover, ol.graphic li a.sm2_playing:hover, ol.graphic li a.sm2_playing { -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } ol.graphic li a, /* use a.sm2_link {} if you want play icons showing only if SM2 is supported */ ol.graphic li a.sm2_paused:hover, ol.graphic li a.sm2_link:hover { background: url(/images/player/icon-play.png) no-repeat 4px 50%; _background-image:url(/images/player/icon_play.gif); /* IE 6 */ } ol.graphic li a.sm2_link:hover { background-color: #294529; border-color: #294529; } ol.graphic li a.sm2_paused { background-color: #1d301d; border-color: #1d301d; } ol.graphic li a.sm2_paused:hover { background: #121e12 url(/images/player/icon-play.png) no-repeat 4px 50%; _background-image:url(/images/player/icon_play.gif); border-color: #121e12; } ol.graphic li a.sm2_playing, ol.graphic li a.sm2_playing:hover { background: #ffcc00 url(/images/player/icon-pause.png) no-repeat 4px 50%; _background-image:url(/images/player/icon_pause.gif); border-color: #ffcc00; color: #000; } /* hide button while playing? ol.graphic li a.sm2_playing { background-image:none; } */ body #sm2-container { height: 0; } body #sm2-container object, body #sm2-container embed { /* flashblock handling: hide SWF off-screen by default (until blocked timeout case.) include body prefix to ensure override of flashblock.css. */ position: absolute; left:-9999em; top:-9999em; } /* 08 =UTILITY ---------------------------------------------------------- */ .stretcher { clear: both; height: 1px; visibility: hidden; } .nomargin { margin-bottom: 0px; } .floatl {float: left; margin: 0; padding: 0 10px 10px 0;} .floatr {float: right; margin: 0; padding: 0 0 10px 10px;} .floatl-nomargin { float: left; margin: 0; padding: 0;} .floatr-nomargin { float: right; margin: 0; padding: 0;} .clear {clear:both; height:0; margin:0; font-size: 1px; line-height: 0;} .required { color: red; } i, em { font-style: italic; } b, strong { font-weight: bold; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative;} sup { bottom: 1ex; } sub { top: .5ex; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix {display:inline-block;} .clearfix {display:block;}