/**
* GreenPhyl v5.0 CSS File
**************************
This is the main GreenPhyl CSS file.
It has been generated from "greenphyl.less".

*/
/*
********************************************************************************
Unreviewed old v4 stuff below

@ background_color:           #99ccff;
@ light_blocks_border_color:  #a0a0a0;
@ shadow_color:               #a0a0a0;
@ odd_color:                  #e0ffe0;
@ even_color:                 #c0ffc0;
@ highlight_background:       #ffe080; // GreenYellow;// #d0ffa0;
@ highlight_border:           #c00000;
@ table_header_background:    #e4ffe1;

@ validated_color:            #008000;
@ warning_color:              #ff8000;
@ error_color:                #c00000;
@ note_color:                 #404080;

// Header
@ site_width:                 1280px;
@ logo_width:                 210px;

// Search Box
// the search elements must share the same unit type
@ search_text_width:          32ex;
@ search_submit_width:        12ex;
@ search_box_width:           @ search_text_width + @ search_submit_width + 12ex; // +12ex for spacing and to prevent search button to go on next line

// Tabs
@ tab_text_color:             #006000;
@ tab_background:             #e0ffe0;
@ tab_border_color:           @ blocks_border_color;
@ tab_highlight_color:        @ highlight_background;
@ tab_highlight_border_color: #ff8000;

// Dialog boxes
@ dialog_titlebar_text_color: @ tab_text_color;
@ dialog_titlebar_background: @ tab_background;

*/
/*
################################################################################
# BASE RULE
################################################################################

No class style in this section, only tags (or pseudo, etc.).

*/
body {
  color: black;
  font-family: Verdana, Geneva, sans-serif;
  background: white url('https://www.greenphyl.org/img/background.jpg') 0px 100px repeat fixed;
}
header {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100px;
  color: white;
  background: #90d830 url('https://www.greenphyl.org/img/banner.jpg') repeat-x fixed;
}
main {
  display: block;
  background: white;
  padding: 12px;
}
footer {
  margin: 12px 0;
  padding-top: 10px;
  background: #ddd;
}
footer p {
  width: 100%;
  max-width: none;
  padding: 1em 1ch 1em 1ch;
  text-align: right;
  font-size: x-small;
}
footer img {
  line-height: 80px;
  text-align: center;
  vertical-align: middle;
  max-width: 100%;
}
/* Basic text stuff. */
h1,
h2,
h3,
h4,
h5,
h6 {
  padding-left: 10px;
  font-weight: bold;
}
h1 {
  font-size: 1.5em;
}
h2 {
  font-size: 1.4em;
}
h3 {
  font-size: 1.3em;
}
h4 {
  font-size: 1.2em;
}
h5 {
  font-size: 1.1em;
}
h6 {
  font-size: 1em;
}
p {
  max-width: 1024px;
  margin: 0;
  padding: 1em 0.5ex;
  text-align: justify;
  text-indent: 2ch;
}
a,
a:link {
  color: #009900;
  font-weight: bold;
  text-decoration: none;
}
a:visited {
  color: #009900;
}
a:hover {
  text-decoration: underline;
}
/* Fixed-width/pre-formatted text. */
pre {
  font-family: "Courier New", Courier, monospace;
  white-space: pre;
}
code {
  display: inline-block;
  border: 1px dashed #084008;
  color: #444;
  background-color: honeydew;
  font-family: "Courier New", Courier, monospace;
  white-space: pre;
  overflow: scroll;
}
/* Lists. */
/* Unorder Lists. */
ul {
  list-style-type: disc;
  list-style-position: inside;
}
ul ul,
ol ul {
  list-style-type: circle;
  list-style-position: inside;
  margin-left: 2ch;
}
ul ul ul,
ol ul ul,
ol ul ul,
ol ol ul {
  list-style-type: square;
  list-style-position: inside;
}
ul ul ul ul,
ol ul ul ul,
ul ol ul ul,
ol ol ul ul,
ul ul ol ul,
ol ul ol ul,
ul ol ol ul,
ol ol ol ul {
  list-style-type: disc;
  list-style-position: inside;
}
/* Order Lists.

This piece of style changes the regular ordered list with 1 digit at each level
to a list with as many digit as needed at each level.
Ordered lists should look like this:
1. List item W
   1.1 Sublist item W1
   1.2 Sublist item W2
       1.2.1 Subsublist item a
             1.2.1.1 Subsublist item aha
       1.2.2 Subsublist item b
       1.2.3 Subsublist item c
   1.3 Sublist item W3
2. List item X
3. List item Y
4. List item Z
*/
ol {
  list-style-type: decimal;
  counter-reset: item;
}
ol li {
  display: block;
}
ol li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
}
ol.first-level > li:before {
  content: counters(item, ".") ". ";
}
/* Selection */
::-moz-selection {
  background: #ff8;
}
::selection {
  background: #ff8;
}
/*
################################################################################
# LAYOUT RULES
################################################################################
*/
/* Header logo */
#logo {
  margin-top: 10px;
  margin-left: 10px;
  line-height: 80px;
  vertical-align: middle;
}
/* Active database name */
#active_database {
  padding: 1em;
  background-color: green;
}
#active_database .label {
  font-weight: normal;
}
#active_database .value {
  font-weight: bold;
}
/* Navigation bar */
#nav {
  margin-bottom: 12px;
  background: #ddd;
  padding-top: 0;
  padding-bottom: 0;
}
#nav button.navbar-toggler {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}
#nav a,
#nav .dropdown-item,
#nav a:link,
#nav .dropdown-item:link {
  font-weight: bold;
  color: #009900;
  text-decoration: none;
}
#nav a:visited,
#nav .dropdown-item:visited {
  color: #009900;
}
#nav a:hover,
#nav .dropdown-item:hover {
  color: black;
  text-decoration: none;
}
/* GreenPhyl title colors */
.green-color {
  color: #609020;
}
.phyl-color {
  color: #a05000;
}
/* Frame */
body.frame {
  background: white;
}
/*
################################################################################
# MINOR ELEMENT LAYOUT RULES
################################################################################
*/
/*
  Headers
  Headers are used as titles for page elements when "h*" tags can't be used (for
  instance when outside any flow context).
*/
.header {
  font-size: 1.1em;
  font-weight: bold;
}
/*
  Captions
  Captions and legends can be used for tables (caption), pictures (figcaption),
  fieldsets (legend), code blocks (.caption) or other elements (.caption).
*/
caption,
figcaption,
legend,
.caption {
  font-size: 0.9em;
}
caption .header,
figcaption .header,
legend .header,
.caption .header {
  font-size: 0.9em;
  font-weight: bold;
}
legend {
  width: auto;
}
/* 
  Labels
  labels should be followed by a "value" item or related to a form element.
*/
label,
.label {
  font-weight: bold;
}
.form-inline label {
  -ms-flex-align: left;
  align-items: left;
  -ms-flex-pack: left;
  justify-content: left;
}
/*
  Values
  Values should be prefixed by a "label" item.
*/
/*
  Tables
*/
.bootstrap-table .fixed-table-container .fixed-table-body {
  overflow-x: visible;
  overflow-y: visible;
}
.table thead {
  border-top: 2px solid #dee2e6;
  font-weight: bold;
}
.table.table-bordered thead,
.table.table-striped thead,
.table-header-cell {
  color: black;
  background-color: #cfc;
}
.table tbody {
  background-color: white;
}
.table-bordered th.table-header-cell-bt,
.table-bordered td.table-header-cell-bt {
  border-top: 2px solid #dee2e6;
}
.table-bordered th.table-header-cell-br,
.table-bordered td.table-header-cell-br {
  border-right: 2px solid #dee2e6;
}
.table-bordered th.table-header-cell-bb,
.table-bordered td.table-header-cell-bb {
  border-bottom: 2px solid #dee2e6;
}
.table-bordered th.table-header-cell-bl,
.table-bordered td.table-header-cell-bl {
  border-left: 2px solid #dee2e6;
}
.table tfoot {
  border-bottom: 2px solid #dee2e6;
  font-weight: 600;
}
.table.table-bordered tfoot,
.table.table-striped tfoot {
  color: black;
  background-color: #efd;
}
.table.table-bordered,
.table.table-bordered thead,
.table.table-bordered tfoot,
.table.table-bordered td,
.table.table-bordered th {
  border-color: #444 !important;
}
.table-bordered td,
.table-bordered th {
  border-right: none;
  border-left: none;
}
.table caption {
  margin-top: 2px;
  padding: 0.5em 0.2em;
  border: 2px solid #dee2e6;
  text-align: center;
  background-color: #efe;
  caption-side: top;
}
.table-hover tbody tr:hover,
.table-hover tbody td.hover {
  background-color: rgba(255, 192, 0, 0.25);
}
/*
  Anchor
*/
body.default .anchor {
  position: relative;
  top: -60px;
}
/*
################################################################################
# MODULES RULES
################################################################################
*/
/**
 * Debugging
 ************
 */
.debug-style-block {
  margin: 0;
  padding: 0;
  border: 1px dashed red;
}
.debug-style-block .debug-style-block {
  border: 1px dotted red;
}
.debug {
  display: block;
  margin: 4px;
  padding: 4px;
  border: 1px solid #c00000;
  background-color: #fff0e0;
  font-family: monospace;
  white-space: pre;
}
.error {
  padding-left: 8ex;
  white-space: pre-line;
}
.error .label {
  margin-left: -8ex;
}
/**
 * Icons
 ********
 */
.fab.disabled,
.far.disabled,
.fas.disabled,
.fab[disabled],
.far[disabled],
.fas[disabled],
.disabled > .fab,
.disabled > .far,
.disabled > .fas,
[disabled] > .fab,
[disabled] > .far,
[disabled] > .fas {
  color: gray;
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
/**
 * Dump, action, operation and mylist links
 *******************************************
 */
.btn-group > input.btn.dump-link-first:not(:first-child) {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}
/* this style is used by both "a" and "input" elements */
.dump-link,
.dump-link:link,
.dump-link:visited,
.dump-link:hover,
.dump-link:active {
  color: #009900;
  font-weight: bold;
}
/**
 * Tooltips
 ***********
 */
#tooltip_box {
  font-size: 0.9em;
  position: absolute;
  /*visibility : hidden;*/
  display: none;
  border: 1px solid #086d08;
  padding: 3px;
  background-color: white;
  opacity: 0.85;
}
#tooltip_box p {
  max-width: 80ex;
}
#tooltip_box table {
  margin: 1em;
}
.hidden-tooltip {
  display: none;
}
.tooltiped {
  cursor: help;
}
/**
 * Examples
 ***********
 */
a.example,
a.example:link,
a.example:visited {
  text-decoration: none;
  cursor: pointer;
}
a.example:hover,
a.example:active {
  color: red;
  text-decoration: none;
  cursor: pointer;
}
/**
 * Anti-Spam
 ************
 */
.spamcheck {
  display: none;
}
/**
 * Popup Dialog
 ***************
 */
.popup-dialog,
.ui-dialog {
  z-index: 10000;
}
/**
 * Tables
 *********
 */
.bootstrap-table .table thead th .sortable,
.bootstrap-table .fixed-table-container .table thead th .sortable {
  padding-left: 0.9rem;
}
.bootstrap-table .table thead th .both,
.bootstrap-table .fixed-table-container .table thead th .both {
  background-position: left;
  background-image: url('https://www.greenphyl.org/img/sort_none.svg');
  background-size: 0.8em;
}
.bootstrap-table .table thead th .asc,
.bootstrap-table .fixed-table-container .table thead th .asc {
  background-position: left;
  background-image: url('https://www.greenphyl.org/img/sort_asc.svg');
  background-size: 0.8em;
}
.bootstrap-table .table thead th .desc,
.bootstrap-table .fixed-table-container .table thead th .desc {
  background-position: left;
  background-image: url('https://www.greenphyl.org/img/sort_desc.svg');
  background-size: 0.8em;
}
.bootstrap-table .table thead th.sort-numeric .asc,
.bootstrap-table .fixed-table-container .table thead th.sort-numeric .asc {
  background-position: left;
  background-image: url('https://www.greenphyl.org/img/sort_numeric_up.svg');
  background-size: 0.8em;
}
.bootstrap-table .table thead th.sort-numeric .desc,
.bootstrap-table .fixed-table-container .table thead th.sort-numeric .desc {
  background-position: left;
  background-image: url('https://www.greenphyl.org/img/sort_numeric_down.svg');
  background-size: 0.8em;
}
.bootstrap-table .table thead th.sort-alpha .asc,
.bootstrap-table .fixed-table-container .table thead th.sort-alpha .asc {
  background-position: left;
  background-image: url('https://www.greenphyl.org/img/sort_alpha_asc.svg');
  background-size: 0.8em;
}
.bootstrap-table .table thead th.sort-alpha .desc,
.bootstrap-table .fixed-table-container .table thead th.sort-alpha .desc {
  background-position: left;
  background-image: url('https://www.greenphyl.org/img/sort_alpha_desc.svg');
  background-size: 0.8em;
}
.bootstrap-table .table thead th.sort-amount .asc,
.bootstrap-table .fixed-table-container .table thead th.sort-amount .asc {
  background-position: left;
  background-image: url('https://www.greenphyl.org/img/sort_amount_up.svg');
  background-size: 0.8em;
}
.bootstrap-table .table thead th.sort-amount .desc,
.bootstrap-table .fixed-table-container .table thead th.sort-amount .desc {
  background-position: left;
  background-image: url('https://www.greenphyl.org/img/sort_amount_down.svg');
  background-size: 0.8em;
}
/**
 * Pagination
 *************
 */
nav.pager {
  margin-bottom: 1rem;
  width: 100%;
}
nav.pager ul {
  margin-bottom: 0;
}
nav.pager .page-item:hover .page-link,
nav.pager .page-item:active .page-link {
  color: black;
  background-color: #f0fff0;
  border-color: darkgreen;
}
nav.pager .page-item.disabled .page-link,
nav.pager .page-item.disabled:hover .page-link,
nav.pager .page-item.disabled:active .page-link {
  color: darkgray;
  background-color: white;
  border-color: #dee2e6;
}
nav.pager .page-item.active .page-link {
  font-weight: bold;
  color: white;
  background-color: green;
  border-color: darkgreen;
}
nav.pager .page-item.active .page-link::-moz-selection,
nav.pager .page-item.active .page-link::selection {
  color: darkgray;
}
.page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 0, 0.5);
}
/**
 * JQueryUI overrides
 *********************
 */
.ui-widget-header {
  border: 1px solid #888;
  background: #ccc;
  color: #444;
}
.ui-dialog .ui-dialog-titlebar-close {
  color: #444;
  background-color: white;
  border: 1px solid #888;
}
.ui-dialog .ui-dialog-titlebar-close:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "\274c";
  font-size: 0.8em;
}
.tabs-container .ui-widget-header {
  border-bottom: 1px solid #888;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
.ui-button.ui-state-disabled:hover,
.ui-button.ui-state-disabled:active {
  border: 1px solid #888;
  background: #eee;
  color: #444;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid #888;
  border-bottom: none;
  color: #444;
  background: white;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
  color: #444;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: black;
}
/**
 * Homepage tree
 ****************
 */
#homepage_tree {
  display: block;
  width: 720px;
  height: 720px;
  padding: 0;
  margin: 0;
}
#homepage_tree svg {
  padding: 0;
  margin: 0;
}
#homepage_tree .node circle {
  stroke: darkgray;
  fill: silver;
}
#homepage_tree .node text {
  color: black;
  font: 0.6em sans-serif;
}
#homepage_tree .node-internal circle {
  fill: yellow;
}
#homepage_tree .node-internal text {
  font: 0.6em sans-serif;
}
#homepage_tree .node-leaf circle {
  fill: green;
}
#homepage_tree .node-leaf text {
  font: 0.8em sans-serif;
}
#homepage_tree .node-root circle {
  fill: gray;
}
#homepage_tree .node-pangenome circle {
  stroke: black;
  stroke-width: 2px;
}
#homepage_tree .node-pangenome text {
  font-weight: bold;
}
#homepage_tree .link {
  fill: none;
  stroke: darkgray;
  stroke-width: 1.5px;
}
.species-popup {
  position: absolute;
  text-align: left;
  min-width: 1em;
  min-height: 1em;
  padding: 4px;
  background: lemonchiffon;
  border: 1px solid black;
  border-radius: 5px;
  pointer-events: none;
}
/**
 * Families
 ***********
 */
.family-id.highlighted,
a.family-id.highlighted,
.custom_family-id.highlighted,
a.custom_family-id.highlighted {
  padding-left: 0.5ex;
  padding-right: 0.5ex;
  background-color: gray;
  color: white;
}
.custom_family-id.obsolete,
a.custom_family-id.obsolete {
  color: gray;
  text-decoration: line-through;
}
.family-id.highlighted.obsolete,
a.family-id.highlighted.obsolete,
.custom_family-id.highlighted.obsolete,
a.custom_family-id.highlighted.obsolete {
  color: #404040;
  background-color: #a0a0a0;
}
.processed-family,
a.processed-family {
  font-weight: bold;
  color: blue;
}
.annotated-family,
a.annotated-family {
  border-bottom: 1px dotted;
}
.sequence-count,
a.sequence-count {
  color: gray;
}
/**
 * Sequences
 ************
 */
/**
 * Represented sequences
 ************************
 */
.represented-sequences .dropdown-menu {
  min-width: 50em;
  max-height: 20em;
  background: honeydew;
  overflow: auto;
}
/**
 * IPR
 ******
 */
.ipr-family,
a.ipr-family {
  font-weight: bold;
  text-decoration: overline underline;
}
/**
 * Species
 **********
 */
#species_tree ul {
  list-style-type: none;
}
/**
 * Distance Matrices
 ********************
 */
.distance-matrix {
  font-size: smaller;
}
.distance-matrix .vertical-label {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
/*
################################################################################
# STATE RULES
################################################################################
*/
/**
 * Access restrictions
 **********************
 */
.is-access-restricted .navbar {
  background: #fed;
}
button[aria-expanded="true"]::before {
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  content: '▲';
}
button[aria-expanded="false"]::before {
  font: normal normal normal 14px/1 FontAwesome;
  content: '▼';
}
/*
################################################################################
# THEME RULES
################################################################################
*/
/*############################################################################*/
/*
********************************************************************************
Unreviewed old v4 stuff below


/ *
.table-row-tracker
******************
Highlights each table row when the mouse cursor moves over it.

* /
.table-row-tracker
{
  tr
  {
    &:hover
    {
      background-color: @highlight_background;
      // cursor: pointer;
    }

    table tr:hover
    {
      background-color: lighten(@highlight_background, 10%);
    }
  }
  // No highlight for table footer and header
  thead tr:hover,
  tfoot tr:hover
  {
    background-color: inherit;
    // cursor: default;
  }
}


/ **
******************************************************************************
 Site Page
******************************************************************************
* /

#page
{
  background-color: @page_background_color;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  text-align: left;
  / * overflow: hidden; * /
}


/ **
******************************************************************************
 Site Header
******************************************************************************
* /

/ *
Login block
* /
#login_block
{
  display: block;
  float: right;
  clear: right;
  color: @menu_text_color;
/ *  text-align: right;* /

  a
  {
    color: @menu_text_color;
    background-color: @menu_background_color;
  }
}

/*

/ **
******************************************************************************
 Site Content
******************************************************************************
* /

/ * used to pad blocks or text outside paragraphs * /
.padded
{
  margin: 2em 4ex;
  padding: 0;
}



/ * help links * /
a.help-link
{
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('../img/help.png');
  color: transparent;
  font-size: 0;
  vertical-align: top;
  cursor: help;
}


/ * used by "+/-" images to toggle block display * /
.toggler
{
  margin: 0 0.5ex;
  vertical-align: middle;
}

.toggle-container {
  margin: 2em 0 0 0;
  padding: 0 0 1em 0;
  text-align: left;

  > .header
  {
    display: inline-block;
    margin: -1em 1ex 0.2em 1ex;
    padding: 0.2em 1ex;
    background-color: @page_background_color;
  }
}

.toggle-container-opened
{
  border: 1px solid @light_blocks_border_color;
  > .header
  {
    margin-bottom: 1.2em;
  }
}

.toggle-container-closed
{
  border: 1px dotted @light_blocks_border_color;
}

.column-toggler
{
  display: block;
  float: left;
  margin: 0;
  border: 1px solid #000000;
  padding: 0;
  width: 12px;
  height: 12px;
  background-color: #404040;
  color: #e0e0e0;
  cursor: pointer;
  text-align: center;
  font-size: 10px;
}

/ * Elements placing * /
/ * used to center elements with fixed width or text * /
.centered
{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/ * used to center blocks (block content can have a different alignment)
This class is processed by jQuery to build the following structure:

Starting content:
<div class="center-block">Any kind of content</div>

Resulting content:
<div class="centered-outer">
  <div class="centered-inner">
    Any kind of content
  </div>
</div>
<br class="clear"/>

* /
.center-block
{
}

.centered-outer
{
  display: block;
  clear: left;
  float: left;
  position: relative;
  left: 50%;
  margin: 0;
  padding: 0;
}

.centered-inner
{
  display: block;
  float: left;
  position: relative;
  right: 50%;
  margin: 0;
  padding: 0;
}

/ * justify text * /
.justify
{
  text-align: justify !important;
}

/ * align text to the left * /
.left
{
  text-align: left !important;
}

/ * align text to the right * /
.right
{
  text-align: right !important;
}

/ * used for div larger than the page * /
.scrollable
{
  overflow-x: auto; // scroll
}


/ * to have smaller fonts for list of items in tables * /
.item-list
{
  font-size: smaller;
}

/ * legend images * /
img.legend
{
  vertical-align: middle;
}

/ * +/-/toggle images * /
img[src*='/plus.png'],
img[src*='/minus.png'],
img[src*='/toggle.png']
{
  vertical-align: middle;
}

/ * email icon * /
img[src*='/email.png']
{
  vertical-align: middle;
}

/ * Ajax loader * /
img[src*='/ajax-loader.gif']
{
  background-color: white;
}

/ * GO Browser images * /
fieldset
{
  img[src*='/devfrom.gif'],
  img[src*='/is_a.gif'],
  img[src*='/part_of.gif'],
  img[src*='/leaf.gif'],
  img[src*='/regulates.gif']
  {
    margin-top: 8px;
    margin-bottom: 10px;
    vertical-align: middle;
  }
}

.go_tree
{
  img[src*='/devfrom.gif'],
  img[src*='/is_a.gif'],
  img[src*='/part_of.gif'],
  img[src*='/leaf.gif'],
  img[src*='/regulates.gif']
  {
    margin-top: -6px;
    vertical-align: middle;
  }
}





/ **************************************************************************** /
/ ** /

.warning
{
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
  font-weight: bold;
  color: @warning_color;
}

.note
{
  font-size: smaller;
}

.hidden
{
    display: none;
}

/ *
Used by annotation interface.
* /
.highlight
{
  font-weight: bold;
  color: red;
}

/ *
Editable fields
* /
.editable
{
  font-weight: normal;
  color: #ff8000;
  cursor: pointer;
}

/ *
Used by fields that have been edited
* /
.modified
{
  font-weight: bold;
  color: #ff4000;
  cursor: pointer;
}

/ *
Used by annotation interface button.
* /
input.need-save
{
  border-color: #ff4000;
  border-width: 2px;
  color: #400000;
  background-color: #ffa000;
  font-weight: bold;
  text-decoration: blink;
}

input[disabled="disabled"].need-save
{
  border-color: #808080;
  border-width: 2px;
  color: #808080;
  background-color: #c0c0c0;
  font-weight: bold;
  text-decoration: none;
}

/ *
Used by highlight group function to highlight groups of elements.
* /
.highlight-group-on
{
  background-color: @highlight_background;
}

/ *
Used to highlight a block
* /
.block-highlight
{
  padding: 1px;
  &:hover
  {
    padding: 0;
    border: 1px solid @highlight_border;
    background-color: @highlight_background;
    // cursor: pointer;
  }
}



/ * START sequence table * /
#result th
{
    white-space: nowrap;
    text-align: center;
    border-left: 1px solid @blocks_border_color;
    border-right: 1px solid @blocks_border_color;
}

#result td
{
    text-align: left;
    vertical-align: top;
    border-left: 1px solid @blocks_border_color;
    border-top: 1px solid @blocks_border_color;
    border-right: 1px solid @blocks_border_color;
    padding: 0.1em;
}
/ * END sequence table * /




/ * ************************** * /

.scroll-td {
    background-position:center;
    background-repeat:repeat-y;
    cursor: pointer;
}


/ *--------------------------------------------------
  News RSS box
  --------------------------------------------------* /

.rssBoxPromo {
  display: none;
}

.rssBox a {
 color: rgb(20, 133, 216);
}

/ **
* My List
**********
* /
/ * My List iframe (container) * /
#mylist
{
  border: 0;
  width: auto;
}

#export_box
{
  height: 2em;
}

.mylist-show-link
{
  float: right;
}

.mylist-add-link
{
  vertical-align: super;
  font-size: 75%;
}

.mylist-remove-link
{
  font-size: 75%;
}


/ **
* Suggest name
***************
* /
.suggest-link
{
  vertical-align: super;
  font-size: 75%;
}


/ **
* Annotation
*************
* /
.annotation-link
{
  vertical-align: super;
  font-size: 75%;
}

.to-annotation
{
  vertical-align: super;
  font-size: 75%;
  &:hover
  {
    cursor: pointer;
  }
}




/ **
* Color Picker
***************
* /
#bg_color_button
{
  position: fixed;
  bottom: 16px;
  left: 16px;
  width: 8ex;
  margin: 0;
  padding: 4px;
  overflow: hidden;
  border: 1px dashed gray;
  color: white;
  text-shadow: 0px 0px 3px black;
  text-align: center;
  font-size: xx-small;

  &:hover
  {
    cursor: pointer;
  }
}

#color_picker
{

  width: 460px;
  
  #cp_color_sliders
  {
    margin: 0;
    padding: 0;
    width: 300px;
    
    #cp_red,
    #cp_green,
    #cp_blue
    {
      float: left;
      clear: left;
      width: 256px;
      margin: 8px;
    }
  }

  #cp_swatch
  {
    width: 96px;
    height: 96px;
    margin: 8px;
    border: 1px solid @blocks_border_color;
    background-image: none;
    text-align: center;
  }
  
  #cp_value
  {
    margin: 8px;
    border: 1px solid @blocks_border_color;
    background-image: none;
  }

  #cp_red .ui-slider-range { background: #c00000; }
  #cp_red .ui-slider-handle { border-color: #c00000; }
  #cp_green .ui-slider-range { background: #00a000; }
  #cp_green .ui-slider-handle { border-color: #00a000; }
  #cp_blue .ui-slider-range { background: #0000ff; }
  #cp_blue .ui-slider-handle { border-color: #0000ff; }

}


/ **
* jQuery UI customization
**************************

* /
/ * Corner radius * /
.ui-corner-tl { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; }
.ui-corner-tr { -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; }
.ui-corner-br { -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; }
.ui-corner-top { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; }
.ui-corner-right {  -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; }
.ui-corner-left { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; }
.ui-corner-all { -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; border-top-left-radius: 6px; }


.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default
{
  background: @tab_background;
  color: @tab_text_color;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited
{
  color: @tab_text_color;
}

.ui-widget-content
{
  border: 1px solid @tab_border_color;
  background: white;
}

.ui-widget-header
{
  border: 0; // 1px solid #a0f0a0;
  border-bottom: 1px solid @tab_border_color; // #00a000;
  background: @page_background_color;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus
{
 border: 1px solid @tab_highlight_border_color;
 background: @tab_highlight_color;
 color: @page_background_color;
 text-shadow: 2px 2px 2px @shadow_color;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active
{
  border: 1px solid @tab_border_color;
  background: @page_background_color;
  color: @text_color;
  text-shadow: 2px 2px 2px @shadow_color;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited
{
  color: @text_color;
  text-shadow: 2px 2px 2px @shadow_color;
}

.ui-dialog
{
  position: relative;
  padding: 0;
  border-width: 3px;
}

.ui-dialog-titlebar
{
  background: @tab_background;
}


/ **
*********
* FORMS *
*********
* /
input.default-text, textarea.default-text
{
  color: #808080;
}

.invalidated
{
  border: 2px solid orange !important;
}


/ **
****************
* QUICK SEARCH *
****************
* /
table.qsearch
{
  width: 48%;
  margin: 1%;
  float: left;
  
  th, td
  {
    padding: 4px 8px;
    border: 1px solid #000000;
    vertical-align: middle;
  }

  tr.search-group
  {
  }

  tr th.search-group-label
  {
    width: 50%;
    text-align: center;
  }

  tr.search-mode
  {
    height: 52px; / * ajax-loader.gif height * /
  }

  tr th.search-label
  {
    width: 50%;
  }

  tr td.search-result-count
  {
    width: 50%;
  }
}


div.search-result
{
}

.result-count
{
  display: none;
}


/ **
* GRAPHICS AND CHARTS
**********************
* /
.graph-container
{
  min-width: 50px;
  min-height: 50px;
  background-repeat: no-repeat;
  background-image: url('../img/ajax-loader.gif');
}


/ **
MISC
* /
.horizontal-container
{
  margin: 0;
  padding: 0;
  width: 100%;

  >.block
  {
    float: left;
  }
}

.wrapword
{
  //white-space: -moz-pre-wrap !important; // * Mozilla, since 1999 * /
  //white-space: -pre-wrap; // * Opera 4-6 * /
  //white-space: -o-pre-wrap; // * Opera 7 * /
  //white-space: pre-wrap; // * css-3 * /
  word-wrap: break-word; // * Internet Explorer 5.5+ * /
  //word-break: break-all;
  //white-space: normal;
}


a.example, a.example:link, a.example:visited
{
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}

a.example:hover, a.example:active
{
  color: red;
  text-decoration: none;
  cursor: pointer;
}

/ **
"more" link
* /
a.more, a.more:link, a.more:visited
{
  font-size: smaller;
  font-style: italic;
  font-weight: normal;
  text-decoration: none;
  cursor: pointer;
}

a.more:hover, a.more:active
{
  font-size: smaller;
  font-style: italic;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}


.bordered-block
{
  margin: 0;
  padding: 0;
  border: 1px solid @blocks_border_color;
  
  .bordered-block
  {
    border: 1px dotted @blocks_border_color;
  }
}

.dynamic-block
{
  margin: 12px 0;
  padding: 12px 24px;
  border: 1px dotted @blocks_border_color;
  overflow-x: auto;
}

.create-account-block
{
  width: 352px;
}

.openid-block
{
  width: 362px;
}


/ **
* ICONS
********
* /
.validated-icon
{
  display: block;
  width: 18px;
  height: 18px;
  margin-left: auto;
  margin-right: auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('../img/validated.png');
  color: transparent;
  font-size: 0;
  vertical-align: top;
}

.cluster-icon
{
  display: inline-block;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: top left;
  background-image: url('../img/cluster.png');
  color: transparent;
  font-size: 0;
  vertical-align: middle;
}

.custom-cluster-icon
{
  .cluster-icon;
  background-image: url('../img/custom_cluster.png');
}

.old-cluster-icon
{
  .cluster-icon;
  background-image: url('../img/old_cluster.png');
}

.sequence-icon
{
  display: inline-block;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: top left;
  background-image: url('../img/sequence.png');
  color: transparent;
  font-size: 0;
  vertical-align: middle;
}

.custom-sequence-icon
{
  .sequence-icon;
  background-image: url('../img/custom_sequence.png');
}

.family-analyzes
{
  vertical-align: middle;
  box-shadow: 2px 2px 2px @shadow_color;
}



.ipr-canvas
{
  margin-top: 1em;
  margin-bottom: 1.5em;
}

.ipr
{
  border: 1px dotted transparent;
}

.go
{
  font-weight: bold;
}

.highlight-ipr
{
  padding: 0px;
  border: 1px dotted red;
}

.family-box
{
  &:hover
  {
    cursor: pointer;
  }
}

.family-relationship-diagram,
.ipr-family-distribution-diagram,
.go-family-distribution-diagram
{
  border: 1px solid #000000;
  background-color: @page_background_color;
  width: 90%;
  overflow: auto;
}

.private,
a.private
{
  color: #c00000;
}

.protected,
a.protected
{
  color: #ff6000;
}

.group,
a.group,
.group-write,
a.group-write
{
  color: #00c0c0;
}

.public,
a.public,
.public-write,
a.public-write
{
  color: #009900;
}

.public.processed-family,
a.public.processed-family,
.public-write.processed-family,
a.public-write.processed-family
{
  color: blue;
}

.public.processed-family.obsolete,
a.public.processed-family.obsolete,
.public-write.processed-family.obsolete,
a.public-write.processed-family.obsolete
{
  color: darkblue;
}

.public.highlighted,
a.public.highlighted,
.public-write.highlighted,
a.public-write.highlighted,
.public.processed-family.highlighted,
a.public.processed-family.highlighted,
.public-write.processed-family.highlighted,
a.public-write.processed-family.highlighted
{
  color: white;
}

.species-legend
{
  .legend-item
  {
    display: block;
    float: left;
    width: 34ex;
    list-style-type: none;

    .color-box
    {
      display: block;
      float: left;
      height: 16px;
      width: 16px;
      margin: 2px;
      border: 1px solid #000000;
    }
    
    .description
    {
      display: block;
      float: left;
      height: 16px;
      width: 26ex;
      margin: 4px 2ex 2px 1ex;
      font-size: small;
    }
  }
}

#search_page
{
  padding: 32px;
}

/ *
Fixed width inline elements 
Use: to use with div tags. The width should be specified using parameter:
 style="width: 12ex;".

Note: 'ex' unit corresponds to the width of current font. Therefore, 12ex would
allocate space for arround 11-12 letters.

Note: when using width in percent, remember there are padding width so the sum
of the element width should be less than 100% (to keep room for these paddings).

Note: this class doesn't work properly with IE7 and below. The use of div will
put each element on separate lines. The use of span will keep elements on a same
line.

Ex.:
<label><span class="inline-block" style="width: 12ex;">Login: </span><input name="login" id="login" type="text"/></label><br/>
<label><span class="inline-block" style="width: 12ex;">Password: </span><input name="password" id="password" type="password"/></label><br/>

Ex.2:
<div class="inline-block right" style="width: 10%;">Family ID</div>
<div class="inline-block" style="width: 10%;">IPR Domain</div>
<div class="inline-block" style="width: 60%;">Description</div>
<br/>

<div class="inline-block right" style="width: 10%;">578</div>
<div class="inline-block" style="width: 10%;">IPR002453</div>
<div class="inline-block" style="width: 60%;">Beta tubulin</div>
<br/>

<div class="inline-block right" style="width: 10%;">572</div>
<div class="inline-block" style="width: 10%;">IPR006843</div>
<div class="inline-block" style="width: 60%;">Plastid lipid-associated protein/fibrillin</div>
<br/>

<div class="inline-block right" style="width: 10%;">68016</div>
<div class="inline-block" style="width: 10%;">IPR011710</div>
<div class="inline-block" style="width: 60%;">Coatomer, beta subunit, C-terminal</div>
<br/>

* /
.inline-block
{
  display: inline-block;
  padding-right: 4px;
  vertical-align: top;
}

.clickable:hover
{
  cursor: pointer;
}

.operator
{
  cursor: pointer;
}


.index
{
  .inline-block;
  width: 80ex;
  border-bottom: 1px dotted gray;
}

.image-legend
{
  font-style: italic;
  font-size: x-small;

  .header
  {
    padding: inherit;
    margin: inherit;
    font-weight: bold;
    font-size: inherit;
  }
}

.fasta
{
  display: inline-block;
  margin-left: 8%;
  color: #404040;
  font-weight: bold;
  letter-spacing: 0.4ex;
}

.details-toggler
{
  float: right;
  clear: right;
  font-size: small;
}

span.details,
div.details
{  
}

.not-available
{
  font-weight: bold;
}

.species-name
{
  display: inline-block;
  width: 24ex;
}

.duration
{
  font-size: xx-small;
}

#page.restricted,
{
  background-color: #fff8e0;
}

.disabled
{
  color: gray;
}

.flag-admin
{
  color: red;
  font-weight: bold;
  cursor: pointer;
}

.flag-annotator
{
  color: blue;
  cursor: pointer;
}

.flag-registered
{
  color: green;
  cursor: pointer;
}

.flag-disabled
{
  color: gray;
  font-style: italic;
  cursor: pointer;
}

/ **
Tree Pattern
* /
#treepattern_frame
{
  width: @site_width - 48;
  height: 600px;
  border: 1px solid #404040;
}


/ **
RDF
* /
.rdf-export {
  float: right;
  vertical-align: super;
  font-size: 75%;
}

*/