/* css reset simple */
html, body, ul, ol, li, form, fieldset, legend{ margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
fieldset,img { border: 0; }
legend { color: #000; }
li { list-style: none; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; vertical-align: top; font-weight: normal; }
abbr, acronym { border-bottom: .1em dotted; cursor: help; }
/* end of css reset */

div,textarea,input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { padding: 0; background-color: black; color: #CCC; font-size: 18px; 
	font-family: "\7d30\660e\9ad4", "AR PL UMING TW", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
pre{ display: inline;}

.page{ 
/*	position: absolute; top:0; left:0;  overflow: hidden;
	z-index:10; */
	width: 100%; line-height: 1.2; background-color: black;
	padding-bottom: 80px;
}

.page .container{ margin: 0 auto; width: 980px; position: relative; }
@media (max-width: 767px) {
  .page .container{ width: auto; }
}
@media (min-width: 768px) and (max-width: 979px) {
  .page .container{ width: 728px; }
}

.navbar { background-color: #000080; width:100%; height: 40px; }
.navbar-fixed-top { position: fixed; z-index:20; }

.nav-title {
  text-align: center; padding: 8px 20px 12px; margin-left: -20px;
  font-size: 20px;  color: #ffffff;
}

.btn{ display: inline-block; padding: 3px 5px 5px; 
	  font-size: 16px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; background-color: #EEE; border: 1px solid #888; border-color: rgba(0,0,0,0.25); text-decoration: none;color: #000;
  -webkit-border-radius: 0.25em; -moz-border-radius: 0.25em; border-radius: 0.25em;
}
.btn:hover{ opacity: 0.9; }
.btn-action{ background-color: #0950D0; color: lightgray; font-weight: bold; }
.btn-back{ 
	padding-left: 20px;
	background-image: url("icon/arrow-left-32.png"); 
	background-size: 16px 16px; background-position:left; background-repeat:no-repeat;
}
.btn-str{ cursor: pointer; color: #9CF; }
.btn-str:hover{ color:#E0E0E0; background-color:#666; }

.nav-option { position: absolute; right: 0; }
.nav-btn{ position: absolute; margin: 5px; }
.nav-btn-right{ position: absolute; right:0; margin: 5px; }


input{ height: 30px;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
	border: 1px solid #888; padding: 0 5px; 
	font-family: "\7d30\660e\9ad4", "AR PL UMING TW", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
}
textarea{ 
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
	border: 1px solid #888; padding: 0 5px; 
	font-family: "\7d30\660e\9ad4", "AR PL UMING TW", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
}
a{ text-decoration: none; color: #9CF; word-break: break-all; }
a:visited{ color: #08C; }
a:hover{ text-decoration:none; color:#E0E0E0; background-color:#666; }
label{ vertical-align: middle; }
input[type=checkbox]{ 	
	-moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3);
}
input[type=radio]{
	height: 20px; vertical-align: bottom; margin: 0 5px 2px;
	-moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);
}

.input-label{ display: inline-block; vertical-align: top; margin-top: 6px;}

img{ max-width: 100%; max-height: 100%; vertical-align: top; }


.hide { display: none; }
.pointer { cursor: pointer; }
.radius{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

.float{ float: left; }
.clear{ clear: both; }

.bot5px{ margin-bottom: 5px; }

.hot-num{ padding: 0 2px; font-weight: normal;
	border-radius: .25em; -moz-border-radius: .25em; -webkit-border-radius: .25em;
    color: #000; text-align: center; font-size: .9em; background-color: maroon; }
.board-class{ padding: 2px; font-weight: normal;
	border-radius: .25em; -moz-border-radius: .25em; -webkit-border-radius: .25em;
    color: #CCC; text-align: center; font-size: 15px; background-color: #333; }

.brand-name{ font-family:tahoma,verdana,arial,sans-serif;  }

#top-desc{ color: #FFF; font-size: 20px; padding: 5px 5px 0; }
h1{ color: #FFF; font-size: 20px; padding: 5px 5px 0; }

/* list */
.list { list-style: none; }
.list li { border-bottom: 1px solid #555; margin: 0; }

.list-top{ border-bottom: #555 solid 1px; color: green; padding: 0 5px 2px; line-height: 1.5; }
.list-title{ font-size: 15px; background-color: #555555; padding: 0 5px 1px; }
.list-prev, .list-next {
  font-size: 20px; cursor: pointer; line-height: 60px;
  border: 0 solid #555; border-bottom-width: 1px; text-align: center;
}
.list-prev:hover, .list-next:hover{ background-color: #222;}

.list-bot { padding: 10px 5px 0; line-height: 1.5; }

.board-data{ position: relative; overflow: hidden; cursor: pointer; padding: 5px; }
.board-data:hover{ background-color: #222; }

.hot-num{ padding: 0 2px; font-weight: normal;
	border-radius: .25em; -moz-border-radius: .25em; -webkit-border-radius: .25em;
    color: #000; text-align: center; font-size: .9em; background-color: maroon;}

.ptt-post:after{ display: block; content: ''; clear: both; }
.post-data{ position: relative; overflow: hidden; cursor: pointer; min-height: 45px; }
.post-data:hover{ background-color: #222; }
.post-title{ font-weight: bold; padding:3px 5px 0; }
#ptt-post-ul .post-author{ color: #FFF; }
.author-data{ padding: 0 5px 3px; }
.post-ip, .post-time{ white-space: nowrap; }
.post-desc{ font-size: 17px; word-wrap: break-word; word-break: break-all; padding: 0 5px 3px; }
.post-thumb{ float: left; margin: 0 5px 0 0; line-height: 0; overflow: hidden; width: 100px; height: 100px; }
.post-thumb > img{ position: relative; left: 50%; transform: translate(-50%,0); max-width: none; }
.x-num-div{ position: absolute; right: 10px; bottom: 4px; line-height: 1; font-size: 14px; padding: 2px; border-radius: 4px; background-color: #333; }
@media (max-width: 767px){
	.post-title, .author-data, .post-desc { font-size: 16px; }
	.x-num-div{ font-size: 12px; }
}


.push-row{ padding: 0 5px 2px; clear: both; }
.push-row:after{ display: block; content: ''; clear: both; }

.push-x1{ color: white; }
.push-x2{ color: red; }
.push-right, .push-right-ip{ float: right; color: #888; font-size: 12px; line-height: 100%; }
@media (min-width: 767px){
	.push-right{ font-size: 16px; }
	.push-right-ip{ font-size: 14px; }
}
.ptt-push-author{ color:#FFFF00; }
.ptt-push-author a{ color:#FFFF00; }
.ptt-push-content { color:#808000; word-wrap: break-word; word-break: break-all; }

.push-img{ margin: 0 5px 5px 0; float: left; overflow: hidden; width:100px; height:100px; }
.push-img-group{ clear: both; }
.push-img-group:after{ display: block; content: ''; clear: both; }
.push-img > img{ position: relative; left: 50%; transform: translate(-50%,0); max-width: none; }
.push-load{ cursor: pointer; }

.list-btn{ white-space: nowrap; color: #CCC; }
.btn-focus{ white-space: nowrap; background-color: #CCC; color: black; }

.fgB0{color:#000000}
.fgR0{color:#800000}
.fgG0{color:#008000}
.fgY0{color:#808000}
.fgL0{color:#000080}
.fgP0{color:#800080}
.fgC0{color:#008080}
.fgW0{color:#C0C0C0}
.fgB1{color:#808080}
.fgR1{color:#FF0000}
.fgG1{color:#00FF00}
.fgY1{color:#FFFF00}
.fgL1{color:#0060FF}
.fgP1{color:#FF00FF}
.fgC1{color:#00FFFF}
.fgW1{color:#FFFFFF}

/* ads */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.list-top + .google-auto-placed { display: none; }
.list-top > .google-auto-placed { display: none; }
.list-title > .google-auto-placed { display: none; }