#capsLockNotice{

color:#ffffff;
font-size:17px;
        text-align: center;
	position:relative;
	background: #ff0000;
	border: 4px solid #ffff00;
        display:inline-block;
       margin: 0px auto 10px auto;  
width: 210px;
    height: 80px;    
overflow:auto 
	padding: 10px 5px;
	top:0px;  
	display: none;
}
#capsLockNotice:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
display:inline-block;
      	position: absolute;
	pointer-events: none;
	
}

#capsLockNotice:after {
	border-color: rgba(255,0,0, 0);
	border-bottom-color: #ff0000;
	border-width: 30px;
	margin-left: -30px;
	display:inline-block;
}
#capsLockNotice:before {
	border-color: rgba(255,0,0, 0);
	border-bottom-color: #ff0000;
	border-width: 36px;
	margin-left: -36px;
	
}
			#capsLockNotice.on { display: block }
@media screen and (max-width: 400px) {
#capsLockNotice{
font-size:14px;
width: 160px;
    height: 100px;    
overflow:auto 
	padding: 10px 5px;
	top:0px; margin-left:-5px }
}

/********
.indicator
			{
				height: 60px;
				width: 180px;
				text-align: center;
				position:relative;
				right: 5px;
				top: 5px;
				background: red;
				color: #fff;
				padding: 10px 5px;
				display: none;
			}
			.indicator.on { display: block }
********/