#__phaser
{
    position: fixed;
    top: 75px;
    left: 0px;
    width: 800px;
    height: 480px;
}
#__controls
{
    position: fixed;
    top: 0px;
    left: 0px;
    width: calc(100% - 80px);
    height: 75px;
    padding: 0px 40px;
    background-color: #333333;
    color: #BBBBBB;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13pt;
}
#__controls .controls-left {
    float: left;
    text-align: left;
}
#__controls .controls-right {
    float: right;
    text-align: right;
}
#__controls a:link, #__controls a:visited {
    color: #FAFAFA;
    text-decoration: none;
}
#__controls a:active, #__controls a:hover {
    color: #FF6666;
    text-decoration: none;
}
#__historyContainer
{
    position: fixed;
    top: 75px;
    left: 0px;
    height: 400px;
    width: 100%;
    overflow: auto;
    background-color: #333333;
}
#__history *
{
    max-width: 750px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: #777777 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13pt !important;
}
#__history .__inlineMacro
{
    animation: none;
    color: #777777;
}
.__disabledLink
{
    color: #777777;
    text-decoration: underline;
}
#__content
{
    overflow: auto;
}
#__currentSection
{
position: absolute;
top: 75px;
left: 350px;
    color: #555555;
    animation: 1s textFadeIn;
    height: 100%;
    max-width: 800px;
}
@keyframes textFadeIn
{
    from { color: #FAFAFA; }
    to { color: #555555; }
}
.__inlineMacro
{
    animation: 1s inlineMacroFadeIn;
    color: #a7826a;
}
@keyframes inlineMacroFadeIn
{
    from { color: #FAFAFA; }
    to { color: #a7826a; }
}
h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 56pt;
    text-transform: none;
    margin-top: 28pt;
    margin-bottom: -4pt;
    line-height: 0.9em;
}
h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 38pt;
    text-transform: none;
    margin-top: 19pt;
    margin-bottom: -12pt;
}
h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22pt;
    text-transform: uppercase;
    margin-top: 11pt;
    margin-bottom: -8pt;
}
body {
    background-color: #FAFAFA;
}
p {
    font-family: Arial, Helvetica, sans-serif;
    text-transform: none;
    font-size: 16pt;
    line-height: 1.5em;
}
a:link, a:visited {
    color: #6666FF;
}
a:active, a:hover {
    color: #FF6666;
}
li {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    line-height: 1.5em;
    margin-left: 20px;
}
blockquote p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    font-style: italic;
    line-height: 1.5em;
}
pre {
    font-family: "Courier New", "Courier", monospace;
    font-size: 14pt;
    background-color: #333333;
    color: #BBBBBB;
    line-height: 1.5em;
    padding: 10px 20px;
    max-height: 600px;
    overflow: auto;
}
img {
    margin: 20px 0px;
}
hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    margin-top: 36pt;
    margin-bottom: 36pt;
}

#inkstory
{
position: absolute;
top: 75px;
left: 350px;
    color: #555555;
    animation: 1s textFadeIn;
    height: 100%;
    max-width: 800px;
}
@keyframes textFadeIn
{
    from { color: #FAFAFA; }
    to { color: #555555; }
}
.__inlineMacro
{
    animation: 1s inlineMacroFadeIn;
    color: #a7826a;
}
@keyframes inlineMacroFadeIn
{
    from { color: #FAFAFA; }
    to { color: #a7826a; }
}
h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 56pt;
    text-transform: none;
    margin-top: 28pt;
    margin-bottom: -4pt;
    line-height: 0.9em;
}
h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 38pt;
    text-transform: none;
    margin-top: 19pt;
    margin-bottom: -12pt;
}
h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22pt;
    text-transform: uppercase;
    margin-top: 11pt;
    margin-bottom: -8pt;
}
body {
    background-color: #FAFAFA;
}
p {
    font-family: Arial, Helvetica, sans-serif;
    text-transform: none;
    font-size: 16pt;
    line-height: 1.5em;
}
a:link, a:visited {
    color: #6666FF;
}
a:active, a:hover {
    color: #FF6666;
}
li {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    line-height: 1.5em;
    margin-left: 20px;
}
blockquote p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    font-style: italic;
    line-height: 1.5em;
}
pre {
    font-family: "Courier New", "Courier", monospace;
    font-size: 14pt;
    background-color: #333333;
    color: #BBBBBB;
    line-height: 1.5em;
    padding: 10px 20px;
    max-height: 600px;
    overflow: auto;
}
img {
    margin: 20px 0px;
}
hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    margin-top: 36pt;
    margin-bottom: 36pt;
}