/* CSS Document */

body {
  	height:100%; 
	width:100%;
	margin:0px; 
	padding:0px;
	text-align: justify;
	color:#ffff00;
	font-family: Arial, Helvetica, sans-serif; 
  	font-size:10pt;
	background:#333333;	
   overflow:auto;
}

fieldset {
   border:1px solid #ffff00;
}
   
#container {  
	width:800px;
	margin:0px auto; /* Center align the whole page (horizontally) */
   padding: 10px;
}
   
#logo_banner {
   position: relative;
   float: left;
   width: 480px;
}
#search_banner {
   position: relative;
   float: right;
   width: 270px;
}      

/* ---- PLAYER ---- */   
#player_field {
   background: black;
   position: relative;
   overflow: hidden;
   padding: 0px;
   float: left;
   width: 480px;
   height: 360px;
   font-family: Arial, Helvetica, sans-serif; 
   font-size: 8pt; 
   font-weight: normal;
   color: #33a02b;
} 
#player_field a:link{text-decoration: none; color: #ffff00; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: normal}
#player_field a:visited {text-decoration: none; color: #ffff00; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: normal}
#player_field a:active {text-decoration: none; color: white; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: normal} 
#player_field a:hover {text-decoration: underline; color: white; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: normal}
/* ------------------------------------------------------------- */

/* --- PLAYLIST ------------------------------------------------ */
#playlist_tabs {
   float: right;
   /*height: 22px;*/
}
#playlist_field {
   background: black;
   border-bottom:1px solid #ffff00;
   border-left:1px solid #ffff00;
   border-right:1px solid #ffff00;
   overflow-y: scroll;
   overflow-x: hidden;
   float: right;
   width: 270px;
   height: 339px;
   font-family: Arial, Helvetica, sans-serif; 
   font-size: 8pt; 
   font-weight: normal;
   color: #33a02b;
}
.playlistlo { text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; BACKGROUND-COLOR:white}
.playlisthi { text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; BACKGROUND-COLOR:#c6ef74}
/* ------------------------------------------------------------- */

/* --- FOOTER -------------------------------------------------- */
#footer {
   clear:both;
   text-align: center;
   font-family: Arial, Helvetica, sans-serif; 
   font-size: 8pt; 
   font-weight: normal;
   color: black;
}  
#footer a:link{text-decoration: none; color: white; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: normal}
#footer a:visited {text-decoration: none; color: white; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: normal}
#footer a:active {text-decoration: none; color: #ffff00; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: normal} 
#footer a:hover {text-decoration: none; color: #ffff00; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: normal}
/* ------------------------------------------------------------- */

/* --- GENERAL STYLES ------------------------------------------ */
.breaker {
   width: 100%;
   clear:both;
} 
.center {
   position: absolute;
   width: 100%;
   margin:0px auto;
   vertical-align:middle; 
	text-align:center;
} 
.left {
   float:left;
	text-align:left;
}
.right {
   float:right;
	text-align:right;
   vertical-align: bottom;
}
.invisible {
   display: none;
}
a:link{text-decoration: none; color: white; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: normal}
a:visited {text-decoration: none; color: white; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: normal}
a:active {text-decoration: none; color: #ffff00; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: normal} 
a:hover {text-decoration: underline; color: #ffff00; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-weight: normal}
/* ------------------------------------------------------------- */

/* --- ROUND CORNERS --------------------------------------------*/ 
.top-left {
   background-image: url('../images/tvp_corners.png');
   background-position: 0% 0px;
   background-repeat: no-repeat;
   height: 15px;
   padding-left: 10px;
   padding-right: 10px;
   font-size: 2px;
}
.top-center {
   border-top: 2px solid #ffff00;
   background: #009900;
   height: 13px;
   margin-top: -15px;
   margin-right: 15px;
   margin-left: 15px;
   font-size: 2px;
}
.top-right {
   background-image: url('../images/tvp_corners.png');
   background-position: 100% 0px;
   background-repeat: no-repeat;
   float: right;
   height: 15px;  
   width: 15px;
   margin-top: -15px;
   font-size: 2px;
}
.bottom-left {
   background-image: url('../images/tvp_corners.png');
   background-position: 0% -15px;
   background-repeat: no-repeat;
   height: 15px;
   margin-right: 15px;
   padding-left: 10px;
   padding-right: 10px;
   font-size: 2px;
}
.bottom-center {
   border-bottom: 2px solid #ffff00;
   background: #009900;
   height: 13px;
   margin-top: -15px;
   margin-right: 15px;
   margin-left: 15px;
   padding-left: 10px;
   padding-right: 10px;
   font-size: 2px;
}
.bottom-right {
   background-image: url('../images/tvp_corners.png');
   background-position: 100% -15px;
   background-repeat: no-repeat;
   float: right;
   height: 15px; 
   width: 15px;
   margin-top: -15px;
   font-size: 2px;
}
.inside {
   border-left: 2px solid #ffff00;
   border-right: 2px solid #ffff00;
   background: #009900;
   color: #000000;
   padding-left: 15px;
   padding-right: 15px;
   padding-bottom: 0px;
}
.notopgap {
   margin-top: 0;
}
.nobottomgap {
   margin-bottom: 0;
}
/* ------------------------------------------------------------- */

/* --- TAB STYLES ---------------------------------------------- */
/* - inspiration from Dynamic Drive www.dynamicdrive.com/style - */
.tabs {
   width: 272px;
   padding: 4px 0px 3px 0px;
   margin: 0px;
   border-bottom: 1px solid #ffff00;
   list-style-type: none;
   text-align: center; /* left, center, or right align */
   font-size:8pt;
}
.tabs li{
   display: inline;
   margin: 0px;
}
.tabs li a{
   text-decoration: none;
   padding: 3px 7px;
   margin-right: 2px;
   margin-left: 2px;
   border: 1px solid #ffff00;
   border-bottom: none;
   background-color: black;
   color: #ffff00;
}
.tabs li a:visited{
   color: #ffff00;
}

.tabs li a:hover{
   background-color: #ffff00;
   color: black;
}
.tabs li a:active{
   color: black;
}
.tabs li.selected a{ /*selected tab effect*/
   position: relative;
   top: 1px;
   padding-top: 4px;
   background-color: black;
   color: white;
}
/* ------------------------------------------------------------- */