@import url("reset.css");
@import url("menuStyle.css");
@import url("pageHeader.css");


body,td,th {
	font-family: Georgia, "Times New Roman", Times, serif;
}

body{
	background: url(../images/bg/20110709index.jpg) no-repeat left top fixed #000000; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover; 
	padding-bottom: 100px;
}

#dialog{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -150px;
	margin-top: -100px;
	font-family: sans-serif,arial;
}



.pageloading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #000000 url(../images/guest_loading.gif) no-repeat;
    background-position: center center;
}




/*
.contentWrapper {
    width: 980px;
    margin-bottom: 75px;
    margin: 0 auto;
    display: block;
    background-color: rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
}
*/



.contentWrapper {
    width: 470px;
    margin-bottom: 75px;
    margin: 0 auto;
    margin-left: 10%;
    display: block;
    background-color: rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
}


.contentWrapper .plzSignin{
	width: 300px;
	height: 200px;
	margin: 0 auto;
}



.contentWrapper .plzSignin p{
	width: 100%;
	color: grey;
	font-size: 10pt;
	text-align: center;
	line-height: 5;
}


.contentWrapper .plzSignin form{
	width: 100%;
}

.contentWrapper .plzSignin form input{
	background-color: #180E0C;
    border: 1px solid #413938;
    width: 100%;
    height: 30px;
    padding: 5px 10px;
    font-family: Georgia, "STSong", "Times New Roman","新細明體" , Times, serif;
    font-size: 12px;
    line-height: 30px;
    color: #67605f;
    margin-bottom: 10px;
}

.contentWrapper .plzSignin form input[name='userpass']{
	margin-bottom: 20px;
}

.contentWrapper .plzSignin form input:focus::-webkit-input-placeholder { color:transparent; }
.contentWrapper .plzSignin form input:focus:-moz-placeholder { color:transparent; }

.contentWrapper .plzSignin form .signBtnInLife{
	width: 100px;
	margin: 0 auto;
}

.contentWrapper .plzSignin form .signBtnInLife a:link,.contentWrapper .plzSignin form .signBtnInLife a:visited{
	float: left;
	width: 40px;
	height: 30px;
	line-height: 30px;
	color: #666666;
	font: 400 11px Georgia;
	text-align: center;
}

.contentWrapper .plzSignin form .signBtnInLife a:first-child{
	width: 20px;
}

.contentWrapper .plzSignin form .signBtnInLife  span{
	float: left;
	width: 20px;
	text-align: center;
	color: #666666;
}


/* life的小title */
.z_newTitleBox{
	width: 100%;
	position: relative;
}

.z_newTitleBox a{
	position: absolute;
	right: 0px;
	color: #34dab5;
	display: block;
	width: 40px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 12px;
}


.lifeContent{
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
}

.lifeContent .notPublicText{
	width: auto;
	height: 20px;
	line-height: 20px;
	font-size: 9pt;
/* 	background: #34dab5; */
	background: gray;
	color: #000;
	text-align: left;
/* 	padding: 0 5px; */
	padding-left: 5px;
	margin-bottom: 10px;
}


.lifeArticle{
	color: #909090;
	font-size: 13px;
    line-height: 1.5;
    overflow: hidden;
    word-wrap: break-word;
    margin-bottom: 15px;
}

.lifeArticle p{
	width: 50%;
	margin: 0;
	padding: 0;
}

.lifeArticle img{
	width: 45%;
	height: auto;
}


.lifeArticle h1{
	font-size: 13px;
	font-weight: bold;
	color: #909090;
	opacity: 1;
	line-height: 1.5;
	margin-bottom: 10px;
}

.titleBox{
	position: relative;
	width: 100%;
	padding: 0px;
	margin-bottom: 5px;
}


.titleBox .admTool{
	position: absolute;
	top:0;
	left: 0px;
	width: 100%;
	height: 30px;
	line-height: 30px;
	color: #a9a9a9;
    font-size: 12px;
}

.titleBox .admTool i{
	position: absolute;
    left: 50%;
/*     width: 20px; */
	width: auto;
    margin-left: -10px;
    display: block;
    text-align: center;
    color: #34dab5;
    font-style: normal;
    font-weight: 400;
}

.titleBox .admTool a:link,.titleBox .admTool a:visited{
	float: left;
	color: #34dab5;
	display: block;
	width: 40px;
	height: 30px;
	text-align: center;
}

.titleBox .admTool a.updContent{
/* 	background: url(../images/replyFixBtn.png) no-repeat center center; */
	background-size: 17px;
	margin-left: 5px;
}

.titleBox .admTool a.addContent:link{
	float: right;
	margin-right: 5px;
}

/*
.titleBox .admTool a.addContent{	
	background: url(../images/addContent.svg) no-repeat center center;
	background-size: 18px;
}
*/

.titleBox .admTool span{
	float: left;
	text-align: center;
	padding: 0 5px;
}

.titleBox .admTool .addAndPreview{
	float: right;
}


.titleBox.notPublic .admTool a.updContent,.titleBox.notPublic .admTool i,.titleBox.notPublic .admTool a.addContent{
	color: #6e6e6e;
}


.titleBox p {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #a9a9a9;
    font-size: 12px;
}




.z_newTitleBox .closeBtn{
	position: absolute;
	top:0px;
	right: 0px;
	width: 30px;
	height: 30px;
	display: block;
	background: url("../images/close2.gif") no-repeat center center;	
}

.pageNavBox{
	width: 100%;
	height: 15px;
	position: relative;
}

.pageNavBox .pageNav{
	
}


.pageNavBox .pageNav a{
	text-decoration: none;
	width: 15px;
	height: 15px;
	font-size: 12pt;
	color: white;
	line-height: 15px;
	text-align: center;
}


.pageNavBox .pageNav a img{
	width: 15px;
	height: auto;
}


.pageNavBox .pageNav.Left{
	float: left;
}

.pageNavBox .pageNav.Right{
	float: right;
}

/* 左右滑動的提示 */
#swipeTip{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
	display: none;
	transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
}

#swipeTip.SHOWSHOW{
	display: block;
}

#swipeTip .tipBox{
	width: 80%;
	height: 50px;
	position: absolute;
	top:50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -40%;
	background: red;
}


/* 預覽功能 開始 */

.goUpdateTool{
	position: fixed; 
	right: 5px; 
	top:10%; 
}

.goPreviewTool{
	position: fixed; 
	right: 5px; 
	top:10%; 
}

#showUpdateTool,#showPreviewTool{
	display: none;
}

/*
.goPreview{	
	width: 80px;
	height: 40px; 
	line-height: 40px; 
	text-align: center; 
	cursor: pointer; 
	background: rgba(52, 218, 181, .8); 
	border-radius: 5px;
	color: black;
	font-size: 12px;
	margin-bottom: 10px;
}
*/


.goPreview{	
	width: 40px;
	height: 30px; 
	line-height: 30px; 
	text-align: center; 
	cursor: pointer; 
	background-color: rgba(0, 0, 0, 0.5); 
	border-radius: 5px;
	color: black;
	font-size: 12px;
	margin-bottom: 10px;
}



.goPreview.eye{
		background-image: url(../images/life_adm_preview_btn.svg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 50%;		
	}
	
.goPreview.okUpd{
	background-image: url(../images/life_adm_preOk_btn.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 50%;
	float: none;
	width: 40px;
}

.goPreview.backPre{
	background-image: url(../images/life_adm_preBackward_btn.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 50%;
	float: none;
	width: 40px;
}




.goPreview:hover{
	background-color: rgba(0, 0, 0, 1);  
	color: white;
}

.goPreview p{
		display: inline-block;
	}

.goPreview.backPre{
	display: block;
	top:10%; 
}


.goPreviewTool a.findIdBtn{
	width: 40px;
	height: 76px;
	display: block;
	background: url(../images/findId_icon.png) no-repeat;
	background-size: 35px auto;
	background-position: center center;
	background-color: rgba(55, 55, 55, 0.7);
	border-radius: 5px;
}

.goPreviewTool a.findIdBtn:hover{
	background-color: rgba(0, 0, 0, 1);  
}



label.previewToggle{
	width: auto;
	height: 30px;
	display: block;
	float: right;
	cursor: pointer;
	position: relative;

}



label.previewToggle span.previewIcon{
	width: 45px;
	height: 20px;
	display: block;
	font-size: 12px;
	color: black;
	line-height: 20px;
	text-align: right;
	padding-right: 5px;
}



span.previewIcon:before {
  position: absolute;
  content: "";
  height: 6px;
  width: 6px;
  left: 5px;
  top: 50%;
  margin-top: -4px;
  border-radius: 8px;
  background-color: rgba(231, 231, 231, 1);
  border: 1px solid rgba(231, 231, 231, 1);
  -webkit-transition: .2s;
  transition: .2s;
}

span.previewIcon:after{
	content: "預覽";
}




label.previewToggle input[name='pviewID']{

	display: none;
}


input[name='pviewID']:checked + .previewIcon{
/*
	background: url(../images/open-trash-can.svg) no-repeat center 4px;
	background-size: 20px;
*/
	color: #34dab5;
}

input[name='pviewID']:focus + span.previewIcon {
  box-shadow: 0 0 1px #2196F3;
}

input[name='pviewID']:checked + span.previewIcon:before {
  background-color: #34dab5;
  border: 1px solid gray;
}

/* 預覽功能 結束 */

/* 新的加入預覽眼睛 icon 開始 */
label.addPreviewToggle{
	width: auto;
	height: 30px;
	display: block;
	float: right;
	cursor: pointer;
	position: relative;
	margin-right: 5px;

}



label.addPreviewToggle span.addPreviewIcon{
	width: 30px;
	height: 30px;
	display: block;
	font-size: 12px;
	color: black;
	line-height: 20px;
	text-align: right;
	padding-right: 5px;
	background-image: url(../images/life_adm_preview_grey_btn.svg);
	background-repeat: no-repeat;
	background-size: 73%;
	background-position: center center;
	background-position-y:3px;
	
}



span.addPreviewIcon:before {
/*
  position: absolute;
  content: "";
  height: 6px;
  width: 6px;
  left: 5px;
  top: 50%;
  margin-top: -4px;
  border-radius: 8px;
  background-color: rgba(231, 231, 231, 1);
  border: 1px solid rgba(231, 231, 231, 1);
  -webkit-transition: .2s;
  transition: .2s;
*/
}

span.addPreviewIcon:after{
/* 	content: "預覽"; */
}




label.addPreviewToggle input[name='pviewID']{

	display: none;
}


input[name='pviewID']:checked + .addPreviewIcon{
	background-image: url(../images/life_adm_preview_btn.svg);
	background-repeat: no-repeat;
	background-size: 73%;
}

/*
input[name='pviewID']:focus + span.addPreviewIcon {
  box-shadow: 0 0 1px #2196F3;
}
*/

/*
input[name='pviewID']:checked + span.addPreviewIcon:before {
  background-color: #34dab5;
  border: 1px solid gray;
}
*/
/* 新的加入預覽眼睛 icon 結束 */





/* 20180520 life & leaf 往前load進上一篇 */

.contentWrapper .prevLoading{
	display: none;
	margin-bottom: 20px;
}

.contentWrapper .prevLoading img{
	width: 30%;
	height: auto;
	margin-bottom: 10px;
}


.contentWrapper .prevLoading p{
	color: #fff;
	font-size: 13px;
}




/* 行動裝置 */

@media screen and (max-width:736px){
	
	body{
	background: url(../images/bg/20110709index.jpg) repeat-y left top fixed #000000; 
/*
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover; 
*/
	padding-bottom: 100px;
}
	
	.contentWrapper.forlife{
		width: 95%;
		margin-bottom: 15px;
		margin-top: 40px;
		margin-left: auto;
	}
	
	
	.contentWrapper .prevLoading img{
		width: 60%;
		height: auto;
	}
	
	
	.lifeArticle img{
		width: 100%;
		height: auto;
	}
	
	#goTop {
	    position: fixed;
	    left: 0px;
	    bottom: 7%;
	    width: 50px;
	    height: 30px;
	    background: rgba(55, 55, 55, 0.7);
	}
	
	
	#goTop a {
	    width: 50px;
	    height: 30px;
	    display: block;
	    background: url(../images/back-top-icon.png) no-repeat;
	    text-decoration: none;
	    background-size: 30px auto;
	    background-position: center center;
	}
	

	
	
	.goUpdateTool{
		position: fixed;
		bottom: 30px;
		top:auto;
		right: -90px;
		transition: all .5s ease-in-out;
		-webkit-transition: all .5s ease-in-out;
	}
	
	.goPreviewTool{
		position: fixed;
		bottom: 6%;
		top:auto;
		right: -100px;
		transition: all .5s ease-in-out;
		-webkit-transition: all .5s ease-in-out;
	}
	
	.showTool{
		right:0;
	}
	
	#showUpdateTool,#showPreviewTool{
		width: 30px;
		height: 40px;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		display: block;
/* 		background: rgba(52, 218, 181, 0.8); */
		background: rgba(55, 55, 55, 0.7);
		float: left;
/* 		margin-right: 5px;		 */
	}
	
	#showUpdateTool span,#showPreviewTool span{
		background-image: url(../images/prev_smallArrow.svg);
		background-size: 60%;
	    background-repeat: no-repeat;
	    background-position-y:50%;
	    background-position-x:30%;
	    width: 30px;
	    height: 40px;
	    display: block;	
	}
	
	.previewBtnBox{
		width: 50px;
		height: 40px;
		display: block;
		background-color: rgba(55, 55, 55, 0.7);
		float: left;
	}
	
	
	.previewBtnBox.done{
		width: 90px;
	}
	
	.goPreviewTool a.findIdBtn{
		float: left;
		width: 50px;
		height: 40px;
		display: block;
		background: url(../images/findId_icon.png) no-repeat;
		background-size: 35px auto;
		background-position-y: 5px;
		background-position-x: left;
		background-color: rgba(55, 55, 55, 0.7);
		border-radius: 0px;
	}
	
	
	
	.goPreview{
/* 		margin-right: 5px; */
		margin-bottom: 0px;
		
		width: 50px;
		height: 40px;

	}
	
	.goPreview p{
		display: none;
	}
	
	.goPreview.eye{
		background: url(../images/life_adm_preview_btn.svg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 60%;
		
	}
	
	.goPreview.okUpd{
		background: url(../images/life_adm_preOk_btn.svg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 60%;
		float: left;
		width: 40px;
	}
	
	.goPreview.backPre{
		background: url(../images/life_adm_preBackward_btn.svg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 60%;
		float: left;
		width: 40px;
	}
	
}