body {
	background: #f7f5f1;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	font-family: Trebuchet, Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}
#container {
	width: 900px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #b99a67;
	text-align: left; /* this overrides the text-align: center on the body element. */
}

/*HEADER*/
#header {
	background: #e7e0d5; 
	height: 75px;
}
#headerleft {
	padding-top: 40px;
	padding-left: 20px;
	width: 415px;
}
#headerright {
	float: right;
	padding-top: 52px;
	padding-right: 10px;
	font-size: 12px;
}
#headerright a:link {
	color: #000000;
	text-decoration: none;
}
#headerright a:visited {
	color: #000000;
	text-decoration: none;
}
#headerright a:hover {
	color: #b99a67;
}
h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	font-size: 24px;
	font-weight: normal;
}
.h1super {
	position: relative;
	bottom: 10px;
	font-size: 11px;
}
#headerleft a:link {
	color: #000000;
	text-decoration: none;
}
#headerleft a:visited {
	color: #000000;
	text-decoration: none;
}
#headerleft a:hover {
	color: #b99a67;
}
#headerborder {
	padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background: url(../images/bgd-gold.jpg) repeat-y;
	height: 10px;
	border-top: #000000 solid 1px;
	font-size: 1px;
}

/*SPLASH CONTENT AREA*/
#splashContent {
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: url(../images/bgd-blue-gradient.jpg) repeat-x;
	height: 395px;
	position: relative;
}
a.splashHeadline {
	text-align: center;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 24px;
	color: #FFFFFF;
	line-height: 1;
	text-decoration: none;
}
a.splashHeadline:visited {
	color: #ffffff;
}
a.splashHeadline:hover {
	color: #9fce66;
}
.indexHeadline {
	text-align: center;
	font-size: 18px;
	color: #000000;
}
#bottomshadow-splash {
	width: 900px;
	height: 9px;
	background: url(../images/bottom-shadow.png) repeat-x bottom;
	z-index: 150;
	font-size: 10px;
	padding-bottom: 10px;
	text-align: center;
	color: #FFFFFF;
	position: absolute;
	bottom: 0;
	left: 0;
}
#bottomshadow-index {
	width: 900px;
	height: 20px;
	background: url(../images/bottom-shadow.png) repeat-x bottom;
	z-index: 150;
	font-size: 10px;
	padding-bottom: 10px;
	text-align: center;
	color: #000000;
	position: absolute;
	bottom: 0;
	left: 0;
}
#fifty {
	background:url(../images/50-percent.png) no-repeat;
}
#thirty {
	background:url(../images/30-percent.png) no-repeat;
}
#and {
	background:url(../images/and.png) no-repeat;
}
#smc {
	background:url(../images/smc.png) no-repeat center;
}
a.continue {
    display: block;
    width: 143px;
    height: 53px;
    background: url(../images/continue.png) 0 0 no-repeat;
    text-decoration: none;
	margin-left: 228px;
}
a.continue:hover {
    background: url(../images/continue-hover.png) 0 0 no-repeat;
}

/*MAIN CONTENT AREA*/
#mainContent {
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: url(../images/bgd-carpet.jpg) no-repeat;
	height: 395px;
	position: relative;
}
#topshadow {
	height: 9px;
	background: url(../images/top-shadow.png) repeat-x;
	z-index: 200;
	font-size: 1px;
	position: relative;
}
#bottomshadow {
	width: 900px;
	height: 9px;
	background: url(../images/bottom-shadow.png) repeat-x;
	z-index: 150;
	font-size: 1px;
	position: absolute;
	bottom: 0;
	left: 0;
}
#footerborder {
	padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background: url(../images/bgd-gold.jpg) repeat-y;
	height: 10px;
	border-bottom: #000000 solid 1px;
	font-size: 1px;
}
#footer {
	padding: 0; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background: #e7e0d5;
	height: 110px;
}
#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* HOME PAGE TABLE AREA */
.redpictureholder {
	border: 1px solid #c03557;
	background: #c03557;
}
.bluepictureholder {
	border: 1px solid #3a92ba;
	background: #3a92ba;
}
.greenpictureholder {
	border: 1px solid #669b7f;
	background: #669b7f;
}
.redcell {
	background: url(../images/bgd-trans-red.png) repeat;
}
.bluecell {
	background: url(../images/bgd-trans-blue.png) repeat;
}
.greencell {
	background: url(../images/bgd-trans-green.png) repeat;
}

.thingoldbar {
	height: 5px;
}
.tablehead {
	color: #FFFFFF;
	font-size: 14px;
	text-align: center;
}
a.ftrollover {
    display: block;
    width: 150px;
    height: 155px;
    background: url(../images/main-ft.jpg) 0 0 no-repeat;
    text-decoration: none;
}
a:hover.ftrollover {
    background-position: -150px 0;
	cursor: pointer;
}
a.lsrollover {
    display: block;
    width: 150px;
    height: 155px;
    background: url(../images/main-ls.jpg) 0 0 no-repeat;
    text-decoration: none;
}
a:hover.lsrollover {
    background-position: -150px 0;
	cursor: pointer;
}
a.sssrollover {
    display: block;
    width: 150px;
    height: 155px;
    background: url(../images/main-sss.jpg) 0 0 no-repeat;
    text-decoration: none;
}
a:hover.sssrollover {
    background-position: -150px 0;
	cursor: pointer;
}

/*RED AREAS*/
#leftContent-red {
	background: #da9597 url(../images/bgd-left-red.jpg);
	height: 395px;
	position: relative;
	width: 300px;
	float: left;
}
.tablehead-red {
	background-color: #c03557;
	color: #FFFFFF;
	text-transform: uppercase;
	text-align: center;
	font-size: 15px;
}
.lefttablebody-red {
	background-color: #FFFFFF;
	border: 2px solid #c03557;
	padding-left: 10px;
	font-size: 13px;
	text-transform: uppercase;
	color: #c03557;
	line-height: 1;
	height: 285px;
}
#leftContent-red a:link {
	color: #000000;
	text-decoration: none;
}
#leftContent-red a:visited {
	color: #000000;
	text-decoration: none;
}
#leftContent-red a:hover {
	color: #c03557;
	text-decoration: none;
}
#rightContent-red {
	margin: 0 0 0 300px;
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: url(../images/room-red.jpg) no-repeat;
	height: 395px;
}
#rightContent-red-screen {
	margin: 0 0 0 300px;
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: url(../images/room-red-screen.jpg) no-repeat;
	height: 395px;
}
.righttablebody-red {
	background-color: #FFFFFF;
	border: 2px solid #c03557;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 13px;
	line-height: 1.2;
	text-align: center;
	height: 285px;
}

/*BLUE AREAS*/
#leftContent-blue {
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #9ebfd8 url(../images/bgd-left-blue.jpg);
	height: 395px;
	position: relative;
	width: 300px;
	float: left;
}
.tablehead-blue {
	background-color: #3a92ba;
	color: #FFFFFF;
	text-transform: uppercase;
	text-align: center;
	font-size: 15px;
}
.lefttablebody-blue {
	background-color: #FFFFFF;
	border: 2px solid #3a92ba;
	padding-left: 10px;
	font-size: 13px;
	text-transform: uppercase;
	color: #3a92ba;
	line-height: 1;
	height: 285px;
}
#leftContent-blue a:link {
	color: #000000;
	text-decoration: none;
}
#leftContent-blue a:visited {
	color: #000000;
	text-decoration: none;
}
#leftContent-blue a:hover {
	color: #3a92ba;
	text-decoration: none;
}
#rightContent-blue {
	margin-left: 300px;
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: url(../images/room-blue.jpg) no-repeat;
	height: 395px;
	width: 600px;
}
#rightContent-blue-screen {
	margin-left: 300px;
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: url(../images/room-blue-screen.jpg) no-repeat;
	height: 395px;
	width: 600px;
}
.righttablebody-blue {
	background-color: #FFFFFF;
	border: 2px solid #3a92ba;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 13px;
	line-height: 1.2;
	text-align: center;
	height: 285px;
}
/*GREEN AREAS*/
#leftContent-green {
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #afc5b5 url(../images/bgd-left-green.jpg);
	height: 395px;
	position: relative;
	width: 300px;
	float: left;
}
.tablehead-green {
	background-color: #669b7f;
	color: #FFFFFF;
	text-transform: uppercase;
	text-align: center;
	font-size: 15px;
}
.lefttablebody-green {
	background-color: #FFFFFF;
	border: 2px solid #669b7f;
	padding-left: 10px;
	font-size: 13px;
	text-transform: uppercase;
	color: #669b7f;
	line-height: 1;
	height: 285px;
}
#leftContent-green a:link {
	color: #000000;
	text-decoration: none;
}
#leftContent-green a:visited {
	color: #000000;
	text-decoration: none;
}
#leftContent-green a:hover {
	color: #669b7f;
	text-decoration: none;
}
#rightContent-green {
	margin-left: 300px;
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: url(../images/room-green.jpg) no-repeat;
	height: 395px;
	width: 600px;
}
#rightContent-green-screen {
	margin-left: 300px;
	padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: url(../images/room-green-screen.jpg) no-repeat;
	height: 395px;
	width: 600px;
}
.righttablebody-green {
	background-color: #FFFFFF;
	border: 2px solid #669b7f;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 13px;
	line-height: 1.2;
	text-align: center;
	height: 285px;
}
/* MISC */
.super {
	position:relative;
	bottom: 4px;
	font-size: 10px;
}
.biggersuper {
	position:relative;
	bottom: 7px;
	font-size: 10px;
}
.captsuper {
	position:relative;
	bottom: 3px;
	font-size: 9px;
}
.caption {
	font-size: 11px;
	text-align: center;
}
.right-table {
	margin-left: 30px;
	margin-top: 15px;
}

/* VIDEO CONTROLS*/
a.red-play {
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/play-red-norm.gif) 0 0 no-repeat;
    text-decoration: none;
}
a.red-play:hover {
    background: url(../images/play-red-hover.gif) 0 0 no-repeat;
}
a.red-pause {
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/pause-red-norm.gif) 0 0 no-repeat;
    text-decoration: none;
}
a.red-pause:hover {
    background: url(../images/pause-red-hover.gif) 0 0 no-repeat;
}
a.blue-play {
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/play-blue-norm.gif) 0 0 no-repeat;
    text-decoration: none;
}
a.blue-play:hover {
    background: url(../images/play-blue-hover.gif) 0 0 no-repeat;
}
a.blue-pause {
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/pause-blue-norm.gif) 0 0 no-repeat;
    text-decoration: none;
}
a.blue-pause:hover {
    background: url(../images/pause-blue-hover.gif) 0 0 no-repeat;
}
a.green-play {
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/play-green-norm.gif) 0 0 no-repeat;
    text-decoration: none;
}
a.green-play:hover {
    background: url(../images/play-green-hover.gif) 0 0 no-repeat;
}
a.green-pause {
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/pause-green-norm.gif) 0 0 no-repeat;
    text-decoration: none;
}
a.green-pause:hover {
    background: url(../images/pause-green-hover.gif) 0 0 no-repeat;
}
.patterncell1 {
	background: url(../images/pc1-hover.jpg) repeat;
}
.patterncell2 {
	background: url(../images/pc2-hover.jpg) repeat;
}
.patterncell3 {
	background: url(../images/pc3-hover.jpg) repeat;
}
.patterncell1:hover {
	background: url(../images/pc1-norm.jpg) repeat;
}
.patterncell2:hover {
	background: url(../images/pc2-norm.jpg) repeat;
}
.patterncell3:hover {
	background: url(../images/pc3-norm.jpg) repeat;
}