html {
      background-color: #000000;
      width: 100%;
      height: 100%;
}

body {
      background-color: #000000;
      font-family: 'Nunito', sans-serif;
      font-size: 14px;
      width: 100%;
      height: 100%;
      margin: 0em;
      padding: 0em;
}

#logoframe { /*override background etc in /css/BaseSiteCSS.css*/
      widrh: 100%;
      padding: 0.5em;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
}

iframe {
      border: 0;
}

.tframe { /*constrain a block element text to fill only a certain area*/
      max-width: 100px;
}

.invisible {
      display: none !important;
      visibility: collapse !important;
}

/*space calculated inverse to adhere to h1 being highest and h5 lowest so we have margins being h2=1-0.2, h3=1-0.4, h4 being 1-0.6 etc*/
hr.hr2 {
      margin: 0.8em 0 0.8em 0;
}


/* allows html sections to be inactive and moved to a required container when needed - this cuts down on dhtml gen */
#pagecache {
      display: none;
      visibility: collapse;
}

div.clipboardBtnsGroup {
      display: inline-block;
      vertical-align: top;
      margin: 0.5em;
}

/* colours */
.bgd-white {
      background-color: #ffffff;
}

/* pastel from https://materialcolor.xyz/ */
.pastel-red {
      background-color: #F09A9B;
}

.pastel-pink {
      background-color: #F38FB3;
}

.pastel-purple {
      background-color: #9C51A0;
}

.pastel-deeppurple {
      background-color: #775BA6;
}

.pastel-indigo {
      background-color: #A1A8D6;
}

.pastel-blue {
      background-color: #96C8ED;
}

.h1 {
      height: 2em;
      font-weight: bold;
}

.pastel-lightblue {
      background-color: #83D3F6;
}

.pastel-cyan {
      background-color: #88D4E2;
}

.pastel-teal {
      background-color: #88D4E2;
}

.pastel-green {
      background-color: #A5D4A6;
}

.pastel-lightgreen {
      background-color: #C4E0A6;
}

.pastel-lime {
      background-color: #E4EB9E;
}

.pastel-yellow {
      background-color: #FCF6A0;
}

.pastel-amber {
      background-color: #FFCA29;
}

.pastel-orange {
      background-color: #FECD80;
}

.pastel-deeporange {
      background-color: #F37046;
}


.darkgrey {
      background-color: #4D5656;
}

.red {
      background-color: #F44336;
}

.darkred {
      background-color: #641E16;
}

.darkgreen {
      background-color: #0B5345;
}

.orange {
      background-color: #e68a00;
}

.darkorange {
      background-color: #B9770E;
}

.yellow {
      background-color: #FFF176;
}

.yellowgreen {
      background-color: #C0CA33;
}

.green {
      background-color: #4CAF50;
}

.dimgreen {
      background-color: #1E8449;
}

.bluegreen {
      background-color: #80CBC4
}

.blue {
      background-color: #0D47A1;
}

.purple {
      background-color: #5900b3;
}

.red-flash {
      animation: redflash 0.5s infinite;
}

@keyframes redflash {
      0% {
	    background-color: #00ff00;
	    color: #000000;
      }
      40% {
	    background-color: #ff0000;
	    color: #ffffff;
      }
      60% {
	    background-color: #ffff00;
	    color: #ffffff;
      }
      85% {
	    background-color: #ffffff;
	    color: #ff0000
      }
}