/*  MAKE LAYOUT RESPONSIVE at 480px FOR IPHONE LANDSCAPE ============================================ */


#meta {left:0px; top: 50px; width: 100%; text-align: center; padding-bottom: 30px;}

	
		header {
			width: 93.75%; /* 450px / 480px */
		}


		#maincontent{
			width: 93.75%; /* 450px / 480px */
		}
		
	
		.maincontent{
			width: 93.75%; /* 450px / 480px */
		}
		
		
		footer {
			width: 93.75%; /* 450px / 480px */
		}
		
		
	body {
		font-size: 16px;
	}


	h1, h3 {
		font-size: 15px;
	}

	.maincontent.person a {
		font-size: 13px;
	}

	.qtip{
		width: 200px;
	}
	
	.qtip-red {
		font-size: 11px;
	}
	.qtip-red h1 {
		font-size: 12px;
	}

	#nav ul.std {
		display: none;
	}

	#nav ul.alt {
		display: block;
	}
	
	#nav.double {
		padding-top: 0px;
		padding-bottom: 15px;
	}
	
	#nav.index {
		text-align: center;
		padding: 2em 0 1em 0;
	}
	
	#nav {
		padding-top: 10px;
		padding-bottom: 22px;
		text-align: center;
	}
	#nav img { text-align: center; position: relative; top: 0; left: 0; margin: 9px 0 18px 0; }
	#nav ul li {line-height: 150%;}
	#nav.double { padding-top:10px;}

	
	#altnav select {
		font-family: 'Muli', sans-serif; font-size: 13px; font-style: normal; font-weight: 300; letter-spacing: 0px;
   }

	body {		
		-webkit-background-size: 1000px 666px;
		-moz-background-size: 1000px 666px;
		background-size: 1000px 666px;
	}
	#logoAnim {
		width: 300px;
		height: 137px;
		background-size: 300px Auto;
		
		-webkit-background-size: 300px 137px;
		-moz-background-size: 300px 137px;
		background-size: 300px 137px;
			
		margin: 20px auto 0 auto;
	}
	
	#social {
		margin: 20px auto 40px auto;
		padding-right: 0px;
		width: 80%;
		text-align: center;
	}
	
/*  GRID OF EIGHT TURNS INTO A GRID OF FOUR */

.span_8_of_8 {
	width: 100%; 
	margin-left: 0;
}

.span_7_of_8 {
	width: 100%;
	margin-left: 0;
}

.span_6_of_8 {
	width: 100%;
	margin-left: 0;
}

.span_5_of_8 {
	width: 100%;
	margin-left: 0;
}

.span_4_of_8 {
	width: 100%;
	margin-left: 0;
}

.span_3_of_8 {
	width: 74.2%;
	margin: 1% 0 1% 3.2%;
}

.span_2_of_8 {
	width: 48.4%;
	margin: 1% 0 1% 3.2%; 
}

.span_1_of_8 {
	width: 22.6%;
	margin: 1% 0 1% 3.2%; 
}

.span_1_of_8:nth-child(4n+1) { 
	clear: both;
	margin-left: 0;
}
		
/*  Except in the Example */

#example .maincontent .span_8_of_8 {
	width: 100%; 
	margin-left: 0;
}
#example .maincontent .span_7_of_8 {
	width: 100%; 
	margin-left: 0;
}
#example .maincontent .span_6_of_8 {
	width: 100%;
	margin-left: 0; 
}
#example .maincontent .span_5_of_8 {
	width: 100%; 
	margin-left: 0;
}
#example .maincontent .span_4_of_8 {
	width: 100%; 
	margin-left: 0;
}
#example .maincontent .span_3_of_8 {
	width: 100%;
	margin-left: 0; 
}
#example .maincontent .span_2_of_8 {
	width: 100%%; 
	margin-left: 0;
}
#example .maincontent .span_1_of_8 {
	width: 100%; 
	margin-left: 0;
}