/* Table of Contents
==================================================
    #Base 960 Grid
	#Base 960 Grid Custom styles    
    #Tablet (Portrait)
    #Mobile (Portrait) 
    #Mobile (Landscape)
    #Clearing */
   
/* #Base 960 Grid 
================================================== */
	#content,
	aside#sidebar 										   { position:relative;padding:30px 0; }
	
    .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.alpha, .columns.alpha               		   { margin-left: 0; }
    .column.omega, .columns.omega               		   { margin-right: 0; }
    
    /* Base Grid */
    .width-960 .container .one.column                      { width: 60px; }
	.width-960 .container .two.columns                     { width: 140px; }
	.width-960 .container .three.columns                   { width: 220px; }
	.width-960 .container .four.columns                    { width: 300px; }
	.width-960 .container .five.columns                    { width: 380px; }
	.width-960 .container .six.columns                     { width: 460px; }
	.width-960 .container .seven.columns                   { width: 540px; }
	.width-960 .container .eight.columns                   { width: 620px; }
	.width-960 .container .nine.columns                    { width: 700px; }
	.width-960 .container .ten.columns                     { width: 780px; }
	.width-960 .container .eleven.columns                  { width: 860px; }
	.width-960 .container .twelve.columns                  { width: 940px; }
	
	.width-960 .container .nine.columns .six.columns       { width: 340px; }
	.width-960 .container .nine.columns .twelve.columns    { width: 700px; }
	.width-960 .container .nine.columns .three.columns     { width: 160px; }
	.width-960 .container .nine.columns .four.columns      { width: 220px; }
	
    
/* #Base 960 Grid Custom styles
================================================== */
	
	.nine.columns ul.products.list li.product 			   { width:660px; }
	.twelve.columns ul.products.list li.product 		   { width:900px; }
	.custom-wrapper li 									   { margin:10px 20px 10px 0;padding:19px; }
	
	.category-img {width: 180px; margin: 0 20px 20px 0; padding: 19px;}
	
	.pagination, 
	.navigation {
		width:100%;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;
	}
	
	
	#respond input[type=text]{ width:680px; margin-right:20px; }
	#contactForm input[type=text]{ width:70%;}
	#respond textarea{width:90%; height:150px;}
	#contactForm textarea {width:90%; height:150px;}
		
    .boxed-container {width: 1020px;margin: 20px auto;}


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