/* * ============================== * === 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. * * - 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; } */ #MainHeaderTable tr:first-child { background: url('../isp_images/orange_curve_top.svg') no-repeat; } .MagicContentTable { border-collapse: collapse; border-spacing: 0; background: url(../isp_images/orange_curve_body.svg) no-repeat, linear-gradient(#FFF, #e6e7e8); width: 100%; margin: 0; padding: 0; font-family: Verdana, Tahoma, Arial, sans-serif !important; height: calc(100% - 119px); } h2 { color: #211C21; font-size: 150%; font-weight: bold; margin: 0 0 8px; } .login-info-content h4, #login-form-table h4 { color: #211C21; font-size: 1.4em; font-weight: bold; } #recover-pass-td a { display: inline-block; padding-bottom: 5px; text-decoration: none; color: #211C21; } #recover-pass-td a:hover { color: #F7A600; } #Sidebar h4 { background: transparent url('./pics/bullet.gif') no-repeat 0px 3px; color: #211C21; font-size: 1.2em; font-weight: bold; margin: 13px 5px 0 5px; padding: 0; text-transform: none !important; width: 100%; } .selectedMenuItem { color: #F7A600 !important; } .selectedMenuItem:hover { color: #211C21 !important; } /* Copyright Footer - Yellow with black text */ .MagicCopyRight a { color: #211C21; } .MagicCopyRight a:hover { color: #555555; } .MagicCopyRight { background-color: #F5A81C; color: #211C21; } #MainHeaderSubMenu { text-align: right; padding-top: 1px; background: url(../isp_images/orange_sub_menu_left.png) no-repeat; font-size: 11px; line-height: 1.5em; } #loggedinas strong { color: #211C21; } a.MailboxEdit { color: #211C21; margin: 0 2px 0 1px; } #accountSettings h2 { color: #211C21; font-size: 15px; margin-top: 0; } table.MagicDataTable tr.header th { text-align: center; font-size: 1.1em; electedMenuItem:hover { color: #10456B !important; }font-weight: bold; line-height: 1.3em; color: #211C21; } #EmailOptions td .minibutton a { color: #211C21; font-weight: normal; } a { color: #211C21; } a:hover { color: #F7A600; } #MagicMenu ul.subMenu a:hover { color: #F7A600; } #MagicMenu ul li a:hover { background-color: #EEE; color: #F7A600; } /* Custom Icons and Buttons */ #MagicMenu li#MenuLogout > a { background: url(../isp_images/orange_logout_icon.png) left center no-repeat; } #MagicMenu li#MenuMailboxes > a { background: url(../isp_images/orange_manage_mailboxes_icon.png) left center no-repeat; } #MagicMenu li#MenuSecurity > a { background: url(../isp_images/orange_security_options_icon.png) left center no-repeat; } #MagicMenu li#MenuEmail > a { background: url(../isp_images/orange_my_email_options_icon.png) left center no-repeat; } #MagicMenu li#MenuSpam > a { background: url(../isp_images/orange_spam_management_icon.png) left center no-repeat; } #MagicMenu li#MenuWebmail > a { background: url(../isp_images/orange_webmail_icon.png) left center no-repeat; } #MagicMenu li#MenuHome > a { background: url(../isp_images/orange_home_icon.png) left center no-repeat; } #accountSettings a.ButtonNewMailBox { background: transparent url(../isp_images/orange-button-newmailbox.gif) no-repeat top left; background-position-x: left; background-position-y: top; display: block; height: 28px; width: 121px; } /* right column's box form title */ #login-form-table h4 { visibility: hidden; position: relative; } #login-form-table h4::after { content: 'Sign in to Yucca WebMail'; visibility: visible; position: absolute; top: 0; left: 0; }