//@import url(http://fonts.googleapis.com/css?family=Lobster);

html,body{
	height:100%;
	max-height:100%;
	width:100%;
	max-width:100%;
	overflow: hidden;
 	margin: 0 auto;
    padding: 0 0 0 0;	
  
}

/*
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}


html {
 	margin: 0 auto;
    padding: 0 0 0 0;
}

 
body {
    margin: 0 auto;
    padding: 0 0 0 0;
}

*/
*{
	margin:0;
	padding:0;
/*	background:url(../img/background_1.png);*/
	font-family:'Lobster', arial, serif;
}

a.themshock_banner{
	width:210px;
	height:210px;

	position:fixed;
	right:0;
	
}
div{
	background:transparent;

}
img{
	background:transparent;
}

/*======================= stage FONT STYLES ===========================*/



/*stageNav (NAVIGATION) Fonts */
a.navMenu:link, a.navMenu:visited, a.navMenu:active
{
	font-size:16px;
	font-family:"Times New Roman",Georgia,Serif;
	font-style:normal;
	font-weight:bold;
	color:#B7B3A8;
	text-decoration: none;
	position: relative;	
	top: -5px;	
}
  
a:navMenu:hover 
{
	font-size:16px;
	font-family:"Times New Roman",Georgia,Serif;
	font-style:normal;
	font-weight:bold;
	color:#F0ECE1;	
	text-decoration: none;
	position: relative;	
	top: -5px;
}  

.popupMedia
{
	background-color: #F0EBE1;
}

.popupMedia h1 {
	font-family: Georgia,
		         "New Century Schoolbook",
		         "Nimbus Roman No9 L",
		         serif;
	font-weight:bold;
	font-size:23px;
	font-style:italic;
	color: #B8B3A9;
	float: left;
	margin: 12px 10px 0px 12px;
	
}
.popupMedia h2 {
	font-family: Georgia,
		         "New Century Schoolbook",
		         "Nimbus Roman No9 L",
		         serif;
	font-size: 23px;
	font-style: italic;
	line-height: 28px;
	color: #383834;
	float: left;
	margin: 12px 10px 12px 12px;
}

div.popupMedia h2 {
  border-left: 1px dashed grey; padding-left: 20px;
}

.popupMedia p {
	font-family: Calibri,
	             "Lucida Sans",
	             Verdana,
	             sans-serif;
	font-size: 17px;
	color: #4E4D48;
	line-height: 23px;
	float: left;
	width: 280px;
	margin: 12px 10px 0px 12px;
}

.popupMedia img,
.popupMedia audio,
.popupMedia video,
.popupMedia object {
	width: 432px;
	height: 338px;
	float: left;
	margin: 12px 12px 12px 12px;
}

.popupMedia video {
	height: 288px;
}
.popupText
{
	background-color: #F0EBE1;
}

.popupText h1 {
	font-family: Georgia,
		         "New Century Schoolbook",
		         "Nimbus Roman No9 L",
		         serif;
	font-weight:bold;
	font-size:23px;
	font-style:italic;
	color: #B8B3A9;
	float: left;
	margin: 12px 10px 0px 18px;
}
.popupText h2 {
	font-family: Georgia,
		         "New Century Schoolbook",
		         "Nimbus Roman No9 L",
		         serif;
	font-size: 23px;
	font-style: italic;
	line-height: 28px;
	color: #383834;
	float: left;
	margin: 12px 10px 12px 18px;
}

.popupText p {
	font-family: Calibri,
	             "Lucida Sans",
	             Verdana,
	             sans-serif;
	font-size: 17px;
	line-height: 23px;
	color: #4E4D48;
	float: left;
	width: 340px;
	margin: 12px 10px 0px 18px;
}

hr {
border: 0;
color: #9E9E9E;
/*background-color: #9E9E9E;*/
background:url(../images/LineElement_TextBox.png);
height: 4px;
width: 100%;
text-align: left;
float: left;
}

/*======================= stage DIVS - LAYERS  ===========================*/

#stageViewPort {
	position: relative;
	/*overflow: hidden;*/
	overflow-y: hidden;
	top: 143px;
	left: 279px;
	height: 595px;
	width: 5980px;
	z-index: 1090;
}


#stageWrapper
{
	width: 5980px; /*1500px;*/
	/*width: 5615px;*/
  	height: 895px;
/*  	left: 306px;*/
/*  	top: 50px;*/
  	position: relative;
  	/*margin-top:0.0em;*/
  	/*margin-bottom:0.0em;*/
  	overflow: hidden; 
  	/*//background: url(../images/layer01_background.jpg);  
  	//position:relative;
  	//cursor: -moz-grab;*/
}

#stageBackground
{ 
	width: 6260px; 
  	height: 768px;
/* 	left:0;
  	top:0; */
  	/*margin-left:;
  	margin-top:;
  	background: url(../images/layer01_background.jpg);  */
  	/*overflow: hidden;*/ 
  	position:absolute;
  	/*width: 100%; */
 	background-image: url('../images/BG_pattern.jpg');
	background-repeat: repeat-x;
	background-position: -5px 0px;
/*  	cursor: -moz-grab;*/
}

#stageBackgroundOverlay
{ 
	width: 5980px; 
  	height: 768px; 
 	left: 0px;
  	top: 0px;
  	/*margin-left:;
  	margin-top:;
  	background: url(../images/layer01_background.jpg);  */
  	/*overflow: hidden;*/ 
  	position:absolute;
  	width: 100%;
/*  	cursor: -moz-grab;*/
}


/* The following block is only used for development,
 * for the faded out overlay of the timeline to aid in event placement */
 
/* 
 * From http://css-tricks.com/css-transparency-settings-for-all-broswers/
 * 
 * */
.transparent {
	/* Required for IE 5, 6, 7 */
	/* ...or something to trigger hasLayout, like zoom: 1; */
/*	width: 100%; */
	zoom: 1;
		
	/* Theoretically for IE 8 & 9 (more valid) */	
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=50);
	
	/* Older than Firefox 0.9 */
	-moz-opacity:0.5;
	
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.5;
    
	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.5;
}

#stageLogo
{
	width: 280px; 
	height: 98px; 
	left: 0px;
	top: 7px; 
	overflow: hidden; 
	position:absolute;
}

#stageTitle
{
	width: 840px; 
	height: 105px; 
	left: 0px;
	top: 0px; 
	overflow: hidden; 
	position:absolute;
}

#stageLeftSide
{
	width: 280px;
	height: 768px;
	left: 0px;
	top: 0px;
	overflow: hidden;
	position:absolute;
}

#stageNav 
{
	width: 800px; 
	height: 38px; 
	left: 310px;
	top: 61px; 
	margin-top: 35px;
	overflow: hidden; 
	position:absolute;	
}


/* -----*/
#imgNavIcon
{
	position: relative;	
	top: 10px;
}


#stageRibbon 
{ 
	width: 5980px;
	/*width: 100%; */
	height: 100px;
	/*left: 306px; the gray-box from left-base boder to ribbon = 306px */
	/*top: 253px; /*389px; /*the height from top-base border -- to - ribbon = 389px */
	/*z-index: 10;*/
	position: absolute;
/*	cursor: -moz-grab;
	overflow: hidden; 
	z-index: 10;*/
	/*background: url(../images/layer03_ribbon.png);*/
}


#stageTimeline
{
	width: 6259px; /* (5980px background - 279px text box area in background) */
	height: 768px; /* 626 is the area below the gray-bar in the timeline */
	/*left: -143px; /* 306px text box area in background */
	top: 0px; /*(768px bg height) | (143px Logo + Nav height)*/
	overflow: hidden; 
	position:absolute;
	cursor: -moz-grab;
	/* margin-top: 143px; */
	/*background-color:#F64AB7; 
	opacity:0.5;
	filter: alpha(opacity=50); */      
}

/*======================= Timeline Information Types: RED, BLUE, GRAY  ===========================*/
#RED_Timeline_Top
{
	width: 5615px; /* (5615px background - 306px text box area in background) */
	height: 251px; /* RED Timeline Height - to align to the ribbon broken-line */
	top: 350px;  /* Position from the top */
	overflow: hidden; 
	position:absolute;
	cursor: -moz-grab;
	/* margin-top: 0px;  unknow */
	/*background-color:#9F111B; */
	opacity:1.0;
	z-index: 15;
	filter: alpha(opacity=100);   
}

#RED_Timeline_Bottom
{
 	width: 5615px; /* (5615px background - 306px text box area in background) */
	height: 222px; /* RED Timeline Height - to align to the ribbon broken-line */
	top: 601px;  /* Position from the top */
	overflow: hidden; 
	position:absolute;
	cursor: -moz-grab;
	/* margin-top: 0px;  unknow */
	/*background-color:#9F111B; */
	opacity:1.0;
	filter: alpha(opacity=100);  
}

#BLUE_Timeline_Top
{
 	width: 5615px; /* (5615px background - 306px text box area in background) */
	height: 126px; /* RED Timeline Height - to align to the ribbon broken-line */
	top: 458px;  /* Position from the top  */
	overflow: hidden; 
	position:absolute;
	cursor: -moz-grab;
	/* margin-top: 0px;  unknow */
	/*background-color:#004384; */
	opacity:0.0;
	filter: alpha(opacity=0);	
}

#BLUE_Timeline_Bottom
{
 	width: 5615px; /* (5615px background - 306px text box area in background) */
	height: 252px; /* RED Timeline Height - to align to the ribbon broken-line */
	top: 458px;  /* Position from the top */
	overflow: hidden; 
	position:absolute;
	cursor: -moz-grab;
	/* margin-top: 0px;  unknow */
	background-color:#004384; 
	opacity:1.0;
	filter: alpha(opacity=100);   
}


#GRAY_Timeline_Top
{
	width: 5615px; /* (5615px background - 306px text box area in background) */
	height: 126px; /* RED Timeline Height - to align to the ribbon broken-line */
	top: 460px;  /* Position from the top  */
	overflow: hidden; 
	position:absolute;
	cursor: -moz-grab;
	/* margin-top: 0px;  unknow */
	/*background-color:#697060; */
	opacity:0.0;
	filter: alpha(opacity=0);
}

#GRAY_Timeline_Bottom
{
 	width: 5615px; /* (5615px background - 306px text box area in background) */
	height: 250px; /* RED Timeline Height - to align to the ribbon broken-line */
	top: 583px;  /* Position from the top (768 - 222) = 546  */
	overflow: hidden; 
	position:absolute;
	cursor: -moz-grab;
	/* margin-top: 0px;  unknow */
	/*background-color:#697060;*/
	opacity:1.0;
	filter: alpha(opacity=100);
}

/*======================= Timeline ViewPoint DIVS Layouts Menu Links #REFS  ===========================*/
#TimelineViewStart
{
	width: 297px;
	height: 94px;  /* ribbon height =  94px; */
	overflow: hidden; 
	position:relative;
	display:inline-block;
	float: left;
	clear:left;
	padding:0px;
	margin:0px;
	cursor: -moz-grab;
/*	background-color:#DE593D; 
	opacity:0.5;
	filter: alpha(opacity=50); */
}

#TimelineView1861
{
	width:674px;
	height: 94px; 
	overflow: hidden; 
	position:relative;
	display:inline-block;
	float: left;
	padding:0px;
	margin:0px;
	border: 0px;	
	cursor: -moz-grab;
/*	background-color:#6A75AB; 
	opacity:0.5;
	filter: alpha(opacity=50); */
}

/*Reference share the same width on the viewpoint */
#TimelineView1866, #TimelineView1901, #TimelineView1919, #TimelineView1939, #TimelineView1961
{
	width: 700px;
	height: 94px; 
	overflow: hidden; 
	position:relative;
	display:inline-block;
	float: left;
	padding:0px;
	margin:0px;	
	border: 0px;	
	cursor: -moz-grab;
/*	background-color:#CB6E01; 
	opacity:0.5;
	filter: alpha(opacity=50); */
}

/*ViewPoint for last timeline period*/
#TimelineView1986
{
	width: 300px;
	height: 94px; 
	overflow: hidden; 
	position:relative;
	display:inline-block;
	float: left;
	padding:0px;
	margin:0px;	
	border: 0px;	
	cursor: -moz-grab;
/*	background-color:#0A58B2; 
	opacity:0.7;
	filter: alpha(opacity=70); */
}


/*=======================  DIVS Segment/Layouts for the Timeline ===========================*/
/*Timeline, Timeline Period = TLP, short for refecing the Timeline period of each information block type: red/high, blue/medium, gray/low. */

/* */
#imagecontent
{
	width: 5313px;
	left: 0px;
	
	
}
#TLP_Start
{
	width: 682px;
	height: inherit;  /*originally it was 626px - but it includes the bottom border (34px in Height) */
	overflow: hidden; 
	position:relative;
	display:inline-block;
	float: left;
	clear:left;
	padding:0px;
	margin:0px;
	cursor: -moz-grab;
	/*background: url(../images/Timeline_1861_1865.png);*/
	/*background-color:#DE593D; */
	opacity:0.0;
	filter: alpha(opacity=0);

}

#TLP_1861
{
	width: 681px;
	height: inherit; 
	overflow: hidden; 
	position:absolute;
	display:inline-block;
	float: left;
	padding:0px;
	margin:0px;
	border: 0px;	
	cursor: -moz-grab;
	/*background: url(../images/Timeline_1861_1865.png);*/
	/*background-color:#6A75AB; */
	opacity:1.0;
	filter: alpha(opacity=100);
}

#TLP_1866
{
	width: 882px;
	height: inherit; 
	overflow: hidden; 
	position:relative;
	display:inline-block;
	float: left;
	padding:0px;
	margin:0px;	
	border: 0px;	
	cursor: -moz-grab;
	/*background: url(../images/Timeline_1866_1900.png);*/
	background-color:#CB6E01; 
	z-index: -1;
	opacity:0.5;
	filter: alpha(opacity=50);
}

#TLP_1901
{
	width: 639px;
	height: inherit;
	overflow: hidden; 
	position:relative;
	display:inline-block;
	float: left;
	padding:0px;
	margin:0px;	
	border: 0px;	
	cursor: -moz-grab;
	/*background: url(../images/Timeline_1901_1918.png);*/
	z-index: -1;
	background-color:#FBB444; 
	opacity:0.5;
	filter: alpha(opacity=50);
}

#TLP_1919
{
	width: 880px;
	height: inherit;
	overflow: hidden; 
	position:relative;
	display:inline-block;
	float: left;
	padding:0px;
	margin:0px;	
	border: 0px;	
	cursor: -moz-grab;
	/*background: url(../images/TP__1919_1938.png);*/
	z-index: -1;
	background-color:#AF9732; 
	opacity:0.5;
	filter: alpha(opacity=50);
}

#TLP_1939
{
	width: 637px;
	height: inherit; 
	overflow: hidden; 
	position:relative;
	display:inline-block;
	float: left;
	padding:0px;
	margin:0px;	
	border: 0px;	
	cursor: -moz-grab;
	/*background: url(../images/Timeline_1939_1960.png);*/
	z-index: -1;
	background-color:#058A59; 
	opacity:0.5;
	filter: alpha(opacity=50);
}

#TLP_1961
{
	width: 882px;
	height: inherit; 
	overflow: hidden; 
	position:relative;
	display:inline-block;
	float: left;
	padding:0px;
	margin:0px;	
	border: 0px;	
	cursor: -moz-grab;
	/*background: url(../images/Timeline_1961_1985.png);*/
	z-index: -1;
	background-color:#959126; 
	opacity:0.5;
	filter: alpha(opacity=50);	
}

#TLP_1986
{
	width: 710px;
	height: inherit; 
	overflow: hidden; 
	position:relative;
	display:inline-block;
	float: left;
	padding:0px;
	margin:0px;	
	border: 0px;	
	cursor: -moz-grab;
	/*background: url(../images/Timeline_1986_PRESENT.png);*/
	z-index: -1;
	background-color:#0A58B2; 
	opacity:0.7;
	filter: alpha(opacity=70);
}

/*{position:relative; overflow:hidden; width:npx; height:npx;}*/

/**** MAIN EVENTS - RED Timeline Events ***/
#GRAY_Events
{
	width: 5980px;
	height: 595px; 
	/*z-index: 11;*/
	position:absolute;
}
#BLUE_Events
{
	/*
	width: 5313px;
	height: 595px; 
	z-index: 11;
	position:absolute;
	left: 0px;
	top: px;
	overflow: hidden; 
	display:inline-block;
	float: left;
	clear:left;
	padding:0px 2px;
	margin:0px;	
	border: 0px;	
	cursor: -moz-grab;
	background: url(../images/Timeline_1986_PRESENT.png);
	*/
}

#RED_Events
{
	width: 5313px;
	height: 595px; 
	/*z-index: 11;*/
	position:absolute;
/*	left: 0px;
	/*top: px;
/*	overflow: hidden; 
	display:inline-block;
	float: left;
	clear:left;
	padding:0px 2px;
	margin:0px;	
	border: 0px;	
	cursor: -moz-grab;
	/*background: url(../images/Timeline_1986_PRESENT.png);*/	
}

#RED_Events:visited
{
	background-position: 50% 0px;
}
#RED_Events:hover
{
	background-position: 100% 0px;
}
#RED_Events:active
{
	background-position: 0% 0px;
}

#RED_Event_1863_B
{
	width: 5313px;
	height: 815px; 
	/*z-index: 11;*/
	position:absolute;
	/*overflow: hidden; 
	left: 221px;
	top: 0px;
	display:inline-block;
	float: left;
	padding:0px 2px;
	margin:0px;	
	border: 0px;	
	cursor: -moz-grab;
	/*background: url(../images/Timeline_1986_PRESENT.png);*/		
}

#RED_Event_1865
{
	width: 220px;
	height: 825px; 
	/*z-index: 11;*/
	position:absolute;
/*	overflow: hidden; 
	left:442px;
	top: 405px;
	position:absolute;
	display:inline-block;
	float: left;
	padding:0px 2px;
	margin:0px;	
	border: 0px;	
	cursor: -moz-grab;
	/*background: url(../images/Timeline_1986_PRESENT.png);*/		
}

#Gray_Event_1861
{
	width: 219px;
	height: inherit; 
	overflow: hidden; 
	position:relative;
	display:inline-block;
	float: left;
	clear:left;
	padding:0px 2px;
	margin:0px;	
	border: 0px;	
	cursor: -moz-grab;
	/*background: url(../images/Timeline_1986_PRESENT.png);*/	
}