+							if(isset($options['topbar'])){

+								$ret['topbar'] = $options['topbar'];

+							}

+/* ----------------------------------

+ * Action menu

+ * ---------------------------------- */

+

+/* Main dialog setup */

+form[role="dialog"][data-type="action"],

+form[role="dialog"][data-type="object"] {

+  background:

+    url(action_menu/images/ui/pattern.png) repeat left top,

+    url(action_menu/images/ui/gradient.png) no-repeat left top / 100% 100%;

+  overflow: hidden;

+  position: fixed;

+  z-index: 100;

+  top: 0;

+  left: 0;

+  right: 0;

+  bottom: 0;

+  padding: 0 0 7rem;

+  /**

+   * Using "font-size: 0" to avoid the unwanted visual space (about 3px) created

+   * by white spaces and line breaks in the code between inline-block elements.

+   */

+  font-size: 0;

+  color: #fff;

+}

+

+form[role="dialog"][data-type="action"]:before,

+form[role="dialog"][data-type="object"]:before {

+  content: '';

+  display: inline-block;

+  vertical-align: top;

+  width: 0.1rem;

+  height: 100%;

+  margin-left: -0.1rem;

+}

+

+form[role="dialog"][data-type="action"] > header,

+form[role="dialog"][data-type="object"] > header {

+  -moz-box-sizing: border-box;

+  font-size: 1.6rem;

+  background: url(action_menu/images/ui/alpha.png) repeat 0 0;

+  position: absolute;

+  top: 0;

+  left: 0;

+  right: 0;

+  z-index: 10;

+  height: 5rem;

+  line-height: 4.9rem;

+  color: #fff;

+  white-space: nowrap;

+  text-overflow: ellipsis;

+  display: block;

+  overflow: hidden;

+  font-weight: normal;

+  padding: 0 3rem;

+  border-bottom: 0.1rem solid #616262;

+}

+

+form[role="dialog"][data-type="action"] > header h1,

+form[role="dialog"][data-type="object"] > header h1 {

+  font-size: 1.6rem;

+  line-height: 4.9rem;

+  text-align: left;

+  color: #fff;

+  white-space: nowrap;

+  text-overflow: ellipsis;

+  display: block;

+  overflow: hidden;

+  margin: 0;

+  height: 100%;

+  font-weight: normal;

+}

+

+/* Generic set of actions in toolbar */

+form[role="dialog"][data-type="action"] > header menu[type="toolbar"] {

+  height: 100%;

+  float: right;

+  margin: 0 -3rem 0 1rem;

+  padding: 0;

+}

+

+form[role="dialog"][data-type="action"] > header menu[type="toolbar"] a,

+form[role="dialog"][data-type="action"] > header menu[type="toolbar"] button {

+  -moz-box-sizing: border-box;

+  position: relative;

+  float: left;

+  width: auto;

+  min-width: 5rem;

+  height: 4.9rem;

+  margin-bottom: 0;

+  padding: 0 1rem;

+  border-radius: 0;

+  line-height: 4.9rem;

+  background: none;

+  text-align: center;

+  text-shadow: none;

+  z-index: 5;

+}

+

+form[role="dialog"][data-type="action"] > header a,

+form[role="dialog"][data-type="action"] > header button {

+  border: none;

+  padding: 0;

+  overflow: hidden;

+  font-weight: 400;

+  font-size: 1.5rem;

+  line-height: 1.1em;

+  color: #fff;

+  border-radius: 0;

+  text-decoration: none;

+}

+

+form[role="dialog"][data-type="action"] button::-moz-focus-inner,

+form[role="dialog"][data-type="object"] button::-moz-focus-inner {

+  outline: none;

+  border: none;

+}

+

+/* Pressed state */

+form[role="dialog"][data-type="action"] > header a:active .icon:after,

+form[role="dialog"][data-type="action"] > header button:active .icon:after,

+form[role="dialog"][data-type="action"] > header menu[type="toolbar"] a:active,

+form[role="dialog"][data-type="action"] > header menu[type="toolbar"] button:active  {

+  background: #008aaa !important;

+}

+

+/* Disabled state */

+form[role="dialog"][data-type="action"] > header menu[type="toolbar"] a[aria-disabled="true"],

+form[role="dialog"][data-type="action"] > header menu[type="toolbar"] button[disabled]  {

+  opacity: 0.5;

+  pointer-events: none;

+}

+

+/* Icon definitions */

+form[role="dialog"][data-type="action"] > header .icon {

+  position: relative;

+  float: none;

+  display: inline-block;

+  vertical-align: top;

+  width: 4rem;

+  height: 4.9rem;

+  margin: 0 -1rem;

+  background: transparent no-repeat center center / 3rem auto;

+  font-size: 0;

+  overflow: hidden;

+}

+

+form[role="dialog"][data-type="action"] > header .icon.icon-close {

+  background-image: url(action_menu/images/icons/close.png);

+}

+

+form[role="dialog"][data-type="action"] > header .icon.icon-back {

+  background-image: url(action_menu/images/icons/back.png);

+}

+

+/* Navigation links (back, cancel, etc) */

+form[role="dialog"][data-type="action"] > header > button,

+form[role="dialog"][data-type="action"] > header > a {

+  float: left;

+  width: 5rem;

+  height: 4.9rem;

+  background: none;

+  overflow: visible;

+  margin: 0 -1rem 0 -3rem;

+  position: relative;

+}

+

+form[role="dialog"][data-type="action"] > header > button:after,

+form[role="dialog"][data-type="action"] > header > a:after {

+  content: "";

+  position: absolute;

+  left: 0;

+  top:0;

+  width: 3.2rem;

+  height: 4.9rem;

+  background: url(action_menu/images/ui/separator.png) no-repeat 3rem top / 0.1rem 4.8rem;

+}

+

+form[role="dialog"][data-type="action"] > header > button::-moz-focus-inner {

+  border: 0;

+  padding: 0;

+}

+

+form[role="dialog"][data-type="action"] > header > button .icon,

+form[role="dialog"][data-type="action"] > header > a .icon {

+  position: static;

+  display: block;

+  width: 3rem;

+  height: 4.9rem;

+  margin: 0;

+  overflow: visible;

+  font-size: 0;

+}

+

+form[role="dialog"][data-type="action"] > header > button .icon:after,

+form[role="dialog"][data-type="action"] > header > a .icon:after {

+  content: "";

+  position: absolute;

+  left: 0;

+  top: 0;

+  z-index: -1;

+  width: 3rem;

+  height: 4.9rem;

+}

+

+/* Content */

+form[role="dialog"][data-type="action"] > section,

+form[role="dialog"][data-type="object"] > section {

+  color: #fff;

+  position: absolute;

+  top: 7rem;

+  left: 1.5rem;

+  right: 1.5rem;

+  bottom: 2rem;

+  font-size: 1.6rem;

+  overflow: scroll;

+}

+

+/* Specific component code */

+form[role="dialog"][data-type="action"] > menu,

+form[role="dialog"][data-type="object"] > menu {

+  margin: 0;

+  padding: 0;

+  max-height: calc(100% - 13.5rem); /*header(5rem) + footer(7rem) + padding(1.5rem)*/

+  padding-top: 1.5rem;

+  overflow: auto;

+  width: auto;

+  border: none;

+  background: none;

+  position: absolute;

+  left: 0;

+  right: 0;

+  bottom: 7rem;

+}

+

+form[role="dialog"][data-type="action"] > menu > button,

+form[role="dialog"][data-type="object"] > menu > button {

+  width: calc(100% - 3rem);

+  height: 4rem;

+  -moz-box-sizing: border-box;

+  vertical-align: middle;

+  text-overflow: ellipsis;

+  white-space: nowrap;

+  overflow: hidden;

+  font-weight: normal;

+  line-height: 4rem;

+  outline: none;

+  font-size: 1.6rem;

+  text-shadow: none;

+  text-align: left;

+  padding: 0 1.2rem;

+  margin: 0 1.5rem 1rem 1.5rem;

+  background: rgba(87, 87, 87, 0.8);

+  border: none;

+  border-radius: 0;

+  position: relative;

+  color: #fff;

+  font-family: sans-serif;

+  font-style: italic;

+}

+

+form[role="dialog"][data-type="action"] > menu > button:last-child,

+form[role="dialog"][data-type="object"] > menu > button:last-child {

+  position: fixed;

+  bottom: 0;

+  left: 0;

+  color: #333;

+  background: #d8d8d8;

+  text-align: center;

+  border: none;

+  margin-bottom: 1.5rem;

+  border-radius: 2rem;

+}

+

+form[role="dialog"][data-type="action"] > menu > button:last-child:before,

+form[role="dialog"][data-type="object"] > menu > button:last-child:before {

+  content: '';

+  position: fixed;

+  width: 100%;

+  background: url(action_menu/images/ui/pattern.png) repeat scroll left top #2D2D2D;

+  height: 7rem;

+  left: 0;

+  bottom: 0;

+  z-index: -1;

+}

+

+form[role="dialog"][data-type="action"] > menu > button:nth-last-child(2),

+form[role="dialog"][data-type="object"] > menu > button:nth-last-child(2) {

+  margin-bottom: 1.5rem;

+}

+

+/* Press state */

+form[role="dialog"][data-type="action"] > menu > button:active,

+form[role="dialog"][data-type="object"] > menu > button:active {

+  background: #00aacc;

+  color: #fff;

+}

+

+/* Disabled */

+form[role="dialog"][data-type="action"] > menu > button[disabled],

+form[role="dialog"][data-type="object"] > menu > button[disabled] {

+  background-color: rgba(87, 87, 87, 0.8);

+  color: rgba(255, 255, 255, 0.4);

+  opacity: 0.5;

+  pointer-events: none;

+}

+

+form[role="dialog"][data-type="action"] > menu > button[disabled]:last-child,

+form[role="dialog"][data-type="object"] > menu > button[disabled]:last-child {

+  background-color: #e7e7e7;

+  color: #a6a6a6;

+  opacity: 1;

+}

+

+/*

+ * Right to Left view

+ */

+

+html[dir="rtl"] form[role="dialog"][data-type="action"]:before,

+form[role="dialog"][data-type="object"]:before {

+  margin-left: auto;

+  margin-right: -0.1rem;

+}

+

+html[dir="rtl"] form[role="dialog"][data-type="action"] > header h1,

+html[dir="rtl"] form[role="dialog"][data-type="object"] > header h1 {

+  text-align: right;

+}

+

+html[dir="rtl"] form[role="dialog"][data-type="action"] > header menu[type="toolbar"] {

+  float: left;

+  margin-left: -3rem;

+  margin-right: 1rem;

+}

+

+html[dir="rtl"] form[role="dialog"][data-type="action"] > header menu[type="toolbar"] a,

+html[dir="rtl"] form[role="dialog"][data-type="action"] > header menu[type="toolbar"] button {

+  float: right;

+}

+

+html[dir="rtl"] form[role="dialog"][data-type="action"] > header menu[type="toolbar"] a:last-child,

+html[dir="rtl"] form[role="dialog"][data-type="action"] > header menu[type="toolbar"] button:last-child {

+  background-position: right center;

+  margin-left: auto;

+  margin-right: -0.1rem;

+}

+

+html[dir="rtl"] form[role="dialog"][data-type="action"] > header > button,

+html[dir="rtl"] form[role="dialog"][data-type="action"] > header > a {

+  float: right;

+  margin-left: -1rem;

+  margin-right: -3rem;

+}

+

+html[dir="rtl"] form[role="dialog"][data-type="action"] > header > button:after,

+html[dir="rtl"] form[role="dialog"][data-type="action"] > header > a:after {

+  left: auto;

+  right: 0;

+  background-position: 0 top;

+}

+

+html[dir="rtl"] form[role="dialog"][data-type="action"] > header > button .icon:after,

+html[dir="rtl"] form[role="dialog"][data-type="action"] > header > a .icon:after {

+  left: auto;

+  right: 0;

+}

+

+html[dir="rtl"] form[role="dialog"][data-type="action"] > menu > button,

+html[dir="rtl"] form[role="dialog"][data-type="object"] > menu > button {

+  text-align: right;

+}

+

+html[dir="rtl"] form[role="dialog"][data-type="action"] > menu > button:last-child,

+html[dir="rtl"] form[role="dialog"][data-type="object"] > menu > button:last-child {

+  left: auto;

+  right: 0;

+}

+

+html[dir="rtl"] form[role="dialog"][data-type="action"] > menu > button:last-child:before,

+html[dir="rtl"] form[role="dialog"][data-type="object"] > menu > button:last-child:before {

+  left: auto;

+  right: 0;

+}

+

+<!DOCTYPE html>

+<html>

+<head>

+  <meta charset="utf-8">

+  <title>Action menu</title>

+  <meta name="description" content="Presenting a list of actions related to the App content">

+

+  <link rel="stylesheet" href="../action_menu.css">

+  <!--

+    - This <style> element is only used for the example code;

+    - it is not required for the real use case.

+    -->

+  <style type="text/css">

+    html, body {

+      font-family: sans-serif;

+      margin: 0;

+      padding: 0;

+      font-size: 10px;

+      background-color: #fff;

+    }

+    body {

+      background: none;

+    }

+  </style>

+</head>

+<body role="application">

+  <p dir="ltr">

+    <label>

+      <input type="checkbox"

+        onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">

+      RTL mode

+    </label>

+  </p>

+

+  <form role="dialog" data-type="action" onsubmit="return false;">

+    <header>

+      <button><span class="icon icon-close">close</span></button>

+      <menu type="toolbar">

+        <button>done</button>

+      </menu>

+      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>

+    </header>

+    <section>

+      <p>Curabitur condimentum diam mollis lacus hendrerit congue. Phasellus porttitor orci elit, ac consequat est mollis ut. Ut consequat ipsum a ullamcorper aliquam.</p>

+    </section>

+  </form>

+</body>

+</html>

+<!DOCTYPE html>

+<html>

+<head>

+  <meta charset="utf-8">

+  <title>Action menu</title>

+  <meta name="description" content="Presenting a list of actions related to the App content">

+

+  <link rel="stylesheet" href="../action_menu.css">

+  <!--

+    - This <style> element is only used for the example code;

+    - it is not required for the real use case.

+    -->

+  <style type="text/css">

+    html, body {

+      font-family: sans-serif;

+      margin: 0;

+      padding: 0;

+      font-size: 10px;

+      background-color: #fff;

+    }

+    body {

+      background: none;

+    }

+  </style>

+</head>

+<body role="application">

+  <p dir="ltr">

+    <label>

+      <input type="checkbox"

+        onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">

+      RTL mode

+    </label>

+  </p>

+

+  <form role="dialog" data-type="action" onsubmit="return false;">

+    <header>Title</header> <!-- this header is optional -->

+    <menu type="toolbar">

+      <button>Action 1</button>

+      <button disabled> Action 2 (disabled) </button>

+      <button> Action 3 </button>

+      <button> Action 4 </button>

+      <button disabled> Action 5 (disabled) </button>

+      <button> Action 6 </button>

+      <button> Action 7 </button>

+      <button disabled> Action 8 (disabled) </button>

+      <button> Action 9 </button>

+      <button> Cancel </button>

+    </menu>

+  </form>

+

+</body>

+</html>

+

+/* ----------------------------------

+ * Buttons

+ * ---------------------------------- */

+

+.button::-moz-focus-inner,

+a[role="button"]::-moz-focus-inner,

+button::-moz-focus-inner {

+  border: none;

+  outline: none;

+  margin-top: -0.2rem; /* To fix line-height bug (697451) */

+}

+

+button,

+a[role="button"],

+.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(buttons/images/ui/default.png) repeat-x left bottom / auto 100%;

+  border: 0.1rem solid #a6a6a6;

+  border-radius: 0.2rem;

+  font-weight: 500;

+  font-size: 1.6rem;

+  line-height: 3.8rem;

+  color: #333;

+  text-align: center;

+  text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);

+  text-decoration: none;

+  outline: none;

+}

+

+/* Press (default & recommend) */

+button:active,

+a[role="button"]:active,

+button.recommend:active,

+a.recommend[role="button"]:active  {

+  border-color: #008aaa;

+  background: #008aaa;

+  background-size: auto 100%;

+  color: #333;

+}

+

+/* Recommend */

+button.recommend,

+a[role="button"].recommend {

+  background-image: url(buttons/images/ui/recommend.png);

+  background-color: #00caf2;

+  border-color: #008eab;

+}

+

+/* Danger */

+button.danger,

+a.danger[role="button"],

+span.danger[role="button"] {

+  background-image: url(buttons/images/ui/danger.png);

+  background-color: #b70404;

+  color: #fff;

+  text-shadow: none;

+  border-color: #820000;

+}

+

+/* Danger Press */

+button.danger:active,

+a[role="button"].danger:active,

+.button.danger:active {

+  background-image: url(buttons/images/ui/danger-press.png);

+  background-color: #890707;

+}

+

+/* Disabled (default & recommend) */

+button[disabled],

+a[role="button"][aria-disabled="true"],

+.button[aria-disabled="true"],

+button[disabled].recommend,

+a[role="button"][aria-disabled="true"].recommend,

+.button[aria-disabled="true"].recommend {

+  background: #e7e7e7;

+  border-color: #c7c7c7;

+  color: #c7c7c7;

+  text-shadow: none;

+  pointer-events: none;

+}

+

+/* Danger disabled */

+button[disabled].danger,

+.button[aria-disabled="true"].danger,

+a[role="button"][aria-disabled="true"].danger {

+  background: #c68484;

+  border-color: #a56464;

+  color: #a56464;

+  text-shadow: none;

+  pointer-events: none;

+}

+

+/* Disabled with dark background */

+.dark button[disabled],

+.dark .button[aria-disabled="true"],

+.dark a[role="button"][aria-disabled="true"] {

+  background: #5f5f5f;

+  color: #4d4d4d;

+  border-color: #4d4d4d;

+  text-shadow: none;

+  pointer-events: none;

+}

+

+

+/* ----------------------------------

+ * Buttons inside lists

+ * ---------------------------------- */

+

+li button,

+li a[role="button"],

+li .button {

+  position: relative;

+  background: #e7e7e7;

+  text-align: left;

+  /* For hacking box-shadows we need overflow:visible; so we lose text-overflows...*/

+  white-space: normal;

+  overflow: visible;

+}

+

+/* Hacking box-shadow */

+li button:after,

+li a[role="button"]:after,

+li .button:after {

+  content: "";

+  position: absolute;

+  top: 100%;

+  left: 0;

+  right: 0;

+  height: 0.2rem;

+  background: url( buttons/images/ui/shadow.png) repeat-x left bottom / auto 100%;

+}

+

+/* Press */

+li a[role="button"]:active:after,

+li .button:active:after,

+li button:active:after {

+  opacity: 0;

+}

+

+/* Disabled */

+li button[disabled]:after,

+li a[role="button"][aria-disabled="true"]:after,

+li .button[aria-disabled="true"]:after {

+  background: none;

+}

+

+/* Icons */

+li button.icon,

+li a[role="button"].icon,

+li .button.icon {

+  padding-right: 3rem;

+}

+

+li button.icon:before,

+li a[role="button"].icon:before,

+li .button.icon:before {

+  content: "";

+  width: 3rem;

+  height: 3rem;

+  position: absolute;

+  top: 50%;

+  right: 0;

+  margin-top: -1.5rem;

+  background: transparent no-repeat center center / 100% auto;

+  pointer-events: none;

+}

+

+li button.icon-view:before,

+li a[role="button"].icon-view:before {

+  background: url(buttons/images/icons/view.png) no-repeat 1.6rem 0 / 1rem 9rem;

+}

+

+li button.icon-view:active:before,

+li a[role="button"].icon-view:active:before {

+  background-position: 1.6rem -3rem;

+}

+

+li button.icon-view:disabled:before,

+li a[role="button"][aria-disabled="true"].icon-view:before {

+  background-position: 1.6rem -6rem;

+}

+

+li button.icon-dialog,

+li a[role="button"].icon-dialog,

+li .button.icon-dialog {

+  font-size: 1.7rem;

+}

+

+li button.icon-dialog:before,

+li a[role="button"].icon-dialog:before,

+li .button.icon-dialog:before {

+  background: url(buttons/images/icons/dialog.png) no-repeat 1.6rem 0 / 1rem 9rem;

+  top: 100%;

+  margin-top: -2.4rem;

+}

+

+li button.icon-dialog:active:before,

+li a[role="button"].icon-dialog:active:before,

+li .button.icon-dialog:active:before {

+  background-position: 1.6rem -3rem;

+}

+

+li button.icon-dialog:disabled:before,

+li a[role="button"][aria-disabled="true"].icon-dialog:before,

+li .button[aria-disabled="true"].icon-dialog:before {

+  background-position: 1.6rem -6rem;

+}

+

+

+/* ----------------------------------

+ * Buttons inside lists, compact mode

+ * ---------------------------------- */

+

+ul.compact,

+ol.compact {

+  padding: 0 1.5rem 1.5rem 1.5rem;

+}

+

+ul.compact li,

+ol.compact li {

+  padding: 1.5rem 0 0.5rem 0;

+  border-bottom: solid #bdbdbd 0.1rem;

+  display: block;

+  overflow: hidden;

+}

+

+ul.compact li label,

+ol.compact li label {

+  padding: 0 1.5rem 1rem 1.5rem;

+  color: #333;

+  font-weight: normal;

+  font-size: 1.6rem;

+  line-height: 1.8rem;

+  display: block;

+  text-overflow: ellipsis;

+  white-space: nowrap;

+  overflow: hidden;

+}

+

+/* Inputs inside of .button */

+.button input,

+body[role="application"] .button input {

+  border: 0;

+  background: none;

+}

+

+/* Hides dropdown arrow until bug #649849 is fixed */

+.button.icon select {

+   width: 130%;

+}

+

+/******************************************************************************

+ * Right-To-Left layout

+ */

+

+html[dir="rtl"] li button,

+html[dir="rtl"] li a[role="button"],

+html[dir="rtl"] li .button {

+  text-align: right;

+}

+

+html[dir="rtl"] li button:after,

+html[dir="rtl"] li a[role="button"]:after,

+html[dir="rtl"] li .button:after {

+  background-position: right bottom;

+}

+

+html[dir="rtl"] li button.icon,

+html[dir="rtl"] li a[role="button"].icon,

+html[dir="rtl"] li .button.icon {

+  padding-left: 3rem;

+  padding-right: 1rem;

+}

+

+html[dir="rtl"] li button.icon:before,

+html[dir="rtl"] li a[role="button"].icon:before,

+html[dir="rtl"] li .button.icon:before {

+  left: -1rem;

+  right: inherit;

+}

+

+html[dir="rtl"] li button.icon-view:before,

+html[dir="rtl"] li a[role="button"].icon-view:before {

+  background-image: url(buttons/images/icons/view_rtl.png);

+  background-position: 1.6rem 0;

+}

+

+html[dir="rtl"] li button.icon-dialog:before,

+html[dir="rtl"] li a[role="button"].icon-dialog:before,

+html[dir="rtl"] li .button.icon-dialog:before {

+  background-image: url(buttons/images/icons/dialog_rtl.png);

+  background-position: 1.6rem 0;

+}

+

+<!DOCTYPE html>

+<html>

+<head>

+  <meta charset="utf-8">

+

+  <title>Buttons</title>

+  <meta name="description" content="You can use button tag or also anchor tag with role button">

+

+  <link rel="stylesheet" href="../buttons.css">

+

+  <!--

+    - This <style> and <link> is only used for the example preview,

+    - it isn't needed for the real use case.

+    -->

+  <style>

+    html, body {

+      margin: 0;

+      padding: 0;

+      font-size: 10px;

+      background-color: #fff;

+    }

+

+    h2.bb-docs {

+      font-size: 1.8rem;

+      font-weight: lighter;

+      color: #666;

+      margin: -0.1rem 0 0;

+      background-color: #f5f5f5;

+      padding: 0.4rem 0.4rem 0.4rem 3rem;

+      border: solid 0.1rem #e8e8e8;

+    }

+

+    div.bb-docs {

+      padding: 1rem;

+    }

+

+    div.bb-docs.dark {

+      background: #000;

+    }

+

+    ul {

+      padding: 0;

+      margin: 0;

+      list-style: none;

+    }

+

+    body[role="application"] > [role="region"] {

+      height: 100%;

+      position: relative;

+    }

+  </style>

+</head>

+<body role="application">

+  <p dir="ltr">

+    <label>

+      <input type="checkbox"

+        onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">

+      RTL mode

+    </label>

+  </p>

+  <h2 class="bb-docs">Normal</h2>

+  <div class="bb-docs">

+    <button>Default</button>

+    <button class="recommend">Recommend</button>

+    <button class="danger">Danger</button>

+   </div>

+

+  <h2 class="bb-docs">Disabled</h2>

+  <div class="bb-docs">

+    <button disabled>Default</button>

+    <a href="#" role="button" aria-disabled="true" class="recommend">Recommend</a>

+    <button disabled class="danger">Danger</button>

+  </div>

+

+  <h2 class="bb-docs">Disabled with dark background</h2>

+  <div class="bb-docs dark">

+    <button disabled>Default</button>

+    <a href="#" role="button" aria-disabled="true" class="recommend">Recommend</a>

+    <button disabled class="danger">Danger</button>

+  </div>

+

+  <h2 class="bb-docs">Button List </h2>

+  <div class="bb-docs">

+    <ul>

+      <li>

+        <button>Default</button>

+      </li>

+      <li>

+        <button disabled="disabled">Disabled</button>

+      </li>

+      <li>

+        <button class="icon icon-view">

+          View Name

+        </button>

+      </li>

+      <li>

+        <button disabled="disabled" class="icon icon-view">

+          View Name

+        </button>

+      </li>

+      <li>

+        <a role="button" class="icon icon-dialog">

+          Tuesday September 18, 2012

+        </a>

+      </li>

+      <li>

+        <a role="button" aria-disabled="true" class="icon icon-dialog">

+          Tuesday September 18, 2012

+        </a>

+      </li>

+    </ul>

+  </div>

+

+  <h2 class="bb-docs">Button list (compact mode)</h2>

+  <div class="bb-docs">

+    <ul class="compact">

+      <li>

+        <label>Description</label>

+        <button class="icon icon-dialog">Action 1</button>

+      </li>

+      <li>

+        <label>Description</label>

+        <button class="icon icon-dialog">Action 2</button>

+      </li>

+      <li>

+        <label>This is a large description for this action</label>

+        <button class="icon icon-dialog" disabled >Action 3 (disabled)</button>

+      </li>

+    </ul>

+  </div>

+</body>

+</html>

+

+/* ----------------------------------

+ * Confirm

+ * ---------------------------------- */

+

+/* Main dialog setup */

+form[role="dialog"][data-type="confirm"] {

+  background:

+    url(confirm/images/ui/pattern.png) repeat left top,

+    url(confirm/images/ui/gradient.png) no-repeat left top / 100% 100%;

+  overflow: hidden;

+  position: absolute;

+  z-index: 100;

+  top: 0;

+  left: 0;

+  right: 0;

+  bottom: 0;

+  padding-bottom: 7rem;

+  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;

+  text-align: left;

+}

+

+form[role="dialog"][data-type="confirm"]:before {

+  content: "";

+  display: inline-block;

+  vertical-align: middle;

+  width: 0.1rem;

+  height: 100%;

+  margin-left: -0.1rem;

+}

+

+form[role="dialog"][data-type="confirm"] > section {

+  font-weight: lighter;

+  font-size: 2.2rem;

+  color: #FAFAFA;

+  padding: 0 1.5rem;

+  -moz-box-sizing: padding-box;

+  width: 100%;

+  display: inline-block;

+  overflow-y: scroll;

+  max-height: 100%;

+  vertical-align: middle;

+  white-space: normal;

+}

+

+form[role="dialog"][data-type="confirm"] h1 {

+  font-weight: normal;

+  font-size: 1.6rem;

+  line-height: 1.5em;

+  color: #fff;

+  margin: 0;

+  padding: 1rem 1.5rem 0;

+}

+

+/* Menu & buttons setup */

+form[role="dialog"][data-type="confirm"] menu {

+  white-space: nowrap;

+  margin: 0;

+  padding: 1.5rem;

+  background: #2d2d2d url(confirm/images/ui/pattern.png) repeat left top;

+  display: block;

+  overflow: hidden;

+  position: absolute;

+  left: 0;

+  right: 0;

+  bottom: 0;

+}

+

+form[role="dialog"][data-type="confirm"] menu button::-moz-focus-inner {

+  border: none;

+  outline: none;

+  margin-top: -0.2rem; /* To fix line-height bug (697451) */

+}

+

+form[role="dialog"][data-type="confirm"] menu button {

+  font-family: sans-serif;

+  font-style: italic;

+  width: 100%;

+  height: 4rem;

+  margin: 0 0 1rem;

+  padding: 0 1.2rem;

+  -moz-box-sizing: border-box;

+  display: inline-block;

+  vertical-align: middle;

+  text-overflow: ellipsis;

+  white-space: nowrap;

+  overflow: hidden;

+  background: #d8d8d8;

+  border: none;

+  border-radius: 2rem;

+  font-weight: normal;

+  font-size: 1.6rem;

+  line-height: 4rem;

+  color: #333;

+  text-align: center;

+  text-shadow: none;

+  text-decoration: none;

+  outline: none;

+}

+

+/* Recommend */

+form[role="dialog"][data-type="confirm"] menu button.recommend {

+  background-color: #00caf2;

+  color: #fff;

+}

+

+/* Danger */

+form[role="dialog"][data-type="confirm"] menu button.danger {

+  background-color: #e51e1e;

+  color: #fff;

+}

+

+/* Pressed */

+form[role="dialog"][data-type="confirm"] menu button:active {

+  background: #00aacc;

+  color: #fff;

+}

+

+/* Disabled */

+form[role="dialog"][data-type="confirm"] > menu > button[disabled] {

+  background-color: #565656;

+  color: rgba(255,255,255,0.4);

+  pointer-events: none;

+}

+

+form[role="dialog"][data-type="confirm"] > menu > button[disabled].recommend {

+  background-color: #006579;

+}

+

+form[role="dialog"][data-type="confirm"] > menu > button[disabled].danger {

+  background-color: #730f0f;

+}

+

+button[disabled]::-moz-selection {

+  -moz-user-select: none;

+}

+

+

+form[role="dialog"][data-type="confirm"] menu button:last-child {

+  margin-left: 1rem;

+}

+

+form[role="dialog"][data-type="confirm"] menu button,

+form[role="dialog"][data-type="confirm"] menu button:first-child {

+  margin: 0;

+}

+

+form[role="dialog"][data-type="confirm"] menu button {

+  width: calc((100% - 1rem) / 2);

+}

+

+form[role="dialog"][data-type="confirm"] menu button.full {

+  width: 100%;

+}

+

+/* Specific component code */

+form[role="dialog"][data-type="confirm"] p {

+  word-wrap: break-word;

+  margin: 1rem 0 0;

+  padding: 1rem 1.5rem;

+  border-top: 0.1rem solid #686868;

+  line-height: 3rem;

+}

+

+form[role="dialog"][data-type="confirm"] p span {

+    font-size: 1.5rem;

+    display: block;

+    line-height: 1.7rem;

+    color: rgba(255,255,255,0.6);

+}

+

+form[role="dialog"][data-type="confirm"] p img {

+  float: left;

+  margin-right: 2rem;

+}

+

+form[role="dialog"][data-type="confirm"] p strong {

+  font-weight: lighter;

+}

+

+form[role="dialog"][data-type="confirm"] p small {

+  font-size: 1.4rem;

+  font-weight: normal;

+  color: #cbcbcb;

+  display: block;

+}