silverstripe-widgets/css/WidgetAreaEditor.css

div.availableWidgetsHolder {
	width: 30%;
}

div.usedWidgetsHolder {
	width: 66%;
    max-width: 745px;
}

div.availableWidgetsHolder {
	float: left;
}

div.usedWidgetsHolder {
	float: right;
}

div.usedWidgets .ui-state-highlight {
    background: #EEEEEE;
    
    border: 1px solid #DDDDDD;
    
    width: 98%;
    
    margin-bottom: 5px;
}

.NoWidgets {
	padding: 50px; /* Make this nice and big and easily 'droppable' */
}

div.usedWidgets div.Widget,
div.availableWidgets div.Widget {
	width: 98%;
	border: 1px solid #ddd;
	border-top: none;
	margin-bottom: 10px;
	background: #F0F3F4 url('../../cms/images/textures/bg_cms_main_content.png') repeat top left;
}
div.widgetDescription p,
div.widgetFields {
	padding: 0 8px;
	color: #666;
	font-size: 11px;
}

p.deleteWidget {
	margin: 0 0 4px;
	height: 22px;
	line-height: 2.2;
	font-size: 12px;
}
span.widgetDelete {
	padding-left: 20px;
	margin-right: 8px;
	float: right;
	background: url(../images/delete.gif) no-repeat left center;
	cursor: pointer;
}
div.usedWidgets div.Widget h3,
div.availableWidgets div.Widget h3 {
	font-size: 12px;
	color: #fff;
	line-height: 1.8;
	padding: 0 5px;
	margin: 0;
}
	div.usedWidgets div.Widget h3 {
		cursor: move;
		background: #000 url(../images/handled-bg.png) right top;
	}
	div.availableWidgets div.Widget h3 {
		cursor: pointer;
		color: #444;
		padding-right: 25px;
		background: #ccc url(../images/add-bg.png) right center;
	}
		div.availableWidgets div.Widget h3:hover {
			background: #ccc url(../images/add-bg-hover.png) right center;
		}