/* Horizontal Navigation Menu for WAI Site

   Copyright © 2006-2011 W3C ® (MIT, ERCIM, Keio). All Rights Reserved.
   See http://www.w3.org/Consortium/Legal/ipr-notice.html#Copyright

   Version: 1.5, 25 March 2011

   Editor: Bert Bos, Shadi Abou-Zahra
   Contributors: Shawn Henry

   Usage:

   1) Include the style sheets:

     <link rel="stylesheet" href="hMenu.css" type="text/css" />
     <!--[if lte IE 7]><link href="hMenuIE7.css" rel="stylesheet"
       type="text/css" /><![endif]-->

   2) Use one of the following for the menu:

     <ul class="hmenu">... a small number of short items...</ul>
     <ul class="hmenu2">... exactly 2 short items... </ul>
     <ul class="hmenu3">... exactly 3 short items... </ul>
     <ul class="hmenu4">... exactly 4 short items... </ul>
     <ul class="hmenu5">... exactly 5 short items... </ul>
     <ul class="hmenu6">... exactly 6 short items... </ul>

   If there are exactly 2, 3, 4, 5, or 6 items in the menu, use the
   correspondingly numbered class. They are exactly the same as the
   generic "hmenu" except that they work better in IE6 and IE7.

   3) Each item is:
     <li><a href="...">...</a>

   4) If there is a "current" item, mark it up like this:
     <li class="hmenuselection"><a>...</a>

   If the current item should not be a link, just leave out the href
   attribute.

   (To render the menu correctly on IE6 and IE7, each LI must have
   exactly one child, and it must be either an A or a DIV.)

*/

.hmenu2, .hmenu3, .hmenu4, .hmenu5, .hmenu6, .hmenu {margin: 1.95em 0 0 0;
  text-align: center; display: table; width: 100%; border-collapse: collapse;
  table-layout: fixed}
.hmenu2 li, .hmenu3 li, .hmenu4 li, .hmenu5 li, .hmenu6 li, .hmenu li {
  display: table-cell; border: 1px solid #036; padding: 0.3em 0.5em;
  background: #eff5fb; vertical-align: middle}
.hmenu2 .hmenuselection, .hmenu3 .hmenuselection, .hmenu4 .hmenuselection,
.hmenu5 .hmenuselection, .hmenu6 .hmenuselection, .hmenu .hmenuselection {
  border-bottom-style: hidden; border-width: 2px; background: none}
.hmenu2 a, .hmenu3 a, .hmenu4 a, .hmenu5 a, .hmenu6 a, .hmenu a {
  display: block; text-decoration: none; color: #036}
.hmenu2 a:hover, .hmenu3 a:hover, .hmenu4 a:hover, .hmenu5 a:hover,
.hmenu6 a:hover, .hmenu a:hover,
.hmenu2 a:focus, .hmenu3 a:focus, .hmenu4 a:focus, .hmenu5 a:focus,
.hmenu6 a:focus, .hmenu a:focus {text-decoration: underline}

/* If the window is very narrow, make the menu wrap instead */

@media all and (max-width: 46em) {
  .hmenu6 li {float: left}
  .hmenu6 .hmenuselection {border: 1px solid #036}
}
@media all and (max-width: 40em) {
  .hmenu5 li, .hmenu li {float: left}
  .hmenu5 .hmenuselection, .hmenu .hmenuselection {border: 1px solid #036}
}
@media all and (max-width: 34em) {
  .hmenu4 li {float: left}
  .hmenu4 .hmenuselection {border: 1px solid #036}
}
@media all and (max-width: 28em) {
  .hmenu3 li {float: left}
  .hmenu3 .hmenuselection {border: 1px solid #036}
}
@media all and (max-width: 22em) {
  .hmenu2 li {float: left}
  .hmenu2 .hmenuselection {border: 1px solid #036}
}