/*
 * http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts
 */

/*
html construct:
<div class="colmask #layout-class#">
	<div class="colmid">
		<div class="colleft">
			<div class="col1wrap">
				<div class="col1">
					<!-- Column 1 start -->
					<!-- Column 1 end -->
				</div>
			</div>
			<div class="col2">
				<!-- Column 2 start -->
				<!-- Column 2 end -->
			</div>
			<div class="col3">
				<!-- Column 3 start -->
				<!-- Column 3 end -->
			</div>
		</div>
	</div>
</div>
*/

/* 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: #ff9;                    /* Right column background colour */
}
.holygrail .colmid {
	float: left;
	width: 200%;
	margin-left: -200px;                 /* Width of right column */
	position: relative;
	right: 100%;
	background: #fff;                    /* Centre column background colour */
}
.holygrail .colleft {
	float: left;
	width: 100%;
	margin-left: -50%;
	position: relative;
	left: 400px;                         /* Left column width + right column width */
	background: #FFD8B7;                 /* Left column background colour */
}
.holygrail .col1wrap {
	float: left;
	width: 50%;
	position: relative;
	right: 200px;                        /* Width of left column */
	padding-bottom: 1em;                 /* 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%;
}

/* 3 column blog style settings */
.blogstyle {
	background: #ff9;                    /* Right column background colour */
}
.blogstyle .colmid {
	float: left;
	width: 200%;
	margin-left: -200px;                 /* Width of right column */
	position: relative;
	right: 100%;
	background: #FFD8B7;                 /* Centre column background colour */
}
.blogstyle .colleft {
	float: left;
	width: 100%;
	margin-left: -200px;                 /* Width of centre column */
	background: #fff;                    /* Left column background colour */
}
.blogstyle .col1wrap {
	float: left;
	width: 50%;
	padding-bottom: 1em;                 /* Centre column bottom padding. Leave it out if it's zero */
}
.blogstyle .col1 {
	margin: 0 15px 0 415px;              /* 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: 100%;
	overflow: hidden;
}
.blogstyle .col2 {
	float: right;
	width: 170px;                        /* Width of left column content (left column width minus left and right padding) */
	position: relative;
	left: 185px;                         /* Width of the left-had side padding on the left column */
}
.blogstyle .col3 {
	float: right;
	width: 170px;                        /* Width of right column content (right column width minus left and right padding) */
	position: relative;
	left: 555px;
}

/* 2 column left menu settings */
.leftmenu {
	background: #FFD8B7;
}
.leftmenu .colright {
	float: left;
	width: 200%;
	position: relative;
	left: 200px;
	background: #fff;
}
.leftmenu .col1wrap {
	float: right;
	width: 50%;
	position: relative;
	right: 200px;
	padding-bottom: 1em;
}
.leftmenu .col1 {
	margin: 0 15px 0 215px;
	position: relative;
	right: 100%;
	overflow: hidden;
}
.leftmenu .col2 {
	float: left;
	width: 170px;
	position: relative;
	right: 185px;
}

/* 2 column right menu settings */
.rightmenu {
	background: #ff9;
}
.rightmenu .colleft {
	float: left;
	width: 200%;
	margin-left: -200px;
	position: relative;
	right: 100%;
	background: #fff;
}
.rightmenu .col1wrap {
	float: left;
	width: 50%;
	position: relative;
	left: 50%;
	padding-bottom: 1em;
}
.rightmenu .col1 {
	margin: 0 15px 0 215px;
	overflow: hidden;
}
.rightmenu .col2 {
	float: right;
	width: 170px;
	position: relative;
	left: 185px;
}

/* 1 column full page settings */
.fullpage {
	background: #fff;
}
.fullpage .col1 {
	margin: 0 15px;
}
/* Footer styles */
#footer {
	clear: both;
	float: left;
	width: 100%;
	border-top: 1px solid #000;
}