/*
    Fred's Lab Website
    (c) Frédéric Meslin 2016 - 2025
	All rights reserved
    email: info@fredslab.net
	Product presentation Styling
*/

/*****************************************************************************/
/* Product pictures carousel */
/*****************************************************************************/
#board{
	width: 100%;
	height: 384px;
	background-color: white;
}

/*  Explicit size, not max-width: the pictures carry no src until board.js
    runs, so without it the slot is 0x0 and the picture pops to full size
    when it finally decodes. Every carousel picture is 608x384.             */
#board img{
	width: 608px;
	height: 384px;
	position: absolute;
	transition: opacity linear 0.5s;
}

#thumbnails{
	width: 100%;
	height: 64px;
	display: flex;
	flex-flow: row;
	justify-content: flex-end;
}

#thumbnails img{
	width: 48px;
	margin-top: auto;
	margin-bottom: auto;
	margin-left: 16px;
	cursor: pointer;
	transition: width 0.5s;
}

/*****************************************************************************/
/* Product text tabs */
/*****************************************************************************/
.bar{
	width: 100%;
	height: 32px;
	margin-bottom: 16px;
	display: flex;
	flex-flow: row;
	justify-content: space-between;
}

.bar .tab{
	height: 32px;
	flex-grow: 1;
	text-align: center;
	background-color: #6c6c6c;
	transition: background-color 0.5s;
}

.bar .heading{
	width: 100%;
	height: 32px;
	text-align: center;
	font-size: 16px;
	line-height: 33px;
	color: #cccccc;
	background-color: #6c6c6c;
}

.bar .separator{
	width: 8px;
	height: 32px;
}

.bar a{
	font-size: 14px;
	line-height: 33px;
	color: #cccccc;
}

.bar a:hover{
	color: white;
}

/*****************************************************************************/
/* Audio jukebox */
/*****************************************************************************/
.jukebox{
	width: 100%;
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	color: #cccccc;
}

.jukebox .disclaimer{
	width: 100%;
	text-align: justify;
	margin-bottom: 16px;
}

.jukebox .track{
	width: 50%;
}

.jukebox audio{
	width: 286px;
	height: 24px;
	margin-top: 4px;
	margin-bottom: 16px;
	display: block;
}