/* CSS Document */

html, body{margin:0;padding:0;}
body{
font: 76% arial,sans-serif;
font-size:14px;
text-align:center;
background-color:#a61603;
}



.splink {
	font-family: Arial;
	font-size:10px;
}


p{
margin:0 10px;
}

a {
color:#000000;}

.title {
text-align:center;
margin-left:10px;
}

.form {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 10px;
	line-height:24px;
}

#header {
height:189px;
width:896px;
margin:0;
padding:0px;
background-image:url(imgs/header.jpg); 
background-repeat:no-repeat;
}

#header1 {
height:189px;
width:896px;
margin:0;
padding:0px;
background-image:url(imgs/header.jpg); 
background-repeat:no-repeat;
}

#header2 {
height:189px;
width:896px;
margin:0;
padding:0px;
background-image:url(imgs/headerqoyllur.jpg); 
background-repeat:no-repeat;
}


#header3 {
height:189px;
width:896px;
margin:0;
padding:0px;
background-image:url(imgs/headerarts.jpg); 
background-repeat:no-repeat;
}

#header4 {
height:189px;
width:896px;
margin:0;
padding:0px;
background-image:url(imgs/headercomu.jpg); 
background-repeat:no-repeat;
}

#header5 {
height:189px;
width:896px;
margin:0;
padding:0px;
background-image:url(imgs/headercourses.jpg); 
background-repeat:no-repeat;
}

#header6 {
height:189px;
width:896px;
margin:0;
padding:0px;
background-image:url(imgs/headerdance.jpg); 
background-repeat:no-repeat;
}

#header7 {
height:189px;
width:896px;
margin:0;
padding:0px;
background-image:url(imgs/headergirls.jpg); 
background-repeat:no-repeat;
}

#header8 {
height:189px;
width:896px;
margin:0;
padding:0px;
background-image:url(imgs/headerlinks.jpg); 
background-repeat:no-repeat;
}

#container{text-align:left;}

#linkbar
{
margin:0px;
height:35px;
padding-left:30px;
padding-top:5px;
background-image:url(imgs/linkbar.gif); 
background-repeat:repeat-y;
}

#extra{background:#efc638;}

#footer{
background-image:url(imgs/foot2.gif);
background-repeat:no-repeat;
background-color:#a61603;
clear:both;
width:100%;
max-height:50px;
line-height:12px;
}

#footer p{
margin:0;
padding:5px 70px 5px 0px;
height:50px;
text-align:right;
}

#footer a {
margin:0;
line-height:12px;
max-height:40px;
display:inline;
}

.formstyle {
	font-size: 12px;
	font-family:Verdana, sans-serif;
}


#container{
width:896px;
margin:auto;
background-image:url(imgs/bodybg.gif); 
background-repeat:repeat;}

#closer{
width:896px;
height:18px;
margin:auto;
background-image:url(imgs/bodyclose.gif); background-repeat:no-repeat;
}

#content{
float:left;
width:650px;
margin:0px;
margin-top:10px;
}

#content p{
line-height:1.4;
margin-left:40px;
text-align:justify;
}

#rightbox
{
float:right;
width:200px;
padding-right:40px;
padding-top:10px;
}

/* ***********************************************************************************

Convertable Nestled list menu by DUNCAL Productions
 2007 by Duncan Hill and Alan Gresley
http://css-class.com/articles/ursidae/
http://css-class.com/articles/ursidae/bears5dd-kbaccess.htm

Converts from a verticle menu with flyout popup submenus to a horizontal menu with popups 
and then flyout popup submenus with a few changes in style where. To convert please find 
where ****DISPLAYS HORIZONTAL MENU**** appears. Please note, this keyboard addaption 
prevents easy conversion.

Dropdown version from top left corner (with IE5.5 and IE6 hacks, none for IE5 for Mac)

ACCESSIBILITY - This menu is completely keyboard accessible in Firefox and IE with just CSS alone.

********************************************************************************* */
div#navwrap {
	width:9em;
	/*margin-top:-9em;*/
	margin-left:1.2em;
	/*position:absolute;top:80px;left:0;*/
	float:left;
	display:inline; 
	margin-bottom:30px;
}

ul#navigation {
	font-family: Tahoma,Helvetica, Arial,sans-serif;
	font-size: 12px; /*          ****CHANGE**** change for larger or smaller font */
	float:left;
}
ul#navigation, ul#navigation ul {
	padding: 0;
	margin: 0;
	list-style: none;
	border-right: 1px solid #666600;
	border-bottom: 1px solid #666600;
}
ul#navigation li { 
	line-height : 1.25em;
	position: relative;
	float: left;
}
ul#navigation>li li { /* Needed for Opera 9, maybe because it's decent CSS. Hide from IE6 */
	float: none;
}

#navigation li a {
	display: block;
	text-decoration: none;
	text-align:center;
	color: #000;
	background-color:#999933; /* MENU BACKGROUND COLOUR! */
	width: 5em; /*          ****CHANGE-MENU**** */
	padding: 0.4em 0.4em;
	border-top: 1px solid #666600;/*0.04em*/
	border-left: 1px solid #666600;
	/*border-right: 1px solid #660000;*/
}

ul#navigation li li a, #navigation li li a:focus {
	width: 8em; /*           ****CHANGE-SUBMENU**** */
	text-align:left;
}

ul#navigation li li li a, #navigation li li li a:focus {
	width: 10em; /*           ****CHANGE-SUBMENU**** */
}

ul#navigation li a:hover { /* The hovered style for submenus */
	background-color:#FFCC66; /* hover BACKGROUND COLOUR! */
}
ul#navigation li a:focus { /* The focus style for submenus */
	background-color: #FFCC66;
}
ul#navigation li a:active { /* The active style for submenus */
	background-color:#FFCC66;
}



#navigation li li a:focus, #navigation li li a:active { /* The focus position for anchors */
	position : relative;
	left: 10000px;
	/*margin-left:7em;*/
	top:0;
	z-index:1;
}
#navigation li:hover li a:focus, #navigation li:hover li a:active, #navigation li.sfhover li a:active { /* The hovered style for submenus when anchor is in focus */
	position : relative;
	left: 0;top:0;
	margin-left:0;
}
#navigation li li li a:focus, #navigation li li li a:active { /* The focus position for anchors */
	left: 20000px;
	margin-left:9em;
	top:-2.38em;
}
#navigation li:hover li li a:focus, #navigation li:hover li li a:active, #navigation li.sfhover li li a:active { /* The hovered style for submenus when anchor is in focus */
	position : relative;
	left: 0;margin-left:0;
}
#navigation li li li li a:focus, #navigation li li li li a:active { /* The focus position for anchors */
	position : relative;
	left: 30000px;
	margin-left:20em;
	top:-4.76em;
	z-index:1;
}
#navigation li:hover li li li a:focus, #navigation li:hover li li li a:active, #navigation li.sfhover li li li a:active { /* The hovered style for submenus when anchor is in focus */
	position : relative;
	left: 0;margin-left:0;
}

/* Give some outline */


#navigation li a:focus { /* The focus position for anchors */
	outline: 2px solid #666600;
}
#navigation li li a:focus { /* The focus position for anchors */
	outline: 2px solid #666600;
}


#navigation li ul { /* Hides the first unhovered submenu */
	position : absolute;
	left: -10000px;
}
/*#navigation li:active ul ul, #navigation li:active ul ul ul*/
#navigation li:hover ul ul, #navigation li:hover ul ul ul, #navigation li.sfhover ul ul, #navigation li.sfhover ul ul ul {
	left: -10000px; /* Hides the second and following unhovered submenus */
}

#navigation li:hover ul, #navigation li li:hover ul, ul#navigation li li li:hover ul, #navigation li.sfhover ul, #navigation li li.sfhover ul, #navigation li li li.sfhover ul { /* Displays submenu when the parent anchor element is hovered */
	top: 0;
	left: 0;
	margin-left: 100%;
}

/* Displays submenu when the parent anchor element is in focus */

#navigation li a:focus+ul {
	top: 0;
	left: 0;
	margin-left: 0;
	top: 2.35em;
}
#navigation li:hover a:focus+ul {
	margin-left: 0;
}
#navigation li li a:focus+ul {
	top: 0;
	left: 10000px;
	margin-left:100%;
}
#navigation li:hover li a:focus+ul {
	left: -10000px;
	margin-left:100%;
}
#navigation li li:hover a:focus+ul {
	left: 0;
	margin-left:100%;
}
#navigation li li li a:focus+ul {
	top: -2.35em;
	left: 20000px;
	margin-left:100%;
}
#navigation li li li:hover a:focus+ul {
	top: 0;
	left: 0;
	margin-left:100%;
}
#navigation li li:hover li a:focus+ul {
	left: 0;
	margin-left:100%;
}


/*                       ****DISPLAYS HORIZONTAL MENU(2) ******* */
#navigation li:hover ul, #navigation li a:focus ul, #navigation li.sfhover ul {
	top:100%;
	margin-left: 0;
}
div#navwrap {
	width:95%;
}



#navigation li li li:hover { /* currently in to prevent IE7 recalculated offset bug for last submenu, oh dear */
	background-position:left;
}

/* ****CHANGE-MENU**** box model hack and centering since IE5.5 and earlier is permanently in quirksmode */
#navigation li a {width: 7em}
ul#navigation li li a {width: 9em}
ul#navigation li li li a {width: 11em}

body {text-align:center}

#wrap {text-align:left}


/* Just to help IE5.5 and IE6 along */
ul#navigation li ul {width : 9em;}
div#navwrap {display:inline;}


<!-- div#extra{clear:both;width:100%;}-->