/*===========================================================================
|
| 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-2017 by Sean Erik O'Connor.  All Rights Reserved.
|   last updated 01 Jan 17
|
===========================================================================*/

/*
 * 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      ||
 * ||                                             ||
 * ++=============================================++
 *
 */
/* This is a rule */
* {                    /* The * selector selects every HTML element. */
    margin  : 0 ;      /* The margin property and its value 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 a generous left margin so we can insert a decorative border. */
    margin-left:            12em ;
    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 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" ) ;

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


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

/*
 *  My name on the title page using a background image.
 */
h1.name
{
    background-color:       transparent ;
    background-image:       url( "WebPageImages/SeanErikO'Connor.png" )  ;
    background-repeat:      no-repeat ;
    background-position:    top left ;

    /* As large as possible without clipping. */
    background-size:          120% ;
    height:                   3.3em ;
    width:                   23.0em ;

    /* Align the left edge of the text against the left edge of the blue separator line. */
    margin-left:              -1.5em ;

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

/*
 * 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 ;

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

/*  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 ;

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

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

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

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

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

/*  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 ;

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

/*  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-width:   medium ;
    border-top:     none ;
    border-left:    none ;
    border-right:   none ;
    border-bottom:  solid ;
    border-color:   silver ;

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

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

/* Sub-subsection heading. */
h5
{
    font-family:    Garamond, "Times New Roman", serif ;
    font-size:      1.2em ;
    text-align:     left ;

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

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



/*
 * --------------------------- 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 -- almost like ordinary text. */
em.mild
{
    color:            #004000 ;     /* Dark green. */

    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 ;

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

/*  Paragraph with a box around it. */
p.box
{
    display:           inline-block ;
    font-size:         0.8em ;
    font-weight:       bold ;
    color:             black ;

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

    background-color:  transparent ;
}

/* Paragraph with scroll bars. */
p.scrollBox
{
    font-family:        "Courier New", "Andale Mono", "Menlo", monospace ;
    font-weight:        bold ;
    font-size:          1.0em ;
    white-space:        pre ;    /* Don't collapse whitespace.  Text wraps on newlines,
                                    so we don't need to use <br />. */

    width:              80% ;
    height:             12em ;   /* Fixed height:  we will scroll. */
    margin-left:        5em ;    /* Slight indentation. */
    overflow:           scroll ; /* Force scrolling always. */

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

    /*  Text colors green on black like an old fashioned terminal. */
/*    color:              rgb( 100, 200, 100 ) ;
    background-color:   rgb(   0,   0,  50 ) ; */
    color:              black ;
    background-color:   rgb( 190, 241, 254 ) ;
}


/*  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 ;
}



/*
 * --------------------- Table of contents navigation sidebar ---------------
 */
div.tableOfContentsSidebar
{
    /* Fixed to the top of the viewport. */
    position:          fixed ;
    top:               1em ;
    left:              0 ;

    width:             6em ; /* Make it fairly thin. */

    margin-left:       0.1em ;
    padding:           0.2em ;
    border:            none ;

    color:             black ;       /* Default text color. */

    background-color:  transparent ; /* Default background. */
}


/* Use a child selector rather than a descendent selector to be specific:
 * Apply these rules only for a <ul> which is a child of div.tableOfContents
 */
div.tableOfContentsSidebar > ul
{
    margin:           0 ;         /* Remove all default padding and margins. */
    padding:          0 ;
}

/* Use a child selector rather than a descendent selector
 * (which would be instead, div.tableOfContentsSidebar ul li) so we can be surgically precise:
 * Apply the rules only when the <li> is a child of the
 * <ul> which is a child of div.tableOfContentsSidebar.
 */
div.tableOfContentsSidebar > ul > li
{
    font-size:        0.7em ;   /* 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 the a element in a table of contents sidebar only.
 * Must use a descendent selector here.
 */
div.tableOfContentsSidebar a
{
    /* Convert list elements from inline to block so we can color the 
     * background. 
     */
    display: block ;

    width:           9em ; /* Wide enough for the longest word. */
    padding:         0.2em 0.8em ;

    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 ) ;
}

/* Applies to the a element in a table of contents sidebar only when hovering.
 * Must use a descendent selector here, i.e. applies to a child, child of a child, etc.
 */
div.tableOfContentsSidebar 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
{
    text-align:     left ;

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

form img
{
    vertical-align: middle ;
}

/* Fieldset is the form container. */
form fieldset
{
    font-family:       Verdana, Geneva, "Trebuchet MS", sans-serif ;
    font-size:         1.1em ;
    color:             rgb(   0,   0, 153 ) ; /* Dark blue text. */
    text-align:        justify ;

    margin-bottom:     1em ;
    width:             50% ;


    border:            none ;    /* Remove the default groove border. */
    border-radius:     0.9em ;   /* Rounded corners. */
    padding:           0.3em ;
    padding-top:       0.5em ;

    background-color:  rgb( 220, 235, 245 ) ; /* Light blue */
}

/* 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 ;
}

fieldset legend
{
    padding-left: 0em ;
}

fieldset textarea
{
    font-style:        italic ;
    cursor:            auto ;   /* Vertical bar cursor when hovering over text. */
    padding:           0.3em ;
    background-color:  rgb( 240, 240, 245 ) ; /* Light blue */
}

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

/* Images by themselves are centered in the parent and have a decorative frame.
 *
 * <img class="block" src="WebPageImages/BlenderScreenshot.png" width="1200" height="800" alt="" />
 *
 * */
img.block
{
    display:           block ;

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

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

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

    border:            0.3em silver solid ;  /* Border. */
    border-style:      solid ;
}

/*
 * Images in a technical report have a lighter frame color to match the lighter body.
 */
body.technicalReport img.block
{
    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
{
    border-style:           solid ;
    border-color:           black ;
    border-width:           1.2em ;

    /* Thin line between painting and frame of light bluish gray. */
    padding:                0.2em 0.2em 0.2em 0.2em ;
    background-color:       rgb( 150, 150, 170 ) ;
}

/*
 * 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:             50px ;

    /* 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 ;
}



/*
 * ---------------------- 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. */

    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 class figure. */
figure > img
{
    max-width:      80em ;
    max-height:     60em ;   /* So iPhone and iPad don't stretch the image out vertically! */
    height:         100% ;   /* Make the image stretch as much as possible within the figure box. */
    width:          100% ;
    padding-left:   0.5em ;  /* In case we have multiple images, leave some space between. */
    padding-right:  0.5em ;
}

/* Apply only to a hyperlink 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:         left ;   /* Float images to the left of the parent page and have text flow around it. */
    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. */
    margin-right:  1em ;    /* Leave space for text to the right of the image. */
    margin-bottom: 1em ;    /* Leave space at the bottom of the image for next lines of text. */
}

/*  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.
 *
 * <div class="navigate">
 *     <p>
 *         <img src=... />
 *     <p>
 * </div>
 *
 */
div.navigate
{
    float:          left ;
    margin-right:   2em ;
}

/*  Navgation image.  */
div.navigate img
{
    vertical-align:  middle ;
    margin-right:    0 ;
    border:          none ;   /* Turn off hyperlink border on the image. */
    margin-bottom:   1em ;    /* Leave space at the bottom. */
}

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

/* Make text bold in the rightmost hyperlink. */
div.navigate 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 ) ;
    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-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 ;
}


/* All td's which are in gallery type tables. */
table.gallery td
{
    text-align:   center ; /* Hang the image in the center of the table cell. */
    border-style: none ;
    padding:      2.5em ;  /* Extra space between the rows of paintings. */
}



/*
 * ------------------------------ 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. */
    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. */
    p.scrollBox
    {
        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. */
    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)
{
}