@charset "utf-8";

/* table */
table { margin: 1em; align: center; }
td, th { padding: .3em; align: left; } 

/* body */
body {font-size:12px;text-decoration: none;margin: 0px;padding:0px;background-color:#EEE;color: #222;font-family: "微軟正黑體","新細明體","Lucida Grande",Arial;}
ul{list-style-type:none;margin-left:0px;padding-left:0px}
a:link    {	font-size: 12px;	color: #006;	text-decoration: none;}
a:visited {	font-size: 12px;	color: #006;	text-decoration: none;}
a:hover   {	font-size: 12px;	color:#00F;	text-decoration: underline;}
.logo{	float:left;	padding: 5px 5px;}
.title{	font-size:22px;	font-weight:bold;margin:0px;padding:5px; text-shadow:#DDD 0 1px;}
.title_big{	font-size:22px;	font-weight:bold;padding: 5px; text-shadow:#222 0 1px;background-color:#000;color:#FFF}
.header{	font-size:14px;	font-weight:bold;	padding: 5px; padding-top:0px}
.description{font-size:12px;color:#999;font-style:italic;padding: 0px 5px;}




/*
img.rounded {
  object-fit: cover;
  border-radius: 50%;
  height: 100px;
  width: 100px;
}
*/
            
        
/* free layouts */
/*
div#top_layout{top:0px;width:100%;min-width:1040px;margin:0px auto;overflow:hidden;background-color:#000;height:50px}
*/
div#top_layout{top:0px;width:100%;min-width:1040px;margin:0px auto;overflow:hidden;background-color:#f83;height:50px}
div#top_layout div#head_bar{max-width:1040px;margin: 0 auto;}
div#top_layout div#head_bar a {float:left;display:block;width:200px;height:50px;background: url(https://i.imgur.com/5gLeaOU.png) no-repeat ;}
div#header_layout {	clear:both; width: 1040px;	margin-left: auto ;	margin-right: auto ;}
div#main_layout {	clear:both;width: 1040px;	margin-left: auto ;	margin-right: auto ;padding:1px 0px;}
div#left_layout {	width: 730px;	float:left; padding:0px 0px; border-radius:10px}
div#right_layout {	width: 300px;	float:right; padding:0px 0px; margin-right: auto ;margin-left:5px}
div#footer_layout {clear:both; width: 1000px; margin:10px auto;	text-align:center;font-size:12px;text-shadow: 0px 1px #EEE;}
div#end_layout {width: 1000px; float:right;	font-size:11px;	color:#999;		}

/* menu and bar */ 
/*  
#menu{height:40px;margin-left: auto ;margin-right: auto ;background-color:#222;} 
#menu  ul {width: 1040px;padding: 0;margin: 0 auto;list-style: none;border: 0;}
#menu > ul > li{float:left;padding:10px 0px;height:30px;}
#menu > ul > li > a.active {background-color:#e64;text-decoration:none;}
#menu > ul > li > a {background-color:#222;color:#fff;padding:5px 15px;border-right:#333 solid 1px;font-size:14px;}
#menu > ul > li > a:hover {background-color:#f83;color:#000;text-decoration:none}
#menu > ul > li > a.tube{background-color:#666;}
#menu > ul > li > a.tube:hover{background-color:#f83;}
*/

#menu{height:40px;margin-left: auto ;margin-right: auto ;background-color:#3B5998;}
#menu  ul {width: 1040px;padding: 0;margin: 0 auto;list-style: none;border: 0;}
#menu > ul > li{float:left;padding:10px 0px;height:30px;}
#menu > ul > li > a.active {background-color:#e64;text-decoration:none;}
#menu > ul > li > a {background-color:#3B5998;color:#fff;padding:5px 15px;border-right:#333 solid 1px;font-size:14px;}
#menu > ul > li > a:hover {background-color:#5C75AA;color:#000;text-decoration:none}
#menu > ul > li > a.tube{background-color:#3B5998;}
#menu > ul > li > a.tube:hover{background-color:#5C75AA;}

#language_bar{}
#language_bar > li > a{float:left;color:#FFF;padding:2px 5px;margin:0px 0px;background-color:#666;border:#222 solid 1px;border-radius:2px}

#titlebar {clear:both;background-color:#000;white-space:nowrap;}
#likebar  {background-color:#000;padding-left:10px;white-space:nowrap;}
.nowrap {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	white-space: nowrap;
}

/*page_nav*/
div#page_nav{clear:both;margin:10px;}
div#page_nav ul{list-style-type: none;	margin:5px;padding:0px;}
div#page_nav ul li{	float:left;	margin-left:2px;padding:5px 5px;border:#CCC solid 1px;cursor:pointer;width:12px;text-align:center;background-color: #000;cursor: pointer; color:#fff;border-radius: 4px;box-shadow: 0 1px #FFF inset;text-shadow: 0px 1px #666;text-decoration:none}
div#page_nav ul li:hover{background-color: #666;	cursor:pointer;text-decoration:none}
div#page_nav ul li.active{background:#33C;text-decoration:none}

.videolist{	list-style-type:none;		margin:0px;	padding:0px;	}
.videolist a{	text-decoration:none}
.videolist a:hover{text-decoration:none}
.videolist li{float:left;	width:260px;height:245px;overflow:hidden;margin:5px;padding: 5px;border:#EEE solid 1px;	}
.videolist li:hover{background-color:#DDD;cursor:pointer;	border-right:#AAA solid 1px;border-bottom:#AAA solid 1px;}
.videolist li div.img{float:left;}
.videolist li div.title{display:block;font-size:16px;	color:#000;	margin:0px;padding:0px;text-shadow:0px 1px #DDD}
.videolist li div.description{font-size:11px;	color:#888;	font-style:normal;}
.videolist li span.click{font-size:11px;	color:#999;	font-style:italic;	padding: 0px 5px;}

.videolist img.rounded {
    width: 120px;
    height: 120px;  
    display: block;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
     
.videolist div.boxinfo{ width:400px; }
.videolist div.boxinfo-top{ width:126px; height:126px; }
.videolist div.boxinfo-bottom{ width:400px; height:45px; }
.videolist div.boxinfo-bottom-title{ font-size:22px; line-height:23px; }
.videolist div.boxinfo-bottom-desc{  font-size:15px; line-height:16px;  }

// for (Non--Mobile) watch.php to show left side 
.videolist2 {	list-style-type:none; margin:0px;	padding:0px; border:#DDD solid 1px;	style=height:60px;width:300px }
.videolist2 a{	text-decoration:none}
.videolist2  a:hover{text-decoration:none}
.videolist2 li{float:left;	width:260px;height:150px;overflow:hidden;margin:5px;padding: 5px;border:#EEE solid 1px;	}
.videolist2 li:hover{background-color:#DDD;cursor:pointer;	border-right:#AAA solid 1px;border-bottom:#AAA solid 1px;}
.videolist2 li div.img{float:left;}
.videolist2 li div.title{display:block;font-size:16px;	color:#000;	margin:0px;padding:0px;text-shadow:0px 1px #DDD}
.videolist2 li div.description{font-size:11px;	color:#888;	font-style:normal;}
.videolist2 li span.click{font-size:11px;	color:#999;	font-style:italic;	padding: 0px 5px;}
.videolist2 div.boxxinfo{ width:300px; }
.videolist2 div.boxxinfo-top{ width:80px; height:80px; }
.videolist2 div.boxxinfo-bottom{ width:300px; height:45px; }
.videolist2 div.boxxinfo-bottom-title{ font-size:16px; line-height:16px; }
.videolist2 div.boxxinfo-bottom-desc{  font-size:13px; line-height:13px;  }


img.rounded {
    display: block;
    border-radius: 50%;
    background-repeat: no-repeat;
    //background-position: center center;
    background-size: cover;
}
                         
#lay_afpvideo{background:#000;width:730px;height:370px; padding-bottom:12px;}
#lay_afpvideo ul{margin:0;padding:0;}
#lay_afpvideo ul li{list-style:none;}
#lay_afpvideo ul li a{width:230px;color:#888;margin:0 0 5px 5px;float:left;border:1px solid #222;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
#lay_afpvideo ul li a:hover{border:1px solid #888;color:#fff;}
#lay_afpvideo .thumbnail{width:210px; height:120px; overflow: hidden; float:left;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
#lay_afpvideo .thumbnail img{width:210px;margin-top:-35px;}
#lay_afpvideo .desc{width:224px; height:30px; overflow: hidden;display:block;padding:0px 8px;font-size:14px}
#lay_afpvideo div{color:#ff0;padding:5px 10px;}
#lay_afpvideo div a{color:#ff0;font-weight: bold; font-size:14px ; }

.special {	list-style-type:none;		margin:0px;	padding:0px;	}
.special a{	text-decoration:none}
.special a:hover{text-decoration:none}
.special li{float:left;	width:290px;height:80px;overflow:hidden;margin:0px 0px;padding: 3px 3px;border:#EEE solid 1px;	}
.special li:hover{background-color:#DDD;cursor:pointer;	border-right:#AAA solid 1px;border-bottom:#AAA solid 1px;text-shadow:#fff 0 1px}
.special li div.img{float:left;padding:2px 5px}
.special li div.title{display:block;font-size:14px;	color:#000;	margin:0px;padding:0px;text-shadow:0px 1px #DDD}
.special li div.description{font-size:11px;	color:#888;	font-style:normal;}
.special li div.click{font-size:11px;	color:#999;	font-style:italic;	padding: 0px 5px;}
a .lastspecial {font-size:12px;color:#000;padding: 5px;height:20px}


div#fbcomments{width: 1000px;margin:5px auto;width:730px}


.ads300x250{float:left;padding:0px}
.ads300x250_right{margin:10px 0}
li.ads{float:left;width:310px;height:265px;margin:5px;padding:5px;text-align:center}
li.ads:hover{background-color:#EEE;cursor:default;	border-right:#EEE solid 1px;border-bottom:#EEE solid 1px;}

div#video_content{font-size:15px;height:400px;margin:10px 0px 0px 0px;padding:0px 15px 0px 0px;width:730px;}
.video_wrap{background-color:#000;height:400px;margin-bottom:10px;position:relative;width:730px;}
.lay_preview{left:0px;height:400px;overflow:hidden;position:absolute;top:0px;width:730px;}
.lay_preview img{margin:0px 0px 0px 0px;width:730px;}
.lay_likefb{background:url(http://i.imgur.com/8MSaIGl.png);display:block;height:400px;left:0px;position:absolute;top:0px;width:730px;} 
.btn_play_top{left:314px;position:absolute;top:160px;height:80px;width:240px;background-color:#fff;text-align:center;overflow:hide;border:#888 solid 5px;border-radius: 5px;}

.button {
  background-color:  #008CBA; //blue    #4CAF50 ; // Green 
  border: none;
  color: white;
  padding: 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}