/* ADVANCED OPTIONS -- CHANGE AT YOUR OWN RISK */

body {
    text-align: center;
}

div#container {
    display: inline-block;
    text-align: center;
    margin: 15px;
    padding: 30px;
}

div img {
    max-width: 100%;
}

div#banner {
    margin-bottom: 15px;
}

div#links-bar {
    margin-bottom: 15px;
    padding: 5px;
    display: flex;
    justify-content: center;
}

a.link-bar-link {
    transition-duration: 0.2s;
}

a.link-bar-link:hover {
    transition-duration: 0.2s;
}

span.link-bar-separator {
    margin: 0 10px;
}

div#comic-page {
    margin-bottom: 20px;
}

div#navigation-bar {
    display: flex;
    margin: 0 auto 20px auto;
    font-weight: bold;
    justify-content: center;
}

a.navigation-button, a.navigation-button-disabled {
    padding: 0 20px;
}

div#blurb {
    display: inline-block;
    text-align: left;
    max-width: 100%;
    margin-bottom: 20px;
    padding: 15px 15px 10px 15px;
}

h1#page-title {
    margin-top: 5px;
    margin-bottom: 10px;
}

h3#post-date {
    margin-top: 1em;
    margin-bottom: 0.25em;
}

hr#post-body-break {
    margin: 1em 0;
}

div#archives {
    display: inline-block;
    text-align: left;
}

div#powered-by {
    font-size: 0.7em;
}

div.archive-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

div.archive-thumbnail {
    width: 100px;
    margin: 10px;
    text-align: center;
}

h2.archive-section {
    text-align: center;
}

div.archive-thumbnail-page {
    margin-bottom: 2px;
}

div.archive-thumbnail-title {
    font-weight: bold;
    margin-bottom: 5px;
}

div.archive-thumbnail-post-date {
    font-style: italic;
    font-size: 0.8em;
}

div#jump-to {
    margin-bottom: 15px;
}

a.chapter-links {
    margin-right: 10px;
}

div#load-older {
    margin-bottom: 15px;
}

div.cast-member {
    max-width: 100%;
    margin: 30px;
}

img.cast-member-picture {
    max-width: none;
    margin: 10px;
}

div.cast-member-bio {
    text-align: left;
    margin: 5px;
}

/* Accordion */

div.accordion {
    margin: 5px;
}

button.accordion-button {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
}

.active, button.accordion-button:hover {
    background-color: #ccc;
}

button.accordion-button:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

div.accordion-panel {
    text-align: left;
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

/* Transcripts */

#transcripts-container {
    width: 100%
}

#transcript-panel {
    padding: 0 10px 10px 10px;
}

.transcript {
    display: none;
}

#language-list {
    vertical-align: top;
    padding: 10px;
}

#language-select {
    width: 100%;
}

/*
The CSS settings below are just a copy of the same settings found in your_content/themes/default/css/stylesheet.css
This is so that it's not required that you include a stylesheet.css in every theme. If you're using this file as a 
template to create your own CSS file, feel free to delete the settings below, or reuse them as you want.
 */

body {
    font-family: 'PT Sans', sans-serif;  /* The font of all the text on all pages */
    color: black;  /* The color of the font of most of the text on your website */
    background-color: white;  /* The color of the background behind everything */
    background-image: url("../../your_content/images/background_image.png");  /* The pattern on the background. Delete to change to a solid color
                                                       or replace with your own image to tile across your background. */
}

a {
    color: maroon;  /* The color of the hyperlinks */
}

div#container {
    max-width: 1000px;  /* The width of the main box that contains all content on the pages */
    background-color: white;  /* The background color of the main box */
    box-shadow: 5px 5px 10px lightgray;  /* If you change the background color of website, play with this or else it will look bad. */
}

div#links-bar {
    background-color: indianred;  /* The background color of your links bar */
}

a.link-bar-link {
    color: white;  /* The color of the links in your links bar */
    font-weight: bold;  /* Delete this to unbold the links in your links bar*/
    text-decoration: none;  /* Delete this line to put underlining on the links in your links bar */
}

a.link-bar-link:hover {
    color: black;  /* The color of the links in your links bar while the cursor is hovering over them */
}

a.navigation-button {
    color: maroon;  /* Color of the navigation bar hyperlinks */
    font-size: 2em;  /* Size of the navigation bar hyperlinks */
    text-decoration: none;  /* Delete this if you want your navigation links to be underlined */
}

a.navigation-button-disabled {
    color: gray;  /* Color of the disabled navigation bar hyperlinks */
    font-size: 2em;  /* Size of the disabled navigation bar hyperlinks */
    text-decoration: none;  /* Delete this if you want your disabled navigation links to be underlined */
}

div#blurb {
    background-color: lightgray;  /* The color of the "blurb" box that contains post title, post date, tags, etc. */
    width: 75%;  /* The maximum width of the blurb box. */
    border-left: 3px dotted lightslategray;  /* If you change the background color of the blurb, play with these two lines or else it will look bad */
    border-right: 3px dotted lightslategray;
}

h1#page-title {
    color: black;  /* Color of the page title */
    font-size: 3em;  /* Font size of the post title */
}

div#post-date {
    font-weight: bold;  /* Delete this to unbold the post date */
}

div#storyline, div#characters, div#tags {
    font-style: italic;  /* Delete this to unitalicize the tags */