@font-face {
	font-family: 'CantarellRegular';
	src: url('fonts/Cantarell-Regular.eot');
	src: local('Cantarell Regular'), local('Cantarell-Regular'), url('fonts/Cantarell-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'CantarellOblique';
	src: url('Cantarell-Oblique.eot');
	src: local('Cantarell Oblique'), local('Cantarell-Oblique'), url('Cantarell-Oblique.ttf') format('truetype');
}

@font-face {
	font-family: 'CantarellBold';
	src: url('Cantarell-Bold.eot');
	src: local('Cantarell Bold'), local('Cantarell-Bold'), url('Cantarell-Bold.ttf') format('truetype');
}

@font-face {
	font-family: 'CantarellBoldOblique';
	src: url('Cantarell-BoldOblique.eot');
	src: local('Cantarell BoldOblique'), local('Cantarell-BoldOblique'), url('Cantarell-BoldOblique.ttf') format('truetype');
}

html, body, #wrap {
        margin:0;
        padding:0;
        border:0;			/* This removes the border around the viewport in old versions of IE */
        width:100%;
        height:100%;
	min-width:800px;
        background:#ffffff;
        font-size:90%;
    }
    
body > #wrap {height: auto; min-height: 100%;}

    h1, h2, h3 {
        margin:.8em 0 .2em 0;
        padding:0;
    }
    p {
        margin:.4em 0 .8em 0;
        padding:0;
        font-family:"CantarellRegular", "Trebuchet MS", "Arial", sans serif;
        font-size:13px;
        color:gray;
        line-height:1.5em;
    }

/* Header styles */
    #header {
        clear:both;
        float:left;
        width:100%;
        background-color:#ffffff;
    	border-bottom:20px solid #ffffff;
    	border-top:20px solid #ffffff;
	}
	#header img {
	    display:block;
	    margin-left:auto;
	    margin-right:auto;
	}


#main {padding-bottom: 3em;}  /* must be same height as the footer */

/* 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 */
	}
	
/* holy grail 3 column settings */
	.holygrail {
	background:#ffffff;
	}
	
	.holygrail .colmid {
	float:left;
	width:200%;
	margin-left:-200px;	/* width of right col */
	position:relative;
	right:100%;
	background:#fff;	/* centre col background colour */
	}
	
	.holygrail .colleft {
	float:left;
	width:100%;
	margin-left:-50%;
	position:relative;
	left:400px;         	/* Left column width + right column width */
	background:#ffffff;    	/* Left column background colour */
    	}
    
    	.holygrail .col1wrap {
	float:left;
	width:50%;
	position:relative;
	right:200px;        	/* Width of left column */
	padding-bottom:3em; 	/* Centre column bottom padding. Leave it out if it's zero */
	}

	.holygrail .col1 {
        margin:0 215px;     	/* 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:170px;        	/* Width of left column content (left column width minus left and right padding) */
        position:relative;
        right:15px;         	/* Width of the left-had side padding on the left column */
	}
	.holygrail .col3 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:170px;        	/* Width of right column content (right column width minus left and right padding) */
        margin-right:45px;  	/* Width of right column right-hand padding + left column left and right padding */
        position:relative;
        left:50%;
	background: url(images/body_background.png) no-repeat;
	/*background-attachment:fixed;*/
	background-position:bottom right;
	padding-bottom:25px;
	padding-right:25px;
	padding-top:25px;

}

    
    .indent {
    	position:relative;
    	margin-left:105px;
    	}

/* Horizontal images styles */

	.horimg {
	position:relative;
	padding-top:25px;
	text-align:center;
	}

	.horimg img {
	padding-right:30px;
	}
	
/* Footer styles */
	#footer {
	position:relative;
	margin-top:-3em;
	height:3em;
        clear:both;
        float:left;
        width:100%;
	background:#76b6d7;
	}
    #footer .alignleft {
    	float:left;
        margin:-10px 0 0 0;	/* 10 px to get text valigned */
        font-family:"Times New Roman", "Arial", sans serif;
        font-size:34px;
        color:#ffffff;
    }
    
    #footer .alignright {
    	float:right;
    	padding:10px;
        margin:0;
        font-size:10px;
        color:#ffffff;
    }
    #footer img {
    	margin-top:-1.5em;	/* to center rotated img on footer bar */
    	vertical-align:middle;
    	padding:11px 10px 0 50px;
 
    }

/* Menu */        
    #menu {
    list-style: none;
    width: 160px;
    padding-top: 25px;
    height: 174px;
    padding-left:25px;
    background: url(images/menu_background.png) no-repeat;
    }

    #menu ul{
    	list-style: none;
    	margin: 0px;
    	padding: 0px;
    }

    #menu a:link, a:visited{
    color: #76B6D7;
    font-family: "Trebuchet MS", "sans serif";
    font-size: 14px;
    height: 23px;
    display:block;
    text-decoration: none;
    padding: 8px 0 0 0px;
    font-weight:normal;
    }
    
/* Clearfix hack */    
    .clearfix:after {content: ".";
    	display: block;
    	height: 0;
    	clear: both;
    	visibility: hidden;}
    .clearfix {display: inline-block;}
    /* Hides from IE-mac \*/
    * html .clearfix { height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */