/* P40: allow the hover info panel to escape the cover crop box. The image
   remains constrained by its fixed slot dimensions; only the info panel may
   extend below the cover. */
.crop-container { overflow: visible !important; }

/* P39: long-menu treatment and navigation hit-layer. Button geometry above remains authoritative. */
.sort-wrapper { z-index: 300 !important; pointer-events: auto; }

/* P39: keep the left/right Newsstand navigation physically above artwork/rails
   so hover and click events reach the buttons. */
.nav-wrapper.nnL,
.nav-wrapper.nnR,
.newsNavL,
.newsNavR {
  position: relative;
  z-index: 900 !important;
  pointer-events: auto !important;
}
.nav-wrapper.nnL img,
.nav-wrapper.nnR img,
.newsNavL img,
.newsNavR img {
  position: relative;
  z-index: 901 !important;
  pointer-events: auto !important;
}

.sort-menu {
  z-index: 500 !important;
  height: 100px;
  padding-bottom: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sort-menu-item { white-space: normal; }
.magazine-menu { min-width: 0 !important; }
.magazine-submenu { width: 250px; max-height: min(62vh, 520px); }
.sort-menu-back {
  border-bottom: 1px solid rgba(59,43,27,.35);
  margin-bottom: 4px;
  font-weight: bold;
}
@media (max-width: 600px) {
  .sort-menu { max-height: 55vh; }
  .magazine-submenu { width: 250px; max-width: calc(100vw - 16px); }
}
/* P40b: info box must clear the physical rails. The cover slot itself rises
   only while hovered so its info panel can paint above the rail artwork. */
.image-wrapper:hover { z-index: 1000 !important; }
.ns-info { z-index: 1001 !important; }

	
	
.dMasthead{
	width: 100%;
}
	
iframe {
  	width: 100%;               /* Responsive width */
  	height: 100%;             /* Fixed height */
  	transform: scale(1.05);
	transform-origin: top center;
	border: 0;
}	
	
.bookshelf {
  /* Set dimensions so the div is visible */
	height:980px;
	width: 950px;
	position:relative;
	background-image:url("../grcsWeb/StudioGrcs/bookshelf.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size:contain;
	transform: translateY(-60px);
}

	
.railtop{
	transform: translate(1px, -1520px);	
	z-index: 100 !important;
	box-shadow: 10px, 3ps; 5px ;
}
.railbottom{
	transform: translate(1px, -1352px);	
	z-index: 100 !important;	
}
	

	
.nav-container{
	transform: translate(427px, 0px)	
}
	
.topText {
	width: 1000px;
    margin: 0 auto;	
	transform: translateY(-50px);
}
	
.topText p {
	width: 900px;
    margin: 0 auto;
	color: #555;
    text-align: justify;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    font-size: 36pt;
	transform: translateY(100px);
}

.dSortedBY{	
	width: 225px;
	height: 60px;
	background-color: transparent;
	color: #000;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-stretch: condensed;
	font-size: 22pt;
	font-weight: bold;
	line-height: 90%
}
.iSortedBY{	
	width: 225px;
	height: 60px;
	background-color: transparent;
	color: #000;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-stretch: condensed;
	font-size: 18pt;
	font-variant-caps: small-caps;
	line-height: 80%
}
.dSort{	
	width: 225px;
	height: 30px;
	background-color: transparent;
	transform: translate(185px, -2009px);
}

/* beta2.22 — bookshelf-local sort menus and cover-over-rail stacking */
.bookshelf {
    position: relative;
}


.sort-wrapper {
    position: relative;
    z-index: 500;
}


.image-wrapper {
    position: relative;
    z-index: 3010;
}

.image-wrapper:hover {
    z-index: 3020 !important;
}

.ns-info {
    z-index: 3030 !important;
}

/* beta2.22 — final Newsstand stacking model */

/* The bookshelf itself is the positioning context. */
.bookshelf {
    position: relative;
}

/* Sort menus must sit above covers and rails. */
.sort-menu {
    position: absolute !important;
    z-index: 5000 !important;
}

/* Sort buttons remain clickable above the shelf contents. */
.sort-wrapper {
    position: relative;
    z-index: 5001 !important;
}

/*
 * IMPORTANT:
 * Do not give .rack-container a z-index. That would create a stacking
 * context and prevent an individual hovered cover from rising above the
 * separate rail container.
 */
.rack-container {
    position: relative;
    z-index: auto !important;
}

/* Rails sit above ordinary covers. */
.rail-container {
    position: relative;
    z-index: 100 !important;
}

/* Normal covers stay behind the rails. */
.image-wrapper {
    position: relative;
    z-index: 1 !important;
}

/* Hovered cover comes forward over the rails. */
.image-wrapper:hover {
    z-index: 1000 !important;
}

/* Its information card follows the hovered cover. */
.ns-info {
    z-index: 1100 !important;
}

/* beta2.22 — sort controls */
.sort-container {
    display: grid !important;
   	grid-template-columns: max-content max-content max-content max-content;
    gap: 80px !important;
    width: 900px !important;
    height: 57px !important;
	margin-bottom: 10px;
    z-index: 6000 !important;
    visibility: visible !important;
    opacity: 1 !important;
	border: solid 0px red;
}

.sort-wrapper {
    position: relative !important;
    display: block !important;
  
    height: 27px !important;
    z-index: 6001 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sort-wrapper img {
    display: block !important;
 
    height: 32px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#sortChronology {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 6002 !important;
}

/* Final stacking model:
   normal covers behind rails; only the hovered cover and its info card
   rise above the rail artwork. */


.image-wrapper {
    position: relative;
    z-index: 1 !important;
}

.image-wrapper:hover {
    z-index: 1000 !important;
}

.image-wrapper:hover .ns-info {
    z-index: 1100 !important;
}

.ns-info {
    z-index: 1100 !important;
}

/* Sort menus sit over rails/covers. */
.sort-menu {
    position: absolute !important;
    z-index: 7000 !important;
}

/* beta2.22 — wider centered sort menus */
.sort-menu {
    min-width: 0px !important;
    width: auto !important;
}
.sort-menu.magazine-submenu {
    min-width: 250px !important;
    width: 250px !important;
}

/* beta2.26 — Departments tray placement */
[data-departments-column] {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

#departments-rack {
    left: 51%;
    top: calc(100% - 50px);
    transform: translate(-50%, -10px);
}

/* beta2.26 — Newsstand navigation hit layer */
.nnL,
.nnR,
.newsNavL,
.newsNavR {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 8000 !important;
}

.nav-container {
    position: relative !important;
    z-index: 7999 !important;
    pointer-events: none;
}

.nav-container .nnL,
.nav-container .nnR {
    pointer-events: auto !important;
}

/* beta2.31 — hover information must clear the navigation arrows */
.nnL,
.nnR,
.newsNavL,
.newsNavR {
    z-index: 8000 !important;
}

.image-wrapper:hover,
.image-wrapper:hover .ns-info {
    z-index: 8500 !important;
}

.ns-info {
    z-index: 9000 !important;
}


.bookshelf {
    --ns-expanded-x: -200px;
    --ns-expanded-y: -60px;
    --ns-expanded-scale: 1.5;

    --ns-info-width: 670px;
    --ns-info-height: 590px;
    --ns-info-x: 0px;
    --ns-info-y: 0px;
}

/*
 * Hover colorizes the cover but DOES NOT raise its stacking order.
 * The cover remains behind the physical rails until clicked/tapped.
 */
.image-wrapper {
    z-index: 1 !important;
}

.image-wrapper:hover img {
    filter: grayscale(0%);
}

/*
 * Click/tap phase one: pull the magazine up 85px.
 */
/*
 * Hover only colorizes. The cover remains behind the rails.
 */
.image-wrapper:hover {
    z-index: 1 !important;
}

.image-wrapper.newsstand-raised,
.image-wrapper.newsstand-expanded {
    z-index: 10000 !important;
}

.image-wrapper.newsstand-raised .ns-cover-link {
    position: relative;
    z-index: 10002 !important;
    transform: translateY(-85px);
    transition: transform .45s ease;
}

/*
 * Click/tap phase two: after the lift completes, double the cover and
 * move it to the configurable final position.
 */
.
/* Keep the pulled cover colorized throughout InfoBox mode. */
.image-wrapper.newsstand-raised img,
.image-wrapper.newsstand-expanded img {
    filter: grayscale(0%) !important;
}

.image-wrapper.newsstand-expanded .ns-cover-link {
    position: relative;
    z-index: 10002 !important;
    transform-origin: center bottom;
    transform:
        translate(
            var(--ns-expanded-x),
            var(--ns-expanded-y)
        )
        scale(var(--ns-expanded-scale));
    transition: transform .6s ease;
}

/*
 * The InfoBox is a bookshelf-level object, centered independently of
 * whichever cover was selected.
 */
.bookshelf > .ns-info {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: var(--ns-info-width) !important;
    height: var(--ns-info-height) !important;

    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;

    transform:
        translate(
            calc(-50% + var(--ns-info-x)),
            calc(-50% + var(--ns-info-y))
        ) !important;

    box-sizing: border-box !important;

    padding: 18px 22px;
    background: rgba(20,20,20,.96);
    color: #fff;
    border: 2px solid goldenrod;
    border-radius: 6px;
    box-shadow: 7px 7px 10px #000;

    text-align: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 10001 !important;

    transition:
        opacity .45s ease,
        visibility 0s linear .45s;
}

/*
 * InfoBox appears only after the cover has completed its 85px lift and
 * entered the enlarged/final-position phase.
 */
.bookshelf > .ns-info.newsstand-info-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10001 !important;

    transition:
        opacity .45s ease,
        visibility 0s linear 0s;
}

/* Cover remains above the InfoBox during the expanded phase. */
.image-wrapper.newsstand-raised .ns-cover-link,
.image-wrapper.newsstand-expanded .ns-cover-link {
    z-index: 10002 !important;
}

/* Info typography */
.bookshelf > .ns-info .ns-card-title {
    display: block;
    margin: 0 0 8px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    color: #fff;
    font-size: 22pt;
    line-height: 1.05;
}

.bookshelf > .ns-info .ns-card-part {
    display: block;
    margin: 0 0 6px;
    font-family: Baskerville, "Palatino Linotype", Palatino,
        "Century Schoolbook L", "Times New Roman", serif;
    color: #fff;
    font-size: 18pt;
    line-height: 1.05;
}

.bookshelf > .ns-info .ns-card-author {
    display: block;
    margin-top: 4px;
    font-family: Baskerville, "Palatino Linotype", Palatino,
        "Century Schoolbook L", "Times New Roman", serif;
    color: bisque;
    font-size: 16pt;
    line-height: 1.05;
}

.bookshelf > .ns-info .ns-card-meta {
    display: block;
    margin-top: 6px;
    font-family: Baskerville, "Palatino Linotype", Palatino,
        "Century Schoolbook L", "Times New Roman", serif;
    color: #ddd;
    font-size: 14pt;
    line-height: 1.1;
}

.bookshelf > .ns-info .ns-card-description {
    margin: 0 auto;
    max-width: 560px;
    font-family: Baskerville, "Palatino Linotype", Palatino,
        "Century Schoolbook L", "Times New Roman", serif;
    color: #ddd;
    font-size: 15pt;
    line-height: 1.18;
    text-align: left;
}

/* Listen Now button — deliberately easy to customize. */
.bookshelf > .ns-info .newsstand-listen-now {
    display: block;
    width: 100%;
    margin: 14px 0 0;
    padding: 9px 12px;
    box-sizing: border-box;

    background: #8d1111;
    color: #fff !important;
    border: 2px solid goldenrod;
    border-radius: 5px;

    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14pt;
    font-weight: bold;
    line-height: 1.1;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
}

.bookshelf > .ns-info .newsstand-listen-now:hover,
.bookshelf > .ns-info .newsstand-listen-now:focus {
    background: #b51a1a;
    color: #fff !important;
    outline: none;
}

/*
 * beta2.64 — final cover position is RELATIVE TO THE INFOBOX
 *
 * Final cover tuning:
 *   --ns-cover-final-x = distance from InfoBox left edge
 *   --ns-cover-final-y = distance from InfoBox top edge
 *
 * Change these two values to move EVERY expanded cover together.
 */
.bookshelf {
    --ns-cover-final-x: 25px;
    --ns-cover-final-y: 20px;
	
	transform: translateY(50px);
}

/*
 * After the 85px pull, the cover becomes a direct child of the bookshelf.
 * That gives every cover the exact same final position relative to the
 * InfoBox, regardless of which rack slot it came from.
 */
.bookshelf > .ns-cover-final {
    position: absolute !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 10002 !important;
    margin: 0 !important;
    padding: 0 !important;

    width: 114px !important;
    height: 170px !important;

    transform-origin: top left !important;
    transform: scale(var(--ns-expanded-scale)) !important;

    filter: none !important;
    transition:
        left .6s ease,
        top .6s ease,
        transform .6s ease !important;

    cursor: pointer;
}


.bookshelf > .ns-cover-final.crop-container {
    overflow: hidden !important;
}

.bookshelf > .ns-cover-final img {
    filter: grayscale(0%) !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* The InfoBox stays underneath the final cover. */
.bookshelf > .ns-info {
    z-index: 10001 !important;
}


/* beta2.64 — InfoBox iframe controller */
#newsstandInfoBox {
    position: absolute;
    left: 50.1%;
    top: 52.5%;
    width: 690px;
    height: 590px;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    border: 0px solid goldenrod;
    border-radius: 6px;
    box-shadow: 7px 7px 10px #000;
    background: transparent;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s ease,
                visibility 0s linear .45s;
}
#newsstandInfoBox.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .45s ease,
                visibility 0s linear 0s;
}

/* beta2.64 — selected Newsstand cover remains colorized */
.image-wrapper.newsstand-active img {
    filter: grayscale(0%) !important;
}

/* beta2.67 — physical rails above rack covers */
.rail-container {
    position: relative !important;
    z-index: 5000 !important;
}

.railtop,
.railbottom {
    position: relative !important;
    z-index: 5000 !important;
}

/* Covers remain underneath the physical rails, including on hover. */
.image-wrapper,
.image-wrapper:hover {
    z-index: 1 !important;
}

/* =========================================================
   NEWSSTAND HOUSEKEEPING — nav stacking / opacity states
   ========================================================= */

/* Nav arrows must remain above every rack, rail, menu, cover and InfoBox layer. */
.nav-wrapper.nnL,
.nav-wrapper.nnR,
.newsNavL,
.newsNavR {
    position: relative !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
    opacity: 1.0 !important;
}

/*
 * IMPORTANT: unavailable arrows are hidden with OPACITY ONLY.
 * Their layout footprint remains in place, so the shelves and SORTED BY
 * position never shift.
 */
.nav-wrapper.nnL.nav-disabled,
.nav-wrapper.nnR.nav-disabled,
.newsNavL.nav-disabled,
.newsNavR.nav-disabled {
    opacity: 0.0 !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* Keep the arrow artwork on the same topmost layer. */
.nav-wrapper.nnL img,
.nav-wrapper.nnR img,
.newsNavL img,
.newsNavR img {
    position: relative !important;
    z-index: 2147483647 !important;
}


/* beta2.71 — sort menus must float above the InfoBox iframe. */
.sort-menu,
.sort-menu.open {
    z-index: 20000 !important;
}


/* beta2.72 — sort menus are physically centered under their own buttons. */
.sort-wrapper {
    overflow: visible !important;
}

.sort-wrapper > .sort-menu {
    position: absolute !important;
    left: 50% !important;
    top: 100% !important;
    right: auto !important;
    margin: 0 !important;

    transform: translate(-50%, -18px) !important;
    transform-origin: top center !important;

    z-index: 20000 !important;
}

.sort-wrapper > .sort-menu.open {
    transform: translate(-50%, 0) !important;
}


/* beta2.73 — allow sort menus to stack above the InfoBox iframe.
   The menu itself already has a high z-index, but its parent sort-container
   was a lower stacking context. Raise the entire sort-control stacking context
   above #newsstandInfoBox (z-index: 10001). */
#sortBTNs.sort-container,
.sort-container {
    position: relative !important;
    z-index: 50000 !important;
}

#sortBTNs .sort-wrapper,
.sort-wrapper {
    position: relative !important;
    z-index: 50001 !important;
}

#sortBTNs .sort-menu,
#sortBTNs .sort-menu.open,
.sort-wrapper > .sort-menu,
.sort-wrapper > .sort-menu.open {
    z-index: 50002 !important;
}


/* beta2.74 — exact initial button/menu alignment + forgiving hover bridge. */
#sortBTNs .sort-wrapper {
    width: max-content !important;
    min-width: 0 !important;
    justify-self: start !important;
    overflow: visible !important;
}
#sortBTNs .sort-wrapper > .sort-menu,
#sortBTNs .sort-wrapper > .sort-menu.open {
    left: 50% !important;
    right: auto !important;
}
#sortBTNs .sort-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
    background: transparent;
    pointer-events: auto;
}


/* beta2.75 — let each sort menu size itself to its content.
   Prevents the initial IMPRINT menu from collapsing to the button width. */
#sortBTNs .sort-wrapper > .sort-menu,
#sortBTNs .sort-wrapper > .sort-menu.open {
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
}

.shelfNUM{
	color: silver;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	font-size: 22pt;
	text-align: center;
	transform: translate(9px,-1273px);
	border: solid 0px red;
}