.header {
	background-image: url("../images/logo-sbr.png");
	background-repeat: no-repeat;
	background-position: left center;
	margin: 0 0 0 10px;
	padding-left: 200px;
	border: 0;
}

.page-header{
	text-align: center;
	margin: 10px;
	border: 0;	
}

.navbar li,.navbar span{
	margin:0;
	padding: 0;
}
.navbar-cyanorak {
	background-color: #2d3a59;
	background-image: none;
	padding-right: 30px;
}
.navbar-header {
	padding-left: 10px;
	float: left;
}
.logout-container{
	display: inline;
	margin:0.3em 0 0 0;
	padding: 0;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 30px; /* Margin bottom by footer height */
  padding-bottom: 30px;
  font-family: Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Quicksand', sans-serif;
}

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 30px; /* Set the fixed height of the footer here */
	line-height: 30px; /* Vertically center the text there */
	background-color: #2d3a59;
	color: #ffffff;
	text-align: center;
	font-weight: bold;
	font-size: small;
}

.glyphicon-refresh-animate {
   -webkit-animation-name: rotateThis;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
}

@-webkit-keyframes "rotateThis" {
 from { 
        -webkit-transform: rotate( 0deg );  
    }
 to  { 
        -webkit-transform: rotate( 360deg ); 
    }
}

.fieldlabel {
	background-color : #e0e0e0;
	text-align : right;
}

.fieldlabel_editable {
	padding-top: 0.5em;
	text-align : right;
}

.fieldlabel_noneditable {
	text-align : right;
}

.fieldcheck {
	text-align : left;
}

.editable{
	margin-top: 0.2em;
}

.fieldset {
	margin-top : 2px;
	margin-bottom : 2px;
}

.rowpanel {
	background-color : #e0e0e0;
	margin-top : 2px;
	margin-bottom : 2px;
	margin-left : 1px;
	margin-right : 1px;
	padding-top : 2px;
	padding-bottom : 2px;
}


/* Strain collection map legend */
table.maplegend, table.maplegend td {
	border-collapse: collapse;
	border: 2px solid #DCDCDC;
	margin: 0 auto;
}

/* To be removed.. */
table.maplegend caption {
	text-align : center;
}

table.maplegend  td {
	padding: 0.1em 0.3em;
	min-width: 2em; 
	text-align: center;
	font-weight: bold;
	font-size: small;
}

/* Phyletic Pattern */
table.phyleticpatterntable {
	border-collapse : separate;
	border-spacing : 2px;
}

table.phyleticpatterntable td.vertical{
	padding-top: 5px;
	padding-bottom: 5px;
	margin: 0;
	min-width: 20px; 
}

div.vertical{
	margin-left: -4px;
	display: inline;
	writing-mode: vertical-rl;
	text-orientation: sideways;
	text-align: center;
	vertical-align: middle;
}

td.straintablelabel {
	background-color : #eeeeee;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	font-size: small;
  	white-space: nowrap;
  	 	
}

td.pigmenttablelabel {
	background-color : #D8D8D8;
	font-weight: normal;
	text-align: center;
	font-size: small;
}

td.cladetablelabel,td.subcladetablelabel {
	background-color : #D8D8D8;
	font-weight: normal;
	text-align: center;
	font-size: small;
}

td.subclustertablelabel {
	background-color : #D8D8D8;
	text-align: center;
	font-size: small;
}

td.genustablelabel {
	background-color : #B5B5B5;
	font-weight: bold;
	text-align: center;
	font-size: small;
}

td.tablerecordcontents{
	background-color : #eeeeee;
}

td.tablerecordcontents-green{
	background-color : #a2e194;
}

table:not(.phyleticpatterntable .maplegend), tbody {
    width: 100%;
}


table.phyleticpatterntable input.phyletictabletogglecheckbox{
	margin-left: 0.2em;
}

.center{
	text-align: center;
	margin: 0 auto;
}

#exportTable td, #exportTable th{
	padding-right: 1em;
}
#exportTable label{
	font-weigth: normal;
}

.no-wrap {
	white-space: nowrap;
}

.normal-font-weight{
	font-weight: normal;
}


.form-group .form-check-label{
	margin-right: 1em;
}

.phyletic-search .form-group, .phyletic-search .panel-body {
	margin-bottom: 0;
	padding-bottom: 0;
}

.left-padded{
	margin-left: 1em;
}

.right-padded{
	margin-right: 0.5em;
}

.top-padded{
	margin-top: 1em;
}

.top{
	vertical-align: top;
}

.padded-button{
	margin: 0.2em;
	width: 180px;
}

.login input, .login .alert{
	width: 30%;
	margin-bottom: 1em;
}

a.logout:link, a.logout:visited, a.logout:hover, a.logout:active{
	text-decoration: none;
	padding-top: 0.3em;
}

.pageContent{
	margin: 2em;
	font-size: 1em;
}
.staticContent{
	font-size: 1.1em;
}
.statistics{
	margin-bottom: 2em;
}

.panel-body{
	overflow-x: scroll;
}

.editContent{
	float: right;
}

.loginlogout {
	float: right;
	padding: 0 0.5em;
	margin-top: 0.5em;
	margin-bottom: 1em;
	margin-left: 1em;
	height: 2em;
}

.inline{
	display: inline;
}

.annotation-label{
	margin-left: 0.5em;
	padding-top: 0.5em;
	font-family: Helvetica, Arial, sans-serif;
}

.instructional{
	color: gray;
	font-style: italic;
}

.existingClusterInfobox{
	margin-top: 1em;
	padding: 1em;
	border-radius: 0.5em;
	background-color: gainsboro;
}
.existingClusterInfobox span{
	font-style: italic;
}
.empty{
	border: 2px solid red;
	color: red;
}

text.shadow {
	  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
	  -webkit-text-stroke-width: 2px;
	  -webkit-text-stroke-color: black;
	  -webkit-font-smoothing: antialiased;
/* 	  text-shadow: 0px 0px 2px black; */
text-shadow: #666666 0px 0px 3px,   #666666 0px 0px 3px,   #666666 0px 0px 3px,
             #666666 0px 0px 3px,   #666666 0px 0px 3px,   #666666 0px 0px 3px;
}

.select2-multiple-select, .select-list, .input-text {
	width: 300px;
}

.select-list-input {
	width: 200px;
}

.input-text-small{
	width: 95px;
}

.progress-bar-contents {
	font-weight: bold;	
	font-size: larger;	
	margin-top: 8px;
}

.date-widget{
	width: 100px;
}

.transferable{
	float: right;
	margin-top:1em;
	margin-right:1em;	
}
.transferable-row{
	margin-top:0.2em;
	margin-right:0;
}

.row{
	margin-bottom: 0.2em;
}

.buffered{
	margin-bottom: 1em;
}

.floating-button-group{
	position: fixed;
	bottom: 50px;
	right: 25px;	
	padding: 20px;
	background-color: rgb(211, 211, 211, 0.5);
	border-radius: 20px;
}

.floating-button-form{
	margin-bottom: 80px;
}

.w-200{
	width: 200px;
}
.w-300{
	width: 300px;
}

.empty::placeholder{ color: inherit;}

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

/* Special case for Cyanorak Private link vertical alignment */
#ckprivatelink {
	line-height: 40px;
}