//
// Buttons.
//

Button, .Button
{
	padding: 8px 8px;
	box-shadow: #eeeeee00 0px 0px 16px 0px;
	border: 5px solid;
	color: detailsdatalabel;
	margin-left: 10px;
	margin-right: 10px;
	font-size: deffontsize;
	font-family: platformfont;
	background-color: simplebuttonsolid_vertical;

	transition-property: border, blur, background-color, color, transform, box-shadow;
	transition-duration: 0.4s;
	transition-timing-function: ease-out;
}

Button:hover, .Button:hover
{
	transition-duration: 0.23s !immediate;

	color: #ffffffff;
	box-shadow: #eeeeee60 -5px -5px 6px 10px;
}

Button:focus, .Button:focus
{
	transition-duration: 0.25s !immediate;

	horizontal-align: left;

	color: black;

	background-color: gradient( linear, 0% 0%, 100% 100%, from( #66c0f4ff ), to( #b6e1faff ) );

	transform: translatex(7px);

	// Remove border, so we dont transition border out on focus lost, that looks weird.
	transition-property: blur, background-color, color, transform;

	transform: translatez( 0px );
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;

	animation-name: main-button-glow-movement;
	animation-duration: 1.7s;
	animation-delay: 0.4s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;


}

Button:focus .Checkbox, .Button:focus .Checkbox
{
	transform: translatex( 7px );
}