/*
- Skeleton V1.2
- www.getskeleton.com
- Free to use under the MIT license.

Table of Contents -----------------------------------------------------------------
- Base 960 Grid
- Tablet (Portrait)
- Mobile (Portrait)
- Mobile (Landscape)
- Clearing
*/

/* Base Grid for larger screens (min-width: 1367px) ----------------------------------------------------------------- */
/* Note: Design for a width of 1367px */

    .container {position:relative; width:1050px; margin:0 auto; padding:0px;}
    .container .column, .container .columns {float:left; display:inline; /*margin-left:10px; margin-right:10px;*/ margin-top:0px; text-align:center;}
    .row {margin-bottom:0px;}

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

    /* Base Grid */
    .container .one.column, .container .one.columns {width:40px;}
    .container .two.columns {width:100px;}
    .container .three.columns {width:160px; float:right;}
    .container .four.columns {width:220px; margin-bottom:-35px;}
    .container .five.columns {width:340px;}
    .container .five.columns.left {width:340px; text-align:left; margin-left:0; margin-right:0px;}
    .container .six.columns {width:340px;}
    .container .seven.columns {width:400px;}
    .container .eight.columns {width:525px;}
    .container .eight.columns.left {width:485px; text-align:left; margin-right:40px;}
    .container .nine.columns {width:520px;}
    .container .ten.columns {width:580px;}
    .container .eleven.columns {width:640px;}
    .container .twelve.columns {width:900px;}
    .container .thirteen.columns {width:760px;}
    .container .fourteen.columns {width:820px;}
    .container .fifteen.columns {width:880px;}
    .container .sixteen.columns {width:940px;}

    .container .one-third.column {width:300px;}
    .container .two-thirds.column {width:620px;}

    /* Offsets */
    .container .offset-by-one {padding-left:60px; }
    .container .offset-by-two {padding-left:120px;}
    .container .offset-by-three {padding-left:180px;}
    .container .offset-by-four {padding-left:240px;}
    .container .offset-by-five {padding-left:300px;}
    .container .offset-by-six {padding-left:360px;}
    .container .offset-by-seven {padding-left:420px;}
    .container .offset-by-eight {padding-left:480px;}
    .container .offset-by-nine {padding-left:540px;}
    .container .offset-by-ten {padding-left:600px;}
    .container .offset-by-eleven {padding-left:660px;}
    .container .offset-by-twelve { padding-left:720px; }
    .container .offset-by-thirteen { padding-left:780px; }
    .container .offset-by-fourteen { padding-left:840px; }
    .container .offset-by-fifteen { padding-left:900px; }



/*  Mobiles (Portrait Low Resolution) ----------------------------------------------------------------- */
    /* Note: Design for a max-width of 374px */

    @media only screen and (max-width:374px) {
        .container {width:300px;}
        .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 .eight.columns.left,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column {width:300px;}

        /* Offsets */
        .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,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen {padding-left:5px;}
    }

/* Mobiles (Portrait), Most of the Smartphones ----------------------------------------------------------------- */
    /* Note: Design for a width of 375px */

    @media only screen and (min-width:375px) and (max-width:480px) {
        .container { width:345px;}
        .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 .eight.columns.left,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column {width:345px;}

        /* Offsets */
        .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,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen {padding-left:5px;}
    }

/* Mobiles (Landscape), Low Resolution Tablets ----------------------------------------------------------------- */
/* Note: Design for a width of 481px */

    @media only screen and (min-width:481px) and (max-width:767px) {
        .container {width:470px;}
        .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 .eight.columns.left,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column {width:470px;}
        
        .container .five.columns {width:130px; margin-left:10px; margin-right:10px;}
    }


/* Tablets, iPads (Portrait) ----------------------------------------------------------------- */
/* Note: Design for a width of 768px */

    @media only screen and (min-width:768px) and (max-width:1023px) {
        .container {width:720px;}
        /*.container .column, .container .columns {margin-left:60px; margin-right:60px;}*/
        .column.alpha, .columns.alpha {margin-left:0; margin-right:10px;}
        .column.omega, .columns.omega {margin-right:0; margin-left:10px;}
        .alpha.omega {margin-left:0; margin-right:0;}

        .container .one.column, .container .one.columns {width:28px;}
        .container .two.columns {width:76px;}
        .container .three.columns {width:124px;}
        .container .four.columns {width:172px;}
        .container .five.columns {width:220px; margin-left:10px; margin-right:10px;}
        .container .five.columns.left {width:220px; text-align:left; margin-left:10px; margin-right:10px;}
        .container .six.columns {width:268px;}
        .container .seven.columns {width:316px;}
        .container .eight.columns {width:360px;}
        .container .eight.columns.left {width:720px; text-align:left;}
        .container .nine.columns {width:412px;}
        .container .ten.columns {width:460px;}
        .container .eleven.columns {width:508px;}
        .container .twelve.columns {width:556px;}
        .container .thirteen.columns {width:604px;}
        .container .fourteen.columns {width:652px;}
        .container .fifteen.columns {width:660px;}
        .container .sixteen.columns {width:648px;} /* modified: urspruenglich 748 px */

        .container .one-third.column {width:195px; margin-left:30px; margin-right:30px;}
        .container .two-thirds.column {width:720px;}
        
        /* Offsets */
        .container .offset-by-one {padding-left:48px;}
        .container .offset-by-two {padding-left:96px;}
        .container .offset-by-three {padding-left:144px;}
        .container .offset-by-four {padding-left:192px;}
        .container .offset-by-five {padding-left:240px;}
        .container .offset-by-six {padding-left:288px;}
        .container .offset-by-seven {padding-left:336px;}
        .container .offset-by-eight {padding-left:384px;}
        .container .offset-by-nine {padding-left:432px;}
        .container .offset-by-ten {padding-left:480px;}
        .container .offset-by-eleven {padding-left:528px;}
        .container .offset-by-twelve {padding-left:576px;}
        .container .offset-by-thirteen {padding-left:624px;}
        .container .offset-by-fourteen {padding-left:672px}
        .container .offset-by-fifteen {padding-left:720px;}
    }


/* Tablets, iPads (Landscape) ----------------------------------------------------------------- */
/* Note: Design for a width of 1024px */

    @media (min-width:1024px) and (max-width:1366px) {
        .container {width:950px}
        .container .columns, .container .column {margin:0;}

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column {width:950px;}
        
        .container .five.columns {width:276px; margin-left:20px; margin-right:20px;}
        .container .five.columns.left {width:276px; text-align:left; margin-left:20px; margin-right:20px;}
        
        .container .eight.columns {width:475px;}
        .container .eight.columns.left {width:445px; text-align:left; margin-right:30px;}
    }

/* #Clearing ----------------------------------------------------------------- */

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

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

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