@charset "utf-8";
/* CSS Document: cssmain.css, MC Habitat for Humanity */

/* IE patches  */
* html #global #hnav #main #content #bannerjpg #footer #vnav #pageContent  #rightRail{
	display: inline; }
/*  end IE patches  */

/******************************************************************************************************************************/

/************************       THIS FILE CONTROLS THE PAGE LAYOUT AND SITEWIDE FORMATTING:   DO NOT  EDIT   *****************/

/******************************************************************************************************************************/


/***********************************************************************************************************************/
/******************************                      DEFAULT/GENERAL STYLES             ********************************/
/***********************************************************************************************************************/

body {
	margin: 0px;
	padding: 0px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background:#ffffff;
	font-size: 12px;
	color: #333;
	text-align:center;
	/*   added 12/23/08 to create a teal blue h2 background for centered pages  */
	background-image: url(/images/h2blue_bg.jpg);
	background-repeat: repeat-x;
	background-color: #28b5b5;
}

p {
	line-height: 140%;
	margin: 0 15px 12px 30px;
}

h1 {
	font-size: 18px;
	font-family:  "Century Gothic", Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:#CC6600;
	margin: 5px 20px 10px 20px;
}

h2 {    /* torquise content subheads  */
	font-size: 15px;
	font-family: "Century Gothic", Arial, Helvetica, sans-serif;
	margin: 6px 15px 10px 25px;
	color: #006666; 
}

h3 {    /* gray subheads subheads  */
	font-size: 15px;
	font-family: "Century Gothic", Arial, Helvetica, sans-serif;
	color: #333333;
	margin: 20px 0 10px 25px;  
}

h4 {    /* gray subheads subheads, 1 px smaller than h3  */
	font-size: 14px;
	font-family: "Century Gothic", Arial, Helvetica, sans-serif;
	color:#333333;
	margin: 10px 0 0 25px; 
	}

h5 {    /*award winners, highlighted names in dark red */
	font-size: 13px;
	font-family: "Century Gothic", Arial, Helvetica, sans-serif;
	color:#990000;
	margin: 10px 0 10px 60px;  
}

h6 {    /*ReStore LARGE apple green*/
	font-size: 22px;
	font-family: "Century Gothic", Arial, Helvetica, sans-serif;
	color: #66CC33;
	margin: 10px 0 10px 25px;  
	text-align: center;
}

a:link, a:visited {  
	color: #336699; 
	text-decoration:none; 
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	border-bottom: dotted 1px #336699;
}

a:hover, a:active {  
	color: #55ba4c; 
	text-decoration:none; 
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	border-bottom: dotted 1px #55ba4c;
}

/************* BANNERJPG DIV HOLDS JPG HEADER IMAGE and HNAV  *******/

#bannerjpg{
	position: relative;  
	border-right: 2px outset #ccc;  /* extends 4px below bottom of jpg  */
	float: left;
	width: 780px;
	height: 312px;
}

	/************* DEFINES IMAGES USED AS BACKGROUNDS IN JPG HEADER, ID="BANNERJPG"; VARIES BY SECTION *******/
	
	.homepage {
		background: #fff url(../images/header_images/homepage.jpg); }
	
	.aboutus {
		background: #fff url(../images/header_images/aboutus.jpg); }
	
	.homeownership {
		background: #fff url(../images/header_images/homeownership.jpg); }
		
	.volunteering {
		background: #fff url(../images/header_images/volunteering.jpg); }
		
	.restore {
		background: #fff url(../images/header_images/restore.jpg); }
		
	.events {
		background: #fff url(../images/header_images/events.jpg); }	
		
	.news {
		background: #fff url(../images/header_images/news.jpg); }
		
	.donate {
		background: #fff url(../images/header_images/donate.jpg); }
		
	.sponsors {
		background: #fff url(../images/header_images/sponsors.jpg); }
		
	.projects {
		background: #fff url(../images/header_images/projects.jpg); }


/***************************   BREADCRUMB TRAIL, DIRECTLY BENEATH HEADER IMAGE JPG  *****************************************************/

.breadcrumb {   
	font-size: 7pt;
	margin: 4px 0 0 22px;
	padding-top: 2px;
	text-decoration: none;
}

.breadcrumb a {
	text-decoration: none;
}	
	
/***************************   UNORDERED LIST (bullet) styles  *****************************************************/

ul.noBullets {
	list-style:none;
}

ul{
	position: relative;
	padding: 0 15px;
	margin: 10px 0 15px 35px;
}

ul.menu {
	position: relative;
	font-family: "Arial", Arial, Helvetica, sans-serif;
	font-size: 11px; 
	font-weight: bold;
	list-style:none;
	padding: 10px 8px 0 8px;
	margin: 0;
	color:#666666;
}

ul.menu li {
	display:block;
	margin: 0 4px 0 0;
	padding:0;
}

ul.menu li a {
	margin-right: 10px;
	text-decoration:none;
	border-bottom:none;
}

ul.menu img {
	margin: 0 0 0 0px;
	text-decoration:none;
	border: 0;
	
}


ul.boldblue li {
	display: block;
	margin: 0 4px 0 10px;
	padding:0;
	font-size: 110%;
	color: #006666
}

ol li {
	display:block;
	margin: 0 1em 0 0;
	padding: 0 0 8px 0;
	line-height: 150%;
}

/***********************************************************************************************************************/
/******************************                       PAGE LAYOUT DIVS                  ********************************/
/***********************************************************************************************************************/


/**--------------------------------------- GLOBAL: ENTIRE PAGE INCLUDING FOOTER --------------------------------------**/

#global {        				
	position: relative;
	width: 780px;
	margin: 0 auto;
	text-align:left;
	padding: 0;
	padding-bottom: 20px; /*  padding between Copyright and bottom scroll bar  */
	background-color: #fff;
}

/**--------------------------------------- MAIN: BOTH LEFT AND RIGHT COLUMNS --------------------------------------**/

#main {
	/* changing position absolute to relative */
	position: relative;
	float: left;
	width: 780px;
	height: auto;
	padding-bottom:10px;  /* padding between content and bottom-border  */
	border-bottom: 2px  solid #ccc ;
	background-color: #fff;	
}


/**------------------------------  CONTENT: LEFT COLUMN(PAGE CONTENT) ------------------------------**/

#content {     /* left side of page excluding rightrail  */
	position:relative;
	width: 550px;
	float:left;
	margin-top: 10px;
	/*   border-bottom: 3px #ccc solid;   */
	background-color: #fff;
}

	table {    /* default table style to set margins comparable to paragraphs, headings, etc. */
		margin: 0 10px 0 25px;
		width: 450px;
	}
		
	#content .tableDonate { /* for ReStore's Donate page table */
		margin: 10px 0px 5px 40px;
		width: 550px;
	}

	#content .tableIndentNone {  /* Habi-facts' borderless table at bottom of page */
	width: 450px;
	}
	
	#content .tableIndentNone td {
	margin: 0;
	padding: 0;
	}
	
	#content .tableIndentNone h2 {
	margin: 10px 0 6px 0;
	padding: 0 0 2px 0;
	text-align: left;
	}
	
	#content .tableDirectory {  /* for Our People's staff directory table  */
		margin: 10px 10px 0 25px;
		padding-left: 10px;
		width: 760px;
		padding: 2px;
		text-align: inherit;
		float: left;
		}	
	
	#content .tableDirectory td {
		margin: 0;
		cell-padding: 2px;
		padding-bottom: 10px;
		}
	
	#content .tableDirectory img {
		float: left;
		padding: 2px;
	}

	#content .tableSubhead {
		font-size: 120%;
		font-weight: bold;
		color: #299650;
		padding-bottom: 8px;
	}
	
	#content td {
		padding-left: 4px;}
		
	#content .coupon {
		float:left;
		margin: 10px; 
	}
	
	#content .photoStrip {
		display: inline;
		float: left;	
	}

	#content .photoStrip img{
		widthXS: 275px;
		display: inline;
		float: left;
		border: 0;
	}
	
	#content .logoStrip {
		float: left;
		margin: 0 0 20px 0;
	}
	
	#content .logoStrip img {
		display: inline;
		float: left;
		margin: 10px 0 20px 35px;
		padding: 0;
		border: 0;
	}
	/**------------------------------  PAGECONTENT: individual blocks of content WITHIN CONTENT DIV on left side of page       */
		.pageContent {  
			position:relative;
			float: left;
			padding:0 0 5px 0;
			width: 550px; 
			margin: 0px 15px 10px 0px;
			background-color: #fff;			
		}
		
		.pageContent p {
			margin-left: 25px;}
		
		.pageContent img {
			float: right;
			margin-left: 10px;
			padding: 0;
		}
				
		.pageContentInlineimg {
			display: inline;
			float: left;
			margin-left: 0px;
			margin-top: -20px;
			padding-top: -20px;
			border: 0;
		}
	
	/**------------------------------  PAGECOLORBLOCK: COLORBLOCK AT BOTTOM OF SECTION INDEX PAGES, BENEATH PAGECONTENT DIVS       */
	#pageColorBlock {
		display: inline;
		float: left;
		position:relative;
		padding: 0;
		heightX: 155px; 
		width: 550px;
		margin: 0 0 0 0; 
		color: #333333;
	}
		
	#pageColorBlock h1, #pageColorBlockBig h1 {
		padding: 10px 0 0 20px;
		color: #333333;
		text-align: left;}
		
	#pageColorBlockBig {
		display: inline;
		float: left;
		position:relative;
		height: 210px;
		width: 550px;
		color: #333333;
		padding-top: 0;
	}
		
	 #pageColorBlockBig img {
		float:left;
		margin: 0 10px 5px 0;
	}
	
	#pageColorBlock p, #pageColorBlockBig p {		
		margin: 0 10px 5px 10px;
	}
	
	 #pageColorBlockBig .padlogo {
		float:left;
		margin: 10px 10px 5px 0;
	}
	
	#pageColorBlock img {
		position: relative;
		float: left;
		margin: 0;
		padding-right: 15px; 
		color: #E0B778;
		display: inline;
		border: 0;
	}
	
	#pageColorBlock p {
		margin-left: 0;
		margin-top: 0;
	}
		/******   PAGECOLORBLOCK BLK definitions used as second class to create different pageColorBlock colors and bg images *****/
		
		.blkText {
			position: relative;
			float: right; 
			height: 135px;
			width: 350px;
			padding: 15px 0px 0px 15px;
			margin: 15px 0px 0px 15px;
			text-align: left;
		}
		
		.blkHomepage {
			float: right ;
			height: 155px;
			width: 450px;
			text-align: left;
			background: #fff url(../images/bg_home.gif) repeat-y; 
		}
		
		.blkApplegreen {
			float: right ;
			background: #fff url(../images/bg_applegreen.gif) repeat-y; 
		}
		
		.blkTrueblue {
			float: right ;
			height: 155px;
			width: 350px;
			text-align: left;
			background: #fff url(../images/bg_trueblue.gif) repeat-y; 
		}
		
		.blkTaupe {
			float: right ;
			height: 155px;
			width: 350px;
			text-align: left;
			background: #fff url(../images/bg_taupe.gif) repeat-y; 
		}	
		
		.blkBluedenim {
			float: right ;
			height: 155px;
			width: 350px;
			text-align: left;
			background: #fff url(../images/bg_bluedenim.gif) repeat-y;
		}
		
		.blkSilver {
			float: right ;
			height: 155px;
			width: 350px;
			text-align: left;
			background: #fff url(../images/bg_silver.gif) repeat-y;
		}

/**-------------------------- RIGHT RAIL:  COLUMN TO RIGHT OF CONTENT AREA, INCLUDING VERTICAL NAV AND IMGBOX --------------------------------**/

#rightRail{
	position: relative;
	float: right;
	/* remove for float drop  left: 0px;  */
	width: 185px;
	height: auto;
	font-size: 11px;
	margin-right: 10px;
	background-color: #fff;	
}

#rightRail img {	
	border-top: 1px solid #fff;
	margin-left: 10px;
}

#rightRail h2 {
	 position: relative;
	font-family: "Century Gothic", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #383838;
	margin: 0 0 10px 0;
	padding: 0 0 0 0;
	text-align: center;
}

#rightRail h3 {
	font-size: 12px;
	margin: 0px 12px 5px 0px; 
}

#rightRail p {
	margin: 0; 
	padding-bottom: 1em;
}

.applegreen {
	background-color: #9BBB66; }

.buff {
	background-color: #FFD87F; }
	
.bluedenim {
	background-color: #ACB6CA; }

.taupe {
	background-color: #C9B9A7; }
	
.silver {
	background-color: #CCC5BE; }

.seafoam {
	background-color: #C6D5C6; }

.trueblue {
	background-color: #C0DAE9; }
		
.silver {
	background-color: #BBBBBBS;}



#imgBox {   /* image box in category subpages rightrail   */
	position: relative;
	float: left;
	width: 185px;
	line-height: 150%;
	margin: 0 10px 0 0;
	text-align: center;	
	 display: table-cell;
     vertical-align: middle;
}	
	
#imgBox img {
	border: 0;
	floatx: left;
	margin: 20px 0 10px 0;
}

#imgBoxRestoreLogo {
	margin: -20px 0 10px 0; 
}
/**----------------------------  FOOTER NAVIGATION BAR --------------------------------------**/

#footer {
	float: left;
	width: 100%;
	text-align: center;
	padding-topx: 25px;
	color:#757575;
	background-color: #fff;
}

#footerMenu {
	position: relative;
	width: 777px;
	padding: 1px 0;
}

#footerMenu ul {
	text-align: center;
}

#footerMenu ul li{
	display: inline;
	font-size: 110%;
}

#footerMenu ul a, #footerMenu ul a:visited {
	color:#757575;
}

#footerMenu ul a:hover, #footerMenu ul a:active {
	border-bottom:#757575 1px dotted;
}

#footer p {
	text-align:center;
	line-height: 100%;
	margin-top: 10px;
}


/***********HNAV:  HORIZONTAL NAVIGATION bar in header image jpg***************/

#hnav {
	float: left;
	position: relative;
	top: 255px;
	width: 100%;
	text-align: center;
	color:#757575;
	/* alternate style sheet loads hnav_bg2.gif if IE earlier than 6.0 detected */
	background-image: url(../images/hnav_bg2.png);
 }

#hnavMenu {
	position: relative;
	width: 777px;
	padding: 8px 0;
	margin-left: 20px;
}

#hnavMenu ul {
	text-align: left;
	/* position: relative;
	top: 4px;  */
}

#hnavMenu ul li {
	display: inline;
	font-size: 110%;
	color: #787878;
	margin: 0;
	padding: 0;
}

#hnavMenu ul a {
	font-family: "Arial", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	margin: 0;
	padding: 2px 4px;
	}

#hnavMenu ul a:hover, #footerMenu ul a:active {
	border-bottom:#757575 1px dotted;
}

/***********VNAV:  VERTICAL NAVIGATION bar in right rail ***************/

	
#vnav {
	position: relative;
	float: right;
	top: 0px;
	left: 0px;
	border: 2px outset #ccc;
	margin: -30px 0 20px 0;  /* hack to pull vertical nav menu up into header and left*/
	width: 185px;
}

#vnavRestore {
	position: relative;
	float: right;
	top: 0px;
	left: 0px;
	border: 2px outset #ccc;
	margin: -25px 0 5px 0;  /* hack to pull vertical CLOSER to header; other pages -30*/
	width: 185px;
}
	
*html #vnav {
	display: inline;
	margin-left: -185px;}
	

*html #vnavRestore {
	display: inline;
	margin-left: -185px;}

#vnav .menu li {
	margin-right: 10px;
	padding-top: 6px;
	border-bottom: 1px solid #787878;
	colorx:#787878;
}	
	
#vnavRestore  .menu li {
	margin-right: 10px;
	padding-top: 6px;
	border-bottom: 1px solid #787878;
	colorx:#787878;
}

#vnav ul li a {
	margin-right: 10px;
	text-decoration:none;
	font-family: "Arial", Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
}

#vnavRestore ul li a {
	margin-right: 10px;
	text-decoration:none;
	font-family: "Arial", Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
}

#vnav h2 {
	margin-top: 0;
	padding-top: 0;
}

#vnavRestore h2 {
	margin-top: 0;
	padding-top: 0;
}


/*************** YEAR MENUS:  at top of Press Releases, Annual Report, etc ******/

#yearMenu {
	position: relative;
	text-align:center;
	margin-left: 120px;
	width: 330px;
	padding: 1px 0;
}

#yearMenu ul {
	text-align: center;
}

#yearMenu ul li {
	display: inline;
	font-size: 110%;
	padding-right: 10px;
	list-style: none;
}

/************   TEXT FORMATTING  *********************************/

.bolder {  /* substitute for bold; bold-strong attribute not showing up in IE in default font color */
	font-weight: bolder;
	color:#000000;
}

.boldest {  /* 1px larger than bolder; bold-strong attribute not showing up in IE in default font color */
	font-size: 13px;
	font-weight: bolder;
	color:#000000;
}

.bolderQA {  /* bigger bold with tighter line height and left margin; used in Q&As, bolded links,  and elsewhere */
	font-size: 13px;
	font-weight: bolder;
	color:#333333;
	line-height: 110%;
	margin: 6px 15px 6px 28px;
}

.centered {
	text-align: center;
}


/************ FLOATS, CLEARS, POSITIONERS, VISIBILITY ************************************/


.centerToppad {  /*    padding on top of images in home page right rail when text butts up too close   */
	text-align: center;
	margin: 20px 4px 0 0;
}

.clearFloatBoth {    /* assures element does not overlap any other on the pages  */
	clear: both;
}

.blogToppad {  /*    padding on top of blog logo to make it parallel with the image in left column 2/17/09   */
	margin: 285px 0 0 0;
	border: 0;
	float:left;
	text-decoration: none;
}

.floatRight { /* float element on right side of current division    */
	position:relative;
	float: right;
	margin: 0 0 0 0;
}

.floatLeft { /* float element on left side of current division    */
	position:relative;
	float: left;
	margin: 0 0 0 0;
}

.flashShow {   /*  default postitioning and indentation for Flash "slide show" (see ReStore Virtual Showroom  */
  float: left;
  margin: 0 0 0 20px;
  display: inline;
  position: relative;
}

.hide {         /* override's elements default display and hides it; used in titles so visible to search engines but not viewer and elsewhere    */
	display: none;
}
 
.indent250 {      /* indents elements 250 pixels to the right in forms so they fall under a signature block, "Name of Agency," "print name," etc */
	margin-left: 250px; 
}

.indentImage {    /* indents image 30 px on the left, overriding img defaults for that div or element   */ 
	padding: 0 0 0 30px;
}

.toppadOBA {       /* top pads OBA logo in right rail on Donate/Sponsors page to line it up with content col's photostrip   */ 
	position:relative;
	float: left;
	padding: 140px 0 0 0;  

}

.neighborLogo {   /* floats the Neighbor to Neighbor logo at TOP right of content pane on 4 neighbors pages*/
	position:relative;
	float: right;
	margin: -50px 0 0 0;
}

.vcenter {
  display: table-cell;
  vertical-align: middle;
}

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}