/*
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: 1632px;  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;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

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;
}
.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;
}
.tbl_2 a{
    color: #663300;
}
table tr td a.current{
    color: firebrick;
}
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 = Right Hand Leaf  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
aside{
    position: absolute;
    margin-left: 900px;
    margin-top: 35px; 
    width: 630px;   
    font-size: 110%;
    color: #663300;
    padding:0px;
    z-index: 2; height:800px;  /* this partly covers up the hover-over on cell 3_2 */
    /* border: solid lawngreen 3px; */
}


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 six_up pics ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
section{
    border: solid #CBCAC7 12px;
    background: none/*#A49D98;*/;
}
/* ~~~~~~~~~~~~~~~~  frames  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
section.top_1_1{        /* top */
    position:absolute;
    margin-top:60px;
    margin-left:90px;
    width:308px; height:248px;
}
section.top_1_2{        /* top */
    position:absolute;
    margin-top:60px;
    margin-left:410px;
    width:308px; height:248px;
}
section.middle_2_1{        /* middle left*/
    position:absolute;
    margin-top:320px;
    margin-left:90px;
    width:308px; height:248px;
}
section.middle_2_2{        /* middle right*/
    position:absolute;
    margin-top:320px;
    margin-left:410px;
    width:308px; height:248px;
}
section.bottom_3_1{        /* bottom left*/
    position:absolute;
    margin-top:580px;
    margin-left:90px;
    width:308px; height:248px;
}
section.bottom_3_2{        /* bottom right*/
    position:absolute;
    margin-top:580px;
    margin-left:410px;
    width:308px; height:248px;  
}
/* ~~~~~~~~~~~~~~~~  The static_graphics, LEVEL 1  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#static_to_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:248px;
    padding: 0px; margin:0px;
}
#static_to_popup_1_2 ul{
    list-style-type: none;  /* no bullets */
    position: relative;         /*border: solid green;*/
    width: 308px; height:248px;
    padding: 0px; margin:0px;
}
/* cell 2_1 is the fairy animation, coded at bottom of this file */
#static_to_popup_2_2 ul{
    list-style-type: none;  /* no bullets */
    position: relative; 
    /*border: solid green;*/
    width:308px; height:248px;
    padding: 0px; margin:0px;
}
#static_to_popup_3_1 ul{
    list-style-type: none;  /* no bullets */
    position: relative; 
    /*border: solid green;*/
    width:308px; height:248px;
    padding: 0px; margin:0px;
}
#static_to_popup_3_2 ul{
    list-style-type: none;  /* no bullets */
    position: relative; 
    /*border: solid green;*/
    width:308px; height:248px;
    padding: 0px; margin:0px;
}
/* ~~~~~~~~~~~~~~~~  popup cell, LEVEL 2  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#static_to_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; 
}
#static_to_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; 
    -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; 
}
#static_to_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; 
}
#static_to_popup_3_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; 
}
#static_to_popup_3_2 ul ul {    /* ul ul   refers to the pop-up image level in the unordered list */
    display:block; 
    opacity: 0.0;         
    position:absolute;
    top:0%;
    left:0%;    
    
    transition: 0.5s opacity;  transition-delay: .5s;
        /* various browser patches below  */ 
    -webkit-transition: 0.5s opacity; -webkit-transition-delay: .5s;  /* <--- its the -webkit call that effects MS Edge as I develop this code */
    -moz-transition: 0.5s opacity; -moz-transition-delay: .5s; 
    -ms-transition: 0.5s opacity; -ms-transition-delay: .5s;    
    -o-transition: 0.5s opacity; -o-transition-delay: .5s;  
}
/* ~~~~~~~~~~~~~~~~~~~~ LEVEL 2 display on hover ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#static_to_popup_1_1 ul li:hover > ul{
    opacity: 1.0;        /* fully transparent = 0.0,   fully opaque = 1.0 */    
} 
#static_to_popup_1_2 ul li:hover > ul{
    opacity: 1.0;        /* fully transparent = 0.0,   fully opaque = 1.0 */    
} 
#static_to_popup_2_2 ul li:hover > ul{
    opacity: 1.0;        /* fully transparent = 0.0,   fully opaque = 1.0 */     
} 
#static_to_popup_3_1 ul li:hover > ul{
    opacity: 1.0;        /* fully transparent = 0.0,   fully opaque = 1.0 */     
} 
#static_to_popup_3_2 ul li:hover > ul{
    opacity: 1.0;
} 
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
                                        /* Necessary, if cryptic coding here. See Murach book, HTML5 and CSS3 3rd Edition, pp 270-271 */
#static_to_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 */
}    
#static_to_popup_1_2 > ul::after{    
    content: "";                           
    clear: both;                            
    display: block;                         
}   
#static_to_popup_2_2 > ul::after{     
    content: "";                            
    clear: both;                           
    display: block;                         
} 
#static_to_popup_3_1 > ul::after{    
    content: "";                           
    clear: both;                            
    display: block;                         
}  
#static_to_popup_3_2 > ul::after{     
    content: "";                            
    clear: both;                           
    display: block;
    z-index: 0;
} 
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
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:652px;
    margin: 0px;
    padding: 0px;
}
article p{
    width:650px;
    margin-left:0px;
    padding-bottom: .1em;
    text-align: left;
    font-weight:600;
}
article p a{
    text-decoration: none;
    color:#663300;
}
h3{
    margin-top:2em;
    margin-bottom: 4px;
}

/* ~~~~~~~~~~~~~~~~~~    position 2_1, fairy animation  ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~   the starting, static graphic    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#hover_for_animation_2_1 ul{
    list-style-type: none;  /* no bullets */
    position: relative; 
    /*border: solid green;*/
    width:308px; height:248px;
    padding: 0px; margin:0px;
    z-index: 1;
}
/* ~~~~~~~~~~~~~~~~  popup cell, LEVEL 2  ~~~~~~ fairy animation ~~~~~ */
#hover_for_animation_2_1 ul ul{
    display:block; 
    opacity: 0.0;         
    position:absolute;
    top:0%;
    left:0%;
    
    transition: .15s opacity; transition-delay: 0s;   /*    0s + 0*(0.15s)    */
       /* browser patches below */
    -webkit-transition: .15s opacity; -webkit-transition-delay: 0s; 
    -moz-transition: .15s opacity;  -moz-transition-delay: 0s; 
    -ms-transition: .15s opacity; -ms-transition-delay: 0s; 
    -o-transition: .15s opacity; -o-transition-delay: 0s; 
}
#hover_for_animation_2_1 ul li:hover > ul{
    opacity: 1.0;        /* fully transparent = 0.0,   fully opaque = 1.0 */
} 
/* ~~~~~~~~~~~~~~~~  popup cell, LEVEL 3  ~~~~~~~~~ fairy animation ~~~~~ */
#hover_for_animation_2_1 ul ul ul{
    display:block; 
    opacity: 0.0;         
    position:absolute;
    top:0%;
    left:0%;
    /* z-index: 3; */
    
    transition: .15s opacity; transition-delay: .15s;  /* 0s + 1(0.15s) */  /*<-- note the transition-delay is incremented + 0.15 seconds with each cell level 
         /* browser patches below */                   
    -webkit-transition: .15s opacity; -webkit-transition-delay: .15s; 
    -moz-transition: .15s opacity;  -moz-transition-delay: .15s; 
    -ms-transition: .15s opacity; -ms-transition-delay: .15s; 
    -o-transition: .15s opacity; -o-transition-delay: .15s;  
}    
#hover_for_animation_2_1 ul ul li:hover > ul{
    opacity: 1.0;        /* fully transparent = 0.0,   fully opaque = 1.0 */ 
} 
/* ~~~~~~~~~~~~~~~~  popup cell, LEVEL 4  ~~~~~~~ fairy animation ~~~~~~ */
#hover_for_animation_2_1 ul ul ul ul{
    display:block; 
    opacity: 0.0;         
    position:absolute;
    top:0%;
    left:0%;
    /* z-index: 4; */
    
    transition: .15s opacity; transition-delay: .3s;    /* 0s + 2(0.15s) */
         /* browser patches below */
    -webkit-transition: .15s opacity; -webkit-transition-delay: .3s; 
    -moz-transition: .15s opacity;  -moz-transition-delay: .3s; 
    -ms-transition: .15s opacity; -ms-transition-delay: .3s; 
    -o-transition: .15s opacity; -o-transition-delay: .3s; 
}
#hover_for_animation_2_1 ul ul ul li:hover > ul{
    opacity: 1.0;        /* fully transparent = 0.0,   fully opaque = 1.0 */ 
} 
/* ~~~~~~~~~~~~~~~~  popup cell, LEVEL 5  ~~~~~~~ fairy animation ~~~~~~ */
#hover_for_animation_2_1 ul ul ul ul ul{
    display:block; 
    opacity: 0.0;         
    position:absolute;
    top:0%;
    left:0%;
    /* z-index: 5; */
    
    transition: .15s opacity; transition-delay: .45s;    /* 0s + 3(0.15s) */
         /* browser patches below */
    -webkit-transition: .15s opacity; -webkit-transition-delay: .45s; 
    -moz-transition: .15s opacity;  -moz-transition-delay: .45s; 
    -ms-transition: .15s opacity; -ms-transition-delay: .45s; 
    -o-transition: .15s opacity; -o-transition-delay: .45s;  
}
#hover_for_animation_2_1 ul ul ul ul li:hover > ul{
    opacity: 1.0;        /* fully transparent = 0.0,   fully opaque = 1.0 */ 
} 
/* ~~~~~~~~~~~~~~~~  popup cell, LEVEL 6  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#hover_for_animation_2_1 ul ul ul ul ul ul{
    display:block; 
    opacity: 0.0;         
    position:absolute;
    top:0%;
    left:0%;
    /* z-index: 6; */
    
    transition: .15s opacity; transition-delay: .6s;     /* 0s + 4(0.15s) */
         /* browser patches below */
    -webkit-transition: .15s opacity; -webkit-transition-delay: .6s; 
    -moz-transition: .15s opacity;  -moz-transition-delay: .6s; 
    -ms-transition: .15s opacity; -ms-transition-delay: .6s; 
    -o-transition: .15s opacity; -o-transition-delay: .6s;  
}
#hover_for_animation_2_1 ul ul ul ul ul li:hover > ul{
    opacity: 1.0;        /* fully transparent = 0.0,   fully opaque = 1.0 */ 
} 
/* ~~~~~~~~~~~~~~~~  popup cell, LEVEL 7  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#hover_for_animation_2_1 ul ul ul ul ul ul ul{
    display:block; 
    opacity: 0.0;         
    position:absolute;
    top:0%;
    left:0%;
    /* z-index: 7; */
    
    transition: .15s opacity; transition-delay: .75s;    /* 0s + 5(0.15s) */
         /* browser patches below */
    -webkit-transition: .15s opacity; -webkit-transition-delay: .75s; 
    -moz-transition: .15s opacity;  -moz-transition-delay: .75s; 
    -ms-transition: .15s opacity; -ms-transition-delay: .75s; 
    -o-transition: .15s opacity; -o-transition-delay: .75s;  
}
#hover_for_animation_2_1 ul ul ul ul ul ul li:hover > ul{
    opacity: 1.0;        /* fully transparent = 0.0,   fully opaque = 1.0 */
} 
/* ~~~~~~~~~~~~~~~~  popup cell, LEVEL 8  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#hover_for_animation_2_1 ul ul ul ul ul ul ul ul{
    display:block; 
    opacity: 0.0;         
    position:absolute;
    top:0%;
    left:0%;
    /* z-index: 8; */
    
    transition: .15s opacity; transition-delay: .9s;     /* 0s + 6(0.15s) */
         /* browser patches below */
    -webkit-transition: .15s opacity; -webkit-transition-delay: .9s; 
    -moz-transition: .15s opacity;  -moz-transition-delay: .9s; 
    -ms-transition: .15s opacity; -ms-transition-delay: .9s; 
    -o-transition: .15s opacity; -o-transition-delay: .9s;  
}
#hover_for_animation_2_1 ul ul ul ul ul ul ul li:hover > ul{
    opacity: 1.0;        /* fully transparent = 0.0,   fully opaque = 1.0 */
} 
/* ~~~~~~~~~~~~~~~~  popup cell, LEVEL 9  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#hover_for_animation_2_1 ul ul ul ul ul ul ul ul ul{
    display:block; 
    opacity: 0.0;         
    position:absolute;
    top:0%;
    left:0%;
    /* z-index: 9; */
    
    transition: .15s opacity; transition-delay: 1.05s;   /* 0s + 7(0.15s) */
         /* browser patches below */
    -webkit-transition: .15s opacity; -webkit-transition-delay: 1.05s; 
    -moz-transition: .15s opacity;  -moz-transition-delay: 1.05s; 
    -ms-transition: .15s opacity; -ms-transition-delay: 1.05s; 
    -o-transition: .15s opacity; -o-transition-delay: 1.05s;  
}

#hover_for_animation_2_1 ul ul ul ul ul ul ul ul li:hover > ul{
    opacity: 1.0;        /* fully transparent = 0.0,   fully opaque = 1.0 */
} 

#hover_for_animation_2_1 > ul::after{    
    content: "";                           
    clear: both;                            
    display: block;                         
}