* {
			margin: 0;
			padding: 0;
		}

		html {
			font-size: 100%;
			padding: 0;
			width:100%;
		}

		body {
			font-family: Verdana, "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
			color: #000;
			background-color: #FFFFFF;
			font-size: 90%; 
			margin: 0;
			width:100%;
		}


		.flex-container {
			display: -webkit-box;
			display: -moz-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-box-pack: justify;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-flex-wrap: wrap;
			-moz-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			-o-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-align-items: flex-start;
			}

		.chat_box
		{
			width: 100%;	
			max-width: 1000px; 
			margin: auto;
			display: flex;
			flex-direction: column;
			height:100vh;   
			

		}
		#chat_top {
			flex: 0 0 auto;
			height: 28px;

		}
		#chat_body {
			flex:1 1 auto; 
			overflow: auto;
			padding: 5px 8px;
		}		
		#chat_cmdpanel {
			flex: 0 0 auto;
			text-align: center;
		}		
		#chat_control {
			flex: 0 0 auto;
			text-align: center;
			
			background: #E1EAFA;
		}
		#chat_footer {
			flex: 0 0 auto;
			text-align: right;
			padding-right: 10px;
			height: 15px;
			opacity: 0.5;

		}

		#shouts {

			
		}
		#chat {
			text-align:left;
			border: none;
		}

		#whois_online{
			vertical-align:text-top;
			text-align:left;
			font-size:110%;
			line-height: 140%;
		}
		.online_img {
			vertical-align:middle;
		}	
		#act_indicator {
			visibility:hidden;
		}
		.chat_time {font-size:75%; text-align: right; width: 100%; opacity: 0.4;}
		.mymess_frame {overflow: hidden; text-align: right; width: 100%; margin: 5px 0; padding-top: 5px;  vertical-align: top;}
		.mymess {max-width: 500px;  padding: 7px 10px 10px 10px;  background: #DAE3FF; border-radius: 10px; float: right; min-width: 200px; text-align: left;}


		.othmess_frame  {overflow: hidden; text-align: left; width: 100%;  margin: 5px 0; padding-top: 5px; vertical-align: top;}
		.othmess {max-width: 500px;  padding: 7px 10px 10px 10px; background: #FFF2D6; border-radius: 10px;  min-width: 200px; text-align: left;}

		.delimg { opacity: 0.3; display: none; cursor: pointer; float: right; }
		
		.poster {color: #04346C;}
		.postbody {display: inline-block; }

		#message {
			height: 50px; width: 80%; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; 
			max-width: 600px; text-align: center; padding: 5px; background: #fff;
			border: 1px #ddd solid;
			font-size: 120%;
			text-align: left;
			overflow: auto; 
			
		}
		#message[placeholder]:empty:before {
			content: attr(placeholder);
			color: #999; 
		}
		#message[placeholder]:empty:focus:before {
			content: '';
		}
		#message img {max-width: 200px; max-height: 50px;}
		.mymess  img {max-width: 200px; max-height: 200px;}
		.othmess img {max-width: 200px; max-height: 200px;}

		#button1 {
			text-align:center; padding: 2px 0; background: #eee; font-size: 130%; height: 30px; margin-top: 18px; width: 30px; margin-left: 5px;
			border-radius: : 5px;

		}
		#button1:hover { background: #fff }
		.cmdbtn { font-size: 100%; padding: 0 8px; color: #333; background: #eee; margin: 3px; border-radius: : 5px;}

		#btn_cancel {display: none; font-size: 120%; background: #DB6140; padding; 0 8px; color: #eee;}
		#btn_menu { font-size: 120%;  padding; 0 8px; background: #88A863; color: #fff;}
		#js_scroll { font-size: 120%;  padding; 0 8px; background: #88A863; color: #fff;}
		
		.date_change {margin: auto; text-align: center; font-size: 80%; color: blue;}

		a#right_menu {
		   position: fixed;
		   top: calc(30% - 55px);
		   right:0px;
		   width: 30px;
		   height: 30px;  
		   background: #e1e7ed;
		   overflow: hidden;
		   opacity:0.8;
		   filter: alpha(opacity=70);
		   z-index: 99999;
		   color: #2b587a;
		   text-align: center;
		   padding-top: 8px;
		   border: 2px #414478 solid;
		   font-size: 130%;
		   border-radius: 2px;

		}
		_:-o-prefocus, #right_menu {
		   top: 190px;
		   }



		.hidden-menu {
		  display: none;
		  position: fixed;
		  list-style:none;
		  padding: 10px;
		  padding-top: 100px;
		  margin: 0;
		  box-sizing: border-box;
		  width: 200px;
		  background-color: #F3F9E1;
		  height: 100%;
		  top: 0;
		  right: 0;
		  transition: left .2s;
		  z-index: 2;
		  -webkit-transform: translateZ(0);
		  -webkit-backface-visibility: hidden;
		}

		.hiddenmenu_item {margin: 4px 7px; border: 1px #ddd solid ; padding: 2px 10px; text-align: center; background: #fff}


		@-webkit-keyframes pulsate {
		 50% { color: #666; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #aaa; }
		}
		@keyframes pulsate {
		 50% { color: #666; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #aaa; }
		}
		.blink {
		  color: #222;
		  text-shadow: 0 -1px rgba(0,0,0,.1);
		  -webkit-animation: pulsate 0.5s linear infinite;
		  animation: pulsate 0.5s linear infinite;
		}


		@media (min-height: 1000px) {
			#chat_footer {
				height: 250px;
			}
			
		}

		@media (min-height: 301px) and (max-height: 800px) {
			
			#chat_top {
				flex-basis: content;
				height: none;

			}
			#chat_body {
				height: 300px;
			}
			#chat_footer {
				display: none;
			}
			#button1 {
				width: auto; 
				padding: 0 6px;
			}
		}