@charset "UTF-8";
/**
 *
 * @authors ulin Vivienne (ulin@chiaofriendly.com)
 * @date    2015-03-25 16:08:15
 * @version 1.0
 */

/*ALL*/
*{
	padding: 0;
	margin: 0;
	border: none;
	font-family:Arial,'新細明體','MingLiU',sans-serif;
	font-size: 16px;
}
ul{
	list-style: none;
	text-align: left;
}
li{ display:inline-block;*display:inline;}
a{ display:inline-block; text-decoration: none; *display:inline;}
a:hover{text-decoration: none; cursor:pointer; }
.container{
	width: 1024px;
	height: auto;
	background-color: #C0E5E1;
	float: left;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.left{ float:left;}
.right{ float:right;}
.center{
	text-align:center;
	margin: 0 auto;
}
.clear{ clear:both;}

/*BODY*/
body{
	background-image: url(../img/bg.png);
	background-repeat: repeat-x;
}

#wrapper {
	margin-right: auto;
	margin-left: auto;
	width: 1024px;
}
#logo {
	margin-right: auto;
	margin-left: auto;
	background-color: #000;
	position: relative;
	width: 1024px;
	height: 50px;
	float: left;
}
#logo1 {
	width: 330px;
	height: 50px;
	position: absolute;
	left: 0px;
}

#logo2 {
	width: 220px;
	height: 25px;
	position: absolute;
	right: 0px;
	top: 0px;
}
#logo3 {
	width: 694px;
	height: 25x;
	margin-top: 20x;
	position: absolute;
	bottom: 0px;
	left: 330px;
}

/*MAIN VISION*/
#top{
	width: 1024px;
	height: 360px;
	margin: 0px;
	float: left;
}
#top a{
	font-family:Georgia;
	font-size: 30px;
	color: #C00;
	font-style: italic;
	letter-spacing: 2px;
	margin-top: 280px;
	margin-right: -115px;
	margin-bottom: 0;
	margin-left: 0;
}

#top ul{ display: inline;float: right;}
#top ul li a{ width: 29px;height: 29px; margin: 35px 11px 0 0;}
#top ul li:nth-of-type(2) a{background: url("../images/ico_fb.png");}
#top ul li:nth-of-type(3) a{background: url("../images/ico_gg.png");}
#top ul li:nth-of-type(4) a{background: url("../images/ico_pin.png");}

#float{background: url("../images/bg.gif"); }

/*NAV*/
#nav {
	background-color: #000;
	height: 49px;
	width: 1024px;
	float: left;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}
#navmenu a:haver{
	font-size:20px;
	color:#FF6;
	}
		
/*FLOAT QUICK MENU*/
#menu{width: 26px; height: auto; float: right; margin: 20px 20px 0 0;position: fixed;z-index: 999; top:350px; right:0px;}
#navicon {
	float: left;
	height: 160px;
	width: 1024px;
	list-style-type:none;
	margin-top: 10px;
}

#icon01:link{background-position:0px 0px;}
#icon01:visited{background-position:0px -119px;}
#icon01:hover{background-position:0px -237px;}
#icon01:active{background-position:0px -355px;}

#icon02:link{background-position:-119px 0px;}
#icon02:visited{background-position:-119px -119px;}
#icon02:hover{background-position:-119px -237px;}
#icon02:active{background-position:-119px -355px;}

#icon03:link{background-position:-238px 0px;}
#icon03:visited{background-position:-238px -119px;}
#icon03:hover{background-position:-238px -237px;}
#icon03:active{background-position:-238px -355px;}

#icon04:link{background-position:-356px 0px;}
#icon04:visited{background-position:-356px -119px;}
#icon04:hover{background-position:-356px -237px;}
#icon04:active{background-position:-356px -355px;}

#icon05:link{background-position:-475px 0px;}
#icon05:visited{background-position:-475px -119px;}
#icon05:hover{background-position:-475px -237px;}
#icon05:active{background-position:-475px -355px;}

#icon06:link{background-position:-593px 0px;}
#icon06:visited{background-position:-593px -118px;}
#icon06:hover{background-position:-593px -237px;}
#icon06:active{background-position:-593px -355px;}



#menu ul {width: 26px;background: #fff; border: #016B5F 1px solid; }
#menu ul li{width: 18px;height: 18px; margin: 4px;}
#menu ul li a{width: 18px;height: 18px;background: #016B5F; color:#fff; font-size: 10px; line-height:20px ; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
#menu ul li a:hover{background:#000; }
#menu ul li a.up, #menu ul li a.down{width: 12px;height: 12px;margin-left: 2px;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;}
#menu ul li a.up{background: url("../images/arrow_up_n.png");}
#menu ul li a.down{background: url("../images/arrow_down_n.png");}
#menu ul li a.up:hover{background: url("../images/arrow_up_o.png");}
#menu ul li a.down:hover{background: url("../images/arrow_down_o.png");}

/*TIME LINE*/
#timeline{ background: url("../images/bg_timeline.png"); background-repeat: no-repeat; height: 150px; margin: 24px auto 14px auto;border:#fff 1px solid;}
#timeline ul{width: 900px;height: 150px;margin: 0 auto; overflow-y: hidden;}
#timeline ul li{width:auto;margin: 0 13px;}
#timeline ul li a{font-family:Times; font-weight: bold;: ;color: #000; margin-top: 10px;position: relative; }
#timeline ul li a p{font-family:'MingLiU';font-weight: normal;position: relative;}
#timeline ul li a.select p.dot{font-size:110px;margin-top: -40px;}
#timeline ul li a.select{ font-size: 60px;  color: #016B5F;}
#timeline ul li a.normal{ font-size: 30px;top: -22px;transition: all 0.5s;}
#timeline ul li a.normal p.dot{ font-size:50px;margin-top: -10px; }
#timeline ul li a.normal:hover{font-size: 35px;}
#timeline span{ width: 10px; height: 10px;position: relative;display: block;cursor: pointer;}
#timeline .left{top: 95px;left: 56px;}
#timeline .right{bottom: 55px;right: 58px; }

/*BOOKS*/
#books .group{ width: 92%; margin: 0 auto;}
#books #item{ width: 170px;height: 320px; border:#d4d4d4 1px solid; background: #FFF; float: left; margin:8px;}
#books #item li{ width: 100%;}
#books #item li img{width: 150px; height: 185px;}
#books #item li:nth-of-type(3) a{ color: #000; height: 40px; overflow: hidden;font-size:13px; letter-spacing: 1px; line-height: 20px;}
#books #item li:nth-of-type(3) a:hover{text-decoration:underline ;}
#books #item li:nth-of-type(1){ font-size:14px; font-weight: bold ; color: #016B5F; padding: 5px 0 0 0;}
#books #item li:nth-of-type(3){width: 156px;  text-align: left; padding:0 8px 12px 8px;}
#books #item li:nth-of-type(4){width: 80%;}
#books #item li:nth-of-type(4) a{width: 100%; height: 22px; background: #016B5F; color: #fff; line-height: 20px; letter-spacing: 2px;}
#books #item li:nth-of-type(4) a:hover{ background: #000;}
#books #item li:nth-of-type(4) a.voted{background: #c6c6c6;}
#books #item li:nth-of-type(5){ color: #4c4c4c; padding:7px 0;}

/*MUSIC*/
#music .group{
	width: 92%;
	margin: 0 auto;
	background-color: #FFC;
}
#music #item{ width: 170px;height: 320px; border:#d4d4d4 1px solid; background: #FFF; float: left; margin:8px;}
#music #item li{ width: 100%;}s
#music #item li img{width: 150px; height: 150px;}
#music #item li:nth-of-type(3) a{ color: #000; height: 56px; overflow: hidden;font-size:13px; letter-spacing: 1px; line-height: 20px;}
#music #item li:nth-of-type(3) a:hover{ text-decoration:underline ; }
#music #item li:nth-of-type(1){ font-size:14px; font-weight: bold ; color: #016B5F; padding: 7px 0;}
#music #item li:nth-of-type(3){width: 156px; text-align: left; padding:5px 8px 12px 8px;}
#music #item li:nth-of-type(4){width: 80%;}
#music #item li:nth-of-type(4) a{width: 100%; height: 22px; background: #016B5F; color: #fff; line-height: 20px; letter-spacing: 2px;}
#music #item li:nth-of-type(4) a:hover{ background: #000;}
#music #item li:nth-of-type(4) a.voted{background: #c6c6c6;}
#music #item li:nth-of-type(5){ color: #4c4c4c; padding:10px 0;}

/*RANKING PAGE - BOOKS & MUSIC*/
#ranking .list{ background: url("../images/top_ranking_01.png") top; background-repeat: no-repeat; padding-top: 100px; margin-top: 35px; }
#ranking .list_m{ background: url("../images/top_ranking_02.png") top; background-repeat: no-repeat; padding-top: 100px; margin-top: 35px; }
#ranking .list .info{width: 866px;height: 139px; background: url("../images/bg_ranking.png");margin: 12px auto;-webkit-box-shadow: 0px 3px 8px -6px rgba(0,0,0,1);-moz-box-shadow: 0px 3px 8px -6px rgba(0,0,0,1);box-shadow: 0px 3px 8px -6px rgba(0,0,0,1);}
#ranking .list .info li{ float: left;}
#ranking .list .info li:nth-of-type(1){width: 60px;margin:35px 0 0 -5px;font-family: Times; font-style: italic; font-size: 60px; color: #016B5F; letter-spacing: -8px;}
#ranking .list .info li:nth-of-type(2){margin:10px 0 0 20px;}
#ranking .list .info li img{ height: 120px; width: auto;}
#ranking .list .info li:nth-of-type(3){width: 440px;height: 96px;overflow: hidden;margin: 20px;font-size:0; text-align: left;}
#ranking .list .info li:nth-of-type(3):before{content: '';display: inline-block;vertical-align: middle;width: 0;height: 100%;}
#ranking .list .info li:nth-of-type(3) a{color: #4d4d4d; font-size: 18px; ;display: inline-block; vertical-align: middle; font-weight: bold ; }
#ranking .list .info li:nth-of-type(3) a:hover{ text-decoration: underline;}
#ranking .list .info li:nth-of-type(4){width: 180px; overflow: hidden;float: right;margin-top: 25px;}
#ranking .list .info li p{display: inline-block;color: #4d4d4d;}
#ranking .list .info li:nth-of-type(4) p:nth-of-type(1){ font-family: Times; font-size: 32px;}
#ranking .list .info li:nth-of-type(4) p:nth-of-type(2){font-size: 18px;}
#ranking .list .info li:nth-of-type(4) a{ padding-left: 15px;margin-top: 10px; width: 140px;height: 42px;background: #016B5F; color: #fff; font-size: 26px; line-height: 38px; letter-spacing: 15px;}
#ranking .list .info li:nth-of-type(4) a:hover{ background: #000;  }
#ranking .list .info li:nth-of-type(4) a.voted{ background: #bcbcbc;}


/*TOP*/
#go_top{ width: 50px; height: 50px;float: right; margin: 20px 20px 0 0;position: fixed;z-index: 999; top:450px; right:0px}
#go_top a{width: 50px; height: 50px; background: url("../images/arrow_top.png"); position: fixed;}

/*AWARD*/
#award{background: url("../images/top_award.png") top; background-repeat: no-repeat; padding-top: 100px; margin-top: 35px;}
#award ul{width: 52%;}
#award ul li{width: 100%;font-size: 25px;font-weight: bold;margin: 10px;text-align: left;}
#award ul li p{display: inline-block; font-size: 17px;}
#award ul li p:nth-of-type(1){width: 120px;}
#award ul li p:nth-of-type(2){width: 200px;}
#award ul li p:nth-of-type(3){width: 200px;color: #E15721;}

/*RULE*/
#rule{padding: 50px 0; }
#rule h2{ font-size: 28px;text-align: center;font-weight: bold; margin: 20px 0;}
#rule ul{ width: 85%; margin: 0 auto;}
#rule ul li{ width: 100%; margin-top: 15px;}
#rule ul li.title{ font-size: 20px; font-weight: bold; margin-top: 25px;}
#rule ul li.text{ font-size: 16px; text-indent: 15px;}
#rule ul li a{font-size: 16px; text-indent: 0;color:#333; text-decoration: underline;margin-left: 0;}

.cfooter {
	clear: both;
}
#footer {
	background-color: #000;
	height: 60px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	color: #FFF;
	font-family: "新細明體-ExtB";
	font-size: 12px;
	padding-top: 20px;
	padding-top: 10px;
}
#wrapper #nav #about ul li {
	font-family: Arial, Helvetica, sans-serif, "Arial Unicode MS", "標楷體", "新細明體", "微軟正黑體";
	font-size: 18px;
	line-height: normal;
	color: #333;
	float: none;
	padding-top: 5px;
	padding-bottom: 5px;
}
#wrapper #nav #about {
	margin: 30px;
	height: 350px;
	width: auto;
	float: left;
}
#about1 {
	background-color: #FFF;
	width: 994px;
	color: #333;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif, "Arial Unicode MS", "標楷體", "新細明體", "微軟正黑體";
	font-size: 16px;
	line-height: 24px;
	margin: 0px;
	width: 98%;
	float: left;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 15px;
}