/* basic elements */

html {
	margin: 0;
	padding: 0;
	}


h1 {
	FONT: 16pt Century Gothic, Verdana, Helvetica, Arial; 
	font-weight: bold;
	COLOR: #100972;
	}
	
a{
	FONT: 10pt Century Gothic, Verdana, Helvetica, Arial; 
	COLOR: #f67c0f; 
	TEXT-INDENT: 0pt;
	text-decoration: none;
	font-weight : bold;
	}

ul { 
	list-style-type: square;
	list-style-color: #ff9900;
	 }

/* specific divs */

#logo{
	position: absolute;
	top: 0.5em;
	left: 2em;
	width: 10em;
	}

#intro{
	position: absolute;
	top: 2em;
	left: 2em;
	}

#introwords{
	position: absolute;
	top: 25em;
	left: 11em;
	FONT: 14pt Century Gothic, Verdana, Helvetica, Arial; 
	COLOR: #100972;
	padding: 0 0 0 14em;
	}
		
#cartoon1{
	float: right;
	width: 340px;
	margin: 0 0 0 1em;
	}

#cartoon2{
	float: right;
	width: 330px;
	margin: 0 0 0 1em;
	}

#cartoon3{
	float: right;
	width: 330px;
	margin: 0 0 0 1em;
	}

#cartoon4{
	float: right;
	width: 330px;
	margin: 0 0 0 1em;
	}

#cartoon5{
	float: right;
	width: 330px;
	margin: 0 0 0 1em;
	}

#cartoon6{
	float: right;
	width: 330px;
	margin: 0 0 0 1em;
	}

	
#container { 
	position: absolute; 
	top: 0px;
	left: 0px;
	padding: 0px
	border: 0px;
	margin: 0px;
	background-color:  #f69a0f;
	}

#Header {
	FONT: 16pt Century Gothic, Verdana, Helvetica, Arial; 
	padding: 10px 20px 10px 130px;
	}

#RightHeader {
	float: right;
	color : white;
	}
	
#content {
	FONT: 10pt  Century Gothic, Verdana, Helvetica, Arial; 
	COLOR: #100972;
	background-color: white;
	padding: 1em 1em 2em 1em;
   margin: 0 0 0 20px;
	}

#Navigation {
	float: left
	color: #100972; 
	background-color: #f67c0f;
	padding: 0 0 14px 0;
	}
	
	
#footer { 	
	clear: both;
	FONT: 8pt Century Gothic, Verdana, Helvetica, Arial; 
	COLOR: #100972;
	text-align: right;
	background-color: #f67c0f;
	padding: 5px 0 40px 1em;
	margin: 0;
	}
	
	#footnote{
	float: right;
	width: 340px;
	}
	
	
.titletext {
	FONT: 24pt Trebuchet MS, Century Gothic, Verdana, Helvetica, Arial; 
	COLOR: #100972; 
	}
	
.subtitletext {
	FONT: 12pt Trebuchet MS, Century Gothic, Verdana, Helvetica, Arial; 
	COLOR: #f67c0f; 
		font-weight : bold;
	}
	
.headertext {
	FONT: 12pt Century Gothic, Verdana, Helvetica, Arial; 
	COLOR: #100972; 
	TEXT-INDENT: 0pt
	}
	
.subtext {
	FONT: 10pt Century Gothic, Verdana, Helvetica, Arial; 
	COLOR: #f67c0f; 
	TEXT-INDENT: 0pt;
	font-weight : bold;
	}

.strapline {
	FONT: 14pt Trebuchet MS, Century Gothic, Verdana, Helvetica, Arial; 
	COLOR: #100972; 
	TEXT-INDENT: 0pt;
	}

.highlighttext {
	FONT: 10pt Century Gothic, Verdana, Helvetica, Arial; 
	COLOR: #f67c0f; 
	TEXT-INDENT: 0pt;
	font-weight : bold;
	}
		
.navtext {
	FONT: 10pt Century Gothic, Verdana, Helvetica, Arial; 
		COLOR: #f67c0f; 
	TEXT-INDENT: 0pt;
	font-weight : bold;
	}
	
#nav, #nav ul { /* all lists */
	padding: 5px 0 5px 5px;
	margin: 0;
	list-style: none;
	}

#nav a {
	display: block;
	background-color: #f67c0f;
	FONT: 10pt  Century Gothic, Verdana, Helvetica, Arial; 
		font-weight : bold;
	COLOR: #100972;
	width: 12em;
	}

	
#nav li { /* all list items */
	float: left;
	width: 12em; /* width needed or else Opera goes nuts */
	FONT: 10pt  Century Gothic, Verdana, Helvetica, Arial; 
		font-weight : bold;
	COLOR: #100972;
		background-color: #f67c0f;
	}

#nav li ul { /* second-level lists */
	position: absolute;
	background: #f67c0f;
	width: 12em;
	FONT: 10pt  Century Gothic, Verdana, Helvetica, Arial; 
		font-weight : bold;
	COLOR: #100972;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
	FONT: 10pt  Century Gothic, Verdana, Helvetica, Arial; 
		font-weight : bold;
	COLOR: #100972;
	}
	
#nav a:hover, #nav a.sfhover { 
	FONT: 10pt  Century Gothic, Verdana, Helvetica, Arial; 
		font-weight : bold;
	COLOR: #ffffff;
	}