/*
--------------------------------------------------
Author: 		Nick Cox
Project:		The Seattle School of Theology & Psychology Annual Report
Date:			11/22/11
Tools:			Skeleton Responsive Framework (getskeleton.com) (Licensed under the MIT license)
--------------------------------------------------
*/

/* Table of Contents
==================================================
	#Typography
	#Site Styles
	#Page Styles
	#Media Queries
	 */

/* Hide header on load */

	 html.loading header {
		display: none;
	}
	
/* Fix horizontal scroll */
	body {
		overflow: hidden;
	}
	
/* Experimental header */

	nav {
		display: none; /* Hidden on load, shown with jQuery */
		text-align: center;
		padding: 1% 0;
		width: 100%;
		background: #005757;
		background-image: linear-gradient(bottom, rgb(11,70,87) 36%, rgb(6,80,100) 84%);
		background-image: -o-linear-gradient(bottom, rgb(11,70,87) 36%, rgb(6,80,100) 84%);
		background-image: -moz-linear-gradient(bottom, rgb(11,70,87) 36%, rgb(6,80,100) 84%);
		background-image: -webkit-linear-gradient(bottom, rgb(11,70,87) 36%, rgb(6,80,100) 84%);
		background-image: -ms-linear-gradient(bottom, rgb(11,70,87) 36%, rgb(6,80,100) 84%);		
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.36, rgb(11,70,87)),
			color-stop(0.84, rgb(6,80,100))
		);
	}
	
	nav ul {
		margin: 10px 5% 20px 5%;
		width: 100%;
		padding: 0;
	}

	nav ul li {
		float: left;
		margin: 20px 1% 20px 1%;
		width: 20%;
	}
	
	nav ul li a {
		padding: 8px 37% 8px 37%;
		color: white;
		width: 100%;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		-o-border-radius: 4px;
		-ms-border-radius: 4px;
		border-radius: 4px;
		font-weight: 700;
		font-size: 17px;
		text-shadow: 1px 1px 1px #111;
		-moz-box-shadow: 0 0 4px #000;
		-webkit-box-shadow: 0 0 4px #000;
		-o-box-shadow: 0 0 4px #000;
		-ms-box-shadow: 0 0 4px #000;
		box-shadow: 0 0 4px #000;
		background: #005757;
		background-image: linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
		background-image: linear-gradient(bottom, rgb(11,70,87) 36%, rgb(6,80,100) 84%);
		background-image: -o-linear-gradient(bottom, rgb(11,70,87) 36%, rgb(6,80,100) 84%);
		background-image: -moz-linear-gradient(bottom, rgb(11,70,87) 36%, rgb(6,80,100) 84%);
		background-image: -webkit-linear-gradient(bottom, rgb(11,70,87) 36%, rgb(6,80,100) 84%);
		background-image: -ms-linear-gradient(bottom, rgb(11,70,87) 36%, rgb(6,80,100) 84%);
		background-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.36, rgb(11,70,87)),
			color-stop(0.84, rgb(6,80,100))
		);
	}
	
	nav ul li a,
	nav ul li a:hover,
	nav ul li a:visited {
		color: #fff;
		text-decoration: none;
		cursor: pointer;
	}
	
	nav ul li a:hover {
		box-shadow: inset 0 0 6px #232323;
	}
	
	nav ul li a:active {
		box-shadow: inset 0 0 7px #222;
		border: 1px solid #222;
	}
	
	#nav-inactive {
		display: none;
	}
	
	.mobile-menu {
		display: none; /* Hidden on load, activated with jQuery */
		float: left;
		position: absolute;
		right: 31.5%;
		margin-bottom: -273px;
		z-index: 2;
	}
	
	.mobile-menu ul li {
		float: none;
		background: #055468;
		background: rgba(6,79,100,0.96);
		text-align: right;
		padding: 0;
		margin: 0;
		border-bottom: 1px solid #BABABA;
		height: 37px;
		line-height: 20px;
		text-align: right;
	}
	
	.mobile-menu ul li:last-child {
		border-bottom: none;
	}
	
	.mobile-menu ul li:last-child:hover {
		border-bottom: 1px solid;
	}
	
	.mobile-menu li a {
		text-decoration: none;
		font-weight: 700;
		float: left;
		height: 15px;
		margin: 0;
		padding: 10px 10px 10px 20px;
		width: 255px;
	}
	
	.mobile-menu li a span {
		font-weight: 400;
		color: #8CD1F3;
	}
	
	.mobile-menu a {
		color: #fff;
	}
	
	.mobile-menu li:hover {
		border-bottom: 1px solid #064f64;
		background: #fff;
		background: rgba(255,255,255,0.8);
	}
	
	.mobile-menu li a:hover {
		color: #064f64;
	}

/* #Typography
================================================== */

	h1 {
		font-size: 32px; 
		margin: 32px 20px 0 20px;
		font-weight: 700;
	}
	
	h2 {
		margin: 3px 20px 25px 20px;
		font-size: 1.2em;
	}
	
	h4 {
		font-weight: 700;
		margin: 12px 20px;
		font-size: 18px;
	}
	
	h5 {
		margin: 10px 20px;
	}
	
	p {
		font-size: 16px;
		margin-top: 16px;
		margin-bottom: 16px;
		padding: 0 20px;
	}
	
	b {
		font-weight: 700;
	}
	
	video {
	max-width: 100%;
	height: auto;
	}



/* #Site Styles
================================================== */

	html {
		overflow-y: scroll;
	}

	body, html {
		font-family: 'ff-scala-sans-web', 'Helvetica Neue', Helvetica, sans-serif;
		color: #666;
	}
	
	header {
		float: left;
		margin-bottom: -334px;
		z-index: 100;
		position: relative;
	}
	
	/* Classes for hiding and showing nav */
	
	.visible { display: block; }
	.invisible { display: none; }
	
	/* hide mobile drop unless small */
	
	.mobile-drop,
	.mobile-drop select,
	footer select {
		/* display: none; */
	}
	
	/*	
	nav {
		background: #064f64;
		color: #f6f6f6;
		-moz-border-radius: 0 0 4px 4px;
		-webkit-border-radius: 0 0 4px 4px;
		-o-border-radius: 0 0 4px 4px;
		-ms-border-radius: 0 0 4px 4px;
		border-radius: 0 0 4px 4px;
		-moz-box-shadow: 3px 3px 5px #222;
		-webkit-box-shadow: 3px 3px 5px #222;
		-o-box-shadow: 3px 3px 5px #222;
		-ms-box-shadow: 3px 3px 5px #222;
		box-shadow: 3px 3px 5px #222;
	}
	*/
	
	.ninety-deg-clock-rotate {
		display: block;
		position: relative;
		right: 7px;
		float: right;		
	}
	
	.rotated {
		-webkit-transform: rotate(90deg); 
		-moz-transform: rotate(90deg);
	}
	
	/* nav div:nth-child(1) {
		background: #064f64;
		border-right: #f2f2f2;
	}

	nav div:nth-child(2),
	nav div:nth-child(3),
	nav div:nth-child(4) {
		background: #064f64;
	} */

	nav h3 {
		font-size: 20.8px;
		margin: 16px 0;
		font-weight: 700;
		padding: 0 10px;
	}
	
	nav h3 a:link, nav h3 a:visited {
		color: #f2f2f2;
		text-decoration: none;
		padding: 5px;
		
	}
	
	nav h3 a:hover {
		background: #a0c6d8;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		-o-border-radius: 2px;
		-ms-border-radius: 2px;
		border-radius: 2px;
	}
	
	/* nav ul {
		padding: 0 10px;
	}
	*/
	
	.nav-addition {
		display: none;
	}
	
	.nav-addition ul li {
		border-top: 1px solid #A0C6D8;
		line-height: 14px;
		margin-bottom: 2px;
		float: left;
		width: 200px;
		padding: 10px 5px 15px 5px;
	}
	
	.nav-addition ul li a {
    	line-height: 13px;
    	color: #f2f2f2;
    	text-decoration: none;
	}
	
	.nav-addition li:hover {
		background: #a0c6d8;
		color: #064f64;
		-webkit-border-radius: 0 0 2px 2px;
		-moz-border-radius: 0 0 2px 2px;
		-o-border-radius: 0 0 2px 2px;
		border-radius: 0 0 2px 2px;
	}
	
	.veeps {
    	margin: 0;
	    padding-right: 0;
    	width: 100px;
    	font-weight: 700;
    	float: left;
	}
	.categories {
		float: left;
		width: 88px;
	}
		

	.pull-tab {
		text-align: center;
		text-transform: uppercase;
		cursor: pointer;
		background: #064f64;
		padding: 5px 10px;
		float: left;
		position: relative;
		left: 800px;
		color: #f2f2f2;
		-moz-border-radius: 0 0 4px 4px;
		-webkit-border-radius: 0 0 4px 4px;
		-o-border-radius: 0 0 4px 4px;
		-ms-border-radius: 0 0 4px 4px;
		border-radius: 0 0 4px 4px;
		
	}
	
	.pull-tab h5 {
		margin: 0;
		padding: 0 2px;
		font-size: 13px;
		text-shadow: 1px 1px 1px #111;
	}
	
	.footer-container {
		background: #eee;
		background: rgba(184,209,190,0.1);
		border: 1px solid #ccc;
		box-shadow: 0 -2px 6px #b0b0b0;
	}
		
	footer ul {
		margin-top: 12px;
		padding: 5px 5px 5px 0;
	}	
	
	footer ul li {
		display: inline;
		margin: 5px 20px 5px 0;
		font-size: 14px;
	}
	
	footer li:first-child a {
		text-indent: -9999px;
		width: 300px;
		height: 45px;
		background: url(../img/the-seattle-school-logo.png) top left no-repeat;
		float: left;
		margin: 0 0 16px;
	}
	
	footer li:nth-child(2) a {
		display: none;
	}
	
	footer li a, footer li a:visited {
		color: #064f64;
		text-decoration: none;
	}
	
	footer li a:hover {
		color: #064f64;
		text-decoration: underline;
	}
	
	footer p {
		float: right;
		font-size: 14px;
		padding-right: 0;
	}
	
	
	
	

/* #Page Styles
================================================== */

/* Index */

	body.index {
		background: #0b566c;
	}
	
	.splash-container {
		text-align: center;
	}
	
	.section-container {
		margin: 40px 0;
	}
	
	.index-section {
		text-align: center;
		padding: 0;
		background: #fff;
		background: rgba(255,255,255,0.8);
		border: 1px solid #054759;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		-o-border-radius: 4px;
		-ms-border-radius: 4px;
		border-radius: 4px;
		
	}
	
	.index-section:hover {
		-moz-box-shadow: 3px 2px 7px #101010;
		-webkit-box-shadow: 3px 2px 7px #101010;
		-o-box-shadow: 3px 2px 7px #101010;
		-ms-box-shadow: 3px 2px 7px #101010;
		box-shadow: 3px 2px 7px #101010;
	}
	
	.index-section img {
		background: #fff;
		padding: 5px;
		cursor: pointer;
	}
	
	.index-section p {
		padding: 0;
		margin: 10px 0;
	}
	
	.index-section p a {
		text-decoration: none;
		color: #064f64;
		font-size: 14px;
	}
	
	.index-section p a:hover {
		color: #032C38;
	}
	
	#index-dropdown {
		display: none;
		text-align: left;
	}
	
	#index-dropdown li {
		padding: 2px 8px;
	}
	
	#index-dropdown li:hover {
		background: #fff;
		background: rgba(255,255,255,0.8);
		box-shadow: 0 0 2px #064f64;
	}
	
	#index-dropdown a {
		color: #064f64;
		text-decoration: none;
		font-size: 16px;
		font-weight: 700;
	}
	
	#index-dropdown li a span {
		font-size: 13px;
		color: #097391;
		font-weight: 400;
	}
	
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		.triangle {
			font-size: 10px;
		}
	}
	

	


/* Keith Anderson */

	.keith-letter-body {
		background: url('../img/keith-anderson.jpg') bottom left fixed no-repeat #f0f0f0;
	}

	.keith-letter {
		margin-top: 32px;
		margin-bottom: 32px;
		background: #fff;
		background: rgba(255,255,255,0.8);
		border: 1px solid #f6f6f6;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		-o-border-radius: 4px;
		-ms-border-radius: 4px;
		border-radius: 4px;
		-moz-box-shadow: 3px 3px 5px #ccc;
		-webkit-box-shadow: 3px 3px 5px #ccc;
		-o-box-shadow: 3px 3px 5px #ccc;
		-ms-box-shadow: 3px 3px 5px #ccc;
		box-shadow: 3px 3px 5px #ccc;
	}

/* FINANCIAL DATA */

	.charts {
		text-align: center;
	}

	.charts h1 {
		margin-top: 0;
		padding-top: 40px;
		text-align: center;
	}
	
	.charts h2 {
		font-size: 28px;
		margin: 10px 0;
		padding: 10px 0;
		font-weight: 700;
		text-align: center;
	}
	
	.expense-outer,
	.revenue-outer,
	.applications-outer,
	.table-outer {
		background: #f5f5f5;
		background: rgba(255,255,255,0.3);
		border: 1px solid #ccc;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		-o-border-radius: 3px;
		-ms-border-radius: 3px;
		border-radius: 3px;
		margin-bottom: 20px;
		text-align: left;
	}
	
	#revenue-container,
	#expense-container {
		width: 580px;
		height: 50%;
		margin: 0 auto;
	}
	
	#application-container {
		width: 580px;
		height: 100%;
		margin: 20px auto;
	}
	
	.charts table {
		margin: 20px auto;
		text-align: left;
	}
	
	.charts table tbody {
		border: 1px solid #ccc;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		-o-border-radius: 3px;
		-ms-border-radius: 3px;
		border-radius: 3px;
	}
	
	table td {
		padding: 5px;
		color: #333;
	}
	
	table tr:nth-child(odd) {
		background: rgba(213,237,236,0.6);
	}
	
	.asset-category {
		padding-right: 45px;
		text-align: right;
	}
	
	.charts table tr:last-child {
		font-weight: 700;
		border-top: 1px solid #ccc;
	}
		
/* Honor Roll */

	.honor-roll ul {
		margin-left: 20px;
	}
	
	.honor-roll ul li {
		line-height: 1em;
	}

	.pres-table-exec ul {
		font-size: 2em;
	}
	
	.pres-table-exec ul li {
		margin: 26px 0;
	}
	
	.pres-table-exec ul li:first-child {
		margin-top: 0;
	}
	
	.pres-table ul {
		font-size: 1.5em;
	}
	
	.pres-table ul li {
		margin: 12px 0;
	}
	
	.pres-table ul li:first-child {
		margin-top: 0;
	}
	
	.partner ul {
		font-size: 1em;
	}
	
	.asterisk {
		color: #064f64;
	}
	
/* Financials */

	.revenue-outer h2, 
	.expense-outer h2,
	.applications-outer h2 {
		line-height: 1.1em;
	}


/*  CSS
================================================== */

		body {
			background: #f2f2f2;
			background: url('../img/noise-bg.png') top left repeat;
		}
		
		ol li {
			font-size: 16px;
			margin-left: 10px;
		}
		
		h1 {
			line-height: 1;
		}
		
		h3 {
			margin: 16px 20px;
			font-size: 20px;
			font-weight: 700;
		}
		
		.movie-letter-container {
			height: 507px;
		}

		.letter-container {
			background: #fff;
			background: rgba(255,255,255,1);
			margin-top: 20px;
			margin-bottom: 20px;
			border: 1px solid #dfdfdf;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			-o-border-radius: 3px;
			-ms-border-radius: 3px;
			border-radius: 3px;
			margin-left: 0 !important;
		}
		
		ul.dan-year li {
			font-size: 16px;
		}
		
		.flexslider {
			height: 450px;
			background: none;
			border: none;
		}
		
		.flex-control-nav {
			bottom: 1%;
		}
		
		.flex-direction-nav li a {
			top: 92.5%;
		}
		
		.flex-direction-nav li .prev {
			left: 20%;
		}
		
		.flex-direction-nav li .next {
			right: 20%;
		}
		
		.flex-control-nav li {
			position: relative;
			bottom: 7px;
		}
		
		.breakout-figures {
			margin: 20px 0;
		}
		
				
		.breakout-figures div {
			min-height: 270px;
			/* background: url(../img/gray-blue-gradient-4.png) top left repeat-x; */
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			-o-border-radius: 3px;
			border-radius: 3px;
			background: url(../img/teal-noise-bg.png) top left repeat;
			border: 1px solid #ccc;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
		
		.breakout-figures div h1 { /* If Typekit Fails */
			font-family: Arial;
			font-size: 3.6em;
			letter-spacing: -1px;
			height: 110px;
			line-height: 118px;
			margin: 5px;
			text-align: center;
			text-shadow: 0 2px 2px #154364;
			color: #fbfbfb;
			text-shadow: 0 2px 2px #154364;
		}
			
		
		.wf-active .breakout-figures div h1 { /* Typekit */
			font-family: franklin-gothic-ext-comp-urw, sans-serif;
			font-weight: 700;	
			color: #fbfbfb;
			height: 110px;
			line-height: 118px;
			font-size: 82px;
			margin: 5px;
			text-align: center;
			text-shadow: 0 2px 2px #154364;
		}
		
		.breakout-figures .date {
			font-family: franklin-gothic-ext-comp-urw, sans-serif;
			font-weight: 700;	
			color: #fff;
			height: 90px;
			line-height: 100px;
			font-size: 75px;
			margin: 5px;
			text-align: center;
			text-shadow: 0 2px 2px #154364;
		}
		
		.breakout-figures div p {
			padding-top: 10px;
			color: #fbfbfb;
			text-align: left;
			font-size: 18px;
			line-height: 22px;
			font-weight: 700;
			text-shadow: 0 1px 1px #154364;
		}
		
		.breakout-figures div.no-hr p {
			padding-top: 10px;
			color: #fbfbfb;
			text-align: left;
			font-size: 21px;
			line-height: 24px;
			background: none;
			text-shadow: 0 1px 1px #154364;
			font-weight: 700;
			letter-spacing: 0.5px;
			text-indent: -12px;
		}
		
		.mobile-image {
			display: none;
		}
		
		.movie-time {
			display: none;
			height: 465px;
			margin-top: 20px;
			margin-bottom: 20px;
			text-align: center;
		}
		
		video {
			text-align: center;
			padding-top: 60px;
		}
		
		.veep-name {
			margin-bottom: 0;
		}
		
		.veep-title {
			margin-top: 0;
		}
		
		.hero-container img {
			float: right;
		}
		
		.hero-container img:nth-child(2) {
			display: none;
		}
		
		.hero-container-keith-img {
			position: relative;
			top: 34px;
		}
		
		.hero-container-derek-img {
			position: relative;
			top: 49px;
		}
		
		
		.hero-container-paul-img {
			position: relative;
			top: 75px;
		}
		
		.hero-container-dan-img {
			position: relative;
			top: 80px;
		}	
		
		.hero-container-cathy-img {
			position: relative;
			top: 34px;
		}
		
		.video-link-container,
		.video-link-container-lower {
			float: right;
			margin: 0;
			height: 0;
		}
		
		.video-link-container-lower,
		.video-link-container,
		.video-link-container-2 {
			float: right;
			height: 16px;
			margin: 0 30px 0 0;
			background: #fff;
			background: rgba(255,255,255,0.9);
			position: relative;
			padding: 8px 18px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			-o-border-radius: 5px;
			-ms-border-radius: 5px;
			border-radius: 5px;
			border: 1px solid #ccc;
		}
		
		.video-link-container-lower 	{ bottom: 0px; }
		.video-link-container 			{ bottom: 60px; }
		.video-link-container-2 		{ bottom: 35px; right: 35px; border: 1px solid #ccc; }
		
		.video-link-container-2 a {
			text-decoration: none;
		}
		
		.video-link-container-lower:hover,
		.video-link-container:hover,
		.video-link-container-2:hover {
			background: rgba(255,255,255,0.94);
			text-decoration: none;
		}
		
		p.video-link-container a img,
		p.video-link-container-lower a img {
			display: none !important;
			margin-bottom: 8px;
		}
		
		.video-link-container a,
		.video-link-container-lower a {
			background: url('../img/triangle.png') 100% 12px no-repeat;
			text-decoration: none;
			padding: 10px 14px 10px 10px;
		}
		
		@media screen and (-webkit-min-device-pixel-ratio:0) {
			
			.triangle { font-size: 12px; }
			
		}
		
		.video-container {
			position: relative;
			padding-bottom: 50%;
			padding-top: 30px;
			height: 0;
			overflow: hidden;
			text-align: center;
		}
		.video-container iframe,  
		.video-container object,  
		.video-container embed {
			position: absolute;
			top: 0;
			left: 7%;
			width: 86%;
			height: 90%;
			border: 1px solid #ccc;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			-o-border-radius: 4px;
			-ms-border-radius: 4px;
			border-radius: 4px;
		}

	footer select {
			display: none;
		}
		
		

/* #Media Queries
================================================== */


	/* 
	Tablet Portrait size to standard 960 (devices and browsers) 
	*/
	
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		
		.pull-tab {
			left: 600px;
		}
		
		nav {
			background-image: linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -o-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -moz-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -webkit-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -ms-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			
			background-image: -webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0, rgb(14,72,87)),
				color-stop(0.5, rgb(48,122,140)),
				color-stop(0.92, rgb(33,111,128))
			);
		}
		
		nav ul li a {
			padding: 8px 27% 8px 27%;
			background-image: linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -o-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -moz-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -webkit-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -ms-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			
			background-image: -webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0, rgb(14,72,87)),
				color-stop(0.5, rgb(48,122,140)),
				color-stop(0.92, rgb(33,111,128))
			);
				
		}
		
		.mobile-menu {
			right: 31.5%;
		}
		
		
		.nav-addition li:hover {
		background: #a0c6d8;
		color: #064f64;
		-webkit-border-radius: 0 0 2px 2px;
		-moz-border-radius: 0 0 2px 2px;
		-o-border-radius: 0 0 2px 2px;
		border-radius: 0 0 2px 2px;
		}
		
		.splash {
			margin-bottom: 50px;
		}
		
		.index-section img {
			width: 140px;
		}
		
		.flexslider {
			height: 450px;
		}
		
		.flex-direction-nav li a {
    		top: 93%;
	    }
		
		.hero-container img {
			position: relative;
			top: 103px;
		}
		
		.hero-container .hero-container-paul-img {
			top: 155px;
		}
		
		.hero-container .hero-container-dan-img {
			top: 159px;
		}
		
		.hero-container .hero-container-derek-img {
			top: 134px;
		}
		
		ul.dan-year li {
			font-size: 16px;
		}
		
		.hero-container .hero-container-cathy-img {
			top: 120px;
		}
		
		p.video-link-container a img {
			display: none !important;
			margin-bottom: 8px;
		}
		
		.breakout-figures div {
			height: 400px;
		}
		
		.wf-active .breakout-figures div h1 {
			font-size: 65px;
		}
		
		.breakout-figures div h1.date {
			font-size: 58px;
		}
		
		.mobile-image {
			display: none;
		}
		
		.video-link-container {
			bottom: 0;
			top: 50px;
		}
		
		.video-link-container-lower {
			bottom: 0; 
			top: 88px;
		}
		
		.video-container {
			top: 40px;
		}

		.video-link-container-2	{ 
			bottom: 0; 
			top: 10px;
			right: 21px;
		}
		
		.video-link-container-2 a {
			text-decoration: none;
		}
		
		#revenue-container,
		#expense-container,
		#application-container {
			width: 560px;
		}
		
		footer li:first-child a {
			text-indent: 0;
			width: auto;
			height: auto;
			background: none;
			float: none;
			margin: 0;
		}
		
		footer li:nth-child(2) a {
			display: inline;
		}

		
	}


	/* 
	Mobile Landscape Size to Tablet Portrait (devices and browsers) 
	*/
	
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		
		nav {
			background-image: linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -o-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -moz-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -webkit-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -ms-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			
			background-image: -webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0, rgb(14,72,87)),
				color-stop(0.5, rgb(48,122,140)),
				color-stop(0.92, rgb(33,111,128))
			);
		}
		
		nav ul li a {
			background-image: linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -o-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -moz-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -webkit-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -ms-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			
			background-image: -webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0, rgb(14,72,87)),
				color-stop(0.5, rgb(48,122,140)),
				color-stop(0.92, rgb(33,111,128))
			);
		}
		
		.mobile-drop,
		.mobile-drop select,
		footer select {
			display: block;
		}
		
		.index-section p a {
			padding: 0 30% 0 30%;
		}
		
		.mobile-drop h3 {
			font-size: 14px;
			color: #fff;
			margin: 0 5px;
			float: left;
		}
		
		.mobile-menu {
			display: none;
		}
		
		.splash {
			margin-bottom: 50px;
			position: relative;
			top: 50px;
		}
		
		nav ul li {
			width: 20.75%;
		}
		
		nav ul li a {
			padding: 8px 24.5%;
		}
		
		
		.mobile-drop {
			background: #064f64;
			background: rgba(6,79,100,0.7);
			width: 423px;
			padding: 10px 0;
			-webkit-border-radius: 0 0 4px 4px;
			border-radius: 0 0 4px 4px;	
			float: left;	
		}
		
		.mobile-drop select {
			padding: 10px;
			width: 260px;
			position: relative;
			left: 20px;
		}

		
		.index-section {
			margin-bottom: 10px;
		}
		
		#index-dropdown li {
			float: left;
		}
		
		#index-dropdown a {
			color: #064F64;
			text-decoration: none;
			font-size: 16px;
			font-weight: 700;
			float: left;
			height: 15px;
			padding: 10px 0 25px 0;
			width: 400px;
		}
		
		.letter-container {
			margin-top: 50px;
			padding-bottom: 88px;
		}
				
		.mobile-image {
			display: inline;
			float: left;
			padding: 5px;
			background: #fff;
			margin: 0 10px 5px 0;
			-moz-box-shadow: 1px 1px 1px #ccc;
			-webkit-box-shadow: 1px 1px 1px #ccc;
			-o-box-shadow: 1px 1px 1px #ccc;
			-ms-box-shadow: 1px 1px 1px #ccc;
			box-shadow: 1px 1px 1px #ccc;
		}
		
		
		
		.breakout-figures div {
			margin-top: 10px;
			margin-bottom: 10px;
			min-height: 0;
		}
		
		
		
		.breakout-figures div:first-child {
			margin-top: 32px;
		}
		
		.wf-active .breakout-figures div h1 {
			height: 75px;
			position: relative;
			bottom: 20px;
		}
		
		.breakout-figures div h1.date {
			height: 70px;
			font-size: 60px;
			bottom: 16px;
		}
		
		.flexslider {
			height: 485px;
		}
		
		.flex-direction-nav li a {
    		top: 93%;
	    }
	   		
		.video-container iframe, 
		.video-container object, 
		.video-container embed {
			height: 84%;	
		}
		
		.movie-letter-container {
			height: 760px;
			border-bottom: none;
		}
		
		.hero-container img:first-child {
			display: none;
		}
		
		p.video-link-container a img,
		p.video-link-container-lower a img {
			display: inline !important;
			margin-bottom: 8px;
		}
		
		p.video-link-container,
		p.video-link-container-lower {
			border: 0;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			top: 41px;
			width: 384px;
			left: 31px;
			border-bottom: none;
			border-right: 1px solid #dcdcdc;
			border-left: 1px solid #dcdcdc;
			-moz-border-radius: 0 0 4px 4px;
			-webkit-border-radius: 0 0 4px 4px;
			-o-border-radius: 0 0 4px 4px;
			-webkit-border-radius: 0 0 4px 4px;
			border-radius: 0 0 4px 4px;
			height: 174px;
			text-align: center;
		}
		
		.hero-container img:nth-child(2) {
			display: inline;
			margin-bottom: 8px;	
		}

		.video-link-container-lower a,
		.video-link-container a {
			bottom: 0;
			padding-right: 40px;
			top: 10px;
			width: 265px;
			left: 21px;
		}
		
		.breakout-figures {
			margin-top: 50px;
		}
		
		.breakout-cathy {
			margin-top: 73px;
		}
		
		.breakout-figures div {
			height: 170px;
		}
		
		.expense-outer, .revenue-outer, .applications-outer, .table-outer {
			text-align: center;
		}
		
		#revenue-container,
		#expense-container {
			width: 400px;
			text-align: center;
		}
		
		.charts h1 {
			margin-top: 30px;
		}
		
		.highcharts-container {
			overflow: visible !important;
		}
		
		footer select {
			display: block;
		}
		
		footer li:first-child a {
			text-indent: 0;
			width: auto;
			height: auto;
			background: none;
			float: none;
			margin: 0;
		}
		
		footer li:nth-child(2) a {
			display: inline;
		}
		
	}

	/* 
	Mobile Portrait Size to Mobile Landscape Size (devices and browsers) 
	*/
	
	@media only screen and (max-width: 479px) {
		
		nav {
			background-image: linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -o-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -moz-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -webkit-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -ms-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			
			background-image: -webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0, rgb(14,72,87)),
				color-stop(0.5, rgb(48,122,140)),
				color-stop(0.92, rgb(33,111,128))
			);
		}
		
		nav ul li a {
			background-image: linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -o-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -moz-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -webkit-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			background-image: -ms-linear-gradient(bottom, rgb(14,72,87) 0%, rgb(48,122,140) 50%, rgb(33,111,128) 92%);
			
			background-image: -webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0, rgb(14,72,87)),
				color-stop(0.5, rgb(48,122,140)),
				color-stop(0.92, rgb(33,111,128))
			);
		}
		
		.mobile-drop,
		.mobile-drop select,
		footer select {
			display: block;
		}
		
		.index-section p a {
			padding: 0 25% 0 25%;
		}
			
		
		.mobile-drop h3 {
			font-size: 14px;
			color: #fff;
			margin: 0 5px;
			float: left;
		}
		
		#index-dropdown li {
			float: left;
		}
		
		#index-dropdown a {
			color: #064F64;
			text-decoration: none;
			font-size: 16px;
			font-weight: 700;
			float: left;
			height: 15px;
			padding: 10px 0 25px 0;
			width: 280px;
		}
		
		.mobile-menu {
			display: none;
			left: 30.5%
		}
		
		.mobile-menu ul li {
			width: 238px;
			position: relative;
			float: right;
			left: 5px;
		}
		
		.mobile-menu li a {
			padding: 10px 0px 10px 0;
			width: 230px;
		}
		
		.splash {
			margin-bottom: 20px;
			position: relative;
			top: 50px;
		}
		
		nav ul li {
			float: left;
			margin: 20px 1% 20px 1%;
			width: 20.75%;
		}
	
		nav ul li a {
			padding: 8px 15% 8px 15%;
		}
		
		.mobile-drop {
			background: #064f64;
			background: rgba(6,79,100,0.7);
			width: 302px;
			padding: 10px 0;
			-webkit-border-radius: 0 0 4px 4px;
			border-radius: 0 0 4px 4px;	
			float: left;	
		}
		
		.mobile-drop select {
			padding: 10px;
			width: 260px;
			position: relative;
			left: 20px;
		}
		
		.keith-letter {
			margin-bottom: 250px;
		}
		
		.index-section {
			margin-bottom: 10px;
		}
		
		.letter-container {
			margin-top: 30px;
		}
		
		
		.flexslider {
			height: 620px;
		}
		
		.hero-container img {
			display: none;
			margin-bottom: 8px;
		}
		
		p.video-link-container a img,
		p.video-link-container-lower a img {
			display: inline !important;
			margin-bottom: 8px;
		}
		
		
		.mobile-image {
			display: inline;
			float: left;
			padding: 5px;
			background: #fff;
			margin: 0 10px 5px 0;
			-moz-box-shadow: 1px 1px 1px #ccc;
			-webkit-box-shadow: 1px 1px 1px #ccc;
			-o-box-shadow: 1px 1px 1px #ccc;
			-ms-box-shadow: 1px 1px 1px #ccc;
			box-shadow: 1px 1px 1px #ccc;
		}
		
		.breakout-figures {
			margin: 50px 0 20px 0;
		}
		
		.breakout-cathy {
			margin-top: 73px;
		}

		.breakout-figures div {
			margin-top: 10px;
			margin-bottom: 10px;
			min-height: 0;
		}
		
		.wf-active .breakout-figures div h1 {
			height: 90px;
			position: relative;
			bottom: 10px;
		}
		
		.movie-letter-container {
			height: 854px;
		}

		div.hero-container {
			border-bottom: 0;
		}
		
		p.video-link-container,
		p.video-link-container-lower {
			border: 0;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			top: 41px;
			width: 264px;
			left: 31px;
			border-bottom: 1px solid #dcdcdc;
			border-right: 1px solid #dcdcdc;
			border-left: 1px solid #dcdcdc;
			-moz-border-radius: 0 0 4px 4px;
			-webkit-border-radius: 0 0 4px 4px;
			-o-border-radius: 0 0 4px 4px;
			-webkit-border-radius: 0 0 4px 4px;
			border-radius: 0 0 4px 4px;
			height: 174px;
		}
		
		p.video-link-container-lower {
			border: 0;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			top: 41px;
			width: 264px;
			left: 31px;
			border-bottom: 1px solid #dcdcdc;
			border-right: 1px solid #dcdcdc;
			border-left: 1px solid #dcdcdc;		
		}

		.video-link-container-lower a,
		.video-link-container a {
			bottom: 0;
			padding-right: 40px;
			top: 10px;
			width: 265px;
			left: 21px;
		}
		
		.flex-direction-nav li a {
			top: 94.5%;
		}
				
		.breakout-figures div {
			height: 216px;
		}
		
		.charts h1 {
			margin-top: 30px;
		}
		
		#revenue-container,
		#expense-container {
			display: none;
		}
		
		#revenue-iphone,
		#revenue-iphone {
			display: block;
		}
		
		footer select {
			display: block;
		}
		
		.video-link-container-2 {
			bottom: 0;
			right: 0;
		}
		
		footer li:first-child a {
			text-indent: 0;
			width: auto;
			height: auto;
			background: none;
			float: none;
			margin: 0;
		}
		
		footer li:nth-child(2) a {
			display: inline;
		}
	
		
		}
		
/* #iPhone 4 Retina display
================================================== */
		
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
	
					  	
}