:root
{
	overflow:-moz-scrollbars-vertical;
overflow-x:scroll;
}

html, body {margin: 0; padding: 0; border: 0;}

body {
color: #333; 
background-color:  #f3f3f3;
background-image: url(../img/bg_header.gif);
background-position: top;
background-repeat: repeat-x;
font-family: verdana, sans-serif; 
text-align: center;
margin:0;
}

p  {margin: 0; padding: 8px;}


.clear { clear: both; }


.alignright {margin-top: 0; text-align: right;}


.container {
margin: 0 auto;
width: 760px;
text-align: left;
background: white;
border:0px solid #333;
}

/*** Below is the Tan hack, needed because the decorative side borders (thin black) on 
.wrapper. It fixes the box model of IE5.x/win, making it display the same as other browsers. ***/

* html .container {

width: 760px; 
width: 760px; 
}

.outer {

border-left: 140px solid #e4e9e9; 
border-right: 157px solid #fff;

 
}

.outerSC {


border-right: 157px solid #fff;
border-left: 140px solid #EBE9DA;
 
}


.inner {
background-image: url(../img/bg_path.gif);
background-position: top right;
background-repeat: no-repeat;
margin-left: 0px; /*** This fixes a small overlap problem in IE6. ***/
width: 619px; /*** This width is for non-IE browsers. Mozilla makes this necessary. ***/
border: 0px solid green;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows 
my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully)
***/

* html .inner {
background-image: url(../img/bg_path.gif);
background-position: top right;
background-repeat: no-repeat;
width: 100%;
}

.float-wrap {
/*background-image: url(../img/bg_path.gif);*/
background-position: top right;
background-repeat: no-repeat;
float: left;
width: 564px; /* 594 */
margin-left: -140px;/
border:0px solid yellow;     /*** Same length as left column width ***/
}

/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/

.left {
float: left;
width: 140px;
border:0px solid green; 
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
}


.right {
background-image: url(../img/bg_path.gif);
background-position: top;
background-repeat: repeat-x;
float: right; 
width: 193px;
border:0px solid red; 
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
margin:0;
padding: 28px 0 0 0;

}

* html .right {
margin: 0 -155px 0 0; /*** IE gets this margin. ***/
}

.center {
float: right;
width: 400px;
margin:0;
padding:0px;
border:0px solid red;
background-image: url(../img/bg_center.gif);
background-position: top;
background-repeat: repeat-x;
min-height: 450px;
}

.wide {
width: 100%; 
border:0px solid Lime;
}

.wide p {padding: 0px;}

#menuErsel
{
	margin: 1px 0 0 1px;
}


.top {border-width: 0 0 2px;}

.bottom {
height:25px;
}

/* Mozilla bug fixes */
html>body .inner, html>body .float-wrap {
border-bottom: 1px solid transparent;
}