/* main */

.tubg {
  background-color: rgba(0, 0, 0, 0.5);
  position: relative;
  text-align: justify;
  text-shadow:  0px  1px 2px black,
                1px  1px 2px black,
                1px  0px 2px black,
                1px -1px 2px black,
                0px -1px 2px black,
               -1px -1px 2px black,
               -1px  0px 2px black,
               -1px  1px 2px black;
}

.tubg .tubular, .tubg .tubsig {
  border: 2px none #fad27d;
  color: #fcda92;
  font-family: Trebuchet MS, Verdana, sans-serif;
  font-size: 10pt;
  line-height: 110%;
  margin: 8px 50px 8px 12px;
  padding: 6px 120px 6px 8px;
}

.tubg .tubular {
  border-left-style: solid;
  min-height: 188px;
}

.tubg .tubsig {
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  padding-left: 1px;
}

.tubg .tubsig img { margin-right: 5px; }

.tubg a         { color: #48b1ca; }
.tubg a:visited { color: #88a2f0; }
.tubg a:hover   { color: #e699f5; text-decoration: none; }
.tubg a:active  { color: #ffe; }

.tubg s, .tubg strike {
  color: rgba(234, 200, 162, 0.7);
  text-shadow: none;
}

/* smwc styles */

.tubg div.quote, .tubg div.code {
  border-width: 2px;
  border-style: none none none solid;
  margin: 8px 8px 2px 20px;
}

.tubg div.quote { border-color: #fcda92; }
.tubg div.code  { border-color: #40c99e; }

.tubg div.quote > div.box, .tubg div.quote > span.boxhead,
.tubg div.code > pre.box, .tubg div.code > span.boxhead {
  margin: 5px;
  padding: 0;
  border-style: none;
}

.tubg div.quote > div.box, .tubg div.code > pre.box { padding-bottom: 5px; }
.tubg div.code > pre.box, .tubg div.code > span.boxhead { color: #6ee6c0; }

.tubg div.code > pre.box {
  margin-top: 3px;
  font-family: Consolas, monospace;
}

.tubg div.quote > span.boxhead:before, .tubg div.code > span.boxhead:before,
.tubg div.quote > span.boxhead:after,  .tubg div.code > span.boxhead:after  { content: ' :: '; }

/* celestia */

.tubg .celly {
  background: url('celly_none.png') top left no-repeat;
  position: absolute;
  height: 200px; width: 200px;
  bottom: -10px; right: 0px;
}

.tubg .celly:hover { background-image: none; }

.tubg .celly .body {
  position: relative;
  height: 100%; width: 100%;
  opacity: 1;
}

.tubg .celly .head, .tubg .celly .hoof {
  position: absolute;
  height: 50%; width: 100%;
  left: 0;
  z-index: 2;
  opacity: 0;
}

.tubg .celly .head {    top: 0; background: url('celly_top.png')  top left no-repeat; }
.tubg .celly .hoof { bottom: 0; background: url('celly_full.png') top left no-repeat; }

.tubg .celly .head:hover, .tubg .celly .hoof:hover {
  height: 100%;
  opacity: 1;
  z-index: 1;
}