Copy various bits from gaia

158 files changed, 5455 insertions, 0 deletions

diff --git a/apps/system/style/accessibility/accessibility.css b/apps/system/style/accessibility/accessibility.css
new file mode 100644
index 0000000..abb145a
--- /dev/null
+++ b/apps/system/style/accessibility/accessibility.css
@@ -0,0 +1,3 @@
+.accessibility-invert {
+  filter: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxmaWx0ZXIKICAgICAgaWQ9ImludmVydEZpbHRlciIKICAgICAgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KICAgIDxmZUNvbG9yTWF0cml4CiAgICAgICAgdmFsdWVzPSItMSAwIDAgMCAxIDAgLTEgMCAwIDEgMCAwIC0xIDAgMSAwIDAgMCAxIDAgIiAvPgogIDwvZmlsdGVyPgo8L3N2Zz4K#invertFilter);
+}
diff --git a/apps/system/style/app_install_manager/app_install_manager.css b/apps/system/style/app_install_manager/app_install_manager.css
new file mode 100644
index 0000000..d657216
--- /dev/null
+++ b/apps/system/style/app_install_manager/app_install_manager.css
@@ -0,0 +1,98 @@
+/* dialog */
+/* FIXME we have to see why we need such specific style here and why
+ * the general style in confirm.css isn't sufficient */
+#app-install-dialog,
+#app-install-cancel-dialog,
+#app-download-cancel-dialog {
+  display: none;
+  position: absolute;
+  top: 20px;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  pointer-events: none;
+}
+
+#app-install-dialog.visible,
+#app-install-cancel-dialog.visible,
+#app-download-cancel-dialog.visible {
+  display: inline-block;
+  pointer-events: auto;
+}
+
+#app-install-dialog section,
+#app-install-cancel-dialog section,
+#app-download-cancel-dialog section {
+  height: auto;
+}
+
+#app-install-dialog h1,
+#app-install-cancel-dialog h1,
+#app-download-cancel-dialog h1 {
+  border-bottom: none;
+  background: none;
+}
+
+#app-install-dialog table {
+  border-top: 0.1rem solid #686868;
+  margin: 1rem 0 0;
+  overflow: hidden;
+  padding-top: 1rem;
+  font-size: 1.4rem;
+  width: 100%;
+}
+
+#app-install-dialog table th {
+  text-align: left;
+  margin-right: 0.5rem;
+}
+
+#app-install-dialog table td {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#app-install-cancel-dialog small:first-child {
+  margin-bottom: 1rem;
+}
+/* ... end of dialog */
+
+/* notification */
+#install-manager-notification-container > .fake-notification {
+  padding: 10px 10px 10px 60px;
+  -moz-box-sizing: border-box;
+
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  background-image: url(images/downloads.png);
+}
+
+#install-manager-notification-container > .fake-notification > * {
+  pointer-events: none;
+}
+
+#install-manager-notification-container progress {
+  width: 100%;
+  height: 4px;
+
+  border: none;
+}
+
+#install-manager-notification-container progress::-moz-progress-bar {
+  background: #ec860f;
+  border-bottom: 1px solid #b96100;
+  border-top: 2px solid #e67200;
+}
+
+#install-manager-notification-container progress:indeterminate::-moz-progress-bar {
+  background: url(../shared/progress.gif) #f2aa56;
+  border: none;
+}
+
+#install-manager-notification-container .message {
+  line-height: 20px;
+  font-weight: 700;
+  font-size: 1.6rem;
+}
+
+/* ... end of notification */
diff --git a/apps/system/style/app_install_manager/images/downloads.png b/apps/system/style/app_install_manager/images/downloads.png
new file mode 100644
index 0000000..8a5dcb7
--- /dev/null
+++ b/apps/system/style/app_install_manager/images/downloads.png
diff --git a/apps/system/style/attention_screen.css b/apps/system/style/attention_screen.css
new file mode 100644
index 0000000..126d52e
--- /dev/null
+++ b/apps/system/style/attention_screen.css
@@ -0,0 +1,57 @@
+#attention-screen {
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: none;
+
+  transition: transform 0.5s ease;
+}
+
+#attention-screen.displayed {
+  display: block;
+}
+
+#screen.active-statusbar #attention-screen {
+  transform: translateY(calc(-100% + 40px));
+}
+
+#screen.active-statusbar #attention-screen.status-mode {
+  height: 40px;
+  transform: translateY(0px);
+  transition: none;
+}
+
+#attention-screen.status-mode > iframe {
+  margin-top: 0;
+  height: 100%;
+}
+
+#attention-screen > iframe {
+  border: 0;
+  width: 100%;
+  /* we have the 20px status bar on top */
+  height: calc(100% - 20px);
+  margin-top: 20px;
+
+  background-color: transparent;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+#attention-screen > #attention-bar {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  /* Status bar height * 2 */
+  height: 40px;
+  z-index: 2;
+  display: none;
+}
+
+#screen.active-statusbar #attention-screen > #attention-bar {
+  display: block;
+}
diff --git a/apps/system/style/battery_manager/battery_manager.css b/apps/system/style/battery_manager/battery_manager.css
new file mode 100644
index 0000000..5a7a530
--- /dev/null
+++ b/apps/system/style/battery_manager/battery_manager.css
@@ -0,0 +1,55 @@
+#system-overlay.battery {
+  visibility: visible;
+}
+
+#system-overlay.battery #battery {
+  display: block;
+}
+
+#battery {
+  display: none;
+  background-image: url('images/header_bg.png');
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 45px;
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+.icon-battery {
+  display: block;
+  float: left;
+
+  width: 42px;
+  height: 18px;
+  margin: 0 1.3rem;
+
+  background-image: url('images/battery_empty_small.png');
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+#battery span {
+  vertical-align: middle;
+  height: 45px;
+  line-height: 45px;
+}
+
+.battery-notification {
+  display: inline-block;
+}
+
+#battery.disappearing {
+  animation: notification-disappear 1.5s;
+}
+
+@keyframes notification-disappear {
+  to {
+    transform: translateX(100%);
+  }
+  from {
+    transform: translateX(0);
+  }
+}
diff --git a/apps/system/style/battery_manager/images/battery_empty_small.png b/apps/system/style/battery_manager/images/battery_empty_small.png
new file mode 100644
index 0000000..2075e0c
--- /dev/null
+++ b/apps/system/style/battery_manager/images/battery_empty_small.png
diff --git a/apps/system/style/battery_manager/images/header_bg.png b/apps/system/style/battery_manager/images/header_bg.png
new file mode 100644
index 0000000..e1ff073
--- /dev/null
+++ b/apps/system/style/battery_manager/images/header_bg.png
diff --git a/apps/system/style/bb/value_selector.css b/apps/system/style/bb/value_selector.css
new file mode 100644
index 0000000..dd120ef
--- /dev/null
+++ b/apps/system/style/bb/value_selector.css
@@ -0,0 +1,221 @@
+/* ----------------------------------
+ * Value selector (Single & Multiple)
+ * ---------------------------------- */
+
+/* Main dialog setup */
+form[role="dialog"] {
+  background: url(value_selector/images/ui/pattern.png) repeat left top, url(value_selector/images/ui/gradient.png) no-repeat left top;
+  background-size: auto auto, 100% 100%;
+  /* We can't use shortand with background size because is not implemented yet:
+  https://bugzilla.mozilla.org/show_bug.cgi?id=570326; */
+  overflow: hidden;
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0 0 7rem;
+  font-family: "MozTT", Sans-serif;
+  font-size: 0;
+  /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
+  created by white-spaces and break lines in the code betewen inline-block elements */
+  color: #fff;
+}
+
+form[role="dialog"]:before {
+  content: "";
+  display: inline-block;
+  vertical-align: top;
+  width: 1px;
+  height: 100%;
+  margin-left: -1px;
+}
+
+form[role="dialog"] > section {
+  padding: 0 1.5rem 0;
+  -moz-box-sizing: padding-box;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  white-space: normal;
+}
+
+form[role="dialog"] h1 {
+  font: 1.6rem/1em 'MozTT', Sans-serif;
+  color: #fff;
+  border-bottom: 0.1rem solid #616262;
+  background: url(value_selector/images/ui/alpha.png) repeat 0 0;
+  margin: 0 -1.5rem;
+  padding: 2.5rem 3rem 1rem;
+}
+
+/* Menu & buttons setup */
+form[role="dialog"] menu {
+  white-space: nowrap;
+  margin: 0;
+  padding: 1.5rem;
+  border-top: solid 1px rgba(255, 255, 255, 0.1);
+  background: #2d2d2d url(value_selector/images/ui/pattern.png) repeat left top;
+  display: block;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+form[role="dialog"] menu button {
+  width: 100%;
+  height: 3.8rem;
+  margin: 0 0 1rem;
+  padding: 0 1.5rem;
+  -moz-box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  border-radius: 0.3rem;
+  outline: none;
+  border: none;
+  font-size: 1.6rem;
+  font-family: 'MozTT', Sans-serif;
+  font-weight: 600;
+  line-height: 3.8rem;
+  color: #fff;
+  text-shadow: -1px -1px 0 #830b0b;
+  text-align: center;
+  text-decoration: none;
+}
+
+/* Reset & submit defaults */
+form[role="dialog"] menu button[type="reset"],
+form[role="dialog"] menu button[type="submit"] {
+  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
+  color: #333;
+}
+
+/* Reset */
+form[role="dialog"] menu button[type="reset"] {
+  background-image: url(value_selector/images/ui/button_reset.png);
+  background-color: #fafafa;
+  border: solid 1px #9f9f9f;
+}
+
+/* Submit */
+form[role="dialog"] menu button[type="submit"] {
+  background-image: url(value_selector/images/ui/button_submit.png) ;
+  background-color: #00caf2;
+  border: 1px solid #00acce;
+}
+
+/* Pressed state, reset & submit */
+form[role="dialog"] menu button[type="reset"]:active,
+form[role="dialog"] menu button[type="submit"]:active {
+  border: solid 1px #008aaa;
+  background: #008aaa;
+  color: #333;
+}
+
+/* Disabled, reset & submit) */
+form[role="dialog"] menu button[type="reset"][disabled],
+form[role="dialog"] menu button[type="submit"][disabled] {
+  background-image: url(value_selector/images/ui/button_special_disabled.png);
+  background-color: transparent;
+  border: none;
+  color: #4a4a4a;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+form[role="dialog"] menu button:last-child {
+  margin-left: 1rem;
+}
+
+form[role="dialog"] menu button,
+form[role="dialog"] menu button:first-child {
+  margin: 0;
+}
+
+form[role="dialog"] menu button {
+  width: -moz-calc((100% - 1rem) / 2);
+}
+
+form[role="dialog"] menu button.full {
+  width: 100%;
+}
+
+/* Specific component code */
+form[role="dialog"] [role="listbox"] {
+  position: relative;
+  padding: 0 1.5rem;
+  margin: 0 -1.5rem;
+  max-height: calc(100% - 5rem);
+  overflow: auto;
+  border-top: solid 0.1rem #222323;
+}
+
+form[role="dialog"] .scrollable:before {
+  content: "";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  top: 5.2rem;
+  left: 0;
+  right: 0;
+  bottom: 6.9rem;
+  background: url(value_selector/images/ui/shadow.png) repeat-x left top, url(value_selector/images/ui/shadow-invert.png) repeat-x left bottom;
+}
+
+form[role="dialog"] [role="listbox"] li {
+  margin: 0;
+  padding-bottom: 1px;
+  height: 5.9rem;
+  list-style: none;
+  position: relative;
+  border-bottom: 1px solid #666;
+  font-weight: lighter;
+  font-size: 2.2rem;
+  line-height: 5.9rem;
+  color: #fff;
+  transition: background 0.2s ease;
+}
+
+form[role="dialog"] [role="listbox"] li span {
+  padding: 0 1.5rem;
+}
+
+form[role="dialog"] [role="listbox"] li:active,
+form[role="dialog"] [role="listbox"] li:active label span {
+  background: #00ABCC;
+  color: #fff!important;
+}
+
+form[role="dialog"] [role="listbox"] li input {
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+form[role="dialog"] [role="listbox"] li input:checked + span,
+form[role="dialog"] [role="listbox"] li[aria-checked="true"] span {
+  color: #00abcd;
+  background: url(value_selector/images/icons/checked.png) content-box right center no-repeat;
+}
+
+form[role="dialog"] [role="listbox"] li a,
+form[role="dialog"] [role="listbox"] li label {
+  border-bottom: 1px solid #000;
+  outline: none;
+}
+
+form[role="dialog"] [role="listbox"] li a,
+form[role="dialog"] [role="listbox"] li label,
+form[role="dialog"] [role="listbox"] li label span {
+  text-decoration: none;
+  display: block;
+  color: #fff;
+}
diff --git a/apps/system/style/bb/value_selector/images/icons/checked.png b/apps/system/style/bb/value_selector/images/icons/checked.png
new file mode 100644
index 0000000..69d5c3d
--- /dev/null
+++ b/apps/system/style/bb/value_selector/images/icons/checked.png
diff --git a/apps/system/style/bb/value_selector/images/ui/alpha.png b/apps/system/style/bb/value_selector/images/ui/alpha.png
new file mode 100644
index 0000000..d7d89aa
--- /dev/null
+++ b/apps/system/style/bb/value_selector/images/ui/alpha.png
diff --git a/apps/system/style/bb/value_selector/images/ui/button_reset.png b/apps/system/style/bb/value_selector/images/ui/button_reset.png
new file mode 100644
index 0000000..1080862
--- /dev/null
+++ b/apps/system/style/bb/value_selector/images/ui/button_reset.png
diff --git a/apps/system/style/bb/value_selector/images/ui/button_special_disabled.png b/apps/system/style/bb/value_selector/images/ui/button_special_disabled.png
new file mode 100644
index 0000000..8a93c42
--- /dev/null
+++ b/apps/system/style/bb/value_selector/images/ui/button_special_disabled.png
diff --git a/apps/system/style/bb/value_selector/images/ui/button_submit.png b/apps/system/style/bb/value_selector/images/ui/button_submit.png
new file mode 100644
index 0000000..a42b1e8
--- /dev/null
+++ b/apps/system/style/bb/value_selector/images/ui/button_submit.png
diff --git a/apps/system/style/bb/value_selector/images/ui/gradient.png b/apps/system/style/bb/value_selector/images/ui/gradient.png
new file mode 100644
index 0000000..b288545
--- /dev/null
+++ b/apps/system/style/bb/value_selector/images/ui/gradient.png
diff --git a/apps/system/style/bb/value_selector/images/ui/pattern.png b/apps/system/style/bb/value_selector/images/ui/pattern.png
new file mode 100644
index 0000000..af03f56
--- /dev/null
+++ b/apps/system/style/bb/value_selector/images/ui/pattern.png
diff --git a/apps/system/style/bb/value_selector/images/ui/shadow-invert.png b/apps/system/style/bb/value_selector/images/ui/shadow-invert.png
new file mode 100644
index 0000000..604e6ae
--- /dev/null
+++ b/apps/system/style/bb/value_selector/images/ui/shadow-invert.png
diff --git a/apps/system/style/bb/value_selector/images/ui/shadow.png b/apps/system/style/bb/value_selector/images/ui/shadow.png
new file mode 100644
index 0000000..9bc7bd5
--- /dev/null
+++ b/apps/system/style/bb/value_selector/images/ui/shadow.png
diff --git a/apps/system/style/bluetooth_transfer/bluetooth_transfer.css b/apps/system/style/bluetooth_transfer/bluetooth_transfer.css
new file mode 100644
index 0000000..1ae60d5
--- /dev/null
+++ b/apps/system/style/bluetooth_transfer/bluetooth_transfer.css
@@ -0,0 +1,53 @@
+#bluetooth-transfer-status {
+  position: relative;
+  border-top-color: black;
+
+/*  display: none;*/
+}
+
+#bluetooth-transfer-status.displayed {
+  display: block;
+}
+
+#bluetooth-transfer-status.applying .bluetooth-transfer-progress {
+/*  display: none;*/
+}
+
+#bluetooth-transfer-status .bluetooth-transfer-progress {
+  display: block;
+  width: auto;
+  margin-right: 1.5rem;
+}
+
+#bluetooth-transfer-status progress {
+  position: absolute;
+  top: 35px;
+  left: 50px;
+  width: -moz-calc(100% - 105px);
+  height: 10px;
+  padding: 0;
+
+  border: 0;
+  border-radius: 10px;
+}
+
+#bluetooth-transfer-status.applying progress {
+/*  display: none;*/
+}
+
+#bluetooth-transfer-status progress::-moz-progress-bar {
+  border-radius: 10px;
+  background-color: #52b6cc;
+}
+
+#bluetooth-transfer-status.applying .icon {
+  background-image: url('images/spinner.png');
+
+  animation: spin 1.75s infinite linear;
+  transform-origin : center center;
+}
+
+@-moz-keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
diff --git a/apps/system/style/bluetooth_transfer/images/icon_bluetooth.png b/apps/system/style/bluetooth_transfer/images/icon_bluetooth.png
new file mode 100644
index 0000000..90b56bf
--- /dev/null
+++ b/apps/system/style/bluetooth_transfer/images/icon_bluetooth.png
diff --git a/apps/system/style/bluetooth_transfer/images/transfer.png b/apps/system/style/bluetooth_transfer/images/transfer.png
new file mode 100644
index 0000000..904f6ad
--- /dev/null
+++ b/apps/system/style/bluetooth_transfer/images/transfer.png
diff --git a/apps/system/style/cards_view/cards_view.css b/apps/system/style/cards_view/cards_view.css
new file mode 100644
index 0000000..fe90264
--- /dev/null
+++ b/apps/system/style/cards_view/cards_view.css
@@ -0,0 +1,115 @@
+#cards-view {
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: opacity 0.5s ease, visibility 0.5s ease;
+  opacity: 0;
+  -moz-user-select: none;
+  overflow: scroll;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+#cards-view.active {
+  visibility: inherit;
+  opacity: 1;
+}
+
+#cards-view ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
+  text-align: center;
+}
+
+#cards-view .card {
+  display: inline-block;
+  width: 100%;
+  height: -moz-calc(100% - 20px);
+  margin: 0;
+  margin-top: 20px;
+  margin-left: -25%;
+  position: relative;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+  transform: scale(0.6);
+}
+
+#cards-view .card h1 {
+  position: absolute;
+  top: 1.5rem;
+  left: 1rem;
+  z-index: 99999;
+  text-align: left;
+  font-size: 3.5rem;
+  font-weight: 300;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+}
+
+#cards-view .card header {
+  top: 1.5rem;
+}
+
+#cards-view .card[data-edit='true'] {
+  position: relative;
+  opacity: 0.8;
+  z-index: 99999;
+}
+
+#cards-view .card:first-child {
+  position: absolute;
+  margin-left: 0;
+}
+
+#cards-view .card:only-child {
+  margin-left: -50%;
+}
+
+#cards-view .card:nth-child(2) {
+  margin-left: 75%;
+}
+
+#cards-view .card > *:not(.close-card) {
+  pointer-events: none;
+}
+
+#cards-view .card > h1 {
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  line-height: 4rem;
+}
+
+#cards-view .card > p {
+  position: absolute;
+  top: -moz-calc(100% + 4rem);
+  width: 100%;
+  font-size: 2rem;
+}
+
+#cards-view .card > img.appIcon {
+  position: relative;
+  height: 8rem;
+  width: 8rem;
+  border-radius: .6rem;
+  top: 50%;
+  margin-top: -4rem;
+}
+
+#cards-view .close-card {
+  position: absolute;
+  top: -1rem;
+  left: -1rem;
+  z-index: 99999;
+  height: 2.6rem;
+  width: 2.6rem;
+  background: url(close.png) no-repeat center center;
+  transform: scale(1.7);
+}
diff --git a/apps/system/style/cards_view/close.png b/apps/system/style/cards_view/close.png
new file mode 100644
index 0000000..de1f82d
--- /dev/null
+++ b/apps/system/style/cards_view/close.png
diff --git a/apps/system/style/cost_control/cost_control.css b/apps/system/style/cost_control/cost_control.css
new file mode 100644
index 0000000..e39e6f9
--- /dev/null
+++ b/apps/system/style/cost_control/cost_control.css
@@ -0,0 +1,14 @@
+/* Resetting */
+#cost-control-widget, 
+#cost-control-widget iframe {
+  width: 100%;
+  height: 4.5rem;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+#cost-control-widget iframe {
+  position: absolute;
+  top: 0;
+}
diff --git a/apps/system/style/crash_reporter/crash_reporter.css b/apps/system/style/crash_reporter/crash_reporter.css
new file mode 100644
index 0000000..1508708
--- /dev/null
+++ b/apps/system/style/crash_reporter/crash_reporter.css
@@ -0,0 +1,43 @@
+#crash-dialog h1 {
+  border-bottom: none;
+}
+
+#crash-dialog p {
+  overflow: visible;
+}
+
+#crash-dialog p:not(:first-of-type) {
+  border-top: none;
+}
+
+#crash-dialog  a {
+  text-decoration: underline;
+  margin-top: 2rem;
+}
+
+#crash-dialog.learn-more > form {
+  display: none;
+}
+
+#crash-dialog:not(.learn-more) > section {
+  display: none;
+}
+
+/* "Crash Reports" information page */
+#crash-dialog > section {
+  font-family: "MozTT", Sans-serif;
+  background-color: #fff;
+  color: #000;
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+#crash-dialog > section > p {
+  padding: 1rem 3rem;
+  font-size: 1.5rem;
+  white-space: normal;
+}
diff --git a/apps/system/style/fake-notification.css b/apps/system/style/fake-notification.css
new file mode 100644
index 0000000..1250945
--- /dev/null
+++ b/apps/system/style/fake-notification.css
@@ -0,0 +1,9 @@
+.fake-notification {
+  position: relative;
+  height: 60px;
+
+  background-color: rgba(0, 0, 0, 0.5);
+  border-top: 1px black solid;
+  border-bottom: 1px black solid;
+}
+
diff --git a/apps/system/style/gridview/gridview.css b/apps/system/style/gridview/gridview.css
new file mode 100644
index 0000000..e94dd88
--- /dev/null
+++ b/apps/system/style/gridview/gridview.css
@@ -0,0 +1,11 @@
+#debug-grid {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: url('./images/grid.png');
+  opacity: 0.2;
+  pointer-events: none;
+}
diff --git a/apps/system/style/gridview/images/grid.png b/apps/system/style/gridview/images/grid.png
new file mode 100644
index 0000000..d0aaefc
--- /dev/null
+++ b/apps/system/style/gridview/images/grid.png
diff --git a/apps/system/style/icons/voicemail.png b/apps/system/style/icons/voicemail.png
new file mode 100644
index 0000000..e132699
--- /dev/null
+++ b/apps/system/style/icons/voicemail.png
diff --git a/apps/system/style/list_menu/images/header-left-arrow.png b/apps/system/style/list_menu/images/header-left-arrow.png
new file mode 100644
index 0000000..03ec792
--- /dev/null
+++ b/apps/system/style/list_menu/images/header-left-arrow.png
diff --git a/apps/system/style/list_menu/images/header-right-arrow.png b/apps/system/style/list_menu/images/header-right-arrow.png
new file mode 100644
index 0000000..5cd5ee6
--- /dev/null
+++ b/apps/system/style/list_menu/images/header-right-arrow.png
diff --git a/apps/system/style/list_menu/list_menu.css b/apps/system/style/list_menu/list_menu.css
new file mode 100644
index 0000000..63a2ced
--- /dev/null
+++ b/apps/system/style/list_menu/list_menu.css
@@ -0,0 +1,35 @@
+#listmenu {
+  visibility: hidden;
+}
+
+#listmenu.visible {
+  visibility: visible;
+}
+
+#listmenu menu,
+#listmenu.visible menu.slidedown {
+  transition: transform 0.3s ease;
+  transform: translateY(100%);
+}
+
+#listmenu.visible menu {
+  transform: translateY(0);
+}
+
+#listmenu menu button.icon,
+#listmenu menu a[role="button"].icon {
+  background-repeat: no-repeat;
+  background-position: 10px center;
+  padding-left: 45px;
+  background-size: 30px 30px;
+}
+
+/* 320x480 phones */
+@media (orientation: portrait) and (width: 320px),
+       (orientation: landscape) and (width: 480px) {
+  #listmenu menu button.icon,
+  #listmenu menu a[role="button"].icon {
+    background-position: 5px center;
+    padding-left: 40px;
+  }
+}
diff --git a/apps/system/style/lockscreen/images/handle.png b/apps/system/style/lockscreen/images/handle.png
new file mode 100644
index 0000000..503f86f
--- /dev/null
+++ b/apps/system/style/lockscreen/images/handle.png
diff --git a/apps/system/style/lockscreen/images/icon-camera.png b/apps/system/style/lockscreen/images/icon-camera.png
new file mode 100644
index 0000000..6346a09
--- /dev/null
+++ b/apps/system/style/lockscreen/images/icon-camera.png
diff --git a/apps/system/style/lockscreen/images/icon-clear.png b/apps/system/style/lockscreen/images/icon-clear.png
new file mode 100644
index 0000000..0e54b75
--- /dev/null
+++ b/apps/system/style/lockscreen/images/icon-clear.png
diff --git a/apps/system/style/lockscreen/images/icon-unlock.png b/apps/system/style/lockscreen/images/icon-unlock.png
new file mode 100644
index 0000000..4bb87a9
--- /dev/null
+++ b/apps/system/style/lockscreen/images/icon-unlock.png
diff --git a/apps/system/style/lockscreen/images/mask.png b/apps/system/style/lockscreen/images/mask.png
new file mode 100644
index 0000000..e1b8cf5
--- /dev/null
+++ b/apps/system/style/lockscreen/images/mask.png
diff --git a/apps/system/style/lockscreen/images/mute.png b/apps/system/style/lockscreen/images/mute.png
new file mode 100644
index 0000000..46e1019
--- /dev/null
+++ b/apps/system/style/lockscreen/images/mute.png
diff --git a/apps/system/style/lockscreen/lockscreen.css b/apps/system/style/lockscreen/lockscreen.css
new file mode 100644
index 0000000..aadd881
--- /dev/null
+++ b/apps/system/style/lockscreen/lockscreen.css
@@ -0,0 +1,623 @@
+#lockscreen {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #000;
+
+  -moz-user-select: none;
+
+  opacity: 1;
+
+  transition:
+    transform 0.5s ease,
+    opacity 0.5s ease,
+    visibility 0.5s ease;
+}
+
+#screen.active-statusbar > #lockscreen {
+  top: 40px;
+  height: calc(100% - 40px);
+}
+
+#screen:not(.locked) > #lockscreen,
+#screen.lockscreen-camera > #lockscreen {
+  transform: scale(2);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+
+  transition-delay: 0.3s;
+}
+
+#screen.screenoff > #lockscreen,
+#screen.screenoff > #lockscreen * {
+  transition: none;
+}
+
+#screen.lockscreen-camera > #lockscreen-camera {
+  visibility: visible;
+}
+
+/* When switching lock-camera off,
+ * transition time should be delayed to prevent homescreen appears.
+ * (Let lockscreen appears first)                                   */
+#screen:not(.lockscreen-camera) > #lockscreen-camera {
+  transition-delay: 0.3s;
+}
+
+#lockscreen-camera {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+
+  visibility: hidden;
+}
+
+#lockscreen-camera > iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+#lockscreen.uninit > * {
+  display: none;
+}
+
+#lockscreen.no-transition {
+  transition: none;
+}
+
+#lockscreen-container {
+  width: 100%;
+  height: 100%;
+
+  /**
+   * Workaround bug 823418 by trigger a repaint as soon as .screenoff class
+   * is removed, remove me when the bug is fixed.
+   */
+  transition: opacity 0.1s ease;
+}
+
+/**
+ * Workaround bug 823418 by trigger a repaint as soon as .screenoff class
+ * is removed, remove me when the bug is fixed.
+ */
+.screenoff #lockscreen-container {
+  opacity: 0.99;
+}
+
+.lockscreen-wallpaper {
+  position: absolute;
+}
+
+.lockscreen-panel {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  visibility: hidden;
+  transition: visibility 0.5s ease, transform 0.5s ease;
+}
+
+[data-panel="main"] #lockscreen-panel-main,
+[data-panel="passcode"] #lockscreen-panel-passcode,
+[data-panel="emergency-call"] #lockscreen-panel-emergency-call {
+  visibility: inherit;
+}
+
+[data-panel="emergency-call"] #lockscreen-panel-main {
+  transform: translateX(-100%);
+}
+
+#lockscreen h2 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 10rem;
+  margin: 0;
+  padding: 2.5rem 2.8rem;
+  -moz-box-sizing: border-box;
+  font-size: 3.2rem;
+  font-weight: normal;
+  line-height: 3.2rem;
+  text-shadow: 0 0 3px #333;
+
+  transform: translateY(-10rem);
+  transition: transform 0.3s ease;
+}
+
+#lockscreen-header {
+  z-index: 9999;
+  position: absolute;
+  top: 2rem;   /* 2rem = height of status bar */
+  left: 0;
+  width: 100%;
+  -moz-box-sizing: border-box;
+  padding: 1.8rem 2.5rem 1.2rem 2.5rem;
+  color: #fff;
+  text-shadow: 0 0 3px #333;
+  transform: translateY(-10rem);
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  opacity: 1;
+}
+
+[data-panel="passcode"] #lockscreen-header {
+  transform: translateY(0);
+  opacity: 0;
+}
+
+[data-panel="main"] #lockscreen-header {
+  transform: translateY(0);
+}
+
+[data-panel="camera"] #lockscreen-header,
+[data-panel="emergency-call"] #lockscreen-header {
+  transform: translateY(0);
+  transition: none;
+}
+
+#lockscreen-connstate {
+  width: 100%;
+  display: inline-block;
+  font-family: 'MozTT', sans-serif;
+  font-weight: 400;
+  font-size: calc(6 * 0.226rem);
+  text-shadow: 1px 1px 3px #000000;
+
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+#lockscreen-connstate > span {
+  display: block;
+  padding-bottom: 1rem;
+  border-bottom: solid 1px rgba(256,256,256,.4);
+}
+
+#lockscreen-connstate > span:empty {
+  display: none;
+}
+
+#lockscreen-connstate.twolines > span:first-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+/* For some reason display: inline-block disregards hidden attribute */
+#lockscreen-connstate[hidden] {
+  display: none;
+}
+
+#lockscreen-mute {
+  float: right;
+  width: 4rem;
+  height: 4rem;
+  margin-top: 3.5rem;
+
+  background: transparent url('./images/mute.png') center center no-repeat;
+}
+
+#lockscreen-mute.vibration {
+  background: transparent url('./images/vibration.png') center center no-repeat;
+}
+
+.lockscreen-clock {
+  margin: -0.8rem 0 -1rem -0.4rem;
+  font-weight: 300;
+}
+
+#lockscreen-clock-numbers {
+  font-size: calc(28 * 0.226rem);
+}
+
+#lockscreen-clock-meridiem {
+  font-size: calc(17 * 0.226rem);
+}
+
+#lockscreen-date {
+  font-weight: 400;
+  font-size: calc(7 * 0.226rem);
+}
+
+.lockscreen-clock, #lockscreen-date {
+  font-family: 'MozTT', sans-serif;
+  text-shadow: 1px 1px 3px #000000;
+  color: #fff;
+}
+
+#lockscreen-area {
+  position: absolute;
+  height: 11.2rem;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.lockscreen-icon-area {
+  width: calc(50%);
+  height: 12rem;
+  position: absolute;
+  border-style: none;
+  opacity: 0.1;
+  transition: opacity 0.5s ease;
+}
+
+.lockscreen-icon {
+  margin-top: 2rem;
+  border-radius: 3rem;
+  width: 6rem;
+  height: 6rem;
+  background-color: rgba(0, 0, 0, 0.3);
+  -moz-box-sizing: border-box;
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  pointer-events: none;
+}
+
+.lockscreen-icon-area:active > .lockscreen-icon {
+  background-color: rgb(0, 138, 170);
+}
+
+.touched .lockscreen-icon {
+  transition: none;
+}
+
+.lockscreen-icon-a11y-button {
+  width: 100%;
+  height: 100%;
+  border-width: inherit;
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+.lockscreen-icon-a11y-button * {
+  display: none;
+}
+
+.lockscreen-icon.triggered {
+  background-color: #52b6cc !important;
+  border-color: #52b6cc;
+}
+
+.lockscreen-icon-right {
+  right: 0;
+}
+
+.lockscreen-icon-left {
+  left: 0;
+}
+
+button::-moz-focus-inner {
+  border: 0;
+}
+
+:-moz-any(.touched, .triggered, #screen:not(.locked), #screen.attention, #lockscreen:not([data-panel="main"]))
+:-moz-any(#lockscreen-left-arrow, #lockscreen-right-arrow) {
+  display: none;
+  animation: none;
+}
+
+.lockscreen-icon-right > .lockscreen-icon {
+  margin-right: 4rem;
+  margin-left: auto;
+}
+
+.lockscreen-icon-left > .lockscreen-icon {
+  margin-left: 4rem;
+  margin-right: auto;
+}
+
+#lockscreen-area-unlock > div {
+  background-image: url('./images/icon-unlock.png');
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+#lockscreen-area-camera > div {
+  background-image: url('./images/icon-camera.png');
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[data-panel="emergency-call"] #lockscreen-panel-passcode {
+  transform: translateX(-100%);
+}
+
+[data-panel="passcode"] h2#lockscreen-passcode-status {
+  visibility: inherit;
+  transform: none;
+}
+
+[data-panel="emergency-call"] h2#lockscreen-passcode-status {
+  transition-delay: 0.5s;
+}
+
+#lockscreen-passcode-code {
+  position: absolute;
+  bottom: 21.4rem;
+  height: 7rem;
+  width: 100%;
+  background-color: rgba(49, 60, 70, 0.9);
+  margin: 0;
+  padding: 0 1rem;
+  -moz-box-sizing: border-box;
+  border-top: 1px solid #525050;
+  visibility: hidden;
+  transform: translateY(calc(21.4rem + 7.2rem));
+  transition: visibility 0.3s ease, transform 0.3s ease;
+}
+
+[data-passcode-status="success"] #lockscreen-passcode-pad,
+[data-passcode-status="success"] #lockscreen-passcode-code {
+  transform: translateY(calc(21.4rem + 7.2rem)) !important;
+}
+
+[data-passcode-status="success"] #lockscreen-passcode-status {
+  transform: translateY(-10rem) !important;
+}
+
+[data-panel="passcode"] #lockscreen-passcode-code {
+  visibility: inherit;
+  transform: translateY(0);
+}
+
+[data-panel="emergency-call"] #lockscreen-passcode-code {
+  transition-delay: 0.5s;
+}
+
+#lockscreen-passcode-code > span {
+  -moz-box-sizing: border-box;
+  display: block;
+  float: left;
+  width: calc(25% - 1rem);
+  margin: 1.5rem 0.5rem;
+  height: calc(100% - 3rem);
+  text-align: center;
+  background-color: #fff;
+  border-radius: 0.5rem;
+
+  position: relative;
+}
+
+[data-passcode-status="error"] #lockscreen-passcode-code > span {
+  border: 0.1rem #B70404 solid;
+}
+
+[data-passcode-status="error"] #lockscreen-passcode-code > span[data-dot]::before {
+    background-color: #B70404;
+}
+
+#lockscreen-passcode-code > span[data-dot]::before {
+  content: '';
+  display: block;
+  position: absolute;
+
+  width: 1.5rem;
+  height: 1.5rem;
+  background-color: #3e3b39;
+  border-radius: 0.75rem;
+  top: 50%;
+  left: 50%;
+  margin-left: -0.75rem;
+  margin-top: -0.75rem;
+}
+
+#lockscreen-passcode-pad {
+  -moz-box-sizing: border-box;
+  position: absolute;
+  bottom: 0;
+  height: 21.4rem;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  visibility: hidden;
+  transform: translateY(calc(21.4rem + 7em));
+  transition: visibility 0.3s ease, transform 0.3s ease;
+}
+
+[data-panel="passcode"] #lockscreen-passcode-pad {
+  visibility: inherit;
+  transform: translateY(0);
+}
+
+[data-panel="emergency-call"] #lockscreen-passcode-pad {
+  transition-delay: 0.5s;
+}
+
+#lockscreen-passcode-pad > a {
+  -moz-box-sizing: border-box;
+  display: block;
+  float: left;
+  width: 33.333%;
+  height: 5rem;
+  border-top: 1px solid #525050;
+  border-bottom: 1px solid #000000;
+  border-left: 1px solid #525050;
+  border-right: 1px solid #000000;
+  outline: none;
+  padding: 0 2rem;
+
+  font-size: 3.2rem;
+  font-weight: 500;
+  line-height: 5rem;
+
+  color: #fff;
+  text-decoration: none;
+  text-shadow: 0 0 3px #000;
+}
+
+#lockscreen-passcode-pad > a:nth-child(3n+1):not([data-key="b"]) {
+  border-left: none;
+}
+
+#lockscreen-passcode-pad > a.last-row {
+  height: 6.4rem;
+}
+
+#lockscreen-passcode-pad > a > span {
+  pointer-events: none;
+  font-size: 1.2rem;
+  padding: 1.2rem;
+  color: #9aaabc;
+}
+
+.passcode-entered #lockscreen-passcode-pad > a[data-key="c"] {
+  display: none;
+}
+
+#lockscreen-passcode-pad > a[data-key="b"] {
+  display: none;
+  background: url(images/icon-clear.png) no-repeat center center;
+}
+
+.passcode-entered #lockscreen-passcode-pad > a[data-key="b"] {
+  display: block;
+  text-align: left;
+  text-indent: -9999px;
+}
+
+#lockscreen-passcode-pad > a:active {
+  background-color: #00aacd;
+  color: #fff;
+  text-shadow: none;
+}
+
+#lockscreen-passcode-pad > a:active > span {
+  color: #fff;
+  text-shadow: none;
+}
+
+#lockscreen-passcode-pad > a.lockscreen-passcode-pad-func {
+  font-size: 1.2rem;
+  font-weight: 500;
+  line-height: 1.6rem;
+  padding: 1rem;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+#lockscreen-panel-emergency-call {
+  transform: translateX(100%);
+}
+
+#lockscreen-panel-emergency-call::before {
+  content: none;
+}
+
+#lockscreen-panel-emergency-call > iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+[data-panel="emergency-call"] #lockscreen-panel-emergency-call {
+  transform: translateX(0);
+}
+
+#lockscreen-area-handle {
+  position: absolute;
+  background-image: url('./images/handle.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  border-top: 1px solid transparent;
+  top: -2rem;
+  height: 0.9rem;
+  width: 100%;
+  transition:
+    transform 0.5s ease,
+    opacity 0.5s ease;
+}
+
+#lockscreen-icon-container {
+  position: absolute;
+  width: 100%;
+  bottom: -8rem;
+  height: 10rem;
+  pointer-events: none;
+  border-top: 1px solid #989898;
+  background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.2) 20%);
+  transition:
+    transform 0.5s ease,
+    opacity 0.5s ease;
+}
+
+.touched #lockscreen-icon-container {
+  transition: none;
+}
+
+.touched #lockscreen-area-handle {
+  transition: none;
+}
+
+.touched .lockscreen-icon-area {
+  transition: none;
+}
+
+.triggered #lockscreen-icon-container {
+  transform: translateY(-8rem);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.triggered #lockscreen-area-handle {
+  transform: translateY(-1rem);
+  opacity: 0;
+}
+
+.triggered .lockscreen-icon-area {
+  opacity: 1;
+}
+
+@keyframes lockscreen-elastic {
+  0%, 40%, 75%, 97% {
+    transform: translateY(0);
+    animation-timing-function: ease-out;
+  }
+  20% {
+    transform: translateY(-5rem);
+    animation-timing-function: ease-in;
+  }
+  55% {
+    transform: translateY(-2.3rem);
+    animation-timing-function: ease-in;
+  }
+  85% {
+    transform: translateY(-0.5rem);
+    animation-timing-function: ease-in;
+  }
+}
+
+@keyframes lockscreen-elastic-icon {
+  0%, 40%, 75%, 97% {
+    opacity: 0.1;
+    animation-timing-function: ease-out;
+  }
+  20% {
+    opacity: 0.5;
+    animation-timing-function: ease-in;
+  }
+  55% {
+    opacity: 0.4;
+    animation-timing-function: ease-in;
+  }
+  85% {
+    opacity: 0.3;
+    animation-timing-function: ease-in;
+  }
+}
+
+.elastic .lockscreen-icon-area {
+  animation: lockscreen-elastic-icon 2.5s 1;
+}
+
+.elastic #lockscreen-icon-container {
+  animation: lockscreen-elastic 2.5s 1;
+}
diff --git a/apps/system/style/modal_dialog/images/error_bk.png b/apps/system/style/modal_dialog/images/error_bk.png
new file mode 100644
index 0000000..9f71ff8
--- /dev/null
+++ b/apps/system/style/modal_dialog/images/error_bk.png
diff --git a/apps/system/style/modal_dialog/modal_dialog.css b/apps/system/style/modal_dialog/modal_dialog.css
new file mode 100644
index 0000000..d6e97f8
--- /dev/null
+++ b/apps/system/style/modal_dialog/modal_dialog.css
@@ -0,0 +1,112 @@
+#modal-dialog-alert,
+#modal-dialog-confirm,
+#modal-dialog-prompt,
+#authentication-dialog,
+#authentication-dialog-http,
+#modal-dialog-error,
+#modal-dialog-select-one {
+  display: none;
+}
+
+#authentication-dialog input,
+#modal-dialog input {
+  border-radius: 2px 2px 2px 2px;
+  height: 40px;
+  font-size: 20px;
+  width: 100%;
+  color: white;
+  background: none;
+  -moz-box-sizing: border-box;
+}
+
+/* 480x800 phones */
+@media (orientation: portrait) and (width: 480px),
+       (orientation: landscape) and (width: 800px) {
+  #authentication-dialog input,
+  #modal-dialog input {
+    border-radius: 3px 3px 3px 3px;
+    height: 60px;
+    font-size: 30px;
+    width: 100%;
+    color: white;
+    -moz-box-sizing: border-box;
+  }
+}
+
+#screen.modal-dialog #modal-dialog,
+#screen.authentication-dialog #authentication-dialog,
+#authentication-dialog-http.visible,
+#modal-dialog-alert.visible,
+#modal-dialog-confirm.visible,
+#modal-dialog-prompt.visible,
+#modal-dialog-error.visible,
+#modal-dialog-select-one.visible {
+  display: block;
+}
+
+#modal-dialog-error {
+  background-color: black;
+  background-image: url(images/error_bk.png);
+}
+
+#modal-dialog-sad-face {
+  float: left;
+  font-size: 72px;
+  margin-right: 2px;
+}
+
+/* Confirm dialog */
+.modal-dialog-message-container p {
+  display:inline !important;
+  word-wrap: break-word;
+}
+
+/* Select one dialog */
+
+#modal-dialog-select-one .modal-dialog-message-container {
+  display: block;
+  padding: 0 1.5rem 0 1.5rem;
+  position: absolute;
+  left: 0;
+  bottom: -moz-calc(3.8rem + 3rem);
+}
+
+#modal-dialog-select-one h3 {
+  font-size: 1.8rem;
+}
+
+#modal-dialog-select-one ul {
+  width: 100%;
+  height: auto;
+  list-style: none;
+  padding: 0;
+  margin: 0.5rem 0 2rem 0;
+  display: block;
+  overflow: hidden;
+}
+
+#modal-dialog-select-one ul > li {
+  width: 100%;
+  padding-top: 1rem;
+  margin: 0;
+  display: block;
+  overflow: hidden;
+  border: none;
+  height: auto;
+  line-height: normal;
+}
+
+#modal-dialog-select-one ul > li > button {
+  color: #fff;
+  text-shadow: none;
+  text-align: left;
+  margin: 0;
+  background: #4E4E4E padding-box;
+  border: solid 1px rgba(0, 0, 0, 0.25);
+}
+
+#modal-dialog-select-one ul > li > button:active {
+  background-color: #006f86;
+  color: #333;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
+}
diff --git a/apps/system/style/modal_dialog/prompt.css b/apps/system/style/modal_dialog/prompt.css
new file mode 100644
index 0000000..69d726d
--- /dev/null
+++ b/apps/system/style/modal_dialog/prompt.css
@@ -0,0 +1,50 @@
+/* ----------------------------------
+ * STYLES FOR PROMPT
+ * Requires:
+    menu-dialoges/core.css
+    other/buttons/style.css
+ * ---------------------------------- */
+ 
+[role="dialog"] p {
+  font-family: 'MozTT', Sans-serif;
+  font-weight: lighter;
+  font-size: 2.2rem;
+  color: #FAFAFA;
+  margin: 0;
+}
+
+[role="dialog"] p:last-child {
+  overflow-x: hidden;
+  overflow-y: auto;
+  word-wrap: break-word;
+  /*screen height - menu data-items - dialog padding - title height*/
+  /*almost 60% screen height*/
+  max-height: 28rem;
+}
+
+[role="dialog"] .content {
+  font-family: 'MozTT', Sans-serif;
+  font-weight: lighter;
+  font-size: 2.2rem;
+  color: #fff;
+  border-bottom: 0.1rem solid #777;
+  margin: 0;
+  padding: 2.5rem 0 2rem 0;
+}
+
+[role="dialog"] .content img {
+  float: left;
+  margin-right: 2rem;
+}
+
+[role="dialog"] .content strong {
+  font-weight: lighter;
+}
+
+[role="dialog"] .content small {
+  font-size: 1.4rem;
+  font-family: 'MozTT', Sans-serif;
+  font-weight: normal;
+  color: #cbcbcb;
+  display: block;
+}
diff --git a/apps/system/style/notifications/images/grey-noise-bg.png b/apps/system/style/notifications/images/grey-noise-bg.png
new file mode 100644
index 0000000..0f83b8f
--- /dev/null
+++ b/apps/system/style/notifications/images/grey-noise-bg.png
diff --git a/apps/system/style/notifications/notifications.css b/apps/system/style/notifications/notifications.css
new file mode 100644
index 0000000..5dbfe5e
--- /dev/null
+++ b/apps/system/style/notifications/notifications.css
@@ -0,0 +1,200 @@
+html, body {
+  font-family: 'MozTT', sans-serif;
+  font-size: 10px;
+}
+
+#notification-toaster {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 50px;
+  overflow: hidden;
+  background-image: url('images/grey-noise-bg.png');
+  background-repeat: repeat-x;
+  -moz-box-sizing: border-box;
+  border-bottom: 1px #2c2c2c solid;
+  -moz-transform: translateY(-50px);
+  -moz-transition: -moz-transform .3s ease-in-out;
+}
+
+#toaster-icon {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  top: 7px;
+  left: 10px;
+  pointer-events: none;
+}
+
+#notification-toaster > div {
+  left: 50px;
+  width: -moz-calc(100% - 55px);
+  height: 19px;
+  padding: 0;
+
+  line-height: 1.9rem;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#toaster-title {
+  position: absolute;
+  top: 3px;
+  color: #52b8cc;
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+#toaster-detail {
+  position: absolute;
+  top: 22px;
+  color: white;
+  font-size: 1.4rem;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#notification-toaster.displayed {
+  -moz-transform: translateY(0);
+}
+
+#notification-bar {
+  height: 30px;
+  background-color: #52b6cc;
+  color: #1b3f46;
+}
+
+#notification-bar span {
+  display: inline-block;
+  margin-left: 15px;
+  font-size: 1.4rem;
+  font-weight: 500;
+  line-height: 30px;
+}
+
+#notification-bar button {
+  float: right;
+  margin-right: 15px;
+  width: 30%;
+  height: 30px;
+  padding: 0;
+  border: 0;
+  background: none;
+  text-align: right;
+  font-size: 1.4rem;
+  font-weight: 500;
+}
+
+/* remove ugly dotted outline when focus */
+#notification-bar button::-moz-focus-inner {
+  border: 0;
+}
+
+#notifications-container {
+  width: 100%;
+
+  /* minus cost control, quick settings, bar and grippy */
+  height: -moz-calc(100% - 4.5rem - 60px - 30px - 20px);
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+
+.notification {
+  position: relative;
+  height: 60px;
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 1.9rem;
+
+  background-color: rgba(0, 0, 0, 0.5);
+
+  border-top: 1px #404547 solid;
+  border-bottom: 1px black solid;
+}
+
+.notification:first-child {
+  border-top-color: black;
+}
+
+.notification div {
+  pointer-events: none;
+}
+
+.notification > div:first-of-type {
+  width: 19.5rem;
+  margin: 1rem 0 0 5rem;
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.9rem;
+  color: #FFFFFF;
+}
+
+.notification > div {
+  margin: 0 0 0 50px;
+  padding: 0;
+  width: -moz-calc(100% - 55px);
+  color: #bfbfbf;
+  font-size: 1.4rem;
+  line-height: 1.9rem;
+  min-height: 1.9rem;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.notification > .timestamp {
+  position: absolute;
+  right: 0;
+  top: -.2rem;
+  color: #52B6CC;
+  margin: 13px 15px 0 0;
+  padding: 0;
+  display: inline;
+  line-height: 16px;
+}
+
+.notification > img {
+  float: left;
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin: 15px 10px;
+  pointer-events: none;
+}
+
+.notification.disappearing,
+#notification-toaster.disappearing {
+  transition: transform 0.3s linear;
+  transform: translateX(100%);
+}
+
+.notification.disappearing ~ .notification {
+  transition: transform 0.3s linear;
+  transform: translateY(-62px);
+}
+
+#notifications-lockscreen-container {
+  position: absolute;
+  top: 18rem;
+  left: 0;
+  width: 100%;
+  max-height: 186px;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9),
+                              rgba(0, 0, 0, 0.6) 78%,
+                              rgba(0, 0, 0, 0));
+  background-size: 100% 186px;
+}
+
+#notifications-lockscreen-container .notification {
+  background-color: transparent;
+}
diff --git a/apps/system/style/notifications/ringtones/notifier_exclamation.ogg b/apps/system/style/notifications/ringtones/notifier_exclamation.ogg
new file mode 100644
index 0000000..d953a9a
--- /dev/null
+++ b/apps/system/style/notifications/ringtones/notifier_exclamation.ogg
diff --git a/apps/system/style/permission_manager/images/PermissionsDialogIcons_Camera.png b/apps/system/style/permission_manager/images/PermissionsDialogIcons_Camera.png
new file mode 100755
index 0000000..3be8cb5
--- /dev/null
+++ b/apps/system/style/permission_manager/images/PermissionsDialogIcons_Camera.png
diff --git a/apps/system/style/permission_manager/images/PermissionsDialogIcons_Contacts.png b/apps/system/style/permission_manager/images/PermissionsDialogIcons_Contacts.png
new file mode 100755
index 0000000..f11d9d9
--- /dev/null
+++ b/apps/system/style/permission_manager/images/PermissionsDialogIcons_Contacts.png
diff --git a/apps/system/style/permission_manager/images/PermissionsDialogIcons_DeviceStorage.png b/apps/system/style/permission_manager/images/PermissionsDialogIcons_DeviceStorage.png
new file mode 100755
index 0000000..069eb48
--- /dev/null
+++ b/apps/system/style/permission_manager/images/PermissionsDialogIcons_DeviceStorage.png
diff --git a/apps/system/style/permission_manager/images/PermissionsDialogIcons_FMRadio.png b/apps/system/style/permission_manager/images/PermissionsDialogIcons_FMRadio.png
new file mode 100755
index 0000000..fc63d12
--- /dev/null
+++ b/apps/system/style/permission_manager/images/PermissionsDialogIcons_FMRadio.png
diff --git a/apps/system/style/permission_manager/images/PermissionsDialogIcons_Geolocation.png b/apps/system/style/permission_manager/images/PermissionsDialogIcons_Geolocation.png
new file mode 100755
index 0000000..936a627
--- /dev/null
+++ b/apps/system/style/permission_manager/images/PermissionsDialogIcons_Geolocation.png
diff --git a/apps/system/style/permission_manager/images/PermissionsDialogIcons_WifiInformation.png b/apps/system/style/permission_manager/images/PermissionsDialogIcons_WifiInformation.png
new file mode 100755
index 0000000..903314c
--- /dev/null
+++ b/apps/system/style/permission_manager/images/PermissionsDialogIcons_WifiInformation.png
diff --git a/apps/system/style/permission_manager/permission_manager.css b/apps/system/style/permission_manager/permission_manager.css
new file mode 100644
index 0000000..49e34b8
--- /dev/null
+++ b/apps/system/style/permission_manager/permission_manager.css
@@ -0,0 +1,86 @@
+#permission-screen {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  width: 100%;
+  height: -moz-calc(100% - 20px);
+  background-color: rgba(0,0,0,0.4);
+  -moz-transition: opacity 0.5s ease;
+  pointer-events: none;
+  display: none;
+}
+
+#screen:-moz-full-screen-ancestor > #permission-screen,
+#screen.fullscreen-app #permission-screen {
+  top: 0;
+  height: 100%;
+}
+
+#screen.attention #permission-screen {
+  top: 40px;
+  height: -moz-calc(100% - 40px);
+}
+
+#permission-screen.visible {
+  pointer-events: auto;
+  display: inline-block;
+}
+
+#permission-remember-section {
+  height: 6rem;
+  border-top: 0.1rem solid #686868;
+  width: 100%;
+  position: relative;
+}
+
+#permission-remember-section {
+  display: none;
+}
+
+#permission-message {
+  background-image: none;
+  background-repeat: no-repeat no-repeat;
+  min-height: 64px;
+}
+
+#permission-screen[data-type] #permission-remember-section,
+#permission-screen[data-type] #permission-icon {
+  display: inherit;
+}
+
+#permission-screen[data-type] #permission-message {
+  padding-left: 64px;
+}
+
+#permission-remember-section label {
+  position: absolute;
+  right: 1rem;
+}
+
+#permission-remember-label {
+  line-height: 5rem;
+}
+
+#permission-screen[data-type="geolocation"] #permission-message {
+  background-image: url('images/PermissionsDialogIcons_Geolocation.png');
+}
+
+#permission-screen[data-type="fmradio"] #permission-message {
+  background-image: url('images/PermissionsDialogIcons_FMRadio.png');
+}
+
+#permission-screen[data-type*="camera"] #permission-message {
+  background-image: url('images/PermissionsDialogIcons_Camera.png');
+}
+
+#permission-screen[data-type*="wifi"] #permission-message {
+  background-image: url('images/PermissionsDialogIcons_WifiInformation.png');
+}
+
+#permission-screen[data-type="contacts"] #permission-message {
+  background-image: url('images/PermissionsDialogIcons_Contacts.png');
+}
+
+#permission-screen[data-type*="device-storage"] #permission-message {
+  background-image: url('images/PermissionsDialogIcons_DeviceStorage.png');
+}
diff --git a/apps/system/style/pinlock/pinlock.css b/apps/system/style/pinlock/pinlock.css
new file mode 100644
index 0000000..307763f
--- /dev/null
+++ b/apps/system/style/pinlock/pinlock.css
@@ -0,0 +1,92 @@
+#pinkeypadscreen {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #fff;
+  -moz-user-select: none;
+  transition: transform 0.3s ease;
+}
+
+#pinkeypadscreen > #pinkeypadscreen-container {
+  width: 100%;
+  margin-top: 20px;
+}
+
+#pinkeypadscreen-desc {
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  background-color: rgba(0, 0, 0, 0.85);
+  margin: 0;
+  text-align: center;
+  vertical-align: middle;
+  border: 0px;
+  font-size: 32px;
+}
+
+#pinkeypadscreen-code {
+  bottom: 500px;
+  height: 60px;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.75);
+  margin: 0;
+}
+
+#pinkeypadscreen-code > span {
+  -moz-box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 100%;
+  line-height: 40px;
+  text-align: center;
+  border: 10px solid #888;
+  box-shadow: 0 0 10px #fff inset;
+}
+
+#pinkeypadscreen-display {
+  font-size: 50px;
+  color: #000;
+}
+
+#pinkeypadscreen-pad {
+  -moz-box-sizing: border-box;
+  border: 1px solid #919191;
+  bottom: 0;
+  height: 350px;
+  width: 100%;
+  padding: 4px;
+}
+
+#pinkeypadscreen-pad > a {
+  -moz-box-sizing: border-box;
+  display: block;
+  float: left;
+  width: calc(33.333% - 8px);
+  height: 60px;
+  line-height: 60px;
+  font-size: 48px;
+  margin: 4px;
+  text-align: center;
+  border: 1px solid #919191;
+  border-radius: 8px;
+  outline: none;
+  color: #919191;
+  text-decoration: none;
+}
+
+#pinkeypadscreen-pad > a:active {
+  background-color: rgb(0, 0, 0);
+  color: #ccc;
+}
+
+#pinkeypadscreen-pad > a.pinkeypadscreen-pad-func {
+  font-size: 20px;
+}
+
+#pinkeypadscreen-pad > a.pinkeypadscreen-pad-func-full {
+  width: calc(100% - 8px);
+  font-size: 20px;
+}
+
diff --git a/apps/system/style/popup_manager/popup_manager.css b/apps/system/style/popup_manager/popup_manager.css
new file mode 100644
index 0000000..a33f9a1
--- /dev/null
+++ b/apps/system/style/popup_manager/popup_manager.css
@@ -0,0 +1,112 @@
+#popup-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+#popup-container[data-trusty="true"] {
+  width: 85%;
+  left: 7%;
+  top: 7%;
+  height: 85%;
+}
+
+#screen.popup #popup-container {
+  visibility: visible;
+}
+
+#popup-throbber {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  z-index: 1;
+}
+
+#screen.popup #popup-container.disappearing {
+  pointer-events: none;
+  transition: visibility ease .6s, opacity ease .6s;
+  visibility: hidden;
+  opacity: 0;
+}
+
+#popup-throbber.loading {
+  height: 4px;
+  background-image: url('../shared/progress.gif');
+}
+
+.popup #popup-container > #frame-container,
+.popup #popup-container > .title-container {
+  transform: translateY(0);
+}
+
+#popup-container[data-trusty="true"] > #frame-container,
+#popup-container[data-trusty="true"] > .title-container {
+  transition: none;
+}
+
+#popup-container > .title-container {
+  transition: transform .6s ease;
+  transform: translateY(-100%);
+  height: 5rem;
+  width: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+}
+
+#popup-container > #frame-container {
+  position: absolute;
+  top: 5rem;
+  left: 0;
+  width: 100%;
+  height: -moz-calc(100% - 5rem);
+
+  background-color: #fff;
+  transform: translateY(100%);
+  transition: transform .6s ease;
+}
+
+#popup-container[data-trusty="true"] > #frame-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+
+#popup-error-dialog {
+  -moz-box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  z-index: 1024;
+  display: none;
+  background-color: black;
+  background-image: url(../modal_dialog/images/error_bk.png);
+}
+
+#frame-container > iframe {
+  z-index: 1;
+}
+
+#frame-container.error > #popup-error-dialog {
+  display: block;
+}
+
+#popup-container[data-trusty="true"] > .title-container {
+  visibility: hidden;
+}
+
+#frame-container > * {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
diff --git a/apps/system/style/quick_settings/images/airplane-mode-off.png b/apps/system/style/quick_settings/images/airplane-mode-off.png
new file mode 100644
index 0000000..b037976
--- /dev/null
+++ b/apps/system/style/quick_settings/images/airplane-mode-off.png
diff --git a/apps/system/style/quick_settings/images/airplane-mode-on.png b/apps/system/style/quick_settings/images/airplane-mode-on.png
new file mode 100644
index 0000000..a63b125
--- /dev/null
+++ b/apps/system/style/quick_settings/images/airplane-mode-on.png
diff --git a/apps/system/style/quick_settings/images/background.png b/apps/system/style/quick_settings/images/background.png
new file mode 100644
index 0000000..a76cc48
--- /dev/null
+++ b/apps/system/style/quick_settings/images/background.png
diff --git a/apps/system/style/quick_settings/images/bluetooth-off.png b/apps/system/style/quick_settings/images/bluetooth-off.png
new file mode 100644
index 0000000..4cdab70
--- /dev/null
+++ b/apps/system/style/quick_settings/images/bluetooth-off.png
diff --git a/apps/system/style/quick_settings/images/bluetooth-on.png b/apps/system/style/quick_settings/images/bluetooth-on.png
new file mode 100644
index 0000000..ab1c5cd
--- /dev/null
+++ b/apps/system/style/quick_settings/images/bluetooth-on.png
diff --git a/apps/system/style/quick_settings/images/data-2g-off.png b/apps/system/style/quick_settings/images/data-2g-off.png
new file mode 100644
index 0000000..d64d0a8
--- /dev/null
+++ b/apps/system/style/quick_settings/images/data-2g-off.png
diff --git a/apps/system/style/quick_settings/images/data-2g-on.png b/apps/system/style/quick_settings/images/data-2g-on.png
new file mode 100644
index 0000000..3143453
--- /dev/null
+++ b/apps/system/style/quick_settings/images/data-2g-on.png
diff --git a/apps/system/style/quick_settings/images/data-3g-off.png b/apps/system/style/quick_settings/images/data-3g-off.png
new file mode 100644
index 0000000..37d6a82
--- /dev/null
+++ b/apps/system/style/quick_settings/images/data-3g-off.png
diff --git a/apps/system/style/quick_settings/images/data-3g-on.png b/apps/system/style/quick_settings/images/data-3g-on.png
new file mode 100644
index 0000000..47dbda1
--- /dev/null
+++ b/apps/system/style/quick_settings/images/data-3g-on.png
diff --git a/apps/system/style/quick_settings/images/data-4g-off.png b/apps/system/style/quick_settings/images/data-4g-off.png
new file mode 100644
index 0000000..bbf45a1
--- /dev/null
+++ b/apps/system/style/quick_settings/images/data-4g-off.png
diff --git a/apps/system/style/quick_settings/images/data-4g-on.png b/apps/system/style/quick_settings/images/data-4g-on.png
new file mode 100644
index 0000000..b77dd96
--- /dev/null
+++ b/apps/system/style/quick_settings/images/data-4g-on.png
diff --git a/apps/system/style/quick_settings/images/data-e-off.png b/apps/system/style/quick_settings/images/data-e-off.png
new file mode 100644
index 0000000..d8215a8
--- /dev/null
+++ b/apps/system/style/quick_settings/images/data-e-off.png
diff --git a/apps/system/style/quick_settings/images/data-e-on.png b/apps/system/style/quick_settings/images/data-e-on.png
new file mode 100644
index 0000000..491a07d
--- /dev/null
+++ b/apps/system/style/quick_settings/images/data-e-on.png
diff --git a/apps/system/style/quick_settings/images/data-h+-off.png b/apps/system/style/quick_settings/images/data-h+-off.png
new file mode 100644
index 0000000..85238ee
--- /dev/null
+++ b/apps/system/style/quick_settings/images/data-h+-off.png
diff --git a/apps/system/style/quick_settings/images/data-h+-on.png b/apps/system/style/quick_settings/images/data-h+-on.png
new file mode 100644
index 0000000..968abbb
--- /dev/null
+++ b/apps/system/style/quick_settings/images/data-h+-on.png
diff --git a/apps/system/style/quick_settings/images/data-h-off.png b/apps/system/style/quick_settings/images/data-h-off.png
new file mode 100644
index 0000000..99b2dc9
--- /dev/null
+++ b/apps/system/style/quick_settings/images/data-h-off.png
diff --git a/apps/system/style/quick_settings/images/data-h-on.png b/apps/system/style/quick_settings/images/data-h-on.png
new file mode 100644
index 0000000..9ba3649
--- /dev/null
+++ b/apps/system/style/quick_settings/images/data-h-on.png
diff --git a/apps/system/style/quick_settings/images/data-o-off.png b/apps/system/style/quick_settings/images/data-o-off.png
new file mode 100644
index 0000000..75dbf17
--- /dev/null
+++ b/apps/system/style/quick_settings/images/data-o-off.png
diff --git a/apps/system/style/quick_settings/images/data-o-on.png b/apps/system/style/quick_settings/images/data-o-on.png
new file mode 100644
index 0000000..ae8791b
--- /dev/null
+++ b/apps/system/style/quick_settings/images/data-o-on.png
diff --git a/apps/system/style/quick_settings/images/data-off.png b/apps/system/style/quick_settings/images/data-off.png
new file mode 100644
index 0000000..dcaf9f4
--- /dev/null
+++ b/apps/system/style/quick_settings/images/data-off.png
diff --git a/apps/system/style/quick_settings/images/power-save-off.png b/apps/system/style/quick_settings/images/power-save-off.png
new file mode 100644
index 0000000..1d740ef
--- /dev/null
+++ b/apps/system/style/quick_settings/images/power-save-off.png
diff --git a/apps/system/style/quick_settings/images/power-save-on.png b/apps/system/style/quick_settings/images/power-save-on.png
new file mode 100644
index 0000000..c0e3ca4
--- /dev/null
+++ b/apps/system/style/quick_settings/images/power-save-on.png
diff --git a/apps/system/style/quick_settings/images/settings-off.png b/apps/system/style/quick_settings/images/settings-off.png
new file mode 100644
index 0000000..68fe921
--- /dev/null
+++ b/apps/system/style/quick_settings/images/settings-off.png
diff --git a/apps/system/style/quick_settings/images/settings-on.png b/apps/system/style/quick_settings/images/settings-on.png
new file mode 100644
index 0000000..d38c3c1
--- /dev/null
+++ b/apps/system/style/quick_settings/images/settings-on.png
diff --git a/apps/system/style/quick_settings/images/wifi-off.png b/apps/system/style/quick_settings/images/wifi-off.png
new file mode 100644
index 0000000..a7af54e
--- /dev/null
+++ b/apps/system/style/quick_settings/images/wifi-off.png
diff --git a/apps/system/style/quick_settings/images/wifi-on.png b/apps/system/style/quick_settings/images/wifi-on.png
new file mode 100644
index 0000000..ad0d1f6
--- /dev/null
+++ b/apps/system/style/quick_settings/images/wifi-on.png
diff --git a/apps/system/style/quick_settings/quick_settings.css b/apps/system/style/quick_settings/quick_settings.css
new file mode 100644
index 0000000..80a49e9
--- /dev/null
+++ b/apps/system/style/quick_settings/quick_settings.css
@@ -0,0 +1,129 @@
+html, body {
+  font-family: 'MozTT', sans-serif;
+  font-size: 10px;
+}
+
+#quick-settings {
+  display: block;
+  width: 100%;
+  height: 60px;
+  padding: 0;
+
+  background-image: url(images/background.png);
+  background-size: 100% 60px;
+
+  border-top:1px black solid;
+}
+
+#quick-settings > a {
+  display: block;
+  float: left;
+  width: -moz-calc(20% - 2px);
+  height: 30px;
+  margin: 15px 0;
+  padding: 0;
+  color: #fff;
+  text-align: center;
+  text-decoration: none;
+  outline: none;
+  font-size: 1.4rem;
+  line-height: 1.8rem;
+}
+
+#quick-settings > .separator {
+  border-right: 1px black solid;
+  border-left: 1px gray solid;
+  margin: 15px 0;
+  height: 30px;
+  float: left;
+}
+
+#quick-settings > a:first-child {
+  width: -moz-calc(20% - 1px);
+  border-left: 0;
+}
+
+#quick-settings > a:last-child {
+  width: -moz-calc(20% - 1px);
+  border-right: 0;
+}
+
+#quick-settings > a {
+  background-position: center;
+  background-repeat: no-repeat;
+}
+#quick-settings > *[data-initializing] {
+  opacity: 0.5;
+}
+#quick-settings-wifi {
+  background-image: url(images/wifi-off.png);
+}
+#quick-settings-wifi[data-enabled] {
+  background-image: url(images/wifi-on.png);
+}
+#quick-settings-data {
+  background-image: url(images/data-off.png);
+}
+#quick-settings-data[data-network="2G"]  {
+  background-image: url(images/data-2g-off.png);
+}
+#quick-settings-data[data-enabled][data-network="2G"] {
+  background-image: url(images/data-2g-on.png);
+}
+#quick-settings-data[data-network="3G"] {
+  background-image: url(images/data-3g-off.png);
+}
+#quick-settings-data[data-enabled][data-network="3G"] {
+  background-image: url(images/data-3g-on.png);
+}
+#quick-settings-data[data-network="4G"] {
+  background-image: url(images/data-4g-off.png);
+}
+#quick-settings-data[data-enabled][data-network="4G"] {
+  background-image: url(images/data-4g-on.png);
+}
+#quick-settings-data[data-network="E"] {
+  background-image: url(images/data-e-off.png);
+}
+#quick-settings-data[data-enabled][data-network="E"] {
+  background-image: url(images/data-e-on.png);
+}
+#quick-settings-data[data-network="H"] {
+  background-image: url(images/data-h-off.png);
+}
+#quick-settings-data[data-enabled][data-network="H"] {
+  background-image: url(images/data-h-on.png);
+}
+#quick-settings-data[data-network="H+"] {
+  background-image: url(images/data-h+-off.png);
+}
+#quick-settings-data[data-enabled][data-network="H+"] {
+  background-image: url(images/data-h+-on.png);
+}
+#quick-settings-data[data-network="O"] {
+  background-image: url(images/data-o-off.png);
+}
+#quick-settings-data[data-enabled][data-network="O"] {
+  background-image: url(images/data-o-on.png);
+}
+#quick-settings-bluetooth {
+  background-image: url(images/bluetooth-off.png);
+}
+#quick-settings-bluetooth[data-enabled] {
+  background-image: url(images/bluetooth-on.png);
+}
+#quick-settings-airplane-mode {
+  background-image: url(images/airplane-mode-off.png);
+}
+#quick-settings-airplane-mode[data-enabled] {
+  background-image: url(images/airplane-mode-on.png);
+}
+#quick-settings-full-app {
+  background-image: url(images/settings-off.png);
+}
+#quick-settings-full-app:active {
+  background-image: url(images/settings-on.png);
+}
+.quick-settings-airplane-mode {
+  opacity: 0.5;
+}
diff --git a/apps/system/style/shared/progress.gif b/apps/system/style/shared/progress.gif
new file mode 100644
index 0000000..654a2fd
--- /dev/null
+++ b/apps/system/style/shared/progress.gif
diff --git a/apps/system/style/simcard.css b/apps/system/style/simcard.css
new file mode 100644
index 0000000..d583dc0
--- /dev/null
+++ b/apps/system/style/simcard.css
@@ -0,0 +1,52 @@
+#simpin-dialog {
+  background: white;
+  color: #000;
+}
+
+#simpin-dialog section[role="region"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+#simpin-dialog .container {
+  padding-left: 20px;
+  font-size: 1.5em;
+}
+
+#simpin-dialog .container > div {
+  padding-top: 10px;
+}
+
+#errorMsg{
+  padding: 1rem;
+}
+
+#simpin-dialog .error #messageHeader {
+  color: red;
+}
+
+/* for simpin error message,
+ * to override [role="dialog"] rules in core.css*/
+#messageBody {
+  color: #000;
+  white-space: normal;
+}
+
+#simpin-dialog .input-wrapper {
+  position: relative;
+}
+
+#simpin-dialog .input-wrapper input {
+  font-size: 2.0em;
+  display: block;
+}
+
+#simpin-dialog .input-wrapper input[type="text"] {
+  width: auto;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+}
+
diff --git a/apps/system/style/sleep_menu/images/airplane.png b/apps/system/style/sleep_menu/images/airplane.png
new file mode 100644
index 0000000..1c03a6b
--- /dev/null
+++ b/apps/system/style/sleep_menu/images/airplane.png
diff --git a/apps/system/style/sleep_menu/images/power-off.png b/apps/system/style/sleep_menu/images/power-off.png
new file mode 100644
index 0000000..5e6d2f7
--- /dev/null
+++ b/apps/system/style/sleep_menu/images/power-off.png
diff --git a/apps/system/style/sleep_menu/images/restart.png b/apps/system/style/sleep_menu/images/restart.png
new file mode 100644
index 0000000..3ba3b87
--- /dev/null
+++ b/apps/system/style/sleep_menu/images/restart.png
diff --git a/apps/system/style/sleep_menu/images/vibration.png b/apps/system/style/sleep_menu/images/vibration.png
new file mode 100644
index 0000000..3fa1f92
--- /dev/null
+++ b/apps/system/style/sleep_menu/images/vibration.png
diff --git a/apps/system/style/sleep_menu/sleep_menu.css b/apps/system/style/sleep_menu/sleep_menu.css
new file mode 100644
index 0000000..78adc86
--- /dev/null
+++ b/apps/system/style/sleep_menu/sleep_menu.css
@@ -0,0 +1,125 @@
+#sleep-menu {
+  background-attachment: scroll, scroll;
+  background-clip: border-box, border-box;
+  background-color: transparent;
+  background-image: url("../themes/default/images/images/ui/pattern.png"), url("../themes/default/images/ui/gradient.png");
+  background-origin: padding-box, padding-box;
+  background-position: left top, left top;
+  background-repeat: repeat, no-repeat;
+  background-size: auto auto, 100% 100%;
+  bottom: 0;
+  color: #FFFFFF;
+  font-family: "MozTT",Sans-serif;
+  left: 0;
+  overflow: hidden;
+  padding: 1.5rem 0 7rem;
+  position: absolute;
+  right: 0;
+  top: 0;
+  white-space: nowrap;
+  display: none;
+}
+
+#sleep-menu-container {
+  -moz-box-sizing: padding-box;
+  display: inline-block;
+  padding: 0 2.5rem 0 2rem;
+  vertical-align: middle;
+  white-space: normal;
+  width: 100%;
+}
+
+#sleep-menu.visible {
+  display: block;
+}
+
+#sleep-menu-container h3 {
+  border-bottom: 0.1rem solid #686868;
+  color: #FFFFFF;
+  font-family: 'MozTT',Sans-serif;
+  font-size: 1.6rem;
+  font-weight: normal;
+  line-height: 1em;
+  margin: 0 0 1rem;
+  padding-bottom: 1rem;
+}
+
+#sleep-menu-container ul {
+  margin: -1rem -4rem 0;
+  max-height: 37rem;
+  overflow: auto;
+  padding: 0 4rem;
+  position: relative;
+}
+
+#sleep-menu-container li {
+  -moz-transition: background 0.2s ease 0s;
+  border-bottom: 1px solid #666666;
+  color: #FFFFFF;
+  font-family: 'MozTT',Sans-serif;
+  font-size: 2.2rem;
+  font-weight: lighter;
+  height: 5.9rem;
+  line-height: 5.9rem;
+  list-style: none outside none;
+  margin: 0;
+  padding-bottom: 1px;
+  position: relative;
+  display: block;
+  text-decoration: none;
+}
+
+#sleep-menu-container li:active {
+  background: #00ABCC;
+  color: #fff!important;
+}
+
+#sleep-menu menu {
+  background: url("../themes/default/images/ui/pattern.png") repeat scroll left top #2D2D2D;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  bottom: 0;
+  display: block;
+  left: 0;
+  margin: 0;
+  overflow: hidden;
+  padding: 1.5rem;
+  position: absolute;
+  right: 0;
+  white-space: nowrap;
+}
+
+#sleep-menu menu button::-moz-focus-inner {
+  border: medium none;
+  outline: medium none;
+}
+
+#sleep-menu menu button {
+  -moz-box-sizing: border-box;
+  background: url("../themes/default/images/ui/default.png") repeat-x scroll left bottom #FAFAFA;
+  border: 1px solid #9F9F9F;
+  border-radius: 0.3rem 0.3rem 0.3rem 0.3rem;
+  color: #333333;
+  display: inline-block;
+  font-family: 'MozTT',Sans-serif;
+  font-size: 1.6rem;
+  font-weight: 600;
+  height: 3.8rem;
+  line-height: 3.8rem;
+  margin: 0 0 1rem;
+  outline: medium none;
+  overflow: hidden;
+  padding: 0 1.5rem;
+  text-align: center;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 100%;
+}
+
+#sleep-menu menu button:active {
+  background: none repeat scroll 0 0 #008AAA;
+  border-color: #008AAA;
+  color: #333333;
+}
diff --git a/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff.png b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff.png
new file mode 100644
index 0000000..f3aba14
--- /dev/null
+++ b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff.png
diff --git a/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff_left.png b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff_left.png
new file mode 100644
index 0000000..278368f
--- /dev/null
+++ b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff_left.png
diff --git a/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff_right.png b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff_right.png
new file mode 100644
index 0000000..588a176
--- /dev/null
+++ b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff_right.png
diff --git a/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn.png b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn.png
new file mode 100644
index 0000000..abb099f
--- /dev/null
+++ b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn.png
diff --git a/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn_left.png b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn_left.png
new file mode 100644
index 0000000..a8d2ef5
--- /dev/null
+++ b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn_left.png
diff --git a/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn_right.png b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn_right.png
new file mode 100644
index 0000000..c287a9f
--- /dev/null
+++ b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn_right.png
diff --git a/apps/system/style/sound_manager/images/header_bg.png b/apps/system/style/sound_manager/images/header_bg.png
new file mode 100644
index 0000000..e1ff073
--- /dev/null
+++ b/apps/system/style/sound_manager/images/header_bg.png
diff --git a/apps/system/style/sound_manager/images/speaker_loud_icon.png b/apps/system/style/sound_manager/images/speaker_loud_icon.png
new file mode 100644
index 0000000..8a49d8f
--- /dev/null
+++ b/apps/system/style/sound_manager/images/speaker_loud_icon.png
diff --git a/apps/system/style/sound_manager/images/speaker_mute_icon.png b/apps/system/style/sound_manager/images/speaker_mute_icon.png
new file mode 100644
index 0000000..7b3a397
--- /dev/null
+++ b/apps/system/style/sound_manager/images/speaker_mute_icon.png
diff --git a/apps/system/style/sound_manager/images/speaker_regular_icon.png b/apps/system/style/sound_manager/images/speaker_regular_icon.png
new file mode 100644
index 0000000..e762611
--- /dev/null
+++ b/apps/system/style/sound_manager/images/speaker_regular_icon.png
diff --git a/apps/system/style/sound_manager/images/vibration.png b/apps/system/style/sound_manager/images/vibration.png
new file mode 100644
index 0000000..3fa1f92
--- /dev/null
+++ b/apps/system/style/sound_manager/images/vibration.png
diff --git a/apps/system/style/sound_manager/images/vibration_disabled_icon.png b/apps/system/style/sound_manager/images/vibration_disabled_icon.png
new file mode 100644
index 0000000..b529231
--- /dev/null
+++ b/apps/system/style/sound_manager/images/vibration_disabled_icon.png
diff --git a/apps/system/style/sound_manager/images/vibration_enabled_icon.png b/apps/system/style/sound_manager/images/vibration_enabled_icon.png
new file mode 100644
index 0000000..e28b3b7
--- /dev/null
+++ b/apps/system/style/sound_manager/images/vibration_enabled_icon.png
diff --git a/apps/system/style/sound_manager/images/volume-off.png b/apps/system/style/sound_manager/images/volume-off.png
new file mode 100644
index 0000000..edee64e
--- /dev/null
+++ b/apps/system/style/sound_manager/images/volume-off.png
diff --git a/apps/system/style/sound_manager/images/volume-on.png b/apps/system/style/sound_manager/images/volume-on.png
new file mode 100644
index 0000000..d7ef462
--- /dev/null
+++ b/apps/system/style/sound_manager/images/volume-on.png
diff --git a/apps/system/style/sound_manager/images/volume_center_active.png b/apps/system/style/sound_manager/images/volume_center_active.png
new file mode 100644
index 0000000..6c80874
--- /dev/null
+++ b/apps/system/style/sound_manager/images/volume_center_active.png
diff --git a/apps/system/style/sound_manager/images/volume_center_disabled.png b/apps/system/style/sound_manager/images/volume_center_disabled.png
new file mode 100644
index 0000000..76ad232
--- /dev/null
+++ b/apps/system/style/sound_manager/images/volume_center_disabled.png
diff --git a/apps/system/style/sound_manager/images/volume_left_active.png b/apps/system/style/sound_manager/images/volume_left_active.png
new file mode 100644
index 0000000..cb1f105
--- /dev/null
+++ b/apps/system/style/sound_manager/images/volume_left_active.png
diff --git a/apps/system/style/sound_manager/images/volume_left_disabled.png b/apps/system/style/sound_manager/images/volume_left_disabled.png
new file mode 100644
index 0000000..1e78c6f
--- /dev/null
+++ b/apps/system/style/sound_manager/images/volume_left_disabled.png
diff --git a/apps/system/style/sound_manager/images/volume_right_active.png b/apps/system/style/sound_manager/images/volume_right_active.png
new file mode 100644
index 0000000..dcdee3a
--- /dev/null
+++ b/apps/system/style/sound_manager/images/volume_right_active.png
diff --git a/apps/system/style/sound_manager/images/volume_right_disabled.png b/apps/system/style/sound_manager/images/volume_right_disabled.png
new file mode 100644
index 0000000..d02eb4e
--- /dev/null
+++ b/apps/system/style/sound_manager/images/volume_right_disabled.png
diff --git a/apps/system/style/sound_manager/sound_manager.css b/apps/system/style/sound_manager/sound_manager.css
new file mode 100644
index 0000000..cdfaab3
--- /dev/null
+++ b/apps/system/style/sound_manager/sound_manager.css
@@ -0,0 +1,184 @@
+#volume {
+  text-align: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 40px;
+  -moz-transition: opacity 0.5s ease;
+  pointer-events: none;
+  display: none;
+  background-image: url("images/header_bg.png");
+}
+
+#volume > * {
+  line-height: 40px;
+  height: 40px;
+  display: inline-block;
+  float: left;
+  background-repeat: no-repeat, no-repeat;
+  background-position: center, center;
+}
+
+#volume span {
+  display: inline-block;
+  width: 25px;
+  float: left;
+}
+
+#volume span.vibration {
+  visibility: hidden;
+  margin-left: 5px;
+  background-image: url('images/vibration_disabled_icon.png');
+}
+
+#volume.vibration span.vibration {
+  background-image: url('images/vibration_enabled_icon.png');
+}
+
+#volume.mute span.mute-state {
+  background-image: url('images/speaker_mute_icon.png');
+}
+
+#volume span.mute-state {
+  background-image: url('images/speaker_regular_icon.png');
+}
+
+#volume span.volume {
+  margin-left: 5px;
+  background-image: url('images/speaker_loud_icon.png');
+}
+
+#volume.visible {
+  display: block;
+}
+
+#volume[data-channel="notification"] span.vibration {
+  visibility: visible;
+}
+
+#volume[data-channel="bt_sco"] div:nth-child(n+4),
+#volume[data-channel="content"] div:nth-child(n+4),
+#volume[data-channel="alarm"] div:nth-child(n+4),
+#volume[data-channel="notification"] div:nth-child(n+4) {
+  width: 12px;
+  margin-left: 2px;
+  background-image: url('images/volume_center_disabled.png');
+}
+
+#volume[data-channel="telephony"] div:nth-child(n+4) {
+  width: 42px;
+  margin-left: 2px;
+  background-image: url('images/volume_center_disabled.png');
+}
+
+#volume[data-channel="bt_sco"] div.active:nth-child(n+4),
+#volume[data-channel="content"] div.active:nth-child(n+4),
+#volume[data-channel="alarm"] div.active:nth-child(n+4),
+#volume[data-channel="notification"] div.active:nth-child(n+4),
+#volume[data-channel="telephony"] div.active:nth-child(n+4) {
+  background-image: url('images/volume_center_active.png');
+}
+
+#volume div:nth-child(3) {
+  background-image: url('images/volume_left_disabled.png');
+}
+
+#volume div.active:nth-child(3) {
+  background-image: url('images/volume_left_active.png');
+}
+
+#volume[data-channel="bt_sco"] div:nth-child(17),
+#volume[data-channel="alarm"] div:nth-child(17),
+#volume[data-channel="notification"] div:nth-child(17),
+#volume[data-channel="content"] div:nth-child(17),
+#volume[data-channel="telephony"] div:nth-child(7) {
+  background-image: url('images/volume_right_disabled.png');
+}
+
+#volume[data-channel="bt_sco"] div.active:nth-child(17),
+#volume[data-channel="alarm"] div.active:nth-child(17),
+#volume[data-channel="notification"] div.active:nth-child(17),
+#volume[data-channel="content"] div.active:nth-child(17),
+#volume[data-channel="telephony"] div.active:nth-child(7) {
+  background-image: url('images/volume_right_active.png');
+}
+
+#volume[data-channel="telephony"] div:nth-child(n+8) {
+  display: none;
+}
+
+#volume[data-channel="notification"] > div:nth-child(n+3),
+#volume[data-channel="alarm"] > div:nth-child(n+3),
+#volume[data-channel="bt_sco"] > div:nth-child(n+3),
+#volume[data-channel="content"] > div:nth-child(n+3) {
+  width: 12px;
+  background-size: 12px 10px;
+}
+
+#volume[data-channel="telephony"] > div:nth-child(n+3) {
+  width: 42px;
+  background-size: 42px 10px;
+}
+
+@media (orientation: landscape) and (width: 480px) {
+  #volume[data-channel="bt_sco"] div:nth-child(n+4),
+  #volume[data-channel="content"] div:nth-child(n+4),
+  #volume[data-channel="alarm"] div:nth-child(n+4),
+  #volume[data-channel="notification"] div:nth-child(n+4),
+  #volume[data-channel="telephony"] div:nth-child(n+4) {
+    width: 36px;
+    margin-left: 2px;
+    background-size: 36px 10px;
+    background-image: url('images/VolumeOverlay_Landscape_SegmentOff.png');
+  }
+
+  #volume[data-channel="telephony"] div:nth-child(n+8) {
+    display: none;
+  }
+
+  #volume[data-channel="bt_sco"] div.active:nth-child(n+4),
+  #volume[data-channel="content"] div.active:nth-child(n+4),
+  #volume[data-channel="alarm"] div.active:nth-child(n+4),
+  #volume[data-channel="notification"] div.active:nth-child(n+4),
+  #volume[data-channel="telephony"] div.active:nth-child(n+4) {
+    background-image: url('images/VolumeOverlay_Landscape_SegmentOn.png');
+  }
+
+  #volume div:nth-child(3) {
+    background-image: url('images/VolumeOverlay_Landscape_SegmentOff_left.png');
+  }
+
+  #volume div.active:nth-child(3) {
+    background-image: url('images/VolumeOverlay_Landscape_SegmentOn_left.png');
+  }
+
+  #volume[data-channel="bt_sco"] div:nth-child(17),
+  #volume[data-channel="content"] div:nth-child(17),
+  #volume[data-channel="alarm"] div:nth-child(17),
+  #volume[data-channel="notification"] div:nth-child(17),
+  #volume[data-channel="telephony"] div:nth-child(7) {
+    background-image: url('images/VolumeOverlay_Landscape_SegmentOff_right.png');
+  }
+
+  #volume[data-channel="bt_sco"] div.active:nth-child(17),
+  #volume[data-channel="content"] div.active:nth-child(17),
+  #volume[data-channel="alarm"] div.active:nth-child(17),
+  #volume[data-channel="notification"] div.active:nth-child(17),
+  #volume[data-channel="telephony"] div.active:nth-child(7) {
+    background-image: url('images/VolumeOverlay_Landscape_SegmentOn_right.png');
+  }
+
+  #volume[data-channel="notification"] > div:nth-child(n+3),
+  #volume[data-channel="alarm"] > div:nth-child(n+3),
+  #volume[data-channel="bt_sco"] > div:nth-child(n+3),
+  #volume[data-channel="content"] > div:nth-child(n+3) {
+    width: 22px;
+    background-size: 22px 10px;
+  }
+
+  #volume[data-channel="telephony"] > div:nth-child(n+3) {
+    width: 74px;
+    background-size: 74px 10px;
+  }
+}
diff --git a/apps/system/style/statusbar/images/call-forwarding.png b/apps/system/style/statusbar/images/call-forwarding.png
new file mode 100644
index 0000000..52d5a86
--- /dev/null
+++ b/apps/system/style/statusbar/images/call-forwarding.png
diff --git a/apps/system/style/statusbar/images/icons.png b/apps/system/style/statusbar/images/icons.png
new file mode 100644
index 0000000..81f4f4c
--- /dev/null
+++ b/apps/system/style/statusbar/images/icons.png
diff --git a/apps/system/style/statusbar/images/network-activity.gif b/apps/system/style/statusbar/images/network-activity.gif
new file mode 100644
index 0000000..5809833
--- /dev/null
+++ b/apps/system/style/statusbar/images/network-activity.gif
diff --git a/apps/system/style/statusbar/images/signal-searching.gif b/apps/system/style/statusbar/images/signal-searching.gif
new file mode 100644
index 0000000..f9b1da0
--- /dev/null
+++ b/apps/system/style/statusbar/images/signal-searching.gif
diff --git a/apps/system/style/statusbar/images/system-downloads.gif b/apps/system/style/statusbar/images/system-downloads.gif
new file mode 100644
index 0000000..bf24971
--- /dev/null
+++ b/apps/system/style/statusbar/images/system-downloads.gif
diff --git a/apps/system/style/statusbar/images/wifi-connecting.gif b/apps/system/style/statusbar/images/wifi-connecting.gif
new file mode 100644
index 0000000..6cf37dd
--- /dev/null
+++ b/apps/system/style/statusbar/images/wifi-connecting.gif
diff --git a/apps/system/style/statusbar/statusbar.css b/apps/system/style/statusbar/statusbar.css
new file mode 100644
index 0000000..e4530ad
--- /dev/null
+++ b/apps/system/style/statusbar/statusbar.css
@@ -0,0 +1,412 @@
+/* The status bar disregard the rem rule because we have only 16px icons for now */
+
+body, html {
+  font-family: MozTT, sans-serif;
+  font-weight: 500;
+  font-size: 10px;
+}
+
+#screen.lockscreen-camera > #statusbar {
+  display: none;
+}
+
+#statusbar {
+  overflow: hidden;
+  position: absolute;
+
+  width: 100%;
+  height: 20px;
+  top: 0;
+  left: 0;
+  background-color: #000;
+
+  padding: 2px 0;
+  -moz-box-sizing: border-box;
+}
+
+#statusbar > * {
+  pointer-events: none;
+  float: right;
+  margin: 0 2px;
+}
+
+#statusbar > .sb-start {
+  float: left;
+  -moz-transition: visibility 0.5s ease, -moz-transform 0.5s ease;
+}
+
+*[dir=rtl] #statusbar > * {
+  float: left;
+}
+
+*[dir=rtl] #statusbar > .sb-start {
+  float: right;
+}
+
+#statusbar > .sb-start-upper {
+  visibility: hidden;
+  position: absolute;
+  top: -20px;
+  left: 0;
+
+  -moz-transition: visibility 0.5s ease, -moz-transform 0.5s ease;
+}
+
+*[dir=rtl] #statusbar > .sb-start-upper {
+  left: auto;
+  right: 0;
+}
+
+.utility-tray #statusbar > .sb-start-upper {
+  visibility: visible;
+  -moz-transform: translateY(20px);
+}
+
+.utility-tray #statusbar > .sb-start {
+  visibility: hidden;
+  -moz-transform: translateY(20px);
+}
+
+#statusbar-label {
+  color: #919899;
+  font-size: 1.49rem; /* 6.5pt */
+  position: relative;
+  bottom: 1px;
+}
+
+#statusbar-time {
+  color: #fff;
+  font-size: 1.49rem; /* 6.5pt */
+  position: relative;
+  bottom: 2px;
+}
+
+#statusbar-time span {
+  margin: 0 0.3rem;
+  font-size: 1rem;
+}
+
+#screen.locked #statusbar-time {
+  display: none;
+}
+
+.sb-icon {
+  width: 16px;
+  height: 16px;
+
+  background: url('images/icons.png') no-repeat;
+}
+
+.sb-icon-battery {
+  width: 21px;
+}
+.sb-icon-battery:not([data-level]) {
+  background-position: -286px 0;
+}
+.sb-icon-battery[data-level="0"] {
+  background-position: 0 0;
+}
+.sb-icon-battery[data-level="10"] {
+  background-position: -26px 0;
+}
+.sb-icon-battery[data-level="20"] {
+  background-position: -52px 0;
+}
+.sb-icon-battery[data-level="30"] {
+  background-position: -78px 0;
+}
+.sb-icon-battery[data-level="40"] {
+  background-position: -104px 0;
+}
+.sb-icon-battery[data-level="50"] {
+  background-position: -130px 0;
+}
+.sb-icon-battery[data-level="60"] {
+  background-position: -156px 0;
+}
+.sb-icon-battery[data-level="70"] {
+  background-position: -182px 0;
+}
+.sb-icon-battery[data-level="80"] {
+  background-position: -208px 0;
+}
+.sb-icon-battery[data-level="90"] {
+  background-position: -234px 0;
+}
+.sb-icon-battery[data-level="100"] {
+  background-position: -260px 0;
+}
+
+.sb-icon-battery:not([data-level])[data-charging="true"],
+.sb-icon-battery[data-level="0"][data-charging="true"] {
+  background-position: 0 -20px;
+}
+.sb-icon-battery[data-level="10"][data-charging="true"] {
+  background-position: -26px -20px;
+}
+.sb-icon-battery[data-level="20"][data-charging="true"] {
+  background-position: -52px -20px;
+}
+.sb-icon-battery[data-level="30"][data-charging="true"] {
+  background-position: -78px -20px;
+}
+.sb-icon-battery[data-level="40"][data-charging="true"] {
+  background-position: -104px -20px;
+}
+.sb-icon-battery[data-level="50"][data-charging="true"] {
+  background-position: -130px -20px;
+}
+.sb-icon-battery[data-level="60"][data-charging="true"] {
+  background-position: -156px -20px;
+}
+.sb-icon-battery[data-level="70"][data-charging="true"] {
+  background-position: -182px -20px;
+}
+.sb-icon-battery[data-level="80"][data-charging="true"] {
+  background-position: -208px -20px;
+}
+.sb-icon-battery[data-level="90"][data-charging="true"] {
+  background-position: -234px -20px;
+}
+.sb-icon-battery[data-level="100"][data-charging="true"] {
+  background-position: -260px -20px;
+}
+
+.sb-icon-wifi[data-level="0"][data-connecting="true"] {
+  background: url('images/wifi-connecting.gif') no-repeat;
+  background-position: 0 0;
+}
+
+.sb-icon-wifi:not([data-level]),
+.sb-icon-wifi[data-level="0"] {
+  background-position: 0 -60px;
+}
+.sb-icon-wifi[data-level="1"] {
+  background-position: -21px -60px;
+}
+.sb-icon-wifi[data-level="2"] {
+  background-position: -42px -60px;
+}
+.sb-icon-wifi[data-level="3"] {
+  background-position: -63px -60px;
+}
+.sb-icon-wifi[data-level="4"] {
+  background-position: -84px -60px;
+}
+
+.sb-icon-data[data-type="H+"] {
+  background-position: 0 -80px;
+}
+
+.sb-icon-data[data-type="H"] {
+  background-position: -21px -80px;
+}
+
+.sb-icon-data[data-type="4G"] {
+  background-position: -42px -80px;
+}
+
+.sb-icon-data[data-type="3G"] {
+  background-position: -63px -80px;
+}
+
+.sb-icon-data[data-type="E"] {
+  background-position: -84px -80px;
+}
+
+.sb-icon-data[data-type="2G"] {
+  background-position: -105px -80px;
+}
+
+.sb-icon-data[data-type="circle"] {
+  background-position: -126px -80px;
+}
+
+.sb-icon-flight-mode {
+  background-position: 0 -40px;
+}
+
+.sb-icon-signal[data-level="-1"][data-searching="true"] {
+  background: url('images/signal-searching.gif') no-repeat;
+  background-position: 0 0;
+}
+
+.sb-icon-signal[data-level="-1"] {
+  background-position: -21px -40px;
+}
+
+.sb-icon-signal[data-emergency="true"],
+.sb-icon-signal[data-level="0"] {
+  background-position: -42px -40px;
+}
+
+.sb-icon-signal[data-level="1"] {
+  background-position: -63px -40px;
+}
+
+.sb-icon-signal[data-level="2"] {
+  background-position: -84px -40px;
+}
+
+.sb-icon-signal[data-level="3"] {
+  background-position: -105px -40px;
+}
+
+.sb-icon-signal[data-level="4"] {
+  background-position: -126px -40px;
+}
+
+.sb-icon-signal[data-level="5"] {
+  background-position: -147px -40px;
+}
+
+.sb-icon-signal {
+  /* default icon is the "no sim" icon */
+  background-position: -147px -80px;
+  position: relative;
+}
+
+.sb-icon-signal[data-roaming="true"]::after {
+  content: '';
+  position: absolute;
+  width: 8px;
+  height: 5px;
+  top: 0;
+  left: 0;
+  background: url('images/icons.png') no-repeat;
+  background-position: -168px -40px;
+}
+
+.sb-icon-network-activity {
+  background: url('images/network-activity.gif') no-repeat;
+  background-position: 0 0;
+}
+
+.sb-icon-headphones {
+  background-position: -189px -40px;
+}
+
+.sb-icon-geolocation {
+  background-position: -231px -40px;
+}
+
+.sb-icon-geolocation[data-active="true"] {
+  background-position: -210px -40px;
+}
+
+.sb-icon-recording {
+  background-position: -273px -40px;
+}
+
+.sb-icon-recording[data-active="true"] {
+  background-position: -252px -40px;
+}
+
+.sb-icon-alarm {
+  background-position: -294px -40px;
+}
+
+.sb-icon-tethering {
+  background-position: -126px -60px;
+}
+
+.sb-icon-tethering[data-active="true"] {
+  background-position: -105px -60px;
+}
+
+.sb-icon-bluetooth {
+  background-position: -252px -60px;
+}
+
+.sb-icon-bluetooth[data-active="true"] {
+  background-position: -231px -60px;
+}
+
+.sb-icon-mute {
+  background-position: -273px -60px;
+}
+
+.sb-icon-mute.vibration {
+  background-position: -210px -60px;
+}
+
+.sb-icon-usb {
+  background-position: -294px -60px;
+}
+
+.sb-icon-notification {
+  background: #000;
+  width: 32px;
+  position: relative;
+}
+
+.sb-icon-notification::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 16px;
+  height: 16px;
+
+  background: url('images/icons.png') no-repeat;
+  background-position: -189px -60px;
+}
+
+*[dir=rtl] .sb-icon-notification::before {
+  right: 0;
+  left: auto;
+}
+
+.sb-icon-notification[data-unread="true"]::before {
+  background-position: -168px -60px;
+}
+
+.sb-icon-notification::after {
+  content: attr(data-num);
+  position: absolute;
+  color: #666;
+  width: 16px;
+  height: 16px;
+  top: -2px;
+  right: 0;
+  padding: 0 1px;
+  font-size: 1.49rem; /* 6.5pt */
+}
+
+*[dir=rtl] .sb-icon-notification::after {
+  right: auto;
+  left: 0;
+}
+.sb-icon-notification[data-unread="true"]::after {
+  color: #27b9cf;
+}
+
+.sb-icon-sms {
+  background-position: -147px -60px;
+  position: relative;
+}
+
+.sb-icon-sms::before {
+  content: attr(data-num);
+  position: absolute;
+  color: #000;
+  top: 4px;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  font-size: 1.15rem; /*5pt  was 8px */
+}
+
+/* JW: should we show how many current download we have
+ * as in sb-icon-ms or sb-icon-notification ? */
+.sb-icon-system-downloads {
+  /* JW: waiting for the correct icon; in the mean time I made this one */
+  background: url('images/system-downloads.gif') no-repeat;
+  background-position: 0 0;
+}
+
+.sb-icon-call-forwarding {
+  /* Waiting for the correct icon. In the mean time we use this one. */
+  background: url('images/call-forwarding.png') no-repeat;
+  background-position: 0 0;
+}
diff --git a/apps/system/style/system/keyboard.css b/apps/system/style/system/keyboard.css
new file mode 100644
index 0000000..dab5939
--- /dev/null
+++ b/apps/system/style/system/keyboard.css
@@ -0,0 +1,28 @@
+#keyboard-frame {
+  /* See the new mozpasspointerevents attribute added in bug 796452 */
+  pointer-events: none;
+
+  position: absolute;
+  bottom: 0;
+
+  width: 100%;
+  height: 100%;
+
+  transform: translateY(0);
+  -moz-transition: visibility 0.2s ease, -moz-transform 0.2s ease;
+}
+
+#keyboard-frame.hide {
+  visibility: hidden;
+
+  transform: translateY(100%);
+}
+
+#keyboard-frame iframe {
+  position: absolute;
+  bottom: 0;
+
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
diff --git a/apps/system/style/system/system.css b/apps/system/style/system/system.css
new file mode 100644
index 0000000..af2a739
--- /dev/null
+++ b/apps/system/style/system/system.css
@@ -0,0 +1,579 @@
+html {
+  font-size: 10px;
+}
+
+@media screen and (min-width: 480px) {
+  html {
+    font-size: 13.3px;
+  }
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  padding: 0px;
+
+  overflow: hidden;
+
+  font-family: 'MozTT', sans-serif;
+  color: #fff;
+  font-size: 12px;
+}
+
+#screen {
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+
+  background-color: #000;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+}
+
+#screen.screenoff {
+  background: #000 !important;
+}
+
+#screen.screenoff * {
+  visibility: hidden !important;
+}
+
+/*
+ *  Poweroff animation
+ */
+#screen > div#poweroff-splash {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+}
+
+#screen > div#poweroff-splash.step1 {
+  animation: poweroff-splash-fade-in 0.5s;
+}
+
+@keyframes poweroff-splash-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.poweroff-ring {
+  display: block;
+  position: absolute;
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  margin-left: -30px;
+  margin-top: -30px;
+  left: 50%;
+  opacity: 0;
+}
+
+#poweroff-ring-1 {
+  top: 120px;
+  background-color: #e66600;
+}
+
+#poweroff-ring-2 {
+  top: 240px;
+  background-color: #dc4e00;
+}
+
+#poweroff-ring-3 {
+  top: 360px;
+  background-color: #d24500;
+}
+
+.poweroff-ring > span {
+  display: block;
+  position: absolute;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  margin: auto;
+  background-color: black;
+  width: 40px;
+  height: 40px;
+  margin-top: -20px;
+  margin-left: -20px;
+}
+
+#poweroff-ring-2 > span {
+  transform: scale(1.125);
+}
+
+#poweroff-ring-3 > span {
+  transform: scale(1.25);
+}
+
+/* Ring 1 : inner diameter scales from 40 pixel to 58 pixel */
+@keyframes ring1-scale {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1.45);
+  }
+}
+
+/* Ring 2 : inner diameter scales from 45 pixel to 59.5 pixel */
+@keyframes ring2-scale {
+  0% {
+    transform: scale(1.125);
+  }
+  100% {
+    transform: scale(1.4875);
+  }
+}
+
+/* Ring 3 : inner diameter scales from 50 pixel to 59 pixel */
+@keyframes ring3-scale {
+  0% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1.475);
+  }
+}
+
+@keyframes ring-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes ring-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+#screen > div#poweroff-splash.step2 > #poweroff-ring-1 {
+  animation: ring-fade-in  .4s ease-out  0s,
+             ring-fade-out .5s linear   .4s;
+}
+
+#screen > div#poweroff-splash.step2 > #poweroff-ring-2 {
+  animation: ring-fade-in  .4s ease-out .25s,
+             ring-fade-out .5s linear   .65s;
+}
+
+#screen > div#poweroff-splash.step2 > #poweroff-ring-3 {
+  animation: ring-fade-in  .4s ease-out .5s,
+             ring-fade-out .5s linear   .9s;
+}
+
+#screen > div#poweroff-splash.step2 > #poweroff-ring-1 > span {
+  animation: ring1-scale   .5s linear   .4s;
+}
+
+#screen > div#poweroff-splash.step2 > #poweroff-ring-2 > span {
+  animation: ring2-scale   .5s linear   .65s;
+}
+
+#screen > div#poweroff-splash.step2 > #poweroff-ring-3 > span {
+  animation: ring3-scale   .5s linear   .9s;
+}
+
+
+
+#system-overlay {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+
+  pointer-events: none;
+}
+
+#system-overlay.volume {
+  visibility: visible;
+}
+
+#windows {
+  position: absolute;
+  left: 0px;
+  width: 100%;
+  top: -100%;
+  height: 0;
+  max-height: 0;
+  border: 0px;
+  overflow: hidden;
+}
+
+#windows.active {
+  top: 0;
+  height: 100%;
+  max-height: 100%;
+}
+
+#windows > .appWindow {
+  position: fixed;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  left: 0;
+  top: 20px;
+
+  /* Need to leave this in here to prevent flickering. */
+  transform: scale(1);
+
+/*
+ * Do not specify height/width here!
+ * They should be handle executively in window_manager.js
+ *
+ */
+
+/*
+ * Disable this for now because it forces an expensive fallback path in
+ * Gecko.  The performance issue should be fixed by
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=697645 or a related bug.
+ *
+  border-radius: 8px;
+ */
+}
+
+#windows > .appWindow > iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+#screen.active-statusbar #windows > .appWindow {
+  top: 40px;
+}
+
+#windows > .appWindow:not(.homescreen) {
+  background-color: #fff;
+}
+
+#windows > .appWindow:not(.homescreen).default-background {
+  background: url('/shared/resources/branding/splash_screen_generic.png') center center no-repeat #fff;
+}
+
+#windows > .appWindow:not(.active):not(.homescreen):not(.opening):not(.closing) {
+  visibility: hidden;
+}
+
+#windows > .appWindow:not(.homescreen):not(.active):not(.inlineActivity):not(.opening) {
+  opacity: 0;
+  transform: scale(0.6);
+}
+
+#windows > .appWindow.opening {
+  transition: transform 0.25s ease, opacity 0.15s ease;
+}
+
+#windows.slow-transition > .appWindow.opening {
+  transition: transform 5s ease, opacity 3s ease;
+}
+
+#screen.cards-view > #windows > .appWindow.opening,
+#screen.cards-view > #windows > .appWindow.closing,
+#screen.switch-app > #windows > .appWindow.opening,
+#screen.switch-app > #windows > .appWindow.closing {
+  transition: transform 0.25s ease;
+  visibility: inherit;
+  opacity: 1;
+}
+
+#screen.switch-app > #windows.slow-transition > .appWindow.opening,
+#screen.switch-app > #windows.slow-transition > .appWindow.closing {
+  transition: transform 5s ease;
+}
+
+#screen.switch-app > #windows > .appWindow.opening-card {
+  transform: translateX(70%) scale(0.6);
+  visibility: inherit;
+  opacity: 1;
+}
+
+#screen.switch-app > #windows > .appWindow.opening-switching {
+  transform: scale(0.6);
+  transition: transform 0.25s ease;
+  visibility: inherit;
+  opacity: 1;
+}
+
+#screen.switch-app > #windows.slow-transition > .appWindow.opening-switching {
+  transition: transform 5s ease;
+}
+
+#screen.switch-app > #windows > .appWindow.closing-card {
+  transform: translateX(-70%) scale(0.6);
+  transition: transform 0.25s ease;
+  visibility: inherit;
+  opacity: 1;
+}
+
+#screen.switch-app > #windows.slow-transition > .appWindow.closing-card {
+  transition: transform 5s ease;
+}
+
+#windows > .appWindow.closing {
+  transition: transform 0.25s ease, opacity 0.15s ease 0.1s;
+}
+
+#windows.slow-transition > .appWindow.closing {
+  transition: transform 5s ease, opacity 3s ease 2s;
+}
+
+#windows > .appWindow.inlineActivity,
+#windows > .appWindow.hideBottom {
+  transform: translateY(100%);
+  transition: transform 0.25s ease, visibility 0.25s ease;
+}
+
+#windows.slow-transition > .appWindow.inlineActivity,
+#windows.slow-transition > .appWindow.hideBottom {
+  transition: transform 5s ease, visibility 5s ease;
+}
+
+#windows > .appWindow.back {
+  transition: transform 0.25s ease, visibility 0.25s ease;
+  transform: scale(0.86);
+}
+
+#windows > .appWindow.restored {
+  transform: none;
+  transition: transform 0.25s ease;
+}
+
+#windows > .appWindow.inlineActivity.active {
+  transform: none;
+}
+
+#screen > #windows > .appWindow.fullscreen-app {
+  top: 0;
+}
+
+#screen.attention > #windows > .appWindow.fullscreen-app,
+#screen.attention > #windowSprite,
+#screen.fullscreen-app.attention > #windowSprite {
+  height: calc(100% - 40px);
+  top: 40px;
+}
+
+#windowSprite.before-inline-activity {
+  transform: translateY(calc(100% - 1px));
+  opacity: 1;
+  visibility: visible;
+}
+
+#windowSprite.inline-activity-opening {
+  transition: transform 0.25s ease;
+  transform: translateY(0);
+  opacity: 1;
+  visibility: visible;
+}
+
+#windowSprite.inline-activity-opened {
+  transition: opacity 0.15s ease;
+
+  transform: translateY(0);
+  opacity: 0;
+  visibility: visible;
+}
+
+#windowSprite.before-open {
+  transform: scale(0.6);
+  /* 0.01 opacity is needed to make sure Gecko paints and fire
+     MozAfterPaint event for us. */
+  opacity: 0.01;
+  visibility: visible;
+}
+
+#windowSprite.opening {
+  transition: transform 0.25s ease, opacity 0.15s ease;
+
+  transform: scale(1);
+  opacity: 1;
+  visibility: visible;
+}
+
+#screen.trustedui #windowSprite.opening {
+  opacity: 0;
+}
+
+#windowSprite.opened {
+  transition: opacity 0.15s ease;
+
+  transform: scale(1);
+  opacity: 0;
+  visibility: visible;
+}
+
+#windowSprite.before-close {
+  transform: scale(1);
+  /* 0.01 opacity is needed to make sure Gecko paints and fire
+     MozAfterPaint event for us. */
+  opacity: 0.01;
+  visibility: visible;
+}
+
+#windowSprite.closing {
+  transition: opacity 0.05s ease;
+
+  transform: scale(1);
+  opacity: 1;
+  visibility: visible;
+}
+
+#windowSprite.closed {
+  transition: transform 0.25s ease, opacity 0.15s ease;
+
+  transform: scale(0.6);
+  opacity: 0;
+  visibility: visible;
+}
+
+.accessibility-invert {
+  filter: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxmaWx0ZXIKICAgICAgaWQ9ImludmVydEZpbHRlciIKICAgICAgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KICAgIDxmZUNvbG9yTWF0cml4CiAgICAgICAgdmFsdWVzPSItMSAwIDAgMCAxIDAgLTEgMCAwIDEgMCAwIC0xIDAgMSAwIDAgMCAxIDAgIiAvPgogIDwvZmlsdGVyPgo8L3N2Zz4K#invertFilter);
+}
+
+iframe.backgroundWindow {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  width: 1px;
+  height: 1px;
+  visibility: hidden;
+}
+
+#dialog-overlay {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 20px);
+  visibility: hidden;
+  pointer-events: none;
+}
+
+#screen.active-statusbar #dialog-overlay {
+  top: 40px;
+  height: calc(100% - 40px);
+}
+
+#screen:-moz-full-screen-ancestor #dialog-overlay,
+#screen.fullscreen-app #dialog-overlay {
+  top: 0;
+  height: 100%;
+}
+
+#screen:not(.crash-dialog) #crash-dialog {
+  visibility: hidden;
+}
+
+/* `.dialog` is set by system_dialog.js when a dialog is shown */
+#screen.dialog #dialog-overlay {
+  visibility: visible;
+  pointer-events: auto;
+}
+
+#screen.authentication-dialog #dialog-overlay,
+#screen.authentication-dialog #authentication-dialog,
+#screen.crash-dialog #dialog-overlay,
+#screen.crash-dialog #crash-dialog
+#screen.modal-dialog #dialog-overlay,
+#screen.modal-dialog #modal-dialog,
+#screen.popup #popup-container,
+#screen.trustedui #trustedui-container,
+#screen.trustedui #dialog-overlay {
+  visibility: visible;
+  pointer-events: auto;
+}
+
+@keyframes banner-bounce {
+  from, to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  12.5%, 87.5% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+#system-banner {
+  z-index: 0;
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(100%);
+}
+
+#system-banner.visible {
+  animation: banner-bounce 4s;
+  visibility: visible;
+}
+
+#system-banner button {
+  width: auto;
+}
+
+#system-banner[data-button="false"] button {
+  visibility: hidden;
+}
+
+#screen iframe.communication-frame {
+  visibility: hidden;
+}
+
+/*
+  Styles for FTU starting
+*/
+
+#screen.ftu > [data-z-index-level="app"] > .appWindow.homescreen,
+#screen.ftu > [data-z-index-level="app"] > .appWindow.homescreen.active {
+  opacity: 0;
+}
+
+#screen.ftuStarting #lockscreen {
+  display: none;
+}
+
+#screen.ftuStarting #statusbar {
+  opacity: 0;
+}
+
+/* For app error */
+
+.appWindow > iframe {
+  z-index: 1;
+}
+
+.appError {
+  display: none;
+  background-color: black;
+  z-index: 0;
+}
+
+.appWindow > .appError {
+  background-color: black;
+}
+
+.appError.visible {
+  z-index: 2;
+  display: block;
+}
diff --git a/apps/system/style/themes/default/banner.css b/apps/system/style/themes/default/banner.css
new file mode 100644
index 0000000..1a23fa7
--- /dev/null
+++ b/apps/system/style/themes/default/banner.css
@@ -0,0 +1,36 @@
+/* ----------------------------------
+ * BANNER
+ * Requires:
+    menus-dialogs/core.css
+ * ---------------------------------- */
+
+body[role="application"] section[role="dialog"].banner {
+  top: auto;
+  height: 8rem;
+  padding: 0;
+  text-align: center;
+}
+
+body[role="application"] section[role="dialog"].banner:after {
+  content: "";
+  display: inline-block;
+  vertical-align: middle;
+  width: 1px;
+  height: 100%;
+}
+
+body[role="application"] section[role="dialog"].banner p {
+  display: inline-block;
+  vertical-align: middle;
+  white-space: normal;
+  font-size: 1.6rem;
+  line-height: 1.4em;
+  max-width: 75%;
+  margin: 0;
+}
+
+body[role="application"] section[role="dialog"].banner p strong {
+  text-transform: uppercase;
+  color: #0995b0;
+  font-weight: normal;
+}
diff --git a/apps/system/style/themes/default/buttons.css b/apps/system/style/themes/default/buttons.css
new file mode 100644
index 0000000..f285c25
--- /dev/null
+++ b/apps/system/style/themes/default/buttons.css
@@ -0,0 +1,232 @@
+/* ----------------------------------
+
+ * BUTTONS: DEFAULT
+ * ---------------------------------- */
+[role="dialog"] button::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+
+[role="dialog"] button,
+[role="dialog"] a[role="button"] {
+  width: 100%;
+  height: 3.8rem;
+  margin: 0 0 1rem;
+  padding: 0 1.5rem;
+  -moz-box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background: #fafafa url(images/ui/default.png) repeat-x left bottom;
+  border: 1px solid #9f9f9f;
+  border-radius: 0.3rem;
+  font-size: 1.6rem;
+  font-family: 'MozTT', Sans-serif;
+  font-weight: 600;
+  line-height: 3.8rem;
+  color: #333;
+  text-align: center;
+  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
+  text-decoration: none;
+  outline: none;
+}
+
+/* Press (default & affirmative) */
+[role="dialog"] button:active,
+[role="dialog"] a[role="button"]:active,
+[role="dialog"] button.affirmative:active,
+[role="dialog"] a.affirmative[role="button"]:active  {
+  border-color: #008aaa;
+  background: #008aaa;
+  color: #333;
+}
+
+/* Affirmative */
+[role="dialog"] button.affirmative,
+[role="dialog"] a[role="button"].affirmative {
+  background-image: url(images/ui/affirmative.png);
+  background-color: #00caf2;
+  border-color: #00acce;
+}
+
+/* Negative */
+[role="dialog"] button.negative,
+[role="dialog"] a.negative[role="button"] {
+  background-image: url(images/ui/negative.png);
+  background-color: #b70404;
+  color: #fff;
+  text-shadow: -1px -1px 0 #830b0b;
+  border: none; 
+}
+
+/* Negative Press */
+[role="dialog"] button.negative:active,
+[role="dialog"] a[role="button"].negative:active {
+  background-image: url(images/ui/negative-press.png);
+  background-color: #890707;
+}
+
+/* Disabled (default & affirmative) */
+[role="dialog"] button[disabled="disabled"],
+[role="dialog"] a[role="button"][aria-disabled="true"],
+[role="dialog"] button[disabled="disabled"].affirmative,
+[role="dialog"] a[role="button"][aria-disabled="true"].affirmative {
+  background-image: url(images/ui/disabled-bright.png);
+  background-color: transparent;
+  border-color: #dadada;
+  color: #bcbcbc;
+}
+
+/* Disabled dark (default & affirmative) */
+[role="dialog"] menu button[disabled="disabled"],
+[role="dialog"] menu a[role="button"][aria-disabled="true"],
+[role="dialog"] menu button[disabled="disabled"].affirmative,
+[role="dialog"] menu a[role="button"][aria-disabled="true"].affirmative {
+  background-image: url(images/ui/disabled-dark.png);
+  background-color: transparent;
+  border: none;
+  color: #4a4a4a;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+/* Negative disabled */
+[role="dialog"] button[disabled="disabled"].negative,
+[role="dialog"] a[role="button"][aria-disabled="true"].negative {
+  background-image: url(images/ui/negative-disabled.png);
+  color: #fff;
+  text-shadow: none;
+}
+
+/* Icons in buttons */
+[role="dialog"] button span,
+[role="dialog"] a[role="button"] span {
+  float: left;
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: 0 0.5rem 0 -1rem;
+  background: transparent no-repeat center center;
+}
+
+[role="dialog"] button span.end,
+[role="dialog"] a[role="button"] span.end {
+  float: right;
+  margin: 0.3rem -1.5rem 0 1rem;
+}
+
+/* Icon base types */
+[role="dialog"] button span.goto,
+[role="dialog"] a[role="button"] span.goto {
+  background-image: url(images/icons/goto.png);
+}
+
+[role="dialog"] button span.launch,
+[role="dialog"] a[role="button"] span.launch {
+  background-image: url(images/icons/launch.png);
+  background-position: 1rem bottom;
+}
+
+[role="dialog"] button span.favorite,
+[role="dialog"] a[role="button"] span.favorite {
+  background-image: url(images/icons/favorite.png);
+}
+
+[role="dialog"] button span.call,
+[role="dialog"] a[role="button"] span.call {
+  background-image: url(images/icons/call.png);
+  background-position: center bottom;
+}
+
+[role="dialog"] button span.tick,
+[role="dialog"] a[role="button"] span.tick {
+  background-image: url(images/icons/tick.png);
+}
+
+
+/* ----------------------------------
+ * BUTTONS: LIST
+ * ---------------------------------- */
+[role="dialog"] .buttons-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+[role="dialog"] .buttons-list label {
+  font: 1.4rem/1em "MozTT", Sans-serif;
+  text-transform: uppercase;
+  display: block;
+  padding-left: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+/* Default */
+[role="dialog"] .buttons-list button,
+[role="dialog"] .buttons-list a[role="button"] {
+  background: #e7e7e7;
+  border-color: #b6b6b6;
+  text-align: left;
+  font-size: 1.4rem;
+  line-height: 2.9rem;
+  position: relative;
+  overflow: visible;
+}
+
+[role="dialog"] .buttons-list a[role="button"]:after,
+[role="dialog"] .buttons-list button:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  background: url(images/ui/shadow.png) repeat-x left bottom;
+  height: 2px;
+  margin-top: 1px;
+  pointer-events: none;
+}
+
+/* Press */
+[role="dialog"] .buttons-list button:active,
+[role="dialog"] .buttons-list a[role="button"]:active {
+  border-color: #008aaa;
+  background: #008aaa;
+  color: #333;
+}
+
+[role="dialog"] .buttons-list a[role="button"]:active:after,
+[role="dialog"] .buttons-list button:active:after {
+  opacity: 0;
+}
+
+/* Disabled */
+[role="dialog"] .buttons-list button[disabled="disabled"],
+[role="dialog"] .buttons-list a[role="button"][aria-disabled="true"] {
+  background: #ededed;
+  border-color: #d3d3d3;
+  color: #a6a6a6;
+}
+
+[role="dialog"] .buttons-list button[disabled="disabled"]:after,
+[role="dialog"] .buttons-list a[role="button"][aria-disabled="true"]:after {
+  opacity: 1;
+}
+
+
+/* Compact mode */
+[role="dialog"] .buttons-list[data-mode="compact"] { margin-bottom: 1rem; }
+[role="dialog"] .buttons-list[data-mode="compact"] button,
+[role="dialog"] .buttons-list[data-mode="compact"] a[role="button"] {
+  margin: -1px 0;
+  border-radius: 0;
+}
+
+[role="dialog"] .buttons-list[data-mode="compact"] li:first-child button,
+[role="dialog"] .buttons-list[data-mode="compact"] li:first-child a[role="button"] {
+  border-radius: 0.3rem 0.3rem 0 0;
+}
+
+[role="dialog"] .buttons-list[data-mode="compact"] li:last-child button,
+[role="dialog"] .buttons-list[data-mode="compact"] li:last-child a[role="button"] {
+  border-radius:0 0 0.3rem 0.3rem;
+}
diff --git a/apps/system/style/themes/default/core.css b/apps/system/style/themes/default/core.css
new file mode 100644
index 0000000..c3a3170
--- /dev/null
+++ b/apps/system/style/themes/default/core.css
@@ -0,0 +1,101 @@
+/* ----------------------------------
+ * CORE STYLES FOR DIALOGS AND MENUS
+ * Is required for all the subcomponents (except banner)
+ * ---------------------------------- */
+
+[role="dialog"] {
+  background: url(images/ui/pattern.png) repeat left top, url(images/ui/gradient.png) no-repeat left top;
+  background-size: auto auto, 100% 100%;
+  overflow: hidden;
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  white-space: nowrap;
+  padding: 1.5rem 0 7rem;
+  font-family: "MozTT", Sans-serif;
+  color: #fff;
+}
+
+[role="dialog"]:before {
+  content: "";
+  display: inline-block;
+  vertical-align: middle;
+  width: 1px;
+  height: 100%;
+}
+
+[role="dialog"] .inner {
+  padding: 0 2.5rem 0 2rem;
+  -moz-box-sizing: padding-box;
+  width: 100%;
+  display: inline-block;
+  vertical-align: middle;
+  white-space: normal;  
+}
+
+[role="dialog"] h3 {
+  font-family: 'MozTT', Sans-serif;
+  font-weight: normal;
+  font-size: 1.6rem;
+  line-height: 1em;
+  color: #fff;
+  border-bottom: 0.1rem solid #686868;
+  margin: 0 0 1rem;
+  padding-bottom: 1rem;
+}
+
+[role="dialog"] menu:not([type="toolbar"]) {
+  white-space: nowrap;
+  margin: 0;
+  padding: 1.5rem;
+  border-top: solid 1px rgba(255, 255, 255, 0.1);
+  background: #2d2d2d url(images/ui/pattern.png) repeat left top;
+  display: block;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+[role="dialog"] menu:not([type="toolbar"]) button:last-child,
+[role="dialog"] menu:not([type="toolbar"]) a[role="button"]:last-child {
+  margin-left: 1rem;
+}
+
+[role="dialog"] menu:not([type="toolbar"]) button,
+[role="dialog"] menu:not([type="toolbar"]) a[role="button"],
+[role="dialog"] menu:not([type="toolbar"]) button:first-child,
+[role="dialog"] menu:not([type="toolbar"]) a[role="button"]:first-child {
+  margin: 0;
+}
+
+[role="dialog"] menu:not([type="toolbar"])[data-items="2"] button,
+[role="dialog"] menu:not([type="toolbar"])[data-items="2"] a[role="button"] {
+  width: -moz-calc((100% - 1rem) / 2);
+}
+
+
+/* ----------------------------------
+ * INLINE BANNER
+ * ---------------------------------- */
+
+[role="dialog"].inline {
+  position: relative;
+  margin: -0.4rem 0 0 0;
+  padding: 1rem 0 0 0;
+  background: rgba(0,0,0,0.83);
+}
+
+[role="dialog"].inline p {
+  border: 0;
+  padding: 1rem 1.5rem; 
+}
+
+[role="dialog"].inline menu {
+  position: relative;
+  background: none;
+}
diff --git a/apps/system/style/themes/default/images/noise.png b/apps/system/style/themes/default/images/noise.png
new file mode 100644
index 0000000..5f5428f
--- /dev/null
+++ b/apps/system/style/themes/default/images/noise.png
diff --git a/apps/system/style/themes/default/images/notifications.png b/apps/system/style/themes/default/images/notifications.png
new file mode 100644
index 0000000..f5e966d
--- /dev/null
+++ b/apps/system/style/themes/default/images/notifications.png
diff --git a/apps/system/style/themes/default/images/notifications/close.png b/apps/system/style/themes/default/images/notifications/close.png
new file mode 100644
index 0000000..9604f1b
--- /dev/null
+++ b/apps/system/style/themes/default/images/notifications/close.png
diff --git a/apps/system/style/themes/default/images/tasks/close-active.png b/apps/system/style/themes/default/images/tasks/close-active.png
new file mode 100644
index 0000000..b2666b8
--- /dev/null
+++ b/apps/system/style/themes/default/images/tasks/close-active.png
diff --git a/apps/system/style/themes/default/images/tasks/close.png b/apps/system/style/themes/default/images/tasks/close.png
new file mode 100644
index 0000000..9604f1b
--- /dev/null
+++ b/apps/system/style/themes/default/images/tasks/close.png
diff --git a/apps/system/style/themes/default/images/ui/affirmative.png b/apps/system/style/themes/default/images/ui/affirmative.png
new file mode 100644
index 0000000..42aed39
--- /dev/null
+++ b/apps/system/style/themes/default/images/ui/affirmative.png
diff --git a/apps/system/style/themes/default/images/ui/default.png b/apps/system/style/themes/default/images/ui/default.png
new file mode 100644
index 0000000..2ff298a
--- /dev/null
+++ b/apps/system/style/themes/default/images/ui/default.png
diff --git a/apps/system/style/themes/default/images/ui/gradient.png b/apps/system/style/themes/default/images/ui/gradient.png
new file mode 100644
index 0000000..9097844
--- /dev/null
+++ b/apps/system/style/themes/default/images/ui/gradient.png
diff --git a/apps/system/style/themes/default/images/ui/pattern.png b/apps/system/style/themes/default/images/ui/pattern.png
new file mode 100644
index 0000000..4f7bc8b
--- /dev/null
+++ b/apps/system/style/themes/default/images/ui/pattern.png
diff --git a/apps/system/style/themes/default/images/ui/time_pattern.png b/apps/system/style/themes/default/images/ui/time_pattern.png
new file mode 100644
index 0000000..c86eba0
--- /dev/null
+++ b/apps/system/style/themes/default/images/ui/time_pattern.png
diff --git a/apps/system/style/themes/default/menus.css b/apps/system/style/themes/default/menus.css
new file mode 100644
index 0000000..5b36c71
--- /dev/null
+++ b/apps/system/style/themes/default/menus.css
@@ -0,0 +1,70 @@
+/* ----------------------------------
+ * ACTION / OBJECT MENU
+ * Requires:
+    menu-dialoges/core.css
+ * ---------------------------------- */
+
+[role="dialog"] menu.actions {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  display: block;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+[role="dialog"] menu.actions h3 {
+  display: block;
+  margin: 0 1.5rem;
+}
+
+[role="dialog"] menu.actions > ul {
+  list-style: none;
+  padding: 0;
+  margin: 0.5rem 0 0 0;
+  display: block;
+  overflow: hidden;
+}
+
+[role="dialog"] menu.actions > ul > li {
+  padding: 1rem 1.5rem 0 1.5rem;
+  margin: 0;
+  display: block;
+  overflow: hidden;
+  border: none;
+  height: auto;
+  line-height: normal;
+}
+
+[role="dialog"] menu.actions > ul > li:last-child {
+  border-top: solid 1px rgba(255, 255, 255, 0.1);
+  background: #2d2d2d url(images/ui/pattern.png) repeat left top;
+  margin-top: 1.5rem;
+}
+
+[role="dialog"] menu.actions > ul > li:not(:last-child) > button,
+[role="dialog"] menu.actions > ul > li:not(:last-child) > a[role="button"] {
+  font-size: 1.4rem;
+  color: #fff;
+  text-shadow: none;
+  text-align: left;
+  padding: 0 1rem;
+  background: #4E4E4E padding-box;
+  border: solid 1px rgba(0, 0, 0, 0.25);
+}
+
+[role="dialog"] menu.actions > ul > li:not(:last-child) > button:active,
+[role="dialog"] menu.actions > ul > li:not(:last-child) > a[role="button"]:active {
+  background-color: #006f86;
+  color: #333;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+
+[role="dialog"] menu.actions > ul > li:last-child > button,
+[role="dialog"] menu.actions > ul > li:last-child > a[role="button"] {
+  margin: 0.5rem 0 1rem 0;
+}
diff --git a/apps/system/style/themes/default/system.css b/apps/system/style/themes/default/system.css
new file mode 100644
index 0000000..27e59cf
--- /dev/null
+++ b/apps/system/style/themes/default/system.css
@@ -0,0 +1,27 @@
+/* Windows */
+
+div.windowSprite {
+  background: url("images/noise.png") repeat scroll 50% 50%, #373a3d;
+}
+
+/* Tasks Manager */
+
+#cardsView li {
+  background-color: #00f;
+}
+
+#cardsView li > a {
+  background: url('images/tasks/close.png') no-repeat;
+}
+
+#cardsView li > a:active {
+  background: url('images/tasks/close-active.png') no-repeat;
+}
+
+#cardsView li > h1 {
+  text-align: center;
+  color: #fff;
+  font-size: 2em;
+  text-shadow: #000 0 2px 1px;
+}
+
diff --git a/apps/system/style/trusted_ui/trusted_ui.css b/apps/system/style/trusted_ui/trusted_ui.css
new file mode 100644
index 0000000..5367fcc
--- /dev/null
+++ b/apps/system/style/trusted_ui/trusted_ui.css
@@ -0,0 +1,82 @@
+#trustedui-container {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  transition: transform ease 0.5s, opacity 0.5s;
+}
+
+#screen #trustedui-container.up {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+#trustedui-inner {
+  position: absolute;
+  width: 86%;
+  height: 86%;
+  top: 7%;
+  left: 7%;
+  transition: transform ease 0.5s, opacity 0.5s;
+}
+
+#screen:not(.trustedui) #trustedui-inner {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+#screen.trustedui #trustedui-container {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+}
+
+#screen.trustedui #trustedui-container.closing,
+#screen:not(.trustedui) #trustedui-container.closing {
+  opacity: 0;
+  transform: scale(0.6);
+}
+
+#trustedui-throbber {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  z-index: 1;
+}
+
+#trustedui-throbber.loading {
+  height: 4px;
+  background-image: url('../shared/progress.gif');
+}
+
+#trustedui-inner > .title-container {
+  height: 5rem;
+  width: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+}
+
+#trustedui-inner > #trustedui-frame-container {
+  position: absolute;
+  top: 5rem;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 5rem);
+  border: none;
+  background-color: #fff;
+}
+
+#trustedui-frame-container > iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+#trustedui-inner iframe:not(.selected) {
+  display: none;
+}
diff --git a/apps/system/style/ttlview/ttlview.css b/apps/system/style/ttlview/ttlview.css
new file mode 100644
index 0000000..b10bde7
--- /dev/null
+++ b/apps/system/style/ttlview/ttlview.css
@@ -0,0 +1,16 @@
+#debug-ttl {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  height: 20px;
+  background-color: darkgreen;
+  pointer-events: none;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: right;
+  font-weight: bold;
+  overflow: hidden;
+  padding-left: 3px;
+  padding-right: 3px;
+}
diff --git a/apps/system/style/update_manager/images/grey-noise-bg.png b/apps/system/style/update_manager/images/grey-noise-bg.png
new file mode 100644
index 0000000..0f83b8f
--- /dev/null
+++ b/apps/system/style/update_manager/images/grey-noise-bg.png
diff --git a/apps/system/style/update_manager/images/iconindicator_download_24x24.png b/apps/system/style/update_manager/images/iconindicator_download_24x24.png
new file mode 100644
index 0000000..536a43b
--- /dev/null
+++ b/apps/system/style/update_manager/images/iconindicator_download_24x24.png
diff --git a/apps/system/style/update_manager/images/loader.png b/apps/system/style/update_manager/images/loader.png
new file mode 100644
index 0000000..0146695
--- /dev/null
+++ b/apps/system/style/update_manager/images/loader.png
diff --git a/apps/system/style/update_manager/update_manager.css b/apps/system/style/update_manager/update_manager.css
new file mode 100644
index 0000000..39f37d6
--- /dev/null
+++ b/apps/system/style/update_manager/update_manager.css
@@ -0,0 +1,253 @@
+html, body {
+  font-family: 'MozTT', sans-serif;
+  font-size: 10px;
+}
+
+#update-manager-container {
+  display: none;
+}
+
+#update-manager-container.displayed {
+  display: block;
+}
+
+#update-manager-container > .activity {
+  display: none;
+  float: left;
+  width: 32px;
+  height: 30px;
+  margin: 14px 10px;
+  background-image: url(images/loader.png);
+  background-position: center center;
+  background-repeat: no-repeat;
+  animation: 0.9s fn-rotate infinite linear;
+}
+
+@keyframes fn-rotate {
+  from {
+    transform: rotate(1deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+#update-manager-container.downloading > .activity {
+  display: block;
+}
+
+#update-manager-container > .icon {
+  float: left;
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin: 18px 10px;
+}
+
+#update-manager-container > .icon,
+#update-manager-toaster > .icon {
+  background-image: url('images/iconindicator_download_24x24.png');
+}
+
+#update-manager-container.downloading > .icon {
+  display: none;
+}
+
+#update-manager-toaster > .icon {
+  float: left;
+  display: block;
+  width: 2.4rem;
+  height: 2.4rem;
+  margin: 1.3rem;
+}
+
+#update-manager-toaster > .message {
+  position: absolute;
+  left: 50px;
+  top: 10px;
+  width: -moz-calc(100% - 55px);
+  color: #52b8cc;
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 2.8rem;
+}
+
+#update-manager-container > .message {
+  margin: 10px 0 0 50px;
+  width: -moz-calc(100% - 55px);
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.9rem;
+  color: #FFFFFF;
+}
+
+#update-manager-container > .message > span {
+  display: block;
+  color: #bfbfbf;
+  font-size: 1.4rem;
+  line-height: 1.9rem;
+  font-weight: 400;
+  text-overflow: ellipsis;
+}
+
+#update-manager-toaster > .message > span {
+  display: none;
+}
+
+#update-manager-toaster {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 50px;
+  overflow: hidden;
+  background-image: url('images/grey-noise-bg.png');
+  background-repeat: repeat-x;
+  -moz-box-sizing: border-box;
+  border-bottom: 1px #2c2c2c solid;
+  -moz-transform: translateY(-50px);
+  -moz-transition: -moz-transform .3s ease-in-out;
+}
+
+#update-manager-toaster.displayed {
+  -moz-transform: translateY(0);
+}
+
+#updates-viaDataConnection-dialog,
+#updates-download-dialog {
+  padding-bottom: 4.9rem;
+  padding-top: 0;
+  display: none;
+}
+
+#updates-viaDataConnection-dialog.visible,
+#updates-download-dialog.visible {
+  display: inline-block;
+  pointer-events: auto;
+}
+
+#updates-viaDataConnection-dialog h1,
+#updates-download-dialog h1 {
+  font-size: 1.9rem;
+  color: #fff;
+  padding: 1.5rem 1rem 1.1rem 1rem;
+  background: rgba(255, 255, 255, 0.0);
+}
+
+#updates-viaDataConnection-dialog h1 {
+  padding-left: 2.8rem;
+  height: 2.4rem;
+  line-height: 2.4rem;
+  background: url('images/iconindicator_download_24x24.png') no-repeat scroll 0 50% transparent;
+  border: none;
+}
+
+#updates-viaDataConnection-dialog section,
+#updates-download-dialog section {
+  height: auto;
+  line-height: 3.5rem;
+  overflow-y: scroll;
+  max-height: -moz-calc(100% - 3.8rem);
+  color: #ebebeb;
+  font-size: 2.5rem;
+}
+
+#updates-download-dialog ul {
+  list-style: none;
+  margin-top: 0.4rem;
+  padding-left: 0;
+}
+
+#updates-download-dialog li {
+  height: 5rem;
+  margin: 0 1rem;
+  border-top: solid 1px rgba(255, 255, 255, 0.05);
+}
+
+#updates-download-dialog li:first-child {
+  margin-top: 0;
+  border-top: 0;
+}
+
+#updates-download-dialog div {
+  display: block;
+  font-weight: 500;
+  color: #ebebeb;
+  font-size: 1.4rem;
+  line-height: 0.6rem;
+}
+
+#updates-download-dialog li .name {
+  font-size: 1.5rem;
+  line-height: 3rem;
+  height: 3rem;
+  color: white;
+  font-weight: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#updates-download-dialog li.nosize .name {
+  line-height: 5rem;
+  height: 5rem;
+}
+
+#updates-download-dialog label {
+  display: inline-block;
+  height: 5rem;
+  float: right;
+  color: #ebebeb;
+  line-height: 5rem;
+  font-weight: 300;
+  font-size: 1.4rem;
+}
+
+#updates-download-dialog label.required {
+  width: 10rem;
+  right: 0.5rem;
+  text-align: right;
+  text-transform: uppercase;
+  height: 3rem;
+  line-height: 2.9rem;
+}
+
+#updates-download-dialog p {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 6.8rem;
+  height: 6.6rem;
+  padding: 0.5rem 1.8rem;
+  margin: 0;
+
+  background-color: rgba(0, 0, 0, 0.4);
+  border-top: solid 1px rgba(255, 255, 255, 0.2);
+  overflow-y: scroll;
+
+  font-size: 1.6rem;
+  white-space: normal;
+}
+
+#updates-download-dialog[data-nowifi="true"] section {
+  /* Fixing at the top of the screen to properly make room for the warning */
+  position: absolute;
+  top: 20px;
+  max-height: calc(100% - 15rem - 20px);
+}
+
+#updates-download-dialog #updates-download-button[data-online="false"] {
+  visibility: collapse;
+}
+
+#updates-download-dialog #updates-offline-warning,
+#updates-download-dialog #updates-data-connection-warning,
+#updates-download-dialog[data-online="false"] #updates-download-button {
+  visibility: collapse;
+}
+
+#updates-download-dialog[data-online="false"] #updates-offline-warning,
+#updates-download-dialog[data-online="true"][data-nowifi="true"][data-data-connection-inline-warning="true"] #updates-data-connection-warning {
+  visibility: visible;
+}
diff --git a/apps/system/style/utility_tray/images/grippy.png b/apps/system/style/utility_tray/images/grippy.png
new file mode 100644
index 0000000..c8db064
--- /dev/null
+++ b/apps/system/style/utility_tray/images/grippy.png
diff --git a/apps/system/style/utility_tray/utility_tray.css b/apps/system/style/utility_tray/utility_tray.css
new file mode 100644
index 0000000..8d9754e
--- /dev/null
+++ b/apps/system/style/utility_tray/utility_tray.css
@@ -0,0 +1,29 @@
+#screen.lockscreen-camera > #utility-tray {
+  display: none;
+}
+
+#screen.utility-tray > #utility-tray {
+  visibility: visible;
+}
+
+#utility-tray {
+  position: absolute;
+  top: -moz-calc(-100% + 40px);
+  width: -moz-calc(100%);
+  height: -moz-calc(100% - 20px);
+  background-color: rgba(0, 0, 0, 0.7);
+  visibility: hidden;
+}
+
+#utility-tray-grippy {
+  pointer-events: none;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 20px;
+
+  border-bottom: 1px solid #111;
+  border-top: 1px solid #111;
+
+  background: #111 url('images/grippy.png') no-repeat 50% 50%;
+}
diff --git a/apps/system/style/value_selector/date_picker.css b/apps/system/style/value_selector/date_picker.css
new file mode 100644
index 0000000..b0bc654
--- /dev/null
+++ b/apps/system/style/value_selector/date_picker.css
@@ -0,0 +1,152 @@
+/* override section[role="dialog"] h3 */
+#date-picker h3 {
+  font-family: 'MozTT', Sans-serif;
+  font-weight: normal;
+  font-size: 1.6rem;
+  line-height: 1em;
+  color: #fff;
+  border-bottom: 0.1rem solid #686868;
+  margin: 0 2.5rem 1rem 2rem;
+  padding-bottom: 1rem;
+}
+
+/* specific component code for date picker */
+#date-picker {
+  height: 87.5%;
+  width: calc(100% + 5px);
+  padding: 0;
+  font-size: 2.2rem;
+  line-height: 1em;
+  margin-left: -5px;
+  display: inline-block;
+  vertical-align: middle;
+  white-space: normal;
+}
+
+#date-picker ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+#date-picker-controls > button {
+  float: none;
+  width: auto;
+  text-overflow: clip;
+  font: 0/0 a;
+  position: absolute;
+  top: 0.5rem;
+  z-index: 100;
+  width: 7.5rem;
+  height: 4.5rem;
+  border: none;
+  background: transparent no-repeat center center;
+}
+
+#date-picker-controls {
+  position: relative;
+  overflow: hidden;
+}
+
+#date-picker-controls h1 {
+  font-weight: 200;
+  font-size: 2.2rem;
+  line-height: 1em;
+  text-align: center;
+  margin: 1.5rem 0px 2rem;
+}
+
+#date-picker-controls button.next {
+  background-image: url(images/icons/next.png);
+  right: 0;
+}
+
+#date-picker-controls button.previous {
+  background-image: url(images/icons/prev.png);
+  left: 0;
+}
+
+#date-picker:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 13.4rem;
+  bottom: 0;
+  background: url(images/ui/shadow.png) repeat-y left top, url(images/ui/shadow-invert.png) repeat-y right top;
+  pointer-events: none;
+}
+
+#date-picker ol {
+  width: 100%;
+  overflow: hidden;
+  clear: both;
+}
+
+#date-picker li {
+  width: 14.285%;
+  text-align: center;
+  float: left;
+}
+
+#date-picker-weekdays li {
+  width: 14.285%;
+  font-size: 1.1rem;
+  line-height: 1em;
+  font-weight: normal;
+  text-transform: uppercase;
+  background: #333;
+  padding: 0.5rem 0.2rem;
+  border-top: solid 1px #000;
+}
+
+#date-picker-container {
+  border-bottom: 1px solid #000;
+}
+
+#date-picker-container li {
+  border: solid 1px #000;
+  border-bottom: none;
+  line-height: 4.5rem;
+  height: 4.5rem;
+}
+
+#date-picker-container .weeks-4 li {
+  line-height: 5.625rem;
+  height: 5.625rem;
+}
+
+#date-picker-container .weeks-6 li {
+  line-height: 3.75rem;
+  height: 3.75rem;
+}
+
+#date-picker-container li > span {
+  display: block;
+  font-weight: 200;
+  text-align: center;
+  transition: background 0.2s ease;
+  border: solid 1px #555;
+  border-left: none;
+  border-bottom: none;
+}
+
+#date-picker-container li.past span {
+  color: #717171;
+}
+
+#date-picker-container li.present {
+  background: url(images/ui/pattern-current.png) repeat left top;
+}
+
+#date-picker-container span.selected  {
+  background: #00A5C5;
+}
+
+#date-picker-container ol li:last-child {
+  border-right: none;
+}
+
+#date-picker * {
+  -moz-box-sizing: border-box;
+}
diff --git a/apps/system/style/value_selector/images/icons/next.png b/apps/system/style/value_selector/images/icons/next.png
new file mode 100644
index 0000000..82e1515
--- /dev/null
+++ b/apps/system/style/value_selector/images/icons/next.png
diff --git a/apps/system/style/value_selector/images/icons/prev.png b/apps/system/style/value_selector/images/icons/prev.png
new file mode 100644
index 0000000..387fce9
--- /dev/null
+++ b/apps/system/style/value_selector/images/icons/prev.png
diff --git a/apps/system/style/value_selector/images/ui/pattern-current.png b/apps/system/style/value_selector/images/ui/pattern-current.png
new file mode 100644
index 0000000..426d7b2
--- /dev/null
+++ b/apps/system/style/value_selector/images/ui/pattern-current.png
diff --git a/apps/system/style/value_selector/images/ui/shadow-invert.png b/apps/system/style/value_selector/images/ui/shadow-invert.png
new file mode 100644
index 0000000..68b2d5b
--- /dev/null
+++ b/apps/system/style/value_selector/images/ui/shadow-invert.png
diff --git a/apps/system/style/value_selector/images/ui/shadow.png b/apps/system/style/value_selector/images/ui/shadow.png
new file mode 100644
index 0000000..41f9209
--- /dev/null
+++ b/apps/system/style/value_selector/images/ui/shadow.png
diff --git a/apps/system/style/value_selector/spin_date_picker.css b/apps/system/style/value_selector/spin_date_picker.css
new file mode 100644
index 0000000..722d5fc
--- /dev/null
+++ b/apps/system/style/value_selector/spin_date_picker.css
@@ -0,0 +1,249 @@
+/* ----------- SpinDateSelectorView ---------- */
+#spin-date-picker .picker-bar {
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: hidden;
+  width: 85%;
+  font-size: 8px;
+}
+
+#spin-date-picker .picker-bar-gradient {
+  -moz-border-top-colors:
+    rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.3)
+    rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1)
+    rgba(0, 0, 0, 0.05);
+
+  -moz-border-bottom-colors:
+    rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.3)
+    rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1)
+    rgba(0, 0, 0, 0.05);
+
+  border-top: solid 0.7rem;
+  border-bottom: solid 0.7rem;
+  border-left:  1px solid #111;
+  border-right: 1px solid #111;
+
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  -moz-box-sizing: border-box;
+}
+
+#spin-date-picker .picker-container {
+  width: 100%;
+  position: relative;
+  padding-top: 8.5rem;
+  height: 16rem;
+  overflow: hidden;
+}
+
+#spin-date-picker .value-indicator-wrapper {
+  -moz-border-top-colors:
+    rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.15)
+    rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3)  rgba(0, 0, 0, 0.4)
+    rgba(0, 0, 0, 0.5);
+
+  -moz-border-bottom-colors:
+    rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.15)
+    rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.4)
+    rgba(0, 0, 0, 0.5);
+
+  border-top: solid 0.7rem;
+  border-bottom: solid 0.7rem;
+  position: absolute;
+  height: 6rem;
+  width: 100%;
+  pointer-events: none;
+}
+
+#spin-date-picker .value-indicator-hover {
+  pointer-events: none;
+  background-color: #00A5C5;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  right:0;
+}
+
+div.animation-on {
+  -moz-transition-duration: 0.5s;
+  -moz-transition-property: top, left;
+}
+
+.picker-unit {
+  position: relative;
+  font: 2.5rem/8rem 'MozTT',sans-serif;
+  color: #FFF;
+  text-align: center;
+  vertical-align: middle;
+  width: 100%;
+  height: 6rem;
+  pointer-events: none;
+}
+
+#spin-date-picker .picker-bar-background {
+  background: url("../themes/default/images/ui/time_pattern.png") repeat scroll left top transparent;
+  position: absolute;
+  width: 73px;
+  height: 100%;
+  right: 0;
+  top: 0;
+}
+
+#spin-date-picker .left-picker-separator {
+  position: absolute;
+  width: 0.2rem;
+  height: 100%;
+  top: 0;
+  left: 54px;
+  background: -moz-linear-gradient(center left, #555 50%, #000 50%);
+  pointer-events: none;
+}
+
+#spin-date-picker .right-picker-separator {
+  position: absolute;
+  width: 0.2rem;
+  height: 100%;
+  top: 0;
+  right: 73px;
+  background: -moz-linear-gradient(center left, #555 50%, #000 50%);
+  pointer-events: none;
+}
+
+#spin-date-picker .value-picker-date-wrapper {
+  position: absolute;
+  width: 54px;
+  height: 100%;
+  top: 10em;
+  left: 0;
+}
+
+#spin-date-picker .value-picker-month-wrapper {
+  position: absolute;
+  width: -moz-calc(100% - 127px);
+  height: 100%;
+  top: 10em;
+  left: 54px;
+}
+
+#spin-date-picker .value-picker-year-wrapper {
+  position: absolute;
+  width: 73px;
+  height: 100%;
+  top: 10em;
+  right: 0px;
+}
+
+#spin-date-picker .value-picker-date {
+  position: relative;
+  -moz-user-select: none;
+  text-align: center;
+  width: 100%;
+}
+
+#spin-date-picker .value-picker-month {
+  position: relative;
+  -moz-user-select: none;
+  width: 100%;
+}
+
+#spin-date-picker .value-picker-year {
+  position: relative;
+  -moz-user-select: none;
+  width: 100%;
+}
+
+#spin-date-picker .picker-container.YMD .value-picker-year-wrapper {
+  right: auto;
+  left: 0;
+}
+
+#spin-date-picker .picker-container.YMD .value-picker-month-wrapper {
+  right: auto;
+  left: 73px;
+}
+
+#spin-date-picker .picker-container.YMD .value-picker-date-wrapper {
+  right: 0;
+  left: auto;
+}
+
+#spin-date-picker .picker-container.YMD .left-picker-separator {
+  right: auto;
+  left: 73px;
+}
+
+#spin-date-picker .picker-container.YMD .right-picker-separator {
+  right: 54px;
+  left: auto;
+}
+
+#spin-date-picker .picker-container.YMD .picker-bar-background {
+  right: auto;
+  left: 0px;
+}
+
+
+#spin-date-picker .picker-container.DMY .value-picker-year-wrapper {
+  right: 0;
+  left: auto;
+}
+
+#spin-date-picker .picker-container.DMY .value-picker-month-wrapper {
+  right: auto;
+  left: 54px;
+}
+
+#spin-date-picker .picker-container.DMY .value-picker-date-wrapper {
+  right: auto;
+  left: 0;
+}
+
+#spin-date-picker .picker-container.DMY .left-picker-separator {
+  right: auto;
+  left: 54px;
+}
+
+#spin-date-picker .picker-container.DMY .right-picker-separator {
+  right: 73px;
+  left: auto;
+}
+
+#spin-date-picker .picker-container.DMY .picker-bar-background {
+  right: 0px;
+  left: auto;
+}
+
+
+#spin-date-picker .picker-container.MDY .value-picker-year-wrapper {
+  right: 0;
+  left: auto;
+}
+
+#spin-date-picker .picker-container.MDY .value-picker-month-wrapper {
+  right: auto;
+  left: 0px;
+}
+
+#spin-date-picker .picker-container.MDY .value-picker-date-wrapper {
+  right: auto;
+  left: -moz-calc(100% - 127px);
+}
+
+#spin-date-picker .picker-container.MDY .left-picker-separator {
+  right: auto;
+  left: -moz-calc(100% - 127px);
+}
+
+#spin-date-picker .picker-container.MDY .right-picker-separator {
+  right: 73px;
+  left: auto;
+}
+
+#spin-date-picker .picker-container.MDY .picker-bar-background {
+  right: 0px;
+  left: auto;
+}
\ No newline at end of file
diff --git a/apps/system/style/value_selector/time_picker.css b/apps/system/style/value_selector/time_picker.css
new file mode 100644
index 0000000..ea612ba
--- /dev/null
+++ b/apps/system/style/value_selector/time_picker.css
@@ -0,0 +1,212 @@
+/* ----------- TimeSelectorView ---------- */
+#picker-bar {
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: hidden;
+}
+
+#picker-bar.format12h {
+  width: 85%;
+}
+
+#picker-bar.format24h {
+  width: 60%;
+}
+
+#picker-bar-gradient {
+  -moz-border-top-colors:
+    rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.3)
+    rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1)
+    rgba(0, 0, 0, 0.05);
+
+  -moz-border-bottom-colors:
+    rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.3)
+    rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1)
+    rgba(0, 0, 0, 0.05);
+
+  border-top: solid 0.7rem;
+  border-bottom: solid 0.7rem;
+  border-left:  1px solid #111;
+  border-right: 1px solid #111;
+
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  -moz-box-sizing: border-box;
+}
+
+#picker-container {
+  width: 100%;
+  position: relative;
+  padding-top: 8.5rem;
+  height: 16rem;
+  overflow: hidden;
+}
+
+#value-indicator-wrapper {
+  -moz-border-top-colors:
+    rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.15)
+    rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3)  rgba(0, 0, 0, 0.4)
+    rgba(0, 0, 0, 0.5);
+
+  -moz-border-bottom-colors:
+    rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.15)
+    rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.4)
+    rgba(0, 0, 0, 0.5);
+
+  border-top: solid 0.7rem;
+  border-bottom: solid 0.7rem;
+  position: absolute;
+  height: 6rem;
+  width: 100%;
+  pointer-events: none;
+}
+
+#value-indicator-hover-time {
+  pointer-events: none;
+  background-color: #00A5C5;
+  position: absolute;
+  height: 100%;
+  font: 3rem/6rem 'MozTT',sans-serif;
+  text-align: center;
+}
+
+#picker-bar.format12h #value-indicator-hover-time {
+  width: 66%;
+}
+
+#picker-bar.format24h #value-indicator-hover-time {
+  width: 100%;
+}
+
+#value-indicator-hover {
+  pointer-events: none;
+  background-color: #00A5C5;
+  position: absolute;
+  width: 33%;
+  height: 100%;
+  right:0;
+}
+
+#picker-bar.format12h #value-indicator-hover {
+  display: block;
+}
+
+#picker-bar.format24h #value-indicator-hover {
+  display: none;
+}
+
+div.animation-on {
+  -moz-transition-duration: 0.5s;
+  -moz-transition-property: top, left;
+}
+
+#value-picker-hours {
+  position: relative;
+  -moz-user-select: none;
+  float: left;
+  text-align: center;
+}
+
+#picker-bar.format12h #value-picker-hours {
+  width: 33%;
+}
+
+#picker-bar.format24h #value-picker-hours {
+  width: 50%;
+}
+
+#value-picker-minutes {
+  position: relative;
+  -moz-user-select: none;
+  float: left;
+}
+
+#picker-bar.format12h #value-picker-minutes {
+  width: 34%;
+}
+
+#picker-bar.format24h #value-picker-minutes {
+  width: 50%;
+}
+
+#value-picker-hour24-state {
+  position: relative;
+  -moz-user-select: none;
+  width: 33%;
+  float: left;
+}
+
+#picker-bar.format12h #value-picker-hour24-state {
+  display: block;
+}
+
+#picker-bar.format24h #value-picker-hour24-state {
+  display: none;
+}
+
+.picker-unit {
+  position: relative;
+  font: 3rem/8rem 'MozTT',sans-serif;
+  color: #FFF;
+  text-align: center;
+  vertical-align: middle;
+  width: 100%;
+  height: 6rem;
+  pointer-events: none;
+}
+
+#picker-bar-background {
+  background: url("../themes/default/images/ui/time_pattern.png") repeat scroll left top transparent;
+  position: absolute;
+  width: 33%;
+  height: 100%;
+  right: 0;
+  top: 0;
+}
+
+#picker-bar.format12h #picker-bar-background {
+  display: block;
+}
+
+#picker-bar.format24h #picker-bar-background {
+  display: none;
+}
+
+#left-picker-separator {
+  position: absolute;
+  width: 0.2rem;
+  height: 100%;
+  top: 0;
+  background: -moz-linear-gradient(center left, #555 50%, #000 50%);
+  pointer-events: none;
+}
+
+#picker-bar.format12h #left-picker-separator {
+  left: 33%;
+}
+
+#picker-bar.format24h #left-picker-separator {
+  left: 49.5%;
+}
+
+#right-picker-separator {
+  position: absolute;
+  width: 0.2rem;
+  height: 100%;
+  top: 0;
+  left: 66%;
+  background: -moz-linear-gradient(center left, #555 50%, #000 50%);
+  pointer-events: none;
+}
+
+#picker-bar.format12h #right-picker-separator {
+  display: block;
+}
+
+#picker-bar.format24h #right-picker-separator {
+  display: none;
+}
diff --git a/apps/system/style/value_selector/value_selector.css b/apps/system/style/value_selector/value_selector.css
new file mode 100644
index 0000000..7184046
--- /dev/null
+++ b/apps/system/style/value_selector/value_selector.css
@@ -0,0 +1,170 @@
+#value-selector {
+  width: 100%;
+  height: -moz-calc(100% - 20px);
+  top: 20px;
+  left: 0;
+  position: absolute;
+}
+
+#screen.active-statusbar #value-selector {
+  height: -moz-calc(100% - 40px);
+  top: 40px;
+}
+
+#screen:-moz-full-screen-ancestor #value-seletcor,
+#screen.fullscreen-app #value-selector {
+  height: 100%;
+  top: 0;
+}
+
+#select-options-buttons,
+#time-picker-buttons,
+#spin-date-picker-buttons {
+  /* from building blocks, core.css - menu:not([type="toolbar"]*/
+  white-space: nowrap;
+  margin: 0;
+  padding: 0;
+  border-top: solid 1px rgba(255, 255, 255, 0.1);
+  background: #2d2d2d url(../themes/default/images/ui/pattern.png) repeat left top;
+  display: block;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  text-align: center;
+  font-size: 0; /* to get rid of the spacing between 2 buttons */
+}
+
+#value-selector button:first-child {
+    margin-right: 0rem;
+}
+
+#select-options-buttons button,
+#time-picker-buttons button,
+#spin-date-picker-buttons button{
+  /* from building block - other/buttons/style.css*/
+  width: calc((100% - 4.5rem) / 2);  /*overridden for 2 buttons*/
+
+  height: 3.8rem;
+  margin: 1.5rem;
+  padding: 0 1.5rem;
+  display: inline-block;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  background: #fafafa url(../themes/default/images/ui/default.png) repeat-x left bottom;
+  border: 1px solid #9f9f9f;
+  border-radius: 0.3rem;
+  font-size: 1.6rem;
+  font-family: 'MozTT', Sans-serif;
+  font-weight: 600;
+  line-height: 3.8rem;
+  color: #333;
+  text-align: center;
+  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
+  text-decoration: none;
+  outline: none;
+}
+
+/* Affirmative */
+#value-selector button.affirmative {
+  background-image: url(../themes/default/images/ui/affirmative.png);
+  background-color: #00caf2;
+  border-color: #00acce;
+}
+
+#select-options-buttons button.full {
+    width: calc(100% - 4.5rem);
+    margin: 1.5rem;
+}
+
+/*active class used to complement the "return false" in onmousedown effect */
+#value-selector button.active,
+button.affirmative.active {
+    border-color: #008aaa;
+    background: #008aaa;
+    color: #333;
+}
+
+#value-selector-container li > label {
+    pointer-events: none;
+}
+
+#value-selector-container li.active label span {
+    background: none repeat scroll 0 0 #00ABCC;
+    color: #FFFFFF !important;
+}
+
+#time-picker-popup,
+#spin-date-picker-popup {
+  top: 0px;
+  padding: 0 0 7rem;  /*remove the top padding*/
+
+  /* from building blocks, core.css - [role=dialog]*/
+  background: url(../themes/default/images/ui/pattern.png) repeat left top, url(../themes/default/images/ui/gradient.png) no-repeat left top;
+  background-size: auto auto, 100% 100%;
+  overflow: hidden;
+  position: absolute;
+  z-index: 100;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  white-space: nowrap;
+  padding: 0 0 7rem;  /*remove the top padding*/
+  font-family: "MozTT", Sans-serif;
+  color: #fff;
+}
+
+#time-picker-popup h3,
+#spin-date-picker-popup h3 {
+    font-family: 'MozTT', Sans-serif;
+    font-weight: normal;
+    font-size: 1.6rem;
+    line-height: 1em;
+    color: #fff;
+    border-bottom: 0.1rem solid #686868;
+    margin: 0 0 1.5rem;
+    padding-bottom: 1.5rem;
+}
+
+.table-wrapper {
+  display: table;
+  width:  100%;
+  height: 100%;
+}
+
+.table-cell {
+  display: table-cell;
+  vertical-align: middle;
+  width:  100%;
+  height: 100%;
+}
+
+/* The following rules is to override the styles defined in building blocks of value selector */
+#value-selector li {
+  height: auto;
+  padding-bottom: 0px;
+  line-height: 3.9rem;
+}
+
+#value-selector li span {
+  padding: 1rem 1.5rem;
+  line-height: 4rem;
+  word-wrap: break-word;
+}
+
+#value-selector li input:checked + span,
+#value-selector li[aria-checked="true"] span {
+  padding-right: 2.6rem;
+  margin-right: 1.2rem;
+  background: transparent url("../bb/value_selector/images/icons/checked.png") no-repeat 100% 50%;
+}
+
+html[dir="rtl"] #value-selector li input:checked + span,
+html[dir="rtl"] #value-selector li[aria-checked="true"] span {
+  padding-left: 2.6rem;
+  margin-left: 1.2rem;
+}
+
diff --git a/apps/system/style/wrapper/images/back.png b/apps/system/style/wrapper/images/back.png
new file mode 100644
index 0000000..74a12ac
--- /dev/null
+++ b/apps/system/style/wrapper/images/back.png
diff --git a/apps/system/style/wrapper/images/bookmark.png b/apps/system/style/wrapper/images/bookmark.png
new file mode 100644
index 0000000..77b18a4
--- /dev/null
+++ b/apps/system/style/wrapper/images/bookmark.png
diff --git a/apps/system/style/wrapper/images/close.png b/apps/system/style/wrapper/images/close.png
new file mode 100644
index 0000000..3dd988e
--- /dev/null
+++ b/apps/system/style/wrapper/images/close.png
diff --git a/apps/system/style/wrapper/images/forward.png b/apps/system/style/wrapper/images/forward.png
new file mode 100644
index 0000000..6aac3b4
--- /dev/null
+++ b/apps/system/style/wrapper/images/forward.png
diff --git a/apps/system/style/wrapper/images/open.png b/apps/system/style/wrapper/images/open.png
new file mode 100644
index 0000000..bf2c1c5
--- /dev/null
+++ b/apps/system/style/wrapper/images/open.png
diff --git a/apps/system/style/wrapper/images/reload.png b/apps/system/style/wrapper/images/reload.png
new file mode 100644
index 0000000..0b72b3d
--- /dev/null
+++ b/apps/system/style/wrapper/images/reload.png
diff --git a/apps/system/style/wrapper/wrapper.css b/apps/system/style/wrapper/wrapper.css
new file mode 100644
index 0000000..8fe0c87
--- /dev/null
+++ b/apps/system/style/wrapper/wrapper.css
@@ -0,0 +1,113 @@
+
+#wrapper-activity-indicator {
+  position: fixed;
+  top: 20px; /* This is the status bar height */
+  left: 0;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 4px;
+  background-image: url('../shared/progress.gif');
+
+  pointer-events: none;
+  visibility: hidden;
+}
+
+#wrapper-activity-indicator.visible {
+  -moz-transition-delay: .5s; /* Delay opening a wrapper */
+  -moz-transition-property: visibility;
+  visibility: visible;
+}
+
+#wrapper-footer {
+  position: fixed;
+  bottom: -4rem;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 5rem;
+
+  pointer-events: none;
+  visibility: hidden;
+}
+
+#wrapper-footer.visible {
+  pointer-events: auto;
+  visibility: visible;
+}
+
+#handler {
+  width: 100%;
+  height: 1rem;
+  background-color: #000;
+  background-repeat: no-repeat;
+  background-position: right;
+}
+
+#wrapper-footer.closed #handler {
+  background-image: url("images/open.png");
+}
+
+#wrapper-footer menu[type="buttonbar"] {
+  width: 100%;
+  height: 4rem;
+  margin: 0;
+  padding: 0;
+  background-color: rgba(0,0,0,.8);
+  -moz-transform: translateY(-4rem);
+  -moz-transition: -moz-transform .4s ease;
+}
+
+#wrapper-footer.closed menu {
+  -moz-transform: translateY(0);
+}
+
+#wrapper-footer menu button {
+  background-color: transparent;
+  -moz-appearance: none;
+  border: none;
+  display: block;
+  margin: 0;
+  padding: 0;
+  width: 20%;
+  height: 100%;
+  float: left;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 1;
+}
+
+#back-button {
+  background-image: url("images/back.png");
+}
+
+#forward-button {
+  background-image: url("images/forward.png");
+}
+
+#reload-button {
+  background-image: url("images/reload.png");
+}
+
+#bookmark-button {
+  background-image: url("images/bookmark.png");
+}
+
+#bookmark-button[data-disabled] {
+  background-image: none;
+}
+
+#close-button {
+  background-image: url("images/close.png");
+}
+
+#wrapper-footer menu button[data-disabled] {
+  opacity: .2;
+  pointer-events: none;
+}
+
+#wrapper-footer input::-moz-focus-inner, input:active {
+  border: 0;
+  background: transparent !important;
+}
diff --git a/apps/system/style/zindex.css b/apps/system/style/zindex.css
new file mode 100644
index 0000000..6abc373
--- /dev/null
+++ b/apps/system/style/zindex.css
@@ -0,0 +1,215 @@
+/* zIndex of important system app parts
+ * is gathered here to clearly specify all system-app hierarchy */
+
+/* Reset zIndex */
+#screen > *:not([data-z-index-level]) {
+  z-index: 0;
+}
+
+/* Level 1 */
+/**
+ * Topest layer, covers all of the screen no matter what's the height
+ * of the status bar.
+ * System overlay > Sleep menu > Card view
+ */
+
+/* Find the same code in system/index.html
+#screen > [data-z-index-level="initlogo"] {
+  z-index: 65536;
+}
+*/
+
+#screen > *[data-z-index-level="poweroff-splash"] {
+  z-index: 65536;
+}
+
+#screen > [data-z-index-level="debug-grid"],
+#screen > [data-z-index-level="debug-ttl"] {
+  z-index: 65536;
+}
+
+#screen > [data-z-index-level="system-notification-banner"] {
+  z-index: 65536;
+}
+
+#screen > [data-z-index-level="system-overlay"] {
+  z-index: 65536;
+}
+
+#screen > [data-z-index-level="sleep-menu"] {
+  z-index: 65536;
+}
+
+/* Promote the transitioning appWindow to this level as the entry and exiting transition
+  of the cards view. */
+#screen.cards-view > [data-z-index-level="app"] > .appWindow.active,
+#screen.cards-view > [data-z-index-level="app"] > .appWindow.opening,
+#screen.cards-view > [data-z-index-level="app"] > .appWindow.closing {
+  z-index: 65536;
+}
+#screen.cards-view > [data-z-index-level="cards-view"] {
+  z-index: 65535;
+}
+
+#screen > [data-z-index-level="keyboard-frame"] {
+  z-index: 65536;
+}
+
+/* Level 2: Notification toaster */
+#screen > [data-z-index-level="notification-toaster"] {
+  z-index: 32768;
+}
+
+/* Level 3: Attention screen */
+#screen > [data-z-index-level="attention-screen"] {
+  z-index: 16384;
+}
+
+/* Level 4: Activity menu, context menu and value selector */
+#screen > [data-z-index-level="list-menu"] {
+  z-index: 8192;
+}
+
+/* Level 5: Statusbar, Utility-Tray */
+#screen > [data-z-index-level="statusbar"] {
+  z-index: 4096;
+}
+
+#screen > [data-z-index-level="utility-tray"] {
+  z-index: 4095;
+}
+
+/* Demote level 5 elements to homescreen level if there is an active
+   full screen app frame */
+#screen.fullscreen-app:not(.locked):not(.attention) > [data-z-index-level="statusbar"],
+#screen.fullscreen-app:not(.locked):not(.attention) > [data-z-index-level="utility-tray"] {
+  z-index: 0;
+}
+
+/* Prompote level 5 elements to attention screen level when
+ * there is an active attention screen not minimized in
+ * the status bar */
+#screen.attention:not(.active-statusbar) > [data-z-index-level="statusbar"] {
+  z-index: 16386;
+}
+#screen.attention:not(.active-statusbar) > [data-z-index-level="utility-tray"] {
+  z-index: 16385;
+}
+
+/* Level 6: Lock Screen */
+#screen > [data-z-index-level="lockscreen"] {
+  z-index: 2048;
+}
+
+#screen > [data-z-index-level="lockscreen-camera"] {
+  z-index: 2047;
+}
+
+#screen > [data-z-index-level="simpin-dialog"] {
+  z-index: 2046;
+}
+
+/* Keep keyboard under lockscreen when locked */
+#screen.locked > [data-z-index-level="keyboard-frame"] {
+  z-index: 2045;
+}
+
+/* Level 7: Dialog Module */
+#screen > [data-z-index-level="dialog-overlay"],
+#screen > [data-z-index-level="value-selector"],
+#screen > [data-z-index-level="permission-screen"],
+#screen > [data-z-index-level="app-install-dialog"],
+#screen > [data-z-index-level="updates-download-dialog"],
+#screen > [data-z-index-level="updates-viaDataConnection-dialog"],
+#screen > [data-z-index-level="app"] > .appWindow.inlineActivity {
+  z-index: 1024;
+}
+
+/* Level 8 */
+#screen.switch-app [data-z-index-level="app"] > .appWindow.opening,
+#screen.switch-app [data-z-index-level="app"] > .appWindow.closing,
+#screen.switch-app [data-z-index-level="app"] > .appWindow:not(.homescreen).active {
+  z-index: 6;
+}
+
+#screen > [data-z-index-level="app"] {
+  /**
+   * Should not specify z-index here
+   * Keyboard should be kept upon #windows
+   * and beneath #windows > .appWindow
+   */
+}
+
+/*
+  Styles during FTU. In this case lockscreen & homescreen should be behind FTU.
+  Once FTU is done, we will remove this styles in order to get the structure
+  of z-index as usual.
+*/
+
+#screen.ftu > [data-z-index-level="statusbar"]{
+  z-index: 1;
+}
+
+#screen.ftu > [data-z-index-level="lockscreen"]{
+  z-index: 1;
+}
+
+#screen.ftu > [data-z-index-level="app"] > .appWindow.homescreen,
+#screen.ftu > [data-z-index-level="app"] > .appWindow.homescreen.active {
+  z-index: 0;
+}
+
+/*
+ * The below z-index numbers is used to met the following conditions:
+ * - active ones must be on top of the inactive ones
+ * - keyboard frame must be below the active ones
+ * - keyboard frame must be above the inactive ones
+ * - app frame must be on top of homescreen frame, inactive or active.
+ * - finally, everything else need to be on top of them (hence the lowest nums)
+ *
+ */
+#screen > [data-z-index-level="app"] > #wrapper-footer,
+#screen > [data-z-index-level="app"] > #wrapper-activity-indicator {
+  z-index: 5;
+}
+
+#screen > [data-z-index-level="app"] > .appWindow.active,
+#screen > [data-z-index-level="app"] > .appWindow.opening,
+#screen > [data-z-index-level="app"] > .appWindow.closing {
+  z-index: 4;
+}
+
+#screen > [data-z-index-level="app"] > .appWindow.homescreen.active {
+  z-index: 3;
+}
+
+#screen > [data-z-index-level="app"] > .appWindow {
+  z-index: 1;
+}
+
+#screen > [data-z-index-level="app"] > .appWindow.homescreen {
+  z-index: 0;
+}
+
+/* We promotes the following overlays on top of the fullscreen web content. */
+
+#screen:-moz-full-screen-ancestor > [data-z-index-level="app"] > .appWindow.inlineActivity,
+#screen:-moz-full-screen-ancestor > [data-z-index-level="sleep-menu"],
+#screen:-moz-full-screen-ancestor > [data-z-index-level="list-menu"],
+#screen.locked:-moz-full-screen-ancestor > [data-z-index-level="statusbar"],
+#screen:-moz-full-screen-ancestor > [data-z-index-level="lockscreen"],
+#screen:-moz-full-screen-ancestor > [data-z-index-level="lockscreen-camera"],
+
+#screen:-moz-full-screen-ancestor > [data-z-index-level="value-selector"],
+#screen:-moz-full-screen-ancestor > [data-z-index-level="system-overlay"],
+#screen:-moz-full-screen-ancestor > [data-z-index-level="dialog-overlay"],
+
+#screen:-moz-full-screen-ancestor > [data-z-index-level="keyboard-frame"],
+
+#screen:-moz-full-screen-ancestor > [data-z-index-level="notification-toaster"],
+#screen:-moz-full-screen-ancestor > [data-z-index-level="cards-view"],
+#screen:-moz-full-screen-ancestor > [data-z-index-level="attention-screen"],
+#screen:-moz-full-screen-ancestor > [data-z-index-level="permission-screen"],
+#screen:-moz-full-screen-ancestor > [data-z-index-level="app-install-dialog"] {
+  z-index: 2147483647;
+}