html {
	background: #edece8 url(https://www.portlandoregon.gov/assets/images/bg-body.gif);
}
body {
	font: 12px/1.3 sans-serif;
	margin: 0;
	padding: 0;
}
a {
	border-bottom: 1px dotted #79c7dc;
	color: #2289a8;
	text-decoration: none;
}
.button {
	background: #dee0e2;
	border: 1px solid #999;
	border-top: 1px solid rgba(0, 0, 0, 0.25);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), inset 0 2px 10px -2px rgba(255, 255, 255, 0.7);
	color: #333;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	-moz-border-radius: 3px;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), inset 0 2px 10px -2px rgba(255, 255, 255, 0.7);
	text-shadow: 0 1px 0 #fff;
	-webkit-border-radius: 3px;
	-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), inset 0 2px 10px -2px rgba(255, 255, 255, 0.7);
	margin: 0 5px 0 0;
	padding: 7px 10px 6px;
}
#login {
	min-width: 550px;
}
#login input[type=submit],
#login button.button {
	display: block;
	margin: 12px 0;
}
#login .inline input[type=submit],
#login .inline button.button {
	display: inline;
	margin-right: 40px;
}
#header-image {
	background:url('https://www.portlandoregon.gov/assets/images/Header-Left.gif') no-repeat left top;
	height:60px;
	max-width: 940px;
	margin: 0 15px;
}
#login-wrapper {
	width: 100%;
}
#login .login-form {
	margin: 24px auto 0;
	padding: 24px 20px 12px;
	max-width: 920px;
	background: #FFF;
}
#login .login-form form {
	padding: 0;
	overflow: auto;
}
#login .row {
	margin-bottom: 15px;
}
#login .footer {
	margin: 0 auto;
	max-width: 960px;
}
#login #bannerImages {
	width:auto;
	margin: 0 auto 40px;
	padding: 0;
}
#login .tabular {
	margin:0 auto;
}
#login-wrapper h1 {
	border-top: 4px solid #c9c9c9;
	border-bottom: 1px solid #e8e8e8;
	font-family:'Vollkorn', Georgia, serif;
	font-size: 22px;
	font-weight: normal;
	line-height: 1em;
	margin: 0 0 1em;
	padding: 12px 0px 6px 0px;
}
#login h3 {
	margin: 0px 0px 12px 0px;
}
#login .note {
	margin: 6px 0px;
	font-size: 11px;
	color: #777;
}
#login label {
	display:block;
	margin-bottom: 4px;
}
#login label.inline {
	display:inline;
	margin-bottom: auto;
}
#login input[type=text], #login input[type=password] {
	font-size: 1.2em;
	padding: 6px;
	max-width: 220px;
}
#login span.required {
	color: red;
}
#login #sso-form-1, #login #sso-form-2 {
	display:inline-block;
	vertical-align: top;
	width:46%;
	padding-left: 12px;
}
#login #sso-form-1 {
	border-right: 1px solid #bababa;
	margin: 0 12px 0 0;
	padding: 0 12px 0 0;
}
#login #sso-form-1 form {
	padding:0;
}
#login .footer p {
	margin: 32px 0 0;
	text-align: center;
	background: #fff;
}
#login .footer .footerDescription {
	margin:0 10px;
}
#login .footer.center {
	text-align: center
}

/** For high-density screens **/
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
	#city-logo {
/*
		background:url('http://dev.portlandoregon.gov/assets/images/Header-Left@2x-iphone.gif') no-repeat left top;
		background-size: 390px 60px;
*/
		background:url('http://dev.portlandoregon.gov/assets/images/city-of-portland-seal@2x-iphone.png') no-repeat left top;
		background-size: 300px 37px;
	}
}

/** For mobile layout
	 Portrait/landscape selector a la http://abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/
*/
@media only screen and (min-width : 320px) and (max-width : 640px) and (max-aspect-ratio: 13/9), /* portrait styles here */
 		 only screen and (max-width : 550px) and (min-aspect-ratio: 9/13) { /* also for landscape devices with width less than 550px */
	#login {
		min-width: 0;
	}
	#login #main-header {
		margin-bottom: 10px;
		min-width: 0;
	}
	#login-wrapper h1 {
		margin-bottom: 24px;
		padding: 12px 0px;
	}
	#login .login-form {
		padding: 24px 24px 0px 24px;
		min-width: 0;
	}
	#login ul li {
		margin-left: 1.2em;
	}
	#login div.footer {
		margin-bottom: 6px;
	}
	#login a.footer:nth-child(2) {
		display: block;
	}
	#login #sso-form-1, #login #sso-form-2 {
		width: 100%;
		display: block;
		float: none;
	}
	#login input[type=text], #login input[type=password] {
		max-width: none;
		width: 254px;
		font-size: 1.4em;
	}
	#login input#email {
		width: 95%;
	}
	#login input#ssn {
		width: 75px;
	}
	#login input[type=submit] {
		display:block;
		min-width: 50%;
		font-size: 1.3em;
		margin: 24px 0;
	}
	#login button.button {
		display: block;
		font-size: 1.3em;
		margin: 24px 0;
	}
	#login #sso-form-1 {
		border-right: none;
		border-bottom: 1px solid #bababa;
		margin: 0 0 12px 0;
		padding: 0 0 12px 0;
	}
	#login #sso-form-2 {
		padding: 0px;
	}
	#login #sso-form-2 p:nth-child(3) {
		display:none;
	}
}