/******************************************************************************
 * Author:  Doug Johnson
 * Email:   doug@sizing.com
 * Website: http://www.infosizing.com/ aka http://www.sizing.com
 *
 * Description: CSS Level 2.1 compliant styling rules for boxes.
 *
 *****************************************************************************/

/* Box:
 * This styles the boxes used on each page.
 */
.box
{
    float: left;
    background: url(../Images/ShadowBoxBottomLeft.png) no-repeat left bottom;
    width: 100%; /* the default is for the box to span across the whole page */
}

.boxHeader
{
    background: url(../Images/ShadowBoxTopLeft.png) no-repeat left top;
}

.boxHeader h2
{
    background: url(../Images/ShadowBoxTopRight.png) no-repeat right top;
    color: #527b52;
    font-size: 1.8em;
    padding-top: .75em; /* this controls the breathing room at the top of the box */
    padding-left: 1em; /* this controls the breathing room on the left of the header text */
    padding-right: 1em; /* this controls the breathing room on the right of the header text */
    padding-bottom: .5em; /* this control the breathing room between the header text and the body text */
}

.boxBody
{
    background: url(../Images/ShadowBoxBottomRight.png) no-repeat right bottom;
    font-size: 1.3em;
    padding-bottom: 1.25em; /* this controls the breathing room at the bottom of the box */
    padding-left: 1.5em; /* this controls the breathing room on the left of the body text */
    padding-right: 1.5em; /* this controls the breathing room on the right of the body text */
}

/* this provides spacing for items in the body */
.boxBody > *
{
    margin-bottom: .75em;
}

.boxBody ul
{
    padding-left: 2em;
}

.boxBody li
{
    margin-bottom: 0.5em;
}

/* this is used for styling a tag line in a box */
.boxTagLine
{
    font-size: 1em;
    font-weight: bold;
    padding-bottom: 0.25em;
    padding-top: .5em;
    text-align: center;
}

/* this is used for styling a "more info..." link in a box */
.boxMoreInfo
{
    padding-bottom: 0em;
    text-align: right;
}

/* These are for when there is only 1 box on the page. */
.box1of1
{
    max-width: 97%;
    min-width: 97%;
    margin-left: 1.5em;
}

/* These are for arranging boxes in sets of 2 across the page.*/
.box1of2
{
    max-width: 48%;
    min-width: 48%;
    margin-left: 1.5em;
    margin-right: 1em;
}

.box2of2
{
    float: right;
    max-width: 48%;
    min-width: 48%;
    margin-right: 1em;
}

/* These are for arranging boxes in sets of 3 across the page.*/
.box1of3
{
    max-width: 31.5%;
    min-width: 31.5%;
    margin-left: 1.5em;
}

.box2of3
{
    max-width: 31.5%;
    min-width: 31.5%;
    margin-left: 1em;
}

.box3of3
{
    float: right;
    max-width: 31.5%;
    min-width: 31.5%;
    margin-right: 1em;
}