/* Base-level CSS for the HP simulators page. */

h1, h2, h3,
h4, h5, h6       { font-family: sans-serif }

dfn              { font-weight: bold; font-style: normal }

/* Directory identifiers are boxed and shaded gray. */

em.directory     { padding: 0 0.2em; border: 1px dotted;
                   background-color: rgb(238, 238, 255);
                   font: bold medium monospace }

.header          { padding: 0.5em; margin-bottom: 1em;
                   text-align: center;
                   color: black; background-color: rgb(232, 232, 232) }

/* The left pane contains the menu.  The right pane contains the text. */

.right-pane      { margin-left: 15em }

/* Making the menu sticky allows it to scroll to the top of the window but
   then stay there as the content continues to scroll upward. */

div.menu         { position: sticky; top: 1em; float: left }

/* The menu header is suppressed when the page is styled. */

.menu h2         { display: none }

/* Sticky is not supported on MSIE.  So this rule will be a NOP on that
   browser, and the fixed position will be used.  On conforming browsers,
   this rule has higher specificity, so it will override the fixed position
   setting. */

#menu-list       { position: sticky }

.menu ul         { position: fixed; width: 14em;
                   margin: 0; padding: 0.1em 0;
                   background-color: rgb(232, 232, 232) }

/* Fixed position causes the element to be repeated on each page of printed
   output.  We remove the menu if the page is printed. */
                   
@media print     { .menu ul { display: none }
                   .right-pane { margin-left: auto } }

/* The normal list bullets are removed when the menu is styled. */

.menu li         { list-style-type: none;
                   margin: 0.5em; padding: 0;
                   background-color: rgb(0, 192, 255) }

/* Hovering over a menu item renders an outline around the box. */

.menu li:hover   { outline-style: solid; outline-color: rgb(0, 128, 232) }

/* Menu text is rendered in bold white against a bluish background without the
   usual link underline.  Setting the cursor to the "pointer" value is redundant
   but necessary for MSIE, which otherwise renders the cursor as the "text"
   (I-beam) cursor. */

.menu a          { font-family: sans-serif; font-weight: bold;
                   text-decoration: none;  color: white; cursor: pointer }

/* The anchor text is rendered as a block, so that clicking anwywhere within the
   block area activates the link. */

.menuitem        { display: inline-block; width: 12em; padding: 0.5em }

/* The "features" list contains multiple sentences per item, so a small bottom
   margin improves readability. */

.features li     { margin-bottom: 1em }

/* The "bugfixes" list is a sublist under "features" and has a half-size top
   margin to improve readability. */

.bugfixes li     { margin-top: 0.25em; margin-bottom: 0 }

/* These lists are rendered with each list item contained in a fixed-width box
   having a light background color and a wide, darker-colored left edge. */

ul.releases,
ul.documents,
ul.appnotes,
ul.repositories,
ul.kits          { padding-left: 0 }

.releases li,
.documents li,
.appnotes li,
.repositories li,
.kits li         { list-style-type: none; width: 35em;
                   margin: 1em; padding: 0.7em;
                   border-left-width: 0.5em; border-left-style: solid; 
                   font-family: sans-serif }

/* Release boxes are light green. */

.releases li     { border-color: rgb( 82, 224,  82); background-color: rgb(233, 251, 233) }

/* Document and application note boxes are light blue. */

.documents li,
.appnotes  li    { border-color: rgb(140, 203, 232); background-color: rgb(221, 238, 255) }

/* Repository boxes are light red. */

.repositories li { border-color: rgb(255, 200, 200); background-color: rgb(255, 240, 240) }

/* Software kit boxes are light yellow. */

.kits li         { border-color: rgb(250, 220,  82); background-color: rgb(252, 250, 238) }

/* Horizontal rules are hidden when the page is styled.  Separation is
   provided by borders instead. */

hr               { display: none }

.footer          { margin-top: 1em; padding: 0.1em 1em;
                   background-color: rgb(232, 232, 232) }