/* 
* Chubby Grid 0.1
* By Scott Robbin and Naz Hamid (http://weightshift.com)
* 
* Derived from www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
	

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

	.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
	.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
	.row { margin-bottom: 20px; }
	
	/* Nested Column Classes */
	.column.trim-left, .columns.trim-left 		{ margin-left: 0; }
	.column.trim-right, .columns.trim-right 	{ margin-right: 0; }
	
	/* Base Grid */
	.container .one.column 						{ width: 60px;  }
	.container .two.columns 					{ width: 140px; }
	.container .three.columns 					{ width: 220px; }
	.container .four.columns 					{ width: 300px; }
	.container .five.columns 					{ width: 380px; }
	.container .six.columns 					{ width: 460px; }
	.container .seven.columns 					{ width: 540px; }	
	.container .eight.columns 					{ width: 620px; }
	.container .nine.columns 					{ width: 700px; }
	.container .ten.columns 					{ width: 780px; }	
	.container .eleven.columns 					{ width: 860px; }	
	.container .twelve.columns 					{ width: 940px; }
	
	/* Chubby Grid */
	.container .one.chubby.column 				{ width: 40px; padding-left: 10px; padding-right: 10px; }
	.container .two.chubby.columns 				{ width: 120px; padding-left: 10px; padding-right: 10px; }
	.container .three.chubby.columns 			{ width: 200px; padding-left: 10px; padding-right: 10px; }
	.container .four.chubby.columns 			{ width: 280px; padding-left: 10px; padding-right: 10px; }
	.container .five.chubby.columns 			{ width: 360px; padding-left: 10px; padding-right: 10px; }
	.container .six.chubby.columns 				{ width: 440px; padding-left: 10px; padding-right: 10px; }
	.container .seven.chubby.columns 			{ width: 520px; padding-left: 10px; padding-right: 10px; }	
	.container .eight.chubby.columns 			{ width: 600px; padding-left: 10px; padding-right: 10px; }
	.container .nine.chubby.columns 			{ width: 680px; padding-left: 10px; padding-right: 10px; }
	.container .ten.chubby.columns 				{ width: 760px; padding-left: 10px; padding-right: 10px; }	
	.container .eleven.chubby.columns 			{ width: 840px; padding-left: 10px; padding-right: 10px; }	
	.container .twelve.chubby.columns 			{ width: 920px; padding-left: 10px; padding-right: 10px; }
	
	/* Prefix */	
	.container .prefix-one					    { padding-left: 80px; }
	.container .prefix-one.chubby				{ padding-left: 90px; }
	.container .prefix-two					    { padding-left: 160px; }
	.container .prefix-two.chubby				{ padding-left: 170px; }
	.container .prefix-three					{ padding-left: 240px; }
	.container .prefix-three.chubby				{ padding-left: 250px; }
	.container .prefix-four					    { padding-left: 320px; }
	.container .prefix-four.chubby				{ padding-left: 330px; }
	.container .prefix-five					    { padding-left: 400px; }
	.container .prefix-five.chubby				{ padding-left: 410px; }
	.container .prefix-six					    { padding-left: 480px; }
	.container .prefix-six.chubby				{ padding-left: 490px; }
	.container .prefix-seven					{ padding-left: 560px; }
	.container .prefix-seven.chubby				{ padding-left: 570px; }
	.container .prefix-eight					{ padding-left: 640px; }
	.container .prefix-eight.chubby				{ padding-left: 650px; }
	.container .prefix-nine					    { padding-left: 720px; }
	.container .prefix-nine.chubby				{ padding-left: 730px; }
	.container .prefix-ten					    { padding-left: 800px; }
	.container .prefix-ten.chubby				{ padding-left: 810px; }
	.container .prefix-eleven					{ padding-left: 880px; }
	.container .prefix-eleven.chubby			{ padding-left: 890px; }
	
	/* Suffix */	
	.container .suffix-one					    { padding-right: 80px; }
	.container .suffix-one.chubby				{ padding-right: 90px; }
	.container .suffix-two					    { padding-right: 160px; }
	.container .suffix-two.chubby				{ padding-right: 170px; }
	.container .suffix-three					{ padding-right: 240px; }
	.container .suffix-three.chubby				{ padding-right: 250px; }
	.container .suffix-four					    { padding-right: 320px; }
	.container .suffix-four.chubby				{ padding-right: 330px; }
	.container .suffix-five					    { padding-right: 400px; }
	.container .suffix-five.chubby				{ padding-right: 410px; }
	.container .suffix-six					    { padding-right: 480px; }
	.container .suffix-six.chubby				{ padding-right: 490px; }
	.container .suffix-seven					{ padding-right: 560px; }
	.container .suffix-seven.chubby				{ padding-right: 570px; }
	.container .suffix-eight					{ padding-right: 640px; }
	.container .suffix-eight.chubby				{ padding-right: 650px; }
	.container .suffix-nine					    { padding-right: 720px; }
	.container .suffix-nine.chubby				{ padding-right: 730px; }
	.container .suffix-ten					    { padding-right: 800px; }
	.container .suffix-ten.chubby				{ padding-right: 810px; }
	.container .suffix-eleven					{ padding-right: 880px; }
	.container .suffix-eleven.chubby			{ padding-right: 890px; }
	
	
/* #Tablet (Portrait)
================================================== */	

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

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

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

    	/* Base Grid */
    	.container .one.column 						{ width: 44px;  }
    	.container .two.columns 					{ width: 108px; }
    	.container .three.columns 					{ width: 172px; }
    	.container .four.columns 					{ width: 236px; }
    	.container .five.columns 					{ width: 300px; }
    	.container .six.columns 					{ width: 364px; }
    	.container .seven.columns 					{ width: 428px; }	
    	.container .eight.columns 					{ width: 492px; }
    	.container .nine.columns 					{ width: 556px; }
    	.container .ten.columns 					{ width: 620px; }	
    	.container .eleven.columns 					{ width: 684px; }	
    	.container .twelve.columns 					{ width: 748px; }

    	/* Chubby Grid */
    	.container .one.chubby.column 				{ width: 24px; padding-left: 10px; padding-right: 10px; }
    	.container .two.chubby.columns 				{ width: 88px; padding-left: 10px; padding-right: 10px; }
    	.container .three.chubby.columns 			{ width: 152px; padding-left: 10px; padding-right: 10px; }
    	.container .four.chubby.columns 			{ width: 216px; padding-left: 10px; padding-right: 10px; }
    	.container .five.chubby.columns 			{ width: 280px; padding-left: 10px; padding-right: 10px; }
    	.container .six.chubby.columns 				{ width: 344px; padding-left: 10px; padding-right: 10px; }
    	.container .seven.chubby.columns 			{ width: 408px; padding-left: 10px; padding-right: 10px; }	
    	.container .eight.chubby.columns 			{ width: 472px; padding-left: 10px; padding-right: 10px; }
    	.container .nine.chubby.columns 			{ width: 536px; padding-left: 10px; padding-right: 10px; }
    	.container .ten.chubby.columns 				{ width: 600px; padding-left: 10px; padding-right: 10px; }	
    	.container .eleven.chubby.columns 			{ width: 664px; padding-left: 10px; padding-right: 10px; }	
    	.container .twelve.chubby.columns 			{ width: 728px; padding-left: 10px; padding-right: 10px; }

    	/* Prefix */	
    	.container .prefix-one					    { padding-left: 64px; }
    	.container .prefix-one.chubby				{ padding-left: 70px; }
    	.container .prefix-two					    { padding-left: 128px; }
    	.container .prefix-two.chubby				{ padding-left: 138px; }
    	.container .prefix-three					{ padding-left: 192px; }
    	.container .prefix-three.chubby				{ padding-left: 202px; }
    	.container .prefix-four					    { padding-left: 256px; }
    	.container .prefix-four.chubby				{ padding-left: 266px; }
    	.container .prefix-five					    { padding-left: 320px; }
    	.container .prefix-five.chubby				{ padding-left: 330px; }
    	.container .prefix-six					    { padding-left: 384px; }
    	.container .prefix-six.chubby				{ padding-left: 394px; }
    	.container .prefix-seven					{ padding-left: 448px; }
    	.container .prefix-seven.chubby				{ padding-left: 458px; }
    	.container .prefix-eight					{ padding-left: 512px; }
    	.container .prefix-eight.chubby				{ padding-left: 522px; }
    	.container .prefix-nine					    { padding-left: 556px; }
    	.container .prefix-nine.chubby				{ padding-left: 566px; }
    	.container .prefix-ten					    { padding-left: 640px; }
    	.container .prefix-ten.chubby				{ padding-left: 650px; }
    	.container .prefix-eleven					{ padding-left: 704px; }
    	.container .prefix-eleven.chubby			{ padding-left: 714px; }

    	/* Suffix */	
        .container .suffix-one					    { padding-right: 64px; }
        .container .suffix-one.chubby				{ padding-right: 70px; }
        .container .suffix-two					    { padding-right: 128px; }
        .container .suffix-two.chubby				{ padding-right: 138px; }
        .container .suffix-three					{ padding-right: 192px; }
        .container .suffix-three.chubby				{ padding-right: 202px; }
        .container .suffix-four					    { padding-right: 256px; }
        .container .suffix-four.chubby				{ padding-right: 266px; }
        .container .suffix-five					    { padding-right: 320px; }
        .container .suffix-five.chubby				{ padding-right: 330px; }
        .container .suffix-six					    { padding-right: 384px; }
        .container .suffix-six.chubby				{ padding-right: 394px; }
        .container .suffix-seven					{ padding-right: 448px; }
        .container .suffix-seven.chubby				{ padding-right: 458px; }
        .container .suffix-eight					{ padding-right: 512px; }
        .container .suffix-eight.chubby				{ padding-right: 522px; }
        .container .suffix-nine					    { padding-right: 556px; }
        .container .suffix-nine.chubby				{ padding-right: 566px; }
        .container .suffix-ten					    { padding-right: 640px; }
        .container .suffix-ten.chubby				{ padding-right: 650px; }
        .container .suffix-eleven					{ padding-right: 704px; }
        .container .suffix-eleven.chubby			{ padding-right: 714px; }
	}
	
	

@breakpoint: 500px;

/* Responsive
==================================== */
@media all and (max-width: @breakpoint) {
  .Rtable--collapse  {
    display: block;
    > .Rtable-cell { width: 100% !important; }
    > .Rtable-cell--foot { margin-bottom: 1em; }
  }
}

// Non-Flex modernizer fallback
.no-flexbox .Rtable {
  display: block;
  > .Rtable-cell { width: 100%; }
  > .Rtable-cell--foot { margin-bottom: 1em; }
}

/*	#Mobile (Portrait) 
================================================== */
	
	/* Note: Design for a width of 320px */
	
	@media only screen and (max-width: 767px) {
		.container { width: 300px; }
		.columns, .column { margin: 0; }
		
		.container .one.column,
		.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 { width: 300px; }
		
		.container .one.chubby.column,
        .container .two.chubby.columns,
        .container .three.chubby.columns,
        .container .four.chubby.columns,
        .container .five.chubby.columns,
        .container .six.chubby.columns,
        .container .seven.chubby.columns,
        .container .eight.chubby.columns,
        .container .nine.chubby.columns,
        .container .ten.chubby.columns,
        .container .eleven.chubby.columns,
        .container .twelve.chubby.columns { width: 280px; padding-left: 10px; padding-right: 10px; }
		
		/* Prefix */	
		.container .prefix-one,
        .container .prefix-one.chubby,			
        .container .prefix-two,
        .container .prefix-two.chubby, 					
        .container .prefix-three, 
        .container .prefix-three.chubby,				
        .container .prefix-four, 	
        .container .prefix-four.chubby,				
        .container .prefix-five, 
        .container .prefix-five.chubby,					
        .container .prefix-six, 
        .container .prefix-six.chubby,					
        .container .prefix-seven, 
        .container .prefix-seven.chubby,				
        .container .prefix-eight, 
        .container .prefix-eight.chubby,				
        .container .prefix-nine,
        .container .prefix-nine.chubby, 					
        .container .prefix-ten, 	
        .container .prefix-ten.chubby,				
        .container .prefix-eleven, 	
        .container .prefix-eleven.chubby { padding-left: 0; }		
        
        /* Suffix */	
        .container .suffix-one,
        .container .suffix-one.chubby,			
        .container .suffix-two,
        .container .suffix-two.chubby, 					
        .container .suffix-three, 
        .container .suffix-three.chubby,				
        .container .suffix-four, 	
        .container .suffix-four.chubby,				
        .container .suffix-five, 
        .container .suffix-five.chubby,					
        .container .suffix-six, 
        .container .suffix-six.chubby,					
        .container .suffix-seven, 
        .container .suffix-seven.chubby,				
        .container .suffix-eight, 
        .container .suffix-eight.chubby,				
        .container .suffix-nine,
        .container .suffix-nine.chubby, 					
        .container .suffix-ten, 	
        .container .suffix-ten.chubby,				
        .container .suffix-eleven, 	
        .container .suffix-eleven.chubby { padding-right: 0; }	
				
	}	 
	
	
/* #Mobile (Landscape)
================================================== */

	/* Note: Design for a width of 480px */
	
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.container { width: 420px; }
		.columns, .column { margin: 0; }
		
		.container .one.column,
		.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 { width: 420px; }
		
		.container .one.chubby.column,
        .container .two.chubby.columns,
        .container .three.chubby.columns,
        .container .four.chubby.columns,
        .container .five.chubby.columns,
        .container .six.chubby.columns,
        .container .seven.chubby.columns,
        .container .eight.chubby.columns,
        .container .nine.chubby.columns,
        .container .ten.chubby.columns,
        .container .eleven.chubby.columns,
        .container .twelve.chubby.columns { width: 400px; padding-left: 10px; padding-right: 10px; }
	}
	 
	
/* #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;
	}