﻿.covered {
	width  :750px;
	height : 257px;
	margin : 50px auto;
}


.covered {
	position: relative;
}

.handle {
	position: absolute;
	width : 46px;
	height: 46px;
	margin-left  : -23px;
	margin-top   : -23px;
	border-radius: 50%;
	background-color: #00ff30;
	border: 2px solid #FFf;
	text-align : center;
	cursor: pointer; cursor: hand; 
}

.handle span {
	display : inline-block;
	margin : 15px 1px 0;
	color : #000;
	-webkit-transition : .1s ease-out;
	-moz-transition : .1s ease-out;
	-ms-transition : .1s ease-out;
	-o-transition : .1s ease-out;
	transition : .1s ease-out;
}

.handle.vertical {
	-webkit-transform : rotate(90deg);
	-moz-transform : rotate(90deg);
	-ms-transform : rotate(90deg);
	-o-transform : rotate(90deg);
	transform : rotate(90deg);
}

.handle:hover {
	background-color: #555;
	cursor: pointer; cursor: hand; 
}

.handle:hover span {
	color : #FFF;
}

.draggable {
	background-color: #555;
	cursor : move;
	cursor: pointer; cursor: hand; 
}

.draggable span {
	margin : 15px 4px 0;
	color  : #FFF;
	-webkit-transition : .1s ease-out;
	-moz-transition : .1s ease-out;
	-ms-transition : .1s ease-out;
	-o-transition : .1s ease-out;
	transition : .1s ease-out;
}