/* TO DO
 *      - Remove duplicate, unnecessary CSS elements
 *      - Move HTML sizing of section.main and details media (images, video) to CSS
 */

/* --------------- Root Definitions ------------------- */
:root   {
          --border-highlighting: 1.5px none #000000;    /* (none/dotted) - turn on/off borders during development */
        }

/* --------------- Website Wide Default --------------- */
*                                       { font-family: Arial, Verdana, Helvetica, sans-serif; color: #000000; }

a                                       { font-family: inherit;
                                          text-decoration: none;
                                        }

a:hover                                 { color: #CC3333;
                                          text-decoration: underline;
                                        }

.page                                   { max-width: 940px;
                                          min-width: 940px;
                                          margin: 10px auto 10px auto;
                                          padding: 20px;
                                          border: var(--border-highlighting);
                                          background-color: #ffffff;
                                        }

body                                    { font-size: 0.85em;
                                          letter-spacing: 0.05em;
                                          background-color: #ffffff;
                                        }

.page_graphic                           { display: block;
                                          margin: auto;
                                          text-align: center;
                                          border-radius: 5px;
                                          max-width:760px;
                                          max-height:150px;
                                          padding: 0px;
                                        }

.page_graphic img                       { height:100px; }

p.page_intro                            { text-align: center;
                                          width: 800px;
                                          margin: 20px auto 20px auto;
                                          letter-spacing: 0.15em;
                                          line-height: 1.5em;
                                        }

p                                       { margin-top: 20px;
                                          margin-bottom: 20px;
                                        }
                                        

p.title                                 { font-size: 1.4em;
                                          text-align: left;
                                          color: #000000;
                                          margin: 0px 0px 0px 0px;
                                          padding: 0px 0px 0px 0px;
                                          background-color: #ffffff;
                                        }

p.title a                               { text-decoration: none; 
                                          cursor: default;
                                        }


/* --------------- Section Defaults --------------- */                                        
section.main                            { float: left;
                                          width: 670px;
                                          border-right: 1px solid #eeeeee;
                                          border: var(--border-highlighting);
                                          display: block;
                                        }

section.main p                          { text-align: left;
                                          line-height: 1.3em;
                                        }

section.main p a                        { text-decoration: underline; }

section.main p.fig_caption              { text-align: center;
                                          margin-top: 1em;
                                          margin-bottom: 2em;
                                        }

section.main p.fig_caption a            { text-decoration: none; }

section.main p.fig_caption a:hover      { text-decoration: underline; }

section.main img.article_graphic        { float: left; 
                                          width: 200px;
                                          margin: 15px 15px 5px 0px;
                                        }

section.main h2                         { text-align: left;
                                          text-decoration: none; 
                                          margin: 15px 0px 0px 0px;
                                        }

section.main h3                         { text-align: left;
                                          text-decoration: none; 
                                        }

section.main ul, ol                     { text-decoration: none; }

section.main li                         { line-height: 1.6em; }

section.main ul a                       { text-decoration: none; }

section.main ol a                       { text-decoration: none; }

section.main ul a:hover                 { text-decoration: underline; }

section.main ol a:hover                 { text-decoration: underline; }

aside                                   { width: 250px;
                                          float: right;
                                          padding: 0px 0px 0px 10px;
                                          border: var(--border-highlighting);
                                          text-align: right;
                                          display: block;
                                        }

aside section h3                        { margin-right: 10px; }

aside section a                         { display: block;
                                          text-decoration: none;
				                          padding: 10px;
                                        }

aside section a:hover                   { background-color: #efefef;
                                          text-decoration: none;
                                          border-radius: 5px;
                                        }

aside section a.spacer                  { display: block;
                                          text-decoration: none;
				                          padding: 20px;
                                        }

aside section a.spacer:hover            { color: #fff;
				                          background-color: #fff;
                                        }

aside h3                                { padding: 0px 0px 0px 0px;
                                          color: #de6581;
                                        }

/* --------------- Collapsible Text --------------- */   
details                                 { border: 1px solid #aaa;
                                          border-radius: 4px;
                                          padding: 0.5em 0.5em 0;
                                          transition: all 0.5s;
                                          margin: 5px 0px 10px 0px;
                                        }

details p                               { margin: 10px 5px 20px 5px; }

summary                                 { font-weight: bold;
                                          color: blue;
                                          font-size: 1.0em;
                                          margin: -0.5em -0.5em 0;
                                          padding: 0.5em;
                                          cursor: pointer;
                                        }

details[open]                           { padding: 0.5em; }

details[open] summary                   { border-bottom: 1px solid #aaa;
                                          margin-bottom: 0.5em;
                                        }

details[open] summary ~ p               { animation: sweep_1 0.5s ease-in-out; }

details[open] summary ~ *               { animation: sweep_2 1.0s ease-in-out; }

@keyframes sweep_1                      { 0%    { opacity: 0; margin-left: -10px; }
                                          100%  { opacity: 1; margin-left: 5px; }
                                        }

@keyframes sweep_2                      { 0%    { opacity: 0; }
                                          100%  { opacity: 1; }
                                        }

/* --------------- Menu Defaults ------------------ */
iframe                                  { border: none; }

.menu                                   { max-width: 940px;         
                                          height: 50px;
                                          text-align: right;
                                          padding: 0px;
                                          margin: auto;
                                          border: var(--border-highlighting);
                                          background-color: #ffffff;
                                        }

a.menu                                  { letter-spacing: 0.10em;
                                          text-decoration: none;
                                          padding: 5px 10px 5px 10px;
                                          border-radius: 5px;
                                        }

a.menu:hover                            { text-decoration: none;
                                          border-radius: 5px;
                                        }


/* --------------- Footer Defaults ---------------- */
.footer                                 { max-width: 940px;         
                                          text-align: right;
                                          padding: 0px;
                                          margin: auto;
                                          border: var(--border-highlighting);
                                          background-color: #ffffff;
                                        }

p.footer                                { text-align: right;
                                          margin: 0px 0px 0px 0px; 
                                          padding: 10px 0px 0px 0px;
                                          background-color: #ffffff;
                                        }

p.footer a                              { color: #000000;
                                          text-decoration: none;
                                        }

p.footer a:hover                        { color: #c0bbbb;
                                          text-decoration: none;
                                        }


/* --------------- Article Page Defaults ---------------- */
.article_head                           { background-color: #fff;
							              border: 1px solid #999;
							              display: block;
                                          width: 650px;
                                          font-family: 'Courier New', monospace;
                                          text-align: left;
							              padding: 10px 10px 10px 10px;
                                        }

.article_head .indent                   { display: inline-block;
                                          padding-left: 12.5em;
                                          text-indent: -12.5em;
							              font-family: inherit;
                                        }

.article_head a                         { font-family: inherit;
                                          text-decoration: none;
                                        }

.article_head a:hover                   { text-decoration: underline;
                                        }

pre code                                { background-color: #f9f9f9;
                                          border-radius: 4px;
							              border: 1px solid #999;
							              display: block;
							              padding: 0px 10px 0px 10px;
                                          margin-top: 10px;
                                          margin-bottom: 10px;
							              text-align: left;
							              font-family: 'Courier New', monospace;
							              white-space: pre-wrap;
							            }


/* --------------- Home Page Article Row Table -------- */
table.atable                            { border-spacing: 0px 10px;
                                          width: inherit;
                                        }

table.atable p                          { text-align: left;
                                          margin: 10px auto 10px auto;
                                          padding-right: 5px;
                                          width: inherit;
                                        }

table.atable p.date                     { font-size: 0.9em;
                                          text-align: right;
                                          font-style: italic;
                                          text-transform: uppercase;
                                          margin: 5px auto 0px auto;
                                          padding: 0px 5px 0px 0px;
                                          width: inherit;
                                        }

table.atable a                          { color: #000000;
                                          text-decoration: none;
                                        }

table.atable img                        { float: left; 
                                          margin: 0 15px 5px 0;
                                          max-width:200px;
                                          max-height:150px;
                                        }

table.atable td                         { color: blue; 
                                          padding: 2px;
                                          border: 1.0px solid #000;
                                          border-radius: 5px;
                                        }

table.atable td:hover                   { border: 1.0px solid blue;
                                          box-shadow: inset 0 0 8px #777777;
                                        }

table.atable section a                  { display: block;
				                          padding: 5px;
                                          border-radius: 5px;
                                        }


/* --------------- Grid Table Formatting --------------- */
table.gtable                            { margin: auto; border-spacing: 10px;}

table.gtable p                          { font-size: 1.0em;
                                          letter-spacing: 0.15em;
                                          line-height: 1.4;
                                          text-align: center;
                                          text-transform: uppercase;
                                          margin: 0px auto 0px auto;
                                          width: 150px;
                                          padding: 5px;
                                        }

table.gtable a                          { color: #000000;
                                          text-transform: uppercase;
                                          text-decoration: none;
                                        }

table.gtable img                        { max-width:150px;
                                          max-height:150px;
                                        }

table.gtable td                         { color: blue; 
                                          padding: 2px;
                                          margin: auto; 
                                          text-align: center;
                                          width: 150px;
                                          height: 200px;
                                          border: 1.0px solid #fff;
                                          border-radius: 10px;
                                        }

table.gtable td:hover                   { border: 1.0px solid blue;
                                          box-shadow: inset 0 0 8px #777777;
                                        }

table.gtable section a                  { display: grid;
                                          grid-template-columns: 150px;
                                          grid-template-rows: 150px 1fr;
                                          place-items: center;
                                          height: 200px;
				                          padding: 10px;
                                          border-radius: 10px;
                                        }


/* --------------- List Table (lt) Formatting --------------- */
table.lt                                { border-spacing: 0px; }

table.lt a                              { text-decoration: none; }

table.lt a:hover                        { text-decoration: underline; }

table.lt th, table.lt td                { padding: 10px 10px 10px 10px;
				                          border-spacing: 0px;
				                          font-size: 0.9em;
				                          margin: 0px;
				                          text-align: left;
				                          background-color: #e0e9f0;
				                          border-top: 1px solid #f1f8fe;
				                          border-bottom: 1px solid #cbd2d8;
				                          border-right: 1px solid #cbd2d8;
                                          text-shadow: 1px 1px 1px #ffffff;}

table.lt tr.head th                     { color: #ffffff;
                                          background-color: #90b4d6;
                                          border-bottom: 2px solid #547ca0;
                                          border-right: 1px solid #749abe;
                                          border-top: 1px solid #90b4d6;
                                          text-align: center;
                                          text-shadow: -1px -1px 1px #666666;
                                          letter-spacing: 0.15em;}

table.lt tr.even td                     { background-color: #e8eff5;}

table.lt tr.head th:first-child         { border-top-left-radius: 5px;}

table.lt tr.head th:last-child          { border-top-right-radius: 5px; }