/*
 * Bulitka.com - Music Page - CSS
 * Created for Victoria Bulitko 
 * by Andrey Sokol
 * Copyright � 2011 
 * All rights reserved.
 */
 

.bulitkamusic_wrapper{
	width:980px;
	top:20%;
	margin:0px auto 0 auto;
	position:relative;
	min-height:380px;
}
.bulitkamusic_content_wrapper{
	position:absolute;
	top:0px;
	left:0px;
	width:770px;
	height:380px;
	background:transparent url(../img/music/bg.png) repeat top left;
	-moz-border-radius:10px 0px 0px 10px;
	-webkit-border-top-left-radius:10px;
	border-top-left-radius:10px;
	-webkit-border-bottom-left-radius:10px;
	border-bottom-left-radius:10px;
}
.bulitkamusic_player{
	position:absolute;
	top:0px;
	left:775px;
	width:215px;
	height:380px;
	background:transparent url(../img/music/bg.png) repeat top left;
	-moz-border-radius:0px 10px 10px 0px;
	-webkit-border-top-right-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
}
.bulitkamusic_content img.album{
	width:203px;
	border:1px solid #000;
	-moz-box-shadow:1px 1px 4px #000;
	-webkit-box-shadow:1px 1px 4px #000;
	box-shadow:1px 1px 4px #000;
	margin:20px 20px 10px 110px;
}
.bulitkamusic_description{
	width:390px;
	height:135px;
	margin-left:20px;
	overflow:hidden;
	text-overflow:ellipsis;
}
.bulitkamusic_description h2{
	font-size:36px;
	margin-bottom:5px;
	color:#f0f0f0;
	background:transparent url(../img/music/bg.png) repeat top left;
	padding:3px 0px 4px 10px;
	-moz-box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow:0px 0px 4px #000 inset;
	box-shadow:0px 0px 4px #000 inset;
}


a.bulitkamusic_playall{
	background:#000 url(../img/music/play_big.png) no-repeat center center;
	width:50px;
	height:50px;
	position:absolute;
	top:98px;
	left:196px;
	text-indent:-9000px;
	outline:none;
	display:inline;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	opacity:0.9;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

#mcs_container{	
	width:340px;
	height:343px;
	position:absolute;
	right:10px;
	top:20px;  /* border-bottom:1px solid #333; */
	}
#mcs_container .customScrollBox{position:relative; height:100%; overflow:hidden;}
#mcs_container .customScrollBox .container{position:relative; width:330px; top:0; float:left;}
#mcs_container .customScrollBox .bulitkamusic_songs{clear:both; width:320px; }
#mcs_container .customScrollBox img{ border:5px solid #fff; }
#mcs_container .dragger_container{height:300px; position:relative; width:4px;  float:left; margin:20px 0 0 0px; background:#000; cursor:pointer -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; cursor:s-resize;}
#mcs_container .dragger{height:160px; position:absolute; width:4px;  background:#999; text-align:center; line-height:120px; color:#666; overflow:hidden; cursor:pointer; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;}
#mcs_container .dragger_pressed{ height:160px; position:absolute; width:5px; margin-left:-1px; background:#999; text-align:center; line-height:120px; color:#666; overflow:hidden; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; cursor:s-resize;}
#mcs_container .scrollUpBtn, #mcs_container .scrollDownBtn{position:absolute; display:inline-block; width:14px; height:15px; margin-right:2px; text-decoration:none; right:0; filter:alpha(opacity=20); -moz-opacity:0.20; -khtml-opacity:0.20; opacity:0.20;}
#mcs_container .scrollUpBtn{top:4px; background:url(../img/scroll/mcs_btnUp.png) center center no-repeat;}
#mcs_container .scrollDownBtn{bottom:4px; background:url(../img/scroll/mcs_btnDown.png) center center no-repeat;}
#mcs_container .scrollUpBtn:hover,#mcs_container .scrollDownBtn:hover{filter:alpha(opacity=60); -moz-opacity:0.60; -khtml-opacity:0.60; opacity:0.60;}

.bulitkamusic_songs{
	width:320px;
}
.bulitkamusic_songs > div{
	background:transparent url(../img/music/bg.png) repeat top left;
	width:320px;
	margin-bottom:5px;
	height:30px;
}
.bulitkamusic_songs div h3{
	width:250px;
	line-height:30px;
	margin-left:10px;
	float:left;
	font-size:16px;
}
.bulitkamusic_options{
	width:48px;
	float:right;
}
.bulitkamusic_options span{
	text-indent:-9000px;
	width:20px;
	height:26px;
	margin:2px 2px 0px 0px;
	float:left;
	cursor:pointer;
}
.bulitkamusic_options span.bulitkamusic_addpl{
	background:transparent url(../img/music/add.png) no-repeat center center;
}
.bulitkamusic_options span.bulitkamusic_play{
	background:transparent url(../img/music/play.png) no-repeat center center;
}
ul.bulitkamusic_albums{
    clear: both;
    width: 970px;
    height: 115px;

}
ul.bulitkamusic_albums li{
    float: left;
    list-style-type: none;
    margin-right: 10px;
}
ul.bulitkamusic_albums img{
	width:110px;
	-moz-box-shadow:1px 1px 4px #000;
	-webkit-box-shadow:1px 1px 4px #000;
	box-shadow:1px 1px 4px #000;
	cursor:pointer;
	margin-top:3px;

}




.jcarousel-skin .jcarousel-container {
	position:absolute;
	top:239px;
	left:460px;
	background:transparent url(../img/music/bg.png) repeat top left;
	/* -moz-border-radius:0px 0px 0px 10px;
	-webkit-border-bottom-left-radius:10px;
	border-bottom-left-radius:10px;
	*/
}
.jcarousel-skin .jcarousel-container-horizontal {
    width: 210px;
    padding: 12px 30px;
}
.jcarousel-skin .jcarousel-clip-horizontal {
    width:  210px;
    height: 117px;
}
.jcarousel-skin .jcarousel-item {
    width: 110px;
    height: 117px;
}
.jcarousel-skin .jcarousel-item-horizontal {
    margin: 0px 10px 0px 0px;
}

.jcarousel-skin .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}
.jcarousel-skin .jcarousel-next-horizontal {
    position: absolute;
    top: 60px;
    right: 10px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: transparent url(../img/music/br_next.png) no-repeat center center;
}
.jcarousel-skin .jcarousel-prev-horizontal {
    position: absolute;
    top: 60px;
    left: 10px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: transparent url(../img/music/br_prev.png) no-repeat center center;
}

/*
 * Skin for jPlayer Plugin (jQuery JavaScript Library)
 * http://www.happyworm.com/jquery/jplayer
 *
 *
 * Copyright (c) 2010 Happyworm Ltd
 * Dual licensed under the MIT and GPL licenses.
 *  - http://www.opensource.org/licenses/mit-license.php
 *  - http://www.gnu.org/copyleft/gpl.html
*/

div.jp-single-player,
div.jp-playlist-player {

        /* Edit the font-size to counteract inherited font sizing.
         * Eg. 1.25em = 1 / 0.8em
         */
        font-size:1em; /* No parent CSS that can effect the size in these demos */
        line-height:1.6;
        color: #666;
        margin-top:10px;
}
div.jp-interface {
        position: relative;
        width:215px;
        height:60px;
}
div.jp-single-player div.jp-interface {
        border-bottom:none;
}
div.jp-interface ul.jp-controls {
        list-style-type:none;
        padding:0;
        margin: 0;
}
div.jp-interface ul.jp-controls li {
        position: absolute;
}
div.jp-interface ul.jp-controls a {
        position: absolute;
        overflow:hidden;
        text-indent:-9999px;
        opacity:0.9;
}
div.jp-interface ul.jp-controls a:hover{
        opacity:1.0;
}
a.jp-previous {
        left:4px;
        top:0px;
        width:20px;
        height:20px;
        background: url(../img/music/icons/playback_prev.png) no-repeat center center;
}
div.jp-playlist-player a.jp-play,
div.jp-playlist-player a.jp-pause {
        left:24px;
}
a.jp-play {
        background: url(../img/music/icons/playback_play.png) no-repeat center center;
        width:20px;
        height:20px;
}
a.jp-pause {
        background: url(../img/music/icons/playback_pause.png) no-repeat center center;
        display: none;
        width:20px;
        height:20px;
}
a.jp-next {
        left:45px;
        top:0px;
        width:20px;
        height:20px;
        background: url(../img/music/icons/playback_next.png) no-repeat center center;
}
a.jp-stop {
        top:0px;
        background: url(../img/music/icons/playback_stop.png) no-repeat center center;
        width:20px;
        height:20px;
}
div.jp-playlist-player a.jp-stop {
        left:72px;
}
div.jp-play-time,
div.jp-total-time {
        position: absolute;
        top:42px;
        width:200px;
        font-size:10px;
        color:#fff;
}
div.jp-total-time {
        text-align: right;
}
div.jp-playlist-player div.jp-play-time,
div.jp-playlist-player div.jp-total-time {
        left:7px;
}
div.jp-progress {
        position: absolute;
        overflow:hidden;
        top:25px;
        border:1px solid #000;
        width:200px;
        height:15px;
}
div.jp-playlist-player div.jp-progress {
        left:7px;
}
div.jp-load-bar {
        background: url("../img/music/icons/jplayer.codrops.png") 0 0 repeat-x;
        width:0px;
        height:15px;
        cursor: pointer;
}
div.jp-play-bar {
        background: url("../img/music/icons/jplayer.codrops.png") 0 -15px repeat-x ;
        width:0px;
        height:15px;
}
a.jp-volume-min {
        top:2px;
        background: url(../img/music/icons/sound_mute.png) no-repeat center center;
        width:18px;
        height:15px;
        left:100px;
}
a.jp-volume-max {
        top:2px;
        background: url(../img/music/icons/sound_high.png) no-repeat center center;
        width:18px;
        height:15px;
        left:174px;
}
div.jp-volume-bar {
        position: absolute;
        overflow:hidden;
        top:7px;
        background: url("../img/music/icons/jplayer.codrops.png") 0 0px repeat-x;
        width:46px;
        height:5px;
        cursor: pointer;
        left:123px;
}
div.jp-volume-bar-value {
        background: url("../img/music/icons/jplayer.codrops.png") 0 -30px repeat-x;
        width:0px;
        height:5px;
}
div.jp-playlist {
        width:215px;
        height:310px;
        /*overflow-y:auto;
        overflow-x:hidden;
		*/
}
div.jp-playlist ul{
        list-style-type:none;
        margin:0;
        padding:0;
        border-top:none;
        width:202px;
        font-size:10px;
}
div.jp-playlist-player div.jp-playlist li {
        padding:3px;
        margin:3px 6px;
        background:transparent url(../img/music/bg.png) repeat top left;
}
div.jp-playlist-player div.jp-playlist li span{
        width:16px;
        height:16px;
        float:right;
        cursor: pointer;
        background: url(../img/music/icons/remove.png) no-repeat center center;
}
div.jp-playlist-player div.jp-playlist li.jplayer_playlist_current {

}
div.jp-playlist-player div.jp-playlist a {
        color: #ccc;
        text-shadow:1px 1px 1px #000;
        text-transform:uppercase;
        text-decoration: none;
}
div.jp-playlist-player div.jp-playlist a:hover {
        color:#fff;
}
div.jp-playlist-player div.jp-playlist a.jplayer_playlist_current {
        color:#c4000c;
}


#jplayer_playlist{	
	/* border:1px solid #333; */
	}
#jplayer_playlist .customScrollBox{position:relative; height:100%; overflow:hidden;}
#jplayer_playlist .customScrollBox .container{position:relative; width:202px; top:0; float:left;}
#jplayer_playlist .customScrollBox .scrollcontent{clear:both; width:202px; }
#jplayer_playlist .customScrollBox img{ border:5px solid #fff; }
#jplayer_playlist .dragger_container{height:260px; position:relative; width:2px;  float:left; margin:27px 0px 0 3px; background:#000; cursor:pointer -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; cursor:s-resize;}
#jplayer_playlist .dragger{height:10px; position:absolute; width:2px;  background:#999; text-align:center; line-height:120px; color:#666; overflow:hidden; cursor:pointer; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;}
#jplayer_playlist .dragger_pressed{ height:55px; position:absolute; width:4px; margin-left:-1px; background:#999; text-align:center; line-height:120px; color:#666; overflow:hidden; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; cursor:s-resize;}
#jplayer_playlist .scrollUpBtn, #jplayer_playlist .scrollDownBtn{position:absolute; display:inline-block; width:14px; height:15px; margin-right:2px; text-decoration:none; right:0; filter:alpha(opacity=20); -moz-opacity:0.20; -khtml-opacity:0.20; opacity:0.20;}
#jplayer_playlist .scrollUpBtn{top:80px; background:url(../img/scroll/mcs_btnUp.png) center center no-repeat;}
#jplayer_playlist .scrollDownBtn{bottom:5px; background:url(../img/scroll/mcs_btnDown.png) center center no-repeat;}
#jplayer_playlist .scrollUpBtn:hover,#mcs_container .scrollDownBtn:hover{filter:alpha(opacity=60); -moz-opacity:0.60; -khtml-opacity:0.60; opacity:0.60;}