/*
 {$BRAND_NAME`}
 Copyright (c) ocProducts, 2004-2012
*/

/* Both flow mode and viewing entries */

.gallery_entry_details {
	margin-bottom: 1em;
}

.gallery_entry_field_name_column {
	width: 8.5em;
}

.gallery_entry_field_value_column {
	width: 16em;
}

/* Non flow-mode only */

{$,Our standard ocPortal-wide thumbnail image size is defined by the thumb_width option}
{$SET,gallery_thumb_size,{$CONFIG_OPTION,thumb_width}px}
{$,However actually lets make them smaller custom sizes for the gallery and let CSS scale-down the larger thumbnail images}
{$SET,gallery_thumb_size,175px}
{$,That is not the most efficient approach - which would be to use the Tempcode THUMBNAIL symbol in the GALLERY_IMAGE/GALLERY_VIDEO templates to generate idealised thumbnails and tie them into the HTML - but that is fiddly and messy, requires more thought and planning by the web designer}
{$,Or, of course we could use the standard thumbnail size, or change the standard thumbnail size, but that would affect other systems which may want the larger thumbnails}

.gallery_grid_cell_wrap {
	overflow: hidden;

	/* Fiddle it so our grid cells will be flush with the left */
	margin-left: -0.5em;
	width: 100%;
	padding-right: 0.5em;
}

.gallery_grid_cell {
	float: {!en_left};
	padding: 0.5em;
}

.gallery_regular_thumb {
	font-size: 0.85em;
	border: 1px solid {$GET,standard_border};
	background-color: {$GET,area_background};
	{$BETA_CSS_PROPERTY,box-shadow: 3px 3px 10px {$GET,standard_border};}
}

.img_thumb_wrap {
	/* Essentially adds padding around thumbnails; the thumbnails are sized to fit a box as tightly as possible, but unused space is not stored inside the images themselves */
	width: {$GET,gallery_thumb_size};
	height: {$GET,gallery_thumb_size};
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}

.img_thumb_wrap a {
	outline: 0;
}

.img_thumb_wrap .img_thumb {
	vertical-align: bottom; /* Removes gap under this centered inline image, by moving it to baseline */

	/* Maybe the thumbnail size has been reduced at some point - guard against this */
	max-width: {$GET,gallery_thumb_size};
	max-height: {$GET,gallery_thumb_size};
}

.gallery_regular_thumb p, .gallery_regular_thumb .grating {
	margin: 0.5em;
}

.gallery_regular_thumb .grating {
	float: right;
}

.gallery_tooltip {
	font-size: 0.85em;
}

.gallery_tooltip h3 {
	margin-bottom: 0.85em;
}

/* Flow-mode only */

.flow_mode_details .gallery_entry_details .box {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.flow_mode_details .gallery_entry_details .box.staff_actions {
	margin-top: 1em !important;
}

.flowmode_thumb {
	display: inline;
	{+START,IF,{$MOBILE}}
		margin: 0.5em;
	{+END}
	{+START,IF,{$NOT,{$MOBILE}}}
		margin: 0 1em;
	{+END}
}

.flowmode_thumb img {
	max-width: 150px; /* Smaller, for carousel */
}

.flowmode_video {
	margin-bottom: 1em;
}

.gallery_start_slideshow {
	text-align: center;
}

/* Viewing entries */

.gallery_entry_screen {
	width: 100%;
	min-height: 100%;
}

.nav_mid {
	margin-top: 0.5em;
}

.slideshow_speed {
	position: absolute;
	right: 0;
	top: 0;
}

.slideshow_speed input {
	width: 3em;
}

.media_box .box {
	margin-top: 0;
}

.media_box .gallery_entry_details {
	max-width: 18em;
}

/* The timer countdown */
.changer {
	font-weight: bold;
	font-family: Courier, monospace;
	font-size: 1.2em;
}

/* side_root_galleries block */

.side_galleries_block p {
	margin-top: 0.5em;
}

.side_galleries_block_exp {
	font-weight: bold;
	background: none;
	color: {$GET,slightly_seeded_text};
}

.side_galleries_block ul.compact_list {
	margin: 0;
	padding: 0;
}

.side_galleries_block ul.compact_list li {
	margin: 0 0 0 22px;
	padding: 0;
}

/* Tease block / Image fader block */

.gallery_tease_pic_wrap {
	margin-bottom: 1.5em;
}

.gallery_tease_pic_wrap h2, .gallery_tease_pic_wrap h3 {
	max-width: 18em;
}

.gallery_tease_pic {
	{+START,IF,{$NOT,{$MOBILE}}}
		width: 40em;
	{+END}
	margin: 0 auto;
	{$BETA_CSS_PROPERTY,box-shadow: 3px 3px 10px {$GET,point_of_interest_border};}
}

.gallery_tease_pic_pic {
	float: {!en_right};
	margin-{!en_left}: 0.5em;
	text-align: {!en_right};
}

.gallery_tease_pic>.box {
	{$BETA_CSS_PROPERTY,border-bottom-right-radius: 0;}
}

#tease_scrolling_text {
	width: 23em;
}

/* Make sure it fits okay on the side panel */
.global_side_panel .gallery_tease_pic {
	width: auto;
}
.global_side_panel .gallery_tease_pic_wrap h2, .global_side_panel .gallery_tease_pic_wrap h3 {
	display: none;
}
.global_side_panel .img_thumb_wrap .img_thumb {
	max-width: 100%;
}

/* Image fader block */

.image_fader_box {
	position: relative;
	border: 1px solid {$GET,standard_border};
	display: inline-block;
}

.image_fader_box img {
	display: block;
}

/* If nested in a box already */
.box_inner>.image_fader_box {
	border: 0;
}

/* Miscellaneous media handling */

.gallery_pdf {
	width: 100%;
	height: 600px;
}
