/** SPAMTASTIC **/

/* -- BASE -- */

/*
 * Basic body and link definition.  Fortunately, this is relatively simple for
 * now.
 */
body
{
    background-color:#000000;
    color:#ffffff;
}

a:link
{
    color:#00FFFF;
}

a:visited
{
    color:#007700;
}

a:active
{
    color:#11ffaa;
}

hr
{
    width:80%;
    height:2px;
    clear:both;
}

h1,
h2
{
    text-align:center;
}

/*
 * The top logo box part.
 */
.mainlogobox
{
    text-align:center;
}

.mainlogo
{
    display:inline-block;
    background-image:url("DoMLogo2021Web.png");
    background-repeat:no-repeat;
    width:428px;
    height:169px;
    margin:auto;
}

p.authorname
{
}

/*
 * The navbar is a horizontally-oriented navigational thingamajig.
 */
ul.navbar
{
    list-style-type:none;
    text-align:center;
    padding:0;
    font-weight:bold;
}

ul.navbar a
{
    text-decoration:none;
}

.navbar li
{
    display:inline;
}

.navbar li:after
{
    content:" -- ";
}

ul.navbar:before
{
    content:" -- ";
}

/*
 * A majorcontentbox is the main box-like entity used in most things that are
 * NOT the comic.  Like the about screens, contacts, etc, etc.  Each one of
 * these has an extra class attached to it (i.e. aboutbox, beansbox) for more
 * exact refinement.
 */
.majorcontentbox
{
    width:90%;
    margin:auto;
}

.majorcontentbox hr
{
    height:1px;
}

/*
 * A subpagemainmenu is the menu for certain subpages (mostly About and Beans).
 * This will be a ul and will also have an id to narrow things down.
 */
ul.subpagemainmenu
{

}

.leadinglink
{
    font-weight:bold;
    text-decoration:underline;
}

.lastupdated
{
    font-weight:bold;
    font-style:italic;
}

/*
 * Copyright nonsense and such.
 */
.footerbox
{
    font-size:small;
    text-align:center;
}

.footertext
{
}


/* -- COMICPAGE -- */

/*
 * Miscellaneous one-shot stuff!
 */
.sliceofcomic,
.asithappened
{
    text-align:center;
    font-weight:bold;
}

.sliceofcomic:before
{
    content:"A slice of comic for ";
}

.asithappened:before
{
    content:"The comic, as it happened on ";
}

.sliceofcomic:after,
.asithappened:after
{
    content:":";
}

/*
 * The comicnavbox is the next/prev/etc buttons, the dropdown, and the
 * calendar.
 */
.comicnavbox
{
    display:table;
    vertical-align:middle;
    margin:auto;
}

.comicnavboxtop
{
    display:none;
}

.comicnavboxmain
{
    display:table-cell;
    vertical-align:middle;
    padding:5px;
}

.calendarbox
{
    display:table-cell;
    vertical-align:middle;
    padding:5px;
}

.bigcalendarcontainer
{
    margin:auto;
    width:90%;
    text-align:center;
}

.bigcalendarcontainer .calendarbox
{
    display:inline-block;
    padding:1.5em;
}

.bigcalendarstorylineblock
{
    text-align:center;
}

/* The nextprev set contains the nav buttons */
ul.nextprev
{
    list-style-type:none;
    text-align:center;
    padding:0;
}

.nextprev li
{
    display:inline;
    padding-left:2px;
    padding-right:2px;
}

.storylinedropdown
{
    text-align:center;
}

/* All eight possible nav buttons. */
.navbutton
{
    width:125px;
    height:50px;
    display:inline-block;
    background-repeat:no-repeat;
}

.firstbutton
{
    background-image:url("first_day.png");
}

.prevbutton
{
    background-image:url("previous_day.png");
}

.nextbutton
{
    background-image:url("next_day.png");
}

.lastbutton
{
    background-image:url("last_day.png");
}

.firstbuttonghosted
{
    background-image:url("first_day_ghosted.png");
}

.prevbuttonghosted
{
    background-image:url("previous_day_ghosted.png");
}

.nextbuttonghosted
{
    background-image:url("next_day_ghosted.png");
}

.lastbuttonghosted
{
    background-image:url("last_day_ghosted.png");
}

.separator
{
    width:60px;
    height:50px;
    display:inline-block;
    background-image:url("DoMSiteSpacer.png");
    background-repeat:no-repeat;
}

/*
 * The whole POINT of the site is the comic, so we may as well make sure we're
 * displaying it right.  Note that INSIDE the box, the contents are anybody's
 * guess, as we don't put CSS styles on the comic files themselves, and we can
 * add arbitrary HTML in separate files.
 */
.comicbox
{
    /*
    margin-left:auto;
    margin-right:auto;
    */
}

.comicimage
{
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.comicfootnote
{
    display:block;
    clear:both;
    margin-left:auto;
    margin-right:auto;
    max-width:85%;
    min-width:25%;
}

.comicfootnote br
{
    clear:both;
}

.comicfootnoteimage
{
    float:left;
    vertical-align:top;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:10px;
    background-image:url("DoMComment.png");
    width:136px;
    height:170px;
}

/*
 * The calendar has a huge mess of things that can be fiddled with.  Because, I
 * mean, it's a calendar.
 */
.calendar
{
    text-align:center;
    border-spacing:0;
}

.calendartoprow
{
    color:white;
    text-align:center;
}

.calendarmonthnav
{
    vertical-align:super;
    font-size:80%;
}

.calendarcurmonth
{
    font-size:90%;
    font-weight:bold;
}

.calendarrow
{
    background-color:#d0d0d0;
    color:black;
    text-align:right;
    font-weight:bold;
}

.calendarnextmonthday,
.calendarprevmonthday
{
    background-color:#b0b0b0;
}

.calendardaywithcomic
{
    background-color:#e0e0e0;
}

.calendardaywithcomic a
{
    display:block;
    width:100%;
    height:100%;
}

.calendartoday
{
    /* Remember, "today" is also a "withcomic", so we inherit the a stuff. */
    background-color:white;
}

/* -- INDEX -- */

/* The announcements show up on index.html directly under the logo image and
 * the sitenav area.  News announcements are just the date and quick blurb of
 * the latest proper news, uber-alerts are urgent news, and uber-plains are
 * anything else.  All of this is bounded in an announcebox.
 */

ul.announcebox
{
    list-style-type:none;
    max-width:80%;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.announcebox li
{
    margin:5px;
}

.uberannounce-plain
{
    color:#FFFF00;
}

.uberannounce-alert
{
    color:#FF0000;
    font-weight:bold;
    font-size:large;
}

.newsannounce
{
}

.newsannounce .header,
.booktext .header
{
    color:#ffff00;
    font-weight:bold;
}

/* This also applies to the date headers in the news area. */

.newsannounce-date
{
    color: #FFFF00;
    font-weight:bold;
    font-size:large;
}

/*
 * The bottom box has the news and such.
 */
.bottombox
{
    margin:auto;
    width:85%;
    border:2px;
    border-style:ridge;
    padding:3px;
}

/*
 * News!
 */
.newsbox
{
    display:table-cell;
    vertical-align:top;
    border-right-width:2px;
    border-top-width:0px;
    border-left-width:0px;
    border-bottom-width:0px;
    border-style:ridge;
    padding:5px;
}

/*
 * Those silly links on the right side.
 */
.extrabox
{
    display:table-cell;
    vertical-align:top;
    text-align:center;
    font-size:small;
    padding:5px;
}

.footerlist
{
    list-style-type:none;
    text-align:center;
    padding:0;
    margin:0;
}

.rsslinks
{

}

.onlinecomicslinks
{
    /* This one's sort of a wart due to linking requirements. */
    text-align:center;
}

.programlinks li
{
    display: inline;
    margin-left: 16px;
    margin-right: 16px;
}

.sociallinks
{

}

.footerimage
{
    display:none;
}

/* -- BEANS -- */

ul#beansmainmenu
{

}

.beanstable
{
    margin:auto;
}

h2.beanssubheader
{
    text-align:center;
}

.beansitem
{
    display:inline-block;
    text-align:center;
    width:31%;
    min-width:200px;
    vertical-align:middle;
    margin:5px;
}

.beanstable br
{
    display:none;
    clear:none;
}


.beanstitle
{
    text-decoration:underline;
}

.beanssubtitle
{
    font-size:smaller;
}

.beansthumbie img
{
    /* Monolithic has the larger thumbies, but with the smaller text of
       Spamtastic, the small size works better.  Still the same images, though.
       No matter what Jick thinks, browsers made in the past 12 years CAN scale
       images better than Netscape 4 could. */
    width:64px;
    height:64px;
}

.beansauthor
{
    
}

.beansdescription
{
    font-size:smaller;
}

.beansfilelist
{
    font-size:smaller;
    font-style:italic;
    margin-top:1em;
    margin-bottom:1em;
}

.beansfilelist br
{
    display:inline;
}

ul.beansfilelist
{
    list-style-type:none;
    padding:0;
}

.beansfilelist li
{
    font-weight:bold;
}

ul.beansfileitem
{
    display:inline;
    list-style-type:none;
    padding:0;
}

.beansfileitem li
{
    display:inline;
    font-weight:normal;
}

.beansfiledate
{
    margin-top:0.5em;
    margin-bottom:0.5em;
}

.beansfileinfo
{
}

.beansbottomnav
{
    font-size:smaller;
}

.beansbottomnavlevel1
{
    font-weight:bold;
}

.beansbottomnavlevel2
{
    font-weight:normal;
}

/* -- CAST -- */

li.castcategory
{
    font-weight:bold;
    font-size:larger;
}

.castlist
{
    font-weight:normal;
    font-size:medium;
}

.castpic
{
    text-align:center;
}

.castname
{
    text-align:center;
    font-size:x-large;
    font-weight:bold;
}

/* -- ABOUT -- */

/*
 * The main menu.
 */
ul#aboutmainmenu
{
    
}

.aboutheader
{
}

.aboutheader h3
{
    color:#00ff77;
    font-weight:bold;
}

.abouttopnav
{
    font-size:smaller;
}

ul.abouttopnavlevel2
{
    font-weight:bold;
}

ul.abouttopnavlevel3
{
    font-weight:normal;
}

.aboutbottomnav
{
    font-size:smaller;
}

.aboutbottomnavlevel1
{
    font-weight:bold;
}

.aboutbottomnavlevel2
{
    font-weight:normal;
}

.aboutversion
{
    font-weight:bold;
    text-decoration:underline;
}

.newmarker
{
    font-weight:bold;
    font-size:larger;
    text-transform:uppercase;
    color:red;
}

/* -- CONTACTS -- */

.contactsheader
{

}

.contactsitem
{
    font-weight:bold;
}

/*
 * This one isn't in the list, so it sort of stands out.
 */
.contactsemail
{
    color:#ffff00;
}

.gplustail
{
    font-size:smaller;
}

/* -- LINKS -- */

.linksheader
{
    font-weight:bold;
}

.pokeytext
{
    /* YES */
    font-style:italic;
    font-weight:bold;
    font-family:monospace;
    text-decoration:underline line-through;
}

/* -- ERROR -- */

h1.errorheader
{
    color:red;
}

.errornumber
{
    color:yellow;
}

.errorbox
{
    
}

/* -- BOOK RELATED STUFF -- */
/* (some of which may be temporary) */

/*
 * The book announcement box needs to look similar to the normal announcement,
 * just with a few small tweaks to make it behave like a table instead of a list
 * of sorts.
 */
ul.announcebook
{
    list-style-type:none;
    max-width:80%;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    padding-left:0px;
}

ul.announcebook li
{
    display:table-row;
}

.bookimage
{
    display:table-cell;
    border:2px black solid;
    vertical-align:middle;
}

.booktext
{
    display:table-cell;
    vertical-align:middle;
}

/*
 * This will look sort of like a cast page.  Not quite, though, as we'll use an
 * order box similar to what's in Monolithic, not like the cast lists.
 */
.bookpic
{
    text-align:center;
}

.bookorderbox
{
    text-align:center;
    margin:8px;
    padding:0px;
    clear:both;
}

ul.bookorderlist
{
    display:inline-block;
    list-style-type:none;
    padding:5px;
    margin:10px;
    vertical-align:middle;
}

ul.bookorderlist a
{
    text-decoration:none;
}

.bigbooklink
{
    font-weight:bold;
    font-size:x-large;
    white-space:nowrap;
}

.bookprice
{
    font-size:large;
}

.smallbooklink
{
    font-size:small;
}

.bookitem
{
    display:inline-block;
    text-align:center;
    width:48%;
    min-width:250px;
    vertical-align:top;
    margin:10px;
}

.bookthumbie img
{
    width:247px;
    height:322px;
}

.booktitle
{
    text-decoration:underline;
}

.bookdescription
{
    font-size:smaller;
}

.bookinfolink
{
    text-align:center;
}

/* -- MASTOWIDGET -- */
#mw_widget
{
    width:400px;
    height:520px;
    border:0;
    margin:24px;
    float:right;
}