/* This stylesheet, 'LAYOUT', provides the overall sizes and positions of the page components - this is where you come to change the width of the menu, and the height of the header, for example.  */

#content {
        width:800px;
        background-color:#ffffff; 

        /*background-color:#081020; */
        margin-top:10px;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:0px;
        text-align:center;
}


/* This 'Body' tag just indicates the overall size of the page - my having a margin and padding of 0px, this means we want it to go right to the edges of the page (which we do!) */

/* The 'Header' specifies the attributes of the whole horizontal header, and everything in it - including the logo and login area.  Remember - it must be at least as tall as the logo image (which is 80px).  If you change the height of this, make sure you change the 'top' value in 'strip' below also, to stop overlaps. */


#header {
        height:80px;
        background-color:#000000;
	}
	



/* Main site content (in middle panel).  Keeping the width as 'auto' should allow this column to shrink and grow depending on the user's screen size/resolution - without the text being hidden under the other columns.  Again, this needs more work.  */

#middle {
        width:70%;
        text-align:left;
        float:left;
        padding:20px 20px 0px 20px;
/*        background:url(../images/leaves.png) no-repeat right bottom; */
	}

/* 'Right' controls the right hand column - again, keep it absolute positioned, and keep the 'top' as the same as that in 'left' above. Again - not working */

#right {
/*        background-color:#f5f5ff; */
	z-index:5;
        text-align:justify;
	z-index:5;
	}
#footer {
    clear:both;
}
/* Fixes for IE - don't touch these ones */
body>#left {width:200px;}	
body>#right {width:200px;}
.Content>p {margin:0px;}
.Content>p+p {text-indent:30px;}