/*****
Last update: 2-24-2020
media.css
*****/
[type=radio] {
  position: absolute;
/*  opacity: 0;
  width: 0;
  height: 0;*/
}
[type=radio] + img {
  cursor: pointer;
}
[type=radio]:checked + img {
  outline: 4px solid #55a;
}
[type=radio] + div {
  cursor: pointer;
}
[type=radio]:checked + div {
  outline: 4px solid #55a;
}
#custom-handle1 {
  width: 3em;
  height: 1.6em;
  top: 50%;
  margin-top: -.8em;
  text-align: center;
  line-height: 1.6em;
}
#custom-handle2 {
  width: 3em;
  height: 1.6em;
  top: 50%;
  margin-top: -.8em;
  text-align: center;
  line-height: 1.6em;
}
#custom-handle3 {
  width: 3em;
  height: 1.6em;
  top: 50%;
  margin-top: -.8em;
  text-align: center;
  line-height: 1.6em;
}
#slider1 {
  width: 18.0em;
  margin-bottom: 1.5em;
  margin-top: 1.5em;
  margin-left: 0.6em;
}
#slider2 {
  width: 18.0em;
  margin-bottom: 1.5em;
  margin-top: 1.5em;
  margin-left: 0.6em;
}
#slider3 {
  width: 18.0em;
  margin-bottom: 1.5em;
  margin-top: 1.5em;
  margin-left: 0.6em;
}
.st0 {
  font-family: Georgia;
  line-height: 1.5;
}
/* st1: US flag */
.st1 {
  font-family: Georgia;
  color: DarkRed;
  font-size: 2.5em;
  margin-left: 20%;
  margin-right: 20%;
  line-height: 1.5;
}
/* st2: Texas flag */
.st2 {
  font-family: 'Marck Script', cursive;
  color: DarkBlue;
  font-size: 3.8em;
  margin-left: 40%;
  margin-right: 0;
  line-height: 1.8;
}
.st3 {
  font-family: 'Marck Script', cursive;
  color: Navy;
  line-height: 1.5;
}
.st4 {
  font-family: Ubuntu;
  color: MintCream;
  line-height: 1.5;
}
.st5 {
  font-family: Tahoma;
  color: GhostWhite;
  line-height: 1.3;
  margin-top: 0.2em;
}
.st6 {
  font-family: Stoke;
  color: AliceBlue;
  line-height: 1.3;
  margin-bottom: 40%;
}
.st7 {
  font-family: Stoke;
  color: DarkSlateGray;
  line-height: 1.3;
}
.st8 {
  font-family: Tahoma;
  color: GreenYellow;
  line-height: 1.4;
}
.st9 {
  font-family: Georgia;
  color: FloralWhite;
  line-height: 1.5;
}
/* st10: convention recess */
.st10 {
  font-family: Stoke;
  color: AliceBlue;
  font-size: 4.7em;
  line-height: 1.3;
}
.st11 {
  font-family: Stoke;
  color: Chartreuse;
  text-shadow: 2px 2px DarkBlue;
  line-height: 1.3;
}
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}
div#allbgs {
  margin-top: 0em;
  margin-bottom: 0.5em;
  margin-left: 0em;
  margin-right: 1.0em;
  overflow: auto;
  clear: both;
}
div#colors {
  margin-top: 0;
  margin-bottom: 1.0em;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  overflow: auto;
  background-color: #ffffff;
}
div#promptspace {
  margin-top: 0;
  margin-bottom: 1.0em;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  overflow: auto;
}
div#prompttext {
  margin-top: 1.0em;
  margin-bottom: 0.5em;
  margin-left: 0;
  margin-right: 0;
  clear: both;
  overflow: auto;
}
div#promptuser {
  margin-top: 1.0em;
  float: right;
}
div#promptuser2 {
  margin-top: 1.6em;
  margin-bottom: 3.0em;
  margin-left: 2.0em;
  margin-right: 1.0em;
  float: left;
}
div.bg {
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
div.color {
  float:left;
  margin-right: 0.8em;
  margin-bottom: 0.5em;
  padding: 0.3em;
  font-family: Stokes, Arial, Helvetica;
  font-weight: normal;
  font-style: italic;
  font-size: 0.9em;
}
div.image {
  overflow: auto;
}
div.main {
  margin: 0;
  height: 100%;
  position: relative;
}
div.message {
  position: absolute;
  top: 50%;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  transform: translateY(-50%);
}
div.notetext {
  margin: 0.0em 0.0em 0.5em;
  padding: 0.3em 0.3em;
  clear: both;
  color: black;
  font-family: Stokes, Arial, Helvetica;
  font-weight: normal;
  font-style: italic;
  font-size: 0.9em;
  background-color: Cyan;
  color: Navy;
}
div.prompt {
  float: left;
}
div.screen {
  padding: 0.2em;
  margin: 0.2em;
  float: left;
}
div.selected {
  border: 5px solid gold;
  border-radius: 4px;  /* Rounded border */
}
div.text {
  margin: 0.2em;
  clear: both;
  color: black;
  font-family: Stokes, Arial, Helvetica;
  font-weight: normal;
  font-style: italic;
  font-size: 0.7em;
}
div.thumb {
  padding: 0em;
  margin: 0em;
  height: 80px;
  width: 120px;
  float: left;
}
h1 {
  text-align: center;
}
h2 {
  margin-top: 0;
  margin-bottom: 1.0em;
  margin-left: 0;
  margin-right: 0;
  font-family: Stokes, Arial, Helvetica;
  font-weight: normal;
  font-style: italic;
  font-size: 1.4em;
  color: #AAAAAA;
}
h3 {
  font-family: Stokes, Arial, Helvetica;
  font-weight: normal;
  font-style: italic;
  font-size: 1.4em;
  clear: both;
  margin-top: 5.0em;
}
img.thumb {
  border: 0px;
  padding: 0.2em;
  margin: 0.2em;
  width: 120px;
  height: 80px;
  float: left;
}
input.selectscreen {
  opacity: 0;
  width: 0;
  height: 0;
}
input.mediatext {
  width: 50em;
  border: 1px solid #006;
  background: PaleGoldenrod;
  font-family: Stokes, Arial, Helvetica;
  font-weight: normal;
  font-style: italic;
  font-size: 0.9em;
}
input.mediaprompt {
  padding: 0.3em;
  border-radius: 5px;
  height: 3.0em;
  width: 23.0em;
}
input.mediaprompt2 {
  padding: 0.3em;
  border-radius: 5px;
  height: 3.0em;
  width: 26.0em;
  margin-bottom: 1.0em;
}
span.text {
  color: black;
  font-family: Stokes, Arial, Helvetica;
  font-weight: normal;
  font-style: italic;
  font-size: 0.7em;
}
span.textunder {
  color: black;
  font-family: Stokes, Arial, Helvetica;
  font-weight: normal;
  font-style: italic;
  font-size: 0.7em;
  clear: left;
}
span.screenum {
  color: black;
  font-family: Stokes, Arial, Helvetica;
  font-weight: bold;
  font-style: italic;
  font-size: 1.5em;
  display: block;
}