You are here

Home » API reference » jPlayer 7.2

jplayer.css in jPlayer 7.2

Same filename and directory in other branches
  1. 8.2 theme/jplayer.css
  2. 6 theme/jplayer.css
/*
 * Skin for jPlayer Plugin (jQuery JavaScript Library)
 * http://www.happyworm.com/jquery/jplayer
 *
 * Skin Name: Blue Monday
 *
 * Copyright (c) 2010 Happyworm Ltd
 * Dual licensed under the MIT and GPL licenses.
 *  - http://www.opensource.org/licenses/mit-license.php
 *  - http://www.gnu.org/copyleft/gpl.html
 *
 * Author: Silvia Benvenuti
 * Skin Version: 3.0 (jPlayer 2.0.0)
 * Date: 20th December 2010
 */

div.jp-audio,
div.jp-video {

	/* Edit the font-size to counteract inherited font sizing.
	 * Eg. 1.25em = 1 / 0.8em
	 */

	font-size:1.25em;

	font-family:Verdana, Arial, sans-serif;
	line-height:1.6;
	color: #666;
}
div.jp-audio {
	width:420px;
}
div.jp-video-270p {
	width:480px;
}
div.jp-video-360p {
	width:640px;
}
div.jp-interface {
	position: relative;
	background-color:#eee;
	/* width:418px; */
	width:100%;
	border:1px solid #009be3;
}
div.jp-audio div.jp-type-single div.jp-interface {
	height:80px;
	border-bottom:none;
}
div.jp-audio div.jp-type-playlist div.jp-interface {
	height:80px;
}
div.jp-video div.jp-type-single div.jp-interface {
	height:60px;
	border-bottom:none;
}
div.jp-video div.jp-type-playlist div.jp-interface {
	height:60px;
}
div.jp-interface ul.jp-controls {
	list-style-type:none;
	padding:0;
	margin: 0;
}
div.jp-interface ul.jp-controls li {
	/* position: absolute; */
	display:inline;
}
div.jp-interface ul.jp-controls a {
	position: absolute;
	overflow:hidden;
	text-indent:-9999px;
}
a.jp-play,
a.jp-pause {
	width:40px;
	height:40px;
	z-index:1;
}
div.jp-audio div.jp-type-single a.jp-play,
div.jp-audio div.jp-type-single a.jp-pause {
	top:20px;
	left:40px;
}
div.jp-audio div.jp-type-playlist a.jp-play,
div.jp-audio div.jp-type-playlist a.jp-pause {
	top:20px;
	left:48px;
}
div.jp-video a.jp-play,
div.jp-video a.jp-pause {
	top:15px;
}
div.jp-video-270p div.jp-type-single a.jp-play,
div.jp-video-270p div.jp-type-single a.jp-pause {
	left:195px;
}
div.jp-video-270p div.jp-type-playlist a.jp-play,
div.jp-video-270p div.jp-type-playlist a.jp-pause {
	left:220px;
}
div.jp-video-360p div.jp-type-single a.jp-play,
div.jp-video-360p div.jp-type-single a.jp-pause {
	left:275px;
}
div.jp-video-360p div.jp-type-playlist a.jp-play,
div.jp-video-360p div.jp-type-playlist a.jp-pause {
	left:300px;
}
a.jp-play {
	background: url("jplayer.blue.monday.jpg") 0 0 no-repeat;
}
a.jp-play:hover {
	background: url("jplayer.blue.monday.jpg") -41px 0 no-repeat;
}
a.jp-pause {
	background: url("jplayer.blue.monday.jpg") 0 -42px no-repeat;
	display: none;
}
a.jp-pause:hover {
	background: url("jplayer.blue.monday.jpg") -41px -42px no-repeat;
}
div.jp-audio div.jp-type-single a.jp-stop {
	top:26px;
	left:90px;
}
div.jp-audio div.jp-type-playlist a.jp-stop {
	top:26px;
	left:126px;
}
div.jp-video a.jp-stop {
	top:21px;
}
div.jp-video-270p div.jp-type-single a.jp-stop {
	left:245px;
}
div.jp-video-270p div.jp-type-playlist a.jp-stop {
	left:298px;
}
div.jp-video-360p div.jp-type-single a.jp-stop {
	left:325px;
}
div.jp-video-360p div.jp-type-playlist a.jp-stop {
	left:378px;
}
a.jp-stop {
	background: url("jplayer.blue.monday.jpg") 0 -83px no-repeat;
	width:28px;
	height:28px;
	z-index:1;
}
a.jp-stop:hover {
	background: url("jplayer.blue.monday.jpg") -29px -83px no-repeat;
}
div.jp-audio div.jp-type-playlist a.jp-previous {
	left:20px;
	top:26px;
}
div.jp-video div.jp-type-playlist a.jp-previous {
	top:21px;
}
div.jp-video-270p div.jp-type-playlist a.jp-previous {
	left:192px;
}
div.jp-video-360p div.jp-type-playlist a.jp-previous {
	left:272px;
}
a.jp-previous {
	background: url("jplayer.blue.monday.jpg") 0 -112px no-repeat;
	width:28px;
	height:28px;
}
a.jp-previous:hover {
	background: url("jplayer.blue.monday.jpg") -29px -112px no-repeat;
}
div.jp-audio div.jp-type-playlist a.jp-next {
	left:88px;
	top:26px;
}
div.jp-video div.jp-type-playlist a.jp-next {
	top:21px;
}
div.jp-video-270p div.jp-type-playlist a.jp-next {
	left:260px;
}
div.jp-video-360p div.jp-type-playlist a.jp-next {
	left:340px;
}
a.jp-next {
	background: url("jplayer.blue.monday.jpg") 0 -141px no-repeat;
	width:28px;
	height:28px;
}
a.jp-next:hover {
	background: url("jplayer.blue.monday.jpg") -29px -141px no-repeat;
}
div.jp-progress {
	position: absolute;
	overflow:hidden;
	background-color: #ddd;
}
div.jp-audio div.jp-type-single div.jp-progress {
	top:32px;
	left:130px;
	width:122px;
	height:15px;
}
div.jp-audio div.jp-type-playlist div.jp-progress {
	top:32px;
	left:164px;
	width:122px;
	height:15px;
}
div.jp-video div.jp-progress {
	top:0px;
	left:0px;
	width:100%;
	height:10px;
}
div.jp-seek-bar {
	background: url("jplayer.blue.monday.jpg") 0 -202px repeat-x;
	width:0px;
	/* height:15px; */
	height:100%;
	cursor: pointer;
}
div.jp-play-bar {
	background: url("jplayer.blue.monday.jpg") 0 -218px repeat-x ;
	width:0px;
	/* height:15px; */
	height:100%;
}

/* The seeking class is added/removed inside jPlayer */
div.jp-seeking-bg {
	background: url("pbar-ani.gif");
}

a.jp-mute,
a.jp-unmute {
	width:18px;
	height:15px;
}
div.jp-audio div.jp-type-single a.jp-mute,
div.jp-audio div.jp-type-single a.jp-unmute {
	top:32px;
	left:274px;
}
div.jp-audio div.jp-type-playlist a.jp-mute,
div.jp-audio div.jp-type-playlist a.jp-unmute {
	top:32px;
	left:296px;
}
div.jp-video a.jp-mute,
div.jp-video a.jp-unmute {
	top:27px;
}
div.jp-video-270p div.jp-type-single a.jp-mute,
div.jp-video-270p div.jp-type-single a.jp-unmute {
	left:304px;
}
div.jp-video-270p div.jp-type-playlist a.jp-unmute,
div.jp-video-270p div.jp-type-playlist a.jp-mute {
	left:363px;
}
div.jp-video-360p div.jp-type-single a.jp-mute,
div.jp-video-360p div.jp-type-single a.jp-unmute {
	left:384px;
}
div.jp-video-360p div.jp-type-playlist a.jp-mute,
div.jp-video-360p div.jp-type-playlist a.jp-unmute {
	left:443px;
}
a.jp-mute {
	background: url("jplayer.blue.monday.jpg") 0 -186px no-repeat;
}
a.jp-mute:hover {
	background: url("jplayer.blue.monday.jpg") -19px -170px no-repeat;
}
a.jp-unmute {
	background: url("jplayer.blue.monday.jpg") 0 -170px no-repeat;
	display: none;
}
a.jp-unmute:hover {
	background: url("jplayer.blue.monday.jpg") -19px -186px no-repeat;
}
div.jp-volume-bar {
	position: absolute;
	overflow:hidden;
	background: url("jplayer.blue.monday.jpg") 0 -250px repeat-x;
	width:46px;
	height:5px;
	cursor: pointer;
}
div.jp-audio div.jp-type-single div.jp-volume-bar {
	top:37px;
	left:302px;
}
div.jp-audio div.jp-type-playlist div.jp-volume-bar {
	top:37px;
	left:324px;
}
div.jp-video div.jp-volume-bar {
	top:32px;
}
div.jp-video-270p div.jp-type-single div.jp-volume-bar {
	left:332px;
}
div.jp-video-270p div.jp-type-playlist div.jp-volume-bar {
	left:391px;
}
div.jp-video-360p div.jp-type-single div.jp-volume-bar {
	left:412px;
}
div.jp-video-360p div.jp-type-playlist div.jp-volume-bar {
	left:471px;
}
div.jp-volume-bar-value {
	background: url("jplayer.blue.monday.jpg") 0 -256px repeat-x;
	width:0px;
	height:5px;
}
div.jp-current-time,
div.jp-duration {
	position: absolute;
	font-size:.64em;
	font-style:oblique;
}
div.jp-duration {
	text-align: right;
}
div.jp-audio div.jp-type-single div.jp-current-time,
div.jp-audio div.jp-type-single div.jp-duration {
	top:49px;
	left:130px;
	width:122px;
}
div.jp-audio div.jp-type-playlist div.jp-current-time,
div.jp-audio div.jp-type-playlist div.jp-duration {
	top:49px;
	left:164px;
	width:122px;
}
div.jp-video div.jp-current-time,
div.jp-video div.jp-duration {
	top:10px;
	left:0px;
	width:98%;
	padding:0 1%;
}
div.jp-playlist {
	/* width:418px; */
	width:100%;
	background-color:#ccc;
	border:1px solid #009be3;
	border-top:none;
}
div.jp-playlist ul {
	list-style-type:none;
	margin:0;
	padding:0 20px;
	/* background-color:#ccc; */
	/* border:1px solid #009be3; */
	/* border-top:none; */
	/* width:378px; */
	font-size:.72em;
}


div.jp-type-single div.jp-playlist li {
	padding:5px 0 5px 20px;
	font-weight:bold;
}
div.jp-type-playlist div.jp-playlist li {
	padding:5px 0 4px 20px;
	border-bottom:1px solid #eee;
}
/*
div.jp-video div.jp-playlist li {
	padding:5px 0 5px 20px;
	font-weight:bold;
}
*/
div.jp-type-playlist div.jp-playlist li.jp-playlist-last {
	padding:5px 0 5px 20px;
	border-bottom:none;
}
div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
	list-style-type:square;
	list-style-position:inside;
	padding-left:8px;
}
div.jp-type-playlist div.jp-playlist a {
	color: #666;
	text-decoration: none;
}
div.jp-type-playlist div.jp-playlist a:hover {
	color:#0d88c1;
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-current {
	color:#0d88c1;
}
div.jp-type-playlist div.jp-playlist div.jp-free-media {
	display:inline;
	margin-left:20px;
}

div.jp-video div.jp-video-play {
	background: transparent url("jplayer.blue.monday.video.play.png") no-repeat center;
	/* position: relative; */
	position: absolute;
	cursor:pointer;
	z-index:2;
}
div.jp-video div.jp-video-play:hover {
	background: transparent url("jplayer.blue.monday.video.play.hover.png") no-repeat center;
}
div.jp-video-270p div.jp-video-play {
	top:-270px;
	width:480px;
	height:270px;
}
div.jp-video-360p div.jp-video-play {
	top:-360px;
	width:640px;
	height:360px;
}

div.jp-jplayer {
	width:0px;
	height:0px;
}
div.jp-video div.jp-jplayer {
	border:1px solid #009be3;
	border-bottom:none;
	z-index:1;
}
div.jp-video-270p div.jp-jplayer {
	width:480px;
	height:270px;
}
div.jp-video-360p div.jp-jplayer {
	width:640px;
	height:360px;
}
div.jp-jplayer {
	background-color: #000000;
}

File

theme/jplayer.css
View source 
  1. /*

  2.  * Skin for jPlayer Plugin (jQuery JavaScript Library)

  3.  * http://www.happyworm.com/jquery/jplayer

  4.  *

  5.  * Skin Name: Blue Monday

  6.  *

  7.  * Copyright (c) 2010 Happyworm Ltd

  8.  * Dual licensed under the MIT and GPL licenses.

  9.  *  - http://www.opensource.org/licenses/mit-license.php

  10.  *  - http://www.gnu.org/copyleft/gpl.html

  11.  *

  12.  * Author: Silvia Benvenuti

  13.  * Skin Version: 3.0 (jPlayer 2.0.0)

  14.  * Date: 20th December 2010

  15.  */

  16. 

  17. div.jp-audio,

  18. div.jp-video {

  19. 

  20. 	/* Edit the font-size to counteract inherited font sizing.

  21. 	 * Eg. 1.25em = 1 / 0.8em

  22. 	 */

  23. 

  24. 	font-size:1.25em;

  25. 

  26. 	font-family:Verdana, Arial, sans-serif;

  27. 	line-height:1.6;

  28. 	color: #666;

  29. }

  30. div.jp-audio {

  31. 	width:420px;

  32. }

  33. div.jp-video-270p {

  34. 	width:480px;

  35. }

  36. div.jp-video-360p {

  37. 	width:640px;

  38. }

  39. div.jp-interface {

  40. 	position: relative;

  41. 	background-color:#eee;

  42. 	/* width:418px; */

  43. 	width:100%;

  44. 	border:1px solid #009be3;

  45. }

  46. div.jp-audio div.jp-type-single div.jp-interface {

  47. 	height:80px;

  48. 	border-bottom:none;

  49. }

  50. div.jp-audio div.jp-type-playlist div.jp-interface {

  51. 	height:80px;

  52. }

  53. div.jp-video div.jp-type-single div.jp-interface {

  54. 	height:60px;

  55. 	border-bottom:none;

  56. }

  57. div.jp-video div.jp-type-playlist div.jp-interface {

  58. 	height:60px;

  59. }

  60. div.jp-interface ul.jp-controls {

  61. 	list-style-type:none;

  62. 	padding:0;

  63. 	margin: 0;

  64. }

  65. div.jp-interface ul.jp-controls li {

  66. 	/* position: absolute; */

  67. 	display:inline;

  68. }

  69. div.jp-interface ul.jp-controls a {

  70. 	position: absolute;

  71. 	overflow:hidden;

  72. 	text-indent:-9999px;

  73. }

  74. a.jp-play,

  75. a.jp-pause {

  76. 	width:40px;

  77. 	height:40px;

  78. 	z-index:1;

  79. }

  80. div.jp-audio div.jp-type-single a.jp-play,

  81. div.jp-audio div.jp-type-single a.jp-pause {

  82. 	top:20px;

  83. 	left:40px;

  84. }

  85. div.jp-audio div.jp-type-playlist a.jp-play,

  86. div.jp-audio div.jp-type-playlist a.jp-pause {

  87. 	top:20px;

  88. 	left:48px;

  89. }

  90. div.jp-video a.jp-play,

  91. div.jp-video a.jp-pause {

  92. 	top:15px;

  93. }

  94. div.jp-video-270p div.jp-type-single a.jp-play,

  95. div.jp-video-270p div.jp-type-single a.jp-pause {

  96. 	left:195px;

  97. }

  98. div.jp-video-270p div.jp-type-playlist a.jp-play,

  99. div.jp-video-270p div.jp-type-playlist a.jp-pause {

  100. 	left:220px;

  101. }

  102. div.jp-video-360p div.jp-type-single a.jp-play,

  103. div.jp-video-360p div.jp-type-single a.jp-pause {

  104. 	left:275px;

  105. }

  106. div.jp-video-360p div.jp-type-playlist a.jp-play,

  107. div.jp-video-360p div.jp-type-playlist a.jp-pause {

  108. 	left:300px;

  109. }

  110. a.jp-play {

  111. 	background: url("jplayer.blue.monday.jpg") 0 0 no-repeat;

  112. }

  113. a.jp-play:hover {

  114. 	background: url("jplayer.blue.monday.jpg") -41px 0 no-repeat;

  115. }

  116. a.jp-pause {

  117. 	background: url("jplayer.blue.monday.jpg") 0 -42px no-repeat;

  118. 	display: none;

  119. }

  120. a.jp-pause:hover {

  121. 	background: url("jplayer.blue.monday.jpg") -41px -42px no-repeat;

  122. }

  123. div.jp-audio div.jp-type-single a.jp-stop {

  124. 	top:26px;

  125. 	left:90px;

  126. }

  127. div.jp-audio div.jp-type-playlist a.jp-stop {

  128. 	top:26px;

  129. 	left:126px;

  130. }

  131. div.jp-video a.jp-stop {

  132. 	top:21px;

  133. }

  134. div.jp-video-270p div.jp-type-single a.jp-stop {

  135. 	left:245px;

  136. }

  137. div.jp-video-270p div.jp-type-playlist a.jp-stop {

  138. 	left:298px;

  139. }

  140. div.jp-video-360p div.jp-type-single a.jp-stop {

  141. 	left:325px;

  142. }

  143. div.jp-video-360p div.jp-type-playlist a.jp-stop {

  144. 	left:378px;

  145. }

  146. a.jp-stop {

  147. 	background: url("jplayer.blue.monday.jpg") 0 -83px no-repeat;

  148. 	width:28px;

  149. 	height:28px;

  150. 	z-index:1;

  151. }

  152. a.jp-stop:hover {

  153. 	background: url("jplayer.blue.monday.jpg") -29px -83px no-repeat;

  154. }

  155. div.jp-audio div.jp-type-playlist a.jp-previous {

  156. 	left:20px;

  157. 	top:26px;

  158. }

  159. div.jp-video div.jp-type-playlist a.jp-previous {

  160. 	top:21px;

  161. }

  162. div.jp-video-270p div.jp-type-playlist a.jp-previous {

  163. 	left:192px;

  164. }

  165. div.jp-video-360p div.jp-type-playlist a.jp-previous {

  166. 	left:272px;

  167. }

  168. a.jp-previous {

  169. 	background: url("jplayer.blue.monday.jpg") 0 -112px no-repeat;

  170. 	width:28px;

  171. 	height:28px;

  172. }

  173. a.jp-previous:hover {

  174. 	background: url("jplayer.blue.monday.jpg") -29px -112px no-repeat;

  175. }

  176. div.jp-audio div.jp-type-playlist a.jp-next {

  177. 	left:88px;

  178. 	top:26px;

  179. }

  180. div.jp-video div.jp-type-playlist a.jp-next {

  181. 	top:21px;

  182. }

  183. div.jp-video-270p div.jp-type-playlist a.jp-next {

  184. 	left:260px;

  185. }

  186. div.jp-video-360p div.jp-type-playlist a.jp-next {

  187. 	left:340px;

  188. }

  189. a.jp-next {

  190. 	background: url("jplayer.blue.monday.jpg") 0 -141px no-repeat;

  191. 	width:28px;

  192. 	height:28px;

  193. }

  194. a.jp-next:hover {

  195. 	background: url("jplayer.blue.monday.jpg") -29px -141px no-repeat;

  196. }

  197. div.jp-progress {

  198. 	position: absolute;

  199. 	overflow:hidden;

  200. 	background-color: #ddd;

  201. }

  202. div.jp-audio div.jp-type-single div.jp-progress {

  203. 	top:32px;

  204. 	left:130px;

  205. 	width:122px;

  206. 	height:15px;

  207. }

  208. div.jp-audio div.jp-type-playlist div.jp-progress {

  209. 	top:32px;

  210. 	left:164px;

  211. 	width:122px;

  212. 	height:15px;

  213. }

  214. div.jp-video div.jp-progress {

  215. 	top:0px;

  216. 	left:0px;

  217. 	width:100%;

  218. 	height:10px;

  219. }

  220. div.jp-seek-bar {

  221. 	background: url("jplayer.blue.monday.jpg") 0 -202px repeat-x;

  222. 	width:0px;

  223. 	/* height:15px; */

  224. 	height:100%;

  225. 	cursor: pointer;

  226. }

  227. div.jp-play-bar {

  228. 	background: url("jplayer.blue.monday.jpg") 0 -218px repeat-x ;

  229. 	width:0px;

  230. 	/* height:15px; */

  231. 	height:100%;

  232. }

  233. 

  234. /* The seeking class is added/removed inside jPlayer */

  235. div.jp-seeking-bg {

  236. 	background: url("pbar-ani.gif");

  237. }

  238. 

  239. a.jp-mute,

  240. a.jp-unmute {

  241. 	width:18px;

  242. 	height:15px;

  243. }

  244. div.jp-audio div.jp-type-single a.jp-mute,

  245. div.jp-audio div.jp-type-single a.jp-unmute {

  246. 	top:32px;

  247. 	left:274px;

  248. }

  249. div.jp-audio div.jp-type-playlist a.jp-mute,

  250. div.jp-audio div.jp-type-playlist a.jp-unmute {

  251. 	top:32px;

  252. 	left:296px;

  253. }

  254. div.jp-video a.jp-mute,

  255. div.jp-video a.jp-unmute {

  256. 	top:27px;

  257. }

  258. div.jp-video-270p div.jp-type-single a.jp-mute,

  259. div.jp-video-270p div.jp-type-single a.jp-unmute {

  260. 	left:304px;

  261. }

  262. div.jp-video-270p div.jp-type-playlist a.jp-unmute,

  263. div.jp-video-270p div.jp-type-playlist a.jp-mute {

  264. 	left:363px;

  265. }

  266. div.jp-video-360p div.jp-type-single a.jp-mute,

  267. div.jp-video-360p div.jp-type-single a.jp-unmute {

  268. 	left:384px;

  269. }

  270. div.jp-video-360p div.jp-type-playlist a.jp-mute,

  271. div.jp-video-360p div.jp-type-playlist a.jp-unmute {

  272. 	left:443px;

  273. }

  274. a.jp-mute {

  275. 	background: url("jplayer.blue.monday.jpg") 0 -186px no-repeat;

  276. }

  277. a.jp-mute:hover {

  278. 	background: url("jplayer.blue.monday.jpg") -19px -170px no-repeat;

  279. }

  280. a.jp-unmute {

  281. 	background: url("jplayer.blue.monday.jpg") 0 -170px no-repeat;

  282. 	display: none;

  283. }

  284. a.jp-unmute:hover {

  285. 	background: url("jplayer.blue.monday.jpg") -19px -186px no-repeat;

  286. }

  287. div.jp-volume-bar {

  288. 	position: absolute;

  289. 	overflow:hidden;

  290. 	background: url("jplayer.blue.monday.jpg") 0 -250px repeat-x;

  291. 	width:46px;

  292. 	height:5px;

  293. 	cursor: pointer;

  294. }

  295. div.jp-audio div.jp-type-single div.jp-volume-bar {

  296. 	top:37px;

  297. 	left:302px;

  298. }

  299. div.jp-audio div.jp-type-playlist div.jp-volume-bar {

  300. 	top:37px;

  301. 	left:324px;

  302. }

  303. div.jp-video div.jp-volume-bar {

  304. 	top:32px;

  305. }

  306. div.jp-video-270p div.jp-type-single div.jp-volume-bar {

  307. 	left:332px;

  308. }

  309. div.jp-video-270p div.jp-type-playlist div.jp-volume-bar {

  310. 	left:391px;

  311. }

  312. div.jp-video-360p div.jp-type-single div.jp-volume-bar {

  313. 	left:412px;

  314. }

  315. div.jp-video-360p div.jp-type-playlist div.jp-volume-bar {

  316. 	left:471px;

  317. }

  318. div.jp-volume-bar-value {

  319. 	background: url("jplayer.blue.monday.jpg") 0 -256px repeat-x;

  320. 	width:0px;

  321. 	height:5px;

  322. }

  323. div.jp-current-time,

  324. div.jp-duration {

  325. 	position: absolute;

  326. 	font-size:.64em;

  327. 	font-style:oblique;

  328. }

  329. div.jp-duration {

  330. 	text-align: right;

  331. }

  332. div.jp-audio div.jp-type-single div.jp-current-time,

  333. div.jp-audio div.jp-type-single div.jp-duration {

  334. 	top:49px;

  335. 	left:130px;

  336. 	width:122px;

  337. }

  338. div.jp-audio div.jp-type-playlist div.jp-current-time,

  339. div.jp-audio div.jp-type-playlist div.jp-duration {

  340. 	top:49px;

  341. 	left:164px;

  342. 	width:122px;

  343. }

  344. div.jp-video div.jp-current-time,

  345. div.jp-video div.jp-duration {

  346. 	top:10px;

  347. 	left:0px;

  348. 	width:98%;

  349. 	padding:0 1%;

  350. }

  351. div.jp-playlist {

  352. 	/* width:418px; */

  353. 	width:100%;

  354. 	background-color:#ccc;

  355. 	border:1px solid #009be3;

  356. 	border-top:none;

  357. }

  358. div.jp-playlist ul {

  359. 	list-style-type:none;

  360. 	margin:0;

  361. 	padding:0 20px;

  362. 	/* background-color:#ccc; */

  363. 	/* border:1px solid #009be3; */

  364. 	/* border-top:none; */

  365. 	/* width:378px; */

  366. 	font-size:.72em;

  367. }

  368. 

  369. 

  370. div.jp-type-single div.jp-playlist li {

  371. 	padding:5px 0 5px 20px;

  372. 	font-weight:bold;

  373. }

  374. div.jp-type-playlist div.jp-playlist li {

  375. 	padding:5px 0 4px 20px;

  376. 	border-bottom:1px solid #eee;

  377. }

  378. /*

  379. div.jp-video div.jp-playlist li {

  380. 	padding:5px 0 5px 20px;

  381. 	font-weight:bold;

  382. }

  383. */

  384. div.jp-type-playlist div.jp-playlist li.jp-playlist-last {

  385. 	padding:5px 0 5px 20px;

  386. 	border-bottom:none;

  387. }

  388. div.jp-type-playlist div.jp-playlist li.jp-playlist-current {

  389. 	list-style-type:square;

  390. 	list-style-position:inside;

  391. 	padding-left:8px;

  392. }

  393. div.jp-type-playlist div.jp-playlist a {

  394. 	color: #666;

  395. 	text-decoration: none;

  396. }

  397. div.jp-type-playlist div.jp-playlist a:hover {

  398. 	color:#0d88c1;

  399. }

  400. div.jp-type-playlist div.jp-playlist a.jp-playlist-current {

  401. 	color:#0d88c1;

  402. }

  403. div.jp-type-playlist div.jp-playlist div.jp-free-media {

  404. 	display:inline;

  405. 	margin-left:20px;

  406. }

  407. 

  408. div.jp-video div.jp-video-play {

  409. 	background: transparent url("jplayer.blue.monday.video.play.png") no-repeat center;

  410. 	/* position: relative; */

  411. 	position: absolute;

  412. 	cursor:pointer;

  413. 	z-index:2;

  414. }

  415. div.jp-video div.jp-video-play:hover {

  416. 	background: transparent url("jplayer.blue.monday.video.play.hover.png") no-repeat center;

  417. }

  418. div.jp-video-270p div.jp-video-play {

  419. 	top:-270px;

  420. 	width:480px;

  421. 	height:270px;

  422. }

  423. div.jp-video-360p div.jp-video-play {

  424. 	top:-360px;

  425. 	width:640px;

  426. 	height:360px;

  427. }

  428. 

  429. div.jp-jplayer {

  430. 	width:0px;

  431. 	height:0px;

  432. }

  433. div.jp-video div.jp-jplayer {

  434. 	border:1px solid #009be3;

  435. 	border-bottom:none;

  436. 	z-index:1;

  437. }

  438. div.jp-video-270p div.jp-jplayer {

  439. 	width:480px;

  440. 	height:270px;

  441. }

  442. div.jp-video-360p div.jp-jplayer {

  443. 	width:640px;

  444. 	height:360px;

  445. }

  446. div.jp-jplayer {

  447. 	background-color: #000000;

  448. }