
/* Styles for key template components */

body             { background-color: #9A9B9C; } /* Page background */
.pageContent     { background-color: #FFFFFF; } /* Main content area on each page */
.pageTabs        { background-color: #BED600; background-image: url(Tabs/TabBackground.png); background-repeat: repeat-x; }
.pageHeader      { background-color: #BED600; }

td.pageCapTopLeft     { background-color: #FFFFFF; background-image: url(PageCornerUL.gif); background-repeat: no-repeat; background-position: top left; }
td.pageCapTop         { background-color: #FFFFFF; }
td.pageCapTopRight    { background-color: #FFFFFF; background-image: url(PageCornerUR.gif); background-repeat: no-repeat; background-position: top right; }
td.pageCapBottomLeft  { background-color: #F1F6CD; background-image: url(PageCornerLL.gif); background-repeat: no-repeat; background-position: top left; }
td.pageCapBottom      { background-color: #F1F6CD; }
td.pageCapBottomRight { background-color: #F1F6CD; background-image: url(PageCornerLR.gif); background-repeat: no-repeat; background-position: top right; }

.tagLineLeft      { background-image: url(DeliveringNextGenerationCareBackground-Left.png); background-repeat: no-repeat; }
.tagLineText      { background-image: url(DeliveringNextGenerationCareBackground-Middle.png); background-repeat: repeat-x; font-family: Helvetica, Arial, Sans-Serif; font-size: 16px; color: #CA005D; font-weight: bold; }
.tagLineSearch    { background-image: url(DeliveringNextGenerationCareBackground-Middle.png); background-repeat: repeat-x; }
.tagLineSearchBoxBlur  { font-size: 11px; color: #C0C0C0; font-style: italic; background: #FFFFFF url(google_custom_search_watermark.gif) no-repeat left; border: 1px solid #A5ACB2; height: 15px; }
.tagLineSearchBoxFocus { font-size: 11px; color: #202020; font-style: normal; background-color: #FFFFFF; border: 1px solid #A5ACB2; height: 15px; }

.pageQuickLinks     { background-color: #F1F6CD; text-align: center; vertical-align: middle; }
td.quickLinkHeading { font-weight: bold; font-size: 16px; }
td.quickLink        { border-top: 1px solid #F1F6CD; }

.pageFooterCap { width: 100%; height: 3px; border-bottom: 3px solid #F1F6CD; margin-bottom: 2px; margin-top: 4px; overflow: hidden; }

/* Create a default typeface and point size across common container elements */

.bodySmall  { font-family: Helvetica, Arial, Sans-Serif; font-size: 10px; color: #202020; } /* Deprecated */
.bodyNormal { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; color: #202020; } /* Deprecated */
body        { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; color: #202020; }
td          { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; color: #202020; text-align: left; vertical-align: top; }
div         { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; color: #202020; }
span        { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; color: #202020; }
input       { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; color: #202020; }
button      { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; color: #202020; }
textarea    { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; color: #202020; }
select      { font-family: Helvetica, Arial, Sans-Serif; font-size: 12px; color: #202020; }



/* TODO */

img { border: 0px none; }

ul.boxlist { margin: 3px 15px 0px 15px; }

.olsonArticleDate     { font-family: Times; font-size: 12px; font-weight: 100; color: #202020; font-style: italic; }

.olsonHorizontalRule { margin-top: 15px; margin-bottom: 15px; }

input.signUpForm { font-size: 11px; color: #C0C0C0; }
input.signUpFormFocus { font-size: 11px; color: #202020; }


/* Utility classes */

.fullWidth { width: 100%; }
.center { text-align: center; }
.centered { text-align: center; }
.vMiddle { vertical-align: middle; }
.vCenter { vertical-align: middle; }
.vTop { vertical-align: top; }
.vBottom { vertical-align: bottom; }
.right { text-align: right; }
.hidden { display: none; }
.bold { font-weight: bold; }



/* Slideshow */

.slideShowOuterContainer { overflow: hidden; margin: 0px; padding: 0px; }
.slideShowContainer      { overflow: hidden; margin: 0px; padding: 0px; position: relative; }
.slideShowSlide    { position: absolute; left: 0px; top: 0px; overflow: hidden; text-align: center; vertical-align: middle; display: none; background-color: #BED600; }
.slideShowControls { position: absolute; left: 0px; top: 0px; overflow: hidden; text-align: center; vertical-align: middle; }
.slideShowButton   { font-size: 16px; font-weight: bold; color: #E0E0E0; width: 21px; height: 21px; padding-top: 1px; vertical-align: middle; text-align: center; background-repeat: no-repeat; background-image: url(SlideShow-Button.png); cursor: pointer; }
.slideShowButtonHover         { color: #FFFFFF; background-image: url(SlideShow-Button_Selected.png); text-decoration: underline; }
.slideShowSlideButtonSelected { color: #FFFFFF; background-image: url(SlideShow-Button_Selected.png); }
.slideShowSlidePause { background-image: url(SlideShow-Pause.png); }
.slideShowSlidePlay  { background-image: url(SlideShow-Play.png); }



/* Pre-load colors for blocks with dynamically generated backgrounds */

.olsonBgShadedLight    { background-color: #F1F6CD; }
.olsonBgShadedDark     { background-color: #BED600; }
.olsonBgGradientBlock  { background-color: #BED600; background-repeat: repeat-x; }
.olsonBgGradientBubble { background-color: #F1F6CD; background-repeat: repeat-x; }
.olsonBgGradientAlert  {} /* This is simply a "CSS selector helper" for background-shaded blocks, used by client-side script after the page is loaded to install custom-sized dynamic background images */
.olsonShadedBlock      {} /* This is simply a "CSS selector helper" for background-shaded blocks, targeted by CSS selectors elsewhere in this style sheet. */



/* Link styles for everything but heading links */

a                                        { font-weight: normal; color: #4C5CC5; text-decoration: underline; }
a span                                   { font-weight: normal; color: #4C5CC5; text-decoration: underline; }
a:hover                                  { font-weight: normal; color: #CA005D; text-decoration: underline; }
a:hover span                             { font-weight: normal; color: #CA005D; text-decoration: underline; }
a.olsonLink                              { font-weight: bold;   color: #4C5CC5; text-decoration: none; }
a.olsonLink span                         { font-weight: bold;   color: #4C5CC5; text-decoration: none; }
a.olsonLink:hover                        { font-weight: bold;   color: #CA005D; text-decoration: underline; }
a.olsonLink:hover span                   { font-weight: bold;   color: #CA005D; text-decoration: underline; }
.olsonShadedBlock a.olsonLink            { font-weight: bold;   color: #465000; text-decoration: none; }
.olsonShadedBlock a.olsonLink span       { font-weight: bold;   color: #465000; text-decoration: none; }
.olsonShadedBlock a.olsonLink:hover      { font-weight: bold;   color: #CA005D; text-decoration: underline; }
.olsonShadedBlock a.olsonLink:hover span { font-weight: bold;   color: #CA005D; text-decoration: underline; }
.olsonShadedBlock a                      { font-weight: bold;   color: #465000; text-decoration: underline; }
.olsonShadedBlock a span                 { font-weight: bold;   color: #465000; text-decoration: underline; }
.olsonShadedBlock a:hover                { font-weight: bold;   color: #CA005D; text-decoration: underline; }
.olsonShadedBlock a:hover span           { font-weight: bold;   color: #CA005D; text-decoration: underline; }
a.javascriptLink                         { font-weight: bold;   color: #4C5CC5; text-decoration: none; cursor: pointer; }
a.javascriptLink:hover                   { font-weight: bold;   color: #CA005D; text-decoration: underline; }

a.auxNavLink       { font-size: 12px; color: #808080; font-weight: bold; text-decoration: none; }
a.auxNavLink:hover { font-size: 12px; color: #CA005D; font-weight: bold; text-decoration: underline; }
.auxNavSeparator   { color: #C0C0C0; margin: 0px 6px 0px 6px; }

a.pdfLink          { font-size: 12px; font-weight: 900; color: #4C5CC5; text-decoration: none; }
a.pdfLink:hover    { font-size: 12px; font-weight: 900; color: #CA005D; text-decoration: underline; }

.pageFooter            { font-size: 10px; color: #9A9B9C; background-color: #F1F6CD; }
a.pageFooterLink       { font-size: 10px; font-weight: 900; color: #A4A4A4; text-decoration: underline; }
a.pageFooterLink:hover { font-size: 10px; font-weight: 900; color: #5E5E5E; text-decoration: underline; }



/******************************************************************************/

/* Headings */

/*
//  Heading styles for <h1> - <h6> with link and hover styles, including color overrides for blocks with shaded backgrounds.
//  NOTES:
//      + Styles described here are for both heading text and the accompanying round arrow buttons. Some styles are specific to the text, and others specific to the buttons.
//      + For .hxButton styles, top margins are for buttonAlign=right (buttons are in their own table column below a 5px spacer image), and bottom margins are for buttonAlign=none (buttons are sitting on heading text baselines).
//      + span.hxButton and 'Print' styles represent adjustments specific to IE5/IE6 since button images are rendered using span tags instead of img tags, and those span tags align with text baselines slightly different. The 'Print' styles compensate for issues around printing transparent PNG's within IE5/IE6.
*/

h1.headerText     { font-size: 24px; font-weight: 400; color: #FFFFFF; font-style: normal; } /* Special style for use in header banners */
h2.headerSubText  { font-size: 16px; font-weight: 400; color: #FFFFFF; font-style: normal; } /* Special style for use in header banners */

h1              { font-weight: 400; color: #202020; font-size: 18px; margin-top: 10px; margin-bottom: 5px; }
.h1Button       { margin-top: 8px; margin-bottom: -1px; }
a.olsonH1       { font-weight: 400; color: #202020; text-decoration: none; }
a.olsonH1:hover { font-weight: 400; color: #CA005D; text-decoration: underline; }
.olsonShadedBlock h1              { color: #202020; }
.olsonShadedBlock a.olsonH1       { color: #202020; }
.olsonShadedBlock a.olsonH1:hover { color: #CA005D; }

h2              { font-weight: 800; color: #202020; font-size: 16px; margin-top: 10px; margin-bottom: 5px; font-style: italic; }
.h2Button       { margin-top: 7px; margin-bottom: -1px; }
a.olsonH2       { font-weight: 800; color: #202020; text-decoration: none; }
a.olsonH2:hover { font-weight: 800; color: #CA005D; text-decoration: underline; }
.olsonShadedBlock h2              { color: #202020; }
.olsonShadedBlock a.olsonH2       { color: #202020; }
.olsonShadedBlock a.olsonH2:hover { color: #CA005D; }

h3              { font-weight: 800; color: #202020; font-size: 14px; margin-top: 9px; margin-bottom: 4px; }
.h3Button       { margin-top: 4px; margin-bottom: -2px; }
a.olsonH3       { font-weight: 800; color: #202020; text-decoration: none; }
a.olsonH3:hover { font-weight: 800; color: #CA005D; text-decoration: underline; }
.olsonShadedBlock h3              { color: #202020; }
.olsonShadedBlock a.olsonH3       { color: #202020; }
.olsonShadedBlock a.olsonH3:hover { color: #CA005D; }

h4              { font-weight: 800; color: #202020; font-size: 14px; margin-top: 9px; margin-bottom: 4px; font-family: Times; }
.h4Button       { margin-top: 5px; margin-bottom: -2px; }
a.olsonH4       { font-weight: 800; color: #202020; text-decoration: none; }
a.olsonH4:hover { font-weight: 800; color: #CA005D; text-decoration: underline; }
.olsonShadedBlock h4              { color: #202020; }
.olsonShadedBlock a.olsonH4       { color: #202020; }
.olsonShadedBlock a.olsonH4:hover { color: #CA005D; }

h5              { font-weight: 800; color: #202020; font-size: 13px; margin-top: 8px; margin-bottom: 2px; font-family: Times; font-style: italic; }
.h5Button       { margin-top: 3px; margin-bottom: -3px; }
a.olsonH5       { font-weight: 800; color: #202020; text-decoration: none; }
a.olsonH5:hover { font-weight: 800; color: #CA005D; text-decoration: underline; }
.olsonShadedBlock h5              { color: #202020; }
.olsonShadedBlock a.olsonH5       { color: #202020; }
.olsonShadedBlock a.olsonH5:hover { color: #CA005D; }

h6              { font-weight: 800; color: #202020; font-size: 12px; margin-top: 8px; margin-bottom: 2px; font-family: Times; }
.h6Button       { margin-top: 3px; margin-bottom: -3px; }
a.olsonH6       { font-weight: 800; color: #202020; text-decoration: none; }
a.olsonH6:hover { font-weight: 800; color: #CA005D; text-decoration: underline; }
.olsonShadedBlock h6              { color: #202020; }
.olsonShadedBlock a.olsonH6       { color: #202020; }
.olsonShadedBlock a.olsonH6:hover { color: #CA005D; }



/******************************************************************************/

/* Tab Menus */

/* CSS/JavaScript menu system based on "Son of Suckerfish" by Patrick Griffiths and Dan Webb at http://htmldog.com/articles/suckerfish/dropdowns */
/* Heavily refactored/modified/updated by Steve Eidemiller for http://www.childrensmn.org */

/* Common treatment for the left/right background images on each edge of a tab */
#chcMainMenu td.tabSide { background-repeat: no-repeat; }

/* Left/Right background images used on each edge of a tab. The naming convention indicates whether the left or right tab (from the perspective of a tab edge/divider) */
/* is highlighted (Selected), not highlighted (Unselected), or at either end of the tab row (End). NOTE: Image paths are, of course, relative to this .css file. */
#chcMainMenu td.tabLeftEndSelected           { background-image: url(Tabs/TabLeft-End-Selected.png); }
#chcMainMenu td.tabLeftEndUnselected         { background-image: url(Tabs/TabLeft-End-Unselected.png); }
#chcMainMenu td.tabLeftSelectedUnselected    { background-image: url(Tabs/TabLeft-Selected-Unselected.png); }
#chcMainMenu td.tabLeftUnselectedSelected    { background-image: url(Tabs/TabLeft-Unselected-Selected.png); }
#chcMainMenu td.tabLeftUnselectedUnselected  { background-image: url(Tabs/TabLeft-Unselected-Unselected.png); }
#chcMainMenu td.tabRightSelectedEnd          { background-image: url(Tabs/TabRight-Selected-End.png); }
#chcMainMenu td.tabRightUnselectedEnd        { background-image: url(Tabs/TabRight-Unselected-End.png); }
#chcMainMenu td.tabRightSelectedUnselected   { background-image: url(Tabs/TabRight-Selected-Unselected.png); }
#chcMainMenu td.tabRightUnselectedSelected   { background-image: url(Tabs/TabRight-Unselected-Selected.png); }
#chcMainMenu td.tabRightUnselectedUnselected { background-image: url(Tabs/TabRight-Unselected-Unselected.png); }

/* Common treatment for the body of a tab, where its caption/link is displayed */
#chcMainMenu td.tabBody
{
	text-align: center;
	vertical-align: bottom;
	background-repeat: repeat-x;
}

/* Body/Caption background images for highlighted (Selected) or not highlighted (Unselected) tabs */
#chcMainMenu td.tabBodySelected   { background-image: url(Tabs/TabMiddle-Selected.png); }
#chcMainMenu td.tabBodyUnselected { background-image: url(Tabs/TabMiddle-Unselected.png); }

/* All menus */
#chcMainMenu ul
{
	padding: 0px;
	margin: 0px;
	list-style: none;
	line-height: 20px;
}

/* All menu items */
#chcMainMenu li
{
	float: left;
	width: 200px; /* Width is needed for Opera */
}

/* Last menu item within each menu (not used on the tab row itself) */
#chcMainMenu li.bottomMenuItem
{
	border-bottom: 1px solid #D8DCE0;
}

/* Tab row links */
#chcMainMenu a.tabLink
{
	display: block;
	height: 20px;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
	color: #404040;
}
#chcMainMenu a.tabLink:hover
{
	text-decoration: underline;
	color: #CA005D;
}

/* Second-level menus */
#chcMainMenu li ul
{
	position: absolute;
	width: 200px;
	left: -999em; /* Using "left" instead of "display: none" to hide menus because "display: none" isn't read by screen readers */
	z-index: 9999;
	background-color: #EAECEE;
}

/* Second-level-and-above menu links */
#chcMainMenu ul ul a
{
	display: block;
	width: 180px;
	margin-left: 5px;
	font-size: 12px;
	font-weight: normal;
	text-decoration: none;
	color: #404040;
}
#chcMainMenu ul ul a:hover
{
	text-decoration: underline;
	color: #CA005D;
}

/* Third-level-and-above menus */
#chcMainMenu li ul ul
{
	margin-top: -20px;
	margin-left: 200px;
	background-color: #EAECEE;
}

/* Menus nested two levels under hovered menu items (NOTE_A: This style MUST come before NOTE_B) */
#chcMainMenu li.menuHover ul ul
{
	left: -999em;
}

/* Menus nested under hovered menu items (NOTE_B: This style MUST come after NOTE_A) */
#chcMainMenu li.menuHover ul,
#chcMainMenu li li.menuHover ul
{
	left: auto;
}

/* Background images for second-level-and-above menu items */
#chcMainMenu li.bgNoSubmenu         { background-image: url(Tabs/MenuBackground.png); }
#chcMainMenu li.bgNoSubmenu:hover   { background-image: url(Tabs/MenuBackground-Hover.png); }
#chcMainMenu li.bgWithSubmenu       { background-image: url(Tabs/MenuBackground-WithSubmenu.png); }
#chcMainMenu li.bgWithSubmenu:hover { background-image: url(Tabs/MenuBackground-WithSubmenu-Hover.png); }



/******************************************************************************/

/* Polls */
.pollTitle              { font-size: 12px; font-weight: bold; }
.pollDates              { font-size: 11px; font-style: italic; }
.pollQuestionText       { font-size: 12px; font-weight: bold; }
.pollChoiceText         { font-size: 11px; line-height: 14px; }
.pollChoicePercentages  { font-size: 11px; }
.pollChoiceVotes        { font-size: 11px; }
.pollTotalVotes         { font-size: 11px; }
.pollViewStandings      { font-size: 11px; }



/******************************************************************************/

/* Legacy b-swing styles converted to the Olson styles - these should be converted to the <h1> - <h6> equivalents */
.bodyHeading1 { font-weight: 400; font-size: 18px; margin-top: 10px; margin-bottom: 5px; }
.bodyHeading2 { font-weight: 800; font-size: 16px; margin-top: 10px; margin-bottom: 5px; font-style: italic; }
