/*
 * Showcase Content Management System
 * HTML5 Images module layout for screens >= 960px
 *
 * Copyright (C) Damian Walker 2015
 * Created: 31-Oct-2015
 */

/*----------------------------------------------------------------------
 * Image Gallery
 */

/* mini gallery must be a flex box */
.mini-gallery {
    display: flex;
    flex-flow: row wrap;
}

/* overall gallery style */
body#gallery .content .thumbnail-panels,
.mini-gallery .thumbnail-panels {
    display: flex;
    flex-flow: row wrap;
}

/* layout of a single figure */
body#gallery .content figure,
.mini-gallery figure {
    display: flex;
    margin: 0;
    margin-bottom: 0.5em;
    width: 50%;
}

/* layout of a link within a figure */
body#gallery .content figure a,
.mini-gallery figure a {
    display: block;
    width: 100%;
}

/* layout of the image in a figure */
body#gallery .content figure img,
.mini-gallery figure img  {
    display: block;
    margin: 0 auto;
    max-width: 160px;
}

/* layout of the caption for a figure */
body#gallery .content figure figcaption,
.mini-gallery figure figcaption {
    font-size: small;
    line-height: 1em;
    margin: 0 auto;
    padding-left: 2em;
    padding-right: 2em;
    text-align: center;
}

/*----------------------------------------------------------------------
 * Image display page
 */

/* image should be centered, max width 100% */
#image .content > img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

/*----------------------------------------------------------------------
 * Main image on all pages
 */

/* figure */
.lower-inset figure,
.upper-inset figure,
figure.inline {
    position: relative;
}

/* image with link */
.lower-inset img,
.upper-inset img,
.inline img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

/* the caption */
.lower-inset figcaption,
.upper-inset figcaption,
.inline figcaption {
    text-align: center;
}

/*----------------------------------------------------------------------
 * Simple image viewer styling
 */

/* expanded image displayed when thumbnail is clicked */
#expandedscreen {
    background-color: rgba(0,0,0,0);
    box-sizing: content-box;
    display: none;
    opacity: 100%;
    position: absolute;
    z-index: 3;
}

/* border around the image */
#expandedscreen img {
    border: 1px solid black;
}

/* image rights text */
#expandedscreen span {
    bottom: 0;
    display: block;
    font-size: small;
    left: 0;
    padding-left: 3px;
    padding-bottom: 3px;
    position: absolute;
    text-shadow: 1px 0px 0 #aaa, 0px 1px 0 #aaa, -1px 0px 0 #aaa,
	0px -1px 0 #aaa;
}

/* fake close button */
#expandedscreen:after {
    content: "\274c";
    cursor: pointer;
    font-weight: bold;
    margin: 0 4px;
    position: absolute;
    right: 0px;
    text-shadow: 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff,
	0px -1px 0 #fff;
    top: 0px;
}