/* START DOWNLOADS PAGE ELEMENTS */

table#cursor, table#cursor tr, table#cursor td,
table#wallpaper, table#wallpaper tr, table#wallpaper td,
table#ringtone, table#ringtone tr, table#ringtone td,
table.font, table.font tr, table.font td {
    text-align: center;
    vertical-align: middle;
    border-collapse: collapse;
    border: 0px solid red;
}
    
table.font tr.preview td { padding-bottom: 3%; }
table#cursor { width: 100%; table-layout: fixed; }
    /*table#cursor td { width: 33.3%; }*/
table#wallpaper td, table#ringtone td { width: 25%; }
table#cursor tr.preview td, table#wallpaper tr.preview td, table#ringtone tr.preview td { height: 50px; }
#fonts-container1 table.font tr.preview td, #fonts-container2 table.font tr.preview td, #fonts-container3 table.font tr.preview td, #fonts-container4 table.font tr.preview td { line-height: 200%; }
table#cursor tr.download td, table#wallpaper tr.download td, table#ringtone tr.download td, #fonts-container1 table.font tr.download td, #fonts-container2 table.font tr.download td, #fonts-container3 table.font tr.download td, #fonts-container4 table.font tr.download td { font-size: 80%; }

#fonts-container1, #fonts-container2, #fonts-container3, #fonts-container4 {
    width: 100%;
    text-align: center;
    display: flex; /* "display: flex" allows "vertical-align" & "justify-content" to work */
    vertical-align: top;
    justify-content: center;
    border: 0px solid green;
}

#fonts-container1 { margin-top: 2%; }
        
    .font3col1, .font3col2, .font3col3 {
        text-align: center;
        width: 33%;
        margin: 0;
        display: inline-block;
    }
    
    .font2col1, .font2col2 {
        text-align: center;
        width: 49%;
        margin: 0;
        display: inline-block;
    }
    
#fonts-container1 hr, #fonts-container2 hr, #fonts-container3 hr, #fonts-container4 hr {  display: none; }
    
@font-face { font-family: "RB"; src: url("/data/includes/fonts/pkmn-red-and-blue.ttf") format("truetype")  }
@font-face { font-family: "RS"; src: url("/data/includes/fonts/pkmn-ruby-and-sapphire.ttf") format("truetype")  }
@font-face { font-family: "FRLG"; src: url("/data/includes/fonts/pkmn-firered-and-leafgreen.ttf") format("truetype")  }
@font-face { font-family: "EMERALD"; src: url("/data/includes/fonts/pkmn-emerald.ttf") format("truetype")  }
@font-face { font-family: "PMD"; src: url("/data/includes/fonts/pkmn-mystery-dungeon.ttf") format("truetype")  }
@font-face { font-family: "DP"; src: url("/data/includes/fonts/pkmn-diamond-and-pearl.ttf") format("truetype")  }
@font-face { font-family: "DPBOLD"; src: url("/data/includes/fonts/pkmn-diamond-and-pearl-bold.ttf") format("truetype")  }
@font-face { font-family: "RANGER"; src: url("/data/includes/fonts/pkmn-ranger.ttf") format("truetype")  }
@font-face { font-family: "RANGERMINI"; src: url("/data/includes/fonts/pkmn-ranger-mini.ttf") format("truetype")  }
    
.font-rb { font-family: "RB", monospace; font-size: 8.5pt; }
.font-rs { font-family: "RS", monospace; font-size: 9pt; }
.font-frlg { font-family: "FRLG", monospace; font-size: 10pt; }
.font-emrld { font-family: "EMERALD", monospace; font-size: 10pt; }
.font-pmd { font-family: "PMD", monospace; font-size: 9pt; }
.font-pmd-title { font-family: "PMDTITLE", monospace; font-size: 10pt; }
.font-dp { font-family: "DP", monospace; font-size: 9pt; }
.font-dp-bold { font-family: "DPBOLD", monospace; font-size: 9pt; }
.font-rngr { font-family: "RANGER", monospace; font-size: 9pt; }
.font-rngr-mini { font-family: "RANGERMINI", monospace; font-size: 9pt; }

    
/**** START RESPONSIVE MOBILE LAYOUT DESIGN ****/
@media (max-width:840px) {
    #fonts-container1, #fonts-container2, #fonts-container3, #fonts-container4 { display: block; }
    
    .font3col1, .font3col2, .font3col3, .font2col1, .font2col2 {
        margin: 0 auto;
        width: 100%;
        display: block;
    }
    
    #fonts-container1 table, #fonts-container2 table, #fonts-container3 table, #fonts-container4 table { margin-bottom: 0; }
    #fonts-container4 { margin-bottom: 20px; }
    
    #fonts-container1 hr, #fonts-container2 hr, #fonts-container3 hr, #fonts-container4 hr {
        display: block;
        height: 10px;
        background-color: var(--mediumlightgrey);
        background-image: none;
        border-radius: 10px;
    }
}/**** END RESPONSIVE MOBILE LAYOUT DESIGN ****/

/* END DOWNLOADS PAGE ELEMENTS */