/*
$Date:2009-09-01 09:14:53 -0400 (Tue, 01 Sep 2009) $
$Rev:3056 $
$Id:grid.css 3056 2009-09-01 13:14:53Z doug $
Author - Doug Fraize
****************************************************************/
html				{height:100%; margin-bottom:1px;}

/*--- PAGE SETUP --------------------------------------------------------------------------*/
.page				{height:100%; text-align:center;}
.page-container		{margin:0 auto; width:980px;}
.page-adjust		{width:960px;}
/*- PAGE ADJUST NOTES:
*** THE FOLLOW SHOULD BE OVERRIDE IN PRODUCT SPECIFIC STYLESHEET
	If you need to have a layout with header and footer are 100% of the page with grid
	fixed just set the width of page adjust to 100% then use a fixed value in grid adjust.
	{width:960px;}
	{width:100%;}
-------------------------------------------------------------------------------------------*/

/*--- MASTHEAD & FOOTER SETUP -------------------------------------------------------------*/
.masthead, .footer	{position:relative; text-align:left;}
.masthead			{margin:0 10px;}	/*USED TO MATCH INDENT OF THE GRID*/
.footer				{margin:0 10px;}	/*USED TO MATCH INDENT OF THE GRID*/

/*--- CLASSES USED TO CONTROL GRID WIDTHS -------------------------------------------------*/
.grid				{height:100%; margin:0 10px 0 10px; text-align:left;}
.grid-adjust		{}
/*- GRID ADJUST NOTES
*** THE FOLLOW SHOULD BE OVERRIDE IN PRODUCT SPECIFIC STYLESHEET
	If you need to the grid to be 100% of the page just leave grid adjust empty, if you
	need a fixed layout for grid then use the below:
	{margin:0 auto; width:960px;}
-------------------------------------------------------------------------------------------*/
.min-height			{min-height:550px; height:auto !important; height:550px;}

/*--- GLOBAL GRID COLUMN SETUP ------------------------------------------------------------*/
div.col_1, div.col_2, div.col_3, div.col_4, div.col_5, div.col_6, div.col_7, div.col_8,
div.col_9, div.col_10, div.col_11, div.col_12, div.col_13, div.col_14, div.col_15, div.col_16,
div.col_17, div.col_18, div.col_19, div.col_20, div.col_21, div.col_22, div.col_23, div.col_24,
.layout_18, .layout_28, .layout_38, .layout_16_8_1, .layout_16_8_2, .layout_8_16_1, .layout_8_16_2,
.layout_12_12_1, .layout_12_12_2
{float:left; margin-right:2.128%; position:relative; min-height:20px;}

/*--- CUSTOM GRID SETUP ------------------------------------------------------------------*/
.col_1				{width:2.128%;}
.col_2				{width:6.383%;}
.col_3				{width:10.640%;}
.col_4				{width:14.894%;}
.col_5				{width:19.149%;}
.col_6				{width:23.406%;}
.col_7				{width:27.660%;}
.col_8				{width:31.915%;}
.col_9				{width:36.172%;}
.col_10				{width:40.426%;}
.col_11				{width:44.681%;}
.col_12				{width:48.937%;}
.col_13				{width:53.193%;}
.col_14				{width:57.447%;}
.col_15				{width:61.701%;}
.col_16				{width:65.959%;}
.col_17				{width:70.213%;}
.col_18				{width:74.469%;}
.col_19				{width:78.725%;}
.col_20				{width:82.979%;}
.col_21				{width:87.235%;}
.col_22				{width:91.489%;}
.col_23				{width:95.745%;}
.col_24, div.col_24	{width:100.000%; margin:0;}

/*--- PRESET LAYOUTS ---*/
/*--- 3 COLUMN LAYOUT
NOTE: This displays the columns with a width of 300px each.
--------------------------------------------------------------*/
.layout_18			{width:31.915%;}
.layout_28			{width:31.915%;}
.layout_38			{width:31.915%; margin:0;}

/*--- 2 COLUMN LAYOUT - SMALL COLUMN ON RIGHT
NOTE: This displays a 600px wide column on the left and a 300px 
column on the right.
--------------------------------------------------------------*/
.layout_16_8_1		{width:65.959%; margin-right:4.256%;}
.layout_16_8_2		{width:29.659%; margin-right:0;}

/*--- 2 COLUMN LAYOUT - SMALL COLUMN ON LEFT
NOTE: This displays a 600px wide column on the right and a 300px 
column on the left.
--------------------------------------------------------------*/
.layout_8_16_1		{width:29.659%; margin-right:4.256%;}
.layout_8_16_2		{width:65.959%; margin-right:0;}

/*--- 2 COLUMN LAYOUT - SPLITS THE PAGE 50%/50%
NOTE: This display splits the page in half, 450px/450px
--------------------------------------------------------------*/
.layout_12_12_1		{width:47.809%; margin-right:4.256%;}
.layout_12_12_2		{width:47.809%; margin-right:0;}

/*--- THE LAST COLUMN IN A ROW NEEDS TO HAVE THIS CLASS TO REMOVE THE EXTRA MARGIN CALL ---*/
.last, div.last		{margin-right:0;}

/*--- CLEARING FLOATS WITHOUT EXTRA MARKUP --------------------------------------*/
.clearfix:after, .grid:after	{content:"\0020"; display:block; height:0; clear:both; visibility:hidden; overflow:hidden;}
.clearfix, .grid				{display:block;}

/*--- APPLY TO COLUMN THAT SHOULD DROP DOWN BELOW PREVIOUS ONES ----------------*/
.clear							{clear:both;}

/*-- TESTING
.grid {outline:1px solid blue;}

div.col_1, div.col_2, div.col_3, div.col_4, div.col_5, div.col_6, div.col_7, div.col_8,
div.col_9, div.col_10, div.col_11, div.col_12, div.col_13, div.col_14, div.col_15, div.col_16,
div.col_17, div.col_18, div.col_19, div.col_20, div.col_21, div.col_22, div.col_23, div.col_24
{outline:1px solid red;}
---*/