/* Z-indexes for levels used in viz; overlay level is shown above base level. */
@base-index:    1;
@overlay-index: @base-index + 1;
@track-header-height: 16px;
@min-track-height: (@track-header-height + 4);
@separator-color: #888;

.viewport-container {
    overflow-x: hidden;
    overflow-y: auto;
    background: white;
}

.trackster-nav-container {
    width: 100%;

    &.stand-alone {
        /* Used to push nav into title bar: */
        height: 0;
    }
    
    text-align: center;
}

.trackster-nav {
    padding: 0 0;
    color:#333;
    font-weight:bold;
    background:#cccccc;
    display: inline-block;
    top: -2em;
    background: transparent;
    border: none;

    &.stand-alone {
        /* Push nav up into title bar */
        position: relative;
    }
}

.chrom-nav {
    width: 15em;
}

.content {
    font: 10px verdana;
    position: relative;
}

.nav-controls {
    text-align: center;
    padding: 1px 0;
    input {
        margin: 0 5px;
    }
}

#zoom-in, #zoom-out {
    display:inline-block;
    height: 16px;
    width: 16px;
    margin-bottom: -3px;
    cursor: pointer;
}

#zoom-out {
    background: transparent url(../images/fugue/magnifier-zoom-out.png) center center no-repeat;
}

#zoom-in {
    margin-left: 10px;
    background: transparent url(../images/fugue/magnifier-zoom.png) center center no-repeat;
}

.nav-input {
    font-size: 12px;
    width: 30em;
    z-index: @overlay-index;
}

.location {
    display: inline-block;
    width: 15em;
    margin: 0 10px;
}

.intro {
    z-index: @overlay-index;
/*    margin-top: 200px;*/
    margin-left: auto;
    margin-right: auto;
    color: #555;
    text-align: center;
    font-size: 16px;

    .action-button {
        background-color: #CCC;
        margin-top: 10px;
        padding: 1em;
        text-decoration:underline;
    }
}

.overview {
    width: 100%;
    margin: 0px;
    color: white;
}

.overview-viewport {
    position: relative;
    height: 14px;
/*    border-top: solid #666 1px;*/
/*    border-bottom: solid #aaa 1px;*/
    background: white;
    margin: 0;
}

.overview-close {
    font: 9px verdana;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 5px;
    z-index: @overlay-index;
    background-color: white;
}

.overview-highlight {
    top: 0px;
    position: absolute;
    z-index: @overlay-index;
    border-style: solid;
    border-color: #666;
    border-width: 0px 1px;
}

.overview-boxback {
    width: 100%;
    bottom: 0px;
    z-index: @overlay-index;
    position: absolute;
    height: 14px;
    background: #eee;
    border: solid #999 1px;
}

.overview-box {
    cursor: pointer;
    bottom: 0px;
    z-index: @overlay-index;
    position: absolute;
    margin-top: 0px;
    height: 14px;
    background: #C1C9E5 url(../images/visualization/draggable_horizontal.png) center center no-repeat;
    border: solid #666 1px;
}

.viewport-canvas {
    width: 100%;
    height: 100px;
}

.yaxislabel {
    z-index: @overlay-index;
    position: absolute;
    right: 20px;
}

.yaxislabel.bottom {
    bottom: 2px;
}

.group-handle {
    cursor: move;
    float: left;
    background: #eee url('../images/tracks/block.png');
    width: 12px;
    height: 12px;
}

.group {
    min-height: @min-track-height;
    border-top: 1px solid @separator-color;
    border-bottom: 1px solid @separator-color;

    // Put group header on its own line to avoid overlap with track header.
    > .track-header {
        position: relative;
        float: left;
    }
}

.track-header {
    /* Overlay header drawn semi-transparently on track. */
    height: @track-header-height;
    position: absolute;
    z-index: @overlay-index;
    background-color: rgba(1, 1, 1, 0.1);
    border-radius: 5px;
    padding: 0px 2px;
    text-align: left;
    margin: 2px;
    
    /* Make header opaque when focused on. */
    &:hover {
        background-color: #DDDDDD;
    }

    // Truncate long track names.
    .track-name {
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .menubutton {
        margin-left: 0px;
    }
}

.track-name {
    float: left;
    margin-top: 2px;
}

.tiles {
    background: url('../images/tracks/diag_bg.gif');
    position: relative;
    overflow: hidden;
}

.overlay { 
    position: absolute;
    left: 0;
    top: 0;
}

.track-tile {
    position: absolute;
    background: white;
    
    canvas {
        position: relative;
        z-index: @base-index;
    }
}

.tile-message {
    border-bottom: solid 1px red;
    text-align: center;
    color: red;
    background-color: white;
}

.track {
    position: relative;

    // Separates tracks.
    border-bottom: 1px solid @separator-color;

    &.error {
        background: #ECB4AF;
    }

    &.nodata {
        background: #EEEEEE;
    }

    &.pending {
        background: #FFFFCC;
    }
}

.track-content {
    text-align: center;
    position: relative;
    min-height: @min-track-height;
    padding: 0px 0px 1px 0px;

    .message {
        position: relative;
        // To vertically center message in track:
        top: 4px;
    }
}

.loading {
    min-height: 100px;
}

.label-track {
    font-size: 10px; 
    border: none;
    padding: 0;
    margin: 0;
    height: 1.5em;
    overflow: hidden;

    .label-container {
        position: relative; 
        height: 1.3em;
    }

    .label {
        position: absolute;
        border-left: solid #999 1px;
        padding: 1px;
        padding-bottom: 2px;
        display: inline-block;
    }

    .track-content {
       border: none;
       background: white;
    }

}

.reference-track {
    border: none;
    margin: 0;
    padding: 0;
    // Override Galaxy defaults.
    line-height: 1;

    .track-content {
        min-height: 0px;
    }
}

.right-float {
    float: right;
    margin-left: 5px;
}

.top-labeltrack {
    position: relative;
    border-bottom: solid #999 1px;
}

.nav-labeltrack {
    border-top: solid #999 1px;
    border-bottom: solid #333 1px;
}   

// Styles for tools and filters.
input {
    font: 10px verdana;

    // Override Galaxy defaults to make a smaller button.
    &[type="submit"] {
        padding: 0px;
        margin-right: 20px;
        font-size: inherit;
    }

    &.color-input {
        float: left;
    }
}

.dynamic-tool, .filters {
    padding-top: (@track-header-height + 2);
    padding-bottom: 0.5em;
    margin-left: 0.25em;
}

.dynamic-tool {
    width: 410px;
}

.filters {
    float: left;
    margin: 1em;
    width: 60%;
    position: relative;
}

.display-controls {
    float: left;
    margin-left: 1em;
}

.slider-row {
    margin-left: 1em;
    height: 16px;

    &.input {
        height: 22px;
    }
}

.elt-label {
    float: left;
    width: 30%;
    font-weight: bold;
    margin-right: 1em;
}

.slider {
    float: left;
    width: 40%;
    position: relative;
    padding-top:2px;
}

.tool-name {
    font-size: 110%;
    font-weight: bold;
}

.param-row {
    margin-top: 0.2em;
    margin-left: 1em;
}

.param-label {
    float: left;
    font-weight: bold;
    padding-top: 0.2em;
    width: 50%;
}

.menu-button {
    margin: 0px 4px 0px 4px;
}

.exclamation {
    background: transparent url(../images/fugue/exclamation.png) no-repeat;
    margin-left: 5em;
}

.track-icons {
    float: left
}

// Defines icons that change from black/white to normal on hover. Note that the images
// are required to exist in the location specified.
// TODO: make images into spritemap.
.icon-hover-mixin(@name) {
    &.@{name} {
        background: transparent url('../images/fugue/@{name}-bw.png') no-repeat;

        &:hover {
            background: transparent url('../images/fugue/@{name}.png') no-repeat;
        }
    }
}

.icon-button {
    .icon-hover-mixin(bookmarks);
    .icon-hover-mixin(layers-stack);
    .icon-hover-mixin(hammer);
    .icon-hover-mixin(toolbox);
    .icon-hover-mixin(globe);
    .icon-hover-mixin(block--plus);
    .icon-hover-mixin(toggle);
    .icon-hover-mixin(toggle-expand);
    .icon-hover-mixin(gear);
    .icon-hover-mixin(application-dock-270);
    .icon-hover-mixin(ui-slider-050);
    .icon-hover-mixin(arrow-resize-090);
    .icon-hover-mixin(layer-transparent);
}

.remove-icon, .overview-close {
    background: transparent url(../images/fugue/cross-small-bw.png) no-repeat;
}

.icon-button.remove-icon:hover, .overview-close:hover {
    background: transparent url(../images/fugue/cross-circle.png) no-repeat;
}

.child-track-icon {
    background:url('../images/fugue/arrow-000-small-bw.png') no-repeat;
    width: 30px;
    cursor: move;
}

.track-resize {
    background: white url('../images/visualization/draggable_vertical.png') no-repeat top center;
    position: absolute;
    right: 3px;
    bottom: -4px;
    width: 14px;
    height: 7px;
    border: solid #999 1px;
    z-index: @overlay-index;
}

.bookmark {
    background:white;
    border:solid #999 1px;
    border-right:none;
    margin:0.5em;
    margin-right:0;
    padding:0.5em;

    .position {
        font-weight: bold;
    }
}

.delete-icon-container {
    float:right;
}

.icon {
    display: inline-block;
    width: 16px;
    height: 16px;

    &.more-down {
        background:url('../images/fugue/arrow-transition-270-bw.png') no-repeat 0px 0px;
    }

    &.more-across {
        background: url('../images/fugue/arrow-transition-bw.png') no-repeat 0px 0px;
    }
}

.feature-popup {
    position: absolute;
    z-index: @overlay-index;
    padding: 5px;
    font-size: 10px;
    filter: alpha(opacity=80);
    background-repeat: no-repeat;
    background-image: url(../images/tipsy.gif);
    background-position: top center;
}

.feature-popup-inner {
    padding: 5px 8px 4px 8px;
    background-color: black;
    color: white;
}

.zoom-area {
    position: absolute;
    top: 0px;
    background-color: #ccf;
    opacity: 0.5;
    z-index: @overlay-index; 
}

.mouse-pos {
    position: absolute;
    top: 0px;
    background-color: black;
    opacity: 0.15;
    height: 100%;
    width: 1px;
}

.draghandle {
    margin-top: 2px;
    cursor: move;
    float: left;
    background: transparent url(../images/visualization/draggable_horizontal.png) center center no-repeat;
    width: 10px;
    height: 12px;
}

// Highlight for element(s) being dragged. This definition must be after definition of draggable 
// elements (e.g. track, group) in order to take precedence.
.dragging {
    border: 1px solid blue;
}