/*
Developed by Mark Kenneth Borromeo April 24,2008
*/
* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
}
body, html {
background-color: #eee; 
color: #000; 
font-family: Arial, Tahoma, sans-serif;
font-size: 1.2em;
line-height: 1.5em;
text-align:left;
}

body {
font-size: 70%;
min-width: 760px;
}
p {
padding: 7px 0 7px 0;
}
a {
color: #016277;
font-weight:bold;
}
a:hover{
color: #000;
text-decoration: none;
}
h1, h2, h3 {
font-weight: bold;
padding-bottom: 5px;
}
h1 {
font-size: 1.2em;
}
h2 {
font-size: 1.4em;
color: red;
}
h3 {
font-size: 2.0em;
}

input {
	padding:3px;
}
.clear { clear: both; }
#mainContainer {
min-height: 300px;
background: #fff;
border: 0px;
}
* html #mainContainer {
height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
/**************************
HEADER
**************************/
#header {
	clear: both;
	background: #fff url(../images/header_bg.gif) repeat-x;
	padding: 0px;
	margin: 0px;
	height: 145px;
	width: 100%;
	color:#000000;
	position:relative;
}


#header_logo {
	padding: 0px;
	margin: 0px;
	position:absolute;
}

#header_logo img {
	border: 0px;
}

#header_logo a {
	outline:none;
}


#header_links {
	padding: 0px;
	margin: 0px;
	position:absolute;
	top:60px;
	left:435px;
	font-style:normal;
	line-height:2em;	
	width: 540px;
	text-align:right;
}

#header_links a{
	margin-left:20px;
	color: #fff;
}

#header_links a:hover{
	color: #000;
	text-decoration:none;
}

#header_skip_content {
	padding: 0px;
	margin: 0px;
	position:absolute;
	top:15px;
	width: 100px;
	left:850px;
}

#header_powered_by {
	padding: 0px;
	margin: 0px;
	position:absolute;
	top:95px;
	width:260px;
	left:735px;
}

a.skip_content {
	  display: block;
	  width: 129px;
	  height: 31px;
	  background-position: 0 0;
	  background-repeat:no-repeat;
	  text-decoration: none;
	  background-image: url("../images/skip_to_content.gif");	  
	  outline:none;
}

a.skip_content b {
	display:none;
}

a.skip_content:hover {  background-position: -129px 0;  }



a.powered_by {
	  display: block;
	  width: 259px;
	  height: 29px;
	  background-position: 0 0;
	  background-repeat:no-repeat;
	  text-decoration: none;
	  background-image: url("../images/powered_by_seniornavigator.gif");	  
	  outline:none;
}

a.powered_by b {
	display:none;
}

a.powered_by:hover {  background-position: -259px 0;  }



a.quick_search {
	  display: block;
	  width: 194px;
	  height: 42px;
	  background-position: 0 0;
	  background-repeat:no-repeat;
	  text-decoration: none;
	  background-image: url("../images/main_quick_search.jpg");	  
	  outline:none;
}

a.quick_search b {
	display:none;
}

a.quick_search:hover {  background-position: -194px 0;  }

a.customized_search {
	  display: block;
	  width: 194px;
	  height: 42px;
	  background-position: 0 0;
	  background-repeat:no-repeat;
	  text-decoration: none;
	  background-image: url("../images/main_customizedsearch.jpg");	  
	  outline:none;
}

a.customized_search b {
	display:none;
}

a.customized_search:hover {  background-position: -194px 0;  }

a.needs_assessment {
	  display: block;
	  width: 194px;
	  height: 42px;
	  background-position: 0 0;
	  background-repeat:no-repeat;
	  text-decoration: none;
	  background-image: url("../images/main_needs_assessment.jpg");	  
	  outline:none;
}

a.needs_assessment b {
	display:none;
}

a.needs_assessment:hover {  background-position: -194px 0;  }

.search_box {
		width:194px;
		margin:0px;
		padding:0px;
		float:left;
		margin-left:15px;
		margin-bottom:10px;
}

.search_box_body {
		background: #fff url(../images/main_search_body.jpg) repeat-y;	  
		padding: 15px 10px 10px 10px;
}

.search_box_body i {
	font-weight:bold;
	color:#016277;
}


.search_box_bottom {
	  background-image: url("../images/main_search_bottom.jpg");	  
}

.quicksearch_head {
	margin-top:10px;
	  background-image: url("../images/quicksearch.jpg");	
	  height:42px;  
}

.quicksearch_body {
		background: #016277;
		border-left:1px #fff solid;
		border-right:1px #fff solid;			  
		padding: 0px;
		margin: 0px;
		color: #fff;
		width:192px;
}

.quicksearch_body input {
	border:1px #fff solid!important;
	width:170px;
}

a.searchnow {
	  display: block;
	  width: 87px;
	  height: 25px;
	  background-position: 0 0;
	  background-repeat:no-repeat;
	  text-decoration: none;
	  background-image: url("../images/search_now_btn.jpg");	  
	  outline:none;
}

a.searchnow b {
	display:none;
}

a.searchnow:hover {  background-position: -87px 0;  }

a.searchnow2 {
	  display: block;
	  width: 104.5px;
	  height: 30px;
	  background-position: 0 0;
	  background-repeat:no-repeat;
	  text-decoration: none;
	  background-image: url("../images/search_now_btn2.jpg");	  
	  outline:none;
}

a.searchnow2 b {
	display:none;
}

a.searchnow2:hover {  background-position: -104.5px 0;  }






.quicksearch_bottom {
	  background: #fff url("../images/quicksearch_bottom.jpg") no-repeat;	
	  height:42px;  
}




#textswitch {
	color: #1ca7e0;
	font-size: 1em;
	line-height: 1.6em;
	font-weight: bold;
	height:70px;
	position: absolute;
	left:377px;
	top:5px;
	width:350px;
	text-align:right;
	padding-top:5px;
}
#textswitch a {
	padding-left:8px;
	padding-right:8px;
	padding-top:3px;
	padding-bottom:3px;
	text-decoration: underline;
}
#textswitch a:hover {
	color: #000;
	padding-left:7px;
	padding-right:7px;
	padding-top:3px;
	padding-bottom:3px;
	text-decoration: none;
	background-color:#fff8ba;
	border:1px #d3ccc6 solid;
}
#textswitch .medium {
 font-size: 1em;
}
#textswitch .larger {
	font-size: 1.1em;
}
#textswitch .largest {
	font-size: 1.2em;
}

#menu {
	position: absolute;
	top:40px;
	left:36px;
	padding: 0px;
	height:auto;
	width: 650px;
}

#navcontainer ul li {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: block;
	float: left;
	background-color:#FFFFFF;
	text-align: center;
}

#navcontainer b {
	display:none;
}

#navcontainer li#active a { background-position: -105px 0; }
#navcontainer li a:hover {  background-position: -105px 0;  }

#navcontainer a{
	  display: block;
	  width: 105px;
	  height: 78px;
	  background-position: 0 0;
	  background-repeat:no-repeat;
	  text-decoration: none;
	  outline:none;
}

#navcontainer a.living_healthy {
		background-image: url("../images/menu_medium_01.jpg")
}

#navcontainer a.making_a_home {
		background-image: url("../images/menu_medium_02.jpg")
}

#navcontainer a.connecting_others {
		background-image: url("../images/menu_medium_03.jpg")
}

#navcontainer a.planning_future {
		background-image: url("../images/menu_medium_04.jpg")
}

#navcontainer a.knowing_rights {
		background-image: url("../images/menu_medium_05.jpg")
}

#navcontainer a.getting_about {
		background-image: url("../images/menu_medium_06.jpg")
}


#innerfooter {
	height:70px;
	position: absolute;
	bottom: 0;
	left:150px;
	line-height: 1.2em;	
}

#innerfooter a{
	color:#096077;
	font-weight:normal;
	font-size:.8em;
	

}

#innerfooter a:hover{
	color:#000;
	text-decoration: none;
}


#innerfooter div {
	float: left;
	padding: 3px 0 0 25px;
	margin: 0 0 10px;
}

/**************************
CONTENT AND COLUMNS
**************************/
.outer {
padding-left: 165px;
padding-right: 130px;
background: url(../images/outer_bg.jpg) repeat-y;
border:0px;
}
/*** This is the visible right col background. Because of IE (both 6 and 7) the right col background and inner border is in fact an repating image where 1px of the left part of the image is black, and is simulating a border.
***/
* html .outer {
/*** No need for hacking IE on this layout ***/
}
.inner {
width: 100%;
border-width: 0 0 0 1px;
margin-left: -2px; /*** This fixes a small overlap problem. Without this the border on the left side of the right column won't be visible ***/
position: relative;
}
* html .inner {
/*** No need for hacking IE on this layout ***/
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows 
my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully)
***/
.float-wrap {
float: left;
width: 100%;
margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
#content {
float: right;
background: #fff;
margin-right: -204px; /*** Same length as .outer padding-left but with negative value ***/
_margin-right: -260px; /*** Same length as .outer padding-left but with negative value ***/
width: 100%;
height: 100%;
padding-top:20px;
}
* html #content {
position: relative; /*** IE needs this  ***/
}
#contentWrap{
padding-top:0px;
padding-right:5px;
padding-bottom:120px;
padding-left:64px;
width: 700px;
font-size:1.2em;
}
#contentWrap ol, #contentWrap ul {
margin: 3px 0 5px 35px;
}
#contentWrap li {
padding-bottom: 2px;
}
#contentWrap h1 {
	color:#016277;
	padding-top: 6px;
}

#contentWrap .dn {
	font-weight:bold;
	color: #1ca7e0;
}

#contentWrap input {
	padding:3px;
	border:1px #016277 solid;	
}


#homepage_welcome {
	color: #000;
	text-align:center;
	font: bold 1.5em Arial, Sans-Serif;
	padding-bottom:20px;
}
/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#left {
float: left;
width: 200px;
height: 100%;
padding:0px;
}

#quick_search {
background-color: #fff8ba;
padding:10px;
padding-top: 20px;
}

#quick_search p{
	 padding-left:20px;
	 font-weight:bold;
}

#quick_search input{
	 padding-left:10px;
}

#quick_search a{
	 padding-left:70px;
	 font-size:1.1em;
	 outline:none;
}

 
#quick_links {
	 padding:20px 0px 40px 20px;
} 

#quick_links a{
	color: #fff;
} 


* html #left {
position: relative; /*** IE needs this  ***/
height: 250px;
}
#left ul {
list-style: none;
padding-bottom: 4px;
}
#left li {
padding-bottom: 2px;
}

 #leftnav {
	float:left;
	margin: 0px;
	padding: 0px 0px 0px 1px;
	width: 192px;
		}



#leftnavbox_community {
	float:left;
	left: 5px;
	text-align: left;
	margin: 0px;
	width: 172px;
	background: url(../images/community.gif) no-repeat left center;
}

#leftnavbox_community a {
	display:block;
	padding:5px 10px 5px 40px;
}


#leftnavbox_emergency {
	float:left;
	left: 5px;
	text-align: left;
	margin: 0px;
	width: 172px;
	background: url(../images/emergency.gif) no-repeat left center;
}

#leftnavbox_emergency a{
	display:block;
	padding:5px 10px 5px 40px;
}

#leftnavbox_finance {
	float:left;
	left: 5px;
	text-align: left;
	padding: 11px 0px;
	margin: 0px;
	width: 172px;
	text-indent: 42px;
	background: url(../images/financial.gif) no-repeat left center;
}

#leftnavbox_housing {
	float:left;
	left: 5px;
	text-align: left;
	padding: 11px 0px;
	margin: 0px;
	width: 172px;
	text-indent: 42px;
	background: url(../images/housing.gif) no-repeat left center;
}

#leftnavbox_rights {
	float:left;
	left: 5px;
	text-align: left;
	margin: 0px;
	width: 172px;
	background: url(../images/rights.gif) no-repeat left center;
}


#leftnavbox_rights a{
	display:block;
	padding:5px 10px 5px 40px;
}



#leftnavbox_transportation {
	float:left;
	left: 5px;
	text-align: left;
	padding: 11px 0px;
	margin: 0px;
	width: 172px;
	text-indent: 42px;
	background: url(../images/transportation.gif) no-repeat left center;
}

#leftnavbox_links {
	float:left;
	left: 5px;
	text-align: left;
	padding: 11px 0px;
	margin: 0px;
	width: 172px;
	text-indent: 42px;
	background: url(../images/links.gif) no-repeat left center;
	
}
#leftnavbox_thissite {
	float:left;
	left: 5px;
	text-align: left;
	padding: 11px 0px;
	margin: 0px;
	width: 172px;
	text-indent: 43px;
	background: url(../images/thiswebsite.gif) no-repeat left center;
}

#leftnavbox_about {
	float:left;
	left: 5px;
	text-align: left;
	padding: 11px 0px;
	margin: 0px;
	width: 172px;
	background: url(../images/about.gif) no-repeat left center;
}

#leftnavbox_about a{
	display:block;
	padding:5px 10px 5px 40px;
}

#leftnavbox_contact {
	float:left;
	left: 5px;
	text-align: left;
	padding: 11px 0px;
	margin: 0px;
	width: 172px;
	text-indent: 42px;
	background: url(../images/contact.gif) no-repeat left center;
}

#leftnavbox_home {
	float:left;
	left: 5px;
	text-align: left;
	padding: 11px 0px;
	margin: 0px;
	width: 172px;
	text-indent: 42px;
	background: url(../images/home.gif) no-repeat left center;
}

#leftnavbox_image {
	float:left;
	left: 5px;
	text-align: left;
	padding: 11px 0px;
	margin: 0px;
	text-indent: 42px;
	width: 172px;
}

#leftnavbox_image a{
	outline: none;
}


.leftnavlink {
	color:#003366;
	text-decoration: none;
	font: bold 15px/20px Verdana, Arial, Helvetica, sans-serif;
}

.leftnavlink:hover {
	color:#828282;
	font: bold 15px/20px Verdana, Arial, Helvetica, sans-serif;
}

.leftnavlink:visited {
	font: bold 15px/20px Verdana, Arial, Helvetica, sans-serif;
}




/*************************
RIGHT COLUMN
**************************/
#right {
float: right; 
width: 120px;
position: relative; /*** IE needs this  ***/
padding: 5px;
min-height: 340px;
margin-right: -130px; /** This negative margin-right value is the width of the right column + the padding, in this example 130px. ***/
}
* html #right {
height: 250px;
}
#right ul {
list-style: none;
padding-bottom: 4px;
}
#right li {
padding-bottom: 2px;
}
/**************************
FOOTER
**************************/
#footer {
text-align: center;
background-color: white;
}

/****************************
Listen
***************************/
.vn-listen {
	left:-81px;
	position:absolute;
	top:1px;
}

.objBorder {
	border: 1px solid #069;
	padding: 2px;
}