/* 
	The grid system is based upon two types of columns:
	
	con_(containers) are marginless columns, full width
	col (columns) have margins, for readability, and must be within a con
	
	unfortunately IE messes up the name space so each style must be stated expclictly. 
	
	example:
	
	<div class="con_four">
		<div class="col_two"></div>
		<div class="col_one"></div>
		<div class="col_one"></div>
	</div>
	
	In this example there will be three columns, one two wide, and two single columns

*/
body {margin:0px 40px 40px; position:relative;}

#content {position:relative;}

.con_{float:left; display:inline; margin:0px; padding:0;}

.con_one 		  {width:80px;  float:left; display:inline; margin:0px; padding:0; }
.con_one_half {width:120px;  float:left; display:inline; margin:0px; padding:0; }
.con_two 		  {width:160px; float:left; display:inline; margin:0px; padding:0; }
.con_three 	  {width:240px; float:left; display:inline; margin:0px; padding:0; }
.con_four 	  {width:320px; float:left; display:inline; margin:0px; padding:0; }
.con_five 	  {width:400px; float:left; display:inline; margin:0px; padding:0; }
.con_six 		  {width:480px; float:left; display:inline; margin:0px; padding:0; }
.con_seven 	  {width:560px; float:left; display:inline; margin:0px; padding:0; }
.con_eight 	  {width:640px; float:left; display:inline; margin:0px; padding:0; }
.con_nine 	  {width:720px; float:left; display:inline; margin:0px; padding:0; }
.article, 
.con_ten 	    {width:800px; float:left; display:inline; margin:0px; padding:0; }
              
.col {float:left; margin:8px; padding:0px; display:inline;}

.col_one 			{width:64px;  float:left; margin:8px; padding:0px; display:inline; }
.col_one_half {width:104px;  float:left; margin:8px; padding:0px; display:inline; }
.col_two 			{width:144px; float:left; margin:8px; padding:0px; display:inline; }
.col_two_half {width:184px; float:left; margin:8px; padding:0px; display:inline; }
.col_three 		{width:224px; float:left; margin:8px; padding:0px; display:inline; }
.col_four 		{width:304px; float:left; margin:8px; padding:0px; display:inline; }
.col_five 		{width:384px; float:left; margin:8px; padding:0px; display:inline; }

.col_six 			{width:464px; float:left; margin:8px; padding:0px; display:inline; }

.article p,

.col_seven 		{width:544px; float:left; margin:8px; padding:0px; display:inline; }
.col_eight 		{width:624px; float:left; margin:8px; padding:0px; display:inline; }
.col_nine 	  {width:704px; float:left; margin:8px; padding:0px; display:inline; }


.col_ten 	  	{width:784px; float:left; margin:8px; padding:0px; display:inline; }

.icon {height:160px;}

/* Alignment short hands */

.l 				{text-align:left;}
.r 				{text-align:right;}
.c 				{text-align:center;}

.rel      {position:relative;}
.abs      {position:absolute;}

/* Margin short hands */

.mt 			{margin-top:8px}
.mt2 			{margin-top:16px}
.mb 			{margin-bottom:8px}
.mb2 			{margin-bottom:16px}

.no_mt 		{margin-top:0}
.no_m			{margin:0}
.no_mb		{margin-bottom:0}

.full_width {width:100%;}
/* floats */
.fl {float:left}
.fr {float:right}
.nf {float:none}
.break {clear:left}
/* lines and dividers */

.left_divider
  {
  border-left:1px #D8CDB7 solid;
  margin-left:40px;
  padding-left:39px;
  display:inline;
  float:left;
  }
.right_divider
  {
  border-right:1px #D8CDB7 solid;
  margin-right:30px;
  padding-right:30px;
  display:inline;
  float:left;
  }
  
.top_line
  {
  border-top:1px #D8CDB7 solid;
  }

/* 
Special Elements
*/

.work div
{
  margin-bottom:4px;
}

#preview_image
{
  float:left;
  display:inline;
  height:260px;
  width:100%;
  overflow:hidden;
  border:1px #EEE solid;
  padding:8px;
}

.scroll {

}