/******************************************************
  This stylesheet holds all styles related to page
  navigation, including header logo, tabs, dropdown
  menus; any dropdown <select> lists with links to
  related pages; and the page footer.
*/

/* STYLES RELATED TO PAGE HEADER */

/* Logo, tabs, secondary links and dropdown menus at
   top of page all contained within this <div> */
div#PageHeader {
  width: 725px;
}

/* Styles for rollover navigation tabs at top of page */
#MatrixHeaderTabs {
  float: left;
  margin-left: 0px;
  background: #F6ECFD;
  font: bold 12px Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

#MatrixHeaderTabs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#MatrixHeaderTabs li {
  display: inline;
  margin:  0;
  padding: 0;
}

#MatrixHeaderTabs a {
  float: left;
  background: url( /shared/labels/MetalTab_Left.png ) no-repeat top left;
  margin:  0px;
  padding: 0px;
  height: 27px;
  text-decoration: none;
  outline: none;
}

#MatrixHeaderTabs a span {
  float: left;
  display: block;
  background: url( /shared/labels/MetalTab_Right.png ) no-repeat top right;
  /* padding: 5px 13px 4px 4px; */
  margin-left: 10px;
  padding: 5px 0px 4px 4px;
  text-align: left;
  color: #7A7A7A;
}

/* This not used. Designed for browser detection, but not needed now. */
#MatrixHeaderTabs li.AdjHdr a span {
  float: left;
  display: block;
  background: url( /shared/labels/MetalTab_Right.png ) no-repeat top right;
  padding: 5px 12px 4px 4px;   /* was 5px 13px 4px 4px; */
  color: #7A7A7A;
}

/* Small hack for IE5-Mac \*/
#MatrixHeaderTabs a span {
  float: none;
}
/* End IE5-Mac hack */

#MatrixHeaderTabs a:hover span {
  color: #005C5C;
  /* background-position: 100% -27px; */
}

#MatrixHeaderTabs a:hover {
  /* background-position: 0% -27px; */
}

#MatrixHeaderTabs #current a {
  background-position: 0% -27px;
}

#MatrixHeaderTabs #current a span {
  background-position: 100% -27px;
  color: #005C5C;
}

/* Used to clear after floats */
.clear {
  clear: left;
}

/* This used for secondary navigation links below main top nav tabs */
.NavBarBackground {
  position: relative;
  text-align: center;
  vertical-align: middle;
  height:  20px;
  width:  725px;
  padding:  0px;
  z-index: 5;
}

.NavBarLeft {
  position: absolute;
  vertical-align: middle;
  background: url(/shared/labels/NavBarLeft.png) no-repeat top left;
  left: 0px;
  top:  0px;
  height: 20px;
  width:  10px;
  padding: 0px;
}

.NavBarRight {
  position: absolute;
  text-align: center;
  vertical-align: middle;
  background: url(/shared/labels/NavBarRight.png) no-repeat top right;
  left: 10px;
  top: 0px;
  height:  20px;
  width:  715px;
  padding:  0px;
}

a.altTopNavBar {
  font-family: Arial, Helvetica, sans-serif;
  color: #FDFDFD;
  font-size: 12px;
  font-weight: bolder;
  text-decoration: none;
  margin-top: 10px;
}

a.altTopNavBar:hover, a.altTopNavBar:focus, a.altTopNavBar:active {
  font-family: Arial, Helvetica, sans-serif;
  color: #006363;
  font-size: 12px;
  font-weight: bolder;
  text-decoration: none;
  margin-top: 10px;
}

a.topNavBar {
  font-family: Arial, Helvetica, sans-serif;
  color: #006363;
  font-size: 12px;
  font-weight: bolder;
  text-decoration: none;
  margin-top: 10px;
}

a.topNavBar:hover, a.topNavBar:focus, a.topNavBar:active {
  font-family: Arial, Helvetica, sans-serif;
  color: #006363;
  font-size: 12px;
  font-weight: bolder;
  text-decoration: none;
  margin-top: 10px;
}

.TopNavBarTitle {
  color: #005C5C;
  font-size: 12px;
  font-weight: bolder;
  text-decoration: none;
  margin-top: 10px;
}

/* Styles for dropdown menu listings at top of page */
/* NOTE: JavaScript required for IE 6 and below; others implement :hover pseudo-class */
#MatrixHeaderDropdowns, #MatrixHeaderDropdowns ul {
  padding: 0;
  margin:  0;
  list-style: none;
  font-size: 12px;
}

#MatrixHeaderDropdowns a {
  text-decoration: none;
}

/* These are links in drop down area. Subcategory links are indented. */
#MatrixHeaderDropdowns a.topCat, #MatrixHeaderDropdowns a.subCat {
  display: block;
  width: 203px;
  margin: 3px;
  padding: 3px 5px 3px 5px;
  border: 1px solid #EEEFEF;
}

#MatrixHeaderDropdowns a.subCat {
  width: 193px;
  padding: 3px 5px 3px 15px;
}

#MatrixHeaderDropdowns a.topCat:hover, #MatrixHeaderDropdowns a.subCat:hover {
  background-color: #C9DECE;
  border: 1px solid #005C5C;
  text-decoration: none;
}

/* Note: If change font-size, will have to adjust number of hyphens in XSL file. */
#MatrixHeaderDropdowns li.spacer {
  padding: 1px 5px 1px 19px;
  font-size: 8px;
  line-height: 8px;
}

#MatrixHeaderDropdowns li {
  float: left;
  text-align: left;
  line-height: 14px;
}

/* These are the main links across the top of the NavBar */
#MatrixHeaderDropdowns li.mainCat {
  font-weight: bold;
  padding: 0px 8px 0px 8px;
  border: none;
  margin-top: -1px;  /* This helps to align dropdown area */
  line-height: 20px;  /* This helps to align dropdown area */
}

#MatrixHeaderDropdowns li.mainCat:hover {
  padding: 0px 8px 0px 8px;
  border: none;
  background-color: transparent;
}

/* This is drop down area with links. It is invisible off to the left to begin. */
#MatrixHeaderDropdowns li ul {
  position: absolute;
  left: -999em;
  width: 220px;
  padding: 3px 3px 3px 3px;
  background-color: #EEEFEF;
  border: 1px solid #005C5C;
}

#MatrixHeaderDropdowns li:hover ul, #MatrixHeaderDropdowns li.sfhover ul {
  z-index: 5;
  left: auto;
}

/* This is used for images of flags on many navigation links. */
.FlagIcon {
  width: 16px;
  height: 11px;
  border: none;
  margin-right: 5px;
  vertical-align: middle; /* This looks OK in IE, but off a little in Firefox */
}

/* END of styles related to page header */


/* STYLES RELATED TO SELECT LISTS FOR LINKS TO RELATED PAGES */

/* This used on all pages that include drop-down navigation list. */
.NavListArea {
  margin-left: 10px;
  width: 700px;
  height: 60px;
  position:relative;  /* This is needed to keep absolutely positioned components in div aligned. */
}

/* Used by drop-down navigation lists */
.SelectList {
  font-family: Arial,Helvetica;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  line-height: 16px;
  color: #005C5C;
  background-color: #FFFFFF;
}


/* STYLES RELATED TO PAGE FOOTER */

/* This used for navigation links at the bottom of the pages */
.navbar {
  font-family: Arial,Helvetica;
  font-weight: normal;
  color: #666666;
  font-size: 14px;
  font-style: normal;
  line-height: 16px;
  text-align: center;
  margin-left:  auto;
  margin-right: auto;
  width: 720px;
}

/* Styles used for bottom navigation table and links */
a.navlink {
  color: #666666;
  text-decoration: none;
}

a.navlink:hover, a.navlink:focus {
  color: #005C5C;
  text-decoration: underline;
}

a.navlink:active {
  color: #005C5C;
  text-decoration: underline;
}

/* This adds hidden links on Continent pages to assist search engines.  Color should be
  same as background color of PageArea  */
a.ContLinks, a.ContLinks:hover, a.ContLinks:focus, a.ContLinks:active {
  font-family: Arial,Helvetica;
  font-size: 8px;
  font-weight: normal;
  font-style: normal;
  line-height: 8px;
  text-decoration: none;
  color: #FFFFFF;
}


/* MISCELLANEOUS STYLES */

/* Links at top of VisualSiteMap and similar pages */
.mapNavLinks {
  color: #FDFDFD;
  margin-left: 12px;
  text-decoration: none;
}

.mapNavLinks:hover, .mapNavLinks:active, .mapNavLinks:focus {
  color: #005C5C;
  margin-left: 12px;
  text-decoration: none;
}