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