/* Global stuff: */
body{
   background-color:#f2e6d8;
   color:#0d0000;
}

a {
   color:#d95763;
   text-decoration: none;
   font-weight:bold;
   cursor:pointer;
}

a:hover{
   text-decoration: underline;
}

/* Specific classes: */

.choice{
    text-align:center;
}





/* Meant to match shape of overall viewport. */
.outerContainer{
   position:fixed;
   top: 0;
   left: 0;
   width:100%;
   height:100%;
}

/* Contains all the inner stuff, centers it horizontally. */
.mainContainer{
    display: block;
    width: 100%;
    height: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* Stuff for the map itself */

#mapHolder{
    position:relative;
    display:inline-block;
    height:100%;
}
.mapImg{
    display:inline-block;
    height:100%;
    visibility:hidden;
}
#map{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-image: url("images/kneiphof.png");
    background-size:cover;
}


/* All of the "bridge already crossed" overlays. */
.overlay{
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background-size:cover;
}

#bridge_a{
    background-image: url('images/bridge_a.png');
    visibility:hidden;
}
#bridge_b{
    background-image: url('images/bridge_b.png');
    visibility:hidden;
}
#bridge_c{
    background-image: url('images/bridge_c.png');
    visibility:hidden;
}
#bridge_d{
    background-image: url('images/bridge_d.png');
    visibility:hidden;
}
#bridge_e{
    background-image: url('images/bridge_e.png');
    visibility:hidden;
}
#bridge_f{
    background-image: url('images/bridge_f.png');
    visibility:hidden;
}
#bridge_g{
    background-image: url('images/bridge_g.png');
    visibility:hidden;
}

/* The title, TODO: Figure out how to size it properly. */
h3.small-title {
    font-size: 9pt;
    font-family: sans-serif;
    text-align: center;
    font-weight: 700;
    width: 100%;
}

/* Controls the height of the map, I guess.*/
.topHalf{
    margin:0;
    height:45%;
    text-align:center;
}

/* Contains the story itself. */
.storyContainer{
    height:45%;
    margin-top:5px;
    margin-left:0;
    margin-right:0;
    padding-left:5px;
    padding-right:5px;
    overflow-y:scroll;
    scrollbar-width:thin;
    /*scrollbar-color: #d95763 #f2e6d8; */
    scrollbar-color: #d9b1a3 #f2e6d8; 
}