// Modal
// 
// Modals are pop-ups, or something similar, that require some user interaction before they disappear. 

// Modal
// 
// Markup:
// <div class="modal {{modifier_class}}">
// 	<div class="ui-dialog-titlebar">
// 		<div class="ui-dialog-titlebar-close">X</div>
// 	</div>
// 	<div class="modal-header">
// 		<h2 class="heading">Heading</h2>
// 	</div>
// 	<div class="modal-body">
// 		This is the body of the modal
// 	</div>
// 	<div class="modal-footer">
// 		This is the modal foote
// 	</div>
// </div>

// modal background screen
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: @index-9;

	width: 100%;
	height: 100%;

	background-color: @ui-dialog-overlay-bgcolor;
	background-image: url(@ui-dialog-overlay-bgimage);
	background-position: 50% 50% repeat;
	background-repeat: repeat;
	opacity: .50;

	filter: Alpha(Opacity=50);
}

.modal {
	.radius(3);

	left: 50% !important;
	z-index: @index-10 !important;

	display: inline-block;
	padding: 25px;
	overflow: hidden;

	background: @modal-bgcolor;
	-webkit-background-clip: padding-box;
	border: 1px solid @modal-bordercolor;
	box-shadow: @modal-dropshadow;
	// JQUERY UI CLASSES
	.ui-dialog-titlebar {
		.ui-dialog-title {
			display: none;
		}
		.ui-dialog-titlebar-close {
			position: relative;
			top: 0;
			right: 0;
			z-index: 2;

			float: right;
			width: 11px;
			height: 14px;
			padding: 0;

			background: none;
			border: none;
			.ui-icon-closethick {
				display: block;
				width: 20px;
				height: 20px;
				overflow: hidden;

				text-indent: -99999px;

				background-color: @ui-dialog-close-bgcolor;
				background-image: url(@ui-dialog-close-bgimage);
				background-position: -2px -3px;
				background-repeat: no-repeat;
				border-radius: 2px;
			}
			&:hover .ui-icon-closethick {
				background-position: -2px -23px;
			}
			.ui-button-text {
				.off-page;
			}
		}
	}
	// CUSTOM CONTENT
	.modal-header {
		> .heading {
			margin-bottom: 0;

			color: @modal-heading-color;
		}
	}
	.modal-content {
		margin-top: 25px;
	}
	.modal-footer {
		.fontsize(1.2);

		margin-top: 25px;
	}
	.msg {
		.fontsize(1.3);

		margin-top: 25px;
		margin-bottom: 0;
	}
}