@charset "utf-8";
/* CSS Document */
#Fab ul.Fabrics {list-style:none; padding:0px;}
#Fab ul.Fabrics li { float:left; max-width:200px; margin:15px 25px 15px 0px; text-align:center; padding:0px; }
#Fab ul.Fabrics li a {padding:0px; margin:0px;}
#Fab ul.Fabrics li img { width:100%; pointer-events: none; } /* box-shadow:0px 0px 3px #888; */
#Fab ul.Fabrics li .zoom img { box-shadow:none;}
#Fab ul.Fabrics li a.zoom {position:absolute; margin-top:70px; margin-left:120px; padding:10px; z-index:2; display:inline-block;}
#Fab ul.Fabrics li a.zoom img {width:inherit; border-bottom:none; }
#Fab ul.Fabrics li a.zoom2 {position:absolute; margin-top:95px; margin-left:20px; padding:5px 10px; z-index:2; display:inline-block; background-color:rgba(255,255,255,0.8); color:#000; text-transform:uppercase; font-size:11px; border-radius:5px; }

#Fab ul.Fabrics li label {  }
#Fab ul.Fabrics li label div {padding:5px; margin:0px; color:#666; min-height:50px; border-top: 1px solid #eee; font-size:11px;}

#Fab ul.Fabrics li > div { }
#Fab ul.Fabrics li div div {border-top:1px solid #ddd; text-transform:capitalize; color:#666; padding:2px 0px;min-height:35px;}
#Fab ul.Fabrics li div span {color:#ddd;}

#tabs { border-bottom:3px solid #4c4c4c; text-align:center; margin-top:50px;}
#tabs a {background-color:#ddd; color:#444; display:inline-block; padding:8px 2% 5px; margin:0px 0.8%; border-top-left-radius:6px; border-top-right-radius:6px; font-size:1.5rem;}
#tabs a.sel {background-color:#4c4c4c;color:#fff; }
#tabs a .price {color:#4c4c4c; font-size:16px;margin-top:10px;}
#tabs a.sel .price {color:#fff;}
#tabs a:hover { background-color:var(--gold);}
#tabs a:hover .price {color:#000;}
.MORE a {display:block;}

/* ---------- Information Page ---------- */
h4 {font-size:14px; text-align:center; font-weight:normal; text-transform:uppercase}
h2.Products {margin:50px 0px 10px 0px; background-color:#666666; font-size:20px; color:#fff; text-align:center; padding:15px; text-transform:uppercase}
h3.Products {margin:20px 0px 10px 0px; background-color:#ddd; font-size:16px; color:#000;padding:12px; }
.fabprice {float:right; font-size:14px; display:inline-block; margin-right:5px; color:#000;}
.fabprice::before {content:'$';} 
.fabprice span {text-decoration:line-through; color:#a00;}
#bottomsel2 {text-align:center;}
#bottomsel2 ul,#bottomsel ul {list-style:none; margin:0px; padding:0px;}
#bottomsel2 ul li,#bottomsel ul li  {width:90px; display:inline-block; margin:3px;box-shadow:0px 0px 3px #444; text-align:center;}
#bottomsel ul li img,#bottomsel2 ul li img  {width:100%; vertical-align:bottom;}

#bottomsel {position:fixed; left:0px; bottom:0px; width:100%; background-color:#aaa; text-align:left; z-index:5;}
#bottomsel input {float:right; margin-right:10px; margin-top:10px; line-height:1.5; letter-spacing:2px;}
#bottomsel ul {float:left; max-width:calc(100% - 160px);}
#bottomsel li.last {width:auto;box-shadow:none; vertical-align:top; }
#bottomsel li.last a { padding:12px 3px; display:inline-block;  font-size:24px; color:#fff;}
#bottomsel ul li a span {background-color:rgba(255,255,255,0.6); color:#000; position:absolute; margin:5px; padding:5px; border-radius:3px;}


.updown {background-color:#888; width:30px; top:50%; position:fixed; right:0px; z-index:999;}
.updown img {width:100%;}
.colors { width:200px; }
.colors a { display:inline-block; width:30px; height:30px; border:1px solid #ddd;}
.checkout-wrap {margin-left:250px;}

#leftbar { left:-100px; top:100px;width:150px; padding:0px; border-right: 1px solid #ddd; height:auto; background-color:#fff; box-shadow: 2px 2px 2px rgba(220, 220, 220, 0.75); border-left:0px;  position:fixed;transition:left 0.7s ease-in-out; z-index:10;}
#leftbar:hover {left:0px;}
#leftbar ul#NAV {list-style:none; margin:0px; padding:0px; display:table; width:100%; }
#leftbar ul#NAV li { display:table-row; }
#leftbar ul#NAV a { border-bottom:1px solid #f0f0f0;border-right:1px solid #f0f0f0; display:table-cell; vertical-align:middle; height:40px;padding-right:40px; padding-left:10px;  font-size:12px;letter-spacing: 2px; }
#leftbar ul#NAV a span {font-size:10px; color:#BFC1C2; display:block;}
#leftbar ul#NAV a:hover {color:#BFC1C2}
#leftbar ul#NAV a#b1 { background:url(../../images/arrow-up2.png) 105px center no-repeat #aaa; background-size:35px auto;color:#fff;}
#leftbar ul#NAV a#b2 { background:url(images/plain.jpg) 100px center no-repeat; background-size:80px auto;}
#leftbar ul#NAV a#b3 { background:url(images/pinpoint.jpg) 100px center no-repeat; background-size:80px auto; }
#leftbar ul#NAV a#b4 { background:url(images/textured.jpg) 100px center no-repeat; background-size:80px auto; }
#leftbar ul#NAV a#b5 { background:url(images/stripes.jpg) 100px center no-repeat; background-size:80px auto; }
#leftbar ul#NAV a#b6 { background:url(images/checks.jpg) 100px center no-repeat; background-size:80px auto; }
#leftbar ul#NAV a#b7 { background:url(../../images/arrow-down2.png) 105px center no-repeat #aaa; background-size:35px auto; color:#fff; }
#leftbar ul#NAV a#b8 { color:#000; padding-left:inherit; }

#leftbar ul#NAV a#b1 span, #leftbar ul#NAV a#b7 span {color:#fff;}

/*-------- Tree view ---------------*/
#LLEFT {width:250px;}
.treeview, .treeview ul { 
	padding: 0;
	margin: 0;
	list-style: none;
}

.treeview ul {
	background-color: white;
	margin-top: 4px;
}

.treeview {
	background: url(images/treeview-default.gif) -64px -25px no-repeat;

}
/* fix for IE6 */

.treeview li { 
	margin: 0;
	padding: 3px 0pt 3px 16px;
}

.treeview a.selected {
	background-color: #eee;
}

.treeview .hover { color: red; cursor: pointer; }

.treeview li { background: url(images/treeview-default-line.gif) 0 0 no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }

.treeview .expandable-hitarea { background-position: -80px -3px; }

.treeview li.last { background-position: 0 -1766px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(images/treeview-default.gif); }  
.treeview li.lastCollapsable { background-position: 0 -111px }
.treeview li.lastExpandable { background-position: -32px -67px }

.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }
/*---------- Tree View */


.rightcol {
	
	margin-left:60px;
	width:calc(100% - 70px);
	min-height: 500px;
}

.wrap {width:calc(100% - 100px); margin:auto;}

@media (max-width: 1024px){
	.wrap {width:100%; margin:auto;}
	#leftbar {display:block;}
	#Fab ul.Fabrics li { max-width:180px; margin:10px 5px; }
	#Fab ul.Fabrics li a.zoom {margin-top:70px; margin-left:100px; padding:3px;}
	#Fab ul.Fabrics li a.zoom2 {position:absolute; margin-top:70px; margin-left:20px; padding:5px 10px;  }
	#tabs a {padding:8px 10px 5px; margin:0px 5px; }
}
@media (max-width: 770px) {
#tabs {width:100%;margin-left: 0px;}
#tabs a { font-size:14px; }
#tabs a .price {font-size:14px;margin:5px;}

	#bottomsel li {width:70px !important;}
	#bottomsel li.last {width:auto !important;}
	#bottomsel li.last a { padding:6px 2px;}		
	#bottomsel input {margin-right:4px; margin-top:6px; line-height:1; }	
	#leftbar {display:block;}
	.wrap {width:calc(100% - 10px); margin:auto;}
	.rightcol {
		
		width: calc(100% - 50px);
		margin-left:50px;
		min-height:inherit;
	}	

	#Fab ul.Fabrics li { max-width:inherit; margin:10px 5px; }
	#Fab ul.Fabrics li a.zoom {margin-top:70px; margin-left:100px; padding:3px;}

}
@media (max-width: 620px) {
body {margin:0px !important;}
#ww {position:inherit;}
	.rightcol {
		
		width: 100%;
		margin-left:inherit;
		min-height:inherit;
	}	
	#leftbar { left:calc(50% - 160px); top:0px;width:380px; padding:0px; border:none; height:auto; background-color:#fff; box-shadow: -3px 0px 3px -2px rgba(220, 220, 220, 0.75); position: -webkit-sticky; position: sticky; z-index:10; transition:none;}
	#leftbar:hover { right:inherit; left:calc(50% - 160px);}
	#leftbar ul#NAV {list-style:none; margin:0px; padding:0px; display:table; width:100%; }
	#leftbar ul#NAV li { display:inline-block; }
	#leftbar ul#NAV a { height:40px; width:40px; display:inline-block; padding-right:inherit;}
	#leftbar ul#NAV a#b1 { background:url(../../images/arrow-up2.png) center center no-repeat #aaa; background-size:35px auto;color:#fff;}
	#leftbar ul#NAV a#b2 { background:url(images/plain.jpg) left bottom no-repeat; background-size:80px auto;}
	#leftbar ul#NAV a#b3 { background:url(images/pinpoint.jpg) left bottom no-repeat; background-size:80px auto; }
	#leftbar ul#NAV a#b4 { background:url(images/textured.jpg) left bottom no-repeat; background-size:80px auto; }
	#leftbar ul#NAV a#b5 { background:url(images/stripes.jpg) left bottom no-repeat; background-size:80px auto; }
	#leftbar ul#NAV a#b6 { background:url(images/checks.jpg) left bottom no-repeat; background-size:80px auto; }
	#leftbar ul#NAV a#b7 { background:url(../../images/arrow-down2.png) center center no-repeat #aaa; background-size:35px auto; color:#fff; }
	#leftbar ul#NAV a span {display:none;}
	
}
@media (max-width: 480px) {
#leftbar {  left:inherit; top:0px;max-width:380px; width:100%;}
#Fab ul.Fabrics li { float:left; width:calc(50% - 8px); text-align:center;}
#Fab ul.Fabrics li:nth-child(odd) {margin: 8px 8px 8px 0px;}
#Fab ul.Fabrics li:nth-child(even) {margin:8px 0px 8px 8px;}

#Fab ul.Fabrics li label {font-size:12px;}
#Fab ul.Fabrics li a.zoom {margin-top:80px; margin-left:calc(50% - 90px);}	

#tabs {margin-top:20px;}
#tabs a {padding:6px 8px 3px; margin:0px 1px; font-size:10px; }
#tabs a .price {font-size:10px;}

}


@media (max-width: 360px) {
#leftbar {left:20px; width:320px;}
#leftbar ul#NAV a { height:33px; width:33px; }

}

@media (width: 320px) {
#leftbar {left:auto; width:320px;}
#leftbar ul#NAV a { height:31px; width:31px; }
#tabs {margin-top:20px;}
#tabs a {padding:6px 1px 3px; margin:0px 1px; font-size:10px; }
#tabs a .price {font-size:10px;}


#Fab ul.Fabrics li a.zoom {margin-top:60px; }	
#Fab ul.Fabrics li a.zoom2 {position:absolute; margin-top:60px; margin-left:10px; padding:5px;  }

.fabprice {font-size:12px;}
#leftbar ul#NAV a#b1 { width:40px; }
#leftbar ul#NAV a#b7 { width:40px;}
}