/* Bittersweet Candy Bowl website CSS design, version 2.1, by SuitCase (suitcase@soaringrabbit.com)
Truly a gargantuan effort. You wouldn't have thought, but this is the most complicated thing I've ever had to make. Be proud of me. -- November 2009 */ 

/* Basic page structure, first. This is a bit bulky, but isn't the pretty gradient worth it? */
body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #333366;
	line-height: 1.4em;
	width: 100%;
	position: relative;
	margin: 0;
}
div#purplecol {
	width: 50%;
	height: 100%;
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 51;
	overflow: hidden;
	background-color: #A1A4CA;
	background-image: url(http://web.me.com/suitcase/bi/global_bg_purplegrad.png);
	background-repeat: repeat-x;
}
div#greencol {
	width: 50%;
	height: 100%;
	float: right;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 52;
	overflow: hidden;
	background-color: #B7E4A0;
	background-image: url(http://web.me.com/suitcase/bi/global_bg_greengrad.png);
	background-repeat: repeat-x;
}
div#centrecol {
	width: 980px;
	position: relative;
	z-index: 53;
	background-color: #DDE9F4;
	background-image: url(http://web.me.com/suitcase/bi/global_bg_main_extend.png);
	background-repeat: repeat-y;
	padding: 0;
	margin: 0 auto;
}
div#content {
	background-image: url(http://web.me.com/suitcase/bi/global_bg_main.png);
	background-repeat: no-repeat;
	padding: 0 15px 0;
/* This bizarre text align mess is because of the h2 and their inline-block thing. Don't ask, but it makes it work in IE. It's followed up in our first IE7 hack at the end. */
	text-align: center;
}
div #content * {
	text-align: left;
}

/* Set some custom colours for links (Why not?) */ 
a:link {
	color: #2D68B2;
}
a:visited {
	color: #458AD1;
}
a:active {
	color: #458AD1;
}

/* Headers and stuff. */

h1 {
	padding: 5px 0 0;
	margin: 0;
}
h1 a {
	display: block;
	width: 932px;
	height: 111px;
	background-image: url(http://web.me.com/suitcase/bi/global_header.png);
	background-repeat: no-repeat;
	margin: 0 auto;
}
h2 {
	font-size: 2.3em;
	text-align: center;
	line-height: 50px;
	display: inline-block;
	padding: 0 45px 0 0;
	margin: .2em auto 0;
	background-position: top right;
	background-repeat: no-repeat;
}
h2.pagetitle {
	font-size: 3.3em;
	line-height: 70px;
	padding: 0 60px 0 0;
}
h3 {
	font-size: 1.2em;
	text-align: center!important;
	line-height: 1.7em;
	width: 980px;
	margin-left: -15px;
	background-image: url(http://web.me.com/suitcase/bi/global_h3bg.png);
}
h4 {
	font-size: 2em;
	text-align: center!important;
	padding-right: 40px;
	margin: 1.1em 0 .7em;
}
span.titletext {
	display: none;
}

/* Ads */

/* Top leaderboard */
div#ad_topleaderboard {
	height: 97px;
	position: relative;
	background: #EAEDEF url(http://web.me.com/suitcase/bi/global_toprecessedbg.png) repeat-x bottom;
}
body#view div#ad_topleaderboard {
	height: 90px!important; 
	padding: 0!important;
	background: none!important;
}
div#ad_topleaderboard table,div#ad_topleaderboard img {
	margin: 0 auto;
}
div#ad_topleaderboard img {
	margin: 0 95px;
	padding: 0;
}
a#toppwlink {
	width: 98px;
	height: 77px;
	display: block;
	position: absolute;
	right: 0;
	top: 22px;
	background: url(http://web.me.com/suitcase/bi/global_pwlink.png) no-repeat top right;
}
body#view a#toppwlink {
	top: 12px!important;
}
div#ad_topleaderboard iframe {
	display: block;
	margin: 0 auto;
}

/* Tower */
div#ad_tower.commenttower {
	width: 160px;
	height: 600px;
	float: right;
	background-color: #e5edf5;
	border: 2px solid #b6cde6;
	margin: -650px 15px 0 0;
}
div#ad_tower.forumtower {
	width: 160px;
	height: 600px;
	position: absolute;
	top: -80px;
	left: -195px;
	background-color: #e5edf5;
	border: 2px solid #b6cde6;
	margin: 0 0 0 15px;
}

/* Rectangle */
div#ad_rect.postrect {
	width: 300px;
	height: 250px;
	float: left;
	background-color: #e5edf5;
	border: 2px solid #b6cde6;
	margin-left: 26px;
	margin-top: 9px;
}
div#ad_rect.forumrect {
	width: 300px;
	height: 250px;
	float: right!important;
	background-color: #e5edf5;
	border: 2px solid #b6cde6;
	margin-right: 15px;
	margin-top: 20px;
	margin: 20px 15px 0 15px;
}

/* Comic tower */
div#ad_comictower {
	width: 162px;
	height: 614px;
	position: absolute;
	top: 180px;
	right: -1px;
	background: url(http://web.me.com/suitcase/bi/viewer_toweradbg.png) no-repeat;
	padding: 1px 0 0 1px;
}

/* Page title decoration images */
h2.pagetitle#archives {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/pagetitle_archives.png);
}
h2.pagetitle#storyandcharacters {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/pagetitle_storyandcharacters.png);
	padding-right: 75px;
}
h2.pagetitle#store {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/pagetitle_store.png);
}
h2.pagetitle#forum {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/pagetitle_forum.png);
}
h2.pagetitle#extras {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/pagetitle_extras.png);
}
h2.pagetitle#introduction {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/pagetitle_introduction.png);
}
h2#thestory {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/thestory.png);
}
h2#castofcharacters {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/castofcharacters.png);
	padding-right: 55px;
}
h2#topics {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/topics.png);
}
h2#posttopic {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/posttopic.png);
	padding-right: 55px;
}
h2#officialart {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/officialart.png);
	padding-right: 55px;
}
h2#fanart {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/fanart.png);
}
h2#links {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/links.png);
}
h2#graveyard {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/graveyard.png);
	padding-right: 55px;
}
h2#otherthings {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/otherthings.png);
}
h2#history {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/history.png);
}
h2#readingguide {
	background-image: url(http://web.me.com/suitcase/bi/headerdec/readingguide.png);
	padding-right: 55px;
}

/* Here's the main navbar. */

ul#mainnav {
	list-style: none;
	height: 131px;
	position: relative;
	background-image: url(http://web.me.com/suitcase/bi/global_rainbow.png);
	background-repeat: no-repeat;
	padding-left: 0;
	margin: -1.5em 0 0;
}
ul#mainnav li a {
	height: 55px;
	display: block;
	position: absolute;
}
a.mainnav_archives {
	width: 150px;
	top: 43px;
	left: 18px;
}
a.mainnav_storychars {
	width: 320px;
	height: 60px!important;
	top: 55px;
	left: 198px;
}
a.mainnav_forum {
	width: 120px;
	top: 42px;
	left: 543px;
}
a.mainnav_store {
	width: 100px;
	top: 35px;
	left: 691px;
}
a.mainnav_extras {
	width: 115px;
	top: 42px;
	left: 818px;
}

/* Now we have to define the basic elements of the page. */

div#content p {
	padding: 0 15px;
}

/* Now for the globally-used custom sections that need to be defined. */

/* Intro text styles. */
div.introblock {
	position: relative;
}
p.introtext {
	font-size: 1.1em;
	line-height: 1.5em;
}
p.introtext strong {
	font-size: 1.3em;
}
p.introtext.home {
	padding-right: 110px!important;
}
a.newto {
	width: 115px;
	height: 125px;
	display: block;
	position: absolute;
	right: 0;
	top: -45px;
	background-image: url(http://web.me.com/suitcase/bi/home_newreader.png);
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
}
div.newvisitor {
	background-image: url(http://web.me.com/suitcase/bi/home_fallingmike.png);
	background-repeat: no-repeat;
}
p.introtext.home.newvisitor {
	min-height: 134px;
	padding-left: 117px!important;
	padding-right: 87px!important;
	background-image: url(http://web.me.com/suitcase/bi/home_fallinglucy.png);
	background-repeat: no-repeat;
	background-position: top right;
}

/* Comic navigation (prev\next with Yashy etc.) */
div#comicnav {
	width: 660px;
	margin: 0 auto;
	background-image: url(http://web.me.com/suitcase/bi/global_comicnav.png);
	background-repeat: no-repeat;
}
#comicnav ul {
	font-size: .9em;
	font-weight: bold !important;
	color: #666666;
	width: 660px;
	padding: 0!important;
	margin: 0!important;
}
#comicnav ul li {
	list-style: none;
	width: 110px;
	float: left;
	background-repeat: no-repeat;
}
#comicnav ul li a,#comicnav ul li span {
	width: 110px;
	text-align: center!important;
	float: left;
	padding: 110px 0 1em;
}
#comicnav ul li span {
	color: #A1A7B1;
}

/* Quick archive */
form#comicselect {
	margin-bottom: 2em;
}
form#comicselect p {
	text-align: center!important;
	font-size: .9em;
}

/* Is that some smallprint? */
p.smallprint {
	font-size: .86em;
	line-height: 1.35em;
	text-align: center;
	position: relative;
	background-color: #B5CEE7;
	border-left: 15px solid #8CA5D0;
	border-right: 15px solid #96C3BC;
	padding: 10px;
	margin: 30px 0 0;
}
p.smallprint small {
	font-size: 100%;
}
p.smallprint img {
	border: none;
}

/* Complicated comments CSS. This wacky speech bubble code is based on http://www.alistapart.com/articles/customcorners/ */
div.comment {
	width: 60%;
	background: #EFF3F7 url(http://web.me.com/suitcase/bi/global_bubble_topleft.png) no-repeat top left;
	margin: 0 auto 16px 15px;
}
div.comment h4 {
	width: auto;
	height: 15px;
	background: url(http://web.me.com/suitcase/bi/global_bubble_topright.png) no-repeat top right;
	margin: 0;
}
div.comment div.text {
	padding: 1px 0;
	margin: 0;
	background: url(http://web.me.com/suitcase/bi/global_bubble_rightborder.png) repeat-y top right;
}
div.text p {
	font-size: .9em;
	margin: -1px;
}
div.authorline {
	height: 45px;
	background: url(http://web.me.com/suitcase/bi/global_bubble_bottomleft.png) no-repeat bottom left;
}
div.authorline p {
	height: 45px;
	position: relative;
	background: url(http://web.me.com/suitcase/bi/global_bubble_bottomright.png) no-repeat bottom right;
	margin: 0;
}
span.authordetails strong {
	font-size: 20px;
	line-height: 34px;
	display: block;
	float: left;
	padding-right: 4px;
}
span.authordetails small {
	font-size: 14px;
	color: #7979AE;
	line-height: 36px;
	display: block;
	float: left;
	background: url(http://web.me.com/suitcase/bi/global_bubble_tail.png) no-repeat top right;
	padding-right: 40px;
}
span.authordetails {
	width: 100%;
	height: 30px;
	display: block;
	position: absolute;
	top: 13px;
}
div.comment img {
	max-height: 1500px!important;
}
p.nocomments {
	font-size: 1.3em;
	font-weight: bold;
	color: #3E5170;
	text-align: center!important;
	height: 30px;
	margin: 25px auto;
	padding-top: 125px!important;
	background: url(http://web.me.com/suitcase/bi/global_nocomment.png) no-repeat center top;
}
img.emoticon {
	margin-bottom: -4px;
}

/* Custom admin bubble style */
div.comment.admin {
	background-image: url(http://web.me.com/suitcase/bi/global_bubble_admin_topleft.png)!important;
}
div.comment.admin h4 {
	background-image: url(http://web.me.com/suitcase/bi/global_bubble_admin_topright.png)!important;
}
div.comment.admin div.text {
	background-image: url(http://web.me.com/suitcase/bi/global_bubble_admin_rightborder.png)!important;
}
div.comment.admin div.authorline {
	background-image: url(http://web.me.com/suitcase/bi/global_bubble_admin_bottomleft.png)!important;
}
div.comment.admin div.authorline p {
	background-image: url(http://web.me.com/suitcase/bi/global_bubble_admin_bottomright.png)!important;
}
div.comment.admin span.authordetails small {
	background-image: url(http://web.me.com/suitcase/bi/global_bubble_admin_tail.png)!important;
}

/* Post a comment section */
div.comment#post {
	width: 580px;
	margin: 0 15px -20px auto;
}
div.comment#post h4 {
	font-size: 1.1em;
	line-height: 35px;
	height: 35px;
	padding: 0;
}
div.comment#post p textarea {
	margin: 1em 0 .2em;
}
div.comment#post p {
	font-size: .8em;
	text-align: center;
	line-height: 1.3em;
}
p.authorinput input {
	font-size: 16px!important;
}
p.authorinput {
	font-size: 18px!important;
	text-align: center!important;
	width: 70%;
	padding: 0!important;
	margin: 0 -5px 0 auto!important;
}
p.authorinput.hiddenmath {
	width: 47%!important;
}
span.authorfieldlabel {
	padding-left: 85px!important;
	padding-top: 15px!important;
	background-image: url(http://web.me.com/suitcase/bi/global_bubble_post_tail.png);
	background-repeat: no-repeat;
}
div.comment#post span.authordetails {
	height: 1px!important;
}
div.comment#post div.authorline {
	height: 19px!important;
	background: url(http://web.me.com/suitcase/bi/global_bubble_post_bottomleft.png) no-repeat bottom left!important;
	background-repeat: no-repeat!important;
	margin: 0 0 30px!important;
}
div.comment#post div.authorline p {
	height: 19px!important;
	background: url(http://web.me.com/suitcase/bi/global_bubble_post_bottomright.png) no-repeat bottom right!important;
	background-repeat: no-repeat!important;
}

/* Homepage. */

div#comicpage {
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: center!important;
	padding: 0 15px;
	margin: 0 auto;
}
h2.comictitle {
	font-size: 2em;
	color: #3567B2;
	line-height: 100%!important;
	text-align: center!important;
	width: 100%;
	padding: 0;
	margin: .6em 0 0;
	background-image: none;
}
h3.comicdate {
	font-size: .9em;
	font-weight: normal;
	font-style: italic;
	text-align: center!important;
	color: #666666;
	width: 26em;
	background: none;
	padding: 0;
	margin: .2em auto 1em;
}
p.comicdate {
	font-size: 1.5em;
	text-align: center!important;
	margin: .5em 0 .5em;
}
div#comicpage img {
	margin-left: auto;
	margin-right: auto;
	border: 10px solid #72A1D2;
}

/* Miscellaneous links section */
div#miscbar {
	height: 140px;
	background: url(http://web.me.com/suitcase/bi/home_miscbar.png) no-repeat;
}
div#miscbar div {
	width: 180px;
	height: 140px;
	float: left;
	padding: 0;
	margin: 0 5px;
}
div#miscbar h3 {
	display: none;
}
div#miscbar h4 {
	font-size: 1.45em;
	padding: 5px 8px 5px 0;
	margin: 0;
}
div#miscbar p {
	font-size: .8em;
	line-height: 1.1em;
	padding: 0 0 0 60px;
	margin: 0;
}
div#miscbar ul {
	list-style-type: none;
	line-height: 1.1em;
	margin: 0;
	padding: 0;
}
div#miscbar div.rss li {
	font-size: .9em;
	line-height: 1.1em;
	padding-left: 59px;
	margin-bottom: 25px;
	text-indent: 16px;
}
div#miscbar div.twitter li {
	font-size: 1.25em;
	font-weight: bold;
	line-height: 33px;
	padding-left: 38px;
}
div#miscbar div.vote span.ragged {
	display: block;
	width: 14px;
	height: 39px;
	float: left;
}

/* viewer.php has a bunch of custom styles */

div#compactheader {
	position: relative;
	width: 980px;
	height: 90px;
	background-image: url(http://web.me.com/suitcase/bi/viewer_header_bgpub.png);
	background-repeat: no-repeat;
	margin-left: -15px;
}
div#compactheader h1 {
	padding: 0;
}
div#compactheader h1 a {
	height: 53px;
	background-image: url(http://web.me.com/suitcase/bi/viewer_header.png);
	margin: 0 0 0 5px;
}
div.progbar_bcb {
	width: 0;
	height: 53px;
	background-color: #90B7E2;
	margin-left: 15px;
}
div.progbar_enclosure_bcb {
	padding-right: 15px;
}
div.progbar_chapter {
	width: 0;
	height: 37px;
	background-color: #B5CEE7;
	margin-left: 15px;
}
div.progbar_enclosure_chapter {
	padding-right: 30px;
}
div#compactheader h2 {
	font-size: 18px;
	font-weight: normal;
	line-height: 37px;
	width: 62%;
	position: absolute;
	left: 20px;
	background-image: none;
	margin: 0;
}
div#compactheader h3 {
	font-size: 18px;
	font-weight: normal;
	text-align: right!important;
	width: 33%;
	position: absolute;
	right: 20px;
	bottom: 4px;
	margin: 0;
	background-image: none;
}
body#view ul#mainnav a {
	color: #333366;
	text-decoration: none;
}	
body#view ul#mainnav {
	font-size: 21px;
	font-weight: bold;
	text-align: right!important;
	width: 595px;
	height: 40px;
	position: absolute;
	right: 24px;
	bottom:  42px;
	height: 31px;
	padding-top: 7px;
	background-image: none;
}
body#view ul#mainnav li {
	display: inline;
	margin: 0 .2em;
}
body#view ul#mainnav li a span {
	display: inline;
}
body#view ul#mainnav li a {
	position: static;
}
body#view ul#mainnav li a {
	display: inline!important;
}
p.pagenavlink a {
	width: 154px;
	position: absolute;
	top: 704px;
	right: 15px;
	background: url(http://web.me.com/suitcase/bi/viewer_pagenav_next.png) no-repeat center center;
}
p.pagenavlink a:hover {
	background-image: url(http://web.me.com/suitcase/bi/viewer_pagenav_next_hover.png);
}
body#view div.comicpage {
	margin-left: -10px;
	background: url(http://web.me.com/suitcase/bi/viewer_pagebordertop.png) no-repeat;
}
body#view div.comicpage img {
	background: url(http://web.me.com/suitcase/bi/viewer_pageborderbottom.png) no-repeat 0 bottom;
	padding: 2px 5px 7px 3px;
	margin-top: 1px;
}
p.chapternotice {
	font-size: 1.1em;
	font-weight: bold;
	color: #9C4130;
	text-align: center!important;
	width: 65%;
	padding: 1.1em 1em!important;
	margin: 0 auto 5px;
	background-color: #F3DDD8;
	border: 2px solid #B64C38;
}

/* Archives page. */

/* The actual archives container */
div.archives_container {
	width: 600px;
	margin: 0 auto;
	position: relative;
	padding-left: 80px;
}
div.archives_container h3 {
	font-size: 20px;
	text-align: left!important;
	height: 27px;
	width: 600px!important;
	padding: 0;
	margin: 0;
	background: none;
}
div.archives_container p {
	font-size: 17px;
	line-height: 21px;
	height: 42px;
	padding-left: 40px;
	margin: 0 0 15px;
}
div.archives_container span.chapterdetails {
	font-size: .8em;
	font-weight: normal;
}

/* Lovely arc divs */
div.arc {
	width: 100px;
	position: absolute;
	left: -40px;
	border-right: 10px solid #72A1D2;
	background-repeat: no-repeat;
	background-position: top right;
}
div#arc_confrontation {
	height: 153px;
	top: 1008px;
	background-image: url(http://web.me.com/suitcase/bi/arcs/confrontation.png);
}
div#arc_oldflame {
	height: 825px;
	top: 1260px;
	background-image: url(http://web.me.com/suitcase/bi/arcs/oldflame.png);
}
div#arc_childhood {
	height: 153px;
	top: 2352px;
	background-image: url(http://web.me.com/suitcase/bi/arcs/childhood.png);
}
div#arc_awakening {
	height: 1245px;
	top: 3108px;
	background-image: url(http://web.me.com/suitcase/bi/arcs/awakening.png);
}
div#arc_summer {
	height: 405px;
	top: 4452px;
	background-image: url(http://web.me.com/suitcase/bi/arcs/summer.png);
}
div#arc_lucyangst {
	height: 573px;
	top: 4956px;
	background-image: url(http://web.me.com/suitcase/bi/arcs/lucyangst.png);
}
/* btw: A chapter has 84px height inc bottom padding, 69 without padding */ 

/* Forum page(s). */

/* Topic list page. */

p.rules {
	font-size: 1em;
}
p.irc {
	font-size: 1em;
	text-align: center!important;
	width: 75%;
	padding: 1em!important;
	margin: 1em auto;
	background-color: #e2c8e9;
	border: 2px solid #bd6ec0;
}
ul#topiclist {
	width: 100%;
	padding-left: 0;
	margin: 0;
}
ul#topiclist li {
	font-size: .95em;
	list-style-type: none;
	height: 40px;
	position: relative;
	padding-left: 80px;
	padding-top: 35px;
	background: no-repeat 5px 8px;
}
ul#topiclist li.alt {
	background-color: #C8DEEC;
}
ul#topiclist li a {
	font-size: 1.3em;
	font-weight: bold;
	position: absolute;
	top: 14px;
	left: 80px;
}
/* <small> encapsulates the last comment\post column. */
ul#topiclist li small {
	font-size: 13px;
	text-align: center!important;
	line-height: 13px;
	width: 200px;
	height: 63px;
	position: absolute;
	top: 0;
	right: 90px;
	padding-top: 14px!important;
}
ul#topiclist li small strong {
	font-size: 15px!important;
	text-align: center!important;
	width: 200px;
	position: absolute;
	top: 30px;
	left: 0;
}
ul#topiclist li small span.lastposttime {
	text-align: center!important;
	width: 200px;
	height: 20px;
	position: absolute;
	top: 45px;
	left: 0;
	padding: 0;
}
ul#topiclist li.alt small {
	background-color: #D6E5F1;
}
ul#topiclist li.alt small {
	background-color: #D6E5F1;
}
/* And <span> encapsulates the reply count. */
ul#topiclist li span {
	text-align: center!important;
	line-height: 18px;
	width: 90px;
	height: 75px;
	position: absolute;
	top: 0;
	right: 0;
	padding-top: 44px;
}
ul#topiclist li span strong {
	font-size: 32px;
	text-align: center;
	width: 90px;
	position: absolute;
	top: 18px;
	right: 0;
}

/* Posticons for these <li>s. */
ul#topiclist li.comments { background-image: url(/img/forum/posticons/comments.png); }
ul#topiclist li.general { background-image: url(/img/forum/posticons/general.png); }
ul#topiclist li.politics { background-image: url(/img/forum/posticons/politics.png); }
ul#topiclist li.drama { background-image: url(/img/forum/posticons/drama.png); }
ul#topiclist li.comic { background-image: url(/img/forum/posticons/comic.png); }
ul#topiclist li.romance { background-image: url(/img/forum/posticons/romance.png); }
ul#topiclist li.art { background-image: url(/img/forum/posticons/art.png); }
ul#topiclist li.question { background-image: url(/img/forum/posticons/question.png); }
ul#topiclist li.media { background-image: url(/img/forum/posticons/media.png); }
ul#topiclist li.nsfw { background-image: url(/img/forum/posticons/nsfw.png); }
ul#topiclist li.website { background-image: url(/img/forum/posticons/website.png); }

p.topicsonlytoggle a {
	font-size: 1.2em;
	font-weight: bold;
	text-align: left!important;
	width: 21em;
	display: block;
	margin: -2.5em auto 1.2em 0;
}
p.posttopic a {
	font-size: 1.9em;
	font-weight: bold;
	text-align: right!important;
	line-height: 45px;
	width: 6em;
	display: block;
	background: url(http://web.me.com/suitcase/bi/forum/newtopic.png) no-repeat right;
	padding-right: 45px!important;
	margin: -2em 0 0 auto;
}
p.viewall {
	font-size: 1.8em;
	font-weight: bold;
	text-align: center!important;
}

/* Post topic bit */
div#posttopic_container {
	width: 35em;
	position: relative;
	min-height: 530px;
	margin: 0 auto;
}
div#posttopic_container p {
	padding: 0;
}
div#posttopic_container input {
	font-size: 1.3em;
	height: 1.3em;
}
div#posttopic_container input.subjectfield {
	width: 63%;
	position: absolute;
	top: 0;
	left: 15%;
}
div#posttopic_container select {
	font-size: 1.3em;
	width: 20%;
	height: 1.3em;
	position: absolute;
	top: 0;
	left: 80%;
}
textarea {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.1em;
	width: 100%;
}
div#posttopic_container span.fieldlabel {
	font-size: 1.3em;
	line-height: 1.6em;
}
div#posttopic_container p.postdetails {
	text-align: right;
}

/* Topic display page */
h3.topicheader {
	font-size: 1.8em;
	line-height: 1em;
	width: 100%;
	background: none;
	margin: 0 0 .5em;
}
p#forumnav {
	position: relative;
	height: 45px;
	margin: 0 1em!important;
}
p#forumnav a {
	font-size: 1.9em;
	font-weight: bold;
	line-height: 45px;
	display: block;
	position: absolute;
	top: 0;
	background-repeat: no-repeat;
	background-position: left;
	margin: 0;
}
p#forumnav a.forumindex {
	text-align: left!important;
	left: 0;
	background-image: url(http://web.me.com/suitcase/bi/forum/backarrow.png);
	padding-left: 60px!important;
}
p#forumnav a.postreply {
	text-align: right!important;
	right: 0;
	background-image: url(http://web.me.com/suitcase/bi/forum/replyarrow.png);
	padding-left: 45px!important;
}
a.editlink {
	text-transform: uppercase;
	font-weight: bold;
	padding-right: 25px;
	background: url(http://web.me.com/suitcase/bi/forum_edit_editlink.png) no-repeat right;
}

/* Edit page. */
body#edit h3.topicheader {
	font-size: 1.3em;
	font-weight: normal;
	text-align: left!important;
	padding-left: 15px;
}
body#edit p.instructions {
	font-size: .81em!important;
}
body#edit form {
	padding-right: 390px;
	background: url(http://web.me.com/suitcase/bi/forum_edit_sue.png) no-repeat right center;
}
body#edit textarea {
	height: 400px;
}
body#edit input {
	font-size: xx-large;
	text-align: right!important;
	margin-left: 380px;
}

/* Story & Characters page. */

/* Major characters */
div.majorcharacters_container {
	margin: 0 2.37em 0;
}
div.majorcharacters_container div {
	width: 276px;
	float: left;
	margin-right: 10px;
	margin-bottom: 1.5em;
	border-right: 8px solid #C0D6EB;
}
div.majorcharacters_container div h4 {
	font-size: 3em;
	margin: .4em .4em .4em 1em;
}
div.majorcharacters_container div a img {
	float: left;
	padding-right: 10px;
	border: none;
}
/* Get rid of unnecessary segmentation of majorchar columns (only for 3 col layout, adjust for 2 col if you like) */
div#daisy,div#abbey {
	border-right: none!important;
}

/* Minor characters */
div.minorcharacters_container {
	padding: 0 5px;
}
div.minorcharacters_container div {
	position: relative;
	height: 92px;
	padding-bottom: 21px;
	border-bottom: 2px solid #C0D6EB;
}
div.minorcharacters_container div * {
	padding-bottom: 0;
	border: 0;
}
div.minorcharacters_container div h4 {
	font-size: 48px;
	line-height: 100px;
	float: left;
	height: 100px;
	padding: 0 15px 0 0;
	margin: 0 15px 0 105px;
	border-right: 8px solid #C0D6EB;
}
div.minorcharacters_container div dl {
	font-size: .9em!important;
}
div.minorcharacters_container a img {
	position: absolute;
	top: 0;
	left: 0;
}
/* Try to adjust minorchar headings to be of similar width */
div#yashy h4,div#chirpy h4,div#amaya h4,div#katie h4,div#stacy h4,div#sandy h4 {
	width: 3.4em;
}
div#jessica h4,div#rachel h4 {
	width: 3.6em;
}
div#lily h4,div#blur h4,div#sue h4 {
	width: 2.2em;
}
div#tess h4,div#kizuna h4,div#carter h4,div#carson h4,div#mccain h4 {
	width: 3.7em;
}
/* Fix flowergirl image, it is 104px wide. */
div#flowergirl h4 { 
	text-indent: -4px!important;
}

/* Definition lists for character boxes */
dl {
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	margin: -.5em 0 1.4em 0;
}
div.majorcharacters_container div div dl {
	width: 276px;
	height: 20px;
}
dt,dd {
	float: left;
}
div.majorcharacters_container dt,div.majorcharacters_container dd {
	font-size: 11.5px!important;
}
dt {
	color: #8B8FA7;
}
dt:after {
	content: ": ";
}
dd {
	margin-left: .3em;
	margin-right: .9em;
}

/* Extras page. */

/* Official art */
div.officialart_container {
	margin: 1em 2.37em;
}
div.officialart_container div {
	float: left;
	position: relative;
	width: 276px;
	height: 160px;
	padding-top: 145px;
	margin: 0 5px 1.3em;
}
div.officialart_container h3 {
	font-size: 1.8em;
	text-align: left!important;
	line-height: 1.05em;
	width: 276px;
	padding: 0;
	margin: .3em 0;
	background: none;
}
div.officialart_container div a img {
	position: absolute;
	top: 4px;
	left: 4px;
	border: 1px solid #B3C9DB;
}
div.officialart_container div p {
	font-size: .9em;
	line-height: 130%;
	padding: 0!important;
	margin: 0;
}
div.officialart_container div.new {
	background-image: url(http://web.me.com/suitcase/bi/extras_officialarthalo.png);
	background-repeat: no-repeat;
}

/* Fan art section */
div#fanart_container {
	margin: 1em 0 0;
	border: none;
	padding: 0;
}
div#fanart_container div {
	float: left;
	width: 286px;
	padding: 0 15px;
	margin: 0 0 1.5em;
}
div#fanart_container div.threecol {
	width: 100%;
	margin: 0;
	padding: 0;
	background-image: url(http://web.me.com/suitcase/bi/extras_fanartbg.png);
}
div#fanart_container div.threecol.last {
	border-bottom: 1px solid #C2D3E2;
	margin-bottom: 1em;
}
div#fanart_container h3 {
	font-size: 1.8em;
	background: url(http://web.me.com/suitcase/bi/extras_fanartheader.png) repeat-x right top;
	line-height: 40px;
	width: 316px;
	padding: 0;
	margin: 0 -15px;
}
div#fanart_container div p {
	font-size: .75em;
	font-weight: bold;
	text-align: center!important;
	padding: 0;
	margin: 0;
}
div#fanart_container div img {
	padding: 1px;
	border: none;
}
div#fanart_container div img.new {
	padding: 0;
	border: 1px solid #FFFF99;
}
p#togglebutton_fanart {
	margin-bottom: 1.3em!important;
}

/* Links, graveyard and other stuff lists for extras page (let's call it displaylist */
ul.displaylist {
	list-style-type: square;
	padding-right: 15px;
}
ul.displaylist li {
	margin-bottom: .4em;
}
ul.displaylist li a {
	font-size: 1.3em;
	font-weight: bold;
}
a.nontitlelink {
	font-size: 1em!important;
	font-weight: normal!important;
}

/* History bit. Images and CSS stolen from the old site. */
div#history_container div.decoration {
	float: right;
	background-repeat: no-repeat;
	margin: .5em;
}
div#history_container div.alignleft {
	float: left !important;
}
div#history_container div.dreamingatdesk {
	width: 313px;
	height: 286px;
	background-image: url(http://web.me.com/suitcase/bi/extras_dec_dreamingatdesk.png);
}
div#history_container div.bawww {
	width: 267px;
	height: 261px;
	background-image: url(http://web.me.com/suitcase/bi/extras_dec_bawww.png);
}
div#history_container div.brush {
	width: 195px;
	height: 259px;
	background-image: url(http://web.me.com/suitcase/bi/extras_dec_brush.png);
}
div#history_container div.flyingdavid {
	width: 185px;
	height: 146px;
	background-image: url(http://web.me.com/suitcase/bi/extras_dec_flyingdavid.png);
}
div#history_container div.hatetheworld {
	width: 210px;
	height: 243px;
	background-image: url(http://web.me.com/suitcase/bi/extras_dec_hatetheworld.png);
}

/* Introduction page. */

div#intropanels {
	background: url(http://web.me.com/suitcase/bi/introduction_intropanels.png) no-repeat top center;
	height: 704px;
	position: relative;
	font-size: 24px;
	line-height: 32px;
}
div#intropanels p {
	position: absolute;
}
p.para1 {
	font-size: 22px;
	line-height: 28px;
	position: static!important;
	width: 650px;
}
div#intropanels p.para2 {
	top: 50px;
	left: 335px;
	width: 250px;
	text-align: center!important;
}
div#intropanels p.para3 {
	width: 180px;
	top: 265px;
	left: 370px;
	text-align: center!important;
}
p.para4 {
	font-size: 24px;
	line-height: 32px;
	text-align: center!important;

}
p.para5 {
	font-size: 1.2em;
	width: 650px!important;
	padding: 0!important;
	margin: 0 auto;
	text-align: center!important;

}
p.para6 {
	background: url(http://web.me.com/suitcase/bi/introduction_lucymikerun.png) no-repeat top right;
	display: block;
	position: static;
	padding-top: 163px!important;
	text-align: right!important;
	font-size: 1.2em;
	line-height: 1.7em;
	margin-right: 1em!important;
	margin-top: -1.3em;
}
p.para6 a {
	font-size: 2.1em;
	font-weight: bold;
}

/* Reading guide */
div#readingguide_container {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.2em;
	line-height: 1.6em;
	color: #6E6657;
	width: 80%;
	background-color: #F8EFCE;
	background-image: url(http://web.me.com/suitcase/bi/introduction_readingguide_bg.jpg);
	padding: 0 1em;
	margin: 0 auto;
	border: 1px solid #BCB691;
}
div#readingguide_container a:link,div#readingguide_container a:active {
	color: #FF4A4A;
}
div#readingguide_container a:visited {
	color: #A64237;
}
div#readingguide_container p.introtext {
	font-size: 1em;
	padding-top: 80px!important;
	background: url(http://web.me.com/suitcase/bi/introduction_readingguide_heading.png) no-repeat center top;
}
p.read,p.note {
	background-repeat: no-repeat;
	padding: 0 0 .5em 135px!important;
}
p.read {
	font-size: 1.2em;
	line-height: 40px;
	background-image: url(http://web.me.com/suitcase/bi/introduction_readingguide_read.png);
}
p.note {
	background-image: url(http://web.me.com/suitcase/bi/introduction_readingguide_note.png);
}
p.andyouredone {
	font-size: 1.5em;
	font-style: italic;
	text-align: center!important;
}
div#readingguide_container div.decoration {
	display: block;
	float: right;
	background: url(http://web.me.com/suitcase/bi/introduction_readdingguide_decorations.png) no-repeat;
	padding-right: 10px;
}
div#readingguide_container div.decoration.mikedaisy {
	width: 191px;
	height: 148px;
	background-position: left 0;
}
div#readingguide_container div.decoration.mikesandy {
	width: 162px;
	height: 141px;
	background-position: left -148px;
}
div#readingguide_container div.decoration.confrontation {
	width: 270px;
	height: 215px;
	background-position: left -289px;
}
div#readingguide_container div.decoration.paulotess {
	width: 220px;
	height: 159px;
	background-position: left -504px;
}
div#readingguide_container div.decoration.daisyffcat {
	width: 158px;
	height: 190px;
	background-position: left -670px;
}
div#readingguide_container div.decoration.mikelucy {
	width: 185px;
	height: 141px;
	background-position: left -860px;
}
div#readingguide_container div.decoration.daisyabbey {
	width: 258px;
	height: 154px;
	background-position: left -1001px;
}

/* Chat page */

div#ircclients div {
	width: 48%;
	float: left;
	clear: both;
	margin-left: 1.2%;
	margin-bottom: 1.2em;
}
div#ircclients h2,div#ircclients p {
	margin: 0;
	padding: 0 0 0 140px;
}
div#ircclients p {
	font-size: .85em;
	line-height: 1.3em;
	min-height: 128px;
}
div#ircclients a {
	font-weight: bold;
}
div#ircclients div.mac {
	background: url(http://web.me.com/suitcase/bi/chat_colloquyicon.png) no-repeat;
}
div#ircclients div.windows {
	background: url(http://web.me.com/suitcase/bi/chat_mircicon.png) no-repeat;
}

/* Miscellaneous styles for random things. */

h2,h3,.clear {
	clear: both!important;
}
p.lastupdated {
	font-size: .8em;
	font-style: italic;
	color: #9CB5CC;
	text-align: right!important;
	margin-right: 3%;
}
p#togglebutton,p#togglebutton_fanart,p#togglebutton_history {
	color: #2D68B2;
	font-size: 20px;
	text-align: center!important;
	text-decoration: underline;
	line-height: 52px;
	cursor: pointer;
	width: 278px;
	height: 52px;
	padding: 0!important;
	margin: 0 auto;
	background-image: url(http://web.me.com/suitcase/bi/global_togglebutton.png);
}
p#togglebutton.comments {
	margin-bottom: 1.5em!important;
}
p.newtotext {
	min-height: 80px;
	padding: 1.3em 95px 1.3em 2em!important;
	margin: 1em;
	background: #DCF1D3 url(http://web.me.com/suitcase/bi/global_intronotice.png) no-repeat right center;
	border: 3px solid #527F3F;
}
p.storeplaceholder {
	text-align: center!important;
	margin: 0 auto!important;
}
form#donate {
	text-align: center;
	margin: 0 auto;
}
a.comicrankbutton {
	position: absolute;
	bottom: 8px;
	right: 12px;
	width: 80px;
	height: 15px;
}
a.comicrankbutton img {
	border: none;
}
a.surveybanner {
	position: absolute;
	left: 0;
	width: 302px;
	height: 74px;
	border: none;
}
a.surveybanner img {
	border: none;
}

/* Horrible CSS hacks to target IE7 users */

/* Some nonsense about h2s, so they display properly in IE */
h2 { display: inline; }
html > /**/ body h2 { display: inline-block; }


/* Work around a bug in IE that requires a background set for absolute-positioned empty <a>s*/
*:first-child+html ul#mainnav li a {
	background-image: url(http://web.me.com/suitcase/bi/global_bubble_post_bottomright.png);
	background-repeat: no-repeat;
	background-position-x: -400px;
}
/* Fix waystoread section, it doesn't seem to clear properly */
*:first-child+html div#waystoread {
	height: 325px;
}
/* Fix cut-off letters in compact navbar */
*:first-child+html body#view ul#mainnav {
	line-height: 40px;
	padding-bottom: 12px;
}
/* Fix font size of stats for majorcharacters */
*:first-child+html div.majorcharacters_container dt,*:first-child+html div.majorcharacters_container dd {
	font-size: 12px!important;
}
/* Fix minorcharacters border */
*:first-child+html div.minorcharacters_container div {
	border-bottom: none!important;
}
/* Fix reading guide padding */
*:first-child+html div#minorcharacters_container {
	padding: 1em!important;
}
/* Fix the input fields and speech bubble tail on the post comment area */
*:first-child+html span.authorfieldlabel {
	background-image: none;
}
*:first-child+html div.comment#post div.authorline {
	margin: 0!important;
}
*:first-child+html p.authorinput {
	padding: 25px 35px 0 0!important;
}

/* Horrible CSS hacks for other browsers */

/* Stop MobileSafari resizing certain text for readability, it breaks layout */
div#votinginfo,div.archives_container,div.minorcharacters_container,body#view ul#mainnav li a {
	-webkit-text-size-adjust: none;
}

/* Custom girl bubble style */
div.comment.girl {
	background-image: url(http://web.me.com/suitcase/bi/special/global_bubble_girl_topleft.png)!important;
}
div.comment.girl h4 {
	background-image: url(http://web.me.com/suitcase/bi/special/global_bubble_girl_topright.png)!important;
}
div.comment.girl div.text {
	background-image: url(http://web.me.com/suitcase/bi/special/global_bubble_girl_rightborder.png)!important;
}
div.comment.girl div.authorline {
	background-image: url(http://web.me.com/suitcase/bi/special/global_bubble_girl_bottomleft.png)!important;
}
div.comment.girl div.authorline p {
	background-image: url(http://web.me.com/suitcase/bi/special/global_bubble_girl_bottomright.png)!important;
}
div.comment.girl span.authordetails small {
	background-image: url(http://web.me.com/suitcase/bi/special/global_bubble_girl_tail.png)!important;
}


/* End. */