charset "utf-8";
/* CSS Document */
#hidden-5 {color:#FFF; text-align:center; width:1015px;	height:56px; position:absolute;	top:100px; left:150px; margin-left:auto; margin-right:auto; top:0px; z-index:10000;}
#banner{background-image:url('http://www.faithandevolution.org/graphics/subscribe-background.png');	background-repeat:repeat-x; position:absolute; top:-100px; left:50px; height:91px; width:290px; z-index:10001; visibility:hidden; line-height:19px; padding:10px;}
#banner a:link{color:#C66900;}
#banner a:visited{color:#C66900;}
	
#toggle { display:none }


h1 {font-family: "Palatino Linotype", "Book Antiqua", "Palatino", serif;
	color:#9b9f5c;
	font-size:18px;
	font-weight:bold;
	margin:0px;
	padding:0px;
	font-variant:small-caps;
	}
h2{margin:0px; font-size:16px; font-variant:small-caps; padding-bottom:10px; color:#9b9f5c;}
h3 {font-family: "Palatino Linotype", "Book Antiqua", "Palatino", serif;
	color:#9b9f5c;
	font-size:18px;
	font-weight:bold;
	margin:0px;
	padding:0px;
	font-variant:small-caps;
	}
h4{margin:0px; font-size:12px; color:#fff; font-weight:100;}


p {margin:0px; font-size:12px;}
.p1 {padding-top:30px; font-size:12px;}
	
body {
	font-family: "trebuchet ms", "helvetica", sans-serif;
	font-size: 12px;
	background-color:#6a4934;
	margin: 0px;
	padding: 0px;
}
/*left side flowery black/brown decoration*/
#lSide{
	position:absolute;
	top:0px;
	left:auto;
	background-image:url(../graphics/lBackground.gif);
	background-repeat:repeat-y;
	height:894px;
	width:26px;
}
/*right side flowery black/brown decoration*/
#rSide{
	float:right;
	background-image:url(../graphics/rBackground.gif);
	background-repeat:repeat-y;
	height:894px;
	width:26px;
}
/*The center of the page. Everything is contained in this section for centering purposes*/
#container{
	position:relative;
	top: 0px;
	left: 3px;
	width:1015px;
	padding:0px;
	margin-left:auto;
	margin-right:auto;
	z-index:2000;
}


/*The top logo, different on each page*/
#header{
	position:absolute;
	top:1px;
	left:27px;
	z-index:1002;
	}
	
/*Subscribe, Search, and Javascript date*/
#nav{ 
	position:absolute;
	top:137px;
	left: 655px;
	color:#e5e0be;
	z-index:3000;
}
#nav a:link{color:#e5e0be; text-decoration:none;}
#nav a:visited{color:#e5e0be; text-decoration:none; outline:0px;}
#nav a:hover{color:#fff; text-decoration:none;}
#nav a:active{color:#e5e0be; text-decoration:none;}

/*The left side navigation Javascript Spry menu*/
#Accordion1{
	position:absolute;
	top:162px;
	left:27px;
	height:730px;
}
#Accordion1 a:link {color:#788488; text-decoration: none;}
#Accordion1 a:visited {color:#788488; text-decoration: none; outline:0px;}
#Accordion1 a:hover {color:#424f54;text-decoration: none;}
#Accordion1 a:active {color:#424f54; text-decoration: none;}

/*CSC logo on bottom of the Accordion*/
/*#cscLogo{
	position:relative;
	top:5px;
	left:8px;
	width:130px;
	height:78px;
	z-index:3;
}
*/
#cscLogo{
	position:relative;
	top:500px;
	left:-138px;
	width:130px;
	height:78px;
	z-index:3;
}

/*The bulk of the information and text*/
#content{
	position:absolute;
	top:162px;
	left:176px;
	/*min-height:300px;*/
}
#content a:link{color:#e5e0be; text-decoration:underline;}
#content a:visited{color:#e5e0be; text-decoration:underline; outline:0px;}
#content a:hover{color:#fff; text-decoration:none;}
#content a:active{color:#e5e0be; text-decoration:underline;}

/*The green section of the page on index.php*/
#content .green{
	background-image:url(../graphics/greenBackground.gif);
	background-repeat:repeat-y;
	position:absolute;
	padding:15px 30px 0 25px;
	top:265px;
	left:1px;
	color:#fff;
	border:2px solid #fff;
	border-right:1px solid #fff;
	width:480px;
}
.green h1{font-family: "Trebuchet MS", sans-serif; color:#e5e0be; font-size:18px;}

/*green section on template pages*/
#greenInside{
	background-image:url(../graphics/greenBackground.gif);
	background-repeat:repeat;
	position:absolute;
	padding:15px 30px 0 25px;
	top:0px;
	left:1px;
	color:#fff;
	border:2px solid #fff;
	width:753px;
}
#greenInside a:link{color:#e5e0be; text-decoration:underline;}
#greenInside a:visited{color:#e5e0be; text-decoration:underline; outline:0px;}
#greenInside a:active{color:#e5e0be; text-decoration:underline;}
#greenInside a:hover{color:#fff; text-decoration:none;}
#greenInside h1{color:#e5e0be; font-family: "Palatino Linotype", "Book Antiqua", "Palatino", serif; font-size:18px;}

/*green section on template pages that have rightbar/column*/
#greenInsideShort{
	background-image:url(../graphics/greenBackground.gif);
	background-repeat:repeat;
	position:absolute;
	padding:15px 30px 0 25px;
	top:0px;
	left:1px;
	color:#fff;
	border:2px solid #fff;
	width:478px;
}
#greenInsideShort a:link{color:#e5e0be; text-decoration:underline;}
#greenInsideShort a:visited{color:#e5e0be; text-decoration:underline; outline:0px;}
#greenInsideShort a:active{color:#e5e0be; text-decoration:underline;}
#greenInsideShort a:hover{color:#fff; text-decoration:none;}
#greenInsideShort h2{color:#e5e0be; font-family: "Palatino Linotype", "Book Antiqua", "Palatino", serif; font-size:18px;}
#greenInsideShort h1{color:#e5e0be; font-size:18px;}


/*main section of text on index.php*/
#mainText-index{
	background-image:url(../graphics/mContentFade.gif);
	background-repeat: repeat-x;
	background-color:#e5e0be;
	position:relative;
	top:20px;
	left:-27px;
	padding:20px 30px 30px 25px;
	margin:0px;
	border:2px solid #fff;
	width:479px;
	color:#424f54;
}
#mainText-index a:link{color:#424f54; text-decoration:underline;}
#mainText-index a:visited{color:#424f54; text-decoration:underline; outline:0px;}
#mainText-index a:active{color:#424f54; text-decoration:underline;}
#mainText-index a:hover{color:#9b9f5c; text-decoration:none;}
#mainText-index h2{font-size:18px; font-family:"Palatino Linotype", serif; color:#9b9f5c;}

/*main section on the template*/
#mainText{
	background-image:url(../graphics/mContentFade.gif);
	background-repeat: repeat-x;
	background-color:#e5e0be;
	position:relative;
	top:0px;
	left:-27px;
	margin-top:20px;
	padding:20px 30px 30px 25px;
	border:2px solid #fff;
	border-bottom:0px;
	width:753px;
	color:#424f54;
}
#mainText a:link{color:#424f54; text-decoration:underline;}
#mainText a:visited{color:#424f54; text-decoration:underline; outline:0px;}
#mainText a:active{color:#424f54; text-decoration:underline;}
#mainText a:hover{color:#9b9f5c; text-decoration:none;}
#mainText h2 {font-family: "Palatino Linotype", "Book Antiqua", "Palatino", serif;color:#9b9f5c;font-size:18px;font-weight:bold;margin:0px;padding:0px;font-variant:small-caps;}
#mainText h3{color:#000; font-size:16px;}


/*main section on the template with a rightbar/column*/
#mainTextShort{
	background-image:url(../graphics/mContentFade.gif);
	background-repeat: repeat-x;
	background-color:#e5e0be;
	position:relative;
	top:0px;
	left:-27px;
	margin-top:20px;
	padding:20px 30px 30px 25px;
	border:2px solid #fff;
	border-bottom:0px;
	width:478px;
	color:#424f54;
}
#mainTextShort a:link{color:#424f54; text-decoration:underline;}
#mainTextShort a:visited{color:#424f54; text-decoration:underline; outline:0px;}
#mainTextShort a:active{color:#424f54; text-decoration:underline;}
#mainTextShort a:hover{color:#9b9f5c; text-decoration:none; outline:0px;}
#mainTextShort h2 {font-family: "Palatino Linotype", "Book Antiqua", "Palatino", serif;color:#9b9f5c;font-size:18px;font-weight:bold;margin:0px;padding:0px;font-variant:small-caps;}

/*Left column on the inside pages that have two-column main text area
Add these two divs (rColumn) inside <div id="greenInside"> instead
of using the <div id="mainText">. Also since rColumn position: relative; put it inside <div id="lColumn">*/
#lColumn{
	background-color:#e5e0be;
	position:relative;
	float:left;
	top:0px;
	margin-top:20px;
	left:-27px;
	color:#424f54;
	border:2px solid #fff;
	border-bottom:0px;
	width:402px;
	height:728px;
}
#lColumn a:link{color:#424f54; text-decoration:underline;}
#lColumn a:visited{color:#424f54; text-decoration:underline; outline:0px;}
#lColumn a:active{color:#424f54; text-decoration:underline;}
#lColumn a:hover{color:#9b9f5c; text-decoration:none;}

/*Right column on the inside pages that have two-column main text area*/
#rColumn{
	background-color:#eeebd5;
	position:relative;
	top:-2px;
	left:402px;
	color:#424f54;
	border:2px solid #fff;
	border-bottom:0px;
	width:404px;
	height:728px;
}
#rColumn a:link{color:#424f54; text-decoration:underline;}
#rColumn a:visited{color:#424f54; text-decoration:underline;}
#rColumn a:active{color:#424f54; text-decoration:underline;}
#rColumn a:hover{color:#9b9f5c; text-decoration:none;}

/*Top header and section on two-column pages*/
#content .columnFirst{
	background-image:url(../graphics/iTitleBackground.gif);
	position:absolute;
	top:-2px;
	left:-2px;
	height:25px;
	width:389px;
	border:2px solid #fff;
	padding: 0 0 0 15px;
	color:#fff;
	font-weight:bold;
	vertical-align:middle;	
}

/*To add more columns just columnX and copy following CSS*/
/*Everything is set to control itself as inner content expands or contracts*/
#content.columnSecond, #content.columnThird, #content.columnFourth{
	background-image:url(../graphics/iTitleBackground.gif);
	position:relative;
	top:0px;
	left:-17px;
	margin-top:20px;
	height:25px;
	width:389px;
	border:2px solid #fff;
	padding: 0 0 0 15px;
	color:#fff;
	font-weight:bold;
	vertical-align:middle;
}

/*Everything in the right content on index.php and 3 column pages.*/
#rightBar{
	background-image:url(../graphics/rBarBackground.gif);
	background-repeat:no-repeat;
	background-color:#f4e4b7;
	position:absolute;
	top:0px;
	left:537px;
	border:2px solid #fff;
	border-top:1px solid #fff;
	height:840px;
	width:272px;
}
#rightBar a:link{color:#424f54; text-decoration:underline;}
#rightBar a:visited{color:#424f54; text-decoration:underline; outline:0px;}
#rightBar a:active{color:#424f54; text-decoration:underline;}
#rightBar a:hover{color:#c66900; text-decoration:none;}
#rightBar h4 {margin:0px; padding:0px; font-size:12px; line-height:26px; color:#fff; text-decoration:none;}
.date{color:#000; font-weight:100; size:12px; padding-left:10px;}

/*if the rightBar has an impage to put in make sure it is in this class*/
#rightBar .rPicture
{
	position:relative;
	left:-3px;
	padding:0px;
	margin:0px;
	font-size:0px; /*IE fix for picture padding*/
	border-bottom:0px;
}
#rightBar .rFirst{
	background-image:url(../graphics/rTitleBackground.gif);
	position:relative;
	top:-1px; 
	left:-2px;
	height:25px;
	width:257px;
	border:2px solid #fff;
	padding-left: 15px;
	color:#424F54;
	font-weight:bold;
	font-size:12px;
}

/*To add another bar copy the following CSS class
It is set up to dynamically readjust depending on interior text*/
#rightBar.rSecond, #rightBar.rThird{
	background-image:url(../graphics/rTitleBackground.gif);
	position:relative;
	top:0px;
	left:-17px;
	margin-top:20px;
	height:25px;
	width:257px;
	border:2px solid #fff;
	padding-left:15px;
	color:#424F54;
	font-weight:bold;
	font-size:12px;
}


/*database controls*/
.spacerLineBreak{line-height:7px;}
#rightBar.rSecond .date{font-size:10px;}
.subHeadline{padding-bottom:0px; margin-bottom:0px; line-height:12px; vertical-align:middle;}
.title{font-weight:bold;}
.rThird .mediaListItemDate{font-size:10px; font-weight:100; color:#000; padding-left:10px;} /*audio-and-video.php rightbar*/
.mediaListItemDate{font-size:10px; font-weight:100; color:#000;}

.infoBox {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #111111;
    position : absolute;
    padding : 2px;
    z-index : 16;
    background-color: #EEEEEE;
	font-weight:100;
}

.infoBoxTitle {
    font-weight: bold;

}
    
.infoBoxSubTitle {
	font-style: italic;
	background-repeat: repeat-y;
}



/* Spry Accordion CSS - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main Accordion container. For our default style,
 * we draw borders on the left, right, and bottom. The top border of the Accordion
 * will be rendered by the first AccordionPanelTab which never moves.
 *
 * If you want to constrain the width of the Accordion widget, set a width on
 * the Accordion container. By default, our accordion expands horizontally to fill
 * up available space.
 *
 * The name of the class ("Accordion") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * Accordion container.
 */
.Accordion {
	border: solid 1px white;
	overflow: hidden;
	width:150px;
}

/* This is the selector for the AccordionPanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.
 *
 * The name of the class ("AccordionPanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel container.
*/
.AccordionPanel {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the AccordionPanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open a specific panel.
 *
 * The name of the class ("AccordionPanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel tab container.
 */
.AccordionPanelTab {
	background-color: #eeebd5;
	border: solid 1px white;
	color: #424f54;
	font-size:14px;
	margin: 0px;
	padding: 6px 0 0 15px;
	height:24px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	font-weight:bold;
	vertical-align:middle;
}

/* This is the selector for a Panel's Content area. It's important to note that
 * you should never put any padding on the panel's content area if you plan to
 * use the Accordions panel animations. Placing a non-zero padding on the content
 * area can cause the accordion to abruptly grow in height while the panels animate.
 *
 * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
 * Content container.
 *
 * The name of the class ("AccordionPanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel content container.
 */
.AccordionPanelContent {
	overflow: auto;
	margin: 0px;
	padding-left: 20px;
	height:200px;
	background-color:#fff;
	font-size:12px;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "AccordionPanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the Accordion.
 */
.AccordionPanelOpen .AccordionPanelTab {
	background-color: #a6ab60;
	color:#fff;
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.AccordionPanelTabHover {
	color: #555555;
	background-color:#000;
}
.AccordionPanelOpen .AccordionPanelTabHover {
	color: #555555;
	background-color:#000;
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * Accordion has focus. The "AccordionFocused" class is programatically added and removed
 * whenever the Accordion gains or loses keyboard focus.
 */
.AccordionFocused .AccordionPanelTab {
	background-color: #eeebd5;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open when the Accordion has focus.
 */
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
	background-color: #a6ab60;
}