/*===========================================================================
|
| NAME
|
|     StyleSheet.css
|
| DESCRIPTION
|
|     External cascading style sheet for my web pages.
|
|     It is a W3C validated CSS Level 2 document.
|
| USAGE
|
|    To link to it in a hypertext document, put the following statement,
|
|        <link rel="StyleSheet" href="StyleSheet.css"
|                               type="text/css" />
|
|    within the <head>...</head> section of an HTML document.
|
| LEGAL
|
|   Copyright (C) 1999-2018 by Sean Erik O'Connor.  All Rights Reserved.
|   last updated 03 Feb 18
|
===========================================================================*/

/*
 * Neutralize all browser defaults --- we will add back our own explicit 
 * margins and padding. 
 *
 * ++=============================================++
 * ||                                             ||
 * ||  margin                                     ||
 * ||                                             ||
 * ||   +---------------border----------------+   ||
 * ||   |                                     |   ||
 * ||   |  padding                            |   ||
 * ||   |                                     |   ||
 * ||   |     +-----------------------+       |   ||
 * ||   |     |    C O N T E N T      |       |   ||
 * ||   |     +-----------------------+       |   ||
 * ||   |                                     |   ||
 * ||   |                           padding   |   ||
 * ||   |                                     |   ||
 * ||   +---------------border----------------+   ||
 * ||                                             ||
 * ||                                 margin      ||
 * ||                                             ||
 * ++=============================================++
 *
 */

/* Rule to select every element.  Clean up margins and padding. */
* {
    margin  : 0 ;
    padding : 0 ;
  }


/*
 * ------------------------------ Hyperlinks --------------------------------
 *
 * Use the pseudo-classes visited, link, etc. after the selector
 *
 * Must be in this order due to CSS cascade rules.
 *
 * Note that you must have your browser history turned on and set to
 * more than 0 days to see a visited link change color.
 */

/* Visited links have purple text. */
a:visited
{
   color:               rgb( 153,   0, 153 ) ;
   background-color:    transparent ;
}

/* Unvisited links are dark blue. */
a:link
{
   color:               rgb(   0,   0, 153 ) ;
   background-color:    transparent ;
}

/* When the mouse cursor hovers over a hyperlink, change color to cyan. */
a:hover
{
   color:               rgb(   0,  96, 255 ) ;
   background-color:    transparent ;
}

/* When the mouse cursor hovers over a hyperlink containing an image, fade the image. */
a:hover img
{
    opacity: 0.7 ;
}

/* Clicked hyperlink is light red. */
a:active
{
   color:               rgb( 255,   0, 102 ) ;
   background-color:    transparent ;
}



/*
 * ----------------------- Normal web pages ---------------------------------
 *
 */

body
{
    /* Wide sans-serif font is supposed to be more readable on the web. */
    font-family:            Verdana, Geneva, "Trebuchet MS", sans-serif ;

    /* This sets the body's font size a little smaller than the user's 
     * default browser setting. */
    font-size:              0.8em ;
    color:                  black ; /* Text color. */

    /* Space out the lines vertically to give a more pleasant reading
     * experience.  Use a unitless font height multiplier.  Length and 
     * percentage percentage values can give scrunched text due to
     * poor inheritance behavior. */
    line-height:            1.7 ;

    /* Give us enough left margin so we can insert a decorative border. */
    margin-left:             4em ;
    margin-right:            2em ;

    /*  While waiting for the browser to load the background image of simulated
     *  blue paper, color the background solid light blue to match. */
    background-color:       rgb( 170, 235, 245 ) ;
    background-image:       url( "WebPageImages/blueBackground.jpg" ) ;
    background-repeat:      repeat ;

    /*  Background image stays fixed while the foreground text  scrolls. */
    background-attachment:  fixed ;
}



/*
 * ------------------ Technical report pages --------------------------------
 *
 * Override specific properties inherited from the body style.
 */
body.technicalReport
{
    color:                  black ; /* Text color. */

    /*  Color the background very light blue simulated paper for
     *  increased readability without losing style. */
    background-color:       rgb( 239, 247, 247 ) ;                  /* Faint blue */
    background-image:       url( "WebPageImages/bluePaper.jpg" ) ;
    background-repeat:      repeat ;

    /*  Leave room for a navigation sidebar. */
    margin-left:           11em ;
    margin-right:           2em ;
}


/*
 * ----------------------- Headings  ----------------------------------------
 */

/*
 *  My name on the title page using a background image.
 */
h1.name
{
    background-color:    transparent ;   /* Let the body background show through. */
    background-image:    url( "WebPageImages/SeanErikOConnor.png" )  ; /* PNG image with transparent background. */
    background-repeat:   no-repeat ;
    background-size:     contain ;       /* Make the image fit the box when we resize the page. */
    background-position: center center ; /* Center the image in the box. */

    min-height:          2.3em ;         /* Have a minimum font height, otherwise, leave scalable with viewport. */
    margin-left:         -1.5em ;        /* Align left edge of text against left edge of blue separator line. */

    clear: both ;                        /* Keep any floating elements away from both left and right sides. */
}

/*
 * Put my name into the title, but don't display it.
 * This way text-only browsers can see it.
 */
h1.name > span
{
    display:                none ;
}

/*  Ordinary page title.
 *  We're using serif fonts for headings.
 */
h1
{
    font-family:    Garamond, "Times New Roman", serif ;
    font-size:      2em ;
    text-align:     center ;

    clear: both ;   /* Keep any floating elements away from both left and right sides. */
}

/*  Elegant green script page title.  */
h1.stylish
{
   font-family:      "Brush Script MT", "Comic Sans MS", "Times New Roman", cursive ;
   font-size:        3em ;
   text-align:       center ;
   color:            #009900 ;  /* Green */

   background-color: transparent ;

    clear: both ;    /* Keep any floating elements away from both left and right sides. */
}

/*  Title for author and date. */
h2
{
    font-family:    Garamond, "Times New Roman", serif ;
    font-size:      2em ;
    text-align:     center ;

    clear: both ;   /* Keep any floating elements away from both left and right sides. */
}

/* Title for email. */
h2.email
{
    font-family:    Garamond, "Times New Roman", serif ;
    font-size:      medium ;
    text-align:     center ;

    clear: both ;   /* Keep any floating elements away from both left and right sides. */
}

/*  Top level section heading. */
h3
{
    font-family:        Garamond, "Times New Roman", serif ;
    font-size:          1.5em ;
    text-align:         left ;
    letter-spacing:     0.1em ; /* Spread letters out a little horizontally. */

    /* White text on gradient colored bar. */
    color:              white ;
    background-image:   url( "WebPageImages/horizontalBar.jpg" ) ;

    background-color:   yellow ;  /* Default if image doesn't load. */

    /* Throw in extra line spacing above and below this heading. */
    margin-top:          1em ;
    margin-bottom:       1em ;

    clear:              both ;    /* Keep any floating elements away from both left and right sides. */
}

/*  Subsection heading. */
h4
{
    font-family:    Garamond, "Times New Roman", serif ;
    font-size:      1.5em;
    text-align:     left ;

    /* A silver underline extending across the page. */
    border-top:     none ;
    border-left:    none ;
    border-right:   none ;
    border-bottom:  solid ;
    border-color:   silver ;
    border-width:   0.3em ;

    /* Throw in extra line spacing above and below this heading. */
    margin-top:     1em ;
    margin-bottom:  1em ;

    clear: both ;   /* Keep any floating elements away from both left and right sides. */
}

/* Sub-subsection heading. */
h5
{
    /* Smaller dark blue text. */
    font-family:    Garamond, "Times New Roman", serif ;
    font-size:      1.2em ;
    text-align:     left ;
    color:          rgb( 0, 30, 240) ;

    /* A thin dark blue underline extending across the page. */
    border-top:     none ;
    border-left:    none ;
    border-right:   none ;
    border-bottom:  solid ;
    border-color:   rgb( 0,  30, 240) ;
    border-width:   0.07em ;

    /* Throw in extra line spacing above and below this heading. */
    margin-top:      1em ;
    margin-bottom:   1em ;

    clear: both ;    /* Keep any floating elements away from both left and right sides. */
}



/*
 * --------------------------- Inline text ----------------------------------
 *
 *  Text for source code.  Use a narrow monospace font so columns of code align.
 *  We don't need to use <br /> at the end of each line of code:  pre text
 *  is displayed as written, not flowed.  The font is the same size as
 *  ordinary paragaphs for compatibility.
 */
pre, tt, code
{
    font-family:    "Courier New", "Andale Mono", "Menlo", monospace ;
    font-weight:    bold ;
    font-size:      larger ;

    margin-left:    2em ;
    margin-top:     1em ;
    margin-bottom:  1em ;
}

/*  Emphasized text --- italic by default. */
em
{
    font-style:  italic ;
    font-weight: bold ;
}

/*  Highly emphasized text --- red letters on gold. */
em.highlighted
{
    color:            red ;
    background-color: rgb( 255, 214, 0) ; /* gold */
}

/* 
 * But when it's within an h3 heading, just make the text red and don't
 * alter the background color.
 */
h3 em.highlighted
{
    color:            red ;
    font-style:       italic ;
    background-color: transparent ;
}

/* Dark blue on gold. */
em.lowlighted
{
    color:            blue ;
    background-color: rgb( 255, 214, 0) ; /* gold */
}

/* Italic dark blue, but only when in an h3 heading. */
h3 em.lowlighted
{
    color:            blue ;
    font-style:       italic ;
    background-color: transparent ;
}

/*  Mild emphasis */
em.mild
{
    color:            rgb(  70, 120, 150 ) ;
    background-color: transparent ;
}

/* Dark blue text. */
em.alternate
{
    color:     rgb( 100, 100, 250 ) ;
}

/*  Strong emphasis. */
strong
{
    text-transform:   uppercase ;  /* All bold caps. */
    font-weight:      bold ;
}



/*
* ----------------------- Paragraphs ---------------------------------------
*/
/*  Ordinary paragraphs. */
p
{
    font-family:    Verdana, Geneva, "Trebuchet MS", sans-serif ;
    text-align:     justify ;

    margin-left:    1em ;
    margin-top:     1em ;
    margin-bottom:  1em ;
}

/* For a line of pseudocode. 
 *
 * Example:
 *
 * <p class="pseudocode">
 *     <i>this = line( code ) + 1 ;</i> <em>This is a comment for line 1</em>
 * </p>
 * <p class="pseudocode">
 *     <i>this = line( code ) + 2 ;</i> <em>This is a comment for line 2</em>
 * </p>
 *
 * */
p.pseudocode
{
    line-height: 0.1em ;
    font-style:  italic ;
    font-weight: bold ;
}

/* Indented code.  We can nest these to get more indentation as needed. */
p.pseudocode i
{
    margin-left: 3em ;
}

/* Comments at the end of code lines. */
p.pseudocode em
{
    color: gray ;
    font-size: 0.9em ;
    margin-left: 2em ;
}

/*  Paragraphs with more vertical spacing. */
p.spacedout
{
    font-size:      medium ;

    min-width: 35em ; /* Keep the length of the line shorter for readability. */
    max-width: 45em ;

    margin-left:    2em ;
    margin-top:     3em ;
    margin-bottom:  2em ;
}

/*  Footnotes.  They are colored unobtrusively.  */
p.footnote
{
    font-size:         0.8em ; /* Fraction of the size of the parent font of the paragraph (usually the body) */

    color:             gray ;
    background-color:  transparent ;

    margin-top:        2em ;

    clear: both ;      /* Keep any floating elements away from both left and right sides. */
}

/*  Paragraph with a box around it. */
p.box
{
    display:           inline-block ;

    font-size:         0.8em ;
    font-weight:       bold ;
    color:             black ;

    padding:           1em ;

    border:            solid ;
    border-width:      medium ;
    border-color:      silver ;

    background-color:  transparent ;
}

/*  Red change bar.  */
p.changed
{
    padding-left:      0.2em ; /* Space the border more leftwards. */

    border-left:       solid ;
    border-right:      none ;
    border-top:        none ;
    border-bottom:     none ;
    border-left-width: thin ;
    border-color:      red ;
 }

/*  Work-in-progress type change bar.  */
p.inprogress
{
    padding-left:      0.2em ; /* Space the border more leftwards. */

    border-left:       solid ;
    border-right:      none ;
    border-top:        none ;
    border-bottom:     none ;
    border-left-width: thick ;
    border-color:      red ;
}

/*  Indented paragraph for examples.  */
p.example
{
    font-size:         0.8em ;
    font-style:        italic ;

    margin-left:       4em ;
    margin-right:      4em ;

    background-color:  transparent ;
}



/*
 * --------------------- Scroll Box ---------------
 *
 * Example:
 *
 * <div class="scrollBox"> <div class="scrollBoxContent">
 *     text ...
 *     text
 * </div> * </div>
 *
 * This was hard to do since the scroll bars overlay the rounded corners, hiding them.
 * I used a modified form of the solution suggested here: 
 *     https://stackoverflow.com/questions/16676166/apply-border-radius-to-scrollbars-with-css`
 */
div.scrollBox
{
    font-family:        "Courier New", "Andale Mono", "Menlo", monospace ;
    font-weight:        bold ;
    font-size:          1.0em ;

    /* Don't collapse whitespace.  Text wraps on newlines, so we don't need to use <br />. */
    white-space:        pre ;

    height:             12em ;
    width:              80% ;
    margin-top:         1em ;    /* Vertical separation between adjacent boxes. */
    margin-left:        5em ;    /* Slightly inset from the left. */

    border:             solid ;
    border-width:       0.3em ;
    border-color:       rgb( 120,120, 255 ) ; /* Light blue. */

    color:              black ;
    background-color:   rgb( 225, 240, 255 ) ; /* Cyan tinted background. */

    border-radius: 1em ; /* Rounded corners. */

    overflow: hidden ;  /* Clip off any crap bleeding over from the content box below (if any). */
}

/* This is the scroll box content which has scroll bars and fits into the scroll box container. */
div.scrollBoxContent
{
    /* I don't know why I see a vertical offset in the container, but this works around it and 
     * seems to work OK when scaling the browser window.  */
    margin-top:   -1.7em ;

    height:       100% ; /* Fit the contents to the container. */
    overflow:     auto ; /* Let the browser decide about showing scroll bars. */
}
/*
 * --------------------- Table of contents navigation sidebar ---------------
 *
 * Example:
 * 
 *   <nav class="tableOfContents">
 *       <ul>
 *           <li><a href="#Gallery">Gallery Traditional Works</a></li>
 *       </ul>
 *   </nav>
 *
 */
nav.tableOfContents
{
    /* Fixed to the top of the viewport. */
    position:          fixed ;
    top:               1em ;
    left:              0 ;

    /* Make it fairly thin and tall. */
    width:             6em ;
    margin-left:       0.1em ;
    padding:           0.2em ;
    border:            none ;

    /* Black text on transparent background. */
    color:             black ;
    background-color:  transparent ;
}

/*
 * Apply these rules only for a <ul> which is a child of nav.tableOfContents.
 */
nav.tableOfContents > ul
{
    /* Remove all default padding and margins. */
    margin:  0 ;
    padding: 0 ;
}

/*
 * Apply the rules only when the <li> is a child of the <ul> which is a child of 
 * nav.tableOfContentsSidebar.
 */
nav.tableOfContents > ul > li
{
    font-size:        0.55em ;  /* Small unobtrusive font. */

    margin-bottom:    0.1em ;   /* Leave some space between blocks. */

    list-style-type:  none ;    /* Remove list bullets. */
    list-style     :  none ;    /* Hack:  because Firefox doesn't listen to list-style-type here. */
}

/* Applies to any <a href= element in a table of contents sidebar.
 * Use a descendent selector here since the <a href could be at any depth.
 */
nav.tableOfContents a
{
    /* Convert list elements from inline to block so we can color the 
     * background. 
     */
    display: block ;

    /* Wide enough for the longest word. */
    width:   11em ;

    padding: 0.2em 1.2em ;

    color:           rgb( 100, 100, 100 ) ;    /* Text color for contrast. */
    text-decoration: none ;     /* Remove default hyperlink underlining. */

    /* Color the whole block background light blue. */
    background-color: rgb( 150, 220, 250 ) ;

    /* Circular border. */
    border-radius: 1em ;
}

/* Applies to the <a href element in a table of contents sidebar only when hovering.
 * Use a descendent selector here since the <a href could be at any depth.
 */
nav.tableOfContents a:hover
{
    /* Color the whole block background light blue. */
    background-color: rgb( 100, 150, 250 ) ;

    color: white ;  /* Text color white for contrast. */
}


/*
 * --------------------- Forms ----------------------------------------------
 */

/* Forms in general. */
form
{
    padding:     0 ;
    border:      0 ;
    margin:      0 ;
    min-width:   40em ;  /* Don't let the controls wrap around to the next line. */
}

form img
{
    vertical-align: middle ;
}

form ul
{
    list-style-type:   none ; /* Remove bullets. */
    list-style-image:  none ;

    padding:           0 ;
    margin:            0 ;
}

form li
{
}

/* Fieldset is the form container. */
form fieldset
{
    font-family:       Verdana, Geneva, "Trebuchet MS", sans-serif ;
    font-size:         smaller ;
    color:             navy ;

    padding:           0 ;
    border:            0 ;
    margin:            0 ;

    background-color:  lightskyblue ;
}

/* Attribute selector for input matches button or file type . */
fieldset input[ type = 'button' ], fieldset input[ type = 'file' ]
{
    font-style:        italic ;
    cursor:            pointer ; /* Hand when hovering over the button. */
    padding:           0.3em ;
}

/* Format legends to make controls line up along a column. */
fieldset legend
{
    float:         left ;
    margin-right:  1.5em ;
    width:         12em ;
    text-align:    right ;
}

fieldset textarea
{
    font-family:       "Courier New", "Andale Mono", "Menlo", monospace ;
    color:             navy ;
    cursor:            auto ;     /* Vertical bar cursor when hovering over text. */
    resize:            none ;   /* Don't allow user to resize, only scroll. */
    background-color:  rgb( 240, 240, 245 ) ; /* Light blue */

    width: 100% ;
}

/*
* --------------------- Images ---------------------------------------------
*/

/* Images by themselves are centered in the parent block and have a decorative frame.
 *
 * <img class="centered" src="WebPageImages/BlenderScreenshot.png" alt="" />
 */

/* Fake inheritance in CSS by declaring properties for both 
 * img.centered, img.centeredsmaller, etc., then overriding img.centeredsmaller, etc.
 */
img.centered, img.centeredsmaller, img.centeredsmallest
{
    display:           block ;
    background-color:  rgb( 100, 150, 150 ) ; /* Dark greenish gray. */

    /* Thin area of background color surrounding the image. */
      padding:           0.5em 0.5em 0.5em 0.5em ;

    /* A thin greenish black frame. */
    border:            0.3em rgb( 0, 50, 50 ) solid ;
    border-style:      solid ;
    border-radius:     1em ;

    margin-left:       auto ; /* Center the image horizontally. */
    margin-right:      auto ;
    margin-top:        2em ;
    margin-bottom:     2em ;

    /* Image won't be larger than containing block (usually the body element).  The body 
       containing box is the viewport on mobile devices or browser window on desktops.  */
    max-width:         100% ;
}

img.centeredsmaller
{
    /* Image won't be larger than containing block (usually the body element).  The body 
       containing box is the viewport on mobile devices or browser window on desktops.  */
    max-width:         60% ;
}

img.centeredsmallest
{
    /* Image won't be larger than containing block (usually the body element).  The body 
       containing box is the viewport on mobile devices or browser window on desktops.  */
    max-width:         40% ;
}

/*
 * Images in a technical report have a lighter frame color to match the lighter body.
 */
body.technicalReport img.centered img.centeredsmaller
{
    background-color:  rgb( 170, 205, 205 ) ; /* Light blue-gray. */
}

/* Inline images which are children of paragraphs (e.g. equations),
 * and any images which are descendants of table rows and lists.
 */
p > img, li img, td img
{
     /* Scale image size to the font, but don't let image shrink as
      * this will cause aliasing as the browser tries crudely
      * to resample the natural image height.
      */
    min-height:     1.3em ;

    /* Align these images to the middle of the text line vertically. */
    vertical-align: middle ;

    /* Leave a little room at the bottom so images won't run 
     * together if they are adjacent list items. 
     */
    margin-bottom:  0.5em ;
}

/* Framed images for an art gallery.
 * Images which are within tables of the gallery class.
 */
table.gallery img
{
    background-color: rgb( 150, 150, 170 ) ;

    /* The light blue gray background color will show through between the painting and 
     * the frame.  
     */
    padding:          0.2em 0.2em 0.2em 0.2em ;

    border-style:     solid ;
    border-color:     black ;
    border-width:     1.2em ;

    width:            90% ; /* Almost as wide as the containing cell of the table. */
}

/*
 * For this particular image id only, within the gallery,
 * turn off the padding because the image has its own elliptical black frame.
 */
table.gallery img#GirlFromKweilin
{
    background-color:       rgb( 28, 28, 28 ) ;
    padding:                0 0 0 0 ;
}


/*
 *  Left page border generated by an image.
 *
 *  <p>
 *  <img class="border" 
 *       src="../WebPageImages/otherInterestsBorderImage.jpg" 
 *       alt="Art Gallery Image Border." />
 *  </p>
 */
img.border
{
    /* In our HTML documents, we set display: none before loading this 
     * style sheet.
     *
     * If there is an error loading this style sheet, the border image doesn't 
     * appear at the top of the page before the text.
     *
     * Normally the style sheet will be loaded, so we override the display: none
     * property here: 
     */
    display:           block ;

    background-color:  rgb( 170, 235, 245 ) ;  /*  Bluish. */
    color:             black ;

    /* Fixed to the top of the viewport. */
    position:          fixed ;
    top:               0 ;
    left:              0 ;
    width:             25px ;

    /* Fill the entire viewport window vertically. */
    height:            100% ;

    /*  Give us a thin vertical dividing line. */
    border-right-style: solid ;
    border-right-width: medium ;
    border-right-color: blue ;
}

/*
 * ----------------------- Canvas--------------------------------------------
 */

/* Put a blue dotted line around the canvas by default.*/
canvas
{
    border-width:   0.2em ;
    border-style:   dotted ;
    border-color:   blue ;

    /* Image won't be larger than containing block (usually the body element).  The body 
       containing box is the viewport on mobile devices or browser window on desktops.  */
    max-width:         100% ;
}



/*
 * ---------------------- Horizontal rule -----------------------------------
 */
/* Horizontal rule. */
hr
{
    height:            0.5em ;
    width:             100% ;
    margin:            2em 0em 2em 0em ;
    border:            none ;

    background-color:  rgb(   0,   0, 153 ) ;  /* Dark blue default. */
    background-image:  url( "WebPageImages/blueBar.png" ) ;

    /* Keep any floating elements away from both left and right sides. */
    clear:             both ;
}


/*
* --------------------- Figures --------------------------------------------
*
*  <figure>
*     <img src="Fig1.jpg" />
*
*     <figcaption>
*        Caption for Fig. 1  Image will be at least as wide as the caption.
*        But we clip the maximum size to 40em x 40em.
*     </figcaption>
*
*  </figure>
*
* <p>
* This paragraph's text will flow to the left of the figure.
* </p>
*
*  To float the figure to the left, use 
*      <figure style="float: left">
*
*/
figure
{
    display: block ;

    text-align:        center ;
    background-color:  rgb( 100, 150, 150 ) ; /* Dark blue-gray. */

    border:            0.2em silver solid ;  /* Border. */
    border-radius:     1em ;

    padding:           1em 1em 1em 1em ;     /* Padding is colored same as the background color. */

    margin:            1.5em ; /* Space it away from the other elements in the page. */

    float:             right ; /* Float the figure to the right and have text flow around it to the left. */
}

/* Figure background in a technical report has a lighter color to match the lighter body. */
body.technicalReport figure
{
    background-color:  rgb( 170, 205, 205 ) ; /* Light blue-gray. */
}

figcaption
{
    font-style:   italic ;
    font-size:    smaller ;
    text-indent:  0 ;
}

/* Apply only to an image inside the figure.
 * Since we use a descendent selector so this also works for an image inside an href inside the figure. 
 */
figure img
{
    padding-left:   0.5em ;  /* In case we have multiple images, leave some space between. */
    padding-right:  0.5em ;
    max-width: 90% ;
}

/* Apply only to a hyperlink directly inside class figure. */
figure > a
{
    padding-left:   0.5em ;  /* In case we have multiple hyperlinks, leave some space between. */
    padding-right:  0.5em ;
}

/*
 * --------------------- Icons ----------------------------------------------
 *
 * Paragraph which starts with an image, and contains text.
 *
 * <div class="illustratedparagraph">
 *     <p>
 *         <img src=... />
 *     <p>
 * </div>
 *
 * <p>
 * The text in this second paragraph will flow to the right.
 * </p>
 *
 */
div.illustratedparagraph
{
    /* Float images to the left of the parent page and have text flow around it. */
    float: left ;
    margin-left:   0 ;      /* Hard against left edge of page. */
    margin-bottom: 1em ;    /* Leave space at the bottom. */

    /* 
     * Keep all other f l o a t i n g elements away from left and right sides of this paragraph.
     * But do let text flow around. 
     */
    clear: both ;
}

/* Only within an illustrated paragraph, inside the first hyperlink, 
 * capitalize the text.
 */
div.illustratedparagraph a:first-child
{
    text-transform:  uppercase ;  /* All bold caps. */
}

/*  Icon image.  */
div.illustratedparagraph img
{
    float:   left ;   /* Inside this div, image floats to the left. */
    border:  none ;   /* Turn off the hyperlink border on the image. */

    /* Leave space between image and text. */
    margin-right:   0.5em ;
    margin-bottom:  0.2em ;

    /* Image won't be larger than containing block (usually the body element).  The body 
       containing box is the viewport on mobile devices or browser window on desktops.  */
    max-width:  30% ;

    /* Let text flow around the image in a circle instead of a square box. */
    /* shape-outside: circle(50%); */
}

/*  This is special text for use to the right of the image.  */
div.illustratedparagraph p
{
   text-align:       justify ;
   background-color: transparent ;
}



/*
 * ----------------------- Navigation icon ----------------------------------
 *
 * Navigation icon with text and other icons flowing along the 
 * right side of its box.  Intended for use at the top or bottom of the
 * page to go home, up, forward and back.
 *
 * <nav>
 *     <p>
 *         <a href ="..."
 *            <img src=... />
 *         </a>
 *         <a href ="..."
 *            <img src=... />
 *         </a>
 *     <p>
 * </nav>
 *
 */
nav
{
    float:          left ; /* Float all links to the left of the page. */
    margin-right:   2em ;
}

/*  Navigation image.  */
nav img
{
    vertical-align:  middle ; /* Image is lined up with text centerline. */
    margin-left:     1em ;    /* Prevent text from running into second image. */
    margin-right:    0 ;
    border:          none ;   /* Turn off hyperlink border on the image. */
    margin-bottom:   1em ;    /* Leave space at the bottom. */
}

/*  Text within a paragraph within navigation. */
nav p
{
    margin:                  0 0 0 0 ;  /* No margins. */
    background-color:  transparent ;
}

/* Make text bold in the leftmost hyperlink only. */
nav a:first-child
{
    text-transform: uppercase ;  /* All bold caps. */
    font-weight:    bold ;
}



/*
 * ----------------------- Lists --------------------------------------------
 */

/*  Unordered list with a slightly smaller font,
*  small images for bullets.
*/
ul
{
    font-family:       Verdana, Geneva, "Trebuchet MS", sans-serif ;
    font-size:         1.0em ;

    list-style-image:  url( "WebPageImages/smallBlueBullet.png" ) ;
    list-style-type:   none ;       /* Remove list bullets. */

    padding-left:      0.5em ;

    margin-left:       2em ;
    margin-top:        1.5em ;
    margin-bottom:     1.5em ;

    /* Keep any floating elements away from both left and right sides. */
    clear: both ;
}

/*  Ordered list with a slightly smaller font.  */
ol
{
    font-family:       Verdana, Geneva, "Trebuchet MS", sans-serif ;
    font-size:         0.9em ;

    padding-left:      0.5em ;
    margin-left:       3em ;

    /* Keep any floating elements away from both left and right sides. */
    clear: both ;
}

/*  Unordered list with small black disks. */
ul.bullet
{
    font-size:           0.9em ;

    list-style-image:    none ;      /* Remove list bullets. */
    list-style-type:     disc ;

    padding-left:        0.5em ;
    margin-left:         4em ;
}

/*  Unordered list with small black rectangles and text wrap around. */
ul.minorBullet
{
   font-size:           0.9em ;

   list-style-image:    none ;      /* Remove list bullets. */
   list-style-type:     square ;
   list-style-position: inside ;
}

li.alternate
{
    color:     rgb( 100, 100, 250 ) ;
}

/*
 * ----------------------- Tables -------------------------------------------
 */

/*  Default tables have a solid black border and are as wide as the page.
    Collapse internal borders.
 */
table
{
    border-collapse:    collapse ;
    border-style:       solid ;
    border-color:       rgb( 100, 100, 255 ) ;
    border-width:       thin ;
    width:              100% ;
}

/* Table rows and columns have thin borders. */
td
{
    border-style:       solid ;
    border-color:       rgb( 100, 100, 255 ) ;
    border-width:       thin ;
}

/*
 * Special table for software downloads.
 */
table.download
{
    border-collapse:    collapse ;
    border-style:       solid ;
    border-color:       rgb( 200, 100, 50 ) ; /* Brownish. */
    border-width:       0.2em ;

    margin-left:        2em ;
    width:              90% ;
}

table.download td
{
    width:              20em ;         /* Minimum width of cell. */
}

table.download td.package
{
    width:     20em ;                  /* Minimum width of cell. */
    color:     rgb( 150, 100, 100 ) ;
}

/*
 *  Special table for art gallery.
 */
table.gallery
{
    border-collapse:        separate ;

    border-style:           solid ;
    border-color:           rgb( 70, 85, 251 ) ;   /* Deep blue border. */
    border-width:           0.3em ;

    background-color:       rgb(  70,  70,  90 ) ; /* Bluish gray background. */
    background-position:    top left ;
    background-attachment:  fixed ;
    background-repeat:      repeat ;

    width: 100% ;
}


/* All table data cells which are in gallery type tables. */
table.gallery td
{
    padding-left:      1.5em ;  /* Extra space between the rows of paintings. */
    padding-right:     1.5em ;

    border-style: none ;
}



/*
 * ------------------------------ Media -------------------------------------
 *
 * Fine tune the page for different displays by overriding properties.
 *
 * To test on a browser in display mode, temporarily replace the media 
 * keyword, such as "print" with "screen".
 */

/* Printing */
@media print
{
    /* Turn off the navigation sidebars. */
    nav.tableOfContents, div.tableOfContentsSidebar
    {
        display: none ;
    }

    /* Turn off decorative border images. */
    body img.border
    {
        display: none ;
    }

    /*  Leave less margin on the left of the page since border image is gone. 
     *  Remove all background images (printers don't print white).
     */
    body, body.technicalReport
    {
        margin-left:   3em ;
        margin-right:  2em ;
        background:    white ;
    }

    /* Turn off scrolling in scroll boxes and show the whole content. */
    div.scrollBox, div.scrollBoxContent
    {
        overflow:      auto ;     /* No scrollbars;  just show the whole content. */
        white-space:   pre-wrap ; /* Preserve whitespace.  Wrap when necessary and on newlines. */
        width:         auto ;     /* Expand the box size to whatever necessary. */
        height:        auto ;     /* Expand the box size to whatever necessary. */
        background:    white ;    /* Remove background color (printers don't print white). */
    }

    figure
    {
        background:    white ;    /* Remove background color (printers don't print white). */
    }

    table.gallery
    {
        background:    white ;    /* Remove background color (printers don't print white). */
    }
}

/* iPhone or other narrow width device. */
@media only screen and (max-device-width: 480px)
{
    /* Turn off the navigation sidebars. */
    nav.tableOfContents, div.tableOfContentsSidebar
    {
        display: none ;
    }

    /* Turn off decorative border images. */
    body img.border
    {
        display: none ;
    }

    /* Leave less margin on the left of the page since border image is gone. */
    body, body.technicalReport
    {
        margin-left:   3em ;
        margin-right:  2em ;
    }
}

/* iPad portrait */
@media only screen and (min-device-width: 481px) and (orientation:portrait)
{
}

/* iPad landscape */
@media only screen and (min-device-width: 481px) and (orientation:landscape)
{
}