#run_progress {
  position:relative;
  margin: 0;
  padding: 0;
  float: left;
  width: 560px;
}

ul.years {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.years li {
  background-image:none;
  padding: 0;
  width: 39px;
  height: 19em;
  font-size: 80%;
  display: block;
  float: left;
  text-align: left;
  text-indent: 0.1em;
  margin: 0;
  margin-left:-1px;
  color: #678;
  border: 1px solid;
  background-color: #dee;
}

ul.runs li {
  background-image:none;
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -1px;
  display: block;
  height: 1.2em;
}

ul.runs h3 {
  display: block; 
  position: absolute;
  left:0.2em;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

ul.runs ul {
  display: none;
  z-index:100;
  font-size: 80%;
  list-style-position: inside;
  padding: 0.2em;
  width: 23em;
  background-color: #cdc;
  position: absolute;
  top: 1.6em;        
  left: -1px;        
}

ul.runs ul li {
  border: 0px;
  padding:0.2em;
  position: relative;
  text-indent: 0.1em;
}

ul.runs li:hover > ul.run_details {
  display: block;
}

span.short_desc {
  font-size: 120%;
  font-weight: bold;
}

ul.legend {
  position: absolute;
  right:0;
  bottom:0;
  display: block;
  list-style: none;
  margin:0;
  padding:0;
  border: 1px solid #678;
  background-color: #dee;
  width:119px;
}

ul.legend li {
  background-image:none;
  border: 0;
  padding:0.2em;
  text-align:center;
}

.running {
  background-color: #fbb;
  border: 1px solid #f88;
}

.completed {
  background-color: #bfb;
  border: 1px solid #6f6;
}