/* CSS for the HTML5 player 
   Note: Modify the following CSS file
         as needed for your own needs.

*/


div.JBGHTML5Background {
   width: 90px;
   height: 27px;
  /* background-color: #cd870d;*/
}

div.JBGHTML5Player {
   padding-top: 5px;   
   padding-left: 16px;
}



/* The button */
.button {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 1px 1px;

/* Change figures to change shape */
   -webkit-border-radius: 35px;
   -moz-border-radius: 35px;
   border-radius: 35px;


/* Change figures to change amount of shadow */
   -moz-box-shadow: 2px 2px 2px #888;
   -webkit-box-shadow: 2px 2px 2px #888;
   box-shadow: 2px 2px 2px #888;


/* Change figures to change transition attributes */
   -webkit-transition: background .2s ease-in-out;
   -moz-transition: 	background .2s ease-in-out;
   transition: 		background .2s ease-in-out;
  
   }



.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   position: center left; 
   }

.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   position: bottom left;  


   }




/* The colors */

.button.custom {
	color: 	hsl(39, 100%, 30%) !important;

        -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
			    hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-moz-box-shadow:    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
			    hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
			    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	box-shadow:	    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
			    hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
			    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

  
}
.button.custom, .button.custom:hover, .button.custom:active {
	background-color: hsl(39, 100%, 50%);
	background-image: none;
        position: bottom left;
}
.button.custom:hover {
	background-color: hsl(39, 100%, 65%);
        position: bottom center;
}



.button.orange {
	color: 	hsl(39, 100%, 30%) !important;

        -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
			    hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-moz-box-shadow:    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
			    hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
			    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	box-shadow:	    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
			    hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */
			    rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

  
}
.button.orange, .button.orange:hover, .button.orange:active {
	background-color: hsl(39, 100%, 50%);
	background-image: none;
        position: bottom left;
}
.button.orange:hover {
	background-color: hsl(39, 100%, 65%);
        position: bottom center;
}


.button.blue {
	color: 	 hsl(208, 50%, 40%) !important;
	background-color: 	hsl(208, 100%, 75%);
	
	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
	-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
	box-shadow: 		inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px;	/* drop shadow */
}

.button.blue, .button.blue:hover, .button.blue:active {
	background-color: hsl(208, 100%, 50%);
	background-image: none;
        position: bottom left;
}
.button.blue:hover {
	background-color: hsl(208, 100%, 83%);
        position: bottom center;
}

.button.green {
	color: 				hsl(88, 70%, 30%) !important;
	background-color: 	hsl(88, 70%, 60%);
	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}


.button.green, .button.green:hover, .button.green:active {
	background-color: hsl(88, 100%, 50%);
	background-image: none;
        position: bottom left;
}
.button.green:hover {
	background-color: hsl(88, 100%, 83%);
        position: bottom center;
}


.button.red {
	color: 				hsl(0, 100%, 50%) !important;
	background-color: 	hsl(0, 100%, 50%);
	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(0, 100%, 60%) 0 .1em 3px, hsl(0, 100%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(0, 100%, 60%) 0 .1em 3px, hsl(0, 100%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(0, 100%, 60%) 0 .1em 3px, hsl(0, 100%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}


.button.red, .button.red:hover, .button.red:active {
	background-color: hsl(0, 100%, 63%);
	background-image: none;
        position: bottom left;
}
.button.red:hover {
	background-color: hsl(0, 75%, 50%);
        position: bottom center;
}

.button.yellow {
	color: 				hsl(60, 100%, 50%) !important;
	background-color: 	hsl(60, 100%, 50%);
	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(60, 100%, 60%) 0 .1em 3px, hsl(60, 100%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(60, 100%, 60%) 0 .1em 3px, hsl(60, 100%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(60, 100%, 60%) 0 .1em 3px, hsl(60, 100%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}


.button.yellow, .button.yellow:hover, .button.yellow:active {
	background-color: hsl(60, 100%, 63%);
	background-image: none;
        position: bottom left;
}
.button.yellow:hover {
	background-color: hsl(60, 75%, 50%);
        position: bottom center;
}




.button.white, .button.white:hover, .button.white:active {
	background-color: hsl(0, 0%, 50%);
	background-image: hsl(0, 0%, 50%);

        -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}


.button.white, .button.white:hover, .button.white:active {
	background-color: hsl(0, 0%, 100%);
	background-image: none;
        position: bottom left;
}
.button.white:hover {
	background-color: hsl(0, 0%, 88%);
        position: bottom center;
}

.button.transparent {
	color: 	rgba(0,0,0,0.5) !important;
}
.button.transparent, .button.transparent:hover, .button.transparent:active {
	background-color: transparent;
	background-image: none;
}
.button.transparent:hover {
	opacity: .9;
}

/* -------------- States -------------- */


.button:hover {
	background-color: 	hsl(0, 0%, 83%);
}


.button:active {
	background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
	background-image: 	-moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);
	background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);

	-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ 
							rgba(0,0,0,0.4) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
	-moz-box-shadow: 	inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ 
							rgba(0,0,0,0.4) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
	box-shadow: 		inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ 
							rgba(0,0,0,0.4) 0 .1em 1px, /* border */
							rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

	-webkit-transform: 	translateY(.2em);
	-moz-transform: 	translateY(.2em);
	transform: 			translateY(.2em);
}

.button:focus {
	outline: none;
	color: rgba(254,255,255,0.9) !important;
	text-shadow: rgba(0,0,0,0.2) 0 1px 2px;
}