@charset "utf-8";

/********************************************************************************
 *
 * .menu-top-username .tx-hplfelogin-pi1 oben rechts
 *
 ********************************************************************************/

.tx-hplfelogin-pi1 {
	float: right;
	width: 100%;
	max-width: 500px;
}

.login-table {
	display: table-cell;
	width: 80%;
	text-align: center;
	padding: 10px;
	border: 0;
}

/**
 * Width 640 ...
 */
@media all and (max-width: 460px) {

	#hpl_felogin_container,
	#hpl_felogin_error {
		float: left;
		width: 100%;
		max-width: 460px;
	}
}

/* Login Containers */
#hpl_felogin_container {
	width: 100%;
	max-width: 500px;
	position: absolute;
/*	top: 230px; */
	top: 0;
	right: 0;
	text-align: center;
	border-top: 0;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	box-shadow: -10px 10px 10px  #000000;
	display: none;
	z-index: 1040;  /* Make it bigger .hpl-than ridiculously high z-index of Bootstrap! */
}

.hpl_felogin_error_popup {
	position: absolute;
	top: 0;
	text-align: center;
	border-top: 0;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	box-shadow: -10px 10px 10px  #000000;
	display: none;
	z-index: 1040;  /* Make it bigger .hpl-than ridiculously high z-index of Bootstrap! */
}

.isVisible {
	display: block;
}

.isHidden {
	display: none;
}

.hpl_felogin_top_bar {
	float: left;
	width: 100%;
	padding: 10px;
	background-color: inherit;
}

.hpl_felogin_header {
	float: left;
	width: calc(100% - 60px);
	margin-left: 20px;
	font-size: 20px;
	line-height: 32px;
	font-weight: bold;
}

div.close-icon {
	width: 20px;
	height: 20px;
}

div.close-icon,
div.close-icon:focus {
	float: right;
	background-image: url('../../../../Resources/Public/Images/Icons/close_20x20.png');
	background-repeat: no-repeat;
	margin-top: 5px;
}

div.close-icon:hover,
div.close-icon:active {
	float: right;
	background-image: url('../../../../Resources/Public/Images/Icons/close_20x20_down.png');
	background-repeat: no-repeat;
}

/*
@media all and (max-width: 767px) {
	.hpl_felogin_header {
		font-size: 32px;
	}

	div.close-icon {
		width: 32px;
		height: 32px;
	}

	div.close-icon,
	div.close-icon:focus {
		width: 32px;
		height: 32px;
		background-image: url('../../../../Resources/Public/Images/Icons/close_32x32.png');
	}

	div.close-icon:hover,
	div.close-icon:active {
		width: 32px;
		height: 32px;
		background-image: url('../../../../Resources/Public/Images/Icons/close_32x32_down.png');
	}
}
*/

::-webkit-input-placeholder { color:#ccc; }
::-moz-placeholder { color:#ccc; } /* firefox 19+ */
:-ms-input-placeholder { color:#ccc; } /* ie */
input:-moz-placeholder { color:#ccc; }


/********************************************************************************
 *
 *
 *
 ********************************************************************************/

@media all and (max-width: 400px) {
	#hpl_felogin_container {
		width: 100%;
		top: 40px;
	}
}

@media all and (max-width: 767px) {
	#hpl_felogin_container {
		top: 40px;
	}
}

@media all and (max-height:765px) {
	#hpl_felogin_container {
		top: 40px;
	}
}

#hpl_felogin_container #login-message {
	display: none;
}

#login-table {
	float: left;
	display: table-cell;
	width: 100%;
	text-align: center;
	padding: 10px;
/*	border: 1px solid red; */
}

#hpl_felogin_container a {
	/*	font-size: 12px; */
	padding: 0;
	color: inherit;
}

#hpl_felogin_container p {
	transition-delay: 0.6s;
}

#hpl_felogin_container form {
	height: 100%;
	width: 100%;
	display: inline;
}

#hpl_felogin_container form .controls {
	vertical-align: middle;
	text-align: center;
	width: 100%;
	margin-top: 5px;
	padding: 0;
}

#hpl_felogin_container form .controls input#permalogin {
	float: right;
	margin-left: 5px;
	width: auto;
}

#hpl_felogin_container #username-div,
#hpl_felogin_container #password-div {
	background-color: transparent;
	background-color: #ffffff;
}

#hpl_felogin_container form input[type="text"] {
	vertical-align: middle;
	text-align: left;
	background: transparent url(../../../../Resources/Public/Images/SiteDesign/login-username-300x30_transparent.png);
	background-repeat: no-repeat;
	width: 100%;
	height: 30px;
	border: none;
	outline: none;
	padding-left: 50px;
	color: #000;
	border: 1px solid #ccc;
	border-radius: 5px;
}

#hpl_felogin_container form input[type="password"]{
	vertical-align: middle;
	text-align: left;
	background:transparent url(../../../../Resources/Public/Images/SiteDesign/login-password-300x30_transparent.png);
	background-repeat: no-repeat;
	width: 100%;
	height: 30px;
	border: none;
	outline: none;
	padding-left: 50px;
	color: #000;
	border: 1px solid #ccc;
	border-radius: 5px;
}

#hpl_felogin_container form input[type="text"]:focus,
#hpl_felogin_container form input[type="password"]:focus {
}

#hpl_felogin_container form #showPassword {
	position: absolute;
	right: 15px;
}

#hpl_felogin_container #stayloggedin {
	margin: 20px 0;
	float: left;
	width: 100%;
/*	border: 1px solid green; */
}

#hpl_felogin_container #stayloggedin label {
	float: left;
	font-weight: normal;
	color: inherit;
}

#hpl_felogin_container #login-button {
	margin-top: 10px;
/*	border: 1px solid blue; */
}

@media all and (max-width: 767px) {
	#hpl_felogin_container #login-button > input {
		font-size: 20px;
		height: 40px;
		background-image: url('../../../../Resources/Public/Images/SiteDesign/shadow_header_bar_10x40_up_25.png');
	}

	#hpl_felogin_container #login-button > input:hover {
		font-size: 20px;
		height: 40px;
		background-image: url('../../../../Resources/Public/Images/SiteDesign/shadow_header_bar_10x40_down_50.png');
	}
}

#hpl_felogin_container .register-forgot {
	display: table-row;
	vertical-align: middle;
	text-align: center;
	width: 100%;
	height: 30px;
}

#hpl_felogin_container .register-forgot {
	display: table;
	vertical-align: middle;
	text-align: center;
	width: 100%;
	margin: 0px;
	margin-top:10px;
/*	border: 1px solid magenta; */
}

#hpl_felogin_container .register-forgot .register {
	display: table-cell;
	float: left;
	width: 300px;
	width: auto;
	vertical-align: middle;
}

#hpl_felogin_container .register-forgot .forgot {
	float: right;
	height: 100%;
	width: auto;
}

/* Login Button */
#hpl_felogin_container form .controls button {
	min-width: 150px;
	height: 30px;
	padding: 0 5px;
	border:none;
	outline:none;
	background-color: #ff0000;
	background-image: url('../../../../Resources/Public/Images/SiteDesign/shadow_header_bar_10x35_up_50.png');
	border-radius: 50px;
	color:#FFF;
	font-size: 14px;
}

/* Login Button */
#hpl_felogin_container form .controls button:hover,
#hpl_felogin_container form .controls button:active,
#hpl_felogin_container form .controls button:focus {
	border:none; outline:none;
	background-color: #ff0000;
	background-image: url('../../../../Resources/Public/Images/SiteDesign/shadow_header_bar_10x35_down_50.png');
}

/*
#hpl_felogin_container {
	position: absolute;
	visibility: hidden;
}
*/

/********************************************************************************
 *
 *.menu-top-username .tx-hplfelogin-pi1 oben rechts
 *
 ********************************************************************************/

/**
 * Error-handling
 */
#hpl_felogin_error {
	position: absolute;
	top: 50px;
	right: 0;
	height: 250px;
	/*	background-color: #fc0; */
	dissplay: none;
	z-index: 1050;  /* Make it bigger .hpl-than ridiculously high z-index of Bootstrap! */
	width: 100%;
	max-width: 500px;
}

@media all and (max-height:765px) {
	#hpl_felogin_error {
		top: 40px;
	}
}

#hpl_felogin_error .error-message {
	float: left;
	width: 100%;
	text-align: center;
	font-size: 1em;
	color: #000;
}

#hpl_felogin_error .register-forgot {
	display: table-row;
	vertical-align: middle;
	text-align: center;
	width: 100%;
	height: 30px;
}

#hpl_felogin_error .register-forgot {
	display: table;
	vertical-align: middle;
	text-align: center;
	width: 100%;
	margin: 0;
}

#hpl_felogin_error .register-forgot .register {
	display: table-cell;
	float: left;
	vertical-align: middle;
}

#hpl_felogin_error .register-forgot .forgot {
	display: table-cell;
	vertical-align: bottom;
	text-align: right;
	height: 150px;
}

#hpl_felogin_error .register-forgot .forgot a {
}

#error-close-icon {

}