body {
    background-color: white;
    color: black ;
    font-family: verdana, arial, sans-serif ;
    font-size: 18px ;
    padding: 0px ;
    margin: 0px ;
    border:0px ;
}

#content {
    padding: 0px ;
    margin: 0px ;
    border:4px black ;
}

p {
    padding: 0 ;
    padding-top: 0px ;
    padding-bottom: 4px ;
    margin: 0 ;
    margin-top: 4px ;
    margin-bottom: 4px ;
    text-align: justify ;
}

p.center {
    text-align: center ;
}

pre {
    font-family: courier, monospace, fixed, console ;
    font-weight: bold ;
    margin: 0 ;
    padding: 0 ;
}

h1 {
    font-size: 120% ;
    font-weight: bold ;
    padding: 0 ;
    padding-top: 2px ;
    margin: 8px ;
    margin-top: 2px ;
    text-align: center ;
    color: darkblue ;
}

h2 {
    font-size: 110% ;
    font-weight: bold ;
    font-style: italic ;
    padding: 0 ;
    padding-top: 2px ;
    margin: 0 ;
    margin-top: 8px ;
    text-align: left ;
    color: darkblue ;
}

h3 {
    font-size: 105% ;
    font-weight: bold ;
    padding: 0 ;
    padding-top: 2px ;
    margin: 0 ;
    margin-top: 8px ;
    text-align: left ;
    color: darkblue ;
}

h4 {
    font-size: 100% ;
    font-weight: bold ;
    padding: 0 ;
    margin: 0 ;
    margin-top: 8px ;
    text-align: left ;
    color: darkblue ;
}

h5 {
    font-size: 100% ;
    font-weight: bold ;
    padding: 0 ;
    margin: 0 ;
    text-align: center ;
}

ul {
    margin: 8px ;
    padding: 0 ;
    margin-left: 2em ;
}

ol {
    margin: 8px ;
    padding: 0 ;
    margin-left: 4em ;
}

a {
    color: Green 
}

a:visited {
    color: DarkGreen ;
}

a:hover {
    color: white ;
    background-color: Green ;
}


.masthead {
    color: DarkBlue ;
    font-weight: bold ;
    padding: 8px ;
}

.menubar {
    background-color: darkblue ;
    color: white ;
    font-size: 90% ;
    font-family: Times, serif ;
    font-weight: bold ;
    padding: 0 ;
    padding-top: 2px ;
    padding-bottom: 2px ;
    margin-top: 4px ;
    margin-bottom: 0px ;
    text-align: center ;
}

a.menubar {
    text-decoration: none ;
    color: white ;
}

a.menubar:visited {
    text-decoration: none ;
    color: WhiteSmoke ;
}

a.menubar:hover {
    text-decoration: underline ;
    color: Green ;
    background-color: white ;
}

.menuselected {
    color: Green ;
    background-color: white ;
    padding: 2px ;
}

.sidebar {
    background-color: lightgrey ;
    color: dark blue ;
    font-family: Times, serif ;
    font-size: 100% ;
    margin: 0 ;
    padding: 2px ;
    text-align: center ;
    line-height: 1.0 ;
}

h1.sidebar {
    background-color: lightgrey ;
    color: white ;
    font-weight: bold ;
    padding: 2px ;
    padding-top: 4px ;
    padding-bottom: 4px ;
    margin: 2px ;
    margin-bottom: 4px ;
    text-align: center ;
    font-size: 100% ;
}

h2.sidebar {
    background-color: lightgrey ;
    color: white ;
    font-weight: bold ;
    font-style: italic ;
    padding: 0px ;
    margin: 0px ;
    text-align: center ;
    border: none ;
    font-size: 100% ;
}

a.sidebar {
    text-decoration: none ;
    padding: 4px ;
    margin: 0px ;
    text-align: center ;
    color: Green ;
    border:none ;
}

a.sidebar:visited {
    color: DarkGreen ;
}

a.sidebar:hover {
    background-color: Green ;
    color: white ;
}

.main {
    text-align: justify ;
    margin: 4px ;
    padding: 4px ;
}

hr.main {
    margin: 0 ;
    padding: 0 ;
    margin-bottom: 8px ;
    color: DarkBlue ;
    background-color: blue ;
    height: 8px ;
    border: none ;
}

.footer {
    font-size: 90% ;
    background-color: darkblue ;
    color: white ;
    font-family: Times, serif ;
    font-weight: bold ;
    padding: 4px ;
    padding-top: 8px ;
    margin: 0 ;
    text-align: center ;
    text-decoration: none ;
}

a.footer {
    text-decoration: none ;
    color: white ;
}

a.footer:visited {
    text-decoration: none ;
    color: WhiteSmoke ;
}

a.footer:hover {
    text-decoration: none ;
    color: DarkGreen ;
    background-color: white ;
}

p.western {
    font-size: 100% ;
    padding: 0px ;
    margin: 0px ;
}

table.section03 {
    width: 96% ;
    padding: 7px ;
    border: 1px, solid, black ;
}

td.section03 {
    border-top: none ;
    border-bottom: 1px solid black ;
    border-left: 1px solid black ;
    border-right: 1px solid black; 
    padding-top: 0.05cm; 
    padding-bottom: 0.05cm; 
    padding-left: 0.2cm; 
    padding-right: 0cm;
    margin: 0 ;
}

td.section03R {
    border-top: none ;
    border-bottom: 1px solid black ;
    border-left: none ;
    border-right: 1px solid black; 
    padding-top: 0.05cm; 
    padding-bottom: 0.05cm; 
    padding-left: 0.2cm; 
    padding-right: 0cm;
    margin: 0 ;
}


tr.section03 {
    vertical-align: top ;
}


#masthead_about {
    font-size: 12px ;
    padding-left: 4px ;
    margin-left: 2px ;
}

#masthead2 {
    font-size: 120% ;
    font-weight: bold ;
    padding: 0 ;
    margin: 0 ;
    text-align: center ;
    color: DarkBlue ;
}

#above_main {
    font-size: 120% ;
    font-weight: bold ;
    padding: 0 ;
    margin: 0 ;
    text-align: center ;
    color: DarkBlue ;
    margin: 16px ;
}

#main01 {
    color: DarkBlue ;
    padding: 1em ;
    padding-right: 2em ;
    padding-left: 2em ;
    margin: 0 ;
    border: 1px MediumBlue dashed ;
    background-color: #f7f7f7 ;
}

/* disable masthead2 for small screen */
#masthead2 {
    display: none ;
}

/* query for wide screen devices */
@media screen and (min-width: 512px)  {
    body {
        font-size: 14px ;
    }
    
    #masthead2 {
        display: block ;
    }
    
    #above_main {
        display: none ;
    }
    
    #masthead_about {
    }
    
    #content {
        display: -ms-grid ;
        -ms-grid-columns: 150px 1fr auto auto ;
        -ms-grid-rows: auto auto auto auto ;

        display: grid ;
        grid-template-columns: 150px 1fr auto auto ;
        grid-gap: 0 ;
        grid-template-rows: auto auto auto auto ;
        
        border-left: 8px DarkBlue solid ;
    }
    
    
    #masthead_logo {
        -ms-grid-column: 1 ;
        -ms-grid-column-span: 1 ;
        -ms-grid-row: 1 ;
        -ms-grid-row-span: 1 ;

        grid-column-start: 1 ;
        grid-column-end: 2 ;
        grid-row-start: 1 ;
        grid-row-end: 2 ;
        
        font-size: 95% ;
    }
    
    #masthead_about {
        -ms-grid-column: 2 ;
        -ms-grid-column-span: 3 ;
        -ms-grid-row: 1 ;
        -ms-grid-row-span: 1 ;
    
        grid-column-start: 2 ;
        grid-column-end: 5 ;
        grid-row-start: 1 ;
        grid-row-end: 2 ;
    } 
    
    #masthead2 {
        -ms-grid-column: 2 ;
        -ms-grid-column-span: 3 ;
        -ms-grid-row: 1 ;
        -ms-grid-row-span: 1 ;    
    
        grid-column-start: 2 ;
        grid-column-end: 5 ;
        grid-row-start: 1 ;
        grid-row-end: 2 ;
    }       
    
    .menubar {
        -ms-grid-column: 1 ;
        -ms-grid-column-span: 4 ;
        -ms-grid-row: 2 ;
        -ms-grid-row-span: 1 ;
            
        grid-column-start: 1 ;
        grid-column-end: 5 ;
        grid-row-start: 2 ;
        grid-row-end: 3 ;
        
        font-size: 100% ;
    }
    
    .main {
        -ms-grid-column: 2 ;
        -ms-grid-column-span: 1 ;
        -ms-grid-row: 3 ;
        -ms-grid-row-span: 1 ;

        grid-column-start: 2 ;
        grid-column-end: 3 ;
        grid-row-start: 3 ;
        grid-row-end: 4 ;
        
        margin-top: 0 ;
        padding-top: 0 ;
    }
    
    p.western {
        font-size: 85% ;
        padding: 0px ;
        margin: 0px ;
    }
    
    .sidebar {
        -ms-grid-column: 1 ;
        -ms-grid-column-span: 1 ;
        -ms-grid-row: 3 ;
        -ms-grid-row-span: 1 ;

        grid-column-start: 1 ;
        grid-column-end: 2 ;
        grid-row-start: 3 ;
        grid-row-end: 4 ;
        
        text-align: left ;
        font-size: 110% ;
        border-right: 1px DarkBlue dotted ;
    }
    
    .footer {
        -ms-grid-column: 1 ;
        -ms-grid-column-span: 3 ;
        -ms-grid-row: 4 ;
        -ms-grid-row-span: 1 ;

        grid-column-start: 1 ;
        grid-column-end: 4 ;
        grid-row-start: 4 ;
        grid-row-end: 5 ;
        
        font-size: 100% ;
    }
    
    #main01 {
        margin: 0 ;
        margin-top: 0.3em ;
    }

}