@CHARSET "UTF-8";

@import url("template.css");
@import url("colors.css");

/* general layout */

html {
	padding: 0px;
	margin: 0px;
	border: 0px;
}

h2, h3 {
	color: darkblue;
}

h2 {
	font-size: 130%;
}

body {
	background-color: #fbfbfb;
	font-family: arial,sans-serif;
	font-size: 80%;
	padding: 0px;
	margin: 0px;
	border: 0px;
}

div.imgDiv, div.downloadContainer{
	width: 100%;
	margin: 1em auto 0.5em auto;
	text-align: center;
}

.seqInput {
	margin-top: 2em;
	margin-left: auto;
	margin-right: auto;
	width: 680px;
}

.seqInput button {
	margin: 3px;	
}

.root {
	padding-left: 
}

.header {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.form {
	width: 85%;
	margin: 0px auto;
}

table.jobTable {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
}

table.reftable {
	width: 70%;
	margin-left: 0;
	margin-right: auto;
	border-collapse: collapse;
}

table.jobTable td, table.jobTable th {
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
	padding: 0.5em;
	text-align: left;
	/*line-height: 60px;*/
	vertical-align: middle;
}

table.reftable td, table.reftable th {
	border-top: 1px inset gray;
	border-bottom: 1px inset gray;
	padding: 0.5em;
	text-align: left;
}

table.jobTable col,
table.reftable col {
	border-left: 1px solid gray;
	border-right: 1px solid gray;
}

table.jobTable .nrb {
	border-right: 0px;
}

table.jobTable .nlb {
	border-left: 0px;
}

table.jobTable tr {
	border-left-width: 0px;
	border-right-width: 0px;
}

table.jobTable tr > td {
	border-left-width: inherit;
	border-right-width: inherit;	
}

table.jobTable td, table.jobTable th, 
table.reftable td, table.reftable th {
	border-left: 1px solid gray;
	border-right: 1px solid gray;
}

table.jobTable .jobTableHeader {
	line-height: 15px;
	font-weight: bold;
	text-align: center;
}

table.jobTable td img, .detailsForm img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.detailsForm {
	margin: 3ex auto;
	width: 800px;
}

.detailsForm .details {
	border: 1px inset gray;
	margin: 2px;
	padding: 0.5em;
	text-align: left;
}

.detailsForm .details pre {
	font-size: 120%;
}

.detailsForm .details .blast-details pre {
	font-size: 100%;
}

.detailsForm h2 {
	border: 1px inset gray;
	margin: 2px;
	padding: 0.5em;
	background-color: darkblue;
	color: white;
	font-size: 120%;
	font-weight: bold;
	text-align: center;
}

.detailsForm .recombinationDetails{
	text-align: center;
}

.details .dsa-text {
	text-align: center;
	font-weight: bold;
	line-height: 150%;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
	font-size: 110%;
}

.details .nov-genotype {
	font-size: 130%;
	font-weight: bold;
}

.details .nov-subclustering {
	font-weight: bold;
}

.details h2 {
	margin-top: 4ex;
	font-size: 110%;
	color: darkblue;
}

.details .label {
	color: darkblue;
	width: 30ex;
	display: inline-block;
	line-height: 120%;
	text-align: right;
	padding-right: 2ex;
}

.details .dsa-text .label {
	color: darkblue;
	width: auto;
	display: inline;
	padding-left: 3ex;
	padding-right: 0.5ex;
}

.details .dsa-text span + span + br + span + span {
	color: darkblue;
}

.details .dsa-images .legend {
	float: right;
}

.details .dsa-motivation {
	font-style: italic;
}

.details img.phyloTree {
	margin: 1em auto;
	border: 1px solid black;
}

.details div.phyloLinks {
	margin: 1em auto;
}

.decisionTreeHeader {
	display: block;
	margin: 1em auto 0.5em auto;
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	color: darkblue;
}
	
.listContainer {
	margin-top: 0.5em;
	margin-bottom: 1em;
}

h1 {
	color: rgb(50,0,150);
	font-weight: bold;
  	font-size: 150%;
  	margin: 1em auto 1em 0.5em;
  	text-align: center;
}

.note, .footer {
	background-color: #B2D7EE;
	display: block;
	width: 100%;
	margin: 0px auto;
}

.footer{
	text-align: center;
	font-style: italic;
}

.note {
	padding: 0.5em 3em 0.5em 0.5em;
}

.edit-invalid {
	background-color:#f5baaa;
}

.edit-valid {
}

.details-extraComments {
	font-style:italic;
}

table.csv {
	width: 800px;
	empty-cells: hide;
	margin-left: auto;
	margin-right: auto;
}
table.csv td, table.csv td{
	padding: 0.2em;
	background-color: rgb(240,240,240);
	border: 2px solid white;
}
table.csv tr:first-child td{
	color: white;
	background-color: darkblue;
}.menulink {
	font-family: arial,sans-serif;
	font-size: 18px;
	color: black;
	cursor: pointer;
	font-weight: bold;
	background-color: #a8cad2;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
}

.menulink-selected {
	font-family: arial,sans-serif;
	font-size: 18px;
	color: black;
	cursor: pointer;
	font-weight: bold;
	background-color: #B2D7EE;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
}

div.sequence, div.sequenceName {
	font-size: 75%;
	display: block;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	font-family: 'monospace';
}

div.sequence {
	margin-bottom: 1em;
}

span.refseq{
	display: block;
	text-align: center;
}

.monitor-form{
	text-align: center;
}

.analysisProgress{
	color: red;
}

.error {
	color: red;
	font-style: italic;
	padding: 1em;
}

.cite {
	vertical-align: super;
	font-size: 80%;
}

.bibitem {
	font-size: 80%;
}

.bibitem span {
	color: blue;
}

table.assignment-overview {
	border: 1px solid black;.menulink {
	font-family: arial,sans-serif;
	font-size: 18px;
	color: black;
	cursor: pointer;
	font-weight: bold;
	background-color: #a8cad2;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
}

.menulink-selected {
	font-family: arial,sans-serif;
	font-size: 18px;
	color: black;
	cursor: pointer;
	font-weight: bold;
	background-color: #B2D7EE;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
}
	max-width: 500px;
}

.assignment-overview th {
	background-color: rgb(200,200,200);
	padding: 0.5em;
	text-align: center;
}

.assignment-overview th, .assignment-overview td {
	border-left: 1px solid black;
	padding: 0.5em;
}

.assignment-overview div {
	width: 35px;
	height: 10px;
}

.assignment-overview-total {
	border-top: 1px solid black;
}

.assignment-overview-filter {
	border: 1px solid black;
	padding: 0.5em;.menulink {
	font-family: arial,sans-serif;
	font-size: 18px;
	color: black;
	cursor: pointer;bottom
	font-weight: bold;
	background-color: #a8cad2;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
}

.menulink-selected {
	font-family: arial,sans-serif;
	font-size: 18px;
	color: black;
	cursor: pointer;
	font-weight: bold;
	background-color: #B2D7EE;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
}
}

.assignment-overview-filter th, .assignment-overview-filter td {
	border-left: 1px solid black;
	padding: 0.5em;
}

.recombination-form {
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.recombination-form table {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.recombination-form .region {
	border: 1px solid black;
	margin: 2px;
	padding: 1em;
}
.recombination-form .region:first-line{
	font-size: 120%;
	font-weight: bold;
	text-align: center;
}

.jobOverviewSummary {
	margin: 30px auto;
}

/* Background info pages */
.bold{
  font-weight:bold;
}
.centerimage{
  text-align:center;
  margin-top:0px;
  margin-bottom:0px;
  padding:0px;
}
.centertext{
  text-align:center;
}
.pic-label{
  font-weight:bold;
  font-size:110%;
  margin-bottom:20px;
  text-align:center;
}

table.reftable caption {
  font-weight:bold;
  font-size:110%;
  margin:5px 0 5px 0;
}

.rivm-header div#logo {
	background-color: #ffffff;
	text-align: center;
}

.rivm-header div#logo a {
	text-decoration: none;
}

.rivm-header div#text div {
	position: absolute;
}

.rivm-header div#application {
	background-color: #B2D7EE;
 	height: 30px;
 	padding-left: 25px;
 	/*width: 100%;*/
}

.rivm-header span#name {
	font-weight: bold; 
	position: relative;
	top: 25%;
}

.rivm-header span#info {
	font-style: italic;
	position: relative;
	top: 25%;
}

.nav_bar { margin: 0; padding: 2.8em 0 0; text-align: left; position: relative;}

.nav_main { list-style: none; margin: 0; padding: 0 24px; }
.nav_main li { background: none; float: left; margin: 0; padding: 0; }
.nav_main a { display: block; padding: 0.16em 0.9091em 0.24em; text-decoration: none; }
.nav_main a:hover { color: #000; text-decoration: none; }

.rivm-header div#navigation-bottom {
	background-color: #B2D7EE;
 	height: 5px;
 	width: 100%;
}

.menulink {
	background-color: #a8cad2;
}

.menulink-selected {
	background-color: #B2D7EE;
}

.rivm-footer div {
	background-color: ffffff;
	line-height: 0px;
}

.rivm-footer img {
	height: 25px;
	width: 44px;
	margin-left: 50%;
}

.working {
    background: gainsboro;
}

.waiting {
    color: dimgray;
}

.ngs-detils-table {
	/*text-align: center;
	width: 100%;*/
	min-width: 500px;
}

.hoverable:hover {
  color: blueviolet;
  cursor: pointer;
  cursor: hand;
}

.single-ngs-result-table {
	margin-bottom: 10px;
	margin-top: 10px;
}

.single-ngs-result-table td {
    width: 1%;
    white-space: nowrap;
}

.single-ngs-result-table td {
	padding:8px;
}

.ngs-start-table td {
	padding:8px;
}

.tab {
	margin-left:15px;
}

.ngs-start {
	background: rgb(197, 197, 253);
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.ngs-start button{
	color: darkblue;
    font-weight: bold;
}

.ngs-chart-title {
    margin-left: 43px;
}

.ngs-view {
	max-width: 500px;
}

/* change wt wpanel */
.ngs-start-advanced {
	margin-top: 10px;
}

.ngs-start-advanced .Wt-panel {
	margin-top: 10px;
    border: 1px solid #888888;
    background: rgb(197, 197, 253) none repeat scroll 0%;
}

.ngs-start-advanced .Wt-panel .titlebar {
    padding: 0px 6px 3px;
    background: rgb(197, 197, 253);
    color: darkblue;
    font-size: 10pt;
}

.ngs-start-advanced .Wt-panel .body {
    background: rgb(197, 197, 253);
    padding: 4px 6px 4px;
    -webkit-backface-visibility: hidden;
    clear: left;
}

/* flex */
.flex-container {
  display: flex; /* or inline-flex */
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-elem {
  flex: 5 0px; 
}

.flex-elem-auto {
    flex: 1 auto;
}

.link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: pointer;
}