/*
 * ==============================
 * ===     Introduction       ===
 * ==============================
 * This file affects 2 interface areas:
 *  - The Landing Page
 *  - The User Interface (email settings, etc)
 *
 *
 * Change here *do not* affect these interface areas:
 *  - The Admininistration Interface
 *  - Webmail Lite
 *  - Tuxedo
 *  - Personal Pages
 *
 *
 * This file is split into 4 parts:
 *  - The introduction (this)
 *  - The Landing Page
 *      - These settings affect only the Landing Page
 *  - The User Interface
 *      - These settings affect only the User Interface
 *  - All
 *      - These settings affect both the Landing Page & the User Interface
 *
 * 
 * Each section has a number of CSS rules to affect a section of the
 * interface. Section comments include a description of the affected part
 * of the interface, and a list of what the changes in the example do.
 *
 * The code for each block is commented out so that the changes will not take
 * effect by default. To try out a rule, uncomment its section, and the
 * changes will take effect upon the next refresh of the affected web page.
 */




.MagicBody {
    background: url('../isp_images/succeedbg.png') no-repeat;
    background-size: cover;
}



#MainHeaderTable tr:first-child {
    background: none;
}

/* right column's box form title */ #login-form-table h4 {
    visibility: hidden;
    position: relative;
}

#login-form-table h4::after { 
content: 'Sign in to WebMail'; 
visibility: visible; 
position: absolute;
top: 0;
left: 0; 
}




#MainHeaderTable td #HeaderLogo {
    /*display: none;*/
    height: 55px;
    background-image: none;
    padding-top: 5px !important;

}



#MMLogo {
  height: 90px;
    padding-top: 25px !important;
}


#login-form-table input[type="submit"] {
    border: 1px outset #999;
    background: #025D8C;
    opacity: 1;
    color: #fff;
    border-radius: 5px 5px 5px 5px;
    width: 80px;
    text-align: center;
}

#rightHeaderLogo {
  display: none;
}



.MagicContentTable {
    background: none;
    background-color: white;
}



.MagicCompanyFooter {
    background-color: #2b2b2b;
}


.MagicCompanyFooter {
    color: white;
}


.MagicCompanyFooter a {
    color: white;
}

.MagicCompanyFooter a:hover {
    color: white;
}



.MagicCopyRight {
    background-color: #2b2b2b;
}


#MainHeaderTable {
    background-image: none;
    background-color: white;
}

#MainHeaderSubMenu {
    background: none;
}

#UserSubHeaderRow {
    display: table-row;
    background: none;
    background-color: #2b2b2b;
    height: 40px;
    width: 1050px;
}



#loginContentCell {
    margin-top: 30px;
}




#recover-pass-td a {
    color: #2b2b2b;
}



#loginContentCell h2 {
    color: #2b2b2b;
}

.login-info-content h4, #login-form-table h4 {
    color: #2b2b2b;
}



#webmaillinks td {
    vertical-align:  none;
}




/*.MagicNavTab {
    margin-right: -100px;
}

.header-logout-btn {
    margin-right: -100px;
}*/


.MagicNavTab {
    background-color: #025D8C;
    border-radius: 5px 5px 0px 0px;
    overflow: visible;
    width: 80px;
    height: 26px;
    margin-right: 10px;
    border: 1px outset #999;
    display: none;
}


.nopad {
    margin-left: -190px;
    margin-top: 22px;
}





.MagicMenuCell {
    background-color: #F3F3F4;
} 




.footerlink {
    color: #fff;
}


/* Header Social Media */


/*@media all {
  div,
  a,
  ul,
  li {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
  }*/
/*  :focus {
    outline: 0;
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  a img {
    border: 0;
  }
  img {
    max-width: 100%;
    height: auto;
  }*/
/*  a {
    text-decoration: none;
    color: #ec651b;
  }*/
/*  a:hover {
    text-decoration: underline;
  }
  img {
    max-width: 100%;
  }
  .clearfix:before,
  .clearfix:after {
    content: " ";
    display: table;
  }
  .clearfix:after {
    clear: both;
  }
  .clearfix {
    *zoom: 1;
  }*/
/*  #header-aside {
    float: right;
  }*/


  #header-phone {
    text-align: right;
    font-weight: 700;
    width: 190px;
  }

  #social {
    margin-top: 7px;
    list-style: none;
    text-align: right;
    margin-right: -7px;
  }

  #social li {
    display: inline-block;
    margin-right: 7px;
  }

  #social a {
    display: block;
    float: left;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }

  #social a img {
    display: block;
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }

  #social a:hover img {
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
  }

/*  @media only screen and (max-width: 767px) {
    #header-aside {
      float: none;
      text-align: center;
      margin-top: 0 !important;
    }*/


/*    #header-phone {
      text-align: center;
    }*/

    #social {
      width: 100%;
      text-align: right;
    }

    #social li,
    #social a {
      display: inline-block;
      float: none;
    }
  }
}


/*
 * ==============================
 * ===     Landing Page       ===
 * ==============================
 *
 * The following settings apply only to the landing page.
 */



/*
 * #LoginWrapper contains all of the text elements in the center of the screen.
 *
 * - Apply a border around the container.
 * - Change the container's background colour.
 */

/*
#LoginWrapper {
    background-color: #E8ECE8;
    border: solid #E0E0E0 3px;
    padding: 5px;
}
*/



/*
 * The #Login field is a container holding the login form.
 *
 * - Add a little blue to give a hint of color.
 * - Add additional spacing under it.
 */

/*
.LoginBody #Login {
    background-color: #E0E0FF;
    margin-bottom: 15px;
}
*/



/*
 * #LoginHeader is holds the title of the login form.
 *
 * - Make the "Sign in" title show more prominently.
 */

/*
.LoginBody #Login #LoginHeader {
    text-transform: uppercase;
}
.LoginBody #Login #LoginHeader H3 {
    color: #0000D0;
}
*/



/*
 * #login-email and #login-password are the input fields of the login form.
 *
 * - Change the default color of the login fields.
 * - Change the hover color of the login fields.
 * - Change the focus color of the login fields.
 */

/*
#login-email, #login-password {
    background-color: #E0E0E0;
}
.LoginBody #Login #login-email:focus, .LoginBody #Login #login-password:focus {
    background-color: #FFFFFF;
}
#login-email:hover, #login-password:hover {
    background-color: #FFF6DF;
}
*/



/*
 * For the Landing Page, you may use .LoginBody to reference the <body> tag.
 *
 * - Add a light green tinge to the page body background.
 */

/*
.LoginBody {
    background-image: none;
    background-color: #F6FFF6;
}
*/



/*
 * #Footer contains your company information and the copyright notice at the
 * bottom of the page.
 *
 * - Reduce the internal padding of the container.
 */

/*
#Footer {
    padding-top: 5px;
    padding-bottom: 0px;
}
*/




/*
 * ==============================
 * ===    User Interface      ===
 * ==============================
 *
 * The following settings only apply to the User Interface.
 */



/*
 * For the User Interface pages, you may use .MagicBody to reference the
 * <body> tag.
 *
 * - Add a light green tinge to the background.
 */

/*
.MagicBody {
    background-image: none;
    background-color: #F6FFF6;
}
*/



/*
 * .MagicOuterTable contains everything on the page.
 *
 * - Shrink the outer border by one pixel.
 * - Make the container's borders appear raised.
 */

/*
.MagicOuterTable {
    border-width: 3px;
    border-color: #707070 #000000 #000000 #707070;
}
*/



/*
 * #loggedinas is the container in the top-left that shows the currently
 * logged in user.
 *
 * - Make the title bold.
 * - Make the email address red.
 * - Shrink the border.
 * - Make the border dotted.
 */

/*
#loggedinas {
    font-weight: 900;
    border-width: 1px;
    border-style: dotted;
}
#loggedinas strong {
    color: #E80000;
}
*/



/*
 * #SideBar is the left-hand bar containing the navigation menu.
 *
 * - Make the title texts in the menu dark gray.
 */

/*
#SideBar h4 {
    color: #303030;
}
*/



/*
 * #MagicMenu is the main navigation menu on the left hand side.
 *
 * - Make the text bold.
 * - Make the link texts blue.
 */

/*
#MagicMenu ul li a {
    font-weight: 900;
    color: #0000A0;
}
*/



/*
 * #MagicSpamCount is the container for the spam status widget.
 *
 * - Make the title's background green.
 * - Make the spam count number bold.
 */

/*
#SideBar #MagicSpamCount h4 {
    background-color: #004000;
    color: #FFFFFF;
}
#MagicSpamCount p span {
    font-weight: 900;
}
*/



/*
 * .MagicContentCell holds all of the content beside the navigation bar, and
 * is the main content container.
 *
 * - Increase the font size to make it easier to read.
 * - Add additional padding.
 */

/*
.MagicContentCell {
    font-size: 125%;
    padding-right: 5px;
    padding-bottom: 5px;
}
*/



/*
 * The h2 inside .MagicContentCell is the main header at the top of the page.
 *
 * - Increase the font size.
 * - Set the font colour to black.
 */

/*
.MagicContentCell h2 {
    font-size: 160%;
    color: black;
}
*/



/*
 * div.minibutton's are used throughout the interface for applying settings
 * and refreshing information.
 *
 * - Add shading using borders.
 * - Darken the text to make it stand out.
 */

/*
div.minibutton {
    border: solid #0000FF 1px;
    background-color: #5050FF;
}
div.minibutton a {
    border: solid #A0A0FF 1px;
    background-image: none;
    background-color: #D0D0FF;
}
#EmailOptions td div.minibutton a {
    color: #0000A0;
    font-weight: 900;
}
*/



/*
 * .error is the class for error messages. These message are usually inside
 * td or div HTML elements.
 *
 * - Make them stand out more prominently.
 */

/*
.error {
    font-weight: 900;
    color: red;
    background-color: #FFD0D0;
    text-decoration: underline
}
*/




/*
 * ==============================
 * ===         All            ===
 * ==============================
 *
 * The following settings apply to both the User Interface and the Landing
 * Page.
 */



/*
 * .MagicCopyRight contains your company information and the copyright notice.
 *
 * - Fade the copyright a little to make your company information more
 *   prominent.
 */

/*
.MagicCopyRight {
    color: #877;
}
.MagicCopyRight a {
    color: #50859B;
}
.MagicCopyRight a:hover {
    color: #000000;
}
*/