p.sort
{
 text-align: right;
}
button#nameSort
{
 font-weight: bold;
}
span.spacer
{
 flex: 1;
}
.flexIndex
{
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-box-pack: center;
 -moz-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: stretch;
 -moz-box-align: stretch;
 -ms-flex-align: stretch;
 align-items: stretch;
 padding-top: 1em;
}
.flexIndex > .flexProd
{
 color: inherit;
 text-decoration: none;
 padding: 1em;
 margin-left: 0.5em;
 margin-right: 0.5em;
 margin-bottom: 1em;
 text-align: center;
 border: 1px solid;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-direction: normal;
 -webkit-box-orient: vertical;
 -moz-box-direction: normal;
 -moz-box-orient: vertical;
 flex-direction: column;
 align-items: stretch;
 cursor: pointer;
}
.flexIndex > .flexProd > span > img:not(.supp)
{
 width: 48px;
 height: 48px;
}
.flexIndex > .flexProd > span
{
 display: inline-block;
 width: 100%;
}
.flexIndex > .flexProd > .title
{
 font-size: 135%;
 font-weight: bold;
 max-width: 10em;
 margin-left: auto;
 margin-right: auto;
 margin-top: 0.25em;
}
.flexIndex > .flexProd > .category
{
 text-align: right;
 font-size: 70%;
 max-width: 21.5em;
}
.flexIndex > .flexProd > .interaction
{
 text-align: right;
 font-size: 80%;
}
.flexIndex > .flexProd > .description
{
 text-align: left;
 max-width: 15em;
 margin-top: 1em;
}
.flexIndex > .flexProd > .spacer
{
 -webkit-box-flex: 1;
 -moz-box-flex: 1;
 -webkit-flex: 1;
 -ms-flex: 1;
 flex: 1;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
}
.flexIndex > .flexProd > .supports
{
 margin-left: auto;
 text-align: justify;
 max-width: 20em;
 margin-bottom: 1em;
 margin-top: 1em;
}