/* CSS Document */

/* ------------- "generic" styles */

body {
	margin: -3em;
	margin-right:0em; padding: 0;
	background: #171B20; color: #999;
	font: small "Helvetica", Arial, sans-serif;
}

a {
	text-decoration: none;
}

#container
{
width: -50%;
padding-left:2EM;
margin: 10px auto;
background-color: #171B20;
color: #171B20;
/*border: 1px solid gray;*/
line-height: 130%;
}

/*mastheadstyles*/

#masthead
{
padding-top: -5px;
margin-top: -1em; /*move MASTHEAD*/
margin-bottom: -0.75em;
background-color: #171B20;	
border-bottom: 0px solid gray; /*Change colour to remove margin*/
}

#homelink {
	display: block;
	align: center;
	margin: 1em 2em 0em; padding:2em 2em 0em 10em;
	/*background: url(../images/curl.gif) 100% 100% no-repeat;*/
	
}


#navlinks {
	margin: 0; 
	/*padding: 0.5em 0em ;*/
	padding-bottom: 0.5em;
	padding-left: 16em ; /*to move links*/
	padding-right: 0em;
	padding-top: 0.75em;
	background: #171B20; 
	color: #FFF; 
	border-bottom: 1px solid #333;
	border-top: 1px solid #333;
	font-size: 14px;
}

#navlinks li {
	display: inline;
	margin-right: 0.5em; 
	padding-right: 0.75em;
	padding-bottom: 13px;
	padding-top: 13px;
	border-right: 0px solid #99C;
	font-weight: lighter;
}

#navlinks li.last {
	border-right: 0;
}

#navlinks a {
	color: #FFF;
}

/*#navlinks a:after { content: '.'; }*/

#navlinks a:hover {
	color: white;
	margin-top: 40px;
	padding-bottom: 5px;
	border-bottom: 2px solid #97c1b5;}/*yellow #c7d92c*/


#today {
	margin-top: -1.66em; padding: 0 2em 0 0;
	color: #FFF;
	/*font-weight: bold;*/
	text-align: right;
	line-height: 1;
}

#masthead h1
{
padding: 0;
margin: 0;
}


/*To float the left nav, we need to use the rule: "#leftnav {float: left;}". When a div is set to float, a width must also be included, so we can add another declaration: "width: 160px;".

Next, we set the margin to "0", add 1em of padding (which will move the text away from the edges of the div).*/


#leftnav
{
float: left;
width: 188px;
margin: 0;
padding: 2em;
}

#leftnav h5 {
color: #c7d92c;
	}


.sub_nav_content
{
	display: inline;
	list-style-type: none; 
	float: left;
	font-weight: bold;
	margin-right: 0.5em; 
	padding-right: 0.5em;
	padding-bottom: 13px;
	padding-top: 13px;
	/*border-right: 0px solid #99C;*/
}

ul  { list-style-type: none; }

.subnav a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding-left:0em;
	
}

.subnav a:hover {
	color: #fff;
	padding-left: 0em;
	margin-right: -1em; /*move right border*/
	border-right: 2px solid #eef0ef;
}


li li ul  { list-style-type: none; }

.subnav  li li li a {
	color: #000;
	text-decoration: none;
	display: block;
	padding-left: 0em;
	
}

.subnav li li li a:hover {
	color: #000;
	padding-left: 0em;
	border-right: 1px solid #c7d92c;  /*yellow #c7d92c*/
}

#leftnav img.illus {
	float: left;
	margin: 3em 2em 0em 1.5em;
}




/*To float the "rightnav" div, we need to use the rule: "#rightnav {float: right;}". Like the "leftnav" div, we add a width, margin and padding.*/

#rightnav
{
float: right;
width: 200px;
margin: 0;
padding: 2em;
}

#sidebar form, #rightnav div h3 {
	background: #9B96CA;
}

#rightnav a {
	text-decoration: none;
	color: #F60;
	border-bottom:1px;
	border-bottom-style:dotted;
}

#rightnav div {
	background: fff; color: #FFF;
	padding: 0 1em 1em;
	margin-top: 0.75em;
}

#rightnav div h3 {
	/*margin: 0 0 0.5em;*/ padding: 0.6em 0;
	border-bottom: 2px solid #F60;
	font-weight: normal;
	font-size: 1.2em;
	text-transform: lowercase;
}

#rightnav h4 {
	/*margin: 0 0 0.5em;*/ padding: 0.6em 0;
	border-bottom: 2px solid #F60;
	font-size: 1.25em;
	font-weight: normal;
}

#rightnav h6 {
color: #c7d92c;
	}

#rightnav h7 {
color:#B0D742;
font: small "Helvetica", Arial, sans-serif;
font-style: italic;
}

#rightnav h8 {
color:#999;
font-size:x-small;
}

#rightnav p:first-line {
	font-style: normal;
}

#rightnav img {
	display: block;
	margin: 2em auto 0;
}

/*This next step is the most important of the entire process. The "leftnav" div has been floated, so text from the "content" div will flow down the leftnav's right edge and then wrap around under it. To make the text appear as it is in a new column, we apply margin-left to the "content" div, making sure that the width is greater than the overall width of the "leftnav" div. In this case, we will use "margin-left: 200px", which will give us 40px margin between the leftnav and the main content. The same is done to the right side.

We will also apply a border to the left and right of the "content" div. This could be a problem if the "leftnav" div is longer than the main content. If this is the case, the border can be applied to the right side of the "leftnav" div instead of the "content" div.*/

#content
{
margin-left: 250px;
border-left: 1px solid #333;
margin-right: 250px;
border-right: 1px solid #333;
padding: 1em; /*padding*/
}

#clientname {
color:#c7d92c;
font-size: 11px;
text-align: right;
font-style:italic;
}

#title {
color:#B0D742;
font: small;
font-style: italic;
}

#maintext {
color:#B0D742;
font-style:normal;
}

#discname {
color:#B0D742;
font-size: 15px;
text-align: left;
font-style: bold;
}

#notes {
color:#B0D742;
font-size: small;
text-align: left;
font-style: bold;
}

#performance {
color:#B0D742;
font-size: small;
text-align: left;
font-style: strong;
}

#list {
font-style:normal;
list-style-type:upper-roman;
}


#content a {
	text-decoration: none;
	color: #F60;
	border-bottom:1px;
	border-bottom-style:dotted;
}
#content h1 {
	margin: 0 33% 0.75em -0.5em; 
	padding: 0.5em 0.5em;
	background: transparant; 
	color: #B0D742;
	font-size: 1.5em;
}

#content h1 b {
	color: #F60; /*LIME GREEN CODE #B0D742 orange #f60*/
}

#content h2 {
	margin: 0.5em 0; padding-bottom: 0em;
	border-bottom: 0px solid #f60;
	font-size: 1em;
	font-style: normal;
        color:white
}

#content h5 {
	text-decoration: none;
	margin: 0.5em 0;
	border-bottom: 2px solid gray;
	font-size: small;
	font-weight:normal}
	

#content img.illus {
	float: left;
	margin: 0.25em 1em 1em 1em;
	border: 3px solid white;
}

#content img.illus2 {
	float: right;
	margin: 0.25em 1em 1em 1em;
}

#content img.illus3  {
text-decoration: none;
border-bottom:0px;
border-bottom-style:none;
border-bottom-color:#171B20;
}
/*Lightwindow*/

.notice {
	border: 3px solid #ffffbe;
	padding: 10px;
	color: #ffffff;
	background-color: #09f;
	margin: 0 0 20px 0;
}
	
	.notice p, 
	.notice p a, 
	li a {
		color: #ffffff;
		text-decoration: none;
	}

a.page-options {
	color: #000000; 
	text-decoration: none; 
	display: block; 
	text-align: left; 
	padding: 5px; 
	background: #fff;
	margin: 3px 0 0 0;
	border-bottom: 1px solid #333333;
	border-bottom: 1px solid #555555;
}

a.page-options:hover, 
a.page-options:focus {
	color: #fff; 
	background: none;
}		

.hidden {
	display : none;
}
#lightwindow_overlay {
	/* REQUIRED */
	display: none;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	z-index: 500;
	/* REQUIRED */
}

#lightwindow {
	/* REQUIRED */
	/* Of Note - The height and width of this element are set to 0px */
	display: none;
	visibility: hidden;
	position: absolute;
	z-index: 999;
	line-height: 0px;
	/* REQUIRED */
}

	#lightwindow_container {
		/* REQUIRED */
		display: none;
		visibility: hidden;
		position: absolute;
		/* REQUIRED */
		padding: 0 0 0 0;
		margin: 0 0 0 0;
	}

	/* IE6 needs this or it messes with our positioning */
	* html #lightwindow_container {
		overflow: hidden;
	}

	#lightwindow_contents {
		overflow: hidden;
		z-index: 0;
		position: relative;
		border: 10px solid #ffffff;
		background-color: #ffffff;
	}		

#lightwindow_loading {
	/* REQUIRED */
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	z-index: 9999;
	position: absolute;
	/* REQUIRED */
	background-color: #f0f0f0;
	padding: 10px;
}

	#lightwindow_loading_shim { 
		display: none;
		left: 0px; 
		position: absolute; 
		top: 0px;
		width: 100%; 
		height: 100%;
	}

	#lightwindow_loading span {
    	font-size: 12px;
		line-height: 32px;
		color: #444444;
		float: left;
		padding: 0 10px 0 0;
	}

	#lightwindow_loading span a,
	#lightwindow_loading span a:link, 
	#lightwindow_loading span a:visited {
		color: #09F;
		text-decoration: none;
		cursor: pointer;
	}

	#lightwindow_loading span a:hover,
	#lightwindow_loading span a:active {
		text-decoration: underline;
	}


	#lightwindow_loading img {
   		float: left;
   		margin: 0 10px 0 0;
	}


/*-----------------------------------------------------------------------------------------------
	I liked the Navigation so much from http://www.huddletogether.com/projects/lightbox2/
	I mean let's face it, it works really well and is very easy to figure out.
-----------------------------------------------------------------------------------------------*/

#lightwindow_navigation {
	/* REQUIRED */
	position: absolute;
	top: 0px;
	left: 0px;
	display: none;
	/* REQUIRED */
}
	/* We need to shim the navigation for IE, though its more of a sub-floor */
	#lightwindow_navigation_shim { 
		/* REQUIRED */
		display: none;
		left: 0px; 
		position: absolute; 
		top: 0px;
		width: 100%; 
		height: 100%;
		/* REQUIRED */
	}

	#lightwindow_navigation a,
	#lightwindow_navigation a:link,
	#lightwindow_navigation a:visited,
	#lightwindow_navigation a:hover,
	#lightwindow_navigation a:active { 
		/* REQUIRED */
		outline: none;
		/* REQUIRED */
	}

	#lightwindow_previous, 
	#lightwindow_next {
		width: 49%;
		height: 100%;
		background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
		display: block;
	}
	
	#lightwindow_previous { 
		float: left;
		left: 0px;
	}

	#lightwindow_next { 
		float: right;
		right: 0px;
	}

	#lightwindow_previous:hover, 
	#lightwindow_previous:active { 
		background: url(../images/prevlabel.gif) left 15% no-repeat; 
	}

	#lightwindow_next:hover, 
	#lightwindow_next:active { 
		background: url(../images/nextlabel.gif) right 15% no-repeat; 
	}
	
	#lightwindow_previous_title,
	#lightwindow_next_title {
		display: none;
	}
	 	
#lightwindow_galleries {
	width: 100%;
	position: absolute;
	z-index: 50; 
	display: none;
	overflow: hidden;
	margin: 0 0 0 10px;
	bottom: 0px;
	left: 0px;
}

	#lightwindow_galleries_tab_container {
		width: 100%;
		height: 0px;
		overflow: hidden;
	}

	a#lightwindow_galleries_tab,		
	a:link#lightwindow_galleries_tab,
	a:visited#lightwindow_galleries_tab {
		display: block;
		height: 20px;
		width: 77px;
		float: right;
		line-height: 22px;
		color: #ffffff;
		text-decoration: none;
		font-weight: bold;
		cursor: pointer;
		font-size: 11px;
		color: #ffffbe;
		background: url(../images/black-70.png) repeat 0 0 transparent;
	}
	
	* html a#lightwindow_galleries_tab,		
	* html a:link#lightwindow_galleries_tab,
	* html a:visited#lightwindow_galleries_tab {	
		background: none;
		background-color: #000000;
		opacity: .70;
		filter: alpha(opacity=70);
	}

	a:hover#lightwindow_galleries_tab,
	a:active#lightwindow_galleries_tab {
		color: #ffffbe;

	}

	#lightwindow_galleries_tab_span {
		display: block;
		height: 20px;
		width: 63px;
		padding: 0 7px 0 7px;
	}
	
	#lightwindow_galleries_tab .up	{
		background: url(../images/arrow-up.gif) no-repeat 60px 5px transparent;
	}

	#lightwindow_galleries_tab .down {
		background: url(../images/arrow-down.gif) no-repeat 60px 6px transparent;
	}

	#lightwindow_galleries_list {
		background: url(../images/black-70.png) repeat 0 0 transparent;
		overflow: hidden;
		height: 0px;
	}

	* html #lightwindow_galleries_list {
		background: none;
		background-color: #000000;
		opacity: .70;
		filter: alpha(opacity=70);
	}	

	.lightwindow_galleries_list {
		width: 200px;
		float: left;
		margin: 0 0 10px 0;
		padding: 10px;
	}

	.lightwindow_galleries_list h1 {	
		color: #09F;
		text-decoration: none;
		font-weight: bold;
		cursor: pointer;
		padding: 10px 0 5px 0;
		font-size: 16px;
	}

	.lightwindow_galleries_list li {
		margin: 5px 0 5px 0;
		list-style-type: none;
	}

	.lightwindow_galleries_list a, 
	.lightwindow_galleries_list a:link, 
	.lightwindow_galleries_list a:visited {
		display: block;
		line-height: 22px;
		color: #ffffff;
		text-decoration: none;
		font-weight: bold;
		cursor: pointer;
		padding: 0 0 0 10px;
		font-size: 11px;
	}

	.lightwindow_galleries_list a:hover, 
	.lightwindow_galleries_list a:active {
		background: #000000;
		color: #ffffbe;
		border-left: 3px solid #ffffbe;
		padding: 0 0 0 7px;
	}
		
#lightwindow_data {
	/* REQUIRED */
	position: absolute;
	/* REQUIRED */
}

	#lightwindow_data_slide {
		/* REQUIRED */
		position: relative;
		/* REQUIRED */
	}

	#lightwindow_data_slide_inner {
		background-color: #ffffff;
		padding: 0 10px 10px 10px;
	}

	#lightwindow_data_caption {
		padding: 10px 0 0 0;
		color: #666666;
		line-height: 25px;
		background-color: #ffffff;
		clear: both;
	}

	#lightwindow_data_details {
		background-color: #f0f0f0;
		padding: 0 10px 0 10px;
		height: 20px;
	}
	
	#lightwindow_data_author_container {
		width: 40%;
		text-align: right;
		color: #666666;
	 	font-style: italic;
		font-size: 10px;
		line-height: 20px;
		float: right;
		overflow: hidden;
	}
	
	#lightwindow_data_gallery_container {
		font-size: 10px;
		width: 40%;
		text-align: left;
		color: #666666;
		line-height: 20px;
		float: left;
		overflow: hidden;
	}
	
#lightwindow_title_bar {
	height: 25px;
	overflow: hidden;		
}

	#lightwindow_title_bar_title {
		color: #ffffbe;
		font-size: 14px;
		line-height: 25px;
		text-align: left;
		float: left;
	}

	a#lightwindow_title_bar_close_link,	
	a:link#lightwindow_title_bar_close_link,
	a:visited#lightwindow_title_bar_close_link {
		float: right;
		text-align: right;		
		cursor: pointer;
		color: #ffffbe;
		line-height: 25px;
		padding: 0;
		margin: 0;
	}
	
	a:hover#lightwindow_title_bar_close_link,
	a:active#lightwindow_title_bar_close_link {
		color: #ffffff;
	}

/*-----------------------------------------------------------------------------------------------
	Theme styling stuff
-----------------------------------------------------------------------------------------------*/	

#lightwindow p {
	color: #000000;
	padding-right: 10px;
}






/*To style the footer, we first need to set it to "clear: both". This is critical, as it will force the footer below any floated elements above. We then add "padding: .5em" and "margin: 0" .*/
#footer
{
clear: both;
margin: 0;
padding: 1.6em;
color: #333;
border-top: 0px solid #fff;
text-align: center;
font-size:x-small;
background-color:#171B20;
position: relative; bottom:1px;
}

#footerlinks
{
	margin: 0; 
	/*padding: 0.5em 0em ;*/
	padding-bottom: 0.5em;
	padding-left: 0em ; /*to move links*/
	padding-right: 0em;
	padding-top: 0m;
	color: #666; 
	border-bottom: px solid #c7d92c;
}

#footerlinks li {
	display: inline;
	margin-right: 0.5em; 
	padding-right: 0.75em;
	padding-bottom: 0px;
	padding-top: 0px;
	border-right: 1px solid grey;
}

/*#footerlinks li.last {
	border-right: 0;
}*/

#footerlinks a {
	color: #666;
	text-decoration:none;
}

#footerlinks a:hover {
	color: 333;
	margin-top: 0px;
	padding-bottom: 0px;
	border-bottom: 1px solid #c7d92c;}/*yellow #c7d92c*/

/*To remove the space above content in the "lefnav", "rightnav" and "content" divs, use the following rules: "#leftnav p, #rightnav p { margin: 0 0 1em 0; }" and "#content h2 { margin: 0 0 .5em 0; }".

#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }*/


/*f you want to set a maximum width on your main content, you can do this by adding a new rule: "#content { max-width: 36em; }".

max-width: 36em;


</style>*/


The divs are labeled; "container" (wrapped around the entire page's content), "top" (for the top banner), "leftnav" (for the smaller, left column), "rightnav" (for the smaller right column), "content" (for the main content) and "footer" (for the footer across the bottom of the page).