html {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #000;
}

body {
	margin: 0;
	padding: 0;
	overflow: scroll;
}

#cyoa {
	overflow: hidden;
    position:fixed;
    z-index:1;
    top:0;
    left:0;
	width:100%;
	height:40px;
}

div#no_script {
	display: none;
}

a img {
	border: none;
}

#gallery{
  position:absolute;
  top:90px;
  left:-10px;
  display:table;
  padding:0;
  margin:0;
  text-align:left;
  border-spacing: 50px 30px;
  border-collapse: separate;
  display:none;
  opacity:0;
}

#gallery div{
  display:table-cell;
  color:#fff;
  font: 12px Futura, Arial, sans-serif;
  letter-spacing:.1em;
  padding:0;
}

#fader{
  position:fixed;
  top:106px;
  left:0px;
  width:100%;
  height:30px;
  background-image: url(http://s3.amazonaws.com/cyoa/img/etc/fader.png);
  background-repeat:repeat-x;
  z-index:2;
  display:none;
}


#gallery div img{
  padding:10px 0;
  border-bottom:1px solid white;
  margin-bottom:4px;
  min-height:500px;
  float:left;
}

a.attrib{
  color:#666;
  font: italic 12px Georgia;
  letter-spacing:0;
  text-decoration:none;
}

a.attrib:hover{
  border-bottom:1px solid #999;
}

#nav{
    width:100%;
    height:30px;
    background-color:#222;
    padding-left:36px;
    padding-top:5px;
}

#nav > a{
    float:left;
    color:#999;
    margin: 10px 6px;
    text-decoration:none;
    font:11px Futura, Arial, sans-serif;
    letter-spacing:.1em;
}

#nav .warning{
  float:left;
  color:#999;
  margin: 7px 6px;
  font:11px Futura, Arial, sans-serif;
  opacity:0;
}

#nav > a:first-child{
    color:#F6CB42;
}

#gallery-nav{
  position:absolute;
  font:11px Futura, Arial, sans-serif;
  top:35px;
  left:0px;
  color:#fff;
  width:100%;
  padding:20px 40px;
  background-color:black;
  display:none;
  opacity:0;
}

#gallery-nav .title{
  font-size:16px;
  margin-bottom:6px;
}

#gallery-nav a{
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#aaa;
  margin-right:10px;
}

#gallery-nav .controls{
  float:right;
  margin-right:110px;
}

#branches{
    margin-top:70px;
/*    background-color:#a09f92;*/
}

#intro{
    position:absolute;
    top:0px;
    left:24px;
/*    opacity:0;*/
/*    display:none;*/
}

#intro a.colophon{
  background-image: url(http://s3.amazonaws.com/cyoa/img/etc/arrow-right.png);
  background-position: center right;
  background-repeat:no-repeat;
  margin-left:234px;
  width:440px;
  font: 10px normal Verdana, sans-serif;
  color:#888;
  text-align:left;
  border: 1px solid #666;
  text-transform:uppercase;
  padding: 5px 8px;
  letter-spacing:.1em;
  display:block;
}
/*#intro .colophon{
  color:#888;
}
*/
#intro a.colophon:hover{
  color:#95CDE5;
  text-decoration:none;
}


.fn{
  display:none;
}

.fn-popup a{
  color:#95CDE5;
  text-decoration:none;
}
.fn-popup a:hover{
  text-decoration:underline;
}

.fn-popup{
  height:100%;
  overflow:auto;
  font: 10px Verdana, serif;
  color:#fff;
  padding-left:40px;
}

.fn-popup h1{
  font: 12px/18px Verdana, sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin:30px 0;
}

.fn-popup h1 em{
  color:#999;
  font-style:normal;
  font:32px 'Times New Roman', serif;
}

.fn-popup h2{
  margin:30px 0 0 0;
  padding:0;
  font: 10px/18px Verdana, sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#999;
}


.fn-popup p{
  font: 11px/19px Verdana, sans-serif;
  width:325px;
}
#colophon p{
    width:380px;
}


.sup{
  position:relative;
  top:-4px;
  font: 9px Verdana, sans-serif;
}

#intro img{
  border:1px solid transparent;
}
#intro a img:hover{
  border: 1px solid #666;
  padding:4px 4px;
  margin:-4px -4px;
}

#intro p{
    width:440px;
    font: 11px/19px Verdana, serif;
    color:#ddd;
    text-align:left;
    margin-left:240px;
}
#intro ol{
  color:#fff; 
  margin-left:240px; 
  font:11px/18px verdana; 
  width:400px;
}

.sc{
  text-transform:uppercase;
  font: 10px/19px Verdana, serif;
}

#intro h1{
    background-image: url(http://s3.amazonaws.com/cyoa/img/etc/one-book.png);
    height:16px;
    width:203px;
    margin-left:18px;
    text-indent:-99999999px;
}
#intro a{
  color:#95CDE5;
  text-decoration:none;
}
#intro a:hover{
  text-decoration:underline;
}
#readings{
    background-position: 0 0;
    margin-bottom:-24px;
    margin-top:60px;
}
#choices{
    background-position: 0 64px;
    margin-bottom:-27px;
    margin-top:100px;
}
#storylines{
    background-position: 0 48px;
    margin-bottom:-27px;
    margin-top:100px;
}
#paths{
  background-position: 0 32px;
  margin-bottom:-27px;
  margin-top:140px;
}
#conclusions{
    background-position: 0 16px;
    margin-bottom:-27px;
    margin-top:140px;
}

#thanks{
    background-position: 0 16px;
    margin-bottom:-26px;
    margin-top:100px;
}