@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; 
}

/* ONLINE EXAMPLE STYLES */

body {background: #181818 url("../img/bkg-pat.jpg") repeat;font-family:Arial;font-size:12px;color:#656565; }
a{color:#656565;text-decoration:underline;}	
a:hover{text-decoration:none;}	
.holder{margin: 0px auto;width: 960px;position:relative;min-height:700px;}
#header{margin-top:20px;border-bottom:1px solid #454545;font-size:30px;color:#454545;}
.btn-holder{text-align:center;margin:30px 0px;}
#news{
	margin: 30px 0px 20px 0px;
	color: #FFF;
	font-size: 20px;
}
.row { clear:both; overflow:hidden;margin-top:0px;}
.hol { width: 220px; float: left;margin-right:26px;}
.last{margin:0px;}
.home-thumb img{border:5px solid #555555;}
.home-thumb img:hover{border:5px solid #454545;}
.home-post-title{
	font-size: 16px;
	margin: 10px 0px;
	color: #FFFFFF;
}
#footer{border-top:1px solid #454545;padding-top:10px;margin-top:20px;clear:both; overflow:hidden;}
#copy{width: 300px; float: left;}

.button
	{
	
	padding: 5px 16px;
	text-align: center;
	text-decoration:none;
	margin-right:20px;
	font-weight: bold;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
	border-style: solid;
    border-width: 1px;
	color: #513b26;
	border-color: #128AAD #128AAD #128AAD;
	background: #01B0BE;
	background: -webkit-gradient(linear, left top, left bottom, from(#02D1E3), to(#01B0BE));
	background: -moz-linear-gradient(top, #02D1E3,  #01B0BE);
	background: linear-gradient(#02D1E3, #01B0BE);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	 }
.button:hover
	{border-color: #128AAD #128AAD #128AAD;
	background: #02D1E3;
	background: -webkit-gradient(linear, left top, left bottom, from(#01E1F3), to(#02D1E3));
	background: -moz-linear-gradient(top, #01E1F3,  #02D1E3);
	background: linear-gradient(#01E1F3, #02D1E3);
	
	}

/* 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; 
	
	
	-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;
}

/* 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;
	background:#0c0c0c;
}

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

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

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

}
.player_trackInfo .track {
  top: 2px;
}
.player_trackInfo .track:before {
  content: 'Track: ';
	display:inline-block;
	padding-right:2px;
	
	font-family:"uni";
    font-size:8px;
    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:"uni";
font-size:8px;
color:#dedede;
}



/* 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:absolute;
	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:25px;
	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:45px;
	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:65px;
	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:85px;
	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:105px;
	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:125px;
	width:15px;
	height:15px;
}

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

#componentWrapper .player_volume{
	position:absolute;
	top:13px;
	left:168px;
	width:18px;
	height:16px;
}

/* player volume, serves as hit as well */
#componentWrapper .volume_seekbar{
	position:absolute;
	top:14px;
	right:5px;
	/* for hit */
	width:58px;
	height:14px;
	/*background:green;*/
}

#componentWrapper .volume_bg{
	position:relative;
	top:5px;
	left:5px;
	width:50px;
	height:4px;
	background: #161616;
    -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 .volume_seekbar:hover .volume_bg {
    background: #636363;
}    


#componentWrapper .volume_level{
	position:absolute;
	top:5px;
	left:5px;
	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 .volume_seekbar:hover .volume_level {
    background: #EBEBEB;
}    

#componentWrapper .player_volume_tooltip{
	position:absolute;
	top:61px;
	right:23px;
	/* left is set in code */
	width:35px;
	height:18px;
	background:#333;
	display:none;
	z-index:1000;
	-moz-box-shadow: 1px 1px 1px #222;
	-webkit-box-shadow: 1px 1px 1px #222;
	box-shadow: 1px 1px 1px #222;
}

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

/* 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:224px;
	background:#0c0c0c;
	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:110px;
	
}

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






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

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

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

background:#1c1c1c;
padding-top:14px;
padding-left:5px;
margin-bottom:2px;
	
}
.playlistItem a img {
	position:absolute;
	top:5px;
	left:30px;
	}
	
.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;
}
.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:"Song:";
	display:inline-block;
	
	width:45px;
	}
	
.playlistItem a span.song {
	position:absolute;
	left:70px;
	top:22px;
	}

/* adjust rollover on playlist item */
#componentWrapper .componentPlaylist .playlistItem a:hover{
	color:#e5e5e5;
	background:#2d2d2d;
}

#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;
}

/* 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;
}