/* BODY */

@charset "UTF-8";

@font-face	{
			font-family:GothamLight;
			src: url('font/gotham_light.otf');
			}
			
@font-face	{
			font-family:GothamLightItalic;
			src: url('font/gotham_light_italic.otf');
			}			

body	{
		font-family:GothamLight;
		font-size: 15px;
		color: #666;
		background: #333333;
		overflow: hidden;
		margin: 0;
		padding: 0;
		}
		
a	{
	cursor: pointer;
	}		
	
/* NAVIGATION */

#vertical_nav	{
				width: 240px;
				overflow:hidden;
				float: left;
				}

#vert_nav_slider	{
					width: 25px;
					margin-left: 120px;
					margin-top: 180px;
					position: relative;
					float: left;
					}

img.rollover1, img.rollover1_0	{
				opacity: 1;
				width: 21px;
				height: auto;
				}

img.rollover1:hover, img.rollover1_0:hover	{
					opacity: 0.4;
					width: 21px;
					height: auto;
					}

img.rollover1	{
				margin-bottom: 36px;
				}
					
img.rollover1_0	{
				margin-bottom: 450px;
				}

#up_1, #down_4, #home_1	{
				opacity: 0;
				}
				
img.home_links	{
				margin-bottom: 360px;
				opacity: 1;
				}

img.home_links:hover	{
						opacity: 0.4;
						}

.rollover2	{
			height: 21px;
			width: auto;
			opacity: 0;
			float: left;
			margin-right: 30px;
			}						

.choice		{
			height: 60px;
			overflow: hidden;
			}

.choice p	{		
			float: left;
			margin-left: 12px;
			padding-top: 12px;
			font-family: GothamLight;
			font-size: 12px;
			text-transform:uppercase;
			letter-spacing: 1px;
			color: #ddd;
			}

.rollover3	{
			float: left;
			opacity: 1;
			margin-top: 9px;
			}

#story_menu, #relig_menu, #brand_menu, #direc_menu 	{
		margin-left: 450px;
		clear: both;
		}

#story_time_selectors, #relig_time_selectors, #brand_time_selectors, #direc_time_selectors 	{
						margin-top: 45px;
						margin-left: -7px;
						}



#story_link p, #relig_link p, #direc_link p, #brand_link p	{
			opacity: 0;
			}

#story_link:hover p, #relig_link:hover p, #direc_link:hover p, #brand_link:hover p	{
				opacity: 1;
				}
			
#story	{
		background: #006666;
		}

#relig	{
		background: #003366;
		}

#brand	{
		background: #330066;
		}

#direc	{
		background: #990033;
		}
	
/* CONTENT */

#container	{
			width: 960px;
			float: left;
			
			}
		
.heading	{
			position: absolute;
			top: 60px;
			width: 960px;
			background: #666;
			margin-left: 0px;
			padding: 57px 0px 60px 0px;
			z-index: 1;
			font-size: 17px;
			font-family: GothamLight;
			color: white;
			letter-spacing: 2px;
			text-transform: uppercase;
			text-align: center;	
			opacity: 0;		
			}							

#purpose	{
			opacity: 1;
			}

#video_container	{
					height: 1000px;
					width: 1440px;
					background-color: #333333;
					position: fixed;
					left: 0px;
					top: 0px;
					z-index: 10;
					opacity: 1;
					overflow: hidden;
					}

#video_hover	{
				position: absolute;
				top: 429px;
				left: 699px;
				height: 42px;
				width: 42px;
				display: block;
				opacity: 1;
				}	
			
		
#colo1, #colo2	{
			position: relative;
			width: 444px;
			margin-left: 6px;
			float: left;			
			}	

#colo1 p, #colo2 p	{
					color: white;
					text-transform: uppercase;
					letter-spacing: 1px;
					margin-top: 36px;
					margin-left: -45px;
					}

#colo2 h2	{
			color: white;
			text-transform: uppercase;
			letter-spacing: 1px;
			margin-left: -45px;
			font-size: 12px;		
			}
					
#colo2	{float: right;}	


#eng1, #eng2	{
				width: 0px;
				overflow: hidden;
				opacity: 0;
				color: #00ff66;
				letter-spacing: 1px;			
				}			
			
#ru1	{
		overflow: hidden;
		width: 60px;
		}			

#ru2	{
		overflow: hidden;
		width: 135px;
		}
		
#cross	img	{
			margin-top: 9px;
			}		

#cross	{
		margin-left: 1px;
		margin-right: 1px;
		}

#left, #right			{
						position: relative;
						margin-left: 3px;
						margin-right: 6px;
						float: left;
						width: 471px;
						}								

#left block, #right block		{
								font-family:GothamLightItalic;
								}	

#left span	{
			margin-left: 30px;
			}
			

							

/* SCREENS */

#screens	{
			position: relative;
			clear: both;
			}
			
#screen1	{
			margin-top: 210px;
			overflow: hidden;
			}
			
#screen1 h4	{
			margin-left: 30px;
			margin-right: 30px;
			width: 240px;
			float: left;
			clear: both;
			}

#screen2	{
			font-size: 18px;
			text-align: right;
			letter-spacing: 1px;
			line-height: 60px;
			text-transform: uppercase;
			font-weight:bolder;
			width: 720px;
			margin-left: 120px;
			margin-top: 750px;
			color: #ccc;
			}	
				
#screen2 div	{
				float: right;			
				}

#screen2 a	{
			display: block;
			}

#screen3	{
			margin-left: 60px;
			margin-top: 750px;
			margin-bottom: 1605px;
			width: 960px;
			font-size: 12px;
			line-height: 18px;
			color: #ccc;
			}

#screen4	{
			width: 960px;
			font-size: 9px;
			line-height: 12px;
			color: #ccc;
			}	

#screen4 img	{
				margin-left: 30px;
				margin-top: 15px;
				}
						

/* NARRATIVE */
		
#story_examples			{
						width: 3000px;
						position: relative;
						float: left;
						}
						
#story_first	{
				float: left;
				margin-left: 9px;
				}				


.story_example	{
				width: 192px;
				float: left;
				}
				
.story_example img	{
					margin-top: 12px;
					border-bottom: 3px solid #ddd;
					border-top: 1px solid #ddd;
					float: left;
					}
						
.story_example p	{
					font-family: GothamLight;
					font-size: 12px;
					color: #FFFF99;
					float: left;
					}	
					
				
/* RELIGION */

#relig_examples			{
						width: 3000px;
						position: relative;
						float: left;
						}
						
#relig_first	{
				float: left;
				margin-left: 9px;
				}				

.relig_example	{
				width: 192px;
				float: left;
				}
				
.relig_example img	{
					margin-top: 12px;
					border-bottom: 3px solid #ddd;
					border-top: 1px solid #ddd;
					float: left;
					}
						
.relig_example p	{
					font-family: GothamLight;
					font-size: 12px;
					color: #FFFF99;
					float: left;
					}	
											
											
/* IDENTITY */

#brand_examples			{
						width: 3000px;
						position: relative;
						float: left;
						}
						
#brand_first	{
				float: left;
				margin-left: 9px;
				}				

.brand_example	{
				width: 192px;
				float: left;
				}
				
.brand_example img	{
					margin-top: 12px;
					border-bottom: 3px solid #ddd;
					border-top: 1px solid #ddd;
					float: left;
					}
						
.brand_example p	{
					font-family: GothamLight;
					font-size: 12px;
					color: #FFFF99;
					float: left;
					}	
																						
/* WAYFINDING */

#direc_examples			{
						width: 3000px;
						position: relative;
						float: left;
						}
						
#direc_first	{
				float: left;
				margin-left: 9px;
				}				

.direc_example	{
				width: 192px;
				float: left;
				}
				
.direc_example img	{
					margin-top: 12px;
					border-bottom: 3px solid #ddd;
					border-top: 1px solid #ddd;
					float: left;
					}
						
.direc_example p	{
					font-family: GothamLight;
					font-size: 12px;
					color: #FFFF99;
					float: left;
					}