body {
 color: #000;
 margin-left: 0;
 margin-top: -10px;
}

#title {
 background: #f0f0f0;

 -moz-border-radius: 0px 0px 20px 0px;
 -moz-box-shadow: 5px 5px 5px #777;

 -webkit-border-radius: 0px 0px 20px 0px;
 -webkit-box-shadow: 5px 5px 5px #777;

 border-radius: 0px 0px 20px 0px;
 box-shadow: 5px 5px 5px #777;

 border-left: 1px dashed black;

 /* unless we set a width for this, the box shadow causes firefox 3.5 at
 least to display a horizontal scroll bar since it thinks a part of the
 element (the box shadow) is extending past the screen... */
 width: 75%;

 font-size: 115%;
 color: #000;
 margin-left: 115px;
 padding: 10px;
 padding-top: 20px;
 margin-bottom: 1em;

 position: relative;
 z-index: 10;
}

a:hover {
 background-color: #fff;
}

#sidebar {
 background: #f0f0f0;

 -moz-border-radius: 0px 0px 20px 0px;
 -moz-box-shadow: 5px 5px 5px #777;

 -webkit-border-radius: 0px 0px 20px 0px;
 -webkit-box-shadow: 5px 5px 5px #777;

 border-radius: 0px 0px 20px 0px;
 box-shadow: 5px 5px 5px #777;

 font-size: 80%;
 float: left;
 width: 125px;
 margin-left: -10px;
 padding-top: 10px;
}

#sidebar a {
 color: #000;
 text-decoration: none;
}

#main {
 margin-left: 125px;
 padding-left: 10px;
 /* IE ignores body.width but does work if we set main.width... */
 width: 50em;
}

/* we don't want sidebar/title in printed pages */
@media print {
  #sidebar {
    display: none;
  }

  #title {
    display: none;
  }

  #main {
    margin-left: 0;
    padding-left: 0;
    font-size: 10pt;
    width: auto;
  }
}