/* CSS Document */

body
	{
		text-align: center;
		color: #000000;
		background-color: #ffffff;
	}

#container
	{
		width: 780px;
	}

H1
	{
			color: #ef3e42;
			font-size: .95em;
			background: transparent;
	}
	
	
H2
	{
			color: #ef3e42;
			font-size: .95em;
			background: transparent;
	}
/* header divs begin here*/

.banner
	{
			color: #9a5ba4;
			font-size: .95em;
			background: transparent;
	}
	
.imagestrip /*used only on homepage*/
	{
		float: left;
		width: 580px;
		height: 77px;
		margin-top: 2px;
		margin-bottom: 2px;
		margin-left: 0;
		margin-right: 0;
		padding: 0;
		text-align: left;
	} 	
A.imagestrip img {border:none;}
.home
{
	float: left;
	width: 200px;
	height: 12px;
	background-color: #ffc425;
	padding: 10px 0 8px 0;
	font-family: helvetica, arial, sans-serif;
	font-size: .75em;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
}

		.home a.homebutton
					{
						color: #ffffff;
						text-decoration: none;
					}
			
				.home a.homebutton:hover, a.homebutton:active
					{
						color: #705200;
					}
	
#topbarmenu
{
	float: left;
	clear: right;
	width: 561px;
	height: 12px;
	padding: 10px 0 8px 20px;
	background-color: #ef3e42;
	font-family: helvetica, arial, sans-serif;
	font-size: .75em;
	font-weight: bold;
	color: #ffffff;
	text-align: left;
}
	
/* .span is used on all pages except for the home page because it will have a different top menu*/
	#topbarmenu .span
		{
			padding-left: 1.5em;
		}		
		
		
		.span a.topmenubuttons
			{
				color: #ffffff;
				text-decoration: none;
			}
			
		.span a.topmenubuttons:hover, a.topmenubuttons:active
			{
				color: #71090B;
			}

/* header divs end here */

/* top left ymca logo, search and location box css begins here*/
#topleftsection
	{
		float: left;
		width: 200px;
		height: 167px;
		background-color: #ffffff;
	}
	
	#ymcalogo
	{
		margin-top: 5px;
		margin-bottom: 3px;
		margin-right: 0px;
		margin-left: 0px;
		text-align: center;
	}

/* this is to be used on the search feature so that the word and the form can be on the same line. once you put an actual form in, then it can be adjusted. Is it possible to make this form have a rounded edge? If not, no worries.*/	
	#searchform
		{
			float: left;
			width: auto;
			clear: left;
			margin-top: 5px;
			margin-bottom: 0px;
			margin-right: 0px;
			margin-left: 0px;
			font-family: helvetica, arial, sans-serif;
			font-size: 0.75em;
			font-weight: normal;
			color: #000000;			
			text-align: center;
		}

	#location
		{
			float: left;
			clear: both;
			width: 184px;
			height: 50px;
			background-color: #ef3e42;
			padding: 8px; 
			text-align: center;
			margin-top: 2px;
			margin-bottom: 0px;
			margin-right: 0px;
			margin-left: 0px;
			z-index: 100%;
		}
	
		#location .h1
			{
				font-family: helvetica, arial, sans-serif;
				font-size: .75em;
				font-weight: bold;
				color: #ffffff;
				padding: 0;
			}
/* is it possible to make this form and the search form with a rounded edge? */		
		#location .locationform
			{
				margin-top: 5px;
				width: 180px;
				height: auto;
				text-align: center;
			}
			
		#location .locationtext  /* this is for the text inside the form */
			{
				padding-top: 2px;
				width: 180px;
				font-family: helvetica, arial, sans-serif;
				font-size: 0.75em;
				font-weight: normal;
				color: #000000;
				text-align: left;
		}

/* begin css for top of right column: homepage::pics, topmenu, quote. branch pages:: branch info, mission, pic */

#toprightsection
	{
		float: left; 
		background-color: #ffffff;
		text-align: left;
		width: 580px;
	}


	
	/* branch info, mission and topright image are used on branch pages */
	#branchinfo
		{
			float: left;
			width: 425px;
			line-height: 100%;
			text-align: left;
			padding: 2px;
		}
	
		#branchinfo .branchname
			{
				float: left;
				margin-left:5px;
				font-family: helvetica, arial, sans-serif;
				font-weight: bold;
				font-size: 1em;
				color: #ef3e42;
			}
			
		#branchinfo .address
			{
				float: left;
				width: auto;
				margin-left:10px;
				font-family: helvetica, arial, sans-serif;
				font-size: .75em;
				color: #000000;
			}
			
		#branchinfo .hours
			{
				float: left;
				width: auto;
				font-family: helvetica, arial, sans-serif;
				font-size: .75em;
				color: #000000;
			}
			
	#mission 
		{
			float: left;
		}
	
		#mission .ourmission
			{
				font-family: helvetica, arial, sans-serif;
				font-weight: bold;
				font-size: .75em;
				color: #ef3e42;
			}
			
		#mission .missiontext
			{
				font-family: helvetica, arial, sans-serif;
				font-size: .75em;
				color: #000000;
			}
			
	#toprightimage /*used on branch pages, not on homepage */
		{
			float: right;
			clear: right;
			width: 175px;
			height: 167px;
			background-color: #8cc63f;
		}
	
/* begin top menu that only appears on the homepage */
#topmenu	
		{
			float: left;
			height: 20px;
			width: 580px;
			padding-bottom: 2px;
			text-align: center;
		}
		
	#topmenu
		{
			background-color: #ffffff;
			font-family: helvetica, arial, sans-serif;
			font-size: .75em;
			font-weight: bold;
			color: #ffffff;
		}

		/* begin menu */
	
		#topmenu .about
			{
				float: left;
				width: 114px;
				height: auto;
				background-color: #8cc63f;
				padding: 5px 0px 5px 0px;
				border-right-color: #ffffff;
				border-right-width: 2px;
				border-right-style: solid;
				text-align: center;
			}
			
				.about a.aboutbutton
					{
						width: 114px;
						color: #ffffff;
						text-decoration: none;
					}
			
				.about a.aboutbutton:hover, a.aboutbutton:active
					{
						color: #395318;
					}
	
		#topmenu .membership
			{
				float: left;
				width: 114px;
				height: auto;
				background-color: #ef3e42;
				padding: 5px 0px 5px 0px;
				border-right-color: #ffffff;
				border-right-width: 2px;
				border-right-style: solid;
				text-align: center;
			}
				.membership a.memberbutton
					{
						width: 114px;
						color: #ffffff;
						text-decoration: none;
					}
			
				.membership a.memberbutton:hover, a.memberbutton:active
					{
						color: #71090B;
					}
		
		#topmenu .helping
			{
				float: left;	
				width: 114px;
				height: auto;
				background-color: #9a5ba4;
				padding: 5px 0px 5px 0px;
				border-right-color: #ffffff;
				border-right-width: 2px;
				border-right-style: solid;				
				text-align: center;
			}
				.helping a.helpbutton
					{
						width: 115px;
						color: #ffffff;
						text-decoration: none;
					}
			
				.helping a.helpbutton:hover, a.helpbutton:active
					{
						color: #3E2442;
					}
	
		#topmenu .employment
			{
				float: left;
				width: 115px;
				height: auto;
				background-color: #ffc425;
				padding: 5px 0px 5px 0px;
				border-right-color: #ffffff;
				border-right-width: 2px;
				border-right-style: solid;
				text-align: center;
			}
			
				.employment a.employbutton
					{
						width: 114px;
						color: #ffffff;
						text-decoration: none;
					}
			
				.employment a.employbutton:hover, a.employbutton:active
					{
						color: #705200;
					}
	
		#topmenu .contact
			{
				float: left; 
				width: 115px;
				height: auto;
				background-color: #0084a9;
				padding: 5px 0px 5px 0px;
				text-align: center;
			}
				
				.contact a.contactbutton
					{
						width: 114px;
						color: #ffffff;
						text-decoration: none;
					}
			
				.contact a.contactbutton:hover, a.contactbutton:active
					{
						color: #003442;
					}

		/* end top menu */

	#quote
		{
			float: left;
			clear: right;
			width: 400px;
			height: 50px;
			background-color: #ffffff;
			padding-left: 80px;
			padding-right: 80px;
			margin-top: 20px;
			margin-bottom: 0px;
			margin-right: 0px;
			margin-left: 0px;
			font-family: Helvetica, Arial, sans-serif;
			font-size: 1em;
			font-style: italic;
			color: #9a5ba4;
			text-align: center;
		}

/* left column begins here */
#leftcolumn
	{
		float: left;
		clear: left; 
		height: auto; 
		width: 200px;
		padding: 0 0 0 0;
		background-color: #0084a9;
		text-align: left;
		margin: 0px 0 0 0;
		z-index: 101;
	}

/* h1, h2 and homemission to be used on the homepage side menu and on any of the extra schedules etc. on branch pages found under their main menues */
	#leftcolumn .h1
		{
			font-family: helvetica, arial, sans-serif;
			font-size: 1em;
			color: #ffffff;
			margin: 10px 0 0 15px;
		}

	#leftcolumn .h2
		{
			font-family: helvetica, arial, sans-serif;
			font-size: .70em;
			color: #000000;
			background-color: #90c7da;
			margin: 5px;
			padding: 5px 10px 5px 10px;
		}
			
			.h2 a.quicklinksbutton
					{
						color: #000000;
						text-decoration: none;
					}
			
				.h2 a.quicklinksbutton:hover, a.quicklinksbutton:active
					{
						color: #0084a9;
					}
			
		
	#leftcolumn .homemission
		{
			font-family: helvetica, arial, sans-serif;
			font-size: .75em;
			color: #ffffff;
			margin: 10px 0 0 15px;
			line-height: 150%;
		}
 /* branchname and branchmenu are used on branch pages */	
	#leftcolumn .branchname
		{
			font-family: helvetica, arial, sans-serif;
			font-weight: bold;
			font-size: 1em;
			color: #ffffff;
			padding: 10px 0 10px 15px;
			background-color: #8ce63f;
			border-bottom: 2px solid #ffffff;
		}
		
			.branchname a.branchnamebutton
				{
					color: #ffffff;
					text-decoration: none;
				}
				
			.branchname a.branchnamebutton:hover, a.branchnamebutton:active
				{
					color: #395318;
				}
		
	#leftcolumn .branchmenu
		{
			font-family: helvetica, arial, sans-serif;
			font-size: .90em;
			color: #ffffff;
			padding: 10px;
			border-bottom: 2px solid #ffffff;		
		}
			
			.branchmenu a.branchmenubutton
				{
					color: #ffffff;
					text-decoration: none;
				}
				
			.branchmenu a.branchmenubutton:hover, a.branchmenubutton:active
				{
					color: #003442;
				}
/* rightcolumn begins here */
#rightcolumn
	{
	float: left;
	clear: right;
	height: auto;
	width: 540px;
	padding: 0 20px 0 20px;
	text-align: left;		
	}
	
	#rightcolumn
		{
			background-image: url(file:///Macintosh%20HD/Users/rrosal/Library/Application%20Support/Macromedia/Dreamweaver%20MX%202004/Configuration/ServerConnections/Unnamed%20server/web/images/contentbkg.jpg);
			background-repeat: repeat-y;
			margin: 0px;
		}
	
	
	.h1body
		{
			font-family: helvetica, arial, sans-serif;
			font-size: 1em;
			font-weight: bold;
			color: #ef3e42;
			background: transparent;
			padding: 0;
		}
		
	.pbody
		{
			font-family: helvetica, arial, sans-serif;
			font-size: .90em;
			color: #000000;
			line-height: 125%;
		}
		
		/*to be used on branch homepages not the triangle homepage */
	#branchfeatures
		{
			float: left;
			height: auto;
			background: transparent;
			line-height: 110%;
		}
		
		#branchfeatures .header
			{
				font-family: helvetica, arial, sans-serif;
				font-weight: bold;
				color: #ef3e42;
				font-size: 1.1em;
				background: transparent;
				padding: 0;
			}
		
		#branchfeatures .body
			{
				font-family: helvetica, arial, sans-serif;
				font-size: .8em;
				color: #000000;
				line-height: 125%;
			}
	
	.contentimages
		{
			float: left;
			clear: left;
			margin-right: 10px;
			margin-top: 5px;
		}
		
		#farrightcolumn
			{
				float: right;
				height: auto;
				background: transparent;
				border-left: 2px solid #0084a9;
				padding: 0px;
				text-align: left;
			}
			
		#farrightcolumn .heading
			{
				font-family: helvetica, arial, sans-serif;
				font-weight: bold;
				font-size: .95em;
				color: #ef3e42;
				margin-left: 5px;
			}
			
		#farrightcolumn .text
			{
				font-family: helvetica, arial, sans-serif;
				font-size: .8em;
				color: #000000;
				line-height: 110%;
				margin-left: 10px;
			}

/* rightcolumn ends here */

#footer
	{
		height: auto; 
		width: 780px;
		clear: both;
		background-color: #ffffff;
		padding: 0;
		text-align: left;
	}
	
	#footer .tagline
		{
			float: left;
			font-family: helvetica, arial, sans-serif;
			font-size: .75em;
			color: #000000;
			margin: 15px 0 0 10px;
			width: 450px;
			line-height: 125%;
		}
		
	#footer .legal
		{
			float: left;
			font-family: helvetica, arial, sans-serif;
			font-size: .75em;
			color: #000000;
			width: 450px;
			
		}
		
	#footer .legalbranch /*use this on branch pages and not on homepage */
			{
			float: left;
			font-family: helvetica, arial, sans-serif;
			font-size: .65em;
			color: #000000;
			width: auto;
		}

	A.linkitems:Link 
	{
		font-family: helvetica, arial, sans-serif;
		color: #0084a9;
		text-decoration: none;
	}
	A.linkitems:Visited 
	{
		font-family: helvetica, arial, sans-serif;
		color: #ef3e42;
	}
	A.linkitems:hover 
	{
		font-family: helvetica, arial, sans-serif;
		color: #339999;
	}