* html body { 
   padding:0;
   margin: 0;
} 

html {
   height: 100%;
}

body {
   margin:0px;
	margin-top: 0px;
	margin-left: 0px;
   /* We us this to avoid scroll bars to white space in popup windows. */
   height: 100%;

   font-family: Helvetica,Arial,sans-serif;
   font-weight: bold;
   background-color: white;
}

img {
	border:0px;
}

form {
   margin: 0px;
}

/* gets rid of the dotted box around button text after button click on ffox */
button::-moz-focus-inner {
  border: 0;
}

#pageoemimg {
   position: absolute;
   right: 8px;
   padding-right: 20px;
   padding-top: 2px; /* equalizes hight to CM image height, so both are aligned in middle of div */
   cursor: pointer;
}

.brandableimg {
   max-width:  266px;
   max-height: 34px;
   cursor: pointer;
}

#pageheader {
   padding: 1.5%;
}

#pagecontent {
   text-align: center;
   height: 67%;
}

.inputrow input[type="text"], input[type="password"]
{
   width: 8em;
   height: 1.7em;
   border-radius: 0px;
   border: 1px solid #0EABD8;
   padding: 0 .3em
}

.inputrow input[type="checkbox"]
{
   vertical-align: text-top;
}

.inputrow input[type="text"]:focus, input[type="password"]:focus {
   outline:       none; /* replace default focus outline, in order to match border radius */
   border-radius: 0px;
   border-width:  1px;
   border-color:  #7A9CD3;
}
.inputrow label
{
   width:            8em;
   display:          inline-block;
   text-align:       right;
   margin-right:     5px; 
   color:            #0EABD8;
}
.inputrow:nth-child(n+2) {
   margin-top: 1em;
}
.inputrow:nth-child(n+2).ploginrow {
   margin-top: 5px;
}
.inputrow.ploginconfid {
   margin-bottom: 15px;
}

#logIn {
   width:               auto;
   min-width:           8em;
   border-radius:       15px;
   font-size:           10pt;
   height:              1.9em;
   background-color:    rgb(0,173,216);
   border-color:        rgb(0,173,216);
   border-width:        2px;
   white-space:         nowrap;
}
#logIn:focus {
   outline:             none; /* replace default focus outline, in order to match border radius */
   border-radius:       15px;
   border-color:        #7A9CD3; /* mimic chrome color */
   border-width:        2px;
}

.loginfoot {
   color:       rgb(157,157,157);
   font-size:   11pt;
   font-weight: normal;
}

.errormessage {
   border:           1px solid #e6daac; 
   color:            #000000; 
   margin:           0 3em;
   border-radius:    4px;
   padding:          .5em 0;
   background-color: #fffad5;
}

.persistLoginInfo {
   border: 1px solid #0EABD8;
   margin: 0px 0px 0px 23px;
}
#persistDiv DIV {
   display: inline-block;
}
#persistDiv DIV * {
   vertical-align:middle;
}
#rememberlbl {
   width: auto;
}

@media (min-width:1441px) {
   .pagecontentbg {
      background: url(/Images/sonexis-x-background.jpg) 50% 50% no-repeat; 
   }
}

@media (min-width:1281px) and (max-width:1440px) {
   .pagecontentbg {
      background: url(/Images/sonexis-x-background-1440x611.jpg) 50% 50% no-repeat; 
   }
}
@media (min-width:768px) and (max-width:1280px)
{
   .pagecontentbg {
      background: url(/Images/sonexis-x-background-1280x543.jpg) 50% 50% no-repeat; 
   }
}
@media (max-width:767px)
{
   .pagecontentbg {
      background: url(/Images/sonexis-x-background-800x339.jpg) 50% 50% no-repeat; 
   }
}

@media (max-width:484px), (max-height:450px) /* phone in portrait or very small browser window */
{
   .pagecontentbg {
      background: url(/Images/sonexis-x-background-800x339.jpg) 50% 50% no-repeat; 
   }
   #rolebox {
      top: 16%;
   }
   #hloginbox {
      top: 16%;
      margin: 0 5%;
      padding-bottom: 48px;
   }
   #ploginbox {
      top: 6%;
      margin: 0 5%;
      padding-bottom: 48px;
   }
   #errorrow {
      margin: 0 2px;
      padding: 2px 0;
   }
   #persistLoginInfo {
      margin: 0px;
   }
   #partrole {
      margin-right:auto;
      margin-bottom:.5em;
   }
   #hostrole {
      margin-left:auto;
   }
   #pageoemimg {
      display: none;
   }
   #pageheader {
      text-align: center;
   }
   #pagefooter {
      position: static;
      padding-top: 4%;
   }
   .inputrow label
   {
      text-align: center;
      margin-right: 0;
   }
}


.footer {
   width: 100%;
   min-height: 2em;
   font-size: 11pt;
   font-weight: normal;
   color: rgb(157,157,157);
   position: fixed;
   bottom: 0px;
   left: 0px;        
}

#pageinfo {
   margin-left: 1em;
   margin-bottom: 1em;
}

#pageinfo1 > DIV {

   display:inline-block;
}
#pageinfo1 .pageinfolnk {
   cursor: pointer;
}
#pageinfo1 .spacer {
   margin-left: 1em;
   margin-right: 1em;
}

#pagecopyright {
   padding-top: .5em;
}

.pagecontrols {
   position: relative;
   top: 36%;
   color: white;
}

.rolebtn {
   color:            white;
   background-color: rgb(12,73,98);
   border-radius:    5px;
   border-color:     rgb(115,148,162);
   border-style:     solid;
   border-width:     thin;
   height:           2.8em;
   width:            10.5em;
   cursor:           pointer;
   font-size:        16pt;
   font-weight:      inherit;
}
.rolebtn:focus {
   outline:       none;
   border-radius: 5px;
   border-style:  solid;
   border-width:  2px;
   border-color:  #7A9CD3; /* mimic chrome color */

}

.rolebtn:hover {
   background-color: rgb(0,173,216);
   border-color: rgb(138,197,215);
}

#rolelbl {
   font-size:10pt;
}

#rolebtnbox {
   margin-top: 0.5em;
}

.partbtn {
   margin-right: 15px;
}

.hostbtn {
   margin-left: 15px;
}

#systest {
   text-align: center;
   padding-top: 2%;
}

#systestbtn {
   font-size: 10pt;
   height: 2.5em;
   background-color: rgb(0,173,216);
   border-color: rgb(138,197,215);
}