@charset "utf-8";

html {
	/*show vertical scroll bar, so the page content always remains in the center.  
	For example, if the page content fits on one page, 	the scroll bar does not appear.  When you visit the second page and there is content that fits on more than one page and the scroll bar appears, the page content does not look centered compared to the first page you visited (which fits on one page).  */
	overflow-y:scroll;
}

body  {

	background: #990000; /* Alternatives: #660000 (grey), #990000 (red) - controls background colour */
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;

	/* this centers the container (#mainContent) (i.e. the page) in IE 5* browsers. The text is then set to the left aligned default in the #container (#mainContent) selector */
	text-align: center; 
	color: #333333 ;

	/*No margins */
	margin-left: 0px;
	/*Add margin to create a space at the top of the page rather than creating a blank table at the top of each page (as I did this before)*/
	margin-top: 40px;
	margin-right: 0px;
	margin-bottom: 0px;


}

/*
To ensure that the fixed-with design is centered on all common browsers we must add the text-align:center; on the body tag, plus also left and right margins of 'auto' on our new div. 
If we fail to do both of these things then the layout will not be centered but instead push to the left in non-standard browsers like Internet Explorer.

The fixed div has text-align:left; to override the center on the body tag that would otherwise center all the text on the page.

Finally the fixed-div is given a width - this is the part that makes the layout 'fixed'. You have three choices of units; pixels, ems and percent.
◦Pixels will set the layout to an exact pixel width. If this width is larger than the size of the browser viewport then the page will scroll sideways.
◦Ems will give you a width relative to the size of the text on your page. If you change your text size then the width of the layout will change too (smaller text = smaller width etc).
◦Percent will give a width relative to the size of your browser window. For example: 90% will always give a layout width of 90% of the visible page.
*/	

div#mainContent {
  width: 850px;  
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* ALTERNATIVELY
If you want your table to be of fixed width, define your CSS like this: 

  div.container {width:98%; margin:1%;}
  table#table1 {text-align:center; margin-left:auto; margin-right:auto; width:100px;}
  tr,td {text-align:left;}
Set "width:100px" to whatever width you need. 

"text-align: center" is there for Internet Explorer, which won't work without it. Unfortunately, "text-align: center" will center all the text inside your table cells, but we counter that by setting "tr" and "td" to align left. 

In your HTML, you would then do this: 

  <div class="container">
    <table id="table1">
      ...
    </table>
  </div>
Once again, I'm using an id. If you need to center several tables the same way, use a class instead of an id. 

*************
div.container 
	{width:98%; margin:1%;}
table {text-align:center; margin-left:auto; margin-right:auto; width:850px;}
tr,td {text-align:left;}
*************
*/


h1 {
	background-image:url(../images/static/HeadingBullet.gif);
	background-repeat:no-repeat;
	background-position:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color:#262626;
	font-weight:bold;

}


h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color:#262626;
	font-weight:bold;

} 

.rightborder {
	border-right: #666666;
	border-right-width:thin;
	border-right-style:solid;
}

.bg-white {
	background:#FFFFFF;
}

.table-padding {
	padding: 7px 2px 7px 7px;
}



.bg-grey { 
	background: #EFEFEF; /*dARKER SHADE OF GREY IS #EAEAEA;*/
}

.bg-clear { 
	background: #FFFFFF; /*dARKER SHADE OF GREY IS #EAEAEA;*/
	
}


.bg-linesplit { 
	background:url(../images/Static/LineSplit.gif);
} 

.bg-top { 
	background:#990000;
	margin: 0 ; /* margin: 0 auto;  =the auto margins (in conjunction with a width) center the page */
	width: 100% ; /* width: auto */
	
} 
.bg-side { 
	background:#990000;
	margin: 0; /* margin: 0 auto;  =the auto margins (in conjunction with a width) center the page */
	/*width: 50%; /* width: auto */
	
} 

.bg-middle { 
	background:#FFFFFF; /* controls background colour */
	/*background-image:url(../images/MainContent.gif); /*OR CAN HAVE A GIF IMAGE AS THE BACKGROUND RATHER THAN SETTING A BACKGROUND COLOUR */
	margin: 0; 
	/*padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */


} 

.bg-darkgrey {
	background: #8B8E93; /*#9B9B9B; /* controls background colour */
}

.box {
	padding: 3px;
	/*border-width: thin;
	border-style: solid;
	border-color: #990000 #990000 #990000 #990000; #666666 #666666 #666666 #666666; */
	background-color: #8B8E93; /*#990000;#666666;*/
	background-image:url(../images/bg_Item.jpg);
		
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 18px;
	color:#FFFFFF;
	font-weight:bold;


}

.boxHelpful {
	padding: 3px;
	/*border-width: thin;
	border-style: solid;
	border-color: #990000 #990000 #990000 #990000; #666666 #666666 #666666 #666666; */
	background-color: #8B8E93; /*#990000;#666666;*/
	background-image:url(../images/bg_Blue.jpg);
		
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 18px;
	color:#FFFFFF;
	font-weight:bold;
}

.txt-news {
	color:#FFFFFF;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
}

.txt-sidebar {
	color:#666666;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
}

.hyperlink-menu {
	color:#851b1b;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 16px;

}

.txt-OfficesHeading {
	color:#000000;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 16px;
	font-weight:900;
}


.txt-Offices {
	color:#000000;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
}

.txt-email {
	color:#990000;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;


}

.PracticeAreasList {

	color:#851b1b;
	list-style:square;
	list-style-image:url(../images/static/LBullet.gif);	

}


.PracticeAreaLink {

	color:#851b1b;

}

#breadcrumb ul li {
   list-style-image: none;
   display:inline;
   padding: 0 0px 0 0;
   margin: 0px 0 0 0;
}

#breadcrumb ul{
   margin:0;padding:0;
   list-style-type: none;
   padding-left: 1em;
}

.navbreadcrumb {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 12px;
   padding-left: 0.2em;
   text-decoration: none;
}

.currentbreadcrumb {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #851b1b;
   padding-left: 0.2em;
}
.error {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: Red;
	font-weight: bold;
	margin-left: 15px;
}