/* Myth Journals
   Design (c) James Wheare
   
   Reset
   --------------------------------------------------------
   http://yui.yahooapis.com/2.3.1/build/reset/reset-min.css
   
   Canvas
   ---------------------------
   Text        #242627
   Background  #fff
   
   Links
   ------------------------------
               Journal    Codex
   Normal      #881f04    #446326
   Hover       #b0472c    #638f38
   Visited     #470000    #2a3d18 */

body {
    font: normal normal normal 80%/1.6 "Verdana", sans-serif;
    color: #242627;
    background: #fff;
}
small {
    font-size: 90%;
}
a {
    color: #881f04;
    text-decoration: underline;
}
a:visited {
    color: #470000;
}
a:hover {
    color: #b0472c;
}
body#codex a {
    color: #446326;
}
body#codex a:visited {
    color: #2a3d18;
}
body#codex a:hover {
    color: #638f38;
}

em {
    font-style: italic;
}
strong {
    font-weight: bold;
}

li {
    margin: 0 0 0.8em 0;
}

h2 {
    margin: 20px 0;
    font: bold 2em/1 "Hiroshige", "Georgia", sans-serif;
}

/* Head
   ---------------------
   Text          #242627
   Light text    #626567
   Section bg    #fafbfa
   Journal bg    #fff
   Border        #d5d7d7 */

a#skip {
    position: absolute;
    top: 5px;
    right: 10px;
}

#sections {
    position: relative;
    height: 62px;
    background: #fafbfa url("images/title.gif") no-repeat 0 0;
}
#sections h1 {
    overflow: hidden;
    height: 0;
    font-size: 0;
    text-indent: -9000em;
}
#sections p {
    position: absolute;
    top: 50%;
    left: 0;
    margin: -0.4em 0 0 0;
    width: 980px;
    height: 0.86em;
    color: #d5d7d7;
    font: normal 1em/1 "Georgia", sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: right;
}
#sections p a {
    margin: 0 0.5em;
    color: #626567;
    text-decoration: none;
}
#sections p a:hover {
    color: #242627;
}
#sections p strong {
    color: #b0472c;
}
#sections p strong a {
    color: #242627;
}

body#codex #sections {
    background-position: 0 -62px;
}
body#codex #sections p strong {
    color: #638f38;
}

/* Nav
   -------------------------------
                Journal    Codex
   Text         #470000    #2a3d18
   Bg           #b0472c    #638f38
   Border       #6f1700    #4e6f2c
   Link         #ffdf80    #ceffa9
   Darker bg    #881f04    #446326 */

#navBar {
    position: relative;
    z-index: 1;
    border-top: 1px solid #6f1700;
    color: #470000;
    background: #881f04 url("images/nav_border.gif") repeat-x bottom left;
    font-size: 0.8em;
}
#navBar a {
    padding: 0.9em 0.9em 0.9em 0.9em;
    color: #ffdf80;
    text-decoration: none;
}
#navBar a:hover {
    color: #fafbfa;
    background: #881f04;
}

body#codex #navBar {
    border-color: #4e6f2c;
    color: #2a3d18;
    background-color: #446326;
    background-image: url("images/nav_border_codex.gif");
}
body#codex #navBar a {
    color: #ceffa9;
}
body#codex #navBar a:hover {
    background: #446326;
}
body#codex p#crumbs a:hover {
    border-color: #2a3d18;
}

p#crumbs {
    padding: 0.7em 0;
    width: 980px;
    border-bottom: 6px solid #6f1700;
    background: #b0472c;
}
p#crumbs a:hover {
    border-bottom: 6px solid #470000;
}
p#crumbs span {
    padding: 0.9em 0.9em 0.9em 0.9em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fafbfa;
}
p#crumbs span#indexHead {
    padding: 0 0 0 13px;
    background-image: url("images/index_collapse.gif");
    background-repeat: no-repeat;
    background-position: 1px 70%;
}
#navBar.expand p#crumbs span#indexHead {
    background-image: url("images/index_expand.gif");
    background-position: 0 80%;
}
p#crumbs span#indexHead a {
    color: #fafbfa;
}

body#codex p#crumbs {
    border-color: #4e6f2c;
    background: #638f38;
}

p#crumbs span#noteToggle {
    padding: 0;
    float: right;
}
span#noteToggle a.hidden {
    display: none;
}

#index {
    display: none;
    position: absolute;
    width: 460px;
    margin: -6px 0 0 20px;
    border: 1px solid #6f1700;
    border-width: 0 1px 1px 1px;
    background: #b0472c;
}
#index.half,
#index.half ol {
    width: 255px;
}
#navBar.expand #index {
    display: block;
}
#index p {
    margin: 0;
    padding: 0.3em 0 0.3em 3em;
}
#index p.current {
    padding: 0.3em 0.5em 0.3em 3.5em;
    color: #000;
    background: #6f1700;
}
#index ol {
    float: left;
    width: 230px;
    margin: 10px 0;
}
#index ol li {
    margin: 0 0 0.1em 3em;
    padding: 0.3em 0;
    list-style: decimal outside;
}
#index ol li.current {
    padding: 0.3em 0.5em;
    color: #000;
    background: #6f1700;
}
#index p.current span,
#index ol li.current span {
    color: #eaecec;
    font-weight: normal;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
#index a {
    padding: 0.5em;
}

body#codex #index {
    border-color: #4e6f2c;
    background: #638f38;
}
body#codex #index ol li.current {
    background: #4e6f2c;
}

/* Content
   ------- */

#content {
    position: relative;
    width: 960px;
    padding: 0 20px;
}

ol.entryList {
    float: left;
    width: 275px;
}
ol.entryList li {
    margin-left: 2em;
    list-style: decimal outside;
}
ol.entryList dd {
    font-size: 0.9em;
}
ol.entryList dd.location {
    color: #626567;
}

img.gameIcon {
    margin: 0 5px -7px 0;
}
ul.gameList img.gameIcon {
    margin-bottom: -10px;
}

/* Entries
   ------- */

#journalHead {
    position: relative;
    float: left;
    margin-left: -20px;
    padding: 0 0 0 20px;
}
#journalHead h2 {
    margin-bottom: 0.3em;
}
#journalHead h3 {
    margin: 0;
    color: #626567;
    font: normal 0.87em/1.7 "Georgia", sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
#journalHead p#narration {
    position: absolute;
    top: 50%;
    left: 670px;
    width: 290px;
    height: 24px;
    margin: -12px 0 0 0;
}

#main {
    float: left;
    clear: left;
    position: relative;
    z-index: 0;
    width: 670px;
    margin-left: -20px;
    padding: 0 330px 20px 0;
    border: 1px solid #d5d7d7;
    border-width: 0 1px 1px 0;
    background: #eaecec;
}
#main h3 {
    margin: 0 0 2em 0;
    color: #b0472c;
    font-size: 0.85em;
    font-weight: bold;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
#main h3 a {
    letter-spacing: normal;
    text-transform: none;
}
#main p {
    margin: 0 0 1.6em 0;
}

/* Main journal column (entry, notes, cutscene)
   -------------------------------------------- */

#journalMain {
    float: left;
    padding: 20px 0 0 20px;
    border-right: 1px solid #d5d7d7;
    background: #fff;
}
#journalMain a.map {
    text-decoration: none;
    font-size: 10px;
}

#worldMap {
    display: none;
    position: absolute;
    top: 0;
    left: 20px;
    width: 640px;
    height: 480px;
}
#worldMap.tfl {
    background: url("../media/map/tfl-map.jpg") no-repeat 0 0;
}
#worldMap span.place {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border: 1px solid red;
}

/* Notes
   ----- */

#notes {
    float: right;
    width: 149px;
    margin: -2px 20px 0 -169px;
    font-size: 0.9em;
    line-height: 1.7;
    color: #626567;
}
#notes img.number {
    margin-top: -3px;
    vertical-align: middle;
}
#notes h3 {
    margin: 0;
}
#notes li {
    margin: 0 0 1.8em 0;
    padding: 3px;
    list-style: none;
}
#notes li.active {
    color: #242627;
    background: #ffa;
}
#notes a {
    text-decoration: none;
}
ol#noteList.hidden {
    display: none;
}

/* Entry
   ----- */

#entry {
    float: left;
    width: 460px;
    margin-right: 189px;
}
#entry p {
    text-indent: 0.5em;
}
#entry a.hidden {
    color: #242627;
    text-decoration: none;
}
#entry a.mapHidden {
    display: none;
}

/* Sidebar
   ------- */

#sidebar {
    float: right;
    width: 290px;
    margin-right: -330px;
    padding: 20px;
    border-top: 1px solid #d5d7d7;
}

#sidebar h3 {
    margin: 0 0 1em 0;
}
#sidebar p {
    margin: 0 0 2em 0;
    font-size: 0.9em;
}

#sidebar img.overhead,
#pregame img {
    margin-bottom: 1.3em;
}
#pregame blockquote {
    margin: 0 15px;
    font: normal 1.2em/1.5 "Georgia", serif;
}
#pregame blockquote p {
    text-indent: -1em;
}
#pregame blockquote span {
    margin: 0 0.5em;
    color: #626567;
}

#dialogue blockquote {
    margin: 0 0 0.5em 0;
    padding: 0 0 0.5em 0;
    border-bottom: 1px solid #d5d7d7;
    font-size: 0.9em;
}
#dialogue blockquote p {
    margin: 0;
}
#dialogue blockquote cite {
    margin: 0.5em 0 0 0;
    font-style: normal;
}
#dialogue blockquote p {
    color: #626567;
    font-size: 1em;
}

#sidebar p#description {
    font-style: italic;
}

/* End (postgame, journey map)
   --------------------------- */

#end {
    float: left;
    width: 670px;
    padding-top: 18px;
    background: url("images/fold.gif") no-repeat top right;
}

#end p.postgameMusicHint {
    margin: 10px 20px -10px 20px;
    text-align: center;
}

#end div.postgame {
    position: relative;
    overflow: hidden;
    width: 640px;
    height: 480px;
    margin: 20px 0 0 20px;
    border: 4px solid #fff;
}
#end div.postgame h3 {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 4px 6px 4px 4px;
    border: 1px solid #b0472c;
    border-width: 0 1px 1px 0;
    background: #fff;
    color: #242627;
    font: bold italic 1.3em "Hiroshige", "Georgia", serif;
    letter-spacing: normal;
    text-transform: none;
}
#end div.postgame h3 span {
    color: #b0472c;
}
#end div.postgame span.loading {
    position: absolute;
    top: 7px;
    right: 7px;
    font-size: 11px;
    line-height: 1;
    font-weight: bold;
    color: #fff;
}

#win_loss_music {
    height: 0;
    overflow: hidden;
}

/* Main menu screen
   ---------------- */

#menu #content {
    width: 100%;
    padding: 0;
    background: #030703;
}
#menu #content.sb {
    height: 768px;
}
#menu #content.tfl {
    height: 480px;
}

#menu #menuImage {
    position: absolute;
    top: 0;
    left: 0;
}

#menu #musicSwitch {
    position: absolute;
    top: 3px;
    left: 3px;
    font: italic 1.1em "Hiroshige", "Georgia", serif;
    color: #ccc;
}
#menu #musicSwitch a {
    color: #888;
    font-weight: bold;
    outline: 0;
}
#menu #musicSwitch a.current,
#menu #musicSwitch a:hover {
    color: #f9f7fb;
}

/* Footer
   ------ */
   
#footer {
    clear: both;
    float: left;
    width: 100%;
    margin: 20px 0 0 0;
    color: #626567;
    background: #eaecec;
    font-size: 0.85em;
}
#footer p.copyright {
    float: left;
    padding: 0.7em;
}
#footer p.thanks {
    float: right;
    padding: 0.7em 0 0.7em 0.7em;
    font-weight: bold;
    letter-spacing: 0.4em;
    text-transform: uppercase;
}
#footer p.thanks a {
    margin: 0 0 0 -0.6em;
    padding: 0.9em 0.5em;
    color: #242627;
    text-decoration: none;
}
#footer p.thanks a:hover {
    color: #000;
    background: #d5d7d7;
}