@charset "UTF-8";

/* .clear is from "http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html"*/

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */


/* use the body margins to indent content from screen edges */
/* NB the height of the "video" div in the html also affects the vertical position of the nav buttons */

a:link {
 color: #bbb29c;
text-decoration: none;
}
a:visited {
 color: #bbb29c;
text-decoration: none;
}
a:hover {
 color: white;
 text-decoration: none;
}
a:active {
 color: #bbb29c;
text-decoration: none;
}
a {
   outline: none;
}




body {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	/*overflow: hidden;*/
	background-color:#000000	;
}

.pictureitem 
{
	position: relative;
	float: left;
	text-align: bottom;
	padding: 0px;
	margin: 0px 0px 20px 0px;
	
}


div.mournerPanelindex
{
float: left;
width: 95%;
padding-bottom: 10px; 
padding-top: 20px; 
padding-left: 30px; 

}

div.mournerPanel
{
float: left;
width: 95%;
padding-bottom: 10px; 
padding-top: 0px; 
padding-left: 30px; 

}

span.mournerFrame
{
float: left;
padding-bottom: 0px; 
padding-top: 0px; 
padding-left: 0px; 

}


div.pagetitleGrc {
		display: block;
		float: left;
		clear: left;
		width: 100%;
		height: 74px;
		border-bottom:1px solid #bbb29c;	
		background-color:#bbb29c;
}

div.rollover {
display: block;
width: 100%;
float: left;
clear: left;
color: #ffffff;
font: 16px "Georgia", "Arial", "Helvetica", sans-serif;
text-align:center;

}

div.pagetext {
display: block;
width: 100%;
float: left;
clear: left;
color: #ffffff;
font: 16px "Georgia", "Arial", "Helvetica", sans-serif;
line-height: 28px;
text-align:left;
padding-bottom: 30px; 
padding-top: 30px; 
padding-left: 30px; 
padding-right: 30px; 


}

div.abouttext {
display: block;
width: 80%;
float: left;
clear: left;
color: #ffffff;
font: 16px "Georgia", "Arial", "Helvetica", sans-serif;
line-height: 28px;
text-align:left;
padding-bottom: 30px; 
padding-top: 30px; 
padding-left: 30px; 
padding-right: 30px; 


}

div.helptext {
display: block;
width: 80%;
float: left;
clear: left;
color: #ffffff;
font: 16px "Georgia", "Arial", "Helvetica", sans-serif;
line-height: 28px;
text-align:left;
padding-bottom: 0px; 
padding-top: 30px; 
padding-left: 30px; 
padding-right: 30px; 


}




div.video {
display: block;
width: 100%;
float: left;
clear: left;
color: #ff00ff;
font: 16px "Georgia", "Arial", "Helvetica", sans-serif;
text-align:center;

}



div.boilerplate {
width: 480px;
color: #ffffff;
display: block;
float: left;
font: 14px "Georgia", "Arial", "Helvetica", sans-serif;
padding-left: 20px; 

}



h3 {
color: #ffffff;
font: 18px "Georgia", "Arial", "Helvetica", sans-serif;
}

h4 {
color: #bbb29c;
font: 15px "Georgia", "Arial", "Helvetica", sans-serif;
}

h5 {
color: #bbb29c;
font: 18px "Georgia", "Arial", "Helvetica", sans-serif;
}

span.signoff {
width: 100%;
float: right;
color: #bbb29c;
font: 14px "Georgia", "Arial", "Helvetica", sans-serif;
text-align: right;
padding-bottom: 20px;
}


div.footer {
	padding-top: 10px; 
	padding-left: 30px; 
	padding-right: 30px; 
	padding-bottom: 20px; /* to force the fields off the bottom of the screen */
	clear: both;
	border-top:1px solid #bbb29c;	
}

div.nav {
	text-align: left;
	height: 100%;
	padding-top: 0px; /* this sets the pagecontainer further away from the breadcrumb if required */
	padding-left: 0px; /* this indents the pagecontainer from the screen left */
	padding-right: 0px; /* this indents the pagecontainer from the screen right */	
	
}

div.tablecontainer {
	float: left;
	clear: left;
	padding-left: 40px; /* this indents the pagecontainer from the screen left */
	
	
}

div.menucontainer {
	text-align: left;
	padding-top: 0px; /* this sets the menucontainer further away from the breadcrumb if required */
	padding-left: 0px; /* this indents the menucontainer from the screen left */
	padding-right: 0px; /* this indents the menucontainer from the screen right */
}

div.pagecontainer {
	text-align: left;
	padding-top: 0px; /* this sets the menucontainer further away from the breadcrumb if required */
	padding-left: 0px; /* this indents the menucontainer from the screen left */
	padding-right: 0px; /* this indents the menucontainer from the screen right */
}


div.start_btn {
	text-align: left;
	width: 100px;
	height: 100px;
	padding-top: 0px; /* this sets the menucontainer further away from the breadcrumb if required */
	padding-left: 0px; /* this indents the menucontainer from the screen left */
	padding-right: 0px; /* this indents the menucontainer from the screen right */
}





/* title on menu page */


span.menutitle {
	display: block;
	float: left;
	clear: left;
	color: #36424a;
	font: 30px "V&A TheSansPlain", "Arial", "Helvetica", sans-serif;
	line-height: 36px;
    text-decoration: none;
	text-indent: 0px;
	text-align: left;
	padding-bottom: 80px; /* this adjusts the vertical space between pagetitle and menucontainer */
	width: 500px;
}

/* title on track pages */


span.pagetitle {
	display: block;
	color: #ffffff;
	font: 16px "Georgia", "Arial", "Helvetica", sans-serif;
	line-height: 20px;
    text-decoration: none;
	text-indent: 0px;
	text-align: left;
	padding-bottom: 0px; 
	
}

span.boilertext {
	display: block;
	float: left;
	clear: left;
	color: #ffffff;
	font: 15px "Georgia", "Arial", "Helvetica", sans-serif;
	line-height: 18px;
    text-decoration: none;
	text-indent: 0px;
	text-align: left;
	padding-bottom: 0px; 
	
}

span.controls {
	display: block;
	float: left;
	clear: left;
	color: #ffffff;
	font: 14px "Georgia", "Arial", "Helvetica", sans-serif;
	line-height: 18px;
    text-decoration: none;
	text-indent: 0px;
	text-align: left;
	padding-bottom: 0px; 
	
}

span.controlHelp {
	display: block;
	clear: right;
	float: left;
	padding-right: 20px; 
	
}

span.helpLine {
	display: block;
	clear: both;
	margin-bottom: 10px; 
	
}

span.helpLine2 {
	display: block;
	clear: left;
	float: left;
	padding-bottom: 0px; 
	
}

span.controltext {
	float: left;
	clear: right;
	color: #ffffff;
	font: 14px "Georgia", "Arial", "Helvetica", sans-serif;
	line-height: 18px;
    text-decoration: none;
	text-indent: 0px;
	text-align: left;
	padding-top: 8px; 
	padding-bottom: 0px; 
	
}


span.mournerNav {
	display: block;
	clear: left;
	color: #ffffff;
	font: 14px "Georgia", "Arial", "Helvetica", sans-serif;
	line-height: 18px;
    text-decoration: none;
	text-indent: 0px;
	text-align: left;
	padding-top: 10px; 
	
}



span.credit {
		color: white;
		display: block;
		clear:left;
		float: left;
		font: 15px "Georgia", "Arial", "Helvetica", sans-serif;
		text-indent:0px;
		text-align: left;
		padding-top: 10px;
		padding-bottom: 0px;
		padding-right: 0px;
}


span.FRAME {
		display: block;
		float: right;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-right: 0px;
}



/* sliding doors button stuff is from "http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html"*/

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

/* Notes about "buttons":  */

/* The top and bottom padding in span and hover span for a button must match.  */

/* To adjust the vertical alignment of text in button, subtract from top and add to bottom to move the text up.  */

/* Note: Make sure the span's vertical padding (top and bottom) and line-height  
 amount to the total height of the button. Using a different padding, 
 means setting a different height. */


/*topbutton is the startagain button*/

a.trackbutton {
    background: transparent url('images/btn_track_list.png') no-repeat scroll top right;
	display: block;
    float: left;   
    height: 90px;
	width: 84px; 
}


a.trackbutton:hover {
    background-position: bottom right;
    color: #36424a;
    outline: none; /* hide dotted outline in Firefox */
}


a.startbutton {
    background: transparent url('images/btn_start.png') no-repeat scroll top right;
	display: block;
    float: left;   
    height: 90px;
	width: 84px; 
}


a.startbutton:hover {
    background-position: bottom right;
    color: #36424a;
    outline: none; /* hide dotted outline in Firefox */
}


a.nextbtn {
    /*background: transparent url('images/btn_next.png') no-repeat scroll top right;*/
	display: block;
    float: left; 
    border:0px;
    text-decoration: none;
    color: #bbb29c;
    hover {text-decoration: underline; color: red;}
}


a.nextbtn:hover {
    background-position: bottom right;
    color: #36424a;
    outline: none; /* hide dotted outline in Firefox */
}


span.normalmenu span.menuitem {
   /*background: transparent url('images/menu_btn_a.png') no-repeat scroll top right;*/
   height: 100px;
	display: block;
    float: left;
    padding-top: 10px; /* to make space between rows */
    padding-bottom: 10px; /* to make space between rows */
    padding-right: 0px; /* sliding doors padding */
	width: 60px;
 	font: 14px "V&A TheSansPlain", "Arial", "Helvetica", sans-serif;
    color: #ffffff;
    text-decoration: none;
	text-indent:0px;
	text-align: left;
}


span.normalmenu span.menuitem span {
    /*background: transparent url('images/menu_btn_span.png') no-repeat;*/
    display: block;
    line-height: 18px;
    padding: 0px 0px 0px 0px;
}

span.normalmenu span.menuitem:hover {
    background-position: bottom right;
    color: #ffffff; /*set the text colour for the rollover here*/
    outline: none; /* hide dotted outline in Firefox */
}

span.normalmenu span.menuitem:hover span {
    background-position: bottom left;
}