/* CSS Document */ body { margin: 0 0 0 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; background-color: #FFFFFF; } /* The main content Table */ #maincontent { font-size: 12px; color: #333366; letter-spacing: 1px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; background-color: #FFFFFF; } /* By adding a Tag "p" after the maincontent ID Selector we create what is called a Descendant Selector. In this instance the rule is defining styles for all paragraphs that are children (descendants) of the maincontent table. Another way of saying this is "all paragraphs inside maincontent". We set all paragraphs in the main content area to have Line height set to 150% for readability and text justified. Margin is set in shorthand to 8px top and bottom and zero left and right. In shorthand, the presence of two values means the first one is for Top and Bottom while the second is for Left and Right. */ #maincontent p { margin: 15px 0; line-height: 120%; text-align: justify; } #maincontent ul { margin: .5em; padding: .5em; } #maincontent ol { margin: 1em; padding: 1em; } /* Heading Rules */ /* The H1 is used to wrap the Logo, representing the top of your page's hierarchy */ h1 {margin: 0;} /* Additional Headings font type for h2 only Remove font-weight for H2 to make it render in default bold weight Font size is based on its container. An H2 in maincontent, for example, would be 200% x 85% Substantial top marigns are set for headings to provide nice separation of sections. */ h2 { font-size: 18px; font-family: Arial, Helvetica, sans-serif; line-height: 20px; font-weight: bold; color: #333366; letter-spacing: 2px; text-align: center; } h3 { font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #333366; text-align: left; font-style: italic; margin-bottom: 1px; } h5 { font-size: 12px; font-family: Arial, Helvetica, sans-serif; line-height: 20px; font-weight: bold; color: #333366; letter-spacing: 2px; } /* Link styles for Main Content only Active and Focus trigger the color change in IE-PC and other modern browsers when tabbing through the links with keyboard. */ #maincontent a:link { color: #CC0000; text-decoration: none; } #maincontent a:visited { color: #CC0000; text-decoration: none; } #maincontent a:hover, #maincontent a:active, #maincontent a:focus { color: #333366; text-decoration: none; } /* Link styles for the Triggers Set to block to make link fill up entire layer with medium gray background color that shows through the transparent fill of the trigger images */ .p7snaptrigger { padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; font-size: 11px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #FFFFFF; background-color: #CC0000; letter-spacing: 2px; } .p7snaptrigger a { color: #FFFFFF; text-decoration: none; } /* When the trigger images are hovered over, the background color changes to white. We don't change text color because the link text is actually the non-transparent portion of the trigger image. Active and Focus trigger the color change in IE-PC and other modern browsers when tabbing through the links with keyboard. */ .p7snaptrigger a:hover, .p7snaptrigger a:active, .p7snaptrigger a:focus { color: #333366; } /* The submenu links are in paragraphs, so we set the margin to zero so there is no gap between links */ .p7submenus p { margin: 0; text-align: left; } /* Submenu Link Styles Use a combined selector for a and a:visited. Set padding in shorthand to 1px on top and bottom, 8px right and 12px left. Set display to block so entire link box, including padding is clickable. Set border to 1px solid. Set border colors in shorthand to Light Gray on top and left - and Charcoal Gray on right and bottom. This combination of colors creates a raised button-type effect. Set background color to dark gray, text to medium gray and turn off underlines. */ .p7submenus a, .p7submenus a:visited { display: block; padding: 1px 8px 1px 12px; background-color: #333366; color: #FFFFFF; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 12px; border-top: 0px none #FFFFFF; border-right: 0px none #FFFFFF; border-bottom: 0px solid #FFFFFF; border-left: 0px none #FFFFFF; font-weight: bold; letter-spacing: 2px; } /* Change background and text colors when links are hovered over. Use a combined selector for hover, active, and focus. Active and Focus trigger the color change in IE-PC and other modern browsers when tabbing through the links with keyboard. */ .p7submenus a:hover, .p7submenus a:active, .p7submenus a:focus { background-color: #FFFFFF; color: #CC0000; border-top: #CCCC99; } #insidenavbar { font-size: 12px; letter-spacing: 1px; font-family: Arial, Helvetica, sans-serif; background-color: #CCCC99; } #insidenavbar a, #insidenavbar a:visited { display: block; padding: 1px 8px 1px 8px; color: #333333; text-decoration: none; border-top: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; } #insidenavbar a:hover, #insidenavbar a:active #insidenavbar a:focus { color: #FF9900; background-color: #FFFFFF; } /* The footer is a Static DIV set with a substantial top margin to separate it from the main content above. Font size is 75% of the global font size. Padding top is set to 6px to provide separation between the footer contents and the 2px wide dotted border above it. */ #footer { padding: 1px 8px 1px 12px; font-size: 10px; color: #FFFFFF; background-color: #CC0000; } #footer p { margin: 0; padding: 6px 0 0 6px; border-top: 1px solid #A69490; } /* Link styles for Footer Content only Active and Focus trigger the color change in IE-PC and other modern browsers when tabbing through the links with keyboard. */ #footer a:link {color: #FFFFFF; text-decoration: none;} #footer a:visited { color: #FFFFFF; text-decoration: none; } #footer a:hover, #footer a:active, #footer a:focus {color: #FFFFFF;} #lefttitle { padding: 3px 5px 0px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: 15px; color: #FFFFFF; } #lefttitle a:link { color: #FFFFFF; text-decoration: none;} #lefttitle a:visited { color: #FFFFFF; text-decoration: none; } #lefttitle a:hover, #lefttitle a:active, #lefttitle a:focus {color: #FFFFFF;} #toptitle { padding: 1px 8px 1px 12px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; line-height: 20px; letter-spacing: 1px; color: #FFFFFF; text-align: right; background-color: #CC0000; font-weight: bold; } #leftwelcome { padding: 1px 8px 1px 12px; font-size: 11px; font-style: normal; line-height: 20px; color: #333366; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; letter-spacing: 1px; }