* { 
	font-family: Ebrima;
	outline: none !important;
}


body { 
	background: #e3e4e8;
}

.spacer { 
	margin-top: 10%; 
}

.float { 
	float: left;
}

#logo { 
	width: 50%;
	padding-top: 0%;
}

header #title { 
		 display: inline-block;
		 font-family:Ebrima;
		 position:relative;
		 font-size: 40pt;
		 display: table-cell;
		 vertical-align: middle;
}

.clear { 
	clear: both;
}


header { 
	display: table;
	position: relative;
	top: 100%;
	width: 100%;
	padding: 1% 0.0877%;
	background: #10b2f2;
	background: -webkit-linear-gradient(-180deg,#10b2f2,#63d2ff);
	box-shadow: 1px 1px 2px #888888;
}

#wrapper {  
	font-family:Ebrima;
	position: relative;
	width: 100%;
	padding-top: 1%;
	padding-bottom: 2%;
	background-color: #ffffff;
	background: -webkit-linear-gradient(90deg,#ffffff,#f3f3f3);
	box-shadow: 1px 1px 2px #888888;
}
		 
#title_login {  
	display:block;
	margin-left: auto;
	margin-right: auto;
	width: 10%;
	font-size: 20pt;
}


input[type='text'],
input[type='password'],
input[type='submit'], label { 
	display: block;
	margin: 1%;
	padding: 1.5%;
	margin-left: auto;
	margin-right: auto;
	outline: none;	
}

	
input[type='text'], input[type='password'],
input[type='email'], input[type='date'],input[type='time'] {
	padding: 1.5%;
	cursor: text;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #bbb;
	background: white;
	box-shadow: 1px 1px 2px #888888;
	border: none;
	border-top: 2px solid white;
	border-bottom: 2px solid white;
	outline: none;
}

input[type='text']:focus, input[type='password']:focus, input[type='email']:focus
				{
				padding: 1.5%;
				cursor: text;
				-webkit-appearance: none;
			    -moz-appearance: none;
				appearance: none;
				border: 1px solid #10b2f2;
				background: white;
				border: 1px solid #bbb;
				border: none;
				border-top: 2px solid white;
				border-bottom: 2px solid gray;
				outline: none;
}
				
		
				  
					  
#resetPW, #Welcome { 
	display:block;
	margin-left: auto;
	margin-right: auto;
	width: 17%;
	font-size: 12pt;
}

#Welcome { 
	font-size: 14pt; 
}		   
		   
footer { 
		 position: relative;
		 margin: 0%;
		 padding: 1% 0%;
		 padding-left: 1%;
		 top: 100%;
		 width: 99%;
		 background: #727375;
		 color: white;
		 box-shadow: 1px 1px 2px #888888;
}


.viewLogin {  
	position: absolute;
	width: 45%;
	left: 25%;
}

			 
a:active {
	color: #63d2ff;
}


a { 
	color: #10b2f2;
}

nav a p  {  
	float: left;
	font-weight: bold;
	margin-right: 2%;
	border: solid white;
	padding-right: 5%;
	text-align: center;
	text-decoration: none;
	color: white;
	background: #10b2f2;
}
/*----------------------------	Style Login-Button  ----------------------------*/
.btn {
  position: relative;
  display: block;
  margin: 10px auto;
  padding: 0;
  overflow: hidden;
  border-width: 0;
  outline: none;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  background-color: #103E63;
  color: #ecf0f1;
  transition: background-color .9s;
  cursor: pointer;
}

.btn:hover, .btn:focus {
  background-color: #265880;
  cursor: pointer !important;
}
.btn span {
  display: block;
  padding: 12px 24px;
  cursor: pointer;
}

.btn:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  cursor: pointer;
  display: block;
  width: 0;
  padding-top: 0;
    
  border-radius: 100%;
  
  background-color: rgba(132, 183, 224,.6);
  
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.btn:active:before {
  width: 120%;
  padding-top: 120%;
  transition: width .5s ease-out, padding-top .5s ease-out;
  cursor: pointer;
}	
.btn:active { box-shadow: 2px 2px 3px #888888;}

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  }