.logo {
  position:relative;
  margin:auto;
  width:95%;
}

.logo form {
  margin: 0.3em 55px;
}

.logo_container {
  position:relative;
  height: 300px;
  overflow:hidden;
  margin-left:55px;
  border:1px solid #999;
}

.logo_graphic {
  position:absolute;
  height:300px;
  background-color: #E4F0C4;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
    transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
    transparent 75%, transparent);
  background-size: 50px 50px;
  cursor: pointer;
}

.logo_yaxis {
  position:absolute;
}

.canvas_logo {
  position:absolute;
  top:0;
}

.logo_divider {
  background: rgba(256,0,0,0.1);
  position:absolute;
  top:0;
  height:300px;
  width:1px;
  left:50%;
  z-index: 5;
}

.logo_col_info div {
  height: 1em;
  width:0.5em;
  float:left;
}

.logo_settings {
  display:none;
}

.aa_A div {
  background: #FF9966;
}
.aa_B div {
  background: #fff;
}
.aa_C div {
  background: #009999;
}
.aa_D div {
  background: #FF0000;
}
.aa_E div {
  background: #CC0033;
}
.aa_F div {
  background: #00FF00;
}
.aa_G div {
  background: #f2f20c;
}
.aa_H div {
  background: #660033;
}
.aa_I div {
  background: #CC9933;
}
.aa_J div {
  background: #fff;
}
.aa_K div {
  background: #663300;
}
.aa_L div {
  background: #FF9933;
}
.aa_M div {
  background: #CC99CC;
}
.aa_N div {
  background: #336666;
}
.aa_O div {
  background: #fff;
}
.aa_P div {
  background: #0099FF;
}
.aa_Q div {
  background: #6666CC;
}
.aa_R div {
  background: #990000;
}
.aa_S div {
  background: #0000FF;
}
.aa_T div {
  background: #00FFFF;
}
.aa_U div {
  background: #fff;
}
.aa_V div {
  background: #FFCC33;
}
.aa_W div {
  background: #66CC66;
}
.aa_X div {
  background: #fff;
}
.aa_Y div {
  background: #006600;
}
.aa_Z div {
  background: #fff;
}

.dna_A div {
  background: #cbf751;
}
.dna_C div {
  background: #5ec0cc;
}
.dna_G div {
  background: #ffdf59;
}
.dna_T,div  .dna_U div {
  background: #b51f16;
}