@charset "utf-8";
/* CSS Document */

#playlist_wrap {
	width: 253px;
	float:right;
	position: relative;
}
div.scrollable {            
/* required settings */     
position:relative;     
overflow:hidden;                
height: 283px;          
width: 253px;
float:right; 
margin-top:35px;
border-bottom:3px solid black;    
}  
/* root element for scrollable items */ 
div.scrollable div.clips {         
position:absolute;          
/* this time we have very large space for height */         
height:20000em;     
}

/* prev, next, prevPage and nextPage buttons */

a.prev, a.next{
	display:block;
	width:18px;
	height:18px;
	margin:10px 0 5px 3px;
	float:left;
	cursor:pointer;
}
a.prev{
	background:url(../assets/arrowUp.png) no-repeat;
}
/* mouseover state */
a.prev:hover, a.next:hover {
	background-position:0px -18px;		
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next{
	background-image:url(../assets/arrowDown.png);
	clear:right;
}

/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi {
	width:180px;
	height:15px;
	padding-left:70px;
	padding-top:2px;
}


/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:4px;
	background:url(../assets/navigator.png) 0 0 no-repeat;     
	cursor:pointer;	
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;     
} 	

/* 刪除影片的button */
#playlist_wrap button{
	font-size:11px;
	color:#336699;
	float:right;
	padding-top:3px;
}
.scrollable .clips {
	width:253px;
	padding:0;
	margin:0;
	}
div#listHeader{
	position:absolute; top:0; right:0;
	float:right;
	height:283px;
	width:253px;
	border-top:3px solid black;
}
#listHeader h3{	
	height:315px;
	width:225px;
	margin-left:26px;
	background:#999 url(../assets/grayBg320H.png) repeat-x;;
	background-position:bottom;
	border-left: 1px solid black;
	border-right: 1px solid black;
}
#listHeader h4 {
	position:absolute; top:0; right:1px;
	font-size:15px;
	height:30px;
	width:225px;
	border-bottom:2px solid black;
	background:#666;
	color:#FFCC33;
	line-height:30px;
	text-align:center;
	padding:0;
}		
.scrollable div.clips a {
	display:block;
	background-color:#EEEEEE;
	padding:7px 3px 2px 35px;
	height:61px;
	width:187px;
	font-size:12px;
	border-left:1px solid #999;
	border-right:1px solid #999;
	border-bottom:1px dotted #999;
	border-top:none;		
	text-decoration:none;
	letter-spacing:-1px;
	color:#333333;
	font-weight:bold;
	float:right;
}
.scrollable div.clips a:hover {
	background-color:#DAF5FE;		
}
.scrollable div.clips img {
	width:73px;
	height:55px;
	border:1px solid black;
	float:left;
	margin-right:4px;	
}

.scrollable div.clips a.first {
	border-top-width:1px;
}

.scrollable div.clips a.playing, .scrollable div.clips a.paused, .scrollable.div.clips a.progress {
	background:url(../assets/playlistLight.png) no-repeat 0px -69px;
	padding-left:63px;
	border:0;
}
	
.scrollable div.clips a.progress {
	opacity:0.6;		
}

.scrollable div.clips a.paused {
	background-position:0 0;	
}

.scrollable div.clips a span {
	display:block;		
	font-size:12px;
	color:gray;
	font-weight:normal;
}

.scrollable div.clips a em {
	font-style:normal;
	color:#FF6600;
	font-size:11px;
}

.scrollable div.clips a.playing:hover, .scrollable div.clips a.paused:hover, .scrollable div.clips a.progress:hover {
	background-color:transparent !important;		 
}
/*}}}*/

.willPlay, .played{
	font-size: 13px;
	line-height:20px;
	margin:0 5px 0px 2px;
	color:#666;
	float:left;
}
.willPlay .counter_willPlay {
	font-size:18px;
	font-weight:bold;
	color:#33CC33; /*green*/
	margin-right:10px;	
}           
.played .counter_played {
	font-size:18px;
	font-weight:bold;
	color:#FF9900; /*orange*/
	margin-right:5px;	
}
.vcatPage {
	font-family: "微軟正黑體","新細明體", Verdana, Arial, Helvetica, sans-serif;
	padding:8px 3px 2px 15px;
	display:block;
	background:white;
	height:103px;
	width:85%;
	border-bottom:1px dotted #0F88B0;
	border-right:1px solid silver;
	border-left:1px solid silver;
	margin:0 auto;
	position:relative;
	
}
/*每段video的title*/
.vcatPage h3 {
	margin-bottom:2px;
	font-size:14px;
	color:#993333;
	font-weight:normal;
}
/*每段video的thumbnail*/
.vcatPage img {
	border:1px solid #0F88B0;
	padding:3px;
	float:left;
	margin-right:6px;
}

/*每段video的description BOX*/
.vcatPage h5 {
	display:block;		
	font-size:13px;
	padding-left:3px;
	width:205px;
	height:35px;
	color:#666;
	border:1px dashed #C98F18;
	font-weight:normal;
	margin-top:2px;
	overflow:auto;
	background:#FFFFD7;
}
/*上傳日期和備註整個Box*/
.vcatPage .vDetails {
	float:right;
	padding: 0 10px 5px 5px;
	width:42%;
	height:92px;
	border-left:1px solid #0F88B0;
}
/*備註的Box*/
.vcatPage h6 {
	display:block;		
	font-size:13px;
	width:258px;
	height:69px;
	padding:2px 0 2px 3px;
	color:#666;
	border:1px dashed #C98F18;
	font-weight:normal;
	margin-top:0;
	overflow:auto;
	position:absolute; top:30px; right:13px;
	background:#FFFFD7;
}
/*影片時間*/
.vcatPage em {
	font-style:normal;
	color:#C98F18;
	font-size:12px;
	margin-top:0;
	padding-top:0;
}
.vcatPage button {
	font-size:11px;
	color:#336699;
	float:left;
	padding-top:3px;
	margin:0 5px 0 0;
}
/*"上傳日期" & "備註"的 Header*/
.vcatPage h4 strong, .vcatPage h6 strong {
	color:#333;
}
/*上傳日期*/
.vcatPage .vDetails span {
	display:block;		
	font-size:13px;
	color:#C98F18;
	font-weight:normal;
	padding:0 0 4px 0;
}

/*to be deleted*/
.vcatPage span {
	display:block;		
	font-size:14px;
	color:gray;
	font-weight:normal;
	margin-top:2px;
}