body {
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color : #333333;
    text-align:center;
    min-width:980px;
/*     background-color: #ffba15; */
    background-color: white;
    margin:0;
    padding:0;
}


#container {
    min-width: 980px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}


#navbar {
    background-color: #e6e6e6;                            
	background-image: url('/icons/nav_menu.png');
    background-repeat: repeat-x;
    height: 30px;
    font-weight: bold;
    color: white;
    min-width: 980px;   
    width: 100%;
}

#navmenu {
    background-color: transparent;
    width: 100%;
}

#header {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: block;
}



.logobar {/* place background image in top logo bar */
    background:#ffba15;
    background-image: url('/icons/header_bg.png');
    background-repeat: repeat-x;
    height: 100px;
}

.logobar_archive {/* place background image in top logo bar */
    background: grey;
    background-image: url('/icons/header_bg_archives.png');
    background-repeat: repeat-x;
    height: 100px;
}

.menubar {/* place background image */
	background-color: #e6e6e6;                            
    min-width: 980px;
	/* width: 100%; */
    background-image: url('/icons/nav_menu.png');
    background-repeat: repeat-x;
    height: 30px;
    border: 0px;
    font-weight: bold;
    color: white;
    position:relative;
}

.divider {/* place background image */
	background-color: #e6e6e6;                            
    min-width: 980px;
	/* width: 100%; */
    background-image: url('/icons/divider.png');
    background-repeat: repeat-x;
    height: 30px;
    border: 0px;
    font-weight: bold;
    color: white;
    position:relative;
}


.comic_body {
    margin: 0 auto;
    display: block;
/*     background-color: #ffba15; */
}

.darktext {
    font-size: 12px;
    color : #333333;
}



.defnif_loginbar {/* place background image */
    background-repeat: no-repeat;                            
    background-image: url('/images/fireandrain/defnif_login.gif');
    height: 54px;
    width: 500px;
    border: 0px;
}

.dotn_login_banner {/* place background image */
    font-weight: bold;
    font-variant: small-caps;
    color: black;
    border: 0px;
    padding: 6px;
    margin-top:3px;
    margin-bottom: 3px;
    width: 510px;
}

.ui-dark-glass {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#555555 url(/icons/dark_glass_ui.png) repeat-x scroll 50% 50%;
    border:1px solid #666666;
    color:#EEEEEE;
    font-weight:bold;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:medium;
}

.calendar a {
    text-decoration: none;
}


.nav, .nav ul {/* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav a {
    display: block;
    width: 12em;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    border-bottom: 0px;
}

.nav a:hover {
    display: block;
    width: 12em;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    border-bottom: 0px;
}

.nav li {/* all list items */
    float: left;
    width: 12em; /* width needed or else Opera goes nuts */
}

.nav li ul {/* second-level lists */
/*     position: absolute; */
    border: 1px solid #A4A4A4;
    background: #DEDEDE;
    padding-top: 6px;
    padding-bottom: 10px;
    width: 12em;
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

.nav li ul li {
    background: #FAFAFA;
    min-height: 20px;
    border-top: 1px solid #A4A4A4;
    border-bottom: 1px solid #A4A4A4;
    padding-top: 2px;
    padding-bottom: 2px;
    width: 12em;
}

.nav li ul li a:hover {
    background: #DEDEDE;
    min-height: 20px;
    border-bottom: 0px;
    width: 12em;
}

.nav li:hover ul, .nav li.sfhover ul {/* lists nested under hovered list items */
    left: auto;
}

.blog {
    padding: 25px;
}

.account {
    padding-bottom: 10px;
    padding-top: 10px;
    margin: 15px;
    font-size: 12px;
}

.blog_entry {
    padding: 10px;
    border-width: thin;
    border-style: dashed;
    margin: 15px;
    font-size: 12px;
    color : #333333;
    background: #F9F9F9;
}

.blog_title {
    min-height: 20px;
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 12px;
    background: url('/images/holidayjuly4/blog_squares.gif') no-repeat top right;
}

.blog_byline {
    text-align: right;
    font-size: 10px;
}

.blog_comments_link {
    text-transform: lowercase;
}

.blog_header {
    border-width: thin;
    border-style: dashed;
    font-size: large;
    font-weight: bold;
    padding-bottom: 10px;
    padding-top: 10px;
    margin: 15px;
    border-color: #FF8888;
    text-align: center;
    background-color: #FFDFDF;
}

.banner {
    padding: 10px;
    border-width: thin;
    border-style: dashed;
    font-size: large;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    border-color: #FF8888;
    text-align: center;
    background-color: #FFDFDF;
    max-width: 600px;
   
}

.banner_subtitle {
    font-style: normal;
    font-weight: normal;
    font-size: small;
}



.headline {
    padding: 10px;
    text-shadow: 0px 0px;
    border-width: thin;
    border-style: ridge;
    font-size: small;
    /*font-weight: bold;*/
    border-color: blue;
    text-align: center;
    background-color: #66ccff;
    max-width: 600px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto; 
}

.headline_subtitle {
    font-style: normal;
    font-weight: normal;
    font-size: small;
}

.blog_header_subtitle {
    font-style: normal;
    font-weight: normal;
    font-size: small;
}



.blog_pager {
    padding: 5px;
    border-width: thin;
    border-style: dashed;
    margin: 15px;
    text-align: center;
    font-size: 12px;
    background: #F9F9F9;
}

.defenders_navigation {
    padding-bottom: 10px;
    padding-top: 10px;
    margin: 15px;
    text-align: center;
    font-size: 12px;
    background: #F9F9F9;
    border-width: thin;
    border-style: dashed;
}

#comic_navigation {
    padding-bottom: 10px;
    padding-top: 10px;
    margin: 15px;
    width: 760px;
    text-align: center;
    margin: 0 auto;
    float: none;
}
.blog_entry img {
    padding: 6px 10px 6px 0px;
    border-style: none;
    max-width: 825px;
}

.blog_image_left {
    float: left;
    padding: 6px 10px 6px 0px;
}

.blog_image_right {
    float: left;
    padding: 6px 10px 6px 0px;
}

.error {
    text-shadow: 0px 0px #e6e6e6;
    color: red;
    font-variant: small-caps;
    font-size: medium;
    font-weight: bold;
}

.unpaid {
    font-weight: bold;
/*
    word-wrap: normal;
    word-break: loose;
*/
    text-transform: lowercase;
    text-shadow: 0px 0px #e6e6e6;
    color: red;
    font-variant: small-caps;
    font-size: small;
    bottom:5px;
    display:inline;
    margin: 0 auto;
    position:relative;
}

.account fieldset {
    padding-bottom: 10px;
    margin: 15px;
    font-size: 12px;
    color : #333333;
    background: #F9F9F9;
}

.account h3 {
    text-decoration: underline overline;
    font-variant: small-caps;
}

.datafield {
    display: block;
    padding: 0 10px 15px 0;
}

.label {
    font-weight: bold;
    padding-bottom: 3px;
}

.compendium {
    padding-bottom: 10px;
    padding-top: 10px;
    margin: 15px;
}
.compendium_nav {
    margin-top: 63px;
    float: left;
    border-width: thin;
    border-style: dashed;
    padding: 10px;
    width: 15%;
    background: #F9F9F9;
}
.compendium_content {
    padding: 10px;
    float: left;
    width: 80%;
}

.clear {
    clear: both !important;
}

.clearleft {
    clear: left !important;
}

.clearright {
    clear: right !important;
}

.compendium h1, h2, h3 {
    font-variant: small-caps;
    text-align: center;
}


.compendium_entry img {
    padding: 6px 10px 6px 0px;
    border-style: none;
    max-width: 650px;
}

.compendium_shield {
    vertical-align: top;
    float: left;
}

.compendium_image_left {
    float: left;
    padding: 6px 10px 6px 0px;
}

.compendium_image_right {
    float: left;
    padding: 6px 10px 6px 0px;
}


.compendium_entry {
    padding: 10px;
    border-width: thin;
    border-style: dashed;
    margin: 15px;
    font-size: 12px;
    color : #333333;
    background: #F9F9F9;
}

.compendium_title {
    min-height: 20px;
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 12px;
    background: url('/images/holidayjuly4/compendium_squares.gif') no-repeat top right;
}

.compendium_byline {
    text-align: right;
    font-size: 10px;
}



img {
    border-left-style: none;
    border-bottom-style: none;
    border-right-style: none;
    border-top-style: none;
}

.comicbooks {
    padding-bottom: 10px;
    margin: 15px;
}
.comicbooks_nav {
    font-size: 90%;
    text-align: left;
    list-style-type: square;
    float: left;
    border-width: thin;
    border-style: dashed;
    width: 12.5%;
    background: #F9F9F9;
}
.comicbooks_content {
    float: right;
    width: 75%;
}

.comicbooks_desc {
    text-align: center;
}

.comicbooks_comic {
    text-align: center;
}

.nav_firstpage_on {
    background: url('/images/fireandrain/vcr0.gif') no-repeat top right;
}
.nav_prevpage_on {
    background: url('/images/fireandrain/vcr1.gif') no-repeat top right;
}
.nav_nextpage_on {
    background: url('/images/fireandrain/vcr2.gif') no-repeat top right;
}
.nav_lastpage_on {
    background: url('/images/fireandrain/vcr3.gif') no-repeat top right;
}

.nav_firstpage_off {
    background: url('/images/fireandrain/vcr4.gif') no-repeat top right;
}

.nav_prevpage_off {
    background: url('/images/fireandrain/vcr5.gif') no-repeat top right;
}

.nav_nextpage_off {
    background: url('/images/fireandrain/vcr6.gif') no-repeat top right;
}

.nav_lastpage_off {
    background: url('/images/fireandrain/vcr7.gif') no-repeat top right;
}

.content {
    position: relative;
    width: 980px;
    background-color : #FFFFFF;
    padding-top: 0px;
    padding-bottom: 5px;
    margin: auto;
    display: block;
}

.comic_header {
    display: block;
    text-align: center;
    margin: 0 auto;
}

.comic_content {
    text-align: center;
    margin: 0 auto;
    width: 90%;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 0px;
    padding-right: 0px;
}

.comic_popup {
    padding: 10px;
    max-width: 600px;
    border-width: thin;
    border-style: groove;
    font-size: small;
    /*font-weight: bold;*/
    border-color: #FF8888;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFDFDF;
}

.popup_subtitle {
    font-style: normal;
    font-weight: normal;
    font-size: small;
}

.defenders_shield {
    margin: 0 auto;
    display: block;
    width: 45px;
    height: 60px;
    background-image: url('/icons/dotn_info_shield.png');
    background-repeat: no-repeat;
}

.logo {
    background-repeat: no-repeat;
    float: left;
    width: 504px;
    height: 88px;
    margin-left: 5px;
    padding-bottom: 10px;
    background-image: url('/icons/new-sluggy-logo.png');
}

.logo_archive {
    background-repeat: no-repeat;
    float: left;
    width: 504px;
    height: 88px;
    margin-left: 5px;
    padding-bottom: 10px;
    background-image: url('/icons/new-sluggy-logo.png');
}

#comic_news {
    float: left;
    display: block;
    background-color: white;
    width: 80%;
}



.comic_news_ad {
    float: left;
    display: block;
    width: 180px;
    padding-top: 0px;
}
#news_block {
    text-align: center;
    margin: 0 auto;
    width: 98%;
    min-height: 1200px;
    background-color: white;
}

.comic_news_story {
    text-align: justify;
    padding: 10px;
    font-size: 12px;
}

.comic_news_header {
    background: #CCCCCC;
    padding: 10px;
    margin: 10px;
}

.comic_news_article {
    margin: 0 auto;
    display: block;
    float: left;
    text-align: left;
}

#comic_navigation_menu {
    display: block;
    padding-left: 15px;
    padding-right: 0px;
    float: left;
    font-size:85%;
    max-width: 275px;
}

.defnif_login {
    margin: 10px;
    float: left;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 525px;
}
.defnif_login_noads {
    margin: 50px;
    float: left;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 525px;
}


.defnif_logged_in {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    text-align: center;
    width: 525px;
}

.defnif_logged_in_noads {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 10px;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    float: left;
    text-align: center;
    width: 525px;   
}


.comicbooks-buttons {
    width:300px;
    float:none;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


.fg-button { outline: 0; margin:0 4px 0 0; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; font-size:10px; }
.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }

a.fg-button { float:left; }

/* remove extra button width in IE */
button.fg-button { width:auto; overflow:visible; }

.fg-button-icon-left { padding-left: 2.1em; }
.fg-button-icon-right { padding-right: 2.1em; }
.fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
.fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }

.fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }	 /* solo icon buttons must have block properties for the text-indent to work */	

.fg-buttonset { float:left; }
.fg-buttonset .fg-button { float: left; }
.fg-buttonset-single .fg-button, 
.fg-buttonset-multi .fg-button { margin-right: -1px;}

.fg-toolbar { padding: .5em; margin: 0;  }
.fg-toolbar .fg-buttonset { margin-right:1.5em; padding-left: 1px; }
.fg-toolbar .fg-button { font-size: 1em;  }

.fg-button.ui-state-loading .ui-icon { background: url(spinner_bar.gif) no-repeat 0 0; }

.comic_news_headline {
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    vertical-align: top;
    text-align: left;
    padding: 10px;
}

.comic_news_byline {
    font-size: 12px;
    font-style: oblique;
    vertical-align: bottom;
    border-bottom: 0px;
    text-align: right;
    float: right;
}



.comic_news_avatar {
    float: left;
}

#footer {
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    display:block;
    background-image: url('/icons/footer_bg2.png');
    background-repeat: repeat-x;
    height: 138px;
}



#copyright_area {
    height: 138px;
    
    background-image: url('/icons/footer_full.png');
    background-repeat: no-repeat;
    margin: 0 auto;
    display:block;

    width: 990px;
}

#mongodb_badge {
    bottom:5px;
    height: 61px;
    width: 129px;
    margin: 0 auto;
    display:block;
	position: relative;
}
#comic_nav_dropdown {
    width: 250px;
    vertical-align: top;
}


#body_spacer {
	float: none;
	clear: both;
	display: block;
	height: 1px;
	width: 910px;
}

#width-bar {
    clear:both;
    height:1px;
    width:800px;
}


#top_feed_icon {
/*
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 7px;
*/
    float: left;

}

#top_ad {
	display: block;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
}

#top_ad table {
  margin-left:auto; 
  margin-right:auto;
}

#archive_ad {
	display: block;
    margin: 0 auto;
    padding: 0;
    float: left;
    width:468px;
}

#system_version {

	color: #4c4c4c;

	text-transform: lowercase;

	font-variant: normal;

	font-weight: bold;

	font-size: x-small;

	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
    vertical-align: bottom; 
        bottom:10px;
        position: relative;
}

.centered {
    bottom:5px;
    display:block;
    margin:0 auto;
    position:relative;
    width:50px;
}

#menu-logged-in { float: right; margin-right: 45px; font-size:.8em;}
.logged_in_text {
    color: white;
    font-variant: small-caps;
    font-size: small;
}
.logged_in_user {
    text-shadow: 0px 0px #e6e6e6;
    color: red;
    font-size: x-small;

}