@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,900,400italic,300italic,300);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700,800);

@clr-dark-main: #272727;
@clr-yellow-main: #285e8e;

body {

	font-family: "Open Sans", Arial, sans-serif;

}

* {

	outline: 0;

}

/* SignIn Container */
#signinContainer {

	width: 850px;
	height: 450px;
	margin: 150px auto auto auto;

	#featureOverview {
	
		width: 450px;
		height: 450px;
		float: left;
				
		position: relative;
		
		overflow: hidden;
		
		.featureView {
			
			overflow: hidden;
			height: 100%;
			width: 100%;
		
			img {
			
				width: 450px;
				height: 450px;
			
			}
			
			.ftDescription {
			
				height: 175px;
				width: 100%;
				bottom: 0px;
				left: 0;
				position: absolute;
				
				box-sizing: border-box;
				padding: 25px;
				
				color: #FFF;
			
				span.heading {
				
					font-size: 18px;
				
				}
				
				.ft-content { 
	
					font-size: 11px;
					padding-top: 15px;
					line-height: 14px;
					
					position: relative;
					
					span.desc {
						
						font-size: 11px;
					
					}
										
					button.learn_more {
					
						padding: 7.5px 10px;
						background: #FFF;
						
						position: absolute;
						bottom: -40px;
						right: -10px;
						
						border: none;
						cursor: pointer;
						
					}
					
					button.learn_more:hover{ 
						
						background: @clr-dark-main;
						color: #FFF;
					
					}
					
				}
			
			}
			
		}
		
	}
	
	#signinArea {
	
		width: 350px;
		height: 450px;
		float: right;
	
		position: relative;
		
		img#loginApplicationLogo {
		
			width: 250px;
			display: block;
			margin: 20px auto 30px auto;
		
		}
		
		img#loginApplicationLogo.wd {
		
			width: 190px;
		
		}
		
		.signinForm {
				
			padding-left: 11.5px;
				
			input[type="text"], input[type="password"] {
			
				border: 1px solid #999;
				padding: 10px 12.5px;
				font-family: "Open Sans", Arial, sans-serif;
				
				color: @clr-dark-main;
				
				outline: 0;
				
				width: 300px;
			
			}
			
			input[type="password"] {
			
				width: 190px;
				float: left;
			
			}
			
			input[type="submit"] {
			
				width: 100px;
				float: left;
				
				margin-left: 10px;
				
				width: 100px;
				padding: 12px 12.5px;
				
				background: @clr-dark-main;
				border: none;
				
				color: #FFF;
			
			}
			
			input[type="submit"]:hover {
		
				cursor: pointer;
				color: @clr-dark-main;
				background: @clr-yellow-main;
		
			}
		
		}
		
		#messageBox {
		
			height: 60px;
			width: 100%;
			background: @clr-dark-main;
			
			position: absolute;
			bottom: 150px;
			left: 0;
			
			box-sizing: border-box;
						
			line-height: 60px;
			padding-left: 25px;
			
			span.msg {
			
				font-size: 12px;
			
			}
					
		}
		
		#bottomContent {
		
			height: auto;
			width: 100%;
			background: @clr-dark-main;
			
			position: absolute;
			bottom: 0;
			left: 0;
			
			box-sizing: border-box;
			padding: 25px;
			
			color: #FFF;
			
			address {
			
				font-style: normal !important;
				line-height: 14px;
				
				b {
				
					font-size : 18px;
				
				}
			
				span {
				
					font-size: 14px;
				
				}
			
			}
			
		}
	
	}
	
}

/* Footer */
#footer {

	width: 850px;
	height: 25px;
	margin: 50px auto;
	
	font-size: 10px;
	
	.copyright {
	
		float: left;
	
	}
	
	.link_section {
	
		float: right;
		
		a {
			
			margin-left: 10px;
			color: @clr-dark-main;
			text-decoration: none;
		
		}
		
		a:hover {
		
			color: @clr-yellow-main;
		
		}
	
	}

}

/* Theme Colors */
.bg-color-white {
	
	background: #FFF;

}

.bg-color-blue {

	background: @clr-yellow-main !important;

}

/* Simple CSS "Hacks" */
.clr {

	clear: both;

}