/*
 * ==============================
 * ===     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.
 */


.MagicOuterTable {
    border: none;
    height: 0;
    margin: 0 auto 0 auto;
}

#MagicWrapper {
    width: auto;
}

.MagicBody {
    background: none;
}

#MainHeaderTable {
    background-image: none;
    border: 5px solid #8DC63F;
    height: 104px;
}


#MainHeaderTable tr:first-child {
    background: none;
    padding: 12px;
    padding-right: 4px;
}

#login-form-wrapper {
    width: 499px;
    vertical-align: top;
    margin-top: 54px;
    border: 1px solid #00629B;
    border-radius: 10px;
    padding-bottom: 29px;
    -webkit-box-shadow: none;
}

.MagicContentTable {
    border-collapse: separate;
    padding-top: 22px;
    border-right: 5px solid #8DC63F;
    background: -webkit-linear-gradient(-45deg, #8dc63f 0%, #00629b 100%);
    background-size: cover;
}


.MagicContentTable > tbody {
    background-size: 1175px;
    height: 300px;
}

.MagicContentTable > tr{
    text-align:right;
}

.MagicOuterTable tr:first-child{
    margin-top: -22px;
}

.MagicContentCell {
    border-top-left-radius: 67px;
    padding-top: 24px;
    margin-top: 24px;
    background-color: white;
    padding-left: 24px;
}

.magic-unauthenticated .MagicContentCell {
    background: url(/isp_images/tl_background.jpg) no-repeat center;
    background-size: cover;
    height: 600px; 
}

.MagicMenuCell{
    background:none;
}


#loginContentCell {
    background: rgba(0,0,0, 0.0);
    -webkit-border-radius: 0px;
    -webkit-box-shadow: none;
}

#login-form-table {
    background: rgba(0,0,0, 0.0);
}


.tl-footer {
    text-align: center;
    font-family: helvetica;
    font-size: 12pt;
    line-height: 1.4;
    background-color: #00629B;
    color: white;
    padding: 12px;
}

.tl-footer a {
    color: white;
    text-decoration: none;
}

.MagicCopyRight {
    background-color: #E0DEDE;
    color: black;
}

.MagicCopyRight a {
    color: #000;
    text-decoration: none;
}


/* right column's box form title */
#login-form-table h4 {
visibility: hidden;
position: relative;
}
#login-form-table h4::after {
content: 'Sign In';
visibility: visible;
position: absolute;
top: 0;
left: 0;
}

#login-form-table label {
    color: white;
    font-family: helvetica;
    font-size: 14pt;
    line-height: 1.4;
    font-weight: bold;
    margin-right: 13px;
}


#login-form-table input[type="submit"] {
    text-align: right;
    float: right;
    border: 1px outset #ffffff;
    background: white;
    opacity: 0.8;
}

#login-form-table input[type="email"], #login-form-table input[type="password"] {
    border-top: 2px solid #cdcdcd;
    border-left: 2px solid #cdcdcd;
    border-bottom: 2px solid #ededed;
    border-right: 2px solid #ededed;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 2px;
    height: 2.5em;
    width: 100%;
}

.MagicMenuCell {
    width: 236px;
}

#MagicMenu {
    width: 175px;
}

#MagicMenu ul li {
    border-bottom: 1px solid white;
    padding-bottom: 3px;
    padding-top: 3px;
}

#MagicMenu ul li a {
    color: white;
    font-size: 12px;
}

.login-info-content .main_wiz{
    font-family: helvetica;
    color: white;
    line-height: 1.4;
    opacity: 1.0;
    font-size: 1.4em;
}

.login-info-content h4 {
    font-size: 2.4em;
}


/*
 * ==============================
 * ===     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;
}
*/