/* Dimensions
 *   header:			width: 930px  height: 85px;
 *   nav-bar:			width: 930px  height: 22px;
 *   page including shadow:	width: 965px
 *   page including borders:	width: 930px
 *   page content area:         width: 922px (borders are 4px each)
 *   home-page tabs:		width: 922px  height: 22px;
 *   home-page tab content:	width: 922px  height: 124px;
 */
/* Colors:
 *   body background color:     224,230,230 (very light gray-green)
 *   header text color:		221,241,241 or 255.255.255
 *   header text bold:		153,204,204
 *   header backround:		dark: 0,110,135   light: 43,133,153  (gradient)
 *   navbar:			dark: 173,220,220 light: 224,243,241 (gradient)
 *   borders:			dark: 102,153,153 light: 173,220,220 (gradient)
 *   home-page tabs:		same as header background.
 *   home-page tab text:	unselected: X,X,X     selected: X,X,X
 *   hover color (pale yellow):	255,255,204
 */
body {
    background: rgb(224,230,230);
    margin: 0px 8px;
    font-family: Tahoma,Verdana,Arial,sans-serif; font-size: 10pt;
}

/*
 * This "shadow" <div> contains the entire page EXCEPT for
 * the "bottom" strip, which has it's own shadow.  The z-index here
 * is needed so that things in the shadow container (i.e., most of the
 * page contents!) can overlap that bottom strip in order to use that
 * last little bit of the apparent content area (only the home-page tabs
 * really do that since the extra white space looks good on other pages.
 */
#page-shadow {
    position: relative;
    background: url("../images/shadow-right.jpg") repeat-y right;
    width: 965px;
    text-align:left;
    z-index: 1;
}

/* =========================== Page-Header Strip ========================== */
#page-header {
    position: relative;
    background: url("../images/header-bg.jpg") repeat-x top left;
    color: rgb(221,241,241);
    width: 930px;  height: 85px;
    text-align:left;
}
#page-header IMG {
    border: 0px;
}
#page-header B {
    color: rgb(153,204,204);
}
#header-tagline {
    position: absolute; top: 54px; left: 82px;
    font-weight: bold; font-size: 9pt;
}
#header-phone {
    position: absolute; top: 10px; left: 520px; width: 380px;
    font-size: 12pt; font-weight: bold;
    text-align:right;
}
#header-search {
    position: absolute; top: 53px; left: 520px; width: 380px; height: 16px;
    font-size: 9pt;
    text-align: right;
    white-space: nowrap;
}
#header-search button {
    position: relative; top:-6px;
    float: right; width: 28px; height: 22px;
    font-size: 9pt;
    padding-bottom: 1px; margin-left: 1px;
}
/* the div.input will be the "visible" part of the input; this gets rid of
 * the annoying visible difference between IE and FF alignment of inputs.
 */
#header-search DIV.input {
    position: relative; top: -6px;
    display: block; float: right; width: 210px; height: 16px;
    background: rgb(255,255,255);
    border-top: solid 2px rgb(102,102,102);
    border-left: solid 2px rgb(102,102,102);
    border-bottom: solid 2px rgb(204,204,204);
    border-right: solid 2px rgb(204,204,204);
}
#header-search INPUT {
    display: block;
    width: 206px; height: 14px;
    margin: 0px; padding: 0px; border: 0px;
    font-size: 10pt;
}

/* ======================= Nav-Bar (and menus) Strip =================== */
#navbar {
    position: relative;
    background: url("../images/navbar-bg.gif") repeat-x top left;
    width: 930px; height: 22px;
    font-size: 10pt;
    text-align: left;
}
#navbar A, #navbar A:visited {
    display: block; float: left;
    padding: 3px 20px 3px 20px;
    color: rgb(0,0,0);
    text-decoration: none;
}
#navbar DIV {
    float: left; height:20px;
}
#navbar DIV.DEBUG {
    height: 12px;
    margin-top: 4px;
    cursor: pointer;
    float: right;
    font-size: 8pt;
}
#navbar A:hover, #navbar A.menuhover {
    /* border-right: solid 1px rgb(200,200,200); */
    /* background-color: rgb(134,170,182); color: rgb(255,255,255); */
    /*background-color: rgb(118,172,182); /*color: rgb(0,0,0);*/
    background-color: rgb(204,255,255); /*color: rgb(0,0,0);*/
}
/*  I don't think the z-index is really needed in the "dropmenu" but
 *  it seems to make some sense, so I set it just in case it matters
 *  somewhere, or the page gets changed enough to make it necessary.
 */
.dropmenu {
    position: absolute; z-index: 10;
    background: rgb(180,228,228); color: black;
    border: solid 1px rgb(255,255,255);
    text-align: left;
    display: none;
}
.submenu {
    z-index: 12;
}
.dropmenu A, .dropmenu A:visited {
    display: block; height: 20px; padding: 0px; margin: 0px;
    background: transparent; color: rgb(0,0,0); text-decoration: none;
    cursor: pointer;
}
/*  This craziness of putting a <div> inside the <a> is because on IE,
 *  the "mouseover" and "mouseout" events occur only when you're truly
 *  over the text, not just inside the "box" defined by the <a>, even
 *  even though IE does do "hover" when the mouse is anywhere inside
 *  the <a>'s box.  So...
 *  to make the <a>'s entire box be the content of the <a> and still be
 *  able to have some white-space, we must put the <div> inside the <a>.
 *  This isn't necessary on Firefox, but it doesn't really hurt anything.
 *  Thus, any white-space manipulation MUST be done by using the <div>,
 *  and the <div>'s effective height and width ought to equal what's
 *  declared for the <a> to avoid those bad behaviors on IE.
 *  Ah, well...
 */
.dropmenu A DIV {
    height: 16px; padding: 2px 0px 2px 20px;
    white-space: nowrap; overflow: hidden;
}
.submenu A DIV {
    padding: 2px 0px 2px 8px;
}

.dropmenu A:hover, .dropmenu A.menuhover, .dropmenu DIV.menuhover {
    background-color: rgb(204,255,255); color: rgb(0,0,0);
}
/*  this <b> rule is just a trick to tack the sub-menu indicator onto
 *  those menu-items that have one.  Even though the indicator will
 *  appear AFTER the item, you must put the <b> BEFORE the item!!!
 */
.dropmenu A B { float: right; padding-right: 6px; }
/*
 * Following is positioning for the drop-down menus.  You probably
 * need to turn off "display:none" on the "dropdown" class rule, so
 * that you can see them if you're making layout changes.
 *
 * NOTE: the styling for the "category/sub-category" drop-down menus
 * is generated by the CatalogMenu object, and is defined by the
 * "menu" properties (menu.properties file in /config directory)
 */
#schedule-menu { width: 150px; top: 105px; left: 183px; }
#schedule-menu A DIV { width: 130px; }

#quicklinks-menu { width: 210px; top: 105px; left: 481px; }
#quicklinks-menu A DIV { width: 190px; }


/* =========================== Bottom-Border Strip ===================== */
#page-bottom {
    position: relative;
    background: url("../images/bottom-std.jpg") bottom left;
    color: rgb(224,230,230);
    width: 965px; height: 81px;
}
#copyright {
    position: absolute; top: 26px; left: 400px;
    font-size: 8pt;
    width: 480px;
    text-align: right;
}
#bottom-nav {
    position: absolute; top: 26px; left: 50px;
    font-size: 8pt;
}
#bottom-nav A, #bottom-nav A:visited {
    color: rgb(224,230,230);
}
#bottom-nav A:hover {
    color: rgb(255,255,204);
}


/* ============================= Content Strip ========================= */
#content-container {
    background: rgb(173,220,220) url("../images/side-border.jpg") repeat-x bottom;
    width: 930px;
    clear: both;
}
#content {
    background: rgb(255,255,255);
    margin: 0px 4px;
    width: 922px;
    overflow: hidden;
}
#content-top-margin { height: 18px; }
#content-min-height { height: 460px; }
.one-sided {
    width: 918px;
}
.two-sided {
    width: 655px;
}
#main {			/* the left-hand side */
    font-family: Tahoma,Verdana,Arial,sans-serif; font-size: 10pt;
    background: transparent;
    text-align: left; vertical-align: top;
}
#divider {
    width: 7px;
    background: url("../images/vertline.gif") repeat-y center;
}
#rhs {		/* the right-hand side */
    font-family: Tahoma,Verdana,Arial,sans-serif; font-size: 10pt;
    width: 255px; background: transparent;
    text-align: center; vertical-align: top;
}
#rhs-bottom {	/* "can't find what you want" remark */
    width: 250px; height: 55px; background: transparent;
    font-family: Tahoma,Verdana,Arial,sans-serif; font-size: 10pt;
    text-align: center; vertical-align: bottom;
}

#main H1 {
    font-size: 11pt; font-weight: bold; color: rgb(0,102,102);
    margin: 18px 0px 12px 0px; text-align: left;
}
#main H2 {
    font-size: 10pt; font-weight: bold; color: rgb(0,153,153);
    margin: 12px 0px 8px 0px; text-align: left;
}
#rhs H1 {
    font-size: 10pt; font-weight: bold; color: rgb(0,102,102);
    margin: 4px 0px 4px 0px; text-align: center;
}
#rhs H2 {
    font-size: 10pt; font-weight: bold; color: rgb(0,153,153);
    margin: 4px 0px 4px 0px; text-align: center;
}

#main STRONG, #main B {
    font-size: 10pt; font-weight: bold; color: rgb(0,153,153);
}
#main .breadcrumbs {
    position: relative; top: -8px; left: -4px;
    font-size: 9pt; font-weight: normal; color: rgb(0,153,153);
}
#main .breadcrumbs A, #main .breadcrumbs A:visited {
    color: rgb(0,153,153);
    text-decoration: none;
}
#main .breadcrumbs A:hover {
    font-weight: normal; color: rgb(0,153,153);
    text-decoration: underline;
}

#category-list {
    padding-left: 10px;
}
#category-list A, #category-list A:visited {
    display: block; width: 276px; height: 24px; float: left;
    margin: 2px 20px 0px 0px;
    padding: 2px 0px 0px 12px;
    text-align: left;
    font-size: 11pt; color: rgb(0,153,153);
    text-decoration: none;
    white-space: nowrap;
}
A.category-item, A.category-item:visited {
    font-size: 11pt; color: rgb(0,153,153);
    text-decoration: none;
}
#category-list A:hover, A:hover.category-item {
    background: rgb(255,255,204);
}
/*  the width above is small enough that there will be two items
 *  per line.  When it wants one per line, the CategoryMenu puts
 *  this class on the <a>'s
 */
#category-list A.single {
    float: none !important;
}

.private-info {
    text-align: left;
    background: rgb(255,255,255);
    border: solid 1px rgb(214,238,238);
}
.private-info P {
    margin: 3px 0px 5px 0px;
    margin-left: 12pt; text-indent: -12pt;
}
.private-info H1 {
    text-align: left !important;
    font-size: 10pt; font-weight: bold; color: rgb(0,102,102);
    margin: 4px 0px 0px 0px;
}
.private-info .classif-list {
    padding: 0px;
    font-size: 8pt;
    white-space: nowrap;
}
#rhs .private-info {
    width: 230px;
    overflow: hidden;
    padding: 4px 0px 8px 4px;
}

/* ==================== Content GridBox Components ==================== */
.gridlist {
    font-family: Tahoma,Verdana,Arial,sans-serif; font-size: 10pt;
    border: solid 1px rgb(204,204,204);
}
.gridlist TR {
    font-size: 10pt;
    text-align: left;
}
.gridlist TR.lightbg {
    background-color: rgb(255,255,255); color: rgb(0,0,0);
}
.gridlist TR.darkbg {
    background-color: rgb(239,245,246); color: rgb(0,0,0);
}
.gridlist TH {
    height: 20px;
    font-size: 10pt; font-weight: normal; text-align: center !important;
    background-color: rgb(102,153,153); color: rgb(255,255,255);
    border-right: solid 1px rgb(255,255,255);
    margin: 0px !important;
}
.gridlist TH.last { border-right: 0px; }
.gridlist TR.hovering { /* hover via JS since IE won't do TR:hover by CSS */
    background-color: rgb(255,255,204);
}
.hovering TD {  /* when doing JS hovering, make the cursor look right */
    cursor: pointer;
}
.gridlist TD {
}
.gridlist TD DIV {
    height: 20px;
    padding: 1px 0px 0px 5px;
    text-align: left;
    overflow:hidden; white-space:nowrap;
}
.gridlist A DIV, .gridlist A:visited DIV {
    color: rgb(0,0,255);
    text-decoration: underline;
    cursor: pointer;
}
/* if "price" is included in the grid, then you probably need to take
 * some pixels off of the others, or remove "details".
 */
.gridlist .code { width:66px; }
.gridlist .title { width:320px; }
.gridlist .duration { width:70px; text-align:center; padding-left:0px; }
.gridlist .level { width:50px; text-align:center; padding-left:0px; }
.gridlist .price { width:40px; text-align:right; padding-right:5px; padding-left:0px; }
.gridlist .startdate { width:76px; text-align:right; padding-right:5px; padding-left:0px; }
.gridlist .location { width:120px; }
.gridlist .details { width:56px; text-align:center; padding-left:0px; }
.gridlist .signup { width:56px; text-align:center; padding-left:0px; }




/* ======================= RHS GridBox Components ==================== */

.rhslist {
    width: 232px;
    font-family: Tahoma,Verdana,Arial,sans-serif; font-size: 10pt;
    border-bottom: solid 1px rgb(214,238,238);
}
.rhslist TR {
    font-size: 9pt;
    text-align: left;
    border: solid 1px rgb(214,238,238);
    background: url("../images/rhs-menu-item-bg.jpg") left bottom repeat-x;
}
.rhslist TR.heading {
    border: 0px !important;
    background: url("../images/rhs-menu-top.jpg") left top no-repeat;
}
.rhslist TH {
    height: 22px;
    font-size: 10pt; font-weight: bold; text-align: center !important;
    color: rgb(153,182,182);
}
.rhslist TD {
    /*  for some reason <tr> side borders aren't working, so this does
        the job, but then requires "first" and/or "last" on some cells
	to avoid vertical lines if there's more than one cell in a row */
    border-right: solid 1px rgb(214,238,238);
    border-left: solid 1px rgb(214,238,238);
}
.rhslist TD.first {
    border-right: 0px !important;
}
.rhslist TD.last {
    border-left: 0px !important;
}
.rhslist TR.hovering { /* when doing JS hovering, make the cursor look right */
    cursor: pointer;
    background: rgb(255,255,204);
    background-image: none;
}
.rhslist TD DIV {
    border: 0px; padding: 2px 0px 0px 5px;
    height: 20px;
    text-align: left;
    overflow:hidden; white-space:nowrap;
}
.rhslist TD DIV.message {
    margin: 8px !important;
    height: auto !important;
    white-space: normal !important;
}
.rhslist A, .rhslist A:visited {
    color: rgb(102,153,153);
    text-decoration: none;
    cursor: pointer;
}
.rhslist A:hover {
    background: rgb(255,255,204);
}
.rhslist TD DIV:hover {  /* no effect on IE, but makes up for the fact that
		        something about the styling here is keeping A:hover
			from working on FF (a bug?) */
    background: rgb(255,255,204);
}
/* 
A.nohijack:hover {
    font-weight: bold;
}
*/
.rhslist .fullwidth { width: 226px; }
.rhslist .startdate { width:70px; text-align:right; padding-right:5px; }
.rhslist .location { width:144px; }
.rhslist .title { width: 226px; }



/* ======================= LightBox Form Components ==================== */
.formbox {
    margin: 20px;
    text-align:left;
}
.formbox H1 {
    text-align: center !important;
}
.formbox P { margin: 8px 0px 4px 0px; color: rgb(51,102,102); }
.formbox FORM { margin: 0px 0px 0px 0px; }
.formbox TH { text-align: right; padding: 0px 8px 0px 20px; color: rgb(51,102,102); }
.formbox INPUT { font-size: 10pt; margin-bottom: 2pt; }
.formbox INPUT.invalid { border: solid rgb(255,0,0) 1px; }
.formbox TEXTAREA { font-family: Tahoma,Verdana,Arial,sans-serif; font-size: 10pt; }
#describe-course BUTTON {
    font-size: 10pt; position: relative; top: -16px;
}
.question {
    padding-left: 20px;
    padding-top: 12px;
}
.question SPAN {
    font-weight: bold;
    color: rgb(51,102,102);
}
.question A, .question A:visited {
    color: rgb(0,153,153);
    margin-left: 18px;
}
.question INPUT {
    margin-left: 16px;
}
.question TEXTAREA {
    margin-left: 20px;
}

.sales-notes {
    margin-top: 50px;
    font-size: 10pt; font-weight: bold; font-style:italic;
    width: 82%; margin-left: 10%; color: rgb(0,153,153);
}
.sales-notes P {
    margin-top: 18px !important;
}




.ToolTip {
    display: none;
    font-family: Tahoma,Arial,sans-serif; font-size: 10pt;
    margin: 8px; padding: 8px;
    background-color: rgb(255,255,204); color: rgb(0,0,0);
    border: solid 1px rgb(200,200,200);
    text-align: left;
    z-index: 10;
}


/* ========================== For embedded data ====================== */
.data { display:none; }