/*
version:umt-2013
author:zhangshixiang@cstnet.cn
data:2013-02-28
*/


/*case 1£ºhorizon and vertical for iphone4(320*480) and smaller phone, the layout is fluid*/
/* * {
	transition:all 1s;
} */

.btn.hide768 {/* display:none\9\0;  IE6 is not responsive */ _display:none; }
@media screen and (max-width:319px) {
	#loginForm.form-horizontal .controls,#createRequestForm.form-horizontal .controls {margin-left:0px;}
}

@media screen and (max-width: 480px) {
	.login.container {margin-top:70px; margin-bottom:10px;}
	.login.container h2.login-title span.cstnet,
	.login.container #loginForm .control-group span.help-block.text-quote,
	.login .login-left table.form_table .help-quote, a.help-quote,
	.login .login-left table.form_table td.mail-title, h2 .mail-title, p.hint,
	.login .login-title .sub-title.hides
	/* ,.sub-text.inner,.login .login-title .sub-title */ {display:none;}
	
	.login.container #loginForm .control-group,.login.container .control-group {margin-bottom:5px}
	
	.login #loginForm h2.login-title, .login h2.both.login-title {
		font-weight:200; border-bottom:1px solid #ccc; font-size:24px;}
	
	.form-horizontal {padding:0 5%;}
	#changepassForm.form-horizontal {margin:0px 5%}
	.login.container #loginForm input[type="text"],.login.container #loginForm input[type="password"],
	.login.container #createRequestForm input[type="text"],.login.container #createRequestForm input[type="password"]{width:90%; *width:auto;}
	.thirdLogin {margin-top:20px;}
	
	.login .login-left {padding-top:0;}
	.login .login-left a img {padding:4px; background:#fff; border:1px solid #ccc;}
	.login .login-left .forgetpsw {margin-left:0;}

	.login.container #loginForm.form-horizontal .control-label,
	.login.container #createRequestForm.form-horizontal .control-label {text-align:left; margin:0 0 10px 0;}
	
	#loginForm.form-horizontal .control-label,#createRequestForm.form-horizontal .control-label {width:auto;}
  	#loginForm.form-horizontal .controls,#createRequestForm.form-horizontal .controls {margin-left:0px;}
  	
  	ul.sub-nav li {margin-left:5px;}
  	ul.sub-nav li a {padding:10px 6px;}
  	#findPswForm.form-horizontal {padding-top:0;}
  	#toEmailLink .btn.long.btn-primary,.btn.long.btn-primary#secondaryEmail_submit {padding:10px}
  	
  	/*oauth*/
  	.login.oauth .form-horizontal.oauth .control-group {margin-left:5%;}
}


/**common for the above two(fluid layout)*/
@media screen and (max-width:767px) {
	.login.container, .login .container {width:auto;}
	.login .login-right {border-left:none; border-bottom:none; display:none;}
	.login .login-left {border-right:none;}
	.hide768,.btn.hide768 {display:inline-block;}
	h2 .mail-title{display:none;}
	.left-nav {width:200px;}
  	.right-content {width:100%}
}


/***common for the above:3*/
@media screen and (max-width:960px) {
	/* body.login, #login .login.container {background:#fff;}
	.login.container { border:0; box-shadow:none; border-bottom:1px solid #ddd; margin:50px auto;} */
	body.login {padding-left:3.5%; padding-right:3.5%}
	.login h2.login-title {margin:0 0 10px;}
	.nav-bar ul.nav-right {background-color:#bbb; border-radius:4px; padding:0 10px;}
	#loginForm.form-horizontal .control-label,#createRequestForm.form-horizontal .control-label {width:100px;}
  	#loginForm.form-horizontal .controls,#createRequestForm.form-horizontal .controls {margin-left:120px; margin-right:30px;}
	
	/*index*/
  	h2.total-title,h3.success{margin:0 5%; word-break:break-all;}
  	p.config,.headerBar {margin-left:5%;}
  	.container.gray table.form_table,table.saftyList {margin:0 10%; word-break:break-all;}
  	table.saftyList td, table.saftyList th {padding:7px}
}

/*case 4£ºvertical for ipad and all widescreen*/
@media screen and (min-width: 961px) {
	.login h2.login-title,.login #loginForm .control-group {margin:0 5% 10px}
	.hide768,.btn.hide768 {display:none;}
}

/*case 3£ºvertical for iphone4s and iphone5*/
@media screen and (min-width:768px) and (max-width: 960px) {
  .login .login-right {border-top:none; border-bottom:none;}
  .hide768,.btn.hide768 {display:none;}
  #loginForm.form-horizontal .controls,#createRequestForm.form-horizontal .controls {*margin-left:0px;}
}

/*case 2£ºhorizon for iphone4s(640*960) and iphone5(640*1136) as well as ipad(768)*/
@media screen and (min-width:481px) and (max-width: 767px) {
	#loginForm.form-horizontal .controls,#createRequestForm.form-horizontal .controls {*margin-left:0px;}
}

/*confirm*/
@media screen and (max-width: 480px) {
	/* body.login,.login.container {background:#fff;} */
	#loginForm.form-horizontal .control-label,#createRequestForm.form-horizontal .control-label {width:auto;}
	#loginForm.form-horizontal .controls,#createRequestForm.form-horizontal .controls {margin-left:0px;}
  	#loginForm.form-horizontal .controls.IE7 {*margin-left:-75px; }
  	#loginForm.form-horizontal .controls.IE7.small-font {*margin-left:-150px}
}