/* * ============================== * === 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, #MainHeaderTable tr:first-child { background: none; } #MagicBody { margin-top: 0px; } #MainHeaderSubMenu { background: none; } .MagicOuterTable { background-color: white; border: none; } #MagicBody { background-color: white; background: none; } .magic-unauthenticated .MagicMenuCell { display: none; } .MagicContentTable { background: none; } .header-actions-link { text-decoration: none; color: black; font-size: 14px; border: 1px solid black; padding: 7px 15px; border-radius: 5px; } #header-table td.nopad a.nopad { float: left; margin: 10px; } .logo-img { max-width: 300px; max-height: 75px; margin-left: 16px; } .magic-unauthenticated .MagicContentCell { padding: 0px 24px 24px 24px; } .login-info-content { vertical-align: top; width: 475px; display: inline-block; } #login-form-wrapper { border: 1px solid black; display: inline-block; width: 400px; margin-left: 35px; /*NEW */ padding: 32px 10px 32px 10px; border: 1px solid #1a3966; border-radius: 8px; /*NEW */ } .ott-text-header { color: #1A3966; } .ott-main-head { font-size: 21pt; } .ott-sub-head { font-size: 18pt; } .ott-text-reg { font-size: 14px; line-height: 1.6; } .MagicCompanyFooter { text-align: center; background-color: #f0f1f2; padding-bottom: 5px; color: #61696e; } .MagicCompanyFooter td { line-height: 2; border-top: 4px solid #caced1; } .MagicCopyRight a { text-decoration: none; color: white; } .MagicCopyRight { background-color: #1a3966; height: 47px; color: white; } .MagicMenuCell { background: none; } #Sidebar { background: none; } #MagicWrapper { border-left: 1px solid #1a3966; border-right: 1px solid #1a3966; width: 1140px; height: auto; }