/**/
/*Usage
Use Service with Style for situations that require only light amounts of body copy. The design also works for clients who have a small image library. You can replace images with graphs or other graphical elements. The 3d shadow around the body copy helps create the sense of highly finished design. Service with Style works well for clients who want to project a feeling of quality.
Features
1. A 3d shadow created with CSS border tags.
2. An offset grid that allows the page to look balanced on a high-resolution monitor.
3. CSS-formatted menu.*/
/*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: 0px; padding: 0px; background-color:#a0a092 }
#background /* This tag calls the non-repeating background image. The 1px top and left borders add a sense of high finish and detail. */ { background-image: url(../images/bg3.jpg); background-repeat: no-repeat; margin-top: 0; margin-left: 0; position: absolute; z-index: 1; width: 100%; height: 594px; border-style: solid; border-width: 1px 0 0 1px; border-color: #ffffff }
#logo_space /* This DIV does not need to align tightly with a particular element. However, keep it left-justified so that it fits-in stylistically with other text elements. */ { text-align: left; margin-top: 0; margin-left: 0; padding: 0; position: absolute; z-index: 2; top: 17px; left: 581px; width: 134px }
font.logotype /* This tag shows how much visual weight the client brand can have. Use the tage as a rough guide. */ { color: #ccc; font-size: 28px; font-family: arial, sans-serif; font-weight: 700; text-decoration: none; letter-spacing: -2px }
/**/
#menu_background { position: absolute; z-index: 3; top: 93px; left: 10px; width: 143px }
#menu_arrow_frame /* The arrow should appear to be an extension of the background into the menu space. That's why the arrow is the same color as the background. */ { background-color: #cfcfc1; position: relative; top: 0; left: 0; width: 143px; height: 26px; border-right: 2px solid #cfcfc1; border-bottom: 1px solid #fff }
.menu_item { color: #000; font-size: 10px; font-family: arial, sans-serif; font-weight: 500; background-color: #c5c5b4; text-align: left; position: relative; width: 143px; height: 15px; border-style: solid; border-width: 0 1px 1px; border-color: #fff }
.menu_chosen /* This DIV is the same colar as the "background" DIV to both hilight the chosen item and reduce the number of colors in the tight menu space. */ { color: #fff; font-size: 11px; font-family: arial, sans-serif; font-weight: 500; background-color: #a0a092; text-align: left; position: relative; width: 143px; height: 15px; border-style: solid; border-width: 0 1px 1px; border-color: #fff }
a:link { color: #333; font-size: 11px; font-family: arial, sans-serif; font-weight: 400; text-decoration: none }
a:visited { color: #333; font-size: 11px; font-family: arial, sans-serif; font-weight: 400; text-decoration: none }
a:hover { color: #000; font-size: 11px; font-family: arial, sans-serif; font-weight: 800; text-decoration: none; background-color: #fff; display: block }
a:active { color: #333; font-size: 11px; font-family: arial, sans-serif; font-weight: 400; text-decoration: none }
/**/
#block_on_left /* This DIV visually extends the page to the left. */ { background-color: #55554e; position: absolute; z-index: 3; top: 372px; left: 1px; width: 142px; height: 91px }
#block_on_right /* This DIV adds interest by breaking the linecreated by the bottom alignment of the "block_on_left," "image_on_left" and "copy_background." */ { background-color: #55554e; position: absolute; z-index: 3; top: 465px; left: 576px; width: 283px; height: 129px }
#image_on_left { position: absolute; z-index: 3; top: 372px; left: 144px; width: 142px; height: 91px }
/**/
/*The blank margin DIVs create a space for the body text to flow around. The DIVs must appear on the page before the main copy.*/
#copy_background /* This flat color field contains the elements that place and hold the main copy. Adding light border color in the top and left, and dark color in the right and bottom creates a subtle 3d shadow. */ { background-color: #c5c5b4; padding-top: 0; padding-left: 0; position: absolute; z-index: 4; top: 93px; left: 288px; width: 430px; height: 100%; border-style: solid; border-width: 1px; border-color: #fff #55554e #55554e #fff }
#margin_left_top { width: 13px; height: 100%; visibility: visible; float: left; clear: left }
#margin_left_middle { width: 150px; height: 100px; visibility: visible; float: left; clear: left }
#margin_left_bottom { width: 13px; height: 95px; visibility: visible; float: left; clear: left }
#margin_right { width: 15px; height: 100%; visibility: visible; float: right; clear: right }
.initial_capital /* The text block starts with an initial capital set at slightly less than 2 times the height of the body text. */ { color: #fff; font-size: 28px; font-family: arial, sans-serif; font-weight: bold ; line-height: 16px; }
.body_text { color: #000; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 18px; }
/**/
#image_inset /* Different browsers read the margin DIVs differently. The "inset_image" is set on a layer above the margins so that it renders the same across browsers. */ { position: absolute; z-index: 8; top: 279px; left: 288px; width: 142px; height: 92px; border-top: 1px solid #fff; border-right: 1px solid #fff; border-bottom: 1px solid #fff }