/* * ============================== * === 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. */ /* * ============================== * === 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 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 * tag. */ #MagicBody { background-color: white; background: none; margin: 0; } /* * .MagicOuterTable contains everything on the page. */ .MagicOuterTable { background-color: white; border: none; border-right: 1px solid #1A3966; border-left: 1px solid #1A3966; } /* * #loggedinas is the container in the top-left that shows the currently * logged in user. */ #loggedinas { margin-top: 20px; margin-left: 5px; margin-right: 0px; width: 93%; border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 3px solid; border-color: #623F98; } #loggedinas strong { color: black; } .header-actions-link:hover { color: #623F98; } /* * #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. */ .MagicContentCell { padding-top: 18px; } .magic-unauthenticated .MagicContentCell { padding: 24px; } /* user page */ h2 { color: black; } .MagicContentCell .main_wiz p, .MagicContentCell p { color: black; } #MagicMenu ul li a:hover { background-color: #EEE; color: #623F98; } /* * 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. */ #error-row .error { margin-left: 50px; } /* * ============================== * === All === * ============================== * * The following settings apply to both the User Interface and the Landing * Page. */ /* * .MagicCopyRight contains your company information and the copyright notice. */ .MagicCopyRight { font-family: 'Montserrat'; font-weight: 500; background-color: #623F98; height: 47px; color: white; } .MagicCopyRight p { padding-top: 9px; padding-bottom: 9px; } .MagicCopyRight p a { text-decoration: none; color: white; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: local('Montserrat-M'), url('./font-files/Montserrat-Medium.ttf') format('truetype'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: local('Montserrat-R'), url('./font-files/Montserrat-Regular.ttf') format('truetype'); } @font-face { font-family: 'ZillaSlab'; font-style: normal; font-weight: 700; src: local('ZillaSlab-B'), url('./font-files/ZillaSlab-Bold.ttf') format('truetype'); } @font-face { font-family: 'ZillaSlab'; font-style: normal; font-weight: 600; src: local('ZillaSlab-SB'), url('./font-files/ZillaSlab-SemiBold.ttf') format('truetype'); } .montserrat-med { font-family: 'Montserrat'; font-weight: 500; } .montserrat-reg { font-family: 'Montserrat'; font-weight: 400; } .zilla-bold { font-family: 'ZillaSlab'; font-weight: 700; } .zilla-semi-bold { font-family: 'ZillaSlab'; font-weight: 600; } .ott-footer { text-align: center; background-color: #FFF; border-top: 2px solid; border-image: linear-gradient(to right,#02BED6,#623F98) 1; padding-bottom: 5px; color: #61696e; } .ott-footer p { margin: 6px 0px; } .login-info-content .ott-main-head { font-size: 21pt; } .login-info-content .ott-sub-head { font-size: 18pt; } .login-info-content .ott-text-header { color: #623F98; } .MagicContentTable { background: none; } #login-form-wrapper { padding: 32px 10px 32px 10px; border: 0px solid #2764af; border-radius: 8px; margin-top: 12px; margin-left: 132px; } #login-form-wrapper input[type="Submit"] { float: left; border: none; padding: 9px 25px; border-radius: 6px; vertical-align: top; color: white; font-family: 'Montserrat'; font-weight: 400; cursor: pointer; opacity: 1; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2764af+0,623F98+100 */ background: #2764af; /* Old browsers */ background: -moz-linear-gradient(left, #2764af 0%, #623F98 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #2764af 0%,#623F98 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #2764af 0%,#623F98 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2764af', endColorstr='#623F98',GradientType=1 ); /* IE6-9 */ } #login-form-wrapper input[type="Submit"]:hover { color: #02BED6; } #login-form-wrapper #login-email, #login-form-wrapper #login-password { padding: 7px; width: 100%; background: linear-gradient(#FFF,#FFF) padding-box, linear-gradient(to right,#02BED6,#623F98) border-box; border-radius:5px; border: 1px solid transparent; height: 2em; } .poweredBy a { float: right; } .adtrack-main-content { width: 484px; height: 50px; } .adtrack-below-login { width: 417px; height: 50px; display: inline-block; vertical-align: top; margin-top: 17px; float: right; margin-left: 110px; } .below-login-wrapper { height: 100%; width: 100%; } #top-menu { color: white; height: 26px; padding: 14px; } #top-menu > td { padding: 14px; width: 60%; } #top-menu > td:first-child, #top-menu > td:last-child { width: 20%; } #lower-menu > td > div { border-bottom: 1px solid #f0f1f2; height: 56px; padding: 14px 14px 0px 14px; } .top-left-link { color: white; padding: 10px; } .top-left-link a { color: white; text-decoration: none; } .top-left-link a:hover { color: #02BED6; } .left-links { font-size: 14px; } .right-links { text-align: right; } #MainHeaderTable { background: none; } #MainHeaderTable tr:first-child { background: none; background-color: #623F98; } #header-middle { text-align: center; font-size: 14px; } #header-middle a { color: white; } .inline-block { display: inline-block; } button.btn, #EmailOptions td .minibutton a, #CustomSettingsToggle, .tableTitleHelpIconLeft, .dropdown-menu > li > a, a.MailboxDelete, a.MailboxEdit, #EditMailbox a.button.edit { color: black; } #MagicMenu ul.subMenu a:hover, button.btn:hover, #EmailOptions td .minibutton a:hover, #CustomSettingsToggle:hover, .SpamList a.SpamListLink:hover, .MagicContentCell .main_wiz p:hover, .menu-item:hover a, a:hover.MailboxDelete, a:hover.MailboxEdit, .MailboxUsage table td.Value a:hover, #EditMailbox a:hover.button.edit { color: #623F98; } #recover-pass-td a, #recover-pass-td a:hover { color: black; display: none; } .menu-item { position: relative; color: black; } .sub-menu{ margin-top: 0; border: 1px solid #b3b9bb; position: absolute; z-index: 8999; background: #e9ebeb; display: none; } .sub-menu li { padding: 12px; display: block; width: 180px; text-align: left; border-bottom: 1px solid #b3b9bb; } .ott-top-menu { list-style-type: none; } .ott-top-menu > li { float: left; margin-left: 20px; font-family: 'Montserrat'; font-weight: 500; } .ott-top-menu > li a { text-decoration: none; color: black; } .float-left { float: left; } .float-right { float: right; } .full-width { width: 100%; } #ott-nav-container { width: 580px; } .ott-slogan { margin-left: 23px; display: inline-block; } .MagicMenuCell { background: none; } .login-out-btns { margin-top: 14px; background: none; text-align: right; } .header-actions-link { text-decoration: none; color: black; font-family: 'Montserrat'; font-weight: 400; font-size: 14px; margin-left:14px; } /* Colourize the Icons */ #MagicMenu li#MenuHome > a { background: url(../isp_images/icons/home_icon.svg) left center no-repeat; } #MagicMenu li#MenuWebmail > a { background: url(../isp_images/icons/webmail_icon.svg) left center no-repeat; } #MagicMenu li#MenuSpam > a { background: url(../isp_images/icons/spam_management_icon.svg) left center no-repeat; } #MagicMenu li#MenuEmail > a { background: url(../isp_images/icons/my_email_options_icon.svg) left center no-repeat; } #MagicMenu li#MenuSecurity > a { background: url(../isp_images/icons/security_options_icon.svg) left center no-repeat; } #MagicMenu li#MenuMailboxes > a { background: url(../isp_images/icons/manage_mailboxes_icon.svg) left center no-repeat; } #MagicMenu li#MenuLogout > a { background: url(../isp_images/icons/logout_icon.svg) left center no-repeat; } #MagicMenu li#MenuDomains > a { background: url(../isp_images/icons/manage_domains_icon.svg) left center no-repeat; } #MagicMenu li#MenuMailingLists > a { background: url(../isp_images/icons/mailing_list_icon.svg) left center no-repeat; } div.postLoginAlert .header { color: #FFF; background-color: #623F98; height: 26px; font-size: 2.0em; font-style: bold; text-align: right; vertical-align: center; padding: 3px; padding-right: 3px; padding-right: 6px; } div.postLoginAlert .bigFont { color: #000; } div.postLoginAlert .main img { margin: 5px; content: url(../isp_images/icons/spam_status_icon.png); opacity: 95%; }