/**
 * Style sheet shared among all pages on the Help Me 2 Learn company
 * web 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.
 */
body {
    background: #FBFAF5 url(/common/img/background.gif) repeat-x top;
    font-family: Helvetica, Arial, sans-serif;
    margin: 0px;
    padding: 0px;
}


/**
 * Page header.
 *
 * The company name exists in the HTML as an H1, which is replaced by the
 * company logo using the styles here.  The "For More Information" text is
 * defined as a paragraph.
 */
#common-header h1 {
    margin: 0px;
}
#common-header h1 a {
    /* Themed background image will be added here. */
    display: block;
    height: 69px;
    width: 201px;
}
#common-header h1 span {
    display: none;
}
#common-header p {
    color: #FFFFFF;
    position: absolute;
    font-size: 9px;
    margin: 8px 32px 8px 32px;
    text-align: center;
    text-transform: uppercase;
}
#common-header p strong {
    display: block;
    font-size: 16px;
    font-weight: normal;
    margin-top: 4px;
    text-transform: lowercase;
}


/**
 * Page header links.
 *
 * The links to the main sections of the site are defined as unordered
 * lists.  The more prominent links are given icons here and positioned
 * across the top of the page, while the less prominent links (Company
 * and Sitemap) are positioned in the upper-right in smaller text.
 */
#common-header-mainLinks {
    background: url(/common/img/header-navbar-background.gif) repeat-x top;
    height: 45px;
    margin: 0px;
}
#common-header-mainLinks li {
    display: block;
    position: absolute;
    text-align: center;
    top: 0px;
    width: 64px;
}
#common-header-mainLinks li a {
    color: #FFFFFF;
    display: block;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    width: 64px;
}
#common-header-mainLinks #common-header-link-company {
    left: 300px;
}
#common-header-mainLinks #common-header-link-company a {
    background: url(/common/img/icon-company.png) no-repeat top;
    padding-top: 76px;
}
* html #common-header-mainLinks #common-header-link-company a { /* IE hack */
    background: none;
    cursor: pointer;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/common/img/icon-company.png",sizingMethod="crop");
}
#common-header-mainLinks #common-header-link-company a:hover {
    color: #E0C0FF;
}
#common-header-mainLinks #common-header-link-school {
    left: 400px;
}
#common-header-mainLinks #common-header-link-school a {
    background: url(/common/img/icon-school.png) no-repeat top;
    padding-top: 76px;
}
* html #common-header-mainLinks #common-header-link-school a { /* IE hack */
    background: none;
    cursor: pointer;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/common/img/icon-school.png",sizingMethod="crop");
}
#common-header-mainLinks #common-header-link-school a:hover {
    color: #A0F8FF;
}
#common-header-mainLinks #common-header-link-home {
    left: 500px;
}
#common-header-mainLinks #common-header-link-home a {
    background: url(/common/img/icon-home.png) no-repeat top;
    padding-top: 76px;
}
* html #common-header-mainLinks #common-header-link-home a { /* IE hack */
    background: none;
    cursor: pointer;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/common/img/icon-home.png",sizingMethod="crop");
}
#common-header-mainLinks #common-header-link-home a:hover {
    color: #C0FF80;
}
#common-header-mainLinks #common-header-link-support {
    left: 600px;
}
#common-header-mainLinks #common-header-link-support a {
    background: url(/common/img/icon-support.png) no-repeat top;
    padding-top: 84px;
}
* html #common-header-mainLinks #common-header-link-support a { /* IE hack */
    background: none;
    cursor: pointer;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/common/img/icon-support.png",sizingMethod="crop");
}
#common-header-mainLinks #common-header-link-support a:hover {
    color: #FFFFA0;
}
#common-header-additionalLinks {
    left: 770px;
    margin: 0px;
    padding-left: 20px;
    position: absolute;
    top: 38px;
    white-space: nowrap;
}
#common-header-additionalLinks li {
    border-right: 1px solid #C0C0C0;
    display: block;
    float: left;
    font-size: 9px;
    height: 9px;
    padding: 6px;
    padding-left: 6px;
    padding-right: 6px;
}
#common-header-additionalLinks li a {
    color: #808080;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}
#common-header-link-cart {
    background: url(/common/img/cart.png) no-repeat top left;
}
#common-header-link-cart a {
    padding-left: 20px;
}
* html #common-header-link-cart { /* IE hack */
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/common/img/cart.png",sizingMethod="crop");
}


/**
 * Quick Menu.
 *
 * The Quick Menu appears on the right-hand side of the page and moves
 * with it as the page scrolls.  Currently the entire menu is an image map;
 * this will eventually be replaced with an HTML-generated menu.
 */
#common-quickMenu {
    left: 870px;
    position: fixed;
    top: 134px;
    z-index: 80;
}
* html #common-quickMenu { /* IE hack */
    /* IE6 does not support position:fixed */
    position: absolute;
}


/**
 * Section Menu.
 *
 * Section menus appear at the left-hand side of most pages.  They contain
 * links to the pages in the section.  The set of links is defined as an
 * unordered list in the HTML.
 *
 * The section menu always contains an H2 element that defines the title
 * of the section inside a SPAN.  The H2 element is given a 201x42 image
 * background in the style sheet for the section.
 */
#common-menu {
    position: absolute;
    left: 0px;
    top: 134px;
    width: 201px;
}
#common-menu h2 {
    height: 42px;
    margin: 0px;
    width: 201px;
}
#common-menu h2 span {
    display: none;
}
#common-menu ul {
    list-style: square inside;
    margin-top: 4px;
    margin-left: 0px;
    padding: 0px 0px 0px 16px;
    width: 168px;
}
#common-menu ul li {
    border-bottom: 1px solid #C0C0C0;
    color: #C00080;
    font-size: 10px;
    padding-top: 6px;
    padding-bottom: 5px;
    padding-left: 8px;
    white-space: nowrap;
}
#common-menu ul li a {
    color: #606060;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}
#common-menu ul li a:hover {
    color: #C00080;
}


/**
 * Section Submenu.
 *
 * Some pages have a sub-list of menu items included in the section menu
 * on the left-hand side of the page.  These are styled with a background
 * color and indented from the rest of the list.
 */
#common-menu ul.common-submenu {
    list-style-type: none;
    list-style-position: outside;
    padding-left: 0px;
}
* html #common-menu ul.common-submenu { /* IE hack */
    /* IE needs the UL width and margin fixed to prevent
       problems with the display of the container LI */
    margin-bottom: 0px;
    width: 142px;
}
#common-menu ul.common-submenu li {
    background: #F0F1E0;
    border-bottom: 1px solid #FAF8F3;
    display: block;
    margin-left: 10px;
    padding: 2px 4px 2px 4px;
    width: 142px;
}
#common-menu ul.common-submenu li a {
    color: #606060;
    display: block;
    font-size: 12px;
    font-weight: normal;
}
#common-menu ul.common-submenu li a:hover {
    color: #000000;
}


/**
 * Top graphic.
 *
 * Each section has its own graphic that is placed at the top of each
 * page.  To improve load times, this graphic is compressed down to
 * an 8-bit image with a single bit alpha.
 *
 * Normally, this would mean that the rounded edges of the graphic would
 * look pixelated, because we don't have a full alpha channel to smooth
 * them.  Since the graphic has a solid color border, however, we can work
 * around this.  We supply an additional 24-bit background image with full
 * 8-bit alpha that is a solid color -- the color of the border.  This
 * provides the smooth rounded corners.  Because it is a solid color, it
 * compresses extremely well.  The section-specific image does not include
 * the borders; it only includes the content inside the border, composited
 * against the border color.  When the section-specific image is placed over
 * the background image, it smoothly blends into the background color
 * (because it was pre-composited that way), and the background image
 * smoothly blends into the rest of the page (because it has a full alpha
 * channel).
 */
#common-superstar-banner-background {
    background: url(/common/img/top-graphic-background.png) no-repeat top left;
    height: 135px;
    margin-top: 20px;
    width: 650px;
    position: relative;
}
* html #common-superstar-banner-background { /* IE hack */
    background: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/common/img/top-graphic-background.png",sizingMethod="crop");
}


/**
 * Content area.
 *
 * The content area is positioned here, and the H3 used as the header
 * for the content is styled with an icon next to it.
 */
#common-content {
    margin-left: 201px;
    margin-top: 20px;
    width: 649px;
}
h3 {
    background: url(/common/img/computer-icon.gif) no-repeat 4px 0px;
    border-bottom: 1px solid #C0C0C0;
    font-size: 16px;
    margin-top: 22px;
    margin-bottom: 0px;
    padding-top: 4px;
    padding-left: 34px;
    padding-bottom: 10px;
}
h4 {
    color: #E87000;
    font-size: 15px;
    padding-left: 12px;
}
#common-content p {
    color: #404040;
    font-size: 13px;
    line-height: 20px;
    margin-top: 8px;
    padding-left: 12px;
    padding-right: 8px;
}
#common-content p a {
    color: #408000;
}
#common-content ul {
    margin-top: 8px;
}
#common-content li {
    color: #404040;
    font-size: 13px;
    line-height: 20px;
}
#common-content li a {
    color: #408000;
}


/**
 * Breadcrumbs.
 *
 * The "breadcrumb" bar (showing the path to the current page) is displayed
 * floated to the right of the content header.  It is a simple set of links,
 * separated by greater-than symbols (the ">" character entity).
 */
#common-breadcrumbs {
    color: #000000;
    float: right;
    font-size: 12px;
    margin-top: 28px;
}
#common-breadcrumbs a {
    color: #808080;
    text-decoration: none;
    padding-left: 4px;
    padding-right: 4px;
}
#common-breadcrumbs a:hover {
    color: #60A000;
    text-decoration: underline;
}


/**
 * Content sub-header.
 *
 * Some of the content sections have an additional header that appears
 * below the border but above any boxes.
 */
#common-content #common-content-subHeader {
    color: #707068;
    font-size: 16px;
    margin-top: 20px;
    padding-left: 4px;
}
#common-content #common-content-subHeader strong {
    padding-right: 4px;
}


/**
 * Tabbed panels.
 *
 * An unordered list (UL) can be styled as a set of tabs that display
 * different content when clicked.  See tabs.js for an easy way of
 * setting up tabbed panels.
 */
ul.common-tabs {
    border-bottom: 1px solid #C0C0C0;
    height: 29px;
    list-style-type: none;
    margin: 0px;
    padding: 16px 4px 0px 4px;
}
* html ul.common-tabs { /* IE hack */
    /* Setting a height on IE6 seems to make it attempt to contain the
       floated elements, so we remove the height and use padding instead. */
    height: auto;
    padding-bottom: 29px;
}
ul.common-tabs li {
    background: #FFFFFF;
    border-top: 1px solid #C0C0C0;
    border-right: 1px solid #C0C0C0;
    color: #8870C0;
    cursor: pointer;
    float: left;
    font-size: 13px;
    font-weight: bold;
    height: 20px;
    margin: 0px;
    padding: 4px;
    text-align: center;
    width: 150px;
}
ul.common-tabs li.common-tabs-firstTab {
    border-left: 1px solid #C0C0C0;
}
ul.common-tabs li.common-tabs-selectedTab {
    background: none;
    border-bottom: 1px solid #FAF8F3;
    color: #000000;
    cursor: default;
}


/**
 * Rounded-corner box.
 *
 * This implements a fixed-width box on the page with a rounded border.
 * This style of box is used by the page footer and by the contents of
 * several pages.
 *
 * The box style is used by defining a DIV with the class "common-box",
 * and then placing two DIVs inside of it, one above the content and
 * one below it.  The top DIV has the class "common-box-top", and the
 * bottom DIV has the class "common-box-bottom".
 */
div.common-box {
    background: url(/common/img/box-middle.gif) repeat-y;
    margin-bottom: 20px;
    width: 649px;
}
div.common-box-top {
    background: #FBFAF5 url(/common/img/box-top.gif) no-repeat;
    font-size: 0px;
    height: 12px;
    width: 649px;
}
div.common-box-bottom {
    background: #FBFAF5 url(/common/img/box-bottom.gif) no-repeat;
    clear: both;
    font-size: 0px;
    height: 12px;
    width: 649px;
}


/**
 * Product list table.
 *
 * The Home and School sections each have a product list page.
 * This page contains two tables (one for Language Arts and one for Math)
 * with common layouts.
 */
.common-product-table {
   width: 100%;
}
.common-product-table td {
   font-size: 13px;
   padding: 8px 8px 16px 8px;
   text-align: center;
   vertical-align: top;
}
.common-product-table .common-productList-icon {
   padding-bottom: 8px;
}
.common-product-table .common-productList-name a {
   color: #408000;
}
.common-product-table .common-productList-subtitle {
   color: #808080;
}


/**
 * Product panel.
 *
 * Product pages have a panel that appears to the left of the text,
 * displaying the artwork, system requirements, etc.
 */
#common-product-panel {
    float: left;
    margin-left: 32px;
    margin-top: 16px;
    padding: 0px;
    width: 200px;
}
img#common-product-artwork {
    margin-left: 20px;
}
* html #common-product-panel { /* IE hack */
    /* IE needs the margin adjusted to display properly. */
    margin-left: 16px;
}
p#common-product-ageGroup {
    background: #009090;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: bold;
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 4px;
    text-align: center;
}
#common-product-platforms p {
    background: #E8E8E8;
    font-size: 11px;
    padding: 8px;
}


/**
 * Product description.
 *
 * This insets the product descriptions to make room for the panel
 * and ensures that feature lists are displayed properly.
 */
#common-product-description {
    margin-left: 242px;
    margin-right: 20px;
}
#common-product-description p {
    color: #606060;
}
#common-product-description a {
    color: #408000;
}
#common-product-description a:hover {
    color: #60A000;
}
#common-product-description h4 {
    color: #FF8040;
    font-size: 18px;
    font-weight: bold;
    margin: 16px 12px 8px 12px;
    padding-left: 0px;
}
#common-product-description h5 {
    color: #80C040;
    font-size: 12px;
    font-weight: bold;
    margin: 8px 12px 16px 12px;
}
p.common-product-feature-header {
    font-weight: bold;
}
#common-product-description ul {
    list-style-type: circle;
}
#common-product-description li {
    color: #606060;
}


/**
 * Product screenshots.
 *
 * This places screenshot thumbnails in a box and separates them
 * from each other.
 */
.common-screenshots {
    background: #F0F0F0;
    margin: 32px;
    text-align: center;
}
#common-content .common-screenshots p {
    background: #E0E0E0;
    color: #808080;
    padding: 4px;
}
.common-screenshots img {
    margin: 16px;
}


/**
 * Special list table.
 *
 * The Home and School sections each have a list of specials that shares
 * a common layout.
 */
.common-special-table {
   width: 100%;
}
.common-special-table td {
   font-size: 13px;
   padding: 16px 8px 8px 8px;
   text-align: center;
   vertical-align: top;
}
.common-special-table .common-specialList-icon {
   padding-bottom: 8px;
}
.common-special-table .common-specialList-name a {
   color: #408000;
}


/**
 * Special panel.
 *
 * Special pages have a panel that appears to the left of the text
 * that displays the artwork for the special.
 */
#common-special-info {
    /* Contains the panel and description to push the purchase links
       below the floated panel. */
    overflow: hidden;
}
#common-special-panel {
    float: left;
    margin-left: 32px;
    margin-top: 16px;
    padding: 0px;
    width: 200px;
}
img#common-special-artwork {
    margin-left: 0px;
}
p#common-special-ageGroup {
    background: #009090;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: bold;
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 4px;
    text-align: center;
}


/**
 * Special description.
 *
 * This insets the bundle description to make room for the panel
 * and ensures that feature lists are displayed properly.
 */
#common-special-description {
    margin-left: 262px;
    margin-right: 20px;
}
#common-special-description p {
    color: #606060;
}
#common-special-description a {
    color: #408000;
}
#common-special-description a:hover {
    color: #60A000;
}
#common-special-description h4 {
    color: #FF8040;
    font-size: 18px;
    font-weight: bold;
    margin: 16px 12px 8px 12px;
    padding-left: 0px;
}
#common-special-description h5 {
    color: #80C040;
    font-size: 12px;
    font-weight: bold;
    margin: 8px 12px 16px 12px;
}
#common-special-description ul {
    list-style-type: circle;
}


/**
 * Purchase links.
 *
 * Product and Special pages contain lists of product editions with links to
 * purchase each edition.  Each edition is wrapped in a DIV, with paragraphs
 * defining each section (including the title, any additional notes, the price,
 * and the Buy link).
 *
 * The Buy link is transformed into a button with a background image, and
 * both it and the price are positioned absolutely to the upper left of the\
 * containing DIV.
 */
#common-content p.common-purchase-description {
    color: #606060;
    margin-left: 12px;
    margin-right: 12px;
}
#common-content div.common-purchase-item {
    border-top: 1px solid #C0C0C0;
    margin: 12px;
    padding-top: 12px;
    position: relative;
    width: 624px;
}
#common-content div.common-purchase-item li {
    color: #606060;
    font-size: 12px;
    line-height: 16px;
    width: 500px;
}
#common-content p.common-purchase-item-title {
    color: #009090;
    font-size: 14px;
    margin-bottom: 8px;
}
#common-content p.common-purchase-item-title strong {
    color: #C00080;
    font-size: 16px;
}
#common-content p.common-purchase-item-title a {
    border-bottom: 1px solid #C0E0E0;
    color: #00A0A0;
    text-decoration: none;
}
#common-content p.common-purchase-item-note {
    color: #606060;
    font-size: 12px;
    line-height: 16px;
    margin-top: 0px;
    width: 530px;
}
#common-content p.common-purchase-item-price {
    left: 465px;
    top: 17px;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    text-align: right;
    width: 60px;
}
#common-content p.common-purchase-item-link {
    left: 532px;
    top: 8px;
    position: absolute;
}
#common-content p.common-purchase-item-link a {
    background: url(/common/img/buy-button.gif);
    display: block;
    width: 80px;
    height: 40px;
}
#common-content p.common-purchase-item-link a span {
    display: none;
}


/**
 * Demo list table.
 *
 * The Home and School sections each have a demo list page that shares
 * a common layout.
 */
.common-demoList-table {
   width: 100%;
}
.common-demoList-table td {
   font-size: 13px;
   padding: 16px 8px 16px 8px;
   text-align: center;
   vertical-align: top;
}
.common-demoList-table .common-demoList-screenshot {
   padding-bottom: 8px;
}
.common-demoList-table .common-demoList-screenshot img {
   cursor: pointer;
}
.common-demoList-table .common-demoList-name {
   color: #404040;
   font-weight: bold;
}
.common-demoList-table .common-demoList-subtitle {
   color: #808080;
   padding-bottom: 4px;
}
.common-demoList-table .common-demoList-button {
    padding: 0px;
}
.common-demoList-table .common-demoList-button img {
    cursor: pointer;
}


/**
 * Page footer.
 *
 * The company name exists in the HTML as an H4, which is replaced by the
 * company logo using the styles here.  The contact and copyright text blocks
 * are defined as paragraphs.
 */
#common-footer {
    margin-left: 201px;
    margin-top: 20px;
    margin-bottom: 20px;
}
#common-footer h4 {
    /* Themed background image will be added here. */
    float: left;
    height: 57px;
    margin: 8px 0px 0px 32px;
    width: 115px;
}
#common-footer h4 span {
    display: none;
}
#common-footer p {
    font-size: 10px;
    font-weight: bold;
    margin-left: 200px;
    margin-top: 8px;
    text-transform: uppercase;
}
#common-footer p strong {
    color: #FF6000;
    font-size: 16px;
    padding-left: 6px;
}
#common-footer p i {
    font-style: normal;
    text-transform: lowercase;
}