html
    {
        margin: 0; 
        padding: 0;
    }

body    
    {
        margin: 0; 
        border: 0; 
        padding: 0; 
        font-family: Georgia, Garamond, serif; 
        font-size: 100.01%; 
        font-weight: normal; 
        color: #000; 
        background-color: #333;
    }
        
a:link, a:visited 
    { 
        text-decoration: underline; 
        font-weight: bold;
        color: #00f;  
    }

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

table 
    {
        border-collapse: collapse; 
        background: #eee;
    }

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

ul li   
    {
        list-style-type: square;
        padding-bottom: 0.5em;
    }

ol li
    {
        padding-bottom: 0.5em;
    }

img
    {
        width: 100%;
    }
    
#header 
    { 
        margin: 0; 
        border: 0; 
        padding: 2em 0 1em 0; 
        background-color: #333; 
        color: #f30;
        text-align: center; 
        overflow: auto; 
    }

#header h1  
    {
        margin: 0;
        padding: 0;
        font-size: 120%;
    }


/* 
    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: 1000px; /* Padding will be added to sides as necessary */
            } 

#contentwrapper 
    { 
        margin: 0;  
        border: 0;
        padding: 0 1em;
        background-color: #fff; 
        color: #333;
        overflow: auto;
    }
#contentwrapper p
            {
                margin: 0.5em 0;
                line-height: 1.5em;
            }

#contentwrapper h1
            {  
                line-height 1.4em;
                font-size: 140%;
            }

#contentwrapper h2
            {  
                line-height 1.2em;
                font-size: 120%;
            }
/* 
    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
    {   
        margin: 0 0 1em 0; 
        border: 0; 
        padding: 0; 
        float: left; 
        width: 100%;  
    }                     

#footer     { 
                margin: 0; 
                border: 0; 
                padding: 0 1em; 
                background: #333; 
                color: #fff; 
                font-size: 90%; 
                text-align: center; 
                overflow: auto; 
            }
#footer a:link, #footer a:visited 
            {
                color: #fff;
            }
            
#footer a:hover, #footer a:active 
            {
                color: #39f;
            }

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



/* red highlight */
.highlight 
{
    margin: 0.5em;
    border: dashed 1px #000;
    padding: 10px 10px 0 10px;
    background-color: #ffe6ef;
    color: #000;
    
}
.highlight h1
{
    margin: -10px -10px 0 -10px;
    padding: 0.25em;
    background-color: #900;
    color: #fff;
    font-size: 110%;
}
    
/*  blue problem  */
.problem 
{
    margin: 0.5em;
    border: dashed 1px #000;
    padding: 10px 10px 0 10px;
    background-color: #d5e0ff;
    color: #000;
}
.problem h1 
{ 
    margin: -10px -10px 0 -10px;
    padding: 0.25em;
    background-color: #369;
    color: #fff;
    font-size: 110%;
}
/* green definition  */
.definition 
{
    margin: 0.5em;
    border: dotted 1px #000;
    padding: 10px 10px 0 10px;
    background-color: #e2ffd7;
    color: #000;
}
.definition h1 
{ 
    margin: -10px -10px 0 -10px;
    padding: 0.25em;
    background-color: #360;
    color: #fff;
    font-size: 110%;
}
/* code blocks and inline code  */
.code 
{
    margin: 0.5em;
    border: dashed 1px #666;
    padding: 0.5em;
    font-size: 1.2em;
    background: #eee;
    color: #000;
    font-family: Courier, monospace;
    font-weight: normal;
    white-space: pre;
    overflow-x: auto;
}
.ilc 
{
    margin: 0;
    border: 0;
    padding: 0;
    font-family: Courier, monospace;
    font-size: 1.2em;
    font-weight: bold;
} 
.codehighlight 
{
    font-weight: bold;
}

.toggle
{
    display: none;
}

/*
    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: 120%; }
    #header h1 {font-size: 180%; text-align: left; width: 50%; }
    /* set up horizontal menu */
    #mobile_menu_button {display: none; } 
    #menu {display: block; width: 50%; float: right; position: absolute; top: 0.5em; 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: 40%; float: right;  }
}