html
    {
        margin: 0; 
        padding: 0;
    }

body 
    { 
        margin: 0; 
        border: 0;
        padding: 0;
        font-family: Verdana, Helvetica, sans-serif; 
        font-size: 100.01%; 
        font-weight: normal; 
        color: #000; 
        background: #fff; 
    }

a:link, a:visited 
    { 
        text-decoration: underline; 
        color: #00f;  
    }

a:hover, a:active 
    { 
        text-decoration: underline; 
        color: #c00; 
    }

table 
    {
        border-collapse: collapse; 
        margin: 1rem;
    }

td 
    {
        margin: 0; 
        padding: 0.4rem; 
        border: solid 1px black; 
        border-collapse: collapse; 
        vertical-align: top; 
    }

ul 
    {
        list-style-type: square; 
    }

li 
    {
        padding-bottom: 0.2rem; 
    }

img, .half_center, .half_right, .small_right
    { 
        width: 100%; 
    }

figure
   {
       margin: 0;
       border: 0;
       padding: 0;
   }
   
figcaption
   {
       margin-top: 0.5rem; text-align: center;
       font-style: italic;
   }
            
        
header 
    { 
        margin: 0; 
        border: 0; 
        padding: 0; 
        background: #004080; 
        color: #fff; 
        text-align: center; 
        overflow: auto;  
        width: 100%;
        position: relative;
    }

header h1  
    {
        margin: 0;
        padding: 0.5rem 1rem;
        font-size: 1.20rem;
    }

header a:link, header a:visited {
            text-decoration: none; 
            color: #fff; 
            }
header a:hover, header a:active {
            color: #ccc; 
            }

div#mobile 
    { 
        font-size: 1.50rem;
        position: absolute;
        bottom: 0.6rem;
        right: 1rem; 
    }
div#mobile a:link, div#mobile a:visited 
    { 
        color: #fff; 
    }

div#mobile a:hover, div#mobile a:active 
    { 
        color: #ccc; 
    }

/* Default menu is for a mobile device, vertically oriented and  */
/* taking up the full width of the viewport. Initially not */
/* displayed, however! */
nav 
    { 
        margin:0; 
        border:0; 
        padding: 0; 
        width: 100%; 
        clear:both; 
        display: none; 
        overflow: auto;
        font-family: Verdana, Helvetica, Arial, sans-serif;  
        font-weight: bold;

    }
nav ul 
    { 
        margin: 0; 
        border: 0; 
        padding: 0; 
        width: 100%; 
    }
nav li 
    { 
        margin: 0; border-style: solid; border-width: 1px 0 0 0; 
        border-color: #fff; 
        padding: 0; 
        width: 100%; 
        height: 100%; 
        font-size: 1.0rem;
        display: block; 
        text-align: center; 
        list-style-type: none;   
    }
nav a:link, nav a:visited 
    { 
        margin: 0; 
        border: 0; 
        padding: 0.5rem 0; 
        display: block; 
        height: 100%;
        text-decoration: none; 
        color: #ccc;
        background: #004080;
    }
    
nav a:hover, nav a:active 
    { 
        color: #fff;
        background: #99ccff;  
    }

nav li#here 
    {
        padding: 0.5rem 0; 
        background: #004080;
        color: #fff;
    }
    
main 
    { 
        margin: 0;
        padding: 1rem;
        overflow: auto; 
        line-height: 1.5rem;
    }
    
h1, h2, h3, h4 {
        line-height: 2rem;
    }
h1 code, h2 code, h3 code, h4 code
    {
        font-size: 1.4em;   
    }
    
a
    {
        scroll-margin-top: 4rem;
    }


/* Default content1 and content2 are for a mobile device, taking up the full 
   width of the screen */
#content1, #content2 
    { 
        margin: 0; 
        border: 0; 
        padding: 0; 
        float: left; 
        width: 100%; 
    }


.announcement 
    { 
        margin: 0 0 1rem 0;  
        border: dashed 1px #999; 
        padding: 0.5rem; 
        background-color: #eee; 
        overflow: auto; 
    }

.toggle
{
    display: none;
}

code {font-size: 1.2rem; font-weight: bold;}

pre { margin: 0.5rem;
       border: solid 1px #ccc;
       border-radius: 3px;
       padding: 0.5rem;
       font-size: 1.0rem;
       background: #f3f6f9;
       color: #000; 
       
       /* From https://css-tricks.com/snippets/css/make-pre-text-wrap/ */
       word-break: break-all; /* webkit */
       word-wrap: break-word;
       white-space: pre;
       white-space: -moz-pre-wrap; /* fennec */
       white-space: pre-wrap;
       white-space: pre\9; /* IE7+ */
    }

/* red highlight */
.highlight 
{
    margin: 5px;
    padding: 10px 10px 0 10px;
    background-color: #ffe6ef;
    color: #000;
    border: solid 1px #000;
    border-radius: 3px;
    overflow: auto;
}
.highlight h1 
{
    margin: -10px -10px 0 -10px;
    padding: 10px;
    background-color: #900;
    color: #fff;
}


/*  blue problem  */
.problem 
{
    margin: 5px;
    padding: 10px 10px 0 10px;
    background-color: #d5e0ff;
    color: #000;
    border: solid 1px #000;
    border-radius: 3px;
    overflow: auto;
}
.problem h1 
{ 
    background-color: #369;
    color: #fff;
    margin: -10px -10px 0 -10px;
    padding: 10px;
}
/* green definition  */
.definition 
{
    margin: 5px;
    padding: 10px 10px 0 10px;
    background-color: #e2ffd7;
    color: #000;
    border: solid 1px #000;
    border-radius: 3px;
    overflow: auto;
}
.definition h1 
{ 
    background-color: #360;
    color: #fff;
    margin: -10px -10px 0 -10px;
    padding: 10px;
}

blockquote
    {
        margin: 1em;
        border: solid 1px #999;
        padding: 1em;
        background: #eee;
    }
    
footer 
    { 
        margin: 0; 
        border: 0; 
        padding: 0 1rem; 
        background: #004080; 
        color: #fff; 
        text-align: center; 
        overflow: auto; 
    }
footer a:link, footer a:visited 
    { 
        color: #fff; 
    }

/* Padding will be added to sides as necessary */
.container 
    {
        margin: auto; max-width: 800px; 
    } 


/* desktop display, for large-width desktop-sized display, */
/* all the way down to 600px wide*/
@media (min-width: 600px) 
{ 
    body { font-size: 90%; }
    header h1 {font-size: 140%; text-align: left; width: 50%; margin: 0.1em 0;}
    
    /* pins header to top of page and keeps it there */
    header { position: fixed; top: 0; }
    
    /* set up horizontal menu */
    #mobile {display: none; } 
    
    /* pins nav to top of page and keeps it there */
    nav {display: block; width: 50%; float: right; position: fixed; top: 0.5em; right: 0; } 
    nav li {border-width: 0; width: 33%; float: left; }
    nav a:link, nav a:hover { background: #004080 ;}
    
    /* Places larger margin at top to move content below pinned header */
    main { margin-top: 3rem; }
    
    div
    {
        scroll-margin-top: 4rem;
    }
  
    /* places two content containers side by side */
    #content1 { padding: 0 4% 0 0; width: 46%; float: left; } 
    #content2 { padding: 0 4% 0 0; width: 46%; float: left; } 
    
    /* images on the desktop */
    .half_center { 
      width: 50%; 
      display: block;
      margin: 1em auto; 
      border: 0; 
      padding: 0; 
    }
    
    .half_right { 
      margin: 0 1em 1em 1em; 
      border: 0; 
      padding: 0; 
      width: 50%; 
      float: right;
    }
    
    .small_right { 
      margin: 0 1em 1em 1em; 
      border: 0; 
      padding: 0; 
      width: 30%; 
      float: right;  
   }
    
}