diff --git a/mobile/themes/core/browser.css b/mobile/themes/core/browser.css
index 920b4b4dec41..640cf3f86556 100644
--- a/mobile/themes/core/browser.css
+++ b/mobile/themes/core/browser.css
@@ -35,13 +35,8 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
-%ifdef MOZ_PLATFORM_MAEMO
-%define ORIENTATION -moz-device-orientation
-%elifdef ANDROID
-%define ORIENTATION -moz-device-orientation
-%else
-%define ORIENTATION orientation
-%endif
+%filter substitution
+%include defines.inc
 
 /* main toolbar (URL bar) -------------------------------------------------- */
 #toolbar-main {
@@ -61,18 +56,18 @@
 /* main toolbar buttons */
 toolbarbutton.urlbar-button {
   /* space out the buttons a bit horizontally */
-  -moz-margin-start: 8px; /* core spacing */
+  -moz-margin-start: @margin_normal@; /* core spacing */
 }
 
 %ifndef ANDROID
 /* MAEMO (and desktop) only */
 #tool-app-switch {
-  margin-top: -8px; /* force the button to go to the edge */
+  margin-top: -@margin_normal@; /* force the button to go to the edge */
   -moz-margin-start: 0; /* force the button to go to the edge */
-  min-width: 72px !important; /* 72, not 64 to make up for the negative margin */
-  min-height: 72px !important; /* 72, not 64 to make up for the negative margin */
+  min-width: @touch_button_xlarge@ !important; /* 72, not 64 to make up for the negative margin */
+  min-height: @touch_button_xlarge@ !important; /* 72, not 64 to make up for the negative margin */
   visibility: collapse;
-  -moz-margin-end: 8px; /* core spacing */
+  -moz-margin-end: @margin_normal@; /* core spacing */
   list-style-image: url("chrome://browser/skin/images/task-switch-hdpi.png");
   background-color: transparent !important;
   border: none !important;
@@ -80,7 +75,7 @@ toolbarbutton.urlbar-button {
 
 #tool-app-switch:hover:active {
   background-color: #8db8d8 !important;
-  -moz-border-radius-bottomright: 6px;
+  -moz-border-radius-bottomright: @border_radius_small@;
 }
 
 #toolbar-main[fullscreen="true"] #tool-app-switch:not(:-moz-system-metric(maemo-classic)) {
@@ -89,10 +84,10 @@ toolbarbutton.urlbar-button {
 
 /* MAEMO (and desktop) only */
 #tool-app-close {
-  margin-top: -8px; /* force the button to go to the edge */
+  margin-top: -@margin_normal@; /* force the button to go to the edge */
   -moz-margin-end: 0 !important; /* force the button to go to the edge */
-  min-width: 72px !important; /* 72, not 64 to make up for the negative margin */
-  min-height: 72px !important; /* 72, not 64 to make up for the negative margin */
+  min-width: @touch_button_xlarge@ !important; /* 72, not 64 to make up for the negative margin */
+  min-height: @touch_button_xlarge@ !important; /* 72, not 64 to make up for the negative margin */
   visibility: collapse;
   list-style-image: url("chrome://browser/skin/images/task-close-hdpi.png");
   background-color: transparent !important;
@@ -104,11 +99,11 @@ toolbarbutton.urlbar-button {
 }
 
 #tool-app-close:hover:active:-moz-locale-dir(ltr) {
-  -moz-border-radius-bottomleft: 6px;
+  -moz-border-radius-bottomleft: @border_radius_small@;
 }
 
 #tool-app-close:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-radius-bottomright: 6px;
+  -moz-border-radius-bottomright: @border_radius_small@;
 }
 
 #toolbar-main[fullscreen="true"] #tool-app-close {
@@ -128,8 +123,8 @@ toolbarbutton.urlbar-button {
 /* URL bar ----------------------------------------------------------------- */
 #urlbar-container {
   color: #000;
-  border-radius: 8px;
-  margin: 8px;
+  border-radius: @border_radius_normal@;
+  margin: @margin_normal@;
   background: url("chrome://browser/skin/images/button-bg.png") bottom left repeat-x;
 }
 
@@ -142,8 +137,8 @@ toolbarbutton.urlbar-button {
   margin: 0 !important;
   padding: 0 !important;
   border: 0 solid transparent;
-  min-width: 64px !important;
-  max-width: 64px !important;
+  min-width: @touch_button_large@ !important;
+  max-width: @touch_button_large@ !important;
   -moz-box-flex: 1;
   -moz-box-align: center;
   -moz-box-pack: center;
@@ -157,22 +152,22 @@ toolbarbutton.urlbar-button {
 
 /* left cap button --------------------------------------------------------- */
 #identity-box {
-  border-right: 1px solid rgba(118,121,126,0.5) !important;
+  border-right: @border_width_tiny@ solid rgba(118,121,126,0.5) !important;
 }
 
 #identity-box:-moz-locale-dir(ltr) {
-  -moz-border-radius-topleft: 8px;
-  -moz-border-radius-bottomleft: 8px;
+  -moz-border-radius-topleft: @border_radius_normal@;
+  -moz-border-radius-bottomleft: @border_radius_normal@;
 }
 
 #identity-box:-moz-locale-dir(rtl) {
-  -moz-border-radius-topright: 8px;
-  -moz-border-radius-bottomright: 8px;
+  -moz-border-radius-topright: @border_radius_normal@;
+  -moz-border-radius-bottomright: @border_radius_normal@;
 }
 
 #identity-box[open="true"],
 #identity-box:hover:active {
-  border-right: 1px solid rgba(0, 0, 0, 0.2);
+  border-right: @border_width_tiny@ solid rgba(0, 0, 0, 0.2);
 }
 
 /* add special color */
@@ -209,7 +204,7 @@ toolbarbutton.urlbar-button {
 
 /* Main urlbar textbox */
 #urlbar-title {
-  padding: 16px 8px;
+  padding: @padding_xxxnormal@ @padding_normal@;
 }
 
 #urlbar-title.placeholder {
@@ -219,9 +214,9 @@ toolbarbutton.urlbar-button {
 #urlbar-edit,
 #urlbar-title {
   margin: 0 !important;
-  border-left: 1px solid white;
-  border-right: 1px solid white;
-  min-height: 64px;
+  border-left: @border_width_tiny@ solid white;
+  border-right: @border_width_tiny@ solid white;
+  min-height: @touch_normal@;
 }
 
 #urlbar-edit,
@@ -234,18 +229,18 @@ toolbarbutton.urlbar-button {
   -moz-appearance: none !important;
   border-radius: 0;
   border: 0 solid transparent;
-  border-right: 1px solid rgba(0,0,0,0.5);
+  border-right: @border_width_tiny@ solid rgba(0,0,0,0.5);
   padding: 0 !important;
 }
 
 #urlbar-edit:-moz-locale-dir(ltr) {
-  -moz-border-radius-topleft: 8px;
-  -moz-border-radius-bottomleft: 8px;
+  -moz-border-radius-topleft: @border_radius_normal@;
+  -moz-border-radius-bottomleft: @border_radius_normal@;
 }
 
 #urlbar-edit:-moz-locale-dir(rtl) {
-  -moz-border-radius-topright: 8px;
-  -moz-border-radius-bottomright: 8px;
+  -moz-border-radius-topright: @border_radius_normal@;
+  -moz-border-radius-bottomright: @border_radius_normal@;
 }
 
 #urlbar-edit > hbox > .textbox-input-box {
@@ -257,23 +252,23 @@ toolbarbutton.urlbar-button {
 }
 
 #urlbar-edit > hbox > hbox > .textbox-input {
-  min-height: 60px;
-  text-indent: 8px;
+  min-height: @urlbar_edit_height@;
+  text-indent: @urlbar_edit_indent@;
 }
 
 /* Right cap button --------------------------------------------------------- */
 #urlbar-icons {
-  border-left: 1px solid rgba(118,121,126,0.5) !important;
+  border-left: @border_width_tiny@ solid rgba(118,121,126,0.5) !important;
 }
 
 #urlbar-icons:-moz-locale-dir(ltr) {
-  -moz-border-radius-topright: 8px;
-  -moz-border-radius-bottomright: 8px;
+  -moz-border-radius-topright: @border_radius_normal@;
+  -moz-border-radius-bottomright: @border_radius_normal@;
 }
 
 #urlbar-icons:-moz-locale-dir(rtl) {
-  -moz-border-radius-topleft: 8px;
-  -moz-border-radius-bottomleft: 8px;
+  -moz-border-radius-topleft: @border_radius_normal@;
+  -moz-border-radius-bottomleft: @border_radius_normal@;
 }
 
 #urlbar-icons[disabled="true"] {
@@ -285,7 +280,7 @@ toolbarbutton.urlbar-button {
 }
 
 #urlbar-icons:not([disabled="true"]):hover:active {
-  border-left: 1px solid rgba(0, 0, 0, 0.2);
+  border-left: @border_width_tiny@ solid rgba(0, 0, 0, 0.2);
 }
 
 #tool-reload {
@@ -319,24 +314,24 @@ toolbarbutton.urlbar-button {
 #browser-controls {
   -moz-box-align: start;
   padding: 0;
-  -moz-border-start: 3px solid #262629;
-  min-width: 80px !important;
+  -moz-border-start: @border_width_large@ solid #262629;
+  min-width: @sidebar_width_minimum@ !important;
   background: #5e6166;
 }
 
 toolbarbutton.button-control {
   padding: 0 !important;
-  min-width: 80px !important;
-  border-top: 1px solid rgba(255,255,255,0.2) !important;
-  border-bottom: 1px solid rgba(0,0,0,0.2) !important;
+  min-width: @sidebar_width_minimum@ !important;
+  border-top: @border_width_tiny@ solid rgba(255,255,255,0.2) !important;
+  border-bottom: @border_width_tiny@ solid rgba(0,0,0,0.2) !important;
   background-color: transparent !important;
   -moz-box-align: center;
   -moz-box-pack: center;
-  height: 70px;
+  height: @sidebar_button_height@;
 }
 
 toolbarbutton.button-control:last-child {
-  border-bottom: 0px solid rgba(0,0,0,0.2) !important;
+  border-bottom: 0 solid rgba(0,0,0,0.2) !important;
 }
 
 toolbarbutton.button-control[disabled="true"] {
@@ -358,24 +353,24 @@ toolbarbutton.button-control:not([disabled="true"]):hover:active {
 
 #tool-back,
 #tool-forward:-moz-locale-dir(rtl) {
-  list-style-image: url("chrome://browser/skin/images/back-default-64.png");
+  list-style-image: url("chrome://browser/skin/images/back-default-hdpi.png");
 }
 
 #tool-back:-moz-locale-dir(rtl),
 #tool-forward {
-  list-style-image: url("chrome://browser/skin/images/forward-default-64.png");
+  list-style-image: url("chrome://browser/skin/images/forward-default-hdpi.png");
 }
 
 #tool-panel-open {
-  list-style-image: url("chrome://browser/skin/images/settings-default-64.png");
+  list-style-image: url("chrome://browser/skin/images/settings-default-hdpi.png");
 }
 
 %ifndef ANDROID
 /* MAEMO (and desktop) only */
 .panel-close {
-  min-width: 72px !important; /* 72, not 64 to make up for the negative margin */
-  max-width: 72px !important; /* 72, not 64 to make up for the negative margin */
-  min-height: 72px !important; /* 72, not 64 to make up for the negative margin */
+  min-width: @touch_button_xlarge@ !important; /* 72, not 64 to make up for the negative margin */
+  max-width: @touch_button_xlarge@ !important; /* 72, not 64 to make up for the negative margin */
+  min-height: @touch_button_xlarge@ !important; /* 72, not 64 to make up for the negative margin */
   list-style-image: url("chrome://browser/skin/images/task-back-hdpi.png");
   background: transparent !important;
   border: none !important;
@@ -386,7 +381,7 @@ toolbarbutton.button-control:not([disabled="true"]):hover:active {
 }
 
 .panel-close:hover:active:-moz-locale-dir(ltr) {
-  -moz-border-radius-bottomleft: 6px;
+  -moz-border-radius-bottomleft: @border_radius_small@;
 }
 
 .panel-close:-moz-locale-dir(rtl) {
@@ -394,7 +389,7 @@ toolbarbutton.button-control:not([disabled="true"]):hover:active {
 }
 
 .panel-close:hover:active:-moz-locale-dir(rtl) {
-  -moz-border-radius-bottomright: 6px;
+  -moz-border-radius-bottomright: @border_radius_small@;
 }
 %endif
 
@@ -431,26 +426,26 @@ toolbarbutton.choice-remotetabs {
 /* browser tools panel UI   ------------------------------------------------ */
 .panel-header {
   margin: 0;
-  padding: 4px 8px 8px 8px;
+  padding: @padding_small@ @padding_normal@ @padding_normal@ @padding_normal@;
   font-weight: bold;
   color: white !important;
   background-color: rgb(101, 121, 227) !important;
 }
 
 #tool-addons {
-  list-style-image: url("chrome://browser/skin/images/addons-default-64.png");
+  list-style-image: url("chrome://browser/skin/images/addons-default-hdpi.png");
 }
 
 #tool-downloads {
-  list-style-image: url("chrome://browser/skin/images/downloads-default-64.png");
+  list-style-image: url("chrome://browser/skin/images/downloads-default-hdpi.png");
 }
 
 #tool-preferences {
-  list-style-image: url("chrome://browser/skin/images/preferences-default-64.png");
+  list-style-image: url("chrome://browser/skin/images/preferences-default-hdpi.png");
 }
 
 #tool-console {
-  list-style-image: url("chrome://browser/skin/images/console-default-64.png");
+  list-style-image: url("chrome://browser/skin/images/console-default-hdpi.png");
 }
 
 /* preferences panel UI -----------------------------------------------------*/
@@ -464,14 +459,12 @@ toolbarbutton.choice-remotetabs {
 }
 
 /* addons panel UI   ------------------------------------------------------- */
-%expand @media (__ORIENTATION__: landscape) {
-  #addons-repo {
-    -moz-box-orient: horizontal;
-    -moz-box-align: center;
-  }
+#addons-repo {
+  -moz-box-orient: horizontal;
+  -moz-box-align: center;
 }
 
-%expand @media (__ORIENTATION__: portrait) {
+@media (@orientation@: portrait) {
   #addons-repo {
     -moz-box-orient: vertical;
     -moz-box-pack: center;
@@ -483,8 +476,8 @@ toolbarbutton.choice-remotetabs {
   list-style-image: url("chrome://mozapps/skin/xpinstall/xpinstallItemGeneric.png");
   width: 32px;
   height: 32px;
-  -moz-margin-start: 8px;
-  -moz-margin-end: 8px;
+  -moz-margin-start: @margin_normal@;
+  -moz-margin-end: @margin_normal@;
 }
 
 .addon-rating[rating] {
@@ -522,8 +515,8 @@ toolbarbutton.choice-remotetabs {
   width: 32px;
   height: 32px;
   list-style-image: url("chrome://browser/skin/images/addons-32.png");
-  -moz-margin-start: 8px;
-  -moz-margin-end: 8px;
+  -moz-margin-start: @margin_normal@;
+  -moz-margin-end: @margin_normal@;
 }
 
 richlistitem[isDisabled="true"] .title {
@@ -556,7 +549,7 @@ richlistitem[typeName="showmore"] {
 
 /* special "no downloads" items */
 #dl-empty-message {
-  margin-top: 140px; /* 2 times row height */
+  margin-top: -moz-calc(2 * @touch_row@); /* 2 times row height */
   font-style: italic;
   border-bottom: none;
 }
@@ -571,11 +564,9 @@ richlistitem[typeName="showmore"] {
 }
 
 /* console panel UI   ------------------------------------------------------ */
-@media (min-width: 500px) {
-  #console-filter-warnings,
-  #console-filter-messages {
-    visibility: visible;
-  }
+#console-filter-warnings,
+#console-filter-messages {
+  visibility: visible;
 }
 
 @media (max-width: 499px) {
@@ -602,13 +593,13 @@ richlistitem[typeName="showmore"] {
 /* be consistent with the size of placeitem */
 placelabel {
   -moz-box-align: center;
-  -moz-padding-end: 80px;
+  -moz-padding-end: @placelabel_padding@;
   background-image: url(images/arrowup-16.png), url("images/row-header-bg.png");
   background-repeat: no-repeat, repeat-x;
   background-position: 98% 50%, top left;
   background-size: auto auto, auto 100%;
   color: #000;
-  min-height: 70px; /* row size */
+  min-height: @touch_row@; /* row size */
 }
 
 placelabel:-moz-locale-dir(rtl) {
@@ -623,7 +614,7 @@ placelabel:hover:active {
 /* folder bookmarks row */
 placeitem[type="folder"] {
   -moz-box-pack: center;
-  -moz-padding-end: 40px;
+  -moz-padding-end: @placeitem_padding@;
   background-image: url(images/arrowright-16.png);
   background-repeat: no-repeat;
   background-position: 98% 50%;
@@ -650,7 +641,7 @@ placeitem[type="folder"] .bookmark-item-url {
 
 /* bookmark manage controls */
 placeitem > .bookmark-manage .bookmark-controls {
-  padding-top: 8px;
+  padding-top: @padding_normal@;
 }
 
 /* bookmark popup for star button */
@@ -672,9 +663,9 @@ placeitem {
   -moz-user-focus: ignore;
   color: black;
   background-color: white;
-  padding: 2px 4px;
-  border-bottom: 1px solid rgb(207,207,207);
-  min-height: 70px; /* row size */
+  padding: @padding_xsmall@ @padding_small@;
+  border-bottom: @border_width_tiny@ solid rgb(207,207,207);
+  min-height: @touch_row@; /* row size */
 }
 
 #popup_autocomplete autocompleteresult:hover:active,
@@ -693,9 +684,9 @@ remotetabslist autocompleteresult:hover:active:not([selected="true"]):not([class
 
 .autocomplete-item-label,
 .bookmark-item-label {
-  font-size: 24px !important;
+  font-size: @font_normal@ !important;
   font-weight: normal;
-  -moz-margin-end: 8px;
+  -moz-margin-end: @margin_normal@;
 }
 
 .autocomplete-item-container > image,
@@ -705,10 +696,10 @@ placeitem > .bookmark-manage > image {
   height: 32px;
   max-height: 32px;
   /* margin-top = (1 - title's line-height) * title's font-size */
-  margin-top: 5px;
+  margin-top: @autocomplete_item_container_image_padding@;
   margin-bottom: 0;
-  -moz-margin-end: 16px;
-  -moz-margin-start: 8px;
+  -moz-margin-end: @margin_xxxnormal@;
+  -moz-margin-start: @margin_normal@;
 }
 
 .autocomplete-item-container > image[src=""],
@@ -718,15 +709,15 @@ placeitem[src=""] .bookmark-item-container > image {
 
 .autocomplete-item-container > vbox > label,
 .bookmark-item-container > vbox > label {
-  -moz-margin-start: 1px;
+  -moz-margin-start: @margin_xtiny@;
 }
 
 .autocomplete-item-container[favorite="true"],
 .autocomplete-item-container[remote="true"],
 .autocomplete-item-container[search="true"] {
   background-repeat: no-repeat;
-  background-position: 100% 2px;
-  background-size: 26px 26px;
+  background-position: 100% @autocomplete_item_container_position@;
+  background-size: @autocomplete_item_container_size@ @autocomplete_item_container_size@;
 }
 
 .autocomplete-item-container[favorite="true"] {
@@ -744,32 +735,32 @@ placeitem[src=""] .bookmark-item-container > image {
 .autocomplete-item-container[favorite="true"][remote="true"] {
   background-image: url("chrome://browser/skin/images/autocomplete-bookmarked-hdpi.png"),
                     url("chrome://browser/skin/images/autocomplete-desktop-hdpi.png");
-  background-position: 100% 2px,
-                        94% 2px;
-  -moz-padding-end: 48px;
+  background-position: 100% @autocomplete_item_container_position@,
+                        94% @autocomplete_item_container_position@;
+  -moz-padding-end: @autocomplete_item_container_padding@;
 }
 
 .autocomplete-item-container[favorite="true"]:-moz-locale-dir(rtl),
 .autocomplete-item-container[remote="true"]:-moz-locale-dir(rtl) {
-  background-position: left 2px;
+  background-position: left @autocomplete_item_container_position@;
 }
 
 .autocomplete-item-container[favorite="true"][remote="true"]:-moz-locale-dir(rtl) {
-  background-position: left 2px,
-                         6% 2px;
+  background-position: left @autocomplete_item_container_position@,
+                         6% @autocomplete_item_container_position@;
 }
 
 .autocomplete-item-subtitle,
 .bookmark-item-url {
   color: blue;
-  font-size: 18px !important;
-  -moz-margin-end: 26px;
+  font-size: @font_small@ !important;
+  -moz-margin-end: @autocomplete_item_subtitle_margin@;
 }
 
 .autocomplete-item-container[favorite="true"] .autocomplete-item-label,
 .autocomplete-item-container[remote="true"] .autocomplete-item-label,
 .autocomplete-item-container[search="true"] .autocomplete-item-label {
-  -moz-padding-end: 30px;
+  -moz-padding-end: @autocomplete_item_label_margin@;
 }
 
 .autocomplete-item-container[search="true"] .autocomplete-item-subtitle {
@@ -780,11 +771,11 @@ placeitem[src=""] .bookmark-item-container > image {
 .autocomplete-item-tags,
 .bookmark-item-tags {
   content: attr(tags);
-  font-size: 18px !important;
+  font-size: @font_small@ !important;
   font-weight: lighter;
-  margin: 2px 0 4px 0;
-  -moz-margin-start: 8px;
-  -moz-padding-end: 32px;
+  margin: @margin_tiny@ 0 @margin_small@ 0;
+  -moz-margin-start: @margin_normal@;
+  -moz-padding-end: @autocomplete_item_tags_margin@;
 }
 
 .autocomplete-item-tags[value=""] {
@@ -795,13 +786,13 @@ placeitem[src=""] .bookmark-item-container > image {
   opacity: 1;
   -moz-transition: opacity 1s ease;
   background-color: #c90707;
-  border: 1px solid #951919;
-  -moz-border-radius: 2px;
+  border: @border_width_tiny@ solid #951919;
+  -moz-border-radius: @border_radius_tiny@;
   content: attr(badge);
-  font-size: 12px !important;
+  font-size: @font_xtiny@ !important;
   font-weight: bolder;
-  margin: 4px 0 0 0;
-  padding: 4px 6px;
+  margin: @margin_small@ 0 0 0;
+  padding: @padding_small@ @padding_snormal@;
   color: white;
 }
 
@@ -821,7 +812,7 @@ autocompleteresult[class="remotetabs-item-title"],
   font-weight: bold;
   background-color: transparent;
   margin: 0;
-  padding: 5px 10px;
+  padding: @autocompleteresult_padding@ @padding_xnormal@;
   background-image: url(images/row-header-bg.png);
   background-repeat: repeat-x;
   background-size: auto 100%;
@@ -829,7 +820,7 @@ autocompleteresult[class="remotetabs-item-title"],
 
 autocompleteresult[class="history-item-title"] .autocomplete-item-label,
 autocompleteresult[class="remotetabs-item-title"] .autocomplete-item-label {
-  font-size: 18px !important;
+  font-size: @font_small@ !important;
   font-weight: bold !important;
 }
 
@@ -854,7 +845,7 @@ autocompleteresult[class="remotetabs-item-title"] .autocomplete-item-badge {
 
 autocompleteresult[class="history-item-title"] .bookmark-item-container,
 autocompleteresult[class="remotetabs-item-title"] .bookmark-item-container {
-  font-size: 24px !important;
+  font-size: @font_normal@ !important;
 }
 
 autocompleteresult[class="history-item-title"] image,
@@ -878,7 +869,7 @@ autocompleteresult.noresults > .autocomplete-item-container {
 
 /* Left sidebar (tabs)  ---------------------------------------------------- */
 #tabs-container {
-  -moz-border-end: 3px solid #262629;
+  -moz-border-end: @border_width_large@ solid #262629;
   background: #5e6166;
 }
 
@@ -894,12 +885,12 @@ autocompleteresult.noresults > .autocomplete-item-container {
   padding: 0;
   background-color: transparent;
   margin: 0;
-  -moz-padding-end: 8px; /* core spacing */
-  -moz-padding-start: 4px; /* allow the thumbnails to get close to the edge */
+  -moz-padding-end: @padding_normal@; /* core spacing */
+  -moz-padding-start: @padding_small@; /* allow the thumbnails to get close to the edge */
 }
 
 #tabs-controls {
-  margin-top: 8px; /* core spacing */
+  margin-top: @margin_normal@; /* core spacing */
   -moz-box-pack: center;
 }
 
@@ -908,20 +899,20 @@ documenttab {
   display: block;
   line-height: 0;
 
-  -moz-margin-start: 10px;
-  margin-bottom: 5px;
+  -moz-margin-start: @margin_xnormal@;
+  margin-bottom: @documenttab_margin_bottom@;
   width: 121px;
-  padding: 8px;
-  padding-bottom: 10px;
+  padding: @padding_normal@;
+  padding-bottom: @padding_xnormal@;
   background: url("chrome://browser/skin/images/tab-inactive-hdpi.png") bottom repeat-x;
-  border-radius: 6px;
+  border-radius: @border_radius_small@;
   background-clip: padding-box;
-  border: 1px solid rgba(0,0,0,.1);
-  border-bottom-width: 2px;
+  border: @border_width_tiny@ solid rgba(0,0,0,0.1);
+  border-bottom-width: @border_width_small@;
 }
 
 documenttab[selected="true"] {
-  border-bottom-color: rgba(0,0,0,.2);
+  border-bottom-color: rgba(0,0,0,0.2);
   background: url("chrome://browser/skin/images/tab-active-hdpi.png") bottom repeat-x;
 }
 
@@ -978,19 +969,19 @@ documenttab[reload="true"] > stack > .documenttab-reload {
 
 #newtab-button {
   -moz-box-flex: 1;
-  list-style-image: url("images/newtab-default-64.png");
-  height: 70px;
+  list-style-image: url("images/newtab-default-hdpi.png");
+  height: @sidebar_button_height@;
 }
 
 /* bookmark editor   ------------------------------------------------------- */
 #bookmark-container {
-  padding: 8px; /* core spacing */
+  padding: @padding_normal@; /* core spacing */
   background: rgb(94,97,102);
-  box-shadow: black 0 2px 2px;
+  box-shadow: black 0 @shadow_width_small@ @shadow_width_small@;
 }
 
 #bookmark-form {
-  padding: 8px; /* core spacing */
+  padding: @padding_normal@; /* core spacing */
 }
 
 #bookmark-form .bookmark-controls {
@@ -1003,8 +994,8 @@ documenttab[reload="true"] > stack > .documenttab-reload {
 
 /* Identity popup   -------------------------------------------------------- */
 #identity-popup-container {
-  padding: 8px; /* core spacing */
-  padding-bottom: 16px;
+  padding: @padding_normal@; /* core spacing */
+  padding-bottom: @padding_xxxnormal@;
 }
 
 /* Popup Icons */
@@ -1023,8 +1014,8 @@ documenttab[reload="true"] > stack > .documenttab-reload {
 
 /* Popup Body Text */
 #identity-popup-content-box {
-  -moz-padding-start: 8px; /* core spacing */
-  font-size: 18px !important;
+  -moz-padding-start: @padding_normal@; /* core spacing */
+  font-size: @font_small@ !important;
   white-space: pre-wrap;
 }
 
@@ -1044,7 +1035,7 @@ documenttab[reload="true"] > stack > .documenttab-reload {
 
 #identity-popup-encryption-label,
 #identity-popup-content-verifier {
-  font-size: 14px !important;
+  font-size: @font_tiny@ !important;
 }
 
 #identity-popup-content-host,
@@ -1066,7 +1057,7 @@ documenttab[reload="true"] > stack > .documenttab-reload {
 #context-commands,
 #pageactions-container {
   background: transparent;
-  border-top: 1px solid rgb(205,205,205);
+  border-top: @border_width_tiny@ solid rgb(205,205,205);
   padding: 0;
   -moz-user-focus: ignore;
   display: inline-block;
@@ -1080,11 +1071,11 @@ pageaction {
   -moz-border-bottom-colors: rgb(175,175,175);
   -moz-border-left-colors: white;
   border-style: solid;
-  border-width: 1px !important;
-  height: 64px;
-  min-height: 64px;
+  border-width: @border_width_tiny@ !important;
+  height: @touch_button_large@;
+  min-height: @touch_button_large@;
   width: 100%;
-  min-width: 200px; /* keep the button from being too narrow */
+  min-width: @touch_action_minwidth@; /* keep the button from being too narrow */
 }
 
 /* Override richlistbox and richlistitem styles */
@@ -1118,11 +1109,11 @@ pageaction {
 }
 
 .prompt-button > .button-box {
-  padding: 0 4px 1px 3px !important;
+  padding: 0 @padding_small@ @padding_tiny@ @padding_xsmall@ !important;
 }
 
 .prompt-button > .button-box > .button-icon {
-  -moz-margin-end: 8px;
+  -moz-margin-end: @margin_normal@;
 }
 
 @media (min-width: 500px) {
@@ -1150,7 +1141,7 @@ pageaction:not([disabled]):hover:active {
 pageaction > hbox > .pageaction-image {
   width: 32px;
   height: 32px;
-  -moz-margin-end: 8px;
+  -moz-margin-end: @margin_normal@;
 }
 
 pageaction:not([image]) > hbox >.pageaction-image {
@@ -1160,12 +1151,12 @@ pageaction:not([image]) > hbox >.pageaction-image {
 .prompt-button,
 .context-command,
 .pageaction-title {
-  font-size: 24px !important;
+  font-size: @font_normal@ !important;
   color: #414141 !important;
 }
 
 .pageaction-desc {
-  font-size: 14px !important;
+  font-size: @font_tiny@ !important;
   color: #414141;
 }
 
@@ -1175,8 +1166,8 @@ pageaction:not([image]) > hbox >.pageaction-image {
 
 #share-title,
 #context-hint {
-  font-size: 18px;
-  padding: 4px;
+  font-size: @font_small@;
+  padding: @padding_small@;
 }
 
 #context-hint[value=""] {
@@ -1195,15 +1186,15 @@ pageaction:not([image]) > hbox >.pageaction-image {
 
 /* Preferences window   ---------------------------------------------------- */
 .setting {
-  padding-left: 10px;
-  border-bottom: 1px solid #cacdd5;
+  padding-left: @padding_xnormal@;
+  border-bottom: @border_width_tiny@ solid #cacdd5;
 }
 
 /* XXX should be a richlistitem */
 .prefbox {
-  padding: 2px;
-  border-bottom: 1px solid rgb(207,207,207);
-  min-height: 70px; /* row size */
+  padding: @padding_xsmall@;
+  border-bottom: @border_width_tiny@ solid rgb(207,207,207);
+  min-height: @touch_row@; /* row size */
   -moz-box-align: center;
 }
 
@@ -1213,15 +1204,15 @@ pageaction:not([image]) > hbox >.pageaction-image {
 
 .setting-subgroup > .prefbox {
   border-bottom: none;
-  -moz-margin-start: 16px;
+  -moz-margin-start: @margin_xxxnormal@;
 }
 
 .setting-subgroup + :not(.setting-subgroup) > .prefbox {
-  border-top: 1px solid rgb(207,207,207);
+  border-top: @border_width_tiny@ solid rgb(207,207,207);
 }
 
 /* Put setting textboxes on a separate row in portrait */
-%expand @media (__ORIENTATION__: portrait) {
+@media (@orientation@: portrait) {
   .setting-integer,
   .setting-string {
     -moz-box-align: start;
@@ -1245,20 +1236,18 @@ pageaction:not([image]) > hbox >.pageaction-image {
 
 /* XXX should be a richlistitem description.title */
 .preftitle {
-  font-size: 24px !important;
+  font-size: @font_normal@ !important;
 }
 
 /* XXX should be a richlistitem description.normal */
 .prefdesc {
-  font-size: 18px !important;
+  font-size: @font_small@ !important;
   color: grey;
 }
 
 /* alerts popup ----------------------------------------------------------- */
-@media (min-width: 500px) {
-  #alerts-container {
-    width: 300px;
-  }
+#alerts-container {
+  width: 300px;
 }
 
 @media (max-width: 499px) {
@@ -1271,8 +1260,8 @@ pageaction:not([image]) > hbox >.pageaction-image {
   -moz-transform: translatex(100%);
   -moz-transition-property: -moz-transform;
   -moz-transition-duration: 0.5s;
-  margin-bottom: 20px;
-  -moz-margin-end: 20px;
+  margin-bottom: @margin_large@;
+  -moz-margin-end: @margin_large@;
 }
 
 #alerts-container:-moz-locale-dir(rtl) {
@@ -1284,13 +1273,13 @@ pageaction:not([image]) > hbox >.pageaction-image {
 }
 
 #alerts-text {
-  font-size: 18px !important;
+  font-size: @font_small@ !important;
   white-space: pre-wrap;
 }
 
 /* helperapp (save-as) popup ----------------------------------------------- */
 #helperapp-target {
-  font-size: 18px !important;
+  font-size: @font_small@ !important;
 }
 
 /* navigator popup -------------------------------------------------------------- */
@@ -1326,13 +1315,13 @@ pageaction:not([image]) > hbox >.pageaction-image {
 
 #content-navigator > #select-container > #select-container-inner {
   border-width: 0;
-  border-radius: 8px 8px 0 0;
-  padding: 8px 4px 8px 4px;
+  border-radius: @border_radius_normal@ @border_radius_normal@ 0 0;
+  padding: @padding_normal@ @padding_small@ @padding_normal@ @padding_small@;
   -moz-box-flex: 0;
 }
 
 #content-navigator > #select-container > #select-container-inner > #select-list {
-  min-height: 70px;
+  min-height: @touch_row@;
 }
 
 #content-navigator > #select-container > spacer {
@@ -1340,7 +1329,7 @@ pageaction:not([image]) > hbox >.pageaction-image {
 }
 
 #select-buttons {
-  padding: 4px 8px; /* row size & core spacing */
+  padding: @padding_small@ @padding_normal@; /* row size & core spacing */
 }
 
 #select-buttons-done {
@@ -1358,8 +1347,8 @@ pageaction:not([image]) > hbox >.pageaction-image {
 
 /* XXX this should go with the final Android theme */
 #content-navigator > hbox > toolbarbutton {
-  border-left: 1px solid rgba(255,255,255,0.2);
-  border-right: 1px solid rgba(0,0,0,0.2);
+  border-left: @border_width_tiny@ solid rgba(255,255,255,0.2);
+  border-right: @border_width_tiny@ solid rgba(0,0,0,0.2);
   background-color: transparent;
   -moz-box-align: center;
   -moz-box-pack: center;
@@ -1387,8 +1376,8 @@ pageaction:not([image]) > hbox >.pageaction-image {
 #select-helper-textbox,
 #find-helper-textbox {
   border: none;
-  margin: 4px;
-  border-radius: 8px;
+  margin: @margin_small@;
+  border-radius: @border_radius_normal@;
 }
 
 #form-helper-autofill {
@@ -1428,11 +1417,11 @@ pageaction:not([image]) > hbox >.pageaction-image {
 }
 
 .form-helper-autofill-label {
-  padding: 12px 8px; /* 12px helps get row size for the labels */
+  padding: @padding_xxnormal@ @padding_normal@; /* 12px helps get row size for the labels */
   margin: 0;
   border-color: transparent rgb(215,215,215) transparent rgb(255,255,255);
   border-style: solid;
-  border-width: 1px;
+  border-width: @border_width_tiny@;
 }
 
 .form-helper-autofill-label:first-child {
@@ -1458,17 +1447,17 @@ pageaction:not([image]) > hbox >.pageaction-image {
 }
 
 #select-list {
-  border: 1px solid gray;
+  border: @border_width_tiny@ solid gray;
   background-color: #fff;
 }
 
 .chrome-select-option {
   color: #000;
   background-color: #fff;
-  padding: 5px;
-  border-bottom: 1px solid rgb(207,207,207);
-  min-height: 70px; /* row size */
-  max-height: 70px; /* row size */
+  padding: @padding_small@;
+  border-bottom: @border_width_tiny@ solid rgb(207,207,207);
+  min-height: @touch_row@; /* row size */
+  max-height: @touch_row@; /* row size */
   -moz-box-align: center;
 }
 
@@ -1495,7 +1484,7 @@ pageaction:not([image]) > hbox >.pageaction-image {
 }
 
 .chrome-select-option.in-optgroup {
-  -moz-padding-start: 24px;
+  -moz-padding-start: @padding_large@;
 }
 
 .chrome-select-option-image {
@@ -1512,8 +1501,8 @@ pageaction:not([image]) > hbox >.pageaction-image {
 }
 
 #menulist-title {
-  padding: 12px 4px 4px 4px;
-  font-size: 18px;
+  padding: @padding_xxnormal@ @padding_small@ @padding_small@ @padding_small@;
+  font-size: @font_small@;
 }
 
 #menulist-title[value=""] {
@@ -1529,8 +1518,8 @@ pageaction:not([image]) > hbox >.pageaction-image {
   width: 30px;
   height: 30px;
   list-style-image: url("chrome://browser/skin/images/check-30.png");
-  margin-right: 2px;
-  margin-top: 2px;
+  margin-right: @margin_tiny@;
+  margin-top: @margin_tiny@;
 }
 
 .menulist-command:not(.selected) > image[src=""] {
@@ -1546,10 +1535,10 @@ pageaction:not([image]) > hbox >.pageaction-image {
 /* Android menu ------------------------------------------------------------ */
 #appmenu {
   background: rgba(255,255,255,0.95);
-  box-shadow: 0 6px 10px 6px black;
+  box-shadow: 0 @shadow_width_large@ @shadow_width_xlarge@ @shadow_width_large@ black;
   border-style: solid;
   border-color: #6d6d6d;
-  border-width: 3px 3px 0 3px;
+  border-width: @border_width_large@ @border_width_large@ 0 @border_width_large@;
 }
 
 .appmenu-button {
@@ -1557,8 +1546,8 @@ pageaction:not([image]) > hbox >.pageaction-image {
   -moz-box-orient: vertical;
   border-style: solid;
   border-color: #d8d8d8 !important;
-  border-width: 0 1px 1px 0;
-  height: 99px;
+  border-width: 0 @border_width_tiny@ @border_width_tiny@ 0;
+  height: @appmenu_button_height@;
   width: 0;
 }
 
@@ -1569,14 +1558,19 @@ pageaction:not([image]) > hbox >.pageaction-image {
 
 #appmenu > .appmenu-button .toolbarbutton-text {
   display: block !important;
-  font-size: 22px !important;
+  font-size: @appmenu_font@ !important;
 }
 
-@media (max-width: 499px) {
+#appmenu > .appmenu-button .toolbarbutton-icon {
+  margin-top: @margin_normal@ !important;
+  margin-bottom: @margin_small@ !important;
+}
+
+@media (@orientation@: portrait) {
   #appmenu[count="4"],
   #appmenu[count="5"],
   #appmenu[count="6"] {
-    height: 200px;
+    height: @appmenu_portrait_height@;
     display: inline-block;
   }
 
@@ -1595,7 +1589,7 @@ pageaction:not([image]) > hbox >.pageaction-image {
 
 /* Sync setup ------------------------------------------------------------- */
 .syncsetup-page {
-  padding: 24px;
+  padding: @padding_large@;
   background-color: #000;
 }
 
@@ -1610,8 +1604,8 @@ pageaction:not([image]) > hbox >.pageaction-image {
 .syncsetup-code {
   color: #fff;
   background-color: rgb(94,97,102);
-  border-radius: 8px;
-  font-size: 48px !important;
+  border-radius: @border_radius_normal@;
+  font-size: @font_xlarge@ !important;
   padding: 0.2em 0.4em;
   -moz-padding-end: 0.2em;
   letter-spacing: 0.2em;
@@ -1628,11 +1622,11 @@ pageaction:not([image]) > hbox >.pageaction-image {
 }
 
 .syncsetup-edit {
-  margin-bottom: 12px;
+  margin-bottom: @margin_xnormal@;
 }
 
 #syncsetup-customserver {
-  -moz-margin-start: 12px;
+  -moz-margin-start: @margin_xnormal@;
 }
 
 /* content scrollbars */
@@ -1643,8 +1637,8 @@ pageaction:not([image]) > hbox >.pageaction-image {
   -moz-border-bottom-colors: none !important;
   -moz-border-right-colors: none !important;
   -moz-border-left-colors: none !important;
-  -moz-border-radius: 3px;
-  border: 1px solid rgba(255, 255, 255, 0.4) !important;
+  -moz-border-radius: @border_radius_tiny@;
+  border: @border_width_tiny@ solid rgba(255, 255, 255, 0.4) !important;
 }
 
 .scroller[panning="true"] {
@@ -1652,14 +1646,13 @@ pageaction:not([image]) > hbox >.pageaction-image {
 }
 
 .scroller[orient="vertical"] {
-  min-width: 6px;
-  width: 6px;
-  min-height: 12px;
+  min-width: @scroller_thickness@;
+  width: @scroller_thickness@;
+  min-height: @scroller_minimum@;
 }
 
 .scroller[orient="horizontal"] {
-  min-height: 6px;
-  height: 6px;
-  min-width: 12px;
+  min-height: @scroller_thickness@;
+  height: @scroller_thickness@;
+  min-width: @scroller_minimum@;
 }
-
diff --git a/mobile/themes/core/defines.inc b/mobile/themes/core/defines.inc
new file mode 100644
index 000000000000..a70e425ff800
--- /dev/null
+++ b/mobile/themes/core/defines.inc
@@ -0,0 +1,173 @@
+%filter substitution
+
+%ifdef ANDROID
+%define font_xlarge 5.08mozmm
+%define font_normal 2.54mozmm
+%define font_small 1.91mozmm
+%define font_xsmall 1.69mozmm
+%define font_tiny 1.48mozmm
+%define font_xtiny 1.27mozmm
+
+%define touch_row 7.41mozmm
+%define touch_button_xlarge 7.62mozmm
+%define touch_button_large 6.77mozmm
+%define touch_button_small 5.93mozmm
+%define touch_action_minwidth 21.17mozmm
+%define touch_normal 6.77mozmm
+
+%define margin_large 2.54mozmm
+%define margin_xxxnormal 1.69mozmm
+%define margin_xnormal 1.06mozmm
+%define margin_normal 0.85mozmm
+%define margin_snormal 0.64mozmm
+%define margin_small 0.42mozmm
+%define margin_tiny 0.21mozmm
+%define margin_xtiny 0.11mozmm
+
+%define padding_xlarge 3.39mozmm
+%define padding_large 2.54mozmm
+%define padding_xxxnormal 1.69mozmm
+%define padding_xxnormal 1.27mozmm
+%define padding_xnormal 1.06mozmm
+%define padding_normal 0.85mozmm
+%define padding_snormal 0.64mozmm
+%define padding_small 0.42mozmm
+%define padding_xsmall 0.21mozmm
+%define padding_tiny 0.11mozmm
+
+%define border_width_xlarge 0.42mozmm
+%define border_width_large 0.32mozmm
+%define border_width_small 0.21mozmm
+%define border_width_tiny 0.11mozmm
+
+%define border_radius_normal 0.85mozmm
+%define border_radius_small 0.64mozmm
+%define border_radius_tiny 0.21mozmm
+
+%define shadow_width_xlarge 1.06mozmm
+%define shadow_width_large 0.64mozmm
+%define shadow_width_small 0.21mozmm
+
+%define textbox_height 5.08mozmm
+
+%define dropmarker_padding 0.53mozmm
+
+%define progressmeter_height 3.39mozmm
+
+%define urlbar_edit_height 6.35mozmm
+%define urlbar_edit_indent 0.85mozmm
+
+%define scroller_thickness 0.64mozmm
+%define scroller_minimum 1.27mozmm
+
+%define sidebar_width_minimum 8.47mozmm
+%define sidebar_button_height 7.41mozmm
+%define documenttab_margin_bottom 0.53mozmm
+
+%define placelabel_padding 8.47mozmm
+%define placeitem_padding 4.23mozmm
+
+%define autocomplete_item_container_image_padding 0.53mozmm
+%define autocomplete_item_container_position 0.21mozmm
+%define autocomplete_item_container_size 2.75mozmm
+%define autocomplete_item_container_padding 5.08mozmm
+
+%define autocomplete_item_subtitle_margin 2.75mozmm
+%define autocomplete_item_label_margin 3.18mozmm
+%define autocomplete_item_tags_margin 3.39mozmm
+
+%define autocompleteresult_padding 0.53mozmm
+
+%define appmenu_font 2.33mozmm
+%define appmenu_portrait_height 21.17mozmm
+%define appmenu_button_height  10.48mozmm
+%else
+%define font_xlarge 48px
+%define font_normal 24px
+%define font_small 18px
+%define font_xsmall 16px
+%define font_tiny 14px
+%define font_xtiny 12px
+
+%define touch_row 70px
+%define touch_button_xlarge 72px
+%define touch_button_large 64px
+%define touch_button_small 56px
+%define touch_action_minwidth 200px
+%define touch_normal 64px
+
+%define margin_large 24px
+%define margin_xxxnormal 16px
+%define margin_xnormal 10px
+%define margin_normal 8px
+%define margin_snormal 6px
+%define margin_small 4px
+%define margin_tiny 2px
+%define margin_xtiny 1px
+
+%define padding_xlarge 32px
+%define padding_large 24px
+%define padding_xxxnormal 16px
+%define padding_xxnormal 12px
+%define padding_xnormal 10px
+%define padding_normal 8px
+%define padding_snormal 6px
+%define padding_small 4px
+%define padding_xsmall 2px
+%define padding_tiny 1px
+
+%define border_width_xlarge 4px
+%define border_width_large 3px
+%define border_width_small 2px
+%define border_width_tiny 1px
+
+%define border_radius_normal 8px
+%define border_radius_small 6px
+%define border_radius_tiny 2px
+
+%define shadow_width_xlarge 10px
+%define shadow_width_large 6px
+%define shadow_width_small 2px
+
+%define textbox_height 48px
+
+%define dropmarker_margin 5px
+
+%define progressmeter_height 32px
+
+%define urlbar_edit_height 60px
+%define urlbar_edit_indent 8px
+
+%define scroller_thickness 6px
+%define scroller_minimum 12px
+
+%define sidebar_width_minimum 80px
+%define sidebar_button_height 70px
+%define documenttab_margin_bottom 5px
+
+%define placelabel_padding 80px
+%define placeitem_padding 40px
+
+%define autocomplete_item_container_image_padding 5px
+%define autocomplete_item_container_position 2px
+%define autocomplete_item_container_size 26px
+%define autocomplete_item_container_padding 48px
+
+%define autocomplete_item_subtitle_margin 26px
+%define autocomplete_item_label_margin 30px
+%define autocomplete_item_tags_margin 32px
+
+%define autocompleteresult_padding 5px
+
+%define appmenu_font 22px
+%define appmenu_portrait_height 200px
+%define appmenu_button_height 99px
+%endif
+
+%ifdef MOZ_PLATFORM_MAEMO
+%define orientation -moz-device-orientation
+%elifdef ANDROID
+%define orientation -moz-device-orientation
+%else
+%define orientation orientation
+%endif
diff --git a/mobile/themes/core/images/addons-default-64.png b/mobile/themes/core/images/addons-default-64.png
deleted file mode 100644
index 0e5d2d61d2be..000000000000
Binary files a/mobile/themes/core/images/addons-default-64.png and /dev/null differ
diff --git a/mobile/themes/core/images/addons-default-hdpi.png b/mobile/themes/core/images/addons-default-hdpi.png
new file mode 100644
index 000000000000..25f09906e011
Binary files /dev/null and b/mobile/themes/core/images/addons-default-hdpi.png differ
diff --git a/mobile/themes/core/images/appmenu-addons-hdpi.png b/mobile/themes/core/images/appmenu-addons-hdpi.png
index 4c572535f1c7..904ddbfd7dcd 100644
Binary files a/mobile/themes/core/images/appmenu-addons-hdpi.png and b/mobile/themes/core/images/appmenu-addons-hdpi.png differ
diff --git a/mobile/themes/core/images/appmenu-downloads-hdpi.png b/mobile/themes/core/images/appmenu-downloads-hdpi.png
index 515081caba10..9327b0f8197b 100644
Binary files a/mobile/themes/core/images/appmenu-downloads-hdpi.png and b/mobile/themes/core/images/appmenu-downloads-hdpi.png differ
diff --git a/mobile/themes/core/images/appmenu-preferences-hdpi.png b/mobile/themes/core/images/appmenu-preferences-hdpi.png
index 552a6bd37d14..190ac8b4edcd 100644
Binary files a/mobile/themes/core/images/appmenu-preferences-hdpi.png and b/mobile/themes/core/images/appmenu-preferences-hdpi.png differ
diff --git a/mobile/themes/core/images/appmenu-site-hdpi.png b/mobile/themes/core/images/appmenu-site-hdpi.png
index 74ca2c456b95..b01d29cbbca9 100644
Binary files a/mobile/themes/core/images/appmenu-site-hdpi.png and b/mobile/themes/core/images/appmenu-site-hdpi.png differ
diff --git a/mobile/themes/core/images/back-default-64.png b/mobile/themes/core/images/back-default-64.png
deleted file mode 100644
index 64200e8e83cc..000000000000
Binary files a/mobile/themes/core/images/back-default-64.png and /dev/null differ
diff --git a/mobile/themes/core/images/back-default-hdpi.png b/mobile/themes/core/images/back-default-hdpi.png
new file mode 100644
index 000000000000..8c2387cfcbec
Binary files /dev/null and b/mobile/themes/core/images/back-default-hdpi.png differ
diff --git a/mobile/themes/core/images/console-default-64.png b/mobile/themes/core/images/console-default-64.png
deleted file mode 100644
index d4017bd305e4..000000000000
Binary files a/mobile/themes/core/images/console-default-64.png and /dev/null differ
diff --git a/mobile/themes/core/images/console-default-hdpi.png b/mobile/themes/core/images/console-default-hdpi.png
new file mode 100644
index 000000000000..b0d26f4237f6
Binary files /dev/null and b/mobile/themes/core/images/console-default-hdpi.png differ
diff --git a/mobile/themes/core/images/downloads-default-64.png b/mobile/themes/core/images/downloads-default-64.png
deleted file mode 100644
index 776a8d69e94f..000000000000
Binary files a/mobile/themes/core/images/downloads-default-64.png and /dev/null differ
diff --git a/mobile/themes/core/images/downloads-default-hdpi.png b/mobile/themes/core/images/downloads-default-hdpi.png
new file mode 100644
index 000000000000..f9afa2cec9fb
Binary files /dev/null and b/mobile/themes/core/images/downloads-default-hdpi.png differ
diff --git a/mobile/themes/core/images/dropmarker-hdpi.png b/mobile/themes/core/images/dropmarker-hdpi.png
index 8364b38d1bcc..960fbd6ab247 100644
Binary files a/mobile/themes/core/images/dropmarker-hdpi.png and b/mobile/themes/core/images/dropmarker-hdpi.png differ
diff --git a/mobile/themes/core/images/forward-default-64.png b/mobile/themes/core/images/forward-default-64.png
deleted file mode 100644
index beebf5261ccc..000000000000
Binary files a/mobile/themes/core/images/forward-default-64.png and /dev/null differ
diff --git a/mobile/themes/core/images/forward-default-hdpi.png b/mobile/themes/core/images/forward-default-hdpi.png
new file mode 100644
index 000000000000..4bcf5010976b
Binary files /dev/null and b/mobile/themes/core/images/forward-default-hdpi.png differ
diff --git a/mobile/themes/core/images/newtab-default-64.png b/mobile/themes/core/images/newtab-default-64.png
deleted file mode 100644
index 6690b553b0fd..000000000000
Binary files a/mobile/themes/core/images/newtab-default-64.png and /dev/null differ
diff --git a/mobile/themes/core/images/newtab-default-hdpi.png b/mobile/themes/core/images/newtab-default-hdpi.png
new file mode 100644
index 000000000000..aacf3b927b0d
Binary files /dev/null and b/mobile/themes/core/images/newtab-default-hdpi.png differ
diff --git a/mobile/themes/core/images/preferences-default-64.png b/mobile/themes/core/images/preferences-default-64.png
deleted file mode 100644
index d2f86902604b..000000000000
Binary files a/mobile/themes/core/images/preferences-default-64.png and /dev/null differ
diff --git a/mobile/themes/core/images/preferences-default-hdpi.png b/mobile/themes/core/images/preferences-default-hdpi.png
new file mode 100644
index 000000000000..49d89c1df278
Binary files /dev/null and b/mobile/themes/core/images/preferences-default-hdpi.png differ
diff --git a/mobile/themes/core/images/settings-default-64.png b/mobile/themes/core/images/settings-default-64.png
deleted file mode 100644
index f61bb03cfd07..000000000000
Binary files a/mobile/themes/core/images/settings-default-64.png and /dev/null differ
diff --git a/mobile/themes/core/images/settings-default-hdpi.png b/mobile/themes/core/images/settings-default-hdpi.png
new file mode 100644
index 000000000000..448743a46863
Binary files /dev/null and b/mobile/themes/core/images/settings-default-hdpi.png differ
diff --git a/mobile/themes/core/jar.mn b/mobile/themes/core/jar.mn
index 44f1bb67262c..8ea0398a2bcd 100644
--- a/mobile/themes/core/jar.mn
+++ b/mobile/themes/core/jar.mn
@@ -9,9 +9,9 @@ chrome.jar:
   skin/config.css                           (config.css)
   skin/firstRun.css                         (firstRun.css)
   skin/header.css                           (header.css)
-  skin/platform.css                         (platform.css)
+* skin/platform.css                         (platform.css)
 * skin/browser.css                          (browser.css)
-  skin/notification.css                     (notification.css)
+* skin/notification.css                     (notification.css)
   skin/touchcontrols.css                    (touchcontrols.css)
 % override chrome://global/skin/about.css chrome://browser/skin/about.css
 % override chrome://global/skin/media/videocontrols.css chrome://browser/skin/touchcontrols.css
@@ -58,8 +58,8 @@ chrome.jar:
   skin/images/reload-hdpi.png               (images/reload-hdpi.png)
   skin/images/alert-addons-30.png           (images/alert-addons-30.png)
   skin/images/alert-downloads-30.png        (images/alert-downloads-30.png)
-  skin/images/addons-default-64.png         (images/addons-default-64.png)
-  skin/images/back-default-64.png           (images/back-default-64.png)
+  skin/images/addons-default-hdpi.png         (images/addons-default-hdpi.png)
+  skin/images/back-default-hdpi.png           (images/back-default-hdpi.png)
   skin/images/allpages-48.png               (images/allpages-48.png)
   skin/images/history-48.png                (images/history-48.png)
   skin/images/bookmark-default-hdpi.png     (images/bookmark-default-hdpi.png)
@@ -68,13 +68,13 @@ chrome.jar:
   skin/images/panelrow-active-hdpi.png      (images/panelrow-active-hdpi.png)
   skin/images/panelrow-default-hdpi.png     (images/panelrow-default-hdpi.png)
   skin/images/panelrow-selected-hdpi.png    (images/panelrow-selected-hdpi.png)
-  skin/images/forward-default-64.png        (images/forward-default-64.png)
-  skin/images/downloads-default-64.png      (images/downloads-default-64.png)
-  skin/images/settings-default-64.png       (images/settings-default-64.png)
-  skin/images/preferences-default-64.png    (images/preferences-default-64.png)
+  skin/images/forward-default-hdpi.png        (images/forward-default-hdpi.png)
+  skin/images/downloads-default-hdpi.png      (images/downloads-default-hdpi.png)
+  skin/images/settings-default-hdpi.png       (images/settings-default-hdpi.png)
+  skin/images/preferences-default-hdpi.png    (images/preferences-default-hdpi.png)
   skin/images/row-header-bg.png             (images/row-header-bg.png)
-  skin/images/console-default-64.png        (images/console-default-64.png)
-  skin/images/newtab-default-64.png         (images/newtab-default-64.png)
+  skin/images/console-default-hdpi.png        (images/console-default-hdpi.png)
+  skin/images/newtab-default-hdpi.png         (images/newtab-default-hdpi.png)
   skin/images/tab-active-hdpi.png           (images/tab-active-hdpi.png)
   skin/images/tab-inactive-hdpi.png         (images/tab-inactive-hdpi.png)
   skin/images/tab-closed-hdpi.png           (images/tab-closed-hdpi.png)
diff --git a/mobile/themes/core/notification.css b/mobile/themes/core/notification.css
index ed44a566deed..81e35ab8eb52 100644
--- a/mobile/themes/core/notification.css
+++ b/mobile/themes/core/notification.css
@@ -1,9 +1,12 @@
+%filter substitution
+%include defines.inc
+
 notification, notification[type="warning"] {
   padding: 0;
   color: #fff;
   background: #5768c3;
-  border-top: 1px solid #4756aa;
-  border-bottom: 1px solid #4756aa;
+  border-top: @border_width_tiny@ solid #4756aa;
+  border-bottom: @border_width_tiny@ solid #4756aa;
 }
 
 notification .messageCloseButton {
@@ -25,5 +28,5 @@ notification .outset {
 }
 
 notification .buttons {
-  padding: 8px; /* core spacing */
+  padding: @padding_normal@;
 }
diff --git a/mobile/themes/core/platform.css b/mobile/themes/core/platform.css
index 05315237bd87..cede5be02fc4 100644
--- a/mobile/themes/core/platform.css
+++ b/mobile/themes/core/platform.css
@@ -38,10 +38,13 @@
 /* global skin ------------------------------------------------------------- */
 @import url(chrome://global/skin/);
 
+%filter substitution
+%include defines.inc
+
 /* general stuff ------------------------------------------------------------ */
 :root {
   font-family: "Nokia Sans", Tahoma, sans-serif !important;
-  font-size: 24px !important;
+  font-size: @font_normal@ !important;
 }
 
 ::-moz-selection {
@@ -58,8 +61,8 @@ menuitem {
 description,
 label {
   /* force mac to use the same margins as windows and linux */
-  -moz-margin-start: 6px;
-  -moz-margin-end: 5px;
+  -moz-margin-start: @margin_snormal@;
+  -moz-margin-end: @margin_snormal@;
 }
 
 /* Override any OS inverse themes */
@@ -75,9 +78,9 @@ textbox {
 
 /* textboxes --------------------------------------------------------------- */
 textbox:not([type="number"]) {
-  min-height: 48px;
-  border: 2px solid #cacdd5;
-  -moz-border-radius: 8px;
+  min-height: @textbox_height@;
+  border: @border_width_small@ solid #cacdd5;
+  -moz-border-radius: @border_radius_normal@;
   -moz-border-top-colors: -moz-initial;
   -moz-border-right-colors: -moz-initial;
   -moz-border-bottom-colors: -moz-initial;
@@ -89,7 +92,7 @@ textbox[isempty="true"] {
 }
 
 textbox.search-bar {
-  border: 2px solid rgba(0,0,0,0.4);
+  border: @border_width_small@ solid rgba(0,0,0,0.4);
   background-color: #f9f9f9;
   background: url("chrome://browser/skin/images/textbox-bg.png") top left repeat-x;
 }
@@ -109,7 +112,7 @@ textbox[disabled="true"] {
   -moz-box-align: center;
   -moz-box-pack: center;
   background-color: rgba(0,0,0,.6);
-  padding: 64px;
+  padding: @touch_normal@;
 }
 
 dialog,
@@ -117,71 +120,68 @@ dialog,
 .panel-arrowcontent {
   background: url("chrome://browser/skin/images/popup-bg-hdpi.png") left bottom repeat-x;
   background-color: white;
-  border-radius: 8px;
-  box-shadow: black 0 2px 2px, black 0 -1px 2px;
-  padding: 8px 0; /* core spacing on top/bottom */
+  border-radius: @border_radius_normal@;
+  box-shadow: black 0 @border_radius_tiny@ @border_radius_tiny@, black 0 -@border_radius_tiny@ @border_radius_tiny@;
+  padding: @padding_normal@ 0; /* core spacing on top/bottom */
 }
 
 dialog > .prompt-header {
-  padding: 8px;
-  font-size: 18px !important;
+  padding: @padding_normal@;
+  font-size: @font_small@ !important;
 }
 
 dialog > .prompt-header > .prompt-title {
-  font-size: 24px !important;
+  font-size: @font_normal@ !important;
 }
 
 @media (max-width: 499px) {
   .context-block,
   .modal-block {
-    padding: 32px;
-  }
-
-  dialog > .prompt-header {
-    font-size: 16px !important;
+    padding: @padding_xlarge@;
   }
 
+  dialog > .prompt-header,
   dialog > .prompt-header > .prompt-title {
-    font-size: 18px !important;
+    font-size: @font_small@ !important;
   }
 }
 
 dialog > .prompt-header > .prompt-message {
-  margin-top: 8px;
+  margin-top: @margin_normal@;
   white-space: pre-wrap;
 }
 
 dialog > .prompt-header > .button-checkbox {
-  margin-left: 24px;
+  margin-left: @margin_large@;
 }
 
 /* buttons ----------------------------------------------------------------- */
 .button-text,
 .toolbarbutton-text {
   font-weight: normal;
-  font-size: 24px !important;
+  font-size: @font_normal@ !important;
 }
 
 button {
   -moz-appearance: none;
-  min-width: 56px !important; /* button size */
-  min-height: 56px !important; /* button size */
+  min-width: @touch_button_small@ !important; /* button size */
+  min-height: @touch_button_small@ !important; /* button size */
   color: #000;
-  border-radius: 8px;
-  margin: 8px;
-  padding: 10px;
+  border-radius: @border_radius_normal@;
+  margin: @margin_normal@;
+  padding: @padding_xnormal@;
   background-image: url("chrome://browser/skin/images/button-bg.png");
   background-size: auto 100%;
-  border: 1px solid #cacdd5;
+  border: @border_width_tiny@ solid #cacdd5;
 }
 
 button[disabled="true"] {
   color: #aaa !important;
-  border: 1px solid #cacdd5 !important;
+  border: @border_width_tiny@ solid #cacdd5 !important;
 }
 
 button:focus > .button-box {
-  border: 1px solid transparent;
+  border: @border_width_tiny@ solid transparent;
 }
 
 button:not([disabled]):hover:active,
@@ -200,18 +200,18 @@ spinbuttons {
 }
 
 .numberbox-input-box {
-  border: 2px solid #cacdd5;
-  border-right: 0px solid transparent;
-  border-radius: 8px 0px 0px 8px;
+  border: @border_width_small@ solid #cacdd5;
+  border-right: 0 solid transparent;
+  border-radius: @border_radius_normal@ 0 0 @border_radius_normal@;
   -moz-border-top-colors: -moz-initial;
   -moz-border-bottom-colors: -moz-initial;
   -moz-border-left-colors: -moz-initial;
 }
 
 .numberbox-input-box:-moz-locale-dir(rtl) {
-  border-radius: 0px 8px 8px 0px;
-  border-right: 2px solid #cacdd5;
-  border-left: 0px solid transparent;
+  border-radius: 0 @border_radius_normal@ @border_radius_normal@ 0;
+  border-right: @border_width_small@ solid #cacdd5;
+  border-left: 0 solid transparent;
 }
 
 .spinbuttons-box {
@@ -228,15 +228,15 @@ spinbuttons {
 .spinbuttons-up,
 .spinbuttons-down {
   -moz-appearance: none !important;
-  min-width: 56px !important; /* button size */
-  min-height: 56px !important; /* button size */
+  min-width: @touch_button_small@ !important; /* button size */
+  min-height: @touch_button_small@ !important; /* button size */
   color: #000;
-  margin: 8px;
-  padding: 10px;
-  border-radius: 0px;
+  margin: @margin_normal@;
+  padding: @padding_xnormal@;
+  border-radius: 0;
   background-image: url("chrome://browser/skin/images/button-bg.png");
   background-size: auto 100%;
-  border: 1px solid #cacdd5;
+  border: @border_width_tiny@ solid #cacdd5;
   list-style-image: url("chrome://browser/skin/images/arrowdown-16.png");
 }
 
@@ -246,27 +246,32 @@ spinbuttons {
 }
 
 .spinbuttons-up {
-  border-radius: 0px 8px 8px 0px;
+  border-radius: 0 @border_radius_normal@ @border_radius_normal@ 0;
   list-style-image: url("chrome://browser/skin/images/arrowup-16.png");
 }
 
 .spinbuttons-up:-moz-locale-dir(rtl) {
-  border-radius: 8px 0px 0px 8px;
+  border-radius: @border_radius_normal@ 0 0 @border_radius_normal@;
 }
 
 /* toolbar buttons --------------------------------------------------------- */
 toolbarbutton {
-  min-width: 64px !important; /* primary button size */
-  min-height: 64px !important; /* primary button size */
+  min-width: @touch_button_large@ !important; /* primary button size */
+  min-height: @touch_button_large@ !important; /* primary button size */
   -moz-appearance: none !important;
   margin: 0;
-  padding: 2px;
+  padding: @padding_xsmall@;
 }
 
 toolbarbutton:not(.show-text) .toolbarbutton-text {
   display: none !important;
 }
 
+.toolbarbutton-icon[label]:not([label=""]),
+.toolbarbutton-icon[type="menu"] {
+  -moz-margin-end: @margin_tiny@;
+}
+
 toolbarbutton:not(.show-text) .toolbarbutton-icon,
 toolbarbutton:not([image]) .toolbarbutton-icon,
 toolbarbutton[image=''] .toolbarbutton-icon {
@@ -288,7 +293,7 @@ toolbarbutton[open="true"] {
 }
 
 .button-checkbox > .button-image-icon {
-  -moz-margin-end: 8px;
+  -moz-margin-end: @margin_normal@;
   list-style-image: url("chrome://browser/skin/images/check-unselected-30.png");
 }
 
@@ -298,10 +303,10 @@ toolbarbutton[open="true"] {
 
 .button-checkbox:hover:active > .button-box,
 .button-checkbox[checked="true"] > .button-box {
-  padding-top: 1px;
-  padding-bottom: 2px;
-  -moz-padding-start: 3px;
-  -moz-padding-end: 4px;
+  padding-top: @padding_tiny@;
+  padding-bottom: @padding_xsmall@;
+  -moz-padding-start: @margin_small@;
+  -moz-padding-end: @margin_small@;
 }
 
 /* radio buttons ----------------------------------------------------------- */
@@ -311,20 +316,20 @@ radiogroup {
 
 .radio-label {
   font-weight: normal;
-  font-size: 24px !important;
+  font-size: @font_normal@ !important;
 }
 
 radio {
   -moz-appearance: none;
-  min-width: 56px !important; /* button size */
-  min-height: 56px !important; /* button size */
+  min-width: @touch_button_small@ !important; /* button size */
+  min-height: @touch_button_small@ !important; /* button size */
   color: #000;
-  padding: 10px;
-  margin: 0px;
+  padding: @padding_xnormal@;
+  margin: 0;
   background-image: url("chrome://browser/skin/images/button-bg.png");
   background-size: auto 100%;
-  border-top: 1px solid #cacdd5;
-  border-bottom: 1px solid #cacdd5;
+  border-top: @border_width_tiny@ solid #cacdd5;
+  border-bottom: @border_width_tiny@ solid #cacdd5;
 }
 
 radio .radio-icon, radio .radio-check {
@@ -338,43 +343,43 @@ radio[selected] {
 }
 
 radio:first-child {
-  border-left: 1px solid #cacdd5;
-  border-radius: 8px 0px 0px 8px;
+  border-left: @border_width_tiny@ solid #cacdd5;
+  border-radius: @border_radius_normal@ 0 0 @border_radius_normal@;
 }
 
 radio:first-child:-moz-locale-dir(rtl) {
   border-left: none;
-  border-right: 1px solid #cacdd5;
-  border-radius: 0px 8px 8px 0px;
+  border-right: @border_width_tiny@ solid #cacdd5;
+  border-radius: 0 @border_radius_normal@ @border_radius_normal@ 0;
 }
 
 radio:last-child {
-  border-right: 1px solid #cacdd5;
-  border-radius: 0px 8px 8px 0px;
+  border-right: @border_width_tiny@ solid #cacdd5;
+  border-radius: 0 @border_radius_normal@ @border_radius_normal@ 0;
 }
 
 radio:last-child:-moz-locale-dir(rtl) {
   border-right: none;
-  border-left: 1px solid #cacdd5;
-  border-radius: 8px 0px 0px 8px;
+  border-left: @border_width_tiny@ solid #cacdd5;
+  border-radius: @border_radius_normal@ 0 0 @border_radius_normal@;
 }
 
 radio[focused="true"] > .radio-label-box {
-  border: 1px solid transparent;
+  border: @border_width_tiny@ solid transparent;
 }
 
 /* checkbox radios --------------------------------------------------------- */
 checkbox {
-  margin: 1px 5px 2px 5px; /* match platform style for buttons */
+  margin: @margin_tiny@ @margin_small@ @margin_tiny@ @margin_small@; /* match platform style for buttons */
 }
 
 radio.checkbox-radio-on:not([selected]) {
-  border-right: 1px solid #cacdd5;
+  border-right: @border_width_tiny@ solid #cacdd5;
 }
 
 radio.checkbox-radio-on:not([selected]):-moz-locale-dir(rtl) {
   border-left: none;
-  border-left: 1px solid #cacdd5;
+  border-left: @border_width_tiny@ solid #cacdd5;
 }
 
 radio.checkbox-radio-off[selected],
@@ -397,33 +402,33 @@ richlistbox {
 
 richlistitem {
   -moz-user-focus: ignore;
-  min-height: 70px; /* row size */
-  padding: 5px;
-  border-bottom: 1px solid rgb(207,207,207);
+  min-height: @touch_row@; /* row size */
+  padding: @padding_small@;
+  border-bottom: @border_width_tiny@ solid rgb(207,207,207);
 }
 
 richlistitem label.title,
 richlistitem description.title {
-  font-size: 24px !important;
+  font-size: @font_normal@ !important;
 }
 
 richlistitem label.normal,
 richlistitem description.normal {
   color: gray;
-  font-size: 18px !important;
+  font-size: @font_small@ !important;
   white-space: pre-wrap;
 }
 
 richlistitem label.normal-black,
 richlistitem description.normal-black {
-  font-size: 18px !important;
+  font-size: @font_small@  !important;
   white-space: pre-wrap;
 }
 
 richlistitem label.normal-bold,
 richlistitem description.normal-bold {
   font-weight: bold;
-  font-size: 18px !important;
+  font-size: @font_small@  !important;
   white-space: pre-wrap;
 }
 
@@ -487,27 +492,27 @@ colorpicker > vbox {
 .menulist-label {
   font-family: "Nokia Sans", Tahoma, sans-serif !important;
   font-weight: normal;
-  font-size: 24px !important;
+  font-size: @font_normal@  !important;
   background-color: transparent !important;
 }
 
 menulist {
   -moz-appearance: none !important;
   -moz-user-focus: ignore;
-  min-width: 56px !important; /* button size */
-  min-height: 56px !important; /* button size */
+  min-width: @touch_button_small@ !important; /* button size */
+  min-height: @touch_button_small@ !important; /* button size */
   color: #000 !important;
-  border-radius: 8px;
-  margin: 8px;
-  padding: 6px 10px;
+  border-radius: @border_radius_normal@;
+  margin: @margin_normal@;
+  padding: @padding_small@ @padding_xnormal@;
   background-image: url("chrome://browser/skin/images/button-bg.png");
   background-size: auto 100%;
-  border: 1px solid #cacdd5;
+  border: @border_width_tiny@ solid #cacdd5;
 }
 
 menulist[disabled="true"] {
   color: #aaa !important;
-  border: 1px solid #cacdd5 !important;
+  border: @border_width_tiny@ solid #cacdd5 !important;
 }
 
 menulist:not([disabled="true"]):hover:active {
@@ -515,9 +520,9 @@ menulist:not([disabled="true"]):hover:active {
 }
 
 menulist > dropmarker {
-  height: 42px;
-  width: 42px;
-  margin-left: 5px;
+  height: 32px;
+  width: 32px;
+  margin-left: @margin_snormal@;
   background-color: transparent; /* for windows */
   border: none;                  /* for windows */
   -moz-box-align: center;
@@ -534,14 +539,14 @@ menulist[disabled="true"] > dropmarker {
 /* progressmeter ----------------------------------------------------------- */
 progressmeter {
   background-color: #fff;
-  padding: 4px;
-  height: 32px;
-  border: 3px solid #aaa;
+  padding: @padding_small@;
+  height: @textbox_height@;
+  border: @border_width_large@ solid #aaa;
   -moz-border-top-colors: -moz-initial;
   -moz-border-right-colors: -moz-initial;
   -moz-border-bottom-colors: -moz-initial;
   -moz-border-left-colors: -moz-initial;
-  -moz-border-radius: 8px;
+  -moz-border-radius: @border_radius_normal@;
 }
 
 .progress-bar {
@@ -562,28 +567,28 @@ arrowbox {
 
 .panel-arrow[side="top"] {
   list-style-image: url("chrome://browser/skin/images/arrowbox-up.png");
-  margin-bottom: -8px;
+  margin-bottom: -@margin_normal@;
 }
 
 .panel-arrow[side="bottom"] {
   list-style-image: url("chrome://browser/skin/images/arrowbox-down.png");
-  margin-top: -8px;
+  margin-top: -@margin_normal@;
 }
 
 .panel-arrow[side="left"] {
   list-style-image: url("chrome://browser/skin/images/arrowbox-horiz.png");
-  margin-right: -8px;
+  margin-right: -@margin_normal@;
   -moz-transform: scaleX(-1);
 }
 
 .panel-arrow[side="right"] {
   list-style-image: url("chrome://browser/skin/images/arrowbox-horiz.png");
-  margin-left: -8px;
+  margin-left: -@margin_normal@;
 }
 
 /*.panel-row-header ------------------------------------------------------------ */
 .panel-row-header {
-  border-bottom: 4px solid rgb(101,121,227);
+  border-bottom: @border_width_xlarge@ solid rgb(101,121,227);
   background-color: rgb(94,97,102);
   padding: 0 !important;
 }
@@ -593,13 +598,13 @@ arrowbox {
   background: rgb(94,97,102) url(images/panelrow-default-hdpi.png) no-repeat;
   background-size: 100% 100%;
   color: white;
-  border: 0px solid transparent !important;
-  -moz-border-start: 1px solid rgba(255,255,255,0.2) !important;
-  -moz-border-end: 1px solid rgba(0,0,0,0.2) !important;
-  padding-top: 3px !important;
-  padding-bottom: 3px !important;
-  -moz-padding-start: 2px !important;
-  -moz-padding-end: 2px !important;
+  border: 0 solid transparent !important;
+  -moz-border-start: @border_width_tiny@ solid rgba(255,255,255,0.2) !important;
+  -moz-border-end: @border_width_tiny@ solid rgba(0,0,0,0.2) !important;
+  padding-top: @padding_xsmall@ !important;
+  padding-bottom: @padding_xsmall@ !important;
+  -moz-padding-start: @padding_xsmall@ !important;
+  -moz-padding-end: @padding_xsmall@ !important;
   -moz-box-flex: 1;
   -moz-user-focus: ignore;
   -moz-user-select: none;
@@ -618,19 +623,19 @@ arrowbox {
   -moz-border-end-width: 0 !important;
 }
 
-@media (max-width: 499px) {
+@media (@orientation@: portrait) {
   .panel-row-button {
     -moz-box-orient: vertical;
   }
 
   .panel-row-button .toolbarbutton-text {
-    font-size: 16px !important;
+    font-size: @font_xsmall@ !important;
   }
 }
 
 .panel-row-button .toolbarbutton-text {
   text-align: left;
-  text-shadow: rgba(0,0,0,0.3) 0 2px;
+  text-shadow: rgba(0,0,0,0.3) 0 @shadow_width_small@;
 }
 
 .panel-row-button .toolbarbutton-text:-moz-locale-dir(rtl) {