/* CSS Document */ /* --------------------------------------------- 01. main/default elements --------------------------------------------- */ @font-face { font-family: 'AauxProThin'; src: url('aauxpro-thin-webfont.eot'); src: url('aauxpro-thin-webfont.eot?#iefix') format('embedded-opentype'), url('aauxpro-thin-webfont.woff') format('woff'), url('aauxpro-thin-webfont.ttf') format('truetype'), url('aauxpro-thin-bold-webfont.svg#AauxProThin') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MyriadProBold'; src: url('monkey-bold-webfont.eot'); src: url('monkey-bold-webfont.eot?#iefix') format('embedded-opentype'), url('monkey-bold-webfont.woff') format('woff'), url('monkey-bold-webfont.ttf') format('truetype'), url('monkey-bold-webfont.svg#MyriadProBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MyriadProRegular'; src: url('monkey-regular-webfont.eot'); src: url('monkey-regular-webfont.eot?#iefix') format('embedded-opentype'), url('monkey-regular-webfont.woff') format('woff'), url('monkey-regular-webfont.ttf') format('truetype'), url('monkey-regular-webfont.svg#MyriadProRegular') format('svg'); font-weight: normal; font-style: normal; } body { background:#0D0D0D; font-family:'MyriadProRegular', 'MyriadProRegular', arial, sans-serif ; } p { font-size:11px; color:#FFFFFF; line-height:1.2em} h1 { font-size:24px; color:#FFFFFF; text-shadow:1px 1px 1px #000;} h1 a { color:#FFFFFF; text-decoration:none; text-shadow:1px 1px 1px #000;} h2 { font-size:14px; color:#FFFFFF} h5 { font-size:12px; color:#FFFFFF} /* --------------------------------------------- 02. container and wrapper --------------------------------------------- */ #container { width:100%; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_container.gif) repeat-y top center} #wrapper { width:961px; margin:0 auto} /* --------------------------------------------- 03. header --------------------------------------------- */ /* #header { width:885px; height:74px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_header.jpg) no-repeat; padding:28px 37px 0 39px} #header .logo { width:189px; height:18px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/logo.png) no-repeat} #header .logo-link { width:189px; height:18px; float:left; position:absolute} */ #header { width:885px; height:74px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_header.jpg) no-repeat; padding:28px 37px 0 39px} #header .logo { width:189px; height:33px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/logo6.png) no-repeat} #header .logo-link { width:189px; height:18px; float:left; position:absolute} .nodisplay { display:none} #header .topnav { float:right} #header .topnav ul li { float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/li_topnav.gif) no-repeat 0 5px; font-size:10px; font-weight:bold; padding:0 7px} #header .topnav ul li a { color:#FF0000; text-decoration:none} #header .topnav ul li a:hover { color:#FF0000; text-decoration:underline} #header .topnav ul li.lang { background:none; padding-right:10px; padding-left:0} #header .topnav ul li.lang a { color:#998A8A; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/arrow_topnav.gif) no-repeat right center; padding-right:12px} #header .topnav ul li.icon { background:none; padding-top:1px} #header .menu { width:698px; float:right; padding-top:4px} #header .menu .button { float:right; font-size:11px; color:#FFFFFF; line-height:30px; text-shadow:#000000 0 0 4px} #header .menu .button a { height:30px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/sprite.gif) no-repeat; color:#FFFFFF; text-decoration:none; cursor:pointer; padding-left:15px} #header .menu .button a span { height:30px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/sprite.gif) no-repeat right -30px; padding-right:15px} #header .menu ul { float:right} #header .menu ul li { float:left; font-size:15px; color:#FFFFFF; line-height:30px; padding-left:8px; padding-right:20px} #header .menu ul li a { color:#FFFFFF; text-decoration:none} #header .menu ul li a:hover { color:#FF9900;} /* MIDEM SIDE BAR**/ .slide-out-div { padding: 20px; width: 150px; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.1, rgb(43,43,43)), color-stop(0.45, rgb(79,79,79)), color-stop(1, rgb(105,105,105)) ); background-image: -moz-linear-gradient( center bottom, rgb(43,43,43) 10%, rgb(79,79,79) 45%, rgb(105,105,105) 100% ); } /* --------------------------------------------- 04. banner --------------------------------------------- */ #banner { width:961px; height:360px; float:left} #banner .slider { width:641px; float:left} #banner .slider .photo { width:641px; height:360px; float:left} #banner .slider .list { height:41px; float:left; margin-top:-59px; padding-left:220px; position:relative} #banner .slider .list ul { height:41px; float:left; repeat-x; padding:0 32px} #banner .slider .list ul li { float:left; padding-right:20px; padding-top:16px} #banner .slider .list ul li.right { padding-right:0} /*#banner .demo { width:320px; float:left}*/ #banner .appstore { width:320px; float:left} #banner .demo img:hover{ opacity: .3; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; } #banner .demo img{ opacity: 1; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; } #banner .demo { float: left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/spacer.gif) repeat scroll 0 0 transparent; display:block; width:320px; height: 281px; z-index:5; } #banner .demo:hover {background:transparent url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/video_hover.png) scroll 0 0 no-repeat;} .project_hoverPhoto:hover {background:transparent url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/overPhoto.png) scroll 0 0 no-repeat;} /*--------------*/ /* --------------------------------------------- 04. musicplayer --------------------------------------------- */ #musicplayer { width:880px; float:left; padding: 0; -moz-box-shadow: 0px 0px 0px #151515; -webkit-box-shadow: 0px 0px 7px #151515; box-shadow: 0px 0px 7px #151515;} #musicplayer .slider { width:880px; float:left; padding-top:0px; height: 41px; padding-bottom:0px} #musicplayer .slider .jp-play { float:left;height: 41px; width: 41px; background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/red/icon_play_o.png) no-repeat; -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; behavior:url(../js/border-radius.htc);} #musicplayer .slider .jp-play:hover { float:left;height: 41px; width: 41px; background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/red/icon_play_o.png) no-repeat; background-position: -41px 0px;-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; behavior:url(../js/border-radius.htc);} #musicplayer .slider .jp-pause { float:left; height: 41px; width: 41px; background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/red/icon_pause_o.png) no-repeat;-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; behavior:url(../js/border-radius.htc);} #musicplayer .slider .jp-pause:hover { float:left; height: 41px; width: 41px; background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/red/icon_pause_o.png) no-repeat; background-position: -41px 0px;-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; behavior:url(../js/border-radius.htc);} #musicplayer .slider .playpause_btn .hidden { display: none;} #musicplayer .slider .progress { float: left; height: 41px; width: 665px; background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/red/progress.png) no-repeat; opacity:0.7; filter:alpha(opacity=70); /* For IE8 and earlier */ } #musicplayer .slider .jp-progress { position: absolute; width: 519px; margin-top: 0px; margin-left: 0px; height: 6px; } #musicplayer .slider .jp-current-time{ position:absolute; padding-top: 13px; padding-left: 23px; color: #fff; font-family:'Arial'; font-weight: bold; font-size: 13px ; } #musicplayer .slider .jp-duration{ position:absolute; padding-top: 13px; padding-left: 614px; color: #fff; font-family:'Arial'; font-weight: bold; font-size: 13px ; } #musicplayer .slider .jp-seek-bar { margin-top: 17px; margin-left: 76px; width:519px; /* height:15px; */ height:100%; cursor: pointer; } #musicplayer .slider .jp-seeking-bg { background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/red/pbar-ani.gif); height: 6px; } #musicplayer .slider .jp-play-bar { position: absolute; height: 6px; width: 519px; margin-top: 0px; margin-left: 0px; background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/red/progress_red.png) repeat-x; } div.jp-audio { width:519px; } div.jp-interface { position: relative; /* width:418px; */ width:100%; } #musicplayer .slider .share {margin-left: 706px; width:174px; height:41px; position: absolute;float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/red/bg_sharewith.png) repeat-x; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; behavior:url(../js/border-radius.htc); } #musicplayer .slider .share p { float:left; font-size:11px; color:#fff; font-weight:bold; padding-left:20px; padding-top:14px} #musicplayer .slider .share ul { float:right; padding-top:7px; padding-right:2px} #musicplayer .slider .share ul li { float:left; padding-right:5px} #musicplayer .slider .share ul li .share img { margin-right:5px; margin-top:6px; margin-bottom:-8px opacity: 1; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 300ms;} #musicplayer .slider .share ul li img:hover { opacity: .4; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 300ms;} /* --------------------------------------------- 05. content --------------------------------------------- */ #bgcontent { width:961px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_content_bottom.jpg) no-repeat bottom left} #content { width:880px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_content.gif) repeat-x; padding:32px 41px 0 40px} /* --------------------------------------------- 06. promos --------------------------------------------- */ #promos { width:880px; float:left; padding-bottom:30px} #promos .heading { width:880px; float:left; padding-bottom:12px} #promos .heading h1 { float:left; color:#666666} #promos .heading h1 a { color:#666666} #promos .heading h1 a.selected { color:#FFFFFF} #promos .heading ul { float:right} #promos .heading ul li { float:left} #promos .heading p { float:right; font-size:12px; color:#999999; font-weight:bold; line-height:30px; padding-right:100px} #promos .heading p span { color:#FFFFFF} #promos .set { width:205px; float:left; margin-right:20px} #promos .right { margin-right:0} #promos .set .video { width:205px; height:115px; float:left; padding-bottom:0px} #promos .set .video .glare{position: absolute; width: 205px; height: 115px; float: left;} #promos .set .remix_player { width:205px; height:25px; float:left; padding-bottom:20px} #promos .set .icon_plus { height:9px; float:right} #promos .set h5 { text-transform:uppercase; line-height:13px; padding-bottom:10px} #promos .set h5 span { color:#666666} #promos .set h5 a { color:#FF9900; text-decoration:none} #promos .set h5 a slideartistname{ color:#FFFFFF; text-decoration:none} #promos .set h5 a:hover { color: #f87700} #promos .set p { font-weight:normal; letter-spacing: 1px; } #promos .set p span { font-family:'MyriadProRegular', 'AauxProBold', arial, sans-serif; color:#666666;} #promos .set p a { color:#FFFFFF; text-decoration:none} #promos .set p a:hover { color: #f23200} /** * Coda Slider To move between Featured / Popular / Most Rated */ /* Most common stuff you'll need to change */ .coda-slider-wrapper { padding: 20px 0 } .coda-slider { background: #ebebeb } /* Use this to keep the slider content contained in a box even when JavaScript is disabled */ .coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px } /* Change the width of the entire slider (without dynamic arrows) */ .coda-slider, .coda-slider .panel { width: 600px } /* Change margin and width of the slider (with dynamic arrows) */ .coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 600px } .coda-slider-wrapper.arrows .coda-slider { margin: 0 10px } /* Arrow styling */ .coda-nav-left a, .coda-nav-right a { background: #000; color: #fff; padding: 5px; width: 100px } /* Tab nav */ .coda-nav ul li a.current { background: #39c } /* Panel padding */ .coda-slider .panel-wrapper { padding: 20px } /* Preloader */ .coda-slider p.loading { padding: 20px; text-align: center } /* Don't change anything below here unless you know what you're doing */ /* Tabbed nav */ .coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden } .coda-nav ul li { display: inline } .coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none } /* Miscellaneous */ .coda-slider-wrapper { clear: both; overflow: auto } .coda-slider { float: left; overflow: hidden; position: relative } .coda-slider .panel { display: block; float: left } .coda-slider .panel-container { position: relative } .coda-nav-left, .coda-nav-right { float: left } .coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none } /** * Slideshow style rules to move between the artist remixes within the section */ #slideshow { /*margin:0 auto;*/ width:880px; /*height:263px;*/ /*background:transparent url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_slideshow.jpg) no-repeat 0 0;*/ position:relative; } #slideshow #slidesContainer { /*margin:0 auto;*/ width:880px; clear: left; /*height:263px;*/ overflow:auto; /* allow scrollbar */ position:relative; } #slideshow #slidesContainer .slide { margin:0 auto; width:860px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */ height:263px; } /** * Slideshow controls style rules. */ .control { display:block; width:39px; height:29px; float: right; text-indent:-10000px; position:absolute; cursor: pointer; } #leftControl { top:0; left:800px; float: right; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/arrow_prev.gif) no-repeat 0 0; } #rightControl { top:0; right:0; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/arrow_next.gif) no-repeat 0 0; } /* --------------------------------------------- 07. feeds --------------------------------------------- */ #feeds {font-family: 'MyriadProRegular'; width:880px; float:left; padding-bottom:70px} #feeds h1 { padding-bottom:14px} #feeds h5 { color:#FF3300; text-transform:uppercase; padding-bottom:15px} #feeds .button { float:left; font-size:13px; color:#FFFFFF; line-height:30px; text-shadow:#000000 0 0 4px; } #feeds .buttonabsolute { float:left; font-size:13px; color:#FFFFFF; line-height:30px; text-shadow:#000000 0 0 4px; position: absolute; padding-top:250px} /* #feeds .button { float:left; font-size:13px; color:#FFFFFF; line-height:30px; text-shadow:#000000 0 0 4px; padding-top:5px} */ #feeds .buttonabsolute a { height:30px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/sprite.gif) no-repeat; color:#FFFFFF; text-decoration:none; cursor:pointer; padding-left:15px} #feeds .buttonabsolute a span { height:30px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/sprite.gif) no-repeat right -30px; padding-right:15px} #feeds .button a { height:30px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/sprite.gif) no-repeat; color:#FFFFFF; text-decoration:none; cursor:pointer; padding-left:15px} #feeds .button a span { height:30px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/sprite.gif) no-repeat right -30px; padding-right:15px} /* --------------------------------------------- 08. twitter --------------------------------------------- */ #twitter {font-family: 'MyriadProRegular'; width:205px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/icon_minus.gif) no-repeat; padding:20px 20px 0 0} #twitter p {word-wrap: break-word;} #twitter .set { width:205px; float:left; padding-bottom:27px} #twitter .set .photo { width:24px; float:left; padding-right:5px} #twitter .set .content { width:173px; float:left; margin-top:-2px} #twitter .set .content p a { color:#FF9900; text-decoration:none; font-weight:bold} #twitter .set .content p span { color:#999999} /* --------------------------------------------- 09. facebook --------------------------------------------- */ #facebook {font-family: 'MyriadProRegular'; width:205px; height:300px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/icon_minus.gif) no-repeat; padding:20px 20px 0 0} #facebook ul { width:210px; float:left; padding-bottom:16px} #facebook ul li { height:49px; float:left; padding:1px; overflow:hidden} /* --------------------------------------------- 10. suggestions --------------------------------------------- */ #suggestions {font-family: 'MyriadProRegular'; width:205px; height:300px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/icon_minus.gif) no-repeat; padding:20px 20px 0 0} #suggestions .set { width:205px; float:left; padding-bottom:12px} #suggestions .set p { font-size:12px} #suggestions .set p a { color:#FF9900; text-decoration:none} #suggestions .set p span { font-size:11px; color:#999999; font-weight:normal} #suggestions .makesuggestion { width:200px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/icon_minus.gif) no-repeat; padding:15px 0;margin-top:4px} #feeds #suggestions .makesuggestion h5 { padding-bottom:6px} /* --------------------------------------------- 11. talktous --------------------------------------------- */ #talktous { font-family: 'MyriadProRegular'; width:205px; height:300px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/icon_minus.gif) no-repeat; padding-top:20px} #talktous h2 { text-transform:uppercase; line-height:1.3em; padding-top:4px; padding-bottom:16px} #talktous .textarea_talktous { width:200px; height: 150px; float:left; border: 1px solid #D3D3D3; padding-bottom:17px; background-color:transparent; background-image:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/talktous_gradient.png); background-repeat:repeat-x; } #talktous .button { padding-top: 21px; } #talktous .set { width:205px; float:left; margin-bottom: 20px; background-color: rgba(228,228,228,0.11); } #talktous .set p { padding-top: 10px; padding-left: 10px; } #talktous .set .album { width:58px; float:left; height: 54px; } #talktous .set .content { width:133px; float:left; margin-top:-2px; } #talktous .set .content p a { color:#FF9900; text-decoration:none; font-weight:normal; letter-spacing: 2px; } #talktous .set .content p span { color:#999999} /* --------------------------------------------- 12. footer styles --------------------------------------------- */ #footer { width:913px; height:55px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_footer.gif) repeat-x; padding:43px 10px 0 38px} #footer .logofooter { float:left} #footer ul { float:right} #footer ul li { float:left; font-size:10px; color:#FFFFFF; font-weight:bold; line-height:17px; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/li_bullet_footer.gif) no-repeat left center; padding:0 15px} #footer ul li.copyright { font-size:11px; color:#999999; font-weight:normal; background:none} #footer ul li span { color:#D24416} #footer ul li a { color:#FFFFFF; text-decoration:none} #footer ul li a:hover { color:#FFFFFF; text-decoration:underline} #footer ul li.globalsites a { background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/icon_globalsites.gif) no-repeat top right; padding-right:38px} /* --------------------------------------------- 13. innerpage styles --------------------------------------------- */ #containerinner { width:100%; float:left; position:relative} .bg_body img {min-height: 100%; min-width: 1024px; width: 100%;height: auto; position: fixed; top: 0; left: 0;} #contentinner { width:961px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_content_inner.png) repeat} #contentinner .heading { width:881px; height:60px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_heading_artistsdetails.png) repeat-x; padding:10px 55px; margin:-10px -15px; position:relative} #contentinner .heading h2 { float:left; padding-top:22px} #contentinner .heading h2 span { color:#FF1800} #contentinner .heading h2 a { color: #3d3d3d; text-decoration: none; } #contentinner .heading ul { float:right; padding-top:17px} #contentinner .heading ul li { float:left; padding-left:24px} #artistdetails { width:890px; float:left; padding:25px 36px 0 35px} #artistdetails h1 { font-family:'AauxProThin'; font-size:90px; line-height:.9em; margin-left:-5px; text-shadow:1px 1px 1px #000;} #artistdetails .content { width:890px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_divider_artistsdetails.gif) repeat-x bottom left; padding:22px 0} #artistdetails .content .leftcontent { width:575px; float:left; padding-right:25px} #artistdetails .content .leftcontent p { font-size:14px; color:#FF9133; font-weight:light; line-height:1.3em} #artistdetails .content .rightcontent { width:285px; float:left} #artistdetails .content .rightcontent p { font-size:12px; padding-bottom:15px} #artistdetails .content .rightcontent ul li { height:13px; float:left; padding-right:8px; padding-bottom:15px} #artistdetails .content .rightcontent ul li img { border:1px solid #62564E} #artistdetails .content .rightcontent ul li.right { padding-right:0} #artistdetails .tracksavailable { width:881px; float:left; padding:24px 3px 5px 3px} #artistdetails .tracksavailable h2 { font-size:20px; padding-bottom:22px; text-shadow:1px 1px 1px #000;} #artistdetails .tracksavailable ul { width:881px; float:left} #artistdetails .tracksavailable ul li { width:881px; height:80px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_trackslist.png); font-weight:bold; font-size:12px; color:#FFFFFF; margin-bottom:4px} #artistdetails .tracksavailable ul li .tracknumb { font-size:30px; width:22px; float:left; color:#FF1800; text-align:center; padding-left:10px; padding-right:20px} #artistdetails .tracksavailable ul li .trackname { font-size:30px; width:412px; float:left; padding-right:10px} #artistdetails .tracksavailable ul li .tracktime { width:300px; float:left; color:#666666} #artistdetails ul li .smallartwork {padding: 0px 0px 0px 0px;width:80px; float:left} #artistdetails .tracksavailable ul li a { width:881px; height:80px; float:left; color:#FFFFFF; text-decoration:none;} #artistdetails .tracksavailable ul li .text{padding-top: 20px; padding-left:100px;} .resize{ width: 40px; height: 40px; } #bgfeeds { width:880px; float:left; background:#222222 url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_feeds.jpg) no-repeat bottom left; padding:32px 41px 0 40px} #artistremixes { width:882px; float:left; padding:20px 40px 50px 2px} #artistremixes h2 { font-size:20px; padding-bottom:25px; text-shadow:1px 1px 1px #000;} #artistremixes h2 span { color:#fe9032} #artistremixes ul li { font-size:24px; width:882px; height:40px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_trackslist.png) repeat; font-size:11px; font-weight:bold; color:#666666; margin-bottom:4px} #artistremixes ul li .smallartwork { height:40px; float:left} #artistremixes ul li .icon { float:left} #artistremixes ul li .tracknumb {font-size:13px; float:left; color:#ff1800; padding:12px 20px 0 20px; width: 12px;} #artistremixes ul li .trackname {font-size:13px; width:320px; float:left; color:#FFFFFF; padding-top:12px} #artistremixes ul li .trackname a { color:#FFFFFF; text-decoration:none} #artistremixes ul li .trackname a:hover { color:#FFFFFF; text-decoration:underline} #artistremixes ul li .plays { width: 144px; height:28px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/track_dot.gif) no-repeat left center; padding:12px 18px 0 18px} #artistremixes ul li .plays span { color:#999999; margin-left:15px; width: 50px} #artistremixes ul li .plays img { float:left;} #artistremixes ul li .time { height:28px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/track_dot.gif) no-repeat left center; padding:12px 10px 0 20px} #artistremixes ul li .share { height:40px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/track_dot.gif) no-repeat left center;padding:12px 10px 0 20px padding:0px; padding-left:10px} #artistremixes ul li .share span { padding-top:12px; padding-right:20px; float: left; } #artistremixes ul li .share img { margin-right:5px; margin-top:6px; margin-bottom:-8px opacity: 1; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 300ms;} #artistremixes ul li .share img:hover { opacity: .2; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 300ms;} /* --------------------------------------------- 14. editorial page styles --------------------------------------------- */ .editorialcontent { width:885px; float:left; padding:30px 0 28px 5px} .editorialcontent p { font-size:13px; color:#CCCCCC} .editorialcontent ul { font-size:14px; color:#CCCCCC;} .editorialcontent li { margin-left: 18px;padding-bottom: 5px; list-style-image: url('https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bullet.png')} .editorialcontent p a { font-size:13px; color:#FF9900} .editorialcontent .column1 { width:277px; float:left; padding-right:20px} .editorialcontent .column2 { width:277px; float:left; padding-right:15px} .editorialcontent .column3 { width:277px; padding-right:10px; float: right; margin-top: -37px; } .editorialcontent .column1 p { padding-bottom:15px} .editorialcontent .column2 p { padding-bottom:15px} .editorialcontent .photo { float:left} .editorialcontent .top { width:885px; float:left} .editorialcontent .top p { font-size:12px; font-weight:bold; color:#FFFFFF; text-align:right; padding-right:10px} .editorialcontent .top p img { float:right} .editorialcontent .top p span { padding-right:5px; padding-top:2px; float:right} .editorialcontent .top p a { color:#FFFFFF} /* --------------------------------------------- 15. Form styles --------------------------------------------- */ form, button{border:0; margin:0; padding:0;} /* ----------- My Form ----------- */ .myform{ margin:0 auto; width:490px; padding:14px; } /* ----------- stylized ----------- */ #stylized{ border:solid 2px #b7ddf2; background:#4e4e4e; box-shadow: 2px 2px 5px #000; } #stylized h1 { margin-bottom:8px; } #stylized p{ font-size: 14px; color: #ff9c24; margin-bottom:20px; border-bottom:solid 1px #b7ddf2; padding-bottom:10px; } #stylized label{ display:block; font-weight:bold; text-align:right; width:140px; float:left; color: #ffffff; } #stylized .small{ color: #ff9c24; display:block; font-size:11px; font-weight:normal; text-align:right; width:140px; } input,textarea { padding: 9px; border: solid 1px #E5E5E5; outline: 0; font: normal 13px/100% Verdana, Tahoma, sans-serif; width: 200px; background: #FFFFFF left top repeat-x; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; } input:hover, textarea:hover, input:focus, textarea:focus { border-color: #C9C9C9; -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; } #stylized input{ float:left; padding:4px 2px; width:200px; margin:2px 0 20px 10px; color:black; } #stylized textarea{ float:left; padding:4px 2px; width:200px; height:60px; margin:2px 0 20px 10px; color:black; } .textfield{ color: #000; } #stylized button{ clear:both; margin-left:150px; width:125px; height:31px; background:#666666 url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/button.png) no-repeat; text-align:center; line-height:31px; color:#FFFFFF; font-size:11px; font-weight:bold; } #stylized .captcha { margin-left: 100px; } span.error { color: red; font-size:11px; font-weight:normal; float: right; text-align:center; width:120px; display: block; } #stylized .fp_form_icon { float: left; padding-top: 5px; padding-bottom: 30px; padding-right: 10px; } #stylized .fp_form_icon_nopadding { float: left; padding-top: 5px; padding-bottom: 5px; padding-right: 10px; } /* --------------------------------------------- 16. Lighbox page style --------------------------------------------- */ #header_lightbox { width:961px; height:74px; float:left; background-color: #313131; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/lightboxheader.jpg) no-repeat; } #header_lightbox .logo { width:189px; height:18px; float:left; no-repeat} #header_lightbox .lightbox_title { float: left; width: 350px;padding-left: 20px; padding-top: 15px;} #header .topnav_lightbox { float:right;} .xross { padding-left: 530px ;position: absolute;} .left_lightbox { background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/overlay_03.jpg) no-repeat; } #bgcontent_lightbox { width:961px; height: 400px; float:left; background-color: #313131; no-repeat bottom left} #bgcontent_lightbox_long { width:961px; height: 542px; float:left; background-color: #313131; no-repeat bottom left} #content_lightbox { width:880px; float:left; background-color: #313131; padding:32px 41px 0 40px} #content_lightbox_long { width:961px; float:left; background-color: #313131; padding:0px 0px 0 0px} .orangeText {color:#FF9900; text-decoration:none} /* --------------------------------------------- 17. blog page styles --------------------------------------------- */ #blog { width:888px; float:left; background:#000000; padding:30px 37px 50px 37px} #blog h1 { font-family:'AauxProThin'; font-size:90px; line-height:.9em; background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_divider.gif) repeat-x bottom left; padding-bottom:32px; margin-bottom:20px} #blog #leftpanel { width:580px; float:left; padding-right:25px; padding-bottom:70px} #blog #leftpanel h2 { font-size:22px; color:#FFFFFF; text-transform:uppercase; padding-bottom:15px} #blog #leftpanel h2 span { font-size:12px; color:#FF9133; font-weight:bold; text-transform:none} #blog #leftpanel p { font-size:12px; color:#CCCCCC; padding-bottom:15px} #blog #leftpanel p span { font-size:13px; color:#FF9133; font-weight:normal;} #blog #leftpanel .photo { float:left; padding-top:15px; padding-bottom:30px} #blog #leftpanel p.author { color:#FC8D2E; font-style:italic; padding-bottom:3px} #blog #leftpanel p.comments { font-weight:bold; color:#FF3300} #blog #leftpanel p.comments a { background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/icon_comments.gif) no-repeat 0 2px; color:#FF3300; text-decoration:none; padding-left:20px} #blog #leftpanel p.comments a:hover { color:#FF3300; text-decoration:underline} #blog #rightpanel { width:282px; float:left; padding-top:25px} #blog #rightpanel .aboutblog { width:282px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_divider.gif) repeat-x bottom left;padding-bottom:20px} #blog #rightpanel .aboutblog h2 { font-size:22px; color:#FFFFFF; padding-bottom:15px} #blog #rightpanel .aboutblog p { font-size:12px; color:#CCCCCC; font-weight:normal; font-style:italic; padding-bottom:12px} #blog #rightpanel .posts { width:282px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_divider.gif) repeat-x bottom left; padding-top:25px; padding-bottom:18px} #blog #rightpanel .posts h2 { font-size:22px; color:#FFFFFF; padding-bottom:20px} #blog #rightpanel .posts p { font-size:12px; font-weight:bold; line-height:1.3em; text-transform:uppercase; padding-bottom:16px} #blog #rightpanel .posts p span { color:#FF9133; text-transform:none} #blog #rightpanel .posts a { text-transform:none; text-decoration: none; } #blog #rightpanel .archive { width:282px; float:left; padding-top:25px} #blog #rightpanel .archive h2 { font-size:22px; color:#FFFFFF; padding-bottom:15px} #blog #rightpanel .archive p { font-size:12px; font-weight:bold; font-style:italic; line-height:1.3em; padding-bottom:8px} #blog #rightpanel .archive fieldset { width:282px; float:left} #blog #rightpanel .archive fieldset .droplist { width:205px; float:left; font-size:11px; color:#333333; background:#F0F2EC; border:none; padding:4px 12px} #blog #rightpanel .archive fieldset .buttongo { float:left; font-size:13px; color:#FFFFFF; text-align:center; padding-left:4px} #blog #rightpanel .archive fieldset .buttongo a { width:60px; height:29px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_button_go.gif) no-repeat; color:#FFFFFF; text-decoration:none; padding-top:6px} #blog .top { width:888px; float:left} #blog .top p { font-size:12px; font-weight:bold; color:#FFFFFF;padding-right:10px} #blog .top p img { float:left} #blog .top p span { padding-right:5px; padding-top:2px; float:left} #blog .top p a { color:#FFFFFF; text-decoration:none} /* --------------------------------------------- 18. artists page styles --------------------------------------------- */ #artists { width:880px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_content.gif) repeat-x; padding:25px 41px 42px 40px} #artists h1 { float:left; font-size:24px; color:#FFFFFF} #artists h1 span { color:#FF1800} #artists .listindex { float:right; margin-right:-3px} #artists .listindex ul { float:right} #artists .listindex ul li { float:left; font-size:10px; color:#999999; font-weight:bold; padding-left:3px} #artists .listindex ul li a { float:left; color:#999999; text-decoration:none; background:#222222; padding:3px 5px; margin-top:4px} #artists .listindex ul li a:hover { color:#FFFFFF; background:#FF1800} #artists .listindex ul li a.selected { color:#FFFFFF; background:#FF1800} #artists .listindex ul li.arrow a { background:none; margin-top:0px} #artists .listindex ul li.arrow a:hover { background:none; margin-top:0px} #artists .listindex p { float:right; font-size:12px; color:#999999; font-weight:bold; padding-right:10px; padding-top:5px} #artists .listindex p span { color:#FFFFFF} #artists .listindex p .total { color:#FF1800} #artists .list { width:880px; float:left; padding:15px 0} #artists .list .set { width:205px; float:left; padding-right:20px; padding-bottom:35px} #artists .list .right { padding-right:0px} #artists .list .set .video { width:205px; float:left; padding-bottom:25px} #artists .list .set .video .glare{position: absolute; width: 205px; height: 115px; float: left;} #artists .list .set h5 { float:left; font-size:15px; color:#FFFFFF} #artists .list .set h5 a { color:#FFFFFF; text-decoration:none} #artists .list .set h5 a:hover { color:#FFFFFF; text-decoration:underline} #artists .list .set .plus { float:right} #artists .list .set p { width:205px; float:left; color:#FF9900; text-transform:uppercase; padding-top:8px; padding-bottom:18px} #artists .list .set p span { color:#666666} #artists .list .set .buttondetails { float:left; font-size:13px; color:#FFFFFF} #artists .list .set .buttondetails a { height:30px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/sprite.gif) no-repeat; color:#FFFFFF; text-decoration:none; cursor:pointer; padding-left:15px} #artists .list .set .buttondetails a span { height:24px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/sprite.gif) no-repeat bottom right; padding-right:15px; padding-top:6px} #artists h2 { float:left; font-size:24px; color:#FF0000} #artists h2 span { font-size:12px; color:#FFFFFF; font-weight:bold} /* --------------------------------------------- 19. mix_player page styles --------------------------------------------- */ #containermixplayer { width:100%; float:left; background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_content_mixplayer.png) repeat-y top center} #containermixplayer #contentinner { background:none} #contentinner .heading p { float:left; font-size:15px; padding-top:22px} #jquery_jplayer_1 {display:none} #ajax_rating{ float:right } #mixplayer { width:881px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_southcentral.png) repeat; padding:40px 40px 35px 40px} #mixplayer .stars { float:right} #mixplayer .stars ul li { float:left; font-size:13px; color:#FFFFFF; padding-left:3px} #mixplayer .stars ul li.plays {float: right; padding-top:3px; padding-left:11px; padding-right: 7px;} #mixplayer .stars ul li.has_rated { clear: both; padding-top:3px; position: absolute; margin-left: 80px;} #mixplayer h1 span { color:#fe9032} #mixplayer p { font-size:16px; color:#999999; padding-top:5px; padding-bottom:25px} #mixplayer p span { color:#FFFFFF} #mixplayer .miniplayer { float:left} .artwork { float: left; margin-right: 20px; -moz-box-shadow: 0px 0px 0px #151515; -webkit-box-shadow: 0px 0px 7px #151515; box-shadow: 0px 0px 7px #151515;} #remixes { width:882px; float:left; padding:20px 40px 50px 38px} #error h1 {-webkit-box-shadow: #101010 3px 3px 3px; background-color: rgba(112,112,112,0.3); -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; width: 860px; } #error h2 {-webkit-box-shadow: #101010 3px 3px 3px; background-color: rgba(112,112,112,0.3); -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; width: 860px; } #error a:hover { color:#ffffff;} #error a.selected { color:#f87700;} #error a { color:#f87700;} #remixes h2 { padding-bottom:25px} #remixes h2 span { color:#fe9032} #remixes ul li { width:882px; height:40px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_trackslist.png) repeat; font-size:11px; color:#666666; margin-bottom:4px} #remixes ul li:hover {width:882px; height:40px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_trackslist_dark.png) repeat; font-size:11px; color:#666666; margin-bottom:4px} #remixes ul li.playSong img { float:left } #remixes ul li .icon { float:left} #remixes ul li .tracknumb { float:left; font-size:12px; color:#ff1800; padding:12px 20px 0 20px; width: 12px;} #remixes ul li .trackname { width:280px; float:left; font-size:12px; color:#FFFFFF; padding-top:12px} #remixes ul li .trackname a { color:#FFFFFF; text-decoration:none} #remixes ul li .trackname a:hover { color:#FFFFFF; text-decoration:underline} #remixes ul li .plays { width: 230px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/track_dot.gif) no-repeat left center; padding:12px 18px 10px 18px; } .white-font{ color: #fffeff; font-weight: normal; padding-left: 3px; } .orange-text{ color: #ff951d; font-weight: normal; padding-left: 3px; font-size: 13px; } #remixes ul li .plays span { padding-left: 20px; color:#999999; width: 50px; font-size: 11px; } #remixes ul li .plays img { float:left;} #remixes ul li .time { height:28px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/track_dot.gif) no-repeat left center; padding:12px 10px 0 20px; color: #ff951d; } #remixes ul li .share { height:40px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/track_dot.gif) no-repeat left center; padding:0px; padding-left:10px} #remixes ul li .share span { padding-top:12px; padding-right:20px; float: left; color: #fdfffc; } #remixes ul li .share img { margin-right:5px; margin-top:6px; margin-bottom:-8px opacity: 1; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 300ms;} #remixes ul li .share img:hover { opacity: .2; -webkit-transition: opacity; -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 300ms;}.smallstars{ float: left; margin-left:1px; } .fblike{ padding-top:22px; float: right; } .get_fireplayer { width:961px; height:76px; float:left; background:url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/bg_getfireplayer.jpg) repeat-x} .get_fireplayer h1 { float:left; padding-left:36px; padding-top:20px} .get_fireplayer h1 span { color:#000000} .get_fireplayer .link { float:right; padding-right:38px; padding-top:17px} /************************************************************************ -) Slider: only the following lines are necceassary for slider styling, rest of the css file styles the demo page *************************************************************************/ .aviaslider{ height:360px; /*this changes the height of the image slider*/ width:641px; overflow: hidden; position: relative; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.05, rgb(130,130,130)), color-stop(0.69, rgb(61,61,61)); ) background: -moz-linear-gradient( center bottom, rgb(130,130,130) 5%, rgb(61,61,61) 69% ); background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/layout/preload.gif) center center no-repeat; } .aviaslider li, .aviaslider .featured{ display: block; width:100%; height:100%; position: absolute; top:0; left:0; z-index: 1; } .js_active .aviaslider li, .js_active .aviaslider .featured{ display:none; } .aviaslider img, .aviaslider a img, .aviaslider a{ border:none; text-decoration: none; } .slidecontrolls{ margin:20px auto 0 auto; position: relative; float:left; } .slidecontrolls a{ height:20px; width:18px; display:block; cursor: pointer; background: transparent url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/layout/controlls.gif) center bottom no-repeat; float:left; outline: none; } .slidecontrolls a:hover, .slidecontrolls .active_item{ background: transparent url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/layout/controlls.gif) center top no-repeat; } .feature_excerpt{ width:610px; position: absolute; display: block; bottom: 0; left:0; z-index: 2; padding:14px 15px; font-size: 11.5px; line-height:1.5em; cursor: pointer; background: #000; color: #fff; } .feature_excerpt strong{ display: block; font-size: 15px; padding-bottom: 3px; } .tweet { font-family:'MyriadProRegular', arial, sans-serif; width: 200px; padding-bottom: 15px; } .tweet img { float: left; } .tweet .text { margin: 0; font-size: 73%; } .tweet a:visited{ color: #ffe9e7; } .tweet a:link{ color: #fffcf3; } .tweet .time a { float: right; font-size: 80%; color: gray; white-space: nowrap; text-decoration: none; } .tweet .time a:hover { text-decoration: underline; } .tweet .username a { color: #F90; } #twitterSearch .tweet { min-height: 24px; } #twitterSearch .tweet .text { margin-left: 32px; } /** HOMEPAGE PLAYER JPLAYER **/ #homescreen_player .slider { width:206px; float:left; padding-top:0px; height: 25px; padding-bottom:0px} #homescreen_player .slider .jp-play { float:left;height: 25px; width: 25px; background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/homescreen_player/play.png) no-repeat; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; behavior:url(../js/border-radius.htc); } #homescreen_player .slider .jp-play:hover { float:left;height: 25px; width: 25px; background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/homescreen_player/play.png) no-repeat; background-position: -25px 0px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; behavior:url(../js/border-radius.htc);} #homescreen_player .slider .jp-pause { float:left; height: 25px; width: 25px; background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/homescreen_player/pause.png) no-repeat; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; behavior:url(../js/border-radius.htc);} #homescreen_player .slider .jp-pause:hover { float:left; height: 25px; width: 25px; background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/homescreen_player/pause.png) no-repeat; background-position: -25px 0px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-left-radius: 3px; behavior:url(../js/border-radius.htc);} #homescreen_player .slider .playpause_btn .hidden { display: none;} #homescreen_player .slider .progress { float: left; height: 25px; width: 180px; background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/homescreen_player/bar.png) no-repeat; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; border-bottom-right-radius: 3px; behavior:url(../js/border-radius.htc); } #homescreen_player .slider .jp-progress { position: absolute; width: 165px; margin-top: 0px; margin-left: 0px; height: 6px; } #homescreen_player .slider .jp-current-time{ position:absolute; padding-top: 14px; padding-left: 185px; color: #grey; font-family:'Arial'; font-weight: normal; font-size: 11px ; } #homescreen_player .slider .jp-duration{ position:absolute; padding-top: 14px; padding-left: 234px; color: #grey; font-family:'Arial'; font-weight: normal; font-size: 11px ; } #homescreen_player .slider .jp-seek-bar { margin-top: 11px; margin-left: 7px; width:150px; /* height:15px; */ height:90%; cursor: pointer; } #homescreen_player .slider .jp-seeking-bg { background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/homescreen_player/loading-ani.gif); height: 4px; } #homescreen_player .slider .jp-play-bar { position: absolute; height: 5px; width: 159px; margin-top: -1px; margin-left: 3px; background: url(https://s3.amazonaws.com/fireplayerpublic/fireplayer_site/website_images/progress_red.png) repeat-x; } div.jp-audio { width:205px; } div.jp-interface { position: relative; /* width:418px; */ width:100%; }