/* */

.highlight-columns .column                      ,
.highlight-columns .columns                     { background:red; }
.highlight-columns .container                   { background:#ddd; }
.highlight-columns .padded                      { background:#00ff00; }
  .highlight-columns .padded .container         { background:transparent !important; margin-bottom:10px; }
  .highlight-columns .padded .column            ,
  .highlight-columns .padded .columns           { background:red; }

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

/* #Base 1200 Grid
================================================== */

    .outer-container                            { float:left; width:100%; }

    .container                                  { position:relative; width:1084px; margin:0 auto; padding:0px 20px; z-index:2; }
    .container                                  { margin-bottom:0px; }
    .container.tall                             { margin-bottom:20px; }
    .container .column,
    .container .columns                         { float: left; display: inline; margin:0 0 0 20px; padding:0; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; clear:left; }
    .column.omega, .columns.omega               { margin-right: 0; clear:right; }

    /* Nested Column Classes */
    .column.left, .columns.fleft                { float:left; }
    .column.fright, .columns.fright, .columns.last { float:right; }

    /* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: 72px;  }
    .container .two.columns                     { width: 164px; }
    .container .three.columns                   { width: 256px; }
    .container .one-third.column                ,
    .container .four.columns                    { width: 348px; }
    .container .five.columns                    { width: 440px; }
    .container .six.columns                     { width: 532px; }
    .container .seven.columns                   { width: 624px; }
    .container .two-thirds.column               ,
    .container .eight.columns                   { width: 716px; }
    .container .nine.columns                    { width: 808px; }
    .container .ten.columns                     { width: 900px; }
    .container .eleven.columns                  { width: 992px; }
    .container .twelve.columns                  { width: 1084px; }

    .container .quarter.columns                 { width: 21.5%; margin:0 1.5%; }
      .container .quarter.columns.alpha         { margin-left:2.5%; }
      .container .quarter.columns.omega         { margin-right:2.5%; }

    /* Offsets */
    .container .offset-by-one                   { padding-left: 92px;  }
    .container .offset-by-two                   { padding-left: 184px; }
    .container .offset-by-three                 { padding-left: 276px; }
    .container .offset-by-four                  { padding-left: 368px; }
    .container .offset-by-five                  { padding-left: 460px; }
    .container .offset-by-six                   { padding-left: 552px; }
    .container .offset-by-seven                 { padding-left: 642px; }
    .container .offset-by-eight                 { padding-left: 736px; }
    .container .offset-by-nine                  { padding-left: 828px; }
    .container .offset-by-ten                   { padding-left: 920px; }
    .container .offset-by-eleven                { padding-left: 1012px; }


    /* padded grid (1% grid, style) */            
    .padded                                     { padding:20px; }
    .padded.slim                                { padding:8px; }
      .padded .container                        { position: relative; width: 99%; margin: 0 auto; padding:0 0 0 1%; z-index:2; }
      .padded .column, .padded .columns         { float: left; display: inline; margin-left: 3%; margin-right: 0px; position:relative; padding:0 0.5%; }
      .padded .column.alpha, .padded .columns.alpha { margin-left:0; }

      .padded .one.column,
      .padded .one.columns                      { width: 4.5%; }
      .padded .two.columns                      { width: 13%; }
      .padded .three.columns                    { width: 21.5%; }
      .padded .one-third.column                 ,
      .padded .four.columns                     { width: 30%; }
      .padded .five.columns                     { width: 38.5%; }
      .padded .six.columns                      { width: 47%; }
      .padded .seven.columns                    { width: 55.5%; }
      .padded .two-thirds.column                ,
      .padded .eight.columns                    { width: 64%; }
      .padded .nine.columns                     { width: 72.5%; }
      .padded .ten.columns                      { width: 81%; }
      .padded .eleven.columns                   { width: 89.5%; }
      .padded .twelve.columns                   { width: 98%; }



/* #Desktop (1020)
================================================== */

    /* Note: Design for a width of 768px */
    @media only screen and (min-width: 1036px) and (max-width: 1250px) {        
        .container                                  { width: 978px; }
        .container .column,
        .container .columns                         { margin-left:30px; }

        .column.alpha, .columns.alpha               { margin-left: 0; }

        /* Base Grid */
        .container .one.column,
        .container .one.columns                     { width: 54px;  }
        .container .two.columns                     { width: 138px; }
        .container .three.columns                   { width: 222px; }
        .container .one-third.column                ,
        .container .four.columns                    { width: 306px; }
        .container .five.columns                    { width: 390px; }
        .container .six.columns                     { width: 474px; }
        .container .seven.columns                   { width: 558px; }
        .container .two-thirds.column               ,
        .container .eight.columns                   { width: 642px; }
        .container .nine.columns                    { width: 726px; }
        .container .ten.columns                     { width: 810px; }
        .container .eleven.columns                  { width: 894px; }
        .container .twelve.columns                  { width: 978px; }

        /* Offsets */
        .container .offset-by-one                   { padding-left: 84px;  }
        .container .offset-by-two                   { padding-left: 168px; }
        .container .offset-by-three                 { padding-left: 252px; }
        .container .offset-by-four                  { padding-left: 336px; }
        .container .offset-by-five                  { padding-left: 420px; }
        .container .offset-by-six                   { padding-left: 504px; }
        .container .offset-by-seven                 { padding-left: 588px; }
        .container .offset-by-eight                 { padding-left: 672px; }
        .container .offset-by-nine                  { padding-left: 756px; }
        .container .offset-by-ten                   { padding-left: 840px; }
        .container .offset-by-eleven                { padding-left: 924px; }

        /* padded grid (1% grid, style) */            
        .padded                                     { padding:20px; }
        .padded.slim                                { padding:7px; }
          .padded .container                        { position: relative; width: 99%; margin: 0 auto; padding:0 0 0 1%; z-index:2; }
          .padded .column, .padded .columns         { float: left; display: inline; margin-left: 3%; margin-right: 0px; position:relative; padding:0 0.5%; }
          .padded .column.alpha, .padded .columns.alpha { margin-left:0; }

          .padded .one.column,
          .padded .one.columns                      { width: 4.5%; }
          .padded .two.columns                      { width: 13%; }
          .padded .three.columns                    { width: 21.5%; }
          .padded .one-third.column                 ,
          .padded .four.columns                     { width: 30%; }
          .padded .five.columns                     { width: 38.5%; }
          .padded .six.columns                      { width: 47%; }
          .padded .seven.columns                    { width: 55.5%; }
          .padded .two-thirds.column                ,
          .padded .eight.columns                    { width: 64%; }
          .padded .nine.columns                     { width: 72.5%; }
          .padded .ten.columns                      { width: 81%; }
          .padded .eleven.columns                   { width: 89.5%; }
          .padded .twelve.columns                   { width: 98%; }

    }
    /**/





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

    /* Note: Design for a width of 768px */
    @media only screen and (min-width: 768px) and (max-width: 1035px) {   
        .container                                  { width: 724px; }
        .container .column,
        .container .columns                         { margin-left:20px; }

        .column.alpha, .columns.alpha               { margin-left: 0; }
        .column.omega, .columns.omega               { margin-right: 0; }
        .alpha.omega                                { margin-left: 0; margin-right: 0; }

        .container .one.column,
        .container .tab-one.columns                 ,
        .container .one.columns                     { width: 42px; }
        .container .tab-two.columns                 ,
        .container .two.columns                     { width: 104px; }
        .container .tab-three.columns               ,
        .container .three.columns                   { width: 166px; }
        .container .one-third.column                ,
        .container .tab-four.columns                ,
        .container .four.columns                    { width: 228px; }
        .container .tab-five.columns                ,
        .container .five.columns                    { width: 290px; }
        .container .tab-six.columns                 ,
        .container .six.columns                     { width: 352px; }
        .container .tab-seven.columns               ,
        .container .seven.columns                   { width: 414px; }
        .container .tab-eight.columns               ,
        .container .two-thirds.column               ,
        .container .eight.columns                   { width: 476px; }
        .container .tab-nine.columns                ,
        .container .nine.columns                    { width: 538px; }
        .container .tab-ten.columns                 ,
        .container .ten.columns                     { width: 600px; }
        .container .tab-eleven.columns              ,
        .container .eleven.columns                  { width: 662px; }
        .container .tab-twelve.columns              ,
        .container .twelve.columns                  { width: 724px; }
        
        .container .offset-by-one                   { padding-left: 62px; }
        .container .offset-by-two                   { padding-left: 124px; }
        .container .offset-by-three                 { padding-left: 186px; }
        .container .offset-by-four                  { padding-left: 248px; }
        .container .offset-by-five                  { padding-left: 310px; }
        .container .offset-by-six                   { padding-left: 372px; }
        .container .offset-by-seven                 { padding-left: 434px; }
        .container .offset-by-eight                 { padding-left: 496px; }
        .container .offset-by-nine                  { padding-left: 558px; }
        .container .offset-by-ten                   { padding-left: 620px; }
        .container .offset-by-eleven                { padding-left: 682px; }

        .container .tab-one.columns                 ,
        .container .tab-two.columns                 ,
        .container .tab-three.columns               ,
        .container .one-third.column                ,
        .container .tab-five.columns                ,
        .container .tab-six.columns                 ,
        .container .tab-seven.columns               ,
        .container .tab-eight.columns               ,
        .container .tab-nine.columns                ,
        .container .tab-ten.columns                 ,
        .container .tab-eleven.columns              ,
        .container .tab-twelve.columns              { padding-left:0; }
        
        /* padded grid (1% grid, style) */            
        .padded                                     { padding:15px; }
        .padded.slim                                { padding:5px; }
          .padded .container                        { position: relative; width: 99%; margin: 0 auto; padding:0 0 0 1%; z-index:2; }
          .padded .column, .padded .columns         { float: left; display: inline; margin-left: 3%; margin-right: 0px; position:relative; padding:0 0.5%; }
          .padded .column.alpha, .padded .columns.alpha { margin-left:0; }

          .padded .one.column,
          .padded .one.columns                      { width: 4.5%; }
          .padded .two.columns                      { width: 13%; }
          .padded .three.columns                    { width: 21.5%; }
          .padded .one-third.column                 ,
          .padded .four.columns                     { width: 30%; }
          .padded .five.columns                     { width: 38.5%; }
          .padded .six.columns                      { width: 47%; }
          .padded .seven.columns                    { width: 55.5%; }
          .padded .two-thirds.column                ,
          .padded .eight.columns                    { width: 64%; }
          .padded .nine.columns                     { width: 72.5%; }
          .padded .ten.columns                      { width: 81%; }
          .padded .eleven.columns                   { width: 89.5%; }
          .padded .twelve.columns                   { width: 98%; }

          .padded .tab-one.column,
          .padded .tab-one.columns                  { width: 4.5%; }
          .padded .tab-two.columns                  { width: 13%; }
          .padded .tab-three.columns                { width: 21.5%; }
          .padded .tab-one-third.columns            ,
          .padded .tab-four.columns                 { width: 30%; }
          .padded .tab-five.columns                 { width: 38.5%; }
          .padded .tab-six.columns                  { width: 47%; }
          .padded .tab-seven.columns                { width: 55.5%; }
          .padded .tab-two-thirds.columns           ,
          .padded .tab-eight.columns                { width: 64%; }
          .padded .tab-nine.columns                 { width: 72.5%; }
          .padded .tab-ten.columns                  { width: 81%; }
          .padded .tab-eleven.columns               { width: 89.5%; }
          .padded .tab-twelve.columns               { width: 98%; }
          
          .padded .tab-alpha.column                 ,
          .padded .tab-alpha.columns                { clear:left; margin-left:0; }
    }
    /**/



/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */
   @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 400px; padding:0 10px; }
        .container .columns,
        .container .column { margin: 0; }

        .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 .one-third.column,
        .container .two-thirds.column  { width: 400px; }

        .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 { padding-left: 0; }

        .container .quarter.columns                 { width: 40.5%; margin:0; }
          .container .quarter.columns               ,
          .container .quarter.columns.alpha         ,
          .container .quarter.columns.omega         { margin-left:6.5%; }

        /* padded grid (1% grid, style) */            
        .padded                                     { padding:15px; }
        .padded.slim                                { padding:8px; }
          .padded .container                        { padding:0; }
          
          .padded .one.column                       ,
          .padded .one.columns                      ,
          .padded .two.columns                      ,
          .padded .three.columns                    ,
          .padded .one-third.column                 ,
          .padded .four.columns                     ,
          .padded .five.columns                     ,
          .padded .six.columns                      ,
          .padded .seven.columns                    ,
          .padded .two-thirds.column                ,
          .padded .eight.columns                    ,
          .padded .nine.columns                     ,
          .padded .ten.columns                      ,
          .padded .eleven.columns                   ,
          .padded .twelve.columns                   { width: 98%; padding:0 1%; margin:0; }

          .padded .mob-one.column,
          .padded .mob-one.columns                  { width: 4.5%; }
          .padded .mob-two.columns                  { width: 13%; }
          .padded .mob-three.columns                { width: 21.5%; }
          .padded .mob-one-third.columns            ,
          .padded .mob-four.columns                 { width: 30%; }
          .padded .mob-five.columns                 { width: 38.5%; }
          .padded .mob-six.columns                  { width: 47%; }
          .padded .mob-seven.columns                { width: 55.5%; }
          .padded .mob-two-thirds.columns           ,
          .padded .mob-eight.columns                { width: 64%; }
          .padded .mob-nine.columns                 { width: 72.5%; }
          .padded .mob-ten.columns                  { width: 81%; }
          .padded .mob-eleven.columns               { width: 89.5%; }
          .padded .mob-twelve.columns               { width: 98%; }
          
          .padded .mob-alpha.column                 ,
          .padded .mob-alpha.columns                { clear:left; }

    }
    /**/

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

    /* Note: Design for a width of 320px */
    @media only screen and (max-width: 479px) {
        .container { width: 292px; padding:0 12px; }
        .container .columns,
        .container .column { margin: 0; }

        .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 .one-third.column,
        .container .two-thirds.column  { width: 292px; }

        .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 { padding-left: 0; }

        .container .quarter.columns                 { width: 40%; margin:0; }
          .container .quarter.columns               ,
          .container .quarter.columns.alpha         ,
          .container .quarter.columns.omega         { margin-left:7%; }

        /* padded grid (1% grid, style) */            
        .padded                                     { padding:15px; }
        .padded.slim                                { padding:8px; }
          .padded .container                        { padding:0; }
          
          .padded .one.column                       ,
          .padded .one.columns                      ,
          .padded .two.columns                      ,
          .padded .three.columns                    ,
          .padded .one-third.column                 ,
          .padded .four.columns                     ,
          .padded .five.columns                     ,
          .padded .six.columns                      ,
          .padded .seven.columns                    ,
          .padded .two-thirds.column                ,
          .padded .eight.columns                    ,
          .padded .nine.columns                     ,
          .padded .ten.columns                      ,
          .padded .eleven.columns                   ,
          .padded .twelve.columns                   { width: 98%; padding:0 1%; margin:0; }

          .padded .mob-one.column,
          .padded .mob-one.columns                  { width: 4.5%; }
          .padded .mob-two.columns                  { width: 13%; }
          .padded .mob-three.columns                { width: 21.5%; }
          .padded .mob-one-third.columns            ,
          .padded .mob-four.columns                 { width: 30%; }
          .padded .mob-five.columns                 { width: 38.5%; }
          .padded .mob-six.columns                  { width: 47%; }
          .padded .mob-seven.columns                { width: 55.5%; }
          .padded .mob-two-thirds.columns           ,
          .padded .mob-eight.columns                { width: 64%; }
          .padded .mob-nine.columns                 { width: 72.5%; }
          .padded .mob-ten.columns                  { width: 81%; }
          .padded .mob-eleven.columns               { width: 89.5%; }
          .padded .mob-twelve.columns               { width: 98%; }

          .padded .p-mob-one.column,
          .padded .p-mob-one.columns                { width: 4.5%; }
          .padded .p-mob-two.columns                { width: 13%; }
          .padded .p-mob-three.columns              { width: 21.5%; }
          .padded .p-mob-one-third.column           ,
          .padded .p-mob-four.columns               { width: 30%; }
          .padded .p-mob-five.columns               { width: 38.5%; }
          .padded .p-mob-six.columns                { width: 47%; }
          .padded .p-mob-seven.columns              { width: 55.5%; }
          .padded .p-mob-two-thirds.column          ,
          .padded .p-mob-eight.columns              { width: 64%; }
          .padded .p-mob-nine.columns               { width: 72.5%; }
          .padded .p-mob-ten.columns                { width: 81%; }
          .padded .p-mob-eleven.columns             { width: 89.5%; }
          .padded .p-mob-twelve.columns             { width: 98%; }
          
          .padded .mob-alpha.column                 ,
          .padded .mob-alpha.columns                { clear:left; }
          
    }
    /**/