/* CSS Stylesheet for Dramatic Bronzes Top Menu Mostly - by #DesignerTJP  */

* {
    
    margin:0;
    padding:0;
}

html {
   }

body {
    
    position: relative;
    margin-left:auto;
    margin-right: auto;
    width:98%;
    min-width: 200px;
    max-width: 99%;
   
  background-repeat:repeat; 
}

/*  You know you never did style the div tag over-all */

div {
    
    position:relative;
    margin-left: auto;
    margin-right: auto;
    min-width: 200px;
    width:98%;
    max-width:99%;
    border-style: solid;
    border-color:none;
    border-width:0;
    padding:0;
    
}


/* Next we better style the ul tag just in case */

ul {
position:relative;
    margin-left: auto;
     margin-right:auto; 
    width:98%;
    min-width: 200px;
max-width:99%;
}

/* Next we better style the Li tag just in case */

li {
    
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width:98%;
    min-width: 200px;
max-width:99%;
}

/* This style selector changes the immediate new fangled button boxes including the big solo home button on the far left  */
button {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    background-color:darkgoldenrod;
    font-size:14px;
    width:120px;
    min-width: 70px;
        max-width:99%ß;
    height:24px;
    padding:2px;
    
}

button.home  {
    position:absolute;
    margin-top: 2px;
    margin-left:auto;
    margin-right: auto;
    margin-bottom: 2px;
    background-color:}

  button.aboutartist  {
    position:relative;
    margin-top: 2px;
    margin-left:auto;
    margin-right: auto;
    margin-bottom: 0px;
      height:3vh;
    text-align:center;
    width:182px;
     
    
}
/* Your Chrome Developer Inspection Window tries to help you create this closed up specialized div tag  */


.dropdown {
    
    height:4vh;
    position: relative;
    margin-left:auto;
    margin-right:auto;
    font-family: "New Times", serif;
    display:flex;
    flex-direction: row;
    justify-content:space-between;
    align-items:center;
    min-width:100px;
    width:68%;
    max-width:99%;
    
  
    /* the Z thingy below pulled my dropdown menu up and over my big table below it */
    z-index: 9;
   
}

/* The style selector below handles the four boxes just to the right of the solo Home Box  */
.home, .gallery, .aboutartist, .guestbook, .contact {
    
    position:relative;
    margin-left:auto;
     margin-right:auto;
   
    padding:0px;
    min-width:50px;
    width:159px;
    background-color:;
    text-align:center;
    
}

.gallery ul, .aboutartist ul, .guestbook ul, .contact ul {
    
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    background-color:aliceblue;
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    align-items:center;
   text-align:center;
    min-width:50px;
    width:120px;
    height:80px;
    list-style:none;
    margin:0px;
    font-size: 13px;
    border-radius:7px;
    visibility:hidden;
   opacity:0;
    pointer-events:none;
    transform: translateY(10px);
    transition-duration: all 0s ease;
    z-index: 226;
   
}

.gallery li, .aboutartist li, .guestbook li, .contact li {
    
    position:relative;
    margin-left: auto;
    margin-right: auto;
    background-color:aliceblue;
    padding:0;
     justify-content:space-between;
    min-width:50px;
    width:140px;
    height:120px;
    display:flex;
    justify-content: center;
    align-items:center;
    min-width: 120px;
    border-radius:7px;
    
    
}


.gallery li:hover, .aboutartist li:hover, .guestbook li:hover, .contact li:hover {
    
    background-color:darkorange;
}



.gallery a, .aboutartist a, .guestbook a, .contact a {
    
    text-decoration: none;
    color:black;
}

.dropdown, .home {
    position:relative;
    margin-left:10px;
     margin-right:auto;
background:none;
    color:black;
    border: 0;
    font-size:20px;
    text-decoration:none;
    cursor:pointer;
    
    
}

.dropdown {
    position:relative;
    margin:auto;
    width:98%;
    min-width:200px;
    max-width:99%;
    background-image: url('https://www.dramaticbronzes.com/images/gallopingdivider.gif'); 
    background-repeat:repeat-x;
    background-size:99% 99%;
    background-position:center top; 
    object-fit:contain;
    background-color:darkgoldenrod;
   border-style:solid;
    border-color:red;
    border-width:8px;
    border-radius:12px;
    padding:2px;
    opacity:88%;
    z-index:1;
    
}

.dropdown:hover, .home:hover {
    
    color:darkcyan;
}
/*  This style element below really seems to focus on the About The Artist Box Width problems  */
.aboutartist {
    position:relative;
    text-align:center;
    min-width:30px;
    width: 169px;
    border-radius:3px;
}

.gallery:focus-within > ul, .aboutartist:focus-within > ul, .guestbook:focus-within > ul, .contact:focus-within > ul {
  
    
    position:absolute;
    margin-left:4;
    margin-right:4;
    min-width: 50px;
    width:100px;
    visibility:visible;
  opacity:1;
    pointer-events:all;
    transform: translateX(0px);
    transform: translateY(10px);
    z-index:238;
}


/* .pony-position {
    
} */

.want-ad-zone {
    position:relative;
    margin-left:8;
    margin-right:auto; 
    min-width:200px;
    width:98%; max-width:99%;
    text-align:center;
    background-image: url('https://www.dramaticbronzes.com/images/GP_wantadpaper_short_a_01g.gif'); 
    background-repeat: no-repeat;
    background-size:870px 100%;
    background-position:center top; 
    object-fit:contain;
    z-index:0;
    }