body {
  background-color: #FFF;
  font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
  font-size: 100%;
}

#content {
width: 1200px;
margin: auto;
background-color: #f0f0f0;
border-style: solid;
border-width: 1px;
border-color: #000;
}

#title {
text-align: center;
}

.boxTitle {
text-align: center;
font-size: 90%;
margin: 0em 0em .2em 0em;
}

.clear {
  clear: both;
}

#subTitle {
margin-right: 2em;
margin-left: 2em;
}

.mineralList {
  float: left;
  color: #333;
  background-color: #ddd;
  border-style: solid;
  border-width: 1px;
  border-color: #fff;
  width: 17em;
  margin: 2em 2em 2em 2em;
  padding: .5em .5em 1em 1em;
  box-shadow: 7px 7px 4px #222;
}

.mineral {
  color: #333;
  background-color: #ccc;
  border-style: solid;
  border-width: 1px;
  border-color: #000;
  width: 15em;
  margin: .1em 0px 0px 0px;
  padding: .25em .25em .25em 1em;
}

#smallGraphArea {
  height: auto;
  width: auto;
  float: left;
  color: #333;
  background-color: #ddd;
  border-style: solid;
  border-width: 1px;
  border-color: #fff;
  margin: 2em 2em 1em 2em;
  padding: .5em .5em .5em .5em;
  box-shadow: 7px 7px 4px #222;
}

.infoDiv {
  color: #333;
  background-color: #ddd;
  border-style: solid;
  border-width: 1px;
  border-color: #fff;
  padding: 0em 1em .25em 1em;
  margin-top: 2px;
  width: 719px;
}

.graph {
  color: #333;
  background-color: #ddd;
  border-style: solid;
  border-width: 1px;
  border-color: #fff;
  width: 750px;
  height: 100px;
}

.checkBox {
margin: 0px 1em 0px 0px;
}

#mixerGraphArea {
background-color: #ddd;
border-style: solid;
border-width: 1px;
border-color: #fff;
margin: 1em 2em 2em 2em;
padding: .5em .5em .5em .5em;
width: 1125px;
box-shadow: 7px 7px 4px #222;
}

#mixerArea {
width: 1125px;
}

#graphArea {
background-color: #ddd;
width: 1125px;
height: 150px;
border-style: solid;
border-width: 1px;
border-color: #fff;
}

#infoArea {
width: 1125px;
}

.mixer {
float: left;
border-style: solid;
border-width: 1px;
border-color: #fff;
margin: 0px .75em .25em 0px;
padding: .5em .5em .1em .5em;
display: none;
}

.slider {
width: 200px;
font-size: 85%;
}

.sliderLocked {
float: right;
font-size: 75%;
margin-top: .2em;
}

.sliderInfo {
font-size: 75%;
margin: .2em 1em .1em 1em;
text-align: center;
}

#exercise {
margin-bottom: 1em;
margin-left: 1em;
}

.tooltip {
font-size: 75%;
opacity: 0.75;
}

.xaxisLabel {
font-size: 85%;
}

.yaxisLabel {
margin-left: 2px;
margin-top: 5px;
font-size: 85%;
}

.introP {
font-size: 80%;
}

.introDiv {
float: right;
margin: 1em 1em 0em 0em;
font-size: 100%;
}