/*
	_modal.less
	-------------
	define modal
	-------------
	.modal-wrap
	.modal-header
	.modal
*/

.modal-wrap{
	left: 0;
	max-width: @max-width - 260;
	margin: 0 auto;
	padding: 0 10px;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 4;
	.hide;
}

.modal-header{
	background-color: @off-white;
	margin: 0 -@modal-pad @modal-pad;
	padding: @modal-pad;
	.corners(@modal-corner @modal-corner 0 0);
}

.modal{
	background-color: @modal-bg;
	margin: 10px 0;
	padding: 0 @modal-pad @modal-pad;
	position: relative;
	.boxsize;
	.corners(@modal-corner);
	.shadow(0 2px 4px 0 rgba(0,0,0,0.9));
		// close modal
		.close{
			color: @gray;
			text-decoration: none;
				&:before{
					content: @fa-var-times;
					font-size: 24px;
					.ico;
				}
				&:hover{ color: @red; &:after{ content: ' Dismiss'; position: relative; top: -3px; } }
		}
		h1, h2, h3, h4, h5, h6{ &:nth-child(2){ margin-top: 0; } }
		p{
			&:first-child{ .top; }
			&:last-child{ .bottom; }
			&:only-of-type{ margin: 0; }
		}
}

// responsibility
@media screen and (min-width: @min-width){
	.modal{ margin: 40px 0; }
}