BODY {
	FONT-SIZE: 12px; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
	background:#cccccc url(background_1007.gif) repeat-y center ;
	margin:0 0 0 0 ;
	padding:0 0 0 0;
	
}


.wholepage {
	margin:auto;
	width:950px;
	background-color:#FFFFFF;
	margin-bottom: 0px;
	border: 2px solid #AB0013;
}



A:link {
	COLOR: #000099;
	text-decoration: underline;
}
A:visited {
	COLOR: #000099;
	text-decoration: underline;
}
A:active {
	COLOR: #000099;
	text-decoration: underline;
}
A:hover {
	COLOR: #AB0013;
	text-decoration: underline;
}

.singlecolumn A {
	COLOR: #333333; TEXT-DECORATION: none;
	font-size: 11px;
	}

H1 {
	FONT-SIZE: 125%; COLOR:  #AB0013; FONT-STYLE: normal;
}

H2 {
	FONT-WEIGHT: bold; FONT-SIZE: 110%; COLOR:  #AB0013; FONT-STYLE: normal;
	margin-bottom: 3px;
	margin-top: 3px;
}

/*
this is affecting the drop down menus as well.
so the list-style-image must be removed from the SpryMenuBarHorizontal.css 
*/


UL {
	LIST-STYLE-IMAGE: url(triangle-red.png); 
	VERTICAL-ALIGN: middle; 
	LINE-HEIGHT: 125%;
}


ol {
vertical-align: top;
line-height: 125%;
}

li {
margin-bottom: 5px;
}

/* =================================================== *
/* ====== end of rules for HTML tags ==================*/





.container {
/* redundant as replace with margin: auto on wholepage MWW
	TEXT-ALIGN: center
*/
}


.topbanner {
	BACKGROUND-POSITION: center top; 
	BACKGROUND-IMAGE:url(csi-new-header.png);
	BACKGROUND-REPEAT: no-repeat; 
	HEIGHT: 170px;
	min-HEIGHT: 170px;
	
/* redundant and position absolute is causing problems for DIVS below MWW	
	LEFT: 0px; 
	WIDTH: 950px; 
	POSITION: absolute; 
	TOP: 0px; 
	
*/	
	
}
.menu {
/* these are redundant MWW	
	LEFT: 0px; 
	VISIBILITY: visible; 
	
	POSITION: absolute; 
	TOP: 170px; 
*/
	
	WIDTH: 950px;
	height: 25px;
	padding-top: 2px;
	background-color: #F7ED80;
	border-top: solid 2px #F7ED80;
	border-bottom: solid 1px #AB0013;
	}
	
.pageheading {

/* these are redundant MWW	

	BACKGROUND-POSITION: center bottom;
	BACKGROUND-REPEAT: no-repeat;
	WIDTH: 950px; 
	PADDING-TOP: 210px; 
*/
	
	MARGIN-BOTTOM: 7px;
	padding-top: 10px; 	
}


.pageheading H1 {
	FONT-SIZE: 150%; PADDING-BOTTOM: 10px; MARGIN: 0px; TEXT-ALIGN: center; 
}


.maintext {
/* redundant because the don't actually move anything.
The just make .maintext a positioned container, which might affect 
any posisions : absolute within it.  But as there are no position absolutes,
its worthless. MWW

	LEFT: 0px; 
	POSITION: relative; 
	TOP: 0px;

*/
}


TD {
	FONT-SIZE: 12px; COLOR: #333333; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #ffffff;
	text-align: justify;
}
.greybox {
	PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 90%; PADDING-BOTTOM: 5px; WIDTH: 205px; COLOR: #333333; LINE-HEIGHT: 125%; PADDING-TOP: 5px; HEIGHT: 55px; TEXT-ALIGN: left
}
.whitebox {
	PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 90%; PADDING-BOTTOM: 5px; WIDTH: 205px; COLOR: #333333; LINE-HEIGHT: 125%; PADDING-TOP: 5px; HEIGHT: 55px; TEXT-ALIGN: left
}
.greybox IMG {
	PADDING-RIGHT: 5px
}
.whitebox IMG {
	PADDING-RIGHT: 5px
}
.greybox {
	BACKGROUND-COLOR: #cccccc
}
.whitebox {
	BORDER-BOTTOM: #333333 1px dotted
}
.whitebox A {
	TEXT-DECORATION: none
}
.greybox A {
	TEXT-DECORATION: none
}
.whitebox A:hover {
	COLOR: #0000cc; TEXT-DECORATION: underline
}
.greybox A:hover {
	COLOR: #0000cc; TEXT-DECORATION: underline
}

.content A:link {
	COLOR: #000099;
	text-decoration: underline;
}

.content A:hover {
	COLOR: #AB0013;
	text-decoration: underline;
	} 
	
.content A:visited {
	COLOR: #000099;
	text-decoration: underline;
}
.content A:active {
	COLOR: #000099;
	text-decoration: underline;
}

.linkbox {
/* 
	WIDTH: 190px

*/

}
.textbox {
	BORDER-RIGHT: #ffffff 1px solid;
	PADDING-RIGHT: 5px;
	BORDER-TOP: #ffffff 1px solid;
	PADDING-LEFT: 5px;
	FONT-SIZE: 12px;
	PADDING-BOTTOM: 10px;
	BORDER-LEFT: #ffffff 1px solid;
	COLOR: #333333;
	LINE-HEIGHT: 125%;
	PADDING-TOP: 10px;
	BORDER-BOTTOM:  #AB0013 1px dotted;
	TEXT-ALIGN: justify;
	margin-bottom: 10px;
	width: 700px;
	}
.textbox IMG {
	PADDING-RIGHT: 5px;
}
.twocolumn {
	FLOAT: left; WIDTH: 440px
}
.singlecolumn {
	CLEAR: both; PADDING-LEFT: 7px; FONT-SIZE: 90%; FLOAT: left; PADDING-BOTTOM: 10px; WIDTH: 180px; COLOR: #333333; LINE-HEIGHT: 125%; PADDING-TOP: 1px; TEXT-ALIGN: left
}
.leftcolumn {
	FLOAT: left; WIDTH: 210px
}
.midcolumn {
	FLOAT: right; WIDTH: 220px
}
.doublecolumn {
PADDING-LEFT: 5px; FLOAT: right; WIDTH: 745px;
clear: right;
}
.midcolumn P {
	CLEAR: both; MARGIN-BOTTOM: 10px; TEXT-ALIGN: left;
}
.rightcolumn {
	PADDING-LEFT: 5px; FLOAT: right; MARGIN-LEFT: 5px; BORDER-LEFT: #fff04f 3px solid; WIDTH: 295px;
}

.left-text {
	FLOAT: left; WIDTH: 242px; FONT-SIZE: 90%; COLOR: #333333; LINE-HEIGHT: 125%; TEXT-ALIGN: justify; 
	}
	
.double-text {
FLOAT: right; WIDTH: 485px;  
}
.mid-text {
	FLOAT: right; WIDTH: 242px; FONT-SIZE: 90%; COLOR: #333333; LINE-HEIGHT: 125%; TEXT-ALIGN: justify; 
}
.right-text {
	FLOAT: right; WIDTH: 242px; FONT-SIZE: 90%; COLOR: #333333; LINE-HEIGHT: 125%; TEXT-ALIGN: justify; 
}


STRONG {
	COLOR:  #AB0013
}
B {
	COLOR: #000000
}
.menubox {
	FONT-SIZE: 85%; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; BORDER-BOTTOM: #ffffff 1px dotted; TEXT-ALIGN: left
}

.footer {
	/* 
 added Clear:both to cancel out any of the float:left and float:right on the 
 singlecolumn and doublecolumn DIV above. MWW
*/

	clear:both;
	BORDER-TOP: #AB0013 3px solid;
	FONT-SIZE: 10px;
	PADDING-BOTTOM: 7px;
	PADDING-TOP: 2px;
	BACKGROUND-COLOR: #F7ED80;
	TEXT-ALIGN: center;
	margin-bottom: 0px;
}


.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
  .b1 {height:1px; background: #999; margin:0 5px;}
  .b2 {height:1px; background:#fff; border-right:2px solid #999;
         border-left:2px solid #999; margin:0 3px;}
  .b3 {height:1px; background:#fff; border-right:1px solid #999;
         border-left:1px solid #999; margin:0 2px;}
  .b4 {height:2px; background:#fff; border-right:1px solid #999;
         border-left:1px solid #999; margin:0 1px;}
  .content {background: #ccc; border-right:1px solid #999;
         border-left:1px solid #999;}
  .content div {margin-left: 7px; margin-right: 7px; color: #000;} 
  
  .content strong {
  color:  #AB0013
  }
  
 .content div{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#333333;
}

 .content {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#333333;
}
  

.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh { 

font-size : 1px; 

overflow : hidden; 

display : block; 

} 

.b1h { 

height : 1px; 

background : #aaa; 

margin : 0 5px; 

} 

.b2h, .b2bh { 

height : 1px; 

background : #aaa; 

border-right : 2px solid #aaa; 

border-left : 2px solid #aaa; 

margin : 0 3px; 

} 

.b3h, .b3bh { 

height : 1px; 

background : #aaa; 

border-right : 1px solid #aaa; 

border-left : 1px solid #aaa; 

margin : 0 2px; 

} 

.b4h, .b4bh { 

height : 2px; 

background : #aaa; 

border-right : 1px solid #aaa; 

border-left : 1px solid #aaa; 

margin : 0 1px; 

} 

.b2bh, .b3bh, .b4bh { 

background : #ddd; 

} 

.headh { 

background : #aaa; 

border-right : 1px solid #aaa; 

border-left : 1px solid #aaa; 

} 

.headh h3 { 

margin : 0 10px 0 10px; 

padding-bottom : 3px; 

} 

.contenth { 

background : #ddd; 

border-right : 1px solid #aaa; 

border-left : 1px solid #aaa; 

} 

.contenth div { 

margin-left : 12px; 

margin-right : 12px; 

padding-top : 5px; 

padding-bottom : 5px; 

}


.contenth div{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#333333;
}

.content img{
padding-left: 5px;
}


.contenth A:link {
	COLOR: #333333;
	text-decoration: underline;
}

.contenth A:visited {
	COLOR: #333333;
	text-decoration: underline;
}
.contenth A:active {
	COLOR: #333333;
	text-decoration: underline;
}
.contenth A:hover {
	COLOR:  #AB0013;
	text-decoration: underline;
}

.headh h3{
font-size: 150%;
font: Verdana;
color: #FFCC00;
font-weight: bold;
font-stretch: expanded;
padding-bottom: 9px;
padding-top: 3px;
text-align: center;
}


.shadow {
background:#CCCCCC; /* shadow color */
border:1px solid #CCCCCC; /* darker border color */
margin: auto;
position: relative;
width: 165px;
}

.shadow img {             
background:#ffffff; /* shadow color */
border:1px solid #999999; /* darker border color */
padding:5px ;
position:relative;
top:-4px;
left:-4px;
}


  
  
  

  .frame {
    text-align: center; 
    background: #FFFFFF; 
    border: 1px solid #999999; /* lighter border color */
    position: relative; 
    padding: 5px;
    left:-4px; /* you can change this to change the amount of shadow */
    top:-4px; /* you can change this to change the amount of shadow */
  } 
  
  
  .piccy_left {
    clear : both ; 
    float:left ;
    padding-right : 10px;
}

.piccy_right {
		clear : both ; 
		float:right ;
		padding-left : 10px;
}
  
/* =================================================== *
/* ====== start of rules for IDS =====================*/



/* ====== end of rules for IDS =======================*/
/* =================================================== */