/* IMPORTANT NOTE: 
When changing the size of heights of elements for sysmex (eg. the height of the footer, or distance between rows etc)
Make sure you update the javascript file with the new heights and sizes as well.
*/

.clr
{
	float:none;
	clear:both;
}

.fullWidth
{
	width: 100%;
}
.hand
{
	cursor: pointer;
}


.outerFrame
{
	margin: 0 auto;
	width: 1018px;
	height : 100%; /* IE treats as min-height */
}


.leftShadow
{
	width: 1018px;
	/*float: left;*/
	height: 100%;
	background: transparent url(../background/sysmex_bg_shadow_left.jpg) repeat-y scroll left top;
}

.rightShadow
{
	height: 100%;
	background: transparent url(../background/sysmex_bg_shadow_right.jpg) repeat-y scroll right top;
}

.innerArea
{
	margin: 0 auto;
	padding: 0;
	width: 980px;
	height: 100%;
	background: transparent url(../background/sysmex_bg_main.jpg) repeat-y scroll center top;
}

.innerWrapper
{
	height: 100%;
	margin: 0 40px 0 40px;
}


.topArea
{ 
	padding: 11px 10px 0 11px;
	height: 61px;
}

.topArea .logo
{	
	width: 176px;
	height: 54px;
	float: left;
	background: transparent url(../background/sysmex_logo.png) no-repeat scroll left top;
}

.topArea .searchContainer
{	
	float:right;
	width: 200px;
	height: 30px;
}

/* Background Colour (white shade)*/
.bgColor
{
	background: transparent url(../background/bgColor.png) repeat-y left top; 
}

/* Corners  */
.tlCrn
{
	height: 19px;	width: 19px;
	float: left;
	background: transparent url(../background/sysmex_rc_tl.png) no-repeat scroll left top;
}

.trCrn
{
	height: 19px;	width: 19px;
	float: right;
	background: transparent url(../background/sysmex_rc_tr.png) no-repeat scroll right top;
}

.blCrn
{
	height: 19px;	width: 19px;
	background: transparent url(../background/sysmex_rc_bl.png) no-repeat scroll left bottom;
	float: left;
}
.brCrn
{
	height: 19px;	width: 19px;
	background: transparent url(../background/sysmex_rc_br.png) no-repeat scroll right bottom;
	float: right;
}

.loginPanel
{
	margin: 0 auto 0 auto;
	padding: 0;
	width: 275px;
}

.breadCrumbsContainer
{
	width: 900px;
	margin: 5px 0;
}

.banner
{
	margin-top:12px;
}

.bottomArea
{
	width: 900px;
	/*height: 100%;*/
}

.right
{
	float:right;
	text-align:right; /*ensures alignment in IE6*/
}

.left
{
	float:left;
}





/* REGION FOR NAVIGATION AREA */
#navigation
{
	float: left;
	width: 862px;
	min-height: 25px;
	padding-top: 4px;
}

.navCrn
{
	float:left;
	width:19px;
}

.navFill
{
	height: 10px;
	width: 19px;
}


/* IMAGE STYLES */

.listArticle .thumbnail
{
	/*height: 100px;*/
	width: 100%;
	margin: 25px 0 5px 0;
}

.articleContent .thumbnail
{
	width: 100%;
	margin: 0 0 5px 0;
}

/* Stop images from blowing outside the width of the article content
.articleContent /*>div
{
	overflow: hidden;
}*/

/* Hide all thumbnails for any column that has a width of 50% or more */
#content1 #region1 .thumbnail, #content2 #region1 .thumbnail, #content2 #region2 .thumbnail, #content5 #region2 .thumbnail, 
#content9 #region1 .thumbnail, #content6 #region2 .thumbnail, #content7 #region1 .thumbnail, #content8 #region1 .thumbnail
{
	display:none;
}





/* REGION FOR COLUMN WIDTHS */
.columns
{
	margin:0 12px 0 0;
	float: left;
	height: 100%;
}

/* 4 Column Layout*/
#content4 #region1
{
	width: 215px;
}
#content4 #region2
{
	width: 215px;
}
#content4 #region3
{
	width: 215px;
}
#content4 #region4
{
	margin-right: 0;
	width: 215px;
}

/* 3 Column Layout*/
#content3 #region1
{
	width: 292px;
}
#content3 #region2
{
	width: 292px;
}
#content3 #region3
{
	width: 292px;
	margin-right: 0;
}


/* 2 Column Layout*/
#content2 #region1
{
	width: 441px;
}
#content2 #region2
{
	width: 441px;
	margin-right: 0;
}

/* 1 Column Layout */
#content1 #region1
{
	width: 900px;
	margin: 0;
}


/* 2 Column Layout  Col1 1/4Width  Col2 3/4Width*/
#content5 #region1
{
	width: 222px;
}
#content5 #region2
{
	width: 664px;
	margin-right: 0;
}



/* 2 Column Layout  Col1 3/4Width  Col2 1/4Width*/
#content9 #region1
{
	width: 664px;
}
#content9 #region2
{
	width: 222px;
	margin-right: 0;
}

/* 2 Column Layout  Col1 1/3Width  Col2 2/3Width*/
#content6 #region1
{
	width: 296px;
}
#content6 #region2
{
	width: 591px;
	margin-right: 0;
}

/* 2 Column Layout  Col1 2/3Width  Col2 1/3Width*/
#content7 #region1
{
	width: 591px;
}
#content7 #region2
{
	width: 296px;
	margin-right: 0;
}

/* 3 Column Layout*/
#content8 #region1
{
	width: 437px;
}
#content8 #region2
{
	width: 219px;
}
#content8 #region3
{
	width: 219px;
	margin-right: 0;
}






/* SIDEBAR PAGE TEMPLATE */
#content10 #region1, #content11 #region1
{
	width: 200px;	/* Menu Bar Width */
}

#content10 #region2
{
	width: 686px;
	margin-right: 0;
}

#content11 #region2
{
	width: 337px;
}

#content11 #region3
{
	width: 337px;
	margin-right: 0;
}





/* REGION FOR DIV CORNERS */
.headerCenter
{
	height: 19px;
	margin: 0 19px 0 19px;
}
.headerLft
{
	width: 100%;
	height: 19px;
	background: transparent url(../background/sysmex_rc_tl.png) no-repeat scroll left top;
}
.headerRt
{
	height: 19px;
	background: transparent url(../background/sysmex_rc_tr.png) no-repeat scroll right top;
}
.footerLft
{
	width: 100%;
	height: 19px;
	margin: 0 0 12px 0;
	background: transparent url(../background/sysmex_rc_bl.png) no-repeat scroll left bottom;
}
.footerRt
{
	height: 19px;
	background: transparent url(../background/sysmex_rc_br.png) no-repeat scroll right top;
}



/* LEFT ALIGN THE MENU SO IT MATCHES THE LOGO POSITION */
#mainMenuContainer
{
	padding-left: 30px;
}

/* CSS FOR CENTERING MENU 
#mainMenuContainer
{
	margin-left: auto;
 	margin-right: auto;
 	display: inline-block;
 	border-collapse:collapse;
 	border-spacing: 0;
}
#navigation
{
	text-align: center;
}

 ONLY SET FOR IE7 - HACK FOR CENTERING THE MENU 
*:first-child+html #mainMenuContainer
{
	display: inline;
	zoom: 1;
}
*/



/* CSS STYLING FOR THE SCROLLING CONTAINERS AND SCROLL BARS */
.sliderTrackInner {  
     height: 100%;
     background: Transparent url(../background/Scrollbar_track_bottom.png) no-repeat scroll left bottom;  
 } 
 
 .sliderTrackOuter
 {
 	 float: right;
     top:0;  
     right:0;  
     margin-right:-13px;
     margin-left:5px;
     height:100%;  
     margin-left:5px;
     width:13px;  
     background: Transparent url(../background/Scrollbar_track_top.png) no-repeat scroll left top;  
 }
 
 .sliderHandleTop {  
     width:8px;  
     margin: 2px;
     background:  #D9EDE7 url(../background/ScrollbarTop.png) no-repeat scroll left top;
 } 
 
 .sliderHandleTop:hover
 {
 	 background:  #B3DBD0 url(../background/ScrollbarTopHover.png) no-repeat scroll left top;
 }
 
 .sliderHandleBottom {  
     background : transparent url(../background/ScrollbarBottom.png) no-repeat scroll left bottom;
     height: 100%;
 } 
 
 .sliderHandleBottom:hover 
 {
 	 background: transparent url(../background/ScrollbarBottomHover.png) no-repeat scroll left bottom;
 }
 
 .scrollingContent
 {
 	overflow: hidden;
 	height: 100%;
 }