/********************************** BarOn ***********************************/

/* Red bar with white left border 
.rBarOn,.bBarOn {
	display: block;
	z-index: 3;		
	background-color: red;
	border-radius:2px;
	opacity:.75;
}
.rBarOn {
	width: 4px;
	border-left: 2px white solid;
	margin-right:2px;
}
.bBarOn {
	height: 4px;
	border-top: 2px white solid;
	margin-bottom:2px;
}
.rBarOn:hover {
	width: 12px;
	border-left: 2px white solid;
	border-radius:6px;
}
.bBarOn:hover {
	height: 12px;
	border-top: 2px white solid;
	border-radius:6px;
}*/


/* Gray 3D bar with red shadow */
.rBarOn,.bBarOn {
	display: none;
	z-index: 3;		
	border-radius:3px;
	opacity:.75;
	bottom: 0px !important ;
}
/*
.rBarOn:hover,.bBarOn:hover {
	border-radius:6px;
	box-shadow:0 0 7px 2px red;
}*/

.rBarOn {
	width: 10px;
	margin-right:2px;
	cursor:n-resize
}
.bBarOn {
	height: 10px;
	margin-bottom:2px;
	cursor:e-resize;
}

.bBarOn:before,.rBarOn:before {
	content:'';
	position: absolute;
	top:2px;
	bottom:2px;
	left:2px;
	right:2px;
	border-radius:4px;
	border:3px grey solid;
}

/* Gray animation bar with red shadow 
.rBarOn,.bBarOn {
	display: block;
	z-index: 3;		
	background-color: gray;
	border-radius:3px;
	opacity:.75;
}
.rBarOn:hover,.bBarOn:hover {
	border-radius:6px;
	box-shadow:0 0 7px 5px white;
}
.rBarOn {
	width: 10px;
	margin-right:2px;
}
.bBarOn {
	height: 10px;
	margin-bottom:2px;
}
.rBarOn:hover {	width: 12px; }
.bBarOn:hover {	height: 12px; }
.bBarOn:before,.rBarOn:before {
	content:'';
	position: absolute;
	width:8px;
	height:8px;
	margin:1px 0 0 1px;
	border-radius:4px;
	background-color:darkgreen;
	animation-delay:0;
	animation-duration:1500ms;
	animation-direction:normal;
	animation-play-state:running;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in;
	box-shadow:0 0 7px 5px green;
}
@keyframes vscroll{
	0%  {top:0%;margin-top:1px;}
	50% {top:100%;margin-top:-8px;}
	100%{top:0%;margin-top:1px;}
}
.rBarOn:before{animation-name:vscroll;}
@keyframes hscroll{
	0%  {left:0%;margin-left:1px;}
	50% {left:100%;margin-left:-8px;}
	100%{left:0%;margin-left:1px;}
}
.bBarOn:before{animation-name:hscroll;}

.bBarOn:after,.rBarOn:after{
	content:'';
	position: absolute;
	width:8px;
	height:8px;
	margin:1px 0 0 1px;
	border-radius:4px;
	background-color:red;
	box-shadow:0 0 7px 5px red;
	
	animation-delay:0ms;
	animation-duration:1500ms;
	animation-direction:normal;
	animation-play-state:running;
	animation-iteration-count:infinite;
	animation-timing-function:ease-out;
}
.rBarOn:after{animation-name:vscroll;}
.bBarOn:after{animation-name:hscroll;}
*/