@import 'constants';

#WRAPPER > div.dialog{

	display: block;
	position: absolute;
		top: 0;
		left: $menu-width;
		width: $dialog-width;
		height: 100%;

	background-color: $dialog-bg;

	/* (1) Container HEADER */
	& > div.header{
		display: block;
		position: absolute;
			top: 0;
			left: 0;
			width: calc( 100% - 2*1em );
			height: calc( #{$header-height} - #{$header-height/2} );

		border-bottom: #{$bb-height} solid darken($dialog-header-bg, 5%);
		box-shadow: 0 #{$bb-offset - $bb-height} 0 darken($dialog-header-bg, 2%);

		z-index: 200;

		font-weight: bold;

		padding: #{$header-height/4} 1em;

	}

	/* (2) Container BODY */
	& > div.body{
		display: block;
		position: absolute;
			top: calc( #{$header-height} + #{$bb-offset} );
			left: 0;
			width: 100%;
			height: calc( 100% - #{$header-height} - #{$bb-offset} );

		background-color: $dialog-bg;

		z-index: 100;
	}

}