/*
##-------------------------------------------------------------------
##
## FILE: localhost.css for use on Common/MAKE localhosts
## CREATED: 03/07/08 by Ben Childs, Common Agency Ltd.
##
## NOTES:
##
##-------------------------------------------------------------------
*/

/*
 SOME RULES FOR CONSISTENCY. NOT TO LIVE HERE FOREVER BUT JUST FOR NOW...
 
 1. Order CSS properties consistently for easier co-working. I think of it
 as structure followed by styling [often separated completely]. As a rule,
 you can't style something until you've built it! Therefore, working from the 'outside'
 of an element inwrads it should be something like...
 display, float, clear,  etc
 positioning, z-index, etc
 height, width, etc
 margin, border, padding [in that order - working out to in]
 border styling, rounded corners, etc [in css 3]
 background
 fonts
 text-alignment, text-decoration, etc.
 anything else
 
 2. Consistent code styling/layout. Agree preferred closing bracket position - indented or not?
 
 3. Stick to lowercase for properties where possible.
 
 4. Always use shorthand unless there is a good reason not to. Check out http://www.dustindiaz.com/css-shorthand/ if in doubt.
 
 5. Where suitable, indent/next related styles e.g. h3 span.bullet would be nested just after h3.
 
*/

/*-------------------------------------------------------------------
## CLIENT SPECIFIC NOTES

Main color: #000000 background
Secondary colors: 
	medieval bg: #E5E0C4
	industry bg: #40AACA
	now bg: #AEC226
	lords bg: #8E6FC7
	prehistoric bg: #DE954D
	memories bg: #C1B77E
Preferred web font: Verdana



/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## HTML ELEMENTS START HERE */

body {
	padding: 0 8px 0 8px; /* Side-margins help with alignment at 800 x 600 */
	background-color: #000000;
	line-height: 0.7em;
	height: 100%;
}

body.home {
}

hr {
	display:block;
	clear:both;
	visibility:hidden;
	height: 0;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

	hr.mediaDivider {
		display: block;
		visibility: visible;
		width: 256px;
		height: 1px;
		margin: 4px 0 4px 0;
		background-color: #666666;
		color: #666666;
	}

dl {
	margin: 0px 22px;
}

dl dd {
	margin: 0 0 0 0;
}

dl dt {
	font-size: 1.3em;
	font-weight: bold;
}

h1 {
	display: block;
	float: left;
	width: 100%;
	margin: 5px 0;
	font: normal normal normal 2.4em/1.0em "Lucida Sans Unicode", "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	text-indent: 10px;
	letter-spacing: 0.25em;
}

body.home h1 {
	display: none;
	}
	
h2 {
	display: block;
	width: 100%;
	margin: 0 0 10px 0;
	font: normal normal normal 1.8em/1.0em "Lucida Sans Unicode", "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

body.home h2 {
	display: block;
	background: url(/x/img/home-maintitle.gif) top left no-repeat;
	height: 83px;
	width: 319px;
}
	body.home h2 span {
		display: none;
	}

h3 {
	display: block;
	width: 100%;
	margin: 0 0 3px 0;
	padding: 5px 0 5px 5px;
	font: normal normal normal 1.4em/1.0em "Lucida Sans Unicode", "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

.comp3 h3 {
	display: block;
	width: 100%;
	margin: 0 0 0 0;
	padding: 100px 0 5px 0;
	font: normal normal normal 1.8em/1.0em Verdana, Arial, sans-serif;
	color: #000000;
}

h4 {
	display: block;
	margin: 0;
	padding: 5px 0 5px 5px;
	font: normal normal normal 1.4em/1.0em "Lucida Sans Unicode", "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

a {
	text-decoration: underline;
	color: #333333;
}

a:hover {
	color: #000000;
	text-decoration: none;
}

img {
	border: none 0px;
}

p {
	margin: 0 0 1em 0;
	font: normal normal normal 1.1em/1.2em Verdana, Arial, sans-serif;
}

.footer p {
	display: block;
	float: left;
	width: 550px;
	padding: 20px 10px 10px 10px;
	text-align: center;
}
	
.footer img.heritageLotteryLogo {
	display: block;
	float: left;
	width: 101px;
	margin: 0 0 0 20px;
}

pre {
	font-size: 1.1em;
}

table,td,th {
	border: none 0;
}

td {
	text-align: left;
	vertical-align: top;
}

th {
	text-align: left;
	vertical-align: middle;
}

ul {
	display: block;
	margin: 0 12px 12px 6px;
	padding: 0;
}

	ul.linkList {
		padding: 0 0 0 0;
		}

		ul.linkList li {
			margin: 0 0 4px 0;
			list-style: none;
			}
			
			ul.linkList li a {
				padding: 3px;
				background: #333333;
				color: #ffffff;
				font: normal normal bold 0.8em/1.0em Verdana;
				text-decoration: none;
				text-transform: uppercase;
				}
			
			ul.linkList li a:hover {
				background: #ff0000;
				}

li {
	list-style:square inside;
	font: normal normal normal 1.2em/1.4em "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
}

.comp3 span {
	margin: 0 0 1em 0;
	font: normal normal normal 1.0em/1.0em Verdana, Arial, sans-serif;
}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## MAIN LAYOUT BLOCKS START HERE

REMEMBER... the crux of this layout is a columns based format, centrally aligned, which is optimised
for 1024 x 768 but degrades gracefully to support 800 x 600 as long as no more than 12-columns are
used. The ideal is 12-col + stacked 3-cols, where the 3-cols should contain supplementary content
or advertising that will wrap beneath the 12-col block on smaller screens.

*/

/* header */
.blockheader {
	display: block;
	position: relative;
	width: 960px;
	height: 150px;
	margin: 0 auto;
	border: none;
	padding: 0;
	background-color: #000000;
}

body.home .blockheader {
	display: block;
	position: relative;
	width: 960px;
	height: 225px;
	margin: 0 auto;
	border: none;
	padding: 0;
	background: url(/x/img/home-header.jpg) no-repeat;
}

/* central wrapper */
.blockcontent {
	display: block;
	width: 960px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
}

body.home .blockcontent {
	background: url(/x/img/home-background.jpg) top repeat-y; 
	width: 990px;
}


.blockcontentIndustry{
	background: url(/x/img/industry/background.jpg) top repeat-y;
}

.blockcontentLords {
	background: url(/x/img/lords/background.jpg) top repeat-y;
}

.blockcontentMedieval {
	background: url(/x/img/medieval/background.jpg) top repeat-y;
}

.blockcontentMemories {
	background: url(/x/img/memories/background.jpg) top repeat-y;
}

.blockcontentNow {
	background: url(/x/img/now/background.jpg) top repeat-y;
}

.blockcontentPrehistoric {
	background: url(/x/img/prehistoric/background.jpg) top repeat-y;
}

.blockcontentFuture {
	background: url(/x/img/future/background.jpg) top repeat-y;
}

/* footer */
.blockfooter {
	display: block;
	width: 700px;
	height: 100px;
	margin: 50px auto 0 auto;
	padding: 0 0 10px 0;
	background: white;
}

/* Layout columns*/

	
.leftcolumn{
	width: 112px;
	height: 100%;
	float: left;
	
}

body.home .leftcolumn {
	width: 112px;
	float: left;
	padding: 30px 0 0 15px;
}

.rightcolumn{
	width: 112px;
	height: 100%;
	float: left;

}


/*end*/


/* Centre column dependant on time period areas  */

body.home .centrecolumn {
	width: 863px;
	padding: 20px 0 0 0;
	float: left;
	background: url(/x/img/home-knights.jpg) top right no-repeat;
}

.centrecolumnIndustry{
	width: 736px;
	float: left;
	background:  #C1B77E;
}

.centrecolumnLords{
	width: 736px;
	float: left;
	background: #8E6FC7;
}

.centrecolumnMedieval{
	width: 736px;
	float: left;
	background: #E5E0C4;
}

.centrecolumnMemories{
	width: 736px;
	float: left;
	background: #AEC226 ;
}

.centrecolumnNow{
	width: 736px;
	float: left;
	background: #40AACA;
}

.centrecolumnPrehistoric{
	width: 736px;
	float: left;
	background: #DE954D;
}

.centrecolumnFuture{
	width: 736px;
	float: left;
	background: #e4e0c4;
}
/*end*/







/* Components [grouped blocks of content within columns] */

.comp0 {
	display: inline-block;
	float: left;
	width: 385px;
}

.comp1 /*button navigation area*/ {
	/*display: block;*/
	display: block;
	float: left;
	width: 120px; 
	padding: 0;
	margin: 0;
	*margin: 0 0 0 -15px; /*Fix for IE display of left nav - this may need changing and putting in the other IE style sheets */
}

.comp2 /*thumbnail area */ {
	display: block;
	float: left;
	width: 260px;
	padding: 0 0 0 5px;
	margin: 0 0 0 0;
	*margin: 0 0 0 15px; /*Fix for IE display of left nav - this may need changing and putting in the other IE style sheets */
}

.comp3 /* media viewer area */{
	float: left;
	width: 338px; 
	padding: 0 5px 0 5px;
	margin: 0 0 0 0;
}

	.comp3 p {
		font-size: 1.2em;
	}

/* Theme titles */
h1.contentPageTitle {
	width: 385px;
	height: 100px;
	text-align: right;
}

	.blockcontentPrehistoric h1.contentPageTitle {background: url('/x/img/static/titles/prehistoric_titleBg_219x55.gif') top left no-repeat;}
	.blockcontentMedieval h1.contentPageTitle {background: url('/x/img/static/titles/medieval_titleBg_240x50.gif') top left no-repeat;}
	.blockcontentLords h1.contentPageTitle {background: url('/x/img/static/titles/lords_titleBg_240x50.gif') top left no-repeat;}
	.blockcontentIndustry h1.contentPageTitle {background: url('/x/img/static/titles/industry_titleBg_255x52.gif') top left no-repeat;}
	.blockcontentMemories h1.contentPageTitle {background: url('/x/img/static/titles/memories_titleBg_250x48.gif') top left no-repeat;}
	.blockcontentNow h1.contentPageTitle {background: url('/x/img/static/titles/now_titleBg_260x55.gif') top left no-repeat;}
	.blockcontentFuture h1.contentPageTitle {background: url('/x/img/static/titles/future_titleBg_260x55.gif') top left no-repeat;}
	.blockcontentFutureMap h1.contentPageTitle {background: url('/x/img/static/titles/future_titleBg_260x55.gif') top left no-repeat;}
	
/* Oher content related blocks */
	
	
.thumbHolder {
	display: block;
	float: left;
	width: 82px;
	height: 82px;
	overflow: hidden;
	margin: 0 4px 4px 0;
}

	.thumbHolder a {
		display: block;
		position: relative;
		overflow: hidden;
		width: 78px;
		height: 78px;
		border: 2px solid transparent;
		text-align: center;
	}

		.thumbHolder a img {
			display: block;
			position: relative;
			margin: -10% 0 0 -10%;
		}

.thumbwrap {
	width: 268px;
	margin: 10px auto 0 auto;
}

.thumbwrap a:hover {
	border: 2px solid #FFFFFF;
}

.videoHolder {
	display: block;
	float: left;
	width: 254px;
	height: 82px;
	overflow: hidden;
	margin: 0 4px 4px 0;
	background: url('/x/img/videothumbbg.gif') top right no-repeat;
}

	.videoHolder a {
		display: block;
		position: relative;
		overflow: hidden;
		width: 254px;
		height: 82px;
		border: 0;
		text-decoration: underline;
		color: #000000;
	}
	
		.videoHolder a:hover {
			border: 0;
			color: #ffffff;
		}

			.videoHolder a:hover span {
				color: #ffffff;
			}

		.videoHolder a img {
			display: block;
			position: relative;
			float: left;
			width: 78px;
			height: 78px;
		}
		
		.videoHolder a:hover img{
			border: 2px solid #FFFFFF;
			}
			

		.videoHolder a span {
			display: block;
			position: relative;
			float: left;
			width: 145px;
			padding: 4px 0 4px 8px;
			font-size: 1.2em;
			text-decoration: none;
		}

ul.audioHolder, ul.docHolder {
	display: block;
	float: left;
	width: 250px;
	margin: 0 0 4px 0;
	padding: 0 0 4px 0;
	/*background: url('/x/img/videothumbbg.gif') top right no-repeat;*/
}

ul.audioHolder li, ul.docHolder li {
	display: block;
	float: left;
	width: 250px;
	padding: 0 0 0 20px;
	/*list-style: square inside url('/x/img/document_ico.gif');*/
	list-style: none;
	background: transparent url('/x/img/document_ico.gif') 0 2px no-repeat;
}
	
ul.audioHolder li {
	background: transparent url('/x/img/audio_ico.gif') 0 2px no-repeat;
}

	ul.audioHolder li a, ul.docHolder  li a {
		display: block;
		position: relative;
		width: 200px;
		padding: 4px 25px 4px 5px;
		border: 0;
		font-size: 1.2em;
		color: #000000;
		text-decoration: underline;
		background: transparent url('/x/img/videothumbbg.gif') 212px -12px no-repeat;
	}
	
		ul.audioHolder li a:hover, ul.docHolder li a:hover {
			border: 0;
			color: #ffffff;
		}

			ul.audioHolder li a:hover span, ul.docHolder li a:hover span {
				color: #ffffff;
			}			
		
.thumbwrapIndustry a, .videowrapIndustry a img { border: 2px solid #C1B77E ;}
.thumbwrapLords a, .videowrapLords a img { border: 2px solid #8E6FC7;}
.thumbwrapMedieval a, .videowrapMedieval a img { border: 2px solid #E5E0C4;}
.thumbwrapMemories a, .videowrapMemories a img { border: 2px solid #AEC226;}
.thumbwrapNow a, .videowrapNow a img { border: 2px solid  #40AACA;}
.thumbwrapPrehistoric a, .videowrapPrehistoric a img { border: 2px solid #DE954D;}
.thumbwrapFuture a, .videowrapFuture a img { border: 2px solid #DE954D;}

.videowrapIndustry:hover, li.docwrapIndustry a:hover, li.audiowrapIndustry a:hover  { background-color: #AFA359; }
.videowrapLords:hover, li.docwrapLords a:hover, li.audiowrapLords a:hover { background-color: #6B45B4; }
.videowrapMedieval:hover, li.docwrapMedieval a:hover, li.audiowrapMedieval a:hover  { background-color: #C7BC81; }
.videowrapMemories:hover, li.docwrapMemories a:hover, li.audiowrapMemories a:hover { background-color: #8C9C1F; }
.videowrapNow:hover, li.docwrapNow a:hover, li.audiowrapNow a:hover { background-color: #2F8EAA; }
.videowrapPrehistoric:hover, li.docwrapPrehistoric a:hover, li.audiowrapPrehistoric a:hover { background-color: #D37D27;}
.videowrapFuture:hover, li.docwrapFuture a:hover, li.audiowrapFuture a:hover { background-color: #D37D27;}

.media { /*class for spacing above and below media div, specific div styling is applied to mainMEDIAHolderTIMEPERIOD */
	margin: 5px 0 15px 0;
}

#mediaPlayer { /*class to be rewritten using javascript as the media player for video and audio */
	margin: 5px 0 15px 0;
}

.footer {
	width: 700px;
	height: 70px;
	margin: 20px 0 0 20px;
}


/* ADDED FOR ICON DISPLAY */

img.documenticon {
	position: relative;
	float: right;
	margin: -25px 5px 0 0;
}

img.viewlarger {
	float: right;
	position: relative;
	margin: -40px 10px 0 0;
	}



/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## NAVIGATION STYLES START HERE */

/*SIDE BUTTON NAV FOR TIME PERIOD AREAS*/

.comp1 ul {
	margin: 10px 0 0 0;
	padding: 0;
}

.comp1 ul li{
	list-style-type: none;
	padding: 0 0 10px 0;
}

.comp1 ul li a {
	background: 0px 0px no-repeat;
	display:block;
	border: none;
	width: 120px;
	height: 50px;
	}

.comp1 ul li a span {
	display:none;
}

.comp1 ul li a:hover{
	background-position: 0px -50px !important;
}

.comp1 ul li a.selected {
	background-position: 0px -100px !important;
}
.comp1 ul ul li a.selected {
	border: none;
}

/* Prehistoric */
.comp1 ul li a#prehistoricFossils { background-image: url('/x/img/static/nav/leftnav/prehistoric_fossils_120x150.gif'); }
.comp1 ul li a#prehistoricDiscovery { background-image: url('/x/img/static/nav/leftnav/prehistoric_discovery_120x150.gif'); }
.comp1 ul li a#prehistoricCarboniferous { background-image: url('/x/img/static/nav/leftnav/prehistoric_carboniferous_120x150.gif'); }

/* Medieval */
.comp1 ul li a#medievalAxe { background-image: url('/x/img/static/nav/leftnav/medieval_axe_120x150.gif'); }
.comp1 ul li a#medievalHistory { background-image: url('/x/img/static/nav/leftnav/medieval_history_120x150.gif'); }
.comp1 ul li a#medievalCastle { background-image: url('/x/img/static/nav/leftnav/medieval_castle_120x150.gif'); }

/* Lords */
.comp1 ul li a#lordsOakenrod { background-image: url('/x/img/static/nav/leftnav/lords_oakenrod_120x150.gif'); }
.comp1 ul li a#lordsCastleinn { background-image: url('/x/img/static/nav/leftnav/lords_castleinn_120x150.gif'); }

/* Industry */
.comp1 ul li a#industryWorkinglife { background-image: url('/x/img/static/nav/leftnav/industry_workinglife_120x150.gif'); }
.comp1 ul li a#industryLaundry { background-image: url('/x/img/static/nav/leftnav/industry_laundry_120x150.gif'); }
.comp1 ul li a#industryGasworks { background-image: url('/x/img/static/nav/leftnav/industry_gasworks_120x150.gif'); }
.comp1 ul li a#industryMills { background-image: url('/x/img/static/nav/leftnav/industry_mills_120x150.gif'); }

/* Memories */
.comp1 ul li a#memoriesPeople { background-image: url('/x/img/static/nav/leftnav/memories_people_120x150.gif'); }
.comp1 ul li a#memoriesFaith { background-image: url('/x/img/static/nav/leftnav/memories_faith_120x150.gif'); }
.comp1 ul li a#memoriesEducation { background-image: url('/x/img/static/nav/leftnav/memories_education_120x150.gif'); }
.comp1 ul li a#memoriesSport { background-image: url('/x/img/static/nav/leftnav/memories_sport_120x150.gif'); }

/* Now */
.comp1 ul li a#nowWhat { background-image: url('/x/img/static/nav/leftnav/now_what_120x150.gif'); }
.comp1 ul li a#nowPeople { background-image: url('/x/img/static/nav/leftnav/now_people_120x150.gif'); }
.comp1 ul li a#nowMosque { background-image: url('/x/img/static/nav/leftnav/now_mosque_120x150.gif'); }
.comp1 ul li a#nowBusiness { background-image: url('/x/img/static/nav/leftnav/now_business_120x150.gif'); }

/* Future */
.comp1 ul li a#futurePeople { background-image: url('/x/img/static/nav/leftnav/future_people_120x150.gif'); }
.comp1 ul li a#futureParks { background-image: url('/x/img/static/nav/leftnav/future_parks_120x150.gif'); }
.comp1 ul li a#futureSkills { background-image: url('/x/img/static/nav/leftnav/future_skills_120x150.gif'); }
.comp1 ul li a#futureMap { background-image: url('/x/img/static/nav/leftnav/future_map_120x150.gif'); }

/*GENERIC RIGHT SIDE NAV FOR STATIC PAGES*/

.rightSideNav {
	margin: 20px 0 0 40px;
	}
	
.rightSideNav ul {
	padding: 0;
	margin: 0;
}

.rightSideNav ul li{
	list-style-type: none;
	padding: 0 0 10px 0;
}

.rightSideNav ul li a{
	background: top no-repeat;
	display:block;
	border: none;
	width: 76px;
	}

.rightSideNav ul li a span {
	display:none;
}

.rightSideNav ul li a:hover, .rightSideNav ul li a.selected {
	background-position: bottom !important;
}

.rightSideNav ul li a#home { height: 25px; background-image: url(/x/img/sidenav-home.gif); }
.rightSideNav ul li a#timeline  { width: 86px; height: 29px; background-image: url(/x/img/sidenav-timeline.gif); }
.rightSideNav ul li a#sparthmap  { height: 29px; background-image: url(/x/img/sidenav-sparthmap.gif); }
.rightSideNav ul li a#thefuture  { height: 30px; background-image: url(/x/img/sidenav-thefuture.gif); }
.rightSideNav ul li a#contacts  { height: 31px; background-image: url(/x/img/sidenav-contacts.gif); }
.rightSideNav ul li a#sitemap  { height: 23px; background-image: url(/x/img/sidenav-sitemap.gif); }


/*-------------------------------------------------------------------
HOME PAGE CUSTOM ITEMS */

a.timelinebutton span{
	display: none;
}

a.timelinebutton {
	background: url(/x/img/home-timelinebutton.gif) top no-repeat;
	display:block;
	width:88px;
	height: 88px;
	outline: none;
	margin: 0 0 0 40px;
}

.leftcolumn a.timelinebutton {
	background: url(/x/img/home-timelinebutton-black.gif) top no-repeat;
	margin: 15px 0 0 5px;
}

a.timelinebutton:hover{
	background-position: bottom;
}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## FORM STYLES START HERE */

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## ADMIN STYLES START HERE */

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## BUTTON STYLES START HERE */

.buttonPanel a, .buttonPanel button, table td.buttons a {
	display:block;
	float:left;
	margin:0 7px 0 0;
	background-color:#f5f5f5;
	border:1px solid #999999; border-top:1px solid #cccccc; border-left:1px solid #cccccc;
	font: normal normal bold 1.1em/1.4em "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
	text-decoration:none;
	color:#565656;
	cursor:pointer;
	padding:5px 10px 6px 7px; /* Links */
}

	table td.buttons a {
		font-size: 0.9em;
		padding: 2px 5px 2px 5px;
	}

.buttonPanel button {
	overflow: visible;
	width: auto;
	padding: 4px 10px 3px 7px; /* IE6 */
}
.buttonPanel button[type] {
	padding: 5px 10px 5px 7px; /* Firefox */
	line-height: 17px; /* Safari */
}
*:first-child+html button[type] {
	padding: 4px 10px 3px 7px; /* IE7 */
}
.buttonPanel button img, .buttonPanel a img, table td.buttons a img {
	margin: 0 3px -3px 0 !important;
	padding: 0;
	border: none;
	width: 16px;
	height: 16px;
}

/* Standard actions */
.buttonPanel button:hover, .buttonPanel a:hover, table td.buttons a:hover {
	background-color: #dff4ff;
	border: 1px solid #c2e1ef;
	color: #336699;
}
.buttonPanel a:active, table td.buttons a:active {
	background-color: #6299c5;
	border: 1px solid #6299c5;
	color: #ffffff;
}

/* Positive actions */
button.positive, .buttonPanel a.positive, table td.buttons a.positive {
	color: #529214;
}
.buttonPanel a.positive:hover, button.positive:hover, table td.buttons a.positive:hover {
	background-color: #E6EFC2;
	border: 1px solid #C6D880;
	color: #529214;
}
.buttonPanel a.positive:active, table td.buttons a.positive:active {
	background-color: #529214;
	border: 1px solid #529214;
	color: #fff;
}

/* Negative actions */
.buttonPanel a.negative, button.negative, table td.buttons a.negative {
	color: #d12f19;
}
.buttonPanel a.negative:hover, button.negative:hover, table td.buttons a.negative:hover {
	background: #fbe3e4;
	border: 1px solid #fbc2c4;
	color: #d12f19;
}
.buttonPanel a.negative:active, table td.buttons a.negative:active {
	background-color: #d12f19;
	border: 1px solid #d12f19;
	color: #ffffff;
}


/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## TABLE STYLES START HERE */

table {
	width: 100%;
	margin: 5px 0 0 0;
}

	table tr td, table tr th {
		border-bottom: 1px solid #cccccc;
	    padding: 3px;
	    font: normal normal normal 1.2em/1.0em Helvetica, Arial, sans-serif;
	    vertical-align: middle;
	}
	
	table tr th {
		border-bottom: 1px solid #333333;
		font-weight: bold;
	}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## MESSAGE DISPLAY STYLES START HERE */

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## FUNCTIONAL STYLES START HERE */

/* float clearer */
.fc, .s{
	clear: both;
	visibility: hidden;
	overflow: hidden;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	line-height: 0;
}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## FOOTER STYLES START HERE */

.blockFooter a {
	color: #5F532F;
}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## DEBUG STYLES START HERE */

.blockDebug {
	width: 760px;
	margin: 0 auto;
	border: 1px dashed #999999;
	padding: 0px;
	background-color: #ffffff;
	text-align: left;
}

.blockDebug {
	margin-top: 15px;
}

.blockDebug li strong {
	font-size: 12px;
}

.blockDebug pre {
	color: blue;
	font-size: 11px;
}

/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
## REMAINING MISC STYLES START HERE */

/*-------------------------------------------------------------------*/

body.home p.intro {
	display: block;
	font: normal normal normal 1.2em/1.2em Verdana, Arial, sans-serif;
	width: 310px;
	color: #000000;
	}
	
	body.home p.introNote {
		display: block;
		float: left;
		font: normal normal bold 1.2em/1.1em Verdana, Arial, sans-serif;
		width: 310px;
		padding: 0 0 10px 0;
		color: #a32111;
	}

body.home p.timelinebutton {
	display: block;
	float: left;
	width: 200px;
	}
	
/* SPARTH MAP PAGE! */

.blockcontentMap {
	background: url(/x/img/map/background.jpg) top repeat-y;
}

.centrecolumnMap{
	width: 736px;
	float: left;
	background: #E5E0C4;
	margin: 20px 0 0 0;
}

.map{
	background: url(/x/img/map/map-bg.jpg) top no-repeat;
	height: 932px;
	width: 734px;
	color: #FFFFFF;
}

.maparea li {
	list-style-type:none;
	}
	
.maparea ul li ul {
	display:none;
	margin: 5px;
	}
.maparea ul li:hover ul {
	display:block;
}
.maparea ul li ul li {
	background: #333333;
	font: normal normal normal 0.9em/1em Verdana, Arial, sans-serif;
	padding: 3px 3px 0px 3px;
	}
	
.maparea_1 {position: relative; float: left; width: 135px; height: 60px; top:23px; left: 150px;}
.maparea_1 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button1.gif) top no-repeat;}
.maparea_1 a:hover{ background:url(/x/img/map/button1.gif) bottom no-repeat;}
	
.maparea_2 {position: relative; float: left; width: 121px; height: 60px; top:10px; left: 37px;}
.maparea_2 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button2.gif) top no-repeat;}
.maparea_2 a:hover{ background:url(/x/img/map/button2.gif) bottom no-repeat;}

.maparea_3 {position: relative; float: left; width: 115px; height: 60px; top: 0; left: 27px;}
.maparea_3 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button3.gif) top no-repeat;}
.maparea_3 a:hover{ background:url(/x/img/map/button3.gif) bottom no-repeat;}

.maparea_4 {position: relative; float: left; width: 125px; height: 60px; top:20px; left: 360px;}
.maparea_4 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button4.gif) top no-repeat;}
.maparea_4 a:hover{ background:url(/x/img/map/button4.gif) bottom no-repeat;}

.maparea_5 {position: relative; float: left; width: 145px; height: 60px; top:50px; left: 250px;}
.maparea_5 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button5.gif) top no-repeat;}
.maparea_5 a:hover{ background:url(/x/img/map/button5.gif) bottom no-repeat;}

.maparea_6 {position: relative; float: left; width: 110px; height: 60px; top:10px; left: 107px;}
.maparea_6 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button6.gif) top no-repeat;}
.maparea_6 a:hover{ background:url(/x/img/map/button6.gif) bottom no-repeat;}

.maparea_7 {position: relative; float: left; width: 125px; height: 60px; top:45px; left: 85px;}
.maparea_7 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button7.gif) top no-repeat;}
.maparea_7 a:hover{ background:url(/x/img/map/button7.gif) bottom no-repeat;}

.maparea_8 {position: relative; float: left; width: 95px; height: 60px; top:90px; left: 67px;}
.maparea_8 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button8.gif) top no-repeat;}
.maparea_8 a:hover{ background:url(/x/img/map/button8.gif) bottom no-repeat;}

.maparea_9 {position: relative; float: left; width: 122px; height: 60px; top:10px; left: 300px;}
.maparea_9 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button9.gif) top no-repeat;}
.maparea_9 a:hover{ background:url(/x/img/map/button9.gif) bottom no-repeat;}

.maparea_10 {position: relative; float: left; width: 95px; height: 60px; top:40px; left: 225px;}
.maparea_10 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button10.gif) top no-repeat;}
.maparea_10 a:hover{ background:url(/x/img/map/button10.gif) bottom no-repeat;}

.maparea_11 {position: relative; float:left; width: 175px; height: 60px; top:120px; left: 160px;}
.maparea_11 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button11.gif) top no-repeat;}
.maparea_11 a:hover{ background:url(/x/img/map/button11.gif) bottom no-repeat;}

.maparea_12 {position: relative; float: left; width: 140px; height: 60px; top:60px; left: 387px;}
.maparea_12 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button12.gif) top no-repeat;}
.maparea_12 a:hover{ background:url(/x/img/map/button12.gif) bottom no-repeat;}

.maparea_13 {position: relative; float: left; width: 131px; height: 60px; top:40px; left: 197px;}
.maparea_13 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button13.gif) top no-repeat;}
.maparea_13 a:hover{ background:url(/x/img/map/button13.gif) bottom no-repeat;}

.maparea_14 {position: relative; float: left; width: 135px; height: 60px; top:50px; left: 450px;}
.maparea_14 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button14.gif) top no-repeat;}
.maparea_14 a:hover{ background:url(/x/img/map/button14.gif) bottom no-repeat;}

.maparea_15 {position: relative; float:left; width: 145px; height: 60px; top:110px; left: 250px;}
.maparea_15 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button15.gif) top no-repeat;}
.maparea_15 a:hover{ background:url(/x/img/map/button15.gif) bottom no-repeat;}

.maparea_16 {position: relative; float: left; width: 115px; height: 60px; top:20px; left: 485px;}
.maparea_16 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button16.gif) top no-repeat;}
.maparea_16 a:hover{ background:url(/x/img/map/button16.gif) bottom no-repeat;}

.maparea_17 {position: relative; float: left; width: 125px; height: 60px; top:110px; left: 327px;}
.maparea_17 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button17.gif) top no-repeat;}
.maparea_17 a:hover{ background:url(/x/img/map/button17.gif) bottom no-repeat;}

.maparea_18 {position: relative; float: left; width: 135px; height: 60px; top:23px; left: 140px;}
.maparea_18 a{ display:block; width:22px; height: 21px; background:url(/x/img/map/button18.gif) top no-repeat;}
.maparea_18 a:hover{ background:url(/x/img/map/button18.gif) bottom no-repeat;}


/* FUTURE MAP */

.blockcontentFutureMap {
	background: url(/x/img/future/background.jpg) top repeat-y;
}

.centrecolumnFutureMap{
	width: 736px;
	float: left;
	background: #E5E0C4;
	margin: 20px 0 0 0;
}

.Futuremap{
	background: url(/x/img/future/futuremap-bg.jpg) top no-repeat;
	height: 1039px;
	width: 734px;
	color: #FFFFFF;
	padding: 0 0 200px 0;
}


.Futuremaparea {
	float: left;
	}
	
.Futuremaparea li {
	list-style-type:none;
	}

ul.link{
	margin: 0;
	list-style: none;
	width: 100px;
	}
	
.Futuremaparea ul.mapinfo {
	visibility: hidden;
	margin: 5px 0 5px 0;
	position: absolute;
	width: 335px;
	}
	
.Futuremaparea a img{ z-index: 1; border: none; padding: 2px; }
.Futuremaparea a:hover img{ z-index: 1; border: 2px solid #FFFFFF; padding: 0;}

.Futuremaparea ul.mapinfo li {
	background: #333333;
	font: normal normal normal 1.0em/1.3em Verdana, Arial, sans-serif;
	padding: 3px;
	}
	
.mapimage_1 { z-index: 86; position: relative; top:140px; left: 20px;}
.mapimage_2 { z-index: 85; position: relative; top:140px; left: 100px;}
.mapimage_3 { z-index: 84; position: relative; top:100px; left: 280px;}

.mapimage_4 { z-index: 83; position: relative;  top:200px; left: 150px;}
.mapimage_5 { z-index: 82; position: relative;  top:200px; left: 170px;}
.mapimage_6 { z-index: 81; position: relative;  top:200px; left: 280px;}
.mapimage_7 { z-index: 80; position: relative;  top:180px; left: 300px;}

.mapimage_8 {z-index: 79; position: relative;  top:220px; left: 150px;}
.mapimage_9 {z-index: 78; position: relative;  top:220px; left: 170px;}
.mapimage_10 {z-index: 77; position: relative; top:200px; left: 400px;}

.mapimage_11 {z-index: 76; position: relative; top:280px; left: 150px;}
.mapimage_12 {z-index: 75; position: relative; top:280px; left: 170px;}

.mapimage_13 {z-index: 74; position: relative; top:280px; left: 150px;}
.mapimage_14 {z-index: 73; position: relative; top:280px; left: 170px;}
.mapimage_15 {z-index: 72; position: relative; top:280px; left: 250px;}
.mapimage_16 {z-index: 71; position: relative; top:300px; left: 300px;}

.mapimage_17 {z-index: 69; position: relative; top:300px; left: 20px;}
.mapimage_18 {z-index: 68; position: relative; top:310px; left: 20px;}
.mapimage_19 {z-index: 67; position: relative; top:310px; left: 20px;}

.mapimage_20 {z-index: 66; position: relative; top:300px; left: 20px;}
.mapimage_21 {z-index: 65; position: relative; top:300px; left: 130px;}
.mapimage_22 {z-index: 64; position: relative; top:290px; left: 220px;}
.mapimage_23 {z-index: 63; position: relative; top:290px; left: 240px;}
.mapimage_24 {z-index: 62; position: relative; top:290px; left: 220px;}

.mapimage_25 {z-index: 61; position: relative; top:300px; left: 20px;}
.mapimage_26 {z-index: 60; position: relative; top:260px; left: 70px;}
.mapimage_27 {z-index: 59; position: relative; top:290px; left: 250px;}
.mapimage_28 {z-index: 58; position: relative; top:290px; left: 270px;}

.mapimage_29 {z-index: 57; position: relative; top:300px; left: 20px;}
.mapimage_30 {z-index: 56; position: relative; top:250px; left: 50px;}
.mapimage_31 {z-index: 55; position: relative; top:300px; left: 320px;}
.mapimage_32 {z-index: 54; position: relative; top:290px; left: 320px;}

.mapimage_33 {z-index: 53; position: relative; top:240px; left: 130px;}
.mapimage_34 {z-index: 52; position: relative; top:240px; left: 140px;}
.mapimage_35 {z-index: 51; position: relative; top:240px; left: 230px;}




	
/* Timeline intro page*/

.centrecolumnTimeline{
	width: 736px;
	float: left;
	background: #AEC226;
	padding: 20px 0 0 0;
}

.centrecolumnTimeline p.content {
	font: normal normal normal 1.2em/1.2em Verdana, Arial, sans-serif;
	color: #000000;
	}
	
.centrecolumnTimeline .sideimg {
	float: left;
	width: 205px;
	margin: 10px 10px 40px 0;
	text-align: center;
	}
	
.centrecolumnTimeline .text {
	float: left;
	width: 500px;
	margin: 10px 0 40px 0;
	}
	
	
/* Contacts page*/
.contentContacts {
	margin: 0 auto;
	padding: 20px 0;
	width: 650px;
	background: #40AACA;
}

.contentContacts p {
	font: normal normal normal 1.2em/1.2em Verdana, Arial, sans-serif;
	}

.contentContacts .col1 {
	float: left;
	width: 370px;
	padding: 0 15px;
	}
	
.contentContacts .col2 {
	float: left;
	width: 200px;
	margin: 60px 0 0 0;
	padding: 0 0 0 20px;
	}
	
.contentContacts img {
	margin: 0 0 15px 0;
	}
	

.contentContacts dl, dl dt, dl dd{
	margin: 0;
	padding: 0;
	font: normal normal normal 1em/1.2em Verdana, Arial, sans-serif;
}

.contentContacts dl{
	margin: 0 0 25px 0;
}
	

.contentContacts dl dd{
	margin-bottom: 10px;
}

.contentContacts dl dd a{
	color: #333333;
	text-decoration: none;
}

.contentContacts dl dd a:hover{
	color: #333333;
	text-decoration: underline;
}

.contentContacts h3{
	margin: 0 0 15px 0;
	padding: 0;
	color: #AD1A18;
	font-weight: bold;
}

.debugBlock{
    color: #000000;
    background-color: #999999;
    border: 1px solid #FFFFFF;
    filter:alpha(opacity=75);
    -moz-opacity:.75;opacity:.75;
    margin-left: 30px;
    /* width: 960px; */
    margin-top: 20px;
}

.debugBlock pre{
   color: #000000;
}