/* Table of Contents
==================================================
    #Base 960 Grid
	#Base 960 Grid Custom styles    
    #Tablet (Portrait)
    #Mobile (Portrait) 
    #Mobile (Landscape)
    #Clearing */
   
/* #Base 960 Grid 
================================================== */
	#content { position:relative;}
	header .container {z-index:30; position: initial !important;}
	.container {z-index:2; }
    .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;}
	
	.nine.columns .pagination, .nine.columns .navigation {width:660px;}
	.twelve.columns .pagination, .twelve.columns .navigation {width:900px;}
	
	#respond input[type=text]{ width:680px; margin-right:20px; }
	#contactForm input[type=text]{ width:440px;}
	#respond textarea{width:680px; height:150px;}
	#contactForm textarea {width:920px; height:150px;}
	
	.flexslider ul.products li.last { margin-right: 20px !important;}
	
    .boxed-container {width: 1020px;margin: 20px auto;}


/* #Clearing
================================================== */
	li.three.columns.last + li,
	li.four.columns.last + li,
	li.six.columns.last + li { clear:both;}
	
    /* 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;}