/*  main template css  */
* {margin:0;padding:0;}

.show {display:block;}
.hide {display:none;}

header.container {max-width:66%;min-width:500px;margin:0 auto;border-style:solid;border-color:#fff;border-width:0 3px 3px;background-color:rgba(255,255,255,0.5);border-radius:0 0 10px 10px;box-shadow:0 2px 4px rgba(0,0,0,0.6);position:relative;}
header .name {padding:20px 0 0;}
header a {text-decoration:none;color:#000;}
.homelink {font:30px arial;display:block;width:100%;text-align:center;letter-spacing:5px;}

header nav {display:block;width:100%;text-align:center;}
nav li {margin:0 10px 10px;}
nav a {display:inline-table;font:18px arial;padding:2px 0 0 0 !important;border-bottom:3px solid transparent;}
nav a:hover {color:#000;border-bottom-color:#000;}
nav.navbar {border:1px solid transparent;padding:15px 0 5px;}

.navbar ul.extras {list-style:none;margin:0;padding:3px 10px 5px 0;}
.navbar ul.extras li {text-align:left;}
.name a:hover {color:#000 !important;}


#main {margin:20px auto;width:1000px;text-align:center;}

.dropper {position:absolute;top:10px;width:20px;}
.dropper#colors {right:5px;}
.dropper#socials {left:5px;}
.dropdown-menu:hover,
.dropper:hover {cursor:pointer;}


.extras {position:absolute;z-index:3;top:35px;border:1px solid #000;padding:0 10px 0 0;}
.extras.colors {right:0;background-color:#fff;box-shadow:1px 1px 3px rgba(0,0,0,0.3);}
.extras.colors a {display:list-item;list-style:none;padding:2px 0 3px 5px;}
.extras.colors a:hover {color:#f00;background-color:#ccc;}
.extras .colorChange {font:12px arial;}
.extras .colorChange:hover {cursor:pointer;}
.extras {display:none;}

footer {
  clear:both;
  margin:20px 0 0;
  width:100%;
  font:12px arial;
  text-align:center;
  padding:20px 0 10px;
  border-top:1px solid #999;
  background-color:rgba(255,255,255,0.3);
}


/* homepage */
div.boxes {display:flex;flex-wrap:wrap;gap:20px;justify-content:center;}
div.boxes>div {width:350px;background-color:rgba(255,255,255,0.3);border:3px solid #000;padding:20px;}
.no_pad_lr {padding-left:0 !important;padding-right:0 !important;}
div.boxes div h2 {text-align:center;font-family:'Times New Roman', serif;font-size:34px;line-height:40px;}
div.boxes>div>ul {
    list-style:none;margin:0;padding:0;
    display:flex;flex-wrap:wrap;gap:10px;
}
div.boxes>div>ul>li img {border:2px solid transparent;opacity:0.7;}
div.boxes>div>ul>li img:hover {border-color:#fff;opacity:1;}


/*center content*/
#MainBox {width:800px;border:3px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,0.6);background-color:rgba(255,255,255,0.4);margin:30px auto;text-align:left;font:14px arial;padding:10px 20px;}
#MainBox a {color:#333;margin:auto;}
#MainBox a:hover {color:#999;}
#MainBox h2 {margin:15px 0 20px 20px;font-size:30px;color:#333;padding:0 0 10px 10px;border-bottom:1px solid #666;}

.biggen:hover {cursor:pointer;}
#bigImg {z-index:1100;position:fixed;padding:20px;background-color:#fff;font:12px arial;text-align:center;}

/* link page */
.LinkBoxes {
  display:flex;
  flex-wrap:wrap;
  gap:30px;
}
.LinkBox {vertical-align:top;}
.LinkBox p {font:bold 18px arial;}
.LinkBox ul {list-style:none;}
.LinkBox li {margin:0 0 15px 0;padding:0 0 0 15px;font-size:16px;}
.LinkBox li::before {
    content:"";display:inline-block;width:16px;height:16px;
    margin:5px 5px 0 0;padding:0;
    background-image:url("/images/star-solid.svg");
    background-repeat:no-repeat;
    
}
table.bizSites {border-top:2px solid #333;}
table.bizSites td {padding:15px 0 0;}

#overlay {display:none;z-index:1000;background:#000;opacity:0.5;position:fixed;top:0;overflow:hidden;}



@media screen and (max-width:1024px) {
  #main, #MainBox {width:100%;}
}

@media screen and (max-width:760px) {
    div.boxes {flex-direction:column;}
    div.boxes>div {width:95%;margin:0 auto;padding:20px 0 0;}

    .dropper {position:relative;top:0;}
    header.container {padding-bottom:35px;}
    a.nav-link {text-align:left;}
    button.navbar-toggler {position: absolute;top:10px;right:0;}

    .extras {position:relative;top:0;background-color:transparent !important;border:0 none !important;}
    .colorChange#red:hover {color:white;background-color:red;}
    .colorChange#ltblue:hover {color:white;background-color:lightblue;}
    .colorChange#ltgreen:hover {color:white;background-color:lightgreen;}
    .colorChange#dkgray:hover {color:white;background-color:darkgray;}
}

@media screen and (max-width:400px) {
  header {width:100%;border-width:0 0 3px;border-radius:0;}
  #main, #MainBox {width:100%;}
}