body, html
{
	color: #000;
	font-family: Verdana, Arial, Tahoma, sans-serif;
	background-color: #FFF;
	text-align: center; /*** Centers the design in old IE versions ***/
	height: 100%;
	border: solid 0px;
}
*
{
	border: 0px;
	padding: 0;
	margin: 0;
}
body
{
	font-size: 70%;
}
p
{
	padding: 7px 0 7px 0;
}

a
{
	color: #000099;
}
a:hover
{
	color: #7A2A83;
	text-decoration: underline;
}
.nodecoration a, a:hover
{
	text-decoration: none;
	color: #000000;
}

h1, h2, h3
{
	font-weight: bold;
	padding-bottom: 5px;
}
h1
{
	font-size: 2em;
}
h2
{
	font-size: 1.4em;
}
h3
{
	font-size: 1.3em;
}
h1 a, #header h2
{
	color: #7A2A83;
}
.clear
{
	clear: both;
}
#mainContainer
{
	width: 800px;
	margin: 0 auto; /*** Centers the design ***/
	min-height: 92%;
	background: #FFFFFF; /*url(../images/three-column-100-bg.gif) repeat-y; ** This is our faux columns ***/
	text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
}
* html #mainContainer
{
	height: 92%; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
/**************************
HEADER
**************************/
#header
{
	background: #FFF;
	padding: 5px;
	border: solid 0px #E0E0E0;
	z-index: 9999;
}


#nav
{
	width: 500px;
	float: right;
	margin-right: 8px;
	z-index: 9999;
}

#nav a:hover
{
	color: #FFFFFF;
	text-decoration: underline;
	z-index: 9999;
}
#welcome
{
	background: #F5F5DC;
	width: 400px;
	float: right;
	margin: 40px 43px 0 0;
	height: 135px;
	text-align: Left;
	border: dashed 1px #CFCFCF;
	padding-left: 5px;
	padding-right: 5px;
	vertical-align: top;
	z-index: 1;
	font-size: medium;
	text-align: justify;
}
#cardselect
{
	margin: 0 auto;
	height: auto;
	font-weight: 200;
	font-size: medium;
	text-align: center;
	z-index: 1;
}
#contact
{
	margin: 0 auto;
	width: 785px;
	text-align: center;
	border: Dashed 1px #CFCFCF;
	background-color: #EDE0EF;
	font-size: Medium;
}
/**************************
CONTENT AND COLUMNS
**************************/
.outer
{
	padding-left: 10px;
}
* html .outer
{
	padding-right: 10px; /* Normally this shouldn't be in this hack, it should be in .outer, but because of IE7 I had to */
}
.inner
{
	width: 765px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
}
* html .inner
{
	width: 100%;
}
/*** 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.
***/
.float-wrap
{
	float: left;
	width: 800px;
	margin-left: -10px; /*** Same length as .outer padding-left but with negative value ***/
	margin-bottom: 5px;
	z-index: 1;
	border: solid 0px;
}
* html .float-wrap
{
	/*** No need for hacking IE on this layout ***/
	z-index: 1;
}
#content
{
	float: right;
	margin-right: 0px;
	width: 800px;
	background: #DDEFC2;
	border: solid 0px;
	padding-bottom: 5px;
	z-index: 1;
}
* html #content
{
	position: relative; /*** IE needs this  ***/
	z-index: 1;
}
.contentWrap
{
	padding: 0px;
	min-height: 250px;
	margin-left: 8px;
	z-index: 1;
}
* html .contentWrap
{
	height: 250px;
	z-index: 1;
}


#spacer
{
	clear: both;
}
.thumbs
{
	float: left;
	position: relative;
	margin-right: 6px;
	width: 99%;
	padding-left: 21px;
}

.float
{
	display: block;
	width: 215px;
	height: 230px;
	float: left;
	margin: 10px 40px 0px 1px;
	position: relative;
	border: solid 2px;
	border-color: #F5F5DC;
	background-color: #AED578;
}
.float img
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	border: dashed 0px;
	border-color: #DFDFDF;
}

.cardtitle
{
	font-size: 1em;
	font-weight: bold;
	color: #7A2A83;
	text-align: center;
	border: solid 0px;
	margin-top: 3px;
}

.float a
{
	color: #E0E0E0;
}
.float a:hover
{
	color: #FFF;
}


/**************************
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: 10px;
	padding: 0px;
}
* html #left
{
	position: relative; /*** IE needs this  ***/
}
#left ul
{
	list-style: none;
	padding-bottom: 4px;
}
#left li
{
	padding-bottom: 2px;
}
/*************************
RIGHT COLUMN
**************************/
#right
{
	float: right;
	width: 10px;
	padding: 0px;
}
* html #right
{
	position: relative; /*** IE needs this  ***/
	margin-right: -10px; /*** IE gets this margin. ***/
}
#right ul
{
	list-style: none;
	padding-bottom: 4px;
}
#right li
{
	padding-bottom: 2px;
}
/**************************
FOOTER
**************************/
#disclaimer
{
	width: 700px;
	height: 35px;
	margin: 0 auto;
	border: dashed 1px #CFCFCF;
	font-weight: 200;
	font-size: small;
	text-align: center;
	background-color: #F5F5DB;
	margin-bottom: 4px;
	color: #7A2A83;
}
#footernote
{
	text-align: center;
	background-color: #AED578;
	font-size: small;
	border-top: solid 2px;
	border-top-color: #FDBE24;
	border-bottom: solid 2px;
	border-bottom-color: #FDBE24;
}
#footer
{
	width: 800px;
	margin: 0 auto;
}