    /* <!-- */
    /* MDM this sets up the layout skeleton.  Thanks to this site!  http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm */
    /* General styles */
    body {
        margin:0;
        padding:0;
        border:0;           /* This removes the border around the viewport in old versions of IE */
        width:100%;
        background:#ccc;
        min-width:800px;    /* Minimum width of layout - remove line if not required */
                            /* The min-width property does not work in old versions of Internet Explorer */
        font-size:90%;
    }
    /* Header styles */
    #header {
        clear:both;
        float:left;
        width:100%;
        padding:1em 0 1em 0;
        background:#ccc;
        border-bottom:1px solid #000;
    }

    #header p,
    #header h1,
    #header h2 {
        padding:.4em 15px 0 15px;
        margin:0;
    }
    #header ul {
        clear:left;
        float:left;
        width:100%;
        list-style:none;
        margin:10px 0 0 0;
        padding:0;
    }
    #header ul li {
        display:inline;
        list-style:none;
        margin:0;
        padding:0;
    }
    #header ul li a {
        display:block;
        float:left;
        margin:0 0 0 1px;
        padding:3px 10px;
        text-align:center;
        background:#eee;
        color:#000;
        text-decoration:none;
        position:relative;
        left:15px;
        line-height:1.3em;
    }
    #header ul li a:hover {
        background:#369;
        color:#fff;
    }
    #header ul li a.active,
    #header ul li a.active:hover {
        color:#fff;
        background:#000;
        font-weight:bold;
    }
    #header ul li a span {
        display:block;
    }
    /* 'widths' sub menu */
    #layoutdims {
        clear:both;
        background:#eee;
        border-top:4px solid #000;
        margin:0;
        padding:6px 15px !important;
        text-align:right;
    }
    /* column container */
    .colmask {
        position:relative;      /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
        clear:both;
        float:left;
        width:100%;             /* width of whole page */
        overflow:hidden;        /* This chops off any overhanging divs */
        padding: 4em 2em 4em 0; /* MDM border between header/footer, 2em right margin */
        box-sizing:border-box;  /* Include padding in width calculation */
        background-color:#e8e8ff;
    }

    /* holy grail 3 column settings */
    .holygrail {
        /*background:#e8e8ff;*/     /* Right column background colour */
    }
    .holygrail .colmid {
        float:left;
        width:200%;
        margin-left:-12em;      /* Width of right column (12) */
        position:relative;
        right:100%;
        /*background:#e8e8ff;*/     /* Centre column background colour */
    }
    .holygrail .colleft {
        float:left;
        width:100%;
        margin-left:-50%;
        position:relative;
        left:46em;              /* Left column width (34) + right column width (12)*/
        /*background:#e8e8ff;*/        /* Left column background colour */
    }
    .holygrail .col1wrap {
        float:left;
        width:50%;
        position:relative;
        right:34em;             /* Width of left column (34) */
        padding-bottom:1em;     /* Centre column bottom padding. Leave it out if it's zero */
    }
    .holygrail .col1 {
        margin:0 13em 0 35em;   /* Centre column side padding (changed from 13 to 35):
                                Left padding = left column width + centre column left padding width
                                Right padding = right column width + centre column right padding width */
        position:relative;
        left:200%;
        overflow:hidden;
    }
    .holygrail .col2 {
        float:left;
        float:right;            /* This overrides the float:left above */
        width:32em;             /* Width of left column content (left column width minus left and right padding) (changed from 10 to 32) */
        position:relative;
        right:1em;              /* Width of the left-had side padding on the left column */
    }
    .holygrail .col3 {
        float:left;
        float:right;            /* This overrides the float:left above */
        width:10em;             /* Width of right column content (right column width minus left and right padding) */
        margin-right:5em;       /* Standard margin from right edge of screen */
        padding-right:1em;      /* Extra padding to prevent button border clipping */
        position:relative;
        left:50%;
    }
    /* Footer styles */
    #footer {
        clear:both;
        float:left;
        width:100%;
        border-top:1px solid #000;
        background:#ccc;
    }
    /* --> */
