@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video, audio, table, th, tr, td, select, option, input {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}


.player {
  height: 40px;
  width: 340px;
  background-color: #1E2125;
 position:relative; 
 
  /* position: absolute; */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  border-radius:25px 20px 25px 20px;
  color:#FFF;
  background-color:#F00;
    border-radius: 10px 10px 10px 10px;
 -moz-border-radius: 10px 10px 10px 10px;
 -webkit-border-radius: 10px 10px 10px 10px;
 -ms-border-radius: 10px 10px 10px 10px;
 -o-border-radius: 10px 10px 10px 10px;
 
}
.player ul {
  list-style: none;
}
.player ul li {
  display:none; /* inline-block; */
}
.player slider {
  color:#FFF;
}



select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
   /* -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 10px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;*/
	-webkit-box-shadow: 0 3px 0 #fff, 0 -1px #fff inset;
    -moz-box-shadow: 0 10px 0 #fff, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #fff, 0 -1px #fff inset;
   /* background: #f8f8f8; */
	background:#F03;
    color:#888;
	color:#367FEC;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
	
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left:0px;
	margin-right:0px;
	width: 90.36%; 
	/*width: 80.36%; */
	padding-left: 10.82%;
	padding-right: 10.82%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left:10px;
	width: 100%;
	display: block;
}


#page{
	clear: both;
	float: left;
	margin-left:40px;;
	width: 100%;
	display: block;
}

#page2{
	clear: both;
	float: left;
	margin-left:40px;
	width: 100%;
	display: block;
}
#getAudioSelect {
	clear: both;
	float: left;
	margin-left:40px;
	width: 79.1666%;
	color:#06F;
	display: block;
	border:medium;
	border-style:inset;
	border-width:thick;
	border-color:#666;
	text-align:center
}
#songsPlayed {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#getStreamOnline {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#musicPlayers {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

.musicPlayers {
	/*clear: both; */
	float: left;
	margin-left:20px;
	background-color:#000;
	width: 20%;
	color:#FFF;
	display: block;
}

.player1 {
background-image: url('../playStation/RadioSynchGraphic.png');
width: 340px;
height: 140px;
-webkit-transition: all all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -webkit-box-shadow: 20px 20px 40px rgba(0,0,0,4);
  -moz-box-shadow: 20px 20px 40px rgba(0,0,0,4);

  -moz-transition: all all 0.5s linear;
  transition: all all 0.5s linear;
  color: #5e6062;
  /* font-family: "Raleway", sans-serif; */
  font-family:"Arial Black", Gadget,  sans-serif;
  height: 90px;
  line-height: 1.2;
  margin: 50px auto;
  position: relative;
  visibility:visible;
  border-radius: 10px 10px 10px 10px;
 -moz-border-radius: 10px 10px 10px 10px;
 -webkit-border-radius: 10px 10px 10px 10px;
}

.player2 {
background-image: url('../playStation/RadioSynchGraphic.png');
width: 340px;
height: 140px;
 -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  background: #06F;
  color: #5e6062;
  bottom: 12px;
  box-shadow: 0 15px 23px rgba(0, 0, 0, 0.3);
  content: "";
  height: 90px;
  left: 2%;
  opacity:100;
  padding-left: 5%;
  position: absolute;
  width: 96%;
  visibility:visible;
  z-index: 5;
}
.player4
 {/*background: transparent url("LogoAppUseRedo.png") no-repeat scroll center top; */
    height: 240px;
    position: relative;
    width: 240px;
    z-index: 2;
	border-width:thick
 }

.anim4 {
background-image: url('RadioSynchGraphic.png');
width: 450px;
height: 140px;
animation: anim 4.0s steps(10) alternate;
}

/*-----------------------------------------------*/

#audioplayer{
    width: 420px;
    height: 90px;
    margin: auto auto auto auto;
  border:none;
}

#pButton{
	height:120px;
	width: 90px;
	border: none;
	background-size: 50% 50%;
	background-position: center;
}
.play{height:40px;width:75px;color:#000; background-color:#06F;border-radius:2px;font-size:14px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;border-color:#000}
.pause{height:40px;width:75px;color:#000; background-color:#06F;border-radius:2px;font-size:14px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;border-color:#000}
.volUp{height:40px;width:75px;color:#000; background-color:#06F;border-radius:2px;font-size:14px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;border-color:#000}
.volDown{height:40px;width:75px;color:#000; background-color:#06F;border-radius:2px;font-size:14px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;border-color:#000;border-color:#000}
.getSlider {color:#FF; font-size:18px;color:#FFF;border-color:#000}

/*.play{background: url('../images/play.png') no-repeat;
.pause{background: url('../images/pause.png') no-repeat
*/
.songTitle {
	clear: both;
	/*float:left; */
	margin-left: 0;
	width: 100%;
	display: block;
	text-align:center;
	background:#FFF;
	text-align:left;font-size:18px;
	font-family:"Arial, Helvetica, sans-serif";
  border-radius: 2px 2px 2px 2px;
 -moz-border-radius: 10px 10px 10px 10px;
 -webkit-border-radius: 10px 10px 10px 10px;
 -ms-border-radius: 10px 10px 10px 10px;
 -o-border-radius: 10px 10px 10px 10px;
}	
.stationDescription {
	/*clear: both; */
	/*float:left; */
	margin-left: 0;
	width: 100%;
	/*display:inline; 	background:#666;*/
	background:#fff;
	text-align:center;font-size:18px;
	font-family:"Arial, Helvetica, sans-serif";
/*  border-radius: 0px 0px 0px 0px;
 -moz-border-radius: 10px 10px 10px 10px;
 -webkit-border-radius: 10px 10px 10px 10px;
 -ms-border-radius: 10px 10px 10px 10px;
 -o-border-radius: 10px 10px 10px 10px;
 */
}

input#seekslider{
	width:340px;
	border-radius:2px;
}

/*---------------------*/
input[type='range'] {
    -webkit-appearance: none !important;
	margin:0px;
	padding:0px;
    background:#06F;
    height:13px;
	border-bottom:#333 1px solid;
	width:340px;
}
input[type='range']::-ms-fill-lower  {
	background:#000;
}
input[type='range']::-ms-fill-upper  {
	background:#000;
}
input[type='range']::-moz-range-track {
	border:none;
    background: #000;
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: radial-gradient(#FFF, #333);
    height:11px;
    width:11px;
	border-radius:100%;
	cursor:progress;
}
input[type='range']::-moz-range-thumb {
    background: radial-gradient(#FFF, #333);
    height:11px;
    width:11px;
	border-radius:100%;
	cursor:pointer;
}
input[type='range']::-ms-thumb {
    -webkit-appearance: none !important;
    background: radial-gradient(#FFF, #333);
    height:11px;
    width:11px;
	border-radius:100%;
	cursor:pointer;
}

/*--------------------*/
#timeline{
	width: 400px;
	height: 20px;
	background: #4200f7;
	margin-top: 20px;
	float: left;
	border-radius: 15px;
	display:block;
}

#playhead{
	width: 18px;
	height: 18px;
	border-radius: 50%;
	margin-top: 1px;
	/*background:#06E; */
background: rgba(0, 255, 196, 0.82);
/*	background-color:#F00 */
}

@keyframes anim {
  100% { background-position: -2400px; }
}

#playlist,audio,select{background:#FFF;width:400px;padding:20px;}
.active a{color:#5DB0E6;text-decoration:none;}
li a{color:#eeeedd;background:#333;padding:5px;display:block;}
li a:hover{text-decoration:none;
}

.player:after {
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  /*background: #777;*/
  background: #FFF;
  bottom: 12px;
  box-shadow: 0 15px 23px rgba(0, 0, 0, 0.3);
  content: "";
  height: 10px;
  left: 2%;
  opacity: 0;
  padding-left: 5%;
  position: absolute;
  width: 96%;
  z-index: 5;
}
#footerPage {
	clear: both;
	float:center;
	margin-left: 0;
	width: 100%;
	display: block;
}
#displayPlayer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#songTitle {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	text-align:center;
	background-color:#000;
	text-align:left;
	font-size:18px;
	font-family:'Arial, Helvetica, sans-serif';
border-radius: 10px 10px 10px 10px;
 -moz-border-radius: 10px 10px 10px 10px;
 -webkit-border-radius: 10px 10px 10px 10px;
 -ms-border-radius: 10px 10px 10px 10px;
 -o-border-radius: 10px 10px 10px 10px;
}

.songTitle {
	clear: both;
	/*float:left; */
	margin-left: 0;
	width: 100%;
	display: block;
	text-align:center;
	background:#FFF;
	text-align:left;font-size:18px;
	font-family:"Arial, Helvetica, sans-serif";
  border-radius: 2px 2px 2px 2px;
 -moz-border-radius: 10px 10px 10px 10px;
 -webkit-border-radius: 10px 10px 10px 10px;
 -ms-border-radius: 10px 10px 10px 10px;
 -o-border-radius: 10px 10px 10px 10px;
}	
.stationDescription {
	clear: both;
	/*float:left; */
	margin-left: 0;
	width: 100%;
	display: block;
	text-align:center;
	background:#FFF;
	text-align:center;font-size:18px;
	font-family:"Arial, Helvetica, sans-serif";
  border-radius: 2px 2px 2px 2px;
 -moz-border-radius: 10px 10px 10px 10px;
 -webkit-border-radius: 10px 10px 10px 10px;
 -ms-border-radius: 10px 10px 10px 10px;
 -o-border-radius: 10px 10px 10px 10px;

}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}


#page{
	clear: both;
	float: left;
	margin-left: 10.60%;
	width: 100%;
	display: block;
}

#page2{
	clear: both;
	float: left;
	margin-left: 10.60%;
	width: 100%;
	display: block;
}
#getAudioSelect {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#songsPlayed {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#getStreamOnline {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#musicPlayers {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	color:#06F;
	display: block;
}

.musicPlayers {
	/*clear: both; */
	float: left;
	margin-left:20px;
	background-color:#000;
	width: 20%;
	color:#FFF;
	display: block;
}

.player4
 {background: transparent url("LogoAppUseRedo.png") no-repeat scroll center top;
    height: 240px;
    position: relative;
    width: 240px;
    z-index: 2;
	border-width:thick
 }

.anim4 {
background-image: url('RadioSynchGraphic.png');
width: 250px;
height: 140px;
animation: anim 4.0s steps(10) alternate;
}
@keyframes anim {
 100% { background-position: -2400px; }
}

#footerPage {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#displayPlayer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#songTitle {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 320px) {
select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
   /* -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 10px 0 #ccc, 0 -1px #fff inset;
	*/
	-webkit-box-shadow: 0 3px 0 #fff, 0 -1px #fff inset;
    -moz-box-shadow: 0 10px 0 #fff, 0 -1px #fff inset;
   /* box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; */
    box-shadow: 0 3px 0 #fff, 0 -1px #fff inset;
   /* background: #f8f8f8; */
	background:#F03;
    /* color:#888;*/
	color:#06C;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}	
.gridContainer {
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
}
#LayoutDiv1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}


#page{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#page2{
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#getAudioSelect {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#songsPlayed {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#getStreamOnline {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#musicPlayers {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

.musicPlayers {
	/*clear: both; */
	float: left;
	margin-left:20px;
	background-color:#000;
	width: 100%;
	color:#FFF;
	display: block;
}

.player4
 {background: transparent url("LogoAppUseRedo.png") no-repeat scroll center top;
    height: 240px;
    position: relative;
    width: 240px;
    z-index: 2;
	border-width:thick
 }
 
.anim4 {
background-image: url('RadioSynchGraphic.png');
width: 250px;
height: 140px;
animation: anim 4.0s steps(10) alternate;
}
@keyframes anim {
  100% { background-position: -2400px; }
}


#footerPage {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#displayPlayer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#songTitle {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

label {position:relative}
label:after {
    content:'<>';
    font:11px "Consolas", monospace;
    color:#aaa;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}