/*The following declarations set the colors, text-alignment, and borders for various elements. 
The width, height, padding, etc. follows in separate declarations.  Most likey you will only want
to change things in this first section and leave the second section alone . */

BODY { 
	background: #369;
}

HR {
	color: #369;
	background: #369;
}

A:link { color: #369; }
A:visited { color: #7BA8D2; }
A:active { color: #7BA8D2; }

LABEL, .label, #infoleft, #newestmember { color: #555;}

#banner { background: #369; color: #FFF; border-bottom: 3px solid #000;}
#container1 { background: #CCC; }
#middleindex { background: #FFF; border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000;}
#footer { color: #FFF; }

.tblborder { border: 1px solid #000;}
.tblborder TH { background: #369; color: #FFF; }

#menu, #menu2, #tabs { border: 1px solid #000; border-bottom: 0; }
#menu A, #menu2 A, #tabs A {  border-bottom: 1px solid #000; background: #FFF; }
#menu A:visited, #menu2 A:visited, #tabs A:visited { color: #369;}
#menu A:hover, #menu2 A:hover, #tabs A:hover{ background: #369; color: #FFF; }
#menu A:active, #menu2 A:active, #tabs A:active { background: #FFF; color: #369; }
#menu #current, #tabs #active A{ background: #7BA8D2; color: #FFF;}
#menu_title { color: #FFF; border: 1px solid #000; border-bottom: 0; background: #000; }

#pagelinks a, #alphabet a, #next a, #prev a { 
	background: #7BA8D2; 
	border: 1px solid #000; 
	color: #FFF;
}
#pagelinks a:hover, #alphabet a:hover, #next a:hover, #prev a:hover{ 
	background: #CCC;
	color: #369;
}
#pagelinks #currentpage, #alphabet #currentletter { 
	background: #369; 
	font-weight: bold;
}
#pagelinks #currentpage:hover, #alphabet #currentletter:hover { 
	background: #CCC;
	color: #369;
}

.block, .listbox {
	border: 1px solid #000;
}
.block .title, .listbox .title {
	border-left: 14px solid #369;
	background: #7BA8D2;
	color: #FFF;
}

.listbox .title A, .listbox .band A{ color: #369; }
.listbox .band {
	border-right: 14px solid #369;
	background: #7BA8D2;
	color: #FFF;
	text-align: right;
}

.listbox .band .label { color: #FFF; }
.block .content {
	border-top: 1px solid #000;
}
.listbox .content {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}
.listbox .content IMG { float: left; }
#viewstory .listbox .content {
	border: 0;
}
#recenttitle, #newstitle {
	font-size: 16pt;
	border-bottom: 3px solid #369;
	color: #369;
}

.new { color: #C00; }


#pagetitle { color: #369; }

#bottom-nav { background: #000; color: #FFF; border-bottom: 1px solid #CCC; }
#bottom-nav A { color: #7BA8D2; }
#footer A { color: #7BA8D2; }

/* Stuff for the index page only */

#welcome { color: #369; font-size: 14pt; }

/* The following declarations set all elements BUT color.  You're strongly encouraged not to edit anything below this point. */

BODY { margin: 0; padding: 0; }

/* Make labels in forms stand out. */
LABEL, .label { font-weight: bold; }

/* Make the text in select boxes smaller. */
SELECT { font-size: 10px; }
HR { 
	width: 70%; 
	margin: 1ex auto;
	height: 4px;
}
A { 
	font-weight: bold;
	text-decoration: none;
}
A:hover { text-decoration: underline; }
A:active { text-decoration: underline; }

#banner { height: 150px;  text-align: right; }
#sitename { font-size: 80px; padding: 20px 1em 0;}
#welcome { margin: 1em 10%; }

#container1 { float: left; width: 100%;}
#container2 { width: 100%; }


/* The columns */
#leftindex { width: 165px; float: left; padding: 0 0 0 5px; }
#rightindex { width: 165px; float: right; padding: 0 5px 0 0px; }
#middleindex { margin: 0 172px; padding: 5px 20px; height: 450px; margin-bottom: -2px; padding-bottom: 1em; width: auto;}
html>body #middleindex { height: auto; min-height: 450px; margin: 0 175px -2px;}

/* The inner 2 columns on the index page */
#innerleftindex { 
	width: 250px;
	float: left;
	padding: 0px;
}

#innerrightindex {
	margin: 0;
	margin-left: 250px;
	padding: 0;
	padding-top: 1ex;
}

/* Bottom navigation */
#bottom-nav { text-align: center; clear: both; padding: 5px;}

#footer { margin: 1em 0; clear: both; padding: 5px 1em;}


.tblborder { border-collapse: collapse; padding: 5px;}


/* Center the skinchange and rss in the left hand column.  Also give the skin a 1ex top and bottom margin */
#skin { margin: 1ex auto; text-align: center; }
#rss { text-align: center; margin: 1ex 0;}


#menu, #menu2 { margin: 0 1ex; }
#menu A, #menu2 A { display: block; padding: 0 4px;}
#menu A:visited, #menu2 A:visited { display: block; }
#menu A:hover, #menu2 A:hover, #tabs A { text-decoration: none; }
#menu A:active, #menu2 A:active { display: block; }
#menu_title { margin: 1em 3ex 0; padding: 2px 5px; font-weight: bold; text-align: center; border-bottom: 0;}
#tabs { 
	float: right; 
	width: 200px; 
	margin: 0;
	padding: 0;
}
#tabs A { display: block; padding: 0 4px; }

/* The login block form has an ID of loginblock so you can style it as you wish. */
#loginblock { padding: 5px; margin: 5px 1em;}
#loginblock LABEL { font-weight: bold; font-size: 14px;}
#loginblock .button, #loginblock .textbox { font-size: 10px; }
#loginblock #rememberme { display: block; }

.block { 
	margin: 0 1.5em 1em 0;
}

.block .title, .listbox .title {
	font-size: 14pt;
	padding: 5px;
}
.listbox .band {
	padding: 5px;
}
#viewstory .listbox .band { display: none; }

.listbox .band .adminoptions, .listbox .band .respond { 
	display: inline;
}

.block .content, .listbox .content {
	padding: 7px; 
}


.listbox {
	margin: 1em 0;

}
.listbox .contenteven, .listbox .contentodd { padding: 7px; }

#viewstory .listbox .adminoptions {
	display: block;
	margin: 0 7px 7px; 
}
#info_left, #newestmember { font-weight: bold; }
#info_right { text-align: right !important; }
#newestmember BR { display: none; }

#recenttitle {
	font-size: 16pt;
	text-align: right;
	margin-left: 25%;
	padding: 0 10px;
	margin-bottom: 1em;
}
#recentcontainer {
	margin: 0 1em;
}
#newstitle {
	font-size: 16pt;
	text-align: left;
	margin-right: 25%;
	padding: 0 10px;
	margin-bottom: 1em;
}

.newstitle {
	font-size: 14pt;
}
.newstitle A, .newsdate {
	font-size: 10pt;
}
.newstory {
	margin: 1ex 2em;
}
.newssig {
	text-align: right;
	margin: 0 4em;
	
}
.newscomments {
	text-align: right;
	margin: 1ex 4em;
}

/* On the news page we want the news comments and the HR to disappear */
#news .newscomments,#news HR {
	display: none;
}

#newsarchive { 
	text-align: center;
	margin: 1em;
}

.commentodd, .commenteven {
	margin: 1em;
}

.commentodd .adminoptions, .commenteven .adminoptions {
	text-align: right;
}
.commentsig {
	margin-left: 4em;
}
/* Used in a couple places to clear floated elements */
.cleaner { 
	clear: both;
	height: 1px; 
	font-size: 1px;
	border: medium none; 
	margin: 0; 
	padding: 0; 
	background: transparent;
}

#pagelinks, #alphabet { 
	text-align: center; 
	margin: 1em 0; 
	line-height: 25px; /* Keeps the links separate if they need to scroll to more than one line */
}
#pagelinks a, #alphabet a { 
	padding: 2px 6px; 
	margin: 0; 
	margin-left: -1ex; 
	text-decoration: none; 
}

/* The "Stories" and "Series" labels used in listings */
.sectionheader { text-align: center; font-size: 14pt; color: #369; margin: 1ex 20%; border-bottom: 3px solid #369;}

/* The page title */
#pagetitle { font-size: 18pt; text-align: center; margin: 1ex;}

/* The profile portion of the viewuser page */
#profile { padding: 10px; }

/* tabs control the 3 links for stories, favorite stories/series, and favorite authors.  Generally, they're below the user profile.  In 1.1 you had no options in this.
With 2.0, you can put those links whereever you want. */

/* Some things on viewstory */
.jumpmenu { text-align: right; margin: 1ex;}
.jumpmenu2 { text-align: center; }
#viewstory .respond { text-align: center; margin: 1em; }

#next { float: right;}
#prev { float: left; }
#next A, #prev A { padding: 3px; }

#vusort { 
	margin: 0 1em;
	text-align: right;
}

#profile .adminoptions { display: inline; }
.new {
	font-style: italic; 
	font-weight: bold;
}

.infolinks {
	display: block;
	text-align: right;
}

.poll { border: 1px solid #000; }

.ellipses { padding-right: 1ex; }