/***************************************************************************
This custom.css file can be used to make website-wide style customizations.

In addition to the styles listed here, additional selectors, properties, and 
values can be specified in this file. This can be done to override existing 
default styles and introduce new styles. 
***************************************************************************/



/*******************************************
Main images found on start page
*******************************************/



/* Start image settings - can change size of this image by changing width and height values */

#start-image 
{
	display:block;
	float:right;
	width:404px;
	height:365px;
	right:2px;
}




/* Header image settings - can change size of this image by changing width and height values */

#logo 
{
	width:944px;
	height:85px;
	margin-left:auto;
	margin-right:auto;
}



/*******************************************
General styles for entire site and some 
specific pages
*******************************************/


/* General styles such as text size and color used across the whole site */

body
{
	text-align: center;
	margin: 10px;
	font-size: 10pt;
	font-family: Verdana;
	color:Black;
	background: #ffffff;  /* Background color outside of border image */
	background-image:url(images/ggregbackground.jpg);
	background-repeat: no-repeat;
	background-size: 100%;

} 





/* controls general link text size and color. Note that many links (such as navigation menus) are styled further down in this style sheet and those specific styles may overrule ones specified here depending on the type of link */

a
{
	color: #597391;
	font-size: 10pt;
}




/* title size and color controls text such as 'More Information' on the start page and 'Available for registration only’ on the programs page, etc */

h1,h2, h3, h4, legend,.h1,.h2,.h3,.h4,.title
{
	color: #597391;
	font-size: 10pt;
}




/* horizontal bar that can be seen on page footers and may act as top border on some pages such as the Course Details overlay and Sports reports results */

hr
{
	border-top-color:#bfcfe3;
}




/* top border color. This will be seen separating search criteria sections on Facility/Rental tab */

.border-top
{
	border-top-color:#bfcfe3;
}




/* border color under title to navigation tree for Memberships and Sports reports */

.border-bottom
{
	border-bottom-color:#bfcfe3;
}




/* border color that can be seen to the left side of search results panes */

.border-left
{
	border-left-color: #bfcfe3;
}




/* border color around sections on receipt */

.receipt-row
{
	padding: 10px;
	border:solid 1px #d0dceb;
}




/* border color that can be seen in tables such as the Account Registration table in My Account and Sports Reports results */
 
.data-table tbody td, .data-table thead th, .data-table thead td
{
	border-bottom-color: #bfcfe3;
}




/* border color that can be seen on Monthly Facility Availability charts */

.table-with-border,.table-with-border td
{
	border-color:#bfcfe3;
}




/* background for table headers such as on Membership Details, Create new account and Account Registration table */

.data-table thead th
{
	background-color: #5c9ccc;
}




/* color of alternating rows in results sections */

tr.odd 
{
	background-color: #E2E4FF;
}

tr.even 
{
	background-color: #ffffff;
}




/* controls formatting of the "skip Navigation" link that appears in the top right corner of website */

#skip-navigation
{
    	color:White;
    	font-size:9pt;
}




/* Create new account User link style */

#toolbar-createuser a
{
	text-decoration: underline;
}




/* User Logout link style */

#toolbar-logout a
{
	text-decoration: underline;
}




/* Help link style */

#toolbar-help a
{
	text-decoration: underline;
}




/* Controls the barcode search for program on the Start page */

#start-search
{
	width: 480px;
	height: 30px;
	text-align: center;
}




/* Controls the barcode input field for the Start page */

#start-search input
{
	width: 420px;
	float: left;
	margin: 5px 0 5px 5px;

}




/* controls Quick Links text for start page */

#start-quick-nav a
{
	font-weight: bold;
}




/* controls optional start page footer text */

#optional-footer
{
   	text-align:left;	
}




/* Controls the barcode input field on the Programs page */

#cbarcode
{
	margin-top:3px;
	width:158px;
	float:left;
}




/* Controls style for Activity title on Programs page */

.activity-title
{
	font-size:1.2em;
	padding-top:10px;
	font-weight:600;
}


/* Controls style for Activity description on Programs page */

.activity-desc
{
	padding:5px 20px;	
}




/* Due to a bug in 7.01 (CLA-24811) styling the View Details link for Programs will not style the analogous links for Memberships, Facility Rentals and Sports Admin results (these use site wide anchor styles by default. The following could be used as a workaround to control style of View Details link in Membership, Facility Rentals, and Sports Admin results. Simply uncomment the following style and change as needed */
/*
a.button-icon-right 
{ 
	color: #597391; 
	font-weight: bold; 
}
*/



/* Controls style of submenu for Facility Rentals and Sports Admin */

#submenu a
{
	font-weight:normal;
}


/* controls style of the currently selected submenu for Facility Rentals and Sports Admin */

#submenu .current a
{
	font-weight: 600;
}





/********************************************
Tree View - Images and styles for Tree views 
used on Programs, Memberships, and Sports 
Reports pages 
********************************************/



/* text styling used for selected Categories and Pass Plans in treeview */

.treeview li.collapsable span.folder a
{
	color:#ffffff;
}



/* Arrow image and text background used to designate items in the left hand section of treeview for item that is expanded eg. Programs tab Browse for Courses tree list */

.treeview span.folder
{
	background: #5c9ccc url(images/treeview-open.png) 0 0 no-repeat;
}




/* Arrow image used to designate items in the left hand section of treeview for items not yet expanded eg. Programs tab Browse for Courses tree list */

.treeview li.expandable span.folder
{
	background: url(images/treeview-close.png) 0 0 no-repeat;		
}




/* text styling used for non-selected Categories and Pass Plans in treeview */

.treeview li.expandable span.folder a
{
	color:#597391;
}




/* style of sub-category in treeview that is not selected */

.treeview span.leaf a
{
	font-size:10pt;	

}




/* style of sub-category when selected in treeview */

.treeview span.leaf a.selected
{
	background-color:#5c9ccc;
	color:#ffffff;
}



/********************************************
Global images used around site
********************************************/


/* Border image that frames the site */

#wrapper
{
	background-image: url(images/site-bg.png);
}




/* Image "?" used to link to Help page */

#toolbar-help
{
	background-image: url('images/site-bg-help.png');
}




/* Image used as link to print a page */

.printer-icon
{
	background: url('images/printer-blue.png') no-repeat;	
}




/* Search image displayed to the right of the barcode search fields on the Start and Programs pages */

.search-icon
{
	background: url('images/search.gif') no-repeat center;
}




/* animated graphic that indicates that the system is busy processing the request */

.indicator-waiting
{
	background-image: url(images/waiting.gif);
}




/* Arrow that appears at the top of the Shopping Cart preview */

#cart-preview-info-wrapper .arrow-up
{
	background: url(images/arrowup.png) no-repeat;
}




/********************************************
The next three images are used as Quick navigation 
buttons on the start page for any site that is 
licensed for more than one major feature in 
Internet Registration. 
********************************************/


/* Programs Quick navigation image */

#start-quick-nav-program .start-quick-nav-icon
{
	background-image: url('images/start-program.png');
}




/* Membership Quick navigation image */

#start-quick-nav-membership .start-quick-nav-icon
{
	background-image: url('images/start-membership.png');
}




/* Facility - Rentals Quick navigation image */

#start-quick-nav-facility .start-quick-nav-icon
{
	background-image: url('images/start-facility.png');
}





/********************************************
For sites that are licensed for only one of the 
major features in online the Start page Quick 
navigation button is composed of 3 pieces 
- a left, a middle, and a right image specific 
to your feature - to allow the image to stretch 
and fit the page better 
********************************************/



/* left side of Quick nav image */

.start-quick-nav-left
{
	background: url('images/start-quick-nav-left.png') no-repeat ;
}




/* middle section of Quick nav image */

.start-quick-nav-middle
{
	background: url('images/start-quick-nav-middle.png') repeat;
}




/* Start Page Quick Navigation - right image with Program graphic */

#start-quick-nav-program .start-quick-nav-right
{
	background: url('images/start-quick-nav-program.png') no-repeat;	
}




/* Start Page Quick Navigation - right image with Facility graphic */

#start-quick-nav-facility .start-quick-nav-right
{
	background: url('images/start-quick-nav-facility.png') no-repeat;	
}




/* Start Page Quick Navigation - right image with Membership graphic */

#start-quick-nav-membership .start-quick-nav-right
{
	background: url('images/start-quick-nav-membership.png') no-repeat;	
}






/********************************************
 Component containers
********************************************/

/* Background image, border size and color for Barcode and course browsing section, advanced search and Facility search sections on the left hand side as well as Registrant 'accordian' under My Account. Many other screens are affected such as the client login, payment screen, Help page, checkout page, etc */

.ui-widget-content { border: 1px solid #a6c9e2; background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x; color: #222222; }

.ui-widget-content a { color: #597391; }




/* Inactive Tabs and main Navigation bar background, Language Drop Down Text Color and background image, Search background on start page */

.ui-widget-header { border: 1px solid #4297d7; background: #5c9ccc url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }




/* Inactive Tab Text Color */

.ui-widget-header a { color: #ffffff; }




/********************************************
 Interaction states
********************************************/



/* Background image and colour for the advanced search bar on the left hand side under the Programs tab, Inactive Registrant bar in My Account, Login button on the User Login form, Go to Cart button, Rentals Search button, etc  */

.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #5c9ccc; background: #5c9ccc url(images/ui-bg_glass_55_5c9ccc_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; }

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #ffffff; text-decoration: none; outline: none; }




/* Active Tab and Hover Background colour or image. Also includes the color/style of text used when hovering over Registrant names in My Account and days of the month on pop up calendars */

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #79b7e7; background: #f7f7ff url(images/ui-bg_flat_75_f7f7ff_40x100.png) 50% 50% repeat-x; font-weight: bold; color: #5c9ccc; outline: none; }




/* Active Tab text and Inactive tab Hover text style and color */

.ui-state-hover a, .ui-state-hover a:hover, .ui-state-focus a, .ui-state-focus a:hover  { color: #5c9ccc; text-decoration: none; outline: none; } 




/* Login, My Account, Shopping Cart, and Active Registrant bar in My Account Background color or image */

.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #8bc36c; background: #71ac57 url(images/ui-bg_glass_60_4ca20b_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #ffffff; outline: none; }




/* Shopping Cart Text Color */

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #ffffff; outline: none; text-decoration: none; }




/********************************************
Interaction Cues
********************************************/



/* Shopping cart preview overlay */

.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid #fad42e; background: #ffffcc url(images/ui-bg_flat_55_ffffcc_40x100.png) 50% 50% repeat-x; color: #363636; }




/* text color for pop ups such as the Shopping Cart preview and multilingual language drop down list */

.ui-state-highlight a,.ui-state-highlight a:link,.ui-widget-content .ui-state-highlight a { color: #363636; }




/* colors and image used for text and background on error pages such as the disabled JavaScript or Cookies alert page */

.ui-state-error, .ui-widget-content .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x; color: #cd0a0a; }

.ui-state-error a, .ui-widget-content .ui-state-error a { color: #cd0a0a; }

.ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #cd0a0a; }




/* the opacity level controls the look of the unavailable selection items in page navigation bars such as on the Show Courses or Facility/Rentals results page */

.ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }




