
/*----------------------------------------------------------------------------
**  Shared CSS for most pages.
*/

hr { color: #CCC; height: 2px; background-color: #CCC; border: 0; }

form { margin: 0; padding: 0; }

table { empty-cells: show; }

/* The page footer on most pages. */
table.page_footer {
	width: 100%;
}
td.footer_login {
	white-space: nowrap;
	text-align: right;
}

div.copyright {
	text-align: center;
	font-weight: bold;
}

/* This wraps around the entire page on all pages except the front page and
   admin pages (which use their own CSS). */
div.common_wrapper {
}
table.common_wrapper2 {
	border-collapse: collapse;
}

/* This special size-control div is used to act like min-width, since a lot
   of browsers get min-width wrong right now. */
div.common_wrapper_size_control {
}

/* This wraps around the entire page on the non-front comic pages. */
div.comic_wrapper {
}
table.comic_wrapper2 {
}

table.topbar {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 0.5em;
}
table.topbar td.logo {
	text-align: left;
	padding-bottom: 0.5em;
	white-space: nowrap;
}
table.topbar td.title {
	text-align: left;
	padding-left: 1em;
	font-size: 24pt;
	font-weight: bold;
	width: 100%;
}
table.topbar td.buttons {
	text-align: right;
	padding-bottom: 0.5em;
	white-space: nowrap;
}
table.topbar div.login_status {
	white-space: nowrap;
}

table.topinfo {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 8px;
}
table.topinfo td.title {
	width: 100%;
	text-align: center;
	white-space: nowrap;
	vertical-align: bottom;
}
table.topinfo td.siteupdate {
	width: auto;
	text-align: right;
	white-space: nowrap;
	vertical-align: bottom;
}
table.topinfo td.dropdown {
	width: auto;
	text-align: left;
	white-space: nowrap;
	vertical-align: bottom;
}

/* This is used for displaying debugging info, when debugging is turned on. */
div.debug {
	font-family: Arial,Helv,Helvetica,sans;
	font-size: 10pt;
	font-weight: bold;
	margin: 2px 16px;
	border-left: 8px solid #933;
	border-right: 8px solid #933;
	color: #000;
	background-color: #FCC;
	padding: 4px 16px;
}
div.debug ul {
	margin: 0 24px;
	padding: 0;
}
div.debug li {
	font-weight: normal;
	font-family: Courier,monospace,mono;
	font-size: 9pt;
}

/* This is used for displaying page performance statistics, when that plugin
   has been enabled. */
div.page_stats {
	margin-top: 8px;
	text-align: center;
	font-size: 7pt;
	color: #000;
}

/* By default, no images have borders, which will keep them from
   having ugly boxes around them when they're links. */
img {
	border: 0;
}

/* This box wraps around content on error pages. */
div.errorbox {
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4em;
	margin-bottom: 4em;
	border: 1px solid #99C;
	background-color: #CCF;
	color: #000;
	padding: 0 2.0em 0.667em 2.0em;
}

table.nowrap {
	white-space: nowrap;
}
table.nowrap td, table.nowrap th {
	white-space: nowrap;
}

/*----------------------------------------------------------------------------
**  Display nice-looking tables with alternating-color rows.
*/

table.nice {
	border-collapse: collapse;
}
table.nice th {
	border: 1px solid #99C;
	color: #000;
	background-color: #CCF;
	text-align: left;
	font-weight: bold;
	font-size: 10pt;
	padding: 1px 4px;
}
table.nice tr.odd td {
	border: 1px solid #BBB;
	color: #000;
	background-color: #EEE;
	text-align: left;
	font-size: 10pt;
	padding: 1px 4px;
}
table.nice tr.even td {
	border: 1px solid #BBB;
	color: #000;
	background-color: #DDD;
	text-align: left;
	font-size: 10pt;
	padding: 1px 4px;
}
table.nice tr.sel td {
	border: 1px solid #BBB;
	color: #FF7;
	background-color: #C00;
	text-align: left;
	font-size: 10pt;
	padding: 1px 4px;
}
table.nice tr.odd td.right {
	text-align: right;
}
table.nice tr.even td.right {
	text-align: right;
}
table.nice tr.sel td.right {
	text-align: right;
}
table.nice th.right {
	text-align: right;
}
table.nice th.center {
	text-align: center;
}
table.nice a:link { color: #900; }
table.nice a:visited { color: #900; }
table.nice a:hover { color: #C33; }
table.nice a:active { color: #C33; }

/*----------------------------------------------------------------------------
**  Display image galleries of 100x100-pixel images.
*/

div.gallery {
	text-align:center;
}
div.gallery div.galleryitem {
	display:inline;
	z-index: 1;
}
div.gallery a img {
	vertical-align:bottom;
	z-index: 1;
}
div.gallery div span.container {
	display:table-cell;
	display:inline-block;
	padding:0;
	width:105px;
	height:155px;
	vertical-align:top;
	position:relative;
	z-index: 1;
}
div.gallery div span.container span.picture {
	display:inline-block;
	display:table-cell;
	_line-height:105px;
	height:105px;
	padding:0 !important;
	width:115px;
	vertical-align:bottom;
	z-index: 1;
}
div.gallery div span.container span.picture img {
	border:1px solid #000;
}
div.gallery div span.container span.picture img:hover {
	border:1px solid #666;
}
div.gallery div span.container span.picture::after {
	display:none;
	display:-moz-inline-block;
	content:" ";
	width:115px;
	height:1px;
	overflow:hidden;
	z-index: 1;
}
div.gallery div {
	display:inline;
	z-index: 1;
}
div.gallery span.title {
	display:block;
	z-index: 1;
}
div.gallery span.title a {
	font-size:10pt;
	z-index: 1;
}
div.gallery span.descr {
	display:block;
	font-size:9pt;
	color: #99C;
	z-index: 1;
}
div.gallery div.sel span.container {
	background-color: #C00;
	color: #000;
}
div.gallery div.sel span.descr { color: #FF7; }
div.gallery div.sel a:link { color: #FFF; }
div.gallery div.sel a:visited { color: #FFF; }
div.gallery div.sel a:hover { color: #FFF; }
div.gallery div.sel a:active { color: #FFF; }

/*----------------------------------------------------------------------------
**  Display a calendar.  The sizes and proportions are fairly important here.
*/

div.calendar_gallery {
	text-align:center;
	margin: 0;
}
div.calendar_gallery span.galleryitem {
	display: -moz-inline-box;
	display: inline-block;
	width: 164px;
	height: 191px;
	margin: 5px;
	vertical-align: bottom;
}
span.calendar {
	display: block;
	border: 2px solid #E0E0E0;
	width: 164px;
	padding: 0;
	background-color: #E0E0E0;
}
div.calendar {
	display: block;
	border: 0;
	width: 164px;
	padding: 0;
	background-color: #E0E0E0;
}
table.calendar {
	border: 2px solid #E0E0E0;
	background-color: #E0E0E0;
	color: #000;
	overflow: hidden !important;
	white-space: nowrap;
	text-align: center;
	border-collapse: separate;
	border-spacing: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	table-layout: fixed;
}
table.calendar col { width: 14% !important; }
table.calendar tr { height: 23px !important; padding:0; margin:0; }
table.calendar tr.columns { height: 0 !important; }

table.calendar th {
	font: 9pt Tahoma, Arial, Helv, Helvetica, sans;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
	background-color: #E0E0E0;
	border: 1px solid #E0E0E0;
	padding: 1px 0 2px 0;
}
table.calendar td {
	font: 9pt Tahoma, Arial, Helv, Helvetica, sans;
	font-weight: normal;
	text-align: center;
	white-space: nowrap;
	background-color: #FFF;
	border-top: 1px solid #E5E5E5;
	border-left: 1px solid #E5E5E5;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	color: #E8E8E8;
	padding: 1px 0 2px 0;
}

table.calendar tr.days th {
	color: #777;
	font-weight: bold;
	background-color: #E8E8E8;
	border-bottom: 1px solid #B9B9B9;
	border-right: 1px solid #B9B9B9;
	border-top: 1px solid #D1D1D1;
	border-left: 1px solid #D1D1D1;
}
table.calendar th.month {
	color: #0A0A0A;
	font-size: 10.5pt;
	background-color: #FFFFFF;
	border-top: 1px solid #E5E5E5;
	border-left: 1px solid #E5E5E5;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
}
table.calendar th.prevmonth, table.calendar th.nextmonth {
	color: #777;
	background-color: #E8E8E8;
	border-bottom: 1px solid #B9B9B9;
	border-right: 1px solid #B9B9B9;
	border-top: 1px solid #D1D1D1;
	border-left: 1px solid #D1D1D1;
}

table.calendar td.xnocomic {
	color: #CCC;
}
table.calendar td.xcomic {
	font-weight: bold;
	color: #777;
}
table.calendar td.noday {
	color: #000;
}

table.calendar td.xcomic, table.calendar td.xnocomic, table.calendar td.noday {
	background-color: #E8E8E8;
	border-bottom: 1px solid #B9B9B9;
	border-right: 1px solid #B9B9B9;
	border-top: 1px solid #D1D1D1;
	border-left: 1px solid #D1D1D1;
}

table.calendar td.bg_blk  { font-weight: bold; background-color: #000; }
table.calendar td.bg_red  { font-weight: bold; background-color: #900; }
table.calendar td.bg_brn  { font-weight: bold; background-color: #950; }
table.calendar td.bg_dyel { font-weight: bold; background-color: #660; }
table.calendar td.bg_grn  { font-weight: bold; background-color: #060; }
table.calendar td.bg_daqu { font-weight: bold; background-color: #099; }
table.calendar td.bg_blue { font-weight: bold; background-color: #009; }
table.calendar td.bg_dvio { font-weight: bold; background-color: #909; }
table.calendar td.bg_wht  { font-weight: bold; background-color: #FFF;    }
table.calendar td.bg_pink { font-weight: bold; background-color: #FFE8E8; }
table.calendar td.bg_tan  { font-weight: bold; background-color: #FFF0E0; }
table.calendar td.bg_yel  { font-weight: bold; background-color: #FFC; }
table.calendar td.bg_lgrn { font-weight: bold; background-color: #E8FFE8; }
table.calendar td.bg_laqu { font-weight: bold; background-color: #E8FFFF; }
table.calendar td.bg_lblu { font-weight: bold; background-color: #E8F0FF; }
table.calendar td.bg_lvio { font-weight: bold; background-color: #FFE0FF; }
table.calendar td.bg_lgry { font-weight: bold; background-color: #EEE; }
table.calendar td.bg_dgry { font-weight: bold; background-color: #666; }
table.calendar td.bg_gray { font-weight: bold; background-color: #999; }
table.calendar td.bg_dred { font-weight: bold; background-color: #400; }

table.calendar td.hover { background-color: #FF7; }

table.calendar a { display: block; min-width: 19px; text-align: center; }
table.calendar a:link { text-decoration: none; color: #777; }
table.calendar a:visited { text-decoration: none; color: #777; }
table.calendar a:hover { text-decoration: underline; color: #000; }
table.calendar a:active { text-decoration: underline; color: #000; }

table.calendar td.tx_blk , table.calendar td.tx_blk  a:link, table.calendar td.tx_blk  a:visited { text-decoration: none; color: #000; }
table.calendar td.tx_red , table.calendar td.tx_red  a:link, table.calendar td.tx_red  a:visited { text-decoration: none; color: #900; }
table.calendar td.tx_brn , table.calendar td.tx_brn  a:link, table.calendar td.tx_brn  a:visited { text-decoration: none; color: #950; }
table.calendar td.tx_dyel, table.calendar td.tx_dyel a:link, table.calendar td.tx_dyel a:visited { text-decoration: none; color: #660; }
table.calendar td.tx_grn , table.calendar td.tx_grn  a:link, table.calendar td.tx_grn  a:visited { text-decoration: none; color: #060; }
table.calendar td.tx_daqu, table.calendar td.tx_daqu a:link, table.calendar td.tx_daqu a:visited { text-decoration: none; color: #099; }
table.calendar td.tx_blue, table.calendar td.tx_blue a:link, table.calendar td.tx_blue a:visited { text-decoration: none; color: #009; }
table.calendar td.tx_dvio, table.calendar td.tx_dvio a:link, table.calendar td.tx_dvio a:visited { text-decoration: none; color: #909; }
table.calendar td.tx_wht , table.calendar td.tx_wht  a:link, table.calendar td.tx_wht  a:visited { text-decoration: none; color: #FFF; }
table.calendar td.tx_pink, table.calendar td.tx_pink a:link, table.calendar td.tx_pink a:visited { text-decoration: none; color: #FFE8E8; }
table.calendar td.tx_tan , table.calendar td.tx_tan  a:link, table.calendar td.tx_tan  a:visited { text-decoration: none; color: #FFF0E0; }
table.calendar td.tx_yel , table.calendar td.tx_yel  a:link, table.calendar td.tx_yel  a:visited { text-decoration: none; color: #FFC; }
table.calendar td.tx_lgrn, table.calendar td.tx_lgrn a:link, table.calendar td.tx_lgrn a:visited { text-decoration: none; color: #E8FFE8; }
table.calendar td.tx_laqu, table.calendar td.tx_laqu a:link, table.calendar td.tx_laqu a:visited { text-decoration: none; color: #E8FFFF; }
table.calendar td.tx_lblu, table.calendar td.tx_lblu a:link, table.calendar td.tx_lblu a:visited { text-decoration: none; color: #E8F0FF; }
table.calendar td.tx_lvio, table.calendar td.tx_lvio a:link, table.calendar td.tx_lvio a:visited { text-decoration: none; color: #FFE0FF; }
table.calendar td.tx_lgry, table.calendar td.tx_lgry a:link, table.calendar td.tx_lgry a:visited { text-decoration: none; color: #EEE; }
table.calendar td.tx_dgry, table.calendar td.tx_dgry a:link, table.calendar td.tx_dgry a:visited { text-decoration: none; color: #666; }
table.calendar td.tx_gray, table.calendar td.tx_gray a:link, table.calendar td.tx_gray a:visited { text-decoration: none; color: #999; }
table.calendar td.tx_dred, table.calendar td.tx_dred a:link, table.calendar td.tx_dred a:visited { text-decoration: none; color: #400; }

table.calendar td.tx_blk a:hover, table.calendar td.tx_blk a:active,
	table.calendar td.tx_red  a:hover, table.calendar td.tx_red  a:active,
	table.calendar td.tx_brn  a:hover, table.calendar td.tx_brn  a:active,
	table.calendar td.tx_dyel a:hover, table.calendar td.tx_dyel a:active,
	table.calendar td.tx_grn  a:hover, table.calendar td.tx_grn  a:active,
	table.calendar td.tx_daqu a:hover, table.calendar td.tx_daqu a:active,
	table.calendar td.tx_blue a:hover, table.calendar td.tx_blue a:active,
	table.calendar td.tx_dvio a:hover, table.calendar td.tx_dvio a:active,
	table.calendar td.tx_wht  a:hover, table.calendar td.tx_wht  a:active,
	table.calendar td.tx_pink a:hover, table.calendar td.tx_pink a:active,
	table.calendar td.tx_tan  a:hover, table.calendar td.tx_tan  a:active,
	table.calendar td.tx_yel  a:hover, table.calendar td.tx_yel  a:active,
	table.calendar td.tx_lgrn a:hover, table.calendar td.tx_lgrn a:active,
	table.calendar td.tx_laqu a:hover, table.calendar td.tx_laqu a:active,
	table.calendar td.tx_lblu a:hover, table.calendar td.tx_lblu a:active,
	table.calendar td.tx_lvio a:hover, table.calendar td.tx_lvio a:active,
	table.calendar td.tx_lgry a:hover, table.calendar td.tx_lgry a:active,
	table.calendar td.tx_dgry a:hover, table.calendar td.tx_dgry a:active,
	table.calendar td.tx_gray a:hover, table.calendar td.tx_gray a:active,
	table.calendar td.tx_dred a:hover, table.calendar td.tx_dred a:active
	{ text-decoration: underline; color: #000; }

/*----------------------------------------------------------------------------
**  Styling rules for advertising blocks.
*/

div.advertisement {
	text-align: center;
	background-color: #CCC;
	color: #666;
	font: 8pt Arial, Helv, Helvetica;
	padding-top: 1px;
}
div.ad_vert {
	text-align: center;
	width: 160px;
	overflow: hidden;
	padding: 1px 4px;
	background-color: #CCC;
	color: #000;
}
div.ad_vert_blank {
	text-align: center;
	width: 160px;
	overflow: hidden;
	padding: 4px;
	background-color: #CCC;
	color: #000;
}

div.ad_horz {
	text-align: center;
	width: 100%;
	background-color: #CCC;
	padding: 1px 0;
	margin-bottom: 12px;
}
div.ad_horz_blank {
	text-align: center;
	width: 100%;
	overflow: hidden;
	color: #000;
	background-color: #CCC;
	padding: 1px 0;
	margin-bottom: 0.5em;
}

div.ad_buttons {
	text-align: center;
	padding: 8px 4px;
}
div.ad_buttons div.noborder {
	margin-top: 4px;
	margin-bottom: 4px;
}
div.ad_buttons div.border {
	display: table;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4px;
	margin-bottom: 4px;
}
div.ad_buttons div.border img {
	border: 1px solid #000;
}

span.ad_buttons {
	text-align: center;
	padding: 4px 8px;
}
span.ad_buttons span.noborder {
	margin-left: 4px;
	margin-right: 4px;
}
span.ad_buttons span.border {
	margin-left: 4px;
	margin-right: 4px;
}
span.ad_buttons span.border img {
	border: 1px solid #000;
}

/*----------------------------------------------------------------------------
**  Styling rules for the main comic itself.
*/

table.comic_box td {
	border-collapse: collapse;
}
table.comic_box td {
	vertical-align: top;
	border: 0;
	padding: 0;
}
table.comic_box td.ad_tower {
	padding-left: 12px;
	border: 0;
}
div.comic_box_wrapper {
	padding: 0;
	margin: 0;
	display: table;
	margin-left: auto;
	margin-right: auto;
}
div.comic_box_wrapper2 {
}
div.comic {
	border: 1px solid #000;
	padding: 0;
	margin: 0;
	background-color: #CCC;
float: left;
}
div.comic img {
	vertical-align: top;
}
div.comic_links {
	text-align: center;
}
div.comic_search_text {
	display: none;
}

div.thumb {
	border: 1px solid #000;
	background-color: #000;
	margin: 0;
	display: table;
	margin-left: auto;
	margin-right: auto;
}
div.thumb2 {
	display: block;
	padding: 1px;
}
div.thumb img {
	vertical-align: top;
}

/*----------------------------------------------------------------------------
**  Styling rules for the arc-list dropdown button.
*/

form.selectarc_form {
	padding: 0;
	margin: 0;
	padding-top: 4px;
}

form.selectarc_form select {
	width: 200px;
}

/*----------------------------------------------------------------------------
**  Styling rules for page-top announcements.
*/

/* Announcements */
h2 {
	font-variant: small-caps;
	font-size: 18pt;
	font-weight: bold;
	text-align: center;
	margin: 0;
	padding: 0;
	margin-top: 0.5em;
}

/* Page titles */
h1 {
	font-variant: small-caps;
	font-size: 24pt;
	font-weight: bold;
	margin: 0;
	padding: 0;
}
h1 img {
	vertical-align: middle;
}

/*----------------------------------------------------------------------------
**  Styling rules for the news and news archives.
*/

div.news_wrapper {
	width: 770px;
	margin-left: auto;
	margin-right: auto;
}

h3.news_header {
	text-decoration: underline;
}

div.news_recent {
	font-size: 10pt;
	margin-right: 20px;
	margin-bottom: 1.5em;
}
div.news_recent div.author {
	float: left;
	width: 80px;
	text-align: center;
	font-weight: bold;
	color: #CCF;
}
div.news_recent div.blip {
	text-align: left;
	margin-left: 96px;
	text-indent: -16px;
}
div.news_recent .date {
	font-weight: bold;
	margin-right: 0.5em;
}
div.news_recent div.more {
	padding-bottom: 0;
	padding-top: 0.5em;
	margin-left: 80px;
}
div.news_recent div.news_item_sep {
	clear: left;
	padding: 0.5em 0 0 0;
}

h2.news_archive {
	margin: 0;
	padding: 0;
}

table.news_archive {
	border-collapse: collapse;
	width: 100%;
}
table.news_archive td {
	vertical-align: top;
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: 10pt;
}
table.news_archive td.news_sig {
	text-align: center;
	border-top: 1px solid #CCF;
}
table.news_archive td.news_text {
	text-align: left;
	border-top: 1px solid #CCF;
	padding-left: 0.5em;
	width: 100%;
}
table.news_archive td.news_sig_first {
	text-align: center;
}
table.news_archive td.news_text_first {
	text-align: left;
	padding-left: 0.5em;
	width: 100%;
}
table.news_archive .news_date {
	font-weight: bold;
	margin-right: 0.5em;
}

ul.news_months {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 10pt;
	width: 150px;
}
ul.news_months li {
	display: block;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	text-align: left;
}
ul.news_months span.news_year {
	font-weight: bold;
	font-size: 12pt;
}

/*----------------------------------------------------------------------------
**  Styling rules for artists' comments.
*/

h3.comment_header {
	text-decoration: underline;
}
table.comments {
	font-size: 10pt;
	border-collapse: collapse;
	width: 400px;
}
table.comments td {
	vertical-align: top;
	padding: 0;
	margin: 0;
	padding-bottom: 0.5em;
}
table.comments td.author {
	padding-right: 0.8em;
	text-align: center;
	font-weight: bold;
	color: #CCF;
}
table.comments td.comment {
	text-align: left;
}
div.comments_none {
	font-size: 10pt;
	padding: 0.5em 2em;
}

/*----------------------------------------------------------------------------
**  Styling rules for BBCode.
*/

img.bbcode_smiley {
	vertical-align: bottom;
}

div.bbcode_code {
	font: 10pt monospace;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	border: 1px solid #99C;
	background-color: #EEF;
	padding: 4px 8px;
	white-space: nowrap;
	color: #000;
}

div.bbcode_code {
	font: 10pt monospace;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	border: 1px solid #99C;
	background-color: #EEF;
	padding: 4px 8px;
	white-space: nowrap;
	color: #000;
}

div.bbcode_quote {
	font: 10pt Arial,Helv,Helvetica,sans;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	border: 1px solid #99C;
	background-color: #EEF;
	white-space: wrap;
	color: #000;
}

div.bbcode_quote_src {
	background-color: #CCE;
	padding: 2px 8px 3px 8px;
	font-weight: bold;
}

div.bbcode_quote_text {
	padding: 4px 8px;
}

/*----------------------------------------------------------------------------
**  Display image galleries of 100x100-pixel images.
*/

div.thumb_gallery {
	text-align:center;
	margin: 0;
}
div.thumb_gallery span.galleryitem {
	display: -moz-inline-box;
	display: inline-block;
	width: 110px;
	margin: 0px 5px 5px 5px;
	vertical-align: bottom;
}
div.thumb_gallery span.container {
	display: block;
	width: 110px;
	border: 1px solid #FFF;
	padding: 4px 0px 4px 0px;
}
div.thumb_gallery span.picture {
	display: block;
}
div.thumb_gallery span.picture img {
	border:1px solid #339;
}
div.thumb_gallery span.picture img:hover {
	border:1px solid #66C;
}
div.thumb_gallery span.title {
	display: block;
	font-size:10pt;
}
div.thumb_gallery span.descr {
	display:block;
	font-size:9pt;
	color: #666;
}
div.thumb_gallery span.hover span.container {
	background-color: #FFC;
	color: #000;
	border: 1px solid #CC9;
}
div.thumb_gallery span.sel span.container {
	background-color: #C00;
	color: #000;
	border: 1px solid #D77;
}
div.thumb_gallery span.sel span.descr { color: #FF7; }
div.thumb_gallery span.sel a:link { color: #FFF; }
div.thumb_gallery span.sel a:visited { color: #FFF; }
div.thumb_gallery span.sel a:hover { color: #FFF; }
div.thumb_gallery span.sel a:active { color: #FFF; }

/*----------------------------------------------------------------------------
**  Display image galleries of one image per line, with some associated text.
*/

table.wide_gallery {
	border-collapse: collapse;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
}
table.wide_gallery tr.odd td {
	background-color: #F0F0FF;
	border: 1px solid #CCD;
	padding: 2px 6px;
	color: #000;
}
table.wide_gallery tr.even td {
	background-color: #FFFFFF;
	border: 1px solid #CCD;
	padding: 2px 6px;
	color: #000;
}
table.wide_gallery td.info {
	white-space: nowrap;
}
table.wide_gallery td.text {
	text-align: left;
}
table.wide_gallery tr.hover td {
	background-color: #FFC;
	color: #000;
}
table.wide_gallery tr.sel td {
	background-color: #C00;
	color: #FF7;
}
table.wide_gallery tr.sel a:link { color: #FFF; }
table.wide_gallery tr.sel a:visited { color: #FFF; }
table.wide_gallery tr.sel a:hover { color: #FFF; }
table.wide_gallery tr.sel a:active { color: #FFF; }

/*----------------------------------------------------------------------------
**  Display comic galleries as a list of plain text.
*/

table.list_gallery {
	border-collapse: collapse;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	width: 100%;
}
table.list_gallery tr.odd td {
	text-align: left;
	background-color: #F0F0FF;
	border: 1px solid #CCD;
	padding: 1px 4px;
	color: #000;
	white-space: nowrap;
}
table.list_gallery tr.even td {
	text-align: left;
	background-color: #FFFFFF;
	border: 1px solid #CCD;
	padding: 2px 4px;
	color: #000;
	white-space: nowrap;
}
table.list_gallery td.text {
	width: 100%;
	overflow: hidden;
}
table.list_gallery div.trunctext {
	width: 100%;
	height: 1.2em;
	overflow: hidden;
}
table.list_gallery tr.hover td {
	background-color: #FFC;
	color: #000;
}
table.list_gallery tr.sel td {
	background-color: #C00;
	color: #FF7;
}
table.list_gallery tr.sel a:link { color: #FFF; }
table.list_gallery tr.sel a:visited { color: #FFF; }
table.list_gallery tr.sel a:hover { color: #FFF; }
table.list_gallery tr.sel a:active { color: #FFF; }

/*----------------------------------------------------------------------------
**  Display links for navigating between gallery pages.
*/

div.pagelinks {
	text-align: center;
	margin-bottom: 1em;
}
.pagelinks span.info {
	margin-right: 1.0em;
	white-space: nowrap;
}
.pagelinks span.prev {
	white-space: nowrap;
	font-weight: bold;
}
.pagelinks span.next {
	white-space: nowrap;
	font-weight: bold;
}
.pagelinks span.current_page {
	font-weight: bold;
	margin-right: 0.5em;
	font-size: 11pt;
}
.pagelinks span.ellipsis {
	margin-right: 0.5em;
}
.pagelinks span.links a {
	margin-right: 0.5em;
}

/*----------------------------------------------------------------------------
**  The year- and arc-lists on the archives page.
*/

table.archives_table .years {
	text-align: center;
	font-size: 10pt;
}
table.archives_table .years_header {
	font-weight: bold;
}
table.archives_table table.arcs {
	border-collapse: collapse;
	margin-top: 8px;
}
table.archives_table table.arcs td,
	table.archives_table table.arcs th {
	padding: 0;
	white-space: nowrap;
	text-align: left;
}
table.archives_table table.arcs thead th {
	padding-top: 6px;
	border-top: 1px dotted #999;
	padding-bottom: 2px;
	font-size: 12pt;
}
table.archives_table table.arcs tbody th {
	padding-left: 8px;
	color: #000;
	font-size: 9pt;
	font-weight: normal;
}
table.archives_table table.arcs tbody td {
	color: #666;
	font-size: 9pt;
	padding-left: 0.5em;
	text-align: right;
}
table.archives_table table.arcs tbody td.end {
	padding-left: 0.3em;
	text-align: left;
}
table.archives_table table.arcs tbody tr.selected th,
	table.archives_table table.arcs tbody tr.selected td,
	table.archives_table table.arcs tbody tr.hilight th,
	table.archives_table table.arcs tbody tr.hilight td {
	font-weight: bold;
}
table.archives_table table.arcs tbody tr.last th,
	table.archives_table table.arcs tbody tr.last td {
	padding-bottom: 8px;
}

/*----------------------------------------------------------------------------
**  Overall layout of the archives page.
*/

/* The archives header contains the name (or year) and date (or count) of
   the current arc. */
table.archives_header {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1em;
}
table.archives_header th {
	width: 100%;
	font-size: 14pt;
	font-weight: bold;
	text-align: left;
	text-decoration: underline;
}
table.archives_header td {
	white-space: nowrap;
	color: #999;
}
table.archives_header td span {
	position: relative;
	top: 0.1em;
}

/* This table wraps around everything on the archives page for
   layout purposes:  It guarantees that the tools are on one side
   and the comic gallery is on another. */
table.archives_table {
	width: 100%;
}
table.archives_table td.comicwrapper {
	width: 645px;
	vertical-align:top;
}
table.archives_table td.arcwrapper {
	vertical-align:top;
	padding-top: 0.5em;
	padding-right: 1em;
}
table.archives_table div.stylebar {
	margin-bottom: 1em;
	border: 1px solid #CCC;
	background-color: #EEE;
	padding: 4px 8px;
}
table.archives_table div.stylebar div.countbar {
	white-space: nowrap;
}
table.archives_table div.stylebar div.modebar {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px dotted #999;
	white-space: nowrap;
}
table.archives_table div.arclist {
	margin-bottom: 0.5em;
	border: 1px solid #CCC;
	background-color: #EEE;
	padding: 4px 8px;
}

/*----------------------------------------------------------------------------
**  The smileys help page.
*/

div.smiley_page {
	text-align: center;
}
table.smileys {
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
}
table.smileys td {
	width: 32px;
	height: 32px;
	padding: 6px 6px 8px 6px;
	overflow: show;
	font: 10pt Arial,Helv,Helvetica,sans;
	font-weight: bold;
	text-align: center;
	background-color: #EEF;
	border: 1px solid #99C;
	color: #000;
	vertical-align: bottom;
}
table.smileys td.fixed {
	font: 12pt Courier New,Courier,mono,monospace;
	font-weight: bold;
	padding: 8px 6px 6px 6px;
}
div.smiley_page p.note {
	text-align: left;
}

/*----------------------------------------------------------------------------
**  The BBCode help page.
*/

div.bbcode_page {
	text-align: left;
}
table.bbcode_help {
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
table.bbcode_help td {
	text-align: left;
	vertical-align: top;
	background-color: #EEF;
	border: 2px solid #99C;
	padding: 3px 8px;
	width: 50%;
}
div.bbcode_page code {
	font-size: 9pt;
}
div.bbcode_page var {
	font-style: normal;
	color: #99C;
}
table.bbcode_help th {
	font-weight: bold;
	text-align: left;
	vertical-align: top;
	background-color: #EEF;
	border: 2px solid #99C;
	padding: 3px 8px;
	white-space: nowrap;
}

/*----------------------------------------------------------------------------
**  Styling rules for miscellaneous front-page stuff.
*/

div.page_mode_button {
	text-align: right;
	margin-bottom: 4px;
}

table.front_bottom_content {
	border-collapse: separate;
	border-spacing: 0;
}
table.front_bottom_content h4 {
	margin: 0;
	padding: 0;
}
table.front_bottom_content td.news {
	padding: 0 16px;
	vertical-align: top;
}
table.front_bottom_content td.comments {
	padding: 0 16px;
	vertical-align: top;
}
table.front_bottom_content td.comments div.forcomic {
	padding: 0 0 0 4em;
	margin-bottom: 1em;
	font-size: 8pt;
}
table.front_bottom_content td.vsep {
	padding: 0;
	margin: 0;
	font-size: 1px;
	vertical-align: top;
	height: 100%;
}
table.front_bottom_content td.vsep span {
	display: block;
	width: 5px;
	height: 5px;
}
table.front_bottom_content table.news_recent {
	margin-top: 8px;
}

table.front_main_content {
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
}
table.front_main_content td {
	text-align: center;
}
table.front_main_content tr.bottom_align td {
	vertical-align: bottom;
}
table.front_main_content tr.bottom_pad td {
	padding-bottom: 6px;
}
table.front_main_content tr.top_align td {
	vertical-align: top;
}
table.front_main_content tr.no_bottom_pad td {
	padding-bottom: 0px;
}

table.front_main_content td.nav_spacer {
	width: 8px;
	height: 1px;
}

table.front_main_content td.ad_tower {
	background-color: #EEF;
}

table.front_bottom_nav {
	border-collapse: separate;
	border-spacing: 0;
	margin-top: 3px;
	width: 100%;
}
table.front_bottom_nav td {
	font: 10.5pt Arial,Helv,Helvetica,sans;
	font-weight: bold;
	white-space: nowrap;
	margin: 0;
}
table.front_bottom_nav td.link {
	border: 1px solid #99C;
	background-color: #FFF;
	padding: 2px 4px;
	text-align: center;
	color: #F99;
	cursor: default;
}
table.front_bottom_nav td.space {
	border: 0;
	padding: 0 1px 0 2px;
}
table.front_bottom_nav td.bigspace {
	width: 100%;
	border: 1px solid #99C;
	background-color: #FFF;
	padding: 2px 4px;
	text-align: center;
	color: #000;
	cursor: default;
}

/*----------------------------------------------------------------------------
**  Styling rules for the site's login page.
*/

table.login_wrapper, table.logout_wrapper {
	margin-left: auto;
	margin-right: auto;
	margin-top: 64px;
	margin-bottom: 64px;
	border-collapse: collapse;
	text-align: center;
}
div.login_box, div.logout_box {
	text-align: left;
	border: 1px solid #99B;
	border-top: 1px solid #CCE;
	border-left: 1px solid #CCE;
	background-color: #EEF;
	padding: 12px 24px;
	text-align: center;
}
div.login_box table.login_table {
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
}
div.login_box table.login_table th {
	padding: 0 1em 6px 0;
}
div.login_box table.login_table td {
	padding: 0 0 6px 0;
}
div.login_box div.login_remember {
	margin: 0.5em 0;
}
div.login_box div.login_button {
	margin: 1.2em 0 0.5em 0;
	border-top: 1px dotted #000;
	padding-top: 1.0em;
}
div.login_box div.login_message {
	margin: 0.5em 0 1.2em 0;
	border-bottom: 1px dotted #000;
	padding-bottom: 1.0em;
}
div.login_box div.login_error_message {
	margin: 1.0em 0 0.5em 0;
	border-top: 1px dotted #000;
	padding-top: 1.0em;
	font-weight: bold;
	color: #FF0;
}
div.login_box table.login_table input {
	border: 1px solid #99B;
	border-bottom: 1px solid #CCE;
	border-right: 1px solid #CCE;
	padding: 2px;
	height: 16px;
	vertical-align: center;
	background-color: #FFF;
	color: #000;
	font: 10pt Courier,mono,monospace;
}
