/*
	
	TABLE OF CONTENTS:
	------------------
	Global Settings
	Global Classes
	Layout
	Header
	- Utility Navigation
	- Sub-Navigation
	- Login
	Home - Main Channels
	Home - Mission
	Content
	- Navigation
	  - 1st Level
	  - 2nd Level
	- Callout
	  - Programs List
	- Page
	Footer

*/

/*
----------------------------------------------------------------------------------------------------
	GLOBAL SETTINGS
----------------------------------------------------------------------------------------------------
*/
/*	Elements we want to clean out entirely: */
html, body, form, fieldset {
	margin: 0;
	padding: 0;
	font: 100%/150% Arial, Helvetica, sans-serif;
	font-size: small;
}

/*	Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
	margin: 0 0 1em 0;
	padding: 0;
}

#page ul, #page ol, #page dl{
	padding-left: .25em;
}
/*	Apply left margin only to the few elements that need it: */
li, dd, blockquote {
	margin-left: 1.2em;
}
#page ul ul, #page ul ul ul, #page ul ul ul ul {
	padding-left: 3em;
}
/*	Form Elements: */
form label {
	cursor: pointer;
	color: #005E99;
}
fieldset {
	border: none;
}
input, select, textarea {
	font: 100% Arial, Helvetica, sans-serif;
	color: #005E99;
}

a{			color: #0066CC;}
a:hover{	color: #DC4000;}

a img{
	border: 0;
}

h1{
	color: #DD7003;
	line-height: 1.2em;
	font-weight: bold;
	margin-top: 1em;
	font-size: 120%;
}
h2{
	font-size: 110%;
	font-weight: bold;
	line-height: 1.2em;
	color: #000000;
	margin-bottom: .25em;
}
h3{
	font-weight: normal;
	color: #FFFFFF;
}
h4{
	font-size: 110%;
	color: #005E99;
}
h5{
	font-size: 100%;
	color: #005E99;
	text-transform: uppercase;
	margin-bottom: .25em;
}
hr{
	display: block;
	height: 1px;
	border: 0;
	margin: 10px 0;
	border-top: 1px solid #E5EFF5;
}
/*
----------------------------------------------------------------------------------------------------
	GLOBAL CLASSES
----------------------------------------------------------------------------------------------------
*/
.left{
	float: left;
	margin: 0 20px 20px 0;
}
.right{
	float: right;
	clear: right;
	margin: 0 0 20px 20px;
}
.right p{
	margin-top: 10px;
}
.clear{
	clear: left;
}
.returnHome{
	color: #5FBD4F;
	float: right;
	display: inline;
	background: url(../images/btn_returnHome.gif) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	height: 44px;
	width: 146px;
	margin: 0 0 0 0;
}
.learnMore{
	color: #5FBD4F;
	background: url(../images/btn_learnMore.gif) no-repeat;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	height: 52px;
	width: 111px;
	margin: 10px 20px;
}
.otherPrograms{
	color: #FCA900;
	background: url(../images/btn_otherPrograms.gif) no-repeat;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	height: 58px;
	width: 147px;
	margin: 10px 20px;
}
.moreEvents{
	color: #FCA900;
	background: url(../images/btn_moreEvents.gif) no-repeat;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	height: 44px;
	width: 146px;
	margin: 0 10px;
}
.mhRegister{
	float: right;
	color: #FCA900;
	background: url(../images/btn_registerForAnAccount.gif) no-repeat;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	height: 80px;
	width: 114px;
}
.learnMore:hover, .moreEvents:hover, .otherPrograms:hover, .returnHome:hover, .mhRegister:hover{
	background-position: 0 100%;
}
#content .readMore{
	color: #0066CC;
	text-transform: uppercase;
	text-decoration: underline;
	font-weight: bold;
	font-size: 85%;
}
#content .readMore:hover{
	color: #DC4000;
}
/*
----------------------------------------------------------------------------------------------------
	LAYOUT
----------------------------------------------------------------------------------------------------
*/
body{
	text-align: center;
	background: #00345F url(../images/bg.gif) 50% 0 repeat-y;
}
#container{
	margin: 0 auto;
	width: 800px;
}
/*
----------------------------------------------------------------------------------------------------
	HEADER
----------------------------------------------------------------------------------------------------
*/
#header{
	float: left;
	display: inline;
	width: 750px;
	background: #FFFFFF url(../images/bg_redesign_top.gif) 100% 0 no-repeat;
	margin-left: 25px;
	text-align: right;
}
#logo_habitat{
	float: left;
	height: 80px;
    margin-top: 10px;
}
#logo_habitat img{
	padding: 20px;
}
#logo_youthPrograms{
	float: right;
	padding: 10px 25px;
}
/*
	Utility Navigation
*/
#utility{
	list-style: none;
	margin: 0;
	padding: 18px 0 0 0;
	margin-right: 10px;
	font-size: 90%;
}
#utility li{
	margin: 0 0 5px 0;
	color: #A6C8E3;
}
#utility li a{
	color: #A6C8E3;
	padding: 5px 0px 5px 0px;
}
#utility li a:hover{
	text-decoration: underline;
}
#utility li a#utility_signIn{
	background: none;
}
#search{
	border: 1px solid #B7D2E3;
	color: #7F7F7F;
	padding: 0px;
	width: 90px;
	vertical-align: middle;
	font-size: 90%;
}
#search:focus{
	color: #000000;
}
#go{
	vertical-align: middle;
	margin-right: 0px;
	font-size: 90%;
}

/*
	Subnav
*/
#subnav{
	text-align: left;
	clear: both;
	line-height: 20px;
	background: #E9EEF4;
	margin: 0 20px 2px 0px;
	float: left;
	display: inline;
	width: 750px;
}
#subnav ul{
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 710px;
	line-height: 22px;
}
#subnav ul li{
	float: left;
	display: inline;
	margin: 0;
	padding: 2px 0;
	font-size: 12px;
}
#subnav ul li a{
	float: left;
	font-weight: bold;
	text-decoration: none;
	color: #0066CC;
	padding: 0 10px;
	border-left: 1px solid #ACCBDE;
}
#subnav ul li a:hover{
	text-decoration: underline;
}
#subnav ul li a.selected{
	color: #DC241F;
}
#subnav ul li.ypHome{
	padding: 6px 0;
	width: 40px;
	margin: 0 0 0 8px;
}

/*	Login Form	*/
#subnav form{
	float: right;
	padding: 5px 10px 5px 0;
	background: url(../images/bg_subnav_top.gif) 100% 0 no-repeat;
}
#subnav label{
	float: left;
	padding-top: 12px;
	margin-right: 7px;
}
#username_label{
	background: url(../images/bg_username.gif) no-repeat;
}
#password_label{
	background: url(../images/bg_password.gif) no-repeat;
}
#subnav input{
	color: #005E99;
	float: left;
}
#subnav #username, #subnav #password{
	width: 80px;
	padding: 2px;
	border: 1px solid #B7D2E3;
}
#subnav #password{
	width: 70px;
}
.btn_login{
	vertical-align: middle;
}

/*
----------------------------------------------------------------------------------------------------
	Main Channels
----------------------------------------------------------------------------------------------------
*/
#channels{
	clear: both;
	text-align: left;
}
#channels ul{
	width: 750px;
	margin: 0 auto;
	padding: 0;
}
#channels li{
	float: left;
	display: inline;
	width: 250px;
	height: 95px;
	margin: 0;
}
#channels li a{
	float: left;
	display: block;
	text-indent: -9999px;
	width: 250px;
	height: 95px;
	overflow: hidden;
}
#channel_trekkers a{	background-image: url(../images/callout_trekkers.gif);	}
#channel_streetTeam a{	background-image: url(../images/callout_streetTeam.gif);}
#channel_tsquared a{	background-image: url(../images/callout_tsquared.gif);	}
/*
----------------------------------------------------------------------------------------------------
	Mission
----------------------------------------------------------------------------------------------------
*/
#mission{
	clear: both;
	width: 750px;
	margin: 0 auto;
	padding: 20px 0;
	text-align: center;
	background: #FFFFFF url(../images/bg_mission.gif) repeat-x;
}
#mission h2{
	margin: 0 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #CCDFEB;
	line-height: 22px;
}
/*
----------------------------------------------------------------------------------------------------
	Content
----------------------------------------------------------------------------------------------------
*/
#pagecontent{

	text-align: left;
	margin: 0 auto;
	width: 750px;
	background: #FFFFFF;
}

#pagecontent .main{
	background: #FFFFFF;
}

/*	Welcome Text	*/
#welcome{
	float: left;
	width: 250px;
}
#welcome p{
	margin: 0 25px 1em 25px;
}
#youthPrograms_torn{
	position: relative;
	left: -1px;
}
/*----------------------------------------
	Navigation
----------------------------------------*/
#navigation{
	float: left;
	display: inline;
	width: 225px;
	margin-bottom: 20px;
	padding-bottom: 10px;
}
/*	Navigation Headers	*/
#navigation h1{
	margin: 0;
	padding: 0;
	display: block;
}
#navigation h1 a{
	text-align: center;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
}
.trekkers #navigation
{
    	background: url(../images/bg_navigation_trekkers.gif) 50% 100% no-repeat;
}
.trekkers #navigation h1 a{
	background: url(../images/logo_trekkers.gif) no-repeat;
	height: 250px;
}
.streetTeam #navigation
{
    	background: url(../images/bg_navigation_streetTeam.gif) 50% 100% no-repeat;
}
.streetTeam #navigation h1 a{
	background: url(../images/logo_streetTeam.gif) no-repeat;
	height: 250px;
}
.tSquared #navigation
{
    	background: url(../images/bg_navigation_tSquared.gif) 50% 100% no-repeat;
}
.tSquared #navigation h1 a{
	background: url(../images/logo_tSquared.gif) no-repeat;
	height: 240px;
}
.programs #navigation
{
    	background: url(../images/bg_navigation_programs.gif) 50% 100% no-repeat;
}
.programs #navigation h1 a{
	background: url(../images/logo_programs.gif) no-repeat;
	height: 240px;
}
/*	First Level Navigation	*/
#navigation ul{
	float: left;
	display: inline;
	width: 165px;
	margin: 10px 19px 20px 31px;
	padding-bottom: 10px;
	line-height: 0px;
	background: #FFFFFF url(../images/bg_navigation_list_bottom.gif) 0 100% no-repeat;
	border-collapse: collapse;
}
#navigation ul li{
	float: left;
	display: inline;
	width: 165px;
	margin: 0;
	list-style-type: none;
}
#navigation ul li a{
	display: block;
	font-size: 100%;
	line-height: 130%;
	padding: 5px 15px 3px 15px;
	color: #0066CC;
	background-color: #FFFFFF;

}
#navigation ul li a:hover{
		text-decoration: none;
}
#navigation ul li.selected{
	border-bottom: 1px solid #E5EFF5;
}
#navigation ul li.selected a, #navigation ul li.selected a:hover{
	background-color: #DC241F;
	color: #FFFFFF;
	border-top: 2px solid #C6201C;
	padding-top: 3px;
}
#navigation ul li.selected a:hover{
	background-color: #E52D1D;
}
#navigation ul li.selected a.first, #navigation ul li.selected a.first:hover{
	border-top: 0;
	padding-top: 5px;
	background-position: 100% 0;
}
/*
	Second Level Navigation
*/
#navigation ul li.selected ul{
	margin: 0;
	padding: 5px 0;
	background: #F2F7FA;
}
#navigation ul li.selected ul li{
	margin: 0 3px;
	width: 149px;
	background: #F2F7FA;
}
#navigation ul li.selected ul li a{
	background: url(../images/icon_arrow_ltblue.gif) 7px 7px no-repeat;
	border: 0;
	color: #005E99;
	padding: 4px 6px 4px 20px;
	font-weight: normal;
	font-size: 85%;
	line-height: 110%;
}
#navigation ul li.selected ul li a:hover{
	background: url(../images/icon_arrow_blue.gif) 7px 7px no-repeat;
	color: #003F66;
	padding: 4px 6px 4px 20px;
	border: 0;
}
/* comment this out to remove the whitebg image on the left nav sub items */
#navigation ul li.selected ul li.selected{
	background: #FFFFFF url(../images/bg_navigation_sub.gif) no-repeat; 
/*	border: none;
	background: none;*/
}
/* */
#navigation ul li.selected ul li.selected a{
	background: url(../images/icon_arrow_blue.gif) 7px 7px no-repeat;
	font-weight: bold;
}

/*----------------------------------------
	Callout Area
----------------------------------------*/
#callout{
	padding-top: 25px;
	margin-left: 250px;
}
#news{
	float: left;
	margin-bottom: 10px;
}
#callout a{
	font-size: 90%;
	color: #0066CC;
}
#programs{
	float: right;
	width: 200px;
	font-weight: bold;
	color: #FFFFFF;
}
#programs h3{
	display: block;
	text-indent: -9999px;
	height: 85px;
	margin: 0;
}
#programs ul{
	line-height: 0px;
	margin: 0;
}
#programs ul li{
	margin: 0;
	list-style-type: none;
}
#programs ul li a{
	text-decoration: none;
	color: #FFFFFF;
	display: block;
	margin-right: 35px;
	line-height: 15px;
	padding: 2px 10px 2px 20px;
	background-position: 7px 5px;
	background-repeat: no-repeat;
}
#programs ul li a:hover{
	text-decoration: underline;
}
/* Programs Boards */
.home #programs h3{		background: url(../images/boards_youthPrograms.gif) no-repeat;}
.trekkers #programs h3{	background: url(../images/boards_trekkers.gif) no-repeat;}
.streetTeam #programs h3{	background: url(../images/boards_streetTeam.gif) no-repeat;}
.tSquared #programs h3{	background: url(../images/boards_tSquared.gif) no-repeat;}

.home #programs li a{
	background-color: #002D62;
	background-image: url(../images/icon_arrow_blue.gif);
}
.trekkers #programs li a{
	background-color: #CC3300;
	background-image: url(../images/icon_arrow_orange.gif);
}
.streetTeam #programs li a{
	background-color: #1F5E99;
	background-image: url(../images/icon_arrow_ltblue.gif);
}
.tSquared #programs li a{
	background-color: #4D8300;
	background-image: url(../images/icon_arrow_green.gif);
}

/*	Documents	*/
#documents{
	float: right;
	width: 200px;
	font-weight: bold;
	color: #FFFFFF;
	list-style: none;
	padding-top: 5px;
}
#documents li{
	float: left;
	display: inline;
	padding-top: 10px;
	margin-right: 40px;
}
#documents img{
	float: left;
	margin-right: 10px;
	padding-bottom: 10px;
}
#documents a{
	display: block;
	color: #FFFFFF;
	line-height: 15px;
	text-decoration: none;
	margin: 0 0 0 0;
	padding: 0;
}
#documents a:hover{
	color: #F5C283;
}
#documents li#newsletters{
	background: url(../images/line_h_purple.gif) 0 100% no-repeat;
}


/*
----------------------------------------------------------------------------------------------------
	Page
----------------------------------------------------------------------------------------------------
*/
#page{
	float: right;
	display: inline;
	width: 475px;
	margin: 0 25px 10px 0;
    line-height: normal;
}
#page p{
	margin-bottom: 10px;
	line-height: 1.2em;

}

#content.wide #page{
    width: 700px;
}

#content.wide h1.sub{
    background: #E45C00 url(../images/bg_header_wide.gif) no-repeat;
}
		
		
#content.main #page h1{
	margin: 0 0 10px 0;
	clear: left;
}
h1.sub{
	color: #FFFFFF;
	font-weight: bold;
	font-size: 130%;
	text-transform: uppercase;
	margin: 0 0 1em 0;
	padding: 1.4em 1em .5em 1em;
	border-bottom: 1px solid #E5EFF5;
	background: #E45C00 url(../images/bg_header_sub.gif) no-repeat;
}
/*	My Habitat Login	*/
#mhLogin{
	float: right;
	clear: right;
	width: 475px;
	background: url(../images/bg_myHabitatLogin.gif) no-repeat;
	margin-bottom: 20px;
	padding: 0;
}
#mhLogin form{
	float: left;
	display: inline;
	margin-left: 105px;
	padding: 0;
	width: 250px;
}
#mhLogin ul{
	float: left;
	display: inline;
	margin: 5px 0 0 0;
	padding: 0;
	list-style: none;
}
#mhLogin ul li{
	margin: 5px 10px 0 0;
	padding: 0;
	height: 1%;
	float: left;
	display: inline;
	white-space: nowrap;
}
#mhLogin label{
	text-transform: uppercase;
	font-size: 85%;
}
#mhLogin ul li a{
	color: #0066CC;
	margin-left: 10px;
	font-size: 80%;	
}
#mhLogin .btn_login{
	margin-top: 5px;
}
#mhUsername, #mhPassword{
	margin: 2px 0 0 0;
	width: 75px;
	padding: 2px;
	border: 1px solid #B7D2E3;
}
#mhUsername:focus, #mhPassword:focus{
	color: #000000;
}
#mhPassword{
	width: 70px;
}
#rememberMe{
	margin: 0;
	padding: 0;
	vertical-align: middle;
}
form label#rememberMe_label{
	text-transform: none;
	margin: 0;
	font-size: 80%;
}

/*	Small Callouts	*/
#page #callouts_small{
	float: right;
	display: inline;
	width: 175px;
	list-style: none;
	margin: 0;
}
#callouts_small li{
	margin: 0 0 20px 0;
	float: left;
	clear: left;
	padding: 0;
	width: 175px;
}
#callouts_small li a{
	display: block;
	background: #FB7600 url(../images/bg_callout_small.gif) 0 70px repeat-x;
	text-decoration: none;
	color: #FFFFFF;
	text-align: center;
}
#callouts_small li a strong{
	display: block;
	padding: 5px 10px;
	text-transform: uppercase;
}
#callouts_small li a:hover strong{
	text-decoration: underline;
}
/*	Upcoming Events	*/
#page #upcomingEvents{
	padding: 0;
	list-style: none;
	width: 175px;
	background: #F2F7FA url(../images/bg_upcomingEvents_bottom.gif) 0 100% no-repeat;
}
#upcomingEvents li{
	padding: 0 0 5px 0;
	float: left;
	display: inline;
	clear: left;
	margin: 10px 10px 0 10px;
	width: 155px;
	background: #FFFFFF url(../images/bg_upcomingEvents_item_bottom.gif) 0 100% no-repeat;
}
#upcomingEvents li.first{
	background: url(../images/bg_upcomingEvents_top.gif) no-repeat;
	text-align: center;
	display: block;
	width: 175px;
	margin: 0;
	padding: 20px 0 0 0;
}
#upcomingEvents li.last{
	margin: 0;
	padding: 10px 0;
	background: none;
}
#upcomingEvents li h4{
	font-weight: normal;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}
#upcomingEvents li p{
	float: left;
	display: inline;
	margin: 0;
	line-height: 16px;
	color: #005E99;
	padding: 5px;
	width: 145px;
	background: url(../images/bg_upcomingEvents_item_top.gif) no-repeat;
}
#upcomingEvents li strong{
	float: left;
	margin: 0 0 0 10px;
	padding-right: 5px;
	text-transform: uppercase;
	color: #DC241F;
	font-size: 85%;
	background: #F2F7FA url(../images/bg_upcomingEvents_item_date.gif) 100% 0 no-repeat;
}
#upcomingEvents li a.readMore{
	float: right;
	display: inline;
	margin: 0 5px 0 0;
}
/*	Program Callouts	*/
#page #programCallouts{
	list-style: none;
	padding: 0;
	margin: 20px 0 0px 0;
}
#programCallouts li{
	margin: 0 0 15px 0;
	padding: 0;
	float: left;
	width: 480px;
	clear: left;
}
#programCallouts li img{
	padding-top: 5px;
	float: left;
}
#programCallouts li p{
	margin: 0 0 0 90px;
}
#programCallouts li h5{
	margin-left: 90px;
}

/* PostCard Message */

#postcardMessage{
background: url(../images/bg_postcardMessage.gif) 0 100% no-repeat;
padding-bottom: 20px;
}

#postcardMessage p{
margin: 0;
padding: 20px 20px 0 20px;
background: url(../images/bg_postcardMessage_top.gif) no-repeat;
}

/*
----------------------------------------------------------------------------------------------------
	Footer
----------------------------------------------------------------------------------------------------
*/
#footer{
	text-align: left;
	clear: both;
	width: 750px;
	margin-top: 20px;
	padding: 20px 0;
	color: #FFFFFF;
	background: #005596;
	font-size: 70%;
}
#footer p{
	line-height: 20px;
	padding: 0 20px;
	margin: 0;
}


/**** contents of former /cd/css/formDotcss *****/

p.message
{
    padding: 7px 25px;
    margin: 5px 0;
    border-top: dashed 1px #bbbbbb;
    border-bottom: dashed 1px #bbbbbb;
    background: #EEF7EC;
    display: block;
}

p.header
{
    font-size: 1em;
    font-weight: bold;
    display: block;
    background: #EEF7EC;
}

table caption
{
    text-align: left;
    padding: 2px 20px;
    margin: 0 0 10px 0;
    border-top: dashed 1px #bbbbbb;
    border-bottom: dashed 1px #bbbbbb;
    background: #EEF7EC;
}

.caption
{
    text-align: left;
    padding: 2px 20px;
    margin: 0 0 10px 0;
    border-top: dashed 1px #bbbbbb;
    border-bottom: dashed 1px #bbbbbb;
    background: #EEF7EC;
}

table.form
{
    width: 99%;
    border-collapse: collapse;
    margin: 5px 0;
    font-size: 1em;
}

table.form td
{
    background-color: #E7EFF4;
    padding: 4px;
}

table.data
{
    width: 99%;
    border-collapse: collapse;
    margin: 5px 0;
}

table.data td
{
    background-color: #E7EFF4;
    padding: 4px;
}

table td.alt
{
    background-color: #fff;
}

.sample td
{
    background-color: #333;   
}
table tr.alt td
{
    background-color: #fff;
}

table tr th
{
    background-color: #005596;
    color: #fff;
    font-weight: bold;
    text-align: left;
    padding: 4px;
}

table td.requiredMessage
{
    color: red;
    text-align: right;
    padding-right: 15px;
}

table td.subhead
{
   font-weight: bold;
}

.note, .labelNote
{
    font-size: .8em;
}

.notice
{
    color: purple;
    font-weight: bold;
    display: block;
    margin: 4px 0;
}

.requiredMark, .requiredText
{
    font-weight: bold;
    color: red;
}

table tr td.label
{
    text-align: right;
    vertical-align: top;
    width: 35%;
}

table tr td label 
{
    text-align: right;
    vertical-align: top;
    width: 100%; 
    display: block;
}
label em
{
    color: red;
    font-weight: bold;
    margin: 0 1px;
}

table tr td.field
{
    text-align: left;
    vertical-align: top;
}

table tr td.button
{
    background-color: #fff;
    text-align: right;
    padding: 10px 20px;
}

.topMessage
{
    
    font-weight: bold;
    color: #ff0000;
    margin: 0 0 10px 0;
    display: block;

}

dl 
{
 margin: 8px 0;
 padding: 0; 
 display: block; 

}

dt 
{
    margin: 0 2% 0 0;
    padding: 0;
    float: left;
    width: 32%;
    font-weight: bold;
    text-align: right;
    vertical-align: middle;
    clear: left;
}

dd
{
    margin: 0;
    padding: 0;
    margin: 0 0 0 35%;
    vertical-align: middle;
}
.formError
{
    display: block;
    float: left;
    clear: both;
    width: 100%;
    margin: 5px 0 0 5px;
}