/* --------------------------------------------------------------

	grid.css
	* Sets up an easy-to-use grid of 12 columns.
	
	By default, the grid is 960px wide, with 12 columns
	spanning 60px, and a 20px margin between columns.
	
-------------------------------------------------------------- */

/* A container should group all your columns. */
.container {
	width: 940px;
	margin: 0 auto;
}

/* Use this class on any div.span / container to see the grid. */
.showgrid { 
	background: url(../img/grid.png); 
}


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

/* Sets up basic grid floating and margin. */
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, li.span-1, li.span-2, li.span-3, li.span-4, li.span-5, li.span-6, li.span-7, li.span-8, li.span-9, li.span-10, li.span-11, li.span-12, .half {
  float: left; display: inline;
  margin-right: 20px;
}
ul.cols{
	padding: 0; margin: 0;
	list-style: none;
}
.variable li{
	float: left; display: inline;
  	margin-right: 10px;
}

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

/* Use these classes to set the width of a column. */
.span-1 	{width: 60px;}
.span-2 	{width: 140px;}
.span-3 	{width: 220px;}
.span-4 	{width: 300px;}
.span-5 	{width: 380px;}
.span-6 	{width: 460px;}
.span-7 	{width: 540px;}
.span-8 	{width: 620px;}
.span-9 	{width: 700px;}
.span-10 	{width: 780px;}
.span-11 	{width: 860px;}
.span-12 	{width: 940px; margin: 0;}

.half		{width: 50%; margin: 0;}
.center		{margin: 0 auto;}

/* Photos aligned to bottom */
table.foto{ margin: 0 0 10px 0; }
table.foto a,
table.foto img{ display: block; margin: 0 auto; }
table.foto th,
table.foto td,
table.foto caption{
	padding: 0;
	vertical-align: bottom;
	text-align: center;
}

table.size-100{ width: 100px; height: 100px; }

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

/* In case you need to add a gutter above/below an element */
.prepend-top { 
  margin-top: 10px; 
}
.append-bottom { 
  margin-bottom: 10px; 
}

/* Use a .box to create a padded box inside a column.  */ 
.box { 
  padding: 10px; 
}

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

/* Clearing floats without extra markup */

.clearfix:after {
	clear: both;
	display: block; visibility: hidden;
	height: 0;
	content: ".";   
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }
div.clear{ width: 100%; clear: both; }

.aural{
	position: absolute;
	left: -2007px;
	font-size: 0;
}

.wrap0 {
	background:url(../img/shadow.gif) 100% 100% no-repeat;
}
.wrap1 {
	background:url(../img/shadow180.gif) no-repeat;
}
.wrap2 {
	background:url(../img/corner_bl.gif) 0 100% no-repeat;
}
.wrap3 {
	padding: 4px 9px 9px 4px;
	background:url(../img/corner_tr.gif) 100% 0 no-repeat;
}