span.red {color:#CC0033}
span.green {color:#008000}
span.gray {color:#736F6E}
span.blue {color:#2A5084}/*same color as header blue*/
span.orange {color:#CC6633} /*same color as searchtablehead*/
span.dorange {color:#C03C32} /*same color as "HIV Databases" text in upper right*/

body {
  font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
font-size: small;
  line-height: 150%; 
	/*  font-size: 12px;
	line-height: 18px;  */
  color: #333333;
  background-color: #ffffff;
}

pre {
  font-family: Courier, "Andale Mono", "Courier New", monospace;  
  font-size: 8pt;
}

h1 {
  text-align: center;
  font-size: 160%;
  line-height: 200%;
  font-weight: bold;
  background-color: inherit;
  color: #333333;
}

h2 {
  text-align: left;
  font-size: 140%;
  line-height: 30px;
  background-color: inherit;
  color: #333333;
}

h3 {
  text-align: left;
  font-size: medium;
  /*line-height: 20px;*/
  font-weight: bold;
  background-color: inherit;
  color: #333333;
}

h4 {
  text-align: left;
  font-size: small;
  /*line-height: 18px;*/
  font-weight: bold;
  background-color: inherit;
  color: #333333;
}

img {
  border: 0px;
}

body table {
  font-size: small;}/*makes tables have same font size as body text*/

a:link {
  font-size: inherit;
  background-color: inherit;
  color: #2A5084;
  text-decoration: underline;
}

a:visited {
  font-size: inherit;
  background-color: inherit;
  color: 	#7E3517;   /*other possible colors #488AC7 #7E587E */
  text-decoration: underline;
}

a:hover, a:active {
  font-size: inherit;
  background-color: inherit;
  /*background-color: #cccccc;*/
  color: #000000;
  text-decoration: none;
}

/* for the toggle mouseover */
#mousediv {
	position: absolute; /* this needs to stay in place otherwise the mouse text moves the fields */
	background-color: #FFEFD5;
	visibility:hidden;
	border: dashed 1px;
	padding: 5px;
}

.introtext a:hover, .newsarea a:hover{
  background-color: #cccccc;
}

.background {
  background-color: #ffffff;
  color: inherit;
  width: 832px;
  text-align: left;
}

.header {
  text-align: left;
  background: url(/content/sequence/HIV/IMAGES/HIV_desertelements/bg-home.gif) right top;
  background-repeat: repeat-x;
}
.intheader {
  text-align: left;
  background: url(/content/sequence/IMAGES/bg-int.gif) right top;
  background-repeat: repeat-x;
}

.introtext {
  background-color: inherit;
  color: inherit;
  padding: 0px 30px 0px 30px;
  text-align: left;
  width: 770px;
}

.buttonarea {
  background-color: inherit;
  color: inherit;
  background-position: left top;
  text-align: center;
}

table.buttonarea td {padding:15px;}

.buttonarea a, .footerarea a {
  background-color: inherit;
}

.newsarea {
  background-color: #e3e3e3;
  color: inherit;
  width: 650px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 10px 30px 10px 30px;
}
.newstext {
	color: inherit;
	background-color: inherit;
	text-align: left;
	list-style-position: outside;
	list-style-type: square;
}
.newsdate {
	background-color: inherit;
	color: inherit;
	text-align: right;
	font-style: italic;
}


.bottomborder {
	background-color: #000000;
	color: inherit;
	width: 100%;            
	line-height: 5px;
	margin-bottom: 5px;
}
.footerarea {
	background-color: #2A5084;
	color: #ffffff;
	width: 100%;
	text-align: center;
}
.footer {
	font-size: 11px;
	line-height: 14px;
	text-align: center;
}
a.footer:link, a.footer:visited {
  background-color: inherit;
  color: #ffffff;
}
a.footer:hover, a.footer:active {
  background-color: inherit;
  color: #ffffff;
}

.paramtablehead {
   font-size: 15px;
   font-weight: bold;
   background-color: inherit;
   color: #CC6633;
   line-height: 30px;
}

.paramtablesubhead {
    font-size: 12px;
    font-weight: bold;
    background-color: inherit;
    color: #CC6633;
}

.paramtable {
   font-size: 12px;
   background-color: #e3e3e3;
   color: inherit;
   border: 0px solid black;
   width: 100%;
  padding: 2px;
  border-spacing: 5px;
}

/* alternating right- and left-aligned table cells */
.inputcell{
	vertical-align: top;
	text-align: left;
}
.textcell{
  color: #000000;
	text-align:right;
	vertical-align:top;
	width: 160px; 
}
.textcellw{
  color: #000000;
	text-align:right;
	vertical-align:top;
	width: 300px; 
}


/* submit/reset buttons */

.submitreset{
margin: 10px 5px;
text-align: center;
}

/*
.submitreset input{
margin: 5px;
background-color: #e3e3e3;
border-width: 2px;
color: #000000;
font-family: "Trebuchet MS",Verdana,Helvetica,Arial,sans-serif;
font-size: 110%;
padding: 0 2px;
}
*/

/* other form buttons */

.form, .searchblock input.button {
margin: 3px;
background-color:#e3e3e3;
color:#000000;
}

.backband { 
  position: absolute;
  top:130px;
  left:38px;
  width: 800px;
  height: 28px;
  z-index: 40;
  background-color: #2A5084; /* menu bar color #2A5084*/
  color: inherit;
}

.menu {
  width:800px;        /* width of menu area inside band */
  position: absolute;
  top: 130px;
  left: 38px;
  z-index: 40;
  font: bold 12px "Trebuchet MS", arial, verdana, sans-serif;
}

.menu a { background-color: inherit; color: white; }
.menu a:visited { background-color: inherit; color: white; }     
.menu .subs a { background-color: inherit; color: black; }
.menublock, .display {       /* the submenus, menublock when closed, display when open */
  white-space: nowrap;
  float: left;
  width: 100px;
  margin: 2px;
  color: inherit;
  background-color: #2A5084; /* menu bar color */
}

.menu .subs {
   background-color: #52618F;
   color: inherit;
} 
.menu .subs a { display: block; }
.menu .menublock .subs { display: none; }
  
.menu .menublock1, .menu .menublock2, .menu .menublock3 { 
  float: left;
  width: 200px;            /* doesn't do anything? */
  margin: 1px;
  padding: 1px 1px 1px 1px;
  background-color: #52618F;
  color: inherit;
  z-index: 3;
}

a.tl, a.tl:hover, a.tl:active {  /* this is the submenu; tl, top layer, sl, second layer? */
  display: block;
  margin: 1px 1px 1px 1px;
  padding: 2px 2px 2px 2px;
  color: #FFF;
  background-color: inherit;
  border: none;
  text-align: left;
  text-decoration: none;
}
a.tl:hover, a.tl:active { 
  color: #000; 
  background-color: #ccc; /* active top menu background color, used to be orange #f3600a */
  text-align: left;
}

a.sl:link, a.sl:hover, a.sl:active, a.sl:visited { 
  color: #fff;
  display: block;  
  width: 120px;
  padding: 2px;                /* top and left margin menu items */
  background-color: #2A5084;
  border-top: 1px #fff solid;  /* lines between menu items */ 
  text-align: left;
  text-decoration: none;
  font-size: 11px; 
  font-weight: bold;
}

a.no_decor /*used to hide the validor link in the footer*/
  {color: inherit;
   text-decoration: none;}

.menu .subs a.sl:hover, #menu .subs a.sl:active { 
  color: #000;
  background-color: #ccc; /* active sub menu background color, used to be orange #f3600a */
  font-size: 11px;
}

.searchblock { 
  position: absolute;
  top: 130px;
  left: 672px;
  height: 20px;
  z-index: 100;
  text-align: right;
  white-space: nowrap;
}

.searchblock input { 
  border: 1px solid #333333;
  background-color: #e3e3e3;
  color: inherit;
  width: 70px;
  vertical-align: middle;
}

.searchblock input.text {
  background-color: inherit;
  color: inherit;
}

/* for search interface */

.searchIFtable {
  color: inherit;
  font-size: 12px;
  border: 0px solid black;
  padding: 0px;
  /* border-spacing: 0px; */
  border-collapse: collapse;
  margin: 0px;
  width: 100%;
}

.searchIFtablehead {
  font-size: 14px;
  font-weight: bold;
  color: #CC6633;
  background-color: #ffffff;
}

.searchIFtable tr {
  vertical-align: top;
  background-color: #e3e3e3;
  color: inherit;
}

.searchIFtable td {
  padding: 3px;
  margin: 0px;
}

.searchIFtablehead td {
  padding: 0px;
  margin: 0px;
}

.pageheader {
  text-align: center;
  font-size: 160%;
  /*line-height: 35px;*/
  font-weight: normal;
  background-color: inherit;
  color: #333333;
}

.searchtablehead {
   font-size: 15px;
   font-weight: bold;
   background-color: inherit;
   color: #CC6633;
   line-height: 30px;
}
.searchtable {
   font-size: 12px;
   background-color: #e3e3e3;
   color: inherit;
   border: 0px solid black;
   width: 100%;
  padding: 2px;
  border-spacing: 0px;
}
.searchtable td {
  width: 50%;
}
.searchtable tr {
  vertical-align: top;
}

/*searchtable2 was created to allow more flexibility in the number of columns and td widths*/
.searchtable2 { 
   font-size: 12px;
   background-color: #e3e3e3;
   color: inherit;
   border: 0px solid black;
   padding: 2px;
   width: 100%;
}
.searchtable2 tr {
  vertical-align: top;
}

.searchfieldlabel {
  /*width: 160px;*/
  font-size: 12px;
  font-weight: normal;
  background-color: inherit;
  color: #000000;
}

.standardtable {/*a basic table style; text in table matches rest of site*/
   font-size: inherit;
   background-color: #FFFFFF;
   color: inherit;
   padding: 2px;
   width: 100%;
   border-collapse: collapse;
}
.standardtable2 {/*same as standardtable but gray background; used in sp. interest alignments page*/
   font-size: inherit;
   background-color: #e3e3e3;
   color: inherit;
   padding: 2px;
   width: 100%;
   border-collapse: collapse;
}
.codontable {
   font-size: inherit;
   background-color: #e3e3e3;
   color: inherit;
   border-collapse: collapse;
   padding: 2px;
   margin:auto;  /*this centers the table*/
}
.codontable td{
   padding: 3px;
   border: 1px solid black;
}

/*pretty table used in PhyML and IQ-tree help files*/
.model_table { 
    border-collapse: collapse;
    margin: 15px;
}
.model_table th {
    border: solid #999999 1px;
    background-color:#dcdcdc;
    padding: 0px 0.5em;
}
.model_table td {
    border: solid #999999 1px;
    padding: 0.1em 0.8em;
}

table.CRFtable {
   font-size: 12px;
   background-color: #FFFFFF;
   color: inherit;
   border: 1px #e3e3e3 solid;
   padding: 2px;
   width: 100%;
   border-collapse: collapse;
}
.CRFth {
   font-size: 120%;
   font-weight: bold;
   background-color: #FFFFFF;
   color: inherit;
   border-bottom: 1px #e3e3e3 solid;
   padding: 2px;
   width: 25%;
}
.CRFtd {
   font-size: inherit;
   background-color: #FFFFFF;
   color: inherit;
   border-bottom: 1px #e3e3e3 dotted;
   padding: 2px;
   width: 25%;
}

div.graybox {/*plain gray box for text; used in Special Interest Alignment sets*/
   font-size: inherit;
   text-align: left;
   background-color: #e3e3e3;
   color: inherit;
   border: 0;
   width: 90%;
   margin: 0;
   padding: 5px 10px 5px 10px;
}

.text {
  font-size: 12px;
  line-height: 18px;
  background-color: #FFFFFF;
  color: #333333;
  background-position: left top;
  list-style-position: outside;
  list-style-type: square;
}

.spaced { /* UL list with smaller "dots"*/
list-style-image: url("/content/sequence/IMAGES/GraySquare2.gif")
}
.spaced li {
padding: 0px 2px 8px 0px;
}

.spaced2 { /* UL list with extra space, normal "dots"*/
}
.spaced2 li {
padding: 0px 2px 8px 0px;
}


/*The following 4 elements define the styles used on the Tools page, etc.*/

p.indent {          /* will right-indent the 2nd and remaining lines */
text-indent: -20px;
margin-left:20px;
}
table.sitemap {
width: 100%;
border-collapse: collapse;
}
td.sitemap {
font-size: 12px;
font-weight: normal;
padding: 0px;
margin: 0px;
vertical-align: top;
}
.sitemap-header {
font-size: 14px;
font-weight: bold;
background-color: #CCCCCC;
padding: 4px;
}

div.pageheader {
	width: 700px;
	text-align: center;
	font-size: 15pt;
	padding: 20px 0px 20px 0px;
}

/* these are used mostly to format H3 headers as centered and with correct spacing RKF */

.altH1 {
   line-height: 100%;
   margin-top:1.15em;
}

.centerme {
   text-align:center;
}

/* rkf added this 5-25-10 to show bold text on a yellow background */

.boldyellow {
   font-weight:bold;
   background-color:yellow;
}

.si_pulldown {
  background-color: #ccc;
  color: #333;
  font-size: 9pt;
  width: 150px;
}
/* color for selected si menu items;
	needed because selected items are gray-on-gray on Mac;
	linear-gradient used
	because background-color won't work for option:checked */
.si_pulldown option:checked {
  background: linear-gradient(#8FA1BA, #8FA1BA);
}
.si_input {
  background-color: #ccc;
  color: #333;
  font-size: 9pt;
  width: 150px;
}
.si_sm_input {
  background-color: #ccc;
  color: #333;
  font-size: 9pt;
  width: 50px;
}
.si_textarea {
  background-color: #ccc;
  color: #333;
  font-size: 9pt;
  /* width: 150px; */
}

/* List with colored bullets on Tools page */
div.colorbox {
	float: left;
	height: 10px;
	width: 10px;
	margin: 3px 4px 0 0;
	border: 0px solid white;
	}
.HIV_tool {background: red;}
.HIV_and_general_tool {background: purple;}
.general_tool {background: blue;}