/*
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,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,p,blockquote,th,td{
margin:0;padding:0;
}
img{ border:0;}
address,caption,cite,code,dfn,em,strong,th,var{
font-style:normal;font-weight:normal;
}
ul li,ol li { list-style:none; } 
h1,h2,h3,h4,h5,h6{
font-size:100%;font-weight:normal;
}
input,textarea,select{ font-family:inherit;font-size:inherit;font-weight:inherit; }
input,textarea,select{ *font-size:100%; }
a img{border:none;}
body{
margin: 0;
min-width: 960px;
padding: 0;
font-size:80%;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#wrap{
width:960px;
margin:0 auto;
}
p{
margin: 0 0 30px 0;
text-indent:1.5;
}
h2{
margin-bottom:20px;
}
.float-left{
float: left;
}
.float-right{
float: right;
}
#first{
overflow: hidden;
background:url(images/bg_01.jpg) 50% 0 repeat fixed;
height:585px;
}
#first .float-left{
position:relative;
width:440px;
height:585px;
background: url(images/img01.png), url(images/img02.png);
background-position: 50% 20%, 50% 20%;
background-attachment: fixed;
background-repeat: no-repeat ,no-repeat;
position: absolute;
}
#first h1{
text-indent: 150%;
white-space: nowrap;
overflow: hidden;
background:url(images/logo.png) top left no-repeat fixed;
width:458px;
height:585px;
z-index:1;
}
#first .float-left ul{
overflow:hidden;
width:400px;
margin:0 -30px 0 32px;
z-index:100;
position:absolute;
top:300px;
left:0;
}
#first .float-left li{
float:left;
margin-right:30px;
}
#first .float-right{
background:url(images/img03.png) left top no-repeat;
width:357px;
height:108px;
padding:432px 40px 0;
margin: 15px;
}
#first .float-right p{
font-size:80%;
}
#second{
background: url(images/bg_02.jpg) 50% 0 repeat fixed;
color: white;
height: 513px;
margin: 0 auto;
overflow: hidden;
padding: 0 20px 0 0;
}
#second .box{
width:390px;
float:right;
height:500px;
background:url(images/img04.png) top left no-repeat;
padding:0 0 0 0;
}
#second .bg{
width:557px;
float:right;
height:170px;
background:url(images/img05.png) top left no-repeat;
padding:0 0 0 0;
}
#third{
background: url(images/bg_03.png) 50% 0 no-repeat fixed;
color: white;
padding: 100px 0 0 0;	
text-align:center;
height:700px;
}
#third .box{
width:840px;
margin:auto;
padding:0 0 50px 0;
}
#third .box p{
text-align:left;
}
#fourth{
background: url(images/bg_04.png) 50% 0 no-repeat fixed;
color: white;
overflow:hidden;
height:900px;
padding:280px 20px 0 20px;}
#fourth .bg{
width:100px;
float:right;
height:900px;
background:url(images/img04.png) top left no-repeat;
padding:0 0 0 0;
}
#fourth .float-right a{
background: url(images/btn.png) no-repeat top left;
width:127px;
height:800px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
display:block;
}