/* -------------------------------------------------------------- 
   
   grid.css
   * Sets up an easy-to-use grid of 24 columns.
   
   By default, the grid is 950px wide, with 24 columns 
   spanning 30px, and a 10px margin between columns.
   
   If you need fewer or more columns, use this 
   formula to find the new total width: 
   Total width = (columns * 40) - 10
   
-------------------------------------------------------------- */

/* A container should group all your columns. */
.container {
  width: 970px;
  margin: 0 auto;
  line-height: 0px;
}


/* Columns
-------------------------------------------------------------- */

/* Use this class together with the .span-x classes
   to create any composition of columns in a layout. */
   
.column {
  float: right;
  margin: 0 auto;
  padding: 0px;
}


/* The last column in a row needs this class. */
.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1   { width: 970px; line-height: 1.25em; }
.span-2   { width: 495px; line-height: 1.25em; }
.span-3   { width: 475px; line-height: 1.25em; }
.span-3a  { width: 459px; line-height: 1.25em; }
.span-4   { width: 312px; line-height: 1.25em; }
.span-5   { width: 235px; }
.span-6   { width: 163px; line-height: 1.25em; }
.span-7   { width: 707px; line-height: 1.25em; padding-left: 10px; }
.span-8   { width: 217px; line-height: 1.25em; padding: 8px 28px 0px 8px;}
.span-9   { width: 205px; line-height: 1.25em; margin: 0 0 10px 20px; float: right; }
.span-10  { width: 459px; line-height: 1.25em;}
.span-11  { width: 1024px; line-height: 1.25em; padding-left: 10px; }

/* Add these to a column to append empty cols. */
.append-1   { margin-right: 110px; }  
.append-2   { margin-right: 178px; } 
.append-3   { margin-right: 512px; }
.append-4   { margin-right: 800px; }

/* Add these to a column to prepend empty cols. */
.prepend-1   { margin-left: 110px; }  
.prepend-2   { margin-left: 178px; } 
.prepend-3   { margin-left: 512px; }
.prepend-4   { margin-left: 800px; }


/* Use these classes to set the background tiles of a column. */
/* Universal */
.printlogo { display: none; }
.menu { height: 36px; background: url('../images/menu_tile.png') no-repeat 0 0; _background: url('../images/menu_tile.gif') no-repeat 0 0; }
.promos { height: 45px; background: #fff url('../images/promos_tile.jpg') repeat-x 0 0; text-align: center; color: #666666; padding: 24px 0 15px 0; }
.footer { background: #5e533e url('../images/footer_tile.jpg') repeat-x 0 0; text-align: left; color: #877c6a; padding: 13px 0 20px 0px; line-height: 1.5em;}
.footer-right { width: 350px; float:right; text-align: right; color: #fff; padding: 0 10px 0 0; line-height: 1.5em; }
/* Homepage Specific*/
.header { background: #312b20 url('../images/header_tile.jpg') repeat-x top center; }
.header_back { height: 144px; background: url('../images/header_back.jpg') no-repeat top center; }
.flashheader { float: right; width: 500px; height: 140px; }
.alert   { width: 934px; margin: 0 10px 15px 10px; border: 1px #fff solid; background: #d70f1b; padding: 7px; font-weight: bold; color: #fff; }
.actions { float: right; width: 290px; height: 83px; padding: 6px; margin: 20px 10px 0 0; background: url('../images/actions_back.gif') no-repeat 0 0; }
.join { width: 285px; height: 55px; padding: 3px 5px 0 0; background: #2d80ca url('../images/joinus_tile.jpg') no-repeat 0 0; color: #fff; }
.contactus { width: 285px; height: 19px; padding: 8px 5px 0 0; background: #84b5e1 url('../images/tellafriend_tile.jpg') repeat-x 0 0; }
.content { background: #f5f1e5 url('../images/content_tile.jpg') repeat-x top center; padding: 0; }
/* Interior Specific */
.interior  { background: #f7f3e7 url('../images/int_tile.jpg') repeat-x top center; }
.interior_header  { height: 168px; background: #2e81cb url('../images/int_tile_about.jpg') no-repeat top center; }
    body.about .interior_header  { background: #2e81cb url('../images/int_tile_about.jpg') no-repeat top center; }
    body.departments .interior_header  { background: #2e81cb url('../images/int_tile_departments.jpg') no-repeat top center; }
    body.politicalaction .interior_header  { background: #2e81cb url('../images/int_tile_politicalaction.jpg') no-repeat top center; }
    body.resources .interior_header  { background: #2e81cb url('../images/int_tile_resources.jpg') no-repeat top center; }
    body.ibewmerchandise .interior_header  { background: #2e81cb url('../images/int_tile_ibewmerchandise.jpg') no-repeat top center; }
    body.sp .interior_header  { background: #2e81cb url('../images/int_tile_sp.jpg') no-repeat top center; }
    body.fr .interior_header  { background: #2e81cb url('../images/int_tile_fr.jpg') no-repeat top center; }
.interior_back { background: #f5f1e5 url('../images/int_back_tile.jpg') repeat-x top center; padding: 0; }
.interior_content { background: #f5f1e5 url('../images/int_content_tile.jpg') repeat-x top center; }
.interior_content_wide { background: #f5f1e5 url('../images/int_content_tile-wide.jpg') repeat-x top center; }.secid { float: right; text-align: left; padding: 3px 0 0 5px; }
.utility { width: 437px; float: right; text-align: right; padding: 5px 15px 0 0; }
.breadcrumbs { padding: 10px 10px 5px 5px;  }
.maincontent { width: 687px; background: #f7f3e7; padding: 10px 5px 5px 5px; border-top: 1px #c1bdb1 solid; margin-right: 10px;  font-size: 12px;}
.railitem    { padding: 6px 12px 6px 12px; }


/* Border on right hand side of a column. */
.border-1 { border-top: 1px #fff solid; }
.border-2 { border-right: 1px #fff solid; }
.border-3 { border-bottom: 1px #ffff solid; }
.border-4 { border-left: 1px #ffff solid; }
.border-5 { border: 1px #ffff solid; }


.top-reset-1 { padding-top: 0px; }
.top-reset-2 { padding-top: 5px; }
.top-reset-3 { padding-top: 10px; }

.fullwidth { width: 100%; }

/* Border with more whitespace, spans one column. */
.colborder {
  padding: 17px;
}


/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column. */

.pull-1  { margin-right: 5px; }
.pull-2  { margin-right: 10px; }
.pull-3  { margin-right: 20px; }
.pull-4  { margin-right: 40px; }

.push-0  { margin: 0 0 0 18px; }
.push-1  { margin: 0 -40px 0 18px; }
.push-2  { margin: 0 -80px 0 18px; }
.push-3  { margin: 0 -120px 0 18px; }
.push-4  { margin: 0 -160px 0 18px; }
.push-0, .push-1, .push-2, .push-3, .push-4 { float: right; }


/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  */ 
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #eee; 
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #d2cec2; 
  color: #d2cec2;
  clear: both; 
  float: none;
  padding:0; 
  width: 100%; 
  height: 1px;
  line-height:0;
  margin: 0;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clear { display: inline-block; }   
.clear:after, .container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }