@import "navbar-bottom.css";
@import "column+annotations.css";
@import "keys.css";


body {
  color: white;
  background-color: black;
  font: 13px Verdana, sans-serif;
}

body.title-page {
  background-image: url(images/backgrounds/piano_large.jpeg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center 25%;
}



/*** navbar with keys ***/

div#navbar {
  height: 120px;
  color: white;
  background-color: black;
}

.keys {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1em;
  padding-right: 40px;
  color: white;
  background: black;
  font-size: x-small;
}



/*** content, header and footer ***/

div#content {
  margin-bottom: 120px;
}

div.header {
  visibility: hidden;
}

div.footer {
  bottom: 120px;
  height: 20px;
  color: white;
  background-color: black;
}




/*** central column, annotations ***/

.page0 {
  position: relative;
  top: 3px;
  left: 3px;
  width: 60%;
  max-width: 600px;
  margin: 30px auto 149px;
  background: #444;
  /* background-image: url(images/backgrounds/shadow.png); */
  background-position: right;
}

.page0 .page1 {
  position: relative;
  top: -1px;
  left: -1px;
  background: #777;
}

.page0 .page1 .page2 {
  position: relative;
  top: -1px;
  left: -1px;
  background: #aaa;
}

.main {
  position: relative;
  top: -1px;
  left: -1px;
  padding: 0em 20px 0em;
  color: black;
  background-color: white;
  background-image: url(images/backgrounds/music_paper.jpeg);
  background-position: left 5%;
}

img.corner {
  position: absolute;
  top: 0px;
  left: 0px;
}

.main div#copyright {
  margin-left: -20px;   /* same as padding of main */
  margin-right: -20px;  /* padding of main + any extension */
  padding: 2em 10px 0.3em 5px;
  height: 1.2em;
  border: none;
  background-image: url(images/backgrounds/blank_paper.jpeg);
  background-color: white;
  color: black;
  text-align: right;
  font: 8px Verdana, sans-serif
}

.annotate {
  position: absolute;
  right: 100%;
  width: 20%;
  min-width: 200px;
  color: #ffc;
  margin-right: 3px;   /* gap + border width of main (if any) */
  line-height: 1.5;
  text-align: right;
  font-size: x-small;
  font-weight: normal;
  text-decoration: none;
}

.annotate-right {
  position: absolute;
  left: 100%;
  width: 20%;
  min-width: 200px;
  color: #ffc;
  margin-left: 6px;   /* gap + border width of main + width of pages */
  line-height: 1.5;
  text-align: left;
  font-size: x-small;
  font-weight: normal;
  text-decoration: none;
}

.annotate p, .annotate-right p {
  margin: 0;
  padding: 0.5em;
  text-align: left;
  background-color: #474747;
/*  background-image: url(images/backgrounds/piano_faded.jpeg); */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center 30%;
}

span.annotate, span.annotate-right {
  padding: 0.5em;
  text-align: left;
  background-color: #474747;
/*  background-image: url(images/backgrounds/piano_faded.jpeg); */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center 30%;
}

.annotate span, .annotate-right span {
  padding: 0.5em;
  position: relative;
  top: 0.5em;
  background-color: #474747;
  /* background-image: url(images/backgrounds/piano_faded.jpeg); */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center 30%;
}

.annotate div, .annotate-right div {
  position: absolute;
  right: 0px;
  margin: 0 0.5em 0 0;
}

.annotate span+div, .annotate-right span+div {
  margin-top: 1.5em;
}

h2 + .annotate, h2 + .annotate-right {
  margin-top: 1em;
}


/*** content in middle of window ***/

div#middle {
  position: fixed;
  bottom: 140px;
  width: 100%;
}

div#middle div.title-quote {
  width: 60%;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
  color: white;
/*  background-image: url(images/backgrounds/piano_glass.jpeg); */
}

div#middle div.attribution {
  text-align: right;
  padding-right: 10%;
}



/*** General style ***/

img {
  border: none;
}

.main p {
  line-height: 1.5;
}

.main p:first-line {
  line-height: 1.5;
  padding-left: 1em;
}

.main p.footnote:first-line {
  padding-left: 0em;
}

blockquote {
  text-align: left;
  margin: 0em 10% 1em;
}

code {
  font-weight: normal;
  font-family: Courier, monospace;
}

.main p.footnote {
  font-size: x-small;
  margin: -1em 0em 1em;
}

.attribution {
  font-style: italic;
}

span.heading {
  font-weight: bold;
}

.alert {
  border: thin red solid;
}

div.alert p {
  margin: 0.5em;
}

span.alert {
  border: none;
  color: red;
  font-weight: bold;
}



/*** Headings ***/

.main h1 {
  margin-left: -20px;   /* same as padding of main */
  margin-right: -20px;  /* padding of main + any extension */
  padding: 0px 0px 25px 20px;
  font-size: 30px;
  color: black;
  background-image: url(images/backgrounds/dog-eared_paper.jpeg);
  background-color: white;
  text-transform: lowercase;
  letter-spacing: 0.5em;
  text-align: center;
}

.main h1+img.corner {
  margin-left: 0px;   /* same as border width of main */
}

.main h1+div.subheading {
}

.main h2 {
  font-size: 1.2em;
  margin: 3em -30px 0 -20px;
  padding: 1em 0 0 5px;
  border-top: #000 solid 3px;
}

.main h1+h2, .main h1+img.corner+h2 {
  border: none;
  margin-top: 0em;
}

.main h2+div.subheading {
  margin-left: -20px;
  padding-left: 5px;
}

.main h3 {
  margin-top: 2em;
  margin-left: -15px;
  font-size: 1.1em;

}

.main h3+div.subheading {
  margin-left: -20px;
  margin-top: -1em;
  margin-bottom: 1em;
  padding-left: 5px;
}

.main h4 {
  margin-left: -5px;
  margin-top: 2em;
  margin-bottom: 1em;
}

.main h4+div.subheading {
}

.main div.subheading {
}




/*** links ***/

.main a {
  color: #009;
  background: none;
}

.main a:visited {
  color: #505;
}

.main a:hover {
  color: #00f;
  text-decoration: underline;
}


.keys a {
  color: #aaaaaa;
  background: none;
  text-decoration: none;
}

.keys a:visited {
  color: #aaaaaa;
}

.keys a:hover {
  color: white;
  font-weight: bold;
}


.main .annotate a, .main .annotate-right a {
  color: #dd7700;
  background: none;
}

.main .annotate a:visited, .main .annotate-right a:visited {
  color: #ae7744;
}

.main .annotate a:hover, .main .annotate-right a:hover {
  color: #fb0;
}



/*** files ***/

/*
 * div.files {
 *   width: 25px;
 *   text-align: center;
 * }
 */

.files img {
  text-align: center;
  vertical-align: middle;
  margin-bottom: 0.5em;
}

.files span {
  white-space: nowrap;
}


/*** table of contents ***/

.main ul.toc {
  position: absolute;
  width: 130px;
  right: 100%;
  top: 25px;
  margin: 10px 3px 0 0;   /* right at least equals border width of main */
  padding: 0;
  list-style-type: none;
  color: #ffc;
}

.main ul.toc li {
  margin: 0 0 10px 0;
}

.main ul.toc a {
  display: block;
  padding: 0.3em 0;
  text-align: center;
  font: bold 16px sans-serif;
  color: #ffc;
  border: none;
  text-decoration: none;
  background-color: #474747;
  /* background-image: url(images/backgrounds/piano_faded.jpeg); */
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center 30%;
}

.main ul.toc li ul {
  margin: 0.3em 0px 0 auto;
  width: 90px;
  list-style-type: none;
}

.main ul.toc li li {
  margin-bottom: 5px;
}

.main ul.toc li li a {
  font: bold 10px sans-serif;
  padding: 0.3em 0;
}

.main ul.toc a:visited {
  color: #ffc;
}

.main ul.toc a:hover {
  color: #433;
  background: none;
  background-color: #a6a6a6;
  text-decoration: none;
}



/*** generic list style ***/

.main ul, .main ol {
  line-height: 1.5;
  padding-left: 20px;
  margin: 0;
}

.main dl {
  line-height: 1.5;
  padding-left: 0px;
  margin: 0;
}

.main dt {
  margin-top: 1em;
  font-weight: bold;
}

.main dd {
  margin-left: 0;
  padding-left: 1em;
}



/*** publications ***/

.main dl.publications {
  display: block;
  list-style-type: none;
  margin-top: 1em;
  padding: 0;
  margin-left: 25px;
}

dl.publications dt {
  position: relative;
  font-weight: bold;
  margin-top: 2em;
}

dl.publications dt:first-child {
  margin-top: 0em;
  padding-top: 0em;
}

dl.publications dd {
  margin: 0em;
}

dl.publications>dt div.files {
  /* position: absolute; */
  top: 0;
  margin-left: -25px;
  /* margin-top: 0.5em; */
}

dl.publications>dt div.title {
  position: absolute;
  top: 0;
}

dl.publications>dt div.files img {
  margin-bottom: 0.5em;
}


table.publications {
  /* border: thin black solid; */
  border-collapse: collapse;
  margin-top: 1em;
  margin-top: 1em;
}

table.publications col {
  /*
   * border-left: thin black solid;
   * border-right: thin black solid;
   */
  padding: 0;
}

table.publications tr {
  /* border-bottom: thin black solid; */
}

table.publications td {
  vertical-align: top;
  padding-bottom: 1em;
}

table.publications td.files {
  text-align: center;
  padding-right: 1em;
}

table.publications div.title {
  font-weight: bold;
}

table.publications div.title>a {
  color: black;
  background: none;
  text-decoration: none;
}

table.publications div.title>a:visited {
  color: black;
}

table.publications div.title>a:hover {
  color: black;
  background: none;
  text-decoration: underline;
}



/*** question sheet solutions ***/

.main dl.solutions {
  list-style-type: none;
  padding-left: 0em;
  margin: 0.3em 0em 0.3em;
}

dl.solutions dt {
  font-weight: bold;
  margin-top: 1em;
}

dl.solutions dd {
  margin: 0em;
  padding: 0em;
}

dl.solutions dd.files {
  font-size: x-small;
}



/*** progs and code ***/

.main dl.code {
  padding-left: 0em;
}

dl.code>dt {
  margin-top: 1em;
  font-weight: bold;
}

dl.code>dd {
  margin-left: 0em;
}

dl.code dd.files {
  font-size: x-small;
}



/*** links ***/

.main dl.links {
  list-style-type: none;
  list-style-position: inside;
  margin: 0.3em 0em 0.3em;
  padding: 0em;
}

dl.links>dt {
  display: list-item;
  margin-top: 0.5em;
}

.main dl.links>dd {
  margin-left: 0em;
  /*  padding-left: 1em; */
}

.main dl.links p {
  margin: 0.3em 0em 0em;
}

.main dl.links ul {
  list-style-type: circle;
  margin-left: 0em;
}



/*** stats table ***/

.main table.stats {
  width: 100%;
  border: thin black solid;
  padding: 0;
  border-collapse: collapse;
  margin-top: 1em;
  margin-bottom: 1em;
}

.main table.stats col {
  border-left: thin black solid;
  border-right: thin black solid;
  padding: 0;
}

.main table.stats thead {
  border-bottom: thin black solid;
}

.main table.stats td.name {
  text-align: left;
}

.main table.stats th.name {
  text-align: center;
}

.main table.stats td.count, .main table.stats th.count {
  text-align: center;
}