body {
  margin:  0;
  padding: 0;
  font: 14px  arial;
  color: #000;
  background: #FFFFCC;
  height: 100%; /* this is the key! */
}

div.eJIFViewPort {
  display: block;
  height: 100%;
  width: 100%;
  overflow: auto;
}

div.MainPage {
  background: #FFFFCC;
}

span.inlinelink {
  color: #000066;
  text-decoration: underline;
  font:14px  arial;
}

span.inlinelink:hover {
  cursor: pointer;
}

img.link {
  border: 0px solid black;
}

img {
 border-width: 0px;
}

a.inlinelink {
  font:14px  arial;
}

.link:hover {
  cursor: pointer;
}

thead {
  background-color: #99CCFF;
  border-bottom: 1px solid black;
}

th {
  color: #000066;
  font-weight: bold;
  font-size: 15px;
  vertical-align: bottom;
  font-family: arial;
  border-bottom: 1px solid black;
}

th.Number {
  text-align: right;
}

th.Text {
  text-align: left;
}

tfoot {
  background-color: #99CCFF;
}

td.Image {
  background-color: white;
}

td.footer {
  border-top: 1px solid black;
}

div.BorderedScrollList {
  border-top: 2px solid grey;
  border-left: 2px solid grey;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  overflow: auto;
}

div.HomeCentre {
  border: 1px solid black;
  padding: 0px;
  width: 200px;
  height: 200px;
}

div.HomeImage {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background: white;
}

div.Menu {
  position:absolute;
  right:0;
  top:90px;
  padding:0;
  width:200px;
  height:100%;
  color:#333;
  background: lightblue;
  border:1px solid #333;
}

td {
  border: 1px none black;
  color: #000066;
/*  font-weight: normal;
  font-size: 14px;     */
  font: arial 14px;
  vertical-align: top;
}

.DataInputTitle {
  color: #000066;
  font-weight: bold;
  font-size: 12px;
  vertical-align: top;
  text-align: left;
  font-family: arial;
}

.DataInputControl {
  margin-right: 1em;
}

SPAN.DataInputTitle {
  color: #000066;
  font-weight: bold;
  font-size: 12px;
  vertical-align: middle;
  text-align: right;
  font-family: arial;
  padding-left: 1px;
  padding-right: 1em;
}


.Subheading {
  color: #000066;
  font-weight: bold;
  font-size: 14px;
  vertical-align: text-bottom;
  font-family: arial;
}

TD.RecordInputTitle {
  color: #000066;
  font-weight: bold;
  font-size: 12px;
  vertical-align: top;
  text-align: right;
  font-family: arial;
}

.SmallText {
  color: black;
  font-weight: normal;
  font-size: 10px;
  vertical-align: bottom;
  text-align: center;
  font-family: arial;
}

TD.ReadOnlyNumber {
  color: #FF0000;
  font-weight: normal;
  text-align: right;
  font-size: 14px;
  vertical-align: middle;
  font-family: arial;
}

TD.ReadOnlyText {
  color: #FF0000;
  font-weight: normal;
  text-align: left;
  font-size: 14px;
  vertical-align: middle;
  font-family: arial;
}

TD.Text {
  color: #000066;
  font-weight: normal;
  text-align: left;
  font-size: 14px;
  vertical-align: top;
  font-family: arial;
  padding-right: 1em;
}

TD.AltText {
  color: black;
  font-weight: normal;
  text-align: left;
  font-size: 14px;
  vertical-align: top;
  font-family: arial;
}

TD.TextHighlight {
  color: red;
  font-weight: normal;
  text-align: left;
  font-size: 14px;
  vertical-align: top;
  font-family: arial;
}

TD.Number {
  color: black;
  font-weight: normal;
  text-align: right;
  font-size: 14px;
  vertical-align: top;
  font-family: arial;
}


.RequiredInputMarker {
  color: red;
  font-weight: bold;
  font-size: 20px;
  vertical-align: middle;
  text-align: center;
  font-family: arial;
}

.DataInputLink {
  color: #000066;
  font-weight: normal;
  font-size: 12px;
  vertical-align: middle;
  text-align: left;
  font-family: arial;
}

input.DisplayOnly {
  border-width: 0px;
  font-weight: normal;
  font-family: arial;
  background: transparent;
}

input.DisplayOnlyNumber {
  color: red;
  font-weight: normal;
  text-align: right;
  font-size: 14px;
  vertical-align: middle;
  font-family: arial;
  border-width: 0px;
  background: transparent;
}

div.ProductsTable {
  width: 100%;
  height: 300px;
  overflow: auto;
  border: 0px solid red;
  text-align: center;
}

table.ProductsTable {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 0px;
  margin: 0px;
  text-align: center;
}

table.ShowBorder {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 1px;
  margin: 1px;
}

/*

H1 {
  color: #000066;
  font-weight: bold;
  font-size: 20px;
  font-family: arial;
  margin-bottom: 1px;
}


H2 {
  color: #000066;
  font-weight: bold;
  font-size: 16px;
  font-family: arial;
  margin-bottom: 1px;
}

H3 {
  color: #000066;
  font-weight: bold;
  font-size: 15px;
  vertical-align: text-bottom;
  font-family: arial;
  margin-bottom: 1px;
}

*/

P {
  color: #000066;
  font-weight: normal;
  font-size: 14px;
  vertical-align: text-bottom;
  font-family: arial;
}


.Norm {
  color: #000066;
  font-weight: normal;
  font-size: 14px;
  vertical-align: text-bottom;
  font-family: arial;
}

.NormalHighlighted {
  color: black;
  font-weight: bold;
  font-size: 14px;
  vertical-align: text-bottom;
  font-family: arial;
}

FONT.Normal {
  color: #000066;
  font-weight: normal;
  font-size: 14px;
  vertical-align: text-bottom;
  font-family: arial;
}

FONT.DialogMessage {
  color: #000066;
  font-weight: normal;
  font-size: 14px;
  vertical-align: text-bottom;
  font-family: arial;
}

FONT.DialogTitle {
  color: #000066;
  font-weight: bold;
  font-size: 14px;
  vertical-align: text-bottom;
  font-family: arial;
}

.PageHeading {
  width: 100%;
  border: 0px solid black;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  font-family: arial;
  color: darkblue;
  display: block;
}

DIV.PageHeadingLeft {
  vertical-align: middle;
  text-align: left;
  float: left;
  display: block;
  width: 20%;
  border: 0px solid black;
  color: darkblue;
  font-weight: bold;
  font-size: 16px;
  font-family: arial;
}

DIV.PageHeadingRight {
  text-align: right;
  float: right;
  width: 20%;
  border: 0px solid black;
  color: darkblue;
  font-weight: bold;
  font-size: 16px;
  font-family: arial;
  display: inline;
}

IFRAME.MainPage {
  border: 0px solid blue;
  overflow: auto;
}

DIV.PageBody {
  border: 0px solid black;
  height: 100%;
}

DIV.BoxedText {
  vertical-align: baseline;
  text-align: left;
  width: 100%;
  border: 1px solid #CCCCCC;
}

FONT.NormRed {
  color: #FF0000;
  font-weight: normal;
  font-size: 14px;
  vertical-align: text-bottom;
  font-family: arial;
}

.PromoText {
  color: #FF0000;
  font-weight: Bold;
  font-size: 17px;
  font-family: arial;
}

FONT.Error {
  color: #FF0000;
  font-weight: Bold;
  font-size: 17px;
  font-family: arial;
}

FONT.link {
  font-family: arial;
  font-size: 12px;
  color: #000066;
}

a.link {
  font-family: arial;
  font-size: 12px;
/*  color: #000066; */
}

a.link:hover {
  text-decoration: none;
  cursor: pointer;
}

a.menulink {
  display: block;
  width: 130px;
  text-align: left;
  text-decoration: none;
  font-family:arial;
  font-size:12px;
  color: #000066;
  border: none;
  cursor: hand;
}

a.menulink:hover {
  background-color: #87CEFA;
}

SPAN.menuitem {
  display: block;
  width: 130px;
  text-align: left;
  text-decoration: none;
  font-family:arial;
  font-size:12px;
  color: #000066;
  padding: 2px;
  border: none;
}

SPAN.menuitem:hover {
  font-weight: bold;
  background-color: #87CEFA;
}


th {
  color: #000066;
	font-weight: bold;
	font-size: 15px;
	vertical-align: text-bottom;
	font-family: arial;
}

div.eJIFMaskMessage {
  z-index: 201;
  margin: 4px;
  position: absolute;
  top: 200px;
  left: 200px;
  width: auto;
  height: auto;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 20px;
  font-family: arial;
  color: darkblue;
  display: block;
  border: 2px solid #000000;
  background-color: white;
}

div.MaskTransparent {
  position: absolute;
  top:     0px;
  left:    0px;
  width:   auto;
  height:  100%;
  display: block;
}

div.eJIFMaskOpaque {
  position: absolute;
  z-index: 200;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: .4;
  filter: alpha(opacity=40);
  /* this hack is so it works in IE
   * I find setting the color in the css gives me more flexibility
   * than the PNG solution.
   */
  background-color:transparent !important;
  background-color: #333333;
  /* this hack is for opera support
   * you can uncomment the background-image if you don't care about opera.
   * this gives you the flexibility to use any bg color that you want, instead of the png
   */
  background-image/**/: url("maskbackground.png") !important; // For browsers Moz, Opera, etc.
  background-image:none;
  background-repeat: repeat;
  display: block;
}

div.eJIFModalContainer {
  position: absolute;
  z-index: 201;
  top: 0px;
  left: 0px;
  display:none;
  padding: 0px;
}

div.eJIFModalInner {
  position: absolute;
  border: 2px solid #000000;
  background-color: #ffffff;
}

div.eJIFModalTitleBar {
  position: relative;
  background-color: #486CAE;
  color: #ffffff;
  font-weight: bold;
  height: 1.3em;
  padding: 5px;
  border-bottom: 2px solid #000000;
  border-top: 1px solid #78A3F2;
  border-left: 1px solid #78A3F2;
  border-right: 1px solid #204095;
  z-index: 203;
}

div.eJIFModalTitle {
  float:left;
  text-align: center;
  color: black;
  vertical-alignment: middle;
  font-weight: bold;
  font-size: 20px;
  font-family: arial;
}

div.eJIFModalControls {
  float: right;
  cursor: pointer;
}

div.eJIFModalMessage {
  margin: 0px;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 202;
  text-align: center;
  color: darkblue;
  vertical-alignment: middle;
  font-weight: bold;
  font-size: 16px;
  font-family: arial;
}

div.eJIFPageTop {
/*
  position: absolute;
  top: 0px;
  left: 0px;
*/
  height: 85px;
  background-image: url(graphics/TopBack.png);
  overflow: hidden;
  background-color: #FFFFCC;
}

input.SearchInput {
  background-color: #FFFFCC;
}

div.eJIFPageTopLeft {
  float: left;
  width: 50%;
  overflow: hidden;
}

div.eJIFSearch {
  display: inline;
  float: right;
  width: 150px;
  height: 70px;
}

div.eJIFPageSide {
/*  height: 90%; */
  width: 14%;
  height: 600px;
  overflow: hidden;
  float: left;
  background-color: #FFFFCC;
}


div.eJIFPageCentre {
  height: 90%;
  width: 86%;
  overflow: hidden;
  float: left;
}

div.ContentPage {
  position: relative;
  top:20px;
  margin-left:220px;
  margin-right:40px;
  margin-bottom:20px;
  color:#333;
  background:#ffc;
  border:1px solid #333;
  padding:0 10px;
}

div.PackRight {
  position:absolute;
  right:0;
  top:90px;
  padding:0;
  width:20px;
  height:100%;
  color:#333;
  background:#eaeaea;
  border:1px solid #333;
}


tr.Even {
  background-color: white;
}

tr.EvenHighlighted {
  background-color: LightCyan;
}

tr.Odd {
  background-color: silver;
}

tr.OddHighlighted {
  background-color: LightCyan;
}

/* JSCalendar Formats */

img.JSCalendar {
  vertical-align: middle;
}

input.JSCalendar {
  vertical-align: middle;
  font-family: arial;
  font-size: 14px;
}

/* LoyaltyPointsClaim */

div.LoyaltyPointsClaim td.QtyInput {
  width: 40%;
  border-color = #000000;
  text-align: left;
}

div.LoyaltyPointsClaim div.label {
  width: 10em;
  display: block;
  float: left;
  text-align: right;
}

div.LoyaltyPointsClaim td.BGColor0 {
  background-color: #CCFFFF;
}

div.LoyaltyPointsClaim td.BGColor1 {
  background-color: #CCCCFF;
}

div.LoyaltyPointsClaim td.BGColor2 {
  background-color: #FFCCCC;
}

div.LoyaltyPointsClaim td.BGColor13 {
  background-color: #CCFFCC;
}