html, body {height: 100%; margin: 0; padding: 0; border: none}
body {color: #000; font: 12pt open sans, arial; background: #FFF}
body.modal-open {overflow: hidden}
a {text-decoration: none; padding: 0px}
.content a, .footer a {color: #3370AF}
.content a:active, .content a:hover, .footer a:hover {text-decoration: underline}
.header {position: fixed; top: 0px; width: 100%; height: 50px; margin: 0 auto; color: #FFF; background-image: url(/images/top_bgr.png); background-size: auto 50px; box-shadow: 0 0 6px rgba(0,0,0,0.7); z-index: 11}
.title {position: relative; max-width: 800px;  min-width: 250px; padding: 0 25px; margin: 0 auto; font: 20px Yanone Kaffeesatz, arial; text-align: right}
.menu_top {position: absolute; left: 15px; padding: 15px 10px; cursor: pointer; display: none; z-index: 100}
.logo {position: absolute; left: 0px; max-width: 250px}
.page_title {display: inline-block; padding: 15px 0px; opacity: 0.75; font-weight: 500}
.page_title_text {display: none}
.chapters, .menu_popup {display: none; position: absolute; z-index: 12; overflow: auto; font-size: 18px; font-weight: 300; background: rgba(102, 102, 102, 0.9); backdrop-filter: blur(5px); box-shadow: 0 3px 7px rgba(0,0,0,0.7)}
.chapters {right: 25px; line-height: 150%; max-height: calc(100vh - 50px)}
.menu {position: fixed; top: 50px; width: 230px; max-height: calc(100vh - 50px); font: 18px Yanone Kaffeesatz, arial; font-weight: 300; line-height: 150%; z-index: 10; overflow: auto}
.menu_popup {width: 250px}
.menu_left {left: 0px; height: calc(100vh - 50px); z-index: 5; color: #FFF; background-image: url(/images/map.jpg)}
.menu_c {background-color: rgba(102,102,102,0.8)}
.menu_bottom {width: 100%; height: calc(100vh - 650px); background-image: linear-gradient(rgba(102,102,102,0.8), rgba(102,102,102,0))}
.menu a, .menu_item {color: #FFF}
.menu_header, .menu_item, .menu_item_s, .chapters_item, .chapters_item_s, .menu_text, .menu_image {text-align: left; padding: 5px 20px}
.menu_header {text-transform: uppercase; font: 13px open sans, arial; height: 22px; line-height: 175%; padding-left: 4px; color: #999; background: #3C3C3C}
.adventures {overflow: hidden}
.menu_anim {height: 32px; background-repeat: no-repeat; background-size: 250px; overflow: hidden; opacity: 0.8}
.menu_image {height: 95px; background-image: linear-gradient(rgba(102,102,102,1), rgba(102,102,102,0.1))}
.menu_image:hover {height: 95px; background-image: linear-gradient(rgba(153,153,153,0.7), rgba(153,153,153,0))}
.menu_anim_s {opacity: 1}
.menu_anim_s .menu_image {color: #000; font-weight: 500; background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0))}
.menu_item:hover {background: rgba(180, 180, 180, 0.4)}
.menu_item_s {background-color: #EEE; color: #000}
.main {position: relative; min-height: 100%; opacity: 0}
.chapter_button {position: fixed; top: 50%; margin-top: -65px; max-width: 100px; min-width: 20px; width: 2%; text-align: center; opacity: 0.5}
.chapter_button span {display: block; padding: 50px 5px; background-color: rgba(240, 240, 240, 0.9)}
.chapter_button polyline {fill: none; stroke: #444; stroke-width: 2}
.back {left: 230px}
.next {right: 0px}
.content {position: relative; max-width: 800px; min-width: 250px; padding: 25px; margin: 0 auto; padding-top: 75px; padding-bottom: 75px; font: 100% arial; text-align: justify; line-height: 140%}
.footer {position: relative; margin-top: -25px; font: 13px open sans, arial; text-align: center; padding: 3px; background: #F7F7F7}
.pageheader {font: 13px open sans, arial; font-style: italic; margin: 0px 0px 20px 0px}
.pageheader div:first-child {border-bottom: 1px #AAA solid}
.subheader {font: 32px Caveat, arial; font-weight: bold; text-align: left; line-height: 1; padding-top: 5px; border-bottom: 0px}
.story {position: relative; height: 382px; margin-bottom: -50px; margin-top: 50px; background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.5))}
.story .content {height: 100%; padding: 0 25px}
.story .content div {position: absolute; bottom: 25px; font: 60px Yanone Kaffeesatz, arial; font-weight: 500; color: #FFF; text-align: left; line-height: 80%}
.story .content div span {font-size: 40px; font-weight: 300; line-height: 0.5}
.plan {font-size: 14px; font-weight: bold; font-style: italic; margin: 0px 0px 20px 0px}
.note {font: 13px open sans, arial; color: #444; margin: 20px 0px 20px 0px; line-height: 130%; background: #F3F3F3; padding: 15px 30px 15px 30px}
.special {font-style: italic; margin: 20px 0px 0px 0px;}
.chapter_next {margin: 10px 0px -15px 0px; padding: 5px; font: 13px open sans, arial; font-style: italic; border-top: 1px #AAA solid}
.comment {font: italic 11pt arial; margin-top: 20px}
.caption {position: absolute; width: 100%; bottom: 0px; right: 0px; padding: 0px 10px 5px 10px; text-align: right; font: 11px open sans, arial; color: #FFF; text-shadow: 0 0 5px #000; opacity: 0; background-image: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.5))}
.image, .map iframe {position: relative; max-height: 500px; height: 56.25vw; margin: 20px 0}
.image img {width: 100%; height: 100%}
.map iframe {width: 100%; border: none}
.expand {padding-left: 5px}
.lucent {opacity: 0.75; cursor: pointer}
.clickable {cursor: pointer}
img {border: 0px}
ul, ol {margin: 5px 0px 0px 0px}
li {margin: 0px 0px 10px 0px}
.list_hollow_bullet { list-style-type: circle}
.list_square_bullet { list-style-type: square}
.list_latin_upper { list-style-type: upper-alpha}
.list_latin_lower { list-style-type: lower-alpha}
.list_roman_upper { list-style-type: upper-roman}
.list_roman_lower { list-style-type: lower-roman}