@charset "utf-8";

#acg-av-content
{
	position:relative;
	
	jmax-width:72em;
	jpadding:0.5em;
	margin:0 auto;
	jmargin-top:3em;
	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;	
}

.acg-av-header
{
	display:table;
	margin:1em 0 1em 0;
}

.acg-av-title
{
	display:table-cell;
	width:100%;
	jmargin:1em 0;
	color:#ffffff;
}

.acg-av-share
{
	display:table-cell;
	white-space:nowrap;
	text-align:right;
	vertical-align:bottom;
}

.acg-av-subtitle
{
	margin:1em 0;
}

.acg-av-text
{
}

.acg-av-tabbar
{
	background-color:inherit !important;
	background-image:inherit;
	border:0 !important;
	font-size:0.75em;
}

.acg-av-buttonbar-container
{
	jbackground-color:#ffffff;
	background-color:rgb(255,255,255);
	text-align:center;
	color:#442580;
	jmargin-bottom:1em;	/* needed to ensure space between bottom of buttonbar container and footer when not in a tab */
}
#acg-av-content > .acg-av-buttonbar-container
{
	padding:1em;
	margin-bottom:1em;
}
.acg-av-buttonbar
{
	text-align:center;
	padding:0 1em;
	jpadding-top:1em;
	jmargin-top:1em; /* want some when button bar is at top and there is not in a tab */
}

.acg-av-buttonbar-content-container
{
	padding-top:1em;
	jpadding-bottom:3em;
}
/* The container that surrounds the tabbar and tabs */
.acg-av-tabs
{
	margin:0 auto;
	margin-top:1em;
	jpadding:1em 0;
	padding-bottom:2em;	/* if you don't include, the bottom of the tabs looks too close to the footer */
	jmargin-bottom:1em;
	font-size:1em;
	background-color:inherit;
	border:0 !important;
}
/* The tab itself */
.acg-av-tab
{
	text-align:center;
	jbackground-color:#ffffff !important;
	background-color:rgb(255,255,255) !important;
	border:0 !important;
	color:#442580 !important;
	
	padding:1em !important;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;	
}

.acg-av-img
{
	max-width:200px;
	padding:30px;
	box-sizing:border-box;
}

.acg-av-media-container
{
	position:relative;
	margin:auto;
	text-align:center;
	overflow:hidden;
	border:1px solid rgb(0,0,0);
	line-height:0;	/* Without this, the "white-space" in an asset will create unwanted visual space. However, some assets intentionally include text and this will cause any wrapping to overlap. */	
	box-sizing:content-box !important;	/* When we do the height calculations, it is based on content */
/*	
	padding:1em;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;	
*/
}
/*
When used as a class for an HTML5 "video" element, using "height:100%" and "position:absolute" causes problems.
The video element is sized to the full height of the browser, but since the video content doesn't size with it,
there is a ton of "padding" around the video content.

The above statement no longer appears to be true, but not sure why...
*/
.acg-av-video
{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}
.acg-av-video-container
{
	height:100%;
}
.acg-av-iframe
{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}
.acg-av-iframe-container
{
	height:100%;
	
	j-webkit-overflow-scrolling:touch;	/* required to allow iframe scrolling on iOS devices */
	joverflow:scroll;	/* required to allow iframe scrolling on iOS devices */
}

#acg-av-content .acg-av-button
{
	margin-right:4px !important;
	margin-top:4px !important;
	jfont-weight:bold;
	jcolor:#442580;
	color:white;
	background: linear-gradient(to right, var(--acg-gradient-medium-purple) 0%, var(--acg-gradient-light-purple) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	jbackground: linear-gradient(to right,  #874bff 0%,#c2a4fe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	jborder:1px solid rgb(135,75,255);
	border:1px solid var(--acg-button-border);

	jborder-width:0;
}
#acg-av-content .acg-av-button .ui-state-active
{
	color:rgb(0,0,0);
	background: linear-gradient(to right, var(--acg-gradient-medium-purple) 0%, var(--acg-gradient-light-purple) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	jbackground: linear-gradient(to right,  #874bff 0%,#c2a4fe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#acg-av-content .ui-tab
{
	jfont-weight:bold;
	color:#442580 !important;
}
#acg-av-content .ui-tabs .ui-tabs-nav
{
	padding:0;
}
#acg-av-content a
{
	jcolor:#442580 !important;
	jcolor:#442580;	/* is important needed? it messes up the share anchor */
	jcolor:#00ff00;
}
/*
#acg-av-content a:hover
{
	color:#cc0000;
}
#acg-av-content .ui-state-hover a
{
	color:#cc0000 !important;
}
#acg-av-content .ui-state-hover:hover
{
	color:#cc0000 !important;
}
*/
#acg-av-content .ui-button
{
	font-size:0.8em;
}
/*
#acg-av-content .ui-button:hover
{
	color:#cc0000 !important;
}
*/

#acg-av-content .ui-tabs-tab
{
	background:linear-gradient(to right, var(--acg-gradient-medium-purple) 0%, var(--acg-gradient-light-purple) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#acg-av-content .ui-tabs-tab a
{
	color:white !important;
}


#acg-av-content .ui-tabs-tab.ui-state-active
{
	background-color: #ffffff !important;
    background-image: inherit !important;
    color:var(--acg-button-border) !important;
	
	jbackground-color:#b6a3da !important;
	jbackground-image:inherit;
}

#acg-av-content .ui-button.ui-state-active
{
	background-color:#ffffff !important;
	background-image:inherit;
}

#acg-av-content .ui-button.ui-state-active
{
	color:var(--acg-button-border) !important;
}

#acg-av-content .ui-state-active a
{
	color:var(--acg-button-border) !important;
	jcolor:#ffffff !important;
}

.acg-av-openpdf
{
	text-align:center;
	padding-bottom:0.5em;
	font-weight:bold;
}
.acg-av-openpdf a
{
	jcolor:#ffffff;
	color:#442580;
}
#acg-av-wait
{
	jfloat:right;

	jposition: relative;
	position:absolute;
	jleft: -50%;
	text-align:center;
	width:100%;
	z-index:1;
}
.acg-av-loading
{
	text-align:center;
	color:#ffffff;
	padding-top:8em;
}

.ui-widget
{
	font-family:robotoregular;
}
.ui-widget button
{
	font-family:robotoregular;
}

.acg-av-adblock-warning
{
	font-size:0.8em;
	padding:1em 0;
	font-weight:bold;
	line-height:normal;
}

.ui-button
{
	border-radius:3px !important;
}

#acg-av-content .ui-state-default
{
	border:0px solid black;
}

.acg-av-download-text
{
	color:#442580;
	font-weight:bold;
	line-height:normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	padding:0.5rem;
}

.acg-av-16x9
{
	aspect-ratio:16/9;
	background-color:black;
}

.acg-av-play-overlay
{
	position:absolute;
	inset:0;
	margin:auto;
	width:80px;
	height:80px;
	font-size:32px;
	border:none;
	border-radius:50%;
	cursor: pointer;
	background-color:rgb(0,0,0,0.3);
	color:white;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.acg-av-play-overlay:hover
{
	background-color:rgb(0,0,0,0.6);
}

.acg-av-video-container.playing .acg-av-play-overlay
{
	display: none;
}

#acg-av-play-overlay i
{
	position:relative;
	left:2px;
}

/*
Prevents the overlay from showing on touch devices which *likely* already show a play button
*/
/*
@media (hover: none) and (pointer: coarse)
{
	.acg-av-play-overlay
	{
		display:none;
	}
}
*/