/* stop the jumping that happens when a scrollbar appears on some pages */
html {overflow-y: scroll;}

        body {background-color:#455899;
margin: 10px; font-family: helvetica, arial, sans-serif;
        text-align: center;}
        
        #wrapper {width: 95%; max-width: 1000px; margin: 10px auto;
        background-color: #ccc;}
        
        header {background-color: #2f3d7a; color: #fff; padding: 0.5% 1%;}

         main {width: 75%; float: right; /* border: 1px blue solid; */
        }
        
        main p, main h3 {text-align: left; padding: 0 2% 1% 2%; line-height: 130%;} 
    
         main ul, main ol {text-align: left; line-height: 130%; padding-right: 2%;}
        
        main a:link, main a:visited {color: #972426;}
        
        main a:hover {color: #2f3d7a; }
        
        aside {width: 22%; float: left; /* border: 1px red solid; */ padding: 1%;}
        
        footer {font-size: .85em; padding:1%; clear: both; }
    
    #rubric {width: 98%; clear: both; margin: 0 auto; background-color: #ddd;}
    
    #left1 {width: 49%; margin: 2px auto; float: left; /* border: red 1px solid; */}
    #right1 {width: 48%; margin: 2px auto; padding: 0 4%; float: left; line-height: 130%; text-align: left;}
#right1 h3 {text-align: center;}
    
table {width: 98%; /* padding: 2%; */ margin: 2% auto; font-size: .9em;}
    td, th {padding: 1%;}
        
aside ul, aside li {margin: 0; padding: 0;}
        
aside nav ul {list-style: none; margin: 10px 0 ; font-family: Helvetica, sans-serif;
    letter-spacing: 1px; 
}

aside nav li {width: 96%; margin:2%; border: 1px solid /* #392205 */ #2f3d7a; background: #DDD;  
}

aside nav li a {display: block; padding: 5px; text-align: center;
    text-decoration: none; font-weight: bold; color: #2f3d7a;
}

aside nav li a:hover {background: #2f3d7a; color: #eee;}
    
    
        
 section  {display: flex; border: /* #972426 */ #2f3d7a 1px solid; flex-flow: row wrap;}
    
article p {text-align: left;  }
    
article h2, article h3 {color: #2f3d7a; /* color: #5d5e62;  text-align: left; */}
    
   
    main article {background-color: /* #b0c3c9 */ #ddd; padding:0.125% 1.0%; margin: 1%;
    flex: 1 25px;} 
    
    main article:nth-of-type(2) {flex:4;}
    
    .wide2    {letter-spacing: 2px; color: red; font-family: serif;}
      
    code {color: blue; font-size: 1.1em;}
    
    
@media screen and (max-width: 768px)
{
    body {margin: 0;} 
    
    #wrapper {width: 98%;}
    
    aside {float: left; 
    width: 97.5%;
    padding: 1%;}
    
    main {float: left;
    width: 97.5%;
    padding: 1%;}
    
  #left1 {width: 99%; margin: 1% auto; float: left;  }
    #right1 {width: 98%; margin: 1% auto; float: left;}
    
}  
        
      @media screen and (max-width: 600px)
{
    nav { }
    
     aside nav li { margin:1% 2%;}
     
    article {margin: 0.5;} 
    }
    
}  
        
        /* adding the flex styles */