@charset "utf-8";

/* Layout Document */

*
{
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
}

html,
body 
{		
	width:100%;
	height: 100%;
}

body 
{		
	border:0;			/* This removes the border around the viewport in old versions of IE */		
	min-width:1000px;	/* Minimum width of layout - remove line if not required */
						/* The min-width property does not work in old versions of Internet Explorer */	
}

/* Header */
#header 
{
	position:relative;
	clear:both;
	float:left;
	width:100%;
	height:125px;		
}

/* Header - logo */
#header #logo 
{
	position:absolute;
	left: 15%;	
	width: 350px;
}

/* Header - logo image */
#header #logo .logoimg
{	
	position:absolute;
	left: -100px;
	top: 71px; /* 58 + (125-114) + 2 = 58 + 11 = 69*/	
}

.logoimg
{
	display: block;
	width:347px;
	height:114px;	
	background: transparent url(/Public/General/Img/GUI/Logo/logo.png) no-repeat left top;
	z-index:1000;
}

.logoimg span
{
	display:block;
	width:0;
	height:0;
	overflow:hidden;
}

/* Header - easeltop */
#header #easeltop 
{
	position:absolute;
	left: 50%;		
	top: 0;
}

#header #easeltop .easeltopimg
{	
	position:relative;
	left: -27px; /* 55px / 2 */
	top: 75px;  
}

.easeltopimg
{	
	background: transparent url(Images/easeltop.png) no-repeat left top;
	z-index:999;
}

#header #easeltop,
.easeltopimg
{
	height: 66px;
	width: 55px;
}

/* Main */
#main 
{
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	width:100%;			/* width of whole page */		
	overflow:hidden;	/* This chops off any overhanging divs */	
}

#main_decorate_bottom
{
    float:left;
    width:100%; 
	position:relative;	
}

.canvas_left,
.canvas_right
{
	position:absolute;
	width:10%;	/* width_canvas_leftright */
}

.canvas_left
{
	left:15%; /* 15 (width_content_leftright) */
}

.canvas_right
{
	left:75%; /* 15 (width_content_leftright) + 70 (width_canvas = width_content) - 10 (width_cancas_leftright) = 75% */
}

.canvas_top,
.canvas_bottom
{	
	height: 5%; /* height_canvas_topbottom */	
}

.canvas_bottom
{		
	top: 95%; /* 100 - 5 (height_canvas_topbottom) = 95% */		
}

/* x-axis */
.canvas_center
{
	position:absolute;
	left:23%; /* 15 (width_content_leftright) + 10 (width_canvas_leftright)  - 2 (Chrome rounding bug) = 23% */
	width:54%;	/* 100 - ( 2 * ( 15 (width_content_leftright) + 10 (width_canvas_leftright) ) ) + 2 * 2 (Chrome rounding bug) = 54% */
}

/* y-axis */
.canvas_middle
{
	top: 3%; /* height_canvas_topbottom - 2 (Chrome rounding bug) */
	height: 94%; /* 100 - ( 2 * 5 (height_canvas_topbottom) ) + 2 * 2 (Chrome rounding bug) = 94% */
}

.column
{
	float:left;
	position:relative;
	padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
					only padding top and bottom is included here, make it whatever value you need */
	overflow:hidden;
}

.column_side
{
	width:15%;			/* Width of left column content (column width minus padding on either side) */
}

.column_center
{
	width:70%;			/* width of center column content (column width minus padding on either side) */
}


#main_content
{
	padding: 60px 20px 20px 20px;
}

/* Footer */
#footer 
{
	position:relative;
	clear:both;
	float:left;
	width:100%;	
	height: 350px;	
}

#footer_top
{	
	position:relative;
	width:100%;		
	height: 200px;	
	
}

#footer_bottom
{	
	position:relative;
	width:100%;	
	height: 150px;		
}

/* Footer - easelbottom */
#footer #footer_top #easelbottom 
{	
	position:absolute;
	left: 50%;	
	width: 291px;
	top: 0;
}

#footer #footer_top #easelbottom .easelbottomimg
{	
	position:absolute;
	left: -145px; /* 291/2 */
	top: -10px;  
}

.easelbottomimg
{
	width: 291px;
	height: 150px;
	background: transparent url(Images/easelbottom.png) no-repeat left top;
	z-index:998;
}

/* Content */
.content_placeholder
{
	position:absolute;
	left: 15%;
	width:70%;	
	height: 100%;
	overflow: visible;
}

.content_placeholder_no_overflow
{
	overflow:hidden;
}

.cmsLangDropDown
{	
	float: right;
	margin: 100px 0 0 0;	
}