/* media queries */
@media screen and (max-width: 719px) {
  /* set up the containers */
  #site {
    margin: 0 !important;
    width: 100% !important;
    padding-top: 8px !important;
    padding: 8px 10px !important;
  }
  .clear + .row {
    padding-top: 4px !important; 
  }
  #site > .clear + .row {
    margin-top: 0px !important; 
  }
  /* set up the columns */
  .spanAuto {
    width: 100% !important;
  }
  .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12, .span13, .span14, .span15, .span16, .span17, .span18, .span19, .span20, .span21, .span22, .span23, .span24, .span25, .span26, .span27, .span28, .span29, .span30 {
    width: 50% !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
	z-index: 1;
  }
  .push1, .push2, .push3, .push4, .push5, .push6, .push7, .push8, .push9, .push10, .push11, .push12, .push13, .push14, .push15, .push16, .push17, .push18, .push19, .push20, .push21, .push22, .push23, .push24, .push25, .push26, .push27, .push28, .push29, .push30, .pull1, .pull2, .pull3, .pull4, .pull5, .pull6, .pull7, .pull8, .pull9, .pull10, .pull11, .pull12, .pull13, .pull14, .pull15, .pull16, .pull17, .pull18, .pull19, .pull20, .pull21, .pull22, .pull23, .pull24, .pull25, .pull26, .pull27, .pull28, .pull29, .pull30 {
    left: 0 !important;
  }
}

/* set up the containers */
* { -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } 
html, body { width: 100%; margin: 0; }
img { max-width: 100%; } 
.row { display: block; margin: 0; padding: 0; width: 100%; vertical-align: top; white-space: nowrap; }
.row > * { white-space: normal; }
.wrap { white-space: normal; }
.clear + .row { margin-top: 10px; }

/* set up the columns */
.spanAuto, .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12, .span13, .span14, .span15, .span16, .span17, .span18, .span19, .span20, .span21, .span22, .span23, .span24, .span25, .span26, .span27, .span28, .span29, .span30
{ float: left; display: inline; min-height: 1px; padding: 0 5px; white-space: normal; z-index: 1;}
.fillHeight { height: 100%; }
.noWrap { white-space: nowrap !important; }
.nospace, .first { padding-left: 0 !important; }
.nospace, .last { padding-right: 0 !important; }

/* pulling */
.pull1 { left: -3.33333%; }
.pull2 { left: -6.66667%; }
.pull3 { left: -10%; }
.pull4 { left: -13.33333%; }
.pull5 { left: -16.66667%; }
.pull6 { left: -20%; }
.pull7 { left: -23.33333%; }
.pull8 { left: -26.66667%; }
.pull9 { left: -30%; }
.pull10 { left: -33.33333%; }
.pull11 { left: -36.66667%; }
.pull12 { left: -40%; }
.pull13 { left: -43.33333%; }
.pull14 { left: -46.66667%; }
.pull15 { left: -50%; }
.pull16 { left: -53.33333%; }
.pull17 { left: -56.66667%; }
.pull18 { left: -60%; }
.pull19 { left: -63.33333%; }
.pull20 { left: -66.66667%; }
.pull21 { left: -70%; }
.pull22 { left: -73.33333%; }
.pull23 { left: -76.66667%; }
.pull24 { left: -80%; }
.pull25 { left: -83.33333%; }
.pull26 { left: -86.66667%; }
.pull27 { left: -90%; }
.pull28 { left: -93.33333%; }
.pull29 { left: -96.66667%; }

/* pushing */
.push1 { left: 3.33333%; }
.push2 { left: 6.66667%; }
.push3 { left: 10%; }
.push4 { left: 13.33333%; }
.push5 { left: 16.66667%; }
.push6 { left: 20%; }
.push7 { left: 23.33333%; }
.push8 { left: 26.66667%; }
.push9 { left: 30%; }
.push10 { left: 33.33333%; }
.push11 { left: 36.66667%; }
.push12 { left: 40%; }
.push13 { left: 43.33333%; }
.push14 { left: 46.66667%; }
.push15 { left: 50%; }
.push16 { left: 53.33333%; }
.push17 { left: 56.66667%; }
.push18 { left: 60%; }
.push19 { left: 63.33333%; }
.push20 { left: 66.66667%; }
.push21 { left: 70%; }
.push22 { left: 73.33333%; }
.push23 { left: 76.66667%; }
.push24 { left: 80%; }
.push25 { left: 83.33333%; }
.push26 { left: 86.66667%; }
.push27 { left: 90%; }
.push28 { left: 93.33333%; }
.push29 { left: 96.66667%; }

/* spans */
.spanAuto { width: auto; }
.span1 { width: 3.33333%; }
.span2 { width: 6.66667%; }
.span3 { width: 10%; }
.span4 { width: 13.33333%; }
.span5 { width: 16.66667%; }
.span6 { width: 20%; }
.span7 { width: 23.33333%; }
.span8 { width: 26.66667%; }
.span9 { width: 30%; }
.span10 { width: 33.33333%; }
.span11 { width: 36.66667%; }
.span12 { width: 40%; }
.span13 { width: 43.33333%; }
.span14 { width: 46.66667%; }
.span15 { width: 50%; }
.span16 { width: 53.33333%; }
.span17 { width: 56.66667%; }
.span18 { width: 60%; }
.span19 { width: 63.33333%; }
.span20 { width: 66.66667%; }
.span21 { width: 70%; }
.span22 { width: 73.33333%; }
.span23 { width: 76.66667%; }
.span24 { width: 80%; }
.span25 { width: 83.33333%; }
.span26 { width: 86.66667%; }
.span27 { width: 90%; }
.span28 { width: 93.33333%; }
.span29 { width: 96.66667%; }
.span30 { width: 100%; }
.span31 { width: 100%; }

/* clear floated elements */
/* http://sonspring.com/journal/clearing-floats */
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }