/*
form styles
*/

form {
    /*border: solid 1px #46f;*/
    color: black;
    background-color: transparent;
    /*margin: 10px 0;*/
    padding: 5px 10px;
    clear: both; /* makes the forms in the output page not show up next to the floats in the histogram */
}



fieldset {
    margin: 10px 0px;
    padding: 10px;
    border: 1px solid black;
}

fieldset legend {
    color: inherit;
    font-weight: bold;
    border: 1px solid black;
    /*background: #eee;*/
    padding: 3px;
}

/*
form fieldset pop-open-on-legend-mouseover
*/

fieldset.pop_open {
    border-color: transparent;
}

/* fade out the legend when not moused-over */
fieldset.pop_open legend {
    color: black;
    background: inherit;
    border-color: black;
    cursor: pointer;
}

fieldset.pop_open legend:hover {
    color: #888;
    background: inherit;
    /* sorry marshall */
    /*text-shadow: #88a 3px 3px 2px;*/
}

fieldset.pop_open div.fieldset_contents {
    display: none;
}

fieldset.pop_open.activated {
  border: 1px solid black;
}

fieldset.pop_open.activated div.fieldset_contents {
  display: block;
}

fieldset.pop_open.activated legend {
  /*color: black;*/ /* Removing this allows it to hilite on mouseover while active */
  border-color: black;
}

/*
form row formatting
*/

div.form_row {
    padding: 3px 2px;
    clear: left;
}



div.form_row div.label {
    text-align: right;
    float: left;
    margin-bottom: 0.5em;
    width: 12em;
    padding-right: 6px; /* mimic table spacing */
}

div.form_row div.short_label {
    text-align: right;
    float: left;
    margin-bottom: 0.5em;
    width: 8em;
    padding-right: 6px; /* mimic table spacing */
}


div.form_row div.item {
    text-align: left;
    float: left;
}


.toggle_form {
        padding: 0px;
        margin: 0px;
}

.q_mark {
        vertical-align: baseline;
        position: relative;
        bottom: -1px;
        font-size: 10pt;

        cursor: pointer;
        display: inline;
}



.q_tip_wrapper {
        position: relative;
        display: inline;
        text-align: left;

}

.q_tip {
        position: absolute;
        display:none;
        z-index: 3;
        background-color: #6699FF;
        opacity: 1;
        width: 20em;
        padding: 1em;
        color: #fff;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        font-size:10pt;
        font-style:normal;
        font-family:sans-serif;
}

/*
input formatting
*/

input, textarea {
    /*border: solid 1px #ccc;*/
    /*padding: 2px;*/
    /*color: #000;*/
    /*margin: 2px 0px;*/
    /*background-color: #f8f8f8;*/
}


textarea {
        /*width: 40em;*/
}

input, textarea, select {
        font-family: inherit;
        font-size: smaller;
}

input:focus, input:active, textarea:active, textarea:focus
{
    /*border: solid 1px #000;*/
    /*background-color: #d0d0d4;*/
    /*color: white;*/
}

/*
.buttons and .button are used for input type="submit"
*/


div.buttons{
  font-size:11pt;
  background-color: #f5ac3e;
}

div.buttons img{
  padding-left: 1px;
  margin-left: -0.3em;
}

div.buttons input{
  padding-left: 3px;
  margin: 0px;
}


div.buttons input, input.button,  div.buttons a{
    border: 0px solid #ffe4bb;

    color: white;
    background-color: #f5ac3e;
    background-image: url('/images/bottom_gradient_orange_small_darker.png');
    background-repeat: repeat-x;
    background-position: 50% 0%;
    min-width:10px;
    padding-bottom:1px;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    font-size: 11pt;
    width: 7em;
    cursor: pointer;
}

div.buttons.arrow input{
    -moz-border-radius-topright: 15px;
    -moz-border-radius-bottomright: 15px;
    -webkit-border-radius-bottomright: 15px;
    -webkit-border-radius-topright: 15px;
}

div.buttons.green input{
  background-image: url('/images/bottom_gradient_green_small_darker.png');
  background-color: #8bdd5b;
}


div.stretchbuttons input, input.button {
    border: 0px;
    color: black;

    background-color: #f5ac3e;
    background-image: url('/images/bottom_gradient_orange_small_darker.png');
    background-repeat: repeat-x;
    background-position: 50% 100%;
    min-width:10px;
    margin-bottom: 0px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius-topright: 10px;
    -webkit-border-radius-bottomright: 10px;
    font-size: 11pt;
    cursor: pointer;
}

div.stretchbuttons.arrow input, input.button{
    -moz-border-radius-topright: 15px;
    -moz-border-radius-bottomright: 15px;
    -webkit-border-radius-bottomright: 15px;
    -webkit-border-radius-topright: 15px;
}



div.buttons input:hover,div.stretchbuttons input:hover {
    color: #4466FF;
}

div.buttons, div.stretchbuttons {
    text-align: right;
    background-color: transparent;
}

input.button {
    float: right;
}

table.button_table {
    border: 0px solid black;
    margin: 0px 0px;
    padding: 0.3em;
    width: 100%;
    border-spacing: 0px;
}


table.button_table td{
    border: 0px dashed blue;
    clear: both;
    margin: 0px 0px;
    padding: 0px;
    border-spacing: 0px;
    min-width: 10px;
}


table.button_table.button_text td{
    font-size: 11pt;
}


td.button_top {
    padding-top: 0.0em;
    padding-bottom: 0.7em;
    padding-left: 0px;
    padding-right: 0.7em;
    min-height: 0.7em;
    max-height: 10px;

}

table.utility_table{
  padding: 1em;
}

table.utility_table.compact{
  padding: 0em;
}

table.utility_table.medium{
  padding: 2px;
}


table.utility_table td{
    border: 0px dashed red;
    clear: both;
    margin: 0px 0px;
    padding: 0.3em;
    border-spacing: 0px;
    min-width: 10px;
    font-size: 11pt;
}

table.utility_table.compact td{
    margin: 0px 0px 0px 0px;
    padding: 0px;
    vertical-align: middle;
}

table.utility_table.medium td{
    margin: 0px 0px 0px 0px;
    padding: 1px;
    border-spacing: 0px;
    min-width: 12em;
    max-width: 16em;
    font-size: 11pt;
    vertical-align: middle;
}

table.utility_table td.seq_display{
  max-width: 40em;
  font-family: monospace;
  background: #EEEEEE none repeat scroll 0 0;
  border:1px solid #BBBBBB;
}


table.utility_table td.right_label {
    text-align: right;
    border: 0px solid blue;
    float: right;
    vertical-align:bottom;
/*
    margin-bottom: 10px;
*/
    padding: 3px; /* mimic table spacing */
    padding-right: 6px; /* mimic table spacing */
}

table.utility_table div.right_label {
    text-align: right;
    border: 0px solid blue;
    float: right;
/*
    margin-bottom: 10px;
*/
    padding-right: 6px; /* mimic table spacing */
}

table.utility_table div.left_label {
    text-align: left;
    border: 0px solid blue;
    float: left;
/*
    margin-bottom: 10px;
*/
    padding-right: 6px; /* mimic table spacing */
}

div.utility_buttons{
    background-color: #f5ac3e;
    background-image: url('/images/bottom_gradient_orange_small_darker.png');
    background-repeat: repeat-x;
    background-position: 50% 0%;
    min-width:10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-size: 11pt;
    width: 7em;
    text-align: center;
    cursor: pointer;
    padding-top: 1px;
    padding-bottom: 2px;
}

div.utility_buttons.green{
  background-image: url('/images/bottom_gradient_green_small_darker.png');
  background-color: #8bdd5b;
}


div.utility_buttons.arrow {
    background-repeat: repeat-x;
    background-image: url('/images/bottom_gradient_orange_small_darker.png');
    background-position: 50% 0%;
    -webkit-background-size: auto auto;
    -moz-border-radius-topright: 15px;
    -moz-border-radius-bottomright: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    position: relative;
    top:0px;
    left:0px;
}

div.utility_buttons input{
    border: 0px solid #ffe4bb;
    color: white;
    cursor: pointer;
    background-color: transparent;
    font-size: 11pt;
    margin-bottom:0px;
    margin-top:0px;
}

div.utility_buttons.medium {
    padding-top:0px;
    padding-bottom:1px;
}

div.arrow_white {
    border: 0px dashed red;
    position: absolute;
    z-index: 1;
    top:0px;
    left:0px;
    font-size:11pt;
    background-image: none;
    -moz-border-radius-topright: 15px;
    -moz-border-radius-bottomright: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-background-size: 6em auto;
    -webkit-background-size: 6em auto;
    max-width:20px;
    min-width:20px;
    margin-left:-10px;
    padding-top: 1px;
    padding-bottom:2px;
    background-color: #ffffff;

}


a.utility_link{
  color:white;
  background-color: transparent;
  padding-top: 0px;
  padding-bottom:0px;
  padding-left:3px;
  padding-right:6px;
  min-height: 1ex!important;
  min-width:1em;
}


div.utility_buttons a:hover, div.utility_buttons input:hover{
  color: #4466FF;
  text-decoration: none;
}


div.buttons.medium input{
    width: 7em;
    background-color: #f5ac3e;
}

div.buttons.medium a{
    border: solid 1px #46f;
    min-width: 15em;
}


div.form_row div.item {
    text-align: left;
    float: left;
}

.time_estimate {
    font-style: italic;
    font-size: 11pt
}

/* input special cases */

/* for things like concentration that need a short field */
input.short_numeric {
    width: 4em;
    border: 1px solid black;
    text-align: right;
}

input.short_text {
    width: 6em;
    border: 1px solid black;
}

input.long_text {
  width: 15em;
  border: 1px solid black;
  text-align: left;
}

input.very_long_text {
  width: 30em;
  border: 1px solid black;
  text-align: left;
}


/*
form input for the individual species
*/

/* fieldset surrounding the species input fields */
#partition_species_inputs
{
    padding: 5px;
}

div.species
{
    margin-top: 15px;
}

/* a little space before the concentration unit select */
div.species div.concentration div.item select
{
    margin-left: 5px;
}

/* length of per-species sequence input */
div.species div.sequence div.item input
{
    width: 15em;
}

/* shorten up the per-species label width */
div.species div.label {
    width: 8em;
}


/* Form validation error highlighting */

div.fieldWithErrors input {
   /* background-color: #800; */

   /*color: #b00;
   background-color: #f9f0f0;*/
}

div.fieldWithErrors {
    display: inline;
}


/* error report */

.error_report_wrapper {
        padding: 5px 10px;

}

#error_report {
    border: 2px solid #46f;
    padding: 10px;
    margin: 10px 0;
    color: black;
    background-color: #fff;
}

#error_report h2 {
    text-align: left;
    font-weight: bold;
    padding: 5px 5px 5px 15px;
    /*font-size: 12px;*/
    margin: -7px;
    background-color: black;
    color: white;
}

#error_report p {
    color: #b22;
    background-color: inherit;
    margin-bottom: 0;
    padding: 5px;
    font-weight: bold;
}

#error_report ul li {
    font-size: 12pt;
    list-style: circle;
    list-style-image: url("/images/tinyredx.png");
}

.compute_ok {

}

.compute_rejected {
        color: red;
}

.feature_disabled {
        color: gray;
}

.preview_image_size {
        width: 310px;
        margin-left: 18em;
}

.target_error {
        color: red;
        border: 1px solid red;
}

table.base_table {
        margin-top: 1em;
        margin-left: 1em;
        border: 1px solid white;
        border-collapse: collapse;
}

td.base_table_fam {
        min-width: 2em !important;
        text-align: center !important;
        padding: 3px !important;
        border-right: 1px solid white !important;
        font-weight: bold;
}

td.base_table_bases {
        min-width: 5em !important;
        padding: 3px !important;

}

table.utility_results_text_table td{
      text-align:right;
      font-size: x-small;
      padding-top: 0px;
      padding-bottom: 0px;
}

table.utility_results_text_table td.utility_results_left_align{
      text-align:left;
      font-size: x-small;
      margin-left: 0px;
      padding-left: 0px;
      padding-top: 0px;
      padding-bottom: 0px;
}

table.utility_results_drawing_table td.utility_results_left_align{
      text-align:left;
      font-size: x-small;
      padding: 0px;
}


table.utility_results_drawing_table td{
      text-align:right;
      font-size: x-small;
      padding: 0px;
}


canvas.utility_editor {
      width: 55ex;
      max-width: 55ex;
      min-width: 480px;
}



div.utility_editor {
      z-index:0;
      top:0px;
      left:0px;
      margin: 0;
      padding: 0;
      width: 55ex;
      max-width: 55ex;
      min-width: 480px;
      height: 4em;
      border: 1px solid #000;
      font-family:monospace;
}

canvas.design_editor {
      width: 65ex;
      max-width: 65ex;
      min-width: 480px;
}



div.design_editor {
      z-index:0;
      top:0px;
      left:0px;
      margin: 0;
      padding: 0;
      width: 65ex;
      max-width: 65ex;
      min-width: 480px;
      height: 6em;
      border: 1px solid #000;
      font-family:monospace;
}


textarea.utility_editor {
      z-index:0;
      margin: 0px;
      margin-left: 0px;
      position:relative;
      top:0px;
      left:0px;
      opacity: 1.0;
      font-size: 10pt;
      padding: 1px;
      border: 1px solid black;
      width: 55ex;
      max-width: 55ex;
      min-width: 480px;
      height: 5em;
      min-height: 5em;
      overflow: auto;
      font-family:monospace;
}

textarea.sequence_editor {
      border: 1px solid black;
      font-family:monospace;
      font-size: 11pt;
}

div.utility_editor_overlay {
      position: absolute;
      z-index:2;
      top:-2px;
      left:-2px;
      margin: 0px;
      margin-left: 1px;
      z-index:0;
      opacity: 0.3;
      font-size: 10pt;
      padding: 1px;
      border: 1px solid white;
      width: 55ex;
      min-width: 480px;
      height: 100%;
      min-height: 4.2em;
      overflow: auto;
      color: transparent;
      background-color: gray;
      font-family:monospace;
      display:block;
}

textarea.utility_editor_overlay {
      position:absolute;
      top:0px;
      left:0px;
      margin: 0px;
      margin-left: 0px;
      z-index:0;
      opacity: 1.0;
      font-size: 10pt;
      padding: 1px;
      border: 1px solid white;
      width: 55ex;
      min-width: 55ex;
      height: 5em;
      min-height: 5em;
      overflow: auto;
      color: transparent;
      background-color: white;
      color:red;
      font-family:monospace;
}


span.err_dotparens{
      background: #FFBC6A;
}

span.err_char{
      background: #94AAFF;
}

span.err_hairpin{
      background: #7BF333;
}