/*-----------------------------------------------------------------------------------*/
/*	1. Responsive Grid 
/*-----------------------------------------------------------------------------------*/

.container { 
	margin: 0 auto; 
	max-width: 960px;
	position: relative;
}

.container:after,
.row:after, 
.col:after, 
.clr:after, 
.group:after { 
	content: ""; 
	display: table; 
	clear: both; 
}

.row { padding-bottom: 0em; }	
.col { 
	display: block;
	float: left;
	min-height: 1px;
	width: 100%;
}

/*-----------------------------------------------------------------------------------*/
/*	2. Responsive Grid For Mobile
/*-----------------------------------------------------------------------------------*/

@media ( min-width : 768px ) {
	.span_1 { width: 8.33333333333%; }
	.span_2 { width: 16.6666666667%; }
	.span_3 { width: 25%; }
	.span_4 { width: 33.3333333333%; }
	.span_5 { width: 41.6666666667%; }
	.span_6 { width: 50%; }
	.span_7 { width: 58.3333333333%; }
	.span_8 { width: 66.6666666667%; }
	.span_9 { width: 75%; }
	.span_10 { width: 83.3333333333%; }
	.span_11 { width: 91.6666666667%; }
	.span_12 { width: 100%; }
	
	.gutters .col { margin-left: 2%; }
	.gutters .col:first-child { margin-left: 0; }	
	.gutters .span_1 { width: 6.5%; }
	.gutters .span_2 { width: 15.0%; }
	.gutters .span_3 { width: 23.5%; }
	.gutters .span_4 { width: 32.0%; }
	.gutters .span_5 { width: 40.5%; }
	.gutters .span_6 { width: 49.0%; }
	.gutters .span_7 { width: 57.5%; }
	.gutters .span_8 { width: 66.0%; }
	.gutters .span_9 { width: 74.5%; }
	.gutters .span_10 { width: 83.0%; }
	.gutters .span_11 { width: 91.5%; }
	.gutters .span_12 { width: 100%; }

}

/*-----------------------------------------------------------------------------------*/
/*	3. Media Queries
/*-----------------------------------------------------------------------------------*/

@media screen and (max-width:480px) {
	#searchform input[type="text"] { width: 93%!important; max-width: 96%!important; }
	#searchform input[type="submit"] { float: right!important; }
	#featured-box h1 { font-size: 36px!important; }
}
@media screen and (max-width: 600px) {

	#header *, #footer * { float; none; text-align: center; }
	#primary-area .header-text img { display: inline-block!important; text-align: center; }
	#primary-area .header-cart { display: table!important; float: none!important; margin-left: auto; margin-right: auto; }
	#top-area #searchform { display: block!important; float: none!important; margin: 10px 0; }
	
	#searchform input[type="text"] {  text-align: left!important; width: 97%; }
	
	.sf-menu { display: none; }
	.tinynav { display: block; margin: 10px 0; }
	
	.wp-caption, .wp-caption img { width: auto!important; }
	.wp-caption.alignright, .wp-caption.alignleft { margin: 0 0 20px!important; }
	.alignright, .alignleft { float: none!important; }
	
	img.alignleft { display: block!important; float: none!important; margin-right: 0!important; }
	img.alignright { display: block!important; float: none!important; margin-left: 0!important; }	
	
	.text-left, .text-right  { text-align: left; }
	
	#featured-text { margin: 0 0 20px; padding: 0!important; text-align: center; }
	#featured-text h3 { text-align: center!important; }

}
@media screen and (max-width: 768px) {
	#product-categories-list li { margin: 0 0 2px!important; width: 100%!important; }
	#product-categories-list li a { line-height: 34px!important; min-height: auto!important;  }
}
@media screen and (min-width: 768px) {
	.tinynav { display: none }
	#top-area #searchform { display: block!important; float: none!important; }

	#searchform input[type="text"] {  width: 90.9%; }

        .categories-menu { display: none; }
	.tinynav3 { display: block; margin: 0 0 10px; }

}

@media screen and (min-width: 960px) {
	#top-area #searchform { display: inline-block!important; float: right!important; }
	#top-area #searchform input[type="text"] { width: 200px!important; }
	
	#main { margin: 0 auto; }
	#content-area { margin: 0!important; width: 740px!important; }
	#content-area.fullwidth { width: 100%!important; }
	#sidebar { margin-left: 10px; width: 190px!important; }
	#sidebar.left-sidebar { margin: 0 10px 0 0!important;  }
	#sidebar.right-sidebar { margin-left: 10px; }

    .categories-menu { display: block; }
	.tinynav3 { display: none; }
	#featured-text .col { margin-left: 0!important; }
	#featured-text .span_8 { padding-right: 10px; width: 540px!important; }
	#featured-text .span_2 { width: 100px!important; }

}

@media screen and (min-width: 1040px) {
	#main { width: 1024px; }
}