body {
  font: 100% Verdana, Arial, Helvetica, sans-serif;
  background: #666666;

  margin:  0; /* it's good practice to zero the margin and padding of the */
  padding: 0; /* body element to account for differing browser defaults. */

  text-align: center; /* This centers the container in IE 5* browsers. */
		      /* The text is then set to the left aligned default */ 
  		      /* in the #container selector */

  color: #000000;
  background-image: url(../gw_images/bg.jpg);
}

/* Tips for this Hybrid layout
 * 1. Since the side columns em-based sizing is based on the user's default font size, 
 * you will want to be sure that background graphics in the columns take that into account. 
 * Built correctly, this is more accessible for those that need larger font sizes, since 
 * the width of the columns remains proportionate. If this is undesirable with your design, 
 * simply change the width to a pixel size and be sure to change the margins on the 
 * #mainContent div accordingly.
 * 
 * 2. Since the sizing of side columns in this layout are based on the 100% font size in 
 * the body element, if you decrease the text size overall by using a font-size: 80% 
 * on the body element or the #container, remember that the column widths will downsize 
 * proportionately. You may want to increase their widths, and the size of the #mainContent 
 * div's side margins, to compensate for this.
 * 
 * 3. If font sizing is changed in differing amounts on each div instead of on the overall 
 * design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), 
 * this will proportionately change each of the divs overall size. You may want to adjust 
 * based on your final font sizing.
 * 
 * 4. The #container div is not necessary for this layout at the 100% width. You may want to 
 * use it to create faux columns or limit the width of the layout.
 * 
 * 5. It is not neccessary to have the 100% width on the #container div since, by nature, a 
 * div takes up 100% of the available space. It is here so that if you want to decrease the 
 * size of the overall container - perhaps leaving a bit of margin on each side - this will 
 * already be available for adjustment.
 */

.thrColHybHdr #container {
  width: 100%;
  background: #FFFFFF;

/*margin: 0 auto; the auto margins (in conjunction with a width) center the page if needed */

  text-align: left; /* this overrides the text-align: center on the body element. */
  background-image: url(../gw_images/bg.jpg);
}  

.thrColHybHdr #header {
  background: #FFFFFF;
  padding: 0 10px;
  background-image: url(../gw_images/bg.jpg);
} 

.thrColHybHdr #header h1 {
  margin: 0; /* Zeroing the margin of the last element in the #header div will avoid */
  	     /* margin collapse - an unexplainable space between divs. If the div has */
	     /* a border around it, this is not necessary as that also avoids the margin*/
             /* collapse */
  padding: 10px 0; /* Using padding instead of margin will allow you to keep the element */
	  	   /* away from the edges of the div */
  background-image: url(../gw_images/bg.jpg);
}


/* Tips for sidebar1:
 * 1. Be aware that if you set a font-size value on this div, the overall width of the div 
 * will be adjusted accordingly.
 * 
 * 2. Since we are working in ems, it's best not to use padding on the sidebar itself. It 
 * will be added to the width for standards compliant browsers creating an unknown actual width. 
 * 
 * 3. Space between the side of the div and the elements within it can be created by placing 
 * a left and right margin on those elements as seen in the ".thrColHybHdr #sidebar1 p" rule.
 */

.thrColHybHdr #sidebar1 {
  float: left;
  width: 180px; /* since this element is floated, a width must be given */

  background: #FFFFFF; /* the background color will be displayed for the length */ 
		       /* of the content in the column, but no further */
  padding: 15px 0;
  background-image: url(../gw_images/bg.jpg);
}

.thrColHybHdr #sidebar2 {
  float: right;
  width: 11em; /* since this element is floated, a width must be given */

  background: #FFFFFF; /* the background color will be displayed for the length*/ 
		       /* of the content in the column, but no further */
  padding: 15px 0;
  background-image: url(../gw_images/bg.jpg); 
}

.thrColHybHdr #sidebar1 h3, 
.thrColHybHdr #sidebar1 p, 
.thrColHybHdr #sidebar2 p, 
.thrColHybHdr #sidebar2 h3 {
  margin-left: 10px; /* the left and right margin should be given to every */ 
		     /* element that will be placed in the side columns */
  margin-right: 10px;
  background-image: url(../gw_images/bg.jpg);
}

/* Tips for mainContent:
 * 1. If you give this #mainContent div a font-size value different than the #sidebar1 div, 
 * the margins of the #mainContent div will be based on its font-size and the width of the 
 * #sidebar1 div will be based on its font-size. You may wish to adjust the values of these 
 * divs.
 * 
 * 2. The space between the mainContent and sidebar1 is created with the left margin on the 
 * mainContent div.  No matter how much content the sidebar1 div contains, the column space 
 * will remain. You can remove this left margin if you want the #mainContent div's text to 
 * fill the #sidebar1 space when the content in #sidebar1 ends.
 * 
 * 3. To avoid float drop, you may need to test to determine the approximate maximum 
 * image/element size since this layout is based on the user's font sizing combined 
 * with the values you set. However, if the user has their browser font size set lower 
 * than normal, less space will be available in the #mainContent div than you may see on 
 * testing.
 * 
 * 4. In the Internet Explorer Conditional Comment below, the zoom property is used to give 
 * the mainContent "hasLayout." This avoids several IE-specific bugs that may occur.
 * */

.thrColHybHdr #mainContent {
  margin: 0 12em 0 12em; /* The right margin can be given in ems or pixels. */
  		         /* It creates the space down the right side of the page. */
  padding: 0 0.5em 0 0.5em;
} 

.thrColHybHdr #footer {
  padding: 0 10px; /* This padding matches the left alignment of the elements */
		   /* in the divs that appear above it. */
  background:#DDDDDD;
  background-image: url(../gw_images/bg.jpg);
} 
.thrColHybHdr #footer p {
  margin: 0; /* zeroing the margins of the first element in the footer will avoid */
	     /* the possibility of margin collapse - a space between divs */
  padding: 10px 0; /* padding on this element will create space, just as the the */
		   /* margin would have, without the margin collapse issue */
  background-color: #FFFFFF;
  background-image: url(../gw_images/bg.jpg);
}

/* Miscellaneous classes for reuse */
.fltrt { 
/* this class can be used to float an element right in your page. The floated element 
 * must precede the element it should be next to on the page. */
  float: right;
  margin-left: 8px;
}
.fltlft { 
/* this class can be used to float an element left in your page */
  float: left;
  margin-right: 8px;
}
.clearfloat { 
/* this class should be placed on a div or break element and should be the final element 
 * before the close of a container that should fully contain a float */
  clear:both;
  height:0;
  font-size: 1px;
  line-height: 0px;
}

/* IF IE */

/* place css fixes for all versions of IE in this conditional comment */
.thrColHybHdr #sidebar1, .thrColHybHdr #sidebar2 { padding-top: 30px; }
.thrColHybHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */

/* ENDIF */