/** MONOLITHIC **/

/* -- BASE -- */

/**
 * This is all the base stuff that appears on almost every (if not every) page.
 * This includes the top logo, the navbar, the footer, and the overall body and
 * page definition.
 */

/*
 * 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:#22bb22;
}

a:active
{
    color:#11ffaa;
}

hr
{
    visibility:hidden;
    clear:both;
}

h1,
h2
{
    text-align:center;
}

/*
 * The top logo box part.
 */
.mainlogobox
{
    text-align:center;
    float:left;
    position:relative;
    left:10%;
    vertical-align:middle;
}

/* Apply CSS spritesheets liberally! */
.siteimage
{
    background-image:url("DoMSiteImages.png");
    background-repeat:no-repeat;
}

.mainlogo
{
    display:inline-block;
    background-position:0px 0px;
    width:428px;
    height:169px;
    margin:auto;
}

p.authorname
{
}

/*
 * The navbar is a horizontally-oriented navigational thingamajig.
 */
ul.navbar
{
    display:block;
    float:right;
    list-style-type:none;
    text-align:left;
    padding:0;
    font-weight:bold;
    max-width:40%;
    padding:10px;
    position:relative;
    right:10%;
    margin:5px;
    vertical-align:middle;
}

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

.navbar li
{
}

/*
 * 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 for further refinement.
 */
.majorcontentbox
{
    width:90%;
    margin:auto;
    border:5px solid #404040;
    padding:5px;
    background-color:#232323;
}

/*
 * navbar and majorcontentbox share the same background and border.
 */
.majorcontentbox, ul.navbar {
    background-color:#232323;
    border:5px solid #404040;
    border-radius:10px;
}

/*
 * A subpagemainmenu is the menu for certain subpages (About and Beans, mostly).
 * It'll be a ul and will have an id.
 */
ul.subpagemainmenu
{
    list-style-type:none;
}

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

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

/*
 * Copyright nonsense and such.
 */
.footerbox
{
    float:right;
    font-size:small;
    text-align:right;
    max-width:40%;
}

.footertext
{
}

/* -- COMICPAGE -- */

/**
 * This file is for any page that bears a comic (index, archives), as well as
 * any page with a calendar thingamajig (same as above, plus the big calendar
 * page).  It also includes the comic nav stuff (prevnext) and the storyline
 * dropdown.
 */

/**
 * The header nonsense.
 */
.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
{
    margin:auto;
}

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

/*
 * This contains the calendar itself.  It'll be in a .bigcalendarcontainer box
 * if it's in big calendar mode.
 */
.calendarbox
{
    display:table-cell;
    vertical-align:middle;
    padding:5px;
}

.bigcalendarcontainer
{
    margin:auto;
    width:90%;
    padding:0.5em;
    border:2px dashed #404040;
    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:60px;
    height:75px;
    display:inline-block;
}

.firstbutton
{
    background-position:-150px -175px;
}

.prevbutton
{
    background-position:-210px -175px;
}

.nextbutton
{
    background-position:-270px -175px;
}

.lastbutton
{
    background-position:-330px -175px;
}

.firstbuttonghosted
{
    background-position:-150px -250px;
}

.prevbuttonghosted
{
    background-position:-210px -250px;
}

.nextbuttonghosted
{
    background-position:-270px -250px;
}

.lastbuttonghosted
{
    background-position:-330px -250px;
}

.separator
{
    width:26px;
    height:75px;
    display:inline-block;
    background-position:-390px -175px;
}

/*
 * 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;
    padding-left:10px;
    padding-right:10px;
    max-width:85%;
    min-width:25%;
    border:3px solid #656565;
    background-color:#141414;
    border-radius:5px;
}

.comicfootnote br
{
    clear:both;
}

.comicfootnoteimage
{
    float:left;
    vertical-align:top;
    margin-right:10px;
    margin-bottom:10px;
    background-position:0px -230px;
    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:#808080;
    color:black;
    text-align:right;
    font-weight:bold;
}

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

.calendarrow a:link
{
    color:#efefef;
}

.calendarrow a:visited
{
    color:#808080;
}

.calendarrow a:active
{
    color:#90d090;
}

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

.calendardaywithcomic
{
    background-color:#a0a0a0;
}

.calendartoday
{
    background-color:#70c070;
    outline:1px #90e090 solid;
}

.calendartoday a:link,
.calendartoday a:visited
{
    color:#206020;
}

/* -- INDEX -- */

/**
 * This is for the index page.  Index is a comicpage, plus it has stuff for the
 * announcements and the news box/links on the bottom.
 */

/* 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;
    border:2px solid #404040;
    background-color:#232323;
    margin-left:auto;
    margin-right:auto;
    max-width:75%;
    text-align:center;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
}

.announcebox li
{
    margin:5px;
}

.uberannounce-plain
{
    background-color:#747400;
}

.uberannounce-alert
{
    background-color:#740000;
    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;
}

/*
 * News!
 */
.newsbox
{
    display:block;
    border:5px solid #404040;
    background-color:#232323;
    padding:5px;
    width:85%;
    margin:auto;
    min-height:568px;
}

/*
 * Those silly links on the bottom.
 */
.extrabox
{
    margin:auto;
    font-size:small;
    padding:10px;
    text-align:center;
    clear:both;
}

.extrabox hr
{
    display:none;
    max-width:0px;
    clear:none;
}

.extrabox br
{
    clear:both;
}

.footerlist
{
    display:inline-block;
    list-style-type:none;
    padding-left:2em;
    padding-right:2em;
    margin:auto;
    vertical-align:middle;
    text-align:left;
}

.footerimage
{
    width:16px;
    height:16px;
    position:relative;
    top:2px;
    display:inline-block;
    margin-right:4px;
}

#rss-full .footerimage,
#rss-lite .footerimage
{
    background-position:-80px -172px;
}

#json .footerimage
{
    background-position:-112px -172px;
}

#google-group .footerimage
{
    background-position:-32px -172px;
}

#exclaimlink .footerimage
{
    background-position:0px -172px;
}

#ljlink .footerimage,
#lj-feed .footerimage
{
    background-position:-64px -172px;
}

#gpluslink .footerimage
{
    background-position:-48px -172px;
}

#bwslink .footerimage
{
    background-position:-16px -172px;
}

.footerlist li#bwslink
{
    text-decoration:line-through;
}

#mastodonlink .footerimage
{
    background-position:-96px -172px;
}

.rsslinks
{

}

.onlinecomicslinks
{
    /* This one's sort of a wart due to linking requirements. */
}

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

.sociallinks
{

}

/* -- BEANS (and books) -- */

ul#beansmainmenu
{

}

.beanstopnavlevel1,
.beanstopnavlevel2,
.beanstopnavlevel3,
.beansbottomnavlevel1,
.beansbottomnavlevel2
{
    list-style-type:none;
}

.beanstopnavlevel2
{
    font-weight:bold;
}

.beanstopnavlevel3
{
    font-weight:normal;
}

.beansbottomnav
{
    font-size:smaller;
}

h2.beanssubheader
{
    font-weight:bold;
    text-align:center;
    padding:5px;
    border:2px solid #404040;
    background:#303030;
}

.bookitem
{
    display:table;
/*    background-color:#885555; */
    margin-top:10px;
    margin-bottom:10px;
    width:100%;
}

.beansitem
{
    display:flex;
    margin-top:10px;
    margin-bottom:10px;
    width:100%;
    align-items:stretch;
}

.beansthumbieandtitle
{
    display:flex;
/*    background-color:#558855; */
    width:170px;
    vertical-align:middle;
    text-align:center;
    padding:10px;
    border:2px dashed #404040;
    flex-direction:column;
    justify-content:center;
}

.bookthumbieandtitle
{
    display:table-cell;
    width:170px;
    vertical-align:middle;
    text-align:center;
    padding:10px;
    border:2px dashed #404040;

}

.beansthumbie img
{
    border:3px solid #404040;
    margin:5px;
    width:128px;
    height:128px;
}

.bookthumbie img
{
    border:3px solid #404040;
    margin:5px;
    width:371px;
    height:484px;
}

.beansthumbie img.small
{
    /* Some thumbies show up in two-or-three-thumbie bursts.  We're best off
       using the small ones there. */
    width:64px;
    height:64px;
}

.beanstitle,
.booktitle
{
    font-size:larger;
}

.beanssubtitle
{
    font-size:smaller;
}

.beansauthor
{
    font-style:italic;
}

.bookdescription
{
    display:table-cell;
/*    background-color:#555588; */
    vertical-align:middle;
    padding:10px;
}

.beansdescription
{
    vertical-align:middle;
    padding:10px;
    flex-grow:1;
    align-self:center;
}

.beansfilelist
{
    display:flex;
/*    background-color:#558888; */
    text-align:center;
    padding:10px;
    vertical-align:middle;
    border:2px dashed #404040;
    white-space:nowrap;
    margin:0;
    align-items:center;
}

ul.beansfilelist
{
    list-style-type:none;
    font-weight:bold;
}

.beansfilelist li
{
    display:inline-block;
    margin:3px;
    vertical-align:middle;
    white-space:nowrap;
}

ul.beansfileitem
{
    padding:0;
    font-weight:normal;
    vertical-align:middle;
}

.beansfileitem li
{
    display:block;
    white-space:nowrap;
}

.beansfiledate
{
    white-space:nowrap;
    font-weight:normal;
    font-style:italic;
}

.beansfileinfo
{
    white-space:nowrap;
    font-weight:normal;
    margin:3px;
}

/* Hey, it's the new Beans buttons! */
.beansfileitem a,
.beansfileinfo a
{
    display:inline-block;
    padding:16px;
    background-color:#008888;
    color:white;
    font-weight:bold;
    text-decoration:none;
    font-family:sans-serif;
    margin:10px 4px;
    min-width:48px;
}

.beansfileitem a:link,
.beansfileitem a:visited,
.beansfileinfo a:link,
.beansfileinfo a:visited
{
    color:white;
}

.beansfileitem a:hover,
.beansfileinfo a:hover
{
    background-color:#22aaaa;
}

.beansfileitem a:active
.beansfileinfo a:active
{
    background-color:#225555;
}

/* Special button colors for the color background tests. */
a.beansfileitemyellow
{
    background-color:#888800;
}

a.beansfileitemyellow:active
{
    background-color:#555522;
}

a.beansfileitemyellow:hover
{
    background-color:#aaaa22;
}

a.beansfileitemred
{
    background-color:#880000;
}

a.beansfileitemred:active
{
    background-color:#552222;
}

a.beansfileitemred:hover
{
    background-color:#aa2222;
}

a.beansfileitemgreen
{
    background-color:#008800;
}

a.beansfileitemgreen:active
{
    background-color:#225522;
}

a.beansfileitemgreen:hover
{
    background-color:#22aa22;
}

a.beansfileitemblue
{
    background-color:#000088;
}

a.beansfileitemblue:active
{
    background-color:#222255;
}

a.beansfileitemblue:hover
{
    background-color:#2222aa;
}

/* Skip cyan, it's the same as the default color. */

a.beansfileitemorange
{
    background-color:#886400;
}

a.beansfileitemorange:active
{
    background-color:#22aa22;
}

a.beansfileitemorange:hover
{
    background-color:#aa8822;
}

a.beansfileitemnight
{
    background-color:#0b3333;
}

a.beansfileitemnight:active
{
    background-color:#0a1f1f;
}

a.beansfileitemnight:hover {
    background-color:#105c5c;
}

/* -- CAST -- */

ul.castmainmenu,
.castbottomnav
{
    text-align:center;
    margin:8px;
    padding:0px;
    clear:both;
}

li.castcategory
{
    font-weight:bold;
    font-size:larger;
    display:inline-block;
    list-style-type:none;
    padding:5px;
    margin:10px;
    vertical-align:middle;
    border:3px solid #656565;
    background-color:#141414;
    border-radius:5px;
}

ul.castbottomnavlevel1
{
    font-weight:bold;
    display:inline-block;
    list-style-type:none;
    padding:5px;
    margin:10px;
    vertical-align:middle;
    border:3px solid #656565;
    background-color:#141414;
    border-radius:5px;
}

ul.castbottomnavlevel2
{
    font-weight:bold;
    font-size:larger;
    list-style-type:none;
    padding:0px;
}

/*
li.castcategory#castvillage
{
    border-color:#101140;
    background-color:#090924;
}

li.castcategory#castcastlelandis
{
    border-color:#400a0a;
    background-color:#240606;
}

li.castcategory#castbreznial
{
    border-color:#0b400b;
    background-color:#062406;
}

li.castcategory#castelsewhere
{
    border-color:#403e05;
    background-color:#242303;
}

li.castcategory#castlocations
{
    border-color:#0a403b;
    background-color:#062422;
}

li.castcategory#castother
{
    border-color:#290a40;
    background-color:#170624;
}

li.castcategory#castfourthwall
{
    border-color:#141414;
    background-color:#656565;
}
*/

ul.castlist,
ul.castbottomnavlevel3
{
    font-weight:normal;
    font-size:medium;
    list-style-type:none;
    padding:0;
}

.castpicbox
{
    vertical-align:middle;
    border:3px solid #656565;
    background-color:#141414;
    border-radius:5px;
    float:left;
    margin:20px;
}

.castpicbox.hasnopic
{
    background-color:transparent;
    border:none;
    float:none;
    margin:0;
}

.casttext p:first-of-type:first-letter
{
    font-size:200%;
    line-height:100%;
}

.castpic
{
    text-align:center;
}

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

.casttext
{
    margin:20px;
}

/* -- ABOUT -- */

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

.abouttopnavlevel1,
.abouttopnavlevel2,
.abouttopnavlevel3,
.aboutbottomnavlevel1,
.aboutbottomnavlevel2
{
    list-style-type:none;
}

.abouttopnavlevel2
{
    font-weight:bold;
}

.abouttopnavlevel3
{
    font-weight:normal;
}

.aboutbottomnav
{
    font-size:smaller;
}

.aboutinnerblock
{
    margin-top:10px;
    margin-bottom:10px;
}

.aboutheader
{
    margin-right:10%;
    margin-left:10px;
}

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

.aboutcontent
{
    margin-left:5%;
    margin-right:10px;
}

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

.newmarker
{
    font-weight:bold;
    font-size:larger;
    font-variant:small-caps;
    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-size:larger;
    font-weight:bold;
}

.pokeytext
{
    /* HELLO SMALL CHILD!  ENJOY MY RADICAL AND FUNKY-FRESH CSS STYLE! */
    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;
    border:2px solid #404040;
    background-color:#232323;
    margin-left:auto;
    margin-right:auto;
    max-width:75%;
    text-align:center;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
}

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

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

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

/*
 * Let's just use the cast pages as a template.
 */
.bookpicbox
{
    vertical-align:middle;
    border:3px solid #656565;
    background-color:#141414;
    border-radius:5px;
    float:left;
    margin:20px;
    padding:4px;
}

.bookpic
{
    text-align:center;
}

.bookbox br
{
    clear:both;
}

.bookpagetext
{
    margin:20px;
}

.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;
    border:3px solid #656565;
    background-color:#141414;
    border-radius:5px;
}

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

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

}

.smallbooklink
{
    font-size:small;
}

.bookorderblock
{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

.bookprice
{
    font-size:large;
}

.bookinfolink
{
    text-align:center;
}

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