/* ======================================================================================================== 
   PAGE STRUCTURE
   ======================================================================================================== */
body {
	margin:  0;
	padding: 0;
	width: 100%;
	min-width: 600px;		/* Minimum width of layout - remove if not required (IE6 and lower ignore min-width) */
	}
/* container width can be px, em or %; 5 default choices listed */
.container {
	width: 90%;				/* percentage widths are a little flaky */
	width: 960px;
	width: 1020px; 
	width: 1040px;
	width: 1080px;
	margin: 0 auto;			/* Center .page in all modern browsers (IE6+, Firefox, Safari, Opera, Chrome) */
	/*clear:both;*/				/* add to ensure .container drops below any preceding div (such as the header!) */
	}
/* width: auto casues nested container to default to filling its parent's width;
   negative left and right margins pull the nested .container flush with its parent's left and right edges */
.container .container {
	width: auto;
	margin-left:  -1em;
	margin-right: -1em;
	}


/* ======================================================================================================== 
   Column Structure
   ======================================================================================================== */
.column { float: left; }

/* If negative margins are used,left:0 should be added to any rule not explicitly setting left to prevent nested columns from breaking due to a previously set left.
   Float:left rules are added to each column declaration below to prevent nested columns from breaking due to a previously set float:right.
   Ideally, child selectors would be used to target the column formatting (ex: .c132 > .content { width: 50%; margin-left: 0; }), except that IE6 doen't support them. */

/* Using nested column groups to create the 2-1-3 and 3-1-2 ordering.
   To get correct dimensions of contained .c21 or .c12, divide the desired column's percentage width by the container's width */
.c213 > .primary             { width: 75%; float: left; }
.c213 > .secondary           { width: 25%; float: left; }
.c213 .c21 > .primary        { width: 66%; }
.c213 .c21 > .secondary      { width: 34%; }
* html .c213 .primary        { width: 75%; float: left; }
* html .c213 .secondary      { width: 25%; float: left; }
* html .c213 .c21 .primary   { width: 66%; }
* html .c213 .c21 .secondary { width: 34%; }

.c312 > .primary             { width: 75%; float: right; }
.c312 > .secondary           { width: 25%; float: left; }
.c312 .c12 > .primary        { width: 66%; }
.c312 .c12 > .secondary      { width: 34%; }
* html .c312 .primary        { width: 75%; float: right; }
* html .c312 .secondary      { width: 25%; float: left; }
* html .c312 .c12 .primary   { width: 66%; }
* html .c312 .c12 .secondary { width: 34%; }

	/* One more way of creating the 2-1-3 and  3-1-2 columns: using negative margins to position the columns relative to their origianal source order position
	   (position:relative is required for this) and based on their width; works in IE5.x, IE6 and IE7 (with hacks noted below) */
	.c213x > .primary           { width: 50%; float: left; left:  25%; position: relative; }
	.c213x > .secondary         { width: 25%; float: left; left: -50%; position: relative; }
	.c213x > .tertiary          { width: 25%; float: left; left:    0; position: relative; }
	* html .c213x .primary      { width: 50%; float: left; left:  25%; position: relative; }
	* html .c213x .secondary    { width: 25%; float: left; left: -50%; position: relative; }
	* html .c213x .tertiary     { width: 25%; float: left; left:    0; position: relative; }
	
	.c312x > .primary           { width: 50%; float: left; left:  25%; position: relative; }
	.c312x > .secondary         { width: 25%; float: left; left:  25%; position: relative; }
	.c312x > .tertiary          { width: 25%; float: left; left: -75%; position: relative; }
	* html .c312x .primary      { width: 50%; float: left; left:  25%; position: relative; }
	* html .c312x .secondary    { width: 25%; float: left; left:  25%; position: relative; }
	* html .c312x .tertiary     { width: 25%; float: left; left: -75%; position: relative; }

/* Remaining column types are all floated left and easily work in IE5.x - IE8, Firefox, Safari, Opera and Chrome */
.c123 > .primary            { width: 50%; float: left; }
.c123 > .secondary          { width: 25%; float: left; }
.c123 > .tertiary           { width: 25%; float: left; }
* html .c123 .primary       { width: 50%; float: left; }
* html .c123 .secondary     { width: 25%; float: left; }
* html .c123 .tertiary      { width: 25%; float: left; }

.c132 > .primary            { width: 50%; float: left; }
.c132 > .secondary          { width: 25%; float: right; }
.c132 > .tertiary           { width: 25%; float: left; }
* html .c132 .primary       { width: 50%; float: left; }
* html .c132 .secondary     { width: 25%; float: right; }
* html .c132 .tertiary      { width: 25%; float: left; }

.c231 > .primary            { width: 50%; float: right; }
.c231 > .secondary          { width: 25%; float: left; }
.c231 > .tertiary           { width: 25%; float: right; }
* html .c231 .primary       { width: 50%; float: right; }
* html .c231 .secondary     { width: 25%; float: left; }
* html .c231 .tertiary      { width: 25%; float: right; }

.c321 > .primary            { width: 50%; float: right; }
.c321 > .secondary          { width: 25%; float: right; }
.c321 > .tertiary           { width: 25%; float: right; }
* html .c321 .primary       { width: 50%; float: right; }
* html .c321 .secondary     { width: 25%; float: right; }
* html .c321 .tertiary      { width: 25%; float: right; }

.c12 > .primary             { width: 75%; float: left; }
.c12 > .secondary           { width: 25%; float: left; }
.c12 > .tertiary            { width: 25%; float: right; }
* html .c12 .primary        { width: 75%; float: left; }
* html .c12 .secondary      { width: 25%; float: left; }
* html .c12 .tertiary       { width: 25%; float: right; }

.c21 > .primary             { width: 75%; float: right; }
.c21 > .secondary           { width: 25%; float: left; }
.c21 > .tertiary            { width: 25%; float: left; clear: left; }
* html .c21 .primary        { width: 75%; float: right; }
* html .c21 .secondary      { width: 25%; float: left; }
* html .c21 .tertiary       { width: 25%; float: left; clear: left; }

.c1 > .primary,
.c1 > .secondary,
.c1 > .tertiary,
.c1 > .quaternary,
.c1 > .quinary              { width: 100%; float: left; }
* html .c1 .primary,
* html .c1 .secondary,
* html .c1 .tertiary,
* html .c1 .quaternary,
* html .c1 .quinary         { width: 100%; float: left; }

.c2x50 > .primary,
.c2x50 > .secondary         { width:  50%; float: left; }
* html .c2x50 .primary,
* html .c2x50 .secondary    { width:  50%; float: left; }

.c3x33 > .primary           { width:  34%; float: left; }
.c3x33 > .secondary,
.c3x33 > .tertiary          { width:  33%; float: left; }
* html .c3x33 .primary      { width:  34%; float: left; }
* html .c3x33 .secondary,
* html .c3x33 .tertiary     { width:  33%; float: left; }

.c4x25 > .primary,
.c4x25 > .secondary,
.c4x25 > .tertiary,
.c4x25 > .quaternary        { width:  25%; float: left; }
* html .c4x25 .primary,
* html .c4x25 .secondary,
* html .c4x25 .tertiary,
* html .c4x25 .quaternary   { width:  25%; float: left; }

.c5x20 > .primary,
.c5x20 > .secondary,
.c5x20 > .tertiary,
.c5x20 > .quaternary,
.c5x20 > .quinary           { width:  20%; float: left; }
* html .c5x20 .primary,
* html .c5x20 .secondary,
* html .c5x20 .tertiary,
* html .c5x20 .quaternary,
* html .c5x20 .quinary      { width:  20%; float: left; }

.c1over2 > .primary         { width: 100%; float: left; }
.c1over2 > .secondary       { width:  50%; float: left; }
.c1over2 > .tertiary        { width:  50%; float: left; }
* html .c1over2 .primary    { width: 100%; float: left; }
* html .c1over2 .secondary  { width:  50%; float: left; }
* html .c1over2 .tertiary   { width:  50%; float: left; }

.c1over3 > .primary         { width: 100%; float: left; }
.c1over3 > .secondary       { width:  34%; float: left; }
.c1over3 > .tertiary        { width:  33%; float: left; }
.c1over3 > .quaternary      { width:  33%; float: left; }
* html .c1over3 .primary    { width: 100%; float: left; }
* html .c1over3 .secondary  { width:  34%; float: left; }
* html .c1over3 .tertiary   { width:  33%; float: left; }
* html .c1over3 .quaternary { width:  33%; float: left; }

.c1over4 > .primary         { width: 100%; float: left; }
.c1over4 > .secondary       { width:  25%; float: left; }
.c1over4 > .tertiary        { width:  25%; float: left; }
.c1over4 > .quaternary      { width:  25%; float: left; }
.c1over4 > .quinary         { width:  25%; float: left; }
* html .c1over4 .primary    { width: 100%; float: left; }
* html .c1over4 .secondary  { width:  25%; float: left; }
* html .c1over4 .tertiary   { width:  25%; float: left; }
* html .c1over4 .quaternary { width:  25%; float: left; }
* html .c1over4 .quinary    { width:  25%; float: left; }

.c1over4over1 > .primary         { width: 100%; float: left; }
.c1over4over1 > .secondary       { width:  25%; float: left; }
.c1over4over1 > .tertiary        { width:  25%; float: left; }
.c1over4over1 > .quaternary      { width:  25%; float: left; }
.c1over4over1 > .quinary         { width:  25%; float: left; }
.c1over4over1 > .sextary         { width: 100%; float: left; }
* html .c1over4over1 .primary    { width: 100%; float: left; }
* html .c1over4over1 .secondary  { width:  25%; float: left; }
* html .c1over4over1 .tertiary   { width:  25%; float: left; }
* html .c1over4over1 .quaternary { width:  25%; float: left; }
* html .c1over4over1 .quinary    { width:  25%; float: left; }
* html .c1over4over1 .sextary    { width: 100%; float: left; }

.c1over3over2 > .primary         { width: 100%; float: left; }
.c1over3over2 > .secondary       { width:  34%; float: left; }
.c1over3over2 > .tertiary        { width:  33%; float: left; }
.c1over3over2 > .quaternary      { width:  33%; float: left; }
.c1over3over2 > .quinary         { width:  50%; float: left; clear: left; }
.c1over3over2 > .sextary         { width:  50%; float: left; }
	/* doesn't work fully in IE7, 6 or 5.x */
	* html .c1over3over2 .primary    { width: 100%; float: left; clear: left; }
	* html .c1over3over2 .secondary  { width:  34%; float: left; clear: left; }
	* html .c1over3over2 .tertiary   { width:  33%; float: left; }
	* html .c1over3over2 .quaternary { width:  33%; float: left; clear: right; }
	* html .c1over3over2 .quinary    { width:  50%; float: left; clear: left; }
	* html .c1over3over2 .sextary    { width:  50%; float: left; }

.c1over5 > .primary         { width: 100%; float: left; }
.c1over5 > .secondary       { width:  20%; float: left; }
.c1over5 > .tertiary        { width:  20%; float: left; }
.c1over5 > .quaternary      { width:  20%; float: left; }
.c1over5 > .quinary         { width:  20%; float: left; }
.c1over5 > .sextary         { width:  20%; float: left; }
* html .c1over5 .primary    { width: 100%; float: left; }
* html .c1over5 .secondary  { width:  20%; float: left; }
* html .c1over5 .tertiary   { width:  20%; float: left; }
* html .c1over5 .quaternary { width:  20%; float: left; }
* html .c1over5 .quinary    { width:  20%; float: left; }
* html .c1over5 .sextary    { width:  20%; float: left; }

.c2over3 > .primary         { width:  50%; float: left; }
.c2over3 > .secondary       { width:  50%; float: left; }
.c2over3 > .tertiary        { width:  34%; float: left; clear: left; }
.c2over3 > .quaternary      { width:  33%; float: left; }
.c2over3 > .quinary         { width:  33%; float: left; }
	/* doesn't work fully in IE7, 6 or 5.x */
	* html .c2over3 .primary    { width:  50%; float: left; }
	* html .c2over3 .secondary  { width:  50%; float: left; }
	* html .c2over3 .tertiary   { width:  34%; float: left; clear: left; }
	* html .c2over3 .quaternary { width:  33%; float: left; }
	* html .c2over3 .quinary    { width:  33%; float: left; }

.c2over4 > .primary         { width:  50%; float: left; }
.c2over4 > .secondary       { width:  50%; float: left; }
.c2over4 > .tertiary        { width:  25%; float: left; clear: left; }
.c2over4 > .quaternary      { width:  25%; float: left; }
.c2over4 > .quinary         { width:  25%; float: left; }
.c2over4 > .sextary         { width:  25%; float: left; }
	/* doesn't work fully in IE7, 6 or 5.x */
	* html .c2over4 .primary    { width:  50%; float: left; }
	* html .c2over4 .secondary  { width:  50%; float: left; }
	* html .c2over4 .tertiary   { width:  25%; float: left; clear: left; }
	* html .c2over4 .quaternary { width:  25%; float: left; }
	* html .c2over4 .quinary    { width:  25%; float: left; }
	* html .c2over4 .sextary    { width:  25%; float: left; }

/* --------------------------------------------------------------------------------------------------------
   Padding for column contents */
.wrap { padding: 0 1em; }		/* .column > div { padding: 0 1em; } */

/* --------------------------------------------------------------------------------------------------------
   Equalize the height of the three columns */
.container { 
	*position: relative;		/* IE7 only: gets negative margins and/with column equalization working (only needed for .213x and .312x) */
	_position: static;			/* IE6 and 5.x: reset position to default to get negative margins and/with column equalization working (only needed for .213x and .312x) */
	overflow: hidden; }			/* chops off the overhanging padding/margins applied to each column (below); ensures the .container div expands vertically to VISUALLY wrap all elements it contains (without this, the divs height is, effectively, 0, and any BG color applied will not appear) */
.column {
	padding-bottom: 32767px;	/* maximum value Safari can safely handle (pixels the safest value to use?); the padding gives the columns height */
	margin-bottom: -32767px;	/* padding gets chopped off by margin, but still remains within .container */
	overflow: hidden;			/* IE6/Win: prevent column CONTENT from overflowing the container (this handles images that may be wider than their container) */
	}

/* --------------------------------------------------------------------------------------------------------
   IE hacks for Columns */
* html .column {
	display: inline;		/* prevent double margin float bug */
	zoom: 1;				/* this allows the negative margins on .container to work in IE5.x and partially work in IE6 */
	position: relative;		/* IE6: gets negative margins and/with column equalization working (only needed for .213x and .312x) */
	}
/* Easy clearing -- doesn't seem to be needed */
/*
.container:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
* html .container { height: 1%; }
.container { display: inline-block; }
.container { display: block; }
*/
/* end easy clearing */

/* -------------------------------------------------------------------------------------------------------- */




/* ======================================================================================================== 
   IE Hacks and Workarounds - General
   ======================================================================================================== */

/* Force display of vertical scrollbars in IE8, Firefox, Webkit and Opera. These browsers hide the vertical scrollbar when page content is less
   than the height of the browser viewport. When moving to a page that is taller than the viewport, the layout "jumps" as the scrollbar appears.
   The CSS3 property overflow-y:scroll forces the scrollbar display. Older IEs don't need to force display of scrollbars, so use _overflow:auto
   (overflow:visible works for IE7 and IE6, but IE5 needs overflow:auto) */
body { overflow-y: scroll; }
/*body { _o\verflow: auto; }*/
/*body { *overflow: visible; }*/
body { *overflow: visible; }	/* IE7 and below see this */
body { _overflow: auto; }		/* IE6 and below see this--it's meant for IE5 */
body { _o\verflow: visible; }	/* IE6 only sees this */

/* IE7 can have problems zooming in on layouts. position:relative on the body solves almost all of these problems (.container can also get this property). */
/*
body { position: relative; }
* html body { position: static; }
*/

/* In IE5.x and IE6/Win, oversized content (such as really long lines caused by links or long unbroken words, cause containers to expand rather than let
   the content overflow as they should; "fix" using the proprietary IE property word-wrap:break-word */
* html .column div { word-wrap: break-word; }

/* In IE6/Win, boost the robustness of layouts and help keep them from breaking by giving them the proprietary IE property "layout"
   by using the proprietary IE property zoom for IE6 and 7; these seem to help when .container is given a percentage width
   ADD CONTAINER DIVS THAT SPAN THE WIDTH OF .page OR body */
/*.page, .container, #header, #footer { zoom:1; }
* html .page, * html .container { height: 1%; _hei\ght: auto; }*/		/* for IE5.x and 6 | for IE6 only */
/** html #header, * html #footer { width: 100%; _wid\th: auto; }*/		/* for IE5.x and 6 | for IE6 only */

/* Prevent the Italics Bug problems */
/* In IE5.5+/Win, italicized text causes a container's width to expand; prevent by assigning overflow:hidden to ALL elements of the page
   In IE 5.x and 6/Win, ensure textarea will display correctly by setting overflow:scroll; overflow-x(a CSS3 property):hidden;
   In IE 5.x and 6/Win, ensure input will display correctly by setting overflow:hidden; */
/** html body *   { overflow: visible; }
* html textarea { overflow: scroll; overflow-x: hidden; }
* html input    { overflow: hidden; }
*/
/* IE5.x and 6: prevent disappearing list background problems by setting position:relative for all types of lists */
/*
* html ul,
* html ol,
* html dl { position: relative; }
*/

/* IE5.x, IE6 and IE7: prevent list numbering bug in ordered lists */
body ol li { *display: list-item; }

/* List elements should align to the top when the item wraps, but not in IE
ol li { vertical-align: top; }
*/

/* if needed, fix IE5.x and IE6 double float margin bug by given floated columns display: inline */
/* if needed, in IE5.x and IE6  avoid incomplete display of content in columns by giving the column containers position:relative */


/* --------------------------------------------------------------------------------------------------------
   IE Hacks and Workarounds - Specific */

/* default to centering the viewport contents in IE5.5 and lower; reset default CONTENT alignment to left using .page */
body       { text-align: center; }
.container { text-align: left; }

/*
body { border: 0; }/*		/* remove the border from around the viewport in old versions of IE */

/* How to target versions of IE; note that the order of rules matters!!!
   * html body { color: #000; }    / IE6 and below (IE6 only?)(the Star HTML Hack, or Tan Hack) /
   .example {
     background: black;
     color: red;					/ all browsers see this rule /
     *color:green;					/ IE7, IE6 and IE5.x see this rule (star hack (NOT the Star HTML Hack, or Tan Hack)) /
     _color: blue;					/ IE6 and below see this rule (underscore hack) /
     _c\olor: yellow;				/ IE6 only sees this rule (backslash hack); Escaping any letter within the property name which isn't in the range a-f, A-F, 0-9 will hide that rule from IE 5.x. /
   }
*/