sample-demo-double.css

/* CSS definitions for putting two Glk contexts on the same web page.

   Many of the definitions in glkote.css and dialog.css use #id element
   specifiers. This is bad form for exactly this reason -- what if you
   need two of them on the page? Well, mostly you don't, except for
   this sample-demo-double example. So I have to get hacky.
*/

/* Prefixed definitions from glkote.css: */

#alpha_windowport, #beta_windowport {
  width: 100%;
  height: 100%;
}

#alpha_errorpane, #beta_errorpane {
  position: absolute;
  top: 0px;
  width: 100%;
  background: #FFA0A0;
  border-bottom: 3px solid #FF4040;
}

#alpha_errorpane.WarningPane, #beta_errorpane.WarningPane {
  background: #B0B0FF;
  border-bottom: 3px solid #6060FF;
}

#alpha_errorpane:hover, #beta_errorpane:hover {
  background: rgba(255, 160, 160, 0.5);
  border-bottom: 3px solid rgba(255, 64, 64, 0.3);
}

#alpha_errorpane.WarningPane:hover, #beta_errorpane.WarningPane:hover {
  background: rgba(176, 176, 255, 0.5);
  border-bottom: 3px solid rgba(96, 96, 255, 0.3);
}

#alpha_errorcontent, #beta_errorcontent {
  font-size: 1.1em;
  padding: 1em;
  text-align: center;
}

#alpha_loadingpane, #beta_loadingpane {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 20%;
}

#beta_windowport .WindowFrame {
  background: #EEF8FF;
}

#beta_windowport .GridWindow {
  background: #A0D0FF;
}

/* Prefixed definitions from dialog.css: */

#dialogalpha_screen, #dialogbeta_screen {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #808080;
  opacity: 0.5;
}

#dialogalpha_frame, #dialogbeta_frame {
  position: absolute;
  width: 100%;
  height: 100%;
}

#dialogalpha, #dialogbeta {
  position: relative;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  background: white;
  border: 4px solid #AAA;
  -webkit-box-shadow: 1px 1px 15px #222;
  -moz-box-shadow: 1px 1px 15px #222;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

#dialogalpha .DiaCaption, #dialogbeta .DiaCaption {
  margin: 16px;
}

#dialogalpha .DiaWarning, #dialogbeta .DiaWarning {
  margin: 16px;
  font-size: 14px;
  font-style: italic;
}

#dialogalpha .DiaInput, #dialogbeta .DiaInput {
  margin: 16px;
}

#dialogalpha input, #dialogbeta input {
  width: 100%;
}

#dialogalpha .DiaBody, #dialogbeta .DiaBody {
  margin: 16px;
  clear: both;
}

#dialogalpha select, #dialogbeta select {
  width: 100%;
}

#dialogalpha button, #dialogbeta button {
  margin-left: 8px;
}

#dialogalpha .DiaButtons, #dialogbeta .DiaButtons {
  margin: 16px;
  text-align: right;
}

#dialogalpha .DiaButtonsFloat, #dialogbeta .DiaButtonsFloat {
  margin-left: 16px;
  margin-right: 16px;
  float: right;
}

#dialogalpha .DiaDisplayText, #dialogbeta .DiaDisplayText {
  font-family: inherit;
  height: 200px;
  padding: 4px 8px;
  overflow: scroll;   /* vertical scrollbar is mandatory */
  overflow-x: hidden; /* but horizontal scrollbar is forbidden */
  font-size: 14px;
  white-space: pre-wrap;
  background: #FED;
}