/*
Content first layout

- Equal height columns (the holy grail)
- Resizable text compatible (for accessibility)

Source: http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-ems.htm

The css below is slightly modified in order to get the left and right column padding to my wishes.
The left and right columns are still 12em, but have no padding. So the content within these columns
are 12 em wide too. The original code is still there in css comments

( In the future use: http://www.yahooapis.com/yui/grids/ ?)
*/

	/* 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 */
border-left: 1px solid #99CCFF;
border-right: 1px solid #99CCFF;
border-bottom: 1px solid #99CCFF;
	}

	/* holy grail 3 column settings */
	.holygrail {
	    /*background: lightblue;*/  	/* Right column background colour */
		/*margin: .5em 0 0 0;          /* ADDED BY MYSELF! (to create a margin between the header and the columns) */
background-color: #F5F5F5;
background-image: url(images/template/bg-wrapper.jpg);
background-repeat: repeat;
background-position: top left;
    }

    .holygrail .colmid {
        float:left;
        width:200%;
        margin-left:-14em; 		/* Width of right column */
        position:relative;
        right:100%;
        /*background: lightgreen;*/      /* Centre column background colour */
background-color: #F5F5F5;
background-image: url(images/template/bg-wrapper.jpg);
background-repeat: repeat;
background-position: top left;
    }

    .holygrail .colleft {
        float:left;
        width:100%;
        margin-left:-50%;
        position:relative;
        left:30em; 			/* Left column width + right column width */
        /*background: pink;*/	/* Left column background colour */
background-color: #F5F5F5;
background-image: url(images/template/bg-wrapper.jpg);
background-repeat: repeat;
background-position: top left;
    }

    .holygrail .col1wrap {
        float:left;
	    width:50%;
	    position:relative;
	    right:16em;             /* Width of left column */
	    padding-bottom:.5em; 	/* Centre column bottom padding. Leave it out if it's zero */
	}

	.holygrail .col1 {
        margin: 0 14em 0 16em;        	 /* Centre column side padding:
                            	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:15em;	            /* Width of left column content (left column width minus left and right padding) */
        position:relative;
        right:.5em;         		/* Width of the left-hand side padding on the left column */
    }

    .holygrail .col3 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:13em;        		/* Width of right column content (right column width minus left and right padding) */
        margin-right:1.5em;  		/* Width of right column right-hand padding + left column left and right padding */
        position:relative;
        left:50%;
    }