body { /* Page base control */
   margin               : 0px;
   padding              : 0px;
   background-color     : #1a1a1a; /* Background Color */
   color                : #c3dcba; /* Light Green, clear text */
   font-family          : calibri, verdana, arial, comic sans;
   min-width            : 760px;
}
h1 {
   font-size            : 25pt;
   color                : #c3dcba; /* Light Green, clear text */
}
a img {
   border               : 0;
}
a.tip {
   text-decoration      : none;
   color                : #1e90ff; /* Blue link */
}
a.tip:hover {
   position             : relative;
   color                : #ff6f61; /* Coral red on mouseover */
}
a.tip span {
   display              : none;
}
a.tip:hover span { /* frame with the name of the country when you hover the mouse over the flags */
   background           : #2c2c2c; /* Dark background */
   opacity              : 0.8;
   border               : none;
   border-radius        : 5px 5px 5px 5px;
   font-family          : calibri, verdana, arial, comic sans;
   font-size            : 12pt;
   text-decoration      : none;
   white-space          : nowrap;
   color                : #c3dcba; /* Light Green */
   padding              : 6px 6px 6px 6px;
   margin               : 10px;
   display              : block;
   z-index              : 50;
   position             : absolute;
   top                  : 10px;
}
#top {
   height               : 115px;
   background-color     : #1e1e1e; /* Dark background, claro=#7ab88f */
   width                : 100%;
/*   background-image     : url('../img/dvc.jpg'); */
   background-repeat    : no-repeat;
   background-position  : 100%;
   position             : absolute;
   left                 : 0px;
   top                  : 0px;
   min-width            : 760px;
}
#menu {
   margin-top           : 5px;
   height               : 34px;
   float                : left;
}
#menubar { /* Menu Buttons Background Bar */
   height               : 40px;
   width                : 100%;
   display              : flex;
   justify-content      : center;
   text-align           : center;
   position             : absolute;
   left                 : 0px;
   top                  : 115px;
   min-width            : 760px;
   background-image     : linear-gradient(to bottom, #333333 10%, #111111 90%); /* Menu bar gradient */
}
#content {
   width                : 100%;
   position             : absolute;
   left                 : 0px;
   top                  : 175px;
   color                : #c3dcba; /* Light Green */
}
.menulink {
   font-size            : 14pt;
   text-decoration      : none;
   white-space          : nowrap;
   border               : 1px #666666 solid; /* Button border */
   padding-left         : 10px;
   padding-top          : 3px;
   padding-bottom       : 3px;
   padding-right        : 10px;
   margin-left          : 10px;
   background-color     : #3a3a3a; /* Button background, white_theme=#FFFFC6 */
   color                : #c3dcba; /* Light Green */
   transition           : background-color 0.7s, color 0.7s;
}
.menulink:hover { /* Menu buttons on mouseover */
   background-color     : #ffff00; /* Bright yellow when hovering over menu buttons */
   color                : #000000; /* Font color when hovering over buttons */
   font-weight          : bold; /* Bold */
}
.menulinkactive { /* Main menu buttons */
   font-size            : 14pt;
   text-decoration      : none;
   white-space          : nowrap;
   border               : 1px #666666 solid; /* Dark border */
   padding-left         : 10px;
   padding-top          : 3px;
   padding-bottom       : 3px;
   padding-right        : 10px;
   margin-left          : 10px;
   background-color     : #b81414; /* Dark red for active button, white_theme=#87dcfc */
   color                : #c3dcba; /* Light Green */
}
.pl { /* link font color */
   font-size            : 12pt;
   text-decoration      : none;
   color                : #1e90ff; /* Blue link */
}
.pl:hover { /* Action to take when hovering over links */
   color                : #ffff00; /* Yellow text when hovering over links */
}
.listingtable { /* Table text */
   margin-top           : 10px;
   border               : 1px #444444 solid; /* Dark border, white_theme=#C1DAD7 */
   font-size            : 12pt;
   font-weight          : normal; /*  bold */
   background-color     : #2c2c2c; /* Dark background */
   color                : #c3dcba; /* Light Green, clear text */
}
.listingtable th { /* Header text */
   height               : 35px;
   text-align           : center;
   background-color     : #3a3a3a; /* Header background, white_theme=#D5EBF0 */
   color                : #c3dcba; /* Light Green, clear text, this value was not in the white_theme */
   background-image     : linear-gradient(to bottom, #444444 0%, #222222 90%); /* Gradient menus on the entire page */
}
.listingtable td {
   padding-left         : 5px;
   border               : 1px #444444 solid; /* Dark border */
}
.listinglink { /* Reflector name link source in XLX list */
   font-size            : 12pt;
   text-decoration      : none; /* underline */
   color                : #1e90ff; /* Blue links, white_theme=#60A1DE */
}
.listinglink:hover { /* Reflector name link source in XLX list on mouseover */
   color                : #ffff00; /* Yellow on mouseover */
}
.error {
   font-size         : 12pt;
   text-decoration   : none;
   font-weight       : bold;
   color             : #ff6f61; /* Coral red, white_theme=#FF0000 */
   background-color  : #3a3a3a; /* Dark background, white_theme=#FFFFFF */
   width             : 90%;
   padding           : 15px;
   margin            : 5px;
}
.FilterField { /* Search filter input field */
   font-size         : 12pt; /* white_theme=10 */
   font-weight       : bold; /* Bold */
   text-decoration   : none;
   color             : #000000; /* black */
   background-color  : #969696; /* Light background, white_theme=#FFFFFF */
   width             : 150px;
   height            : 20px;
   padding-left      : 5px;
   padding-top       : 3px;
   border            : 1px #000000 solid; /* Black border, white_theme=#60A1DE */
}
.FilterSubmit { /*Button to apply the filter */
   font-size         : 10pt;
   font-weight       : normal; /* Normal */
   text-decoration   : none;
   color             : #c3dcba; /* Light Green, clear text, white_theme=#000000 */
   background-color  : #2c2c2c; /* Dark background, filter button color, white_theme=#FFFFFF */
   height            : 26px;
   width             : 60px;
   padding-left      : 5px;
   padding-top       : 3px;
   border            : 1px #000000 solid; /* Black border, white_theme=#60A1DE solid */
}
.FilterSubmit:hover { /* Action when hovering over the filter button */
   background-color  : #ffff00; /* Yellow on mouseover */
   color             : #000000;
   font-weight       : bold;
}
.smalllink { /* Button to delete the applied filter */
   font-size         : 10pt;
   text-decoration   : none;
   color             : #ff0000; /* Red, white_theme=#0E0789 */
}
.smalllink:hover {
   color             : #ffff00; /* Yellow on mouseover */
}
/* Mobile Settings */
@media (max-width: 760px) {
    body {
        min-width        : 100%;
        font-size        : 12px;
    }
    #top {
        height           : 80px;
        min-width        : 100%;
    }
    #menubar {
        height           : 60px;
        top              : 80px;
        min-width        : 100%;
    }
    #menu {
        float            : none;
        height           : auto;
    }
    #menu td {
        display          : block;
        margin           : 5px 0;
    }
    .menulink, .menulinkactive {
        font-size        : 12pt;
        margin-left      : 0;
        display          : block;
        text-align       : center;
    }
    #content {
        top              : 150px;
    }
    .listingtable {
        font-size        : 10pt;
    }
    .listingtable th, .listingtable td {
        padding          : 4px;
    }
  }