*
{ margin: 0;
  padding: 0;}  /* removes padding and margins from all elements */

HTML, BODY
{ height: 100%;
  min-width: 790px;}

BODY, P, LI, TD
{ font: 11px arial, verdana;
  color: #333;}

#logos
{ text-align: center;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-right: -180px;
  clear: both;
  overflow: visible;}
  
p
{ margin: 10px 0 10px 0;
  line-height: 1.3em;}

UL, OL
{ margin: 10px 0 10px 0;}

LI
{ margin-left: 40px;}

OL.faq LI /* for use on the FAQ page */
{ margin-bottom: 30px;}

LABEL /* form elementss */
{ margin-left: 3px;}

/* ########## Major Structural Elements ########## */

#container
{ height: 100%;
  width: 100%;}

#header
{ background: #fff url(images/logo.jpg) 5px 5px no-repeat;
  height: 60px;}

#navigation
{ border-bottom: dotted 2px #eaeaea;
  height: 23px;}

#left
{ width: 160px;
  height: 100%;
  background-color: #fbf9f5;
  border-right: dotted 2px #eaeaea;}

#center
{ padding: 15px;
  overflow: hidden;}
  
#IEroot #center /* needed for IE browsers to correctly render the width of the DIV */
{ width: 100%;}

BODY#home #center /* this is necessary to make room for the login box */
{ margin-right: 190px;
  overflow: visible;}

#footer
{	height: 90px;
  text-align: left;
  border-top: dotted 2px #eaeaea;}

/* ########## Links ########## */
  
A:link,
A:visited,  
A:hover
{ color: #ae0000;
  text-decoration: none;}

/* ########## Navigation ########## */

#navigation UL
{ list-style: none;
  margin: 0;}
  
#navigation UL LI
{ display: block;
  float: left;
  height: 23px;
  line-height: 23px;
  padding: 0 20px 0 20px;
  margin: 0;}

#navigation LI A
{	font: bold 11px arial, verdana;
  color: #ae0000;
	text-decoration: none;
	text-transform: uppercase;}
	
#navigation LI A:hover
{	font: bold 11px arial, verdana;
  color: #c19930;
	text-decoration: none;
	text-transform: uppercase;}

/* ########## Left ########## */

#leftInner
{ padding: 15px 10px 0 10px;}

#left H2
{ font-family: Verdana;
  font-size: 12px;
  font-weight: bold;
  color: #606060;}

#left UL
{ }

#left LI
{ list-style-type: none;
  margin: 2px 0 0 7px;}
  
#left LI A
{ color: #73664c;
  text-decoration: none;}
  
#left LI A:hover
{ color: #ae0000;
  text-decoration: none;}

/* ########## Tables and Grids ########## */

.table,
.table TD
{ border: solid 1px #eee;
  border-collapse: collapse;
  background-color: #fff;
  padding: 4px;}

.table TD TABLE TD
{ border: none;}

TR.header TD
{ background-color: #f0e4ce;
  color: #333;
  font-weight: bold;
  text-decoration: none;}

BODY#desktop .table TR.header TD /* changes the table header color on the desktop grid */
{ background-color: #f0e4ce;
  color: #333;
  font-weight: bold;
  text-decoration: none;}

TR.header2 TD
{ background-color: #eee;
  font-weight: bold;}

/* ########## Login Box ########## */

#login
{ position: absolute;
  right: 10px;
  width: 180px; /* don't forget to adjust the BODY#home #center margin (width + 20px for padding) */
  border: solid 1px #c6c6c6;
  background-color: #f6f2e7;}

#loginInner
{ padding: 10px;}

#login H2
{ font: bold arial, verdana;
  margin-bottom: 8px;
  font-size: 12px;
  color: #606060;}
  
#login UL,
UL.register /* shared between login and register */
{ list-style: none;
  margin: 0;}
  
#login UL LI,
UL.register LI  /* shared between login and register */
{ margin-bottom: 2px;
  padding: 5px 0 5px 0;
  margin: 0;}

#login LI
{ font-size: 11px;}

#login LI A
{ color: #73664c;
  text-decoration: none;}

#login LI A:hover
{ color: #ae0000;
  text-decoration: none;}

/* ########## Footer ########## */

#footerInner
{ padding-left: 175px;}

/* ########## Headers ########## */

H1, H2, H3, H4
{ clear: both;}

H1
{ font-family: Verdana;
  font-size: 18px;
  font-weight: bold;
  color: #b8af98;
  margin-bottom: 10px;}

H2
{ font-family: Tahoma;
  font-size: 14px;
  font-weight: normal;
  color: #e0aa30;
  margin: 5px 0 5px 0;}

#QAContainerInner H2, /* for use on the survey */
#QAContainerInner H4
{ font-size: 14px;
  color: #e0aa30;
  border-bottom: dashed 1px #ccc;
  height: 24px;
  line-height: 24px;
  padding: 0;
  padding-bottom: 5px;
  margin: 20px 0 20px 0;
  clear: both;
  overflow: hidden;}

/* ########## Step Indicators ########## */

#stepOuter /* needed to center the step indicators */
{ text-align: center;}

#stepInner
{ width: 345px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  text-align: left;}

UL#steps
{ list-style: none;
  display: block;
  margin: 0;
  padding: 0;}

UL#steps LI
{ float: left;
  width: 75px;
  height: 65px;
  margin: 0;
  padding: 5px;
  background-color: #fff;
  border: dotted 1px #eaeaea;
  border-top: none;
  border-bottom: none;
  border-left: none;
  font-family: arial, verdana;}

UL#steps LI.on, /* styles for the active step */
UL#steps LI.firston
{ background-color: #f0e4ce;
  color: #fff;}

UL#steps LI.firston, /* sets the left border for step 1 */
UL#steps LI.firstoff
{ border-left: solid 1px #ccc;}

UL#steps A /* link styles for non-active steps */
{ display: block;
  width: 75px;
  height: 65px;
  text-decoration: none;
  color: #333;}

UL#steps LI.on A,
UL#steps LI.firston A
{ color: #333;} /* highlight color for link */

UL#steps H4
{ font-size: 14px;
  margin-bottom: 4px;}

/* ########## For Survey ########## */

#QAContainerInner UL,
#QAContainerInner #contact UL
{ width: 100%;
  clear: both;
  overflow: hidden;
  margin: 0;}

#QAContainerInner UL
{ margin-bottom: 20px;
  min-width: 500px;}

#QAContainerInner #contact
{ overflow: hidden;}

#QAContainerInner #contact UL
{ margin-bottom: 10px;}

#QAContainerInner LI
{ list-style: none;
  display: block;
  float: left;
  margin: 0;
  padding: 0;}

#QAContainerInner LI.q
{ padding-right: 30px;
  width: 220px;}

.clear,
TABLE.clear,
DIV.clear
{ margin: 0;
  padding: 0;
  clear: both;}

/* For the Photo Viewer on the Review Page */

#IEroot .photos
{ position: absolute;
  right: 15px;
  border: solid 5px #ccc;}
  
.photos
{ position: absolute;
  right: 15px;
  border: solid 5px #ccc;}

.logo
{ display: inline;
  float: left;
  margin-bottom: 20px;
  border: solid 1px #ccc;}

#QAContainerInner .submitterLogo
{ margin-bottom: 20px;}

/* ########## Buttons ########## */


.button,
TR.edit TD.inputColumn INPUT,
TD.inputColumn INPUT,
.table TR.footer TD INPUT
{ }

.buttonSubmit
{ }

/* shared properties for all buttons */
.button,
.button-small,
.button-medium,
.button-large,
.button-add-group
{ height: 21px;
  line-height: 21px;
  padding: 0px;
  padding-bottom: 1px;
	font: normal 11px arial, verdana, sans-serif;
	color: #333;
	border: none;
	text-decoration: none;
	vertical-align: middle;
	overflow: visible;}

.button-small:focus,
.button-medium:focus,
.button-large:focus,
.button-add-group
{ border: none;}

/* for small buttons */
.button-small
{ width: 50px;
	background: url(images/button-100x21.gif) 0 0 no-repeat;}

.button-small:hover
{ background-position: -50px 0;
  color: #333;}

/* for medium buttons */
.button,
.button-medium
{ width: 90px;
	background: url(images/button-180x21.gif) 0 0 no-repeat;}

.button:hover,
.button-medium:hover
{ background-position: -90px 0;
  color: #333;}

/* for large buttons */
.button-large
{ width: 150px;
	background: url(images/button-300x21.gif) 0 0 no-repeat;}

.button-large:hover
{ background-position: -150px 0;
  color: #333;}

/* for group browser */
.button-add-group
{ width: 150px;
	background: url(images/button-add-group-300x21.gif) 0 0 no-repeat;
	padding-left: 10px;}

.button-add-group:hover
{ background-position: -150px 0;
  color: #333;}
  
.buttonBar
{ padding: 8px;
  margin: 20px 0 20px 0;
  clear: both;
  float: none;
  border: solid 1px #eee;}

/* ########## Miscellaneous ########## */

.hideMe
{ display: none;
  visibility: hidden;}
  
.asterisk
{ font-size: 12px;
  color: red;}

.VAMErrorText,
.textError
{ color: red;}

SELECT,
INPUT
{ font-size: 11px;
  overflow: hidden;}

SELECT OPTION
{ padding-right: 8px;}

TR.edit INPUT /* Controls the width of the text boxes */
{ width: 80px;}

TD.InputColumn INPUT,
TR.footer INPUT /* Controls the width of the buttons */
{ width: 50px;}

TEXTAREA
{ font-family: Arial;
  font-size: 11px;}

/* ########## Validation ########## */

.VAMSummary
{ font-size: 11px;
  margin: 20px 0 20px 0;
  padding: 8px;
  background-color: #fff;
  overflow: hidden;}

.VAMSummary *
{ color: #333;}

.VAMSummary UL
{ list-style-type: square;}

.VAMSummary LI A
{ color: #73664c;
  text-decoration: none;}

.VAMSummary LI A:hover
{ color: #ae0000;
  text-decoration: none;}
  
/* ##########  PETER'S DATE CONTROL APP  ########## */

.CSCCalendar
{ border: solid 1px #333;
  font: 8pt Arial;
  background-color: #fff;}

.CSCCalendar TABLE
{ font: 8pt Arial;
  background-color: #fff;}

.CSCCalendarNoFilter
{ border: solid #333;
  font: 8pt Arial;
  background-color: #fff;}
  
.CSCCalendarNoFilter TABLE
{ font: 8pt Arial;
  background-color: #fff;}

.CSCWeekRowsTable
{ border: solid 1px #333;
  font: 8pt arial;
  background-color: #fff;}
  
.CSCDay
{ cursor: pointer;  /* W3C approved hand. See http://www.xs4all.nl/~ppk/css2tests/index.html */
  cursor: hand;}

.CSCSelectedDay {background-color: gold; cursor: pointer; cursor: hand;}
.CSCSelectedToday {font-weight: bold; background-color: gold; cursor: pointer; cursor: hand;}
.CSCToday {font-weight: bold; cursor: pointer; cursor: hand;}
.CSCSpecialDay {cursor: pointer; cursor: hand; background-color: lemonchiffon;}
.CSCOtherMonthDays {cursor: default; color: gray;}
.CSCWeekNumberColumn {border-right: blue 1px solid; background-color: lightblue;}
.CSCDayHeader {border-bottom: blue 1px solid;}
.CSCDayHeader TR {font-size: 7pt; background-color: lightblue;}
.CSCDayHeaderCell {font-size: 7pt;}
.CSCHeaderTable {font-size: 8pt; border-bottom: blue 1px solid; font-family: Arial;}
.CSCHeaderRows {font-size: 8pt; font-family: Arial; cursor: default;}
.CSCHeaderRows TR {background-color: inherit;}
.CSCIncrementalButtons {cursor: pointer; cursor: hand; color: mediumblue;}
.CSCIncrementalButtonsPressed {cursor: pointer; cursor: hand; color: darkblue;}
.CSCJumpButtons {color: mediumblue; cursor: pointer; cursor: hand;}
.CSCJumpButtonsPressed {color: darkblue; cursor: pointer; cursor: hand;}
.CSCCloseButton {cursor: default;}
.CSCCloseButtonPressed {cursor: default;}
.CSCHelpButton {cursor: default;}
.CSCHelpButtonPressed {cursor: default;}
.CSCFooterTable {}
.CSCFooterTable TABLE {}
.CSCFooterButton {border-right: lightgrey thin outset; border-top: lightgrey thin outset; border-left: lightgrey thin outset; color: black; border-bottom: lightgrey thin outset; background-color: lightblue; font-size: 8pt; font-family: Arial; cursor: pointer; cursor: hand;}
.CSCFooterButtonPressed {border-right: lightgrey thin inset; border-top: lightgrey thin inset; border-left: lightgrey thin inset; border-bottom: lightgrey thin inset; background-color: lightblue; color: black; font-size: 8pt; font-family: Arial; cursor: pointer; cursor: hand;}
.CSCFooterCurrentDate {}
.SD_Selectable1 {background-color: mistyrose; cursor: pointer; cursor: hand;}
.SD_SelectableOM1 {background-color: powderblue; cursor: pointer; cursor: hand;}
.SD_Selectable2 {background-color: palegoldenrod; cursor: pointer; cursor: hand;}
.SD_SelectableOM2 {background-color: gainsboro; cursor: pointer; cursor: hand;}
.SD_Unselectable1 {color: gray; background-color: mistyrose;}
.SD_UnselectableOM1 {color: gray; background-color: powderblue;}
.SD_Unselectable2 {color: gray; background-color: palegoldenrod;}
.SD_UnselectableOM2 {color: gray; background-color: gainsboro;}
.DTBToggleCalendar {}
.DTBToggleCalendarPressed {}
.DTBHelpButton {}
.DTBHelpButtonPressed {}
.MYPMonthYearPicker {border-right: gray 1px solid; border-top: gray 1px solid; font-size: 8pt; border-left: gray 1px solid; border-bottom: gray 1px solid; font-family: Arial; background-color: white;}
.MYPMonthYearPicker TABLE {font-size: 8pt; font-family: Arial; background-color: white;}
.MYPMonthTable {}
.MYPYearTable {}
.MYPMonthCell {cursor: pointer; cursor: hand;}
.MYPSelectedMonthCell {background-color: gold; cursor: pointer; cursor: hand;}
.MYPYearCell {cursor: pointer; cursor: hand;}
.MYPSelectedYearCell {cursor: pointer; cursor: hand; background-color: gold;}
.MYPOutOfRangeCell {color: gray;}
.MYPMoveYearsButtons {}
.MYPMoveYearsButtonsPressed {}
.MYPTogglePicker {}
.MYPTogglePickerPressed {}
.PDPContextMenu {border-right: lightgrey 1px solid; border-top: lightgrey 1px solid; font-size: 8pt; border-left: lightgrey 1px solid; border-bottom: lightgrey 1px solid; font-family: Arial; background-color: white;}
.PDPContextMenu TABLE {font-size: 8pt; font-family: Arial; background-color: white;}