.audioplayer
{
	margin: 10px 0;
	height: 2.5em; /* 40 */
	color: #fff;
	border: 1px solid #222;
	position: relative;
	z-index: 1;
	background: #222;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;

}
	.audioplayer > div
	{
		position: absolute;
	}
	.audioplayer-playpause
	{
		width: 2.5em; /* 40 */
		height: 100%;
		text-align: left;
		text-indent: -9999px;
		cursor: pointer;
		z-index: 2;
		top: 0;
		left: 0;
	}

		.audioplayer-playpause:hover,
		.audioplayer-playpause:focus
		{
			background-color: #222;
		}
		.audioplayer-playpause a
		{
			display: block;
		}
		.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a
		{
			width: 0;
			height: 0;
			border: 0.5em solid transparent; /* 8 */
			border-right: none;
			border-left-color: #fff;
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -0.5em 0 0 -0.25em; /* 8 4 */
		}
		.audioplayer-playing .audioplayer-playpause a
		{
			width: 0.75em; /* 12 */
			height: 0.75em; /* 12 */
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -0.375em 0 0 -0.375em; /* 6 */
		}
			.audioplayer-playing .audioplayer-playpause a:before,
			.audioplayer-playing .audioplayer-playpause a:after
			{
				width: 40%;
				height: 100%;
				background-color: #fff;
				content: '';
				position: absolute;
				top: 0;
			}
			.audioplayer-playing .audioplayer-playpause a:before
			{
				left: 0;
			}
			.audioplayer-playing .audioplayer-playpause a:after
			{
				right: 0;
            }

    /* *** PROGRESS BAR *** */
	.audioplayer-bar
	{
		height: 0.875em; /* 14 */
		background-color: #333;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		-khtml-border-radius: 10px;
		cursor: pointer;
		z-index: 1;
		top: 50%;
		right: 9.1em;
		left: 6.875em; /* 110 */
		margin-top: -0.438em; /* 7 */
	}
		.audioplayer-bar div
		{
			width: 0;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
		.audioplayer-bar-loaded
		{
			background-color: #444;
			border-radius: 10px;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			-khtml-border-radius: 10px;
			z-index: 1;
		}
		.audioplayer-bar-played
		{
			background: #83a9d3;	/*progress color*/
			border-radius: 10px;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			-khtml-border-radius: 10px;
			z-index: 2;
        }

    /* *** TIME DISPLAY *** */
	.audioplayer-time
	{
		width: 4.375em; /* 70 */
		height: 100%;
		line-height: 2.375em; /* 38 */
		text-align: center;
		z-index: 2;
		top: 0;
    }
        /* current time (left display) */
		.audioplayer-time-current
		{
			border-left: 1px solid #111;
			border-left-color: rgba( 0, 0, 0, .25 );
			left: 2.5em;
        }
        /* end time (right display) */
		.audioplayer-time-duration
		{

			right: 5em;
		}

    /* *** REWIND BUTTON *** */
	.audioplayer-rewind
	{
		width: 2.5em; /* 40 */
		height: 100%;
		border-left: 1px solid #111;
		border-left-color: rgba( 0, 0, 0, .25 );
		text-align: left;
		text-indent: -9999px;
		cursor: pointer;
		z-index: 2;
		top: 0;
		right: 2.5em;
	}
		.audioplayer-rewind:hover,
		.audioplayer-rewind:focus
		{
			background-color: #222;
		}
		.audioplayer-rewind-button
		{
			width: 100%;
			height: 100%;
		}
			.audioplayer-rewind-button a
			{
				width: 3px;
				height: 10px;
				background-color: #fff;
				display: block;
				position: relative;
				z-index: 1;
				top: 42%;
				left: 30%;
				margin-top:-4px;
			}
				.audioplayer-rewind-button a:before,
				.audioplayer-rewind-button a:after
				{
					content: '';
					position: absolute;
                }
                /* "jump rewind" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
				.audioplayer-rewind-button a:after
				{
					left:-4px;
					border:5px solid transparent;
					border-width:5px 7px;
					border-right-color:#fff;
					background:transparent;
                }

    /* *** YOUTUBE BUTTON *** */
    .audioplayer-youtube
    {
        width: 2.5em; /* 40 */
        height: 100%;
        border-left: 1px solid #111;
        border-left-color: rgba( 0, 0, 0, .25 );
        text-align: left;
        text-indent: -9999px;
        cursor: pointer;
        z-index: 2;
        top: 0;
        right: 0;
    }
        .audioplayer-youtube:hover,
		.audioplayer-youtube:focus
		{
			background-color: #222;
		}
		.audioplayer-youtube-button
		{
			width: 100%;
			height: 100%;
		}
			.audioplayer-youtube-button a
			{
				width: 11px;
				height: 10px;
				background-color: #f00;
				display: block;
				position: relative;
				z-index: 1;
				top: 42%;
				left: 30%;
                margin-top:-4px;
                -webkit-border-radius:2px;
                -moz-border-radius:2px;
                border-radius:2px;
            }
            .unavail a
			{
                background-color: #888;
            }
				.audioplayer-youtube-button a:before,
				.audioplayer-youtube-button a:after
				{
					content: '';
					position: absolute;
                }
                /* "video" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
                .audioplayer-youtube-button a:after
                {
                    left:9px;
                    border-style:solid;
                    border-width:5px 6px 5px 0;
                    border-color:transparent;
                    border-right-color:#f00;
                    background:transparent;
                }
                .unavail a:after
                {
                    border-right-color:#888;
                }

	.audioplayer *,
	.audioplayer *:before,
	.audioplayer *:after
	{
		-webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
		-moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
		-ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
		-o-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
		transition: color .25s ease, background-color .25s ease, opacity .5s ease;
	}