.error {
  /* background-color: inherit; */
  color: red;
}

.green {
  /* background-color: inherit; */
  color: green;
}

.hidden { 
  visibility: hidden;
 }

.channel-block { 
  position: relative;
  clear: both;
}

#overview-time-axis{
  margin: 15px; /* 0px 1px 0px; */
 /* left: 10px; */
 }

.keogram-block { 
  float: left;
  margin: 0px 0px 2px 0px;  
  position: relative;
  left: 15px;
  top: 0px;
  width: 730px;
  min-height: 66px;
  border: 1px black;
}

.keogram-block img { 
  cursor: crosshair; 
}

.keogram-label { 
  float: right;
  position: relative;
  top: 0px;
  width: 120px;
  padding: 2px;
  font-size: x-small;
  text-align:left;
  vertical-align:middle;
}

img.keogram { 
  border: black solid 1px;
}

img.thumbnail { 
  border: black solid 1px;
}

.centered { 
  text-align: center;
}

.footer { 
  position: relative;
  clear: both;
  padding-left:5px;
  padding-right:5px;
 }

.detailed-view { 
  text-align: left;
}


/* Specifically for the keogram in the detailed view. The height
   attribute is important because it preserves space around the
   absolutely-positioned images.
   */
.detailed-view-keogram-container { 
  height: 64px;
  left: 30px;
  /* text-align: left;*/
  text-align: left;
  position: static;
}


/* Specifically for the images keogram image and timeline image in the
   detailed view. Absolute positioning is need to get them to overlay
   correctly. */
.detailed-view-keogram-img-container { 
  position: absolute;
  left: 30px;
  cursor: crosshair;
 
}

/*
.detailed-view-keogram-img-container img { 
 
}
*/

div.detailed-view-thumbnail { 
  float: left;
  margin: 5px;
  font-size: x-small;
  text-align: center;
}

.detailed-view-thumbnail img { 
  cursor: pointer; 
}

div.spacer { 
  clear: both;
}