#title {
	position: fixed;
	left: 0%;
	top: 3%;
	width: 100%;
	margin: -1em 0 0 0;
	z-index: 5;
	background: rgba(238, 238, 238, 0.5);
	color: black;
	font-weight: bold;
	font-size: large;
	text-align: left;
	border: rgba(127, 127, 127, 0.5);
	border-right: none;
	/*padding: -0.35em 0.35em 0.35em 1.5em;*/
	box-shadow: 0 1px 3px black;
	border-radius: 0.5em 0.5em 0.5em 0.5em;
}
.titleflex {
  display: flex;
  border: 0px solid orange;
  flex-direction: row;
  justify-content: stretch;
  align-items: top;
}
.controlsflex {
  border: 0px solid white;
  background: #FFFFFFAA;
  flex-shrink: 1;
}


.controlsflex ul {

  background: #FFFFFFAA;
}

.logflex {
  border: 0px solid black;
  flex-grow: 1;
}
	
	
#info {
	position: fixed;
	left: 1%;
	top: 20%;
	width: 400px;
	margin: -2.5em 0 0 0;
	z-index: 10;
	background: rgba(238, 238, 238, 0.5);
	color: black;
	font-weight: bold;
	font-size: large;
	text-align: left;
	border: rgba(127, 127, 127, 0.5);
	border-right: none;
	padding: 0.45em 0.5em 0 0.5em;
	box-shadow: 0 1px 3px black;
	border-radius: 0.5em 2em 2em 0.5em;
 }

#infohandle {
	cursor:move;
}

#hidden_buttons {
	position: fixed;
	right: 1%;
	top: 30%;
	width: 230m;
	margin: -2.5em 0 0 0;
	z-index: 5;
	background: rgba(238, 238, 238, 0.5);
	color: black;
	font-weight: bold;
	font-size: large;
	text-align: left;
	border: rgba(127, 127, 127, 0.5);
	border-right: none;
	padding: 0.45em 0.5em 0 0.5em;
	box-shadow: 0 1px 3px black;
	border-radius: 0.5em 2em 2em 0.5em;
}
#hidden_buttons li { margin: 0 }
#hidden_buttons a { color: inherit }

#annotator {
	position: fixed;
	left: 1%;
	bottom: 45%;
	width: 450px;
	margin: -2.5em 0 0 0;
	z-index: 5;
	background: rgba(255, 255, 255, 0);
	color: black;
	font-weight: bold;
	font-size: large;
	text-align: left;
	border: rgba(255, 255, 255, 1);
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: visible;
	background-color: #00EEEE;
}

#title li {
	color: black;
	font-family: Century;
	float: left;
	border: 0px solid black;
}

#title li a {
	display: block;
	font-size: 20px;
	color: #666666;
	text-align: center;
	padding: 7px 7px;
	text-decoration: none;
}
/*This is the background color for hovering the navigation barr*/
#title li a:hover {
	background-color: #FFFFFFAA;
	border: 3px solid #FFFFFF55;
	transition-duration: 0.1s;
	color: black;
}     
	
#hidden_buttons li a {
	color: #333333;
	font-family: Century;
}
 
dt, dd {
	color: #333333;
	font-family: Century;
}

.slider {
	font-family: Century;
}

.no-close .ui-dialog-titlebar-close {
	display: none;
}

canvas.annotator {
    position:absolute;
    border: 1px solid #BFBFBF;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.dot-off {
	height: 20px;
	width: 20px;
	background-color: #A9A9A900;
	border-radius: 50%;
	border-style: solid;
	border-width: 2px;
	border-color: black;
	display: inline-block;
}


.traffic-button {
	display: flex;
	align-items: center;
}

.left-vertical {
	border-left: 3px solid black;
	height: 30px;
	padding-top: 7px;
}

.left-vertical li {
	padding-left: 10px;
}

.traffic-category {
	display: inline-block;
	align-content: center;
	vertical-align: center;
}

body {
	font-family: sans-serif;
}

a {
	font-family: sans-serif;
}

div {
	font-family: sans-serif;
}