* { box-sizing: border-box; }
* { margin: 0px; padding: 0px; }
body { font-family: Verdana, Arial, sans-serif;
       }
header { height: 50vh;
         background-image: url(images/headerimg.jpg);
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover; }
header a { text-decoration: none; }

h1 { padding-top: 45px;
     padding: 45px 30px 10px;
     color: #223a70;
     font-size: 3em;  }
h1 a:visited { color: #223a70 }
h1 a:link { color:  #223a70 }
h1 a:hover { color: cornflowerblue; }

nav { text-align:center;
      background-color: #bbbcde;
      font-weight: bold;
      font-size: 1.2em; 
      font-family:　Arial, Verdana;
      position: relative;
      padding:3px;
      }

nav ul { list-style-type: none;
          }

nav ul ul { position: absolute;
            background-color: #bbbcde;
            display: none;
            text-align: left;
           }
nav ul ul li { border: none;
               display: block;
               width: auto;
               padding-left: 0em;
                }
nav li:hover ul { display: block; }          
nav li{ display: inline-block;
        padding-right: 25px;}

nav a { text-decoration: none; 
        padding-right: 15px;
        padding-left: 2em;
        display: inline-block;}   


nav a:visited { color: #223a70; }
nav a:link { color: #223a70; }
nav a:hover {  
               color: cornflowerblue; }


h2 { font-family:Verdana, Arial, sans-serif;
     font-size: 2em;
     color: #5654a2;
     padding-bottom: 20px;}
main { 
      padding-left: 40px;
       padding-top: 20px;
       padding-bottom: 20px; 
       color: #4d5aaf;
       font-size: 1em;}
main p { width: 90%;
         line-height: 150%;
       }  
main a {  text-color: darkred;
        text-decoration: none; } 
main a:visited { color:  #223a70; }
main a:hover { color: cornflowerblue; }
main a:link { color: #red; }
aside { float: right;
        text-align: right;
        width: 10%; 
        padding-right: 3px;}
aside a {display: block;
         text-decoration: none;} 
aside ul { list-style-type: none; }
#sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;  } 
#sashie { float: right;
          padding-right: 110px;
        }

footer { background-color:#bbbcde; 
         text-align: center;
         font-size: 1em;
         padding-left: 15px;
         padding-bottom: 10px;
         margin-bottom: 0;
         color: darkblue; }
footer a{ text-decoration: none; }  
table { margin: auto; 
        width: 600px;
        border-spacing: 0;
        padding-left: 40px; } 
td, th { padding: 0.5em;
         color:  #2a4073;
         border-style: none;
         font-family: sans-serif;}
tr:nth-of-type(odd) {background-color: #a59aca; 
                     color: #2a4073;}
tr:nth-of-type(even) {background-color: #bbbcde;
                     color: #2a4073;} 
caption { font-family:  sans-serif;
          font-weight: bold;
          padding-left: 40px;
          font-size: 1em;
          padding-bottom: 0.5em;
          color: #2a4073;
         text-align: left;}   
form {  padding: 10px; 
        color: darkblue;}
label { float: left;
        width: 120px;
        clear: left;
        text-align: right;
        padding-right: 10px;
        margin-top: 10px; }   
input, textarea { margin-top: 10px;
                  display: block;
                  }
#mycheckbox { display: inline; }
#mysubmit { margin-left: 120px; 
            font-size: 1em;
            color: #5654a2;
            font-weight: bold;
            background-color:#bbbcde;
            font-family: Verdana, Arial, sans-serif;}
figure { text-align: center; }
figcaption { color: #9079ad; font-size: .8em;
             padding-top: 0; }

.row { display: flex;
       flex-wrap: wrap;
       padding:  14px; }
.column { flex: 33%;
         max-width: 33%;
         padding: 17px; }

.column img { padding: 20px;
             padding-bottom: 0;
             margin-top: 17px;
             vertical-align: middle;
             width: 100%; }
.column a { border-style: none;
            text-decoration: none; }


@media only screen and (max-width: 1024px) {
    body { margin: 0;
          background-image: none; }
    nav { float: none; width: auto;
         padding-top: 0;
         font-size: 1.3em; 
         text-align: center;

         }
    nav li { display: inline-block; }

    nav a { padding: 1em; width: 10em; 
            font-weight: bold; 
            border-style: none;
            display: inline-block; 
           }

    main { margin: 0; font-size: 90%; } 
       #sashie { display: none; }  
    .column { flex: 50%;
              max-width: 50%; }       

           }
@media only screen and (max-width: 800px) {
    header { background-image: url(images/headermobile.jpg); height: 50vh; }
    h1 { color: white; font-size: 2em; padding-left: 0; padding-top: 20px; }
    h1 a:visited { color: white }
    h1 a:link { color: white }
    h1 a:hover { color: #bbbcde; }
    h2 { width:100%;
        padding-top: 0px; }
    nav { margin: 0; 
          padding-bottom: 0;}
    nav a { display: block; 
            width: auto; 
            padding: 0.2em;
            border-bottom: 1px solid white;    
          }
    nav a:hover {  background-color: #bbc8e6;
               }      
    nav li { display: block;
             padding-right: 0; }
    nav ul ul { width: 100%; 
                text-align: center;}         
    nav ul ul li { border: none;
               display: block;
               width:100%;
               padding:0;
               background-color: #bbc8e6;}

    main { padding-top: 1px; 
           font-size: 110%;
           width: 100%;
            padding:0;
            margin: 0;}

    #sashie { display: none; }   
    table { padding-left: 10px; }
    body {width: 100%;}
    figcaption {padding-bottom: 1em;}
    .row { padding: 0;
           margin: 0;
           width: 100%; }
    .column { flex: 100%;
              max-width: 100%;
              padding: 0;
              margin: 0;
               }
    .column img { padding: 0px;
        padding-top: 1em;
                   margin: 0px;
                   width: 100%;
                }
    main img { width: 100%; }

}