html, body {
	background-image: url(bgr.png); background-repeat: repeat; background-position: 0 0;
}

#site {min-height: 100%; background: url(footer_b.png) repeat-y 50% 0;}

.wrapper {width: 95%; max-width: 1000px;}

/* :: Header 
===================================================================================================== :: */

#header {padding-top: 1px; background: url(page_b.png) repeat-y 50% 0;}

	#intro {background: url(header_b.jpg) no-repeat 50% 0;}

		#site-logo {float: left; width: 70%; max-width: 328px; height: auto; margin: 0; padding: 0;}
		
		#site-logo a {display: block;}
		
		#header .fR p {
			margin: 15px 0 0; 
			font-size: 1.2em; line-height: 1.4em; font-style: italic; text-align: right;
			text-shadow: 1px 0 5px #fff;
		}
		
		#header .social {float: right; margin: 18px 0 0 24px;}
			.social .icon a {display: inline-block; position: relative; width: 32px; height: 32px;}
			.social .icon a:hover {top: 1px; left: 1px;}
			.social .icon .fb {margin-bottom: 16px; background: url(icon_fb.png) no-repeat 0 0;}
			.social .icon .g-plus {background: url(icon_g+.png) no-repeat 0 0;}
				.social .icon span {display: none;}

/* :: Navigations 
===================================================================================================== :: */

/* :: Horizontal Navigation :: */

.nav-x {list-style: none; padding: 0;}

	.nav-x > li {float: left;}
	
	.nav-x.fL > li {
		margin: 0 1em .3em 0; padding-left: 1em;
		border-left: 1px solid;
	}
	
	.nav-x.fR > li {
		margin: 0 0 .3em 1em; padding-right: 1em;
		border-right: 1px solid;
	}
	
	.nav-x.fL > li:first-child {padding-left: 0; border: none;}
	.nav-x.fR > li:last-child {padding-right: 0; border: none;}
	
		.nav-x > li > a {
			display: block;
			margin-top: -.2em; padding: .2em .1em;
			text-decoration: underline;
		}
		.nav-x > li > a:hover {text-decoration: none;}
		
		.nav-x li.current a {font-weight: bold; text-decoration: none;}

/* :: Vertical Navigation :: */

.nav-y {margin: 0; padding: 0;}

	.nav-y li {margin: 0; padding: 0;}
	
		.nav-y a {display: block; position: relative;}

/* :: Main Navigation :: */

#site-nav {margin: 12px 0; border-style: solid; border-width: 4px 0 1px; cursor: default;}

	#main-nav {margin: 0; padding: 0; text-align: center;}
	
		#main-nav li {display: inline-block; margin: 0;}

			#main-nav a {
				position: relative;
				display: inline-block; padding: .7em;
				font-size: 1.2em; text-decoration: none;
				
				-webkit-transition: all 0.3s ease;
				-moz-transition: all 0.3s ease;
				-o-transition: all 0.3s ease;
				transition: all 0.3s ease;
			}
			
			#main-nav a:hover, #main-nav .current a {background-image: url(header_b.jpg); background-repeat: no-repeat; background-position: 50% 70%;}
			
/* :: Sub navigation :: */

#main-nav .sub-menu {position: relative;}

#main-nav .sub-menu > a {display: inline-block;}

	#main-nav .sub-menu ul {
		position: absolute; top: 2.6em; left: 0; z-index: 1000;
		width: 180px; padding: .7em 0;
		list-style: none; visibility: hidden;
		border: 1px solid;
		box-shadow: 2px 3px 4px rgba(0,0,0,.5);
	}
	
		#main-nav .sub-menu li {float: none; margin: 0; padding: 0; text-align: left;}
			
		#main-nav ul li.hovering ul, #main-nav ul li.sub-menu:hover ul {visibility: visible;}
		
			#main-nav .sub-menu li a {
				display: block; float: none; padding: .2em 16px; 
				font-size: 1em; text-decoration: none; cursor: pointer;
				background: none;
				border-style: solid; border-width: 1px 0; border-color: transparent;
			}

/* :: Main and Content 
===================================================================================================== :: */

#main {padding: 0 0 1.5em; background: url(page_b.png) repeat-y 50% 0;}

	#content {position: relative; min-height: 40em;}

img {max-width: 100%; height: auto;}
.img-not-resp {max-width: none;}

/* :: Search Bar :: */

.search-bar {min-height: 4.3em; margin-bottom: 20px;}

.search-bar .inner {border-style: solid; border-width: 0 2px 0 0;}

	.search-bar h4 {
		position: relative; 
		margin: 0 3em 0 0; padding: 0 3%; line-height: 3.5em;
	}
	.search-bar h4:before {
		content: ""; display: block;
		position: absolute; top: 0; right: -1.7em; z-index: 900;
		border-style: solid; border-width: 1.75em 0 1.75em 1.75em; 
		border-color: transparent #81c96b; border-color: rgba(255,255,255,0) #81c96b;
	}
	
	.search-bar label {display: block; margin: 0;}
	.search-bar .txt {width: 50%;}

/* :: Help :: */

.help-tooltip {display: inline-block;}

	.icon-help {position: relative;}

		.icon-help span {
			display: inline-block;
			width: 14px; margin: 0 .3em;
			line-height: 14px; text-align: center; font-size: .85em;
			color: black;
			background: #f1d40d;
			border: 1px solid #f1a932;
			cursor: help;
			border-radius: 50%;
			box-shadow: 1px 1px 3px rgba(0,0,0,.7);
		}
	
		.help-text {
			position: absolute; top: -10px; left: 30px; z-index: 990;
			width: 180px; padding: .8em 1em;
			font-size: .85em;
			border: 1px solid #ccc;
			visibility: hidden; opacity: 0;
			background-color: white;
			box-shadow: 1px 1px 3px rgba(0,0,0,.5);
			-webkit-transition: all 0.1s ease;
			-moz-transition: all 0.1s ease;
			-o-transition: all 0.1s ease;
			transition: all 0.1s ease;
		}
			.help-text:before {
				content: ""; position: absolute; top: 15px; left: -8px;
				border-style: solid; border-width: 8px 8px 8px 0; border-color: transparent #ccc transparent transparent;
			}
		.icon-help:hover .help-text {visibility: visible; opacity: 1;}

/* :: Cart Bar :: */

.cart-bar {float: right; height: 4.3em; overflow: hidden;}

	.cart-bar a {
		display: block; line-height: 4.3em; text-align: center;
		background: url(icon_cart.png) no-repeat 98% 0;
		
		-webkit-transition: background 0.2s ease;
		-moz-transition: background 0.2s ease;
		-o-transition: background 0.2s ease;
		transition: background 0.2s ease;
	}
	.cart-bar a:hover {background-position: 85% 0;}


/* :: Item Filter :: */

.item-filter {
	position: relative; clear: both; float: left; width: 100%; padding: 0;
	background: url(item_filter_bgr.png) no-repeat 24% 50%;
}
	.item-filter div {float: right; width: 57%; max-width: 535px; box-sizing: border-box;}

.item-filter-search {padding: 10px;}

	.item-filter p {
		position: absolute; width: 40%; top: 50%; left: 0; z-index: 990; margin-top: -80px; padding: 60px 0 60px 220px;
		background: url(item_filter_bgr_2.png) no-repeat 0 0;
		box-sizing: border-box;
	}
	
	#site .item-filter ul {float: right; list-style: none; margin: 0; padding: 10px 0 0;}
	#site .item-filter-search ul {list-style: none; margin: 0; padding: 0;}
	
		#site .item-filter li, #site .item-filter-search li {float: left; margin: 0 10px 10px 0; padding: 0;}
		
			.item-filter a, .item-filter-search a {display: block; float: left; width: 97px; height: 60px;}
			.item-filter-search a {width: 111px;}

.item-filter li a, .item-filter-search li a {background-repeat: no-repeat; background-position: 50% 50%;}

.item-filter #cat-1 a, .item-filter-search #cat-1 a {background-image: url(logos/brother.png);}
.item-filter #cat-2 a, .item-filter-search #cat-2 a {background-image: url(logos/canon.png);}
.item-filter #cat-12 a, .item-filter-search #cat-12 a {background-image: url(logos/dell.png);}
.item-filter #cat-20 a, .item-filter-search #cat-20 a {background-image: url(logos/epson.png);}
.item-filter #cat-3 a, .item-filter-search #cat-3 a {background-image: url(logos/hp.png);}
.item-filter #cat-24 a, .item-filter-search #cat-24 a {background-image: url(logos/ibm.png);}
.item-filter #cat-21 a, .item-filter-search #cat-21 a {background-image: url(logos/konica_minolta.png);}
.item-filter #cat-10 a, .item-filter-search #cat-10 a {background-image: url(logos/kyocera_mita.png);}
.item-filter #cat-5 a, .item-filter-search #cat-5 a {background-image: url(logos/lexmark.png);}
.item-filter #cat-26 a, .item-filter-search #cat-26 a {background-image: url(logos/nashuatec.png);}
.item-filter #cat-27 a, .item-filter-search #cat-27 a {background-image: url(logos/oki.png);}
.item-filter #cat-17 a, .item-filter-search #cat-17 a {background-image: url(logos/panasonic.png);}
.item-filter #cat-23 a, .item-filter-search #cat-23 a {background-image: url(logos/philips.png);}
.item-filter #cat-19 a, .item-filter-search #cat-19 a {background-image: url(logos/ricoh.png);}
.item-filter #cat-4 a, .item-filter-search #cat-4 a {background-image: url(logos/samsung.png);}
.item-filter #cat-28 a, .item-filter-search #cat-28 a {background-image: url(logos/tally_genicom.png);}
.item-filter #cat-7 a, .item-filter-search #cat-7 a {background-image: url(logos/toshiba.png);}
.item-filter #cat-6 a, .item-filter-search #cat-6 a {background-image: url(logos/xerox.png);}

	.item-filter li a span, .item-filter-search li a span {display: none;}


/* :: Pagination :: */

.pagination {clear: both; margin: 2em 0; padding: 1em 1em .5em; border-style: solid; border-width: 1px 0; cursor: default;}

	.pagination .fL {margin: -.1em 2em 0 0;}

		.pagination strong, .pagination a, .pagination span {display: inline-block; margin: 0 0 .3em; padding: .2em .3em;}
		
		.pagination strong {position: relative; padding: .2em .5em; box-shadow: 0 1px 2px #000;}
		
		.pagination .prev-link, .pagination .next-link {
			position: relative; top: .1em; 
			font-size: 1.8em; font-weight: bold; line-height: .3em; text-decoration: none;
		}
		.pagination .prev-link {margin-right: .5em; padding-right: .7em; border-right: 1px dotted;}
		.pagination .next-link {margin-left: .5em; padding-left: .7em; border-left: 1px dotted;}

/* :: Breadcrumbs :: */

.breadcrumb {clear: both; margin-bottom: 10px; padding: 10px 20px;}
	.breadcrumb * {margin-right: .3em;}
	
	.breadcrumb strong {margin: 0 -.3em 1em 1em; padding: .2em .5em;}


/* :: Item List :: */

.item-list {margin: 1em 0;}

	.item-list dl {
		position: relative; padding: 1em; margin: 0 0 .3em; 
		border-left: 3px solid;
	}

		.item-list dd.img {float: left; width: 20%; text-align: center;}
			.item-list dd.img a {display: block; text-decoration: none;}
				.item-list dd.img img {float: none; margin: 0; border: 1px solid;}
	
		#content .item-list .info {float: right; position: relative; width: 77%; margin: 0; padding: 0;}
			#content .item-list .info li {margin: 0; padding-left: 0;}
		
			.item-list .info h5 {margin: 0 0 .2em; font-size: 1.2em;}
			
			.item-list p {margin: 0;}
			.item-list p.item-cat {font-size: .9em; margin-bottom: .5em;}
			
			#content .list {
				display: grid; grid-template-columns: 1fr 1fr; gap: .5em;
				list-style: none; margin: .5em 0 0;
			}
			#content .item-list .list li {padding: .5em; border-radius: .5em;}
			
				.item-list .item-price, .item-box .item-price,
				.convert-price-to {font-weight: bold; font-size: 1.1em;}
				
				/*.item-list .item-price::after, .item-box .item-price::after {content: "/"}*/
				.item-list .item-price::after {margin-left: .3em;}
				
			.promo .info:after {
				content: ""; position: absolute; top: -10px; right: -10px;
				display: block; width: 40px; height: 40px;
				background: url(icon_promo.png) no-repeat 0 0;
			}
			
			.more {
				position: relative; 
				display: inline-block; 
				margin: 0 3em 0 0; padding: 0 10px 0 20px; line-height: 2.6em;
			}
			.more:before {
				content: ""; display: block;
				position: absolute; top: 0; right: -1.3em; z-index: 900;
				border-style: solid; border-width: 1.3em 0 1.3em 1.3em; 
				border-color: transparent #81c96b; border-color: rgba(255,255,255,0) #81c96b;
			}

/* :: Item Description :: */

.item {padding-top: 2em;}
	.img-th {float: left; width: 56%; margin: -1em 2em 1.5em 0;}
	.item p {margin-bottom: .5em;}

.item-box {clear: both; margin: 2px 0;}

	.item-box dl {padding: 0 10px 10px; border-left: 3px solid;}
	
		.item-box dt {position: relative; margin: 0 0 15px; padding: 6px 0 0; font-size: 1.1em;}
		
		.item-box dl dt:after {
			content: "";
			position: absolute; top: -5px; right: -5px;
			display: block; width: 28px; height: 28px;
			background-image: url(grd_cart.png); background-repeat: repeat-x;
			border: 2px solid; border-radius: 50%;
			box-shadow: 1px 1px 5px #bbb;
		}
		
		.item-box dl.black dt:after {background-position: 0 -600px;}
		.item-box dl.cyan dt:after {background-position: 0 0;}
		.item-box dl.magenta dt:after {background-position: 0 -200px;}
		.item-box dl.yellow dt:after {background-position: 0 -400px;}
		.item-box dl.color dt:after {background-position: 0 -800px;}
		.item-box dl.all dt:after {background-position: 0 -1000px;}
				
		.item-box dd {float: right; width: 75%;}
		
		.item-box dd.img {float: left; width: 20%;}
			.item-box dd.img img {border: 1px solid;}
		
		#content .item-box ul.list {list-style: none; margin: 0 0 .5em; padding: 0;}
		
			#content .item-box ul.list li {
				margin: 0 0 2px; padding: .3em .5em;
				border-radius: .5em; box-sizing: border-box;
			}
				
			.item-box .list h6 {margin: 0 0 .8em; padding: .5em 0 0 10px;}
			
			.item-box .list p {margin: 0 0 .5em; padding: 0; text-align: center; font-size: .9em;}
			
			.item-box .list .btn, .shopping .form-elements .btn, #site .btn-add-to-cart {
				display: inline-block; margin: 0; padding: .4em .5em .4em 2.2em;
				font-size: 1em; text-decoration: none;
				vertical-align: middle;
				background: url(icon_cart_sm.png) no-repeat .5em 50%;
				
				-webkit-transition: background 0.3s ease;
				-moz-transition: background 0.3s ease;
				transition: background 0.3s ease;
			}
			.item-box .list .btn:hover, .shopping .form-elements .btn:hover, #site .btn-add-to-cart:hover {}
			
		.item-box p {padding: 0 0 0 10px;}
		
			.item-box p em {font-size: .85em; font-style: normal;}

.btn-success, .btn-default {
	display: inline-block;
	margin-bottom: 0; padding: .55em .9em .7em; line-height: 1.2em; font-size: 1rem;
	text-align: center; vertical-align: middle; text-decoration: none;
	background-image: none; border: 1px solid transparent; 
	cursor: pointer; word-break: break-word;
	
}
:root .btn-default {background-color: #f2f2f2; border-color: rgba(0,0,0,.1); color: #333;}
:root .btn-success {background-color: #5cb85c; color: white;}
:root .btn-success:hover, :root .btn-success:focus, :root .btn-success:active {background-color: #47a447;}

/* :: Expandable nav :: */

.expandable-nav {font-size: .9em;}

	.expandable-nav .nav-heading > span {
		display: block; clear: both;
		padding: .3em 0;
		font-weight: bold; font-size: 1.3em;
		border-bottom: 1px solid;
	}
	
		#site .expandable-nav .nav-heading div > ul {list-style: none; margin: 0 0 1.5em; padding: 5px; border-bottom: 1px solid;}
		
		#site .expandable-nav > ul > li {list-style: none; margin: 0 0 0 -15px; padding: 0;} 
		
		.expandable-nav ul > li div {background-color: #f5f5f5;}

				.expandable-nav a {display: block; position: relative; margin-bottom: 1px; padding: .2em .3em; text-decoration: none;}
				.expandable-nav a:hover {text-decoration: underline;}
			
				.expandable-nav .nav-heading div > ul ul {padding-left: 1em;}
					
					.expandable-nav ul ul li {float: left; width: 32%; line-height: 1.3; margin: .2em 0 .6em;}
					
						.expandable-nav ul ul a {
							padding-left: 15px; 
							background-image: url(nav_sprite.png); background-repeat: no-repeat; background-position: 1px 6px;
							border-radius: 2px;
						}
						
							.expandable-nav ul ul ul a {padding-left: .3em; background-image: none;}


.expandable-nav strong[style*="cyan"] {color: #3fc7f2 !important;}
.expandable-nav strong[style*="magenta"] {color: #e905b0 !important;}
.expandable-nav strong[style*="yellow"] {color: #ffd200 !important;}
.expandable-nav strong[style*="black"] {color: black !important;}

.expandable-nav strong[style] {display: inline-block; padding: .1em .2em; background: white;}

/* :: Side Bar 
===================================================================================================== :: */

#side-bar {}

.col-33 .p-20 {padding-right: 0;}

.delivery h2, .side-links h2, .side-bar-all h2 a {min-height: 24px; margin-bottom: .5em; background-repeat: no-repeat; background-position: 100% 50%;}

.delivery h2 {background-image: url(pattern_01.png);}

.delivery p {min-height: 90px; padding-right: 90px; background: url(icon_delivery.png) no-repeat 100% 50%;}

.side-links h2 {background-image: url(pattern_02.png);}

.side-bar-all h2 a {display: block; font-size: .7em; line-height: 32px; padding-left: .5em; background-image: url(pattern_03.png);}

/* :: Tables :: */

table.mp-table, .mp-content table {
	margin: 1.5em 0 2em;
	font-size: 0.9em; line-height: 1.3em;
	border-collapse: collapse;
}

	.mp-table tbody tr:hover, .mp-content tbody tr:hover {background: #e4fbea;}

	.mp-table th, .mp-content th {
		font-weight: normal;
		text-align: left; text-transform: uppercase;
		background: #f7efdb;
	}
	
	.mp-table tbody th, .mp-content tbody th {
		font-size: 1.1em;
		text-transform: none;
		background: none;
	}
	
	.mp-table th.noFill {background: none; border: none;}
	
	.mp-table th, .mp-table td, .mp-content th, .mp-content td {padding: .4em .6em !important; border: 1px solid;}

th, td, caption {
  font-weight: normal;
  vertical-align: top;
  text-align: left;
}

/* :: Forms 
===================================================================================================== :: */

.form-elements {padding: 0;}
	
		.form-elements fieldset {margin: 0 0 2em; padding: 1.5em; border: none;}
		
			.form-elements legend {margin-left: -1.2em; padding: 2em 1em .5em 0; font-size: 1.3em;}
		
		.form-elements .form-container {clear: both; position: relative; margin: 0 0 1em; padding: 2px;}
			
		.txt, .txt-small, input[type="password"], textarea {
			width: 100%; max-width: 330px;
			padding: 4px; margin: .3em 0;
			font-size: 1.1em;
			border: 1px inset;
			background: url(gr_1.png) repeat-x 0 0;
		}
		
		.search-bar .txt {vertical-align: middle;}
		
		#site .txt-small {width: 20px; vertical-align: middle;}
		
		.txt-nobrd {width: 65px; padding: 5px; font-size: 1.2em; border: none; cursor: default;}
		
		.txt:focus, .txt-small:focus, input[type="password"]:focus, textarea:focus {
			-webkit-box-shadow: 0 0 3px #e59800;
			-moz-box-shadow: 0 0 3px #e59800;
			box-shadow: 0 0 3px #e59800;
		}
		
		.btn {
			display: inline-block;
			position: relative; top: 0;
			margin: 0 .2em; padding: .25em .4em;
			font: 1.2em/1em "Trebuchet MS", Arial, Helvetica, sans-serif;
			cursor: pointer; text-decoration: none; vertical-align: middle;
			background: url(gr_2.png) repeat-x 0 0;
			border: 1px solid;
			box-shadow: 0 2px 5px rgba(0,0,0,.7);
			
		}
		.btn:hover {top: 1px; background-image: none; box-shadow: 0 1px 3px rgba(0,0,0,.7);}	
		
		.form-elements .btn {margin-left: 35%;}
		
		.form-elements h3 {margin-bottom: .8em;}
		
		.btn-del {
			padding: .1em 1.7em .3em .7em;
			background: url(close.png) no-repeat 97% 4px;
			border: 1px solid;
			cursor: pointer;
			
			-webkit-transition: background 0.2s ease;
			-moz-transition: background 0.2s ease;
			transition: background 0.2s ease;
		}
		.btn-del:hover {background-position: 97% -96px;}
		
		
		label {margin: 0 .5em;}
		.inline-block-label label {display: block; float: left; width: 35%; margin: 0;}
		label.block-label {display: block; margin: .3em 0;}
		
		.attention-box {
			padding: 1em 1em 1em 3em; 
		}

/* :: Footer
===================================================================================================== :: */

#footer {padding: 1.5em 0; font-size: .9em;}

	#footer ul {text-align: center;}
	
		#footer li {
			display: inline-block;
			margin-bottom: 1em; padding: 0 1em;
			border-left: 1px solid;
		}
		
		#footer li:first-child {padding-left: 0; border: none;}
		
			#footer li a {text-decoration: none;}
			#footer li a:hover {text-decoration: underline;}

	.footer-copy {padding: 0; margin: .2em 0 1em; line-height: 1.7em; text-align: center;}
		.footer-copy a {text-decoration: none; border-bottom: 1px dotted;}
		.footer-copy a:hover {border-color: transparent;}

/* :: Spot.bg :: */

#spot {clear: both; float: none; margin: 0;}
#spot.center {clear: both; text-align: center;}
	#spot a {
		position: relative; display: inline-block; margin: 0 0 0 auto; padding: 5px 24px 0 0; text-decoration: none; 
		font: normal 11px Arial, Helvetica, sans-serif; color: #777;
		background: url(spot-logo.png) no-repeat 100% 0;
	}
	#spot a:hover {text-decoration: underline;}
	#spot em {
		position: absolute; top: -3em; right: 0;
		padding: .5em .8em; white-space: nowrap; text-align: center; font-style: normal;
		background: #f6f6f6;
		border: 1px solid white;
		border-radius: 5px 0 5px 0;
		box-shadow: 1px 1px 5px rgba(0,0,0,.3);
		visibility: hidden; opacity: 0;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;
	}
	#spot a:hover em {visibility: visible; opacity: 1;}

/* :: Hide :: */

#site-logo span, #header .site-description {
	display: none;
}