/* START - SCHEMES */
/* Default scheme */
.content-container .buttonBar {
  background: rgb(234, 234, 234);
  border: 1px solid rgb(65, 95, 140);
}
button.smallbutton, div.smallbutton, button.largebutton, div.largebutton, #footer {
	background-color: rgb(42,65,95);
}
.content-container div.pageHeading, .content-container .product-box a:hover {
	color: rgb(42,65,95);
}
.content-container .product-box {
	border: 1px solid rgb(42,65,95);
}
.headerContainer .logobanner, .headerContainer .logobanner img { height: 84px; }
/* END - SCHEMES */

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@-webkit-keyframes dropDown {
	from { max-height: 0; }
	to { max-height: 800; }
}
@keyframes dropDown {
	from { max-height: 0; }
	to { max-height: 800; }
}
@-webkit-keyframes rollUp {
	from { max-height: 800; }
	to { max-height: 0; }
}
@keyframes rollUp {
	from { max-height: 800; }
	to { max-height: 0; }
}

.yarndetails {font-size: 1rem; }

@media screen and (min-width: 1024px) {
	.headerContainer { margin-bottom: 100px !important; }
	.headerContainer .navbar { position: fixed; z-index: 1; background-color: white; width: 100%; max-width: 1280px; }
}
@media screen and (max-width: 1024px) {
	.right-sidebar{ display: none; width: 0; }
	.content-container { padding-right: 2px !important; }
}
@media screen and (max-width: 840px) {
	.headerContainer .logobanner #banner { display: none; } 
	.navMenu div.menuList { width: 100%; margin-top: 0.7rem; }
	.navMenu div.menuList div.menuItem { width: 30%; height: 40px; border: 2px solid #fff; font-size: 1.1rem; padding-top: 6px; margin: 5px; background-color: #ccc; border: 1px solid #777; border-radius: 8px; }
	.navMenu .searchBox { font-size: 1.1rem; }
}
@media screen and (max-width: 760px) {
	#foot_advert { display: none; }
	.left-sidebar { display: none; width: 0; }
}
@media screen and (max-width: 640px) {
	.noTablet { display: none; }
	.navMenu div.menuList div.menuItem { width: 45%;  }
	.content-container { padding-left: 2px !important; padding-right: 2px !important; }
	.productListing .productListing-data .description { display: none; }
}
@media screen and (max-width: 420px) {
	.noMobile { display: none !important; width: 0 !important; }
	.navMenu div.menuList div.menuItem { width: 100%;  margin: 5px 0; }
	.navMenu div.menuList div.menuItem li { white-space: normal; }
	.yarndetails { width: 100%; font-size: 0.875rem; }
}
div {
	box-sizing: border-box;
	margin: 0;
}
textarea {
	box-sizing: border-box;
}
.clearfix:after {
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

/* Body element */
body {
  background-size: 100%;
  background-color: #fff;
  color: #000000;
  margin: auto;
  max-width: 1280px;
  min-width: 320px;
  font-family: Arial, sans-serif
}

/* The header */
.headerContainer {
	position: relative;
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 0;
	height: auto !important;
	max-width: 1280px;
	padding: 0 0 24px 0;
}
.headerContainer nav {
	padding-top: 16px;
}

/* The navigation bar (search and main menu) */
.headerContainer nav, .sectionHeader {
  margin-bottom: 4px;
  color: #fff !important;
  font-size: 1.1rem;
}
.headerContainer nav #logo {
	float: left;
	margin-top: 8px;
}
@media (max-width: 1023px) {
	.headerContainer nav #logo {
		display: block;
		float: none;
	}
}
.headerContainer nav .navbottom {
	height: 5px;
	width: 100%;
	overflow-y: hidden;
	border-bottom: 1px solid rgb(42,65,95);
	background-image: linear-gradient(#fff, rgb(61,97,140));
}
.sectionHeader {
  margin: 0;
  padding: 5px;
}
.navMenu A {
  color: #000;
  text-decoration: none;
}

.navMenu FORM {
	display: inline;
}

div.navMenu {
  	width: 100%;
	min-height: 70px;
  	font-family: Verdana, Arial, sans-serif;
  	background-color: transparent;
	text-align: center;
}
/* Navigator bar search box */
.navMenu div.searchBox{
	min-height: 30px;
	min-width: 215px !important;
	background-color: transparent;
	padding-left: 5px; padding-right: 5px;
	white-space: nowrap;
}
.navMenu div.searchBox input, .navMenu div.searchBox i { font-size: 1rem; }
.navMenu div.searchBox.hoverEffect { background-color: transparent; }
.navMenu div.searchBox .img{
	padding-top: 2px;
	padding-left: 2px;
}
/* Container for the menu bar (allows menu to float right) */
.navMenu div.menuList {
	display: inline-block;
	float: right;
	margin: 16px 0 0 auto;
	background-color: transparent;
}
.navMenu div.menuItem{
	position: relative;
	display: inline-block;
	min-width: 100px;
	height: 30px;
	padding: 4px 15px 0 15px;
	border-left: 3px solid #fff;
  	font-size: 1rem;
	font-weight: 600;
	color: #333;
	cursor:pointer;
}
.navMenu .menuItem.hoverEffect {
    background-color: #ccc;
	transition: all ease-out 1s;
}
/* The sub menu */
.navMenu .menuItem ul {
	position: absolute;
	display: none;
	max-height: 0;
	overflow-y: hidden;
	list-style: none;
	width: auto !important;
	left: 0;
	top: 0.75rem;
	height: auto;
	padding: 4px 10px 4px 10px;
	background-color: #ddd;
	border-radius: 0px 0px 5px 5px;
	z-index: 2;
}
.navMenu .menuItem ul.right{
	left: auto;
	right: 0;
}
.navMenu.nojs div.menuItem:hover ul, 
.navMenu div.menuItem.hoverEffect ul {
	display: block; /* display the dropdown */
	max-height: 800px;
	-webkit-animation: dropDown 1s;
    animation: dropDown 1s;
}
.navMenu .menuItem ul li {
	display: block;
	float: left;
	line-height: 1.5;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #777;
	white-space: nowrap;
	width: 100%;
	text-align: left;
	text-transform: capitalize;	
}
.navMenu .menuItem ul li a, .navMenu .menuItem ul a li {
	color: #000;
}
.navMenu .menuItem ul li a:hover{
	color: #00C;
}

/* Message in front of banner */
.headerContainer div.headerMessage {
	position: absolute;
	top: 65px;
	margin: 5px;
    font-family: Verdana, Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: bold;
    color: #ff0000;
	z-index: 1;
	height: 1.25rem;
	left: 280px;
	width: calc(100% - 680px);
}
@media screen and (max-width: 840px) {
	.headerContainer div.headerMessage { width: calc(100% - 280px); }
}

.headerContainer div.headerError, .content-container div.headerError {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 0.7rem;
  background: #ff0000;
  color: #ffffff;
  font-weight : bold;
  text-align : center;
}
.headerContainer div.headerInfo, .content-container div.headerInfo {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 0.75rem;
  background: #00ff00;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}
/* Main Body Content Layout Section */
.main-container {
	width: 100%;
	overflow: hidden;
	height: auto !important;
	clear: both;
}
.left-sidebar {
	float: left;
	box-sizing: border-box;
	width: 135px;
	border: 1px solid rgb(234, 234, 234);
	margin-right: 1.25rem;
}
.content-container {
	box-sizing: border-box;
	padding: 0;
	overflow: hidden;
}
.right-sidebar{
	float: right;
	box-sizing: border-box;
	min-width: 135px;
	width: 18%;
	border: 1px solid rgb(234, 234, 234);
	margin-left: 1.25rem;
}
.left-sidebar > *, .right-sidebar > * {
	margin-bottom: 4px;
}
.rssnews article {
	padding: 5px 1px 0 1px;
}
/* Content Style */
.content-container div.pageHeading {
	font-family: Verdana, Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: bold;
	color: #25547e;
	margin-top: 10px;
	margin-bottom: 10px;
}
.content-container .pageContent {
	font-family: Verdana, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 10px;
	color: black;
	overflow-x: auto;
	overflow-y: hidden;
	font-weight: normal;
	clear: both;
}
.content-container .pageContent .heading {
	font-size: 1rem;
	font-weight: bold;
	width: 100%;
	margin-top: .75rem;
}
.content-container .pageContent .article {
	min-width: 248px;
}
/* Featured Article */
.content-container .pageContent .featured-article { display: inline-flex; width: 100%; background-color: #f0f8ff}
.content-container .pageContent .featured-article .image {
	display: inline-block; height: 100%; max-height: 300px; max-width: 30%; min-width: 400px; overflow-y: hidden;
}
.content-container .pageContent .featured-article .image img {
	height: auto;
	width: 100%;
	mix-blend-mode: darken;
}
.content-container .pageContent .featured-article .details {
	display: inline-block; font-size: 1.25rem; padding: 1rem 2.5rem;
}
.content-container .pageContent .featured-article .details .heading {
	margin-top: 0;
	font-size: 1.75rem; color: #333;
}
.content-container .pageContent .featured-article .details .heading span {
	font-size: 1.25rem; color: #555;
}
.content-container .pageContent .featured-article .details button {
	display: block;
	margin-top: 1.5rem;
	padding: 0.5rem;
    height: auto;
}
.content-container .pageContent .featured-article .details button span {
	padding: 0 0.5rem !important;
}
@media (max-width: 799px) {
	.content-container .pageContent .featured-article { display: block; }
	.content-container .pageContent .featured-article .image { max-width: 100%; margin: 0 0 0.5rem 0; }
	.content-container .pageContent .featured-article .details { margin: 0 0.5rem;}
}
/* Homepage Feature Box */
.featured-boxes { display: flex; flex-basis: 50%; flex-wrap: wrap;}
.featured-boxes .featured-boxitem {  display: flex; flex: 50%; background-color: #f0f8ff}
.featured-boxes .featured-boxitem .image {
	display: table-cell; max-height: 300px; width: 40%; overflow-y: hidden; padding: 0.5rem;
}
.featured-boxes .featured-boxitem .image img {
	height: auto;
	max-width: 100%;
	margin: 0 auto;
	mix-blend-mode: darken;
}
.featured-boxes .featured-boxitem .details {
	display: table-cell; position: relative; font-size: 1.1rem; padding: 1rem 2rem 70px 2rem;
}
.featured-boxes .featured-boxitem .details.hasImage {
	width: 60%;
}
.featured-boxes .featured-boxitem .details .heading {
	margin-top: 0;
	font-size: 1.5rem; color: #333;
	line-height: 1.2;
	margin-bottom: 0.75rem;
}
.featured-boxes .featured-boxitem .details .heading span {
	font-size: 1.1rem; color: #555;
}
.featured-boxes .featured-boxitem .details button {
	display: block;
	position: absolute;
	right: 2rem;
	bottom: 1rem;
	padding: 0.5rem;
    height: auto;
}
.featured-boxes .featured-boxitem .details button span {
	padding: 0 0.5rem !important;
}
@media (max-width: 1023px) {
	.featured-boxes .featured-boxitem { display: block; }
	.featured-boxes .featured-boxitem .image { display: block; text-align: center; min-width: 100%; }
	.featured-boxes .featured-boxitem .details { padding: 0.75rem 0.5rem 1.25rem 0.75rem;}
}
@media (max-width: 599px) {
	.featured-boxes .featured-boxitem { display: block; flex: 100%; }
	.featured-boxes .featured-boxitem .image { display: block; text-align: center; width: 100%;  }
	.featured-boxes .featured-boxitem .image img { margin: 0 auto; max-width: 100%; }
	.featured-boxes .featured-boxitem .details { margin: 0 0.5rem; width: 100%; }
	.featured-boxes .featured-boxitem .details button { position: static; margin: 1.5rem auto;}
}

/* Product boxes */
.content-container .product-box {
	position: relative;
	float: left;
	font-family: Verdana, Arial, sans-serif;
	font-size: 1rem;
	width: 49%;
	min-height: 150px;
	max-height: 300px;
	padding: 0.2rem 0.4rem 0.4rem 0.4rem;
	margin: 0.5%;
	overflow: hidden;
}
.content-container .product-box .contain {
	height: 125px;
	overflow: hidden;
}
.content-container .product-box.groove {
  background: rgb(225,225,225);
  border: groove;
  border-color:#FFFFFF;
  border-radius: 10px;
}
.content-container .product-box a:hover {
    text-decoration: none;
}
.content-container .product-box.small {
	width: 32%;
	min-width: 210px;
}
.content-container .product-box.tiny {
	width: 24%;
	min-width: 160px;
}
.content-container .product-box.wide {
	width: 100%;
	margin-left: 0; margin-right: 0;
}
.content-container .product-box.article {
	height: auto;
	max-height: none !important;
}
.content-container .product-box.auto {
	height: auto;
	min-height: 150px;
	max-height: 300px;
}
.content-container .product-box .heading {
	font-weight: bold;
	width: 100%;
}
.content-container .product-box .details {
	padding: 5px;
	/*clear: both;*/
}
.content-container .product-box td {
	font-size: 0.75rem;
	padding: 5px;
}
.content-container .product-box .option, .pageContent  .option {
	padding: 5px 0 5px 5px;
	font-size: 1rem;
	float: right;
	clear: right;
}
.buttonBar .option { padding: 1px 10px 2px 0; }
.content-container .product-box .option > select {
	font-size: 0.875rem;
}
.content-container .product-box .image{
	position: relative;
	float:	left;
	margin: 5px;
	overflow: hidden;
	max-width: 140px;
}
.content-container .product-box.tiny .image{
	float: right; max-width: 60%;
}
.popupContainer { position: relative; }
.popupContainer div.popup {
	position: absolute; visibility: hidden;
	right: 0; top: 0; 
	width: 400px; height: 400px;
}
.popupContainer div.popup img {
	max-width: 100%;
	max-height: 100%;
	height: auto;
	width: auto;
}
@media screen and (min-width: 800px) {
 .popupContainer:hover div.popup {
	visibility: visible;
	transition: both;
	z-index: 1001;
 }
 .popupContainer:hover div.popup img {
	float: none;
 }
}
.content-container .pagebreakBar {
  background: transparent;
  border: none;
  padding: 3px 10px 3px 10px;
  margin-top: 10px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.7rem;
  width: 100%;
  overflow: auto;
  clear: both;
}
.content-container .pageContent .productDescription {
	padding: 5px;
	font-size: 1rem;
}
.content-container .buttonBar {
  padding: 3px 10px 3px 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.7rem;
  width: 100%;
  overflow: auto;
  clear: both;
}
.content-container .buttonBarClear {
	position: absolute;
	bottom: 0;
	width: 100%;
	background: rgba(255, 255, 255, .6);
	opacity: 50%;
	padding: 3px 10px 3px 10px;
	clear: both;
	overflow: auto;
}

@media screen and (max-width: 875px) {
	.content-container .product-box.small { 	width: 49%;	}
	.content-container .product-box.tiny { width: 32%; }
}
@media screen and (max-width: 504px) {
	.content-container .pageContent.category .image {
		float: none;
		display: block;
	}
	.content-container .product-box,
	.content-container .product-box.small, 
	.content-container .product-box.tiny {
		margin: 0; 	width: 100%;
	}
}
@media screen {
	.pageHeading.CatManufacturer { display: none; }
}
@media print {
	.noPrint { display: none !important; width: 0 !important; }
	.left-sidebar, .right-sidebar, .headerContainer, .buttonBar { display: none !important; width: 0 !important; }
}
@media print and (orientation: landscape) {
	.pageHeading { font-size: 2.25rem !important; }
	.pageHeading .price { font-size: 3rem !important; }
	.productDescription { font-size: 1.125rem !important; }
	.yarndetails { font-size: 1.125rem !important; border: solid 1px #000}
}
@media print and (orientation: portrait) {
	.pageContent > pre-wrap > div { padding-left: 30px !important; padding-right: 30px !important;}
	.pageHeading { font-size: 2rem !important; }
	.pageHeading .price { font-size: 2.25rem !important; }
	.productDescription { font-size: 1rem !important; }
	.yarndetails { font-size: 1rem !important; border: solid 1px #000}
}
.content-container .buttonBarButton , .floatright {
  float: right;
  display: inline-flex;
}
.content-container .buttonBarButton.floatleft, .floatleft {
  float: left !important;
  display: inline-flex;
}
.content-container .buttonBarButton span.ispan, .content-container .largebutton span.ispan {
  padding: 2px 0 0 0 !important;
}
.half {
	max-width: 50%;
	overflow: hidden;
}
/* Buttons */
button.smallbutton, div.smallbutton {
	font-family: Arial;
	text-align: center;
	font-size: 0.75rem;
	line-height: 1;
	color: #fff;
	border-radius: 6px;
	height: 18px;
	padding: 3px 3px 3px 3px;
	margin: 4px;
	border: none;
	min-width: 70px;
	cursor: pointer;
}
button.largebutton, div.largebutton {
	font-family: Arial;
	text-align: center;
	font-size: 1.1rem;
	color: #fff;
	border-radius: 10px;
	height: 22px;
	padding: 1px 3px 1px 3px;
	margin: 2px;
	border:none;
	min-width: 100px;
	cursor: pointer;
}
button.smallbutton i, div.smallbutton i {
	float: left;
	font-size: 0.875rem;
	margin-right: 3px;
}
button.largebutton i, div.largebutton i {
	float: left;
	font-size: 1.25rem;
	margin-right: 3px;
}
button.largebutton i.smaller, div.largebutton i.smaller { 
	font-size: 0.875rem; padding-top: 3px; padding-bottom: 3px;
}
button span.ispan, div span.ispan {
	margin-left: 3px; margin-right: 7px; margin-top: 0; margin-bottom: 0;
	padding: 0 !important;    /* Pad container not ispan */
	line-height: 1;
}
button span.ispan.smaller, div span.ispan.smaller {
	font-size: 0.95rem;
}

/* Footer section */
#footer {
  font-family: Verdana, Arial, sans-serif;
  font-size: 1rem;
  color: #ffffff;
  font-weight: normal;
  width: 100%;
  padding:0.5rem;
  margin: 0.5rem 0;
}

/* Blue footer bar */
#footer div {  display:inline-block; min-width: fit-content;line-height: 1.5;}
#footleft  {text-align:left; padding:0.5rem; }
#footright  {text-align:right; float: right; padding:0.5rem; }
#footright > a {color: white; }
@media screen and (max-width: 420px) {
 #footright {text-align: center; font-size: 0.8rem;} #footer div { width: 100%;}
 #footright > a {font-size: 1.2rem; text-decoration: underline;}
}
/* Site seal at very bottom of page */
#sealtext {text-align:center; padding-left:10px; padding-right:10px;font-family: Verdana, Arial, sans-serif; font-size: 0.7rem; color: black; width: 100%; }
#footseals {  width: 100%; white-space:nowrap; }
#footseals div {  display:inline-block; vertical-align:top; }
#sealleft  { position:absolute; left:10px;}
#sealright { position:absolute; right:10px; }

/* Advert at bottom of page */
#foot_advert { background-color:#FFDDCC; height:90px; width: 100%; max-width:728px; font-family: Verdana, Arial, sans-serif; font-size: 0.75rem; text-align:left; margin-left: auto ;   margin-right: auto ; overflow: hidden; }
#foota_img {float:left; height:90px; vertical-align:middle; padding-right:5px; }
#foota_text { padding: 5px; }

/* RSS Feed formatting */
h2.rss-heading { font-size: 16px; margin-bottom: 0;}
h2.rss-heading .instagram { font-family: "Brush Script MT", cursive; font-size: 1.5rem; }
.rss-description { font-size: 1rem; line-height: 1.5; word-wrap: break-word; }
.rss-description h3 { font-size: 1rem; font-style: italic; }
.rss-description .separator { margin-top: 4px; margin-bottom: 2px; }
.rss-description img { max-width: 100%; text-align: center; height: auto; width: 100%; margin-bottom: 5px;} 
.rss-description br { display: none; }