/*
        / \
      /     \
     |\     / \ / \  chiral software
     |  \ /     \   \
      \  |\     /|  /|
        \|  \ /  |/  |
         |\  |  /|  /
         |  \|/  |/
          \  |  /
            \|/
*/

/*
  colour scheme, for your search and replace conveniance

  grey:
  duller colour for star and planet decoration : #888
  main bright ui colour                        : #aaa
  brighter ui colour for currently selected    : #ddd
  brighter ui colour for rollover highlighting : #fff

  (honestly #as vs #cs doesn't make much difference)
*/

/* global stuff */

body {
  font-family: Arial,sans-serif;
}

p {
  text-align:    justify;
  margin-bottom: 4px;
  margin-top:    4px;
}

h1 { 
  font-size: 150%; 
  font-weight: bold;
  margin-top:4px;
  margin-bottom:4px;
}

h2 { 
  font-size: 125%; 
  font-weight: bold; 
  margin-top: 8px;
  margin-bottom: 4px;
}

div:focus  { outline: none; }
span:focus { outline: none; }

input[type=radio] {
  width: 20px; height: 20px;
}

/* black glass panel style */

.glass-top {
  background:    rgba(32,32,32,0.75);
  padding:       10px;
  border-radius: 5px;
}

.inflexible {
  flex: 0 0 auto;
}
/* see also unit-backdrop */

.glass-info {
  stroke:        #aaa;
  color:         #aaa;
  background:    rgba(0,0,0,0.25);
  padding:       5px;
  border-radius: 5px;
  align-self:    stretch;
}

.glass-highlight {
  background:    rgba(128,128,128,0.5);
}

/* layout */

div { box-sizing: border-box; }

.gapped     { gap: 5px 5px; }
.vgapped    { gap: 20px 5px; }

.parapadded { padding-left: 20px; padding-right: 20px; }
.padded     { padding: 5px; }
.hpad       { padding-right: 5px; padding-left:5px; }

.hflex      { display:flex;flex-direction:row; }
.vflex { 
  display:        flex;
  flex-direction: column;
  align-items:    center;
}

/* text stuff */

.big   { font-size: 140%; }
.small { font-size: smaller; }

.table-key { font-style: italic; }

.text-button { text-decoration: underline; }

.text-para {
  text-align:    justify;
  white-space:   pre-wrap;
  font-size:     smaller;
}

description {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px 5px;
}

description>div {
  text-align:    justify;
  font-size:     smaller;
}

/* form UI stuff */

select {
  border: 0px;
  outline: none;
}

/* common layout patterns */

.button-panel {
  display: flex;
  justify-content: center;
  align-self: center;
}

input {
  font-family: inherit;
  font-size:   inherit;
  border:      0px;
}

.label {
  font-style:   italic;
  align-self:   center;
} 

.ordinary-label {
  align-self:   center;
}

/* colours */

.ui-fill          { fill:   #aaa; }
.ui-stroked       { stroke: #aaa; }
.ui-decoration    { fill:   #666; }

.ui-symbol { stroke: #aaa; fill: #aaa; }

a, .ui-bright, input {
  color:  #aaa;
  stroke: #aaa;
}

.selected-area { 
  fill:         none;
  stroke:       #aaa;
  stroke-width: 0.05;
}

.unit-backdrop {
  fill:   rgba(0,0,0,0.25);
  stroke: none;
}

/* hover control highlighting */

.ui-control                          { pointer-events: auto;
                                       cursor: pointer;
                                       color:  #aaa; }
.ui-control:hover                    { color:  #fff; }
.ui-control.ui-stroked:hover         { stroke: #fff; }
.ui-control.ui-fill:hover            { fill:   #fff; }
.ui-control.ui-symbol:hover, a:hover { fill:   #fff; }
.ui-selected                         { color:  #ddd; }

/* popup dialog stuff */

.outcome-width { width: 500px; }

/* tooltip stuff */

.tooltip-label { font-weight: bold; }

/* misc */

.npe { pointer-events: none; }
.cursorDefault { cursor: default; }
a:focus { outline:none; }