/*
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 */

@font-face {
    font-family: "Century Gothic"; 
    src: url(CenturyGothic.ttf); /* for IE browsers */ 
    src: local("Century Gothic"), url(CenturyGothic.ttf) format("truetype"); /* for non-IE browsers */
}

body{
	margin: 0;
	min-width: 980px;
	padding: 0;
	background-color: #3e373b;
}

p{
	margin: 0 0 20px 0;	
}

p, ul{
	font-family: Helvetica, sans-serif;
	font-size-adjust:0.488;
	font-weight:normal;
	font-style:normal;
	line-height: 26px;
}

img{
	border: 0;
}

h1, #pixels{
	font-family: "Century Gothic", Helvetica, sans-serif;
	font-weight:normal;
	letter-spacing: 16px;
	font-size:40px;
}

h2{
	font-family: "Century Gothic", Helvetica, sans-serif;
	font-weight:normal;
	letter-spacing: 12px;
	font-size:26px;
}

#header h1, #pixels{
	color: #48941A;
}

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

.float-right{
	float: right;
	margin: 0 20px 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{
	height: 200px;
}

#intro{
	background: url(images/bg1.jpg) 50% 0px no-repeat;
	height: 740px;
}

#second{
	background: url(images/bg2.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 1500px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
	position: relative;
}


#second .cf1{
	background: url(images/cf01.png) 50% 400px no-repeat;
	height: 410px;
	position: absolute;
	top:1000px;
	width: 1003px;
	z-index: 800;
}


#second .cf2{
	background: url(images/cf02.png) no-repeat;
	height: 365px;
	top:1060px;
	position:absolute;
	width: 869px;
	z-index: 900;
}

#third{
	background: url(images/bg3.jpg) 50% 0 no-repeat fixed;
	color: white;
	height: 843px;
	padding: 0px 0 0 0;	
}

#fourth{
	background: #809334;
	color: white;
	height: 700px;
	padding: 0 0 0 0;
}

#fourth p {
	color: #e3efb1;
}

#fourth a {
	color: white;
}

#fifth{
	background: #ccc;
	height: 1000px;
	margin: 0 auto;
	padding: 40px 0 0 0;
}

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

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

.h_label {
	color:white;
	font-size:20px;
	position:absolute;
	letter-spacing:10px;
	padding:8px 30px 8px 40px;
	-moz-box-shadow: 0px 0px 30px #edca40;
	-webkit-box-shadow: 0px 0px 30px #edca40;
	box-shadow: 0px 0px 30px #edca40;
	background-color: #ffffff;
}

div.down {
	position:absolute;
	bottom:-140px;
	right:52px;
}

.footer {
	padding-top:100px;
	color: #e3efb1;
}

.small {
	font-size:10px;
}

/* CAROUSEL */
#container .js{overflow:hidden;zoom:1;}
#container .carousel,
#container .carousel .carousel-wrap{margin:0;border:0;zoom:1;}
#container .js .carousel-wrap{display:inline-block;vertical-align:middle;width:880px;margin:0 0px 0px 20px;}
.IE #container .js .carousel-wrap{display:inline;}
#container .carousel ul{margin:0;padding:0;zoom:1;}
#container .js ul li{overflow:hidden;display:inline;float:left;width:880px;height:335px;text-align:center;zoom:1;}
#container .carousel .carousel-control{overflow:hidden;display:inline-block;vertical-align:middle;width:40px;height:40px;cursor:pointer;line-height:999px;zoom:1;border:0;text-indent:-9999px;}
#container .carousel .carousel-next{background:url(images/next.png) 0 0 no-repeat;}
#container .carousel .carousel-previous{background:url(images/prev.png) 0 0 no-repeat;}
#container .carousel .carousel-control:hover{-moz-opacity:.7;opacity:0.70;filter:alpha(opacity=70);}
#container .carousel .disabled,#container .carousel .disabled:hover{-moz-opacity:.1;opacity:0.10;filter:alpha(opacity=10);cursor:default;}
#container .carousel div{margin:0;padding:0;border:0;}
#container .carousel ul{padding:0;list-style:none;}
#container .carousel ul li{position:relative;width:880px;margin:0;}
#container .carousel ul li cite{position:absolute;bottom:3px;right:10px;line-height:19px;font-size:11px;}
#container .carousel ul li cite a img{vertical-align:middle;}
#container .carousel ul li cite a{color:#fff;text-decoration:none;}
#container div.center-wrap{overflow:hidden;clear:both;zoom:1;}
#container div.center-wrap div{border:0;margin:15px 0;}
#container div.center-wrap a{margin:0 2px;padding:2px 5px;border:1px solid #4f4f4f;background:#333;cursor:pointer;color:#fff;-moz-border-radius:12px;webkit-border-radius:12px;border-radius:12px;}
#container div.center-wrap a.active{font-weight:bold;color:#5db0e6;}
#container .carousel img {
	float:right;
	margin-left:20px;
	margin-right:20px;
	-moz-box-shadow: 0px 0px 30px #5f7213;
	-webkit-box-shadow: 0px 0px 30px #5f7213;
	box-shadow: 0px 0px 30px #5f7213;
}