/*
 *  Responsive & Fluid Grid based
 * -------------------------------
 *
 * Composed of 24 columns with the default columns
 * sized at 20px wide with a 20px gutter (940|960)
 * 
 * Breakpoints are set at 480px, 768px, 980px & 1200px
 * which scales the grid proportionally.
 *
 * The fluid grid uses the same breakpoints with percentages
 * proportionate to the default 940|960 grid.
 *
 * Compatible with all modern browsers, including IE7+.
 *
 */

/* =============================================================================
   Fixed Layout
   ========================================================================== */
.row { margin-left: -20px; }
  .lt-ie9 .row { zoom: 1; }
  .row:after { clear: both; }
  .row:before, .row:after {
    display: table;
    content: "";
  }

[class*="grid"] {
  float: left;
  margin-left: 20px;
}
  input[class*="grid"],
  select[class*="grid"],
  textarea[class*="grid"],
  .uneditable-input {
    float: none;
    margin-left: 0;
  }
  .grid1 { width: 20px; }
  .grid2 { width: 60px; }
  .grid3 { width: 100px; }
  .grid4 { width: 140px; }
  .grid5 { width: 180px; }
  .grid6 { width: 220px; }
  .grid7 { width: 260px; }
  .grid8 { width: 300px; }
  .grid9 { width: 340px; }
  .grid10 { width: 380px; }
  .grid11 { width: 420px; }
  .grid12 { width: 460px; }
  .grid13 { width: 500px; }
  .grid14 { width: 540px; }
  .grid15 { width: 580px; }
  .grid16 { width: 620px; }
  .grid17 { width: 660px; }
  .grid18 { width: 700px; }
  .grid19 { width: 740px; }
  .grid20 { width: 780px; }
  .grid21 { width: 820px; }
  .grid22 { width: 860px; }
  .grid23 { width: 900px; }
  .grid24,
  .container { width: 940px; }



.shift1 { margin-left: 60px; }
.shift2 { margin-left: 100px; }
.shift3 { margin-left: 140px; }
.shift4 { margin-left: 180px; }
.shift5 { margin-left: 220px; }
.shift6 { margin-left: 260px; }
.shift7 { margin-left: 300px; }
.shift8 { margin-left: 340px; }
.shift9 { margin-left: 380px; }
.shift10 { margin-left: 420px; }
.shift11 { margin-left: 460px; }
.shift12 { margin-left: 500px; }
.shift13 { margin-left: 540px; }
.shift14 { margin-left: 580px; }
.shift15 { margin-left: 620px; }
.shift16 { margin-left: 660px; }
.shift17 { margin-left: 700px; }
.shift18 { margin-left: 740px; }
.shift19 { margin-left: 780px; }
.shift20 { margin-left: 820px; }
.shift21 { margin-left: 860px; }
.shift22 { margin-left: 900px; }
.shift23 { margin-left: 940px; }

/* =============================================================================
   Fluid Layout
   ========================================================================== */
.row-fluid { width: 100%; }
  .lt-ie9 .row-fluid { zoom: 1; }
  .row-fluid:after { clear: both; }
  .row-fluid:before,
  .row-fluid:after {
    display: table;
    content: "";
  }

.row-fluid > [class*="grid"] {
  float: left;
  margin-left: 2.127659574%;
}
  .row-fluid > [class*="grid"]:first-child { margin-left: 0; }
  .row-fluid .grid1 { width: 2.1276595%; }
  .row-fluid .grid2 { width: 6.382978723%; }
  .row-fluid .grid3 { width: 10.6382978%; }
  .row-fluid .grid4 { width: 14.89361702%; }
  .row-fluid .grid5 { width: 19.146936%; }
  .row-fluid .grid6 { width: 23.404255317%; }
  .row-fluid .grid7 { width: 27.6555742%; }
  .row-fluid .grid8 { width: 31.914893614%; }
  .row-fluid .grid9 { width: 36.1642124%; }
  .row-fluid .grid10 { width: 40.425531911%; }
  .row-fluid .grid11 { width: 44.6728506%; }
  .row-fluid .grid12 { width: 48.93617020799999%; }
  .row-fluid .grid13 { width: 53.1914891%; }
  .row-fluid .grid14 { width: 57.446808505%; }
  .row-fluid .grid15 { width: 61.7021275%; }
  .row-fluid .grid16 { width: 65.95744680199999%; }
  .row-fluid .grid17 { width: 70.2127659%; }
  .row-fluid .grid18 { width: 74.468085099%; }
  .row-fluid .grid19 { width: 78.7234042%; }
  .row-fluid .grid20 { width: 82.97872339599999%; }
  .row-fluid .grid21 { width: 87.2340425%; }
  .row-fluid .grid22 { width: 91.489361693%; }
  .row-fluid .grid23 { width: 95.7446808%; }
  .row-fluid .grid24 { width: 99.99999998999999%; }

/* =============================================================================
    Split-Column Grid System
   ========================================================================== */
.of, .ot, .oh, .tt, .tf {
  float: left;
  padding: 0 2% 2% 0;
}
  .of { width: 23%; }
  .oh { width: 48%; }
  .ot { width: 31%; }
  .tt { width: 65%; }
  .tf { width: 73%; }


/* =============================================================================
   Framing Rows
   ========================================================================== */
.frame,
.frame-fluid { box-sizing: border-box; }
  .frame { padding: 0 20px; }
  .frame-fluid { padding: 0 2.127659574%; }


/* =============================================================================
   Media Queries - Breakpoints @ 1200px | 980px | 768px | 480px
   ========================================================================== */

/* ==|== 480px - Phone Landscape ============================================ *//*
@media only screen and (max-width: 480px) {
  input[class*="grid"],
  select[class*="grid"],
  textarea[class*="grid"],
  .uneditable-input {
    display: block;
    width: 100%;
    height: 28px; *//* Make inputs at least the height of their button counterpart *//*
  
    *//* Makes inputs behave like true block-level elements *//*
    -ms-box-sizing: border-box; *//* IE8 *//*
    box-sizing: border-box; *//* CSS3 spec*//*
  }

  .input-prepend input[class*="grid"],
  .input-append input[class*="grid"] { width: auto; }

  input[type="checkbox"],
  input[type="radio"] { border: 1px solid #ccc; }

  .form-horizontal .control-group > label {
    float: none;
    width: auto;
    padding-top: 0;
    text-align: left;
  }

  .form-horizontal .controls { margin-left: 0; }
  .form-horizontal .control-list { padding-top: 0;}

  .form-horizontal .form-actions { 
    padding-left: 10px;
    padding-right: 10px;
  }
}

*//* ==|== 768px - Phone Landscape | Tablet Portrait ========================== *//*
@media only screen and (max-width: 768px) {
  .container {
    width: auto;
    padding: 0 20px;
  }

  .row-fluid { width: 100%; }
  .row { margin-left: 0; }
  .row > [class*="grid"], .row-fluid > [class*="grid"] {
    float: none;
    display: block;
    width: auto;
    margin: 0;
  }
}

*//* ==|== 768px - Tablet Portrait | Desktop Landscape ======================== *//*
@media only screen and (min-width: 768px) and (max-width: 980px) {
  .grid1 { width: 11px; }
  .grid2 { width: 42px; }
  .grid3 { width: 73px; }
  .grid4 { width: 104px; }
  .grid5 { width: 135px; }
  .grid6 { width: 166px; }
  .grid7 { width: 197px; }
  .grid8 { width: 228px; }
  .grid9 { width: 259px; }
  .grid10 { width: 290px; }
  .grid11 { width: 321px; }
  .grid12 { width: 352px; }
  .grid13 { width: 383px; }
  .grid14 { width: 414px; }
  .grid15 { width: 445px; }
  .grid16 { width: 476px; }
  .grid17 { width: 507px; }
  .grid18 { width: 538px; }
  .grid19 { width: 569px; }
  .grid20 { width: 600px; }
  .grid21 { width: 531px; }
  .grid22 { width: 662px; }
  .grid23 { width: 693px; }
  .grid24,
  .container { width: 724px; }

  .shift1 { margin-left: 31px; }
  .shift2 { margin-left: 82px; }
  .shift3 { margin-left: 113px; }
  .shift4 { margin-left: 144px; }
  .shift5 { margin-left: 175px; }
  .shift6 { margin-left: 206px; }
  .shift7 { margin-left: 237px; }
  .shift8 { margin-left: 268px; }
  .shift9 { margin-left: 299px; }
  .shift10 { margin-left: 330px; }
  .shift11 { margin-left: 361px; }
  .shift12 { margin-left: 392px; }
  .shift13 { margin-left: 423px; }
  .shift14 { margin-left: 454px; }
  .shift15 { margin-left: 485px; }
  .shift16 { margin-left: 516px; }
  .shift17 { margin-left: 547px; }
  .shift18 { margin-left: 578px; }
  .shift19 { margin-left: 609px; }
  .shift20 { margin-left: 640px; }
  .shift21 { margin-left: 671px; }
  .shift22 { margin-left: 702px; }
  .shift23 { margin-left: 733px; }

  .row-fluid > [class*="grid"] { margin-left: 2.762430939%; }
    .row-fluid .grid1 { width: 2.9005524865%; }
    .row-fluid .grid2 { width: 5.801104972%; }
    .row-fluid .grid3 { width: 10.0828729275%; }
    .row-fluid .grid4 { width: 14.364640883%; }
    .row-fluid .grid5 { width: 18.6464088385%; }
    .row-fluid .grid6 { width: 22.928176794%; }
    .row-fluid .grid7 { width: 27.2099447495%; }
    .row-fluid .grid8 { width: 31.491712705%; }
    .row-fluid .grid9 { width: 35.7734806605%; }
    .row-fluid .grid10 { width: 40.055248616%; }
    .row-fluid .grid11 { width: 44.3370165715%; }
    .row-fluid .grid12 { width: 48.618784527%; }
    .row-fluid .grid13 { width: 52.9005524825%; }
    .row-fluid .grid14 { width: 57.182320438000005%; }
    .row-fluid .grid15 { width: 61.4640883935%; }
    .row-fluid .grid16 { width: 65.74585634900001%; }
    .row-fluid .grid17 { width: 70.02762430449999%; }
    .row-fluid .grid18 { width: 74.30939226%; }
    .row-fluid .grid19 { width: 78.5911602155%; }
    .row-fluid .grid20 { width: 82.87292817100001%; }
    .row-fluid .grid21 { width: 87.15469612650001%; }
    .row-fluid .grid22 { width: 91.436464082%; }
    .row-fluid .grid23 { width: 95.7182320375%; }
    .row-fluid .grid24 { width: 99.999999993%; }

  .frame-fluid > [class*="grid"] { padding-left: 2.127659574%; }

  input.grid1, textarea.grid1, .uneditable-input.grid1 { width: 11px; }
  input.grid2, textarea.grid2, .uneditable-input.grid2 { width: 32px; }
  input.grid3, textarea.grid3, .uneditable-input.grid3 { width: 63px; }
  input.grid4, textarea.grid4, .uneditable-input.grid4 { width: 94px; }
  input.grid5, textarea.grid5, .uneditable-input.grid5 { width: 125px; }
  input.grid6, textarea.grid6, .uneditable-input.grid6 { width: 156px; }
  input.grid7, textarea.grid7, .uneditable-input.grid7 { width: 187px; }
  input.grid8, textarea.grid8, .uneditable-input.grid8 { width: 218px; }
  input.grid9, textarea.grid9, .uneditable-input.grid9 { width: 249px; }
  input.grid10, textarea.grid10, .uneditable-input.grid10 { width: 280px; }
  input.grid11, textarea.grid11, .uneditable-input.grid11 { width: 311px; }
  input.grid12, textarea.grid12, .uneditable-input.grid12 { width: 342px; }
  input.grid13, textarea.grid13, .uneditable-input.grid13 { width: 373px; }
  input.grid14, textarea.grid14, .uneditable-input.grid14 { width: 404px; }
  input.grid15, textarea.grid15, .uneditable-input.grid15 { width: 435px; }
  input.grid16, textarea.grid16, .uneditable-input.grid16 { width: 466px; }
  input.grid17, textarea.grid17, .uneditable-input.grid17 { width: 497px; }
  input.grid18, textarea.grid18, .uneditable-input.grid18 { width: 528px; }
  input.grid19, textarea.grid19, .uneditable-input.grid19 { width: 559px; }
  input.grid20, textarea.grid20, .uneditable-input.grid20 { width: 590px; }
  input.grid21, textarea.grid21, .uneditable-input.grid21 { width: 621px; }
  input.grid22, textarea.grid22, .uneditable-input.grid22 { width: 652px; }
  input.grid23, textarea.grid23, .uneditable-input.grid23 { width: 683px; }
  input.grid24, textarea.grid24, .uneditable-input.grid24 { width: 714px; }
}*/

/* ==|== 980px - Tablet Landscape | Desktop ================================= */
@media only screen and (max-width: 980px) {
  body { padding-top: 0; }
}

/* ==|== 980px - Desktop ==================================================== */
@media only screen and (min-width: 980px) {

  input.grid1, textarea.grid1, .uneditable-input.grid1 { width: 10px; }
  input.grid2, textarea.grid2, .uneditable-input.grid2 { width: 50px; }
  input.grid3, textarea.grid3, .uneditable-input.grid3 { width: 90px; }
  input.grid4, textarea.grid4, .uneditable-input.grid4 { width: 130px; }
  input.grid5, textarea.grid5, .uneditable-input.grid5 { width: 170px; }
  input.grid6, textarea.grid6, .uneditable-input.grid6 { width: 210px; }
  input.grid7, textarea.grid7, .uneditable-input.grid7 { width: 250px; }
  input.grid8, textarea.grid8, .uneditable-input.grid8 { width: 290px; }
  input.grid9, textarea.grid9, .uneditable-input.grid9 { width: 330px; }
  input.grid10, textarea.grid10, .uneditable-input.grid10 { width: 370px; }
  input.grid11, textarea.grid11, .uneditable-input.grid11 { width: 410px; }
  input.grid12, textarea.grid12, .uneditable-input.grid12 { width: 450px; }
  input.grid13, textarea.grid13, .uneditable-input.grid13 { width: 490px; }
  input.grid14, textarea.grid14, .uneditable-input.grid14 { width: 530px; }
  input.grid15, textarea.grid15, .uneditable-input.grid15 { width: 570px; }
  input.grid16, textarea.grid16, .uneditable-input.grid16 { width: 610px; }
  input.grid17, textarea.grid17, .uneditable-input.grid17 { width: 650px; }
  input.grid18, textarea.grid18, .uneditable-input.grid18 { width: 690px; }
  input.grid19, textarea.grid19, .uneditable-input.grid19 { width: 730px; }
  input.grid20, textarea.grid20, .uneditable-input.grid20 { width: 770px; }
  input.grid21, textarea.grid21, .uneditable-input.grid21 { width: 810px; }
  input.grid22, textarea.grid22, .uneditable-input.grid22 { width: 850px; }
  input.grid23, textarea.grid23, .uneditable-input.grid23 { width: 890px; }
  input.grid24, textarea.grid24, .uneditable-input.grid24 { width: 930px; }

}


/* ==|== 1200px - Desktop Widescreen ======================================== */
@media only screen and (min-width: 1200px) {
  .row { margin-left: -30px; }

  [class*="grid"] { margin-left: 30px; }
    .grid1 { width: 20px; }
    .grid2 { width: 70px; }
    .grid3 { width: 120px; }
    .grid4 { width: 170px; }
    .grid5 { width: 220px; }
    .grid6 { width: 270px; }
    .grid7 { width: 320px; }
    .grid8 { width: 370px; }
    .grid9 { width: 420px; }
    .grid10 { width: 470px; }
    .grid11 { width: 520px; }
    .grid12 { width: 570px; }
    .grid13 { width: 620px; }
    .grid14 { width: 670px; }
    .grid15 { width: 720px; }
    .grid16 { width: 770px; }
    .grid17 { width: 820px; }
    .grid18 { width: 870px; }
    .grid19 { width: 920px; }
    .grid20 { width: 970px; }
    .grid21 { width: 1020px; }
    .grid22 { width: 1070px; }
    .grid23 { width: 1120px; }
    .grid24,
    .container { width: 1170px; }

  .frame > [class*="grid"] { padding-left: 30px; }

  .shift1 { margin-left: 50px; }
  .shift2 { margin-left: 130px; }
  .shift3 { margin-left: 180px; }
  .shift4 { margin-left: 230px; }
  .shift5 { margin-left: 280px; }
  .shift6 { margin-left: 330px; }
  .shift7 { margin-left: 380px; }
  .shift8 { margin-left: 430px; }
  .shift9 { margin-left: 480px; }
  .shift10 { margin-left: 530px; }
  .shift11 { margin-left: 580px; }
  .shift12 { margin-left: 630px; }
  .shift13 { margin-left: 680px; }
  .shift14 { margin-left: 730px; }
  .shift15 { margin-left: 780px; }
  .shift16 { margin-left: 830px; }
  .shift17 { margin-left: 880px; }
  .shift18 { margin-left: 930px; }
  .shift19 { margin-left: 980px; }
  .shift20 { margin-left: 1030px; }
  .shift21 { margin-left: 1080px; }
  .shift22 { margin-left: 1130px; }
  .shift23 { margin-left: 1180px; }

  .row-fluid > [class*="grid"] { margin-left: 2.564102564%; }
    .row-fluid > [class*="grid"]:first-child { margin-left: 0; }
    .row-fluid .grid1 { width: 1.7094017095%; }
    .row-fluid .grid2 { width: 5.982905983%; }
    .row-fluid .grid3 { width: 10.2564102565%; }
    .row-fluid .grid4 { width: 14.529914530000001%; }
    .row-fluid .grid5 { width: 18.8034188035%; }
    .row-fluid .grid6 { width: 23.076923077%; }
    .row-fluid .grid7 { width: 27.3504273505%; }
    .row-fluid .grid8 { width: 31.623931624%; }
    .row-fluid .grid9 { width: 35.8974358975%; }
    .row-fluid .grid10 { width: 40.170940171000005%; }
    .row-fluid .grid11 { width: 44.4444444445%; }
    .row-fluid .grid12 { width: 48.717948718%; }
    .row-fluid .grid13 { width: 52.9914529915%; }
    .row-fluid .grid14 { width: 57.264957265%; }
    .row-fluid .grid15 { width: 61.5384615385%; }
    .row-fluid .grid16 { width: 65.81196581200001%; }
    .row-fluid .grid17 { width: 70.0854700855%; }
    .row-fluid .grid18 { width: 74.358974359%; }
    .row-fluid .grid19 { width: 78.6324786325%; }
    .row-fluid .grid20 { width: 82.905982906%; }
    .row-fluid .grid21 { width: 87.1794871795%; }
    .row-fluid .grid22 { width: 91.45299145300001%; }
    .row-fluid .grid23 { width: 95.7264957265%; }
    .row-fluid .grid24 { width: 100%; }

  .frame-fluid > [class*="grid"] { padding-left: 2.564102564%; }

  input.grid1, textarea.grid1, .uneditable-input.grid1 { width: 30px; }
  input.grid2, textarea.grid2, .uneditable-input.grid2 { width: 60px; }
  input.grid3, textarea.grid3, .uneditable-input.grid3 { width: 110px; }
  input.grid4, textarea.grid4, .uneditable-input.grid4 { width: 160px; }
  input.grid5, textarea.grid5, .uneditable-input.grid5 { width: 210px; }
  input.grid6, textarea.grid6, .uneditable-input.grid6 { width: 260px; }
  input.grid7, textarea.grid7, .uneditable-input.grid7 { width: 310px; }
  input.grid8, textarea.grid8, .uneditable-input.grid8 { width: 360px; }
  input.grid9, textarea.grid9, .uneditable-input.grid9 { width: 410px; }
  input.grid10, textarea.grid10, .uneditable-input.grid10 { width: 460px; }
  input.grid11, textarea.grid11, .uneditable-input.grid11 { width: 510px; }
  input.grid12, textarea.grid12, .uneditable-input.grid12 { width: 560px; }
  input.grid13, textarea.grid13, .uneditable-input.grid13 { width: 610px; }
  input.grid14, textarea.grid14, .uneditable-input.grid14 { width: 660px; }
  input.grid15, textarea.grid15, .uneditable-input.grid15 { width: 710px; }
  input.grid16, textarea.grid16, .uneditable-input.grid16 { width: 760px; }
  input.grid17, textarea.grid17, .uneditable-input.grid17 { width: 810px; }
  input.grid18, textarea.grid18, .uneditable-input.grid18 { width: 860px; }
  input.grid19, textarea.grid19, .uneditable-input.grid19 { width: 910px; }
  input.grid20, textarea.grid20, .uneditable-input.grid20 { width: 960px; }
  input.grid21, textarea.grid21, .uneditable-input.grid21 { width: 1010px; }
  input.grid22, textarea.grid22, .uneditable-input.grid22 { width: 1060px; }
  input.grid23, textarea.grid23, .uneditable-input.grid23 { width: 1110px; }
  input.grid24, textarea.grid24, .uneditable-input.grid24 { width: 1160px; }
}