@charset "utf-8";
/* CSS Document */

#tabcontainer{
	position:absolute;
	width:568px;
	height:auto;
	z-index:1;
	margin: 20px;
	padding: 20px;
	top: 125px;
}


/* Sets tabs in the members section of the site higher to align with side nav  */
#membertabs{
	position:absolute;
	width:568px;
	height:auto;
	z-index:1;
	margin: 20px;
	padding: 0px 20px 20px 20px;
	top: 0px;
}

/*-----------------------------Begin styling for tabs and panes-------------------------------------------------*/
/* root element for tabs  */
ul.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;
	height:30px;
}

/* single tab */
ul.tabs li {
	float:left;
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #FFF;
}

/* Styles typography, size, positioning, etc. for the tabs */
ul.tabs a {
	height: 30px;
	line-height:30px;
	width: 111px;
	padding:0px;
	margin:0px;
	position:relative;
	left:0px;
	font-family: Georgia, Times New Roman, Times, serif;
	font-weight: bold;
	font-size: 12px;
	color:#FFF;
	display:block;
	text-align:center;
	text-decoration:none;
}

/* Prevents funky default border around tabs. */ 
ul.tabs a:active {
	outline:none;
}

/* when mouse enters the tab show the background image and change the text color */
ul.tabs a:hover {
	color:#666;
	background-image: url(../ux/tabs/tabback.png);
	background-repeat: repeat-x;
}

/* active tab uses a class name "current". This can be highlighted by adding a background image or changing the text color */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {		
	cursor:default !important; 
	color:#FFF !important;
}


/**********************************************************************************************************************
												Universal Pane Styling
***********************************************************************************************************************/

/* initially all panes are hidden */ 
div.panes div.pane {
	display:none;		
}

/* tab pane styling, sets the style, size and location for the panes */
div.panes div {
	display:none;
	height:550px;
	width: 548px;
	overflow: auto;
	font-size:14px;
	position:relative;
	left: 0px;
	padding:20px;
	background-image: url(../ux/tabs/folderpanebk.png);
	background-repeat: repeat-x;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFF;
}

/* Sets a taller height for panes in the members section. I know it's nasty, but we can come back and clean it up */
#membertabs div.panes div {
	height:900px;
}

/* Styles the tables within each panel, used for price lists, etc. */
.panes div table {
	width: 400px;
}


/***********************************************************************
	Styling for accordion list on trout creek gym page
************************************************************************/

/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion {
	position: absolute;
	left: 20px;
	top: 0px;
	width: 215px; /*Sets the width of the panes*/
}

/* accordion header */
#accordion h4 {
	margin:0;
	padding:5px 15px;
	cursor:pointer;
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 12px;
	font-weight:bold;
	color: #D92525; /*Inactive pane headers are global red */
	border-top: solid 1px #FFF;
	background-image:url(../media/opaqueback.png);
	background-repeat:repeat;
}

#accordion h4:hover {
	color:#666; /*Sets hover color for text on tabs */
	background-color:#fff;
}

/* currently active header */
#accordion h4.current {
	cursor:default;
	background-color:#fff;
	color: #D92525; /*Active header is global red color */
}

/* accordion pane */
#accordion div.slidepane {
	display:none;
	height:auto; /*Sets the height of the panes*/
	padding:5px 15px 20px 15px;
	color:#333;
	background-image: url(../ux/tabs/folderpanebk.png);
	background-repeat: repeat-x;
}

/* accordion pane used on rec programs page */
#accordion div.slidepane2 {
	display:none;
	height:auto; /*Sets the height of the panes*/
	padding:5px 15px 20px 15px;
	color:#333;
	background-image: url(../ux/tabs/folderpanebk.png);
	background-repeat: repeat-x;
}

/***********************************************************************
	Styling for accordion list on aquatics programs page
************************************************************************/

/* Aquatics Accordion */
#aqaccordion {
	position: absolute;
	left: 20px;
	top: 20px;
	width:568px; /*Sets the width of the panes*/
}

/* accordion header */
#aqaccordion h4 {
	margin:0;
	padding:5px 15px;
	cursor:pointer;
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 12px;
	font-weight:bold;
	color: #D92525; /*Inactive pane headers are global red */
	border-top: solid 1px #FFF;
	background-image:url(../media/opaqueback.png);
	background-repeat:repeat;
}

#aqaccordion h4:hover {
	color:#666; /*Sets hover color for text on tabs */
	background-color:#fff;
}

/* currently active header */
#aqaccordion h4.current {
	cursor:default;
	background-color:#fff;
	color: #D92525; /*Active header is global red color */
}

/* accordion pane */
#aqaccordion div.slidepane {
	display:none;
	height:330px; /*Sets the height of the panes*/
	padding:5px 15px 20px 15px;
	color:#333;
	background-image: url(../ux/tabs/folderpanebk.png);
	background-repeat: repeat-x;
}

/***********************************************************************
	Styling for accordion on the members homepage
************************************************************************/

/* Members Accordion */
#memccordion {
	position: absolute;
	left: 20px;
	top: 20px;
	width:568px; /*Sets the width of the panes*/
}

/* accordion header */
#memccordion h4 {
	margin:0;
	padding:5px 15px;
	cursor:pointer;
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 12px;
	font-weight:bold;
	color: #D92525; /*Inactive pane headers are global red */
	border-top: solid 1px #FFF;
	background-image:url(../media/opaqueback.png);
	background-repeat:repeat;
}

#memccordion h4:hover {
	color:#666; /*Sets hover color for text on tabs */
	background-color:#fff;
}

/* currently active header */
#memccordion h4.current {
	cursor:default;
	background-color:#fff;
	color: #D92525; /*Active header is global red color */
}

/* accordion pane */
#memccordion div.slidepane {
	display:none;
	height:auto;
	padding:5px 15px 20px 15px;
	color:#333;
	background-image: url(../ux/tabs/folderpanebk.png);
	background-repeat: repeat-x;
}

/* accordion pane */
#memccordion div.slidepane image {
	margin-top:20px;
	display:block;
}

/* styling for business directory accordion */
.biz h3 {
	margin-top:0px;
}
.biz p {
	margin-top:-10px;
}
