@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');


@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

a {
	color:#58828C;
	word-break: break-all; 
}


svg {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
  transform: translateZ(0);
}

.loader {
	border: 0.5em solid white; 
	border-top: 0.5em solid #58828C; 
	border-radius: 50%;
	width: 0.5em;
	height: 0.5em;
	animation: spin 2s linear infinite;

}


.loader.dark {
	border: 0.5em solid #58828C; 
	border-top: 0.5em solid white; 
}



.overlay {
	position:fixed;
	top: 30vh;
	left: 50vw;
	font-size:120%;
	text-align:center;
}

.overlay .loader{
	width: 4em;
	height: 4em;
	border: 1.5em solid #696969; 
	border-top: 1.5em solid #58828C; 

}

line.svg-selected {
   % -webkit-filter: invert(1)  !important;
    %-moz-filter: invert(100%)  !important;
   % -ms-filter: invert(100%)  !important;
   % -o-filter: invert(100%)  !important;
   % filter: invert(100%)  !important;
    stroke: orange !important;
}

circle.svg-selected {
    %-webkit-filter: invert(100%);
    %filter: invert(100%);
	fill: orange !important;
}

polygon.svg-selected {
   % -webkit-filter: invert(100%);
   % filter: invert(100%);
	%stroke: white; !important;
}



#tree{
	z-index:100;

}



body {
	font-family: "Source Sans Pro", "Arial"; 
	background-color:white;
	width:100%;
	min-width:500px;
	height:300px;
	min-height:100%;
	margin:0;
	padding:0;
	

	@media screen and (orientation:portrait) {
		text-size-adjust: 160%;
	}
	@media screen and (orientation:landscape) {
		text-size-adjust: 100%;
	}

	
}


.dz-preview{
	display:none;
}

svg{
	%border-style:solid;
	border-width:0.5px;
}



html {
	height: 100%;
}


table {
	%font-family: Courier New; 
	%font-size:16px;
	position:relative;
}

table td {
	margin:0;
}

table {
	border-collapse: collapse;
}

.node {
	%cursor:pointer;
}


.candrag{
	cursor: move; /* fallback if grab cursor is unsupported */
	cursor: grab;
	cursor: -moz-grab;
	cursor: -webkit-grab;
}


polygon, line, circle {
	transition: fill 0.2s ease;
}

line {
	transition: stroke 0.2s ease;
}



.button{
	transition: all 0.2s ease 0s;
	border-radius:5px;
	padding: 5;
	margin-right:10px;
	margin-left:10px;
	border-color:black;
	border-style:solid;
	border-width:1px;
	cursor:pointer;-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	color:black;

	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
	white-space: nowrap;
}

.button.large{
	font-size:150%;
	padding: 10;
}

.button.disabled {
	background-color:#696969;
	cursor:auto;
	color:white;
}






.button:hover{
	color:white;
	background-color:#58828C;
}

.button.disabled:hover {
	background-color:#696969;
}


#main{
	margin-left:50px;
	margin-right:20px;
	%display:inline;
}

.outlinedText{
	color:white;
	%text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}


.colourbox{
	%height: 40px;
	padding-left:1.6em;
	padding-top:5px;
	padding-top:5px;
	margin-right:3px;
	border-radius: 2px;
	border-color: black; 
	border-style:solid;
	border-width:1px;
	cursor:pointer;
}

.colourbox.selected{
	border-width:3px;
}

.colourbox.dashed{
	border-style:dotted;
}


.dialog{
	text-size-adjust:350%;
	z-index:1000;
	position:fixed;
	max-height:80%;
	width:50%;
	text-align:center;
	margin-left:25%;
	top:10vh; 
	%min-height:200px;
	text-align:center;
	background-color:#708090; 
	padding: 10 10; 
	%margin:auto;
	border-radius: 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


@media only screen and (max-width: 1200px) {
	.dialog{
		width:95%;
		margin-left:2.5%;
		text-size-adjust:150%;
	}
}



.dialog.toTheSide{
	position:relative;
	margin-left:0;
	%top:10vh;
	width:100%;
	margin-bottom:100;
}


.dialog_inner{
	background-color: white; 
	padding: 1em 1.5em; 
	text-align:center; 
	font-size:15; 
	overflow-y:auto;
	
}


.glowing {
	%filter: invert(100%);
	background-color:orange;
	color:white; 
	border-radius:5px;
	border-color: #FFFFB2; 
	 -webkit-box-shadow: 0 0 10px #FFFFB2; 
	   -moz-box-shadow: 0 0 10px #FFFFB2; 
		box-shadow: 0 0 10px #FFFFB2; 
}


.annoyingFlash{
	color:red;
	position:fixed;
	font-family: "Comic Sans";
	top: 50%;
	bottom: 50%;
	font-size: 5em; 
	text-align: center;
	width:100%;
}



.numberinput{

	background: transparent;
	background-color:white;
	color:black;
	border-color:black;
	%border-style:solid;
	border-width:1px;
	min-width:10px!important;
	max-width:99.99%!important;
	transition: width 0s;
	padding: 5;
}

.numberinput.cranberry{
	background-color:#58828C;
	border: none;
	%text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	color:white;
}


.numberinput.disabled {
	background-color:#696969;
	cursor:auto;
	color:white;
}

.numberinput:disabled {
	background-color:#696969;
	cursor:auto;
	color:white;
}


@media only screen and (max-width: 1200px) {
	.numberinput{
		text-size-adjust:150%;	
		width:10em;
	}
}



input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] {
	-moz-appearance:textfield; /* Firefox */
}


#header{
	text-size-adjust: 170%;
	text-align:center;
	font-size:450%;
	line-height:1.3em;
	background-color:#58828C;
	color:white;
	width:99%;
	margin-left:0.5%;
	padding:0;
	margin-bottom:5;
	border-radius:0px 0px 20px 20px;
	border-color:black;
	%border-style:solid;
	border-width:1px;
	
}

.mainheader{
	text-size-adjust: 350%;
	width:40%;  
	font-size:360%; 
	line-height:120%;
	%text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}


.subheader{
	text-size-adjust: 200%;
	margin-top:-0.5em;
	font-size:26%;
	line-height:1.7em;
}





.topbuttondiv{
	margin-top:4em;
	text-size-adjust: 200%;
}



@media only screen and (max-width: 1200px) and (orientation:landscape) {
	#header{
		text-size-adjust: 100%;
	}
	.mainheader{
		text-size-adjust: 300%;
	}
	.subheader{
		text-size-adjust: 100%;
	}
	.topbuttondiv{
		margin-top:1em;
	}
}


.whitefont {
	%text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	color:white;
}


#footer{
	z-index:1;
	text-align:center;
	background-color:#58828C;
	font-size:100%;
	color:white;
	width:99%;
	margin-left:0.5%;
	padding:0;
	margin-top:5;
	border-radius:20px 20px 0px 0px;

	position:fixed;
	bottom:-5px;
	border-color:black;
	%border-style:solid;
	border-width:1px;
	
	vertical-align:bottom;

	@media screen and (orientation:portrait) {
		text-size-adjust: 250%;
	}
	@media screen and (orientation:landscape) {
		text-size-adjust: 130%;
	}


	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */

	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
}


.rotate90{
	transform: rotate(90deg);
}

.rotate180{
	transform: rotate(180deg);
}

.rotate270{
	transform: rotate(270deg);
}


.sideTab {
	transition: all 0.2s ease 0s;
	position: absolute;
	left: -5px;
	font-size:120%;
	transform: rotate(-90deg);
	transform-origin: left top 0px;
	padding: 5px 10px;
	color: black;
	border-radius: 0px 0px 20px 20px;
	z-index: 3;
	margin-left: 0px;
	border-color:black;
	%border-style:solid;
	border-width:1px;
	cursor:pointer;				
	cursor:pointer;-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */

	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
}


.sideTab:hover{
	color:white;
	background-color:#58828C;
}

#treeNumContainer{
	font-size:120%;
}
 
.icon{
	width:40px;
	height:40px;
	cursor:pointer;
	padding: 3;

}

#remoteTable {
	margin:auto;
	margin-top: -1em;
	margin-bottom: -1em;
	%text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}


#remoteTable tr td{
	text-align:center;

}



.arrow{
	%position:relative;
	bottom: 0px;
	font-size:300%;
	line-height:0.3em;
	%padding: 5;
	margin-left:5px;
	margin-right:5px;
	padding:0;
	%margin-bottom:0px;
	cursor:pointer;
	color:white;
	text-align:center;
}

.arrow:hover{
	color:black;
}

.arrow.flashing{
	color:black;
}


#fileUploading{
	width:100%;
	min-height:300px;
	height:400px;
	margin-top:1em;

}




.uploader {
	height:20em;
	border-style:dashed;
	border-radius: 20px;
	text-align:center;
	vertical-align:middle;
	margin: 20px;
	overflow-y:auto;
	overflow-x:auto;
}

.uploader.small{
	height:15em;
}


.uploader.dz-drag-hover, .uploader:hover {
	background-color:#58828C;
}

.uploader > div {
	text-size-adjust:200%;
	font-size:200%;
	margin-top: 1em;
	color:black; %#58828C;
	padding: 10;
	%text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

	
}


.uploader.small div{
	text-size-adjust:200%;
	font-size:150%;
}


@media screen and (orientation:portrait) {

	.uploader  div {
		text-size-adjust:200%;
	}
}
@media screen and (orientation:landscape) {
	.uploader  div {
		text-size-adjust:80%;
	}
}


.uploader.dz-drag-hover div, .uploader:hover div, .uploader.dz-drag-hover > a, .uploader:hover > a {
	color:white;
	%text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}


.uploader table{
	%border-style:solid;
	%border-width:0.5px;
	width:80%;
	margin-left:10%;
}


.uploader.dz-drag-hover table, .uploader:hover table {
	color:white;
}

.uploaderTd{
	width:35%;
	color:black;
}

@media only screen and (max-width: 1200px) {

	@media screen and (orientation:landscape) {
		.uploaderTd{
			width:15em;
		}
	}

	@media screen and (orientation:portrait) {

		.uploaderTd{
			width:20em;
			max-width:300px;
		}
	}
}





.dialogDesc{
	 font-size:100%;
}

.disclaimerDesc{
	font-size:60%;
	float:left;
}


@import "compass/css3";


.thicklines {
	line-height:1.8em;

}

.dropdown{
	%background-color:#696969;
	padding:5;
	%color:white;
	%text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}


.dropdown:after{
	width: 0; 
	height: 0; 
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #f00;
	position: absolute;
	top: 40%;
	right: 5px;
	content: "";
	z-index: 98;
}

.dropdown select{
	width: 220px;
	border: 0;
	position: relative;
	z-index: 99;
	background: none;
}


.sideNavSetting .dropdown{
	width:100%;
}

.flex-container {
	padding: 0;
	margin: 0;
	list-style: none;
	%text-align:left;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-webkit-flex-flow: row wrap;
	justify-content: space-around;
	%vertical-align:bottom;
	justify-content: left;
	margin-left:1em;
}

.flex-item {
	%width: 33%;
	%text-align:left;
	%margin-left:0.5em;
}

.flex-container.center{
	justify-content: space-around;
}


.textbutton{
	text-size-adjust:150%;
	cursor:pointer;
	vertical-align:bottom;
	font-size:120%;
	
	
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */

	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
}


.textbutton.left{
	margin-left:1.5em;
	float:left;
}

.textbutton.right{
	margin-right:1.5em;
	float:right;
}


.textbutton:hover{
	color:black;
	%text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.textbutton a{
	text-decoration:none;
	color:white;
}


.textbutton:hover a{
	color:black;
	%text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}


.textbutton.selected{
	cursor:auto;
}

.textbutton.selected a{
	cursor:auto;
	color:white;
	text-shadow: none;
}

.textbutton.selected:hover a{
	text-shadow: none;
	color:white;
}




@media only screen and (max-width: 1200px) {
	.textbutton{
		
	}
}




#innerBody {
	transition: 0.5s;
	
}


@media only screen and (max-width: 1200px) {
	#innerBody{
		display:inline;
	}
}


.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 4;
	top: 0;
	left: 0;
	background-color: white;
	overflow-x: hidden;
	overflow-y:scroll;
	transition: 0.5s;
	padding-top: 20px;
	text-align:left;
	%border-style:solid;
	border-width:1px;
}

.sideNavHeader{
	text-align:center;
	font-size:150%;
	line-height:1.3em;
	background-color:#58828C;
	color:white;
	padding:5;
	border-color:black;
	%border-style:solid;
	border-width:1px;
	%text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	text-size-adjust:200%;
}


.sidenav .closebtn {
	float:right;
	text-decoration:none;
	color:white;
	%text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	text-size-adjust:350%;
}





.sidenav .closebtn:hover {
	color:black;
	%text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 4em;
	height: 2em;
	vertical-align:middle;
}

/* Hide default HTML checkbox */
.switch input {display:none;}



.switchslider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .3s;
	transition: .3s;
	border-radius: 2em;
}



.switchslider:before {
	position: absolute;
	content: "";
	height: 1.5em;
	width: 1.5em;
	left: 0.25em;
	bottom: 0.25em;
	background-color: white;
	-webkit-transition: .3s;
	transition: .3s;
	border-radius: 50%;
}


label {
	-webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
}

.notboolean{
	background-color: #58828C;	
}

input:checked + .switchslider {
	background-color: #58828C;		
}

input:focus + .switchslider {
	box-shadow: 0 0 1px #58828C;
}

input:checked + .switchslider:before {
	-webkit-transform: translateX(2em);
	-ms-transform: translateX(2em);
	transform: translateX(2em);
}

.switchslider.disabled{
	cursor:auto !important;
	background-color: #d3d3d3 !important;
}


.input[type=checkbox].modelSetting {
	vertical-align:middle;
}

input {
	box-shadow: none;
}



.slider {
	-webkit-appearance: none;
	width: 100%;
	height: 15px;
	border-radius: 20px;  
	background: #58828C;
	outline: none;
	%opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
	border-color:black;
	%border-style:solid;
	border-width:1px;
}



.slider:hover {
	%opacity: 1;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	border-radius: 50%; 
	background: white;
	cursor: pointer;
	border-color:black;
	border-style:solid;
	border-width:1px;
}

.slider::-moz-range-thumb {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: white;
	cursor: pointer;
	border-color:black;
	border-style:solid;
	border-width:1px;
}


.sideNavSetting{
	width:80%;
	margin-left:10%;
	margin-top:20px;
	margin-bottom:20px;
	text-align:center;
}

.colourGradientRow{
	

	
}

.colourGradientRow td{
	padding-top:0.6em;
	padding-bottom:0.6em;
	%border-width: 1px;
    %border-style: solid;
}

.colourSetting {
	width:100%;
	margin-top:20px;
	margin-left:2px;
	margin-right:2px;
}

.colourSetting td {
	padding-top: 0.35em;
	padding-bottom: 0.35em;
	font-size:90%;
	text-align:left;
}

.sideNavSetting .paramHelper{
	font-size:80%;

}


.checkbox-container{
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 140%;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-align:left;

}

.checkbox-container.small{
	font-size:100%;
 }


/* Hide the browser's default checkbox */
.checkbox-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	%top: -0.4em;
	left: 0.25em;
	height: 1em;
	width: 1em;
	color:black;
	background-color: white;
	border-radius:10px;
	border-color:black;
	border-style:solid;
	border-width:1px;
}

.checkbox-container.small .checkmark{
	left: 0.5em;
}


/* On mouse-over, add a background color */
.checkbox-container:hover input ~ .checkmark {
	background-color: #58828C;
}

/* When the checkbox is checked, add a cranberry background */
.checkbox-container input:checked ~ .checkmark {
	background-color: #58828C;
	
}



/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
	left: 0.32em;
	top: 0.15em;
	width: 0.25em;
	height: 0.5em;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	%text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
					
.speciesAnnotationsDropdown{
	width:75% !important;
}

#hoverAnnotationDiv {
	opacity:85%;
	z-index:200;
	position:absolute;
	color:white; 
	word-break: break-all; 
	border-radius:10px; 
	text-align:left; 
	font-size:100%; 
	padding: 3; 
	%border-style:solid; 
	background-color:#BEBEBE;
	border-color:#BEBEBE;;
	%border-left-color:#A9A9A9;
	cursor: move; /* fallback if grab cursor is unsupported */
	cursor: grab;
	cursor: -moz-grab;
	cursor: -webkit-grab;
}

#hoverAnnotationDiv:hover {
	opacity:100% !important;
}


#hoverAnnotationDiv.topLeftPointer {
	border-top-left-radius: 0px;
}


#hoverAnnotationDiv.bottomLeftPointer {
	border-bottom-left-radius: 0px;
}

#hoverAnnotationDiv.topRightPointer {
	border-top-right-radius: 0px;
}


#hoverAnnotationDiv.bottomRightPointer {
	border-bottom-right-radius: 0px;
}


#hoverAnnotationDiv > div{
	%border-style:solid; 
	border-color:white;
	border-width:1px;
	
}

#hoverAnnotationDiv table{
	width:100%;
	color:white;

}

#hoverAnnotationDiv td{
	padding:5px;
}

.rowbutton td{
	cursor:pointer;
	border-top: 0.5px solid white;
	%border-top: 0.5px solid white;
}

.rowbutton:hover{
	color:#BEBEBE;
	background-color:white;
}


.nodeSelected{
	opacity:1 !important;
}



#measureText {
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
}

.draggableLegend{
	cursor:move;

}




.outersection{
	margin-top:5em;
	margin-left:10%;
	margin-right:10%;
	min-width:800px;
	max-width:1300px;
}


@media only screen and (max-width: 1200px) {
	.outersection{
		margin-left:1.5em;
		margin-right:1.5em;
		margin-top:1em;
	}

}


@media only screen and (max-width: 1200px) and (orientation:landscape) {
	.outersection{
		text-size-adjust:120%;
	}
}



.aboutsection{

	%border-style:solid;
	%border-radius:5px;
	%padding: 1em;
	display:inline;
}



.aboutsection h1, .aboutsection h2, .aboutsection h3{
	text-size-adjust: 320%;
	%background-color:#58828C;
	color:#58828C;
	%text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	padding:0.2em 1em;
	%border-style:solid;
	border-color:black;
	border-radius:0.5em;
}

.aboutsection h2{
	margin-top:2em;
}


@media only screen and (max-width: 1200px) and (orientation:landscape) {
	.aboutsection h1, .aboutsection h2, .aboutsection h3{
		text-size-adjust:120%;
	}
}



.aboutsection.inner{
	margin-top:2em;
	margin-bottom:1em;
	margin-left:5%;
	width:90%;
	margin-right:0%;

}

.aboutsection div{
	margin-left:3em;
	margin-right:1em;

}


@media only screen and (max-width: 1200px) {
	.aboutsection div{
		margin-left:0.2em;
		margin-right:0.2em;
	}
}


.code{
	font-family:'Courier New';
	color:black;
	background-color:#d3d3d3;
	padding: 0 0.5em;
	word-break: break-all;
}

div.code{
	padding: 0.5em 0.5em;
	margin-top:1em;
	margin-bottom:1em;
}


.hoverwhite:hover{
	color:white;
}



#bigSessionWarningFlasher {
	%border-style:solid;
	border-width:0.5px;
	border-radius:5px;
	border-color:#58828C;
	background-color:white;
	position:fixed;
	z-index:100;
	padding:0.5em;
	text-align:center; 
	font-size:90%; 
	margin-left:10%;
	width: 80%; 
	display:none;
}


#exampleSessions{

	width:80%;
	min-width:1000px;
	margin-left:10%;
	%text-align:center;

}

.exampleDiv{
	font-size:90%;
	%margin-top:1em;
	padding:1em;
	line-height:1.1em;
	text-size-adjust: 200%;
	border-style:solid;
	border-radius:0.3em;
	border-width:0.05em;
	text-align:left;
	%border-color:#58828C;
	%border-color:#58828C;
	background-color:white;
}

.exampleDiv.exampleRef{

	font-size:90%;

}

.mockMenuBtn{
	background-color:#58828C; 
	padding-left: 0.3em;
	padding-right: 0.3em;
	%text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	color:white;
	%opacity: 80%;

}

#geneSpeciesMapperTable{
	margin-left:10%;
	width:80%;
	text-align:left;
	font-size:80%;
}


.geneDraggable {
	cursor: move; /* fallback if grab cursor is unsupported */
	cursor: grab;
	cursor: -moz-grab;
	cursor: -webkit-grab;
	padding-left: 0.25em;
}

.geneDraggable.ui-draggable-dragging {
	
	background-color:white;
	color:black;
	border-style:solid;
	border-color:#58828C;
	border-width:0.05em;
	z-index:10000;s
}

.geneDroppable{
	border-bottom-width: 0.05em;
	border-bottom-style: solid;
	
	border-top-width: 0.05em;
	border-top-style: solid;
}



.geneDroppable.ui-droppable-hover {
	background-color:#58828C;
	color:white;
}



.binomial{
	font-style:italic;


}