/* General Styles */
 body {
     background-color: #000;
     margin: 0;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     align-items: center;
}

 .content-h {
     display: flex;
     flex-direction: row;
     flex-grow: 1;
     margin-right: 123px;
}

 .content-v {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     margin-right: 123px;
}

/* Navigation Styles */
 .comic-nav ul, .site-nav ul {
     padding: 0;
     margin: 0;
     list-style-type: none;
     display: flex;
     justify-content: center;
}

 .site-nav ul {
     flex-direction: column;
     align-items: center;
}

 .comic-nav ul li {
     margin-right: 15px;
}

 .comic-nav a, .site-nav a {
     display: block;
     position: relative;
     text-indent: -9999px;
     overflow: hidden;
     white-space: nowrap;
}

 .site-nav a {
     margin-bottom: 3px;
}

/* Navigation Buttons */
 a.navfirst {
     height: 99px;
     width: 138px;
     background: url('first.png') no-repeat;
}

 a.navhasfirst:hover {
     background-position: -138px 0;
}

 a.navprev {
     height: 99px;
     width: 136px;
     background: url('previous.png') no-repeat;
}

 a.navhasprev:hover {
     background-position: -136px 0;
}

 a.navnext {
     height: 99px;
     width: 136px;
     background: url('forward.png') no-repeat;
}

 a.navhasnext:hover {
     background-position: -136px 0;
}

 a.navlast {
     height: 99px;
     width: 131px;
     background: url('last.png') no-repeat;
}

 a.navhaslast:hover {
     background-position: -131px 0;
}

 a.navarchive {
     height: 99px;
     width: 130px;
     background: url('archive.png') no-repeat;
}

 a.navarchive:hover {
     background-position: -130px 0;
}

 a.navhome {
     height: 156px;
     width: 116px;
     margin-left: 6px;

    /* nudge to the right a bit for some reason */
     background: url('home.png') no-repeat;
}

 a.navabout, a.navcast, a.navforum, a.navart, a.navextras, a.navlinks, a.navstore {
     height: 96px;
     width: 82px;
}

 a.navabout {
     background: url('about.png') no-repeat;
}

 a.navcast {
     background: url('cast.png') no-repeat;
}

 a.navforum {
     background: url('forum.png') no-repeat;
}

 a.navart {
     background: url('art.png') no-repeat;
}

 a.navextras {
     background: url('extras.png') no-repeat;
}

 a.navlinks {
     background: url('links.png') no-repeat;
}

 a.navstore {
     background: url('store.png') no-repeat;
}

 a.navabout:hover, a.navcast:hover, a.navforum:hover, a.navart:hover, a.navextras:hover, a.navlinks:hover, a.navstore:hover {
     background-position: -82px 0;
}

 a.navadmin {
     height: 137px;
     width: 86px;
     background: url('admin.png') no-repeat;
}

/* Comic and Content Area Styles */
 article.comic {
     background: url('comicbg.png') no-repeat;
     width: 650px;
     padding: 12px 17px;
}

article.comic img {
    width: 650px;
}

/* Post Styles */
 article.post {
     background: url('notebookwhole.png') repeat-y;
     width: 590px;
     padding: 5px 5px 10px 55px;
}

 article.post img {
     max-width: 590px;
}

 .posttitle {
     font-size: 2em;
     margin-bottom: 10px;
     color: #333;
}

 .postmeta {
     font-size: 0.9em;
     color: #666;
     margin-bottom: 20px;
}

/* Table Styles within Articles */
 article table {
     width: 100%;
     border-collapse: collapse;
     font-family: Arial, Helvetica, sans-serif;
     margin-top: 20px;
}

 article th, article td {
     padding: 12px;
     text-align: left;
     border-bottom: 1px solid #ddd;
}

 article th {
     background-color: #f2f2f2;
     font-weight: bold;
}

 article tr:hover {
     background-color: #f9f9f9;
}

 article tr:nth-child(even) {
     background-color: #f5f5f5;
}

 article td a {
     color: #3498db;
     text-decoration: none;
}

 article td a:hover {
     text-decoration: underline;
}

 footer {
     color: white;
}

 .gallery {
     max-width: 590px;
     margin: 0 auto;
}

ul.gallery-images {
     list-style: none;
     padding: 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
}

ul.gallery-images li {
     width: 33%;
     box-sizing: border-box;
     padding: 10px;
     text-align: center;
     justify-content: space-between;
}

ul.gallery-images a {
     text-decoration: none;
     display: block;
     height: 100%;
}

ul.gallery-images img {
     max-width: 100%;
     height: auto;
     display: block;
     margin: 0 auto;
}

ul.gallery-images span {
     display: block;
     margin-top: auto;
}

 .content-v > .post {
     margin-left: 122px;
}

@media (width <= 900px) {
    .content-h, .content-v {
         margin-right: 0;
         padding: 0 10px;
    }
}

/* Mobile Styles */
 @media (width <= 768px) {
     * {
         box-sizing: border-box;
    }

     body {
         overflow-x: auto;
    }

     .content-h {
         flex-direction: column;
    }

     .comic-nav ul, .site-nav ul {
         flex-flow: row wrap;
         align-items: center;
         display: flex;
         justify-content: center;
    }

     .comic-nav ul li, .site-nav ul li {
         margin-right: 0;
         margin-bottom: 10px;
    }

     article.comic, article.post {
         width: 100%;
         padding: 5px;
    }
    
    article.post {
        background-color: white;
    }

     article.comic img {
         width: 100%;
    }

     article.post img {
         max-width: 100%;
         height: auto;
    }

     .gallery li {
         width: 100%;
    }

     .site-nav a {
         margin-bottom: 0;
    }

    /* Scale down the buttons for mobile */
     a.navabout, a.navcast, a.navforum, a.navart, a.navextras, a.navlinks, a.navstore, a.navadmin {
         height: 60px;
         width: 50px;
         background-size: cover;
    }

     a.navhome {
         height: 70px;
         width: 50px;
         margin-left: inherit;
         background-size: cover;
    }

     a.navabout:hover, a.navcast:hover, a.navforum:hover, a.navart:hover, a.navextras:hover, a.navlinks:hover, a.navstore:hover {
         background-position: 0 0;
    }

     .comic-nav ul {
         justify-content: space-between;
         padding: 0;
         margin: 0;
         list-style: none;
    }

     .comic-nav ul li {
         flex: 1;
    }

     a.navfirst, a.navprev, a.navnext, a.navlast, a.navarchive {
         background-size: cover;
    }

     a.navfirst {
         height: 43px;
         width: 60px;
    }

     a.navprev {
         height: 43px;
         width: 59px;
    }

     a.navnext {
         height: 43px;
         width: 60px;
    }

     a.navlast {
         height: 45px;
         width: 60px;
    }

     a.navarchive {
         height: 45px;
         width: 60px;
    }

     a.navhasfirst:hover, a.navhasprev:hover, a.navhasnext:hover, a.navhaslast:hover, a.navarchive:hover {
         background-position: 0 0;
    }

     .content-v > .post {
         margin-left: 0;
    }

     .logo-container img {
         width: 100%;
    }

     .hide-mobile, a.navadmin, a.navforum, a.navstore {
         display: none;
    }
}

.comment2 {
    float: right;
    background-color: #fc9;
}

.comment3 {
    float: right;
    background-color: #F90;
}