/* Layout Styling  ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


This is the styling for the layout of your site. Changing anything in this section could stop your website working in some or all of your customers browsers. *PLEASE* ONLY MAKE CHANGES IF YOU KNOW WHAT YOU ARE DOING. Please ensure that you check any changes you make using IE7, IE8, Firefox, Opera and Safari to make sure that those changes don't affect your site in a bad way*/

body {			/*  Sets up the page in the browser and gives it a background*/
	height:100%;
	max-height:100%;
	overflow:hidden;
	padding:0; 
	margin:0; 
	border:0;
	font-family: tahoma, verdana, arial, sans-serif;
	background-color:#ffffff;
	}
	
/* Changing the background-color changes the color of the whole site
	try: 	#70bf8d		#fed067		#69913e     #ce9020		#b15526 	#7f7473		*/
	
	
#watermark {					/* Large graphic behind the content */
	position:absolute;
	z-index:50;
	top:10%;
	right:10%;
	height:372px;
	width:226px;
	background:url(../graphics/dancerbig.png);  /* link to the bottom right graphic  */
	background-position:top right;
	background-repeat:no-repeat;
	}
	
#crowd {           /*  Places the crowd  */
	position:absolute; 
	bottom:0px;
	left:0px;
	width:100%;  
	height:54px; 
	background:url(../graphics/crowd.png);  /* link to the bottom graphic  */
	background-position:bottom left;
	background-repeat:repeat-x;
	z-index:40;
	}
	
#head {				/*  Places the title graphic  */
	position:absolute;
	width:800px;
	height:190px;
	top:0px;
	left:1%;
	z-index:10;
	text-align:left;
	}
	
#dancer {           /*  Places the bottom left graphic  */
	position:absolute; 
	bottom:0px;
	left:0px;
	width:194px;  
	height:209px; 
	background:url(../graphics/dancer.png);  /* link to the bottom left graphic  */
	background-position:bottom left;
	background-repeat:no-repeat;
	z-index:30;
	}
	
#couple {           /*  Places the couple on the bottom right  */
	position:absolute; 
	bottom:0px;
	right:0px;
	width:88px;  
	height:116px; 
	background:url(../graphics/couple.png);  /* link to the bottom right graphic  */
	background-position:bottom right;
	background-repeat:no-repeat;
	z-index:50;
	}

#topright {           /*  Places the top right graphic  */
	position:absolute; 
	top:0px;
	right:5%;
	width:200px;  
	height:158px; 
	background:url(../graphics/topright.png);  /* link to the top right graphic  */
	background-position:bottom left;
	background-repeat:no-repeat;
	z-index:30;
	}

#content{				/*  Places the main content  */
	position:absolute;
	top:150px;
	bottom:60px;
	left:18%;
	right:15%;
	padding:5px;
	background:url(../graphics/contentback.png);  /* link to the top content graphic  */
	background-position:top left;
	background-repeat:repeat;
	max-width:700px;	/*  stops large resolutions showing one long line of content  */
	overflow:auto;
	z-index:1000;
	}
	
#jcontent{				/*  Places the main content  */
	position:absolute;
	top:150px;
	bottom:60px;
	left:18%;
	right:15%;
	background:url(../graphics/contentback.png);  /* link to the top content graphic  */
	background-position:top left;
	background-repeat:repeat;
	max-width:700px;	/*  stops large resolutions showing one long line of content  */
	overflow:auto;
	z-index:1000;
	}
	
#cast {
	position:absolute;
	top:30px;
	right:2%;
	left:2%;
	bottom:20px;
	overflow:auto;
}
	
#rightcontent{				/*  Places the main content  */
	position:absolute;
	top:150px;
	bottom:60px;
	left:360px;
	right:10%;
	background:url(../graphics/contentback.png);  /* link to the top content graphic  */
	background-position:top left;
	background-repeat:repeat;
	max-width:750px;	/*  stops large resolutions showing one long line of content  */
	overflow:auto;
	z-index:1000;
	text-align:center;
	}
	
#leftcontent{				/*  Places the main content  */
	position:absolute;
	top:150px;
	bottom:60px;
	left:100px;
	right:15%;
	width:230px;	/*  stops large resolutions showing one long line of content  */
	text-align:center;
	overflow:auto;
	z-index:1000;
	}
	
#footer {				/*		The box that holds the text at the bottom	*/
	position:absolute;
	text-align:left;
	bottom:0px;
	right:0px;
	left:0px;
	height:20px;
	z-index:60;
}

#validx{
	position:absolute;
	top:0px;
	right:0px;
	height:20px;
	width:50px;
	z-index:3000;
}


#validc{
	position:absolute;
	top:20px;
	right:0px;
	height:20px;
	width:50px;
	z-index:3000;
}

/* End of layout styling -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


/* Content Styling ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* This is the styling of the content of your site. If you look at the website pages (index.html etc.) you will see a tab ( <p> or <h1> etc. ) at the beginning of the website's content and a closing tab ( </p> or </h1> etc. ). To change the settings scroll down and find the corresponding styles. For p, which is normal paragraph text, find the styles for p.*/

p {
	font-size:12px;
	font-weight:bold;
	color:#000000;
}


h1 {
	font-size:16px;
	font-weight:bold;
	color:#ff0000;
	text-align:center;
	}
	
h2 {
	font-size:14px;
	color:#cf3030;
}

h3 {
	font-size:12px;
	color:#000000;
}

h4 {
	font-size:12px;
	font-weight:bold;
}

#content li {
	font-size:12px;
	color:#000000;
	font-weight:bold;
}

#content dl {
	overflow:hidden;
}

#content dt {
	font-size:14px;
	font-weight:bold;
	color:#330000;
}

#content dd {
	position:relative;
	left:80px;
	top:-18px;
	font-size:14px;
	font-weight:bold;
	color:#003333;
}

#cast dl {
	overflow:hidden;
}

#cast dt {
	font-size:12px;
	font-weight:normal;
	color:#330000;
}

#cast dd {
	position:relative;
	left:90px;
	top:-14px;
	font-size:12px;
	font-weight:normal;
	color:#003333;
}

#jcontent dl {
	overflow:hidden;
}

#jcontent dt {
	font-size:14px;
	font-weight:bold;
	color:#330000;
}

#jcontent dd {
	position:relative;
	left:200px;
	top:-15px;
	font-size:14px;
	font-weight:bold;
	color:#003333;
}

 
			/* color of links */
 
 a {
	color:#66cc66;
	}
	
a:hover {
	color:#cccc66;
	}
	
a:visited {
	color:#333333;
	}


#footer a {
	font-size:8px;
}


#cast form {
text-align:center;
}


			/* Positioning for text on left or right */

.lefttext {
	float:left; 
	width:47%;
	padding:5px;

}

.righttext {
	float:right; 
	width:47%;
	padding:5px; 

}

.clear {
	clear:both;
}

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

.red {
	color:#cf3030;
}
	
#float {
	float:left;
	clear:right;
	padding:10px;
}

#validx, #validc {
	z-index:2000;
}

#validx img {
	border-style:none;
	}
#validc img {
	border-style:none;
	}
	
#content img, #leftcontent img {
border-style:none;
}
#leftcontent img .border {
	border-style:1px solid #000000;
	}


/*       This code turns an unordered list into a menu         */
/*  DO NOT CHANGE ANY OF THE POSITION SETTINGS (absolute,relative,fixed etc.) as the menu simply won't work       */ 


.menu{
position:absolute;
top:105px;
left:20%;
font-weight:bold;
font-size:12px;
z-index:1000;
border:1px solid black;

}

.menu:after{
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.menu ul{
border:none;
padding: 4px;
margin: 4px;
text-align: center;
border:none;
}

.menu ul li{
display: inline;
padding-right:4px;
}

.menu ul li a{
color: #000000;
padding-right: 6px;
margin-right: 4px;
text-decoration: none;
border-right: none;
}

 
.menu ul li a.selected{ 
background-color:#ffffff;
padding-right:6px;
color:#ff0000;
}

.menu ul li a:hover {
	background-color:#ffffff;
	padding-right:6px;
	color:#0099ff;
}

/* Style for Drop Down Menu */

.dropmenu{
position:absolute;
top: 0;
border:1px solid #529597;
border-bottom-width: 0;
font-size: 11px;
font-weight:bold;
line-height:16px;
text-align:left;
z-index:1000;
background-color: #ffffff;
width: 150px;
visibility: hidden;

}


.dropmenu a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #529597;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: #000000;
}

* html .dropmenu a{
width: 100%;
}

.dropmenu a:hover{
background-color: #ffffff;
color:#0099ff;
}

.dropmenu a:active{ 
background-color: #ffffff;
color:#0099ff;
}

.dropmenu a.selected{
	color:#ff0000;
	background-color:#ffffff;
}