/*
--------------------------------------------------------------------------------------------------------------------------------- 
14. HISTORY PAGE - SPECIFIC ELEMENTS
--------------------------------------------------------------------------------------------------------------------------------- 
*/	


body.history {
	text-align:center;
	background-color: #FFF;
	background-image: url(../images/History_Page/history_background.png);
	background-repeat: repeat-x;
	overflow: scroll;
	margin: 0;
	}
	
/* HEIGHTS OF EACH SECTION */				
.history_One_Height {height:510px; padding-top:10px;}
.history_Two_Height {height:115px;}
.history_Three_Height {height:2300px; position:relative;}

/* TWO - HISTORY HEADING */						
p.History_Heading {
	margin-top: 0px;
	float: left;
	width: 321px;
	display: inline;
	height: 78px;
	background-image:  url(../images/History_Page/history_heading.png);
	background-size: 321px  78px;
	background-repeat: no-repeat;
	}
	
/* 	FOR RETINA DISPLAYS */	
@media only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) { 
p.History_Heading { 
	background-image:url(../images/History_Page/history_heading@2x.png);
	-webkit-background-size: 321px  78px } 
	}		

/* ------------------------------ ONE: 2013 DESCRIPTION AND LEGEN ---------------------------------- */

/* YEAR HEADING DESCRIPTION */						
#History_YearHeading {
	position: relative;
	float: left;
	width: 350px;
	height: 190px;
	margin-top:45px;
	padding-top: 35px;
	background-image:  url(../images/History_Page/Map_YearHeading.png);
	background-size: 120px 59px;
	background-repeat: no-repeat;
	margin-right: 614px;
	margin-bottom: 40px;
	}
	
	
/* 	FOR RETINA DISPLAYS */	
@media only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) { 
#History_YearHeading { 
	background-image:url(../images/History_Page/Map_YearHeading@2x.png);
	-webkit-background-size: 120px 59px } 
	}	
	
/* LEGEND OF COLORS - TOP */				
#legend_top {
	position: relative;
	width: 964px;
	height: 65px;
	float: left;
	margin-left: 0px;
	}
	
	#red_icon {margin-top:20px; width: 26px;}

		#red_icon_info {
			margin-top:-23px;
			margin-left: 40px;
			width: 170px;
			}
			
	#purple_icon {
			margin-top:-23px; 
			margin-left:210px; 
			width: 26px;
			}
	
		#purple_icon_info {
			margin-top:-22px;
			margin-left: 249px;
			width: 150px;
			}
	
/* LEGEND OF COLORS - BOTTOM */					
#legend_bottom {
	position: relative;
	width: 420px;
	height: 35px;
	float: left;	
	}

	#yellow_icon {margin-left: 0px; width: 26px;}

		#yellow_icon_info {
			margin-top:-22px;
			margin-left: 40px;
			width: 150px;	
			}

	#green_icon {
		margin-top:-23px;
		margin-left:210px;
		width: 26px;
		}

		#green_icon_info {
			margin-top:-22px;
			margin-left: 249px;
			width: 150px;
			}	
	
/* ------------------------------ ONE: WORLD MAP ---------------------------------- */
	
	
/* MAP CONTAINER - WHAT ISN'T SEEN */						
#Map_container {
	width: 640px;
	height: auto;
	margin: 0 auto;
	}	
	
	/* MAP POSITIONING - WHAT IS SEEN */						
	#history_map {
		position: relative;
		float: right;
		width: 640px;
		height: 430px;
		margin-top:-390px;
		}

/* CONTAINER FOR CONTINENTS */						
ul#continents {
	list-style: none;      
	width: 640px;
	height: 385px;
	position: relative;
	background: url(../images/History_Page/WorldMap.png) no-repeat 0 0;
	background-size: 640px 770px;
	}
	
/* 	FOR RETINA DISPLAYS */	
@media only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) { 
ul#continents { 
	background-image:url(../images/History_Page/WorldMap@2x.png);
	-webkit-background-size: 640px 770px } 
	}		

	/* POSITIONING STYLE OF CONTINENTS */						
	ul#continents li {position: absolute;}

		/* SPECIFIC POSITIONING OF CONTINENTS */						
		.australia {
			width:15px;
			height:8px;
			top:313px;
			left:553px;
			}
		
		.indonesia {
			width:19px;
			height:27px;
			top:228px;
			left:492px;
			}
			
		.singapore {
			width:8px; 
			height:8px; 
			top:225px; 
			left:479px;
			}
			
		.malaysia {
			width:8px; 
			height:8px; 
			top:217px; 
			left:477px;
			}
			
		.philippines {
			width:14px; 
			height:28px; 
			top:199px; 
			left:512px;
			}
		
		.cambodia {
			width:8px;
			height:8px;
			top:205px;
			left:484px;
			}
			
		.thailand {
			width:8px;
			height:8px;
			top:200px;
			left:475px;
			}
		
		.japan {
			width:8px;
			height:8px;
			top:150px; 
			left:543px;
			}
			
		.korea {
			width:9px;
			height:10px;
			top:151px;
			left:524px;
			}
			
		.china {
			width:8px;
			height:8px;
			top:140px;
			left:508px;
			}
			
		.india {
			width:8px; 
			height:18px; 
			top:183px; 
			left:436px;
			}
			
		.southAfrica {
			width:8px; 
			height:8px; 
			top:302px; 
			left:337px;
			}
			
		.turkey {
			width:8px; 
			height:8px; 
			top:146px; 
			left:353px;
			}
		
		.romania {
			width:8px; 
			height:8px; 
			top:122px; 
			left:360px;
			}
		
		.bulgaria {
			width:8px; 
			height:8px;
			top:131px;
			left:344px;
			}
		
		.hungary {
			width:8px;
			height:8px;
			top:125px;
			left:337px;
			}
			
		.italy {
			width:8px;
			height:8px;
			top:129px;
			left:318px;
			}
			
		.poland {
			width:8px; 
			height:8px; 
			top:108px; 
			left:348px;
			}
			
		.germany {
			width:8px;
			height:8px;
			top:105px;
			left:338px;
			}
		.netherlands {
			width:8px;
			height:8px;
			top:108px;
			left:326px;
			}
			
		.belgium {
			width:8px;
			height:8px;
			top:107px;
			left:317px;
			}
			
		.france {
			width:8px;
			height:8px;
			top:118px;
			left:308px;
			}
			
		.UK {
			width:10px;
			height:18px;
			top:99px;
			left:292px;
			}
			
		.spain {
			width:8px;
			height:8px;
			top:135px;
			left:297px;
			}
			
		.portugal {
			width:8px;
			height:8px;
			top:136px;
			left:288px;
			}
			
		.morocco  {
			width:8px;
			height:8px;
			top:158px;
			left:289px;
			}
			
		.brazil {
			width:8px;
			height:15px; 
			top:255px; 
			left:207px;
			}
			
		.mexico {
			width:8px;
			height:8px;
			top:187px;
			left:117px;
			}
			
		.USA {
			width:20px;
			height:20px;
			top:134px;
			left:135px;
			}
			
		.canada {
			width:8px;
			height:8px;
			top:119px;
			left:170px;
			}
		
/* HOVER STATES START HERE */
ul#continents li a  {
	display: block;
	outline: none;
	height: 100%;
	}

/* HOVER MAP */						
ul#continents li a:hover {
	background: url(../images/History_Page/WorldMap.png) no-repeat 0 0;
	background-size: 640px 770px;
	}
	
/* 	FOR RETINA DISPLAYS */	
@media only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) { 
ul#continents li a:hover { 
	background-image:url(../images/History_Page/WorldMap@2x.png);
	-webkit-background-size: 640px 770px } 
	}		
		
/* SPECIFIC HOVER POSITIONING OF CONTINENTS */						
ul#continents li.australia a:hover {background-position: /* LEFT: LOWER TO GO LEFT */-553px /* TOP: LOWER TO GO DOWN */	-712px;}
ul#continents li.indonesia a:hover {background-position: -492px -627px;}
ul#continents li.singapore a:hover {background-position: -479px -624px;}
ul#continents li.malaysia a:hover {background-position: -477px -616px;}
ul#continents li.philippines a:hover {background-position: -512px -598px;}
ul#continents li.cambodia a:hover {background-position: -484px -604px;}
ul#continents li.thailand a:hover {background-position: -475px -599px;}
ul#continents li.japan a:hover {background-position: -543px -548px;}
ul#continents li.korea a:hover {background-position: -524px -550px;}
ul#continents li.china a:hover {background-position: -508px -539px;}
ul#continents li.india a:hover {background-position: -436px -582px;}
ul#continents li.southAfrica a:hover {background-position: -337px -701px;}
ul#continents li.turkey a:hover {background-position: -353px -545px;}
ul#continents li.romania a:hover {background-position: -360px -521px;}
ul#continents li.bulgaria a:hover {background-position: -344px -530px;}
ul#continents li.hungary a:hover {background-position: -337px -524px;}
ul#continents li.italy a:hover {background-position: -318px -528px;}
ul#continents li.poland a:hover {background-position: -348px -507px;}
ul#continents li.germany a:hover {background-position: -338px -504px;}
ul#continents li.netherlands a:hover {background-position: -326px -507px;}
ul#continents li.belgium a:hover {background-position: -317px -506px;}
ul#continents li.france a:hover {background-position: -308px -517px;}
ul#continents li.UK a:hover {background-position: -292px -498px;}
ul#continents li.spain a:hover {background-position: -297px -534px;}
ul#continents li.portugal a:hover {background-position: -288px -535px;}
ul#continents li.morocco a:hover {background-position: -289px -557px;}
ul#continents li.brazil a:hover {background-position: -207px -654px;}
ul#continents li.mexico a:hover {background-position: -117px -586px;}
ul#continents li.USA a:hover {background-position: -135px -533px;}
ul#continents li.canada a:hover {background-position: -170px -518px;}

/* START HOVER BOX */
ul#continents li a span {display: none;}
ul#continents li a:hover span {display: block;}

ul#continents li a:hover span {
	display: block;
	padding: 5px;
	width: 90px;
	background: #0e4160;
	position: relative;
	top: 35px;
	left: -40px;
	font: 11px Arial, Helvetica, sans-serif;
	opacity: .85;
	filter:alpha(opacity=95);
	color: #FFF;
	}

ul#continents li a:hover span strong {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	text-align:center;
	}

/* DESCRIPTION TEXT UNDER MAP */						
.rolloverMap_text {
	width: 300px;
	height: auto;
	margin-left: 250px;
	margin-top: -50px;
	}
	

/* ------------------------------ THREE: SWSA HISTORY---------------------------------- */	
	
/* YEAR + DESCRIPTION CONTAINER */						
.History_Event {
	width: 	680px;
	height: auto;
	float: left;
	background-image:url(../images/History_Page/Timeline_YearTimeline.png);
	background-size: 680px 5px;
	background-repeat:repeat-y;
	}	

	/* INNER YEAR CONTAINER */						
	.History_Date {
		width:50px;
		float:left;
		padding-top:10px;
		padding-right:40px;
		margin-left:0px;
		height: 100%;
		background-color: #FFF;
		margin-top: 10px;
		padding-bottom: 10px;
		}


		/* INNER YEAR CONTAINER */						
		.History_Date_first {
			width:50px;
			float:left;
			padding-right:40px;
			margin-left:0px;
			height: 100%;
			background-color: #FFF;
			margin-top: 0px;
			padding-top: 20px;
			padding-bottom: 10px;
			}	
		
	
		/* INNER YEAR CONTAINER */						
		.History_Date_last {
			width:50px;
			float:left;
			padding-top:10px;
			padding-right:40px;
			margin-left:0px;
			height: 100%;
			background-color: #FFF;
			margin-top: 10px;
			padding-bottom: 37px;
			}	
	

	/* INNER DESCRIPTION CONTAINER */						
	.History_Decription {
		width:585px;
		height:auto;
		float:left;
		padding-top:24px;
		padding-bottom:24px;
		border-bottom: 1px solid #8f8f95;
		}

		/* DESCRIPTION SEPERATOR CONTAINER */						
		.Border {
			width: 585px;
			border-bottom: 1px solid #8f8f95;
			height:1px;
			}

	/* START HISTORY IMAGES */						
	.History_Image {
		width:268px;
		height:1990px;
		float: right;
		background-image: url(../images/History_Page/Timeline_Images.png);
		background-image: 268px 1990px;
		background-repeat:no-repeat;
		}
		
	/* 	FOR RETINA DISPLAYS */	
	@media only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) { 
	.History_Image { 
	background-image:url(../images/History_Page/Timeline_Images@2x.png);
	-webkit-background-size: 268px 1990px;  } 
	}		
	
						
	
	
/* ------------------------------ FIXED SCROLL HEADER ELEMENTS ---------------------------------- */

/* FIXED CONTAINER - ELEMENTS FALL WITHIN HERE */						
#History_FixedContainer {
	z-index: 1;
	margin:auto;
	width : 4064px;
	height : 82px;
	background-color:#eae8e9;
	position: fixed;
	display : none;
	margin-top: -772px;
	margin-left: -1200px;

	}

	/* INNER CONTAINER FOR BOTH BACK TO TOP AND "OUR HISTORY" HEADER */						
	#History_Header_Fixed {
		position: absolute;
		float:left;
		width: 200px;
		height: 78px;
		margin-top: 17px;
		margin-left: 1200px;
		}