@charset "utf-8";
.sociales {	text-align: center;	margin-bottom: 20px;}
#timeline {	width: 95%;	height: 550px;	overflow: hidden;margin: auto;	position: relative;background: url('../images/all/dot.gif') 6px top repeat-y; margin:0 0 0 5%;}
#dates {width: 25%;height: 500px;overflow: hidden;	float: left;	margin-left: -40px;}
#dates li {list-style:none;width:115px;height: 55px;font-size:18px;padding-left:20px;background:url('../images/all/biggerdot.png') left top no-repeat;}
#dates a {	line-height: 18px;	padding-bottom: 10px;}
#dates .selected {	font-size: 18px;	color:#CC3703;}
#issues {	width: 80%;	height: 550px;	overflow: hidden;	float: left;}
#issues li {margin:1em auto;	/*width: 95%;*/ width:100%; height: 800px;	list-style: none; position: relative;z-index: 99;}
#issues li.selected img {
	-webkit-transform: scale(1.1, 1.1);
	-moz-transform: scale(1.1, 1.1);
	-o-transform: scale(1.1, 1.1);
	-ms-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1);
}
#issues li img {
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);/* IE 6 & 7 */
	zoom: 1;
	-webkit-transition: all 2s ease-in-out;
	-moz-transition: all 2s ease-in-out;
	-o-transition: all 2s ease-in-out;
	-ms-transition: all 2s ease-in-out;
	transition: all 2s ease-in-out;
	-webkit-transform: scale(0.7, 0.7);
	-moz-transform: scale(0.7, 0.7);
	-o-transform: scale(0.7, 0.7);
	-ms-transform: scale(0.7, 0.7);
	transform: scale(0.7, 0.7);
}
#issues li h1 {	color: #ffcc00;	font-size: 48px;text-align: center;}
#issues li p {
	display:block;
/*	width:95%;
	height:138px;
*/	margin: 0 0 2% 0;
    padding: 5px 0;
    border-bottom: 1px dashed #ccc;
	font-weight: normal;
	clear:both;
	overflow:hidden;overflow-y:auto;
	-o-overflow-scrolling: touch;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

#grad_top,  #grad_bottom {height: 80px;	position: absolute;}
#grad_top {top: 0;}
#grad_bottom {bottom: 0;}
#next,  #prev {
	position: absolute;
	left: 55%;
	font-size: 70px;
	width: 38px;
	height: 22px;
	background-position: 0 -44px;
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}
#next:hover,  #prev:hover {	background-position:  0 0;}
#next {bottom: -1em;	}
#prev {	top: -1em;}
#next.disabled,  #prev.disabled {	opacity: 0.2;}
.p1_pic{  padding:1% 4% 2%; text-align:center; margin: 0 auto;overflow: hidden;}	
.p1_pic img {width: 100%;max-width: 400px;max-height: 300px;  margin: 2%;}
.history_t{ font-weight:bold; font-size:12pt; color:#e60043;}

/*行天宮大事紀-QA展開*/
.qacontent { display: block; /*padding-right: 4%; padding-right: 10%;*/
	/*height: 650px;*/	margin: 5% 0;font-weight: normal; clear:both;
	/*overflow:hidden; overflow-y:auto;*/
	-o-overflow-scrolling: touch;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	}
.qacontent .qa_title { display:block;margin-bottom: 20px; color: #990000; font-size: 1.1em; font-weight: bold;cursor: pointer;background: url(../images/all/qaicon.png) no-repeat 98% 12px;  padding: 8px 0px 8px 10px; border-bottom:1px dashed #990000; }
.qacontent .qa_title:hover { background:url(../images/all/qaicon_hover.png) no-repeat 98% 12px; background-color: #990000; color: #fff;   padding: 8px 0px 8px 10px;  -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.qa_content {color: #444;margin: 0px 0px 30px; background: #fff; padding: 10px;}

@media screen and (max-width: 650px) {
#timeline {	margin:0;}
}

@media screen and (max-width: 640px) {
#timeline {  width: 100%;  background:none;}
#dates { width: 95%; height: auto!important; float: none; margin: 0 0 0 5%!important; padding: 0; position: relative;  z-index: 100;}
#dates li { width: 100px; height: 35px;display: inline-block;}
#issues { width: 100%;  padding: 0;}
.p1_pic img { max-width: 90%;}
.qacontent { width:80%; margin:0 auto;}

}

@media screen and (max-width: 480px) {
#dates li { width: 80px;}

}