@import url(http://fontawesome.io/icons);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic); 


html,
body {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;                             /* 100%-->1em=16px */
	vertical-align: baseline;
}

html {
	height: 100%;
}

body {
	font: 1em/1.5 open sans,'Source Sans Pro','Helvetica Neue',Helvetica, Arial, sans-serif;
	height: 100%;
}

.h1{
	font-weight: 300;
	text-align:center;
	text-transform: capitalize;
	color: white;
	text-shadow: 0 -1px 2px rgba(40,40,40,0.8);
}

.wrapper {
    width: 100%;
    min-width: 60em;
    min-height: 100%;
    height: auto !important;
    color: white;
    height: auto !important;
    min-height: 100%;
    -webkit-animation: bg 30s infinite; /* Safari 和 Chrome */
    -moz-animation: bg 30s infinite; /* Firefox */
    -o-animation: bg 30s infinite; /* Opera */
    animation: bg 30s infinite;
    background-image: url('/Frame/dist/img/login/robot.jpg');
}

/* Header
-----------------------------------------------------------------------------*/
.header {
	min-width: 60em;
	height: 3.75em;
	background: rgb(251, 251, 250);

}

.headercontainer {
	min-width: 60em;
	width: 80%;	
	height: 3.75em;
	margin: 0 auto;
	padding: 0.25em 0.125em 0.25em 0.125em ;
	text-transform: capitalize;	
}

.logo{
	position: absolute;
	width: 12.5em;
	height: 1.625em;
	margin: 0.65em 0.125em 0.625em 0.125em;
}

.span1{
	font-weight: 300;
	font-size: 0.75em;
	color: rgb(120, 120, 120);
	margin: 1.375em 0.375em 0.625em 8em;	
}

/* Middle
-----------------------------------------------------------------------------*/
.align {

  display: -webkit-flex; 
  display: -ms-flexbox;
  display: -moz-box;
  display: flex;
  -webkit-box-orient: horizontal; 
     -moz-box-orient: horizontal;
		  box-orient: horizontal; 
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;		  	  
}

.content {
	min-height: 43.75em;
	min-width: 60em;
	height: auto;
	width: 80%;	
	margin: 0 auto;
	padding: 0.375em 0.75em  ;
}

.box{
	
	width: 16em;
	height: 21em;
	color: black;
	margin: 10em auto;
	padding: 1.2em 1.5em;
	box-shadow: 0 0.06em 0.375em rgba(50,50,50,0.7);
	border-radius: 0.625em;
	background-image: -webkit-linear-gradient(top, rgba(20, 20, 20, 0.6),rgba(10, 10, 10, 0.6), rgba(20, 20, 20, 0.6));
    background-image:    -moz-linear-gradient(top, rgba(20, 20, 20, 0.6),rgba(10, 10, 10, 0.6), rgba(20, 20, 20, 0.6));
    background-image:     -ms-linear-gradient(top, rgba(20, 20, 20, 0.6),rgba(10, 10, 10, 0.6), rgba(20, 20, 20, 0.6));
    background-image:      -o-linear-gradient(top, rgba(20, 20, 20, 0.6),rgba(10, 10, 10, 0.6), rgba(20, 20, 20, 0.6));
	background-image:         linear-gradient(top, rgba(20, 20, 20, 0.6),rgba(10, 10, 10, 0.6), rgba(20, 20, 20, 0.6));
}
	

/* Form
-------------------------------------------------------------------------------*/

.form {
  
	margin: 0 auto;
	color: white;
	width: 90%;
	font-size: 1em ; 
	text-transform: capitalize;
}

.form_field {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 1em;
	font-size: 1.5em ; 
}

.label,
.input[type="text"],[type="password"],[type="submit"] {
	border-radius: 4px;
	padding: 0.4em;
	margin: 0em 0;
	font-family: open sans,'Source Sans Pro','Helvetica Neue',Helvetica, Arial, sans-serif;
}

.label{
	width: 1em;
	color: white;
	background: rgb(122, 184, 68);
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
	text-shadow: 0.1em 0.1em 0.1em rgba(80,80,80,0.8) ;
}

.input[type="password"],[type="text"],[type="submit"] {
	width: 100%;
}

.input[type="text"],[type="password"] {
	background: rgb(250, 250, 250 ) ;
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
	border: 0px;
	font-size: 0.6em ;   
	box-shadow: 0 0 0.2em rgba(30, 30, 30, 0.8) inset;
}

.input[type="text"]:focus, .input[type="text"]:hover, 
.input[type="password"]:focus, .input[type="password"]:hover {
	box-shadow: 0 0 0.75em rgba(85,169,188,0.9) inset;
}

.submit[type="submit"] {
	color: white ;
	text-transform: capitalize;
	font-size: 0.8em ; 
	cursor: pointer;
	margin-top: 1.2em;
	background: -webkit-linear-gradient(rgb(140, 201, 84), rgb(122, 184, 68));
	background: -moz-linear-gradient(rgb(140, 201, 84), rgb(122, 184, 68));
	background: -o-linear-gradient(rgb(140, 201, 84), rgb(122, 184, 68));
	background: linear-gradient(rgb(140, 201, 84), rgb(122, 184, 68));
	border-radius: 4px;
	box-shadow: 0 1px 1px rgba(120,120,120,0.5);
	border-top: 2px solid rgb(160, 221, 104);
	border-left: 1px solid rgb(160, 221, 104);
	border-bottom: 2px solid rgb(102, 164, 48);
	border-right: 1px solid rgb(102, 164, 48);
}

.submit[type="submit"]:focus, .submit[type="submit"]:hover {
  
	background: -webkit-linear-gradient(rgb(110, 171, 54), rgb(92, 154, 38));
	background: -moz-linear-gradient(rgb(110, 171, 54), rgb(92, 154, 38));
    background: -o-linear-gradient(rgb(110, 171, 54), rgb(92, 154, 38));
    background: linear-gradient(rgb(110, 171, 54), rgb(92, 154, 38));
    border-top: 2px solid rgb(130, 191, 74);
	border-left: 1px solid rgb(130, 191, 74);
	border-bottom: 2px solid rgb(72, 134, 18);
	border-right: 1px solid rgb(72, 134, 18);
}

.checkbox[type="checkbox"] {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 0.5em ;
	vertical-align: middle;
	cursor: pointer;
}

.checkbox[type="checkbox"]:checked {
	background: -19px top no-repeat;
}


/* Footer
-----------------------------------------------------------------------------*/
#footer {
	margin: -6.25em auto 0;
	min-width: 60em;
	height: 6.25em;
	background: #505050;
	position: relative;
}

#footercontainer {
	min-width: 60em;
	height: auto;
	width: 80%;	
	margin: 0 auto;
	padding: 0.375em 0.75em 0.375em 0.375em ;
	text-align: right;
	color: rgb(255, 255, 255);
	font-size: 0.75em;
	clear: both;
}