/* -------------------------------------------------------------- 
   
   grid.css
   * Sets up an easy-to-use grid of 24 columns.
   
   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Khoi Vinh         [subtraction.com]
   
   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
   
   Read more about using a grid here:
   * subtraction.com/archives/2007/0318_oh_yeeaahh.php
   
-------------------------------------------------------------- */

/* 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: left;
  margin: 0px;
  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: 15px; }
.span-2   { width: 224px; line-height: 1.4em; }
.span-3   { width: 716px; line-height: 1.0em; }
.span-4   { width: 941px; }
.span-5   { width: 970px; }
.span-6   { width: 95px; }
/* the next two columns are the left and right columns of a content area */
.span-7   {
	width: 450px;
	margin-left: 0px;
}
.span-75   {
	width: 650px;
	margin-left: 0px;
}
.span-8   {
	width: 200px;
	margin-left:16px;
}
.span-01   { width: 300px; }
.span-02  { width: 610px; }
.span-03  { width: 650px; }

/* Add these to a column to append empty cols. */
.append-1   { padding-right: 15px; }  
.append-2   { padding-right: 223px; } 
.append-3   { padding-right: 716px; }
.append-4   { padding-right: 940px; } 
.append-5   { padding-right: 970px; } 
.append-6   { padding-right: 4px; }

/* Add these to a column to prepend empty cols. */
.prepend-1   { padding-left: 15px; }  
.prepend-2   { padding-left: 223px; } 
.prepend-3   { padding-left: 716px; }
.prepend-4   { padding-left: 940px; }
.prepend-5   { padding-left: 970px; }

/* Use these classes to set the background tiles of a column. */
.left           { background: url('../../images/border_left.gif') no-repeat top left; }
.right          { background: url('../../images/border_right_tile.gif') repeat-y top left; }
.tile           {
	background-image: url(../images/borders/container_tile.gif);
	background-repeat: repeat-y;
	background-position: left top;
}
.leftrail       { float: left; background: url('../../images/leftrail_tile.jpg') no-repeat top left; color: #6f6d5a; font-size: 0.9em; line-height: 1.2em; }
.int            {
	background: url('../../images/leftrail_int_tile.jpg') no-repeat top left;
	font-size: medium;
}
.item           { width: 194px; padding: 0 12px 0 18px; }
.submenu        { margin-top: 14px; } 
.bulletin       { margin-top: 10px; }
.utility        { text-align: right; text-transform: uppercase; color: #9f5506; font-size: 10px; line-height: 2.0em; }

.mainrail-bg { background:#fff url('../../images/mainrail_inttop_tile.png') no-repeat top left !important; }

.mainrail       { float: right; width: 711px; border-left: 1px #d9d39f solid; padding: 2px; 
	/* min-height ie6 hack: http://www.dustindiaz.com/min-height-fast-hack/ */
	min-height:498px;height:auto !important;height:498px; }
	
.mrint           { width: 716px; border-left: 0px; padding: 0px; }

.mainrailtop       { float: right; clear: right; width: 671px; /*background: url('../../images/mainrail_inttop_tile.jpg') no-repeat top left;*/ border-right: 2px #fff solid; padding: 16px 20px 0px 23px}
.mainrailint       { width: 671px; /*background: #fff url('../../images/mainrail_int_tile.jpg') repeat-x top left;*/ padding: 20px;  font-size: 1.1em; line-height: 1.4em; }
.menu                 { width: 936px; height: 31px; border-right: 2px #fff solid; border-bottom: 2px #fff solid; border-left: 2px #fff solid; }
.under          { }
.footer1         {
	padding: 10px 15px 5px 15px;
	text-align: left;
	text-transform: uppercase;
	font-size: x-small;
	line-height: 1.4em;
	color: #9f5506;
}
.footer         {
	padding: 10px 15px 5px 15px;
	text-align: right;
	text-transform: uppercase;
	font-size: x-small;
	line-height: 1.4em;
	color: #6f6d5a;
}
.breadcrumbs    { padding-top: 25px; font-size: 0.9em; }
.breadcrumbs a, .footer a       { color: #2a3d98; }


/* Border on right hand side of a column. */
.border { padding: 4px 0 4px 0; }
.top-reset { padding-top: 0px; }

/* Border with more whitespace, spans one column. */
.colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #eee; }

/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column. */
.pull-1  { margin-left: -40px; }
.pull-2  { margin-left: -80px; }
.pull-3  { margin-left: -120px; }
.pull-4  { margin-left: -160px; }

.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: 15px; 
  margin-bottom: 1.5em; 
  background: #eee; }
  /* Use a .box to create a padded box inside a column.  */ 
.box1 { 
  padding: 15px; 
  margin-bottom: 1.5em; 
  background: #edeacd; }

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

/* 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; }