/*
	--------------------------------------------------
	STRUCTURE STYLES
	--------------------------------------------------
	Client:	
	Author:	
	Date:	Month, Year
		
*/

/* structure.css are the styles for the DIVs in a website and should not contain
any typographic or content-related styles for a site. The styles within are strictly
used to create the layout/structure of the website and, as such, this style sheet 
will (almost) never need to be altered by the client or back-end programmers. */

/* ----- comment styles well for better reference later! ----- */
/* ----- try to lay this out in the following sections and from top to bottom on pages ----- */


/* ===================================================================================== STYLES FOR ALL PAGES */

/* ===== Main Wrapper For Site ===== */

#uber {
	position: relative;
	margin: auto auto;
	padding: 0;
	width: 1006px;
}


/* ===== Header ===== */

#header 
{
	margin: 0px 0px 0px 0px;
	padding: 0 0 0 15px;
	width: 976px;
	height:104px;
	margin:0 auto;
	background: #FFF;
	position:relative;
	z-index:1001;
}
	

/* ===== Search ===== */

#search {
	float: right;
	margin: 10px 0 0 0;
	padding: 0 16px 0 0;
	width: 178px;
	height: 16px;
	background: url(/images/structure/search-background.gif) no-repeat;
}

	#search input {
		float:left;
	}
	
	#search .inputbox {
		position: relative;
		width: 158px;
		height: 15px;
		top: 2px;
		left: 3px;
		border: none;
		background: transparent;
		font-size: 10px;
		color: #545454;
	}
	
	#search .gobutton {
		position: relative;
		width: 14px;
		height: 14px;
		top: 1px;
		left: 6px;
	}		
	

/* ===== Top Navigation ===== */

#topNav 
{
	float: right; 
	padding: 0px 0px 0px 0px;
	margin: 14px 4px 1px 0px;
	text-align: right;
	color: #7d0511;
	font-weight: bold;
	font-size:10px;
	text-transform: uppercase;
	font-family: Helvetica, Arial, sans-serif;
}

/* ===== YMCA Page Title ===== */

#pageTitle{
	width:485px;
	height:13px;
	float:right;
	margin: 0;
	padding: 9px 16px 0 0;
}


/* ===== Logo ===== */

#logo 
{
	position:absolute;
	top:0px;
	left:13px;
	margin: 0px;
	padding: 0px 0px 0px 0px;
	width: 125px;
	height: 104px;
	overflow: hidden;
}


/* ===== Main Navigation ===== */

#mainNav 
{
	position: absolute;
	top:60px;
	/*left:103px;*/
	right: 14px;
	clear: both;
	width: 825px;
	height: 44px;
	z-index: 1000;
}


/* ===== Main Content Container ===== */

#main 
{
	/*z-index:12;*/
	/*position: relative;*/
	/*background:url(../images/structure/greybar-background-repeat.gif) top left repeat-x;
	background-image: url(../images/structure/greybar-background-repeat.gif);*/
	padding: 0;
	margin: 0;
	width: 1006px;
}


/* ===== Footer ===== */

#uber_footer,
#uber_footerwide {
	margin: 0 auto;
	width: 100%;
	background: #FFF url(/images/structure/content-bottom-shadow-repeat.gif) 0 0 repeat-x;
}

#footer 
{
	margin: 0 auto;
	padding: 0px;
	width: 1006px;
	background: #FFF url(/images/structure/content-bottom-shadow.jpg) 0 0 no-repeat;
	height:91px;
	position:relative;
}

#uber_footerwide #footer 
{
	background-image: url(/images/structure/content-bottom-shadow-wide.jpg);
}
	
	#followYMCA{
		width:267px;
		height:25px;
		top:25px;
		left:23px;
		position:absolute;
	}
		#followImage{
			float:left;
			padding-right:8px;
		}
		#facebook{
			float:left;
			font-size:1%;
			height:25px;
			width:25px;		
			overflow:hidden;
			text-indent:-9999px;
			padding-right:5px;
			background:url(/images/structure/facebook-icon.gif) top left no-repeat;	
		}
		#twitter{
			float:left;
			font-size:1%;
			height:25px;
			width:25px;		
			overflow:hidden;
			padding-right:5px;
			text-indent:-9999px;
			background:url(/images/structure/twitter-icon.gif) top left no-repeat;	
		}
		#enews{
			float:left;
			font-size:1%;
			height:25px;
			width:69px;		
			overflow:hidden;
			text-indent:-9999px;
			background:url(/en/images/structure/enews-icon.gif) top left no-repeat;	
		}
	
	#footerNav 
	{
		position:absolute;
		top:18px;
		left:308px;
		margin: 0;
		padding: 0;
		width: 360px;
		color:#646464;
		font-size:11px;
		text-align:left;
		overflow: hidden;
	}
	#unitedWay a{
		height:50px;
		width:117px;		
		position:absolute;
		top:13px;
		right:207px;
	}
		#unitedWay a{
			float:left;
			font-size:1%;
			height:50px;
			width:117px;		
			overflow:hidden;
			text-indent:-9999px;
			background-image:url(/en/images/structure/unitedway.jpg);
		}
			
		
	#allYMCAprograms a{
		height:50px;
		width:174px;		
		position:absolute;
		top:13px;
		right:23px;
	}
		#allYMCAprograms a{
			float:left;
			font-size:1%;
			height:50px;
			width:174px;		
			overflow:hidden;
			text-indent:-9999px;
			background-image:url(/en/images/structure/all-ymca-programs.gif);	
		}
			#allYMCAprograms a:hover{
				background-position:0px -50px;
			}

		#esol {
			top:73px;
			left:375px;
			position:absolute;
			margin: 0px 0px 0px 0px;
			padding: 0 0 20px 0;
			background: transparent url(/en/images/structure/esolutionsgroupLogo.gif) no-repeat;
		}
		
		#esol a {
			display: block;
			width: 175px;
			height: 16px;
			font-size:1%;
			text-indent: -9999px;
		}
		
		#esol img {
			display: block;
			width: 0;
		}





/* ===================================================================================== STYLES HOME PAGE */


#h_uber_int {
	position: relative;
	margin: auto auto;
	width: 100%;
	background: #FFF url(/images/structure/template_uber_h_bg.jpg) 0 104px repeat-x;
	z-index: 1;
}


/* ===== Banner ===== */

#homepageBannerContainer {
	margin: 0px;
	padding: 0px;
	width: 697px;
	height: 262px;
	overflow: hidden;
	position:absolute;
	top:61px;
	left:0px;
}

#homepageBanner {
	/*display: none;*/ /* Display none if using rotating banners */
}


#topContent{
	float: left;
	position:relative;
	margin: 0;
	padding: 0;
	height: 365px;
}

#siteTitle{
	width:950px;
	height:57px;
}

/* Marc's Styles */

#contentLeft #rnavContainer{
	width: 241px;
	padding: 0;
	margin: 0; 
	border: 0px;
	overflow:hidden;
	background: transparent;
	position:absolute;
	top:57px;
	left:712px;
	
}
	
	#contentLeft #rnavContainer .top,
	#contentLeft #rnavContainer .bottom {
		float: left;
		width: 241px;
		height: 10px;
		display: block;
		background: url(/images/structure/r_Nav_top.png);
		overflow: hidden;
	}
	
	#contentLeft #rnavContainer .bottom {
		background: url(/images/structure/r_Nav_base.png);
	}
	
	
	#contentLeft #rNav{
		float: left;
		width: 241px;
		margin: 0;
		padding: 0;
		float: left;
		overflow: hidden;
		background: url(/images/structure/r_Nav_side.png) 0 0 repeat-y;
	}
	
		#contentLeft #rNav ul{
			float: left;
			margin: 0; 
			padding: 0 0 0 8px;
			width: 225px;
			list-style: none;
		}
			
			#contentLeft #rNav li{
				float: left;
				width: 100%;
				font-size: 15px;
				margin: 0;
				padding: 10px 22px 10px 15px;
				padding: 0;
				background: url(/images/structure/h_subNav_bg.jpg);
				line-height: 1;
				color: #fff;
				text-transform: uppercase; 
			}

#quickLinks {
	padding: 10px 0px;
	margin-top: 25px;
	margin: 0;
	height: 120px;
}

#quickLinks1 {
	width: 151px;
	height: 115px;
	float:left;
	margin-right: 16px;
	overflow:hidden;
	border: 1px solid #cbcbcb;
}

#quickLinks2 {
	float:left;
	margin-right: 16px;
	overflow:hidden;
	width:253px;
	border: 1px solid #cbcbcb;
}

#quickLinks3 {
	float:left;
	overflow:hidden;
	width: 255px;
	border: 1px solid #cbcbcb;
}

/*
#quickLinks {
	padding: 10px 0px;
	margin-top: 25px;
	margin: 0;
	height: 120px;
}
#quickLinks1 {
	width: 151px;
	height: 115px;
	float:left;
	margin-right: 16px;
	overflow:hidden;
	border: 1px solid #cbcbcb;
}
	

#quickLinks2 {
	float:left;
	margin-right: 16px;
	overflow:hidden;
}
	#quickLinks2 a{
		float:left;
		width:253px;
		height:116px;
		font-size:1%;
		text-indent: -9999px;
		background:url(/en/images/structure/daycamps_btn.jpg) top left no-repeat;
		border: 1px solid #cbcbcb;
	}
	
#quickLinks3 {
	float:left;
	overflow:hidden;
}
	#quickLinks3 a{
		float:left;
		width:255px;
		height:115px;
		font-size:1%;
		text-indent: -9999px;
		background:url(/en/images/structure/programguide_btn.jpg) top left no-repeat;
		border: 1px solid #cbcbcb;
	}
*/

#quickLinks4 {
	width: 213px;
	height:95px;
	float:right;
	overflow:hidden;
	font-size: 10px;
	font-weight: bold;
	color: #7d0511;
	text-transform: uppercase;
	border: 1px solid #cbcbcb;
	line-height: 2;
	padding: 10px;	
}
	#quickLinks4 .date {
		color: #000;
	}
	
	#quickLinks4 #heading{
		color: #2b2c2c;
		text-transform: none;
		font-family: "Myriad Pro",Helvetica ,Arial, sans-serif;
		font-size: 22px;
		font-weight: normal;
		line-height: normal;
	}
	#quickLinks4 ul{
		margin:0px !important;
		padding:0px !important;
		list-style-type:none;
		padding-top: 5px !important;
	}
		#quickLinks4 li{
			margin:0px !important;
			padding:0px !important;
		}
		#quickLinks4 a{
			text-decoration:none;
		}
		#quickLinks4 a:hover{
			text-decoration:underline;
		}	

/* End Marc's Styles */


/* ===== Content Area ===== */

#contentShadows{ /* shadows on the left and right side of the content area */
	width:100%;
	background:url(/images/structure/content-background-repeat.gif) top center repeat-y;
}
	#contentTopShadow{ /* shadow transition at the top of the conent area */
		width:100%;
		background:url(/images/structure/content-top-background.gif) top center no-repeat;
		padding: 0;
		margin: 0;
	}
	#contentBottomShadow{ /* shadow accross the bottom, above the footer */
		width:100%;
		height:13px;
		background:url(/images/structure/content-bottom-shadow-repeat.gif) bottom left repeat-x;
		padding: 0;
		margin: 0;
	}
	#contentBottomShadowTransition{ /* shadow transition at the bottom of the conent area */
		width:1008px;
		height:13px;
		background: url(/images/structure/content-bottom-background.jpg) 0 bottom no-repeat;
		padding: 0;
		margin: 0 auto;
	}

/* ===== Left Content ===== */


#contentLeftShadow{
	position:relative;
	clear:both;
	margin: 0 auto;
	width: 1000px;
	overflow:hidden;
	background: url(/images/structure/white_shadow.jpg) repeat-y;
}
#contentLeftWrapper{
	overflow:hidden;
	background: url(/images/structure/contentLeftWrapper_bg.jpg) top left no-repeat;
	clear:both;
}

#contentLeft 
{
	position:relative;
	clear:both;
	margin: 0 auto;
	width: 950px;
}

.mainInterior #contentLeft{
	position:relative;
	float:left;
	clear:both;
	margin: 0;
	width: 221px;
	overflow:hidden;
}



/* ===== Right Content ===== */
		
#contentRight {
	float: left;
	width: 180px;
	padding: 10px 0 10px 10px;
}





/* ===================================================================================== STYLES FOR CONTENT PAGES */

/* ===== Main Wrapper For Site ===== */

#uber_int {
	position: relative;
	margin: auto auto;
	width: 100%;
	background: #FFF url(/images/structure/template_uber_int_bg.jpg) 0 0 repeat-x;
	z-index: 1;
}

#contentLeftWrapperInt {
	overflow:hidden;
	background: url(/images/structure/contentLeftWrapperInt_bg.jpg) top left no-repeat;
	clear:both;
}

/* ===== Actions and Breadcrumbs ===== */

#actionsContainer {
	position: relative;
	margin: 0 auto;
	width: 1006px;
	height: 44px;
	background: transparent url(/images/structure/actions_bg.jpg);
}

#actions {
	position: relative;
	float: right;
	padding: 10px 31px 0 0;
	width: 976px;
	text-align: right;
}	

#actions img{
	position: relative;
	top: 2px;
}

#actions form { display: inline; }

#breadcrumbs {
	float: left;
	padding: 5px 5px 5px 5px;
	width: 670px;
	color: #b0b1b1;
	overflow: hidden;
	font-size: 11px;
}


/* ===== Interior Layout ===== */

#main.mainInterior {
	float: left;
	padding: 0 15px;
	width: 976px;
	background: transparent url(/images/structure/template_int_content_bg.jpg) 0 0 repeat-y;
}

#contentIntWrapper{
	float: left;
	/*padding: 10px 0 20px 10px;*/
	margin: 0 0 0 12px;
	overflow: hidden;
	background: url(/images/structure/template_content_background_side.jpg) repeat-y;
}

#contentInt{
	float: left;
	padding: 15px 0 15px 50px;
	width: 672px;
	overflow: hidden;		
}

#services-header, #services-content, #services-links {
	margin-bottom: 30px;
}

#contentBottomShadowTransitionInt{ /* shadow transition at the bottom of the conent area */
		width:1008px;
		height:13px;
		background: url(/images/structure/content-bottom-background-int.jpg) 0 bottom no-repeat;
		padding: 0;
		margin: 0 auto;
	}

/* -- This is a full width interior - used when there is no sub navigation on the page -- */

.mainInteriorwide {
	float: left;
	padding: 0 15px;
	width: 976px;
	background: transparent url(/images/structure/template_int_content_wide_bg.jpg) 0 0 repeat-y;
}

#contentInt.wide {
	float: left;
	width: 876px;
	background-color: transparent; /* This hides mainInterior's bg image */		
}