/**/
/*Usage
Use the Business Class template for corporate clients who want something fresh yet easy to navigate.
Features
1. CSS + javascript dropdown menu. The code is simple and easy to understand.
2. A foreground image and menu that float on a background image. The effect is to help open up the page.
3. Inset right-side image. Body copy appears to flow around the image in a print-style layout.*/
/*About DIVs
Think of large DIVs as floors in a building. The elements on the DIV are similar to furniture. Each piece has a location and function. Think of smaller DIVs as rooms that have page elements inside them.*/
/*About Web-Named Palettes
Use the "web-named" palette when you want to approximate client colors. The colors will use the hex value convention of web-safe colors, for example #a0a092, but the range will be far beyond the 216 web-safe palette. Remember 2/3 Rule when you create a web-named palette:
The color will be pastel if the first two values are identical. An example is the custom warm gray that's in the "Industrial Design" palette. The color is #a0a092. It's grayish brown because the first two values are 2/3 of a gray tone. In this example, the tone is #a0a0a0. The third value is what shifts the gray tone toward the brown.*/
/**/
body { margin: 0; padding: 0;}
/**/
#menu_background /* This DIV contains the framed arrow. The menu uses two DIVs. Both sit one layer above the menu box. The "sub_menu_background" DIV stays invisible until triggered by the text link in the "show_menu" DIV. "sub_menu_background" becomes invisible again when you take the mouse off it. Javascript controls the visibility. The "a" and "a:hover" tags control mouseover and hover affects. */ { background-color: #cfcfc1; position: absolute; z-index: 3; top: 197px; left: 1px; width: 212px; height: 45px; border: solid 1px #999 }
#menu_arrow_frame { background-color: #fff; position: absolute; top: 0; left: 0; width: 69px; height: 43px }
#menu_arrow /* You can make the arrow the same color as the pop-up menu background, or it can be a darker or lighter shade of that color. Remember to keep the contrast betwen the arrow and the "menu_arrow_background" fairly low. You want the arrow to point to the menu instead of draw attention to itself. */ { position: absolute; top: 6px; left: 8px; }
#show_menu /* The "sub_menu_background" DIV becomes visible when you rollover the "show_menu" DIV. Javascript controls the visibility. The "a" and "a:hover" tags control mouseover and hover affects. */ { color: #000; font-size: 10px; font-family: arial, sans-serif; font-weight: 400; background-color: #c5c5b4; text-align: left; padding-left: 2px; position: absolute; z-index: 4; top: 220px; left: 80px; width: 130px; height: 19px; border-style: solid; border-width: 1px; border-color: #fff #fff #585853 }
#sub_menu_background /* The "sub_menu_background" DIV has a default setting of "visibility: hidden." Javascript and the "show_menu" DIV control visibility. "sub_menu_background" becomes invisible again when you take the mouse off it. */ { visibility: hidden; position: absolute; z-index: 5; top: 240px; left: 80px; width: 130px }
.sub_menu { color: #000; font-size: 10px; font-family: arial, sans-serif; font-weight: 400; text-decoration: none; text-align: left; margin-top: 0; margin-left: 0; width: 140px; height: 18px; border-style: solid; border-width: 0 1px 1px; border-color: #666 }
.sub_menu a { color: #970000; font-size: 11px; font-family: arial, sans-serif; font-weight: 400; text-decoration: none; background-color: #d8d8d8; text-indent: 2px; display: block; width: 140px; height: 18px }
.sub_menu a:hover { color: #333; font-size: 11px; font-family: arial, sans-serif; font-weight: 400; text-decoration: none; background: #fff; text-align: center; display: block; width: 140px; height: 18px }
/**/
#logo_space /* This DIV loosely aligns the left side of the client logo with the right side of the "framed_image_on_left." */ { text-align: left; margin-top: 30px; margin-left: 0; padding: 0; position: absolute; z-index: 2; left: 432px ; margin-right: 0; }
font.logotype /* This tag shows how much visual weight the client brand can have. Use the tag as a rough guide. */ { color: #970000; font-size: 28px; font-family: arial, sans-serif; font-weight: normal; text-decoration: none; margin-top: 10px; }
#section_id /* The large ID helps the visitor to quickly identify the section. You can keep the alpha-numeric setup of design01 or you can use graphics. */ { color: #d8d8d8; font-size: 24px; font-family: arial, sans-serif; font-weight: 400; text-align: right; letter-spacing: -1px; position: absolute; z-index: 3; }
.section_header /* The header identifies the section by name. Adjust the left position in order to align the header with the left edge of the image below it. The header should be a slightly darker or lighter shade of the "section_id" color. The header should be approximately the x-height of an alpha-numeric section ID. The x-height is the height of a lowercase letter "x." It is also the height of most lowercase letters of a typical font. */ { color: #700; font-size: 22px; font-family: arial, sans-serif; text-align: right; }
.read { color: #700; font-size: 24px; font-family: arial, sans-serif; text-align: left; letter-spacing: -1px; }
#left_frame /* The left frame contains the CSS menu navigation and the left inset image. */ { position: absolute; z-index: 3; top: 95px; left: 1px; width: 430px; height: 361px; border: solid 1px #999 }
#framed_image_on_left { position: absolute; top: 2px; left: 216px; width: 209px; height: 352px; border: solid 1px #fff }
/**/
#copy_background /* This flat color field contains the frame that holds the main copy. */ { background-color: #d8d8d8; background-repeat: repeat; background-position: left 0; padding-top: 0; position: absolute; z-index: 3; top: 0; width: 288px; height: auto; border-top: 1px none #fff ; border-right-style: none; border-right-width: 2px; border-bottom-style: none; border-left-style: none; outline-style: none; }
.initial_capital /* The text block starts with an initial capital set at slightly less than 2 times the height of the body text. */ { color: white; font-size: 28px; font-family: arial, sans-serif; font-weight: bold }
#body_text_frame /* This DIV is the main element wrapped inside the "copy_background" DIV. "copy_frame" contains the body text. This DIV is narrow so the surrounding space of the copy_background DIV can serve as margins. Different browsers read the MARGIN and PADDING tags differently. Putting a narrow DIV inside a wider one will render the same across browsers. */ { padding-top: 89px; left: 12px; clear: none }
.body_text { color: black; font-size: 11px; font-family: arial, sans-serif; font-weight: 400 }
#inset_margin_top /* This DIV creates a blank space for the body text to flow around. */ { width: 145px; height: 252px; float: right; clear: right }
#inset_margin_bottom /* This DIV allows the inset image to be flush with the right side of the "copy_background" while creating a right margin for the body text. */ { width: 15px; float: right; clear: right }
#inset_image_on_right { z-index: 5; top: 0; width: 127px; clear: none; border-color: #fff; border-style: none; outline-style: none; }
/**/
.rubrik /* The header identifies the section by name. Adjust the left position in order to align the header with the left edge of the image below it. The header should be a slightly darker or lighter shade of the "section_id" color. The header should be approximately the x-height of an alpha-numeric section ID. The x-height is the height of a lowercase letter "x." It is also the height of most lowercase letters of a typical font. */ { color: #777; font-size: 22px; font-family: arial, sans-serif; padding-top: 130px; }