/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
/* Custom 24 column 960px grid */

    .container                                  { position: relative; width: 984px; margin: 0 auto; padding: 0; }
    .container .column,
    .container .columns                         { float: left; display: inline; margin : 0px 10px; word-wrap : break-word;  }
    .row                                        { margin : 18px 0px; }       
    
    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

    /* Base Grid */
.container .one.columns			{ width: 21px; }	
.container .two.columns			{ width: 62px; }	
.container .three.columns			{ width: 103px; }	
.container .four.columns			{ width: 144px; }	
.container .five.columns			{ width: 185px; }	
.container .six.columns			{ width: 226px; }	
.container .seven.columns			{ width: 267px; }	
.container .eight.columns			{ width: 308px; }	
.container .nine.columns			{ width: 349px; }	
.container .ten.columns			{ width: 390px; }	
.container .eleven.columns			{ width: 431px; }	
.container .twelve.columns			{ width: 472px; }	
.container .thirteen.columns			{ width: 513px; }	
.container .fourteen.columns			{ width: 554px; }	
.container .fifteen.columns			{ width: 595px; }	
.container .sixteen.columns			{ width: 636px; }	
.container .seventeen.columns			{ width: 677px; }	
.container .eighteen.columns			{ width: 718px; }	
.container .nineteen.columns			{ width: 759px; }	
.container .twenty.columns			{ width: 800px; }	
.container .twentyone.columns			{ width: 841px; }	
.container .twentytwo.columns			{ width: 882px; }	
.container .twentythree.columns			{ width: 923px; }	
.container .twentyfour.columns			{ width: 964px; }	
.container .one-third.column			{ width: 308px; }	
.container .two-thirds.column			{ width: 636px; }	
.container .full-width.column			{ width: 964px; }	




    /* Offsets */
.container .offset-by-one			{ padding-left: 41px; }
.container .offset-by-two			{ padding-left: 82px; }
.container .offset-by-three			{ padding-left: 123px; }
.container .offset-by-four			{ padding-left: 164px; }
.container .offset-by-five			{ padding-left: 205px; }
.container .offset-by-six			{ padding-left: 246px; }
.container .offset-by-seven			{ padding-left: 287px; }
.container .offset-by-eight			{ padding-left: 328px; }
.container .offset-by-nine			{ padding-left: 369px; }
.container .offset-by-ten			{ padding-left: 410px; }
.container .offset-by-eleven			{ padding-left: 451px; }
.container .offset-by-twelve			{ padding-left: 492px; }
.container .offset-by-thirteen			{ padding-left: 533px; }
.container .offset-by-fourteen			{ padding-left: 574px; }
.container .offset-by-fifteen			{ padding-left: 615px; }
.container .offset-by-sixteen			{ padding-left: 656px; }
.container .offset-by-seventeen			{ padding-left: 697px; }
.container .offset-by-eighteen			{ padding-left: 738px; }
.container .offset-by-nineteen			{ padding-left: 779px; }
.container .offset-by-twenty			{ padding-left: 820px; }
.container .offset-by-twentyone			{ padding-left: 861px; }
.container .offset-by-twentytwo			{ padding-left: 902px; }
.container .offset-by-twentythree			{ padding-left: 943px; }





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

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

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 768px; }
        .container .one.column,
        .container .one.columns			{ width: 12px; }	
        .container .two.columns			{ width: 44px; }	
        .container .three.columns		{ width: 76px; }	
        .container .four.columns		{ width: 108px; }	
        .container .five.columns		{ width: 140px; }	
        .container .six.columns			{ width: 172px; }	
        .container .seven.columns		{ width: 204px; }	
        .container .eight.columns		{ width: 236px; }	
        .container .nine.columns		{ width: 268px; }	
        .container .ten.columns			{ width: 300px; }	
        .container .eleven.columns		{ width: 332px; }	
        .container .twelve.columns		{ width: 364px; }	
        .container .thirteen.columns	{ width: 396px; }	
        .container .fourteen.columns	{ width: 428px; }	
        .container .fifteen.columns		{ width: 460px; }	
        .container .sixteen.columns		{ width: 492px; }	
        .container .seventeen.columns	{ width: 524px; }	
        .container .eighteen.columns	{ width: 556px; }	
        .container .nineteen.columns	{ width: 588px; }	
        .container .twenty.columns		{ width: 620px; }	
        .container .twentyone.columns	{ width: 652px; }	
        .container .twentytwo.columns	{ width: 684px; }	
        .container .twentythree.columns	{ width: 716px; }	
        .container .twentyfour.columns	{ width: 748px; }	
       

        .container .one-third.column    { width: 236px; }
        .container .two-thirds.column   { width: 492px; }
        .container .full-width.column   { width : 748px; }

        /* Offsets */
        .container .offset-by-one			{ padding-left: 32px; }
        .container .offset-by-two			{ padding-left: 64px; }
        .container .offset-by-three			{ padding-left: 96px; }
        .container .offset-by-four			{ padding-left: 128px; }
        .container .offset-by-five			{ padding-left: 160px; }
        .container .offset-by-six			{ padding-left: 192px; }
        .container .offset-by-seven			{ padding-left: 224px; }
        .container .offset-by-eight			{ padding-left: 256px; }
        .container .offset-by-nine			{ padding-left: 288px; }
        .container .offset-by-ten			{ padding-left: 320px; }
        .container .offset-by-eleven		{ padding-left: 352px; }
        .container .offset-by-twelve		{ padding-left: 384px; }
        .container .offset-by-thirteen		{ padding-left: 416px; }
        .container .offset-by-fourteen		{ padding-left: 448px; }
        .container .offset-by-fifteen		{ padding-left: 480px; }
        .container .offset-by-sixteen		{ padding-left: 512px; }
        .container .offset-by-seventeen		{ padding-left: 544px; }
        .container .offset-by-eighteen		{ padding-left: 576px; }
        .container .offset-by-nineteen		{ padding-left: 608px; }
        .container .offset-by-twenty		{ padding-left: 640px; }
        .container .offset-by-twentyone		{ padding-left: 672px; }
        .container .offset-by-twentytwo		{ padding-left: 704px; }
        .container .offset-by-twentythree	{ padding-left: 736px; }

    }


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

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

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        .container .columns,
        .container .column { margin: 10px 0px; }
        .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 .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .seventeen.columns,
        .container .eighteen.columns,
        .container .nineteen.columns,
        .container .twenty.columns,
        .container .twentyone.columns,
        .container .twentytwo.columns,
        .container .twentythree.columns,
        .container .twentyfour.columns,
        .container .one-third.column,
        .container .two-thirds.column,
        .container .full-width.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,
        .container .offset-by-sixteen,
        .container .offset-by-seventeen,
        .container .offset-by-nineteen,
        .container .offset-by-twenty,
        .container .offset-by-twentyone,
        .container .offset-by-twentytwo,
        .container .offset-by-twentythree { padding-left: 0; }

    }


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

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

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .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 .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .seventeen.columns,
        .container .eighteen.columns,
        .container .nineteen.columns,
        .container .twenty.columns,
        .container .twentyone.columns,
        .container .twentytwo.columns,
        .container .twentythree.columns,
        .container .twentyfour.columns        
        .container .one-third.column,
        .container .two-thirds.column, 
        .container .full-width.column { width: 420px; }
    }


/* #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;
    }