/* Circular genome viewer */

#plotbody {
  text-align:center;
}

#linearchart {
}

#brush {
display:inline-block;
}

#circularchart {
display:inline-block;
}





/* Classes for the demo's controls */
#demo-controls {
  padding: 10px;
}

.control-item {
  padding: 5px;
}

/* Render the chart as cleanly as possible */
#circularchart {
    shape-rendering: geometricPrecision;
}

/* Text on the demo */
.mini text {
    font: 9px sans-serif;	
}

.main text {
    font: 12px sans-serif;	
}

/* Definitions for the plot resize dragger, and
   resizing shadow */
.dragbar-line {
    stroke-width: 1;	
    stroke: lightgrey;
    pointer-events: inherit;
}

.dragbar-shadow {
    stroke-width: 1;	
    stroke: lightgrey;
    fill: transparent;
}

/* Style for the plot move arrow if active */
.move-cross {
    stroke-width: 1;
    stroke: lightgrey;
    fill: lightgrey;
    cursor:move;
}

.move-shadow {
    cursor:move !important;
}

/* For resizing the linear chart */
#linearchart {
    cursor: -webkit-grab; cursor: -moz-grab;
}

#linearchart:active {
    cursor: -webkit-grabbing; cursor: -moz-grabbing;
}

.mainTrack {
    cursor: pointer; 
    cursor: hand;
}

/* Definitions for first stranded track, colour, stroke */
.track1_pos {
    fill: darksalmon;
    stroke: #d1876d;
    stroke-opacity: 0.8;
    stroke-width: 1;	
}

.track1_neg {
    fill: #FFCC00;
    fill-opacity: .7;
    /*stroke-width: 1;
    stroke: #4c602a;*/
}

/* In a linear track if an intergenic
   region is defined, give it a colour */
.track1_none {
    fill: #cccccc;
    fill-opacity: .7;
    stroke-width: 1;
}

/* And we want to show the user as they hover
   over a track, change the colour */
.track1_pos:hover {
    fill: red;
    stroke-width: 1;
    stroke: 1;
}

.track1_neg:hover {
    fill: red;
    fill-opacity: .9;
    stroke-width: 1;
    stroke: red;
}

/* In a linear track, if there are regulatory
   elements such as transcription factors and
   terminators, give them a colour for the stroke */
.track1_arrow_pos, .track1_arrow_neg, .track3_arrow {
    stroke-width: 1;
    stroke: black;
}

/* Labels on the linear track */
.track1_text {
    fill: white;
    font-weight: bold;
    font: 12px arial;
}

/* Track 2 is also a stranded track, give it
   a different set of colours */
.cdsTrack_pos {
    fill: #0011C4;
    fill-opacity: .7;
}

/* When a linear track is zoomed to the point 
   it's text is visible an extra class is added
   to the element we can hook in to */
.cdsTrack_pos_zoomed {
    stroke-width: 1px;
    stroke: #0011C4;
}

.cdsTrack_neg {
    fill: #003e52;
    fill-opacity: .7;
}

.cdsTrack_neg_zoomed {
    stroke-width: 1px;
    stroke: #003e52;
    stroke-opacity: 0.7;
}

.cdsTrack_text {
    fill: white;
    font-weight: bold;
    font: 12px arial;
}

.RNAs_text {
    fill: white;
    font-weight: bold;
    font: 12px arial;
}


/* ntTrack is for displaying nucleotide sequence */
.ntTrack {
    fill: #3399FF;
    fill-opacity: .7;
    text-align: center;
}

.ntTrack:hover {
    fill: blue;
    fill-opacity: .9;
}

.ntTrack_text {
    fill: white;
    font-weight: bold;
    text-align: center;
    font: 12px arial;
}

/* The GC Plot type track, give the stroke a colour */
.gcplot {
    stroke: black;
}

/* Track 4 & 5 were the glyph tracks in the demo version..
   classes of a concatenation 
   of the track name and the type of glyph in the track */
.track4_up, .track5_up, .track6_up, .track7_up, .track8_up, .track9_up, .track10_up, .track11_up, .track12_up, .track13_up, .track14_up, .track15_up, .track16_up, .track17_up,.track18_up, .track19_up, .track20_up {
  fill: #f46a41;
}

.track4_down, .track5_down, .track6_down, .track7_down, .track8_down, .track9_down, .track10_down, .track11_down, .track12_down, .track13_down, .track14_down, .track15_down, .track16_down, .track17_down,.track18_down, .track19_down, .track20_down {
  fill: #0094ff;
}
.track5_vfdb {
    fill: #663300;
}

.track5_adb {
    fill: #FF9933;
}


/* Give a colour to the glyph track's stroke */
.gapTrack {
    stroke: grey;
}

/* Set the stroke width of the axis lines */
.trackAxis .domain {
    stroke-width: 1;
}

/* In a linear track, we need to set the
   colours for the drag brush */
.brush .background {
    stroke: black;
    stroke-width: 2;
    fill: slategray;
    fill-opacity: .3;
}

.brush .extent {
    stroke: gray;
    fill: dodgerblue;
    fill-opacity: .365;
}

/* In a circular plot if there's a
   drag brush for zoomed region, define the
   colours and style */
.polarbrush {
    fill: lightgrey;
    opacity: 0.5;
}

/* In the circular plot, the circular end points
   for the drag brush */
.brushEnd {
    fill: "red";
}

.brushStart {
    fill: "green";
}

/* If we need to set an element to hidden, give
   ourselves a class */
.linear_hidden {
	visibility: hidden;
}

/* For regulatory elements in a linear plot,
   define the colours and stroke for the lollipop
   head (terminator site) */
.lollipophead {
  stroke:#000000;
  stroke-opacity: 1;
  fill: none;
}

.lollipopstemstart {
  fill:none;
  stroke:#000000;
  stroke-width: 1px;
  stroke-linecap:butt;
  stroke-linejoin:miter;
  stroke-dasharray: 5,5;
}

.lollipopstemend {
  fill:none;
  stroke:#000000;
  stroke-width: 1px;
  stroke-linecap:butt;
  stroke-linejoin:miter;
}

/* For our tooltips, how should we display them? */
.d3-tip {
  line-height: 1;
  font: 12px arial;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

/* antismash-related classes */

.antiSMASH_text {
    fill: black;
    font-weight: bold;
    font: 12px arial;
}

.antiSMASH {
    fill: #999;
    fill-opacity: .7;
}

/*Antismash biosynthetic etc*/

.biosynthetic{
    fill:#B22222;
    stroke-width: 1px;
    stroke: #666666;
}

.biosynthetic-additional{
    fill:#F08080;
    stroke-width: 1px;
    stroke: #666666;
}

.transport{
    fill:#00BFFF;
    stroke-width: 1px;
    stroke: #666666;
}

.regulatory{
    fill:#008000;
    stroke-width: 1px;
    stroke: #666666;
}

.other{
    fill:#696969;
    stroke-width: 1px;
    stroke: #666666;
}

.no-antismash{
    fill:#000000;
}

.head_to_tail {
    fill: #ff9966;
    fill-opacity: .7;
}


/*Colours for track regions*/
/*set the stroke width for all*/
[class*="legend-key-"] { 
    stroke-width:1px;
/*    stroke: #aaa; */
    fill-opacity: .7; 
    stroke-opacity: .7;
}

.legend-key-1{
    fill: #dc143c;
    stroke: #dc143c;
}

.legend-key-2{
    fill: #0000cd;
    stroke: #0000cd;
}

.legend-key-3{
    fill: #ffff00;
    stroke: #ffff00;
}

.legend-key-4{
    fill: #db7093;
    stroke: #db7093;
}

.legend-key-5{
    fill: #4682b4;
    stroke: #4682b4;
}

.legend-key-6{
    fill: #ff4500;
    stroke: #ff4500;
}

.legend-key-7{
    fill: #6495ed;
    stroke: #6495ed;
}

.legend-key-8{
    fill: #556b2f;
    stroke: #556b2f;
}

.legend-key-9{
    fill: #663399;
    stroke: #663399;
}

.legend-key-10{
    fill: #32cd32;
    stroke: #32cd32;
}

.legend-key-11{
    fill: #dda0dd;
    stroke: #dda0dd;
}

.legend-key-12{
    fill: #00fa9a;
    stroke: #00fa9a;
}

.legend-key-13{
    fill: #b8860b;
    stroke: #b8860b;
}

.legend-key-14{
    fill: #ff00ff;
    stroke: #ff00ff;
}

.legend-key-15{
    fill: #2e8b57;
    stroke: #2e8b57;
}

.legend-key-16{
    fill: #0000ff;
    stroke: #0000ff;
}

.legend-key-17{
    fill: #ff69b4;
    stroke: #ff69b4;
}

.legend-key-18{
    fill: #bdb76b;
    stroke: #bdb76b;
}

.legend-key-19{
    fill: #008b8b;
    stroke: #008b8b;
}

.legend-key-20{
    fill: #191970;
    stroke: #191970;
}

.legend-key-21{
    fill: #228b22;
    stroke: #228b22;
}

.legend-key-22{
    fill: #c71585;
    stroke: #c71585;
}

.legend-key-23{
    fill: #708090;
    stroke: #708090;
}

.legend-key-24{
    fill: #800000;
    stroke: #800000;
}

.legend-key-25{
    fill: #00bfff;
    stroke: #00bfff;
}

.legend-key-26{
    fill: #ffd700;
    stroke: #ffd700;
}

.legend-key-27{
    fill: #9932cc;
    stroke: #9932cc;
}

.legend-key-28{
    fill: #bc8f8f;
    stroke: #bc8f8f;
}

.legend-key-29{
    fill: #9acd32;
    stroke: #9acd32;
}

.legend-key-30{
    fill: #ffb6c1;
    stroke: #ffb6c1;
}

.legend-key-31{
    fill: #d2691e;
    stroke: #d2691e;
}

.legend-key-32{
    fill: #00ffff;
    stroke: #00ffff;
}

.legend-key-33{
    fill: #da70d6;
    stroke: #da70d6;
}

.legend-key-34{
    fill: #2F4F4F;
    stroke: #2F4F4F;
}

.legend-key-35{
    fill: #98fb98;
    stroke: #98fb98;
}

.legend-key-36{
    fill: #cd5c5c;
    stroke: #cd5c5c;
}

.legend-key-37{
    fill: #ffe4b5;
    stroke: #ffe4b5;
}

.legend-key-38{
    fill: #b03060;
    stroke: #b03060;
}

.legend-key-39{
    fill: #adff2f;
    stroke: #adff2f;
}

.legend-key-40{
    fill: #a020f0;
    stroke: #a020f0;
}

.legend-key-41{
    fill: #4169e1;
    stroke: #4169e1;
}

.legend-key-42{
    fill: #e9967a;
    stroke: #e9967a;
}

.legend-key-43{
    fill: #8b008b;
    stroke: #8b008b;
}

.legend-key-44{
    fill: #ff8c00;
    stroke: #ff8c00;
}

.legend-key-45{
    fill: #7fffd4;
    stroke: #7fffd4;
}

.legend-key-46{
    fill: #ff1493;
    stroke: #ff1493;
}

.legend-key-47{
    fill: #a0522d;
    stroke: #a0522d;
}

.legend-key-48{
    fill: #8fbc8f;
    stroke: #8fbc8f;
}

.legend-key-49{
    fill: #ff6347;
    stroke: #ff6347;
}

.legend-key-50{
    fill: #f4a460;
    stroke: #f4a460;
}

.legend-key-51{
    fill: #000080;
    stroke: #000080;
}

.legend-key-52{
    fill: #afeeee;
    stroke: #afeeee;
}

.legend-key-53{
    fill: #6b8e23;
    stroke: #6b8e23;
}

.legend-key-54{
    fill: #00ff00;
    stroke: #00ff00;
}

.legend-key-55{
    fill: #C0C0C0;
    stroke: #C0C0C0;
}


/* colours repeat from start */

.legend-key-56{
    fill: #dc143c;
}

.legend-key-57{
    fill: #0000cd;
}

.legend-key-58{
    fill: #ffff00;
}

.legend-key-59{
    fill: #db7093;
}

.legend-key-60{
    fill: #4682b4;
}

.legend-key-61{
    fill: #ff4500;
}

.legend-key-62{
    fill: #6495ed;
}

.legend-key-63{
    fill: #556b2f;
}

.legend-key-64{
    fill: #663399;
}

.legend-key-65{
    fill: #32cd32;
}

.legend-key-66{
    fill: #dda0dd;
}

.legend-key-67{
    fill: #00fa9a;
}

.legend-key-68{
    fill: #b8860b;
}

.legend-key-69{
    fill: #ff00ff;
}

.legend-key-70{
    fill: #2e8b57;
}

.legend-key-71{
    fill: #0000ff;
}

.legend-key-72{
    fill: #ff69b4;
}

.legend-key-73{
    fill: #bdb76b;
}

.legend-key-74{
    fill: #008b8b;
}

.legend-key-75{
    fill: #191970;
}

.legend-key-76{
    fill: #228b22;
}

.legend-key-77{
    fill: #c71585;
}

.legend-key-78{
    fill: #708090;
}

.legend-key-79{
    fill: #800000;
}

.legend-key-80{
    fill: #00bfff;
}

.legend-key-81{
    fill: #ffd700;
}

.legend-key-82{
    fill: #9932cc;
}

.legend-key-83{
    fill: #bc8f8f;
}

.legend-key-84{
    fill: #9acd32;
}

.legend-key-85{
    fill: #ffb6c1;
}

.legend-key-86{
    fill: #d2691e;
}

.legend-key-87{
    fill: #00ffff;
}

.legend-key-88{
    fill: #da70d6;
}

.legend-key-89{
    fill: #2F4F4F;
}

.legend-key-90{
    fill: #98fb98;
}

.legend-key-91{
    fill: #cd5c5c;
}

.legend-key-92{
    fill: #ffe4b5;
}

.legend-key-93{
    fill: #b03060;
}

.legend-key-94{
    fill: #adff2f;
}

.legend-key-95{
    fill: #a020f0;
}

.legend-key-96{
    fill: #4169e1;
}

.legend-key-97{
    fill: #e9967a;
}

.legend-key-98{
    fill: #8b008b;
}

.legend-key-99{
    fill: #ff8c00;
}

.legend-key-100{
    fill: #7fffd4;
}

.legend-key-101{
    fill: #ff1493;
}

.legend-key-102{
    fill: #a0522d;
}

.legend-key-103{
    fill: #8fbc8f;
}

.legend-key-104{
    fill: #ff6347;
}

.legend-key-105{
    fill: #f4a460;
}

.legend-key-106{
    fill: #000080;
}

.legend-key-107{
    fill: #afeeee;
}

.legend-key-108{
    fill: #6b8e23;
}

.legend-key-109{
    fill: #00ff00;
}

.legend-key-110{
    fill: #C0C0C0;
}

.antismash-selected{
    stroke-width: 2px;
    stroke: #202020;
}

.variants_1 {
    fill: #4477AA;
}

.variants_2 {
    fill: #66CCEE;
}

.variants_3 {
    fill: #228833;
}

.variants_4 {
    fill: #CCBB44;
}

.variants_5 {
    fill: #EE6677;
}

.variants_6 {
    fill: #AA3377;
}

.variants_7 {
    fill: #BBBBBB;
}

.variants_8 {
    fill: #EE7733;
}

.variants_9 {
    fill: #332288;
}

.variants_10 {
    fill: #EECC66;
}

.variants_11 {
    fill: #225555;
}

.variants_12 {
    fill: #FFAABB;
}