.cssMediumBoxHeader
{
background-image: url(../images/app_box_med_top.png);
background-repeat: repeat-y; 
background-position: center; 
width: 450px; 
height: 41px;	
}
.cssMediumBoxContent	
{
background-image: url(../images/app_box_med_color_bar.png);
background-repeat:  repeat-y ;
background-position: center; 
width: 450px; 
min-height: 100%; 
height: inherit;
overflow: hidden

}
.cssMediumBoxFooter
{
background-image: url(../images/app_box_med_bottom.png);
background-repeat: repeat-y; 
background-position: center; 
width: 450px; 
height: 18px;	
}    
.cssLargeBoxHeader
{
background-image: url(../images/app_box_large_top.png);
background-repeat: repeat-y; 
background-position: center; 
width: 693px; 
height: 41px;	

}
.cssLargeBoxContent	
{
background-image: url(../images/app_box_large_color_bar.png);
background-repeat:  repeat-y ;
background-position: center; 
width: 693px; 
min-height: 100%; 
height: inherit;
overflow: hidden

}
.cssLargeBoxFooter
{
background-image: url(../images/app_box_large_bottom.png);
background-repeat: repeat-y; 
background-position: center; 
width: 693px; 
height: 19px;


}  
/* Style for large box without top bar*/
.cssLargeBoxHeaderNoTopBar
{
background-image: url(../images/box_content_697px_top_shadow_no_thick_bar.png);
background-repeat: repeat-y; 
background-position: center; 
width: 693px; 
height: 19px;	
z-index : 1 ;
}
.cssLargeBoxContentNoTopBar	
{
background-image: url(../images/box_content_697px_colorbar_shadow_no_thick_bar.png);
background-repeat:  repeat-y ;
background-position: center; 
width: 693px; 
min-height: 100%; 
height: inherit;
overflow: hidden
}
.cssLargeBoxFooterNoTopBar
{
background-image: url(../images/box_content_697px_bottom_shadow_no_thick_bar.png);
background-repeat: repeat-y; 
background-position: center; 
width: 693px; 
height: 19px;
}  
/* End of style*/
.cssXLargeBoxHeader
{
background-image: url(../images/app_box_850px_top_blue_bar.png);
background-repeat: repeat-y; 
background-position: center; 
width: 850px; 
height: 41px;	
z-index : 1 ;
}
.cssXLargeBoxContent	
{
background-image: url(../images/app_box_850px_color_bar_blue_bar.png);
background-repeat:  repeat-y ;
background-position: center; 
width: 850px; 
min-height: 100%; 
height: inherit;
overflow: hidden
}
.cssXLargeBoxFooter
{
background-image: url(../images/app_box_850px_bottom_blue_bar.png);
background-repeat: repeat-y; 
background-position: center; 
width: 850px; 
height: 19px;
}  
.cssXLargeBoxHeaderNoBar
{
background-image: url(../images/app_box_850px_top_small_no_blue_bar.png);
background-repeat: repeat-y; 
background-position: center; 
width: 850px; 
height: 19px;	
z-index : 1 ;
}
.cssXLargeBoxContentNoBar	
{
background-image: url(../images/app_box_850px_color_bar_no_blue_bar.png);
background-repeat:  repeat-y ;
background-position: center; 
width: 850px; 
min-height: 100%; 
height: inherit;
overflow: hidden
}
.cssXLargeBoxFooterNoBar
{
background-image: url(../images/app_box_850px_bottom_no_blue_bar.png);
background-repeat: repeat-y; 
background-position: center; 
width: 850px; 
height: 19px;
}  

/* To be deleted after testing */

.box {
	width: 35em;
	margin-top: 50px auto;
	margin-bottom:0;
}

.box div {
	margin: 0.5em 0 0 -2.5em;
}

.box div.topleft {
	display: block;
	background: url("../images/box_content_711px_no_thick_bar_shadow_all_around.png") top left no-repeat white;
	padding: 2.0em 0em 0em 2.0em;
}

.box div.topright {
	display: block;
	background: url("../images/box_content_711px_no_thick_bar_shadow_all_around.png") top right no-repeat white;
	padding: 2.0em;
	margin: -2.0em 0 0 2.0em;
}

.box div.bottomleft {
	display: block;
	height: 45px;
	margin-top: -2.0em;
	background: url("../images/box_content_711px_no_thick_bar_shadow_all_around.png") bottom left no-repeat white;
}

.box div.bottomright {
	display: block;
	background: url("../images/box_content_711px_no_thick_bar_shadow_all_around.png") bottom right no-repeat white;
	margin-top : 0;
	border : solid 0px red;
	vertical-align :top;
	height: 45px;
	margin-left: 3.0em;
}
/* End of To be deleted css classes */