/*
CSS for the demo: Recreating the Nikebetterworld.com Parallax Demo
Demo: Recreating the Nikebetterworld.com Parallax Demo
Author: Ian Lunn
Author URL: http://www.ianlunn.co.uk/
Demo URL: http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/
Tutorial URL: http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/

License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.ianlunn.co.uk/.

Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/

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

html, body { height:100%; }

body{
	margin: 0;
	min-width: 980px;
	padding: 0;
}

a { color: #c00; }


.center { text-align: center; margin: 0 auto; }
.logo { margin-top: 0; }
.navlink { margin-top: 150px; font: 16px/20px "Gill Sans", Futura, Helvetica, Arial, sans-serif; letter-spacing: .9em; color: #333; text-transform: uppercase; text-shadow: 1px 1px 0 #fff; }
.navlink a { color: #222; text-decoration: none; }
.navlink a:hover { color: #c00; }
.leftlink { padding: 0 40px 0 70px; border-right: 1px dotted #666; }
.rightlink { padding-left: 40px; }
#wrapper { width: 960px; margin: 0 auto; padding-top: 60px; position: relative; text-align: left; }


@font-face { font-family: Oswald; src: url('../fonts/oswald-webfont.eot?') format('eot'), url('../fonts/oswald-webfont.woff') format('woff'), url('../fonts/oswald-webfont.ttf')  format('truetype'), url('../fonts/oswald-webfont.svg#svgFontName') format('svg'); }
@font-face { font-family: Arvo; src: url('../fonts/arvo-regular-webfont.eot?') format('eot'), url('../fonts/arvo-regular-webfont.woff') format('woff'), url('../fonts/arvo-regular-webfont.ttf')  format('truetype'), url('../fonts/arvo-regular-webfont.svg#svgFontName') format('svg'); }

menu, menu li { float: left; list-style-type: none; padding: 0; margin: 0; }
.pad-40 { padding-left: 40px; }
#header menu li a { color: #bcc; display: block; text-decoration: none; word-wrap: break-word; width: 110px; height: 90px; padding: 10px 0 0 10px; letter-spacing: 1px; font: 400 34px/34px Oswald, "Arial Narrow", sans-serif; text-transform: uppercase; float: left; border-right: 1px solid #ccc; }
#header .small { font: 400 20px/20px Oswald, "Arial Narrow", sans-serif; display: block; height: 20px; }
#header menu li a.select { color: #444; background: #eee; }

p {
	margin: 0 0 16px 0;	
	font: 14px/20px Arvo, Helvetica, Arial, sans-serif; 
	color: #000;
	
}

p, ul{
	font-family: Arvo, Helvetica, Arial, sans-serif;
	font-size-adjust:0.488;
}




img{
	border: 0;
}

h1 { font: normal 48px/42px Arvo, Georgia, serif; text-transform: uppercase; }

#pixels { font-size-adjust:0.40; }

h2{
	//font-family: Georgia, sans-serif;
	font: 400 100px/90px Oswald, "Arial Narrow", serif;
	//font-size-adjust:0.531; //re-calculate adjustment
	font-style:normal;
	//opacity: .6;
	padding: 0;
	margin: 0 0 20px;
	letter-spacing: -4px; 
	text-transform: uppercase;
	color: #000;
	
}


h3 { font: 40px/36px Arvo, Georgia, serif; letter-spacing: -.03em; padding: 0; margin: 0 0 20px; opacity: .7; }


.float-left{
	float: left;	
	margin: 0 0 0 40px;
}

.float-right{
	float: right;
	margin: 0 40px 0 0;
}

.center{
	font-size: 2.5em;
	padding: 80px 0;
	text-align: center;
}

#nav{
	list-style: none;
	position: fixed;
	right: 20px;
}

#nav li{
	margin: 0 0 15px 0;	
}

#header, #intro, #second{
	width: 100%;
}

#header{
	background: #fff;
	height: 100px;	
	position: fixed;
	clear: both;
	z-index: 999;
	-moz-box-shadow: inset 0 0 12px #ccc; -webkit-box-shadow: inset 0 0 12px #ccc; box-shadow: inset 0 0x 12px #ccc; 
}

#intro{
	height: 880px;
	margin: 0;
	padding: 100px 0 0;
}

#intro h2 { color: #fff; }


#second{
	height: 1300px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
}


#second h3 { padding-top: 80px; }

#second .bg {
	height: 900px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 900px;
	z-index: 200;
}


#third {
	color: #fff;
	height: 1000px;
	padding: 100px 0 0 0;	
}

#third p { color: #fff; }

#fourth {
	height: 900px;
	padding: 0;
}

#fourth h3, #fourth p, #fourth ul li { color: #fff; }
#fourth .robot { background: url(../img/robot.png) 50% 0 no-repeat fixed; height: 1000px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 200; }
#fourth h3 { margin-top: 150px; }

#fifth { margin: 0 auto; background: url(../img/enthusiasts.jpg) 50% 0 no-repeat fixed; height: 900px; }
#fifth h3 { margin-top: 100px; color: #fff; }
#fifth p { color: #fff; }

.story {
	margin: 0 auto;
	min-width: 980px;
	width: 980px;
}

.story .float-left, .story .float-right {
	padding: 80px 0 0 0;
	position: relative;
	width: 350px;	
}


#who h2 { font: 400 90px/90px Oswald, Georgia, serif; margin-bottom: 0; padding: 0; color: #000; 
			/*font-size-adjust:0.531; //re-calculate adjustment */
		}
#who h3 { font: normal 48px/40px Arvo, Georgia, serif; margin-bottom: 12px; letter-spacing: -2px; font-size-adjust:0.531; //re-calculate adjustment }
#who p strong { font-weight: bold; text-transform: uppercase; }

#who .story .float-left, #who .story .float-right, #team .story .float-left,  #team .story .float-right { width: 450px; padding-top: 40px; }
#who #intro { background: url(../img/stage.jpg) 50% 0 no-repeat fixed; height: 1000px; }
#who #intro h3 { margin: 20px 0; color: #000; }
#who #intro p { color: #000; }

#who #second { background: url(../img/themes.jpg) 50% 0 no-repeat fixed; height: 2200px; }
#who .jumper { background: url(../img/jumper.png) 50% 0 no-repeat fixed; height: 2200px; margin: 0 auto; padding: 0; position: absolute; width: 900px; z-index: 200; }
#who #third { background: url(../img/longterm.jpg) 50% 0 no-repeat fixed; height: 1000px; }
#who #third h3 { margin-top: 200px; }
#who #third p { color: #fff; }
#who #fourth { background: url(../img/network.gif) 50% 0 no-repeat fixed; height: 1100px; }
#who #fourth h3 { margin-top: 320px; color: #000; }
#who #fourth p { color: #000; }
#who #fifth { background: url(../img/enthusiasts.jpg) 50% 0 no-repeat fixed; height: 1100px; }
#who #fifth h3 { margin-top: 200px; color: #000; }
#who #fifth p { color: #000; }


#team #intro { background: url(../img/bryceBG.jpg) 50% 0 no-repeat fixed; height: 1200px; }
#team #intro h2 { margin-top: 50px; text-shadow: 0 0 10px rgba(0,0,0,.2); }
#team #intro h3 { text-shadow: 0 0 10px rgba(0,0,0,.4); }
#team #intro h2, #team #intro h3 { color: #fff; }
#team #intro p, #team #second p { color: #fff; margin-right: 100px; text-shadow: 1px 1px 0 #000; }
#team .light { color: #fff; opacity: .8; }
#team #second { background: url(../img/markBG.jpg) 50% 0 no-repeat fixed; height: 1300px; }
#team #second h3, #team #second p { color: #fff; }
#team #second .light { opacity: .8; color: #fff; }
#team #third { background: #fff /*url(../img/fourthBG.jpg) 50% 0 no-repeat fixed*/; height: 800px; }
#team #third { color: #000; }
#team #third h3 { padding-top: 40px; }
#team #third p { color: #000; }
#team .tarsier {
	background: url(../img/tarsier.gif) no-repeat fixed;
	height: 800px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	width: 1900px;
	z-index: 200;
	opacity: .8;
}


#portfolio { background: url(../img/portfolioBG.jpg) no-repeat 0 0; }
#portfolio #content {  padding: 0 30px; height: auto; overflow: hidden;  }
#portfolio #content h2 { margin: 30px 0 0 30px; color: #000; opacity: .6; filter: alpha(opacity=60); padding-top:100px; }
#portfolio #content ul { padding: 0 0 150px 30px; height: auto; overflow: hidden; }
#portfolio #content ul, #portfolio #content ul li { float: left; list-style-type: none; }
#portfolio #content li { cursor: pointer; margin: 2px; ; padding: 10px; width: 125px; height: 80px; opacity: .6;filter: alpha(opacity=60); background: #fff;     
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);  
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);  
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1); }
#portfolio #content li.inactive { background: url(../img/diag-tile.gif) repeat; }
#portfolio #content li.active p.hidden { display:block; }


#portfolio #content h3 { font: 400 14px/14px Oswald, "Arial Narrow", serif; margin-bottom: 12px; letter-spacing: .02em; text-transform: uppercase; color: #000; }
#portfolio #content li p { font: 11px/14px Arvo, Helvetica, Arial, sans-serif; padding: 0; margin-bottom: 6px; color: #000; }
#portfolio #content li p.hidden { display: none; }
#portfolio #content li.active { width:423px; height:184px;}
#portfolio #content li.active p.hidden { display:block; }

#not #wrapper { height: 2200px; }
#not #intro { background: url(../img/o.gif) 50% 0 no-repeat fixed; height: auto; overflow: hidden;  margin: 0 auto; }
#not .a { background: url(../img/a.png) 50% 0 no-repeat fixed; height: 2500px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 200;}
#not .t { background: url(../img/t.png) 50% 0 no-repeat fixed; height: 2500px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 201;}
#not .v { background: url(../img/v.gif) 50% 0 no-repeat fixed; height: 2500px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 202;}

#not h2 { color: #000; }
#not h3 { color: #000; margin: 0; }
#not p { margin: 46px 0 200px; }
/* @-moz-document url-prefix() { #not p { margin: 55px 0 120px; } } */


p.tiny, #who p.tiny { font: 10px Arial, sans-serif; text-transform: uppercase; color: #555; }
p.tiny #pixels { font: bold 14px Arial, sans-serif; color: #000; }
.light { opacity: .5; }

#footer { border: 1px solid #eee; height: 120px; background: #fff url(../img/oatv-logo.gif) 50px 45px no-repeat; -moz-box-shadow: inset 0 0 12px #ccc; -webkit-box-shadow: inset 0 0 12px #ccc; box-shadow: inset 0 0x 12px #ccc; }
#footer p { font: 11px/14px Arial, sans-serif; color: #444; margin: 36px 0 0 200px; }
#footer strong { color: #000; }