@charset "utf-8";

body {
	padding:0;
	margin:0;
	background:url(../images/all_bg.gif);
	font-family:"microsoft jhengHei", arial, "apple Ligothic", heiti;
}
.all {
	display:block;
	position:absolute;
	margin:-200px 0 0 -300px;
	top:50%;
	left:50%;
	width:600px;
	height:400px;
	vertical-align:middle;
	border-radius:10px;
	border:5px solid #eee;
	text-shadow:0 1px 1px #fff;
	box-shadow:0 2px 7px -3px #333;
	font-size:15px;
	background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top,  #ffffff 0%,#f4f4f4 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#f4f4f4 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 );
}
.all h1 {
	display:block;
	font-size:15px;
	text-align:center;
	color:#fff;
	font-weight:normal;
	line-height:25px;
	height:25px;
	margin:0;
	padding:0;
	border-radius:6px 6px 0 0;
}
.logo_img {
	display:block;
	margin:0 auto 20px auto;
	max-width:300px;
	width:90%;
}

.input_text {
	display:block;
	margin:0 0 5px 0;
}
.input_text span {
	width:200px;
	text-align:right;
	display:inline-block;
	padding:0 15px 0 0;
}

.input_box {
	font-family:"microsoft jhengHei", arial, "apple Ligothic", heiti;
	font-size:15px;
	color:#333;
}
input.input_box {
	padding:0 5px;
	border:1px solid #999;
	width:250px;
	height:25px;
	margin:0;
	vertical-align:middle;
	border-radius:10px;
}
select.input_box {
	padding:0 0 0 5px;
	border:1px solid #999;
	height:25px;
	border-radius: 10px  0 0 10px;
}
label.save_pw {
	display:block;
	margin:10px 0 0 215px;
	font-size:13px;
}

.save_btn {
	display:block;
	margin:10px 0 0 215px;
	text-align:left;
}
.save_btn input {
	font-size:15px;
	font-family:"microsoft jhengHei", arial, "apple Ligothic", heiti;
	padding:5px 25px;
}
.text_body {
	min-height:335px;
	display:block;
	padding:15px 0 0 0;
}
.bottom {
	width:100%;
	display:block;
	z-index:2px;
	height:25px;
	color:#FFF;
	line-height:25px;
	font-size:11px;
	text-align:center;
	border-radius: 0 0 6px 6px;
	text-shadow:none;
}
.top_menu {
	display:block;
	height:30px;
	font-size:13px;
	margin:0 0 5px 0;
}
.top_menu p {
	display:none;
}
.top_menu a {
	line-height:30px;
	color:#fff;
	text-decoration:none;
	padding:0 10px;
	display:block;
	float:right;
	border-left:1px dotted #fff;
}
.top_menu a:hover {
	background:#ff8a00;
}



.color01 .top_menu {
	background: #c5deea;
background: -moz-linear-gradient(top,  #c5deea 0%, #066dab 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(100%,#066dab));
background: -webkit-linear-gradient(top,  #c5deea 0%,#066dab 100%);
background: -o-linear-gradient(top,  #c5deea 0%,#066dab 100%);
background: -ms-linear-gradient(top,  #c5deea 0%,#066dab 100%);
background: linear-gradient(to bottom,  #c5deea 0%,#066dab 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 );
}


.color01 .all h1 {
	text-shadow:0 -1px 0px #098bbf;
	background: #7fc3ff;
    background: -moz-linear-gradient(top,  #7fc3ff 0%, #098bbf 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7fc3ff), color-stop(100%,#098bbf));
background: -webkit-linear-gradient(top,  #7fc3ff 0%,#098bbf 100%);
background: -o-linear-gradient(top,  #7fc3ff 0%,#098bbf 100%);
background: -ms-linear-gradient(top,  #7fc3ff 0%,#098bbf 100%);
background: linear-gradient(to bottom,  #7fc3ff 0%,#098bbf 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7fc3ff', endColorstr='#098bbf',GradientType=0 );
}
.color01 .menu_div {
	background:#00578b;
}
.color01 .bottom {	
	background:#F90;
}



.color02 .top_menu {
	background: #a90329;
background: -moz-linear-gradient(top,  #a90329 0%, #6d0019 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(100%,#6d0019));
background: -webkit-linear-gradient(top,  #a90329 0%,#6d0019 100%);
background: -o-linear-gradient(top,  #a90329 0%,#6d0019 100%);
background: -ms-linear-gradient(top,  #a90329 0%,#6d0019 100%);
background: linear-gradient(to bottom,  #a90329 0%,#6d0019 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}

.color02 .all h1 {
	text-shadow:0 -1px 0px #6d0019;
	background: #a90329;
background: -moz-linear-gradient(top,  #a90329 0%, #6d0019 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(100%,#6d0019));
background: -webkit-linear-gradient(top,  #a90329 0%,#6d0019 100%);
background: -o-linear-gradient(top,  #a90329 0%,#6d0019 100%);
background: -ms-linear-gradient(top,  #a90329 0%,#6d0019 100%);
background: linear-gradient(to bottom,  #a90329 0%,#6d0019 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}
.color02 .menu_div {
	background:#a90329;
}
.color02 .bottom {	
	background:#6d0019;
}





.color03 .top_menu , .color03 .all h1 {
	background: #7ad611;
background: -moz-linear-gradient(top,  #7ad611 0%, #299a0b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7ad611), color-stop(100%,#299a0b));
background: -webkit-linear-gradient(top,  #7ad611 0%,#299a0b 100%);
background: -o-linear-gradient(top,  #7ad611 0%,#299a0b 100%);
background: -ms-linear-gradient(top,  #7ad611 0%,#299a0b 100%);
background: linear-gradient(to bottom,  #7ad611 0%,#299a0b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ad611', endColorstr='#299a0b',GradientType=0 );
}
.color03 .all h1 {
	text-shadow:0 -1px 0px #299a0b;
}
.color03 .menu_div {
	background:#7ad611;
}
.color03 .bottom {	
	background:#299a0b;
}




.color04 .top_menu , .color04 .all h1 {background: #e570e7;
background: -moz-linear-gradient(top,  #e570e7 0%, #a849a3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e570e7), color-stop(100%,#a849a3));
background: -webkit-linear-gradient(top,  #e570e7 0%,#a849a3 100%);
background: -o-linear-gradient(top,  #e570e7 0%,#a849a3 100%);
background: -ms-linear-gradient(top,  #e570e7 0%,#a849a3 100%);
background: linear-gradient(to bottom,  #e570e7 0%,#a849a3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 );

}
.color04 .all h1 {
	text-shadow:0 -1px 0px #a849a3;
}
.color04 .menu_div {
	background:#e570e7;
}
.color04 .bottom {	
	background:#a849a3;
}


.color05 .top_menu , .color05 .all h1 {background: #606060;
background: -moz-linear-gradient(top,  #606060 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606060), color-stop(100%,#000000));
background: -webkit-linear-gradient(top,  #606060 0%,#000000 100%);
background: -o-linear-gradient(top,  #606060 0%,#000000 100%);
background: -ms-linear-gradient(top,  #606060 0%,#000000 100%);
background: linear-gradient(to bottom,  #606060 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#000000',GradientType=0 );
}
.color05 .all h1 {
	text-shadow:0 -1px 0px #000000;
}
.color05 .menu_div {
	background:#4c4c4c;
}
.color05 .bottom {	
	background:#000000;
}

.color06 .top_menu , .color06 .all h1 {background: #ff5db1;
background: -moz-linear-gradient(top,  #ff5db1 0%, #ba0161 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5db1), color-stop(100%,#ba0161));
background: -webkit-linear-gradient(top,  #ff5db1 0%,#ba0161 100%);
background: -o-linear-gradient(top,  #ff5db1 0%,#ba0161 100%);
background: -ms-linear-gradient(top,  #ff5db1 0%,#ba0161 100%);
background: linear-gradient(to bottom,  #ff5db1 0%,#ba0161 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#ba0161',GradientType=0 );
}
.color06 .all h1 {
	text-shadow:0 -1px 0px #ba0161;
}
.color06 .menu_div {
	background:#ff5db1;
}
.color06 .bottom {	
	background:#ba0161;
}


.color07 .top_menu , .color07 .all h1 {background: #606c88;
background: -moz-linear-gradient(top,  #606c88 0%, #3f4c6b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b));
background: -webkit-linear-gradient(top,  #606c88 0%,#3f4c6b 100%);
background: -o-linear-gradient(top,  #606c88 0%,#3f4c6b 100%);
background: -ms-linear-gradient(top,  #606c88 0%,#3f4c6b 100%);
background: linear-gradient(to bottom,  #606c88 0%,#3f4c6b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 );
}
.color07 .all h1 {
	text-shadow:0 -1px 0px #3f4c6b;
}
.color07 .menu_div {
	background:#606c88;
}
.color07 .bottom {	
	background:#3f4c6b;
}

.color08 .top_menu , .color08 .all h1 {background: rgb(30,87,153);
background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1)));
background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}
.color08 .all h1 {
	text-shadow:0 -1px 0px rgba(30,87,153,1);
}
.color08 .menu_div {
	background:#00578b;
}
.color08 .bottom {	
	background:#00578b;
}

@media screen and (max-width: 600px) , screen and (max-height: 450px) {
	
.all {
	position:inherit;
	margin:40px auto auto auto;
	width:95%;
	display:block;
	max-width:600px;
	height:auto;

}
.text_body {
	padding:10px;
}
.input_text span {
	width:200px;
	display:block;
	margin:0 0 2px 0;
	text-align:left;
}
input.input_box {
	width:90%;
}
label.save_pw {
	display:block;
	margin:10px 0 0 0;
}

.save_btn {
	display:block;
	margin:10px 0 0 0;
	text-align:left;
}
.bottom {
	height:auto;
	line-height:15px;
	padding:3px;
}

.top_menu {
	position:fixed;
	width:100%;
	top:0;
	padding:2px 0 0 0;
	height:33px;
}
.top_menu p {
	display: block;
	padding:0;
	margin:0 0 0 5px;
	color:#444;
	cursor:pointer;
	padding:0 15px;
	line-height:30px;
	width:80px;
	text-align:center;
	border-radius:10px;
	background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed));
background: -webkit-linear-gradient(top,  #ffffff 0%,#ededed 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#ededed 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#ededed 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );

}
.top_menu p:hover {
	background:#ff8a00;
	color:#fff;
	box-shadow:0 0 3px #fff;
}
.menu_div {
	position:absolute;
	margin:0;
	width:100%;
	max-width:350px;
	top:35px;
	display:none;
}
.top_menu a {
	display:block;
	float:inherit;
	width:auto;
	border:none;
	border-bottom:1px dotted #fff;
	text-align:left;
}
}


.error_text{
	text-align: center;
	font-style: bold;
	margin-bottom: 5px;
}