.tile {
    margin-bottom: 30px;

    /* The following (along with tile-inner) forces the height of the tile to be square*/
    /* It uses the padding property to get an aspect ratio */
    width: 50%;
    padding: 50%;
    position: relative;
}

.tile-inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.tile .tile-inner img {
    /*height: 80%;*/
}

.tile .tile-sizer {
    height: 80%;
    /*background-color: #191919;*/
    position: relative;
}

.tile .tile-sizer img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height:100%;
}

.tile-text {
    padding: 3px;
    width: 100%;
    margin: auto;
    text-align: center;
}


.quick-padding-horizontal {
    padding-left: 10px;
    padding-right: 10px;
}

.top-padding {
    padding-top: 20px;
}

.bottom-padding {
    padding-bottom: 10px;
}


.justify {
    text-align: justify;
}

.inline-block {
    display: inline-block;
}


/*
 * Used piano gallery
 */

.text-align-center {
    text-align: center;
}

/* Makes it so that the reel is at most 50%, and that it gets centered*/
.photo-reel {
    display: inline-block;
}

/* Since we use the auto-aspect-ratio-fit in a square tile above, this sets a max width for each tile*/
.photo-reel .photo-reel-tile {
    width: 75px;
    display: inline-block;
}

/* TODO: Refactor the margin-bottom out of .tile so we do not need this override */
.photo-reel .photo-reel-tile .tile {
    margin-bottom: 0;
}

.photo-reel .photo-reel-tile .tile .tile-sizer{
    height: 100%; /* To make img centered again */
}

/*Makes tile light up when element is hovered*/
.tile-hover-light {
    opacity: 0.6;
}

.tile-hover-light:hover {
    opacity: 1;
}

tr {
    border-bottom: 1px solid #DDD;
}

td, th {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 5px;
}

td {
    border-bottom: 1px solid #ddd;
}

th {
    border-bottom: none;
}

.endtable {
    border-bottom: none;
}

#specificationtable {
    width: 100%;
}