/*
	--------------------------------------------------
	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;
	width: 950px;
	background: #FFF;
}


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

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

#campsHeaderShadow{
	width:100%;
	height:93px;
	background:url(../images/structure/headerBarShadow.gif) top center no-repeat;	
}
#campsHeader{
	width:976px;
	margin:0 auto;
	position:relative;
	z-index:11;
}
	#campsLogo{
		top:0px;
		left:28px;
		width:173px;
		height:128px;
		z-index:10;
		position:absolute;
	}
		#campsLogo a{
			float:left;
			font-size:1%;
			width:173px;
			height:128px;
			overflow:hidden;
			padding-right:0px;
			text-indent:-9999px;
			cursor:pointer;
			z-index:9;
			background:url(../en/images/structure/kw-ymca-camps-logo.png) top left no-repeat;
		}
	#campsTitle{
		width:384px;
		height:93px;
		top:0px;
		left:205px;
		position:absolute;
	}
		#campsTitle a{
			float:left;
			font-size:1%;
			height:93px;
			width:384px;		
			overflow:hidden;
			padding-right:0px;
			text-indent:-9999px;
			background:url(../en/images/structure/title-kw-ymca-camps.jpg) top left no-repeat;
		}
	#rightHeaderButton{ /* button on right side of header */
		float:right;
		width:185px;
		height:92px;
		padding-right:6px;
	}
		#rightHeaderButton a{
			float:right;
			font-size:1%;
			height:92px;
			width:185px;		
			overflow:hidden;
			padding-right:0px;
			text-indent:-9999px;
			background:url(../en/images/structure/register-now.jpg) top left no-repeat;	
		}

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

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

	#search input {
		float:left;
	}
	
	#search .inputbox {
		position: relative;
		width: 75px;
		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: 12px 4px 1px 0px;
	text-align: right;
	color: #E82F3C;
	font-size:10px;
	text-transform: uppercase;
	font-family: Helvetica, Arial, sans-serif;
}

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

#pageTitle{
	width:471px;
	height:13px;
	float:right;
	margin:10px 0px 0 0;
	padding-right:3px;
}


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

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


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

#mainNav 
{
	position: absolute;
	top:60px;
	left:125px;
	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;
}


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

#detailsMap
{
    height: 275px;
}

#footer 
{
	margin: 0 auto;
	padding: 0px;
	width: 950px;
	height:91px;
	position:relative;
}
	
	#followYMCA{
		width:267px;
		height:25px;
		top:12px;
		left:0px;
		position:absolute;
	}
		#followImage{
			float:left;
			padding-right:13px;
		}
		#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:17px;
		left:267px;
		margin: 0;
		padding: 0;
		width: 500px;
		color:#646464;
		font-size:11px;
		text-align:center;
		overflow: hidden;
	}
	#allYMCAprograms a{
		height:50px;
		width:183px;		
		position:absolute;
		top:0px;
		left:767px;
	}
		#allYMCAprograms a{
			float:left;
			font-size:1%;
			height:50px;
			width:183px;		
			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:429px;
		position:absolute;
		margin: 0px 0px 0px 0px;
	}
	
/* ===================================================================================== STYLES FOR LANDING PAGE */

#campsTop{ /* Top section of landing page - contains the banners and quicklinks */
	width:950px;
	height:215px;
	position:relative;
}
	#campsTopShadow{
		width:712px;
		height:215px;
		position:absolute;
		top:0px;
		left:0px;
		background:url(../images/structure/campsTopShadow.png) top left no-repeat;
	}	
	#topContent #campsTopShadow{
		height:259px;
		background-image:url(../images/structure/campsTopShadow-kwycamps.png);
	}
	#campsBanner{
		top:0;
		left:0;
		width:709px;
		height:215px;
		position:absolute;
	}
	#campsQuickLinks_kwycamps{
		top:0;
		left:712px;
		width:212px;
		height:192px;
		position:absolute;
		padding: 23px 0 0 26px;
		background:url(../images/structure/quicklinks-background.jpg) top left no-repeat;
	}
		#campsQuickLinks_kwycamps ul{
			list-style-type:none;
			margin:0px;
			padding:0px;
		}
		#campsQuickLinks_kwycamps li{
		}
		#campsQuickLinks_kwycamps a{
			color:#FFF;
			font-size:12px;
			text-transform:uppercase;
			text-decoration: none;
			font-weight: bold;
			padding:2px 5px 0px 0px;
			width:192px;
			height:23px;
			float:left;
			font-family: Helvetica, Arial, sans-serif;
			background:url(../images/structure/quicklinks-arrow.gif) 180px 6px no-repeat;	
		}
		#campsQuickLinks_kwycamps	 a:hover{
			text-decoration: underline;	
		}
		/* changes the last link to have the circle arrow instead of a regular arrow */
		/* #contactKWYcamps{ 
			background:url(../images/structure/contact-arrow.gif) 174px 2px no-repeat !important;
			padding-right:0px !important;
			width:193px !important;
		}*/
		
/* Middle Section of Landing Page */
#campLinksMiddle{
	width:950px;
	height:140px;
	overflow: hidden;
	position:relative;
	background:url(../en/images/structure/campLinksBar.jpg) top left no-repeat;
}
	/* ===== Camp Belwood ===== */
	#campBelwood{
		top:0px;
		left:41px;
		position:absolute;
		width:149px;
		height:140px;
		list-style-type:none;
		padding:0px;
		margin:0px;
		overflow:hidden;
	}
		#campBelwood a {
			font-size:1%;
			overflow:hidden;
			float:left;
			text-indent:-9999px;
			background-repeat:no-repeat;
			background-image:url(../en/images/structure/campLinksBar.jpg);
		}
		#campBelwood a.campLogo {
			width:149px;
			height:109px;
			background-position: -41px 0;
		}
		#campBelwood a.campLogo:hover{
			background-position: -41px -140px;
		}
		#campBelwood a.kids{
			top:109px;
			left:0px;
			width:52px;
			height:31px;
			position:absolute;
			background-position: -41px -109px;
		}
		#campBelwood a.kids:hover{
			background-position: -41px -249px;
		}
		#campBelwood a.parents{
			top:109px;
			left:52px;
			width:75px;
			height:31px;
			position:absolute;
			background-position: -93px -109px;
		}
		#campBelwood a.parents:hover{
			background-position: -93px -249px;
		}
	/* ===== Camp Ki-Wa-Y ===== */
	#campKiway{
		top:0px;
		left:190px;
		position:absolute;
		width:148px;
		height:140px;
	}
		#campKiway a {
			font-size:1%;
			overflow:hidden;
			float:left;
			text-indent:-9999px;
			background-repeat:no-repeat;
			background-image:url(../en/images/structure/campLinksBar.jpg);
		}
		#campKiway a.campLogo {
			width:148px;
			height:109px;
			background-position: -190px 0;
		}
		#campKiway a.campLogo:hover{
			background-position: -190px -140px;
		}
		#campKiway a.kids{
			top:109px;
			left:0px;
			width:52px;
			height:31px;
			position:absolute;
			background-position: -190px -109px;
		}
		#campKiway a.kids:hover{
			background-position: -190px -249px;
		}
		#campKiway a.parents{
			top:109px;
			left:52px;
			width:76px;
			height:31px;
			position:absolute;
			background-position: -242px -109px;
		}
		#campKiway a.parents:hover{
			background-position: -242px -249px;
		}
	/* ===== Camp Wabanki ===== */
	#campWabanaki{
		top:0px;
		left:338px;
		position:absolute;
		width:154px;
		height:140px;
	}
		#campWabanaki a {
			font-size:1%;
			overflow:hidden;
			float:left;
			text-indent:-9999px;
			background-repeat:no-repeat;
			background-image:url(../en/images/structure/campLinksBar.jpg);
		}
		#campWabanaki a.campLogo {
			width:154px;
			height:109px;
			background-position: -338px 0;
		}
		#campWabanaki a.campLogo:hover{
			background-position: -338px -140px;
		}
		#campWabanaki a.kids{
			top:109px;
			left:0px;
			width:52px;
			height:31px;
			position:absolute;
			background-position: -338px -109px;
		}
		#campWabanaki a.kids:hover{
			background-position: -338px -249px;
		}
		#campWabanaki a.parents{
			top:109px;
			left:52px;
			width:76px;
			height:31px;
			position:absolute;
			background-position: -390px -109px;
		}
		#campWabanaki a.parents:hover{
			background-position: -390px -249px;
		}
	/* ===== Camp YMCA Outdoor Centre ===== */
	#ymcaOutdoor{
		top:0px;
		left:492px;
		position:absolute;
		width:171px;
		height:140px;
	}
		#ymcaOutdoor a {
			font-size:1%;
			overflow:hidden;
			float:left;
			text-indent:-9999px;
			background-repeat:no-repeat;
			background-image:url(../en/images/structure/campLinksBar.jpg);
		}
		#ymcaOutdoor a.campLogo {
			width:171px;
			height:109px;
			background-position: -492px 0;
		}
		#ymcaOutdoor a.campLogo:hover{
			background-position: -492px -140px;
		}
		#ymcaOutdoor a.visit{
			top:109px;
			left:0px;
			width:144px;
			height:31px;
			position:absolute;
			background-position: -492px -109px;
		}
		#ymcaOutdoor a.visit:hover{
			background-position: -492px -249px;
		}
	/* ===== Camp leadersInTraining ===== */
	#leadersInTraining{
		top:0px;
		left:663px;
		position:absolute;
		width:138px;
		height:140px;
	}
		#leadersInTraining a {
			font-size:1%;
			overflow:hidden;
			float:left;
			text-indent:-9999px;
			background-repeat:no-repeat;
			background-image:url(../en/images/structure/campLinksBar.jpg);
		}
		#leadersInTraining a.campLogo {
			width:138px;
			height:109px;
			background-position: -663px 0;
		}
		#leadersInTraining a.campLogo:hover{
			background-position: -663px -140px;
		}
		#leadersInTraining a.visit{
			top:109px;
			left:0px;
			width:112px;
			height:31px;
			position:absolute;
			background-position: -663px -109px;
		}
		#leadersInTraining a.visit:hover{
			background-position: -663px -249px;
		}
	/* ===== Camp KW YCamp Alumni ===== */
	#yCampAlumni{
		top:0px;
		left:801px;
		position:absolute;
		width:124px;
		height:140px;
	}
		#yCampAlumni a {
			font-size:1%;
			overflow:hidden;
			float:left;
			text-indent:-9999px;
			background-repeat:no-repeat;
			background-image:url(../en/images/structure/campLinksBar.jpg);
		}
		#yCampAlumni a.campLogo {
			width:124px;
			height:109px;
			background-position: -801px 0;
		}
		#yCampAlumni a.campLogo:hover{
			background-position: -801px -140px;
		}
		#yCampAlumni a.visit{
			top:109px;
			left:0px;
			width:112px;
			height:31px;
			position:absolute;
			background-position: -801px -109px;
		}
		#yCampAlumni a.visit:hover{
			background-position: -801px -249px;
		}
#iconsBackground	
{
	width:950px;
	height:148px;
	background:url(../en/images/structure/icons-background.jpg) top left no-repeat;
}
#icons{
	width:950px;
	height:148px;
	overflow:hidden;
	background:url(../en/images/structure/icons.jpg) 0px 148px no-repeat;
}
#icons.campBelwood
{
	background-position: 0px 0px;
}
#icons.campKiway
{
	background-position: 0px -148px;
}
#icons.campWabanaki
{
	background-position: 0px -296px;
}
#icons.ymcaOutdoor
{
	background-position: 0px -444px;
}
#icons.leadersInTraining
{
	background-position: 0px -592px;
}
#icons.yCampAlumni
{
	background-position: 0px -592px;
}
#chooseYourAdventure{
	width:950px;
	height:41px;
	background:url(../en/images/structure/choose-your-adventure.jpg) top left no-repeat;
}


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


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

#homepageBannerContainer 
{
	position:absolute;
	top:0px;
	left:0px;
	width: 709px;
	height: 259px;
	overflow: hidden;
}
	
	#homepageBanner 
	{
		/*display: none;*/ /* Display none if using rotating banners */
	}

#topContent{
	width:950px;
	height:259px;
	position:relative;
}

/* Marc's Styles */

#rnav {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 238px;
	height: 259px;
	z-index: 1000;
	padding: 0px;
	margin: 0px;
	border: 0px;
	line-height: 0px;
	overflow:hidden;
	background:url(../images/structure/rightNavBackground.jpg) top left no-repeat;	
}

	#rnav p {
		padding:0px;
		margin:0px;
	}
	#rnav img {
		padding:0px;
		margin:0px;
	}
	#rnav ul{
		margin:0px;
		padding:0px;
		list-style-type:none;
	}
	#rnav li{
		margin:0px;
		padding:0px;
		width:238px;
		float:left;
		line-height: 19px;
	}
	
	#rnav a{
		float:left;
		width:100%;
		height:23px;
		color:#ffffff;
		padding: 5px 0px 0px 17px;
		margin:0px;
		text-decoration:none;
		font-size:12px;
		text-transform:uppercase;
		border-bottom:1px solid #fff;
	}
	#rnav a:hover{
		text-decoration:underline;
	}
	
	/* the following control the look of the top two links in the right nav */
	.emphasized {
		height:37px !important;
		padding-top: 19px !important;
		background:url(../images/structure/rnav-arrow.gif) 205px 18px no-repeat;
	}
	.lastLink {
		border-bottom:none !important;	
	}

#colorline {
	width:950px;
	height:13px;
	overflow:hidden;
	position:relative;
	background:url(../images/structure/separator-line.gif) top left no-repeat;
}
#colorlinebot {
	width:950px;
	height:10px;
	overflow:hidden;
	position:relative;
	background:url(../images/structure/separator-line.gif) top left no-repeat;
}
#campsQuickLinks {
	width:950px;
	height:165px;
}
#campsQuickLinks1 {
	float:left;
	width:197px;
	padding-top:8px;
	padding-left:20px;
	background-image: url(../images/structure/b_cal_bg.jpg);
	background-repeat: repeat-x;
	height:157px;
}
#campsQuickLinks2 {
	float:left;
	padding-left:3px;
	padding-right:3px;
	width:241px;
	height:165px;
	overflow:hidden;
}
	#campsQuickLinks2 a{
		float:left;
		width:241px;
		height:165px;
		font-size:1%;
		text-indent: -9999px;
	}
	#campsQuickLinks2 a:hover{
		background-position: 0px -165px !important;
	}
#campsQuickLinks3 {
	float:left;
	padding-right:3px;
	width:245px;
}
	#campsQuickLinks3 a{
		float:left;
		width:245px;
		height:165px;
		font-size:1%;
		text-indent: -9999px;
	}
	#campsQuickLinks3 a:hover{
		background-position: 0px -165px !important;
	}

#campsQuickLinks4 {
	float:left;
	width:238px;
}
	#campsQuickLinks4 a{
		float:left;
		width:238px;
		height:165px;
		font-size:1%;
		text-indent: -9999px;
	}
	#campsQuickLinks4 a:hover{
		background-position: 0px -165px !important;
	}

#threephotos {
	position: absolute;
	top: 140px;
	left: 0px;
	width: 399px;
	height:119px;
	background-image:url(../images/structure/threephotos.png);
}
/* 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;
	}
	#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;
	}
	#contentBottomShadowTransition{ /* shadow transition at the bottom of the conent area */
		width:100%;
		height:13px;
		background:url(../images/structure/content-bottom-background.gif) bottom center no-repeat;
	}
	
/* Content Area Interior */

.mainInterior #contentShadows{ /* shadows on the left and right side of the content area */
	width:100%;
	background:url(../images/structure/contentint-background-repeat.gif) top center repeat-y;
}
	.mainInterior #contentTopShadow{ /* shadow transition at the top of the conent area */
		width:100%;
		background:url(../images/structure/contentint-top-background.gif) top center no-repeat;
	}
	.mainInterior #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;
	}
	.mainInterior #contentBottomShadowTransition{ /* shadow transition at the bottom of the conent area */
		width:100%;
		height:13px;
		background:url(../images/structure/contentint-bottom-background.gif) bottom center no-repeat;
	}


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

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

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


/* ===== Right Content ===== */
		
#contentRight 
{
	padding:0 34px;
	overflow:hidden;
}
.mainInterior #contentRight{
	float:right;
	width:686px;
	padding:0 34px;
}
.mainInterior #contentRight p{
	line-height:19px;
}



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


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

#actionsContainer 
{
	position: relative;
	float: left;
	height:66px;
	width:688px;
}
.wide #actionsContainer{
	width:100%;	
	height: 80px;
}
	
	#breadcrumbs 
	{
		float: left;
		padding: 26px 0px 0px 0px;
		width: 419px;
		color: #656565;
		overflow: hidden;
	}
	.wide #breadcrumbs
	{
		padding-top:40px;	
	}
	
	#actions 
	{
		width:317px;
		height:57px;
		top:0px;
		left:407px;
		position:absolute;
		padding: 0px;
	}	
	.wide #actions{
		left: 628px;	
	}

		#actions form 
		{
			display: inline;
		}
		
	#tornCloth
	{
		width:317px;
		height:57px;
		background:url(../en/images/structure/actions-background.png) top left no-repeat;	
	}


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

.mainInterior 
{
	
}

#contentInt 
{
	margin:0 auto;
	padding: 0px;
	width: 976px;
	overflow: hidden;	
		
}

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

#contentInt_wide
{
	margin:0 auto;
	padding: 0px;
	width: 976px;
	overflow: hidden;		
}

#contentInt.wide div#contentLeft
{
    display:none;	
}

/* -- Sitemap -- */

.siteMapSection
{
    width:47%;
    float:left;   
}

/* ----- END OF TEMPLATE ----- */