* { /* Our styling which will be applicable to everything */
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-weight: 100;
	padding: 0px;
	margin: 0px;
	color: #ffffff;
 }
 
 /* This is my background */	


/* H3 is the heading for each form */
h3 { 
	font-size: 29px; 
	text-align: center; 
	color: #FFFFFF;
	} 

/**** This is purely for my colour changing demo ***/
.color-changer { width: 350px; height: auto;	top: 0;	margin: 0px auto;	}
.static { width: 30px; height: 30px; padding: 20px; margin-right: 10px;}
#blue { background-color: #002E45; }
#red { background-color: #FE4D4D; }
#orange { background-color: #FFAD33; }
#green { background-color: #002E45; }
#purple { background-color: #755D9F; }
#brown { background-color: #7D4547; }
#grey { background-color: #292929; }
/**** Enf of colour changing demo ****/

/* This is the main container for the Login box, control the colour here */	
#container { 
	background-color: #002E45;
	width: 500px;
	height: auto;
	margin: 90px auto;
	border-radius: 2px;
	padding: 30px 0px 10px 0px;
	box-shadow: 0 0 20px rgba(0,0,0,.3);
	
	 -webkit-animation: fadeInDown 2s; /* Safari and Chrome */
    -moz-animation: fadeInDown 2s; /* Firefox */
    -ms-animation: fadeInDown 2s; /* Internet Explorer */
    -o-animation: fadeInDown 2s; /* Opera */
    animation: fadeInDown 2s;
	}
	
/* This is the small grey line at the bottom and underneath our heading */
hr {
  border: 1px solid #D8D8D8;
  width: 80%;
  margin: 20px auto;
  opacity: 0.3;
}

/* .login is given to every input box on ALL of the forms. */
.login {
	display: inline-block;
	width: 80%;
	padding: 10px;
	margin: 20px 0px 0px 52px;
	font-size: 14px;
	color: #000000;
	border: 2px solid rgba(200, 54, 54, 0.1); 
			
	transition: border-color 0.3s;
	-o-transition: border-color 0.3s;
	-ms-transition: border-color 0.3s;
	-moz-transition: border-color 0.3s;
	-webkit-transition: border-color 0.3s;
}

/* When you hover over an input box */
.login:hover {
	border: 2px solid rgba(200, 54, 54, 0.4); 
}

/*When the input box has "focus", e.g. the cursor has clicked on it or you have TAB'ed to it */
.login:focus {
	border: 2px solid rgba(200, 54, 54, 0.8); 
}

/* Turn the mouse into a hand when hovering over the icons */
.fa:hover { cursor: pointer; }

/* This is the icon for revealing our password */
.reveal { 
	display: inline;
    position:relative;
    left:-35px;
	opacity: 0.8;
	color: #000000;
}

/* The checkbox to select "Remember me" */
#remember {
	display: inline;
	margin: 20px 0px 0px 186px;
	}
	
/* The label that goes along side the "Remember me" checkbox */
#rememberLabel {
	display: inline;
}

/* Even though this is called btnLogin, it is the button that appears on every form */
#btnLogin {
	display: block;
	padding: 15px;
	width: 240px;
	background-color: #666666;
	margin: 20px auto 0px;
	text-align: center;
	text-decoration: none;
	
	transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	}
	
/* When you hover over the button */
#btnLogin:hover {
	background-color: #333333;
	opacity: 0.8;
}

/* More options are the links to the other forms/homepage */
.moreOptions {
	margin: 0px 0px 15px 70px;
}

/* Each link individual */
.moreOptions  span{
	margin: 0px 0px 0px 20px;
	font-size: 14px;
}

/* When you hover over each option */
.moreOptions span:hover {
	cursor: pointer;
	opacity: 0.6;
	}

/* The forgotten password link */
.forgotten { 
		margin: 20px 0px 0px 180px;
		font-size: 14px;
		}
	
/* When you hover over the forgotten password link */
.forgotten:hover {
	cursor: pointer;
	opacity: 0.6;
	}	

/* The registration form container */
#container_reg { 
	display: none;
	background-color: #359ACE;
	width: 500px;
	height: auto;
	margin: 90px auto;
	border-radius: 2px;
	padding: 30px 0px 10px 0px;
	box-shadow: 0 0 20px rgba(0,0,0,.3);
	
	 -webkit-animation: fadeInDown 2s; /* Safari and Chrome */
    -moz-animation: fadeInDown 2s; /* Firefox */
    -ms-animation: fadeInDown 2s; /* Internet Explorer */
    -o-animation: fadeInDown 2s; /* Opera */
    animation: fadeInDown 2s;
	}

/* First name and last name input boxes on the registration form */
#fname, #lname {
	width: 38.5%;
	display: inline;
	margin: 0px;
	}

/* First name only options */
#fname { margin: 0px 10px 0px 52px; }

/* The icons for the tool tips */
#email_icon, #user_icon, #lock_icon {
	display: inline;
    position:relative;
    left:-35px;
	opacity: 0.6;
	color: #000000;
}

/* The gender select box option */
.genderSelect option { color: #000000; }
.genderSelect .sel { color: #ccc; }

/* The container for the forgotten password form */
#container_forg { 
	display: none;
	background-color: #359ACE;
	width: 500px;
	height: auto;
	margin: 90px auto;
	border-radius: 2px;
	padding: 30px 0px 10px 0px;
	box-shadow: 0 0 20px rgba(0,0,0,.3);
	
	 -webkit-animation: fadeInDown 2s; /* Safari and Chrome */
    -moz-animation: fadeInDown 2s; /* Firefox */
    -ms-animation: fadeInDown 2s; /* Internet Explorer */
    -o-animation: fadeInDown 2s; /* Opera */
    animation: fadeInDown 2s;
	}
	
/**************************************************/	
/*** Key frames are used for the animations *******/
/*** Google CSS Animation for more possible *******/
/******************* options **********************/
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
#btnLogin {
    background-color: #ffffff;
}
body {
    background-image: url(bg.jpg);
    background-repeat: repeat-x;
    background-size: cover;
}