/**
 *      style.css
 *      ~~~~~~~~~
 *
 *      $Revision: 2440 $ $Date: 2022-02-24 10:02:39 +0100 (Thu, 24 Feb 2022) $
 */

body {
  background: url(/symboole/static/carpet.gif) repeat fixed;
}

@media only screen and (max-height: 768px),
       only screen and (max-device-height: 768px)
                   and (orientation: landscape),
       only screen and (min-resolution: 144dpi),
       only screen and (-webkit-min-device-pixel-ratio: 1.5) {

  /* iPad Landscape, Retina */

  body {
    background-size: 96px 96px;
  }
}

@media only screen and (max-height: 768px) and (min-resolution: 144dpi),
       only screen and (max-height: 768px) and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (max-device-height: 768px)
                   and (min-resolution: 144dpi)
                   and (orientation: landscape),
       only screen and (max-device-height: 768px)
                   and (-webkit-min-device-pixel-ratio: 1.5)
                   and (orientation: landscape) {

  /* Retina iPad Landscape */

  body {
    background-size: 64px 64px;
  }
}

/* iPhone & iPod */

#LogoHead {
  position: static;
  display: block;
  margin: auto;
  top: 0;
  height: 30px;
  max-width: 768px;
}

#BrandLogo {
  display: none;
  background: url(/symboole/static/symbolabs-logo-568x60.png) no-repeat;
  background-size: 284px 30px;
  width: 284px;
  height: 30px;
  margin: auto;
}

#AppLogo {
  display: block;
  background: url(/symboole/static/SymBoole-logo-228x60.png) no-repeat;
  background-size: 114px 30px;
  width: 114px;
  height: 30px;
  margin: auto;
}

#Interaction {
  display: table;
  margin: auto;
  margin-top: 1em;
}

@media only screen and (min-height: 640px),
       only screen and (min-device-height: 640px) {

  #Interaction {
    margin-top: 1.5em;
  }
}

#Expr {
  display: block;
  width: 288px;
  height: 3.5em;
  margin-bottom: 1em;
  background-color: #FCFCFB;
  color: #444;
}

#Func {
  float: left;
}

#Form {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

#Eval {
  float: right;
}

#Func, #Form, #Eval {
  font-size: 10pt;
}

#Wait {
  display: none;
  background: url(/symboole/static/spinner.gif) no-repeat;
  background-size: 48px 48px;
  width:   48px;
  height:  48px;
  margin:  auto;
}

#Result {
  display: table;
  margin: auto;
  margin-top: 1em;
}

.text, .small {
  font: 12pt "PT Sans", "Euphemia UCAS", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  color: #404040;
}

.small {
  font-size: 8pt;
}

@media only screen and (max-device-width: 320px)
                   and (orientation: portrait) {

  /* iPod & iPhone Portrait */

  .text {
    font-size: 10pt;
  }

  .small {
    font-size: 7pt;
  }
}

.code, .data, .error {
  font: bold 13pt "DejaVu Sans Mono", "Andale Mono", Courier, monospace;
  text-rendering: optimizeLegibility;
  color: #555;
}

@media only screen and (max-device-width: 568px)
                   and (orientation: landscape) {

  /* iPod & iPhone Landscape */

  #Interaction {
    margin-top: 1ex;
  }

  #Expr {
    height: 2.4em;
    margin-bottom: 1ex;
  }

  #Func, #Eval {
    font-size: 7pt;
  }

  #Result {
    margin-top: 1ex;
  }

  .code, .data, .error {
    font-size: 10pt;
  }

  .text {
    font-size: 7pt;
  }

  .small {
    font-size: 5pt;
  }
}

@media only screen and (min-width: 769px),
       only screen and (min-height: 1025px),
       only screen and (min-device-width: 321px)
                   and (orientation: landscape),
       only screen and (min-resolution: 144dpi),
       only screen and (-webkit-min-device-pixel-ratio: 1.5) {

  /* Desktop, iDevice in Landscape orientation, Retina */

  .code, .data, .error {
    font-weight: normal;
    color: #000;
  }
}

@media only screen and (min-height: 768px),
       only screen and (min-device-width: 768px) {

  /* Desktop, iPad */

  #LogoHead {
    height: 40px;
  }

  #BrandLogo {
    display: block;
    background: url(/symboole/static/symbolabs-logo-720x80.png) no-repeat;
    background-size: 360px 40px;
    width: 360px;
    height: 40px;
    float: left;
  }

  #AppLogo {
    display: block;
    background: url(/symboole/static/SymBoole-logo-292x80.png) no-repeat;
    background-size: 146px 40px;
    width: 146px;
    height: 40px;
    float: right;
  }

  #Interaction {
    margin-top: 2.5em;
  }

  #Expr {
    width: 600px;
    height: 5.7em;
  }

  #Func, #Eval {
    font-size: 12pt;
  }

  .code, .data, .error {
    font-size: 12pt;
  }

  .text {
    font-size: 11pt;
  }

  .small {
    font-size: 8pt;
  }
}

@media only screen and (max-device-width: 768px)
                   and (orientation: portrait) {

  /* iPad Portrait */

  #Func, #Eval {
    font-size: 11pt;
  }

  .code, .data, .error {
    font-size: 14pt;
  }

  .text {
    font-size: 13pt;
  }

  .small {
    font-size: 9pt;
  }
}

@media only screen and (min-device-width: 768px)
                   and (max-device-width: 1024px)
                   and (orientation: landscape) {

  /* iPad Landscape */

  #Interaction {
    margin-top: 1em;
  }

  #Expr {
    height: 4.5em;
  }

  #Func, #Eval {
    font-size: 10pt;
  }
}

@media only screen and (max-device-width: 960px)
                   and (orientation: landscape) {

  /* Large iPhone Landscape */

  #LogoHead {
    height: 40px;
  }

  #BrandLogo {
    display: block;
    background: url(/symboole/static/symbolabs-logo-720x80.png) no-repeat;
    background-size: 360px 40px;
    width: 360px;
    height: 40px;
    float: left;
  }

  #AppLogo {
    display: block;
    background: url(/symboole/static/SymBoole-logo-292x80.png) no-repeat;
    background-size: 146px 40px;
    width: 146px;
    height: 40px;
    float: right;
  }

  #Interaction {
    margin-top: 1em;
  }

  #Expr {
    width: 600px;
    height: 3.5em;
  }

  #Func, #Eval {
    font-size: 12pt;
  }

  .code, .data, .error {
    font-size: 14pt;
  }

  .text {
    font-size: 13pt;
  }

  .small {
    font-size: 9pt;
  }
}

.funSym {
  color: #703FFF;
}

.varSym {
  color: #2AAA00;
}

.valSym {
  color: #BF008F;
}

.punct {
  color: #D8A200;
}

table.error {
  background-color: #DFDFDF;
  border: 1px solid #AAA;
}

table.error td {
  background-color: #FFE0E0;
  text-align: left;
  color: #6B001A;
}

table.output {
  background-color: #DFDFDF;
  border: 1px solid #AAA;
}

table.output>thead, table.output th {
  background-color: #EEE;
  text-align: center;
}

table.output>thead th {
  padding-left: 2px;
  padding-right: 2px;
  white-space: nowrap;
}

table.output td.xtra {
}

table.output>tbody td.code {
  padding-left: 1ex;
  padding-right: 1ex;
}

table.output>tbody td.data, table.output>tbody td.text {
  padding-left: 1ex;
  padding-right: 1ex;
  vertical-align: bottom;
  width: 1px;
}
table.output>tbody>tr>td.text:first-child {
  background-color: #EEE;
  text-align: right;
  border-left: 1px solid #DFDFDF;
}

table tr.rowColor0 {
  background-color: #F3F7FF;
}
table tr.rowColor1 {
  background-color: #F8F8F8;
}

/* ~ style.css ~ */