body { 
margin:3px; 
font-size: 80%;
font-family: Verdana,Arial,Helvetica,sans-serif;
} 

h1, h2, h3{
margin-top:-1px; 		
font-size:1em;
margin-bottom:0px;}

/* you wouldn't be able to float titlebar left and center the whole lot without main around it.  If you can't float titlebar left, opera and firefox display it empty */

#titlecontainer
{		width:100%;
			text-align: center;
		}

#main {
		width:700px;
		margin-right:auto;
		margin-left:auto;
		}

.titlebar{

			width: 698px;  
			float:left;	
			margin-bottom:3px;
		}
		
.dotty {
	border:1px solid black;	
	background-image: url('/80s/images/bg06_anim2.gif')
}

/* for some reason all goes wrong if this is a class instead of an id */		
#globalnav
{
			border-width: 1px; 
			width: 698px;  
			float:left;
			background-color:#FFFF00;
}
#globalnav ul
{margin-top:0;}
#globalnav li
{display: inline;list-style-type: none;}	
.menunotselected{margin-left:30px; float:left; position: relative; bottom: -1px; border-bottom:solid 1px #999999;}	
.menuselected{margin-left:30px; float:left; position: relative; bottom: -1px; 
border-bottom:dotted 1px white;}	
	
#contentleft {
		width:177px;
		float:left;		
		}
/* see http://www.askthecssguy.com/2006/11/inline_images_showing_a_gap_of_1.html */
img {vertical-align:bottom; 
	border: 0}

.boxerheading
{
	width:175px;
	text-align:center; 
	background-image: url(/80s/images/yellback2.gif);
	font-family:Arial,Helvetica,sans-serif;	
	border-top:1px solid darkgray;	
	border-left:1px solid darkgray;
	border-right:1px solid darkgray;
	padding-bottom: 2px;			
}	

.boxerbody
{
	border:solid 1px darkgray;
	background-image: url(/80s/images/bg-main.jpg);	
	margin-bottom:4px;
	color:white;
	font-size:.8em;
}

.boxerbody ul
{
padding-top:0px;
margin-top:0px;
margin-bottom:2px;
}

.boxerbody2
{
	border:solid 1px darkgray;		
	background-image: url(/80s/images/bg-main2.jpg);	
}
	
		
#contentcenter {
		width:351px;
		float:left;
		margin-bottom:15px;
		margin-left: 5px;
		margin-right: 5px;
		}

.greenbox{
		width:337px;
		padding:10px 6px;		
		border-left:solid 1px;	
		border-right:solid 1px;
		background-image: url(/80s/images/bg-main3.jpg);		
		font-family:Arial,Helvetica,sans-serif;			
}


.bluebox2{
		width:352px;
		padding:6px;			
		font-size:.9em;
		text-align:center;	
		float:left;	
}		

.pinkboxtop
{
		width:337px;
		padding: 3px 6px;				
		border: solid 1px; 	
		text-align:center;
		background-image: url(/80s/images/yellback.gif);
		float:left;	
		font-family:Arial,Helvetica,sans-serif;		 		
}	

.pinkboxbot
{
		width:337px;
		padding: 6px;
		border: solid 1px; 						
		font-size:.9em;
		text-align:center;
		background-image: url(/80s/images/yellback2.gif);
		float:left;	
}	
.copyright
{	
	text-align:center;
	font-size:.7em;
	background-color:#FFFFFF;

}	

#contentright {
		width:154px;
		padding:0px;
		float:left;
		margin-bottom:15px;		
		}
		
#usbox
{
	color:#000000;
	text-decoration:none;
	font-size:.8em;
	background-image: url(/80s/images/usflag4.jpg);
	background-repeat:no-repeat;		
	padding:2px;
	border:solid gray 1px;
	margin-bottom: 2px;
}	

#chartcontent
{

	float:left
}	
		
.contentleftbox {
		width:173px;
		padding:1px;
		border:solid 1px #999999;  
		float:left;
		margin-top:4px;	
		background:#CCFFFF;		
		}

.contentleftbox2{
		width:175px;
		padding:0px;
		border:solid 1px #999999;  
		float:left;
		margin-top:2px;	
		background:#CCFFCC;		
		}
		
/* footer stuff */	
#footer
{
border:solid 1px #999999;  
background-color:#D1E0FF;
margin-bottom:1px;
padding:2px;
width:698px;
float:left;
}
#footer .lf
{
float:left;width: 145px;text-align:left;
}
#footer .rf
{
float:left;width: 145px;text-align:right;
}						
#footer .cf
{
float:left;width: 396px;text-align:center;
}		

.floatright
{
	float:right;
}

.floatleft
{
	float:left;
}

#contentleft li.levelone
{
	list-style-type: none;
	margin-left:-35px;
	color:red;
		font-size:.9em;

}

#contentleft li.levelone a
{
	text-decoration:none;

}

#contentleft  li.leveltwo
{
	list-style-type: none;
	margin-left:-25px;
	color:#0000CC;
	font-size:1em;
	/* margin-top:-3px; breaks ie6 div box around it*/
}

#contentleft li.draglist
{
	list-style-type: none;
	margin-left:-35px;
	margin-top:5px;
	cursor: n-resize;
}

/* next 3 are for the input form */
div.row {
  clear: both;
  padding: 10px;
  text-align:center;
  }
  
div.rowleft {
  clear: both;
  padding: 10px;
  text-align:left;
  }
  
div.row span.label {
  float: left;
  width: 90px;
  text-align: right;
  margin-right:10px;
  padding-bottom: 5px;
  }
  
div.row span.formw {
  float: left;
  text-align: left;
  margin-left:10px;
  } 
       
  
  .starname
{
	font-size:1.1em;
}

.boxeditem
{
		background:#fff;
		width:356px;
		padding:3px;
		border-width: 1px; 
		border-style: solid; 
		border-color:#ffcccc;
		text-align:center;
		float:left;
		/* need the underscore cos it's ie only css and it stops css validating */
		/* see http://www.positioniseverything.net/explorer/expandingboxbug.html */
		_word-wrap: break-word;		
}


.smalltext
{
	font-size:.9em;
}

.roundchart
{
	background-color:#DDE8F5;
	float:left;	
	border-left: 1px solid gray;
	border-right: 1px solid gray;	
	color:#000000;
	font-size:.8em;
	
}
.roundchart .top
{
	border-top: 1px solid gray;
}

.roundchart2
{
	background-color: #C6DBF5;
	float:left;	
		color:#000000;
	border-left: 1px solid gray;
	border-right: 1px solid gray;			
	font-size:.8em;		
}

.roundchart3
{
	background-color: #DDE8F5;
	float:left;	
		color:#000000;
	border-left: 1px solid gray;
	border-right: 1px solid gray;	
	border-top: 	1px solid gray;	
	font-size:.8em;	
}

.roundchart4
{
	/* background-image: url(/80s/images/lightbluebg4.gif); */
	background-color: #C6DBF5;
	float:left;	
		color:#000000;
	border-left: 1px solid gray;
	border-right: 1px solid gray;	
	border-bottom: 	1px solid gray;	
	font-size:.8em;	
}
.chartnumber
{
	float:left;
	width:18px;
	padding:1px;

}

.chartsong
{
	float:left;
	width:125px;
	padding:2px

}
.chartflag
{
	float:left; 

	padding-right:3px;
	padding-top:3px;
}

.greyback1
{
	background-image: url(/80s/images/greyback1.gif);
}

.greytext
{
	color:#303030;	
}