
    body {
      color: #777;
      font-family:  Univers-Condensed,Arial,sans-serif;
      margin: 0;
      padding: 0;
      text-align: center;
	  font-size: 12px;
	  background-color: #25292c;
    }
	audio { 
		width: 100%; display: block; 
		}
	
	#container {
	  display: flex;                  /* establish flex container */
	  flex-direction: row;            /* default value; can be omitted */
	  flex-wrap: nowrap;              /* default value; can be omitted */
	  justify-content: space-between; /* switched from default (flex-start, see below) */
	  background-color: none;
	}
	#container > div {
	  height: 150px;
	  border: none;
	}
	a:link {
	  color: green;
	  background-color: transparent;
	  text-decoration: none;
	}
	a:visited {
	  color: pink;
	  background-color: transparent;
	  text-decoration: none;
	}
	a:hover {
	  color: red;
	  background-color: #222;
	  text-decoration: underline;
	}
	a:active {
	  color: yellow;
	  background-color: #222;
	  text-decoration: underline;
	}
	table{ text-align: left; } 
    header {
      padding: 1em;
    }
	td{
	word-wrap:break-word;
	height:25px;
	width:10em;
	}
	td.time{
		width:4em;
		font-size:9px;
	}
	td.artist{
		font-weight:bold;
		font-size:14px;
		text-transform: uppercase;
		width:30em;
		border-bottom-style: dotted;
		border-width: 1px;
	}
	td.title{
	width:15em;
	}

	.customers{
			width:100%;
	}
	.loader{
		display: inline-block;
		max-height:120px;
		width:100%;
		background-color:black;
		border:none;
		animation-name: animation;
		animation-duration: 6s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;    
		animation-play-state: running;
		background-color: #666;
	}
	.active{
		 background-color: #222;
		
	}
	.yellow
	{
		border: 4px solid yellow;
		padding-bottom:0px;
	}
	.yellow:hover 
	{
		border-width:6px;
		background-color:#222;
		color:#EEEEEE;
	}
	.lime
	{
		border: 4px solid lime;
			padding-bottom:0px;
	}
	.lime:hover 
	{
		border-width:6px;
		background-color:#222;
		color:#EEEEEE;
	}
	.deeppink
	{
		border: 4px solid deeppink;
			padding-bottom:0px;
	}
	.deeppink:hover 
	{
		border-width:6px;
		background-color:#222;
		color:#EEEEEE;
	}
	.springgreen
	{
		border: 4px solid springgreen;
			padding-bottom:0px;
	}
	.springgreen:hover 
	{
		border-width:6px;
		background-color:#222;
		color:#EEEEEE;
	}
	.orangered
	{
		border: 4px solid orangered;
		padding-bottom:0px;
	}
	.orangered:hover 
	{
		border-width:6px;
		background-color:#222;
		color:#EEEEEE;
	}
	.deepskyblue
	{
		border: 4px solid deepskyblue;
		padding-bottom:0px;
	}
	.deepskyblue:hover 
	{
		border-width:6px;
		background-color:#222;
		color:#EEEEEE;
	}
	
    h1 {
      font-size: 2em;
    }
    p {
      font-size: 1.0em;
    }
	  .img-container {
        text-align: center;
        display: block;
		}
		ul {
	  list-style-type: none;
	  margin: 0;
	  padding: 0;
	  overflow: hidden;
	  background-color: #333;
	}

	li {
	  float: left;
	}

	li a {
	  display: block;
	  color: white;
	  text-align: center;
	  padding: 14px 16px;
	  text-decoration: none;
	}

	li a:hover {
	  background-color: #111;
	}
	th {
	transform-origin: 0px 0px;
		width:100%;
	}
	th.bars1 {
	animation: animate 16s ease-in 0s infinite alternate;
	text-transform: lowercase;
	height:36px;
	
	}
	th.bars2 {
	animation: animate 14s ease-in 0s infinite alternate;
	text-transform: lowercase;
	height:5px;
	overflow:hidden;
	font-size:22px;
	display: block; height: 20px; overflow: auto;
	}
	th.bars3 {
	animation: animate 12s ease-in 0s infinite alternate;
	text-transform: lowercase;
	height:5px;
	overflow:hidden;
	font-size:19px;
	display: block; height: 16px; overflow: auto;

	}
	th.bars4 {
	animation: animate 10s ease-in 0s infinite alternate;
	text-transform: lowercase;	
	}
	th.bars5 {
	animation: animate 4s ease-in 0s infinite alternate;
	text-transform: lowercase;
	}
	
	@keyframes animate { 
			0%{ 
			transform: scale(1,1.1); 
 
			} 
			100%{ 
			transform: scale(6,5); 

			} 	
		}

	@keyframes animation {
		0%     {background-color:#666;}
		50.0%  {background-color:black;}
		100.0%  {background-color:#666;}
}

