/* 

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

I used the css to create a sane collection of templates. See the
bottom of this file for a few modifications I made.

Thanks, Matthew James Taylor!

*/
/* 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 */
.colright,
.colmid,
.colleft {
    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;
}
/* 3 Column settings */
.threecol {
    background: transparent;	/* right column background colour */
}
.threecol .colmid {
    right: 300px;			/* width of the right column */
    background: transparent;	/* center column background colour */
}
.threecol .colleft {
    right: 460px;			/* width of the middle column */ 
    background: transparent;	/* left column background colour */
}
.threecol .col1 {
    width: 500px;			/* width of center column content (column width minus padding on either side) */
    left: 680px;			/* 100% plus left padding of center column */
}
.threecol .col2 {
    width: 200px;			/* Width of left column content (column width minus padding on either side) */
    left: -40px;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
    width: 200px;			/* Width of right column content (column width minus padding on either side) */
    left: 500px;			/* 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: transparent;	/* right column background colour */
}
.blogstyle .colmid {
	right: 300px;			/* width of the right column */
	background: transparent;	/* center column background colour */
}
.blogstyle .colleft {
	right: 460px;			/* width of the middle column */
	background: transparent;	/* left column background colour */
}
.blogstyle .col1 {
	width: 350px;			/* width of center column content (column width minus padding on either side) */
	left: 680px;			/* 100% plus left padding of center column */
}
.blogstyle .col2 {
	width: 200px;			/* Width of left column content (column width minus padding on either side) */
	left: 110px;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.blogstyle .col3 {
	width: 350px;			/* Width of right column content (column width minus padding on either side) */
	left: 500px;			/* 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: transparent;	/* right column background colour */
}
.leftmenu .colleft {
	right: 620px;			/* right column width */
	background: transparent;	/* left column background colour */
}
.leftmenu .col1 {
	width: 720px;			/* right column content width */
	left: 840px;			/* 100% plus left column left padding */
}
.leftmenu .col2 {
	width: 200px;			/* left column content width (column width minus left and right padding) */
	left: -100px;			/* (right column left and right padding) plus (left column left padding) */
}
/* 2 Column (right menu) settings */
.rightmenu {
	background: transparent;	/* right column background colour */
}
.rightmenu .colleft {
	right: 300px;			/* right column width */
	background: transparent;	/* left column background colour */
}
.rightmenu .col1 {
	width: 620px;			/* left column content width (left column width minus left and right padding) */
	left: 300px;			/* (right column width) plus (left column left padding) */
	margin-right: 20px;
}
.rightmenu .col2 {
	width: 300px;			/* right column content width (right column width minus left and right padding) */
	left: 300px;			/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}
/* 2 Column (double page) settings */
.doublepage {
	background: transparent;	/* right column background colour */
}
.doublepage .colleft {
	right:50%;			/* right column width */
	background: transparent;	/* 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) */
}
/* Full page settings */
.fullpage {
	background: transparent;	/* page background colour */
}
.fullpage .col1 {
	width: 940px;			/* page width minus left and right padding */
	left: 0;			/* page left padding */
}