table {
    border-collapse:collapse;
    border:0
}

td,th,div {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    line-height:24px
}

#top_area {
    background-color:#d2daf4;
    text-align:center;
    height:40px;
    line-height:36px;
    font-size:19px;
    font-weight:bold;
    position:relative
}

#top_area span {
    line-height:140%;
    font-size:11px;
    font-weight:normal;
    position:absolute;
    right:20px;
    top:5px
}
#top_area a {color:#428bca; font-weight:bold}

#load {
    position:absolute;
    top:64px;
    left:24px;
    font-size:12px;
    line-height:26px
}

#maintbl { height:538px; margin-top:2px; position:relative}

#info {padding:0 0 2px 3px; position:relative}
#info>div {padding:0}

#tree{padding:2px 0}
#tabs>div{padding:3px 5px 0 5px}
#tabs td{vertical-align:top}
#tab1 td{padding:0 5px}

.subSelect{
    height:32px;
    margin:0 0 3px 0;
    padding:5px 0 0 0;
    width:100%;
    border-bottom:#d2daf4 thin solid;
    text-align:center
}

.hidden{display:none}

.node circle { stroke:black }
.node text {fill:gray; font-size:10px}
.finger {cursor:pointer}

.topLine{ border-top:#d2daf4 thin solid}

#scaleContainer {
    height:27px; padding:0; margin:0;
    text-align:right
}
#menuIns {margin-top:2px; font-size:12px; color:#999; font-weight:bold}
.menu {border-bottom:#d2daf4 thin solid}

#pheno .menu {height:24px; padding:0; margin:0;}
#pheno th { border-bottom:lightgray thin solid; padding:2px 2px 3px 2px }
#pheno td, #legend td {padding:0; line-height:14px}

#seqContainer {
    overflow-x:scroll; overflow-y:hidden;
    position:relative;
    padding:6px 0 0 0;
    margin:0
}
#nt, #heatmap, .guide {
    cursor:none;
}
#nt {font-family:Courier}
#seq circle {cursor:default}

#showWhat {
    position:absolute;
    top:40px; right:60px;
    width:85px;
    background-color:#eee;
    text-shadow:1px 1px white;
    cursor:pointer
}

.thisPhe tr:nth-of-type(odd) { background:rgb(240,240,240) }

.blackLine {stroke: black; fill: none}
.dashStroke{ stroke:lightgray; stroke-dasharray:4,2 }

.tick { stroke:#ababab }
.mark { fill:#ababab; text-anchor:end }

.guide { background-color:rgba(256,180,180,0.4) }
#guideV { position:absolute; width:7px }
#guideH { position:absolute; height:14px; z-index:2000 }
#tree svg {z-index: 3000}

.codonBg { fill:rgb(247,247,247) }
#heatmap rect {stroke:rgb(247,247,247)}

#tab1 {position:relative}

.thisPhe table{ text-align:center; width:100% }
.thisPhe td { white-space:nowrap }
#colorGrp {position:absolute; background:#eee; padding:3px 8px; border:lightgray thin solid; top:94px}

.bar { background:white}
.xaxis line, .xaxis path { stroke:white}
.xaxis text { fill:#ababab; font-size:10px; stroke:none }
.bgBar {fill:#f3f3f3}
.zeroline { stroke:#dbdbdb }
.barLine { stroke-width:4px; stroke:lightgray }

#tree .xaxis line, #tree .xaxis path { stroke:#e5e5e5}
#tree .xaxis text { font-size:10.5px }

#seqNum{
    display:none;
    position:absolute; left:584px; top:5px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    z-index:1000
}

.grayLine {stroke:#d2daf4}
.lessFill {fill-opacity:0.7}
.blueFill {fill:blue}

#legend { margin:5px; padding:5px; border-top:#d2daf4 thin solid}
#legend>div {float:left; margin:0 6px; padding:0 8px; border:#d2daf4 thin solid}
.lgAxis text {stroke:none}

#ref {height:30px}
#ref .xaxis line, #ref .xaxis path { stroke:#999}
#ref .xaxis text { font-size:11px }
#refLine {stroke:#b3b3b3; stroke-width:4px}
#ref rect {fill:#ddd; stroke:gray}
.refSym {font-size:10px; text-anchor:middle; font-style:italic }
.mutLine {stroke-width:2px}

.tip {
    position:absolute;
    padding:1px 5px 2px 5px;
    border-radius:4px;
    white-space:nowrap
}
.tooltip {
    background-color:rgba(0, 0, 0, 0.6);
    color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px
}
#tipRef {
    text-align:center;
    z-index:2001
}