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

/*
html construct:
<div class="colmask #layout-class#">
	<div class="colmid">
		<div class="colleft">
			<div class="col1">
				<!-- Column 1 start -->
				<!-- Column 1 end -->
			</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 */
	clear: both;
	float: left;
	width: 100%;					/* width of whole page */
	overflow: hidden;			/* This chops off any overhanging divs */
}
/* common column settings */
.colleft,
.colmid,
.colright {
	float: left;
	width: 100%; 					/* width of page */
	position: relative;
}
.col1,
.col2,
.col3 {
	float: left;
	position: relative;
	padding: 0 0 1em 0;		/* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here, make it whatever value you need */
	overflow: hidden;
}

/* 2 Column (double page) settings */
.doublepage {
	background: #eee;			/* right column background colour */
}
.doublepage .colleft {
	right: 50%;						/* right column width */
	background: #fff;			/* left column background colour */
}
.doublepage .col1 {
	width: 46%;						/* left column content width (column width minus left and right padding) */
	left: 52%;						/* right column width plus left column left padding */
}
.doublepage .col2 {
	width: 46%;						/* right column content width (column width minus left and right padding) */
	left: 56%;						/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

/* 3 Column settings */
.threecol {
	background: #eee;			/* right column background colour */
}
.threecol .colmid {
	right: 25%;						/* width of the right column */
	background: #fff;			/* center column background colour */
}
.threecol .colleft {
	right: 50%;						/* width of the middle column */
	background: #f4f4f4;	/* left column background colour */
}
.threecol .col1 {
	width: 46%;						/* width of center column content (column width minus padding on either side) */
	left: 102%;						/* 100% plus left padding of center column */
}
.threecol .col2 {
	width: 21%;						/* Width of left column content (column width minus padding on either side) */
	left: 31%;						/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
	width: 21%;						/* Width of right column content (column width minus padding on either side) */
	left: 85%;						/* Please make note of the brackets here:  (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
/* 3 Column blog style settings */
.blogstyle {
	background: #eee;			/* right column background colour */
}
.blogstyle .colmid {
	right: 25%;						/* width of the right column */
	background: #f4f4f4;	/* center column background colour */
}
.blogstyle .colleft {
	right: 25%;						/* width of the middle column */
	background: #fff;			/* left column background colour */
}
.blogstyle .col1 {
	width: 46%;						/* width of center column content (column width minus padding on either side) */
	left: 52%;						/* 100% plus left padding of center column */
}
.blogstyle .col2 {
	width: 21%;						/* Width of left column content (column width minus padding on either side) */
	left: 56%;						/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.blogstyle .col3 {
	width: 21%;						/* Width of right column content (column width minus padding on either side) */
	left: 60%;						/* Please make note of the brackets here:  (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
/* 2 Column (left menu) settings */
.leftmenu {
	background: #fff;			/* right column background colour */
}
.leftmenu .colleft {
	right: 75%;						/* right column width */
	background: #f4f4f4;	/* left column background colour */
}
.leftmenu .col1 {
	width: 71%;						/* right column content width */
	left: 102%;						/* 100% plus left column left padding */
}
.leftmenu .col2 {
	width: 21%;						/* left column content width (column width minus left and right padding) */
	left: 6%;							/* (right column left and right padding) plus (left column left padding) */
}
/* 2 Column (right menu) settings */
.rightmenu {
	background: #eee;			/* right column background colour */
}
.rightmenu .colleft {
	right: 25%;						/* right column width */
	background: #fff;			/* left column background colour */
}
.rightmenu .col1 {
	width: 71%;						/* left column content width (left column width minus left and right padding) */
	left: 27%;					 	/* (right column width) plus (left column left padding) */
}
.rightmenu .col2 {
	width: 21%;						/* right column content width (right column width minus left and right padding) */
	left: 31%;						/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

/* 2 Column (double content) settings */
.doublecontent {
}
.doublecontent .colleft {
	right: 50%;						/* right column width */
}
.doublecontent .col1 {
	width: 48%;						/* left column content width (column width minus left and right padding) */
	left: 50%;						/* right column width plus left column left padding */
}
.doublecontent .col2 {
	width: 46%;						/* right column content width (column width minus left and right padding) */
	left: 56%;						/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

/* Full page settings */
.fullpage {
	background: #fff;			/* page background colour */
}
.fullpage .col1 {
	width: 96%;						/* page width minus left and right padding */
	left: 2%;							/* page left padding */
}

/*
 * COSIS Layouts
 */
/* Indexcard
 * padding:  0
 */
.ic-cols {
}
.ic-cols .colleft {
	right: 50%;						/* right column width */
}
.ic-cols .col1 {
	width: 50%;						/* left column content width (column width minus left and right padding) */
	left: 50%;						/* right column width plus left column left padding */
}
.ic-cols .col2 {
	width: 50%;						/* right column content width (column width minus left and right padding) */
	left: 50%;						/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

/* Indexcard - Picture
 * padding:  0
 */
.ic-cols-picture {
}
.ic-cols-picture .colleft {
	right: 80%;										/* right column width */
}
.ic-cols-picture .col1 {
	width: 20%;										/* left column content width (column width minus left and right padding) */
	left: 80%;										/* right column width plus left column left padding */
}
.ic-cols-picture .col2 {
	width: 80%;										/* right column content width (column width minus left and right padding) */
	left: 80%;										/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

/* Indexcard - Static (for use in accordion)
 * padding:  0
 */
.ic-cols-static {
	position: static;
	width: 800px;
}
.ic-cols-static .colleft,
.ic-cols-static .colmid,
.ic-cols-static .colright {
	position: static;
}
.ic-cols-static .col1,
.ic-cols-static .col2,
.ic-cols-static .col3 {
	position: static;
}
.ic-cols-static .colleft {
	right: 50%;						/* right column width */
}
.ic-cols-static .col1 {
	width: 50%;						/* left column content width (column width minus left and right padding) */
	left: 50%;						/* right column width plus left column left padding */
}
.ic-cols-static .col2 {
	width: 50%;						/* right column content width (column width minus left and right padding) */
	left: 50%;						/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

/* Indexcard - Resume
 * padding:  0
 */
.ic-cols-resume {
}
.ic-cols-resume .colleft {
	right: 80%;										/* right column width */
}
.ic-cols-resume .col1 {
	width: 20%;										/* left column content width (column width minus left and right padding) */
	left: 80%;										/* right column width plus left column left padding */
}
.ic-cols-resume .col2 {
	width: 80%;										/* right column content width (column width minus left and right padding) */
	left: 80%;										/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

/* COSIS - 2 Columns */
.content-doublepage {
}
.content-doublepage .colleft {
	right: 48%;						/* right column width */
}
.content-doublepage .col1 {
	width: 48%;						/* left column content width (column width minus left and right padding) */
	left: 48%;						/* right column width plus left column left padding */
}
.content-doublepage .col2 {
	width: 48%;						/* right column content width (column width minus left and right padding) */
	left: 52%;						/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

/* COSIS - 3 Columns */
.content-threecols {
	/* background: #EEEEEE none repeat scroll 0 0; */
}
.content-threecols .colmid {
	/* background: #F4F4F4 none repeat scroll 0 0; */
	right:32%;						/* width of the right column */
}
.content-threecols .colleft {
	/* background: #FFFFFF none repeat scroll 0 0; */
	right: 36%;						/* width of the middle column */
}
.content-threecols .col1 {
	width: 32%;						/* width of center column content (column width minus padding on either side) */
	left: 68%;						/* 100% plus left padding of center column */
}
.content-threecols .col2 {
	width: 32%;						/* Width of left column content (column width minus padding on either side) */
	left: 70%;						/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.content-threecols .col3 {
	width: 32%;						/* Width of right column content (column width minus padding on either side) */
	left: 72%;						/* Please make note of the brackets here:  (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

/* COSIS - 2 Columns for member page */
.content-member {
}
.content-member .colleft {
	right: 28%;						/* right column width */
}
.content-member .col1 {
	width: 68%;						/* left column content width (column width minus left and right padding) */
	left: 28%;						/* right column width plus left column left padding */
}
.content-member .col2 {
	width: 28%;						/* right column content width (column width minus left and right padding) */
	left: 32%;						/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

.content-member2 {
}
.content-member2 .colleft {
	right: 38%;						/* right column width */
}
.content-member2 .col1 {
	width: 58%;						/* left column content width (column width minus left and right padding) */
	left: 38%;						/* right column width plus left column left padding */
}
.content-member2 .col2 {
	width: 38%;						/* right column content width (column width minus left and right padding) */
	left: 42%;						/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}