/*
  tps-stdui.css
  Collection of standard generic UI styles
*/

/************************************************/
/**** HYPERLINK STYLES AND SIZES */
a:link {
  color: #1476b8;
  color: blue;
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  color: red;
}
a:active {
  color: #b81414;
  color: red;
}

/************************************************/
/**** TEXT STYLES AND SIZES */
.clsTEXT-GROW {
  font-size: calc(1vw + 0.6em);
}
.clsTEXT-GROWLARGER {
  font-size: calc(1vw + 2em);
}
.clsTEXT-SMALL {
  font-size: .7em;
}
.clsTEXT-SMALLEST {
  font-size: .5em;
}
.clsTEXT-LARGE {
  font-size: 1.2em;
}
.clsTEXT-LARGEST {
  font-size: 1.5em;
}
.clsTEXT-HUGE {
  font-size: 2.5em;
}
.clsTEXT-BOLD {
  font-weight: bold;
}
.clsTEXT-ITALIC {
  font-style: italic;
}
.clsTEXT-CENTERED {
  text-align: center;
}
.clsTEXT-UNDERLINED {
  text-decoration: underline;
}
.clsTEXT-RED {
  color: red;
}
.clsTEXT-BLUE {
  color: blue;
}
.clsTEXT-WHITE {
  color: white;
}
.clsTEXT-BLACK {
  color: black;
}
.clsTEXT-GREEN {
  color: green;
}
.clsTEXT-NAVY {
  color: navy;
}
.clsTEXT-YELLOW {
  color: yellow;
}
.clsTEXT-CYAN {
  color: cyan;
}
/************************************************/
/**** FONTS */
.clsFONT-COURIER {
  font-family: 'Courier New';
}
.clsFONT-CORSIVA {
  font-family: 'Monotype Corsiva';
}
.clsFONT-ARIAL {
  font-family: 'arial';
}
.clsFONT-ARIAL {
  font-family: 'calibri';
}
.clsFONT-TIMESNEWROMAN {
  font-family: 'Times New Roman';
}
/************************************************/
/**** BG COLORS */
.clsBG-NAVY {
  background: navy;
}
.clsBG-GREEN {
  background: green;
}
.clsBG-LIGHTGREEN {
  background: #f0fce8;
}
.clsBG-RED {
  background: red;
}
.clsBG-LIGHTRED {
  background: #f7d2ce;
}
.clsBG-BLUE {
  background: blue;
}
.clsBG-LIGHTBLUE {
  background: #bee7fb;
}
.clsBG-YELLOW {
  background: yellow;
}
.clsBG-LIGHTYELLOW {
  background: #f8fade;
}
.clsBG-REDGRAD {
  background: linear-gradient(to bottom, #FFE6E7 0%, #ffadaf 50%, #FF3333 100%);
}
.clsBG-GREENGRAD {
  background: linear-gradient(to bottom, #e8ffe0 0%, #CDFFBB 50%, #66FF33 100%);
}
.clsBG-YELLOWGRAD {
  background: linear-gradient(to bottom, white 0%, #FFFF94 50%, #FFFF66 100%);
}
clsBG-LIGHTYELLOWGRAD {
  background: linear-gradient(to bottom, white 0%, #faf9de 50%, #faf9e4 100%);
}
.clsBG-STEELGRAD {
  background: linear-gradient(to bottom, white 0%, #E2E6F0 50%, #c0c8de 100%);
}

/************************************************/
/**** BOXES */
.clsBOX-BLACK {
  border: solid black 1px;
}
.clsBOX-RED {
  border: solid red 1px;
}
.clsBOX-BLUE {
  border: solid blue 1px;
}
.clsBOX-GREEN {
  border: solid green 1px;
}
.clsBOX-WHITE {
  border: solid white 1px;
}
.clsBOX-AQUA {
  border: solid aqua 1px;
}
.clsBOX-NAVY {
  border: solid navy 1px;
}
.clsBOXFILLED-RED {
  border: solid black 1px;
  padding: .2em .5em;
  color: white;
  background-color: red;
}
.clsBOXFILLED-LIGHTRED {
  border: solid black 1px;
  padding: .2em .5em;
  color: black;
  background-color: #fbaebc;
}
.clsBOXFILLED-YELLOW {
  border: solid black 1px;
  padding: .2em .5em;
  color: black;
  background: yellow;
}
.clsBOXFILLED-LIGHTYELLOW {
  border: solid black 1px;
  padding: .2em .5em;
  color: black;
  background: #fbfbd1;
}
.clsBOXFILLED-GREEN {
  border: solid black 1px;
  padding: .5em 1em;
  color: white;
  background: green;
}
.clsBOXFILLED-CYAN {
  border: solid black 1px;
  padding: .2em .5em;
  color: black;
  background: cyan;
}
.clsBOXFILLED-BLACK {
  border: solid black 1px;
  padding: .2em .5em;
  color: white;
  background: black;
}
.clsBOXFILLED-WHITE {
  border: solid black 1px;
  padding: .2em .5em;
  color: black;
  background: white;
}
.clsBOX-ROUNDED {
  border-radius: .5em;
}
/************************************************/
/**** VISIBILITY */
.clsVISIBLE {
  display: block;
}
.clsHIDDEN {
  display: none;
}

/************************************************/
/****  QUOTES AND DROP-CAPS */
.clsQUOTE {
  quotes: """""";
  font-size: 1em;
  font-style: italic;
}

.clsTRUNCATE {
  border: solid black 1px;
  color: black;
  font-size: 1rem;
  padding: 0 .5em;
  width: 275px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

p.clsDROPCAP::first-letter {
  font-size: 300%;
  color: red;
  font-weight: bold;
  font-family: 'calibri';
  font-family: 'Times New Roman';
  xfont-family: 'Monotype Corsiva';
  xfont-family: 'arial';
  xfont-family: 'Broadway';
}

.clsDROPCAP::first-letter {
  font-size: 2.5rem;
  color: white;
  font-weight: bold;
  line-height: 2.3rem;
  xfont-family: 'calibri';
  xfont-family: 'Times New Roman';
  xfont-family: 'Monotype Corsiva';
  font-family: 'arial';
  xfont-family: 'Broadway';
}
/************************************************/
/**** DROP SHADOW ON PNG IMAGES */
.clsSHADOWBOX {
  max-width: 60px;
  height: auto;
}
.clsDROPSHADOW {
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: drop-shadow(11px 5px 3px #404040);
}
/************************************************/
/**** MISC */
.clsDEVDIV {
  border: solid black 1px;
  margin: .2em .5em;
  padding: .2em .5em;
  background: #d9edfa;
  color: black;
  font-size: .875em;
  font-weight: bold;
}
.clsSTDDIV {
  margin: 0 1em;
  padding: 0 .5em;
  border: solid black 1px;
}
.clsCENTERDIV {
  text-align: center;
}
.clsWEBMASTERFTR {
  border: solid black 1px;
  margin: .2em .5em;
  margin-bottom: .5em;
  background: ivory;
  color: black;
  padding: .3em .4em;
  font-size: .6em;
  text-align: center;
}