/**************************************************************************************/
/*** ArtReach Children's Theatre Plays Main Stylesheet - 07/09/21
/*** Mods: 4/6/25, 5/14/25 (font resizing), 6/1/25 dev sizes
/***              6/9/25 (font bold reset)
/***              6/19/25 (add instagram & blue sky icons, etc)
/***              6/30/25 (spacercell adjust.)
/***              5/21/26 (Newsletter Signup box, etc.)
/**************************************************************************************/

/*** Basic setup, fonts, color scheme, etc. ***/
/*
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400);
body, p, td, div { font-family: 'Open Sans', sans-serif; font-size: 12pt; }
body, p, td, div { font-family: arial, verdana, sans-serif; font-size: 12pt; }
*/
body, p, td, div { font-family: arial, sans-serif, 'Open Sans', verdana; font-size: 12pt; }
.inline, h1, h2, h3, h4, h5, h6 { display: inline; }
h1 { font-size: 2rem; font-weight: bold; padding: 0px; border: none; }
h2, h3, h4, h5, h6 { font-family: arial, sans-serif, verdana; font-size: 1.5rem; font-weight: bold; padding: 0px; border: none; }
.toptext, .dropbtn { font-size: 1rem; }

/*** Color scheme ***/
/* body { background-image: url( "images/____background03b.jpg" ); } */
body { background-color: white; }  //cornsilk; }
table.devicescreen { background-color: white; }

p, td, div, body, .devicescreen, font[color="black"] { 
    color: darkslategray; }

.top, .topbar, .topbar-cached, .toptext, .dropdown, .dropdown-content, .mobilemenu-active,
    a.prevplaylink, a.nextplaylink, a.firstplaylink, a.lastplaylink { 
     background-color: darkorange; color: white; font-weight: bold; }

.dropdown-content a { color: white; }

.titleareacell, .titletable, .titlecell, .titletextcell, .titlepiccell {
     background-color: darkgreen; color: white; }

.contentcell, .spacercell, titleareacell { 
    background-color: white; color: darkslategray; }

.footertable, .footercell, .footertext, .footer, .footerbottom {
    background-color: darkgreen; color: white; font-size: 10pt; }

.titletopcell, .titledatacell, .titlepictable, .titlebottomcell, .titlepicturetable, titlepicturecell { 
   background-color: inherit; color: inherit; text-color: inherit; }

/*** Dropdown menus at top nav bar ***/

.dropdown { 
  position: relative; display: inline-block; }

.dropdown-content  { 
  position: absolute; top: 38px; left: -4px; z-index: 4;   
  width: 180px; padding-top: 0px;
  display: none; }

.dropdown-content a, .dropdown-content-active a  {
  text-decoration: none;
  padding-left: 4px; padding-top: 8px; padding-right: 2px; padding-bottom: 8px;
  border-bottom: 1px solid white; 
  display: block; }

.dropdown-content a:hover, .dropdown-content-active a:hover  {
  font-weight: bold; 
  background-color: darkslategray;
  color: white; padding-top: 8px; padding-bottom: 8px; }

.dropdown:hover .dropdown-content {
  display: block; cursor: pointer; }

/*
div.dropdown-content { z-index: 999; }
div#dropdownfree { z-index: 999; }
*/

/*** Dropdown menus clicked active from top nav bar ***/

.dropdown-content-active {   
  position: absolute; top: 38px; left: -4px; width: 170px;
  z-index: 4; cursor: pointer; display: block; }

/*** Do not allow dropdown click on hoverable devices, desktops, etc. ***/

@media (hover: hover) {
    .dropdown-content-active { display: none; }
} 

/*** Small / tiny mobile devices menu ***/

.mobilemenuicon {  align: left; 
  position: relative; display: inline-block; }

table.mobilemenu, div.mobilemenu { display: none; align: left; }
p.mobilemenu-active { align: left; display: inline; }

.mobilemenu-active, .mobilemenuTopActive {    
  z-index: 9; padding-left: 4px; padding-top: 0px; display: block; cursor: pointer; }

/*** Dropdown menus from mobile menu icon ***/

#mobilemenumain.mobilemenu-active  {   
  position: fixed; top: 48px; left: 0px; width: 136px; }

#mobilemenuplays.mobilemenu-active  {   
  position: fixed; top: 48px; left: 136px; width: 170px; }

#mobilemenuorder.mobilemenu-active  {   
  position: fixed; top: 48px; left: 136px; width: 170px; }

#mobilemenufree.mobilemenu-active  {   
  position: fixed; top: 48px; left: 136px; width: 170px; }

#mobilemenuabout.mobilemenu-active  {    
  position: fixed; top: 48px; left: 136px; width: 170px; }

#mobilemenuplays.mobilemenuTopActive  {   
  position: fixed; top: 20px; left: 0px; width: 170px; }

a.mobilemenu {
  display: block;   
  padding-bottom: 10px; padding-top: 10px;
  border-bottom: 1px solid white; border-top: 0px solid white; }

a.mobilemenu:hover {  
  background-color: darkslategray; color: white; font-weight: bold;
  padding-top: 10px; padding-bottom: 10px; }

/*** Links ***/

a { text-decoration: none; } 

a:link { color: blue; text-decoration: none; }
a:active { color: blue; text-decoration: none; }
a:visited { color: blue; text-decoration: none; }

a.dropdown:link, a.dropdown-content:link, p.dropdown-content:link, a.top:link,
a.dropdown:active, a.dropdown-content:active, p.dropdown-content:active, a.top:active, 
a.dropdown:visited, a.dropdown-content:visited, p.dropdown-content:visited, a.top:visited, 
a.footer:link, a.footer:active, a.footer:visited,
a.mobilemenu:link, a.mobilemenu:active, a.mobilemenu:visited
   { color: white; text-decoration: none; font-weight: bold; }

a:hover, a.dropdown:hover { 
  text-decoration: none; cursor: pointer; 
  color: white;  background-color: darkslategray;
  /*color: darkgreen; text-color: darkgreen;  background-color: ghostwhite; */
  padding-top: 2px; }

/*** Images, stretch, static, etc. ***/

img { 
    -webkit-max-width: 96%;
    -moz-max-width: 96%;
    -ms-max-width: 96%;
    max-width: 96%; 
    height: auto;  
    box-shadow: 7px 7px 6px darkslategray; 
    padding-bottom: 2px; padding-right: 2px; padding-left: 0px;
    margin-bottom: 12px; margin-right: 10px; } 
/*img { -ms-interpolation-mode: bicubic; }*/

img.stretch {
   width: 100%; max-width: 100%; max-height: 100%; object-fit: contain; 
   box-shadow: none; padding: 0px; margin: 0px; }

img.static { 
    max-width: none; height: auto;  
    box-shadow: none; padding: 0px; 
    margin-bottom: 10px; margin-right: 10px; }
 
img.fill-right, img.fill-left {
    display: inline; max-width: 100%; height: auto;
    box-shadow: none; padding: 0px; margin: 0px; }
img.fill-left { padding-right: 10px; }
img.fill-right { padding-left: 10px; }

img.flat { 
    max-width: 100%; height: auto;
    box-shadow: none; padding: 0px; margin: 0px; } 

.imagetext { 
    position: absolute; top: 50px; left: 40px; 
    color: white; font-size: 16pt; font-weight: bold; }

img.topicon:hover { background-color: darkorange; padding: 0px; }

/*img.horizbar { width: 80%; height: 6px; box-shadow: none; border: none; } */

/*** other stuff ***/

.keep { align: center; min-width: 100%; display: inline; }
.nodisplay { display: none; }
.ignore { display: none; }
.centered { text-align: center; }
.ifanywidth { display: inline; }
p.scaledown { }

/*** Media queries ***/
@media ( pointer: fine | course | none ) { }
@media ( hover: hover | none ) { }
@media ( any-pointer: fine | course | none ) { }
@media ( any-hover: hover | on-demand | none ) { }

/**************************************************************************************/
/*** Default to full width screen, option for max screen width (1080px), etc.
/**************************************************************************************/

table.devicescreen { 
    width: 98%; align: center; border: none; border-spacing: 0px;   /* was 100% */
    border-collapse: collapse; padding: 0px; }
td.spacercell, td.titleareacell, td.titlecell, td.titletopcell, td.contentcell { padding: 0px; }
table.playlisttable td { padding: 6px; }

/*** New format, full width stretch ***/
table.newdevicescreen { 
    width: 100%; align: center; border: none; border-spacing: 0px; 
    border-collapse: collapse; padding: 0px; }
.newdevicescreen { width: 100%; position: relative; top: 40px; left: 0px; border: none; }

/*** Use this to allow 100% full screen width stretch ***/
/*
.devicescreen { width: 100%; position: relative; top: 40px; left: 0px; border: none; }
.topbar { width: 100%; position: fixed; top: 0px; left: 0px; z-index: 9; } 
.topbar-cached { width: 100%; position: fixed; top: 120px; left: 0px; z-index: 9; }
*/
/*** Use this to set max width on wide screens, desktops, etc. ***/
.devicescreen { position: relative; top: 40px; left: 0px; max-width: 1080px; } 
.topbar { width: 100%; position: fixed; top: 0px; left: 0px; z-index: 9; } 
.topbar-cached { width: 100%; position: fixed; top: 120px; left: 0px; z-index: 9; }

/*
.topbar { width: 100%; max-width: 1080px; 
                 position: fixed; top: 0px; z-index: 9; 
                 left: -webkit-calc( (100% - 1080px) / 2) );
                 left: -moz-calc( (100% - 1080px) / 2) );
                 left: calc( (100% - 1080px) / 2) ); }
*/

/**************************************************************/
/*** If mobilemenu page, set width to tiny/small size ***/
/*
#mobilemenuscreen.devicescreen {
     align: center;  border: none; position: relative; top: 40px; left: 0px; 
     width: 100%; max-width: 500px; } 
#mobilemenutopbar.topbar { 
     width: 100%; max-width: 500px; 
     position: fixed; top: 0px; left: calc( (100% - 500px) / 2) ); }
*/
#mobilemenucontentcell { background-color: darkgreen; height: 110vh; }

/**************************************************************/
/*** Newsletter Signup box, buttons, etc. ***/

   .SignupBtn1 {height:34; background-color:darkorange; border: none; }  
   .SignupBtn1:hover {cursor:pointer; }
   .SignupBtn2 {height:28; width:168; border: none; background-color:inherit; margin-top:-2; margin-bottom:-5; }
/*      background-image: url("images/____emailsignup1.jpg"); background-size: cover; margin-top:-2; margin-bottom:-5; } */
   .SignupBtn2:hover {cursor:pointer; }
   .SignupBtn2img {height:30; width:180; }
   .SignupLink:hover {cursor:pointer; }
   .SignupImage {content:url(images/____newsletter-icon3orange.jpg); height:32; width:34; }
   .SignupTable {margin-top:-8; }   /* border-radius:10px; } */

/**************************************************************/

.titletable { width: 100%; z-index: 3; } 
.title, .titletable, .titlecell, .titletext, .titlepictable { font-size: 12pt; }
.titlepictable, titlepicturetable { width: 100%; align: center; }
.titlepic { align: center; }  // z-index: -1; }

/*** Use this for title single pic, turn off slide show ***/
   .titlepictable, .titlepiccell, .slide4, .slide4b, .slide4c, .titlepiccell img { 
       width: 0px; height: 0px; display: none; }
/*** Use this for title slide show pics, turn off single pic ***/
/* .titlepicturetable, .titlepicturecell, .titlepicture (display: none; } */

.devicescreen { position: relative; top: 46px; }
.newdevicescreen { position: relative; top: 46px; }
.topcell-left, .topcell-logo { height: 56px; min-height: 56; max-height: 56px ; }
img.toplogopic { width: 130; height: auto; vertical-align: bottom; } 
img.menuicon { margin-top: 7px; max-width: none; height: auto; box-shadow: none; padding: 0px; }
.spacercell { height: 12px; }
.titletopcell { height: 4px; }
.titletextcell {padding: 6px; }
.contentcell { position: relative; top: 2px; min-height: 110vh; }
.footertable { width: 100%; align: center; border: none; border-spacing: 0px; 
                         border-collapse: collapse; }
.footertable, .footertable td { padding: 12px; }

img.horizbar { width: 80%; height: 4px; box-shadow: none; border: none; }
blockquote { margin-left: 24px; margin-right: 24px; }

hr[align=center], hr[align=left] { 
    align: center; display: block; width: 94%; height: 0.2em; 
    margin-top: 0.5em; margin-bottom: 0.5em;
    margin-left: auto; margin-right: auto; 
    border-color: lightgray; border-style: inset; border-width: 2px; }

/*** Prev & Next play links at top of play pages ***/
a.prevplaylink, a.nextplaylink, a.firstplaylink, a.lastplaylink {
   position: fixed; top: 56px; z-index: 9;  
   background-color: darkorange; color: white;
   font-weight: bold; text-decoration: none; padding: 6px; display: inline; }
/* if topbar 100% */
a.prevplaylink, a.lastplaylink { position: fixed; left: 0px; }
a.nextplaylink, a.firstplaylink { position: fixed; right: 0px; }

/*** Search box (ExpertRec) ***/
table.searchbox { display: none; }
table.searchbox-active { 
   align: right; width: 650px; position: fixed; top: 57px; right: 10vw; z-index: 2; 
   background-color: ghostwhite; display: block; }
td.searchbox { 
   width: 640px; display: block; background-color: ghostwhite; 
   height: 78vh; max-height: 78vh; align: right; text-align: right; }
p.searchbox { align: right; text-align: right; }
a.searchclose:hover, a.searchundo:hover, img.undoicon:hover {
   text-decoration: none; background-color: inherit; }
img.undoicon { display: none; }
/* 
   width: 16px; height: auto; box-shadow: none; border: none;
   padding: 0px; margin: 0px; position: relative; top: -3px; }
*/
/*
a.prevplaylink, a.lastplaylink { 
   position: fixed; 
   left: -webkit-calc( (100% - 1080px) / 2) );
   left: -moz-calc( (100% - 1080px) / 2) );
   left: calc( (100% - 1080px) / 2) ); }
@media screen and (max-width: 1080px) {
    a.nextplaylink, a.firstplaylink { position: fixed; right: 0px; }
}
@media screen and (min-width: 1081px) {
    a.nextplaylink, a.firstplaylink { position: fixed; right: calc( ( (100% - 1080px) / 2 ) ) ; } 
}
*/

/*** Play pages ***/
.playinfotable { background-color: white;
    box-shadow: 8px 8px 6px darkslategray; border: 1px solid lightgray; 
    padding-bottom: 0px; padding-right: 2px; 
    margin-bottom: 8px; margin-right: 8px; } 

.contab { width: 80%; align: center; }
.flexbox { width: 60% }

/*** Bio pic on play info pages ***/
img.ksmbiopic { 
    max-width: 100%; 
    height: auto;   
    box-shadow: 6px 6px 4px darkslategray; 
    padding-bottom: 2px; padding-right:2px; 
    margin-bottom: 10px; margin-right: 20px; } 

/*** SPP order pages, add to cart ***/
/*.orderspptable { background-color: white; border: 1px solid lightgray; }*/
table.orderspptable { background-color: white;  border: 1px solid gainsboro;  }
/*td.ordersppseparator { background-color: lightgray; height: 2px; max-height: 2px; padding: none; }*/
img.ordersppicon { 
    float: left; margin-left: 0px; margin-right: 10px; 
    max-width: 100%; height: auto;   
    box-shadow: 5px 5px 4px darkslategray; 
    padding-bottom: 1px; padding-right: 1px; 
    margin-bottom: 4px; }
input[type=image] { width: initial; height: auto; }  /* original image is 106w x 27h */
select[name=quantity] { width: initial; height: auto; font-size: initial; font-weight: bold; margin-bottom: 6px; }

table.tabfloat-left { float: left; }
table.tabfloat-right { float: left; }

.ifhuge { display: none; } .ifnothuge {display: inline; }

/*** Screen width sizes ***/
/*** Tiny: iPhone4/5: 320 portrait, 480 landscape ***/
/*** Small: ***/
/*** Medium: iPad mini: 768 portrait, 1024 landscape ***/
/*** Large: desktops, etc: 1920 max landscape (basically all)

/**************************************************************************************/
/*** Tiny width screen -- very small devices, iPhone4/5, etc.
/**************************************************************************************/
@media screen and (max-width: 520px ) {

  .devicescreen { position: relative; top: 38px; }    /* 38px */
  .newdevicescreen { position: relative; top: 38px; }   /* 38px */
  .topbar, .topbar-cached { font-size: 10pt; }  
  .top { font-size: 10pt; }

  img.toplogopic { width: 116px; height: auto; margin-top: 6px; }
  img.topicon { margin-top: 8px; width: 16px; height: auto; }
  img.tophomeicon { margin-top: 5px; margin-bottom: 2px; width: 36px; height: auto; }
  .spacercell { height: 10px; }  /* 13px */

  .topcell-left, .topcell-logo { height: 48px; min-height: 48px; max-height: 48px ; }  /* 56px */
  .titletopcell, .titletextcell, .titletextcell2 { display: none; }

  /*** Search box (ExpertRec) ***/
  table.searchbox-active { position: fixed; top: 50px; right: 0px; } 
  td.searchbox { width: 100%; max-width: 100%; } 
  .searchclose { display: none; }
  @media screen and (max-width: 420px ) {
      table.searchbox-active { width: 99%; max-width: 99%; }
      /*table.searchbox-active { width: 100%; max-width: 100%; }*/
    }         
  @media screen and (min-width: 421px ) {
      table.searchbox-active { width: 400px; max-width: 92vw; }
    }

  a.prevplaylink, a.nextplaylink, a.firstplaylink, a.lastplaylink  {
     position: fixed; top: 50px; padding: 4px; font-size: 14pt; }

  img.horizbar { width: 98%; height: 4px; box-shadow: none; border: none; }
  img.fill-right, img.fill-left { display: none; }
  blockquote { margin-left: 4px; margin-right: 4px; }

  .topcell-left            { width: 1%; }
  .topcell-menu       { width: 0%; display: none; }
  .topcell-logo         { width: 0%; display: none;}
  .topcell-home       { width: 5%; }
  .topcell-plays        { width: 7%; }  
  .topcell-reviews    { width: 0%; display: none; } 
  .topcell-shop        { width: 9%; }
  .topcell-free           { width: 8%; }
  .topcell-about       { width: 10%; }
  .topcell-contact    { width: 0%; display: none; }
  .topcell-news-icon  { width: 0%; }
  .topcell-news-text   { width: 0%; display: none; }
  .topcell-acct-icon  { width: 2%; }
  .topcell-acct-text   { width: 0%; display: none; }
  .topcell-cart-icon   { width: 2%; }
  .topcell-cart-text    { width: 0%; display: none; }
  .topcell-search     { width: 3%; }
  .topcell-blog          { width: 0%; display: none; }
  .topcell-facebook { width: 2%; }
  .topcell-instagram { width: 2%; }
  .topcell-bluesky     { width: 2%; }
  .topcell-pinterest  { width: 0%; display: none; }
  .topcell-right          { width: 1%; }

  .iflarge, .ifmedium, .ifsmall, .ifbig, .ifnottiny { display: none; }
  .ifnotlarge, .ifnotmedium, .ifnotsmall, .ifnotbig, .iflittle, .iftiny { display: inline; }
  .ifhuge { display: none; }

  .footercell-1 { width: 0%; }
  .footercell-2 { width: 100%; font-size: 12pt; }
  .footercell-3 { width: 0%; }

  .contab { width: 94%; align: center; }
  .flexbox { width: 96% }

/*** Order Pages ***/
   input[src*="cartadd9gold"] { width: 70px; height: auto; }
   select[name=quantity] { 
       width: 38px; height: 22px; margin-bottom: 8px; font-size: 11pt; font-weight: bold; }

   body, p, a, td, div { font-size: 10pt; }  /* 10pt */
   font[size="1"] { font-size:   7pt; } 
   font[size="2"] { font-size:   9pt; } 
   font[size="3"] { font-size: 10pt; }
   font[size="4"] { font-size: 11pt; }
/*  font[size="4"] { font-size: 12pt; } mod 4/6/25 */
   font[size="5"] { font-size: 13pt; }
   font[size="6"] { font-size: 16pt; }
   font[size="7"] { font-size: 22pt; }

   body, p, a, td, div { line-height: 0.99; }
   body, p, a, td, div { letter-spacing: -0.0px; }
}

/**************************************************************************************/
/*** Small width screen -- most smartphones, iPhone6+, etc.
/**************************************************************************************/
@media screen and (min-width: 521px) and (max-width: 766px) {

  img.toplogopic { width: 80px; height: auto; }
  img.topicon { margin-top: 8px; width: 20px; height: auto; }
  img.tophomeicon { margin-top: 5px; margin-bottom: 2px; width: 48px; height: auto; }
  .spacercell { height: 8px; }

/*
  .topcell-left { height: 50px; }  /* min-height: 50px; max-height: 50px; }
  .titlebottom { height: 0px; }
*/

  .devicescreen { position: relative; top: 48px; }
  .newdevicescreen { position: relative; top: 48px; }
/*  .top, .topbar, .topbar-cached { font-size: 10pt; } */
  .topbar, .topbar-cached { font-size: 10pt; }  
  .top { font-size: 10pt; }

  table.searchbox-active { 
      width: 400px; position: fixed; top: 56px; right: 1vw; }
  td.searchbox { width: 100%; max-width: 100%; }

  a.prevplaylink::after { content: " Prev"; }
  a.nextplaylink::before { content: "Next "; }
  a.lastplaylink::after { content: " Last"; }
  a.firstplaylink::before { content: "First "; }

  img.horizbar { width: 94%; height: 4px; box-shadow: none; border: none; }
  img.fill-right, img.fill-left { display: none; }
  blockquote { margin-left: 8px; margin-right: 8px; }

  .topcell-left            { width: 1%; }
  .topcell-menu       { width: 0%; display: none; }
  .topcell-logo         { width: 0%; display: none;}
  .topcell-home       { width: 8%; }
  .topcell-plays        { width: 8%; }  
  .topcell-reviews    { width: 12%; } 
  .topcell-shop        { width: 9%; }
  .topcell-free           { width: 8%; }
  .topcell-about       { width: 9%; }
  .topcell-contact    { width: 0%; display: none; }
  .topcell-news-icon  { width: 0%; }
  .topcell-news-text   { width: 0%; display: none; }
  .topcell-acct-icon  { width: 2%; }
  .topcell-acct-text   { width: 0%; display: none; }
  .topcell-cart-icon   { width: 2%; }
  .topcell-cart-text    { width: 0%; display: none; }
  .topcell-search     { width: 4%; }
  .topcell-blog          { width: 0%; display: none; }
  .topcell-facebook { width: 3%; }
  .topcell-instagram { width: 3%; }
  .topcell-bluesky     { width: 3%; }
  .topcell-pinterest  { width: 3%; }
  .topcell-right          { width: 1%; }

  .iflarge, .ifmedium, .iftiny, .ifbig, .ifnotlittle, .ifnotsmall { display: none; }
  .ifnotlarge, .ifnotmedium, .ifnottiny, .ifnotbig, .iflittle, .ifsmall { display: inline; }
  .ifhuge { display: none; } .ifnothuge {display: inline; }

  .footercell-1 { width: 0%; }
  .footercell-2 { width: 100%; font-size: 14pt; }
  .footercell-3 { width: 0%; }

  .contab { width: 90%; align: center; }
  .flexbox { width: 88% }

/*** Order Pages ***/
   input[src*="cartadd9gold"] { width: 90px; height: auto; }
   select[name=quantity] { 
       width: 50px; height: 26px; font-size: 13pt; font-weight: bold; margin-bottom: 12px; }

   body, p, a, td, div { font-size: 12pt; }   /* 11pt */
   font[size="1"] { font-size:   7pt; } 
   font[size="2"] { font-size:   9pt; } 
   font[size="3"] { font-size: 10pt; }  
   font[size="4"] { font-size: 12pt; }
   font[size="5"] { font-size: 13pt; }
   font[size="6"] { font-size: 16pt; }
   font[size="7"] { font-size: 22pt; }

   body, p, a, td, div { line-height: 1; }
   body, p, a, td, div { letter-spacing: -0.3px; }

}

/**************************************************************************************/
/*** Medium width screen -- tablets, iPads, etc.
/**************************************************************************************/
@media screen and (min-width: 767px) and (max-width: 1024px) {

  img.topicon { margin-top: 6px; width: 24px; height: auto; }
  .spacercell { height: 10px; }

/*
  .devicescreen { position: relative; top: 66px; }
  .newdevicescreen { position: relative; top: 66px; }
  .topcell-left { height: 56px; }

  .titlebottom { height: 0px; }
  img.horizbar { width: 90%; height: 6px; box-shadow: none; border: none; }
  blockquote { margin-left: 14px; margin-right: 14px; }
*/

  img.fill-right, img.fill-left { display: none; }

  a.prevplaylink::after { content: " Prev Play"; }
  a.nextplaylink::before { content: "Next Play "; }
  a.lastplaylink::after { content: " Last Play"; }
  a.firstplaylink::before { content: "First Play "; }

  .topcell-left            { width: 1%; }
  .topcell-menu       { width: 0%; display: none; }
  .topcell-logo         { width: 20%; }
  .topcell-home       { width: 7%; }
  .topcell-plays        { width: 7%; }
  .topcell-reviews    { width: 10%; }
  .topcell-shop        { width: 7%; }
  .topcell-free           { width: 6%; }
  .topcell-about       { width: 7%; }
  .topcell-contact    { width: 9%; }
  .topcell-news-icon  { width: 0%; }
  .topcell-news-text   { width: 0%; display: none; }
  .topcell-acct-icon  { width: 4%; }
  .topcell-acct-text   { width: 0%; display: none; }
  .topcell-cart-icon   { width: 5%; }
  .topcell-cart-text    { width: 0%; display: none; }
  .topcell-search     { width: 4%; }
  .topcell-blog          { width: 0%; display: none; }
  .topcell-facebook { width: 3%; }
  .topcell-instagram { width: 3%; }
  .topcell-bluesky     { width: 3%; }
  .topcell-pinterest  { width: 3%; }
  .topcell-right          { width: 1%; }

  .iflarge, .ifsmall, .iftiny, .iflittle, .ifnotmedium { display: none; }
  .ifnotlarge, .ifnotsmall, .ifnottiny, .ifnotlittle, .ifbig, .ifmedium { display: inline; }
  .ifhuge { display: none; } .ifnothuge {display: inline; }

/* img.toplogopic { width: 120; height: auto; } */

  .contab { width: 80%; align: center; }
  .flexbox { width: 70% }

/*** Order Pages ***/
   input[src*="cartadd9gold"] { width: 100px; height: auto; }
   select[name=quantity] { 
       width: 50px; height: 26px; font-size: 13pt; font-weight: bold; margin-bottom: 12px; }

  .footercell-1 { width: 28%; }
  .footercell-2 { width: 44%; }
  .footercell-3 { width: 28%; }

   body, p, td, div { font-size: 11pt; }
   font[size="3"] { font-size: 11pt; }
   font[size="4"] { font-size: 13pt; }
   font[size="5"] { font-size: 14pt; }
   font[size="6"] { font-size: 20pt; }
   font[size="7"] { font-size: 26pt; }

   body, p, a, td, div { line-height: 1; }
   body, p, a, td, div { letter-spacing: -0.1px; }

}

/**************************************************************************************/
/*** Wide screen -- desktops, large notebooks, etc.
/**************************************************************************************/
@media screen and (min-width: 1025px) {
  
  .devicescreen { position: relative; top: 46px; }
  .newdevicescreen { position: relative; top: 46px; }
  .topcell-left, .topcell-logo { height: 58px; min-height: 58; max-height: 58px ; }
  img.toplogopic { width: 130; height: auto; vertical-align: bottom; } 
  img.topicon { margin-top: 6px; width: 24px; height: auto; }
  img.menuicon { margin-top: 7px; max-width: none; height: auto; box-shadow: none; padding: 0px; }
  .spacercell { height: 10px; }
 // .titletopcell { height: 12px; }

  a.prevplaylink::after { -webkit-content: " Prev Play";  content: " Prev Play"; }
  a.nextplaylink::before { content: "Next Play "; }
  a.lastplaylink::after { content: " Last Play"; }
  a.firstplaylink::before { content: "First Play "; }
  a.prevplaylink:after { content: " Prev Play"; }
  a.nextplaylink:before { content: "Next Play "; }
  a.lastplaylink:after { content: " Last Play"; }
  a.firstplaylink:before { content: "First Play "; }

  img.horizbar { width: 80%; height: 4px; box-shadow: none; border: none; }
  blockquote { margin-left: 24px; margin-right: 24px; }

  .topcell-left            { width: 1%; }
  .topcell-menu       { width: 0%; display: none; } 
  .topcell-logo         { width: 8%; vertical-align: bottom; }  /* 14%; */
  .topcell-home       { width: 6%; }
  .topcell-plays        { width: 6%; }   
  .topcell-reviews    { width: 8%; }  /* 14%; } */
  .topcell-shop        { width: 6%; }
  .topcell-free           { width: 5%; }
  .topcell-about       { width: 7%; }  /* 6% */
  .topcell-contact    { width: 8%; }  /* 8% */
  .topcell-news-icon  { width: 1%; }
  .topcell-news-text   { width: 6%; }
  .topcell-acct-icon  { width: 1%; }  
  .topcell-acct-text   { width: 8%; }
  .topcell-cart-icon   { width: 1%; } 
  .topcell-cart-text    { width: 5%; }
  .topcell-search     { width: 4%; }
  .topcell-blog          { width: 0%; display: none; }
  .topcell-facebook { width: 3%; }
  .topcell-instagram { width: 3%; }  /* 0%; } */
  .topcell-bluesky     { width: 3%; }  /* 0%; } */
  .topcell-pinterest  { width: 3%; }
  .topcell-right          { width: 1%; }

  .ifmedium, .ifsmall, .iftiny, .iflittle, .ifnotlarge { display: none; }
  .ifnotmedium, .ifnotsmall, .ifnottiny, .ifnotlittle, .ifbig, .iflarge { display: inline; }
  .ifhuge { display: none; } .ifnothuge {display: inline; }

  .footercell-1 { width: 33%; }
  .footercell-2 { width: 34%; }
  .footercell-3 { width: 33%; }

  .contab { width: 80%; align: center; }
  .flexbox { width: 60% }

/*** Order Pages ***/
   input[src*="cartadd9gold"] { width: initial; height: auto; }

   body, p, td, div { font-size: 12pt; }
   font[size="2"] { font-size: 10pt; }    
   font[size="3"] { font-size: 12pt; }  
   font[size="4"] { font-size: 14pt; }
   font[size="5"] { font-size: 18pt; }
   font[size="6"] { font-size: 24pt; }
   font[size="7"] { font-size: 30pt; }

   body, p, a, td, div { line-height: normal; }
   body, p, a, td, div { letter-spacing: normal; }

}

/**************************************************************************************/
/*** Huge wide screen -- desktops, full screen width 
/**************************************************************************************/
@media screen and (min-width: 1400px) {

  .ifhuge { display: inline; } .ifnothuge { display: none }
  .topcell-reviews    { width: 11%; }  /* 10% */
  .topcell-contact    { width: 7%; }  /* 14% */
  .topcell-news-icon  { width: 1%; }
  .topcell-news-text   { width: 9%; }
  .topcell-acct-icon  { width: 2%; }
  .topcell-acct-text   { width: 7%; }
  .topcell-cart-icon   { width: 2%; }
  .topcell-cart-text    { width: 6%; }

}

/*** END ******************************************************************************/