@charset "UTF-8";

html,body{ 
	width: 100%; min-height: 100%;
	color: #fff;
	font-family: "Verdana" , "微軟正黑體"
}
a{ 
	cursor: pointer;
	color: #fff;
	text-decoration: none;
}
a:hover{ 
	color: #fff;
	text-decoration: none;
}



header{ position: relative; width: 100%; height: 300px;}
.header_bg{ position: absolute; width: 100%; height: 300px; background-image: url("../img/header_bg.jpg"); background-repeat: repeat;}
.pow{ width: 100%; height: 300px; position: relative;}
.logo{ position: absolute; width: 1000px; height: 300px; left: 50%; top: 50%; margin-left: -500px; margin-top: -150px; background-image: url(./../img/logo.png);}
.singer-index{ 
	width: 80%;
	position: absolute; left: 2%; bottom: 10px; 
	font-weight: 900;
}
.singer-index a{ 
	color: #fff200;
}

.singer-search{ 
	width: 80%;
	position: absolute; left: 2%; bottom: 40px; 
	font-weight: 900;
}
.singer-search input{ 
	display: inline-block; width: 200px;
	background: transparent;
	border:0px;
	color: #fff;
	border-bottom: 2px solid #fff;
} 



.login{ 
	position: absolute; right: 2%; bottom: 10px; 
	font-weight: 900;
}


.timeout{ 
	height: 60px; 
	background-color: #f00; 
	-webkit-box-shadow:0px 3px 5px #000 inset;            /* For Chrome5+, Safari5+ */
	box-shadow:0px 3px 5px #000 inset;
}

.timeoutmsg{ height: 60px; width: 50%; padding: 5px 20px; float: left; font-size: 24px; font-weight: 900;}
.timeoutmsg span{ font-size: 40px; }
.timeoutmsg1{ color: #fff; text-align: right; background-position: right center; background-repeat:no-repeat; background-image: url(./../img/shortline.png);}
.timeoutmsg2{ color: #000; }



.namesort{ 
	width: 100%; 
	position: relative; 
	padding: 19px 0px 0px 18px;

	font-weight: 900;

	-webkit-box-shadow:0px 3px 5px #000 inset;            /* For Chrome5+, Safari5+ */
	box-shadow:0px 3px 5px #000 inset;
}
.namesort.searchrow{ display:none; }
.nametag{ 
	width: 30px; height: 105px;  background-color: #898989;
	position: absolute; top: 9px; left: 0px;
	padding-top: 15px;
	-webkit-border-top-right-radius: 30px 10px;
	border-top-right-radius: 30px 10px;
	-webkit-border-bottom-right-radius: 30px 10px;
	border-bottom-right-radius: 30px 10px;
    -webkit-box-shadow:3px 6px 6px #000;
    box-shadow:3px 6px 6px #000;
}
.nameword{ width: 30px; text-align: center; color: #000; font-size: 16px; }
.namearrow{ 
	width: 19px; height: 19px; 
	margin-top: 40px; margin-left: 5px;
	overflow: hidden; background-image: url("../img/name-arrow.png"); 
}



.singer{ 
	width: 150px; height: 200px;
	float: left; margin-bottom: 19px; margin-left:38px; 
}
.singer img{ 
	border: 1px solid #000; 
	-webkit-box-shadow:3px 6px 6px #000;
    box-shadow:3px 6px 6px #000;
    margin-bottom: 12px;
}
.singer p{ 
	font-size: 16px;
	text-shadow:2px 2px 2px #000;
}
.singer-detail{
	width: 100%;
	position: absolute;
	/*top: 580px; left: 0px;*/
}
.singer-detail-box{
	width: 100%; 
	position: relative;
	overflow: visible;
}
.singer-arrow{
	width: 26px; height: 14px; overflow: hidden;
	position: absolute;
	top: -13px; left: 500px;
}
.singer-login{
	position: absolute;
	top: 37px; right: 100px;
}
.singer-close{
	width: 100px; height: 30px;
	padding: 3px 10px;
	position: absolute; bottom: 3px; left: 50%; margin-left: -50px;
	text-align: center;
	background-color: #fff200;
	color: #000;
	border:1px solid #222;
	-webkit-border-top-right-radius: 10px;
	border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	border-top-left-radius: 10px;
	cursor: pointer;
}
.singer-close-icon{
	cursor: pointer;
	width: 21px;
	height: 21px;
	position: absolute;
	background-image: url("../img/close.png"); 
	top: 38px;
	left: 30px;
	display: none;
}



.singer-content{
	width: 100%; height: 500px; 
	border: 1px solid #000;
	position: relative;
	padding: 36px 55px 36px 55px;
    -webkit-box-shadow:inset 0px 0px 4px #000;
    box-shadow:inset 0px 0px 4px #000;
	font-weight: 900;
	margin: 0px !important;

	background: #555555; /* Old browsers */
	background: -moz-linear-gradient(left,  #2a2a2a 0%, #555555 24%, #555555 76%, #2a2a2a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2a2a2a), color-stop(24%,#555555), color-stop(76%,#555555), color-stop(100%,#2a2a2a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #2a2a2a 0%,#555555 24%,#555555 76%,#2a2a2a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #2a2a2a 0%,#555555 24%,#555555 76%,#2a2a2a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #2a2a2a 0%,#555555 24%,#555555 76%,#2a2a2a 100%); /* IE10+ */
	background: linear-gradient(to right,  #2a2a2a 0%,#555555 24%,#555555 76%,#2a2a2a 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a2a2a', endColorstr='#2a2a2a',GradientType=1 ); /* IE6-9 */

}
.singer-content-1{
	background-image: url('../img/line.png');
	background-repeat:no-repeat;
	background-position: right center;
}
.singer-content-2{
	padding-left: 60px;
}

.singer-photo{
	width: 400px; height: 400px;  background-color: #898989;
	margin: auto;
	border: 1px solid #000;
    -webkit-box-shadow:3px 6px 6px #000;
    box-shadow:3px 6px 6px #000;
}
.singer-name{
	width: 90%;
	margin: auto;
	margin-top: 6px;
	text-align: center;
	font-size: 24px; 
	font-style: italic;
	text-shadow:5px 5px 5px #000;
	letter-spacing: 1px;
}
.singer-epcd{
	width: 100%; height: 450px; overflow: scroll;


}
.singer-epcd ul{ list-style: none; padding: 0px; }
.singer-epcd ul li{ 
	margin-bottom:30px; 
}


.epcd-photo{ 
	width: 120px; height: 90px; overflow: hidden;
	position: relative;
	border: 1px solid #fff;
	float: left; margin-right: 20px; 
	-webkit-box-shadow:3px 6px 6px #000;
    box-shadow:3px 6px 6px #000;

}
.epcd-photo img{ }

.epcd-title{ 
	clear: right; font-size: 15px;  
	margin-top: 8px;
}
.epcd-title .subtitle{
	font-weight: 400;
	font-size: 12px;
}








.epcd-singer{ 
	background-color: #00aef0;
	padding:0px 3px;
}
.epcd-social{ }
.epcd-social .epcVote{ color: #fff200; }


#iwantaddsingerbox{ display: none; width: 90%; margin: 20px auto; }
#iwantaddsingerbox .title{ font-size: 16px;}
#iwantaddsingerbox .intro{ font-size: 16px; color: #67d0f4; margin-bottom: 30px; }
#iwantaddsingerbox .btn{ float: right;}



footer{ padding:20px;  background-color: #555; }
footer .linkbtn{ text-align: center;}
.footercontent{ display: none;}














.jspVerticalBar{ 
	width: 6px;
	background-color: #6dd0f7;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.jspTrack{ 
	width: 6px;
	background-color: #6dd0f7;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.jspDrag{
	width: 6px;
	background-color: #fff200;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}


.namestyle-blue{
	background: #6dd0f7; /* Old browsers */
	background: -moz-linear-gradient(left,  #36687b 0%, #6dd0f7 24%, #6dd0f7 76%, #36687b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#36687b), color-stop(24%,#6dd0f7), color-stop(76%,#6dd0f7), color-stop(100%,#36687b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #36687b 0%,#6dd0f7 24%,#6dd0f7 76%,#36687b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #36687b 0%,#6dd0f7 24%,#6dd0f7 76%,#36687b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #36687b 0%,#6dd0f7 24%,#6dd0f7 76%,#36687b 100%); /* IE10+ */
	background: linear-gradient(to right,  #36687b 0%,#6dd0f7 24%,#6dd0f7 76%,#36687b 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36687b', endColorstr='#36687b',GradientType=0 ); /* IE6-9 */
}
.namestyle-blue .nametag{
	background-color: #6dd0f7;
}


.namestyle-yellow{
	background: #fff200; /* Old browsers */
	background: -moz-linear-gradient(left,  #7f7900 0%, #fff200 24%, #fff200 76%, #7f7900 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#7f7900), color-stop(24%,#fff200), color-stop(76%,#fff200), color-stop(100%,#7f7900)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #7f7900 0%,#fff200 24%,#fff200 76%,#7f7900 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #7f7900 0%,#fff200 24%,#fff200 76%,#7f7900 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #7f7900 0%,#fff200 24%,#fff200 76%,#7f7900 100%); /* IE10+ */
	background: linear-gradient(to right,  #7f7900 0%,#fff200 24%,#fff200 76%,#7f7900 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7900', endColorstr='#7f7900',GradientType=1 ); /* IE6-9 */

}
.namestyle-yellow .nametag{
	background-color: #fff200;
}
.namestyle-yellow .nametag .namearrow{
	background-position: 0px -19px;
}



.fancybox-nav {
    width: 60px;       
}

.fancybox-nav span {
    visibility: visible;
}

.fancybox-next {
    right: -80px;
}

.fancybox-prev {
    left: -80px;
}




@media screen and (max-width: 768px) {
	/*.logo{ position: absolute; width: 345px; height: 300px; left: 50%; top: 50%; margin-left: -172px; margin-top: -150px; background-image: url(./../img/logos.png);}*/
	.timeout{ height: 120px; }
	.timeoutmsg{ float: none; width: 100%; text-align: center !important;}
	.timeoutmsg1{ background-image: none;}
	.timeoutmsg2{ }

    .singer-search{ display: none;}
    .singer-index{ display: none;}
    .singer{ margin-left:28px; }
    .singer-content{ height: auto;}
    .singer-content-1{ background-image: none; margin-bottom: 30px; }
    .singer-login{ right:10px;}
    .singer-close-icon{ display: block;}






}