/*
Theme Name: Diablo3Wordpress
Theme URI: 
Description: Design by GameSiteTemplates.com
Version: 1.0
Author: GameSiteTemplates.com
Author URI: http://www.GameSiteTemplates.com
Tags: fixed width, three columns, valid XHTML, widgets
*/

/* begin Page */
/* GameSiteTemplates.com v3.1.0.48375 */

#art-main, table
{
   font-family: Arial, Helvetica, Sans-Serif;
   font-style: normal;
   font-weight: normal;
   font-size: 13px;
}

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
{
   margin: 0;
   padding: 0;
}

.art-postcontent,
.art-postheadericons,
.art-postfootericons,
.art-blockcontent-body,
ul.art-vmenu a 
{
   text-align: left;
}

.art-postcontent,
.art-postcontent li,
.art-postcontent table,
.art-postcontent a,
.art-postcontent a:link,
.art-postcontent a:visited,
.art-postcontent a.visited,
.art-postcontent a:hover,
.art-postcontent a.hovered
{
   font-family: Arial, Helvetica, Sans-Serif;
   font-size: 13px;
   line-height: 175%;
}

.art-postcontent p
{
   margin: 12px 0;
}

.art-postcontent h1, .art-postcontent h1 a, .art-postcontent h1 a:link, .art-postcontent h1 a:visited, .art-postcontent h1 a:hover,
.art-postcontent h2, .art-postcontent h2 a, .art-postcontent h2 a:link, .art-postcontent h2 a:visited, .art-postcontent h2 a:hover,
.art-postcontent h3, .art-postcontent h3 a, .art-postcontent h3 a:link, .art-postcontent h3 a:visited, .art-postcontent h3 a:hover,
.art-postcontent h4, .art-postcontent h4 a, .art-postcontent h4 a:link, .art-postcontent h4 a:visited, .art-postcontent h4 a:hover,
.art-postcontent h5, .art-postcontent h5 a, .art-postcontent h5 a:link, .art-postcontent h5 a:visited, .art-postcontent h5 a:hover,
.art-postcontent h6, .art-postcontent h6 a, .art-postcontent h6 a:link, .art-postcontent h6 a:visited, .art-postcontent h6 a:hover,
.art-blockheader .t, .art-blockheader .t a, .art-blockheader .t a:link, .art-blockheader .t a:visited, .art-blockheader .t a:hover,
.art-vmenublockheader .t, .art-vmenublockheader .t a, .art-vmenublockheader .t a:link, .art-vmenublockheader .t a:visited, .art-vmenublockheader .t a:hover,
.art-logo-name, .art-logo-name a, .art-logo-name a:link, .art-logo-name a:visited, .art-logo-name a:hover,
.art-logo-text, .art-logo-text a, .art-logo-text a:link, .art-logo-text a:visited, .art-logo-text a:hover,
.art-postheader, .art-postheader a, .art-postheader a:link, .art-postheader a:visited, .art-postheader a:hover
{
   font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, Serif;
   font-style: normal;
   font-weight: bold;
   font-size: 22px;
   text-decoration: none;
}

.art-postcontent a
{
   text-decoration: none;
   color: #FBBF7E;
}

.art-postcontent a:link
{
   text-decoration: none;
   color: #FBBF7E;
}

.art-postcontent a:visited, .art-postcontent a.visited
{
   color: #F2AE6E;
}

.art-postcontent  a:hover, .art-postcontent a.hover
{
   text-decoration: underline;
   color: #E13C0F;
}

.art-postcontent h1
{
   color: #E13C0F;
   margin: 10px 0 0;
   font-size: 26px;
}

.art-blockcontent h1
{
   margin: 10px 0 0;
   font-size: 26px;
}

.art-postcontent h1 a, .art-postcontent h1 a:link, .art-postcontent h1 a:hover, .art-postcontent h1 a:visited, .art-blockcontent h1 a, .art-blockcontent h1 a:link, .art-blockcontent h1 a:hover, .art-blockcontent h1 a:visited 
{
   font-size: 26px;
}

.art-postcontent h2
{
   color: #D52D1A;
   margin: 10px 0 0;
}

.art-blockcontent h2
{
   margin: 10px 0 0;
}

.art-postcontent h3
{
   color: #F3A353;
   margin: 10px 0 0;
   font-size: 18px;
}

.art-blockcontent h3
{
   margin: 10px 0 0;
   font-size: 18px;
}

.art-postcontent h3 a, .art-postcontent h3 a:link, .art-postcontent h3 a:hover, .art-postcontent h3 a:visited, .art-blockcontent h3 a, .art-blockcontent h3 a:link, .art-blockcontent h3 a:hover, .art-blockcontent h3 a:visited 
{
   font-size: 18px;
}

.art-postcontent h4
{
   color: #F6E0A2;
   margin: 10px 0 0;
   font-size: 16px;
}

.art-blockcontent h4
{
   margin: 10px 0 0;
   font-size: 16px;
}

.art-postcontent h4 a, .art-postcontent h4 a:link, .art-postcontent h4 a:hover, .art-postcontent h4 a:visited, .art-blockcontent h4 a, .art-blockcontent h4 a:link, .art-blockcontent h4 a:hover, .art-blockcontent h4 a:visited 
{
   font-size: 16px;
}

.art-postcontent h5
{
   color: #F6E0A2;
   margin: 10px 0 0;
   font-size: 14px;
}

.art-blockcontent h5
{
   margin: 10px 0 0;
   font-size: 14px;
}

.art-postcontent h5 a, .art-postcontent h5 a:link, .art-postcontent h5 a:hover, .art-postcontent h5 a:visited, .art-blockcontent h5 a, .art-blockcontent h5 a:link, .art-blockcontent h5 a:hover, .art-blockcontent h5 a:visited 
{
   font-size: 14px;
}

.art-postcontent h6
{
   color: #F6E0A2;
   margin: 10px 0 0;
   font-size: 13px;
}

.art-blockcontent h6
{
   margin: 10px 0 0;
   font-size: 13px;
}

.art-postcontent h6 a, .art-postcontent h6 a:link, .art-postcontent h6 a:hover, .art-postcontent h6 a:visited, .art-blockcontent h6 a, .art-blockcontent h6 a:link, .art-blockcontent h6 a:hover, .art-blockcontent h6 a:visited 
{
   font-size: 13px;
}

ul
{
   list-style-type: none;
}

ol
{
   list-style-position: inside;
}

html, body
{
   height:100%;
}

#art-main
{
   position: relative;
   z-index: 0;
   width: 100%;
   min-height: 100%;
   left: 0;
   top: 0;
   cursor:default;
   overflow:hidden;
}

body
{
   padding: 0;
   margin:0;
   min-width: 1000px;
   color: #BBAA88;
   background-color: #000000;
   background-image: url('images/Bottom_texture.webp');
   background-repeat: no-repeat;
   background-attachment: scroll;
   background-position: top center;
   background-size: 100% auto;
}

.cleared
{
   display:block;
   clear: both;
   float: none;
   margin: 0;
   padding: 0;
   border: none;
   font-size: 0;
   height:0;
   overflow:hidden;
}

.reset-box
{
   overflow:hidden;
   display:table;
}

form
{
   padding: 0 !important;
   margin: 0 !important;
}

table.position
{
   position: relative;
   width: 100%;
   table-layout: fixed;
}

/* Start Box */
.art-box, .art-box-body {
   margin:0 auto;
   position:relative;
}
.art-box:before, .art-box:after, .art-box-body:before, .art-box-body:after {
   position:absolute;
   top:0;
   bottom:0;
   content:' ';
   background-repeat: no-repeat;
   line-height:0;
}
.art-box:before,.art-box-body:before{
   left:0;
}
.art-box:after,.art-box-body:after{
   right:0;
}
.art-box:before {
   overflow:hidden;
   background-position: bottom left;
   direction: ltr;
   z-index:-3;
}
.art-box:after {
   background-position: bottom right;
   z-index:-3;
}
.art-box-body:before, .art-box-body:after {
   background-repeat:repeat-y;
}
.art-box-body:before {
   background-position: top left;
   z-index:-3;
}
.art-box-body:after {
   background-position: top right;
   z-index:-3;
}

.art-box .art-box:before, .art-box .art-box:after, .art-box-body .art-box-body:before, .art-box-body .art-box-body:after {
   z-index:-2;
}
.art-box .art-box .art-box:before, .art-box .art-box .art-box:after, .art-box-body .art-box-body .art-box-body:before, .art-box-body .art-box-body .art-box-body:after {
   z-index:-1;
}
/* End Box */

/* Start Bar */
.art-bar {
   position:relative;
}
.art-bar:before, .art-bar:after {
   position:absolute;
   top:0;
   bottom:0;
   content:' ';
   background-repeat:repeat;
   z-index:-1;
}
.art-bar:before {
   left:0;
   background-position: top left;
}
.art-bar:after {
   right:0;
   background-position: top right;
}
/* End Bar */

li h1, .art-postcontent li h1, .art-blockcontent-body li h1 
{
   margin:1px;
} 
li h2, .art-postcontent li h2, .art-blockcontent-body li h2 
{
   margin:1px;
} 
li h3, .art-postcontent li h3, .art-blockcontent-body li h3 
{
   margin:1px;
} 
li h4, .art-postcontent li h4, .art-blockcontent-body li h4 
{
   margin:1px;
} 
li h5, .art-postcontent li h5, .art-blockcontent-body li h5 
{
   margin:1px;
} 
li h6, .art-postcontent li h6, .art-blockcontent-body li h6 
{
   margin:1px;
} 
li p, .art-postcontent li p, .art-blockcontent-body li p 
{
   margin:1px;
} 
/* end Page */

/* begin Menu */
/* menu structure */

ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover 
{
   outline: none;
   position: relative;
   z-index: 11;
}

ul.art-hmenu, ul.art-hmenu ul
{
   display: block;
   margin: 0;
   padding: 0;
   border: 0;
   list-style-type: none;
}

ul.art-hmenu li
{
   margin: 0;
   padding: 0;
   border: 0;
   display: block;
   float: left;
   position: relative;
   z-index: 5;
   background: none;
}

ul.art-hmenu li:hover{
   z-index: 10000;
   white-space: normal;
}
ul.art-hmenu li li{
   float: none;
   width: auto;
}
ul.art-hmenu li:hover>ul {
   visibility: visible;
   top: 100%;
}
ul.art-hmenu li li:hover>ul {
   top: 0;
   left: 100%;
}
ul.art-hmenu:after, ul.art-hmenu ul:after
{
   content: ".";
   height: 0;
   display: block;
   visibility: hidden;
   overflow: hidden;
   clear: both;
}
ul.art-hmenu, ul.art-hmenu ul {
   min-height: 0;
}

ul.art-hmenu ul
{
   visibility: hidden;
   position: absolute;
   z-index: 10;
   left: 0;
   top: 0;
   background-image: url('images/spacer.gif');
   padding: 10px 30px 30px 30px;
   margin: -10px 0 0 -30px;
}

ul.art-hmenu ul.art-hmenu-left-to-right {
   right: auto;
   left: 0;
   margin: -10px 0 0 -30px;
}
ul.art-hmenu ul.art-hmenu-right-to-left {
   left: auto;
   right: 0;
   margin: -10px -30px 0 0;
}

ul.art-hmenu ul ul
{
   padding: 30px 30px 30px 10px;
   margin: -30px 0 0 -10px;
}

ul.art-hmenu ul ul.art-hmenu-left-to-right
{
   right: auto;
   left: 0;
   padding: 30px 30px 30px 10px;
   margin: -30px 0 0 -10px;
}

ul.art-hmenu ul ul.art-hmenu-right-to-left
{
   left: auto;
   right: 0;
   padding: 30px 10px 30px 30px;
   margin: -30px -10px 0 0;
}

ul.art-hmenu li li:hover>ul.art-hmenu-left-to-right {
   right: auto;
   left: 100%;
}
ul.art-hmenu li li:hover>ul.art-hmenu-right-to-left {
   left: auto;
   right: 100%;
}

ul.art-hmenu{
   position:relative;
   padding: 8px 22px;
   float: left;
   left: 50%;
   background: rgba(10, 8, 6, 0.82);
   border-radius: 999px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
div.art-nav-center{
   position: relative;
   float: right;
   right: 50%;
}

.firefox2 ul ul.art-hmenu{
   float: none;
}
/* end menu structure */

/* menu bar */

.art-nav
{
   width:1000px;
   margin:0 auto;
   min-height: 26px;
   z-index: 100;
   margin-top: 23px;
   margin-bottom: 0;
}

/* end menu bar */
.art-nav-outer{
   position:absolute;
   width:100%;
}
.art-nav-wrapper 
{
   position: relative;
   width:1000px;
   margin:0 auto;
}

.art-nav-inner{
   margin: 0 30px;
}

/* end Menu */

/* begin MenuItem */
ul.art-hmenu>li>a
{
   position: relative;
   display: block;
   height: 26px;
   cursor: pointer;
   text-decoration: none;
   color: #EAE2CC;
   padding: 0 12px;
   line-height: 26px;
   text-align: center;
}

ul.art-hmenu>li>a:before, ul.art-hmenu>li>a:after
{
   position: absolute;
   display: block;
   content:' ';
   top: 0;
   bottom:0;
   z-index: -1;
   background-image: url('images/menuitem.png');
}

ul.art-hmenu>li>a:before
{
   left: 0;
   right: 0;
   background-position: top left;
}

ul.art-hmenu>li>a:after
{
   width: 0;
   right: 0;
   background-position: top right;
}

.art-hmenu a, .art-hmenu a:link, .art-hmenu a:visited, .art-hmenu a:hover
{
   text-align: left;
   text-decoration: none;
}

ul.art-hmenu>li>a:hover:before, ul.art-hmenu>li:hover>a:before {
   background-position: center left;
}
ul.art-hmenu>li>a:hover:after, ul.art-hmenu>li:hover>a:after {
   background-position: center right;
}
ul.art-hmenu>li>a:hover, ul.art-hmenu>li:hover>a{
   color: #F6E0A2;
}

/* end MenuItem */

/* begin MenuSeparator */
ul.art-hmenu>li:before
{
   position:absolute;
   display: block;
   content:' ';
   top:0;
   left:  -1px;
   width:1px;
   height: 26px;
   background: url('images/menuseparator.png') center center no-repeat;
}

ul.art-hmenu>li {
   margin-left:1px;
}
ul.art-hmenu>li:first-child {
   margin-left:0;
}

ul.art-hmenu>li:first-child:before{
   display:none;
}
/* end MenuSeparator */

/* begin MenuSubItem */
.art-hmenu ul a
{
   display: block;
   white-space: nowrap;
   height: 24px;
   background-image: url('images/subitem.png');
   background-position: left top;
   background-repeat: repeat-x;
   border-width: 0;
   border-style: solid;
   min-width: 7em;
   text-align: left;
   text-decoration: none;
   line-height: 24px;
   color: #C6CFD7;
   margin:0;
   padding: 0 8px;
}

.art-hmenu ul>li:first-child>a
{
   border-top-width: 0;
}

.art-hmenu ul a:link, .art-hmenu ul a:visited, .art-hmenu ul a:hover, .art-hmenu ul a:active
{
   text-align: left;
   text-decoration: none;
   line-height: 24px;
   color: #C6CFD7;
   margin:0;
   padding: 0 8px;
}

.art-hmenu ul li a:hover
{
   color: #F6D3A7;
   background-position: left bottom;
   border-top-width: 0 !important;
}

.art-hmenu ul li:hover>a
{
   color: #F6D3A7;
   background-position: left bottom;
   border-top-width: 0 !important;
}

/* end MenuSubItem */

/* begin Box, Sheet */
.art-sheet
{
   max-width:1000px;
   /* Banner-bottom alignment: the banner is the body background (100vw
      wide, 33.33vw tall). 49px is the measured fixed flow height above
      this element (clearing divs; the nav is absolutely positioned and
      contributes nothing) — that alone would land the sheet flush with
      the banner's bottom edge, verified via the fix-273 Task 4 screenshot
      matrix, 2026-09-22. An additional 90px pulls the sheet up over the
      banner's own bottom fade (2026-09-22 follow-up, user request): the
      flush position left a tall stretch of banner art with nothing below
      it before the content began. .art-banner-fade covers the same 90px
      so the art still reads as darkening into the sheet, not getting cut
      off. Keep both constants (49 + 90 = 139) in sync with that rule. */
   margin-top: calc(33.34vw - 139px);
   margin-bottom: 0;
   cursor:auto;
   /* Stack above .art-banner-fade (z-index 15): the fade now reaches down
      to the banner's true bottom edge, which overlaps this element's own
      top ~90px. Without this the fade's opaque black end hid the sheet's
      top border/frame and its "Home" heading. */
   position: relative;
   z-index: 20;
   width: 1000px;
}
.art-sheet-body 
{
   padding:30px;
   padding-top:60px;
   padding-bottom:120px;
}
.art-sheet:before, .art-sheet:after 
{
   content: url('images/sheet_t.png');
   font-size: 0;
   background-image: url('images/sheet_b.png');
}
.art-sheet:after{
   clip:rect(auto, auto, auto, 980px);
}
.art-sheet:before,.art-sheet-body:before{
   right:20px;
}
.art-sheet-body:after{
   width: 20px;
   top:20px;
   bottom:20px;
   background-image:url('images/sheet.png');
}
.art-sheet-body:before{
   top:65px;
   bottom:155px;
   background-image:url('images/sheet.png');
}

/* end Box, Sheet */

/* begin Layout */
.art-layout-wrapper
{
   position:relative;
   margin:0 auto 0 auto;
}

.art-content-layout
{
   display: table;
   width:100%;
   table-layout: fixed;
   border-collapse: collapse;
}

.art-content-layout-row {
   display: table-row;
}

.art-layout-cell
{
   display: table-cell;
   vertical-align: top;
}
/* end Layout */

/* begin Box, Block, VMenuBlock */
.art-vmenublock
{
   max-width:940px;
   margin: 10px;
}
.art-vmenublock-body 
{
   padding:10px;
   min-width:2px;
   min-height:2px;
}
.art-vmenublock:before, .art-vmenublock:after 
{
   content: url('images/vmenublock_t.png');
   font-size: 0;
   background-image: url('images/vmenublock_b.png');
}
.art-vmenublock:after{
   clip:rect(auto, auto, auto, 929px);
}
.art-vmenublock:before,.art-vmenublock-body:before{
   right:11px;
}
.art-vmenublock-body:after{
   width: 11px;
   top:38px;
   bottom:33px;
   background-image:url('images/vmenublock.png');
}
.art-vmenublock-body:before{
   top:38px;
   bottom:33px;
   background-image:url('images/vmenublock.png');
}

/* end Box, Block, VMenuBlock */

/* begin BlockHeader, VMenuBlockHeader */
.art-vmenublockheader {
   margin-bottom: 7px;
   min-height: 34px;
   line-height:34px;
}
.art-vmenublockheader:before, .art-vmenublockheader:after{
   background-image: url('images/vmenublockheader.png');
}
.art-vmenublockheader:before{
   right: 26px;
}
.art-vmenublockheader:after{
   width: 26px;
}

.art-vmenublockheader .t
{
   min-height: 34px;
   line-height:34px;
   color: #C0C9D2;
   font-size: 14px;
   text-align: center;
   margin:0;
   padding: 0 5px 0 5px;
   white-space: nowrap;
}

.art-vmenublockheader .t a,
.art-vmenublockheader .t a:link,
.art-vmenublockheader .t a:visited, 
.art-vmenublockheader .t a:hover
{
   color: #C0C9D2;
   font-size: 14px;
   text-align: center;
}

/* end BlockHeader, VMenuBlockHeader */

/* begin Box, Box, VMenuBlockContent */
.art-vmenublockcontent
{
   max-width:940px;
}
.art-vmenublockcontent-body 
{
   padding:0;
}

/* end Box, Box, VMenuBlockContent */

/* begin VMenu */
ul.art-vmenu, ul.art-vmenu ul
{
   list-style: none;
   display: block;
}

ul.art-vmenu, ul.art-vmenu li
{
   display: block;
   margin: 0;
   padding: 0;
   width: auto;
   line-height: 0;
}

ul.art-vmenu
{
   margin-top: 0;
   margin-bottom: 6px;
}

ul.art-vmenu ul
{
   display: none;
   margin: 0;
   padding: 0;
   position:relative;
   margin-left: 0;
   margin-right: 0;
}

ul.art-vmenu ul.active
{
   display: block;
}
/* end VMenu */

/* begin VMenuItem */
ul.art-vmenu a 
{
   display: block;
   cursor: pointer;
   z-index:0;
   text-decoration: none;
   font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, Serif;
   font-style: normal;
   font-weight: bold;
   font-size: 13px;
   text-align: center;
   margin-left:0;
   margin-right:0;
   position:relative;
}

ul.art-vmenu li{
   position:relative;
}

ul.art-vmenu>li>a 
{
   color: #A9B5C1;
   padding: 0 10px 0 10px;
   height: 30px;
   line-height: 30px;
   white-space: nowrap;
}

ul.art-vmenu>li>a.active {
   color: #EF877B;
}
ul.art-vmenu a:hover, ul.art-vmenu a.active:hover {
   color: #FAF3B8;
}

ul.art-vmenu>li>a:before, ul.art-vmenu>li>a:after 
{
   position: absolute;
   display: block;
   content: ' ';
   z-index:-1;
   background-image: url('images/vmenuitem.png');
   top:0;
   height:30px;
}

ul.art-vmenu>li>a:before{
   left: 0;
   right: 100px;
   background-position: top left;
}
ul.art-vmenu>li>a:after{
   width: 100px;
   right: 0;
   background-position: top right;
}
ul.art-vmenu>li>a.active:before {
   background-position: bottom left;
}
ul.art-vmenu>li>a.active:after {
   background-position: bottom right;
}
ul.art-vmenu>li>a:hover {
   background-color: transparent;
}
ul.art-vmenu>li>a:hover:before  {
   background-position: center left;
}
ul.art-vmenu>li>a:hover:after {
   background-position: center right;
}

ul.art-vmenu>li{
   margin-top:4px;
}
ul.art-vmenu>li>ul{
   margin-top:4px;
   padding-bottom: 0;
}
ul.art-vmenu>li:first-child{
   margin-top:0;
}

/* end VMenuItem */

/* begin VMenuSubItem */
ul.art-vmenu ul li{
   margin: 0;
   padding: 0;
}
ul.art-vmenu li li, ul.art-vmenu li li a {
   position:relative;
}

ul.art-vmenu ul a
{
   display: block;
   position:relative;
   white-space: nowrap;
   height: 24px;
   overflow: visible;
   background-image: url('images/vsubitem.png');
   background-repeat: repeat-x;
   background-position: top left;
   padding:0;
   padding-left:15px;
   padding-right:15px;
   line-height: 24px;
   color: #B2BDC8;
   font-family: Arial, Helvetica, Sans-Serif;
   font-weight: normal;
   font-size: 12px;
   margin-left: 0;
   margin-right: 0;
}

ul.art-vmenu ul a.active{
   background-position: bottom left;
}
ul.art-vmenu ul a:hover{
   background-position: center left;
   line-height: 24px;
   color: #B2BDC8;
   font-family: Arial, Helvetica, Sans-Serif;
   font-weight: normal;
   font-size: 12px;
   margin-left: 0;
   margin-right: 0;
}
ul.art-vmenu ul li li a:hover, ul.art-vmenu ul li li a:hover.active{
   background-position: left center;
}

ul.art-vmenu ul a:link, ul.art-vmenu ul a:visited, ul.art-vmenu ul a:active
{
   line-height: 24px;
   color: #B2BDC8;
   font-family: Arial, Helvetica, Sans-Serif;
   font-weight: normal;
   font-size: 12px;
   margin-left: 10px;
   margin-right: 10px;
}

ul.art-vmenu>li>ul>li:first-child{
   padding-top: 0;
   margin-top:0;
}
 
ul.art-vmenu li li{
   position:relative;
   margin-top:0;
}

ul.art-vmenu ul ul a{
   padding-left:30px;
}
ul.art-vmenu ul ul ul a{
   padding-left:45px;
}
ul.art-vmenu ul ul ul ul a{
   padding-left:60px;
}
ul.art-vmenu ul ul ul ul ul a{
   padding-left:75px;
}

ul.art-vmenu ul li a.active {
   color: #1B0603;
}
ul.art-vmenu ul li a:hover, ul.art-vmenu ul li a:hover.active {
   color: #601A06;
}

/* end VMenuSubItem */

/* begin Box, Block */
.art-block
{
   max-width:940px;
   margin: 10px;
}
.art-block-body 
{
   padding:10px;
   padding-left: 5px;
   padding-right: 5px;
   min-width:2px;
   min-height:2px;
}
.art-block:before, .art-block:after 
{
   content: url('images/block_t.png');
   font-size: 0;
   background-image: url('images/block_b.png');
}
.art-block:after{
   clip:rect(auto, auto, auto, 929px);
}
.art-block:before,.art-block-body:before{
   right:11px;
}
.art-block-body:after{
   width: 11px;
   top:11px;
   bottom:11px;
   background-image:url('images/block.png');
}
.art-block-body:before{
   top:11px;
   bottom:11px;
   background-image:url('images/block.png');
}

div.art-block img
{
   /* WARNING do NOT collapse this to 'border' - inheritance! */
  border-width: 0;
   margin: 0;
}

/* end Box, Block */

/* begin BlockHeader */
.art-blockheader {
   margin-bottom: 0;
   min-height: 28px;
   line-height:28px;
}
.art-blockheader:before, .art-blockheader:after{
   background-image: url('images/blockheader.png');
}
.art-blockheader:before{
   right: 6px;
}
.art-blockheader:after{
   width: 6px;
}

.art-blockheader .t
{
   min-height: 28px;
   line-height:28px;
   color: #F7E6BB;
   font-size: 16px;
   margin:0;
   padding: 0px 5px 0px 20px;
   white-space: nowrap;
}

.art-blockheader .t a,
.art-blockheader .t a:link,
.art-blockheader .t a:visited, 
.art-blockheader .t a:hover
{
   color: #F7E6BB;
   font-size: 16px;
}

/* end BlockHeader */

/* begin Box, BlockContent */
.art-blockcontent
{
   max-width:940px;
}
.art-blockcontent-body 
{
   padding:5px;
   min-width:2px;
   min-height:2px;
   color: #8E9EAE;
   font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, Serif;
   font-size: 13px;
}
.art-blockcontent:before, .art-blockcontent:after 
{
   content: url('images/blockcontent_t.png');
   font-size: 0;
   background-image: url('images/blockcontent_b.png');
}
.art-blockcontent:after{
   clip:rect(auto, auto, auto, 934px);
}
.art-blockcontent:before,.art-blockcontent-body:before{
   right:6px;
}
.art-blockcontent-body:after{
   width: 6px;
   top:6px;
   bottom:6px;
   background-image:url('images/blockcontent.png');
}
.art-blockcontent-body:before{
   top:6px;
   bottom:6px;
   background-image:url('images/blockcontent.png');
}
.art-blockcontent-body table,
.art-blockcontent-body li, 
.art-blockcontent-body a,
.art-blockcontent-body a:link,
.art-blockcontent-body a:visited,
.art-blockcontent-body a:hover
{
   color: #8E9EAE;
   font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, Serif;
   font-size: 13px;
}

.art-blockcontent-body p
{
   margin: 12px 0;
}

.art-blockcontent-body a, .art-blockcontent-body a:link
{
   color: #E4A643;
   font-family: Arial, Helvetica, Sans-Serif;
   text-decoration: underline;
}

.art-blockcontent-body a:visited, .art-blockcontent-body a.visited
{
   color: #E4A643;
   font-family: Arial, Helvetica, Sans-Serif;
   text-decoration: none;
}

.art-blockcontent-body a:hover, .art-blockcontent-body a.hover
{
   color: #F6D3A7;
   text-decoration: none;
}

.art-blockcontent-body ul li
{
   font-family: Arial, Helvetica, Sans-Serif;
   line-height: 125%;
   color: #A6B2BF;
   margin: 5px 0 0 10px;
   padding: 0 0 0 12px;
   background-image: url('images/blockcontentbullets.png');
   background-repeat: no-repeat;
   background-position: top left;
}
/* end Box, BlockContent */

/* begin Button */
span.art-button-wrapper>a.art-button,
span.art-button-wrapper>a.art-button:link,
span.art-button-wrapper>input.art-button,
span.art-button-wrapper>button.art-button
{
   text-decoration: none;
   font-family: Arial, Helvetica, Sans-Serif;
   font-style: normal;
   font-weight: normal;
   font-size: 12px;
   position:relative;
   top:0;
   display: inline-block;
   vertical-align: middle;
   white-space: nowrap;
   text-align: center;
   color: #CCD4DB !important;
   width: auto;
   outline: none;
   border: none;
   background: none;
   line-height: 39px;
   height: 39px;
   margin: 0 !important;
   padding: 0 30px !important;
   overflow: visible;
   cursor: pointer;
   text-indent: 0;
}

.art-button img, span.art-button-wrapper img
{
   margin: 0;
   vertical-align: middle;
}

span.art-button-wrapper
{
   vertical-align: middle;
   display: inline-block;
   position: relative;
   height: 39px;
   overflow: hidden;
   white-space: nowrap;
   text-indent: 0;
   width: auto;
   max-width:940px;
   margin: 0;
   padding: 0;
   z-index: 0;
}

.firefox2 span.art-button-wrapper
{
   display: block;
   float: left;
}

input, select, textarea
{
   vertical-align: middle;
   font-family: Arial, Helvetica, Sans-Serif;
   font-style: normal;
   font-weight: normal;
   font-size: 12px;
}

div.art-block select 
{
   width:96%;
}

span.art-button-wrapper.hover>.art-button, span.art-button-wrapper.hover>a.art-button:link
{
   color: #F7E6BB !important;
   text-decoration: none !important;
}

span.art-button-wrapper.active>.art-button, span.art-button-wrapper.active>a.art-button:link
{
   color: #FABEAE !important;
}

span.art-button-wrapper>span.art-button-l, span.art-button-wrapper>span.art-button-r
{
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   margin: 0;
   padding: 0;
   background-image: url('images/button.png');
   background-repeat: no-repeat;
}

span.art-button-wrapper>span.art-button-l
{
   left: 0;
   right: 41px;
   background-position: top left;
}

span.art-button-wrapper>span.art-button-r
{
   width: 41px;
   right: 0;
   background-position: top right;
}

span.art-button-wrapper.hover>span.art-button-l
{
   background-position: center left;
}

span.art-button-wrapper.hover>span.art-button-r
{
   background-position: center right;
}

span.art-button-wrapper.active>span.art-button-l
{
   background-position: bottom left;
}

span.art-button-wrapper.active>span.art-button-r
{
   background-position: bottom right;
}

span.art-button-wrapper input
{
   float: none !important;
}
/* end Button */

/* begin Box, Post */
.art-post
{
   max-width:940px;
   margin: 0;
}
.art-post-body 
{
   padding:10px;
}

a img
{
   border: 0;
}

.art-article img, img.art-article, .art-block img, .art-footer img
{
   border-color: #705F42;
   border-style: solid;
   border-width: 3px;
   margin: 10px 10px 10px 10px;
}

.art-metadata-icons img
{
   border: none;
   vertical-align: middle;
   margin: 2px;
}

.art-article table, table.art-article
{
   border-collapse: collapse;
   margin: 1px;
}

.art-post .art-content-layout-br
{
   height: 0;
}

.art-article th, .art-article td
{
   padding: 2px;
   border: solid 1px #667A8F;
   vertical-align: top;
   text-align: left;
}

.art-article th
{
   text-align: center;
   vertical-align: middle;
   padding: 7px;
}

pre
{
   overflow: auto;
   padding: 0.1em;
}

/* end Box, Post */

/* begin PostHeaderIcon */
.art-postheader
{
   color: #e1d7a9;
   margin: 5px 0;
   line-height: 1em;
   font-size: 20px;
}

.art-postheader a, 
.art-postheader a:link, 
.art-postheader a:visited,
.art-postheader a.visited,
.art-postheader a:hover,
.art-postheader a.hovered
{
   font-size: 20px;
}

.art-postheader a, .art-postheader a:link
{
   text-align: left;
   text-decoration: none;
   color: #E13C0F;
}

.art-postheader a:visited, .art-postheader a.visited
{
   color: #f0e6b6;
}

.art-postheader a:hover,  .art-postheader a.hovered
{
   color: #E13C0F;
}

/* end PostHeaderIcon */

/* begin PostIcons, PostHeaderIcons */
.art-postheadericons,
.art-postheadericons a,
.art-postheadericons a:link,
.art-postheadericons a:visited,
.art-postheadericons a:hover
{
   font-family: Arial, Helvetica, Sans-Serif;
   color: #78634A;
}

.art-postheadericons
{
   padding: 1px;
}

.art-postheadericons a, .art-postheadericons a:link
{
   text-decoration: none;
   color: #A0ADBB;
}

.art-postheadericons a:visited, .art-postheadericons a.visited
{
   font-style: italic;
   font-weight: normal;
   color: #A0ADBB;
}

.art-postheadericons a:hover, .art-postheadericons a.hover
{
   font-style: italic;
   font-weight: normal;
   text-decoration: underline;
   color: #D52D1A;
}

/* end PostIcons, PostHeaderIcons */

/* begin PostIcon, PostDateIcon */
span.art-postdateicon
{
   display:inline-block;
   line-height: 1em;
}

span.art-postdateicon:after
{
   content: '.';
   width: 1px;
   visibility: hidden;
   display: inline-block;
}/* end PostIcon, PostDateIcon */

/* begin PostIcon, PostAuthorIcon */
span.art-postauthoricon
{
   display:inline-block;
   line-height: 1em;
}

span.art-postauthoricon:after
{
   content: '.';
   width: 1px;
   visibility: hidden;
   display: inline-block;
}/* end PostIcon, PostAuthorIcon */

/* begin PostIcon, PostEditIcon */
span.art-postediticon
{
   background:url('images/postediticon.png') no-repeat left 0.5em;
   padding-top:7px;
   margin-top:-7px;
   padding-left:20px;
   min-height:14px;
   display:inline-block;
   line-height: 1em;
}

span.art-postediticon:after
{
   content: '.';
   width: 1px;
   visibility: hidden;
   display: inline-block;
}/* end PostIcon, PostEditIcon */

/* begin PostBullets */
.art-postcontent ol, .art-postcontent ul
{
   margin: 1em 0 1em 2em;
   padding: 0;
}

.art-postcontent li
{
   color: #94A3B3;
   margin: 3px 0 0 -15px;
   padding: 0 0 0 13px;
}

.art-postcontent li ol, .art-post li ul
{
   margin: 0.5em 0 0.5em 2em;
   padding: 0;
}

.art-postcontent ol>li
{
   background: none;
   padding-left: 0;
   /* overrides overflow for "ul li" and sets the default value */
  overflow: visible;
}

.art-postcontent ul>li
{
   background-image: url('images/postbullets.png');
   background-repeat: no-repeat;
   background-position: top left;
   padding-left: 13px;
   /* makes "ul li" not to align behind the image if they are in the same line */
  overflow-x: visible;
   overflow-y: hidden;
}

/* end PostBullets */

/* begin PostQuote */
blockquote,
blockquote a, .art-postcontent blockquote a, .art-blockcontent blockquote a, .art-footer blockquote a,
blockquote a:link, .art-postcontent blockquote a:link, .art-blockcontent blockquote a:link, .art-footer blockquote a:link,
blockquote a:visited, .art-postcontent blockquote a:visited, .art-blockcontent blockquote a:visited, .art-footer blockquote a:visited,
blockquote a:hover, .art-postcontent blockquote a:hover, .art-blockcontent blockquote a:hover, .art-footer blockquote a:hover
{
   color: #A0ADBB;
   font-style: italic;
   font-weight: normal;
   text-align: left;
}

/* Override native 'p' margins*/
blockquote p,
.art-postcontent blockquote p,
.art-blockcontent blockquote p,
.art-footer blockquote p
{
   margin: 0;
   margin: 5px 0;
}

blockquote
{
   margin: 10px;
   padding: 10px;
   background-color: #333D47;
   margin-left: 50px;
   padding-left: 38px;
   background-image: url('images/postquote.png');
   background-position: left top;
   background-repeat: no-repeat;
   /* makes block not to align behind the image if they are in the same line */
  overflow: auto;
   clear:both;
}

/* end PostQuote */

/* begin PostIcons, PostFooterIcons */
.art-postfootericons,
.art-postfootericons a,
.art-postfootericons a:link,
.art-postfootericons a:visited,
.art-postfootericons a:hover
{
   font-family: Arial, Helvetica, Sans-Serif;
   color: #D2D9DF;
}

.art-postfootericons
{
   padding: 1px;
}

.art-postfootericons a, .art-postfootericons a:link
{
   text-decoration: none;
   color: #A0ADBB;
}

.art-postfootericons a:visited, .art-postfootericons a.visited
{
   color: #A0ADBB;
}

.art-postfootericons a:hover, .art-postfootericons a.hover
{
   color: #D52D1A;
}

/* end PostIcons, PostFooterIcons */

/* begin PostIcon, PostCategoryIcon */
span.art-postcategoryicon
{
   display:inline-block;
   line-height: 1em;
}

span.art-postcategoryicon:after
{
   content: '.';
   width: 1px;
   visibility: hidden;
   display: inline-block;
}/* end PostIcon, PostCategoryIcon */

/* begin PostIcon, PostTagIcon */
span.art-posttagicon
{
   display:inline-block;
   line-height: 1em;
}

span.art-posttagicon:after
{
   content: '.';
   width: 1px;
   visibility: hidden;
   display: inline-block;
}/* end PostIcon, PostTagIcon */

/* begin PostIcon, PostCommentsIcon */
span.art-postcommentsicon
{
   display:inline-block;
   line-height: 1em;
}

span.art-postcommentsicon:after
{
   content: '.';
   width: 1px;
   visibility: hidden;
   display: inline-block;
}/* end PostIcon, PostCommentsIcon */

/* begin Footer */
.art-footer
{
   position: relative;
   margin-top:0;
   margin-bottom:0;
   width: 100%;
}

.art-footer-body
{
   position:relative;
   padding: 10px;
   color: #6C5942;
   font-size: 11px;
}

.art-footer-body ul li
{
   color: #A9B5C1;
   padding: 0 0 0 13px;
   background-image: url('images/footerbullets.png');
   background-repeat: no-repeat;
   background-position: top left;
}

.art-footer-body .art-rss-tag-icon
{
   position: absolute;
   left:   6px;
   bottom:10px;
   z-index:1;
}

.art-rss-tag-icon
{
   display: block;
   background-image: url('images/rssicon.png');
   background-position: center right;
   background-repeat: no-repeat;
   height: 32px;
   width: 32px;
   cursor: default;
}

.art-footer-text p
{
   padding:0;
   margin:0;
   text-align: center;
}

.art-footer-body a,
.art-footer-body a:link,
.art-footer-body a:visited,
.art-footer-body a:hover,
.art-footer-body td, 
.art-footer-body th,
.art-footer-body caption
{
   color: #6C5942;
   font-size: 11px;
}

.art-footer-text
{
   min-height: 32px;
   padding-left: 10px;
   padding-right: 10px;
   text-align: center;
}

.art-footer-body a,
.art-footer-body a:link
{
   color: #F3A353;
   text-decoration: none;
}

.art-footer-body a:visited
{
   color: #C0C9D2;
}

.art-footer-body a:hover
{
   color: #FAE7B8;
   text-decoration: underline;
}

div.art-footer img
{
   /* WARNING do NOT collapse this to 'border' - inheritance! */
  border-width: 0;
   margin: 10px;
}/* end Footer */

/* begin PageFooter */
.art-page-footer, 
.art-page-footer a,
.art-page-footer a:link,
.art-page-footer a:visited,
.art-page-footer a:hover
{
   font-family: Arial;
   font-size: 10px;
   letter-spacing: normal;
   word-spacing: normal;
   font-style: normal;
   font-weight: normal;
   text-decoration: underline;
   color: #9B814B;
}

.art-page-footer
{
   position: relative;
   z-index: 10;
   padding: 1em;
   text-align: center;
   text-decoration: none;
   color: #6C5942;
}
/* end PageFooter */

/* begin WordPress, Template.WordPress */
form.art-search {
   display:block;
   position: relative;
   width: 98%;
   padding:0;
   margin:0 auto !important;
   border: none;
}

form.art-search div {
   margin: 0 18px 0 -2px;
}

input.art-search-text {
   display: block;
   margin: 0;
   width: 100%;
   padding-right: 16px;
}

input.art-search-button
{
   display: block;
   position: absolute;
   right: 0;
   top: 0;
   height: 100%;
   padding: 0;
   margin: 0;
   width: 16px;
   background:url('images/search.png') center center no-repeat;
   border: none;
}
/* end WordPress, Template.WordPress */

/* begin LayoutCell, sidebar1 */
.art-content-layout .art-sidebar1
{
   width: 225px;
}
/* end LayoutCell, sidebar1 */

/* begin LayoutCell, sidebar2 */
.art-content-layout .art-sidebar2
{
   width: 225px;
}
/* end LayoutCell, sidebar2 */

textarea#comment
{
   width:99%;
}

ul#comments-list div.avatar
{
   float:right;
}

ul#comments-list, ul#comments-list li
{
   background: none;
   padding:0;
}

ul#comments-list li li
{
   margin-left: 20px;
}

div.avatar
{
   position:relative;
   margin: 7px;
   border: 1px solid #aaa;
   padding: 1px;
   background: #fff;
   float:left;
}

div.avatar img, div.avatar img.wp-post-image
{
   margin:0 !important;
   padding:0;
   border:none;
}

span.page-navi-outer, span.page-navi-inner 
{
   position:relative;
   display:block;
   float:left;
   margin:0;
   padding:0;
}

span.page-navi-outer
{
   margin: 1px;
   border: 1px solid #aaa;
}

span.page-navi-inner 
{
   padding: 1px;
   min-width:14px;
   line-height:18px;
   text-align:center;
   border: 2px solid #fff;
   font-weight:bold;
}

a span.page-navi-inner, span.page-navi-caption span.page-navi-inner 
{
   border-width:1px;
   font-weight:normal;
}

a span.page-navi-outer, span.page-navi-caption
{
   margin:2px 1px;
}

ul#comments-list li cite
{
   font-size: 1.2em;
}

#commentform textarea
{
   width: 100%;
}

#commentform
{
   text-align:left;
}

.rtl #commentform
{
   text-align:right;
}

img.wp-smiley
{
   border: none;
   margin: 1px;
   vertical-align:middle;
   padding: 0;
}

.navigation
{
   display: block;
   text-align: center;
}

/* Recommended by http://codex.wordpress.org/CSS */
/* Begin */
.aligncenter, div.aligncenter, .art-article .aligncenter img, .aligncenter img.art-article, .aligncenter img, img.aligncenter
{
   display: block;
   margin-left: auto;
   margin-right: auto;
}

p.aligncenter , p.center 
{
   text-align: center;
}

.alignleft
{
   float: left;
}

.alignright
{
   float: right;
}

.alignright img, img.alignright
{
   margin: 1em;
   margin-right: 0;
}

.alignleft img, img.alignleft
{
   margin: 1em;
   margin-left: 0;
}

.wp-caption
{
   border: 1px solid #ddd;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   text-align: center;
}

.wp-caption img
{
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text
{
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

.wp-caption p
{
   text-align: center;
}

.gallery {
   margin: 0 auto 18px;
   clear:both;
   overflow:hidden;
   letter-spacing: normal;
}

.gallery .gallery-item {
   float: left;
   margin-top: 0;
   text-align: center;
   width: 33%;
}
.gallery img {
   border: 10px solid #f1f1f1;
}

.gallery .gallery-caption {
   color: #888;
   font-size: 12px;
   margin: 0 0 12px;
}

.gallery dl {
   margin: 0;
}

.gallery br+br {
   display: none;
}
/* End */

.hidden
{
   display: none;
}

/* Calendar */
#wp-calendar {
   empty-cells: show;
   margin: 10px auto 0;
   width: 155px;
}

#wp-calendar #next a {
   padding-right: 10px;
   text-align: right;
}

#wp-calendar #prev a {
   padding-left: 10px;
   text-align: left;
}

#wp-calendar a {
   display: block;
}

#wp-calendar caption {
   text-align: center;
   width: 100%;
}

#wp-calendar td {
   padding: 3px 0;
   text-align: center;
}

.art-content {
   position: relative;
   z-index: 1;
}

#todays-events{
   position: relative;
   z-index: 11;
}

#upcoming-events{
   position: relative;
   z-index: 10;
}

img.wp-post-image 
{
   margin:0 5px 5px 0 !important;
}

ul#comments-list li
{
   list-style-image: none;
   background:none;
   list-style-type:none;
}

div.art-footer div.art-content-layout
{
   margin:0 auto;
   width:100%;
}

div.art-layout-cell-size1 
{
   width:100%;
}

div.art-layout-cell-size2 
{
   width:50%;
}
div.art-layout-cell-size3 
{
   width:33%;
}

div.art-layout-cell-size4
{
   width:25%;
}

.art-widget-title
{
   padding:0 0 0 24px;
   margin-bottom:0;
}

div.art-center-wrapper
{
   position: relative;
   float: right;
   right: 50%;
}

div.art-center-inner
{
   position: relative;
   float: left;
   left: 50%;
}

.firefox2 div.art-center-inner
{
   float: none;
}

div.breadcrumbs h4, 
div.breadcrumbs p, 
li.pingback p, 
#respond p,
h3#reply-title, 
h4#comments, 
h4.box-title
{
   margin:0;
}

#respond .comment-notes {
   margin-bottom: 1em;
}

.form-allowed-tags {
   line-height: 1em;
}

#comments-list #respond {
   margin-left: 20px !important;
}

#cancel-comment-reply-link {
   font-size: 12px;
   font-weight: normal;
   line-height: 18px;
}

#respond .required {
   color: #ff4b33;
   font-weight: bold;
}

#respond label {
   font-size: 12px;
}

#respond input {
   margin: 0 0 9px;
   width: 98%;
}

#respond textarea {
   width: 98%;
}

#respond .form-allowed-tags {
   font-size: 12px;
   line-height: 18px;
}

#respond .form-allowed-tags code {
   font-size: 11px;
}

#respond .form-submit {
   margin: 12px 0;
}

#respond .form-submit input {
   font-size: 14px;
   width: auto;
}

.art-footer .art-widget-title 
{
   font-size:1.2em;
   padding: 0;
}

.art-footer .art-widget,
.art-footer .art-widget a,
.art-footer .art-widget a:link,
.art-footer .art-widget a:visited,
.art-footer .art-widget a:hover
{
   color: #6C5942;
   font-size: 11px;
   text-align: left;
}

.art-footer .art-widget a,
.art-footer .art-widget a:link
{
   color: #F3A353;
   text-decoration: none;
}

.art-footer .art-widget a:visited
{
   color: #C0C9D2;
}

.art-footer .art-widget a:hover
{
   color: #FAE7B8;
   text-decoration: underline;
}

DIV[id^="GMPmap"] IMG 
{
   margin: 0;
}

.art-blockcontent-body p {
	margin: 0;
}

/* Legend of Gods ribbon logo, top-right corner of the home banner (2026-09-21) */
.site-logo-ribbon {
   position: absolute;
   top: 10px;
   right: 24px;
   width: 460px;
   height: auto;
   z-index: 20;
   filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
}


/* ==========================================================================
   Responsive retrofit (fix-273, 2026-09-21). Appended last so it wins over
   every fixed-width rule above. The banner keeps background-size: 100% auto,
   so its rendered height is always 33.33vw.
   ========================================================================== */
@media (max-width: 1040px) {
	body {
		min-width: 0;
	}
	.art-nav,
	.art-nav-wrapper {
		width: auto;
		max-width: 100%;
	}
	div.art-nav-center {
		float: none;
		right: 0;
	}
	/* The pill menu: drop the float+50% centering trick and let items wrap
	   to a second line instead of overflowing the viewport (fix-273 Task 4). */
	ul.art-hmenu {
		position: relative;
		float: none;
		left: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: fit-content;
		max-width: 100%;
		margin: 0 auto;
	}
	ul.art-hmenu > li {
		float: none;
	}
	.art-sheet {
		width: auto;
		max-width: none;
		margin-left: 8px;
		margin-right: 8px;
	}
}
@media (max-width: 860px) {
	.art-content-layout,
	.art-content-layout-row {
		display: block;
		width: auto;
	}
	/* Stack the main content above the sidebar: the markup puts the sidebar
	   cell first, so plain block stacking would show Search/Recent Posts
	   before the page's actual content (fix-273 Task 4, check 3). */
	.art-content-layout-row {
		display: flex;
		flex-direction: column;
	}
	.art-content-layout .art-layout-cell.art-content {
		order: 1;
	}
	.art-content-layout .art-layout-cell.art-sidebar1 {
		order: 2;
		width: auto;
		margin-top: 12px;
	}
	.art-content-layout .art-layout-cell {
		display: block;
		width: auto;
	}
}
@media (max-width: 640px) {
	.art-sheet-body {
		padding: 14px;
		padding-top: 20px;
		padding-bottom: 40px;
	}
	.art-postcontent img {
		max-width: 100%;
		height: auto;
	}
	.art-postcontent table {
		display: block;
		overflow-x: auto;
	}
}

/* ==========================================================================
   Play CTA overlay (2026-09-22, fix-273 follow-up). A transparent layer
   across the hero banner (the body background, 100vw x 33.33vw) that
   centers the PLAY NOW button on the artwork. Out of the normal flow and
   click-transparent except for the button itself; the sheet below keeps
   the banner-bottom alignment margin.
   ========================================================================== */
.art-play-band
{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 33.34vw;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0;
   padding: 0;
   background: none;
   border: none;
   box-shadow: none;
   pointer-events: none;
   /* Above the site-logo-ribbon (z-index 20), which spans the whole banner
      at phone widths and would otherwise cover the button and swallow its
      clicks; below the nav (z-index 100). */
   z-index: 30;
}
.art-play-band-button
{
   pointer-events: auto;
   display: inline-block;
   background: #a52318;
   border: 1px solid #f6e0a2;
   border-radius: 6px;
   color: #f6e0a2;
   font-size: 20px;
   font-weight: bold;
   letter-spacing: 2px;
   line-height: 1;
   padding: 12px 42px;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}
.art-play-band-button:hover
{
   background: #b52a1c;
   color: #fff3d6;
}

/* Phone placement for the Play overlay: the wrapped two-row nav occupies
   most of the short banner here, so the button sits at the banner's lower
   edge instead of its vertical middle. Kept after the base .art-play-band
   rules so it wins on source order. */
@media (max-width: 640px) {
	.art-play-band
	{
		align-items: flex-end;
		padding-bottom: 8px;
	}
}

/* ==========================================================================
   Banner-to-sheet fade (2026-09-22, user request). .art-sheet's margin-top
   now pulls the sheet 90px up over the banner's own bottom edge (see the
   comment on that rule), but the sheet is only 1000px wide -- outside it,
   the full-width banner still runs all the way down to its true bottom
   edge (33.34vw). This band spans that whole remainder (headroom above
   the sheet's top, through the sheet's top edge, down to the banner's
   true bottom) so the artwork reads as darkening to black everywhere,
   not just behind the sheet: solid black is reached by the sheet's top
   edge (so the sheet border doesn't cut across bright art) and then
   holds solid black down to the banner's bottom edge (so the flanks
   beside the sheet don't show unfaded art below it). Absolute against
   #art-main, same coordinate space as the banner and the sheet, so it
   tracks both at every viewport width with no separate breakpoint math
   needed. Click-transparent; sits below the Play button (z-index 30), the
   ribbon logo (z-index 20, doesn't reach this low anyway) and .art-sheet
   itself (z-index 20) -- the sheet needs to win here since this band's
   opaque bottom portion overlaps the sheet's own top ~90px. */
.art-banner-fade
{
   position: absolute;
   left: 0;
   width: 100%;
   top: calc(33.34vw - 290px);
   height: 290px;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.9) 60%, #000000 69%, #000000 100%);
   pointer-events: none;
   z-index: 15;
}