/* Link to this style sheet after linking to the base style-sheets
 * (layout, main-menu, sub-menus).
 */

/* ========== main colors. ========== */
body {
  background: #AAF;
	color: #052;
}

a {
	color: #073;
}

/* ========== page layout ========== */
#container {
  background: #173024 url('../images/dark-green-gradient.png') repeat-x; /*#1F3328*/
}
#banner {
  background: transparent;
}
#navigation {
  background: transparent;
}
#subNavigation {
  background: transparent;
}
.narrowColumn {
  background: transparent;
}
#footer {
  background: transparent;
}
#content{
	vertical-align: top;
	padding: 1px 10px 1px 10px; /* T & B >0, so parent color not seen in first/last child margins. */
  background: #CCFFFF;/* url('../images/lt-aqua-gradient.png') repeat-x bottom;*/
	color: #040;
}

/* ========== main menu ========== */
.mainMenu a {
	/*background: #DFF;*/
  background: #8FCCCC url('../images/lt-aqua-button-gradient.png') repeat-x; /*#8FCCCC*/
	color: #052;
}
.mainMenu a:hover {
	background: #4AA;
	color: #DFF;
}
.mainMenu a:focus {
	background: #4AA; /* TAB ACCESSIBILITY */
	color: #DFF;
}
.mainMenu a:active {
	background: #4AA; /* IE- TAB ACCESSIBILITY */
	color: #DFF;
}
.mainMenu .currentPageMenuItem a {
	background: #255 none;
	color: #BDD;
}

/* ========== sub-menu ========== */
.subMenu {
	background: transparent;
}
.subMenu a {
	/*background: #DFF;*/
  background: #8FCCCC url('../images/lt-aqua-button-gradient.png') repeat-x; /*#8FCCCC*/
	color: #052;
}
.subMenu a:hover {
	background: #4AA none;
	color: #DFF;
}
.subMenu a:focus {
	background: #4AA; /* TAB ACCESSIBILITY */
	color: #DFF;
}
.subMenu a:active {
	background: #4AA; /* IE- TAB ACCESSIBILITY */
	color: #DFF;
}
.subMenu .currentPageMenuItem a {
	background: #255 none;
	color: #BDD;
}


/* ========== drop menu ========== */
/* TBD: merge the drop-menu and other sub-menu approaches.
 * TBD: for row+column, does this mean including nested list twice?
 */
.menu a {
  background: #8FCCCC url('../images/lt-aqua-button-gradient.png') repeat-x; /*#8FCCCC*/
	color: #052;
}
.menu a:hover {
	background: #4AA;
	color: #DFF;
}
.menu a:focus {
	background: #4AA; /* TAB ACCESSIBILITY */
	color: #DFF;
}
.menu a:active {
	background: #4AA; /* IE- TAB ACCESSIBILITY */
	color: #DFF;
}

.menu li.currentPageMenuItem a {
	background: #255;
	color: #BDD;
}


/* ----- Sub-menu (second level) ----- */
.menu li ul {
	background: #4AA;
}
.menu li ul li {
	background: #4AA; /* Firefox [main ul doesn't extend width of li] */
}

/* Revert submenu back to un-hovered colors. */
.menu li.currentPageMenuItem ul a { /* Firefox: for current-color column. */
  background: #8FCCCC url('../images/lt-aqua-button-gradient.png') repeat-x; /*#8FCCCC*/
	color: #052;
}
.menu li.hoverme ul a {
  background: #8FCCCC url('../images/lt-aqua-button-gradient.png') repeat-x; /*#8FCCCC*/
	color: #052;
}

/* Hover sub-menu item. (override the above revert rules). */
.menu li ul a:hover {
	background: #4AA;
	color: #DFF;
}
.menu li ul a:focus { /* Firefox: TAB ACCESSIBILITY */
	background: #4AA;
	color: #DFF;
}
.menu li ul a:active { /* IE: TAB ACCESSIBILITY */
	background: #4AA;
	color: #DFF;
}

/* Finally, Re-Revert sub-menu current item. */
.menu li ul .currentPageMenuItem a {
	background: #255;
	color: #BDD;
}

/* ----- If third level, need more rules ----- */