Change background color selectors

Problem:
When the content is less high than the sidebar, the content area is flatter and the area below the content has the same color as the sidebar, which looks mad.

Proposed solution:
The right area should always have the content background color on full height and not the sidebar color. This is quite simple changing the following things:

Change the following lines (original) from:

body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.42857143;
	color: #333;
	background-color: #fff;
}

.skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side {
	background-color: #222d32;
}

To:
(remove ".skin-XXX .wrapper" selector and set its background-color on body)

body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.42857143;
	color: #333;
	background-color: #ecf0f5;
}

.skin-blue .main-sidebar, .skin-blue .left-side {
	background-color: #222d32;
}