/* CSS Document */

/* GLOBAL */

body
{
	background: #D7DBDD url(cssimages/bg.gif) repeat-y left top;
	margin: 0px;
	padding: 0px;
	font: 8pt Verdana, Arial, Helvetica, sans-serif;
}

h1
{
	font-size: 130%;
	margin: 4px;
	color: #0066B3;
}

h2
{
	font-size: 120%;
	margin: 3px;
	color: #B32400
}

h2 a:link,
h2 a:visited
{
	color: #00487D;
}

h2 a:hover,
h2 a:active
{
	color: #ED1C24;
}


h3
{
	font-size: 110%;
	margin: 2px;
	color: #586C7A;
}

h4
{
	font-size: 100%;
	margin: 2px;
}

p
{
	font-size: 100%;
	line-height: 18px;
	color: #586C7A;
	margin: 4px 2px;
}

ul
{
	margin: 4px 30px;
}

li
{
	margin: 0px;
	color: #586C7A;
}


td
{
	padding: 8px 6px;
	border-style: dotted;
	border-width: 0px 0px 1px 0px;
	border: #E2E2EA;
	vertical-align: top;
}

form
{
	border: 1px solid #586C7A;	
	padding: 10px
}




.topBar
{
	position:relative;
	background: url(cssimages/top_curve.gif) no-repeat left top;
	width:850px;
	height:22px;
	margin: 0px;
	padding: 0px;
}

.header
{
	position:relative;
	width:850px;
	height:146px;
}

.logo
{
	position:relative;
	width:160px;
	height:146px;
	background: url(cssimages/logo.jpg) no-repeat left top;
	margin: 0px;
	padding: 0px;
	float:left;
	cursor: hand;
}

.masthead
{
	position:relative;
	width:690px;
	height:146px;
	background: url(cssimages/banner.jpg) no-repeat left top;
	margin: 0px;
	padding: 0px;
	float:left;
}

.nav
{
	position:relative;
	width:160px;
	height:auto;
	background: url(cssimages/nav_bg.gif) no-repeat left top;
	margin: 0px;
	padding: 20px 0px 80px 0px;
	font-size: 75%;
	font-weight: bold;
	color: #FFF;
	line-height: 23px;
	letter-spacing: 1px;
	float: left;
}

.nav div
{
	width:130px;
	margin: 0px 5px 0px 20px;
	padding: 0px 0px 0px 0px;
	border-style: solid;
	border-width: 1px 0px 0px 0px;
	border-color: #FFF;
	text-align: right;
	border-collapse: collapse;
}


.nav a:link,
.nav a:visited,
.nav a:active,
.nav a:hover
{
	text-decoration: none;
	padding: 0px 10px 0px 0px;
	display: block;
}


.nav a:link
{
	color: #FFF;
}

.nav a:visited
{
	color: #FFF;
}

.nav a:active
{
	color: #FFF;
	background:url(cssimages/nav_on.gif) no-repeat left top;
}

.nav a:hover
{
	color: #fc0;
	background:url(cssimages/nav_over.gif) no-repeat left top;
}

.navOn
{	
	color: #FFF;
	text-decoration: none;
	background:url(cssimages/nav_on.gif) no-repeat left top;
	padding: 0px 10px 0px 0px;
	display: block;
}

.navOn span
{	
	padding: 0px 10px 0px 0px;
}


.mainContainer
{
	position: absolute;
	margin: 10px 0px 0px 0px;
	padding: 10px 10px 0px 20px;
	width: 580px;
	height: 100%;
	background: url(cssimages/content_top_curve.gif) no-repeat right top;
	left: 170px;
	}

/* END GLOBAL */

.image1
{
	float: left;
	padding: 10px 0px 0px 0px;
}

.homeCopy
{
	background: url(cssimages/content_top_curve.gif) no-repeat right top;
	border: none;
	width: 390px;
	margin: 10px 0px 0px 26px;
	padding: 5px 16px 0px 0px;
	float: left;
	z-index: 15;
}

.homeCopy div
{
	border: none;
	margin: 20px 0px 0px 0px;
}


.homeCopy div span
{
	padding: 8px;
	width: 160px;
}

.homeCopy h1
{
	font-size: 100%;
	margin: 6px 0px 4px 10px;
}

.homeCopy p
{
	margin: 2px 30px 6px 10px;
}

.homeCopy ul
{
	display: inline
}

.homeCopy li
{
	display: inline
}

.instructors
{
	position: absolute;
	width: 580px;
}

.instructors div
{
	position: relative;
	display: table;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 20px 0px;
	clear: both;
	border-style: dotted;
	border-width: 0px 0px 1px 0px;
	border-color: #D7DBDD;
	height: 225px;
}

.instructors div img
{
	float:left;
}

.instructors h1
{
	margin: 40px 0px 0px 0px;
}

.instructors p
{
	margin: 2px 0px 10px 0px;
}

.contact
{
	padding: 0px 0px 20px;
	width: 580px;
	clear: both;
	display:table;
}

.contact div:first-child
{
	padding: 0px 80px 0px 0px;
}
.contact div
{
	float: left;
	padding: 0px 20px 0px 20px;
	
}


.contact a:link,
.contact a:visited,
.contact a:active,
.contact a:hover
{
	text-decoration: none;
	padding: 0px 10px 0px 30px;
	display: block;
	font-weight: 600;
}


.contact a:link,
.contact a:visited
{
	color: #00487D;
	background: url(cssimages/email_0.gif) no-repeat left bottom;
}


.contact a:hover,
.contact a:active
{
	color: #ED1C24;
	background: url(cssimages/email_1.gif) no-repeat left bottom;
}


.directions
{
	padding: 0px 0px 20px 0px;
	width: 580px;
}


/* UTILITY */


/* CLEARFIX */
.clearfix:after {
	content:".";
	display:block;
	height:20px;
	clear:both;
	visibility:hidden;
	}
	
.clearfix {
	display:inline-table;
	}
	
/* Hides from IE-mac \*/
* html .clearfix {
	height:90%;
	}
	
.clearfix {
	display:block;
	}
/* End hide from IE-mac */

	
.floateMeLeft
	{
	float: left;
	}
	
.floateMeRight
	{
	float: right;
	}
	
	
.hidePrint
	{
	display: block;
	}
	
.hideScreen
	{
	display: none;
	}
	

	
/* -------------------------------- */
	
/* Spacer styles */
.spacer1 {
	padding: 0px;
	height: 1px;
	overflow: hidden;
	} 
	
.spacer2 {
	padding: 0px;
	height: 2px;
	overflow: hidden;
	}

.spacer5 {
	padding: 0px;
	height: 5px;
	overflow: hidden;
	}
	
.spacer10 {
	padding: 0px;
	height: 10px;
	overflow: hidden;
	}	
	
.spacer20 {
	padding: 0px;
	height: 20px;
	overflow: hidden;
	}	
	
	
.spacer120 {
	height: 120px;
	display: block;
	}
	
.horizontalSpacer5 {
	padding: 0px 0px 0px 5px;
	}

.horizontalSpacer10 {
	padding: 0px 0px 0px 10px;
	vertical-align: top;
	}
/* -------------------------------- */

/* Alignment */

.alignLeft {
	vertical-align: text-top;
	text-align: left;
	}
		
.alignCenter {
	text-align: center;
	}
	
.alignRight {
	text-align: right;
	}

.alignTop {
	vertical-align: text-top;
	margin: 0px;
	padding: 0px;
	border: none;
	}
	
.alignMiddle {
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
	}
	
.alignTopRight {
	vertical-align: top;
	text-align: right;
	}	
	
.alignTopCenter {
	vertical-align: text-top;
	text-align: center;
	}

.noWrap {
	white-space: nowrap;
	}
	

/* -------------------------------- */
/* Floats */

.floatLeft {
	float: left;
	margin: 0px;
	padding: 0px;
	border: none;
	}
	
.floatLeft img {
	float: left;
	margin: 0px;
	padding: 0px;
	border: none;
	}

.floatRight {
	float: right;
	margin: 0px;
	padding: 0px;
	border: none;
	}



	
/* -------------------------------- */	

/* FIXED WIDTHS */


.w100
{
	width: 100px;
}
.w200
{
	width: 200px;
}

.w300
{
	width: 300px;
}

.w400
{
	width: 400px;
}


/* -------------------------------- */	
	
/* FORM ELEMENTS */

input
{
	padding: 4px 6px;
}


/* -------------------------------- */	
	
/* DYNAMIC STYLES */	
.hideMe {
	display: none;
	z-index: 300;
	}

.showMe {
	display: block;
	z-index: 300;
	}
	
.printHide {
	display: block;
	}
	
.screenHide {
	display: none;
	}

/* END DYNAMIC STYLES */

	
/* -------------------------------- */	

/* MAP SPECIF */

.mapBody
{
	background: #FFF;
}

.mapPop
	{
	padding: 12px 0px 10px 0px;
	color: #033C9B;
	width: 350px;
	line-height: 18px;
	text-align: left;
	}
		
.mapPop a:link,
.mapPop a:visited
	{
	padding: 0px;
	margin: 8px 0px 0px 0px;
	color: #007441;
	font-size: 8pt;
	}
.mapPop a:hover,
.mapPop a:active
	{
	padding: 0px;
	margin: 0px;
	color: #FE5614;
	font-size: 8pt;
	}
	
/* -------------------------------- */	

	
/* -------------------------------- */	

/* BELT COLOURS */

.boldFace
{
	font-weight: bold;
}

.bcYellow
{
	color: #000;
	background: #FFE400;
}
.bcOrange
{
	color: #FFF;
	background: #ED661C;
}

/* ACCORDION */

@charset "UTF-8";

/* SpryAccordion.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main Accordion container. For our default style,
 * we draw borders on the left, right, and bottom. The top border of the Accordion
 * will be rendered by the first AccordionPanelTab which never moves.
 *
 * If you want to constrain the width of the Accordion widget, set a width on
 * the Accordion container. By default, our accordion expands horizontally to fill
 * up available space.
 *
 * The name of the class ("Accordion") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * Accordion container.
 */
.Accordion {
	border: none;
	overflow: hidden;
	width: 530px;
}

/* This is the selector for the AccordionPanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.
 *
 * The name of the class ("AccordionPanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel container.
*/
.AccordionPanel {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the AccordionPanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open a specific panel.
 *
 * The name of the class ("AccordionPanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel tab container.
 */
.AccordionPanelTab 
{
	border: none;
	margin: 0px;
	padding: 0px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
}

/* This is the selector for a Panel's Content area. It's important to note that
 * you should never put any padding on the panel's content area if you plan to
 * use the Accordions panel animations. Placing a non-zero padding on the content
 * area can cause the accordion to abruptly grow in height while the panels animate.
 *
 * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
 * Content container.
 *
 * The name of the class ("AccordionPanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel content container.
 */
.AccordionPanelContent {
	overflow: auto;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
	border-style: solid;
	border-width: 0px 1px 0px 1px;
	border-color: #E2E2EA;
	
}


.AccordionPanelContent table
{
	width: 99%;
	border: none;
	margin: 0px;
	padding: 0px;	
}



.AccordionPanelContent tr
{
	margin: 0px;
	padding: 0px;	
}

.AccordionPanelContent td.alignRight
{
	width: 180px;
}

.AccordionPanelContent td
{
/*	padding: 8px 6px;
	border-style: dotted;
	border-width: 0px 0px 1px 0px;
	border: #E2E2EA;
	vertical-align: top;*/
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "AccordionPanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the Accordion.
 */
.AccordionPanelOpen .AccordionPanelTab {
/*	background-color: #EEEEEE;*/
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.AccordionPanelTabHover {
/*	color: #555555;*/
}
.AccordionPanelOpen .AccordionPanelTabHover {
/*	color: #555555;*/
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * Accordion has focus. The "AccordionFocused" class is programatically added and removed
 * whenever the Accordion gains or loses keyboard focus.
 */
.AccordionFocused .AccordionPanelTab {
/*	background-color: #3399FF;*/
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open when the Accordion has focus.
 */
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
/*	background-color: #33CCFF;*/
}

.AccordionFooter {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background: url(cssimages/accordion_bg.gif) no-repeat center bottom;
	height: 35px;
	display: block;
	
}
.AccordionFooter span {
	display: block;
	visibility: hidden;
}


.headerLink
{

}
.headerLink div
{
	width: 465px;
	height: 45px;
	clear: both;
	vertical-align: middle;
}


.headerLink a:link,
.headerLink a:visited,
.headerLink a:hover,
.headerLink a:active
{
	padding: 15px 0px 0px 25px;
	width: 445px;
	height: 30px;
	clear: both;
	display: block;
	font-size: 100%;
	font-weight: bold;
	text-decoration: none;
	font-variant: small-caps;
	letter-spacing: 1px;
}

.headerLink a:link,
.headerLink a:visited
{
	color: #0066B3;
	background: url(cssimages/header_link_bg.gif) no-repeat center bottom;
}
.headerLink a:hover,
.headerLink a:active
{
	
	color: #ED1C24;
	background: url(cssimages/header_link_bg_over.gif) no-repeat center bottom;
}

/* SCHEDULE SPECIFIC */


.scheduleNew
{
	position:absolute;
	top: 200px;
	left: 170px;
	background: #fff;
	width: 910px;
	padding: 1px;
	border-style: solid;
	border-width: 1px 0px 1px 1px;
	border-color: #8E9FAB;
	display: block;
}

.schedule
{
	position:absolute;
	top: 220px;
	left: 170px;
	background: #FFFFFF url(cssimages/schedule_bg.gif) no-repeat 909px center;
	width: 910px;
	padding: 0px 28px 0px 0px;
	border-style: solid;
	border-width: 1px 0px 1px 1px;
	border-color: #8E9FAB;
	display: block;
}

.schedule th
{
	font-size: 100%;
	background: #516471;
	padding: 5px 0px 5px 0px;
	margin: 0px;
	color: #FFF;
	border-width: 0px;
}


.schedule table
{
	margin: 0px;
	padding: 0px;
	border-width: 0px;
	border-collapse: collapse;
}

.schedule tr
{
	margin: 0px;
	padding: 0px;	
}

.schedule td
{
	width: 180px;
	border-style: dotted;
	border-width: 0px 1px 1px 0px;
	border-color: #8E9FAB;
	padding: 6px;
	margin: 0px;
	border-collapse: collapse;
	font-size: 90%;
}

.schedule div
{
	margin: 0px 0px 0px 0px;
	padding: 2px 6px 2px 6px;
	font-size: 100%;
	font-weight: bold;
	color: #FFF;
	background-color: #0066B3;
	text-align: right;
}

.schedule h4
{
	color: #0066B3;
	margin: 4px 0px 0px 1px;
}

.schedule p
{
	line-height: 12px;
	margin: 0px 0px 10px 0px;
	font-size: 90%;
}


.scheduleHead
{
	position: absolute;
	top: 185px;
	left: 180px;
	width: 590px;
	font-size: 120%;
}

.scheduleHead span
{
	float: right;
}

.schSpecial
{
	background: #FFF5A3;	
}

.schBlank
{
	background: #E4EDF3;	
}

.schMask

{
	position:absolute;
	height: 100%;
	width:955px;
	top: 220px;
	left: 170px;
	z-index: 900;
	background: url(cssimages/schedule_fade.gif) repeat;
}

/* END*/