@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notonaskharabic.css);
@import url(//fonts.googleapis.com/earlyaccess/notokufiarabic.css);
/* above 2 fonts not in main google font library */

/* mobile has sep css if use mobile templates, this for pads up, some css used both (not currenly using)*/

/* RETURN TO TOP highest z-index */
#ScrollToTop:hover {opacity:1}
#ScrollToTop { cursor: pointer; display: none; right: 0; position: fixed; text-align: center; bottom: 0; z-index: 9999}
#ScrollToTop img { max-width: 60px; height: auto}

/* Phone contact at bottom of each page - used mobile fields and template on all*/
#mobileContactUsPhone { background-color: White;  border-top: 1px solid GhostWhite;  margin-top: 10px; padding-top: 30px; font-size: 20px; font-weight: bold;  text-align: center; }

/*this long text with truncate replaced but save if start to use mobile caption template*/
.truncate {overflow: hidden}

/*readMore and readLess tag on item detail page function in js*/
.readMore, .readLess {
    background-color: WhiteSmoke;
    margin: 0 5px;
    padding: 0 5px;
    color:Black;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

/* HERO IMG - TITLE-TEXT (home slider and static cat pages except mobile home */
#heroImage {
    text-align: center;
    margin: 0 10px 16px 10px;
}
#heroImage img,
#heroImage picture {
    max-width: 100%;
    height: auto;
}

.hero {margin:0 auto; padding:0; display:block; width:100%; max-width: 1125px; overflow:hidden; list-style:none}
.hero-div {position:relative; overflow:hidden; list-style:none}
.hero a{color:Snow; text-decoration:none;}
.hero a:visited{color:Snow; text-decoration:none;}
.hero a:hover{text-decoration:none; color:Snow}
.hero-head { position: absolute; top: 0; left: 25px; padding:0 10px 10px 25px}
.hero-title { font-family: 'Lora', serif; font-weight:600; color:Snow; text-shadow:-1px -1px 0 black,1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; font-size:2em}
.hero-title-text { font-family: 'Lora', serif; font-weight:600; color:Snow; text-shadow:-1px -1px 0 Black,1px -1px 0 Black, -1px 1px 0 black, 1px 1px 0 black; font-size:1em; text-transform: uppercase; text-align:center;}
.hero-link {position: absolute; bottom: 12%; left: 30%; background-color: Snow;  min-width: 180px; border-radius: 5px; display:inline-block; overflow:hidden; border: 1px outset DimGray;
box-shadow: 0 6px 18px 0 DimGray}
.hero-link:hover {background-color:Silver}
.hero-link-text {color: Black; padding: 0 4px; text-align:center; font-weight:500; font-size:1em}
@media (max-width:439px){.hero-title-text {display:none}}

/*Use for text when float over image-on hero now*/
.scrim-black {background-image:
linear-gradient(
  hsl(0, 0%, 0%) 0%,
  hsla(0, 0%, 0%, 0.541) 19%,
  hsla(0, 0%, 0%, 0.441) 34%,
  hsla(0, 0%, 0%, 0.382) 47%,
  hsla(0, 0%, 0%, 0.278) 56.5%,
  hsla(0, 0%, 0%, 0.194) 65%,
  hsla(0, 0%, 0%, 0.126) 73%,
  hsla(0, 0%, 0%, 0.075) 80.2%,
  hsla(0, 0%, 0%, 0.042) 86.1%,
  hsla(0, 0%, 0%, 0.021) 91%,
  hsla(0, 0%, 0%, 0.008) 95.2%,
  hsla(0, 0%, 0%, 0.002) 98.2%,
  hsla(0, 0%, 0%, 0) 100%
);}

/* CSS ELEMENTS  AND BASE*/
/*FONTS*/
/*FLEXIBLE font calculation: font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */

/*fall back html base font size*/
html {font-size:16px}
/*Calc min font 12px; max font 20px; max screen 1360px*/
@media screen and (min-width: 320px)
{ html { font-size: calc(12px + 8 * ((100vw - 320px) / 1040)); }}
/*max font 20px at max container 1360px, increase max to 22px if increase container*/
@media screen and (min-width: 1360px) 
{html {font-size: 20px; }}

*{font-family: 'Open Sans', sans-serif} /*set default font face */
.ffk {font-family: 'Noto Kufi Arabic', 'Open Sans', sans-serif}  /*Arabic Hdrs*/
.ffn {font-family: 'Noto Naskh Arabic', 'Open Sans', sans-serif}  /*Arabic text*/
.ffp {font-family: 'Philosopher', 'Lora', serif}  /*Eng Home page headings*/
.ffs {font-family: 'Open Sans', sans-serif}  /*Eng Text, default font */
.ffl {font-family: 'Lora', serif}  /*Captions, titles, names and some text*/
.fflato {font-family: 'Lato', sans-serif}

/* BASE elements and classes*/
body {width:100%; min-height:100%; margin: 0 auto !important; float: none !important; position:relative; 
   background-color:white; font-size:1em; color:Black}

html {color:#000000; box-sizing: border-box; line-height:1.35; width: 100%; height:100%; touch-action: manipulation;}
h1, h2, h3 { margin-top: 10px; margin-bottom: 10px}
h4, h5, h6 { margin-top: 8px; margin-bottom: 8px}
b, strong{font-weight:600;}
small {  font-size: 80%}
sub, sup {  font-size: 75%;  line-height: 0;  position: relative;  vertical-align: baseline;}
sub {  bottom: -0.25em;}
sup {  top: -0.5em;}
form {padding:0;margin:0}
blockquote{margin:8px;}
dd{margin:0 0 0 10px;}
dl{margin:5px 0;}
tr, td {vertical-align:top}
td {font-size:.95em ; padding:0; margin: 0 10px}
ul {list-style:disc outside; margin: 15px; padding: 0;}
p {margin:10px 0; padding:0;}
p + p {margin-top: 15px;} /*fix extra space on p after a p*/
a{color:#000000; text-decoration:none;}
a:visited{color:#000000}
a:hover{text-decoration:underline; color:#e32c3e}
em, i {font-style:italic;}
input.addtocartInp {border:6px solid #cecede; margin:6px 5px 0 5px; padding:3px; background:#e32c3e;  color:#000000; font-weight:bold; font-size:.8em; text-align:center; cursor:pointer}
input {cursor:pointer; margin:0}
hr {border-top:1px solid MediumAquaMarine; margin-top:5px; margin-bottom:5px; margin-left:auto;  margin-right:auto}
:before, *:after { box-sizing: inherit }

/* Classes */
.name {padding:5px; text-decoration:none; display:inline}
.sale-price {color:#e32c3e}  
.sale-price-bold {color:#e32c3e; font-weight:600}
.breadcrumbs {width:98%; font-size:.75em; padding:8px}
.clear {clear:both}
.clearfix {float:none; clear:both}
.last {border:0 solid}
.menu-point {cursor:pointer}
.table-vert th {text-align:left; }

  /* Buttons */
button, input, optgroup, select, textarea {  font-size: 100%;   line-height: 1.15;   margin: 0; }
input.buttonsubmit {margin-left:3px !important; text-transform:uppercase}

.ys_primary{background:#e32c3e; color:#ffffff; 
font-weight:600; font-size: .75em; padding:1px 5px; text-align:center; cursor:pointer; }

/* IMG  thumb inset and item sizes usually in template calls, fluid class used extensively*/
image {background:transparent}
img {border-style:none; background:transparent}
.thumb-img {max-width:175px; max-height:175px} /*home and section pages*/
.inset-img {max-width:200px; max-height:200px} /*item pages after abstract*/
.item-img {max-width:330px; max-height:330px} /*store directory, pages top*/
.fluid-img {max-width:100%; height:auto}

/* CENTERING and TEXT ENTRY */
img.c {display:block; margin-left: auto; margin-right: auto;}
.flex-c {display:flex; align-items: center; justify-content: center}
.floatc {margin-left:auto; margin-right:auto}
.c {text-align:center}

/* Replaced with the LINES RTML function ref only until verify not needed */
/* always show one line break-sequences of line breaks are collapsed, wrap as needed*/
.pline { white-space: pre-line}
/* always show number of line breaks entered, wrap as needed*/
.pwrap {white-space: pre-wrap}
/* always show number of spaces entered*/
.bspace {white-space: break-spaces}
/* always show number of lines breaks and spaces entered*/
.ptext {white-space: break-spaces; white-space: pre-wrap}

/*TOP BORDER  z-index after custreg @1001,1002, ret top @9999*/
#top-border{background-color:#02aace; border-top: 2px solid Turquoise}

#top-border {background-image: linear-gradient(to right, 
DarkCyan 1%,
AquaMarine 7%,
PaleTurquoise 13%,
AquaMarine 20%,
DarkCyan 25%, 
Turquoise 25%,Turquoise 26%,
#02aace 26%, #02aace)}

#REM-OLD-top-border {background-image: linear-gradient(to right, 
Teal 1%,
MediumAquaMarine 7%,
PaleGreen 13%,
MediumAquaMarine 20%,
Teal 25%, 
Turquoise 25%,Turquoise 26%,
#02aace 26%, #02aace)}

/*SUPERBAR*/
#ys_superbar {position:relative !important; width: 60% !important; max-width:652px !important; height:22px; font-size:.8em}
#ys_cpers {float:left}
.ys_clear {clear:both}
#yscp_welcome_msg {margin:0 5px; display:none; color:White; line-height:20px;}
#yscp_signin_link {display:none; color:White}
#yscp_signout_link {margin-left:5px; display:none}
#yscp_myaccount_link {display:none; margin-right:5px; margin-left:5px}
#yscp_welcome_msg .yscp_bold {font-weight:bold; color:White}
a.yscp_link {text-decoration:none; color:White}
a.yscp_link:hover {color:Black; text-decoration:underline}
a.yscp_link:visited {color:White}

/*REM CSS FOR MINI CART BG, yfc mini bg normal visualization not working, chg bg to #02aace minicart not currently active. If use need to copy to alkitab also and use in variable head tag field not in this file*/
/* .yui-skin-sam .yui-accordionview li.yui-accordion-panel a.yui-accordion-toggle {
	background-color: #02aace !important;}
.yui-skin-sam .yui-accordionview li.yui-accordion-panel a.yui-accordion-toggle.active {
	background-color: #02aace !important;}
.smb-fc .yui-panel .bodybg {background-color: #02aace !important; }
.yui-skin-sam .yui-accordionview div.yui-accordion-content {	background-color: #ebebeb important; }
.smb-mc .minicart_c2 {background-color: #02aace !important;}
.smb-fc #yfc_close_btn {color: #262626;background-color: #02aace !important;}
.smb-fc .yui-panel {border-color: #02aace;background-color: #02aace !important; }
.smb-fc .yui-panel .bodybg {background-color: #02aace;}
.smb-fc .yui-panel .bd {background-color: #02aace !important;}
.smb-fc {left:539px !important;}
.smb-fc .btn1 {background-color: #02aace !important; }
.smb-fc .btn2 {	background-color: #02aace !important;}*/

/*LOGO,nav*/
#logo-container{margin:0 auto; width:100%; max-width:1360px}
#header {height:78px; }
.brandmark {font-size: 1em}
.brandmark a, .slogan a {color:#2e8b57; text-decoration:none; font-weight:normal}
.brandmark a:hover, .slogan a:hover {color:#2e8b57; text-decoration:none; font-weight:normal}
.brandmark img {margin-left:10px}
.slogan {width:45%; height:78px; color:#2e8b57; font-size:.8em; padding-right:10px}
/*hide slogan on 439px and less*/
@media (max-width:439px){.brandmark {width:95%}}
@media (min-width:440px){.brandmark {width:45%}}
@media (max-width:439px){.slogan {display:none}}

/* after logo bottom of logo container */
#nav-general {margin: 0 auto; width:100%; max-width:1340px; font-size:.75em; padding:5px 8px; background-color:white}
.nav-general a {padding:0 8px; text-decoration:none}
#nav-general span {margin-right:5px}
@media (max-width:539px){#nav-general {height:52px}}
@media (min-width:540px){#nav-general {height:32px}}

/* BODY DIVS */
#container{margin:0 auto; text-align:left; width:100%; max-width:1360px; background-color:#ffffff}
#captionarea {width:100%; margin:0 auto; padding:0 2px}
#contentarea {width: 100%; margin:0 0 10px 0; padding:0 2px} 
#messagearea {width:100%;  margin:0 auto; padding: 2px 5px 5px}
#messagetitle {width:100%; margin: 0 auto; text-align:center; padding:5px;
  color: #000000;
  font-weight:bold;
  font-size: 1.1em;
  background-color:#ffffff; overflow:hidden}

#specialstitle { width:100%; text-align:center; padding: 0 5px; margin: 0 auto;
  color: #000000;
  font-weight:bold;
  font-size:  1.1em;
  background-color:#ffffff;
  overflow:hidden}

/*FANCY DOUBLE LINE before and after centered text not good for mobile*/
.fancy {  line-height: 0.5;  text-align: center; }
.fancy span {  display: inline-block;  position: relative;  }
.fancy span:before,.fancy span:after {  content: "";  position: absolute;  height: 5px;  border-bottom: 1px solid #02aace;  border-top: 1px solid #02aace;  top: 0;  width: 250px;}
.fancy span:before {  right: 100%;  margin-right: 15px;}
.fancy span:after {  left: 100%;  margin-left: 15px;}

#caption, .caption {padding: 0 15px 15px;}
#item-contenttitle {background-color:#ffffff; 
color: #2e8b57; font-size:1.1em; font-weight:600; 
font-family: 'Noto Kufi Arabic', 'Lora', serif;
margin:3px 0px; padding:1px 5px}
#itemtype {padding:3px; color:#000000; font-size:1em}

#captiontitle {margin:0 auto; width:90%; color:#000000; margin:3px; padding: 6px;
font-size:1em; font-weight:600; font-family: 'Lora', serif}

#section-contenttitle { color:#2e8b57; font-size:1.1em; font-weight:600; font-family: 'Lora', serif; margin:3px 0; padding:5px}

/*TOP CONTENT on sections*/
/*top body content on sections, info pages, contact info, site map (1st div after body switch)*/
#bodycontent {width:100%; margin: 2px; padding: 4px 15px 6px 10px}

@media (max-width:539px) {.section-content-text {width:98%; margin:0 5px}}
@media (min-width:540px) and (max-width:959px) {.section-content-text {width:70%; margin:0 8px}}
@media (min-width:960px) {.section-content-text {width:70%; margin:0 10px}}
/*Img on sections if no hero*/
@media (max-width:539px) {.section-content-img {width:98%; margin:0 5px}}
@media (min-width:540px) and (max-width:959px) {.section-content-img {width:25%;}}
@media (min-width:960px) {.section-content-img {width:25%}}

/* MAIN SECTIONS inside body content*/
.main-cat ul {list-style:none; margin: 0; padding: 0; display:inline-block}
.main-cat li {list-style:none; margin: 0 5px 0 0; display:inline-block; padding: 3px; border: 1px  #0bffff; border-style:hidden dashed dashed hidden; background: linear-gradient(Honeydew, PaleTurquoise)}
.main-cat li:hover {background: linear-gradient(white, Honeydew)}
.main-cat li a {text-decoration:none; color:#000000; font-size:.75em; font-weight: bold; vertical-align:text-top;}
.main-cat li a:hover {text-decoration:underline; color:#e32c3e}
@media (max-width:767px) {.main-cat ul {text-align:left}}
@media (min-width:768px) {.main-cat ul {text-align:center}}
@media (max-width:767px) {.main-cat li {width:98%}}
@media (min-width:768px) {.main-cat li {width:48%; height: 70px}}

/* SUBCAT TABS*/
.hiddenTarget {display:none; position:fixed;}
.tabbedPages {position:relative; margin:10px 0;}
ul.tabs {width:99%; padding:5px 2px 0; background-color:#02aace; border-top-left-radius:5px; border-top-right-radius:.6em; margin:0; list-style:none; float:left; position:relative; z-index:100;}
ul.tabs li {float:left; margin-right:3px}
#info ul.tabs li a {padding:6px; display:inline-block; border-radius:5px 5px 0 0; background:MediumAquaMarine; font-size:.9em; font-weight:600; color:White; text-decoration:none} 
#info ul.tabs li a:hover {background:SlateBlue;text-decoration:underline}
.tabcontent {float:left; width:100%; padding:2px; position:relative; z-index:10; display:none; clear:left; top:-1px; background-color:White}
/* change the tab to selected style */
ul.tabs li a.default,
#tab1:target ~ .tabbedPages .tabs li a.default,
#tab2:target ~ .tabbedPages .tabs li a.tab2,
#tab3:target ~ .tabbedPages .tabs li a.tab3,
#tab4:target ~ .tabbedPages .tabs li a.tab4,
#tab5:target ~ .tabbedPages .tabs li a.tab5,
#tab6:target ~ .tabbedPages .tabs li a.tab6
{background-color:White; border-bottom:1px solid SeaShell; color:Black}
/* show the tab content */
div.default,
#tab1:target ~ .tabbedPages div.default,
#tab2:target ~ .tabbedPages div#view2,
#tab3:target ~ .tabbedPages div#view3,
#tab4:target ~ .tabbedPages div#view4,
#tab5:target ~ .tabbedPages div#view5,
#tab6:target ~ .tabbedPages div#view6
{display:block;}
/* reset the unclicked tabs to default */
#tab2:target ~ .tabbedPages .tabs li a.default,
#tab3:target ~ .tabbedPages .tabs li a.default,
#tab4:target ~ .tabbedPages .tabs li a.default,
#tab5:target ~ .tabbedPages .tabs li a.default,
#tab6:target ~ .tabbedPages .tabs li a.default
{background-color:MediumAquaMarine; border:1px solid Gray; color:White;}
/* hide the default tab when selecting other tabs*/
#tab2:target ~ .tabbedPages div.default,
#tab3:target ~ .tabbedPages div.default,
#tab4:target ~ .tabbedPages div.default,
#tab5:target ~ .tabbedPages div.default,
#tab6:target ~ .tabbedPages div.default
{display:none;}

/*SUBCAT GRID CONTENT*/
.tab-content {float:left; width:99%; padding:2px; position:relative; z-index:10; display:none; clear:left; top:-1px;background-color:White}
.tab-tr {margin-top:5px; width:195px; float:left; display:block; text-align:center}
.tab-td {height:430px; display:inline-block}
.tab-td-imgdiv {height:175px; width:175px; background-image:url('/lib/yhst-141393581866279/loading.gif'); background-repeat:no-repeat; background-position:50% 20%;}
.tab-td img {display:block; margin-left:auto; margin-right:auto}
.tab-name {width:100%; height:70px; margin:2px 0 0 0; overflow:hidden; font-size:.7em}
.tab-topic {width:100%; height:110px; margin:2px 0 0 0; overflow:hidden; font-size:.65em}
.tab-price {width:100%; height:50px; margin:2px 0 0 0; overflow:hidden; font-size:.65em}
.tab p {margin:0; padding:0}
/* see more or order */
input.more[type=submit]{height:25px; font-size:.7em; padding:.2em}
input.more[type=submit]:hover {background-color:Lavender; cursor:pointer}

/* toggle on kids age cats */
.toggle__input:not(checked) {display: none}
.toggle__input + label {margin-top:.5em; height:35px; box-shadow:2px 2px 8px Black; border-radius:3px; color:#000000; display: block; width:100%; max-width:750px; min-width:250px}
.toggle__input + label:hover {color:#e32c3e; text-decoration:underline; background:Azure}
.toggle__input:not(checked) ~ .toggle__content {display: none}
.toggle__input:checked ~ .toggle__content { display: block}
.toggle__input + label .toggle__less, .toggle__input:checked + label .toggle__more {display: none}
.toggle__input:checked + label .toggle__less {margin:0; padding:0; height:35px; border-radius:3px; color:White; display: block; width:100%; max-width:750px; min-width:250px; background:MediumAquaMarine}
.age-top-label {margin-top:.5em; padding-left:.5em; height:2.5em; box-shadow:2px 2px 8px Black; border-radius:3px; width:100%; min-width:250px; color:#000000}
.age-top-label:hover {color:#e32c3e; text-decoration:underline}

/* STORE DIR */
#cat-container {width:100%; max-width:1100px; margin:0}
#all-cat {width:100%}
#all-cat ul {list-style:none; display:inline-block; padding-left: 10px; }
#all-cat li {list-style:none; margin-right:1px; padding: 10px 5px; display:inline-block; border-left: 1px dotted #0bffff; border-bottom: 1px dotted #0bffff}
#all-cat li a {text-decoration:none; color:#000000; font-size:.9em; vertical-align:text-top;}
#all-cat li a:hover {text-decoration:underline; color:#e32c3e}
@media (max-width:767px) {#all-cat ul li {width:45%}}
@media (min-width:768px) {#all-cat ul li {width:29%}}

/*HOME top slogan images right under search bar on the welcome screen */
.slogan-ids {display:flex; flex-wrap:wrap; flex-grow:1; width: auto;}
@media (max-width: 399px)  {.slogan-ids {width: calc(100% - 30px);}}
.slogan-ids:hover {box-shadow: 0 5px 8px rgba(0,0,0,.3);  transform: translateY(-3px) scale(1.0)}

/*HOME top specials under hero (can delete REMs at Mar 2022 */
.REMmessage-ids {display:flex; flex-wrap:wrap; flex-grow:1; width: calc(100% * (1/2) - 30px);}
@media (max-width: 399px)  {REMmessage-ids {width: calc(100% - 30px);}}
.REMmessage-ids:hover {box-shadow: 0 5px 8px rgba(0,0,0,.3);
    transform: translateY(-3px) scale(1.0)}

#message-ids {width:100%}
#message-ids ul {display:flex; flex-direction:row; margin:0 0 5px 0; padding:0}
#message-ids ul li {list-style:none; flex: 1 1 0; text-align:center; padding: 5px 10px}
#message-ids ul li:hover {box-shadow: 0 5px 8px rgba(0,0,0,.3); transform: translateY(-3px) scale(1.0)}
#message-ids ul li a {display: block;}

/*HOME monthly specials in hero slideshow  */
.mo-specials {padding-top:15px; padding-bottom:15px; vertical-align:bottom;box-shadow: 0 1px 1px rgba(0,0,0,.3); transition: .3s ease}
.mo-specials:hover {box-shadow: 0 5px 8px rgba(0,0,0,.3);
    transform: translateY(-3px) scale(1.0)}

/*HOME link icons under main msg, Link Icons on MONTHLY SPECIALS Page */
#table-specials {display:flex; flex-wrap:wrap; width:98%; max-width: 1024px; margin-left:auto; margin-right:auto}
.table-specials-div {display:inline-block; border: 1px solid silver; font-size:.9em;
     flex-grow:1; width: calc(100% * (1/3) - 30px);}
@media (max-width: 600px) and (min-width: 400px) {.table-specials-div {flex-grow:1; width: calc(100% * (1/2) - 30px);}}
@media (max-width: 399px)  {.table-specials-div {width: calc(100% - 30px);}}
.table-specials-div{box-shadow: 0 1px 1px rgba(0,0,0,.3); transition: .3s ease}
.table-specials-div:hover {box-shadow: 0 5px 8px rgba(0,0,0,.3);
    transform: translateY(-3px) scale(1.0)}

.table-specials-div:nth-child(6n+1)
{background: linear-gradient(to bottom right,
ghostwhite 46.5%, 
#888 1%,
whitesmoke .5%,
white 48%,
white
)}
.table-specials-div:nth-child(6n+2){background-color:White}

.table-specials-div:nth-child(6n+3) 
{background: linear-gradient(to bottom left, 
ghostwhite 46.5%, 
#888 1%,
whitesmoke .5%,
white 48%,
white
)}
.table-specials-div:nth-child(6n+4) 
{background: linear-gradient(to top right, 
ghostwhite 46.5%, 
#888 1%,
whitesmoke .5%,
white 48%,
white
)}
.table-specials-div:nth-child(6n+5)
{background-color:White }

.table-specials-div:nth-child(6n+6) 
{background: linear-gradient(to top left,
ghostwhite 46.5%, 
#888 1%,
whitesmoke .5%,
white 48%,
white
)}
@media (max-width: 600px) and (min-width: 400px) {.table-specials-div:nth-child(4n+1)
{background: linear-gradient(whitesmoke, ghostwhite) }}
@media (max-width: 600px) and (min-width: 400px) {.table-specials-div:nth-child(4n+2)
{background: linear-gradient( ghostwhite, whitesmoke) }}
@media (max-width: 600px) and (min-width: 400px) {.table-specials-div:nth-child(4n+3)
{background: linear-gradient(whitesmoke,  ghostwhite) }}
@media (max-width: 600px) and (min-width: 400px) {.table-specials-div:nth-child(4n+4)
{background: linear-gradient( ghostwhite, whitesmoke) }}
@media (max-width: 399px)  {.table-specials-div:nth-child(even)
{background: linear-gradient( ghostwhite, whitesmoke) }}
@media (max-width: 399px)  {.table-specials-div:nth-child(odd)
{background: linear-gradient(whitesmoke,  ghostwhite) }}


/*FOOTER every page */
#finaltext {margin:0 auto; width:100%; max-width:960px; font-size:.85em; text-align:center; display:block; padding:15px}

#footer {display: inline-flex; margin: 0 auto; float:none; width:100%; max-width:1125px; background-color:#ffffff}
#footer-links {color:#000000; display:block; font-weight:normal; font-size:.9em; padding:10px; text-align:center}
#footer-links a {color:#004551; text-decoration:none; text-transform:uppercase}
#footer-links a:hover {text-decoration:underline}

#copyright {width:100%; margin: 0 auto; float:none; color:#004551; display:block; font-size:.85em; padding:8px; text-align:center}

/* SEARCH note on Sept 2018 removed the ysearch, if add again can get from generic css file, need to see if all below are still needed*/

/*Main holder for search*/
#search-bar {margin:0 auto; width:70%; max-width:730px; min-width: 290px; display:block}
.search-desc {color:#004551; font-size:.55em; text-align:center}

/*this holds the input box and submit button*/
.t-search { display:flex; flex-direction:row;}

/*box for search query input*/
 #tipue_search_input {flex:1; border:1px solid #02b2aa; border-radius:4px; padding:0 0 0 6px; display:block; background:transparent}
::placeholder {font-size: .75em; font-style: italic; color:gray; text-align:center}

/*button for the search query submit*/
#tipue_search_button {
 background-color:#8efce8;
 background-image: url('https://s.turbifycdn.com/aah/yhst-141393581866279/img-47471.gif');
 background-repeat: no-repeat;
 background-position:center;
 padding: 0;
 width: 40px;
 height: 40px;
 color: transparent;
 opacity: 0.7}
 #tipue_search_button:hover {opacity: 1; cursor:pointer}
/*box for tipue search results filter*/
 #tipue_filter_input { padding:0 6px 2px 6px; font-size:.8em}

/* TIPUE SEARCH*/
#tipue_search_loading {width:100%; padding-top: 60px; background-image: url('https://s.turbifycdn.com/aah/yhst-141393581866279/img-47472.gif'); Background-repeat: no-repeat; background-position: center; text-align:center; color:#808080;  font:16px }
 #tipue_search_loading:before {width:100%; padding-top: 60px; background-image: url('https://s.turbifycdn.com/aah/yhst-141393581866279/img-47472.gif'); background-repeat: no-repeat; background-position: center; text-align:center; color:Navy; content: "SEARCHING"; font:18px } 

#tipue_search_warning_head {font-size:.8em}
#tipue_search_warning {font-size: .8em; color: Black; margin: 7px 0;}
#tipue_search_warning a {color:#000000; font-weight: 300; text-decoration: none;}
#tipue_search_warning a:hover {color: #000000}
#tipue_search_results_count{ font: 12px; text-transform: uppercase;color: Black;}
.tipue_search_content_title {font-size: .85em; margin-top: 20px;}
.tipue_search_content_title a {color: #000000; text-decoration:none}
.tipue_search_content_title a:hover {text-decoration:underline; color:#e32c3e}
.tipue_search_content_url {font-size:.8em}
.tipue_search_content_url a {color:#000000; text-decoration: none}
.tipue_search_content_url a:hover {color: #e32c3e}
.tipue_search_content_text {font-size: .8em; color: #000000; margin-top: 3px;}
.h01 {background-color: #8efce8; color:#004551; font-weight:500}
.tipue_search_more {margin-right:5px; display: inline-block; padding: 10px 22px; font-size:.75em; color: white; font-weight:500; border-radius:.5em; text-transform: uppercase; text-decoration: none; text-align: center; vertical-align: middle; background-color:MediumAquaMarine} 
.tipue_search_more a{color:white; font-weight:bold} 

/* TIPUE SEARCH RESULTS FOR IMAGES*/
#tipue_search_container {background-color: WhiteSmoke; padding: 0 0 8px 8px;border-radius: 1px;} 
.tipue_search_image_wrap {float: left; padding:2px; background-color:white; border-radius:1px;  margin:5px 5px 0 0; height: 250px; width: 180px; display:inline-block; overflow:hidden;font-size:.8em} 
.tipue_search_image {outline:0; transition:opacity.30s ease-in-out; cursor: pointer;} 
.tipue_search_image img {max-width:150px; max-height:150px}
.tipue_search_image:hover {opacity: 0.7;}
.tipue_search_box_clear {display: none;clear: both;}
.tipue_search_box {display:none; font-size:.8em; margin:0 5px 5px 0; background-color:white; padding:5px; border-radius:2px; box-shadow:.25em .25em .4em rgba(0,0,0,0.3)}
.tipue_search_box_close{padding:20px 10px 5px;background: #fefcfb url('/lib/yhst-141393827066280/close.gif') no-repeat left;cursor: pointer }
.tipue_search_box_image {max-width:175px; max-height:175px; outline: 0;cursor: pointer; margin: 5px 0 0 20px;}
.tipue_search_box_title {width:100%; max-width:650px; font-size:.85em; margin: 19px 20px 0 20px;}
.tipue_search_box_title a {color: Black; font-weight:bold; text-decoration: none;}
.tipue_search_box_title a:hover {padding-bottom: 1px;border-bottom: 1px solid #ccc;}
.tipue_search_box_loc {font-size:.8em; color: #000000; margin: 9px 20px 0 20px}
.tipue_search_box_btn_wrap{margin: 19px 20px 20px 20px}
.tipue_search_btn {display: inline-block; padding: 10px 22px; font-size:1em; color: white; font-weight:500; border-radius:.5em; text-transform: uppercase; text-decoration: none; text-align: center; vertical-align: middle; background-color: MediumAquaMarine}
.tipue_search_btn a{color:white; font-weight:bold}

/*SEARCH INDEXING CONVERSION active button color change*/
#convert-table {cursor: pointer}
#download {cursor: pointer}

#convert-table:active {color:white; background-color:Lime}
#download:active {color:white; background-color:Lime}
#concat:active {color:white; background-color:Lime}
#convertcopy:active {color:white; background-color:Lime}

#convert-table:focus {color:white; background-color:Lime}
#download:focus {color:white; background-color:Lime}
#concat:focus {color:white; background-color:Lime}
#convertcopy:focus {color:white; background-color:Lime}

#convert-table:target {color:white; background-color:Lime}
#download:target {color:white; background-color:Lime}
#concat:target {color:white; background-color:Lime}
#convertcopy:target {color:white; background-color:Lime}

/*YS-SEARCH for smaller screens important bc inline style SAVE IF put YSearch back*/
@media (max-width:767px) {#ys_searchresults {width:100%; float:left}} /*results page outer*/
@media (max-width:767px) {#ys_searchiframe {width:100%; float:left}} /*results page*/
#ys_searchiframe .wrp h3 {color:#000000}
@media (max-width:767px) {#ys_searchiframe div#sf {width: 250px !important}} /*holds input box*/
@media (max-width:767px) {#ys_searchiframe div#sf div.wrp #schbx {width:220px !important}} /*input box*/
/*filters*/
@media (max-width:767px) {#ys_searchiframe .side #sidebar {float:left !important; position:relative !important}}
/*results*/
@media (max-width:767px) {#ys_searchiframe #main {width:200px !important; float:left !important}}
@media (max-width:767px) {#ys_searchiframe #main .grd {width:100% !important}}
#ys_searchiframe #main .grd {border:2px solid White}
@media (max-width:767px) {#ys_searchiframe #main .clf {width:200px !important}}

/* PRODUCT ITEMS image and info at top (using #itemarea verify others */
#itemarea {margin:8px 15px 0 10px;}
#itemarea:after {clear:both; content:"."; display:block; height:0; visibility:hidden}
.item-img {padding-right:8px}
@media (max-width:539px) {.item-img {width:100%}}
@media (min-width:540px) and (max-width:960px){.item-img {width:62%}}
@media (min-width:961px){#item-img {width:36%}}
#itemarea #contents-table tr{padding:2px}
#itemarea #contents-table td{padding:2px}
#itemarea #contents-table td{font-size:.75em}
@media (max-width:539px) {#itemarea #contents-table {width:100%}}
@media (min-width:540px) and (max-width:960px){#itemarea #contents-table {width:36%}}
@media (min-width:961px){#itemarea #contents-table {width:62%}}

/*ITEM DETAIL PAGE inside itemarea */
#item-detail {width:100%; font-size:95%}

/*top image and add to cart img max is 175px + padding + margins*/
.item-detail-top-image {float:left; display: block; padding-right:10px;}
@media (max-width:639px) {.item-detail-top-image {width:95%;}}
@media (min-width:640px) and (max-width:960px){.item-detail-top-image {width:45%; }}
@media (min-width:961px) {.item-detail-top-image {width:30%;}}

/*abstract and caption text next to or under image*/
.item-detail-top {padding: 0 10px; overflow:auto; display:block; }
@media (max-width:639px) {.item-detail-top {float:left; width:95%;}}
@media (min-width:640px) and (max-width:960px){.item-detail-top {width:50%; }}
@media (min-width:961px) {.item-detail-top {width:65%;}}

/*Truncate Text on caption, abstract, description-ar and description-long on item detail page*/
.addReadMore.showlesscontent .SecSec,
.addReadMore.showlesscontent .readLess {display: none}
.addReadMore.showmorecontent .readMore { display: none}
.addReadMore .readMore,
.addReadMore .readLess {
     font-size: 13px;        
     font-weight: bold;
     margin-top: 18px;
     cursor: pointer;}
.addReadMoreWrapTxt.showmorecontent .SecSec,
.addReadMoreWrapTxt.showmorecontent .readLess { display: block }

/*CROSS SELL  */
.ystore-cross-sell-table { width: 100%; font: 75%; margin-left:15px }
.ystore-cross-sell-title { padding-bottom: 6px; color: #2e8b57; font: bold 1em Helvetica, Arial, sans-serif; }
.ystore-cross-sell-table-vertical .ystore-cross-sell-cell { width: 100%; }
.ystore-cross-sell-table-horizontal .ystore-cross-sell-cell { width: 28%; padding-right: 5%; }

.ystore-cross-sell-product-image-link { padding-bottom: 8px; }
.ystore-cross-sell-product-caption { padding-bottom: 16px; }
.ystore-cross-sell-product-caption p,
.ystore-cross-sell-product-caption h5 { margin: 0 0 10px; }
.ystore-cross-sell-table .ys_promo { }

/* YSTORE PRESET CONTENT some may not be used*/
.image-l {background-color:#ffffff; display:block; float:left; margin:0 15px 10px 0;padding:0px;}
.image-r {background-color:#ffffff; display:block; float:right; margin:0 0 10px 15px;padding:0px;}
.image-c {text-align:center; margin-bottom:10px;}
.inset-l {background-color:#ffffff; display:block; float:left; margin:0 8px 5px 0;padding:0px;}
.inset-r {background-color:#ffffff; display:block; float:right; margin:0 0 5px 8px; padding:0px;}
.addtocartImg{margin:0 auto; padding:5px;cursor:pointer;display:block}
.el #contents {}  
#contents .vertical td {text-align:center;} /* Used for the "Vertical" RTML Layout */
.wrap #contents {}
/* Content IDs, no changes but some not used  */
#contents {background-color:#ffffff; padding:0 10px}
#contents a{text-decoration:none;}
#contents a:hover{text-decoration: underline;}
#contents td {margin:2px; padding:5px;}
#contents .name * {color:Black; font-weight:600;}
#contents .price {font-weight:normal; margin:10px 0 0;}
#itemtype .price em {font-style:normal; font-weight:bold; margin:10px 0; padding:0 4px 0 0;}
#contents .sale-price {color:#e32c3e;}  
#contents .sale-price-bold {color:#e32c3e;font-weight:bold;}
#contents .price-bold {font-weight:bold;margin:10px 0 0;}
#itemtype .itemform .price {margin:10px 0;}
#itemtype .itemform .price-bold {font-weight:bold; margin:10px 0;}
#itemtype .itemform .sale-price, #itemtype .itemform .sale-price-bold {margin:10px 0;}
#itemtype .itemform .sale-price-bold {font-weight:bold}
#itemtype .itemform .sale-price-bold em {background:#ffffff; color:#e32c3e; font-style:normal; font-weight:bold; margin:10px 0; padding:0 4px 0 0;}
#itemtype .itemform .sale-price em {color:#e32c3e; font-style:normal; margin:10px 0; padding:0 4px 0 0;}
#itemtype .code {font-style:normal; margin:10px 0;}
#itemtype .code em {font-style:normal; margin:10px 0;}
#itemtype .itemavailable {color:Black; margin:8px 0;}
#itemtype .itemavailable em {color:Black; font-style:normal; font-weight:bold; margin:8px 0 8px 4px;}
#itemtype .itemoption {display:inline; font-weight:bold; margin:2px 0;}
#itemtype .multiLineOption {display:block; margin:5px 0; font-weight:normal;}

 /* CAT-ALL LIST OR IMAGE VIEW OR PRINT TO PDF NEED TO FORMAT FOR PRINT keep smaller width */
#cat-container {width:100%; max-width:1100px; text-align:left; margin:0 auto; border:0; background:transparent}
#cat-list-container {margin:0 auto; width:100%; max-width:670px; text-align:left;}
.showimg {height:400px}
.noimg {height:270px}
#cat-list-img-div {page-break-inside:auto }
#cat-list-img-div img {padding-right:3px}
#cat-list-img-div a {text-decoration:none}
#cat-list-img-div a:hover {text-decoration:underline}
.cat-list-img-item {page-break-inside:avoid; page-break-after:auto }
.cat-list-img-item {width:205px; margin:0 0 0 10px; overflow:hidden}
.cat-list-img-item img {padding:2px; margin-left:auto; margin-right:auto}
.cat-list-img-item a {text-decoration:none}
.cat-list-img-item a:hover {text-decoration:underline}
/*button format and hide buttons when on save-print*/
.btn-group .btn { background-color: Lavender; border: 1px solid silver; color: black; padding: 5px 8px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; cursor: pointer; float: right;}
.btn-group .button:not(:last-child) { border-right: none; /* Prevent double borders */}
.btn-group .btn:hover { background-color: silver;}
.btn-group .btn:focus {  outline: none;}
@media print {.btn-group {display: none }}

.btn-group1 .btn { background-color: Lavender; border: 1px solid silver; color: black; padding: 5px 8px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; cursor: pointer; float: left;}
.btn-group1 .button:not(:last-child) { border-right: none; /* Prevent double borders */}
.btn-group1 .btn:hover { background-color: silver;}
.btn-group1 .btn:focus {  outline: none;}
@media print {.btn-group1 {display: none }}

@media all {.page-break{ display: none }}
@media print {.page-break {display: block; page-break-before: always;}}

/* Disable select/copy, used in search indexing, if try to manual select freezes too much data*/
.noselect {user-select: none;}

/*item page view indentation*/
#itempage {margin:0 15px 0 30px}

/*NAME ARABIC fields used in menu*/
.harabic {font-family: 'Noto Kufi Arabic', 'Open Sans', sans-serif;}

/*ARABIC fields, add the lang tag to div,p,span,etc*/
.ar {direction: rtl; text-align:right; margin-right:15px; font-family:'Noto Naskh Arabic', 'Open Sans', sans-serif}
:lang(ar) {unicode-bidi:embed; direction:rtl; text-align:right}

/*CUSTOM COLOR, FONT, BG, SHADING */
.ts {text-shadow: 2px 4px 3px rgba(0,0,0,0.3)}
.tsd {text-shadow: 1px 0px 0px Black}
.tsl {text-shadow: 1px 0px 0px White}
.b {font-weight:600}
.i {font-style:italic}
.f0 {font-size:.8em}
.f1{font-size:.85em}
.f2{font-size:.9em}
.f3{font-size:.95em}

.red1{color:red}
.bluedk1 {color:Navy}
.blue1{color:#02aace}
.aqua1{color:LightSeaGreen}
.green1 {color:SeaGreen}
.purple1{color:MediumVioletRed} 
.orange1 {color:coral}
.gray1{color:Silver}
.graydk1{color:DimGray}
.white1{color:white}
.w100 {width:100%}
.w99 {width:99%}
.w98 {width:98%}
.w95 {width:95%}
.w90 {width:90%}
.w85 {width:85%}
.w80 {width:80%}
.w75 {width:75%}
.w70 {width:70%}
.w65 {width:65%}
.w60 {width:60%}
.w55 {width:55%}
.w50 {width:50%}
.w45 {width:45%}
.w40 {width:40%}
.w35 {width:35%}
.w33 {width:33%}
.w30 {width:30%}
.w25 {width:25%}
.w20 {width:20%}
.w15 {width:15%}
.w10 {width:10%}

.bbd {border-bottom: 1px solid #a0a0a0; box-shadow: 0 2px 0 #c6c6c6;} /*nice double border bottom*/
.bggrayfade {background: linear-gradient(Silver, Whitesmoke) }
.bgbluefade {background: linear-gradient(#02aace,Lavender) }

.bgblueshine {background: linear-gradient(to right, #02aace 5%, #68bdcf 15%,#fcfefe 49%,#fcfefe 51%, #68bdcf 90%, #02aace 100%)}

.bggreenshine {background-image: linear-gradient(to right, 
SeaGreen 5%,
yellowgreen 25%,
greenyellow 50%,
yellowgreen 75%,
SeaGreen)}
.bgaquashine {background-image: linear-gradient(to right, 
Teal 5%,
MediumAquaMarine 25%,
PaleGreen 50%,
MediumAquaMarine 75%,
Teal)}

.bgpurple {background-color:SlateBlue} 
.bgblue {background-color:#02aace}
.bgaqua {background-color:LightSeaGreen}
.bgwhite{background-color:White}
.bggray {background-color:Silver}
.bggreen {background-color:PaleGreen}
.bggraylt {background-color:WhiteSmoke}
.bgorange {background-color:Coral}
.bgorangelt {background-color:Linen}
.bgyellow {background-color:LemonChiffon}
.bgdown{background-image:url('/lib/yhst-141393581866279/down.gif');background-repeat:no-repeat}
.bggraydesign{background-image:url('/lib/yhst-141393581866279/bg-gray-design.jpg')}
.bgwood{background-image:url('/lib/yhst-141393581866279/bgwood.jpg')} /*img chg to stucco or back*/
.bgpencil {background-image: url('/lib/yhst-141393581866279/pencil.png');
    background-repeat: no-repeat;}

.rounded {border-radius:5px; padding:2px}
.rounded-top {border-top-left-radius:5px; border-top-right-radius:4px; padding-top:2px}
.rounded-bottom {border-bottom-left-radius:5px; border-bottom-right-radius:5px; padding-bottom:2px}
.circle {border-radius:50%; padding:5px}
.circleinset {width:20px;height:20px;display:inline-block;border-radius:50%;border:1px solid Black;
box-shadow:inset 3px 3px 4px Black;}

/*FLOATING DEPTH SHADOWS, top layers = higher depths*/
.z-depth-1{box-shadow:0 4px 14px 0 rgba(0,0,0,0.18)}
.z-depth-2{box-shadow:0 6px 18px 0 rgba(0,0,0,0.21)}
.z-depth-3{box-shadow:0 17px 40px 0 rgba(0,0,0,0.25)}
.z-depth-4{box-shadow:0 25px 50px 0 rgba(0,0,0,0.28)}
.z-depth-5{box-shadow:0 40px 70px 0 rgba(0,0,0,0.31)}

/*ONE LAYER DEPTH was already using below*/
.box {box-shadow:6px 6px 9px rgba(0,0,0,0.3)}
.boxdk {box-shadow:3px 3px 3px rgba(0,0,0,0.6)}
.boxleft {box-shadow:-6px 6px 9px rgba(0,0,0,0.3)}
.boxsq {box-shadow:6px 6px 0 rgba(0,0,0,0.3)}