html, body, div, span, applet, object, iframe, header, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100% vertical-align:baseline;}

html {
	background:#899aae url("../images/blue_back_ground21.jpg") left top repeat-x;
	background:-webkit-linear-gradient(center bottom, #899AAE 0%, #D9D7D8 40%, #426288 100%);
	background:   -moz-linear-gradient(center bottom, #899AAE 0%, #D9D7D8 40%, #426288 100%);
	background:     -o-linear-gradient(center bottom, #899AAE 0%, #D9D7D8 40%, #426288 100%);
	min-height:100%; overflow-y:scroll; font:81.25%/1 Helmet, Freesans, sans-serif; -webkit-text-size-adjust:100%;}

/* Default spacing */
p, ul, ol, dl, table, blockquote, h1, h2, h3, h4, h5, h6 {margin:15px 0 2px;}
.join {margin-top:2px;}

a {color:#0076C0; text-decoration:none;}
	a:hover {text-decoration:underline;}
acronym[title] {cursor:help;}
button:hover {cursor:pointer;}
h1 {font-size:1.75em;}
h2 {font-size:1.3em;}
	h2.small {font-size:1.4em;}
h3 {font-size:1.2em;}
var {font-family:"Courier New", Courier, monospace; font-size:1em; font-style:normal; line-height:1;}
body {background:#FFF url("../images/header_image.png") left top no-repeat; color:#191919; margin:18px auto; width:980px;}
ul {margin-left:28px;}

.hidden {display:none;}

/* Rounding */
.roundAll    {border-radius:6px;}
.roundTop    {border-radius:6px 6px 0 0;}
.roundBottom {border-radius:0 0 6px 6px;}
.roundLeft   {border-radius:6px 0 0 6px;}
.roundRight  {border-radius:0 6px 6px 0;}

/* Box Clearing */
.clear:after {content:"."; display:block; height:0; font-size:0; clear:both; visibility:hidden;}
.clear {display:inline-block;}

/* Message Boxes */
.messagebox {background:#EEE; margin:15px auto 2px; overflow:auto; padding:10px; text-align:center; width:60%;}
	.messagebox > h2 {color:#FFF; font-size:1.6em; margin:-10px; text-align:left;}
	.messagebox h2:before {display:inline-block; cursor:default; font-weight:bold; line-height:1.1; min-width:20px; padding:8px 15px; margin-right:15px; text-align:center; vertical-align:middle;}
	.messagebox > h2 + * {margin-top:25px;}
.warn h2 {background-color:#996600;}
	.warn h2:before {background-color:#FFCC00; content:"!"; text-shadow:1px 1px 5px #996600;}
.info h2 {background-color: #003366;}
	.info h2:before {background-color:#005BBB; content:"?"; text-shadow:1px 1px 5px #003366;}
.success h2 {background-color:#4A7A39; padding-left:15px;}
	.success h2:before {background-color:#71AE43; content:""; display:none; text-shadow:1px 1px 5px #4A7A39;}
.error h2 {background-color:#990000;}
	.error h2:before {background-color:#CC0000; content:"X"; text-shadow:1px 1px 5px #990000;}
.messagebox p {font-size:1.1em; line-height:1.2; padding:0 15px; text-align:left;}
.messagebox button {
	background: #EEE;
	background: -webkit-linear-gradient(top, #FFF, #EEE);
	background:    -moz-linear-gradient(top, #FFF, #EEE);
	background:      -o-linear-gradient(top, #FFF, #EEE);
	background:         linear-gradient(top, #FFF, #EEE);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#EEEEEE',GradientType=0 );
	border-radius:5px; -moz-background-clip:padding-box; -webkit-background-clip:padding-box; background-clip:padding-box; border:2px solid #BBB; color:#333; display:inline-block; font-size:1.2em; font-weight:bold; line-height:1.25; height:auto; margin-top:15px; padding:2px 5px;}
	.messagebox button:hover, .messagebox button:focus {border-color:#AAA; box-shadow:inset 0 0 2px #CCC;}
	.messagebox button:active {background:#DDD; border-color:#BBB; position:relative; bottom:-1px; right:-1px;}

/* button style */
button {background:#6CA51D url("../images/button.png") 100% -4px; -moz-background-clip:padding-box; -webkit-background-clip:padding-box; background-clip:padding-box; border:3px solid #A0CD50; color:#FFF; display:inline-block; font-size:1.2em; font-weight:bold; line-height:25px; height:35px; padding:0 24px 3px 4px; text-align:center;}
	button:hover, .button:focus {background-position: 100% -41px; border-color:#4E7F0C; box-shadow:inset 0 0 3px #666;}
	button:active {border-color:#A0CD50; position:relative; bottom:-1px; right:-1px;}

/* layout */
#header {height:90px;}
	a.logo {display:block; float:left; width:390px; height:90px; font-size:0.1em; line-height:0; text-indent:-99999px; text-decoration:none;}
		a.logo:active {outline:0;}
	h2.eAuth {color:#777; float:right; margin-top:0; padding:20px 40px 0 0; text-align:right;}
		h2.eAuth strong {display:block; font-family:"Arial Black",Arial,sans-serif; font-size:1.5em; line-height:0.6; *line-height:1;}
		h2.eAuth span {display:none;}
		h2.eAuth a {font-size:0.6em;}

#body {clear:both; padding:10px 20px 5px; line-height:1.45;}
	#top {border-bottom:1px solid #efefef; overflow:auto; padding-bottom:25px;}
	#mid {clear:both; margin-top:25px; overflow:auto; padding-bottom:25px;}
		#mid h2 {margin-top:0;}
		#mid-left {border-right:1px solid #efefef; float:left; padding-right:29px; width:440px;}
		#mid-right {float:right; overflow:auto; padding-left:30px; width:440px;}
			#mid-right img {float:left; margin:15px 0 2px; padding:0 30px 15px 0;}
			#mid-right button {margin-top:15px;}

	#standardWarning {float:left; font-size:1em; width:450px;}

	#eLMSinfo {border:5px solid #E4E5E6; float:right; padding:10px 15px; width:430px;}
		#eLMSinfo img {float:left; position:relative; left:-5px;}
		#eLMSinfo p.about {color:#002664; font-size:1.58em; font-weight:bold; margin:18px 0 0 257px;}
		#eLMSinfo h2 {clear:left; margin-top:0; padding-top:15px;}
		#eLMSinfo a {text-decoration:underline;}
			#eLMSinfo a:hover {text-decoration:none;}

	#login {margin:15px 0 2px;}

		/* error feedback */
		#spNoMatch {background:#F0C8C8 url("../images/exclamation.png") 4px center no-repeat; border:1px solid #F00; margin:15px 0 2px; padding:4px 4px 4px 30px;}

		#login fieldset {margin:15px 0 2px;}
		#login label {display:block; font-size:1.2em; margin-bottom:5px;}
		#username, #password {background-color:#FFF; border:2px solid #CCC; border-radius:3px; font-size:2em; margin-bottom:15px; padding:5px; width:100%;}
			#username:hover, #password:hover {
				-webkit-box-shadow: 0 0 4px #CCC;
				-moz-box-shadow:    0 0 4px #CCC;
				box-shadow:         0 0 4px #CCC;
				border-color:#AAA; outline:none;}
			#username:focus, #password:focus {
				-webkit-box-shadow: 0 0 4px #BBB;
				-moz-box-shadow:    0 0 4px #BBB;
				box-shadow:         0 0 4px #BBB;
				border-color:#999; outline:none;}
		#passwordHelp {cursor:help; float:right; font-size:1em; font-weight:normal; line-height:35px; margin-top:0; text-decoration:underline;}
			#passwordHelp:hover {text-decoration:none;}
		#login .button {float:left;}
		
	#bottom {
		background: #006fb6;
		background: -webkit-linear-gradient(top, #006fb6 10%, #003f7f 100%);
		background:    -moz-linear-gradient(top, #006fb6 10%, #003f7f 100%);
		background:      -o-linear-gradient(top, #006fb6 10%, #003f7f 100%);
		background:         linear-gradient(top, #006fb6 10%, #003f7f 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006fb6', endColorstr='#003f7f',GradientType=0 );
		margin:0 -15px; padding:25px 50px; position:relative;}
	#rabbit {display:block; width:0; height:0; border-color:#fff transparent; border-style:solid; border-width:15px 15px 0 15px; position:absolute; top:0; left:50%; margin-left:-15px;}
	#bottom h1{color:#fff; font-size:1.2em; margin-top:0;}
	#bottom p {color:#fff; font-size:1.0em; margin-top:20px;}
		#bottom a {color:#FFF; text-decoration:underline;}
		#bottom a:hover {text-decoration:none;}


/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
	#mid-right {display:none;} /* hide PIV note */
	#eLMSinfo {display:none;} /* save space */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px)
and (orientation : portrait) {
	body {width:auto; background-size:320px 29px; margin:0;}
	h2 {font-size:1.35em;}
	#top {padding-bottom:15px;}
	#mid {margin-top:15px; padding-bottom:10px;}
		#mid-left {border:none; padding:0 5px; width:auto;}
	#header {height:45px;}
	a.logo {width:190px; height:45px;}
	h2.eAuth {margin-top:0; padding:10px 10px 0;}
		h2.eAuth strong {font-size:1.3em;}
	#standardWarning {float:none; width:auto;}
	#body {padding:10px 5px;}
	#login fieldset {margin:15px 0 2px;}
	#login label {display:block; font-size:1.1em; margin-bottom:5px;}
	#username, #password {font-size:1.6em; margin-bottom:10px;}
		#username:hover, #password:hover {box-shadow:none;}
		#username:focus, #password:focus {box-shadow:none;}
	#bottom {margin:0; padding:15px 10px;}
		#bottom h1 {font-size:1.1em;}
		#bottom p {font-size:1em; margin-top:15px;}
		#rabbit {border-width:10px 10px 0 10px; margin-left:-10px;}
}

/* Smartphones (landscape) ----------- */
@media only screen
and (max-width : 480px)
and (orientation : landscape) {
	body {width:auto; background-size:480px 44px; margin:0;}
	h2 {font-size:1.5em;}
	#top {padding-bottom:15px;}
	#mid {margin-top:15px; padding-bottom:10px;}
		#mid-left {border:none; box-sizing:border-box; padding:0 10px; width:100%;}
	#header {height:45px;}
	a.logo {width:190px; height:45px;}
	h2.eAuth {margin-top:0; padding:10px 10px 0;}
		h2.eAuth strong {font-size:1.3em;}	#standardWarning {float:none; width:auto;}
	#body {padding:10px 10px 5px;}
	#login fieldset {margin:15px 0 2px;}
	#login label {display:block; font-size:1.2em; margin-bottom:5px;}
	#username, #password {font-size:1.8em; margin-bottom:10px;}
		#username:hover, #password:hover {box-shadow:none;}
		#username:focus, #password:focus {box-shadow:none;}
	#bottom {margin:0 -5px; padding:20px 10px;}
		#bottom p {font-size:1em; margin-top:15px;}
		#rabbit {border-width:10px 10px 0 10px; margin-left:-10px;}
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
	#mid-right {opacity:0.2;} /* dim PIV note */
}

/* iPad (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
	h2 {font-size:1.4em;}
	body {width:750px; background-size:750px 69px; margin:9px auto;}
	#body {clear:both; padding:10px 10px 5px;}
		#top {border-bottom:1px solid #efefef; overflow:auto; padding-bottom:15px;}
		#mid {clear:both; margin-top:15px; overflow:auto; padding-bottom:15px;}
			#mid h2 {margin-top:0;}
			#mid-left {border-right:1px solid #efefef; float:left; padding-right:14px; width:330px;}
			#mid-right {float:right; overflow:auto; padding-left:15px; width:330px;}
	#standardWarning {width:350px; font-size:89%;}
	#eLMSinfo {padding:8px 5px; width:320px;}
		#eLMSinfo img {left:0; width:160px; height:43px;}
		#eLMSinfo p.about {color:#002664; font-size:1.3em; font-weight:bold; margin:12px 0 0 170px;}
		#eLMSinfo h2 {padding-top:10px;}
		#eLMSinfo a {text-decoration:underline;}
			#eLMSinfo a:hover {text-decoration:none;}
		#username, #password {font-size:180%; margin-bottom:15px; width:306px;}
	#bottom {margin:0 -5px; padding:45px 135px;}
		#bottom p {margin-top:15px;}
}