@charset "utf-8";
/* CSS Document */

/*

 Default + hover state, "click to play":

 a.sm2_link {}
 a.sm2_link:hover {}

 Playing + hover state, "click to pause":

 a.sm2_playing {}
 a.sm2_playing:hover {}

 Paused + hover state, "click to resume":

 a.sm2_paused {}
 a.sm2_paused:hover {}

*/


ul.graphic li {
 padding-bottom:0px;
}

ul.graphic {
 list-style-type:none;
 padding-left:0px;
 margin-left:0px;
}

ul.graphic {
 list-style-type:none;
 margin:0px;
 padding:0px;
}

ul.graphic li {
 margin-bottom:0px;
}

ul.graphic li a,
ul.graphic li a.sm2_link {
	/* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
 display:block;
	/* [disabled]padding-left:22px; */
	padding-top:6px;
	padding-bottom:6px;
	padding-left:25px;
	padding-right:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	vertical-align:left;
	background-color:#E2DCCF;
	min-width:100px;
	text-decoration:none;
	font-weight:normal;
	color:#9D261D;
	line-height: 100%;
	margin-top: 5px;
	margin-bottom: 5px;
	background-image:url(../img/audio-headphones.png);
	background-position:7px 50%;
	background-repeat:no-repeat;
}

ul.graphic li a.sm2_link {
 /* safari 3.1+ fun (or, proprietary crap. TBD.) */
 -webkit-transition-property: hover;
 -webkit-transition: background-color 0.15s linear;
 -moz-transition: background-color 0.15s linear 0s; /* firefox 4 */
  -o-transition-property: background-color; /* opera 10.5 */
  -o-transition-duration: 0.15s;
}

ul.graphic li a.sm2_paused:hover,
ul.graphic li a.sm2_link:hover {
	background:#E2DCCF url(../img/audio-play.png) no-repeat 7px 50%;
	background-color:#E2DCCF;
	color:#9D261D;
	
}

ul.graphic li a.sm2_link:hover {
	/* default hover color, if you'd like.. */
	background:#9D261D url(../img/audio-play.png) no-repeat 7px 50%;
	background-color:#9D261D;
	color:#FEFEFC;
}

ul.graphic li a.sm2_paused {
	background:#999 url(../img/audio-pause.png) no-repeat 7px 50%;
	background-color:#999;
	color:#FEFEFC;
}

ul.graphic li a.sm2_paused:hover {
	background:#666 url(../img/audio-play.png) no-repeat 7px 50%;
	background-color:#666;
	color:#FEFEFC;
}

ul.graphic li a.sm2_playing,
ul.graphic li a.sm2_playing:hover {
	background:#9D261D url(../img/audio-pause.png) no-repeat 7px 50%;
	background-color:#9D261D;
	text-decoration:none;
	color:#FEFEFC;
}

/* hide button while playing?
ul.graphic li a.sm2_playing {
 background-image:none;
}
*/

body #sm2-container object,
body #sm2-container embed {
	/*
  flashblock handling: hide SWF off-screen by default (until blocked timeout case.)
  include body prefix to ensure override of flashblock.css.
 */

 	left:0px;
	top:0px;
	height: 0px;
}

.spectrum-container {
 display:none;
}

ul.use-spectrum li.sm2_playing .spectrum-container {
 position:absolute;
 left:0px;
 top:0px;
 margin-left:-266px;
 margin-top:-1px;
 display:block;
 background-color:#5588bb;
 border:1px solid #99ccff;
 border-radius:4px;
}

ul.use-spectrum .spectrum-box {
 position:relative;
 width:255px;
 font-size:1em;
 padding:2px 0px;
 height:1.2em;
 overflow:hidden;
}

ul.use-spectrum .spectrum-box .spectrum {
 position:absolute;
 left:0px;
 top:-2px;
 margin-top:20px;
 display:block;
 font-size:1px;
 width:1px;
 height:1px; /* set to 50px for a thick line, 1px for a thin line, etc. */
 overflow:hidden;
 background-color:#FEFEFC;
}

ul.playlist {
 list-style-type:none;
 margin:0px;
 padding:0px;

}

ul.playlist li {
	/* assume all items will be sounds rather than wait for onload etc. in this example.. may differ for your uses. */
 position:relative;
	display:block;
	width:auto;
	font-size:100%;
	color:#666;
	padding-top:6px;
	padding-bottom:6px;
	padding-left:30px;
	padding-right:5px;
	border:none;
	/* letter-spacing:-1px; ZOMG WEB X.0. ;) */
	background-color:#F3F1EB;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-transition-property: hover;
	-webkit-transition: background-color 0.15s ease-in-out;
	-moz-transition: background-color 0.15s linear 0s; /* firefox 4 */
	-o-transition-property: background-color; /* opera 10.5 */
	-o-transition-duration: 0.15s;
	margin-top: 5px;
	margin-bottom: 5px;
	background-image:url(../img/audio-headphones.png);
	background-position:10px 50%;
	background-repeat:no-repeat;

}

ul.playlist li a {
 display:block;
 text-decoration:none;
 font-weight:normal;
 color:#000;
 font-size:100%;
 outline:none;
 position:relative;
 z-index:2;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_paused,
ul.playlist li.sm2_playing a {
	color:#000;
	border-radius:3px;
}

ul.playlist li:hover {
	background-color:#e2dccf;
}

ul.playlist li:hover a {
 color:#333;
}

ul.playlist li.sm2_playing,
ul.playlist li.sm2_playing:hover {
	background:#cbc0a9 url(../img/audio-play.png) no-repeat 10px 50%;
}

ul.playlist li.sm2_paused {
	background:#E2DCCF url(../img/audio-pause.png) no-repeat 10px 50%;
}

ul.playlist li.sm2_playing:hover a,
ul.playlist li.sm2_paused a {
	color:#333;
}

ul.playlist li .controls {
 display:none;
}

ul.playlist li .peak,
ul.playlist.use-peak li .peak {
 display:none;
 position:absolute;
 top:0.55em;
 right:0.5em;
}

ul.playlist li.sm2_playing .controls,
ul.playlist li.sm2_paused .controls {
 position:relative;
 display:block;
}

ul.playlist.use-peak li.sm2_playing .peak,
ul.playlist.use-peak li.sm2_paused .peak {
 display:inline;
 display:inline-block;
}

ul.playlist.use-peak li .peak {
 display:none; /* IE 7 */
}

ul.playlist li.sm2_paused .controls {
 background-color:#666;
}

ul.playlist li:hover .controls .statusbar {
 position:relative;
 cursor:ew-resize;
 cursor:-moz-grab;
 cursor:grab;
}

ul.playlist li.sm2_paused .controls .statusbar {
 background-color:#ccc;
}

ul.playlist li .controls {
	position:relative;
	margin-top:0.25em;
	margin-bottom:0.25em;
	background-color:#CCC;
}

ul.playlist li .controls .statusbar {
	position:relative;
	height:0.5em;
	background-color:#999;
	border:2px solid #FEFEFC;
	border-radius:2px;
	overflow:hidden;
	cursor:-moz-grab;
	cursor:grab;
}

ul.playlist li .controls.dragging .statusbar {
 cursor:-moz-grabbing;
 cursor:grabbing;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading,
ul.playlist li .controls .statusbar .annotation {
 position:absolute;
 left:0px;
 top:0px;
 height:0.5em;
}

ul.playlist li .controls .statusbar .position {
	background-color:#333;
	border-right:3px solid #9D261D;
	border-radius:3px;
}

ul.playlist li.sm2_paused .controls .statusbar .position {
 background-color:#666;
 border-color:#666;
}

ul.playlist li .controls .statusbar .loading {
 background-color:#eee;
}

ul.playlist li .controls .statusbar .position,
ul.playlist li .controls .statusbar .loading {
 width:0px;
}

ul.playlist li.sm2_playing a.sm2_link,
ul.playlist li.sm2_paused a.sm2_link {
 margin-right:4.5em; /* room for timing stuff */
}

ul.playlist li .timing {
	position:absolute;
	display:none;
	text-align:right;
	right:1em;
	top:1em;
	width:auto;
	height:1em;
	padding:3px 5px;
	background-color:#333;
	border:1px solid #999;
	border-radius:4px;
	letter-spacing:0px;
	font:44% monaco,"VT-100","lucida console",courier,system;
	line-height:1em;
	vertical-align:middle;
	color:#FEFEFC
}

ul.playlist.use-peak li .timing {
 right:4.25em;
}

ul.playlist li:hover .timing {
 z-index:2;
}

ul.playlist li .timing div.sm2_timing {
 margin:0px;
 padding:0px;
 margin-top:-1em;
}

ul.playlist li.sm2_playing .timing,
ul.playlist li.sm2_paused .timing {
 display:block;
}

ul.playlist li.sm2_paused .timing .sm2_position {
 text-decoration:blink; /* hee hee. first actual appropriate use? :D */
}

ul.playlist li.sm2_paused .timing,
ul.playlist.use-peak li.sm2_paused .peak {
	background-color:#666;
	border-color:#ccc;
}

/* peak data */

/* ul.playlist ... */

ul.playlist.use-peak li .peak {
 display:none;
 zoom:1;
 border:1px solid #99ccff;
 padding:2px;
 height:0.55em;
 border-radius:4px;
 background-color:#5588bb;
 width:0.8em;
 height:0.55em;
 margin-top:-3px;
}

ul.playlist.use-peak li .peak-box {
 position:relative;
 width:100%;
 height:0.55em;
 overflow:hidden;
}

ul.playlist li .peak .l,
ul.playlist li .peak .r {
 position:absolute;
 left:0px;
 top:0px;
 width:7px;
 height:50px;
 background:#FEFEFC;
 border:1px solid #FEFEFC;
 border-radius:1px;
 margin-top:1em;
}

ul.playlist li .peak .l {
 margin-right:1px;
}

ul.playlist li .peak .r {
 left:10px;
}

#control-template {
 display:none;
}