html {
background-color:#ddd;
}

body {
background:#FFF;
border-style:none solid solid;
border-color:#aaa;
border-width:1px;
box-shadow:0px 0px 50px #999;
color:#000;
font-family:"arial", "helvetica", sans-serif;
margin:auto;
max-width:800px;
min-width:320px;
}

img {
border:0;
max-width:95%;
height:auto;
}

div.heading {
background:#036;
color:#FF9;
font-size:100%;
border-bottom:6px solid #FC0;
padding:0.4em 0 0.3em 2em;
}

/* Add the background image if there's enough room
   to not interfere with the title */
@media (min-width: 500px) {
  div.heading {
  background:#036 url(images/piano.jpg) no-repeat top right;
  }
}

div.heading h1 {
margin:18px 0 0px;
padding:0;
}

div.heading h2 {
margin:0px 0 19px;
padding:0;
font-size:100%;
font-style: italic;
}

div.heading img {
margin:0;
}

div.heading a:link, div.heading a:visited, div.heading a:active, div.heading a:hover {
background:#069;
text-decoration:none;
color:#FFF;
padding:0.3em 1em;
border-radius: 4px 4px 0 0;
}

div.heading a:hover {
background:#004C7F;
}

div.heading a.current:link, div.heading a.current:visited, div.heading a.current:active, div.heading a.current:hover {
background:#FC0;
color:#000;
}

div.heading span.current {
background:#FC0;
text-decoration:none;
color:#000;
padding:0.3em 1em;
border-radius: 4px 4px 0 0;
}

div.content {
font-size:95%;
margin:2.5em 2.25em 1.3em;
color:#222;
}

div.content h2 {
font-size:150%;
font-weight:normal;
color:#036;
margin:1em 0 0;
padding:0;
}

div.content h3 {
font-size:130%;
font-weight:normal;
color:#036;
margin:1em 0 0;
padding:0;
}

div.content p {
line-height:1.35;
margin: 1em 0 0;
}

div.content td.margin {
background:#E8E8E8;
width:6em;
border-right:1.5em solid #FFF;
border-bottom:0.9em solid #FFF;
padding-top:0.4em;
text-align:center;
font-size:150%;
font-weight:normal;
color:#036;
}

div.content em {
font-weight:bold;
font-style:normal;
}

div.content blockquote {
margin-left:4em;
margin-right:5em;
}

/* On small screens, use smaller margins */
@media (max-width: 500px) {
div.content blockquote {
  margin-left:1.5em;
  margin-right:2em;
}}

div.content ul {
line-height:1.35;
list-style-type:none;
margin:0;
padding:0;
}

div.content ol {
line-height:1.35;
margin:0 0 1.5em;
padding:0;
}

div.content li {
margin:0 0 0 1.5em;
}

div.content a:link, div.content a:visited, div.content a:hover, div.content a:active {
color:#369;
text-decoration:none;
}

div.content a:active {
color:#CCF;
}

div.content a:hover {
text-decoration:underline;
}

div.content table {
margin:1.5em 0;
}

div.content tr.header {
background-color:#FFF;
color:#036;
text-align:left;
font-weight:bold;
}

div.content tr.even {
background-color:#FFF;
color:#000;
text-align:left;
}

div.content tr.odd {
background-color:#FFC;
color:#000;
text-align:left;
}

div.pdf_link {
float:left;
text-align:center;
margin:1.5em 0;
}

div.pdf_link img {
padding-left:8px;
max-width:100%;
}

div.pdf_link p {
margin:0;
}

div.figure {
color:#777;
margin:1.5em 0 1.5em 4em;
padding:0;
}

/* On small screens, use smaller margins */
@media (max-width: 500px) {
  div.figure {
  margin: 1.5em 0 1.5em 2em;
}}

div.recent {
background:#E8E8E8;
border:1px solid #79B;
width:90%;
margin:0;
padding:0.6em 1em 0;
}

/* On big screens, float this off to the right with extra whitespace */
@media (min-width: 500px) {
div.recent {
float:right;
margin:0 0 1.25em 3em;
width:18em;
}}

div.recent h2 {
color:#036;
margin:0 0 0.4em;
padding:0;
}

div.recent p {
width:100%;
margin:0 0 0.8em;
}

div.footer {
font-size:80%;
margin:4em 0 2em 2.57em;
}

div.footer a:link, div.footer a:visited, div.footer a:hover, div.footer a:active {
text-decoration:none;
color:#369;
}

div.footer a:hover {
text-decoration:underline;
}