
.filters {background:#f0f0ec; height:auto; min-height:52px !important; margin:30px auto 16px}
	.filters .left {float:left; margin:11px 0 0 0}
		.filters .left .cell {float:left; margin:0 24px 0 0;}
			.filters .txt {font-size:14px; line-height:29px; font-weight:700; color:#000; float:left; margin:0 9px 0 18px}
			.filters .select-c {float:left}
	.filters .right {float:right; margin:11px 4px 0 0;}
		.filters .right .cell {float:left; margin:0 9px 0 0;}
			.filters .right .grid, .filters .right .grid-on {width:28px; height:28px; display:block; background:url(//lib.store.yahoo.net/lib/swps/grid-layout-off.png) 0 0 no-repeat; cursor:pointer}
				.filters .right .grid:hover, .filters .right .grid-on {background:url(//lib.store.yahoo.net/lib/swps/grid-layout-on.png) 0 0 no-repeat;}
			.filters .right .list, .filters .right .list-on {width:32px; height:28px; display:block; background:url(//lib.store.yahoo.net/lib/swps/list-layout-off.png) 0 0 no-repeat; cursor:pointer}
				.filters .right .list:hover, .filters .right .list-on {background:url(//lib.store.yahoo.net/lib/swps/list-layout-on.png) 0 0 no-repeat;}


.list-layout {}
	.list-layout .cell {margin:0 0 22px;}
		.list-layout .cell .title {height:auto; min-height:38px !important; background:#959593; position: relative; clear:both; margin:0 0 19px 0}
			.list-layout .cell .title h2 {font-size:18px; font-weight:700; color:#fff; line-height:22px; padding:8px 19px;}
			.list-layout .cell .title .close {position:absolute; top:9px; right:13px; width:19px; height:19px; cursor:pointer; background:url(//lib.store.yahoo.net/lib/swps/x-close-btn.png) 0 0 no-repeat;}
			
		.list-layout .cell .image {float:left; width:25.16%; max-width:308px !important; height:auto; max-height:242px !important}
			.list-layout .cell .image img {width:100%; max-width:220px !important; height:auto; max-height:195px !important}
		.list-layout .cell ul.column {float:left; width:20.42%; max-width:250px !important; margin:0 4.08%/*50px*/ 0 0;}
		.list-layout .cell ul.column:nth-child(5) {margin-right:0}
			.list-layout .cell ul.column li {font-size:15px; line-height:25px; font-weight:400; color:#008000; padding:0 0 0 21px; height:50px;}
				.list-layout .cell ul.column li span {color:#222;}
			.list-layout .cell ul.column li.label {font-weight:700; height:25px; background:#f0f0ec; color:#222;}
		
		.list-layout .cell .bottom {clear:both; height:auto; min-height:55px !important; border-top:1px solid #dadad2; border-bottom:1px solid #dadad2;}
			.list-layout .cell .bottom .left {float:left; border-right:1px solid #dadad2; padding:0 15px 0 0; height:auto}
				.list-layout .cell .bottom .left > div {float:left}
			.list-layout .cell .bottom .right {float:right;}
				.list-layout .cell .bottom .right > div {float:left;}
				
				.list-layout .cell .price {text-align:left; padding:0 33px 0 7px; font-size:16px; line-height:55px; font-weight:700; color:#065697;}
					.list-layout .cell .price span {font-size:16px; font-weight:400; color:#222; text-decoration:line-through; padding-left:5px;}
				
				.list-layout .cell .view-more {width:145px; padding:15px 0 0; line-height:25px;}
					.list-layout .cell .view-more a {background:url(//lib.store.yahoo.net/lib/swps/change-color-arrow.png) left no-repeat; display:block; font-size:15px; font-weight:400; color:#222; padding:0 0 0 16px}
				
				.list-layout .cell .tag {font-size:16px; line-height:55px; font-weight:700; color:#1b1b1b; float:left; padding:0 17px 0 0}
				.list-layout .cell .color-options {float:left; margin:14px 0 0}
				.list-layout .cell .selected-color {width:23px; height:23px; border-radius:4px; float:left; margin:3px; display:block}
					.list-layout .cell .selected-color:hover {border:3px solid #c4c4c4; margin:0}
					.list-layout .cell .selected-color-on {border:3px solid #c4c4c4; margin:0}
					.list-layout .cell .black {background:#000;}
					.list-layout .cell .blue {background:#2c85cd;}
					.list-layout .cell .red {background:#b00404;}
					.list-layout .cell .yellow {background:#f3da31;}
				
				.list-layout .qty-and-add {height:auto; margin:8px 12px 0 49px;}
					.list-layout .qty-c {padding:0; height:38px; float:left}
						.list-layout .qty-c .txt {float:left; font-weight:700; font-size:16px; line-height:38px; padding-right:16px;}
						.list-layout .qty-c .qty {float:left;}
					.list-layout .add-to-cart {margin:0 0 0 57px; height:38px; float:left}
						.list-layout .add-to-cart input {width:213px; height:38px; background:#d71921 url(//lib.store.yahoo.net/lib/swps/add-to-cart-bg-54x38.png) left no-repeat; color:#fff; padding-left:76px; font-size:16px; line-height:38px; font-weight:400; text-align:left; text-transform:uppercase; cursor:pointer}
						





.grid-layout {margin:0 auto;}
	.grid-layout .row {position:relative; clear:both; height:409px; margin:0 auto}
	.grid-layout .row-height {height:819px;}
	
	.grid-layout .cell {margin:34px 0 0; float:left; width:25%; max-width:306px !important; height:auto; min-height:375px !important; border-bottom:1px solid #dadad2;}		
		.grid-layout .cell .image {margin:0 auto; text-align:center; width:100%; max-width:280px !important; height:auto; max-height:258px !important;}
			.grid-layout .cell .image img {width:100%; max-width:280px !important; height:auto; max-height:258px !important;}
		.grid-layout .cell .name {margin:0 auto; text-align:center; width:100%; max-width:253px !important; height:auto; min-height:55px !important; border-bottom:1px solid #f0f0ec;}
			.grid-layout .cell .name a {font-size:18px; line-height:18px; font-weight:700; color:#222; padding-top:18px; display:block}
		.grid-layout .cell .view-specs {margin:0 auto; text-align:left; width:110px; height:60px}
		.grid-layout .cell .triangle-bg {background:url(//lib.store.yahoo.net/lib/swps/triangle.png) bottom no-repeat}
			.grid-layout .cell .view-specs a {display:block; background:url(//lib.store.yahoo.net/lib/swps/down-blue-arrow-11x9.png) right no-repeat; font-size:13px; line-height:27px; font-weight:400; color:#222; text-transform:uppercase;}
		
	.grid-layout .info-open-full {position:absolute; top:408px; width:100%; height:auto; min-height:410px !important; background:#f0f0ec; display:none}
		.grid-layout .info-open-full .image {float:left; width:25.32%; max-width:310px !important; height:auto; max-height:410px !important; text-align:center}
			.grid-layout .info-open-full .image img {width:100%; max-width:297px !important; height:auto; max-height:290px !important; padding-top:54px}
		.grid-layout .info-open-full .brief {float:left; padding:54px 0 0 17px;}
			.grid-layout .info-open-full .brief .name {font-size:18px; line-height:20px; font-weight:bold; color:#222; padding:23px 0}
			.grid-layout .info-open-full .brief .price {text-align:left; padding:0; font-size:36px; line-height:36px; font-weight:700; color:#065697;}
			.grid-layout .info-open-full .brief .price span {font-size:20px; line-height:36px; font-weight:400; color:#222; text-decoration:line-through; padding-left:5px;}
			.grid-layout .info-open-full .brief .view-more {width:269px; height:36px; line-height:36px; text-align:center; padding:80px 0 0}
				.grid-layout .info-open-full .brief .view-more a {display:block; background:#2c669f; color:#fff; font-size:14px; font-weight:700;}
			.grid-layout .info-open-full .brief .compare-all-models {font-size:15px; font-weight:400; padding:24px 0 0}
				.grid-layout .info-open-full .brief .compare-all-models a {background:url(//lib.store.yahoo.net/lib/swps/blue-arrow-bullet-7x11.png) right no-repeat; display:block; color:#222; max-width:240px !important;}
					
		.grid-layout .info-open-full .details {float:left; padding:54px 0 0 80px}
			.grid-layout .info-open-full .details ul li {font-size:15px; line-height:25px; font-weight:400; clear:both}
				.grid-layout .info-open-full .details ul li span {width:143px; display:block; float:left}
		.grid-layout .info-open-full .close {float:right; margin:19px 14px 0 0;}






@media screen and (max-width: 1224px) {
	.list-layout .cell ul.column {width:22.87%; max-width:250px !important; margin:0 1.63%/*20px*/ 0 0;}
}



@media screen and (max-width: 1140px) {
	
	.grid-layout .row-height {height:auto; min-height:409px !important;}
	
	.grid-layout .cell .view-specs,
		.grid-layout .info-open-full,
		.grid-layout .info-open-full .image,
		.grid-layout .info-open-full .brief,
		.grid-layout .info-open-full .details {display:none}
		
}


@media screen and (max-width: 1097px) {
	.grid-layout .row {height:auto; min-height:409px !important; width:100%; max-width:612px !important;}
	
		.grid-layout .cell {width:50%; min-height:350px !important; border-bottom:0px;}
}


@media screen and (max-width: 990px) {
	.list-layout .image-and-lists {width:96%; max-width:560px !important; margin:0 auto;}
		.list-layout .cell .image {width:55%;}
		.list-layout .cell .all-columns {float:left; width:44.64%}
			.list-layout .cell ul.column {float: none; clear:both; width:100%; max-width:250px !important; margin:0;}
				.list-layout .cell ul.column li {height:auto; min-height:35px !important;}
		
		.list-layout .cell .bottom {min-height:110px !important;}
			.list-layout .cell .bottom .left {min-height:110px !important;}
			.list-layout .cell .bottom .right {margin-right:10px;}
				.list-layout .tag-and-colors {float:none; clear:both;}
				.list-layout .qty-and-add {float:none; clear:both; margin:0 auto;}
	
}


@media screen and (max-width: 825px) {
	.filters {min-height:100px !important; padding:10px 0;}
		.filters .left {float:none; clear:both; margin:11px auto 0; max-width:710px !important;}
		.filters .right {float:none; clear:both; margin:11px auto 0; padding-top:20px; max-width:80px !important;}
}


@media screen and (max-width: 770px) {
	.list-layout .add-to-cart {margin:0 0 0 20px;}
		.list-layout .add-to-cart input {width:180px; padding-left:60px;}
}


@media screen and (max-width: 740px) {
	.filters {min-height:145px !important;}
	.filters .left {max-width:470px !important;}
		.filters .left .cell {margin:0 24px 10px 0;}
			.filters .txt {margin:0 9px 0 0; width:50px;}
}


@media screen and (max-width: 700px) {
	.list-layout .cell .bottom {min-height:170px !important;}
		.list-layout .cell .bottom .left {float:none; clear:both; border:0; min-height:40px !important; max-width:350px !important; margin:0 auto}
		.list-layout .cell .bottom .right {float:none; clear:both; max-width:350px !important; margin:0 auto;}
}



@media screen and (max-width: 555px) {
	.grid-layout .cell {width:96%; float:none; clear:both; margin:0 auto}
}



@media screen and (max-width: 535px) {
	.filters {min-height:170px !important;}
	.filters .left {max-width:220px !important;}
		.filters .left .cell {margin:0 0 10px 0;}
	.filters .right {padding-top:5px;}
}


@media screen and (max-width: 525px) {
	.list-layout .cell .image {width:96%; float:none; clear:both; margin:0 auto; max-width:220px !important;}
		.list-layout .cell .all-columns {float:none; clear:both; width:96%; max-width:255px !important; margin:0 auto}
}


@media screen and (max-width: 390px) {
	.list-layout .cell .bottom {min-height:215px !important;}
		.list-layout .cell .bottom .right {max-width:184px !important;}
		.list-layout .cell .bottom .left {max-width:180px !important;}
			.list-layout .qty-c {float:none; clear:both; padding-bottom:10px;}
			.list-layout .add-to-cart {margin:0 auto; float:none; clear:both;}
		
		.list-layout .cell .price {font-size:14px; line-height:30px; float:none; clear:both}
			.list-layout .cell .price span {font-size:14px;}
		.list-layout .cell .view-more {padding:0; margin-left:8px; line-height:30px; float:none; clear:both}
				
}