body{font-size:62.5%; color:#333; font-family: 'Open Sans', sans-serif;}
p{font-size:1.2em; line-height:1.8em; margin:0 0 1em 0; letter-spacing: 0.4px; -webkit-font-smoothing:antialiased; color:#a3a4a9}

a, a:hover { color:#34373c;	
	transition: all 0.2s ease-in-out;
	-moz-transition:  all 0.2s ease-in-out; /*mozilla firefox*/
	-ms-transition:  all 0.2s ease-in-out;  /* IE9 */
	-webkit-transition:   all 0.2s ease-in-out;
	-o-transition:   all 0.2s ease-in-out; /* opera */
}
	
a:hover { text-decoration:underline;}

h1 { margin-top:0;}


input[type="text"], input[type="password"] { margin-bottom:12px;}


/* =============================================================================
   Header Area (inc Navigation)
   ========================================================================== */

header{clear:both; height:auto; width:100%; z-index:8; top:0; min-height:106px; overflow:auto; float:none}
header #login-logo{ text-indent:-9999em; display:block; }




/* =============================================================================
   Main Structure Area
   ========================================================================== */
#outer { width:94%; margin:10px auto; position:relative; overflow:auto;}
.container{width:100%; margin:0 auto; background:#fff; position:relative;}
.content {width:100%; }
.content .title { background:#fff; position:relative;}
.content .summary { background:#f6f6f6; overflow:auto;}

section { padding:36px 32px; margin:0 auto;  background:#efefef; display:block; width:auto; }

form { margin:0; width:98%;}
form input[type="text"], form input[type="password"] { background: #dfe5ed; border: 1px solid #d3dae2; width:100%; display:block;}
.btn { width:94%; display:block; margin:0;}
input[type=text] {}

.forgotten-pass {text-align: center; padding: 20px 0px;}
.forgotten-pass a {font-size: 1.1em; text-decoration:underline;}

/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design.
   This example overrides the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 320px) {
}

@media only screen and (min-width: 480px) {
	
	#outer { width: 480px; margin-top:60px}
	section { padding:60px 90px 70px;}
}

@media only screen and (min-width: 768px) {
		#outer { width: 500px; margin-top:80px}
}

@media only screen and (min-width: 1024px) {
	header #logo{ text-indent:-9999em; display:inline-block; z-index:10; margin:0; width:20%; float: left; height:120px;}
	header .title {height:120px; position:relative; top:0; bottom:0;}
	header .title h1 { padding-left:226px;}
	
}