/* vim: set ft=css: */
body {margin: 0; font: 12pt sans-serif, serif}
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;
}
@media print {
    #content {
        height: auto !important;
        overflow-y: visible !important;
    }
    #genomeMap {
        position: absolute;
    }
}
#content {
	background-color: #ffffe0;
	overflow-y: auto;
}
#sidenav {
width: 14em;
}

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
}
#content {
padding: 1em;
	flex-grow: 1;
}
.title {
	background-color: #a863bf;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100px;
}
.title h1 {
	padding-top: 10px;
}
header {
	display: flex;
	flex-direction: row;
	max-height: 100px;
	min-height: 100px;
	flex: 1;
}
footer {
	background-color: #add8e6;
	padding-top: 1em !important;
	padding-bottom: 0;
	text-align: center;
	font-size: 0.5em;
	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;
}
.horizontal-nav-bar {
	display: flex;
	background-color: #add8e6;
	text-align: center;
	font-size: 1.1em;
}
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 {
	max-width: 1000px;
    margin: auto;
}
div.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; }
@media print {
    #content {
        height: auto !important;
        overflow-y: visible !important;
    }
    img #genomeMap {
        position: absolute;
    }
}