/*

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

  <div class="banner">
    <p>
      <a href="../"><img alt="City Beach Church" src="/images/cb-home"></a>
      <a href="meetings">What's&nbsp;on?</a>
      <a href="faq">FAQ</a>
      <a href="visit">Visit&nbsp;Us</a>
      <a href="Status">Software</a>
      <a href="learn">Studies</a>
      <a href="photos">Photos</a>
      <a href="tapes">Tapes</a>
      <a href="roster">Roster</a>
      <a href="newsletters">Newsletters</a>
      <a href="address">Address</a>
      <a href="documents">Documents</a>
      <a href="http://lists.citybeachchurchofchrist.org.au">eMail&nbsp;Lists</a>
      <a href="links">Links</a>
      <a href="mailto:cbcoc@citybeachchurchofchrist.org.au">Email&nbsp;us</a>
    </p>
  </div>

  I.e., a DIV.banner with a P with a small logo and a few
  A elements.

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

/* set a right margin so the banner is not totally obscured by underlying text.
*/
body {
  margin-right: 10em;
}
/* but we don't need it on paper, because the banner doesn't print.
*/
@media print {
 body {  margin-right: 2cm; }
}

div.banner {
  display: block; 
  margin: 0;
  font-size: 90% /*smaller*/;
  font-weight: bold;
  line-height: 110%;
  text-align: right;
  float: right;
  position: fixed;

  border:none;
  background: url(/images/semi2x2.png) transparent fixed;

  top: 0.9em;
  right: 0.6em;
  left: auto;
  width: 9.8em;
}
div.banner p {
  margin: 0; 
  padding: 0.3em 0.2em 0.3em 0.6em;
  font-family: Arial, sans-serif;
  color: white;
  background-color: #889;
/*
  background: url(/images/semi2x2.png) transparent fixed;
  border: thin outset;
  border-color: #025c7f;
*/
  border:none;

  position: relative;
  top: -0.4em;
  right: 0.4em;

}

div.banner a, div.banner em { 
  display: block; 
  margin: 0 0.5em;
  border-top: 2px groove #025c7f; 
}
div.banner :first-child { border-top: none }
div.banner em { color: #CFC }

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

div.banner img { 
  width:100%;
  height:21px;
  float: none; 
  vertical-align: middle;
  text-align: center;
  border: none;
  padding-bottom: 2px;
}

/*
div.banner p:after {
  content: "Navigate";
  font-weight: normal;
  display: block;
  width: 6em;
  margin-bottom: -1.6em;
  margin-top: 0.2em;
  margin-right: auto;
  margin-left: auto;
  background: #FF6;
  color: #037;
  border: thin solid #005A9C;
  text-align: center;
  padding: 0.15em;
}
*/

/* move the modified tag right */
p.modified {
  margin-right: -9.5em;
}

/* move the sign image on the index page right */
p#index-sign {
  margin-right: -6.5em;
}

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