@charset "utf-8";
/*  
    Site Name   : A Theory Tank Inc. Project
    URI         : http://www.theorytank.com
    Description : Global style sheets (including reset, typography, and forms)
    Version     : 0.0.1
    Author      : TheoryTank Inc.
    Author URI  : http://www.theorytank.com

    Document    : default_grid.css
    Created on  : Mar 6, 2012, 9:47:18 AM
    Author      : Chris Murphy
    Description :
        Grid control for A Theory Tank Inc. Project
*/

/* CLEAR FIX
---------------------------------------------------------- */
.clearfix 		{ clear: both; width: 100%; font-size: 0px; line-height: 0px; visibility: hidden; margin: 0; overflow: hidden; }
.clearfix:after	{ content:"."; }

/* CONTAINERS
---------------------------------------------------------- */
.wrapper,
.container      { display: block; clear: both; width: 100%; margin: 0; padding: 0; vertical-align: baseline; position: relative; }
.content				{ display: block; clear: both; width: 950px; margin: auto; padding: 0; position: relative; vertical-align: baseline; }
.grid           { background: url("http://www.playbrave.org/themes/default/images/grid.png") repeat 0 top !important; }

/* Debugging Only */
.boxmodel		{ outline: 1px dotted #f0f; /*background-color: #f0f;*/ }

.border-box-sizing
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;	    
}

/* COLUMNS - LAYOUT
---------------------------------------------------------- */
.col						
{ 
		position: relative; display: block; float: left; margin: 0 5px; width: auto; 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;				
}

.col.one-col    { width: 150px; }
.col.two-col    { width: 310px; }
.col.three-col  { width: 470px; }
.col.four-col   { width: 630px; }
.col.five-col   { width: 790px; }
.col.six-col    { width: 950px; }
.col.seven-col  { width: 1110px; }
.col.first			{ margin-left: 0; }
.col.last				{ margin-right: 0 !important; }

.col.half-col   { width: 50%; }

.row						{ position: relative; display: block; float: left; margin-bottom: 10px; width: auto; }

.row.one-row    { height: 150px; }
.row.two-row    { height: 310px; }
.row.three-row  { height: 470px; }
.row.four-row   { height: 630px; }
.row.five-row   { height: 790px; }
.row.six-row    { height: 950px; }
.row.seven-row  { height: 1110px; }
.row.first			{ margin-top: 0; }
.row.last				{ margin-bottom: 0 !important; }

/* OFFSETS */
.col.offset-one     { padding-left: 150px; }
.col.offset-two     { padding-left: 310px; }
.col.offset-three   { padding-left: 470px; }
.col.offset-four    { padding-left: 630px; }
.col.offset-five    { padding-left: 790px; }
.col.offset-six     { padding-left: 950px; }

/* Debugging Only */
.outline            { outline: 1px dotted #f0f; overflow: hidden; }

.right              { float: right; }
.left               { float: left; }

.pad-20             { padding: 20px; }
.pad-40             { padding: 40px; }

.pad-left-20        { padding-left: 20px; }
.pad-left-40        { padding-left: 40px; }

.pad-right-20        { padding-right: 20px; }
.pad-right-40        { padding-right: 40px; }

.pad-top-20        { padding-top: 20px; }
.pad-top-40        { padding-top: 40px; }
.pad-top-60        { padding-top: 60px; }
.pad-top-80        { padding-top: 80px; }

.pad-top-bottom-20  { padding: 20px 0; }
.pad-left-right-20  { padding: 0 20px; }

.pad-top-bottom-40  { padding: 40px 0; }
.pad-left-right-40  { padding: 0 40px; }

/* MEDIA QUERIES
---------------------------------------------------------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) /*and (-webkit-min-device-pixel-ratio: 2)*/
{
		body[data-view-width="320"] .content { width: 320px; }
		body[data-view-width="480"] .content { width: 480px; }
		
		body[data-view-width="320"] .col.three-col,
		body[data-view-width="320"] .col.four-col,
		body[data-view-width="320"] .col.five-col,
		body[data-view-width="320"] .col.six-col,
		body[data-view-width="320"] .col.seven-col  { width: 320px; }
		
		body[data-view-width="480"] .col.three-col,
		body[data-view-width="480"] .col.four-col,
		body[data-view-width="480"] .col.five-col,
		body[data-view-width="480"] .col.six-col,
		body[data-view-width="480"] .col.seven-col  { width: 480px; }
		
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) 
{
		body[data-view-width="640"] .content { width: 640px; }
		body[data-view-width="568"] .content { width: 568px; }
		
		body[data-view-width="640"] .col.three-col,
		body[data-view-width="640"] .col.four-col,
		body[data-view-width="640"] .col.five-col,
		body[data-view-width="640"] .col.six-col,
		body[data-view-width="640"] .col.seven-col  { width: 640px; }
		
		body[data-view-width="568"] .col.three-col,
		body[data-view-width="568"] .col.four-col,
		body[data-view-width="568"] .col.five-col,
		body[data-view-width="568"] .col.six-col,
		body[data-view-width="568"] .col.seven-col  { width: 568px; }
		
}

/* CLEARING
---------------------------------------------------------- */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0; }
.row:after,
.clearfix:after {
    clear: both; }
.row,
.clearfix {
    zoom: 1; }

/* You can also use a <br class="clear" /> to clear columns */
.clear {
    clear: both;
    display: block;
    overflow: hidden;
/*    visibility: hidden;
    width: 0;
    height: 0;*/
}