body
{
  background-color: #5C94FC;
  color: #FFFFFF;
  text-align: center;
  font-size: 100%;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}

.sidebar-wrapper
{
  position: fixed;  /* NEED IE6 FIX? */
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 14.4375em /*231px*/;
  overflow: auto;
}

.left-sidebar
{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border: 0.125em /*2px*/ solid;
  border-color: #E7B398 #803108 #803108 #E7B398;
  width: 13.25em /*212px*/;
  min-height: 37.5625em /*601px*/; /*(221+20n)px*/
  background-color: #C84C0C;
}

.title-screen
{
  position: absolute;
  left: 1em /*16px*/;
  top: 1em /*16px*/;
  border: 0.125em /*2px*/ solid;
  border-color: #803108 #E7B398 #E7B398 #803108;
  width: 11em /*176px*/;
  height: 10.3125em /*165px*/;
}

.navigation-menu
{
  position: absolute;
  left: 1em;
  top: 12.5625em /*201px*/;
  border: 0.125em /*2px*/ solid;
  border-color: #803108 #E7B398 #E7B398 #803108;
  width: 11em /*176px*/;
  height: 23.75em /*380px*/; /*(20n)px*/
  background-color: #5C94FC;
}

.navigation-link
{
  margin: 0 /*0px/12.5*/;
  border: 0.16em /*2px/12.5*/ solid;
  border-color: #E7B398 #803108 #803108 #E7B398;
  width: 13.76em /*172px/12.5*/;
  height: 1.28em /*16px/12.5*/;
  display: block;
  background-color: #C84C0C;
  text-decoration: none;
  color: #FCBCB0;
  font-weight: bold;
  font-size: 0.78125em; /*12.5px*/
  line-height: 1.28em /*16px/12.5*/;
}
.navigation-link:hover
{
  border: 0.16em /*2px/12.5*/ solid;
  border-color: #93DA93 #006C00 #006C00 #93DA93;
  background-color: #00A800;
}
.navigation-link:active
{
  border: 0.16em /*2px/12.5*/ solid;
  border-color: #CDECA1 #50810A #50810A #CDECA1;
  background-color: #80D010;
}

.navigation-link-selected,
.navigation-link-selected:hover,
.navigation-link-selected:active
{
  border-color: #FEEAE7 #8B6861 #8B6861 #FEEAE7;
  background-color: #FCBCB0;
  color: #C84C0C;
}

.half-link {
  display: inline-block;
  width: 6.72em; /*(172px-4px[from:inline-block]-0px[gap])/2/12.5*/
}

.lhl {
  position: absolute;
  left: 0;
  bottom: 0;
}

.rhl {
  position: absolute;
  right: 0;
  bottom: 0;
}


.right-panel
{
  margin-left: 13.5em /*216px*/;
}

.page-content
{
  margin: 0 auto;
  padding: 0 1em /*16px*/;
  width: 44.5em /*712px*/;
}

h1
{
  font-weight: bold;
  font-size: 3.75em /*60px*/;
}

h2
{
  font-weight: bold;
  font-size: 1.875em /*30px*/;
}

p
{
  text-align: justify;
  font-size: 1.25em /*20px*/;
}

img
{
  width: 100%;
}

a:visited,
a:active
{
  outline: none;
}

a:link .sheet-music
{
  border: 8px solid #5C94FC;
}
a:visited .sheet-music
{
  border: 8px solid #5C94FC;
}
a:hover .sheet-music
{
  border: 8px solid #C84C0C;
}
a:active .sheet-music
{
  border: 8px solid #FCBCB0;
}

form
{
  text-align: left;
}

.field-label
{
  float: left;
  padding-right: 0.5em /*8px*/;
  width: 8.4em /*134.4px*/;
  text-align: right;
}

input
{
  width: 60%;
  text-align: left;
}

textarea
{
  width: 60%;
  height: 10em;
  text-align: left;
}

h3 a:link
{
  color: #FCBCB0;
}
h3 a:visited
{
  color: #C84C0C;
}
h3 a:hover
{
  color: #803108;
}
h3 a:active
{
  color: #C84C0C;
}