/*********************************************************/
/* Title:		Base CSS
/* Author:		Arik Jones
/* Created:		July 12th, 2007
/* Updated:		July 12th, 2007
/*********************************************************/

/*--------------------------------------*/
/* The City Desk Studio */
/*--------------------------------------*/


/*--------------------------------------*/
/* Hacks & Workarounds */
/*--------------------------------------*/
.clr:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clr {height: 1%;}
/* End hide from IE-mac */

/*--------------------------------------*/
/* Foundation */
/*--------------------------------------*/
body, p, h1, h2, h3, h4, h5, h6, ol, ul, li, dt, dd, dl, pre, img, blockquote, fieldset, legend, form {
	padding: 0;
	margin: 0;
}
body {
	text-align: center;
}

/*--------------------------------------*/
/* Layout Container */
/*--------------------------------------*/
div#wrapper {
	height: auto;
	margin: 0 auto;
	text-align: left;
}
	
/* custom options */
body.columns div.sevensixty, body.fcolumns div.sevensixty {
	/*text-align: left;*/
	width: 760px;
}
body.columns div.eighthundred, body.fcolumns div.eighthundred { 
	/*text-align: left;*/
	width: 800px;
}
body.columns div.ninesixty, body.fcolumns div.ninesixty { 
	/*text-align: left;*/
	width: 960px;
}

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

/**** widths and settings ****/
.span-0, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6,
.span-7, .span-8, .span-9, .span-10, .span-11, .span-12,
.span-13, .span-14, .span-15, .span-16, .span-17, .span-18,
.span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {
	float: left;
}
	
.center { margin: 0 auto; }
/**** disable float on any element ****/
.df { float: none; }

/* *Fluid* Column Grid */
/*body.fcolumns .span-0.inside	{ width: 34%; padding: 0 1px; }
body.fcolumns .span-0				{ width: 33%; }
body.fcolumns .span-1				{ width: 6.25%; }
body.fcolumns .span-2				{ width: 12%; }
body.fcolumns .span-3				{ width: 25%; }
body.fcolumns .span-4				{ width: 50%; }
body.fcolumns .span-full		{ width: 100%; }*/


/* 24 column grid */
body.columns .span-1 			{ width: 40px; }
body.columns .span-2			{ width: 80px; }
body.columns .span-3			{ width: 120px; }
body.columns .span-4			{ width: 160px; }
body.columns .span-5			{ width: 200px; }
body.columns .span-6			{ width: 240px; }
body.columns .span-7			{ width: 280px; }
body.columns .span-8			{ width: 320px; }
body.columns .span-9			{ width: 360px; }
body.columns .span-10			{ width: 400px; }
body.columns .span-11			{ width: 440px; }
body.columns .span-12			{ width: 480px; }
body.columns .span-13			{ width: 520px; }
body.columns .span-14			{ width: 560px; }
body.columns .span-15			{ width: 600px; }
body.columns .span-16			{ width: 640px; }
body.columns .span-17			{ width: 680px; }
body.columns .span-18			{ width: 720px; }
body.columns .span-19			{ width: 760px; }
body.columns .span-20			{ width: 800px; }
body.columns .span-21			{ width: 840px; }
body.columns .span-22			{ width: 880px; }
body.columns .span-23			{ width: 920px; }
body.columns .span-24			{ width: 960px; }



/**** padding ****/


.i		{ padding: 10px; }
.ii 	{ padding: 20px; }
.iii 	{ padding: 30px; }

.ol-i			{ padding: 10px 5px 10px 0; }
.or-i			{ padding: 10px 0 10px 5px; }

.ol-ii		{ padding: 20px 10px 20px 0; }
.or-ii		{ padding: 20px 0 20px 10px; }

.ol-iii		{ padding: 30px 15px 30px 0; }
.or-iii		{ padding: 30px 0 30px 15px; }

.il-ii 		{ padding: 20px 10px 20px 20px }
.ir-ii 		{ padding: 20px 20px 20px 10px }

.dpb 	{ padding-bottom: 0; }
.dpt 	{ padding-top: 0;}

/**** margins ****/

.lm		{ margin-left: 10px }
.rm 	{ margin-right: 10px }

/**** DEBUGGING ****/
.debug {
	border: 1px solid #cc3300;
}

/*--------------------------------------*/
/* Prototyping */
/*--------------------------------------*/

/* Heights */
div.tall		{ height: 500px; }
div.short		{ height: 250px; }
div.tiny		{ height: 100px; }

/* Relevance and Importance */
div.high 			{ background-color: #eee; }
div.med-high 		{ background-color: #ccc; }
div.low-high 		{ background-color: #aaa; }

div.medium 			{ background-color: #999; }
div.med-medium 		{ background-color: #777; }
div.low-medium 		{ background-color: #555; }

div.low 			{ background-color: #333; }
div.med-low 		{ background-color: #111; }
div.low-low 		{ background-color: #000; }