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

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

.full-width{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: 60px;}
.one-point-six {width:116px;}
.two {width: 140px;}
.three {width: 220px;}
.four {width: 300px;}
.five {width: 380px;}
.six {width: 460px;}
.seven {width: 540px;}
.eight {width: 620px;}
.nine {width: 700px;}
.ten {width: 780px;}
.eleven {width: 860px;}
.twelve {width: 940px;}

/* 1/3 columns */
.one-third{width:32%; margin-right:1%; float:left;}
.two-thirds{width:64%; margin-right:1%; float:left;}
.one-half{width:49%; margin-right: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;}

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

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

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

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .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;}
    }
/* #Mobile (Landscape)
================================================== */

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

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 460px; }
        .grid { margin:0 10px; }
        .one,.two,.three,.four,.five,.six,.seven,.eight,
		.nine,.ten,.eleven,.twelve, .one-third, .two-thirds, .one-half{ width: 440px; }
		.mobile{display:block;}
		.nomobile{display:none;}
    }

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

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

    @media only screen and  (max-width: 479px) {
        .container { width: 300px; }
        .grid { margin:0 10px; }
		
        .one,.two,.three,.four,.five,.six,.seven,.eight,
		.nine,.ten,.eleven,.twelve,.one-third, .two-thirds, .one-half { width: 280px; }
		.mobile{display:block;}
		.nomobile{display:none;}
    }
    
    /* 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 {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container: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 {
  zoom: 1;
}