/* Definitiongs used on pages throughout the site */

BODY { background: #FFFFFF; color: #000000; margin: 0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px;}

IMG { border: 0; margin: 0; padding: 0; }

LABEL { font-weight: bold; color: #006599; }

TH { padding: 6px; background: #336; color: #FFFFFF; }
.tblborder { border: 1px solid #336; padding: 5px; border-collapse: collapse; }

/* The top banner graphic */
#banner { background: url(images/Banner.jpg): right; padding-bottom: 1ex;}

/* The links in the white space on the site */
A:link { color: #336; font-weight: bold; text-decoration: none;}
A:visited { color: #336; font-weight: bold; text-decoration: line-through; }
A:hover { color: 336; font-weight: bold; text-decoration: underline; }
A:active { color: 336; font-weight: bold; text-decoration: underline overline; }

.block_title { padding-left: 3px; }

/* Page titles */
#pagetitle { font-size: 20px; color: #336; padding: 5px;}
#pagetitle a:visited { text-decoration: none; }
#pagetitle:first-letter { font-size: 24px; font-weight: bold; background: 006599; border: 1px solid #336; padding: 3px; }

/* The alphabet links on titles and members pages etc. and the page links on multi-page results */
#alphabet { text-align: center; font-size: 13px; margin: 1em 0; word-spacing: -0.5em; line-height: 25px;}
#pagelinks { text-align: center; font-size: 13px; margin: 1em 0; word-spacing: -0.5em;}
#alphabet a, #pagelinks a { background: 0099CC; border: 1px solid #336; padding: 2px 4px; margin: 0; text-decoration: none; color: #336;}
#alphabet #currentletter, #pagelinks #currentpage { background: #336; color: 0099CC; border: 1px solid #336; padding: 2px 4px; margin: 0; text-decoration: none; }

.sectionheader { text-align: center; font-size: 16px; color: 336; font-weight: bold; margin: 1em;}
.sectionheader:first-letter { font-size: 18px; background: 006599; border: 1px solid #336; padding: 2px; }

/* To force the left and right column backgrounds down to the end of main area we put them on these container tags then force the 
containers to include all three columns */
#container1 { background: url(images/curve_lt.gif) repeat-y; background-position: left -40px; }
#container2 { background: url(images/curve_rt.gif) repeat-y; background-position: right -32px; }

/* The left column */
#left { width: 130px; margin-right: 10px; float: left;}

/* The right column (on pages where such exists */
#right { width: 130px; float: right;}

/* The center column.  The viewstory page has an exception farther down.*/
#mainpage { margin: 0 150px; padding-top: 30px; padding-left: 10px; background: url(images/curve-top.gif) repeat-x top left; height: 450px; }
html>body #mainpage { height: auto; min-height: 450px; }

/* An emtpy div at the bottom of #mainpage that displays the bottom curve */
#abovefooter { margin: 0 134px; height: 35px; background: url(images/curve_bottom.gif) repeat-x; background-position: bottom; position: relative; z-index: 10; }

/* our footer */
#footer { background: #336; padding: 10px; color: #FFF; }

#skin { margin: 7px; position: relative; }

/* Welcome message on index page.*/
#welcome { font-size: 17px; font-family: Arial, sans-serif; width: 70%; margin: 1em auto; padding-top: 2em; color: #336;}

/* The login block */
#login { float: right;}
#login .textbox { font-size: 9px; vertical-align: baseline;}
#login .button { font-size: 8px; padding: 0; margin: 0; font-weight: bold; font-family: "Arial"; vertical-align: text-bottom; }
#login FORM { display: inline; word-spacing: 0.2em; margin-right: 10px; }
#login LABEL { color: #000000; }
#today { text-align: left; margin: 0; padding: 4px; background: #006599; border: 1px solid #FFF; border-left: 0; border-right: 0; color: #FFFFFF; font-weight: bold; margin-bottom: 1em; }

/* Categories block */
#block_categories { border: 2px solid #006599; background: #FFF; color: #336;  font-size: 13px; margin: 7px; margin-left: 0; padding: 4px 0; }
#block_categories a:link { color: #006599; padding-left: 9px; font-weight: bold; text-decoration: none; }
#block_categories a:visited { color: #006599; padding-left: 9px; font-weight: bold; text-decoration: none;}
#block_categories a:hover { color: #336; padding-left: 9px; font-weight: bold; text-decoration: underline;}
#block_categories a:active { color: #336; border-left: 5px solid #FFF; padding-left: 4px; font-weight: bold; text-decoration: underline;}
/* End Categories block */

/* Menu2 block (Browse By:) */
#block_menu2 { border: 2px solid #006599; background: #FFF; color: #336;  font-size: 13px; margin: 7px; margin-left: 0; padding: 4px 0; }
#block_menu2 a:link { color: #006599; padding-left: 9px; font-weight: bold; text-decoration: none; display: block;}
#block_menu2 a:visited { color: #006599; padding-left: 9px; font-weight: bold; text-decoration: none; display: block;}
#block_menu2 a:hover { color: #336; padding-left: 9px; font-weight: bold; text-decoration: underline; display: block;}
#block_menu2 a:active { color: #336; border-left: 5px solid #FFF; padding-left: 4px; font-weight: bold; text-decoration: underline; display: block;}
#block_menu2 #current { background: url(images/bullet_669.gif) no-repeat left; }
/* End Menu2 block */

/* Menu block (Navigation) */
#menu { color: #FFF; font-weight: bold; font-size: 13px; margin-left: 7px; border: 1px solid #FFF;}
#menu a { display: block; margin-left: 5px;}
#menu a:link, #menu a:visited { color: #FFF; border-left: 5px double #FFF; padding: 2px 3px; background: #006599; text-decoration: none;}
#menu a:hover { color: #006599; border-left: 5px double #006599; padding: 2px 3px; background: #FFF;}
#menu a:active { color: #FFF; border-left: 5px solid #FFF; padding: 2px 3px; background: #006599;}
#menu #current { border-left: 5px solid #336; color: #336; background: #FFF;}
/* End Categories block */

/* Recent block - index only */
#recent_block { margin: 0 4%; border: 1px solid #336; margin-bottom: 2em; }
#recent_block .block_title { background: url(images/h-dotline.gif) repeat-x bottom #336; padding-bottom: 15px; }
#recent_block .content { padding: 8px; background: url(images/h-dotline.gif) repeat-x bottom; padding-bottom: 20px; }
/* End Recent block */

/* News block -index only */
#news_block { margin: 0 4%; border: 1px solid #336; margin-bottom: 2em; }
#news_block .block_title { background: url(images/h-dotline.gif) repeat-x bottom #336; padding-bottom: 20px; }
#news_block .content { background: url(images/h-dotline.gif) repeat-x bottom; padding-bottom: 20px; }
#newsarchive { background: url(images/h-dotline.gif) repeat-x top #336; padding-top: 20px; text-align: center;}
.newsodd { background: url(images/v-dotline.gif) repeat-y; background-position: 15px top; border: 1px solid #336; border-left: 0; border-right: 0;  padding: 8px; padding-left: 50px; }
.newseven { background: url(images/v-dotline.gif) repeat-y; background-position: right top; border: 1px solid #336; border-left: 0; border-right: 0;  padding: 8px; padding-right: 30px; margin-right: 15px; }
#newsarchive a { color: #FFF; font-weight: bold; text-decoration: underline; }
.newstitle { font-size: 15px; color: #006599; font-weight: bold;}
.sig { font-style: italic; }
/* News archive page gets slightly different treatment.  And to be lazy doubleup and use this for reviews as well. */
#news .newsodd, #news .newseven,  #reviews .newsodd,  #reviews .newseven { margin: 1em 4%; border: 1px solid #336; }
/* End News block */

/* Story and Series blocks */
.listbox { margin: 1em 4%; border: 1px solid #336; }
.listbox .title { background: #336; color: #FFF; font-size: 14px; padding: 3px; }
.listbox .contentodd { background: url(images/v-dotline.gif) repeat-y; background-position: 15px top; padding: 8px; padding-left: 50px; }
.listbox .contenteven { background: url(images/v-dotline.gif) repeat-y top right; padding: 8px; padding-right: 30px; margin-right: 15px; }
.listbox .classification, .listbox .adminoptions { color: #006599; font-weight: bold; }
.listbox .tail { background: #336; color: #FFF; font-size: 13px; text-align: right; padding: 3px;}
.listbox .tail .classification { font-weight: bold; color: #FFF; }
.listbox .tail a, .listbox .title a { color: #BABACF; text-decoration: underline; }

/* If you want to change the appearance of the featured and retired images w/o changing the images themselves (alignment, float, etc) */
.featuredimage { float: right; }
.retiredimage { float: right; }
/* End Story and Series blocks */

/* for the sort box on the categories page */
#sort_categories { position: absolute; margin: 4px;}
#sort_categories FORM { background: #BABACF; border: 2px  solid #006599; padding: 3px; 5px; width: 160px;}
#sort_categories .textbox { font-size: 10px;  margin: 2px; }
#sort_categories .button { font-size: 8px;  font-family: "Arial"; margin: 0; padding: 0; vertical-align: text-bottom;}
/* end categories sort */

/* To make sure the categories sort doesn't float over the categories add a little left padding :) */
#categoriesblock { margin: 0 2%; }
html>body #categoriesblock { float: none; display: table; width: 100%; }
#columnblock { display: table-row !important; }

/* for the options on the viewuser page to show the user's stories or favorites */
#tabs { position: absolute; margin: 4px; background: #006599; border: 1px solid #336; font-size: 12px; color: #FFF; width: 160px;}
#tabs DIV { border: 2px solid #FFF; border-bottom: 0; margin: 0; padding: 3px;}
#tabs a { padding-left: 7px;}
#tabs a:hover { color: #FFF; }
#tabs .textbox{ font-size: 12px; }
#tabs FORM { display: block; font-weight: bold; border: 2px solid #FFF; padding: 3px; margin: 0; }
#tabs #active { background: url(images/bullet_FFF.gif) no-repeat left 5px;  }
#tabs #active a { text-decoration: none; }

/* Author profile information on viewuser page */
#bio { margin: 1em 4%; border: 1px solid #336;}
#bio #biotitle { background: url(images/h-dotline.gif) repeat-x #336 bottom; padding: 5px; padding-bottom: 20px; color: #BABACF; }
#bio #biotitle a { color: #BABACF; }
#bio #biotitle .classification { color: #FFF; }
#userprofile .adminoptions { color: #006599; font-weight: bold; margin: 1em; }
#userprofile .listbox .adminoptions { margin: 0; }
#bio .classification { color: #336; font-weight: bold; }
#bio #biocontent { padding: 5px; }
/* the clearfix class fixes certain problems with display in IE.  if you have disappearing backgrounds and/or text in a div adding this class to the PARENT might help */

/* The viewstory page is going to be our own special exception :) */
#viewstory #mainpage { margin: 0 10px 0 150px; padding-right: 35px;}
#viewstory #container2 { background: url(images/curve-rt-story.gif) repeat-y top right; }
#viewstory #abovefooter { margin: 0 10px 0 134px; }
#viewstory .jumpmenu { text-align: right; }
#viewstory #block_categories, #viewstory #block_menu2 { margin-left: 5px; }
#viewstory .respond, #viewstory .jumpmenu2 { text-align: center; }
#viewstory .adminoptions { font-weight: bold; color: #006599; }
#viewstory .notes { font-weight: bold; padding: 6px; color: #FFF; background: #336; border-bottom: 3px double #006599;}
#viewstory .content { height: 5em; overflow: auto; background: url(images/v-dotline.gif) repeat-y top 10px; padding: 6px; padding-left: 40px;  }

/* next and previous links in viewstory.php */
#next { float: right; margin: 1em; padding: 5px;}
#prev { float: left;  margin: 1em; padding: 5px;}

.catblockcell { padding: 0 !important; }