:root {
  --standard-color:       #552200;
  --standard-background:  #faefaf;
  --emphasis-color:       rgb(8,80,8);
  
  --nav-bg-color:         red;
  --nav-bg-hovercolor:    transparent;
  --nav-pri-color:        white;
  --nav-pri-hovercolor:   #552200;
  --ruler-svg:            url('../images/3-star.svg');
  --background-img:       url('../images/old-paper.jpg')
}


.map-overlay area     { cursor: pointer;}

.diagram-node:hover   { fill: #e0d7b7; }

div.body, 
.panels,
.toolbar,
.context,
.footer             { background: var(--background-img);}

/* Hide the top bar froo-froo and the edit-this-page hyperlink */
div.navbar-end , 
div.edit-this-page a,
div.nav-panel-explore            { display: none;}

/* Standard Styling in Antora Page layout*/
.paragraph p          { color: var(--standard-color); }

.navbar { background-color: var(--emphasis-color);}

h1.page, .doc h2, .doc h3 {color: var(--emphasis-color) ;}

#toc ul > li > a {color: #088808;}

/* Specifically to restyle the HR in the Antora Main panel */
.doc hr {
  position:         relative;
  overflow:         visible;
  border:           transparent; 
  height:           40px; 
}

.doc hr::after {
  content:                "";
  position:               absolute;
  left:                   50%;
  top:                    50%;                                                                                                                                                                                                                                                                                                                                                                                                              
  color:                  rgb(08, C8, 08);
  transform:              translate(-50%, -50%);
  width:                  100%;
  height:                 24px;
  display:                block;  
  background-position:    center;
  background:             var(--standard-color);
  background-image:       var(--ruler-svg);                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ); 
  mask:                   var(--ruler-svg) no-repeat center / contain ;
  -webkit-mask:           var(--ruler-svg) no-repeat center / contain ; 
}




/* Styling SVG Menus */
g#c-menu a                            { text-decoration: none;}
svg a       text                      { fill: var(--nav-pri-color) ; }
svg a:hover text                      { fill: var(--nav-pri-hovercolor);  }

svg a       path                      { fill: var(--standard-color);  }
svg a:hover path                      { fill: var(--nav-bg-hovercolor) }


/* dealing with misbehaving .nav sidebar */
.ynav-list .nav-item > .nav-list       {  display: block;}

.footer {font-size: small;  padding-top: 20px; text-align: justify; color:black; }


span.image:not(.inline) {float: right;}

.meme-picture {
    display: block;
    text-align: center;
    margin: 2rem auto;
    clear: both;
}

.meme-picture .imageblock {
    display: inline-block;
}

.meme-picture .quoteblock {
    display: block;
    margin-top: 0.5rem;
}
/* ============================================================
   Image title tooltips
   Provides CSS-based tooltips for images with a title attribute,
   working in browsers (like Brave) that suppress native tooltips.
   ============================================================ */

img[title] {
  position: relative;
  cursor: help;
}

img[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}

img[title]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% - 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
  z-index: 100;
  pointer-events: none;
}
span.image.inline {
    float: right;
    margin-left: 0.5em;
}

/* Override: no float, for use in tables and other centered contexts */
.icon-inline span.image.inline {
    float: none;
    margin-left: 0;
    display: inline;
}

td.halign-center span.image {
    display: block;
    float: none;
    margin: 0 auto;
}

td.halign-center p.tableblock {
    text-align: center;
}