/* ---------->>> global position styles: <<<-----------------------------------------------------------------------*/
/* ------------  the following styles govern the position/style html, body and wrapper elements -------------------*/

/* note: this is a global white space reset.
 (asterisk is the universal css selector - all descendents will have this setting applied.) 
 this is necessary to make sure thickbox overlay has no gaps in covering 100% of the screen,
 but it is also useful for forcing me to explicitly specify only those elements that really need 
 padding/margins, like stuff (paragraphs, images, etc.) contained in bodyText div. */   
*{padding: 0px; margin: 0px;}
				
/* 'min-height: 101%' forces firefox to always have a scrollbar, even on short pages,
   so that layout doesn't shift, which can throw off the sub-menus by a pixel or two. */		  
html, body, #outer_wrapper  {
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

/* ie7 understands min-height, but ie6 (and under) does not; this hack should force the height
for these browsers and allow the left background graphic to scroll all the way to the bottom of viewport */
/* mac hide \*/
/* html, body, #outer_wrapper {height:100%} */
/* end hide */
	
/* specify a min-width for the body as wide as the wrapper div: 
(prevents negative (inaccessible) left-margins in narrow browser windows 
when using netscape 6+/mozilla on win32.) */					
body {			
	position:absolute;   /* wrapper divs seem to need absolute positioning in order to force 100% height */
	width:100%;	    /* also seem to need a width defined */
	text-align: center; /* this centers all child divs for ie (ie doesn't center based on auto-margins) */		
	background-color: #5984ac;
	background-image: url(../graphics/layout/back_fill.gif);
	background-repeat: repeat-y;
	background-position: center top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	border:0px solid #999999;
}	 

/* ---------->>> layout positioning styles: <<<--------------------------------------------------------------------*/
/* ------------  the following styles govern the position and style of the basic parts of the layout --------------*/	

/* (note: shorthand version of auto-margins (margin: 0 auto;) may not work for mac/ie with tables.)	*/	
#outer_wrapper {	  	
	position:absolute; /* wrapper divs seem to need absolute positioning in order to force 100% height */
	top:0px;
	width:1002px;
	left: 50%; 
	margin-left: -501px; 
	background-image: url(../graphics/layout/back.gif);
	background-repeat: no-repeat;
	background-position: left top;
	background-color: #ffffff;
	border:0px double #CC0000;
}	
	
#mainNavArea {	
	position:relative;
	top:0px;
	left:0px;
	float:left;
	text-align:left;
	width:275px;
	height:auto;
	border:0px solid #cccccc;
}

/* not used */
/* 
#mainNav {
	position: relative;
	top:227px;
	left:0px;
	width:275px;
	height:200px;	
	border:1px solid #000000;
	visibility:visible;
}
*/

/* not used */
/*
#campaignChart {
	position: relative;
	top:-20px;
	left:0px;
	width:275px;
	height:200px;	
	border:0px solid #666666;	
	visibility:visible;
}
*/

/* overflow:auto setting is needed here to force content div to automatically expand around bodytext, 
 which has a float:right setting - this takes it out of the normal page flow, like using position:absolute. */
#content {
	position:relative;
	text-align:left;
	top:0px;
	left:0px;
	height:auto;
	overflow:auto;
	width:100%;
	border:0px #ffcccc solid;	
	margin-bottom:105px; /* build in some margin for the footer, which is about 100px tall */ 
}

#bodyText {	
	position:relative;
	top:0px;
	float:right;
	overflow:auto;
	height:auto;
	background-color:#ffffff;
	border:0px #666666 solid;	
}
	
/* styles for displaying section title and background image */
.backvision {
	background-image: url(../graphics/layout/title_vision.gif);
	background-repeat: no-repeat;
	background-color:#cccccc;
	background-position: right top;
	padding-top: 270px;
	padding-right: 120px;
	padding-bottom: 50px;
	width:607px;
}

.backgoals {
	background-image: url(../graphics/layout/title_goals.gif);
	background-repeat: no-repeat;
	background-position: right top;
	padding-top: 270px;
	padding-right: 120px;
	padding-bottom: 50px;
	width:607px;
}

.backsupport {
	background-image: url(../graphics/layout/title_support.gif);
	background-repeat: no-repeat;
	background-position: right top;
	padding-top: 270px;
	padding-right: 120px;
	padding-bottom: 50px;
	width:607px;
}

.backschool {
	background-image: url(../graphics/layout/title_school.gif);
	background-repeat: no-repeat;
	background-position: right top;
	padding-top: 270px;
	padding-right: 120px;
	padding-bottom: 50px;
	width:607px;
}

.backcontact {
	background-image: url(../graphics/layout/title_contact.gif);
	background-repeat: no-repeat;
	background-position: right top;
	padding-top: 270px;
	padding-right: 120px;
	padding-bottom: 50px;
	width:607px;
}


.backhome {
	background-image: url(../graphics/layout/title_default.gif);
	background-repeat: no-repeat;
	background-position: right top;
	padding-top: 135px;
	padding-right: 0px;
	padding-bottom: 50px;
	width:727px;
}


/* styles for campaign progress chart */
/* 
.graphContainer {
	position:relative;
	top:0px;
	border:0px 333333 solid;
}
*/

#graphHeader {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	background-image: url(../graphics/layout/graph_header.gif);
	background-repeat: no-repeat;
	background-position: right;
	padding-left: 80px;
	height: 16px;
	border:0px #666666 solid;
}

#graphFooter {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #3270AD;
	background-image: url(../graphics/layout/graph_footer.gif);
	background-repeat: no-repeat;
	background-position: right top;
	padding-left: 80px;
	padding-top: 4px;	
	height: 26px;
}

#graphGrid {
	/* background-image: url(../graphics/layout/graph_grid.gif); */
	position:relative;
	top:0px;
	height:52px;
	padding-left: 100px;	
}

/* these arrows should stay at the top of the graph grid filled area as it increases */
#graphArrow0 {	
	position:relative;
	top:44px;
}

/* arrows 0 - 6 represent increments that are in back of the baseline 'to date' graphic and cannot fall below this level, no matter how low the funds are */
#graphArrow1 {	
	position:relative;
	top:44px;
}

#graphArrow2 {	
	position:relative;
	top:44px;
}

#graphArrow3 {	
	position:relative;
	top:44px;
}

#graphArrow4 {	
	position:relative;
	top:44px;
}

#graphArrow5 {	
	position:relative;
	top:44px;
}

#graphArrow6 {	
	position:relative;
	top:44px;
}

/* arrows 7 - 19 represent increments that are changeable */

#graphArrow7 {	
	position:relative;
	top:40px;
}

#graphArrow8 {
	position:relative;
	top:36px;
}

#graphArrow9 {
	position:relative;
	top:32px;
}
	
#graphArrow10 {
	position:relative;
	top:28px;
}

#graphArrow11 {
	position:relative;
	top:24px;
}

#graphArrow12 {
	position:relative;
	top:20px;
}

#graphArrow13 {
	position:relative;
	top:16px;
}

#graphArrow14 {
	position:relative;
	top:12px;
}

#graphArrow15 {
	position:relative;
	top:8px;
}

#graphArrow16 {
	position:relative;
	top:4px;
}

#graphArrow17 {
	position:relative;
	top:0px;
}

/* keep at the same position as the last arrow - we don't want to overlap heading */
#graphArrow18 {
	position:relative;
	top:0px;
}

/* if graph is full, remove arrow from display */
#graphArrow19 {
	position:relative;
	top:0px;
	display:none;
}

/* make sure to build in enough margin-bottom in the #content div to space this footer out;
otherwise, on long pages, the footer might overlap the text */
#footer {	
	position:absolute;
	text-align:left;
	left:275px;
	bottom:0px;
	height:75px;
	width:500px;
	padding-bottom:20px;
	background-color:#ffffff;
	border:0px #333333 solid;	
}	

/* center this div vertically and horizontally in the browser viewport (margin-left/top = half of width/height) */

#popUpFlash  {
	z-index:10; 
	position: absolute;
	width: 400px;
	height: 400px;
	text-align: center;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -200px;
	visibility:hidden;
	display:none;
}

#noFlashMsg {
	display:block;
	visibility:visible;
	position:relative;
	width:350px;
	top:100px;
	left:100px;
	text-align:left;
	border:1px #999999;
}

#noScriptMsg {
	display:block;
	visibility:visible;
	position:relative;
	width:325px;
	top:100px;
	left:100px;
	text-align:center;
}

p.msgText {
	color:#CC0000;
	padding:15px;
	background-color:#ffffff;
	border:1px solid #999999;
}

/* ---------->>> sub-menu positioning styles: <<<------------------------------------------------------------------*/
/* ------------  the following styles govern the position/style/layer order of dhtml sub-menus --------------------*/	

/* [currently none] */

/* ---------->>> sub-nav styles: <<<-------------------------------------------------------------------------------*/
/* ------------  the following styles set the appearance of the sub-navigation links in the left column -----------*/	

/* [currently none] */
					
/* ---------->>> text styles: <<<----------------------------------------------------------------------------------*/
/* ------------  the following styles set the appearance of text for paragraphs, bold text, etc. ------------------*/	

div {					
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px; 
}

p {	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	padding-left:1px;
	padding-bottom:15px; 
}	
											
.bold {					
	font-style:inherit;
	font-weight:bold; 
}
						
.italic {				
	font-weight:inherit; 
	font-style:italic;
}

/*
h1 	{	
	font-size: 14px; 
	font-weight: bold; 
	color: #4a4c83; 
}	
	
h2	{	
	font-size: 12px; 
	font-weight: bold; 
	color: #4a4c83; 
	padding-bottom:10px;
}	
	
h3	{	
	font-size: 11px; 
	font-weight: bold;
	padding-bottom:0px;
}	
*/

.detailText {			
	font-size: 11px; 
	color: #999999;
}						
						
.errorText {	
	font-weight:bold; 
	color: #cc0000;
}

.footerLink {   
	color: #4a4c83; 
	font-weight:bold;
	padding-left: 1px;
}
						 
.footerLink a:link, .footerLink a:visited	{ 
	color: #4a4c83; 
	font-weight:inherit;
	text-decoration: none;
	}
	
.footerLink a:hover, .footerLink a:active	{ 
	color: #4a4c83; 
	font-weight:inherit;
	text-decoration: underline;
	}
	
.footerCopy {   
	font-size: 11px;
	color: #999999;
	padding-bottom: 25px;
}
			
												
/* regular link styles */
a:link {  	
	color: #6472dc;
	}
	
a:hover {  	
	color: #6472dc;
	}
	
a:visited { 	
	color: #0929a2;
	}

/* ---------->>> list styles: <<<----------------------------------------------------------------------------------*/
/* ------------  the following styles set the appearance of ordered/unordered lists -------------------------------*/	

/* global white space reset forces us to style lists manually */

ul {	
	list-style:square;
	list-style-position:outside;
	margin-left:0em;
	padding-left:3em;
	text-indent:0em;
	width:80%;
	padding-bottom:15px;
	border:0px solid #333333;
}
						
ol {	
	list-style-position:outside;
	margin-left:0em;
	padding-left:3em;
	text-indent:0em;
	width:80%;
	padding-bottom:15px;
}

li { 	
	padding-bottom:5px;
	color:#666666;
}

/* ie 6 doesn't like negative margins with floated elements; it pulls these listHeaders off screen. instead,
apply the negative margin to a wrapper div for styles that use the listHeader class; this seems to work well. */
div.listOutdent {
	margin-left:-3em
}			
			
li.listHeader {
	list-style:none;
	margin-left:0em; 
	/* margin-left:-3em; */ /* apply negative margin to wrapper div instead */
	padding-left:4px;
	text-indent:0em;
	font-weight:bold;
	float:left;	/* must float this class in order for the top border to 'shrink wrap' to the list item */
	width:auto;
	font-size:13px;
	font-weight:bold;
	color:#5191cd;
	border-top:3px double #5191cd;
	padding-top:2px;
}

li.listItem {
	clear:left;			/* make sure we clear the left float set in listHeader class */
	font-weight:normal;
	color:#5191cd;		/* let's color the bullet points blue to match the listHeader's color and border...  */
}

.textColor {
	color:#666666;		/* ...and wrap the li text within a span that resets it to the normal text color (gray) */
}

.bulletedColumn {
	position:relative;
	float:left;
	width:200px;
	padding-top:15px;
	border:0px #999999 solid;
}

#columnLeft {
	width:290px;
	margin-right:20px;
}

#columnRight {
	width:290px;
	margin-right:0px;
}

/* ---------->>> form element styles: <<<--------------------------------------------------------------------------*/
/* ------------  the following styles set the appearance of form fields, selects, etc. ----------------------------*/			
		
div.row {
  clear: both;
  height:25px;
  overflow:visible;
  padding-top:3px;  
  border:0px dashed #ffffcc;
}

div.rowHeading {
  clear: both;
  height:15px;
  overflow:visible;
  padding-top:15px;  
  padding-bottom:2px;
  margin-bottom:3px;  
  border-bottom:2px dotted #5191cd;
}

div.rowInfo {
  clear: both;
  height:10px;
  overflow:visible;
  padding-top:15px;  
  padding-bottom:2px;
  margin-bottom:3px;  
  border-bottom:2px dotted #5191cd;
}

div.row span.formField {
  float:right;
  width:275px;
  text-align:left;
  border:0px solid #ffcccc;
} 

div.row span.formLabel {
  float:left;
  width:125px;
  padding-top:3px;
  text-align:right;
  font-weight:normal;
  border:0px solid #000000;
}

div.row span.formInfo {
	font-weight:normal; 
	font-size:11px;
}

input {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	margin-top:0px;
	margin-bottom:0px;
}

input.inputSizeReg {
	width:225px; /* size of regular input field (instead of using 'size=40' in input tag) */
}

input.inputSizeSm {
	width:75px;  /* size of small input field */
}

select {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width:auto;  /* don't set size of drop-down menus - let them adjust automatically to width of contents */
	color: #000000;
	margin-top:0px;
	margin-bottom:0px;
}

.radio {
	margin-top:0px;
	margin-bottom:0px;
	width:25px;
	height:100px; /* since ie pads radio buttons but ff doesn't, set height to space them the same */
	size:100px}	

.check {
	margin-top:0px;
	padding-top:2px;
	margin-bottom:0px; 
	height:20px; /* since ie pads radio buttons but ff doesn't, set height to space them the same */
}

.formButton {			
	font-size: 12px;
	font-weight: bold;
	background-color: #666666;
	color: #ffffff;
	border: 2px solid #999999;
	margin-bottom:5px;
}
						
.popFormText {			
	font-size: 11px; 
	margin-bottom:5px;
}

/* ---------->>> table styles: <<<---------------------------------------------------------------------------------*/
/* ------------  the following styles set the appearance of formatted tables for charts, etc. ---------------------*/	

/* [currently none] */						
		
/* ---------->>> miscellaneous styles: <<<-------------------------------------------------------------------------*/
/* ------------  the following styles set the appearance of horizontal rules other misc stuff ---------------------*/
				
div.rule hr { 			
	/* take out the hr element; its top/bottom margin properties are completely
	different in ff and ie. (it will display for non-css browsers.) */
	display:none;
}

/* this div wraps around and replaces the hr. */
div.rule { 				
	color: #C0C0C0;
	background-color: #C0C0C0;
	height: 1px;
	margin-top:5px;
	margin-bottom:5px;
}