@import url("global_styles.css");

body {
}
	
.leftmargin1em {
	margin-left: 1em;	
}

.loginDivBase {
	width: 50%;
	display: block;
	margin-left: auto;
	margin-right: auto;

	height: auto;
	background-color: #eee;
	font-size: 1.3em;
		
	padding: 1.5em;

	position: absolute; 
	left: 0; 
	right: 0;
}

#loginForm {
	opacity: 1; 
}

#confirmForm {
	opacity: 0; 
}

.hDist1em { 
	padding-top: 1em; 
}

.hDist05em { 
	padding-top: 0.5em; 
}

.inputField { 
	width: 100%; 
}

.label { 
	width: 6.5em; 
	padding-top: 0.1em 
}

.inputContainer { 
	display: block; 
}

.forgotPasswordContainer {
	float: right; 
	font-size: 0.8em; 
	margin: 1.2em 0 0 0
}

@media (min-device-width: 401px) and (max-width: 600px) and (max-resolution: 100dpi) {
	/** ON COMPUTER SCREENS (LARGE WIDTH) **/
	
	body {
	}
	
	.loginDivBase {
		width: 70%;
	}
	
	.loginDiv { 
		min-width: 200px; 
		margin-top: 2em; 
	}
	
	.labelResp { 
		display: block; 
	}
}

@media (min-device-width: 401px) and (min-width: 600px) and (max-resolution: 100dpi) {
	/** ON COMPUTER SCREENS (SMALL WIDTH) **/
	
	body {
	}
	
	.loginDiv { 
		max-width: 500px; 
		margin-top: 3em; 
	}
	
	.labelResp { 
		float: left; 
	}	
	
	.inputContainerResp { 
		margin-left: 6.5em; 
	}
}

@media (max-device-width: 400px) and (max-aspect-ratio: 13/9) and (min-resolution: 100dpi) {
	/** PORTRAIT ON DEVICES **/
	
	body {
		font-size: 1em;
	}
	
	.loginDivBase {
		width: 100%;
	}
	
	.loginDiv{width: 100%;}
	
}

@media (max-device-height: 400px) and (min-aspect-ratio: 13/9) and (min-resolution: 100dpi) {
	/** LANDSCAPE ON DEVICES **/
	
	body {
		font-size: 1em;
	}
	
	.labelResp { 
		float: left; 
	}	
	
	.inputContainerResp { 
		margin-left: 6.5em; 
	}
	
	.loginDivBase {
		width: 100%;
	}
	
	.loginDiv{width: 100%;}
	
}
	
	
@media only screen and (min-device-width : 320px) and (max-device-width : 640px) and (max-aspect-ratio: 13/9) {
	.loginDiv { width: 100%;}
}

@media only screen and (min-device-width : 320px) and (max-device-width : 640px) and (min-aspect-ratio: 13/9) { 
	.loginDiv { width: 100%;}
}

@media only screen and (min-device-width : 641px) and (max-device-width : 1024px) and (max-aspect-ratio: 13/9) {
	.loginDiv { margin-top: 2em;}
}

@media only screen and (min-device-width : 641px) and (max-device-width : 1024px) and (min-aspect-ratio: 13/9) { 
	.loginDiv { margin-top: 2em;}
}