/****************************************************************************
 * 1. Grid setup
 *
 * The site is based on two grids; a six column and a four column. The
 * majority is in the six column grid, so the classnames have been optimised
 * for that.
 *
 * For an element to be two columns (for example), use the .two-col class.
 * To use the four column grid, use a similar naming convention, but append
 * -4 to the class name, so a two column element will be .two-col-4
 *
 * Wrap the main content area in .container to use the grid classes.
 *
 * To help with layout, use .inner-cols which will reset the margins (see
 * the header with photo and description at the top of the person page
 * for an example.)
 * 
 * 
 * Basic Instructions for use
 * ==========================
 * 
 * You can have as many containers dotted around the place. Anything within
 * a container is at a fixed width of 958px (not 978px) because you /ALWAYS/
 * have to have something wrapped in a column.
 * 
 * If you want the columns within columns, add a class .inner-cols
 * 
 * eg.
 * 
 *  div.container
 *    div.six-cols.inner-cols
 *      div.four-cols
 *      div.two-cols
 *  
 * otherwise it will break.
 * 
 * Fairly obviously, if you want backgrounds to span the entire width of the
 * page, then add a div wrapper to the .container and colour that. You must
 * not put any text in these divs because that will break the layout
 ***************************************************************************/
.container
{
    width: 978px;
    margin: 0 auto;
    text-align: left;
}

.clear-block:after {
    /* .clear-block is in the Drupal default CSS, but this is needed to prevent
     * extra white space appearing at the bottom of the page */
    font-size: 0;
}

.clearfix:after {
    /* .clear-block is in the Drupal default CSS, but this is needed to prevent
     * extra white space appearing at the bottom of the page */
    font-size: 0;
}

/****************************************************************************
 * 1.1 6 column grid
 ***************************************************************************/
.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .one-col-4, .two-col-4, .three-col-4, .four-col-4
{
    float: left;
    margin: 0 10px;
    min-height:1px;
}

.inner-cols
{
    margin: 0;
}

.one-col
{
    width: 143px;
}

.two-col
{
    width: 306px;
}
    .two-col.inner-cols
    {
        width: 326px;
    }

.three-col
{
    width: 469px;
}
    .three-col.inner-cols
    {
        width: 489px;
    }

.four-col
{
    width: 632px;
}
    .four-col.inner-cols
    {
        width: 652px;
    }

.five-col
{
    width: 795px;
}
    .five-col.inner-cols
    {
        width: 815px;
    }

.six-col
{
    width: 958px;
}
    .six-col.inner-cols
    {
        width: 978px;
    }

/****************************************************************************
 * 1.2 Four column grid
 ***************************************************************************/
.one-col-4
{
    width: 224px; /* mild temporary bodge to compensate for designs of different widths :/ */
}

.two-col-4
{
    width: 470px;
}

.three-col-4
{
    width: 715px;
}

.four-col-4
{
    width: 958px;
}