/* page layout */

#content h2.winnerGrandPrix
{
	font-size: 36px !important;
	margin-bottom: 1em;
	margin-top: 16px;
}

#content h2.winnerGrandPrix:before
{
	content: '';
	display: inline-block;
	height: 30px;
	width: 102px;
	background-image: url('../assets/winner-badges.svg#grandprix');
	background-repeat: no-repeat;
	background-size: auto 100%;
	margin: 0.35em 0.5em 0 -4px;
	vertical-align: top;
	opacity: 0.75;
}

#content h3.winnerGrandPrix
{
	font-size: 20px;
	margin: 1em 0;
}

div#content p.winnerCategoryGP
{
	text-indent: 0;
	margin-left: 48px;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	font-size: 15px;
	font-weight: bold;
	color: #3fb3b3;
}

div#content p.winnerCaptionGP
{
	text-indent: 0;
	margin-left: 48px;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
	font-weight: bold;
	font-size: 15px;
}

div#content p.winnerDetailsGP
{
	text-indent: 0;
	margin-left: 48px;
	margin-top: 0em;
	font-weight: bold;
	font-size: 15px;
	color: #555554;
}

div.gpWinner
{
	display: flex;
	flex-direction: cols;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 2em 0 5em 0;
}

div#content img.winnerThumbGP
{
	margin: 0;
	padding: 0;
}
div#content div.winnerThumbGP
{
	display: inline-block;
	position: relative;
	width: 121px;
	height: 79px;
	padding: 0 36px 0 12px;
	float: left;
	clear: both;
	box-sizing: border-box;
	margin-left: 12px;
	margin-top: 0.25em;
	margin-right: 28px;
	margin-bottom: 12px;
	padding: 0;
}
div#content div.winnerThumbGP div.overlay
{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 121px;
	height: 79px;
	background-image: none;
	cursor: pointer;
}
div#content div.winnerThumbGP:hover div.overlay,
div#content div.winnerThumbGP:active div.overlay
{
	background-image: url(../assets/legacy/play-small.png);
	background-position: center center;
	background-repeat: no-repeat;
}

div#content div.winnerBox
{
	display: inline-block;
	vertical-align: top;
	padding-left: 8px;
}
div#content div.winnerBox p.winnerCategoryGP,
div#content div.winnerBox p.winnerCaptionGP,
div#content div.winnerBox p.winnerDetailsGP,
div#content div.winnerBox p.narrowMargin
{ margin-left: 0; vertical-align: top; }

div#content p.winnerCaption
{
	text-indent: 0;
	margin: 1em 0 0 4em;
	font-weight: bold;
}

div#content p.winnerDetails
{
	text-indent: 0;
	margin-left: 4em;
	margin-top: 0em;
}

a.winnerVideo,
a.winnerVideoGroup
{
	display: inline-block;
	text-indent: 0;
	margin: 0;
	padding: 4px 0 0 32px;
	vertical-align: top;
	line-height: 18px;
}

/*
a.winnerVideo
{
	background-image: url(../assets/legacy/play-small.png);
	background-repeat: no-repeat;
	background-position: left top;
	min-height: 28px;
}
*/


a.winnerVideo,
a.winnerVideoGroup
{
	background-image: url(../assets/legacy/play-small-group.png);
	background-repeat: no-repeat;
	background-position: left top;
}
a.winnerVideo {min-height: 28px; }
a.winnerVideoGroup {min-height: 26px; }

a.winnerVideoGroup span.winnerVideoNum { color: #555554; margin-left: 1px; text-decoration: none !important; }

div#content p.winnerDetails + p.winnerCaption { margin-top: 1em; } 

div#content span.winnerSponsor { color: #555554; }

div#content ul.winnerMainCatList
{
	margin-left: 2em;
	padding-left: 0;
	list-style: none;
	line-height: 24px;
}

#content h1.winnerMainCatListCaption
{
	font-size: 28px;
	color: #006865;
	font-weight: normal;
	line-height: normal;
	margin: 1.6em 0 0.9em 0;
	letter-spacing: 0.00825em;
}
div#content ul.winnerMainCatList + a + h2.winnerMainCat { margin-top: 3.5em; }

#content h2.winnerMainCat
{
	font-size: 28px;
	margin: 1.75em 0 0 0;
	color: #38aeae;
}
#content h3.winnerCategory
{
	font-size: 20px;
	margin: 2em 0 1em 0.5em;
	color: #009A9B;
}
#content h2.winnerMainCat + h3.winnerCategory { margin-top: 1em; }
#content h4.winnerAward
{
	margin: 1.5em 0 0.75em 1em;
	font-size: 20px;
	font-weight: normal;
}

#content h4.winnerAward.winnerGold { color: #b49b56; }
#content h4.winnerAward.winnerSilver { color: #b2b2b2; }
#content h4.winnerAward.winnerBlack { color: #555554; }
#content a.winnerVideo,
#content a.winnerVideoGroup
{ text-decoration: none; }
#content a.winnerVideo:hover,
#content a.winnerVideo:focus,
#content a.winnerVideo:active,
#content a.winnerVideoGroup:hover,
#content a.winnerVideoGroup:focus,
#content a.winnerVideoGroup:active
{
	text-decoration: underline;
	-webkit-text-decoration-color: #f9b234; 
	text-decoration-color: #f9b234;
}

/* from winners.css, selectors adapted */

#winnersView { margin: 0; }

#content #winnersView p.winnerCategoryGP {
	color: #3fb3b3;
	margin: 0.5em 0;
	font-size: 16px;
	font-weight: normal;
}

#content #winnersView h3.winnerGrandPrix
{
	font-size: 20px;
	 margin: 1em 0;
}
#content #winnersView h4.winnerGrandPrix
{
	font-size: 16px;
	font-weight: bold;
	margin: auto;
}
div#winnersView div.clipPane
{
	width: 460px;
	float: right;
	box-sizing: content-box;
	margin: 0.5em 0 0 0.75em;
}
div#winnersView div.clipPreview
{
	display: block;
	margin: 0 0 0 auto;
	padding: 0;
	width: 380px;
	max-width: 100%;
	position: relative;
	cursor: pointer;
}
div#winnersView div.clipPreview img
{
	max-width: 100%;
	height: auto;
}
div#winnersView div.clipPane div.imgPane
{
	width: 460px;
	height: 259px;
	margin: 0;
	padding: 0;
	background-size: contain;
	background-position: top center;
	background-repeat: no-repeat;
}
div#winnersView div.clipPreviewOverlay
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}
div#winnersView div.clipPreview .playButton
{
	display: block;
	position: absolute;
	width: 55px;
	height: 55px;
	left: 50%;
	top: 50%;
	margin: -22px 0 0 -22px;
	padding: 0;
	border: none;
	border-radius: 50%;
	text-align: center;
	vertical-align: middle;
	color: #fff;
	background-color: rgba(0, 154, 155, 0.5);
	z-index: 3;
	box-shadow: 0 0 5px rgba(255,255,255, 0.2);
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	transition: opacity 0.3s ease-in;
	opacity: 0.6;
}
div#winnersView  div.clipPreview .playButton::after
{
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	left: 50%;
	top: 50%;
	margin: -15px 0 0 -9px;
	padding: 0;
	border-style: solid;
	border-width: 15px 0 15px 26px;
	border-color: transparent transparent transparent rgba(255,255,255, 0.55);
	transition: all 0.2s ease;
}
div#winnersView  div.clipPreview:hover .playButton,
div#winnersView  div.clipPreview:focus .playButton
{ opacity: 1.0; } 

div#winnersView  div.clipPreview:hover .playButton:after,
div#winnersView  div.clipPreview:focus .playButton:after
{ border-left-color: rgba(255,255,255, 0.7); }

div#winnersView  div.clipPreview:active .playButton
{ background-color: rgba(255,255,255, 0.7);}
div#winnersView  div.clipPreview:active .playButton:after {border-left-color: rgba(0, 154, 155, 0.9); }

div#winnersView table
{
	box-sizing: border-box;
	margin: 1.25em 0 2.5em 6px;
	padding: 0;
	border-collapse: collapse;
}
div#winnersView table td
{
	vertical-align: top;
	padding-bottom: 0.5em;
}
div#winnersView table td.winnerPropertyLabel
{
	min-width: 66px;
	color: #555554 !important;
	white-space: nowrap;
}
div#winnersView table td.winnerPropertyValue {  padding-left: 8px; }

div#winnersView ~ h3.winnerCategory { font-weight: normal; }

@media screen and (max-width: 1200px) {
	main.winners aside { display: none; }
	main.winners #content { max-width: 1000px; }
}

@media screen and (max-width: 850px) {
	div#winnersView div.clipPane
	{
		float: none;
		display: block;
		margin: 0 auto;
		width: 100%;
		height: auto;
	}
	div#winnersView div.clipPreview
	{
		margin: 0 auto;
	}
	div#winnersView div.clipPane div.playerWrapper
	{
		max-width: 100%;
		margin: 0 auto;
	}
	div#winnersView div.clipPane fieldset
	{
		width: 545px;
		max-width: 100%;
		margin: 0 auto;
	}
	div#winnersView div.clipPane div.playerWrapper div,
	div#winnersView div.clipPane div.playerWrapper iframe
	{
		max-width: 100%;
	}
}


/* video embedding */

div#embedShield
{
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	bottom: 0;
	z-index: 9998;
	background-color: #282828;
	-webkit-opacity: 0.8;
	-moz-opacity: 0.8;
	-o-opacity: 0.8;
	-ms-opacity: 0.8;
	opacity: 0.8;
	box-shadow: inset 0 0 20px #282828;
	overflow: hidden;
}

div#embedContainer
{
	position: fixed;
	width: 500px;
	height: 281px;
	margin: -140px 0 0 -250px;
	left: 50%;
	top: 50%;
	background-color: rgba(0,0,0,0.2);
	padding: 2px;
	border: 1px rgba(0,0,0,0.5) solid;
	border-radius: 3px;
	z-index: 9999;
	box-sizing: content-box;
}

div#embedGroupContainer
{
	position: fixed;
	left: 50%;
	top: 50%;
	background-color: rgba(0,0,0,0.2);
	padding: 2px;
	border: 1px rgba(0,0,0,0.5) solid;
	border-radius: 3px;
	z-index: 9999;
	box-sizing: content-box;
}

div#embedGroupContainer div#embedContainer,
div#embedControls
{
	position: absolute;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

div#embedGroupContainer div#embedContainer { left: 2px; top: 2px; }

div#embedControls
{
	left: 0;
	bottom: 0;
	height: 33px;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: rgba(0,0,0,0.1);
}

div#embedControlsPrev,
div#embedControlsNext
{
	width: 19px;
	height: 24px;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 3px;
	background-image: url(../assets/legacy/videoplayer_assets.png);
	background-repeat: no-repeat;
	display: inline-block;
}

div#embedControlsPrev {
	left: 20px;
	background-position: 0 0;
}

div#embedControlsNext {
	left: 48px;
	background-position: -44px 0;
}

div#embedControlsPrev:hover { background-position: -22px 0; }
div#embedControlsPrev:active { background-position: -22px 0; opacity: 0.75; }
div#embedControlsNext:hover { background-position: -66px 0; }
div#embedControlsNext:active { background-position: -66px 0; opacity: 0.75; }

div#embedControlsDisplay
{
	font-family: 'Arimo',helvetica,arial,serif;
	font-size: 13px;
	padding: 0;
	margin: 0;
	position: absolute;
	bottom: 4px;
	right: 18px;
	white-space: nowrap;
}

div#embedControlsDisplay span.embedControlsCount,
div#embedControlsDisplay span.embedControlsTotal
{
	display: inline-block;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	background-color: #b6b6b6;
	color: #333;
	text-align:center;
	line-height: 24px;
	letter-spacing: 1px;
	padding: 0;
	margin: 0;
}

div#embedControlsDisplay span.embedControlsSeparator
{
	display: inline-block;
	line-height: 24px;
	font-size: 16px;
	color: #999;
	padding: solid;
	margin: 0 3px 0 4px;
}