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

/*
 * Nike Better World
 * 2011
 *
 * Stories.css
 *
 * 
 */
 
 
/* ---------------------------------- */

/*
 *  TABLE OF CONTENTS
 *  
 *  @Video
 *  @Free
 *  @WorldChampionshipJersey
 *  @Soweto
 *  @NYCBasketball
 *  @HomelessWorldCup
 *  @NikeN7
 *  @CardboardBox
 *  @GreenRubber
 *  @Counter
 *
 */

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



.story article {
  z-index: 999
}
  

/* @Video */



#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(../images/bg_video.jpg) 50% 0 no-repeat fixed; /* old image was bg_video.jpg */
  margin: 0 0 0 0;
  height: 1200px;
  overflow: hidden;
}

  #story-video img {
    left: 0;  
    position: absolute;
    top: 0;
  }
  
   
  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;
    }

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

/* @Free */

#story-freext {
  width: 100%;
  background: url(../images/bg_freext.jpg) 0 0 no-repeat fixed;
  margin: 0;
  height: 1600px;
  overflow: hidden;
}

  #story-freext header {    
    top: 200px;
  }
  

  
   #story-freext .bg { 
      position: absolute;
      width: 1600px;
      height: 1600px;
      top: 0;
      left: 100px;
      background: url(../images/fg_freext.png) 0 0 no-repeat fixed;

   }

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

/* @WorldChampionshipJersey */

#story-world-championship {
  width: 100%;
  background: url(../images/bg_worldchampionshipjersey.jpg) 50% 0 no-repeat fixed;
  height: 1200px;
  overflow: hidden;

}


#story-world-championship header {
  top: 300px;
}

  #story-world-championship .bg {
    position: absolute;
    width: 100%;
    height: 1600px;
    top: 0;
    left: 0%;
  }


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

/* @Soweto */

#story-soweto {
  width: 100%;
  background: url(../images/bg_soweto.jpg) 50% 0 no-repeat fixed;
  height: 1600px;

}

  #story-soweto header {
    top: 400px;
    left: 600px;
  }
  
  #story-soweto .bg {
    position: absolute;
    width:1600px;
    height: 1600px;
    top: 0;
    left: 0%;
    background: url(../images/fg_soweto.png) 50% 0 no-repeat fixed;
  }
  

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

/* @NYCBasketball */

#story-nyc-basketball{
  background: url(../images/bg_nycreccenter.jpg) 50% 0 no-repeat fixed;
  margin: 0;
  height: 1200px;
}

  #story-nyc-basketball header {
    top: 300px;
  }
  

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

/* @HomelessWorldcCup */

#story-homeless-world-cup {
  height: 1600px;
  background: url(../images/bg_homelessworldcup.jpg) 50% 0 no-repeat fixed;
}



  #story-homeless-world-cup header {
    left: 0;
    top: 300px;
  }
  
  

  #story-homeless-world-cup .bg {
    position: absolute;
    width: 1600px;
    height: 1600px;
    top: 0;
    left: 0;
    background: url(../images/fg_homelessworldcup.png) 50% 0 no-repeat fixed;
  }

  

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

/* @NikeN7 */

#story-n7 {
  background: url(../images/bg_n7.jpg) 50% 0 no-repeat fixed;
  height: 1200px;
}

  #story-n7 header{
    top: 250px;
    left: 600px;
  }
  
  #story-n7 .bg {
    position: absolute;
    width: 1600px;
    height: 1600px;
    top: 0;
    left: 0;
    background: url(../images/fg_shoe.png) 60% 100px no-repeat fixed;
    display: none;
  }
  
   
/* ---------------------------------- */

/* @CardboadBox */


#story-cardboard-box {
  width: 100%;
  background: url(../images/bg_cardboardbox.jpg) 0 0 no-repeat fixed;
  height: 1200px;
}
  #story-cardboard-box header {
    top: 400px
  }


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

/* @GreenRubber */

#story-green-rubber{
  background: url(../images/bg_greenrubber.jpg) 50% 0 no-repeat fixed;
  height: 1100px;
}

  #story-green-rubber header {
    left: 600px;
    top: 300px;
  }  

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

/* @Counter */

.counter {
  position: relative;
  padding: 50px 0 0 0;
}

  .counter p {
    font-size: 16px;
  }
  
    .counter p a {
      padding: 0 0 0 5px;
      color: #4f9426 !important;
    }
  
  .counter p span {
    display: block;
    float: left;
    padding: 3px 0 0  0;
  }
  
  
  .counter mark {
    display: block;
    float: left;
    width: 210px;
    text-align: left;
    color: #222;
    font-size: 56px;
    background: #fff;
    font-family: "NikeGratton";
    padding: 0px 10px;
    text-indent: 10px;
    font-size-adjust: none;
  }
  
  .counter .share-counter { /* this is part of the facebook & twitter images at the footer of the page */
    position: absolute;
    top: 100px;
    left: 120px;
  }
  

  .counter-entry {
    width: 100px;
  }

#counter-scrolled {
  margin: 50px 0 25px 0;
}