/**
 * On a light emitting display, use bright colours on a dark background.
 * And to avoid confusing anyone, we'll use the same settings for "projection", too. :-)
 */
@media projection, screen, tv, handheld {
  /** Let's assume that all these "a" will be within a "body" anyway.
    * body, a:link, a:visited, a:hover, a:active { */
  body {
    background-color: navy ;
  }
  body      { color: white ; }
  a:link    { color: yellow ; }
  a:link.semidisguised { color: white ; text-decoration: none ; }  /* color gets applied to :link (and :hover?!?); text-decoration to :link, :visited, and :hover ?! */
  a:visited { color: lime ; }
  a:hover   { color: red ; }
  a:active  { color: #FFA500 ; }  /* orange */
  a img       { border: 2px solid gray ; }
  a:hover img { border-color: red ; }
}

/**
 * Not wasting space on: aural, braille, embossed, handheld, print.
 */
@media screen, projection, tty, tv {
  body {
    line-height: 115% ;
    margin-top: 5% ;
    margin-bottom: 5% ;
    margin-left: 5% ;
    margin-right: 5% ;
  }
  .single-column {
    margin-left: 20% ;
    margin-right: 20% ;
  }
  .extra-margin {
    margin-left: 20% ;
    margin-right: 20% ;
  }
}

@media only screen and (min-width: 602px) and (max-width: 980px) {
  .single-column {
    margin-left: 10% ;
    margin-right: 10% ;
  }
  .extra-margin {
    margin-left: 10% ;
    margin-right: 10% ;
  }
}

@media only screen and (max-width: 601px) {
  .single-column {
    margin-left: 5% ;
    margin-right: 5% ;
  }
  .extra-margin {
    margin-left: 5% ;
    margin-right: 5% ;
  }
}

/* 2005-11-22 */

/* 2009-11-21 */
ul, ol {
  margin-top: 0em ;
}