/* About Us: The Story Page */

/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 

#main div.story_items
{
	/* this cannot be too large */
	width: 5000px;
	position: absolute;
	background-color: #FFF;
} 

#story_intro {
	position: absolute;
	width: 400px;
	top: 10px;
	left: 0px;
	z-index: 500;
}

#story_intro {padding: 10px 15px 0px 15px;}

#story_intro p, #story_intro h2, #story_intro h1 {
	color: #666;
	text-align: center;
}

#story_intro p
{
	line-height: 1.35em;
	padding-top: 15px;
	font-weight: bold;
	letter-spacing: .03em;
}

#story_intro p.instructions
{
	font-size: .7em;
	line-height: 1.1em;
	font-weight: normal;
	letter-spacing: normal;
	padding-top: 10px;
}

#story_intro ul {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	width: 153px;
}

#story_intro li
{
	display: block;
	float: left;
	width: 31px;
	padding: 38px 0 0;
	margin: 10px;
	font-size: .6em;
	text-align: center;
	color: #666;
	text-transform: uppercase;
	background-image: url(../images/images/intro-icons.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#story_intro li.image {background-position: -40px 0;}

#story_intro li.video {background-position: -80px 0;}

div.period ol {
	position: absolute;
	list-style: none;
	padding: 0;
	margin: 10px;
}

div.period ol li {
	position: absolute;
	display: block;
	margin: 5px 0;
	width: 300px;
	font-size: .7em;
	z-index: 200;
}

div.period ol li a, div.period ol li span
{
	padding: 2px 0 2px 22px;
	height: 15px;
	text-decoration: none;
	color: #000;
	background-image: url(../images/images/icon.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

div.period ol li a:hover {background-position: 0 -38px;}

div.period ol li a:active {background-position: 0 -76px;}

div.period ol li.picture a {background-position: 0 -114px;}

div.period ol li.picture a:hover {background-position: 0 -152px;}

div.period ol li.picture a:active {background-position: 0 -190px;}

div.period ol li.video a{background-position: 0 -228px;}

div.period ol li.video a:hover {background-position: 0 -266px;}

div.period ol li.video a:active {background-position: 0 -304px;}

/*Height position list item */	

div.period ol li.h1 { top: 0; }

div.period ol li.h2 { top: 24px; }

div.period ol li.h3 { top: 48px; }

div.period ol li.h4 { top: 72px; }

div.period ol li.h5 { top: 96px; }

div.period ol li.h6 { top: 120px; }

div.period ol li.h7 { top: 144px; }

div.period ol li.h8 { top: 168px; }

div.period ol li.h9 { top: 192px; }

div.period ol li.h10 { top: 216px; }

div.period ol li.h11 { top: 240px; }

div.period ol li.h12 { top: 264px; }

div.period ol li.h13 { top: 288px; }

/*Horizontal position of list item */	
div.period ol li.year1 {left: 10px;}
div.period ol li.year2 {left: 90px;}
div.period ol li.year3 {left: 170px;}
div.period ol li.year4 {left: 250px;}
div.period ol li.year5 {left: 330px;}
div.period ol li.year6 {left: 410px;}
div.period ol li.year7 {left: 500px;}
div.period ol li.year8 {left: 580px;}
div.period ol li.year9 {left: 660px;}
div.period ol li.year10 {left: 740px;}

div.period ol.dec_70 {top: 0px; left: 0px;}

div.period ol.dec_80 {top: 0px; left: 1000px;}

div.period ol.dec_90 {top: 0px; left: 2000px;}

div.period ol.dec_20 {top: 0px; left: 3000px;}

div.period h3 {
	padding: 2px 0 0 20px;
	font-size: 1.5em;
	color: #FFF;
	font-weight: bold;
}

/* Nav Container */	

/* prev, next, prevPage and nextPage buttons */
a.nav_about{
	float: left; 
	clear: none;
	display: block;
	width: 29px;
	height: 57px;
	cursor: pointer;
	background-image: url(../images/scroll/arrows_horizontal.png);
	background-repeat: no-repeat;
	z-index: 200;
	/* for IE */
 	 filter:alpha(opacity=60);
  	/* CSS3 standard */
 	 opacity:0.6;
}



/* right: states */
a.nav_right {background-position: -29px -114px;}
a.nav_right:hover {background-position:-29px -57px;}
a.nav_right:active {background-position:-29px 0px;}

/* left: states */
a.nav_left {background-position: 0px -114px;} 
a.nav_left:hover{background-position: 0px -57px;}
a.nav_left:active {background-position: 0px 0px;}

#about_navi {
	position: absolute;
	width: 500px;
	height: 59px;
	z-index: 240;
	margin-left: 250px;
	margin-bottom: 10px;
	bottom: 0px;
}


#nav_skipper_bar
{
	width: 416px;
	height: 57px;
	float: left;
	clear: none;
	margin-right: 5px;
	margin-left: 5px;
	background-image: url(../images/scroll/story_nav.png);
	background-repeat: no-repeat;
	background-position: left top;
	/* for IE */
 	 filter:alpha(opacity=60);
  	/* CSS3 standard */
 	 opacity:0.6;
}

/* Styling for text*/
#nav_skipper_bar p
{
	width: 416px;
	color: #cbc8c8;
	text-align: center;
	font-size: .65em;
	text-transform: uppercase;
	letter-spacing: 0em;
	font-weight: 600;
	margin-top: 3px;
}

#nav_skipper_bar a {font-weight: 400; 	font-size: .8em; }
 
#nav_skipper_bar ul {
	width: 410px;
	height: 25px;
	float: left;
	clear: none;
	list-style-type: none;
	display: inline;
	
}



.nav {
	float: left;
	width: 400px;
	margin-top: 3px;
	margin-left: 6px;
	margin-right: 6px;
	padding-bottom: 6px;
	/* for IE */
 	 filter:alpha(opacity=100);
  	/* CSS3 standard */
 	 opacity:1;
}

.nav li {display: inline;}

.nav li a {
	color: #CCC;
	text-decoration: none;
	list-style-type: none;
	float: left;
	clear: none;
	height: auto;
	padding-bottom: 3px;
	border-bottom: 7px #CCC solid;
	margin-right: 5px;
	cursor: pointer;
	text-align: left;
	font-size: .4em;
	
}

ul.nav a:hover
{
	color: #C90;
	border-bottom-color: #C90;
}

ul.nav a.current
{
	color: #FFF;
	border-bottom-color: #FFF;
}

/* history Picture/slides*/

/* single step/frame in history */
.step
{
	position: relative;
	float: left;
	width: 250px;
	height: 400px;
	z-index: 0;
	background-image: url(../images/story/timelime-nic.jpg);
	background-repeat: no-repeat;
	/* for IE */
	filter: alpha(opacity=40);
	/* CSS3 standard */
	opacity: 0.4;
}

/* 0 - 1000: introduction */
#one { background-position: 0px 0px;}
#two { background-position: -250px 0px;}
#three { background-position: -500px 0px;}
#four { background-position: -750px 0px;}	

/* 1250 - 2000: 1970's */
#five { background-position: -1000px 0px;}	
#six { background-position: -1250px 0px; }
#seven { background-position: -1500px 0px; }
#eight { background-position: -1750px 0px; }	

/* 2250 - 3000: 1980's */
#nine { background-position: -2000px 0px; }	
#ten { background-position: -2250px 0px; }
#eleven { background-position: -2500px 0px; }
#twelve { background-position: -2750px 0px; }	

/* 3250 - 4000: 1990's */
#thirteen { background-position: -3000px 0px; }
#fourteen { background-position: -3250px 0px; }
#fifthteen { background-position: -3500px 0px; }
#sixteen { background-position: -3750px 0px; }	

/* 4250 - 5000: 2000 */
#seventeen { background-position: -4000px 0px; }
#eighteen { background-position: -4250px 0px; }
#nineteen { background-position: -4500px 0px; }
#twenty { background-position: -4750px 0px; }	

#timeline {
	position: absolute;
	width: 5000px 
	height: 400px;
	top: 0px;
	left: 0px;
}

#part_1, #part_2 {
	position: relative;
	height: 400px;
	float: left;
	clear: none;
}

#part_1 {width: 1000px;}

#part_2 {width: 4000px;}


/* tooltip styling - global */

.tooltip_small, .tooltip_big {
	display:none;
	font-size: .8em;
	z-index: 300;

}

/* small tooltip styling */

.tooltip_small {
	height: 70px;
	width: 160px;
	padding: 25px;
	background: url(../images/tips/tip_gfx/black_arrow_small.png) no-repeat;
}

/* big tooltip styling */

.tooltip_big {
	height: 163px;
	padding: 40px 30px 10px 30px;
	width: 310px;
	background: url(../images/tips/tip_gfx/black_arrow_big.png) no-repeat;
} 

/* a .label element inside tooltip */
.tooltip_big p, .tooltip_small p { 
	color: #CCC; 
	text-align: left;
	}

div.tooltip_big img, div.tooltip_small img {
	padding-right: 10px;
	display: block;
	float: left;
	clear: none;
}


/* the overlayed element */

.story_overlay {
	/* must be initially hidden */
	display: none;
	/* place overlay on top of other elements */
	z-index: 10000;
	/* styling */
	border: 1px solid #666;
	/* CSS3 styling for latest browsers */
	-moz-box-shadow: 0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;
	background-color: #333;
	min-width:500px;	
	min-height:200px;
	margin: 0px 15px 40px 15px;
}

/* close button positioned on upper right corner */
.story_overlay .close {
	background-image: url(../images/overlay/overlay_gfx/close.png);
	position: absolute;
	right: -15px;
	top: -15px;
	cursor: pointer;
	height: 35px;
	width: 35px;
}


/* styling for elements inside overlay */

div.details img {
	padding: 0px 10px 0px 0px
	margin: 0;
	display: block;
	float: left;
	clear: none;
}

div.details p {
	float: left;
	clear: left;
	width: 150px;
	font-size: .7em;
	color:#fff;
	padding: 20px 0px 0px 0px;
}

div.details h3 {
	font-family: "arial";
	float: left;
	clear: right;
	color: #CCC;
	font-size: 1.4em;
	padding: 20px 0px 0px 0px;
	font-weight: bold;
}

div.text {
	float: left;
	clear: none;
	width: 150px;
	padding: 0px 10px 0px 20px;
}