/*
 * 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-audio {
	width:201px;
	padding:20px;
	background: #0a8ff6; /* add Blueplug */
}
*/

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;
	width:300px;
	height:40px;
	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%;height:35px;display: inline-block; top: 0px;}


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

/* @group CONTROLS */

div.jp-controls-holder {clear:both; margin:0 auto 0 auto; position:absolute; left:326px; top:3px; width:112px; height:45px;}

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;
	line-height:31px;
	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/menu/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/menu/jplayer.pink.flag.seeking.gif");
}
*/
.jp-progress {background: url(../images/player/player.png) no-repeat; height:29px;}

div.jp-video .jp-progress {width:245px; padding:0; position:absolute; top:1px;}

.jp-seek-bar {position:absolute; top:0px; left:0; width:245px !important; height:29px; cursor:pointer; z-index:10;}


/* @end */

/* @group current time and duration */

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

.jp-current-time {left:251px}

.jp-time-seperator {left:284px}

.jp-duration {left:292px}

.jp-video .jp-current-time {}

.jp-video .jp-duration {}

/* @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#ui_bottom div.gPlayer{position:absolute; left:338px; top:2px; width:300px; 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 {position:absolute; display:block; text-indent:-9999px; padding: 0; width:28px; height:28px; background:url("../images/player/player.png") no-repeat;}
ul.jp-controls li > a.jp-play {left:12px; background-position:0px -227px;}
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:0px -254px;}
ul.jp-controls li > a.jp-pause {left:12px; background-position:-88px -227px;}
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:-88px -254px;}
ul.jp-controls li > a.jp-reload {left:40px; background-position:-28px -227px;}
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:-28px -254px;}


/* 스크립트패널관련 */
ul.jp-controls li > a.btnScript{ left:70px; background-position:-57px -227px;}
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:-57px -254px;}


/* jPlayer jp-play-bar */
.jp-play-bar{width:20%; height:29px; position:absolute; background: url(../images/player/player.png) 0 -36px no-repeat; no-repeat;}
div.jp-type-single div.jp-play-bar a{position:absolute; display:block; float:right; width:34px; height:31px; right:-3px; top:1px; background: url(../images/player/moja.png) 0 0 no-repeat; z-index:15; }

/* @group volume controls */
.jp-volume-controls {
    position: absolute;
}

.jp-volume-controls .jp-mute {
	background:url(../images/player/player.png) -60px -149px no-repeat;
    z-index: 10;
    position: absolute;
    top: 7px;
    left: 426px;
    display: block;
    width: 25px;
    height: 21px;
}

.jp-volume-controls .jp-unmute {
    background:url(../images/player/player.png) -60px -170px no-repeat; 
    z-index: 10;
    position: absolute;
    top: 7px;
    left: 425px;
    display: block;
    width: 25px;
    height: 21px;
}

.jp-volume-controls .jp-volume-max {
    background: url("../images/menu/player.png") 0 -350px no-repeat;
}

.jp-volume-bar {
	width:52px; 
	height:17px; 
	background:url(../images/player/volum-bar-off.png) no-repeat;
    position: absolute;
	top: 8px;
	left: 448px;
    overflow: hidden;
    cursor: pointer;
}

/* 관련학습보기 플레이어바 */
#popup_jplayer .jp-volume-controls .jp-unmute { left: 395px;}
#popup_jplayer .jp-volume-bar { left:432px; }

.jp-audio .jp-interface .jp-volume-bar,
.jp-audio-stream .jp-interface .jp-volume-bar {
    top: 10px;
    left: 0;
}

.jp-audio-stream .jp-interface .jp-volume-bar {
    width: 97px;
    border-right: 1px solid #180920;
    padding-right: 1px;
}

.jp-volume-bar-value {
	width:20%; 
	height:17px; 
	background:url(../images/player/volum-bar-on.png) no-repeat;
}