/* CSS for the annotation tool. */


/* For the image and canvas, use position:absolute
 * and make their positions the same (default of 0,0).  This'll make
 * them overlap.  Use z-index to determine which "layers" are on
 * top or bottom.  Also, the surrounding div must have
 * position:relative so that the image and canvas don't overlap
 * the rest of the page elements.
 */

#annotationArea {
    position: relative;
}

#imageArea {
    position: absolute;
    overflow: hidden;
}
#imageCanvas {
    position: absolute;
}
#pointsCanvas {
    position: absolute;
}
#listenerElmt {
    position: absolute;

    /* Disable "selecting" this element by double-clicking it;
       that can get in the way while trying to zoom. */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
#rectangle-select-listener {
    position: absolute;

    cursor: crosshair;
}
#rectangle-select-area {
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid black;
    position: absolute;
}

#labelButtons button {
    /* Don't let HTML whitespace create extra horizontal space between button elements.
    That will keep the horizontal space under our control (only left/right margins will
    define the horizontal space). */
    float: left;

    /* Width will be set dynamically; that way we can check for
    text overflow, and make the text smaller if there is overflow. */

    /* Set a transparent border. */
    border: 3px solid transparent;

    /* Make left/right padding small to reduce chances of having to shrink the text.
    At the same time, though, make the padding large enough to reduce chances of
    having the text overflow at certain browser zoom levels. */
    padding-left: 1px;
    padding-right: 1px;

    /* Space the buttons out a little bit. */
    margin: 2px;

    cursor: pointer;
}

/* TODO: Probably want to consider assigning a certain color for each functional group
 * and using that color site-wide.  For example, always green for hard coral.
 * (Maybe make the colors customizable too?) */
#labelButtons button.group1{ background-color: #8888ff; }
#labelButtons button.group2{ background-color: #ff8888; }
#labelButtons button.group3{ background-color: #88ff88; }
#labelButtons button.group4{ background-color: #88ffff; }
#labelButtons button.group5{ background-color: #ff88ff; }
#labelButtons button.group6{ background-color: #ffff88; }
#labelButtons button.group7{ background-color: #888888; }
#labelButtons button.group8{ background-color: #4499dd; }


/* TODO: See if we can change the container and content-container CSS
   like this for the rest of the site, as well. */

/* TODO: Uncomment this to make the page width fluid. Requires various
   changes in the JS layout code, though. */
/*#container {
    width: inherit;
}*/
/* Simplify the padding. */
#content-container {
    width: inherit;
    padding: 0;
}


/* 2-column layout. Based on
   http://alistapart.com/article/holygrail */
#columnContainer {
    /* TODO: Centering the column container only applies for a static-width
       layout (where the columns have static width).
       When it becomes a fluid layout, get rid of this. */
    margin: 0 auto;
}
#columnContainer .column {
    position: relative;
    float: left;
}
#mainColumn {
    width: 100%;
}
#rightSidebar {
}


#toolButtonArea {
    margin-bottom: 5px;
    text-align: center;
}
#toolButtonArea input[type="image"] {
    /* Setting height allows Chrome to correct compute the height of this
     element, even when the image hasn't fully loaded yet.
     http://stackoverflow.com/questions/1743880/image-height-using-jquery-in-chrome-problem */
    height: 24px;

    border: 2px solid #888888;
}
#toolButtonArea input[type="image"].selected {
    border-color: #FF0000;
}

#annotationList {
    /* scrollbars will appear only if they're necessary */
    overflow: auto;

    /* height is set dynamically. */
}


/* Column of point fields; don't use the default form styling */
#annotationForm {
    width: auto;
    margin: auto;
    padding: 0;
}

/* Point fields */
#annotationForm input {
    width: 75px;

    margin: 1px 0;
    padding: 1px 1px;

    cursor: pointer;
}

/* Currently selected points */
#annotationForm tr.selected span.annotationFormLabel {
    background-color: #CCFFCC;
}

/* Robot annotated, not human confirmed yet */
#annotationForm tr.robot input {
    color: #888888;
}

/* Label field has an invalid label code */
#annotationForm tr.error input {
    background-color: #FFCCCC;
}

/* Numbers next to the label fields */
.annotationFormLabel {
    padding: 1px 3px;
    margin: 0 2px;
    border: 1px solid #D7D7D7;

    /* Use the pointer cursor, not the text highlight cursor */
    cursor: pointer;

    /* Make the number's clickable box take up the whole table cell */
    display: block;
}

/* Table cell containing an annotationFormLabel */
td.annotationFormLabelCell {
    text-align: center;
}



/* Annotation field */
#annotation-field {
    width: 110px;

    padding: 1px 1px;

    font-size: 1.2em;
}
#annotation-field.semi-transparent {
    background-color: rgba(255,255,255,0.7);
}
#annotation-field-fixed-container {
    margin: 5px 0 10px 6px;
}
#annotation-field-image-container {
    position: absolute;
}



/* Place for ALL DONE text */
#allDone {
    color: blue;
    font-size: 1.3em;
    font-weight: bold;

    /* Let this element have some height (enough to fit one line of text),
       even when there is no text. This'll ensure that when the ALL DONE
       text appears, it won't collide with any elements below it. */
    height: 1em;

    padding: 5px;
}



/* Image navigation */
#image-navigation {
    text-align: center;
}
#image-navigation form {
    /* Don't use the default form styling */
    display: inline;
    width: auto;
    margin: auto;
    padding: 0;
}

/* Content for modal dialogs */
#dialog-items {
    display: none;
}



/* Brightness and contrast controls */

#image-tools-wrapper {
    text-align: center;
}
#image-tools-wrapper label {
    width: auto;
}
#image-tools-wrapper input {
    margin: 1px 0;
    padding: 1px 1px;

    width: 48px;
}

/* Place for "Applying..." text for image options/tools form */
#applyingText {
    display: inline-block;

    /* Hide the element from view, but let it take up its
       normal amount of space. */
    visibility: hidden;

    font-size: 0.8em;
}



/* jQuery-UI autocomplete menu */
.ui-autocomplete {
    /* have a vertical scrollbar if the list is long enough
       (more than 6 lines) */
    max-height: 11.0em;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}

.ui-autocomplete .ui-menu-item a {
    font-size: 1.2em;
    line-height: 1.2em;
}

.ui-autocomplete.semi-transparent {
    background: rgba(255,255,255,0.7);
}
.ui-autocomplete.semi-transparent .ui-menu-item {
    background: transparent;
}
.ui-autocomplete.semi-transparent .ui-menu-item .ui-state-hover,
.ui-autocomplete.semi-transparent .ui-menu-item .ui-widget-content .ui-state-hover,
.ui-autocomplete.semi-transparent .ui-menu-item .ui-widget-header .ui-state-hover,
.ui-autocomplete.semi-transparent .ui-menu-item .ui-state-focus,
.ui-autocomplete.semi-transparent .ui-menu-item .ui-widget-content .ui-state-focus,
.ui-autocomplete.semi-transparent .ui-menu-item .ui-widget-header .ui-state-focus {
    background: rgba(255,255,255,1.0);
}

/* jQuery-UI sliders. */
.ui-slider {
    width: 130px;
    display: inline-block;
}