/* ---------------------------------- */

/*
 * Nike Better World
 * 2012
 *
 * interstitial.css
 *
 * 
 */

/* ---------------------------------- */

/* @Landing */

*,body { font-family: "Din Display Pro Thin", Verdana, sans-serif; font-size-adjust:0.49; font-weight:100; font-style:normal; }
p      { font-family: "Din Display Pro Thin", Verdana, sans-serif; font-size-adjust:0.49; font-weight:200; font-style:normal; }

div#wrapper { min-width: 1200px; max-width:initial; }
div#wrapper.open-drawer { min-width:100px; overflow:hidden; }

.landing #masthead {
	height: 229px;
	padding: 40px 0 30px 100px;
	position: relative;
	width: 1000px;
    }
    
    .landing header#masthead h1 {
	background-image: url(../img/logo_pil.jpg);
	height: 184px;
	width: 235px;
        }
        
        #masthead h1 a { cursor: pointer; display: block; height: 124px; width: 161px; }
        
    /* fixed header */
    header.fixed {
	background-color: #fff;
	height: 136px;
	padding: 42px 0 42px;
	top: 0;
	width: 100%;
	z-index: 99999;
        }
        
        header.fixed .content {
	margin: 0 auto;
	padding-left: 100px;
	position: relative;
	width: 1000px;
}
        
    header.fixed a#nbw {
	background: transparent url(../img/logo_pil.jpg) 0 0 no-repeat !important;
	border: none;
	display: block;
	height: 140px;
	margin: 0 0 40px 0;
	padding: 0;
	text-indent: -9999em;
	width: 235px;
        }
    
    header nav#main-new {
	position: absolute;
	right: 100px;
	top: 120px;
	z-index: 996;
}
    
    header.fixed nav#main-new { position: absolute; right: 100px; top: 77px; }
    
        header nav#main-new li { display: inline; margin: 0 0 0 10px; }
        
    header nav#main-new a {
        background-color: #dde9ff;
        color: #9bc1ff;
        letter-spacing: 1px;
        padding: 8px;
        text-transform: uppercase;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
        }
    
    header nav#main-new a:hover,
    header nav#main-new a.current {
        background-color: #9bc1ff;
        color: #fff;
        padding: 8px;
        }
        
        /* ie7 support */
        .browser-ie7 header nav#main-new a { display: inline-block; padding-top: 4px; }
        
        .browser-ie7 nav#main span { padding-top: 0; }

.landing .story { min-height: 300px; }

.landing .story article { min-height: inherit; }

.landing #site-share {
    position: absolute;
    right: 100px;
    top: 75px;
    }
    
.landing #site-share a.icon-fb,
.landing #site-share a.icon-twitter {
    background-image: url(../img/icon_social.gif);
    height: 20px;
    margin-right: 10px !important;
    width: 22px;
    }
    
    .landing #site-share a.icon-twitter { background-position: -30px 0; margin-right: 0 !important; }
    
    .landing #site-share a.icon-fb:hover { background-position: 0 -20px; }
    .landing #site-share a.icon-twitter:hover { background-position: -30px -20px; }
    
.landing .content {
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 1200px;
    }
    
    .landing #launch-better-world .content { padding-left: 100px; width: 1100px; }
    
    .landing #launch-better-world .faux {
      background:transparent;
      height:100px;
      left:50%;
      margin:-48px 0 0 -142px;
      position:absolute;
      top:0;
      width:630px;
    }
    
    .landing #launch-product .content { padding-left: 0; width: 1200px; }
    
.landing .content h2 {
	font-size: 62px;
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 58px;
	padding: 37px 0 0;
	color: #FFF;
	width: 285px;
    }
    
    .landing #launch-product .content h2 { color: #fff; font-size: 60px; line-height: 56px; width: 375px; }
    
.landing .story .content a { cursor: pointer; display: block; height: 100%; width: 100%; }

    .landing #launch-product .content a { padding-left: 688px; width: 512px; }

.landing #launch-better-world .content p,
.landing #launch-product .content p {
    display: inline-block;
    margin: 32px 0 0 -8px;
    padding: 8px;
    }

.landing #launch-better-world .content span,
.landing #launch-product .content span,
.landing #story-slideshow li article header a span {
    background: transparent url(../img/bg_arrow_green.png) right 7px no-repeat;
    border-bottom: 1px dotted #4F9426;
    display: block;
    padding: 0 15px 0 0;
    }
    
    .landing #story-slideshow li article header a span { display: inline-block; }
    
    .landing #launch-better-world .content span,
    .landing #launch-product .content span { color: #fff; background-image: url(../img/bg_arrow_white.png); border-color: #fff; }
    
    .browser-ie7 .content span { background-image: none !important; border: none !important; }
    
    .landing #launch-better-world p,
    .landing #launch-product p {
        background-color: transparent;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
        }
    
    .landing #launch-better-world:hover p { background-color: rgba(255, 255, 255, 0.1);}
    .landing #launch-product:hover p { background-color: rgba(240,184,104,0.1); }
    
    .landing footer section:hover p { background-color: rgba(34,247,138,0); }
    
    .landing .story article a p.story-link {
        background-color: transparent;
        display: inline-block;
        margin-left: -8px;
        padding: 8px;
        width: auto !important;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
        }
    
    .landing .story article a:hover p.story-link { background-color: rgba(34,247,138,0.1); }
    
.landing #story-video {
    background: transparent url(../img/bg_video_track.jpg) 50% 0 no-repeat !important;
    height: 600px !important;
    overflow: visible !important;
    position: static;
    }
    
    .landing #story-video #video-wrapper,
    .landing #story-detail #video-wrapper { height: 1200px; position: absolute; top: 0px; width: 100%; padding-top: 700px;  }
    
    .browser-ie7 #story-video #video-wrapper { display: none !important; }
    
.landing #story-video h1 {
    top: 138px;
    }
    
.landing .video a { top: 436px; }

    .landing #video-container,
    .landing a#close-video { top: 30%; }
    
    /*
#home.landing a#close-video {
        background: transparent url(/lib/img/bg_manifesto_close.png) 0 0 no-repeat;
        height: 310px;
        left: -260px;
        top: 34% !important;
        width: 199px;
        }
*/

        
    #story-detail div.darkslide { z-index: 10000; }
    
#image-container {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -405px;
    margin-top: -270px;
    width: 810px;
    z-index: 99999;
  }

  a#close-video {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -310px;
    margin-left: 380px;
    width: 25px;
    height: 25px;
    background: url(../img/video_close.png) 100% 0 no-repeat;
    text-indent: -9000px;
    z-index: 999999;
  }
  
    a#close-video:hover {
      background-position: 100% 100%;
    }
    
    a#close-manifesto { display: none; }
    
    ._playing a#close-video {
      display: block;
    }

.landing #launch-better-world,
.landing #launch-product {
    background: transparent url(../img/bg_stu.jpg) 50% -302px no-repeat;
    height: 300px;
    overflow: visible;
    padding: 0;
    position: relative;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    z-index: 5;

    /*-moz-transition-delay: 0.2s;*/ /* Fix for FF jittery scrolling. */
    }
    
    .landing #launch-better-world img#home-soweto {
	position: absolute;
	right: 100px;
	top: -55px;
	z-index: 1000;
	-webkit-transform: rotate(3deg);
        }
    
    .landing #launch-product { background: transparent url(../img/bg_launch_product.jpg) 50% 0 no-repeat; }
    
    .landing #launch-better-world:hover { background-position: 50% -300px; padding: 50px 0; }
    
    .landing #launch-product:hover { padding: 37px 0; }
    
    /* these guys don't support css transitions */
    .browser-ie7 #launch-better-world:hover { background-position: 50% -302px !important; padding: 0 !important; }    
    .browser-ie7 #launch-product:hover { padding: 0 !important; }
    .browser-ie8 #launch-better-world:hover { background-position: 50% -302px !important; padding: 0 !important; }    
    .browser-ie8 #launch-product:hover { padding: 0 !important; }
    .browser-ie9 #launch-better-world:hover { background-position: 50% -302px !important; padding: 0 !important; }    
    .browser-ie9 #launch-product:hover { padding: 0 !important; } 
    .browser-ff3 #launch-better-world:hover { background-position: 50% -302px !important; padding: 0 !important; }   
    .browser-ff3 #launch-product:hover { padding: 0 !important; }
        
.landing #launch-product { background: transparent url(../img/bg_launch_pin.jpg) 50% 50% no-repeat; position: relative; z-index: 100 !important; }

.landing #bottletop {
    background: transparent url(../img/bg_bottletop.png) 0 0 no-repeat;
    height: 80px;
    left: 430px;
    position: absolute;
    top: -80px;
    width: 135px;
    z-index: 1000;
    -webkit-transition: top .5s ease;
    -moz-transition: top .5s ease;
    -o-transition: top .5s ease;
    transition: top .5s ease;
    }
    
    .landing #launch-better-world:hover #bottletop { top: -80px; }
    
.landing #shoe {
    background: transparent url(../img/bg_pin.png) 0 0 no-repeat;
    height: 500px;
    left: 0px;
    position: absolute;
    top: -195px;
    width: 482px;
    z-index: 100;
    }
    
.landing footer {
	background: #fff url(../img/bg_blue.gif) 0 150px repeat-x;
	overflow: hidden;
	padding: 0 0 50px;
	position: relative;
	width: 100%;
    }
    
footer .content h2 {
    background: transparent url(../img/good_design.gif) 0 0 no-repeat;
    display: block;
    height: 98px;
    margin: 0;
	margin-top:20px;
    padding: 0;
    text-indent: -9999em;
    width: 1200px !important;
    }
    
    #home footer .content h2 {
	height: 35px;
}
    
.landing footer .content h3 {
    margin: 87px 0 7px 0;
    }
        
    .landing footer .content h3.twitter { margin-top: 25px; }
    
.landing footer aside {
	margin-top: 100px;
	width: 1200px;
	overflow:hidden;
    }

.landing footer .copyright {
    display: inline;
    float: left;
    font-size: 11px;
    margin: 0;
    padding: 0;
    width: 600px;
    }
    
.landing footer aside .social-connect {
    display: inline;
    float: left;
    text-align: right;
    width: 600px;
    }
    
    .social-connect iframe.twitter-follow-button { width: 150px !important; }
    
.landing footer #whitebar {
    background-color: #fff;
    display: block;
    height: 60px;
    margin-top: 0;
    position: absolute;
    width: 1200px;
    z-index: 100;
    }
    
.landing footer #timestamp-bg {
    background: transparent url(../img/timeline_bg_date.png) 0 0 no-repeat;
    height: 122px;
    left: 538px;
    position: absolute;
    width: 122px;
    z-index: 101;
    }

.landing footer ul#social-timeline {
    height: 725px;
    text-align: center;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
    }
    
.landing footer ul#social-timeline li {
    display: block;
    height: 700px;
    margin: 0;
    padding: 0;
    position: relative;
    }
    
.landing footer ul#social-timeline li h3.timestamp {
    background: transparent url(../img/timeline_bg_date_circle.png) 0 0 no-repeat;
    display: inline-block;
    height: 42px;
    margin: 0 0 0 -2px;
    padding: 40px 19px;
    position: relative;
    text-transform: uppercase;
    width: 82px;
    z-index: 101;
    }
    
    .landing footer ul#social-timeline li h3.timestamp em {
        clear: both;
        color: #efefef;
        display: block;
        }
        
        .landing footer ul#social-timeline li h3.timestamp em.date { font-family: "NikeGratton","Helvetica"; font-size: 30px; margin-bottom: 5px; }
        .landing footer ul#social-timeline li h3.timestamp em.month { font-size: 18px; }
        
    /* don't support border-radius */
    .browser-ie7 .landing footer ul#social-timeline li h3.timestamp,
    .browser-ie8 .landing footer ul#social-timeline li h3.timestamp { border: none !important; }
       
.landing footer ul#social-timeline li .timeline-tweet,
.landing footer ul#social-timeline li .timeline-facebook,
.landing footer ul#social-timeline li .timeline-instagram { position: relative; }
        
.landing footer ul#social-timeline li .timeline-tweet h3 a,
.landing footer ul#social-timeline li .timeline-facebook h3 a,
.landing footer ul#social-timeline li .timeline-instagram h3 a {
    background: transparent url(../img/bg_timeline_headers_new.png) 0 0 no-repeat;
    border: none !important;
    display: inline-block;
    height: 52px;
    margin: 75px 0 0 0;
    padding: 0;
    text-indent: -9999em !important;
    width: 52px;
    }
    
    .landing footer ul#social-timeline li .timeline-facebook h3 a  { background-position: 0 -52px; margin-top: 100px; }
    .landing footer ul#social-timeline li .timeline-instagram h3 a { background-position: 0 -104px; margin-top: 100px; }
    
    .landing footer ul#social-timeline li .timeline-tweet h3 a:hover       { background-position: -52px 0; opacity: 1; }
    .landing footer ul#social-timeline li .timeline-facebook h3 a:hover    { background-position: -52px -52px; opacity: 1; }
    
    .landing footer ul#social-timeline li h3 a.empty          { opacity: .1; }
    
.landing footer ul#social-timeline li .post {
    background: #fff;
    border: 1px solid #dcdfde;
    border-radius: 6px;
    height: auto;
    left: 199px;
    min-height: 50px;
    padding: 20px;
    position: absolute;
    top: -45px;
    width: 300px;
    z-index: 98;
    }
    
    .landing footer ul#social-timeline li .post p {
        border-bottom: 1px solid #b2b2b2;
        display: block;
        font-size: 14px !important;
        line-height: 20px;
        margin: 0;
        padding: 0 0 8px;
        text-align: left;
        }
        
        .landing footer ul#social-timeline li .post p a { font-size: 14px !important; font-weight: bold; border: none !important; }
        
        .landing footer ul#social-timeline li .timeline-facebook .post p img {
            display: inline;
            border: none;
            float: none;
            height: auto;
            margin: 0 10px 10px 0;
            width: 85px;
            }
        
        .landing footer ul#social-timeline li .post p.meta {
            border: none;
            color: #ccc !important;
            font-size: 12px !important;
            padding: 8px 0 0;
            text-align: left;
            }
        
        .landing footer ul#social-timeline li .post p.meta a {
            border: none;
            color: #31923d;
            font-size: 12px !important;
            }
            
            .landing footer ul#social-timeline li .post p.meta a:hover { color: #31923d !important; }
            
        .landing footer ul#social-timeline li .post p.meta em { float: right; font-size: 12px; margin: 0; padding: 2px 0 0; }
        
    .landing footer ul#social-timeline li .post .tick {
        background: transparent url(../img/bg_post_arrow.png) 0 0 no-repeat;
        height: 43px;
        position: absolute;
        right: -16px;
        top: 49px;
        width: 16px;
        }
        
        .landing footer ul#social-timeline li .post .tick.left {
            background-position: -16px 0;
            left: -16px;
            right: auto;
            top: 134px;
            }
            
        .landing footer ul#social-timeline li .timeline-instagram .post .tick { top: 156px; }
        
    .landing footer ul#social-timeline li .timeline-facebook .post { left: 660px; min-height: 150px; top: -130px; width: 400px; }
    
        .landing footer ul#social-timeline li .timeline-facebook .post .fb-like {
            position: relative;
            bottom: 20px;
            float:left;
            margin-bottom:-20px;
            }
        
        .landing footer ul#social-timeline li .timeline-facebook .post .meta { padding-left: 90px;}
    
    .landing footer ul#social-timeline li .timeline-instagram .post { left: 306px; top: -50px; width: 174px; }
    
        .landing footer ul#social-timeline li .timeline-instagram .post img { height: 174px; width: 174px; }
        
    .landing footer ul#social-timeline li .post br { clear: both; height: 1px; }
    
.landing footer ul#social-timeline li .post.green {
    background-color: #d2fde7;
    border-color: #d2fde7;
    left: 317px;
    min-height: 104px !important;
    top: -44px;
    width: 182px !important;
    }
    
    .landing footer ul#social-timeline li .post.green .tick {
        background-image: url(../img/bg_post_arrow_green.png);
        top: 53px;
        }
        
        .landing footer ul#social-timeline li .timeline-facebook .post.green .tick { top: 53px; }
    
    .landing footer ul#social-timeline li .timeline-facebook .post.green { left: 660px; top: -50px; }
    
    .landing footer ul#social-timeline li .post.green h4 { font-size: 36px; color: #31923d; text-align: left; line-height: 40px !important; }
    
    .landing footer ul#social-timeline li .post.green p { border: none; padding: 0;}
    
    .landing footer ul#social-timeline li .post.green p a {
        border: none;
        font-size: 12px !important;
        font-weight: 500;
        }
        
footer ul.timeline-nav { margin: 50px auto; width: 111px; }

footer .bx-wrapper .bx-pager { margin: 10px auto 25px; width: 6px; }

footer .bx-wrapper .bx-pager a {
    background: transparent url(../img/bg_pagination.png) 0 -6px no-repeat;
    border: none;
    display: none;
    height: 6px;
    margin-bottom: 9px !important;
    text-align: center;
    text-indent: -9999em !important;
    width: 6px;
    }
    
    footer .bx-wrapper .bx-pager a.pager-active { background-position: 0 0; }

footer .bx-wrapper a.bx-prev,
footer .bx-wrapper a.bx-next {
    background: transparent url(../img/bg_timeline_nav.png) 0 0 no-repeat;
    border: none;
    cursor: pointer;
    display: block;
    height: 34px;
    margin: 0 auto !important;
    opacity: 0.4;
    text-indent: -9999em !important;
    width: 111px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    }
    
    footer .bx-wrapper a.bx-next { background-position: 0 -34px; }
    
    footer .bx-wrapper a:hover { opacity: 0.9; }
    
/* manifesto styling */

div.darkslide {
    width: 1920px;
    height: 0;
    background: #000;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 998;
    }


#video-container {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -405px;
    margin-top: -270px;
    width: 810px;
    z-index: 99999;
    }

a#close-video {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -310px;
    margin-left: 380px;
    width: 25px;
    height: 25px;
    background: url(../img/video_close.png) 100% 0 no-repeat;
    text-indent: -9000px;
    z-index: 999999;
    }

a#close-video:hover {
    background-position: 100% 100%;
    }

._playing a#close-video {
    display: block;
    }

                
/* instagram page */

section#instagram {
    background: #fff url(../img/bg_footer.gif) 0 0 repeat-x;
    position: relative;
    }
    
#instagram .content { width: 1000px; }
    
#instagram h2 {
    background: #fff url(../img/icon_instagram.png) 0 0 no-repeat;
    border: 20px solid #fff;
    border-radius: 100px;
    display: inline-block;
    height: 89px;
    margin: -100px 0 0 456px;
    padding: 0;
    text-indent: -9999em;
    width: 88px;
    }
    
#instagram nav { display: block; clear: both; }
    
#instagram nav li { display: inline; float: left; margin-right: 20px; }

    #instagram nav li a {
        background-color: transparent;
        height: auto;
        margin: 0;
        padding: 5px 6px;
        width: auto;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
        }
        
        #instagram nav li a:hover {
            background-color: rgba(234,244,235,1);
            color: #4F9426;
            }
            
        #instagram nav li a.active { background-color: #4F9426; color: #fff; }
        
#instagram ul.photos {
    display: block;
    margin-top: 75px;
    text-align: left;
    }
    
#instagram ul.photos li {
    display: inline;
    float: left;
    margin: 0 50px 40px 0;
    padding: 0;
    position: relative;
    width: 300px;
    }
    
    #instagram ul.photos li:nth-of-type(3n+0) { margin-right: 0; }
    
#instagram ul.photos li a {
    background: rgba(49,146,61,0.85) url(../img/bg_instagram_heart.png) 50% 50% no-repeat;
    font-size: 22px;
    height: 165px;
    left: 0;
    opacity: 0;
    padding: 135px 0 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 300px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    }
    
    #instagram ul.photos li a:hover { color: #4F9426; opacity: 1; }
    
#instagram ul.photos li p.meta {
    color: #959595;
    font-size: 10px !important;
    line-height: 16px;
    margin: 0;
    padding: 0;
    }
    
    #instagram ul.photos li p.meta span.username {
        clear: left;
        color: #4F9426;
        display: block;
        font-size: 10px;
        }

.instagram footer,
.story-detail footer { background-position: 0 0; }

/* story detail */

.story-detail #story-detail {
    height: auto;
    margin-top: 120px;
    min-height: 0;
    }

.story-detail .story {
    background-color: #000;
    height: auto !important;
    margin: 0;
    overflow: visible;
    padding: 0 0 66px;
    }
    
.story-detail .story .story-image {
    background-position: 50% 0;
    background-repeat: no-repeat;
    display: block;
    height: 600px;
    width: 100%;
    }
        
.landing.story-detail #story-detail article {
    background-color: #fff;
    display: block;
    height: auto;
    margin: -75px 0 0 70px;
    min-height: 0;
    padding: 30px 30px 90px;
    position: relative;
    width: 600px !important;
    }
    
.story-detail #story-detail .content article h2 {
    color: #000;
    font-size: 42px;
    font-weight: 100;
    margin: 0 0 30px;
    padding: 0;
    width: 100%;
    }
    
.story-detail #story-detail .content article p.date {
    color: #999;
    padding: 0;
    margin: 0;
    }
    
.story-detail #story-detail .content article figure {
    /* display: inline; taking out for now */
    display: none;
    float: left;
    margin: 0;
    padding: 5px 20px 8px 0;
    width: 200px;
    }
    
    .story-detail #story-detail .content article figure img { height: auto; width: 200px; }
    
    .story-detail #story-detail .content article figcaption {
        color: #999;
        font-size: 14px;
        }
        
.landing.story-detail footer { padding-bottom: 100px; }

#story-detail article a#nbw-back,
#story-detail article a#nbw-next {
    background: transparent url(../img/bg_article_links.gif) left top no-repeat !important;
    bottom: 28px;
    display: inline;
    font-size: 12px;
    height: 16px;
    letter-spacing: 1px;
    margin: 0;
    padding: 10px 0 10px 66px;
    position: absolute;
    text-transform: uppercase;
    width: auto;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    }
    
    #story-detail article a#nbw-back { left: -36px;}
    
    #story-detail article a#nbw-next {
        background-position: 23px -36px !important;
        margin: 0 -66px 0 0;
        padding: 10px 72px 10px 0;
        right: -6px;
        text-align: right;
        }
    
    #story-detail article a#nbw-back em,
    #story-detail article a#nbw-next em {
        font-size: 12px;
        background-color: #d6e9d8;
        margin-left: -30px;
        padding: 14px 30px 12px 30px;
        }
    
    #story-detail article a#nbw-back:hover { background-position: -36px 0 !important; color: #4F9426; }
    #story-detail article a#nbw-next:hover { background-position: 59px -36px !important; color: #4F9426; }
    
#story-detail aside {
    left: 800px;
    position: absolute;
    top: 150px;
    width: 200px;
    }
    
    #story-detail aside h3 {
        color: #31923d;
        font-family: "NikeGratton","Helvetica";
        font-size: 18px;
        letter-spacing: 1px;
        }
        
    #story-detail aside ul.share-post li {
        display: inline;
        float: left;
        margin: 13px 12px 0 0;
        }
        
    #story-detail aside ul.share-post li a {
        background: transparent url(../img/bg_story_share.gif) 0 0 no-repeat;
        display: block;
        height: 25px;
        text-indent: -9999em;
        width: 25px;
        }
        
        #story-detail aside ul.share-post li.twitter a { background-position: -37px 0; }
        
        #story-detail aside ul.share-post li a:hover         { background-position: 0 -25px; }
        #story-detail aside ul.share-post li.twitter a:hover { background-position: -37px -25px; }

/* social icons */

footer ul.socials { margin: 0 auto; width: 202px; }

footer ul.socials li {
    display: inline;
    float: left;
    margin: 0 24px;
    position: relative;
    text-align: center;
    }

footer ul.socials li a {
    background: transparent url(../img/bg_timeline_headers.png) 0 0 no-repeat;
    background-clip: padding-box;
    border: none;
    display: block;
    height: 52px;
    margin: 0;
    opacity: .2;
    padding: 0;
    text-indent: -9999em !important;
    width: 53px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    }
    
    footer ul.socials li a:hover { opacity: 1; }
    
    footer ul.socials li.facebook a  { background-position: 0 -52px; }
    footer ul.socials li.instagram a { background-position: 0 -104px; }
    
    footer ul.socials li span {
        background-color: #d2fde7;
        border: 1px solid #daf0e5;
        border-radius: 5px;
        color: #31923d;
        display: block;
        left: -44px;
        opacity: 0;
        padding: 10px;
        position: absolute;
        top: 75px;
        width: 125px;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
        }
        
        footer ul.socials li.facebook span { left: -64px; width: 160px; }
        
            footer ul.socials li.facebook span span { left: 69px; }
            
        footer ul.socials li.instagram span { left: -83px; width: 200px; }
        
            footer ul.socials li.instagram span span { left: 87px; }
        
        footer ul.socials li span span {
            background: transparent url(../img/bg_social_popout.png) 0 0 no-repeat;
            border: none;
            height: 16px;
            left: 48px;
            position: absolute;
            top: -16px;
            width: 45px;
            }
            
        footer ul.socials li:hover span { opacity: 1; }

/* about */

.about #story-video h1 {
    background-image: url(../img/txt_sportpassion.png);
    cursor: default !important;
    height: 621px;
    top: 350px;
    }
    
.about #story-video { background-position: 50% -175px; }

#line-intro { left: 45%; }

.about .story header h2 { margin-bottom: 35px; }

.about #site-share,
.about #social { margin-top: 20px; }

.about .story header p { margin-bottom: 12px; }

/* products */

.products #story-video h1 {
    background-image: url(../img/txt_wontrest.png);
    height: 613px;
    top: 350px;
    }
    
#story-video { /* this the background div that layers on top of the background image -- this is also in its own css file for each language */
    width: 100%;
    background: url(../img/bg_video_c.jpg) 50% 0 no-repeat fixed;
    margin: 0 0 0 0;
    height: 1200px;
    overflow: hidden;
    } 
	
	.products #story-video { background-image: url(../img/bg_video_tv.jpg); }
	
.products #story-philosophy { background-position: 50% -175px; }
	
#site-share { z-index: 1; }

.browser-ie7 #site-share { z-index: 100; }

.story article #philosophy { position: absolute; top: 450px; }
.story article #boardshort { position: absolute; top: 1000px; }
.story article #hyperdunk,
.story article #legendpant { position: absolute; top: 970px; }

/* header redos */

#story-freext header                { top: 425px; }
#story-world-championship header    { top: 500px; }
#story-nyc-basketball header        { top: 530px; }
#story-homeless-world-cup header    { top: 520px; }
#story-n7 header                    { top: 425px; }
#story-cardboard-box header         { top: 615px; }
#story-soweto header                { top: 615px; }
#story-green-rubber header          { top: 500px; }
nav.more                            { top: 750px; }
.proof-points-mask                  { top: 430px; }

/* new stories for phase II */

#story-detail { height: 600px; position: relative; z-index: 5; }

a#manifesto em,
a#manifesto strong,
a#manifesto span { background: transparent url(../img/tab_manifesto_green.png) 0 0 no-repeat; }

a#manifesto {
    display: block;
    height: 56px;
    left: 0;
    position: absolute;
    text-indent: -9999em;
    top: 224px;
    width: 51px;
    z-index: 1100;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    }
    
    a#manifesto em {
        background-position: 0 0;
        display: block;
        height: 27px;
        opacity: 0;
        -webkit-transition: all .6s ease;
        -moz-transition: all .6s ease;
        -o-transition: all .6s ease;
        transition: all .6s ease;
        }
        
    a#manifesto strong {
        background-position: 0 -27px;
        display: block;
        height: 29px;
        }
    
    a#manifesto span {
        background-position: -261px -27px;
        bottom: 0;
        display: block;
        opacity: 1;
        position: absolute;
        right: -35px;
        height: 29px;
        width: 35px;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        -o-transition: all .4s ease;
        transition: all .4s ease;
        }
        
    a#manifesto:hover { cursor: pointer; width: 296px; }
    
        a#manifesto:hover em { opacity: 1; }
        
        a#manifesto:hover span { opacity: 0; }

.landing #story-detail article {
    background-color: #000;
    background-position: 0 0; /* background image has to be written inline in the template because it is managed in cms */
    background-repeat: no-repeat;
    height: 600px;
    
    width: 1150px;
    z-index: 
    }
    
    .landing #story-detail .slideshow article img { left: 0; position: absolute; top: 0; z-index: 0; }
    
    .landing #story-detail .slideshow article .video h1 {
        background-repeat: no-repeat;
        position: absolute;
        left: 244px;
        z-index: 1000;
        text-align: center;
        top: 140px;
        display: block;
        color: #fff !important;
        font-size: 80px !important;
        z-index: 100;
        line-height: 60px; 
        width: 661px;
        height: 289px;
        text-transform: none !important;
        text-indent: -9000px;
        overflow: hidden;
        }
    
.landing #story-detail article .home-line-a {
    background: transparent url(../img/home_lines_a.png) 0 0 no-repeat;
    height: 104px;
    left: -80px;
    position: absolute;
    top: 200px;
    width: 736px;
    z-index: 100;
    }
    
    .landing #story-detail article.article-a .home-line-a { left: 80px; top: 265px; width: 650px; }
    
    .landing #story-detail article.article-a .home-line-a.short { width: 145px; }
    
    .landing #story-detail article.article-b .home-line-a { left: 1070px; top: 265px; width: 650px; display: none; }
        
    .landing #story-detail article .home-line-b {
        background: transparent url(../img/home_lines_b.png) 0 0 no-repeat;
        height: 129px;
        left: -80px;
        position: absolute;
        top: 205px;
        width: 753px;
        z-index: 100;
        }
        
        .landing #story-detail article.article-a .home-line-b {
            left: 1070px;
            }
            
            .landing #story-detail li:nth-of-type(4) .home-line-b { display: none !important; }
                    
/* homepage story-slideshow */

#slideshow-wrapper {
    background: #000;
    height: 600px;
    overflow: hidden;
    width: 100% !important;
    }
    
    #slideshow-wrapper .bx-wrapper,
    #slideshow-wrapper .bx-window { width: 100% !important; }
    
#slideshow-wrapper #story-slideshow { left: -1150px; }

#slideshow-wrapper #story-slideshow li {
    background-color: #000;
    display: block;
    float: left;
    height: 600px;
    overflow: hidden;
    position: relative;
    width: 1150px !important;
    }
    
    #slideshow-wrapper #story-slideshow li:last-child .home-line-a { display: none; }
    
#slideshow-wrapper .bx-pager {
    cursor: pointer;
    left: 150px;
    margin: 0 auto;
    position: relative;
    top: -35px;
    width: auto;
    z-index: 9999;
    }
    
    #slideshow-wrapper .bx-pager a {
        background: url(../img/bg_slide_indicator.png) 0 0;
        display: inline-block;
        height: 14px;
        margin-right: 8px;
        text-indent: -999em;
        width: 14px;
        }
    
    #slideshow-wrapper .bx-pager a:hover,
    #slideshow-wrapper .bx-pager a.pager-active {
        background-position: 0 -14px;
        }
        
        /* #slideshow-wrapper .bx-pager a.pager-3 { display: none; } */
        
#slideshow-wrapper a.bx-next {
    cursor: pointer;
    height: 600px;
    position: absolute;
    right: 0;
    text-indent: -9999em;
    top: 0px;
    width: 300px;
    z-index: 1000;
    }

/**
 * Global Slideshow
 */

.slideshow-container {
    cursor: default;
    height: 600px;
    padding-bottom: 20px;
    position: relative;
    z-index: 1000;
    width: 100%;
}

.slide-window {
    height: 600px;
    margin: 0;
    overflow: auto;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    width: 100%;
}
    
    .slide-window .slideshow {
        position: relative;
        margin-left: 0;
        white-space: nowrap;
    }
        
        .slide-window .slideshow li {
            display: inline-block;
            margin: 0 0 0 -5px;
            position: relative;
            width: 1150px;
        }
        .ie6 .slide-window .slideshow li,
        .ie7 .slide-window .slideshow li { display: inline; }
                
.story .slideshow li .slide-header-a,
.story .slideshow li .slide-header-b {
    color: #fff;
    height: 300px;
    left: 750px;
    position: absolute;
    top: 150px;
    white-space: normal;
    width: 350px;
    }
    
    /* .story .slideshow li .slide-header-a { top: 90px } /* for the Journey image */
    
    .story .slideshow li .slide-header-a h2,
    .story .slideshow li .slide-header-b h2 { font-size: 60px; margin-bottom: 25px; }
    
    .story .slideshow li .slide-header-b { top: 100px; }
    
    .story .slideshow li .slide-header-a h2,
    .story .slideshow li .slide-header-a p,
    .story .slideshow li .slide-header-b h2,
    .story .slideshow li .slide-header-b p { color: #4F9426 !important; width: 300px !important; }
    
    .story .slideshow li .slide-header-a a,
    .story .slideshow li .slide-header-b a {
        border: none !important;
        color: #4F9426 !important;
        display: block;
        padding: 70px 0 0 450px;
        position: absolute;
        right: 0;
        top: 0;
        width: 350px;
        }

.slide-share {
    margin: 0 auto;
    position: relative;
    top: -115px;
    width: 1000px;
    z-index: 9999;
    }
    
    .slide-share h3 {
        color: #fff;
        font-family: "NikeGratton","Helvetica";
        font-size: 14px;
        font-weight: normal;
        letter-spacing: 1px;
        margin-bottom: 10px;
        }
        
#story-share a {
    background: transparent url(../img/icon_share_story.png) 0 0 no-repeat;
    display: inline-block;
    height: 20px;
    margin-right: 5px;
    text-indent: -9999em;
    width: 21px;
    }
    
    #story-share a.twit { background-position: -30px 0; }

ul.slide-indicator {
    cursor: pointer;
    margin: 0 auto;
    position: relative;
    top: -35px;
    width: 1000px;
    z-index: 9999;
}
    
    ul.slide-indicator li {
        background: url(../img/bg_slide_indicator.png) 0 0;
        display: inline-block;
        height: 14px;
        margin-right: 8px;
        text-indent: -999em;
        width: 14px;
    }
    
    ul.slide-indicator li:hover {
        background-position: 0 -14px;
    }
    
    .ie6 ul.slide-indicator li,
    .ie7 ul.slide-indicator li { 
        display: inline;
        text-indent: 0;
        margin: 0 2px; 
    }
    .ie6 ul.slide-indicator li span,
    .ie7 ul.slide-indicator li span { 
        display: block; 
        text-indent: -999em; 
    }
    
    ul.slide-indicator li.active {
        background-position: 0 -14px;
    }

.no-js.slide-indicator {
	display: none;
}


/* MANIFESTO */
#manifesto-wrapper {
  background-color: #000;
  display:block;
  position: absolute;
  height: 100%;
  left: -100%;
  top: 0;
  width: 100%;
  z-index:99;
  
  -webkit-transition: left .5s ease;
  -moz-transition: left .5s ease;
  -o-transition: left .5s ease;
  transition: left .5s ease;
}

#manifesto-wrapper.open-drawer {
  left:0;
  
}

#manifesto-wrapper .darkslide {
  background:black;
}

#manifesto-wrapper #image-container {
  margin-top:0;
  top: 5%;
}

a#close-drawer {
  display:block;
  position: absolute;
  top: 5%;
  left: 50%;
  margin-top: 0;
  margin-left: 380px;
  width: 25px;
  height: 25px;
  background: url(../img/video_close.png) 100% 0 no-repeat;
  text-indent: -9000px;
  z-index: 999999;
}
  
  a#close-drawer:hover {
    background-position: 100% 100%;
  }

/* WRAP 2 */
#wrap2 {
  background: white;
  left:0%;
  position: relative;
  z-index: 100;

  -webkit-transition: left .5s ease;
  -moz-transition: left .5s ease;
  -o-transition: left .5s ease;
  transition: left .5s ease;
}
#wrap2.open-drawer {
  left:100%;
}


.scrollCapture {
  background:transparent;
  display:none;
  left:0;
  top:0;
  height:100%;
  opacity: 0.5;
  -moz-opacity: 0.5;
    filter:alpha(opacity=50);
  position:fixed;
  width:100%;
  z-index:99999;
}