1/*=============================================================================
   2|
   3| NAME
   4|
   5|     StyleSheet.css
   6|
   7| DESCRIPTION
   8|
   9|     External cascading style sheet for my web pages.  Goes into the
  10|     top level directory of my web server.  W3C validated as CSS level 3 + SVG
  11|
  12| USAGE
  13|
  14|    To link to it in a hypertext document, put the following statement,
  15|
  16|        <link rel="StyleSheet" href="StyleSheet.css" type="text/css" />
  17|
  18|    within the <head>...</head> section of an HTML document.
  19|
  20| LEGAL
  21|
  22|   Copyright (C) 1999-2025 by Sean Erik O'Connor.  All Rights Reserved.
  23|   last updated 21 Apr 25
  24|
  25=============================================================================*/
  26
  27/*
  28 * HTML elements are two main types.
  29 *
  30 *   Block elements:  Each one starts on a new line.
  31 *
  32 *     +--------+
  33 *     | block1 |
  34 *     +--------+  <-- vertical margins collapse where blocks overlap.
  35 *     +--------+  <-- 
  36 *     | block2 |
  37 *     +--------+
  38 *
  39 *   Inline elements:  Go with the flow, left to right for English, 
  40 *   right to left for Hebrew.
  41 *
  42 *     +---------+   +---------+
  43 *     | inline1 |   | inline2 |
  44 *     +---------+   +---------+
  45 *  
  46 * Floating elements:  Text flows around this element which is floated left.
  47 *
  48 *     text text text text text text text text
  49 *     +---------+ text text text text text 
  50 *     | element | text text text text text 
  51 *     +---------+ text text text text 
  52 *     Hier stehe Ich, Ich kann nicht anders!     <----- <p style="clear: left;"> Hier stehe Ich, Ich kann nicht anders!
  53 *                                                       But specifying text with "clear" makes the text start BELOW any element 
  54 *                                                       which is floated left above it.
  55 * CSS Box Model
  56 *
  57 *     +------------------------------------+
  58 *     |  margin                            |
  59 *     |   +-----------border------------+  |
  60 *     |   |  padding                    |  |
  61 *     |   |     +-----------------+     |  |
  62 *     |   |     |C O N T E  N   T |     |  |
  63 *     |   |     |+..........+ C O |     |  |
  64 *     |   |     |. floating . N T |     |  | <------ Floating elements stay within the CONTENT.
  65 *     |   |     |. element  . E N |     |  |        
  66 *     |   |     |+..........+ E N |     |  |
  67 *     |   |     |T   C O N T E  N |     |  |
  68 *     |   |     |T C O N T E N  T |     |  |
  69 *     |   |     +-----------------+     |  |
  70 *     |   |                     padding |  |
  71 *     |   +-----------border------------+  |
  72 *     |                            margin  |
  73 *     +------------------------------------+
  74 *
  75 * CSS Nomenclature
  76 * 
  77 *  selector
  78 *   |
  79 * --+---                    ---+
  80 * em.wow                       |
  81 * {                            |
  82 *     font-style:  italic ;    |
  83 *     --------+------------    |
  84 *             |                |
  85 *          declaration #1      |
  86 *                              +---- rule
  87 *      property   value        |
  88 *         |         |          |
  89 *     ----+-----   -+--        |
  90 *     font-weight: bold ;      |
  91 * }   --------+--------        |
  92 *             |             ---+
  93 *        declaration #2
  94 * 
  95 * 
  96 *  Used in HTML as:
  97 *     <em class="wow">wowish talk talk</em>
  98 */
  99
 100/*
 101 * ------------------------------ Initial Settings ----------------------------- 
 102 */
 103
 104/* CSS rule with universal selector to clear padding and margins in every 
 105 * element, overriding all web browser defaults, before we add our own values.
 106 */
 107* 
 108{
 109    padding: 0 ;
 110    margin:  0 ;
 111}
 112
 113/* 
 114 * Make all MathJax equations a little bit larger.  Override any user style sheet settings with !important
 115 * This isn't the best solution since it interferes with the MathJax processor.
 116 */
 117.MathJax
 118{
 119    font-size: 120% !important;
 120}
 121
 122/* For all elements from the <html> root on downwards, define CSS variables for my custom colors.  Reduce the number of colors to harmonize. */
 123:root
 124{
 125    --kweilin-black:               rgb(   28,  28,  28 ) ;
 126
 127    --warm-brown:                  rgba( 187, 139,  92, 1) ;
 128    --dark-brown:                  rgb(  150,  50,  50);
 129
 130    --light-gray:                  rgba( 100, 100, 100, 0.1 ) ;
 131    --gray-blue:                   rgb(  220, 220, 240 ) ;
 132    --light-blue-gray:             rgba( 183, 217, 231, 1) ;
 133    --dark-blue-gray:              rgb(  100, 150, 150 ) ;
 134    --canvas-gray:                 rgb(  150, 150, 170 ) ;
 135    --art-gallery-blue-gray:       rgb(   70,  70,  90 ) ;
 136
 137    --light-yellow-tint:           rgba( 255, 255, 130, 0.7 ) ;
 138
 139    --light-red:                   rgb(  255,   0, 102 ) ;
 140
 141    --purple:                      rgb(  153,   0, 153 ) ; 
 142
 143    --light-blue:                  rgb(  100, 150, 250 ) ;
 144    --dark-blue:                   rgb(    0,   0, 153 ) ;
 145    --art-gallery-blue:            rgb(   70,  85, 251 ) ;
 146    --very-light-blue:             rgb(  220, 220, 240 ) ;
 147    --light-blue-background:       rgb(  222, 240, 255 ) ;
 148    --lighter-blue-background:     rgb(  170, 205, 205 ) ;
 149    --light-blue-tint:             rgba(   0, 100, 255, 0.2 ) ;
 150    --light-blue-body-background:  rgb(  170, 235, 245 ) ;
 151    --light-blue-paper:            rgb(  239, 247, 247 ) ;                  
 152    --cyan-tint:                   rgb(  225, 240, 255 ) ;
 153
 154    /* Font Families brief description at W3C:
 155           https://www.w3.org/Style/Examples/007/fonts.en.html  */
 156    --serif:      "Times New Roman", Palatino, serif ;
 157    --sans-serif: Verdana, Ariel, Helvetica, sans-serif ;
 158    --monospace:  "Courier New", "Courier", "Andale Mono", monospace ;
 159    --cursive:    "Snell Roundhand", "Apple Chancery", cursive ;
 160    --fantasy:    "Copperplate", "Luminari", fantasy ;   /* These may not show on some computer systems and browsers. */
 161}
 162
 163/*
 164 * ------------------------------ Hyperlinks ----------------------------------
 165 *
 166 * CSS rules for pseudo-class selectors containing property/value pairs.
 167 * They MUST be in this order due to CSS cascade rules.
 168 */
 169
 170/* Unvisited links are dark blue. */
 171a:link
 172{
 173    color:               var(--dark-blue) ;
 174    background-color:    transparent ;
 175}
 176
 177/* Visited links have purple text.  You must have your browser history enabled 
 178 * and set to more than 0 days to see a visited link change color.  
 179 * Links stay colored until you clear the browser history and refresh the page.
 180 */
 181a:visited
 182{
 183    color:               var(--purple) ;
 184    background-color:    transparent ;
 185}
 186
 187/* Selected links have purple text until another element gets selected, including the page background itself.  */
 188a:focus
 189{
 190    color:               var(--purple) ;
 191    background-color:    transparent ;
 192}
 193
 194/* When the mouse cursor hovers over a hyperlink, change color to cyan. */
 195a:hover
 196{
 197    color:               var(--light-blue) ;
 198    background-color:    transparent ;
 199    transition:          all 0.1s ease-in-out ; /* Fade in and out gradually, both color and background color. */
 200}
 201
 202/* When the mouse cursor hovers over a hyperlink containing an image, smoothly enlarge the image slightly. */
 203a:hover img
 204{
 205    transform: scale( 1.04 ) ; /* Just larger enough to notice. */
 206
 207    /* Make scale changes smooth.  That looks so much more sophisticated. */
 208    transition-property: transform ;
 209    transition-duration: 0.3s ;
 210    transition-timing-function: ease-in-out ;
 211}
 212
 213/* Clicked hyperlink is light red. */
 214a:active
 215{
 216    color:               var(--light-red ) ;
 217    background-color:    transparent ;
 218}
 219
 220/*
 221 * ------------------------------ Body Settings -------------------------------- 
 222 */
 223
 224/* rem units will use the font size from this HTML element. */
 225html
 226{
 227    font-size: 100% ;
 228}
 229
 230 /* Default settings for all my main web pages. */
 231body
 232{
 233    /* A wide sans-serif font is more readable on the web. */
 234    font-family:            var( --sans-serif ) ;
 235
 236    /* Set the body font size a little smaller than the user's default browser setting. */
 237    font-size:              0.8rem ; 
 238
 239    /* Black text is easier to read. */
 240    color:                  black ;
 241
 242    /*  More vertical space between lines for more pleasant reading.  Use a unitless font height multiplier.  
 243        Length and percentage percentage values can give scrunched text due to poor inheritance behavior. */
 244    line-height:            1.7 ;
 245
 246    /*  While waiting for the browser to load the background image of simulated blue paper, color the background solid light blue to match. */
 247    background-color:       var(--light-blue-body-background) ;
 248    background-image:       url( "Images/blueBackground.jpg" ) ;
 249
 250    /*  Tile the background. */
 251    background-repeat:      repeat ;
 252
 253    /*  Background image stays fixed while the foreground text scrolls. */
 254    background-attachment:  fixed ; 
 255}
 256
 257/* Mobile devices don't have hover and usually don't honor fixed background due to increased computation. */
 258@media (hover: none)
 259{
 260    body
 261    {
 262        background-attachment: initial ;
 263    }
 264}
 265
 266/* Body pages of the technical report class have a background which is very light blue simulated 
 267 * paper for increased readability.  Apply all the default body property/values first.  This rule,
 268 * which is more specific, since it uses a class selector, can override the body background-color,
 269 * and background-image properties.
 270 */
 271body.technicalReport
 272{
 273    /*  While waiting for the browser to load the background image of simulated blue paper, color the background solid light blue to match. */
 274    background-color:  var(--light-blue-paper ) ;
 275    background-image:  url( "Images/bluePaper.jpg" ) ;
 276}
 277
 278/* 
 279 * ------------------------------ Grid Wrapper for the Body --------------------------
 280 *
 281 * Web Page Layout
 282 *
 283 * +--- head ------------------------------------------------------------------------+
 284 * |  metas                                                                          |
 285 * |  link to stylesheet                                                             |
 286 * +--- head ------------------------------------------------------------------------+
 287 *
 288 * +--- body, body.techincalReport --------------------------------------------------+
 289 * |                                                                                 |
 290 * |   +------------ div.wrapper, div.technicalReport, div.titlePage ------------+   |
 291 * |   |                                                                         |   |
 292 * |   |    SEE GRID LAYOUT BELOW                                                |   |
 293 * |   |                                                                         |   |
 294 * |   +------- div.wrapper -----------------------------------------------------+   |
 295 * |                                                                                 |
 296 * +--- body ------------------------------------------------------------------------+
 297 *
 298 * +--------------------------- div.wrapper --------------------------------------------------------+
 299 * |                                                                                                |
 300 * |                          (((grid columns)))                                                    |
 301 * |                                                                                                |
 302 * |       [wrapper-aside-col]                                                                      |
 303 * |       .                                                                                        |
 304 * |       .     [wrapper-nav-col]                                                                  |
 305 * |       .     .                                                                                  |
 306 * |       .     .        [wrapper-content-col]                                                     |
 307 * |       .     .        .                                               [wrapper-end-col]         |
 308 * |       .     .        .                                               .                         |
 309 * |       +-----+----------------- header.title -------------------------+   [wrapper-title-row]   |
 310 * |       |     |                                                        |                         |
 311 * |       |     |                    h1                                  |                         |
 312 * |       a     |                    hr                                  |                         |
 313 * |       s     |                                                        |                         |
 314 * |       i     +--------------- header.navigation ----------------------+   [wrapper-nav-row]     |
 315 * |       d     |                                                        |                         |
 316 * |       e     |     nav hyperlink 1 ... nav hyperlink n                |                         |
 317 * |       .     |                                                        |                         |
 318 * |       b     +---------+------- article.content ----------------------+   [wrapper-article-row] |
 319 * |       o     |         |                                              |                         |
 320 * |       r  i  |  nav    |           h2                                 |                         |
 321 * |       d  m  |         |           section                            |                         |
 322 * |       e  a  |  link 1 |           h3                                 |      (((grid rows)))    |
 323 * |       r  g  |    .    |           section                            |                         |
 324 * |       |  e  |    .    |           h4                                 |                         |
 325 * |       |     |    .    |           section                            |                         |
 326 * |       |     |  link n |           ...                                |                         |
 327 * |       |     |         |                                              |                         |
 328 * |       |     +---------+------- footer.footer ------------------------+   [wrapper-footer-row]  |
 329 * |       |     |                                                        |                         |
 330 * |       |     |            legal and other stuff                       |                         |
 331 * |       |     |                                                        |                         |
 332 * |       +-----+--------------------------------------------------------+   [wrapper-end-row]     |
 333 * |                                                                                                |
 334 * +--------------------------- div.wrapper --------------------------------------------------------+
 335 *
 336 * The elements inside the wrapper are arranged in this order in the HTML, but of course
 337 * the actual placement is specified by the grid.
 338 *
 339 * <header class="title">
 340 *     TITLE OF THIS WEB PAGE
 341 * </header>
 342 *
 343 * <header class="navigation">
 344 *     HYPERLINKS
 345 * </header>
 346 *
 347 * <aside class="border">
 348 *     BORDER IMAGE
 349 * </aside>
 350 *
 351 *   NOTE:  title pages have no <nav> element
 352 *
 353 * <nav>
 354 *     HYPERLINKS
 355 * </nav>
 356 *
 357 * <article class="content">
 358 *     MOST OF THE CONTENT IN THE WEB PAGE.
 359 * </article>
 360 *
 361 * <footer class="footnote">
 362 *     COPYRIGHT
 363 * </footer>
 364 */
 365
 366/*
 367 *   wrapper-aside-col contains the margin with the border image.
 368 *      -We make slightly larger than the img.border class to give a thin space on the right.
 369 *   wrapper-nav-col is the vertical navigation sidebar.  
 370 *      -Minimum is set wide enough so words in the navigation hyperlinks don't overflow to the right.  
 371 *      -Maximum is clamped so very wide page doesn't have big stretched out navigation hyperlinks.
 372 *   wrapper-content-col is most of the page, so it gets the most relative space.  
 373 *      -We use high fr number so that a very wide page shows more content and less navigation hyperlinks. 
 374 *   Recall fr is the fraction of the width AFTER subtracting fixed widths such as 1.5rem.
 375 *
 376 *   wrapper-*-row are set to auto because we want the default behavior of HTML flow;  we don't want to set the height of rows.
 377 */
 378div.wrapper
 379{
 380    /* Items in this container are grid type.  They are placed in 2D */
 381    display: grid ;
 382    grid-template-columns:  [wrapper-aside-col] 1.5rem [wrapper-nav-col] minmax( 9rem, 1fr ) [wrapper-content-col] 30fr [wrapper-end-col] ;
 383    grid-template-rows:     [wrapper-title-row] auto [wrapper-nav-row] auto [wrapper-article-row] auto [wrapper-footer-row] auto [wrapper-end-row] ;
 384}
 385
 386/* Make up new CSS "subclasses" from which we can do "multiple inheritance".
 387 *
 388 * For example this wrapper inherits styles from both "wrapper" and "titlePage" classes.
 389 *      <div class="wrapper titlePage">
 390 *          ...
 391 *          <article>
 392 *          ...
 393 */
 394div.technicalReport
 395{
 396    /* Additional style rules for every element inside the wrapper. */
 397}
 398
 399div.titlePage
 400{
 401    /* Additional style rules for every element inside the wrapper. */
 402}
 403
 404/* 
 405 * See below in the articles section where we have this selector,
 406 *     div.titlePage article.content
 407 * in which an article which is inside a div inherits from titlePage has a modified style.
 408 */
 409
 410/*
 411 * ------------------------------ Header --------------------------------------- 
 412 */
 413
 414/* Top of page header. */
 415header.title
 416{
 417    /* The title spans multiple columns. */
 418    grid-column: wrapper-nav-col / wrapper-end-col ;
 419    grid-row:    wrapper-title-row ;
 420}
 421
 422/*
 423 * ------------------------------ Navigation Bar ------------------------------- 
 424 */
 425
 426/* Horizontal navigation menu bar at the top. */
 427header.navigation
 428{   /* Items within this container are of flexbox type.  They flow in 1D horizontally. */
 429    display: flex ;
 430
 431    font-size: 0.75rem ;
 432
 433    /* Put the first hyperlink at the beginning. */
 434    justify-content: flex-start ;
 435
 436    /* Words in the navigation hyperlink wrap around to the next row. Note a single looooong word would
 437       overflow the navigation menu into the content. */
 438    flex-flow:       row wrap ;
 439
 440    grid-column:     wrapper-nav-col / wrapper-end-col ;  
 441    grid-row:        wrapper-nav-row ;
 442
 443    /* One letter wide for top, right, bottom left margins. */
 444    margin:          0.5rem ;
 445
 446    /* For debugging, place a dotted red line right outside the border. 
 447    outline-color: red; 
 448    outline-style: dotted; 
 449    */
 450}
 451
 452/*  Descendent combinator selector.  Apply only to images somewhere within the navigation header heirarchy. */
 453header.navigation img
 454{
 455    vertical-align:  top ;   /* Text bottom aligns with image middle. */
 456    margin-left:     1rem ;   /* Prevent text from running into the images. */
 457}
 458
 459/* Hyperlinks in the navigation header have smaller margins. */
 460header.navigation a
 461{
 462    margin-right: 0.5rem ;
 463}
 464
 465/*
 466 * ------------------------------ Navigation Button ---------------------------- 
 467 */
 468nav.backtotop > a
 469{
 470    display:          block ;       /* Convert hyperlinks from inline to block so we can color the background.  Can't do that with inline elements.  */
 471    text-decoration:  none ;        /* Remove default hyperlink underlining. */
 472
 473    font-family:      var(--sans-serif) ;
 474    font-size:        0.8rem ;       /* Unobtrusive size. */
 475
 476    padding-bottom:   0.4rem ;       /* Center the text in the bubble. */
 477    padding-left:     0.7rem ;       /* Center the text in the bubble. */
 478    border-radius:    1rem ;         /* Rounded edges. */
 479
 480    width:            6rem ;         /* Short enough to contain the words, "back to top". */
 481    height:           1rem ;
 482    clear:            both ;         /* This element starts on a new line below any floated elements, either left or right. */
 483}
 484
 485/* Unclicked hyperlinks show up as black on blue */
 486nav.backtotop > a:link
 487{
 488    color:            var(--art-gallery-blue-gray) ;
 489    background-color: var(--light-blue-background) ;
 490}
 491
 492/* Applies to the <a href element in a nav but only when hovering.  */
 493/* For the special case of the <nav class="backtotop">Back to top</nav> element, specify the same look and feel. */
 494nav.backtotop > a:hover
 495{
 496    color: white ;                           /* Text color white for contrast. */
 497    background-color: var(--light-blue) ; /* Color the whole block background light blue. */
 498}
 499
 500/* Selected links have purple text until another element gets selected, including the page background itself.  */
 501nav.backtotop > a:focus
 502{
 503    color:            var(--purple) ;
 504    background-color: var(--light-blue) ; /* Color the whole block background light blue. */
 505}
 506
 507/*
 508 * ------------------------------ Navigation Sidebar --------------------------- 
 509 */
 510/* Navigation sidebars. */
 511nav
 512{
 513    /* We span multiple rows and columns. */
 514    grid-column:       wrapper-nav-col / wrapper-content-col ;
 515    grid-row:          wrapper-article-row / wrapper-footer-row ;
 516
 517    color:             black ;
 518
 519    background-color:  transparent ;
 520    padding:           0.2rem ;
 521
 522    border:            none ;
 523    top:               1rem ;
 524    left:              0 ;
 525    margin-left:       0.1rem ;
 526
 527    /*  We can make the position fixed to the viewport, but then for small devices, a long 
 528    list of navigation items gets clipped off the bottom of the screen.
 529    position:          fixed ;
 530    width:             5rem ;
 531    margin-left:       1.4rem ;
 532    margin-top:        8rem ;
 533    */
 534
 535    /* For debugging, place a dotted red line right outside the border. 
 536    outline-color: red; 
 537    outline-style: dotted; 
 538    */
 539}
 540
 541/*
 542 * Child combinator selector for an unordered list which is a child of nav.
 543 */
 544nav > ul
 545{
 546    /* Remove all default padding and margins. */
 547    padding: 0 ;
 548    margin:  0 ;
 549}
 550
 551/*
 552 * Special rules when <li> is a child of the <ul> which is a child of nav.
 553 */
 554nav > ul > li
 555{
 556    list-style-type:  none ;     /* Remove list bullets. */
 557    list-style:       none ;     /* Hack:  because Firefox doesn't listen to list-style-type here. */
 558    font-size:        0.55rem ;  /* Small unobtrusive font. */
 559    margin-bottom:    0.4rem ;   /* Leave some space between blocks. */
 560
 561    background-color: var(--light-blue-background ) ;
 562    border-radius:    1rem ;     /* Rounded edges on list items. */
 563}
 564
 565/* Special rules for a hyperlink <a href="..."></a> child of a li which is child of ul which is child of nav.   */
 566nav > ul > li > a
 567{
 568    display:          block ;  /* Convert hyperlinks from inline to block so we can color the background.  Can't do that with inline elements.  */
 569    text-decoration:  none ;   /* Remove default hyperlink underlining. */
 570    padding-left:     0.2rem ;  /* Add space before and after the text so hover background isn't flush against the text. */
 571    padding-right:    0.2rem ;  /* Add space before and after the text so hover background isn't flush against the text. */
 572    border-radius:    1rem ;   /* Rounded edges on the hyperlinks. */
 573}
 574
 575/* Unclicked hyperlinks show up as black on blue */
 576nav > ul > li > a:link
 577{
 578    font-family:      var(--sans-serif) ;
 579    font-size:        0.7rem ;                /* A little larger to be readable. */
 580    color:            var(--art-gallery-blue-gray) ;
 581    background-color: var(--very-light-blue-background) ;
 582}
 583
 584/* Applies to the <a href element in a nav but only when hovering.  */
 585/* For the special case of the <nav class="backtotop">Back to top</nav> element, specify the same look and feel. */
 586nav > ul > li > a:hover
 587{
 588    color: white ;                           /* Text color white for contrast. */
 589    background-color: var(--light-blue) ; /* Color the whole block background light blue. */
 590    transition: all 0.15s ease-in-out ;      /* Fade in and out gradually, both color and background color. */
 591}
 592
 593/* Selected links have purple text until another element gets selected, including the page background itself.  */
 594nav > ul > li > a:focus
 595{
 596    color:            var(--purple) ;
 597    background-color: var(--light-blue) ; /* Color the whole block background light blue. */
 598}
 599
 600/*
 601 * ------------------------------ Article -------------------------------------- 
 602 */
 603/* Bulk of page goes into an article of content the class.  It is divided into sections. */
 604article.content
 605{
 606    grid-column: wrapper-content-col ;
 607    grid-row:  wrapper-article-row / wrapper-footer-row ;
 608
 609    margin-left:  1rem ;
 610    margin-right: 2rem ;
 611}
 612
 613/* Title pages have no navigation bar, i.e. no <nav>...</nav> in their html.
 614 * Widen the article area to fill the space which the nav would have occupied. 
 615 */
 616div.titlePage article.content
 617{
 618    grid-column: wrapper-nav-col / wrapper-end-col ;
 619}
 620
 621/*
 622 * ------------------------------ Aside ---------------------------------------- 
 623 */
 624/* Usually will contain an image of class border in the entire left vertical margin for decoration. */
 625aside.border
 626{
 627    grid-column: wrapper-aside-col ;
 628    grid-row:    wrapper-title-row / wrapper-end-row ;
 629}
 630
 631/*
 632 * ------------------------------ Footnote ------------------------------------- 
 633 */
 634footer.footnote
 635{
 636    grid-column: wrapper-nav-col / wrapper-end-col ;
 637    grid-row: wrapper-footer-row ;
 638}
 639
 640/*
 641 * -------------------------- Headings -----------------------------------------
 642 */
 643/*  Ordinary page title.  */
 644h1
 645{
 646    /* Serif looks more elegant.  Make it larger and centered since it's a title. */
 647    font-family:    var(--serif) ;
 648    font-size:      2.0rem ;
 649    text-align:     center ;
 650
 651    clear:          both ;  /* This element starts on a new line below any floated elements, either left or right. */
 652}
 653
 654/*
 655 *  My name on the title page using a background image since I can't rely on Zapfino font being available on browsers.
 656 */
 657h1.name
 658{
 659    min-height:          2.6rem ;         /* Have a minimum font height, otherwise, leave scalable with viewport. */
 660
 661    background-image:    url( "Images/SeanErikOConnor.png" )  ; /* PNG image with transparent background. */
 662    background-repeat:   no-repeat ;
 663    background-size:     contain ;       /* Make the image fit the box when we resize the page. */
 664    background-position: center center ; /* Center the image in the box. */
 665
 666    margin-top:          0.5rem ;  /* Spacing all around so image doesn't bump into horizontal bars, text or sides of viewport. */
 667    margin-bottom:       0.6rem ;
 668    margin-left:         1.0rem ;
 669    margin-right:        1.0rem ;
 670
 671    clear:               both ;  /* This element starts on a new line below any floated elements, either left or right. */
 672}
 673
 674/*
 675 * Put my name into the title, but don't display it.
 676 * This way text-only browsers can see it.
 677 */
 678h1.name > span
 679{
 680    display:          none ;
 681}
 682
 683/*  Elegant green script page title.  iPhone 12 has problems showing Brush Script MT, so use generic cursive
 684    in this font stack.  
 685 */
 686h1.stylish
 687{
 688    font-family:      var(--cursive) ;
 689    font-size:        2.7rem ;
 690    text-align:       center ;
 691    color:            #009900 ;  /* Green */
 692
 693    background-color: transparent ;
 694
 695    clear:            both ;  /* This element starts on a new line below any floated elements, either left or right. */
 696}
 697
 698/*  Title for author and date. */
 699h2
 700{
 701    font-family:    var( --serif ) ;
 702    font-size:      1.2rem ;
 703    text-align:     center ;
 704
 705    clear:           both ;  /* This element starts on a new line below any floated elements, either left or right. */
 706}
 707
 708/* Title for email. */
 709h2.email
 710{
 711    font-family:    var( --serif ) ;
 712    font-size:      medium ;
 713    text-align:     center ;
 714
 715    clear:            both ;  /* This element starts on a new line below any floated elements, either left or right. */
 716}
 717
 718/*  Top level section heading. */
 719h3
 720{
 721    font-family:        var( --serif ) ;
 722    font-size:          1.0rem ;
 723    text-align:         left ;
 724    letter-spacing:     0.1rem ; /* Spread letters out a little horizontally. */
 725    color:              white ; /* White text on horizontal gradient colored brown to blue bar. */
 726
 727    background:         linear-gradient(0.25turn, var(--warm-brown) 70%, var(--light-blue-gray)) ;
 728    padding-left:       1rem ; /* Move the text away from the background edge a little. */
 729
 730    margin-top:         1rem ; /* Throw in extra line spacing above and below this heading. */
 731    margin-bottom:      1rem ;
 732
 733    clear:              both ;  /* This element starts on a new line below any floated elements, either left or right. */
 734
 735    /* For debugging, place a dotted red line right outside the border. 
 736    outline-color: red; 
 737    outline-style: dotted; 
 738    */  
 739}
 740
 741/*  Subsection heading. */
 742h4
 743{
 744    font-family:    var( --serif ) ;
 745    font-size:      1.3rem;
 746    text-align:     left ;
 747
 748    border-top:     none ; /* A silver underline extending across the page. */
 749    border-left:    none ;
 750    border-right:   none ;
 751    border-bottom:  solid ;
 752    border-color:   silver ;
 753    border-width:   0.7rem ;
 754
 755    margin-top:     1rem ; /* Throw in extra line spacing above and below this heading. */
 756    margin-bottom:  1rem ;
 757
 758    clear:            both ;  /* This element starts on a new line below any floated elements, either left or right. */
 759}
 760
 761/* Sub-subsection heading. */
 762h5
 763{
 764    /* Smaller dark blue text. */
 765    font-family:    var( --serif ) ;
 766    font-size:      1.0rem ;
 767    text-align:     left ;
 768    color:          var(--dark-blue) ;
 769
 770    border-top:     none ;
 771    border-left:    none ;
 772    border-right:   none ;
 773    border-bottom:  solid ; /* A thin dark blue underline extending across the page. */
 774    border-color:   var(--dark-blue) ;
 775    border-width:   0.2rem ;
 776
 777    margin-top:     1rem ; /* Throw in extra line spacing above and below this heading. */
 778    margin-bottom:  1rem ;
 779
 780    clear:          both ;  /* This element starts on a new line below any floated elements, either left or right. */
 781}
 782
 783/* Sub-sub-subsection heading. */
 784h6
 785{
 786    font-family:    var( --serif ) ;
 787    font-style:     italic ;
 788    font-size:      1.0rem ;
 789    text-align:     left ;
 790    color:          var(--warm-brown) ;
 791
 792    border-top:     none ;
 793    border-left:    none ;
 794    border-right:   none ;
 795    border-bottom-style:  double ;
 796
 797    border-color:   var(--warm-brown) ;
 798    border-width:   0.2rem ;
 799
 800    margin-top:     1rem ; /* Throw in extra line spacing above and below this heading. */
 801    margin-bottom:  1rem ;
 802
 803    clear:          both ;  /* This element starts on a new line below any floated elements, either left or right. */
 804}
 805
 806
 807/* Modify to match the lighter background. */
 808body.technicalReport h3
 809{
 810    background:         linear-gradient(0.25turn, var(--warm-brown) 60%, var(--light-blue-paper)) ;
 811}
 812
 813/*
 814 * --------------------------- Inline text ----------------------------------
 815 *
 816 */
 817
 818/* 
 819 * A quotation format.
 820 */
 821blockquote
 822{
 823    font-family:  var(--cursive) ;
 824    color:        darkblue ;
 825    font-size:    1.9rem;
 826    line-height:  0.9 ;
 827    width:        60% ;
 828    margin-left:  6rem ;
 829    padding:      0.5rem ;
 830    border:       solid ;
 831    border-color: var(--light-gray) ;
 832}
 833
 834/* Instead of the usual URL in the citation, place the person's name. */
 835blockquote cite
 836{
 837    display:    block ;
 838    color:      var(--darkblue ) ;
 839    font-style: italic ;
 840    font-size:  1.4rem;   /* A wee bit smaller than the text. */
 841    text-align: right ;   /* Name goes to the right. */
 842}
 843
 844/* 
 845 * Right before the name, put a hyphen (-).
 846 * ::before is a CSS pseudoelement which is placed as the first child of "cite".  
 847 */
 848blockquote cite::before
 849{
 850    content: "- " ;
 851}
 852
 853/*  Text for source code.  Use a narrow monospace font so columns of code align.
 854 *  We don't need to use <br /> at the end of each line of code:  pre text
 855 *  is displayed as written, not flowed.  The font is the same size as
 856 *  ordinary paragaphs for compatibility.
 857 */
 858pre, code
 859{
 860    display: block ; /* The default for <code> and <pre> is inline, but we want a block like a paragraph. */
 861    font-family:   var(--monospace) ;
 862    white-space:   pre-line ; /* Collapse whitespace.  But break lines at newlines, at <br> and as needed to fill the box. */
 863
 864    margin-left:    3rem ; /* indent slightly more than a paragraph <p> */
 865    margin-top:     1rem ;
 866    margin-bottom:  1rem ;
 867
 868    /* For debugging, place a dotted red line right outside the border. 
 869    outline-color: red; 
 870    outline-style: dotted; 
 871    */  
 872}
 873
 874/* Comments. */
 875pre, code > em
 876{
 877    font-style:  italic ;
 878    color: blue ;
 879}
 880
 881/* Indent code. */
 882pre, code > i
 883{
 884    color: black ;
 885    margin-left: 2rem;
 886}
 887
 888/* Double indent code. */
 889pre, code > i > i
 890{
 891    color: black ;
 892    margin-left: 2rem;
 893}
 894
 895/* Triple indent code. */
 896pre, code > i > i > i
 897{
 898    color: black ;
 899    margin-left: 2rem;
 900}
 901
 902/* Function definitions. */
 903pre, code strong
 904{
 905    font-weight: bold ;
 906    text-transform: none ;
 907}
 908
 909/*  Emphasized text --- bold italic. */
 910em
 911{
 912    font-style:  italic ;
 913    font-weight: bold ;
 914}
 915
 916/* Two lines for strikeout instead of one for fun. */
 917s
 918{
 919    text-decoration-style: double ;
 920}
 921
 922/* Wavy underline.  Put it below the text so the line isn't interrupted by the font on top of it. */
 923em.wavy
 924{
 925    text-decoration-line: underline ;
 926    text-underline-position: under ;
 927    text-decoration-style: wavy ;
 928}
 929
 930/*  Highly emphasized text red on blue-gray. */
 931em.warning
 932{
 933    color:            red ;
 934    background-color: var(--gray-blue) ; /* Gray with blue tint. */
 935}
 936
 937/* 
 938 * But when it's within an h3 heading, just make the text red and don't
 939 * alter the background color.
 940 */
 941h3 em.warning
 942{
 943    color:            red ;
 944    background-color: transparent ;
 945}
 946
 947/*  Highly emphasized text blue on blue-gray. */
 948em.caution
 949{
 950    color:            blue ;
 951    background-color: var(--gray-blue) ; /* Gray with blue tint. */
 952}
 953
 954/* Italic dark blue, but only when in an h3 heading. */
 955h3 em.caution
 956{
 957    color:            blue ;
 958    background-color: transparent ;
 959}
 960
 961/* Used for hotkey commands in Blender. */
 962em.hotkey
 963{
 964    color:             var(--dark-brown) ;
 965    padding:           0.1rem ;
 966    background-color:  lightblue ;
 967}
 968
 969/*  Strong importance --- generally bold text. */
 970strong
 971{
 972    text-transform:   uppercase ;  /* All bold caps. */
 973    font-weight:      bold ;
 974}
 975
 976/*  Fine print */
 977small
 978{
 979    font-size: 0.7rem ;
 980}
 981
 982/* Italic text, but colored blue for more emphasis. */
 983i
 984{
 985    font-style:  italic ;
 986    color:       var(--dark-blue) ;
 987}
 988
 989/* Yellow transparent marker. */
 990mark
 991{
 992    color:       black ;
 993    background:  var(--light-yellow-tint) ;
 994}
 995
 996/*
 997* ----------------------- Paragraphs ---------------------------------------
 998*
 999* For example,
1000*     <p>I am a ordinary paragraph</p>
1001*     <p class = "footnote">I am a footnote</p>
1002*
1003*/
1004
1005/*  Ordinary paragraphs with justified text like a book. */
1006p
1007{
1008    font-family:    var(--sans-serif ) ;
1009    text-align:     justify ;
1010
1011    margin-left:    1rem ;
1012    margin-top:     1rem ;
1013    margin-bottom:  1rem ;
1014
1015    /* For debugging, place a dotted red line right outside the border. 
1016    outline-color: red; 
1017    outline-style: dotted; 
1018    */  
1019}
1020
1021/*  Paragraphs with more vertical spacing. */
1022p.spacedout
1023{
1024    font-size:      medium ;
1025
1026    margin-left:    2rem ;
1027    margin-top:     3rem ;
1028    margin-bottom:  2rem ;
1029}
1030
1031/*  Footnotes.  They are colored unobtrusively with smaller font.  */
1032p.footnote
1033{
1034    font-size:         0.7rem ;
1035    color:             gray ;
1036
1037    background-color:  transparent ;
1038
1039    margin-top:        1rem ;
1040
1041    clear:             both ;  /* This element starts on a new line below any floated elements, either left or right. */
1042}
1043
1044/*  Paragraph with a box around it. */
1045p.box
1046{
1047    display:           inline-block ;
1048
1049    color:             black ;
1050    font-size:         0.8rem ;
1051    font-style:        italic ;
1052
1053    background-color:  transparent ;
1054    padding:           0.5rem ;
1055
1056    border:            solid ;
1057    border-width:      medium ;
1058    border-color:      silver ;
1059}
1060
1061/*  Red change bar.  */
1062p.changed
1063{
1064    padding-left:      0.2rem ; /* Space the border more leftwards. */
1065
1066    border-left:       solid ;
1067    border-right:      none ;
1068    border-top:        none ;
1069    border-bottom:     none ;
1070    border-left-width: thick ;
1071    border-color:      red ;
1072 }
1073
1074/*  Paragraph with very small print.  */
1075p.fineprint
1076{
1077    font-size:         0.8rem ;
1078    font-style:        italic ;
1079
1080    background-color:  transparent ;
1081
1082    margin-left:       4rem ;
1083    margin-right:      4rem ;
1084}
1085
1086/* Used as an example only in my web page design page. */
1087p.example
1088{
1089    font-size:      0.8rem ;    /* Contents is white text. */
1090    font-style:     italic ;
1091    color:          white ;
1092
1093    background-color: var(--art-gallery-blue) ; /* Padding (background) color. */
1094    padding-left:   2rem ;               /* Padding around the contents. */
1095    padding-right:  5rem ;
1096    padding-top:    1.5rem ;
1097    padding-bottom: 1rem ;
1098
1099    border:          dashed ;
1100    border-width:    0.3rem ;
1101    border-color:    var(--light-red) ;
1102
1103    margin-top:      1rem ; /* Margin is transparent.  We show different offsets to illustrate. */
1104    margin-left:     1rem ;
1105    margin-bottom:   3rem ;
1106
1107    outline-color: green;  /* Show the area just outside the margin.  */
1108    outline-style: dotted; 
1109}
1110
1111/*
1112/*
1113 * ------------------------------ Scroll Boxes --------------------------------- 
1114 *
1115 * Example:
1116 *
1117 * <div class="scrollBox"> <div class="scrollBoxContent">
1118 *     text ...
1119 *     text
1120 * </div> * </div>
1121 *
1122 * This was hard to do since the scroll bars overlay the rounded corners, hiding them.
1123 * I used a modified form of the solution suggested here: 
1124 *     https://stackoverflow.com/questions/16676166/apply-border-radius-to-scrollbars-with-css`
1125 *
1126 * We could also do .scrollBox instead of div.scrollBox which would apply to other HTML elements, not just div.
1127 */
1128div.scrollBox, div.scrollBoxTiny, div.scrollBoxSmall, div.scrollBoxMedium, div.scrollBoxLarge, div.scrollBoxHuge
1129{
1130    font-family:        var(--monospace ) ;
1131    font-weight:        bold ;
1132    font-size:          0.8rem ;
1133    /* Preserve newlines, collapse spaces and tabs, but wrap text. 
1134       -Preserve newlines so we don't have to put <br> at the end of every line.
1135       -Collapse spaces and tabs.  Text which is indented in the HTML will show up as left justified in the box.
1136       -Enable wrapping so when the browser window is made smaller, text will flow to fill the box.
1137    */
1138    white-space:        pre-line ;
1139    height:             12rem ;   /* Reduce for a particular box if there isn't enough text to avoid showing blank lines. */
1140    width:              80% ;
1141    color:              black ;
1142
1143    background-color:   var(--cyan-tint) ;
1144
1145    border:             solid ;
1146    border-radius: 1rem ; /* Rounded corners. */
1147    border-width:       0.3rem ;
1148    border-color:       var(--light-blue) ;
1149
1150    margin-top:         1rem ;    /* Vertical separation between adjacent boxes. */
1151    margin-left:        3rem ;    /* Slightly inset from the left. */
1152
1153    overflow:           hidden ;  /* Clip off any crap bleeding over from the content box below (if any). */
1154}
1155
1156div.scrollBoxTiny
1157{
1158    height:             3rem ;
1159}
1160
1161div.scrollBoxSmall
1162{
1163    height:             5rem ;
1164}
1165
1166div.scrollBoxMedium
1167{
1168    height:             7rem ;
1169}
1170
1171div.scrollBoxLarge
1172{
1173    height:            13rem ;
1174}
1175
1176div.scrollBoxHuge
1177{
1178    height:             35rem ;
1179}
1180
1181/* This is the scroll box content which has scroll bars and fits into the scroll box container. */
1182div.scrollBoxContent
1183{
1184    /* I don't know why I see a vertical offset in the container, but negative margin eats it up it and it 
1185     * seems to work OK when scaling the browser window.  */
1186    margin-top:   -1.0rem ;
1187
1188    height:       100% ; /* Fit the contents to the container. */
1189
1190    overflow:     auto ; /* Let the browser decide about showing scroll bars. */
1191}
1192
1193/*
1194 * ------------------------------ Forms ---------------------------------------- 
1195 *
1196 * Here's an example where a form contains several lists.
1197 * Each list contains several fieldsets.
1198 * Each fieldset contains several pairs.  
1199 * And each pair is a legend followed by an input control.
1200 * 
1201 *   <form id="LifePatternsForm">
1202 *      <ul>
1203 *          <li>
1204 *              <!-- Game of Life clipboard controls -->
1205 *              <fieldset>
1206 *                  <legend>Clipboard</legend>
1207 *                  <input type="button" onclick="gameOfLife.writeGameToClipboard()"  value="Write" />
1208 *                  <input type="file"   id="GameOfLifeLoadFile"  name="files[]" multiple />
1209 *              </fieldset>
1210 *           </li>
1211 *      </ul>
1212 *  </form>
1213 */
1214
1215/* Clear properties for all forms.  We'll set them below. */
1216form
1217{
1218    padding:     0 ;
1219    border:      0 ;
1220    margin:      0 ;
1221
1222    overflow:     auto ; /* Let the browser decide about showing scroll bars. */
1223}
1224
1225form img
1226{
1227    vertical-align: middle ;
1228}
1229
1230form ul
1231{
1232    list-style-type:   none ; /* Remove bullets. */
1233    list-style-image:  none ;
1234    padding:           0 ;
1235    margin:            0 ;
1236}
1237
1238/* Within a form, the fieldset is the container for the buttons, fields, controls, etc. */
1239form fieldset
1240{
1241    font-family:       var(--sans-serif) ;
1242    font-size:         smaller ;
1243    color:             navy ;
1244
1245    padding:           0.1rem ;  /* A little padding to make close together controls more readable. */
1246    border:            0 ;
1247    margin:            0 ;
1248
1249    background-color:  lightskyblue ;
1250}
1251
1252/*  Style for input controls of the button or file type within a fieldset container. */
1253fieldset input[ type = 'button' ], fieldset input[ type = 'file' ]
1254{
1255    font-style:        italic ;
1256    cursor:            pointer ; /* Hand when hovering over the button. */
1257    padding:           0.3rem ;
1258}
1259
1260/* Within each fieldset, float legends to the left and justify their text to the right.  
1261 * The controls following each legend will then line up evenly along a column.
1262 */
1263fieldset legend
1264{
1265    text-align:    right ;
1266    width:         12rem ;
1267
1268    margin-right:  1.5rem ;
1269
1270    float:         left ;
1271}
1272
1273/* Style text within all fieldsets. */
1274fieldset textarea
1275{
1276    font-family:       var(--monospace ) ;
1277    color:             navy ;
1278    cursor:            auto ;   /* Vertical bar cursor when hovering over text. */
1279
1280    background-color:  var(--very-light-blue) ;
1281
1282    resize:            none ;   /* Don't allow user to resize, only scroll. */
1283    width:             100% ;
1284}
1285
1286/*
1287 * --------------------- Images ---------------------------------------------
1288 */
1289
1290/* Images by themselves are centered in the containing block and have a decorative frame.
1291 *
1292 * <img class="centered" src="Images/BlenderScreenshot.png" alt="" />
1293 */
1294
1295/* Fake inheritance in CSS by declaring common properties for all three image classes first.
1296 * then overriding properties for each individual class.
1297 */
1298img.centered, img.centeredsmaller, img.centeredsmallest
1299{
1300    display:           block ;                       /* Default HTML ordering. */
1301
1302    padding:           0.5rem 0.5rem 0.5rem 0.5rem ; /* Thin region of background color surrounding the image. */
1303    background-color:  var(--dark-blue-gray) ;
1304
1305    border:            solid;                        /* Frame surrounding the background. */
1306    border-width:      0.3rem;                       /* Thin frame. */
1307    border-color:      var(--kweilin-black) ;
1308    border-radius:     1rem ;                        /* Curved edges for image frame. */
1309
1310    margin-left:       auto ;                        /* Margin surrounding the border.  Center the image horizontally. */
1311    margin-right:      auto ;
1312    margin-top:        2rem ;                        /* Small fixed margin gives added space above and below. */
1313    margin-bottom:     2rem ;
1314
1315    max-width:         100% ;                        /* Image won't be larger than its containing block. */
1316}
1317
1318img.centeredsmaller
1319{
1320    max-width:         60% ; /* Shrink the image smaller than its containing block. */
1321}
1322
1323img.centeredsmallest
1324{
1325    max-width:         25% ;
1326}
1327
1328/* Make an SVG image look like a drawing on top of the paper. */
1329img.transparent
1330{
1331    background: transparent ;
1332    max-width:         100% ;                       /* Image won't be larger than its containing block.*/
1333}
1334
1335/*
1336 * Images in a technical report (all descendents of body) have a lighter frame color to match the lighter body.
1337 */
1338body.technicalReport img.centered img.centeredsmaller img.centeredsmallest
1339{
1340    background-color:  var(--lighter-blue-background) ;
1341}
1342
1343/* Inline images which are children of paragraphs (e.g. equations),
1344 * and any images which are descendants of table rows and lists.
1345 */
1346p > img, li img, td img
1347{
1348     /* Make the image a little larger than the font height.  That stops the image from shrinking and
1349      * being aliased as the browser crudely resamples the natural image height.
1350      */
1351    min-height:     1.3rem ;
1352    vertical-align: middle ; /* Align these images to the middle of the text line vertically. */
1353
1354    margin-bottom:  0.5rem ;  /* Leave a little room at the bottom so images won't run together if they are adjacent list items. */
1355}
1356
1357/* Image within a hotkey combination which has a box around the text. */
1358em.hotkey > img
1359{
1360    vertical-align:    middle ; /* Align these images to the middle of the text line vertically. */
1361
1362    background-color:  transparent ;
1363
1364    border:            solid ;
1365    border-width:      medium ;
1366    border-color:      silver ;
1367
1368    margin-bottom:     0.5rem ;  /* Leave a little room at the bottom so images won't run together if they are adjacent list items. */
1369}
1370
1371/*
1372 *  Left page border in an aside element using an image.
1373 *
1374 *  <p>
1375 *  <img class="border" 
1376 *       src="../Images/otherInterestsBorderImage.jpg" 
1377 *       alt="Art Gallery Image Border." />
1378 *  </p>
1379 */
1380img.border
1381{
1382    /* Normal CSS flow in a page. */
1383    display:           block ;
1384
1385    /* Blueish color until we load the image. */
1386    background-color:  var(--light-blue-body-background) ;
1387
1388    /* Image fills the entire area vertically. Make it thin since it's just for decoration. */
1389    top:               0 ;
1390    left:              0 ;
1391    width:             1.2rem ;
1392    height:            100% ;
1393
1394    /*  Give us a thin vertical dividing line on the right of the image for contrast. */
1395    border-right-style: solid ; 
1396    border-right-width: 0.1rem ;
1397    border-right-color: blue ;
1398}
1399
1400/*
1401 * ----------------------- Canvas--------------------------------------------
1402 */
1403
1404/* Put a blue dotted line around the canvas.*/
1405canvas
1406{
1407    border-width:   0.2rem ;
1408    border-style:   dotted ;
1409    border-color:   blue ;
1410
1411    /* Image won't be larger than its containing block.
1412     * The <canvas> element will usually be inside the <body> element, making <body> its containing block.
1413     * And <body> is the viewport on mobile devices or browser window on desktops.  
1414     */
1415    max-width:      100% ;
1416}
1417
1418/*
1419 * ---------------------- Horizontal rule -----------------------------------
1420 */
1421/* Horizontal rule. */
1422hr
1423{
1424    height:            0.3rem ;
1425
1426    background-image:  url( "Images/blueBar.png" ) ;
1427    background-color:  var(--dark-blue) ;
1428    border:            none ;
1429
1430    margin-left:       1rem ;
1431    margin-right:      1rem ;
1432
1433    clear:            both ;  /* This element starts on a new line below any floated elements, either left or right. */
1434}
1435
1436/*
1437* --------------------- Figures --------------------------------------------
1438*
1439* Figure floats to the left, letting text wrap around to the right.
1440* It contains one or more images which flow downwards followed by a figure caption.
1441*
1442*  <figure>
1443*     <img src="topImage.jpg" >
1444*     <img src="botImage.jpg" >
1445*
1446*     <figcaption>
1447*        These are two figure images.
1448*     </figcaption>
1449*  </figure>
1450*
1451* <p>
1452* The figure will float to the left and this text will flow around to the right.
1453* </p>
1454*
1455*  To float the figure to the right, use 
1456*      <figure style="float: right">
1457*/
1458figure
1459{
1460    /* Figure is a flex container.  Items flow in 1D downwards. */
1461    display:           flex ;
1462    flex-flow:         column ;
1463    justify-content:   flex-start ;                  /* Justify the first item at the left of this container. */
1464
1465    text-align:        center ;
1466
1467    background-color:  var(--dark-blue-gray ) ;
1468    padding:           1rem 1rem 1rem 1rem ;         /* Padding is colored same as the background color. */
1469    border:            0.2rem silver solid ;         /* Border. */
1470    border-radius:     1rem ;                        /* Rounded corners. */
1471    margin:            1.5rem 1.5rem 1.5rem 1.5rem ; /* Space it away from the other elements in the page. */
1472    float:             left ;                        /* Float the figure to the left and have text flow around it to the right. */
1473
1474    max-width: 35% ;   /* Text flows around the figure. */
1475}
1476
1477/* Figure background in a technical report has a lighter color to match the lighter body. */
1478body.technicalReport figure
1479{
1480    background-color: var(--lighter-blue-background) ;
1481}
1482
1483figcaption
1484{
1485    font-style:   italic ;
1486    font-size:    smaller ;
1487    text-indent:  0 ;
1488}
1489
1490/* Apply only to an image inside the figure.
1491 * Since we use a descendent selector so this also works for an image inside an href inside the figure. 
1492 */
1493figure img
1494{
1495    max-width:       100% ;    /* Image isn't larger than its containing block. */
1496
1497    padding-left:    0.5rem ;  /* In case we have multiple images, leave some space between. */
1498    padding-right:   0.5rem ;
1499    padding-top:     0.5rem ;
1500    padding-bottom:  0.5rem ;
1501}
1502
1503/* Apply only to a hyperlink directly inside class figure. */
1504figure > a
1505{
1506    padding-left:   0.5rem ;  /* In case we have multiple hyperlinks, leave some space between. */
1507    padding-right:  0.5rem ;
1508}
1509
1510/*
1511 * --------------------- Illustrated Paragraph ----------------------------------------------
1512 *
1513 * Paragraph which starts with an image, and contains text.
1514 *
1515 * <div class="illustratedparagraph">
1516 *     <p>
1517 *         <img src=... >
1518 *     <p>
1519 * </div>
1520 *
1521 * <p>
1522 * The text in this second paragraph will flow to the right.
1523 * </p>
1524 *
1525 */
1526div.illustratedparagraph
1527{
1528    float: left ;           /* Float this paragraph to the left and have text and other elements flow around to the right. */
1529    margin-left:   0 ;      /* Hard against left edge of page. */
1530    margin-bottom: 1rem ;   /* Leave space at the bottom. */
1531
1532    clear: both ;  /* This element starts on a new line below any floated elements, either left or right. */
1533
1534    /* For debugging, place a dotted red line right outside the border. 
1535    outline-color: purple ; 
1536    outline-style: dotted ;
1537    */
1538}
1539
1540/* Only within an illustrated paragraph, inside the first hyperlink, 
1541 * capitalize the text.
1542 */
1543div.illustratedparagraph a:first-child
1544{
1545    text-transform:  uppercase ;  /* All bold caps. */
1546}
1547
1548/*  Icon image.  */
1549div.illustratedparagraph img
1550{
1551    float:   left ;   /* Inside this illustrated paragraphs, the image floats to the left, and text flows around to the right. */
1552
1553    border:  none ;   /* Turn off the hyperlink border on the image. */
1554
1555    margin-right:   0.6rem ; /* Leave space between image and text. */
1556    margin-bottom:  0.3rem ;
1557    max-width:  30% ;        /* Shrink the image no larger than a fraction of its containing block. */
1558
1559    /* Let text flow around the image in a circle instead of a square box. 
1560    shape-outside: circle(50%); 
1561    */
1562
1563    /* For debugging, place a dotted red line right outside the border. 
1564    outline-color: blue ; 
1565    outline-style: dashed ;
1566    */
1567}
1568
1569/*  This is special text for use to the right of the image.  */
1570div.illustratedparagraph p
1571{
1572   text-align:       justify ;
1573
1574   background-color: transparent ;
1575}
1576
1577/*
1578 * ----------------------- Lists --------------------------------------------
1579 */
1580
1581/*  Unordered list with a slightly smaller font,
1582*  small Images for bullets.
1583*/
1584ul
1585{
1586    font-family:       var(--sans-serif ) ;
1587    /* Inherit the font size from body. */
1588
1589    padding-left:      0.5rem ;
1590    margin-left:       2rem ;
1591
1592    margin-top:        1.5rem ;
1593    margin-bottom:     1.5rem ;
1594
1595    list-style-type:   none ;       /* Remove list bullets -- we will use images instead. */
1596    list-style-image:  url( "Images/smallBlueBullet.png" ) ;
1597
1598    clear:            both ;  /* This element starts on a new line below any floated elements, either left or right. */
1599
1600    /* For debugging, place a dotted red line right outside the border. 
1601    outline-color: red; 
1602    outline-style: dotted; 
1603    */
1604}
1605
1606/*  Ordered list with a slightly smaller font.  */
1607ol
1608{
1609    font-family:       var(--sans-serif ) ;
1610    /* Inherit the font size from body. */
1611
1612    padding-left:      0.5rem ;
1613
1614    margin-left:       3rem ;
1615
1616    clear:            both ;  /* This element starts on a new line below any floated elements, either left or right. */
1617}
1618
1619/*  Unordered list with small black disks. */
1620ul.bullet
1621{
1622    font-size:           0.9rem ;
1623
1624    padding-left:        0.5rem ;
1625
1626    margin-left:         4rem ;
1627
1628    list-style-image:    none ;      /* Remove list bullets. */
1629    list-style-type:     disc ;
1630}
1631
1632/*  Unordered list with small black rectangles and text wrap around. */
1633ul.minorBullet
1634{
1635   font-size:           0.9rem ;
1636   list-style-image:    none ;      /* Remove list bullets. */
1637   list-style-type:     square ;
1638   list-style-position: inside ;
1639}
1640
1641/*
1642 * ----------------------- Tables -------------------------------------------
1643 */
1644
1645/*  Default tables have a solid black border and are as wide as the page.
1646    Collapse internal borders.
1647 */
1648table
1649{
1650    border-collapse:    collapse ;
1651    border-style:       solid ;
1652    border-color:       var(--art-gallery-blue) ;
1653    border-width:       thin ;
1654
1655    width:              100% ;
1656}
1657
1658/* Both table rows and columns have thin borders. */
1659td, th
1660{
1661    border-style:       solid ;
1662    border-color:       var(--art-gallery-blue) ;
1663    border-width:       thin ;
1664}
1665
1666/* But table header rows are also lightly colored to make them stand out.  */
1667th
1668{
1669    font-weight: bold ;
1670    background: var(--light-blue-tint) ;
1671}
1672
1673/* Table caption appears above the table. */
1674caption
1675{
1676    font-weight:    bold ;
1677    font-size:      larger ;
1678}
1679
1680/*
1681 * ----------------------- Software Viewing and Downloading --------------------------------------
1682 *
1683 *  Use a grid instead of a table.
1684 *  We'll override the <ul> and <li> elements so it looks like an unordered list in the HTML.
1685 *  
1686 */
1687
1688ul.download
1689{
1690    display: grid ;
1691
1692    /* Use fractions of the free space (not including fixed size cols (there aren't any here). */
1693    grid-template-columns: 2fr 5fr 1fr 1fr ;   
1694    column-gap: 0.1rem ;
1695    row-gap: 0.1rem ;
1696
1697    /* Turn off the default image bullets. */
1698    list-style-type: none ;
1699    list-style-image: none ;
1700
1701
1702    /* Text a little smaller to fit better on narrow mobile screens. */
1703    font-size: smaller ;
1704}
1705
1706/*  
1707 * Where each row is placed in the grid columns.  
1708 * outline collapses the lines around each grid cell so they don't get duplicated.
1709 */
1710li.downloadName
1711{
1712    grid-column-start: 1 ;
1713    outline: thin solid var(--art-gallery-blue) ;
1714}
1715
1716li.downloadDescription
1717{
1718    grid-column-start: 2 ;
1719    outline: thin solid var(--art-gallery-blue) ;
1720}
1721
1722li.downloadView
1723{
1724    grid-column-start: 3 ;
1725    outline: thin solid var(--art-gallery-blue) ;
1726}
1727
1728li.download
1729{
1730    grid-column-start: 4 ;
1731    outline: thin solid var(--art-gallery-blue) ;
1732}
1733
1734li.downloadFooter
1735{
1736    grid-column:  1  / 5 ;
1737    outline: thin solid var(--art-gallery-blue) ;
1738}
1739
1740
1741/*
1742 * ----------------------- Tooltips -----------------------------------------
1743 *
1744 *     Show tooltip contents (text only) when hovering a mouse or pen controlled cursor over the tooltip element.
1745 *     Mobile devices don't support hover, even with long press gestures.
1746 *
1747 *     Sample HTML:
1748 *         <span data-text="I am the tooltip contents." class="I'm a tooltip:  hover over me to see tooltip contents!">Tooltip text</span>
1749 */
1750@media (any-hover: hover)
1751{
1752    /*  Make the style visible as a tooltip. */
1753    span.tooltip
1754    {
1755        /* Since we don't specify any top/bottom/left/right property/values which would shift this element 
1756           relative TO ITSELF, this is the same as the default static positioning, i.e. normal document flow.
1757           Why do we need this?  Because the child class span.tooltip:before uses absolute positioning; 
1758           it needs this parent class to have either relative or absolute positioning for that to work. */
1759        position:      relative ;
1760
1761        /* Indicate the tooltip be a dashed line below its text. */
1762        border-bottom: 0.2rem dashed var(--art-gallery-blue-gray);
1763    }
1764
1765    /* Tooltip content.
1766     * This child class (:before) of the parent class (span.tooltip) is a pseudoclass which inserts content 
1767     * before the first item in the tooltip.span class, i.e. at the start of the tooltip text.  It doesn't
1768     * actually change the DOM.  Actually it won't be inserted at all: we will take the position of this 
1769     * tooltip content out of the normal document flow anyway by using absolute positioning.
1770     * And that's because we want it hover over the tooltip.
1771     */
1772    span.tooltip:before
1773    {  
1774        /* Pull the tooltip text from the parent HTML span data-text value. */
1775        content:    attr( data-text ) ;
1776
1777        text-align: center ;
1778        color:      white ;
1779        background: darkblue ;
1780     
1781        /* Wide enough for a reasonable chunk of text when hovering. */
1782        width:      10rem ;
1783
1784        /* Take us out of the normal document flow.  The position is relative to the initial containing block,
1785         * which is the edge of the padding box of the nearest ancestor element which has a relative position,
1786         * in our case, span.tooltip.  So long story short, the tooltip contents will hover in a box whose upper
1787         * left corner is the upper left corner padding of the tooltip text.  But then we 
1788         * position using top and transform.
1789         */
1790        position: absolute ;
1791
1792        left: 50% ;                     /* Place left edge of box 1/2 to the right in the tooltip. */
1793        transform: translateX( -50% ) ; /* Then shift it 1/2 way up to center horizontally. */
1794        top: -1rem ;  /* Center vertically. */
1795
1796        padding:       1rem ;
1797        border-radius: 1.5rem ;
1798
1799        /* Tooltip contents is stacked on top of all other display elements. */
1800        z-index: 99 ;
1801
1802        /* Won't show up until we hover. */
1803        opacity: 0 ;
1804
1805        /* Fade in when we set opacity = 1 during hover. */
1806        transition:       0.3s  opacity ;
1807        transition-delay: 100ms ;
1808    }
1809
1810    /* Mouse cursor is hovering either over the box of the parent element span.tooltip 
1811     * OR the box of the child class span.tooltip:before.   In either case, make it opaque. 
1812     */
1813    span.tooltip:hover:before
1814    {
1815        opacity: 1 ;
1816    }
1817}
1818
1819/*
1820 * ----------------------- Art Gallery --------------------------------------
1821 */
1822
1823/* Art gallery:  container for paintings which looks like a wall where we hang the art. */
1824div.gallery
1825{  
1826    /* Items within this container are of flexbox type.  They flow in 1D horizontally. */
1827    display: flex ;
1828
1829    /* Put the first painting at the beginning. */
1830    justify-content: flex-start ;
1831
1832    /* Paintings wrap around to the next row. */
1833    flex-flow:       row wrap ;
1834
1835    overflow: auto ; /* Let the browser decide about showing scroll bars.  On a mobile device paintings may be too wide for the gallery background. */
1836
1837    /* Art gallery wall is bluish gray. */
1838    background-color:       var(--art-gallery-blue-gray) ; 
1839    background-position:    top left ;
1840    background-attachment:  fixed ;
1841    background-repeat:      repeat ;
1842
1843    /* Deep blue frame for the art gallery. */
1844    border-color:           var(--art-gallery-blue ) ;
1845}
1846
1847/* Mobile devices don't have hover and usually don't honor fixed background 
1848   due to increased computation.  So just let background scroll with the content. */
1849@media (hover: none)
1850{
1851    div.gallery
1852    {
1853        background-attachment: initial ;
1854    }
1855}
1856
1857/* A painting contains a canvas and title. */
1858div.painting
1859{
1860    text-align: center ;
1861
1862    background-color:       transparent ;
1863
1864    /* Items within this container are of flexbox type.  They flow in 1D vertically. */
1865    display: flex ;
1866    flex-direction: column ;
1867}
1868
1869/* Title of a canvas. */
1870div.painting p
1871{
1872    color:       silver ;
1873    font-style:  italic ;
1874    font-size:   smaller ;
1875    text-align:  center ;
1876}
1877
1878/* A canvas is an image with a black frame.  */
1879div.painting img
1880{
1881    /* Silvery gray background behind the canvas of the painting.  When we pad, this will show between canvas and picture frame. 
1882     * Also if the canvas is round, i.e. image is rectangular, but alpha = 0 outside the circular canvas, this will show.
1883     */
1884    background-color: var(--canvas-gray ) ;
1885
1886    /* Fit the width of the screen on an iPhone 12 Pro */
1887    max-width: 18rem ;
1888
1889    /* Between the painting canvas and the frame. */
1890    padding:          0.2rem 0.2rem 0.2rem 0.2rem ;
1891
1892    /* The picture frame is black and rather thick. */
1893    border-style:     solid ;
1894    border-color:     black ;
1895    border-width:     0.8rem ;
1896
1897    /* A little bit of margin so that the picture frames don't run into each other. */
1898    margin: 0.3rem 0.3rem 0.3rem 0.3rem ;
1899
1900    /* For debugging, place a dotted red line right outside the border. 
1901    outline-color: red; 
1902    outline-style: dotted; 
1903    */
1904}
1905
1906/* Use an ID selector to apply to one painting only.  Turn off the padding because 
1907 * the image has its own elliptical black frame already.
1908 */
1909div.painting img#GirlFromKweilin
1910{
1911    background-color:       var(--kweilin-black ) ;
1912    padding:                0 0 0 0 ;
1913}
1914
1915/*
1916 * ------------------------------ Smartphone Portrait Mode -----------------
1917 *
1918 * Save space by removing the border image and the navigation sidebar.
1919 *
1920 */
1921@media screen and (orientation: portrait) and (width < 500px)
1922{
1923    /* Change the wrapper to have only 1 columns since we omit the left navigation bar and the border image. */
1924    div.wrapper
1925    {
1926        grid-template-columns:  1fr ;
1927    }
1928
1929    aside.border
1930    {
1931        display: none ;
1932    }
1933
1934    nav
1935    {
1936        display: none ;
1937    }
1938}
1939
1940/*
1941 * ------------------------------ Printing ----------------------------------
1942 */
1943
1944/* For printing, omit the navigation and borders.
1945 * To test, do print preview from a web browser to see the pdf file.
1946 * Or to test on a browser in display mode, temporarily replace "print" with "screen".
1947 */
1948@media print
1949{
1950    /* Turn off the grid. */
1951    div.wrapper
1952    {
1953        display: block ;
1954    }
1955
1956    /* Turn off the navigation sidebars. */
1957    nav, header.navigation
1958    {
1959        display: none ;
1960    }
1961
1962    /* Turn off decorative border Images. */
1963    aside.border
1964    {
1965        display: none ;
1966    }
1967
1968    /*  Leave less margin on the left of the page since border image is gone. 
1969     *  Remove all background images (printers don't print white).
1970     */
1971    body
1972    {
1973        background:    white ;
1974
1975        margin-left:   3rem ;
1976        margin-right:  2rem ;
1977    }
1978
1979    /* Turn off scrolling in scroll boxes and show the whole content. */
1980    div.scrollBox, div.scrollBoxContent
1981    {
1982        background:    white ;    /* Remove background color (printers don't print white). */
1983        overflow:      visible ;  /* No scrollbars;  just show the whole content, even if it goes outside the container. */
1984        white-space:   pre-wrap ; /* Preserve whitespace.  Wrap when necessary and on newlines. */
1985
1986        width:         auto ;     /* Expand the box size to whatever necessary. */
1987        height:        auto ;     /* Expand the box size to whatever necessary. */
1988    }
1989
1990    figure
1991    {
1992        background:    white ;    /* Remove background color (printers don't print white). */
1993    }
1994
1995    div.gallery
1996    {
1997        background:    white ;    /* Remove background color (printers don't print white). */
1998    }
1999}