.bar {
    padding: 20px;
    margin: 10px;
    max-width: 400px;
    border:solid 1px black;
    position:relative;
    height: 20px;
    line-height: 20px;
}

.bar-fill {
    background-color: #ddd;
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    z-index:-1;
}

.bar-value {
    float:right;
    vertical-align: middle;
}

.exif .col-sm-6, .exif .col-sm-12 {
    padding: 2px;
}

.exif-grid {
    position:absolute;
    left:0;
    top:0;
    color:white;
    display: none;
    background-color: rgba(0,0,0,0.5);
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    font-size: 12pt;
}

.exif-stats {
    position: absolute;
    width: 100%;
    bottom: 20px;
}

.thumb_container:hover .exif-grid {
    display: block;
    border-radius: 4px;
}

.thumb_container {
    width: 100%;
    height: 145px;
    display: relative;
}
.thumbnail h3 {
    font-size: 14pt;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.row .thumbnail {
    padding: 1px;
}
.thumbnail img {
    max-height: 100%;
}
.datetaken {
    font-size: 9pt;
}
.lens-model {
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-legend li span.pie-legend-icon{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
}
.chart-legend ul {
    list-style-type: none;
}

footer {
    background-color: #222;
    padding: 20px;
}

footer, footer a:link, footer a:visited {
    color: #888;
}

footer a:hover {
    color: #ddd;
}

/* Sticky footer */
html {
  position: relative;
  min-height: 100%;
}
html body {
  margin-bottom: 150px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  min-height: 50px;
  max-height: 100px;
}