/* Some definitions used everywhere */
body { background-color: #C9C8A7; color: #5d654a; margin: 0px; padding: 0px; cursor: default; font-size: 14px;}
a {color: #5d654a; font-weight: bolder; text-decoration: none;}
a:hover {color: #cad6bb; text-decoration: none; cursor: w-resize;}
h1 {text-align: center; border-bottom: #cad6bb dashed thin; width: 90%;}
img {border: 0; padding: 0; margin: 0;}
select {background-color: #C9C8A7; color: #5d654a;}
.textbox {background-color: #C9C8A7; color: #5d654a;}
#shout_message {background-color: #C9C8A7; color: #5d654a; border: display: block; width: 90%; margin: 0 auto;}
.mceNoEditor {background-color: #a2ae86; color: #5d654a; border: none; display: block; width: 90%; margin: 0 auto;}
input {background-color: #C9C8A7; color: #5d654a;}
th { background: #C9C8A7; color: #5d654a; font-weight: bold;}
#adminarea table { width: 100%;}
#settingsform { width: 50%; margin: 0px;}
#settingsform  .textbox {width: 50%;}
td {padding: 6px; border-bottom: #593333 double 4px}
/* the box at the top of the page */
#banner {background: scroll #593333 url(images/bkgr.gif) center repeat; height: 140px; border-bottom: #593333 double 4px; text-align: left; margin: 0px; width: 100%;}
/* The appearance of your site's name in the banner area*/
#sitename {font-family: Georgia, "Times New Roman", Times, serif; color: #C9C8A7; font-size: 100px; text-align: left; text-transform: uppercase; letter-spacing: -12px; line-height: 54px; padding: 0px; position: absolute; top:25px; left: 50px; right: 50px;}
#sitename::first-letter { font-family: "MA Sexy", "Monotype Corsiva", Verdana, sans-serif;}
/* The appearance of your site's slogan in the banner area */
#slogan {color: #C9C8A7; background-color:#192424; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif; text-align: left; padding: 0px 4px; position: absolute; top: 50px; letter-spacing: 12px; left: 150px; text-transform: lowercase; font-weight:bold; width: auto;}
/* The location of the div containing the skin change drop menu  in the banner area */
#skin {position: absolute; right: 30px; top: 115px;}
/* 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 {text-align: center; margin: 0px; padding: 4px; position: relative; top: 0px;}
#menu ul {list-style: none; text-align: center; margin: 0px auto;}
#menu li {display: inline; margin: 0px 10px;}
/* links in the menu */
#menu a {color: #5d654a; font-weight: bold; text-decoration: none; padding-left: 2px; padding-right: 20px;}
/* Hovered links in the menu */
#menu a:hover {background-attachment: scroll; background-color: #b7c4a0; background-image: url(images/bullet.jpg); background-position: right center; background-repeat: no-repeat; padding-left: 2px; padding-right: 20px; color: #5d654a;}
/* The link for the currently displayed page in the menu */
#menu #current {text-decoration: none; letter-spacing: 4px; background: scroll #b7c4a0 url(images/bullet.jpg) right center no-repeat;}
/* end menu setup */
/* the footer box at the bottom of the page */
#footer {border-top: 3px double #5d654a; background: scroll #593333 url(images/bkgr.gif) center repeat; color: #000000; padding: 10px 0px; clear: both;}
#foottext {color: #C9C8A7; background-color:#192424; font-size: 9px; width: 100%; padding: 0px;}
/* End universal page setup */
/* this is a carryover from 1.1.  Generally it is used around tables and table cells. */
.tblborder { }
.storytable {margin: 0px auto; width: 98%;}
.storytable tr td:first-child {border-right: #593333 4px double; border-bottom: #593333 4px double; width: 50px !important;}
.storytable tr td:last-child {border-left: #593333 4px double; border-bottom: #593333 4px double;}
/* 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 {height: 550px; padding: 6px; background: #C9C8A7; margin-top: 0px;}
html>body #mainpage {height: auto; min-height: 550px;}
/* Most pages use pagetitle to format the page's title */
#tens #pagetitle { margin-left: 206px;}
#tens .newsbox {margin-left: 206px;}
#search form {background-color: #BAB67D; border-bottom: #593333 double 4px; margin: 0px; padding: 12px 0px; width: 100%; height: 100%; }
#challenges form {background-color: #BAB67D; border-bottom: #593333 double 4px; margin: 0px; padding: 12px 0px; width: 100%; height: 100%; }
#contactus #rightindex, #login #rightindex, #manfavs #rightindex, #addstory #rightindex, #stories #rightindex, #editbio #rightindex, #editprefs #rightindex, #stats #rightindex, #logout #rightindex, #register #rightindex, #adminarea #rightindex {background-color: #BAB67D; border-bottom: #593333 double 4px; margin: 0px 0px 0px 206px; padding: 0px 0px 0px 0px; overflow: hidden;}
#adminarea #rightindex {border-top: #593333 solid 35px; text-align: center; width: inherit;}
#adminarea #rightindex form {text-align: left; width: 98% !important; margin: 0px auto;}
#adminarea #rightindex label {padding: 0px; font-size: 12px;width: 50% !important;}
#pagetitle {background: #593333; color: #C9C8A7; font-weight: bold; font-size: 16px; text-align: center; padding: 6px; border-bottom: #5F776E double 4px; margin: 0px;}
#columncontainer { background-color: #BAB67D; border-bottom: #593333 double 4px; margin: 0px; padding: 12px 0px; width: 100% !important; height: 100%;}
.column div { text-align: center; margin: 7px 6px;}
.column img {}
#browseblock { }
.respond {background-color: #BAB67D; margin: 0px;}
#alphabet {background-color: #BAB67D; border-bottom: #593333 double 4px; margin: 0px 0px 6px 0px; padding: 6px; text-align: center;}
#top10list {background-color: #BAB67D; border-bottom: #593333 double 4px; margin: 0px 0px 0px 206px !important; padding: 12px;}
/* 
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 */
#pagelinks {
	text-align: center;
	word-spacing: -.3em;
	margin: 1em;
}
/* each link */
#alphabet A, #pagelinks A {
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	border-collapse: collapse;
	padding: 0 6px;
}
/* each link when hovered over */
#alphabet A:hover, #pagelinks A:hover {
	color: #333;
}
/* the currently selected letter and currently selected page */
#alphabet #current_letter, #pagelinks #currentpage {
	background: #FFF;
	color: #333;
	font-weight: bold;
	border: 1px solid #CCC;
	padding: 0 2px;
}
/* End alphabet and page link declarations */
/* .sectionheader styles the headings "Stories" and "Series" */
.sectionheader {text-align: center; font-size: 22px; font-weight: bold; color: #593333;}
#sortform { text-align: center; font-size: 12px;}
/* labels throughout the site in forms and in other places */
LABEL, .classification {
	color: #5d654a;
	font-weight: bold;
	width: auto;
}
/* Admin options in various places.  */
.adminoptions { 
	color: #666;
	font-weight: bold;
}

/* The listings of stories etc. */

/* The box around each individual story */
.listbox {background-color: #BAB67D; border-bottom: #593333 double 4px; margin-bottom: 6px; margin-left: 206px;}
#help .listbox, #aff .listbox, #award .listbox, #wedcal .listbox {background-color: #BAB67D; border-bottom: #593333 double 4px; margin-bottom: 6px; margin-left: 0px;}
table.writecal { width: 546px; border: #593333 2px solid;}
.writecal td {max-width: 78px; min-width: 78px;}
td.writehdr {background: #5F776E; color: #fff; font-size: 24px; font-weight: bold; border: none;}
tr.writeday td {border: #593333 4px double; font-weight: bold; color: #fff;}
tr.writeday td:last-child {}
td.writedate {border-right: #593333 4px double; border-left: #593333 4px double; border-bottom: #593333 1px solid; background-color: #C9C8A7; color: #5d654a; text-align: center;}
td.nowritedate {border-right: #C9C8A7 4px double; border-left: #C9C8A7 4px double; border-bottom: #C9C8A7 1px solid; background-color: #593333; color: #C9C8A7;}
td.writedate:last-child, td.nowritedate:last-child {}
td.blank {background-color: #5f776e; border-bottom: #593333 1px solid;}
td.writedate div.number {border: #5d654a dotted thin; float: right; margin: 0px; padding: 0px 8px 0px 8px; vertical-align: top; width: 30px; height: 25%; text-align: right;}
td.nowritedate div.number {border: #C9C8A7 dotted thin; float: right; margin: 0px; padding: 0px 8px 0px 8px; vertical-align: top; width: 30px; height: 25%; text-align: right;}
/* The title bar for each story box. */
.listbox .title {background: #593333; color: #C9C8A7; font-weight: bold; padding: 6px; border-bottom: #5F776E double 4px; font-size: 16px;}
/* Because the background is black, the link colors need to be changed. */
.listbox .title A {color: #ffffff;}
.listbox .title a:hover {font-weight: bold;}
/* The content of the box...summary, categories, etc. */
.listbox .content {padding: 6px;}
/* The tail info published date etc. on the last line */
.listbox .tail {text-align: center;}
.notes { background-color: #BAB67D; border-bottom: #593333 double 4px; margin-bottom: 6px;}
.notes .title {background: #593333; color: #C9C8A7; font-weight: bold; padding: 6px; border-bottom: #5F776E double 4px;}
#storynav {background-color: #BAB67D; border-bottom: #593333 double 4px; border-top: #593333 double 4px; margin-bottom: 6px; text-align: center;}
.story {background-color: #BAB67D; border-bottom: #593333 double 4px; border-top: #593333 double 4px; margin-bottom: 6px; padding: 8px;}
/* And again because of the black background change the color of the links. */
.listbox .tail A {}
.listbox .tail a:hover {}
/*End story/series listings */
/* titleblock is used for the title information in series and challenges */
#titleblock {
	margin: 0 10%;
}

/* The pulldown jump menus on several pages. */
.jumpmenu { display: block;}

/* 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;
}

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


/* 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 */
#profile {
}
/* The sort menu in the profile */
#profile #sort {
	text-align: right;
	font-weight: bold;
	color: #666;
 }
/* The following declarations control the tabs */
/* The outer tab box */
#tabs {
	background: #a3af85;
	border-top: 1px dashed #cad6bb;
	border-bottom: 1px dashed #cad6bb;
	text-align: center;
	margin: 0;
	padding: 0;
}
/* The individual tabs. */
#tabs span {
	font-size: 12px;
	padding: 3px;
}
/* Links in the tabs */

#tabs #active {
	color: #666;
	letter-spacing: 4px;
}

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

/* The box around the block */
.block { background-color: #BAB67D; border-bottom: #593333 double 4px; margin-bottom: 6px;}
/* The block's title */
.block .title {background: #593333; color: #C9C8A7; font-weight: bold; padding: 6px; border-bottom: #5F776E double 4px;}
/* The block's content */
.block .content {padding: 6px;}
.block .storyinfo {padding: 6px; text-align: center;}
#leftindex { width: 200px; float: left;}
html>body #leftindex {}
#tens #rightindex {margin-left: 0px;}
#rightindex {margin-left: 206px;}
.newsbox {background-color: #BAB67D; border-bottom: #593333 double 4px; border-top: #593333 double 4px; margin-bottom: 6px;}
#welcome .title { content: "Welcome";}
/* The next link at the bottom of a multi-chapter story */
#next { margin: 0px 6px;}
/* The previous link at the bottom of a multi-chapter story */
#prev {margin: 0px 6px;}

#browse #category_content { width: 95% !important; margin: 1em auto; }
.delicious-posts { margin: 6px; width: auto; }
.delicious-posts ul, .delicious-posts li, .delicious-banner {list-style: none;}
.delicious-post {background-color: #BAB67D; border-bottom: #593333 double 4px; margin-bottom: 6px;}
.delicious-even {}
.delicious-odd {}
.delicious-banner {background: #5F776E; color: #C9C8A7; font-weight: bold; padding: 6px; border-bottom: #593333 double 4px; font-size:16px;}
.delicious-banner a {color: #C9C8A7;}
.delicious-link {background: #5F776E; color: #C9C8A7; font-weight: bold; padding: 6px; border-bottom: #593333 double 4px; display: block;}
.delicious-tag { font-size: 7px; margin: 0px 6px 6px 0px; padding: 6px;}
.delicious-tag:after {}
.delicious-tag:last-child:after {}
.delicious-extended { margin: 8px 6px 8px 6px; font-style: italic; padding: 6px;}