@font-face {
    font-family: 'uni';
    src: url('../type/uni.eot');
    src: url('../type/uni.eot?#iefix') format('embedded-opentype'),
         url('../type/uni.woff') format('woff'),
         url('../type/uni.ttf') format('truetype'),
         url('../type/uni.svg#uni') format('svg');
    font-weight: normal;
    font-style: normal;

}

*{
	margin:0;
	padding:0;
	border:0;
    outline: none;
    
}

a{ 
	text-decoration: none; 
	
}


/*fix for online example*/
.player_volume_tooltip_value{color:#0c0c0c;}

/* END ONLINE EXAMPLE STYLES */	

/* wrapper for player and playlist */
#componentWrapper{
	/*	position:absolute;
	top:20%;	
	left:40%;*/
	position:relative;
	margin-left:350px;
	margin-top:50px;
}

/* holder for audio code */	
#componentWrapper .audioHolder{
	position:absolute;
}	

/* player holder */
#componentWrapper .playerHolder{
	position:relative;
	top:0px;
	left:0px;
	width:251px;
	height:61px;
	background:#0c0c0c; 
	background-image:url(verlauf-oben.jpg);
	
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
}

/* player audio thumb */
#componentWrapper .player_thumb{
	position:absolute;
	top:4px;
	left:4px;
	width:40px;
	height:40px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
	border:1px solid #444444;
	visibility:hidden;
}

/* player audio name mask for the name scroll function. Set width of the scrolling mask here. Aslo adjust height if neccesarry. */
#componentWrapper .player_mediaName_Mask{
	position:relative;
	top:12px;
	left:52px;
	width:100px;
	height:25px;
	overflow:hidden;
	
}

/* player audio name */
#componentWrapper .player_mediaName{
	position:absolute;
	top:5px;
	left:0px;
	white-space: nowrap;
	
	
}
.player_trackInfo {
  position: absolute;
  left: 10px;
  top: 12px;
  color: white;
}
.player_trackInfo img {
	display:none;
	}
	
.player_trackInfo .song {
    
    display:block;
    font-family:Arial;
    font-size:11px;
    color:#a1a1a1;
    position:relative;
    top:0px;
}

.player_trackInfo .artist, .player_trackInfo .track {
	display:block;
	position:relative;
	top:16px;
	font-family:arial;
    font-size:11px;
    color:#dedede;

}
	
.player_trackInfo .artist:before {
	content:"Artist:";
	display:inline-block;
	padding-right:2px;
	
	font-family:arial;
    font-size:11px;
    color:#a1a1a1;

}
.player_trackInfo .track {
  top: 2px;
}
.player_trackInfo .track:before {
  content: 'Track: ';
	display:inline-block;
	padding-right:2px;
	
	font-family:arial;
    font-size:11px;
    color:#a1a1a1;
}





.controls_holder {
	background:url(../data/controls_bg.jpg) repeat-x left center; 
	position:relative;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
	margin-top:3px;
	width:251px;
	height:41px;
	display:block;
	/*float:left;*/
	
	}

/* player audio time */
#componentWrapper .player_mediaTime{
	position:absolute;
	top:10px;
	right:5px;
	
	cfont-family:arial;
font-size:8px;
color:#dedede;
visibility:hidden;
}



/* player holder for (previous,play/pause,next) buttons */
#componentWrapper .player_controls{
	position:relative;
	
}

.tt {
	
	font-family: 'Terminal Dosis', sans-serif;
	font-size:10px;
	color:#fff;
	background:#333;
	
	position:absolute;
	line-height:18px;
	padding:0px 4px 0px 4px;
	z-index:10000;
	height:18px;
	top:-25px;
	left:-0px;
	display: none;
	opacity:0;
	-moz-opacity:0;
	-webkit-opacity:0;
	-o-opacity:0;
	
	
	transition: opacity .5s;
-moz-transition: opacity .5s; /* Firefox 4 */
-webkit-transition: opacity .5s; /* Safari and Chrome */
-o-transition: opacity .5s; /* Opera */

-moz-box-shadow: 1px 1px 1px #222;
	-webkit-box-shadow: 1px 1px 1px #222;
	box-shadow: 1px 1px 1px #222;

}
	
	
	
	


/* player previous button */
#componentWrapper .controls_prev{
	position:relative;
	top:13px;
	left:5px;
	width:15px;
	height:15px;
	
}



.controls_prev:hover .tt#previous {
	display:block;
	opacity:1;
	-moz-opacity:1;
	-webkit-opacity:1;
	-o-opacity:1;
	}

/* player play/pause button */
#componentWrapper .controls_toggle{
	position:absolute;
	top:13px;
	left:22px;
	width:15px;
	height:15px;
}

.controls_toggle:hover .tt#pp {
	display:block;
	opacity:1;
	-moz-opacity:1;
	-webkit-opacity:1;
	-o-opacity:1;
	}
    
/* player next button */
#componentWrapper .controls_stop{
	position:absolute;
	top:13px;
	left:39px;
	width:15px;
	height:15px;
}

.controls_stop:hover .tt#stop {
	display:block;
	opacity:1;
	-moz-opacity:1;
	-webkit-opacity:1;
	-o-opacity:1;
	}
    
/* player next button */
#componentWrapper .controls_next{
	position:absolute;
	top:13px;
	left:56px;
	width:15px;
	height:15px;
}

.controls_next:hover .tt#next {
	display:block;
	opacity:1;
	-moz-opacity:1;
	-webkit-opacity:1;
	-o-opacity:1;
	}

/* player loop button */
#componentWrapper .player_loop{
	position:absolute;
	top:13px;
	left:73px;
	width:15px;
	height:15px;
}

.player_loop:hover .tt#repeat {
	display:block;
	opacity:1;
	-moz-opacity:1;
	-webkit-opacity:1;
	-o-opacity:1;
	}

/* player shuffle button */
#componentWrapper .player_shuffle{
	position:absolute;
	top:13px;
	left:90px;
	width:15px;
	height:15px;
}

.player_shuffle:hover .tt#shuffle{
	display:block;
	opacity:1;
	-moz-opacity:1;
	-webkit-opacity:1;
	-o-opacity:1;
	}

/* player toggle playlist button */
#componentWrapper .player_togglePlaylist{
	position:absolute;
	top:13px;
	left:107px;
	width:15px;
	height:15px;
}

.player_togglePlaylist:hover .tt#playlist {
	display:block;
	opacity:1;
	-moz-opacity:1;
	-webkit-opacity:1;
	-o-opacity:1;
	}


/* player progress, serves as hit as well */
#componentWrapper .player_progress{
	position:absolute;
	top:46px;
	left:4px;
	/* for hit */
	width:243px;
	height:14px;
	/*background:green;*/
}

#componentWrapper .progress_bg{
	position:absolute;
	top:5px;
	left:0px;
	width:243px;
	height:4px;
	background:#0c0c0c;
    -moz-transition-property: background;
    -moz-transition-duration: 0.5s;
    -moz-transition-timing-function: ease;    
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
}
#componentWrapper .player_progress:hover .progress_bg {
    background: #636363;
}

#componentWrapper .load_level{
	position:absolute;
	top:5px;
	left:0px;
	width:0px;
	height:4px;
	/*background:#0c0c0c;*/
}

#componentWrapper .progress_level{
	position:absolute;
	top:5px;
	left:0px;
	width:0px;
	height:4px;
	background:#636363;
    -moz-transition-property: background;
    -moz-transition-duration: 0.5s;
    -moz-transition-timing-function: ease;    
    -webkit-transition-property: background;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
}
#componentWrapper .player_progress:hover .progress_level {
    background: #EBEBEB;
}

#componentWrapper .player_progress_tooltip{
	position:absolute;
	top:28px;
	/* left is set in code */
	width:60px;
	height:18px;
	background:#333;
	display:none;
	
	-moz-box-shadow: 1px 1px 1px #222;
	-webkit-box-shadow: 1px 1px 1px #222;
	box-shadow: 1px 1px 1px #222;
}

#componentWrapper .player_progress_tooltip_value{
	position:absolute;
	top:2px;
	/* left is set in code */
	color:#ffffff;
	font-family: 'Terminal Dosis', sans-serif;
	font-size:10px;
}






/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/





/* playlist holder */	
#componentWrapper .playlistHolder{
	position:relative;
	/*top:47px;*/
    top: 3px;
	width:251px;
	height:104px;
	background:#0c0c0c;
	background-image:url(verlauf-playlist.jpg);
	display:none;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-o-border-radius:4px;
	border-radius:4px;
}

#componentWrapper .componentPlaylist{
	position:absolute;
	top:5px;
	left:5px;
	width:240px;
	height:90px;
	
}

/* playlist holder for playlist items */	
#componentWrapper .playlist_inner{
	position:relative;
	top:0px;
	left:0px;
	height:93px;
}






/* playlist items */	
#componentWrapper .componentPlaylist .playlistItem{
	
	
	color:#ffffff;
   
	
	width:231px;
	height:35px;
	list-style:none;
	
	
}

#componentWrapper .componentPlaylist .playlistItem a{
	position:relative;
	top:0px;
	left:0px;
	
	clear:left;
	display:block;
	
	color:#a1a1a1;
	font-family:arial;
font-size:10px;

	
	width:226px;
	height:20px;
	list-style:none;

background:#1c1c1c;
background-image:url(button2.jpg);

padding-left:5px;
padding-top:8px;
padding-bottom:5px;
	
}





.playlistItem a img {
	position:absolute;
	top:0px;
	left:10px;
	
	}
	
.playlistItem a span.artist, .playlistItem a span.song {
	display:block;
	
	
	}
span.duration {
  display: none;
}
.playlistItem a span.duration {
  display: block;
  float: right;
  margin: 0 4px 0 0;
  visibility:hidden;
}
.playlistItem a span.artist {
	position:absolute;
	left:70px;
	top:-5px;
	
	
	}
	
.playlistItem a span.artist:before {
	content:"Author:";
	display:inline-block;

	width:45px;
	}
	
.playlistItem a span.song:before {
	content:"";
	display:inline-block;
	width:0px;
	
	
	
	}
	
.playlistItem a span.song {
	position:absolute;
	left:30px;
	top:8px;
	width:200px;
	}

/* adjust rollover on playlist item */
#componentWrapper .componentPlaylist .playlistItem a:hover{
	color:#e5e5e5;
	background:#2d2d2d;
	background-image:url(button1.jpg);
}

#componentWrapper .componentPlaylist .playlistItem a:focus{
	color:#e5e5e5;
	background:#2d2d2d;
	
}


	



/* adjust disabled state on playlist item */
#componentWrapper .componentPlaylist a.playlistSelected {
	float:left;
	color:#e5e5e5;
	background:#292929;
	background-image:url(button3.jpg);
}

/* adjust normal state on playlist item */
#componentWrapper .componentPlaylist a.playlistNonSelected {
	float:left;
	color: #A1A1A1;
	
}


/* playlist item link (url) button */	
#componentWrapper .componentPlaylist .link{
	position:relative;
	padding-right:5px;
	top:-2px;
	right:8px;
	width:24px;
	height:24px;
	float:right;
	
}
					  
	
	

/* hidden playlist */	
#componentWrapper #playlist1, 
#componentWrapper #playlist2, 
#componentWrapper #playlist3, 
#componentWrapper #playlist4, 
#componentWrapper #playlist5, 
#componentWrapper #playlist6, 
#componentWrapper #playlist7,
#componentWrapper #playlist8, 
#componentWrapper #playlist9, 
#componentWrapper #playlist10{
	display:none;
	
}


/* for parsing feed xml */	
#componentWrapper .feedParser{
	display:none;
}		


.playerHolder .player_controls {
  position: absolute;
  top: 20px;
  left: 124px;

}