/* Some definitions used everywhere */

BODY { 
	color: #000;
	margin: 0;
	padding: 0;
	text-align: center;
	font: 13px/1.35 helvetica, "helvetica neue", arial;
}

IMG { 
	border: 0;
	margin: 0;
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
}

FORM {
	padding: 6px;
	font-size: 13px;
	display: block;
}

HR {
	border: 0;
	background-color: #bbb;
	height: 1px;
	margin-bottom: 0;
}

/* Header cells in tables throughout the site */
TH { 
	background: #c000000;
	color: #666;
	font-weight: normal;
	padding-bottom: 8px;
}

#upfile1, #upfile2, #upfile3, #upfile4, #upfile5 {
	border-style: none;
	margin-bottom: 5px;
}
/* links */
A { 
	color: #7a72bb;
	text-decoration: none;
}
/* hovering links */
A:hover {
	color: #000000;
	text-decoration: none;
}

a.vuadmin { 
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #c00000;
	text-decoration: none;
	margin-right: 2px;
	margin-left: 2px;
	font-weight: normal;
	font-style: normal;
	font-size: 10px;
	padding: 1px 4px;
	border: 1px solid #c00000;
}

a.vuadmin:hover {
	background-color: #444444;
	text-decoration: none;
}

a.vuadmin:active {
	background-color: #aaaaaa;
	text-decoration: none;
}

#bio #biotitle a,
a.linkbutton {
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #ffffff;
	border: 1px solid #7a72bb;
	background-color: #978ee7;
	text-shadow: none;
	moz-box-shadow: 0px 1px 1px #fff;
	-webkit-box-shadow: 0px 1px 1px #fff;
	box-shadow: 0px 1px 1px #fff;
	margin-right: 0;
	margin-left: 4px;
	height: 11px;
	padding: 3px 4px;
	font: normal normal normal 11px Arial, Helvetica, "Helvetica Neue", Geneva, sans-serif;
	margin-bottom: 3px;
}

.rightbox a.linkbutton { 
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #ffffff;
	text-decoration: none;
	border: 1px solid #7a72bb;
	float: right;
	white-space:nowrap;
	text-shadow: none;
	height: 14px;
	padding: 2px 4px;
	font: normal normal normal 11px/14px Arial, Helvetica, "Helvetica Neue", Geneva, sans-serif;
	margin: 3px 0 0 4px;
	vertical-align: middle;
}

a.redbutton {
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #ffffff;
	border: 1px solid #400400;
	background-color: #ca1f05;
	text-shadow: none;
	moz-box-shadow: 0px 1px 1px #fff;
	-webkit-box-shadow: 0px 1px 1px #fff;
	box-shadow: 0px 1px 1px #fff;
	margin-right: 0;
	margin-left: 4px;
	height: 11px;
	padding: 3px 4px;
	font: normal normal normal 11px Arial, Helvetica, "Helvetica Neue", Geneva, sans-serif;
	margin-bottom: 3px;
}

a.redbutton:hover,
#bio #biotitle a:hover,
a.linkbutton:hover {
	background-color: #444444;
	text-decoration: none;
}

a.redbutton:active,
#bio #biotitle a:active,
a.linkbutton:active {
	background-color: #aaaaaa;
	text-decoration: none;
}

#container {
	width: 85%;
	margin: auto;
	text-align: center;
 	min-width: 650px;
	max-width: 1100px;
}

#actionmessage {
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	color: #666;
	line-height: 1.6;
	margin: 8px 20px;
	text-align: left;
	font-size: 14px;
	border: 1px solid #bbb;
	background: url(images/actiongears.png) no-repeat 8px center;
	padding: 6px 6px 6px 50px;
}

div.Box {
   border-radius: 4px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   background: #dddddd;
   color: #666666;
   padding: 6px 10px;
   margin: 0 0 10px;
	box-shadow: 0px 0px 2px #999;
	-moz-box-shadow: 0px 0px 2px #999;
	-webkit-box-shadow: 0px 0px 2px #999;  }

/* the box at the top of the page */
#banner {
	height: 145px;
 	background: url(images/banner.png) no-repeat;
	margin-bottom: -35px;
}

#newspanel {
	margin-left:400px;
	text-align: left;
	font-weight: bold;
	padding: 0px;
	color: #fff;
	font-size: 10px;
}

.headertitle {
    font-size: 16px;
	font-weight: bold;
	border-bottom: 1px solid #c00000;
	margin-bottom: 5px;
	}

#newspanel a:link, #featured a:visited {
 	color: #7a72bb;
 	text-decoration: none;
 	font-weight: bold;
}

#newspanel a:hover{
 	color: #333;
    text-decoration: none;
	font-weight: bold;
}

#navigation {
    background: #00;
}

#search {
	text-align: center;
	padding: 3px;
	}

/* The location of the div containing the RSS link in the banner area */
#rss {
	position: absolute;
	right: 50px;
	top: 55px; 
}

/* the following defines your menu below the banner div */
/* the box around the menu and aligning the text to center */
#menu {
	font-size: 13px;
	background: #ff;
	color: #000;
	position: relative;
	padding: 4px 4px 0px;
}

#menulist {
	padding: 0px;
 	margin: 0px;
 	text-align: center;
	font-size: 16px;
}

#menulist ul {
 	margin-left: 0;
 	padding-left: 0;
 	white-space: nowrap;
}

#menulist li {
	 display: inline;
 	list-style-type: none;
}

#menulist a {
 	margin-right: 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px #fff;
	padding: 4px 6px;
	text-shadow: #fff 0 0 3px;
}

#menulist a:link, #menulist a:visited {
 	color: #7a72bb;
 	text-decoration: none;
}

#menulist a:hover{
 	color: #000;
	text-decoration: none;
	text-shadow: #feffff 0 0 3px;
}
/* the footer box at the bottom of the page */
#footercon {
	clear:both;
	margin-bottom: 10px;
}

#footercon a:link {
}

#footerinfo,#footersearch,#footerbottom{
	background:#00
}

#footerinfo a:link {color:#000;}

#footersearch{
	text-align: right;
}

#footerinfo {
	padding:1px 0 2px 6px
}

#footer,#footertitle,#footerbottom{
	background:#00
}


#footersearch {
	padding:3px 0 2px 6px
}

#footerbottom {
	padding:5px 5px 0 5px;
	color: #fff;
	text-align: center;
}


#footerbottom a{
	color: #999;
}

#footertitle {
	padding:4px;
	color: #000;
	font-weight: bold;
	text-align: left;
}

/* End universal page setup */

/* this is a carryover from 1.1.  Generally it is used around tables and table cells. */

.tblborder { 
	border-collapse: collapse;
}

th.tblborder {
	padding-bottom: 0;
	padding-top: 12px;
}




#top10list.tblborder { 
	padding: 6px;
	border-collapse: collapse;
	-moz-column-count: 3;
	-moz-column-gap: 1.5em;
	-webkit-column-count: 3;
	-webkit-column-gap: 1.5em;
}

.listpadded {
	padding-left: 35%;
	font-size: 14px;
}

.listblockpad {
	padding-bottom: 9px;
}

#mainpage div.bigblock div.tblborder div.blockinnersmall, #useropts.tblborder { 
	padding: 6px;
	border-collapse: collapse;
	-moz-column-count: 3;
	-moz-column-gap: 1.5em;
	-webkit-column-count: 3;
	-webkit-column-gap: 1.5em;
	width: 600px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 15px;
}

div.userpanel {
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #bbb;
	margin-bottom: 10px;
	white-space: nowrap;
	background-color: #ededed;
	display: inline-block;
	width: 183px;
}

div.userpanel img {
	vertical-align: middle;
	margin: 6px;
	height: 32px;
}

#title {
	width: 300px;
}

#options {
	width: 200px;
}

#order {
	padding-right: 20px;
}

.hardline {
	height: 14px;
	margin-top: 6px;
	margin-bottom: 9px;
}

/* Main page surrounds the text between the header and the footer.  
For IE, height is set to 650 to force the footer down to the bottom of the page where the content is short.  
And the second declaration is for everyone else so that it will scroll if longer but be a minimum of 650px
*/
#mainpage {
	padding: 15px;
	text-align: left;
}
html>body #mainpage { 
	height: auto;
	min-height: 50px;
}

/* This makes the actual story text appear in a 750px box, which prevents those at 800x600 from having to scroll sideways to view the story. To remove it, just delete this css and the "div id=skinny" tag (and the closing tag) from viewstory.tpl
*/

#skinny{
	margin: auto;
	padding: 5px;
	}
	
/* The block effect without padding, for page-sized content */

.block {
	margin-bottom: 1.5em;
}

/* added this for the storyinfo box above the actual story. */

.storyinfo {
	font-size: 13px;
	display: block;
	text-align: left;
	padding: 9px;
	color: #666;
}

div.leftbox div.storyinfo span.label {
	margin-left: 6px;
}

.notes {
	padding-right: 9px;
	padding-bottom: 3px;
	padding-top: 3px;
	padding-left: 9px;
	color: #666;
	border: 1px dashed #bbb;
	margin: 12px;
}

/* Most pages use pagetitle to format the page's title */
#bio #biotitle,
#pagetitle { 
	border-top: 4px solid #000;
	border-bottom: 1px solid #c00000;
	font-size: 24px;
	color: #666;
	margin-bottom: 0;
	border-style: none;
	padding-left: 9px;
	padding-top: 4px;
	text-align: left;
	padding-right: 6px;
	text-shadow: #fff 0px 1px 0px;
}

/* 
Where there's a list of alphabet links #alphabet controls their look. 
Just to make things simpler #pagelinks controls the look of the links at the bottom of multi-page results
and will be set here too. Generally, they look alike.
*/
/* the box around the links */
#alphabet, #pagelinks {
	text-align: center;
	word-spacing: .1em;
	padding: 8px;
	
}
/* each link */
#alphabet A, #pagelinks A {
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #ffffff;
	font-size: 11px;
	border: 1px solid #7a72bb;
	background-color: #978ee7;
	text-shadow: none;
	moz-box-shadow: 0px 1px 1px #fff;
	-webkit-box-shadow: 0px 1px 1px #fff;
	box-shadow: 0px 1px 1px #fff;
	font-weight: normal;
	margin-bottom: 3px;
	line-height: 14px;
	margin-right: -1px;
	padding: 2px 3.5px;
}
/* each link when hovered over */
#alphabet A:hover, #pagelinks A:hover {
	background: #444444;
	color: #fff;
}
/* the currently selected letter and currently selected page */
#alphabet #current_letter, #pagelinks #currentpage {
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #ffffff;
	font-size: 11px;
	border: 1px solid #7a72bb;
	background-color: #666;
	text-shadow: none;
	moz-box-shadow: 0px 1px 1px #fff;
	-webkit-box-shadow: 0px 1px 1px #fff;
	box-shadow: 0px 1px 1px #fff;
	font-weight: normal;
	margin-bottom: 3px;
	line-height: 14px;
	margin-right: -1px;
	padding: 2px 3.5px;
}
/* End alphabet and page link declarations */

/* labels throughout the site in forms and in other places */
LABEL, .classification {
	color: #666;
	font-weight: normal;
	font-size: 13px;
}
/* Admin options in various places.  */
.adminoptions { 
	color: #c00000;
	padding: 4px 8px;
}

.adminoptions a { 
	-moz-border-radius: 3px;
	border-radius: 4px;
	color: #c00000;
	text-decoration: none;
	margin-right: 2px;
	margin-left: 2px;
	font-weight: normal;
	font-style: normal;
	font-size: 10px;
	padding: 1px 4px;
	border: 1px solid #c00000;
	line-height: 18px;
	white-space:nowrap;
}
	
.adminoptions a:hover {
	background-color: #444444;
	text-decoration: none;
}

.adminoptions a:active {
	background-color: #aaaaaa;
	text-decoration: none;
}

#adminmenu {
	padding: 6px;
	text-align: center;
}

/* Error messages */

.errormsg {
	-moz-border-radius: 8px;
	border-radius: 8px;
background: #ff9ad4 url(images/alert.png) no-repeat 5px center;
	color: #000;
	padding-left: 40px;
	font-weight: normal;
	width: 85%;
	vertical-align: middle;
	padding-bottom: 12px;
	padding-top: 12px;
	margin: 8px auto;
}

div.errormsg a {
	color: #59538c;
}



/* The listings of stories etc. */
/* .sectionheader styles the headings "Stories" and "Series" */
.sectionheader {
	text-align: center;
	font-size: 18px;
	font-weight: normal;
	color: #666;
	padding: 8px 8px 3px;
	border-top: 4px none #000;
	text-shadow: #fff 0 1px 0;
}

/* The box around each individual story */
.listbox {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 6px;
	padding-bottom: 6px;
	border-top: 1px solid #bbb;
}

.listboxtop {
	width: 100%;
	display: inline-block;
}

.leftbox {
	float: none;
	display: inline-block;
	width: 59%;
}

.rightbox {
	float: right;
	display: inline-block;
	width: 250px;
}

div#seriesbox {
	width: 290px;
}


/* The title bar for each story box. */

.listbox .title {
	color: #666;
	font-weight: normal;
	font-size: 20px;
	text-shadow: #fff 0 1px 0;
	padding-bottom: 4px;
	padding-left: 9px;
	padding-right: 9px;
}

.listbox .subtitle {
	color: #00;
	font-weight: normal;
	padding: 0 9px 4px;
	font-size: 13px;
}

.subtitle .label {
	font-weight: normal;
}

.subtitle .rightlabel {
	font-weight: normal;
	font-size: 13px;
	text-align: right;
	float: right;
	padding: 4px;
	padding-left: 6px;
}

.subpagetitle {
	font-size: 16px;
	padding-left: 9px;
	text-shadow: #fff 0px 1px 0px;
	color: #666;
}

.summarytext
	{
	color: #00;
	font-size: 13px;
	padding-bottom: 8px;
	padding-left: 9px;
	padding-right: 9px;
}

/* Just a generic box for general content */

.genericbox {
	padding: 6px;
	background-color: #ededed;
	font-size: 11px;
	display: block;
}

.centerbox {
	width: 350px;
	margin-right: auto;
	margin-left: auto;
	font-size: 13px;
	line-height: 1.35;
}

/* The content of the box...summary, categories, etc. */
.listbox .content,
.bigblock .content {
	text-align: left;
	-moz-column-count: 3;
	-moz-column-gap: 1.5em;
	-moz-column-rule: 1px solid #ffffff;
	-webkit-column-count: 3;
	-webkit-column-gap: 1.5em;
	-webkit-column-rule: 1px solid #ffffff;
	font-size: 10px;
	display: block;
	padding-right: 9px;
	padding-left: 9px;
}

.listbox.even .content span.label,
.listbox.odd .content span.label {
	color: #666;
}

.listbox.even .content,
.listbox.odd .content {
	color: #666;
}

.listbox .contenteven,
.listbox .contentodd {
	text-align: left;
	padding: 6px;
	font-size: 12px;
}

.listbox .storystats {
	padding-right: 9px;
	padding-left: 9px;
	color: #666;
	padding-bottom: 8px;
	font-size: 13px;
}

.storystats span.label {
	color: #666;
}

/* The tail info published date etc. on the last line */
.tail {
	padding-right: 6px;
	padding-bottom: 6px;
	padding-left: 6px;
}

/*End story/series listings */


/* bio objects */

#bio #biotitle a {
	float: right;
	position: relative;
	top: 2px;
	right: 1px;
}

#bio #biocontent {
	text-align: left;
	font-size: 13px;
	padding-right: 8px;
	padding-left: 8px;
	padding-bottom: 8px;
}

#biocontent span.label {
	color: #666;
}

/* formatting for long checkbox lists */

.checkboxlist {
	float: left;
	-moz-column-count: 3;
	-moz-column-gap: 1.5em;
	-webkit-column-count: 3;
	-webkit-column-gap: 1.5em;
	font-size: 12px;
	border-top: 1px dotted #bbb;
	margin-bottom: .5em;
	padding-top: .5em;
	padding-left: 9px;
	padding-right: 9px;
	width: 97%;
}

textarea#summary,
.submitguidebox80 textarea {
	width: 55%;
	max-width: 55%
}

div.submitinput img {
	float: none;
	padding-left: 42%;
	position: relative;
}

.submitguide {
	width: 38%;
	float: left;
	clear: none;
	color: #444;
	padding-top: 6px;
	padding-right: 18px;
	padding-left: 12px;
	font-size: 13px;
}

.submitguidewide {
	float: left;
	clear: left;
	color: #444;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-right: 18px;
	padding-left: 12px;
	font-size: 12px;
}

.submitguidebox135 {
	background-color: #ddd;
	padding: 6px;
	margin-bottom: 12px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #bbb;
	min-height: 170px;
}

.submitguidebox175 {
	background-color: #ddd;
	padding: 6px;
	margin-bottom: 12px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #bbb;
	min-height: 220px;
}

.notation {
	margin-bottom: 18px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #bbb;
	color: #666;
	font-size: 13px;
	padding: 2px 4px;
	list-style-position: outside;
	list-style-type: disc;
	opacity: 1;
	line-height: 1.35;
}

#otherresults {
	margin-left: 8px;
	color: #666;
}

.notation ul li {
	padding-right: 30px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 12px;
}

.ctrlnotation {
	margin-top: 18px;
	margin-bottom: 0px;
}

.submitguidebox80 {
	background-color: #ddd;
	padding: 6px;
	margin-bottom: 12px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #bbb;
	min-height: 100px;
}

input#storyfile.textbox {
	border-style: none;
}

#mainpage form,
.tblborder form {
	padding: 0;
}

#mainpage div.bigblock div.tblborder form div.bigblock {
	border-style: none;
	background-image: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

#sortform {
	padding-left: 6px;
	padding-right: 6px;
}

.checkboxcategories div {
	width: 100%;
}

.checkexclude {
	display: block;
	width: 18px;
	float: left;
	background-color: #bbb;
	padding-top: 3px;
}

.checkinclude {
	display: block;
	clear: none;
	margin-left: 18px;
	white-space: nowrap;
	padding-top: 3px;

}

.checkboxcolumn {
	float: left; 
	margin-top: .5em;
	padding-bottom: .5em;
	font-size: 12px;
	column-count: 3;
	column-gap: 1.5em;
	-moz-column-count: 3;
	-moz-column-gap: 1.5em;
	-webkit-column-count: 3;
	-webkit-column-gap: 1.5em;
	line-height: 12px;
}

.plusmark {
	color: #666;
	padding-right: 2px;
	padding-left: 2px;
	position: relative;
	font: bold 14px "Courier New", Courier, mono;
	margin-left: 3px;
	padding-top: 1px;
}

.minusmark {
	color: #fff;
	padding-right: 2px;
	padding-left: 2px;
	position: relative;
	font: bold 14px "Courier New", Courier, mono;
	margin-left: 3px;
	padding-top: 1px;

}

/* titleblock is used for the title information in series and challenges */
#titleblock {
text-align: left;
	-moz-column-count: 3;
	-moz-column-gap: 1.5em;
	-moz-column-rule: 1px solid #ffffff;
	-webkit-column-count: 3;
	-webkit-column-gap: 1.5em;
	-webkit-column-rule: 1px solid #ffffff;
	padding: 6px;
	display: block;
	font-size: 16px;
}

#titleinfo {
	text-align: center;
	font-weight: bold;
}


/* The pulldown jump menus on several pages. */
.jumpmenu {
	font-size: 11px;
	text-align: center;
	padding: 3px 6px;
}

.jumpmenu2 {
	font-size: 11px;
	text-align: left;
	position: absolute;
}


/* column padding */

#columncontainer {
	padding-right: 8px;
	padding-left: 8px;
}

#memberblock {
	padding-bottom: 8px;
}

#settingsform {
	margin: 0;
	width: 100%;
}

.settingsform {
	width: 425px;
	margin-left: auto;
	margin-right: auto;
}

#editbio div label {
	width: 150px;
	display: inline-block;
}

#editbio div input.textbox {
	width: 245px;
	line-height: 18px;
	margin-bottom: 5px;
	font-size: 12px;
}

#editbio div div img {
	margin-top: 12px;
	margin-bottom: 12px;
}


#editbio center div.notation {
	margin-right: 17px;
}

input.captcha,
.textbox,
#coauthorsSelect,
#coauthorsSelected,
#charid,
#editbio div input,
textarea#summary {
	border: 1px solid #aaa;
	font: 13px/18px Arial, Helvetica, "Helvetica Neue", Geneva, sans-serif;
	padding-left: 3px;
	padding-right: 3px;
}

input#title.textbox,
#storytitle,
#chaptertitle {
		width: 55%;
}

#editbio div textarea.textbox {
	width: 400px;
	margin-bottom: 5px;
	font-size: 12px;
	line-height: 18px;
}

#review.textbox {
	width: 580px;
}

.authorstats {
	line-height: 1.35;
}

#storystats tbody tr th,
#storystats tbody tr td.tblborder,
#seriesstats tbody tr th,
#seriesstats tbody tr td.tblborder
 {
	max-width: 20px;
	text-align: left;
}


/* On the story page, there's a jumpmenu at the bottom. It looks better centered, so this will replace the declaration above for that 
drop down list ONLY */
#pagelinks .jumpmenu {
	text-align: center;
}

/* This is used on series and challenges and other places where a response is solicited */
.respond { 
	text-align: center;
	padding: 6px;
	display: block;
	margin-bottom: 6px;
}

/* Story end */
.endbox {
	background-color: #ddd;
	width: 580px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	color: #666;
	margin-top: 5px;
	padding-top: 4px;
	padding-left: 4px;
	padding-right: 4px;
}

div.pagecontrols {
	margin-left: 10px;
}

.tracker,
.storyend,
.endmessage {
	text-align: center;
	font-size: 13px;
	padding-bottom: 4px;
	padding-top: 4px;
}

div.reviewform {
	width: 580px;
	margin-right: auto;
	margin-left: auto;
}



/* The sort menu on the categories page */
#sort { text-align: center; margin: 1em; }


/* On pages that don't use listings, the content is surrounded by a div labeled output to */
#output { 
	padding: 10px;
}

/* User Profile stuff */
/* The top list of information */


/* The sort menu in the profile */
#profile #sort {
	text-align: right;
 }

#profilesort {
	float: right;
	position: relative;
	bottom: 32px;
	right: 6px;
}
/* The following declarations control the tabs */
/* The outer tab box */
div#tabs {
	text-align: center;
	margin: 6px auto -24px;
	clear: both;
	position: relative;
	bottom: 14px;
}
/* The individual tabs. */
.tabbutton,
.next,
.prev,
.collapsible a,
#tabs span {
	font-size: 10px;
	padding: 3px;
	white-space: nowrap;
	-moz-box-shadow: 0px 1px 2px #666;
	-webkit-box-shadow: 0px 1px 2px #666;
	box-shadow: 0px 1px 2px #666;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background-color: #ededed;
	line-height: 2.5;
	margin-left: 4px;
	margin-right: 4px;
	border: 1px solid #bbb;
}
/* Links in the tabs */

#tabs #active {
	background: #666;
	color: #fff;
	border: 1px solid #666;
	white-space: nowrap;
}

#tabs #active a {
	background: #666;
	color: #fff;
	white-space: nowrap;
}

/* This controls the look of the blocks on the index page.   */

/* The box around the block */
.bigblock,
.block { 
	-moz-border-radius: 12px;
	border-radius: 12px;
	background: url(images/blockbg.gif) top left repeat-x #ededed;
	border: 1px solid #eee;
	-moz-box-shadow: 0px 1px 6px #666;
	-webkit-box-shadow: 0px 1px 6px #666;
	box-shadow: 0px 1px 6px #666;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#666666')";
/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#666666');
}

/* The block's title */
.block .title {
	border-top: 4px solid #000;
	border-bottom: 1px solid #c00000;
	font-size: 24px;
	color: #666;
	margin-bottom: 0;
	border-style: none;
	padding-left: 9px;
	padding-top: 6px;
	text-shadow: #fff 0 1px 0;
}

/* The block's content */
.block .content {
	padding: 9px;
	text-shadow: none;
}

#leftindex { 
	width: 200px;
	float: left;
}

#rightindex {
	margin-left: 220px;
}


/* The next link at the bottom of a multi-chapter story */
#next { float: left;
	font-size: 11px;
}

#next a{ 
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #7a72bb;
	text-decoration: none;
	font-weight: normal;
	font-style: normal;
	font-size: 10px;
	margin-right: 0;
	line-height: 14px;
	margin-left: 4px;
	padding: 2px 4px;
	height: 16px;
	background-color: #f6ff81;
}

#next a:hover {
	background-color: #444444;
	text-decoration: none;
	border: 1px solid #444444;
	color: #fff;
}

#next a:active {
	background-color: #aaaaaa;
	text-decoration: none;
}

/* The previous link at the bottom of a multi-chapter story */
#prev { float: left;
	font-size: 11px;
	margin-right: 8px;
}

#prev a{ 
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #7a72bb;
	text-decoration: none;
	font-weight: normal;
	font-style: normal;
	font-size: 10px;
	margin-right: 0;
	line-height: 14px;
	height: 16px;
	padding: 2px 4px;
	float: none;
}

#prev a:hover {
	background-color: #444444;
	text-decoration: none;
	border: 1px solid #444444;
	color: #fff;
}

#prev a:active {
	background-color: #aaaaaa;
	text-decoration: none;
}

#browse #category_content { width: 95% !important; margin: 1em auto; }

.row {
	padding-bottom: 12px;
}

.column {
}

.categorycolumn div {
	float: left;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #bbb;
	padding: 1%;
	height: 210px;
	margin-right: 1%;
	margin-left: 1%;
	margin-bottom: .5%;
	width: 29%;
}

.categorycolumn div img {
}

.borderbox {
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #bbb;
	padding: 1%;
	margin-right: 1%;
	margin-left: 1%;
	margin-bottom: .5%;
	width: 94.5%;
}

#chapterlist {
	text-align: left;
	padding: 6px;
}

#loginblock { 
	margin: 3px 0 0 0;
	text-align: left;
	padding: 0;
}

#loginblock .textbox #loginblock .checkbox {
	display: block;
}

#loginblock .button { 
	padding: 2px 4px; 
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	float: right;
	margin-right: 0;
	margin-left: 20px;
	margin-bottom: 0;
}

#loginblock label {
	display: inline-block;
}

input#password.textbox, input#penname.textbox,
input#pswd.textbox  {
	display: block;
	font-size: 12px;
	width: 97%;
}

input#password.textbox {
	margin-bottom: 5px;
}

div#login.label {
	text-align: left;
}

#cookiecheck {
	display: inline;
	margin-left: 0;
	margin-right: 5px;
}
#loginlinks {
	display: block;
	margin-top: 8px;
}
#loginlinks A {
	color: #7a72bb;
}

.label
	{}

.labelbuffer
	{
	margin-right: 6px;
}

.sublabel {
	color: #777;
}	

#tabs span span {
	font-size: 10px;
	padding: 0px;
	white-space:nowrap;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	-moz-border-radius: none;
	border-radius: none;
	background-color: transparent;
	line-height: none;
	margin-right: 0;
	border: none;
	background-image: none;
	display: inline-block;
	margin-left: 2px;
}

#viewuser form label {
	display: block;
}

#viewuser form textarea.textbox,
#viewuser form input.textbox {
	width: 100%;
	margin-bottom: 10px;
}

#active span.count {
	color: #fff;
}
.count {
	color: #777;
	padding-left: .3em;
	font-size: 11px;
	display: inline;
	white-space: nowrap;
}

#story {
	text-align: left;
	font: 16px/140% Georgia, "Times New Roman", Times, serif;
	background-color: #fff;
	direction: ltr;
	border-top: 1px solid #bbb;
	border-bottom: 1px solid #bbb;
	padding: 20px;
	margin: 6px auto;
}

.newsbox { 
	border-bottom: 1px solid #000;
	border-style: none;
	background-color: #f6ff81;
	color: #000;
	margin-bottom: 0px;
	padding: 5px;
	font-size: 11px;
	max-width: 400px;
	font-weight: normal;
	font-style: normal;
	-moz-box-shadow: 3px 3px 4px #bbb;
	-webkit-box-shadow: 3px 3px 3px #bbb;
	box-shadow: 3px 3px 4px #bbb;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#d3d3d3')";
/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#d3d3d3');
	margin-right: 16px;
}

.commenteven,
.commentodd {
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #bbb;color: #666;
	margin: 8px;
	padding: 5px;
}

.commentsig {
	font-size: 11px;
	text-align: right;
}

.newstitle {font-weight: bold; font-size: 11px; border-bottom: 1px dashed #999; margin-bottom: 5px;}

.bigblock .newsbox {
	text-align: left;
	margin-left: 20%;
	margin-right: 20%;
}

.recentstory {padding-bottom: 12px;}
.featuredstory {padding-bottom: 12px;}

table {font:12px arial;}

.blockinner {
	margin: 9px;
	font-size: 13px;
}

.blockinnermed {
	width: 60%;
	margin-right: 20%;
	margin-left: 20%;
	color: #666;
	margin-bottom: 9px;
}

.blockinnermed textarea {
	width: 100%;
}

.centerobj {
	margin: auto;
	text-align: center;
}

.blockinnersmall {
	margin-right: 40%;
	margin-left: 40%;
	color: #666;
	margin-bottom: 9px;
	font-size: 13px;
}

td.arrow {
	align: center;
	width: 16px;
}

td.arrow a img {
	align: center;
}



/* Dumb little work-around hackish thing to make sure a page-wide box doesn't show on the index page */

#index #container #mainpage div.bigblock {
	background: none;
	text-shadow: none;
	border: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

select {
	text-align: left;
	font: 13px/1.35 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	border: 1px outset #bbb;
}

#skin select {
	margin-left: 8px;
}

span.sbname,
span.sbdatetime {
	font-size: 11px;
	color: #777;
}

div#submitdiv {

	padding-top: 6px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

input#shout,
input#submit,
input.button,
input.submit {
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #ffffff;
	border: 1px solid #7a72bb;
	background-color: #978ee7;
	text-shadow: none;
	moz-box-shadow: 0px 1px 1px #fff;
	-webkit-box-shadow: 0px 1px 1px #fff;
	box-shadow: 0px 1px 1px #fff;
	font: normal 11px/14px Arial, Helvetica, "Helvetica Neue", Geneva, sans-serif;
	text-decoration: none;
	padding: 2px 4px;
	height: 20px;
	vertical-align: middle;
}

#settingsform form.tblborder {
	margin-right: 0;
	margin-left: 0;
}

#settingsform form.tblborder div#submitdiv,
.buttoncenter{
	margin-right: 45%;
	margin-left: 45%;
	text-align: center;
	margin-bottom: 8px;
	padding-bottom: 8px;
}

input#submit:hover,
input.button:hover {
	background: #444444;
	color: #fff;
	}

.favlist {
	width: 130px;
	margin-right: auto;
	margin-left: auto;
	padding: 8px;
}
	
td.tblborder>strong {
	font-weight: normal;
	font-style: normal;
	margin-left: 15px;
}

 table.tblborder tbody tr {
	line-height: 200%;
	border-bottom: 1px solid #bbb;
}
	
 table.tblborder tbody tr.tblborder {
	line-height: 16px;
	border-top-style: dotted;
	border-top-width: 1px;
}



/* pophelp */

a.pophelp {
	top: 5px;
	border-style: solid;
	border-width: 1px;
	padding-right: 2px;
	padding-left: 2px;
	border-radius: 4px;
	font-size: 10px;
	margin-left: 10px;
}	
	
a.pophelp:hover {
	top: 5px;
	padding-right: 2px;
	padding-left: 2px;
	border-radius: 4px;
	font-size: 10px;
	margin-left: 10px;
	background-color: #666;
	color: #fff;
	border: 1px solid #7a72bb;
}	

a.pophelp:hover span{ /*the span will display just on :hover state*/
    display:block;
    position: absolute;
    top: -3em; left: 8em;
    width: 225px;
    text-decoration: none;
    text-align: left;
    padding: 5px;
    font-weight: normal;
    visibility: visible;
	-moz-border-radius: 12px;
	border-radius: 12px;
	background: url(images/blockbg.gif) top left repeat-x #ededed;
	border: 1px solid #eee;
	-moz-box-shadow: 0px 1px 6px #666;
	-webkit-box-shadow: 0px 1px 6px #666;
	box-shadow: 0px 1px 6px #666;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#666666')";
/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#666666');}
	
/* hidable item css */

.twisty:hover {
    }

.collapsible {
    margin-top: 0px;
    }

.collapsible a:link {
      color: #7a72bb;
    }

.collapsible a img {
      border: none;
    }
    
.collapsible>div {
      margin: 2px;
    }

.collapsible>div>div {
      padding: 0px;
    }

.collapsible a {
	margin-left: 10px;
}

.collapsible a:hover {
	color: #000;
}

.collapsible a:active {
	color: #000;
}

/* Mail style  */

div.mailform {
	width: 80%;
	margin-right: 10%;
	margin-left: 10%;
	text-align: left;
}

div.mailform {
	background: url(images/frontpagecollection.png) no-repeat right top;
	padding-top: 80px;
}

div.mailform form textarea.textbox, div.mailform form textarea
 {
		font: 13px/1.35 helvetica, "helvetica neue", arial;
		width: 100%;
}

/* search boxes */

.searchbox {
	float: left;
	width: 49%;
	padding-top: 18px;
	padding-bottom: 18px;
}

.halfbox {
	float: left;
	width: 49%;
	margin-bottom: 5px;
	padding-top: 5px;
	font-size: 13px;
	line-height: 24px;
}

/* for when two bigblocks happen back-to-back happens */

#mainpage div.bigblock div.bigblock,
.bigblock .bigblock {
	background: none;
	border: 1px solid #bbb;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border: none;
}

/* styling for stories */

#story HR {
	height: 11px;
  	background: #fff url(/images/break.png) no-repeat scroll center;
}

#story span img {
	max-width: 100%;
	display: block;
	margin: 4px auto;
}

img.leftwrap {
	float: left;
	padding-right: 8px;
}

img.rightwrap {
	float: right;
	padding-left: 8px;
}

/* contact page*/

#contact form label {
	height: 23px;
	display: inline-block;
	width: 100px;
}

#contact form div span.label {
	color: #666;
	margin-right: 12px;
}

#contact form div input {
	border: 1px solid #aaa;
	padding-left: 3px;
	padding-right: 3px;
}

#contact form textarea.textbox,#contact form input.textbox {
	width: 100%;
	margin-bottom: 12px;
}

/* club formatting */

div#club.content {
	padding: 0;
}



textarea#shout_message.mceNoEditor {
	width: 175px;
	max-width: 175px;
	max-height, height: 50px;
	margin-bottom: 5px;
}

div#shoutlist {
	width: 180px;
	max-width: 180px;
	height: 340px;
	overflow: auto;
	margin-bottom: 8px;
	border: 1px solid #bbb;
}

div.shoutmessage {
	margin-bottom: 12px;
	margin-left: 4px;
	margin-right: 4px;
}

#shoutlist div.shoutmsg a {
	margin-left: 4px;
	margin-right: 4px;
	font-size: 12px;
}

div.shoutarchives {
	width: 75%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 12px;
	margin-bottom: 12px;
	height: 400px;
	overflow: auto;
	border: 1px solid #bbb;
}

div.shoutarchives div.tblborder {
	padding-right: 12px;
	padding-left: 12px;
}



input#counter.small {
	border-style: none;
	background-color: transparent;
	width: 25px;
	float: right;
	text-align: right;
	color: #666;
	font: 11px Helvetica;
}

.clubblock {
	border-top: 1px solid #bbb;
	margin-bottom: 8px;
	padding-top: 8px;
	padding-right: 9px;
	padding-left: 9px;
	margin-top: 6px;
}

div.shoutmsg {
	text-align: left;
	direction: rtl;
	font-size: 11px;
}

span.clubtititle,
#shoutbox div label {
	text-shadow: #fff 0 1px 0;
	color: #777;
}

#picks div.featuredstory {
	margin-bottom: 4px;
	padding-bottom: 0;
	color: #777;
	margin-top: 4px;
}

#who_online {
	color: #777;
}

div.showcase {
	background-color: #ddd;
	border-top: 1px solid #bbb;
}

div.inprogress {
	border-top: 1px solid #bbb;
}

div.categoryicon img {
	width: 60px;
		float: right;
	white-space:nowrap;
	text-shadow: none;
	padding: 2px 4px;
	margin: 3px 0 0 4px;
	vertical-align: middle;
	height: 60px;
}

/* CSS for embedded forum page */

.frame-area {
  display: block;
  width: 100%;  /* RESPONSIVE WIDTH */
  max-width: 400px;
  height: 300px;
  overflow: hidden;  /* EDIT TO auto FOR  SCROLLBAR */
  border: #999999 1px solid;
  margin: 0px;
  padding: 0px;
  }