stylesheet.css

/* color #uid=2530u0k++zmAlZF+VXq+WqO+kkH */

@font-face {
	font-family: 'microscale-menlo';
	font-style: normal;
	font-weight: normal;
	src: url('fonts/Menlo-Regular.woff') format('woff');
}

@font-face {
  font-family: 'microscale-roboto';
  font-style: normal;
  font-weight: normal;
  src: url('fonts/RobotoSlab-Regular.woff') format('woff');
}

body {
	margin: 0;
	padding: 0;
}

*:focus {
	outline: none;
}

::selection {
	color: white;
	background: #F800B4;
}

::-moz-selection {
	color: white;
	background: #F800B4;
}

#main-container {
	width: 100%;
	height: 100%;
}

/*TRANSPORT CONTAINER*/
#transport-container {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 43px;
}


/*TRANPSORT*/
#transport-buttons-container {
  margin-left: 16px;
	float: left;
	width: 85px;
}

.top-button {
  position: absolute;
	width: 37px;
	height: 37px;
	bottom: 0;
	border: 0;
	cursor: pointer;
	margin: 0;
	padding: 0;
}

.play-pause-button {
	float: left;
}

#loading-buffers-indicator {
	display: none;
	float: left;
	cursor: auto;
}

#rewind-button {
	margin-left: 42px;
	float: left;
}

#rewind-button-mousedown {
	display: none;
	margin-left: 42px;
	float: left;
}

/*EXPRESSION INPUT*/

#expression-input {
	position: relative;
	display: inline-block;
  float: left;
	width: 140px;
	height: 42px;
	font-family: 'microscale-roboto', Georgia, serif;
	font-size: 33px;
	border: 0;
	margin: 0;
  margin-left: 99px;
	padding: 0;
	-webkit-appearance: none;
}

#expression-input:focus {
	color: #F800B4;
}

/*TRACKLIST*/

#tracklist-container {
  /* position: absolute; */
  position: relative;
  display: inline-block;
  float: right;
	bottom: 0;
  margin-right: 16px;
  margin-top: 12px;
	font-family: 'microscale-menlo';
}

#tracklist-container ul {
	width: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#tracklist-container ul li {
	display: inline-block;
	margin-right: 19px;
	font-size: 16px;
}

.current-track {
	color: #3CDE00;
	list-style-position:inside;
	border-bottom: 7px solid #3CDE00;
}

#tracklist-container ul li {
	cursor: pointer;
}



/*MIDDLE CONTAINER*/
#middle-container, #middle-overlay-container {
	display: block;
	position: relative;
	margin-left: 0;
	width: 100%;
	line-height:0px;
	font-size:1px;
}

.text-buffer, .buffer-overlay {
	display: inline-block;
	width: 30.4%;
  height: 40vh;
	font-family: 'microscale-menlo';
	color: #555555;
	font-size: 11px;
	line-height: 142%;
	border: 0;
	margin: 1.3%;
	padding: 0;
	overflow-y: auto;
	overflow-x: hidden;
	vertical-align: top;
}

.text-buffer:focus {
	color: #F800B4;
}

.buffer-overlay {
	z-index: -50;
	position: absolute;
	display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
	justify-content: center; /* align horizontal */
	-webkit-justify-content: center;
	-moz-justify-content: center;
	align-items: center; /* align vertical */
	-webkit-align-items: center;
	-moz-align-items: center;

	overflow-y: hidden;
	overflow-x: hidden;

	font-family: 'microscale-roboto', Georgia, serif;
	font-size: 8vw;
	line-height: 70%;
	opacity: 0;
}

.buffer-overlay span {
	margin-bottom: 5%;
}

.loading-indicator {
	position: absolute;
	display: inline-block;
	width: 27.5%;
	height: 16vh;
	border: 0;
	margin: 2.7%;
	padding: 0;
	overflow-y: auto;
	overflow-x: hidden;
	text-align: center;
}

.loading-indicator span {
	display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.loading-indicator img {
	display: inline-block;
	vertical-align: middle;
}

/*BOTTOM CONTAINER*/
#bottom-container {
	position: absolute;
	font-family: 'microscale-menlo';
	width: 100%;
  height: 37px;
	bottom: 0;
  /* background-color: black; */
}


/*MAP*/

#map-container {
	position: absolute;
	left: 50%;
	width: 50%;
	height: 128px;
}

#map-container:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-top: 7px solid black;
}

#map-container ul {
	width: 100%;
	height: 128px;
	list-style-type: none;
	line-height: 100%; /*должно изменяться с размером шрифта li (быть равным ему)*/
	margin: 0;
	padding: 0;
}

#map-container ul li {
	display: inline-block;
	/*автоматически изменять размер шрифта, если не вмещается в div*/
	font-size: 10px;
	color: #777777;
	margin-top: 0;
	margin-left: 10px;
}

.playing-symbol {
	background-color: black;
	color: white;
}




/* WTF */
#wtf-info-container {
	position: absolute;
	width: 599px;
	height: 599px;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	background-color: white;
	z-index: 100;
	line-height:0px;
	font-size:1px;
}

#wtf-info-container div {
	display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
	justify-content: center; /* align horizontal */
	-webkit-justify-content: center;
	-moz-justify-content: center;
	align-items: center; /* align vertical */
	-webkit-align-items: center;
	-moz-align-items: center;

	width: 258px;
	height: 258px;
	font-family: 'microscale-menlo';
	color: white;
	font-size: 11px;
	line-height: 14px;
	border-style: solid;
	border-color: black;
	border-width: 20px;
	margin: 20px;
	margin: 0;
	overflow-y: auto;
	overflow-x: hidden;
	vertical-align: top;
}

#wtf-info-container a {
	font-family: 'microscale-menlo';
	color: white;
	font-size: 11px;
	line-height: 14px;
}

#wtf-info-container a:hover {
	text-decoration: none;
}

.bottom-link {
  float: right;
  color: black;
  text-decoration: none;
  font-size: 14px;
  margin-right: 14px;
  margin-top: 10px;
}