*         { box-sizing: border-box; }

body      { background-image: url(ATASback1.jpg); 
            background-color: #330066; }
h1,h2,h3,h4,h5,h6 
          { color: #ff00ff; }
h1,h2     { font: 1.4em serif; }
h3,h4,h5,h6 
          { font: 1.3em serif; }
.emph     { color: #ff00ff; }
.notes    { font: 0.7em serif; }
.red      { color: #cc0033; }
.mid      { text-align: center; }
.sec      { margin-top: 50px; }
p         { font: 1.2em serif; 
            color: #663399; }

ul        { font: 1.1em serif; color: #663399; }

.main     { border-style: none; 
            padding: 2em; 
            background: #ccccff;
            margin: 5% 10%; }
hr        { border: 2px inset #ccccff;
            width: 75%; }
img       { max-width: 100%; }
a:link    { color: #660099; }
a:visited { color: #660099; }
a:active  { color: #660099; }

/* navigation bar */
.hdr ul   { list-style-type: none;                       /* the menu */
            margin: 0; 
            padding: 0; 
            min-height: 40px; }
.hdr li   { float: left;                                 /* menu items */ 
            color: white; 
            padding: 10px;
            background-color: #8e9cfd; }                 /* blue */
.btn, li a                                               /* .btn for non-links */
          { display: inline-block;
            color: #660099; 
            text-decoration: none; }
li a:hover, .drop:hover, .btn:hover                      /* mouse over menus */
          { background-color: #ff8ce9; }                 /* pink */
.drop     { position: relative;                          /* drop-down within menu */
            display: inline-block; 
            cursor: pointer; }
.drcn     { display: none;                               /* = drop-down content */
            position: absolute;
            z-index: 1;
            background-color: #ddddff;
            min-width: 250px;
            margin-top: 5px;
            margin-left: -10px; }
.drcn a   { color: #1f004d;                              /* links within drcn */
            display: block;
            padding: 10px; }
.drcn a:hover                                            /* mouse over drcn */
          { background-color: #ff8ce9;
            color: white; }
.drop:hover .drcn                                        /* make it visible */
          { display: block; }