@charset "UTF-8"; /* Replacement for previous (invalid) form css! */

.hidden { display: none; }
form dd p, form dd pre { padding-left: 0; padding-right: 0; }
form dt {
  clear:both; width:20%; float:left; text-align:right; margin: 1px 0; font-weight: bold
}
.twocol dd.information, form dd.information, .twocol dt.information, form dt.information { width: 100%; text-align: left; font-weight: normal; }
form dt a       { color: #663300; text-decoration: underline; font-weight: bold; }
form dt a:focus, form dt a:hover { color:#ff7c0d; }
form dd         { float:right; width:77%; padding:0 5px; margin: 1px 0 0.5em 0}

/* Classes to tweak the size of the left and right hand column widths...
  usually for checkboxes and drop downs */
form dt.fifty50  { width: 49%; }
form dd.fifty50  { width: 48%; }
form dt.forty60  { width: 39%; }
form dd.forty60  { width: 58%; }
form dt.eighty20 { width: 67%; }
form dd.eighty20 { width: 29%; }
form dt.left     { text-align: left; }
form dt.full_width_caption { float: none; width: auto; text-align: left; }
form dd.full_width_caption { float: none; width: auto; text-align: left; }
textarea._pubmed_list, input._pubmed { float: left; width: 10em }
textarea._pubmed_list { height: 20em }
form dd._pubmed ul { margin-left: 9em; }
form .max_len { float: right; border: 1px solid #666666; font-size: 80%; margin-right: 5em; padding: 1px 0.5em; }
/*
form dd ul { margin: 0; padding: 0; }
form dd ul li { float: left; padding: 0 12px; background-position: -16px -1984px; }
*/
form dt.buttons { width: 100%; text-align: center; }

form dd input, form dd textarea { width: 90%; }
form dd textarea.short { height: 4em }
form dd textarea.narrow { width: 7em; }
form dd input.vshort { width: 4em; }
form dd input.short { width: 7em; }
form dd input.medium { width: 15em; }
form dd input.mediumlong { max-width: 25em; }
form dd input.inline-submit { width: auto; padding: 2px 1em }

form dd select, form dd input { border: 1px solid #666; padding: 2px; }
form dd select:focus, form dd input:focus { border: 2px solid #090; padding: 1px;  }
/*form dd select:focus { padding: 0.5px }*/

form h3 { clear: both; }

div.bordered_short { width: 10em; float: left; border:1px #bcc5cc solid; padding: 0.2em 0.5em; margin-right:1em}
div.bordered       { width: 90%; float: left; border:1px #bcc5cc solid; padding: 0.2em 0.5em; margin-right:1em}
div.bordered_tall  { width: 90%; float: left; border:1px #bcc5cc solid; padding: 0.2em 0.5em; min-height: 10em; margin-right:1em}

ul.boxes { float: left; min-width: 20%; max-width: 90%; }
ul.boxes ul { margin-top: 0; margin-bottom: 0; }
ul.boxes span         { border:1px #bcc5cc solid; padding: 0.2em 0.5em; margin-right: 1em; }

.col-required { background-color: #fec; }
.col-optional { background-color: #fff; }
.col-error    { background-color: #fcc; }
.col-valid    { background-color: #cfc; }
.col-supervalid { background-color: #4a4; }

form.button-only input { font-size: 1.66em; padding: 0.2em 2em; font-weight: bold; margin: 1em; }
form.button-only input.pos { color: #090; }
form.button-only input.neg { color: #900; }

form div.button-row { clear: both; }
form div.button-default { float: right; min-width: 35%; text-align: left; margin-left: 2em; padding-top: 0; }
form div.button-other { max-width: 68%; text-align: right; padding-top: 0.66em; }
form div.button-default input { width: auto; padding: 0.2em 1em; font-weight: bold; font-size: 1.66em; }
form div.button-other input { width: auto; padding: 0.2em 1em; font-weight: bold; }
/*form dd.button-row input.cancel { color: #900; }
form dd.button-row input.next   { color: #090; }*/
form div.button-default input.valid    { color: #090; }
form div.button-default input.invalid  { color: #999; }

form.submitted div.button-default input.valid { color: #960 }

form dd input._checkbox, form dd input.checkbox { width: 1em; background-color: transparent; }
form dd input._checkbox, form dd input.checkbox, form dd input._file { border: 0; }

#rhs .form-progress ul li.valid { color: #090; }
#rhs .form-progress ul li.invalid { color: #900; }
#rhs .form-progress ul li.active { font-weight: bold; }

/* Modified widths so RHS doesn't break..*/
#rhs form div.button-default { width: 40%; } /* Has to be slighlty wider */
.col1 form dd,.col1_of_3 form dd, .col2 form dd, #rhs form dd { width: 73%; } /* Has to be slightly 2% narrow */
.col1 form dd.fifty50,.col1_of_3 form dd.fifty50, .col2 form dd.fifty50, #rhs form dd.fifty50  { width: 46%; }
.col1 form dd.eighty20,.col1_of_3 form dd.eighty20, .col2 form dd.eighty20, #rhs form dd.eighty20 { width: 28%; }

.all-deleted, .deleted, .deleted dl dt, .deleted dl dd { text-decoration: line-through; }

.form_error { color: #8e0018}
.form_warn  { color: #930; }
.form_msg   { color: #960; }
.form_info  { color: #060; }

optgroup { font-style: normal; }

form div.disabled { display: none; }
form dt.disabled { display: none; }
form dd.disabled { display: none; }

.qdef { color: #999; }
ul.ul_james, #rhs ul.ul_james { margin: 0; padding: 0; list-style: none; z-index: 200; text-align: left }
ul li.li_james, #rhs ul li.li_james { background: white; cursor: pointer; background-color: #fff; border: 1px solid #bcc5cc; border-width: 0 1px 1px 1px; padding: 2px; font-size: 90%; text-align: left; margin-left: 0; text-indent: 0 }
ul.ul_james li.li_james_hovered, #rhs ul.ul_james li.li_james_hovered { background-color: #bcc5cc; text-align: left }
ul.ul_james li:before, #rhs ul.ul_james li:before { content: '' }

.file-blob { float: left; width: 200px; }
.file-image { float: left; width: 400px; }

.col1-rhs { width:49%; float: left; }
.col2-rhs { width:49%; float: right; }

#rhs form dl { margin: 5px 5px 5px 10px; font-size: 80%; }
#rhs form .col1-rhs dt, #rhs form .col2-rhs dt { width:80%; text-align: left; font-weight: normal; color: #000 }
#rhs form .col1-rhs dd, #rhs form .col2-rhs dd { width:10% }


.chbarray { display: block; float: right; text-align: right; font-size: 80% }
.chbarray span { background-color: #e0e4e7; font-weight: bold; padding: 2px 0.5em; margin: 0.5em; cursor: pointer; white-space: nowrap }

.close_box { border: 1px solid #ccc; background: url(/core/gfx/close.png) #eee top right no-repeat; padding: 2px 20px 2px 5px; border-radius: 4px; white-space: nowrap; margin-right: 5px }
/* We need to tweak the line height slightly so that the "selected boxes" don't overlap with each other ... */
/* We then need to reset the selected box part! */
.multi_container { line-height: 2em }
.multi_container ul.ul_james { line-height: 1.4em }

.login-button { height: 24px; width: 24px; background: url(/core/gfx/oauth2-buttons.png) #fff no-repeat 0 -100px; vertical-align: middle; margin: 2px 0.5em 2px 2px }
.login-amazon   { background-position: 0 0 }      /* Amazon */
.login-google   { background-position: 0 -25px }  /* Google */
.login-facebook { background-position: 0 -50px }  /* Facebook */
.login-live     { background-position: 0 -75px }  /* Windows live */
.login-shib     { background-position: 0 -125px } /* Shibboleth */
.login-linkedin { background-position: 0 -150px } /* LinkedIn */
.login-sanger   { background-position: 0 -175px } /* LinkedIn */


/* copied from 6 ? */
input.add_entry { width: 3em }

.openid { background: url(/core/gfx/openid.png) no-repeat 2px; width: 70%; padding-left:22px }

dd.composite label { padding-right: 0.5em; }
dd.composite span { padding-right: 0.5em; }
span.composite { white-space: nowrap; padding-left: 1em }
span.composite:first-child { padding-left: 0 }
dd.doublespace { line-height: 2.2em }

@media all and (max-width: 480px) {
  #wrap form dl dd, #wrap form dl dt { width: 100%; float: none; margin-bottom: 0.25em; text-align: left }
  #wrap form dl dd { padding-left: 1em; margin-bottom: 0.5em }
}