html { overflow-y: scroll;}
body { color: #fff; background-color: #000; font-family: Arial, sans-serif;}
body, #wrapper { width: 100%; height: 100%; top: 0; left: 0; position: absolute;}

/* js transitions */
.js #content, .js #nav { margin-top: -10px; display: none;}
.js .page_links { display: none;}
.js #thumbs .caption { display: none;}
.js h1 { display: none;}

h1 { width: 100%; height: 251px; top: 50%; position: absolute; margin-top: -125px;}
h1 a { width: 538px; display: block; margin: 0 auto;}

#nav { width: 1000px; position: fixed; top: 31px; z-index: 500;}
#nav li { width: 100%; float: left; font-size: 6.875em; line-height: 0.85em; padding-left: 0.1em;}
#nav a { color: #fff; text-transform: uppercase;}
#nav a:hover, #nav a.active { color: #f09;}

#content { top: 38px; position: absolute; z-index: 200;}
.pages #content { top: 30px;}
#text { padding: 0 5% 0 8%;}

#thumbs { float: left;}
#thumbs li, #thumbs li a, #thumbs li a img { width: 180px;}
#thumbs li a, #thumbs li a img { width: 100%; top: 0; left: 0; position: absolute;}

#thumb_nav { width: 60px; position: fixed; left: 73%; top: 85%; z-index: 100;}

/* Fluid layout rules */
#nav, .js #nav.open {
  left: 72.1428571428571%; /* 1010/1400 */
}

#content { 
  width: 71.4285714285714%; /* 1000/1400 */
  left: 1.4285714285714%; /* 20/1400 */
  }

#thumbs { 
  width: 100%;
  margin-left: -1%; /* 10/1000 */
  }
  
#thumbs li {
  width: 18%; /* 180/1000 */
  float: left;
  margin: 0 1% 14% 1%; /* 10/1000 */
  position: relative;
  }

#caption { color: #402; width: 90%; bottom: 22px; left: 10%; position: absolute;}

.page_links { width: 60px; height: 95px; top: 43%; position: absolute; background-position: 0 0; background-repeat: no-repeat; cursor: pointer; opacity: 0.8;}
.page_links:hover { background-position: 0 -95px; opacity: 1;}
#prev_photo { background-image: url(/images/site/bg_photo_prev.png); left: 20px;}
#next_photo { background-image: url(/images/site/bg_photo_next.png); right: 20px;}

/* baseline site with no js */
.home #nav { left: -5000px;}
#thumbs .caption { width: 90%; height: 90%; padding: 5%; position: absolute;}
#thumbs p { font-size: 0.875em;}
#thumbs a { color: #fff;}

#photo { width: 100%;}
#photo img { width: 98%;}

/* js enabled rules */
#overlay, #images, #images div { width: 100%; height: 100%; top: 0; left: 0; position: absolute;}
.js #wrapper { z-index: 10;}
#overlay { background-color: #000; z-index: 100;}
.loading { background: #402 url(/images/site/ajax-loader.gif) 50% 50% no-repeat; opacity: 0.6;}

.js #nav, .gallery.index #nav { left: 1.4285714285714%;}

#toggle { font-size: 3.4em; width: 30px; height: 30px; bottom: 30px; left: 20px; position: fixed; z-index: 300;}
#toggle a { color: #402;}
#toggle a:hover { color: #f09 !important;}

.loading { width: 32px; height: 32px; bottom: 20px; right: 20px; position: absolute; z-index: 500;}
#thumbs .loading { top: 0; left: 0;}

#images { min-height: 600px; overflow: hidden; z-index: -1;}
#images div { background-color: #000; text-align: center; overflow: hidden;}
#images img { height: 100%; width: auto;}

#nav li, #text { font-family: pragmatica-web, Arial, sans-serif; font-weight: 400;}


#text h2, #text h3 { text-transform: uppercase; letter-spacing: 0.1em;}
#text h2 { color: #f09; font-size: 1em; line-height: 1em; margin-bottom: 0.5em;}
#text p, #text h3 { font-size: 1em; line-height: 1.375em; margin-bottom: 1em; font-weight: 400;}
#text p.intro { font-size: 1.5em; line-height: 1.2em;}
#text h3 { color: #503; margin: 3em 0 0.5em 0;}

#text a { color: #fff;}
#text a:hover { color: #f09;}

#caption p { font-size: 1.25em;}
p strong { font-weight: bold;}
p em { font-style: italic;}
a { text-decoration: none;}

@media screen and (max-width: 480px) { 
  #nav, #nav.open { width: 96%; top: 16px; left: 2% !important; position: relative;}
  #nav li { font-size: 2.5em; display: block;}
  #content { width: 100%; position: relative;}
  #thumbs li { width: 46%; margin: 0 2% 34% 2%;}
  h1 { height: 126px; margin-top: -63px;}
  h1 a { width: 269px;}
  h1 img { height: 126px; width: 269px;}
  #text { padding: 0 4% 0 2%;}
  #text p { font-size: 0.875em;}
  #text p.intro { font-size: 1.125em;}
  #text { margin-top: 2em; float: left; width: 100%;}
  #text h3 { margin-top: 2em;}
  
  #images, #images img { width: 100%; position: relative;}
  #images img { height: auto;}  
  #caption, .page_links, #toggle { display: none !important;}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  .ios #wrapper { height: 946px;}
  #thumbs li { width: 31.333333333333333%; margin-bottom: 22.5%;}
  #nav li { font-size: 5.5em;}
}

@media screen and (min-width: 769px) and (max-width: 1100px) {
  .ios #wrapper { height: 690px;}
  #thumbs li { width: 23%; margin-bottom: 17%;}
  #nav li { font-size: 5.5em;}
}

@media screen and (min-width: 1500px) { 
  #thumbs li { width: 14.666666666666667%; margin-bottom: 12%;}
  #nav, #nav.open { width: 1400px;}
  #nav li { font-size: 8em;}
  #text p { font-size: 1.25em;}
  #text p.intro { font-size: 1.75em;}
}