body  {
	font-family: arial, verdana, helvetica, sans-serif;
	padding: .2em;
	background-color: #a0c0e0;
}

a { color: rgb(8,81,156); text-decoration: none; }
a:hover { color: #000; background: #ffc; }

hr  { color: #888; margin-bottom: .2em; margin-top: .2em; }

h1  { font-size: 16px; font-weight: bold; }
h2  { font-size: 14px; font-weight: bold; }
h3  { font-size: 12px; font-weight: bold; } /* right now h3 and h4 look identical and are used inconsistently (use h3) */
h4  { margin: 0px; } 

img { border: none; }

ul  { list-style-type: none; }
li .handle { /* ripped from railscasts */
  cursor:move;
  color: #777;
}

table { border-spacing:0em}
td  {padding-left: .3em; padding-right: .3em;  vertical-align: top; background: none;}
tr.stripe {background-color: #efefef;}

/************ Page Structure (the layout for all private pages)  ************/
#container { border: 1px solid #ccc; background: #fff; }

#header { background: rgb(247, 251, 255); 
  border-style: none none solid; 
  border-width: 0 0 1px; 
  border-color: #c0c0c0; }

#header p { margin: 0 0 0 2.45em; padding: 0.5em; }
#header span.links { font-size: 70%; margin: 0.2em 0.6em; }
#content { font-size: 12px; padding: 0.5em 1em 1em }

/******** Top Level Tabs **********/
#tabs { margin: 0; padding: 0.25em;  margin-left: 1em; font-size: smaller;  width: auto; }
#tabs a { display: inline-table; margin-bottom: -4px;}
#tabs a:link, #tabs a:visited {color: #3b3b3b; background: rgb(222, 235, 247); text-decoration: none;  margin-left: 0.3em; padding: 0.2em 0.8em; border: solid 1px #c0c0c0 }
#tabs a:link.current, #tabs a:visited.current  { color: #000; font-weight: bold; background: #fff; border-bottom: 1px solid #fff }
#tabs a:hover, #tabs a:link.current:hover, #tabs a:visited.current:hover { color: #000; background: #ffc; }

/********** Second level navigation **********/
div.subnav { border-top: 2px solid rgb(198,219,239); margin-bottom: .3em; width: auto; }
.subnav a {display: inline-table; }
.subnav a:link, .subnav a:visited {margin-left: 0.3em; padding: 0em 0.8em 0.2em; }
.subnav a:link.current, .subnav a:visited.current { font-weight: bold; color: rgb(8,48,107); background: rgb(198,219,239); }

/********** 'List' / Pagination **********/

div.list_scope { float: right; color: gray; font-size: smaller} 
div.list_pagination { margin-left: .2em; margin-bottom: .2em; background: #eee; padding: .1em;}
td.list_action {font-size: smaller;}

/********** 'Show' navigation **********/
/* navigation links on browse show page */
div.navigator { padding-top: .4em; text-align: center; }
div.navigator a { padding: .1em; display: block; }
div.navigator .navigator_link { margin: .2em; } /* the center edit link */
div.navigator .navigator_current { padding-right: 0.2em;  border: solid 2px #483d8b; }
div.navigator .item { text-align: center; padding: .1em; margin: .2em; } /* each 'show' link */
div.navigator_buttons { margin-bottom: .3em; text-align: center; } /* for the row of buttons */
div.navigator_buttons a { display: inline; }
div.navigator .navigator_button { padding: .2em; margin-left: 0em;  font-size: smaller; }

/*left & right naxigation arrows (e.g., when cruising between OTUs after you 'show'-ed one*/
div.navigator .navigator_button a:link, div.navigator .navigator_button a:visited   { color: #fff; font-weight: bold; text-decoration: none; background: #000080; margin-left: 0.3em; padding: 0.2em 0.8em; border: solid 1px #808080 }
div.navigator .navigator_button a:link.current, div.navigator .navigator_button a:visited.current {border-bottom: 1px solid #fff; background: #ffffff; font-weight: bold; }
div.navigator .navigator_button a:hover, div.navigator .navigator_button a:link.current:hover, div.navigator .navigator_button a:visited.current:hover {background: #ffc; color: #000;}

/****** Widespread usage ******/
table.full_width {width: 100%; } /* make a table use the full width of the div */
          
/* these 4 classes render backgrounds in many places */
.failed      { background-color: #f6c3d4; }
.passed      { background-color: #b5ebc7; }
.no_decision { background-color: #b1c2e6; }
.highlight   { background-color: #ffffcc; /* yellow or #ddddaa? */ }
.ip_edit     { background-color: #f0fff0; padding: 2px;}

.dashed_underline {border-bottom: 1px dashed;}

.small_form_button {  
  font-size: smaller; padding: 0em; 
  background-color: #a0c0e0;
  border:1px solid #696;
}

.small_form_button:hover {  
  background-color: #ffffcc;
}

.list_table {font-size: 11px; }
.smaller_font {font-size: smaller; }
.small_grey {font-size: smaller; color: rgb(113,113,181); }

p.hanging {
  margin-left: 0;
  padding-left: 1em;
  text-indent: -1em;
}

/* labels for tables (row/column, etc.; e.g., click 'show' for a taxon) */
.lbl1    {  font-size: 9pt; /* variable font */
      font-variant: small-caps;
      font-weight: bold;
      text-align: right; /* why? */
      padding-right: 4px;
      vertical-align: top; }

.lbl2  {  font-weight: bold;
      text-align: right; /* why? */
      padding-right: 4px;
      vertical-align: top; }

.lbl3  { font-size: 12px; 
      font-weight: bold;
      padding: .2em;
     /* note this */}

.lbl4 {  font-size: 9pt; /* variable font */
      font-variant: small-caps;
      text-align: right; /* why? */
      padding-right: 4px;
      vertical-align: top; }

/* blocks of text, like paragraphs */
.txt1 {  font-size: 10pt; /* variable font */
      text-align: right;
      vertical-align: top; 
      color: #666;
}

.txt2 {} 

.box1 { background-color: #fff8dc; padding: .6em; border: solid 1px #707070; } /* removed width: 100% */

.box2 { background-color: #fffff0; padding: .6em; border: solid 1px #707070; } /* removed width: 100% */ 
div.box2.header {font-weight: bolder; text-align: left; border-bottom: 1px solid silver;}

.box3 { padding: .4em; } /* no color, just padding, as basis */
  
.box4 { margin: 0.2em 0.2em 0.2em 0.2em; border-style: solid; border-width: 2px; border-color: #e4e4e4; }
div.box4 .header  { text-align: center;  background-color: #e4e4e4; color: #444;  font-size: 90%; padding: .4em; }
div.box4 .content {  font-size: 90%;  margin: .2em; padding: .4em; }

.box5 {
  padding: .2em;
  margin: 1em;
  border: 1px solid silver;
}

.subform { /* styling to indicate a number of grouped fields, typically in has and belongs to many  */   
      width: auto;
      padding: .5em;
      border: 1px solid gray;
      background: #DDDDFF;
      text-align: left;
      margin: .5em;
      clear: both;
}

div.subform .header { text-align: center; position: relative; top: -1em;  font-weight: bolder; border: 1px solid gray; background-color: #e4e4e4; color: #444; font-size: 90%; padding: .2em; }

.destroy_button:hover { color: #000; background: #ffc; }

.form_button {margin-left: 26%;}

/********** OTHER DIVS  **************/
div.notice {
  background-color: #ffa;
 /* border: 1px solid #999; */
  padding: 0 0.3em;
  margin-bottom: 0.4em;
}

/********** REDCLOTH **************/
.rc_markup { /* textfields/areas that allow Redcloth (=Textile) markup */
  background-color: #F7F0F0; 
  font-family: Geneva, Arial, Helvetica, sans-serif; 
  font-size: 1.2em;
}

/*********  AUTO-COMPLETE copied from rails-generated code  ********/
div.auto_complete { z-index: 999; width: 350px; background: #fff; }
div.auto_complete input { height: 2px; margin: 0px; }
div.auto_complete ul { border:1px solid #888; margin:0; padding:0; width:100%; list-style-type:none;}
div.auto_complete ul li { margin:0; padding:3px; }
div.auto_complete ul li.selected { background-color: #ffb; }
div.auto_complete ul strong.highlight { color: #800; margin:0; padding:0; }

/* and modified here... */
input.ajaxPicker  {background-color: #e4eaff; border-color: #55ff11;}
input.ajaxPickerSmall  {background-color: #e4eaff; border-color: #55ff11; font-size:smaller; margin: 0px;}

span.tnParent { /* TaxonName autocomplete results */
  color: #888;
}

/************ Pop forms (tags/figures) ************/
div.cart {
  clear:both;
  border:1px solid #E8A400;
  background-color: white;
  padding: 8px;
  min-width: 300px;
}

div.cart-active {
  background-color: #b5ebc7;
}

/* do not mess with this unless you test *all* popups */
.popupform {
  padding: .5em;
  border: 2px solid gray;
  background: #FFDDDD;
  text-align: left;
  margin: .5em;
  font-size: 10px;
  font-weight: 700;  
 /* width: 390px;  defined on form */
  z-index: 9000;
  position: absolute; 
  left: 25%;

  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}


/* form row for table like forms */
div.fr { /* row */
  clear: both;
  padding-top: .45em;/*  5px;*/
}

div.fr label {
 float: left; width: 25%; text-align: right;
}
  
div.fr span.fld {
 float: right; width: 74%; text-align: left;
}

/********  ERROR FORMATTING copied straight from scaffold css ********/
.fieldWithErrors { padding: 2px; background-color: red; display: table; }
#errorExplanation  { background-color: #f0f0f0; margin-bottom: 20px; padding: 7px 7px 12px; width: 400px; border: solid 2px #c00 }
#errorExplanation h2 { text-align: left; font-weight: bold; padding: 5px 5px 5px 15px; font-size: 12px; margin: -7px; background-color: #c00; color: #fff; }
#errorExplanation p { color: #333; margin-bottom: 0; padding: 5px;}
#errorExplanation ul li { font-size: 12px; list-style: square; }


/******** 3 column css used in multiple places
 robbed from http://www.alistapart.com/articles/holygrail
 and modified to act as a sub container ************/
#inner_wrapper {
  min-width: 610px;      /* 2x LC width + RC width */
}

#inner_container {
  padding-left: 150px;   /* LC width */
  padding-right: 260px;  /* RC width */
}
#inner_container .column {
  position: relative;
  float: left;
}
#inner_center {
  width: 100%;
  margin-bottom: .5em;
}
#inner_left {
  width: 150px;          /* LC width */
  right: 150px;          /* LC width */
  margin-left: -100%;    /* this not in error */
}
#inner_right {
  width: 260px;          /* RC width */
  margin-right: -260px;  /* RC width */
}
#inner_footer {
  clear: both;
}
#inner_header {
  padding-bottom: .2em;
}

#inner_header a { text-decoration: none; }

/*** IE6 Fix; Move to Firefox! http://www.mozilla.com/firefox/ (or Opera) You won't regret it! ***/
* html #inner_left {
  left: 200px;           /* RC width */
}

/**********  CLASS SPECIFIC  **********/

/***********  OTU NAMES  *************/
span.otu_taxon_name { color: black;}
span.otu_name { color: blue;}
span.otu_manuscript_name { color: red;}
span.otu_matrix_name { color: green;}
span.otu_id { color: gray;}

/***********  IMAGES / FIGURES  ***********/
.browse_rec {
  height: 240px;
  float: left;
  padding: 0.5em;
  border: 1px solid gray;
  margin: 0.3em;
  background-color: #ffc;
  white-space: nowrap;
}

.browse_thumb { padding: .2em; }

.fig { background-color:#ffc; margin:0.3em; padding:0.5em; float: left; border:1px solid gray; min-height: 175px; min-width: 160px; font-size: 10px;}
.fig .image {text-align: center; margin-left: auto; margin-right:auto;}
.fig a:hover { text-decoration: none; border-bottom: 0 none }
.attached_figs {clear: right;} /* changed from both */
.fig_edit {
  height: 260px;
  float: left;
  padding: 0.5em;
  border: 1px solid gray;
  margin: 0.3em;
  background-color: #ffc;
  white-space: nowrap;
}


/* Thanks son of Suckerfish! http://www.htmldog.com/articles/suckerfish/dropdowns/ */

/********** Right floated navigation (could be simplified, vs. subnav) **********/
div.subnav .class_navigator {
  background-color: rgb(198,219,239);
  padding: 0em;
  margin: 0em;
}

div.subnav .class_navigator a:link, .class_navigator a:visited {
  margin: 0px;
  padding: 0px;
  color: rgb(33,113,181);
}

div.subnav .class_navigator a:hover {
  color: rgb(8,48,107);
  padding: 0em;
  margin: 0em;
}

div.subnav table {
  border-spacing: 0px;
}

#nav_dd, #nav_dd ul {
	padding: 0;
	margin: 0;
	list-style: none;
  background-color: rgb(222, 235, 247);
  z-index: 900;
}

#nav_dd a {
	display: block;
	width: 20em;
}

#nav_dd li {
	float: left;
	width: 20em;
  padding: 3px;
}

#nav_dd li ul {
	position: absolute;
	width: 20em;
	left: -999em;
}

#nav_dd li:hover ul {
	left: auto;
}

/* display_name classes   */

div.dn_select {border-bottom: 1px solid silver;} /* pick list item wrapper */
div.dn_sub_select {margin-left: 5px;}
div.dn_line {display: inline;}
div.dn_list {}
div.dn_header {}
.dnsid {}

div.dn_sub_select .dnsid {display:none; }
div.dn_sub_select .hd { font-size: smaller; color: rgb(113,113,181); }


/*
blues 9 (from ColorBrewer)
  1  A  247  251  255
  2  C  222  235  247
  3  D  198  219  239
  4  F  158  202  225
  5  G  107  174  214
  6  H  66  146  198
  7  J  33  113  181
  8  K  8  81  156
  9  M  8  48  107
*/


/* ONTOLOGY TREE NAV */

.ont_tree_level {
  margin-left: 0px;
  padding-left: 18px;
  clear: both;
}

.ont_tree_node {
  margin-top: 2px;
  padding-top: 2px;
}

.ont_tree_node .node_nav {
 background-color: #b5ebc7;
 margin-right: 2px;
 padding: 2px;
 width: 8px; 
 float: left;
 border: 1px solid silver;
 text-align: center;
}

.tree_level {
  margin-left: 0px;
  padding-left: 10px;
  clear: both;
}

.ont_tree_node .lbl {
  float: left;
  padding-left: 2px;
  padding-top: 3px;
  margin-left: 2px;
}

/* GEOG  */
div .country {margin-left: 0em;}
div .state, .estado, .province  {margin-left: 1em;}
div .county {margin-left: 2em;}

/* Ontology */

.ont_class {background-color: #7fc97f;}
.ont_label {background-color: #BEAED4;}
.ont_tag {background-color: #FDC086;}