body {
	background-color: black;
	margin:0;
}
/* ------------------------------------------------------
Styles for vertically and horiz centering initial div */
.outer {
	display: table;
	position: absolute;
	height: 100%;
	width: 100%;
	color:silver;
	background-color: black;
}

.middle {
	display: table-cell;
	vertical-align: middle;
}

.inner {
	margin-left: auto;
	margin-right: auto;
	width: 300px;
	font-size: 1em;
}
/*whatever width you want*/
/* ------------------------------------------------------ */

#container {
	display:none;
}

.soundIcon {
	font-family: "Times New Roman", Times, serif;
	font-size:50px;
	color:#adadad;
	cursor:pointer;
	position:absolute;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.selectedSoundIcon {
	font-family: "Times New Roman", Times, serif;
	color:#639cff;
}
[id="1"] {
	font-size:85px;
	top:63px;
	left:30px;
}
[id="2"] {
	font-size: 60px;
	top:164px;
	left:133px;
}
[id="3"] {
	font-size: 90px;
	top:231px;
	left:96px;
}
[id="4"] {
	font-size: 72px;
	top:222px;
	left:349px;
}
[id="5"] {
	font-size: 130px;
	top:64px;
	left:363px;
}
[id="6"] {
	font-size: 130px;
	top:280px;
	left:26px;
}
[id="7"] {
	font-size: 16px;
	top:39px;
	left:512px;
}
[id="8"] {
	font-size: 96px;
	top:171px;
	left:523px;
}
[id="9"] {
	font-size: 25px;
	top:461px;
	left:67px;
}
[id="10"] {
	font-size: 16px;
	top:58px;
	left:287px;
}
[id="11"] {
	font-size: 16px;
	top:195px;
	left:42px;
}
[id="12"] {
	font-size: 16px;
	top:322px;
	left:543px;
}
[id="13"] {
	font-size: 16px;
	top:100px;
	left:562px;
}
[id="14"] {
	font-size: 100px;
	top:327px;
	left:230px;
}
/* SLIDER -------------------------------------------------- */

#slidercontainer {
	padding-left:30px;
	padding-top:30px;
}

#volumeSlider {
    cursor: move; /* fallback: no `url()` support or images disabled */
    cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
    cursor:    -moz-grab; /* Firefox 1.5-26 */
    cursor:         grab; /* W3C standards syntax, should come least */
}
#volumeSlider:active {
    cursor: -webkit-grabbing;
    cursor:    -moz-grabbing;
    cursor:         grabbing;
}

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

	/* These styles are applied to the volume slider hopefully for mobile touch screens
	cuz the touch screens need a bigger slider than the default one, for the touch
	interface to work with it OK. */

	#volumeSlider {
	    -webkit-appearance: none;
	    height: 15px;
	    border-radius: 5px;
	    background: #d3d3d3;
	    outline: none;
	    opacity: 0.7;
	    -webkit-transition: .2s;
	    transition: opacity .2s;
	}

	#volumeSlider:hover {
	    opacity: 1;
	}

	#volumeSlider::-webkit-slider-thumb {
	    -webkit-appearance: none;
	    appearance: none;
	    width: 25px;
	    height: 35px;
	    border-radius: 5px;
	    background: #4CAF50;
	}

	#volumeSlider::-moz-range-thumb {
	    width: 25px;
	    height: 35px;
	    border-radius: 5px;
	    background: #4CAF50;
	}
}

/* Vispo logo styles---------------------------------------- */

a.old:link, a.old:visited, a.old:active {
	color: silver;
	text-decoration: none;
	font-size: 0.8em;
}
a.old:hover {
	color:white;
}
a.vispologo:link, a.vispologo:visited, a.vispologo:active {
  text-decoration:none;
  font-weight:400;
}
a.vispologo:hover {
  text-decoration:none;
  font-size:1.1em;
  font-weight:500;
}
#vispologo {
  font-family: "Times New Roman", Times, serif;
  letter-spacing:2px;
  text-align:center;
  text-shadow: 1px 1px #000000;
  position: fixed ;
  right:5px;
  bottom:5px;
}
#v {
  color:maroon;
  font-size:1.5em;
}
#i {
  color:yellow;
  font-size:1.2em;
}
#s {
  color:green;
  font-size:0.9em;
}
#p {
  color: #06F;
  font-size: 1.2em;
}
#o {
  color: #FD40F8;
  font-size: 1.5em;
}
/* end of Vispo logo styles------------------------------------ */