/* style.css */

	/* pallet7
		stonewash white #D0D3C5
		light blue		#56B1BF
		navy blue		#08708A
		tomato red		#D73A31
		hunter dark		#032B2F
	*/

	:root {
		--brown: #8B8878;
		}

  html {
    font-size: 17px !important;
    font-family: verdana !important;
    color: #333 !important;
    }

  @media only screen and (max-width:1000px) {
    html {
      font-size: 32px !important;
      font-family: verdana !important;
      color: #333 !important;
      }
    }

  body {
    background: #6C7B8B;/*#d4d1a8;*/
    margin: 0;
    padding: 0;
    }
    
	button.chat3 {
		width: 380px;
		height: 150px;
		font-family: verdana;
		font-size: 35px;
		font-weight: bold;
		font-style: normal;
		text-transform: uppercase;
		color: #fff;
		background-color: #AB2328; /*#CC1100;*/ /*#CD0000;*/		
		padding: 5px;
		text-shadow: 2px 2px 3px #222;
		/*box-shadow: 3px 3px 3px #222;*/
		border-radius: 8px;
		border: 7px solid #efefef;
		opacity: .8;
		vertical-align: middle;
		line-height: 25px;
		}
        
	button.chat3:hover {
		background-color: #D22730; 	
		box-shadow: 0px 0px 20px #D22730;
		border: 7px solid #fff;
		opacity: 1.0;
		}

	button.chat3:active {
		opacity: 1.0;
		box-shadow: 0 0 0;
		transform: translateY(1px);
		}
		
	button.chat3:visited {
		opacity: .8;
		}
		
	div.spacer110 {
		padding-top: 110px;
		}
		
	div.spacer60 {
		padding-top: 60px;
		}
		
	div.spacer50 {
		padding-top: 50px;
		}
		
	div.spacer35 {
		padding-top: 35px;
		}
		
	div.spacer25 {
		padding-top: 25px;
		}
		
	div.spacer20 {
		padding-top: 20px;
		}
		
	div.spacer10 {
		padding-top: 10px;
		}

	div.left50 {
		padding-left: 50px;
		}
		
/***************************************************************** smallchat pages */

   td.emota {
     text-align: center;
     background: #FFF;
     padding-left: 2px;
     padding-right: 2px;
     border-radius: 5px;
     vertical-align: bottom;
     border: solid 1px #999;
     font-size: 25px;
     }

	div.sboxheadouter {
		text-align: center; 
		top: -2px; 
		position: fixed;
		width: 100%;
		z-index: 1000;
		}
			
	div.sboxheadlarge {
		/*background: #D0D2C4;*/
		text-align: center; 
		top: -2px; 
		position: fixed;
		width: 101%;
		height: 240px;
		margin-left: -10px;
		padding-right: 5px;
		z-index: 1000;
		box-shadow: 0 8px 6px -6px  #444;
		}
		
	div.sboxheadinner {
		max-width: 900px;
		max-height: 240px;
		background: #3271a5; /*#6CA6CD; /*#F87531; #9DB68C;*/
		margin-left: auto;
		margin-right: auto;
		border-radius: 0px;
		-webkit-box-shadow: 4px 4px 5px #444;
		-moz-box-shadow: 4px 4px 5px  #444;
		box-shadow: 4px 4px 5px  #444;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
		}	

	div.sboxform { height: 240px; width: 800px; vertical-align: middle;padding-left: 20px; text-align: left;
		}
		
	div.sboxposts {
		max-width: 900px;
		z-index: -100;
		}
		
	div.sboxpostsinner {
		box-shadow: 2px 2px 4px #444; 
		border-radius: 10px;
		max-width: 900px;
		}
		
	.sboxnameinput {
		height: 50px;
		line-height: 25px;
		width: 200px;
		border: 1px solid #aabbcc;
		border-radius: 5px;
		background-color: #fafafa;
		font-size: 30px;
		}
			
	.sboxtextarea {
		border: none;
		border-radius: 5px;
		background-color: #fafafa;
		}
		
	.sboxmsginput {
		height: 50px;
		line-height: 30px;
		width: 600px;
		border: 1px solid #aabbcc;
		border-radius: 5px;
		background-color: #fafafa;
		padding-top: 3px;
		padding-bottom: 3px;
		font-size: 30px;
		}

	div.sboxposttop {
		display: inline-block;
		background: linear-gradient(90deg, #b8e2f4, #4194cb 50%, #b8e2f4);
		height: 27px;
		width: 100%;
		max-width: 890px;
		border-radius: 10px 10px 0 0;
		padding: 5px;
		}

	div.sboxname {
	  color: #336699;
		float: left;
		vertical-align: middle;
		text-align: left;
		line-height: 30px;
		max-height: 30px;
		width: 40%;
		max-width: 380px;
		overflow: hidden;
		word-break: break-all;
		padding-left: 3px;
		overflow: visible;
		}

	div.sboxdate {
		float: right;
		vertical-align: middle;
		text-align: right;
		line-height: 30px;
		font-size: 22px;
		padding-right: 10px;
		}

	div.sboxmsg {
		background: #EEE;
		max-width: 1000px;
		min-height: 35px;
		text-align: left;
		margin-bottom: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		padding: 5px;
		padding-left: 20px;
		z-index: -100;
		/*force long words and urls to wrap*/
		word-wrap: break-word;   
		overflow-wrap: break-word;
		word-break: break-word;
		}

	.shaded {
		box-shadow: 0 0 0;
		border-radius: 8px;
		}
			
	.shaded:hover {
		box-shadow: 0px 0px 10px #fff;
		border-radius: 8px;
		}
			
	.shaded:active {
		box-shadow: 0 0 0;
		transform: translateY(1px);
		border-radius: 8px;
		}
			
	.shaded:visited {
		box-shadow: 0 0 0;
		border-radius: 8px;
		}


/***************************************************************** large shoutbox page */

	div.lgsboxheadouter {
		opacity: 1.0;
		text-align: center; 
		height: 200px;
		top: -2px; 
		position: fixed;
		width: 100%;
		z-index: 1000;
		}
			
	div.lgsboxform { 
		background: #D0D2C4;
		height: 200px; 
		width: 100%; 
		min-width: 800px;
		vertical-align: middle;
		text-align: center; 
		position: fixed; 
		top: -2px;
		margin-left: -10px;
		padding-right: 10px;
		z-index: 1000;
		}
		
	div.buttonrow {
		width: 100%;
		margin-left: -10px;
		padding-right: 20px;
		background: #92CCA6; 
		height: 40px;
		z-index: 1000;
		border-top: 10px solid #3E766D;
		}
		
	div.lgsboxposts {
		min-width: 800px;
		width: 800px;
		z-index: -100;
		}
		
	div.lgsboxpostsinner {
		min-width: 800px;
		box-shadow: 2px 2px 4px #444; 
		border-radius: 10px;
		max-width: 340px;
		}
		
	.lgsboxnameinput {
		height: 30px;
		line-height: 30px;
		width: 400px;
		border: 1px solid #aabbcc;
		border-radius: 5px;
		background-color: #fafafa;
		}
			
	.lgsboxtextarea {
		border: 0px;
		height: 80px;
		width: 400px;
		border: 1px solid #aabbcc;
		border-radius: 5px;
		background-color: #fafafa;
		vertical-align: middle;
		}
		
	.lgsboxmsginput {
		height: 50px;
		line-height: 25px;
		width: 250px;
		border: 1px solid #aabbcc;
		border-radius: 5px;
		background-color: #fafafa;
		padding-top: 3px;
		padding-bottom: 3px;
		}

	div.lgsboxposttop {
		min-width: 788px;
		display: inline-block;
		background: #9DB68C; /*#bbc0c6;*/
		background-image: url('uparrow.gif');
		height: 30px;
		width: 788px;
		margin-left: 1px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding: 5px;
		}

	div.lgsboxname {
		min-width: 386px; 
		width: 386px; 
		padding-left: 10px;
		float: left;
		vertical-align: middle;
		text-align: left;
		line-height: 25px;
		}

	div.lgsboxdate {
		min-width: 386px; 
		width: 386px;
		float: right;
		vertical-align: middle;
		text-align: right;
		line-height: 25px;
		}

	div.lgsboxmsg {
		min-width: 743px; 
		width: 743px; 
		background: #eee;
		min-height: 35px;
		text-align: left;
		margin-bottom: 5px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		padding: 5px;
		padding-left: 50px;
		z-index: -100;
		font-family: verdana;
		font-size: 1em;
		color: #333;
		}

	.lgshaded {
		border-radius: 8px;
		}
			
	.lgshaded:hover {
		box-shadow: 0px 0px 20px #fff;
		border-radius: 8px;
		}
			
	.lgshaded:active {
		box-shadow: 0 0 0;
		transform: translateY(1px);
		border-radius: 8px;
		}
			
	.lgshaded:visited {
		border-radius: 8px;
		}
		
/* end largechat */

/*fonts*/

	@font-face {
		font-family: american;
		src: url(../fonts/american.ttf);
		}
	@font-face {
		font-family: blitz;
		src: url(../fonts/blitz.ttf);
		}
	@font-face {
		font-family: brillante;
		src: url(../fonts/brillante.ttf);
		}
	@font-face {
		font-family: creepster;
		src: url(../fonts/creepster.ttf);
		}
	@font-face {
		font-family: discovery;
		src: url(../fonts/discovery.ttf);
		}
	@font-face {
		font-family: eclipse;
		src: url(../fonts/eclipse.ttf);
		}
	@font-face {
		font-family: extreme;
		src: url(../fonts/extreme.ttf);
		}
	@font-face {
		font-family: extreme_filled;
		src: url(../fonts/extreme_filled.ttf);
		}
	@font-face {
		font-family: freescript;
		src: url(../fonts/freescript.ttf);
		}
	@font-face {
		font-family: gazelle;
		src: url(../fonts/gazelle.ttf);
		}
	@font-face {
		font-family: goffik;
		src: url(../fonts/goffik.ttf);
		}
	@font-face {
		font-family: hueca;
		src: url(../fonts/hueca.ttf);
		}
	@font-face {
		font-family: indah;
		src: url(../fonts/indah.ttf);
		}
	@font-face {
		font-family: liberta;
		src: url(../fonts/liberta.ttf);
		}
	@font-face {
		font-family: lime_digit;
		src: url(../fonts/lime_digit.ttf);
		}
	@font-face {
		font-family: mega_bomb;
		src: url(../fonts/mega_bomb.ttf);
		}
	@font-face {
		font-family: nautigal;
		src: url(../fonts/nautigal.ttf);
		}
	@font-face {
		font-family: nautigalbold;
		src: url(../fonts/nautigalbold.ttf);
		}
	@font-face {
		font-family: odibee;
		src: url(../fonts/odibee.ttf);
		}
	@font-face {
		font-family: orange_digit;
		src: url(../fonts/orange_digit.ttf);
		}
	@font-face {
		font-family: peace_sans;
		src: url(../fonts/peace_sans.ttf);
		}
	@font-face {
		font-family: plum_digit;
		src: url(../fonts/plum_digit.ttf);
		}
	@font-face {
		font-family: quebab;
		src: url(../fonts/quebab.ttf);
		}
	@font-face {
		font-family: rampartone;
		src: url(../fonts/rampartone.ttf);
		}
	@font-face {
		font-family: rocksalt;
		src: url(../fonts/rocksalt.ttf);
		}
	@font-face {
		font-family: stren;
		src: url(../fonts/stren.ttf);
		}
	@font-face {
		font-family: tangerine;
		src: url(../fonts/tangerine.ttf);
		}
	@font-face {
		font-family: tangerinebold;
		src: url(../fonts/tangerinebold.ttf);
		}
	@font-face {
		font-family: talldark;
		src: url(../fonts/talldark.ttf);
		}
	@font-face {
		font-family: bar;
		src: url(../fonts/bar.ttf);
		}