/* CSS Document */



/* ------------------------------- formatting ----------------------------- */



body {

	margin: 0;

	}



h1 {

	font: bold 2.3em Arial, sans-serif;

	color: #836A99;

  margin-top: 0;

  letter-spacing: 0.5em;

   }

   

#topright h1 {

   position: absolute;

   padding : 5px;

   left : 403px;

	 font: bold 2.3em Arial, sans-serif;

	 color: #E76B42;

   top: 91px;

   letter-spacing:0.5em;

   z-index : 2;

   }

   

    

#topright h1.shadow {

   color: gray;

   top: 57px;

   margin-left: 0.3%;

   z-index : 1;

   }   



h2 {

	font: bold 1.8em Arial, sans-serif;

	color: #E76B42;

	}

	

h3 {

	font: italic bold large Arial, sans-serif;

	margin-top: 2px;

	}	



h4 {

	font: bold small Arial, sans-serif;

	color: #9C1A1E;

	margin-bottom: 2px;

	}



h5 {

	font: italic bold small Arial, sans-serif;

	color: #43616B;

	margin-top: 2px;

	}

	

p {

	font: 1em Verdana, sans-serif;

	}



#topleft p {

	text-align: center;

	}

	

#center p {

	font: 1em Verdana, sans-serif;

	line-height: 1.3;

	}

	



#sponsor p {

	color: #423577;

	}

	

#footer p {

	margin: 4px;

	text-align: center;

	color: gray;

	font: 0.8em Verdana, sans-serif;

	}



a {

	color: #E76B42;		

	}

a:hover {

	color: #836A99;	

	}



hr {

	color: #836A99;

	height: 1px;

	}

	

a img {

	border: 0 none;

	display: block;			/* removes extra space underneath caused by default text-alignment */

	}



div#topright a {

	display: block;			/* makes the background hover effect work in Mozilla */

	width: 153px;

	background-color: #FF9900;

	}



div#topright a:hover {

	background-color: #0000CC;

	}



div#clause p{

	margin: 4px;

	text-align: center;

	font: 0.8em Verdana, sans-serif;

	color: gray;

	}		

	

.tableheading{    

	background-color: #423577;  

	font: bold 1.5em Arial, sans-serif;

	color: #FFFFFF;

	}

	

.tablecontents1{

   background-color: #E0CCDC;

   font: 1.1em Verdana, sans-serif;

   }

   

.tablecontents2{

   background-color: #E3E1E1;

   font: 1.1em Verdana, sans-serif;

   }   

   

table {

  border: 1px solid gray;

  width: 100%;

  }		

  

td {

	padding: 4px 4px;

	border: 1px groove #FFFFFF;

	}  



.textbox {					/* Until IE understands <css> input[type="file"] { </css> It's better to define a new style then it is to re-define the input tag because radio buttons cop a beating */

	padding: 4px;

	font:  small Arial, sans-serif;

	color: #000;

	background-color: #fff;

	border: 1px solid #000;

	}



.button {

	padding: 2px;

	font: bold small Arial, sans-serif;

	color: #fff;

	background-color: #5C6F90;

	border: 1px solid #000;

	}



 



/* 



------------------------------- layout ----------------------------- 



Notes:



Do not mix px widths with % widths for margins, borders or padding because 

the total box width = set width + padding + border.  (It helps if you can add them together)



The box model hack is used to fix an bug in IE5-Win ...for an explanation from the guy that

wrote it go to http://www.tantek.com/CSS/Examples/boxmodelhack.html



IE6-Win will behave like IE5-Win  if you include <?xml version="1.0"?>  It is apparently

unneccessary so leave it out!



Left Col Widths:

 |  pad   |         width        |  pad   | 				

 ------------------------------------------					

 |   0    |          20%         |   0    |	

 

Center Margins:

 |  marg  |         width        |  marg  | 

 ------------------------------------------

 |   20%  |        (auto)        |   20%  |



Right Col Widths:

 |  pad   |         width        |  pad   | 				

 ------------------------------------------					

 |  1.5%  |          17%         |  1.5%  |				total width= 20%

 



*/





#topleft {

  left:40px;

  padding: 2px 2px 2px 50px;

	background: url(images/bgtop.png) repeat-x;

	border-bottom: 1px solid #836A99;

  }

   

#center {

	margin: 0 20% 0 20%;

	padding: 1% 3%;

	background: #fff url(images/tclef62.jpg) repeat-y center;

	color: #000;

	}



#left {
	position: absolute;
	padding: 0;
	top: 145px;
	width: 180px;
	background-color: #E0CCDC;
	color: #000;
	left: -3px;
	height: 379px;

	}



#otherleftstuff {

	width: 92%;

	padding: 10px 4% 70px 4%;

	}



	

.spacer {

	display: block;

	height: 1px;

	font: 1px /1 sans-serif;

	clear: both;

	}

		

div#topcontent {

	position: absolute;

	margin-left: 20%;

	top: 10px;

	font: bold 1em Arial, sans-serif;

   }

	

#topcontent h2, #topcontent p {

	display: inline;

	margin-right: 0.5em;

	}



#sponsor {
	position: absolute;
	width: 16.9%;
	height: 260px;
	margin-left: 80%;
	padding: 10px 1.5%;
	top: 141px;
	text-align: center;
	background-color: #E0CCDC;
	border-top: 1px solid #836A99;
	left: 40px;

	}

	



#footer {

	clear: both;

	border-top: 1px solid #836A99;

	border-bottom: 1px solid #836A99;

	background-color: #E0CCDC;

	color: #000;

	visibility: hidden;

	}



#bioright {

	float: right;

	width: 25%;

	padding: 1%;

	border: 4px dotted #5C6F90;

	color: 5C6F90;

	font-size: 1em;

	}

	

#bioleft {

	float: left;

	width: 20%;

	padding: 0% 10% 0% 0%;

	font-size: 1em;

	}

	

#PrintVer {

	float: right;

	width: 15%;

	padding: 1%;

	}

/* --------------------- Feature Image and Transparency Trick --------------- */





#featureimg {

	margin:0 0 0 20%;

	height: 145px;

	padding: 4px;

	background: #FFFFFF url(images/music2.jpg) no-repeat right top;

	border-bottom: 1px solid #B52D1F

	}	

	

/* 



-------------------------------- Navigation ------------------------------ 



*/





ul#mainnav {

	list-style: none;

	margin: 0;

	padding: 0;

	background-color: #E0CCDC;/*#CBACC5;*/

	}

		

ul#mainnav li {

	border-top: 1px solid #936A99;

	}



ul#mainnav li a {

	text-decoration: none;

	display: block;

	width: 88%;

	padding: 6px 6%;

	background-color: #423577;

	font: bold 1em Arial, sans-serif;

	color: #fff;

	}



ul#mainnav li a:hover {

	background-color: #E76B42;

	color: #eee;

	}

	

ul#mainnav ul.subnav {

	list-style: none;

	margin: 0;

	padding: 0;

	}



ul#mainnav ul.subnav li {

	border-top: 0 none;

	padding-left: 1.5em;

	}



ul#mainnav ul.subnav li a {

	padding: 1px;

	font: bold 0.9em Ariel, sans-serif;

	color: #423577;

	background-color: transparent;

	}



ul#mainnav ul.subnav li a:hover {

	color: #E76B42;

	background-color: transparent;

	text-decoration: underline;

	}

	

div#topcontent ul {
	position: absolute;
	list-style: none;
	margin: 0 0 0 0;
	left: 48px;
	top: -8px;
	height: 36px;
	width: 496px;

	}

div#topcontent ul li {

	display: inline;

	padding: 0 0.5em;

	border-left: 1px solid #BFA4C1;	

	}

div#topcontent ul li.first {

	border-left: 0 none;

	}

div#topcontent ul li a {



	text-decoration: none;

   }



div#topcontent form {

	position: absolute;

	right: 0;

	top: 55px;

	margin: 0;

	}

	

ul#centerlist li {

	left: 0;

	list-style-type: circle;

	padding: 3px 3%;

	font: 1em Verdana, sans-serif;

	line-height: 1.3;

	}	

	

ol#centerlist li {

	list-style: decimal;

	padding: 3px 3%;

	font: 1em Verdana, sans-serif;

	line-height: 1.4;

	text-align: justify;

	}

	

ol#centerlist li ul li{

	list-style-type: disc;

	padding: 3px 3%;

	font: 1em Verdana, sans-serif;		

/* ---------------------------------------------------------------------*/

  
