/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


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


/* #Base 960 Grid
================================================== */

    .container { 
		width: 1125px; 
		background-color: #FFFFFF; 
		border: 1px solid #D6D6D7; 
		-webkit-box-shadow: 0 0 3px 2px rgba(51, 51, 51, 0.1); 		/* webkit browser*/ 
		-moz-box-shadow: 0 0 3px 2px rgba(51, 51, 51, 0.1); 		/* firefox */ 
		box-shadow: 0 0 3px 2px rgba(51, 51, 51, 0.1);
	 	margin: 20px auto 20px auto; 
		padding: 10px 0 10px 5px; 
		position: relative;
	}
	
    .container .column,
    .container .columns { 
		margin: 0 5px 5px 5px; background-color:  ;
		padding: 0;
		display: inline; 
		float: left; 
	}
	
	.footer { 
		margin: 0;
		padding: 0;
		display: inline; 
		float: left; 
	}
	
    /* Nested Column Classes */
    .column.alpha, .columns.alpha              	{ margin-left: 0; }
    .column.omega, .columns.omega              	{ margin-right: 0; }
	
	.container .sixteen-plus.columns			{ margin: 0 0 0 -5px; }
	
	.container .footer            				{ margin: 0 0 -5px -5px; }

    /* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: 60px; }
    .container .two.columns                     { width: 130px; }
    .container .three.columns                   { width: 200px; }
    .container .four.columns                    { width: 270px; }
    .container .five.columns                    { width: 340px; }
    .container .six.columns                     { width: 410px; }
    .container .seven.columns                   { width: 480px; }
    .container .eight.columns                   { width: 550px; }
    .container .nine.columns                    { width: 620px; }
    .container .ten.columns                     { width: 690px; }
    .container .eleven.columns                  { width: 760px; } 
    .container .twelve.columns                  { width: 830px; } 
    .container .thirteen.columns                { width: 900px; } 
	.container .fourteen.columns                { width: 970px; } 
    .container .fifteen.columns                 { width: 1042px; }
    .container .sixteen.columns                 { width: 1110px; }
	
	.container .sixteen-plus.columns            { width: 1130px;}
	
    .container .one-third.column                { width: 363.5px; }
    .container .two-thirds.column               { width: 737px; }
	
	.container .footer            				{ width: 1125px; }
	.container .footer .four.columns            { width: 250px; }
	
	.container .footer .columns { 
		margin: 0 0 5px 30px;
		padding: 0;
		display: inline; 
		float: left; 
	}
	
	.container .footer .four.columns:nth-of-type(1) { 
		width: 240px;
		margin: 0 10px 5px 35px;
		padding: 0;
		display: inline; 
		float: left; 
	}
	
	.container .footer .four.columns:nth-of-type(4) {width: 240px;}
	

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

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

    @media only screen and (min-width: 818px) and (max-width: 1155px) {
		
        .container {
			width: 768px;
			padding: 10px 5px 10px 5px;
		}
		
        .container .column,
        .container .columns                         { margin-left: 5px; margin-right: 5px; background-color: ; }
        
		/* Nested Column Classes */
		.column.alpha, .columns.alpha               { margin-left: 0; margin-right: 5px; }
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 5px; }
        .alpha.omega                                { margin-left: 0; margin-right: 0; }
		
		
		.container .sixteen-plus.columns			{ margin: 0 0 0 -5px; }
		
		.container .footer            				{ margin: 0 0 -5px -5px; }
  		
		/* Base Grid */
        .container .one.column,
        .container .one.columns                     { width: 38px; }
        .container .two.columns                     { width: 86px; }
        .container .three.columns                   { width: 134px; }
        .container .four.columns                    { width: 182px;}
        .container .five.columns                    { width: 230px; }
        .container .six.columns                     { width: 278px; }
        .container .seven.columns                   { width: 326px; }
        .container .eight.columns                   { width: 374px; }
        .container .nine.columns                    { width: 422px; }
        .container .ten.columns                     { width: 470px; }
        .container .eleven.columns                  { width: 518px; }
        .container .twelve.columns                  { width: 566px; }
        .container .thirteen.columns                { width: 614px; }
        .container .fourteen.columns                { width: 662px; }
        .container .fifteen.columns                 { width: 710px; }
        .container .sixteen.columns                 { width: 758px; }
		
		.container .sixteen-plus.columns            { width: 778px; }
	
		.container .one-third.column                { width: 236px; }
		.container .two-thirds.column               { width: 492px; }
		
		.container .footer            				{ width: 773px; }
		.container .footer .four.columns            { width: 176px; }


		.container .footer .columns {margin: 0 0 5px 17px;}
		
		.container .footer .four.columns:nth-of-type(1) { 
			width: 173px;
			margin: 0 2px 5px 20px;
		}
		
		.container .footer .four.columns:nth-of-type(4) { 
			width: 147px;
			margin: 0 0 5px 15px;
		}

		
    }


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

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

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


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

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

    @media only screen and (min-width: 480px) and (max-width: 817px) {
		
        .container { 
			width: 420px;
			margin: 0 auto 10px auto;
			padding: 0;
		 }
		 
        .container .columns,
        .container .column { margin: 0 ; background-color: ; }
		
		
		.container .sixteen-plus.columns			{ margin: 0; }
		
		.container .footer            				{ margin: 0 0 -15px 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 .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
		
		.container .sixteen-plus.columns,       
			
        .container .one-third.column,
        .container .two-thirds.column {width: 420px;}
		
		.container .footer,           				
		.container .footer .four.columns {width: 415px;}  
		
		
		.container .footer .four.columns:nth-of-type(n) { 
			width: 390px !important;
			margin: 0 0 15px 15px;
			padding: 0;
			display: inline;
			float: left; 
		}
				
		.container .footer .four.columns:nth-of-type(4) {margin: 0 0 0 15px;}
			
    }
	

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

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

    @media only screen and (max-width: 479px) {
		
      /*   .container { 
			width: 410px;
			margin: 0 auto 10px auto;
			padding: 0;
		 } 
		 
		 
        .container .columns,
        .container .column { margin: 0 ; background-color: ; }
		
		
		.container .sixteen-plus.columns			{ margin: 0; }
		
		.container .footer            				{ margin: 0 0 -15px 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 .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
		
		.container .sixteen-plus.columns,       
			
        .container .one-third.column,
        .container .two-thirds.column {width: 410px;}
		
		.container .footer,           				
		.container .footer .four.columns {width: 405px;}  
		
		
		.container .footer .four.columns:nth-of-type(n) { 
			width: 390px !important;
			margin: 0 0 15px 15px;
			padding: 0;
			display: inline;
			float: left; 
		}
				
		.container .footer .four.columns:nth-of-type(4) {margin: 0 0 0 15px;} */
		
		
		 .container { 
			width: 100%;
			border: 0;
			box-shadow: none !important;
			margin: 0 0 10px 0;
			padding: 0 !important;
		 }
		 
        .container .columns,
        .container .column { margin: 0;}
		
		.container .sixteen-plus.columns {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 .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
		
		.container .sixteen-plus.columns,       
			
      	.container .one-third.column,
        .container .two-thirds.column {width: 100%;}
		
		
		
		.container .footer {
			width: 100%;
			margin: 0 0 -15px 0 !important;
		}
		
		.container .footer .columns {margin: 0;}
		
			.container .footer .four.columns {
				width: calc(100% - 40px);
				margin: 0 20px;
			}  
		
				.container .footer .four.columns:nth-of-type(1),
				.container .footer .four.columns:nth-of-type(4),
				.container .footer .four.columns:nth-of-type(n) { 
					width: calc(100% - 40px);
					margin: 0 20px;
					padding: 0 !important;
					display: inline;
					float: left;
				}
		
		/*
		
		.container .footer .four.columns:nth-of-type(4) {width: 100%;}
		
		.container .footer .four.columns:nth-of-type(n) { 
			width: width: 100%; !important;
			margin: 0 0 15px 0;
			padding: 0;
			display: inline;
			float: left; 
		}
				
		.container .footer .four.columns:nth-of-type(4) {margin: 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;
    }