/*
Title: Olympian
Created by: Lyndsie
From: http://www.verilyviridian.com/efic

Licensed under Creative Commons Attribution Non-Commercial Share Alike
(http://creativecommons.org/licenses/by-nc-sa/3.0/)
*/

body { 
	background: #f8f8ff;
	color: #000;
	margin: 0;
	padding: 0;
}

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

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

a:hover {
	text-decoration: underline;
}

#banner {
	background: url(images/header.jpg) no-repeat center bottom;
	height: 350px;
}

/* If your sitename is long you can lower the font-size below*/
#sitename {
	font-size: 30px;
	font-weight: bold;
	color: #666;
	position: absolute;
		top: 53px;
	height: 50px;
	width: 100%;
}

/* The skinchange box in the upper right corner */
#skin {
	position: absolute;
	right: 4px;
	top: 5px;
}

/* The smaller separate menu, position */

#navbox {
	height: 30px;
	width: 100%;
	background: #7896a6;
	border-bottom: 3px double #CCC;
}

#nav {
	position: absolute;
	top: 4px;
	left: 6px;
}

#nav a {
	text-decoration: none;
	margin-left: 2px;
	margin-right: 2px;
	color: #f8f8ff;
}

#nav a:hover {
	text-decoration: underline;
	color: #CCC;
}

#nav #current {
	text-decoration: underline overline;
}

/* The main menu, below the banner image */
#menu {
 	background: #f8f8ff;
 	text-align: center;
 	padding: 4px;
 	margin-top: 4px;
}

#menu a {
	color: #666;
	font-weight: bold;
	text-decoration: none;
	margin-left: 3px;
	margin-right: 3px;
	padding-left: 1px;
	padding-right: 1px;
	background: #DDD;
	border: 1px solid #666;
}

#menu a:hover {
	text-decoration: underline;
	color: #AAA;
	border: 1px solid #666;
}

#menu #current {
	text-decoration: underline overline;
	font-weight: bold;
}

#footer {
	border-top: 3px double #CCC;
	background: #7896a6;
	color: #f8f8ff;
	padding: 10px;
	clear: both;
}

/* Index page blocks*/

/* The box around the block */
.block { 
	margin: 4px 6px 8px 6px;
	border: 1px solid #000;
}

/* The block's title */
.block .title {
	background: #7896a6;
	color: #f8f8ff;
	font-weight: bold;
	padding: 6px;
}

/* The block's content */
.block .content {
	padding: 4px;
}

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

#rightindex {
	margin-left: 300px;
}

/* 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-bottom: 1em;
	background: #f8f8ff;
	color: #000;
	border: 1px solid #f8f8ff;
	width: 800px;
	text-align: left;
	position: center;
}

html>body #mainpage { 
	height: auto;
	min-height: 550px;
}

/* Most pages use pagetitle to format the page's title */
#pagetitle { 
	text-align: center;
	font-size: 25px;
	color: #333;
	margin-top: 1em;
}

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

/*For purposes of testing DELETE ME */
#tableize {
	border: 1px solid #f8f8ff;
	margin-top: 4px;
}

.clear {
	clear: both;
}
	
/* 
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: #F8F8FF;
	text-decoration: none;
	font-weight: bold;
	background: #7896a6;
	border: 1px solid #CCC;
	border-collapse: collapse;
	padding: 0 2px;
}
/* each link when hovered over */
#alphabet A:hover, #pagelinks A:hover {
	background: #CCC;
	color: #333;
}
/* the currently selected letter and currently selected page */
#alphabet #currentletter, #pagelinks #currentpage {
	background: #F8F8FF;
	color: #333;
	font-weight: bold;
	border: 1px solid #CCC;
	padding: 0 2px;
}

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

/* Admin options in various places.  */
.adminoptions { 
	color: #666;
	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: #333;
	padding-top: 6px;
}

/* The box around each individual story */
.listbox {
	margin: 1em 5%;
}

/* The title bar for each story box. */
.listbox .title {
	background: #7896a6;
	padding: 6px;
	color: #f8f8ff;
	font-weight: bold;
	text-align: left;
	border: 3px double #ccc;
}

.listbox .title A {
	color: #CCC;
}

.listbox .content {
	padding: 10px;
	text-align: left;
	border-left: 1px dotted #7896a6;
	border-right: 1px dotted #7896a6;
}

.listbox .tail {
	background: #7896a6;
	padding: 6px;
	color: #f8f8ff;
	text-align: left;
	border: 3px double #ccc;
}

.listbox .tail A {
	color: #CCC;
}

/* In storyindex (table of contents) view */
.tocbox {
	margin: 1em 5%;
}

.tocbox .content {
	text-align: left;
	border: 3px double #333;
	padding: 6px;
	
}

/* Notes in the toc */
.notesbox {
	margin: 1em 5%;
}

/* When viewing profiles using listings.tpl*/
.commentbox {
	margin-left: 50px;
	text-align: left;
}

#story {
	margin: 10px 0px 10px 0px;
	border: 2px dotted #7896a6;
	padding: 5px;
}

.newsbox {
	margin: 1em 5%;
	border: 1px dotted #f8f8ff;
	padding: 4px;
}

.newstitle {
	font-weight: bold;
}

.newscomment {
	margin: 1em 5%;
	border: 3px double #333;
	padding: 4px;
}

.commentsig {
	margin: 6px;
	padding: 2px;
	border: 1px dotted #7896a6;
}

#newsep {
	border: 1px dotted #7896a6;
}

/* titleblock is used for the title information in series and challenges */
#titleblock {
	margin: 0 10%;
}

/* The pulldown jump menus on several pages. */
.jumpmenu {
	text-align: left;
	padding: 10px 0px 10px 0px;
}

.jumpmenu2 {
	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;
}


#sort {
	text-align: center;
	margin: 20px;
}


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

#profile {
	margin-left: 50px;
	margin-right: 50px;
	margin-bottom: 15px;
}

/* 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: #f8f8ff;
	text-align: center;
	margin-top: 0;
	padding: 0;
}
/* The individual tabs. */
#tabs span {
	font-size: 14px;
	background: #CCC;
	border: 1px solid #000;
	padding: 3px;
}
/* Links in the tabs */

#tabs #active {
	background: #f8f8ff;
	color: #666;
}

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