/* Page Layout */
#page-equipment {

}

/* Boxes */
#page-equipment-box {
    display: grid;
    grid-template-columns: [page-left] auto [page-right];
    grid-template-rows: [page-top] 68% min-content auto [page-bottom];
}
#equipment-box {
    grid-column: page-left / page-right;
}
#other-equipment-box {
    display: flex;
    flex-direction: column;
    margin: 5px 11px 0;
}

/* Elements */
#equipment-box {
    margin: 0 4px;
    background-size: auto 90%;
    background-repeat: no-repeat, repeat;
    background-position: 50% 50%, top left;
    position: relative;
}

.equipment {
    height: 35px;
    width: 140px;
    background-color: rgba(255,255,255,0.7);
    position: absolute;
    top: 0; left: 0;
}
.equipment p:first-child {
    margin:0;
    /*top: 30px;font-size: 9pt;/**/
    font-size:7pt; top:14px;/* Text at bottom */
    /*font-size:7pt; top:1px;/*Text at top*/
    font-family: 'Merienda', cursive;
    position: relative;
}
.equipment p:last-child {
    font-family: 'Merienda', cursive;
    font-size: 6pt;
    position: relative;
    top: 18px;
    margin: 0;
    white-space: nowrap;
}
#eq-head, #eq-shoulders,
#eq-armor,
#eq-arms, #eq-hands, #eq-ring-1, #eq-ring-2,
#eq-misc
{
    left: 10px;
    text-align: left;
    padding-left:3px;
}

#eq-face, #eq-throat,
#eq-clothing,  #eq-waist,
#eq-legs, #eq-feet
{
    left: auto;
    right: 10px;
    text-align: right;
    padding-right:3px;
}

#eq-misc {
    height: 114px;
}
#eq-misc p {
    top: calc(14px + 114px - 35px);
}

#eq-face   { top: 5%; }
#eq-throat { top: 15%; }
#eq-armor  { top: 25%; }
#eq-waist  { top: 45%; }
#eq-hands  { top: 45%; }
#eq-feet   { top: 87%; }
#eq-misc   { top: 73%;}
#eq-legs   { top: 65%; }

#eq-head      { top: 5%; }
#eq-shoulders { top: 15%; }
#eq-clothing  { top: 29%; }
#eq-arms      { top: 35%; }
#eq-ring-1    { top: calc(55%); }
#eq-ring-2    { top: calc(55% + 6.5%); }


#pack-consumables-container {
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 8px;
    margin-bottom: 4px;
}
#other-equipment-box {
    font-size: 10pt;
    font-family: Merienda, cursive;
}
.pack-consumable-title {

}
.pack-category-title {
    font-weight: bold;
}
.pack-category {
    margin-left: 20px;
    text-indent: -20px;
}