﻿#calloutCardWrapper {
    height: 100%;
    width: 100%;
}

#calloutCardWrapper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -moz-transition: 0.6s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

    #calloutCardWrapper.flipped {
        -webkit-transform: rotateY( 180deg );
        -moz-transform: rotateY( 180deg );
        -o-transform: rotateY( 180deg );
        transform: rotateY( 180deg );
    }

    #calloutCardWrapper > div {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: 0.6s;
        -webkit-transform-style: preserve-3d;
        -webkit-transform: rotateY(0deg);
        -moz-transition: 0.6s;
        -moz-transform-style: preserve-3d;
        -moz-transform: rotateY(0deg);
        -o-transition: 0.6s;
        -o-transform-style: preserve-3d;
        -o-transform: rotateY(0deg);
        -ms-transition: 0.6s;
        -ms-transform-style: preserve-3d;
        -ms-transform: rotateY(0deg);
        transition: 0.6s;
        transform-style: preserve-3d;
        transform: rotateY(0deg);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

        #calloutCardWrapper > div:first-child {
            -webkit-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            z-index: 2;
        }

        #calloutCardWrapper > div:last-child {
            -webkit-transform: rotateY(-180deg);
            -moz-transform: rotateY(-180deg);
            -o-transform: rotateY(-180deg);
            -ms-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
        }

        #calloutContent .zoomToSite {
            display: none;
        }

        #callout .closeCallout {
            font-size: 28px !important;
            position: absolute;
            top: 10px;
            left: 5px;
        }

        #calloutContent .statusCode {
            margin-top: 10px;
        }

#calloutContent {
    font-size: 14px;
}

    #calloutContent label {
        margin: 3px 0;
        min-width: 200px;
        font-size: 14px;
    }

        #calloutContent label .value {
            float: right;
        }

    #calloutContent .title {
        font-size: 16px;
        text-align: center;
        font-weight: bold;
    }

        #calloutContent .title .icon {
            width: 18px;
            height: 18px;
            margin-top: -3px;
        }
