/* Based on a template by Ben Meadowcroft, see http://www.benmeadowcroft.com/webdev/  for more info */
/* Typography based on technique by Owen Briggs, see http://www.thenoodleincident.com/ for more info */
/* Some definitions used everywhere */

body { 
	background-color: #E5E5E5;	
	margin: 10px;
	padding: 2;
	font-family: Arial, Helvetica, Geneva, Verdana, sans-serif;
	font-size: 76%;
}

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


/*typography*/
a {
	text-decoration: none;
	color: #660000;
	}
a:link {
	}
a:visited {
	}
a:active {
	}
a:hover {
	text-decoration: underline;
	}
h1 {
	font-size: 2.0em;
	font-weight: normal;
	margin-top: 0em;
	margin-bottom: 0em;/*both set to zero and padding in header div is used to deal with compound ie pc problems that are beyound summary in a simple comment.*/
	}
h2 {
	font-size: 1.7em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: normal;
	}
h3 {
	font-size: 1.4em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: normal;
	}
h4 {
	font-size: 1.2em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
	}
h5 {
	font-size: 1.0em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
	}
h6 {
	font-size: 0.8em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
	}
ol, ul, li {/*
	list-style: none;*/
	font-size: 1.0em;
	line-height: 1.8em;
	margin-top: 0.2em;
	margin-bottom: 0.1em; 
	}
p {
	font-size: 1.0em;
	line-height: 1.3em;
	margin: 1.2em 0em 1.2em 0em;
	}
li > p {
	margin-top: 0.2em;
	}
pre {/*moz 1.0/1.1/1.2.1, net 7.0/7.01 make this way too small, but i'm not going to go larger because monospace tends to run you into overflow pretty quick. prior moz and net are okay.*/
	font-family: monospace;
	font-size: 1.0em;
	}
strong, b {
	font-weight: bold;
	}
/* Header cells in tables throughout the site */
th { 
	background: #E5E5E5;
	color: #000;
	font-weight: bold;
}

.lcol
{
	float: left;
	width : 16.5em;
	padding : 0.5em;
	margin-top : 0em;
	padding : 0.5em;
	margin-bottom : 0em;
	text-align : left;
	line-height: 1.3em;
}


.rcol
{
	float: right;
	width : 16.5em;
	padding : 0.5em;
	margin-top : 0em;
	margin-bottom : 0em;
	text-align : left;
	line-height: 1.3em;
}

.midcol
{
	margin-top:0em;
	margin-bottom: 0em;
	margin-right:18em;
	margin-left:18em;
	height: auto;
	padding:1em;
}

/* This displays the left banner image */
#lbanner {
  height: auto;
  position : absolute;
  left : 10px;
  border-left: 1px solid #660000;
  }	  

/* This displays the middle, one-pixel-width banner image */
.mbanner {
 background-image : url('images/mbanner.jpg');
 background-position : top left;
 background-repeat : repeat-x;
 height : 121px;
 }
  
/* This displays the right banner image */
#rbanner {
  height: auto;
  position : absolute;
  right : 10px;
  border-right: 1px solid #660000;
  }	  

.tableborder{
border-top: 1px solid #660000;
border-left: 1px solid #660000;
border-right: 1px solid #660000;
background-color: #FFFFFF;
}

.tableborder2 {
border-top: 1px solid #660000;
background-color: #FFFFFF;
margin-top: -1px;
padding: .5em;
}

.tableborder3 {
border: 1px solid #660000;
background-color: #FFFFFF;
padding: .5em;
margin-top: .3em;
margin-left: .3em;
margin-right: 0em;
margin-bottom: .6em;
}

.tableborder4 {
border: 1px solid #660000;
background-color: #FFFFFF;
padding: .3em;
margin-top: .5em;
margin-left: 0em;
margin-right: .3em;
margin-bottom: .6em;
}

.tableborder5 {
border: 1px solid #660000;
background-color: #FFFFFF;
padding: 0.5em;
margin-top: 0em;
}

/* the title of the page */
#pagetitle { font-size: 1.2em; text-align: center; padding: 1ex;}

/* pagination links at the bottom of multiple page results */
#pagelinks { text-align: center; padding: 1em; background: #FFF;}

.pagelinks2 { text-align: center; padding: 1em; background: #FFF;}

/* the alphabet list used on multiple pages */
#alphabet { text-align: center; }

/* Response links such as "Issue a Challenge!", "Respond to the Challenge!" etc */
.respond { text-align: center; }

/* Surrounds the news archive link in the news block */
#newsarchive { text-align: center;}

/* Used when listing stories and series to define the sub-section headers "Series" and "Stories */
.sectionheader {
 background: #E5E5E5;
 color: #000;
 font-weight: bold;
 text-align: center;
 width: 100%;
 clear: both;
}

/* these define the alternating colors used in some tables and the listings of the stories, series, and challenges */
.odd { background: #E5E5E5; }
.even { background: #FFF; }

/* This defines the look of the admin options for various pieces of the script.  Can be safely left undefined if you wish */
.adminoptions { font-weight: bold; }

/* Carryover from 1.1 */
.tblborder { border: 1px solid #660000; padding: .5em; }

/* End of hardcoded classes and id's */


/* This wraps around the contents of the page */
#container {
}

/* The top of the header where your site's name and slogan appear */
#banner {
 height: 120px;
 border-bottom: 1px solid #FFF;
 text-align: center;
 }

/* This floats the skin changing form to the middle right of the banner div */
#skin { 
 position: absolute;
 top: 20px;
 right: 30px; 
}


/* the main content section below the menu 
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;
	border-left: 1px solid #660000;
	border-right: 1px solid #660000;
	border-top: 1px solid #660000;
	background-color: #FFFFFF;
	padding: 0em;
	margin-top: 0;
}
html>body #mainpage { 
	height: auto;
	min-height: 550px;
}

/* the storyindex on viewstory.tpl */
#storyindex {
	padding: .5em;
	margin: .5em;
	}

/* the story on viewstory.tpl */
#story {
	padding: .5em;
	margin: .5em;
	}

	/* the storynotes on viewstory.tpl */
.storyinfo {
	font-size: 1em; text-align: center;
	}
	
/* the storynotes on viewstory.tpl */
.noteinfo {
	font-size: 0.95em;
	}
	
/* the storynotes box on viewstory.tpl */
.notes {
	padding: 1em; border-bottom: 1px solid #660000; border-top: 1px solid #660000; margin-top: -1px;
	}

	
/* the footer below the mainpage */
#footer {
 background-color: #FFF;
 text-align: left;
 font-size: 0.9em;
 padding: 0.5em;
}

/* much of the content output by the script such as the contents of the help and rules files are places in this div can be safely left undefined however  */
#output { padding: 5px; }

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

/* Used at the top of the challenges and series pages when an individual listing is displayed.  
Not hardcoded into the script!  This is defined in the default tpl.
*/
#titleblock { margin: 0 10%; }
#titleblock .listbox { border: 1px solid #660000; margin: 10px; }

/* defines the appearance of the news block */
.newsbox{ padding: 5px;}

/* labels throughout the site in forms and in other places */
label, .classification {
	color: #660000;
	font-weight: bold;
}

/* Admin options in various places.  */
.adminoptions { 
	color: #660000;
	font-weight: bold;
}

/* The listings of stories etc. */
/* .sectionheader styles the headings "Stories" and "Series" */
.sectionheader {
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: #660000;
}

/* The box around each individual story */
.listbox { padding: 1em; border-bottom: 1px solid #660000; border-top: 1px solid #660000; margin-top: -1px; }
.listbox .title { font-weight: bold; }
.classification { font-weight: bold; }
/* Because the background is dark, the link colors need to be changed. 
.listbox .title A {
	color: #000;
}/
/* The content of the box...summary, categories, etc. */
.listbox .content {
	padding: 6px;
}

/* The tail info published date etc. on the last line */
.listbox .tail {
	background: #E5E5E5;
	padding: 6px;
	color: #000;
}
/* And again because of the dark background change the color of the links. */
.listbox .tail A {
	color: #000;
}

/*End story/series listings */

/* used in the categories page */
#categoriesblock { width: 90%; padding-left: 5%; padding-bottom: 1em; }


/* 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 {
	margin: 1em 10%;
}
/* The sort menu in the profile */
#profile #sort {
	text-align: right;
	font-weight: bold;
	color: #660000;
 }

#leftindex { 
	width: 200px;
	float: left;
}
html>body #leftindex {
	margin-top: -1em;
}

#rightindex {
	margin-left: 220px;
}
/* The next link at the bottom of a multi-chapter story */
#next { float: right; }
/* The previous link at the bottom of a multi-chapter story */
#prev { float: left; }

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

/* used in user.tpl */
#sort { text-align: right; position: relative; padding: 5px; clear: both;}
#bio { padding: 5px; }
#profile .adminoptions { font-weight: bold; height: 3em; }

/* The following declarations control the tabs */
/* The outer tab box */
#tabs {
 padding: 0;
 margin: 0;
 clear: both;
 border-top: 3px double #660000;
 border-bottom: 3px double #660000;
}
/* The individual tabs. */
#tabs span {
	font-size: 12px;
	background: #fff;
	border: 1px solid #660000;
	padding: 3px;
}
#tabs DIV{ 
 width: 33%;
 float: left;
 color: #000;
 text-align: center;
 background: #fff; 
 font-size: 1em;
}

#tabs #centertab {
  background: transparent;
  border-right: 3px double #000;
  border-left: 3px double #000;
  width: 98%;
}

#tabs a { color: #000; }
#tabs a:active, a:hover { text-decoration: none; color: #E5E5E5; }

#tabs #active { background: #fff; width: 34%; color: #660000; }
#tabs #active a { color: #666; }
#tabs #active a:active, a:hover { text-decoration: none; color: #999; }

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

/* Pulldown jump menus on left. */
.jumpmenul {
	text-align: left;
	margin-left: 1em;
	margin-bottom: .5em;
}


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

/* used for the blocks on the index page */
.block { border: 0px; margin: 0; padding: 0; margin-bottom: 1em; }
.block .title { font-size : .95em; font-weight: bold; padding: .5em; text-align: center;}
.block .content { background: #FFF; margin: 2; padding: 1em; font-size: .95em; text-align : left;}
.block .ccontent { width: 100%; font-size: .95em; text-align : center;}

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

.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 following defines your menu below the banner div */
#menu { 
 background: #E5E5E5;
 margin: 0;
 padding: 0;
 font-size: 1em;
 text-align: center; 
 height: auto;
}
#menu ul { 
 margin: 0;
 padding: 0;
}
#menu li {
 display: inline;
 list-style-type: none;
 margin: 0;
 padding: 0; 
}
/* links in the menu */
#menu a {
 color: #000;
 font-weight: bold;
 text-decoration: none;
 padding-left: 3px;
 padding-right: 3px; 
}
/* Hovered links in the menu */
#menu a:hover { 
 background: #000; 
 padding-left: 2px;
 padding-right: 2px;
 border-left: 1px solid #FFF;
 border-right: 1px solid #FFF;
 color: #CCC; 
}
/* The link for the currently displayed page in the menu */
#menu #current {
	text-decoration: underline;
}

/* end menu setup */