/*              Styles to convert the menu to the side - HTML5 & CSS3                            sideMenu53.css
                          ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
*/
@import "topMenu53.css" screen and (max-width: 699px) ;
@media only screen and (min-width: 700px) {

/* ------------------------------------------------------------------------------------------------ Variables -- */
/* Reset the dimensions of the side menu in the associated local .css file */
:root {
    --menu-width: max(10vw, 18ch) ;
    --menu-min-height: 32rem ;
    --menu-height: 36rem ;
    --menu-indents: 2.5ex ;
}
/* ============================================================================================ Document-wide == */
body { min-height: var(--menu-min-height)}

  header h2, #pageTop h2 { display: block ; }

#menu {
    position: absolute ; top: var(--menu-top, 0) ; left: var(--main-left) ; 
    width: var(--menu-width) ; min-height: var(--menu-min-height) ; padding: 0 ; 
}
  #menu ul { width: 100% ; font-size: 108% ; letter-spacing: 0.2ex ; }
    #menu li { position: relative ; margin-top: 2ex ; left: var(--menu-indents) ; text-indent: 0 ; }
    #menu li::before {
        position: absolute ; left: -1.5ex ; top: -0.5ex ;
        content: "–" ; color: black ; font-weight: bold ; font-size: 170% ;
    }
    #menu li::first-letter { text-transform: uppercase ; }
    #menu li:first-child { margin-top: 80px ; }
    #menu li.Subitem { margin: 0 0 0.7ex 0 ; text-indent: 0 ; line-height: 100% ; }
    #menu li.Subitem::before { content: none ; }
      #menu :is(a[data-target~="self"], a[data-target~="self"]:hover, a[data-target~="self"]:visited) {
          color: var(--brightVeryDark) ; font-size: 92% ;
      }
      #menu :is(ul ul, ul ul ul) li {
          margin-top: 1.2ex ; color: var(--altNearBlack) ; 
          line-height: 95% ; font-variant: normal ; letter-spacing: 2px ;
      }
    #menu ul ul { width: calc(100% - var(--menu-indents)) ; }
      #menu ul ul li::before { content: none ; }
      #menu ul ul li:first-child { margin-top: 0.8ex ; }
      #menu ul ul li:last-of-type { margin-bottom: 2ex ; }

    #menu li.About { margin: 5ex 0 0 0 ; }

    #menu a { padding: 0 0 0 1.2ch ; }
       #menu ul ul a { padding: 0 ; }
    /* Pages in progress may still get labelled rel="next" &c if they have children, so InProgress class is required */
    #menu :is(a.InProgress, a.InProgress:hover, a.Inactive:link, a.Inactive:hover) { color: var(--midtone) ; }

    #menu :is(.Sibling, .Proposed) :is(a.Inactive, .Proposed, a.Proposed, a.Proposed:hover) { display: none ; }
    /* Veiled items are fully visible pages, just not advertised much */
    #menu :is(ul, ul ul, ul ul ul) li.Veiled { display: none ; }
    #menu :is(#planning, #testing) { display: none ; }

main, article { height: fit-content ; }
main { min-height: calc(var(--menu-min-height) - 2 * var(--main-top) + 6rem) ; }

body>h3 { padding: 0 0 1rem calc(var(--main-left) + var(--menu-width)) ; text-align: center ; }

        [rel="prev"]:empty { margin: 0 0 0 calc(var(--menu-width) / 1.65) ; } /* font size is 165% */
} /* ___________________________________________________________________________________________________________ */