/*
 * Skin for jPlayer Plugin (jQuery JavaScript Library)
 * http://www.jplayer.org
 *
 * Skin Name: Pink Flag
 *
 * Copyright (c) 2011 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: 1.0 (jPlayer 2.1.0)
 * Date: 1st September 2011
 */

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

	/* Edit the font-size to counteract inherited font sizing.
	 * Eg. 1.25em = 1 / 0.8em
	 */
	font-size:1em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */
	font-family:Verdana, Arial, sans-serif;
	line-height:1.6;
	color: #fff;
	height:100%;
}

div.jp-video-270p {

}

div.jp-video-full {
	/* Rules for IE6 (full-screen) */

	/* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */
	position:static !important; position:relative
}

div.jp-video-full div.jp-jplayer {
	top: 0;
	left: 0;
	position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */
	overflow: hidden;
	z-index:1000;
}

div.jp-video-full div.jp-gui {
	position: fixed !important; position: static; /* Rules for IE6 (full-screen) */
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	z-index:1000;
}
div.jp-type-single div.jp-gui {
	position: relative; 
	top: 0;
	left: 0;
	z-index:1000;
}

/* Study Section */
div.jp-type-single-study div.jp-gui-study {
	position: fixed !important; position: static; /* Rules for IE6 (full-screen) */
	top: 600px;
	left: 340px;
	width:500px;
	height:100%;
	z-index:1000;
}

div.jp-video-full div.jp-interface {
	position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */
	bottom: 0;
	left: 0;
	z-index:1000;
}

div.jp-interface {position: absolute;width: 100%;display: inline-block; top: 0px;}


div.jp-audio .jp-interface {height: 31px;	padding-top:0px;}

/* @group CONTROLS */

div.jp-controls-holder {width:130px; position:relative; left:350px; top:11px;}

/*div.jp-interface ul.jp-controls {list-style-type:none; padding: 0;}*/

/*
div.jp-audio ul.jp-controls {
	float:left;
	display:inline; !* need this to fix IE6 double margin *!
}

div.jp-video ul.jp-controls {
	clear: both;
	display:inline; !* need this to fix IE6 double margin *!
}
*/

div.jp-interface ul.jp-controls li {display:inline; float:left;}
div.jp-controls-access { position:absolute; left:384px; top:3px; width:194px; height:32px; }
div.jp-controls-access ul li {float:left; height:32px; line-height: 32px; padding: 0 9px 0 9px; background:url("../images/res/layout3.png") left 0 no-repeat}
div.jp-controls-access ul li.first {background:none;}
div.jp-controls-access ul li a { color:#fff; letter-spacing: -0.05em; }
div.jp-controls-access ul li a:hover, div.jp-controls-access ul li a:active { color:#ff9600; }
.playbackrate_on { color:#ff9600 !important; }


/* @end */

/* @group playlist player controls */

div.jp-type-playlist .jp-controls li a{
	float:left;
	display:inline; /* need this to fix IE6 double margin */
}

div.jp-type-playlist .jp-play {
	background: url("../img/player/jplayer.pink.flag.jpg") -24px -40px no-repeat;
}

div.jp-type-playlist .jp-play:hover {
	background: url("../img/player/jplayer.pink.flag.jpg") -124px -40px no-repeat;
}

div.jp-type-playlist .jp-pause {
	background: url("../img/player/jplayer.pink.flag.jpg") -24px -120px no-repeat;
}

div.jp-type-playlist .jp-pause:hover {
	background: url("../img/player/jplayer.pink.flag.jpg") -124px -120px no-repeat;
}

div.jp-type-playlist .jp-stop {
	background: url("../img/player/jplayer.pink.flag.jpg") -24px -80px no-repeat;
}

div.jp-type-playlist .jp-stop:hover {
	background: url("../img/player/jplayer.pink.flag.jpg") -124px -80px no-repeat;
}

div.jp-type-playlist .jp-previous {
	background: url("../img/player/jplayer.pink.flag.jpg") -24px -200px no-repeat;
}

div.jp-type-playlist .jp-previous:hover {
	background: url("../img/player/jplayer.pink.flag.jpg") -124px -200px no-repeat;
}

div.jp-type-playlist .jp-next {
	background: url("../img/player/jplayer.pink.flag.jpg") -24px -160px no-repeat;
}

div.jp-type-playlist .jp-next:hover {
	background: url("../img/player/jplayer.pink.flag.jpg") -124px -160px no-repeat;
}

/* @end */

/* @end */




/* @group TOGGLES */

ul.jp-toggles {
	list-style-type:none;
	padding:0;
	margin:0 auto;
	z-index:20;
	overflow:hidden;
}

div.jp-audio ul.jp-toggles {
	width:55px;
}

div.jp-audio .jp-type-single ul.jp-toggles {
	width:25px;
}

ul.jp-toggles li{display:block;}

ul.jp-toggles li a{ display:block; overflow:hidden; text-indent:-9999px;	line-height:100%; /* need this for IE6 */}

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

.jp-full-screen:hover {
	background: url("../img/player/jplayer.pink.flag.jpg") -30px -420px no-repeat;
}

.jp-restore-screen {
	background: url("../img/player/jplayer.pink.flag.jpg") -60px -420px no-repeat;
	margin-left: 20px;
}

.jp-restore-screen:hover {
	background: url("../img/player/jplayer.pink.flag.jpg") -90px -420px no-repeat;
}


ul.jp-toggles li a.jp-again {width:22px; height:23px; background-position:-336px -24px; position:absolute;}
ul.jp-toggles li a.jp-again:hover {background-position:-336px 0}

ul.jp-toggles li a.jp-repeat:hover {background-position:-336px 0;}

.jp-repeat-off {
	background: url("../img/player/jplayer.pink.flag.jpg") -60px -440px no-repeat;
}

.jp-repeat-off:hover {
	background: url("../img/player/jplayer.pink.flag.jpg") -90px -440px no-repeat;
}

.jp-shuffle {
	background: url("../img/player/jplayer.pink.flag.jpg") 0 -460px no-repeat;
	margin-left: 5px;
}

.jp-shuffle:hover {
	background: url("../img/player/jplayer.pink.flag.jpg") -30px -460px no-repeat;
}

.jp-shuffle-off {
	background: url("../img/player/jplayer.pink.flag.jpg") -60px -460px no-repeat;
	margin-left: 5px;
}

.jp-shuffle-off:hover {
	background: url("../img/player/jplayer.pink.flag.jpg") -90px -460px no-repeat;
}


/* @end */

/* @group progress bar */

/* The seeking class is added/removed inside jPlayer */
/*
div.jp-seeking-bg {
	background: url("../images/res/jplayer.pink.flag.seeking.gif");
}
*/
.jp-progress {background: url(../images/player/player.png) 0 0 no-repeat;}
div.jp-video .jp-progress {width:254px; height:6px; padding:0; position:absolute; top:17px; left:0;}
.jp-seek-bar {position:absolute; top:0; left:0; width:254px !important; height:6px; cursor:pointer; z-index:10;}

/* @end */

/* @group current time and duration */

.jp-current-time,
.jp-time-seperator,
.jp-duration {width:36px; font-size:11px; font-family:Dotum,'돋움',Arial,Helvetica,sans-serif; color:#fff; position:absolute; top:12px;}

.jp-current-time {left:265px}
.jp-time-seperator {left:298px}
.jp-duration {left:308px}

/* @end */

/* @group playlist */

.jp-title ul,
.jp-playlist ul {
	list-style-type:none;	
	font-size:.7em;
	margin: 0;
	padding: 0;
}

.jp-video .jp-title ul {
	margin: 0 20px 10px;
}


.jp-video .jp-playlist ul {
	margin: 0 20px;
}

.jp-title li,
.jp-playlist li {
	position: relative;
	padding: 2px 0;
	border-top:1px solid #554461;
	border-bottom:1px solid #180a1f;
	overflow: hidden;
}

.jp-title li{
	border-bottom:none;
	border-top:none;
	padding:0;
	text-align:center;
}


/* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */

div.jp-type-playlist div.jp-playlist li:first-child {
	border-top:none;
	padding-top:3px;
}

div.jp-type-playlist div.jp-playlist li:last-child {
	border-bottom:none;
	padding-bottom:3px;
}

div.jp-type-playlist div.jp-playlist a {
	color: #fff;
	text-decoration:none;
}

div.jp-type-playlist div.jp-playlist a:hover {
	color: #e892e9;
}

div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
	background-color: #26102e;
	margin: 0 -20px;
	padding: 2px 20px;
	border-top: 1px solid #26102e;
	border-bottom: 1px solid #26102e;
}

div.jp-type-playlist div.jp-playlist li.jp-playlist-current a{
	color: #e892e9;
}

div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {
	float:right;
	display:inline;
	text-align:right;
	margin-left:10px;
	font-weight:bold;
	color:#8C7A99;
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {
	color:#E892E9;
}

div.jp-type-playlist div.jp-playlist span.jp-free-media {
	float: right;
	display:inline;
	text-align:right;
	color:#8C7A99;
}

div.jp-type-playlist div.jp-playlist span.jp-free-media a{
	color:#8C7A99;
}

div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover{
	color:#E892E9;
}
span.jp-artist {
	font-size:.8em;
	color:#8C7A99;
}

/* @end */


div.jp-video div.jp-video-play {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	cursor:pointer;
	background-color: "#000000"; /* Makes IE9 work with the active area over the whole video area. IE6/7/8 only have the button as active area. */
}
div.jp-video-270p div.jp-video-play {
	height:270px;
}
div.jp-video-360p div.jp-video-play {
	height:360px;
}
div.jp-video-full div.jp-video-play {
	height:100%;
	z-index:1000;
}
a.jp-video-play-icon {position:relative; display:block;	height: 100px;	margin-left:-56px;	margin-top:-50px; left:50%;	top:50%; text-indent:-9999px;}
div.jp-video-play a.jp-video-play-icon {background: url("../img/player/jplayer.pink.flag.video.play.png") 0 0 no-repeat;}
div.jp-video-play:hover a.jp-video-play-icon {}

div.jp-jplayer {
	/*background:  url("../img/bg_videotit.png") center center no-repeat*/
}

/* @group NO SOLUTION error feedback */

.jp-no-solution {
	position:absolute;
	width:390px;
	margin-left:-202px;
	left:50%;
	top: 10px;
	padding:5px;
	font-size:.8em;
	background-color:#3a2a45;
	border-top:2px solid #554461;
	border-left:2px solid #554461;
	border-right:2px solid #180a1f;
	border-bottom:2px solid #180a1f;
	color:#FFF;
	display: none;
}

.jp-no-solution a {
	color:#FFF;
}

.jp-no-solution span {
	font-size:1em;
	display:block;
	text-align:center;
	font-weight:bold;
}

.jp-audio .jp-no-solution {
	width:190px;
	margin-left:-102px;
}

/* @end */




/* jPlayer */
div#popup_jplayer div.jp-interface {position: absolute; width:100%; height:31px; display:inline-block; top:0px; left:154px;}
div#uiBottom div.gPlayer{position:absolute; left:245px; width:auto; height:40px; }
div.jp-jplayer{position:absolute; width:100%; height:100%; z-index:30}
ul.jp-controls > a{position:relative; margin:0 0 0 0;}

/* jPlayer jp-controls */
ul.jp-controls li > a {display:block; position:absolute; text-indent:-9999px; padding: 0; width:17px; height:17px; background:url("../images/player/player.png") no-repeat;}
ul.jp-controls li > a.jp-play {left:0; background-position: 0 -12px;}
ul.jp-controls li > a.jp-play:focus, div.jp-interface ul.jp-controls li > a.jp-play:hover, div.jp-interface ul.jp-controls li > a.jp-play.on {background-position: 0 -29px;}
ul.jp-controls li > a.jp-pause {left:0; background-position: -17px -12px;}
ul.jp-controls li > a.jp-pause:focus, div.jp-interface ul.jp-controls li > a.jp-pause:hover, div.jp-interface ul.jp-controls li > a.jp-pause.on {background-position: -17px -29px;}
ul.jp-controls li > a.jp-reload {left:25px; background-position: -34px -12px;}
ul.jp-controls li > a.jp-reload:focus, div.jp-interface ul.jp-controls li > a.jp-reload:hover, div.jp-interface ul.jp-controls li > a.jp-reload.on {background-position:-34px -29px;}
ul.jp-controls li > a.btnScript{left:86px; background-position:-72px -12px;}
ul.jp-controls li > a.btnScript:focus, div.jp-interface ul.jp-controls li > a.btnScript:hover, div.jp-interface ul.jp-controls li > a.btnScript.on {background-position:-72px -29px;}
ul.jp-controls li > a.jp-full {left:111px; background-position:-89px -12px;}
ul.jp-controls li > a.jp-full:focus, div.jp-interface ul.jp-controls li > a.jp-full:hover, div.jp-interface ul.jp-controls li > a.jp-full.on {background-position:-89px -29px;}

ul.jp-controls li > a.jp-play.deactivation {left:12px; background-position:-114px -71px;}
ul.jp-controls li > a.jp-pause.deactivation {left:12px; background-position:-95px -71px;}
ul.jp-controls li > a.jp-reload.deactivation {left:12px; background-position:-76px -71px;}
ul.jp-controls li > a.jp-full.deactivation {left:111px; background-position:-89px -46px;}

/* jPlayer jp-play-bar */
.jp-play-bar {width:20%; height:6px; position:absolute; cursor:pointer;	background:url(../images/player/player.png) 0 -6px no-repeat;}

/* volume controls */
.jp-volume-controls {position:relative; left:407px; top:-56px; width:17px; height:62px;}
.jp-volume-controls .jp-mute {position:absolute; top:68px; left:-2px; display:block; width:21px; height:17px; background:url(../images/player/player.png) -51px -12px no-repeat;}
.jp-volume-controls .jp-mute:focus, .jp-volume-controls .jp-mute:hover {background:url(../images/player/player.png) -51px -29px no-repeat;}
.jp-volume-controls .jp-unmute {position:absolute; top:68px; left:-2px; display:block; width:21px; height:17px; background:url(../images/player/player.png) -51px -29px no-repeat;}
.jp-volume-controls .jp-unmute:focus,
.jp-volume-controls .jp-unmute:hover {position:absolute; top:68px; left:-2px; display:block; width:21px; height:17px; background:url(../images/player/player.png) -51px -12px no-repeat;}

/*
.jp-volume-bar {width:5px; height:27px; position:absolute; top:18px; left:6px; overflow:hidden; cursor:pointer; background:url(../images/player/player.png) -123px -12px no-repeat;}
.jp-volume-bar-value {height:60%; background: url(../images/player/player.png) -128px -12px no-repeat;}
.jp-volume-controls .volume-up {width:9px; height:9px; position:absolute; top:4px; left:4px; overflow:hidden; cursor:pointer; background:url(../images/player/player.png) -133px -12px no-repeat;}
.jp-volume-controls .volume-down {width:9px; height:9px; position:absolute; top:49px; left:4px; overflow:hidden; cursor:pointer; background:url(../images/player/player.png) -142px -12px no-repeat;}
*/

.volume-bar-container {left:407px; top:-56px; width:17px; height:62px; background:url(../images/player/player.png) -106px -12px no-repeat; display:none;}
.volume-bar-container .jp-volume-bar {width:5px; height:27px; position:relative; left:6px; top:17px; overflow:hidden; cursor:pointer; background:url(../images/player/player.png) -128px -12px no-repeat;}
.volume-bar-container .jp-volume-bar-value {position:absolute; bottom:0; width:5px; background: url(../images/player/player.png) -123px -12px no-repeat;}
.volume-bar-container .volume-up {width:9px; height:9px; position:absolute; top:4px; left:4px; overflow:hidden; cursor:pointer; background:url(../images/player/player.png) -133px -12px no-repeat;}
.volume-bar-container .volume-down {width:9px; height:9px; position:absolute; top:49px; left:4px; overflow:hidden; cursor:pointer; background:url(../images/player/player.png) -142px -12px no-repeat;}


/*--------------------------------------------------------------------------------------------------
개발자 추가 코드
--------------------------------------------------------------------------------------------------*/
/* 크롬관련 처리 */
video::-webkit-media-controls { display:none !important; }