#login-overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5);
	overflow-y: scroll;
	z-index: 10000;
}

#login-wrapper {
    max-width: 540px;
    min-width: 350px;
    top: 10%;
    margin: auto;
    width: 100%;
}

#close-login-box-button {
	width: 24px;
    height: 24px;
    border: none;
    background: transparent url("../img/CLOSE.png") no-repeat;
    background-size: 24px 24px;
    position: absolute;
    top: 18px;
    right: 18px;
    margin: 0px;
    padding: 0px;
}

.login-box {
    background-color: rgb(37,42,54);
    max-width: 540px;
    width: 100%;
    min-width: 350px;
    top: 5%;
    position: absolute;
}

.login-box > div, .page-piipe-login div.login-form, .page-piipe-register div.create-account-form{
	width: 70%;
	margin-left: 15%;
    margin-right: 15%;
}

.login-box, .login-box a {
	color: #fff;
}

.page-piipe-login, .page-piipe-register, .page-piipe-login a, .page-piipe-register a{
	color: #000;
}


.login-header {
	text-align: center;
	margin-bottom: 36px;
	margin-top: 21px;
	font-weight: bold;
	font-size: 18px;
}

.login-box-info {
	text-align: center;
	margin: 0 auto 36px;
}

.login-box-info > span {
	font-weight: 300;
	font-size: 16px;
}

@media(max-width: 688px) {
	.login-wrapper { margin: 0 18px; }
}

.login-box .error-message, .page-piipe-login .error-message, .page-piipe-register .error-message{
	text-align: center;
	padding: 12px;
	margin-bottom: 12px;
}

.login-box.login-error .login-form .error-message {
	display: block;
}

.register-error.register-error-name-empty .create-account-form .error-message-name-empty {
	display: block;
}
.register-error.register-error-mail-empty .create-account-form .error-message-mail-empty {
	display: block;
}
.register-error.register-error-password-empty .create-account-form .error-message-password-empty {
	display: block;
}
.register-error.register-error-name-already-in-use .create-account-form .error-message-name-already-in-use {
	display: block;
}
.register-error.register-error-mail-already-in-use .create-account-form .error-message-mail-already-in-use {
	display: block;
}
.register-error.register-error-password-not-equal .create-account-form .error-message-password-not-equal {
	display: block;
}
.register-error.register-error-password-too-short .create-account-form .error-message-password-too-short {
	display: block;
}
.register-error.register-error-mail-not-valid .create-account-form .error-message-mail-not-valid {
	display: block;
}

.login-box input, .login-box button,
.page-piipe-login form input, .page-piipe-login form button, 
.page-piipe-register form input, .page-piipe-register form button {
	width: 100%;
	margin-bottom: 20px;
}

.login-box button, .page-piipe-login form button, .page-piipe-register form button {
	background-color: rgb(51, 143, 251);
	margin-top: 18px;
	font-size: 16px;
}

.login-box-footer {
	width: 80%;
	text-align: center;
	margin: auto;
}

.login-box-footer span {
	font-size: 16px;
	font-weight: 300;
}

.login-box-footer.create-footer {
	margin-bottom: 20px;
}

.login-box-footer.login-footer {
	margin-bottom: 25px;
}

.footer-link {
	text-align: center;
	padding-bottom: 18px;
	font-size: 16px;
	color: rgb(200,200,200);
}

.footer-link a {
	color: rgb(200,200,200);
}

#login-overlay, #login-overlay .create-account-form, #login-overlay .login-form, #login-overlay .password-reset-form {
	display: none;
}

#login-overlay.create-active, #login-overlay.login-active, #login-overlay.password-reset-active {
	display: block;
}

#login-overlay.create-active .create-account-form {
	display: block;
}

#login-overlay.login-active .login-form {
	display: block;
}

#login-overlay.password-reset-active .password-reset-form {
	display: block;
}

.facebook-connect-button {
	background-color: rgb(32,68,119);
	margin-bottom: 18px;
    padding: 4px 16px;
    text-align: center;
    text-transform: uppercase;
}

.facebook-connect-button img {
    height: 30px;
    margin-right: 16px;
    margin-left: -16px;
}
a.facebook-connect {
	color: #fff;
	font-size: 16px;
    vertical-align: middle;
    line-height: 36px;
}

.fb-seperator {
	margin-bottom: 25px;
}

.fb-seperator span {
    width: 50px;
    display: inline-block;
    text-align: center;
}

.fb-seperator:before, .fb-seperator:after {
	content: '';
    width: calc((100% - 60px)/2);
    background: rgba(255,255,255,0.2);
    height: 2px;
    display: inline-block;
    vertical-align: middle;
}