:root {
  --standard-color:       #552200;
  --standard-background:  #faefaf;
  --nav-bg-color:         red;
  --nav-bg-hovercolor:    transparent;
  --nav-pri-color:        white;
  --nav-pri-hovercolor:   #552200;
  --ruler-svg:            url('/caldris/latest/_images/3-star.svg');
  --background-img:       url('/caldris/latest/_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); }




/* 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:                blue;
  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 */
.nav-list .nav-item > .nav-list       {  display: block;}