@charset "utf-8";


/* Observe the following conventions on this site.

	1) If a style is aimed at a single element on the page, cordinate the CSS and DOM element using ID's instead of Classes.
	
	2) Define styles in this file ONLY if the style ...
		A) Applies to the Dreamweaver Template .
		B) Is used commonly throughout all pages.
		
	3) If a style is used for one of the APPs, create another file (but only if the style is used across multiple APP's.
	
	4) If a style is common throughout a page (but only that page), then define it within the document's head inside of <style>.here{color:#112358;}</style> tags.
	
	5) If the style is only used one time, define it directly on the tag itself. EX: <div style='color:#112358;'></div>

*/



/* Define Styles for all HTML tags throughout the site.  Of course, they may be overridden in a narrower scope.
   Use the convention of ALL CAPS WHENEVER THE CSS DEFINITION REFERS TO AN HTML TAG. */
BODY {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	background-color:#CCCCCC;
	background-image:url(images_template/body-background.jpg);
	background-repeat:repeat-x;
}

H1 {
	background-color: #fdf8d8;
	color:#660000;
	font-size:28px;
	border-bottom: solid 1px #cc9999;
}
H2 {
	background-color: #fdf8d8;
	color:#990000;
	font-size:24px;
	border-bottom: solid 1px #cc9999;
}
H3 {
	background-color: #fdf8d8;
	color:#BB0000;
	font-size:20px;
	border-bottom: solid 1px #cc9999;
}
H4 {
	background-color: #fdf8d8;
	color:#CC0000;
	font-size:18px;
	border-bottom: solid 1px #cc9999;
}
A {

}
BLOCKQUOTE {
	background-image:url(images/quotes-start.png);
	background-repeat:no-repeat;
	background-position: top left;
	text-indent: 35px;
	padding: 8px;
	font-style: italic;
	border-top: 1px #CCCCCC dashed;
	border-bottom: 1px #CCCCCC dashed;
}



/* The following styles are directed at specific "element ID's" found within the DOM of every page site-wide.
   If Adobe Dreamweaver is used, the Element ID's will be found within the Template's "locked regions". */ 
#logoContainer {
	position:absolute;
	top:-9px;
	left:60px;
}
#missionStatementDiv {
	position: absolute;
	top: 50px;
	left: 45%;
}
.missionStatementImg {
	width: 90%;
	min-width: 300px;
}
#bodyContainer {
	position:relative;
	left: -30px;
}
#tableCellBodyContainer {
	vertical-align:top;
	width: 99%;
}
#bodyInner {
	position: relative;
	margin-left: 60px;
	top: -18px;
}
#navTopConatiner {
	position:relative;
	height: 120px;
}
#donationContainer {
	position:absolute;
	top: 60px;
	width:  auto;
	left: 40%;
	font-size: 14px;
}
#donationContainer A {
	text-decoration:underline;
	color:#0000FF;
	font-weight:bold;
	font-size:16px;
}
#donationContainer A:HOVER {
	text-decoration:none;
	color:#FF6600;
}
#urgentCounter {
	margin-left: 20px;
	color:#666666;
	font-size:12px;
}
#downloadForm {
	border: 2px dashed #FF0000;
	padding-left: 20px;

	background-color:#FFFFFF;
	background-image:url(images/downloadFormBack.jpg);
	background-position:top right;
	background-repeat:no-repeat;
	

	display:none;
	position:fixed;
	z-index: 100000;
	width:100%;
}
#footerContainer {
	text-align:center;
	margin-bottom:28px;
}
#facebookShareMessage {
	font-size:12px;
	color:#333333;
	padding-right:100px;
}
#helpAppButton{
	padding-bottom:15px;	
}
#helpAppText {

}



/* These ID's are associated with the "stretchy table" comprising the main layout. */
#tableBodyTopLeft {
	width: 1%;
	background-image:url(images_template/back-white-top-left.png);
	background-repeat:no-repeat;
}
#tableBodyTopRight {
	width: 1%;
	background-image:url(images_template/back-white-top-right.png);
	background-repeat:no-repeat;
}
#tableBodyTopCenter {
	width: 99%;
	background-image:url(images_template/back-white-top-center.png);
	background-repeat:repeat-x;
}
#tableBodyMiddleLeft {
	width: 1%;
	background-image:url(images_template/back-white-middle-left.png);
	background-repeat:repeat-y;
}
#tableBodyMiddleRight {
	width: 1%;
	background-image:url(images_template/back-white-middle-right.png);
	background-repeat:repeat-y;
}
#tableBodyMiddleCenter {
	width: 99%;
	background-color:#FFFFFF;
	vertical-align: top;
}
#tableBodyBottomLeft {
	width: 1%;
	background-image:url(images_template/back-white-bottom-left.png);
	background-repeat:no-repeat;
}
#tableBodyBottomRight {
	width: 1%;
	background-image:url(images_template/back-white-bottom-right.png);
	background-repeat:no-repeat;
}
#tableBodyBottomCenter {
	width: 99%;
	background-image:url(images_template/back-white-bottom-center.png);
	background-repeat:repeat-x;
}






/* For the Left Nav bar when a list item has been selected.  The suffix "_LIT" means that the colors are bright to indicate a selection. */
.navLeftTop_LIT {
	position:relative;
	background-image:url(images_template/nav_left_lit_top.png);
	background-repeat:no-repeat;
	width:233px;
	height:92px;
}
.navLeftMiddle_LIT {
	position:relative;
	width: 233px;
	background-image:url(images_template/nav_left_lit_middle.png);
	background-repeat:repeat-y;
}
.navLeftBottom_LIT {
	width: 233px;
	height: 32px;
	position:relative;
	background-image:url(images_template/nav_left_lit_bottom.png);
	background-repeat:no-repeat;
}






/* For the Left Nav bar when a list item has been selected.  The suffix "_DARK" means that the colors represent an inactive selection. */
.navLeftTop_DARK {
	position:relative;
	background-image:url(images_template/nav_left_dark_top.png);
	background-repeat:no-repeat;
	width:233px;
	height:92px;
}
.navLeftMiddle_DARK {
	position:relative;
	width: 233px;
	background-image:url(images_template/nav_left_dark_middle.png);
	background-repeat:repeat-y;
}
.navLeftBottom_DARK {
	width: 233px;
	height: 32px;
	position:relative;
	background-image:url(images_template/nav_left_dark_bottom.png);
	background-repeat:no-repeat;
}





/* ---- These classes are for left-Nav components which are in common with "_LIT" and "_DARK" suffixes. ---- */
.navLeftTitleText {
	position: relative;
	top: 42px;
	left: 53px;
	font-size: 20px;
	font-weight: bold;
	color: #FFFFFF;
	width: 180px;
}

.navLeftContainer {
	position: relative;
	left: 62px;
	top: 20px;
	margin-top:-5px;
}

#tableCellLeftNav {
	vertical-align:top;

}


/* ---- These are in common with all links in the Nav bar ----- */
#tableCellLeftNav UL {
	padding:0;
	
	margin-top:0;
	margin-bottom:0;
	margin-right:20px;
	margin-left:30px;
	
	display:block;
	position: relative;

	list-style:square;
	line-height: 25px;
	color:#FFFFFF;
	font-weight:bold;
	
	font-size:14px;
}
#tableCellLeftNav UL LI A {
	
}
#tableCellLeftNav UL LI A:HOVER {
	text-decoration:underline;
}

/* ---- These are specific to a Nav link being selected or not ----- */
A.selectedNavLink {
	color:#FFFF00;
	font-size:16px;
	text-decoration:underline;
}
A.navLink {
	color:#000000;
	font-size:14px;
	text-decoration:none;
}
.navSmallFont {
	font-size: 12px;
}









/* The following CSS Classes are used at least twice throughout the site.
   Time is precious so don't squander it on abstraction (i.e. Perform a search for: "Model View Controller Hello World").
   The rules of abstraction suggest that designers should define styles inline the first time something is used (EX: <div style='color:#112358'>Thought</div>).
   For the same reason, programmers should code logic into monolithic routines unless the logic is being duplicated.
   However, it is impossible to be right.  Such advice amounts to a "correct rule" which is sure to be contradicted with other context.
   Duality? Define a new CSS Classes despite it only being implemented once if the designer expects the style will be re-used in the future with a (high probability).
   This duality-game-of-attrition could go on forever, either way, on anything.  
   The aforementioned advice is just a generalized recommendation to be taken whenever in doubt.
*/

.formInputWindow {

	border: thin black solid;
	padding: 5px;
	
	background: #ffffff;
	background: -moz-linear-gradient(top, #f0f0f0, #ffffff, #ffffff, #ffffff);
	box-shadow: 5px 5px 10px #000000;
	
	filter: progid:DXImageTransform.Microsoft.gradient ( startColorstr ='#f0f0f0', endColorstr = '#ffffff' ),
			progid:DXImageTransform.Microsoft.Shadow (color='#333333',Direction=135, Strength=7);
}

.tableColumnSmallLeft {
	width: 1%;
	white-space:nowrap;
	vertical-align:top;
}
.tableColumnLargeRight {
	width: 99%;
	vertical-align:top;
}
.listDuality_x1 {
	list-style-image:url(images_template/listDuality_x1.png);
}
.listDuality_1x {
	list-style-image:url(images_template/listDuality_1x.png);
}
.listItem {
	list-style-image:none;
}
.listCompare_Good {
	margin-bottom: 5px;
	list-style-image:url(images_template/icon_good.png);
	text-decoration:none;
}
.listCompare_Good:HOVER {
	text-decoration:underline;
}
.listCompare_Bad {
	margin-top: 5px;
	list-style-image:url(images_template/icon_bad.png);
	text-decoration:none;
}
.listCompare_Bad:HOVER {
	text-decoration:underline;
}
.underline {
	text-decoration:underline;
}
.firstPersonContent {
	background-color:#f6f6f6;
	padding: 20px 10px 10px 10px;
	margin-right: 10px;
	border: 1px dashed #CCCCCC;
	background-image:url(images_template/writtenInFirstPerson.png);
	background-position: top right;
	background-repeat: no-repeat;
}
.firstPersonContent H1 {
	background-color: #dddddd;
	color:#000066;
	border-bottom: solid 1px #000000;
}
.firstPersonContent H2 {
	background-color: #dddddd;
	color:#000066;
	border-bottom: solid 1px #000000;
}
.firstPersonContent H3 {
	background-color: #dddddd;
	color:#000066;
	border-bottom: solid 1px #000000;
}
.firstPersonContent H4 {
	background-color: #dddddd;
	color:#000066;
	border-bottom: solid 1px #000000;
}
.exampleConversation {
	background-color:#f6f9f6;
	padding: 25px 10px 10px 10px;
	margin-right: 10px;
	border: 1px dashed #CCCCCC;
	background-image:url(images_template/exampleConversation.png);
	background-position: top right;
	background-repeat: no-repeat;
}
.debateThread {
	margin-left: 0px;
	border-right: 1px #cccccc dotted;
	border-bottom: 1px #cccccc dotted;
}
.debateThread TD {
	padding: 8px;
	border-top: 1px #cccccc dotted;
	border-left: 1px #cccccc dotted;
}
.opponentName {
	color:#553300;
	font-weight:bold;
}
.proponentName {
	color:#005500;
	font-weight:bold;
}

/*	Because the site is stretchy, large images may need to scroll horizontally if the browser window is small.
	If the images are made to dynamically contract the problem is that text becomes illegible.
	Unfortunately there is no way to make the height automatic without employing JavaScript.
	The solution involves 2 DIV's, a conventional "<img ..." tag, and an explicit CSS height. 
	EX:
 	<div class="imageScrollOuterDiv" style="height:1123px;"><div class="imageScrollInnerDiv">
	<img src="images/fileName.png" alt="Description" />
	</div></div>
 */
.imageScrollOuterDiv {
	overflow-x:scroll; 
	overflow-y:hidden; 
	position:relative; 	
	border:outset;
}
.imageScrollInnerDiv {
	position:absolute;
}
.imageScroll_BothXandY_OuterDiv {
	overflow:scroll;  
	position:relative; 	
	border:outset;
}