/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body {
background-image:url("../images/dots2f.gif");
width: 100%;
background-size: cover;
height: auto;
position: absolute;
background-position: center top;
background-repeat: repeat-y;
background-color: white /*#F2F2F2*/ ;
overflow-y: auto;
font-family: 'Oswald', sans-serif; 
font-weight: 300;
color: black /*dimgray*/;
min-height:100%;
}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0; }

h1 { font-family: 'Six Caps', sans-serif; font-weight: 400; font-size: 72px; text-transform: uppercase; color: red; line-height: 67px; margin-bottom: 12px;}

h2 { font-family: 'Roboto Slab', serif; font-weight: 300; font-size: 28px; text-transform: uppercase; line-height: 26px; letter-spacing: 0.00em; color: red; margin-bottom: 4px;}

h3 { font-family: 'Roboto Slab', serif; font-weight: 400; font-size: 20px; text-transform: uppercase; line-height: 22px; letter-spacing: 0.02em; color: red;}

h4 { font-family: 'Source Sans Pro', sans-serif; font-weight: 300; font-size: 1.8em; margin-bottom: 0em;  padding-top: 0; color: black;}

h5 { font-family: 'Roboto Slab', serif; font-weight: 400; text-transform: uppercase; font-size: 0.85em; margin 0px 0px 60 8px;  padding-top: 2px; color: red;}	
	

a, img { outline: none; border:none; color: red; text-transform: none; text-decoration: none;}

p { font-family: 'Merriweather', serif; font-weight: 300; line-height: auto; font-size: 22px; margin-bottom: 12px;}
b { font-family: 'Merriweather', serif; font-weight: 700; color: black;}
i { font-family: 'Merriweather', serif; font-weight: 300; }

.bigtext {font-family: 'Merriweather', serif; font-weight: 300; line-height: auto; font-size: 28px; color: black;}

strong { font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 30px;  color: black;}

img { display: block; margin-bottom: 20px;}


article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, { 
    display: block; 
	}
	
a:link {color:red; text-decoration:underline;}
a:visited {color:red;}
a:hover {color:black !important;}
a:active {color: black;}	
	

	
/* Structure */

#wrapper {
	position: relative;
	width: 85%;	
	max-width: 1150px;
	min-height: 100%;
	margin: auto;
	padding: 0% 2% 0px 2%;
	background-color:none;
	} 
	
	article {
	border-bottom: 0px solid blue;
	padding-bottom: 0px;
	background-color:none;
	}	

	#main {
		width: 70%;
		float: left;
		margin-right: 10%;
		background-color: none;
		}
		
	#chart2 {
		display: block;
		position:relative;
		width: 100%;
		border: 1px solid lightgrey;
		margin: 0px 0px 40px 10px;
		}
		
		#chart2 img {
		max-width: 96%;
		padding-top: 15px;
		padding-left: 2%;
		}	
		
	#chart3 {
		display: block;
		position:relative;
		width: 100%;
		border: 1px solid lightgrey;
		margin: 0px 0px 40px 10px;
		}
		
		
		#chart3 img {
		max-width: 96%;
		padding-top: 15px;
		padding-left: 2%;
		}		
		
	#chart4 {
		display: block;
		position:relative;
		width: 100%;
		border: 1px solid lightgrey;
		margin: 0px 0px 40px 10px;
		}
		
		#chart4 img {
		max-width: 88%;
		padding-top: 30px;
		padding-bottom: 30px;
		padding-left: 5%;
		}		
				
	#chart5 {
		display: block;
		position:relative;
		width: 100%;
		border: 1px solid lightgrey;
		margin: 0px 0px 40px 10px;
		}
		
		#chart5 img {
		max-width: 96%;
		padding-top: 20px;
		padding-bottom: 2px;
		padding-left: 3%;
		}		
		
	#chart6 {
		display: block;
		position:relative;
		width: 100%;
		padding: 40px 2px 0px 2px;
		}
		
		#chart6 img {
		max-width: 60%;
		margin-bottom: 0px !important;
		}
		
	#chart6B {
		display: block;
		position:relative;
		width:100%;
		border: 1px solid lightgrey;
		margin: 0px 0px 40px 10px;
		}
		
		#chart6B img {
		max-width: 98%;
		padding-top: 12px;
		padding-bottom: 30px;
		padding-left: 2%;
		}	
		
	#building {
		display: block;
		position:relative;
		width:100%;
		margin: 0px 0px 0px 15px;
		}
		
	#building img {
		max-width: 100%;
		margin-left: 4%;
		box-shadow: 5px 5px 8px 1px rgba(0, 0, 0, 0.4);
		}		
		
		
		
		
	.chartcaption {
		font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 14px; line-height: 18px; color: red; padding: 0px 0px 20px 38px; 
		}
				
	#main p { margin: 0px 10px 18px 10px;}
	#main h1 { margin: 0px 10px 12px 10px;}
	#main h2 { margin: 12px 10px 0px 10px;}
	#main h3 { margin: 12px 10px 0px 48px;}	
	
	.where {
		font-family: 'Roboto Slab', serif; 
		font-weight: 300; 
		line-height: auto;
 		color: red;	
 		padding: 0px 0px 0px 38px;
		}
		
	.where b {
		font-family: 'Roboto Slab', serif; 
		font-weight: 700;  		
		}	
		
	.where a {
		text-decoration: none; 	
		}
		
	ul.guff {
		list-style-type:none;
		list-style-position: outside;
		margin: 0px 10px 0px 10px;
		}

	ul.guff li {
		display: list-item; 
		background: url("../images/arrow_r.gif") no-repeat left top;	
		list-style: none;
		font-family: 'Merriweather', serif; 
		font-weight: 400;
		font-size: 18px;
		line-height: 22px ;
		padding: 0px 0px 6px 38px;
		margin: 5px 0px 5px 0px;	
		}	
		
	ul.guff li.boldredguff {
		font-family: 'Roboto Slab', serif; 
		font-weight: 400; 
		font-size: 20px;
		text-transform: uppercase;   
		color: red;	
		}			
		
	aside {
		width: 20%;
		float: right;
		background-color: none;
		
		}
		
	#spacer {
		height: 190px;
		}
		
	#sidenav {
        position: absolute;
        right: 3%;
		width:19%;
		background:red;
		box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
		}
		
	#sidestuff li {
		padding: 4px 10px 4px 10px;
		font-family: 'Oswald', sans-serif;
		font-weight:400;
		letter-spacing: 0.1em;
		font-size:12px;
		border-top: 1px solid white;
		}
		
	#sidestuff li a:link {color:white; text-decoration:none;}
	#sidestuff li a:hover {color:black !important;}
	#sidestuff li a:visited {color:white;}
	#sidestuff li a:active {color: black;}
		
	#sidepix {
		display: block;
		position:relative;
		width: 100%;
		margin-top:20px;
		}		
	
	#sidepix img {
		max-width: 100%;
		margin-bottom: 10px;
		-moz-box-shadow: 0px 6px 5px #ccc;
		-webkit-box-shadow: 0px 6px 5px #ccc;
		box-shadow: 5px 5px 8px 1px rgba(0, 0, 0, 0.4);
		}	
		
	

		
	#smallprint { 
		margin: 60px 0px 0px 18px;
		background-color:#E6E6E6;
		padding: 18px 10px 10px 10px;
		}	
		
	#smallprint h6 { font-family: 'Roboto Slab', serif; font-weight: 400; text-transform: uppercase; font-size: 0.85em; color: red; }
		
	#smallprint p {
		font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 12px; line-height: 15px; color: dimgrey;
		}
		
	#smallprint a {
		font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 12px; line-height: 15px; color: dimgrey; text-transform: underline;
		}
		
	#smallprint b {
		font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 12px; line-height: 15px; color: black;
		}	
		
		
		
	.caption { 
		width: 100%;
		float: right;
		margin: 0px 0px 60px 0px;
		background-color:none;
		}	

	.caption p {
		font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 14px; line-height: 18px; color: red;
		}
		
	.caption a {
		font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 14px; line-height: 18px; color: red; text-transform: underline;
		}
		
	.caption h3 {
		font-family: 'Roboto Slab', serif; font-weight: 400; font-size: 18px; text-transform: uppercase; line-height: 18px; letter-spacing: 0.02em; color: black; padding-bottom: 3px;
		}
		
	.caption h4 {
		font-family: 'Merriweather', serif; font-weight: 700; font-size: 18px; text-transform: uppercase; line-height: 20px; color: red;
		}
		
	#largequote {font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 24px; line-height: 26px; color: red;
		}
		
	
	#logosagain {
		display: inline;
		height:auto;
		padding: 0px 0px 0px 48px;
		}	
		
	#logosagain img {
		display: inline;
		height:40px;
		max-width: 100%;
		margin: 0px 10px 50px 0px;
		}		
		
		

	.back {
		display: block;
		position:relative;
		background-color: none;
		margin: 0px 0px 50px 15px;
		padding: 0px 0px 0px 10px;
		border-bottom: 3px dotted red;
		}
		
	.back h5 {
		padding: 0px 0px 30px 23px;
		}
	
	.back h5 a {
		text-decoration: none;
		}	
		
		
/* Nav */
header nav {
	float: right;
	margin-top: 7px;  
	margin-bottom: 2px;
	
	border: 0px solid red;
	}
	
	header nav li {
		display: inline;
		padding: 0px 4px 0px 8px;
		font-family: 'Oswald', sans-serif;
		font-weight:300;
		letter-spacing: 0.05em;
		font-size:12px;
		border-left: 1px solid red;
		}
		
		li a:link {color:black; text-decoration:none;}
		li a:hover {color:red !important;}
		li a:visited {color:black;}
		li a:active {color: red;}

#skipTo {
	display: none;
	}
	#skipTo li {
		background: #b1fffc;
		}

/* Banner */			
#banner {
	float: left;
	margin 0px 0px 15px 0px;
	width: 100%;
	height: 100%;
	}

	#bannerpic img {
		width: 100%;
		z-index:1;
		}
	

	#bannerguff {
		position: relative;
		width: 100%;
		height: 100%;
		bottom: 250px;
		left: 2.5%;
		z-index:5;
		} 
		
	#bannerguff h2 {
		font-family: 'Source Sans Pro', sans-serif; 
		font-weight: 400;
		font-size: 28px;
		line-height: 28px;
		letter-spacing: 0.6em;
		text-align: center;
		text-shadow: 2px 2px 2px black;
		}



	footer {
		position: absolute;
		bottom:0;
		width: 100%;
		height: auto;
		border: 0px solid red;
    	margin-top:90px;
		
		}
		

	.footernonsense {
		font-family: 'Source Sans Pro', sans-serif; 
		font-weight: 400; 
		font-size: 0.5em; 
		line-height: 1em; 
		letter-spacing: 0.05em; 
		text-align: center; 
		color: gainsboro;
		padding-top: 3px;
		}

#sillymap {
		width:98%;
		height:300px;
		margin-bottom: 40px;
		}


/* Media Queries */

@media screen and (max-width: 768px) {
		
	#bannerguff {
		bottom: 150px;
		left: 0;
		} 
		
	#bannerguff h2 {
		font-size: 20px;
		font-weight: 600;
		line-height: auto;
		letter-spacing: 0.35em;
		text-shadow: none;}
		}		
		

		
@media screen and (max-width: 600px) {
	
	#sidestuff li {
		padding: 4px 10px 4px 10px;
		font-family: 'Oswald', sans-serif;
		font-weight:400;
		letter-spacing: 0.15em;
		font-size:9px;
		border-top: 1px solid white;
		}	
		

	body {
	background-image:url("../images/dots2f.gif");
		}

		header nav li {
		
		margin-left: 1px;
		padding: 0px 3px 0px 6px;
		font-size:8px;
		border-left: 1px solid red;
		}
		
	#bannerguff {
		bottom: 120px;
		} 
	#bannerguff h2 {
		font-size: 14px;
		line-height: auto;
		}	
		
	.bigtext {font-family: 'Merriweather', serif; font-weight: 400; line-height: auto; font-size: 18px; color: black;}	
	
	p { font-family: 'Merriweather', serif; font-weight: 300; line-height: auto; font-size: 15px; margin-bottom: 12px;}
		
	
	ul.guff li {
		display: list-item; 
		background: url("../images/arrow_r.gif") no-repeat left top;	
		list-style: none;
		font-family: 'Merriweather', serif; 
		font-weight: 400;
		font-size: 14px;
		line-height: 18px ;
		padding: 0px 0px 6px 38px;
		margin: 5px 0px 5px 0px;	
		}	
		
	ul.guff li.boldredguff {
		font-family: 'Roboto Slab', serif; 
		font-weight: 400; 
		font-size: 15px;
		text-transform: uppercase;   
		color: red;	
		}

		
	.caption p {
	font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 10px; line-height: 12px; color: red;
		}
		
	.caption a {
	font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 10px; line-height: 12px; color: red; text-transform: underline;
		}
		
	#largequote {font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 18px; line-height: 20px; color: red;}
		
		}

@media screen and (max-width: 480px) {

	#spacer  {display:none;}

	#sidenav {display:none;}

	#skipTo {
		display: block;
		}
		
	
	header nav, #main, aside {
		float: left;
		clear: left;
		margin: 0 0 10px; 
		width: 100%;
		}	
		header nav li {
			margin: 0;
			font-size: 0.8em;
			letter-spacing: 0.2em; 
			font-weight: 300;
			background: red;
			display: block;
			margin-bottom: 1px;
			border: 0px;
			}
			
		li a:link {color:white; text-decoration:none;}
		li a:hover {color:black}
		li a:visited {color:white;}
		li a:active {color: black;}
			header nav a {
				display: block;
				padding:10px;
				text-align: center;
				}	
				
		#bannerguff {
		bottom: 90px;
		left: 0;
		} 
				
		#bannerguff h2 {
		font-size: 11px;
		font-weight: 600;
		line-height: 12px;
		letter-spacing: 0.35em;
		text-shadow: none;
		}	
		
		.bigtext {font-size: 22px;
		}
		
		#chart2 {
		width: 90%;
		}
		
		#chart3 {
		width: 90%;
		}
		
		#chart4 {
		width: 90%;
		}
		
		#chart5 {
		width: 90%;
		}
		
		#chart6B {
		width: 90%;
		}
		
		#building {
		width: 90%;
		}
		
		#sidepix {
		width: 100%;
		padding-left:6%; 
		}	
		
		#logosagain img {
		height:30px;
		}
		
		.caption { 
		width: 85%;
		margin: 0px 20px 30px 0px;
		}	
		
		.where { 
		line-height: 18px;
		}
		
		footer {
		height: auto;}
		
}<!--end mobile portrait-->