.mso-radial-gradient(@start, @end)
{
	background: radial-gradient(ellipse at top, @start, transparent), radial-gradient(ellipse at bottom, @end, transparent);
}

@RibbonExpandedHeight: 168px;
@RibbonCollapsedHeight: 48px;

body.uwt-ribbon-visible
{
	div.uwt-ribbon
	{
		position: fixed;
		top: 0px;
		left: 0px;
		height: @RibbonExpandedHeight;
		right: 0px;
	}
	div.uwt-sidebar
	{
		top: @RibbonExpandedHeight;
	}
	&> form > div.uwt-page > div.uwt-content, &> div.uwt-page > div.uwt-content
	{
		margin-top: @RibbonExpandedHeight;
	}
}

div.uwt-ribbon
{
	visibility: hidden;
	opacity: 0;
	height: 0px;
	transition: all 0.3s;
	overflow: hidden;
	
	&.uwt-visible
	{
		visibility: visible;
		opacity: 1;
		height: @RibbonExpandedHeight;
		
		&.uwt-ribbon-collapsed
		{
			height: @RibbonCollapsedHeight;
			&> div.uwt-ribbon-tab-contents
			{
				position: absolute;
				
				height: 94px;
				left: 0px;
				right: 0px;
				margin-top: 1px;
			}
		}
	}
	
	-moz-user-select: none;
	&> div.uwt-ribbon-application-button
	{
		padding: 10px 0px;
		position: absolute;
		left: 0px;
		
		&> a
		{
			text-align: center;
			padding: 10px 30px;
		}
	}
	
	&> ul.uwt-ribbon-tab-buttons
	{
		list-style-type: none;
		padding: 0px;
		padding-left: 96px;
		
		margin: 0px;
		margin-top: 2px;
		
		display: block;
		
		&> li
		{
			display: inline-block;
			
			border: solid 1px transparent;
			
			border-top-left-radius: 3px;
			border-top-right-radius: 3px;
			
			padding: 10px 20px;
			
			margin-bottom: -1px;
			
			&:hover
			{
				.mso-radial-gradient(#c4ddfe, #e3d198);
				border-color: #99bbe8;
			}
		}
	}
	&> div.uwt-ribbon-tab-contents
	{
		&> div.uwt-ribbon-tab-content
		{
			&:not(.uwt-visible)
			{
				display: none;
			}
			&> div.uwt-ribbon-tab-group
			{
				border-radius: 3px;
				display: inline-block;
				
				height: 120px;
				margin-bottom: 4px;
				vertical-align: top;
				position: relative;
				
				&> div.uwt-content
				{
					.uwt-ribbon-command, .uwt-ribbon-command-container
					{
						display: inline-block;
					}
					.uwt-ribbon-command
					{
						position: relative;
						margin: 2px;
						vertical-align: top;
						text-align: left;

						div.uwt-title
						{
							color: #15428b;
							padding: 2px 4px;
							text-align: center;

							position: absolute;
							left: 0px;
							right: 0px;
							bottom: 0px;
						}
						
						img
						{
							display: block;
							margin-left: auto;
							margin-right: auto;

							margin-top: 16px;
							
							width: 32px;
							padding: 4px;
						}
						&.uwt-button
						{
							border: solid 1px transparent;
							border-radius: 3px;
							min-height: 94px;
							padding: 0px;
						}
						&.uwt-ribbon-hide-title > div.uwt-title
						{
							display: none;
						}
						&> div.uwt-title
						{
							min-width: 40px;
							max-width: 70px;
							font-size: 10pt;
						}
						
						&.uwt-splitbutton
						{
							&> div.uwt-button
							{
								padding: 10px 4px;
							}
							&> div.uwt-dropdown-button
							{
								padding: 2px 0px;
							}
						}
					}
					.uwt-ribbon-command-container
					{
						&> .uwt-ribbon-command
						{
							display: block;
							img
							{
								width: 16px;
							}
						}
						
						&.uwt-orientation-vertical > .uwt-ribbon-command
						{
							padding-left: 24px;
							&> img
							{
								display: inline-block;
								margin-left: -24px;
								margin-top: 0px;
							}
							&> div.uwt-title
							{
								display: inline-block;
								text-align: left;
								margin-left: 24px;
								top: 0px;
							}
							&.uwt-button
							{
								min-height: 28px;
							}
						}
					}
				}
				&> div.uwt-title
				{
					position: absolute;
					bottom: 0px;
					left: 0px;
					right: 0px;
					text-align: center;

					padding: 2px;
					font-size: 0.8em;
				}
			}
		}
	}
}