*
{
    padding: 0;
    margin: 0;
    border: 0;
}

body, html {
    color: #000000;
    /*background-color: #ffffff;*/
}

body {
    min-width: 1000px;
    width: expression(documentElement.clientWidth < 1000 ? "1000px" : "auto");
}

p {
    padding: 5px 0 5px 0;
}

a {
    color: #3b73b9;
}

a:hover {
    color: #7eb5f9;
    text-decoration: none;
}

input, select, textarea {
    border: 1px solid #bbbbbb;
    padding: 2px;
    margin: 2px 0px 2px 0px;
}

hr {
	color: #dddddd;
	background-color: #dddddd;
	height: 1px;
	margin: 5px 0px 5px 0px;
	
}

.clear {
	clear: both;
}

#mainContainer {
    min-height: 300px;
    /*background-color: #ffffff;*/
}

* html #mainContainer {
    height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}

/**************************
HEADER
**************************/
#header {
    background-color: #0000ff;
}

#subHeader {
    text-align: right;
    padding: 5px 10px 5px 0px;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    color: #ffffff;
    background:url(./images/gradient.jpg) repeat-y
}

#subHeader a {
    color: #ffffff;
    text-decoration: none;
}

#subHeader a:hover {
    text-decoration: underline;
}

/**************************
CONTENT AND COLUMNS
**************************/
.outer {
    padding-left: 215px;
    /*padding-right: 200px;*/
}
/*** This is the visible right col background. Because of IE (both 6 and 7) the right col background and inner border is in fact an repating image where 1px of the left part of the image is black, and is simulating a border.
***/
* html .outer {
    /*** No need for hacking IE on this layout ***/
}

.inner {
    width: 100%;
    margin-left: -2px; /*** This fixes a small overlap problem. Without this the border on the left side of the right column won't be visible ***/
}

* html .inner {
    /*** No need for hacking IE on this layout ***/
}

/*** 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)
***/
.float-wrap {
    float: left;
    width: 100%;
    margin-left: -215px; /*** Same length as .outer padding-left but with negative value ***/
}

* html .float-wrap {
    /*** No need for hacking IE on this layout ***/
}
#content {
    float: right;
    background: #ffffff;
    margin-right: -215px; /*** Same length as .outer padding-left but with negative value ***/
    width: 100%;
}

* html #content {
    position: relative; /*** IE needs this  ***/
}

.contentWrap{
    padding: 10px;
}

.contentWrap ol, .contentWrap ul, .cell ol, .cell ul {
    margin: 3px 0px 5px 20px;
    /*color: #aaaaaa;*/
}

.contentWrap li, .cell li {
    padding-bottom: 2px;
    padding: 2px 0px 2px 0px;
}

.contentWrap h1 {
    font-style: bold;
    color: #3b73b9;
    padding: 10px 5px 10px 0px;
}

.contentWrap h2 {
    font-style: bold;
    color: #3b73b9;
    padding: 0px 5px 2px 0px;
    border-bottom: 1px solid #dddddd;
    margin: 20px 0px 10px 0px;
}

.contentWrap h3 {
	color: #3b73b9;
    font-style: bold;
    padding: 0px 5px 2px 0px;
    margin: 10px 0px 10px 0px;
}

.contentWrap td {
	padding: 5px;
}

.contentWrap .sharpNormal, .contentWrap .sharpHeader {
	padding: 20px;
	margin: 20px auto 20px auto;
    text-align: center;
}

.contentWrap .sharpNormal {
	color: #0000ff;
}

.contentWrap .sharpHeader {
    background-color: #0000ff;
    color: #ffffff;
}

.contentWrap .sharpHeader a {
	color: #ffffff;
}

.contentWrap .sharpHeader a:hover {
    color: #ffffff;
}

.contentWrap .bold {
    font-weight: bold;
}

.contentWrap .dataTable {
	margin-top: 10px;
	margin-bottom: 10px;
}

.contentWrap .dataTable tr {
	background-color: #dddddd;
}

.contentWrap .dataTable td, .contentWrap .dataTable th {
	padding: 5px;
	text-align: center;
}

.cell, .floatCell, .floatRightCell, .floatCenterCell, .highlight {
	padding: 5px;
}

.floatCell {
    float: left;
}

.floatRightCell {
    float: right;
}

.floatCenterCell {
    margin-left: auto;
    margin-right: auto;
}

.thumbnail {
    float: left;
    padding: 2px;
    border: 1px solid #dddddd;
}

.highlight {
	width: 460px;
	min-height: 85px;
	<!--[if IE]>
       height: 85px;
    <![endif]-->
}

.highlightTitle {
	padding-left: 85px;
}

.highlightTitle a {
    text-decoration: none;
}

.highlightContent {
	padding-left: 87px;
	text-align: justify;
}

/**************************
LEFT COLUMN
**************************/
/*** 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: 215px;
    min-height: 250px;
}

* html #left {
    position: relative; /*** IE needs this  ***/
    height: 250px;
}

div.headCategory {
    padding: 15px 0px 5px 10px;
    border-bottom: 3px solid #555555;
    text-decoration: none;
    color: #555555;
    font-weight: bold;
}

div.firstSubCategory {
    border-bottom: 1px solid #dddddd;
    text-align: left;
}

div.sub1Category, div.sub2Category, div.sub3Category, div.sub4Category {
    border-bottom: 1px solid #dddddd;
    text-align: left;
}

div.sub1Category {
    padding: 5px 0px 5px 10px;
}

div.sub2Category {
    padding: 5px 0px 5px 20px;
}

div.sub3Category {
    padding: 5px 0px 5px 30px;
}

div.sub4Category {
    padding: 5px 0px 5px 40px;
}

div.sub1Category a, div.sub2Category a, div.sub3Category a, div.sub4Category a {
    text-decoration: none;
}

div.sub2Category a {
	color: #ff9966;
}

div.sub2Category a:hover, div.sub3Category a:hover {
	color: #ffc9b1;
}

div.sub3Category a, div.sub4Category a {
	color: #8bc75a;
}

div.sub3Category a:hover, div.sub4Category a:hover {
    color: #c9e2a4;
}

.bullet {
	margin-right: 5px;
}

/*************************
RIGHT COLUMN
**************************/
#right {
    float: right;
    width: 190px;
    position: relative; /*** IE needs this  ***/
    padding: 10px 10px 10px 0px;
    min-height: 250px;
    margin-right: -200px; /** This negative margin-right value is the width of the right column + the padding, in this example 130px. ***/
}

* html #right {
    height: 250px;
}

.imageTipbox {
    margin-bottom: 10px;
}

.tipbox {
    background-color: #eeeeee;
    padding: 10px 0px 10px 10px;
    margin-bottom: 10px;
}

.tipbox ol, .tipbox ul {
    margin: 3px 0px 5px 0px;
    color: #aaaaaa;
    list-style-type: none;
}

.tipbox li {
    padding-bottom: 2px;
    padding: 2px 0px 2px 0px;
}

.tipbox h1 {
    font-style: bold;
    color: #000000;
    padding-bottom: 5px;
}

/**************************
FOOTER
**************************/
#footer {
    text-align: center;
    padding: 50px 10px 10px 10px;
    color: #bbbbbb;
    text-align: right;
}