/*------------------------------------*\
    $MODAL
\*------------------------------------*/
/**
 * Basic modal structural styling. 
 * 
 * Designed and built @kurenn based on http://labs.voronianski.com/jquery.avgrund.js/
 */

/* html and body styling */
/*--------------------*/
html, body {
	height: 100%;
	overflow: auto;
}

/* Popin window style */
/*--------------------*/
.avgrund-popin {
	position: absolute;
	background: $white;
	padding: 10px;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	filter: alpha(opacity=0);
	top: 50%;
	left: 50%;
	z-index: 1000;
  @include box-shadow(0 1px 10px 0 rgba(0, 0, 0, .5));
}

.avgrund-overlay {
	background: #000;
	opacity: .5;
	filter: alpha(opacity=50);
	width: 100%;
  height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 101;
	visibility: hidden;
}

body.avgrund-ready,
.avgrund-ready .avgrund-popin,
.avgrund-ready .avgrund-overlay {
  @include transition(0.3s all ease-out);
}

body.avgrund-active {
	overflow: hidden;
}

.avgrund-active .avgrund-popin {
	visibility: visible;
	opacity: 1;
	filter: alpha(opacity=100);
  @include scale(1.1);
}

.avgrund-active .avgrund-overlay {
	visibility: visible;
	opacity: .5;
	filter: alpha(opacity=50);
	height: 20000px;
}

/* Optional close button styles */
/*--------------------*/
.avgrund-close {
	display: block;
	color: #555;
	font-size: 13px;
	text-decoration: none;
	text-transform: uppercase;
	position: absolute;
	top: 6px;
	right: 10px;
}

/* Modal header and footer styling */
/*--------------------*/
.modal-header {
  border-bottom: 1px solid #CCC;
  margin-bottom: 10px;

  .header {
    margin: 10px 0px;
    text-align: center;
  }
}

.modal-footer {
  position: absolute;
  bottom: 5px;
  right: 15px;

  .btn + .btn {
    margin-right: 6px;
  }
}