/* reset and defaults */
* {
    margin: 0;
    padding: 0;
}
body {
    padding: 0 8px;
}
/* all pages */
#container, h2, h3, h4 {
    font-size: 16px;
    font-weight: normal;
    line-height: 1.25em;
}
#container {
    margin: 0 auto;
    border-bottom: 18px solid #2d2d3c;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #2d2d3c;
    background: white;
    overflow: hidden;
}
#container a {
    color: #54546f;
    text-decoration: none;
    font-weight: bold;
    background: #EEE;
}
#container a:active, #container a:hover {
    outline: 0;
    color: black;
}
img {
    border: 0;
    --ms-interpolation-mode: bicubic;
}
h1 img {
    display: block;
}
#comic {
    display: block;
}
.copy {
    color: #54546f;
}
.footnote {
    margin-top: 4em;
    padding: 4em 5em 2em;
    border-top: 2px solid #2d2d3c;
    font-size: 12px;
    line-height: 1.25em;
}
.pig {
    text-align: center;
    clear: both;
    padding-top: 2em;
}
#container .pig a {
    background: initial;
}
.news {
    margin: 0 10%;
}
.news h3 {
    font-style: italic;
}
.no-js .toggler {
    display: none;
}

.temp {
    width: 120px;
    height: 130px;
}

/* comic archive page */

    .archive table,
    .tags table,
    .storyline {
        width: 100%;
    }
    .archive .date,
    .tags .date,
    .storyline .date {
        white-space: nowrap;
    }
    .archive td,
    .tags td,
    .storyline td {
        vertical-align: top;
    }
    .archive .isyear {
        font-weight: normal;
    }
    .archive .title a {
        display: block;
    }
    .archive .storyline .title {
        font-style: italic;
    }
    .archive .storyline a {
        display: block;
    }
    .storyline .title .normal {
        font-style: normal;
    }
    .archive .yearblock {
        padding: 1em 0;
    }
    .archive .blurb {
        margin-bottom: 1em;
    }
    .archive .minor {
        font-style: normal;
    }
    .js .storyline .blurb {
        display: none;
    }
    .archive .filtered .blurb {
        display: block;
        font-style: normal;
        font-weight: normal;
    }
    .archive .filtered .nonstoryline,
    .archive .filtered .yearrow,
    .archive .filtered .minor {
        display: none;
    }
    #storylinebutton span {
        display: none;
    }
    #storylinebutton span.active {
        display: inline;
    }
    .archive .filtered .storyline .nonmajor:before {
        content: "Short storyline: \A";
        font-weight: normal;
        white-space: pre;
    }

/* tag page */

    .tags .tagtitle {
        display: inline-block;
        font-style: italic;
        margin-top: 1em;
    }
    .tags img {
        width: 100%;
    }

/* contributors page */

    .contributions h2 {
        margin-top: 2em;
    }
    .contributions p {
        margin: 1em 0 0;
    }
    .contributions dt {
        margin: 1em 10%;
    }
    .contributions dd {
        margin: 0 10%;
    }
    .contributions .title {
        font-style: italic;
    }
    .contributions .connav {
        float: right;
        margin-top: -1.25em;
    }

/* individual comic page */

    h1.majorheader img {
        display: none;
    }

    .comic .advance {
        display: none;
    }
    .touch .advance.touch {
        display: inline;
    }
    .no-touch .advance.mouse {
        display: inline;
    }

    .comic .title {
        font-style: italic;
    }

    .comic .storylines,
    .comic .contributions,
    .comic .tags {
        margin: 1em 10%;
        list-style-type: none;
    }
    .comic .storylines li,
    .comic .contributions li,
    .comc .tags li {
        margin-bottom: 0.5em;
    }
    .comic .nonstoryline .title {
        font-style: normal;
    }
    .comic .storyline .normal {
        display: block;
    }

    .js #transcript {
        display: none;
    }
    .js #transcript.active {
        display: block;
    }
    .js #toggler span {
        display: none;
    }
    .js #toggler span.active {
        display: inline;
    }

    #transcript pre,
    .oldcomics pre {
        font-family: "Courier New", Courier, monospace;
        font-size: smaller;
        width: 100%;                          /* specify width  */
        white-space: pre-wrap;                 /* CSS3 browsers  */
        white-space: -moz-pre-wrap !important; /* 1999+ Mozilla  */
        white-space: -pre-wrap;                /* Opera 4 thru 6 */
        white-space: -o-pre-wrap;              /* Opera 7 and up */
        word-wrap: break-word;                 /* IE 5.5+ and up */
        /* overflow-x: auto; */                /* Firefox 2 only */

    }

/* static pages */

    .cast ul{
        margin: 0;
    }
    .cast li {
        width: 47%;
        display: inline-block;
        margin: 0 0 5% 0;
        vertical-align: top;
    }
    .cast li.odd {
        margin-right: 5%;
    }
    .cast ul img {
        width: 100%;
    }
    .cast h2,
    .oldcomics h2 {
        font-weight: bold;
        margin: 1em 0;
    }
    .oldcomics ul {
        margin: 1em 10%;
    }
    .oldcomics li {
        list-style-type: none;
    }
    .oldcomics h3,
    .oldcomics .relic,
    .oldcomics .viewtranscript {
        text-align: center;
    }
    .oldcomics.single .viewtranscript {
        text-align: left;
    }
    .no-js .viewtranscript {
        display: none;
    }
    .no-js .transcript {
        margin: 1em 0;
    }
    .oldcomics h3 {
        margin-top: 2em;
    }
    .oldcomics .relic img,
    .oldcomics.single img {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
        display: block;
    }

/* mobile layout */
h1 {
    margin: 20px 0;
}
p, .fb-like-box {
    overflow: hidden;
    margin: 1em 0;
}
#container,#comic,h1 img {
    width: 100%
}

@media screen and (min-width: 565px) {
    #container,
    h2,
    h3,
    h4 {
        font-size:18px;
    }

    .footnote {
        font-size:14px;
    }

    #container,
    #comic,
    h1 img {
        width:550px;
    }
}