/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Contents
==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */
/* #Base 960 Grid
================================================== */
.container {
    position: relative;
    width: 960px;
    margin: 10px auto 10px auto;
    padding: 10px;
    background-color: #ffffff;
    min-height: 220px;
}
.container .column, .container .columns {
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
}
.row { margin-bottom: 20px }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0 }
.column.omega, .columns.omega { margin-right: 0 }
/* Base Grid */
.container .one.column, .container .one.columns { width: 40px }
.container .two.columns { width: 100px }
.container .three.columns { width: 160px }
.container .four.columns {
    width: 220px;
    position: fixed;
    /* float: left; */
}
.container .five.columns { width: 280px }
.container .six.columns { width: 340px }
.container .seven.columns { width: 400px }
.container .eight.columns { width: 460px }
.container .nine.columns { width: 520px }
.container .ten.columns { width: 580px }
.container .eleven.columns { width: 640px }
.container .twelve.columns {
    width: 700px;
    float: right;
}
.container .thirteen.columns { width: 760px }
.container .fourteen.columns { width: 820px }
.container .fifteen.columns { width: 880px }
.container .sixteen.columns { width: 940px }
.container .one-third.column { width: 300px }
.container .two-thirds.column { width: 620px }
/* Offsets */
.container .offset-by-one { padding-left: 60px }
.container .offset-by-two { padding-left: 120px }
.container .offset-by-three { padding-left: 180px }
.container .offset-by-four { padding-left: 240px }
.container .offset-by-five { padding-left: 300px }
.container .offset-by-six { padding-left: 360px }
.container .offset-by-seven { padding-left: 420px }
.container .offset-by-eight { padding-left: 480px }
.container .offset-by-nine { padding-left: 540px }
.container .offset-by-ten { padding-left: 600px }
.container .offset-by-eleven { padding-left: 660px }
.container .offset-by-twelve { padding-left: 720px }
.container .offset-by-thirteen { padding-left: 780px }
.container .offset-by-fourteen { padding-left: 840px }
.container .offset-by-fifteen { padding-left: 900px }
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) { 
	.container {
	    width: 768px;
	    min-height: 160px;
	}
	.container .column, .container .columns {
	    margin-left: 10px;
	    margin-right: 10px;
	}
	.column.alpha, .columns.alpha {
	    margin-left: 0;
	    margin-right: 10px;
	}
	.column.omega, .columns.omega {
	    margin-right: 0;
	    margin-left: 10px;
	}
	.alpha.omega {
	    margin-left: 0;
	    margin-right: 0;
	}
	.container .one.column, .container .one.columns { width: 28px }
	.container .two.columns { width: 76px }
	.container .three.columns { width: 124px }
	.container .four.columns {
	    width: 172px;
	    position: absolute;
	    float: left;
	}
	.container .five.columns { width: 220px }
	.container .six.columns { width: 268px }
	.container .seven.columns { width: 316px }
	.container .eight.columns { width: 364px }
	.container .nine.columns { width: 412px }
	.container .ten.columns { width: 460px }
	.container .eleven.columns { width: 508px }
	.container .twelve.columns {
	    width: 556px;
	    float: right;
	}
	.container .thirteen.columns { width: 604px }
	.container .fourteen.columns { width: 652px }
	.container .fifteen.columns { width: 700px }
	.container .sixteen.columns { width: 748px }
	.container .one-third.column { width: 236px }
	.container .two-thirds.column { width: 492px }
	/* Offsets */
	.container .offset-by-one { padding-left: 48px }
	.container .offset-by-two { padding-left: 96px }
	.container .offset-by-three { padding-left: 144px }
	.container .offset-by-four { padding-left: 192px }
	.container .offset-by-five { padding-left: 240px }
	.container .offset-by-six { padding-left: 288px }
	.container .offset-by-seven { padding-left: 336px }
	.container .offset-by-eight { padding-left: 384px }
	.container .offset-by-nine { padding-left: 432px }
	.container .offset-by-ten { padding-left: 480px }
	.container .offset-by-eleven { padding-left: 528px }
	.container .offset-by-twelve { padding-left: 576px }
	.container .offset-by-thirteen { padding-left: 624px }
	.container .offset-by-fourteen { padding-left: 672px }
	.container .offset-by-fifteen { padding-left: 720px }
}
/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) { 
	.container { width: 300px }
	.container .columns, .container .column {
	    margin: 0;
	    position: relative;
	}
	.container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column {
	    width: 300px;
	    position: relative;
	}
	/* Offsets */
	.container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { padding-left: 0 }
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) { 
	.container { width: 420px }
	.container .columns, .container .column {
	    margin: 0;
	    position: relative;
	}
	.container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 420px }
}
/* #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;
}