@font-face {
    font-family: "Fira Sans";
    src: url("/fonts/FiraSans-Regular.ttf");
}

h1, p, body {
    font-family: "Fira Sans", sans-serif;
    color: #C8B2A2;
    line-height: 1.4em;
}

a, a:visited, a:hover, a:active {
    font-family: "Fira Sans", sans-serif;
    color: #F6DCC8;
    line-height: 1.4em;
}

.warning {
  color: #CE623F;
}

#container {
    width: 500px;
    margin: 0 auto;
    padding-top: 4em;
}

#container h1, h2 {
    padding-bottom: 1em;
}

#container p {
    padding-bottom: 1em;
}

#container #links {
    padding-bottom: 1em;
}

#container #links li {
    display: inline-block;
    font-weight: bold;
}

#container #links li:after {
    content: "|";
    margin: 0 3px;
}

#container #links li:last-child:after {
    content: "";
}

#card-info {
    background-color: #000;
    position: absolute;
    height: 150px;
    left: 0;
    right: 0;
    bottom: 0;
    color: #C8B2A2;
    padding-top: 25px;
    padding-left: 10%;
}

#card-info p {
    padding-bottom: 10pt;
}

#card-info .name {
    width: 6em;
    display: inline-block;
    vertical-align: middle;
}

#loader-container {
    display: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-position: center 50%;
    background-image: url(/reader/web-images/loader.gif);
    background-repeat: no-repeat;
    background-color: #000;
}

#loader {
    color: #C8B2A2;
    text-align: center;
    position: relative;
    top: 40%;
}

#credits {
    width: 600px;
    margin: 50px auto;
}

#logos {
    width: 100%;
    text-align: center;
}

#logos img {
    margin: 10px;
}

#credits p {
    padding-top: 10px;
    font-size: 0.8em;
}

#about-images img {
    width: 100%;
}

html body {
    background-color: #000;
}

html.viewer body,
html.viewer {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#container iframe {
    margin-bottom: 2em;
}