main.css

html {
  font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif;
  color:#333;
}

#title {
  padding-left:5px;
  font-size:50px;
  line-height:90px;
  margin-top:10px;
  height:108px;
}

#title span {
  color:#0c7;
  font-weight:bold;
  font-size:45px;
}

#title a{
  color:#333;
  font-weight:bold;
  text-decoration:none;
}
.container {
  width:800px;
  margin:20px auto;
}

.index-left, .intro-left, .index-right, .intro-right{
  position:fixed;
  top:50%;
  left:50%;
}
.index-left{
  margin-left:-142px;
  margin-top:-60px;
  height:100px;
  width:150px;
}

.index-right{
  margin-top:-51px;
  margin-left:30px;
  height:100px;
  width:300px;
}

.index-link{
  font-size:19px;
  color:#333;
  text-decoration:none;
  border-bottom:solid 3px #0c7;
  line-height:45px;
  padding-bottom:3px;
  border-bottom-right-radius: 20px;
  opacity:0.7;
}
.index-link:hover{
  opacity:1;
  font-weight:bold;
}
.index-link:active{
  border-bottom:solid 3px #ec545e;
}

.intro-left{
  margin-left:-190px;
  margin-top:-60px;
  height:100px;
  width:200px;
}

.intro-right{
  margin-top:-80px;
  margin-left:30px;
  height:100px;
  width:395px;
}

.intro-text{
  font-size:19px;
  line-height:35px;
}

.intro-text a{
  text-decoration:none;
  border-bottom:solid 2px #0c7;
  font-weight:bold;
  color:#0c7;
}
.top-controls{
  margin-top: -35px;
  float:right;
}
.top-controls a{
  border-bottom:solid 3px #0c7;
  font-weight:bold;
  font-size:16px;
  margin-right:10px;
  padding:3px 0;
  cursor:pointer;
}
.top-controls a:hover{
  border-bottom:solid 3px #ec545e;
}

.deactivated{
  opacity:0.3;
}
.deactivated:hover{
  cursor: not-allowed;
}

.board{
}

.bottom-controls{
  position:relative;
  padding:20px 5px;
}
.slow {
  float:left;
  margin-left:10px;
  line-height:28px;
  font-weight:bold;
}

.fast {
  float:right;
  margin-right:10px;
  line-height:28px;
  font-weight:bold;
}

#slider{
  margin:5px 80px;
}