/* m2web */

@font-face {
    font-family: m2web;
    src: local("Century Gothic Bold"),  url("/layout/GOTHICB.TTF");
    font-weight: bold;
}

html,body {
    height:99%; /* needed for container min-height */
    margin: 0 15px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0;
}

#login a:link {
  text-decoration: none;
  color: RoyalBlue;
}

#forgot {
  margin: 0 25px 0 0;
}

a:visited {text-decoration: none; color: RoyalBlue; }
a:active {text-decoration: none; color: RoyalBlue; }
a:hover {text-decoration: underline; color: Blue;}

#container {
    min-height: 100%;
    height:auto !important; /* See http://ryanfait.com/sticky-footer/ */
    height:100%; /* IE6: treated as min-height*/
    margin:0 0 -70px;
    padding-top: 1.2em;
}

div#header {
    position: relative;
}

div#userIdentity {
    position: absolute;
    right: 0.5em;
    top: -1.4em;
    font-size: 0.8em;
}

img#headerImage + div#userIdentity {
    top: auto;
    bottom: 4.2em;
    padding: 6px;
}

div#userIdentity span {
    margin-left: 1em;
}

img#headerImage {
  width: 9%;
  height: auto
}

#footerImage {
  height: auto;
  width: 100px;
}

a#m2webBanner {
    display: block;
    background-color: #2d4972;
    color: white;
    font-family: m2web, Century Gothic;
    font-weight: bold;
    font-size: 2.2em;
    text-align: right;
    padding: 0.2em 1.2em;
    clear: both;
    overflow: hidden;
}

a#m2webBanner:hover {text-decoration: none;}

div#contents {
    margin: 1em 0 70px 0;
}

#footer, #push {
    height: 5px;
}

.phoneNumberExample {
	clear:both;
	color:lightgray;
	text-align:right;
	font-size: smaller;
	margin-top: -0.5em;
}

div#footer {
    border-top: 1px solid #13275C;
    font-size: small;
    padding: 10px;
}

#footer p {
    margin: 0;
}

a#poweredLink {
    position: relative;
    left: -10px;
}

#footer a:link, a:visited {
  text-decoration: none;
  color: #00255D;
}

#footer a:hover {
  color: #4180c2;
}



#login {
    margin-top: 4em;
    margin-left: 40%;
    width: 27em;
}

#login fieldset {
    padding: 0.5em 1em 1em;
}

#login legend {
    margin-left: -0.5em;
    padding: 0 0.5em;
}

#login fieldset p {
    margin: 5px 0 5px 0;
}

#login label {
    display:block;
    margin-left: 4px;
    color: #00255D;
}

#login input[type=text], #login input[type=password] {
    padding: 5px;
    border-radius: 2px;
    border: 2px solid #e6e7e7;
    background-color: #e9f6fd;
    display:block;
    margin: 0 0px 20px 0px;
    width: 99%;
    height: 30px
}

#login input[type=submit] {
    font-size: 1em;
}

#tableSmsIcon {
  table-layout: auto;
  width: 30%;
}

#mobileSmsIcon {
  height: auto;
  width: 96%;
}

#connect {
  background-color: #727373;
  color: white;
  border: none;
  width: 100%;
  height: 35px;
  margin: 30px 0px 30px 0px;
  cursor: pointer;
}

#change {
  background-color: #727373;
  color: white;
  border: none;
  height: 35px;
  width: 50%;
  margin: 30px 0px 0px 0px;
  cursor: pointer;
  float: left;
}

#logout {
  float: right;
  margin: 40px 20px 0 0;
}

#policy {
  color: #00255D;
}

#ewonsPoolsLabel {
	font-size:large; font-weight:bold;
}
#ewonsLabel {
	margin-left: 50px;
}

#poolsLabel {
	margin-left: 50px;
}

#ewonsTable {
	width:100%;
}

#ewonsTable td {
    padding: 0 0.5em;
}

#ewonsTable thead tr {
    background-color: lightgray;
    height: 2em;
}

#ewonsTable tbody tr {
    height: 1.5em;
}

#ewonsTable tbody tr.even {
    background-color: Linen;
}

#ewonsTable tbody > tr:hover {
    background-color: LightSteelBlue;
}


.mobile-number-required {
  border: 2px solid #e6e7e7;
}

.login-sms-code {
  border: 2px solid #e6e7e7;
}

.resend-sms {
  border: 2px solid #e6e7e7;
}

.send-sms-button {
  width: 50%;
}

div.errors {
    width: 100%;
    background-color: #d0805d;
    border: solid #e6e7e7;
    border-width: 1px 0;
    color: Maroon;
    margin-top: 1em;
}

div.validationErrorMessage {
	display : block;
    border-width: 1px 0;
    color: Red;
    font-size: small;
    padding: 0.2em;
}

div.noValidationErrorMessage {
	display : none;
}

div.errors p {
    text-align:center;
}

div.infos{
    width: 100%;
    background-color: #e9f6fd;
    border: 2px solid #e6e7e7;
    color:  #00255D;
    margin-top: 1em;
}

div.infos p {
    text-align:center;
}

.closeButton {
    float:right;
    width: 4em;
    text-align:center;
}


.closeButton span {
    padding:0.4em;
    border: 1px solid Maroon;
}

.infos .closeButton span {
    border: 1px solid RoyalBlue;
}

.closeButton span:hover {
    cursor: pointer;
    font-weight: bold;
}

#login ul { /* links in the login form, besides the Connect button */
    list-style-type:none;
    float: right;
    font-size: small;
    margin-top: 0;
}

form.vncLogin button#connect {
	min-width: 7em;
}

#vncOptions {
	text-align: right;
	width: 100%;
	font-size: small;
	padding-bottom: 5px;
}

#loginInfo { /* An introduction text above the login form */
	margin-left:30%;
	margin-top: 3em;
	margin-bottom: 3em;
	width: 37em;
}

#welcomePicture {
    float:left;
    height: auto;
    margin: 35px 1em 0 21%;
    overflow: hidden;
}

fieldset {
    border: none;
}

.okCancelTable {
	width: 100%;
}

.cancelTableCell {
	font-size: small;
	text-align: right;
	vertical-align: bottom;
}


.resendSms {
	margin-top: 0.5em;
	text-align: center;
}

.resendContainer #resendToBackup {
	margin-top: 1em;
}

.resendContainer #login FIELDSET {
	padding: 0.5em 1em 0.5em 1em;
}

.resendSms FORM {
	width: 100%;
	text-align: center;
}

.resendSms BUTTON  {
	padding: 5px 15px;
	margin-top: 1em;
}
.smsCodeContainer #login input[type=text],
.phoneNumberContainer #login input[type=text]{
	font-size: 1.1em;
	padding: 2%;
	width: 94%;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-right: 0.5em;
  background-color: white;
}

.smsCodeContainer #policy P {
	font-size: small;

}
.smsCodeContainer #login BUTTON,
.phoneNumberContainer #login BUTTON {
	padding: 3px 13px;
  width: 50%;
}

.smsCodeContainer #policy,
.phoneNumberContainer #policy {
	padding-bottom: 10px;
}

.smsCodeContainer #policy P,
.phoneNumberContainer #policy P{
	font-size: small;
}

.smsCodeContainer #resendSmsLink {
	font-size: small;
	text-align: right;
}

.smsCodeContainer #rememberThisComputer {
	float: left;
}

.smsCodeContainer #rememberThisComputerDiv {
  color: #00255D;
	float: right;
	font-size: small;
	padding-bottom: 1em;
}

#skip {
    cursor: pointer;
    text-decoration: none;
    color: RoyalBlue;
    border: none;
    background: transparent;
}

#skip:hover {
    text-decoration: underline;
    color: Blue;
}

#policy h1 {
    font-size: medium;
    margin-bottom: 0;
}

#policy ul {
    list-style-type: disc;
    float: none;
    font-size: small;
    margin: 0;
    padding: 0 0 0 1em;
}

#previewBanner {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50%;
    margin-left: 25%;
    background: rgba(169, 169, 169, 0.8);
    border: 1px solid #878787;
    border-top: none;
    padding: 6px 0px;
    text-align: center;
    max-height: 1em;
    overflow: hidden;
}

#previewBanner:hover {
    background: rgba(169, 169, 169, 0.2);
}

#previewBanner > p {
    margin: 0;
    padding: 0px 3px 0px 0px;
}

#resendSmsDesc {
  color: #00255D;
}

/* When width is small, display the Talk2M logo and the M2Web banner smaller */
@media only screen
and (max-width : 480px) {
    .smsCodeContainer #header,
	.phoneNumberContainer #header,
	.resendContainer #header {
		display:none;
		visibility: hidden;
	}

	img#headerImage {
    float: left;
    width: 40%;
    height: auto;
	}

	a#m2webBanner {
        max-height: 1.3em;
	    font-size: 1.5em;
        clear: none;
	}

    a#m2webBanner img#logo {
        max-height: 1.3em;
    }

    img#headerImage + div#userIdentity {
        top: auto;
        bottom: 2.8em;
    }

	div.infos {
		margin-top: 0px;
	}

	#login {
		margin: 0px;
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
	}

    #previewBanner > p {
        padding: 0px 1px 0px 0px;
    }

    #previewBanner > p > span {
        visibility: hidden;
        display: none;
    }
}

@media only screen
and (max-width: 360px) {
    div#userIdentity span:first-child {
        display:none;
        visibility: hidden;
    }
}

/* do not display the eWON guy when screen is not large enough */
@media only screen
and (max-width : 801px) {
	#welcomePicture {
		display:none;
	}

	#login, #loginInfo {
		margin: 0px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 1em;
		margin-bottom: 1em;
		max-width: 100%;
	}
}

/* correctly resize the password on small screens
@media only screen
and (max-width : 640px) {

	#login {
		margin: 0px;
	}
} */