html, body {
    height: auto;
}

#page {
}


#loginUsage h2,
#login h2 {
	margin: 0px;
}

#loginUsage h2 {
	color: #666666;
}

#login h2 {
	color: #8CC63F;
}

#loginUsage .UsageContent {
	margin: 1.5em 0px 0px 0px;
}
.FormWrapper {
	display: table;
	width: 100%;
    border-spacing: 2em;
}
@media only screen and (min-width: 1024px) {
	.FormWrapper {
	    width: 60%;
	    margin-left: 20%;
	}
}
.FormWrapperInner {
    display: table-row;
}
.FormWrapperInner > div {
    display: table-cell;
    padding: 2em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 50%;
}

@media only screen and (max-width: 400px) {
	.FormWrapper {
	    display: block;
	    width: 100%;
	    border-spacing: 2em;
	}
	.FormWrapperInner {
	    display: block;
	}
	.FormWrapperInner > div {
        display: block;
	    width: 100%;
	}
	html .FormWrapperInner #login {
	    border: none;
	}
}
.FormWrapperInner #loginUsage {
	background: #E5E5E5;
	position: relative;
	padding-bottom: 4em;
}
.FormWrapperInner #loginUsage .ProductInfo {
	position: absolute;
	bottom: 2em;
	right: 2em;
	text-align: right;
}
.FormWrapperInner #loginUsage .ProductInfo span {
	margin-right: 1ex;
}
.FormWrapperInner #login {
    border: solid 2px #E5E5E5;
    padding: 2em;
}
.FormWrapperInner #login form {
	margin: 1em 0px 0px 0px;
}

.MethodName {
    margin-bottom: 0.5em;
}

#login form > div {
	margin-bottom: 1.5em;
}
#login form .TextInput {
	border-radius: 3px;
	height: 2em;
    padding: 0.5em;
}
#login form #signInByNumber .TextInput {
    width: 100%;
}
#signInByToken .Entry {
	position: relative;
	height: 3em;
}
#login form #signInByToken .Entry div {
	position: absolute;
	left: 0px;
	right: 9.3em;
	font-weight: bold;
	box-sizing: border-box;
}
#login form #signInByToken .TextInput {
	width: 100%;
    font-size: 1.2em;
}
#login form #signInByToken .Submit {
	position: absolute;
	top: 0em;
	right: 0px;
}
#signInByNumber .TextEntry + .TextEntry {
	margin-top: 1em;
}
form .CommandBar {
	text-align: right;
}
form input.Submit {
    border: 1px solid #2296df;
    margin: 0px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size: 1.2em;
    width: 7.5em;
    padding: 5px 15px 5px 15px; 
    box-sizing: border-box;
    text-decoration:none; 
    display:inline-block;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    font-weight:bold; color: #FFFFFF;
    border:1px solid #85D817; /*#2296df*/
    background-color: #9EE047; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#9EE047), to(#6F9D32));
    background-image: -webkit-linear-gradient(top, #9EE047, #6F9D32);
    background-image: -moz-linear-gradient(top, #9EE047, #6F9D32);
    background-image: -ms-linear-gradient(top, #9EE047, #6F9D32);
    background-image: -o-linear-gradient(top, #9EE047, #6F9D32);
    background-image: linear-gradient(to bottom, #9EE047, #6F9D32);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#9EE047, endColorstr=#6F9D32);
}
form input.Submit:hover {
    cursor:pointer;
    border:1px solid #80D017; /*#2296df*/
    background-color: #95D343; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#95D343), to(#68932F));
    background-image: -webkit-linear-gradient(top, #95D343, #5D842A);
    background-image: -moz-linear-gradient(top, #95D343, #68932F);
    background-image: -ms-linear-gradient(top, #95D343, #68932F);
    background-image: -o-linear-gradient(top, #95D343, #68932F);
    background-image: linear-gradient(to bottom, #95D343, #68932F);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#95D343, endColorstr=#68932F);
}
