/*
* Water V1.0
* Copyright 2011, John Wai
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 11/12/2012
*/


/* Table of Contents
==================================================
    #Set up Water Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */



/* #Set up Water Grid
================================================== */

    .pool                               { position: relative; width: 100%; margin: 0 auto; padding: 0; z-index: 1;}
    .pool .fill													{ float: left; display: inline; }
    .row                                { margin-bottom: 20px; }
    .gutter															{ padding: 20px; }
    .pool img														{ max-width:100%; height:auto; }
    
    /* Base Grid */
    .pool .one.fill											{ width: 6.25%;  }
    .pool .two.fill                     { width: 12.5%; }
    .pool .three.fill                   { width: 18.75%; }
    .pool .four.fill                    { width: 25%; }
    .pool .five.fill                    { width: 31.25%; }
    .pool .six.fill                     { width: 37.25%; }
    .pool .seven.fill                   { width: 43.75%; }
    .pool .eight.fill                   { width: 50%; }
    .pool .nine.fill                    { width: 56.25%; }
    .pool .ten.fill                     { width: 62.5%; }
    .pool .eleven.fill                  { width: 68.75%; }
    .pool .twelve.fill                  { width: 75%; }
    .pool .thirteen.fill                { width: 81.25%; }
    .pool .fourteen.fill                { width: 87.25%; }
    .pool .fifteen.fill                 { width: 93.75%; }
    .pool .sixteen.fill                 { width: 100%; }

    .pool .one-half.fill								{ width: 50%; }	
    .pool .one-third.fill               { width: 33.3%; }
    .pool .one-fourth.fill              { width: 25%; }
    .pool .one-fifth.fill               { width: 20%; }
    .pool .one-sixth.fill               { width: 16.6667%; }
    .pool .one-eighth.fill              { width: 12.5%; }
    .pool .one-tenth.fill               { width: 10%; }
    .pool .two-thirds.fill              { width: 66.6667%; }
    .pool .two-fifth.fill               { width: 40%; }
    .pool .three-fifth.fill             { width: 60%; }
    .pool .four-fifth.fill              { width: 80%; }
    .pool .three-fourths.fill           { width: 75%; }

    /* Offsets */
    .pool .offset-by-one                { padding-left: 6.25%;  }
    .pool .offset-by-two                { padding-left: 12.5%; }
    .pool .offset-by-three              { padding-left: 18.75%; }
    .pool .offset-by-four               { padding-left: 25%; }
    .pool .offset-by-five               { padding-left: 31.25%; }
    .pool .offset-by-six                { padding-left: 37.25%; }
    .pool .offset-by-seven              { padding-left: 43.75%; }
    .pool .offset-by-eight              { padding-left: 50%; }
    .pool .offset-by-nine               { padding-left: 56.25%; }
    .pool .offset-by-ten                { padding-left: 62.5%; }
    .pool .offset-by-eleven             { padding-left: 68.75%; }
    .pool .offset-by-twelve             { padding-left: 75%; }
    .pool .offset-by-thirteen           { padding-left: 81.25%; }
    .pool .offset-by-fourteen           { padding-left: 87.25%; }
    .pool .offset-by-fifteen            { padding-left: 93.75%; }



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

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

@media only screen and (min-width: 768px) and (max-width: 959px) {
  	.pool                               { width: 100%; }     
	
		.pool .one.fill											{ width: 6.25%;  }
		.pool .two.fill                     { width: 12.5%; }
		.pool .three.fill                   { width: 18.75%; }
		.pool .four.fill                    { width: 25%; }
		.pool .five.fill                    { width: 31.25%; }
		.pool .six.fill                     { width: 37.25%; }
		.pool .seven.fill                   { width: 43.75%; }
		.pool .eight.fill                   { width: 50%; }
		.pool .nine.fill                    { width: 56.25%; }
		.pool .ten.fill                     { width: 62.5%; }
		.pool .eleven.fill                  { width: 68.75%; }
		.pool .twelve.fill                  { width: 75%; }
		.pool .thirteen.fill                { width: 81.25%; }
		.pool .fourteen.fill                { width: 87.25%; }
		.pool .fifteen.fill                 { width: 93.75%; }
		.pool .sixteen.fill                 { width: 100%; }

		.pool .one-half.fill								{ width: 50%; }	
    .pool .one-third.fill               { width: 33.3%; }
    .pool .one-fourth.fill              { width: 25%; }
    .pool .one-fifth.fill               { width: 20%; }
    .pool .one-sixth.fill               { width: 16.6667%; }
    .pool .one-eighth.fill              { width: 12.5%; }
    .pool .one-tenth.fill               { width: 10%; }
    .pool .two-thirds.fill              { width: 66.6667%; }
    .pool .two-fifth.fill               { width: 40%; }
    .pool .three-fifth.fill             { width: 60%; }
    .pool .four-fifth.fill              { width: 80%; }
    .pool .three-fourths.fill           { width: 75%; }

		/* Offsets */
		.pool .offset-by-one                { padding-left: 6.25%;  }
		.pool .offset-by-two                { padding-left: 12.5%; }
		.pool .offset-by-three              { padding-left: 18.75%; }
		.pool .offset-by-four               { padding-left: 25%; }
		.pool .offset-by-five               { padding-left: 31.25%; }
		.pool .offset-by-six                { padding-left: 37.25%; }
		.pool .offset-by-seven              { padding-left: 43.75%; }
		.pool .offset-by-eight              { padding-left: 50%; }
		.pool .offset-by-nine               { padding-left: 56.25%; }
		.pool .offset-by-ten                { padding-left: 62.5%; }
		.pool .offset-by-eleven             { padding-left: 68.75%; }
		.pool .offset-by-twelve             { padding-left: 75%; }
		.pool .offset-by-thirteen           { padding-left: 81.25%; }
		.pool .offset-by-fourteen           { padding-left: 87.25%; }
		.pool .offset-by-fifteen            { padding-left: 93.75%; }
}


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

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

@media only screen and (min-width: 320px) and (max-width: 767px) {
		.pool { width: 100%; }	
	
		.pool .one.fill,
		.pool .two.fill,
		.pool .three.fill,
		.pool .four.fill,
		.pool .five.fill,
		.pool .six.fill,
		.pool .seven.fill,
		.pool .eight.fill,
		.pool .nine.fill,
		.pool .ten.fill,
		.pool .eleven.fill,
		.pool .twelve.fill,
		.pool .thirteen.fill,
		.pool .fourteen.fill,
		.pool .fifteen.fill,
		.pool .sixteen.fill,
		.pool .one-half.fill,
		.pool .one-third.fill,
		.pool .one-fourth.fill,
		.pool .one-fifth.fill,
		.pool .one-sixth.fill,
		.pool .one-eighth.fill,
		.pool .one-tenth.fill,
		.pool .two-thirds.fill,
		.pool .two-fifth.fill,
		.pool .three-fifth.fill,
		.pool .four-fifth.fill,
		.pool .three-fourths.fill{ width: 100%; }

		/* Offsets */
		.pool .offset-by-one,
		.pool .offset-by-two,
		.pool .offset-by-three,
		.pool .offset-by-four,
		.pool .offset-by-five,
		.pool .offset-by-six,
		.pool .offset-by-seven,
		.pool .offset-by-eight,
		.pool .offset-by-nine,
		.pool .offset-by-ten,
		.pool .offset-by-eleven,
		.pool .offset-by-twelve,
		.pool .offset-by-thirteen,
		.pool .offset-by-fourteen,
		.pool .offset-by-fifteen { padding-left: 0; }

}

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

@media only screen and (max-width: 319px) {
		.pool { width: 100%; }		
	
		.pool .one.fill,
		.pool .two.fill,
		.pool .three.fill,
		.pool .four.fill,
		.pool .five.fill,
		.pool .six.fill,
		.pool .seven.fill,
		.pool .eight.fill,
		.pool .nine.fill,
		.pool .ten.fill,
		.pool .eleven.fill,
		.pool .twelve.fill,
		.pool .thirteen.fill,
		.pool .fourteen.fill,
		.pool .fifteen.fill,
		.pool .sixteen.fill,
		.pool .one-half.fill,
		.pool .one-third.fill,
		.pool .one-fourth.fill,
		.pool .one-fifth.fill,
		.pool .one-sixth.fill,
		.pool .one-eighth.fill,
		.pool .one-tenth.fill,
		.pool .two-thirds.fill,
		.pool .two-fifth.fill,
		.pool .three-fifth.fill,
		.pool .four-fifth.fill,
		.pool .three-fourths.fill{ width: 100%; }
		
		/* Offsets */
		.pool .offset-by-one,
		.pool .offset-by-two,
		.pool .offset-by-three,
		.pool .offset-by-four,
		.pool .offset-by-five,
		.pool .offset-by-six,
		.pool .offset-by-seven,
		.pool .offset-by-eight,
		.pool .offset-by-nine,
		.pool .offset-by-ten,
		.pool .offset-by-eleven,
		.pool .offset-by-twelve,
		.pool .offset-by-thirteen,
		.pool .offset-by-fourteen,
		.pool .offset-by-fifteen { padding-left: 0; }

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

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

@media only screen and (min-width: 480px) and (max-width: 767px) {
		.pool { width: 100%; }		
	
		.pool .one.fill,
		.pool .two.fill,
		.pool .three.fill,
		.pool .four.fill,
		.pool .five.fill,
		.pool .six.fill,
		.pool .seven.fill,
		.pool .eight.fill,
		.pool .nine.fill,
		.pool .ten.fill,
		.pool .eleven.fill,
		.pool .twelve.fill,
		.pool .thirteen.fill,
		.pool .fourteen.fill,
		.pool .fifteen.fill,
		.pool .sixteen.fill,
		.pool .one-half.fill,
		.pool .one-third.fill,
		.pool .one-fourth.fill,
		.pool .one-fifth.fill,
		.pool .one-sixth.fill,
		.pool .one-eighth.fill,
		.pool .one-tenth.fill,
		.pool .two-thirds.fill
		.pool .two-fifth.fill,
		.pool .three-fifth.fill,
		.pool .four-fifth.fill,
		.pool .three-fourths.fill{ width: 100%; }

		/* Offsets */
		.pool .offset-by-one,
		.pool .offset-by-two,
		.pool .offset-by-three,
		.pool .offset-by-four,
		.pool .offset-by-five,
		.pool .offset-by-six,
		.pool .offset-by-seven,
		.pool .offset-by-eight,
		.pool .offset-by-nine,
		.pool .offset-by-ten,
		.pool .offset-by-eleven,
		.pool .offset-by-twelve,
		.pool .offset-by-thirteen,
		.pool .offset-by-fourteen,
		.pool .offset-by-fifteen { padding-left: 0; }
}


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