/* == PLEASE *DO NOT* EDIT THIS FILE, NOT EVEN A LITTLE BIT. CONTACT JOHN OR STEFF FOR MORE INFO. THANKS == */

body {
	font: 14px Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	text-align: center;
}

/* getting the grid in place with .wrapper and .inner-wrapper */

.wrapper {      
    margin: 0 auto;
    padding: 0;
    position: relative;
	text-align: left;
	width: 970px;
}

.inner-wrapper {  
    background: url(../../images/css/web_grid_tile.jpg) repeat-y center top;          
    clear: left;
    float: left;
    margin: 0;
    padding: 0 10px;
    position: relative;
	width: 950px;
}

.inner-wrapper {
	background-image: none;
}

/*	#page	*/

#logo {
	margin-bottom: 10px;
}

.page { /* main content container */
    clear: both;
    float: left;
    margin: 30px 0;
	width: 950px;
}

.footer {
    clear: both;
}
.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .ten-col, .eleven-col, .twelve-col, .three-half-col, .eight-half-col {
    float: left;
    margin: 0 10px 0 0;
}

.one-col {
    width: 70px;
}

.two-col {
    width: 150px;
}

.three-col {
    width: 230px;
}

.three-half-col {
    width: 270px;
}

.four-col {
    width: 310px;
}

.five-col {
    width: 390px;
}

.six-col {
    width: 470px;
}

.seven-col {
    width: 550px;
}

.eight-col {
    width: 630px;
}

.eight-half-col {
    width: 670px;
}

.nine-col {
    width: 710px;
}

.ten-col {
    width: 790px;
}

.eleven-col {
    width: 870px;
}

.twelve-col {
	margin-right: 0;
    width: 950px;
}

.two-col-padded {
    background: #eee; 
    border: 1px solid #ccc;
    padding: 5px; 
    width: 139px;	
}

.three-col-padded {
    background: #eee; 
    border: 1px solid #ccc;
    padding: 5px; 
    width: 219px;	
}

.four-col-padded {
    background: #eee; 
    border: 1px solid #ccc;
    padding: 5px; 
    width: 299px;	
}

.five-col-padded {
    background: #eee; 
    border: 1px solid #ccc;
    padding: 5px; 
    width: 299px;	
}

/* A container contains a combination of columns. Containers are displayed one underneath the other. This is a way to ensure that an element is cleared and stretches for 100% of the width it is allowed to. */
.container {
    clear: both;
    float: left;
    width: 100%;
}

/* 
-----------------------
PREFIXES
------------------------
	
A prefix will allow you to fake the addition of another grid column preceeding the one you apply it to. For example, applying prefix-one will add a margin-left of value equal to the width of one-col to the column grid; making it appear as if a grid column preceeds it.
	
*/

.prefix-half {
	margin-left: 40px;
}
.prefix-one {
	margin-left: 80px;
}

.prefix-two {
	margin-left: 160px; 
}

.prefix-three {
	margin-left: 240px; 
}

.prefix-four {
	margin-left: 320px; 
}

.prefix-five {
	margin-left: 400px; 
}

.prefix-six {
	margin-left: 480px; 
}

.prefix-seven {
	margin-left: 560px; 
}

.prefix-eight {
	margin-left: 640px; 
}

.prefix-nine {
	margin-left: 720px; 
}

.prefix-ten {
	margin-left: 800px; 
}

.prefix-eleven {
	margin-left: 880px; 
}

/* 
-----------------------
SUFFIXES
------------------------
	
A suffix acts much like a prefix. It will allow you to fake the addition of another grid column after the one you apply it to. For example, applying suffix-one will add a margin-right of value equal to the width of one-col to the column; making it appear as if a grid column appears after it.

	
*/

.suffix-half {
	margin-right: 50px;
}

.suffix-one {
	margin-right: 90px;
}

.suffix-two {
	margin-right: 170px; 
}

.suffix-three {
	margin-right: 250px; 
}

.suffix-four {
	margin-right: 330px; 
}

.suffix-five {
	margin-right: 410px; 
}

.suffix-six {
	margin-right: 490px; 
}

.suffix-seven {
	margin-right: 570px; 
}

.suffix-eight {
	margin-right: 650px; 
}

.suffix-nine {
	margin-right: 730px; 
}

.suffix-ten {
	margin-right: 810px; 
}

.suffix-eleven {
	margin-right: 890px; 
}

/* The following are styles for grid columns, with a 1px border and 10px padding. */

.padded-one-col, .padded-two-col, .padded-three-col, .padded-four-col, .padded-five-col, .padded-six-col, .padded-seven-col, .padded-eight-col, .padded-nine-col, .padded-ten-col, .padded-eleven-col, .padded-twelve-col {
	border: 1px solid #ccc;
	float: left;
	margin: 0 10px 0 0;
	padding: 5px;
}

.padded-one-col {
	width: 58px;
} 

.padded-two-col {
	width: 138px;
}

.padded-three-col {
	width: 218px;
} 

.padded-four-col {
	width: 298px;
} 

.padded-five-col {
	width: 378px;
} 

.padded-six-col {
	width: 458px;
} 

.padded-seven-col {
	 width: 538px;
} 

.padded-eight-col {
	width: 618px;
}

 .padded-nine-col {
	width: 698px;
} 

.padded-ten-col {
	width: 778px;
} 

.padded-eleven-col {
	width: 858px;
} 

.padded-twelve-col {
	width: 938px;
}

.last-grid, .last-col {
	clear: right;
    margin-right: 0px;
}

/* Useful generic classes */

ul {
	list-style-type: disc;
}

ol {
	list-style-type: decimal;
}

ul, ol {
	line-height: 150%;
	padding: 0 0 0 30px;	
}

.no-margin {
	margin: 0;	
}

.clear {
    clear: both;
}

.no-float {
	float: none;
}

.inline {
	display: inline;
}

.block {
	display: block;	
}

.normal-weight {
	font-weight: normal;
}

.left {
	float: left;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

.right {
	float: right;
}

.off-left {
	left: -999em;
	overflow: hidden;
	position: absolute;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

.text-justify {
	text-align: justify;
}

.no-bullets {
	list-style-type: none;
	margin: 0;
	padding: 0;	
}

.caps {
	text-transform: uppercase;
}

.one-col .one-col, .two-col .two-col, .three-col .three-col, .four-col .four-col, .five-col .five-col, .six-col .six-col, .seven-col .seven-col, .eight-col .eight-col, .nine-col .nine-col, .ten-col .ten-col, .eleven-col .eleven-col, .twelve-col .twelve-col {
	margin-right: 0; /* This allows us to place (for example) an eight-col div within an eight-col div without worrying that it will break out of its parent. This is useful when rendering partials that may not occur all the time. */
}