/* get rid of all borders,margins and padding. We will put back the borders we want */

@media all
{

  *,html,body,img
  {
    margin:0px;
    padding:0px;
    border:0px;
  }

  html,body,#navbar
  {
    height:100%;
  }

  body
  {
    font-family: "Verdana","Arial","Helvetica",sans-serif;
    font-size: small;
  }

  #title,#footer
  {
    width:100%;
    height:100%;
    display:table;
  }

  #navbar
  {
    width:100px;
  }

  td
  {
    vertical-align:top;
  }


  /*link underlines on hover or active but not otherwise*/
  a
  {
    text-decoration:none;
  }

  a:link,a:visited
  {
    font-weight:bold;
    text-decoration:none;
  }
  /*see comment below for reason I am not being careful here */
  a:active,a:hover,a:focus
  {
    text-decoration:underline;
  }

  #title h1
  {
    text-align:center;
    font-size:180%;
  }

  #footer,#title
  {
    margin: 0px auto;
  }


  #title *,#footer *
  {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
  }   


  #footer
  {
    font-weight:bold;
  }

  a
  {
    display:block;
    text-align:center;
    padding: 1ex;
  }

}

@media screen
{
  body
  {
    margin:0px;
  }

  html,body
  {
    width:100%;
  }

  
  
  /* try to do something about IE6 scrollbars - this is also needed in IE5 but not sensible browsers*/
  * html
  {
    overflow:hidden;
  }

  #siteframe,
  #title,
  #title *,
  div#navbar, /* color applied to navbar like this to avoid problems with a:xx rules */
  #footer,
  #footer *
  {
    background-color:#1B572C;
    color:white;
  }  

  #title h1
  {
    color:#f90;
  }


  a:visited,
  a:link
  {
    background-color:#1B572C;
    color:white;
  }

  a:active,
  a:hover,
  a:focus
  {
    background-color:#fc0;
    color:#1B572C;
  }


}