body 
{
   margin:0px;
   padding:0px;
   overflow:hidden; /* hidden will not work for most pages, the problem is that the centered divs cause scroll bars because of the translate it uses, if we change this to auto then we can take out the mobile rule that sets it to auto */
   font-family: "Lucida Grande", Verdana, sans-serif;
   line-height: 18px;
   color: #333;
   font-size:14px;
}
@media screen and (max-width: 500px) /* Mobile */ {
   
   body 
   {
      overflow:auto;
   }
}

/* this is to account for the header since this page does not have frames. 
Eventually all pages will need this once the frames have been removed
there is javascript that adjust this amount on resize event to account for wrapping */
.email-response-aspx  
{
   padding-top:30px;
}



/*does not work in ie8 */
.full-page-background-image 
{
   position:absolute;
   top:0px;
   left:0px;
   height:100%;
   width:100%;
   background: url(../img/bg.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   overflow-y: hidden;
}
.ie8 .full-page-background-image 
{
   background-image: url(../img/na.png);
}
      
.container-grey-rounded
{
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   background-color: #f6f6f6;
   border: 1px solid #ddd;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
   box-shadow: inset 0px 1px 1px rgba(0,0,0,0.05);
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   word-wrap: break-word;
}
      
@media screen and (min-width: 501px) /* Desktop & tablet*/ 
{
   /* this doesnt work in ie8, in ie8 you need to specify width and height then set negative margins */
   .container-centered 
   {   
      position:absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%); 
      -ms-transform: translate(-50%, -50%); 
      -o-transform: translate(-50%, -50%); 
      transform: translate(-50%, -50%);
   }
   .ie8 .container-centered 
   {
      min-width:410px;
      top: 20%;
      margin-left:-205px;
   }
}

@media screen and (max-width: 500px) /* Mobile */ {
   .container-centered 
   {   
      position: absolute;
      top: 35px;
      left: 0px;
      width:100%;
   }
   /* page has javascript that moves these dialogs. (shakes when errors... which adds inline left) */
   .container-centered
   {   
      left: 0% !important;
   }
}

.padding-small { padding:10px; }
.padding-medium { padding:20px; }
.padding-large { padding:30px; }
.padding-xlarge { padding:50px; }
      
.margin-small { margin:10px; }
.margin-medium { margin:20px; }
.margin-large { margin:30px; }
.margin-xlarge { margin:50px; }
      
@media screen and (min-width: 501px) /* Desktop & tablet*/ 
{
   .float-right-mobile-block
   {
      float:right;
   }
}
@media screen and (max-width: 500px) /* Mobile */ 
{
   .float-right-mobile-block {float:none; display:block;}
   .modal-margin-top-small {margin-top:10px;}
   .modal-margin-top-medium {margin-top:20px;}
   .modal-margin-top-large {margin-top:30px;}
   .modal-margin-top-xlarge {margin-top:50px;}
}
      
.input 
{
   font-family:"Helvetica",Helvetica,Arial,sans-serif;
   margin:0px;
   background-color:#fff;
   border:1px solid #ccc;
   -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
   -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
   -webkit-transition:border linear .2s, box-shadow linear .2s;
   -moz-transition:border linear .2s, box-shadow linear .2s;
   -o-transition: border linear .2s, box-shadow linear .2s;
   transition:border linear .2s, box-shadow linear .2s;
   display:inline-block;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
            
.input-large 
{
   height:35px;
   padding:8px 10px;
   margin-bottom:9px;
   font-size: 13px;
   line-height: 18px;
   -webkit-border-radius:4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   vertical-align: middle;
   width:350px;
}
@media screen and (max-width: 500px) /* Mobile */ {
   /* this is so that they can shrink */
   .input-large 
   {
      width:100%;
   }
}

.btn 
{
   color: #ffffff;
   background-color: #414141;
   border-left-color: #222222;
   border-right-color: #222222;
   border-top-color: #222222;
   border-bottom-color: #000000;
   display: inline-block;
   padding: 6px 12px;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.42857143;
   height: auto;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   touch-action: manipulation;
   cursor: pointer;
   -webkit-user-select: none;
   background-image: none;
   border: 1px solid transparent;
   -webkit-border-radius:4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   -webkit-appearance: button;
   overflow: visible;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
.btn:hover, btn:active{background-color: black;}
.btn:disabled { filter: alpha(opacity=65); opacity:0.5; background-color: #414141;}
.error-text {color:Red; font-weight:bold; font-size:13px;}
a {cursor:pointer;}

.divMasterPageTitleBar 
{
   font-size: 16px;
   width:100%;
   color:#FFFFFF; 
   background-color:#333333; 
   padding:5px;
   position:fixed;
   top:0px;
   z-index:1030;
}

.divMasterPageFooter
{
   font-size:9px;
   width:100%;
   min-height:8px;
   line-height:8px;
   color:#FFFFFF; 
   background-color:#333333; 
   padding:5px;
   position:fixed;
   bottom:0px;
   white-space:nowrap;
   z-index:1030;
}