@define shortduration: 0.25s;
@define shortmedduration: 0.3s;
@define mediumduration: 0.4s;
@define longduration: 1.7s;

/* transition duration for settings panels to opaque in/out; referred to from code so don't change the name */
@define DownloadsPanelTransitionDuration: 0.4s;

@define DownloadsPanelBackgroundTransitionDuration: 0.4s;

@define percentbarwidth: 412px;

.DownloadText
{
	font-size: 24px;
	font-weight: normal;
	color: #4a8db3;
	opacity: 1.0;
	transition-property: opacity, border, color, color !immediate;
	margin-right: 10px;
}

#DownloadTitle.DownloadText 
{
	font-size: 32px;
}


.DownloadsListItem
{
	background-color: transparent_module;
	pre-transform-scale2d: 0.89;
	width: 1280px;
	height: 160px;
	flow-children: right;
	padding: 12px;
	margin-top: 5px;
	margin-bottom: 5px;

	border-radius: 3px;
	
	transition-property: pre-transform-scale2d, position, transform, box-shadow;
	transition-duration: 0.23s;
	transition-delay: 0.0s;
	transition-timing-function: bigpicture-ease-in-out;
	
	box-shadow: box_shadow_off_color 0px 0px 16px 0px;
}
.DownloadsListItem.Ready {
	pre-transform-scale2d: 0.99;
}

.DownloadsListItem:descendantfocus
{
	background-color: action_module;
	pre-transform-scale2d: 1.0;
	z-index: 5;

	box-shadow: box_shadow_on_color 0px 0px 16px 0px;

	animation-name: main-button-glow-movement-no-fill;
	animation-duration: longduration;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
.DownloadsListItem:descendantfocus .DownloadText {
	color: detailsdatalabelfocus;
}


/* set all sections to collapse when not visible */
#DownloadsQueued,
#DownloadsDeferred,
#DownloadsPaused,
#DownloadsFinished {
	visibility: collapse;
}

.HasQueued #DownloadsQueued
{
	visibility: visible;	
}

.HasDeferred #DownloadsDeferred
{
	visibility: visible;	
}

.HasPaused #DownloadsPaused
{
	visibility: visible;	
}

.HasFinished #DownloadsFinished
{
	visibility: visible;	
}

.DownloadsList
{
	width: 100%;
	flow-children: down;
}

.DownloadsListItemLeft
{
	width: 320px;
	flow-children: down;
	margin-right: 12px;
}

.DownloadsListItemRight
{
	
	flow-children: down;
	width: 100%;
}

#DownloadsList
{
	overflow: clip scroll;
	flow-children: down;
	width: 100%;
	padding-bottom:100px;
}

.DownloadBarPercent
{
	width: 100%;
	height: 100%;
	margin: 0px;
	height: 8px;
	background-color: #ffffffff;
	wash-color: ui_primary_color;
	z-index: 3010;
}

.DownloadBarBackground
{
	width: percentbarwidth;
	height: 12px;
	width: 100%;
	position: 40px 190px 0px;
	background-color: #00000099;
	box-shadow: fill #00000044 -4px -4px 8px 8px;
	z-index: 3010;
	transition-duration: DownloadsPanelTransitionDuration;
	transition-timing-function: bigpicture-ease-in-out;
	visibility: collapse;
	margin-top: 5px;
	margin-bottom: 5px;
}

.ItemDownloading .DownloadBarBackground
{
	visibility: visible;	
}

DownloadsListItem:descendantfocus .DownloadBarBackground
{
	width: 100%;
	height: 12px;
	position: 30px 190px 0px;
	background-color: #00000088;
	box-shadow: box_shadow_on_color -4px -4px 8px 8px;
	z-index: 3010;
}

.HasAny #DownloadsNone
{
	visibility: collapse;	
}

.HasAny #DownloadsSummary
{
	visibility: visible;
}

#DownloadsSummary
{
	visibility: collapse;
	height: 220px;
	width: 100%;
	background-color: gradient( linear, 0% 0%, 3% 80%, from( #051c2dff ), to( #051c2d00 ) );
}

#DownloadsSummaryLegend
{
	position:13px 50px 0px;
	height: 150px;
	width: 400px;
	flow-children: down;
}
#DownloadsSummaryLegend .ProgressLabel
{
	font-size: 26px;
	color: medgray;
}

.DownloadsGraphPanel
{
	visibility: visible;
	height: 176px;
	width: 864px; // 48 samples * 18 width
	position:420px 20px 0px;
	opacity-mask: url( "file://{images}/focus_shadow_right2.png" ) 1.0;
}

.DownloadsGraphContainer
{
	visibility: visible;
	height: 100%;
	width: 100%;
	flow-children: right;
	horizontal-align:right;
	overflow:clip clip;
}

.DownloadsGraphEntry
{
	visibility: visible;
	width: 17px;
	margin-right: 1px;
	height: 0px;
	background-color: ui_primary_color;
	
	vertical-align:bottom;
	transition-property:position;
	transition-duration:0.2s;
	transform:translatex(-18px);
}

.DownloadsListItem Button,
.DownloadsListItem Button Image

{
	width: 100%;
}

#DownloadStatusWrapper
{
	flow-children: right;
}

#DownloadError
{
	visibility: collapse;
}

.ItemPaused #DownloadError
{
	visibility: visible;
}

VerticalScrollBar {
	opacity: 0;
}