*{
 padding: 0;
 margin: 0;
}
body, html {
 margin:0;
 padding:0;
 color:navy;
 background-color: black;
 font-family: Arial, Helvetica, Verdana, sans-serif; 
 width:100%;
 height:101%;
 margin-bottom:1px;
 font-size: 13px;
 }

#wrap {
 width:840px;
 margin:0 auto;
 background-color: #CCCCFF;
 top:20;
}

#sidebar {
 float:left;
 width:215px;
 background-color: #CCCCFF;
 height: 100%;
}

#main {
 float:right;
 width:610px;
 background-color: #CCCCFF;
 padding-bottom: 20px;
 padding-right: 15px;
}
#footer {
 clear:both;
 padding:5px 10px;
 color: charcoal;
 font-size: 10px;
 background-color: gray;
 text-align: center;
}

#footer p {
 margin:0;
}

* html #footer {
 height:1px;
}
	
#splashimg {
 display: block;
 margin-left: auto;
 margin-right: auto;
 width: 400px;
 border: none;
 margin-top: 25px;
 margin-bottom: 25px;
}

.mainhead {
  font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-weight: bold;
 font-size: 24px;
 color: #c00000;
}

.sechead {
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-weight: bold;
 font-size: 20px;
 color: indigo;
}

.maindesc {
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 15px;
 color: navy;
}

#menu {
 position: relative;
 padding: 20px;
 width: 175px;

}

#menu li {
 background-image: url(images/fadeback.gif);
 background-repeat: repeat-x;
 height: 25px;
 list-style: none;
 vertical-align: middle;
 line-height: 25px;
 font-family: Verdana, Arial, Helvetica, sans-serif; 
}

#menu a {
 position: relative;
 padding-left: 10px;
 color: yellow;
 text-decoration: none;
 font-weight: bold;
 display: block;
 outline: 0;
 height: 100%;
 font-size: 13px;
}

#menu li a:hover {
 background: url(images/fadebackrev.gif) repeat-x;
}

.menuspacer {
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 4px;
 color: #CCCCFF;
}

#header {
 background-color: purple;
 height: 75px;
 line-height: 75px;
 vertical-align: center;
  font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-weight: bold;
 font-size: 35px;
 color: navy;
 padding-left: 25px;
}

#maintitle {
 padding-bottom: 10px;
 padding-top: 10px;
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-weight: bold;
 font-size: 25px;
 color: navy;
}

.biopic {
 float: left;
 padding-right: 25px;
 width: 300px;
}

.album {
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-weight: bold;
 font-size: 18px;
 padding-bottom: 25px;
 color: navy;
}

.ptitle {
 padding-top: 10px;
 padding-bottom: 10px;
 font-size: 15px;
 border: 1px solid blue;
 width: 350px;
 margin-bottom: 25px;
 text-align: center;
 background-color: tan;
}

.aimage {
 width: 350px;
}

#txt {
 position:absolute;
 left:0px;
 top:0px;
 z-index:1
}

#playerhandle {
 width: 265px;
 height: 25px;
 padding-left:2px;
 padding-right:0px;
 padding-top:2px;
 padding-bottom:2px;
 margin:2px;
 color:white;
 background-color:purple;
 font-weight: bold;
 border: 2px solid white;
}

#playerroot {
 float: left;
 width: 275px;
 height:275px;
 background-color: black;
 z-index:1000;
}

#listhandle {
 width:310px;
 height: 25px;
 padding-left:2px;
 padding-right:0px;
 padding-top:2px;
 padding-bottom:2px;
 margin:2px;
 color:white;
 background-color:purple;
 font-weight: bold;
 border: 2px solid white;
}

#listroot {
 float: right;
 width:320px;
 height:290px;
 background-color: black;
 z-index:2;
}

#writeroot {
 overflow: auto;
 width:320px;
 height:250px;
 background-color: black;
}

.playlistlo {
  width: 298px;
  height:75px;
  background-image:url('images/fadeback.gif');
  FONT:12px Verdana,Arial,Helvetica,sans-serif;
  VERTICAL-ALIGN:top;
  TEXT-TRANSFORM:none;
  COLOR:#ffffff;
  TEXT-ALIGN: left;
  border: none;
 }

.playlisthi { 
  width: 298px;
  height:75px;
  FONT:12px Verdana,Arial,Helvetica,sans-serif;
  TEXT-TRANSFORM:none;
  COLOR:yellow;
  background-image:url('images/fadebackrev.gif');
  border: none;
 }

 /*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

buttonbody {text-align:center;}
a.squarebutton{
background: transparent url('images/square-green-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;

}

a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: black; /*button text color*/
}

a.squarebutton span{
background: transparent url('images/square-green-right.gif') no-repeat top right;
display: block;
color:black;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

a.menubutton{
background: transparent url('images/square-green-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;

}

a:link.menubutton, a:visited.menubutton, a:active.menubutton{
color: black; /*button text color*/
}

a.menubutton span{
background: transparent url('images/square-green-right.gif') no-repeat top right;
display: block;
color:black;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
width:150px;
}

a.menubutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.menubutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

a.designbutton{
background: transparent url('images/square-green-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 9px Arial; /* Change 12px as desired */
line-height: 9px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 17px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;

}


a:link.designbutton, a:visited.designbutton, a:active.designbutton{
color: black; /*button text color*/
}

a.designbutton span{
background: transparent url('images/square-green-right.gif') no-repeat top right;
display: block;
color:black;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.designbutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.designbutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}


.wrapperinside {
width: 306px;
padding:0px;
background-color:lightyellow;
text-align:center;
margin: 0 auto;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: auto; /*See: http://www.quirksmode.org/css/clearing.html */
width: 75%;
border: 1px solid red;
padding-bottom:20px;
background-color:lightyellow;
text-align:center;
margin: 0 auto;
color:red;
}

.designinside {
width: 192px;
padding:0px;
text-align:center;
margin: 0 auto;
overflow:auto;
}

.designwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: auto; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
padding-bottom:20px;
text-align:center;
margin: 0 auto;
}

.timg img {
margin: 0 auto;
display:block;
text-align: center;
width: 150px;
height: 150px;
text-decoration: none;
border-style: none;
outline: 0;
}