@charset "UTF-8";
/* CSS Document */

/*1. TYPOGRAPHY */
@font-face {
	font-family: logoh1;
	src:url("../fonts/Aaargh.ttf");
}
@font-face {
	font-family: logoh2;
	src:url("../fonts/AUdimat-BoldItalic.otf");
}
@font-face {
	font-family: logomenus;
	src:url("../fonts/AUdimat-Regular.otf");
}
@font-face {
	font-family: galnav;
	src:url("../fonts/bakrsgnt.ttf");
	}

h1 {
	font-size:13px;
	font-family: logoh1,Helvetica,Arial,Helvetica,Geneva,sans-serif;
	color:#666;
	font-weight:500;
	}
h2 {
	font-size:19px;
	font-family: logoh2,Helvetica,Arial,Helvetica,Geneva,sans-serif;
	letter-spacing:5px;
	color:rgb(204,204,173);
	font-weight:500;
	}
h3, .catheader, h4 {
	font-size:10px;
	font-family:logomenus;
	/*color:rgb(120,120,90);*/
	color:rgb(50,50,25);
	font-weight:500;
	letter-spacing:2px;
	margin-left:0px;/*controls STORIES:menu indent*/
}
h3 {
	margin-top:-5px;/*Space between STORIES:menu items*/
}
h3:hover {
	cursor:pointer;
	color: rgb(200,200,160);
}
#words h3 { /*displays a normal cursor instead of a pointer when reading the texts*/
	cursor:auto;
}
#words li:hover, #words h3 { /*prevents text color fm behaving like links in the #words div */
	color:rgb(120,120,90);
}
a, a:link, a:hover { 
	font-size:inherit; 
	font-family:logomenus,Helvetica,Arial,Helvetica,Geneva,sans-serif;
	letter-spacing:3px;
	text-decoration:none;
	}
li {
	list-style-type:none;
	font-size:10px;
	font-family:logomenus;
	letter-spacing:1px;
	color:rgb(120,120,90);
  	margin-top:0px;/*controls space between WORDS:menu items*/
}
li:hover {
	color:rgb(200,200,160);
	}
.smalldates {/*for dates on NEWS drop-down menu */
	line-height:90%;
	font-size: 8px;
  	font-family: logomenus;
}

/* 2. LINKS */
a {  
	color:rgb(150,150,125);
	transition-duration: .2s;
	transition-timing-function: linear;
	/* safari */
	-webkit-transition-duration: .2s; 
	-webkit-transition-timing-function: linear;
	cursor:pointer; 
}
a:link {  
	color:rgb(150,150,125);
	cursor:pointer;
}
a:hover, a:focus {
	color: rgb(200,200,160);
	cursor:pointer;
}
.selected { 
	color:rgb(50,50,30);
	font-weight:bold;
}	
	
/* 3. PAGE PARTS FROM TOP TO BOTTOM, OUTSIDE TO INSIDE */	
#wrapper_large {
	width:100%;
}
header {
				display:block;
				position:fixed;
				top:0px;
				left:0px;
				/*background-color:blue;*/
				width:100%;
			}
/* 4. LOGO AND TOP MENU */
#logo {
	position:absolute;
	float:left;
	left:2%;
	/*background-color:red;*/
}
#menuright {
	position:absolute;
	top:35px;/*positions top right menu vertically. initial position is 50px*/
	/*right:2%; /*should be balanced with 'left' of #logo */
	font-size:10px;
	font-family: logomenus;
	letter-spacing:3px;
	color:rgb(150,150,125);
}
#menuright div {
	float:left;
	letter-spacing:3px;
	cursor:pointer;
}
.menurightclass {
	margin:0 15px;
}
#info {
	font-family:logomenus;
	letter-spacing:1px;
	color:rgb(150,150,125);
	cursor:pointer;
	}
#infooptions {
	position:absolute;
	top:20px;
	left:inherit;
	display:none;
	padding:10px;
	cursor:pointer;
	z-index: 10;
	line-height:150%;
	color:rgb(90,90,70);
	background-color:#e6c984;
}
/* 5. DOM parts*/
section {
	position:absolute;
	display:block;
	top:50px;
	width:100%;
	z-index:-1;
}
/* 6. SOCIAL MEDIA*/
/*container div for FACEBOOK, TWITTER etc.*/
#socialdiv{
		position:absolute;
		bottom:290px;
		right:10px;
		line-height:10%; /*Spaces the icons vertically*/
	}
#facebook, #twitter, #pinterest {
	width:24px;
	height:24px;
	border-radius: 12px;/*eliminates grey square around icon in Safari*/
	cursor:pointer;
	display:block;
}
#facebook {
	background-image:url("Tools/facebook40round.png");
}
#facebook:hover {
	background-image:url("Tools/facebookblue.png");
}
#twitter {
	background-image:url("Tools/twitter40round.png")
}
#twitter:hover {
	background-image:url("Tools/twitterblueround.png")
}
#pinterest {
	background-image:url("Tools/pinterest40round.png");
}
#pinterest:hover {
	background-image:url("Tools/pinterestredround.png");
}
/* Tooltip text */
.tooltiptext {
    opacity:0;
    transition: opacity 1s;
    color:#aaaaaa;
    /* Position the tooltip text - see examples below! */
    position: relative;
    z-index: 1;
    top:-20px;
    left:-40px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    opacity:1;
}
/*divs within SECTION. 
There are 3 of them named #texts, #stageimg and #rightcol.
All are parts of the <section> */
/* TEXTS div and transitions */
#texts {
	display:block;
	padding: 10px;
	left:1%;
	top:15px;
	width:87%;
	background-color:#f5f5f5;
}
.catheader {
	margin-left:0px;/*Horizontal position of STORIES and WORDS*/
}
#goldwater, #paradiso, #powerplant, #delafield, #rosenfield {
	margin-left: 10px;
}
.catsubclass { /*concerns STORIES and FEATURED:menu:submenu items*/
	position:relative;
	display:none;
	width:inherit;
	line-height:100%; /*Space between the list items*/
	left:-30px;/*Change to adjust indentation*/
	margin-top:-12px;/*Change to adjust vertical text position -12px*/
	}
#subwords	{
	position:relative;
	display:none;
	/*line-height:90%;*/
	left:-38px;/*controls horizontal position of WORDS:menu items*/
	margin-top:-12px;
}
#subwords ul li {
	margin-top:8px;
}
#wordsmenuheader, .menuitem, .wordsmenuitem, .menutexts, #blogmenuheader {
	cursor:pointer;
}
[category="0"] { /*spaces the first lines of Roosevelt Island Power Plant... under FEATURED*/
	line-height:130%;
}

/* STAGEIMG div ---------*/
#stageimg {
	padding: 10px;
	margin:30px auto;
	width:70%;
	/*background-color:red;*/
}
#stageimg img {
	display: block;
	max-width:98%;
	box-shadow:2px 2px 4px #999;
	margin:0px auto 0;
}
#bigpix {
	display:none;
}
/* #words is where text appears instead of #bigpix */
#words {
	font-family:logomenus;
	font-size:10px;
	text-align:left;
	letter-spacing:1px;
	color:rgb(120,120,90);
	margin:30px auto 0 auto;
	width:100%;
	padding:10px;
	overflow-y:scroll;
}
.prestexts { /*divs inside presentation texts for pictures*/
	width:90%; 
	margin:0 auto;
	clear: both;
}
#words img {/*Images inside presentation texts*/ 
	max-width:80%; 
	margin:0 10px;
}
/* RIGHTCOL the third column. */
#rightcol {
	width:95%;
}
#caption {
	position:relative;
	width:98%;
	font-size:10px;
	font-family:logomenus;
	text-align:center;
	letter-spacing:1px;
	color:rgb(120,120,90);
	margin:20px auto;
}
#hiddencaption { /*this div is used to hide the caption file and sort it for display. it should be made hidden in the final file*/
	display:none;
	}
/*Arrows navigation formating*/
#arronavig {
	position:fixed;
	right:-110%;/*locates initial arrows position at right of the window*/
	width:100%;
	bottom:12px;
}
#arroL, #arroR {
	position:relative;
	float:left;
}
#arronavig:hover {
	cursor:pointer;
}
#arropage {
	position:relative;
	float:left;
	width:80%;
	font-family:logomenus;
	font-size:12px;
	letter-spacing:2px;
	color:rgb(75, 75, 50);
	margin:7px 5px auto 5px;
}
#arropagetop, #arropagebot {
	margin:0 auto;
}
/*-------FOOTER-------*/
footer {
	display:none;
	position:absolute;
	width:100%;
	bottom:-70px; /*Distance between scroller and bottom of window.*/
	height:30px;
	z-index:-10; /*Allows clicking on the arrows when these appear at the same level as the footer*/
}
#footercenter {
	position:relative;
	width:98%;
	margin:0 auto;
	height:52px;
	display:visible;
}
.footerspacer {
	width:24%;
	height:48px;
	float:left;
}
@media only screen 
			and (min-width: 767px)
			and (orientation:landscape)
			{
			h1 {font-size:22px;}
			h3, .catheader {
				font-size:14px;
				color:rgb(150,150,125);}
			h3 {margin-top:-10px;}/*Space between images:menu items-11px*/
			li {
				font-size:13px;
			  	margin-top:7px;}/*controls space between WORDS:menu items*/
			li:first-of-type {
				margin-top:20px;/*space between first li item and its title*/
			}
			li:last-of-type, #paradiso{
				margin-bottom:20px;/*space between last li item and its title*/
			}
			#wrapper-large {width:100%;}
			#menuright {
				top:25px;/*positions top right menu vertically. To line up with bottom of logo use 50px*/
				right: 0%;
				margin:0 2% 0 0;
				font-size:13px;
				letter-spacing:5px;}
			#infooptions {
				color:rgb(0,0,0);
				background-color:#ffffff;
				opacity:.7;
				z-index:10;}
			.smalldates {/*for dates on NEWS drop-down menu */
				font-size: 10px;}
			#floatdiv {
				position:absolute;
				top:100px;
				width:60%;
				/*position:absolute;
				margin:80px 300px;
				width:30% ;
				top:140px;*/
			}
			#floatdiv img{
				width:100%;
			}
			section {
				margin:4% auto;	}
			#socialdiv{
				position:fixed;
				bottom:60px;
				right:10px;}
			#texts {
				position:fixed;
				left:2%;
				top:100px;
				width:18%;
				padding:0px;
				background-color:inherit;}
			.catsubclass { /*concerns IMAGES:menu:submenu items*/
				line-height:80%;}/*Space between the list items*/
			#subwords	{
				line-height:100%;}			
			#stageimg {
				margin:0 auto;
				width:50%;}
			#stageimg img {
				display: block;
				box-shadow:2px 2px 4px #999;
				margin:20px auto 0;}		
			#words{
				width:80%;
				font-size:14px; 
				 }
			/* Below 3  define the scrollbar on the #words div */
				#words::-webkit-scrollbar {
				    width: 5px;
				}
				#words::-webkit-scrollbar-track {
				    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
				    border-radius: 10px;
				}
				#words::-webkit-scrollbar-thumb {
				    border-radius: 10px;
				    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
				}
			#rightcol {
				position:absolute;
				top:0px;
				right:2%;
				width:18%;}
			#caption {
				font-size:14px;
				margin:50% auto 0;
				}
			#arronavig {
				right:-15%;/*locates initial arrows position at right of the window*/
				width:95px;
				}
			#arropage {
				width:15px;
				color:rgb(204,204,173);
				}
			#arropagetop, #arropagebot {
				margin:0 auto;
				}
			footer {
				display:block;
				bottom:10px;
				height:52px;
			
			}
	
}