/**
 *	This document contains mandatory styles for E18 Javascript
 *	framework. This should not be edited under any normal
 *	circumstances as what is here should be included into 
 *	projects automatically via Javascript functions.
 */

/**
	Be sure to have an image that blends to the background.
	For certain images it may be better to use 'width' 
	instead of 'height'.
 */
.e18backgroundImage{
	position: absolute;
	top: 0;
	left: 0;
	z-index:0;
}

/**
	This also eats mouse clicks and drags so background image
	should stay intact. It would be a good idea to have
	javascript to generate the background for BODY and set the
	color and opacity of this dimmer. This would keep the code
	more clean.
 */
.e18pageDimmer{
	position:absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
	background:#000;
	z-index:0;
}


/**
	Header and footer for placing things on top and to the 
	bottom of the window. Put overlays inside these to adjust
	the filling, and use "e18overlayContent" class to make
	positioning easier.
 */
.e18header {
	position:absolute;
	top:0px;
	left:0px;
	height:2em;
	width:100%;
	z-index: 1;
}

.e18footer {
	position:absolute;
	bottom: 0px;
	height:2em;
	width:100%;
	z-index: 1;
}

.e18container {
	opacity: 0;
	display: none;
}

/**
	Override styles like color and opacity from project specific
	settings, but don't mess with these default ones.
 */
.e18overlay {
	width:100%;
	height:100%;
	z-index:2;
	
	background:#fff;
	opacity: 0.8;
}

/**
	This resets the reference position to the top left of the
	container of the overlay. Add parameters to project
	specific css file.
 */
.e18overlayContent {
	position:absolute;
	top:0px;
	left:0px;
	/*display:none;*/
	opacity:0;
}

.e18threeColumns { -webkit-column-count: 3;	}
.e18javascriptButton { cursor: pointer;	}