/* `Container
----------------------------------------------------------------------------------------------------*/

.container {margin-left: auto;margin-right: auto;width: 1020px;}

.full-width, header, nav, main, footer{width:100%; position:relative; clear:both;}

/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid {display: inline; float: left; margin-left: 10px; margin-right: 10px;}

.push, .pull{position: relative;}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha {margin-left: 0;}
.omega {margin-right: 0;}

/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.half{width: 30px;}
.one {width: 65px;}
.one-point-six {width:116px;}
.two {width: 150px;}
.three {width: 235px;}
.four {width: 320px;}
.five {width: 405px;}
.six {width: 490px;}
.seven {width: 575px;}
.eight {width: 660px;}
.nine {width: 745px;}
.ten {width: 830px;}
.eleven {width: 915px;}
.twelve {width: 1000px;}

/*no padding */
.one-nopad{width:80px; margin-left:0px; margin-right:0px;}
.two-nopad{width:160px; margin-left:0px; margin-right:0px;}
.three-nopad{width:240px; margin-left:0px; margin-right:0px;}
.four-nopad {width: 320px; margin-left:0px; margin-right:0px;}
.five-nopad {width: 400px; margin-left:0px; margin-right:0px;}
.six-nopad {width: 480px; margin-left:0px; margin-right:0px;}
.seven-nopad {width: 560px; margin-left:0px; margin-right:0px;}
.eight-nopad {width: 640px; margin-left:0px; margin-right:0px;}
.nine-nopad {width: 720px; margin-left:0px; margin-right:0px;}
.ten-nopad {width: 800px; margin-left:0px; margin-right:0px;}
.eleven-nopad {width: 880px; margin-left:0px; margin-right:0px;}
.twelve-nopad {width: 960px; margin-left:0px; margin-right:0px;}

/* 1/3 columns */
.one-third{width:32%; margin-right:1%; float:left;}
.two-thirds{width:64%; margin-right:1%; float:left;}
.one-half{width:48%; margin-right:1%; float:left;}
.one-half-left{width:48%; margin-right:1%; float:left;}
.one-half-right{width:48%; margin-left:1%; float:left;}

/* `Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container .prefix_1 {padding-left: 80px;}
.container .prefix_2 {padding-left: 160px;}
.container .prefix_3 {padding-left: 240px;}
.container .prefix_4 {padding-left: 320px;}
.container .prefix_5 {padding-left: 400px;}
.container .prefix_6 {padding-left: 480px;}
.container .prefix_7 {padding-left: 560px;}
.container .prefix_8 {padding-left: 640px;}
.container .prefix_9 {padding-left: 720px;}
.container .prefix_10 {padding-left: 800px;}
.container .prefix_11 {padding-left: 880px;}

/* `Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container .suffix_1 {padding-right: 80px;}
.container .suffix_2 {padding-right: 160px;}
.container .suffix_3 {padding-right: 240px;}
.container .suffix_4 {padding-right: 320px;}
.container .suffix_5 {padding-right: 400px;}
.container .suffix_6 {padding-right: 480px;}
.container .suffix_7 {padding-right: 560px;}
.container .suffix_8 {padding-right: 640px;}
.container .suffix_9 {padding-right: 720px;}
.container .suffix_10 {padding-right: 800px;}
.container .suffix_11 {padding-right: 880px;}

/* `Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container .push_1 {left: 80px;}
.container .push_2 {left: 160px;}
.container .push_3 {left: 240px;}
.container .push_4 {left: 320px;}
.container .push_5 {left: 400px;}
.container .push_6 {left: 480px;}
.container .push_7 {left: 560px;}
.container .push_8 {left: 640px;}
.container .push_9 {left: 720px;}
.container .push_10 {left: 800px;}
.container .push_11 {left: 880px;}

/* `Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/
.container .pull_1 {left: -80px;}
.container .pull_2 {left: -160px;}
.container .pull_3 {left: -240px;}
.container .pull_4 {left: -320px;}
.container .pull_5 {left: -400px;}
.container .pull_6 {left: -480px;}
.container .pull_7 {left: -560px;}
.container .pull_8 {left: -640px;}
.container .pull_9 {left: -720px;}
.container .pull_10 {left: -800px;}
.container .pull_11 {left: -880px;}

.mobileonly{display:none;}
.nomobile{display:block;}

/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 1019px) {
        .container               { width: 768px; }
        .grid         {margin-left: 10px; margin-right: 10px;  }

		.half{width: 22px;}
		.one {width: 44px;}
		.one-point-six {width:96px;}
		.two {width: 108px;}
		.three {width: 172px;}
		.four {width: 236px;}
		.five {width: 300px;}
		.six {width: 364px;}
		.seven {width: 428px;}
		.eight {width: 492px;}
		.nine {width: 556px;}
		.ten {width: 620px;}
		.eleven {width: 684px;}
		.twelve {width: 748px;}
		
		/*no padding */
		.one-nopad{width:64px; margin-left:0px; margin-right:0px;}
		.two-nopad{width:128px; margin-left:0px; margin-right:0px;}
		.three-nopad{width:192px; margin-left:0px; margin-right:0px;}
		.four-nopad {width: 256px; margin-left:0px; margin-right:0px;}
		.five-nopad {width: 320px; margin-left:0px; margin-right:0px;}
		.six-nopad {width: 384px; margin-left:0px; margin-right:0px;}
		.seven-nopad {width: 448px; margin-left:0px; margin-right:0px;}
		.eight-nopad {width: 512px; margin-left:0px; margin-right:0px;}
		.nine-nopad {width: 576px; margin-left:0px; margin-right:0px;}
		.ten-nopad {width: 640px; margin-left:0px; margin-right:0px;}
		.eleven-nopad {width: 704px; margin-left:0px; margin-right:0px;}
		.twelve-nopad {width: 768px; margin-left:0px; margin-right:0px;}
    }
/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 100%; }
        .grid { margin:0 1%; }
        .one,.two,.three,.four,.five,.six,.seven,.eight,
		.nine,.ten,.eleven,.twelve, .one-third, .two-thirds, .one-half{ width: 98%; }
		.mobileonly{display:block;}
		.nomobile{display:none;}
		
		/*no padding */
		.one-nopad,.two-nopad,.three-nopad,.four-nopad,.five-nopad,.six-nopad,.seven-nopad,.eight-nopad,.nine-nopad,.ten-nopad,.eleven-nopad,.twelve-nopad {width: 460px; margin-left:0px; margin-right:0px;}
		.one-half-left, .one-half-right{width:98%;}
		.one-half-left{margin-right:0; margin-left:1%;}
    }

/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and  (max-width: 479px) {
        .container { width: 100%; }
        .grid { margin:0 1%; }
        .one,.two,.three,.four,.five,.six,.seven,.eight,
		.nine,.ten,.eleven,.twelve, .one-third, .two-thirds, .one-half{ width: 98%; }
		.mobileonly{display:block;}
		.nomobile{display:none;}
		
		/*no padding */
		.one-nopad,.two-nopad,.three-nopad,.four-nopad,.five-nopad,.six-nopad,.seven-nopad,.eight-nopad,.nine-nopad,.ten-nopad,.eleven-nopad,.twelve-nopad {width: 310px; margin-left:0px; margin-right:0px;}
		.one-half-left, .one-half-right{width:98%;}
		.one-half-left{margin-right:0; margin-left:1%;}
    }
    
    /* basic styles used site wide */
/* adjust margins */
.add-top{margin-top:10px;}
.add-bottom{margin-bottom:10px;}
.add-right{margin-right:10px;}
.add-left{margin-left:10px !important;}
.remove-top{margin-top:0;}
.remove-bottom{margin-bottom:0;}
.remove-right{margin-right:0;}
.remove-left{margin-left:0;}

/* adjust padding */
.pad-top{padding-top:10px;}
.pad-bottom{padding-bottom:10px;}
.pad-topbot{padding-top:10px; padding-bottom:10px;}
.pad-left{padding-left:10px !important;}
.pad-right{padding-right:10px !important;}
.pad-sides{padding-left:10px !important; padding-right:10px !important;}
.pad{padding:4px !important;}

/* align text */
.align-left{text-align:left;}
.align-right{text-align:right;}
.align-center{text-align:center;}


/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after,
.container:before,
.container:after, header:before, header:after, nav:before, nav:after, main:before, main:after, footer:before, footer:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container:after, header:before, header:after, nav:before, nav:after, main:before, main:after, footer:before, footer:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container, header, nav, main, footer {
  zoom: 1;
}