@charset "UTF-8";


/*************Layout*************/
body#login {
	display:table;
	width:100%;
	height:100%;
	background:#f7f7f7;
}
#login #container {
	display:table-cell;
	margin:0 auto;
	background:none;
	text-align:center;
	vertical-align:middle;
}
#login main {
	display:block;
	margin:0 auto;
	width:400px;
	height:auto;
	background:#346698;
	border-radius:8px;
}
#login footer {
	position:relative;
	margin:0 auto;
	padding:32px 0;
	width:100%;
	text-align:center;
	white-space:nowrap;
	font-size:1rem;
	border:none;
}
#login #content {padding:32px 64px 40px;}
#login #content img {margin-bottom:40px;}


/************* Login *************/
#login input[type="text"],
#login input[type="password"] {
	padding:0 8px 0 32px;
	width:100%;
	height:36px;
	font-size:1.3rem;
	line-height:36px;
	border:none;
	border-radius:4px;
}
#login .uid,#login .passwd {position:relative;}
#login .icon {
	display:block;
	float:left;
	width:16px;
	height:16px;
	position:absolute;
	left:8px;
	top:10px;
}
#login .uid .icon {background:url(../image/icon_login_id.png) no-repeat 50% 50%;}
#login .passwd .icon {background:url(../image/icon_login_pass.png) no-repeat 50% 50%;}
#login input[type="text"] {margin-bottom:8px;}
#login input[type="password"] {margin-bottom:16px;}

#login input[type="submit"] {
	margin-bottom:24px;
	width:100%;
	height:40px;
	color:#fff;
	font-size:1.3rem;
	font-weight:bold;
	line-height:38px;
	text-align:center;
	background:#444; /* Old browsers */
	background:-moz-linear-gradient(top,  #666666 0%, #444444 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#444444)); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top,  #666666 0%,#444444 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top,  #666666 0%,#444444 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top,  #666666 0%,#444444 100%); /* IE10+ */
	background:linear-gradient(to bottom,  #666666 0%,#444444 100%); /* W3C */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#444444',GradientType=0 ); /* IE6-9 */
	border:solid 1px #444;
	border-radius:4px;
	cursor:pointer;
}
#login input[type="submit"]:hover {
	background:-moz-linear-gradient(top,  #444444 0%, #666666 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#666666)); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top,  #444444 0%,#666666 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top,  #444444 0%,#666666 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(top,  #444444 0%,#666666 100%); /* IE10+ */
	background:linear-gradient(to bottom,  #444444 0%,#666666 100%); /* W3C */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
}
#login input[type="submit"]:active {position:relative; top:1px;}


/* Anchor
****************************************/
#login #content .anchor a {
	display:block;
	width:132px;
	height:32px;
	line-height:32px;
	color:#fff;
	background:#1b90c7;
	border-radius:16px;
}
#login #content .anchor a:first-of-type {float:left;}
#login #content .anchor a:last-of-type {float:right;}

#login #content .anchor a:hover {
	text-decoration:none;
	background:#0697dc;
}


/* Login Error
**************************************************/
#loginError {
	margin:0 auto 8px;
	padding:16px;
	width:400px;
	text-align:left;
	border-radius: 8px;
	background:#fff;
}
#loginError li:before {
	content:url(../image/icon_error.png);
	float:left;
	margin-right:8px;
	position:relative;
	top:-1px;
}


/*************LoginFail*************/
#loginFail {
	margin:0 auto;
	width:484px;
	height:100%;
}
#loginFail div.head {
	margin:50px 0 0;
	height:43px;
	background:url(../image/bg_head.png) repeat-x;
}
#loginFail div.head div#head_logo {
	float:left;
}
#loginFail div.head span {
	display:block;
	float:right;
	margin:25px 5px 0 0;
	color:#FFF;
	font-size:11px;
}
#loginFail div.detail {
	border:solid 1px #AAA;
}
#loginFail div.detail div {
	margin:1px;
	padding:10px;
	background:#F5F5F5;
}
#loginFail div.detail div span {
	color:#F00;
	font-weight:bold;
	line-height:1.6em;
}
#loginFail div.detail div table {
	margin:10px 0;
	width:90%;
	border-spacing:5px;
}
#loginFail div.detail div table th {
	width:25%;
	text-align:right;
}
#loginFail div.detail div table td input.txt {
	padding:1px;
	width:100%;
	height:18px;
	line-height:14px;
	border:solid 1px #AAA;
}
#loginFail div.notes {
	padding:10px;
	font-size:11px;
	text-align:left;
	border:solid #AAAAAA;
	border-width:0 1px 1px;
	background:#FFF;
}
input.updPass {
	padding:2px 5px;
	cursor:pointer;
}


/* for Mobile
**************************************************/
@media screen and (max-width:800px) {
	#login #container {background:#346698;}	
	#login main {
		display:block;
		margin:0 auto;
		width:auto;
		height:auto;
	}
	#login footer {color:#fff; background:none;}
	#login #content {
		margin:32px auto;
		padding:0;
		width:272px;
	}
	#loginError {width:auto; margin:16px 32px 8px;}
}