body
{
  font-family: sans-serif;
}

#outer-container
{
  width: 100%;
  height: 100%;
  background-color: dimgray;
  border: 1px dotted forestgreen;
}

#title-container
{
  position: relative;
  width: 60%;
  height: 3%;
  left: 20%;
  top: 10%;
  padding: 0.6em;
  background-color: darkolivegreen;
  border: 1px solid black;
}

#site-name
{
  font-family: Helvetica, sans-serif;
  font-size: large;
  color: honeydew;
}

#top-nav-container
{
  position: relative;
  width: 60%;
  height: 8%;
  left: 20%;
  top: 10%;
  padding: 0.6em;
  background-color: gainsboro;
  border: 1px solid black;
  
}

#top-nav-container .nav-item
{
  width: 10%;
  float: right;
  margin-right: 0.4em;
}

.album-art
{
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid black;
}

#bottom-nav-container
{
  position: relative;
  width: 70%;
  height: 4%;
  left: 19%;
  top: 10%;
  padding: 0.7em;

  font-weight: bold;
}

#bottom-nav-container .nav-item
{
  float: left;
  width: 20%;
}

#bottom-nav-container a, a:visited, a:hover
{
  color: honeydew;
  text-decoration: none;
}

#main-container
{
  position: relative;
  width: 60%;
  height: 60%;
  left: 20%; 
  top: 10%;
  padding: 0.6em;
  overflow: auto;
  background-color: black;
  border: 1px solid black;
}

#record-title
{
  font-family: Sydney, sans-serif;
  font-size: medium;
  color: goldenrod;
  padding: 0.6em;
  float: left;
}

#liner-notes
{
  font-family: Sydney, sans-serif;
  font-size: small;
  color: goldenrod;
  padding: 0.3em;
  float: right;
}

#player-container
{
  width: 99%;
  height: 80%;
}

#player
{
  position: relative;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
}