.V-2025-10-25 {} /* placeholder for cache defeater */

BODY {
  background: #fffffc;
  font: 10pt Arial;
  padding: 0px;
  margin: 0px;
  }

BODY.SmallDevice {
  font-size: 12pt;
  }

TD {
  padding: 0px;
  margin: 0px;
  }

H1 {
  font: bold 1.4em Arial;
  margin: 10px 10px;
  }

H2 {
  font: bold 1.2em Arial;
  margin: 10px 10px;
  }

P {
  margin: 12px 0px;
  }

.divTbl {
  display: table;
  border-collapse: separate;
  border-spacing: 0px;
}

.divTbl > DIV {
  display: table-row;
}

.divTbl > DIV > DIV {
  display: table-cell;
  vertical-align: middle;
}

.divTbl > DIV > DIV > IMG {
  display: block;
}

SELECT {
  font-size: inherit;
  background-color: white;
  color: inherit;
  padding: 0.15em 0.2em;
  border-color: #888;
  border-radius: 0.4em;
  }

LABEL:has(INPUT[disabled]) {  /* Won't work on old (pre-2022) browsers, but not the end of the world in that case */
  opacity: 0.5;
  }

LABEL.UnEmphasize, .UnEmphasize LABEL {
  color: #888;  /* Danger of looking disabled, but maybe OK */
}

.SmallDevice INPUT[type=button] {
  -webkit-appearance: none;
  background: #dddddd;
  font-size: 1em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  }

.SmallDevice P {
  padding-left: 4px;
  padding-right: 2px;
  }

TABLE {
  border: none;
  margin: 0px;
  padding: 0px;
  }

.BigDevice #banner {
  height: 6em;
  background-image: url(banner.jpg);
  margin-left: -8px;
  border-top: solid 1px #aaaaaa;
}

.SmallDevice #banner {
  display: none;
}

.TitleBar {
  background: #6666FF;
  color: #ffb070;
  text-align: center;
  padding: 6px;
  }

.TitleBar A {
  text-decoration: none;
  }

.TitleBar A:visited, .TitleBar A:link {
  color: #ffb070;
  /*text-decoration: none;*/
  }

.TitleBar A:hover {
  color: #f0f040;
  /*text-decoration: none;*/
  }

.TitleBar .imgBtn {
  background-color: inherit;  /* Want background to remain blue even if the title text expands to reach the menu (etc.) image */
  line-height: 1px; /* Need this to container is the height of the image ond no greater */
}

.TitleBar .imgBtn, .GraphTitleBar .imgBtn {
  color: white;
}

.TitleBar .imgBtn:hover, .GraphTitleBar .imgBtn:hover {
  color: #e8d000;
}

.BigDevice .TitleBar {
  white-space: nowrap;
  font-size: 1.8em;
  font-weight: bold;
  border-bottom: solid 1px #aaaaaa;
  }

.SmallDevice .TitleBar {
  width: 100%;
  white-space: nowrap;
  line-height: 1.5em; /* This ensures button is the same height on iOS and emulator */
  padding: 9px 0px;
  }

#SmallTitleText {
  font-size: 1.2em;
  font-weight: bold;
}

.MenuHolder {
  background: #6666FF;
  color: #ffffff;
  }

.SmallDevice .MenuHolder {
  white-space: nowrap;
  padding: 6px 15px 4px;
/*  top: 42px;
  max-height: 200px;*/
  overflow: scroll;
  }

.VertMenu {
  border-top: 1px solid #aaaaaa;
  position: fixed;
  z-index: 2003;
}

.SideMenu A:visited, .SideMenu A:link {
  color: #ffffff;
  text-decoration: none;
  }

.SideMenu A:hover {
  color: #e8d000;
  text-decoration: none;
  }

.BigDevice .SideMenu:not(.divTbl) DIV {
  display: inline-block;
}

.BigDevice .SideMenu A {
  display: block;
  font-size: 1.1em;
  padding: 0.5em 1em;
  white-space: nowrap;
  cursor: pointer;
}

.BigDevice .RightMenu IMG {
  display: block;
  padding: 0em 1em;
  cursor: pointer;
}

.SmallDevice .SideMenu TD {
  font-size: 1.2em;
  font-weight: bold;
  line-height: 150%;
  padding: 8px 3px;
}

.MShortcuts { /* Container for shortcuts to avoid the need to open the menu on small devices for common actions */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.MShortcut {
  margin: 0.3em;
}

.MShortcut > DIV > DIV > DIV {
  height: 2.5em;
  font-size: 1.1em;
  font-weight: bold;
  background-color: #cdf;
  color: #00a;
  padding: 0.3em 0.6em;
  border: #44f 0.16em solid;
  border-radius: 0.4em;
  text-align: center;
  background-color: #fffae8;
  color: #c8562a;
  border-color: #d75d2f;
}

.MShortcut.cxTouched > DIV > DIV > DIV {
  background-color: #fcf0a0;
  color: #b84620;
}

.MShortcut.Emphasize > DIV > DIV > DIV {
  background-color: #fee;
  color: #c00;
  border-color: #d00;
}

.MShortcut.Emphasize.cxTouched > DIV > DIV > DIV {
  background-color: #ffe0e0;
  color: #b00;
  border-color: #c00;
}

.MShortcut a:link, .MShortcut a:visited {
  color: unset;
  text-decoration: none;
}

.MenuOverlay {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: black;
  opacity: 0.1;
  overflow: scroll; /*Attempt to stop scroll events reaching the main page below*/
  z-index: 2001;  /*Occlude page content, but leave menu area active*/
  }

.ModalDialog {
  background-color: #fffffc;
  color: black;
  border: 4px solid #5555cc;
  border-radius: 0.4em;
  position: absolute;
  z-index: 2003; /*Same as overlay, so that nested dialogs occlude each other*/
}

#fsdContainer ~ .MenuOverlay {
  z-index: 2010;  /* Dialogs need to be on top of any full-screen dialogs */
}

#fsdContainer ~ .ModalDialog {
  z-index: 2011;  /* Dialogs need to be on top of any full-screen dialogs */
}

.ModalDialog .DialogBody {
  padding: 0.5em;
}

.ModalDialog .DialogTitle {
  background-color: #8888ff;
  background-color: #5555cc;
  color: #FFFFFF;
  font-size: 1.2em;
  padding-top: 0.1em;
  padding-bottom: 0.25em;
  text-align: center;
}

.ModalDialog .Speech {
  position: absolute;
  border-style: solid;
}

.ModalDialog .Speech.top {
  top: -15px;
  border-width: 0 15px 15px 15px;
  border-color: transparent transparent #5555cc transparent;
  margin-left: -15px;  /* so that adding "left:x" or "right:x" as an inline style puts the point of the triangle at position x */
  margin-right: -15px;
}

.ModalDialog .Speech > DIV {
  position: absolute;
  border-style: solid;
}

.ModalDialog .Speech.top > DIV {
  top: 6px;
  left: -9px;
  border-width: 0 9px 9px 9px;
  border-color: transparent transparent #fffffc transparent;
}

.SubBody {
  padding: 15px 0px 0px 8px;
  }

.SmallDevice .SubBody {
  padding: 0px;
/*  padding-top: 42px;*/ /* So that content appears below title bar */
  background-image: none;
  }

#cxContent {
  display: none; /* All content is initially hidden until the menus etc. have been generated, to reduce flickering. */
  }

#cxContent.cxReadyToShow {
  display: block; /* the .cxReadyToShow class is added when menus etc. have been generated. */
}

.cxAdHocContent {
  display: none; /* Ad-hoc content is initially hidden until it has been moved into its final location. */
  }

.cxAdHocContent.cxAdHocMoved {
  display: block; /* the .cxAdHocMoved class is added when the content has been moved into its final location. */
  }

.cxSectioned {
  display: none; /* Sectioned content is initially hidden until it has been moved into sections. */
  }

.SmallDevice .cxDesktopOnly {
  display: none;
  }

.cxCanJoin .cxIfCantJoin, .cxCantJoin .cxIfCanJoin  {
  display: none;
}

.cxPreSeason .cxIfNotPreSeason, .cxNotPreSeason .cxIfPreSeason  {
  display: none;
}

.cxPostSeason .cxIfNotPostSeason, .cxNotPostSeason .cxIfPostSeason  {
  display: none;
}

.PageSectBar {
  background-image: -webkit-linear-gradient(bottom, #fffffc, #f0ece8);
  background-image: linear-gradient(to top, #fffffc 0%, #f0ece8 100%);
  font-weight: bold;
  font-size: 1.2em;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 6px;
  vertical-align: middle;
  cursor: pointer;
    
  position: -webkit-sticky;  /*IOS pre-13*/
  position: sticky;
}

.NoData .PageSectBar { /* section title within a section that hasn't arrived yet */
  color: #808080;
}

.SmallDevice .PageSectBar {
  padding: 12px 0px 12px 6px;
}

.BigDevice .PageSectBar {
  margin-left: -8px;
}

.BigDevice .PageSectTitle {  /* An always-visible (i.e. non-accordion) section title */
  font-weight: bold;
  font-size: 1.2em;
  margin-top: 1.6em;
}

.DataTable TH, .DataTable .DataHeader TD , .DataTable TH A:link, .DataTable TH A:visited {
  /*background-color: #fffff0; */
  color: #800080;
  font-weight: bold;
  padding: 1px 4px;
  white-space: pre-line;
  }

.DataTable TH.Sortable {
  cursor: pointer;
}

.CustDataTableBtns, .StdDataTableBtns, .CustDataTableBtns > *, .StdDataTableBtns > *  {
  vertical-align: middle;
  display: inline-block;
  }

.DataTable .Medal1 TD {
  background: #f5e060;
  }

.DataTable .Medal2 TD {
  background: #d0d0d0;
  }

.DataTable .Medal3 TD {
  /*background: #d89048;*/
  background: #e8a058;
  }

.DataTable TD {
  background: #fff0c0;
  color: black;
  /*font: 10pt Arial;*/
  padding: 1px 4px;
  }

.DataTable .LeagueEvent {
  font-weight: bold;
  }

.DataTable .Emphasize {
  font-weight: bold;
  }

.DataTable .UnEmphasize {
  color: #808080;
  }

.DataTable .Medal3 .UnEmphasize {
  color: #606060;
  }

.DetailHeader {
  font-weight: bold;
  }

.ResultHeader {
  font: bold 10pt Arial;
  }

.ResultRaceHeader {
  font: bold 12pt Arial;
  }

.MedalsCatHeader {
  margin-top: 2em;
  margin-bottom: 1em;
}

.MedalsCatName {
  font: bold 1.2em Arial;
  }

.MedalsSubCatHeader {
  font: bold 1.1em Arial;
  font-style: italic;
  }

.DataTable .PlaceRacePts {
  background: #fff4d0;
  text-align: center;
  padding: 1px 5px;
  }

.DataTable .PlaceRacePtsDrop {
  background: #fff4d0;
  text-align: center;
  text-decoration: line-through;
  color: #808080;
  padding: 1px 5px;
  }

.DataTable .Medal1 .PlaceRacePts, .DataTable .Medal1 .PlaceRacePtsDrop {
  background: #fff080;
  }

.DataTable .Medal2 .PlaceRacePts, .DataTable .Medal2 .PlaceRacePtsDrop {
  background: #e8e8e8;
  }

.DataTable .Medal3 .PlaceRacePts, .DataTable .Medal3 .PlaceRacePtsDrop {
  /*background: #eeaa66;*/
  background: #f0b070;
  }

.DataTable .Medal3 .PlaceRacePtsDrop {
  color: #808080;
  }

.EDP A:visited, .EDP A:link {
  font: bold 18pt Arial;
  color: #6666ff;
  }

.TextWithToolTip {
  cursor: default;
}

.TabStripHolder {
  background: #fffffc;  /* Need this because otherwise the background is transparent when it sticks to the top, and you see the page scrolling behind */
  position: sticky;
/*  padding: 0.6em 0em;*/
  margin: 0.6em 0em;
}

.TabStrip {
  border-spacing: 0px;
  border-collapse: collapse;
  cursor: default;
}

.TabStrip TD, .TabStrip > DIV > DIV {
  background-color: #fffae8;
  color: #c8562a;
  border: 1px solid #d75d2f;
  padding: 0.3em 1em;
  font-weight: bold;
  text-align: center;
}

.TabStrip TD.SelTab, .TabStrip > DIV > DIV.SelTab {
  color: white;
  background-color: #d75d2f;
}

/*Lap-o-meter styles*/

IFRAME.LapoPre14 {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2002;  /* Same as fsdOuter on a non-iFrame lap-o-meter */
  background-color: transparent;
  border: none;
}

BODY.LapoPre14 {
  background-color: transparent;
}

.LapometerSubBody {
  /*padding: 8px 0px 0px 8px;*/
  padding: 8px;
  position: relative;
  }

#fsdContainer.SmallDevice {
/*  padding-top: 36px;*/ /* Blank space at top to bring content below title bar */
  }

.LapoTable {
  border-spacing: 0 2px;
  /*background-color: white;*/
  }

.LapoTable .LapoHead .LapoLap {
  text-align: center;
}

.LapoTable .LapoLap {
  text-align: right;
  border-left: 2px solid transparent;
  background-clip: padding-box;
}

.LapoStartOff {
  opacity: 0.8;
  font-style: italic;
}

.lapometerTip {
  position: absolute;
  background-color: #ffe0b0;
  padding: 0.3em;
  border: 1px solid #d75d2f;
}

.GraphBorder TD {
  background: #fff0c0;
  padding: 6px 16px 6px 6px;
  }

.GraphTable TD {
  background: #ffffff;
  padding: 0px 0px 0px 0px;
  line-height: 1px; /* Need this to ensure table cells are the height of the image ond no greater in standards mode */
  }

.GraphLapHeader TD {
  text-align: center;
  background: #fff0c0;
  color: #800080;
  font: bold 10pt Arial;
  padding: 0px 0px 4px;
  }

.GraphTitleBar {
  text-align: center;
  white-space: nowrap;
  background: #6666FF;
  color: #ffb070;
  padding: 6px;
  }

.BigDevice .fsdTitle {
  font-size: 1.4em;
  font-weight: bold;
  }

.GraphTitleBar.SmallDevice {
  /* padding: 4px; */
  }

.PoweredBy {
  font: italic 8pt Arial;
  }

INPUT[type="button"].OnOffButtonOn {
  background-color: #b0b0fb;
  color: #000000;
  border: 1px solid #404040;
  cursor: auto;
}

INPUT[type="button"].OnOffButtonOff {
  background-color: #e8e8e8;
  color: #404040;
  border: 1px solid #404040;
  cursor: pointer;
}

IMG.OnOffButtonOn {
  border: 1px solid #B56C3B;
}

IMG.OnOffButtonOff {
  border: 1px solid transparent;
}

.EmphBlock {
  border: solid 2px red;
  font-size: 16pt;
  width: 60%;
  margin: 20px auto 30px;
  padding: 10px;
  background-color: #ffeeee;
  text-align: center;
}

.CxMapInfoBox {
  background-color: #ffffff;  /* for old browsers that don't understand alpha channel */
  background-color: #fffffff0;
  color: black;
  border: 2px black solid;
  border-radius: 0.5em;
  padding: 0.5em;
}

.CxMapInfoBoxTitle {
  font-weight: bold;
  font-size: 1.1em;
}

/* Styles used in histograms and possibly other charts in future.  Only used in admin at the moment, but might be useful on the public site. */

.CritCtls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 15px;
  margin: 10px 0px 10px 15px;
}

.CxHist {
  border-spacing: 5px 0px;
}

.CxHistCell {  /* This is the TD */
  text-align: center;
}

.CxHistCell > DIV {  /* This is a DIV that's centred within the TD, and allows the bars to be positioned simply */
  display: inline-block;
  position: relative;
}

.CxHistCell > DIV > DIV {  /* positioned by inline properties; provides the colour for the histogram bar */
  position: absolute;
}

.CxHistCell > DIV > DIV > DIV {  /* sized by inline properties; provides a darkened border for the histogram bar */
  box-sizing: border-box;
  border: 1px solid #0003;  /* translucent blank */
  border-bottom: none;
}

.ChartXAxis {
  text-align: center;
}

.CxHistLabel {
  padding: 1px 4px;
  background-color: #f0d0a0;
}

.ChartLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 10px 0px 10px 15px;
}

.ChartLegend TD {
  vertical-align: middle;
}

.ChartLegend .LegendBlock {  /* The actual colour patch for legend items */
  display: inline-block;
  margin-right: 5px;
}

.ChartLegend .LegendBlock > DIV {  /* provides a darkened border for the legend items */
  box-sizing: border-box;
  border: 1px solid #0003;  /* translucent blank */
  width: 50px;
  height: 20px;
}

/*---------------------------------------------------------------*/

DIV.fsdTitleButton {  /* Button that appears in the title bar of a full-screen dialog */
  left: 0.6em;
  top: 0.3em;
  position: absolute;
  border: none;
  padding: 5px;
  background-color: #6666FF;
  color: white;
  cursor: default;
}

DIV.fsdTitleButton:hover {
  color: #e8d000;
  }

.fsdOpts { /* "Options" area that's visualy attached to the title bar */
  background-image: linear-gradient(to top, #ddddff 0%, #ddddff calc(100% - 0.75em), #6666ff 100%);
  padding: 0.2em 0.8em 0.5em;
}

.SmallDevice .fsdOpts {
  padding-left: 0.4em;
  padding-right: 0.4em;
}

.ctlBag { /* controls/options that we want laid out simply in a "pack them in where they fit" style */
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1em;
}

.fsdOpts .TabStripHolder {
  background-color: transparent;
  position: relative;
}

.fsdOpts .TabStrip TD {
  background-color: #ccf;
  color: #00a;
  border-color: #009;
}

.fsdOpts .TabStrip TD.SelTab {
  background-color: #009;
  color: white;
}

.fsdOpts P {
  padding-left: 0;
  padding-right: 0;
}

.fsdOpts .DataTable TD {
  background-color: #f8f8ff;
}

/*---------------------------------------------------------------*/

/* Styles for snake chart */

div#lappos svg {
  display: block;  /* ensures no extra space added by browser */
}

div#lappos path.snake {
  stroke: #6666FF;
  stroke-width: 3;
  fill: none;
}

div#lappos path.fatLine {
  stroke: transparent;
  stroke-width: 9;
  fill: none;
  stroke-opacity: 0;
}

div#lappos path.fatLine:hover, div#lappos path.fatLine.Highlight {
  stroke: #ffb070;
  stroke-opacity: 1;
}

div#lappos text {
  /*text-anchor: start;*/  /* this is affecting axes, which expect to set text-anchor:end at a higher level */
  fill: black;
  font-family: Arial;
  font-size: 1em;
  font-weight: normal;
}

div#lappos text.name {
  cursor: default;
}

div#lappos tspan.LapDeltaP {
  fill: #070;
  letter-spacing: -0.1em;
}

div#lappos tspan.LapDeltaM {
  fill: #C00;
  letter-spacing: -0.1em;
}

div#lappos tspan.DeltaP {
  fill: #070;
}

div#lappos tspan.DeltaM {
  fill: #C00;
}

div#lappos text.lapName {
  font-weight: bold;
}

div#lappos .credit {
  text-anchor: end;
  font-style: italic;
}

div#lappos rect.LabelBG {
  fill: #fffffc80;  /* translucent, so that DNF-rider labels are a bit more readable without obscuring other riders' lines */
}

div#lappos rect.LabelBG.Highlight {
  fill: #ffe0b0;
}