/**
* A style and set of classes for the <gallery> tag.
*
* A good default is:
* <gallery heights=180px widths=240px class=landscape>
* Example.png | An example image
* …
* </gallery>
*
* The size of the boxes containing images is determined by the class. Within
* its box, images are bounded by their limiting axis.
*
* For a fixed height of 180px and a variable width, don't include a class,
* and set a large width so that each image is bounded by its height:
* <gallery heights=180px widths=360px>…</gallery>
*
* The possible classes are:
* <gallery heights=180px widths=180px class=square>…</gallery>
* <gallery heights=180px widths=240px class=landscape>…</gallery>
* <gallery heights=240px widths=180px class=portrait>…</gallery>
* <gallery heights=240px widths=240px class=big-square>…</gallery>
* <gallery heights=240px widths=320px class=big-landscape>…</gallery>
* <gallery heights=320px widths=240px class=big-portrait>…</gallery>
* <gallery heights=180px widths=320px class=wide>…</gallery>
* <gallery heights=320px widths=180px class=long>…</gallery>
*
* To display the caption under each image, use the text-under class:
* <gallery heights=180px widths=240px class='landscape text-under>
* …
* </gallery>
*
* See [[Outline of U.S. History/Bridge to the 21st Century]] for an example.
*
* This file is available under CC0 1.0, viewable at
* http://creativecommons.org/publicdomain/zero/1.0/.
*/
.gallery, .gallery .thumb,
.gallery .thumb > div {
margin: 0 ! important;
padding: 0 ! important;
}
.gallerybox, .gallerybox > div, .gallerybox .thumb {
width: auto ! important;
}
.gallerybox {
vertical-align: bottom;
position: relative;
margin: 5px 0;
}
.gallerybox .gallerytext {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: white;
background-color: rgba(249, 249, 249, 0.8);
border: 1px solid #CCC;
border-top: 0;
overflow: visible;
}
.gallerybox:hover .gallerytext {
background-color: white;
border: 1px solid white;
border-top: 1px solid #CCC;
}
.gallery .gallerytext > p {
margin: 0.2em;
}
.gallery .gallerytext:empty {
display: none;
}
/* Styling of thumb */
.gallery .thumb {
height: 180px;
min-width: 135px ! important;
overflow: hidden;
}
.gallery.square .thumb {
width: 180px ! important;
}
.gallery.landscape .thumb {
width: 240px ! important;
}
.gallery.portrait .thumb {
width: 180px ! important;
height: 240px;
}
.gallery.big-square .thumb {
width: 240px ! important;
height: 240px;
}
.gallery.big-landscape .thumb {
width: 320px ! important;
height: 240px;
}
.gallery.big-portrait .thumb {
width: 240px ! important;
height: 320px;
}
.gallery.wide .thumb {
width: 320px ! important;
}
.gallery.long .thumb {
width: 180px ! important;
height: 320px;
}
/* /Styling of thumb */
/* Styling for gallery text when below image */
.gallery.text-under .gallerytext {
position: static;
background-color: transparent;
border: 0;
}
.gallery.text-under .gallerytext {
width: 125px ! important;
}
.gallery.portrait.text-under .gallerytext,
.gallery.square.text-under .gallerytext,
.gallery.long.text-under .gallerytext {
width: 170px ! important;
}
.gallery.landscape.text-under .gallerytext,
.gallery.big-square.text-under .gallerytext,
.gallery.big-portrait.text-under .gallerytext {
width: 230px ! important;
}
.gallery.wide.text-under .gallerytext,
.gallery.big-landscape.text-under .gallerytext {
width: 310px ! important;
}
/* /Styling for gallery text when below image */
