@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*/

/* 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 - use mobile fields and template on all*/
#mobileContactUsPhone { border-top: 1px solid #d9d9d9; background-color: #ffffff; margin-top: 10px; text-align: center; padding-top: 30px; font-size: 20px; font-weight: bold}

/*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;
}

#heroImage img,
#heroImage picture {
    max-width: 100%;
    height: auto;
}

/* 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}}

/*For text when float over image on hero*/
.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: 8px}
h4, h5, h6 { margin-top: 8px; margin-bottom: 6px}
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; padding: 0; margin: 15px}
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:#e82235}
em, i {font-style:italic;}
input.addtocartInp {border:6px solid #cecede; margin:6px 5px 0 5px; padding:3px; background:#e82235;  color:#000000; font-weight:bold; font-size:.8em; text-align:center; cursor:pointer}
input {cursor:pointer; margin:0}
hr {border-top:1px solid #c19317; 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:#e82235}  
.sale-price-bold {color:#e82235; 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:#e82235; color:#ffffff; 
font-weight:600; font-size: .75em; padding:0 5px; text-align:center; cursor:pointer }

/* IMG */
image {background:transparent}
img {border-style:none; background:transparent; margin:0}
.thumb-img {max-width:175px; max-height:175px} /*home and section pages*/
.inset-img {max-width:200px; max-height:200px} /*thumbnails on item pages inset imgs*/
.item-img {max-width:330px; max-height:330px} /*store directory, pages top USED??*/
.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}

/* pre classes REPLACED WITH LINES RTML function, keep for reference .ptext still in use on mobile home */
/* 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:#3275ce; border-top: 2px solid DeepSkyBlue} 
#top-border {background-image: linear-gradient(to right, 
#bc9a43 2%,#feeb9e 8%,#feeb92 17%,#b68d4c 25%, 
DeepSkyBlue 25%, DeepSkyBlue 26%,
#3275ce 26%, #3275ce)}

/*REM gold border border top #xxxxtop-border-border {background-image: linear-gradient(to right, 
#bc9a43 2%,#feeb9e 8%,#feeb92 17%,#b68d4c 25%,
#15b0f6 25%, #15b0f6 )}*/

/*SUPERBAR*/
#ys_superbar {width:60%!important; max-width:652px!important; position:relative !important; color:#000000; font-size:.8em; line-height:22px}
#ys_cpers {float:left}
#yfc_mini {float:left !important}
.ys_clear {clear:both}
#yscp_welcome_msg {margin:0 5px; display:none; color:White}
#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}

/* CUST REG The popup for customer registration (available on Pads and larger only), Divs set by superloader and js are formatted incorrectly for pad sizes, this fixes so smaller screens show close option, otherwise it is  off screen.*/

/*#custRegDiv a.container-close { top:15px; left:1px}
.yui-skin-sam .yui-panel .bd, .yui-skin-sam .yui-panel .ft { background-color:White }
.yui-skin-sam .yui-panel .bd { padding:0px; }
#custRegDiv #iframe_id {border:1px solid Black; padding:0px; }
#custRegDiv_h.hd { display:none; }
#custRegDiv_mask.mask { background-color:Black; opacity:0.5;}
#loadingDiv  {height:210px; background:WhiteSmoke;}
img.loadingImg {margin-top:90px; margin-left:20px;}
#custRegDiv_c, #custRegDiv a.container-close, 
#custRegDiv #iframe_id, #custRegDiv #loadingDiv, #yscp_iframe_bd, 
#custRegDiv .yui-skin-sam {float:left; width:100%; max-width:679px}
#custRegDiv:before {content:" At this time registration is limited to a  FB, Yahoo, or AOL account.  You can shop and purchase without registration. "}
#custRegDiv:before {background-color:White; font-size:.75em; display:block; text-align:center; height:40px} */

/* SOCIAL MEDIA CURRENT GET CSS IF USE*/
#ys_social_media {width:100%; height: 25px; display:block; float:right; margin-right:10px}
#ys_social_fblike {width: 30%}
#ys_social_tweet {width: 30%}
#ys_social_pinterest {width: 30%}
#ys_social_v_separator {margin-left:5px; margin-right:5px}


/*LOGO,nav*/
#logo-container{margin:0 auto; width:100%; max-width:1360px}
#header {height:78px}
.brandmark {font-size: 1em}
.brandmark a, .slogan a {color:#3275ce; text-decoration:none; font-weight:normal}
.brandmark a:hover, .slogan a:hover {color:#3275ce; text-decoration:none; font-weight:normal}
.brandmark img {margin-left:10px}
.slogan {width:45%; height:78px; color:#3275ce; font-size:.9em; padding-right:10px}
/*hide slogan on 539px and less*/
@media (max-width:539px){.brandmark {width:90%}}
@media (min-width:540px){.brandmark {width:45%}}
@media (max-width:539px){.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 text in span 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 #daa520;  border-top: 1px solid #daa520;  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: #3275ce; 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:#3275ce; 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: 2px 5px 0 0; display:inline-block; padding: 5px; border: 1px  #daa520; border-style:hidden dashed dashed hidden; background: linear-gradient(ivory, oldlace)}
.main-cat li:hover {background: linear-gradient(white, ivory)}
.main-cat li a {text-decoration:none; color:#404040; font-size:.85em; font-weight: bold; vertical-align:text-top;}
.main-cat li a:hover {text-decoration:underline; color:#e82235}
@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:99%}}
@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:#15b0f6; 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:YellowGreen; 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:YellowGreen; 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:130px; margin:2px 0 0 0; overflow:hidden; font-size:.7em}
.tab-price {width:100%; height:50px; margin:2px 0 0 0; overflow:hidden; font-size:.7em;}
.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:#404040; display: block; width:100%; max-width:750px; min-width:250px}
.toggle__input + label:hover {color:#e82235; text-decoration:underline; background:AliceBlue}
.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:#6d9233}
.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:#404040}
.age-top-label:hover {color:#e82235; 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 #daa520; border-bottom: 1px dotted #daa520}
#all-cat li a {text-decoration:none; color:#404040; font-size:.9em; vertical-align:text-top;}
#all-cat li a:hover {text-decoration:underline; color:#e82235}
@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:10px; padding-bottom:10px; 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:90%; max-width:960px; font-size:.85em; text-align:center; display:block; padding:10px}

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

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

/* SEARCH note on Sept 2018 removed the ysearch, still in mobile*/

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

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

/*box for search input text */
 #tipue_search_input {flex:1; border:1px solid #15b0f6; border-radius:4px; padding:0 0 0 6px; display:block;}

::placeholder {font-size: .75em; font-style: italic; color:gray; text-align:center}

/*button for the search query submit*/
#tipue_search_button {
 background-color:#87cefa;
 background-image: url('https://s.turbifycdn.com/aah/yhst-141393827066280/img-36436.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-141393827066280/img-36437.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-141393827066280/img-36437.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:#e82235}
.tipue_search_content_url {font-size:.8em}
.tipue_search_content_url a {color:#000000; text-decoration: none}
.tipue_search_content_url a:hover {color: #e82235}
.tipue_search_content_text {font-size: .8em; color: #000000; margin-top: 3px;}
.h01 {background-color: #87cefa; color:#404040; 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: 300px; 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 other */
#itemarea {margin:8px 15px 0 10px;}
#itemarea:after {clear:both; content:"."; display:block; height:0; visibility:hidden}
.item-img {padding-right:4px}
@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%}}
@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: #3275ce; font: bold 1.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,some may not be 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:#e82235;}  
#contents .sale-price-bold {color:#e82235;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:#e82235; font-style:normal; font-weight:bold; margin:10px 0; padding:0 4px 0 0;}
#itemtype .itemform .sale-price em {color:#e82235; 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 keep smaller width */
#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 search indexing data too large*/
.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 COLORS, 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:bold}
.i {font-style:italic}
.f0 {font-size:.8em}
.f1{font-size:.85em}
.f2{font-size:.9em}
.f3{font-size:.95em}

.red1 {color:red}
.blue1 {color:SteelBlue}
.bluedk1 {color:Navy}
.purple1{color:MediumVioletRed} 
.green1 {color:SeaGreen}
.gold1 {color:DarkGoldenRod}
.orange1 {color:coral}
.chocolate1 {color: Chocolate}
.black1 {color: Black}
.tan1 {color: Tan}
.graylt1 {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) }

.bgblueshine {background: linear-gradient(to right, #0155b4 5%, #3275ce 15%,#9fc8fe 49%,#9fc8fe 51%, #3275ce 90%, #0155b4 100%)}

.bgbluefade {background: linear-gradient(#3275ce, lavender) }

.bggoldfade {background: linear-gradient(Goldenrod, LemonChiffon) }
.bggold {background: linear-gradient(to right, #bc9a43 6%,#feeb9e 31%,#feeb92 66%,#b68d4c 100%)}
.bggoldlt {background-color:PaleGoldenRod}
.bgtan {background-color:tan}
.bgblue {background-color:#3275ce}
.bgwhite{background-color:white}
.bggray {background-color:silver}
.bggraylt {background-color:whitesmoke}
.bgyellow {background-color:LemonChiffon}

.bgdown{background-image:url('/lib/yhst-141393827066280/down.gif');background-repeat:no-repeat}
.xxxxbggoldbar{min-height:3px; background-image:url('/lib/yhst-141393827066280/bggoldbarbig.jpg');background-repeat:repeat-x}
.bggoldbar {min-height:3px; background: linear-gradient(to right, #bc9a43 6%,#feeb9e 31%,#feeb92 66%,#b68d4c 100%)}
.bgartsy{background-image:url('/lib/yhst-141393827066280/bgartsy.gif')}
.bgbooks{background-image:url('/lib/yhst-141393827066280/bgbooks.jpg')}
.bgfreeshipping{background-image:url('/lib/yhst-141393827066280/shipping.gif'); background-repeat:no-repeat; background-position:left}

.rounded {border-radius:5px; padding:2px}
.rounded-top {border-top-left-radius:5px; border-top-right-radius:5px; 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 = closer to reader*/
.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)}