#logo
{
position:absolute;
left:20px;
top:0px;
height:100%;
}


.pulse-glow {
  animation: pulse 2s infinite ease-in-out;
  transition: transform 0.2s;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255,0,0, 0.6);
  }
  50% {
    transform: scale(1.5);
    box-shadow: 0 0 55px rgba(255,0,0, 1);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255,0,0, 0.6);
  }
}


#theTitle
{
position:absolute;
right:20px;
top:20px;
text-shadow: 3px 0px 3px #FFFFFF;
text-align:center;
background:gold;
border:1px black solid;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
padding:20px;
opacity: 0.7;
}

bodyOLD {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
	background-size: 400% 400%;
	-webkit-animation: Gradient 30s ease infinite;
	-moz-animation: Gradient 30s ease infinite;
	animation: Gradient 30s ease infinite;
}

body {
	width: 100wh;
	height: 100vh;
	background: black;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

body{
/*https://www.gradient-animator.com
	padding:0;margin:0;
background: linear-gradient(270deg, #95ebfc, #3ea3f5, #ba70ec);
background-size: 600% 600%;

-webkit-animation: AnimationName 60s ease infinite;
-moz-animation: AnimationName 60s ease infinite;
animation: AnimationName 60s ease infinite;background:black;*/

}
body {
	padding:0;margin:0;
	font-size: 15px;
	font-weight: normal;
}


@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#dropper
{
position:absolute;
display:block;
z-index:2;	
}

.ui-selectmenu-button.ui-button {margin-top:8px;padding:8px}

.textbox {
	font-size: 10pt;
	font-style: normal;
	border: none #FFFFFF;
}



BODY, HTML { font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";}
H1 { color: black; font-size: 14pt }
a:link { color: blue ; text-decoration: none}
a:visited {color: blue ; text-decoration: none}
h4 {font-size: 14pt; color: #990000}
.clear {clear: both}

#textbox
{
border:3px block solid;
background:#FF0;
display:block;
position:absolute;
margin:auto;
bottom:0px;
}
#printer
{
display:block;
position:absolute;
margin:auto;
bottom:0px;
z-index:999;
width:32px;
}

#wrapper
{
position:absolute;
display:block;
margin-left:15%;
height:99%;
}
#phone
{
display:block;
position:absolute;
margin:auto;
height:100%;	
z-index:1;
}

#wrapperHead
{
position:absolute;
bottom:0px;
display:block;
right:0%;
width:100%;
height:100%;
z-index:-10;
}
#headc
{
display:block;
position:absolute;
top:0px;
margin:auto;
z-index:-11;
}
#head
{
display:block;
position:absolute;
margin:auto;
z-index:-12;
}

#ans
{
border:3px block solid;
overflow-x: hidden;
display:block;
position:absolute;
margin:auto;
overflow:auto;
z-index:2;
}
#textbox
{
position:absolute;
z-index:2;
}

.reply
{
float:right;
text-align:right;
width:75%;	
}


.illustration
{
max-height:30%;max-width:50%;	
}


.from-them {
	position:relative;
	padding:10px 20px;
	background:#E5E5EA;
	border-radius:25px;
	color: black;
  float: left;
  width:55%;
  margin-left:10px;
}

.textanswer{
cursor: url("//www.activehistory.co.uk/h2h/pics/speaker.png") 25 15, pointer;
}
.from-them:before {
		content:"";
		position:absolute;
		z-index:2;
		bottom:-2px;
		left:-7px;
		height:20px;
		border-left:20px solid #E5E5EA;
		border-bottom-right-radius: 16px 14px;
		-webkit-transform:translate(0, -2px);
	}

.from-them:after {
		content:"";
		position:absolute;
		z-index:3;
		bottom:-2px;
		left:4px;
		width:26px;
		height:20px;
		background:white;
		border-bottom-right-radius: 10px;
		-webkit-transform:translate(-30px, -2px);
	}


.from-me {
	position:relative;
	padding:10px 20px;
	color:white; 
	background:#0B93F6;
	border-radius:25px;
	float: right;
	width:55%;
	margin-right:10px;
}



.from-me:before {
		content:"";
		position:absolute;
		z-index:-1;
		bottom:-2px;
		right:-7px;
		height:20px;
		border-right:20px solid #0B93F6;
		border-bottom-left-radius: 16px 14px;
		-webkit-transform:translate(0, -2px);
	}

.from-me:after {
		content:"";
		position:absolute;
		z-index:1;
		bottom:-2px;
		right:-38px;
		width:8px;
		height:20px;
		background:white;
		border-bottom-left-radius: 10px;
		-webkit-transform:translate(-30px, -2px);
	}