#infoDiv
{
    height: 100%;
    text-align: center;
}

#infoTitleDiv
{
    height: 5%;
    width: 100%;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 2rem;
}

.tagInfostring
{
    height: 5%;
    width: 100%;
    text-align: center;
    color: #FFF;
    font-size: 1.5rem;
    overflow: hidden;
}

#infoPopupContent
{
    width: 100%;
    height: calc(90% - 5rem);
    color: #FFFFFF;
}

#infoPopupImage
{
}

#infoPopupImage>img
{
    border: 0.1rem solid white;
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
}

#infoPopupTextWrapper
{
    border: 0.1rem solid #FFFFFF;
    border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
}

#infoPopupText
{
    width: 100%;
    height: 100%;
    z-index: 1;
    padding: 0.5rem;
    white-space: inherit;
}

#infoPopupText>p
{
    padding: 0;
    margin: 0;
    word-break: break-word;
    text-align: left;
}

#infoPopupText a:link, #infoPopupText a:hover, #infoPopupText a:visited
{
    color: #ccffff;
}

#infoPopupButtonRow
{
}

#infoPopupButtonRow>div
{
    display: table;
    width: 100%;
}

#infoPopupButtonRow>div>div
{
    display: table-row;
    width: 100%;
}

#infoPopupButtonRow>div>div>div
{
    display: table-cell;
    width: 30%;
}

@media only all and (orientation: portrait)
{
    #infoPopupImage
    {
        height: 80%;
        width: 99%;
        margin: 0 auto;
    }

    #infoPopupImage>img
    {
        max-height: 95%;
        max-width: 95%;
        height: auto;
        width: auto;
    }

    .infoPopupButtons
    {
        width: 99%;
        margin: 0 auto;
        height: 10%;
    }

    .infoPopupButtonsInc
    {
        width: 99%;
        margin: 0 auto;
    }

    #infoPopupTextWrapper
    {
        height: 20%;
        width: 99%;
        margin: 0 auto;
    }
}

@media only all and (orientation: landscape)
{
    #infoPopupContent
    {
        position: relative;
    }

    #infoPopupImage
    {
        height: 90%;
        width: 48%;
        margin-left: 1%;
        float: left;
    }

    .infoPopupButtons
    {
        position: absolute;
        bottom: 0;
        left: 65%;
    }

    #infoPopupImage>img
    {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        width: auto;
    }

    #infoPopupTextWrapper
    {
        height: 90%;
        width: 48%;
        float: left;
    }

    #infoPopupButtonRow
    {
    }
}