/*!
* \cond
* Copyright (c) 2012 Imagen Ltd.
*
* This software is protected by copyright and the information contained herein
* is confidential. The software may not be copied and information contained
* herein may not be used or disclosed except with the written permission of
* Imagen Ltd.
* \endcond
*
* \file
* \brief ImagenWeb CIS - Additional Media css
*/

.additionalMedia {
	width:100%;
	padding: 1.5rem;
	background-color: #fbfbfc;
	border: 1px solid #D8DFE6;
	margin-bottom: 1.5rem;
}

.additionalMedia-wrap {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.additionalMedia-wrap .scroll-indicator {
	position: absolute;
	top: 0;
	background-color: #fbfbfc;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
}

.additionalMedia-wrap .scroll-indicator i {
	display: none;
	font-size: 3rem;
    padding: 0.5rem;
}

.additionalMedia-wrap.iw-menu-scrolling.iw-menu-scrolling-left .scroll-indicator.go-left i,
.additionalMedia-wrap.iw-menu-scrolling.iw-menu-scrolling-right .scroll-indicator.go-right i {
	display: inline;
}

.additionalMedia-wrap .scroll-indicator.go-left {
	left: 0;
}

.additionalMedia-wrap .scroll-indicator.go-right {
	right: 0;
}

.additionalMedia-list {
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
	white-space: nowrap;
}

.additionalMedia-listItem {
	position: relative;
	height: 100%;
	margin-right: .375rem;
	display: inline-block;
}

.additionalMedia-listItem:last-child {
	margin-right: 0;
}

.additionalMedia-listItemThumb {
	background: no-repeat center;
	text-align: center;
}

.additionalMedia-listItemThumb a {
	display: inline-block;
	position: absolute;
	height: 100%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	     -o-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

.additionalMedia-listItem,
.additionalMedia-listItemThumb {
	width: 128px;
}

.additionalMedia-wrap,
.additionalMedia-listItem,
.additionalMedia-list,
.additionalMedia-listItemThumb {
	height: 72px;
}
.additionalMedia-listItemThumb img {
	max-width: 128px;
	max-height: 72px;
	margin: auto 0;
	display: block;
	width: auto;
	height: 100%;
}

.additionalMedia-listItemTxt {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 0;
	background: rgba(0, 0, 0, 0.54);
}

.additionalMedia-listItemTxt a {
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
	font-size: 0.79rem;
	display: inline-block;
	width: 90%;
}

.additionalMedia-listWrap {
	display: block;
	overflow: hidden;
	position: relative;
	margin-bottom: -17px;
	text-align: center;
}

/* List view start */

.additionalMediaList {
	padding: 1.5rem;
	border: 1px solid #D8DFE6;
	margin-bottom: 1.5rem;
	min-height: 1px;
}

.additionalMediaList-listItem {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	margin-bottom: 3rem;
	flex-direction: column;
}

.additionalMediaList-list {
	padding: 0;
}

.additionalMediaList-listItemThumb {
	margin-bottom: .75rem;
	min-height: 1px;   /* Needed to fix IE11 issue */
}

.additionalMediaList-listItemThumb a {
	display: block;

}

.additionalMedia-listItem:not(.selected) {
	opacity: .5;
}

.additionalMedia-listItem:not(.selected):hover {
	 opacity: 1;
 }

.additionalMediaList-listItemThumb img {
	max-width: 100%;
	text-align: center;
	display: block;
	width: 100%;
}

.additionalMediaList-listItemTxtWrap {
	width: 100%;
	margin: 0;
}

.additionalMediaList-listItemTxt {
    margin: auto 0;
}

.additionalMediaList-listItemThumb a {
	text-decoration: none;
}

.additionalMediaList-listItemDuration a,
.additionalMediaList-listItemFilesize,
.additionalMediaList-listItemDownLoad a {
	font-size: .95rem;
	opacity: .7;
}

.additionalMediaList-listItemTxt {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	text-decoration: none;
	text-transform: capitalize;
}

.additionalMediaList-listItemName {
	overflow: hidden;
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.additionalMediaList-listItemFilesize {
	flex-shrink: 0;
	margin: auto .375rem auto auto;
}

.additionalMediaList-listItemDownLoad {
	flex-shrink: 0;
}

.additionalMediaList-listItemDuration .iw-icon-play {
	font-size: .8rem;
}

.additionalMediaList-listItemPreview {
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
	white-space: nowrap;
}

.additionalMediaList-listItemDuration {
	flex-shrink: 0;
}

/* END List view */


/* ====== RESPONSIVE STYLES ====== */
/* landscape smartphones, iPhone480px */
@media all and (min-width: 30em) {

	.additionalMediaList-listItem {
		max-height: 35px;
		overflow: hidden;
		flex-direction: row;
		margin-bottom: .75rem;
	}

	.additionalMediaList-listItemThumb .image-thumbnail {
		max-height: inherit;
		height: auto;
	}

	.additionalMediaList-listItemThumb {
		margin-bottom: 0;
	}

	.additionalMediaList-listItemThumb a {
		width: 50px;
	}

	.additionalMediaList-listItemThumb img {
		max-height: 35px;
	}

	.additionalMediaList-listItemTxtWrap {
		flex-grow: 1;
		margin: 0 1.5rem;
		width: calc(100% - 3rem - 50px);
	}
}