diff --git a/WebContent/base/leaflet/L.Control.Layers.js b/WebContent/base/leaflet/L.Control.Layers.js
deleted file mode 100644
index b968b1aab..000000000
--- a/WebContent/base/leaflet/L.Control.Layers.js
+++ /dev/null
@@ -1,205 +0,0 @@
-
-L.Control.Layers = L.Control.extend({
-	options: {
-		collapsed: true,
-		position: 'topright',
-		autoZIndex: true
-	},
-
-	initialize: function (baseLayers, overlays, options) {
-		L.Util.setOptions(this, options);
-
-		this._layers = {};
-		this._lastZIndex = 0;
-
-		for (var i in baseLayers) {
-			if (baseLayers.hasOwnProperty(i)) {
-				this._addLayer(baseLayers[i], i);
-			}
-		}
-
-		for (i in overlays) {
-			if (overlays.hasOwnProperty(i)) {
-				this._addLayer(overlays[i], i, true);
-			}
-		}
-	},
-
-	onAdd: function (map) {
-		this._initLayout();
-		this._update();
-
-		return this._container;
-	},
-
-	addBaseLayer: function (layer, name) {
-		this._addLayer(layer, name);
-		this._update();
-		return this;
-	},
-
-	addOverlay: function (layer, name) {
-		this._addLayer(layer, name, true);
-		this._update();
-		return this;
-	},
-
-	removeLayer: function (layer) {
-		var id = L.Util.stamp(layer);
-		delete this._layers[id];
-		this._update();
-		return this;
-	},
-
-	_initLayout: function () {
-		var className = 'leaflet-control-layers',
-		    container = this._container = L.DomUtil.create('div', className);
-
-		if (!L.Browser.touch) {
-			L.DomEvent.disableClickPropagation(container);
-		} else {
-			L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
-		}
-
-		var form = this._form = L.DomUtil.create('form', className + '-list');
-
-		if (this.options.collapsed) {
-			L.DomEvent
-				.on(container, 'mouseover', this._expand, this)
-				.on(container, 'mouseout', this._collapse, this);
-
-			var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
-			link.href = '#';
-			link.title = 'Layers';
-
-			if (L.Browser.touch) {
-				L.DomEvent
-					.on(link, 'click', L.DomEvent.stopPropagation)
-					.on(link, 'click', L.DomEvent.preventDefault)
-					.on(link, 'click', this._expand, this);
-			}
-			else {
-				L.DomEvent.on(link, 'focus', this._expand, this);
-			}
-
-			this._map.on('movestart', this._collapse, this);
-			// TODO keyboard accessibility
-		} else {
-			this._expand();
-		}
-
-		this._baseLayersList = L.DomUtil.create('div', className + '-base', form);
-		this._separator = L.DomUtil.create('div', className + '-separator', form);
-		this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);
-
-		container.appendChild(form);
-	},
-
-	_addLayer: function (layer, name, overlay) {
-		var id = L.Util.stamp(layer);
-
-		this._layers[id] = {
-			layer: layer,
-			name: name,
-			overlay: overlay
-		};
-
-		if (this.options.autoZIndex && layer.setZIndex) {
-			this._lastZIndex++;
-			layer.setZIndex(this._lastZIndex);
-		}
-	},
-
-	_update: function () {
-		if (!this._container) {
-			return;
-		}
-
-		this._baseLayersList.innerHTML = '';
-		this._overlaysList.innerHTML = '';
-
-		var baseLayersPresent = false,
-			overlaysPresent = false;
-
-		for (var i in this._layers) {
-			if (this._layers.hasOwnProperty(i)) {
-				var obj = this._layers[i];
-				this._addItem(obj);
-				overlaysPresent = overlaysPresent || obj.overlay;
-				baseLayersPresent = baseLayersPresent || !obj.overlay;
-			}
-		}
-
-		this._separator.style.display = (overlaysPresent && baseLayersPresent ? '' : 'none');
-	},
-
-	// IE7 bugs out if you create a radio dynamically, so you have to do it this hacky way (see http://bit.ly/PqYLBe)
-	_createRadioElement: function (name, checked) {
-
-		var radioHtml = '<input type="radio" name="' + name + '"';
-		if (checked) {
-			radioHtml += ' checked="checked"';
-		}
-		radioHtml += '/>';
-
-		var radioFragment = document.createElement('div');
-		radioFragment.innerHTML = radioHtml;
-
-		return radioFragment.firstChild;
-	},
-
-	_addItem: function (obj) {
-		var label = document.createElement('label'),
-		    input,
-		    checked = this._map.hasLayer(obj.layer);
-
-		if (obj.overlay) {
-			input = document.createElement('input');
-			input.type = 'checkbox';
-			input.defaultChecked = checked;
-		} else {
-			input = this._createRadioElement('leaflet-base-layers', checked);
-		}
-
-		input.layerId = L.Util.stamp(obj.layer);
-
-		L.DomEvent.on(input, 'click', this._onInputClick, this);
-
-		var name = document.createTextNode(' ' + obj.name);
-
-		label.appendChild(input);
-		label.appendChild(name);
-
-		var container = obj.overlay ? this._overlaysList : this._baseLayersList;
-		container.appendChild(label);
-	},
-
-	_onInputClick: function () {
-		var i, input, obj,
-			inputs = this._form.getElementsByTagName('input'),
-			inputsLen = inputs.length;
-
-		for (i = 0; i < inputsLen; i++) {
-			input = inputs[i];
-			obj = this._layers[input.layerId];
-
-			if (input.checked) {
-				this._map.addLayer(obj.layer, !obj.overlay);
-			} else {
-				this._map.removeLayer(obj.layer);
-			}
-		}
-	},
-
-	_expand: function () {
-		L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
-	},
-
-	_collapse: function () {
-		this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
-	}
-});
-
-L.control.layers = function (baseLayers, overlays, options) {
-	return new L.Control.Layers(baseLayers, overlays, options);
-};
diff --git a/WebContent/base/osrm/OSRM.Control.Layers.js b/WebContent/base/osrm/OSRM.Control.Layers.js
index ced4dff0b..a3eb1767c 100644
--- a/WebContent/base/osrm/OSRM.Control.Layers.js
+++ b/WebContent/base/osrm/OSRM.Control.Layers.js
@@ -19,90 +19,50 @@ or see http://www.gnu.org/licenses/agpl.txt.
 // [extension of Layers.Control with OSRM styling and additional query methods]
 OSRM.Control.Layers = L.Control.Layers.extend({
 	
-// query functionality
-getActiveLayerName: function () {
-	var i, input, obj,
-	inputs = this._form.getElementsByTagName('input'),
-	inputsLen = inputs.length;
-
-	for (i = 0; i < inputsLen; i++) {
-		input = inputs[i];
-		obj = this._layers[input.layerId];
-		if (input.checked && !obj.overlay) {
-			return obj.name;
+	// query functionality
+	getActiveLayerName: function () {
+		var i, input, obj,
+		inputs = this._form.getElementsByTagName('input'),
+		inputsLen = inputs.length;
+	
+		for (i = 0; i < inputsLen; i++) {
+			input = inputs[i];
+			obj = this._layers[input.layerId];
+			if (input.checked && !obj.overlay) {
+				return obj.name;
+			}
 		}
-	}
-},
-getActiveLayer: function () {
-	var i, input, obj,
-	inputs = this._form.getElementsByTagName('input'),
-	inputsLen = inputs.length;
-
-	for (i = 0; i < inputsLen; i++) {
-		input = inputs[i];
-		obj = this._layers[input.layerId];
-		if (input.checked && !obj.overlay) {
-			return obj.layer;
+	},
+	getActiveLayer: function () {
+		var i, input, obj,
+		inputs = this._form.getElementsByTagName('input'),
+		inputsLen = inputs.length;
+	
+		for (i = 0; i < inputsLen; i++) {
+			input = inputs[i];
+			obj = this._layers[input.layerId];
+			if (input.checked && !obj.overlay) {
+				return obj.layer;
+			}
 		}
+	},
+	
+	// overwrite Control.Layers methods to get OSRM styling
+	_initLayout: function () {
+		L.Control.Layers.prototype._initLayout.apply(this);
+		this._container.className = "box-wrapper gui-control-wrapper";
+		this._layersLink.className = "box-content gui-control gui-layers";
+		this._form.className = "box-content gui-control gui-layers-list medium-font";	
+	
+		this._baseLayersList.className = "gui-layers-base";	
+		this._separator.className = "gui-layers-separator";
+		this._overlaysList.className = "gui-layers-overlays";
+	},
+	_expand: function () {
+		L.DomUtil.addClass(this._container, 'gui-layers-expanded');
+	},
+	_collapse: function () {
+		this._container.className = this._container.className.replace(' gui-layers-expanded', '');
 	}
-},
-
-
-// overwrite Control.Layers methods to get OSRM styling
-onAdd: function (map) {
-	this._initLayout(map);
-	this._update();
-
-	return this._container;
-},
-_initLayout: function (map) {
-	var className = 'leaflet-control-layers',
-	    container = this._container = L.DomUtil.create('div', className);
-
-	if (!L.Browser.touch) {
-		L.DomEvent.disableClickPropagation(container);
-	} else {
-		L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
-	}
-
-	var form = this._form = L.DomUtil.create('form', className + '-list');
-
-	if (this.options.collapsed) {
-		L.DomEvent
-			.on(container, 'mouseover', this._expand, this)
-			.on(container, 'mouseout', this._collapse, this);
-
-		var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
-		link.href = '#';
-		link.title = 'Layers';
-
-		if (L.Browser.touch) {
-			L.DomEvent
-				.on(link, 'click', L.DomEvent.stopPropagation)
-				.on(link, 'click', L.DomEvent.preventDefault)
-				.on(link, 'click', this._expand, this);
-		}
-		else {
-			L.DomEvent.on(link, 'focus', this._expand, this);
-		}
-
-		this._map.on('movestart', this._collapse, this);
-		// TODO keyboard accessibility
-	} else {
-		this._expand();
-	}
-
-	this._baseLayersList = L.DomUtil.create('div', className + '-base', form);
-	this._separator = L.DomUtil.create('div', className + '-separator', form);
-	this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);
-
-	container.appendChild(form);
-},
-_expand: function () {
-	L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
-},
-_collapse: function () {
-	this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
-}
 
 });
diff --git a/WebContent/gui/OSRM.MainGUI.js b/WebContent/gui/OSRM.MainGUI.js
index 7bc52760d..3b3dc7553 100644
--- a/WebContent/gui/OSRM.MainGUI.js
+++ b/WebContent/gui/OSRM.MainGUI.js
@@ -51,8 +51,8 @@ setLabels: function() {
 	document.getElementById("open-osmbugs").innerHTML = OSRM.loc("OPEN_OSMBUGS");
 	document.getElementById("gui-reset").innerHTML = OSRM.loc("GUI_RESET");
 	document.getElementById("gui-reverse").innerHTML = OSRM.loc("GUI_REVERSE");
-	document.getElementById("gui-option-highlight-nonames-label").innerHTML = OSRM.loc("GUI_HIGHLIGHT_UNNAMED_ROADS");
-	document.getElementById("gui-option-show-previous-routes-label").innerHTML = OSRM.loc("GUI_SHOW_PREVIOUS_ROUTES");
+	document.getElementById("gui-option-highlight-nonames-label").text = OSRM.loc("GUI_HIGHLIGHT_UNNAMED_ROADS");
+	document.getElementById("gui-option-show-previous-routes-label").text = OSRM.loc("GUI_SHOW_PREVIOUS_ROUTES");
 	document.getElementById("gui-search-source").innerHTML = OSRM.loc("GUI_SEARCH");
 	document.getElementById("gui-search-target").innerHTML = OSRM.loc("GUI_SEARCH");
 	document.getElementById("gui-search-source-label").innerHTML = OSRM.loc("GUI_START")+":";
diff --git a/WebContent/main.css b/WebContent/main.css
index 243803e5f..0f3eb066d 100644
--- a/WebContent/main.css
+++ b/WebContent/main.css
@@ -20,13 +20,15 @@ or see http://www.gnu.org/licenses/agpl.txt.
 /* ------------------------------------------------------------------------ */
 
 /* fullscreen map */
-html, body {
+html, body
+{
     padding: 0;
     margin: 0;
     height: 100%;
     overflow:hidden;
 }
-#map {
+#map
+{
 	height: 100%;
 	z-index: 0;
 }
@@ -34,34 +36,6 @@ html, body {
 /* ------------------------------------------------------------------------ */
 
 /* changes/additions to leaflet styles */
-.leaflet-control-layers {
-	box-shadow: none;	
-	border-radius:10px;
-	-moz-border-radius:10px;
-	-webkit-border-radius:10px;
-	background-color:rgba(0, 0, 0, 0.25);
-	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3f000000, endColorstr=#3f000000);
-}
-.leaflet-control-layers-expanded {
-	background-color:rgba(255, 255, 255, 1);
-}
-.leaflet-control-layers a {
-	background-color: #FFFFFF;
-	background-color: rgba(255,255,255,1);
-	border-radius:8px;
-	-moz-border-radius:8px;
-	-webkit-border-radius:8px;	
-	margin:5px;
-	padding:5px;
-	background-position: 50% 50%;
-	background-repeat: no-repeat;
-	display: block;
-	width: 26px;
-	height: 26px;	
-}
-
-
-/* counter for leaflet markers*/
 .via-counter
 {
 	position:absolute;
@@ -300,23 +274,28 @@ html, body {
 
 
 /* styles for main-output information-box -> workaround for invisible scrollbars in Chrome */
-#information-box::-webkit-scrollbar {
+#information-box::-webkit-scrollbar
+{
 	height: 10px;
 	width: 10px;
 }
-#information-box::-webkit-scrollbar-track {
+#information-box::-webkit-scrollbar-track
+{
     background: #FFFFFF;
 }
-#information-box::-webkit-scrollbar-thumb {
+#information-box::-webkit-scrollbar-thumb
+{
 	min-height: 30px;
     background: #EEEEEE;
     border: 1px solid #999999;
     -webkit-border-radius: 5ex;
 }
-#information-box::-webkit-scrollbar-thumb:hover {
+#information-box::-webkit-scrollbar-thumb:hover
+{
     background: #F9F9F9;
 }
-#information-box::-webkit-scrollbar-thumb:active {
+#information-box::-webkit-scrollbar-thumb:active
+{
     background: #F4F4F4;
 }
 
@@ -520,10 +499,22 @@ html, body {
 	right: 5px;				/* equal to box-content padding */
 	bottom: 5px;
 }
-.mapping-checkbox
+#mapping-checkboxes
 {
-	margin: 0px 5px 3px 5px;
+	margin-top: -2px;
+}
+#mapping-checkboxes input
+{
+	cursor:pointer;
+	position: relative;	
+	margin: 0px 5px 5px 5px;
 	padding: 0px;
+    top: 3px;    
+}
+#mapping-checkboxes label
+{
+	display: block;
+    vertical-align:middle;
 }
 .mapping-button
 {
@@ -537,10 +528,12 @@ html, body {
 /* ------------------------------------------------------------------------ */
 
 /* map buttons */
-.gui-control-wrapper {
+.gui-control-wrapper
+{
 	position:relative;
 }
-.gui-control {
+.gui-control
+{
 	cursor:pointer;
 	position:relative;	
 	background-position: 50% 50%;
@@ -551,12 +544,14 @@ html, body {
 
 /* zoom buttons */
 .gui-zoom-in,
-.gui-zoom-out {
+.gui-zoom-out
+{
 	width: 15px;
 	height: 15px;	
 }
 .leaflet-touch .gui-zoom-in,
-.leaflet-touch .gui-zoom-out {
+.leaflet-touch .gui-zoom-out
+{
 	width: 23px;
 	height: 23px;
 }
@@ -566,7 +561,8 @@ html, body {
 .gui-locations-user,
 .gui-locations-route,
 .gui-locations-user-inactive,
-.gui-locations-route-inactive {
+.gui-locations-route-inactive
+{
 	float:left;
 	width: 26px;
 	height: 26px;	
@@ -574,11 +570,57 @@ html, body {
 .leaflet-touch .gui-locations-user,
 .leaflet-touch .gui-locations-route,
 .leaflet-touch .gui-locations-user-inactive,
-.leaflet-touch .gui-locations-route-inactive {
+.leaflet-touch .gui-locations-route-inactive
+{
 	width: 32px;
 	height: 32px;
 }
 
+
+/* layer selection */
+.gui-layers
+{
+	width: 26px;
+	height: 26px;	
+}
+.leaflet-touch .gui-layers
+{
+	width: 32px;
+	height: 32px;	
+}
+.gui-layers-expanded .gui-layers
+{
+	display: none;
+}
+
+.gui-layers-list
+{
+	display: none;
+}
+.gui-layers-expanded .gui-layers-list
+{
+	display: block;
+	position: relative;
+}
+.gui-layers-list input
+{
+	margin-top: 2px;
+	position: relative;
+    top: 2px;    
+}
+.gui-layers-list label
+{
+	display: block;
+    vertical-align:middle;
+}
+
+.gui-layers-separator
+{
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+}
+
 /* ------------------------------------------------------------------------ */
 
 /* buttons */
@@ -676,17 +718,6 @@ html, body {
 	overflow: hidden;
 }
 
-
-/* checkboxes */
-input[type=checkbox],
-{
-	cursor:pointer;
-}
-.checkbox-label
-{
-	vertical-align:2px;
-}
-
 /* ------------------------------------------------------------------------ */
 
 /* utility styles */
@@ -738,88 +769,27 @@ input[type=checkbox],
 /* ------------------------------------------------------------------------ */
 
 /* fonts */
-.base-font {
+.base-font
+{
 	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 12px;
 	font-weight: normal;
 }
-.big-font {
+.big-font
+{
 	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 14px;
 	font-weight: bold;	
 }
-.medium-font {
+.medium-font
+{
 	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 10.5px;
-	font-weight: normal;	
+	font-weight: normal;
 }
-.small-font {
+.small-font
+{
 	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 9px;
 	font-weight: normal;
 }
-
-
-
-
-
-
-/* .leaflet-control-layers {
-	box-shadow: 0 1px 7px #999;
-	background: #f8f8f9;
-	-moz-border-radius: 8px;
-	-webkit-border-radius: 8px;
-	border-radius: 8px;
-	}
-.leaflet-touch .leaflet-control-layers {
-	box-shadow: none;
-	border: 5px solid #bbb;	
-	}
-
-
-.leaflet-control-layers a {
-	background-position: 50% 50%;
-	background-repeat: no-repeat;
-	display: block;
-	background-image: url(images/layers.png);
-	width: 36px;
-	height: 36px;	
-	}
-.leaflet-touch .leaflet-control-layers a {
-	width: 44px;
-	height: 44px;
-	}
-	
-	
-.leaflet-control-layers .leaflet-control-layers-list,
-.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
-	display: none;
-	}
-.leaflet-control-layers-expanded .leaflet-control-layers-list {
-	display: block;
-	position: relative;
-	}
-	
-
-
-.leaflet-control-layers-expanded {
-	padding: 6px 10px 6px 6px;
-	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
-	color: #333;
-	background: #fff;
-	}
-	
-
-.leaflet-control-layers input {
-	margin-top: 2px;
-	position: relative;
-	top: 1px;
-	}
-.leaflet-control-layers label {
-	display: block;
-	}
-.leaflet-control-layers-separator {
-	height: 0;
-	border-top: 1px solid #ddd;
-	margin: 5px -10px 5px -6px;
-	} */
\ No newline at end of file
diff --git a/WebContent/main.html b/WebContent/main.html
index 5a7580e8b..53ceb9798 100644
--- a/WebContent/main.html
+++ b/WebContent/main.html
@@ -158,17 +158,21 @@ or see http://www.gnu.org/licenses/agpl.txt.
 	<div id="mapping-toggle" class="iconic-button cancel-marker top-right-button"></div>
 	<div id="gui-mapping-label" class="box-label">Mapping Tools</div>
 	
-	<!-- header -->
-	<div class="full">
-	<div class="row">
-	<div class="left"><input type="checkbox" id="option-highlight-nonames" value="highlight-nonames" class="mapping-checkbox"/></div>
-	<div class="left stretch"><span id="gui-option-highlight-nonames-label" class="checkbox-label small-font">Highlight unnamed streets</span></div>
-	</div>
-	<div class="row">
-	<div class="left"><input type="checkbox" id="option-show-previous-routes" value="show-previous-routes" class="mapping-checkbox"/></div>
-	<div class="left stretch"><span id="gui-option-show-previous-routes-label" class="checkbox-label small-font">Show previous routes</span></div>
-	</div>
+	<!-- mapping options -->
+	<form id="mapping-checkboxes" class="small-font">
+	<div>
+		<label id="gui-option-highlight-nonames-label">
+			<input type="checkbox" id="option-highlight-nonames" value="show-previous-routes"/>
+			Highlight unnamed streets
+		</label>
+		<label id="gui-option-show-previous-routes-label">
+			<input type="checkbox" id="option-show-previous-routes" value="show-previous-routes"/>
+			Show previous routes
+		</label>
 	</div>
+	</form>
+	
+	<!-- off-site links -->
 	<a class="button mapping-button" id="open-osmbugs">OSM Bugs</a><span class="quad mapping-button"></span><a class="button mapping-button" id="open-josm">JOSM</a>
 </div>
 </div>
diff --git a/WebContent/main.js b/WebContent/main.js
index 4c50aeb96..e2a898a1b 100644
--- a/WebContent/main.js
+++ b/WebContent/main.js
@@ -179,7 +179,7 @@ OSRM.prefetchCSSIcons = function() {
 	                	{ id:'.gui-locations-route:hover',		image_id:'locations_route_hover'},
 	                	{ id:'.gui-locations-route:active',		image_id:'locations_route_active'},
 	                	
-	                	{ id:'.leaflet-control-layers a',		image_id:'layers'},
+	                	{ id:'.gui-layers',						image_id:'layers'},
 	                	
 	                	{ id:'.cancel-marker',					image_id:'cancel'},
 	                	{ id:'.cancel-marker:hover',			image_id:'cancel_hover'},