/* vim: set ft=css: */
// Fonts self-hosted using https://google-webfonts-helper.herokuapp.com/
/* fira-mono-regular - latin */
@font-face {
    font-family: 'Fira Mono';
    font-style: normal;
    font-weight: 400;
    src: url('/css/fonts/fira-mono-v5-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Fira Mono Regular'), local('FiraMono-Regular'),
    url('/css/fonts/fira-mono-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/fira-mono-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/fira-mono-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/fira-mono-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/fira-mono-v5-latin-regular.svg#FiraMono') format('svg'); /* Legacy iOS */
}

/* fira-mono-700 - latin */
@font-face {
    font-family: 'Fira Mono';
    font-style: normal;
    font-weight: 700;
    src: url('/css/fonts/fira-mono-v5-latin-700.eot'); /* IE9 Compat Modes */
    src: local('Fira Mono Bold'), local('FiraMono-Bold'),
    url('/css/fonts/fira-mono-v5-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/fira-mono-v5-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/fira-mono-v5-latin-700.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/fira-mono-v5-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/fira-mono-v5-latin-700.svg#FiraMono') format('svg'); /* Legacy iOS */
}

/* lora-regular - latin */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    src: url('/css/fonts/lora-v10-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Lora Regular'), local('Lora-Regular'),
    url('/css/fonts/lora-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/lora-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/lora-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/lora-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/lora-v10-latin-regular.svg#Lora') format('svg'); /* Legacy iOS */
}

/* lora-italic - latin */
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    src: url('/css/fonts/lora-v10-latin-italic.eot'); /* IE9 Compat Modes */
    src: local('Lora Italic'), local('Lora-Italic'),
    url('/css/fonts/lora-v10-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/lora-v10-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/lora-v10-latin-italic.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/lora-v10-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/lora-v10-latin-italic.svg#Lora') format('svg'); /* Legacy iOS */
}

/* lora-700 - latin */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    src: url('/css/fonts/lora-v10-latin-700.eot'); /* IE9 Compat Modes */
    src: local('Lora Bold'), local('Lora-Bold'),
    url('/css/fonts/lora-v10-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/lora-v10-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/lora-v10-latin-700.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/lora-v10-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/lora-v10-latin-700.svg#Lora') format('svg'); /* Legacy iOS */
}

/* lora-700italic - latin */
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 700;
    src: url('/css/fonts/lora-v10-latin-700italic.eot'); /* IE9 Compat Modes */
    src: local('Lora Bold Italic'), local('Lora-BoldItalic'),
    url('/css/fonts/lora-v10-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/lora-v10-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/lora-v10-latin-700italic.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/lora-v10-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/lora-v10-latin-700italic.svg#Lora') format('svg'); /* Legacy iOS */
}

/* roboto-100 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url('/css/fonts/roboto-v16-latin-100.eot'); /* IE9 Compat Modes */
    src: local('Roboto Thin'), local('Roboto-Thin'),
    url('/css/fonts/roboto-v16-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/roboto-v16-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/roboto-v16-latin-100.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/roboto-v16-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/roboto-v16-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-100italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 100;
    src: url('/css/fonts/roboto-v16-latin-100italic.eot'); /* IE9 Compat Modes */
    src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'),
    url('/css/fonts/roboto-v16-latin-100italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/roboto-v16-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/roboto-v16-latin-100italic.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/roboto-v16-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/roboto-v16-latin-100italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-300 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('/css/fonts/roboto-v16-latin-300.eot'); /* IE9 Compat Modes */
    src: local('Roboto Light'), local('Roboto-Light'),
    url('/css/fonts/roboto-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/roboto-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/roboto-v16-latin-300.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/roboto-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/roboto-v16-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-300italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    src: url('/css/fonts/roboto-v16-latin-300italic.eot'); /* IE9 Compat Modes */
    src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
    url('/css/fonts/roboto-v16-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/roboto-v16-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/roboto-v16-latin-300italic.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/roboto-v16-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/roboto-v16-latin-300italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('/css/fonts/roboto-v16-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Roboto'), local('Roboto-Regular'),
    url('/css/fonts/roboto-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/roboto-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/roboto-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/roboto-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/roboto-v16-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url('/css/fonts/roboto-v16-latin-italic.eot'); /* IE9 Compat Modes */
    src: local('Roboto Italic'), local('Roboto-Italic'),
    url('/css/fonts/roboto-v16-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/roboto-v16-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/roboto-v16-latin-italic.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/roboto-v16-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/roboto-v16-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('/css/fonts/roboto-v16-latin-500.eot'); /* IE9 Compat Modes */
    src: local('Roboto Medium'), local('Roboto-Medium'),
    url('/css/fonts/roboto-v16-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/roboto-v16-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/roboto-v16-latin-500.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/roboto-v16-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/roboto-v16-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* merriweather-sans-regular - latin */
@font-face {
    font-family: 'Merriweather Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/css/fonts/merriweather-sans-v8-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Merriweather Sans'), local('MerriweatherSans-Regular'),
    url('/css/fonts/merriweather-sans-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/merriweather-sans-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/merriweather-sans-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/merriweather-sans-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/merriweather-sans-v8-latin-regular.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}

/* merriweather-sans-italic - latin */
@font-face {
    font-family: 'Merriweather Sans';
    font-style: italic;
    font-weight: 400;
    src: url('/css/fonts/merriweather-sans-v8-latin-italic.eot'); /* IE9 Compat Modes */
    src: local('Merriweather Sans Italic'), local('MerriweatherSans-Italic'),
    url('/css/fonts/merriweather-sans-v8-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/merriweather-sans-v8-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/merriweather-sans-v8-latin-italic.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/merriweather-sans-v8-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/merriweather-sans-v8-latin-italic.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}

/* merriweather-sans-700 - latin */
@font-face {
    font-family: 'Merriweather Sans';
    font-style: normal;
    font-weight: 700;
    src: url('/css/fonts/merriweather-sans-v8-latin-700.eot'); /* IE9 Compat Modes */
    src: local('Merriweather Sans Bold'), local('MerriweatherSans-Bold'),
    url('/css/fonts/merriweather-sans-v8-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/merriweather-sans-v8-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/merriweather-sans-v8-latin-700.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/merriweather-sans-v8-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/merriweather-sans-v8-latin-700.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}

/* merriweather-sans-700italic - latin */
@font-face {
    font-family: 'Merriweather Sans';
    font-style: italic;
    font-weight: 700;
    src: url('/css/fonts/merriweather-sans-v8-latin-700italic.eot'); /* IE9 Compat Modes */
    src: local('Merriweather Sans Bold Italic'), local('MerriweatherSans-BoldItalic'),
    url('/css/fonts/merriweather-sans-v8-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/css/fonts/merriweather-sans-v8-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('/css/fonts/merriweather-sans-v8-latin-700italic.woff') format('woff'), /* Modern Browsers */
    url('/css/fonts/merriweather-sans-v8-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/css/fonts/merriweather-sans-v8-latin-700italic.svg#MerriweatherSans') format('svg'); /* Legacy iOS */
}



hr {border: 0; width: 100%; color: olive;background-color: olive;height: 2px;}

a:link {text-decoration: none; color: blue;}
a:visited {text-decoration: none; color: blue;}
a:active {text-decoration: none; color: blue;}
a:hover {text-decoration: underline; color: red;}
.title a:hover {text-decoration: none;}
.basetable {background-color:#000033;  padding:0; margin:0}
.basetable th {background-color:#330000; text-align:center; font-size:20;color:#ffffcc}
.basetable th.subtitle {background-color:#660000; text-align:center; font-size:16;color:#ffffcc}

.datatable {background-color:lightblue;border:0;}
.datatable th {background-color:#660000; text-align:center; font-size:15;color:white}
.datatable td {background-color:#dddddd}
.par_head  {font-size:150%; color:maroon}
.field_head  {color:darkolivegreen}
.content {text-indent:20px}
.tabletitle {background-color:lightblue; text-align:center}
.field_title {color:purple}
.highlit {color:#006600}
.warning {color:yellow; background-color: red;}
input.no_border {border-width:0px;color:blue; font-size:18px; background-color:transparent}
input.no_border:hover { color: red; font-size:200%;}
.olive_border {border-color:olive;border-width:1px;border-style: solid}

img.logo {max-height: 100px; max-width: 100px; float: left;}
td.main_menu {background-color:#ccccff; border-top:outset; border-left:outset; text-align:center; padding:0}
input.main_menu{border:0;border:hidden; background-color:transparent; color:darkblue}
input.main_menu:hover{ color: white;}
a.main_menu:link{text-decoration: none; color:darkblue}
a.main_menu:visited{text-decoration: none; color:darkblue}
a.main_menu:active{text-decoration: none; color:darkblue}
a.main_menu:hover{ color: white;}


td.sub_menu {background-color:#ffcc99; border-top:outset; border-left:outset; text-align:center; padding:0}
input.sub_menu{border:0;border:hidden; background-color:transparent; color:darkred}
input.sub_menu:hover{ color: white;}
a.sub_menu:link{text-decoration: none; color:darkred}
a.sub_menu:visited{text-decoration: none; color:darkred}
a.sub_menu:active{text-decoration: none; color:darkred}
a.sub_menu:hover{ color: white;}


table {margin:0; padding:0; border-width:0;}
div.main {
    max-width: 100%;
}
.main table.compact {
    width: 100%;
    border: none;
    border-space: 0px;
    border-collapse: collapse;
}
.main table td {
    margin: 0;
    padding: 0;
    vertical-align: top;
}
#content {
    background-color: #ffffe0;
    overflow-y: auto;
}
#sidenav {
    min-width: 14em;
    overflow-y: auto;
}

td.label_blue {background-image:url('../images/label_blue.gif'); text-align:center; padding:4; font-size:80%}
td.label_red {background-image:url('../images/label_red.gif'); text-align:center; padding:4; font-size:80%}
main, div.main {
    background-color: #ffffe0;
    display: flex;
    flex-direction: row;
}
body { 
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
}
#content {
    padding: 1em;
    flex-grow: 1;
}
.title {
    background-color: #a863bf;
    display: flex;
    flex-shrink: 1;
    flex-direction: column;
    width: calc(100vw - 100px);
    height: 100px;
}
.title h1 {
    padding-top: 10px;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
header {
    display: flex;
    flex-direction: row;
    max-height: 100px;
    min-height: 100px;
    flex: 1;
    max-width:100vw;
    overflow: hidden;
}
footer {
    background-color: #add8e6;
    padding-top: 1em !important;
    padding-bottom: 0;
    text-align: center;
    font-size: 0.8em;
    width: 100%;
    flex: 1;
}
footer p {
    background-color: #a863bf;
    text-align: center;
    margin: 0;
    width: 100%;
}
.license {
    float: right;
    margin: 10px;
}
.title img {
    display: inline-block;
}
.title a {
    display: flex;
    flex-grow: 1;
    padding-left: 10px;
    color: #1900e8;
    vertical-align: top;
}
.title h1 {
    margin: 0px;
    font-size: 2.5em;
}
body {
    font-weight: 18px;
    font-family: Roboto, Helvetica, Arial;
    //    background: #fe9510;
}
.sequence {
    font-family: 'Fira Mono', monospace;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    overflow-x: scroll;
    user-select: all;
}
pre {
    font-family: 'Fira Mono', monospace;
}
h1 {
    font-family: Merriweather Sans, Roboto, Helvetica, Arial;
    font-size: 2vw;
}
h2, h3, h4, th {
    font-family: Roboto, Helvetica, Arial;
}

.horizontal-nav-bar {
    display: flex;
    background-color: #add8e6;
    text-align: center;
    font-size: 1.1em;
    white-space: nowrap;
    overflow-x: auto;
    max-width: 100%;
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}
.horizontal-nav-bar::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}
nav > ul {
    width: 100%;
}
li.current > a:hover {text-decoration: underline; color: grey;}
#sidenav a {display: block; padding: 10px;}
table#gene_table {
    background: chocolate;
    width: 100%;
}
table#gene_table tr {
    background: wheat;
}
table#gene_table td p {
    margin-top: 0;
    margin-bottom: 0;
}
table#gene_table td {
    padding: 1px;
    text-align: center;
}
table.microarray th {
    width: 55px;
    white-space: nowrap;
    font-variant: small-caps;
}
td.nowrap {
    white-space:nowrap;
}
table#gene_table th {
    width: 55px;
    white-space: nowrap;
    font-variant: small-caps;
}
div.container-wide, main.container-wide {
    max-width: 1014px;
    margin: auto;
}
div.container, main.container {
    max-width: 700px;
    margin: auto;
}
fieldset {
    margin-bottom: 5px;
}
ul.category {
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
}
ul.category li a {
    padding-left: 0;
}
ul.category li {
    display: inline-block;
    margin-right: 10px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.05);
    min-height: 20px;
}
ul.sidebar {
    background: lightyellow;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
}
#content td.sequence {
    font-family: monospace;
    word-break: break-all;
    max-width: 80ch;
    line-break: strict;
}

ul.sidebar li {
    padding-top: 5px;
    padding-left: 5px;
    margin-top: 5px;
    margin-left: 5px;
    background-color: #add8e6;
}
ul.sidebar li.current {
    background-color: none;
}
html div.no-js, html span.no-js {
    display: none;
}
html.no-js div.no-js, html.no-js span.no-js {
    display: initial;
}
iframe.local {
    height: calc(100vh - 130px);
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
    border:none;
}
img.map {
    display: block;
    margin: 0 auto;
}
#map {
    margin-top: 1em;
}
#map a {
    font-size: 1em;
}
#tss th {
    border: 0px inset;
}
#tss td {
    text-align: center;
    border-right: 1px solid;
}
#tss td.vertical-bar {
    vertical-align: bottom;
}
#tss td.vertical-bar img {
    vertical-align: bottom;
}

table.microarray td {
    background-color: lightyellow;
    border: solid 2px;
    padding: 10px;
    white-space: nowrap;
}

.dimmer {
    display: none;
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}
.loading-text {
    margin-top: 45vh;
    font-size: 3em;
    color: white;
    text-align: center;
}
/* from https://projects.lukehaas.me/css-loaders/#load6 */
.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
    width: 1em;
    height: 1em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
}
.loader {
    color: #add8e6;
    font-size: 100px;
    margin: 5px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
    display: none;
    position: fixed;
    top: 0vh;
    left: 50vw;
}
.loader:before,
.loader:after {
    content: '';
    position: absolute;
    top: 0;
}
.loader:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.loader:after {
    left: 3.5em;
}
@-webkit-keyframes load7 {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}
@keyframes load7 {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

/* From https://lin.noblejury.com/riots/styling.css */
#blur {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    background: #000;
    z-index: 1;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    opacity: 0.90;
}
#modal {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: scroll;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
#modal-content {
    opacity: 1;
    filter: none;
    background: #e8eaf6;
    display: flex;
    flex-direction: column;
    max-width: 768px;
    max-height: 100%;
    padding: 1em;
}
div#experiments {
    -moz-column-width: 30vw;
    -webkit-column-width: 30vw;
    column-width: 30vw;
}
fieldset.experiment_group {
    padding: 0;
}
textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    width: 100%;
}
th { vertical-align: top; }
#content {
    //    font: 18px Loro, Georgia;
}

/* Mobile styling */

body.mobile nav.horizontal-nav-bar > ul.category {
    font-size: 0.7em;
    padding-left: 0px;
    padding-right: 0px;
}
body.mobile nav.horizontal-nav-bar > ul.category li {
    padding: 0px;
}
body.mobile main, body.mobile div.main {
    flex-direction: column-reverse;
}
@media screen and (max-width: 800px) {
    .hide-on-small {
        display: none;
    }
    .title {
        width: 100vw;
    }
    .title h1 {
        font-size: 2em;
    }
    nav.horizontal-nav-bar > ul.category {
        font-size: 0.7em;
        padding-left: 0px;
        padding-right: 0px;
    }
    nav.horizontal-nav-bar > ul.category li {
        padding: 0px;
    }
    main, div.main {
        flex-direction: column-reverse;
    }
}
img#genomeMap {
    max-width: 100%;
    background-color: white !important;
    image-rendering: optimizeSpeed;             /*                     */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
}
@media print {
    #content {
        height: auto !important;
        overflow-y: visible !important;
    }
    img #genomeMap {
        position: absolute;
    }
}
.stat-results {
    display: flex;
}
label.block {
    display: block;
}
ul#toc-aln {
    -webkit-columns: 4 200px;
    -moz-columns: 4 200px;
    columns: 4 200px;
}
/* Dye Swap labels */

ul.category li.dye-swap-1 {
    background-color: rgba(255, 0, 0, 0.15);
}
ul.category li.dye-swap-0 {
    background-color: rgba(0, 255, 0, 0.15);
}

#experiments-key {
    position: absolute;
    right: 1em;
    top: calc(100px + 1em);
}
#experiments-key span.dye-swap-1 {
    display: inline-block;
    width: 1em;
    height: 0px;
    padding-bottom: 1em;
    background-color: rgba(255, 0, 0, 0.15);
}
#experiments-key span.dye-swap-0 {
    display: inline-block;
    width: 1em;
    height: 0px;
    padding-bottom: 1em;
    background-color: rgba(0, 255, 0, 0.15);
}