org.eclipse.osbp.vaadin.addons.designer.overlay/src/org/eclipse/osbp/vaadin/addons/designer/overlay/public/designer_overlay/styles.css

.o-designer-overlay .popupContent {
	height: 32px;
	width: 100%;
	display: block;
	background-color: black;
	/* 	border-radius: 3px; */
	/* 	border: 2px solid black; */
	padding: 3px;
}

.o-designer-overlayed {
	border-radius: 3px !important;
	border: 2px solid blue !important;
}

.o-designer-overlay .o-alignment-widget {
	position: relative;
	width: 32px;
	height: 32px;
	background-color: #efeef1;
	float: left;
	margin-left: 3px;
}

.o-alignment-widget .alignment {
	top: 0px;
	left: 0px;
	display: block;
	border: 1px solid white;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	height: 32px;
	width: 32px;
	position: absolute;
	z-index: 10;
}

.o-alignment-widget .alignment .singles {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	height: 22px;
	width: 22px;
	overflow: hidden;
}

.o-alignment-widget .singles .topleft, .o-alignment-widget .singles .topcenter,
	.o-alignment-widget .singles .topright, .o-alignment-widget .singles .middleleft,
	.o-alignment-widget .singles .middlecenter, .o-alignment-widget .singles .middleright,
	.o-alignment-widget .singles .bottomleft, .o-alignment-widget .singles .bottomcenter,
	.o-alignment-widget .singles .bottomright {
	background-color: #a2a3a5;
	height: 6px;
	width: 6px;
	display: block;
	overflow: visible;
	position: absolute;
	z-index: 30;
}

.o-alignment-widget .singles .o-selected {
	background-color: black;
}

.o-alignment-widget .singles .topleft {
	top: 0px;
	left: 0px;
}

.o-alignment-widget .singles .topcenter {
	top: 0px;
	left: 0px;
	margin-left: 8px;
}

.o-alignment-widget .singles .topright {
	top: 0px;
	right: 0px;
}

.o-alignment-widget .singles .middleleft {
	top: 0px;
	left: 0px;
	margin-top: 8px;
}

.o-alignment-widget .singles .middlecenter {
	top: 0px;
	margin-top: 8px;
	left: 0px;
	margin-left: 8px;
}

.o-alignment-widget .singles .middleright {
	top: 0px;
	margin-top: 8px;
	right: 0px;
}

.o-alignment-widget .singles .bottomleft {
	bottom: 0px;
	left: 0px;
}

.o-alignment-widget .singles .bottomcenter {
	bottom: 0px;
	margin-left: 8px;
	left: 0px;
}

.o-alignment-widget .singles .bottomright {
	bottom: 0px;
	right: 0px;
}

.o-alignment-widget .alignment .hfill {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 22px;
	height: 6px;
	background-color: #a2a3a5;
}

.o-alignment-widget .alignment .vfill {
	position: absolute;
	top: 0px;
	left: 24px;
	width: 6px;
	height: 22px;
	background-color: #a2a3a5;
}

.o-alignment-widget .alignment .vfill .o-selected, .o-alignment-widget .alignment .hfill .o-selected
	{
	background-color: white !important;
}

.o-designer-overlay .o-button-widget {
	position: relative;
	overflow: hidden;
	background-color: #efeef1;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 2px;
	border: 0px;
	width: 20px;
	height: 20px;
	float: left;
	margin-left: 3px;
	margin-top: 6px;
}

.o-designer-overlay .v-image {
	position: relative;
	overflow: hidden;
	background-color: #efeef1;
	
	border-style: solid;
	border-color: silver;
	border-width: 4px;
	width: 30px;
	height: 30px;
	float: left;
	margin-left: -3px;
	margin-top: -3px;
	margin-right: 8px;
}

.o-designer-overlay .switchEditable {
	background-image: url("edit_properties.gif");
}

.o-designer-overlay .removeChild {
	background-image: url("delete.gif");
}

.o-designer-overlay .addChild {
	background-image: url("add.png");
}

.o-designer-overlay .openProperties {
	background-image: url("openProperties.gif");
}

.o-designer-overlay .switchMargin {
	background-image: url("margin.gif");
}

.o-designer-overlay .switchSpacing {
	background-image: url("spacing.gif");
}