/*
Skin Name: Fancy
*/

/*  Table of Contents 
01. Responsive Max Width
02. Main Backgrounds
03. Borders
04. Button/Font Colors
05. Playlist Backgrounds & Fonts
06. Progress/Volume Bar Backgrounds
07. Player Height
08. Button Sizes
*/


/*
=============================================== 01. Responsive Max Width ===============================================
*/
/* body .responsive-wrapper {max-width:550px;} */


/*
=============================================== 02. Main Backgrounds ===============================================
*/
/* Main Background Color */
body .mejs-container.progression-skin.progression-fancy .mejs-controls {
	background:#f1f1f1; /* IE Fall-Back */
	background-image: -webkit-gradient(linear, bottom, 0% 0%, 0% 100%, from(#deddde), to(#f2f2f2));  /* Safari 4+, Chrome 1-9 */
	background-image: -webkit-linear-gradient(bottom, #deddde, #f2f2f2);   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -moz-linear-gradient(bottom, #deddde, #f2f2f2);  /* Firefox 3.6+ */
	background-image: -ms-linear-gradient(bottom, #deddde, #f2f2f2); /* IE 10+ */
	background-image: -o-linear-gradient(bottom, #deddde, #f2f2f2); /* Opera 11.10+ */
	background-image: linear-gradient(bottom, #deddde 0%, #f2f2f2 100%);
}

/* Button Hover Background Color */
body .progression-skin.progression-fancy .mejs-controls .mejs-nexttrack:hover, body .progression-skin.progression-fancy .mejs-controls .mejs-prevtrack:hover,  body .progression-skin.progression-fancy .mejs-controls .mejs-show-playlist:hover, body .progression-skin.progression-fancy  .mejs-controls .mejs-hide-playlist:hover,  body .progression-skin.progression-fancy .mejs-controls .mejs-mute button:hover,  body .progression-skin.progression-fancy .mejs-controls .mejs-fullscreen-button:hover,  body .progression-skin.progression-fancy .mejs-controls .mejs-hide-playlist, body .progression-skin.progression-fancy .mejs-controls .mejs-playpause-button:hover {
	background:#deddde; /* IE Fall-Back */
	background-image: -webkit-gradient(linear, bottom, 0% 0%, 0% 100%, from(#f2f2f2), to(#deddde));  /* Safari 4+, Chrome 1-9 */
	background-image: -webkit-linear-gradient(bottom, #f2f2f2, #deddde);   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -moz-linear-gradient(bottom, #f2f2f2, #deddde);  /* Firefox 3.6+ */
	background-image: -ms-linear-gradient(bottom, #f2f2f2, #deddde); /* IE 10+ */
	background-image: -o-linear-gradient(bottom, #f2f2f2, #deddde); /* Opera 11.10+ */
	background-image: linear-gradient(bottom, #f2f2f2 0%, #deddde 100%);
}


/*
=============================================== 03. Borders ===============================================
*/
/* Main Outline Border */
body .mejs-container.progression-skin.progression-fancy, body .mejs-container.progression-skin.progression-fancy .mejs-controls  {
	border-color:#c2c2c2;
}

/* Button Borders */
body .progression-skin.progression-fancy .mejs-controls .mejs-playpause-button, body .progression-skin.progression-fancy .mejs-inner .mejs-controls .mejs-time, body .progression-skin.progression-fancy .mejs-controls .mejs-fullscreen-button,  body .progression-skin.progression-fancy .mejs-controls .mejs-show-playlist, body .progression-skin.progression-fancy  .mejs-controls .mejs-hide-playlist, body .progression-skin.progression-fancy .mejs-controls .mejs-prevtrack button,  body .progression-skin.progression-fancy .mejs-controls .mejs-nexttrack button {
	border-color:#c2c2c2;
}


/*
=============================================== 04. Button/Font Colors ===============================================
*/
/* Main Button Color */
body .progression-skin.progression-fancy .mejs-controls button {
	color:#6b6b6b;
	text-shadow: 1px 1px 1px #ffffff;
}

/* Main Button Hover Color */
body .progression-skin.progression-fancy .mejs-controls button:hover {
	color:#6b6b6b;
}

/* Timer Color 00:00 */
body .progression-skin.progression-fancy .mejs-inner .mejs-time .mejs-currenttime, body .progression-skin.progression-fancy .mejs-inner .mejs-time  .mejs-duration {
	color:#777777;
}


/*
=============================================== 05. Playlist Backgrounds & Fonts ===============================================
*/
/* PlayList Borders */
body .progression-skin.progression-fancy .mejs-playlist ul, body .progression-skin.progression-fancy .mejs-playlist li {border-color:#c2c2c2;}

/* PlayList Background */
body .progression-skin.progression-fancy .mejs-playlist, body .progression-skin.progression-fancy .mejs-playlist ul { background: #efefef;}

/* PlayList Font Color */
body .progression-skin.progression-fancy .mejs-playlist li { color: #777777; }

/* PlayList Hover Background */
body .progression-skin.progression-fancy .mejs-playlist li:hover {
	background-color: rgba(0, 0, 0, 0.06);
}

/* PlayList Current Selected Item */
body .progression-skin.progression-fancy .mejs-playlist li.current {
	color:#ffffff;
	background:#bbbbbb;
	background: rgba(0, 0, 0, 0.35);
}
body .mejs-playlist ul {min-height: 550px;}

/*
=============================================== 06. Progress/Volume Bar Backgrounds ===============================================
*/
/* Main Progress Bar Background */
body .progression-skin.progression-fancy .mejs-controls div.mejs-time-rail {
	padding-top:11px;
}
body .progression-skin.progression-fancy .mejs-controls .mejs-time-rail span {
	height:9px;
}
body .progression-skin.progression-fancy .mejs-controls .mejs-time-rail span.mejs-time-float {
		height: 17px;
}
body .progression-skin.progression-fancy .mejs-controls .mejs-time-rail .mejs-time-total {
	background:#9a9a9a; /* IE Fall-Back */
	background-image: -webkit-gradient(linear, bottom, 0% 0%, 0% 100%, from(#bcbcbc), to(#9a9a9a));  /* Safari 4+, Chrome 1-9 */
	background-image: -webkit-linear-gradient(bottom, #bcbcbc, #9a9a9a);   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -moz-linear-gradient(bottom, #bcbcbc, #9a9a9a);  /* Firefox 3.6+ */
	background-image: -ms-linear-gradient(bottom, #bcbcbc, #9a9a9a); /* IE 10+ */
	background-image: -o-linear-gradient(bottom, #bcbcbc, #9a9a9a); /* Opera 11.10+ */
	background-image: linear-gradient(bottom, #bcbcbc 0%, #9a9a9a 100%);
	
	-webkit-box-shadow: inset 1px 1px 2px  rgba(0, 0, 0, 0.4);
	box-shadow: inset 1px 1px 2px  rgba(0, 0, 0, 0.4);
	
}

/* Main Progress Bar Loading Background */
body .progression-skin.progression-fancy .mejs-controls .mejs-time-rail .mejs-time-loaded { 
	-webkit-box-shadow: inset 1px 1px 2px  rgba(0, 0, 0, 0.4);
	box-shadow: inset 1px 1px 2px  rgba(0, 0, 0, 0.4);
	background:#8a8a8a; /* IE Fall-Back */
	background-image: -webkit-gradient(linear, bottom, 0% 0%, 0% 100%, from(#b1b1b1), to(#8a8a8a));  /* Safari 4+, Chrome 1-9 */
	background-image: -webkit-linear-gradient(bottom, #b1b1b1, #8a8a8a);   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -moz-linear-gradient(bottom, #b1b1b1, #8a8a8a);  /* Firefox 3.6+ */
	background-image: -ms-linear-gradient(bottom, #b1b1b1, #8a8a8a); /* IE 10+ */
	background-image: -o-linear-gradient(bottom, #b1b1b1, #8a8a8a); /* Opera 11.10+ */
	background-image: linear-gradient(bottom, #b1b1b1 0%, #8a8a8a 100%);
}

/* Main Progress Bar Currently Played Background */
body .progression-skin.progression-fancy .mejs-controls .mejs-time-rail .mejs-time-current {
	-webkit-box-shadow: inset 1px 1px 2px  rgba(0, 0, 0, 0.4);
	box-shadow: inset 1px 1px 2px  rgba(0, 0, 0, 0.4);
	background:#737373; /* IE Fall-Back */
	background-image: -webkit-gradient(linear, bottom, 0% 0%, 0% 100%, from(#88888b), to(#737373));  /* Safari 4+, Chrome 1-9 */
	background-image: -webkit-linear-gradient(bottom, #88888b, #737373);   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -moz-linear-gradient(bottom, #88888b, #737373);  /* Firefox 3.6+ */
	background-image: -ms-linear-gradient(bottom, #88888b, #737373); /* IE 10+ */
	background-image: -o-linear-gradient(bottom, #88888b, #737373); /* Opera 11.10+ */
	background-image: linear-gradient(bottom, #88888b 0%, #737373 100%);
}

/* Main Progress Bar Handle */
body .progression-skin.progression-fancy .mejs-controls .mejs-time-rail .mejs-time-handle  {
	display: block; margin: 0; padding:0px !important; border: 0;
	width: 15px;
	height: 15px;
	top:-3px; 
	left:-8px;
	border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
	-webkit-box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.5), 0 0 0 1px rgba(0,0,0,.3), 0 1px 2px 0 rgba(0,0,0,.3);
	box-shadow:  inset 0 0 1px 1px rgba(255,255,255,0.5), 0 0 0 1px rgba(0,0,0,.3), 0 1px 2px 0 rgba(0,0,0,.3);
	background: #ffffff url(../build/timer-handle.png) 1px 1px no-repeat;
	background-color: transparent\9; /* IE8 and below */
}



/* Volume Bar Background Default */

body .progression-skin.progression-fancy .mejs-controls div.mejs-horizontal-volume-slider {
	margin-top:5px;
	height:2px;
}


body .progression-skin.progression-fancy .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	
	height: 9px;
	top:11px;
	
	background:#9a9a9a; /* IE Fall-Back */
	background-image: -webkit-gradient(linear, bottom, 0% 0%, 0% 100%, from(#bcbcbc), to(#9a9a9a));  /* Safari 4+, Chrome 1-9 */
	background-image: -webkit-linear-gradient(bottom, #bcbcbc, #9a9a9a);   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -moz-linear-gradient(bottom, #bcbcbc, #9a9a9a);  /* Firefox 3.6+ */
	background-image: -ms-linear-gradient(bottom, #bcbcbc, #9a9a9a); /* IE 10+ */
	background-image: -o-linear-gradient(bottom, #bcbcbc, #9a9a9a); /* Opera 11.10+ */
	background-image: linear-gradient(bottom, #bcbcbc 0%, #9a9a9a 100%);
	
	-webkit-box-shadow: inset 1px 1px 2px  rgba(0, 0, 0, 0.4);
	box-shadow: inset 1px 1px 2px  rgba(0, 0, 0, 0.4);
}

/* Volume Bar Background Volume On */
body .progression-skin.progression-fancy .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	-webkit-box-shadow: inset 1px 1px 2px  rgba(0, 0, 0, 0.4);
	box-shadow: inset 1px 1px 2px  rgba(0, 0, 0, 0.4);
	background:#737373; /* IE Fall-Back */
	background-image: -webkit-gradient(linear, bottom, 0% 0%, 0% 100%, from(#88888b), to(#737373));  /* Safari 4+, Chrome 1-9 */
	background-image: -webkit-linear-gradient(bottom, #88888b, #737373);   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -moz-linear-gradient(bottom, #88888b, #737373);  /* Firefox 3.6+ */
	background-image: -ms-linear-gradient(bottom, #88888b, #737373); /* IE 10+ */
	background-image: -o-linear-gradient(bottom, #88888b, #737373); /* Opera 11.10+ */
	background-image: linear-gradient(bottom, #88888b 0%, #737373 100%);
}


/* Volume Bar Volume Handle */
body .progression-skin.progression-fancy .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
	display: block;
	position: absolute;
	margin-left:0px;
	top:8px;
	text-align: center;
	width: 15px;
	height: 15px;
	border:none;
	border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
	-webkit-box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.5), 0 0 0 1px rgba(0,0,0,.3), 0 1px 2px 0 rgba(0,0,0,.3);
	box-shadow:  inset 0 0 1px 1px rgba(255,255,255,0.5), 0 0 0 1px rgba(0,0,0,.3), 0 1px 2px 0 rgba(0,0,0,.3);
	
	background: #ffffff url(../build/timer-handle.png) 1px 1px no-repeat;
	
	background-color: transparent\9; /* IE8 and below */  
	
}