/* A container should group all your columns. */
div#container
{
  width: 100%;
  margin: 0 auto;

  height: auto !important;
  min-height: 100%;
  position: relative;
}

/* Body margin for a sensile default look. */
html, body {
	margin:1.5em 0;
  
	margin: 0pt;
	padding: 0pt;

	height: 100%;
}

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

/* Sets up basic grid floating and margin. */
div.colsm, div.colmd, div.collg, div.colcn
{
	float:left;
	margin-right: 20px;
}

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

/* Use these classes to set the width of a column. */
.colsm   { width: 25%; }
.colmd   { width: 33%; }
.collg   { width: 40%; }
.colcn   { width: 66%; }
.colfl   { width: 100%; }


/* Add these to a column to append empty cols. */
.append-sm  { padding-right: 184px;}
.append-md  { padding-right: 276px;}
.append-lg  { padding-right: 368px;}


/* Add these to a column to prepend empty cols. */
.prepend-sm  { padding-left: 184px;}
.prepend-md  { padding-left: 276px;}
.prepend-lg  { padding-left: 368px;}


/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column.  */
div.pull-sm, div.pull-md, div.pull-lg
{
    float: left;
    position: relative;
}
.pull-sm { margin-left: -184px;}
.pull-md { margin-left: -276px;}
.pull-lg { margin-left: -368px;}


div.push-sm, div.push-md, div.push-lg
{
    float: right;
    position: relative;
}
.push-sm { margin: 0 -184px 1.5em 184px;}
.push-md { margin: 0 -276px 1.5em 276px;}
.push-lg { margin: 0 -368px 1.5em 368px;}


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

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

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

.clear { clear:both; }