/*

  Style sheet for the WFA navigation banner.
  It is assumed the banner looks somewhat like this:

  <div class="banner">
    <p>
      <a href="pref">Previous lesson</a>
      <a href="contents">Contents</a>
      <a href="next">Next lesson</a>
    </p>
  </div>

  I.e., a DIV.banner with a P with three A elements and finished with a BR.

  This stylesheet is modelled after some stylesheets used on the W3 web site.
*/


div.wfabanner {
  margin: 0 0;
  font-size: 90% /*smaller*/;
  font-weight: normal;
  line-height: 1.1;
  text-align: center;
  border: thin outset;
  border-color: #025c7f;
  display: table;
  width:100%;
  margin-left: auto;
  margin-right: auto;
}
div.wfabanner p {
  font-family: Arial, sans-serif;
  display: table-row;
  width: 100%;
  color: white;
  background: url(/images/semi2x2.png) transparent fixed;
}

div.wfabanner a, div.wfabanner em {
  display: table-cell;
  padding: 0.1em 0.2em;
  width:33.3%; 
  vertical-align: middle; 
  border-left: 2px groove #025c7f 
}
div.wfabanner :first-child { border-left: none }
div.wfabanner em { color: #CFC }

div.wfabanner a:link { text-decoration: none; color: white }
div.wfabanner a:visited { text-decoration: none; color: #CCD }
div.wfabanner a:hover { background: white; color: black }


@media print {
  div.wfabanner { display: none }
}