/*******************************************************************************
 *     Columns                                                                 *
 *     This is  a css column layout. All column layouts                        *
 *     Are SEO friendly, meaning the main content is                           *
 *     actually first in order, so search engines will                         *
 *     read the most important data on the page first.                         *
 *                                                                             *
 *     You can use px,em,% to call out widths, but it should be consistent     *
 *     based on css by http://matthewjamestaylor.com                           *
 *                                                                             *
 *******************************************************************************/


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

/*
 * Column Backgrounds *
 */
.onecol{background: #eee4c9;}			/* main content area */

.twocolA {background: transparent;}			/* side bar */
.twocolA .colleft {background: transparent;}		/* main content area */

.twocolB {background: transparent;}			/* side bar */
.twocolB .colleft {background: transparent} 	/* main content area */

.twocolC {background: #eee4c9;}			/* main content area */
.twocolC .colleft {background: #eee4c9;}		/* side bar */

.twocolD {background: #eee4c9;}			/* main content area */
.twocolD .colleft {background: #eee4c9;}		/* side bar */

.threecolA {background: silver;}			/* right side bar */
.threecolA .colmid {background: #cbbc92;}	/* main content area */
.threecolA .colleft {background: #cbbc92;}	/* left side bar */

.colmask .colmask{
  background: none !important;
}

.threecolB {background: none;}			/* right side bar */
.threecolB .colmid {background: none !important;}	/* left side bar */
.threecolB .colleft{background: none !important;}	/* main content area */

/*******************************************************************************
 * column container                                                            *
 *******************************************************************************/


.container{
  margin: 0;
  padding:0;
  border:0;
  width:100%;
}

.colmask {
  position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
  width:100%;			/* width of whole page */
  overflow:hidden;		/* This chops off any overhanging divs */
  margin: 0px 0px 0px 0px;     /* margin may be ajusted to suite */
  z-index: 100;
}


/*******************************************************************************
 * column container settings                                                   *
 *******************************************************************************/


.colright,
.colmid,
.colmid2,
.colleft {
  float:left;
  width:100%;
  position:relative;
  z-index: 101;
}
.col1,
.col2,
.col3,
.col4 {
  float:left;
  position:relative;
  padding:0 0 0 0;
  overflow:hidden;
  z-index: 102;
}


/*******************************************************************************
 * column layouts                                                              *
 *******************************************************************************/


/* Single column */
/* STRUCTURE:
<div class="body">
	<div class="colmask onecol">
		<div class="col1"><h2>Column 1</h2></div>
	</div>
</div>
*/
.onecol .col1 {
  width:96%;			/* <- page width minus left and right padding */
  left:2%;			/* <- page left padding */
}



/* 2 columns of equal width */
/* STRUCTURE:
<div class="colmask twocolA">
	<div class="colleft">
		<div class="col1">
			<!-- Column 1 start -->
		</div>
		<div class="col2">
			<!-- Column 2 start -->
		</div>
	</div>
</div>
*/

.twocolA .colleft {
  right:48%;			/* <- right column width */
  				/* <- left column background colour */
}
.twocolA .col1 {
  width:48%;			/* <- left column content width (column width minus left and right padding) */
  left:50%;			/* <- right column width plus left column left padding */
}
.twocolA .col2 {
  width:46%;			/* <- right column content width (column width minus left and right padding) */
  left:53%;			/* <- (right column width) plus (left column left and right padding) plus (right column left padding) */
}



/* 2 columns right sidebar */

.twocolB {
  				/* right column background colour */
}
.twocolB .colleft {
  right:25%;			/* right column width */
  				/* left column background colour */
}
.twocolB .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) */
}
.twocolB .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 columns left sidebar */

.twocolC .colleft {
  right:87%;			/* right column width */
  				/* left column background colour */
}
.twocolC .col1 {
  width:87%;			/* right column content width */
  left:100%;			/* 100% plus left column left padding */
}
.twocolC .col2 {
  width:13%;			/* left column content width (column width minus left and right padding) */
  left:0%;			/* (right column left and right padding) plus (left column left padding) */
}



/* 3 columns main column in the center*/
/* STRUCTURE:
<div class="colmask .3colA">
	<div class="colmid">
		<div class="colleft">
			<div class="col1wrap">
				<div class="col1">
					<!-- Column 1 start -->
				</div>
			</div>
			<div class="col2">
					<!-- Column 2 start -->
			</div>
			<div class="col3">
					<!-- Column 3 start -->
			</div>
		</div>
	</div>
</div>

/* 2 Column with a fixed sidebar width*/
/* STRUCTURE:
<div class="colmask leftmenu">
    <div class="colright">
        <div class="col1wrap">
            <div class="col1">
                <!-- Column 2 start -->
            </div>
        </div>
        <div class="col2">
            <!-- Column 1 start -->
        </div>
    </div>
</div>
*/


.threecolA {
	background:#eee;		/* right column background colour */
}
.threecolA .colmid {
	right:25%;				/* width of the right column */
	background:#fff;		/* center column background colour */
}
.threecolA .colleft {
	right:50%;				/* width of the middle column */
	background:#f4f4f4;		/* left column background colour */
}
.threecolA .col1 {
	width:46%;				/* width of center column content (column width minus padding on either side) */
	left:102%;				/* 100% plus left padding of center column */
}
.threecolA .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) */
}
.threecolA .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 columns main column is on the left */


.threecolB .colmid {
  right:33%;			/* width of the right column */
  				/* center column background colour */
}
.threecolB .colleft {
  right:33%;			/* width of the middle column */
  				/* left column background colour */
}
.threecolB .col1 {
  width:33%;			/* width of center column content (column width minus padding on either side) */
  left:100%;			/* 100% plus left padding of center column */
}
.threecolB .col2 {
  width:33%;			/* Width of left column content (column width minus padding on either side) */
  left:33%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecolB .col3 {
  width:34%;			/* Width of right column content (column width minus padding on either side) */
  left:67%;			/* 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) */
}


.twocolD.colmask {
  position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
  clear:both;
  float:left;
  width:100%;			/* width of whole page */
  overflow:hidden;	/* This chops off any overhanging divs */
}

/* 4 columns main column is on the left */


.fourcol .colmid {
  right:25%;			/* width of the right column */
  				/* center column background colour */
}
.fourcol .colleft {
  right:25%;			/* width of the middle column */
	background: none !important;  				/* left column background colour */
}
.fourcol .col1 {
  width:25%;			/* width of center column content (column width minus padding on either side) */
  left:75%;			/* 100% plus left padding of center column */
}
.fourcol .col2 {
  width:25%;			/* Width of left column content (column width minus padding on either side) */
  left:25%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.fourcol .col3 {
  width:25%;			/* Width of right column content (column width minus padding on either side) */
  left:50%;			/* 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) */
}
.fourcol .col4 {
  width:25%;			/* Width of right column content (column width minus padding on either side) */
  left:50%;			/* 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) */
}

.From10ColumnContainer
{
	padding-left:20px;	
	padding-right:20px;
	width: 1003px;
}

.Form10Col1
{
	width: 310px;
	float:left;
}
.Form10col2
{
	margin-right:20px;
	margin-left:20px;
	width: 310px;
	float:left;
}
.Form10col3
{
	width: 310px;
	float:left;
}