/* Small devices (tablets, 768px and up) */
@media (min-width: 500px) {
	#div_body{
		font-size:3em;
	}
	#div_title{
		font-size:2em;
		
	}
	#div_menu{
		padding-left:10px;
		background-color:#ddd;
	}
	#div_menu ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		
	}
	#div_menu li {
		float: left;
	}
	#div_menu li a {
		display: inline-block;
		color: #444;
		text-align: center;
		padding: 0.3em 0.2em;
		text-decoration: none;
	}
	#div_menu li a:hover {
		background-color: #888888;
		color: #fff;
	}
	#div_post_title{
		font-size:1em;
		background-color: #FFCC22;
	}
	
	
	.login-box {
		
		background-color: white;
		max-width: 100%;
		margin: 0 auto;
		position: relative;
		top: 0px;
		padding-bottom: 30px;
		border-radius: 5px;
		box-shadow: 0 5px 50px rgba(0,0,0,0.4);
		text-align: center;
	}

	.login-box .box-header {
		background-color: #665851;
		margin-top: 0;
		border-radius: 5px 5px 0 0;
		color:#fff;
		font-size: 2em;
	}
	.login-box .box-bottom {
		margin-top: 10;
		color:#000;
		text-align:right;
		padding-right:10px;
		font-size:2em;
	}
	.login-box .box-bottom a {
		color:#000;
		text-decoration:none;
	}

	.login-box label {
		font-size: 3em;
		color: #888;
		letter-spacing: 1px;
		text-transform: uppercase;
		line-height: 2em;
	}

	.login-box input {
		margin-bottom: 20px;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 2px;
		font-size: 3em;
		color: #888;
	}

	.login-box input:focus {
		outline: none;
		border-color: #665851;
		transition: 0.5s;
		color: #665851;
	}

	.login-box button {
		margin-top: 0px;
		border: 0;
		border-radius: 2px;
		color: white;
		padding: 10px;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 3em;
		letter-spacing: 1px;
		background-color: #665851;
		cursor:pointer;
		outline: none;
	}

	.login-box button:hover {
		opacity: 0.7;
		transition: 0.5s;
	}
	
	
}
 
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

	#div_body{
		font-size:1em;
		position: absolute;
		/*top: 50%;*/
		left: 50%;
		margin-left:-450px;
		/*margin-top:-300px;*/
		width:900px;
		height:300px;
	}
	#div_title{
		font-size:3em;
		
	}
	#div_menu{
		padding-left:430px;
		background-color:#fff;
	}
	#div_menu ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		
	}
	#div_menu li {
		float: left;
		
	}
	#div_menu li a {
		display: inline-block;
		color: #444;
		text-align: center;
		padding: 0.3em 1em;
		text-decoration: none;
	}
	#div_menu li a:hover {
		background-color: #888888;
		color: #fff;
	}

	#div_post_message{
		
		height:260px;
		/*background-color: #dddddd;*/
		border-radius:10px;
		padding:0.5em 0.5em 0.5em 0.5em;
		border-color:#dddddd;
		border-width:1em; border-style:solid;
		overflow:scroll;
		box-shadow: 0 5px 50px rgba(0,0,0,0.4);
	}
	#div_post_title{
		font-size:1.5em;
		background-color: #FFCC22;
		padding-left:1em;
		border-radius:10px;
		box-shadow: 0 5px 50px rgba(0,0,0,0.4);
	}
	.class_post{
		padding-top: 0.2em;
		padding-bottom: 0.2em;
		
	}
	.class_post_time{
		float:left;
		
		width:10%;
	}
	.class_post_message{
		float:left;
		width:88%;
		
	}
	.login-box {
		
		background-color: white;
		max-width: 340px;
		margin: 0 auto;
		position: relative;
		top: 80px;
		padding-bottom: 30px;
		border-radius: 5px;
		box-shadow: 0 5px 50px rgba(0,0,0,0.4);
		text-align: center;
	}

	.login-box .box-header {
		background-color: #665851;
		margin-top: 0;
		border-radius: 5px 5px 0 0;
		color:#fff;
	}
	.login-box .box-bottom {
		margin-top: 10;
		color:#000;
		text-align:right;
		padding-right:10px;
		font-size:1em;
	}
	.login-box .box-bottom a {
		color:#000;
		text-decoration:none;
	}

	.login-box label {
		font-weight: 700;
		font-size: 1em;
		color: #888;
		letter-spacing: 1px;
		text-transform: uppercase;
		line-height: 2em;
	}

	.login-box input {
		margin-bottom: 20px;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 2px;
		font-size: .9em;
		color: #888;
	}

	.login-box input:focus {
		outline: none;
		border-color: #665851;
		transition: 0.5s;
		color: #665851;
	}

	.login-box button {
		margin-top: 0px;
		border: 0;
		border-radius: 2px;
		color: white;
		padding: 10px;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 1em;
		letter-spacing: 1px;
		background-color: #665851;
		cursor:pointer;
		outline: none;
	}

	.login-box button:hover {
		opacity: 0.7;
		transition: 0.5s;
	}
}
body{
	margin:0 0 0 0;
	
	font-size:1em;
	font-family: 'Noto Sans TC', sans-serif;

	-moz-background-size: cover;
	background-size: cover;
}






.tabstyle_def{
	
	padding : 3px;
	border-width:1px;
	border-style:solid;
	border-color:#fff;
	text-align:center;
}
.tabstyle_def th ,
.tabstyle_def td{
	border-width:1px;
	border-style:solid;
	border-color:#fff;
	text-align:center;
	vertical-align:middle;
	margin-left:auto; 
	margin-right:auto;
	margin: 1px 1px 1px 1px;
}
.tablestyle_def_color_th{
	background-color: #5592D3;
	color: #ffffff;
	padding : 3px;
}
.tablestyle_def_color_tr{
	background-color: #C5DEF3;
	padding : 3px;
}
.tablestyle_def_color_tr2{
	background-color: #EBF4FB;
	padding : 3px;
}
.tablestyle_def_hover{
	background-color: #FFCDE5;
}
.tablestyle_def_click{
	background-color: #FFB7DD;
	color:#fff;
}