h1  {font-size: 3em;}
h2  {font-size: 2em;}
h1, h2, h3, figure {font-weight: bold;
                    text-align: center;}
body  {text-size-adjust: none;
       text-align: center;
       background-color: #E3EAED;
       background-image: url("whitemarble.jpg");}
.main-block {display: inline-block;
             width: 760px;
             text-align: left;}

.inset-layout  {box-sizing: border-box;
                width: 100%;
                margin: 20px 0px;
                border: 2px outset #A0A0A0;
                background-color: #E0E0E0;
                padding: 2px;}
.upper-tab::after,
.inset-layout h1,
.inset-layout h2,
.inset-layout h3,
.inset-layout p,
.inset-layout figure   {margin: 2px;
                        border: 2px inset #A0A0A0;
                        background-color: white;
                        padding: 4px;}
.inset-layout figure   {padding: 0;}
.inset-layout img      {object-fit: contain;
                        object-position: center;}
.h-div, .v-div         {display: flex;}
.v-div                 {flex-direction: column;}
.upper-tab             {position: relative;}
.upper-tab::after      {content: "";
                        position: absolute;
                        border-bottom-width: 0;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: -6px;}

.mold-nav            {display: flex;
                      justify-content: center;}
.mold-nav > a        {display: block;
                      margin: 2px;
                      border: 2px outset #D0E0FF;
                      background-color: #F0F8FF;
                      padding: 4px;
                      text-align: center;
                      text-decoration: none;
                      color: black;
                      font-weight: 900;
                      font-size: 20px;}
.mold-nav > a:hover  {background-color: #E0F0FF;}
.mold-nav > a:active {border-style: inset;}
.mold-nav > a.here   {border-style: inset;
					  border-color: #FFFFBB;
                      background-color: #FFFFBB;
                      pointer-events: none;
                      cursor: default;}
.ranges > a          {padding: 4px;
                      flex: 1;
                      font-family: Arial, sans-serif;
                      font-size: 24px;}
.ranges > .upper-tab {padding: 8px;
                      flex: 1;}
.categories > a      {padding: 6px;
                      flex: 1;}

.mold-LCOL    {flex: 1 0 30%;}
.mold-MCOL    {flex: 3 0 30%;}
.mold-RCOL    {flex: 0 1 0;}
.mold-number  {flex: 1 1 auto;
               display: flex;
               align-items: center;
               justify-content: center;
               font-size: 1.2em;}
.mold-name    {font-size: 1.5em;}
.mold-description      {flex: 1;}
.mold-price {font-weight: bold;
             text-align: center;}

.mold-caution::before   {content: "Caution! ";
                         color: red;
                         font-weight: bold;}
.mold-image > a         {display: block;
                         color: black;
                         text-decoration: none;}
.mold-image.sketch > a  {display: flex;
                         flex-direction: column;
                         height: 100%;}
.mold-image > a::after              {display: block;
                                     padding: 2px;
                                     border: 2px outset #A09080;
                                     background-color: #F5E3D0;
                                     background-image: url("../stone.jpg");
                                     content: "Larger Image";}
.mold-image.sketch > a::after       {content: "View Full-Size PDF";}
.mold-image.instructions > a::after {content: "View Instructions";}
.mold-image img         {display: block;
                         min-width: 100px;
                         min-height: 100px;
                         max-width: 200px;
                         max-height: 300px;}
.mold-image.sketch img  {flex: 1;
                         max-width: 300px;
                         max-height: 350px;
                         /* .sketchfile.svg */
                         background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgogICAgPHBhdGggZD0iTTM5LjgsMTguMkg3NC41VjgxLjlIMjUuNVYzMi41SDM5LjhaTTM5LjgsMzIuNVYxOC4yTDI1LjUsMzIuNVoiIHN0eWxlPSJmaWxsOiNGRkZGRkY7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjE7c3Ryb2tlLWxpbmVqb2luOnJvdW5kOyIvPgogICAgPHBhdGggZD0iTTM3LjI4LDQ2LjFMNDMuMjYsNTEuNVY2M0wzNy4yOCw1Ny41Wk0zNy4yOCw0Ni4xTDU2Ljc1LDQwTDYyLjcyLDQ1LjRMNDMuMjYsNTEuNVpNNDMuMjYsNjNMNjIuNzIsNTYuOVY0NS40TDQzLjI2LDUxLjVaIiBzdHlsZT0iZmlsbDojRTZFNkU2O3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjU7c3Ryb2tlLWxpbmVqb2luOnJvdW5kOyIvPgo8L3N2Zz4K');
                         background-repeat: no-repeat;
                         background-size: 100px 100px;
                         background-position: center;}

.mold-footer {text-align: center;
              font-weight: bold;}