body
{	background: #000 url(../../images/background.gif) repeat-y center top;
	margin: 0;
	padding: 0;
}

a:link
{	background: transparent;
	color: #db3632;
}

a:visited
{ 	background: transparent;
	color: #a82927;
}

a:hover
{	background: #db3632;
	color: #fff;
	text-decoration: none;
}


h1
{	font: bold 28px Arial, Helvetica, sans-serif;
	_padding:10px;
}

h2
{	font: bold 22px Arial, Helvetica, sans-serif;
}

h3, h4, h5, h6
{	font: bold 16px Arial, Helvetica, sans-serif;
	line-height: 28px;
}

hr
{
	background: #000;
	color: #000;
	height: 1px;
	padding: 0;
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 0;
}

img
{	border: none;
	margin: 0;
	padding: 0;
}









#global
{	height: auto;
	margin: 0 auto;
	padding: 0;
	width: 1000px;
}









/*	HEADER 
----------------------------------------*/
#header
{	clear: both;
	margin: 0 auto;
	padding: 0;
	width: 1000px;
}

#header_art
{
	display: block;
	height: 120px;
	background: #fff url(../../images/header_art.jpg) no-repeat;
	width: 1000px;
}

#header_art_print
{	display: none;
}

#header_nav
{	border: none;
	display: block;
	height: 30px;
	line-height: 30px;
	margin: 0;
	padding: 0;
	position: relative;
	width: 1000px;
}

#header_nav ul
{	border: none;
	float: right; 
	list-style-type: none;
	margin: 0;
	padding: 0;	
}

#header_nav li
{	border: none;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	position: relative;
	text-align: center;
}

/* style the top level */
#header_nav a,
#header_nav a:visited
{	border: none;
	display: block;
	font: normal 18px Arial, Helvetica, sans-serif;
	height: 30px;
	line-height:30px;
	margin: 0;
	padding: 0;
	width: 129px;
	text-align: center;
	text-decoration: none;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#header_nav ul ul
{	border: none;
	height: 0;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	visibility: hidden;
	width: 129px;
}

/* style the second level links */
#header_nav ul ul a,
#header_nav ul ul a:visited
{	border: none;
	font: normal 15px Arial, Helvetica, sans-serif;
	height: auto;
	line-height: 25px;
	margin: 0;
	padding: 0;
}









/*	LEFT
----------------------------------------*/
#left
{	border-right: 1px solid #000;
	float: left;
	padding: 0 1px 0 0!important;
	padding: 0 1px 0 1px;
	width: 199px;
}

#left #news
{	border-bottom: 1px solid #000;
	margin-bottom: 25px;
	width: 199px;
}

#left h2
{	background: #000;
	border: none;
	color: #fff;
	display: block;
	font: bold 14px/20px Arial, Helvetica, sans-serif;
	height: 20px;
	list-style: none;
	margin: 0;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 189px;
}

#left ul
{	border-top: 1px solid;
	display: block;
	list-style: none;
	margin: 0 0 25px 0;
	padding: 0;
	width: 199px;
}

#left .photo
{	background: url(../../images/photo_building.gif) right center no-repeat;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-top: 1px solid #000;
	clear: both;
	display: block;
	height: 170px;
	margin: 0;
	padding: 0;
	width: 198px;
}








/*	MENU (LEFT)
----------------------------------------*/
#left #menu
{	display: block;
	float: left;
	margin: 0 0 25px 0;
	padding: 0;
	width: 199px;
}

/* remove all the bullets, borders and padding from the default list styling */
#left #menu ul
{	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 198px;
}


/* hack for IE5.5 */
* html #left #menu ul
{	margin-left: -16px;
	ma\rgin-left: 0;
}

/* position relative so that you can position the sub levels */
#left #menu li
{	position: relative;
}

/* get rid of the table */
#left #menu table
{	border-collapse: collapse;
	left: 0;
	position: absolute;
	top: 0;
	z-index: 100;
}

/* style the links */
#left #menu a, 
#left #menu a:visited
{	border: 1px solid #000;
	border-width: 0 1px 1px 0;
	display: block;
	height: 20px;
	line-height: 20px;
	padding: 5px;
	text-decoration: none;
	width: 198px;
}


/* hack for IE5.5 */
* html #left #menu a, * #left html #menu a:visited
{	width: 198px;
	w\idth: 197px;
}

/* style the link hover */
* html #left #menu a:hover
{	background: #000;
	color: #fff;
}

#left #menu :hover > a
{	background: #000;
	color: #fff; 
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#menu ul ul
{	left: 198px;
	position: absolute;
	top: 0; 
	visibility: hidden;
}

/* make the second level visible when hover on first level list OR link */
#menu ul li:hover ul,
#menu ul a:hover ul
{	visibility: visible;
}

/* keep the third level hidden when you hover on first level list OR link */
#menu ul :hover ul ul
{	visibility: hidden;
}

/* keep the fourth level hidden when you hover on second level list OR link */
#menu ul :hover ul :hover ul ul
{	visibility: hidden;
}

/* make the third level visible when you hover over second level list OR link */
#menu ul :hover ul :hover ul
{ 	visibility: visible;
}

/* make the fourth level visible when you hover over third level list OR link */
#menu ul :hover ul :hover ul :hover ul
{ 	visibility: visible;
}







/*	CONTENT
----------------------------------------*/
#content
{	background: #fff;
	float:left;
	height: 100% !important;
	height: 550px;
	margin: 0;
	min-height: 550px;
	padding: 0px 20px 20px 20px;
	width: 558px!important;
	width: 557px;
}

#content h1
{	border-bottom: 1px solid #000;
	display: block;
	font-weight: bold;
	line-height: 28px;
	padding-bottom: 5px;
	text-align: center;
	text-transform: uppercase;
}

#content p,
#content ul,
#content ol,
#content li,
#content table
{	color: #000;
	font: normal 14px/20px Arial, Arial, Helvetica, sans-serif;
	text-align: justify;
}

#content li
{	padding-bottom: 10px;
}









/*	RIGHT
----------------------------------------*/
#right
{	border-left: 1px solid #000;
	float: left;
	margin: 0;
	padding: 0 0 0 1px!important;
	padding: 0;
	width: 199px;
}

#right h2
{	background: #000;
	border: none;
	color: #fff;
	display: block;
	font: bold 14px/20px Arial, Helvetica, sans-serif;
	height: 20px;
	list-style: none;
	margin: 0;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 189px;
}

#right #mission
{	background: url(../../images/ymca_mission.gif) center center no-repeat;
	display: block;
	height: 199px;
	margin: 0;
	padding: 0;
	width: 199px;
}

#right #colors ul
{	display: block;
	list-style: none;
	margin: 0 0 25px 0;
	padding: 0;
	width: 199px;
}

#right #colors ul li a,
#right #colors ul li a:visited
{	background: #fff;
	border-bottom: 1px solid #000;
	display: block;
	font: bold 25px/40px Arial, Helvetica, sans-serif;
	height: 40px;
	list-style: none;
	margin: 0;
	padding: 0 0 0 15px;
	text-decoration: none;
	text-transform: uppercase;
	width: 184px;
}

#right #colors ul li a.blue,
#right #colors ul li a.blue:visited
{	background: url(../../images/right_buttons_blue_off.gif) no-repeat;
	color: #fff;
}

#right #colors ul li a.blue:hover
{	background: #000 url(../../images/right_buttons_blue_on.gif) no-repeat;
	color: #000;
}

#right #colors ul li a.yellow,
#right #colors ul li a.yellow:visited
{	background: url(../../images/right_buttons_yellow_off.gif) no-repeat;
	color: #fff;
}

#right #colors ul li a.yellow:hover
{	background: #000 url(../../images/right_buttons_yellow_on.gif) no-repeat;
	color: #000;
}

#right #colors ul li a.green,
#right #colors ul li a.green:visited
{	background: url(../../images/right_buttons_green_off.gif) no-repeat;
	color: #fff;
}

#right #colors ul li a.green:hover
{	background: #000 url(../../images/right_buttons_green_on.gif) no-repeat;
	color: #000;
}

#right #colors ul li a.red,
#right #colors ul li a.red:visited
{	background: url(../../images/right_buttons_red_off.gif) no-repeat;
	color: #fff;
}

#right #colors ul li a.red:hover
{	background: #000 url(../../images/right_buttons_red_on.gif) no-repeat;
	color: #000;
}

#right #hours
{	border-bottom: 1px solid #000;
	color: #000;
	font: normal 14px/20px Arial, Helvetica, sans-serif;
}









/*	FOOTER
----------------------------------------*/
#footer
{	border-top: 1px solid #000;
	clear: both;
	margin: 0px auto;
	padding: 20px 0 20px 0;
	text-transform: uppercase;
	width: 600px;
}

#footer p
{	color: #000;
	font: normal 12px Arial, Helvetica, sans-serif;
	text-align: center;
}

#footer a
{	border: none;
}
	








/*	STYLE: RED 
----------------------------------------*/
body#red #header_nav
{	background: url(../../images/header_bottom_red.jpg) no-repeat;
}

body#red #header_nav a,
body#red #header_nav a:visited
{	color: #fff;
}

body#red #header_nav a:hover
{	background: #000;
	color: #fff;
}

body#red #header_nav ul ul a,
body#red #header_nav ul ul a:visited
{	background: #db3632;
	color: #fff;
}

body#red #header_nav a:hover,
body#red #header_nav ul ul a:hover
{	background: #000;
	color: #fff;
}

body#red #left ul li a,
body#red #left ul li a:visited
{	background: #db3632;
	border-bottom: 1px solid #000;
	color: #fff;
	display: block;
	font: normal 14px/20px Arial, Helvetica, sans-serif;
	height: 20px;
	list-style: none;
	margin: 0;
	padding: 5px;
	text-decoration: none;
	width: 189px;
}

body#red #left ul li a:hover
{	background: #000 url(../../images/button_left_arrow.gif) no-repeat 174px 5px;
	color: #fff;
}

body#red #content h1
{	color: #db3632;
}









/*	STYLE: BLUE
----------------------------------------*/
body#blue #header_nav
{	background: url(../../images/header_bottom_blue.jpg) no-repeat;
}

body#blue #header_nav a,
body#blue #header_nav a:visited
{	color: #fff;
}

body#blue #header_nav a:hover
{	background: #000;
	color: #fff;
}

body#blue #header_nav ul ul a,
body#blue #header_nav ul ul a:visited
{	background: #1879e5;
	color: #fff;
}

body#blue #header_nav a:hover,
body#blue #header_nav ul ul a:hover
{	background: #000;
	color: #fff;
}

body#blue #left ul li a,
body#blue #left ul li a:visited
{	background: #1879e5;
	border-bottom: 1px solid #000;
	color: #fff;
	display: block;
	font: normal 14px/20px Arial, Helvetica, sans-serif;
	height: 20px;
	list-style: none;
	margin: 0;
	padding: 5px;
	text-decoration: none;
	width: 189px;
}

body#blue #left ul li a:hover
{	background: #000 url(../../images/button_left_arrow.gif) no-repeat 174px 5px;
	color: #fff;
}

body#blue #content h1
{	color: #1879e5;
}









/*	STYLE: YELLOW
----------------------------------------*/
body#yellow #header_nav
{	background: url(../../images/header_bottom_yellow.jpg) no-repeat;
	color: #000;
}

body#yellow #header_nav a,
body#yellow #header_nav a:visited
{	color: #000;
}

body#yellow #header_nav a:hover
{	background: #000;
	color: #fff;
}

body#yellow #header_nav ul ul a,
body#yellow #header_nav ul ul a:visited
{	background: #ffba00;
	color: #000;
}

body#yellow #header_nav a:hover,
body#yellow #header_nav ul ul a:hover
{	background: #000;
	color: #fff;
}

body#yellow #left ul li a,
body#yellow #left ul li a:visited
{	background: #ffba00;
	border-bottom: 1px solid #000;
	color: #000;
	display: block;
	font: normal 14px/20px Arial, Helvetica, sans-serif;
	height: 20px;
	list-style: none;
	margin: 0;
	padding: 5px;
	text-decoration: none;
	width: 189px;
}

body#yellow #left ul li a:hover
{	background: #000 url(../../images/button_left_arrow.gif) no-repeat 174px 5px;
	color: #fff;
}

body#yellow #content h1
{	color: #ffba00;
}









/*	STYLE: GREEN
----------------------------------------*/
body#green #header_nav
{	background: url(../../images/header_bottom_green.jpg) no-repeat;
	color: #000;
}

body#green #header_nav a,
body#green #header_nav a:visited
{	color: #000;
}

body#green #header_nav a:hover
{	background: #000;
	color: #fff;
}

body#green #header_nav ul ul a,
body#green #header_nav ul ul a:visited
{	background: #1ed115;
	color: #000;
}

body#green #header_nav a:hover,
body#green #header_nav ul ul a:hover
{	background: #000;
	color: #fff;
}

body#green #left ul li a,
body#green #left ul li a:visited
{	background: #1ed115;
	border-bottom: 1px solid #000;
	color: #000;
	display: block;
	font: normal 14px/20px Arial, Helvetica, sans-serif;
	height: 20px;
	list-style: none;
	margin: 0;
	padding: 5px;
	text-decoration: none;
	width: 189px;
}

body#green #left ul li a:hover
{	background: #000 url(../../images/button_left_arrow.gif) no-repeat 174px 5px;
	color: #fff;
}

body#green #content h1
{	color: #1ed115;
}
