html, body {
    margin:auto;
    padding:0;
    text-align: left;
    font-size: 18pt;
    color: #555;
    /* background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, from(white), to(#c9be9e)); */
    background: gray; /* Todo: replace with a nice subtle pattern */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
    text-rendering: optimizeLegibility; 
    height: 1024px;  
    width: 768px; 
}
body {
    position: absolute;
    font-family: "Hoefler Text", serif;
}

#header {
    position: absolute;
    width: 100%;
    height: 100px;
    margin: 0;
}

h1 {
    font-family: Helvetica;
    font-size: 20pt;
    color: #222;
    text-align: center;
    text-shadow: 0px 1px 1px white;
    margin-top: 0.7em;
    margin-bottom: 0.3em;
}

h2 {
    font-family: Helvetica;
    font-size: 14pt;
    font-weight: normal;
    color: #333;
    text-align: center;
    text-shadow: 0px 1px 1px white;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}

.invert-colours #header h1, .invert-colours #header h2 {
    color: #EEE;
    text-shadow: 0px -1px 1px black;
}

#page-number {
    position: absolute;
    bottom: 10px;
    width: 100px;
    height: 40px;
    margin: 0;
    padding: 0;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    font-style: normal;
    font-size: 24pt;
}

#page-number.even {
    left: 25px;
    text-align: left;
}

#page-number.odd {
    right: 25px;
    text-align: right;
}

.invert-colours #page-number {
    color: white;
}

#scroll-background {
    width: 430px;
    height: 430px; 
    position:absolute;
    top:40px;
    right:120px;    
    opacity: .07;
    -webkit-transition: opacity 0.5s;
    background: url(../images/scroll.png) top right no-repeat;
}


#container {
    top:0px;
    margin: 0;
    padding: 0;
    overflow:hidden;
    position:absolute;
    width: 768px;
    height: 1024px;
}

#map {
    position: absolute;
    /* Starting position */
    height: 4252px;
    width: 2953px;
    background: url(../images/map.jpg) -2000px -2000px no-repeat;
    background: url(../images/map.jpg) top left no-repeat;
    -webkit-transform: scale(.2);
    -webkit-transform-origin-x: 0;
    -webkit-transform-origin-y: 0;
    -webkit-transition: -webkit-transform 2s, opacity 0.5s;
    -webkit-transition-delay: 1s;
    opacity: 0;
}



/*
    The chapter container, buttons outside of this
*/

#chapter_container {
    position:absolute;
    top:140px;
    margin:auto;
    padding-top: 50px;
    padding-left: 100px;
    padding-right: 80px;
    height: 740px;
    width: 570px;
    overflow-x:visible;
    overflow-y:scroll;
    z-index: 1;
}

#container.juliette {
    background: url(../images/bg-juliette.jpg);
}

#container.henri {
    background: url(../images/bg-henri.jpg);
}

#container.alise {
    background: url(../images/bg-alise.jpg);
}

#container.enclosure {
    background: url(../images/bg-juliette.jpg);
}

#container.mother {
    background: url(../images/bg-mother.jpg);
}

#container.book-cover {
    background: url(../images/book-cover.jpg);
}



/*
    Tucked in versions
*/

#container.juliette.complete {
    background: url(../images/bg-juliette-tuck.jpg);
}

#container.henri.complete {
    background: url(../images/bg-henri-tuck.jpg);
}

#container.alise.complete {
    background: url(../images/bg-alise-tuck.jpg);
}

#container.enclosure.complete {
    background: url(../images/bg-juliette-tuck.jpg);
}

#container.mother.complete {
    background: url(../images/bg-mother-tucker.jpg);
}

#container.plain-bg {
    background: url(../images/sugar-paper-beige.jpg);
    box-shadow: inset 0px 0px 100px rgba(0, 0, 0, 0.5);
}

/*
    Page backgrounds
*/

.chapter, .preface {
    padding-top: 5em;
/*    min-height: 1000px;
   max-height: 1024px; */
/*    position: relative;  ???? */
	page-break-before:always;
	overflow: visible;
}

.preface {
    display: table-cell;
    padding-top: 0em;
    margin: 0 auto;
    vertical-align: middle;
    text-align: center;
    height: 700px;
    width: 600px;
    padding-left: 50px;
    padding-right: 50px;
    
   font-family: HoeflerText;
    font-size: 18pt;
    font-style: italic;
    line-height: 1.4em;
}

.date {
    font-style: italic;
    float: right;
    color: gray;
}

#container.enclosure .content {
    font-family: HoeflerText;
    font-style: italic;
    font-size: 16pt;
}

.classpoem {
    padding-left: 20px;
}

/*
            Intro CSS classes
*/

#intro {
    z-index: 1;
    padding: 130px 130px 0 130px;
    height: 904px;  /* - 2 x 60 padding */
    margin: auto;
}

#intro p {
    font-size: 16pt;
    line-height: 1.4em;
    opacity: 0;
    }
#intro p.animating{
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    -webkit-transition-delay: 3s;
    }
#intro p.non-animating{
    opacity: 1; 
}

/* Drop cap */
#intro .drop-cap:first-letter {
    display: inline-block;
    font-size: 2.4em;
    padding-top: 12px;
    padding-left: 10px;
    float: left;
}

#intro div:first-child {
    margin-bottom: 3em;
    color: #5a639a !important; /* Blueish */
    text-align: left;
}
#intro div:first-child span {
    text-indent: -10px;
    font-size: 72pt;
    line-height: 80px;
    display: block;
    opacity: 0;
}
#intro div:first-child span.animating {
    opacity: 1;
    -webkit-transition: opacity 0.5s;
}
#intro div:first-child span.non-animating {
    opacity:1;
}

#intro div span.first {
    line-height: 100px;
    text-indent: 50px;
    font-size: 88pt;
        opacity: 0;
}


#intro div span.second {
    line-height: 60px;
    text-indent: 5em;
    font-size: 24pt;
        opacity: 0;
}
#intro div span.second.non-animating {
    opacity:1;
}

#intro div span.second.animating {
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    -webkit-transition-delay: 1s;
}
#intro div span.third {
    line-height: 60px;
    text-indent: 8em;
    font-size: 24pt;
        opacity: 0;
}
#intro div span.third.non-animating {
    opacity:1;
}
#intro div span.third.animating {
    opacity: 1;
       -webkit-transition: opacity 0.5s;
    -webkit-transition-delay: 2s;
}

#intro .flower-breaker {
    display: block;
    width: 75px;
    height: 42px;
    margin: 0 auto;
    margin-top: 2em;
    opacity: 0.5;
}

/* All divs are hidden by default 
div { 
    display:none;
}
*/
div.show {
    display: block;
}
.hide {
    display: none;
}
p, div {
    margin-top: .75em;
    margin-bottom: .75em;
}


p, div, span {

}

#cover h1 {
    color: rgb(149,141,79);
    font-size: 1.5em;
    text-align: center;
}
dl {
    color: rgb(89, 85, 64);
    margin-left: 2em;
    font-size: .8em;
}
.smallcaps {
    font-size: smaller;
    text-transform: uppercase;
}

.noscroll {
    overflow-x:hidden !important;
    overflow-y:hidden !important;
}


/*
    default font for UI elements
*/

.ui-element  {
    font-family: Youngblood;
    font-size: 100px !important;
    color: #5A639A;
}




/* 
    The Fell Types are digitally reproduced by Igino Marini. http://www.iginomarini.com

*/

/*
    Deprecated ----
*/

.chapter .continue {
/*    opacity: 0; */
    -webkit-transition: opacity 1s;    
    font-family: 'IMFELLDWPicaPRO';
}

@font-face {
    font-family: 'IMFELLDWPicaPRO';
    src: url('../fonts/FePIit27C.otf') format('otf'),
         url('../fonts/fepiit27c-webfont.eot?') format('eot'),
         url('../fonts/fepiit27c-webfont.woff') format('woff'),
         url('../fonts/fepiit27c-webfont.ttf') format('truetype'),
         url('../fonts/fepiit27c-webfont.svg#webfontHNMAzryn') format('svg');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'IMFELLDWPicaPRO';
    src: /* url('../fonts/FePIrm27C.otf') format('otf'), */
         url('../fonts/fepirm27c-webfont.eot?') format('eot'),
         url('../fonts/fepirm27c-webfont.woff') format('woff'),
         url('../fonts/fepirm27c-webfont.ttf') format('truetype'),
         url('../fonts/fepirm27c-webfont.svg#webfontxmOYEZXO') format('svg');
    font-weight: normal;
    font-style: normal;

}



.hint {

    -webkit-animation-delay: 0s;
    -webkit-animation-name: anim-wobble;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 5;
   
}

@-webkit-keyframes anim-wobble {
    0% {
        left: 1px;
    }
    30% {
        left: -4px;
    }
    40% {
        left: 3px;
        top: 2px;
    }
    60% {
        left: 3px;
    }

    100% {
        top: -3px;
        left: 2px;
    }
}


/*
   ---- End Deprecated 
*/


/*
    Replacement text popup window
*/

.popup {
    position:absolute; /* causes text to reflow ! */
    
    font-style:normal;
    text-align:left;
    color:black;

    -webkit-transition: opacity 1s;
    z-index: 10;
    
    /* Size of largest popup background image */
    width:600px;
    height:333px;

    
    margin-bottom: -20px;
    
    background: url(../images/popup-single.png) 69px 5px no-repeat;
}

.popup.multiple-first {
    background: url(../images/popup-multiple-first.png) 69px 5px no-repeat;
}

.popup.multiple-mid {
    background: url(../images/popup-multiple-mid.png) 0px 0px no-repeat;
}

.popup.multiple-last {
    background: url(../images/popup-multiple-last.png) 0px 0px no-repeat;
}

.next-indicator {
    display:block;
    opacity: 0.5;
}
.add-indicator {
    opacity: 0.5;
}
.remove-text {

}
.change-this, .or_message {
    font-family: "Zapfino";
    color: gray;
    font-size: 22pt;
    text-align: center;
    padding-top: 25px;
    margin-bottom: 0px;
}

.or_message {
    position: absolute;
    width: 600px;
    height: 100px;
    left: 0px;
    bottom: 30px;
}

.remove-indicator {
    margin-top: 10px;
    opacity: 0.5;
}

.pre_option, .next_option {
    position:absolute;
    display: block;
    width: 100px; /* larger than necessary so it's easily touchable with a big stubby finger */
    height: 80px;
    cursor:pointer;
    bottom: 30px;
    z-index: 1000;
}

.pre_option {
    background: url(../images/hand-left.png) no-repeat center;
    left: 150px;
}

.next_option {
    background: url(../images/hand-right.png) no-repeat center;
    right: 150px;
}

.no-header {
    background: none;
}
li {
    list-style-image: url(../images/bullet.png);
}
.divider {
    padding: 0;
    margin: .5em;
    width: 100%;
    text-align:center;
}


.update-content {
    min-height: 50px;
}

.update-with-this {
    cursor:pointer;
    margin-left:140px;
    margin-right:140px;
    margin-top: 0px;
    text-indent: -20px;
    padding-left: 40px;
    font-size: 20pt;
    font-style: italic;
}


/*  
    Main text
*/


.content {
    display: inline;
    line-height: 1.6em;
    padding: 3px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    text-decoration: none;
    color:#555;
    cursor:pointer;
    opacity:0;
    overflow:visible;
}

.content.active_sentence {
    color: black;
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
}

.content.active_sentence.final-true {
    color: #333;
    text-shadow: 0px 0px 1px rgba(0.3, 0.3, 0.3, 0.3);
}

.content.solid {
    cursor:default !important;
}

/* We're highlighting this text during a popup event */
.highlight {

	color: white !important;
	box-shadow: 0px 0px 20px rgba(130, 200, 255, 255);
	-webkit-box-shadow: 0px 0px 40px rgba(130, 200, 255, 255);
	text-shadow: 0px 0px 16px #036, 0px 0px 12px white, 0px 0px 12px white !important;
	background-color: rgba(130, 200, 255, 0.5);
    border-radius:8px;
}

.highlight br {
    background-color:transparent;
}

/* We're highighting by touching hte screen */

.liveText  {
    color:white !important;	
    text-shadow: 0px 0px 20px gray, 0px 0px 20px gray, 0px 0px 20px gray   !important;
}


/*
    Send the Letter
*/

#send-the-letter {
    position:absolute;
    top:0px;
    left:0px; 
    width:768px;
    height:150px;
    margin: 0;
    background: url(../images/send-letter.png) center top no-repeat;
    cursor: pointer;
    z-index:500;
}

/* Preface material appears between chapters, and has a different design */
.preface {
}

.preface blockquote {
    background: white;
    font-family: HoeflerText, serif;
    padding: 2em 4em 2em 4em;
    -webkit-box-shadow: -5px -5px 10px rgba(230,230,230,0.5), 5px 5px 10px rgba(230,230,230,0.5);    
    background: -webkit-gradient(linear, 100% 100%, 0% 100%, from(rgb(240,240,240)), color-stop(0.1, white), color-stop(0.9, white), to(rgb(240,240,240)));
    color: #5C4033;
    -webkit-column-count: 2;
    -webkit-column-gap: 4em;
    -webkit-column-rule: 2px solid rgba(230,230,230,0.5);
    font-size: 16px;
}
.c17 {
    font-family: "Wyld"; 
}
/* Cover */

#cover {
    position: absolute;
    height: 1024px;
    width: 768px;
    background: url("../images/title-image.png") no-repeat top left;
    left: 60px;
    top:60px;
}

#credits {
    text-align:center;
    top:650px;
    position:absolute;
    width:100%;
}
#credits .attribution {
    font-family:Wyld;
    font-style: italic;
    margin-bottom:2px;
}
#credits .creditedname {
    font-family:Wyld;
    font-weight:normal;
    font-size:48px;
    margin-top:0px;
    margin-bottom:30px;
}
#credits .creditedlogo {
    background: url(../images/inkle-logo.png) no-repeat;
    width: 100%;
    height: 50px;
    left: 316px;
    position: absolute;
    top: 197px;
}



#cover .animating {
    opacity: 0;
    -webkit-transition: opacity 1s;
}

#cover h1 {
text-align: left;
width: 100%;
position: absolute;
margin: auto;
top: 230px;
left: 242px;
text-indent: -70px;
font-size: 38px;
letter-spacing: -3px;
line-height: .9em;
color: #222;

}
#cover h1 .animating {
    opacity: 0; 
    -webkit-transition: opacity 2s;
    -webkit-transition-delay: 1s;
}

#cover .drop {
    font-size: 140px;
    letter-spacing: -10px;
    position: relative;
    top: 40px;
    font-style: normal;
    left: 10px;
    font-weight: 100;
}
#cover .drop.animating {
    opacity: 0; 
    -webkit-transition: opacity: 2s;
    -webkit-animation-delay: 0s;
    -webkit-animation-name: flicker;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
}
#cover .second.animating {
    -webkit-animation-delay: 0.5s;
    -webkit-animation-name: flicker;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;   

}
#cover .third {
    font-size: 20px;
    letter-spacing: -1px;
    text-align: center;
    position: absolute;
    top: 360px;
    left: 300px;
    font-style: normal;
    font-weight: 100;
    color: rgb(60,60,60);
}
#cover .third.animating {
    opacity: 0; 
    -webkit-transition: opacity 2s;
    -webkit-transition-delay: 4s;
}

.wobble {
    -webkit-animation-delay: 0s;
    -webkit-animation-name: wobble1;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 10;
}

.wobble1 {

}

.wobble2 {
    -webkit-animation-name: wobble2;
}

.wobble3 {
    -webkit-animation-name: wobble3;
}


@-webkit-keyframes flicker {
    0% {
        color: white;
        opacity: .2;
        text-shadow: 0 0 10px #fff,
        0 0 20px #fff,
        0 0 30px #fff;
    }
    3% {
        opacity: .5;
        text-shadow: 0 0 10px #fff,
        0 0 20px #fff,
        0 0 30px #fff;
    }
    8% {
        opacity: .2;
        text-shadow: 0 0 10px #fff,
        0 0 20px #fff,
        0 0 30px #fff;


    }
    13% {
        opacity: .3;
        text-shadow: 0 0 10px #fff,
        0 0 20px #fff,
        0 0 30px #fff;

    }
    23% {
        opacity: .7;
        text-shadow: 0 0 10px #fff,
        0 0 20px #fff,
        0 0 30px #fff;

    }
    34% {
        opacity: .5;
        text-shadow: 0 0 10px #fff,
        0 0 20px #fff,
        0 0 30px #fff;

    }
    46% {
        opacity: .2;
    }
    90% {
        text-shadow: 0 0 10px #fff,
        0 0 20px #fff,
        0 0 30px #fff,
        0 0 40px #fff,
        0 0 50px #fff,
        0 0 60px yellow,
        0 0 70px blue;
    }
    100% {
        opacity: 1;
        color: #222;
    }
}

@-webkit-keyframes wobble1 {
    0% {
        -webkit-transform: translate3d(1px, 0, 0);
        opacity: .2;
    }
    30% {
        -webkit-transform: translate3d(-4px, 0, 0);
        opacity: 1;
    }
    40% {
        -webkit-transform: translate3d(-3px, 3px, 0);
        opacity: .5;
    }
    60% {
        -webkit-transform: translate3d(-1px, -5px, 0);
        opacity: .7;
    }

    100% {
        -webkit-transform: translate3d(1px, -5px, 0);
        opacity: 1;
    }
}
@-webkit-keyframes wobble2 {
    0% {
        -webkit-transform: translate3d(-1px, 2px, 0);
        opacity: .5;
    }
    30% {
        -webkit-transform: translate3d(4px, -2px, 0);
        opacity: .2;
    }
    40% {
        -webkit-transform: translate3d(-1px, -3px, 0);
        opacity: 1;
    }
    60% {
        -webkit-transform: translate3d(1px, 5px, 0);
        opacity: .2;
    }

    100% {
        -webkit-transform: translate3d(-1px, 2px, 0);
        opacity: 1;
    }
}
@-webkit-keyframes wobble3 {
    0% {
        -webkit-transform: translate3d(1px, 4px, 0);
    }
    30% {
        -webkit-transform: translate3d(4px, -2px, 0);
    }
    40% {
        -webkit-transform: translate3d(3px, -3px, 0);
    }
    60% {
        -webkit-transform: translate3d(1px, -2px, 0);
    }

    100% {
        -webkit-transform: translate3d(-1px,5px, 0);
    }
}







@font-face {
    font-family: "Wyld";
    font-style: italic;
    src: url("../fonts/wyldi.ttf");
}
@font-face {
    font-family: "Wyld";
    font-weight: normal;
    src: url("../fonts/wyld.ttf");
}
.yb { 
	font-family: Youngblood;
	font-weight: normal;
	font-style: normal;
}
.ybv1 { 
	font-family: YoungbloodAlternateOne;
	font-weight: normal;
	font-style: normal;
}
.ybv2 { 
	font-family: YoungbloodAlternateTwo;
	font-weight: normal;
	font-style: normal;
}
@font-face {font-family: 'Youngblood';src: url('../fonts/17283C_0.eot');src: url('../fonts/17283C_0.eot?#iefix') format('embedded-opentype'),url('../fonts/17283C_0.woff') format('woff'),url('../fonts/17283C_0.ttf') format('truetype');}
@font-face {font-family: 'YoungbloodAlternateOne';src: url('../fonts/17283C_1.eot');src: url('../fonts/17283C_1.eot?#iefix') format('embedded-opentype'),url('../fonts/17283C_1.woff') format('woff'),url('../fonts/17283C_1.ttf') format('truetype');}
@font-face {font-family: 'YoungbloodAlternateTwo';src: url('../fonts/17283C_2.eot');src: url('../fonts/17283C_2.eot?#iefix') format('embedded-opentype'),url('../fonts/17283C_2.woff') format('woff'),url('../fonts/17283C_2.ttf') format('truetype');}

/*::selection { background:rgba(0,0,0,0); color:rgba(0,0,0,0); text-shadow: none; } */



/*
    Next page, Previous page "buttons", story reset
*/

.button {
    position: absolute;
    top: 15px;
    
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14pt;
    text-align:center;

	color: white;
	text-shadow: 0 -1px 1px #000;
	
	padding: 3px 5px;
	margin: 5px 3px 3px 0;
	display: inline-block;
	cursor:pointer;
	
}

.button a {
	text-decoration:none;
	color: inherit;

}


.next.button, .previous.button {
    width: 96px; /* 96 - 140 */
    height: 52px; /* 52 - 68 */
    padding-left: 34px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 6px;
}

.next.button {
    right:15px;
    width: 86px;
    padding-left: 10px;
    padding-right: 44px;
    -webkit-transition: opacity 1.5s;
    background: url(../images/next-button.png) no-repeat;
}
.previous.button {
    left:15px;
    background: url(../images/prev-button.png) no-repeat;
}

.next.button:active {
    background: url(../images/next-button-active.png) no-repeat;
}

.previous.button:active {
    background: url(../images/prev-button-active.png) no-repeat;
}

.please_wait{
    top:200px;
    left:268px;
    cursor:normal;
}



.button.scroll.up{
    top:10px;
    left:350px;
    cursor:normal;
    font-size:30px;
    height:60px;
    width:60px;
}
.button.scroll.down{
    top:940px;
    left:350px;
    cursor:normal;
    font-size:36px;
    height:60px;
    width:60px;
} 

/* Custom Scrollbar */


@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1024px) {html {
	overflow-y: auto;
	background-color: transparent;
}}



::-webkit-scrollbar {
	width: 5px;
	height: 10px;
	color:#dddddd;
}
::-webkit-scrollbar-button:start:decrement {
	display: block;
	width: 5px;
	height: 5px;
	background-color: transparent;
}
::-webkit-scrollbar-button:end:increment {
	display: block;
	width: 5px;
	height: 5px;
	background-color: transparent;
}
::-webkit-scrollbar-track:enabled {
	background-color: #dddddd;
	width:5px;
	-webkit-border-radius: 5px;
}
::-webkit-scrollbar-track-piece {
	background-color: transparent;
	border: none;
	margin: 0;
}
::-webkit-scrollbar-thumb:vertical {
	height: 30px;
	background-color: rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.2)
}


/* ANIMATION CLASSES */

.gray {
    color:gray !important;
}
.black {
    color:black !important;
}
.white {
    color:white !important;
}

.darkslategray {
    color:darkslategray !important;
}

.animateColor {
    -webkit-transition: color 2s;
}

.in, .out {
    -webkit-transition: opacity 1s;
}
.slow {
    -webkit-transition-duration: 10s;
}
.in  { 
    opacity:0;
}
.out  { 
    opacity:1;
}
.fadeout {
    opacity:0 !important;
}
.fadein {
    opacity:1 !important;
}

.fade-away {
    -webkit-transition: opacity 1s;    
}

.fade-away-slow {
    -webkit-transition: opacity 2s;    
}


.removed {
    display:none;   !important;
}

.invisible {
    opacity:0; !important;
}

.visible {
    opacity:1; !important;
}

.animate-speed-2 {
    -webkit-transition: opacity 1.5s;
}

.animate-speed-3 {
    -webkit-transition: opacity 2s;
}

.animate-speed-4 {
    -webkit-transition: opacity 2.5s;
}

.animate-speed-5 {
    -webkit-transition: opacity 3s;
}

.animate-speed-6 {
    -webkit-transition: opacity 3.5s;
}

.animate-speed-7 {
    -webkit-transition: opacity 4s;
}

.animate-speed-8 {
    -webkit-transition: opacity 4.5s;
}