/**
 * Style sheet for the main site index page, which has a different
 * layout from the rest of the pages on the site.
 *
 * Copyright 2008 Help Me 2 Learn Company.
 *
 * Written by Marshall Elfstrand.
 */


/**
 * Page style.
 *
 * This applies the blue-to-gray shading down the page
 * and sets the main font.  It also hides all horizontal
 * rules (<hr>) since they are only present for browsers
 * that do not understand CSS.
 */
body {
    background: #FBFAF5 url(/common/img/background.gif) repeat-x top;
    font-family: Helvetica, Arial, sans-serif;
    margin: 0px;
    padding: 0px;
}
hr {
    display: none;
}


/**
 * Page header.
 *
 * The company name exists in the HTML as an H1, which is replaced by the
 * company logo using the styles here.  The rest of the text at the top
 * is defined using H2 and H3 tags.
 *
 * The "additional links" (Company and Sitemap) are positioned in the
 * upper right in small text.
 */
h1 {
    /* Themed background image will be added here. */
    display: block;
    height: 110px;
    left: 28px;
    margin: 0px;
    position: absolute;
    top: 10px;
    width: 920px;
}
h1 span {
    display: none;
}
h2, h3 {
    display: none;
}
#common-header-additionalLinks {
    left: 780px;
    margin: 0px;
    position: absolute;
    top: 40px;
}
#common-header-additionalLinks li {
    border-right: 1px solid #A0A0A0;
    display: inline;
    font-size: 9px;
    padding-left: 6px;
    padding-right: 6px;
}
#common-header-additionalLinks li a {
    color: #808080;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}


/**
 * About box.
 *
 * The about box appears on the left-hand side.
 * Most of the text is rendered in small type, except
 * for the company phone number (defined in a STRONG span)
 * which is rendered in larger bright type.
 *
 * The Better Business Bureau icon appears here as well.
 */
#mainOverview {
    color: #606060;
    font-size: 11px;
    font-weight: bold;
    left: 29px;
    top: 155px;
    position: absolute;
    text-align: right;
    width: 176px;
}
#mainOverview strong a {
    /* Themed background image will be added here. */
    display: block;
    height: 61px;
    margin-bottom: 16px;
    width: 176px;
}
#mainOverview strong a span {
    display: none;
}
#mainOverview p {
    margin-bottom: 16px;
}
#mainOverview p strong {
    color: #E05000;
    display: block;
    font-size: 18px;
    font-stretch: expanded;
    margin-top: 2px;
    margin-bottom: 2px;
}
#bbbLink {
    background: url(/common/img/bbb-online.gif) no-repeat top left;
    display: block;
    height: 40px;
    margin-left: 75px;
    margin-top: 32px;
    width: 105px;
}
#bbbLink span {
    display: none;
}


/**
 * Shared box attributes.
 *
 * The "For School" and "For Home" boxes are rendered in much the same
 * way as the "common box" in site.css, except they have different top
 * sections for the characters that extend above the box area.  The
 * boxes have a common style for text and the blue strip that goes
 * across the middle of each box.
 */
div.main-box {
    background: url(/common/img/main/box-middle.gif) repeat-y top left;
    margin: 0px;
    padding: 0px;
    width: 353px;
}
div.main-box-bottom {
    background: url(/common/img/main/box-bottom.gif) no-repeat bottom left;
    height: 12px;
    margin: 0px;
    width: 353px;
}
div.main-box p {
    margin: 12px 16px 0px 16px;
    line-height: 18px;
}
div.main-box p.main-box-bar {
    background: #008DAB;
    color: #FFFFFF;
    font-size: 13px;
    margin-top: 0px;
    margin-left: 3px;
    margin-right: 3px;
    padding: 4px 12px 4px 12px;
    text-transform: uppercase;
}
div.main-box p.main-box-text {
    color: #505050;
    font-size: 13px;
    font-weight: bold;
    height: 9em;
}


/**
 * School box.
 *
 * The "For School" box has its own styles for its top section,
 * its "Go" button, and its "Our School Site" button.
 */
#mainSchoolSection {
    position: absolute;
    top: 116px;
    left: 220px;
}
#mainSchoolSection h4 {
    background: url(/common/img/main/box-top-school.gif) no-repeat top left;
    margin: 0px;
    padding: 0px;
    width: 353px;
    height: 200px;
}
#mainSchoolSection h4 span {
    display: none;
}
#mainSchoolSection h4 a {
    background: url(/common/img/main/button-school-go.gif) no-repeat top left;
    display: block;
    height: 59px;
    left: 278px;
    position: relative;
    top: 137px;
    width: 59px;
}
#mainSchoolSection p a {
    background: url(/common/img/main/button-school-site.gif) no-repeat top left;
    display: block;
    height: 31px;
    left: 205px;
    position: relative;
    width: 122px;
}
#mainSchoolSection p a span {
    display: none;
}


/**
 * Home box.
 *
 * The "For Home" box has its own styles for its top section,
 * its "Go" button, and its "Our Home Site" button.
 */
#mainHomeSection {
    position: absolute;
    top: 116px;
    left: 587px;
}
#mainHomeSection h4 {
    background: url(/common/img/main/box-top-home.gif) no-repeat top left;
    margin: 0px;
    padding: 0px;
    width: 353px;
    height: 200px;
}
#mainHomeSection h4 span {
    display: none;
}
#mainHomeSection h4 a {
    background: url(/common/img/main/button-home-go.gif) no-repeat top left;
    display: block;
    height: 59px;
    left: 280px;
    position: relative;
    top: 137px;
    width: 59px;
}
#mainHomeSection p a {
    background: url(/common/img/main/button-home-site.gif) no-repeat top left;
    display: block;
    height: 31px;
    left: 214px;
    position: relative;
    width: 122px;
}
#mainHomeSection p a span {
    display: none;
}


/**
 * Quick Links.
 *
 * The "Quick Links" on the main page bear no relation to the quick link
 * menu on the rest of the pages.  These are displayed as a box with
 * four icons in it, providing shortcuts to some commonly-accessed areas
 * of the site.
 *
 * Each icon is a styled list item, extracted from the normal layout and
 * positioned precisely in the box.
 */
#mainQuickLinks {
    background: url(/common/img/main/quick-links-box.gif) no-repeat top left;
    height: 150px;
    left: 586px;
    position: absolute;
    top: 545px;
    width: 355px;
}
#mainQuickLinks h4 {
    color: #4888A0;
    margin: 14px 16px 14px 16px;
}
#mainQuickLinks ul {
    margin: 0px;
    padding: 0px;
}
#mainQuickLinks li {
    background: url(/common/img/main/quicklink-box.gif) no-repeat top left;
    display: block;
    height: 96px;
    position: absolute;
    text-align: center;
    top: 40px;
    width: 72px;
}
#mainQuickLinks li a {
    color: #808080;
    display: block;
    font-size: 12px;
    height: 96px;
    padding-top: 70px;
    text-decoration: none;
    white-space: nowrap;
    width: 72px;
}
#mainQuickLinks li#mainQuickLinks-trials {
    left: 16px;
}
#mainQuickLinks li#mainQuickLinks-trials a {
    background: url(/common/img/main/quicklink-icon-trial.gif) no-repeat 12px 12px;
}
#mainQuickLinks li#mainQuickLinks-support {
    left: 100px;
}
#mainQuickLinks li#mainQuickLinks-support a {
    background: url(/common/img/main/quicklink-icon-support.gif) no-repeat 12px 12px;
}
#mainQuickLinks li#mainQuickLinks-contact {
    left: 184px;
}
#mainQuickLinks li#mainQuickLinks-contact a {
    background: url(/common/img/main/quicklink-icon-contact.gif) no-repeat 12px 12px;
}
#mainQuickLinks li#mainQuickLinks-sitemap {
    left: 268px;
}
#mainQuickLinks li#mainQuickLinks-sitemap a {
    background: url(/common/img/main/quicklink-icon-sitemap.gif) no-repeat 12px 12px;
}


/**
 * Mailing list link.
 *
 * The "Join our mailing list" message is centered below the "For School"
 * box.  It is made as wide as the "Privacy by SafeSubscribe" image that
 * appears below it.
 */
#mainMailingList {
    position: absolute;
    left: 310px;
    top: 580px;
}
#mainMailingList-join {
    background: #FFFFFF;
    border: 1px solid #9ACD80;
    font-size: 14px;
    height: 44px;
    margin-bottom: 0px;
    width: 172px;
}
#mainMailingList-join a {
    background: url(/common/img/main/mail.gif) no-repeat 104px 2px;
    color: #339900;
    display: block;
    font-weight: bold;
    margin: 4px 24px 4px 24px;
    text-decoration: none;
}
#mainMailingList-join a span {
    display: block;
    margin-top: 2px;
    margin-left: 2px;
}
#mainMailingList-privacy {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    font-size: 10px;
    margin-top: 4px;
}
#mainMailingList-privacy a {
    background: url(http://img.constantcontact.com/ui/images1/safe_subscribe_logo.gif) no-repeat top left;
    display: block;
    margin: 2px;
    width: 168px;
    height: 14px;
}
#mainMailingList-privacy a em {
    display: none;
}