body, th, td, input, select, textarea, button {
    /* font: normal 12px arial; */
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 12px;
    color: #444;
}

body {
    margin: 15px 25px;
}

/* added 700 px limit for p and list text */
p {
    max-width: 700px;
    margin-left: 10px;    
}

ol, ul {
	max-width: 650px;
}

/* a, a:hover, a:visited { */
a, a:visited {
    /* color: #004175; */
    color: #226498;
    
}

a:hover {
 /*    text-decoration: none; */
    text-decoration: underline;
    color: gray;
}

/* also added 700px limit for headers, though few examples exist currently on site that violate limit */
h1, h2, h3, h4 {
    color: #333;
    margin: 18px 0 8px 0;
    max-width: 700px;
}

.warn {
    color: #c00;
}

p.important, div.important {
    background: #FBE6F2;
    border: 1px solid #D893A1;
    color: #333;
    margin: 10px 0 5px 0;
    padding: 10px;
}

.saureus-warning {
    background: #ffffcc;
    border: 1px solid #660000;
    color: #333333;
    margin: 10px 0 5px 0;
    padding: 10px;
    max-width: 700px;
}

.warning {
    background: #ffcccc;
    border: 1px solid #660000;
    color: #333333;
    margin: 10px 0 5px 0;
    padding: 10px;
    max-width: 700px;
}

.update, .highlight {
    background: #ccffcc;
    border: 1px solid #006600;
    color: #333;
    margin: 10px 0 5px 0;
    padding: 10px;
    max-width: 700px;
}

.update_datestamp {
    float: left;
    padding-right: 10px;
}

.b {
    font-weight: bold;
}

.grande {
    font-size: 130%;
}

.sp10 {
    height: 10px;
    line-height: 10px;
}

.sp15 {
    height: 15px;
    line-height: 15px;
}

.sp20 {
    height: 20px;
    line-height: 20px;
}

form {
    margin: 0;
}

.username {
    font-weight: bold;
    color: #004175;
}

#header, #footer, #content {
    min-width: 800px;
    max-width: 1200px;
}

#footer {
    clear: left;
}

#trc_logo, #gpp_logo {
    float: left;
    margin: 0 0 14px 6px;
}

#gpp_logo {
    margin-right: 30px;
}

#site_name {
    font-family: Helvetica;
    color: #585858;
    float: left;
    font-size: 250%;
}

#trc_site_name {
    font-family: Helvetica;
    color: #585858;
    float: left;
    margin: 20px;
    font-size: 250%;
}

#broad_logo {
    margin: 9px -1px 9px 0;  
}

#rside {
    margin: 0 6px 0 250px;
    text-align: right;
}

#usernav {
    height: 19px;
}

#topnav {
    text-align: left;
    height: 28px;
    font-family: Verdana, sans-serif;
    line-height: 220%;
    color: #004175;
    background: transparent url(../img/topnav_bg.png) left top no-repeat;
    clear: both;
}

#topnav .inner1, #topnav .inner2 {
    height: 100%;
}

#topnav .inner1 {
    margin-left: 7px;
    background: transparent url(../img/topnav_bg.png) right top no-repeat;  
}

#topnav .inner2 {
    margin-right: 7px;
    background: transparent url(../img/topnav_bg.png) left bottom repeat-x;
    padding: 0 10px;
}

#topnav a, #footer a {
    text-decoration: none;
}

#topnav a:hover, #footer a:hover {
    text-decoration: underline;
}

#breadcrumbs {
    font-size: 85%;
    margin: 9px 0 0 6px;
}

#content {
    margin: 25px 0 35px 6px;
}

#footer {
    border-top: 4px solid #0071bc;
}

#footer .inner {
    padding: 6px 10px 15px 10px;
}

table.grid {
    border-collapse: collapse;
    border: 1px solid #004175;
    margin: 0 0 2px 2px;
}

table.grid th, table.grid td {
    font-size: 85%;
    padding: 3px 6px;
}

table.grid tr.highlight td {
    font-weight: bold !important;
    font-size: 85%;
    /* 
      In Windows/Linux environments, the bolding does not show
      until you increase the font size.  The addition of font
      size and !important try and override politely user
      css settings, though it does not solve this problem
      completely.
     */
}

table.grid th {
    font-weight: bold;
    color: #fff;
    /* border-right: 1px dotted #fff; */
    border-right: 1px solid #bbb;
    background-color: #004175;
}

table.grid td {
    /* border: 1px dotted #004175; */
    border: 1px solid #bbb;
}

table.grid td.rowCount {
    background-color: #ccc !important;
    text-align: right;
}

table.grid tr.z1 td {
    background-color: #fff;
}

table.grid tr.z2 td {
    background-color: #cfe1ed;
}

.download_csv_link {
    font-size: 85%;
    margin: 0 0 0 1px;;
}

.r {
    text-align: right;
}

.c {
    text-align: center;
}

.floatL {
    float: left;
}

.error {
    color: #f00;
    margin: 15px 0 -5px 0;
}

.clear {
    clear: both;
}

.glossary {
    margin: 0 0 0 3px;
    position: relative;
    top: -2px;
    font-weight: normal;
    cursor: pointer;
    /* color: #fff;*/
    font-size: 90%;
}

.hidden,
#frmSearchUniversalRepost {
    display: none;
}

.glossary table {
    border-collapse: collapse;
    border: 1px solid #004175;
    margin: 0 0 2px 2px;
}

.glossary td {
    border: 1px dotted #004175;
    font-size: 9pt;
}

input[type="radio"] {
    position: relative;
    top: 2px;
}

button.action {
    background-color: #015087;
    border-width: 1px;
    border-style: solid;
    border-color: #cfe1ed #023b63 #023b63 #cfe1ed;
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #fff;
    font-size:  115%;
    font-weight:  bold;
    overflow: visible;
    padding: 1px 13px 1px 15px;
    text-decoration: none;
    width: auto;
}

button.action:hover {
    color: #cfe1ed;
}

img.icon {
    vertical-align: middle;
    margin-bottom: .25em;
}

dl {
    padding: 0;
    margin-left: 10px;
}

dt {
    font-size: 95%;
    font-weight: bold;
}

/* using dl lists for some TALE examples, need this to have normal font-weight */
.normalList {
    font-weight: normal;
}

/* added limit here as well, as I perused site and found cases where text width was long */
dd {
    padding: 0 0 0 26px;
    margin: 1px 0 4px 3px;
    background: transparent url(../img/arrw.gif) left 3px no-repeat;	
  width: 700px;
}



/* search */

.searchWrapper {
    margin: 20px 0;
}

.secSep {
    float: left;
    width: 55px;
}

.secTitle {
    font-weight: bold;
    font-size: 120%;
    color: #333;
}

.secDetails,
.secDetails150 {
    height: 23px;
}

.secDetails150 {
    line-height: 150%;

}

#ncbiNote {
    max-width: 250px;	
    font-size: 75%;
}

textarea.manualInput {
    width: 220px;
}

textarea.manualSeqInput {
    width: 600px;
    height: 250px;
}

.searchResources {
    border-left: 2px dotted #cfe1ed;
    padding: 0 15px 0 30px;
}

/* search */

.frmLogin {
    width: 350px;
    padding: 20px 0 25px 0;
    margin: 20px 0 50px 0;
    border: 1px solid #0071BC;
}

.frmLogin div {
    margin: 6px 0 0 0;	
}

.frmLogin input {
    width: 160px;
}

.frmLogin div.btn {
    margin: 9px 0 0 0;  
}

.frmLogin label {
    float: left;
    margin: 0 8px;
    width: 100px;
    text-align: right;
}

.hairpin_diagram {
    line-height: 1.3ex;
    margin-left: 2em;
    border-collapse: collapse;
    /*
    padding: 1ex 1em;
    border: solid grey 1px;
     */
}

.hairpin_diagram td {
    line-height: 1.3ex;
    font-size: 110%;
    font-weight: bold;
    text-align: center;
    padding: 0.6ex 0.4ex;
    margin: 0;
    border-collapse: collapse;
    /*
    border-top: solid black 1px;
    border-bottom: solid black 1px;
     */
}

.dna {
    font-family: Fixed,monospace;
    font-size: 92% !important;
}

.hairpin_diagram td.dnabar {
    line-height: 1ex;
    font-weight: bold;
    font-size: 80%;
    color: #999;
    padding: 0.4ex;
}

table.seqlines th {
    color: #222222;	
    text-align: right;
}

table.seqlines td {
    font-family: Fixed,monospace;
    font-size: 100% !important;
}

td.targetseq {
    color: red;
}

td.targetseqrc {
    color: green;
}

td.loopseq {
    color: #999;
}

td.flankseq {
    color: #999;
}

ul.formula {
    list-style-type:none;
}

.vectordesc {
    float: left;
}

.vectorinfo {
    float: left;
    max-width: 300px;
}

.vectormap {
    float: right;
}

#vectormapdownload {
    text-align: center;
}

.controlclones {
    float: left;
    width: 1000px;
    margin-bottom: 10px;
}

h3.vectordetailheader {
    padding-top: 15px;
    margin: 0px;
}

#vectormapimage {
    max-width: 700px;
}

.vectormapdownload {
    float: right;
    margin-left:300px;
}

/* 
div#searchResults {
    display: inline;
}
*/
a.refineSearch {
    font-size: 50%;
}

a.boldLink {
    font-weight: bold;
}

a.external {
    background: url(../img/external_link.png) top right no-repeat;
    padding-right: 13px;
}

.col-1, .col-2, div.col-1 dl dd, div.col-2 dl dd {
    float: left;
    max-width: 350px;
}

div.col-2.addnl h3, div.col-1 dl, div.col-2.addnl dl {
    margin-top: 0px;
    margin-bottom: 2em;
}

.top-level, .seq {
    float: left;
}

.top-level {
    width: 700px;
    margin-bottom: 3ex;
}

.col-1-sm, .col-2-sm, .col-3-sm {
    float: left;
    max-width: 230px;
}

.col-1-lg, .col-2-lg {
    float: left;
    max-width: 550px;
}

.col-1-lg dl dd, .col-2-lg dl dd {
    max-width: 500px;
}

.db-qual {
    font-size: 12px;
    color: red;
}

.portal-name {
    font-weight: bold;
}

.portal-edition {
    font-style: italic;
    font-variant: small-caps;
    font-size: 85%;
}

.lazy-loaded {
    margin: 0;
    padding: 0;
}

.fakelink {
    cursor: pointer;
    color: #226498;
    text-decoration: underline;
    font-size: 85%;
    margin: 0 0 0 1px;
}

.fakelink:hover {
    text-decoration: underline;
    color: gray;
}

td.seqver {
    font-size: 125% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.seqver-danger {
    color: red;
}

.seqver-warn {
    color: orange;
}

.seqver-ok {
    color: #00CC00;
}

.seqver-info {
    color: #555555;
}

/**
Tooltip stuff taken from: https://www.w3schools.com/css/css_tooltip.asp on 20170609
 */
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    border: 2px solid rgb(155, 179, 199);
    visibility: hidden;
    width: 120px;
    background-color: white;
    color: #444;
    font-size: 10px;
    text-align: left;
    padding: 2px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}