@CHARSET "ISO-8859-1";
/*
* Skeleton Responsive 12 Grid System
* Copyright 2013, Jin Zhou, Nick Gao
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/


/* Table of Contents
==================================================
  #Base Setup
  #Screen (Standard)
  #Screen (Widescreen)
  #Tablet (Portrait)
  #Mobile (Portrait)
  #Mobile (Landscape)
  #Fix    (Clearfix, borderfix etc) */


/* #Base Setup
================================================== */
    .container                       { margin: 0 auto; }
    .row                             { width: 100%; }
    [class*="span"]                  { display: block; float: left; min-height: 1px; position: relative; }

    .span12                          {       width: 100%;            }
    .span11                          {       width: 91.6666666666%;  }
    .span10                          {       width: 83.3333333333%;  }
    .span9                           {       width: 75%;             }
    .span8                           {       width: 66.6666666666%;  }
    .span7                           {       width: 58.3333333333%;  }
    .span6                           {       width: 50%;             }
    .span5                           {       width: 41.6666666666%;  }
    .span4                           {       width: 33.3333333333%;  }
    .span3                           {       width: 25%;             }
    .span2                           {       width: 16.6666666666%;  }
    .span1                           {       width:  8.3333333333%;  }

    .offset11                        { margin-left: 91.6666666666%;  }
    .offset10                        { margin-left: 83.3333333333%;  }
    .offset9                         { margin-left: 75%;             }
    .offset8                         { margin-left: 66.6666666666%;  }
    .offset7                         { margin-left: 58.3333333333%;  }
    .offset6                         { margin-left: 50%;             }
    .offset5                         { margin-left: 41.6666666666%;  }
    .offset4                         { margin-left: 33.3333333333%;  }
    .offset3                         { margin-left: 25%;             }
    .offset2                         { margin-left: 16.6666666666%;  }
    .offset1                         { margin-left:  8.3333333333%;  }

    .push11                          {        left: 91.6666666666%;  }
    .push10                          {        left: 83.3333333333%;  }
    .push9                           {        left: 75%;             }
    .push8                           {        left: 66.6666666666%;  }
    .push7                           {        left: 58.3333333333%;  }
    .push6                           {        left: 50%;             }
    .push5                           {        left: 41.6666666666%;  }
    .push4                           {        left: 33.3333333333%;  }
    .push3                           {        left: 25%;             }
    .push2                           {        left: 16.6666666666%;  }
    .push1                           {        left:  8.3333333333%;  }

    .pull11                          {       right: 91.6666666666%;  }
    .pull10                          {       right: 83.3333333333%;  }
    .pull9                           {       right: 75%;             }
    .pull8                           {       right: 66.6666666666%;  }
    .pull7                           {       right: 58.3333333333%;  }
    .pull6                           {       right: 50%;             }
    .pull5                           {       right: 41.6666666666%;  }
    .pull4                           {       right: 33.3333333333%;  }
    .pull3                           {       right: 25%;             }
    .pull2                           {       right: 16.6666666666%;  }
    .pull1                           {       right:  8.3333333333%;  }

    .show                            { display: block; }
    .hide                            { display: none;  }

    .fluid-width                     { width: 100%; max-height: 100%; height: auto; }
    .fluid-height                    { height: 100%; max-width: 100%; width: auto; }


/* #Screen (Standard)
================================================== */
    .container                       { width: 960px; }

    .show-phone                      { display: none !important;    }
    .show-tablet                     { display: none !important;    }
    .hide-desktop                    { display: none !important;    }


/* #Screen (Widescreen)
================================================== */
  @media only screen and (min-width: 1200px) {
    .container                       { width: 1000px; }
  }


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

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

  @media only screen and (min-width: 768px) and (max-width: 959px) {
    .container                       { width: 740px; }

    .tablet-span12                   {       width: 100%;            }
    .tablet-span11                   {       width: 91.6666666666%;  }
    .tablet-span10                   {       width: 83.3333333333%;  }
    .tablet-span9                    {       width: 75%;             }
    .tablet-span8                    {       width: 66.6666666666%;  }
    .tablet-span7                    {       width: 58.3333333333%;  }
    .tablet-span6                    {       width: 50%;             }
    .tablet-span5                    {       width: 41.6666666666%;  }
    .tablet-span4                    {       width: 33.3333333333%;  }
    .tablet-span3                    {       width: 25%;             }
    .tablet-span2                    {       width: 16.6666666666%;  }
    .tablet-span1                    {       width:  8.3333333333%;  }

    .tablet-offset0                  { margin-left:  0;              }
    .tablet-offset11                 { margin-left: 91.6666666666%;  }
    .tablet-offset10                 { margin-left: 83.3333333333%;  }
    .tablet-offset9                  { margin-left: 75%;             }
    .tablet-offset8                  { margin-left: 66.6666666666%;  }
    .tablet-offset7                  { margin-left: 58.3333333333%;  }
    .tablet-offset6                  { margin-left: 50%;             }
    .tablet-offset5                  { margin-left: 41.6666666666%;  }
    .tablet-offset4                  { margin-left: 33.3333333333%;  }
    .tablet-offset3                  { margin-left: 25%;             }
    .tablet-offset2                  { margin-left: 16.6666666666%;  }
    .tablet-offset1                  { margin-left:  8.3333333333%;  }

    .tablet-push0                    {        left:  0;              }
    .tablet-push11                   {        left: 91.6666666666%;  }
    .tablet-push10                   {        left: 83.3333333333%;  }
    .tablet-push9                    {        left: 75%;             }
    .tablet-push8                    {        left: 66.6666666666%;  }
    .tablet-push7                    {        left: 58.3333333333%;  }
    .tablet-push6                    {        left: 50%;             }
    .tablet-push5                    {        left: 41.6666666666%;  }
    .tablet-push4                    {        left: 33.3333333333%;  }
    .tablet-push3                    {        left: 25%;             }
    .tablet-push2                    {        left: 16.6666666666%;  }
    .tablet-push1                    {        left:  8.3333333333%;  }

    .tablet-pull0                    {       right:  0;              }
    .tablet-pull11                   {       right: 91.6666666666%;  }
    .tablet-pull10                   {       right: 83.3333333333%;  }
    .tablet-pull9                    {       right: 75%;             }
    .tablet-pull8                    {       right: 66.6666666666%;  }
    .tablet-pull7                    {       right: 58.3333333333%;  }
    .tablet-pull6                    {       right: 50%;             }
    .tablet-pull5                    {       right: 41.6666666666%;  }
    .tablet-pull4                    {       right: 33.3333333333%;  }
    .tablet-pull3                    {       right: 25%;             }
    .tablet-pull2                    {       right: 16.6666666666%;  }
    .tablet-pull1                    {       right:  8.3333333333%;  }

    .show-tablet                     { display: initial !important; }
    .show-desktop                    { display: none !important;    }
    .hide-tablet                     { display: none !important;    }
    .hide-desktop                    { display: initial !important; }
  }


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

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

  @media only screen and (max-width: 767px) {
    .container                       { width: 300px; }
    [class*="span"]                  { width: 100%; }

    .phone-span12                    {       width: 100%;            }
    .phone-span11                    {       width: 91.6666666666%;  }
    .phone-span10                    {       width: 83.3333333333%;  }
    .phone-span9                     {       width: 75%;             }
    .phone-span8                     {       width: 66.6666666666%;  }
    .phone-span7                     {       width: 58.3333333333%;  }
    .phone-span6                     {       width: 50%;             }
    .phone-span5                     {       width: 41.6666666666%;  }
    .phone-span4                     {       width: 33.3333333333%;  }
    .phone-span3                     {       width: 25%;             }
    .phone-span2                     {       width: 16.6666666666%;  }
    .phone-span1                     {       width:  8.3333333333%;  }

    [class*="offset"]                { margin-left:  0;              }
    .phone-offset11                  { margin-left: 91.6666666666%;  }
    .phone-offset10                  { margin-left: 83.3333333333%;  }
    .phone-offset9                   { margin-left: 75%;             }
    .phone-offset8                   { margin-left: 66.6666666666%;  }
    .phone-offset7                   { margin-left: 58.3333333333%;  }
    .phone-offset6                   { margin-left: 50%;             }
    .phone-offset5                   { margin-left: 41.6666666666%;  }
    .phone-offset4                   { margin-left: 33.3333333333%;  }
    .phone-offset3                   { margin-left: 25%;             }
    .phone-offset2                   { margin-left: 16.6666666666%;  }
    .phone-offset1                   { margin-left:  8.3333333333%;  }

    [class*="push"]                  {        left:  0;              }
    .phone-push11                    {        left: 91.6666666666%;  }
    .phone-push10                    {        left: 83.3333333333%;  }
    .phone-push9                     {        left: 75%;             }
    .phone-push8                     {        left: 66.6666666666%;  }
    .phone-push7                     {        left: 58.3333333333%;  }
    .phone-push6                     {        left: 50%;             }
    .phone-push5                     {        left: 41.6666666666%;  }
    .phone-push4                     {        left: 33.3333333333%;  }
    .phone-push3                     {        left: 25%;             }
    .phone-push2                     {        left: 16.6666666666%;  }
    .phone-push1                     {        left:  8.3333333333%;  }

    [class*="pull"]                  {       right:  0;              }
    .phone-pull11                    {       right: 91.6666666666%;  }
    .phone-pull10                    {       right: 83.3333333333%;  }
    .phone-pull9                     {       right: 75%;             }
    .phone-pull8                     {       right: 66.6666666666%;  }
    .phone-pull7                     {       right: 58.3333333333%;  }
    .phone-pull6                     {       right: 50%;             }
    .phone-pull5                     {       right: 41.6666666666%;  }
    .phone-pull4                     {       right: 33.3333333333%;  }
    .phone-pull3                     {       right: 25%;             }
    .phone-pull2                     {       right: 16.6666666666%;  }
    .phone-pull1                     {       right:  8.3333333333%;  }

    .show-phone                      { display: block !important; }
    .show-desktop                    { display: none !important;    }
    .hide-phone                      { display: none !important;    }
    .hide-desktop                    { display: initial !important; }
  }


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

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

  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .container                       { width: 456px; }
  }


/* #Fix
================================================== */

  /* Use ".clearfix" on parent container or wrap columns in a <div class="row"> to automatically clear nested columns */
  .row:before,
  .row:after,
  .clearfix:before,
  .clearfix:after {
    content: '\0020';
    display: block;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  .row:after,
  .clearfix:after {
    clear: both;
  }

  /* You can also use ".clear" e.g. a <br class="clear" /> to clear columns */
  .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }

  /*
    Fix box model 
    http://css-tricks.com/box-sizing/
    http://css-tricks.com/transparent-borders-with-background-clip/
  */
  *, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-background-clip: padding-box;
       -moz-background-clip: padding-box;
            background-clip: padding-box;
  }

  /*
    Fix safari <input> and <textarea> tag border radius
  */
  input:not([type="radio"]):not([type="checkbox"]), textarea {
    -webkit-appearance: none;
    border-radius: 0;
  }

  /*
    Fix <a> tag height larger than the size of wrapped <img> tag
  */
  a {
    display: inline-block;
  }

  /*
    Removes the border of image by default,
    set vertical alignment to middle instead of baseline,
    also fixes awful look when resizing image in IE
    http://css-tricks.com/ie-fix-bicubic-scaling-for-images/
  */
  img {
    border: none;
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
  }

  /*
    Force scrollbar to be always visible on iOS safari
    http://css-tricks.com/custom-scrollbars-in-webkit/
    http://css-tricks.com/forums/topic/custom-scrollbar/
    http://stackoverflow.com/questions/15623389/dissappearing-arrow-and-styling-on-select-element-in-safari-on-ios
  */
  ::i-block-chrome, ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 6px;
  }
  ::i-block-chrome, ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
  }
  ::i-block-chrome, ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }

  /* Removes dotted border when focus */
  *:focus {
    outline: none !important;
  }

  /*
    Disable auto-scaling of small text on iOS safari
    http://css-tricks.com/prevent-iphone-text-enlargement/
    http://blog.55minutes.com/2012/04/iphone-text-resizing/
  */
  html {
    -webkit-text-size-adjust: 100%;
  }