#login-page{
	position: absolute;
	width: 700px;
	margin-left: 100px;
	margin-right: 100px;
}

#top-keystone-text{
	font-family: sans-serif;
	display: inline-block;
	font-weight: bold;
	float: right;
	padding-top: Calc(105px - 1rem);
	font-size: 1.25rem;
	color:#A84848;
}

.login-about{
	padding-top: 1rem;
	font-size:0.85rem;
}

#login-columns{
	margin-top: 2rem;
	height: 25rem;
	border-spacing: 8px;
}

.login-column{
	width: 210px;
	font-size:0.85rem;
	padding: 0.5rem;
	vertical-align: top;
	position: relative;
}

.login-column.left-column{
	background-color: #FFFCCE;
}
.login-column.center-column{
	background-color: #D3FFFC;
}
.login-column.right-column{
	background-color: rgb(220, 255, 180);
}

.login-column .column-title{
	color: #A84848;
	font-weight: bold;
}
.login-column ul{
	margin-left: 0.5rem;
	font-size: 0.75rem;

	-moz-padding-start: 1rem;
	-webkit-padding-start:  1rem;
	-khtml-padding-start: 1rem;
	-o-padding-start:  1rem;
	padding-start: 1rem;
}
.login-column li{
	padding-bottom: 0.75rem;    
	padding-bottom: 1rem;
    padding-top: 0.25rem;
}

.right-column .login-title{
	padding-top: 1rem;
	padding-bottom: 0.2rem;
	font-size: 0.75rem;
	font-weight: bold;
	text-align: center;
	width: 100%;
}

.right-column input{
	width:90%;
	margin: 0 5%;
	text-align: center;
	font-size: 1rem;
}

#login-button{
	margin-top: 1.5rem;
}

#login-remember-text{
	display: inline-block;
	font-size: 0.75rem;
	padding-left: 0.25rem;
	width: 90%;
	cursor: pointer;
}
#login-remember{
	display: inline-block;
	margin-right: 0;
	margin-top:0.5rem;
	width: 1rem;
	height: 0.85rem;
	cursor: pointer;
}

#system-message{
	text-align: center;
    padding-top: 1rem;
    font-weight: bold;
    font-size: 1.2rem;
    color: #FF4444;
    text-shadow: 1px 1px 0px black;
}

.login-fail-message{
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    font-size: 0.75rem;
    left: 220px;
    /*height: 35px;*/
    width: 8.5rem;
    position: absolute;
    z-index: 10;
    background-color: #EE5E41;
    padding: 0.25rem;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.6);
    opacity: 1;
}
.login-fail-message.visible-false{
    opacity: 0;
}

.login-fail-message.username-error{
	top: 62;
}
.login-fail-message.password-error{
	top: 115;
}
.login-fail-message.captcha-error{
	top: 152;
	left: 200;
}

#password-button{
	width: 90%;
    margin: 0 5%;
    text-align: center;
    font-size: 0.75rem;
    margin-top: 
}
#password-forgot-text{
	width: 90%;
    margin: 0 5%;
    text-align: center;
    font-size: 0.65rem;
    margin-bottom: 0.5rem;
    margin-top: 2.5rem;
}
.login-anchor{
	display: block;
	width: 90%;
    margin: 0 5%;
    text-align: center;
    text-decoration: none;
	position: absolute;
	bottom: 20;
}

.animated { 
    -webkit-animation-duration: 0.7s; 
    animation-duration: 0.7s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 
} 

@-webkit-keyframes shake { 
    0%, 100% {-webkit-transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} 
} 
@keyframes shake { 
    0%, 100% {transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 
    20%, 40%, 60%, 80% {transform: translateX(10px);} 
} 
.shake { 
    -webkit-animation-name: shake; 
    animation-name: shake; 
}

#password-forgot-message{
    top: 285;
    background-color: #99DD66;
}

.login-tab{
	margin: -0.5rem;
	text-align: center;
	padding: 0.5rem;
	display: inline-block;
	width: 50%;
	height: 2.8rem;
	cursor: pointer;
}

.guest-tab{
	float: right;
	padding-top: 1rem;
}

.guest-tab.selected-true{
	padding-right: 1.25rem;
	padding-left: 0.25rem;
}
.existing-tab.selected-true{
	padding-left: 1.25rem;
	padding-right: 0.25rem;
}

.login-tab.selected-true{}
.login-tab.selected-false{
	background-color: rgba(0,0,0,0.3);
}

.guest-tab.selected-false{
	box-shadow: inset 3px -3px 7px rgba(0,0,0,0.4);
}
.existing-tab.selected-false{
	box-shadow: inset -3px -3px 7px rgba(0,0,0,0.4);
}

.verify-text{
	font-size: 0.75rem;
	text-align: center;
	padding: 0.25rem 0.5rem;
	margin-top: 0.5rem;
}

/* For styling ReCaptcha to make it smaller, so the white borders don't show*/
.g-recaptcha iframe{
	width: 159px;
    height: 139px;
    margin-left: 25px;
}