/* Audio Player Style */

/* Set Font File from Server */
@font-face {
  font-family: "Webdings";
  src: url("./fonts/wbd.woff") format("woff"), /* Modern Browsers */
     url("./fonts/wbd.woff2") format("woff2"), /* Modern Browsers */ 
 /*src: url("./fonts/wbd.eot"); /* IE9 Compat Modes */
   /*src: url("./fonts/wbd.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
     url("./fonts/wbd.otf") format("opentype"), /* Open Type Font */
     url("./fonts/wbd.svg") format("svg"), /* Legacy iOS */
     url("./fonts/wbd.ttf") format("truetype"); /* Safari, Android, iOS */
     
  font-weight: normal;
  font-style: normal;
}

/* Frame around image */
img {
		border:white;
		border-width:1px;
		border-style:solid;
}


/* Set Primary Body */
body {
	/* background:#000099; */
	background: url(field.gif) repeat;
	color:#ffffff;
	margin-left:40%;
}

/* Set button's default */
button {
	background:#ffffff;
	color:#000000;
	border:none;
}

/* Set Playlist Item information */
.jp-playlist-item {
	
}
a.jp-playlist-item {
	color:#ffffff;
	text-decoration:none;
}

/* set decoration for currently selected song */
.jp-playlist-current {
	text-decoration:underline;
}

/* Set text size & color of 'by Artist' */
.jp-artist {
	font-size:0.75em;
	color:#898989;
	
}

/* Set html ui & li Parameters */
ul {
	list-style-position:outside;
	/* Moves Playlist ui over to the left a bit */
	margin-left:-50px;
}
li {
	font-family:Arial;
	border:#FFFFFF;
	border-style:inset;
	border-width:3px;
	margin-left:25px;
	padding:3px;
	padding-left:9px;
	background:#0000cc;
}

/* Set Width of Total inforation to 270px */
.jp-video-270p {
	width:270px;
	background:#0000ff;
	padding:13px;
}

/* Set Poster size */
.jp-poster {
	display:block;
	margin: 0px auto -3px auto;
	width:270px;
	height:270px;
}

/* Track Selection Parameters */
.track-selection {
	display:inline;
	position:relative;
	text-align:left;
	padding:10px;
	width:310px;
	top:8px;
	left:-13px;
	font-size:0.9em;
	overflow:visible;
}

/* Volume/Mute/Max */

div.jp-volume-controls {
	display:block;
	float:left;
	padding-bottom:6px;
	width:280px;
	height:20px;
}

button.jp-mute {
	display:block;
	margin:0px auto 0px auto;
	float:left;
	position:relative;
	height:18px;
	border:none;
	left:-5px;
	top:3px;
	font-family: "Webdings";
}

button.jp-mute:focus {
	background:#0000cc;
	color:#ffffff;
	border:2px outset #ffffff;
}

button.jp-mute:hover {
	border:1px outset #000099;
}

button.jp-mute:focus:hover {
	border:1px outset #ffffff;
}

button.jp-volume-max {
	display:block;
	margin:0px auto 0px auto;
	float:right;
	position:relative;
	height:18px;
	border:none;
	top:-3px;
	right:4px;
	font-family: "Webdings";
}

button.jp-volume-max:focus {
	background:#0000cc;
	color:#ffffff;
	border:2px outset #ffffff;
}

button.jp-volume-max:hover {
	border:1px outset #000099;
}

button.jp-volume-max:focus:hover {
	border:1px outset #ffffff;
}

/*.jp-volume-controls .jp-mute {
	background:url(../jplayer.pink.flag.jpg) 0 -330px no-repeat;
}
	
.jp-volume-controls .jp-mute:focus {
	background:url(../jplayer.pink.flag.jpg) -25px -330px no-repeat;
}
	
.jp-state-muted .jp-volume-controls .jp-mute {
	background:url(../jplayer.pink.flag.jpg) -60px -330px no-repeat;
}
	
.jp-state-muted .jp-volume-controls .jp-mute:focus {
	background:url(../jplayer.pink.flag.jpg) -85px -330px no-repeat;
}
	
.jp-volume-controls .jp-volume-max {
	background:url(../jplayer.pink.flag.jpg) 0 -350px no-repeat;
}
	
.jp-volume-controls .jp-volume-max:focus {
	background:url(../jplayer.pink.flag.jpg) -25px -350px no-repeat;
} */
	
	/* Volume Bar */
.jp-volume-bar {
	background-color:darkblue;
	/*background:url(../jplayer.pink.flag.jpg) 0 -300px repeat-x;*/
	position:relative;
	left:0px;
	display:block;
	width:198px; /*length*/
	height:6px;  /*thickness of bar*/
	/*padding:3px 2px 1px;*/
	overflow:auto;
	cursor:pointer;
	top:8px;
	margin:0px 0px 0px 0px;
	
}
	
.jp-volume-bar-value {
	background-color:lightgrey;
	/*background:url(../jplayer.pink.flag.jpg) 0 -320px repeat-x;*/
	height:6px; /*thickness of bar*/
}
	/* Progress/Play Bar  */
	
.jp-progress {
	background-color:grey;
	/*background:url(../jplayer.pink.flag.jpg) 0 -240px no-repeat;*/
	width:197px;
	height:17px;
	padding:1px 1px 2px;
	margin-bottom:8px;
	margin-left:35px;
}

/*	
div.jp-video .jp-progress {
	border-top:1px solid #180a1f;
	border-bottom:1px solid #554560;
	width:80%;
	background-image:none;
	padding:0;
} */
	
.jp-seek-bar {
	background-color:darkblue;
	/*background:url(../jplayer.pink.flag.jpg) 0 -260px repeat-x;*/
	height:16px;
	cursor:pointer;
}
	
.jp-play-bar {
	background-color:white;
	/*background:url(../jplayer.pink.flag.jpg) 0 -280px repeat-x;*/
	width:0;
	height:100%;
	overflow:hidden;
}

/*div.jp-seeking-bg {
 background:url(../image/jplayer.pink.flag.seeking.gif)
}
*/

/* Time Display Parameters */

.jp-current-time {
	position:relative;
	font-size:0.8em;
	top:28px;
	right:5px;
}

.jp-duration {
	position:relative;
	font-size:0.8em;
	top:13px;
	left:250px;
}

.time-grp {
	display:block;
	margin: 0px auto 0px auto;
}

/* Set Controls Font to Webdings */
/* Set Controls Location to center */

button.jp-previous {
	font-family: "Webdings";
	position:relative;
	
}

button.jp-previous:focus {
	background:#0000cc;
	color:#ffffff;
	border:2px outset #ffffff;
}

button.jp-previous:hover {
	border:1px outset #000099;
}

button.jp-previous:focus:hover {
	border:1px outset #ffffff;
}

button.jp-play {
	font-family: "Webdings";
	position:relative;
}

button.jp-play:focus {
	background:#0000cc;
	color:#ffffff;
	border:2px outset #ffffff;
}

button.jp-play:hover {
	border:1px outset #000099;
}

button.jp-play:focus:hover {
	border:1px outset #ffffff;
}

button.jp-stop {
	font-family: "Webdings";
	position:relative;
}

button.jp-stop:focus {
	background:#0000cc;
	color:#ffffff;
	border:2px outset #ffffff;
}

button.jp-stop:hover {
	border:1px outset #000099;
}

button.jp-stop:focus:hover {
	border:1px outset #ffffff;
}

button.jp-next {
	font-family: "Webdings";
	position:relative;
}

button.jp-next:focus {
	background:#0000cc;
	color:#ffffff;
	border:2px outset #ffffff;
}

button.jp-next:hover {
	border:1px outset #000099;
}

button.jp-next:focus:hover {
	border:1px outset #ffffff;
}

button.jp-repeat {
	font-family: "Webdings";
	position:relative;
	border:1px outset #000000;
}

button.jp-repeat:hover {
	background:#0000cc;
	color:#ffffff;
	border:2px outset #ffffff;
}

button.jp-repeat:focus {
	border:1px outset #000099;
}

.jp-controls {
	display:block;
	margin: 0px auto 0px auto;
	float:left;
}

.jp-toggles {
	display:block;
	margin: 0px auto 0px auto;
	float:right;
}

/* Shuffle & Repeat  */

button.jp-shuffle {
	font-family: "Webdings";
	position:relative;
}

button.jp-shuffle:hover {
	background:#0000cc;
	color:#ffffff;
	border:1px outset #ffffff;
}

button.jp-shuffle:focus {
	border:1px outset #000099;
}

button.jp-shuffle:focus:hover {
	border:1px outset #ffffff;
}

/* Fullscreen Parameters */
button.jp-full-screen {
	font-family: "Webdings";
}

button.jp-full-screen:focus {
	background:#0000cc;
	color:#ffffff;
	border:2px outset #ffffff;
}

button.jp-full-screen:hover {
	border:1px outset #000099;
}

button.jp-full-screen:focus:hover {
	border:1px outset #ffffff;
}

/*
.jp-full-screen {
	background:url(../jplayer.pink.flag.jpg) 0 -420px no-repeat;
	margin-left:15px
}

.jp-full-screen:focus {
	background:url(../jplayer.pink.flag.jpg) -30px -420px no-repeat
}

.jp-state-full-screen .jp-full-screen {
	background:url(../jplayer.pink.flag.jpg) -60px -420px no-repeat
}

.jp-state-full-screen .jp-full-screen:focus {
	background:url(../jplayer.pink.flag.jpg) -90px -420px no-repeat
}
*/

/* Back and Foward Page Buttons */

button.return {
	font-family: "Webdings";
	position:relative;
	display:block;
	float:left;
	left:128px;
	margin: 3px 0px 3px 0px;
}

button.forward {
	font-family: "Webbings";
	position:relative;
	display:block;
	float:left;
	padding-left:3px;
}

/* Looped State */


.jp-state-looped button.jp-repeat {
	background:#0000cc;
	color:#ffffff;
	border:1px outset #ffffff;
}

.jp-state-looped button.jp-repeat:focus {
	border:1px outset #000099
}

.jp-state-looped button.jp-repeat:hover {
	background:#ffffff;
	color:#000000;
	border:none;
}

/*
.jp-state-muted .jp-volume-controls .jp-mute {
 
}

.jp-state-muted .jp-volume-controls .jp-mute:focus {
 
}  */
/*
.jp-state-looped button.jp-shuffle {
	background:#0000cc;
	color:#ffffff;
	border:2px outset #ffffff;
}

.jp-state-looped button.jp-shuffle:focus {
	border:1px outset #000099
}

.jp-state-looped button.jp-shuffle:hover {
	background:#ffffff;
	color:#000000;
	border:none;
} */