
.esPage .dw-help,
.dw-help + .dw-help
  margin-top: 1em;

.dw-help + .dw-page h1.dw-p-ttl
  margin-top: 20px;  // why was it 0?
  padding-top: 0;

// Important messages are placed just below the title. Use a different color for them. [4JKYIXR2]
.dw-page .dw-help
  background-color: hsl(40, 88%, 94%);
  margin-top: 20px;


.dw-help
  max-width: 730px;
  background-color: hsl($uiHue, 100%, 95.6%);
  padding: 10px 13px 7px 12px;
  border-radius: 2px;
  clearfix()

  .dw-hide
    float: right;
    position: relative;
    top: -2px;
    white-space: nowrap;

  // ---- Page type icons
  // (Could wrap this in some esHelp-pageTypeIcon later if needed?)

  // Make icons look like they do in front of the title, so people realize that the (?)
  // in "This is a (?) question, ..." is the same (?) as the one just in front of the
  // page title.
  .icon-help-circled:before
    font-size: 142%;
    color: hsl(0, 0%, 48%);
    position: relative;
    top: 1px;

  .icon-ok-circled:before,
  .icon-ok-circled-empty:before
    font-size: 127%;
    color: hsl(0, 0%, 46%);

  .s_Pg_TtlExpl_Active
    .icon-ok-circled:before,
    .icon-ok-circled-empty:before
      color: hsl($solvedHue, 57%, 43%);

  .icon-block:before
    font-size: 130%;
    color: hsl(0, 0%, 41%);

.dw-how-to-show-help-again
  .dw-hamburger-menu
    border: 1px solid #888;
    padding: 0 5px 2px 3px;

.dwHelp-large
  padding: 14px 12px 11px 14px;
  max-width: 580px;
  font-size: 113%;
  line-height: 1.5;
  letter-spacing: 0.1px;
  word-spacing: 1px;

.esHelp-warning
  background-color: hsl(40, 80%, 90%);


.esHelpDlg
  max-width: 550px;

.esHelpDlg_body_wrap
  clearfix();

.esHelpDlg_body
  margin-bottom: 2em;

.esHelpDlg_btns
  float: right

  .form-group
    display: inline-block;
    margin: 0;

  .checkbox
    margin-right: 20px;


// Server announcements.
.c_SrvAnns
  padding: 0 20px;
.c_SrvAnns .dw-help
  margin: 15px auto 25px;
  background-color: $orangeTipsBackground;
  &.c_Help-Nice
    background-color: $greenTipsBackground;
  box-shadow: 5px 5px 11px rgb(0 0 0 / 50%);
  color: black;

.c_TBx_WhoSee
  float: left;
  margin-bottom: 0;
  font-size: 86%;
  color: hsl(0 0% 24%);


// vim: fdm=marker et ts=2 sw=2 tw=0 fo=r list
