/* quiz edit */
.subtitleEdit {}

.subtitleEdit ul[role="subtitleList"] {
	padding:0; 
	margin:0;
	border-top: 1px solid rgb(169, 169, 169);
}
.subtitleEdit ul[role="subtitleList"] > li {list-style-type:none; overflow:auto;}
.subtitleEdit ul[role="subtitleList"] ul.answer {padding:0; margin: 5px 0 0;}

.subtitleEdit > ul > .item	{
	position:relative; 
	padding: 7px 0;
	margin: 0 5px;
	border-bottom:1px solid #ccc;
	
}
	.subtitleEdit > ul > .item input	{margin-right:5px}
	.subtitleEdit > ul > .item .q		{overflow:hidden}

.subtitleEdit.editing [role="subtitleList"] > .item .tool {display:none !important}

	.subtitleEdit .item .tool			{position:absolute; top:5px; right:5px; display:none; z-index:10}
	.subtitleEdit .item:hover .tool		{display:block}

	.subtitleEdit .item .tool button 	{margin-left:5px}


.subtitleEdit .item .sn {position:absolute; top:0; left:0; min-height:25px; font-size:15px; text-align:right; font-weight:bold; color:#fff; padding:5px 10px 5px 15px; border-radius:0 15px 15px 0; background:#001eb9}
.subtitleEdit .time, .subtitleEdit .answer, .subtitleEdit .explain	{line-height:1.8; margin-top:5px; overflow:hidden}
.subtitleEdit .explain img	{height:auto !important; width:auto !important}

.subtitlePanel {margin: 10px; padding:10px; border-radius:5px; background:#fff; box-shadow:0 0 4px #000}
.subtitlePanel .tool		{margin-top:10px}

/* selection options */
.subtitlePanel .answer-option > * { vertical-align: top; }
.subtitlePanel .answer-option { margin-bottom: 15px; }
.subtitlePanel .answer-option .grab	{display:inline-block; margin-right: 5px; width:16px; height:25px; background:url(/sys/res/icon/drag.png) no-repeat center center #eee; cursor:move}
.subtitlePanel .answer-option .item 	{margin:3px 5px 0 0;}
.subtitlePanel .answer-option .close		{float:none; padding: 4px 5px; opacity:.6; color:#f00}
.subtitlePanel .answer-option .close:hover	{opacity:1}
.subtitlePanel .answer-option [role="opt"] { width: 200px; }

.subtitlePanel select {
	width: auto;
}
.subtitlePanel [role="durning"],
.subtitlePanel [role="time"] {
	width: 80px;
}


.sposition-marker, .subtitleItem{
    color: #FFFFFF;
	position: absolute;
	z-index: 100;
	bottom: 45px;
	right: 0px;
    left: 0px;
	font-weight: normal;
	text-align: center;
}
.subtitleItem>div{
	background: rgba(0, 0, 0, 0.45);
	padding: 3px 10px;
	display: inline-block;
}
.sposition-marker.ui-draggable {
    cursor: move; cursor: grab; cursor: -ms-grab; cursor: -moz-grab; cursor: -webkit-grab;
}
.sposition-marker.ui-draggable:active {
	cursor: move; cursor: grabbing; cursor: -ms-grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing;
}
.subtitleText{
	color: #FFF;
}
.subtitleText:hover{
	color: #EEE;
}
.subtitleEdit [role="addSubtitleBtn"]{
	cursor: pointer;
    width: 10%;
    float: right;
    height: 50px;
    background: #167AC6;
    text-align: center;
}
.subtitleEdit [role="addSubtitleBtn"]>i{
	line-height: 50px;
    color: white;
}

.subtitleEdit [role="addSubtitleBtn"].editing{
	opacity: .7;
}

.subtitleEdit [role="trange"]{
    width: 90px;
    float: left;
}

.subtitleEdit [role="remove"]{
	color: #167AC6;
	cursor: pointer;
}

.subtitleEdit .sub-text-view{
	width:70px;
	border: none;
	background:none;
}
.subtitleEdit .sub-textarea-view{
	width:350px;
	border: none;
	resize: none;
	word-break: break-all;
	background:none;
}
textarea:disabled, input:disabled{
	background: none;
}

.subtitleEdit div.note{
	padding:2px;
}
.subtitleEdit [role="subnote"]{
	float:left;
}

.subtitleEdit [role="item"]:hover{
	background:#f8f8f8;;
}

.subtitleEdit .subEditor{
	background: white;
	padding-top: 10px;
	z-index: 1;
}