Brightcove App Cloud app css

app.css

body {margin: 0}

/* gallery and image detail styles */
#photos .thumb {float: left; background-position: center; background-repeat: no-repeat; overflow: hidden;}

#imageInfo { position: absolute; bottom: 0px; padding: 10px 5px; width: 100%; color: white; background-color: #292927; border-top: 1px dashed #4B4B4A; }
#imageInfo .close { float: right; display: block; margin-right: 10px; margin-top: -5px; font-size: 10px; }
#imageInfo h1 { font-size: 95%; }
#imageInfo h2 { font-size: 80%; font-weight: normal; }
#imageInfo h3 { font-size: 70%; font-weight: normal; }
#imageInfo .thumbnail { float: left; margin-right: 5px; height: 80px;}
#imageInfo .minimap { float: right; margin-right: 15px; }

#largeImageWrapperClone { position: absolute; top: 0px; }
#largeImage { -webkit-box-shadow: 1px 1px 8px #000; }

.page { background-color: #292926; }

/* Custom loader */
#spinnerContainer {
    position: absolute; 
    z-index: 1000; 
    
    top: 0; 
    bottom: 0;
    left: 0;
    right: 0;
    
    /* Vertical centering */
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    
    text-align: center;
    padding: 5px;
}
#spinnerContainer .flower { 
    background-image: url('../images/flower.png');  
    width: 140px; 
    height: 152px;
    margin-bottom: 20px;
    display: inline-block;
    -webkit-animation-name: rotate; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; 
}
#status { display: block; width: 100%; text-align: center; top: 55%; color: #fff; font-shadow: 1px 1px 1px #1E1E1E; }