/*
CSS for Lone Peak Labeling Systems Web Site
Generic 2 Column Layout - column widths customized
*/

/*
Note:  The layout below is a modified version Matthew James Taylor's
"Perfect 3 Column Liquid Layout"
http://matthewjamestaylor.com/blog/perfect-3-column.htm
*/

/* Column containers - the divs */
.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 */
	border-bottom: solid 10px red;
	margin-left: 1%;
	margin-right: 1%;
	width: 98%;
}

/* common column settings */
.colleft {
	float:left;
	width:100%;			/* width of page */
	position:relative;
}

.col1,
.col2 {
	float:left;
	position:relative;
	padding:1em 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;
}

/*
Below follows the position of the content in each column.
Apparently the higher up content is in your web page code,
the more important it is considered by search engine algorithms.
Therefore, column 1 will be highest up content followed by column 2.
The way the nested divs work is to layout the columns from
right to left.  Note that in doing so, each div is logically
100% of the view port.  Since the divs are nested and layed out
right to left, the content of each column is actually written in
the right most portion of that div's view port.  Because of the
nested divs and because of the right offset relative positioning
below, the left side of each div's view port is actually off of
the physical screen.  We use this to position the content properly
in each column below.  Using this layout, all column background colors
will stretch to the length of the longest column.
*/

/* Positioning the divs - the 2 columns */

/* Right Side Column - logical view port is the same as the physical view port */
/* If desired, add a background color for the Right Side Column here */

.twocol {			
	background:#e5f0ff;
}




/* Left Side Column - logical viewport of this div is offset
the amount below from the right side of the div above (fourcol).  If desired,
add a background color for the left side column here */
.twocol .colleft {
	right:65%;
	background:white;
}

/* Positioning the content in each column in the right side of each div view port. */
/*
Right Side Column, first column in the html (col1).  The position of
the content area of this column is located by adding the entire width
of the colleft view port plus the right side column padding.  we must
offset the content from the left side of the logical viewport by this amount.
*/ 
.twocol .col1 {			
	width:63%;			/* Width of right side column content area */
	left:101%;			/* see comment above */
}

/*
Left Side Column, second column in the html (col2).  The left offset
relative to the colleft logical view port of the content area
of this column is: (full width of colleft viewport) minus
(width of column 2) plus (column 2 left padding) minus
(width of content area of column 1)
*/ 
.twocol .col2 {
	width:33%;			/* Width of left side column content area */
	left:3%;			/* see comment above */
}