html {margin: 0; padding: 0; } 
body {margin: 0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 80.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-bottom: 1em; }
td {margin: 0; padding: 0.2em; border: solid 1px black; border-collapse: collapse; vertical-align: top; }
ul {list-style-type: square; }
li {padding-bottom: 0.2em; }
img { width: 100%; }
.toggle
{
    display: none;
}

#header { 
            margin: 0; 
            border: 0; 
            padding: 0.5em 0; 
            background: #036; 
            color: #fff;
            text-align: center;
            overflow: auto; 
        }

#header h1  {
                margin: 0;
                padding: 0;
            }

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

#mobile_menu_button 
            { 
                margin: 0; 
                border: 0; 
                padding: 0 0 1em 0;  
                background: #036; 
                color: #fff; 
                text-align: center; 
                overflow: auto; 
                display: block; 
            }
        #mobile_menu_button a:link, #mobile_menu_button a:visited 
            { 
                color: #fff; 
            }
        
        #mobile_menu_button a:hover, #mobile_menu_button 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! */
        #menu 
            { 
                margin:0; 
                border:0; 
                padding: 0; 
                width: 100%; 
                clear:both; 
                display: none; 
                overflow: auto;
                font-family: Verdana, Helvetica, Arial, sans-serif;  
                font-weight: bold;
        
            }
        #menu ul 
            { 
                margin: 0; 
                border: 0; 
                padding: 0; 
                width: 100%; 
            }
        #menu li 
            { 
                margin: 0; 
                border-style: solid; border-width: 1px 0 0 0; 
                border-color: #fff; 
                padding: 0; 
                width: 100%; 
                height: 100%; 
                font-size: 100%;
                display: block; 
                text-align: center; 
                list-style-type: none;   
            }
        #menu a:link, #menu a:visited 
            { 
                margin: 0; 
                border: 0; 
                padding: 0.5em 0; 
                display: block; 
                height: 100%;
                text-decoration: none; 
                color: #ccc;
                background: #036;
            }
            
        #menu a:hover, #menu a:active 
            { 
                color: #fff;
                background: #036;  
            }
        
        #menu li#here 
            {
                padding: 0.5em 0; 
                background: #036;
                color: #fff;
            }

/* 
    The container class is used to limit the width of the content on the page to a maximum of
    of 900px: white space is added to either side for browser windows that are wider than that.
*/
.container 
            {
                margin: 0 auto; 
                border: 0;
                padding: 0 1em;
                max-width: 1200px; /* Padding will be added to sides as necessary */
            } 

#contentwrapper 
            { 
                margin: 0.5em 0; 
                overflow: auto; 
                line-height: 1.5em; 
            }
#contentwrapper h1
            {
                line-height: 1em;
            }

#contentwrapper h2  {font-weight: bold; font-style: italic; background: #ddd; color: #039; margin: 0; padding: 5px; }

/* 
    Default content1 and content2 are for a mobile device, taking up the full 
    width of the screen. We'll alter these values in the wide-screen media
    query below.
*/
#content1, #content2, .mobile_show
            {   margin: 0; 
                border: 0; 
                padding: 0; 
                float: left; 
                width: 100%;  
            }                     

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

details  {
            margin: 0.5rem;
            padding: 0.5rem;
            background: #eee;
            cursor: pointer;
            }
            
#footer     { 
                margin: 0; 
                border: 0; 
                padding: 0 1em; 
                background: #036; 
                color: #fff; 
                text-align: center; 
                overflow: auto; 
            }
#footer a:link, #footer a:visited 
            {
                color: #fff;
            }

.mobile_hide  /* Used to supress the display of elements in the mobile version */
            {
                display: none;
            }


/* red highlight */
.highlight 
{
    margin: 5px;
    padding: 10px 10px 0 10px;
    background-color: #ffe6ef;
    color: #000;
    border: dashed 1px #000;
}
.highlight h1 
{
    margin: -10px -10px 0 -10px;
    padding: 5px;
    background-color: #900;
    color: #fff;
    font-size: 1.4em;
}
/*  blue problem  */
.problem 
{
    margin: 5px;
    padding: 10px 10px 0 10px;
    background-color: #d5e0ff;
    color: #000;
    border: dashed 1px #000;
}
.problem h1 
{ 
    background-color: #369;
    color: #fff;
    margin: -10px -10px 0 -10px;
    padding: 5px;
    font-size: 1.4em;
}
/* green definition  */
.definition 
{
    margin: 5px;
    padding: 10px 10px 0 10px;
    background-color: #e2ffd7;
    color: #000;
    border: dotted 1px #000;
}
.definition h1 
{ 
    background-color: #360;
    color: #fff;
    margin: -10px -10px 0 -10px;
    padding: 5px;
    font-size: 1.4em;
}
/* code blocks and inline code  */
code {font-size: 1.4em; }

pre { margin: 0.5em;
       border: solid 1px #ccc;
       border-radius: 3px;
       padding: 0.5em;
       font-size: 1.4em;
       background: #f3f6f9;
       color: #000; 
       overflow: auto;
      }
       


/*
    These specification below are the ones with trigger alterations in display based on broswer width.
    The defaults CSS-descriptions above are based on an assumed mobile, "vertically-prominent" display.
    
    This specification, then, describes how to alter those default display values for a wider (>= 600px)
    display port.
*/
            
/* 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: 150%; text-align: left; width: 50%; margin: 0.1em 0;}
    /* set up horizontal menu */
    #mobile_menu_button {display: none; } 
    #menu {display: block; width: 50%; float: right; position: absolute; top: 1em; right: 0; }
    #menu li {border-width: 0; width: 25%; float: left; }
    /* 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; } 
    .desktop_small { margin: 1em; padding: 0; width: 20%; float: right;  }
}