feature_styles.css

.basic,
.plus-basic,
.minus-basic {
    position: absolute;
    cursor: pointer;
    z-index: 10;
    min-width: 1px;
}

div.basic-hist {
    position: absolute;
    z-index: 10;
}

.feature,
.plus-feature,
.minus-feature {
    position:absolute;
    height: 8px;
    background-repeat: repeat-x;
    cursor: pointer;
    min-width: 1px;
    z-index: 10;
}

.feature { background-color: gainsboro }
.plus-feature { background-image: url('img/plus-chevron3.png'); }
.minus-feature { background-image: url('img/minus-chevron3.png'); }

div.feature-hist {
    position: absolute;
    background-color: blue;
    border-color: lightblue;
    border-style: solid;
    border-width: 1px;
    z-index: 10;
}

.feature2, .plus-feature2, .minus-feature2 {
    position:absolute;
    height: 15px;
    background-repeat: repeat-x;
    cursor: pointer;
    min-width: 1px;
    z-index: 10;
}

.feature2 { background-color: #4fac2a; }
.plus-feature2 { background-image: url('img/plus-herringbone16.png'); }
.minus-feature2 { background-image: url('img/minus-herringbone16.png'); }

div.feature2-hist {
    position: absolute;
    background-color: #9f9;
    border-color: #ada;
    border-style: solid;
    border-width: 1px;
    z-index: 10;
}

.feature3, .plus-feature3, .minus-feature3 {
    position:absolute;
    height: 8px;
    background-repeat: repeat-x;
    cursor: pointer;
    min-width: 1px;
    z-index: 10;
}

.feature3 { background-color: goldenrod }
.plus-feature3 { background-image: url('img/plus-chevron.png'); }
.minus-feature3 { background-image: url('img/minus-chevron.png'); }

div.feature3-hist {
    position: absolute;
    background-color: yellow;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    z-index: 10;
}

.feature4, .plus-feature4, .minus-feature4 {
    position:absolute;
    height: 12px;
    background-repeat: repeat-x;
    cursor: pointer;
    min-width: 1px;
    z-index: 10;
}

.feature4 { background-color: yellow }
.plus-feature4 { background-image: url('img/plus-pacman.png'); }
.minus-feature4 { background-image: url('img/minus-pacman.png'); }

div.feature4-hist {
    position: absolute;
    background-color: yellow;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    z-index: 10;
}

.feature5, .plus-feature5, .minus-feature5 {
    position:absolute;
    height: 8px;
    background-repeat: repeat-x;
    cursor: pointer;
    min-width: 1px;
    z-index: 10;
}

.feature5 { background-color: blue }
.plus-feature5 { background-image: url('img/plus-chevron2.png'); }
.minus-feature5 { background-image: url('img/minus-chevron2.png'); }

div.feature5-hist {
    position: absolute;
    background-color: blue;
    border-color: lightblue;
    border-style: solid;
    border-width: 1px;
    z-index: 10;
}

div.exon-hist {
    position: absolute;
    background-color: #4B76E8;
    border-style: solid;
    border-color: #00f;
    border-width: 1px;
    z-index: 10;
}

.exon,
.plus-exon,
.minus-exon {
    position: absolute;
    height: 5px;
    background-color: #4B76E8;
    border-style: solid;
    border-color: #00f;
    border-width: 1px;
    cursor: pointer;
    z-index: 10;
}

div.est-hist {
    position: absolute;
    background-color: #ED9185;
    border-style: solid;
    border-color: #c33;
    border-width: 1px;
    z-index: 10;
}

.est,
.plus-est,
.minus-est {
    position: absolute;
    height: 5px;
    background-color: #ED9185;
    border-style: solid;
    border-color: #c33;
    border-width: 1px;
    cursor: pointer;
    z-index: 10;
}

.dblhelix,
.plus-dblhelix,
.minus-dblhelix {
    position:absolute;
    height: 11px;
    background-image: url('img/dblhelix-red.png');
    background-repeat: repeat-x;
    min-width: 1px;
    cursor: pointer;
    z-index: 10;
}

div.dblhelix-hist {
    position: absolute;
    background-color: #fcc;
    border-color: #daa;
    border-style: solid;
    border-width: 1px;
    z-index: 10;
}

.plus-helix,
.minus-helix {
    position:absolute;
    height: 12px;
    background-image: url('img/helix3-green.png');
    background-repeat: repeat-x;
    min-width: 1px;
    cursor: pointer;
    z-index: 10;
}

div.helix-hist {
    position: absolute;
    background-color: #cfc;
    border-color: #ada;
    border-style: solid;
    border-width: 1px;
    z-index: 10;
}

.loops, .minus-loops, .plus-loops {
    position:absolute;
    height: 13px;
    background-image: url('img/loops.png');
    background-repeat: repeat-x;
    cursor: pointer;
}

.plus-cds, .minus-cds {
    position:absolute;
    height: 13px;
    background-repeat: repeat-x;
    cursor: pointer;
    min-width: 1px;
}

.plus-cds_phase0 { background-image: url('img/plus-cds0.png'); }
.plus-cds_phase1 { background-image: url('img/plus-cds1.png'); }
.plus-cds_phase2 { background-image: url('img/plus-cds2.png'); }
.minus-cds_phase0 { background-image: url('img/minus-cds0.png'); }
.minus-cds_phase1 { background-image: url('img/minus-cds1.png'); }
.minus-cds_phase2 { background-image: url('img/minus-cds2.png'); }

div.cds-hist {
    position: absolute;
    background-color: #fcc;
    border-color: #daa;
    border-style: solid;
    border-width: 1px;
    z-index: 10;
}

.topbracket {
    position:absolute;
    height: 8px;
    border-style: solid solid none solid;
/*    border-width: 2px 2px 0px 2px; */
    border-width: 2px;
    border-color: orange;
/*    margin-top: 2px */
    cursor: pointer;
}

.bottombracket {
    position:absolute;
    height: 8px;
    border-style: none solid solid solid;
    border-width: 2px;
    border-color: green;
    cursor: pointer;
}

.hourglass, .plus-hourglass, .minus-hourglass {
    position:absolute;
    height: 0px;
    border-style: solid;
    border-width: 6px 3px 6px 3px;
    cursor: pointer;
}

.triangle, .plus-triangle, .minus-triangle {
    position:absolute;
    height: 0px;
    border-style: solid;
    border-width: 6px 3px 0px 3px;
    cursor: pointer;
}

.hgred {
    border-color: #f99 white #f99 white;
}
div.hgred-hist {
    position: absolute;
    background-color: #daa;
    border-color: #d44;
    border-style: solid;
    border-width: 1px;
    z-index: 10;
}

.hgblue {
    border-color: #99f white #99f white;
}
div.hgblue-hist {
    position: absolute;
    background-color: #aad;
    border-color: #99f;
    border-style: solid;
    border-width: 1px;
    z-index: 10;
}

.ibeam, .plus-ibeam, .minus-ibeam {
    position:absolute;
    height: 2px;
    background-color: blue;
    border-style: solid;
    border-width: 8px 4px 8px 4px;
    border-color: white blue white blue;
    cursor: pointer;
}

div.transcript-hist {
    position: absolute;
    background-color: #ddd;
    border-color: #FF9185;
    border-style: solid;
    border-width: 1px;
    z-index: 10;
}

.transcript,
.plus-transcript,
.minus-transcript {
    position: absolute;
    height: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    background-color: #999;
    z-index: 6;
    min-width: 1px;
    cursor: pointer;
}

.plus-transcript-arrowhead,
.plus-arrowhead {
    position: absolute;
/*  border stuff seems slow
    height: 0px;
    width: 0px;
    margin-top: -4px;
    border-style: solid;
    border-color: white white white #999;
    border-width: 6px 0px 6px 10px; */
    margin-top: -4px;
    width: 7px;
    height: 12px;
    background-image: url('img/plus-arrowhead.png');
    background-repeat: no-repeat;
}

.minus-transcript-arrowhead,
.minus-arrowhead {
    position: absolute;
/*  border stuff seems slow
    height: 0px;
    width: 0px;
    margin-top: -4px;
    border-style: solid;
    border-color: white #999 white white;
    border-width: 6px 10px 6px 0px; */
    margin-top: -4px;
    width: 7px;
    height: 12px;
    background-image: url('img/minus-arrowhead.png');
    background-repeat: no-repeat;
}

.plus-transcript-CDS,
.minus-transcript-CDS {
    position: absolute;
    height: 12px;
    margin-top: -4px;
    background-image: url('img/cds.png');
    background-repeat: repeat-x;
/*  border-width: 2px 0px 3px 0px;
    border-style: solid;
    border-color: white;
    background-color: #FF9185;
    border-style: solid;
    border-color: #00f;
    border-width: 1px;*/
    cursor: pointer;
    z-index: 10;
    min-width: 1px;
}

.plus-transcript-exon,
.minus-transcript-exon,
.plus-transcript-UTR, 
.minus-transcript-UTR,
.plus-transcript-five_prime_UTR,
.minus-transcript-five_prime_UTR,
.plus-transcript-three_prime_UTR,
.minus-transcript-three_prime_UTR {
    position: absolute;
    height: 4px;
    margin-top: -2px;
    background-color: #B66;
    border-style: solid;
    border-color: #D88;
    border-width: 2px 0px 2px 0px;
    z-index: 8;
    min-width: 1px;
    cursor: pointer;
}

.generic_parent,
.plus-generic_parent,
.minus-generic_parent {
    position: absolute;
    height: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
    background-color: #AAA;
    z-index: 6;
    min-width: 1px;
    cursor: pointer;
}

div.generic_parent-hist {
    position: absolute;
    background-color: #ddd;
    border-color: #555;
    border-style: solid;
    border-width: 1px;
    z-index: 10;
}

.match_part,
.plus-match_part,
.minus-match_part {
    position: absolute;
    height: 4px;
    margin-top: -2px;
    background-color: #66B;
    border-style: solid;
    border-color: #88D;
    border-width: 2px 0px 2px 0px;
    z-index: 8;
    min-width: 1px;
    cursor: pointer;
}

.generic_part_a,
.plus-generic_part_a,
.minus-generic_part_a {
    position: absolute;
    height: 4px;
    margin-top: -2px;
    background-color: #6B6;
    border-style: solid;
    border-color: #8D8;
    border-width: 2px 0px 2px 0px;
    z-index: 8;
    min-width: 1px;
    cursor: pointer;
}