/*
.button {
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 10s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
img:hover {
  -webkit-transform: scaleX(-1);
 transform: scaleX(-1);
  //transform: scaleY(-1);
}
*/
.button {
	content: '\00bb';
    background-color:#008CBA;/* #4CAF50; /* Green#4CAF50 */
    border: none;
    color: white;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
	border-radius: 4px;
	transition: 0.5s;
}
.button:hover{
	opacity: 0.5;
	//padding: 2px;
	//padding:#f4511e;
	//padding-color: #f4511e;
	//background-color: #f4511e;
 
  //transform: scaleY(-1);
}

//.button2 {background-color: #008CBA;} /* Blue#008CBA */

html, body {
	color: black;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	font-family: sans-serif;
	overflow: hidden;
}
#3square{
	background:@FFF;
	overflow-y:scroll;
	text-align:left;
	font-size:Arial 20px;
	border:0;
	margin-top:-120;
	margin-right:-412;
	
}
.font14{
	font-size:14px;
	text-align:left;
}
.font16{
	font-size:16px;
	text-align:left;
}
.font18{
	font-size:18px;
	//text-align:left/*justify*/;
}
.font20{
	//text-decoration:underline;
	font-size:20px;
	text-align:left;
}
.font22{
	display:inline;
	color:white;
	position: absolute; 
	right: 15px;
	text-align:right;
	text-decoration:underline;
	font-size:22px;
	width:200px;
	border:1px;
}
.imglogo{
	background-color:none;
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	top:60;
	height:130px; 
	width:620px;
}
 
#left1{
	overflow-y:scroll;
	font-weight:300;
	color:white;
	position:absolute;
	color:#FFFFFF;
	border:3px green solid; filter:brightness(200%);
	background-color:#768222; opacity:0.4; filter:brightness(100%);
	padding:0px;
	margin:2px;
	top: 35;
	left: 15;
	height:105px;
	width:200px;
	padding-left:10px;
	//opacity:0.5;
}
#left2{
	font-weight:300;
	border:3px green solid; filter:brightness(300%);
	background-color:#768222; opacity:0.4; filter:brightness(100%);
	overflow-y:scroll;
	 
	color:white;
	//text-indent: 30px;
	text-align:left/*justify*/;
	padding:3px;
	letter-spacing:0px;
	position:absolute;
	color:#FFFFFF;
	top: 150;
	left: 15;
	height:120px;
	width:194px;
	margin:2px;
	padding-left:10px;
}
#left3{
	overflow-y:scroll;
	color:white;
	position:absolute;
	color:#FFFFFF;
	border: 3px solid green;
	background-color:#768222; opacity:0.4; filter:brightness(100%);
	top: 286;
	left: 15;
	height:270px;
	width:200px;
	margin:2px;
	padding-left:10px;
	background-image:none;
}
.selectCh{/*login div*/
	transform:rotate(90deg);
	height:35px;
	width:35px;
	//background-color:blue;
	padding:3px;
	border-radius:15px;
	//transform: translateY(4px);
	//color:red;
}
.selectCh:hover {
	opacity:0.5;
	//transform:rotate(90deg);
	//color:black;
	transition:0.3s;
	//animation: shake 0.5;
	//animation-iteration-count: infinite;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(90deg); }
  10% { transform: translate(-1px, -2px) rotate(90deg); }
  20% { transform: translate(-3px, 0px) rotate(90deg); }
  30% { transform: translate(3px, 2px) rotate(90deg); }
  40% { transform: translate(1px, -1px) rotate(90deg); }
  50% { transform: translate(-1px, 2px) rotate(90deg); }
  60% { transform: translate(-3px, 1px) rotate(90deg); }
  70% { transform: translate(3px, 1px) rotate(90deg); }
  80% { transform: translate(-1px, -1px) rotate(90deg); }
  90% { transform: translate(1px, 2px) rotate(90deg); }
  100% { transform: translate(1px, -2px) rotate(90deg); }
}
.selectCh:active {
 // background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.analyCh{/*analysis character*/
	width:60px;
	height:60px;
	transform:rotate(90deg);
}
.3c{/*login div*/
	margin-top:-120;
	margin-left:-412;
	width:200;
	height:120;
	font:16px Arial;
	text-align:center;
	background-color:blue;
	overflow-y:hidden;
	padding-bottom:0px;
	border:solid #00FF00 13px;
	
}
 
.c31{ /*login div*/
	font-size:20px;
	color:black;
	background-color:#768222;
	padding-bottom: 3px;
	font-family:Arial Black/*Helvetica*/;
	border:2px solid black;
	//border-left:3px;
	//border-right:3px;
	border-width:2px;
	margin:0px;
}
#right1{/*randomgame*/
	//background-color:green;
	position:fixed;
	//display:inline;
	//bottom:50; 
	top:450;
	right: 0px; 
	//height:10px; 
	width:150px;
	//margin-bottom:4px;
	//text-decoration:none;
	
}
.right1a{
	//background-color:green;
	//display:inline;
	font-weight:900;
	color:white;
	position: absolute; 
	right: 15px;
	text-align:right;
	text-decoration:none;
	font-size:20px;
	width:200px;
	height:120px;
	margin:14px;
	border:1px;	
	transition:0.3s;
}
.right1a:hover {
  color: #3e8e41;
 // color: white;
}

#right2{
	/*position: fixed;
	top:400px; 
	bottom:none; 
	margin:2px;
	right: 15px; 
	height:100px; 
	width:150px;
	border: 3px solid white;"*/	
}
.right2a{
	position: fixed;
	top:260px; 
	bottom:none; 
	margin:2px;
	right: 15px; 
	height:100px; 
	width:150px;
	border: 3px /*solid white*/;"	
}
.right2b{
	position: fixed;
	top:360px; 
	bottom:none; 
	margin:2px;
	right: 15px; 
	height:100px; 
	width:150px;
	border: 3px /*solid white*/;"	
}