/*
 * 
 *  Author: Chris Ferrantello
 *  www.chrisferrantello.com
 *  
 *  
 *  
 *  
 *
 */
 



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

/*
 *  TABLE OF CONTENTS
 *  
 *  Reset
 *  HTML5
 *  Global
 *  Grid
 *  Layout
 *  
 *  Media Queries
 *   + iPhone/iPod
 *   + iPad
 *
 *  Clear
 *
 */



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

/* @Reset */

html
{
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
}

body
{
  margin: 0;
  padding: 0 0 0 0;
  width: 100%;
  overflow-x: hidden;
  background: #000;
 
}


*
{
  margin: 0;
  padding: 0;
  outline: none;
 
}

  body,
  div,
  dl,dt,dd,
  ul,ol,li,
  h1,h2,h3,h4,h5,h6,
  pre,
  form,fieldset,
  input,textarea,
  a,
  p,blockquote,
  th,td 
  { 
    margin: 0;
    padding: 0;
    vertical-align: baseline;
  }
    
  img 
  {
   border: 0
  }
    
  address,
  caption,
  cite,
  code,
  dfn,
  em,
  strong,
  th,
  var 
  {
    font-style: normal;
    font-weight: normal;
  }
    
  ol,ul 
  {
    list-style: none;
  }
    
  h1,h2,h3,h4,h5,h6 
  {
    font-size: 100%;
    font-weight: normal;
  }

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

/* @HTML5 */

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary, mark {  
  display:block;
}


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

/* @FONT-FACE */

 @font-face {font-family: 'DidotReplacement';src: url('../fonts/18F0BF_0.eot');src: url('../fonts/18F0BF_0.eot?#iefix') format('embedded-opentype'),url('18F0BF_0.woff') format('woff'),url('18F0BF_0.ttf') format('truetype');}

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

/* @Global */

* 
{
  line-height: 14px;
  font-size: 12px;
  font-family: Courier,Monaco,Helvetica, Arial, Verdana, sans-serif ;
  font-style: normal;
  
  font-weight: normal !important;

}

  p
  {
    margin: 0 0 20px 0;
    color: #4d4d4d;
    font-size: 12px;
    line-height: 18px;
  }
  
    p * {
      font-size: 12px;
    }
  
  a
  {
    color: #000;
    text-decoration: none;
    font-size: 12px;
  }
 
  a:hover {
    color: #fff;
  }
  
  
  h1,h2 {
    font-weight: bold;

  }
  
  h1 em, h2 em {
    font-weight: normal;

  }


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

/* @Layout */


div#wrapper {
  min-height: 1000px;
  width: 100%;
  margin: 0;
  padding: 0 0 50px 0;
}

header {
  margin: 0
}



article { 
  background: #336699; 
  position: fixed; 
  top: 0 ; 
  left: 0; 
  width: 100%; 
  min-height: 100%;  
  -moz-box-shadow: 0 0 12px #666; 
  -webkit-box-shadow: 0 0 12px #666; 
  z-index:99999;
}

  article figure { 
    background: transparent;
    position: fixed; 
    top: 250px; 
    min-height: 400px;  
    left: 400px; 
    margin: 0; 
    padding: 0;
  }

  ._mobile article { position: relative }

  ._mobile article figure { position: absolute }  

   
  article header {
    position: absolute; 
    margin: 50px 0 0 0;
    width: 300px;
    height: 200px;
    overflow: hidden;
    top: 0;
    padding: 0 0 0 10px;
  }


  article h1 {
    width: 200px;    
    margin: 0 0 0 0;
    font-family: Didot,DidotReplacement,"Didot" !important;
    font-style: italic;
    text-transform: uppercase;
    font-size: 40px;
    line-height: 40px;
  }

    article p {
      font-family: Courier;
      font-style: normal;
      line-height: 18px;
      color: #fff;
      font-size: 11px;
    }
    
    .footnotes {
      margin: 50px 0 0 0;
    }
    
      .footnotes a {
        font-size: 11px;
        color: #000
      }
    
    .column {
      margin: 0 0 0 50px;
      padding: 0 0 0 0;
      border: 1px solid #fff;
    }
    
    .text {
      margin: 250px 0 0 0;
      padding: 0 0 0 100px;
    }
    
      .text p {
        width: 200px;
      }
    
    .extras {
      position: absolute;
      top: 250px;
      right: 0;
      width: 50px;
      
    }
    
    
      
      
      .extras a {
        display: block;
        color: #999;
        text-align: left;
        text-indent: -900px;
        padding: 0 0;
        width: 100%;
        height: 50px;
        overflow: hidden;
        border-bottom: 1px solid #ccc;
      }
      
            .extras a[data-camera] {
              border: 0;
              background: url(f.png) 0 50% no-repeat;
            }
            
              .chapter .extras a[data-camera] {
                background: url(f_w.png) 0 50% no-repeat;
              }
            
            .extras a[data-location] {
              background: url(g.png) 0 50% no-repeat;
            }
            
              .chapter .extras a[data-location] {
                background: url(g_w.png) 0 50% no-repeat;
              }
            
            .extras a:hover {
              color: #000;
            }
            
    
    .numeral {
      position: absolute;
      top: 250px  ;
      left: 50px;
      font-size: 15px;
      line-height: 10px;
      font-family: Didot,DidotReplacement;
      padding: 5px;
      border-bottom: 2px solid #444;
      text-align: center;
    }

        article sup {
          font-family: Courier;
          font-size: 11px;
          color: #000;
        }
        
        
    .fullscreen * {
      color: #fff !important;
    }
    
      .fullscreen .background {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
      }
  

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

/* Media */

    figure img {
      display: block;
      
    }
    
   .panoramic img {
      min-width: 556px;
      width: 90%;
      
    }
    
   @media screen and (min-width:1350px) {
   
    .panoramic img {
      width: 900px;
    }
    
  }
   
/* ---------------------------------- */

/* Video */

  .video-vimeo {
    display: block;
    position:relative;
    margin: 0 0 25px 0;
    width: 880px;
    height: 495px;
    background: #f5f5f5 url(preload_video.gif) 50% 50% no-repeat;
  }
  
     .vimeo-video,
     .video-vimeo img,
     .video-vimeo iframe {
      width: 100%;
      height: 100%;
      
     }

   @media screen and (max-width: 1350px), (max-height: 700px) {
    
      .video-vimeo {
        width: 651px;
        height: 366px;
      }
  
   }  
  
  /* Video icons */
     
  .i-video {
    display: block; 
    z-index: 2;
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 80px; 
    height: 80px; 
    margin: -43px 0 0 -43px; 
    text-align: center; 
    vertical-align: center; 
    cursor: pointer !important;
    border:0; 
    opacity: 0.9;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px; 
    border: 2px solid #fff;
  }
  
     .i-video span {
      display: block; font-size: 0; line-height: 0;
      width: 0; height: 0; margin: 30px 0 0 33px;
      border-left: 20px solid #fff; 
      border-top: 10px solid rgba(0,0,0,0); 
      border-bottom: 10px solid rgba(0,0,0,0);
    }
    
    .i-video:hover {
      border: 2px solid #ccc;
    }
    
    .i-video:hover span {
        border-left-color: #ccc;
    }


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

/* Title Pages */


  .title-page {
    background: #019999;
  }
  
  .title-page h1, .title-page p {
    text-align: center;
  }

  .title-page header {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -480px !important;
    width: 960px;
    height: 350px;
    padding: 0;
  }
  
  
  .credits header h1,
  .chapter header h1 {
    font-size: 100px;
    letter-spacing: 8px;
    line-height: 100px;
    margin: 0 0 50px 0;
  }
  
  .credits header {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -250px 0 0 -480px !important;
    width: 960px;
    height: 500px;
    padding: 0;
  }
  
    .credits p a
      {
        color: #000;
        border-bottom: 1px dashed #777;
      }
      
      .credits p a:hover {
        border-bottom: 0
      }
  
  .chapter header {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -125px 0 0 -480px !important;
    width: 960px;
    height: 325px;
  }
  
    .chapter header p {
      width: 460px;
      margin-left: auto;
      margin-right: auto;
    }

  .hints {
    margin: 100px 0 0 0; 
  }
  
    .hints a { cursor: default }
  
  .hints span {
    display: none;
  }
  
  .icon-keyboard {
    width: 50px;
    height: 25px;
    background: url(keyboard.png) 50% 50% no-repeat;
    display: inline-block;
    overflow: hidden;
    text-indent: -9000px;
    opacity: .5;
  }
  
  .icon-scroll {
    width: 50px;
    height: 25px;
    background: url(scroll.png) 50% 50% no-repeat;
    display: inline-block;
    overflow: hidden;
    text-indent: -9000px;
    opacity: .5;
  }
  
  
  .icon-esc {
    width: 50px;
    height: 25px;
    background: url(esc.png) 50% 50% no-repeat;
    display: inline-block;
    overflow: hidden;
    text-indent: -9000px;
    opacity: .5;
  }
 
  .title-page h1 {
    color: #111;
    font-size: 100px;
    letter-spacing: 10px;
    font-family: Didot,DidotReplacement, "Didot", "Hoefler Text";
    font-style: regular;
    text-align: center !important;
    padding: 0;
    text-transform: uppercase;
    margin: 0;
    line-height: 200px;
    width: 100%;
  }
  
  .title-page h2 {
    position: absolute;
    left: 50px;
    top: 50px;
  }
  
  .title-page h3 {
    position: absolute;
    right: 50px;
    top: 50px;
  }
  
  .title-page h4 {
    position: absolute;
    right: 50px;
    bottom: 50px;
  }
  
  .title-page h5 {
    position: absolute;
    left: 50px;
    bottom: 50px;
  }

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

/* Nav */

#toc {
  position: fixed;
  top: 50%;
  left: 50%;
  background: #000;
  width: 400px;
  height: 400px;
  z-index: 999999;
  display: none;
  padding: 25px 50px 50px 50px;
  margin: -250px 0 0 -250px;
  opacity: .9
}


  #toc h1,
  #toc h2,
  #toc p
  { text-align: center; color: #fff;}
  
  #toc p {
    color: #ccc;
    padding: 0 0 15px 0;
  }
  
      #toc p a
      {
        color: #ccc;
        border-bottom: 1px dashed #ccc;
      }
      
      #toc p a:hover {
        border: 0;
        color: #999;
      }
  
  #toc h1
  { font-family: Didot,DidotReplacement; font-size: 25px; font-style: italic; text-transform: uppercase; line-height: 30px; margin: 50px 0 0 0; letter-spacing: 4px;}
  
  #toc h2
  { padding: 0 0 0 0; color: #fff; font-size: 11px; }

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

/* Modal */

#modal {
  width: 600px;
  height: 250px;
  padding: 0;
  position: fixed;
  top: 55%;
  left: 50%;
  z-index: 999999;
  margin: -125px 0 0 -300px;
  overflow: hidden;
  display: none;
}

  #modal .bg { background: #111; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .96; z-index: 1}
  #modal .modal-details { position: absolute; top: 50px; left: 225px; z-index: 2 }
  #modal figure { position: absolute; z-index: 2; display: block; width: 200px; height: 200px !important;left: 25px; top: 25px;background: url(camera.png) 0 0 no-repeat; }
  
  #modal.canon figure { background-position: 0 0 }
  #modal.horizon figure { background-position: -200px 0 }
  #modal.minox figure { background-position: -400px 0 }
  #modal.hasselblad figure { background-position: -600px 0 }
  #modal.yashica figure { background-position: -800px 0 }
  #modal.diana figure { background-position: -1000px 0 }
  #modal.sx70 figure { background-position: -1200px 0 }
  #modal.holga figure { background-position: -1400px 0 }  
  
  #modal.japan figure { background:url(but1.gif) 0 50% no-repeat;  }
  #modal.pdx figure { background:url(but2.gif) 0 50% no-repeat;  }
  #modal.colorado figure { background:url(but3.gif) 0 50% no-repeat;  }
  #modal.georgia figure { background:url(but4.gif) 0 50% no-repeat;  }
  #modal.sfo figure { background:url(but1.gif) 0 50% no-repeat;  }
  #modal.italy figure { background:url(but2.gif) 0 50% no-repeat;  }
  #modal.world figure { background:url(but3.gif) 0 50% no-repeat;  }
  #modal.pennsylvania figure { background:url(but4.gif) 0 50% no-repeat;  }
  
  #modal._active { display: block; top: 50%; }
    
  .modal-details h1,
  .modal-details h2,
  .modal-details p
  { text-align: center; color: #fff }
  
  .modal-details h1, 
  .modal-details h2 
  { font-family: Didot,DidotReplacement, "Didot"; font-size: 25px; font-style: italic; text-transform: uppercase; line-height: 30px; }

  .modal-details ul { width: 500px; margin: 50px 0 0 0; }   
  .modal-details ul li { float: left; width: 150px; }




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

/* @media: iPad */
 


  @media only screen and (max-device-width: 1024px) and (min-device-width: 480px)  {  
    
   article.title-page {
    min-height: 718px;
    height: 718px;
   }      
   
   article {
    margin-bottom: 10px;
   }
   
   .background{
    height: 100%;
    width: auto !important;
   }  
   
   body {
    width: 1024px !important;
    min-width: 1024px !important;
   }
   
   .extras {
    right: -10px;
   }
   
   .panoramic img {
    width: 560px;
   }
   
   .video-vimeo {
    width: 550px;
    height: 309px;
   }
      
  
  } 
  
  
  
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { 
  
    .hints em {
        display: none;
      }
      
    article { 
      padding-bottom: 100px;
    }
    
    article .column {
        width: 100% ;
        margin: 0;
        top: 0;
        padding: 0;
        height: auto;
        position: static;
      }
     
      article .column header {
        width: 400px       !important;
        margin: 50px auto   !important;
        height: auto      !important;
        padding: 0        !important;
        position: static;
        left: 0;
      }
           
      article .column header h1{
        width: 80%                  !important;
        margin: 80px auto 50px auto !important;
        font-size: 45px             !important;
        text-align:center;
        line-height: 45px;
        
      }
      
      article .text {
        margin: 0;
        padding: 0;
      }
    
      article .text p {
        display: none;
      }

    article figure {
      width: 100%;
      left: 0;
      text-align: center;
      min-height: auto;
      margin-top: 75px;
    }
    
    article figure img{
      display:inline;
    }
    
      article .numeral {
        position: absolute;
        left: 50%;
        top: 50px;
        margin: 0 0 0 -20px;
        text-align: center;
        line-height: 24px;
        font-size: 18px;
      }
    
   .video-vimeo {
    width: 651px;
    height: 366px;
    margin: 0 auto 10px auto;
   }
      
  }
  
  
/* ---------------------------------- */

/* @media: iPhone */  
  
  @media only screen and (max-device-width: 480px) {
  
    
    * {
      padding: 0 !important;
      left: 0;
    }

    .hints span {
      display: inline;
    }
      .hints em {
        display: none;
      }
  
    article {
      position: relative;
      height: auto;
      padding: 0;
      min-height: auto;
      margin-bottom: 10px;

    }

    
    article.interlude {
      display: none;
    }
    
    article.video ,
    article.title-page,
    article.credits,
    article.chapter {
      height: 550px !important;
      min-height: 550px !important;
      width: 100% !important;
      top: auto !important;
    }

      article.video {
        height: 600px !important;
      }
    
    
      article hgroup {
        display: none;
      }
      
      article.title-page header h1 {
        font-size: 26px;
        line-height: 60px;
        margin-bottom: 20px;
        letter-spacing: 8px;
      }
      
        article#cover header h1 {
          margin-bottom: 0;
        }
      
      article.credits header h1,
      article.chapter header h1{
        font-size: 26px;
        line-height: 40px;
        margin-bottom: 40px;
      }
      
      article.credits header {
        padding:  50px 0;
        position: relative;
        top: 50px;
        width: 300px;
        display: block !important;
        left: 10px !important;
        margin: 25px 0 0 0 !important;
      }
      
      
      article.chapter header p {
        width: 100%;
        display: block;
        font-size: 10px;
        width: 300px;
      }
    
      article .column {
        width: 100% ;
        margin: 0;
        top: 0;
        padding: 0;
        height: auto;
        position: static;
      }
     
      article .column header {
        width: 300px       !important;
        margin: 0 auto     !important;
        height: auto       !important;
        padding: 0         !important;
        position: static;
        left: 0;
      }
           
      article .column header h1{
        width: 100%                  !important;
        margin: 70px auto 30px auto !important;
        font-size: 36px             !important;
        text-align:center;
        line-height: 40px;
      }
      
      article figure {
        left: 0;
        top: 0;
        width: 90%;
        padding: 0            !important;
        margin: 5% auto       !important;
        position: relative    !important;
        height: auto          !important;
        min-height: auto      !important;
        
      }
      
      figure img {
        width: 100%           !important;
        display: block;
        
      }
    
      article .text {
        margin: 0;
        padding: 0;
      }
      article .text p {
        display: none;
      }
      
      article .numeral {
        position: absolute;
        left: 50%;
        top: 25px;
        margin: 0 0 0 -20px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
      }

      article .extras {
        display: none
      }
      
      .fullscreen .background {
        height: 100%;
        width: auto;
      }
          
       .video-vimeo {
        width: 250px;
        height: 140px;
        margin: 0 auto 10px auto;
       }
           
      body {
         min-width: 100%     !important;
         width: 100%         !important;
         max-width: 100%     !important;
         
      }
      
  } 
  
  
  @media only screen and (max-device-width: 480px) and (orientation:landscape) {

    #cover {
      height: 400px !important;
      min-height: 400px !important;
    }
  
  }

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

/* @Clear */

.clear-self:after 
{ 
  content: " "; 
  display: block; 
  clear: both; 
  visibility: hidden; 
  line-height: 0; 
  height: 0;
  margin-bottom: 0; 
}

.clear-self 
{ 
  display: block;
}

html[xmlns] .clear-self 
{ 
  display: block;
}

* html .clear-self 
{ 
  height: 1%; 
}