genome.css

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    border: 0;
    font-size: 10px;
    font-family: Univers,Trebuchet MS,Helvetica,Arial,sans-serif;
}

.nav {
    vertical-align: middle;
    z-index: 10;
}

input.icon {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

div.container {
    position: absolute;
    z-index: 0;
}

div.dragWindow {
    position:absolute;
    overflow: hidden;
    z-index: 1;
}

.draggable {
    cursor: move;
}
.rubberBandAvailable {
    cursor: crosshair;
}

#navbox {
    padding-top: 3px;
}

.powered_by {
    padding: 0 0.5em;
    color: black;
    text-decoration: none;
}

div.locationTrap {
    position: absolute;
    background-color: #b1d3f6;
    border-color: white white #b1d3f6 white;
    border-style: solid;
    width: 0px;
    height: 0px;
    line-height: 0px;
    z-index: -10;
}

div.locationThumb {
    position: absolute;
    top: 0px;
    /* if you change this border from 2px, change GenomeView.showTrap */
    border: 2px solid red;
    margin: 0px -2px 0px -2px;
    cursor: move;
    background: rgba(0, 121, 245, 0.1);
}

div.locationThumb.dojoMoveItem {
    cursor: move;
}

div.topLink {
    position: absolute;
    right: 0;
    top: 22px;
    z-index: 25;
    background: white;
    border: 1px solid #888;
    border-width: 0 0 1px 1px;
}

a.topLink {
    padding: 0 0.5ex 0 0.5ex;
    text-decoration: none;
    color: blue;
}

div.overview {
    width: 100%;
    padding: 4px 0;
    z-index: -5;

    background: #FAFAFA url(jslib/dijit/themes/tundra/images/titleBar.png) repeat-x top left;

    border-style: solid;
    border-width: 1px 0px 1px 0px;
    border-color: #555;

    color:#aaa;
    text-align: center;
    cursor: crosshair;
}

div.block {
    position: absolute;
    overflow: visible;
    top: 0px;
    height: 100%;
}

div.track {
    position: absolute;
    left: 0px;
    width: 100%;
    z-index: 5;
}

.track.dojoDndItemOver {
    cursor: inherit;
}

.track.dojoDndItemBefore {
    border-top: 3px solid #999;
    margin-top: -3px;
}

.track.dojoDndItemAfter {
    border-bottom: 3px solid #999;
    margin-bottom: -3px;
}

div#static_track {
    top: 0px;
    position: absolute;
    background: #FAFAFA url(jslib/dijit/themes/tundra/images/titleBar.png) repeat-x top left;
    border-top: 1px solid #999;
    border-bottom: 1px solid #444;
    z-index: 20;
}

div.gridline {
    position: absolute;
    left: 0px;
    top: 0px
    width: 0px;
    height: 100%;
    border-style: none none none solid;
    border-width: 1px;
    border-color: red;
}
div.gridline_major {
    border-color: #bbb;
}
div.gridline_minor {
    border-color: #eee;
}

div.pos-label {
    position: absolute;
    left: -0.35em;
    top: 0px;
    z-index: 100;
    margin: 1px;
}

div.overview-pos {
    position: absolute;
    left: 0px;
    color: black;
    padding-left: 4px;
    font-family: sans-serif;
    border: 0;
}

div.blank-block {
    font-family: sans-serif;
    position: absolute;
    overflow: visible;
    top: 0px;
    height: 100%;
    background-color: #eee;
    z-index: 19;
}

div.sequence {
    position: absolute;
    left: 0px;
    font-family: Courier New,monospace;
    font-size: 10px;
    letter-spacing: 2px;
    padding-left: 2px;
}
div.sequence .highlighted {
    background: #ff0;
}
div.sequence .revcom {
    color: red;
}

/*
div.minus-feature:before {
    content: attr(fName);
    display: block;
}

div.plus-feature:before {
    content: attr(fName);
    display: inline;
}
*/

div.track-label, div.tracklist-label {
    z-index: 20;

    padding: 1px 6px;
    overflow: hidden;
    cursor: pointer;

    border-width: 1px;
    border-style: solid;

    border-top-color: #999;
    border-left-color: #999;
    border-bottom-color: #555
    border-right-color: #555;

    border-radius: 6px;

    color: #111;
    font-size: 110%;
    font-weight: bold;
    text-shadow: #ddd 1px 1px 0;

}
/* NOTE: browsers that don't support rgba colors will fall back to all
   track labels being #bcbcbc */

div.track-label {
    color: black;
    margin-left: 20px;
    border-color: rgba( 0,0,0,0);

    background-color: #bcbcbc;
    background-color: rgba( 200,200,200, 0.8 );

    border-width: 1px;
    border-color: #666;
    border-color: rgba( 40, 40, 40, 0.6 );
}
div.track-label:hover {
    border-color: rgba( 0,0,0, 1);
    background-color: #ddd;
}
div.tracklist-label {
    padding: 3px;

    background-color: #bcbcbc;
    background-color: rgba( 210, 210, 210, 0.9 );
}

#trackPane {
    background: #f2f2f2;
    background-image: url('img/tracklist_bg.png');
    background-repeat: repeat-y;
    background-position: right;
}
#trackPane h2 {
    margin: 0.5em 0 1em 0.5em;
}
#trackPane_splitter {
    background: #dcdcdc;
    width: 5px;
    border-right: 1px solid #555;
}


/* .dojoDndItemSelected, .dojoDndItemAnchor { */
/*     background: rgba( 220, 220, 255, 0.8); */
/* } */

div.tracklist-container {
    padding: 2px 5px;
}

.tracklist-container.dojoDndItemBefore {
    border-top: 3px solid #999;
    padding-top: 2px;
}

.tracklist-container.dojoDndItemAfter {
    border-bottom: 3px solid #999;
    padding-bottom: 2px;
}

.feature-label {
    position: absolute;
    border: 0px;
    margin: -2px 0px 0px 0px;
    /* padding: 0px 0px 2px 0px; for more space below labels */
    padding: 0px 0px 0px 0px;
    /* font-size: 80%; */
    white-space: nowrap;
    background-color: #eee;
    z-index: 10;
    cursor: pointer;
}

.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 {
    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 {
    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 {
    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;
}

.rubber-highlight {
    border: 1px solid black;
    height: 100%;
    border-color: rgba( 0, 0, 0, 0.6 );
    background-color: #8087ff;
    background-color: rgba( 128, 136, 255, 0.6 );
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.rubber-highlight div {
    color: white;
    padding: 0;
    margin-top: 10px;
    font-size: 160%;
    text-align: center;
    font-weight: bold;
    text-shadow: #6374AB 1px 1px 0;
}
div.overview .rubber-highlight {
    font-size: 0;
    top: -5px;
    height: 20px;
}
div.overview .rubber-highlight * {
    display: none;
}

.icon.nav {
    height: 30px !important;
}

input.nav {
    font-size: 9px !important;
}

#help_dialog {
    font-size: 12px;
    width: 70%;
    overflow: auto;
}
#help_dialog ul {
    padding-left: 0;
}
#help_dialog div.main {
    width: 49%;
}
#help_dialog div.main > dl {
    width: 90%;
    margin: 0 auto 1em auto;
}
#help_dialog dt {
    font-weight: bold;
    margin-top: 1em;
}
#help_dialog dd {
    margin-left: 2em;
}
#help_dialog dl dl.searchexample dt,
#help_dialog span.example {
    font-weight: normal;
    font-family: monospace;
}

.fatal_error {
    font-size: 12px;
    margin: 1em;
}
.fatal_error div.error {
    margin: 1px 0px 1px 1em;
    background: #ff8888;
    padding: 2px 6px;
}