@media screen and (min-width: 0px) and (max-width: 600px) {
}
html { background-image: url("../images/BG_Page.png"); background-repeat: repeat-x; background-color: #000000; }
html, body { font-family: Arial; font-size: 16px; }
body * { box-sizing: border-box; }

.form {  }
.form .header { background-color: #197b30; }
.form .header h1 { color: #f7f7f7; }
.form label { margin-bottom: 3px; color: #ffffff; display: block; text-shadow: 0px 2px 4px #000000; }
.form input[type='text'], .form input[type='number'], .form input[type='password'], select, span.field-invalid { padding: 6px; width: 100%; background-color: rgba(255, 255, 255, 100%); border-bottom: 2px solid rgba(0, 0, 0, 30%); border-top: 0px; border-right: 0px; border-left: 0px; font-size: 16px; box-shadow: 0px 2px 4px #000000; }
.form input[type='text']:invalid, .form input[type='number']:invalid, .form input[type='password']:invalid { border: 0px; }
.form input[type='text'].ng-invalid, .form input[type='number'].ng-invalid, .form input[type='password'].ng-invalid, select.ng-invalid, span.field-invalid { background-color: #ffe6e6; border-bottom: 2px #cc0000 dashed; }
.form button { margin-right: 18px; padding: 12px 24px; border-width: 0px; cursor: pointer; font-size: 1em; }
.form button.btn-submit { background-color: #2a52a2; color: #ffffff; }
.form button.btn-submit:hover, .form button.btn-submit:focus, .form button.btn-submit:active { background-color: #3366cc; }
.form button.btn-cancel { background-color: #262729; color: #e5e5e5; }
.form button.btn-cancel:hover, .form button.btn-cancel:focus, .form button.btn-cancel:active { background-color: #494b50; }
.form button:disabled, .form button:disabled:hover, .form button:disabled:focus, .form button:disabled:active { background-color: #cccccc; color: rgba(0, 0, 0, 30%); }

/* Row styles */
.form > div { margin-top: 16px; }
.form > div:first-child { margin-top: 0px; }

/* Button styles */
.form button { box-shadow: 0px 2px 4px #000000; }
.form .login, .form .primary { background-color: #009900; color: #ffffff; }
.form .login:hover, .form .login:focus, .form .login:active,
.form .primary:hover, .form .primary:focus, .form .primary:active { background-color: #00cc00; }
.form .forgotPassword, .form .secondary { background-color: #880000; color: #ffffff; }
.form .forgotPassword:hover, .form .forgotPassword:focus, .form .forgotPassword:active,
.form .secondary:hover, .form .secondary:focus, .form .secondary:active { background-color: #bb0000; }

.fieldWrapper { width: 100%; }
.fieldWrapper label { background-color: transparent; color: #ffffff; display: block !important; }
.fieldWrapper input[type=text], .fieldWrapper input[type=password] { width: 100%; box-shadow: 0px 2px 4px #000000; }
.fieldWrapper .errorLabel { height: 20px; font-size: .75em; line-height: 20px; color: #ff0000; }

.fieldWrapper input[type=image] { margin: 0px; }
.fieldWrapper input[type=image]:first-child { margin-right: 30px; }

.fieldWrapper input[type=button] { cursor: pointer; box-shadow: 0px 2px 4px #000000; }

.step { margin-top: 20px; padding: 10px; border: 1px solid #c0c0c0; box-shadow: 0px 2px 4px #000000; }
.step .instructions { clear: both; overflow: auto; }
.step .instructions .stepNumber { margin: 0px 10px 10px 0px; padding: 0px 5px; background-color: #ffcc00; font-size: 16px; font-weight: bold; line-height: 25px; text-align: center; color: #1a1a1a; display: block; float: left; }
.step .instructions .text { padding: 0px; font-size: 16px; color: #ffffff; clear: both; text-shadow: 0px 2px 4px #000000; }

.pageBody { margin: 50px auto; max-width: 460px; padding: 20px; border: 1px solid #c0c0c0; background-image: url("../images/black50.png"); background-color: #d4d4d4; }

.gameTitle { float: none; text-align: center; }

.notification { margin: 12px 0px; padding: 12px; background-color: #f7f7f7; color: #4d4d4d; box-shadow: 0px 2px 4px #000000; }
.notification:last-of-type { margin-bottom: 0px; }
.notification.success { background-color: #008800; color: #000000; }
.notification.caution { background-color: #ffcc00; color: #000000; }
.notification.warning { background-color: #880000; color: #ffffff; }
	
/* Busy Overlay */
.busy-overlay { height: 100%; width: 100%; background-color: rgba(0,0,0,.50); position: fixed; top: 0px; left: 0px; z-index: 99999; }
.busy-overlay > div { padding: 12px; width: auto; background-color: #4b4b4b; border: 1px solid #e5e5e5; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #e5e5e5; font-size: 24px; box-shadow: 0px 2px 4px #000000; }
.busy-overlay > div img { margin-right: 12px; }
.busy-overlay > div * { vertical-align: middle; }

@media (max-width: 767px) {
	.pageBody { margin-top: 0px; }
}