/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Feb 27, 2022, 5:51:43 PM
    Author     : dwain
*/
html{
    border: 6px solid maroon;
}
body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
    /*width: 1800px;  /*height: 1050px;*/
    margin:auto;
    margin-top: 2em;
    margin-bottom: 5em;
    background-image: -webkit-linear-gradient(90deg, #30323D 0%, #30323D 30%, #30483D 70%, #065B7A 76%, #001942 100% );   
    background-repeat: no-repeat;
}
header{
    width: 1632px; 
    margin:auto;
}
header table{
    width: 98%; height:4em;
    margin:auto;
}
header table tr{
    font-size: 125%;
    color: cadetblue;
}
main{
    background-image: -webkit-linear-gradient(0deg, #C8C4C6 0%,  #EFEFE8 0.8%, #B0AFAC 0.9%,  #EFEFE8 1.2%, #C8C4C6 1.8%, #C8C4C6 2%, #EFEFE8 2%, #EFEFE8 2.2%, #B0AFAC 2.5%, #CDCDC0 10%, #D5CDC0 38%,  #BCB5AA 44%, #A49D98 46%, #3C4C55 49.5%, 
                                                    #252020 50%,
                                                    #3C4C55 50.5%, #74716C 54%, #A49D98 58%, #D5CDB8 75%, #D5CDC0 85%, #D5CDC0 92%, #E2DED4 97%, #E2DED4 98%, #74716C 98%, #A49D98 99%,#A49D98 100%); 
    width: 1632px;  /* height: 918px; */
    border: 6px solid #652403;
    margin:auto;
    padding-top:1.5em;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~ aside = Right Hand Leaf  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
table tr td a:link{
    color:#663300;    
}
table tr td a:visited{
    color:#663300;    
}
table tr td a:hover{  /* MUST be coded after link and visited */
     color:coral;
}
table tr td a.current{
    color: firebrick;
}
.tbl_1{
    position:absolute;
    font-weight: bold;
    font-size: 115%;
    width:650px;
    padding:0px;
    margin-left: 95px;
    margin-top: 20px;
}
.tbl_1 td{
    color: #663300;
}
.tbl_2{
    color: #663300;
    position:absolute;
    width: 650px;
    font-size: 115%;
    padding:0px;
    margin-left: 940px;
    margin-top: 20px;
}
table.tbl_2 td{
    min-width:110px;
}
.tbl_2 a{
    color: #663300;
}
table.tbl_2 td{
    min-width:110px;
}
.td_padding_A{
    padding-left: 0em;
}
.td_padding_B{
        padding-left: .5em;
}
.td_padding_C{
        padding-left: 3em;
}
.td_padding_D{
        padding-left: 1em;
}

aside{
    position: absolute;
    margin-left: 900px;
    margin-top: 35px; 
    width: 680px; 
    font-size: 110%;
    color: #663300;
    padding:0px;
    z-index: 3; /* this helps to partly cover the hover-over area of cell 1_2 */
}

aside p{
    width:95%;
    text-align: justify;
}

aside p a:link{
    color:#663300;    
}
aside p a:visited{
    color:#663300;    
}
aside p a:hover{  /* MUST be coded after link and visited */
     color:coral;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~ section = left hand leaf  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
section{
    border: solid #CBCAC7 12px;
    background: none/*#A49D98;*/;
}
/* ~~~~~~~~~~~~~~~~  frames  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
section.top_1_1{        /* top */
    position:absolute;
    margin-top:50px;
    margin-left:90px;
    width:308px; height:378px;
}
section.top_1_2{        /* top */
    position:absolute;
    margin-top:50px;
    margin-left:410px;
    width:308px; height:378px;
}
section.bottom_2_1{        /* bottom left*/
    position:absolute;
    margin-top:440px;
    margin-left:90px;
    width:308px; height:378px;
}
section.bottom_2_2{        /* bottom right*/
    position:absolute;
    margin-top:440px;
    margin-left:410px;
    width:308px; height:378px;
}

/* ~~~~~~~~~~~~~~~~  The static_graphics, LEVEL 1  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#hover_mouse_for_popup_1_1 ul{
    list-style-type: none;  /* no bullets */
    position: relative;     /* relative, so that sub lists(ul) can be positioned */
    /*border: solid green;*/
    width: 308px; height:378px;
    padding: 0px; margin:0px;
}
#hover_mouse_for_popup_1_2 ul{
    list-style-type: none;  /* no bullets */
    position: relative;         /*border: solid green;*/
    width: 308px; height:378px;
    padding: 0px; margin:0px;
}
#hover_mouse_for_popup_2_1 ul{
    list-style-type: none;  /* no bullets */
    position: relative; 
    /*border: solid green;*/
    width:308px; height:378px;
    padding: 0px; margin:0px;
}
#hover_mouse_for_popup_2_2 ul{
    list-style-type: none;  /* no bullets */
    position: relative; 
    /*border: solid green;*/
    width:308px; height:378px;
    padding: 0px; margin:0px;
}
/* ~~~~~~~~~~~~~~~~  popup cell, LEVEL 2  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#hover_mouse_for_popup_1_1 ul ul {
    display:block; 
    opacity: 0.0;         /* the satic graphic is displayed in the first, outer-most ul element, popup is turned off by way of opacity */
    position:absolute;
    top:0%;
    left:0%;
    
    transition: 2s opacity; transition-delay: 0.6s; 
        /* various browser patches below  */ 
    -webkit-transition: 2s opacity; -webkit-transition-delay: 0.6s;  /* transition starts after this amount of time */
    -moz-transition: 2s opacity; -moz-transition-delay: 0.6s; 
    -ms-transition: 2s opacity; -ms-transition-delay: 0.6s;        
    -o-transition: 2s opacity; -o-transition-delay: 0.6s;    
}
#hover_mouse_for_popup_1_2 ul ul {
    display:block; 
    opacity: 0.0;         /* the satic graphic is displayed in the first, outer-most ul element, popup is turned off by way of opacity */
    position:absolute;
    top:0%;
    left:0%;
    
    transition: 2s opacity; transition-delay: 0.6s;
        /* various browser patches below  */ 
    -webkit-transition: 2s opacity; -webkit-transition-delay: 0.6s;  /* transition starts after this amount of time */
    -moz-transition: 2s opacity; -moz-transition-delay: 0.6s; 
    -ms-transition: 2s opacity; -ms-transition-delay: 0.6s;
    -o-transition: 2s opacity; -o-transition-delay: 0.6s; 
}
#hover_mouse_for_popup_2_1 ul ul {
    display:block; 
    opacity: 0.0;         
    position:absolute;
    top:0%;
    left:0%;

    transition: 2s opacity; transition-delay: 0.6s;
        /* various browser patches below  */ 
    -webkit-transition: 2s opacity; -webkit-transition-delay: 0.6s;  
    -moz-transition: 2s opacity; -moz-transition-delay: 0.6s; 
    -ms-transition: 2s opacity; -ms-transition-delay: 0.6s;     
    -o-transition: 2s opacity; -o-transition-delay: 0.6s; 
}
#hover_mouse_for_popup_2_2 ul ul {
    display:block; 
    opacity: 0.0;         
    position:absolute;
    top:0%;
    left:0%;
    
    transition: 2s opacity; transition-delay: 0.6s;
        /* various browser patches below  */ 
    -webkit-transition: 2s opacity; -webkit-transition-delay: 0.6s; 
    -moz-transition: 2s opacity; -moz-transition-delay: 0.6s; 
    -ms-transition: 2s opacity; -ms-transition-delay: 0.6s;    
    -o-transition: 2s opacity; -o-transition-delay: 0.6s; 
}
/* ~~~~~~~~~~~~~~~~~~~~ LEVEL 2 display on hover ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#hover_mouse_for_popup_1_1 ul li:hover > ul{
    opacity: 1.0;     
} 
#hover_mouse_for_popup_1_2 ul li:hover > ul{
    opacity: 1.0;      
    z-index: 1;
} 
#hover_mouse_for_popup_2_1 ul li:hover > ul{
    opacity: 1.0;     
} 
#hover_mouse_for_popup_2_2 ul li:hover > ul{
    opacity: 1.0;     
} 
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
                                        /* Necessary, if cryptic coding here. See Murach book, HTML5 and CSS3 3rd Edition, pp 270-271 */
#hover_mouse_for_popup_1_1 > ul::after{     /* choosing the first ul, the child of the nav element, add an empty string as content after the first ul element */
    content: "";                            /* Why? the display of the drop down menus is  display:none  which screws up the vertical spacing if there is no conent in a ul */
    clear: both;                            /* stop the floating of the li elements */
    display: block;                         /* display that content as a block element */
}    
#hover_mouse_for_popup_2_1 > ul::after{      
    content: "";                            
    clear: both;                            
    display: block;                        
}  
#hover_mouse_for_popup_2_2 > ul::after{      
    content: "";                            
    clear: both;                            
    display: block;                         
} 
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
div{
    width: 1500px;
    position: relative;
    margin-left:65px;
    margin-top: 870px;
 /*   border: solid lawngreen 2px; */
}
div a.a_left{
    opacity: .7;
}
div a.a_left:hover{
    clear:both; 
    opacity:1;
} 
div a.a_right{
    opacity: .7;
}
div a.a_right:hover{
    clear:both; 
    opacity:1;
} 
div table{
    width: 100%;
}
div td{
    width:50%;
}
article{
    display: block;
    width:320px;
    height:710px;
    margin: 0px;
    padding: 0px;
}
article p{
    width:300px;
    margin-left:0px;
    padding-bottom: .1em;
    text-align: left;
    font-size: 110%;
    font-weight: 600;
}
article.art_left{
    margin-top:0px;
    padding-right: .5em;
    margin-left: 20px;
}
article.art_right{
    margin-top:-724px;
    margin-left: 350px;
}
h3{
    margin-top:2em;
    margin-bottom: 4px;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  XXX  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */