/* Requires msgbox.css.. so add that first */

//
// Animations
//
@keyframes 'links-and-more-button-focus'
{
	from
	{
		background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdee ), to( #adafafe0 ) ); 
	}

	50%
	{
		background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdff ), to( #bdbfbfff ) ); 
	}

	to
	{
		background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdee ), to( #adafafe0 ) ); 
	}
}


//
// Button styles
//
Button
{
	width: 100%;
	padding: 8px 0px 8px 0px;
	margin: 4px 0px; 

	color: detailsdatalabelfocus;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #1d212200 ), to( #12131300 ) );
	border-style: solid;
	border-width: 5px;
	border-color: none;

	transition-property: border, background-color, color, box-shadow, transform;
	transition-timing-function: bigpicture-ease-in-out;
}

Button Label
{
	width: 100%;
	vertical-align: center;

	font-family: platformfont;
	font-size: 28px;
	font-weight: bold;
	transform: translatex(-7px);
	color: detailsdatalabelfocus;
	transition-property: transform;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
}

Button:focus Label
{
	color: #171717f5;
	transform: translatex(0px);
}	

Button:hover
{
	transition-duration: 0.23s !immediate;
	box-shadow: #eeeeee60 -3px -3px 6px 6px;
}

Button:hover Label
{
	transform: translatex(0px);
}

Button:focus
{
	transition-duration: 0.4s !immediate;

	color: #161718f5;
	background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdee ), to( #adafafe0 ) ); 
	border-width: 5px;
	border-style: solid;
	border-color: #fdfefef0;
	
	animation-name: links-and-more-button-focus; 
	animation-duration: 1.7s;
	animation-delay: 0.4s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}


//
// Set coupon dialog
//
StoreCartSetCoupon
{
	width: 100%;
	height: 100%;

	animation-name: msg-box-appear;
	animation-duration: MessageBoxAnimationDuration;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: 1;
}

StoreCartSetCoupon.Destructing
{
	opacity: 0.0;

	animation-name: msg-box-disappear;
	animation-duration: MessageBoxAnimationDuration;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: 1;
}

.DialogRegion
{
	width: 1100px;
	height: 600px;
	align: center center;
	padding: 24px 4px 24px 24px;
	background-color: message_box_bg;
	border: 5px solid #424c50;
	flow-children: down;
}

#ItemName
{
	font-size: 48px;
	color: white;
	margin-bottom: 0px;
}

.CouponInstructions
{
	font-size: 32px;
	color: #7d7c7b;
	margin-bottom: 10px;
}

#Coupons
{
	flow-children: down;
}

.SuggestedCoupon
{
	flow-children: down;
	width: 100%;
}

.SuggestedCouponNameSavingsRow
{
	padding: 0px 7px 0px 7px;
	flow-children: right;
	width: 100%;
}

.CouponName
{
	width: fit-children;
}

.CouponSavings
{
	horizontal-align: right;
	width: fit-children;
}

.CouponWarning
{
	padding: 0px 7px 0px 7px;
}
