/* CSS Document */

/* ------------------------------- formatting ----------------------------- */

body {
	margin: 0;
	}

h1 {
	font: bold 2.3em Arial, sans-serif;
	color: #836A99;
	text-align: center;
	margin-top: 0;
	letter-spacing: 0.3em;
	}

 
#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: bold 1.8em Arial, sans-serif;
	text-align: center;
	color: #000080;
	margin-top: 0;
	letter-spacing: 0.2em;
		}

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;
  }		
  
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:20px;
  padding: 2px 2px 2px 20px;
	background: url(images/dramamasks.jpg) repeat-x;
	border-bottom: 1px solid #836A99;
  }

  
#center {
	margin: 0 20% 0 20%;
	padding: 1% 3%;
	background: #fff url(images/dramamasks.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: 145px;
	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/dramamasks.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;		

/* ---------------------------------------------------------------------*/