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

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

img{border: 0;}

.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{background: white; height: 130px;}
*/

/* MENU */
ul.submenu {display:none; position:fixed; top:0px;  width:450px; height:20px; background:#000; padding-top:5px; padding-left:35px; z-index:99999}
ul.submenu li {display:inline; font-family:arial; font-size:12px; text-decoration:none; color:#7d7d7d}
ul.submenu li a {font-family:arial; font-size:12px; text-decoration:none; color:#7d7d7d}
ul.submenu li a:hover {color:#fff}
ul.submenu li a.book {color:#f35b3f}
ul.submenu li.spe {padding-left:5px; padding-right:5px}

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

/* INTRO */
#intro {background:url(../images/bg01.jpg) center top repeat fixed; color: white; height: 700px; margin: 0; /*padding: 160px 0 0 0;*/}
#intro .bondi {background: url(../images/bondi.png) 50% 200px no-repeat fixed; height: 700px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 200;}
#intro .buynow {width: 202px; height: 700px; padding: 0; position: absolute; z-index: 500;}
#intro .buynow a {position:absolute; width:202px; height:204px; margin-top:350px; margin-left:45px;}
#intro .about {width:201px; height: 700px; padding: 0; position: absolute; z-index: 400;}
#intro .about a {position:absolute; width:201px; height:203px; margin-top:450px; margin-left:195px;}
#intro .fournine {width:112px; height: 700px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 200;}
#intro .fournine a {position:absolute; width:112px; height:111px; margin-top:525px; margin-left:840px;}


#intro .logo {background: url(../images/logo.png) 870px 50px no-repeat; height: 700px; margin: 0 auto; padding: 0; position: fixed; width: 1000px; z-index: 200;}

/* SECOND */
#second{background: url(../images/bg02.jpg) 50% 0 repeat fixed; color: white; height: 700px;margin: 0 auto; overflow: hidden; padding: 0;}
/*#second .bg{background: url(../images/bondi.png) 50% 0 no-repeat fixed; height: 700px; margin: 0 auto; padding: 0; position: absolute; width: 900px; z-index: 200;}*/
#second .bfactor {background: url(../images/thebfactor.png) 495px 60px no-repeat ; height: 700px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 200;}
#second .textone {background: url(../images/text1.png) 495px 455px no-repeat ; height: 700px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 200;}
#second div.story .float-right {width:500px; margin-top:380px; z-index:3000}
#second div.story .float-right ul {width:500px; margin-left:40px}
#second div.story .float-right ul li {display:inline-block !important; width:160px !important; margin-right:30px;}
#second .logo {background: url(../images/logo.png) 880px 35px no-repeat; height: 700px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 200;}

/* THIRD */
#third{background: url(../images/bg03.jpg) 50% 0 repeat fixed; color: white; height: 700px;}
#third .aboutthebook {background: url(../images/aboutthebook.png) 115px 130px no-repeat; height: 700px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 200;}
#third .texttwo {background: url(../images/text2.png) 510px 77px no-repeat; height: 700px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 200;}
#third .logo {background: url(../images/logo.png) 900px 33px no-repeat; height: 700px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 500;}
#third div.story div.float-left {margin-left:540px; z-index:400; padding-top:95px !important}
#third div.story div.float-left p {width:370px; margin-bottom:20px;}

/* FOURTH */
#fourth {background: url(../images/bg04.jpg) 50% 0 repeat fixed; color: white; height: 700px; /*padding: 100px 0 0 0*/;}
#fourth .buynow {background: url(../images/buynow2.png) 140px 150px no-repeat; height: 700px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 200;}
#fourth .bgprice {background: url(../images/bgprice.png) 490px 150px no-repeat; height: 700px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 200;}
#fourth div.story div.float-left {margin-left:520px; z-index:400; padding-top:172px !important}
#fourth div.story div.float-left a {float:left; margin-top:-60px; margin-left:230px}
#fourth div.story div.float-left img.price {float:right}
#fourth .logo {background: url(../images/logo.png) 900px 33px no-repeat; height: 700px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 500;}

#fourth div.story div.float-left form input.buy  {float:left; margin-top:-60px; margin-left:230px}


/* FIFTH */
#fifth{background: url(../images/bg05.jpg) 50% 0 repeat fixed; height: 700px; margin: 0 auto; }
#fifth .whereyoubelong {background: url(../images/whereyoubelong.png) 140px 100px no-repeat; height: 700px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 200;}
#fifth .bgenquiries {background: url(../images/bgenquiries.png) 490px 280px no-repeat; height: 700px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 200;}
#fifth div.story div.float-left {margin-left:520px; z-index:400; padding-top:295px !important; color:#fff; font-size:11px; z-index:500}
#fifth div.story div.float-left hr {width:215px}
#fifth div.story div.float-left a {color:#f35b3f; text-decoration:none;}
#fifth div.story div.float-left a:hover {text-decoration:underline;}
#fifth div.story div.float-left input {width:210px; margin-top:5px; border:0px; padding:3px}
#fifth div.story div.float-left button.subs {float:left; padding-top:10px; margin-top:10px; width:93px; height:25px; background:url(../images/subscribe.gif) no-repeat top left; border:0px}
#fifth .logo {background: url(../images/logo2.png) 900px 33px no-repeat; height: 700px; margin: 0 auto; padding: 0; position: absolute; width: 1000px; z-index: 500;}

/* SIXTH */
#sixth{background: url(../images/bg06.jpg) 50% 0 repeat fixed; height: 700px; margin: 0 auto; padding: 40px 0 0 0;}
#sixth .whereyoubelong {background: url(../images/whereyoubelong.png) 50% 200px no-repeat fixed; height: 700px; margin: 0 auto; padding: 0; position: absolute; width: 900px; z-index: 200;}

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