body { font-family: Arial, sans-serif; }

#main { background-color: royalblue/*(72, 72, 219)*/; color: white; border-radius: 40px; }

#message { padding: 10px; }

div#header { display: inline-block; position: relative; left: 20px; font-size: 20px; }
div#active { display: inline-block; position: relative; left: 40px; }
#topmenubar { line-height: 16px; }
/*h1 {text-align:center;}*/

#activenum { border-radius: 10px; background-color: white; color: black; padding-left: 5px; padding-right: 5px; }

div.results_panel { position: absolute; background-color: white; color: black; border-radius: 10px; padding: 10px; }

div#main_menu { border-radius: 10px; background-color: white; padding: 5px; }

#NEWNAME { background-color: black; color: white; }

.bronze { background-color: goldenrod; color: black; padding: 2px; }
.silver { background-color: gainsboro; color: black; padding: 2px; margin-left: 10px; }
.gold { background-color: gold; color: black; padding: 2px; margin-left: 10px; }

#brownie_grid { display: inline-grid; gap: 0px; padding: 0px;
    grid-template-areas:
        "bname bname bname . . . . ."
        "moved bsg bsg . . . . ."
        "mtheme mtheme . . . . . ."
        "mtheme mtheme themeawarded uma uma uma uma uma"
        ". badges badge badge badge badge badge badge"
        ". stheme1 stheme1 . . . bonus1 bonus1"
        ". . s1a1 s1a1 s1a1 s1a1 s1b1 s1b1"
        ". . s1a2 s1a2 s1a2 s1a2 s1b2 s1b2"
        ". . s1a3 s1a3 s1a3 s1a3 s1b3 s1b3"
        ". . s1a4 s1a4 s1a4 s1a4 s1b4 s1b4"
        ". . s1a5 s1a5 s1a5 s1a5 s1b5 s1b5"
        ". stheme2 stheme2 . . . bonus2 bonus2"
        ". . s2a1 s2a1 s2a1 s2a1 s2b1 s2b1"
        ". . s2a2 s2a2 s2a2 s2a2 s2b2 s2b2"
        ". . s2a3 s2a3 s2a3 s2a3 s2b3 s2b3"
        ". . s2a4 s2a4 s2a4 s2a4 s2b4 s2b4"
        ". . s2a5 s2a5 s2a5 s2a5 s2b5 s2b5"
        "submit . . . . . . ."
}
.bname { grid-area: bname; font-size: 24px; }
.moved { grid-area: moved; }
.bsg { grid-area: bsg; }
.mtheme { grid-area: mtheme; font-size: 24px; }
.themeawarded { grid-area: themeawarded; padding-top: 5px; }
.uma { grid-area: uma; }
.submitedit { grid-area: submit; }
.badges { grid-area: badges; font-weight: bold; }
.badgearea { grid-area: badge; }
.badgeblk { display: inline-block; }
.btbonus { grid-area: themebonus; font-weight: bold; }
.bb1 { grid-area: bb1; }
.bb2 { grid-area: bb2; }
.bb3 { grid-area: bb3; }
.stheme1 { grid-area: stheme1; font-weight: bold; }
.s1a1 { grid-area: s1a1; }
.s1a2 { grid-area: s1a2; }
.s1a3 { grid-area: s1a3; }
.s1a4 { grid-area: s1a4; }
.s1a5 { grid-area: s1a5; }
.bonus1 { grid-area: bonus1; font-weight: bold; }
.s1b1 { grid-area: s1b1; }
.s1b2 { grid-area: s1b2; }
.s1b3 { grid-area: s1b3; }
.s1b4 { grid-area: s1b4; }
.s1b5 { grid-area: s1b5; }
.bonus2 { grid-area: bonus2; font-weight: bold; }
.s2b1 { grid-area: s2b1; }
.s2b2 { grid-area: s2b2; }
.s2b3 { grid-area: s2b3; }
.s2b4 { grid-area: s2b4; }
.s2b5 { grid-area: s2b5; }
.stheme2 { grid-area: stheme2; font-weight: bold; }
.s2a1 { grid-area: s2a1; }
.s2a2 { grid-area: s2a2; }
.s2a3 { grid-area: s2a3; }
.s2a4 { grid-area: s2a4; }
.s2a5 { grid-area: s2a5; }

#generalreport {
    height: 200px;
    overflow: scroll;
    border: 2px solid black;
}