/* html5player.css stylesheet for DHW's html5player */

.h5p-inner {
	background-image: url(images/glass1_flowplayerback_trans.png);
	width: 370px;
	height:38px;
	position: relative;
}
/* basic button */
.h5p-button {
	border-style: solid;
	border-width: 0px; 
	width: 0px;
	height: 0px;
	line-height: 0px;
	position: absolute;
	cursor: pointer;	
}
/* individual buttons */
.h5p-button.h5p-stop {
	border-width: 6px;
	border-color: #ffffcc;
	top: 12px;
	left: 20px;
}
.h5p-button.h5p-play, .h5p-button.h5p-dummyplay {
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent #ffffcc;
	top: 11px;
	left: 47px;
}
/* dummy play is for use in the iThing non-html5 version */
.h5p-button.h5p-dummyplay {
	left: 20px;
}
.h5p-button.h5p-pause {
	border-color: #FFFFcc;
    border-width: 0 4px;
    height: 12px;
    left: 46px;
    top: 12px;
    width: 4px;
}
.h5p-button.h5p-mute1 {
	border-width: 2px;
	border-color: #ffffcc;
	top: 16px;
	left: 247px;	
}
.h5p-button.h5p-mute2 {
	border-width: 6px 10px 6px 0;
	border-color: transparent #ffffcc transparent transparent;
	top: 12px;
	left: 247px;
}
/* hover */
.h5p-button.h5p-stop:hover, .h5p-button.h5p-pause:hover {
	border-color: yellow;
}
.h5p-button.h5p-play:hover {
	border-color: transparent transparent transparent yellow;
}
.h5p-button.h5p-mute:hover .h5p-button.h5p-mute1{
	border-color: yellow;
}
.h5p-button.h5p-mute:hover .h5p-button.h5p-mute2{
	border-color: transparent yellow transparent transparent;
}
/* click */
.h5p-button.h5p-stop:active, .h5p-button.h5p-pause:active {
	border-color: red;
}
.h5p-button.h5p-play:active {
	border-color: transparent transparent transparent red;
}
.h5p-button.h5p-mute:active .h5p-button.h5p-mute1{
	border-color: red;
}
.h5p-button.h5p-mute:active .h5p-button.h5p-mute2 {
	border-color: transparent red transparent transparent;
}

/* volume slider */
.h5p-volume {
    background-color: #0000dd;
    height: 6px;
    left: 273px;
    position: absolute;
    top: 15px;
    width: 60px;
    border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
}
.h5p-volume-handle {
	cursor: pointer;
	position: absolute;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	width: 8px;
	height: 8px;
	background-color: #ffffcc;
	top: -1px;
}
.h5p-volume-handle:hover {
	background-color: yellow;
}


/* progress slider */
.h5p-progress {
    background-color: transparent;
    height: 7px;
    left: 73px;
    position: absolute;
    top: 15px;
    width: 80px;
	z-index:2;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
}
.h5p-progress-handle {
	cursor: pointer;
	position: absolute;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	width: 6px;
	height: 6px;
	background-color: #ffffcc;
	top: 0px;	
	z-index:3;
}
.h5p-progress-handle:hover {
	background-color: yellow;
}

/* loading bar is a canvas, as is "play so far" bar */
.h5p-load, .h5p-playsofar {
	/*background-color: #0000dd;*/
	background-color: transparent;
    left: 73px;
    position: absolute;
    top: 15px;
	z-index: 0;
	margin: 0;
	padding: 0;
	border: 1px solid blue;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
}
.h5p-playsofar {
	z-index: 1;
}
/* times */
.h5p-time1 {
    color: white;
    font-size: 12px;
    height: 10px;
    left: 170px;
    position: absolute;
    top: 11px;
    width: 40px;
	font-family: Arial, Helvetica, sans-serif;
}
.h5p-time2 {
    color: #cccccc;
    font-size: 12px;
    height: 10px;
    left: 205px;
    position: absolute;
    top: 11px;
    width: 40px;
	font-family: Arial, Helvetica, sans-serif;
}
/* muted X */
.h5p-muted {
    color: red;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 16px;
    left: 247px;
    line-height: 16px;
    font-weight:bold;
    position: absolute;
    top: 10px;
    z-index: 1;
	cursor: pointer;
}
/* popup for hover info... */
.h5p-popup {
	position: absolute;
	text-align:center;
	top: -8px;
	left: 5px;
	height: 20px;
	color: blue;
	background-color: transparent;
	z-index:3;
}
.h5p-popup1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: white;
	background-color: black;
	padding: 1px 2px;
	white-space: nowrap;
}
.h5p-popup2 {
	/* a triangle */
	border-style: solid;
	border-width: 0px; 
	width: 0px;
	height: 0px;
	line-height: 0px;
	border-width: 7px 5px 0 5px;
	border-color: #000 transparent transparent transparent;
	left: 3px;
	margin: 0 auto;
}
/* text box for non-html5 iThings */
.h5p-iThing {
	position: absolute;
	top: 9px;
	left: 35px;
	font-weight:bold;
	font-style:italic;
	color: white;
}
/* and this is just frivolous */
.h5p-reddot {
	position: absolute;
	top: 9px;
	left: 341px;
	width: 17px;
	height: 17px;
	background-color: transparent;
}