/* =========================
   Colors (from XML)
   ========================= */

body:not(svg text) {
  background-color: #e5dbfbff;
}

/* Header colors */
.header {
  border-color: #e5dbfbff;
  background: #9674F5FF; /* Old browsers */
background: -moz-linear-gradient(top,#9674F5FF 10.0%,#C3B9F1FF 50.0%,#6F29C7FF 100.0%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,#9674F5FF 10.0%,#C3B9F1FF 50.0%,#6F29C7FF 100.0%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,#9674F5FF 10.0%,#C3B9F1FF 50.0%,#6F29C7FF 100.0%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,#9674F5FF 10.0%,#C3B9F1FF 50.0%,#6F29C7FF 100.0%); /* IE10+ */
}

/* Banner inherits header background if provided */
.banner {
  border-color: #e5dbfbff;
  background: #9674F5FF; /* Old browsers */
background: -moz-linear-gradient(top,#9674F5FF 10.0%,#C3B9F1FF 50.0%,#6F29C7FF 100.0%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,#9674F5FF 10.0%,#C3B9F1FF 50.0%,#6F29C7FF 100.0%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,#9674F5FF 10.0%,#C3B9F1FF 50.0%,#6F29C7FF 100.0%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,#9674F5FF 10.0%,#C3B9F1FF 50.0%,#6F29C7FF 100.0%); /* IE10+ */
}

/* Viewer and page bodies */
.viewer,
.page,
.ReportPage,
.mPage,
.ShortAnswerPage,
.LongAnswerPage,
.organizerPage,
.flashcard,
.WidgetPage,
.mQuestionPage,
.JournalPage,
.overlayContent {
  background-color: #f8f4feb0;
height: 100%;
}

/* Nav / footer background (if provided as 'background: ...') */
.navigator,
.ui-tabs-anchor {
  background: #8967E9FF; /* Old browsers */
background: -moz-linear-gradient(top,#8967E9FF 20.75%,#8D42FBFF 100.0%,#FFFFFFFF 100.0%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,#8967E9FF 20.75%,#8D42FBFF 100.0%,#FFFFFFFF 100.0%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,#8967E9FF 20.75%,#8D42FBFF 100.0%,#FFFFFFFF 100.0%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,#8967E9FF 20.75%,#8D42FBFF 100.0%,#FFFFFFFF 100.0%); /* IE10+ */
}

/* Outer accents use outerBgColor */
.distractorHost,
nav#menux,
nav#menu,
nav#menu.splitpanelmenu,
#nav_2,
.colorboxDiv .text {
  background-color: #8967e9ff;
}

/* Popup accents use htmlBgColor for borders */
.popup {
  border-bottom: 20px solid #e5dbfbff;
  border-top: 20px solid #e5dbfbff;
}

/* =========================
   Flow Layout (no fixed/absolute)
   ========================= */

/* Let a wrapper center content if your base.css sets max-width */
.jetWrapper, .header, .viewer, .navigator {
  box-sizing: border-box;
  width: 100%;
}

/* Header at the top, establishes containing context for banner overlay */
.header {
  position: relative;          /* needed so .banner can overlay within */
  display: block;
  height: 70px;
  background-size: 100% 100%;
  border-style: solid;
  border-width: 0;
  padding-left: 10px;
  padding-right: 10px;
  z-index: 1;                  /* stacking context */
}

/* Banner overlays the header (for header text over bg) */
.banner {
  position: absolute;          /* overlays header area */
  top: 0 !important;
  left: 0;
  right: 0;
  height: 70px;                /* match header height */
  background-size: 100% 100%;
  border-style: solid;
  border-width: 0;
  text-align: center;
  font-weight: bold;
  padding-left: 10px;
  padding-right: 10px;
  z-index: 2;                  /* above header */
  display: block;              /* visible */
  /* optional: avoid intercepting clicks on header controls */
  /* pointer-events: none; */
}

/* Viewer below header, in normal flow */
.viewer {
  top:0px;
  position: relative;
  display: block;
  margin-top: 1px;            /* breathing room under header */
  margin-bottom: 0px !important;
  height: 80vh !important;
  font-size: 1em;
  overflow: hidden !important;
  -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
  box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
  border: 1px solid #e7e7e7;
  padding: 0 !important;
}

/* Navigator follows viewer, same width as header/viewer */
.navigator {
  top: 0px !important;
  position: relative !important;          /* in-flow, below viewer */
  display: block;
  height: 70px !important;
  background-size: 100% 100%;
  border-style: solid;
  border-width: 0;
  padding-left: 10px !important;
  padding-right: 10px !important;
  padding-top: 10px !important;
  margin-top: 0px !important;            /* small gap from viewer */
  clear: both;                 /* safety if floats exist above */
  z-index: 1;
}

/* Resource tabs keep whatever background was emitted above */
.ui-tabs-anchor {}