:root
{
	--fmblue: #288CF0;	/* FotoMagico blue */
	--fmgold: #FC0;		/* FotoMagico gold */

	--thumbnail-size: 128px; 
}

/* General Layout & Styling */

html
{
	background-color: #000;
}

body
{
	background-color: #000;
	margin: 0px;
	padding: 0px;
	
	/* Default font for teleprompter notes and popup menu items */
	
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18pt;
	color: #FFF;
}

/* Disable text selection */

.prevent-select
{
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

/* Progress Bar */

.primary .progress-background
{
	width: 100%;
	height: 6px;
	padding: 0px;
	margin: 0px;
	border-radius: 3px;
	background-color: #444;
}

.primary .progress-elapsed
{
	height: 6px;
	padding: 0px;
	margin: 0px;
	border-radius: 3px;
	background-color: var(--fmblue);
}

.secondary .progress-background
{
	display: none;
}

/* Toolbar at bottom of window */

#toolbar
{
	padding: 0;
	margin: 0;
    position: fixed;
    bottom: 0%;
    width: 100%;
    height: 64px;
	vertical-align: center;
	list-style: none;
	
	/* Distribute toolbar items horizontally, spreading evenly */
	
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	
	/* Draw vertical gradient behind toolbar so that it stands out better above teleprompter text */
	
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}

/* Toolbar button styling */

#toolbar .button img
{
	width: 60px;
	height: 60px;
	border-radius: 30px;
}

#toolbar .disabled
{
	opacity: 33%;
}

#toolbar .button.pressed:not(.disabled) img				/* .pressed class adds blue background */
{
	background-color: var(--fmblue);
}

#toolbar .button.pulse:not(.pressed):not(.disabled) img	/* .pulse class adds animated yellow background */
{
	animation-name: pulse;
	animation-duration: 0.7s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: ease;
}

@keyframes pulse
{
	to
	{
		background-color: var(--fmgold);
	}
}

/* Teleprompter text colors */

.primary
{
	opacity: 100%;
}

.secondary
{
	opacity: 40%;
}
