/*              Styles to convert the menu to the side - HTML5 & CSS3                            sideMenu53.css
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
body { background-image: none ; }

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

#menu { 
    position: absolute ; top: 0 ; left: 24px ; width: 10% ; min-width: 18ex ; height: 100% ; 
    border-left: 3px solid #444 ; padding: 0 ; text-align: left ;
}
  #menu ul {
      width: 100% ;
      margin: 0 ; text-indent: 0 ; font-size: 108% ; letter-spacing: 0.2ex ;
  }
    #menu li { position: relative ; margin-top: 2ex ; left: 2.5ex ; }
    #menu li:first-child { margin-top: 80px ; }
    #menu li::before {
        position: absolute ; left: -1.5ex ; top: -0.5ex ;
        content: "–" ; color: #000 ; font-weight: bold ; font-size: 170% ;
    }
    #menu li.Subitem { margin: 0 0 0.7ex 0 ; text-indent: 0 ; line-height: 100% ; }
    #menu li.Subitem::before { content: "" }
      #menu a[data-target~="self"], #menu a[data-target~="self"]:hover, #menu a[data-target~="self"]:visited {
          color: #040 ; font-size: 92% ;
      }
    #menu ul ul { font-size: 100% ; text-indent: 0 ; }
      #menu ul ul li, #menu ul ul ul li {
          margin-top: 1.2ex ; color: #210 ; background-color: transparent ;
          line-height: 85% ; font-variant: normal ; letter-spacing: 2px ;
          cursor: pointer ;
      }
      #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 { display: inline-block ; padding: 0 0 0 1.2ex ; text-indent: 0 ;}
    /* 'first-letter' only works for block-level elements */
    #menu a::first-letter { text-transform: uppercase ; }
    /* Pages in progress may still get labelled rel="next" &c if they have children, so InProgress class is required */
    #menu a.InProgress, #menu a.InProgress:hover, #menu a.Inactive:link, #menu a.Inactive:hover {
        color: #898989 ; background: transparent ;
    }
    #menu .Sibling a.Inactive, #menu .Proposed a.Inactive, #menu .Proposed, #menu a.Proposed, #menu a.Proposed:hover {
        display: none ;
    }
    /* Veiled items are fully visible pages, just not advertised much */
    #menu ul li.Veiled, #menu ul ul li.Veiled, #menu ul ul ul li.Veiled {
        display: none ;
    }
    #menu #planning, #menu #testing {
        display: none ;
    }

/* #pageHead for poster pages; space at left for vertical line and menu 
   #pageBody unfortunately because of common53.css */
main, article, article#pageBody, section#pageBody, #pageHead { padding: 1rem 0 0 calc(55px + 25ex) ; }
main, article { min-height: 32rem ; }

body>h3 { padding: 0 0 1rem calc(55px + 25ex) ; text-align: center ; }

/* _____________________________________________________________________________________________________________ */