/* Generic declarations used for many or all pages.*/

/* The body of the page */
BODY {  
 margin:0px;
 padding:0px;
 text-align:center;
 font-family: arial, helvetica, sans-serif;
 background-color: #900000;
 font-size: 11px;
 color: #000;
}

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

/* The labels in all our forms will be styled using this rule. */
LABEL, .label { font-weight: bold; margin-right: 3px; }


TH { border: 1px solid #000; 
background: #900000; 
color: #FFF; }

/* If you allow horizontal rules style those */
HR { background: #900000; height: 3px; color: #900000; margin: 0 5%; }

/* links */
A { 
	color: #900000;
	font-weight: bold;
}
/* hovering links */
A:hover {
	text-decoration: none;
}

/* Contains the drop shadow */
#background {
 width: 760px;
 margin: 0px;
 margin-left: auto;
 margin-right: auto;
 background-color: #900000;
 height: 100%;
 background-image: url(images/background.gif);
 background-repeat: repeat-y;
 background-position: center top;
}

#container {
	width: 750px;
	margin: auto;
	text-align: center;
 	background-color: #fff;
}

/* The top banner where your site's title/logo go */
#banner {
 height: 200px;
width: 750px;
 text-align: center;
 background-color: #fff;
 background-image: url(images/top_image.png);
}

/* End banner declarations */

.tblborder { border: 2px solid #900; background: #FFF; color: #000;}
#user .tblborder A { color: #900; }

/* Drop shadow at Bottom of Page */
#bottom {
 background-image: url(images/bottom.gif);
 background-position: top;
 background-repeat: no-repeat;
 background-color: #900000;
 padding: 0px;
 margin: 0px;
 height: 10px;
 width: 760px;}

#menu_container { 
 border-top: 2px solid #FFF;
 border-bottom: 2px solid #FFF;
 margin: 0;
 padding: 0px;
 background-image: url(images/menu.png);
 background-repeat: no-repeat;
 color: #FCC;
 font-weight: bold;
 font-size: 11pt;
}
/* the footer box at the bottom of the page */
#footer {
 background: #3c3c3c;
 color: #FFF;
 text-align: left;
 padding: 7px;
 margin-top: 2em;
 border-top: 1px solid #000;
clear: both;
}
#menu #current, #menu2 #current, #footer #current {
 text-decoration: underline
}
#menu a:hover, #menu2 a:hover, #menu #current:hover, #menu2 #current:hover, #footermenu a:hover, #footermenu #current a:hover {
 color: #C66900;
 text-decoration: none;
 font-weight:bold
}

/* The main content area for our pages.  The height declaration pushes the main page to be a minimum height of 400px in IE. */
#mainpage {
	height: 550px;
	padding: 15px;;
	background: #FFF;
	text-align: left;
}
#viewuser #mainpage { 
   padding: 0;
   padding-bottom: 1em;
}
/* For non-IE browsers reset the height to auto (otherwise they'll be exactly 400px and anything over 400px scrolls under the footer. 
Then set the min-height to 400.  IE ignores min-height. */
html>body #mainpage {
 height: auto;
 min-height: 550px; 
}

/* this is a carryover from 1.1.  Generally it is used around tables and table cells. */
.tblborder { 
	padding: 6px;
	border-collapse: collapse;
}

/* The title of the pages */
#pagetitle { 
	text-align: center;
	font-size: 14px;
	color: #000;
	margin-top: 1em;
	margin-bottom: 1em;
}

/* This controls the look of divs surrounding the "Issue a Challenge!" "Respond to the Challenge!" etc links */
.respond { text-align: center; padding: 6px; }

/* The labels for our stories and series listings */
.label { font-weight: bold; }

/* The pulldown jump menus on several pages. */
.jumpmenu {
	text-align: right;
	margin-right: 1em;
}

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

/* .sectionheader styles the headings "Stories" and "Series" */
.sectionheader {
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #000;
}

/* The default look of the links on the site. */
A:link {color: #900; text-decoration: none; font-weight: bold; }
A:hover { color: #C66900; text-decoration: none; font-weight: bold; }
A:visited { color: #900; text-decoration: none; font-weight: bold; }
A:active { color: #900; text-decoration: none; font-weight: bold; }

/* End Generic Declarations */

/* We used {page_id} for a container tag in the header.tpl file so we can set specific behaviors for specific pages */

/* stuff specific to the index page */
/* Defines the left column on the index page. IE puts a 3px gutter on things so it's defined as 197px wide */
#leftindex {
 width: 200px;
 float: left; 
}

html>body #leftindex { margin-top: -1em; }

/* The right column.  We're giving it a right margin of 20px to bring it in from the left border and a left margin of 265px so it clears the left column */
#rightindex {
 margin-left: 220px;
}

/* These three define the look of the blocks on the index page. */
.block { 
 padding: 0;
 border: 5px double #900000;
 margin: 1em;
}
.block .title { 
 background-image: url(images/title_blank.gif); 
 background-repeat: no-repeat;
 color: 000;
 margin: 0;
 font-weight: bold;
 text-color: #900000;
 font-size: 12px;
 padding-top: 25px;
 padding-right: 5px;
 text-align: right;
 height:47px;
}
.block .content {
 padding: 6px;
}

/* The news box has it's own little quirks. */
.newstitle { padding: 5px; color: #000; text-align: left; margin-top: 1em; text-align: center; font-size: 110%; color: #900; text-decoration: underline;}
.newstitle .adminoptions { text-align: right;}
#newsarchive { text-align: center;}

/* End index page declarations */

* 
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: -.3em;
	margin: 1em;
}
/* each link */
#alphabet A, #pagelinks A {
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	background: #900000;
	border: 1px solid #854200;
	border-collapse: collapse;
	padding: 0 2px;
}
/* each link when hovered over */
#alphabet A:hover, #pagelinks A:hover {
	background: #900000;
	color: #fff;
}
/* the currently selected letter and currently selected page */
#alphabet #current_letter, #pagelinks #currentpage {
	background: #FFF;
	color: #333;
	font-weight: bold;
	border: 1px solid #854200;
	padding: 0 2px;
}
/* End alphabet and page link declarations */

/* labels throughout the site in forms and in other places */
LABEL, .classification {
	padding-top: 5px;
	color: #000;
	font-weight: bold;
}
/* Admin options in various places.  */
.adminoptions { 
	color: #854200;
	font-weight: bold;
}

/* View story page */
#next { float: right; }
#prev { float: left; }
/* The pulldown jump menus on several pages. */
.jumpmenu {
	text-align: right;
	margin-right: 1em;
}

.noteinfo
{
border: 1px solid black;
padding: 5px;
}

/* Formatting for the title blocks in series and challenge pages */
#titleblock {
 margin: 0 10%;
}

/* The box around each individual story */
.listbox {
 background-image: url(images/title_blank.gif); 
 background-repeat: no-repeat;
	margin: 1em 5%;
	border: 1px solid #900000;
}

.listbox .title {
background-image: url(images/title_blank.gif); background-repeat: no-repeat; color: #000; margin: 0; font-weight: bold; font-size: 11px; padding-top: 20px; text-align: right; height:47px;}
.listbox .title A {
	color: #854200;
}
.listbox .content { padding: 6px;}
.listbox .tail {
	background: #900000;
	padding: 6px;
	color: #FFF;
}

.listbox .tail A {
	color: #fff;
}
/* End listbox formatting. */


/* User Profile (viewuser.php) declarations */
#profile {
	margin: 1em 10%;
}
#profile .listbox .adminoptions { margin: 0; font-weight: bold; height: auto; }
#profile .listbox .tail .adminoptions a{ color: #FFF; }
#sort { text-align: center; position: relative; margin: 1em; }
#bio { background: #FFF no-repeat top left; padding-left: 40px; border: 2px solid #900; padding-right:5px; padding-top:5px; padding-bottom:5px }
#profile .adminoptions { font-weight: bold; text-align: center; background: #FFF; border: 2px solid #900; border-top: 5px double #900;}
/* The sort menu in the profile */
#profile #sort {
	text-align: right;
	font-weight: bold;
	color: #EAB988;
 }
html>body #profile #sort { margin-top: 1em; }
#profile #output { padding: 5px; }
/* The pulldown jump menus on several pages. */
.jumpmenu {
	text-align: right;
	margin-right: 1em;
}

/* The following declarations control the tabs */
/* The outer tab box */
#tabs {
	background: #900000;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	text-align: center;
	margin: 0;
	padding: 0;

}
/* The individual tabs. */
#tabs span {
	font-size: 12px;
	background: #900000;
	border: 1px solid #000;
	padding: 3px;
	line-height: 1.5px;
}
/* Links in the tabs */

#tabs #active {
	background: #fffff;
	color: #900000;
}
/* The look of links within the tabs.  Generally they're going to have to be different from the regular page links.  
I haven't bothered with the visited or active states. */
#tabs a { 
  color: #ffffff; 
}
#tabs a:hover { 
 text-decoration: none; 
 color: #C66; 
}

#tabs #active {
	text-align: left;
}
#tabs #active a { 
  text-decoration: none; 
}

/* End User page declarations */

/* This one controls how the text of the story looks.  Just the text of the story! */
#story { padding: 5px; }

/* This class is used to clear up some bugs in IE that make text disappear for a couple different reasons.  
If text is disappearing in IE apply this class to the PARENT element of the one disappearing.*/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline; }
/* Hides form IE-Mac \*/
* html .clearfix { height: 1%; }
.clearfix {display: block; }
/* End hiding */

/* The recent block on the index page. */
.recentbox { margin: 0; padding: 0; }
.recentbox .title { text-align: left; margin: 0; padding: 3px 7px; color: #000; font-weight: normal; }
.recentbox .content { margin: 0; padding: 3px 7px; }

/* The story information on the story index page */
#viewstory .listbox { padding: 7px; padding-right: 40px;}
#titleinfo { text-align: center; }