[Altimeter] Project InitHEADmaster

Signed-off-by: Yongkook Kim <yk22.kim@samsung.com>
Change-Id: I2873b2234e00d678d387dcec1b3127d90e1aa8f4

732 files changed, 49663 insertions, 0 deletions

diff --git a/LICENSE.APLv2 b/LICENSE.APLv2
new file mode 100644
index 0000000..d645695
--- /dev/null
+++ b/LICENSE.APLv2
@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
diff --git a/NOTICE b/NOTICE
new file mode 100644
index 0000000..1c1a4d0
--- /dev/null
+++ b/NOTICE
@@ -0,0 +1,3 @@
+Copyright (c) 2012 Samsung Electronics Co., Ltd. All rights reserved.
+Except as noted, this software is licensed under Apache License, Version 2.
+Please, see the LICENSE.APLv2 file for Apache License, Version 2 terms and conditions.
diff --git a/config.xml b/config.xml
new file mode 100644
index 0000000..ca7d7ae
--- /dev/null
+++ b/config.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE widget>
+<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/Altimeter" version="1.0.0" viewmodes="maximized">
+    <tizen:application id="MiD5UJFCdH.Altimeter" package="MiD5UJFCdH" required_version="2.3"/>
+    <feature name="http://tizen.org/feature/screen.size.all"/>
+    <content src="index.html"/>
+    <icon src="icon.png"/>
+    <name>Altimeter</name>
+</widget>
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..eb75345
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,69 @@
+#main-content {
+    position: relative;
+}
+
+#altitude {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    bottom: 50px;
+    display: -webkit-flex;
+}
+
+#altitude-frame {
+    margin: auto;
+    text-align: center;
+}
+
+#altitude-value {
+    font-size: 100px;
+    font-weight: bold;
+    line-height: 100px;
+}
+
+#pressure {
+    position: absolute;
+    height: 50px;
+    left: 20px;
+    right: 20px;
+    bottom: 0px;
+    font-size: 20px;
+}
+
+#reference {
+    position: absolute;
+    left: 0;
+}
+
+#current {
+    position: absolute;
+    right: 0;
+    text-align: right;
+}
+
+@media (-tizen-geometric-shape: circle) {
+    .btn-apply:before {
+        -webkit-mask-image: url(../images/tw_ic_button_apply_holo_dark.png);
+    }
+
+    .btn-erase:before {
+        -webkit-mask-image: url(../images/tw_ic_button_erase_holo_dark.png);
+    }
+
+    .btn-apply, .btn-erase {
+        color: transparent;
+    }
+
+    .ui-popup .ui-popup-content {
+        text-align: center;
+    }
+
+    #main-content {
+        height: 36% !important;
+    }
+
+    #altitude-value {
+        font-size: 90px;
+        line-height: 90px;
+    }
+}
\ No newline at end of file
diff --git a/icon.png b/icon.png
new file mode 100644
index 0000000..fe5741c
--- /dev/null
+++ b/icon.png
diff --git a/images/tw_ic_button_apply_holo_dark.png b/images/tw_ic_button_apply_holo_dark.png
new file mode 100644
index 0000000..8774e2b
--- /dev/null
+++ b/images/tw_ic_button_apply_holo_dark.png
diff --git a/images/tw_ic_button_erase_holo_dark.png b/images/tw_ic_button_erase_holo_dark.png
new file mode 100644
index 0000000..bff6f96
--- /dev/null
+++ b/images/tw_ic_button_erase_holo_dark.png
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7a98e9e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width,user-scalable=no">
+    <meta charset="utf-8"/>
+    <meta name="description" content="Altimeter"/>
+    <title>Altimeter</title>
+    <link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.css"/>
+    <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="lib/tau/wearable/theme/default/tau.circle.min.css">
+    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
+</head>
+<body>
+
+    <div class="ui-page ui-page-active" id="main">
+        <header class="ui-header">
+            <h2 class="ui-title">Altimeter [m]</h2>
+        </header>
+        <div id="main-content" class="ui-content">
+            <div id="altitude">
+                <div id="altitude-frame">
+                    <div id="altitude-value"></div>
+                 </div>
+            </div>
+            <div id="pressure">
+                <div id="reference">
+                    <div id="reference-label">Reference [hPa]</div>
+                    <div id="reference-value"></div>
+                </div>
+                <div id="current">
+                    <div id="current-label">Current [hPa]</div>
+                    <div id="current-value"></div>
+                </div>
+            </div>
+        </div>
+        <footer class="ui-footer ui-fixed">
+            <a class="ui-btn" id="calibration-btn">Calibrate</a>
+        </footer>
+        <div id="popup-calibration" class="ui-popup">
+            <div class="ui-popup-content" id="popup-calibration-message">
+                App should be calibrated before use.
+                <br>
+                Do you want to do it now?
+            </div>
+            <div class="ui-popup-footer ui-grid-col-2">
+                <button class="ui-btn ui-btn-footer-icon btn-apply" id="popup-calibration-yes">Yes</button>
+                <button class="ui-btn ui-btn-footer-icon btn-erase" id="popup-calibration-no">No</button>
+            </div>
+        </div>
+        <div id="alert" class="ui-popup">
+            <div class="ui-popup-content" id="alert-message"></div>
+            <div class="ui-popup-footer">
+                <button class="ui-btn ui-btn-footer-icon btn-apply" id="alert-ok">OK</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="./js/tau-config.js"></script>
+    <script src="./lib/tau/wearable/js/tau.js"></script>
+    <script src="./js/core/core.js" data-main="./js/app.js"></script>
+
+</body>
+</html>
diff --git a/js/app.js b/js/app.js
new file mode 100644
index 0000000..c9b0e4c
--- /dev/null
+++ b/js/app.js
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2014 Samsung Electronics Co., Ltd. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*global require, define, console, $*/
+
+/**
+ * App module.
+ * @requires {@link Altimeter/views/init}
+ * @namespace Altimeter/app
+ * @memberof Altimeter
+ */
+
+define({
+    name: 'app',
+    requires: [
+        'views/init'
+    ],
+    def: function appInit() {
+        'use strict';
+
+        /**
+         * Initializes the app.
+         * @memberof Altimeter/app
+         */
+        function init() {
+            console.log('APP: init()');
+        }
+
+        return {
+            init: init
+        };
+    }
+});
+
diff --git a/js/core/.gitignore b/js/core/.gitignore
new file mode 100644
index 0000000..af95e6b
--- /dev/null
+++ b/js/core/.gitignore
@@ -0,0 +1,2 @@
+/tests/_build
+/tests/node_modules
\ No newline at end of file
diff --git a/js/core/.jscsrc b/js/core/.jscsrc
new file mode 100644
index 0000000..c51de4b
--- /dev/null
+++ b/js/core/.jscsrc
@@ -0,0 +1,44 @@
+{
+    "excludeFiles": [
+        "*/node_modules/*",
+        "*/libs/*",
+        "*/lib/*"
+    ],
+
+    "validateJSDoc": {
+        "checkParamNames": true,
+        "checkRedundantParams": true,
+        "requireParamTypes": true
+    },
+
+    "maximumLineLength": 80,
+
+
+    "requireCurlyBraces": ["if", "else", "for", "while", "do", "try", "catch"],
+    "requireMultipleVarDecl": true,
+    "requireBlocksOnNewline": true,
+    "requireLineFeedAtFileEnd": true,
+    "requireDotNotation": true,
+    "requireBlocksOnNewline": 1,
+    "requireSpaceAfterLineComment": true,
+    "requireSpaceBeforeBlockStatements": true,
+    "requireSpacesInConditionalExpression": true,
+    "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
+    "requireSpacesInFunctionExpression": {
+        "beforeOpeningCurlyBrace": true
+    },
+    "requireSpaceBeforeBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!=="],
+    "requireSpaceAfterBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!=="],
+
+    "disallowAnonymousFunctions": true,
+    "disallowKeywords": ["with"],
+    "disallowEmptyBlocks": true,
+
+    "disallowNewlineBeforeBlockStatements": true,
+    "disallowSpaceAfterObjectKeys": true,
+    "disallowSpacesInsideArrayBrackets": true,
+    "disallowSpacesInsideParentheses": true,
+    "disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"],
+    "disallowSpaceBeforePostfixUnaryOperators": ["++", "--"],
+    "disallowSpaceBeforeBinaryOperators": [","]
+}
diff --git a/js/core/.jshintignore b/js/core/.jshintignore
new file mode 100644
index 0000000..039e6b2
--- /dev/null
+++ b/js/core/.jshintignore
@@ -0,0 +1,2 @@
+*/node_modules/*
+*/libs/*
diff --git a/js/core/.jshintrc b/js/core/.jshintrc
new file mode 100644
index 0000000..115de8b
--- /dev/null
+++ b/js/core/.jshintrc
@@ -0,0 +1,25 @@
+{
+    "browser": false,
+    "curly": true,
+    "devel": false,
+    "globals": {},
+    "immed": true,
+    "indent": 4,
+    "latedef": true,
+    "maxcomplexity": 7,
+    "maxdepth": 3,
+    "maxlen": 80,
+    "maxparams": 5,
+    "maxstatements": 30,
+    "noempty": true,
+    "nomen": true,
+    "nonew": true,
+    "onevar": true,
+    "plusplus": true,
+    "quotmark": "single",
+    "strict": true,
+    "trailing": true,
+    "undef": true,
+    "unused": "strict",
+    "white": true
+}
diff --git a/js/core/README.md b/js/core/README.md
new file mode 100644
index 0000000..faef037
--- /dev/null
+++ b/js/core/README.md
@@ -0,0 +1,53 @@
+
+# Overview #
+
+Reference Web Applications Core uses a simple MVP (Model View Presenter) architecture.
+
+There are a core part which determines the architecture and an app part which determines the application behavior.
+
+
+# Overview of core.js #
+
+`core.js` implements simple AMD (Asynchronous Module Definition) and specifies module defining.
+
+Modules definition organizes code into simple units (modules).
+Module can refer to other modules – dependency references.
+
+
+## Loading ##
+
+`core.js` loads files with a different approach than &lt;script&gt; tags in HTML file.
+
+`core.js` loads each file as a script tag, using _document.createElement_ and _head.appendChild_ and then waits for all dependencies to load, figures the right order to call definitions of module.
+
+## Usage ##
+
+Adding `core.js` to index.html:
+```
+{@lang xml}<script src="./js/libs/core/core.js" data-main="./js/app.js"></script>
+```
+
+
+Where `app.js` is the main application module.
+
+```
+{@lang javascript}define({
+    name: 'app',
+    def: function def() {}
+});
+```
+
+### Defining a module ###
+A module is a file with simple code unit, different from a traditional script file. Module avoids impact on global namespace like _window_.
+Any valid return from a module is allowed, module can return objects, functions or nothing. If module definition return object with
+_init_ method then module will be automatically initialized.
+There should only be __one__ module definition per file.
+
+[See examples how to define a module](global.html#define)
+
+
+# Contributors #
+
+* [Sergiusz Struminski](mailto:s.struminski@samsung.com)
+* [Pawel Sierszen](mailto:p.sierszen@samsung.com)
+* [Kamil Stepczuk](mailto:k.stepczuk@samsung.com)
diff --git a/js/core/core.js b/js/core/core.js
new file mode 100644
index 0000000..9a25ede
--- /dev/null
+++ b/js/core/core.js
@@ -0,0 +1,672 @@
+/*
+ * Copyright (c) 2014 Samsung Electronics Co., Ltd. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+/**
+ * @namespace core
+ * @author Sergiusz Struminski <s.struminski@samsung.com>
+ * @author Pawel Sierszen <p.sierszen@samsung.com>
+ */
+(function core(global) {
+    'use strict';
+
+    /**
+     * Public object.
+     * @type {object}
+     */
+    var publicAPI = {},
+
+        /**
+         * Document element.
+         * @type {object}
+         */
+        document = global.document,
+
+        /**
+         * Head element.
+         * @type {HTMLHeadElement}
+         */
+        head = document.getElementsByTagName('head')[0],
+
+        /**
+         * Internal object cache
+         * @type {object}
+         */
+        modules = {},
+
+        /**
+         * Internal config
+         * @type {object}
+         */
+        cfg = {
+
+            /**
+             * Default path to modules.
+             * @type {string}
+             */
+            defaultPath: './js/',
+
+            /**
+             * Path to core modules.
+             * @type {string}
+             */
+            basePath: null,
+
+            /**
+             * Path to application modules.
+             * @type {string}
+             */
+            modulePath: null
+        };
+
+    /**
+     * Generic Module class.
+     * @private
+     */
+    function Module(name) {
+        // Module name.
+        this.name = name;
+        return;
+    }
+
+    /**
+     * Returns correct path for modules.
+     * @private
+     * @param {string} data Current path.
+     * @return {string} New path.
+     */
+    function getPath(data) {
+        var index = data.lastIndexOf('/'),
+            path = data.substr(0, index + 1);
+
+        return path || './';
+    }
+
+    /**
+     * Have all requires been sorted already?
+     * @private
+     * @param {string[]} requires Requires.
+     * @param {string[]} sorted Sorted requires.
+     * @return {boolean} result.
+     */
+    function areSorted(requires, sorted) {
+        var i = 0,
+            depsLen = requires.length,
+            result = true;
+        for (i = 0; i < depsLen; i += 1) {
+            // Has mod been sorted already?
+            result = result && (sorted.indexOf(requires[i]) !== -1);
+        }
+        return result;
+    }
+
+    /**
+     * Sort modules by requires (dependents last),
+     * returning sorted list of module names.
+     * @private
+     * @param {object} modules Modules.
+     */
+    function sort(modules) {
+
+        var name = null,
+            // Modules to be sorted.
+            pending = [],
+            // Modules already sorted.
+            sorted = [],
+            // Remember length of pending list for each module.
+            visited = {},
+            currModule = null;
+
+        for (name in modules) {
+            if (modules.hasOwnProperty(name)) {
+                if (modules[name].instance) {
+                    // Already linked.
+                    sorted.push(name);
+                } else {
+                    // Sort for linking.
+                    pending.push(name);
+                }
+            }
+        }
+
+        // Repeat while there are modules pending.
+        while (pending.length > 0) {
+
+            // Consider the next pending module
+            currModule = pending.shift();
+
+            // If we've been here and have not made any progress, we are looping
+            // (no support for cyclic module requires).
+            if (visited[currModule] && visited[currModule] <= pending.length) {
+                throw new Error('No support for circular module dependency.');
+            }
+            visited[currModule] = pending.length;
+
+            // Consider the current module's import requires.
+            if (areSorted(modules[currModule].requires, sorted)) {
+                // Requires done, module done.
+                sorted.push(currModule);
+            } else {
+                // Some requires still pending.
+                pending.push(currModule);
+            }
+        }
+
+        return sorted;
+    }
+
+    /**
+     * Merge the contents of two objects into the first object.
+     * @private
+     * @param {Object} target Target object (child).
+     * @param {Object} source Source object (parent).
+     * @return {Object} Target object.
+     */
+    function extend(target, source) {
+        var prop = null;
+        for (prop in source) {
+            if (source.hasOwnProperty(prop)) {
+                Object.defineProperty(
+                    target,
+                    prop,
+                    {
+                        value: source[prop]
+                    }
+                );
+            }
+        }
+        return target;
+    }
+
+    /**
+     * Create the object using Def as a constructor.
+     * In this case the object inherits the prototype from Def.
+     * @private
+     * @param {function} Def Constructing function.
+     * @param {object[]} args Parameters for the constructing function.
+     * @return {object} Constructed object.
+     */
+    function construct(Def, args) {
+        var argsLen = args.length;
+
+        // Switch/case is used for performance reasons.
+        switch (argsLen) {
+        case 0:
+            return new Def();
+        case 1:
+            return new Def(args[0]);
+        case 2:
+            return new Def(args[0], args[1]);
+        case 3:
+            return new Def(args[0], args[1], args[2]);
+        case 4:
+            return new Def(args[0], args[1], args[2], args[3]);
+        case 5:
+            return new Def(args[0], args[1], args[2], args[3], args[4]);
+        default:
+            // Too many parameters, use a short form instead
+            return Def.apply(Object.create(Def.prototype), args);
+        }
+    }
+
+    /**
+     * Creates an object using the passed constructor and parameters.
+     * @private
+     * @param {function} Def Constructing function.
+     * @param {object[]} args Parameters for the constructing function.
+     * @return {object} Object of Def type.
+     */
+    function instantiate(Def, args) {
+        var obj = null, proto = null;
+
+        obj = construct(Def, args);
+
+        // Constructors don't have to return anything, but we need at least
+        // an empty object.
+        if (!obj) {
+            obj = {};
+        }
+
+        /**
+         * If the module returns a plain object, we need to fix this.
+         * Create an object with a valid prototype
+         * and extend it by copying properties from the original object.
+         * The previous prototype, if any, is ignored.
+         * Only modules created with Object function will be extended.
+         * It is for ignore global objects like "window" or "tizen".
+         */
+        proto = Object.getPrototypeOf(obj);
+        if (proto !== null && !Object.prototype.isPrototypeOf(proto)) {
+            obj = extend(
+                Object.create(Def.prototype),
+                obj
+            );
+        }
+
+        return obj;
+    }
+
+    /**
+     * Assigns nested attributes.
+     * @private
+     * @param {object} obj Object.
+     * @param {string[]} pathElements Elements array.
+     * @param {object} value Object.
+     */
+    function assignNested(obj, pathElements, value) {
+        var i, key = pathElements.pop();
+        // Check the path.
+        for (i = 0; i < pathElements.length; i += 1) {
+            // If empty create an empty object here.
+            obj = obj[pathElements[i]] = obj[pathElements[i]] || {};
+        }
+        obj[key] = value;
+    }
+
+    /**
+     * Returns required module instance.
+     * Parameters are passed to the constructor.
+     * @private
+     * @param {string} moduleName Module name.
+     * @param {object} reqModule Required module object.
+     * @return {object} Module instance.
+     */
+    function requireInstance(moduleName, reqModule) {
+        var instance = reqModule.instance;
+        if (reqModule.name === 'core/event') {
+            // Make new object inherited from core/event module
+            // for adding additional properties (per caller module).
+            instance = Object.create(reqModule.instance);
+            // Module name used to fire events.
+            instance.evName = moduleName.replace(/\//g, '.');
+        }
+        return instance;
+    }
+
+    /**
+     * Creates parameters (from required modules).
+     * Parameteres are passed to the constructor.
+     * @private
+     * @param {object} module Module object.
+     * @return {object[]} params.
+     */
+    function createParams(module) {
+        var def = module.def,
+            requires = module.requires,
+            params = [],
+            req = {},
+            instance = null,
+            i = 0;
+
+        if (def.length === 1 && requires.length > 1) {
+            // Collect requires as object.
+            for (i = requires.length - 1; i >= 0; i -= 1) {
+                instance = requireInstance(module.name, modules[requires[i]]);
+
+                // Full name keys for array-like indexing.
+                req[requires[i]] = instance;
+
+                // Nested objects for cleaner syntax.
+                assignNested(req, requires[i].split('/'), instance);
+            }
+            params.push(req);
+
+        } else if (def.length === requires.length) {
+            // Collect requires as modules.
+            for (i = requires.length - 1; i >= 0; i -= 1) {
+                params[i] = requireInstance(module.name, modules[requires[i]]);
+            }
+
+        } else if (def.length !== 0) {
+            // Invalid number of params.
+            // Definition module params length is greater than zero
+            // and different than requires params length.
+            throw new Error(
+                'Invalid number of params in ' + def.name +
+                    '- expected ' + requires.length + ' but is ' + def.length
+            );
+        }
+
+        return params;
+    }
+
+
+    /**
+     * Links and runs modules in the order in which they were loaded.
+     * @private
+     */
+    function link() {
+        var i = 0,
+            sorted = [],
+            sortedLen = 0,
+            name = '',
+            module = null;
+
+        // Sort modules in requires order.
+        sorted = sort(modules);
+        sortedLen = sorted.length;
+
+        // Create instances of modules in requires order.
+        for (i = 0; i < sortedLen; i += 1) {
+            name = sorted[i];
+            module = modules[name];
+
+            if (module.instance === undefined) {
+                module.initialized = false;
+
+                // Each module should inherit from a generic Module object.
+                module.def.prototype = new Module(name);
+
+                // Execute module code, pass requires, record exports.
+                modules[name].instance = instantiate(
+                    module.def,
+                    createParams(module)
+                );
+            }
+        }
+
+        // Initialize modules in requires order.
+        // It must be in different loop (see above)
+        // because we need every instance ready.
+        for (i = 0; i < sortedLen; i += 1) {
+            name = sorted[i];
+            module = modules[name];
+
+            if (module.instance !== undefined && !module.initialized) {
+                if (typeof modules[name].instance.init === 'function') {
+                    modules[name].instance.init();
+                    module.initialized = true;
+                }
+            }
+        }
+
+    }
+
+    /**
+     * Returns instance of module.
+     * @global
+     *
+     * @example
+     * // Define `foo` module which require `bar` module:
+     * define({
+     *     name: 'foo',
+     *     requires: ['bar'],
+     *     def: function def(bar) {}
+     * });
+     *
+     * // Define `bar` module which needs some `foo` functionalities:
+     * // You can't define a circular dependency
+     * // (foo needs bar and bar needs foo)
+     * define({
+     *     name: 'bar',
+     *     requires: ['foo'],
+     *     def: function def(foo) {}
+     * });
+     *
+     * // In that case use:
+     * define({
+     *     name: 'bar',
+     *     def: function def() {
+     *         var foo;
+     *         function init() {
+     *             foo = require('foo');
+     *         }
+     *         return {
+     *             init: init
+     *         }
+     *     }
+     * });
+     *
+     * @throws {Error} Module must be defined.
+     * @throws {Error} Module must be an instance.
+     *
+     * @param {string} moduleName Module name.
+     * @return {object} Module instance.
+     */
+    function require(moduleName) {
+        var module = modules[moduleName];
+
+        if (module === undefined) {
+            throw new Error('Module ' + moduleName + ' must be defined.');
+        }
+
+        if (module.instance === undefined) {
+            throw new Error('The instance of ' + moduleName +
+                ' doesn\'t exist yet.');
+        }
+
+        return module.instance;
+    }
+
+    /**
+     * Loads a script.
+     * @private
+     * @param {string} src Script src.
+     */
+    function loadScript(src) {
+        var script = null;
+
+        script = document.createElement('script');
+        script.setAttribute('src', src);
+        script.addEventListener('error', function error() {
+            throw new Error(
+                'Failed to load "' + src + '" script'
+            );
+        });
+        head.appendChild(script);
+    }
+
+    /**
+     * Loads a module.
+     * @private
+     * @param {string} moduleName Module name.
+     */
+    function load(moduleName) {
+        var modulePath = '';
+
+        if (modules[moduleName] !== undefined) {
+            return false;
+        }
+
+        modules[moduleName] = {};
+
+        if (moduleName.indexOf('core') === 0) {
+            modulePath = cfg.basePath || cfg.defaultPath;
+        } else {
+            modulePath = cfg.modulePath || cfg.defaultPath;
+        }
+
+        loadScript(modulePath + moduleName + '.js');
+
+        return true;
+    }
+
+    /**
+     * Check whether this was the last module to be loaded
+     * in a given dependency group.
+     * If yes, start linking and running modules.
+     * @private
+     */
+    function loaded() {
+        var m = null,
+            pending = [];
+
+        for (m in modules) {
+            if (modules.hasOwnProperty(m) && modules[m].name === undefined) {
+                pending.push(m);
+            }
+        }
+
+        if (pending.length === 0) {
+            link();
+        }
+    }
+
+    /**
+     * The function that handles definitions of modules.
+     * @global
+     *
+     * @example
+     * // Define `foo` module:
+     * define({
+     *     name: 'foo',
+     *     def: function def() {}
+     * });
+     *
+     * @example
+     * // Define `bar` module:
+     * define({
+     *     name: 'bar',
+     *     def: function def() {}
+     * });
+     *
+     * @example
+     * // Define `foo` module which require `bar` module:
+     * define({
+     *     name: 'foo',
+     *     requires: ['bar'],
+     *     def: function def(bar) {}
+     * });
+     *
+     * @example
+     * // Define `foo` module which require `bar1` and `bar2` module:
+     * define({
+     *     name: 'foo',
+     *     requires: ['bar1', 'bar2'],
+     *     def: function def(bar1, bar2) {}
+     * });
+     *
+     * @example
+     * // Define `foo` module which require `bar1` and `bar2` module:
+     * define({
+     *     name: 'foo',
+     *     requires: ['bar1', 'bar2'],
+     *     def: function def(require) {
+     *         var bar1 = require.bar1,
+     *             bar2 = require.bar2;
+     *     }
+     * });
+     *
+     * @example
+     * // Define `foo` module which require `path/bar1` and `path/bar2` module:
+     * define({
+     *     name: 'foo',
+     *     requires: ['path/bar1', 'path/bar2'],
+     *     def: function def(require) {
+     *         // recommended
+     *         var bar1 = require.path.bar1,
+     *             bar2 = require.path.bar2;
+     *         // or
+     *         var bar1 = require['path/bar1'],
+     *             bar2 = require['path/bar2'];
+     *     }
+     * });
+     *
+     * @example
+     * // Define `foo` module which is automatically initialized
+     * // during definition:
+     * define({
+     *     name: 'foo',
+     *     def: function def() {
+     *         // module definition
+     *         function init() {
+     *             // init action
+     *         }
+     *
+     *         // return the module value with init function
+     *         return {
+     *             init: init
+     *         };
+     *     }
+     * });
+     *
+     * @throws {Error} Module must have name and definititon.
+     * @throws {Error} Module is already defined.
+     *
+     * @param {object} module Module object.
+     * @param {string} module.name Module name.
+     * @param {string[]} [module.requires] Module requires.
+     * @param {function} module.def Module definititon.
+     */
+    function define(module) {
+        var i = 0,
+            j = 0;
+
+        module = module || {};
+
+        if (module.name === undefined || module.def === undefined) {
+            throw new Error(
+                'Module must have name and definition'
+            );
+        }
+
+        if (modules[module.name] !== undefined &&
+                modules[module.name].name !== undefined) {
+            throw new Error(
+                'Module "' + module.name + '" is already defined'
+            );
+        }
+
+        module.requires = module.requires || [];
+        modules[module.name] = module;
+
+        // Load required modules.
+        for (i = 0, j = module.requires.length; i < j; i += 1) {
+            load(module.requires[i]);
+        }
+
+        // Check for loaded modules.
+        loaded();
+
+        return true;
+    }
+
+    /**
+     * Looks for a data-main attribute in script elements.
+     * Data-main attribute tells core to load main application script.
+     * @private
+     * @return {boolean}
+     */
+    function main() {
+        var i = 0,
+            len = 0,
+            scripts = document.getElementsByTagName('script'),
+            script = null,
+            dataMain = null;
+
+        for (i = 0, len = scripts.length; i < len; i += 1) {
+            script = scripts[i];
+            dataMain = script.getAttribute('data-main');
+            if (dataMain) {
+                cfg.modulePath = getPath(dataMain);
+                cfg.basePath = getPath(script.getAttribute('src'));
+                loadScript(dataMain);
+                return true;
+            }
+        }
+        return true;
+    }
+
+    publicAPI = {
+        require: require,
+        define: define
+    };
+
+    extend(global, publicAPI);
+
+    main();
+
+}(this));
diff --git a/js/core/core/application.js b/js/core/core/application.js
new file mode 100644
index 0000000..a912b7f
--- /dev/null
+++ b/js/core/core/application.js
@@ -0,0 +1,221 @@
+/*
+ * Copyright (c) 2014 Samsung Electronics Co., Ltd. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*global define, console*/
+/*jslint regexp: true*/
+
+/**
+ * Application module
+ * @requires {@link core/event}
+ * @requires {@link core/tizen}
+ * @namespace core/application
+ * @memberof core
+ */
+
+define({
+    name: 'core/application',
+    requires: [
+        'core/event',
+        'core/window',
+        'core/tizen'
+    ],
+    def: function coreApplication(e, window, tizen) {
+        'use strict';
+
+        var app = null,
+            navigator = window.navigator,
+            APP_CONTROL_URL = 'http://tizen.org/appcontrol/';
+
+        /**
+         * Gets current application.
+         * @memberof core/application
+         */
+        function getCurrentApplication() {
+            return app.getCurrentApplication();
+        }
+
+        /**
+         * Gets application control URI.
+         * @memberof core/application
+         * @param {object} operation Operation name.
+         */
+        function getAppControlUri(operation) {
+            return APP_CONTROL_URL + operation;
+        }
+
+        /**
+         * Gets current application id.
+         * @memberof core/application
+         */
+        function getId() {
+            return getCurrentApplication().appInfo.id;
+        }
+
+        /**
+         * Launches application control.
+         * @memberof core/application
+         * @param {object} controlData Control data params.
+         * @param {string} controlData.operation Operation uri.
+         * @param {string} [controlData.mime] MIME type.
+         */
+        function launchAppControl(controlData) {
+            var control = new tizen.ApplicationControl(
+                    getAppControlUri(controlData.operation),
+                    null,
+                    controlData.mime || null
+                ),
+                replyCallback = {
+                    onsuccess: function onsuccess(data) {
+                        e.fire(
+                            'replySuccess',
+                            {
+                                operation: controlData.operation,
+                                data: data
+                            }
+                        );
+                    },
+                    onfailure: function onfailure() {
+                        e.fire(
+                            'replyFailure',
+                            {
+                                operation: controlData.operation
+                            }
+                        );
+                    }
+                };
+
+            try {
+                app.launchAppControl(
+                    control,
+                    null,
+                    function successCallback() {
+                        e.fire(
+                            'launchSuccess',
+                            {
+                                operation: controlData.operation
+                            }
+                        );
+                    },
+                    function errorCallback(ev) {
+                        e.fire(
+                            'launchError',
+                            {
+                                operation: controlData.operation,
+                                data: ev
+                            }
+                        );
+                    },
+                    replyCallback
+                );
+            } catch (e) {
+                console.error(e.message);
+            }
+        }
+
+        /**
+         * Returns requeste application control data.
+         * @memberof core/application
+         * @param {string} operation Action to be performed.
+         * @return {object}
+         */
+        function getRequestedAppControlData(operation) {
+            var rAppControl = getCurrentApplication().getRequestedAppControl(),
+                appControl = null;
+
+            if (rAppControl) {
+                appControl = rAppControl.appControl;
+
+                if (appControl.operation === operation) {
+                    return appControl;
+                }
+            }
+
+            return null;
+        }
+
+        /**
+         * Creates ApplicationControl object.
+         * @memberof core/application
+         * @param {string} operation Action to be performed.
+         */
+        function createApplicationControl(operation) {
+            return new tizen.ApplicationControl(getAppControlUri(operation));
+        }
+
+        /**
+         * Checks if application is running in emulator.
+         * @return {bool} Is emulated.
+         */
+        function isEmulated() {
+            return navigator.platform.indexOf('emulated') !== -1;
+        }
+
+        /**
+         * Application exit.
+         * @memberof core/application
+         */
+        function exit() {
+            getCurrentApplication().exit();
+        }
+
+        /**
+         * Application hide.
+         * @memberof core/application
+         */
+        function hide() {
+            getCurrentApplication().hide();
+        }
+
+        /**
+         * No operation.
+         */
+        function noop() {
+            return;
+        }
+
+        if (typeof tizen === 'object' &&
+                typeof tizen.application === 'object') {
+            app = tizen.application;
+        } else {
+            console.warn(
+                'tizen.application not available, using a mock instead'
+            );
+            app = {
+                launchAppControl: noop,
+                getCurrentApplication: function getApp() {
+                    return {
+                        getRequestedAppControl: noop,
+                        exit: noop,
+                        hide: noop
+                    };
+                }
+            };
+        }
+
+        return {
+            getId: getId,
+            getCurrentApplication: getCurrentApplication,
+            getAppControlUri: getAppControlUri,
+            getRequestedAppControlData: getRequestedAppControlData,
+            launchAppControl: launchAppControl,
+            createApplicationControl: createApplicationControl,
+            isEmulated: isEmulated,
+            hide: hide,
+            exit: exit
+        };
+    }
+
+});
diff --git a/js/core/core/event.js b/js/core/core/event.js
new file mode 100644
index 0000000..bcf8162
--- /dev/null
+++ b/js/core/core/event.js
@@ -0,0 +1,323 @@
+/*
+ * Copyright (c) 2014 Samsung Electronics Co., Ltd. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*jslint forin: true*/
+/*global define*/
+
+/**
+ * Event module.
+ * @requires {@link core/window}
+ * @namespace core/event
+ * @memberof core
+ */
+
+define({
+    name: 'core/event',
+    requires: [
+        'core/window'
+    ],
+    def: function event(window) {
+        'use strict';
+
+        var listeners = {};
+
+        /**
+         * Gets listeners name for event.
+         * @param {string} eventName Event name.
+         * @return {array} Listeners names.
+         */
+        function getListenersNames(eventName) {
+            var key,
+                names = [],
+                handlers = listeners[eventName];
+
+            for (key in handlers) {
+                names.push(handlers[key].name);
+            }
+            return names;
+        }
+
+        /**
+         * Gets listeners for event.
+         * @memberof core/event
+         * @param {string} [eventName] Event name.
+         * @return {object} Listeners names.
+         */
+        function getListeners(eventName) {
+            var evName,
+                names = {};
+
+            if (eventName) {
+                names[eventName] = getListenersNames(eventName);
+            } else {
+                for (evName in listeners) {
+                    names[evName] = getListenersNames(evName);
+                }
+            }
+            return names;
+        }
+
+        /**
+         * Dispatches an event
+         * @param {string} eventName Event name.
+         * @param {*} data Detailed data.
+         * @return {boolean} Cancelled.
+         */
+        function dispatch(eventName, data) {
+            var customEvent = new window.CustomEvent(eventName, {
+                    detail: data,
+                    cancelable: true
+                });
+            return window.dispatchEvent(customEvent);
+        }
+
+        /**
+         * Dispatches an event of given name and detailed data.
+         *
+         * Dispatched event name is prefixed with name of
+         * module which dispatched event.
+         *
+         * For example if event with `test` name will be dispatched from
+         * `foo` module, listener should be added to `foo.test`.
+         *
+         * The return value is false if at least one of the event handlers
+         * which handled this event called event.preventDefault().
+         * Otherwise it returns true.
+         *
+         * @memberof core/event
+         *
+         * @example
+         * // Define `bar` module which fires an event:
+         * define({
+         *     name: 'bar',
+         *     requires: 'core/event',
+         *     def: function def(ev) {
+         *         // Dispatch event
+         *         ev.dispatchEvent('test');
+         *
+         *         // or:
+         *         // ev.fire('test');
+         *     }
+         * });
+         * @see {@link core/event.addEventListener} How to add event listener.
+         *
+         * @param {string} eventName Event name.
+         * @param {*} [data] Detailed data.
+         * @return {boolean}
+         */
+        function dispatchEvent(eventName, data) {
+            /*jshint validthis: true */
+            var customEvName = this.evName + '.' + eventName;
+            return dispatch(customEvName, data);
+
+        }
+
+        /**
+         * Dispatches an event of given name and detailed data.
+         *
+         * Since every new fired event has prefixed module name
+         * this method is deprecated.
+         *
+         * For example if event with `test` name will be dispatched from
+         * `foo` module, listener should be added to `test`.
+         *
+         * Please use new dispatchEvent.
+         * This method can be used only for backward compability.
+         *
+         * @memberof core/event
+         * @deprecated Since v2.0.
+         *
+         * @example
+         * // Define `bar` module which fires an event:
+         * define({
+         *     name: 'bar',
+         *     requires: 'core/event',
+         *     def: function def(ev) {
+         *         // Dispatch event
+         *         ev.shoot('test');
+         *     }
+         * });
+         * @see {@link core/event.addEventListener} How to handle fired event.
+         *
+         * @param {string} eventName Event name.
+         * @param {*} [data] Detailed data.
+         * @return {boolean} Cancelled.
+         */
+        function shoot(eventName, data) {
+            return dispatch(eventName, data);
+        }
+
+        /**
+         * Adds event listener for event name.
+         * @param {string} eventName Event name.
+         * @param {function} handler Handler function.
+         */
+        function addOneEventListener(eventName, handler) {
+            listeners[eventName] = listeners[eventName] || [];
+            listeners[eventName].push(handler);
+            window.addEventListener(eventName, handler);
+        }
+
+        /**
+         * Adds event listeners.
+         * @param {object} listeners Listeners object.
+         */
+        function addEventListeners(listeners) {
+            var eventName;
+            for (eventName in listeners) {
+                if (listeners.hasOwnProperty(eventName)) {
+                    addOneEventListener(eventName, listeners[eventName]);
+                }
+            }
+        }
+
+        /**
+         * Adds event listener for event name.
+         * @memberof core/event
+         *
+         * @example
+         * // Define `foo` module which handles event dispatched from `bar`
+         * // with dispatchEvent method.
+         * define({
+         *     name: 'foo',
+         *     requires: 'core/event',
+         *     def: function def(ev) {
+         *         // Add event listener
+         *         ev.addEventListener('bar.test', function handler() {});
+         *
+         *         // or:
+         *         // ev.on('bar.test', function handler() {});
+         *         // ev.listen('bar.test', function handler() {});
+         *         // ev.listeners('bar.test', function handler() {});
+         *
+         *         // Add event listeners using object:
+         *         // ev.on({'bar.test': function handler() {}});
+         *         // ev.listen({'bar.test': function handler() {}});
+         *         // ev.listeners({'bar.test': function handler() {}});
+         *         // ev.addEventListener({
+         *         //     'bar.test': function handler() {},
+         *         // });
+         *     }
+         * });
+         *
+         * @example
+         * // Define `foo` module which handles event dispatched from `bar`
+         * // with shoot method.
+         * define({
+         *     name: 'foo',
+         *     requires: 'core/event',
+         *     def: function def(ev) {
+         *         // Add event listener
+         *         ev.addEventListener('test', function handler() {});
+         *
+         *         // Or use available aliases for addEventListener
+         * });
+         * @see {@link core/event.dispatchEvent} How to fire event.
+         *
+         * @param {string|object} context Event name or Listeners object.
+         * @param {function} [handler] Handler function.
+         */
+        function addEventListener(context, handler) {
+            var contextType = typeof context;
+            if (contextType === 'object') {
+                addEventListeners(context);
+            } else if (contextType === 'string') {
+                addOneEventListener(context, handler);
+            }
+        }
+
+        /**
+         * Removes event listener.
+         * @memberof core/event
+         *
+         * @param {string} eventName Event name.
+         * @param {function} [handler] Handler function.
+         */
+        function removeEventListener(eventName, handler) {
+            var i, handlerIndex, listenersLen;
+            if (handler !== undefined) {
+                // remove only this specific handler
+                window.removeEventListener(eventName, handler);
+
+                // find it in the array and clear the reference
+                handlerIndex = listeners[eventName].indexOf(handler);
+                if (handlerIndex !== -1) {
+                    listeners[eventName].splice(handlerIndex, 1);
+                }
+            } else {
+                // removes all listeners we know of
+                listenersLen = listeners[eventName].length;
+                for (i = 0; i < listenersLen; i += 1) {
+                    window.removeEventListener(
+                        eventName,
+                        listeners[eventName][i]
+                    );
+                }
+                // clear the references
+                listeners[eventName] = [];
+            }
+        }
+
+        return {
+
+            shoot: shoot, // used only for backward compability
+
+            addEventListener: addEventListener,
+
+            /**
+             * Alias for {@link core/event.addEventListener}
+             * @memberof core/event
+             * @function
+             * @see {@link core/event.addEventListener}
+             */
+            listen: addEventListener,
+            /**
+             * Alias for {@link core/event.addEventListener}
+             * @memberof core/event
+             * @function
+             * @see {@link core/event.addEventListener}
+             */
+            listeners: addEventListener,
+            /**
+             * Alias for {@link core/event.addEventListener}
+             * @memberof core/event
+             * @function
+             * @see {@link core/event.addEventListener}
+             */
+            on: addEventListener,
+
+            /**
+             * Alias for {@link core/event.dispatchEvent}
+             * @memberof core/event
+             * @function
+             * @see {@link core/event.dispatchEvent}
+             */
+            fire: dispatchEvent,
+            dispatchEvent: dispatchEvent,
+
+            /**
+             * Alias for {@link core/event.removeEventListener}
+             * @memberof core/event
+             * @function
+             * @see {@link core/event.removeEventListener}
+             */
+            die: removeEventListener,
+            removeEventListener: removeEventListener,
+
+            getListeners: getListeners
+        };
+    }
+});
diff --git a/js/core/core/storage/idb.js b/js/core/core/storage/idb.js
new file mode 100644
index 0000000..b6b3bf1
--- /dev/null
+++ b/js/core/core/storage/idb.js
@@ -0,0 +1,320 @@
+/*
+ * Copyright (c) 2014 Samsung Electronics Co., Ltd. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*global define, console*/
+
+/**
+ * Simple storage module, implemented using IndexedDB.
+ * @requires {@link core/event}
+ * @requires {@link core/window}
+ * @namespace core/storage/idb
+ * @memberof core
+ */
+
+define({
+    name: 'core/storage/idb',
+    requires: [
+        'core/event',
+        'core/window'
+    ],
+    def: function coreStorage(req) {
+        'use strict';
+
+        var global = req.core.window,
+            indexedDB = global.indexedDB || global.webkitIndexedDB,
+            IDBKeyRange = global.IDBKeyRange || global.webkitIDBKeyRange,
+            e = req.core.event,
+            DB_NAME = 'corestorage',
+            STORE_NAME = 'kvstore',
+            VERSION = 5, // increment the value when db structure changes
+
+            // this module fires the following events
+            EVENT_OPEN = 'open', // db is open and ready to be used
+            EVENT_READ = 'read', // read request completed
+            EVENT_WRITE = 'write', // write request completed
+            EVENT_REMOVE = 'remove', // remove request completed
+            EVENT_COMPLETED = 'completed', // cleared pending requests
+
+            requestsCounter = -1,
+            pending = {},
+            db = null;
+
+        /**
+         * @memberof core/storage/idb
+         */
+        function isReady() {
+            return db !== null;
+        }
+
+        /**
+         * Add a request to the list of pending requests.
+         * @param {string} eventName
+         * @param {string} key
+         * @param {*} [value]
+         * @return {number} unique request ID.
+         */
+        function addPendingRequest(eventName, key, value) {
+            requestsCounter += 1;
+            pending[requestsCounter] = {
+                eventName: eventName,
+                key: key,
+                value: value
+            };
+            return requestsCounter;
+        }
+
+        /**
+         * Get pending request data.
+         * Returns 'undefined' if the request is already completed.
+         * @memberof core/storage/idb
+         * @param {number} id
+         * @return {object}
+         */
+        function getPendingRequest(id) {
+            return pending[id];
+        }
+
+        /**
+         * Checks if there are any pending requests.
+         * @memberof core/storage/idb
+         * @return {boolean}
+         */
+        function hasPendingRequests() {
+            return Object.keys(pending).length !== 0;
+        }
+
+        /**
+         * Remove a completed request from the list of pending requests.
+         * The request should be removed not earlier than all relevant
+         * handlers have finished processing.
+         * @param {type} id
+         */
+        function removePendingRequest(id) {
+            delete pending[id];
+            if (!hasPendingRequests()) {
+                e.fire(EVENT_COMPLETED);
+            }
+        }
+
+        /**
+         * Generic error handler for IndexedDB-related objects.
+         * @param {Error} err
+         */
+        function onerror(err) {
+            console.error(err.target.error.message);
+        }
+
+        /**
+         * Creates or updates database structure.
+         * @param {Event} ev
+         */
+        function onUpgradeNeeded(ev) {
+            var resultDb = ev.target.result;
+
+            // a transaction for changing db version starts automatically
+            ev.target.transaction.onerror = onerror;
+
+            // remove the existing store and create it again
+            if (resultDb.objectStoreNames.contains(STORE_NAME)) {
+                resultDb.deleteObjectStore(STORE_NAME);
+            }
+
+            resultDb.createObjectStore(
+                STORE_NAME,
+                {keyPath: 'key'}
+            );
+        }
+
+        /**
+         * Assigns database object.
+         * This handler is executed right after the upgrade.
+         * This method fires the core.storage.open event upon completion.
+         * @param {Event} ev
+         */
+        function onOpenSuccess(ev) {
+            db = ev.target.result;
+            e.fire(EVENT_OPEN);
+        }
+
+        /**
+         * Open the database.
+         */
+        function open() {
+            // create a request for opening the database
+            var request = indexedDB.open(DB_NAME, VERSION);
+
+            // one or more of the handlers will be called
+            // automatically when the current function exits
+            request.onupgradeneeded = onUpgradeNeeded;
+            request.onsuccess = onOpenSuccess;
+            request.onerror = onerror;
+        }
+
+        /**
+         * Gets value for given key from the storage.
+         * The method fires the core.storage.read event upon completion.
+         * @memberof core/storage/idb
+         * @param {string} key Key.
+         * @return {number} Request id.
+         */
+        function get(key) {
+            var trans = db.transaction([STORE_NAME], 'readwrite'),
+                store = trans.objectStore(STORE_NAME),
+
+                // Find the key in the store
+                keyRange = IDBKeyRange.only(key),
+                id = addPendingRequest(EVENT_READ, key),
+                cursorRequest = store.openCursor(keyRange);
+
+            cursorRequest.onsuccess = function onCursorOpenSuccess(ev) {
+                var error = null,
+                    cursor = ev.target.result;
+
+                if (!cursor) {
+                    error = new Error('No records returned');
+                    error.name = 'StorageNotFoundError';
+
+                    e.fire(EVENT_READ, {
+                        id: id,
+                        key: key,
+                        error: error
+                    });
+                    removePendingRequest(id);
+                } else {
+                    e.fire(EVENT_READ, {
+                        id: id,
+                        key: cursor.value.key,
+                        value: cursor.value.value
+                    });
+                }
+                removePendingRequest(id);
+            };
+
+            cursorRequest.onerror = function onCursorOpenError(err) {
+                removePendingRequest(id);
+                console.error(err.target.error.message);
+            };
+
+            return id;
+        }
+
+        /**
+         * Sets value for given key to the storage.
+         * The method fires the core.storage.write event upon completion.
+         * @memberof core/storage/idb
+         * @param {string} key Key.
+         * @param {object} val Value object.
+         * @return {boolean}
+         */
+        function set(key, val) {
+            var trans = db.transaction([STORE_NAME], 'readwrite'),
+                store = trans.objectStore(STORE_NAME),
+                request = store.put({
+                    key: key,
+                    value: val
+                }),
+                id = addPendingRequest(EVENT_WRITE, key, val);
+
+            request.onsuccess = function onPutSuccess() {
+                e.fire(
+                    EVENT_WRITE,
+                    {id: id, key: key, value: val}
+                );
+                removePendingRequest(id);
+            };
+
+            request.onerror = function onPutError(err) {
+                console.error(err.target.error.message);
+                removePendingRequest(id);
+            };
+
+            return id;
+        }
+
+        /**
+         * Removes value with given key from the storage.
+         * The method fires the core.storage.remove event upon completion.
+         * @param {string} key Key name.
+         * @return {number} id Id.
+         */
+        function removeItem(key) {
+            var trans = db.transaction([STORE_NAME], 'readwrite'),
+                store = trans.objectStore(STORE_NAME),
+                id = addPendingRequest(EVENT_REMOVE, key),
+                request = store.delete(key);
+
+            request.onsuccess = function onDeleteSuccess() {
+                e.fire(EVENT_REMOVE, {id: id, key: key});
+                removePendingRequest(id);
+            };
+
+            request.onerror = function onDeleteError(err) {
+                console.error(err.target.error.message);
+                removePendingRequest(id);
+            };
+            return id;
+        }
+
+        /**
+         * Removes keys from given array.
+         * @param {string[]} keys Key array.
+         */
+        function removeItems(keys) {
+            var ids = [];
+            keys.forEach(function forEach(key) {
+                ids.push(removeItem(key));
+            });
+            return ids;
+        }
+
+        /**
+         * Removes value for given context.
+         * @memberof core/storage/idb
+         * @param {string|array} context Key name or keys array.
+         * @return {number|array} id Id or ids array.
+         */
+        function remove(context) {
+            var id = -1;
+            if (typeof context === 'string') {
+                id = removeItem(context);
+            } else if (Array.isArray(context)) {
+                id = removeItems(context);
+            }
+            return id;
+        }
+
+        function init() {
+            open();
+        }
+
+        return {
+            init: init,
+            getPendingRequest: getPendingRequest,
+            hasPendingRequests: hasPendingRequests,
+            isReady: isReady,
+            get: get,
+            /**
+             * Alias for {@link core/storage/idb.set}
+             * @memberof core/storage/idb
+             * @function
+             * @see {@link core/storage/idb.set}
+             */
+            add: set,
+            set: set,
+            remove: remove
+        };
+    }
+});
diff --git a/js/core/core/systeminfo.js b/js/core/core/systeminfo.js
new file mode 100644
index 0000000..21774e9
--- /dev/null
+++ b/js/core/core/systeminfo.js
@@ -0,0 +1,120 @@
+/*
+ * Copyright (c) 2014 Samsung Electronics Co., Ltd. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*global define, console*/
+
+/**
+ * System info module
+ * @requires {@link core/event}
+ * @requires {@link core/tizen}
+ * @namespace core/systeminfo
+ * @memberof core
+ */
+
+define({
+    name: 'core/systeminfo',
+    requires: [
+        'core/event',
+        'core/tizen'
+    ],
+    def: function coreSystemInfo(e, tizen) {
+        'use strict';
+
+        var systeminfo = null,
+            lowBattery = 0.04;
+
+        function noop() {
+            return;
+        }
+
+        /**
+         * Gets system property
+         * @memberof core/systeminfo
+         * @param {string} property Property name.
+         * @param {function} onSuccess Success callback.
+         * @param {function} onError Error callback.
+         */
+        function getSystemProperty(property, onSuccess, onError) {
+            systeminfo.getPropertyValue(property, onSuccess, onError);
+        }
+
+        /**
+         * Add listener for battery change to low
+         * @memberof core/systeminfo
+         * @fires "battery.low"
+         */
+        function listenBatteryLowState() {
+            systeminfo.addPropertyValueChangeListener(
+                'BATTERY',
+                function change(battery) {
+                    if (!battery.isCharging) {
+                        e.fire('battery.low');
+                    }
+                },
+                {
+                    lowThreshold: lowBattery
+                }
+            );
+        }
+
+        /**
+         * Check low battery state
+         * @memberof core/systeminfo
+         * @fires "battery.low"
+         * @fires "battery.normal"
+         * @fires "battery.checked"
+         */
+        function checkBatteryLowState() {
+            systeminfo.getPropertyValue('BATTERY', function getValue(battery) {
+                if (battery.level < lowBattery && !battery.isCharging) {
+                    e.fire('battery.low', {
+                        level: battery.level
+                    });
+                } else {
+                    e.fire('battery.normal');
+                }
+                e.fire('battery.checked');
+            }, null);
+        }
+
+        /**
+         * Initialise module.
+         * @memberof core/systeminfo
+         * @private
+         */
+        function init() {
+            if (typeof tizen === 'object' &&
+                    typeof tizen.systeminfo === 'object') {
+                systeminfo = tizen.systeminfo;
+            } else {
+                console.warn(
+                    'tizen.systeminfo not available'
+                );
+                systeminfo = {
+                    getPropertyValue: noop,
+                    addPropertyValueChangeListener: noop
+                };
+            }
+        }
+
+        return {
+            getSystemProperty: getSystemProperty,
+            checkBatteryLowState: checkBatteryLowState,
+            listenBatteryLowState: listenBatteryLowState,
+            init: init
+        };
+    }
+});
diff --git a/js/core/core/tizen.js b/js/core/core/tizen.js
new file mode 100644
index 0000000..771cc36
--- /dev/null
+++ b/js/core/core/tizen.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2014 Samsung Electronics Co., Ltd. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*global define*/
+
+/**
+ * Tizen module.
+ * Module returns tizen global object.
+ * @namespace core/tizen
+ * @memberof core
+ *
+ * @example
+ * //Define `foo` module which require `core/tizen` module:
+ * define({
+ *     name: 'foo',
+ *     requires: ['core/tizen'],
+ *     def: function (tizen) {
+ *          var systeminfo = tizen.systeminfo;
+ *     }
+ * });
+ */
+
+define({
+    name: 'core/tizen',
+    requires: ['core/window'],
+    def: function coreTizen(win) {
+        'use strict';
+
+        return win.tizen;
+    }
+});
diff --git a/js/core/core/window.js b/js/core/core/window.js
new file mode 100644
index 0000000..c7f79cc
--- /dev/null
+++ b/js/core/core/window.js
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2014 Samsung Electronics Co., Ltd. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*global define, window*/
+
+/**
+ * Window module.
+ * Module returns window global object.
+ * @namespace core/window
+ * @memberof core
+ *
+ * @example
+ * //Define `foo` module which require `core/window` module:
+ * define({
+ *     name: 'foo',
+ *     requires: ['core/window'],
+ *     def: function (window) {
+*          var document = window.document;
+ *     }
+ * });
+ */
+
+define({
+    name: 'core/window',
+    def: function coreWindow() {
+        'use strict';
+
+        return window;
+    }
+});
diff --git a/js/helpers/dom.js b/js/helpers/dom.js
new file mode 100644
index 0000000..edd1e48
--- /dev/null
+++ b/js/helpers/dom.js
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2014 Samsung Electronics Co., Ltd. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*global define, tizen*/
+
+/**
+ * Dom helper module.
+ * @namespace Altimeter/helpers/dom
+ * @memberof Altimeter/helpers
+ */
+
+define({
+    name: 'helpers/dom',
+    def: function helpersDom() {
+        'use strict';
+
+        /**
+         * Returns parent node with class name given as second parameter
+         * of the child given as first parameter.
+         * @memberof Altimeter/helpers/dom
+         * @param {DOMElement} element
+         * @param {string} parentClassName
+         * @return {DOMElement}
+         */
+        function findParentByClassName(element, parentClassName) {
+            parentClassName = parentClassName.toLowerCase();
+            do {
+                element = element.parentNode;
+                if (element.classList &&
+                        element.classList.contains(parentClassName)) {
+                    return element;
+                }
+            } while (element.parentNode);
+        }
+
+        return {
+            findParentByClassName: findParentByClassName
+        };
+    }
+});
diff --git a/js/models/pressure.js b/js/models/pressure.js
new file mode 100644
index 0000000..a6f0f2c
--- /dev/null
+++ b/js/models/pressure.js
@@ -0,0 +1,223 @@
+/*
+ * Copyright (c) 2014 Samsung Electronics Co., Ltd. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*global define, console, tizen */
+
+/**
+ * Sensor model.
+ * @requires {@link core/event}
+ * @requires {@link core/window}
+ * @namespace Altimeter/models/pressure
+ * @memberof Altimeter/models
+ */
+define({
+    name: 'models/pressure',
+    requires: [
+        'core/event',
+        'core/window'
+    ],
+    def: function modelsPressure(e, window) {
+        'use strict';
+
+        /**
+         * Reference to the sensor service.
+         * @type {SensorService}
+         */
+        var sensorService = null,
+
+            /**
+             * Reference to the pressure sensor.
+             * @type {PressureSensor}
+             */
+            pressureSensor = null,
+
+            /**
+             * Name of the sensor type.
+             * @type {string}
+             */
+            SENSOR_TYPE = 'PRESSURE',
+
+            /**
+             * Error type name.
+             * @type {string}
+             */
+            ERROR_TYPE_NOT_SUPPORTED = 'NotSupportedError',
+
+            /**
+             * Array of registered pressures.
+             * @type {number[]}
+             */
+            previousPressures = [],
+
+            /**
+             * Maximum size of the previousPressures array.
+             * @type {number}
+             */
+            MAX_LENGTH = 7,
+
+            /**
+             * Average pressure.
+             * @type {number}
+             */
+            averagePressure = 0,
+
+            /**
+             * Current pressure.
+             * @type {number}
+             */
+            currentPressure = 0;
+
+        /**
+         * Performs action on start sensor success.
+         */
+        function onSensorStartSuccess() {
+            e.fire('start');
+        }
+
+        /**
+         * Performs action on start sensor error.
+         * @param {Error} e
+         */
+        function onSensorStartError(e) {
+            console.error('Pressure sensor start error: ', e);
+            e.fire('error', e);
+        }
+
+        /**
+         * Updates the average pressure value.
+         * @param {number} currentPressure
+         * @return {number}
+         */
+        function updateAveragePressure(currentPressure) {
+            previousPressures.push(currentPressure);
+
+            var len = previousPressures.length;
+
+            if (len <= MAX_LENGTH) {
+                // nothing to shift yet, recalculate whole average
+                averagePressure = previousPressures.reduce(function sum(a, b) {
+                    return a + b;
+                }) / len;
+            } else {
+                // add the new item and subtract the one shifted out
+                averagePressure += (
+                    currentPressure - previousPressures.shift()
+                ) / len;
+            }
+            return averagePressure;
+        }
+
+        /**
+         * Performs action on sensor change.
+         * @param {object} data
+         */
+        function onSensorChange(data) {
+            currentPressure = data.pressure;
+            updateAveragePressure(currentPressure);
+            e.fire('change', {
+                current: data.pressure,
+                average: averagePressure
+            });
+        }
+
+        /**
+         * Starts sensor.
+         * @memberof Altimeter/models/pressure
+         */
+        function start() {
+            pressureSensor.start(onSensorStartSuccess, onSensorStartError);
+        }
+
+        /**
+         * Sets sensor change listener.
+         * @memberof Altimeter/models/pressure
+         */
+        function setChangeListener() {
+            pressureSensor.setChangeListener(onSensorChange);
+        }
+
+        /**
+         * Returns sensor value.
+         * @memberof Altimeter/models/pressure
+         */
+        function getSensorValue() {
+            return currentPressure;
+        }
+
+        /**
+         * Returns average of several past readings.
+         * @memberof Altimeter/models/pressure
+         * @return {number}
+         */
+        function getAverageSensorValue() {
+            return averagePressure;
+        }
+
+        /**
+         * Handles sensor data.
+         * @param {object} data
+         */
+        function setCurrentPressureValue(data) {
+            currentPressure = data.pressure;
+        }
+
+        /**
+         * Returns true if sensor is available, false otherwise.
+         * @memberof Altimeter/models/pressure
+         * @return {boolean}
+         */
+        function isAvailable() {
+            return !!pressureSensor;
+        }
+
+        /**
+         * Initializes module.
+         * @memberof Altimeter/models/pressure
+         */
+        function init() {
+            sensorService = tizen.sensorservice ||
+                (window.webapis && window.webapis.sensorservice) ||
+                null;
+
+            if (!sensorService) {
+                e.fire('error', {type: 'notavailable'});
+            } else {
+                try {
+                    pressureSensor = sensorService
+                        .getDefaultSensor(SENSOR_TYPE);
+                    pressureSensor
+                        .getPressureSensorData(setCurrentPressureValue);
+                } catch (error) {
+                    if (error.type === ERROR_TYPE_NOT_SUPPORTED) {
+                        e.fire('error', {type: 'notsupported'});
+                    } else {
+                        e.fire('error', {type: 'unknown'});
+                    }
+                }
+            }
+        }
+
+        return {
+            initSensor: init,
+            start: start,
+            isAvailable: isAvailable,
+            setChangeListener: setChangeListener,
+            getAverageSensorValue: getAverageSensorValue,
+            getSensorValue: getSensorValue
+        };
+    }
+
+});
diff --git a/js/models/settings.js b/js/models/settings.js
new file mode 100644
index 0000000..a967641
--- /dev/null
+++ b/js/models/settings.js
@@ -0,0 +1,153 @@
+/*
+ * Copyright (c) 2014 Samsung Electronics Co., Ltd. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*global define, console*/
+
+/**
+ * Settings model.
+ * @requires {@link core/storage/idb}
+ * @requires {@link core/event}
+ * @namespace Altimeter/models/settings
+ * @memberof Altimeter/models
+ */
+define({
+    name: 'models/settings',
+    requires: [
+        'core/storage/idb',
+        'core/event'
+    ],
+    def: function modelsSettings(req) {
+        'use strict';
+
+        /**
+         * Core event module.
+         * @type {Module}
+         */
+        var e = req.core.event,
+
+            /**
+             * Core IDB storage module.
+             * @type {Module}
+             */
+            s = req.core.storage.idb,
+
+            /**
+             * Storage key.
+             * @type {string}
+             */
+            STORAGE_KEY = 'settings',
+
+            /**
+             * Default pressure.
+             * @type {object}
+             */
+            DEFAULT = Object.freeze({
+                pressure: 1013.25
+            }),
+
+            /**
+             * Settings object.
+             * @type {object}
+             */
+            settings = {};
+
+        /**
+         * Saves settings to storage.
+         */
+        function saveSettings() {
+            s.add(STORAGE_KEY, settings);
+        }
+
+        /**
+         * Sets given settings property.
+         * @memberof Altimeter/models/settings
+         * @param {string} property
+         * @param {number} value
+         * @return {boolean}
+         */
+        function set(property, value) {
+            if (property !== undefined && value !== undefined) {
+                settings[property] = value;
+                saveSettings();
+                return true;
+            }
+            return false;
+        }
+
+        /**
+         * Returns given settings property.
+         * @memberof Altimeter/models/settings
+         * @param {string} property
+         * @return {number}
+         */
+        function get(property) {
+            if (settings[property] === undefined) {
+                console.error('Settings not initialized yet.');
+                return null;
+            }
+            return settings[property];
+        }
+
+        /**
+         * Initializes module.
+         */
+        function init() {
+            s.get(STORAGE_KEY);
+        }
+
+        /**
+         * Handles core.storage.idb.read event.
+         * @param {event} ev
+         */
+        function onRead(ev) {
+            if (ev.detail.key !== STORAGE_KEY) {
+                return;
+            }
+            if (typeof ev.detail.value !== 'object') {
+                settings = {
+                    pressure: DEFAULT.pressure
+                };
+                saveSettings();
+            } else {
+                settings = ev.detail.value;
+            }
+            e.fire('ready');
+        }
+
+        /**
+         * Make sure that init is run when storage is ready.
+         * @memberof Altimeter/models/settings
+         */
+        function runInit() {
+            if (s.isReady()) {
+                init();
+            } else {
+                e.listen('core.storage.idb.open', init);
+            }
+        }
+
+        e.listeners({
+            'core.storage.idb.read': onRead
+        });
+
+        return {
+            init: runInit,
+            get: get,
+            set: set
+        };
+    }
+
+});
diff --git a/js/tau-config.js b/js/tau-config.js
new file mode 100644
index 0000000..0ee1614
--- /dev/null
+++ b/js/tau-config.js
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2014 Samsung Electronics Co., Ltd. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*global document, tau*/
+
+document.addEventListener('tauinit', function onTauInit() {
+    'use strict';
+
+    tau.setConfig('pageTransition', 'none');
+    tau.setConfig('popupTransition', 'none');
+});
diff --git a/js/views/init.js b/js/views/init.js
new file mode 100644
index 0000000..d048b4e
--- /dev/null
+++ b/js/views/init.js
@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) 2014 Samsung Electronics Co., Ltd. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*global define, console, window, document*/
+
+/**
+ * Init page module.
+ * @requires {@link core/event}
+ * @requires {@link core/application}
+ * @requires {@link core/systeminfo}
+ * @requires {@link Altimeter/views/main}
+ * @namespace Altimeter/views/init
+ * @memberof Altimeter/views
+ */
+define({
+    name: 'views/init',
+    requires: [
+        'core/event',
+        'core/application',
+        'core/systeminfo',
+        'views/main'
+    ],
+    def: function viewsInitPage(req) {
+        'use strict';
+
+        /**
+         * Core event module.
+         * @type {Module}
+         */
+        var e = req.core.event,
+
+            /**
+             * Core application module.
+             * @type {Module}
+             */
+            app = req.core.application,
+
+            /**
+             * Core systeminfo module.
+             * @type {Module}
+             */
+            sysInfo = req.core.systeminfo;
+
+        /**
+         * Registers view event listeners.
+         */
+        function bindEvents() {
+            document.addEventListener('tizenhwkey', function onTizenhwkey(e) {
+                if (e.keyName === 'back') {
+                    app.exit();
+                }
+            });
+            sysInfo.listenBatteryLowState();
+        }
+
+        /**
+         * Handles the core.battery.low event.
+         */
+        function onLowBattery() {
+            app.exit();
+        }
+
+        /**
+         * Handles the core.battery.checked state.
+         */
+        function onBatteryChecked() {
+            e.fire('device.ready');
+        }
+
+        /**
+         * Initializes the module.
+         * @memberof Altimeter/views/init
+         */
+        function init() {
+            bindEvents();
+            sysInfo.checkBatteryLowState();
+        }
+
+        e.listeners({
+            'core.systeminfo.battery.low': onLowBattery,
+            'core.systeminfo.battery.checked': onBatteryChecked
+        });
+
+        return {
+            init: init
+        };
+    }
+
+});
diff --git a/js/views/main.js b/js/views/main.js
new file mode 100644
index 0000000..8dd19e3
--- /dev/null
+++ b/js/views/main.js
@@ -0,0 +1,355 @@
+/*
+ * Copyright (c) 2014 Samsung Electronics Co., Ltd. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*global define, console, document, tau*/
+
+/**
+ * Main page module.
+ * @requires {@link core/event}
+ * @requires {@link Altimeter/models/settings}
+ * @requires {@link Altimeter/models/pressure}
+ * @requires {@link core/application}
+ * @namespace Altimeter/views/main
+ * @memberof Altimeter/views
+ */
+
+define({
+    name: 'views/main',
+    requires: [
+        'core/event',
+        'models/settings',
+        'models/pressure',
+        'core/application'
+    ],
+    def: function viewsMainPage(req) {
+        'use strict';
+
+        /**
+         * Core event module.
+         * @type {Module}
+         */
+        var e = req.core.event,
+
+            /**
+             * Pressure module.
+             * @type {Module}
+             */
+            sensor = req.models.pressure,
+
+            /**
+             * Settings module.
+             * @type {Module}
+             */
+            settings = req.models.settings,
+
+            /**
+             * Core event module.
+             * @type {Module}
+             */
+            app = req.core.application,
+
+            /**
+             * Popup message.
+             * @type {string}
+             */
+            ARE_YOU_SURE_MSG = 'Are you sure you want to calibrate device?',
+
+            /**
+             * Popup message.
+             * @type {string}
+             */
+            SENSOR_NOT_AVAILABLE_MSG = 'Pressure sensor is not available.',
+
+            /**
+             * Popup message.
+             * @type {string}
+             */
+            SENSOR_NOT_SUPPORTED_MSG = 'Pressure sensor is not supported ' +
+                'on this device.',
+
+            /**
+             * Popup message.
+             * @type {string}
+             */
+            SENSOR_UNKNOWN_ERROR_MSG = 'Unknown sensor error occurs.',
+
+            /**
+             * Reference to the popup message element.
+             * @type {HTMLElement}
+             */
+            calibrationMessage = null,
+
+            /**
+             * Reference to the 'Calibration' button.
+             * @type {HTMLElement}
+             */
+            calibrationBtn = null,
+
+            /**
+             * Reference to the 'Yes' button.
+             * @type {HTMLElement}
+             */
+            yesBtn = null,
+
+            /**
+             * Reference to the 'No' button.
+             * @type {HTMLElement}
+             */
+            noBtn = null,
+
+            /**
+             * Reference to the 'reference' element.
+             * @type {HTMLElement}
+             */
+            referenceValue = null,
+
+            /**
+             * Reference to the 'pressure' element.
+             * @type {HTMLElement}
+             */
+            pressureValue = null,
+
+            /**
+             * Reference to the 'altitude' element.
+             * @type {HTMLElement}
+             */
+            altitudeValue = null,
+
+            /**
+             * Reference to the 'alert' popup.
+             * @type {HTMLElement}
+             */
+            alertElement = null,
+
+            /**
+             * Reference to the alert message element.
+             * @type {HTMLElement}
+             */
+            alertMessage = null,
+
+            /**
+             * Reference to the 'ok' button on the alert popup.
+             * @type {HTMLElement}
+             */
+            alertOk = null,
+
+            /**
+             * Reference to the 'calibration' popup.
+             * @type {HTMLElement}
+             */
+            popupCalibration = null;
+
+        /**
+         * Updates reference pressure value.
+         */
+        function updateReferenceValue() {
+            referenceValue.innerText = settings.get('pressure').toFixed(2);
+        }
+
+        /**
+         * Updates current pressure value.
+         * @param {number} value
+         */
+        function updatePressureValue(value) {
+            pressureValue.innerText = value.toFixed(2);
+        }
+
+        /**
+         * Updates altitude value.
+         * @param {number} value
+         */
+        function updateAltitudeValue(value) {
+            var reference = settings.get('pressure'),
+                text = '',
+                altitude = -8727 * Math.log(value / reference);
+
+            text = altitude.toFixed(0);
+            if (text === '-0') {
+                text = '0';
+            }
+            altitudeValue.innerText = text;
+        }
+
+        /**
+         * Resets altitude value.
+         */
+        function resetAltitudeValue() {
+            altitudeValue.innerText = '0';
+        }
+
+        /**
+         * Shows application working space.
+         */
+        function showWorkingSpace() {
+            updateReferenceValue();
+        }
+
+        /**
+         * Shows application start monit.
+         */
+        function showCalibrationMonit() {
+            tau.openPopup(popupCalibration);
+        }
+
+        /**
+         * Calibrates pressure.
+         */
+        function calibratePressure() {
+            settings.set('pressure', sensor.getAverageSensorValue());
+            resetAltitudeValue();
+            updateReferenceValue();
+        }
+
+        /**
+         * Shows alert popup.
+         * @param {string} message Message.
+         */
+        function openAlert(message) {
+            alertMessage.innerHTML = message;
+            tau.openPopup(alertElement);
+        }
+
+        /**
+         * Handles click event on calibration button.
+         */
+        function onCalibrationBtnClick() {
+            calibrationMessage.innerHTML = ARE_YOU_SURE_MSG;
+            showCalibrationMonit();
+        }
+
+        /**
+         * Handles click event on yes button.
+         */
+        function onYesBtnClick() {
+            tau.closePopup();
+            showWorkingSpace();
+            calibratePressure();
+        }
+
+        /**
+         * Handles click event on no button.
+         */
+        function onNoBtnClick() {
+            tau.closePopup();
+            showWorkingSpace();
+        }
+
+        /**
+         * Handles sensor.start event.
+         */
+        function onSensorStart() {
+            showCalibrationMonit();
+        }
+
+        /**
+         * Handles models.pressure.error event.
+         * @param {object} data
+         */
+        function onSensorError(data) {
+            var type = data.detail.type;
+
+            if (type === 'notavailable') {
+                openAlert(SENSOR_NOT_AVAILABLE_MSG);
+            } else if (type === 'notsupported') {
+                openAlert(SENSOR_NOT_SUPPORTED_MSG);
+            } else {
+                openAlert(SENSOR_UNKNOWN_ERROR_MSG);
+            }
+        }
+
+        /**
+         * Handles sensor.change event.
+         * @param {Event} ev
+         */
+        function onSensorChange(ev) {
+            updatePressureValue(ev.detail.average);
+            updateAltitudeValue(ev.detail.average);
+        }
+
+        /**
+         * Handles device.ready event.
+         */
+        function onDeviceReady() {
+            sensor.initSensor();
+            if (sensor.isAvailable()) {
+                sensor.setChangeListener();
+                sensor.start();
+            }
+        }
+
+        /**
+         * Handles click event on OK button.
+         */
+        function onOkClick() {
+            tau.closePopup();
+        }
+
+        /**
+         * Handles popupHide event on popup element.
+         */
+        function onPopupHide() {
+            app.exit();
+        }
+
+        /**
+         * Registers event listeners.
+         */
+        function bindEvents() {
+            calibrationBtn.addEventListener('click', onCalibrationBtnClick);
+            yesBtn.addEventListener('click', onYesBtnClick);
+            noBtn.addEventListener('click', onNoBtnClick);
+            alertElement.addEventListener('popuphide', onPopupHide);
+            alertOk.addEventListener('click', onOkClick);
+        }
+
+        /**
+         * Initializes module.
+         * @memberof Altimeter/views/main
+         */
+        function init() {
+            calibrationMessage = document.getElementById(
+                'popup-calibration-message'
+            );
+            calibrationBtn = document.getElementById('calibration-btn');
+            yesBtn = document.getElementById(
+                'popup-calibration-yes'
+            );
+            noBtn = document.getElementById(
+                'popup-calibration-no'
+            );
+            referenceValue = document.getElementById('reference-value');
+            pressureValue = document.getElementById('current-value');
+            altitudeValue = document.getElementById('altitude-value');
+            alertElement = document.getElementById('alert');
+            alertMessage = document.getElementById('alert-message');
+            alertOk = document.getElementById('alert-ok');
+            popupCalibration = document.getElementById('popup-calibration');
+            bindEvents();
+        }
+
+        e.listeners({
+            'models.pressure.start': onSensorStart,
+            'models.pressure.error': onSensorError,
+            'models.pressure.change': onSensorChange,
+            'views.init.device.ready': onDeviceReady
+        });
+
+        return {
+            init: init
+        };
+    }
+
+});
diff --git a/lib/tau/LICENSE.Flora b/lib/tau/LICENSE.Flora
new file mode 100644
index 0000000..4ab7e53
--- /dev/null
+++ b/lib/tau/LICENSE.Flora
@@ -0,0 +1,206 @@
+Flora License
+
+Version 1.1, April, 2013
+
+http://floralicense.org/license/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction,
+and distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by
+the copyright owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and
+all other entities that control, are controlled by, or are
+under common control with that entity. For the purposes of
+this definition, "control" means (i) the power, direct or indirect,
+to cause the direction or management of such entity,
+whether by contract or otherwise, or (ii) ownership of fifty percent (50%)
+or more of the outstanding shares, or (iii) beneficial ownership of
+such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity
+exercising permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications,
+including but not limited to software source code, documentation source,
+and configuration files.
+
+"Object" form shall mean any form resulting from mechanical
+transformation or translation of a Source form, including but
+not limited to compiled object code, generated documentation,
+and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or Object form,
+made available under the License, as indicated by a copyright notice
+that is included in or attached to the work (an example is provided
+in the Appendix below).
+
+"Derivative Works" shall mean any work, whether in Source or Object form,
+that is based on (or derived from) the Work and for which the editorial
+revisions, annotations, elaborations, or other modifications represent,
+as a whole, an original work of authorship. For the purposes of this License,
+Derivative Works shall not include works that remain separable from,
+or merely link (or bind by name) to the interfaces of, the Work and
+Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including the original
+version of the Work and any modifications or additions to that Work or
+Derivative Works thereof, that is intentionally submitted to Licensor
+for inclusion in the Work by the copyright owner or by an individual or
+Legal Entity authorized to submit on behalf of the copyright owner.
+For the purposes of this definition, "submitted" means any form of
+electronic, verbal, or written communication sent to the Licensor or
+its representatives, including but not limited to communication on
+electronic mailing lists, source code control systems, and issue
+tracking systems that are managed by, or on behalf of, the Licensor
+for the purpose of discussing and improving the Work, but excluding
+communication that is conspicuously marked or otherwise designated
+in writing by the copyright owner as "Not a Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity
+on behalf of whom a Contribution has been received by Licensor and
+subsequently incorporated within the Work.
+
+"Tizen Certified Platform" shall mean a software platform that complies
+with the standards set forth in the Tizen Compliance Specification
+and passes the Tizen Compliance Tests as defined from time to time
+by the Tizen Technical Steering Group and certified by the Tizen
+Association or its designated agent.
+
+2. Grant of Copyright License.  Subject to the terms and conditions of
+this License, each Contributor hereby grants to You a perpetual,
+worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+copyright license to reproduce, prepare Derivative Works of,
+publicly display, publicly perform, sublicense, and distribute the
+Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License.  Subject to the terms and conditions of
+this License, each Contributor hereby grants to You a perpetual,
+worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+(except as stated in this section) patent license to make, have made,
+use, offer to sell, sell, import, and otherwise transfer the Work
+solely as incorporated into a Tizen Certified Platform, where such
+license applies only to those patent claims licensable by such
+Contributor that are necessarily infringed by their Contribution(s)
+alone or by combination of their Contribution(s) with the Work solely
+as incorporated into a Tizen Certified Platform to which such
+Contribution(s) was submitted. If You institute patent litigation
+against any entity (including a cross-claim or counterclaim
+in a lawsuit) alleging that the Work or a Contribution incorporated
+within the Work constitutes direct or contributory patent infringement,
+then any patent licenses granted to You under this License for that
+Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution.  You may reproduce and distribute copies of the
+Work or Derivative Works thereof pursuant to the copyright license
+above, in any medium, with or without modifications, and in Source or
+Object form, provided that You meet the following conditions:
+
+  1. You must give any other recipients of the Work or Derivative Works
+     a copy of this License; and
+  2. You must cause any modified files to carry prominent notices stating
+     that You changed the files; and
+  3. You must retain, in the Source form of any Derivative Works that
+     You distribute, all copyright, patent, trademark, and attribution
+     notices from the Source form of the Work, excluding those notices
+     that do not pertain to any part of the Derivative Works; and
+  4. If the Work includes a "NOTICE" text file as part of its distribution,
+     then any Derivative Works that You distribute must include a readable
+     copy of the attribution notices contained within such NOTICE file,
+     excluding those notices that do not pertain to any part of
+     the Derivative Works, in at least one of the following places:
+     within a NOTICE text file distributed as part of the Derivative Works;
+     within the Source form or documentation, if provided along with the
+     Derivative Works; or, within a display generated by the Derivative Works,
+     if and wherever such third-party notices normally appear.
+     The contents of the NOTICE file are for informational purposes only
+     and do not modify the License. You may add Your own attribution notices
+     within Derivative Works that You distribute, alongside or as an addendum
+     to the NOTICE text from the Work, provided that such additional attribution
+     notices cannot be construed as modifying the License. You may add Your own
+     copyright statement to Your modifications and may provide additional or
+     different license terms and conditions for use, reproduction, or
+     distribution of Your modifications, or for any such Derivative Works
+     as a whole, provided Your use, reproduction, and distribution of
+     the Work otherwise complies with the conditions stated in this License
+     and your own copyright statement or terms and conditions do not conflict
+     the conditions stated in the License including section 3.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+any Contribution intentionally submitted for inclusion in the Work
+by You to the Licensor shall be under the terms and conditions of
+this License, without any additional terms or conditions.
+Notwithstanding the above, nothing herein shall supersede or modify
+the terms of any separate license agreement you may have executed
+with Licensor regarding such Contributions.
+
+6. Trademarks.  This License does not grant permission to use the trade
+names, trademarks, service marks, or product names of the Licensor,
+except as required for reasonable and customary use in describing the
+origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+agreed to in writing, Licensor provides the Work (and each
+Contributor provides its Contributions) on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied, including, without limitation, any warranties or conditions
+of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+PARTICULAR PURPOSE. You are solely responsible for determining the
+appropriateness of using or redistributing the Work and assume any
+risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+whether in tort (including negligence), contract, or otherwise,
+unless required by applicable law (such as deliberate and grossly
+negligent acts) or agreed to in writing, shall any Contributor be
+liable to You for damages, including any direct, indirect, special,
+incidental, or consequential damages of any character arising as a
+result of this License or out of the use or inability to use the
+Work (including but not limited to damages for loss of goodwill,
+work stoppage, computer failure or malfunction, or any and all
+other commercial damages or losses), even if such Contributor
+has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+the Work or Derivative Works thereof, You may choose to offer,
+and charge a fee for, acceptance of support, warranty, indemnity,
+or other liability obligations and/or rights consistent with this
+License. However, in accepting such obligations, You may act only
+on Your own behalf and on Your sole responsibility, not on behalf
+of any other Contributor, and only if You agree to indemnify,
+defend, and hold each Contributor harmless for any liability
+incurred by, or claims asserted against, such Contributor by reason
+of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Flora License to your work
+
+To apply the Flora License to your work, attach the following
+boilerplate notice, with the fields enclosed by brackets "[]"
+replaced with your own identifying information. (Don't include
+the brackets!) The text should be enclosed in the appropriate
+comment syntax for the file format. We also recommend that a
+file or class name and description of purpose be included on the
+same "printed page" as the copyright notice for easier
+identification within third-party archives.
+
+   Copyright 2015 Samsung Electronics Co., Ltd.
+
+   Licensed under the Flora License, Version 1.1 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://floralicense.org/license/
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+
diff --git a/lib/tau/VERSION b/lib/tau/VERSION
new file mode 100644
index 0000000..9b40aa6
--- /dev/null
+++ b/lib/tau/VERSION
@@ -0,0 +1 @@
+0.10.4
diff --git a/lib/tau/wearable/js/tau.js b/lib/tau/wearable/js/tau.js
new file mode 100644
index 0000000..407871a
--- /dev/null
+++ b/lib/tau/wearable/js/tau.js
@@ -0,0 +1,24538 @@
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function(window, document, undefined) {
+
+var ns = window.tau = {},
+nsConfig = window.tauConfig = window.tauConfig || {};
+nsConfig.rootNamespace = 'tau';
+nsConfig.fileName = 'tau';
+ns.version = '0.10.4';
+/*global window, console, define, ns, nsConfig */
+/*jslint plusplus:true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Core namespace
+ * Object contains main framework methods.
+ * @class ns
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Krzysztof Antoszek <k.antoszek@samsung.com>
+ * @author Maciej Moczulski <m.moczulski@samsung.com>
+ * @author Piotr Karny <p.karny@samsung.com>
+ * @author Tomasz Lukawski <t.lukawski@samsung.com>
+ */
+(function (document, ns, nsConfig) {
+	
+			var idNumberCounter = 0,
+			currentDate = +new Date(),
+			slice = [].slice,
+			rootNamespace = nsConfig.rootNamespace,
+			fileName = nsConfig.fileName,
+			infoForLog = function (args) {
+				var dateNow = new Date();
+				args.unshift('[' + rootNamespace + '][' + dateNow.toLocaleString() + ']');
+			};
+
+		/**
+		* Return unique id
+		* @method getUniqueId
+		* @static
+		* @return {string}
+		* @member ns
+		*/
+		ns.getUniqueId = function () {
+			return rootNamespace + "-" + ns.getNumberUniqueId() + "-" + currentDate;
+		};
+
+		/**
+		* Return unique id
+		* @method getNumberUniqueId
+		* @static
+		* @return {number}
+		* @member ns
+		*/
+		ns.getNumberUniqueId = function () {
+			return idNumberCounter++;
+		};
+
+		/**
+		* logs supplied messages/arguments
+		* @method log
+		* @static
+		* @param {...*} argument
+		* @member ns
+		*/
+		ns.log = function () {
+			var args = slice.call(arguments);
+			infoForLog(args);
+			if (console) {
+				console.log.apply(console, args);
+			}
+		};
+
+		/**
+		* logs supplied messages/arguments ad marks it as warning
+		* @method warn
+		* @static
+		* @param {...*} argument
+		* @member ns
+		*/
+		ns.warn = function () {
+			var args = slice.call(arguments);
+			infoForLog(args);
+			if (console) {
+				console.warn.apply(console, args);
+			}
+		};
+
+		/**
+		* logs supplied messages/arguments and marks it as error
+		* @method error
+		* @static
+		* @param {...*} argument
+		* @member ns
+		*/
+		ns.error = function () {
+			var args = slice.call(arguments);
+			infoForLog(args);
+			if (console) {
+				console.error.apply(console, args);
+			}
+		};
+
+		/**
+		* get from nsConfig
+		* @method getConfig
+		* @param {string} key
+		* @param {*} defaultValue
+		* @return {*}
+		* @static
+		* @member ns
+		*/
+		ns.getConfig = function (key, defaultValue) {
+			return nsConfig[key] === undefined ? defaultValue : nsConfig[key];
+		};
+
+		/**
+		 * set in nsConfig
+		 * @method setConfig
+		 * @param {string} key
+		 * @param {*} value
+		 * @param {boolean} [asDefault=false] value should be treated as default (doesn't overwrites the config[key] if it already exists)
+		 * @static
+		 * @member ns
+		*/
+		ns.setConfig = function (key, value, asDefault) {
+			if (!asDefault || (asDefault && nsConfig[key] === undefined)) {
+				nsConfig[key] = value;
+			}
+		};
+
+		/**
+		 * Return path for framework script file.
+		 * @method getFrameworkPath
+		 * @returns {?string}
+		 * @member ns
+		 */
+		ns.getFrameworkPath = function () {
+			var scripts = document.getElementsByTagName('script'),
+				countScripts = scripts.length,
+				i,
+				url,
+				arrayUrl,
+				count;
+			for (i = 0; i < countScripts; i++) {
+				url = scripts[i].src;
+				arrayUrl = url.split('/');
+				count = arrayUrl.length;
+				if (arrayUrl[count - 1] === fileName + '.js' || arrayUrl[count - 1] === fileName + '.min.js') {
+					return arrayUrl.slice(0, count - 1).join('/');
+				}
+			}
+			return null;
+		};
+
+		}(window.document, ns, nsConfig));
+
+/*global window, define*/
+/*jslint bitwise: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Piotr Karny <p.karny@samsung.com>
+ */
+(function (ns) {
+	
+	
+			// Default configuration properties
+			ns.setConfig('rootDir', ns.getFrameworkPath(), true);
+			ns.setConfig('version', '');
+			ns.setConfig('allowCrossDomainPages', false, true);
+			ns.setConfig('domCache', false, true);
+			// .. other possible options
+			// ns.setConfig('autoBuildOnPageChange', true);
+			// ns.setConfig('autoInitializePage', true);
+			// ns.setConfig('container', document.body); // for defining application container
+			// ns.setConfig('pageContainer', document.body); // same as above, but for wearable version
+
+			}(ns));
+
+/*global window, define*/
+/*jslint bitwise: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * @class ns.support
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ */
+(function (window, document, ns) {
+	
+			var isTizen = !(typeof tizen === "undefined");
+
+			function isCircleShape() {
+				var testDiv = document.createElement("div"),
+					fakeBody = document.createElement("body"),
+					html = document.getElementsByTagName('html')[0],
+					style = getComputedStyle(testDiv),
+					isCircle;
+
+				testDiv.classList.add("is-circle-test");
+				fakeBody.appendChild(testDiv);
+				html.insertBefore(fakeBody, html.firstChild);
+				isCircle = style.width === "1px";
+				html.removeChild(fakeBody);
+
+				return isCircle;
+			}
+
+			ns.support = {
+				cssTransitions: true,
+				mediaquery: true,
+				cssPseudoElement: true,
+				touchOverflow: true,
+				cssTransform3d: true,
+				boxShadow: true,
+				scrollTop: 0,
+				dynamicBaseTag: true,
+				cssPointerEvents: false,
+				boundingRect: true,
+				browser: {
+					ie: false,
+					tizen: isTizen
+				},
+				shape: {
+					circle: isTizen ? window.matchMedia("(-tizen-geometric-shape: circle)").matches : isCircleShape(),
+				},
+				gradeA : function () {
+					return true;
+				}
+			};
+			}(window, window.document, ns));
+
+/*global window, define*/
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint bitwise: true */
+/*
+ * @author Piotr Karny <p.karny@samsung.com>
+ */
+(function (ns) {
+	
+				// Default configuration properties for wearable
+			ns.setConfig("autoBuildOnPageChange", false, true);
+
+			if(ns.support.shape.circle) {
+				ns.setConfig("pageTransition", "pop");
+				ns.setConfig("popupTransition", "pop");
+				ns.setConfig("popupFullSize", true);
+				ns.setConfig("scrollEndEffectArea", "screen");
+				ns.setConfig("enablePageScroll", true);
+				ns.setConfig("enablePopupScroll", true);
+			} else {
+				ns.setConfig("popupTransition", "slideup");
+				ns.setConfig("enablePageScroll", false);
+				ns.setConfig("enablePopupScroll", false);
+			}
+			// .. other possible options
+			// ns.setConfig('autoInitializePage', true);
+			// ns.setConfig('pageContainer', document.body); // defining application container for wearable
+
+			}(ns));
+
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint plusplus: true, nomen: true */
+//  * @TODO add support of $.mobile.buttonMarkup.hoverDelay
+/*
+ * Defaults settings object
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @class ns.defaults
+ */
+(function (ns) {
+	
+	
+			ns.defaults = {};
+
+			Object.defineProperty(ns.defaults, "autoInitializePage", {
+				 get: function(){
+					 return ns.getConfig("autoInitializePage", true);
+				 },
+				 set: function(value){
+					 return ns.setConfig("autoInitializePage", value);
+				 }
+			});
+
+			Object.defineProperty(ns.defaults, "dynamicBaseEnabled", {
+				 get: function(){
+					 return ns.getConfig("dynamicBaseEnabled", true);
+				 },
+				 set: function(value){
+					 return ns.setConfig("dynamicBaseEnabled", value);
+				 }
+			});
+
+			Object.defineProperty(ns.defaults, "pageTransition", {
+				 get: function(){
+					 return ns.getConfig("pageTransition", "none");
+				 },
+				 set: function(value){
+					 return ns.setConfig("pageTransition", value);
+				 }
+			});
+
+			Object.defineProperty(ns.defaults, "popupTransition", {
+				 get: function(){
+					 return ns.getConfig("popupTransition", "none");
+				 },
+				 set: function(value){
+					 return ns.setConfig("popupTransition", value);
+				 }
+			});
+
+			Object.defineProperty(ns.defaults, "popupFullSize", {
+				get: function(){
+					return ns.getConfig("popupFullSize", false);
+				},
+				set: function(value){
+					return ns.setConfig("popupFullSize", value);
+				}
+			});
+
+			Object.defineProperty(ns.defaults, "enablePageScroll", {
+				get: function(){
+					return ns.getConfig("enablePageScroll", false);
+				},
+				set: function(value){
+					return ns.setConfig("enablePageScroll", value);
+				}
+			});
+
+			Object.defineProperty(ns.defaults, "scrollEndEffectArea", {
+				get: function(){
+					return ns.getConfig("scrollEndEffectArea", "content");
+				},
+				set: function(value){
+					return ns.setConfig("scrollEndEffectArea", value);
+				}
+			});
+
+			Object.defineProperty(ns.defaults, "enablePopupScroll", {
+				get: function(){
+					return ns.getConfig("enablePopupScroll", false);
+				},
+				set: function(value){
+					return ns.setConfig("enablePopupScroll", value);
+				}
+			});
+			}(ns));
+
+/*global window, define, XMLHttpRequest, console, Blob */
+/*jslint nomen: true, browser: true, plusplus: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Utilities
+ *
+ * The Tizen Advanced UI (TAU) framework provides utilities for easy-developing
+ * and fully replaceable with jQuery method. When user using these DOM and
+ * selector methods, it provide more light logic and it proves performance
+ * of web app. The following table displays the utilities provided by the
+ * TAU framework.
+ *
+ * @class ns.util
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Krzysztof Antoszek <k.antoszek@samsung.com>
+ */
+(function (window, document, ns) {
+	
+				var currentFrame = null,
+				/**
+				 * requestAnimationFrame function
+				 * @method requestAnimationFrame
+				 * @static
+				 * @member ns.util
+				*/
+				requestAnimationFrame = (window.requestAnimationFrame ||
+					window.webkitRequestAnimationFrame ||
+					window.mozRequestAnimationFrame ||
+					window.oRequestAnimationFrame ||
+					function (callback) {
+						currentFrame = window.setTimeout(callback.bind(callback, +new Date()), 1000 / 60);
+					}).bind(window),
+				util = ns.util || {},
+				slice = [].slice;
+
+			/**
+			 * fetchSync retrieves a text document synchronously, returns null on error
+			 * @param {string} url
+			 * @param {=string} [mime=""] Mime type of the resource
+			 * @return {string|null}
+			 * @static
+			 * @member ns.util
+			 */
+			function fetchSync(url, mime) {
+				var xhr = new XMLHttpRequest(),
+					status;
+				xhr.open("get", url, false);
+				if (mime) {
+					xhr.overrideMimeType(mime);
+				}
+				xhr.send();
+				if (xhr.readyState === 4) {
+					status = xhr.status;
+					if (status === 200 || (status === 0 && xhr.responseText)) {
+						return xhr.responseText;
+					}
+				}
+
+				return null;
+			}
+			util.fetchSync = fetchSync;
+
+			/**
+			 * Removes all script tags with src attribute from document and returns them
+			 * @param {HTMLElement} container
+			 * @return {Array.<HTMLElement>}
+			 * @private
+			 * @static
+			 * @member ns.util
+			 */
+			function removeExternalScripts(container) {
+				var scripts = slice.call(container.querySelectorAll("script[src]")),
+					i = scripts.length,
+					script;
+
+				while (--i >= 0) {
+					script = scripts[i];
+					script.parentNode.removeChild(script);
+				}
+
+				return scripts;
+			}
+
+			/**
+			 * Evaluates code, reason for a function is for an atomic call to evaluate code
+			 * since most browsers fail to optimize functions with try-catch blocks, so this
+			 * minimizes the effect, returns the function to run
+			 * @param {string} code
+			 * @return {Function}
+			 * @static
+			 * @member ns.util
+			 */
+			function safeEvalWrap(code) {
+				return function () {
+					try {
+						window.eval(code);
+					} catch (e) {
+						if (typeof console !== "undefined") {
+							if (e.stack) {
+								console.error(e.stack);
+							} else if (e.name && e.message) {
+								console.error(e.name, e.message);
+							} else {
+								console.error(e);
+							}
+						}
+					}
+				};
+			}
+			util.safeEvalWrap = safeEvalWrap;
+
+			/**
+			 * Calls functions in supplied queue (array)
+			 * @param {Array.<Function>} functionQueue
+			 * @static
+			 * @member ns.util
+			 */
+			function batchCall(functionQueue) {
+				var i,
+					length = functionQueue.length;
+				for (i = 0; i < length; ++i) {
+					functionQueue[i].call(window);
+				}
+			}
+			util.batchCall = batchCall;
+
+			/**
+			 * Creates new script elements for scripts gathered from a differnt document
+			 * instance, blocks asynchronous evaluation (by renaming src attribute) and
+			 * returns an array of functions to run to evalate those scripts
+			 * @param {Array.<HTMLElement>} scripts
+			 * @param {HTMLElement} container
+			 * @return {Array.<Function>}
+			 * @private
+			 * @static
+			 * @member ns.util
+			 */
+			function createScriptsSync(scripts, container) {
+				var scriptElement,
+					scriptBody,
+					i,
+					length,
+					queue = [];
+
+				// proper order of execution
+				for (i = 0, length = scripts.length; i < length; ++i) {
+					scriptBody = fetchSync(scripts[i].src, "text/plain");
+					if (scriptBody) {
+						scriptElement = document.adoptNode(scripts[i]);
+						scriptElement.setAttribute("data-src", scripts[i].src);
+						scriptElement.removeAttribute("src"); // block evaluation
+						queue.push(safeEvalWrap(scriptBody));
+						if (container) {
+							container.appendChild(scriptElement);
+						}
+					}
+				}
+
+				return queue;
+			}
+
+			util.requestAnimationFrame = requestAnimationFrame;
+
+			/**
+			* cancelAnimationFrame function
+			* @method cancelAnimationFrame
+			* @return {Function}
+			* @member ns.util
+			* @static
+			*/
+			util.cancelAnimationFrame = (window.cancelAnimationFrame ||
+					window.webkitCancelAnimationFrame ||
+					window.mozCancelAnimationFrame ||
+					window.oCancelAnimationFrame ||
+					function () {
+						// propably wont work if there is any more than 1
+						// active animationFrame but we are trying anyway
+					window.clearTimeout(currentFrame);
+				}).bind(window);
+
+			/**
+			 * Method make asynchronous call of function
+			 * @method async
+			 * @inheritdoc #requestAnimationFrame
+			 * @member ns.util
+			 * @static
+			 */
+			util.async = requestAnimationFrame;
+
+			/**
+			 * Appends element from different document instance to current document in the
+			 * container element and evaluates scripts (synchronously)
+			 * @param {HTMLElement} element
+			 * @param {HTMLElement} container
+			 * @method importEvaluateAndAppendElement
+			 * @member ns.util
+			 * @static
+			 */
+			util.importEvaluateAndAppendElement = function (element, container) {
+				var externalScriptsQueue = createScriptsSync(removeExternalScripts(element), element),
+					newNode = document.importNode(element, true);
+
+				container.appendChild(newNode); // append and eval inline
+				batchCall(externalScriptsQueue);
+
+				return newNode;
+			};
+
+			/**
+			* Checks if specified string is a number or not
+			* @method isNumber
+			* @return {boolean}
+			* @member ns.util
+			* @static
+			*/
+			util.isNumber = function (query) {
+				var parsed = parseFloat(query);
+				return !isNaN(parsed) && isFinite(parsed);
+			};
+
+			/**
+			 * Reappend script tags to DOM structure to correct run script
+			 * @method runScript
+			 * @param {string} baseUrl
+			 * @param {HTMLScriptElement} script
+			 * @member ns.util
+			 * @deprecated 2.3
+			 */
+			util.runScript = function (baseUrl, script) {
+				var newScript = document.createElement("script"),
+					scriptData = null,
+					i,
+					scriptAttributes = slice.call(script.attributes),
+					src = script.getAttribute("src"),
+					path = util.path,
+					request,
+					attribute,
+					status;
+
+				// 'src' may become null when none src attribute is set
+				if (src !== null) {
+					src = path.makeUrlAbsolute(src, baseUrl);
+				}
+
+				//Copy script tag attributes
+				i = scriptAttributes.length;
+				while (--i >= 0) {
+					attribute = scriptAttributes[i];
+					if (attribute.name !== "src") {
+						newScript.setAttribute(attribute.name, attribute.value);
+					} else {
+						newScript.setAttribute("data-src", attribute.value);
+					}
+				}
+
+				if (src) {
+					scriptData = fetchSync(src, "text/plain");
+									} else {
+					scriptData = script.textContent;
+				}
+
+				if (scriptData) {
+					// add the returned content to a newly created script tag
+					newScript.src = URL.createObjectURL(new Blob([scriptData], {type: "text/javascript"}));
+					newScript.textContent = scriptData; // for compatibility with some libs ex. templating systems
+				}
+				script.parentNode.replaceChild(newScript, script);
+			};
+
+			ns.util = util;
+			}(window, window.document, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Array Utility
+ * Utility helps work with arrays.
+ * @class ns.util.array
+ */
+(function (window, document, ns) {
+	
+				/**
+			 * Create an array containing the range of integers or characters
+			 * from low to high (inclusive)
+			 * @method range
+			 * @param {number|string} low
+			 * @param {number|string} high
+			 * @param {number} step
+			 * @static
+			 * @return {Array} array containing continous elements
+			 * @member ns.util.array
+			 */
+			function range(low, high, step) {
+				// Create an array containing the range of integers or characters
+				// from low to high (inclusive)
+				//
+				// version: 1107.2516
+				// discuss at: http://phpjs.org/functions/range
+				// +   original by: Waldo Malqui Silva
+				// *	example 1: range ( 0, 12 );
+				// *	returns 1: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+				// *	example 2: range( 0, 100, 10 );
+				// *	returns 2: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+				// *	example 3: range( 'a', 'i' );
+				// *	returns 3: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']
+				// *	example 4: range( 'c', 'a' );
+				// *	returns 4: ['c', 'b', 'a']
+				var matrix = [],
+					inival,
+					endval,
+					plus,
+					walker = step || 1,
+					chars = false;
+
+				if (!isNaN(low) && !isNaN(high)) {
+					inival = low;
+					endval = high;
+				} else if (isNaN(low) && isNaN(high)) {
+					chars = true;
+					inival = low.charCodeAt(0);
+					endval = high.charCodeAt(0);
+				} else {
+					inival = (isNaN(low) ? 0 : low);
+					endval = (isNaN(high) ? 0 : high);
+				}
+
+				plus = inival <= endval;
+				if (plus) {
+					while (inival <= endval) {
+						matrix.push((chars ? String.fromCharCode(inival) : inival));
+						inival += walker;
+					}
+				} else {
+					while (inival >= endval) {
+						matrix.push((chars ? String.fromCharCode(inival) : inival));
+						inival -= walker;
+					}
+				}
+
+				return matrix;
+			}
+
+			/**
+			 * Check object is arraylike (arraylike include array and
+			 * collection)
+			 * @method isArrayLike
+			 * @param {Object} object
+			 * @return {boolean} Whether arraylike object or not
+			 * @member ns.util.array
+			 * @static
+			 */
+			function isArrayLike(object) {
+				var type = typeof object,
+					length = object && object.length;
+
+				// if object exists and is different from window
+				// window object has length property
+				if (object && object !== object.window) {
+					// If length value is not number, object is not array and collection.
+					// Collection type is not array but has length value.
+					// e.g) Array.isArray(document.childNodes) ==> false
+					return Array.isArray(object) || object instanceof NodeList || type === "function" &&
+						(length === 0 || typeof length === "number" && length > 0 && (length - 1) in object);
+				}
+				return false;
+			}
+
+			ns.util.array = {
+				range: range,
+				isArrayLike: isArrayLike
+			};
+			}(window, window.document, ns));
+
+/*global window, ns, define, CustomEvent */
+/*jslint nomen: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Events
+ *
+ * The Tizen Advanced UI (TAU) framework provides events optimized for the Tizen
+ * Web application. The following table displays the events provided by the TAU
+ * framework.
+ * @class ns.event
+ */
+(function (window, ns) {
+	
+	
+			/**
+			* Checks if specified variable is a array or not
+			* @method isArray
+			* @return {boolean}
+			* @member ns.event
+			* @private
+			* @static
+			*/
+		var isArray = Array.isArray,
+			isArrayLike = ns.util.array.isArrayLike,
+			/**
+			 * @property {RegExp} SPLIT_BY_SPACES_REGEXP
+			 */
+			SPLIT_BY_SPACES_REGEXP = /\s+/g,
+
+			/**
+			 * Returns trimmed value
+			 * @method trim
+			 * @param {string} value
+			 * @return {string} trimmed string
+			 * @static
+			 * @private
+			 * @member ns.event
+			 */
+			trim = function (value) {
+				return value.trim();
+			},
+
+			/**
+			 * Split string to array
+			 * @method getEventsListeners
+			 * @param {string|Array|Object} names string with one name of event, many names of events divided by spaces, array with names of widgets or object in which keys are names of events and values are callbacks
+			 * @param {Function} globalListener
+			 * @return {Array}
+			 * @static
+			 * @private
+			 * @member ns.event
+			 */
+			getEventsListeners = function (names, globalListener) {
+				var name,
+					result = [],
+					i;
+
+				if (typeof names === 'string') {
+					names = names.split(SPLIT_BY_SPACES_REGEXP).map(trim);
+				}
+
+				if (isArray(names)) {
+					for (i=0; i<names.length; i++) {
+						result.push({type: names[i], callback: globalListener});
+					}
+				} else {
+					for (name in names) {
+						if (names.hasOwnProperty(name)) {
+							result.push({type: name, callback: names[name]});
+						}
+					}
+				}
+				return result;
+			};
+
+			ns.event = {
+
+				/**
+				* Triggers custom event fastOn element
+				* The return value is false, if at least one of the event
+				* handlers which handled this event, called preventDefault.
+				* Otherwise it returns true.
+				* @method trigger
+				* @param {HTMLElement} element
+				* @param {string} type
+				* @param {?*} [data=null]
+				* @param {boolean=} [bubbles=true]
+				* @param {boolean=} [cancelable=true]
+				* @return {boolean=}
+				* @member ns.event
+				* @static
+				*/
+				trigger: function (element, type, data, bubbles, cancelable) {
+					var evt = new CustomEvent(type, {
+							"detail": data,
+							//allow event to bubble up, required if we want to allow to listen fastOn document etc
+							bubbles: typeof bubbles === "boolean" ? bubbles : true,
+							cancelable: typeof cancelable === "boolean" ? cancelable : true
+						});
+										return element.dispatchEvent(evt);
+				},
+
+				/**
+				 * Prevent default on original event
+				 * @method preventDefault
+				 * @param {CustomEvent} event
+				 * @member ns.event
+				 * @static
+				 */
+				preventDefault: function (event) {
+					var originalEvent = event._originalEvent;
+					// @todo this.isPropagationStopped = returnTrue;
+					if (originalEvent && originalEvent.preventDefault) {
+						originalEvent.preventDefault();
+					}
+					event.preventDefault();
+				},
+
+				/**
+				* Stop event propagation
+				* @method stopPropagation
+				* @param {CustomEvent} event
+				* @member ns.event
+				* @static
+				*/
+				stopPropagation: function (event) {
+					var originalEvent = event._originalEvent;
+					// @todo this.isPropagationStopped = returnTrue;
+					if (originalEvent && originalEvent.stopPropagation) {
+						originalEvent.stopPropagation();
+					}
+					event.stopPropagation();
+				},
+
+				/**
+				* Stop event propagation immediately
+				* @method stopImmediatePropagation
+				* @param {CustomEvent} event
+				* @member ns.event
+				* @static
+				*/
+				stopImmediatePropagation: function (event) {
+					var originalEvent = event._originalEvent;
+					// @todo this.isPropagationStopped = returnTrue;
+					if (originalEvent && originalEvent.stopImmediatePropagation) {
+						originalEvent.stopImmediatePropagation();
+					}
+					event.stopImmediatePropagation();
+				},
+
+				/**
+				 * Return document relative cords for event
+				 * @method documentRelativeCoordsFromEvent
+				 * @param {Event} event
+				 * @return {Object}
+				 * @return {number} return.x
+				 * @return {number} return.y
+				 * @member ns.event
+				 * @static
+				 */
+				documentRelativeCoordsFromEvent: function(event) {
+					var _event = event ? event : window.event,
+							client = {
+								x: _event.clientX,
+								y: _event.clientY
+							},
+							page = {
+								x: _event.pageX,
+								y: _event.pageY
+							},
+							posX = 0,
+							posY = 0,
+							touch0,
+							body = document.body,
+							documentElement = document.documentElement;
+
+						if (event.type.match(/^touch/)) {
+							touch0 = _event.targetTouches[0] || _event.originalEvent.targetTouches[0];
+							page = {
+								x: touch0.pageX,
+								y: touch0.pageY
+							};
+							client = {
+								x: touch0.clientX,
+								y: touch0.clientY
+							};
+						}
+
+						if (page.x || page.y) {
+							posX = page.x;
+							posY = page.y;
+						}
+						else if (client.x || client.y) {
+							posX = client.x + body.scrollLeft + documentElement.scrollLeft;
+							posY = client.y + body.scrollTop  + documentElement.scrollTop;
+						}
+
+						return { x: posX, y: posY };
+				},
+
+				/**
+				 * Return target relative cords for event
+				 * @method targetRelativeCoordsFromEvent
+				 * @param {Event} event
+				 * @return {Object}
+				 * @return {number} return.x
+				 * @return {number} return.y
+				 * @member ns.event
+				 * @static
+				 */
+				targetRelativeCoordsFromEvent: function(event) {
+					var target = event.target,
+						cords = {
+							x: event.offsetX,
+							y: event.offsetY
+						};
+
+					if (cords.x === undefined || isNaN(cords.x) ||
+						cords.y === undefined || isNaN(cords.y)) {
+						cords = ns.event.documentRelativeCoordsFromEvent(event);
+						cords.x -= target.offsetLeft;
+						cords.y -= target.offsetTop;
+					}
+
+					return cords;
+				},
+
+				/**
+				 * Add event listener to element
+				 * @method fastOn
+				 * @param {HTMLElement} element
+				 * @param {string} type
+				 * @param {Function} listener
+				 * @param {boolean} [useCapture=false]
+				 * @member ns.event
+				 * @static
+				 */
+				fastOn: function(element, type, listener, useCapture) {
+					element.addEventListener(type, listener, useCapture || false);
+				},
+
+				/**
+				 * Remove event listener to element
+				 * @method fastOff
+				 * @param {HTMLElement} element
+				 * @param {string} type
+				 * @param {Function} listener
+				 * @param {boolean} [useCapture=false]
+				 * @member ns.event
+				 * @static
+				 */
+				fastOff: function(element, type, listener, useCapture) {
+					element.removeEventListener(type, listener, useCapture || false);
+				},
+
+				/**
+				 * Add event listener to element that can be added addEventListner
+				 * @method on
+				 * @param {HTMLElement|HTMLDocument|Window} element
+				 * @param {string|Array|Object} type
+				 * @param {Function} listener
+				 * @param {boolean} [useCapture=false]
+				 * @member ns.event
+				 * @static
+				 */
+				on: function(element, type, listener, useCapture) {
+					var i,
+						j,
+						elementsLength,
+						typesLength,
+						elements,
+						listeners;
+
+					if (isArrayLike(element)) {
+						elements = element;
+					} else {
+						elements = [element];
+					}
+					elementsLength = elements.length;
+					listeners = getEventsListeners(type, listener);
+					typesLength = listeners.length;
+					for (i = 0; i < elementsLength; i++) {
+						if (typeof elements[i].addEventListener === "function") {
+							for (j = 0; j < typesLength; j++) {
+								ns.event.fastOn(elements[i], listeners[j].type, listeners[j].callback, useCapture);
+							}
+						}
+					}
+				},
+
+				/**
+				 * Remove event listener to element
+				 * @method off
+				 * @param {HTMLElement|HTMLDocument|Window} element
+				 * @param {string|Array|Object} type
+				 * @param {Function} listener
+				 * @param {boolean} [useCapture=false]
+				 * @member ns.event
+				 * @static
+				 */
+				off: function(element, type, listener, useCapture) {
+					var i,
+						j,
+						elementsLength,
+						typesLength,
+						elements,
+						listeners;
+					if (isArrayLike(element)) {
+						elements = element;
+					} else {
+						elements = [element];
+					}
+					elementsLength = elements.length;
+					listeners = getEventsListeners(type, listener);
+					typesLength = listeners.length;
+					for (i = 0; i < elementsLength; i++) {
+						if (typeof elements[i].addEventListener === "function") {
+							for (j = 0; j < typesLength; j++) {
+								ns.event.fastOff(elements[i], listeners[j].type, listeners[j].callback, useCapture);
+							}
+						}
+					}
+				},
+
+				/**
+				 * Add event listener to element only for one trigger
+				 * @method one
+				 * @param {HTMLElement|HTMLDocument|window} element
+				 * @param {string|Array|Object} type
+				 * @param {Function} listener
+				 * @param {boolean} [useCapture=false]
+				 * @member ns.event
+				 * @static
+				 */
+				one: function(element, type, listener, useCapture) {
+					var arraySlice = [].slice,
+						i,
+						j,
+						elementsLength,
+						typesLength,
+						elements,
+						types,
+						listeners,
+						callbacks = [];
+					if (isArrayLike(element)) {
+						elements = arraySlice.call(element);
+					} else {
+						elements = [element];
+					}
+					elementsLength = elements.length;
+					listeners = getEventsListeners(type, listener);
+					typesLength = listeners.length;
+					for (i = 0; i < elementsLength; i++) {
+						if (typeof elements[i].addEventListener === "function") {
+							callbacks[i] = [];
+							for (j = 0; j < typesLength; j++) {
+								callbacks[i][j] = (function(i, j) {
+									var args = arraySlice.call(arguments);
+									ns.event.fastOff(elements[i], listeners[j].type, callbacks[i][j], useCapture);
+									args.shift(); // remove the first argument of binding function
+									args.shift(); // remove the second argument of binding function
+									listeners[j].callback.apply(this, args);
+								}).bind(null, i, j);
+								ns.event.fastOn(elements[i], listeners[j].type, callbacks[i][j], useCapture);
+							}
+						}
+					}
+				}
+
+			};
+
+			}(window, ns));
+
+/*global define: true, window: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Selectors Utility
+ * Object contains functions to get HTML elements by different selectors.
+ * @class ns.util.selectors
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Krzysztof Antoszek <k.antoszek@samsung.com>
+ * @author Jadwiga Sosnowska <j.sosnowska@partner.samsung.com>
+ * @author Damian Osipiuk <d.osipiuk@samsung.com>
+ */
+(function (document, ns) {
+	
+				/**
+			 * @method slice Alias for array slice method
+			 * @member ns.util.selectors
+			 * @private
+			 * @static
+			 */
+			var slice = [].slice,
+				/**
+				 * @method matchesSelectorType
+				 * @return {string|boolean}
+				 * @member ns.util.selectors
+				 * @private
+				 * @static
+				 */
+				matchesSelectorType = (function () {
+					var el = document.createElement("div");
+
+					if (typeof el.webkitMatchesSelector === "function") {
+						return "webkitMatchesSelector";
+					}
+
+					if (typeof el.mozMatchesSelector === "function") {
+						return "mozMatchesSelector";
+					}
+
+					if (typeof el.msMatchesSelector === "function") {
+						return "msMatchesSelector";
+					}
+
+					if (typeof el.matchesSelector === "function") {
+						return "matchesSelector";
+					}
+
+					return false;
+				}());
+
+			/**
+			 * Prefix selector with 'data-' and namespace if present
+			 * @method getDataSelector
+			 * @param {string} selector
+			 * @return {string}
+			 * @member ns.util.selectors
+			 * @private
+			 * @static
+			 */
+			function getDataSelector(selector) {
+				var namespace = ns.getConfig('namespace');
+				return '[data-' + (namespace ? namespace + '-' : '') + selector + ']';
+			}
+
+			/**
+			 * Runs matches implementation of matchesSelector
+			 * method on specified element
+			 * @method matchesSelector
+			 * @param {HTMLElement} element
+			 * @param {string} selector
+			 * @return {boolean}
+			 * @static
+			 * @member ns.util.selectors
+			 */
+			function matchesSelector(element, selector) {
+				if (matchesSelectorType && element[matchesSelectorType]) {
+					return element[matchesSelectorType](selector);
+				}
+				return false;
+			}
+
+			/**
+			 * Return array with all parents of element.
+			 * @method parents
+			 * @param {HTMLElement} element
+			 * @return {Array}
+			 * @member ns.util.selectors
+			 * @private
+			 * @static
+			 */
+			function parents(element) {
+				var items = [],
+					current = element.parentNode;
+				while (current && current !== document) {
+					items.push(current);
+					current = current.parentNode;
+				}
+				return items;
+			}
+
+			/**
+			 * Checks if given element and its ancestors matches given function
+			 * @method closest
+			 * @param {HTMLElement} element
+			 * @param {Function} testFunction
+			 * @return {?HTMLElement}
+			 * @member ns.util.selectors
+			 * @static
+			 * @private
+			 */
+			function closest(element, testFunction) {
+				var current = element;
+				while (current && current !== document) {
+					if (testFunction(current)) {
+						return current;
+					}
+					current = current.parentNode;
+				}
+				return null;
+			}
+
+			/**
+			 * @method testSelector
+			 * @param {string} selector
+			 * @param {HTMLElement} node
+			 * @return {boolean}
+			 * @member ns.util.selectors
+			 * @static
+			 * @private
+			 */
+			function testSelector(selector, node) {
+				return matchesSelector(node, selector);
+			}
+
+			/**
+			 * @method testClass
+			 * @param {string} className
+			 * @param {HTMLElement} node
+			 * @return {boolean}
+			 * @member ns.util.selectors
+			 * @static
+			 * @private
+			 */
+			function testClass(className, node) {
+				return node && node.classList && node.classList.contains(className);
+			}
+
+			/**
+			 * @method testTag
+			 * @param {string} tagName
+			 * @param {HTMLElement} node
+			 * @return {boolean}
+			 * @member ns.util.selectors
+			 * @static
+			 * @private
+			 */
+			function testTag(tagName, node) {
+				return node.tagName.toLowerCase() === tagName;
+			}
+
+			/**
+			 * @class ns.util.selectors
+			 */
+			ns.util.selectors = {
+				matchesSelector: matchesSelector,
+
+				/**
+				* Return array with children pass by given selector.
+				* @method getChildrenBySelector
+				* @param {HTMLElement} context
+				* @param {string} selector
+				* @return {Array}
+				* @static
+				* @member ns.util.selectors
+				*/
+				getChildrenBySelector: function (context, selector) {
+					return slice.call(context.children).filter(testSelector.bind(null, selector));
+				},
+
+				/**
+				* Return array with children pass by given data-namespace-selector.
+				* @method getChildrenByDataNS
+				* @param {HTMLElement} context
+				* @param {string} dataSelector
+				* @return {Array}
+				* @static
+				* @member ns.util.selectors
+				*/
+				getChildrenByDataNS: function (context, dataSelector) {
+					return slice.call(context.children).filter(testSelector.bind(null, getDataSelector(dataSelector)));
+				},
+
+				/**
+				* Return array with children with given class name.
+				* @method getChildrenByClass
+				* @param {HTMLElement} context
+				* @param {string} className
+				* @return {Array}
+				* @static
+				* @member ns.util.selectors
+				*/
+				getChildrenByClass: function (context, className) {
+					return slice.call(context.children).filter(testClass.bind(null, className));
+				},
+
+				/**
+				* Return array with children with given tag name.
+				* @method getChildrenByTag
+				* @param {HTMLElement} context
+				* @param {string} tagName
+				* @return {Array}
+				* @static
+				* @member ns.util.selectors
+				*/
+				getChildrenByTag: function (context, tagName) {
+					return slice.call(context.children).filter(testTag.bind(null, tagName));
+				},
+
+				/**
+				* Return array with all parents of element.
+				* @method getParents
+				* @param {HTMLElement} context
+				* @param {string} selector
+				* @return {Array}
+				* @static
+				* @member ns.util.selectors
+				*/
+				getParents: parents,
+
+				/**
+				* Return array with all parents of element pass by given selector.
+				* @method getParentsBySelector
+				* @param {HTMLElement} context
+				* @param {string} selector
+				* @return {Array}
+				* @static
+				* @member ns.util.selectors
+				*/
+				getParentsBySelector: function (context, selector) {
+					return parents(context).filter(testSelector.bind(null, selector));
+				},
+
+				/**
+				* Return array with all parents of element pass by given selector with namespace.
+				* @method getParentsBySelectorNS
+				* @param {HTMLElement} context
+				* @param {string} selector
+				* @return {Array}
+				* @static
+				* @member ns.util.selectors
+				*/
+				getParentsBySelectorNS: function (context, selector) {
+					return parents(context).filter(testSelector.bind(null, getDataSelector(selector)));
+				},
+
+				/**
+				* Return array with all parents of element with given class name.
+				* @method getParentsByClass
+				* @param {HTMLElement} context
+				* @param {string} className
+				* @return {Array}
+				* @static
+				* @member ns.util.selectors
+				*/
+				getParentsByClass: function (context, className) {
+					return parents(context).filter(testClass.bind(null, className));
+				},
+
+				/**
+				* Return array with all parents of element with given tag name.
+				* @method getParentsByTag
+				* @param {HTMLElement} context
+				* @param {string} tagName
+				* @return {Array}
+				* @static
+				* @member ns.util.selectors
+				*/
+				getParentsByTag: function (context, tagName) {
+					return parents(context).filter(testTag.bind(null, tagName));
+				},
+
+				/**
+				* Return first element from parents of element pass by selector.
+				* @method getClosestBySelector
+				* @param {HTMLElement} context
+				* @param {string} selector
+				* @return {HTMLElement}
+				* @static
+				* @member ns.util.selectors
+				*/
+				getClosestBySelector: function (context, selector) {
+					return closest(context, testSelector.bind(null, selector));
+				},
+
+				/**
+				* Return first element from parents of element pass by selector with namespace.
+				* @method getClosestBySelectorNS
+				* @param {HTMLElement} context
+				* @param {string} selector
+				* @return {HTMLElement}
+				* @static
+				* @member ns.util.selectors
+				*/
+				getClosestBySelectorNS: function (context, selector) {
+					return closest(context, testSelector.bind(null, getDataSelector(selector)));
+				},
+
+				/**
+				* Return first element from parents of element with given class name.
+				* @method getClosestByClass
+				* @param {HTMLElement} context
+				* @param {string} selector
+				* @return {HTMLElement}
+				* @static
+				* @member ns.util.selectors
+				*/
+				getClosestByClass: function (context, selector) {
+					return closest(context, testClass.bind(null, selector));
+				},
+
+				/**
+				* Return first element from parents of element with given tag name.
+				* @method getClosestByTag
+				* @param {HTMLElement} context
+				* @param {string} selector
+				* @return {HTMLElement}
+				* @static
+				* @member ns.util.selectors
+				*/
+				getClosestByTag: function (context, selector) {
+					return closest(context, testTag.bind(null, selector));
+				},
+
+				/**
+				* Return array of elements from context with given data-selector
+				* @method getAllByDataNS
+				* @param {HTMLElement} context
+				* @param {string} dataSelector
+				* @return {Array}
+				* @static
+				* @member ns.util.selectors
+				*/
+				getAllByDataNS: function (context, dataSelector) {
+					return slice.call(context.querySelectorAll(getDataSelector(dataSelector)));
+				},
+
+				/**
+				 * Get scrollable parent elmenent
+				 * @method getScrollableParent
+				 * @param {HTMLElement} element
+				 * @return {HTMLElement}
+				 * @static
+				 * @member ns.util.selectors
+				 */
+				getScrollableParent:  function (element) {
+					var overflow,
+						style;
+
+					while (element && element != document.body) {
+						style = window.getComputedStyle(element);
+
+						if (style) {
+							overflow = style.getPropertyValue("overflow-y");
+							if (overflow === "scroll" || (overflow === "auto" && element.scrollHeight > element.clientHeight)) {
+								return element;
+							}
+						}
+						element = element.parentNode;
+					}
+					return null;
+				}
+			};
+			}(window.document, ns));
+
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Object Utility
+ * Object contains functions help work with objects.
+ * @class ns.util.object
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Piotr Karny <p.karny@samsung.com>
+ */
+(function (ns) {
+	
+	
+			var object = {
+				/**
+				* Copy object to new object
+				* @method copy
+				* @param {Object} orgObject
+				* @return {Object}
+				* @static
+				* @member ns.util.object
+				*/
+				copy: function (orgObject) {
+					return object.merge({}, orgObject);
+				},
+
+				/**
+				* Attach fields from second object to first object.
+				* @method fastMerge
+				* @param {Object} newObject
+				* @param {Object} orgObject
+				* @return {Object}
+				* @static
+				* @member ns.util.object
+				*/
+				fastMerge: function (newObject, orgObject) {
+					var key;
+					for (key in orgObject) {
+						if (orgObject.hasOwnProperty(key)) {
+							newObject[key] = orgObject[key];
+						}
+					}
+					return newObject;
+				},
+
+				/**
+				* Attach fields from second and next object to first object.
+				* @method merge
+				* @param {Object} newObject
+				* @param {...Object} orgObject
+				* @param {?boolean} [override=true]
+				* @return {Object}
+				* @static
+				* @member ns.util.object
+				*/
+				merge: function ( /* newObject, orgObject, override */ ) {
+					var newObject, orgObject, override,
+						key,
+						args = [].slice.call(arguments),
+						argsLength = args.length,
+						i;
+					newObject = args.shift();
+					override = true;
+					if (typeof arguments[argsLength-1] === "boolean") {
+						override = arguments[argsLength-1];
+						argsLength--;
+					}
+					for (i = 0; i < argsLength; i++) {
+						orgObject = args.shift();
+						if (orgObject !== null) {
+							for (key in orgObject) {
+								if (orgObject.hasOwnProperty(key) && ( override || newObject[key] === undefined )) {
+									newObject[key] = orgObject[key];
+								}
+							}
+						}
+					}
+					return newObject;
+				},
+
+				/**
+				 * Function add to Constructor prototype Base object and add to prototype properties and methods from
+				 * prototype object.
+				 * @method inherit
+				 * @param {Function} Constructor
+				 * @param {Function} Base
+				 * @param {Object} prototype
+				 * @static
+				 * @member ns.util.object
+				 */
+				/* jshint -W083 */
+				inherit: function( Constructor, Base, prototype ) {
+					var basePrototype = new Base(),
+						property,
+						value;
+					for (property in prototype) {
+						if (prototype.hasOwnProperty(property)) {
+							value = prototype[property];
+							if ( typeof value === "function" ) {
+								basePrototype[property] = (function createFunctionWithSuper(Base, property, value) {
+									var _super = function() {
+										var superFunction = Base.prototype[property];
+										if (superFunction) {
+											return superFunction.apply(this, arguments);
+										}
+										return null;
+									};
+									return function() {
+										var __super = this._super,
+											returnValue;
+
+										this._super = _super;
+										returnValue = value.apply(this, arguments);
+										this._super = __super;
+										return returnValue;
+									};
+								}(Base, property, value));
+							} else {
+								basePrototype[property] = value;
+							}
+						}
+					}
+
+					Constructor.prototype = basePrototype;
+					Constructor.prototype.constructor = Constructor;
+				},
+
+				/**
+				 * Returns true if every property value corresponds value from 'value' argument
+				 * @method hasPropertiesOfValue
+				 * @param {Object} obj
+				 * @param {*} [value=undefined]
+				 * @return {boolean}
+				 */
+				hasPropertiesOfValue: function (obj, value) {
+					var keys = Object.keys(obj),
+						i = keys.length;
+
+					// Empty array should return false
+					if (i === 0) {
+						return false;
+					}
+
+					while (--i >= 0) {
+						if (obj[keys[i]] !== value) {
+							return false;
+						}
+					}
+
+					return true;
+				}
+			};
+			ns.util.object = object;
+			}(ns));
+
+/*global window, define, ns, Node, HTMLElement */
+/*jslint nomen: true, plusplus: true, bitwise: false */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Engine
+ * Main class with engine of library which control communication
+ * between parts of framework.
+ * @class ns.engine
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Krzysztof Antoszek <k.antoszek@samsung.com>
+ * @author Michal Szepielak <m.szepielak@samsung.com>
+ * @author Jadwiga Sosnowska <j.sosnowska@partner.samsung.com>
+ * @author Maciej Moczulski <m.moczulski@samsung.com>
+ * @author Piotr Karny <p.karny@samsung.com>
+ * @author Tomasz Lukawski <t.lukawski@samsung.com>
+ * @author Przemyslaw Ciezkowski <p.ciezkowski@samsung.com>
+ */
+(function (window, document, ns) {
+	
+				/**
+			 * @method slice Array.slice
+			 * @private
+			 * @static
+			 * @member ns.engine
+			 */
+			var slice = [].slice,
+				/**
+				 * @property {Object} eventUtils {@link ns.event}
+				 * @private
+				 * @static
+				 * @member ns.engine
+				 */
+				eventUtils = ns.event,
+				objectUtils = ns.util.object,
+				selectors = ns.util.selectors,
+				/**
+				 * @property {Object} widgetDefs Object with widgets definitions
+				 * @private
+				 * @static
+				 * @member ns.engine
+				 */
+				widgetDefs = {},
+				/**
+				 * @property {Object} widgetBindingMap Object with widgets bindings
+				 * @private
+				 * @static
+				 * @member ns.engine
+				 */
+				widgetBindingMap = {},
+				location = window.location,
+				/**
+				 * engine mode, if true then engine only builds widgets
+				 * @property {boolean} justBuild
+				 * @private
+				 * @static
+				 * @member ns.engine
+				 */
+				justBuild = location.hash === "#build",
+				/**
+				 * @property {string} [TYPE_STRING="string"] local cache of string type name
+				 * @private
+				 * @static
+				 * @readonly
+				 * @member ns.engine
+				 */
+				TYPE_STRING = "string",
+				/**
+				 * @property {string} [TYPE_FUNCTION="function"] local cache of function type name
+				 * @private
+				 * @static
+				 * @readonly
+				 * @member ns.engine
+				 */
+				TYPE_FUNCTION = "function",
+				/**
+				 * @property {string} [DATA_BUILT="data-tau-built"] attribute informs that widget id build
+				 * @private
+				 * @static
+				 * @readonly
+				 * @member ns.engine
+				 */
+				DATA_BUILT = "data-tau-built",
+				/**
+				 * @property {string} [DATA_NAME="data-tau-name"] attribute contains widget name
+				 * @private
+				 * @static
+				 * @readonly
+				 * @member ns.engine
+				 */
+				DATA_NAME = "data-tau-name",
+				/**
+				 * @property {string} [DATA_BOUND="data-tau-bound"] attribute informs that widget id bound
+				 * @private
+				 * @static
+				 * @readonly
+				 * @member ns.engine
+				 */
+				DATA_BOUND = "data-tau-bound",
+				/**
+				 * @property {string} NAMES_SEPARATOR
+				 * @private
+				 * @static
+				 * @readonly
+				 */
+				NAMES_SEPARATOR = ",",
+				/**
+				 * @property {string} [querySelectorWidgets="*[data-tau-built][data-tau-name]:not([data-tau-bound])"] query selector for all widgets which are built but not bound
+				 * @private
+				 * @static
+				 * @member ns.engine
+				 */
+					// @TODO this selector is not valid ...
+				querySelectorWidgets = "*[" + DATA_BUILT + "][" + DATA_NAME + "]:not([" + DATA_BOUND + "])",
+				/**
+				 * @method excludeBuildAndBound
+				 * @private
+				 * @static
+				 * @member ns.engine
+				 * @return {string} :not([data-tau-built*='widgetName']):not([data-tau-bound*='widgetName'])
+				 */
+				excludeBuiltAndBound = function (widgetType) {
+					return ":not([" + DATA_BUILT + "*='" + widgetType +"']):not([" + DATA_BOUND + "*='" + widgetType +"'])";
+				},
+
+				/**
+				 * Engine event types
+				 * @property {Object} eventType
+				 * @property {string} eventType.INIT="tauinit" INIT of framework init event
+				 * @property {string} eventType.WIDGET_BOUND="widgetbound" WIDGET_BOUND of widget bound event
+				 * @property {string} eventType.WIDGET_DEFINED="widgetdefined" WIDGET_DEFINED of widget built event
+				 * @property {string} eventType.WIDGET_BUILT="widgetbuilt" WIDGET_BUILT of widget built event
+				 * @property {string} eventType.BOUND="bound" BOUND of bound event
+				 * @static
+				 * @readonly
+				 * @member ns.engine
+				 */
+				eventType = {
+					INIT: "tauinit",
+					WIDGET_BOUND: "widgetbound",
+					WIDGET_DEFINED: "widgetdefined",
+					WIDGET_BUILT: "widgetbuilt",
+					BOUND: "bound"
+				},
+				engine,
+				/**
+				 * @property {Object} router Router object
+				 * @private
+				 * @static
+				 * @member ns.engine
+				 */
+				router;
+
+			/**
+			 * This function prepares selector for widget' definition
+			 * @method selectorChange
+			 * @param {string} selectorName
+			 * @return {string} new selector
+			 * @member ns.engine
+			 * @static
+			 */
+			function selectorChange (selectorName) {
+				if (selectorName.match(/\[data-role=/) && !selectorName.match(/:not\(\[data-role=/)) {
+					return selectorName.trim();
+				}
+				return selectorName.trim() + ":not([data-role='none'])";
+			}
+
+			/**
+			 * Function to define widget
+			 * @method defineWidget
+			 * @param {string} name
+			 * @param {string} selector
+			 * @param {Array} methods
+			 * @param {Object} widgetClass
+			 * @param {string} [namespace]
+			 * @param {boolean} [redefine]
+			 * @param {boolean} [widgetNameToLowercase = true]
+			 * @return {boolean}
+			 * @member ns.engine
+			 * @static
+			 */
+			function defineWidget(name, selector, methods, widgetClass, namespace, redefine, widgetNameToLowercase) {
+				var definition;
+				// Widget name is absolutely required
+				if (name) {
+					if (!widgetDefs[name] || redefine) {
+												methods = methods || [];
+						methods.push("destroy", "disable", "enable", "option", "refresh", "value");
+						definition = {
+							name: name,
+							methods: methods,
+							selector: selector || "",
+							selectors: selector ? selector.split(",").map(selectorChange) : [],
+							widgetClass: widgetClass || null,
+							namespace: namespace || "",
+							widgetNameToLowercase: widgetNameToLowercase === undefined ? true : !!widgetNameToLowercase
+						};
+
+						widgetDefs[name] = definition;
+						eventUtils.trigger(document, "widgetdefined", definition, false);
+						return true;
+					}
+									} else {
+					ns.error("Widget with selector [" + selector + "] defined without a name, aborting!");
+				}
+				return false;
+			}
+
+			/**
+			 * Get binding for element
+			 * @method getBinding
+			 * @static
+			 * @param {HTMLElement|string} element
+			 * @param {string} type widget name
+			 * @return {?Object}
+			 * @member ns.engine
+			 */
+			function getBinding(element, type) {
+				var id = !element || typeof element === TYPE_STRING ? element : element.id,
+					binding,
+					widgetInstance,
+					bindingElement,
+					storedWidgetNames;
+
+				if (typeof element === TYPE_STRING) {
+					element = document.getElementById(id);
+				}
+
+				// Fetch group of widget defined for this element
+				binding = widgetBindingMap[id];
+
+				if (binding && typeof binding === "object") {
+					// If name is defined it's possible to fetch it instantly
+					if (type) {
+						widgetInstance = binding.instances[type];
+					} else {
+						storedWidgetNames = Object.keys(binding.instances);
+						widgetInstance = binding.instances[storedWidgetNames[0]];
+					}
+
+					// Return only it instance of the proper widget exists
+					if (widgetInstance) {
+						
+						// Check if widget instance has that same object referenced
+						if (widgetInstance.element === element) {
+							return widgetInstance;
+						}
+					}
+				}
+
+				return null;
+			}
+
+			/**
+			 * Set binding of widget
+			 * @method setBinding
+			 * @param {ns.widget.BaseWidget} widgetInstance
+			 * @static
+			 * @member ns.engine
+			 */
+			function setBinding(widgetInstance) {
+				var id = widgetInstance.element.id,
+					type = widgetInstance.name,
+					widgetBinding = widgetBindingMap[id];
+
+				
+				// If the HTMLElement never had a widget declared create an empty object
+				if(!widgetBinding) {
+					widgetBinding = {
+						elementId: id,
+						element: widgetInstance.element,
+						instances: {}
+					};
+				}
+
+				widgetBinding.instances[type] = widgetInstance;
+				widgetBindingMap[id] = widgetBinding;
+			}
+
+			/**
+			 * Returns all bindings for element or id gives as parameter
+			 * @method getAllBindings
+			 * @param {HTMLElement|string} element
+			 * @return {?Object}
+			 * @static
+			 * @member ns.engine
+			 */
+			function getAllBindings(element) {
+				var id = !element || typeof element === TYPE_STRING ? element : element.id;
+
+				return (widgetBindingMap[id] && widgetBindingMap[id].instances) || null;
+			}
+
+			/**
+			 * Removes given name from attributeValue string.
+			 * Names should be separated with a NAMES_SEPARATOR
+			 * @param {string} name
+			 * @param {string} attributeValue
+			 * @private
+			 * @static
+			 * @return {string}
+			 */
+			function _removeWidgetNameFromAttribute(name, attributeValue) {
+				var widgetNames,
+					searchResultIndex;
+
+				// Split attribute value by separator
+				widgetNames = attributeValue.split(NAMES_SEPARATOR);
+				searchResultIndex = widgetNames.indexOf(name);
+
+				if (searchResultIndex > -1) {
+					widgetNames.splice(searchResultIndex, 1);
+					attributeValue = widgetNames.join(NAMES_SEPARATOR);
+				}
+
+				return attributeValue;
+			}
+
+			function _removeAllBindingAttributes(element) {
+				element.removeAttribute(DATA_BUILT);
+				element.removeAttribute(DATA_BOUND);
+				element.removeAttribute(DATA_NAME);
+			}
+			/**
+			 * Remove binding data attributes for element.
+			 * @method _removeBindingAttributes
+			 * @param {HTMLElement} element
+			 * @param {string} type widget type (name)
+			 * @private
+			 * @static
+			 * @member ns.engine
+			 */
+			function _removeWidgetFromAttributes(element, type) {
+				var dataBuilt,
+					dataBound,
+					dataName;
+
+				// Most often case is that name is not defined
+				if (!type) {
+					_removeAllBindingAttributes(element);
+				} else {
+					dataBuilt = _removeWidgetNameFromAttribute(type, element.getAttribute(DATA_BUILT) || "");
+					dataBound = _removeWidgetNameFromAttribute(type, element.getAttribute(DATA_BOUND) || "");
+					dataName = _removeWidgetNameFromAttribute(type, element.getAttribute(DATA_NAME) || "");
+
+					// Check if all attributes have at least one widget
+					if (dataBuilt && dataBound && dataName) {
+						element.setAttribute(DATA_BUILT, dataBuilt);
+						element.setAttribute(DATA_BOUND, dataBound);
+						element.setAttribute(DATA_NAME, dataName);
+					} else {
+						// If something is missing remove everything
+						_removeAllBindingAttributes(element);
+					}
+				}
+			}
+
+			/**
+			 * Method removes binding for single widget.
+			 * @method _removeSingleBinding
+			 * @param {Object} bindingGroup
+			 * @param {string} type
+			 * @return {boolean}
+			 * @private
+			 * @static
+			 */
+			function _removeSingleBinding(bindingGroup, type) {
+				var widgetInstance = bindingGroup[type];
+
+				if (widgetInstance){
+					if (widgetInstance.element && typeof widgetInstance.element.setAttribute === TYPE_FUNCTION) {
+						_removeWidgetFromAttributes(widgetInstance.element, type);
+					}
+
+					bindingGroup[type] = null;
+
+					return true;
+				}
+
+				return false;
+			}
+
+			/**
+			 * Remove binding for widget based on element.
+			 * @method removeBinding
+			 * @param {HTMLElement|string} element
+			 * @param {string} type widget name
+			 * @return {boolean}
+			 * @static
+			 * @member ns.engine
+			 */
+			function removeBinding(element, type) {
+				var id = (typeof element === TYPE_STRING) ? element : element.id,
+					binding = widgetBindingMap[id],
+					bindingGroup,
+					widgetName,
+					partialSuccess,
+					fullSuccess = false;
+
+				// [NOTICE] Due to backward compatibility calling removeBinding
+				// with one parameter should remove all bindings
+
+				if (binding) {
+					if (typeof element === TYPE_STRING) {
+						// Search based on current document may return bad results,
+						// use previously defined element if it exists
+						element = binding.element;
+					}
+
+					if (element) {
+						_removeWidgetFromAttributes(element, type);
+					}
+
+					bindingGroup = widgetBindingMap[id] && widgetBindingMap[id].instances;
+
+					if (bindingGroup) {
+						if (!type) {
+							fullSuccess = true;
+
+							// Iterate over group of created widgets
+							for (widgetName in bindingGroup) {
+								if (bindingGroup.hasOwnProperty(widgetName)) {
+									partialSuccess = _removeSingleBinding(bindingGroup, widgetName);
+									
+									// As we iterate over keys we are sure we want to remove this element
+									// NOTE: Removing property by delete is slower than assigning null value
+									bindingGroup[widgetName] = null;
+
+									fullSuccess = (fullSuccess && partialSuccess);
+								}
+							}
+
+							// If the object bindingGroup is empty or every key has a null value
+							if (objectUtils.hasPropertiesOfValue(bindingGroup, null)) {
+								// NOTE: Removing property by delete is slower than assigning null value
+								widgetBindingMap[id] = null;
+							}
+
+							return fullSuccess;
+						}
+
+						partialSuccess = _removeSingleBinding(bindingGroup, type);
+
+						if (objectUtils.hasPropertiesOfValue(bindingGroup, null)) {
+							widgetBindingMap[id] = null;
+						}
+
+						return partialSuccess;
+					}
+				}
+
+				return false;
+			}
+
+			/**
+			 * Removes all bindings of widgets.
+			 * @method removeAllBindings
+			 * @param {HTMLElement|string} element
+			 * @return {boolean}
+			 * @static
+			 * @member ns.engine
+			 */
+			function removeAllBindings(element) {
+				// @TODO this should be coded in the other way around, removeAll should loop through all bindings and inside call removeBinding
+				// but due to backward compatibility that code should be more readable
+				return removeBinding(element);
+			}
+
+			/**
+			 * Load widget
+			 * @method processWidget
+			 * @param {HTMLElement} element base element of widget
+			 * @param {Object} definition definition of widget
+			 * @param {ns.widget.BaseWidget} definition.widgetClass
+			 * @param {string} definition.name
+			 * @param {Object} [options] options for widget
+			 * @private
+			 * @static
+			 * @member ns.engine
+			 */
+			function processWidget(element, definition, options) {
+				var widgetOptions = options || {},
+					createFunction = widgetOptions.create,
+					Widget = definition.widgetClass,
+					/**
+					 * @type {ns.widget.BaseWidget} widgetInstance
+					 */
+					widgetInstance = Widget ? new Widget(element) : false,
+					buildAttribute,
+					parentEnhance = selectors.getParentsBySelectorNS(element, 'enhance=false'),
+					existingBinding;
+
+				// While processing widgets queue other widget may built this one before
+				// it reaches it's turn
+				existingBinding = getBinding(element, definition.name);
+				if (existingBinding && existingBinding.element === element) {
+					return existingBinding.element;
+				}
+
+				if (widgetInstance && !parentEnhance.length) {
+										widgetInstance.configure(definition, element, options);
+
+					// Run .create method from widget options when a [widgetName]create event is triggered
+					if (typeof createFunction === TYPE_FUNCTION) {
+						eventUtils.one(element, definition.name.toLowerCase() + "create", createFunction);
+					}
+
+					if (element.id) {
+						widgetInstance.id = element.id;
+					}
+
+					// Check if this type of widget was build for this element before
+					buildAttribute = element.getAttribute(DATA_BUILT);
+					if (!buildAttribute || (buildAttribute && buildAttribute.split(NAMES_SEPARATOR).indexOf(widgetInstance.name) === -1)) {
+						element = widgetInstance.build(element);
+					}
+
+					if (element) {
+						widgetInstance.element = element;
+
+						setBinding(widgetInstance);
+
+						widgetInstance.trigger(eventType.WIDGET_BUILT, widgetInstance, false);
+
+						if (!justBuild) {
+							widgetInstance.init(element);
+						}
+
+						widgetInstance.bindEvents(element, justBuild);
+
+						eventUtils.trigger(element, eventType.WIDGET_BOUND, widgetInstance, false);
+						eventUtils.trigger(document, eventType.WIDGET_BOUND, widgetInstance);
+					} else {
+											}
+				}
+				return widgetInstance.element;
+			}
+
+			/**
+			 * Destroys widget of given 'type' for given HTMLElement.
+			 * [NOTICE] This method won't destroy any children widgets.
+			 * @method destroyWidget
+			 * @param {HTMLElement|string} element
+			 * @param {string} type
+			 * @static
+			 * @member ns.engine
+			 */
+			function destroyWidget(element, type) {
+				var widgetInstance;
+
+				if (typeof element === TYPE_STRING) {
+					element = document.getElementById(element);
+				}
+
+				
+				// If type is not defined all widgets should be removed
+				// this is for backward compatibility
+				widgetInstance = getBinding(element, type);
+
+				if (widgetInstance) {
+					//Destroy widget
+					widgetInstance.destroy();
+					widgetInstance.trigger("widgetdestroyed");
+
+					removeBinding(element, type);
+				}
+			}
+
+			/**
+			 * Calls destroy on widget (or widgets) connected with given HTMLElement
+			 * Removes child widgets as well.
+			 * @method destroyAllWidgets
+			 * @param {HTMLElement|string} element
+			 * @param {boolean} [childOnly=false] destroy only widgets on children elements
+			 * @static
+			 * @member ns.engine
+			 */
+			function destroyAllWidgets(element, childOnly) {
+				var widgetName,
+					widgetInstance,
+					widgetGroup,
+					childWidgets,
+					i;
+
+				if (typeof element === TYPE_STRING) {
+					element = document.getElementById(element);
+				}
+
+				
+				if (!childOnly) {
+					// If type is not defined all widgets should be removed
+					// this is for backward compatibility
+					widgetGroup = getAllBindings(element);
+					for (widgetName in widgetGroup) {
+						if (widgetGroup.hasOwnProperty(widgetName)) {
+							widgetInstance = widgetGroup[widgetName];
+
+							//Destroy widget
+							if (widgetInstance) {
+								widgetInstance.destroy();
+								widgetInstance.trigger("widgetdestroyed");
+							}
+						}
+					}
+				}
+
+				//Destroy child widgets, if something left.
+				childWidgets = slice.call(element.querySelectorAll("[" + DATA_BOUND + "]"));
+				for (i = childWidgets.length - 1; i >= 0; i -= 1) {
+					if (childWidgets[i]) {
+						destroyAllWidgets(childWidgets[i], false);
+					}
+				}
+
+				removeAllBindings(element);
+			}
+
+			/**
+			 * Load widgets from data-* definition
+			 * @method processHollowWidget
+			 * @param {HTMLElement} element base element of widget
+			 * @param {Object} definition widget definition
+			 * @param {Object} [options] options for create widget
+			 * @return {HTMLElement} base element of widget
+			 * @private
+			 * @static
+			 * @member ns.engine
+			 */
+			function processHollowWidget(element, definition, options) {
+				var name = element.getAttribute(DATA_NAME) || (definition && definition.name);
+								definition = definition || (name && widgetDefs[name]) || {
+					"name": name
+				};
+				return processWidget(element, definition, options);
+			}
+
+			/**
+			 * Compare function for nodes on build queue
+			 * @param {Object} nodeA
+			 * @param {Object} nodeB
+			 * @return {number}
+			 * @private
+			 * @static
+			 */
+			function compareByDepth(nodeA, nodeB) {
+				var mask = Node.DOCUMENT_POSITION_CONTAINS | Node.DOCUMENT_POSITION_PRECEDING;
+
+				if (nodeA.element.compareDocumentPosition(nodeB.element) & mask) {
+					return 1;
+				}
+
+				return -1;
+			}
+
+			/**
+			 * Processes one build queue item. Runs processHollowWidget
+			 * underneath
+			 * @method processBuildQueueItem
+			 * @param {Object|HTMLElement} queueItem
+			 * @private
+			 * @static
+			 */
+			function processBuildQueueItem(queueItem) {
+				// HTMLElement doesn't have .element property
+				// widgetDefs will return undefined when called widgetDefs[undefined]
+				processHollowWidget(queueItem.element || queueItem, widgetDefs[queueItem.widgetName]);
+			}
+
+			/**
+			 * Build widgets on all children of context element
+			 * @method createWidgets
+			 * @static
+			 * @param {HTMLElement} context base html for create children
+			 * @member ns.engine
+			 */
+			function createWidgets(context) {
+				var builtWithoutTemplates = slice.call(context.querySelectorAll(querySelectorWidgets)),
+					normal = [],
+					buildQueue = [],
+					selectorKeys = Object.keys(widgetDefs),
+					excludeSelector,
+					i,
+					j,
+					len = selectorKeys.length,
+					definition,
+					widgetName,
+					definitionSelectors;
+
+				
+				// @TODO EXPERIMENTAL WIDGETS WITHOUT TEMPLATE DEFINITION
+				builtWithoutTemplates.forEach(processBuildQueueItem);
+
+				/* NORMAL */
+				for (i = 0; i < len; ++i) {
+					widgetName = selectorKeys[i];
+					definition = widgetDefs[widgetName];
+					definitionSelectors = definition.selectors;
+					if (definitionSelectors.length) {
+						excludeSelector = excludeBuiltAndBound(widgetName);
+
+						normal = slice.call(context.querySelectorAll(definitionSelectors.join(excludeSelector + ",") + excludeSelector));
+						j = normal.length;
+
+						while (--j >= 0) {
+							buildQueue.push({
+								element: normal[j],
+								widgetName: widgetName
+							});
+						}
+					}
+				}
+
+				// Sort queue by depth, on every DOM branch outer most element go first
+				buildQueue.sort(compareByDepth);
+
+				// Build all widgets from queue
+				buildQueue.forEach(processBuildQueueItem);
+
+				eventUtils.trigger(document, "built");
+				eventUtils.trigger(document, eventType.BOUND);
+							}
+
+			/**
+			 * Handler for event create
+			 * @method createEventHandler
+			 * @param {Event} event
+			 * @static
+			 * @member ns.engine
+			 */
+			function createEventHandler(event) {
+				createWidgets(event.target);
+			}
+
+			function setViewport() {
+				/**
+				 * Sets viewport tag if not exists
+				 */
+				var documentHead = document.head,
+					metaTagListLength,
+					metaTagList,
+					metaTag,
+					i;
+
+				metaTagList = documentHead.querySelectorAll('[name="viewport"]');
+				metaTagListLength = metaTagList.length;
+
+				if (metaTagListLength > 0) {
+					// Leave the last viewport tag
+					--metaTagListLength;
+
+					// Remove duplicated tags
+					for (i = 0; i < metaTagListLength; ++i) {
+						// Remove meta tag from DOM
+						documentHead.removeChild(metaTagList[i]);
+					}
+				} else {
+					// Create new HTML Element
+					metaTag = document.createElement('meta');
+
+					// Set required attributes
+					metaTag.setAttribute('name', 'viewport');
+					metaTag.setAttribute('content', 'width=device-width, user-scalable=no');
+
+					// Force that viewport tag will be first child of head
+					if (documentHead.firstChild) {
+						documentHead.insertBefore(metaTag, documentHead.firstChild);
+					} else {
+						documentHead.appendChild(metaTag);
+					}
+				}
+			}
+
+			/**
+			 * Build first page
+			 * @method build
+			 * @static
+			 * @member ns.engine
+			 */
+			function build() {
+				if (router) {
+					// @TODO: Consider passing viewport options via script tag arguments (web-ui-fw style).
+					setViewport();
+
+					eventUtils.trigger(document, "beforerouterinit", router, false);
+					router.init(justBuild);
+					eventUtils.trigger(document, "routerinit", router, false);
+				}
+			}
+
+			/**
+			 * Method to remove all listeners bound in run
+			 * @method stop
+			 * @static
+			 * @member ns.engine
+			 */
+			function stop() {
+				if (router) {
+					router.destroy();
+				}
+			}
+			/*
+			 document.addEventListener(eventType.BOUND, function () {
+			 //@TODO dump it to file for faster binding by ids
+			 nsWidgetBindingMap = widgetBindingMap;
+			 }, false);
+			 */
+			ns.widgetDefinitions = {};
+			engine = {
+				justBuild: location.hash === "#build",
+				/**
+				 * object with names of engine attributes
+				 * @property {Object} dataTau
+				 * @property {string} [dataTau.built="data-tau-built"] attribute inform that widget id build
+				 * @property {string} [dataTau.name="data-tau-name"] attribute contains widget name
+				 * @property {string} [dataTau.bound="data-tau-bound"] attribute inform that widget id bound
+				 * @property {string} [dataTau.separator=","] separation string for widget names
+				 * @static
+				 * @member ns.engine
+				 */
+				dataTau: {
+					built: DATA_BUILT,
+					name: DATA_NAME,
+					bound: DATA_BOUND,
+					separator: NAMES_SEPARATOR
+				},
+				destroyWidget: destroyWidget,
+				destroyAllWidgets: destroyAllWidgets,
+				createWidgets: createWidgets,
+
+				/**
+				 * Method to get all definitions of widgets
+				 * @method getDefinitions
+				 * @return {Object}
+				 * @static
+				 * @member ns.engine
+				 */
+				getDefinitions: function () {
+					return widgetDefs;
+				},
+				/**
+				 * Returns definition of widget
+				 * @method getWidgetDefinition
+				 * @param {string} name
+				 * @static
+				 * @member ns.engine
+				 * @returns {Object}
+				 */
+				getWidgetDefinition: function (name) {
+					return widgetDefs[name];
+				},
+				defineWidget: defineWidget,
+				getBinding: getBinding,
+				getAllBindings: getAllBindings,
+				setBinding: setBinding,
+				// @TODO either rename or fix functionally because
+				// this method does not only remove binding but
+				// actually destroys widget
+				removeBinding: removeBinding,
+				removeAllBindings: removeAllBindings,
+
+				/**
+				 * Clear bindings of widgets
+				 * @method _clearBindings
+				 * @static
+				 * @member ns.engine
+				 */
+				_clearBindings: function () {
+					//clear and set references to the same object
+					widgetBindingMap = {};
+				},
+
+				build: build,
+
+				/**
+				 * Run engine
+				 * @method run
+				 * @static
+				 * @member ns.engine
+				 */
+				run: function () {
+					stop();
+
+					eventUtils.fastOn(document, "create", createEventHandler);
+
+					eventUtils.trigger(document, eventType.INIT, {tau: ns});
+
+					switch (document.readyState) {
+					case "interactive":
+					case "complete":
+						build();
+						break;
+					default:
+						eventUtils.fastOn(document, "DOMContentLoaded", build.bind(engine));
+						break;
+					}
+				},
+
+				/**
+				 * Return router
+				 * @method getRouter
+				 * @return {Object}
+				 * @static
+				 * @member ns.engine
+				 */
+				getRouter: function () {
+					return router;
+				},
+
+				/**
+				 * Initialize router. This method should be call in file with router class definition.
+				 * @method initRouter
+				 * @param {Function} RouterClass Router class
+				 * @static
+				 * @member ns.engine
+				 */
+				initRouter: function (RouterClass) {
+					router = new RouterClass();
+				},
+
+				/**
+				 * Build instance of widget and binding events
+				 * Returns error when empty element is passed
+				 * @method instanceWidget
+				 * @param {HTMLElement} element
+				 * @param {string} name
+				 * @param {Object} options
+				 * @return {?Object}
+				 * @static
+				 * @member ns.engine
+				 */
+				instanceWidget: function (element, name, options) {
+					var binding = getBinding(element, name),
+						definition;
+
+					if (!element) {
+						ns.error("'element' cannot be empty");
+						return null;
+					}
+
+					if (!binding && widgetDefs[name]) {
+						definition = widgetDefs[name];
+						element = processHollowWidget(element, definition, options);
+						binding = getBinding(element, name);
+					}
+					return binding;
+				},
+
+				stop: stop,
+
+				/**
+				 * Method to change build mode
+				 * @method setJustBuild
+				 * @param {boolean} newJustBuild
+				 * @static
+				 * @member ns.engine
+				 */
+				setJustBuild: function (newJustBuild) {
+					// Set location hash to have a consistent behavior
+					if(newJustBuild){
+						location.hash = "build";
+					} else {
+						location.hash = "";
+					}
+
+					justBuild = newJustBuild;
+				},
+
+				/**
+				 * Method to get build mode
+				 * @method getJustBuild
+				 * @return {boolean}
+				 * @static
+				 * @member ns.engine
+				 */
+				getJustBuild: function () {
+					return justBuild;
+				},
+				_createEventHandler : createEventHandler
+			};
+
+			engine.eventType = eventType;
+			ns.engine = engine;
+			}(window, window.document, ns));
+
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Anchor Highlight Utility
+ * Utility enables highlight links.
+ * @class ns.util.anchorHighlight
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Damian Osipiuk <d.osipiuk@samsung.com>
+ * @author Konrad Lipner <k.lipner@samsung.com>
+ */
+(function (document, window, ns) {
+	
+				/* anchorHighlightController.js
+			To prevent perfomance regression when scrolling,
+			do not apply hover class in anchor.
+			Instead, this code checks scrolling for time threshold and
+			decide how to handle the color.
+			When scrolling with anchor, it checks flag and decide to highlight anchor.
+			While it helps to improve scroll performance,
+			it lowers responsiveness of the element for 50msec.
+			*/
+
+			/**
+			 * Touch start x
+			 * @property {number} startX
+			 * @member ns.util.anchorHighlight
+			 * @private
+			 * @static
+			 */
+			var startX,
+				/**
+				 * Touch start y
+				 * @property {number} startY
+				 * @member ns.util.anchorHighlight
+				 * @private
+				 * @static
+				 */
+				startY,
+				/**
+				 * Did page scrolled
+				 * @property {boolean} didScroll
+				 * @member ns.util.anchorHighlight
+				 * @private
+				 * @static
+				 */
+				didScroll,
+				/**
+				 * Touch target element
+				 * @property {HTMLElement} target
+				 * @member ns.util.anchorHighlight
+				 * @private
+				 * @static
+				 */
+				target,
+				/**
+				 * Timer id of adding activeClass delay
+				 * @property {number} addActiveClassTimerID
+				 * @member ns.util.anchorHighlight
+				 * @private
+				 * @static
+				 */
+				addActiveClassTimerID,
+				/**
+				 * Object with default options
+				 * @property {Object} options
+				 * Treshold after which didScroll will be set
+				 * @property {number} [options.scrollThreshold=5]
+				 * Time to wait before adding activeClass
+				 * @property {number} [options.addActiveClassDelay=10]
+				 * Time to stay activeClass after touch end
+				 * @property {number} [options.keepActiveClassDelay=100]
+				 * @member ns.util.anchorHighlight
+				 * @private
+				 * @static
+				 */
+				options = {
+					scrollThreshold: 5,
+					addActiveClassDelay: 10,
+					keepActiveClassDelay: 100
+				},
+				/**
+				 * Class used to mark element as active
+				 * @property {string} [activeClassLI="ui-li-active"] activeClassLI
+				 * @member ns.util.anchorHighlight
+				 * @private
+				 * @static
+				 */
+				activeClassLI = "ui-li-active",
+				/**
+				 * Function invoked after touch move ends
+				 * @method removeTouchMove
+				 * @member ns.util.anchorHighlight
+				 * @private
+				 * @static
+				 */
+				removeTouchMove,
+				/**
+				 * Alias for class {@link ns.util.selectors}
+				 * @property {Object} selectors
+				 * @member ns.util.anchorHighlight
+				 * @private
+				 * @static
+				 */
+				selectors = ns.util.selectors;
+
+
+			/**
+			 * Get closest highlightable element
+			 * @method detectHighlightTarget
+			 * @param {HTMLElement} target
+			 * @return {HTMLElement}
+			 * @member ns.util.anchorHighlight
+			 * @private
+			 * @static
+			 */
+			function detectHighlightTarget(target) {
+				target = selectors.getClosestBySelector(target, 'a, label');
+				return target;
+			}
+
+			/**
+			 * Get closest li element
+			 * @method detectLiElement
+			 * @param {HTMLElement} target
+			 * @return {HTMLElement}
+			 * @member ns.util.anchorHighlight
+			 * @private
+			 * @static
+			 */
+			function detectLiElement(target) {
+				target = selectors.getClosestByTag(target, 'li');
+				return target;
+			}
+
+			/**
+			 * Add active class to touched element
+			 * @method addActiveClass
+			 * @member ns.util.anchorHighlight
+			 * @private
+			 * @static
+			 */
+			function addActiveClass() {
+				var liTarget;
+				target = detectHighlightTarget(target);
+				if (!didScroll && target && (target.tagName === "A" || target.tagName === "LABEL")) {
+					liTarget = detectLiElement(target);
+					if( liTarget ) {
+						liTarget.classList.add(activeClassLI);
+					}
+				}
+			}
+
+			/**
+			 * Get all active elements
+			 * @method getActiveElements
+			 * @return {Array}
+			 * @member ns.util.anchorHighlight
+			 * @private
+			 * @static
+			 */
+			function getActiveElements() {
+				return document.getElementsByClassName(activeClassLI);
+			}
+
+			/**
+			 * Remove active class from active elements
+			 * @method removeActiveClass
+			 * @member ns.util.anchorHighlight
+			 * @private
+			 * @static
+			 */
+			function removeActiveClass() {
+				var activeA = getActiveElements(),
+					activeALength = activeA.length,
+					i;
+				for (i = 0; i < activeALength; i++) {
+					activeA[i].classList.remove(activeClassLI);
+				}
+			}
+
+			/**
+			 * Function invoked during touch move
+			 * @method touchmoveHandler
+			 * @param {Event} event
+			 * @member ns.util.anchorHighlight
+			 * @private
+			 * @static
+			 */
+			function touchmoveHandler(event) {
+				var touch = event.touches[0];
+				didScroll = didScroll ||
+					(Math.abs(touch.clientX - startX) > options.scrollThreshold || Math.abs(touch.clientY - startY) > options.scrollThreshold);
+
+				if (didScroll) {
+					removeTouchMove();
+					removeActiveClass();
+				}
+			}
+
+			/**
+			 * Function invoked after touch start
+			 * @method touchstartHandler
+			 * @param {Event} event
+			 * @member ns.util.anchorHighlight
+			 * @private
+			 * @static
+			 */
+			function touchstartHandler(event) {
+				var touches = event.touches,
+					touch = touches[0];
+
+				if (touches.length === 1) {
+					didScroll = false;
+					startX = touch.clientX;
+					startY = touch.clientY;
+					target = event.target;
+
+					document.addEventListener("touchmove", touchmoveHandler, false);
+					clearTimeout(addActiveClassTimerID);
+					addActiveClassTimerID = setTimeout(addActiveClass, options.addActiveClassDelay);
+				}
+			}
+
+			removeTouchMove = function () {
+				document.removeEventListener("touchmove", touchmoveHandler, false);
+			};
+
+			/**
+			 * Function invoked after touch
+			 * @method touchendHandler
+			 * @param {Event} event
+			 * @member ns.util.anchorHighlight
+			 * @private
+			 * @static
+			 */
+			function touchendHandler(event) {
+				if (event.touches.length === 0) {
+					clearTimeout(addActiveClassTimerID);
+					addActiveClassTimerID = null;
+					if (!didScroll) {
+						setTimeout(removeActiveClass, options.keepActiveClassDelay);
+					}
+					didScroll = false;
+				}
+			}
+
+			/**
+			 * Function invoked after visibilitychange event
+			 * @method checkPageVisibility
+			 * @member ns.util.anchorHighlight
+			 * @private
+			 * @static
+			 */
+			function checkPageVisibility() {
+				if (document.visibilityState === "hidden") {
+					removeActiveClass();
+				}
+			}
+
+			/**
+			 * Bind events to document
+			 * @method enable
+			 * @member ns.util.anchorHighlight
+			 * @static
+			 */
+			function enable() {
+				document.addEventListener("touchstart", touchstartHandler, false);
+				document.addEventListener("touchend", touchendHandler, false);
+				document.addEventListener("visibilitychange", checkPageVisibility, false);
+				window.addEventListener("pagehide", removeActiveClass, false);
+			}
+
+			/**
+			 * Unbinds events from document.
+			 * @method disable
+			 * @member ns.util.anchorHighlight
+			 * @static
+			 */
+			function disable() {
+				document.removeEventListener("touchstart", touchstartHandler, false);
+				document.removeEventListener("touchend", touchendHandler, false);
+				window.removeEventListener("pagehide", removeActiveClass, false);
+			}
+
+			enable();
+
+			ns.util.anchorHighlight = {
+				enable: enable,
+				disable: disable
+			};
+
+			}(document, window, ns));
+
+/*global window, define */
+/*jslint plusplus: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Utility DOM
+ * Utility object with function to DOM manipulation, CSS properties support
+ * and DOM attributes support.
+ *
+ * # How to replace jQuery methods  by ns methods
+ * ## append vs appendNodes
+ *
+ * #### HTML code before manipulation
+ *
+ *     @example
+ *     <div>
+ *         <div id="first">Hello</div>
+ *         <div id="second">And</div>
+ *         <div id="third">Goodbye</div>
+ *     </div>
+ *
+ * #### jQuery manipulation
+ *
+ *     @example
+ *     $( "#second" ).append( "<span>Test</span>" );
+
+ * #### ns manipulation
+ *
+ *     @example
+ *     var context = document.getElementById("second"),
+ *         element = document.createElement("span");
+ *     element.innerHTML = "Test";
+ *     ns.util.DOM.appendNodes(context, element);
+ *
+ * #### HTML code after manipulation
+ *
+ *     @example
+ *     <div>
+ *         <div id="first">Hello</div>
+ *         <div id="second">And
+ *             <span>Test</span>
+ *         </div>
+ *        <div id="third">Goodbye</div>
+ *     </div>
+ *
+ * ## replaceWith vs replaceWithNodes
+ *
+ * #### HTML code before manipulation
+ *
+ *     @example
+ *     <div>
+ *         <div id="first">Hello</div>
+ *         <div id="second">And</div>
+ *         <div id="third">Goodbye</div>
+ *     </div>
+ *
+ * #### jQuery manipulation
+ *
+ *     @example
+ *     $('#second').replaceWith("<span>Test</span>");
+ *
+ * #### ns manipulation
+ *
+ *     @example
+ *     var context = document.getElementById("second"),
+ *         element = document.createElement("span");
+ *     element.innerHTML = "Test";
+ *     ns.util.DOM.replaceWithNodes(context, element);
+ *
+ * #### HTML code after manipulation
+ *
+ *     @example
+ *     <div>
+ *         <div id="first">Hello</div>
+ *         <span>Test</span>
+ *         <div id="third">Goodbye</div>
+ *     </div>
+ *
+ * ## before vs insertNodesBefore
+ *
+ * #### HTML code before manipulation
+ *
+ *     @example
+ *     <div>
+ *         <div id="first">Hello</div>
+ *         <div id="second">And</div>
+ *         <div id="third">Goodbye</div>
+ *     </div>
+ *
+ * #### jQuery manipulation
+ *
+ *     @example
+ *     $( "#second" ).before( "<span>Test</span>" );
+ *
+ * #### ns manipulation
+ *
+ *     @example
+ *     var context = document.getElementById("second"),
+ *         element = document.createElement("span");
+ *     element.innerHTML = "Test";
+ *     ns.util.DOM.insertNodesBefore(context, element);
+ *
+ * #### HTML code after manipulation
+ *
+ *     @example
+ *     <div>
+ *         <div id="first">Hello</div>
+ *         <span>Test</span>
+ *         <div id="second">And</div>
+ *         <div id="third">Goodbye</div>
+ *     </div>
+ *
+ * ## wrapInner vs wrapInHTML
+ *
+ * #### HTML code before manipulation
+ *
+ *     @example
+ *     <div>
+ *         <div id="first">Hello</div>
+ *         <div id="second">And</div>
+ *         <div id="third">Goodbye</div>
+ *     </div>
+ *
+ * #### jQuery manipulation
+ *
+ *     @example
+ *     $( "#second" ).wrapInner( "<span class="new"></span>" );
+ *
+ * #### ns manipulation
+ *
+ *     @example
+ *     var element = document.getElementById("second");
+ *     ns.util.DOM.wrapInHTML(element, "<span class="new"></span>");
+ *
+ * #### HTML code after manipulation
+ *
+ *     @example
+ *     <div>
+ *         <div id="first">Hello</div>
+ *         <div id="second">
+ *             <span class="new">And</span>
+ *         </div>
+ *         <div id="third">Goodbye</div>
+ *     </div>
+ *
+ * @class ns.util.DOM
+ * @author Jadwiga Sosnowska <j.sosnowska@partner.samsung.com>
+ * @author Krzysztof Antoszek <k.antoszek@samsung.com>
+ * @author Maciej Moczulski <m.moczulski@samsung.com>
+ * @author Piotr Karny <p.karny@samsung.com>
+ */
+(function (ns) {
+	
+				ns.util.DOM = ns.util.DOM || {};
+			}(ns));
+
+/*global window, define */
+/*jslint plusplus: true */
+/*jshint -W069 */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*
+ * @author Jadwiga Sosnowska <j.sosnowska@partner.samsung.com>
+ * @author Krzysztof Antoszek <k.antoszek@samsung.com>
+ * @author Maciej Moczulski <m.moczulski@samsung.com>
+ * @author Piotr Karny <p.karny@samsung.com>
+ */
+(function (window, document, ns) {
+	
+	
+			var DOM = ns.util.DOM;
+
+			/**
+			 * Returns css property for element
+			 * @method getCSSProperty
+			 * @param {HTMLElement} element
+			 * @param {string} property
+			 * @param {string|number|null} [def=null] default returned value
+			 * @param {"integer"|"float"|null} [type=null] auto type casting
+			 * @return {string|number|null}
+			 * @member ns.util.DOM
+			 * @static
+			 */
+			function getCSSProperty(element, property, def, type) {
+				var style = window.getComputedStyle(element),
+					value = null,
+					result = def;
+				if (style) {
+					value = style.getPropertyValue(property);
+					if (value) {
+						switch (type) {
+						case "integer":
+							value = parseInt(value, 10);
+							if (!isNaN(value)) {
+								result = value;
+							}
+							break;
+						case "float":
+							value = parseFloat(value);
+							if (!isNaN(value)) {
+								result = value;
+							}
+							break;
+						default:
+							result = value;
+							break;
+						}
+					}
+				}
+				return result;
+			}
+
+			/**
+			 * Extracts css properties from computed css for an element.
+			 * The properties values are applied to the specified
+			 * properties list (dictionary)
+			 * @method extractCSSProperties
+			 * @param {HTMLElement} element
+			 * @param {Object} properties
+			 * @param {?string} [pseudoSelector=null]
+			 * @param {boolean} [noConversion=false]
+			 * @member ns.util.DOM
+			 * @static
+			 */
+			function extractCSSProperties (element, properties, pseudoSelector, noConversion) {
+				var style = window.getComputedStyle(element, pseudoSelector),
+					property,
+					value = null,
+					utils = ns.util;
+
+				// @TODO extractCSSProperties should rather return raw values (with units)
+				for (property in properties) {
+					if (properties.hasOwnProperty(property)) {
+						value = style.getPropertyValue(property);
+						if (utils.isNumber(value) && !noConversion) {
+							if (value.match(/\./gi)) {
+								properties[property] = parseFloat(value);
+							} else {
+								properties[property] = parseInt(value, 10);
+							}
+						} else {
+							properties[property] = value;
+						}
+					}
+				}
+			}
+
+			/**
+			 * Returns elements height from computed style
+			 * @method getElementHeight
+			 * @param {HTMLElement} element
+			 * if null then the "inner" value is assigned
+			 * @param {"outer"|null} [type=null]
+			 * @param {boolean} [includeOffset=false]
+			 * @param {boolean} [includeMargin=false]
+			 * @param {?string} [pseudoSelector=null]
+			 * @param {boolean} [force=false] check even if element is hidden
+			 * @return {number}
+			 * @member ns.util.DOM
+			 * @static
+			 */
+			function getElementHeight(element, type, includeOffset, includeMargin, pseudoSelector, force) {
+				var height = 0,
+					style,
+					value,
+					originalDisplay = null,
+					originalVisibility = null,
+					originalPosition = null,
+					outer = (type && type === "outer") || false,
+					offsetHeight = 0,
+					property,
+					props = {
+						"height": 0,
+						"margin-top": 0,
+						"margin-bottom": 0,
+						"padding-top": 0,
+						"padding-bottom": 0,
+						"border-top-width": 0,
+						"border-bottom-width": 0,
+						"box-sizing": ""
+					};
+				if (element) {
+					style = element.style;
+
+					if (style.display !== "none") {
+						extractCSSProperties(element, props, pseudoSelector, true);
+						offsetHeight = element.offsetHeight;
+					} else if (force) {
+						originalDisplay = style.display;
+						originalVisibility = style.visibility;
+						originalPosition = style.position;
+
+						style.display = "block";
+						style.visibility = "hidden";
+						style.position = "relative";
+
+						extractCSSProperties(element, props, pseudoSelector, true);
+						offsetHeight = element.offsetHeight;
+
+						style.display = originalDisplay;
+						style.visibility = originalVisibility;
+						style.position = originalPosition;
+					}
+
+					// We are extracting raw values to be able to check the units
+					if(typeof props["height"] === "string" && props["height"].indexOf("px") === -1){
+						//ignore non px values such as auto or %
+						props["height"] = 0;
+					}
+
+					for (property in props) {
+						if (props.hasOwnProperty(property) && property !== "box-sizing"){
+							value = parseFloat(props[property]);
+							if (isNaN(value)) {
+								value = 0;
+							}
+							props[property] = value;
+						}
+					}
+
+					height += props["height"] + props["padding-top"] + props["padding-bottom"];
+
+					if (includeOffset) {
+						height = offsetHeight;
+					} else if (outer && props["box-sizing"] !== 'border-box') {
+						height += props["border-top-width"] + props["border-bottom-width"];
+					}
+
+					if (includeMargin) {
+						height += Math.max(0, props["margin-top"]) + Math.max(0, props["margin-bottom"]);
+					}
+				}
+				return height;
+			}
+
+			/**
+			 * Returns elements width from computed style
+			 * @method getElementWidth
+			 * @param {HTMLElement} element
+			 * if null then the "inner" value is assigned
+			 * @param {"outer"|null} [type=null]
+			 * @param {boolean} [includeOffset=false]
+			 * @param {boolean} [includeMargin=false]
+			 * @param {?string} [pseudoSelector=null]
+			 * @param {boolean} [force=false] check even if element is hidden
+			 * @return {number}
+			 * @member ns.util.DOM
+			 * @static
+			 */
+			function getElementWidth(element, type, includeOffset, includeMargin, pseudoSelector, force) {
+				var width = 0,
+					style,
+					value,
+					originalDisplay = null,
+					originalVisibility = null,
+					originalPosition = null,
+					offsetWidth = 0,
+					property,
+					outer = (type && type === "outer") || false,
+					props = {
+						"width": 0,
+						"margin-left": 0,
+						"margin-right": 0,
+						"padding-left": 0,
+						"padding-right": 0,
+						"border-left-width": 0,
+						"border-right-width": 0,
+						"box-sizing": ""
+					};
+
+				if (element) {
+					style = element.style;
+
+					if (style.display !== "none") {
+						extractCSSProperties(element, props, pseudoSelector, true);
+						offsetWidth = element.offsetWidth;
+					} else if (force) {
+						originalDisplay = style.display;
+						originalVisibility = style.visibility;
+						originalPosition = style.position;
+
+						style.display = "block";
+						style.visibility = "hidden";
+						style.position = "relative";
+
+						extractCSSProperties(element, props, pseudoSelector, true);
+
+						style.display = originalDisplay;
+						style.visibility = originalVisibility;
+						style.position = originalPosition;
+					}
+
+					if(typeof props["width"] === 'string' && props["width"].indexOf("px") === -1) {
+						//ignore non px values such as auto or %
+						props["width"] = 0;
+					}
+					for (property in props) {
+						if (props.hasOwnProperty(property) && property !== "box-sizing"){
+							value = parseFloat(props[property]);
+							if (isNaN(value)) {
+								value = 0;
+							}
+							props[property] = value;
+						}
+					}
+
+					width += props["width"] + props["padding-left"] + props["padding-right"];
+
+					if (includeOffset) {
+						width = offsetWidth;
+					} else if (outer && props["box-sizing"] !== 'border-box') {
+						width += props["border-left-width"] + props["border-right-width"];
+					}
+
+					if (includeMargin) {
+						width += Math.max(0, props["margin-left"]) + Math.max(0, props["margin-right"]);
+					}
+				}
+				return width;
+			}
+
+			/**
+			 * Returns offset of element
+			 * @method getElementOffset
+			 * @param {HTMLElement} element
+			 * @return {Object}
+			 * @member ns.util.DOM
+			 * @static
+			 */
+			function getElementOffset(element) {
+				var left = 0,
+					top = 0;
+				do {
+					top += element.offsetTop;
+					left += element.offsetLeft;
+					element = element.offsetParent;
+				} while (element !== null);
+
+				return {
+					top: top,
+					left: left
+				};
+			}
+
+			/**
+			 * Check if element occupies place at view
+			 * @method isOccupiedPlace
+			 * @param {HTMLElement} element
+			 * @return {boolean}
+			 * @member ns.util.DOM
+			 * @static
+			 */
+			function isOccupiedPlace(element) {
+				return !(element.offsetWidth <= 0 && element.offsetHeight <= 0);
+			}
+
+			// assign methods to namespace
+			DOM.getCSSProperty = getCSSProperty;
+			DOM.extractCSSProperties = extractCSSProperties;
+			DOM.getElementHeight = getElementHeight;
+			DOM.getElementWidth = getElementWidth;
+			DOM.getElementOffset = getElementOffset;
+			DOM.isOccupiedPlace = isOccupiedPlace;
+
+			}(window, window.document, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Callback Utility
+ * Class creates a callback list
+ *
+ * Create a callback list using the following parameters:
+ *  options: an optional list of space-separated options that will change how
+ *			the callback list behaves or a more traditional option object
+ *
+ * By default a callback list will act like an event callback list and can be
+ * "fired" multiple times.
+ *
+ * Possible options:
+ *
+ *	once:			will ensure the callback list can only be fired once (like a Deferred)
+ *
+ *	memory:			will keep track of previous values and will call any callback added
+ *					after the list has been fired right away with the latest "memorized"
+ *					values (like a Deferred)
+ *
+ *	unique:			will ensure a callback can only be added once (no duplicate in the list)
+ *
+ *	stopOnFalse:	interrupt callings when a callback returns false
+ * @class ns.util.callbacks
+ */
+(function (window, document, ns) {
+	
+				ns.util.callbacks = function (orgOptions) {
+
+				var object = ns.util.object,
+					options = object.copy(orgOptions),
+					/**
+					 * Alias to Array.slice function
+					 * @method slice
+					 * @member ns.util.callbacks
+					 * @private
+					 */
+					slice = [].slice,
+					/**
+					 * Last fire value (for non-forgettable lists)
+					 * @property {Object} memory
+					 * @member ns.util.callbacks
+					 * @private
+					 */
+					memory,
+					/**
+					 * Flag to know if list was already fired
+					 * @property {boolean} fired
+					 * @member ns.util.callbacks
+					 * @private
+					 */
+					fired,
+					/**
+					 * Flag to know if list is currently firing
+					 * @property {boolean} firing
+					 * @member ns.util.callbacks
+					 * @private
+					 */
+					firing,
+					/**
+					 * First callback to fire (used internally by add and fireWith)
+					 * @property {number} [firingStart=0]
+					 * @member ns.util.callbacks
+					 * @private
+					 */
+					firingStart,
+					/**
+					 * End of the loop when firing
+					 * @property {number} firingLength
+					 * @member ns.util.callbacks
+					 * @private
+					 */
+					firingLength,
+					/**
+					 * Index of currently firing callback (modified by remove if needed)
+					 * @property {number} firingIndex
+					 * @member ns.util.callbacks
+					 * @private
+					 */
+					firingIndex,
+					/**
+					 * Actual callback list
+					 * @property {Array} list
+					 * @member ns.util.callbacks
+					 * @private
+					 */
+					list = [],
+					/**
+					 * Stack of fire calls for repeatable lists
+					 * @property {Array} stack
+					 * @member ns.util.callbacks
+					 * @private
+					 */
+					stack = !options.once && [],
+					fire,
+					add,
+					self = {
+						/**
+						 * Add a callback or a collection of callbacks to the list
+						 * @method add
+						 * @param {..Function} list
+						 * @return {ns.util.callbacks} self
+						 * @chainable
+						 * @member ns.util.callbacks
+						 */
+						add: function () {
+							if (list) {
+								// First, we save the current length
+								var start = list.length;
+								add(arguments);
+								// Do we need to add the callbacks to the
+								// current firing batch?
+								if (firing) {
+									firingLength = list.length;
+								// With memory, if we're not firing then
+								// we should call right away
+								} else if (memory) {
+									firingStart = start;
+									fire(memory);
+								}
+							}
+							return this;
+						},
+						/**
+						 * Remove a callback from the list
+						 * @method remove
+						 * @param {..Function} list
+						 * @return {ns.util.callbacks} self
+						 * @chainable
+						 * @member ns.util.callbacks
+						 */
+						remove: function () {
+							if (list) {
+								slice.call(arguments).forEach(function (arg) {
+									var index = list.indexOf(arg);
+									while (index > -1) {
+										list.splice(index, 1);
+										// Handle firing indexes
+										if (firing) {
+											if (index <= firingLength) {
+												firingLength--;
+											}
+											if (index <= firingIndex) {
+												firingIndex--;
+											}
+										}
+										index = list.indexOf(arg, index);
+									}
+								});
+							}
+							return this;
+						},
+						/**
+						 * Check if a given callback is in the list. 
+						 * If no argument is given,
+						 * return whether or not list has callbacks attached.
+						 * @method has
+						 * @param {Funciton} fn
+						 * @return {boolean}
+						 * @member ns.util.callbacks
+						 */
+						has: function (fn) {
+							return fn ? !!list && list.indexOf(fn) > -1 : !!(list && list.length);
+						},
+						/**
+						 * Remove all callbacks from the list
+						 * @method empty
+						 * @return {ns.util.callbacks} self
+						 * @chainable
+						 * @member ns.util.callbacks
+						 */
+						empty: function () {
+							list = [];
+							firingLength = 0;
+							return this;
+						},
+						/**
+						 * Have the list do nothing anymore
+						 * @method disable
+						 * @return {ns.util.callbacks} self
+						 * @chainable
+						 * @member ns.util.callbacks
+						 */
+						disable: function () {
+							list = stack = memory = undefined;
+							return this;
+						},
+						/**
+						 * Is it disabled?
+						 * @method disabled
+						 * @return {boolean}
+						 * @member ns.util.callbacks
+						 */
+						disabled: function () {
+							return !list;
+						},
+						/**
+						 * Lock the list in its current state
+						 * @method lock
+						 * @return {ns.util.callbacks} self
+						 * @chainable
+						 * @member ns.util.callbacks
+						 */
+						lock: function () {
+							stack = undefined;
+							if (!memory) {
+								self.disable();
+							}
+							return this;
+						},
+						/**
+						 * Is it locked?
+						 * @method locked
+						 * @return {boolean} stack
+						 * @member ns.util.callbacks
+						 */
+						locked: function () {
+							return !stack;
+						},
+						/**
+						 * Call all callbacks with the given context and
+						 * arguments
+						 * @method fireWith
+						 * @param {Object} context
+						 * @param {Array} args
+						 * @return {ns.util.callbacks} self
+						 * @chainable
+						 * @member ns.util.callbacks
+						 */
+						fireWith: function (context, args) {
+							if (list && (!fired || stack)) {
+								args = args || [];
+								args = [context, args.slice ? args.slice() : args];
+								if (firing) {
+									stack.push(args);
+								} else {
+									fire(args);
+								}
+							}
+							return this;
+						},
+						/**
+						 * Call all the callbacks with the given arguments
+						 * @method fire
+						 * @param {...*} argument
+						 * @return {ns.util.callbacks} self
+						 * @chainable
+						 * @member ns.util.callbacks
+						 */
+						fire: function () {
+							self.fireWith(this, arguments);
+							return this;
+						},
+						/**
+						 * To know if the callbacks have already been called at
+						 * least once
+						 * @method fired
+						 * @return {booblean}
+						 * @chainable
+						 * @member ns.util.callbacks
+						 */
+						fired: function () {
+							return !!fired;
+						}
+					};
+				/**
+				 * Adds functions to the callback list
+				 * @method add
+				 * @param {...*} argument
+				 * @member ns.util.bezierCurve
+				 * @private
+				 */
+				add = function (args) {
+					slice.call(args).forEach(function (arg) {
+						var type = typeof arg;
+						if (type === "function") {
+							if (!options.unique || !self.has(arg)) {
+								list.push(arg);
+							}
+						} else if (arg && arg.length && type !== "string") {
+							// Inspect recursively
+							add(arg);
+						}
+					});
+				};
+				/**
+				 * Fire callbacks
+				 * @method fire
+				 * @param {Array} data
+				 * @member ns.util.bezierCurve
+				 * @private
+				 */
+				fire = function (data) {
+					memory = options.memory && data;
+					fired = true;
+					firingIndex = firingStart || 0;
+					firingStart = 0;
+					firingLength = list.length;
+					firing = true;
+					while (list && firingIndex < firingLength) {
+						if (list[firingIndex].apply(data[0], data[1]) === false && options.stopOnFalse) {
+							memory = false; // To prevent further calls using add
+							break;
+						}
+						firingIndex++;
+					}
+					firing = false;
+					if (list) {
+						if (stack) {
+							if (stack.length) {
+								fire(stack.shift());
+							}
+						} else if (memory) {
+							list = [];
+						} else {
+							self.disable();
+						}
+					}
+				};
+
+				return self;
+			};
+
+			}(window, window.document, ns));
+
+/*global window, define, RegExp */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Deferred Utility
+ * Class creates object which can call registered callback depend from
+ * state of object..
+ * @class ns.util.deferred
+ * @author Tomasz Lukawski <t.lukawski@samsung.com>
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Piotr Karny <p.karny@samsung.com>
+ */(function (window, document, ns) {
+	
+	
+			var Deferred = function (callback) {
+				var callbacks = ns.util.callbacks,
+					object = ns.util.object,
+					/**
+					 * Register additional action for deferred object
+					 * @property {Array} tuples
+					 * @member ns.util.deferred
+					 * @private
+					 */
+					tuples = [
+						// action, add listener, listener list, final state
+						["resolve", "done", callbacks({once: true, memory: true}), "resolved"],
+						["reject", "fail", callbacks({once: true, memory: true}), "rejected"],
+						["notify", "progress", callbacks({memory: true})]
+					],
+					state = "pending",
+					deferred = {},
+					promise = {
+						/**
+						 * Determine the current state of a Deferred object.
+						 * @method state
+						 * @return {"pending" | "resolved" | "rejected"} representing the current state
+						 * @member ns.util.deferred
+						 */
+						state: function () {
+							return state;
+						},
+						/**
+						 * Add handlers to be called when the Deferred object
+						 * is either resolved or rejected.
+						 * @method always
+						 * @param {...Function}
+						 * @return {ns.util.deferred} self
+						 * @member ns.util.deferred
+						 */
+						always: function () {
+							deferred.done(arguments).fail(arguments);
+							return this;
+						},
+						/**
+						 * Add handlers to be called when the Deferred object
+						 * is resolved, rejected, or still in progress.
+						 * @method then
+						 * @param {?Function} callback assign when done
+						 * @param {?Function} callback assign when fail
+						 * @param {?Function} callback assign when progress
+						 * @return {Object} returns a new promise
+						 * @member ns.util.deferred
+						 */
+						then: function () {/* fnDone, fnFail, fnProgress */
+							var functions = arguments;
+							return new Deferred(function (newDefer) {
+								tuples.forEach(function (tuple, i) {
+									var fn = (typeof functions[i] === 'function') && functions[i];
+									// deferred[ done | fail | progress ] for forwarding actions to newDefer
+									deferred[tuple[1]](function () {
+										var returned = fn && fn.apply(this, arguments);
+										if (returned && (typeof returned.promise === 'function')) {
+											returned.promise()
+												.done(newDefer.resolve)
+												.fail(newDefer.reject)
+												.progress(newDefer.notify);
+										} else {
+											newDefer[tuple[0] + "With"](this === promise ? newDefer.promise() : this, fn ? [returned] : arguments);
+										}
+									});
+								});
+								functions = null;
+							}).promise();
+						},
+						/**
+						 * Get a promise for this deferred. If obj is provided,
+						 * the promise aspect is added to the object
+						 * @method promise
+						 * @param {Object} obj
+						 * @return {Object} return a Promise object
+						 * @member ns.util.deferred
+						 */
+						promise: function (obj) {
+							if (obj) {
+								return object.merge(obj, promise);
+							}
+							return promise;
+						}
+					};
+
+				/**
+				 * alias for promise.then, Keep pipe for back-compat
+				 * @method pipe
+				 * @member ns.util.deferred
+				 */
+				promise.pipe = promise.then;
+
+				// Add list-specific methods
+
+				tuples.forEach(function (tuple, i) {
+					var list = tuple[2],
+						stateString = tuple[3];
+
+					// promise[ done | fail | progress ] = list.add
+					promise[tuple[1]] = list.add;
+
+					// Handle state
+					if (stateString) {
+						list.add(function () {
+							// state = [ resolved | rejected ]
+							state = stateString;
+
+						// [ reject_list | resolve_list ].disable; progress_list.lock
+						}, tuples[i ^ 1][2].disable, tuples[2][2].lock);
+					}
+
+					// deferred[ resolve | reject | notify ]
+					deferred[tuple[0]] = function () {
+						deferred[tuple[0] + "With"](this === deferred ? promise : this, arguments);
+						return this;
+					};
+					deferred[tuple[0] + "With"] = list.fireWith;
+				});
+
+				// Make the deferred a promise
+				promise.promise(deferred);
+
+				// Call given func if any
+				if (callback) {
+					callback.call(deferred, deferred);
+				}
+
+				// All done!
+				return deferred;
+			};
+			ns.util.deferred = Deferred;
+			}(window, window.document, ns));
+
+/*global window, define */
+/*jslint plusplus: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*
+ * @author Jadwiga Sosnowska <j.sosnowska@partner.samsung.com>
+ * @author Krzysztof Antoszek <k.antoszek@samsung.com>
+ * @author Maciej Moczulski <m.moczulski@samsung.com>
+ * @author Piotr Karny <p.karny@samsung.com>
+ */
+(function (window, document, ns) {
+	
+	
+
+			var selectors = ns.util.selectors,
+				DOM = ns.util.DOM,
+				namespace = "namespace";
+
+			/**
+			 * Returns given attribute from element or the closest parent,
+			 * which matches the selector.
+			 * @method inheritAttr
+			 * @member ns.util.DOM
+			 * @param {HTMLElement} element
+			 * @param {string} attr
+			 * @param {string} selector
+			 * @return {?string}
+			 * @static
+			 */
+			DOM.inheritAttr = function (element, attr, selector) {
+				var value = element.getAttribute(attr),
+					parent;
+				if (!value) {
+					parent = selectors.getClosestBySelector(element, selector);
+					if (parent) {
+						return parent.getAttribute(attr);
+					}
+				}
+				return value;
+			};
+
+			/**
+			 * Returns Number from properties described in html tag
+			 * @method getNumberFromAttribute
+			 * @member ns.util.DOM
+			 * @param {HTMLElement} element
+			 * @param {string} attribute
+			 * @param {string=} [type] auto type casting
+			 * @param {number} [defaultValue] default returned value
+			 * @static
+			 * @return {number}
+			 */
+			DOM.getNumberFromAttribute = function (element, attribute, type, defaultValue) {
+				var value = element.getAttribute(attribute),
+					result = defaultValue;
+
+				if (!isNaN(value)) {
+					if (type === "float") {
+						value = parseFloat(value);
+						if (!isNaN(value)) {
+							result = value;
+						}
+					} else {
+						value = parseInt(value, 10);
+						if (!isNaN(value)) {
+							result = value;
+						}
+					}
+				}
+				return result;
+			};
+
+			function getDataName(name) {
+				var namespace = ns.getConfig(namespace);
+				return "data-" + (namespace ? namespace + "-" : "") + name;
+			}
+
+			/**
+			 * This function sets value of attribute data-{namespace}-{name} for element.
+			 * If the namespace is empty, the attribute data-{name} is used.
+			 * @method setNSData
+			 * @param {HTMLElement} element Base element
+			 * @param {string} name Name of attribute
+			 * @param {string|number|boolean} value New value
+			 * @member ns.util.DOM
+			 * @static
+			 */
+			DOM.setNSData = function (element, name, value) {
+				element.setAttribute(getDataName(name), value);
+			};
+
+			/**
+			 * This function returns value of attribute data-{namespace}-{name} for element.
+			 * If the namespace is empty, the attribute data-{name} is used.
+			 * Method may return boolean in case of 'true' or 'false' strings as attribute value.
+			 * @method getNSData
+			 * @param {HTMLElement} element Base element
+			 * @param {string} name Name of attribute
+			 * @member ns.util.DOM
+			 * @return {?string|boolean}
+			 * @static
+			 */
+			DOM.getNSData = function (element, name) {
+				var value = element.getAttribute(getDataName(name));
+
+				if (value === "true") {
+					return true;
+				}
+
+				if (value === "false") {
+					return false;
+				}
+
+				return value;
+			};
+
+			/**
+			 * This function returns true if attribute data-{namespace}-{name} for element is set
+			 * or false in another case. If the namespace is empty, attribute data-{name} is used.
+			 * @method hasNSData
+			 * @param {HTMLElement} element Base element
+			 * @param {string} name Name of attribute
+			 * @member ns.util.DOM
+			 * @return {boolean}
+			 * @static
+			 */
+			DOM.hasNSData = function (element, name) {
+				return element.hasAttribute(getDataName(name));
+			};
+
+			/**
+			 * Get or set value on data attribute.
+			 * @method nsData
+			 * @param {HTMLElement} element
+			 * @param {string} name
+			 * @param {?Mixed} [value]
+			 * @static
+			 * @member ns.util.DOM
+			 */
+			DOM.nsData = function (element, name, value) {
+				// @TODO add support for object in value
+				if (value === undefined) {
+					return DOM.getNSData(element, name);
+				} else {
+					return DOM.setNSData(element, name, value);
+				}
+			};
+
+			/**
+			 * This function removes attribute data-{namespace}-{name} from element.
+			 * If the namespace is empty, attribute data-{name} is used.
+			 * @method removeNSData
+			 * @param {HTMLElement} element Base element
+			 * @param {string} name Name of attribute
+			 * @member ns.util.DOM
+			 * @static
+			 */
+			DOM.removeNSData = function (element, name) {
+				element.removeAttribute(getDataName(name));
+			};
+
+			/**
+			 * Returns object with all data-* attributes of element
+			 * @method getData
+			 * @param {HTMLElement} element Base element
+			 * @member ns.util.DOM
+			 * @return {Object}
+			 * @static
+			 */
+			DOM.getData = function (element) {
+				var dataPrefix = "data-",
+					data = {},
+					attrs = element.attributes,
+					attr,
+					nodeName,
+					value,
+					i,
+					length = attrs.length;
+
+				for (i = 0; i < length; i++) {
+					attr = attrs.item(i);
+					nodeName = attr.nodeName;
+					if (nodeName.indexOf(dataPrefix) > -1) {
+						value = attr.value;
+						data[nodeName.replace(dataPrefix, "")] = value.toLowerCase() === "true" ? true : value.toLowerCase() === "false" ? false : value;
+					}
+				}
+
+				return data;
+			};
+
+			/**
+			 * Special function to remove attribute and property in the same time
+			 * @method removeAttribute
+			 * @param {HTMLElement} element
+			 * @param {string} name
+			 * @member ns.util.DOM
+			 * @static
+			 */
+			DOM.removeAttribute = function (element, name) {
+				element.removeAttribute(name);
+				element[name] = false;
+			};
+
+			/**
+			 * Special function to set attribute and property in the same time
+			 * @method setAttribute
+			 * @param {HTMLElement} element
+			 * @param {string} name
+			 * @param {Mixed} value
+			 * @member ns.util.DOM
+			 * @static
+			 */
+			DOM.setAttribute = function (element, name, value) {
+				element[name] = value;
+				element.setAttribute(name, value);
+			};
+			}(window, window.document, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Namespace For Widgets
+ * Namespace For Widgets
+ * @author Krzysztof Antoszek <k.antoszek@samsung.com>
+ * @class ns.widget
+ */
+(function (document, ns) {
+	
+				var engine = ns.engine,
+				widget = {
+					/**
+					 * Get bound widget for element
+					 * @method getInstance
+					 * @static
+					 * @param {HTMLElement|string} element
+					 * @param {string} type widget name
+					 * @return {?Object}
+					 * @member ns.widget
+					 */
+					getInstance: engine.getBinding,
+					/**
+					 * Returns Get all bound widget for element or id gives as parameter
+					 * @method getAllInstances
+					 * @param {HTMLElement|string} element
+					 * @return {?Object}
+					 * @static
+					 * @member ns.widget
+					 */
+					getAllInstances: engine.getAllBindings
+				};
+
+			document.addEventListener(engine.eventType.WIDGET_DEFINED, function (evt) {
+				var definition = evt.detail,
+					name = definition.name;
+
+				 ns.widget[name] = function (element, options) {
+					 return engine.instanceWidget(element, name, options);
+				 };
+
+			}, true);
+
+			/** @namespace ns.widget */
+			ns.widget = widget;
+			}(window.document, ns));
+
+/*global window, define */
+/*jslint nomen: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true */
+/*
+ */
+/**
+ * #BaseWidget
+ * Prototype class of widget
+ *
+ * ## How to invoke creation of widget from JavaScript
+ *
+ * To build and initialize widget in JavaScript you have to use method {@link ns.engine#instanceWidget} . First argument for method
+ * is HTMLElement, which specifies the element of widget. Second parameter is name of widget to create.
+ *
+ * If you load jQuery before initializing tau library, you can use standard jQuery UI Widget notation.
+ *
+ * ### Examples
+ * #### Build widget from JavaScript
+ *
+ *		@example
+ *		var element = document.getElementById("id"),
+ *			ns.engine.instanceWidget(element, "Button");
+ *
+ * #### Build widget from jQuery
+ *
+ *		@example
+ *		var element = $("#id").button();
+ *
+ * ## How to create new widget
+ *
+ *		@example
+ *		(function (ns) {
+ *			
+ *			 *					var BaseWidget = ns.widget.BaseWidget, // create alias to main objects
+ *						...
+ *						arrayOfElements, // example of private property, common for all instances of widget
+ *						Button = function () { // create local object with widget
+ *							...
+ *						},
+ *						prototype = new BaseWidget(); // add ns.widget.BaseWidget as prototype to widget's object, for better minification this should be assign to local variable and next variable should be assign to prototype of object
+ *
+ *					function closestEnabledButton(element) { // example of private method
+ *						...
+ *					}
+ *					...
+ *
+ *					prototype.options = { //add default options to be read from data- attributes
+ *						theme: "s",
+ *						...
+ *					};
+ *
+ *					prototype._build = function (template, element) { // method called when the widget is being built, should contain all HTML manipulation actions
+ *						...
+ *						return element;
+ *					};
+ *
+ *					prototype._init = function (element) { // method called during initialization of widget, should contain all actions necessary fastOn application start
+ *						...
+ *						return element;
+ *					};
+ *
+ *					prototype._bindEvents = function (element) { // method to bind all events, should contain all event bindings
+ *						...
+ *					};
+ *
+ *					prototype._enable = function (element) { // method called during invocation of enable() method
+ *						...
+ *					};
+ *
+ *					prototype._disable = function (element) { // method called during invocation of disable() method
+ *						...
+ *					};
+ *
+ *					prototype.refresh = function (element) { // example of public method
+ *						...
+ *					};
+ *
+ *					prototype._refresh = function () { // example of protected method
+ *						...
+ *					};
+ *
+ *					Button.prototype = prototype;
+ *
+ *					engine.defineWidget( // define widget
+ *						"Button", //name of widget
+ *						"[data-role='button'],button,[type='button'],[type='submit'],[type='reset']",  //widget's selector
+ *						[ // public methods, here should be list all public method, without that method will not be available
+ *							"enable",
+ *							"disable",
+ *							"refresh"
+ *						],
+ *						Button, // widget's object
+ *						"mobile" // widget's namespace
+ *					);
+ *					ns.widget.Button = Button;
+ *					 *		}(ns));
+ * @author Jadwiga Sosnowska <j.sosnowska@samsung.com>
+ * @author Krzysztof Antoszek <k.antoszek@samsung.com>
+ * @author Tomasz Lukawski <t.lukawski@samsung.com>
+ * @author Przemyslaw Ciezkowski <p.ciezkowski@samsung.com>
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Piotr Karny <p.karny@samsung.com>
+ * @author Michał Szepielak <m.szepielak@samsung.com>
+ * @class ns.widget.BaseWidget
+ */
+(function (document, ns, undefined) {
+	
+				/**
+			 * Alias to Array.slice function
+			 * @method slice
+			 * @member ns.widget.BaseWidget
+			 * @private
+			 * @static
+			 */
+			var slice = [].slice,
+				/**
+				 * Alias to ns.engine
+				 * @property {ns.engine} engine
+				 * @member ns.widget.BaseWidget
+				 * @private
+				 * @static
+				 */
+				engine = ns.engine,
+				engineDataTau = engine.dataTau,
+				util = ns.util,
+				/**
+				 * Alias to {@link ns.event}
+				 * @property {Object} eventUtils
+				 * @member ns.widget.BaseWidget
+				 * @private
+				 * @static
+				 */
+				eventUtils = ns.event,
+				/**
+				 * Alias to {@link ns.util.DOM}
+				 * @property {Object} domUtils
+				 * @private
+				 * @static
+				 */
+				domUtils = util.DOM,
+				/**
+				 * Alias to {@link ns.util.object}
+				 * @property {Object} objectUtils
+				 * @private
+				 * @static
+				 */
+				objectUtils = util.object,
+				BaseWidget = function () {
+					return this;
+				},
+				prototype = {},
+				classes = {
+					focusPrefix: "ui-focus-",
+					blurPrefix: "ui-blur-",
+					up: "up",
+					down: "down",
+					left: "left",
+					right: "right"
+				},
+				/**
+				 * Property with string represent function type 
+				 * (for better minification)
+				 * @property {string} [TYPE_FUNCTION="function"]
+				 * @private
+				 * @static
+				 * @readonly
+				 */
+				TYPE_FUNCTION = "function";
+
+			/**
+			 * Protected method configuring the widget
+			 * @method _configure
+			 * @member ns.widget.BaseWidget
+			 * @protected
+			 * @template
+			 * @internal
+			 */
+			/**
+			 * Configures widget object from definition.
+			 *
+			 * It calls such methods as #\_getCreateOptions and #\_configure.
+			 * @method configure
+			 * @param {Object} definition
+			 * @param {string} definition.name Name of the widget
+			 * @param {string} definition.selector Selector of the widget
+			 * @param {HTMLElement} element Element of widget
+			 * @param {Object} options Configure options
+			 * @member ns.widget.BaseWidget
+			 * @chainable
+			 * @internal
+			 */
+			prototype.configure = function (definition, element, options) {
+				var self = this,
+					definitionName,
+					definitionNamespace;
+				/**
+				 * Object with options for widget
+				 * @property {Object} [options={}]
+				 * @member ns.widget.BaseWidget
+				 */
+				self.options = self.options || {};
+				/**
+				 * Base element of widget
+				 * @property {?HTMLElement} [element=null]
+				 * @member ns.widget.BaseWidget
+				 */
+				self.element = self.element || null;
+				if (definition) {
+					definitionName = definition.name;
+					definitionNamespace = definition.namespace;
+					/**
+					 * Name of the widget
+					 * @property {string} name
+					 * @member ns.widget.BaseWidget
+					 */
+					self.name = definitionName;
+
+					/**
+					 * Name of the widget (in lower case)
+					 * @property {string} widgetName
+					 * @member ns.widget.BaseWidget
+					 */
+					self.widgetName = definitionName;
+
+					/**
+					 * Namespace of widget events
+					 * @property {string} widgetEventPrefix
+					 * @member ns.widget.BaseWidget
+					 */
+					self.widgetEventPrefix = definitionName.toLowerCase();
+
+					/**
+					 * Namespace of the widget
+					 * @property {string} namespace 
+					 * @member ns.widget.BaseWidget
+					 */
+					self.namespace = definitionNamespace;
+
+					/**
+					 * Full name of the widget
+					 * @property {string} widgetFullName
+					 * @member ns.widget.BaseWidget
+					 */
+					self.widgetFullName = ((definitionNamespace ? definitionNamespace + "-" : "") + definitionName).toLowerCase();
+					/**
+					 * Id of widget instance
+					 * @property {string} id
+					 * @member ns.widget.BaseWidget
+					 */
+					self.id = ns.getUniqueId();
+
+					/**
+					 * Widget's selector
+					 * @property {string} selector
+					 * @member ns.widget.BaseWidget
+					 */
+					self.selector = definition.selector;
+				}
+
+				if (typeof self._configure === TYPE_FUNCTION) {
+					self._configure(element);
+				}
+
+				self._getCreateOptions(element);
+
+				objectUtils.fastMerge(self.options, options);
+			};
+
+			/**
+			 * Reads data-* attributes and save to options object.
+			 * @method _getCreateOptions
+			 * @param {HTMLElement} element Base element of the widget
+			 * @return {Object}
+			 * @member ns.widget.BaseWidget
+			 * @protected
+			 */
+			prototype._getCreateOptions = function (element) {
+				var options = this.options,
+					bigRegexp = /[A-Z]/g;
+				if (options !== undefined) {
+					Object.keys(options).forEach(function (option) {
+						// Get value from data-{namespace}-{name} element's attribute
+						// based on widget.options property keys
+						var value = domUtils.getNSData(element, (option.replace(bigRegexp, function (c) {
+							return "-" + c.toLowerCase();
+						})));
+
+						if (value !== null) {
+							options[option] = value;
+						}
+					});
+				}
+				return options;
+			};
+			/**
+			 * Protected method building the widget
+			 * @method _build
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement} widget's element
+			 * @member ns.widget.BaseWidget
+			 * @protected
+			 * @template
+			 */
+			/**
+			 * Builds widget.
+			 *
+			 * It calls method #\_build.
+			 *
+			 * Before starting building process, the event beforecreate with
+			 * proper prefix defined in variable widgetEventPrefix is triggered.
+			 * @method build
+			 * @param {HTMLElement} element Element of widget before building process
+			 * @return {HTMLElement} Element of widget after building process
+			 * @member ns.widget.BaseWidget
+			 * @internal
+			 */
+			prototype.build = function (element) {
+				var self = this,
+					id,
+					node,
+					dataBuilt = element.getAttribute(engineDataTau.built),
+					dataName = element.getAttribute(engineDataTau.name);
+
+				eventUtils.trigger(element, self.widgetEventPrefix + "beforecreate");
+
+				id = element.id;
+				if (id) {
+					self.id = id;
+				} else {
+					element.id = self.id;
+				}
+
+				if (typeof self._build === TYPE_FUNCTION) {
+					node = self._build(element);
+				} else {
+					node = element;
+				}
+
+				// Append current widget name to data-tau-built and data-tau-name attributes
+				dataBuilt = !dataBuilt ? self.name : dataBuilt + engineDataTau.separator + self.name;
+				dataName = !dataName ? self.name : dataName + engineDataTau.separator + self.name;
+
+				element.setAttribute(engineDataTau.built, dataBuilt);
+				element.setAttribute(engineDataTau.name, dataName);
+
+				return node;
+			};
+
+			/**
+			 * Protected method initializing the widget
+			 * @method _init
+			 * @param {HTMLElement} element
+			 * @member ns.widget.BaseWidget
+			 * @template
+			 * @protected
+			 */
+			/**
+			 * Initializes widget.
+			 *
+			 * It calls method #\_init.
+			 * @method init
+			 * @param {HTMLElement} element Element of widget before initialization
+			 * @member ns.widget.BaseWidget
+			 * @chainable
+			 * @internal
+			 */
+			prototype.init = function (element) {
+				var self = this;
+				self.id = element.id;
+
+				if (typeof self._init === TYPE_FUNCTION) {
+					self._init(element);
+				}
+
+				if (element.getAttribute("disabled") || self.options.disabled === true) {
+					self.disable();
+				} else {
+					self.enable();
+				}
+
+				return self;
+			};
+
+			/**
+			 * Bind widget events attached in init mode
+			 * @method _bindEvents
+			 * @param {HTMLElement} element Base element of widget
+			 * @member ns.widget.BaseWidget
+			 * @template
+			 * @protected
+			 */
+			/**
+			 * Binds widget events.
+			 *
+			 * It calls such methods as #\_buildBindEvents and #\_bindEvents.
+			 * At the end of binding process, the event "create" with proper
+			 * prefix defined in variable widgetEventPrefix is triggered.
+			 * @method bindEvents
+			 * @param {HTMLElement} element Base element of the widget
+			 * @param {boolean} onlyBuild Inform about the type of bindings: build/init
+			 * @member ns.widget.BaseWidget
+			 * @chainable
+			 * @internal
+			 */
+			prototype.bindEvents = function (element, onlyBuild) {
+				var self = this,
+					dataBound = element.getAttribute(engineDataTau.bound);
+
+				if (!onlyBuild) {
+					dataBound = !dataBound ? self.name : dataBound + engineDataTau.separator + self.name;
+					element.setAttribute(engineDataTau.bound, dataBound);
+				}
+				if (typeof self._buildBindEvents === TYPE_FUNCTION) {
+					self._buildBindEvents(element);
+				}
+				if (!onlyBuild && typeof self._bindEvents === TYPE_FUNCTION) {
+					self._bindEvents(element);
+				}
+
+				self.trigger(self.widgetEventPrefix + "create", self);
+
+				return self;
+			};
+
+			function removeAnimationClasses(element, prefix) {
+				var elementClasses = element.classList;
+				elementClasses.remove(prefix + classes.left);
+				elementClasses.remove(prefix + classes.up);
+				elementClasses.remove(prefix + classes.right);
+				elementClasses.remove(prefix + classes.down);
+			}
+
+			prototype._prepareAnimation = function(eventType, direction) {
+				var element = this.element;
+
+				switch(eventType) {
+					case "focus":
+						removeAnimationClasses(element, classes.blurPrefix);
+						removeAnimationClasses(element, classes.focusPrefix);
+						element.classList.add(classes.focusPrefix + direction);
+						break;
+					case "blur":
+						removeAnimationClasses(element, classes.focusPrefix);
+						removeAnimationClasses(element, classes.blurPrefix);
+						element.classList.add(classes.blurPrefix + direction);
+						break;
+				}
+			};
+			/**
+			 * Focus widget's element.
+			 *
+			 * This function calls function focus on element and if it is known
+			 * the direction of event, the proper css classes are added/removed.
+			 * @method _focus
+			 * @param {"up"|"down"|"left"|"right} positionFrom The direction of event.
+			 * For example, if this parameter has value "down", it means that the movement
+			 * comes from the top (eg. down arrow was pressed on keyboard).
+			 * @member ns.widget.BaseWidget
+			 */
+			prototype._focus = function (positionFrom) {
+				var element = this.element;
+
+				if (typeof this._prepareAnimation === TYPE_FUNCTION) {
+					this._prepareAnimation("focus", positionFrom);
+				}
+				this.element.focus();
+			};
+
+			/**
+			 * Blur widget's element.
+			 *
+			 * This function calls function blur on element and if it is known
+			 * the direction of event, the proper css classes are added/removed.
+			 * @method _blur
+			 * @param {"up"|"down"|"left"|"right} positionFrom
+			 * @member ns.widget.BaseWidget
+			 */
+			prototype._blur = function (positionFrom) {
+				var element = this.element;
+
+				if (typeof this._prepareAnimation === TYPE_FUNCTION) {
+					this._prepareAnimation("blur", positionFrom);
+				}
+				element.blur();
+			};
+
+			/**
+			 * Protected method destroying the widget
+			 * @method _destroy
+			 * @template
+			 * @protected
+			 * @member ns.widget.BaseWidget
+			 */
+			/**
+			 * Destroys widget.
+			 *
+			 * It calls method #\_destroy.
+			 *
+			 * At the end of destroying process, the event "destroy" with proper
+			 * prefix defined in variable widgetEventPrefix is triggered and
+			 * the binding set in engine is removed.
+			 * @method destroy
+			 * @param {HTMLElement} element Base element of the widget
+			 * @member ns.widget.BaseWidget
+			 */
+			prototype.destroy = function (element) {
+				var self = this;
+				element = element || self.element;
+				if (typeof self._destroy === TYPE_FUNCTION) {
+					self._destroy(element);
+				}
+				if (self.element) {
+					self.trigger(self.widgetEventPrefix + "destroy");
+				}
+				if (element) {
+					engine.removeBinding(element, self.name);
+				}
+			};
+
+			/**
+			 * Protected method disabling the widget
+			 * @method _disable
+			 * @protected
+			 * @member ns.widget.BaseWidget
+			 * @template
+			 */
+			/**
+			 * Disables widget.
+			 *
+			 * It calls method #\_disable.
+			 * @method disable
+			 * @member ns.widget.BaseWidget
+			 * @chainable
+			 */
+			prototype.disable = function () {
+				var self = this,
+					element = self.element,
+					args = slice.call(arguments);
+
+				if (typeof self._disable === TYPE_FUNCTION) {
+					args.unshift(element);
+					self._disable.apply(self, args);
+				}
+				return this;
+			};
+
+			/**
+			 * Protected method enabling the widget
+			 * @method _enable
+			 * @protected
+			 * @member ns.widget.BaseWidget
+			 * @template
+			 */
+			/**
+			 * Enables widget.
+			 *
+			 * It calls method #\_enable.
+			 * @method enable
+			 * @member ns.widget.BaseWidget
+			 * @chainable
+			 */
+			prototype.enable = function () {
+				var self = this,
+					element = self.element,
+					args = slice.call(arguments);
+
+				if (typeof self._enable === TYPE_FUNCTION) {
+					args.unshift(element);
+					self._enable.apply(self, args);
+				}
+				return this;
+			};
+
+			/**
+			 * Protected method causing the widget to refresh
+			 * @method _refresh
+			 * @protected
+			 * @member ns.widget.BaseWidget
+			 * @template
+			 */
+			/**
+			 * Refreshes widget.
+			 *
+			 * It calls method #\_refresh.
+			 * @method refresh
+			 * @member ns.widget.BaseWidget
+			 * @chainable
+			 */
+			prototype.refresh = function () {
+				var self = this;
+				if (typeof self._refresh === TYPE_FUNCTION) {
+					self._refresh.apply(self, arguments);
+				}
+				return self;
+			};
+
+
+			/**
+			 * Gets or sets options of the widget.
+			 *
+			 * This method can work in many context.
+			 *
+			 * If first argument is type of object them, method set values for options given in object. Keys of object are names of options and values from object are values to set.
+			 *
+			 * If you give only one string argument then method return value for given option.
+			 *
+			 * If you give two arguments and first argument will be a string then second argument will be intemperate as value to set.
+			 *
+			 * @method option
+			 * @param {string|Object} [name] name of option
+			 * @param {*} [value] value to set
+			 * @member ns.widget.BaseWidget
+			 * @return {*} return value of option or undefined if method is called in setter context
+			 */
+			prototype.option = function (/*name, value*/) {
+				var self = this,
+					args = slice.call(arguments),
+					firstArgument = args.shift(),
+					secondArgument = args.shift(),
+					key,
+					result,
+					partResult,
+					refresh = false;
+				if (typeof firstArgument === "string") {
+					result = self._oneOption(firstArgument, secondArgument);
+					if (firstArgument !== undefined && secondArgument !== undefined) {
+						refresh = result;
+						result = undefined;
+					}
+				} else if (typeof firstArgument === "object") {
+					for (key in firstArgument) {
+						if (firstArgument.hasOwnProperty(key)) {
+							partResult = self._oneOption(key, firstArgument[key]);
+							if (key !== undefined && firstArgument[key] !== undefined) {
+								refresh = refresh || partResult;
+							}
+						}
+					}
+				}
+				if (refresh) {
+					self.refresh();
+				}
+				return result;
+			};
+
+			/**
+			 * Gets or sets one option of the widget.
+			 *
+			 * @method _oneOption
+			 * @param {string} field
+			 * @param {*} value
+			 * @member ns.widget.BaseWidget
+			 * @return {*}
+			 * @protected
+			 */
+			prototype._oneOption = function (field, value) {
+				var self = this,
+					methodName,
+					refresh = false;
+				if (value === undefined) {
+					methodName = "_get" + (field[0].toUpperCase() + field.slice(1));
+					if (typeof self[methodName] === TYPE_FUNCTION) {
+						return self[methodName]();
+					}
+					return self.options[field];
+				}
+				methodName = "_set" + (field[0].toUpperCase() + field.slice(1));
+				if (typeof self[methodName] === TYPE_FUNCTION) {
+					self[methodName](self.element, value);
+				} else {
+					self.options[field] = value;
+					if (self.element) {
+						self.element.setAttribute("data-" + (field.replace(/[A-Z]/g, function (c) {
+							return "-" + c.toLowerCase();
+						})), value);
+						refresh = true;
+					}
+				}
+				return refresh;
+			};
+
+			/**
+			 * Returns true if widget has bounded events.
+			 *
+			 * This methods enables to check if the widget has bounded 
+			 * events through the {@link ns.widget.BaseWidget#bindEvents} method.
+			 * @method isBound
+			 * @param {string} [type] Type of widget
+			 * @member ns.widget.BaseWidget
+			 * @internal
+			 * @return {boolean} true if events are bounded
+			 */
+			prototype.isBound = function (type) {
+				var element = this.element;
+				type = type || this.name;
+				return element && element.hasAttribute(engineDataTau.bound) && element.getAttribute(engineDataTau.bound).indexOf(type) > -1;
+			};
+
+			/**
+			 * Returns true if widget is built.
+			 *
+			 * This methods enables to check if the widget was built 
+			 * through the {@link ns.widget.BaseWidget#build} method.
+			 * @method isBuilt
+			 * @param {string} [type] Type of widget
+			 * @member ns.widget.BaseWidget
+			 * @internal
+			 * @return {boolean} true if the widget was built
+			 */
+			prototype.isBuilt = function (type) {
+				var element = this.element;
+				type = type || this.name;
+				return element && element.hasAttribute(engineDataTau.built) && element.getAttribute(engineDataTau.built).indexOf(type) > -1;
+			};
+
+			/**
+			 * Protected method getting the value of widget
+			 * @method _getValue
+			 * @return {*}
+			 * @member ns.widget.BaseWidget
+			 * @template
+			 * @protected
+			 */
+			/**
+			 * Protected method setting the value of widget
+			 * @method _setValue
+			 * @param {*} value
+			 * @return {*}
+			 * @member ns.widget.BaseWidget
+			 * @template
+			 * @protected
+			 */
+			/**
+			 * Gets or sets value of the widget.
+			 *
+			 * @method value
+			 * @param {*} [value] New value of widget
+			 * @member ns.widget.BaseWidget
+			 * @return {*}
+			 */
+			prototype.value = function (value) {
+				var self = this;
+				if (value !== undefined) {
+					if (typeof self._setValue === TYPE_FUNCTION) {
+						return self._setValue(value);
+					}
+					return self;
+				}
+				if (typeof self._getValue === TYPE_FUNCTION) {
+					return self._getValue();
+				}
+				return self;
+			};
+
+			/**
+			 * Triggers an event on widget's element.
+			 *
+			 * @method trigger
+			 * @param {string} eventName The name of event to trigger
+			 * @param {?*} [data] additional Object to be carried with the event
+			 * @param {boolean} [bubbles=true] Indicating whether the event
+			 * bubbles up through the DOM or not
+			 * @param {boolean} [cancelable=true] Indicating whether
+			 * the event is cancelable
+			 * @member ns.widget.BaseWidget
+			 * @return {boolean} False, if any callback invoked preventDefault on event object
+			 */
+			prototype.trigger = function (eventName, data, bubbles, cancelable) {
+				return eventUtils.trigger(this.element, eventName, data, bubbles, cancelable);
+			};
+
+			/**
+			 * Adds event listener to widget's element.
+			 * @method on
+			 * @param {string} eventName The name of event
+			 * @param {Function} listener Function called after event will be trigger
+			 * @param {boolean} [useCapture=false] useCapture Parameter of addEventListener
+			 * @member ns.widget.BaseWidget
+			 */
+			prototype.on = function (eventName, listener, useCapture) {
+				eventUtils.on(this.element, eventName, listener, useCapture);
+			};
+
+			/**
+			 * Removes event listener from  widget's element.
+			 * @method off
+			 * @param {string} eventName The name of event
+			 * @param {Function} listener Function call after event will be trigger
+			 * @param {boolean} [useCapture=false] useCapture Parameter of addEventListener
+			 * @member ns.widget.BaseWidget
+			 */
+			prototype.off = function (eventName, listener, useCapture) {
+				eventUtils.off(this.element, eventName, listener, useCapture);
+			};
+
+			BaseWidget.prototype = prototype;
+
+			// definition
+			ns.widget.BaseWidget = BaseWidget;
+
+			}(window.document, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*
+ * #Namespace For Widgets
+ * @author Krzysztof Antoszek <k.antoszek@samsung.com>
+ * @class ns.widget
+ */
+(function (document, ns) {
+	
+				ns.widget.core = ns.widget.core || {};
+			}(window.document, ns));
+
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true, plusplus: true */
+/**
+ * # Popup Widget
+ *
+ * @author Hyunkook Cho <hk0713.cho@samsung.com>
+ * @class ns.widget.core.Popup
+ * @extends ns.widget.Popup
+ */
+(function (ns) {
+	
+					/**
+				 * Alias for {@link ns.widget.BaseWidget}
+				 * @property {Function} BaseWidget
+				 * @member ns.widget.core.Popup
+				 * @private
+				 */
+			var BaseWidget = ns.widget.BaseWidget,
+				/**
+				 * Alias for class ns.engine
+				 * @property {ns.engine} engine
+				 * @member ns.widget.core.Popup
+				 * @private
+				 */
+				engine = ns.engine,
+				/**
+				 * Alias for class ns.util.object
+				 * @property {Object} objectUtils
+				 * @member ns.widget.core.Popup
+				 * @private
+				 */
+				objectUtils = ns.util.object,
+				/**
+				 * Alias for class ns.util.deferred
+				 * @property {Object} UtilDeferred
+				 * @member ns.widget.core.Popup
+				 * @private
+				 */
+				UtilDeferred = ns.util.deferred,
+				/**
+				 * Alias for class ns.util.selectors
+				 * @property {Object} utilSelector
+				 * @member ns.widget.core.Popup
+				 * @private
+				 */
+				utilSelector = ns.util.selectors,
+
+				Popup = function () {
+					var self = this,
+						ui = {};
+
+					self.selectors = selectors;
+					self.options = objectUtils.merge({}, Popup.defaults, {
+						fullSize: ns.getConfig("popupFullSize", Popup.defaults.fullSize),
+						enablePopupScroll: ns.getConfig("enablePopupScroll",Popup.defaults.enablePopupScroll)
+					});
+					/**
+					 * Popup state flag
+					 * @property {0|1|2|3} [state=null]
+					 * @member ns.widget.core.Popup
+					 * @private
+					 */
+					self.state = states.CLOSED;
+
+					ui.overlay = null;
+					ui.header = null;
+					ui.footer = null;
+					ui.content = null;
+					ui.container = null;
+					self._ui = ui;
+
+					// event callbacks
+					self._callbacks = {};
+				},
+				/**
+				 * Object with default options
+				 * @property {Object} defaults
+				 * @property {string} [options.transition="none"] Sets the default transition for the popup.
+				 * @property {string} [options.positionTo="window"] Sets the element relative to which the popup will be centered.
+				 * @property {boolean} [options.dismissible=true] Sets whether to close popup when a popup is open to support the back button.
+				 * @property {boolean} [options.overlay=true] Sets whether to show overlay when a popup is open.
+				 * @property {boolean|string} [options.header=false] Sets content of header.
+				 * @property {boolean|string} [options.footer=false] Sets content of footer.
+				 * @property {string} [overlayClass=""] Sets the custom class for the popup background, which covers the entire window.
+				 * @property {boolean} [options.history=true] Sets whether to alter the url when a popup is open to support the back button.
+				 * @member ns.widget.core.Popup
+				 * @static
+				 */
+				defaults = {
+					transition: "none",
+					dismissible: true,
+					overlay: true,
+					header: false,
+					footer: false,
+					overlayClass: "",
+					history: true,
+					fullSize: false,
+					enablePopupScroll: null
+				},
+				states = {
+					DURING_OPENING: 0,
+					OPENED: 1,
+					DURING_CLOSING: 2,
+					CLOSED: 3
+				},
+				CLASSES_PREFIX = "ui-popup",
+				/**
+				 * Dictionary for popup related css class names
+				 * @property {Object} classes
+				 * @member ns.widget.core.Popup
+				 * @static
+				 */
+				classes = {
+					popup: CLASSES_PREFIX,
+					active: CLASSES_PREFIX + "-active",
+					overlay: CLASSES_PREFIX + "-overlay",
+					header: CLASSES_PREFIX + "-header",
+					footer: CLASSES_PREFIX + "-footer",
+					content: CLASSES_PREFIX + "-content",
+					wrapper: CLASSES_PREFIX + "-wrapper",
+					build: "ui-build",
+					popupScroll: "ui-scroll-on",
+					fixed: "ui-fixed"
+				},
+				/**
+				 * Dictionary for popup related selectors
+				 * @property {Object} selectors
+				 * @member ns.widget.core.Popup
+				 * @static
+				 */
+				selectors = {
+					header: "." + classes.header,
+					content: "." + classes.content,
+					footer: "." + classes.footer
+				},
+				EVENTS_PREFIX = "popup",
+				/**
+				 * Dictionary for popup related events
+				 * @property {Object} events
+				 * @member ns.widget.core.Popup
+				 * @static
+				 */
+				events = {
+					/**
+					 * Triggered when the popup has been created in the DOM (via ajax or other) but before all widgets have had an opportunity to enhance the contained markup.
+					 * @event popupshow
+					 * @member ns.widget.core.Popup
+					 */
+					show: EVENTS_PREFIX + "show",
+					/**
+					 * Triggered on the popup after the transition animation has completed.
+					 * @event popuphide
+					 * @member ns.widget.core.Popup
+					 */
+					hide: EVENTS_PREFIX + "hide",
+					/**
+					 * Triggered on the popup we are transitioning to, before the actual transition animation is kicked off.
+					 * @event popupbeforeshow
+					 * @member ns.widget.core.Popup
+					 */
+					before_show: EVENTS_PREFIX + "beforeshow",
+					/**
+					 * Triggered on the popup we are transitioning away from, before the actual transition animation is kicked off.
+					 * @event popupbeforehide
+					 * @member ns.widget.core.Popup
+					 */
+					before_hide: EVENTS_PREFIX + "beforehide"
+				},
+
+				prototype = new BaseWidget();
+
+			Popup.classes = classes;
+			Popup.events = events;
+			Popup.defaults = defaults;
+
+			/**
+			 * Build the content of popup
+			 * @method _buildContent
+			 * @param {HTMLElement} element
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._buildContent = function (element) {
+				var self = this,
+					ui = self._ui,
+					selectors = self.selectors,
+					content = ui.content || element.querySelector(selectors.content),
+					footer = ui.footer || element.querySelector(selectors.footer),
+					elementChildren = [].slice.call(element.childNodes),
+					elementChildrenLength = elementChildren.length,
+					i,
+					node;
+
+				if (!content) {
+					content = document.createElement("div");
+					content.className = classes.content;
+					for (i = 0; i < elementChildrenLength; ++i) {
+						node = elementChildren[i];
+						if (node !== ui.footer && node !== ui.header) {
+							content.appendChild(node);
+						}
+					}
+					element.insertBefore(content, footer);
+				}
+				content.classList.add(classes.content);
+				ui.content = content;
+			};
+
+			/**
+			 * Build the header of popup
+			 * @method _buildHeader
+			 * @param {HTMLElement} element
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._buildHeader = function (element) {
+				var self = this,
+					ui = self._ui,
+					options = self.options,
+					selectors = self.selectors,
+					content = ui.content || element.querySelector(selectors.content),
+					header = ui.header || element.querySelector(selectors.header);
+				if (!header && options.header !== false) {
+					header = document.createElement("div");
+					header.className = classes.header;
+					if (typeof options.header !== "boolean") {
+						header.innerHTML = options.header;
+					}
+					element.insertBefore(header, content);
+				}
+				if (header) {
+					header.classList.add(classes.header);
+				}
+				ui.header = header;
+			};
+
+			/**
+			 * Set the header of popup.
+			 * This function is called by function "option" when the option "header" is set.
+			 * @method _setHeader
+			 * @param {HTMLElement} element
+			 * @param {boolean|string} value
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._setHeader = function (element, value) {
+				var self = this,
+					ui = self._ui,
+					header = ui.header;
+				if (header) {
+					header.parentNode.removeChild(header);
+					ui.header = null;
+				}
+				self.options.header = value;
+				self._buildHeader(ui.container);
+			};
+
+			/**
+			 * Build the footer of popup
+			 * @method _buildFooter
+			 * @param {HTMLElement} element
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._buildFooter = function (element) {
+				var self = this,
+					ui = self._ui,
+					options = self.options,
+					footer = ui.footer || element.querySelector(self.selectors.footer);
+				if (!footer && options.footer !== false) {
+					footer = document.createElement("div");
+					footer.className = classes.footer;
+					if (typeof options.footer !== "boolean") {
+						footer.innerHTML = options.footer;
+					}
+					element.appendChild(footer);
+				}
+				if (footer) {
+					footer.classList.add(classes.footer);
+				}
+				ui.footer = footer;
+			};
+
+			/**
+			 * Set the footer of popup.
+			 * This function is called by function "option" when the option "footer" is set.
+			 * @method _setFooter
+			 * @param {HTMLElement} element
+			 * @param {boolean|string} value
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._setFooter = function (element, value) {
+				var self = this,
+					ui = self._ui,
+					footer = ui.footer;
+				if (footer) {
+					footer.parentNode.removeChild(footer);
+					ui.footer = null;
+				}
+				self.options.footer = value;
+				self._buildFooter(ui.container);
+			};
+
+			/**
+			 * Build structure of Popup widget
+			 * @method _build
+			 * @param {HTMLElement} element of popup
+			 * @return {HTMLElement}
+			 * @protected
+			 * @member ns.widget.Popup
+			 */
+			prototype._build = function (element) {
+				var self = this,
+					ui = self._ui,
+					wrapper,
+					child = element.firstChild;
+
+				// set class for element
+				element.classList.add(classes.popup);
+
+				// create wrapper
+				wrapper = document.createElement("div");
+				wrapper.classList.add(classes.wrapper);
+				ui.wrapper = wrapper;
+				ui.container = wrapper;
+				// move all children to wrapper
+				while (child) {
+					wrapper.appendChild(child);
+					child = element.firstChild;
+				}
+				// add wrapper and arrow to popup element
+				element.appendChild(wrapper);
+
+				// build header, footer and content
+				this._buildHeader(ui.container);
+				this._buildFooter(ui.container);
+				this._buildContent(ui.container);
+
+				// set overlay
+				this._setOverlay(element, this.options.overlay);
+
+				return element;
+			};
+
+			/**
+			 * Set overlay
+			 * @method _setOverlay
+			 * @param {HTMLElement} element
+			 * @param {boolean} enable
+			 * @protected
+			 * @member ns.widget.Popup
+			 */
+			prototype._setOverlay = function(element, enable) {
+				var self = this,
+					overlayClass = self.options.overlayClass,
+					ui = self._ui,
+					overlay = ui.overlay;
+
+				// create overlay
+				if (enable) {
+					if (!overlay) {
+						overlay = document.createElement("div");
+						element.parentNode.insertBefore(overlay, element);
+						ui.overlay = overlay;
+					}
+					overlay.className = classes.overlay + (overlayClass ? " " + overlayClass : "");
+				} else if (overlay) {
+					overlay.parentNode.removeChild(overlay);
+					ui.overlay = null;
+				}
+			};
+
+			/**
+			 * Returns the state of the popup
+			 * @method _isActive
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._isActive = function () {
+				var state = this.state;
+				return state === states.DURING_OPENING || state === states.OPENED;
+			};
+
+			/**
+			 * Returns true if popup is already opened and visible
+			 * @method _isActive
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._isOpened = function () {
+				return this.state === states.OPENED;
+			};
+
+			/**
+			 * Init widget
+			 * @method _init
+			 * @param {HTMLElement} element
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._init = function(element) {
+				var self = this,
+					selectors = self.selectors,
+					ui = self._ui;
+
+				ui.header = ui.header || element.querySelector(selectors.header);
+				ui.footer = ui.footer || element.querySelector(selectors.footer);
+				ui.content = ui.content || element.querySelector(selectors.content);
+				ui.wrapper = ui.wrapper || element.querySelector("." + classes.wrapper);
+				ui.container = ui.wrapper || element;
+
+				// @todo - use selector from page's definition in engine
+				ui.page = utilSelector.getClosestByClass(element, "ui-page") || window;
+			};
+
+			/**
+			 * Set the state of the popup
+			 * @method _setActive
+			 * @param {boolean} active
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._setActive = function (active) {
+				var self = this,
+					activeClass = classes.active,
+					elementClassList = self.element.classList,
+					route = engine.getRouter().getRoute("popup"),
+					options = self.options;
+
+				// NOTE: popup's options object is stored in window.history at the router module,
+				// and this window.history can't store DOM element object.
+				if (typeof options.positionTo !== "string") {
+					options.positionTo = null;
+				}
+
+				// set state of popup and add proper class
+				if (active) {
+					// set global variable
+					route.setActive(self, options);
+					// add proper class
+					elementClassList.add(activeClass);
+					// set state of popup 	358
+					self.state = states.OPENED;
+				} else {
+					// no popup is opened, so set global variable on "null"
+					route.setActive(null, options);
+					// remove proper class
+					elementClassList.remove(activeClass);
+					// set state of popup
+					self.state = states.CLOSED;
+				}
+			};
+
+			/**
+			 * Bind events
+			 * @method _bindEvents
+			 * @param {HTMLElement} element
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._bindEvents = function (element) {
+				var self = this;
+
+				self._ui.page.addEventListener("pagebeforehide", self, false);
+				window.addEventListener("resize", self, false);
+				self._bindOverlayEvents();
+			};
+
+			/**
+			 * Bind "click" event for overlay
+			 * @method _bindOverlayEvents
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._bindOverlayEvents = function () {
+				var overlay = this._ui.overlay;
+				if (overlay) {
+					overlay.addEventListener("click", this, false);
+				}
+			};
+
+			/**
+			 * Unbind "click" event for overlay
+			 * @method _bindOverlayEvents
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._unbindOverlayEvents = function () {
+				var overlay = this._ui.overlay;
+				if (overlay) {
+					overlay.removeEventListener("click", this, false);
+				}
+			};
+
+			/**
+			 * Unbind events
+			 * @method _bindEvents
+			 * @param {HTMLElement} element
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._unbindEvents = function (element) {
+				var self = this;
+				self._ui.page.removeEventListener("pagebeforehide", self, false);
+				window.removeEventListener("resize", self, false);
+				self._unbindOverlayEvents();
+			};
+
+			/**
+			 * Layouting popup structure
+			 * @method layout
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._layout = function (element) {
+				var self = this,
+					elementClassList = element.classList,
+					ui = self._ui,
+					wrapper = ui.wrapper,
+					header = ui.header,
+					footer = ui.footer,
+					content = ui.content,
+					headerHeight = 0,
+					footerHeight = 0;
+
+				if (self.options.enablePopupScroll === true) {
+					element.classList.add(classes.popupScroll);
+				} else {
+					element.classList.remove(classes.popupScroll);
+				}
+
+				if (elementClassList.contains(classes.popupScroll)) {
+					elementClassList.add(classes.build);
+
+					if (header) {
+						headerHeight = header.offsetHeight;
+						if (header.classList.contains(classes.fixed)) {
+							content.style.marginTop = headerHeight + "px";
+						}
+					}
+					if (footer) {
+						footerHeight = footer.offsetHeight;
+						if (footer.classList.contains(classes.fixed)) {
+							content.style.marginBottom = footerHeight + "px";
+						}
+					}
+
+					wrapper.style.height = Math.min(content.offsetHeight + headerHeight + footerHeight, element.offsetHeight) + "px";
+
+					elementClassList.remove(classes.build);
+				}
+
+				if (self.options.fullSize && !elementClassList.contains("ui-popup-toast") && !elementClassList.contains("ui-ctxpopup")) {
+					wrapper.style.height = window.innerHeight + "px";
+				}
+			};
+
+			/**
+			 * Open the popup
+			 * @method open
+			 * @param {Object=} [options]
+			 * @param {string=} [options.transition] options.transition
+			 * @member ns.widget.core.Popup
+			 */
+			prototype.open = function (options) {
+				var self = this,
+					newOptions = objectUtils.merge(self.options, options);
+				if (!self._isActive()) {
+					if (!newOptions.dismissible) {
+						engine.getRouter().lock();
+					}
+					self._show(newOptions);
+				}
+			};
+
+			/**
+			 * Close the popup
+			 * @method close
+			 * @param {Object=} [options]
+			 * @param {string=} [options.transition]
+			 * @member ns.widget.core.Popup
+			 */
+			prototype.close = function (options) {
+				var self = this,
+					newOptions = objectUtils.merge(self.options, options);
+
+				if (self._isActive()) {
+					if (!newOptions.dismissible) {
+						engine.getRouter().unlock();
+					}
+					self._hide(newOptions);
+				}
+			};
+
+			/**
+			 * Show popup.
+			 * @method _show
+			 * @param {object} options
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._show = function (options) {
+				var self = this,
+					transitionOptions = objectUtils.merge({}, options),
+					deferred;
+
+				// layouting
+				self._layout(self.element);
+
+				// change state of popup
+				self.state = states.DURING_OPENING;
+				// set transiton
+				transitionOptions.ext = " in ";
+
+				self.trigger(events.before_show);
+				// start opening animation
+				self._transition(transitionOptions, self._onShow.bind(self));
+			};
+
+			/**
+			 * Show popup
+			 * @method _onShow
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._onShow = function() {
+				var self = this,
+					overlay = self._ui.overlay;
+				if (overlay) {
+					overlay.style.display = "block";
+				}
+				self._setActive(true);
+				self.trigger(events.show);
+			};
+
+			/**
+			 * Hide popup
+			 * @method _hide
+			 * @param {object} options
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._hide = function (options) {
+				var self = this,
+					isOpened = self._isOpened();
+
+				// change state of popup
+				self.state = states.DURING_CLOSING;
+
+				self.trigger(events.before_hide);
+
+				if (isOpened) {
+					// popup is opened, so we start closing animation
+					options.ext = " out ";
+					self._transition(options, self._onHide.bind(self));
+				} else {
+					// popup is active, but not opened yet (DURING_OPENING), so
+					// we stop opening animation
+					self._callbacks.transitionDeferred.reject();
+					self._callbacks.animationEnd();
+					// and set popup as inactive
+					self._onHide();
+				}
+			};
+
+			/**
+			 * Hide popup
+			 * @method _onHide
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._onHide = function() {
+				var self = this,
+					overlay = self._ui.overlay;
+				if (overlay) {
+					overlay.style.display = "";
+				}
+				self._setActive(false);
+				self.trigger(events.hide);
+			};
+
+			/**
+			 * Handle events
+			 * @method handleEvent
+			 * @param {Event} event
+			 * @member ns.widget.core.Popup
+			 */
+			prototype.handleEvent = function(event) {
+				var self = this;
+				switch(event.type) {
+					case "pagebeforehide":
+						self.close({transition: "none"});
+						break;
+					case "resize":
+						self._onResize(event);
+						break;
+					case "click":
+						if ( event.target === self._ui.overlay ) {
+							self._onClickOverlay(event);
+						}
+						break;
+				}
+			};
+
+			/**
+			 * Refresh structure
+			 * @method _refresh
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._refresh = function() {
+				var self = this;
+				self._unbindOverlayEvents();
+				self._setOverlay(self.element, self.options.overlay);
+				self._bindOverlayEvents();
+			};
+
+			/**
+			 * Callback function fires after clicking on overlay.
+			 * @method _onClickOverlay
+			 * @param {Event} event
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._onClickOverlay = function(event) {
+				var options = this.options;
+
+				event.preventDefault();
+				event.stopPropagation();
+
+				if (options.dismissible) {
+					this.close();
+				}
+			};
+
+			/**
+			 * Callback function fires on resizing
+			 * @method _onResize
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._onResize = function() {
+				if (this._isOpened()) {
+					this._refresh();
+				}
+			};
+
+			function clearAnimation(self, transitionClass, deferred) {
+				var element = self.element,
+					elementClassList = element.classList,
+					overlay = self._ui.overlay,
+					animationEndCallback = self._callbacks.animationEnd;
+
+				// remove callbacks on animation events
+				element.removeEventListener("animationend", animationEndCallback, false);
+				element.removeEventListener("webkitAnimationEnd", animationEndCallback, false);
+
+				// clear classes
+				transitionClass.split(" ").forEach(function (currentClass) {
+					currentClass = currentClass.trim();
+					if (currentClass.length > 0) {
+						elementClassList.remove(currentClass);
+						if (overlay) {
+							overlay.classList.remove(currentClass);
+						}
+					}
+				});
+				if (deferred.state() === "pending") {
+					// we resolve only pending (not rejected) deferred
+					deferred.resolve();
+				}
+			}
+
+			function setTransitionDeferred(self, resolve) {
+				var deferred = new UtilDeferred();
+
+				deferred.then(function() {
+					if (deferred === self._callbacks.transitionDeferred) {
+						resolve();
+					}
+				});
+
+				self._callbacks.transitionDeferred = deferred;
+				return deferred;
+			}
+			/**
+			 * Animate popup opening/closing
+			 * @method _transition
+			 * @protected
+			 * @param {Object} [options]
+			 * @param {string=} [options.transition]
+			 * @param {string=} [options.ext]
+			 * @param {?Function} [resolve]
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._transition = function (options, resolve) {
+				var self = this,
+					transition = options.transition || self.options.transition || "none",
+					transitionClass = transition + options.ext,
+					element = self.element,
+					overlay = self._ui.overlay,
+					elementClassList = element.classList,
+					deferred,
+					animationEndCallback;
+
+				deferred = setTransitionDeferred(self, resolve);
+
+				if (transition !== "none") {
+					// set animationEnd callback
+					animationEndCallback = clearAnimation.bind(null, self, transitionClass, deferred);
+					self._callbacks.animationEnd = animationEndCallback;
+
+					// add animation callbacks
+					element.addEventListener("animationend", animationEndCallback, false);
+					element.addEventListener("webkitAnimationEnd", animationEndCallback, false);
+					// add transition classes
+					transitionClass.split(" ").forEach(function (currentClass) {
+						currentClass = currentClass.trim();
+						if (currentClass.length > 0) {
+							elementClassList.add(currentClass);
+							if (overlay) {
+								overlay.classList.add(currentClass);
+							}
+						}
+					});
+				} else {
+					window.setTimeout(deferred.resolve, 0);
+				}
+				return deferred;
+			};
+
+			/**
+			 * Destroy popup
+			 * @method _destroy
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._destroy = function() {
+				var self = this,
+					element = self.element;
+
+				self._unbindEvents(element);
+				self._setOverlay(element, false);
+			};
+
+			Popup.prototype = prototype;
+
+			ns.widget.core.Popup = Popup;
+
+			engine.defineWidget(
+				"Popup",
+				"[data-role='popup'], .ui-popup",
+				[
+					"open",
+					"close",
+					"reposition"
+				],
+				Popup,
+				"core"
+			);
+			}(ns));
+
+/*global window, define */
+/*
+* Copyright (c) 2013 - 2014 Samsung Electronics Co., Ltd
+*
+* Licensed under the Flora License, Version 1.1 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://floralicense.org/license/
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+/*jslint nomen: true, plusplus: true */
+
+/**
+ * # Popup Widget
+ * Shows a pop-up window.
+ *
+ * The popup widget shows in the middle of the screen a list of items in a pop-up window. It automatically optimizes the pop-up window size within the screen. The following table describes the supported popup classes.
+ *
+ * ## Default selectors
+ * All elements with class *ui-popup* will be become popup widgets.
+ *
+ * The pop-up window can contain a header, content, and footer area like the page element.
+ *
+ * To open a pop-up window from a link, use the data-rel attribute in HTML markup as in the following code:
+ *
+ *      @example
+ *      <a href="#popup" class="ui-btn" data-rel="popup">Open popup when clicking this element.</a>
+ *
+ * The following table shows examples of various types of popups.
+ *
+ * The popup contains header, content and footer area
+ *
+ * ###HTML Examples
+ *
+ * #### Basic popup with header, content, footer
+ *
+ *		@example
+ *		<div class="ui-page">
+ *		    <div class="ui-popup">
+ *		        <div class="ui-popup-header">Power saving mode</div>
+ *		        <div class="ui-popup-content">
+ *		            Turning on Power
+ *		            saving mode will
+ *		            limit the maximum
+ *		            per
+ *		        </div>
+ *		        <div class="ui-popup-footer">
+ *		            <button id="cancel" class="ui-btn">Cancel</button>
+ *		        </div>
+ *		    </div>
+ *		</div>
+ *
+ * #### Popup with 2 buttons in the footer
+ *
+ *      @example
+ *         <div id="2btnPopup" class="ui-popup">
+ *             <div class="ui-popup-header">Delete</div>
+ *             <div class="ui-popup-content">
+ *                 Delete the image?
+ *             </div>
+ *             <div class="ui-popup-footer ui-grid-col-2">
+ *                 <button id="2btnPopup-cancel" class="ui-btn">Cancel</button>
+ *                 <button id="2btnPopup-ok" class="ui-btn">OK</button>
+ *             </div>
+ *         </div>
+ *
+ * #### Popup with checkbox/radio
+ *
+ * If you want make popup with list checkbox(or radio) just include checkbox (radio) to popup and add class *ui-popup-checkbox-label* to popup element.
+ *
+ *		@example
+ *         <div id="listBoxPopup" class="ui-popup">
+ *             <div class="ui-popup-header">When?</div>
+ *             <div class="ui-popup-content" style="height:243px; overflow-y:scroll">
+ *                 <ul class="ui-listview">
+ *                     <li>
+ *                         <label for="check-1" class="ui-popup-checkbox-label">Yesterday</label>
+ *                         <input type="checkbox" name="checkset" id="check-1" />
+ *                     </li>
+ *                     <li>
+ *                         <label for="check-2" class="ui-popup-checkbox-label">Today</label>
+ *                         <input type="checkbox" name="checkset" id="check-2" />
+ *                     </li>
+ *                     <li>
+ *                         <label for="check-3" class="ui-popup-checkbox-label">Tomorrow</label>
+ *                         <input type="checkbox" name="checkset" id="check-3" />
+ *                     </li>
+ *                 </ul>
+ *                 <ul class="ui-listview">
+ *                     <li>
+ *                         <label for="radio-1" class="ui-popup-radio-label">Mandatory</label>
+ *                         <input type="radio" name="radioset" id="radio-1" />
+ *                     </li>
+ *                     <li>
+ *                         <label for="radio-2" class="ui-popup-radio-label">Optional</label>
+ *                         <input type="radio" name="radioset" id="radio-2" />
+ *                     </li>
+ *                 </ul>
+ *             </div>
+ *             <div class="ui-popup-footer">
+ *                 <button id="listBoxPopup-close" class="ui-btn">Close</button>
+ *             </div>
+ *         </div>
+ *     </div>
+ *
+ * #### Popup with no header and footer
+ *
+ *      @example
+ *         <div id="listNoTitleNoBtnPopup" class="ui-popup">
+ *             <div class="ui-popup-content" style="height:294px; overflow-y:scroll">
+ *                 <ul class="ui-listview">
+ *                     <li><a href="">Ringtones 1</a></li>
+ *                     <li><a href="">Ringtones 2</a></li>
+ *                     <li><a href="">Ringtones 3</a></li>
+ *                 </ul>
+ *             </div>
+ *         </div>
+ *
+ * #### Toast popup
+ *
+ *      @example
+ *         <div id="PopupToast" class="ui-popup ui-popup-toast">
+ *             <div class="ui-popup-content">Saving contacts to sim on Samsung</div>
+ *         </div>
+ *
+ * ### Create Option popup
+ *
+ * Popup inherits value of option positionTo from property data-position-to set in link.
+ *
+ *		@example
+ *		<!--definition of link, which opens popup and sets its position-->
+ *		<a href="#popupOptionText" data-rel="popup"  data-position-to="origin">Text</a>
+ *		<!--definition of popup, which inherites property position from link-->
+ *		<div id="popupOptionText" class="ui-popup">
+ *			<div class="ui-popup-content">
+ *				<ul class="ui-listview">
+ *				<li><a href="#">Option 1</a></li>
+ *				<li><a href="#">Option 2</a></li>
+ *				<li><a href="#">Option 3</a></li>
+ *				<li><a href="#">Option 4</a></li>
+ *				</ul>
+ *			</div>
+ *		</div>
+ *
+ * ### Opening and closing popup
+ *
+ * To open popup from "a" link using html markup, use the following code:
+ *
+ *		@example
+ *      <div class="ui-page">
+ *          <header class="ui-header">
+ *              <h2 class="ui-title">Call menu</h2>
+ *          </header>
+ *          <div class="ui-content">
+ *              <a href="#popup" class="ui-btn" data-rel="popup" >Open Popup</a>
+ *          </div>
+ *
+ *          <div id="popup" class="ui-popup">
+ *               <div class="ui-popup-header">Power saving mode</div>
+ *                   <div class="ui-popup-content">
+ *                       Turning on Power
+ *                       saving mode will
+ *                       limit the maximum
+ *                       per
+ *                   </div>
+ *               <div class="ui-popup-footer">
+ *               <button id="cancel" class="ui-btn">Cancel</button>
+ *           </div>
+ *       </div>
+ *
+ *  To open the popup widget from JavaScript use method *tau.openPopup(to)*
+ *
+ *          @example
+ *          tau.openPopup("popup")
+ *
+ *  To close the popup widget from JavaScript use method *tau.openPopup(to)*
+ *
+ *          @example
+ *          tau.closePopup("popup")
+ *
+ * To find the currently active popup, use the ui-popup-active class.
+ *
+ * To bind the popup to a button, use the following code:
+ *
+ *      @example
+ *         <!--HTML code-->
+ *         <div id="1btnPopup" class="ui-popup">
+ *             <div class="ui-popup-header">Power saving mode</div>
+ *             <div class="ui-popup-content">
+ *             </div>
+ *             <div class="ui-popup-footer">
+ *                 <button id="1btnPopup-cancel" class="ui-btn">Cancel</button>
+ *             </div>
+ *         </div>
+ *         <script>
+ *             // Popup opens with button click
+ *             var button = document.getElementById("button");
+ *             button.addEventListener("click", function() {
+ *                 tau.openPopup("#1btnPopup");
+ *             });
+ *
+ *             // Popup closes with Cancel button click
+ *             document.getElementById("1btnPopup-cancel").addEventListener("click", function() {
+ *                 tau.closePopup();
+ *             });
+ *         </script>
+ *
+ * ## Manual constructor
+ * For manual creation of popup widget you can use constructor of widget from **tau** namespace:
+ *
+ *		@example
+ *		var popupElement = document.getElementById("popup"),
+ *			popup = tau.widget.popup(buttonElement);
+ *
+ * Constructor has one require parameter **element** which are base **HTMLElement** to create widget. We recommend get this element by method *document.getElementById*.
+ *
+ * ## Options for Popup Widget
+ *
+ * Options for widget can be defined as _data-..._ attributes or give as parameter in constructor.
+ *
+ * You can change option for widget using method **option**.
+ *
+ * ## Methods
+ *
+ * To call method on widget you can use tau API:
+ *
+ *		@example
+ *		var popupElement = document.getElementById("popup"),
+ *			popup = tau.widget.popup(buttonElement);
+ *
+ *		popup.methodName(methodArgument1, methodArgument2, ...);
+ *
+ * ## Transitions
+ *
+ * By default, the framework doesn't apply transition. To set a custom transition effect, add the data-transition attribute to the link.
+ *
+ *		@example
+ *		<a href="index.html" data-rel="popup" data-transition="slideup">I'll slide up</a>
+ *
+ * Global configuration:
+ *
+ *		@example
+ *		gear.ui.defaults.popupTransition = "slideup";
+ *
+ * ### Transitions list
+ *
+ * - **none** Default value, no transition.
+ * - **slideup** Makes the content of the pop-up slide up.
+ *
+ * ## Handling Popup Events
+ *
+ * To use popup events, use the following code:
+ *
+ *      @example
+ *         <!--Popup html code-->
+ *         <div id="popup" class="ui-popup">
+ *             <div class="ui-popup-header"></div>
+ *             <div class="ui-popup-content"></div>
+ *         </div>
+ *         </div>
+ *         <script>
+ *             // Use popup events
+ *             var popup = document.getElementById("popup");
+ *             popup.addEventListener("popupbeforecreate", function() {
+ *                 // Implement code for popupbeforecreate event
+ *             });
+ *         </script>
+ *
+ * Full list of available events is in [events list section](#events-list).
+ *
+ * @author Hyunkook Cho <hk0713.cho@samsung.com>
+ * @class ns.widget.core.Popup
+ * @extends ns.widget.core.BasePopup
+ */
+(function (window, document, ns) {
+	
+	
+			var Popup = ns.widget.core.Popup,
+
+				PopupPrototype = Popup.prototype,
+
+				engine = ns.engine,
+
+				objectUtils = ns.util.object,
+
+				domUtils = ns.util.DOM,
+
+				/**
+				 * Object with default options
+				 * @property {Object} defaults
+				 * @property {string} [options.transition="none"] Sets the default transition for the popup.
+				 * @property {string} [options.positionTo="window"] Sets the element relative to which the popup will be centered.
+				 * @property {boolean} [options.dismissible=true] Sets whether to close popup when a popup is open to support the back button.
+				 * @property {boolean} [options.overlay=true] Sets whether to show overlay when a popup is open.
+				 * @property {string} [overlayClass=""] Sets the custom class for the popup background, which covers the entire window.
+				 * @property {boolean} [options.history=true] Sets whether to alter the url when a popup is open to support the back button.
+				 * @property {string} [options.arrow="l,t,r,b"] Sets directions of popup's arrow by priority ("l" for left, "t" for top,
+				 * "r" for right, and "b" for bottom). The first one has the highest priority, the last one - the lowest. If you set arrow="t",
+				 * then arrow will be placed at the top of popup container and the whole popup will be placed under cliced element.
+				 * @property {string} [options.positionTo="window"] Sets the element relative to which the popup will be centered.
+				 * @property {number} [options.distance=0] Sets the extra distance in px from clicked element.
+				 * @member ns.widget.core.ContextPopup
+				 * @static
+				 * @private
+				 */
+				defaults = {
+					arrow: "l,b,r,t",
+					positionTo: "window",
+					distance: 0
+				},
+
+				ContextPopup = function () {
+					var self = this,
+						ui;
+
+					Popup.call(self);
+
+					// set options
+					self.options = objectUtils.merge(self.options, defaults);
+
+					// set ui
+					ui = self._ui || {};
+					ui.wrapper = null;
+					ui.arrow = null;
+					self._ui = ui;
+				},
+
+				/**
+				 * @property {Object} classes Dictionary for popup related css class names
+				 * @member ns.widget.core.Popup
+				 * @static
+				 */
+				CLASSES_PREFIX = "ui-popup",
+				classes = objectUtils.merge({}, Popup.classes, {
+					context: "ui-ctxpopup",
+					arrow: "ui-arrow",
+					arrowDir: CLASSES_PREFIX + "-arrow-"
+				}),
+
+				/**
+				 * @property {Object} events Dictionary for popup related events
+				 * @member ns.widget.core.Popup
+				 * @static
+				 */
+				events = objectUtils.merge({}, Popup.events, {
+					before_position: "beforeposition"
+				}),
+
+				positionType = {
+					WINDOW: "window",
+					ORIGIN: "origin"
+				},
+
+				prototype = new Popup();
+
+			ContextPopup.defaults = objectUtils.merge({}, Popup.defaults, defaults);
+			ContextPopup.classes = classes;
+			ContextPopup.events = events;
+
+			/**
+			 * Build structure of Popup widget
+			 * @method _build
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @protected
+			 * @member ns.widget.core.Popup
+			 */
+			prototype._build = function (element) {
+				var self = this,
+					ui = self._ui,
+					arrow;
+
+				// create arrow
+				arrow = document.createElement("div");
+				arrow.appendChild(document.createElement("span"));
+				arrow.classList.add(classes.arrow);
+				ui.arrow = arrow;
+
+				// add wrapper and arrow to popup element
+				element.appendChild(arrow);
+
+				// build elements of popup
+				PopupPrototype._build.call(self, element);
+
+				return element;
+			};
+
+			/**
+			 * Init widget
+			 * @method _init
+			 * @param {HTMLElement} element
+			 * @protected
+			 * @member ns.widget.core.ContextPopup
+			 */
+			prototype._init = function(element) {
+				var self = this,
+					ui = self._ui;
+
+				PopupPrototype._init.call(this, element);
+
+				ui.arrow = ui.arrow || element.querySelector("." + classes.arrow);
+			};
+
+			/**
+			 * Layouting popup structure
+			 * @method layout
+			 * @member ns.widget.core.ContextPopup
+			 */
+			prototype._layout = function (element) {
+				var self = this;
+				this._reposition();
+				PopupPrototype._layout.call(self, element);
+			};
+
+			/**
+			 * Set positon and size of popup.
+			 * @method _reposition
+			 * @param {object} options
+			 * @protected
+			 * @member ns.widget.core.ContextPopup
+			 */
+			prototype._reposition = function(options) {
+				var self = this,
+					element = self.element,
+					elementClassList = element.classList;
+
+				options = objectUtils.merge({}, self.options, options);
+
+				self.trigger(events.before_position, null, false);
+
+				elementClassList.add(classes.build);
+
+				// set height of content
+				self._setContentHeight();
+
+				// set position of popup
+				self._placementCoords(options);
+
+				elementClassList.remove(classes.build);
+
+			};
+
+			/**
+			 * Find the best positon of context popup.
+			 * @method findBestPosition
+			 * @param {ns.widget.core.ContextPopup} self
+			 * @param {HTMLElement} clickedElement
+			 * @private
+			 * @member ns.widget.core.ContextPopup
+			 */
+			function findBestPosition(self, clickedElement) {
+				var options = self.options,
+					arrowsPriority = options.arrow.split(","),
+					element = self.element,
+					windowWidth = window.innerWidth,
+					windowHeight = window.innerHeight,
+					popupWidth = element.offsetWidth,
+					popupHeight = element.offsetHeight,
+					// offset coordinates of clicked element
+					clickElementRect = clickedElement.getBoundingClientRect(),
+					clickElementOffsetX = clickElementRect.left,
+					clickElementOffsetY = clickElementRect.top,
+					// width of visible part of clicked element
+					clickElementOffsetWidth = Math.min(clickElementRect.width,
+							windowWidth - clickElementOffsetX),
+					// height of visible part of clicked element
+					clickElementOffsetHeight = Math.min(clickElementRect.height,
+							windowHeight - clickElementOffsetY),
+					// params for all types of popup
+					// "l" - popup with arrow on the left side, "r" - right, "b" - bottom, "t" - top
+					// dir - this letter is added as a suffix of class to popup's element
+					// fixedPositionField - specifies which coordinate is changed for this type of popup
+					// fixedPositionFactor - factor, which specifies if size should be added or subtracted
+					// size - available size, which is needed for this type of popup (width or height)
+					// max - maximum size of available place
+					params = {
+						"l": {dir: "l", fixedPositionField: "x", fixedPositionFactor: 1,
+							size: popupWidth, max: clickElementOffsetX},
+						"r": {dir: "r", fixedPositionField: "x", fixedPositionFactor: -1,
+							size: popupWidth, max: windowWidth - clickElementOffsetX - clickElementOffsetWidth},
+						"b": {dir: "b", fixedPositionField: "y", fixedPositionFactor: -1,
+							size: popupHeight, max: clickElementOffsetY},
+						"t": {dir: "t", fixedPositionField: "y", fixedPositionFactor: 1,
+							size: popupHeight, max: windowHeight - clickElementOffsetY - clickElementOffsetHeight}
+					},
+					bestDirection,
+					direction,
+					bestOffsetInfo;
+
+				// set value of bestDirection on the first possible type or top
+				bestDirection = params[arrowsPriority[0]] || params.t;
+
+				arrowsPriority.forEach(function(key){
+					var param = params[key],
+						paramMax = param.max;
+					if (!direction) {
+						if (param.size < paramMax) {
+							direction = param;
+						} else if (paramMax > bestDirection.max) {
+							bestDirection = param;
+						}
+					}
+				});
+
+				if (!direction) {
+					direction = bestDirection;
+					if (direction.fixedPositionField === "x") {
+						popupWidth = direction.max;
+					} else {
+						popupHeight = direction.max;
+					}
+				}
+
+				// info about the best position without taking into account type of popup
+				bestOffsetInfo = {
+					x: clickElementOffsetX + clickElementOffsetWidth / 2 - popupWidth / 2,
+					y: clickElementOffsetY + clickElementOffsetHeight / 2 - popupHeight / 2,
+					w: popupWidth,
+					h: popupHeight,
+					dir: direction.dir
+				};
+
+				// check type of popup and correct value for "fixedPositionField" coordinate
+				bestOffsetInfo[direction.fixedPositionField] +=
+					(direction.fixedPositionField === "x" ?
+						(popupWidth + clickElementOffsetWidth) * direction.fixedPositionFactor :
+						(popupHeight + clickElementOffsetHeight) * direction.fixedPositionFactor)
+						/ 2 + options.distance * direction.fixedPositionFactor;
+
+				return bestOffsetInfo;
+			}
+
+			/**
+			 * Find the best positon of arrow.
+			 * @method adjustedPositionAndPlacementArrow
+			 * @param {ns.widget.core.ContextPopup} self
+			 * @param {Object} bestRectangle
+			 * @param {number} x
+			 * @param {number} y
+			 * @private
+			 * @member ns.widget.core.ContextPopup
+			 */
+			function adjustedPositionAndPlacementArrow(self, bestRectangle, x, y) {
+				var ui = self._ui,
+					wrapper = ui.wrapper,
+					arrow = ui.arrow,
+					popupElement = self.element,
+					arrowStyle = arrow.style,
+					windowWidth = window.innerWidth,
+					windowHeight = window.innerHeight,
+					wrapperRect = wrapper.getBoundingClientRect(),
+					arrowHalfWidth = arrow.offsetWidth / 2,
+					popupProperties = {
+						"padding-top": 0,
+						"padding-bottom": 0,
+						"padding-left": 0,
+						"padding-right": 0
+					},
+					wrapperProperties = {
+						"margin-top": 0,
+						"margin-bottom": 0,
+						"margin-left": 0,
+						"margin-right": 0,
+						"padding-top": 0,
+						"padding-bottom": 0,
+						"padding-left": 0,
+						"padding-right": 0
+					},
+					margins,
+					params = {
+						"t": {pos: x, min: "left", max: "right", posField: "x", valField: "w", styleField: "left"},
+						"b": {pos: x, min: "left", max: "right", posField: "x", valField: "w", styleField: "left"},
+						"l": {pos: y, min: "top", max: "bottom", posField: "y", valField: "h", styleField: "top"},
+						"r": {pos: y, min: "top", max: "bottom", posField: "y", valField: "h", styleField: "top"}
+					},
+					param = params[bestRectangle.dir],
+					surplus;
+
+				domUtils.extractCSSProperties(popupElement, popupProperties);
+				domUtils.extractCSSProperties(wrapper, wrapperProperties);
+				margins	= {
+					"t": popupProperties["padding-top"] + wrapperProperties["margin-top"] + wrapperProperties["padding-top"],
+					"b": popupProperties["padding-bottom"] + wrapperProperties["margin-bottom"] + wrapperProperties["padding-bottom"],
+					"l": popupProperties["padding-left"] + wrapperProperties["margin-left"] + wrapperProperties["padding-left"],
+					"r": popupProperties["padding-right"] + wrapperProperties["margin-right"] + wrapperProperties["padding-right"]
+				};
+
+				// value of coordinates of proper edge of wrapper
+				wrapperRect = {
+					// x-coordinate of left edge
+					left: margins.l + bestRectangle.x,
+					// x-coordinate of right edge
+					right: margins.l + wrapperRect.width + bestRectangle.x,
+					// y-coordinate of top edge
+					top: margins.t + bestRectangle.y,
+					// y-coordinate of bottom edge
+					bottom: wrapperRect.height + margins.t + bestRectangle.y
+				};
+
+				if (wrapperRect[param.min] > param.pos - arrowHalfWidth) {
+					surplus = bestRectangle[param.posField];
+					if (surplus > 0) {
+						bestRectangle[param.posField] = Math.max(param.pos - arrowHalfWidth, 0);
+						param.pos = bestRectangle[param.posField] + arrowHalfWidth;
+					} else {
+						param.pos = wrapperRect[param.min] + arrowHalfWidth;
+					}
+				} else if (wrapperRect[param.max] < param.pos + arrowHalfWidth) {
+					surplus = (param.valField === "w" ? windowWidth : windowHeight)
+						- (bestRectangle[param.posField] + bestRectangle[param.valField]);
+					if (surplus > 0) {
+						bestRectangle[param.posField] += Math.min(surplus, (param.pos + arrowHalfWidth) - wrapperRect[param.max]);
+						param.pos = bestRectangle[param.posField] + bestRectangle[param.valField] - arrowHalfWidth;
+					} else {
+						param.pos = wrapperRect[param.max] - arrowHalfWidth;
+					}
+				}
+
+				arrowStyle[param.styleField] = (param.pos - arrowHalfWidth - bestRectangle[param.posField]) + "px";
+
+				return bestRectangle;
+			}
+
+			/**
+			 * Find clicked element.
+			 * @method _findClickedElement
+			 * @param {number} x
+			 * @param {number} y
+			 * @protected
+			 * @member ns.widget.core.ContextPopup
+			 */
+			prototype._findClickedElement = function(x, y) {
+				return document.elementFromPoint(x, y);
+			};
+
+			/**
+			 * Emulate position of event for clicked element.
+			 * @method emulatePositionOfClick
+			 * @param {string} bestDirection direction of arrow
+			 * @param {HTMLElement} clickedElement
+			 * @private
+			 * @member ns.widget.core.ContextPopup
+			 */
+			function emulatePositionOfClick(bestDirection, clickedElement) {
+				var clickedElementRect = clickedElement.getBoundingClientRect(),
+					position = {};
+
+				switch(bestDirection) {
+					case "l":
+						// the arrow will be on the left edge of container, so x-coordinate
+						// should have value equals to the position of right edge of clicked element
+						position.x = clickedElementRect.right;
+						// y-coordinate should have value equals to the position of top edge of clicked
+						// element plus half of its height
+						position.y = clickedElementRect.top + clickedElementRect.height / 2;
+						break;
+					case "r":
+						// the arrow will be on the right edge of container
+						position.x = clickedElementRect.left;
+						position.y =  clickedElementRect.top + clickedElementRect.height / 2;
+						break;
+					case "t":
+						// the arrow will be on the top edge of container
+						position.x = clickedElementRect.left + clickedElementRect.width / 2;
+						position.y = clickedElementRect.bottom;
+						break;
+					case "b":
+						// the arrow will be on the bottom edge of container
+						position.x = clickedElementRect.left + clickedElementRect.width / 2;
+						position.y = clickedElementRect.top;
+						break;
+				}
+				return position;
+			}
+
+			/**
+			 * Find and set the best position for popup.
+			 * @method _placementCoords
+			 * @param {object} options
+			 * @protected
+			 * @member ns.widget.core.ContextPopup
+			 */
+			prototype._placementCoords = function(options) {
+				var self = this,
+					positionTo = options.positionTo,
+					x = options.x,
+					y = options.y,
+					element = self.element,
+					elementStyle = element.style,
+					elementClassList = element.classList,
+					emulatedPosition,
+					elementHeight,
+					clickedElement,
+					arrowType,
+					bestRectangle;
+
+				if (typeof positionTo === "string") {
+					if (positionTo === positionType.ORIGIN && typeof x === "number" && typeof y === "number") {
+						clickedElement = self._findClickedElement(x, y);
+					} else if (positionTo !== positionType.WINDOW) {
+						try {
+							clickedElement = document.querySelector(options.positionTo);
+						} catch(e) {}
+					}
+				} else {
+					clickedElement = positionTo;
+				}
+
+				if (clickedElement) {
+
+					elementClassList.add(classes.context);
+
+					elementHeight = element.offsetHeight;
+					bestRectangle = findBestPosition(self, clickedElement);
+
+					arrowType = bestRectangle.dir;
+					elementClassList.add(classes.arrowDir + arrowType);
+					self._ui.arrow.setAttribute("type", arrowType);
+
+					if (typeof x !== "number" && typeof y !== "number") {
+						// if we found element, which was clicked, but the coordinates of event
+						// was not available, we have to count these coordinates to the center of proper edge of element.
+						emulatedPosition = emulatePositionOfClick(arrowType, clickedElement);
+						x = emulatedPosition.x;
+						y = emulatedPosition.y;
+					}
+					bestRectangle = adjustedPositionAndPlacementArrow(self, bestRectangle, x, y);
+
+					if (elementHeight > bestRectangle.h) {
+						self._setContentHeight(bestRectangle.h);
+					}
+
+					elementStyle.left = bestRectangle.x + "px";
+					elementStyle.top = bestRectangle.y + "px";
+
+				}
+
+			};
+
+			/**
+			 * Set height for popup's container.
+			 * @method _setContentHeight
+			 * @param {number} maxHeight
+			 * @protected
+			 * @member ns.widget.core.ContextPopup
+			 */
+			prototype._setContentHeight = function(maxHeight) {
+				var self = this,
+					element = self.element,
+					content = self._ui.content,
+					contentStyle,
+					contentHeight,
+					elementOffsetHeight;
+
+				if (content) {
+					contentStyle = content.style;
+
+					if (contentStyle.height || contentStyle.minHeight) {
+						contentStyle.height = "";
+						contentStyle.minHeight = "";
+					}
+
+					maxHeight = maxHeight || window.innerHeight;
+
+					contentHeight = content.offsetHeight;
+					elementOffsetHeight = element.offsetHeight;
+
+					if (elementOffsetHeight > maxHeight) {
+						contentHeight -= (elementOffsetHeight - maxHeight);
+						contentStyle.height = contentHeight + "px";
+						contentStyle.minHeight = contentHeight + "px";
+					}
+				}
+			};
+
+			/**
+			 * Hide popup.
+			 * @method _onHide
+			 * @protected
+			 * @member ns.widget.core.ContextPopup
+			 */
+			prototype._onHide = function() {
+				var self = this,
+					ui = self._ui,
+					element = self.element,
+					elementClassList = element.classList,
+					content = ui.content,
+					arrow = ui.arrow;
+
+				elementClassList.remove(classes.context);
+				["l", "r", "b", "t"].forEach(function(key) {
+					elementClassList.remove(classes.arrowDir + key);
+				});
+
+				// we remove styles for element, which are changed
+				// styles for container, header and footer are left unchanged
+				element.removeAttribute("style");
+				arrow.removeAttribute("style");
+
+				PopupPrototype._onHide.call(self);
+			};
+
+			/**
+			 * Destroy popup.
+			 * @method _destroy
+			 * @protected
+			 * @member ns.widget.core.ContextPopup
+			 */
+			prototype._destroy = function() {
+				var self = this,
+					element = self.element,
+					ui = self._ui,
+					wrapper = ui.wrapper,
+					length = wrapper.children.length,
+					i;
+
+				PopupPrototype._destroy.call(self);
+
+				for (i = 0; i < length; i++) {
+					element.appendChild(wrapper.children[0]);
+				}
+
+				wrapper.parentNode.removeChild(wrapper);
+				ui.arrow.parentNode.removeChild(ui.arrow);
+
+				ui.wrapper = null;
+				ui.arrow = null;
+			};
+
+			/**
+			 * Set new position for popup.
+			 * @method reposition
+			 * @param options
+			 * @param options.x
+			 * @param options.y
+			 * @param options.positionTo
+			 * @member ns.widget.core.ContextPopup
+			 */
+			prototype.reposition = function(options) {
+				if (this._isActive()) {
+					this._reposition(options);
+				}
+			};
+
+			ContextPopup.prototype = prototype;
+			ns.widget.core.ContextPopup = ContextPopup;
+
+			engine.defineWidget(
+				"Popup",
+				"[data-role='popup'], .ui-popup",
+				[
+					"open",
+					"close",
+					"reposition"
+				],
+				ContextPopup,
+				"core",
+				true
+			);
+
+			// @remove
+			// THIS IS ONLY FOR COMPATIBILITY
+			ns.widget.popup = ns.widget.Popup;
+
+			}(window, window.document, ns));
+
+/*global window, define, console */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true, plusplus: true */
+/**
+ * # Marquee Text
+ * It makes <div> element with text move horizontally like legacy <marquee> tag
+ *
+ * ## Make Marquee Element
+ * If you want to use Marquee widget, you have to declare below attributes in <div> element and make Marquee widget in JS code.
+ * To use a Marquee widget in your application, use the following code:
+ *
+ *	@example
+ *	<div class="ui-content">
+ *		<ul class="ui-listview">
+ *			<li><div class="ui-marquee" id="marquee">Marquee widget code sample</div></li>
+ *		</ul>
+ *	</div>
+ *	<script>
+ *		var marqueeEl = document.getElementById("marquee"),
+ *			marqueeWidget = new tau.widget.Marquee(marqueeEl, {marqueeStyle: "scroll", delay: "3"});
+ *	</script>
+ *
+ * @author Heeju Joo <heeju.joo@samsung.com>
+ * @class ns.widget.core.Marquee
+ * @extends ns.widget.BaseWidget
+ */
+(function (document, ns) {
+	
+	
+			var BaseWidget = ns.widget.BaseWidget,
+				/**
+				 * Alias for class ns.engine
+				 * @property {ns.engine} engine
+				 * @member ns.widget.core.Marquee
+				 * @private
+				 */
+				engine = ns.engine,
+				/**
+				 * Alias for class ns.event
+				 * @property {ns.event} event
+				 * @member ns.widget.core.Marquee
+				 * @private
+				 */
+				utilEvent = ns.event,
+				/**
+				 * Alias for class ns.util.object
+				 * @property {Object} objectUtils
+				 * @member ns.widget.core.Popup
+				 * @private
+				 */
+				objectUtils = ns.util.object,
+
+				Marquee = function() {
+					this._ui = {};
+					this._ui.marqueeInnerElement = null;
+					this._ui.styleSheelElement = null;
+
+					this._state = states.STOPPED;
+
+					this.options = objectUtils.merge({}, Marquee.defaults);
+
+					// event callbacks
+					this._callbacks = {};
+				},
+
+				prototype = new BaseWidget(),
+
+				CLASSES_PREFIX = "ui-marquee",
+
+				states = {
+					RUNNING: "running",
+					STOPPED: "stopped",
+					IDLE: "idle"
+				},
+
+				eventType = {
+					/**
+					 * Triggered when the marquee animation end.
+					 * @event marqueeend
+					 * @memeber ns.widget.core.Marquee
+					 */
+					MARQUEE_START: "marqueestart",
+					MARQUEE_END: "marqueeend",
+					MARQUEE_STOPPED: "marqueestopped"
+				},
+				/**
+			 	 * Dictionary for CSS class of marquee play state
+				 * @property {Object} classes
+				 * @member ns.widget.core.Marquee
+				 * @static
+				 */
+				classes = {
+					MARQUEE_CONTENT: CLASSES_PREFIX + "-content",
+					MARQUEE_GRADIENT: CLASSES_PREFIX + "-gradient",
+					MARQUEE_ELLIPSIS: CLASSES_PREFIX + "-ellipsis",
+					ANIMATION_RUNNING: CLASSES_PREFIX + "-anim-running",
+					ANIMATION_STOPPED: CLASSES_PREFIX + "-anim-stopped",
+					ANIMATION_IDLE: CLASSES_PREFIX + "-anim-idle"
+				},
+
+				selector = {
+					MARQUEE_CONTENT: "." + CLASSES_PREFIX + "-content"
+				},
+
+				/**
+				 * Dictionary for marquee style
+				 */
+				style = {
+					SCROLL: "scroll",
+					SLIDE: "slide",
+					ALTERNATE: "alternate"
+				},
+
+				ellipsisEffect = {
+					GRADIENT: "gradient",
+					ELLIPSIS: "ellipsis",
+					NONE: "none"
+				},
+
+				/**
+				 * Options for widget
+				 * @property {Object} options
+				 * @property {string|"slide"|"scroll"|"alternate"} [options.marqueeStyle="slide"] Sets the default style for the marquee
+				 * @property {number} [options.speed=60] Sets the speed(px/sec) for the marquee
+				 * @property {number|"infinite"} [options.iteration=1] Sets the iteration count number for marquee
+				 * @property {number} [options.delay=2] Sets the delay(sec) for marquee
+				 * @property {"linear"|"ease"|"ease-in"|"ease-out"|"cubic-bezier(n,n,n,n)"} [options.timingFunction="linear"] Sets the timing function for marquee
+				 * @property {"gradient"|"ellipsis"|"none"} [options.ellipsisEffect="gradient"] Sets the end-effect(gradient) of marquee
+				 * @property {boolean} [options.autoRun=true] Sets the status of autoRun
+				 * @member ns.widget.core.Marquee
+				 * @static
+				 */
+				defaults = {
+					marqueeStyle: style.SLIDE,
+					speed: 60,
+					iteration: 1,
+					delay: 2,
+					timingFunction: "linear",
+					ellipsisEffect: "gradient",
+					autoRun: true
+				};
+
+			Marquee.classes = classes;
+			Marquee.defaults = defaults;
+
+			/* Marquee AnimationEnd callback */
+			function marqueeEndHandler(self) {
+				self.reset();
+			}
+
+			function getAnimationDuration(self, speed) {
+				var marqueeInnerElement = self._ui.marqueeInnerElement,
+					textWidth = marqueeInnerElement.scrollWidth,
+					duration = textWidth / speed;
+
+				return duration;
+			}
+
+			function setMarqueeKeyFrame(self, marqueeStyle) {
+				var marqueeInnerElement = self._ui.marqueeInnerElement,
+					marqueeContainer = self.element,
+					containerWidth = marqueeContainer.offsetWidth,
+					textWidth = marqueeInnerElement.scrollWidth,
+					styleElement = document.createElement("style"),
+					keyFrameName = marqueeStyle + "-" + self.id,
+					customKeyFrame;
+
+				switch (marqueeStyle) {
+					case style.SLIDE:
+						customKeyFrame = "@-webkit-keyframes " + keyFrameName + " {"
+										+ "0% { -webkit-transform: translate3d(0, 0, 0);}"
+										+ "98%, 100% { -webkit-transform: translate3d(-" + (textWidth - containerWidth) + "px, 0, 0);} }";
+						break;
+					case style.SCROLL:
+						customKeyFrame = "@-webkit-keyframes " + keyFrameName + " {"
+										+ "0% { -webkit-transform: translate3d(0, 0, 0);}"
+										+ "100% { -webkit-transform: translate3d(-100%, 0, 0);} }";
+						break;
+					case style.ALTERNATE:
+						customKeyFrame = "@-webkit-keyframes " + keyFrameName + " {"
+										+ "0% { -webkit-transform: translate3d(0, 0, 0);}"
+										+ "50% { -webkit-transform: translate3d(-" + (textWidth - containerWidth) + "px, 0, 0);}"
+										+ "100% { -webkit-transform: translate3d(0, 0, 0);} }";
+						break;
+					default:
+						customKeyFrame = null;
+						break;
+				}
+
+				if (customKeyFrame) {
+					self.element.appendChild(styleElement);
+					styleElement.sheet.insertRule(customKeyFrame, 0);
+
+					self._ui.styleSheelElement = styleElement;
+				}
+
+				return keyFrameName;
+			}
+
+			function setAnimationStyle(self, options) {
+				var marqueeInnerElement = self._ui.marqueeInnerElement,
+					marqueeInnerElementStyle = marqueeInnerElement.style,
+					duration = getAnimationDuration(self, isNaN(parseInt(options.speed))? defaults.speed : options.speed ),
+					marqueeKeyFrame = setMarqueeKeyFrame(self, options.marqueeStyle),
+					iteration;
+
+				// warning when option value is not correct.
+				if (isNaN(parseInt(options.speed))) {
+					ns.warn("speed value must be number(px/sec)");
+				}
+				if ((options.iteration !== "infinite") && isNaN(options.iteration)) {
+					ns.warn("iteration count must be number or 'infinite'");
+				}
+				if (isNaN(options.delay)) {
+					ns.warn("delay value must be number");
+				}
+
+				marqueeInnerElementStyle.webkitAnimationName = marqueeKeyFrame;
+				marqueeInnerElementStyle.webkitAnimationDuration = duration + "s";
+				marqueeInnerElementStyle.webkitAnimationIterationCount = options.iteration;
+				marqueeInnerElementStyle.webkitAnimationTimingFunction = options.timingFunction;
+				marqueeInnerElementStyle.webkitAnimationDelay = options.delay + "s";
+			}
+
+			function setEllipsisEffectStyle(self, ellipsisEffectOption) {
+				var marqueeElement = self.element;
+
+				switch (ellipsisEffectOption) {
+					case ellipsisEffect.GRADIENT:
+						if (marqueeElement.offsetWidth < self._ui.marqueeInnerElement.scrollWidth) {
+							marqueeElement.classList.add(classes.MARQUEE_GRADIENT);
+						}
+						break;
+					case ellipsisEffect.ELLIPSIS:
+						marqueeElement.classList.add(classes.MARQUEE_ELLIPSIS);
+						break;
+					default :
+						break;
+				}
+
+			}
+
+			function setAutoRunState(self, autoRunOption) {
+				if (autoRunOption) {
+					self.start();
+				} else {
+					self.stop();
+				}
+			}
+
+			/**
+			 * Build Marquee DOM
+			 * @method _build
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @protected
+			 * @member ns.widget.core.Marquee
+			 */
+			prototype._build = function(element) {
+				var marqueeInnerElement = document.createElement("div");
+
+				while (element.hasChildNodes()) {
+					marqueeInnerElement.appendChild(element.removeChild(element.firstChild));
+				}
+				marqueeInnerElement.classList.add(classes.MARQUEE_CONTENT);
+				element.appendChild(marqueeInnerElement);
+
+				this._ui.marqueeInnerElement = marqueeInnerElement;
+
+				return element;
+			};
+
+			/**
+			 * Init Marquee Style
+			 * @method _init
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @protected
+			 * @member ns.widget.core.Marquee
+			 */
+			prototype._init = function(element) {
+				var self = this;
+
+				self._ui.marqueeInnerElement = self._ui.marqueeInnerElement || element.querySelector(selector.MARQUEE_CONTENT)
+
+				setEllipsisEffectStyle(self, self.options.ellipsisEffect);
+				setAnimationStyle(self, self.options);
+				setAutoRunState(self, self.options.autoRun);
+
+				return element;
+			};
+
+			/**
+			 * Bind events
+			 * @method _bindEvents
+			 * @protected
+			 * @member ns.widget.core.Marquee
+			 */
+			prototype._bindEvents = function() {
+				var self = this,
+					marqueeInnerElement = self._ui.marqueeInnerElement,
+					animationEndCallback = marqueeEndHandler.bind(null, self);
+
+				self._callbacks.animationEnd = animationEndCallback;
+
+				utilEvent.one(marqueeInnerElement, "webkitAnimationEnd", animationEndCallback)
+			};
+
+			/**
+			 * Refresh styles
+			 * @method _refresh
+			 * @protected
+		 	 * @memeber ns.widget.core.Marquee
+			 */
+			prototype._refresh = function() {
+				var self = this;
+
+				self._resetStyle();
+				setEllipsisEffectStyle(self, self.options);
+				setAnimationStyle(self, self.options);
+				setAutoRunState(self, self.options.autoRun);
+			};
+
+			/**
+			 * Reset style of Marquee elements
+			 * @method _resetStyle
+			 * @protected
+			 * @memeber ns.widget.core.Marquee
+			 */
+			prototype._resetStyle = function() {
+				var self = this,
+					marqueeContainer = self.element,
+					marqueeKeyframeStyleSheet = self._ui.styleSheelElement,
+					marqueeInnerElementStyle = self._ui.marqueeInnerElement.style;
+
+				if (marqueeContainer.contains(marqueeKeyframeStyleSheet)) {
+					marqueeContainer.removeChild(marqueeKeyframeStyleSheet);
+				}
+
+				marqueeInnerElementStyle.webkitAnimationName = "";
+				marqueeInnerElementStyle.webkitAnimationDuration = "";
+				marqueeInnerElementStyle.webkitAnimationDelay = "";
+				marqueeInnerElementStyle.webkitAnimationIterationCount = "";
+				marqueeInnerElementStyle.webkitAnimationTimingFunction = "";
+			};
+
+			/**
+			 * Remove marquee object and Reset DOM structure
+			 * @method _resetDOM
+			 * @protected
+			 * @memeber ns.widget.core.Marquee
+			 */
+			prototype._resetDOM = function() {
+				var ui = this._ui;
+
+				while (ui.marqueeInnerElement.hasChildNodes()) {
+					this.element.appendChild(ui.marqueeInnerElement.removeChild(ui.marqueeInnerElement.firstChild));
+				}
+				this.element.removeChild(ui.marqueeInnerElement);
+				return null;
+			};
+
+			/**
+			 * Destroy widget
+			 * @method _destroy
+			 * @protected
+			 * @member ns.widget.core.Marquee
+			 */
+			prototype._destroy = function() {
+				var self = this;
+
+				self._resetStyle();
+				self._resetDOM();
+				self._callbacks = null;
+				self._ui = null;
+
+				return null;
+			};
+
+			/**
+			 * Set Marquee animation status Running
+			 * @method _animationStart
+			 * @memeber ns.widget.core.Marquee
+			 */
+			prototype._animationStart = function() {
+				var self = this,
+					marqueeElementClassList = self.element.classList,
+					marqueeInnerElementClassList = self._ui.marqueeInnerElement.classList;
+
+				self._state = states.RUNNING;
+
+				if (marqueeElementClassList.contains(classes.MARQUEE_ELLIPSIS)) {
+					marqueeElementClassList.remove(classes.MARQUEE_ELLIPSIS);
+				}
+
+				marqueeInnerElementClassList.remove(classes.ANIMATION_IDLE, classes.ANIMATION_STOPPED);
+				marqueeInnerElementClassList.add(classes.ANIMATION_RUNNING);
+				self.trigger(eventType.MARQUEE_START);
+			};
+
+			/**
+			 * Start Marquee animation
+			 *
+			 * #####Running example in pure JavaScript:
+			 *
+			 *	@example
+			 *	<div class="ui-marquee" id="marquee">
+			 *		<p>MarqueeTEST TEST message TEST for marquee</p>
+			 *	</div>
+			 *	<script>
+			 *		var marqueeWidget = tau.widget.Marquee(document.getElementById("marquee"));
+			 *		marqueeWidget.start();
+			 *	</script>
+			 *
+			 * @method start
+			 * @memeber ns.widget.core.Marquee
+			 */
+			prototype.start = function() {
+				var self = this;
+
+				switch (self._state) {
+					case states.IDLE:
+						setAnimationStyle(self, self.options);
+						self._bindEvents();
+						self._animationStart();
+						break;
+					case states.STOPPED:
+						self._state = states.RUNNING;
+						self._animationStart();
+						break;
+					case states.RUNNING:
+						break;
+				}
+			};
+
+			/**
+			 * Pause Marquee animation
+			 *
+			 * #####Running example in pure JavaScript:
+			 *	@example
+			 *	<div class="ui-marquee" id="marquee">
+			 *		<p>MarqueeTEST TEST message TEST for marquee</p>
+			 *	</div>
+			 *	<script>
+			 *		var marqueeWidget = tau.widget.Marquee(document.getElementById("marquee"));
+			 *		marqueeWidget.stop();
+			 *	</script>
+			 *
+			 * @method stop
+			 * @member ns.widget.core.Marquee
+			 */
+			prototype.stop = function() {
+				var self = this,
+					marqueeInnerElementClassList = self._ui.marqueeInnerElement.classList;
+
+				if (self._state == states.IDLE) {
+					return;
+				}
+
+				self._state = states.STOPPED;
+				marqueeInnerElementClassList.remove(classes.ANIMATION_RUNNING);
+				marqueeInnerElementClassList.add(classes.ANIMATION_STOPPED);
+				self.trigger(eventType.MARQUEE_STOPPED);
+			};
+
+			/**
+			 * Reset Marquee animation
+			 *
+			 * #####Running example in pure JavaScript:
+			 *	@example
+			 *	<div class="ui-marquee" id="marquee">
+			 *		<p>MarqueeTEST TEST message TEST for marquee</p>
+			 *	</div>
+			 *	<script>
+			 *		var marqueeWidget = tau.widget.Marquee(document.getElementById("marquee"));
+			 *		marqueeWidget.reset();
+			 *	</script>
+			 *
+			 * @method reset
+			 * @member ns.widget.core.Marquee
+			 */
+			prototype.reset = function() {
+				var self = this,
+					marqueeElementClassList = self.element.classList,
+					marqueeInnerElementClassList = self._ui.marqueeInnerElement.classList;
+
+				if (self._state == states.IDLE) {
+					return;
+				}
+
+				self._state = states.IDLE;
+				marqueeInnerElementClassList.remove(classes.ANIMATION_RUNNING, classes.ANIMATION_STOPPED);
+				marqueeInnerElementClassList.add(classes.ANIMATION_IDLE);
+				if (self.options.ellipsisEffect == ellipsisEffect.ELLIPSIS) {
+					marqueeElementClassList.add(classes.MARQUEE_ELLIPSIS);
+				}
+
+				self._resetStyle();
+				self.trigger(eventType.MARQUEE_END);
+			};
+
+			Marquee.prototype = prototype;
+			ns.widget.core.Marquee = Marquee;
+
+			engine.defineWidget(
+				"Marquee",
+				".ui-marquee",
+				["start", "stop", "reset"],
+				Marquee,
+				"core"
+			);
+			}(window.document, ns));
+
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * #Wearable Widget Reference
+ * The Tizen Web UI service provides rich Tizen widgets that are optimized for the Tizen Web browser. You can use the widgets for:
+ *
+ * - CSS animation
+ * - Rendering
+ *
+ * The following table displays the widgets provided by the Tizen Web UI service.
+ * @class ns.widget.wearable
+ * @seeMore https://developer.tizen.org/dev-guide/2.2.1/org.tizen.web.uiwidget.apireference/html/web_ui_framework.htm "Web UI Framework Reference"
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ */
+(function (window, ns) {
+	
+				ns.widget.wearable = ns.widget.wearable || {};
+			}(window, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true */
+/**
+ * # Button Widget
+ * Shows a control that can be used to generate an action event.
+ *
+ * ## Default selectors
+ * The button widget shows a control on the screen that you can use to generate an action event when it is pressed and released. This widget is coded with standard HTML anchor and input elements.
+ *
+ * Default selector for buttons is class *ui-btn*
+ *
+ * ### HTML Examples
+ *
+ * #### Standard button
+ * To add a button widget to the application, use the following code:
+ *
+ *      @example
+ *      <button type="button" class="ui-btn">Button</button>
+ *      <a href="#" class="ui-btn">Button</a>
+ *      <input type="button" class="ui-btn" value="Button" />
+ *
+ * #### Inline button
+ *
+ *      @example
+ *      <input type="button" class="ui-btn ui-inline" value="Button" />
+ *
+ * #### Multiline text button
+ *
+ *      @example
+ *      <a href="#" class="ui-btn ui-multiline ui-inline">A Button<br />Icon</a>
+ *
+ * ## Options
+ *
+ * ### Icons
+ * Buttons can contains icons
+ *
+ * Creates an icon button in the header area is permitted but in content or footer area creating icon are not supported.
+ *
+ * To use menu icon in header add class *ui-more* to the button element:
+ *
+ *      @example
+ *      <button class="ui-btn ui-more ui-icon-overflow">More Options</button>
+ *
+ * Samsung Gear Web UI Framework supports 3 icon css styles:
+ *
+ *  - ui-icon-detail
+ *  - ui-icon-overflow
+ *  - ui-icon-selectall
+ *
+ * ### Disabled
+ *
+ * If you want to make disabled button, add attribute *disabled* in button tag:
+ *
+ *      @example
+ *      <button class="ui-btn" disabled="disabled">Button disabled</button>
+ *
+ * ### Inline
+ *
+ * If you want to make inline button, add class *ui-inline* to button element:
+ *
+ *      @example
+ *      <button class="ui-btn ui-inline">Inline button</button>
+ *
+ * ### Multiline
+ *
+ * If you want to make multiline text button, add *ui-multiline* class
+ *
+ *      @example
+ *      <button class="ui-btn ui-multiline">Multiline button</button>
+ *
+ * ### Color theme
+ *
+ *To optimize color support for the Samsung Gear, the following styles below are supported
+ *
+ * <table>
+ *  <tr>
+ *      <th>Class</th>
+ *      <th>Default</th>
+ *      <th>Press</th>
+ *      <th>Disable</th>
+ *  </tr>
+ *  <tr>
+ *      <td>ui-color-red</td>
+ *      <td>#ce2302</td>
+ *      <td>#dd654e</td>
+ *      <td>#3d0a0a</td>
+ *  </tr>
+ *  <tr>
+ *      <td>ui-color-orange</td>
+ *      <td>#ed8600</td>
+ *      <td>#f0aa56</td>
+ *      <td>#462805</td>
+ *  </tr>
+ *  <tr>
+ *      <td>ui-color-green</td>
+ *      <td>#64a323</td>
+ *      <td>#92be5e</td>
+ *      <td>#1e3108</td>
+ *  </tr>
+ * </table>
+ *
+ * ### Button Group
+ *
+ * You can group buttons in columns or rows. The following table lists the supported button column and row classes.
+ *
+ * <table>
+ *  <tr>
+ *      <th>Class</th>
+ *      <th>Description</th>
+ *  </tr>
+ *  <tr>
+ *      <td>ui-grid-col-1</td>
+ *      <td>Defines the button column width as 100% of the screen.</td>
+ *  </tr>
+ *  <tr>
+ *      <td>ui-grid-col-2</td>
+ *      <td>Defines the button column width as 50% of the screen.</td>
+ *  </tr>
+ *  <tr>
+ *      <td>ui-grid-col-3</td>
+ *      <td>Defines the button column width as 33% of the screen.</td>
+ *  </tr>
+ *  <tr>
+ *      <td>ui-grid-row</td>
+ *      <td>Arranges the buttons in a row.</td>
+ *  </tr>
+ * </table>
+ *
+ * To implement the button groups, use the following code:
+ *
+ * #### For columns:
+ *
+ *      @example
+ *      <div class="ui-grid-col-3" style="height:76px">
+ *          <button type="button" class="ui-btn">Button Circle</button>
+ *          <a href="#" class="ui-btn ui-color-red" >A Button Circle</a>
+ *          <input type="button" class="ui-btn ui-color-orange" value="Input Button Circle" />
+ *      </div>
+ *
+ * #### For rows:
+ *
+ *      @example
+ *      <div class="ui-grid-row">
+ *          <button type="button" class="ui-btn">Button Circle</button>
+ *          <a href="#" class="ui-btn ui-color-red" >A Button Circle</a>
+ *          <input type="button" class="ui-btn ui-color-orange" value="Input Button Circle" />
+ *      </div>
+ *
+ * @class ns.widget.wearable.Button
+ * @extends ns.widget.BaseWidget
+ */
+(function (document, ns) {
+	
+				var BaseWidget = ns.widget.BaseWidget,
+				engine = ns.engine,
+				Button = function () {
+				},
+				prototype = new BaseWidget();
+
+			/**
+			 * Dictionary for button related events.
+			 * For button, it is an empty object.
+			 * @property {Object} events
+			 * @member ns.widget.wearable.Button
+			 * @static
+			 */
+			Button.events = {};
+
+			/**
+			 * Build Button
+			 * @method _build
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @protected
+			 * @member ns.widget.wearable.Button
+			 */
+			prototype._build = function (element) {
+				return element;
+			};
+
+			prototype._init = function (element) {
+				return element;
+			};
+
+			prototype._bindEvents = function (element) {
+				return element;
+			};
+
+			/**
+			 * Refresh structure
+			 * @method _refresh
+			 * @protected
+			 * @member ns.widget.wearable.Button
+			 */
+			prototype._refresh = function () {
+				return null;
+			};
+
+			/**
+			 * Destroy widget
+			 * @method _destroy
+			 * @protected
+			 * @member ns.widget.wearable.Button
+			 */
+			prototype._destroy = function () {
+				return null;
+			};
+
+			Button.prototype = prototype;
+			ns.widget.wearable.Button = Button;
+
+			engine.defineWidget(
+				"Button",
+				".ui-btn",
+				[],
+				Button,
+				"wearable"
+			);
+			}(window.document, ns));
+
+/*global ns, window, define */
+/*jslint nomen: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Gesture Namespace
+ * Core object enables multi gesture support.
+ *
+ * @class ns.event.gesture
+ */
+(function ( ns, window, undefined ) {
+	
+	
+			var Gesture = function( elem, options ) {
+				return new ns.event.gesture.Instance( elem, options );
+			};
+
+			/**
+			 * Default values for Gesture feature
+			 * @property {Object} defaults
+			 * @property {boolean} [defaults.triggerEvent=false]
+			 * @property {number} [defaults.updateVelocityInterval=16]
+			 * Interval in which Gesture recalculates current velocity in ms
+			 * @property {number} [defaults.estimatedPointerTimeDifference=15]
+			 * pause time threshold.. tune the number to up if it is slow
+			 * @member ns.event.gesture
+			 * @static
+			 */
+			Gesture.defaults = {
+				triggerEvent: false,
+				updateVelocityInterval: 16,
+				estimatedPointerTimeDifference: 15
+			};
+
+			/**
+			 * Dictionary of orientation
+			 * @property {Object} Orientation
+			 * @property {1} Orientation.VERTICAL vertical orientation
+			 * @property {2} Orientation.HORIZONTAL horizontal orientation
+			 * @member ns.event.gesture
+			 * @static
+			 */
+			Gesture.Orientation = {
+				VERTICAL: "vertical",
+				HORIZONTAL: "horizontal"
+			};
+
+			/**
+			 * Dictionary of direction
+			 * @property {Object} Direction
+			 * @property {1} Direction.UP up
+			 * @property {2} Direction.DOWN down
+			 * @property {3} Direction.LEFT left
+			 * @property {4} Direction.RIGHT right
+			 * @member ns.event.gesture
+			 * @static
+			 */
+			Gesture.Direction = {
+				UP: "up",
+				DOWN: "down",
+				LEFT: "left",
+				RIGHT: "right"
+			};
+
+			/**
+			 * Dictionary of gesture events state
+			 * @property {Object} Event
+			 * @property {"start"} Event.START start
+			 * @property {"move"} Event.MOVE move
+			 * @property {"end"} Event.END end
+			 * @property {"cancel"} Event.CANCEL cancel
+			 * @property {"blocked"} Event.BLOCKED blocked
+			 * @member ns.event.gesture
+			 * @static
+			 */
+			Gesture.Event = {
+				START: "start",
+				MOVE: "move",
+				END: "end",
+				CANCEL: "cancel",
+				BLOCKED: "blocked"
+			};
+
+			/**
+			 * Dictionary of gesture events flags
+			 * @property {Object} Result
+			 * @property {number} [Result.PENDING=1] is pending
+			 * @property {number} [Result.RUNNING=2] is running
+			 * @property {number} [Result.FINISHED=4] is finished
+			 * @property {number} [Result.BLOCK=8] is blocked
+			 * @member ns.event.gesture
+			 * @static
+			 */
+			Gesture.Result = {
+				PENDING: 1,
+				RUNNING: 2,
+				FINISHED: 4,
+				BLOCK: 8
+			};
+
+			/**
+			 * Create plugin namespace.
+			 * @property {Object} plugin
+			 * @member ns.event.gesture
+			 * @static
+			 */
+			Gesture.plugin = {};
+
+			/**
+			 * Create object of Detector
+			 * @method createDetector
+			 * @param {string} gesture
+			 * @param {HTMLElement} eventSender
+			 * @param {Object} options
+			 * @return {ns.event.gesture.Gesture}
+			 * @member ns.event.gesture
+			 * @static
+			 */
+			Gesture.createDetector = function( gesture, eventSender, options ) {
+				if ( !Gesture.plugin[gesture] ) {
+					throw gesture + " gesture is not supported";
+				}
+				return new Gesture.plugin[gesture]( eventSender, options );
+			};
+
+			ns.event.gesture = Gesture;
+			} ( ns, window ) );
+
+/*global ns, window, define */
+/*jslint nomen: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Gesture Utilities
+ * Contains helper function to gesture support.
+ * @class ns.event.gesture.utils
+ */
+(function (ns, Math, undefined) {
+	
+	
+				/**
+				 * Local alias for {@link ns.event.gesture}
+				 * @property {Object}
+				 * @member ns.event.gesture.utils
+				 * @private
+				 * @static
+				 */
+			var Gesture = ns.event.gesture;
+
+			Gesture.utils = {
+
+				/**
+				 * Get center from array of touches
+				 * @method getCenter
+				 * @param {Event[]} touches description
+				 * @member ns.event.gesture.utils
+				 * @return {Object} position
+				 * @return {number} return.clientX position X
+				 * @return {number} return.clientY position Y
+				 */
+				getCenter: function (touches) {
+					var valuesX = [], valuesY = [];
+
+					[].forEach.call(touches, function(touch) {
+						// I prefer clientX because it ignore the scrolling position
+						valuesX.push(!isNaN(touch.clientX) ? touch.clientX : touch.pageX);
+						valuesY.push(!isNaN(touch.clientY) ? touch.clientY : touch.pageY);
+					});
+
+					return {
+						clientX: (Math.min.apply(Math, valuesX) + Math.max.apply(Math, valuesX)) / 2,
+						clientY: (Math.min.apply(Math, valuesY) + Math.max.apply(Math, valuesY)) / 2
+					};
+				},
+
+				/**
+				 * Get velocity
+				 * @method getVelocity
+				 * @param {number} delta_time Delta of time
+				 * @param {number} delta_x Position change on x axis
+				 * @param {number} delta_y Position change on y axis
+				 * @return {Object} velocity
+				 * @return {number} return.x velocity on X axis
+				 * @return {number} return.y velocity on Y axis
+				 * @member ns.event.gesture.utils
+				 */
+				getVelocity: function (delta_time, delta_x, delta_y) {
+					return {
+						x: Math.abs(delta_x / delta_time) || 0,
+						y: Math.abs(delta_y / delta_time) || 0
+					};
+				},
+
+				/**
+				 * Get angel between position of two touches
+				 * @method getAngle
+				 * @param {Event} touch1 first touch
+				 * @param {Event} touch2 second touch
+				 * @return {number} angel (deg)
+				 * @member ns.event.gesture.utils
+				 */
+				getAngle: function (touch1, touch2) {
+					var y = touch2.clientY - touch1.clientY,
+						x = touch2.clientX - touch1.clientX;
+					return Math.atan2(y, x) * 180 / Math.PI;
+				},
+
+				/**
+				 * Get direction indicated by position of two touches
+				 * @method getDirectiqon
+				 * @param {Event} touch1 first touch
+				 * @param {Event} touch2 second touch
+				 * @return {ns.event.gesture.Direction.LEFT|ns.event.gesture.Direction.RIGHT|ns.event.gesture.Direction.UP|ns.event.gesture.Direction.DOWN}
+				 * @member ns.event.gesture.utils
+				 */
+				getDirection: function (touch1, touch2) {
+					var x = Math.abs(touch1.clientX - touch2.clientX),
+						y = Math.abs(touch1.clientY - touch2.clientY);
+
+					if (x >= y) {
+						return touch1.clientX - touch2.clientX > 0 ? Gesture.Direction.LEFT : Gesture.Direction.RIGHT;
+					}
+					return touch1.clientY - touch2.clientY > 0 ? Gesture.Direction.UP : Gesture.Direction.DOWN;
+				},
+
+				/**
+				 * Get distance indicated by position of two touches
+				 * @method getDistance
+				 * @param {Event} touch1 first touch
+				 * @param {Event} touch2 second touch
+				 * @return {number} distance
+				 * @member ns.event.gesture.utils
+				 */
+				getDistance: function (touch1, touch2) {
+					var x = touch2.clientX - touch1.clientX,
+						y = touch2.clientY - touch1.clientY;
+					return Math.sqrt((x * x) + (y * y));
+				},
+
+				/**
+				 * Get scale indicated by position of the first and the last touch
+				 * @method getScale
+				 * @param {Event} start start touch
+				 * @param {Event} end end touch
+				 * @return {number} scale
+				 * @member ns.event.gesture.utils
+				 */
+				getScale: function (start, end) {
+					// need two fingers...
+					if (start.length >= 2 && end.length >= 2) {
+						return this.getDistance(end[0], end[1]) / this.getDistance(start[0], start[1]);
+					}
+					return 1;
+				},
+
+				/**
+				 * Get value of rotation indicated by position
+				 * of the first and the last touch
+				 * @method getRotation
+				 * @param {Event} start start touch
+				 * @param {Event} end end touch
+				 * @return {number} angle (deg)
+				 * @member ns.event.gesture.utils
+				 */
+				getRotation: function (start, end) {
+					// need two fingers
+					if (start.length >= 2 && end.length >= 2) {
+						return this.getAngle(end[1], end[0]) -
+							this.getAngle(start[1], start[0]);
+					}
+					return 0;
+				},
+
+				/**
+				 * Check if the direction is vertical
+				 * @method isVertical
+				 * @param {ns.event.gesture.Direction.LEFT|ns.event.gesture.Direction.RIGHT|ns.event.gesture.Direction.UP|ns.event.gesture.Direction.DOWN} direction start touch
+				 * @return {boolean}
+				 * @member ns.event.gesture.utils
+				 */
+				isVertical: function (direction) {
+					return direction === Gesture.Direction.UP || direction === Gesture.Direction.DOWN;
+				},
+
+				/**
+				 * Check if the direction is horizontal
+				 * @method isHorizontal
+				 * @param {ns.event.gesture.Direction.LEFT|ns.event.gesture.Direction.RIGHT|ns.event.gesture.Direction.UP|ns.event.gesture.Direction.DOWN} direction start touch
+				 * @return {boolean}
+				 * @member ns.event.gesture.utils
+				 */
+				isHorizontal: function (direction) {
+					return direction === Gesture.Direction.LEFT || direction === Gesture.Direction.RIGHT;
+				},
+
+				/**
+				 * Check if the direction is horizontal
+				 * @method getOrientation
+				 * @param {ns.event.gesture.Direction.LEFT|ns.event.gesture.Direction.RIGHT|ns.event.gesture.Direction.UP|ns.event.gesture.Direction.DOWN} direction
+				 * @return {boolean}
+				 * @member ns.event.gesture.utils
+				 */
+				getOrientation: function (direction) {
+					return this.isVertical(direction) ? Gesture.Orientation.VERTICAL : Gesture.Orientation.HORIZONTAL;
+				}
+			};
+			} (ns, window.Math));
+
+/*global ns, window, define */
+/*jslint nomen: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Gesture.Detector class
+ * Base class for create detectors in gestures.
+ *
+ * @class ns.event.gesture.Detector
+ */
+( function ( ns, window, undefined ) {
+	
+					/**
+				 * Local alias for {@link ns.event.gesture}
+				 * @property {Object}
+				 * @member ns.event.gesture.Manager
+				 * @private
+				 * @static
+				 */
+			var Gesture = ns.event.gesture,
+				/**
+				 * Alias for method {@link ns.util.object.merge}
+				 * @property {Function} objectMerge
+				 * @member ns.event.gesture.Detector
+				 * @private
+				 * @static
+				 */
+				objectMerge = ns.util.object.merge,
+
+				Detector = function( strategy, sender ) {
+					this.sender = sender;
+					this.strategy = strategy.create();
+					this.name = this.strategy.name;
+					this.index = this.strategy.index || 100;
+					this.options = this.strategy.options || {};
+				};
+
+			/**
+			 * Start of gesture detection of given type
+			 * @method detect
+			 * @param {string} gestureEvent
+			 * @return {Object}
+			 * @member ns.event.gesture.Detector
+			 */
+			Detector.prototype.detect = function( gestureEvent ) {
+				return this.strategy.handler( gestureEvent, this.sender, this.strategy.options );
+			};
+
+			Detector.Sender = {
+				sendEvent: function(/* eventName, detail */) {}
+			};
+
+			/**
+			 * Create plugin namespace.
+			 * @property {Object} plugin
+			 * @member ns.event.gesture.Detector
+			 */
+			Detector.plugin = {};
+
+			/**
+			 * Methods creates plugin
+			 * @method create
+			 * @param {Object} gestureHandler
+			 * @return {ns.event.gesture.Detector} gestureHandler
+			 * @member ns.event.gesture.Detector.plugin
+			 */
+			Detector.plugin.create = function( gestureHandler ) {
+
+				if ( !gestureHandler.types ) {
+					gestureHandler.types = [ gestureHandler.name ];
+				}
+
+				var detector = Detector.plugin[ gestureHandler.name ] = function( options ) {
+					this.options = objectMerge({}, gestureHandler.defaults, options);
+				};
+
+				detector.prototype.create = function() {
+					return objectMerge({
+						options: this.options
+					}, gestureHandler);
+				};
+
+				return detector;
+			};
+
+			// definition
+			Gesture.Detector = Detector;
+
+			} ( ns, window ));
+
+/*global ns, window, define */
+/*jslint nomen: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Gesture.Manager class
+ * Main class controls all gestures.
+ * @class ns.event.gesture.Manager
+ */
+( function ( ns, window, document) {
+	
+	
+				/**
+				 * Local alias for {@link ns.event.gesture}
+				 * @property {Object}
+				 * @member ns.event.gesture.Manager
+				 * @private
+				 * @static
+				 */
+			var Gesture = ns.event.gesture,
+
+				/**
+				 * Alias for method {@link ns.util.object.merge}
+				 * @property {Function} objectMerge
+				 * @member ns.event.gesture.Manager
+				 * @private
+				 * @static
+				 */
+				objectMerge = ns.util.object.merge,
+
+				/**
+				 * Device has touchable interface
+				 * @property {boolean} TOUCH_DEVICE
+				 * @member ns.event.gesture.Manager
+				 * @private
+				 * @static
+				 */
+				TOUCH_DEVICE = "ontouchstart" in window;
+
+			Gesture.Manager = (function() {
+				var instance = null,
+
+				startEvent = null,
+				isReadyDetecting = false,
+				blockMouseEvent = false,
+
+				Manager = function() {
+
+					this.instances = [];
+					this.gestureDetectors = [];
+					this.runningDetectors = [];
+					this.detectorRequestedBlock = null;
+
+					this.unregisterBlockList = [];
+
+					this.gestureEvents = null;
+					this.velocity = null;
+				};
+
+				Manager.prototype = {
+					/**
+					 * Bind start events
+					 * @method _bindStartEvents
+					 * @param {ns.event.gesture.Instance} instance gesture instance
+					 * @member ns.event.gesture.Manager
+					 * @protected
+					 */
+					_bindStartEvents: function( instance ) {
+						var element = instance.getElement();
+						if ( TOUCH_DEVICE ) {
+							element.addEventListener( "touchstart", this);
+						}
+
+						element.addEventListener( "mousedown", this);
+					},
+
+					/**
+					 * Bind move, end and cancel events
+					 * @method _bindEvents
+					 * @member ns.event.gesture.Manager
+					 * @protected
+					 */
+					_bindEvents: function( ) {
+						if ( TOUCH_DEVICE ) {
+							document.addEventListener( "touchmove", this);
+							document.addEventListener( "touchend", this);
+							document.addEventListener( "touchcancel", this);
+						}
+
+						document.addEventListener( "mousemove", this);
+						document.addEventListener( "mouseup", this);
+					},
+
+					/**
+					 * Unbind start events
+					 * @method _unbindStartEvents
+					 * @param {ns.event.gesture.Instance} instance gesture instance
+					 * @member ns.event.gesture.Manager
+					 * @protected
+					 */
+					_unbindStartEvents: function( instance ) {
+						var element = instance.getElement();
+						if ( TOUCH_DEVICE ) {
+							element.removeEventListener( "touchstart", this);
+						}
+
+						element.removeEventListener( "mousedown", this);
+					},
+
+					/**
+					 * Unbind move, end and cancel events
+					 * @method _bindEvents
+					 * @member ns.event.gesture.Manager
+					 * @protected
+					 */
+					_unbindEvents: function() {
+						if ( TOUCH_DEVICE ) {
+							document.removeEventListener( "touchmove", this);
+							document.removeEventListener( "touchend", this);
+							document.removeEventListener( "touchcancel", this);
+						}
+
+						document.removeEventListener( "mousemove", this);
+						document.removeEventListener( "mouseup", this);
+					},
+
+					/**
+					 * Handle event
+					 * @method handleEvent
+					 * @param {Event} event
+					 * @member ns.event.gesture.Manager
+					 * @protected
+					 */
+					/* jshint -W086 */
+					handleEvent: function( event ) {
+						var eventType = event.type.toLowerCase();
+
+						if ( eventType.match(/touch/) ) {
+							blockMouseEvent = true;
+						}
+
+						if ( eventType.match(/mouse/) &&
+							( blockMouseEvent || event.which !== 1 ) ) {
+							return;
+						}
+
+						switch ( event.type ) {
+							case "mousedown":
+							case "touchstart":
+								this._start( event );
+								break;
+							case "mousemove":
+							case "touchmove":
+								this._move( event );
+								break;
+							case "mouseup":
+							case "touchend":
+								this._end( event );
+								break;
+							case "touchcancel":
+								this._cancel( event );
+								break;
+						}
+					},
+
+					/**
+					 * Handler for gesture start
+					 * @method _start
+					 * @param {Event} event
+					 * @member ns.event.gesture.Manager
+					 * @protected
+					 */
+					_start: function( event ) {
+						var elem = event.currentTarget,
+							detectors = [];
+
+						if ( !isReadyDetecting ) {
+							this._resetDetecting();
+							this._bindEvents();
+
+							startEvent = this._createDefaultEventData( Gesture.Event.START, event );
+
+							this.gestureEvents = {
+								start: startEvent,
+								last: startEvent
+							};
+
+							this.velocity = {
+								event: startEvent,
+								x: 0,
+								y: 0
+							};
+
+							startEvent = objectMerge(startEvent, this._createGestureEvent(Gesture.Event.START, event));
+							isReadyDetecting = true;
+						}
+
+						this.instances.forEach(function( instance ) {
+							if ( instance.getElement() === elem ) {
+								detectors = detectors.concat( instance.getGestureDetectors() );
+							}
+						}, this);
+
+						detectors.sort(function(a, b) {
+							if(a.index < b.index) {
+								return -1;
+							} else if(a.index > b.index) {
+								return 1;
+							}
+							return 0;
+						});
+
+						this.gestureDetectors = this.gestureDetectors.concat( detectors );
+
+						this._detect(detectors, startEvent);
+					},
+
+					/**
+					 * Handler for gesture move
+					 * @method _move
+					 * @param {Event} event
+					 * @member ns.event.gesture.Manager
+					 * @protected
+					 */
+					_move: function( event ) {
+						if ( !isReadyDetecting ) {
+							return;
+						}
+
+						event = this._createGestureEvent(Gesture.Event.MOVE, event);
+						this._detect(this.gestureDetectors, event);
+
+						this.gestureEvents.last = event;
+					},
+
+					/**
+					 * Handler for gesture end
+					 * @method _end
+					 * @param {Event} event
+					 * @member ns.event.gesture.Manager
+					 * @protected
+					 */
+					_end: function( event ) {
+
+						event = objectMerge(
+							{},
+							this.gestureEvents.last,
+							this._createDefaultEventData(Gesture.Event.END, event)
+						);
+
+						if ( event.pointers.length > 0 ) {
+							return;
+						}
+
+						this._detect(this.gestureDetectors, event);
+
+						this.unregisterBlockList.forEach(function( instance ) {
+							this.unregist( instance );
+						}, this);
+
+						this._resetDetecting();
+						blockMouseEvent = false;
+					},
+
+					/**
+					 * Handler for gesture cancel
+					 * @method _cancel
+					 * @param {Event} event
+					 * @member ns.event.gesture.Manager
+					 * @protected
+					 */
+					_cancel: function( event ) {
+
+						event = objectMerge(
+							{},
+							this.gestureEvents.last,
+							this._createDefaultEventData(Gesture.Event.CANCEL, event)
+						);
+
+						this._detect(this.gestureDetectors, event);
+
+						this.unregisterBlockList.forEach(function( instance ) {
+							this.unregist( instance );
+						}, this);
+
+						this._resetDetecting();
+						blockMouseEvent = false;
+					},
+
+					/**
+					 * Detect gesture
+					 * @method _detect
+					 * @param {Event} event
+					 * @member ns.event.gesture.Manager
+					 * @protected
+					 */
+					_detect: function( detectors, event ) {
+						var finishedDetectors = [];
+
+						detectors.forEach(function( detector ) {
+							var result;
+
+							if ( this.detectorRequestedBlock ) {
+								return;
+							}
+
+							result = detector.detect( event );
+							if ( result & Gesture.Result.RUNNING ) {
+								if ( this.runningDetectors.indexOf( detector ) < 0 ) {
+									this.runningDetectors.push( detector );
+								}
+							}
+
+							if ( result & Gesture.Result.FINISHED ) {
+								finishedDetectors.push( detector );
+							}
+
+							if ( result & Gesture.Result.BLOCK ) {
+								this.detectorRequestedBlock = detector;
+							}
+
+						}, this);
+
+						// remove finished detectors.
+						finishedDetectors.forEach(function( detector ) {
+							var idx;
+
+							idx = this.gestureDetectors.indexOf( detector );
+							if ( idx > -1 ) {
+								this.gestureDetectors.splice(idx, 1);
+							}
+
+							idx = this.runningDetectors.indexOf( detector );
+							if ( idx > -1 ) {
+								this.runningDetectors.splice(idx, 1);
+							}
+						}, this);
+
+						// remove all detectors except the detector that return block result
+						if ( this.detectorRequestedBlock ) {
+							// send to cancel event.
+							this.runningDetectors.forEach(function( detector ) {
+								var cancelEvent = objectMerge({}, event, {
+									eventType: Gesture.Event.BLOCKED
+								});
+								detector.detect( cancelEvent );
+							});
+							this.runningDetectors.length = 0;
+
+							// remove all detectors.
+							this.gestureDetectors.length = 0;
+							if ( finishedDetectors.indexOf( this.detectorRequestedBlock ) < 0 ) {
+								this.gestureDetectors.push( this.detectorRequestedBlock );
+							}
+						}
+					},
+
+					/**
+					 * Reset of gesture manager detector
+					 * @method _resetDetecting
+					 * @member ns.event.gesture.Manager
+					 * @protected
+					 */
+					_resetDetecting: function() {
+						isReadyDetecting = false;
+						startEvent = null
+
+						this.gestureDetectors.length = 0;
+						this.runningDetectors.length = 0;
+						this.detectorRequestedBlock = null;
+
+						this.gestureEvents = null;
+						this.velocity = null;
+
+						this._unbindEvents();
+					},
+
+					/**
+					 * Create default event data
+					 * @method _createDefaultEventData
+					 * @param {string} type event type
+					 * @param {Event} event source event
+					 * @return {Object} default event data
+					 * @return {string} return.eventType
+					 * @return {number} return.timeStamp
+					 * @return {Touch} return.pointer
+					 * @return {TouchList} return.pointers
+					 * @return {Event} return.srcEvent
+					 * @return {Function} return.preventDefault
+					 * @return {Function} return.stopPropagation
+					 * @member ns.event.gesture.Manager
+					 * @protected
+					 */
+					_createDefaultEventData: function( type, event ) {
+						var pointers = event.touches ?
+								event.touches :
+									event.type === "mouseup" ? [] : ( event.identifier=1 && [event] ),
+							pointer = pointers[0],
+							timeStamp = new Date().getTime();
+
+						return {
+							eventType: type,
+							timeStamp: timeStamp,
+							pointer: pointer,
+							pointers: pointers,
+
+							srcEvent: event,
+							preventDefault: function() {
+								this.srcEvent.preventDefault();
+							},
+							stopPropagation: function() {
+								this.srcEvent.stopPropagation();
+							}
+						};
+					},
+
+					/**
+					 * Create gesture event
+					 * @method _createGestureEvent
+					 * @param {string} type event type
+					 * @param {Event} event source event
+					 * @return {Object} gesture event consist from Event class and additional properties
+					 * @return {number} return.deltaTime
+					 * @return {number} return.deltaX
+					 * @return {number} return.deltaY
+					 * @return {number} return.velocityX
+					 * @return {number} return.velocityY
+					 * @return {number} return.estimatedX
+					 * @return {number} return.estimatedY
+					 * @return {number} return.estimatedDeltaX
+					 * @return {number} return.estimatedDeltaY
+					 * @return {number} return.distance
+					 * @return {number} return.angle
+					 * @return {ns.event.gesture.Direction.LEFT|ns.event.gesture.Direction.RIGHT|ns.event.gesture.Direction.UP|ns.event.gesture.Direction.DOWN} return.direction
+					 * @return {number} return.scale
+					 * @return {number} return.rotation (deg)
+					 * @return {Event} return.startEvent
+					 * @return {Event} return.lastEvent
+					 * @member ns.event.gesture.Manager
+					 * @protected
+					 */
+					_createGestureEvent: function( type, event ) {
+						var ev = this._createDefaultEventData( type, event ),
+							startEvent = this.gestureEvents.start,
+							lastEvent = this.gestureEvents.last,
+							velocityEvent = this.velocity.event,
+							delta = {
+								time: ev.timeStamp - startEvent.timeStamp,
+								x: ev.pointer.clientX - startEvent.pointer.clientX,
+								y: ev.pointer.clientY - startEvent.pointer.clientY
+							},
+							deltaFromLast = {
+								x: ev.pointer.clientX - lastEvent.pointer.clientX,
+								y: ev.pointer.clientY - lastEvent.pointer.clientY
+							},
+							velocity = this.velocity,
+							timeDifference = Gesture.defaults.estimatedPointerTimeDifference, /* pause time threshold.util. tune the number to up if it is slow */
+							estimated;
+
+						// reset start event for multi touch
+						if( startEvent && ev.pointers.length !== startEvent.pointers.length ) {
+							startEvent.pointers = [];
+							[].forEach.call(ev.pointers, function( pointer ) {
+								startEvent.pointers.push( objectMerge({}, pointer) );
+							});
+						}
+
+						if ( ev.timeStamp - velocityEvent.timeStamp > Gesture.defaults.updateVelocityInterval ) {
+							velocity = Gesture.utils.getVelocity(
+									ev.timeStamp - velocityEvent.timeStamp,
+									ev.pointer.clientX - velocityEvent.pointer.clientX,
+									ev.pointer.clientY - velocityEvent.pointer.clientY
+							);
+
+							objectMerge(this.velocity, velocity, {
+								event: ev
+							});
+						}
+
+						estimated = {
+							x: Math.round( ev.pointer.clientX + ( timeDifference * velocity.x * (deltaFromLast.x < 0 ? -1 : 1) ) ),
+							y: Math.round( ev.pointer.clientY + ( timeDifference * velocity.y * (deltaFromLast.y < 0 ? -1 : 1) ) )
+						};
+
+						// Prevent that point goes back even though direction is not changed.
+						if ( (deltaFromLast.x < 0 && estimated.x > lastEvent.estimatedX) ||
+							(deltaFromLast.x > 0 && estimated.x < lastEvent.estimatedX) ) {
+							estimated.x = lastEvent.estimatedX;
+						}
+
+						if ( (deltaFromLast.y < 0 && estimated.y > lastEvent.estimatedY) ||
+							(deltaFromLast.y > 0 && estimated.y < lastEvent.estimatedY) ) {
+							estimated.y = lastEvent.estimatedY;
+						}
+
+						objectMerge(ev, {
+							deltaTime: delta.time,
+							deltaX: delta.x,
+							deltaY: delta.y,
+
+							velocityX: velocity.x,
+							velocityY: velocity.y,
+
+							estimatedX: estimated.x,
+							estimatedY: estimated.y,
+							estimatedDeltaX: estimated.x - startEvent.pointer.clientX,
+							estimatedDeltaY: estimated.y - startEvent.pointer.clientY,
+
+							distance: Gesture.utils.getDistance(startEvent.pointer, ev.pointer),
+
+							angle: Gesture.utils.getAngle(startEvent.pointer, ev.pointer),
+
+							direction: Gesture.utils.getDirection(startEvent.pointer, ev.pointer),
+
+							scale: Gesture.utils.getScale(startEvent.pointers, ev.pointers),
+							rotation: Gesture.utils.getRotation(startEvent.pointers, ev.pointers),
+
+							startEvent: startEvent,
+							lastEvent: lastEvent
+						});
+
+						return ev;
+					},
+
+					/**
+					 * Register instance of gesture
+					 * @method register
+					 * @param {ns.event.gesture.Instance} instance gesture instance
+					 * @member ns.event.gesture.Manager
+					 */
+					register: function( instance ) {
+						var idx = this.instances.indexOf( instance );
+						if ( idx < 0 ) {
+							this.instances.push( instance );
+							this._bindStartEvents( instance );
+						}
+					},
+
+					/**
+					 * Unregister instance of gesture
+					 * @method unregister
+					 * @param {ns.event.gesture.Instance} instance gesture instance
+					 * @member ns.event.gesture.Manager
+					 */
+					unregister: function( instance ) {
+						var idx;
+
+						if ( !!this.gestureDetectors.length ) {
+							this.unregisterBlockList.push( instance );
+							return;
+						}
+
+						idx = this.instances.indexOf( instance );
+						if ( idx > -1 ) {
+							this.instances.splice( idx, 1 );
+							this._unbindStartEvents( instance );
+						}
+
+						if ( !this.instances.length ) {
+							this._destroy();
+						}
+					},
+
+					/**
+					 * Destroy instance of Manager
+					 * @method _destroy
+					 * @member ns.event.gesture.Manager
+					 * @protected
+					 */
+					_destroy: function() {
+						this._resetDetecting();
+
+						this.instances.length = 0;
+						this.unregisterBlockList.length = 0;
+
+						blockMouseEvent = false;
+						instance = null;
+					}
+
+				};
+
+				return {
+					getInstance: function() {
+						return instance ? instance : ( instance = new Manager() );
+					}
+				};
+			})();
+			} ( ns, window, window.document ) );
+
+/*global ns, window, define */
+/*jslint nomen: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Gesture.Instance class
+ * Creates instance of gesture manager on element.
+ * @class ns.event.gesture.Instance
+ */
+( function ( ns, window, undefined ) {
+	
+					/**
+				 * Local alias for {@link ns.event.gesture}
+				 * @property {Object}
+				 * @member ns.event.gesture.Instance
+				 * @private
+				 * @static
+				 */
+			var Gesture = ns.event.gesture,
+				/**
+				 * Local alias for {@link ns.event.gesture.Detector}
+				 * @property {Object}
+				 * @member ns.event.gesture.Instance
+				 * @private
+				 * @static
+				 */
+				Detector = ns.event.gesture.Detector,
+				/**
+				 * Local alias for {@link ns.event.gesture.Manager}
+				 * @property {Object}
+				 * @member ns.event.gesture.Instance
+				 * @private
+				 * @static
+				 */
+				Manager = ns.event.gesture.Manager,
+				/**
+				 * Local alias for {@link ns.event}
+				 * @property {Object}
+				 * @member ns.event.gesture.Instance
+				 * @private
+				 * @static
+				 */
+				events = ns.event,
+				/**
+				 * Alias for method {@link ns.util.object.merge}
+				 * @property {Function} merge
+				 * @member ns.event.gesture.Instance
+				 * @private
+				 * @static
+				 */
+				merge = ns.util.object.merge;
+
+			Gesture.Instance = function( element, options ) {
+
+				this.element = element;
+				this.eventDetectors = [];
+
+				this.options = merge({}, Gesture.defaults, options);
+				this.gestureManager = null;
+
+				this._init();
+			};
+
+			Gesture.Instance.prototype = {
+				/**
+				 * Initialize gesture instance
+				 * @method _init
+				 * @member ns.event.gesture.Instance
+				 * @protected
+				 */
+				_init: function() {
+					this.gestureManager = Manager.getInstance();
+					this.eventSender = merge({}, Detector.Sender, {
+						sendEvent: this.trigger.bind(this)
+					});
+				},
+
+				/**
+				 * Find gesture detector
+				 * @method _findGestureDetector
+				 * @param {string} gesture gesture
+				 * @member ns.event.gesture.Instance
+				 * @protected
+				 */
+				_findGestureDetector: function( gesture ) {
+					var detectors = Detector.plugin,
+						detector, name;
+					for ( name in detectors ) {
+						if ( detectors.hasOwnProperty( name ) ) {
+							detector = detectors[ name ];
+							if ( detector.prototype.types.indexOf( gesture ) > -1 ) {
+								return detector;
+							}
+						}
+					}
+				},
+
+				/**
+				 * Set options
+				 * @method setOptions
+				 * @param {Object} options options
+				 * @chainable
+				 * @member ns.event.gesture.Instance
+				 */
+				setOptions: function( options ) {
+					merge(this.options, options);
+					return this;
+				},
+
+				/**
+				 * Add detector
+				 * @method addDetector
+				 * @param {Object} detectorStrategy strategy
+				 * @chainable
+				 * @member ns.event.gesture.Instance
+				 */
+				addDetector: function( detectorStrategy ) {
+					var detector = new Detector( detectorStrategy, this.eventSender ),
+						alreadyHasDetector = !!this.eventDetectors.length;
+
+					this.eventDetectors.push(detector);
+
+					if ( !!this.eventDetectors.length && !alreadyHasDetector ) {
+						this.gestureManager.register(this);
+					}
+
+					return this;
+				},
+
+				/**
+				 * Remove detector
+				 * @method removeDetector
+				 * @param {Object} detectorStrategy strategy
+				 * @chainable
+				 * @member ns.event.gesture.Instance
+				 */
+				removeDetector: function( detectorStrategy ) {
+					var idx = this.eventDetectors.indexOf( detectorStrategy );
+
+					if ( idx > -1 ) {
+						this.eventDetectors.splice(idx, 1);
+					}
+
+					if ( !this.eventDetectors.length ) {
+						this.gestureManager.unregister(this);
+					}
+
+					return this;
+				},
+
+				/**
+				 * Triggers the gesture event
+				 * @method trigger
+				 * @param {string} gesture gesture name
+				 * @param {Object} eventInfo data provided to event object
+				 * @member ns.event.gesture.Instance
+				 */
+				trigger: function( gesture, eventInfo ) {
+					events.trigger(this.element, gesture, eventInfo, false);
+				},
+
+				/**
+				 * Get HTML element assigned to gesture event instance
+				 * @method getElement
+				 * @member ns.event.gesture.Instance
+				 */
+				getElement: function() {
+					return this.element;
+				},
+
+				/**
+				 * Get gesture event detectors assigned to instance
+				 * @method getGestureDetectors
+				 * @member ns.event.gesture.Instance
+				 */
+				getGestureDetectors: function() {
+					return this.eventDetectors;
+				},
+
+				/**
+				 * Destroy instance
+				 * @method destroy
+				 * @member ns.event.gesture.Instance
+				 */
+				destroy: function( ) {
+					this.element = null;
+					this.eventHandlers = {};
+					this.gestureManager = null;
+					this.eventSender = null;
+					this.eventDetectors.length = 0;
+				}
+			};
+			} ( ns, window ) );
+
+/*global ns, window, define */
+/*jslint nomen: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * # Gesture Plugin: drag
+ * Plugin enables drag event.
+ *
+ * @class ns.event.gesture.Drag
+ */
+( function ( ns, window, undefined ) {
+	
+	
+				/**
+				 * Local alias for {@link ns.event.gesture}
+				 * @property {Object}
+				 * @member ns.event.gesture.Drag
+				 * @private
+				 * @static
+				 */
+			var Gesture = ns.event.gesture,
+				/**
+				 * Local alias for {@link ns.event.gesture.Detector}
+				 * @property {Object}
+				 * @member ns.event.gesture.Drag
+				 * @private
+				 * @static
+				 */
+				Detector = ns.event.gesture.Detector,
+				/**
+				 * Alias for method {@link ns.util.object.merge}
+				 * @property {Function} merge
+				 * @member ns.event.gesture.Drag
+				 * @private
+				 * @static
+				 */
+				merge = ns.util.object.merge,
+
+				// TODO UA test will move to support.
+				tizenBrowser = !!window.navigator.userAgent.match(/tizen/i);
+
+			ns.event.gesture.Drag = Detector.plugin.create({
+
+				/**
+				 * Gesture name
+				 * @property {string} [name="drag"]
+				 * @member ns.event.gesture.Drag
+				 */
+				name: "drag",
+
+				/**
+				 * Gesture Index
+				 * @property {number} [index=400]
+				 * @member ns.event.gesture.Drag
+				 */
+				index: 500,
+
+				/**
+				 * Array of posible drag events
+				 * @property {string[]} types
+				 * @member ns.event.gesture.Drag
+				 */
+				types: ["drag", "dragstart", "dragend", "dragcancel"],
+
+				/**
+				 * Default values for drag gesture
+				 * @property {Object} defaults
+				 * @property {boolean} [defaults.blockHorizontal=false]
+				 * @property {boolean} [defaults.blockVertical=false]
+				 * @property {number} [defaults.threshold=10]
+				 * @property {number} [defaults.angleThreshold=20]
+				 * @property {number} [defaults.delay=0]
+				 * @member ns.event.gesture.Drag
+				 */
+				defaults: {
+					blockHorizontal: false,
+					blockVertical: false,
+					threshold: 10,
+					angleThreshold: 20,
+					delay: 0
+				},
+
+				/**
+				 * Triggered
+				 * @property {boolean} [triggerd=false]
+				 * @member ns.event.gesture.Drag
+				 */
+				triggerd: false,
+
+				/**
+				 * Handler for drag gesture
+				 * @method handler
+				 * @param {Event} gestureEvent gesture event
+				 * @param {Object} sender event's sender
+				 * @param {Object} options options
+				 * @return {ns.event.gesture.Result.PENDING|ns.event.gesture.Result.END|ns.event.gesture.Result.FINISHED|ns.event.gesture.Result.BLOCK}
+				 * @member ns.event.gesture.Drag
+				 */
+				handler: function( gestureEvent, sender, options ) {
+					var ge = gestureEvent,
+						threshold = options.threshold,
+						angleThreshold = options.angleThreshold,
+						result = Gesture.Result.PENDING,
+						event = {
+							drag: this.types[0],
+							start: this.types[1],
+							end: this.types[2],
+							cancel: this.types[3]
+						},
+						direction = ge.direction,
+						angle = Math.abs(ge.angle);
+
+					if ( !this.triggerd && ge.eventType === Gesture.Event.MOVE ) {
+						if ( Math.abs(ge.deltaX) < threshold && Math.abs(ge.deltaY) < threshold ) {
+							if ( !tizenBrowser ) {
+								ge.preventDefault();
+							}
+							return Gesture.Result.PENDING;
+						}
+
+						if ( options.delay && ge.deltaTime < options.delay ) {
+							if ( !tizenBrowser ) {
+								ge.preventDefault();
+							}
+							return Gesture.Result.PENDING;
+						}
+
+						if ( options.blockHorizontal && Gesture.utils.isHorizontal( ge.direction ) ||
+							options.blockVertical && Gesture.utils.isVertical( ge.direction ) ) {
+							return Gesture.Result.FINISHED;
+						}
+
+						if ( options.blockHorizontal && ( angle < 90 - angleThreshold || angle > 90 + angleThreshold ) ) {
+							return Gesture.Result.FINISHED;
+						}
+
+						if ( options.blockVertical && ( angle > 0 + angleThreshold && angle < 180 - angleThreshold ) ) {
+							return Gesture.Result.FINISHED;
+						}
+
+						this.fixedStartPointX = 0;
+						this.fixedStartPointY = 0;
+						if ( Gesture.utils.isHorizontal( ge.direction ) ) {
+							this.fixedStartPointX = ( ge.deltaX < 0 ? 1 : -1 ) * threshold;
+						} else {
+							this.fixedStartPointY = ( ge.deltaY < 0 ? 1 : -1 ) * threshold;
+						}
+					}
+
+					if ( options.blockHorizontal ) {
+						direction = ge.deltaY < 0 ? Gesture.Direction.UP : Gesture.Direction.DOWN;
+					}
+
+					if ( options.blockVertical ) {
+						direction = ge.deltaX < 0 ? Gesture.Direction.LEFT : Gesture.Direction.RIGHT;
+					}
+
+					ge = merge({}, ge, {
+						deltaX: ge.deltaX + this.fixedStartPointX,
+						deltaY: ge.deltaY + this.fixedStartPointY,
+						estimatedDeltaX: ge.estimatedDeltaX + this.fixedStartPointX,
+						estimatedDeltaY: ge.estimatedDeltaY + this.fixedStartPointY,
+
+						direction: direction
+					});
+
+					switch( ge.eventType ) {
+						case Gesture.Event.START:
+							this.triggerd = false;
+							break;
+						case Gesture.Event.MOVE:
+
+							result = Gesture.Result.RUNNING;
+							if ( !this.triggerd ) {
+								sender.sendEvent( event.start, ge );
+							}
+							sender.sendEvent( event.drag, ge );
+							ge.preventDefault();
+							this.triggerd = true;
+							break;
+
+						case Gesture.Event.BLOCKED:
+						case Gesture.Event.END:
+
+							result = Gesture.Result.FINISHED;
+							if ( this.triggerd ) {
+								sender.sendEvent( event.end, ge );
+								ge.preventDefault();
+								this.triggerd = false;
+							}
+							break;
+
+						case Gesture.Event.CANCEL:
+
+							result = Gesture.Result.FINISHED;
+							if ( this.triggerd ) {
+								sender.sendEvent( event.cancel, ge );
+								ge.preventDefault();
+								this.triggerd = false;
+							}
+							break;
+
+					}
+
+					return result;
+				}
+			});
+			} ( ns, window ) );
+
+/*global ns, window, define */
+/*jslint nomen: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Gesture Plugin: swipe
+ * Plugin enables swipe event.
+ *
+ * @class ns.event.gesture.Swipe
+ */
+( function ( ns, window, undefined ) {
+	
+    
+				/**
+				 * Local alias for {@link ns.event.gesture}
+				 * @property {Object}
+				 * @member ns.event.gesture.Swipe
+				 * @private
+				 * @static
+				 */
+			var Gesture = ns.event.gesture,
+				/**
+				 * Local alias for {@link ns.event.gesture.Detector}
+				 * @property {Object}
+				 * @member ns.event.gesture.Swipe
+				 * @private
+				 * @static
+				 */
+				Detector = ns.event.gesture.Detector;
+
+			ns.event.gesture.Swipe = Detector.plugin.create({
+				/**
+				 * Gesture name
+				 * @property {string} [name="swipe"]
+				 * @member ns.event.gesture.Swipe
+				 */
+				name: "swipe",
+
+				/**
+				 * Gesture Index
+				 * @property {number} [index=400]
+				 * @member ns.event.gesture.Swipe
+				 */
+				index: 400,
+
+				/**
+				 * Default values for swipe gesture
+				 * @property {Object} defaults
+				 * @property {number} [defaults.timeThreshold=400]
+				 * @property {number} [defaults.velocity=0.6]
+				 * @property {ns.event.gesture.HORIZONTAL|ns.event.gesture.VERTICAL} [defaults.orientation=ns.event.gesture.HORIZONTAL]
+				 * @member ns.event.gesture.Swipe
+				 */
+				defaults: {
+					timeThreshold: 400,
+					velocity: 0.6,
+					orientation: Gesture.Orientation.HORIZONTAL
+				},
+
+				/**
+				 * Handler for swipe gesture
+				 * @method handler
+				 * @param {Event} gestureEvent gesture event
+				 * @param {Object} sender event's sender
+				 * @param {Object} options options
+				 * @return {ns.event.gesture.Result.PENDING|ns.event.gesture.Result.END|ns.event.gesture.Result.FINISHED|ns.event.gesture.Result.BLOCK}
+				 * @member ns.event.gesture.Swipe
+				 */
+				handler: function( gestureEvent, sender, options ) {
+					var ge = gestureEvent,
+						result = Gesture.Result.PENDING;
+
+					if ( ge.eventType !== Gesture.Event.END ) {
+						return result;
+					}
+
+					if ( ( ge.deltaTime > options.timeThreshold ) ||
+						( options.orientation !== Gesture.utils.getOrientation( ge.direction ) ) ) {
+						result = Gesture.Result.FINISHED;
+						return result;
+					}
+
+					if( ge.velocityX > options.velocity || ge.velocityY > options.velocity ) {
+						sender.sendEvent( this.name, gestureEvent );
+						result = Gesture.Result.FINISHED | Gesture.Result.BLOCK;
+					}
+
+					return result;
+				}
+			});
+			} ( ns, window ) );
+
+/*global window, define, CustomEvent */
+/*jslint nomen: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*
+ * @class ns.event.gesture
+ */
+(function (ns) {
+	
+				var instances = [],
+				gesture = ns.event.gesture || {};
+
+			/**
+			 * Find instance by element
+			 * @method findInstance
+			 * @param {HTMLElement} element
+			 * @return {ns.event.gesture.Instance}
+			 * @member ns.event
+			 * @static
+			 * @private
+			 */
+			function findInstance(element) {
+				var instance;
+				instances.forEach(function(item) {
+					if (item.element === element) {
+						instance = item.instance;
+					}
+				});
+				return instance;
+			}
+
+			/**
+			 * Remove instance from instances by element
+			 * @method removeInstance
+			 * @param {HTMLElement} element
+			 * @member ns.event
+			 * @static
+			 * @private
+			 */
+			function removeInstance(element) {
+				instances.forEach(function(item, key) {
+					if (item.element === element) {
+						instances.splice(key, 1);
+					}
+				});
+			}
+
+			/**
+			 * Enable gesture handlingo on given HTML element or object
+			 * @method enableGesture
+			 * @param {HTMLElement} element
+			 * @param {...Object} [gesture] Gesture object {@link ns.event.gesture}
+			 * @member ns.event
+			 */
+			ns.event.enableGesture = function() {
+				var element = arguments[0],
+					gestureInstance = findInstance( element ),
+					length = arguments.length,
+					i = 1;
+
+				if ( !gestureInstance ) {
+					gestureInstance = new gesture.Instance(element);
+					instances.push({element: element, instance: gestureInstance});
+				}
+
+				for ( ; i < length; i++ ) {
+					gestureInstance.addDetector( arguments[i] );
+				}
+			};
+
+			/**
+			 * Disable gesture handling from given HTML element or object
+			 * @method disableGesture
+			 * @param {HTMLElement} element
+			 * @param {...Object} [gesture] Gesture object {@link ns.event.gesture}
+			 * @member ns.event
+			 */
+			ns.event.disableGesture = function() {
+				var element = arguments[0],
+					gestureInstance = findInstance( element ),
+					length = arguments.length,
+					i = 1;
+
+				if ( !gestureInstance ) {
+					return;
+				}
+
+				if ( length > 1 ) {
+					gestureInstance.removeDetector( arguments[i] );
+				} else {
+					gestureInstance.destroy();
+					removeInstance( element );
+				}
+			};
+
+			ns.event.gesture = gesture;
+			}(ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true */
+/**
+ * #Expandable Header
+ * ExpandableHeader is to expand header component when user scroll over scroll top position.
+ * This component is used when header has the long title text.
+ *
+ * TAU provide the HeaderMarqueeStyle helper method. ( tau.helper.HeaderMarqueeStyle.create method )
+ * This helper method help to developer for implement more easy.
+ * When the app (or the list view) is opened, text on the title bar is not sliding.
+ * After pulling down the list to enlarge the title bar, text on the title bar is horizontally (text) sliding (marquee)
+ * once if it is longer than a permitted limit by winset.
+ *
+ * ## HTML Example
+ *
+ *      @example
+ *      <div class="ui-page ui-scroll-on">
+ *          <header class="ui-header ui-expandable-header">
+ *              <div class="ui-title">Long Title (Sub text)</div>
+ *          </header>
+ *          ...
+ *      </div>
+ *
+ * ## JS Example
+ *
+ *     @example (Use Helper)
+ *     <style>
+ *         (function() {
+ *              var page = document.getElementById("expandableHeaderPage"),
+ *                      header = page.querySelector("#expandableHeader"),
+ *                      title = header.querySelector(".ui-title"),
+ *                      headerHelper;
+ *
+ *              page.addEventListener("pagebeforeshow", function() {
+ *                  headerHelper = tau.helper.HeaderMarqueeStyle.create(header, title, {
+ *                      scrollElement: page
+ *                  });
+ *              });
+ *
+ *              page.addEventListener("pagehide", function() {
+ *                  headerHelper.destroy();
+ *              });
+ *          })();
+ *     </style>
+ *
+ *     @example (Use only ExpandableHeader)
+ *     <style>
+ *         (function() {
+ *              var page = document.getElementById("expandableHeaderPage"),
+ *                      header = page.querySelector("#expandableHeader");
+ *
+ *              page.addEventListener("pagebeforeshow", function() {
+ *                  tau.widget.ExpandableHeader(header, {
+ *                      scrollElement: page
+ *                  });
+ *              });
+ *          })();
+ *     </style>
+ * @author Hyeoncheol Choi <hc7.choi@samsung.com>
+ */
+(function (document, ns) {
+	
+	
+			var BaseWidget = ns.widget.BaseWidget,
+				Marquee = ns.widget.Marquee,
+				engine = ns.engine,
+				events = ns.event,
+				Gesture = ns.event.gesture,
+				object = ns.util.object,
+				CustomEvents = {
+					EXPAND: "headerexpand",
+					COLLAPSE: "headercollapse",
+					COMPLETE: "headerexpandcomplete"
+				},
+
+				ExpandableHeader = function () {
+					var self = this;
+
+					self._ui = {};
+					self._expanded = false;
+					self._basicText = null;
+				},
+
+				SCROLL_END_THRESHOLD = 500,
+				/**
+				 * Dictionary for page related css class names
+				 * @property {Object} classes
+				 * @member ns.widget.wearable.ExpandableHeader
+				 * @static
+				 * @readonly
+				 */
+				classes = {
+					ExpandableHeader: "ui-expandable-header",
+					EXPAND: "ui-header-expand",
+					BASIC: "ui-header-basic",
+					TITLE: "ui-title"
+				},
+				prototype = new BaseWidget();
+
+			ExpandableHeader.classes = classes;
+			ExpandableHeader.events = CustomEvents;
+
+			function bindDragEvents(element) {
+				var self = this;
+
+				events.on(element, "scroll", self, false);
+				events.on(self.element, "vclick", self, false);
+			};
+
+			function unBindDragEvents(element) {
+				var self = this;
+
+				events.off(element, "scroll", self, false);
+				events.off(self.element, "vclick", self, false);
+			};
+			/**
+			 * Handle events
+			 * @method handleEvent
+			 * @param {Event} event
+			 * @member ns.widget.wearable.ExpandableHeader
+			 */
+			prototype.handleEvent = function(event) {
+				var self = this;
+				switch (event.type) {
+					case "scroll":
+						self._onScroll(event);
+						break;
+					case "vclick":
+						self._onClick(event);
+						break;
+				}
+			};
+			/**
+			 * Configure Expandable Header widget
+			 * @method _configure
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @protected
+			 * @member ns.widget.wearable.ExpandableHeader
+			 */
+			prototype._configure = function(){
+				/**
+				 * Widget options
+				 * @property {HTMLElement} [options.scrollElement=document.getElementById("ui-page")] Delare scrollable element that contains this component. Default is header parent node.
+				 */
+				object.merge(this.options, {
+					scrollElement: null
+				});
+			};
+
+			prototype._build = function(element) {
+				if (!element.classList.contains(classes.ExpandableHeader)) {
+					element.classList.add(classes.ExpandableHeader);
+				}
+				return element;
+			};
+			/**
+			 * Init Exapndable Header component
+			 * @method _init
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @protected
+			 * @member ns.widget.wearable.ExpandableHeader
+			 */
+			prototype._init = function (element) {
+				this._initElements(element);
+				return element;
+			};
+
+			/**
+			 * Init element that related to Exapndable Header component
+			 * @method _init
+			 * @param {HTMLElement} element
+			 * @protected
+			 * @member ns.widget.wearable.ExpandableHeader
+			 */
+			prototype._initElements = function(element) {
+				var self = this,
+					ui = self._ui,
+					options = self.options,
+					basicHeight = element.offsetHeight,
+					titleElement,
+					scrollElement;
+
+				titleElement = element.getElementsByClassName(classes.TITLE)[0];
+				if (options.scrollElement) {
+					if (typeof options.scrollElement === "string") {
+						scrollElement = headerElement.querySelector(options.scrollElement);
+					} else {
+						scrollElement = options.scrollElement;
+					}
+				} else {
+					scrollElement = element.parentNode;
+				}
+
+				element.classList.add(classes.EXPAND);
+				events.trigger(element, CustomEvents.EXPAND);
+				self._topOffset = element.offsetHeight - basicHeight;
+				scrollElement.scrollTop = self._topOffset;
+				ui._titleElement = titleElement;
+				ui._scrollElement = scrollElement;
+			};
+
+			/**
+			 * click event handler
+			 * @method _onClick
+			 * @param {Event} event
+			 * @protected
+			 * @member ns.widget.wearable.ExpandableHeader
+			 */
+			prototype._onClick = function(event) {
+				var self = this,
+					element = self.element,
+					scrollElement = self._ui._scrollElement;
+
+				if(element.classList.contains(classes.EXPAND)) {
+					scrollElement.scrollTop = scrollElement.scrollTop - self._topOffset;
+					element.classList.remove(classes.EXPAND);
+					element.classList.add(classes.BASIC);
+					events.trigger(element, CustomEvents.COLLAPSE);
+				}
+			};
+
+			/**
+			 * scroll event handler
+			 * @method _onScroll
+			 * @param {Event} event
+			 * @protected
+			 * @member ns.widget.wearable.ExpandableHeader
+			 */
+			prototype._onScroll = function(event) {
+				var self = this,
+					element = self.element,
+					options = self.options,
+					ui = self._ui,
+					scrollElement = ui._scrollElement;
+
+				if (element.classList.contains(classes.EXPAND)) {
+					if (scrollElement.scrollTop === 0) {
+						events.trigger(element, CustomEvents.COMPLETE);
+					} else if (scrollElement.scrollTop > self._topOffset) {
+						scrollElement.scrollTop = scrollElement.scrollTop - self._topOffset;
+						element.classList.remove(classes.EXPAND);
+						element.classList.add(classes.BASIC);
+						events.trigger(element, CustomEvents.COLLAPSE);
+					}
+				}
+
+				clearTimeout(self._timer);
+				self._timer = setTimeout(self._onScrollEnd.bind(self, event), SCROLL_END_THRESHOLD);
+			};
+
+			/**
+			 * scrollEnd event handler. scrollEnd is made component self.
+			 * @method _onScrollEnd
+			 * @param {Event} event
+			 * @protected
+			 * @member ns.widget.wearable.ExpandableHeader
+			 */
+			prototype._onScrollEnd = function(event) {
+				var self = this,
+					scrollElement = self._ui._scrollElement,
+					element = self.element;
+
+				if (scrollElement.scrollTop === 0 && element.classList.contains(classes.BASIC)) {
+					element.classList.add(classes.EXPAND);
+					element.classList.remove(classes.BASIC);
+					scrollElement.scrollTop = self._topOffset;
+					events.trigger(element, CustomEvents.EXPAND);
+				}
+			};
+
+			/**
+			 * Bind events to widget
+			 * @method _bindEvents
+			 * @param {HTMLElement} element
+			 * @protected
+			 * @member ns.widget.wearable.ExpandableHeader
+			 */
+			prototype._bindEvents = function () {
+				var self = this;
+
+				bindDragEvents.call(self, self._ui._scrollElement);
+			};
+
+			prototype._unbindEvents = function () {
+				var self = this;
+
+				unBindDragEvents.call(self, self._ui._scrollElement);
+			};
+			/**
+			 * Refresh widget structure
+			 * @method _refresh
+			 * @protected
+			 * @member ns.widget.wearable.ExpandableHeader
+			 */
+			prototype._refresh = function () {
+				var self = this;
+				self._initElements(self.element);
+			};
+
+			/**
+			 * Destroy widget
+			 * @method _destroy
+			 * @protected
+			 * @member ns.widget.wearable.ExpandableHeader
+			 */
+			prototype._destroy = function () {
+				this._unbindEvents();
+			};
+
+			ExpandableHeader.prototype = prototype;
+
+			// definition
+			ns.widget.wearable.ExpandableHeader = ExpandableHeader;
+			engine.defineWidget(
+				"ExpandableHeader",
+				"",
+				[],
+				ExpandableHeader,
+				"wearable"
+			);
+			}(window.document, ns));
+
+/*global window, define, XMLHttpRequest */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Load Utility
+ * Object contains function to load external resources.
+ * @class ns.util.load
+ */
+(function (document, ns) {
+	
+	
+			/**
+			 * Local alias for document HEAD element
+			 * @property {HTMLHeadElement} head
+			 * @static
+			 * @private
+			 * @member ns.util.load
+			 */
+			var head = document.head,
+				/**
+				 * Local alias for document styleSheets element
+				 * @property {HTMLStyleElement} styleSheets
+				 * @static
+				 * @private
+				 * @member ns.util.load
+				 */
+				styleSheets = document.styleSheets,
+				/**
+				 * Local alias for ns.util.DOM
+				 * @property {Object} utilsDOM Alias for {@link ns.util.DOM}
+				 * @member ns.util.load
+				 * @static
+				 * @private
+				 */
+				utilDOM = ns.util.DOM,
+				getNSData = utilDOM.getNSData,
+				setNSData = utilDOM.setNSData,
+				load = ns.util.load || {},
+				/**
+				 * Regular expression for extracting path to the image
+				 * @property {RegExp} IMAGE_PATH_REGEXP
+				 * @static
+				 * @private
+				 * @member ns.util.load
+				 */
+				IMAGE_PATH_REGEXP = /url\((\.\/)?images/gm,
+				/**
+				 * Regular expression for extracting path to the css
+				 * @property {RegExp} CSS_FILE_REGEXP
+				 * @static
+				 * @private
+				 * @member ns.util.load
+				 */
+				CSS_FILE_REGEXP = /[^/]+\.css$/;
+
+			/**
+			 * Load file
+			 * (synchronous loading)
+			 * @method loadFileSync
+			 * @param {string} scriptPath
+			 * @param {?Function} successCB
+			 * @param {?Function} errorCB
+			 * @static
+			 * @private
+			 * @member ns.util.load
+			 */
+			 function loadFileSync(scriptPath, successCB, errorCB) {
+				var xhrObj = new XMLHttpRequest();
+
+				// open and send a synchronous request
+				xhrObj.open('GET', scriptPath, false);
+				xhrObj.send();
+				// add the returned content to a newly created script tag
+				if (xhrObj.status === 200 || xhrObj.status === 0) {
+					if (typeof successCB === 'function') {
+						successCB(xhrObj, xhrObj.status);
+					}
+				} else {
+					if (typeof errorCB === 'function') {
+						errorCB(xhrObj, xhrObj.status, new Error(xhrObj.statusText));
+					}
+				}
+			}
+
+			/**
+			 * Callback function on javascript load success
+			 * @method scriptSyncSuccess
+			 * @private
+			 * @static
+			 * @param {?Function} successCB
+			 * @param {?Function} xhrObj
+			 * @param {?string} status
+			 * @member ns.util.load
+			 */
+			function scriptSyncSuccess(successCB, xhrObj, status) {
+				var script = document.createElement('script');
+				script.type = 'text/javascript';
+				script.text = xhrObj.responseText;
+				document.body.appendChild(script);
+				if (typeof successCB === 'function') {
+					successCB(xhrObj, status);
+				}
+			}
+
+
+			/**
+			 * Add script to document
+			 * (synchronous loading)
+			 * @method scriptSync
+			 * @param {string} scriptPath
+			 * @param {?Function} successCB
+			 * @param {?Function} errorCB
+			 * @static
+			 * @member ns.util.load
+			 */
+			function scriptSync(scriptPath, successCB, errorCB) {
+				loadFileSync(scriptPath, scriptSyncSuccess.bind(null, successCB), errorCB);
+			}
+
+			/**
+			 * Callback function on css load success
+			 * @method cssSyncSuccess
+			 * @param {string} cssPath
+			 * @param {?Function} successCB
+			 * @param {?Function} xhrObj
+			 * @member ns.util.load
+			 * @static
+			 * @private
+			 */
+			function cssSyncSuccess(cssPath, successCB, xhrObj) {
+				var css = document.createElement('style');
+				css.type = 'text/css';
+				css.textContent = xhrObj.responseText.replace(
+					IMAGE_PATH_REGEXP,
+					'url(' + cssPath.replace(CSS_FILE_REGEXP, 'images')
+				);
+				if (typeof successCB === 'function') {
+					successCB(css);
+				}
+			}
+
+			/**
+			 * Add css to document
+			 * (synchronous loading)
+			 * @method cssSync
+			 * @param {string} cssPath
+			 * @param {?Function} successCB
+			 * @param {?Function} errorCB
+			 * @static
+			 * @private
+			 * @member ns.util.load
+			 */
+			function cssSync(cssPath, successCB, errorCB) {
+				loadFileSync(cssPath, cssSyncSuccess.bind(null, cssPath, successCB), errorCB);
+			}
+
+			/**
+			 * Add element to head tag
+			 * @method addElementToHead
+			 * @param {HTMLElement} element
+			 * @param {boolean} [asFirstChildElement=false]
+			 * @member ns.util.load
+			 * @static
+			 */
+			function addElementToHead(element, asFirstChildElement) {
+				var firstElement;
+				if (head) {
+					if (asFirstChildElement) {
+						firstElement = head.firstElementChild;
+						if (firstElement) {
+							head.insertBefore(element, firstElement);
+							return;
+						}
+					}
+					head.appendChild(element);
+				}
+			}
+
+			/**
+			 * Create HTML link element with href
+			 * @method makeLink
+			 * @param {string} href
+			 * @returns {HTMLLinkElement}
+			 * @member ns.util.load
+			 * @static
+			 */
+			function makeLink(href) {
+				var cssLink = document.createElement('link');
+				cssLink.setAttribute('rel', 'stylesheet');
+				cssLink.setAttribute('href', href);
+				cssLink.setAttribute('name', 'tizen-theme');
+				return cssLink;
+			}
+
+			/**
+			 * Adds the given node to document head or replaces given 'replaceElement'.
+			 * Additionally adds 'name' and 'theme-name' attribute
+			 * @param {HTMLElement} node Element to be placed as theme link
+			 * @param {string} themeName Theme name passed to the element
+			 * @param {HTMLElement} [replaceElement=null] If replaceElement is given it gets replaced by node
+			 */
+			function addNodeAsTheme(node, themeName, replaceElement) {
+				setNSData(node, 'name', 'tizen-theme');
+				setNSData(node, 'theme-name', themeName);
+
+				if (replaceElement) {
+					replaceElement.parentNode.replaceChild(node, replaceElement);
+				} else {
+					addElementToHead(node, true);
+				}
+			}
+
+			/**
+			 * Add css link element to head if not exists
+			 * @method themeCSS
+			 * @param {string} path
+			 * @param {string} themeName
+			 * @param {boolean} [embed=false] Embeds the CSS content to the document
+			 * @member ns.util.load
+			 * @static
+			 */
+			function themeCSS(path, themeName, embed) {
+				var i,
+					styleSheetsLength = styleSheets.length,
+					ownerNode,
+					previousElement = null,
+					linkElement;
+				// Find css link or style elements
+				for (i = 0; i < styleSheetsLength; i++) {
+					ownerNode = styleSheets[i].ownerNode;
+
+					// We try to find a style / link node that matches current style or is linked to
+					// the proper theme. We cannot use ownerNode.href because this returns the absolute path
+					if (getNSData(ownerNode, 'name') === 'tizen-theme' || ownerNode.getAttribute("href") === path) {
+						if (getNSData(ownerNode, 'theme-name') === themeName) {
+							// Nothing to change
+							return;
+						}
+						previousElement = ownerNode;
+						break;
+					}
+				}
+
+				if (embed){
+					// Load and replace old styles or append new styles
+					cssSync(path, function onSuccess(styleElement) {
+						addNodeAsTheme(styleElement, themeName, previousElement);
+					}, function onFailure(xhrObj, xhrStatus, errorObj) {
+						ns.warn("There was a problem when loading '" + themeName + "', status: " + xhrStatus);
+					});
+				} else {
+					linkElement = makeLink(path);
+					addNodeAsTheme(linkElement, themeName, previousElement);
+				}
+			}
+
+			/**
+			 * In debug mode add time to url to disable cache
+			 * @property {string} cacheBust
+			 * @member ns.util.load
+			 * @static
+			 */
+			load.cacheBust = (document.location.href.match(/debug=true/)) ? '?cacheBust=' + (new Date()).getTime() : '';
+			// the binding a local methods with the namespace
+			load.scriptSync = scriptSync;
+			load.addElementToHead = addElementToHead;
+			load.makeLink = makeLink;
+			load.themeCSS = themeCSS;
+
+			ns.util.load = load;
+			}(window.document, ns));
+
+/*global window, define, Math, ns*/
+/*jslint bitwise: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Theme object
+ * Class with functions to set theme of application.
+ * @class ns.theme
+ */
+(function (window, document, ns) {
+	
+			/**
+			 * Local alias for document HEAD element
+			 * @property {HTMLHeadElement} head
+			 * @static
+			 * @private
+			 * @member ns.theme
+			 */
+			var head = document.head,
+				documentElement = document.documentElement,
+				frameworkData = ns.frameworkData,
+				util = ns.util,
+				DOM = util.DOM,
+				load = util.load,
+				support = ns.support,
+
+				stopEvent = function (event) {
+					var element = event.target,
+						tag = element.tagName.toLowerCase(),
+						type = element.type;
+					if ((tag !== "input" ||
+							(type !== "text" && type !== "email" && type !== "url" && type !== "search" && type !== "tel")) &&
+							tag !== "textarea") {
+						event.stopPropagation();
+						event.preventDefault();
+					}
+				},
+
+				THEME_JS_FILE_NAME = "theme.js",
+				THEME_CSS_FILE_NAME = "tau",
+
+				themeRegex =  /ui-(bar|body|overlay)-([a-z])\b/,
+				deviceWidthRegex = /.*width=(device-width|\d+)\s*,?.*$/gi;
+
+			ns.theme = {
+				/**
+				 * Standard theme
+				 * @property {string} theme="s"
+				 * @member ns.theme
+				 */
+				theme: "s",
+
+				_activeTheme: null,
+
+				/**
+				 * This function inits theme.
+				 * @method init
+				 * @param {HTMLElement} container
+				 * @member ns.theme
+				 */
+				init: function (container) {
+					var self = this,
+						containerClassList = container.classList;
+
+					frameworkData.getParams();
+
+					if (support.gradeA()) {
+						documentElement.classList.add("ui-mobile");
+						containerClassList.add("ui-mobile-viewport");
+					}
+
+					self.loadTheme(frameworkData.theme);
+				},
+
+				/**
+				 * This function scales font size.
+				 * @method scaleBaseFontSize
+				 * @param {number} themeDefaultFontSize Default font size
+				 * @param {number} ratio Scaling ration
+				 * @member ns.theme
+				 */
+				scaleBaseFontSize : function (themeDefaultFontSize, ratio) {
+					var scaledFontSize = Math.max(themeDefaultFontSize * ratio | 0, 4);
+					documentElement.style.fontSize = scaledFontSize + "px";
+					document.body.style.fontSize = scaledFontSize + "px";
+				},
+
+				/**
+				 * This function searches theme, which is inherited
+				 * from parents by element.
+				 * @method getInheritedTheme
+				 * @param {HTMLElement} element Element for which theme is looking for.
+				 * @param {string} defaultTheme Default theme.
+				 * It is used if no theme, which can be inherited, is found.
+				 * @return {string} Inherited theme
+				 * @member ns.theme
+				 */
+				getInheritedTheme: function (element, defaultTheme) {
+					var theme,
+						parentElement = element.parentNode,
+						parentClasses,
+						parentTheme;
+
+					theme = DOM.getNSData(element, "theme");
+
+					if (!theme) {
+						while (parentElement) {
+							parentClasses = parentElement.className || "";
+							parentTheme = themeRegex.exec(parentClasses);
+							if (parentClasses && parentTheme && parentTheme.length > 2) {
+								theme = parentTheme[2];
+								break;
+							}
+							parentElement = parentElement.parentNode;
+						}
+					}
+					return theme || defaultTheme;
+				},
+
+				/**
+				 * This function sets selection behavior for the element.
+				 * @method enableSelection
+				 * @param {HTMLElement} element Element for which selection behavior is set.
+				 * @param {"text"|"auto"|"none"} value="auto" Selection behavior.
+				 * @return {HTMLElement} Element with set styles.
+				 * @member ns.theme
+				 */
+				enableSelection: function (element, value) {
+					var val,
+						elementStyle;
+
+					switch (value) {
+					case "text":
+					case "auto":
+					case "none":
+						val = value;
+						break;
+					default:
+						val = "auto";
+						break;
+					}
+
+					if (element === document) {
+						element = document.body;
+					}
+
+					elementStyle = element.style;
+					elementStyle.MozUserSelect = elementStyle.webkitUserSelect = elementStyle.userSelect = val;
+
+					return element;
+				},
+
+				/**
+				 * This function disables event "contextmenu".
+				 * @method disableContextMenu
+				 * @param {HTMLElement} element Element for which event "contextmenu"
+				 * is disabled.
+				 * @member ns.theme
+				 */
+				disableContextMenu: function (element) {
+					element.addEventListener("contextmenu", stopEvent, true);
+				},
+
+				/**
+				 * This function enables event "contextmenu".
+				 * @method enableContextMenu
+				 * @param {HTMLElement} element Element for which event "contextmenu"
+				 * is enabled.
+				 * @member ns.theme
+				 */
+				enableContextMenu: function (element) {
+					element.removeEventListener("contextmenu", stopEvent, true);
+				},
+
+				/**
+				 * This function loads files with proper theme.
+				 * @method loadTheme
+				 * @param {string} theme Choosen theme.
+				 * @member ns.theme
+				 */
+				loadTheme: function(theme) {
+					var self = this,
+						themePath = frameworkData.themePath,
+						themeName = THEME_CSS_FILE_NAME,
+						cssPath,
+						isMinified = frameworkData.minified,
+						jsPath;
+
+					// If the theme has been loaded do not repeat that process
+					if (frameworkData.themeLoaded) {
+												return;
+					}
+
+					if (frameworkData.frameworkName !== "tau") {
+						themeName = "tizen-web-ui-fw-theme";
+					}
+					if (isMinified) {
+						cssPath = themePath + "/" + themeName + ".min.css";
+					} else {
+						cssPath = themePath + "/" + themeName + ".css";
+					}
+
+					
+					load.themeCSS(cssPath, theme);
+					jsPath = themePath + "/" + THEME_JS_FILE_NAME;
+										load.scriptSync(jsPath);
+
+					if (support.gradeA()) {
+						self.setScaling();
+					}
+
+					frameworkData.themeLoaded = true;
+				},
+
+				/**
+				 * This function sets viewport.
+				 * If custom viewport is found, its width will be returned.
+				 * Otherwise, the new viewport will be created.
+				 * @method setViewport
+				 * @param {number|string} viewportWidth Width of the new viewport.
+				 * If no viewport is found, the new viewport with this
+				 * width is created.
+				 * @return {string} Width of custom viewport.
+				 * @member ns.theme
+				 */
+				setViewport: function(viewportWidth) {
+					var metaViewport = document.querySelector("meta[name=viewport]"),
+						content;
+
+					if (metaViewport) {
+						// Found custom viewport!
+						content = metaViewport.getAttribute("content");
+						viewportWidth = content.replace(deviceWidthRegex, "$1");
+					} else {
+						// Create a meta tag
+						metaViewport = document.createElement("meta");
+						metaViewport.name = "viewport";
+						content = "width=" + viewportWidth + ", user-scalable=no";
+						metaViewport.content = content;
+						head.insertBefore(metaViewport, head.firstChild);
+					}
+					return viewportWidth;
+				},
+
+				/**
+				 * This function checks if application is run
+				 * in the mobile browser.
+				 * @method isMobileBrowser
+				 * @return {boolean} Returns true, if application
+				 * is run in mobile browser. Otherwise, false is returned.
+				 * @member ns.theme
+				 */
+				isMobileBrowser: function() {
+					return window.navigator.appVersion.indexOf("Mobile") > -1;
+				},
+
+				/**
+				 * This function sets scaling of viewport.
+				 * @method setScaling
+				 * @member ns.theme
+				 */
+				setScaling: function () {
+					var self = this,
+						viewportWidth = frameworkData.viewportWidth,
+						themeDefaultFontSize = frameworkData.defaultFontSize, // comes from theme.js
+						ratio = 1;
+
+					// Keep original font size
+					document.body.setAttribute("data-tizen-theme-default-font-size", themeDefaultFontSize);
+
+					if (ns.theme.isMobileBrowser()) {
+						// Legacy support: tizen.frameworkData.viewportScale
+						if (frameworkData.viewportScale === true) {
+							viewportWidth = "screen-width";
+						}
+
+						// screen-width support
+						if ("screen-width" === viewportWidth) {
+							if (window.self === window.top) {
+								// Top frame: for target. Use window.outerWidth.
+								viewportWidth = window.outerWidth;
+							} else {
+								// iframe: for web simulator. Use clientWidth.
+								viewportWidth = document.documentElement.clientWidth;
+							}
+						}
+
+						// set viewport meta tag
+						// If custom viewport setting exists, get viewport width
+						viewportWidth = self.setViewport(viewportWidth);
+
+						if (viewportWidth !== "device-width") {
+							ratio = parseFloat(viewportWidth / ns.frameworkData.defaultViewportWidth);
+							self.scaleBaseFontSize(themeDefaultFontSize, ratio);
+						}
+					}
+				}
+			};
+
+			document.addEventListener("themeinit", function (evt) {
+				var router = evt.detail;
+				if (router && ns.getConfig("autoInitializePage", true)) {
+					ns.theme.init(router.getContainer());
+				}
+			}, false);
+
+			}(window, window.document, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Drawer Widget
+ * Core Drawer widget is a base for creating Drawer widgets for profiles. It
+ * provides drawer functionality - container with ability to open and close with
+ * an animation.
+ *
+ * ##Positioning Drawer left / right
+ * To change position of a Drawer please set data-position attribute of Drawer
+ * element to:
+ * - left (left position, default)
+ * - right (right position)
+ *
+ * ##Opening / Closing Drawer
+ * To open / close Drawer one can use open() and close() methods.
+ *
+ * ##Checking if Drawer is opened.
+ * To check if Drawer is opened use widget`s isOpen() method.
+ *
+ * ##Creating widget
+ * Core drawer is a base class - examples of creating widgets are described in
+ * documentation of profiles
+ *
+ * @class ns.widget.core.Drawer
+ * @extends ns.widget.BaseWidget
+ * @author Hyeoncheol Choi <hc7.choi@samsung.com>
+ */
+(function (document, ns) {
+	
+				/**
+			 * @property {Object} Widget Alias for {@link ns.widget.BaseWidget}
+			 * @member ns.widget.core.Drawer
+			 * @private
+			 * @static
+			 */
+			var BaseWidget = ns.widget.BaseWidget,
+				/**
+				 * @property {Object} selectors Alias for class ns.util.selectors
+				 * @member ns.widget.core.Drawer
+				 * @private
+				 * @static
+				 * @readonly
+				 */
+				selectors = ns.util.selectors,
+				/**
+				 * Default values
+				 * @property {number} 240
+				 */
+				DEFAUT = {
+					WIDTH: 240
+				},
+				/**
+				 * Drawer constructor
+				 * @method Drawer
+				 */
+				Drawer = function () {
+					var self = this;
+					/**
+					 * Drawer field containing options
+					 * @property {string} Position of Drawer ("left" or "right")
+					 * @property {number} Width of Drawer
+					 * @property {number} Duration of Drawer entrance animation
+					 * @property {boolean} If true Drawer will be closed on arrow click
+					 * @property {boolean} Sets whether to show an overlay when Drawer is open.
+					 */
+					self.options = {
+						position : "left",
+						width : 0,
+						duration : 100,
+						closeOnClick: true,
+						overlay: true
+					};
+
+					self._onOverlayClickBound = null;
+					self._onResizeBound = null;
+					self._onPageshowBound = null;
+
+					self._pageSelector = null;
+
+					self._isOpen = false;
+
+					self._ui = {};
+
+					self._drawerOverlay = null;
+				},
+				/**
+				 * Dictionary object containing commonly used widget classes
+				 * @property {Object} classes
+				 * @member ns.widget.core.Drawer
+				 * @private
+				 * @static
+				 * @readonly
+				 */
+				classes = {
+					page : "ui-page",
+					drawer : "ui-drawer",
+					header : "ui-drawer-header",
+					left : "ui-drawer-left",
+					right : "ui-drawer-right",
+					overlay : "ui-drawer-overlay",
+					open : "ui-drawer-open",
+					close : "ui-drawer-close"
+				},
+				/**
+				 * {Object} Drawer widget prototype
+				 * @member ns.widget.core.Drawer
+				 * @private
+				 * @static
+				 */
+				prototype = new BaseWidget();
+
+			Drawer.prototype = prototype;
+			Drawer.classes = classes;
+
+			/**
+			 * Click event handler
+			 * @method onClick
+			 * @param {ns.widget.core.Drawer} self
+			 * @member ns.widget.core.Drawer
+			 * @private
+			 * @static
+			 */
+			function onClick(self) {
+				// vclick event handler
+				if (self._isOpen) {
+					self.close();
+				}
+			}
+
+			/**
+			 * Resize event handler
+			 * @method onResize
+			 * @param {ns.widget.core.Drawer} self
+			 * @member ns.widget.core.Drawer
+			 * @private
+			 * @static
+			 */
+			function onResize(self) {
+				// resize event handler
+				self._refresh();
+			}
+
+			/**
+			 * Pageshow event handler
+			 * @method onPageshow
+			 * @param {ns.widget.core.Drawer} self
+			 * @member ns.widget.core.Drawer
+			 * @private
+			 * @static
+			 */
+			function onPageshow(self) {
+				self._refresh();
+			}
+
+			prototype._setOverlay = function (x) {
+				var self = this,
+					options = self.options,
+					overlay = self._drawerOverlay,
+					overlayStyle = overlay.style,
+					absX = Math.abs(x),
+					ratio = options.position === "right" ? absX / window.innerWidth : absX / options.width;
+
+				if(ratio < 1) {
+					overlayStyle.visibility = "visible";
+				} else {
+					overlayStyle.visibility = "hidden";
+				}
+				overlayStyle.opacity = 1 - ratio;
+			};
+			/**
+			 * Drawer translate function
+			 * @method _translate
+			 * @param {number} x
+			 * @param {number} duration
+			 * @member ns.widget.core.Drawer
+			 * @protected
+			 */
+			prototype._translate = function (x, duration) {
+				var self = this,
+					elementStyle = self.element.style,
+					transition = "none";
+
+				if (duration) {
+					transition =  "-webkit-transform " + duration / 1000 + "s ease-out";
+				}
+
+				elementStyle.webkitTransform = "translate3d(" + x + "px, 0px, 0px)";
+				elementStyle.webkitTransition = transition;
+
+				if (self.options.overlay) {
+					self._setOverlay(x);
+				}
+			};
+
+			/**
+			 * Build structure of Drawer widget
+			 * @method _build
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement} Returns built element
+			 * @member ns.widget.core.Drawer
+			 * @protected
+			 */
+			prototype._build = function (element) {
+				var self = this,
+					headerElement;
+				element.classList.add(classes.drawer);
+				self._drawerPage = selectors.getClosestByClass(element, classes.page);
+				self._drawerPage.style.overflowX = "hidden";
+
+				headerElement = element.nextElementSibling;
+				while (headerElement) {
+					if (headerElement.classList.contains("ui-header")) {
+						break;
+					}
+					headerElement = headerElement.nextElementSibling;
+				}
+
+				if (headerElement) {
+					headerElement.classList.add(classes.header);
+				}
+
+				self._headerElement = headerElement;
+
+				if (self.options.overlay) {
+					self._createOverlay(element);
+					self._drawerOverlay.style.visibility = "hidden";
+				}
+
+				return element;
+			};
+
+			/**
+			 * Initialization of Drawer widget
+			 * @method _init
+			 * @param {HTMLElement} element
+			 * @member ns.widget.core.Drawer
+			 * @protected
+			 */
+			prototype._init = function (element) {
+				var self = this,
+					options = self.options;
+
+				options.width = options.width || DEFAUT.WIDTH;
+				if (options.position === "right") {
+					element.classList.add(classes.right);
+					self._translate(window.innerWidth, 0);
+				} else {
+					// left or default
+					element.classList.add(classes.left);
+					self._translate(-options.width, 0);
+				}
+			};
+
+			/**
+			 * Provides translation if position is set to right
+			 * @method _translateRight
+			 * @member ns.widget.core.Drawer
+			 * @protected
+			 */
+			prototype._translateRight = function() {
+				var self = this,
+					options = self.options;
+				if (options.position === "right") {
+					// If drawer position is right, drawer should be moved right side
+					if (self._isOpen) {
+						// drawer opened
+						self._translate(window.innerWidth - options.width, 0);
+					} else {
+						// drawer closed
+						self._translate(window.innerWidth, 0);
+					}
+				}
+			};
+
+			/**
+			 * Refreshes Drawer widget
+			 * @method _refresh
+			 * @member ns.widget.core.Drawer
+			 * @protected
+			 */
+			prototype._refresh = function() {
+				// Drawer layout has been set by parent element layout
+				var self = this,
+					options = self.options,
+					drawerElementParent = self.element.parentNode,
+					drawerHeight = drawerElementParent.clientHeight,
+					drawerStyle = self.element.style,
+					drawerOverlay = self._drawerOverlay,
+					overlayStyle = drawerOverlay && drawerOverlay.style;
+
+				drawerStyle.width = options.width + "px";
+				drawerStyle.height = drawerHeight + "px";
+
+				if (overlayStyle) {
+					overlayStyle.width = window.innerWidth + "px";
+					overlayStyle.height = drawerHeight + "px";
+				}
+
+				self._translateRight();
+			};
+
+			/**
+			 * Creates Drawer overlay element
+			 * @method _createOverlay
+			 * @param {HTMLElement} element
+			 * @member ns.widget.core.Drawer
+			 * @protected
+			 */
+			prototype._createOverlay = function(element) {
+				var self = this,
+					overlayElement = document.createElement("div");
+
+				overlayElement.classList.add(classes.overlay);
+				element.parentNode.insertBefore(overlayElement, element);
+				self._drawerOverlay = overlayElement;
+			};
+
+			/**
+			 * Binds events to a Drawer widget
+			 * @method _bindEvents
+			 * @member ns.widget.core.Drawer
+			 * @protected
+			 */
+			prototype._bindEvents = function() {
+				var self = this,
+					options = self.options,
+					drawerOverlay = self._drawerOverlay;
+				self._onClickBound = onClick.bind(null, self);
+				self._onResizeBound = onResize.bind(null, self);
+				self._onPageshowBound = onPageshow.bind(null, self);
+
+				if (options.overlay && options.closeOnClick && drawerOverlay) {
+					drawerOverlay.addEventListener("vclick", self._onClickBound, false);
+				}
+
+				window.addEventListener("resize", self._onResizeBound, false);
+				self._drawerPage.addEventListener("pageshow", self._onPageshowBound, false);
+			};
+
+			/**
+			 * Checks Drawer status
+			 * @method isOpen
+			 * @member ns.widget.core.Drawer
+			 * @return {boolean} Returns true if Drawer is open
+			 */
+			prototype.isOpen = function() {
+				return this._isOpen;
+			};
+
+			/**
+			 * Opens Drawer widget
+			 * @method open
+			 * @member ns.widget.core.Drawer
+			 */
+			prototype.open = function() {
+				var self = this,
+					options = self.options,
+					drawerClassList = self.element.classList,
+					drawerOverlay = self._drawerOverlay;
+				if (drawerOverlay) {
+					drawerOverlay.style.visibility = "visible";
+				}
+				drawerClassList.remove(classes.close);
+				drawerClassList.add(classes.open);
+				if (options.position === "left") {
+					self._translate(0, options.duration);
+				} else {
+					self._translate(window.innerWidth - options.width, options.duration);
+				}
+				self._isOpen = true;
+			};
+
+			/**
+			 * Closes Drawer widget
+			 * @method close
+			 * @member ns.widget.core.Drawer
+			 */
+			prototype.close = function() {
+				var self = this,
+					options = self.options,
+					drawerClassList = self.element.classList;
+				self._isOpen = false;
+				drawerClassList.remove(classes.open);
+				drawerClassList.add(classes.close);
+				if (options.position === "left") {
+					self._translate(-options.width, options.duration);
+				} else {
+					self._translate(window.innerWidth, options.duration);
+				}
+			};
+
+			/**
+			 * Destroys Drawer widget
+			 * @method _destroy
+			 * @member ns.widget.core.Drawer
+			 * @protected
+			 */
+			prototype._destroy = function() {
+				var self = this,
+					drawerOverlay = self._drawerOverlay;
+				if (drawerOverlay) {
+					drawerOverlay.removeEventListener("vclick", self._onClickBound, false);
+				}
+				window.removeEventListener("resize", self._onResizeBound, false);
+				self._drawerPage.removeEventListener("pageshow", self._onPageshowBound, false);
+			};
+
+			ns.widget.core.Drawer = Drawer;
+
+
+			}(window.document, ns));
+
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Router
+ * Namespace for routers
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Krzysztof Antoszek <k.antoszek@samsung.com>
+ * @class ns.router
+ */
+(function (ns) {
+	
+				ns.router = ns.router || {};
+			}(ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #History
+ * Object controls history changes.
+ *
+ * @class ns.router.history
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ */
+(function (window, ns) {
+	
+				var historyVolatileMode,
+				object = ns.util.object,
+				historyUid = 0,
+				historyActiveIndex = 0,
+				windowHistory = window.history,
+				history = {
+					/**
+					 * Property contains active state in history.
+					 * @property {Object} activeState
+					 * @static
+					 * @member ns.router.history
+					 */
+					activeState : null,
+
+					/**
+					 * This method replaces or pushes state to history.
+					 * @method replace
+					 * @param {Object} state The state object
+					 * @param {string} stateTitle The title of state
+					 * @param {string} url The new history entry's URL
+					 * @static
+					 * @member ns.router.history
+					 */
+					replace: function (state, stateTitle, url) {
+						var newState = object.merge({}, state, {
+								uid: historyVolatileMode ? historyActiveIndex : ++historyUid,
+								stateUrl: url,
+								stateTitle: stateTitle
+							});
+						windowHistory[historyVolatileMode ? "replaceState" : "pushState"](newState, stateTitle, url);
+						history.setActive(newState);
+					},
+
+					/**
+					 * This method moves backward through history.
+					 * @method back
+					 * @static
+					 * @member ns.router.history
+					 */
+					back: function () {
+						windowHistory.back();
+					},
+
+					/**
+					 * This method sets active state.
+					 * @method setActive
+					 * @param {Object} state Activated state
+					 * @static
+					 * @member ns.router.history
+					 */
+					setActive: function (state) {
+						if (state) {
+							history.activeState = state;
+							historyActiveIndex = state.uid;
+
+							if (state.volatileRecord) {
+								history.enableVolatileRecord();
+								return;
+							}
+						}
+
+						history.disableVolatileMode();
+					},
+
+					/**
+					 * This method returns "back" if state is in history or "forward" if it is new state.
+					 * @method getDirection
+					 * @param {Object} state Checked state
+					 * @return {"back"|"forward"}
+					 * @static
+					 * @member ns.router.history
+					 */
+					getDirection: function (state) {
+						if (state) {
+							return state.uid < historyActiveIndex ? "back" : "forward";
+						}
+						return "back";
+					},
+
+					/**
+					 * This method sets volatile mode to true.
+					 * @method enableVolatileRecord
+					 * @static
+					 * @member ns.router.history
+					 */
+					enableVolatileRecord: function () {
+						historyVolatileMode = true;
+					},
+
+					/**
+					 * This method sets volatile mode to false.
+					 * @method disableVolatileMode
+					 * @static
+					 * @member ns.router.history
+					 */
+					disableVolatileMode: function () {
+						historyVolatileMode = false;
+					}
+				};
+			ns.router.history = history;
+			}(window, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true */
+/**
+ * # Page Widget
+ * Page is main element of application's structure.
+ *
+ * ## Default selectors
+ * In the Tizen Wearable Web UI framework the application page structure is based on a header, content and footer elements:
+ *
+ * - **The header** is placed at the top, and displays the page title and optionally buttons.
+ * - **The content** is the section below the header, showing the main content of the page.
+ * - **The footer** is abottom part of page which can display for example buttons
+ *
+ * The following table describes the specific information for each section.
+ *
+ * <table>
+ *     <tr>
+ *         <th>Section</th>
+ *         <th>Class</th>
+ *         <th>Mandatory</th>
+ *         <th>Description</th>
+ *     </tr>
+ *     <tr>
+ *         <td rowspan="2">Page</td>
+ *         <td>ui-page</td>
+ *         <td>Yes</td>
+ *         <td>Defines the element as a page.
+ *
+ * The page widget is used to manage a single item in a page-based architecture.
+ *
+ * A page is composed of header (optional), content (mandatory), and footer (optional) elements.</td>
+ *      </tr>
+ *      <tr>
+ *          <td>ui-page-active</td>
+ *          <td>No</td>
+ *          <td>If an application has a static start page, insert the ui-page-active class in the page element to speed up the application launch. The start page with the ui-page-active class can be displayed before the framework is fully loaded.
+ *
+ *If this class is not used, the framework inserts the class automatically to the first page of the application. However, this has a slowing effect on the application launch, because the page is displayed only after the framework is fully loaded.</td>
+ *      </tr>
+ *      <tr>
+ *          <td>Header</td>
+ *          <td>ui-header</td>
+ *          <td>No</td>
+ *          <td>Defines the element as a header.
+ *
+ * As the Tizen Wearable device screen size is small, avoid using the header element.</td>
+ *      </tr>
+ *      <tr>
+ *          <td>Content</td>
+ *          <td>ui-content</td>
+ *          <td>Yes</td>
+ *          <td>Defines the element as content.</td>
+ *      </tr>
+ *      <tr>
+ *          <td>Footer</td>
+ *          <td>ui-footer</td>
+ *          <td>No</td>
+ *          <td>Defines the element as a footer.
+ *
+ * The footer section is mostly used to include option buttons.</td>
+ *      </tr>
+ *  </table>
+ *
+ * All elements with class=ui-page will be become page widgets
+ *
+ *      @example
+ *         <!--Page layout-->
+ *         <div class="ui-page ui-page-active">
+ *             <header class="ui-header"></header>
+ *             <div class="ui-content"></div>
+ *             <footer class="ui-footer"></footer>
+ *         </div>
+ *
+ *         <!--Page layout with more button in header-->
+ *         <div class="ui-page ui-page-active">
+ *             <header class="ui-header ui-has-more">
+ *                 <h2 class="ui-title">Call menu</h2>
+ *                 <button type="button" class="ui-more ui-icon-overflow">More Options</button>
+ *             </header>
+ *             <div class="ui-content">Content message</div>
+ *             <footer class="ui-footer">
+ *                 <button type="button" class="ui-btn">Footer Button</button>
+ *             </footer>
+ *         </div>
+ *
+ * ## Manual constructor
+ * For manual creation of page widget you can use constructor of widget from **tau** namespace:
+ *
+ *		@example
+ *		var pageElement = document.getElementById("page"),
+ *			page = tau.widget.page(buttonElement);
+ *
+ * Constructor has one require parameter **element** which are base **HTMLElement** to create widget. We recommend get this element by method *document.getElementById*.
+ *
+ * ## Multi-page Layout
+ *
+ * You can implement a template containing multiple page containers in the application index.html file.
+ *
+ * In the multi-page layout, the main page is defined with the ui-page-active class. If no page has the ui-page-active class, the framework automatically sets up the first page in the source order as the main page. You can improve the launch performance by explicitly defining the main page to be displayed first. If the application has to wait for the framework to set up the main page, the page is displayed with some delay only after the framework is fully loaded.
+ *
+ * You can link to internal pages by referring to the ID of the page. For example, to link to the page with an ID of two, the link element needs the href="#two" attribute in the code, as in the following example.
+ *
+ *      @example
+ *         <!--Main page-->
+ *         <div id="one" class="ui-page ui-page-active">
+ *             <header class="ui-header"></header>
+ *             <div class="ui-content"></div>
+ *             <footer class="ui-footer"></footer>
+ *         </div>
+ *
+ *         <!--Secondary page-->
+ *         <div id="two" class="ui-page">
+ *             <header class="ui-header"></header>
+ *             <div class="ui-content"></div>
+ *             <footer class="ui-footer"></footer>
+ *         </div>
+ *
+ * To find the currently active page, use the ui-page-active class.
+ *
+ * ## Changing Pages
+ * ### Go to page in JavaScript
+ * To change page use method *tau.changePage*
+ *
+ *      @example
+ *      tau.changePage("page-two");
+ *
+ * ### Back in JavaScript
+ * To back to previous page use method *tau.back*
+ *
+ *      @example
+ *      tau.back();
+ *
+ * ## Transitions
+ *
+ * When changing the active page, you can use a page transition.
+ *
+ * Tizen Wearable Web UI framework does not apply transitions by default. To set a custom transition effect, you must add the data-transition attribute to a link:
+ *
+ *      @example
+ *      <a href="index.html" data-transition="slideup">I'll slide up</a>
+ *
+ * To set a default custom transition effect for all pages, use the pageTransition property:
+ *
+ *      @example
+ *      tau.defaults.pageTransition = "slideup";
+ *
+ * ### Transitions list
+ *
+ *  - **none** no transition.
+ *  - **slideup** Makes the content of the next page slide up, appearing to conceal the content of the previous page.
+ *
+ * ## Handling Page Events
+ *
+ * With page widget we have connected many of events.
+ *
+ * To handle page events, use the following code:
+ *
+ *      @example
+ *        <div id="page" class="ui-page">
+ *             <header class="ui-header"></header>
+ *             <div class="ui-content"></div>
+ *         </div>
+ *
+ *         <script>
+ *             var page = document.getElementById("page");
+ *             page.addEventListener("Event", function(event) {
+ *                 // Your code
+ *             });
+ *         </script>
+ *
+ * To bind an event callback on the Back key, use the following code:
+ *
+ * Full list of available events is in [events list section](#events-list).
+ *
+ * To bind an event callback on the Back key, use the following code:
+ *
+ *      @example
+ *         <script>
+ *             window.addEventListener("tizenhwkey", function (event) {
+ *                 if (event.keyName == "back") {
+ *                     // Call window.history.back() to go to previous browser window
+ *                     // Call tizen.application.getCurrentApplication().exit() to exit application
+ *                     // Add script to add another behavior
+ *                 }
+ *             });
+ *         </script>
+ *
+ * ## Options for Page Widget
+ *
+ * Page widget hasn't any options.
+ *
+ * ## Methods
+ *
+ * To call method on widget you can use tau API:
+ *
+ *		@example
+ *		var pageElement = document.getElementById("page"),
+ *			page = tau.widget.page(buttonElement);
+ *
+ *		page.methodName(methodArgument1, methodArgument2, ...);
+ *
+ * @class ns.widget.wearable.Page
+ * @extends ns.widget.BaseWidget
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Piotr Karny <p.karny@samsung.com>
+ * @author Damian Osipiuk <d.osipiuk@samsung.com>
+ */
+(function (document, ns) {
+	
+				/**
+			 * Alias for {@link ns.widget.BaseWidget}
+			 * @property {Object} BaseWidget
+			 * @member ns.widget.wearable.Page
+			 * @private
+			 * @static
+			 */
+			var BaseWidget = ns.widget.BaseWidget,
+				/**
+				 * Alias for {@link ns.util}
+				 * @property {Object} util
+				 * @member ns.widget.wearable.Page
+				 * @private
+				 * @static
+				 */
+				util = ns.util,
+				/**
+				 * Alias for {@link ns.util.DOM}
+				 * @property {Object} doms
+				 * @member ns.widget.wearable.Page
+				 * @private
+				 * @static
+				 */
+				doms = util.DOM,
+				/**
+				 * Alias for {@link ns.engine}
+				 * @property {Object} engine
+				 * @member ns.widget.wearable.Page
+				 * @private
+				 * @static
+				 */
+				engine = ns.engine,
+
+				Page = function () {
+					var self = this;
+					/**
+					 * Callback on resize
+					 * @property {?Function} contentFillAfterResizeCallback
+					 * @private
+					 * @member ns.widget.wearable.Page
+					 */
+					self.contentFillAfterResizeCallback = null;
+					/**
+					 * Options for widget.
+					 * It is empty object, because widget Page does not have any options.
+					 * @property {Object} options
+					 * @member ns.widget.wearable.Page
+					 */
+					self.options = {};
+				},
+				/**
+				 * Dictionary for page related event types
+				 * @property {Object} EventType
+				 * @member ns.widget.wearable.Page
+				 * @static
+				 */
+				EventType = {
+					/**
+					 * Triggered on the page we are transitioning to,
+					 * after the transition animation has completed.
+					 * @event pageshow
+					 * @member ns.widget.wearable.Page
+					 */
+					SHOW: "pageshow",
+					/**
+					 * Triggered on the page we are transitioning away from,
+					 * after the transition animation has completed.
+					 * @event pagehide
+					 * @member ns.widget.wearable.Page
+					 */
+					HIDE: "pagehide",
+					/**
+					 * Triggered when the page has been created in the DOM
+					 * (for example, through Ajax) but before all widgets
+					 * have had an opportunity to enhance the contained markup.
+					 * @event pagecreate
+					 * @member ns.widget.wearable.Page
+					 */
+					CREATE: "pagecreate",
+					/**
+					 * Triggered when the page is being initialized,
+					 * before most plugin auto-initialization occurs.
+					 * @event pagebeforecreate
+					 * @member ns.widget.wearable.Page
+					 */
+					BEFORE_CREATE: "pagebeforecreate",
+					/**
+					 * Triggered on the page we are transitioning to,
+					 * before the actual transition animation is kicked off.
+					 * @event pagebeforeshow
+					 * @member ns.widget.wearable.Page
+					 */
+					BEFORE_SHOW: "pagebeforeshow",
+					/**
+					 * Triggered on the page we are transitioning away from,
+					 * before the actual transition animation is kicked off.
+					 * @event pagebeforehide
+					 * @member ns.widget.wearable.Page
+					 */
+					BEFORE_HIDE: "pagebeforehide"
+				},
+				/**
+				 * Dictionary for page related css class names
+				 * @property {Object} classes
+				 * @member ns.widget.wearable.Page
+				 * @static
+				 * @readonly
+				 */
+				classes = {
+					uiPage: "ui-page",
+					uiPageActive: "ui-page-active",
+					uiSection: "ui-section",
+					uiHeader: "ui-header",
+					uiFooter: "ui-footer",
+					uiContent: "ui-content",
+					uiPageScroll: "ui-scroll-on",
+					uiFixed: "ui-fixed"
+				},
+				prototype = new BaseWidget();
+
+			Page.classes = classes;
+			Page.events = EventType;
+			/**
+			 * Configure Page Widget
+			 * @method _configure
+			 * @member ns.widget.wearable.Page
+			 */
+			prototype._configure = function () {
+				this.options.enablePageScroll = ns.getConfig("enablePageScroll");
+			}
+			/**
+			 * Sets top-bottom css attributes for content element
+			 * to allow it to fill the page dynamically
+			 * @method _contentFill
+			 * @member ns.widget.wearable.Page
+			 */
+			prototype._contentFill = function () {
+				var self = this,
+					option = self.options,
+					element = self.element,
+					screenWidth = window.innerWidth,
+					screenHeight = window.innerHeight,
+					contentSelector = classes.uiContent,
+					headerSelector = classes.uiHeader,
+					footerSelector = classes.uiFooter,
+					pageScrollSelector = classes.uiPageScroll,
+					headerHeight = 0,
+					footerHeight = 0,
+					footerMarginTop = 0,
+					children = [].slice.call(element.children),
+					childrenLength = children.length,
+					elementStyle = element.style,
+					needTopMargin = false,
+					needBottomMargin = false,
+					i,
+					node,
+					contentStyle,
+					marginTop,
+					marginBottom,
+					nodeStyle;
+
+				elementStyle.width = screenWidth + "px";
+				elementStyle.height = screenHeight + "px";
+
+				if (option.enablePageScroll === true) {
+					element.classList.add(pageScrollSelector);
+				}
+
+				for (i = 0; i < childrenLength; i++) {
+					node = children[i];
+					if (node.classList.contains(headerSelector)) {
+						headerHeight = doms.getElementHeight(node);
+						if (node.classList.contains(classes.uiFixed)) {
+							needTopMargin = true;
+						}
+					} else if (node.classList.contains(footerSelector)) {
+						nodeStyle = window.getComputedStyle(node);
+						footerMarginTop = parseFloat(nodeStyle.marginTop);
+						footerHeight += doms.getElementHeight(node);
+						if (node.classList.contains(classes.uiFixed)) {
+							needBottomMargin = true;
+						}
+					}
+				}
+
+				for (i = 0; i < childrenLength; i++) {
+					node = children[i];
+					if (node.classList.contains(contentSelector)) {
+						nodeStyle = node.style;
+						contentStyle = window.getComputedStyle(node);
+						marginTop = parseFloat(contentStyle.marginTop);
+						marginBottom = parseFloat(contentStyle.marginBottom);
+
+						if (!element.classList.contains(pageScrollSelector)) {
+							nodeStyle.height = (screenHeight - headerHeight - footerHeight - marginTop - marginBottom - footerMarginTop) + "px";
+							nodeStyle.width = screenWidth + "px";
+						} else {
+							nodeStyle.minHeight = (screenHeight - headerHeight - footerHeight - marginTop - marginBottom - footerMarginTop) + "px";
+						}
+
+						if (needTopMargin) {
+							nodeStyle.marginTop = headerHeight + "px";
+						}
+						if (needBottomMargin) {
+							nodeStyle.marginBottom = footerHeight + "px";
+						}
+					}
+				}
+			};
+
+			/**
+			 * Build page
+			 * @method _build
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @protected
+			 * @member ns.widget.wearable.Page
+			 */
+			prototype._build = function (element) {
+				element.classList.add(classes.uiPage);
+				return element;
+			};
+
+			/**
+			 * This method sets page active or inactive.
+			 * It sets ui-overlay-... class on `body` depending on current theme.
+			 * @method setActive
+			 * @param {boolean} value If true, then page will be active.
+			 * Otherwise, page will be inactive.
+			 * @member ns.widget.wearable.Page
+			 */
+			prototype.setActive = function (value) {
+				var elementClassList = this.element.classList;
+				if (value) {
+					elementClassList.add(classes.uiPageActive);
+				} else {
+					elementClassList.remove(classes.uiPageActive);
+				}
+			};
+
+			/**
+			 * Return current status of page.
+			 * @method isActive
+			 * @member ns.widget.wearable.Page
+			 * @instance
+			 */
+			prototype.isActive = function () {
+				return this.element.classList.contains(classes.uiPageActive);
+			};
+
+			/**
+			 * Bind events to widget
+			 * @method _bindEvents
+			 * @param {HTMLElement} element
+			 * @protected
+			 * @member ns.widget.wearable.Page
+			 */
+			prototype._bindEvents = function (element) {
+				var self = this;
+				self.contentFillAfterResizeCallback = self._contentFill.bind(self);
+				window.addEventListener("resize", self.contentFillAfterResizeCallback, false);
+			};
+
+			/**
+			 * Refresh widget structure
+			 * @method _refresh
+			 * @protected
+			 * @member ns.widget.wearable.Page
+			 */
+			prototype._refresh = function () {
+				this._contentFill();
+			};
+
+			/**
+			 * Layouting page structure
+			 * @method layout
+			 * @member ns.widget.wearable.Page
+			 */
+			prototype.layout = function () {
+				this._contentFill();
+			};
+
+			/**
+			 * This method triggers BEFORE_SHOW event.
+			 * @method onBeforeShow
+			 * @member ns.widget.wearable.Page
+			 */
+			prototype.onBeforeShow = function () {
+				this.trigger(EventType.BEFORE_SHOW);
+			};
+
+			/**
+			 * This method triggers SHOW event.
+			 * @method onShow
+			 * @member ns.widget.wearable.Page
+			 */
+			prototype.onShow = function () {
+				this.trigger(EventType.SHOW);
+			};
+
+			/**
+			 * This method triggers BEFORE_HIDE event.
+			 * @method onBeforeHide
+			 * @member ns.widget.wearable.Page
+			 */
+			prototype.onBeforeHide = function () {
+				this.trigger(EventType.BEFORE_HIDE);
+			};
+
+			/**
+			 * This method triggers HIDE event.
+			 * @method onHide
+			 * @member ns.widget.wearable.Page
+			 */
+			prototype.onHide = function () {
+				this.trigger(EventType.HIDE);
+			};
+
+			/**
+			 * Destroy widget
+			 * @method _destroy
+			 * @protected
+			 * @member ns.widget.wearable.Page
+			 */
+			prototype._destroy = function () {
+				var self = this,
+					element = self.element;
+
+				element = element || self.element;
+				
+				window.removeEventListener("resize", self.contentFillAfterResizeCallback, false);
+
+				// destroy widgets on children
+				engine.destroyAllWidgets(element, true);
+			};
+
+			Page.prototype = prototype;
+
+			// definition
+			ns.widget.wearable.Page = Page;
+			engine.defineWidget(
+				"page",
+				"[data-role=page],.ui-page",
+				["onBeforeShow", "onShow", "onBeforeHide", "onHide", "setActive", "layout"],
+				Page,
+				"wearable"
+			);
+			}(window.document, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Drawer Widget in Wearable
+ * The drawer component is a panel that the application's sub layout on the left or right edge of the screen.
+ * This component is hidden most of the time, but user can be opened as swipe gesture from the edge of the screen or click the element that is added event handler,
+ * handler has drawer.open() method.
+ *
+ * Note!
+ * We recommend to make handler element.
+ * Because if you didn't set the handler, handler was set page element automatically.
+ * If you really want to make handler as the page element, you should notice data-drag-edge or dragEdge option value
+ * because default value, '1', is whole area of handler element.
+ *
+ * ## HTML Examples
+ *
+ *        @example
+ *        <div id="drawerPage" class="ui-page">
+ *          <header id="contentHeader" class="ui-header">
+ *              <h2 class="ui-title">Drawer</h2>
+ *          </header>
+ *          <div id = "content" class="ui-content">
+ *            Drawer
+ *          </div>
+ *
+ *          <!-- Drawer Handler -->
+ *          <a id="drawerHandler" href="#Drawer" class="drawer-handler">Drawer Button</a>
+ *          <!-- Drawer Widget -->
+ *          <div id="drawer" class="ui-drawer" data-drawer-target="#drawerPage" data-position="left" data-enable="true" data-drag-edge="1">
+ *              <header class="ui-header">
+ *                  <h2 class="ui-title">Left Drawer</h2>
+ *              </header>
+ *              <div class="ui-content">
+ *                  <p>CONTENT</p>
+ *              </div>
+ *          </div>
+ *        </div>
+ *
+ * ## Manual constructor
+ *
+ *         @example
+ *             (function() {
+ *                 var handler = document.getElementById("drawerHandler"),
+ *                     page = document.getElementById("drawerPage"),
+ *                     drawerElement = document.querySelector(handler.getAttribute("href")),
+ *                     drawer = tau.widget.Drawer(drawerElement);
+ *
+ *                 page.addEventListener( "pagebeforeshow", function() {
+ *                         drawer.setDragHandler(handler);
+ *                         tau.event.on(handler, "mousedown touchstart", function(e) {
+ *                             switch (e.type) {
+ *                             case "touchstart":
+ *                             case "mousedown":
+ *                             // open drawer
+ *                             drawer.transition(60);
+ *                         }
+ *                 }, false);
+ *             })();
+ *
+ * ##Drawer state
+ * Drawer has four state type.
+ * - "closed" - Drawer closed state.
+ * - "opened" - Drawer opened state.
+ * - "sliding" - Drawer is sliding state. This state does not mean that will operate open or close.
+ * - "settling" - drawer is settling state. 'Settle' means open or close status. So, this state means that drawer is animating for opened or closed state.
+ *
+ * ##Drawer positioning
+ * You can declare to drawer position manually. (Default is left)
+ *
+ * If you implement data-position attributes value is 'left', drawer appear from left side.
+ *
+ *        @example
+ *        <div class="ui-drawer" data-position="left" id="leftdrawer">
+ *
+ * - "left" - drawer appear from left side
+ * - "right" - drawer appear from right side
+ *
+ * ##Drawer targeting
+ * You can declare to drawer target manually. (Default is Page)
+ *
+ * If you implement data-drawer-target attribute value at CSS selector type, drawer widget will be appended to target.
+ *
+ *        @example
+ *        <div class="ui-drawer" data-drawer-target="#drawerPage">
+ *
+ * ##Drawer enable
+ * You can declare for whether drawer gesture used or not. (Default is true)
+ *
+ * If you implement data-enable attribute value is 'true', you can use the drawer widget.
+ * This option can be changed by 'enable' or 'disable' method.
+ *
+ *        @example
+ *        <div class="ui-drawer" data-enable="true">
+ *
+ * ##Drawer drag gesture start point
+ * You can declare to drag gesture start point. (Default is 1)
+ *
+ * If you implement data-drag-edge attribute value is '0.5', you can drag gesture start in target width * 0.5 width area.
+ *
+ *        @example
+ *        <div class="ui-drawer" data-drag-edge="1">
+ *
+ * @class ns.widget.wearable.Drawer
+ * @author Hyeoncheol Choi <hc7.choi@samsung.com>
+ */
+(function (document, ns) {
+	
+				var CoreDrawer = ns.widget.core.Drawer,
+				CoreDrawerPrototype = CoreDrawer.prototype,
+				Page = ns.widget.wearable.Page,
+				engine = ns.engine,
+				domUtils = ns.util.DOM,
+				object = ns.util.object,
+				selectors = ns.util.selectors,
+				events = ns.event,
+				Gesture = ns.event.gesture,
+				history = ns.router.history,
+				classes = CoreDrawer.classes,
+				STATE = {
+					CLOSED: "closed",
+					OPENED: "opened",
+					SLIDING: "sliding",
+					SETTLING: "settling"
+				},
+				CUSTOM_EVENTS = {
+					OPEN: "draweropen",
+					CLOSE: "drawerclose"
+				},
+
+				Drawer = function () {
+					var self = this;
+					CoreDrawer.call(self);
+
+					self._isDrag = false;
+					self._state = STATE.CLOSED;
+					self._settlingType = STATE.CLOSED;
+					self._traslatedX = 0;
+				},
+				prototype = new CoreDrawer();
+
+
+			Drawer.prototype = prototype;
+			Drawer.classes = classes;
+
+			/**
+			 * Unbind drag events
+			 * @method unbindDragEvents
+			 * @param {HTMLElement} element
+			 * @member ns.widget.core.Drawer
+			 * @private
+			 * @static
+			 */
+			function unbindDragEvents(element) {
+				var self = this;
+
+				ns.event.disableGesture(element);
+				events.off(element, "drag dragstart dragend dragcancel swipe transitionEnd webkitTransitionEnd", self, false);
+				events.off(self.element, "transitionEnd webkitTransitionEnd", self, false);
+			}
+
+			/**
+			 * bind drag events
+			 * @method bindDragEvents
+			 * @param {HTMLElement} element
+			 * @member ns.widget.core.Drawer
+			 * @private
+			 * @static
+			 */
+			function bindDragEvents(element) {
+				var self = this;
+				self._eventBoundElement = element;
+				ns.event.enableGesture(
+					element,
+
+					new ns.event.gesture.Drag(),
+					new ns.event.gesture.Swipe({
+						orientation: Gesture.Orientation.HORIZONTAL
+					})
+				);
+
+				events.on(element, "drag dragstart dragend dragcancel swipe transitionEnd webkitTransitionEnd", self, false);
+				events.on(self.element, "transitionEnd webkitTransitionEnd", self, false);
+			};
+
+			/**
+			 * Handle events
+			 * @method handleEvent
+			 * @param {Event} event
+			 * @member ns.widget.core.Drawer
+			 */
+			prototype.handleEvent = function(event) {
+				var self = this;
+				switch (event.type) {
+					case "drag":
+						self._onDrag(event);
+						break;
+					case "dragstart":
+						self._onDragStart(event);
+						break;
+					case "dragend":
+						self._onDragEnd(event);
+						break;
+					case "dragcancel":
+						self._onDragCancel(event);
+						break;
+					case "swipe":
+						self._onSwipe(event);
+						break;
+					case "transitionEnd":
+					case "webkitTransitionEnd":
+						self._onTransitionEnd(event);
+				}
+			};
+
+			/**
+			 * Configure Drawer widget
+			 * @method _configure
+			 * @protected
+			 * @param {HTMLElement} element
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype._configure = function(element) {
+				var self = this;
+				/**
+				 * Widget options
+				 * @property {string} [options.drawerTarget="ui-page"] Drawer appended target. Value type is CSS selector type.
+				 * @property {string} [options.position="left"] Drawer position. "left" or "right"
+				 * @property {boolean} [options.enable=true] Enable drawer widget.
+				 * @property {Number} [options.dragEdge=1] Start dragging gesture possible area ratio of target or handler between 0 and 1.
+				 */
+				object.merge(self.options, {
+					duration: 300,
+					drawerTarget: "." + Page.classes.uiPage,
+					position: "left",
+					enable: true,
+					dragEdge: 1
+				});
+			};
+
+			/**
+			 * init Drawer widget
+			 * @method _init
+			 * @protected
+			 * @param {HTMLElement} element
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype._init = function(element) {
+				this._initLayout();
+				return element;
+			};
+
+			/**
+			 * init Drawer widget layout
+			 * @method _initLayout
+			 * @protected
+			 * @param {HTMLElement} element
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype._initLayout = function() {
+				var self = this,
+					options = self.options,
+					element = self.element,
+					ui = self._ui,
+					placeholder = document.createComment(element.id + "-placeholder");
+
+				ui._pageElement = selectors.getClosestByClass(element, Page.classes.uiPage);
+				ui._targetElement = selectors.getClosestBySelector(element, options.drawerTarget);
+				ui._targetElement.appendChild(element);
+				if (!ui._placeholder) {
+					ui._placeholder = placeholder;
+					element.parentNode.insertBefore(placeholder, element);
+				}
+				options.width = options.width || element.offsetWidth;
+
+				ui._targetElement.style.overflowX = "hidden";
+
+				CoreDrawerPrototype._init.call(self, element);
+			};
+			/**
+			 * Swipe event handler
+			 * @method _onSwipe
+			 * @protected
+			 * @param {Event} event
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype._onSwipe = function(event) {
+				var self = this,
+					direction = event.detail.direction === "left" ? "right" : "left",
+					options = self.options;
+
+				if (options.enable && options.position === direction) {
+					self.open();
+				}
+			};
+			/**
+			 * Dragstart event handler
+			 * @method _onDragStart
+			 * @protected
+			 * @param {Event} event
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype._onDragStart = function(event) {
+				var self = this;
+				if (self._state === STATE.OPENED) {
+					return;
+				}
+				if (self.options.enable && !self._isDrag && self._state !== STATE.SETTLING && self._checkSideEdge(event)) {
+					self._isDrag = true;
+				} else {
+					self.close();
+				}
+			};
+			/**
+			 * Drag event handler
+			 * @method _onDrag
+			 * @protected
+			 * @param {Event} event
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype._onDrag = function(event) {
+				var self = this,
+					deltaX = event.detail.deltaX,
+					options = self.options,
+					translatedX = self._traslatedX,
+					movedX;
+
+				if (options.enable && self._isDrag && self._state !== STATE.SETTLING) {
+					if (options.position === "left"){
+						movedX = -options.width + deltaX + translatedX;
+						if (movedX < 0) {
+							self._translate(movedX, 0);
+						}
+					} else {
+						movedX = options.width + deltaX - translatedX;
+						if (movedX > 0) {
+							self._translate(movedX, 0);
+						}
+					}
+				}
+			};
+			/**
+			 * DragEnd event handler
+			 * @method _onDragEnd
+			 * @protected
+			 * @param {Event} event
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype._onDragEnd = function(event) {
+				var self = this,
+					options = self.options,
+					detail = event.detail;
+				if (options.enable && self._isDrag) {
+					if (Math.abs(detail.deltaX) > options.width / 2) {
+						self.open();
+					} else if (self._state !== STATE.SETTLING) {
+						self.close();
+					}
+				}
+				self._isDrag = false;
+			};
+			/**
+			 * DragCancel event handler
+			 * @method _onDragCancel
+			 * @protected
+			 * @param {Event} event
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype._onDragCancel = function(event) {
+				var self = this;
+				if (self.options.enable && self._isDrag) {
+					self.close();
+				}
+				self._isDrag = false;
+			};
+			/**
+			 * TransitionEnd event handler
+			 * @method _onTransitionEnd
+			 * @protected
+			 * @param {Event} event
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype._onTransitionEnd = function(event) {
+				var self = this,
+					element = self.element,
+					position = self.options.position;
+
+				if (self._state === STATE.SETTLING) {
+					if (self._settlingType === STATE.OPENED) {
+						self.trigger(CUSTOM_EVENTS.OPEN, {
+							position: position
+						});
+						self._setActive(true);
+						self._state = STATE.OPENED;
+					} else {
+						self.trigger(CUSTOM_EVENTS.CLOSE, {
+							position: position
+						});
+						self._setActive(false);
+						self._state = STATE.CLOSED;
+					}
+				}
+			};
+
+			/**
+			 * Check dragstart event whether triggerred on side edge area or not
+			 * @method _checkSideEdge
+			 * @protected
+			 * @param {Event} event
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype._checkSideEdge = function(event) {
+				var self = this,
+					detail = event.detail,
+					eventClientX = detail.pointer.clientX - detail.estimatedDeltaX,
+					options = self.options,
+					position = options.position,
+					boundElement = self._eventBoundElement,
+					boundElementOffsetWidth = boundElement.offsetWidth,
+					boundElementRightEdge = boundElement.offsetLeft + boundElementOffsetWidth,
+					dragStartArea = boundElementOffsetWidth * options.dragEdge;
+
+				if ((position === "left" && eventClientX > 0 && eventClientX < dragStartArea) ||
+					(position === "right" && eventClientX > boundElementRightEdge - dragStartArea &&
+						eventClientX < boundElementRightEdge)) {
+					return true;
+				}
+				return false;
+			};
+
+			/**
+			 * Bind events to widget
+			 * @method _bindEvents
+			 * @protected
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype._bindEvents = function() {
+				var self = this,
+					targetElement = self._ui._targetElement;
+				CoreDrawerPrototype._bindEvents.call(self);
+
+				bindDragEvents.call(self, targetElement);
+			};
+
+			/**
+			 * Enable Drawer widget
+			 * @method _enable
+			 * @protected
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype._enable = function() {
+				this._oneOption("enable", true);
+			};
+
+			/**
+			 * Disable Drawer widget
+			 * @method _disable
+			 * @protected
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype._disable = function() {
+				this._oneOption("enable", false);
+			};
+
+			/**
+			 * Destroy Drawer widget
+			 * @method _destroy
+			 * @protected
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype._destroy = function() {
+				var self = this,
+					element = self.element,
+					placeholder = self._ui._placeholder,
+					placeholderParent = placeholder.parentNode;
+
+				placeholderParent.insertBefore(element, placeholder);
+				placeholderParent.removeChild(placeholder);
+				CoreDrawerPrototype._destroy.call(self);
+				unbindDragEvents.call(self, self._eventBoundElement);
+
+			};
+
+			prototype._translate = function(x, duration) {
+				var self = this;
+				if (self._state !== STATE.SETTLING) {
+					self._state = STATE.SLIDING;
+				}
+				CoreDrawerPrototype._translate.call(self, x, duration);
+			};
+
+			prototype._setActive = function (active) {
+				var self = this,
+					route = engine.getRouter().getRoute("drawer");
+
+				if (active) {
+					route.setActive(self);
+				} else {
+					route.setActive(null);
+				}
+			};
+
+			/**
+			 * Set Drawer drag handler.
+			 * If developer use handler, drag event is bound at handler only.
+			 *
+			 * #####Running example in pure JavaScript:
+			 *
+			 * @example
+			 * <!-- Drawer Handlers -->
+			 * <a id="leftDrawerHandler" href="#leftDrawer" class="drawer-handler">Left Handler</a>
+			 *
+			 * <div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1">
+			 *    <header class="ui-header">
+			 *        <h2 class="ui-title">Left Drawer</h2>
+			 *    </header>
+			 *    <div id="leftClose" class="ui-content">
+			 *        <p>Click Close</p>
+			 *    </div>
+			 * </div>
+			 *
+			 * <script>
+			 *     var handler = document.getElementById("leftDrawerHandler"),
+			 *         drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href"));
+			 *
+			 *     drawer.setDragHandler(handler);
+			 * </script>
+			 *
+			 * @method setDragHandler
+			 * @public
+			 * @param {Element} element
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype.setDragHandler = function(element) {
+				var self = this;
+				self.options.dragEdge = 1;
+				unbindDragEvents.call(self, self._eventBoundElement);
+				bindDragEvents.call(self, element);
+			};
+
+			/**
+			 * Transition Drawer widget.
+			 * This method use only positive integer number.
+			 *
+			 * #####Running example in pure JavaScript:
+			 *
+			 * @example
+			 * <!-- Drawer Handlers -->
+			 * <a id="leftDrawerHandler" href="#leftDrawer" class="drawer-handler">Left Handler</a>
+			 *
+			 * <div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1">
+			 *    <header class="ui-header">
+			 *        <h2 class="ui-title">Left Drawer</h2>
+			 *    </header>
+			 *    <div id="leftClose" class="ui-content">
+			 *        <p>Click Close</p>
+			 *    </div>
+			 * </div>
+			 *
+			 * <script>
+			 *     var handler = document.getElementById("leftDrawerHandler"),
+			 *         drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href"));
+			 *
+			 *     drawer.Transition(60);
+			 * </script>
+			 *
+			 * @method transition
+			 * @public
+			 * @param {Integer} position
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype.transition = function(position) {
+				var self = this,
+					options = self.options;
+				if (options.position === "left"){
+					self._translate(-options.width + position, options.duration);
+				} else {
+					self._translate(options.width - position , options.duration);
+				}
+				self._traslatedX = position;
+			};
+			/**
+			 * Open Drawer widget.
+			 *
+			 * #####Running example in pure JavaScript:
+			 *
+			 * @example
+			 * <!-- Drawer Handlers -->
+			 * <a id="leftDrawerHandler" href="#leftDrawer" class="drawer-handler">Left Handler</a>
+			 *
+			 * <div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1">
+			 *    <header class="ui-header">
+			 *        <h2 class="ui-title">Left Drawer</h2>
+			 *    </header>
+			 *    <div id="leftClose" class="ui-content">
+			 *        <p>Click Close</p>
+			 *    </div>
+			 * </div>
+			 *
+			 * <script>
+			 *     var handler = document.getElementById("leftDrawerHandler"),
+			 *         drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href"));
+			 *
+			 *     drawer.open();
+			 * </script>
+			 *
+			 * @method open
+			 * @public
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype.open = function(){
+				var self = this;
+				if (self._state !== STATE.OPENED) {
+					self._state = STATE.SETTLING;
+					self._settlingType = STATE.OPENED;
+					CoreDrawerPrototype.open.call(self);
+				}
+			};
+			/**
+			 * Close Drawer widget.
+			 *
+			 * @example
+			 * <!-- Drawer Handlers -->
+			 * <a id="leftDrawerHandler" href="#leftDrawer" class="drawer-handler">Left Handler</a>
+			 *
+			 * <div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1">
+			 *    <header class="ui-header">
+			 *        <h2 class="ui-title">Left Drawer</h2>
+			 *    </header>
+			 *    <div id="leftClose" class="ui-content">
+			 *        <p>Click Close</p>
+			 *    </div>
+			 * </div>
+			 *
+			 * <script>
+			 *     var handler = document.getElementById("leftDrawerHandler"),
+			 *         drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href"));
+			 *
+			 *     drawer.close();
+			 * </script>
+			 *
+			 * @method close
+			 * @public
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype.close = function(options){
+				var self = this,
+					reverse = options ? options.reverse : false;
+				if (self._state !== STATE.CLOSED) {
+					if (!reverse && self._state === STATE.OPENED) {
+						// This method was fired by JS code or this widget.
+						history.back();
+						return;
+					}
+					self._state = STATE.SETTLING;
+					self._settlingType = STATE.CLOSED;
+					CoreDrawerPrototype.close.call(self);
+				}
+			};
+			/**
+			 * Refresh Drawer widget.
+			 * @method refresh
+			 * @protected
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype._refresh = function() {
+				var self = this;
+				CoreDrawerPrototype._refresh.call(self);
+				self._initLayout();
+			};
+			/**
+			 * Get state of Drawer widget.
+			 *
+			 * @example
+			 * <!-- Drawer Handlers -->
+			 * <a id="leftDrawerHandler" href="#leftDrawer" class="drawer-handler">Left Handler</a>
+			 *
+			 * <div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1">
+			 *    <header class="ui-header">
+			 *        <h2 class="ui-title">Left Drawer</h2>
+			 *    </header>
+			 *    <div id="leftClose" class="ui-content">
+			 *        <p>Click Close</p>
+			 *    </div>
+			 * </div>
+			 *
+			 * <script>
+			 *     var handler = document.getElementById("leftDrawerHandler"),
+			 *         drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href")),
+			 *         state;
+			 *
+			 *     state = drawer.getState();
+			 * </script>
+			 * @method getState
+			 * @return {String} Drawer state {"closed"|"opened"|"sliding"|"settling"}
+			 * @public
+			 * @member ns.widget.wearable.Drawer
+			 */
+			prototype.getState = function() {
+				return this._state;
+			};
+			ns.widget.wearable.Drawer = Drawer;
+			engine.defineWidget(
+				"Drawer",
+				".ui-drawer",
+				[
+					"transition",
+					"setDragHandler",
+					"open",
+					"close",
+					"getState"
+				],
+				Drawer,
+				"wearable"
+			);
+
+			}(window.document, ns));
+
+/*global window, define */
+/*jslint nomen: true */
+/**
+ * # Check Box and Radio Box Widget
+ * Shows a list of options where 1 or more can be selected.
+ *
+ * ## Default selectors
+ *
+ * You can use the check box and radio box widgets to create selectable list items:
+ *
+  * The check box widget shows on the screen a list of options where 1 or more can be selected. To add a check box widget to the application, use the following code:
+ *
+ *      @example
+ *      <input type="checkbox" name="mycheck" id="check-test" checked="checked"/>
+ *      <label for="check-test">Checkbox</label>
+ *
+ * The radio widget shows a list of options on the screen where only 1 option can be selected. To add a radio check box widget to the application, use the following code:
+ *
+ *      @example
+ *      <input type="radio" name="radioset" id="radio-1" />
+ *      <label for="radio-1">Radio</label>
+ *
+ * To add a check box or radio box to a list, use the following code:
+ *
+ *      @example
+ *      <ul class="ui-listview">
+ *          <li class="li-has-radio">
+ *              <label>
+ *                  Ringtones 1
+ *                  <input type="radio"name="radioset" id="radio-1"checked="checked" />
+ *              </label>
+ *          </li>
+ *          <li class="li-has-radio">
+ *              <label>
+ *                  Ringtones 2
+ *                  <input type="radio"name="radioset" id="radio-2" />
+ *              </label>
+ *          </li>
+ *      </ul>
+ *
+ * Use the following code in the *style.css* file of your application to support a wide label tap area:
+ *
+ *      @example
+ *          .ui-listview li input[type="checkbox"],
+ *          .ui-listview li input[type="radio"] {
+ *              position: absolute;
+ *              right: 8px;
+ *              top: 0px;
+ *              margin-top: 19px;
+ *          }
+ *          .ui-listview li.li-has-checkbox label,
+ *          .ui-listview li.li-has-radio label {
+ *              display: block;
+ *              padding: 21px 64px 21px 16px;
+ *              margin: -21px -16px -21px -16px;
+ *          }
+ *
+ * ## JavaScript API
+ *
+ * Checkboxradio widget hasn't JavaScript API.
+ * @class ns.widget.wearable.Checkboxradio
+ */
+
+// empty to ensure requirejs does not add anything own
+
+
+/*global window, ns, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true */
+/**
+ * # Circle Progress Widget
+ * Shows a control that indicates the progress percentage of an on-going operation by circular shape.
+ *
+ * The circle progress widget shows a control that indicates the progress percentage of an on-going operation. This widget can be scaled to be fit inside a parent container.
+ *
+ * ### Simple progress bar
+ * If you don't make any widget "circleprogress" with <progress> element, you can show default progress style.
+ * To add a circular shape(page size) progressbar in your application, you have to declare <progress> tag in "ui-page" element.
+ * To add a CircleProgressBar widget to the application, use the following code:
+ *
+ *      @example
+ *	<div class="ui-page" id="pageCircleProgressBar">
+ *	    <header class="ui-header"></header>
+ *	    <div class="ui-content"></div>
+ *          <progress class="ui-circle-progress" id="circleprogress" max="20" value="2"></progress>
+ *	</div>
+ *	<script>
+ *		(function(){
+ *
+ *		    var page = document.getElementById( "pageCircleProgressBar" ),
+ *		        progressBar = document.getElementById("circleprogress"),
+ *		        progressBarWidget;
+ *
+ *		    page.addEventListener( "pageshow", function() {
+ *		        var i=0;
+ *		        // make Circle Progressbar object
+ *		        progressBarWidget = new tau.widget.CircleProgressBar(progressBar);
+ *
+ *	            });
+ *
+ *	            page.addEventListener( "pagehide", function() {
+ *		        // release object
+ *		        progressBarWidget.destroy();
+ *		    });
+ *              }());
+ *	</script>
+ *
+ *
+ * @class ns.widget.wearable.CircleProgressBar
+ * @since 2.3
+ * @extends ns.widget.BaseWidget
+ */
+(function (document, ns) {
+	
+				var BaseWidget = ns.widget.BaseWidget,
+				engine = ns.engine,
+				utilEvent = ns.event,
+				doms = ns.util.DOM,
+
+				eventType = {
+					/**
+					 * Triggered when the section is changed.
+					 * @event progresschange
+					 * @member ns.widget.wearable.CircleProgressBar
+					 */
+					CHANGE: "progresschange"
+				},
+
+				CircleProgressBar = function () {
+					var self = this,
+						ui = {};
+
+					ui.progressContainer = null;
+					ui.progressValue = null;
+					ui.progressValueLeft = null;
+					ui.progressValueRight = null;
+					ui.progressValueBg = null;
+
+					self.options = {};
+					self._ui = ui;
+
+					self._maxValue = null;
+					self._value = null;
+
+				},
+
+				prototype = new BaseWidget(),
+
+				CLASSES_PREFIX = "ui-progressbar",
+
+				classes = {
+					uiProgressbar: CLASSES_PREFIX,
+					uiProgressbarBg: CLASSES_PREFIX + "-bg",
+					uiProgressbarValue: CLASSES_PREFIX + "-value",
+					uiProgressbarValueLeft: CLASSES_PREFIX + "-value-left",
+					uiProgressbarValueRight: CLASSES_PREFIX + "-value-right",
+					uiProgressbarHalf: CLASSES_PREFIX + "-half"
+				},
+
+				selectors = {
+					progressContainer: "." + classes.uiProgressbar,
+					progressBg: "." + classes.uiProgressbarBg,
+					progressValue: "." + classes.uiProgressbarValue,
+					progressValueLeft: "." + classes.uiProgressbarValueLeft,
+					progressValueRight: "." + classes.uiProgressbarValueRight
+				},
+
+				size = {
+					FULL: "full",
+					LARGE: "large",
+					MEDIUM: "medium",
+					SMALL: "small"
+				};
+
+			CircleProgressBar.classes = classes;
+
+			/* make widget refresh with new value */
+			function refreshProgressBar (self, value) {
+				var percentValue = value / self._maxValue * 100,
+					rotateValue,
+					ui = self._ui;
+
+				if (percentValue >= 50) {
+					ui.progressValue.classList.add(classes.uiProgressbarHalf);
+				} else {
+					ui.progressValue.classList.remove(classes.uiProgressbarHalf);
+				}
+
+				rotateValue = 360 * (percentValue/100);
+				ui.progressValueLeft.style.webkitTransform = "rotate(" + rotateValue + "deg)";
+			}
+
+			function setThicknessStyle (self, value) {
+				var ui = self._ui;
+
+				ui.progressValueLeft.style.borderWidth = value +"px";
+				ui.progressValueRight.style.borderWidth = value +"px";
+				ui.progressValueBg.style.borderWidth = value +"px";
+			}
+
+			function setProgressBarSize (self, progressSize) {
+				var sizeToNumber = parseFloat(progressSize),
+					ui = self._ui;
+
+				if (!isNaN(sizeToNumber)) {
+					ui.progressContainer.style.fontSize = progressSize + "px";
+					ui.progressContainer.style.width = progressSize + "px";
+					ui.progressContainer.style.height = progressSize + "px";
+				} else {
+					switch(progressSize) {
+						case size.FULL:
+						case size.LARGE:
+						case size.MEDIUM:
+						case size.SMALL:
+							ui.progressContainer.classList.add(CLASSES_PREFIX + "-" + progressSize);
+							break;
+					}
+					ui.progressContainer.style.fontSize = doms.getCSSProperty(ui.progressContainer, "width", 0, "float") + "px";
+				}
+			}
+
+			function checkOptions (self, option) {
+				if (option.thickness) {
+					setThicknessStyle(self, option.thickness);
+				}
+
+				if (option.size) {
+					setProgressBarSize(self, option.size);
+				}
+
+				if (option.containerClassName) {
+					self._ui.progressContainer.classList.add(option.containerClassName);
+				}
+			}
+
+			prototype._configure = function () {
+				/**
+				 * Options for widget
+				 * @property {Object} options Options for widget
+				 * @property {number} [options.thickness=null] Sets the border width of CircleProgressBar.
+				 * @property {number|"full"|"large"|"medium"|"small"} [options.size="full"] Sets the size of CircleProgressBar.
+				 * @property {string} [options.containerClassName=null] Sets the class name of CircleProgressBar container.
+				 * @member ns.widget.wearable.CircleProgressBar
+				 */
+				this.options = {
+					thickness: null,
+					size: size.MEDIUM,
+					containerClassName: null
+				};
+			};
+			/**
+			 * Build CircleProgressBar
+			 * @method _build
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @protected
+			 * @member ns.widget.wearable.CircleProgressBar
+			 */
+			prototype._build = function (element) {
+				var self = this,
+					ui = self._ui,
+					progressElement = element,
+					progressbarContainer, progressbarBg, progressbarValue, progressbarValueLeft, progressbarValueRight;
+
+				ui.progressContainer = progressbarContainer = document.createElement("div"),
+				ui.progressValueBg = progressbarBg = document.createElement("div"),
+				ui.progressValue = progressbarValue = document.createElement("div"),
+				ui.progressValueLeft = progressbarValueLeft = document.createElement("div"),
+				ui.progressValueRight = progressbarValueRight = document.createElement("div");
+
+				// set classNames of progressbar DOMs.
+				progressbarContainer.className = classes.uiProgressbar;
+				progressbarBg.className = classes.uiProgressbarBg;
+				progressbarValue.className = classes.uiProgressbarValue;
+				progressbarValueLeft.className = classes.uiProgressbarValueLeft;
+				progressbarValueRight.className = classes.uiProgressbarValueRight;
+
+				// set id for progress container using "container" prefix
+				progressbarContainer.id = progressElement.id? progressElement.id + "-container" : "";
+
+				progressbarValue.appendChild(progressbarValueLeft);
+				progressbarValue.appendChild(progressbarValueRight);
+				progressbarContainer.appendChild(progressbarValue);
+				progressbarContainer.appendChild(progressbarBg);
+				progressElement.parentNode.appendChild(progressbarContainer);
+				progressElement.parentNode.insertBefore(progressElement, progressbarContainer);
+
+				return element;
+			};
+			/**
+			 * Init CircleProgressBar
+			 * @method _init
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @protected
+			 * @member ns.widget.wearable.CircleProgressBar
+			 */
+			prototype._init = function (element) {
+				var self = this,
+					ui = self._ui,
+					progressElement = element,
+					elementParent = element.parentNode,
+					options = self.options;
+
+				ui.progressContainer = ui.progressContainer || elementParent.querySelector(selectors.progressContainer);
+				ui.progressValueBg = ui.progressValueBg || elementParent.querySelector(selectors.progressValueBg);
+				ui.progressValue = ui.progressValue || elementParent.querySelector(selectors.progressValue);
+				ui.progressValueLeft = ui.progressValueLeft || elementParent.querySelector(selectors.progressValueLeft);
+				ui.progressValueRight = ui.progressValueRight || elementParent.querySelector(selectors.progressValueRight);
+
+				self._maxValue = doms.getNumberFromAttribute(progressElement, "max", null, 100);
+
+				// max value must be positive number bigger than 0
+				if (self._maxValue <= 0) {
+					ns.error("max value of progress must be positive number that bigger than zero!");
+					self._maxValue = 100;
+				}
+
+				self._value = doms.getNumberFromAttribute(progressElement, "value", null, 50);
+
+				checkOptions(self, options);
+				refreshProgressBar(self, self._value);
+
+				return element;
+			};
+
+			/**
+			 * Get or Set value of the widget
+			 *
+			 * Return element value or set the value
+			 *
+			 *		@example
+			 * 		<progress class="ui-circle-progress" id="circleprogress" max="20" value="2"></progress>
+			 *		<script>
+			 *			var progressbar = document.getElementById("circleprogress"),
+							progressbarWidget = tau.widget.CircleProgressBar(progressbar),
+			 *			// return value in progress tag
+			 * 			value = progressbarWidget.value();
+			 *			// sets the value for the progress
+			 *			progressbarWidget.value("15");
+			 *		</script>
+			 * @method value
+			 * return {string} In get mode return element value
+			 * @since 2.3
+			 * @member ns.widget.wearable.CircleProgressBar
+			 */
+
+			/**
+			 * Get value of Circle Progressbar
+			 * @method _getValue
+			 * @protected
+			 * @memeber ns.widget.wearable.CircleProgressBar
+			 */
+			prototype._getValue = function () {
+				return this.element.getAttribute("value");
+			};
+			/**
+			 * Set value of Circle Progressbar
+			 * @method _setValue
+			 * @param {string} value
+			 * @protected
+			 * @member ns.widget.wearable.CircleProgressBar
+			 */
+			prototype._setValue = function (inputValue) {
+				var self = this,
+					value,
+					selfElementValue;
+
+				if (inputValue > self._maxValue) {
+					value = self._maxValue;
+ 				} else if (inputValue < 0) {
+					value = 0;
+				} else if (isNaN(inputValue)) {
+					value = 0;
+				} else {
+					value = inputValue;
+				}
+
+				doms.setAttribute(self.element, "value", value);
+
+				if (self._value !== value) {
+					self._value = value;
+					utilEvent.trigger(self.element, eventType.CHANGE);
+					refreshProgressBar(self, value);
+				}
+			};
+
+			/**
+			 * Refresh structure
+			 * @method _refresh
+			 * @protected
+			 * @member ns.widget.wearable.CircleProgressBar
+			 */
+			prototype._refresh = function () {
+				var self = this;
+
+				self._reset();
+				checkOptions(self, self.options);
+				refreshProgressBar(self, self._getValue());
+				return null;
+			};
+
+			/**
+			 * Reset style of Value elements
+			 * @method _reset
+			 * @protected
+			 * @member ns.widget.wearable.CircleProgressBar
+			 */
+			prototype._reset = function () {
+				var self = this,
+					ui = self._ui;
+
+				ui.progressValue.classList.remove(classes.uiProgressbarHalf);
+				ui.progressValueLeft.style.webkitTransform = "";
+				if (self.options.thickness) {
+					ui.progressValueLeft.style.borderWidth = "";
+					ui.progressValueRight.style.borderWidth = "";
+					ui.progressValueBg.style.borderWidth = "";
+				}
+			};
+
+			/**
+			 * Destroy widget
+			 * @method _destroy
+			 * @protected
+			 * @member ns.widget.wearable.CircleProgressBar
+			 */
+			prototype._destroy = function () {
+				var self = this;
+
+				self._reset();
+
+				// remove doms
+				self.element.parentNode.removeChild(self._ui.progressContainer);
+
+				// clear variables
+				self.element = null;
+				self._ui = null;
+				self._maxValue = null;
+				self._value = null;
+
+				return null;
+			};
+
+			CircleProgressBar.prototype = prototype;
+			ns.widget.wearable.CircleProgressBar = CircleProgressBar;
+
+			engine.defineWidget(
+				"CircleProgressBar",
+				".ui-circle-progress",
+				[],
+				CircleProgressBar,
+				"wearable"
+			);
+			}(window.document, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true */
+/**
+ * # Listview Widget
+ * Shows a list view.
+ *
+ * The list widget is used to display, for example, navigation data, results, and data entries. The following table describes the supported list classes.
+ *
+ * ## Default selectors
+ *
+ * Default selector for listview widget is class *ui-listview*.
+ *
+ * To add a list widget to the application, use the following code:
+ *
+ * ### List with basic items
+ *
+ * You can add a basic list widget as follows:
+ *
+ *      @example
+ *         <ul class="ui-listview">
+ *             <li>1line</li>
+ *             <li>2line</li>
+ *             <li>3line</li>
+ *             <li>4line</li>
+ *             <li>5line</li>
+ *         </ul>
+ *
+ * ### List with link items
+ *
+ * You can add a list widget with a link and press effect that allows the user to click each list item as follows:
+ *
+ *      @example
+ *         <ul class="ui-listview">
+ *             <li>
+ *                 <a href="#">1line</a>
+ *             </li>
+ *             <li>
+ *                 <a href="#">2line</a>
+ *             </li>
+ *             <li>
+ *                 <a href="#">3line</a>
+ *             </li>
+ *             <li>
+ *                 <a href="#">4line</a>
+ *             </li>
+ *             <li>
+ *                 <a href="#">5line</a>
+ *             </li>
+ *         </ul>
+ *
+ * ## JavaScript API
+ *
+ * Listview widget hasn't JavaScript API.
+ *
+ * @class ns.widget.wearable.Listview
+ * @extends ns.widget.BaseWidget
+ */
+(function (document, ns) {
+	
+				var BaseWidget = ns.widget.BaseWidget,
+				engine = ns.engine,
+				Listview = function () {
+				},
+				prototype = new BaseWidget();
+
+			/**
+			 * Dictionary for listview related events.
+			 * For listview, it is an empty object.
+			 * @property {Object} events
+			 * @member ns.widget.wearable.Listview
+			 * @static
+			 */
+			Listview.events = {};
+
+			/**
+			 * Build Listview
+			 * @method _build
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @protected
+			 * @member ns.widget.wearable.Listview
+			 */
+			prototype._build = function (element) {
+				return element;
+			};
+
+			prototype._init = function (element) {
+				return element;
+			};
+
+			prototype._bindEvents = function (element) {
+				return element;
+			};
+
+			/**
+			 * Refresh structure
+			 * @method _refresh
+			 * @protected
+			 * @member ns.widget.wearable.Listview
+			 */
+			prototype._refresh = function () {
+				return null;
+			};
+
+			/**
+			 * Destroy widget
+			 * @method _destroy
+			 * @protected
+			 * @member ns.widget.wearable.Listview
+			 */
+			prototype._destroy = function () {
+				return null;
+			};
+
+			Listview.prototype = prototype;
+			ns.widget.wearable.Listview = Listview;
+
+			engine.defineWidget(
+				"Listview",
+				".ui-listview",
+				[],
+				Listview,
+				"wearable"
+			);
+			}(window.document, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true, plusplus: true */
+/**
+ * # PageContainer Widget
+ * PageContainer is a widget, which is supposed to have multiple child pages but display only one at a time.
+ *
+ * It allows for adding new pages, switching between them and displaying progress bars indicating loading process.
+ *
+ * @class ns.widget.wearable.PageContainer
+ * @extends ns.widget.BaseWidget
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Piotr Karny <p.karny@samsung.com>
+ * @author Krzysztof Głodowski <k.glodowski@samsung.com>
+ */
+(function (document, ns) {
+	
+				var BaseWidget = ns.widget.BaseWidget,
+				Page = ns.widget.wearable.Page,
+				util = ns.util,
+				eventUtils = ns.event,
+				DOM = util.DOM,
+				engine = ns.engine,
+				classes = {
+					uiViewportTransitioning: "ui-viewport-transitioning",
+					out: "out",
+					in: "in",
+					uiPreIn: "ui-pre-in",
+					uiBuild: "ui-page-build"
+				},
+				PageContainer = function () {
+					/**
+					 * Active page.
+					 * @property {ns.widget.wearable.Page} [activePage]
+					 * @member ns.widget.wearable.PageContainer
+					 */
+					this.activePage = null;
+				},
+				EventType = {
+					/**
+					 * Triggered after the changePage() request
+					 * has finished loading the page into the DOM and
+					 * all page transition animations have completed.
+					 * @event pagechange
+					 * @member ns.widget.wearable.PageContainer
+					 */
+					PAGE_CHANGE: "pagechange"
+				},
+				animationend = "animationend",
+				webkitAnimationEnd = "webkitAnimationEnd",
+				prototype = new BaseWidget();
+
+			/**
+			 * Dictionary for PageContainer related event types.
+			 * @property {Object} events
+			 * @property {string} [events.PAGE_CHANGE="pagechange"]
+			 * @member ns.router.route.popup
+			 * @static
+			 */
+			PageContainer.events = EventType;
+
+			/**
+			 * Dictionary for PageContainer related css class names
+			 * @property {Object} classes
+			 * @member ns.widget.wearable.Page
+			 * @static
+			 * @readonly
+			 */
+			PageContainer.classes = classes;
+
+			/**
+			 * This method changes active page to specified element.
+			 * @method change
+			 * @param {HTMLElement} toPage The element to set
+			 * @param {Object} [options] Additional options for the transition
+			 * @param {string} [options.transition=none] Specifies the type of transition
+			 * @param {boolean} [options.reverse=false] Specifies the direction of transition
+			 * @member ns.widget.wearable.PageContainer
+			 */
+			prototype.change = function (toPage, options) {
+				var self = this,
+					fromPageWidget = self.getActivePage(),
+					toPageWidget;
+
+				options = options || {};
+
+				// The change should be made only if no active page exists
+				// or active page is changed to another one.
+				if (!fromPageWidget || (fromPageWidget.element !== toPage)) {
+					if (toPage.parentNode !== self.element) {
+						toPage = self._include(toPage);
+					}
+
+					toPage.classList.add(classes.uiBuild);
+
+					toPageWidget = engine.instanceWidget(toPage, "page");
+
+					// set sizes of page for correct display
+					toPageWidget.layout();
+
+					if (ns.getConfig("autoBuildOnPageChange", false)) {
+						engine.createWidgets(toPage);
+					}
+
+					if (fromPageWidget) {
+						fromPageWidget.onBeforeHide();
+					}
+					toPageWidget.onBeforeShow();
+
+					toPage.classList.remove(classes.uiBuild);
+
+					options.deferred = {
+						resolve: function () {
+							if (fromPageWidget) {
+								fromPageWidget.onHide();
+								self._removeExternalPage(fromPageWidget, options);
+							}
+							toPageWidget.onShow();
+							self.trigger(EventType.PAGE_CHANGE);
+						}
+					};
+					self._transition(toPageWidget, fromPageWidget, options);
+				}
+			};
+
+			/**
+			 * This method performs transition between the old and a new page.
+			 * @method _transition
+			 * @param {ns.widget.wearable.Page} toPageWidget The new page
+			 * @param {ns.widget.wearable.Page} fromPageWidget The page to be replaced
+			 * @param {Object} [options] Additional options for the transition
+			 * @param {string} [options.transition=none] The type of transition
+			 * @param {boolean} [options.reverse=false] Specifies transition direction
+			 * @param {Object} [options.deferred] Deferred object
+			 * @member ns.widget.wearable.PageContainer
+			 * @protected
+			 */
+			prototype._transition = function (toPageWidget, fromPageWidget, options) {
+				var self = this,
+					element = self.element,
+					elementClassList = element.classList,
+					transition = !fromPageWidget || !options.transition ? "none" : options.transition,
+					deferred = options.deferred,
+					reverse = "reverse",
+					clearClasses = [classes.in, classes.out, classes.uiPreIn, transition],
+					oldDeferredResolve,
+					classlist,
+					classParam,
+					oneEvent;
+
+				if (options.reverse) {
+					clearClasses.push(reverse);
+				}
+				elementClassList.add(classes.uiViewportTransitioning);
+				oldDeferredResolve = deferred.resolve;
+				deferred.resolve = function () {
+					var fromPageWidgetClassList = fromPageWidget && fromPageWidget.element.classList,
+						toPageWidgetClassList = toPageWidget.element.classList;
+					elementClassList.remove(classes.uiViewportTransitioning);
+					toPageWidgetClassList.remove.apply(toPageWidgetClassList, clearClasses);
+					if (fromPageWidgetClassList) {
+						fromPageWidgetClassList.remove.apply(fromPageWidgetClassList, clearClasses);
+					}
+					self._setActivePage(toPageWidget);
+					oldDeferredResolve();
+				};
+
+				if (transition !== "none") {
+					oneEvent = function () {
+						eventUtils.off(toPageWidget.element, [animationend, webkitAnimationEnd], oneEvent, false);
+						deferred.resolve();
+					};
+					eventUtils.one(toPageWidget.element, [animationend, webkitAnimationEnd], oneEvent, false);
+
+					if (fromPageWidget) {
+						classParam = [];
+						classParam.push(transition, classes.out);
+						if (options.reverse) {
+							classParam.push(reverse);
+						}
+						classlist = fromPageWidget.element.classList;
+						classlist.add.apply(classlist ,classParam);
+					}
+
+					classlist = toPageWidget.element.classList;
+					classParam = [];
+					classParam.push(transition, classes.in, classes.uiPreIn);
+					if (options.reverse) {
+						classParam.push(reverse);
+					}
+					classlist.add.apply(classlist, classParam);
+				} else {
+					window.setTimeout(deferred.resolve, 0);
+				}
+			};
+			/**
+			 * This method adds an element as a page.
+			 * @method _include
+			 * @param {HTMLElement} page an element to add
+			 * @member ns.widget.wearable.PageContainer
+			 * @return {HTMLElement}
+			 * @protected
+			 */
+			prototype._include = function (page) {
+				var element = this.element;
+				if (page.parentNode !== element) {
+					page = util.importEvaluateAndAppendElement(page, element);
+				}
+				return page;
+			};
+			/**
+			 * This method sets currently active page.
+			 * @method _setActivePage
+			 * @param {ns.widget.wearable.Page} page a widget to set as the active page
+			 * @member ns.widget.wearable.PageContainer
+			 * @protected
+			 */
+			prototype._setActivePage = function (page) {
+				var self = this;
+				if (self.activePage) {
+					self.activePage.setActive(false);
+				}
+				self.activePage = page;
+				page.setActive(true);
+			};
+			/**
+			 * This method returns active page widget.
+			 * @method getActivePage
+			 * @member ns.widget.wearable.PageContainer
+			 * @return {ns.widget.wearable.Page} Currently active page
+			 */
+			prototype.getActivePage = function () {
+				return this.activePage;
+			};
+
+			/**
+			 * This method displays a progress bar indicating loading process.
+			 * @method showLoading
+			 * @member ns.widget.wearable.PageContainer
+			 * @return {null}
+			 */
+			prototype.showLoading = function () {
+								return null;
+			};
+			/**
+			 * This method hides any active progress bar.
+			 * @method hideLoading
+			 * @member ns.widget.wearable.PageContainer
+			 * @return {null}
+			 */
+			prototype.hideLoading = function () {
+								return null;
+			};
+			/**
+			 * This method removes page element from the given widget and destroys it.
+			 * @method _removeExternalPage
+			 * @param {ns.widget.wearable.Page} fromPageWidget the widget to destroy
+			 * @param {Object} [options] transition options
+			 * @param {boolean} [options.reverse=false] specifies transition direction
+			 * @member ns.widget.wearable.PageContainer
+			 * @protected
+			 */
+			prototype._removeExternalPage = function ( fromPageWidget, options) {
+				var fromPage = fromPageWidget.element;
+				options = options || {};
+				if (options.reverse && DOM.hasNSData(fromPage, "external")) {
+					fromPageWidget.destroy();
+					if (fromPage.parentNode) {
+						fromPage.parentNode.removeChild(fromPage);
+					}
+				}
+			};
+
+			PageContainer.prototype = prototype;
+
+			// definition
+			ns.widget.wearable.PageContainer = PageContainer;
+
+			engine.defineWidget(
+				"pagecontainer",
+				"",
+				["change", "getActivePage", "showLoading", "hideLoading"],
+				PageContainer,
+				"wearable"
+			);
+			}(window.document, ns));
+
+/*global window, define, Event, console */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * # CircularIndexScrollbar UI Component
+ * Shows a circularindexscrollbar with indices, usually for the list.
+ *
+ * The circularindexscrollbar component shows on the screen a circularscrollbar with indices.
+ * The indices can be selected by moving the rotary.
+ * And it fires a select event when the index characters are selected.
+ *
+ * ## Manual constructor
+ * For manual creation of UI Component you can use constructor of component from **tau** namespace:
+ *
+ *              @example
+ *              var circularindexElement = document.getElementById('circularindex'),
+ *                  circularindexscrollbar = tau.widget.CircularIndexScrollbar(circularindexElement, {index: "A,B,C"});
+ *
+ * Constructor has one require parameter **element** which are base **HTMLElement** to create component.
+ * We recommend get this element by method *document.getElementById*. Second parameter is **options**
+ * and it is a object with options for component.
+ *
+ * To add an CircularIndexScrollbar component to the application, use the following code:
+ *
+ *      @example
+ *      <div id="foo" class="ui-circularindexscrollbar" data-index="A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z"></div>
+ *      <script>
+ *          (function() {
+ *              var elem = document.getElementById("foo");
+ *              tau.widget.CircularIndexScrollbar(elem);
+ *              elem.addEventListener("select", function( event ) {
+ *                  var index = event.detail.index;
+ *                  console.log(index);
+ *              });
+ *          }());
+ *      </script>
+ *
+ * The index value can be retrieved by accessing event.detail.index property.
+ *
+ * In the following example, the list scrolls to the position of the list item defined using
+ * the li-divider class, selected by the circularindexscrollbar:
+ *
+ *      @example
+ *         <div id="pageCircularIndexScrollbar" class="ui-page">
+ *             <header class="ui-header">
+ *                 <h2 class="ui-title">CircularIndexScrollbar</h2>
+ *             </header>
+ *             <div id="circularindexscrollbar"class="ui-circularindexscrollbar" data-index="A,B,C,D,E"></div>
+ *             <section class="ui-content">
+ *                 <ul class="ui-listview" id="list1">
+ *                     <li class="li-divider">A</li>
+ *                     <li>Anton</li>
+ *                     <li>Arabella</li>
+ *                     <li>Art</li>
+ *                     <li class="li-divider">B</li>
+ *                     <li>Barry</li>
+ *                     <li>Bibi</li>
+ *                     <li>Billy</li>
+ *                     <li>Bob</li>
+ *                     <li class="li-divider">D</li>
+ *                     <li>Daisy</li>
+ *                     <li>Derek</li>
+ *                     <li>Desmond</li>
+ *                 </ul>
+ *             </section>
+ *             <script>
+ *                 (function () {
+ *                     var page = document.getElementById("pageIndexScrollbar"),
+                           circularindexscrollbar;
+ *                     page.addEventListener("pagecreate", function () {
+ *                         var elisb = document.getElementById("circularindexscrollbar"), // CircularIndexscrollbar element
+ *                                 elList = document.getElementById("list1"), // List element
+ *                                 elDividers = elList.getElementsByClassName("li-divider"), // List items (dividers)
+ *                                 elScroller = elList.parentElement, // List's parent item
+ *                                 dividers = {}, // Collection of list dividers
+ *                                 indices = [], // List of index
+ *                                 elDivider,
+ *                                 i, idx;
+ *
+ *                         // For all list dividers
+ *                         for (i = 0; i < elDividers.length; i++) {
+ *                             // Add the list divider elements to the collection
+ *                             elDivider = elDividers[i];
+ *                             // li element having the li-divider class
+ *                             idx = elDivider.innerText;
+ *                             // Get a text (index value)
+ *                             dividers[idx] = elDivider;
+ *                             // Remember the element
+ *
+ *                             // Add the index to the index list
+ *                             indices.push(idx);
+ *                         }
+ *
+ *                         // Create CircularIndexScrollbar
+ *                         circularindexscrollbar = new tau.widget.CircularIndexScrollbar(elisb, {index: indices});
+ *
+ *                         // Bind the select callback
+ *                         elisb.addEventListener("select", function (ev) {
+ *                             var elDivider,
+ *                                     idx = ev.detail.index;
+ *                             elDivider = dividers[idx];
+ *                             if (elDivider) {
+ *                                 // Scroll to the li-divider element
+ *                                 elScroller.scrollTop = elDivider.offsetTop - elScroller.offsetTop;
+ *                             }
+ *                         });
+ *                     });
+ *                 }());
+ *             </script>
+ *         </div>
+ *
+ * @author Junyoung Park <jy-.park@samsung.com>
+ * @class ns.widget.wearable.CircularIndexScrollbar
+ * @extends ns.widget.BaseWidget
+ */
+(function (document, ns) {
+	
+				var BaseWidget = ns.widget.BaseWidget,
+				engine = ns.engine,
+				utilsEvents = ns.event,
+				eventTrigger = utilsEvents.trigger,
+				Gesture = utilsEvents.gesture,
+				MIN_INDEX = 3,
+				ID_INDICATOR_POSTFIX = "-indicator",
+				prototype = new BaseWidget(),
+
+				CircularIndexScrollbar = function() {
+				// Support calling without 'new' keyword
+					this.element = null;
+					this._indexBar = null;
+					this._centralAngle = 0;
+					this._activeIndexNo = 0;
+					this._isShow = false;
+					this._indexObjects = [];
+					this._indicator = {
+						element: null,
+						style: null,
+						startX: 0,
+						positionX: 0,
+						maxPositionX: 0,
+						minPositionX: 0,
+						dragging: false,
+					};
+				},
+
+				rotaryDirection = {
+					// right rotary direction
+					CW: "CW",
+					// left rotary direction
+					CCW: "CCW"
+				},
+
+				EventType = {
+					/**
+					 * Event triggered after select index by user
+					 * @event select
+					 * @member ns.widget.wearable.CircularIndexScrollbar
+					 */
+					SELECT: "select",
+					/**
+					 * Event triggered after CircularIndexScrollbar is shown
+					 * @event indexshow
+					 * @member ns.widget.wearable.CircularIndexScrollbar
+					 */
+					INDEX_SHOW: "indexshow",
+					/**
+					 * Event triggered after CircularIndexScrollbar is hidden
+					 * @event indexhide
+					 * @member ns.widget.wearable.CircularIndexScrollbar
+					 */
+					INDEX_HIDE: "indexhide"
+				},
+
+				classes = {
+					INDEXSCROLLBAR: "ui-circularindexscrollbar",
+					INDEXBAR: "ui-circularindexscrollbar-indexbar",
+					INDICATOR: "ui-circularindexscrollbar-indicator",
+					INDICATOR_TEXT: "ui-circularindexscrollbar-indicator-text",
+					INDICATOR_MINIMIZE: "ui-circularindexscrollbar-indicator-minimize",
+					INDEX: "ui-circularindexscrollbar-index",
+					SHOW: "ui-circularindexscrollbar-show",
+					SELECTED: "ui-state-selected",
+				};
+
+			CircularIndexScrollbar.prototype = prototype;
+
+			/**
+			 * This method configure component.
+			 * @method _configure
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._configure = function() {
+				/**
+				 * All possible component options
+				 * @property {Object} options
+				 * @property {string} [options.moreChar="."] more character
+				 * @property {string} [options.delimiter=","] delimiter in index
+				 * @property {string|Array} [options.index=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","1"]] indices list
+				 * String with list of letters separate be delimiter or array of letters
+				 * @property {number} [options.maxVisibleIndex=30] maximum length of visible indices
+				 * @property {number} [options.duration=500] duration of show/hide animation time
+				 * @member ns.widget.wearable.CircularIndexScrollbar
+				 */
+				this.options = {
+					moreChar: ".",
+					delimiter: ",",
+					index: [
+						"A", "B", "C", "D", "E", "F", "G", "H",
+						"I", "J", "K", "L", "M", "N", "O", "P", "Q",
+						"R", "S", "T", "U", "V", "W", "X", "Y", "Z", "1"
+					],
+					maxVisibleIndex: 30,
+					duration: 500
+				};
+			};
+
+			/**
+			 * This method inits component.
+			 * @method _init
+			 * @protected
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._init = function(element) {
+				var self = this,
+					options = self.options;
+
+				element.classList.add(classes.INDEXSCROLLBAR);
+
+				self._setIndices(options.index);
+				self._draw();
+				self._setValueByPosition(self._activeIndexNo, true);
+
+				return element;
+			};
+
+			/**
+			 * This method set indices prepared from parameter
+			 * or index of component.
+			 * @method _setIndices
+			 * @param {string} [value] Indices to prepared
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._setIndices = function(value) {
+				var self = this,
+					options = self.options,
+					maxVisibleIndex = options.maxVisibleIndex;
+
+				if (value === null) {
+					ns.warn("CircularIndexScrollbar must have indices.");
+					options.index = null;
+					return;
+				}
+
+				if (typeof value === "string") {
+					value = value.split(options.delimiter); // delimiter
+				}
+
+				if (maxVisibleIndex < MIN_INDEX) {
+					ns.warn("CircularIndexScrollbar is required at least 3 maxVisibleIndex, otherwise it may not work.");
+					self.options.maxVisibleIndex = MIN_INDEX;
+				}
+
+				if (value.length < MIN_INDEX) {
+					ns.warn("CircularIndexScrollbar is required at least 3 indices, otherwise it may not work.");
+				}
+
+				self._centralAngle = 360 / (value.length > maxVisibleIndex ? maxVisibleIndex : value.length);
+				options.index = value;
+			};
+
+			/**
+			 * This method draw index elements and indicator in the CircularIndexScrollbar
+			 * @method _draw
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._draw = function() {
+				var self = this,
+					options = self.options,
+					element = self.element,
+					indexBar = document.createElement("div"),
+					indicator = document.createElement("a"),
+					indicatorText = document.createElement("div"),
+					windowWidth = window.innerWidth,
+					indicatorWidth;
+
+				if (options.index) {
+					if (options.index.length < options.maxVisibleIndex) {
+						self._drawBasicIndices(indexBar);
+					} else {
+						self._drawOmitIndices(indexBar);
+					}
+				}
+
+				indexBar.classList.add(classes.INDEXBAR);
+				indicator.classList.add(classes.INDICATOR);
+				indicator.classList.add(classes.INDICATOR_MINIMIZE);
+				indicatorText.classList.add(classes.INDICATOR_TEXT);
+
+				indicator.id  = element.id + ID_INDICATOR_POSTFIX;
+				indicator.href = "#" + element.id;
+				indicator.setAttribute("data-rel", self.name.toLowerCase());
+
+				self._indicator.style = indicator.style;
+				self._indicator.element = indicator;
+				self._indexBar = indexBar;
+
+				element.appendChild(indexBar);
+				indicator.appendChild(indicatorText);
+				element.appendChild(indicator);
+
+				indicatorWidth = indicator.clientWidth;
+				self._indicator.maxPositionX = windowWidth/2 - indicatorWidth/2;
+				self._indicator.minPositionX = -indicatorWidth * 0.75;
+			};
+
+			/**
+			 * This method draw basic style index elements in the CircularIndexScrollbar
+			 * @method _drawBasicIndices
+			 * @param {Element} indexBar
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._drawBasicIndices = function(indexBar) {
+				var self = this,
+					options = self.options,
+					child,
+					i;
+
+				for (i = 0; i < options.index.length; i++) {
+					child = document.createElement("div");
+					self._setChildStyle(child, i, options.index[i]);
+					indexBar.appendChild(child);
+					self._indexObjects.push({index: options.index[i], container: child});
+				}
+			};
+
+			/**
+			 * This method draw omit style index elements in the CircularIndexScrollbar
+			 * @method _drawOmitIndices
+			 * @param {Element} indexBar
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._drawOmitIndices = function(indexBar) {
+				var self = this,
+					options = self.options,
+					index = options.index,
+					indexLen = index.length,
+					maxVisibleIndex = options.maxVisibleIndex,
+					leftIndexLen = indexLen - parseInt((maxVisibleIndex+1) / 2, 10),
+					nIndexPerItem = parseInt(leftIndexLen / parseInt(maxVisibleIndex / 2, 10), 10 ),
+					nIndexPerItemLeft = leftIndexLen % parseInt(maxVisibleIndex / 2, 10),
+					indexNo = 0,
+					omitIndexLen = 0,
+					child,
+					i;
+
+				for (i = 0; i < maxVisibleIndex; i++) {
+					child = document.createElement("div");
+					if (i % 2) {
+						omitIndexLen = nIndexPerItem + (nIndexPerItemLeft-- > 0 ? 1 : 0);
+						self._setChildStyle(child, i, options.moreChar);
+						while (omitIndexLen-- > 0) {
+							self._indexObjects.push({index: index[indexNo++],container: child});
+						}
+					} else {
+						self._setChildStyle(child, i, index[indexNo]);
+						self._indexObjects.push({index: index[indexNo++], container: child});
+					}
+					indexBar.appendChild(child);
+				}
+			};
+
+			/**
+			 * This method set the style of index elements
+			 * @method _setChildStyle
+			 * @param {HTMLElement} index element
+			 * @param {number} index
+			 * @param {string} value of index
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._setChildStyle = function(child, index, value) {
+				var self = this,
+					inner = document.createElement("span"),
+					centralAngle = self._centralAngle,
+					skewAngle = 90 - centralAngle,
+					rotateAngle,
+					transform;
+
+				rotateAngle = index * centralAngle + 90 - centralAngle/2;
+				transform = "rotate(" + rotateAngle + "deg) skew(" + skewAngle + "deg)";
+
+				child.classList.add(classes.INDEX);
+				child.style.webkitTransform = transform;
+				child.style.transform = transform;
+
+				// inner element
+				transform  = "skew(" + (-skewAngle) + "deg) rotate(" + (centralAngle/2 - 90) + "deg)";
+
+				inner.innerText = value;
+				inner.style.webkitTransform = transform;
+				inner.style.transform = transform;
+
+				child.appendChild(inner);
+			};
+
+			/**
+			 * Show the CircularIndexScrollbar
+			 * @method show
+			 * @public
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype.show = function() {
+				var self = this,
+					options = self.options,
+					indicator = self._indicator,
+					style = indicator.style,
+					transition,
+					transform;
+
+				if (self._isShow && !indicator.dragging) {
+					return;
+				}
+
+				transition = "-webkit-transform " + options.duration + "ms ease-out";
+				transform = "translate3d(" + indicator.maxPositionX + "px, 0, 0)";
+
+				self._isShow = true;
+				self.element.classList.add(classes.SHOW);
+				style.webkitTransition = transition;
+				style.transition = transition;
+				style.webkitTransform = transform;
+				style.transform = transform;
+			};
+
+			/**
+			 * Hide the CircularIndexScrollbar
+			 * @method hide
+			 * @public
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype.hide = function(routerOptions) {
+				var self = this,
+					options = self.options,
+					indicator = self._indicator,
+					style = indicator.style,
+					reverse = routerOptions ? routerOptions.reverse : false,
+					transition,
+					transform;
+
+				if (!self._isShow && !indicator.dragging) {
+					return;
+				}
+
+				if (!reverse && self._isShow) {
+					// This method was fired by JS code or this widget.
+					history.back();
+					return;
+				}
+
+				transition = "-webkit-transform " + options.duration + "ms ease-out";
+				transform = "translate3d(" + indicator.minPositionX + "px, 0, 0)";
+
+				self.element.classList.remove(classes.SHOW);
+				style.webkitTransition = transition;
+				style.transition = transition;
+				style.webkitTransform = transform;
+				style.transform = transform;
+				self._isShow = false;
+			};
+
+			/**
+			 * This method returns status of widget.
+			 * @method isShow
+			 * @public
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype.isShow = function() {
+				return this._isShow;
+			};
+
+			/**
+			 * This method show the CircularIndexScrollbar handler.
+			 * @method showHandler
+			 * @public
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype.showHandler = function() {
+				var self = this,
+					indicatorStyle = self._indicator.style,
+					transition,
+					transform;
+
+				if (self._isShow) {
+					return;
+				}
+
+				transition = "-webkit-transform " + self.options.duration / 5 + "ms ease-out";
+				transform = "translate3d(" + self._indicator.minPositionX + "px, 0, 0)";
+
+				indicatorStyle.transition = transition;
+				indicatorStyle.webkitTransition = transition;
+				indicatorStyle.transform = transform;
+				indicatorStyle.webkitTransform = transform;
+			};
+
+			/**
+			 * This method hide the CircularIndexScrollbar handler.
+			 * @method hideHandler
+			 * @public
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype.hideHandler = function() {
+				var self = this,
+					indicatorStyle = self._indicator.style,
+					transition,
+					transform;
+
+				if (self._isShow) {
+					ns.warn("hideHandler() can be used only when CircularIndexSCrollbar is hidden.");
+					return;
+				}
+
+				transition = "-webkit-transform " + self.options.duration / 5 + "ms ease-out";
+				transform = "translate3d(" + -self._indicator.element.clientWidth + "px, 0, 0)";
+
+				indicatorStyle.transition = transition;
+				indicatorStyle.webkitTransition = transition;
+				indicatorStyle.transform = transform;
+				indicatorStyle.webkitTransform = transform;
+			}
+
+			/**
+			 * This method select the index
+			 * @method _setValueByPosition
+			 * @protected
+			 * @param {stirng} index number
+			 * @param {boolean} whether "select" event is fired or not
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._setValueByPosition = function(indexNo, isFireEvent) {
+				var self = this,
+					curActiveElement,
+					indexElement,
+					indicatorText;
+
+				if (!self.options.index) {
+					return;
+				}
+
+				curActiveElement = self._indexObjects[self._activeIndexNo].container,
+				indexElement = self._indexObjects[indexNo].container,
+				indicatorText = self._indicator.element.firstChild;
+
+				if (indexElement) {
+					self._activeIndexNo = indexNo;
+					curActiveElement.classList.remove(classes.SELECTED);
+					indexElement.classList.add(classes.SELECTED);
+					indicatorText.innerHTML = self.options.index[indexNo];
+					if (isFireEvent) {
+						eventTrigger(self.element, EventType.SELECT, {index: self.options.index[indexNo]});
+					}
+				}
+			};
+
+			/**
+			 * This method select next index
+			 * @method _nextIndex
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._nextIndex = function() {
+				var self = this,
+					activeIndexNo = self._activeIndexNo,
+					indexLen = self.options.index.length,
+					nextIndexNo = activeIndexNo < indexLen - 1 ? activeIndexNo + 1 : 0;
+
+				self._setValueByPosition(nextIndexNo, true);
+			};
+
+			/**
+			 * This method select previos index
+			 * @method _prevIndex
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._prevIndex = function() {
+				var self = this,
+					activeIndexNo = self._activeIndexNo,
+					indexLen = self.options.index.length,
+					prevIndexNo = activeIndexNo > 0 ? activeIndexNo - 1 : indexLen -1;
+
+				self._setValueByPosition(prevIndexNo, true);
+			};
+			/**
+			 * Get or Set index of the CircularIndexScrollbar
+			 *
+			 * Return current index or set the index
+			 *
+			 *		@example
+			 *		<progress class="ui-circularindexscrollbar" id="circularindexscrollbar"></progress>
+			 *		<script>
+			 *			var circularindexElement = document.getElementById("circularindex"),
+			 *				circularIndexScrollbar = tau.widget.CircleProgressBar(circularindexElement),
+			 *			// return current index value
+			 *			value = circularIndexScrollbar.value();
+			 *			// sets the index value
+			 *			circularIndexScrollbar.value("C");
+			 *		</script>
+			 * @method value
+			 * return {string} In get mode return current index value
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			/**
+			 * This method select the index
+			 * @method _setValue
+			 * @protected
+			 * @param {stirng} value of index
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._setValue = function(value) {
+				var self = this,
+					index = self.options.index,
+					indexNo;
+
+				if (index && (indexNo = index.indexOf(value)) >= 0) {
+					self._setValueByPosition(indexNo, false);
+				}
+			};
+
+			/**
+			 * This method gets current index
+			 * @method _getValue
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._getValue = function() {
+				var self = this,
+					index = self.options.index;
+
+				if (index) {
+					return index[self._activeIndexNo];
+				} else {
+					return null;
+				}
+			};
+
+			/**
+			 * This method is a "dragstart" event handler
+			 * @method _start
+			 * @protected
+			 * @param {Event} event Event
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._start = function(event) {
+				var self = this,
+					indicator = self._indicator;
+
+				indicator.dragging = true;
+				indicator.startX = event.detail.estimatedX;
+				indicator.positionX = indicator.element.getBoundingClientRect().left;
+				indicator.style.webkitTransition = "none";
+				indicator.style.transition = "none";
+
+				indicator.element.classList.remove(classes.INDICATOR_MINIMIZE);
+			};
+
+			/**
+			 * This method is a "dragmove" event handler
+			 * @method _move
+			 * @protected
+			 * @param {Event} event Event
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._move = function(event) {
+				var self = this,
+					indicator = self._indicator,
+					showPositionX = indicator.maxPositionX,
+					hiddenPositionX = indicator.minPositionX,
+					moveX = indicator.positionX + (event.detail.estimatedX - indicator.startX),
+					transform;
+
+					if (moveX >= hiddenPositionX && moveX <= showPositionX) {
+						transform = "translate3d(" + moveX + "px, 0, 0)";
+						indicator.style.webkitTransform = transform;
+						indicator.style.transform = transform;
+					} else if (moveX > showPositionX && !self._isShow) {
+						self.show();
+					} else if (moveX < hiddenPositionX && self._isShow) {
+						self.hide();
+					}
+			};
+
+			/**
+			 * This method is a "dragend" event handler
+			 * @method _end
+			 * @protected
+			 * @param {Event} event Event
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._end = function(event) {
+				var self = this,
+					indicator = self._indicator,
+					positionX = indicator.element.getBoundingClientRect().left;
+
+				if (!indicator.dragging) {
+					return;
+				}
+
+				if (positionX > (indicator.maxPositionX + indicator.minPositionX) / 2) {
+					self.show();
+				} else {
+					self.hide();
+				}
+
+				indicator.dragging = false;
+			};
+
+			/**
+			 * This method is a "swipe" event handler
+			 * @method _swipe
+			 * @protected
+			 * @param {Event} event Event
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._swipe = function(event) {
+				var self = this,
+					gesture = event.detail;
+
+				if (gesture.direction === Gesture.Direction.RIGHT) {
+					self._indicator.element.classList.remove(classes.INDICATOR_MINIMIZE);
+					self.show();
+				} else {
+					self.hide();
+				}
+
+				self._indicator.dragging = false;
+			};
+
+			/**
+			 * This method is a "mousewheel" event handler
+			 * @method _onMouseWheelHandler
+			 * @param {Event} event Event
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._wheel = function(event) {
+				var self = this,
+					delta = event.wheelDelta;
+
+				if (!self.options.index) {
+					return;
+				}
+
+				if(delta) {
+					if(delta < 0) {
+						self._nextIndex();
+					} else {
+						self._prevIndex();
+					}
+				}
+			};
+
+			/**
+			 * This method is a "transitionend" event handler on indexbar
+			 * @method _transitionEnd
+			 * @protected
+			 * @param {Event} event Event
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._transitionEnd = function(event) {
+				var self = this;
+
+				if (self._isShow) {
+					utilsEvents.on(document, "rotarydetent", self);
+					self._setActive(true);
+					eventTrigger(self.element, EventType.INDEX_SHOW);
+				} else {
+					utilsEvents.off(document, "rotarydetent", self);
+					self._setActive(false);
+					eventTrigger(self.element, EventType.INDEX_HIDE);
+				}
+			};
+
+			/**
+			 * This method is a "transitionend" event handler on indicator
+			 * @method _indicatorTransitionEnd
+			 * @protected
+			 * @param {Event} event Event
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._indicatorTransitionEnd = function(event) {
+				var self = this;
+
+				if (!self._isShow) {
+					self._indicator.element.classList.add(classes.INDICATOR_MINIMIZE);
+				}
+			};
+
+			/**
+			 * This method is a "rotarydetent" event handler
+			 * @method _rotary
+			 * @protected
+			 * @param {Event} event Event
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._rotary = function(event) {
+				var self = this,
+					direction = event.detail.direction;
+
+				event.stopPropagation();
+
+				if (!self.options.index) {
+					return;
+				}
+
+				if(direction === rotaryDirection.CW) {
+					self._nextIndex();
+				} else {
+					self._prevIndex();
+				}
+			};
+
+			/**
+			 * This method handles events
+			 * @method handleEvent
+			 * @public
+			 * @param {Event} event Event
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype.handleEvent = function(event) {
+				var self = this;
+
+				switch (event.type) {
+					case "dragstart":
+						self._start(event);
+						break;
+					case "drag":
+						self._move(event);
+						break;
+					case "dragend":
+					case "dragcancel":
+						self._end(event);
+						break;
+					case "swipe":
+						self._swipe(event);
+						break;
+					case "mousewheel":
+						self._wheel(event);
+						break;
+					case "webkitTransitionEnd":
+						if (self._indexBar === event.target) {
+							self._transitionEnd(event);
+						} else {
+							self._indicatorTransitionEnd(event);
+						}
+						break;
+					case "rotarydetent":
+						self._rotary(event);
+						break;
+				}
+			};
+
+			/**
+			 * This method binds events to component.
+			 * method _bindEvents
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._bindEvents = function() {
+				var self = this,
+					indicator = self._indicator.element;
+
+				utilsEvents.enableGesture(
+					indicator,
+
+					new utilsEvents.gesture.Drag({
+						blockVertical: true
+					}),
+
+					new utilsEvents.gesture.Swipe({
+						orientation: Gesture.Orientation.HORIZONTAL
+					})
+				);
+
+				utilsEvents.on(indicator, "drag dragstart dragend dragcancel swipe webkitTransitionEnd", self);
+				utilsEvents.on(self.element, "mousewheel", self);
+				utilsEvents.on(self._indexBar, "webkitTransitionEnd", self);
+			};
+
+			/**
+			 * This method unbinds events to component.
+			 * method _unbindEvents
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._unbindEvents = function() {
+				var self = this,
+					indicator = self._indicator.element,
+					indexBar = self._indexBar;
+
+				if (self.element) {
+					utilsEvents.off(self.element, "mousewheel", self);
+				}
+
+				if (indicator) {
+					utilsEvents.disableGesture(indicator);
+					utilsEvents.off(indicator, "drag dragstart dragend dragcancel swipe", self);
+				}
+
+				if (indexBar) {
+					utilsEvents.off(indexBar, "webkitTransitionEnd", self);
+				}
+
+				utilsEvents.off(document, "rotarydetent", self);
+			};
+
+			/**
+			 * This method sets active for router.
+			 * @method _setActive
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._setActive = function (active) {
+				var self = this,
+					route = engine.getRouter().getRoute("circularindexscrollbar");
+
+				if (active) {
+					route.setActive(self);
+				} else {
+					route.setActive(null);
+				}
+			};
+
+			/**
+			 * This method resets widget.
+			 * @method _reset
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._reset = function() {
+				var self = this;
+
+				self._indexBar = null;
+				self._isShow = false;
+				self._activeIndexNo = 0;
+				self._centralAngle = 0;
+				self._indexObjects = [];
+				self._indicator = {
+					element: null,
+					style: null,
+					startX: 0,
+					positionX: 0,
+					maxPositionX: 0,
+					minPositionX: 0,
+					dragging: false,
+				};
+
+				self.element.classList.remove(classes.SHOW);
+			};
+
+			/**
+			 * This method refreshes component.
+			 * @method _refresh
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._refresh = function() {
+				var self = this,
+					options = self.options;
+
+				self._unbindEvents();
+				self._destroySubObjects();
+				self._reset();
+				self._setIndices(options.index);
+				self._draw();
+				self._setValueByPosition(self._activeIndexNo, true);
+				self._bindEvents();
+			};
+
+			/**
+			 * This method detroys component.
+			 * @method _destroy
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._destroy = function() {
+				var self = this;
+				if (self.isBound()) {
+					self._unbindEvents();
+					self._destroySubObjects();
+					self._indexBar = null;
+					self._indicator = null;
+					self._indexObjects = null;
+				}
+			};
+
+			/**
+			 * This method destroys sub-elements: index elements and indicator.
+			 * @method _destroySubObjects
+			 * @protected
+			 * @member ns.widget.wearable.CircularIndexScrollbar
+			 */
+			prototype._destroySubObjects = function() {
+				var container = this.element;
+
+				container.textContent = "";
+			};
+
+			// definition
+			ns.widget.wearable.CircularIndexScrollbar = CircularIndexScrollbar;
+			engine.defineWidget(
+				"CircularIndexScrollbar",
+				".ui-circularindexscrollbar",
+				[],
+				CircularIndexScrollbar,
+				"wearable"
+			);
+			}(window.document, ns));
+
+/*global CustomEvent, define, window, ns */
+/*jslint plusplus: true, nomen: true, bitwise: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Virtual Mouse Events
+ * Reimplementation of jQuery Mobile virtual mouse events.
+ *
+ * ##Purpose
+ * It will let for users to register callbacks to the standard events like bellow,
+ * without knowing if device support touch or mouse events
+ * @class ns.event.vmouse
+ */
+/**
+ * Triggered after mouse-down or touch-started.
+ * @event vmousedown
+ * @member ns.event.vmouse
+ */
+/**
+ * Triggered when mouse-click or touch-end when touch-move didn't occur
+ * @event vclick
+ * @member ns.event.vmouse
+ */
+/**
+ * Triggered when mouse-up or touch-end
+ * @event vmouseup
+ * @member ns.event.vmouse
+ */
+/**
+ * Triggered when mouse-move or touch-move
+ * @event vmousemove
+ * @member ns.event.vmouse
+ */
+/**
+ * Triggered when mouse-over or touch-start if went over coordinates
+ * @event vmouseover
+ * @member ns.event.vmouse
+ */
+/**
+ * Triggered when mouse-out or touch-end
+ * @event vmouseout
+ * @member ns.event.vmouse
+ */
+/**
+ * Triggered when mouse-cancel or touch-cancel and when scroll occur during touchmove
+ * @event vmousecancel
+ * @member ns.event.vmouse
+ */
+(function (window, document, ns) {
+	
+					/**
+				 * Object with default options
+				 * @property {Object} vmouse
+				 * @member ns.event.vmouse
+				 * @static
+				 * @private
+				 **/
+			var vmouse,
+				/**
+				 * @property {Object} eventProps Contains the properties which are copied from the original event to custom v-events
+				 * @member ns.event.vmouse
+				 * @static
+				 * @private
+				 **/
+				eventProps,
+				/**
+				 * Indicates if the browser support touch events
+				 * @property {boolean} touchSupport
+				 * @member ns.event.vmouse
+				 * @static
+				 **/
+				touchSupport = window.hasOwnProperty("ontouchstart"),
+				/**
+				 * @property {boolean} didScroll The flag tell us if the scroll event was triggered
+				 * @member ns.event.vmouse
+				 * @static
+				 * @private
+				 **/
+				didScroll,
+				/**
+				 * @property {Number} [startX=0] Initial data for touchstart event
+				 * @member ns.event.vmouse
+				 * @static
+				 * @private
+				 **/
+				startX = 0,
+				/**
+				 * @property {Number} [startY=0] Initial data for touchstart event
+				 * @member ns.event.vmouse
+				 * @private
+				 * @static
+				**/
+				startY = 0,
+				touchEventProps = ["clientX", "clientY", "pageX", "pageY", "screenX", "screenY"],
+				KEY_CODES = {
+					enter: 13
+				};
+
+			/**
+			 * Extends objects with other objects
+			 * @method copyProps
+			 * @param {Object} from Sets the original event
+			 * @param {Object} to Sets the new event
+			 * @param {Object} properties Sets the special properties for position
+			 * @param {Object} propertiesNames Describe parameters which will be copied from Original to To event
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function copyProps(from, to, properties, propertiesNames) {
+				var i,
+					length,
+					descriptor,
+					property;
+
+				for (i = 0, length = propertiesNames.length; i < length; ++i) {
+					property = propertiesNames[i];
+					if (isNaN(properties[property]) === false || isNaN(from[property]) === false) {
+						descriptor = Object.getOwnPropertyDescriptor(to, property);
+						if (!descriptor || descriptor.writable) {
+							to[property] = properties[property] || from[property];
+						}
+					}
+				}
+			}
+
+			/**
+			 * Create custom event
+			 * @method createEvent
+			 * @param {string} newType gives a name for the new Type of event
+			 * @param {Event} original Event which trigger the new event
+			 * @param {Object} properties Sets the special properties for position
+			 * @return {Event}
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function createEvent(newType, original, properties) {
+				var evt = new CustomEvent(newType, {
+						"bubbles": original.bubbles,
+						"cancelable": original.cancelable,
+						"detail": original.detail
+					}),
+					orginalType = original.type,
+					changeTouches,
+					touch,
+					j = 0,
+					len,
+					prop;
+
+				copyProps(original, evt, properties, eventProps);
+				evt._originalEvent = original;
+
+				if (orginalType.indexOf("touch") !== -1) {
+					orginalType = original.touches;
+					changeTouches = original.changedTouches;
+
+					if (orginalType && orginalType.length) {
+						touch = orginalType[0];
+					} else {
+						touch = (changeTouches && changeTouches.length) ? changeTouches[0] : null;
+					}
+
+					if (touch) {
+						for (len = touchEventProps.length; j < len; j++) {
+							prop = touchEventProps[j];
+							evt[prop] = touch[prop];
+						}
+					}
+				}
+
+				return evt;
+			}
+
+			/**
+			 * Dispatch Events
+			 * @method fireEvent
+			 * @param {string} eventName event name
+			 * @param {Event} evt original event
+			 * @param {Object} properties Sets the special properties for position
+			 * @return {boolean}
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function fireEvent(eventName, evt, properties) {
+				return evt.target.dispatchEvent(createEvent(eventName, evt, properties || {}));
+			}
+
+			eventProps = [
+				"currentTarget",
+				"detail",
+				"button",
+				"buttons",
+				"clientX",
+				"clientY",
+				"offsetX",
+				"offsetY",
+				"pageX",
+				"pageY",
+				"screenX",
+				"screenY",
+				"toElement",
+				"which"
+			];
+
+			vmouse = {
+				/**
+				 * Sets the distance of pixels after which the scroll event will be successful
+				 * @property {number} [eventDistanceThreshold=10]
+				 * @member ns.event.vmouse
+				 * @static
+				 */
+				eventDistanceThreshold: 10,
+
+				touchSupport: touchSupport
+			};
+
+			/**
+			 * Handle click down
+			 * @method handleDown
+			 * @param {Event} evt
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function handleDown(evt) {
+				fireEvent("vmousedown", evt);
+			}
+
+			/**
+			 * Prepare position of event for keyboard events.
+			 * @method preparePositionForClick
+			 * @param {Event} event
+			 * @return {?Object} options
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function preparePositionForClick(event) {
+				var x = event.clientX,
+					y = event.clientY;
+				// event comes from keyboard
+				if (!x && !y) {
+					return preparePositionForEvent(event);
+				}
+			}
+
+			/**
+			 * Handle click
+			 * @method handleClick
+			 * @param {Event} evt
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function handleClick(evt) {
+				fireEvent("vclick", evt, preparePositionForClick(evt));
+			}
+
+			/**
+			 * Handle click up
+			 * @method handleUp
+			 * @param {Event} evt
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function handleUp(evt) {
+				fireEvent("vmouseup", evt);
+			}
+
+			/**
+			 * Handle click move
+			 * @method handleMove
+			 * @param {Event} evt
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function handleMove(evt) {
+				fireEvent("vmousemove", evt);
+			}
+
+			/**
+			 * Handle click over
+			 * @method handleOver
+			 * @param {Event} evt
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function handleOver(evt) {
+				fireEvent("vmouseover", evt);
+			}
+
+			/**
+			 * Handle click out
+			 * @method handleOut
+			 * @param {Event} evt
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function handleOut(evt) {
+				fireEvent("vmouseout", evt);
+			}
+
+			/**
+			 * Handle touch start
+			 * @method handleTouchStart
+			 * @param {Event} evt
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function handleTouchStart(evt) {
+				var touches = evt.touches,
+					firstTouch;
+				//if touches are registered and we have only one touch
+				if (touches && touches.length === 1) {
+					didScroll = false;
+					firstTouch = touches[0];
+					startX = firstTouch.pageX;
+					startY = firstTouch.pageY;
+					fireEvent("vmouseover", evt);
+					fireEvent("vmousedown", evt);
+				}
+
+			}
+
+			/**
+			 * Handle touch end
+			 * @method handleTouchEnd
+			 * @param {Event} evt
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function handleTouchEnd(evt) {
+				var touches = evt.touches;
+				if (touches && touches.length === 0) {
+					fireEvent("vmouseup", evt);
+					fireEvent("vmouseout", evt);
+				}
+			}
+
+			/**
+			 * Handle touch move
+			 * @method handleTouchMove
+			 * @param {Event} evt
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function handleTouchMove(evt) {
+				var over,
+					firstTouch = evt.touches && evt.touches[0],
+					didCancel = didScroll,
+					//sets the threshold, based on which we consider if it was the touch-move event
+					moveThreshold = vmouse.eventDistanceThreshold;
+
+				/**
+				 * Ignore the touch which has identifier other than 0.
+				 * Only first touch has control others are ignored.
+				 * Patch for webkit behaviour where touchmove event
+				 * is triggered between touchend events
+				 * if there is multi touch.
+				 */
+				if (firstTouch.identifier > 0) {
+					evt.preventDefault();
+					evt.stopPropagation();
+					return;
+				}
+
+				didScroll = didScroll ||
+				//check in both axes X,Y if the touch-move event occur
+					(Math.abs(firstTouch.pageX - startX) > moveThreshold ||
+					Math.abs(firstTouch.pageY - startY) > moveThreshold);
+
+				// detect over event
+				// for compatibility with mouseover because "touchenter" fires only once
+				over = document.elementFromPoint(evt.pageX, evt.pageY);
+				if (over) {
+					fireEvent("_touchover", evt);
+				}
+
+				//if didscroll occur and wasn't canceled then trigger touchend otherwise just touchmove
+				if (didScroll && !didCancel) {
+					fireEvent("vmousecancel", evt);
+				}
+				fireEvent("vmousemove", evt);
+			}
+
+			/**
+			 * Handle Scroll
+			 * @method handleScroll
+			 * @param {Event} evt
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function handleScroll(evt) {
+				if (!didScroll) {
+					fireEvent("vmousecancel", evt);
+				}
+				didScroll = true;
+			}
+
+			/**
+			 * Handle touch cancel
+			 * @method handleTouchCancel
+			 * @param {Event} evt
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function handleTouchCancel(evt) {
+				fireEvent("vmousecancel", evt);
+			}
+
+			/**
+			 * Handle touch cancel
+			 * @method handleTouchOver
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function handleTouchOver() {
+				return false;
+				// @TODO add callback with handleTouchOver,
+			}
+
+			/**
+			 * Prepare position of event for keyboard events.
+			 * @method preparePositionForEvent
+			 * @param {Event} event
+			 * @return {Object} properties
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function preparePositionForEvent(event) {
+				var targetRect = event.target && event.target.getBoundingClientRect(),
+					properties = {};
+				if (targetRect) {
+					properties = {
+						"clientX": targetRect.left + targetRect.width / 2,
+						"clientY": targetRect.top + targetRect.height / 2,
+						"which": 1
+					};
+				}
+				return properties;
+			}
+
+			/**
+			 * Handle key up
+			 * @method handleKeyUp
+			 * @param {Event} event
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function handleKeyUp(event) {
+				var properties;
+				if (event.keyCode === KEY_CODES.enter) {
+					properties = preparePositionForEvent(event);
+					fireEvent("vmouseup", event, properties);
+					fireEvent("vclick", event, properties);
+				}
+			}
+
+			/**
+			 * Handle key down
+			 * @method handleKeyDown
+			 * @param {Event} event
+			 * @private
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			function handleKeyDown(event) {
+				if (event.keyCode === KEY_CODES.enter) {
+					fireEvent("vmousedown", event, preparePositionForEvent(event));
+				}
+			}
+
+			// @TODO delete touchSupport flag and attach touch and mouse listeners,
+			// @TODO check if v-events are not duplicated if so then called only once
+
+			/**
+			 * Binds touch events to support virtual mouse.
+			 * @method bindTouch
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			vmouse.bindTouch = function () {
+				document.addEventListener("touchstart", handleTouchStart, true);
+				document.addEventListener("touchend", handleTouchEnd, true);
+				document.addEventListener("touchmove", handleTouchMove, true);
+
+				// @TODO add callback with handleTouchOver,
+				document.addEventListener("touchenter", handleTouchOver, true);
+				// for compatibility with mouseover because "touchenter" fires only once
+				// @TODO add callback with handleTouchOver,
+				document.addEventListener("_touchover", handleTouchOver, true);
+				// document.addEventListener("touchleave", callbacks.out, true);
+				document.addEventListener("touchcancel", handleTouchCancel, true);
+
+				document.addEventListener("click", handleClick, true);
+			};
+
+			/**
+			 * Binds mouse events to support virtual mouse.
+			 * @method bindMouse
+			 * @static
+			 * @member ns.event.vmouse
+			 */
+			vmouse.bindMouse = function () {
+				document.addEventListener("mousedown", handleDown, true);
+
+				document.addEventListener("mouseup", handleUp, true);
+				document.addEventListener("mousemove", handleMove, true);
+				document.addEventListener("mouseover", handleOver, true);
+				document.addEventListener("mouseout", handleOut, true);
+
+				document.addEventListener("keyup", handleKeyUp, true);
+				document.addEventListener("keydown", handleKeyDown, true);
+				document.addEventListener("scroll", handleScroll, true);
+				document.addEventListener("click", handleClick, true);
+			};
+
+			ns.event.vmouse = vmouse;
+
+			if (touchSupport) {
+				vmouse.bindTouch();
+			} else {
+				vmouse.bindMouse();
+			}
+
+			}(window, window.document, ns));
+
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ */
+(function (window, ns) {
+	
+				/** @namespace ns.widget.wearable */
+			ns.widget.wearable.indexscrollbar = ns.widget.wearable.indexscrollbar || {};
+			}(window, ns));
+
+/*global define, ns, document, window */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true, plusplus: true */
+/**
+ * #IndexBar widget
+ * Widget creates bar with index.
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Jadwiga Sosnowska <j.sosnowska@samsung.com>
+ * @class ns.widget.wearable.indexscrollbar.IndexBar
+ */
+(function (document, ns) {
+	
+				var utilsObject = ns.util.object,
+				utilsDOM = ns.util.DOM;
+
+			function IndexBar(element, options) {
+				this.element = element;
+				this.options = utilsObject.merge(options, this._options, false);
+				this.container = this.options.container;
+
+				this.indices = {
+					original: this.options.index,
+					merged: []
+				};
+
+				this._init();
+
+				return this;
+			}
+			IndexBar.prototype = {
+				_options: {
+					container: null,
+					offsetLeft: 0,
+					index: [],
+					verticalCenter: false,
+					moreChar: "*",
+					indexHeight: 41,
+					selectedClass: "ui-state-selected",
+					ulClass: null,
+					maxIndexLen : 0
+				},
+				_init: function() {
+					this.indices.original = this.options.index;
+					this.indexLookupTable = [];
+					this.indexElements = null;
+					this.selectedIndex = -1;
+					this.visiblity = "hidden";
+
+					this._setMaxIndexLen();
+					this._makeMergedIndices();
+					this._drawDOM();
+					this._appendToContainer();
+					if(this.options.verticalCenter) {
+						this._adjustVerticalCenter();
+					}
+					this._setIndexCellInfo();
+				},
+
+				_clear: function() {
+					while(this.element.firstChild) {
+						this.element.removeChild(this.element.firstChild);
+					}
+
+					this.indices.merged.length = 0;
+					this.indexLookupTable.length = 0;
+					this.indexElements = null;
+					this.selectedIndex = -1;
+					this.visiblity = null;
+				},
+
+				/**
+				 * Refreshes widget.
+				 * @method refresh
+				 * @member ns.widget.wearable.indexscrollbar.IndexBar
+				 */
+				refresh: function() {
+					this._clear();
+					this._init();
+				},
+
+				/**
+				 * Destroys widget.
+				 * @method destroy
+				 * @member ns.widget.wearable.indexscrollbar.IndexBar
+				 */
+				destroy: function() {
+					this._clear();
+				},
+
+				/**
+				 * Shows widget.
+				 * @method show
+				 * @member ns.widget.wearable.indexscrollbar.IndexBar
+				 */
+				show: function() {
+					this.visibility = "visible";
+					this.element.style.visibility = this.visibility;
+				},
+
+				/**
+				 * Hides widget.
+				 * @method hide
+				 * @member ns.widget.wearable.indexscrollbar.IndexBar
+				 */
+				hide: function() {
+					this.visibility = "hidden";
+					this.element.style.visibility = this.visibility;
+				},
+
+				/**
+				 * Get if the visibility status is shown or not
+				 * @method isShown
+				 * @member ns.widget.wearable.indexscrollbar.IndexBar
+				 */
+				isShown: function() {
+					return "visible" === this.visibility;
+				},
+
+				_setMaxIndexLen: function() {
+					var maxIndexLen,
+						containerHeight = this.container.offsetHeight;
+					maxIndexLen = Math.floor( containerHeight / this.options.indexHeight );
+					if(maxIndexLen > 0 && maxIndexLen%2 === 0) {
+						maxIndexLen -= 1;	// Ensure odd number
+					}
+					this.options.maxIndexLen = this.options.maxIndexLen > 0 ? Math.min(maxIndexLen, this.options.maxIndexLen) : maxIndexLen;
+				},
+
+				_makeMergedIndices: function() {
+					var origIndices = this.indices.original,
+						origIndexLen = origIndices.length,
+						visibleIndexLen = Math.min(this.options.maxIndexLen, origIndexLen),
+						totalLeft = origIndexLen - visibleIndexLen,
+						nIndexPerItem = parseInt(totalLeft / parseInt(visibleIndexLen/2, 10), 10),
+						leftItems = totalLeft % parseInt(visibleIndexLen/2, 10),
+						indexItemSize = [],
+						mergedIndices = [],
+						i, len, position=0;
+
+					for(i = 0, len = visibleIndexLen; i < len; i++) {
+						indexItemSize[i] = 1;
+						if (i % 2) {	// even number: omitter
+							indexItemSize[i] += nIndexPerItem + (leftItems-- > 0 ? 1 : 0);
+						}
+						position +=  indexItemSize[i];
+						mergedIndices.push( {
+							start: position-1,
+							length: indexItemSize[i]
+						});
+					}
+					this.indices.merged = mergedIndices;
+				},
+
+				_drawDOM: function() {
+					var origIndices = this.indices.original,
+						indices = this.indices.merged,
+						indexLen = indices.length,
+					//container = this.container,
+					//containerHeight = container.offsetHeight,
+						indexHeight = this.options.indexHeight,
+					//maxIndexLen = Math.min(this.maxIndexLen, indices.length),
+						moreChar = this.options.moreChar,
+						addMoreCharLineHeight = 9,
+						text,
+						frag,
+						li,
+						i,
+						m;
+
+					frag = document.createDocumentFragment();
+					for(i=0; i < indexLen; i++) {
+						m = indices[i];
+						text = m.length === 1 ? origIndices[m.start] : moreChar;
+						li = document.createElement("li");
+						li.innerText = text.toUpperCase();
+						li.style.height = indexHeight + "px";
+						li.style.lineHeight = text === moreChar ? indexHeight + addMoreCharLineHeight + "px" : indexHeight + "px";
+						frag.appendChild(li);
+					}
+					this.element.appendChild(frag);
+
+					if(this.options.ulClass) {
+						this.element.classList.add( this.options.ulClass );
+					}
+				},
+
+				_adjustVerticalCenter: function() {
+					var nItem = this.indices.merged.length,
+						totalIndexLen = nItem * this.options.indexHeight,
+						vPadding = parseInt((this.container.offsetHeight - totalIndexLen) / 2, 10);
+					this.element.style.paddingTop = vPadding + "px";
+				},
+
+				_appendToContainer: function() {
+					this.container.appendChild(this.element);
+					this.element.style.left = this.options.offsetLeft + "px";
+				},
+
+				/**
+				 * Sets padding top for element.
+				 * @method setPaddingTop
+				 * @param {number} paddingTop
+				 * @member ns.widget.wearable.indexscrollbar.IndexBar
+				 */
+				setPaddingTop: function(paddingTop) {
+					var height = this.element.clientHeight,
+						oldPaddingTop = this.element.style.paddingTop,
+						containerHeight = this.container.clientHeight;
+
+					if(oldPaddingTop === "") {
+						oldPaddingTop = 0;
+					} else {
+						oldPaddingTop = parseInt(oldPaddingTop, 10);
+					}
+
+					height = height - oldPaddingTop;
+
+					if(height > containerHeight) {
+						paddingTop -= (paddingTop + height - containerHeight);
+					}
+					this.element.style.paddingTop = paddingTop + "px";
+
+					this._setIndexCellInfo();	// update index cell info
+				},
+
+				/**
+				 * Returns element's offsetTop of given index.
+				 * @method getOffsetTopByIndex
+				 * @param {number} index
+				 * @return {number}
+				 * @member ns.widget.wearable.indexscrollbar.IndexBar
+				 */
+				getOffsetTopByIndex: function(index) {
+					var cellIndex = this.indexLookupTable[index].cellIndex,
+						el = this.indexElements[cellIndex],
+						offsetTop = el.offsetTop;
+
+					return offsetTop;
+				},
+
+				_setIndexCellInfo: function() {
+					var element = this.element,
+						mergedIndices = this.indices.merged,
+						containerOffsetTop = utilsDOM.getElementOffset(this.container).top,
+						listitems = this.element.querySelectorAll("LI"),
+						lookupTable = [];
+
+					[].forEach.call(listitems, function(node, idx) {
+						var m = mergedIndices[idx],
+							i = m.start,
+							len = i + m.length,
+							top = containerOffsetTop + node.offsetTop,
+							height = node.offsetHeight / m.length;
+
+						for ( ; i < len; i++ ) {
+							lookupTable.push({
+								cellIndex: idx,
+								top: top,
+								range: height
+							});
+							top += height;
+						}
+					});
+					this.indexLookupTable = lookupTable;
+					this.indexElements = element.children;
+				},
+
+				/**
+				 * Returns index for given position.
+				 * @method getIndexByPosition
+				 * @param {number} posY
+				 * @return {number}
+				 * @member ns.widget.wearable.indexscrollbar.IndexBar
+				 */
+				getIndexByPosition: function(posY) {
+					var table = this.indexLookupTable,
+						info,
+						i, len, range;
+
+					// boundary check
+					if( table[0] ) {
+						info = table[0];
+						if(posY < info.top) {
+							return 0;
+						}
+					}
+					if( table[table.length -1] ) {
+						info = table[table.length -1];
+						if(posY >= info.top + info.range) {
+							return table.length - 1;
+						}
+					}
+					for ( i=0, len=table.length; i < len; i++) {
+						info = table[i];
+						range = posY - info.top;
+						if ( range >= 0 && range < info.range ) {
+							return i;
+						}
+					}
+					return 0;
+				},
+
+				/**
+				 * Returns value for given index.
+				 * @method getValueByIndex
+				 * @param {number} idx
+				 * @return {number}
+				 * @member ns.widget.wearable.indexscrollbar.IndexBar
+				 */
+				getValueByIndex: function(idx) {
+					if(idx < 0) { idx = 0; }
+					return this.indices.original[idx];
+				},
+
+				/**
+				 * Select given index
+				 * @method select
+				 * @param {number} idx
+				 * @member ns.widget.wearable.indexscrollbar.IndexBar
+				 */
+				select: function(idx) {
+					var cellIndex,
+						eCell;
+
+					this.clearSelected();
+
+					if(this.selectedIndex === idx) {
+						return;
+					}
+					this.selectedIndex = idx;
+
+					cellIndex = this.indexLookupTable[idx].cellIndex;
+					eCell = this.indexElements[cellIndex];
+					eCell.classList.add(this.options.selectedClass);
+				},
+
+				/**
+				 * Clears selected class.
+				 * @method clearSelected
+				 * @member ns.widget.wearable.indexscrollbar.IndexBar
+				 */
+				clearSelected: function() {
+					var el = this.element,
+						selectedClass = this.options.selectedClass,
+						selectedElement = el.querySelectorAll("."+selectedClass);
+
+					[].forEach.call(selectedElement, function(node) {
+						node.classList.remove(selectedClass);
+					});
+					this.selectedIndex = -1;
+				}
+			};
+
+			ns.widget.wearable.indexscrollbar.IndexBar = IndexBar;
+
+			}(window.document, ns));
+
+/*global define, ns, document, window */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true, plusplus: true */
+/**
+ * #IndexIndicator widget
+ * Class creates index indicator.
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Jadwiga Sosnowska <j.sosnowska@samsung.com>
+ * @class ns.widget.wearable.indexscrollbar.IndexIndicator
+ */
+(function (document, ns) {
+	
+				var utilsObject = ns.util.object,
+				events = ns.event;
+
+			/**
+			 * @brief block 'unexpected bouncing effect' on indexscroller indicator.
+			 */
+			function blockEvent (event) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+
+			function IndexIndicator(element, options) {
+				this.element = element;
+				this.options = utilsObject.merge(options, this._options, false);
+				this.value = null;
+
+				this._init();
+
+				return this;
+			}
+
+			IndexIndicator.prototype = {
+				_options: {
+					className: "ui-indexscrollbar-indicator",
+					selectedClass: "ui-selected",
+					container: null
+				},
+				_init: function() {
+					var self = this,
+						options = self.options,
+						element = self.element;
+					element.className = options.className;
+					element.innerHTML = "<span></span>";
+					events.on(element, ["touchstart", "touchmove"], blockEvent, false);
+
+
+					// Add to DOM tree
+					options.referenceElement.parentNode.insertBefore(element, options.referenceElement);
+					self.fitToContainer();
+				},
+
+				/**
+				 * Fits size to container.
+				 * @method fitToContainer
+				 * @member ns.widget.wearable.indexscrollbar.IndexIndicator
+				 */
+				fitToContainer: function() {
+					var element = this.element,
+						container = this.options.container,
+						containerPosition = window.getComputedStyle(container).position;
+
+					element.style.width = container.offsetWidth + "px";
+					element.style.height = container.offsetHeight + "px";
+
+					if ( containerPosition !== "absolute" && containerPosition !== "relative" ) {
+						element.style.top = container.offsetTop + "px";
+						element.style.left = container.offsetLeft + "px";
+					}
+				},
+
+				/**
+				 * Sets value of widget.
+				 * @method setValue
+				 * @param {string} value
+				 * @member ns.widget.wearable.indexscrollbar.IndexIndicator
+				 */
+				setValue: function( value ) {
+					this.value = value;	// remember value
+					value = value.toUpperCase();
+
+					var selected = value.substr(value.length - 1),
+						remained = value.substr(0, value.length - 1),
+						inner = "<span>" + remained + "</span><span class=\"ui-selected\">" + selected + "</span>";
+					this.element.firstChild.innerHTML = inner;	// Set indicator text
+				},
+
+				/**
+				 * Shows widget.
+				 * @method show
+				 * @member ns.widget.wearable.indexscrollbar.IndexIndicator
+				 */
+				show: function() {
+					//this.element.style.visibility="visible";
+					this.element.style.display="block";
+				},
+
+				/**
+				 * Hides widget.
+				 * @method hide
+				 * @member ns.widget.wearable.indexscrollbar.IndexIndicator
+				 */
+				hide: function() {
+					this.element.style.display="none";
+				},
+
+				/**
+				 * Destroys widget.
+				 * @method destroy
+				 * @member ns.widget.wearable.indexscrollbar.IndexIndicator
+				 */
+				destroy: function() {
+					var element = this.element;
+
+					while(element.firstChild) {
+						element.removeChild(element.firstChild);
+					}
+					events.off(element, ["touchstart", "touchmove"], blockEvent, false);
+					this.element = null;	// unreference element
+
+				}
+			};
+			ns.widget.wearable.indexscrollbar.IndexIndicator = IndexIndicator;
+			}(window.document, ns));
+
+/*global define, ns, document, window */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true, plusplus: true */
+/**
+ * #IndexScrollbar Widget
+ * Shows an index scroll bar with indices, usually for the list.
+ *
+ * The index scroll bar widget shows on the screen a scrollbar with indices,
+ * and fires a select event when the index characters are clicked.
+ * The following table describes the supported index scroll bar APIs.
+ *
+ * ## Manual constructor
+ * For manual creation of widget you can use constructor of widget from **tau** namespace:
+ *
+ *		@example
+ *		var indexscrollbarElement = document.getElementById('indexscrollbar'),
+ *			indexscrollbar = tau.widget.IndexScrollbar(IndexScrollbar, {index: "A,B,C"});
+ *
+ * Constructor has one require parameter **element** which are base **HTMLElement** to create widget.
+ * We recommend get this element by method *document.getElementById*. Second parameter is **options**
+ * and it is a object with options for widget.
+ *
+ * To add an IndexScrollbar widget to the application, use the following code:
+ *
+ *      @example
+ *      <div id="foo" class="ui-indexscrollbar" data-index="A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z"></div>
+ *      <script>
+ *          (function() {
+ *              var elem = document.getElementById("foo");
+ *              tau.widget.IndexScrollbar(elem);
+ *              elem.addEventListener("select", function( event ) {
+ *                  var index = event.detail.index;
+ *                  console.log(index);
+ *              });
+ *          }());
+ *      </script>
+ *
+ * The index value can be retrieved by accessing event.detail.index property.
+ *
+ * In the following example, the list scrolls to the position of the list item defined using
+ * the li-divider class, selected by the index scroll bar:
+ *
+ *      @example
+ *         <div id="pageIndexScrollbar" class="ui-page">
+ *             <header class="ui-header">
+ *                 <h2 class="ui-title">IndexScrollbar</h2>
+ *             </header>
+ *             <section class="ui-content">
+ *                 <div style="overflow-y:scroll;">
+ *                     <div id="indexscrollbar1"
+ *                          class="ui-indexscrollbar"
+ *                          data-index="A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z">
+ *                     </div>
+ *                     <ul class="ui-listview" id="list1">
+ *                         <li class="li-divider">A</li>
+ *                         <li>Anton</li>
+ *                         <li>Arabella</li>
+ *                         <li>Art</li>
+ *                         <li class="li-divider">B</li>
+ *                         <li>Barry</li>
+ *                         <li>Bibi</li>
+ *                         <li>Billy</li>
+ *                         <li>Bob</li>
+ *                         <li class="li-divider">D</li>
+ *                         <li>Daisy</li>
+ *                         <li>Derek</li>
+ *                         <li>Desmond</li>
+ *                     </ul>
+ *                 </div>
+ *             </section>
+ *             <script>
+ *                 (function () {
+ *                     var page = document.getElementById("pageIndexScrollbar");
+ *                     page.addEventListener("pagecreate", function () {
+ *                         var elem = document.getElementById("indexscrollbar1"), // Index scroll bar element
+ *                                 elList = document.getElementById("list1"), // List element
+ *                                 elDividers = elList.getElementsByClassName("li-divider"), // List items (dividers)
+ *                                 elScroller = elList.parentElement, // List's parent item (overflow-y:scroll)
+ *                                 dividers = {}, // Collection of list dividers
+ *                                 indices = [], // List of index
+ *                                 elDivider,
+ *                                 i, idx;
+ *
+ *                         // For all list dividers
+ *                         for (i = 0; i < elDividers.length; i++) {
+ *                             // Add the list divider elements to the collection
+ *                             elDivider = elDividers[i];
+ *                             // li element having the li-divider class
+ *                             idx = elDivider.innerText;
+ *                             // Get a text (index value)
+ *                             dividers[idx] = elDivider;
+ *                             // Remember the element
+ *
+ *                             // Add the index to the index list
+ *                             indices.push(idx);
+ *                         }
+ *
+ *                         // Change the data-index attribute to the indexscrollbar element
+ *                         // before initializing IndexScrollbar widget
+ *                         elem.setAttribute("data-index", indices.join(","));
+ *
+ *                         // Create index scroll bar
+ *                         tau.IndexScrollbar(elem);
+ *
+ *                         // Bind the select callback
+ *                         elem.addEventListener("select", function (ev) {
+ *                             var elDivider,
+ *                                     idx = ev.detail.index;
+ *                             elDivider = dividers[idx];
+ *                             if (elDivider) {
+ *                                 // Scroll to the li-divider element
+ *                                 elScroller.scrollTop = elDivider.offsetTop - elScroller.offsetTop;
+ *                             }
+ *                         });
+ *                     });
+ *                 }());
+ *             </script>
+ *         </div>
+ *
+ * The following example uses the supplementScroll argument, which shows a level 2 index scroll bar.
+ * The application code must contain a level 2 index array for each level 1 index character.
+ * The example shows a way to analyze list items and create a dictionary (secondIndex) for level 1
+ * indices for the index scroll bar, and a dictionary (keyItem) for moving list items at runtime:
+ *
+ *      @example
+ *         <div id="indexscrollbar2" class="ui-indexscrollbar"
+ *              data-index="A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z">
+ *         </div>
+ *         <ul class="ui-listview" id="ibar2_list2">
+ *             <li>Anton</li>
+ *             <li>Arabella</li>
+ *             <li>Art</li>
+ *             <li>Barry</li>
+ *             <li>Bibi</li>
+ *             <li>Billy</li>
+ *             <li>Bob</li>
+ *             <li>Carry</li>
+ *             <li>Cibi</li>
+ *             <li>Daisy</li>
+ *             <li>Derek</li>
+ *             <li>Desmond</li>
+ *         </ul>
+ *
+ *         <script>
+ *             (function () {
+ *                 var page = document.getElementById("pageIndexScrollbar2"),
+ *                         isb,
+ *                         index = [],
+ *                         supIndex = {},
+ *                         elIndex = {};
+ *                 page.addEventListener("pageshow", function () {
+ *                     var elisb = document.getElementById("indexscrollbar2"),
+ *                             elList = document.getElementById("ibar2_list2"), // List element
+ *                             elItems = elList.children,
+ *                             elScroller = elList.parentElement, // Scroller (overflow-y:hidden)
+ *                             indexData = getIndexData(
+ *                                     {
+ *                                         array: elItems,
+ *                                         getTextValue: function (array, i) {
+ *                                             return array[i].innerText;
+ *                                         }
+ *                                     });
+ *
+ *                     function getIndexData(options) {
+ *                         var array = options.array,
+ *                                 getTextValue = options.getTextValue,
+ *                                 item,
+ *                                 text,
+ *                                 firstIndex = [],
+ *                                 secondIndex = {},
+ *                                 keyItem = {},
+ *                                 c1 = null,
+ *                                 c2 = null,
+ *                                 i;
+ *
+ *                         for (i = 0; i < array.length; i++) {
+ *                             item = array[i];
+ *                             text = getTextValue(array, i);
+ *                             if (text.length > 0) {
+ *                                 if (!c1 || c1 !== text[0]) {
+ *                                     // New c1
+ *                                     c1 = text[0];
+ *                                     firstIndex.push(c1);
+ *                                     keyItem[c1] = item;
+ *                                     secondIndex[c1] = [];
+ *                                     c2 = text[1];
+ *                                     if (c2) {
+ *                                         secondIndex[c1].push(c2);
+ *                                     }
+ *                                     else {
+ *                                         c2 = '';
+ *                                     }
+ *                                     keyItem[c1 + c2] = item;
+ *                                 }
+ *                                 else {
+ *                                     // Existing c1
+ *                                     if (c2 !== text[1]) {
+ *                                         c2 = text[1];
+ *                                         secondIndex[c1].push(c2);
+ *                                         keyItem[c1 + c2] = item;
+ *                                     }
+ *                                 }
+ *                             }
+ *                         }
+ *                         return {
+ *                             firstIndex: firstIndex,
+ *                             secondIndex: secondIndex,
+ *                             keyItem: keyItem
+ *                         };
+ *                     }
+ *
+ *                     // Update the data-index attribute to the indexscrollbar element, with the index list above
+ *                     elisb.setAttribute("data-index", indexData.firstIndex);
+ *                     // Create IndexScrollbar
+ *                     isb = new tau.IndexScrollbar(elisb, {
+ *                         index: indexData.firstIndex,
+ *                         supplementaryIndex: function (firstIndex) {
+ *                             return indexData.secondIndex[firstIndex];
+ *                         }
+ *                     });
+ *                     // Bind the select callback
+ *                     elisb.addEventListener("select", function (ev) {
+ *                         var el,
+ *                             index = ev.detail.index;
+ *                         el = indexData.keyItem[index];
+ *                         if (el) {
+ *                             // Scroll to the li-divider element
+ *                             elScroller.scrollTop = el.offsetTop - elScroller.offsetTop;
+ *                         }
+ *                     });
+ *                 });
+ *                 page.addEventListener("pagehide", function () {
+ *                     console.log('isb2:destroy');
+ *                     isb.destroy();
+ *                     index.length = 0;
+ *                     supIndex = {};
+ *                     elIndex = {};
+ *                 });
+ *             }());
+ *         </script>
+ *
+ * ##Options for widget
+ *
+ * Options for widget can be defined as _data-..._ attributes or give as parameter in constructor.
+ *
+ * You can change option for widget using method **option**.
+ *
+ * ##Methods
+ *
+ * To call method on widget you can use tau API:
+ *
+ * First API is from tau namespace:
+ *
+ *		@example
+ *		var indexscrollbarElement = document.getElementById('indexscrollbar'),
+ *			indexscrollbar = tau.widget.IndexScrollbar(indexscrollbarElement);
+ *
+ *		indexscrollbar.methodName(methodArgument1, methodArgument2, ...);
+ *
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Jadwiga Sosnowska <j.sosnowska@samsung.com>
+ * @author Tomasz Lukawski <t.lukawski@samsung.com>
+ * @class ns.widget.wearable.IndexScrollbar
+ * @extends ns.widget.BaseWidget
+ */
+(function (document, ns) {
+	
+				var IndexScrollbar = function() {
+				// Support calling without 'new' keyword
+				this.element = null;
+				this.indicator = null;
+				this.indexBar1 = null;	// First IndexBar. Always shown.
+				this.indexBar2 = null;	// 2-depth IndexBar. shown if needed.
+
+
+				this.index = null;
+				this.touchAreaOffsetLeft = 0;
+				this.indexElements = null;
+				this.selectEventTriggerTimeoutId = null;
+				this.ulMarginTop = 0;
+
+				this.eventHandlers = {};
+
+			},
+				BaseWidget = ns.widget.BaseWidget,
+			/**
+			 * Alias for class {@link ns.engine}
+			 * @property {Object} engine
+			 * @member ns.widget.wearable.IndexScrollbar
+			 * @private
+			 * @static
+			 */
+				engine = ns.engine,
+
+			/**
+			 * Alias for class {@link ns.event}
+			 * @property {Object} events
+			 * @member ns.widget.wearable.IndexScrollbar
+			 * @private
+			 * @static
+			 */
+				events = ns.event,
+			/**
+			 * Alias for class {@link ns.util.object}
+			 * @property {Object} utilsObject
+			 * @member ns.widget.wearable.IndexScrollbar
+			 * @private
+			 * @static
+			 */
+				utilsObject = ns.util.object,
+			/**
+			 * Alias for class ns.util.DOM
+			 * @property {ns.util.DOM} doms
+			 * @member ns.widget.wearable.IndexScrollbar
+			 * @private
+			 * @static
+			 */
+				doms = ns.util.DOM,
+				IndexBar = ns.widget.wearable.indexscrollbar.IndexBar,
+				IndexIndicator = ns.widget.wearable.indexscrollbar.IndexIndicator,
+				EventType = {
+					/**
+					 * Event triggered after select index by user
+					 * @event select
+					 * @member ns.widget.wearable.IndexScrollbar
+					 */
+					SELECT: "select"
+				},
+
+				POINTER_START = 'vmousedown',
+				POINTER_MOVE = 'vmousemove',
+				POINTER_END = 'vmouseup',
+
+				pointerIsPressed = false,
+				prototype = new BaseWidget();
+
+			IndexScrollbar.prototype = prototype;
+
+			utilsObject.merge(prototype, {
+				widgetName: "IndexScrollbar",
+				widgetClass: "ui-indexscrollbar",
+
+				_configure: function () {
+					/**
+					 * All possible widget options
+					 * @property {Object} options
+					 * @property {string} [options.moreChar="*"] more character
+					 * @property {string} [options.selectedClass="ui-state-selected"] disabled class name
+					 * @property {string} [options.delimiter=","] delimiter in index
+					 * @property {string|Array} [options.index=["A","B","C","D","E","F","G","H","I",
+					 * "J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","1"]]
+					 * String with list of letters separate be delimiter or array of letters
+					 * @property {boolean} [options.maxIndexLen=0]
+					 * @property {boolean} [options.indexHeight=41]
+					 * @property {boolean} [options.keepSelectEventDelay=50]
+					 * @property {?boolean} [options.container=null]
+					 * @property {?boolean} [options.supplementaryIndex=null]
+					 * @property {number} [options.supplementaryIndexMargin=1]
+					 * @member ns.widget.wearable.IndexScrollbar
+					 */
+					this.options = {
+						moreChar: "*",
+						indexScrollbarClass: "ui-indexscrollbar",
+						selectedClass: "ui-state-selected",
+						indicatorClass: "ui-indexscrollbar-indicator",
+						delimiter: ",",
+						index: [
+							"A", "B", "C", "D", "E", "F", "G", "H",
+							"I", "J", "K", "L", "M", "N", "O", "P", "Q",
+							"R", "S", "T", "U", "V", "W", "X", "Y", "Z", "1"
+						],
+						maxIndexLen: 0,
+						indexHeight: 41,
+						keepSelectEventDelay: 50,
+						container: null,
+						supplementaryIndex: null,
+						supplementaryIndexMargin: 1
+					};
+				},
+
+				/**
+				 * This method builds widget.
+				 * @method _build
+				 * @protected
+				 * @param {HTMLElement} element
+				 * @return {HTMLElement}
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_build: function (element) {
+					return element;
+				},
+
+				/**
+				 * This method inits widget.
+				 * @method _init
+				 * @protected
+				 * @param {HTMLElement} element
+				 * @return {HTMLElement}
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_init: function (element) {
+					var self = this,
+						options = self.options;
+
+					element.classList.add(options.indexScrollbarClass);
+
+					self._setIndex(element, options.index);
+					self._setMaxIndexLen(element, options.maxIndexLen);
+					self._setInitialLayout();	// This is needed for creating sub objects
+					self._createSubObjects();
+
+					self._updateLayout();
+
+					// Mark as extended
+					self._extended(true);
+					return element;
+				},
+
+				/**
+				 * This method refreshes widget.
+				 * @method _refresh
+				 * @protected
+				 * @return {HTMLElement}
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_refresh: function () {
+					if( this._isExtended() ) {
+						this._unbindEvent();
+						this.indicator.hide();
+						this._extended( false );
+					}
+
+					this._updateLayout();
+					this.indexBar1.refresh();
+					this._extended( true );
+				},
+
+				/**
+				 * This method destroys widget.
+				 * @method _destroy
+				 * @protected
+				 * @param {HTMLElement} element
+				 * @return {HTMLElement}
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_destroy: function() {
+					var self = this;
+					if (self.isBound()) {
+						self._unbindEvent();
+						self._extended(false);
+						self._destroySubObjects();
+						self.indicator = null;
+						self.index = null;
+						self.eventHandlers = {};
+					}
+				},
+
+				/**
+				 * This method creates indexBar1 and indicator in the indexScrollbar
+				 * @method _createSubObjects
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_createSubObjects: function() {
+					var self =  this,
+						options = self.options,
+						element = self.element;
+					// indexBar1
+					self.indexBar1 = new IndexBar( document.createElement("UL"), {
+						container: element,
+						offsetLeft: 0,
+						index: options.index,
+						verticalCenter: true,
+						indexHeight: options.indexHeight,
+						maxIndexLen: options.maxIndexLen
+					});
+
+					// indexBar2
+					if (typeof options.supplementaryIndex === "function") {
+						self.indexBar2 = new IndexBar( document.createElement("UL"), {
+							container: element,
+							offsetLeft: -element.clientWidth - options.supplementaryIndexMargin,
+							index: [],	// empty index
+							indexHeight: options.indexHeight,
+							ulClass: "ui-indexscrollbar-supplementary"
+						});
+						self.indexBar2.hide();
+					}
+
+					// indicator
+					self.indicator = new IndexIndicator(document.createElement("DIV"), {
+						container: self._getContainer(),
+						referenceElement: self.element,
+						className: options.indicatorClass
+					});
+
+				},
+
+				/**
+				 * This method destroys sub-elements: index bars and indicator.
+				 * @method _destroySubObjects
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_destroySubObjects: function() {
+					var subObjs = {
+							iBar1: this.indexBar1,
+							iBar2: this.indexBar2,
+							indicator: this.indicator
+						},
+						subObj,
+						el,
+						i;
+					for(i in subObjs) {
+						subObj = subObjs[i];
+						if(subObj) {
+							el = subObj.element;
+							subObj.destroy();
+							el.parentNode.removeChild(el);
+						}
+					}
+				},
+
+				/**
+				 * This method sets initial layout.
+				 * @method _setInitialLayout
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_setInitialLayout: function () {
+					var indexScrollbar = this.element,
+						container = this._getContainer(),
+						containerPosition = window.getComputedStyle(container).position,
+						indexScrollbarStyle = indexScrollbar.style;
+
+					// Set the indexScrollbar's position, if needed
+					if (containerPosition !== "absolute" && containerPosition !== "relative") {
+						indexScrollbarStyle.top = container.offsetTop + "px";
+						indexScrollbarStyle.height = container.offsetHeight + "px";
+					}
+				},
+
+				/**
+				 * This method calculates maximum index length.
+				 * @method _setMaxIndexLen
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_setMaxIndexLen: function(element, value) {
+					var self = this,
+						options = self.options,
+						container = self._getContainer(),
+						containerHeight = container.offsetHeight;
+
+					if (value <= 0) {
+						value = Math.floor( containerHeight / options.indexHeight );
+					}
+					if (value > 0 && value%2 === 0) {
+						value -= 1;	// Ensure odd number
+					}
+					options.maxIndexLen = value;
+				},
+
+				/**
+				 * This method updates layout.
+				 * @method _updateLayout
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_updateLayout: function() {
+					this._setInitialLayout();
+					this._draw();
+
+					this.touchAreaOffsetLeft = this.element.offsetLeft - 10;
+				},
+
+				/**
+				 * This method draws additional sub-elements
+				 * @method _draw
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_draw: function () {
+					this.indexBar1.show();
+					return this;
+				},
+
+				/**
+				 * This method removes indicator.
+				 * @method _removeIndicator
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_removeIndicator: function() {
+					var indicator = this.indicator,
+						parentElem = indicator.element.parentNode;
+
+					parentElem.removeChild(indicator.element);
+					indicator.destroy();
+					this.indicator = null;
+				},
+
+				/**
+				 * This method returns the receiver of event by position.
+				 * @method _getEventReceiverByPosition
+				 * @param {number} posX The position relative to the left edge of the document.
+				 * @return {?ns.widget.wearable.indexscrollbar.IndexBar} Receiver of event
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_getEventReceiverByPosition: function(posX) {
+					var windowWidth = window.innerWidth,
+						elementWidth = this.element.clientWidth,
+						receiver;
+
+					if( this.options.supplementaryIndex ) {
+						if( windowWidth - elementWidth <= posX && posX <= windowWidth) {
+							receiver = this.indexBar1;
+						} else {
+							receiver = this.indexBar2;
+						}
+					} else {
+						receiver = this.indexBar1;
+					}
+					return receiver;
+				},
+
+				/**
+				 * This method updates indicator.
+				 * It sets new value of indicator and triggers event "select".
+				 * @method _updateIndicatorAndTriggerEvent
+				 * @param {number} val The value of indicator
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_updateIndicatorAndTriggerEvent: function(val) {
+					this.indicator.setValue( val );
+					this.indicator.show();
+					if(this.selectEventTriggerTimeoutId) {
+						window.clearTimeout(this.selectEventTriggerTimeoutId);
+					}
+					this.selectEventTriggerTimeoutId = window.setTimeout(function() {
+						this.trigger(EventType.SELECT, {index: val});
+						this.selectEventTriggerTimeoutId = null;
+					}.bind(this), this.options.keepSelectEventDelay);
+				},
+
+				/**
+				 * This method is executed on event "touchstart"
+				 * @method _onTouchStartHandler
+				 * @param {Event} event Event
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_onTouchStartHandler: function(event) {
+					pointerIsPressed = true;
+					var touches = event.touches || event._originalEvent && event._originalEvent.touches;
+					if (touches && (touches.length > 1)) {
+						event.preventDefault();
+						event.stopPropagation();
+						return;
+					}
+					var pos = this._getPositionFromEvent(event),
+					// At touchstart, only indexbar1 is shown.
+						iBar1 = this.indexBar1,
+						idx = iBar1.getIndexByPosition( pos.y ),
+						val = iBar1.getValueByIndex( idx );
+
+					iBar1.select( idx );	// highlight selected value
+
+					document.addEventListener(POINTER_MOVE, this.eventHandlers.touchMove);
+					document.addEventListener(POINTER_END, this.eventHandlers.touchEnd);
+					document.addEventListener("touchcancel", this.eventHandlers.touchEnd);
+
+					this._updateIndicatorAndTriggerEvent( val );
+				},
+
+				/**
+				 * This method is executed on event "touchmove"
+				 * @method _onTouchMoveHandler
+				 * @param {Event} event Event
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_onTouchMoveHandler: function(event) {
+					var touches = event._originalEvent && event._originalEvent.touches;
+					if (touches && (touches.length > 1) || !pointerIsPressed) {
+						events.preventDefault(event);
+						events.stopPropagation(event);
+						return;
+					}
+
+					var pos = this._getPositionFromEvent( event ),
+						iBar1 = this.indexBar1,
+						iBar2 = this.indexBar2,
+						idx,
+						iBar,
+						val;
+
+					// Check event receiver: ibar1 or ibar2
+					iBar = this._getEventReceiverByPosition( pos.x );
+					if( iBar === iBar2 ) {
+						iBar2.options.index = this.options.supplementaryIndex(iBar1.getValueByIndex(iBar1.selectedIndex));
+						iBar2.refresh();
+					}
+
+					// get index and value from ibar1 or ibar2
+					idx = iBar.getIndexByPosition( pos.y );
+					val = iBar.getValueByIndex( idx );
+					if(iBar === iBar2) {
+						// Update val to make a concatenated string for indexIndicator
+						val = iBar1.getValueByIndex(iBar1.selectedIndex) + val;
+					} else if(iBar2 && !iBar2.isShown()) {
+						// iBar1 is selected.
+						// Set iBar2's paddingTop, only when the iBar2 isn't shown
+						iBar2.setPaddingTop(iBar1.getOffsetTopByIndex(iBar1.selectedIndex));
+					}
+
+					// update ibars
+					iBar.select(idx);	// highlight selected value
+					iBar.show();
+					if( iBar1 === iBar && iBar2 ) {
+						iBar2.hide();
+					}
+
+					// update indicator
+					this._updateIndicatorAndTriggerEvent( val );
+
+					events.preventDefault(event);
+					events.stopPropagation(event);
+				},
+
+				/**
+				 * This method is executed on event "touchend"
+				 * @method _onTouchEndHandler
+				 * @param {Event} event Event
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_onTouchEndHandler: function( event ) {
+					var self = this,
+						touches = event._originalEvent && event._originalEvent.touches;
+
+					if (touches && (touches.length === 0) ||
+							!touches) {
+						pointerIsPressed = false;
+					}
+					self.indicator.hide();
+					self.indexBar1.clearSelected();
+					if(self.indexBar2) {
+						self.indexBar2.clearSelected();
+						self.indexBar2.hide();
+					}
+
+					document.removeEventListener(POINTER_MOVE, self.eventHandlers.touchMove);
+					document.removeEventListener(POINTER_END, self.eventHandlers.touchEnd);
+					document.removeEventListener("touchcancel", self.eventHandlers.touchEnd);
+				},
+
+				/**
+				 * This method binds events to widget.
+				 * @method _bindEvents
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_bindEvents: function() {
+					this._bindResizeEvent();
+					this._bindEventToTriggerSelectEvent();
+				},
+
+				/**
+				 * This method unbinds events to widget.
+				 * @method _unbindEvent
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_unbindEvent: function() {
+					this._unbindResizeEvent();
+					this._unbindEventToTriggerSelectEvent();
+				},
+
+				/**
+				 * This method binds event "resize".
+				 * @method _bindResizeEvent
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_bindResizeEvent: function() {
+					this.eventHandlers.onresize = function(/* ev */) {
+						this.refresh();
+					}.bind(this);
+
+					window.addEventListener( "resize", this.eventHandlers.onresize );
+				},
+
+				/**
+				 * This method unbinds event "resize".
+				 * @method _bindResizeEvent
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_unbindResizeEvent: function() {
+					if ( this.eventHandlers.onresize ) {
+						window.removeEventListener( "resize", this.eventHandlers.onresize );
+					}
+				},
+
+				/**
+				 * This method binds touch events.
+				 * @method _bindEventToTriggerSelectEvent
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_bindEventToTriggerSelectEvent: function() {
+					var self = this;
+					self.eventHandlers.touchStart = self._onTouchStartHandler.bind(self);
+					self.eventHandlers.touchEnd = self._onTouchEndHandler.bind(self);
+					self.eventHandlers.touchMove = self._onTouchMoveHandler.bind(self);
+
+					self.element.addEventListener(POINTER_START, self.eventHandlers.touchStart);
+				},
+
+				/**
+				 * This method unbinds touch events.
+				 * @method _unbindEventToTriggerSelectEvent
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_unbindEventToTriggerSelectEvent: function() {
+					var self = this;
+					self.element.removeEventListener(POINTER_START, self.eventHandlers.touchStart);
+				},
+
+				/**
+				 * This method sets or gets data from widget.
+				 * @method _data
+				 * @param {string|Object} key
+				 * @param {*} val
+				 * @return {*} Return value of data or widget's object
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_data: function (key, val) {
+					var el = this.element,
+						d = el.__data,
+						idx;
+					if(!d) {
+						d = el.__data = {};
+					}
+					if(typeof key === "object") {
+						// Support data collection
+						for(idx in key) {
+							this._data(idx, key[idx]);
+						}
+						return this;
+					} else {
+						if("undefined" === typeof val) {	// Getter
+							return d[key];
+						} else {	// Setter
+							d[key] = val;
+							return this;
+						}
+					}
+				},
+
+				/**
+				 * This method checks if element is valid element of widget IndexScrollbar.
+				 * @method _isValidElement
+				 * @param {HTMLElement} el
+				 * @return {boolean} True, if element is valid.
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_isValidElement: function (el) {
+					return el.classList.contains(this.widgetClass);
+				},
+
+				/**
+				 * This method checks if widget is extended.
+				 * @method _isExtended
+				 * @return {boolean} True, if element is extended.
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_isExtended: function () {
+					return !!this._data("extended");
+				},
+
+				/**
+				 * This method sets value of "extended" to widget.
+				 * @method _extended
+				 * @param {boolean} flag Value for extended
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_extended: function (flag) {
+					this._data("extended", flag);
+					return this;
+				},
+
+				/**
+				 * This method gets indices prepared from parameter
+				 * or index of widget.
+				 * @method _getIndex
+				 * @param {string} [value] Indices to prepared
+				 * @return {Array} Indices
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_setIndex: function (element, value) {
+					var options = this.options;
+					if (typeof value === "string") {
+						value = value.split(options.delimiter);	// delimiter
+					}
+					options.index = value;
+				},
+
+				/**
+				 * This method gets offset of element.
+				 * @method _getOffset
+				 * @param {HTMLElement} el Element
+				 * @return {Object} Offset with "top" and "left" properties
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_getOffset: function( el ) {
+					var left=0, top=0 ;
+					do {
+						top += el.offsetTop;
+						left += el.offsetLeft;
+						el = el.offsetParent;
+					} while (el);
+
+					return {
+						top: top,
+						left: left
+					};
+				},
+
+				/**
+				 * This method returns container of widget.
+				 * @method _getContainer
+				 * @return {HTMLElement} Container
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_getContainer: function() {
+					var container = this.options.container,
+						element = this.element,
+						parentElement = element.parentNode,
+						overflow;
+
+					if (!container) {
+						while (parentElement != document.body) {
+							overflow = doms.getCSSProperty(parentElement, "overflow-y");
+							if (overflow === "scroll" || (overflow === "auto" && parentElement.scrollHeight > parentElement.clientHeight)) {
+								return parentElement;
+							}
+							parentElement = parentElement.parentNode;
+						}
+						container = element.parentNode;
+					}
+
+					return container;
+				},
+
+				/**
+				 * Returns position of event.
+				 * @method _getPositionFromEvent
+				 * @return {Object} Position of event with properties "x" and "y"
+				 * @protected
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				_getPositionFromEvent: function( ev ) {
+					return ev.type.search(/^touch/) !== -1 ?
+					{x: ev.touches[0].clientX, y: ev.touches[0].clientY} :
+					{x: ev.clientX, y: ev.clientY};
+				},
+
+				/**
+				 * Adds event listener to element of widget.
+				 * @method addEventListener
+				 * @param {string} type Name of event
+				 * @param {Function} listener Function to be executed
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				addEventListener: function (type, listener) {
+					this.element.addEventListener(type, listener);
+				},
+
+				/**
+				 * Removes event listener from element of widget.
+				 * @method removeEventListener
+				 * @param {string} type Name of event
+				 * @param {Function} listener Function to be removed
+				 * @member ns.widget.wearable.IndexScrollbar
+				 */
+				removeEventListener: function (type, listener) {
+					this.element.removeEventListener(type, listener);
+				}
+
+			});
+
+			// definition
+			ns.widget.wearable.IndexScrollbar = IndexScrollbar;
+			engine.defineWidget(
+				"IndexScrollbar",
+				".ui-indexscrollbar",
+				[],
+				IndexScrollbar,
+				"wearable"
+			);
+			}(window.document, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true */
+/**
+ * # Progress Widget
+ * Shows a control that indicates the progress percentage of an on-going operation.
+ *
+ * The progress widget shows a control that indicates the progress percentage of an on-going operation. This widget can be scaled to fit inside a parent container.
+ *
+ * ## Default selectors
+ *
+ * This widget provide three style progress.
+ *
+ * ### Simple progress bar
+ * If you don't implement any class, you can show default progress style
+ * To add a progress widget to the application, use the following code:
+ *
+ *      @example
+ *      <progress max="100" value="90"></progress>
+ *
+ * ### Infinite progress bar
+ * If you implement class (*ui-progress-indeterminate*), you can show image looks like infinite move.
+ *
+ * To add a progress widget to the application, use the following code:
+ *      @example
+ *      <progress class="ui-progress-indeterminate" max="100" value="100"></progress>
+ *
+ * ### Progress bar with additional information
+ * If you implement div tag that can choose two classes (*ui-progress-proportion* or *ui-progress-ratio*) at progress tag same level, you can show two information (proportion information is located left below and ratio information is located right below)
+ *
+ * To add a progress widget to the application, use the following code:
+ *
+ *      @example
+ *      <progress max="100" value="50"></progress>
+ *      <div class="ui-progress-proportion">00/20</div>
+ *      <div class="ui-progress-ratio">50%</div>
+ *
+ * ## JavaScript API
+ *
+ * Progress widget hasn't JavaScript API.
+ *
+ * @class ns.widget.wearable.Progress
+ * @extends ns.widget.BaseWidget
+ */
+(function (document, ns) {
+	
+				var BaseWidget = ns.widget.BaseWidget,
+				engine = ns.engine,
+
+				Progress = function () {
+					return this;
+				},
+				prototype = new BaseWidget();
+
+			Progress.events = {};
+
+			/**
+			 * Build Progress
+			 * @method _build
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @protected
+			 * @member ns.widget.wearable.Progress
+			 */
+			prototype._build = function (element) {
+				return element;
+			};
+
+			prototype._init = function (element) {
+				return element;
+			};
+
+			prototype._bindEvents = function (element) {
+				return element;
+			};
+
+			/**
+			 * Refresh structure
+			 * @method _refresh
+			 * @protected
+			 * @member ns.widget.wearable.Progress
+			 */
+			prototype._refresh = function () {
+				return null;
+			};
+
+			/**
+			 * Destroy widget
+			 * @method _destroy
+			 * @protected
+			 * @member ns.widget.wearable.Progress
+			 */
+			prototype._destroy = function () {
+				return null;
+			};
+
+			Progress.prototype = prototype;
+			ns.widget.wearable.Progress = Progress;
+
+			engine.defineWidget(
+				"Progress",
+				"progress",
+				[],
+				Progress,
+				"wearable"
+			);
+			}(window.document, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true */
+/**
+ * # Processing Widget
+ * Shows that an operation is in progress.
+ *
+ * The processing widget shows that an operation is in progress.
+ *
+ * ## Default selectors
+ *
+ * To add a processing widget to the application, use the following code:
+ *
+ *      @example
+ *      <div class="ui-processing"></div>
+ *      <div class="ui-processing-text">
+ *          Description about progress
+ *      </div>
+ *
+ * ## JavaScript API
+ *
+ * Processing widget hasn't JavaScript API.
+ *
+ * @class ns.widget.wearable.Progressing
+ * @extends ns.widget.BaseWidget
+ */
+(function (document, ns) {
+	
+				var BaseWidget = ns.widget.BaseWidget,
+				engine = ns.engine,
+				Progressing = function () {
+					return this;
+				},
+				prototype = new BaseWidget();
+
+			Progressing.events = {};
+
+			/**
+			 * Build Progressing
+			 * @method _build
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @protected
+			 * @member ns.widget.wearable.Progressing
+			 */
+			prototype._build = function (element) {
+				return element;
+			};
+
+			prototype._init = function (element) {
+				return element;
+			};
+
+			prototype._bindEvents = function (element) {
+				return element;
+			};
+
+			/**
+			 * Refresh structure
+			 * @method _refresh
+			 * @protected
+			 * @member ns.widget.wearable.Progressing
+			 */
+			prototype._refresh = function () {
+				return null;
+			};
+
+			/**
+			 * Destroy widget
+			 * @method _destroy
+			 * @protected
+			 * @member ns.widget.wearable.Progressing
+			 */
+			prototype._destroy = function () {
+				return null;
+			};
+
+			Progressing.prototype = prototype;
+			ns.widget.wearable.Progressing = Progressing;
+
+			engine.defineWidget(
+				"Progressing",
+				".ui-progress",
+				[],
+				Progressing,
+				"wearable"
+			);
+			}(window.document, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true */
+/**
+ * # Toggle Switch Widget
+ * Shows a 2-state switch.
+ *
+ * The toggle switch widget shows a 2-state switch on the screen.
+ *
+ * ## Default selectors
+ *
+ * To add a toggle switch widget to the application, use the following code:
+ *
+ *      @example
+ *      <div class="ui-switch">
+ *          <div class="ui-switch-text">
+ *              Toggle Switch
+ *          </div>
+ *          <label class="ui-toggleswitch">
+ *              <input type="checkbox" class="ui-switch-input">
+ *              <div class="ui-switch-activation">
+ *                   <div class="ui-switch-inneroffset">
+ *                       <div class="ui-switch-handler"></div>
+ *                   </div>
+ *              </div>
+ *           </label>
+ *      </div>
+ *
+ * ## JavaScript API
+ *
+ * ToggleSwitch widget hasn't JavaScript API.
+ *
+ * @class ns.widget.wearable.ToggleSwitch
+ * @extends ns.widget.BaseWidget
+ */
+(function (document, ns) {
+	
+				var BaseWidget = ns.widget.BaseWidget,
+				engine = ns.engine,
+
+				ToggleSwitch = function () {
+					/**
+					 * Options for widget
+					 * @property {Object} options
+					 * @property {?string} [options.text=null] Shown text
+					 * @member ns.widget.wearable.ToggleSwitch
+					 */
+					this.options = {
+						text: null
+					};
+				},
+				events = {},
+				classesPrefix = "ui-switch",
+				classes = {
+					handler: classesPrefix + "-handler",
+					inneroffset: classesPrefix + "-inneroffset",
+					activation: classesPrefix + "-activation",
+					input: classesPrefix + "-input",
+					text: classesPrefix + "-text"
+				},
+				prototype = new BaseWidget();
+
+			function getClass(name) {
+				return classes[name];
+			}
+
+			function addClass(element, classId) {
+				element.classList.add(getClass(classId));
+			}
+
+			function createElement(name) {
+				return document.createElement(name);
+			}
+
+			/**
+			 * Dictionary for ToggleSwitch related events.
+			 * For ToggleSwitch, it is an empty object.
+			 * @property {Object} events
+			 * @member ns.widget.wearable.ToggleSwitch
+			 * @static
+			 */
+			ToggleSwitch.events = events;
+
+			/**
+			 * Dictionary for ToggleSwitch related css class names
+			 * @property {Object} classes
+			 * @member ns.widget.wearable.ToggleSwitch
+			 * @static
+			 * @readonly
+			 */
+			ToggleSwitch.classes = classes;
+
+			/**
+			 * Build ToggleSwitch
+			 * @method _build
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @protected
+			 * @member ns.widget.wearable.ToggleSwitch
+			 */
+			prototype._build = function (element) {
+				var options = this.options,
+					text = options.text,
+					divText,
+					label = createElement("label"),
+					input = createElement("input"),
+					divActivation = createElement("div"),
+					divInneroffset = createElement("div"),
+					divHandler = createElement("div");
+
+				if (text) {
+					divText = createElement("div");
+					addClass(divText, "text");
+					divText.innerHTML = text;
+					element.appendChild(divText);
+				}
+				addClass(divHandler, "handler");
+				divInneroffset.appendChild(divHandler);
+				addClass(divInneroffset, "inneroffset");
+				divActivation.appendChild(divInneroffset);
+				addClass(divActivation, "activation");
+				label.classList.add("ui-toggleswitch");
+				input.type = "checkbox";
+				addClass(input, "input");
+				label.appendChild(input);
+				label.appendChild(divActivation);
+				element.appendChild(label);
+				return element;
+			};
+
+			ToggleSwitch.prototype = prototype;
+			ns.widget.wearable.ToggleSwitch = ToggleSwitch;
+
+			engine.defineWidget(
+				"ToggleSwitch",
+				".ui-switch",
+				[],
+				ToggleSwitch,
+				"wearable"
+			);
+			}(window.document, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true, white: true, plusplus: true*/
+/**
+ *#Virtual ListView Widget
+ * Shows a list view for large amounts of data.
+ *
+ * In the Web environment, it is challenging to display a large amount of data in a list, such as
+ * displaying a contact list of over 1000 list items. It takes time to display the entire list in
+ * HTML and the DOM manipulation is complex.
+ *
+ * The virtual list widget is used to display a list of unlimited data elements on the screen
+ * for better performance. This widget provides easy access to databases to retrieve and display data.
+ * It based on **result set** which is fixed size defined by developer by data-row attribute. Result
+ * set should be **at least 3 times bigger** then size of clip (number of visible elements).
+ *
+ * To add a virtual list widget to the application follow these steps:
+ *
+ * ##Create widget container - list element
+ *
+
+   &lt;ul id=&quot;vlist&quot; class=&quot;ui-listview ui-virtuallistview&quot;&gt;&lt;/ul&gt;
+
+ *
+ * ##Initialize widget
+ *
+	// Get HTML Element reference
+	var elList = document.getElementById("vlist"),
+		// Set up config. All config options can be found in virtual list reference
+		vListConfig = {
+		dataLength: 2000,
+		bufferSize: 40,
+		listItemUpdater: function(elListItem, newIndex){
+			// NOTE: JSON_DATA is global object with all data rows.
+			var data = JSON_DATA["newIndex"];
+			elListItem.innerHTML = '<span class="ui-li-text-main">' +
+												data.NAME + '</span>';
+			}
+		};
+	vlist = tau.widget.VirtualListview(elList, vListConfig);
+ *
+ * More config options can be found in {@link ns.widget.wearable.VirtualListview#options}
+ *
+ * ##Set list item update function
+ *
+ * List item update function is responsible to update list element depending on data row index. If you didn’t
+ * pass list item update function by config option, you have to do it using following method.
+ * Otherwise you will see an empty list.
+ *
+ *
+	vlist.setListItemUpdater(function(elListItem, newIndex){
+		// NOTE: JSON_DATA is global object with all data rows.
+		var data = JSON_DATA["newIndex"];
+		elListItem.innerHTML = '<span class="ui-li-text-main">' +
+									data.NAME + '</span>';
+	});
+ *
+ * **Attention:** Virtual List manipulates DOM elements to be more efficient. It doesn’t remove or create list
+ * elements before calling list item update function. It means that, you have to take care about list element
+ * and keep it clean from custom classes an attributes, because order of li elements is volatile.
+ *
+ * ##Draw child elements
+ * If all configuration options are set, call draw method to draw child elements and make virtual list work.
+ *
+	vlist.draw();
+ *
+ * ##Destroy Virtual List
+ * It’s highly recommended to destroy widgets, when they aren’t necessary. To destroy Virtual List call destroy method.
+ *
+	vlist.destroy();
+ *
+ * ##Full working code
+ *
+	var page = document.getElementById("pageTestVirtualList"),
+		vlist,
+		// Assing data.
+		JSON_DATA = [
+			{NAME:"Abdelnaby, Alaa", ACTIVE:"1990 - 1994", FROM:"College - Duke", TEAM_LOGO:"../test/1_raw.jpg"},
+			{NAME:"Abdul-Aziz, Zaid", ACTIVE:"1968 - 1977", FROM:"College - Iowa State", TEAM_LOGO:"../test/2_raw.jpg"}
+			// A lot of records.
+			// These database can be found in Gear Sample Application Winset included to Tizen SDK
+			];
+
+		page.addEventListener("pageshow", function() {
+			var elList = document.getElementById("vlist");
+
+			vlist = tau.widget.VirtualListview(elList, {
+					dataLength: JSON_DATA.length,
+					bufferSize: 40
+			});
+
+			// Set list item updater
+			vlist.setListItemUpdater(function(elListItem, newIndex) {
+				//TODO: Update listitem here
+				var data =  JSON_DATA[newIndex];
+				elListItem.innerHTML = '<span class="ui-li-text-main">' +
+											data.NAME + '</span>';
+			});
+			// Draw child elements
+			vlist.draw();
+		});
+		page.addEventListener("pagehide", function() {
+			// Remove all children in the vlist
+			vlist.destroy();
+		});
+ *
+ * @class ns.widget.wearable.VirtualListview
+ * @since 2.2
+ * @extends ns.widget.BaseWidget
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Piotr Karny <p.karny@samsung.com>
+ * @author Michał Szepielak <m.szepielak@samsung.com>
+ * @author Tomasz Lukawski <t.lukawski@samsung.com>
+ */
+(function(document, ns) {
+	
+					var BaseWidget = ns.widget.BaseWidget,
+						/**
+						 * Alias for class {@link ns.engine}
+						 * @property {Object} engine
+						 * @private
+						 * @static
+						 * @member ns.widget.wearable.VirtualListview
+						 */
+						engine = ns.engine,
+						// Constants definition
+						/**
+						 * Defines index of scroll `{@link ns.widget.wearable.VirtualListview#_scroll}.direction`
+						 * @property {number} SCROLL_UP
+						 * to retrive if user is scrolling up
+						 * @private
+						 * @static
+						 * @member ns.widget.wearable.VirtualListview
+						 */
+						SCROLL_UP = 0,
+						/**
+						 * Defines index of scroll `{@link ns.widget.wearable.VirtualListview#_scroll}.direction`
+						 * @property {number} SCROLL_RIGHT
+						 * to retrive if user is scrolling right
+						 * @private
+						 * @static
+						 * @member ns.widget.wearable.VirtualListview
+						 */
+						SCROLL_RIGHT = 1,
+						/**
+						 * Defines index of scroll {@link ns.widget.wearable.VirtualListview#_scroll}
+						 * @property {number} SCROLL_DOWN
+						 * to retrive if user is scrolling down
+						 * @private
+						 * @static
+						 * @member ns.widget.wearable.VirtualListview
+						 */
+						SCROLL_DOWN = 2,
+						/**
+						 * Defines index of scroll {@link ns.widget.wearable.VirtualListview#_scroll}
+						 * @property {number} SCROLL_LEFT
+						 * to retrive if user is scrolling left
+						 * @private
+						 * @static
+						 * @member ns.widget.wearable.VirtualListview
+						 */
+						SCROLL_LEFT = 3,
+						/**
+						 * Defines vertical scrolling orientation. It's default orientation.
+						 * @property {string} VERTICAL
+						 * @private
+						 * @static
+						 */
+						VERTICAL = "y",
+						/**
+						 * Defines horizontal scrolling orientation.
+						 * @property {string} HORIZONTAL
+						 * @private
+						 * @static
+						 */
+						HORIZONTAL = "x",
+						/**
+						 * Determines that scroll event should not be taken into account if scroll event accurs.
+						 * @property {boolean} blockEvent
+						 * @private
+						 * @static
+						 */
+						blockEvent = false,
+						/**
+						 * Handle window timeout ID.
+						 * @property {number} timeoutHandler
+						 * @private
+						 * @static
+						 */
+						timeoutHandler,
+						/**
+						 * Reference to original target object from touch event.
+						 * @property {Object} origTarget
+						 * @private
+						 * @static
+						 */
+						origTarget,
+						/**
+						 * Number of miliseconds to determine if tap event occured.
+						 * @property {number} tapholdThreshold
+						 * @private
+						 * @static
+						 */
+						tapholdThreshold = 250,
+						/**
+						 * Handler for touch event listener to examine tap occurance.
+						 * @property {Object} tapHandlerBound
+						 * @private
+						 * @static
+						 */
+						tapHandlerBound = null,
+						/**
+						 * Stores last touch position to examine tap occurance.
+						 * @property {Object} lastTouchPos
+						 * @private
+						 * @static
+						 */
+						lastTouchPos =	{},
+
+						/**
+						 * Local constructor function
+						 * @method VirtualListview
+						 * @private
+						 * @member ns.widget.wearable.VirtualListview
+						 */
+						VirtualListview = function() {
+							var self = this;
+							/**
+							 * VirtualListview widget's properties associated with
+							 * @property {Object} ui
+							 * User Interface
+							 * @property {?HTMLElement} [ui.scrollview=null] Scroll element
+							 * @property {?HTMLElement} [ui.spacer=null] HTML element which makes scrollbar proper size
+							 * @property {number} [ui.itemSize=0] Size of list element in pixels. If scrolling is
+							 * vertically it's item width in other case it"s height of item element
+							 * @member ns.widget.wearable.VirtualListview
+							 */
+							self.ui = {
+								scrollview: null,
+								spacer: null,
+								itemSize: 0
+							};
+
+							/**
+							 * Holds information about scrolling state
+							 * @property {Object} _scroll
+							 * @property {Array} [_scroll.direction=[0,0,0,0]] Holds current direction of scrolling.
+							 * Indexes suit to following order: [up, left, down, right]
+							 * @property {number} [_scroll.lastPositionX=0] Last scroll position from top in pixels.
+							 * @property {number} [_scroll.lastPositionY=0] Last scroll position from left in pixels.
+							 * @property {number} [_scroll.lastJumpX=0] Difference between last and current
+							 * position of horizontal scroll.
+							 * @property {number} [_scroll.lastJumpY=0] Difference between last and current
+							 * position of vertical scroll.
+							 * @property {number} [_scroll.clipWidth=0] Width of clip - visible area for user.
+							 * @property {number} [_scroll.clipHeight=0] Height of clip - visible area for user.
+							 * @member ns.widget.wearable.VirtualListview
+							 */
+							self._scroll = {
+								direction: [0, 0, 0, 0],
+								lastPositionX: 0,
+								lastPositionY: 0,
+								lastJumpX: 0,
+								lastJumpY: 0,
+								clipWidth: 0,
+								clipHeight: 0
+							};
+
+							/**
+							 * Name of widget
+							 * @property {string} name
+							 * @member ns.widget.wearable.VirtualListview
+							 * @static
+							 */
+							self.name = "VirtualListview";
+
+							/**
+							 * Current zero-based index of data set.
+							 * @property {number} _currentIndex
+							 * @member ns.widget.wearable.VirtualListview
+							 * @protected
+							 */
+							self._currentIndex = 0;
+
+							/**
+							 * VirtualListview widget options.
+							 * @property {Object} options
+							 * @property {number} [options.bufferSize=100] Number of items of result set. The default value is 100.
+							 * As the value gets higher, the loading time increases while the system performance
+							 * improves. So you need to pick a value that provides the best performance
+							 * without excessive loading time. It's recomended to set bufferSize at least 3 times bigger than number
+							 * of visible elements.
+							 * @property {number} [options.dataLength=0] Total number of items.
+							 * @property {string} [options.orientation="y"] Scrolling orientation. Default vertical scrolling enabled.
+							 * @property {Object} options.listItemUpdater Holds reference to method which modifies list item, depended
+							 * at specified index from database. **Method should be overridden by developer using
+							 * {@link ns.widget.wearable.VirtualListview#setListItemUpdater} method.** or defined as a config
+							 * object. Method takes two parameters:
+							 *  -  element {HTMLElement} List item to be modified
+							 *  -  index {number} Index of data set
+							 * @member ns.widget.wearable.VirtualListview
+							 */
+							self.options = {
+								bufferSize: 100,
+								dataLength: 0,
+								orientation: VERTICAL,
+								listItemUpdater: null
+							};
+
+							/**
+							 * Binding for scroll event listener.
+							 * @method _scrollEventBound
+							 * @member ns.widget.wearable.VirtualListview
+							 * @protected
+							 */
+							self._scrollEventBound = null;
+							/**
+							 * Binding for touch start event listener.
+							 * @method _touchStartEventBound
+							 * @member ns.widget.wearable.VirtualListview
+							 * @protected
+							 */
+							self._touchStartEventBound = null;
+
+							return self;
+						},
+						POINTER_START = 'vmousedown',
+						POINTER_MOVE = 'vmousemove',
+						POINTER_END = 'vmouseup',
+
+						// Cached prototype for better minification
+						prototype = new BaseWidget();
+
+				/**
+				 * Dictionary object containing commonly used wiget classes
+				 * @property {Object} classes
+				 * @static
+				 * @readonly
+				 * @member ns.widget.wearable.VirtualListview
+				 */
+				VirtualListview.classes = {
+					uiVirtualListContainer: "ui-virtual-list-container",
+					uiListviewActive: "ui-listview-active"
+				};
+
+				/**
+				 * Remove highlight from items.
+				 * @method _removeHighlight
+				 * @param {ns.widget.wearable.VirtualListview} self Reference to VirtualListview object.
+				 * @member ns.widget.wearable.VirtualListview
+				 * @private
+				 * @static
+				 */
+				function _removeHighlight (self) {
+					var children = self.element.children,
+						i = children.length;
+					while (--i >= 0) {
+						children[i].classList.remove(VirtualListview.classes.uiListviewActive);
+					}
+				}
+
+				/**
+				 * Checks if tap meet the condition.
+				 * @method _tapHandler
+				 * @param {ns.widget.wearable.VirtualListview} self Reference to VirtualListview object.
+				 * @param {Event} event Received Touch event
+				 * @member ns.widget.wearable.VirtualListview
+				 * @private
+				 * @static
+				 */
+				function _tapHandler (self, event) {
+					var changedTouches = event.changedTouches ||
+							(event._originalEvent &&
+								event._originalEvent.changedTouches),
+						eventTouch = (changedTouches && changedTouches.length) ?
+							changedTouches[0] :
+								event;
+
+					if (event.type === POINTER_MOVE) {
+						if (Math.abs(lastTouchPos.clientX - eventTouch.clientX) > 10 && Math.abs(lastTouchPos.clientY - eventTouch.clientY) > 10) {
+							_removeHighlight(self);
+							window.clearTimeout(timeoutHandler);
+						}
+					} else {
+						_removeHighlight(self);
+						window.clearTimeout(timeoutHandler);
+					}
+
+				}
+
+				/**
+				 * Adds highlight
+				 * @method tapholdListener
+				 * @param {ns.widget.wearable.VirtualListview} self Reference to VirtualListview object.
+				 * @member ns.widget.wearable.VirtualListview
+				 * @private
+				 * @static
+				 */
+				function tapholdListener(self) {
+					var liElement;
+
+					liElement = origTarget.tagName === "LI" ? origTarget : origTarget.parentNode;
+
+					origTarget.removeEventListener(POINTER_MOVE, tapHandlerBound, false);
+					origTarget.removeEventListener(POINTER_END, tapHandlerBound, false);
+					tapHandlerBound = null;
+
+					_removeHighlight(self);
+					liElement.classList.add(VirtualListview.classes.uiListviewActive);
+					lastTouchPos = {};
+				}
+
+				/**
+				 * Binds touching events to examine tap event.
+				 * @method _touchStartHandler
+				 * @param {ns.widget.wearable.VirtualListview} self Reference to VirtualListview object.
+				 * @member ns.widget.wearable.VirtualListview
+				 * @private
+				 * @static
+				 */
+				function _touchStartHandler (self, event) {
+					var eventData;
+
+					origTarget = event.target;
+
+					// Clean up
+					window.clearTimeout(timeoutHandler);
+					origTarget.removeEventListener(POINTER_MOVE, tapHandlerBound, false);
+					origTarget.removeEventListener(POINTER_END, tapHandlerBound, false);
+
+					timeoutHandler = window.setTimeout(tapholdListener.bind(null, self), tapholdThreshold);
+					eventData = (event.touches && event.touches.length) ? event.touches[0] : event;
+					lastTouchPos.clientX = eventData.clientX;
+					lastTouchPos.clientY = eventData.clientY;
+
+					//Add touch listeners
+					tapHandlerBound = _tapHandler.bind(null, self);
+					origTarget.addEventListener(POINTER_MOVE, tapHandlerBound, false);
+					origTarget.addEventListener(POINTER_END, tapHandlerBound, false);
+
+				}
+
+
+				/**
+				 * Updates scroll information about position, direction and jump size.
+				 * @method _updateScrollInfo
+				 * @param {ns.widget.wearable.VirtualListview} self VirtualListview widget reference
+				 * @member ns.widget.wearable.VirtualListview
+				 * @private
+				 * @static
+				 */
+				function _updateScrollInfo(self) {
+					var scrollInfo = self._scroll,
+						scrollDirection = scrollInfo.direction,
+						scrollViewElement = self.ui.scrollview,
+						scrollLastPositionX = scrollInfo.lastPositionX,
+						scrollLastPositionY = scrollInfo.lastPositionY,
+						scrollviewPosX = scrollViewElement.scrollLeft,
+						scrollviewPosY = scrollViewElement.scrollTop;
+
+					self._refreshScrollbar();
+					//Reset scroll matrix
+					scrollDirection = [0, 0, 0, 0];
+
+					//Scrolling UP
+					if (scrollviewPosY < scrollLastPositionY) {
+						scrollDirection[SCROLL_UP] = 1;
+					}
+
+					//Scrolling RIGHT
+					if (scrollviewPosX < scrollLastPositionX) {
+						scrollDirection[SCROLL_RIGHT] = 1;
+					}
+
+					//Scrolling DOWN
+					if (scrollviewPosY > scrollLastPositionY) {
+						scrollDirection[SCROLL_DOWN] = 1;
+					}
+
+					//Scrolling LEFT
+					if (scrollviewPosX > scrollLastPositionX) {
+						scrollDirection[SCROLL_LEFT] = 1;
+					}
+
+					scrollInfo.lastJumpY = Math.abs(scrollviewPosY - scrollLastPositionY);
+					scrollInfo.lastJumpX = Math.abs(scrollviewPosX - scrollLastPositionX);
+					scrollInfo.lastPositionX = scrollviewPosX;
+					scrollInfo.lastPositionY = scrollviewPosY;
+					scrollInfo.direction = scrollDirection;
+					scrollInfo.clipHeight = scrollViewElement.clientHeight;
+					scrollInfo.clipWidth = scrollViewElement.clientWidth;
+				}
+
+				/**
+				 * Computes list element size according to scrolling orientation
+				 * @method _computeElementSize
+				 * @param {HTMLElement} element Element whose size should be computed
+				 * @param {string} orientation Scrolling orientation
+				 * @return {number} Size of element in pixels
+				 * @member ns.widget.wearable.VirtualListview
+				 * @private
+				 * @static
+				 */
+				function _computeElementSize(element, orientation) {
+					// @TODO change to util method if it will work perfectly
+					return parseInt(orientation === VERTICAL ? element.clientHeight : element.clientWidth, 10) + 1;
+				}
+
+				/**
+				 * Scrolls and manipulates DOM element to destination index. Element at destination
+				 * index is the first visible element on the screen. Destination index can
+				 * be different from Virtual List's current index, because current index points
+				 * to first element in the buffer.
+				 * @member ns.widget.wearable.VirtualListview
+				 * @param {ns.widget.wearable.VirtualListview} self VirtualListview widget reference
+				 * @param {number} toIndex Destination index.
+				 * @method _orderElementsByIndex
+				 * @private
+				 * @static
+				 */
+				function _orderElementsByIndex(self, toIndex) {
+					var element = self.element,
+						options = self.options,
+						scrollInfo = self._scroll,
+						scrollClipSize = 0,
+						dataLength = options.dataLength,
+						indexCorrection = 0,
+						bufferedElements = 0,
+						avgListItemSize = 0,
+						bufferSize = options.bufferSize,
+						i,
+						offset = 0,
+						index,
+						isLastBuffer = false;
+
+					//Get size of scroll clip depended on scroll direction
+					scrollClipSize = options.orientation === VERTICAL ? scrollInfo.clipHeight : scrollInfo.clipWidth;
+
+					//Compute average list item size
+					avgListItemSize = _computeElementSize(element, options.orientation) / bufferSize;
+
+					//Compute average number of elements in each buffer (before and after clip)
+					bufferedElements = Math.floor((bufferSize - Math.floor(scrollClipSize / avgListItemSize)) / 2);
+
+					if (toIndex - bufferedElements <= 0) {
+						index = 0;
+						indexCorrection = 0;
+					} else {
+						index = toIndex - bufferedElements;
+					}
+
+					if (index + bufferSize >= dataLength) {
+						index = dataLength - bufferSize;
+						isLastBuffer = true;
+					}
+					indexCorrection = toIndex - index;
+
+					self._loadData(index);
+					blockEvent = true;
+					offset = index * avgListItemSize;
+					if (options.orientation === VERTICAL) {
+						if (isLastBuffer) {
+							offset = self.ui.spacer.clientHeight;
+						}
+						element.style.top = offset + "px";
+					} else {
+						if (isLastBuffer) {
+							offset = self.ui.spacer.clientWidth;
+						}
+						element.style.left = offset + "px";
+					}
+
+					for (i = 0; i < indexCorrection; i += 1) {
+						offset += _computeElementSize(element.children[i], options.orientation);
+					}
+
+					if (options.orientation === VERTICAL) {
+						self.ui.scrollview.scrollTop = offset;
+					} else {
+						self.ui.scrollview.scrollLeft = offset;
+					}
+					blockEvent = false;
+					self._currentIndex = index;
+				}
+
+				/**
+				 * Orders elements. Controls resultset visibility and does DOM manipulation. This
+				 * method is used during normal scrolling.
+				 * @method _orderElements
+				 * @param {ns.widget.wearable.VirtualListview} self VirtualListview widget reference
+				 * @member ns.widget.wearable.VirtualListview
+				 * @private
+				 * @static
+				 */
+				function _orderElements(self) {
+					var element = self.element,
+						scrollInfo = self._scroll,
+						options = self.options,
+						elementStyle = element.style,
+						//Current index of data, first element of resultset
+						currentIndex = self._currentIndex,
+						//Number of items in resultset
+						bufferSize = parseInt(options.bufferSize, 10),
+						//Total number of items
+						dataLength = options.dataLength,
+						//Array of scroll direction
+						scrollDirection = scrollInfo.direction,
+						scrollClipWidth = scrollInfo.clipWidth,
+						scrollClipHeight = scrollInfo.clipHeight,
+						scrollLastPositionY = scrollInfo.lastPositionY,
+						scrollLastPositionX = scrollInfo.lastPositionX,
+						elementPositionTop = parseInt(elementStyle.top, 10) || 0,
+						elementPositionLeft = parseInt(elementStyle.left, 10) || 0,
+						elementsToLoad = 0,
+						bufferToLoad = 0,
+						elementsLeftToLoad = 0,
+						temporaryElement = null,
+						avgListItemSize = 0,
+						resultsetSize = 0,
+						childrenNodes,
+						i = 0,
+						jump = 0,
+						hiddenPart = 0,
+						direction,
+						newPosition;
+
+					childrenNodes = element.children;
+					for (i = childrenNodes.length - 1; i > 0; i -= 1) {
+						if (options.orientation === VERTICAL) {
+							resultsetSize += childrenNodes[i].clientHeight;
+						} else {
+							resultsetSize += childrenNodes[i].clientWidth;
+						}
+					}
+
+					//Compute average list item size
+					avgListItemSize = _computeElementSize(element, options.orientation) / bufferSize;
+
+					//Compute hidden part of result set and number of elements, that needed to be loaded, while user is scrolling DOWN
+					if (scrollDirection[SCROLL_DOWN]) {
+						hiddenPart = scrollLastPositionY - elementPositionTop;
+						elementsLeftToLoad = dataLength - currentIndex - bufferSize;
+					}
+
+					//Compute hidden part of result set and number of elements, that needed to be loaded, while user is scrolling UP
+					if (scrollDirection[SCROLL_UP]) {
+						hiddenPart = (elementPositionTop + resultsetSize) - (scrollLastPositionY + scrollClipHeight);
+						elementsLeftToLoad = currentIndex;
+					}
+
+					//Compute hidden part of result set and number of elements, that needed to be loaded, while user is scrolling RIGHT
+					if (scrollDirection[SCROLL_RIGHT]) {
+						hiddenPart = scrollLastPositionX - elementPositionLeft;
+						elementsLeftToLoad = dataLength - currentIndex - bufferSize;
+					}
+
+					//Compute hidden part of result set and number of elements, that needed to be loaded, while user is scrolling LEFT
+					if (scrollDirection[SCROLL_LEFT]) {
+						hiddenPart = (elementPositionLeft + resultsetSize) - (scrollLastPositionX - scrollClipWidth);
+						elementsLeftToLoad = currentIndex;
+					}
+
+					//manipulate DOM only, when at least 2/3 of result set is hidden
+					//NOTE: Result Set should be at least 3x bigger then clip size
+					if (hiddenPart > 0 && (resultsetSize / hiddenPart) <= 1.5) {
+
+						//Left half of hidden elements still hidden/cached
+						elementsToLoad = Math.floor(hiddenPart / avgListItemSize) - Math.floor((bufferSize - scrollClipHeight / avgListItemSize) / 2);
+						elementsToLoad = elementsLeftToLoad < elementsToLoad ? elementsLeftToLoad : elementsToLoad;
+						bufferToLoad = Math.floor(elementsToLoad / bufferSize);
+						elementsToLoad = elementsToLoad % bufferSize;
+
+						// Scrolling more then buffer
+						if (bufferToLoad > 0) {
+							if (scrollDirection[SCROLL_DOWN] || scrollDirection[SCROLL_RIGHT]) {
+								direction = 1;
+							}
+
+							if (scrollDirection[SCROLL_UP] || scrollDirection[SCROLL_LEFT]) {
+								direction = -1;
+							}
+
+							// Load data to buffer according to jumped index
+							self._loadData(currentIndex + direction * bufferToLoad * bufferSize);
+
+							// Refresh current index after buffer jump
+							currentIndex = self._currentIndex;
+
+							jump += direction * bufferToLoad * bufferSize * avgListItemSize;
+						}
+
+						if (scrollDirection[SCROLL_DOWN] || scrollDirection[SCROLL_RIGHT]) {
+							//Switch currentIndex to last
+							currentIndex = currentIndex + bufferSize - 1;
+						}
+						for (i = elementsToLoad; i > 0; i -= 1) {
+							if (scrollDirection[SCROLL_DOWN] || scrollDirection[SCROLL_RIGHT]) {
+								temporaryElement = element.appendChild(element.firstElementChild);
+								++currentIndex;
+
+								//Updates list item using template
+								self._updateListItem(temporaryElement, currentIndex);
+								jump += temporaryElement.clientHeight;
+							}
+
+							if (scrollDirection[SCROLL_UP] || scrollDirection[SCROLL_LEFT]) {
+								temporaryElement = element.insertBefore(element.lastElementChild, element.firstElementChild);
+								--currentIndex;
+
+								//Updates list item using template
+								self._updateListItem(temporaryElement, currentIndex);
+								jump -= temporaryElement.clientHeight;
+							}
+						}
+						if (scrollDirection[SCROLL_UP] || scrollDirection[SCROLL_DOWN]) {
+							newPosition = elementPositionTop + jump;
+
+							if (newPosition < 0 || currentIndex <= 0) {
+								newPosition = 0;
+								currentIndex = 0;
+							}
+
+							if (currentIndex >= (dataLength - 1)) {
+								newPosition = self.ui.spacer.clientHeight;
+							}
+
+							elementStyle.top = newPosition + "px";
+						}
+
+						if (scrollDirection[SCROLL_LEFT] || scrollDirection[SCROLL_RIGHT]) {
+							newPosition = elementPositionLeft + jump;
+
+							if (newPosition < 0 || currentIndex <= 0) {
+								newPosition = 0;
+							}
+
+							if (currentIndex >= (dataLength - 1)) {
+								newPosition = self.ui.spacer.clientWidth;
+							}
+
+							elementStyle.left = newPosition + "px";
+						}
+
+						if (scrollDirection[SCROLL_DOWN] || scrollDirection[SCROLL_RIGHT]) {
+							//Switch currentIndex to first
+							currentIndex = currentIndex - bufferSize + 1;
+						}
+						//Save current index
+						self._currentIndex = currentIndex;
+					}
+				}
+
+				/**
+				 * Check if scrolling position is changed and updates list if it needed.
+				 * @method _updateList
+				 * @param {ns.widget.wearable.VirtualListview} self VirtualListview widget reference
+				 * @member ns.widget.wearable.VirtualListview
+				 * @private
+				 * @static
+				 */
+				function _updateList(self) {
+					var _scroll = self._scroll;
+					_updateScrollInfo.call(null, self);
+					if (_scroll.lastJumpY > 0 || _scroll.lastJumpX > 0) {
+						if (!blockEvent) {
+							_orderElements(self);
+						}
+					}
+				}
+
+				/**
+				 * Updates list item using user defined listItemUpdater function.
+				 * @method _updateListItem
+				 * @param {HTMLElement} element List element to update
+				 * @param {number} index Data row index
+				 * @member ns.widget.wearable.VirtualListview
+				 * @protected
+				 */
+				prototype._updateListItem = function (element, index) {
+					this.options.listItemUpdater(element, index);
+				};
+
+				/**
+				 * Build widget structure
+				 * @method _build
+				 * @param {HTMLElement} element Widget's element
+				 * @return {HTMLElement} Element on which built is widget
+				 * @member ns.widget.wearable.VirtualListview
+				 * @protected
+				 */
+				prototype._build = function(element) {
+					var classes = VirtualListview.classes;
+
+					element.classList.add(classes.uiVirtualListContainer);
+					return element;
+				};
+
+
+				/**
+				 * Initialize widget on an element.
+				 * @method _init
+				 * @param {HTMLElement} element Widget's element
+				 * @member ns.widget.wearable.VirtualListview
+				 * @protected
+				 */
+				prototype._init = function(element) {
+					var self = this,
+						ui = self.ui,
+						options = self.options,
+						orientation,
+						scrollview,
+						scrollviewStyle,
+						spacer,
+						spacerStyle;
+
+					//Set orientation, default vertical scrolling is allowed
+					orientation = options.orientation.toLowerCase() === HORIZONTAL ? HORIZONTAL : VERTICAL;
+
+					//Get scrollview instance
+					scrollview = element.parentElement;
+					scrollviewStyle = scrollview.style;
+
+					// Prepare spacer (element which makes scrollbar proper size)
+					spacer = document.createElement("div");
+					spacerStyle = spacer.style;
+					spacerStyle.display = "block";
+					spacerStyle.position = "static";
+					scrollview.appendChild(spacer);
+
+					//Prepare element
+					element.style.position = "relative";
+
+					if (orientation === HORIZONTAL) {
+						// @TODO check if whiteSpace: nowrap is better for vertical listes
+						spacerStyle.float = "left";
+						scrollviewStyle.overflowX = "scroll";
+						scrollviewStyle.overflowY = "hidden";
+					} else {
+						scrollviewStyle.overflowX = "hidden";
+						scrollviewStyle.overflowY = "scroll";
+					}
+
+					if (options.dataLength < options.bufferSize) {
+						options.bufferSize = options.dataLength;
+					}
+
+					if (options.bufferSize < 1) {
+						options.bufferSize = 1;
+					}
+
+					// Assign variables to members
+					ui.spacer = spacer;
+					ui.scrollview = scrollview;
+					self.element = element;
+					options.orientation = orientation;
+				};
+
+				/**
+				 * Builds Virtual List structure
+				 * @method _buildList
+				 * @member ns.widget.wearable.VirtualListview
+				 * @protected
+				 */
+				prototype._buildList = function() {
+					var listItem,
+						list = this.element,
+						numberOfItems = this.options.bufferSize,
+						documentFragment = document.createDocumentFragment(),
+						touchStartEventBound = _touchStartHandler.bind(null, this),
+						orientation = this.options.orientation,
+						i;
+
+					for (i = 0; i < numberOfItems; ++i) {
+						listItem = document.createElement("li");
+
+						if (orientation === HORIZONTAL) {
+							// TODO: check if whiteSpace: nowrap is better for vertical listes
+							// NOTE: after rebuild this condition check possible duplication from _init method
+							listItem.style.float = "left";
+						}
+
+						this._updateListItem(listItem, i);
+						documentFragment.appendChild(listItem);
+						listItem.addEventListener(POINTER_START, touchStartEventBound, false);
+					}
+
+					list.appendChild(documentFragment);
+					this._touchStartEventBound = touchStartEventBound;
+					this._refresh();
+				};
+
+				/**
+				 * Refresh list
+				 * @method _refresh
+				 * @member ns.widget.wearable.VirtualListview
+				 * @protected
+				 */
+				prototype._refresh = function() {
+					//Set default value of variable create
+					this._refreshScrollbar();
+				};
+
+				/**
+				 * Loads data from specified index to result set.
+				 * @method _loadData
+				 * @param {number} index Index of first row
+				 * @member ns.widget.wearable.VirtualListview
+				 * @protected
+				 */
+				prototype._loadData = function(index) {
+					var self = this,
+						children = self.element.firstElementChild;
+
+					if (self._currentIndex !== index) {
+						self._currentIndex = index;
+						do {
+							self._updateListItem(children, index);
+							++index;
+							children = children.nextElementSibling;
+						} while (children);
+					}
+				};
+
+				/**
+				 * Sets proper scrollbar size: height (vertical), width (horizontal)
+				 * @method _refreshScrollbar
+				 * @member ns.widget.wearable.VirtualListview
+				 * @protected
+				 */
+				prototype._refreshScrollbar = function() {
+					var self = this,
+						element = self.element,
+						options = self.options,
+						ui = self.ui,
+						spacerStyle = ui.spacer.style,
+						bufferSizePx;
+
+					if (options.orientation === VERTICAL) {
+						//Note: element.clientHeight is variable
+						bufferSizePx = parseFloat(element.clientHeight) || 0;
+						spacerStyle.height = (bufferSizePx / options.bufferSize * options.dataLength - bufferSizePx) + "px";
+					} else {
+						//Note: element.clientWidth is variable
+						bufferSizePx = parseFloat(element.clientWidth) || 0;
+						spacerStyle.width = (bufferSizePx / options.bufferSize * (options.dataLength - 1) - 4 / 3 * bufferSizePx) + "px";
+					}
+				};
+
+				/**
+				 * Binds VirtualListview events
+				 * @method _bindEvents
+				 * @member ns.widget.wearable.VirtualListview
+				 * @protected
+				 */
+				prototype._bindEvents = function() {
+					var scrollEventBound = _updateList.bind(null, this),
+						scrollviewClip = this.ui.scrollview;
+
+					if (scrollviewClip) {
+						scrollviewClip.addEventListener("scroll", scrollEventBound, false);
+						this._scrollEventBound = scrollEventBound;
+					}
+				};
+
+				/**
+				 * Cleans widget's resources
+				 * @method _destroy
+				 * @member ns.widget.wearable.VirtualListview
+				 * @protected
+				 */
+				prototype._destroy = function() {
+					var self = this,
+						scrollviewClip = self.ui.scrollview,
+						uiSpacer = self.ui.spacer,
+						element = self.element,
+						elementStyle = element.style,
+						listItem;
+
+					// Restore start position
+					elementStyle.position = "static";
+					if (self.options.orientation === VERTICAL) {
+						elementStyle.top = "auto";
+					} else {
+						elementStyle.left = "auto";
+					}
+
+					if (scrollviewClip) {
+						scrollviewClip.removeEventListener("scroll", self._scrollEventBound, false);
+					}
+
+					//Remove spacer element
+					if (uiSpacer.parentNode) {
+						uiSpacer.parentNode.removeChild(uiSpacer);
+					}
+
+					//Remove li elements.
+					while (element.firstElementChild) {
+						listItem = element.firstElementChild;
+						listItem.removeEventListener(POINTER_START, self._touchStartEventBound, false);
+						element.removeChild(listItem);
+					}
+
+				};
+
+				/**
+				 * This method scrolls list to defined position in pixels.
+				 * @method scrollTo
+				 * @param {number} position Scroll position expressed in pixels.
+				 * @member ns.widget.wearable.VirtualListview
+				 */
+				prototype.scrollTo = function(position) {
+					this.ui.scrollview.scrollTop = position;
+				};
+
+				/**
+				 * This method scrolls list to defined index.
+				 * @method scrollToIndex
+				 * @param {number} index Scroll Destination index.
+				 * @member ns.widget.wearable.VirtualListview
+				 */
+				prototype.scrollToIndex = function(index) {
+					if (index < 0) {
+						index = 0;
+					}
+					if (index >= this.options.dataLength) {
+						index = this.options.dataLength - 1;
+					}
+					_updateScrollInfo(this);
+					_orderElementsByIndex(this, index);
+				};
+
+				/**
+				 * This method builds widget and trigger event "draw".
+				 * @method draw
+				 * @member ns.widget.wearable.VirtualListview
+				 */
+				prototype.draw = function() {
+					this._buildList();
+					this.trigger("draw");
+				};
+
+				/**
+				 * This method sets list item updater function.
+				 * To learn how to create list item updater function please
+				 * visit Virtual List User Guide.
+				 * @method setListItemUpdater
+				 * @param {Object} updateFunction Function reference.
+				 * @member ns.widget.wearable.VirtualListview
+				 */
+				prototype.setListItemUpdater = function(updateFunction) {
+					this.options.listItemUpdater = updateFunction;
+				};
+
+				// Assign prototype
+				VirtualListview.prototype = prototype;
+
+				// definition
+				ns.widget.wearable.VirtualListview = VirtualListview;
+
+				engine.defineWidget(
+						"VirtualListview",
+						"",
+						["draw", "setListItemUpdater", "scrollTo", "scrollToIndex"],
+						VirtualListview,
+						"wearable"
+						);
+				}(window.document, ns));
+
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Scroller namespace
+ * Namespace contains classes and objects connected with scroller widget.
+ * @class ns.widget.wearable.scroller
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ */
+(function (window, ns) {
+	
+				ns.widget.wearable.scroller = ns.widget.wearable.scroller || {};
+			}(window, ns));
+
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*
+ * #Effect namespace
+ * Namespace with effects for scroller widget.
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @class ns.widget.wearable.scroller.effect
+ */
+(function (window, ns) {
+	
+				ns.widget.wearable.scroller.effect = ns.widget.wearable.scroller.effect || {};
+			}(window, ns));
+
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true, plusplus: true */
+/**
+ * # Bouncing effect
+ * Bouncing effect for scroller widget.
+ * @class ns.widget.wearable.scroller.effect.Bouncing
+ * @since 2.3
+ */
+(function (document, ns) {
+	
+				// scroller.start event trigger when user try to move scroller
+			var utilsObject = ns.util.object,
+				selectors = ns.util.selectors,
+				Bouncing = function (scrollerElement, options) {
+					var self = this;
+					self._orientation = null;
+					self._maxValue = null;
+
+					self._container = null;
+					self._minEffectElement = null;
+					self._maxEffectElement = null;
+
+					self.options = utilsObject.merge({}, Bouncing.defaults, {scrollEndEffectArea: ns.getConfig("scrollEndEffectArea", Bouncing.defaults.scrollEndEffectArea)});
+				/**
+				 * target element for bouncing effect
+				 * @property {HTMLElement} targetElement
+				 * @member ns.widget.wearable.scroller.effect.Bouncing
+				 */
+					self._targetElement = null;
+
+					self._isShow = false;
+					self._isDrag = false;
+					self._isShowAnimating = false;
+					self._isHideAnimating = false;
+
+					self._create(scrollerElement, options);
+				},
+				endEffectAreaType = {
+					content: "content",
+					screen: "screen"
+				},
+				defaults = {
+					duration: 500,
+					scrollEndEffectArea : "content"
+				},
+				classes = {
+					bouncingEffect: "ui-scrollbar-bouncing-effect",
+					page: "ui-page",
+					left: "ui-left",
+					right: "ui-right",
+					top: "ui-top",
+					bottom: "ui-bottom",
+					hide: "ui-hide",
+					show: "ui-show"
+				};
+
+			Bouncing.defaults = defaults;
+
+			Bouncing.prototype = {
+				_create: function (scrollerElement, options) {
+					var self = this;
+					if( self.options.scrollEndEffectArea === endEffectAreaType.content ){
+						self._container = scrollerElement;
+					} else {
+						self._container = selectors.getClosestByClass(scrollerElement, classes.page);
+					}
+
+					self._orientation = options.orientation;
+					self._maxValue = self._getValue( options.maxScrollX, options.maxScrollY );
+
+					self._initLayout();
+				},
+
+				_initLayout: function() {
+					var self = this,
+						minElement = self._minEffectElement = document.createElement("DIV"),
+						maxElement = self._maxEffectElement = document.createElement("DIV"),
+						className = classes.bouncingEffect;
+
+					if ( self._orientation === ns.widget.wearable.scroller.Scroller.Orientation.HORIZONTAL ) {
+						minElement.className = className + " " + classes.left;
+						maxElement.className = className + " " + classes.right;
+					} else {
+						minElement.className = className + " " + classes.top;
+						maxElement.className = className + " " + classes.bottom;
+					}
+
+					self._container.appendChild( minElement );
+					self._container.appendChild( maxElement );
+
+					minElement.addEventListener("webkitAnimationEnd", this);
+					maxElement.addEventListener("webkitAnimationEnd", this);
+				},
+
+				/**
+				 * ...
+				 * @method drag
+				 * @param x
+				 * @param y
+				 * @member ns.widget.wearable.scroller.effect.Bouncing
+				 */
+				drag: function( x, y ) {
+					this._isDrag = true;
+					this._checkAndShow( x, y );
+				},
+
+				/**
+				 * ...
+				 * @method dragEnd
+				 * @member ns.widget.wearable.scroller.effect.Bouncing
+				 */
+				dragEnd: function() {
+					var self = this;
+					if ( self._isShow && !self._isShowAnimating && !self._isHideAnimating ) {
+						self._beginHide();
+					}
+
+					self._isDrag = false;
+				},
+
+				/**
+				 * Shows effect.
+				 * @method show
+				 * @member ns.widget.wearable.scroller.effect.Bouncing
+				 */
+				show: function() {
+					var self = this;
+					if ( self._targetElement ) {
+						self._isShow = true;
+						self._beginShow();
+					}
+				},
+
+				/**
+				 * Hides effect.
+				 * @method hide
+				 * @member ns.widget.wearable.scroller.effect.Bouncing
+				 */
+				hide: function() {
+					var self = this;
+					if ( self._isShow ) {
+						self._minEffectElement.style.display = "none";
+						self._maxEffectElement.style.display = "none";
+						self._targetElement.classList.remove(classes.hide);
+						self._targetElement.classList.remove(classes.show);
+					}
+					self._isShow = false;
+					self._isShowAnimating = false;
+					self._isHideAnimating = false;
+					self._targetElement = null;
+				},
+
+				_checkAndShow: function( x, y ) {
+					var self = this,
+						val = self._getValue(x, y);
+					if ( !self._isShow ) {
+						if ( val >= 0 ) {
+							self._targetElement = self._minEffectElement;
+							self.show();
+						} else if ( val <= self._maxValue ) {
+							self._targetElement = self._maxEffectElement;
+							self.show();
+						}
+
+					} else if ( self._isShow && !self._isDrag && !self._isShowAnimating && !self._isHideAnimating ) {
+						self._beginHide();
+					}
+				},
+
+				_getValue: function(x, y) {
+					return this._orientation === ns.widget.wearable.scroller.Scroller.Orientation.HORIZONTAL ? x : y;
+				},
+
+				_beginShow: function() {
+					var self = this;
+					if ( !self._targetElement || self._isShowAnimating ) {
+						return;
+					}
+
+					self._targetElement.style.display = "block";
+
+					self._targetElement.classList.remove(classes.hide);
+					self._targetElement.classList.add(classes.show);
+
+					self._isShowAnimating = true;
+					self._isHideAnimating = false;
+				},
+
+				_finishShow: function() {
+					var self = this;
+					self._isShowAnimating = false;
+					if ( !self._isDrag ) {
+						self._targetElement.classList.remove(classes.show);
+						self._beginHide();
+					}
+				},
+
+				_beginHide: function() {
+					var self = this;
+					if ( self._isHideAnimating ) {
+						return;
+					}
+
+					self._targetElement.classList.remove(classes.show);
+					self._targetElement.classList.add(classes.hide);
+
+					self._isHideAnimating = true;
+					self._isShowAnimating = false;
+				},
+
+				_finishHide: function() {
+					var self = this;
+					self._isHideAnimating = false;
+					self._targetElement.classList.remove(classes.hide);
+					self.hide();
+					self._checkAndShow();
+				},
+
+				/**
+				 * Supports events.
+				 * @method handleEvent
+				 * @member ns.widget.wearable.scroller.effect.Bouncing
+				 */
+				handleEvent: function( event ) {
+					var self = this;
+					if (event.type === "webkitAnimationEnd") {
+						if ( self._isShowAnimating ) {
+							self._finishShow();
+						} else if ( self._isHideAnimating ) {
+							self._finishHide();
+						}
+					}
+				},
+
+				/**
+				 * Destroys effect.
+				 * @method destroy
+				 * @member ns.widget.wearable.scroller.effect.Bouncing
+				 */
+				destroy: function() {
+					var self = this;
+					self._minEffectElement.removeEventListener("webkitAnimationEnd", self);
+					self._maxEffectElement.removeEventListener("webkitAnimationEnd", self);
+
+					self._container.removeChild( self._minEffectElement );
+					self._container.removeChild( self._maxEffectElement );
+
+					self._container = null;
+					self._minEffectElement = null;
+					self._maxEffectElement = null;
+					self._targetElement = null;
+
+					self._isShow = null;
+					self._orientation = null;
+					self._maxValue = null;
+				}
+			};
+
+			ns.widget.wearable.scroller.effect.Bouncing = Bouncing;
+			}(window.document, ns));
+
+/*global window, define, Event, console, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true, plusplus: true */
+/**
+ * # Scroller Widget
+ * Widget creates scroller on content.
+ * @class ns.widget.wearable.scroller.Scroller
+ * @since 2.3
+ * @extends ns.widget.BaseWidget
+ */
+(function (document, ns) {
+	
+				// scroller.start event trigger when user try to move scroller
+			var BaseWidget = ns.widget.BaseWidget,
+				Gesture = ns.event.gesture,
+				engine = ns.engine,
+				utilsObject = ns.util.object,
+				utilsEvents = ns.event,
+				eventTrigger = utilsEvents.trigger,
+				prototype = new BaseWidget(),
+				EffectBouncing = ns.widget.wearable.scroller.effect.Bouncing,
+				eventType = {
+					/**
+					 * event trigger when scroller start
+					 * @event scrollstart
+					 */
+					START: "scrollstart",
+					/**
+					 * event trigger when scroller move
+					 * @event scrollmove
+					 */
+					MOVE: "scrollmove",
+					/**
+					 * event trigger when scroller end
+					 * @event scrollend
+					 */
+					END: "scrollend",
+					/**
+					 * event trigger when scroll is cancel
+					 * @event scrollcancel
+					 */
+					CANCEL: "scrollcancel"
+				},
+
+				/*
+				 * this option is related operation of scroll bar.
+				 * the value is true, scroll bar is shown during touching screen even if content doesn't scroll.
+				 * the value is false, scroll bar disappear when there is no movement of the scroll bar.
+				 */
+				_keepShowingScrollbarOnTouch = false,
+
+				Scroller = function () {
+				};
+
+			Scroller.Orientation = {
+				VERTICAL: "vertical",
+				HORIZONTAL: "horizontal"
+			};
+
+			prototype._build = function (element) {
+				if (element.children.length !== 1) {
+					throw "scroller has only one child.";
+				}
+
+				this.scroller = element.children[0];
+				this.scrollerStyle = this.scroller.style;
+
+				this.bouncingEffect = null;
+				this.scrollbar = null;
+
+				this.scrollerWidth = 0;
+				this.scrollerHeight = 0;
+				this.scrollerOffsetX = 0;
+				this.scrollerOffsetY = 0;
+
+				this.maxScrollX = 0;
+				this.maxScrollY = 0;
+
+				this.startScrollerOffsetX = 0;
+				this.startScrollerOffsetY = 0;
+
+				this.orientation = null;
+
+				this.enabled = true;
+				this.scrolled = false;
+				this.dragging = false;
+				this.scrollCanceled = false;
+
+				return element;
+			};
+
+			prototype._configure = function () {
+				/**
+				 * @property {Object} options Options for widget
+				 * @property {number} [options.scrollDelay=0]
+				 * @property {number} [options.threshold=10]
+				 * @property {""|"bar"|"tab"} [options.scrollbar=""]
+				 * @property {boolean} [options.useBouncingEffect=false]
+				 * @property {"vertical"|"horizontal"} [options.orientation="vertical"]
+				 * @member ns.widget.wearable.Scroller
+				 */
+				this.options = utilsObject.merge({}, this.options, {
+					scrollDelay: 0,
+					threshold: 10,
+					scrollbar: "",
+					useBouncingEffect: false,
+					orientation: "vertical"	// vertical or horizontal,
+				});
+			};
+
+			prototype._init = function () {
+				var options = this.options,
+					scrollerChildren = this.scroller.children,
+					elementStyle = this.element.style,
+					scrollerStyle = this.scroller.style,
+					elementHalfWidth =  this.element.offsetWidth / 2,
+					elementHalfHeight = this.element.offsetHeight / 2;
+
+				this.orientation = this.orientation ? this.orientation :
+					(options.orientation === "horizontal" ? Scroller.Orientation.HORIZONTAL : Scroller.Orientation.VERTICAL);
+				this.scrollerWidth = this.scroller.offsetWidth;
+				this.scrollerHeight = this.scroller.offsetHeight;
+
+				this.maxScrollX = elementHalfWidth - this.scrollerWidth + scrollerChildren[scrollerChildren.length - 1].offsetWidth / 2;
+				this.maxScrollY = elementHalfHeight - this.scrollerHeight + scrollerChildren[scrollerChildren.length - 1].offsetHeight / 2;
+				this.minScrollX = elementHalfWidth - scrollerChildren[0].offsetWidth / 2;
+				this.minScrollY = elementHalfHeight - scrollerChildren[0].offsetHeight / 2;
+
+				this.scrolled = false;
+				this.touching = true;
+				this.scrollCanceled = false;
+
+				if ( this.orientation === Scroller.Orientation.HORIZONTAL ) {
+					this.maxScrollY = 0;
+				} else {
+					this.maxScrollX = 0;
+				}
+				elementStyle.overflow = "hidden";
+				elementStyle.position = "relative";
+				scrollerStyle.position = "absolute";
+				scrollerStyle.top = "0px";
+				scrollerStyle.left = "0px";
+				scrollerStyle.width = this.scrollerWidth + "px";
+				scrollerStyle.height = this.scrollerHeight + "px";
+				this._initScrollbar();
+				this._initBouncingEffect();
+			};
+
+			prototype._initScrollbar = function () {
+				var type = this.options.scrollbar,
+					scrollbarType;
+
+				if ( type ) {
+					scrollbarType = ns.widget.wearable.scroller.scrollbar.type[type];
+					if ( scrollbarType ) {
+						this.scrollbar = engine.instanceWidget(this.element, "ScrollBar", {
+							type: scrollbarType,
+							orientation: this.orientation
+						});
+					}
+				}
+			};
+
+			prototype._initBouncingEffect = function () {
+				var o = this.options;
+				if ( o.useBouncingEffect ) {
+					this.bouncingEffect = new EffectBouncing(this.element, {
+						maxScrollX: this.maxScrollX,
+						maxScrollY: this.maxScrollY,
+						orientation: this.orientation
+					});
+				}
+			};
+
+			prototype._resetLayout = function () {
+				var elementStyle = this.element.style,
+					scrollerStyle = this.scrollerStyle;
+
+				elementStyle.overflow = "";
+				elementStyle.position = "";
+
+				elementStyle.overflow = "hidden";
+				elementStyle.position = "relative";
+
+				if (scrollerStyle) {
+					scrollerStyle.position = "";
+					scrollerStyle.top = "";
+					scrollerStyle.left = "";
+					scrollerStyle.width = "";
+					scrollerStyle.height = "";
+
+					scrollerStyle["-webkit-transform"] = "";
+					scrollerStyle["-webkit-transition"] = "";
+				}
+			};
+
+			prototype._bindEvents = function () {
+				ns.event.enableGesture(
+					this.scroller,
+
+					new ns.event.gesture.Drag({
+						threshold: this.options.threshold,
+						delay: this.options.scrollDelay,
+						blockVertical: this.orientation === Scroller.Orientation.HORIZONTAL,
+						blockHorizontal: this.orientation === Scroller.Orientation.VERTICAL
+					})
+				);
+
+				utilsEvents.on( this.scroller, "drag dragstart dragend dragcancel", this );
+				window.addEventListener("resize", this);
+			};
+
+			prototype._unbindEvents = function () {
+				if (this.scroller) {
+					ns.event.disableGesture( this.scroller );
+					utilsEvents.off( this.scroller, "drag dragstart dragend dragcancel", this );
+					window.removeEventListener("resize", this);
+				}
+			};
+
+			/* jshint -W086 */
+			prototype.handleEvent = function (event) {
+				switch (event.type) {
+					case "dragstart":
+						this._start( event );
+						break;
+					case "drag":
+						this._move( event );
+						break;
+					case "dragend":
+						this._end( event );
+						break;
+					case "dragcancel":
+						this.cancel( event );
+						break;
+					case "resize":
+						this.refresh();
+						break;
+				}
+			};
+
+			/**
+			 * Set options for widget.
+			 * @method setOptions
+			 * @param {Object} options
+			 * @member ns.widget.wearable.scroller.Scroller
+			 */
+			prototype.setOptions = function (options) {
+				var name;
+				for ( name in options ) {
+					if ( options.hasOwnProperty(name) && !!options[name] ) {
+						this.options[name] = options[name];
+					}
+				}
+			};
+
+			prototype._refresh = function () {
+				this._clear();
+				this._unbindEvents();
+				this._init();
+				this._bindEvents();
+			};
+
+			/**
+			 * Scrolls to new position.
+			 * @method scrollTo
+			 * @param x
+			 * @param y
+			 * @param duration
+			 * @member ns.widget.wearable.scroller.Scroller
+			 */
+			prototype.scrollTo = function (x, y, duration) {
+				this._translate(x, y, duration);
+				this._translateScrollbar(x, y, duration);
+			};
+
+			prototype._translate = function (x, y, duration) {
+				var translate,
+					transition,
+					scrollerStyle = this.scrollerStyle;
+
+				if ( !duration ) {
+					transition = "none";
+				} else {
+					transition = "-webkit-transform " + duration / 1000 + "s ease-out";
+				}
+				translate = "translate3d(" + x + "px," + y + "px, 0)";
+
+				scrollerStyle["-webkit-transform"] = translate;
+				scrollerStyle["-webkit-transition"] = transition;
+
+				this.scrollerOffsetX = window.parseInt(x, 10);
+				this.scrollerOffsetY = window.parseInt(y, 10);
+			};
+
+			prototype._translateScrollbar = function (x, y, duration, autoHidden) {
+				if (!this.scrollbar) {
+					return;
+				}
+
+				this.scrollbar.translate(this.orientation === Scroller.Orientation.HORIZONTAL ? -x : -y, duration, autoHidden);
+			};
+
+			prototype._start = function(/* e */) {
+				this.scrolled = false;
+				this.dragging = true;
+				this.scrollCanceled = false;
+				this.startScrollerOffsetX = this.scrollerOffsetX;
+				this.startScrollerOffsetY = this.scrollerOffsetY;
+			};
+
+			prototype._move = function (e, pos) {
+				var newX = this.startScrollerOffsetX,
+					newY = this.startScrollerOffsetY,
+					autoHide = !_keepShowingScrollbarOnTouch;
+
+				if ( !this.enabled || this.scrollCanceled || !this.dragging ) {
+					return;
+				}
+
+				if ( this.orientation === Scroller.Orientation.HORIZONTAL ) {
+					newX += e.detail.estimatedDeltaX;
+				} else {
+					newY += e.detail.estimatedDeltaY;
+				}
+
+				if ( newX > this.minScrollX || newX < this.maxScrollX ) {
+					newX = newX > this.minScrollX ? this.minScrollX : this.maxScrollX;
+				}
+				if ( newY > this.minScrollY || newY < this.maxScrollY ) {
+					newY = newY > this.minScrollY ? this.minScrollY : this.maxScrollY;
+				}
+
+				if ( newX !== this.scrollerOffsetX || newY !== this.scrollerOffsetY ) {
+					if ( !this.scrolled ) {
+						this._fireEvent( eventType.START );
+					}
+					this.scrolled = true;
+
+					this._translate( newX, newY );
+					this._translateScrollbar( newX, newY, 0, autoHide );
+					// TODO to dispatch move event is too expansive. it is better to use callback.
+					this._fireEvent( eventType.MOVE );
+
+					if ( this.bouncingEffect ) {
+						this.bouncingEffect.hide();
+					}
+				} else {
+					if ( this.bouncingEffect ) {
+						this.bouncingEffect.drag( newX, newY );
+					}
+					this._translateScrollbar( newX, newY, 0, autoHide );
+				}
+			};
+
+			prototype._end = function (/* e */) {
+				if ( !this.dragging ) {
+					return;
+				}
+
+				// bouncing effect
+				if ( this.bouncingEffect ) {
+					this.bouncingEffect.dragEnd();
+				}
+
+				if ( this.scrollbar ) {
+					this.scrollbar.end();
+				}
+
+				this._endScroll();
+				this.dragging = false;
+			};
+
+			prototype._endScroll = function () {
+				if (this.scrolled) {
+					this._fireEvent(eventType.END);
+				}
+
+				this.scrolled = false;
+			};
+
+			/**
+			 * Cancels scroll.
+			 * @method cancel
+			 * @member ns.widget.wearable.scroller.Scroller
+			 */
+			prototype.cancel = function () {
+				this.scrollCanceled = true;
+
+				if ( this.scrolled ) {
+					this._translate( this.startScrollerOffsetX, this.startScrollerOffsetY );
+					this._translateScrollbar( this.startScrollerOffsetX, this.startScrollerOffsetY );
+					this._fireEvent( eventType.CANCEL );
+				}
+
+				if ( this.scrollbar ) {
+					this.scrollbar.end();
+				}
+
+				this.scrolled = false;
+				this.dragging = false;
+			};
+
+			prototype._fireEvent = function (eventName, detail) {
+				eventTrigger( this.element, eventName, detail );
+			};
+
+			prototype._clear = function () {
+				this.scrolled = false;
+				this.scrollCanceled = false;
+
+				this._resetLayout();
+				this._clearScrollbar();
+				this._clearBouncingEffect();
+			};
+
+			prototype._clearScrollbar = function () {
+				if ( this.scrollbar ) {
+					this.scrollbar.destroy();
+				}
+				this.scrollbar = null;
+			};
+
+			prototype._clearBouncingEffect = function () {
+				if (this.bouncingEffect) {
+					this.bouncingEffect.destroy();
+				}
+				this.bouncingEffect = null;
+			};
+
+			prototype._disable = function () {
+				this.enabled = false;
+			};
+
+			prototype._enable = function () {
+				this.enabled = true;
+			};
+
+			prototype._destroy = function () {
+				this._clear();
+				this._unbindEvents();
+				this.scrollerStyle = null;
+				this.scroller = null;
+			};
+
+			Scroller.prototype = prototype;
+
+			ns.widget.wearable.scroller.Scroller = Scroller;
+
+			engine.defineWidget(
+				"Scroller",
+				".scroller",
+				["scrollTo", "cancel"],
+				Scroller
+			);
+			}(window.document, ns));
+
+/*global window, define, Event, console */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true, plusplus: true */
+/**
+ * #TabIndicator Widget
+ * Widget create tabs indicator.
+ * @class ns.widget.wearable.TabIndicator
+ * @since 2.3
+ * @extends ns.widget.BaseWidget
+ */
+(function (document, ns) {
+	
+				var engine = ns.engine,
+				object = ns.util.object,
+				TabIndicator = function() {
+				this.tabSize = 0;
+				this.activeIndex = 0;
+				this.width = 0;
+			};
+
+			TabIndicator.EventType = {
+				/**
+				 * Triggered when tab is changing
+				 * @event tabchange
+				 * @member ns.widget.wearable.TabIndicator
+				 */
+				change: "tabchange"
+			};
+
+			TabIndicator.prototype = new ns.widget.BaseWidget();
+
+			object.fastMerge(TabIndicator.prototype, {
+				_init: function(element) {
+					var o = this.options;
+
+					this.width = element.offsetWidth;
+					element.classList.add( o.wrapperClass );
+				},
+
+				_configure: function( ) {
+					/**
+					 * @property {Object} options Options for widget
+					 * @property {number} [options.margin=2]
+					 * @property {boolean} [options.triggerEvent=false]
+					 * @property {string} [options.wrapperClass="ui-tab-indicator]
+					 * @property {string} [options.itemClass="ui-tab-item"]
+					 * @property {string} [options.activeClass="ui-tab-active"]
+					 * @member ns.widget.wearable.TabIndicator
+					 */
+					this.options = {
+						margin: 4,
+						triggerEvent: false,
+						wrapperClass: "ui-tab-indicator",
+						itemClass: "ui-tab-item",
+						activeClass: "ui-tab-active"
+					};
+				},
+
+				_createIndicator: function() {
+					var o = this.options,
+						activeIndex = this.activeIndex,
+						wrap = document.createDocumentFragment(),
+						widthTable = [],
+						margin = o.margin,
+						i = 0,
+						len = this.tabSize,
+						width = this.width-margin*(len-1),
+						std = Math.floor(width / len),
+						remain = width % len,
+						span, offset=0;
+
+					for (i=0; i < len; i++) {
+						widthTable[i] = std;
+					}
+
+					for ( i= Math.floor((len-remain)/2); remain > 0; i++, remain-- ) {
+						widthTable[i] += 1;
+					}
+
+					for (i=0; i < len; i++) {
+						span = document.createElement("span");
+						span.classList.add( o.itemClass );
+						span.style.width = widthTable[i] + "px";
+						span.style.left = offset + "px";
+						offset += widthTable[i] + margin;
+
+						if ( i === activeIndex ) {
+							span.classList.add( o.activeClass );
+						}
+						wrap.appendChild(span);
+					}
+
+					this.element.appendChild( wrap );
+				},
+
+				_removeIndicator: function() {
+					this.element.innerHTML = "";
+				},
+
+				_fireEvent: function(eventName, detail) {
+					ns.fireEvent( this.element, eventName, detail );
+				},
+
+				_refresh: function() {
+					this._removeIndicator();
+					this._createIndicator();
+				},
+
+				/**
+				 * @method setActive
+				 * @param position
+				 * @member ns.widget.wearable.TabIndicator
+				 */
+				setActive: function ( position ) {
+					var o = this.options,
+						nodes = this.element.children;
+
+					this.activeIndex = position;
+
+					[].forEach.call(nodes, function( element ) {
+						element.classList.remove( o.activeClass );
+					});
+
+					if ( position < nodes.length ) {
+						nodes[position].classList.add( o.activeClass );
+
+						if ( o.triggerEvent ) {
+							this._fireEvent(TabIndicator.EventType.change, {
+								active: position
+							});
+						}
+					}
+				},
+
+				/**
+				 * @method setSize
+				 * @param size
+				 * @member ns.widget.wearable.TabIndicator
+				 */
+				setSize: function( size ) {
+					var needRefresh = this.tabSize !== size;
+
+					this.tabSize = size;
+					if ( needRefresh ) {
+						this.refresh();
+					}
+				},
+
+				_destroy: function() {
+					var o = this.options;
+
+					this._removeIndicator();
+
+					this.element.classList.remove( o.wrapperClass );
+				}
+			});
+
+			ns.widget.wearable.TabIndicator = TabIndicator;
+
+			engine.defineWidget(
+				"TabIndicator",
+				".ui-tab",
+				["setActive", "setSize"],
+				TabIndicator
+			);
+			}(window.document, ns));
+
+/*global window, define, Event, console */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true, plusplus: true */
+/**
+ * # SectionChanger Widget
+ * Shows a control that you can use to scroll through multiple *section*
+ * elements.
+ *
+ * The section changer widget provides an application architecture, which has
+ * multiple sections on a page and enables scrolling through the *section* elements.
+ *
+ * ## Manual constructor
+ *
+ *      @example
+ *         <div id="hasSectionchangerPage" class="ui-page">
+ *             <header class="ui-header">
+ *                 <h2 class="ui-title">SectionChanger</h2>
+ *             </header>
+ *             <div id="sectionchanger" class="ui-content">
+ *                 <!--Section changer has only one child-->
+ *                 <div>
+ *                     <section>
+ *                         <h3>LEFT1 PAGE</h3>
+ *                     </section>
+ *                     <section class="ui-section-active">
+ *                         <h3>MAIN PAGE</h3>
+ *                     </section>
+ *                     <section>
+ *                         <h3>RIGHT1 PAGE</h3>
+ *                     </section>
+ *                 </div>
+ *             </div>
+ *         </div>
+ *         <script>
+ *             (function () {
+ *                 var page = document.getElementById("hasSectionchangerPage"),
+ *                     element = document.getElementById("sectionchanger"),
+ *                     sectionChanger;
+ *
+ *                 page.addEventListener("pageshow", function () {
+ *                     // Create the SectionChanger object
+ *                     sectionChanger = new tau.SectionChanger(element, {
+ *                         circular: true,
+ *                         orientation: "horizontal",
+ *                         useBouncingEffect: true
+ *                     });
+ *                 });
+ *
+ *                 page.addEventListener("pagehide", function () {
+ *                     // Release the object
+ *                     sectionChanger.destroy();
+ *                 });
+ *             })();
+ *         </script>
+ *
+ * ## Handling Events
+ *
+ * To handle section changer events, use the following code:
+ *
+ *      @example
+ *         <script>
+ *             (function () {
+ *                 var changer = document.getElementById("sectionchanger");
+ *                 changer.addEventListener("sectionchange", function (event) {
+ *                     console.debug(event.detail.active + " section is active.");
+ *                 });
+ *             })();
+ *         </script>
+ *
+ * @class ns.widget.wearable.SectionChanger
+ * @since 2.2
+ * @extends ns.widget.BaseWidget
+ */
+(function (document, ns) {
+	
+				var Scroller = ns.widget.wearable.scroller.Scroller,
+				Gesture = ns.event.gesture,
+				engine = ns.engine,
+				utilsObject = ns.util.object,
+				utilsEvents = ns.event,
+				eventType = {
+					/**
+					 * Triggered when the section is changed.
+					 * @event sectionchange
+					 * @member ns.widget.wearable.SectionChanger
+					 */
+					CHANGE: "sectionchange"
+				};
+
+			function SectionChanger() {
+				this.options = {};
+			}
+
+			function calculateCustomLayout(direction, elements, lastIndex) {
+				var len = lastIndex !== undefined ? lastIndex : elements.length,
+					result = 0,
+					i;
+				for (i = 0; i < len; i++) {
+					result += direction === Scroller.Orientation.HORIZONTAL ? elements[i].offsetWidth : elements[i].offsetHeight;
+				}
+				return result;
+			}
+			function calculateCenter(direction, elements, index) {
+				var result = calculateCustomLayout(direction, elements, index + 1);
+				result -= direction === Scroller.Orientation.HORIZONTAL ? elements[index].offsetWidth / 2 : elements[index].offsetHeight / 2;
+				return result;
+			}
+			utilsObject.inherit(SectionChanger, Scroller, {
+				_build: function (element) {
+
+					this.tabIndicatorElement = null;
+					this.tabIndicator = null;
+
+					this.sections = null;
+					this.sectionPositions = [];
+
+					this.activeIndex = 0;
+					this.beforeIndex = 0;
+
+					this._super(element);
+					return element;
+				},
+
+				_configure : function () {
+					this._super();
+					/**
+					 * Options for widget
+					 * @property {Object} options
+					 * @property {"horizontal"|"vertical"} [options.orientation="horizontal"] Sets the section changer orientation:
+					 * @property {boolean} [options.circular=false] Presents the sections in a circular scroll fashion.
+					 * @property {boolean} [options.useBouncingEffect=false] Shows a scroll end effect on the scroll edge.
+					 * @property {string} [options.items="section"] Defines the section element selector.
+					 * @property {string} [options.activeClass="ui-section-active"] Specifies the CSS classes which define the active section element. Add the specified class (ui-section-active) to a *section* element to indicate which section must be shown first. By default, the first section is shown first.
+					 * @property {boolean} [options.fillContent=true] declare to section tag width to fill content or not.
+					 * @member ns.widget.wearable.SectionChanger
+					 */
+					this.options = utilsObject.merge(this.options, {
+						items: "section",
+						activeClass: "ui-section-active",
+						circular: false,
+						animate: true,
+						animateDuration: 100,
+						orientation: "horizontal",
+						changeThreshold: -1,
+						useTab: false,
+						fillContent: true
+					});
+				},
+
+				_init: function (element) {
+					var o = this.options,
+						scroller = this.scroller,
+						sectionLength, i, className;
+
+					scroller.style.position = "absolute";
+					this._sectionChangerWidth = element.offsetWidth;
+					this._sectionChangerHeight = element.offsetHeight;
+					this._sectionChangerHalfWidth = this._sectionChangerWidth / 2;
+					this._sectionChangerHalfHeight = this._sectionChangerHeight / 2;
+					this.orientation = o.orientation === "horizontal" ? Scroller.Orientation.HORIZONTAL : Scroller.Orientation.VERTICAL;
+
+					if (o.scrollbar === "tab") {
+						o.scrollbar = false;
+						o.useTab = true;
+					}
+
+					this.sections = typeof o.items === "string" ?
+						scroller.querySelectorAll(o.items) :
+						o.items;
+					sectionLength = this.sections.length;
+
+					if (o.circular && sectionLength < 3) {
+						throw "if you use circular option, you must have at least three sections.";
+					}
+
+					if (this.activeIndex >= sectionLength) {
+						this.activeIndex = sectionLength - 1;
+					}
+
+					for (i = 0; i < sectionLength; i++) {
+						className = this.sections[i].className;
+						if (className && className.indexOf(o.activeClass) > -1) {
+							this.activeIndex = i;
+						}
+
+						this.sectionPositions[i] = i;
+					}
+
+					this._prepareLayout();
+					this._initLayout();
+					this._super();
+					this._repositionSections(true);
+					this.setActiveSection(this.activeIndex);
+
+					// set corret options values.
+					if (!o.animate) {
+						o.animateDuration = 0;
+					}
+					if (o.changeThreshold < 0) {
+						o.changeThreshold = this._sectionChangerHalfWidth;
+					}
+
+					if (this.enabled && sectionLength > 1) {
+						this.enable();
+					} else {
+						this.disable();
+					}
+					return element;
+				},
+
+				_prepareLayout: function () {
+					var o = this.options,
+						sectionLength = this.sections.length,
+						width = this._sectionChangerWidth,
+						height = this._sectionChangerHeight,
+						orientation = this.orientation,
+						scrollerStyle = this.scroller.style,
+						tabHeight;
+
+					if (o.useTab) {
+						this._initTabIndicator();
+						tabHeight = this.tabIndicatorElement.offsetHeight;
+						height -= tabHeight;
+						this._sectionChangerHalfHeight = height / 2;
+						this.element.style.height = height + "px";
+						this._sectionChangerHeight = height;
+					}
+
+					if (orientation === Scroller.Orientation.HORIZONTAL) {
+						scrollerStyle.width = (o.fillContent ? width * sectionLength : calculateCustomLayout(orientation, this.sections)) + "px";
+						scrollerStyle.height = height + "px"; //set Scroller width
+					} else {
+						scrollerStyle.width = width + "px"; //set Scroller width
+						scrollerStyle.height = (o.fillContent ? height * sectionLength : calculateCustomLayout(orientation, this.sections)) + "px";
+					}
+
+				},
+
+				_initLayout: function () {
+					var sectionStyle = this.sections.style,
+						left = 0,
+						top = 0,
+						i, sectionLength;
+
+					//section element has absolute position
+					for (i = 0, sectionLength = this.sections.length; i < sectionLength; i++) {
+						//Each section set initialize left position
+						sectionStyle = this.sections[i].style;
+						sectionStyle.position = "absolute";
+						if (this.options.fillContent) {
+							sectionStyle.width = this._sectionChangerWidth + "px";
+							sectionStyle.height = this._sectionChangerHeight + "px";
+						}
+
+						if (this.orientation === Scroller.Orientation.HORIZONTAL) {
+							top = 0;
+							left = calculateCustomLayout(this.orientation, this.sections, i);
+						} else {
+							top = calculateCustomLayout(this.orientation, this.sections, i);
+							left = 0;
+						}
+
+						sectionStyle.top = top + "px";
+						sectionStyle.left = left + "px";
+					}
+
+				},
+
+				_initBouncingEffect: function () {
+					var o = this.options;
+					if (!o.circular) {
+						this._super();
+					}
+				},
+
+				_translateScrollbar: function (x, y, duration, autoHidden) {
+					var offset;
+
+					if (!this.scrollbar) {
+						return;
+					}
+
+					if (this.orientation === Scroller.Orientation.HORIZONTAL) {
+						offset = (-x + this.minScrollX);
+					} else {
+						offset = (-y + this.minScrollY);
+					}
+
+					this.scrollbar.translate(offset, duration, autoHidden);
+				},
+
+				_translateScrollbarWithPageIndex: function (pageIndex, duration) {
+					var offset;
+
+					if (!this.scrollbar) {
+						return;
+					}
+
+					offset = calculateCustomLayout(this.orientation, this.sections, this.activeIndex);
+
+					this.scrollbar.translate(offset, duration);
+				},
+
+				_initTabIndicator: function () {
+					var elem = this.tabIndicatorElement = document.createElement("div");
+					this.element.parentNode.insertBefore(elem, this.element);
+
+					this.tabIndicator = new engine.instanceWidget(elem, "TabIndicator");
+					this.tabIndicator.setSize(this.sections.length);
+					this.tabIndicator.setActive(this.activeIndex);
+					this.tabIndicatorHandler = function (e) {
+						this.tabIndicator.setActive(e.detail.active);
+					}.bind(this);
+					this.element.addEventListener(eventType.CHANGE, this.tabIndicatorHandler, false);
+				},
+
+				_clearTabIndicator: function () {
+					if (this.tabIndicator) {
+						this.element.parentNode.removeChild(this.tabIndicatorElement);
+						this.element.removeEventListener(eventType.CHANGE, this.tabIndicatorHandler, false);
+						this.tabIndicator.destroy();
+						this.tabIndicator = null;
+						this.tabIndicatorElement = null;
+						this.tabIndicatorHandler = null;
+					}
+				},
+
+				_resetLayout: function () {
+					var //scrollerStyle = this.scroller.style,
+						sectionStyle = this.sections.style,
+						i, sectionLength;
+
+					//scrollerStyle.width = "";
+					//scrollerStyle.height = "";
+					//this.scroller || this.scroller._resetLayout();
+
+					for (i = 0, sectionLength = this.sections.length; i < sectionLength; i++) {
+						sectionStyle = this.sections[i].style;
+
+						sectionStyle.position = "";
+						sectionStyle.width = "";
+						sectionStyle.height = "";
+						sectionStyle.top = "";
+						sectionStyle.left = "";
+					}
+
+					this._super();
+				},
+
+				_bindEvents: function () {
+					this._super();
+
+					ns.event.enableGesture(
+						this.scroller,
+
+						new ns.event.gesture.Swipe({
+							orientation: this.orientation === Scroller.Orientation.HORIZONTAL ?
+								Gesture.Orientation.HORIZONTAL :
+								Gesture.Orientation.VERTICAL
+						})
+					);
+
+					utilsEvents.on(this.scroller, "swipe webkitTransitionEnd", this);
+				},
+
+				_unbindEvents: function () {
+					this._super();
+
+					if (this.scroller) {
+						ns.event.disableGesture(this.scroller);
+						utilsEvents.off(this.scroller, "swipe webkitTransitionEnd", this);
+					}
+				},
+
+				/**
+				 * This method manages events.
+				 * @method handleEvent
+				 * @returns {Event} event
+				 * @member ns.widget.wearable.SectionChanger
+				 */
+				handleEvent: function (event) {
+					this._super(event);
+
+					switch (event.type) {
+						case "swipe":
+							this._swipe(event);
+							break;
+						case "webkitTransitionEnd":
+							this._endScroll();
+							break;
+					}
+				},
+
+				_notifyChanagedSection: function (index) {
+					var activeClass = this.options.activeClass,
+						sectionLength = this.sections.length,
+						i=0, section;
+
+					for (i=0; i < sectionLength; i++) {
+						section = this.sections[i];
+						section.classList.remove(activeClass);
+						if (i === this.activeIndex) {
+							section.classList.add(activeClass);
+						}
+					}
+
+					this._fireEvent(eventType.CHANGE, {
+						active: index
+					});
+				},
+
+				/**
+				 * Changes the currently active section element.
+				 * @method setActiveSection
+				 * @param {number} index
+				 * @param {number} duration For smooth scrolling,
+				 * the duration parameter must be in milliseconds.
+				 * @member ns.widget.wearable.SectionChanger
+				 */
+				setActiveSection: function (index, duration) {
+					var position = this.sectionPositions[ index ],
+						scrollbarDuration = duration,
+						oldActiveIndex = this.activeIndex,
+						newX=0,
+						newY= 0,
+						centerX = 0,
+						centerY = 0;
+
+					if (this.orientation === Scroller.Orientation.HORIZONTAL) {
+						newX = -calculateCenter(this.orientation, this.sections, position);
+					} else {
+						newY = -calculateCenter(this.orientation, this.sections, position);
+					}
+
+					if (this.beforeIndex - index > 1 || this.beforeIndex - index < -1) {
+						scrollbarDuration = 0;
+					}
+
+					this.activeIndex = index;
+					this.beforeIndex = this.activeIndex;
+
+					if (newX !== this.scrollerOffsetX || newY !== this.scrollerOffsetY) {
+						if (this.orientation === Scroller.Orientation.HORIZONTAL) {
+							centerX = this._sectionChangerHalfWidth + newX;
+						} else {
+							centerY = this._sectionChangerHalfHeight + newY;
+						}
+
+						this._translate(centerX, centerY, duration);
+						this._translateScrollbarWithPageIndex(index, scrollbarDuration);
+					} else {
+						this._endScroll();
+					}
+
+					// notify changed section.
+					if (this.activeIndex !== oldActiveIndex) {
+						this._notifyChanagedSection(this.activeIndex);
+					}
+				},
+
+				/**
+				 * Gets the currently active section element's index.
+				 * @method getActiveSectionIndex
+				 * @returns {number}
+				 * @member ns.widget.wearable.SectionChanger
+				 */
+				getActiveSectionIndex: function () {
+					return this.activeIndex;
+				},
+
+				_start: function (e) {
+					this._super(e);
+
+					this.beforeIndex = this.activeIndex;
+				},
+
+				_move: function (e) {
+					var changeThreshold = this.options.changeThreshold,
+						delta = this.orientation === Scroller.Orientation.HORIZONTAL ? e.detail.deltaX : e.detail.deltaY,
+						oldActiveIndex = this.activeIndex;
+
+					this._super(e);
+
+					if (!this.scrolled) {
+						return;
+					}
+
+					if (delta > changeThreshold) {
+						this.activeIndex = this._calculateIndex(this.beforeIndex - 1);
+					} else if (delta < -changeThreshold) {
+						this.activeIndex = this._calculateIndex(this.beforeIndex + 1);
+					} else {
+						this.activeIndex = this.beforeIndex;
+					}
+
+					// notify changed section.
+					if (this.activeIndex !== oldActiveIndex) {
+						this._notifyChanagedSection(this.activeIndex);
+					}
+				},
+
+				_end: function (/* e */) {
+					if ( this.scrollbar ) {
+						this.scrollbar.end();
+					}
+
+					if (!this.enabled || this.scrollCanceled || !this.dragging) {
+						return;
+					}
+
+					// bouncing effect
+					if (this.bouncingEffect) {
+						this.bouncingEffect.dragEnd();
+					}
+
+					this.setActiveSection(this.activeIndex, this.options.animateDuration);
+					this.dragging = false;
+				},
+
+				_swipe: function (e) {
+					var offset = e.detail.direction === Gesture.Direction.UP || e.detail.direction === Gesture.Direction.LEFT ? 1 : -1,
+						newIndex = this._calculateIndex(this.beforeIndex + offset);
+
+					if (!this.enabled || this.scrollCanceled || !this.dragging) {
+						return;
+					}
+
+					// bouncing effect
+					if (this.bouncingEffect) {
+						this.bouncingEffect.dragEnd();
+					}
+
+					if (this.activeIndex !== newIndex) {
+						this.activeIndex = newIndex;
+						this._notifyChanagedSection(newIndex);
+					}
+
+					this.setActiveSection(newIndex, this.options.animateDuration);
+					this.dragging = false;
+				},
+
+				_endScroll: function () {
+					if (!this.enabled || !this.scrolled || this.scrollCanceled) {
+						return;
+					}
+
+					this._repositionSections();
+					this._super();
+				},
+
+				_repositionSections: function (init) {
+					// if developer set circular option is true, this method used when webkitTransitionEnd event fired
+					var sectionLength = this.sections.length,
+						curPosition = this.sectionPositions[this.activeIndex],
+						centerPosition = window.parseInt(sectionLength/2, 10),
+						circular = this.options.circular,
+						centerX = 0,
+						centerY = 0,
+						i, sectionStyle, sIdx, top, left, newX, newY;
+
+					if (this.orientation === Scroller.Orientation.HORIZONTAL) {
+						newX = -(calculateCenter(this.orientation, this.sections, (circular ? centerPosition : this.activeIndex)));
+						newY = 0;
+					} else {
+						newX = 0;
+						newY = -(calculateCenter(this.orientation, this.sections, (circular ? centerPosition : this.activeIndex)));
+					}
+
+					this._translateScrollbarWithPageIndex(this.activeIndex);
+
+					if (init || (curPosition === 0 || curPosition === sectionLength - 1)) {
+
+						if (this.orientation === Scroller.Orientation.HORIZONTAL) {
+							centerX = this._sectionChangerHalfWidth + newX;
+						} else {
+							centerY = this._sectionChangerHalfHeight + newY;
+						}
+						this._translate(centerX, centerY);
+
+						if (circular) {
+							for (i = 0; i < sectionLength; i++) {
+								sIdx = (sectionLength + this.activeIndex - centerPosition + i) % sectionLength;
+								sectionStyle = this.sections[ sIdx ].style;
+
+								this.sectionPositions[sIdx] = i;
+
+								if (this.orientation === Scroller.Orientation.HORIZONTAL) {
+									top = 0;
+									left = calculateCustomLayout(this.orientation, this.sections, i);
+								} else {
+									top = calculateCustomLayout(this.orientation, this.sections, i);
+									left = 0;
+								}
+
+								sectionStyle.top = top + "px";
+								sectionStyle.left = left + "px";
+							}
+						}
+					}
+				},
+
+				_calculateIndex: function (newIndex) {
+					var sectionLength = this.sections.length;
+
+					if (this.options.circular) {
+						newIndex = (sectionLength + newIndex) % sectionLength;
+					} else {
+						newIndex = newIndex < 0 ? 0 : (newIndex > sectionLength - 1 ? sectionLength - 1 : newIndex);
+					}
+
+					return newIndex;
+				},
+
+				_clear: function () {
+					this._clearTabIndicator();
+					this._super();
+					this.sectionPositions.length = 0;
+				}
+			});
+
+			ns.widget.wearable.SectionChanger = SectionChanger;
+
+			engine.defineWidget(
+				"SectionChanger",
+				".scroller",
+				["getActiveSectionIndex", "setActiveSection"],
+				SectionChanger
+			);
+			}(window.document, ns));
+
+/*global window, define */
+/*jslint nomen: true, plusplus: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #VirtualGrid Widget
+ * Widget creates special grid which can contain big number of items.
+ *
+ * @class ns.widget.wearable.VirtualGrid
+ * @since 2.3
+ * @extends ns.widget.wearable.VirtualListview
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Krzysztof Antoszek <k.antoszek@samsung.com>
+ * @author Piotr Karny <p.karny@samsung.com>
+ */
+(function (window, document, ns) {
+	
+				/**
+			 * Alias for {@link ns.widget.wearable.VirtualListview}
+			 * @property {Object} VirtualList
+			 * @member ns.widget.wearable.VirtualGrid
+			 * @private
+			 * @static
+			 */
+			var VirtualList = ns.widget.wearable.VirtualListview,
+				/**
+				 * Alias for class {@link ns.engine}
+				 * @property {Object} engine
+				 * @member ns.widget.wearable.VirtualGrid
+				 * @private
+				 * @static
+				 */
+				engine = ns.engine,
+				/**
+				 * Alias for class {@link ns.util.DOM}
+				 * @property {Object} DOM
+				 * @member ns.widget.wearable.VirtualGrid
+				 * @private
+				 * @static
+				 */
+				DOM = ns.util.DOM,
+				/**
+				 * Constans for horizontal virtual grid
+				 * @property {string} HORIZONTAL="x"
+				 * @private
+				 * @member ns.widget.wearable.VirtualGrid
+				 * @static
+				 */
+				HORIZONTAL = "x",
+				/**
+				 * Constans for vertical virtual grid
+				 * @property {string} VERTICAL="y"
+				 * @private
+				 * @member ns.widget.wearable.VirtualGrid
+				 * @static
+				 */
+				VERTICAL = "y",
+				/**
+				 * Alias for class VirtualGrid
+				 * @method VirtualGrid
+				 * @member ns.widget.wearable.VirtualGrid
+				 * @private
+				 * @static
+				 */
+				VirtualGrid = function () {
+					/**
+					 * Object with default options
+					 * @property {Object} options
+					 * @property {number} [options.bufferSize=100] Element count in buffer
+					 * @property {number} [options.dataLength=0] Element count in list
+					 * @property {"x"|"y"} [options.orientation="y"] Orientation : horizontal ("x"), vertical ("y")
+					 * @member ns.widget.wearable.VirtualGrid
+					 */
+					this.options = {
+						bufferSize: 100,
+						dataLength: 0,
+						orientation: VERTICAL,
+						/**
+						 * Method which modifies list item, depended at specified index from database.
+						 * @method options.listItemUpdater
+						 * @param {HTMLElement} element List item to be modified.
+						 * @param {number} index Index of data set.
+						 * @member ns.widget.wearable.VirtualGrid
+						 */
+						listItemUpdater: function () {
+							return null;
+						}
+					};
+					return this;
+				},
+
+				prototype = new VirtualList(),
+				/**
+				 * Alias for VirtualList prototype
+				 * @property {Object} VirtualListPrototype
+				 * @member ns.widget.wearable.VirtualGrid
+				 * @private
+				 * @static
+				 */
+				VirtualListPrototype = VirtualList.prototype,
+				/**
+				 * Alias for {@link ns.widget.wearable.VirtualListview#draw VirtualList.draw}
+				 * @method parent_draw
+				 * @member ns.widget.wearable.VirtualGrid
+				 * @private
+				 * @static
+				 */
+				parent_draw = VirtualListPrototype.draw,
+				/**
+				 * Alias for {@link ns.widget.wearable.VirtualListview#_refreshScrollbar VirtualList.\_refreshScrollbar}
+				 * @method parent_refreshScrollbar
+				 * @member ns.widget.wearable.VirtualGrid
+				 * @private
+				 * @static
+				 */
+				parent_refreshScrollbar = VirtualListPrototype._refreshScrollbar;
+
+			/**
+			 * This method draws item.
+			 * @method draw
+			 * @member ns.widget.wearable.VirtualGrid
+			 */
+			prototype.draw = function () {
+				var self = this,
+					element = self.element,
+					ui = self.ui,
+					newDiv = null,
+					newDivStyle = null;
+
+				if (self.options.orientation === HORIZONTAL) {
+					newDiv = document.createElement("div");
+					newDivStyle = newDiv.style;
+					element.parentNode.appendChild(newDiv);
+					newDiv.appendChild(element);
+					newDiv.appendChild(ui.spacer);
+					newDivStyle.width = "10000px";
+					newDivStyle.height = "100%";
+					ui.container = newDiv;
+				}
+				self._initListItem();
+				parent_draw.call(self);
+			};
+
+			/**
+			 * Sets proper scrollbar size: width (horizontal)
+			 * @method _refreshScrollbar
+			 * @protected
+			 * @member ns.widget.wearable.VirtualGrid
+			 */
+			prototype._refreshScrollbar = function () {
+				var width = 0,
+					ui = this.ui;
+				parent_refreshScrollbar.call(this);
+				if (ui.container) {
+					width = this.element.clientWidth + ui.spacer.clientWidth;
+					ui.container.style.width = width + "px";
+				}
+			};
+
+			/**
+			 * Initializes list item
+			 * @method _initListItem
+			 * @protected
+			 * @member ns.widget.wearable.VirtualGrid
+			 */
+			prototype._initListItem = function () {
+				var self = this,
+					thisElement = self.element,
+					element = document.createElement("div"),
+					rowElement = document.createElement("div"),
+					elementStyle = element.style,
+					orientation = self.options.orientation,
+					thisElementStyle = thisElement.style,
+					rowElementStyle = rowElement.style;
+
+				elementStyle.overflow = "hidden";
+				rowElement.style.overflow = "hidden";
+				thisElement.appendChild(rowElement);
+				rowElement.appendChild(element);
+				self.options.listItemUpdater(element, 0);
+
+				if (orientation === VERTICAL) {
+					thisElementStyle.overflowY = "auto";
+					thisElementStyle.overflowX = "hidden";
+					rowElementStyle.overflow = "hidden";
+					element.style.float = "left";
+					self._cellSize = DOM.getElementWidth(element);
+					self._columnsCount = Math.floor(DOM.getElementWidth(thisElement) / self._cellSize);
+				} else {
+					thisElementStyle.overflowX = "auto";
+					thisElementStyle.overflowY = "hidden";
+					rowElementStyle.overflow = "hidden";
+					rowElementStyle.float = "left";
+					thisElementStyle.height = "100%";
+					rowElementStyle.height = "100%";
+					self._cellSize = DOM.getElementHeight(element);
+					self._columnsCount = Math.floor(DOM.getElementHeight(thisElement) / self._cellSize);
+				}
+				thisElement.removeChild(rowElement);
+				self.options.originalDataLength = self.options.dataLength;
+				self.options.dataLength /= self._columnsCount;
+			};
+
+			/**
+			 * Updates list item with data using defined template
+			 * @method _updateListItem
+			 * @param {HTMLElement} element List element to update
+			 * @param {number} index Data row index
+			 * @protected
+			 * @member ns.widget.wearable.VirtualGrid
+			 */
+			prototype._updateListItem = function (element, index) {
+				var elementI,
+					i,
+					count,
+					elementStyle = element.style,
+					options = this.options,
+					elementIStyle,
+					size;
+				element.innerHTML = "";
+				elementStyle.overflow = "hidden";
+				elementStyle.position = "relative";
+				if (options.orientation === HORIZONTAL) {
+					elementStyle.height = "100%";
+				}
+				count = this._columnsCount;
+				size = (100 / count);
+				for (i = 0; i < count; i++) {
+					elementI = document.createElement("div");
+					elementIStyle = elementI.style;
+					elementIStyle.overflow = "hidden";
+
+					if (options.orientation === VERTICAL) {
+						elementI.style.float = "left";
+						elementI.style.width = size + "%";
+					} else {
+						elementI.style.height = size + "%";
+					}
+
+					if (count * index + i < options.originalDataLength) {
+						this.options.listItemUpdater(elementI, count * index + i);
+					}
+					element.appendChild(elementI);
+				}
+			};
+
+			VirtualGrid.prototype = prototype;
+
+			ns.widget.wearable.VirtualGrid = VirtualGrid;
+
+			engine.defineWidget(
+				"VirtualGrid",
+				".ui-virtualgrid",
+				[],
+				VirtualGrid
+			);
+
+			}(window, window.document, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true */
+/**
+ * # SnapListview Widget
+ * Shows a snap list view.
+ * It detects center-positioned list item when scroll end. When scroll event started, SnapListview trigger *scrollstart* event, and scroll event ended, it trigger *scrollend* event.
+ * When scroll ended and it attach class to detected item.
+ *
+ * ## Default selectors
+ *
+ * Default selector for snap listview widget is class *ui-snap-listview*.
+ *
+ * To add a list widget to the application, use the following code:
+ *
+ * ### List with basic items
+ *
+ * You can add a basic list widget as follows:
+ *
+ *      @example
+ *         <ul class="ui-listview ui-snap-listview">
+ *             <li>1line</li>
+ *             <li>2line</li>
+ *             <li>3line</li>
+ *             <li>4line</li>
+ *             <li>5line</li>
+ *         </ul>
+ *
+ * ## JavaScript API
+ *
+ * There is no JavaScript API.
+ *
+ * @author Heeju Joo <heeju.joo@samsung.com>
+ * @class ns.widget.wearable.SnapListview
+ * @extends ns.widget.BaseWidget
+ */
+(function(document, ns) {
+	
+				var BaseWidget = ns.widget.BaseWidget,
+				/**
+				 * Alias for class ns.engine
+				 * @property {ns.engine} engine
+				 * @member ns.widget.wearable.SnapListview
+				 * @private
+				 */
+				engine = ns.engine,
+				/**
+				 * Alias for class ns.event
+				 * @property {ns.event} utilEvent
+				 * @member ns.widget.wearable.SnapListview
+				 * @private
+				 */
+				utilEvent = ns.event,
+				/**
+				 * Alias for class ns.util.DOM
+				 * @property {ns.util.DOM} doms
+				 * @member ns.widget.wearable.SnapListview
+				 * @private
+				 */
+				doms = ns.util.DOM,
+				/**
+				 * Alias for class ns.util.selectors
+				 * @property {ns.util.selectors} utilSelector
+				 * @member ns.widget.wearable.SnapListview
+				 * @private
+				 */
+				utilSelector = ns.util.selectors,
+
+
+				eventType = {
+					/**
+					 * Dictionary for SnapListview related events.
+					 * @event scrollstart
+					 * @event scrollend
+					 * @event selected
+					 * @member ns.widget.wearable.SnapListview
+					 */
+					SCROLL_START: "scrollstart",
+					SCROLL_END: "scrollend",
+					SELECTED: "selected"
+				},
+
+				SnapListview = function() {
+					var self = this;
+
+					self._ui = {
+						page: null,
+						scrollableParent: null,
+						childItems: {}
+					};
+
+					self.options = {};
+
+					self._callbacks = {};
+					self._timer = null;
+					self._isScrollStarted = false;
+					self._selectedIndex = null;
+				},
+
+				prototype = new BaseWidget(),
+
+				rotaryDirection = {
+					// right rotary direction
+					CW: "CW",
+					// left rotary direction
+					CCW: "CCW"
+				},
+
+				CLASSES_PREFIX = "ui-snap-listview",
+
+				classes = {
+					SNAP_LISTVIEW: CLASSES_PREFIX,
+					SNAP_LISTVIEW_SELECTED: CLASSES_PREFIX + "-selected"
+				},
+
+				// time threshold for detect scroll end
+				SCROLL_END_TIME_THRESHOLD = 300;
+
+			SnapListview.classes = classes;
+
+			function removeSelectedClass(self) {
+				var selectedIndex = self._selectedIndex;
+
+				if (selectedIndex !== null) {
+					self._ui.childItems[selectedIndex].classList.remove(classes.SNAP_LISTVIEW_SELECTED);
+				}
+			}
+
+			function scrollEndHandler(self) {
+				var ui = self._ui,
+					listItems = ui.childItems,
+					scrollableElement = ui.scrollableParent,
+					scrollableElementScrollTop = scrollableElement.scrollTop,
+					scrollableElementOffsetHeight = scrollableElement.offsetHeight,
+					scrollElementCenter = scrollableElementScrollTop + scrollableElementOffsetHeight/2,
+					listItemLength = listItems.length,
+					i,
+					tempListItem;
+
+				self._isScrollStarted = false;
+
+				// trigger "scrollend" event
+				utilEvent.trigger(self._ui.scrollableParent, eventType.SCROLL_END);
+
+				for (i=0 ; i < listItemLength; i++) {
+					tempListItem = listItems[i];
+					if ((tempListItem.itemTop < scrollElementCenter) && (tempListItem.itemBottom >= scrollElementCenter)) {
+						self._selectedIndex = i;
+						tempListItem.classList.add(classes.SNAP_LISTVIEW_SELECTED);
+
+						// trigger "selected" event
+						utilEvent.trigger(tempListItem, eventType.SELECTED);
+						break;
+					}
+				}
+			}
+
+			function scrollStartHandler(self) {
+				var scrollEndCallback = scrollEndHandler.bind(null, self);
+
+				if (!self._isScrollStarted) {
+					self._isScrollStarted = true;
+					// trigger "scrollstart" event
+					utilEvent.trigger(self._ui.scrollableParent, eventType.SCROLL_START);
+				}
+
+				self._callbacks.scrollEnd = scrollEndCallback;
+
+				window.clearTimeout(self._timer);
+				removeSelectedClass(self);
+
+				self._timer = window.setTimeout(scrollEndCallback, SCROLL_END_TIME_THRESHOLD);
+			}
+
+			function rotaryDetentHandler(self, event) {
+				var scrollableParent = self._ui.scrollableParent,
+					childItems = self._ui.childItems,
+					selectedIndex = self._selectedIndex,
+					direction = event.detail.direction,
+					selectedItemHeight;
+
+				if (scrollableParent && childItems && selectedIndex >= 0) {
+					selectedItemHeight = childItems[selectedIndex].itemHeight;
+
+					if (direction === rotaryDirection.CW && selectedIndex+1 < childItems.length) {
+						scrollableParent.scrollTop += selectedItemHeight;
+					} else if (direction === rotaryDirection.CCW && selectedIndex > 0) {
+						scrollableParent.scrollTop -= selectedItemHeight;
+					}
+				}
+			}
+
+			/* TODO: please check algorithm */
+			function getScrollableParent(element) {
+				var overflow;
+
+				while (element != document.body) {
+					overflow = doms.getCSSProperty(element, "overflow-y");
+					if (overflow === "scroll" || (overflow === "auto" && element.scrollHeight > element.clientHeight)) {
+						return element;
+					}
+					element = element.parentNode;
+				}
+
+				return null;
+			}
+
+			function initSnapListviewItemInfo(listview) {
+				var listItems = listview.children,
+					listItemLength = listItems.length,
+					i, tempListItem;
+
+				for (i=0 ; i < listItemLength; i++) {
+					tempListItem = listItems[i];
+					tempListItem.itemTop = tempListItem.offsetTop;
+					tempListItem.itemHeight = tempListItem.offsetHeight;
+					tempListItem.itemBottom = tempListItem.itemTop + tempListItem.itemHeight;
+					/* TODO: This line has to be removed when webkit snaplist issue is fixed */
+					tempListItem.classList.add("ui-snap-listview-item");
+				}
+			}
+
+			prototype._build = function(element) {
+				if (!element.classList.contains(classes.SNAP_LISTVIEW)) {
+					element.classList.add(classes.SNAP_LISTVIEW);
+				}
+
+				return element;
+			};
+
+			/**
+			 * Init SnapListview
+			 * @method _init
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @protected
+			 * @member ns.widget.wearable.SnapListview
+			 */
+			prototype._init = function(element) {
+				var self = this,
+					ui = self._ui,
+					listviewElement = element,
+					scrollStartCallback = scrollStartHandler.bind(null, self),
+					rotaryDetentCallback = rotaryDetentHandler.bind(null, self);
+
+				self._callbacks.scrollStart = scrollStartCallback;
+				self._callbacks.rotaryDetent = rotaryDetentCallback;
+
+				ui.page = utilSelector.getClosestByClass(listviewElement, "ui-page") || window;
+				ui.childItems = listviewElement.children;
+				ui.scrollableParent = getScrollableParent(listviewElement) || ui.page;
+
+				if (ui.childItems && (ui.childItems.length > 0)) {
+					initSnapListviewItemInfo(listviewElement);
+				}
+
+				// bind scroll event to scrollable parent
+				utilEvent.on(ui.scrollableParent, "scroll", scrollStartCallback);
+				// bind rotarydetent event to window
+				utilEvent.on(window, "rotarydetent", rotaryDetentCallback);
+
+				// init selectedItem
+				scrollEndHandler(self);
+
+				return element;
+			};
+
+			/**
+			 * Refresh structure
+			 * @method _refresh
+			 * @protected
+			 * @member ns.widget.wearable.SnapListview
+			 */
+			prototype._refresh = function() {
+				var self = this,
+					element = self.element,
+					ui = self._ui;
+
+				ui.scrollableParent = getScrollableParent(element) || ui.page;
+				initSnapListviewItemInfo(element);
+				scrollEndHandler(this);
+				return null;
+			};
+
+			prototype._unbindEvents = function() {
+				this._ui.scrollableParent.removeEventListener("scroll", this._callbacks.scrollStart, false);
+				window.removeEventListener("rotarydetent", this._callbacks.rotaryDetent, false);
+			};
+
+			/**
+			 * Destroy widget
+			 * @method _destroy
+			 * @protected
+			 * @member ns.widget.wearable.SnapListview
+			 */
+			prototype._destroy = function() {
+				var self = this;
+
+				self._unbindEvents();
+
+				self._ui = null;
+				self._callbacks = null;
+				self._isScrollStarted = null;
+				if (self._timer) {
+					window.clearTimeout(self._timer);
+				}
+				self._timer = null;
+				self._selectedIndex = null;
+
+				return null;
+			};
+
+			SnapListview.prototype = prototype;
+			ns.widget.wearable.SnapListview = SnapListview;
+
+			engine.defineWidget(
+				"SnapListview",
+				".ui-snap-listview",
+				[],
+				SnapListview,
+				"wearable"
+			);
+			}(window.document, ns));
+
+/*global window, define, Event, console */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true, plusplus: true */
+/**
+ * # Swipe List
+ * Shows a list where you can swipe horizontally through a list item to perform a specific task.
+ *
+ * The swipe list widget shows on the screen a list where you can swipe horizontally through a list item to activate a specific feature or perform a specific task. For example, you can swipe a contact in a contact list to call them or to open a message editor in order to write them a message.
+ *
+ * The following table describes the supported swipe list options.
+ *
+ *      @example
+ *         <div class="ui-content">
+ *             <!--List items that can be swiped-->
+ *             <ul class="ui-listview ui-swipelist-list">
+ *                 <li>Andrew</li>
+ *                 <li>Bill</li>
+ *                 <li>Christina</li>
+ *                 <li>Daniel</li>
+ *                 <li>Edward</li>
+ *                 <li>Peter</li>
+ *                 <li>Sam</li>
+ *                 <li>Tom</li>
+ *             </ul>
+ *             <!--Swipe actions-->
+ *             <div class="ui-swipelist">
+ *                 <div class="ui-swipelist-left">
+ *                     <div class="ui-swipelist-icon"></div>
+ *                     <div class="ui-swipelist-text">Calling</div>
+ *                 </div>
+ *                 <div class="ui-swipelist-right">
+ *                     <div class="ui-swipelist-icon"></div>
+ *                     <div class="ui-swipelist-text">Message</div>
+ *                 </div>
+ *             </div>
+ *         </div>
+ *         <script>
+ *             (function () {
+ *                 var page = document.getElementById("swipelist"),
+ *                         listElement = page.getElementsByClassName("ui-swipelist-list", "ul")[0],
+ *                         swipeList;
+ *                 page.addEventListener("pageshow", function () {
+ *                     // Make swipe list object
+ *                     var options = {
+ *                         left: true,
+ *                         right: true
+ *                     };
+ *                     swipeList = new tau.widget.SwipeList(listElement, options);
+ *                 });
+ *                 page.addEventListener("pagehide", function () {
+ *                     // Release object
+ *                     swipeList.destroy();
+ *                 });
+ *             })();
+ *         </script>
+ * @class ns.widget.wearable.SwipeList
+ * @since 2.2
+ * @extends ns.widget.BaseWidget
+ */
+(function (document, ns) {
+	
+				var Gesture = ns.event.gesture,
+				utilsEvents = ns.event,
+				engine = ns.engine,
+				dom = ns.util.DOM,
+				selectors = ns.util.selectors,
+
+				eventType = {
+					/**
+					 * Triggered when a left-to-right swipe is completed.
+					 * @event swipelist.left
+					 * @member ns.widget.wearable.SwipeList
+					 */
+					LEFT: "swipelist.left",
+					/**
+					 * Triggered when a right-to-left swipe is completed.
+					 * @event swipelist.right
+					 * @member ns.widget.wearable.SwipeList
+					 */
+					RIGHT: "swipelist.right"
+				},
+
+				SwipeList = function () {
+					/**
+					 * SwipeList's container.
+					 * @property {?HTMLElement} [container=null]
+					 * @member ns.widget.wearable.SwipeList
+					 */
+					this.container = null;
+
+					/**
+					 * SwipeList's element.
+					 * @property {?HTMLElement} [swipeElement=null]
+					 * @member ns.widget.wearable.SwipeList
+					 */
+					this.swipeElement = null;
+					/**
+					 * Left element of widget.
+					 * @property {?HTMLElement} [swipeLeftElement=null]
+					 * @member ns.widget.wearable.SwipeList
+					 */
+					this.swipeLeftElement = null;
+					/**
+					 * Right element of widget.
+					 * @property {?HTMLElement} [swipeRightElement=null]
+					 * @member ns.widget.wearable.SwipeList
+					 */
+					this.swipeRightElement = null;
+
+					/**
+					 * Style of SwipeList's element.
+					 * @property {?Object} [swipeElementStyle=null]
+					 * @member ns.widget.wearable.SwipeList
+					 */
+					this.swipeElementStyle = null;
+					/**
+					 * Style of left element of widget.
+					 * @property {?Object} [swipeLeftElementStyle=null]
+					 * @member ns.widget.wearable.SwipeList
+					 */
+					this.swipeLeftElementStyle = null;
+					/**
+					 * Style of right element of widget.
+					 * @property {?Object} [swipeRightElementStyle=null]
+					 * @member ns.widget.wearable.SwipeList
+					 */
+					this.swipeRightElementStyle = null;
+
+					/**
+					 * Active element of widget.
+					 * @property {?HTMLElement} [activeElement=null]
+					 * @member ns.widget.wearable.SwipeList
+					 */
+					this.activeElement = null;
+					/**
+					 * Target of swipe event.
+					 * @property {?HTMLElement} [activeTarget=null]
+					 * @member ns.widget.wearable.SwipeList
+					 */
+					this.activeTarget = null;
+
+					/**
+					 * Function calls on destroying.
+					 * @property {?Function} [resetLayoutCallback=null]
+					 * @member ns.widget.wearable.SwipeList
+					 */
+					this.resetLayoutCallback = null;
+					this.options = {};
+
+					this._interval = 0;
+
+					this._cancelled = false;
+					this._dragging = false;
+					this._animating = false;
+
+				},
+				prototype = new ns.widget.BaseWidget(),
+
+				blockEvent = function(event) {
+					event.preventDefault();
+				};
+
+			prototype._configure = function () {
+
+				/**
+				 * Options for widget
+				 * @property {Object} options
+				 * @property {boolean} [options.left=false] Set to true to allow swiping from left to right.
+				 * @property {boolean} [options.right=false] Set to true to allow swiping from right to left.
+				 * @property {number} [options.threshold=10] Define the threshold (in pixels) for the minimum swipe movement which allows the swipe action to appear.
+				 * @property {number} [options.animationThreshold=150] Define the threshold (in pixels) for the minimum swipe movement that allows a swipe animation (with a color change) to be shown. The animation threshold is usually the threshold for the next operation after the swipe.
+				 * @property {number} [options.animationDuration=200] Define the swipe list animation duration. Do not change the default value, since it has been defined to show a complete color change.
+				 * @property {number} [options.animationInterval=8] Define the swipe list animation interval. The animation is called with the requestAnimationFrame() method once every 1/60 seconds. The interval determines how many coordinates the animation proceeds between each call. The animation ends when the coordinates reach the value defined as animationDuration. This option basically allows you to control the speed of the animation.
+				 * @property {string} [options.ltrStartColor=""] Define the start color for the left-to-right swipe.
+				 * @property {string} [options.ltrEndColor=""] Define the end color for the left-to-right swipe.
+				 * @property {string} [options.rtlStartColor=""] Define the start color for the right-to-left swipe.
+				 * @property {string} [options.rtlEndColor=""] Define the end color for the right-to-left swipe.
+				 * @property {?HTMLElement} [options.container=null] Define container of widget.
+				 * @property {string} [options.swipeTarget="li"] Selector for swipe list
+				 * @property {string} [options.swipeElement=".ui-swipelist"] Selector for swipe list container
+				 * @property {string} [options.swipeLeftElement=".ui-swipelist-left"] Selector for swipe left container
+				 * @property {string} [options.swipeRightElement=".ui-swipelist-right"] Selector for swipe right container
+				 * @member ns.widget.wearable.SwipeList
+				 */
+				this.options = {
+					threshold: 10,
+					animationThreshold: 150,
+					animationDuration: 200,
+					animationInterval: 8,
+
+					container: null,
+
+					swipeTarget: "li",
+					swipeElement: ".ui-swipelist",
+					swipeLeftElement: ".ui-swipelist-left",
+					swipeRightElement: ".ui-swipelist-right",
+
+					ltrStartColor: "",
+					ltrEndColor: "",
+					rtlStartColor: "",
+					rtlEndColor: ""
+				};
+			};
+
+			prototype._init = function (element) {
+				var page = selectors.getClosestBySelector(element, "." + ns.widget.wearable.Page.classes.uiPage),
+					options = this.options,
+					swipeLeftElementBg,
+					swipeRightElementBg,
+					rgbStringRgExp = /rgb\(([0-9]+), ([0-9]+), ([0-9]+)\)/g;
+
+				if (options.container) {
+					this.container = page.querySelector(options.container);
+				} else {
+					this.container = this._findScrollableElement(this.element);
+				}
+
+				this.container.style.position = "relative";
+
+				this.swipeElement = page.querySelector(options.swipeElement);
+				this.swipeLeftElement = options.swipeLeftElement ? page.querySelector(options.swipeLeftElement) : undefined;
+				this.swipeRightElement = options.swipeRightElement ? page.querySelector(options.swipeRightElement) : undefined;
+
+				if (this.swipeElement) {
+					this.swipeElementStyle = this.swipeElement.style;
+					this.swipeElementStyle.display = "none";
+					this.swipeElementStyle.background = "transparent";
+					this.swipeElementStyle.width = this.container.offsetWidth + "px";
+					this.swipeElementStyle.height = this.container.offsetHeight + "px";
+				}
+
+				if (this.swipeLeftElement) {
+					this.swipeLeftElementStyle = this.swipeLeftElement.style;
+					this.swipeLeftElementStyle.display = "none";
+					// Get background-color value for swipe left element
+					swipeLeftElementBg = this.swipeLeftElement ? dom.getCSSProperty(this.swipeLeftElement, "background-image").match(rgbStringRgExp) : undefined;
+				}
+
+				if (this.swipeRightElement) {
+					this.swipeRightElementStyle = this.swipeRightElement.style;
+					this.swipeRightElementStyle.display = "none";
+					// Get background-color value for swipe right element
+					swipeRightElementBg = this.swipeRightElement ? dom.getCSSProperty(this.swipeRightElement, "background-image").match(rgbStringRgExp) : undefined;
+				}
+
+				
+				// Set start/end color: If user set color as option, that color will be used. If not, css based color of swipe will be used.
+				options.ltrStartColor = options.ltrStartColor || swipeLeftElementBg[0];
+				options.ltrEndColor = options.ltrEndColor || swipeLeftElementBg[1];
+				options.rtlStartColor = options.rtlStartColor || swipeRightElementBg[0];
+				options.rtlEndColor = options.rtlEndColor || swipeRightElementBg[1];
+
+				this.resetLayoutCallback = null;
+				if (this.swipeElement.parentNode !== this.container) {
+					this.resetLayoutCallback = (function (parent, nextSibling, element) {
+						return function () {
+							try {
+								if (nextSibling) {
+									parent.insertBefore(element, nextSibling);
+								} else {
+									parent.appendChild(element);
+								}
+							} catch (e) {
+								element.parentNode.removeChild(element);
+							}
+						};
+					}(this.swipeElement.parentNode, this.swipeElement.nextElementSibling, this.swipeElement));
+					this.container.appendChild(this.swipeElement);
+				}
+			};
+
+			prototype._reset = function () {
+				this.container.style.position = "";
+
+				this.swipeElementStyle.display = "";
+				this.swipeElementStyle.background = "";
+				this.swipeElementStyle.width = "";
+				this.swipeElementStyle.height = "";
+
+				this.swipeLeftElementStyle.display = "";
+				this.swipeLeftElementStyle.background = "";
+
+				this.swipeRightElementStyle.display = "";
+				this.swipeRightElementStyle.background = "";
+
+				if (this.resetLayoutCallback) {
+					this.resetLayoutCallback();
+				}
+				this._unbindEvents();
+			};
+
+			prototype._bindEvents = function () {
+
+				ns.event.enableGesture(
+					this.element,
+
+					new Gesture.Drag({
+						threshold: this.options.threshold,
+						blockVertical: true
+					}),
+
+					new Gesture.Swipe({
+						orientation: Gesture.Orientation.HORIZONTAL
+					})
+				);
+
+				utilsEvents.on(this.element, "drag dragstart dragend dragcancel swipe", this);
+				utilsEvents.on(document, "scroll touchcancel", this);
+				utilsEvents.on(this.swipeElement, "touchstart touchmove touchend", blockEvent, false);
+			};
+
+			prototype._unbindEvents = function () {
+				ns.event.disableGesture(this.element);
+
+				utilsEvents.off(this.element, "drag dragstart dragend dragcancel swipe", this);
+				utilsEvents.off(document, "scroll touchcancel", this);
+				utilsEvents.off(this.swipeElement, "touchstart touchmove touchend", blockEvent, false);
+			};
+
+			prototype.handleEvent = function (event) {
+				switch (event.type) {
+					case "dragstart":
+						this._start(event);
+						break;
+					case "drag":
+						this._move(event);
+						break;
+					case "dragend":
+						this._end(event);
+						break;
+					case "swipe":
+						this._swipe(event);
+						break;
+					case "dragcancel":
+					case "scroll":
+						this._cancel();
+						break;
+				}
+			};
+
+			prototype._translate = function (activeElementStyle, translateX, anim) {
+				var deltaX = translateX / window.innerWidth * 100,
+					self = this,
+					fromColor, toColor, prefix;
+
+				if (this.swipeLeftElement && translateX >= 0) {
+					// left
+					fromColor = self.options.ltrStartColor;
+					toColor = self.options.ltrEndColor;
+					prefix = "left";
+				} else if (this.swipeRightElement && translateX < 0) {
+					fromColor = self.options.rtlStartColor;
+					toColor = self.options.rtlEndColor;
+					prefix = "right";
+					deltaX = Math.abs(deltaX);
+				}
+
+				(function animate() {
+					activeElementStyle.background = "-webkit-linear-gradient(" + prefix + ", " + fromColor + " 0%, " + toColor + " " + deltaX + "%)";
+					if (anim && deltaX < self.options.animationDuration) {
+						self._animating = true;
+						deltaX += self.options.animationInterval;
+						window.webkitRequestAnimationFrame(animate);
+					} else if (anim && deltaX >= self.options.animationDuration) {
+						self._animating = false;
+						self._transitionEnd();
+					}
+				}());
+			};
+
+			prototype._findScrollableElement = function (elem) {
+				while ((elem.scrollHeight <= elem.offsetHeight) && (elem.scrollWidth <= elem.offsetWidth)) {
+					elem = elem.parentNode;
+				}
+				return elem;
+			};
+
+			prototype._findSwipeTarget = function (element) {
+				var selector = this.options.swipeTarget;
+
+				while (element && element.webkitMatchesSelector && !element.webkitMatchesSelector(selector)) {
+					element = element.parentNode;
+				}
+				return element;
+			};
+
+			prototype._fireEvent = function (eventName, detail) {
+				var target = this.activeTarget || this.listElement;
+				utilsEvents.trigger(target, eventName, detail);
+			};
+
+			prototype._start = function (e) {
+				var gesture = e.detail,
+					containerTop, width, height, top;
+
+				this._dragging = false;
+				this._cancelled = false;
+
+				this.activeTarget = this._findSwipeTarget(gesture.srcEvent.target);
+
+				if (this.activeTarget) {
+
+					width = this.activeTarget.offsetWidth;
+					height = this.activeTarget.offsetHeight;
+					containerTop = this.container.scrollTop;
+					top = this.activeTarget.offsetTop - containerTop;
+
+					this.swipeElementStyle.top = containerTop + "px";
+
+					if (this.swipeLeftElementStyle) {
+						this.swipeLeftElementStyle.width = width + "px";
+						this.swipeLeftElementStyle.height = height + "px";
+						this.swipeLeftElementStyle.top = top + "px";
+					}
+					if (this.swipeRightElementStyle) {
+						this.swipeRightElementStyle.width = width + "px";
+						this.swipeRightElementStyle.height = height + "px";
+						this.swipeRightElementStyle.top = top + "px";
+					}
+
+					this._dragging = true;
+				}
+			};
+
+			prototype._move = function (e) {
+				var gesture = e.detail,
+					translateX = gesture.estimatedDeltaX,
+					activeElementStyle;
+
+				if (!this._dragging || this._cancelled) {
+					return;
+				}
+
+				if (this.swipeLeftElement && (gesture.direction === Gesture.Direction.RIGHT) && translateX >= 0) {
+					if (this.swipeRightElementStyle) {
+						this.swipeRightElementStyle.display = "none";
+					}
+					this.activeElement = this.swipeLeftElement;
+					activeElementStyle = this.swipeLeftElementStyle;
+
+				} else if (this.swipeRightElement && (gesture.direction === Gesture.Direction.LEFT) && translateX < 0) {
+					if (this.swipeLeftElementStyle) {
+						this.swipeLeftElementStyle.display = "none";
+					}
+					this.activeElement = this.swipeRightElement;
+					activeElementStyle = this.swipeRightElementStyle;
+				}
+
+				if (!activeElementStyle) {
+					return;
+				}
+
+				activeElementStyle.display = "block";
+				this.swipeElementStyle.display = "block"; // wrapper element
+
+				this._translate(activeElementStyle, translateX, false);
+			};
+
+			prototype._end = function (e) {
+				var gesture = e.detail;
+
+				if (!this._dragging || this._cancelled) {
+					return;
+				}
+
+				if (this.swipeLeftElement && (gesture.estimatedDeltaX > this.options.animationThreshold)) {
+					this._fire(eventType.LEFT, e);
+				} else if (this.swipeRightElement && (gesture.estimatedDeltaX < -this.options.animationThreshold)) {
+					this._fire(eventType.RIGHT, e);
+				} else {
+					this._hide();
+				}
+
+				this._dragging = false;
+			};
+
+			prototype._swipe = function (e) {
+				var gesture = e.detail;
+
+				if (!this._dragging || this._cancelled) {
+					return;
+				}
+
+				if (this.swipeLeftElement && (gesture.direction === Gesture.Direction.RIGHT)) {
+					this._fire(eventType.LEFT, e);
+				} else if (this.swipeRightElement && (gesture.direction === Gesture.Direction.LEFT)) {
+					this._fire(eventType.RIGHT, e);
+				} else {
+					this._hide();
+				}
+
+				this._dragging = false;
+			};
+
+			prototype._fire = function (type, e) {
+				var gesture = e.detail;
+
+				if (type === eventType.LEFT) {
+					this._translate(this.swipeLeftElementStyle, gesture.estimatedDeltaX, true);
+				} else if (type === eventType.RIGHT) {
+					this._translate(this.swipeRightElementStyle, gesture.estimatedDeltaX, true);
+				}
+			};
+
+			prototype._transitionEnd = function () {
+				this._hide();
+
+				if (this.activeElement === this.swipeLeftElement) {
+					this._fireEvent(eventType.LEFT);
+				} else if (this.activeElement === this.swipeRightElement) {
+					this._fireEvent(eventType.RIGHT);
+				}
+			};
+
+			prototype._cancel = function () {
+				this._dragging = false;
+				this._cancelled = true;
+				this._hide();
+			};
+
+			prototype._hide = function () {
+				if (this.swipeElementStyle) {
+					this.swipeElementStyle.display = "none";
+				}
+
+				if (this.activeElement) {
+					this.activeElement.style.display = "none";
+				}
+			};
+
+			prototype._destroy = function () {
+				this._reset();
+
+				this.element = null;
+				this.container = null;
+				this.swipeElement = null;
+				this.swipeLeftElement = null;
+				this.swipeRightElement = null;
+
+				this.swipeElementStyle = null;
+				this.swipeLeftElementStyle = null;
+				this.swipeRightElementStyle = null;
+
+				this.activeElement = null;
+				this.activeTarget = null;
+
+				this.startX = null;
+				this.options = null;
+				this.gesture = null;
+
+				this._cancelled = null;
+				this._dragging = null;
+				this._animating = null;
+			};
+
+			SwipeList.prototype = prototype;
+
+			ns.widget.wearable.SwipeList = SwipeList;
+
+			engine.defineWidget(
+				"SwipeList",
+				".ui-swipe",
+				[],
+				SwipeList
+			);
+			}(window.document, ns));
+
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*
+ * #Scrollbar namespace
+ * Namespace with scrollbar for scroller widget.
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @class ns.widget.wearable.scroller.scrollbar
+ */
+(function (window, ns) {
+	
+				ns.widget.wearable.scroller.scrollbar = ns.widget.wearable.scroller.scrollbar || {};
+			}(window, ns));
+
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*
+ * #type namespace
+ * Namespace with types of scroll bars..
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @class ns.widget.wearable.scroller.scrollbar.type
+ */
+(function (window, ns) {
+	
+				/** @namespace ns.widget.wearable */
+			ns.widget.wearable.scroller.scrollbar.type = ns.widget.wearable.scroller.scrollbar.type || {};
+			}(window, ns));
+
+/*global window, define, Event, console, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true, plusplus: true */
+/**
+ * #Type Interface
+ * Interface for types used in scroll bar widget.
+ * @class ns.widget.wearable.scroller.scrollbar.type.interface
+ */
+(function (document, ns) {
+	
+				// scroller.start event trigger when user try to move scroller
+
+			ns.widget.wearable.scroller.scrollbar.type.interface = {
+				/**
+				 * Inserts elements end decorate.
+				 * @method insertAndDecorate
+				 * @param options
+				 * @static
+				 * @member ns.widget.wearable.scroller.scrollbar.type.interface
+				 */
+				setScrollbarLayout: function (/* options */) {
+				},
+				/**
+				 * Removes element.
+				 * @method remove
+				 * @param options
+				 * @static
+				 * @member ns.widget.wearable.scroller.scrollbar.type.interface
+				 */
+				remove: function (/* options */) {
+				},
+				/**
+				 * ...
+				 * @method start
+				 * @param scrollbarElement
+				 * @param barElement
+				 * @static
+				 * @member ns.widget.wearable.scroller.scrollbar.type.interface
+				 */
+				start: function (/* scrollbarElement, barElement */) {
+				},
+				/**
+				 * ...
+				 * @method end
+				 * @param scrollbarElement
+				 * @param barElement
+				 * @static
+				 * @member ns.widget.wearable.scroller.scrollbar.type.interface
+				 */
+				end: function (/* scrollbarElement, barElement */) {
+				},
+				/**
+				 * ...
+				 * @method offset
+				 * @param orientation
+				 * @param offset
+				 * @static
+				 * @member ns.widget.wearable.scroller.scrollbar.type.interface
+				 */
+				offset: function (/* orientation, offset  */) {
+				}
+			};
+			}(window.document, ns));
+
+/*global window, define, Event, console, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true, plusplus: true */
+/**
+ * #Bar Type
+ * Bar type support for scroll bar widget.
+ * @class ns.widget.wearable.scroller.scrollbar.type.bar
+ * @extends ns.widget.wearable.scroller.scrollbar.type.interface
+ */
+(function (document, ns) {
+	
+				// scroller.start event trigger when user try to move scroller
+			var utilsObject = ns.util.object,
+				type = ns.widget.wearable.scroller.scrollbar.type,
+				typeInterface = type.interface,
+				Scroller = ns.widget.wearable.scroller.Scroller;
+
+			type.bar = utilsObject.merge({}, typeInterface, {
+				options: {
+					animationDuration: 500
+				},
+
+				/**
+				 * @method setScrollbar
+				 * @param viewLayout
+				 * @param firstChildLayout
+				 * @param clipLayout
+				 * @static
+				 * @member ns.widget.wearable.scroller.scrollbar.type.bar
+				 */
+
+				setScrollbar: function(viewLayout, firstChildLayout, clipLayout) {
+					this._viewLayout = viewLayout;
+					this._clipLayout = clipLayout;
+					this._firstChildLayout = firstChildLayout;
+					this._ratio = clipLayout / firstChildLayout;
+				},
+
+				/**
+				 * @method getScrollbarSize
+				 * @return scrollbar size
+				 * @static
+				 * @member ns.widget.wearable.scroller.scrollbar.type.bar
+				 */
+				getScrollbarSize: function() {
+					return this._firstChildLayout / this._viewLayout * this._firstChildLayout * this._ratio;
+				},
+				/**
+				 * @method offset
+				 * @param orientation
+				 * @param offset
+				 * @static
+				 * @member ns.widget.wearable.scroller.scrollbar.type.bar
+				 */
+				offset: function( orientation, offset ) {
+					var x, y;
+
+					offset = offset * this._clipLayout / this._viewLayout;
+
+					if ( orientation === Scroller.Orientation.VERTICAL ) {
+						x = 0;
+						y = offset;
+					} else {
+						x = offset;
+						y = 0;
+					}
+
+					return {
+						x: x,
+						y: y
+					};
+				},
+
+				/**
+				 * @method start
+				 * @param scrollbarElement
+				 * @static
+				 * @member ns.widget.wearable.scroller.scrollbar.type.bar
+				 */
+				start: function( scrollbarElement/*, barElement */) {
+					var style = scrollbarElement.style,
+						duration = this.options.animationDuration;
+					style["-webkit-transition"] = "opacity " + duration / 1000 + "s ease";
+					style.opacity = 1;
+				},
+
+				/**
+				 * @method end
+				 * @param scrollbarElement
+				 * @static
+				 * @member ns.widget.wearable.scroller.scrollbar.type.bar
+				 */
+				end: function( scrollbarElement/*, barElement */) {
+					var style = scrollbarElement.style,
+						duration = this.options.animationDuration;
+					style["-webkit-transition"] = "opacity " + duration / 1000 + "s ease";
+					style.opacity = 0;
+				}
+			});
+
+			}(window.document, ns));
+
+/*global window, define, Event, console, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint nomen: true, plusplus: true */
+/**
+ * #Scroll Bar Widget
+ * Widget creates scroll bar.
+ * @class ns.widget.wearable.scroller.scrollbar.ScrollBar
+ * @extends ns.widget.BaseWidget
+ */
+(function (document, ns) {
+	
+				// scroller.start event trigger when user try to move scroller
+			var BaseWidget = ns.widget.BaseWidget,
+				engine = ns.engine,
+				prototype = new BaseWidget(),
+				utilsObject = ns.util.object,
+				selectors = ns.util.selectors,
+				scrollbarType = ns.widget.wearable.scroller.scrollbar.type,
+				Classes = {
+					wrapperClass: "ui-scrollbar-bar-type",
+					barClass: "ui-scrollbar-indicator",
+					orientationClass: "ui-scrollbar-"
+				},
+
+				Scroller = ns.widget.wearable.scroller.Scroller,
+				ScrollerScrollBar = function () {
+
+					this.wrapper = null;
+					this.barElement = null;
+
+					this.container = null;
+					this.view = null;
+
+					this.options = {};
+					this.type = null;
+
+					this.maxScroll = null;
+					this.started = false;
+					this.displayDelayTimeoutId = null;
+
+					this.lastScrollPosition = 0;
+				};
+
+			prototype._build = function (scrollElement) {
+				this.clip = scrollElement;
+				this.view = scrollElement.children[0];
+				this.firstChild = this.view.children[0];
+				return scrollElement;
+			};
+
+			prototype._configure = function () {
+				/**
+				 * @property {Object} options Options for widget
+				 * @property {boolean} [options.type=false]
+				 * @property {number} [options.displayDelay=700]
+				 * @property {"vertical"|"horizontal"} [options.orientation="vertical"]
+				 * @member ns.widget.wearable.scroller.scrollbar.ScrollBar
+				 */
+				this.options = utilsObject.merge({}, this.options, {
+					type: false,
+					displayDelay: 700,
+					orientation: Scroller.Orientation.VERTICAL
+				});
+			};
+
+			prototype._init = function () {
+				this.type = this.options.type;
+
+				if ( !this.type ) {
+					return;
+				}
+				this._createScrollbar();
+			};
+
+			prototype._bindEvents = function() {
+				document.addEventListener("visibilitychange", this);
+			};
+
+			prototype._createScrollbar = function () {
+				var orientation = this.options.orientation,
+					wrapper = document.createElement("DIV"),
+					bar = document.createElement("span"),
+					view = this.view,
+					clip = this.clip,
+					firstChild = this.firstChild,
+					type = this.type;
+
+				clip.appendChild(wrapper);
+				wrapper.appendChild(bar);
+				wrapper.classList.add(Classes.wrapperClass);
+				bar.className = Classes.barClass;
+
+				if (orientation === Scroller.Orientation.HORIZONTAL) {
+					type.setScrollbar(view.offsetWidth, firstChild.offsetWidth, clip.offsetWidth);
+					bar.style.width = type.getScrollbarSize() + "px";
+					wrapper.classList.add(Classes.orientationClass + "horizontal");
+				} else {
+					type.setScrollbar(view.offsetHeight, firstChild.offsetHeight, clip.offsetHeight);
+					bar.style.height = type.getScrollbarSize() + "px";
+					wrapper.classList.add(Classes.orientationClass + "vertical");
+				}
+
+				this.wrapper = wrapper;
+				this.barElement = bar;
+			};
+
+			prototype._removeScrollbar = function () {
+				this.clip.removeChild(this.wrapper);
+
+				this.wrapper = null;
+				this.barElement = null;
+			};
+
+			prototype._refresh = function () {
+				var self = this;
+				self._clear();
+				self._init();
+				self.translate(self.lastScrollPosition);
+			};
+
+			/**
+			 * Translates widget.
+			 * @method translate
+			 * @param offset
+			 * @param duration
+			 * @member ns.widget.wearable.scroller.scrollbar.ScrollBar
+			 */
+			prototype.translate = function (offset, duration, autoHidden) {
+				var orientation = this.options.orientation,
+					translate,
+					transition,
+					barStyle,
+					endDelay;
+
+				if ( !this.wrapper || !this.type || this.lastScrollPosition === offset ) {
+					return;
+				}
+
+				autoHidden = autoHidden !== false;
+
+				this.lastScrollPosition = offset;
+
+				offset = this.type.offset( orientation, offset );
+
+				barStyle = this.barElement.style;
+				if ( !duration ) {
+					transition = "none";
+				} else {
+					transition = "-webkit-transform " + duration / 1000 + "s ease-out";
+				}
+
+				translate = "translate3d(" + offset.x + "px," + offset.y + "px, 0)";
+
+				barStyle["-webkit-transform"] = translate;
+				barStyle["-webkit-transition"] = transition;
+
+				if ( !this.started ) {
+					this._start();
+				}
+
+				if ( this.displayDelayTimeoutId !== null ) {
+					window.clearTimeout( this.displayDelayTimeoutId );
+					this.displayDelayTimeoutId = null;
+				}
+
+				if ( autoHidden ) {
+					endDelay = ( duration || 0 ) + this.options.displayDelay;
+					this.displayDelayTimeoutId = window.setTimeout(this._end.bind(this), endDelay);
+				}
+			};
+
+			prototype.end = function () {
+				if ( !this.displayDelayTimeoutId ) {
+					this.displayDelayTimeoutId = window.setTimeout(this._end.bind(this), this.options.displayDelay);
+				}
+			};
+
+			prototype._start = function () {
+				this.type.start(this.wrapper, this.barElement);
+				this.started = true;
+			};
+
+			prototype._end = function () {
+				this.started = false;
+				this.displayDelayTimeoutId = null;
+
+				if ( this.type ) {
+					this.type.end(this.wrapper, this.barElement);
+				}
+			};
+
+			/**
+			 * Supports events.
+			 * @method handleEvent
+			 * @param event
+			 * @member ns.widget.wearable.scroller.scrollbar.ScrollBar
+			 */
+			prototype.handleEvent = function(event) {
+				var page;
+
+				switch(event.type) {
+				case "visibilitychange":
+					page = selectors.getClosestBySelector(this.clip, "." + ns.widget.wearable.Page.classes.uiPage);
+					if (document.visibilityState === "visible" && page === ns.activePage) {
+						this.refresh();
+					}
+					break;
+				}
+			};
+
+			prototype._clear = function () {
+				this._removeScrollbar();
+
+				this.started = false;
+				this.type = null;
+				this.barElement = null;
+				this.displayDelayTimeoutId = null;
+			};
+
+			prototype._destroy = function () {
+				this._clear();
+				document.removeEventListener("visibilitychange", this);
+
+				this.options = null;
+				this.clip = null;
+				this.view = null;
+			};
+
+			ScrollerScrollBar.prototype = prototype;
+
+			ns.widget.wearable.scroller.scrollbar.ScrollBar = ScrollerScrollBar;
+
+			engine.defineWidget(
+				"ScrollBar",
+				"",
+				["translate"],
+				ScrollerScrollBar
+			);
+			}(window.document, ns));
+
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #PageIndicator Widget
+ * Widget create dots page indicator.
+ * @class ns.widget.wearable.PageIndicator
+ * @extends ns.widget.BaseWidget
+ */
+(function (document, ns) {
+	
+				var BaseWidget = ns.widget.BaseWidget,
+				engine = ns.engine,
+
+				PageIndicator = function () {
+					var self = this;
+					self._activeIndex = null;
+					self.options = {};
+				},
+				classes = {
+					indicator: "ui-page-indicator",
+					indicatorActive: "ui-page-indicator-active",
+					indicatorItem: "ui-page-indicator-item"
+				},
+				prototype = new BaseWidget();
+
+			PageIndicator.classes = classes;
+
+			prototype._configure = function () {
+				/**
+				 * Options for widget.
+				 * @property {Object} options
+				 * @property {number} [options.maxPage=5] Maximum number of indicator dots.
+				 * @property {number} [options.numberOfPages=null] Number of pages to be linked to PageIndicator.
+				 * @member ns.widget.wearable.PageIndicator
+				 */
+				this.options = {
+					maxPage: 5,
+					numberOfPages: null
+				};
+			};
+
+			/**
+			 * Build PageIndicator
+			 * @method _build
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @protected
+			 * @member ns.widget.wearable.PageIndicator
+			 */
+			prototype._build = function (element) {
+				this._createIndicator(element);
+				return element;
+			};
+
+			/**
+			 * Create HTML elements for PageIndicator
+			 * @method _createIndicator
+			 * @param {HTMLElement} element
+			 * @protected
+			 * @member ns.widget.wearable.PageIndicator
+			 */
+			prototype._createIndicator = function (element) {
+				var self = this,
+					i,
+					len,
+					span,
+					options = self.options;
+
+				if(options.numberOfPages === null) {
+					ns.error("build error: numberOfPages is null");
+					return;
+				}
+
+				len = options.numberOfPages < options.maxPage ? options.numberOfPages : options.maxPage;
+
+				for(i = 0; i < len; i++) {
+					span = document.createElement("span");
+					span.classList.add(classes.indicatorItem);
+
+					if (i === self._activeIndex) {
+						span.classList.add(classes.indicatorActive);
+					}
+					element.appendChild(span);
+				}
+			};
+
+			/**
+			 * Remove contents of HTML elements for PageIndicator
+			 * @method _removeIndicator
+			 * @param {HTMLElement} element
+			 * @protected
+			 * @member ns.widget.wearable.PageIndicator
+			 */
+			prototype._removeIndicator =  function (element) {
+				element.textContent = "";
+			};
+
+			/**
+			 * This method sets a dot to active state.
+			 * @method setActive
+			 * @param {number} index to be active state.
+			 * @member ns.widget.wearable.PageIndicator
+			 */
+			prototype.setActive = function (position) {
+				var self = this,
+					i,
+					len,
+					dotIndex = position,
+					elPageIndicatorItems = self.element.children,
+					maxPage = self.options.maxPage,
+					numberOfPages = self.options.numberOfPages,
+					middle = window.parseInt(maxPage/2, 10),
+					numberOfCentralDotPages = 0,
+					indicatorActive = classes.indicatorActive;
+
+				self._activeIndex = position;
+
+				if(numberOfPages > maxPage) {
+					len = maxPage;
+					numberOfCentralDotPages = numberOfPages - maxPage;
+				} else if(numberOfPages === null) {
+					ns.error("setActive error: numberOfPages is null");
+					return;
+				} else if(numberOfPages === 0) {
+					return;
+				} else {
+					len = numberOfPages;
+				}
+
+				for(i = 0; i < len; i++) {
+					elPageIndicatorItems[i].classList.remove(indicatorActive);
+				}
+
+				if ((middle < position) && (position <= (middle + numberOfCentralDotPages))) {
+					dotIndex = middle;
+				} else if (position > (middle + numberOfCentralDotPages)) {
+					dotIndex = position - numberOfCentralDotPages;
+				}
+
+				elPageIndicatorItems[dotIndex].classList.add(indicatorActive);
+			};
+
+			/**
+			 * Refresh widget structure
+			 * @method _refresh
+			 * @protected
+			 * @member ns.widget.wearable.PageIndicator
+			 */
+			prototype._refresh = function () {
+				var self = this;
+				self._removeIndicator(self.element);
+				self._createIndicator(self.element);
+			};
+
+			/**
+			 * Destroy widget
+			 * @method _destroy
+			 * @protected
+			 * @member ns.widget.wearable.PageIndicator
+			 */
+			prototype._destroy = function () {
+				this._removeIndicator(this.element);
+			};
+
+			PageIndicator.prototype = prototype;
+
+			// definition
+			ns.widget.wearable.PageIndicator = PageIndicator;
+			engine.defineWidget(
+				"PageIndicator",
+				".ui-page-indicator",
+				["setActive"],
+				PageIndicator,
+				"wearable"
+			);
+			}(window.document, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint plusplus: true, nomen: true */
+/**
+ * @class tau.helper
+ * @author Heeju Joo <heeju.joo@samsung.com>
+ */
+(function (ns) {
+    
+                ns.helper = ns.helper || {};
+            }(ns));
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #SnapListMarqueeStyle Helper Script
+ * Helper script using SnapListview and Marquee.
+ * @class ns.helper.SnapListMarqueeStyle
+ * @author Heeju Joo <heeju.joo@samsung.com>
+ */
+(function (document, window, ns) {
+	
+				var engine = ns.engine,
+				objectUtils = ns.util.object,
+				defaults = {
+					marqueeDelay: 0
+				},
+
+				SnapListMarqueeStyle = function (listDomElement, options) {
+					var self = this;
+
+					self.options = objectUtils.merge({}, defaults);
+					self._snapListviewWidget = null;
+					self._selectedMarqueeWidget = null;
+					self._callbacks = {};
+
+
+					self.init(listDomElement, options);
+				},
+
+				prototype = SnapListMarqueeStyle.prototype;
+
+			function destroyMarqueeWidget(self) {
+				if (self._selectedMarqueeWidget) {
+					self._selectedMarqueeWidget.destroy();
+					self._selectedMarqueeWidget = null;
+				}
+			}
+
+			function touchStartHandler() {
+				destroyMarqueeWidget(this);
+			}
+
+			function selectedHandler(e) {
+				var self = this,
+					marquee = e.target.querySelector(".ui-marquee");
+
+				destroyMarqueeWidget(self);
+
+				if (marquee) {
+					self._selectedMarqueeWidget = engine.instanceWidget(marquee, "Marquee", {
+						delay: self.options.marqueeDelay,
+						autoRun: false
+					});
+					self._selectedMarqueeWidget.start();
+				}
+			}
+
+			prototype.init = function(listDomElement, options) {
+				var self = this;
+
+				objectUtils.fastMerge(self.options, options);
+
+				// create SnapListview widget
+				self._snapListviewWidget = engine.instanceWidget(listDomElement, "SnapListview");
+				self.bindEvents();
+			};
+
+			prototype.bindEvents = function() {
+				var self = this,
+					touchStartCallback,
+					selectedCallback;
+
+				touchStartCallback = touchStartHandler.bind(self);
+				selectedCallback = selectedHandler.bind(self);
+
+				self._callbacks.touchStart = touchStartCallback;
+				self._callbacks.selected = selectedCallback;
+
+				document.addEventListener("touchstart", touchStartCallback);
+				document.addEventListener("selected", selectedCallback);
+			};
+
+			prototype.unbindEvents = function() {
+				var self = this;
+
+				document.removeEventListener("touchstart", self._callbacks.touchStart);
+				document.removeEventListener("selected", self._callbacks.selected);
+
+				self._callbacks.touchStart = null;
+				self._callbacks.selected = null;
+			};
+
+			prototype.destroy = function() {
+				var self = this;
+
+				self.unbindEvents();
+				destroyMarqueeWidget(self);
+				self._snapListviewWidget.destroy();
+
+				self.options = null;
+				self._snapListviewWidget = null;
+				self._selectedMarqueeWidget = null;
+				self._callbacks = null;
+			};
+
+			SnapListMarqueeStyle.create = function(listDomElement, options) {
+				return new SnapListMarqueeStyle(listDomElement, options);
+			};
+
+			ns.helper.SnapListMarqueeStyle = SnapListMarqueeStyle;
+			}(document, window, ns));
+
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #ExpandableHeaderMarqueeStyle Helper Script
+ * Helper script using SnapListview and Marquee.
+ * @class ns.helper.ExpandableHeaderMarqueeStyle
+ * @author Hyeoncheol Choi <hc7.choi@samsung.com>
+ */
+(function (document, window, ns) {
+	
+				var engine = ns.engine,
+				objectUtils = ns.util.object,
+				events = ns.event,
+				Marquee = ns.widget.core.Marquee,
+				ExpandableHeader = ns.widget.wearable.ExpandableHeader,
+				defaults = {
+					delay: 0,
+					marqueeStyle: "scroll",
+					ellipsisEffect: "none",
+					speed: 100,
+					interation: "infinite",
+					autoRun: false
+				},
+				Events = ExpandableHeader.events,
+				Classes = {
+					TITLE: "ui-title",
+					MARQUEE: "ui-marquee"
+				},
+
+				ExpandableHeaderMarqueeStyle = function (headerElement, options) {
+					var self = this;
+
+					self.options = objectUtils.merge({}, defaults);
+					self._expandableHeader = null;
+					self._marqueeWidget = null;
+
+					self.init(headerElement, options);
+				},
+
+				prototype = ExpandableHeaderMarqueeStyle.prototype;
+
+			function bindDragEvents(element) {
+
+				events.on(element, Events.COLLAPSE + " " + Events.COMPLETE , this, false);
+			};
+
+			function unBindDragEvents(element) {
+
+				events.off(element, Events.COLLAPSE + " " + Events.COMPLETE , this, false);
+			};
+
+			prototype.handleEvent = function(event) {
+				var self = this;
+				switch (event.type) {
+					case Events.COMPLETE:
+						self._onComplete(event);
+						break;
+					case Events.COLLAPSE:
+						self._onCollapse(event);
+						break;
+				}
+			};
+
+			prototype._onComplete = function(event) {
+				var marquee = this._marquee;
+
+				if (marquee) {
+					marquee.start();
+				}
+			};
+
+			prototype._onCollapse = function(event) {
+				var marquee = this._marquee;
+
+				if (marquee) {
+					marquee.reset();
+				}
+			};
+
+			prototype.init = function(headerElement, options) {
+				var self = this,
+					textElement,
+					scrollElement;
+
+				if (options.textElement) {
+					if (typeof options.textElement === "string") {
+						textElement = headerElement.querySelector(options.textElement);
+					} else {
+						textElement = options.textElement;
+					}
+				} else {
+					textElement = headerElement.querySelector("." + Classes.TITLE);
+				}
+
+				objectUtils.fastMerge(self.options, options);
+
+				self._element = headerElement;
+
+				self._expandableHeader = engine.instanceWidget(headerElement, "ExpandableHeader", {
+					scrollElement: options.scrollElement
+				});
+
+				if (textElement) {
+					textElement.classList.add(Classes.MARQUEE);
+					self._marquee = engine.instanceWidget(textElement, "Marquee", self.options);
+				}
+
+				self._bindEvents();
+			};
+
+			prototype._bindEvents = function() {
+				var self = this;
+
+				bindDragEvents.call(self, self._element);
+			};
+
+			prototype._unbindEvents = function() {
+				var self = this;
+
+				unBindDragEvents.call(self, self._element);
+			};
+
+			prototype.destroy = function() {
+				var self = this;
+
+				self._unbindEvents();
+				self._element = null;
+				self._expandableHeader = null;
+				self._marquee = null;
+				self._options = null;
+			};
+
+			ExpandableHeaderMarqueeStyle.create = function(headerElement, options) {
+				return new ExpandableHeaderMarqueeStyle(headerElement, options);
+			};
+
+			ns.helper.ExpandableHeaderMarqueeStyle = ExpandableHeaderMarqueeStyle;
+			}(document, window, ns));
+
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #DrawerMoreStyle Helper Script
+ * Helper script using drawer, sectionChanger.
+ * @class ns.helper.DrawerMoreStyle
+ * @author Hyeoncheol Choi <hc7.choi@samsung.com>
+ */
+(function (document, window, ns) {
+	
+				var engine = ns.engine,
+				objectUtils = ns.util.object,
+				events = ns.event,
+				selectors = ns.util.selectors,
+				Drawer = ns.widget.wearable.Drawer,
+				SectionChanger = ns.widget.wearable.SectionChanger,
+				defaults = {
+					more: ".ui-more",
+					sectionChanger: ".ui-section-changer"
+				},
+				classes = {
+					page: "ui-page",
+				},
+
+				DrawerMoreStyle = function (element, options) {
+					var self = this;
+
+					self.options = objectUtils.merge({}, defaults);
+					self._drawerWidget = null;
+					self._handlerElement = null;
+					self._sectionChangerWidget = null;
+
+					self.init(element, options);
+				},
+
+				prototype = DrawerMoreStyle.prototype;
+
+			function bindDragEvents(element) {
+
+				events.on(element, "touchstart touchend mousedown mouseup" , this, false);
+			};
+
+			function unBindDragEvents(element) {
+
+				events.off(element, "touchstart touchend mousedown mouseup" , this, false);
+			};
+
+			prototype.handleEvent = function(event) {
+				var self = this;
+				switch (event.type) {
+					case "touchstart":
+					case "mousedown":
+						self._onTouchStart(event);
+						break;
+					case "touchend":
+					case "mouseup":
+						self._onTouchEnd(event);
+						break;
+				}
+			};
+
+			prototype._onTouchStart = function(event) {
+				this._drawerWidget.transition(60);
+				event.preventDefault();
+				event.stopPropagation();
+			};
+
+			prototype._onTouchEnd = function(event) {
+				this._drawerWidget.close();
+			};
+
+			prototype.init = function(element, options) {
+				var self = this,
+					pageElement = selectors.getClosestByClass(element, classes.page),
+					handlerElement,
+					sectionChangerElement;
+
+				objectUtils.fastMerge(self.options, options);
+
+				handlerElement = pageElement.querySelector(self.options.handler);
+				sectionChangerElement = element.querySelector(self.options.sectionChanger);
+
+				self._drawerWidget = engine.instanceWidget(element, "Drawer");
+				if (handlerElement) {
+					self._drawerWidget.setDragHandler(handlerElement);
+					self._handlerElement = handlerElement;
+					self._bindEvents();
+				}
+				if (sectionChangerElement) {
+					self._sectionChangerWidget = engine.instanceWidget(sectionChangerElement, "SectionChanger", self.options);
+				}
+			};
+
+			prototype._bindEvents = function() {
+				var self = this;
+
+				bindDragEvents.call(self, self._handlerElement);
+			};
+
+			prototype._unbindEvents = function() {
+				var self = this;
+
+				unBindDragEvents.call(self, self._handlerElement);
+			};
+
+			prototype.destroy = function() {
+				var self = this;
+
+				if (self._handlerElement) {
+					self._unbindEvents();
+				}
+				self._drawerWidget = null;
+				self._handlerElement = null;
+				self._sectionChangerWidget = null;
+			};
+
+			DrawerMoreStyle.create = function(element, options) {
+				return new DrawerMoreStyle(element, options);
+			};
+
+			ns.helper.DrawerMoreStyle = DrawerMoreStyle;
+			}(document, window, ns));
+
+/*global window, define, ns */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Route Namespace
+ * Object contains rules for router.
+ *
+ * @class ns.router.route
+ */
+/*
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ */
+(function (ns) {
+	
+				ns.router.route = ns.router.route || {};
+			}(ns));
+
+/*global window, define, RegExp */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Path Utility
+ * Object helps work with paths.
+ * @class ns.util.path
+ * @static
+ * @author Tomasz Lukawski <t.lukawski@samsung.com>
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Piotr Karny <p.karny@samsung.com>
+ */
+(function (window, document, ns) {
+	
+					/**
+				* Local alias for ns.engine
+				* @property {Object} engine Alias for {@link ns.engine}
+				* @member ns.util.path
+				* @static
+				* @private
+				*/
+			var engine = ns.engine,
+				/**
+				* Local alias for ns.util.object
+				* @property {Object} utilsObject Alias for {@link ns.util.object}
+				* @member ns.util.path
+				* @static
+				* @private
+				*/
+				utilsObject = ns.util.object,
+				/**
+				* Local alias for ns.util.selectors
+				* @property {Object} utilsSelectors Alias for {@link ns.util.selectors}
+				* @member ns.util.path
+				* @static
+				* @private
+				*/
+				utilsSelectors = ns.util.selectors,
+				/**
+				* Local alias for ns.util.DOM
+				* @property {Object} utilsDOM Alias for {@link ns.util.DOM}
+				* @member ns.util.path
+				* @static
+				* @private
+				*/
+				utilsDOM = ns.util.DOM,
+				/**
+				* Cache for document base element
+				* @member ns.util.path
+				* @property {HTMLBaseElement} base
+				* @static
+				* @private
+				*/
+				base,
+				/**
+				 * location object
+				 * @property {Object} location
+				 * @static
+				 * @private
+				 * @member ns.util.path
+				 */
+				location = {},
+				path = {
+					/**
+					 * href part for mark state
+					 * @property {string} [uiStateKey="&ui-state"]
+					 * @static
+					 * @member ns.util.path
+					 */
+					uiStateKey: "&ui-state",
+
+					// This scary looking regular expression parses an absolute URL or its relative
+					// variants (protocol, site, document, query, and hash), into the various
+					// components (protocol, host, path, query, fragment, etc that make up the
+					// URL as well as some other commonly used sub-parts. When used with RegExp.exec()
+					// or String.match, it parses the URL into a results array that looks like this:
+					//
+					//	[0]: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread#msg-content
+					//	[1]: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread
+					//	[2]: http://jblas:password@mycompany.com:8080/mail/inbox
+					//	[3]: http://jblas:password@mycompany.com:8080
+					//	[4]: http:
+					//	[5]: //
+					//	[6]: jblas:password@mycompany.com:8080
+					//	[7]: jblas:password
+					//	[8]: jblas
+					//	[9]: password
+					//	[10]: mycompany.com:8080
+					//	[11]: mycompany.com
+					//	[12]: 8080
+					//	[13]: /mail/inbox
+					//	[14]: /mail/
+					//	[15]: inbox
+					//	[16]: ?msg=1234&type=unread
+					//	[17]: #msg-content
+					//
+					/**
+					* @property {RegExp} urlParseRE Regular expression for parse URL
+					* @member ns.util.path
+					* @static
+					*/
+					urlParseRE: /^(((([^:\/#\?]+:)?(?:(\/\/)((?:(([^:@\/#\?]+)(?:\:([^:@\/#\?]+))?)@)?(([^:\/#\?\]\[]+|\[[^\/\]@#?]+\])(?:\:([0-9]+))?))?)?)?((\/?(?:[^\/\?#]+\/+)*)([^\?#]*)))?(\?[^#]+)?)(#.*)?/,
+
+					/**
+					* Abstraction to address xss (Issue #4787) by removing the authority in
+					* browsers that auto decode it. All references to location.href should be
+					* replaced with a call to this method so that it can be dealt with properly here
+					* @method getLocation
+					* @param {string|Object} url
+					* @return {string}
+					* @member ns.util.path
+					*/
+					getLocation: function (url) {
+						var uri = this.parseUrl(url || window.location.href),
+							hash = uri.hash;
+						// mimic the browser with an empty string when the hash is empty
+						hash = hash === "#" ? "" : hash;
+						location = uri;
+						// Make sure to parse the url or the location object for the hash because using location.hash
+						// is autodecoded in firefox, the rest of the url should be from the object (location unless
+						// we're testing) to avoid the inclusion of the authority
+						return uri.protocol + "//" + uri.host + uri.pathname + uri.search + hash;
+					},
+
+					/**
+					* Return the original document url
+					* @method getDocumentUrl
+					* @member ns.util.path
+					* @param {boolean} [asParsedObject=false]
+					* @return {string|Object}
+					* @static
+					*/
+					getDocumentUrl: function (asParsedObject) {
+						return asParsedObject ? utilsObject.copy(path.documentUrl) : path.documentUrl.href;
+					},
+
+					/**
+					* Parse a location into a structure
+					* @method parseLocation
+					* @return {Object}
+					* @member ns.util.path
+					*/
+					parseLocation: function () {
+						return this.parseUrl(this.getLocation());
+					},
+
+					/**
+					* Parse a URL into a structure that allows easy access to
+					* all of the URL components by name.
+					* If we're passed an object, we'll assume that it is
+					* a parsed url object and just return it back to the caller.
+					* @method parseUrl
+					* @member ns.util.path
+					* @param {string|Object} url
+					* @return {Object} uri record
+					* @return {string} return.href
+					* @return {string} return.hrefNoHash
+					* @return {string} return.hrefNoSearch
+					* @return {string} return.domain
+					* @return {string} return.protocol
+					* @return {string} return.doubleSlash
+					* @return {string} return.authority
+					* @return {string} return.username
+					* @return {string} return.password
+					* @return {string} return.host
+					* @return {string} return.hostname
+					* @return {string} return.port
+					* @return {string} return.pathname
+					* @return {string} return.directory
+					* @return {string} return.filename
+					* @return {string} return.search
+					* @return {string} return.hash
+					* @static
+					*/
+					parseUrl: function (url) {
+						var matches;
+						if (typeof url === "object") {
+							return url;
+						}
+
+						matches = path.urlParseRE.exec(url || "") || [];
+
+							// Create an object that allows the caller to access the sub-matches
+							// by name. Note that IE returns an empty string instead of undefined,
+							// like all other browsers do, so we normalize everything so its consistent
+							// no matter what browser we're running on.
+						return {
+							href:		matches[0] || "",
+							hrefNoHash:   matches[1] || "",
+							hrefNoSearch: matches[2] || "",
+							domain:	matches[3] || "",
+							protocol:	matches[4] || "",
+							doubleSlash:  matches[5] || "",
+							authority:	matches[6] || "",
+							username:	matches[8] || "",
+							password:	matches[9] || "",
+							host:		matches[10] || "",
+							hostname:	matches[11] || "",
+							port:		matches[12] || "",
+							pathname:	matches[13] || "",
+							directory:	matches[14] || "",
+							filename:	matches[15] || "",
+							search:	matches[16] || "",
+							hash:		matches[17] || ""
+						};
+					},
+
+					/**
+					* Turn relPath into an asbolute path. absPath is
+					* an optional absolute path which describes what
+					* relPath is relative to.
+					* @method makePathAbsolute
+					* @member ns.util.path
+					* @param {string} relPath
+					* @param {string} [absPath=""]
+					* @return {string}
+					* @static
+					*/
+					makePathAbsolute: function (relPath, absPath) {
+						var absStack,
+							relStack,
+							directory,
+							i;
+						if (relPath && relPath.charAt(0) === "/") {
+							return relPath;
+						}
+
+						relPath = relPath || "";
+						absPath = absPath ? absPath.replace(/^\/|(\/[^\/]*|[^\/]+)$/g, "") : "";
+
+						absStack = absPath ? absPath.split("/") : [];
+						relStack = relPath.split("/");
+						for (i = 0; i < relStack.length; i++) {
+							directory = relStack[i];
+							switch (directory) {
+							case ".":
+								break;
+							case "..":
+								if (absStack.length) {
+									absStack.pop();
+								}
+								break;
+							default:
+								absStack.push(directory);
+								break;
+							}
+						}
+						return "/" + absStack.join("/");
+					},
+
+					/**
+					* Returns true if both urls have the same domain.
+					* @method isSameDomain
+					* @member ns.util.path
+					* @param {string|Object} absUrl1
+					* @param {string|Object} absUrl2
+					* @return {boolean}
+					* @static
+					*/
+					isSameDomain: function (absUrl1, absUrl2) {
+						return path.parseUrl(absUrl1).domain === path.parseUrl(absUrl2).domain;
+					},
+
+					/**
+					* Returns true for any relative variant.
+					* @method isRelativeUrl
+					* @member ns.util.path
+					* @param {string|Object} url
+					* @return {boolean}
+					* @static
+					*/
+					isRelativeUrl: function (url) {
+						// All relative Url variants have one thing in common, no protocol.
+						return path.parseUrl(url).protocol === "";
+					},
+
+					/**
+					 * Returns true for an absolute url.
+					 * @method isAbsoluteUrl
+					 * @member ns.util.path
+					 * @param {string} url
+					 * @return {boolean}
+					 * @static
+					 */
+					isAbsoluteUrl: function (url) {
+						return path.parseUrl(url).protocol !== "";
+					},
+
+					/**
+					* Turn the specified realtive URL into an absolute one. This function
+					* can handle all relative variants (protocol, site, document, query, fragment).
+					* @method makeUrlAbsolute
+					* @member ns.util.path
+					* @param {string} relUrl
+					* @param {string} absUrl
+					* @return {string}
+					* @static
+					*/
+					makeUrlAbsolute: function (relUrl, absUrl) {
+						if (!path.isRelativeUrl(relUrl)) {
+							return relUrl;
+						}
+
+						var relObj = path.parseUrl(relUrl),
+							absObj = path.parseUrl(absUrl),
+							protocol = relObj.protocol || absObj.protocol,
+							doubleSlash = relObj.protocol ? relObj.doubleSlash : (relObj.doubleSlash || absObj.doubleSlash),
+							authority = relObj.authority || absObj.authority,
+							hasPath = relObj.pathname !== "",
+							pathname = path.makePathAbsolute(relObj.pathname || absObj.filename, absObj.pathname),
+							search = relObj.search || (!hasPath && absObj.search) || "",
+							hash = relObj.hash;
+
+						return protocol + doubleSlash + authority + pathname + search + hash;
+					},
+
+					/**
+					* Add search (aka query) params to the specified url.
+					* @method addSearchParams
+					* @member ns.util.path
+					* @param {string|Object} url
+					* @param {Object|string} params
+					* @return {string}
+					*/
+					addSearchParams: function (url, params) {
+						var urlObject = path.parseUrl(url),
+							paramsString = (typeof params === "object") ? this.getAsURIParameters(params) : params,
+							searchChar = urlObject.search || "?";
+						return urlObject.hrefNoSearch + searchChar + (searchChar.charAt(searchChar.length - 1) === "?" ? "" : "&") + paramsString + (urlObject.hash || "");
+					},
+
+					/**
+					 * Add search params to the specified url with hash
+					 * @method addHashSearchParams
+					 * @member ns.util.path
+					 * @param {string|Object} url
+					 * @param {Object|string} params
+					 * @returns {string}
+					 */
+					addHashSearchParams: function (url, params) {
+						var urlObject = path.parseUrl(url),
+							paramsString = (typeof params === "object") ? path.getAsURIParameters(params) : params,
+							hash = urlObject.hash,
+							searchChar = hash ? (hash.indexOf("?") < 0 ? hash + "?" : hash + "&") : "#?";
+						return urlObject.hrefNoHash + searchChar + (searchChar.charAt(searchChar.length - 1) === "?" ? "" : "&") + paramsString;
+					},
+
+					/**
+					* Convert absolute Url to data Url
+					* - for embedded pages strips hash and paramters
+					* - for the same domain as document base remove domain
+					* otherwise returns decoded absolute Url
+					* @method convertUrlToDataUrl
+					* @member ns.util.path
+					* @param {string} absUrl
+					* @param {string} dialogHashKey
+					* @param {Object} documentBase uri structure
+					* @return {string}
+					* @static
+					*/
+					convertUrlToDataUrl: function (absUrl, dialogHashKey, documentBase) {
+						var urlObject = path.parseUrl(absUrl);
+
+						if (path.isEmbeddedPage(urlObject, dialogHashKey)) {
+							// For embedded pages, remove the dialog hash key as in getFilePath(),
+							// otherwise the Data Url won't match the id of the embedded Page.
+							return urlObject.hash.replace(/^#|\?.*$/g, "");
+						}
+						documentBase = documentBase || path.documentBase;
+						if (path.isSameDomain(urlObject, documentBase)) {
+							return urlObject.hrefNoHash.replace(documentBase.domain, "");
+						}
+
+						return window.decodeURIComponent(absUrl);
+					},
+
+					/**
+					* Get path from current hash, or from a file path
+					* @method get
+					* @member ns.util.path
+					* @param {string} newPath
+					* @return {string}
+					*/
+					get: function (newPath) {
+						if (newPath === undefined) {
+							newPath = this.parseLocation().hash;
+						}
+						return this.stripHash(newPath).replace(/[^\/]*\.[^\/*]+$/, '');
+					},
+
+					/**
+					* Test if a given url (string) is a path
+					* NOTE might be exceptionally naive
+					* @method isPath
+					* @member ns.util.path
+					* @param {string} url
+					* @return {boolean}
+					* @static
+					*/
+					isPath: function (url) {
+						return (/\//).test(url);
+					},
+
+					/**
+					* Return a url path with the window's location protocol/hostname/pathname removed
+					* @method clean
+					* @member ns.util.path
+					* @param {string} url
+					* @param {Object} documentBase  uri structure
+					* @return {string}
+					* @static
+					*/
+					clean: function (url, documentBase) {
+						return url.replace(documentBase.domain, "");
+					},
+
+					/**
+					* Just return the url without an initial #
+					* @method stripHash
+					* @member ns.util.path
+					* @param {string} url
+					* @return {string}
+					* @static
+					*/
+					stripHash: function (url) {
+						return url.replace(/^#/, "");
+					},
+
+					/**
+					* Return the url without an query params
+					* @method stripQueryParams
+					* @member ns.util.path
+					* @param {string} url
+					* @return {string}
+					* @static
+					*/
+					stripQueryParams: function (url) {
+						return url.replace(/\?.*$/, "");
+					},
+
+					/**
+					* Validation proper hash
+					* @method isHashValid
+					* @member ns.util.path
+					* @param {string} hash
+					* @static
+					*/
+					isHashValid: function (hash) {
+						return (/^#[^#]+$/).test(hash);
+					},
+
+					/**
+					* Check whether a url is referencing the same domain, or an external domain or different protocol
+					* could be mailto, etc
+					* @method isExternal
+					* @member ns.util.path
+					* @param {string|Object} url
+					* @param {Object} documentUrl uri object
+					* @return {boolean}
+					* @static
+					*/
+					isExternal: function (url, documentUrl) {
+						var urlObject = path.parseUrl(url);
+						return urlObject.protocol && urlObject.domain !== documentUrl.domain ? true : false;
+					},
+
+					/**
+					* Check if the url has protocol
+					* @method hasProtocol
+					* @member ns.util.path
+					* @param {string} url
+					* @return {boolean}
+					* @static
+					*/
+					hasProtocol: function (url) {
+						return (/^(:?\w+:)/).test(url);
+					},
+
+					/**
+					 * Check if the url refers to embedded content
+					 * @method isEmbedded
+					 * @member ns.util.path
+					 * @param {string} url
+					 * @returns {boolean}
+					 * @static
+					 */
+					isEmbedded: function (url) {
+						var urlObject = path.parseUrl(url);
+
+						if (urlObject.protocol !== "") {
+							return (!path.isPath(urlObject.hash) && !!urlObject.hash && (urlObject.hrefNoHash === path.parseLocation().hrefNoHash));
+						}
+						return (/^#/).test(urlObject.href);
+					},
+
+					/**
+					* Get the url as it would look squashed on to the current resolution url
+					* @method squash
+					* @member ns.util.path
+					* @param {string} url
+					* @param {string} [resolutionUrl=undefined]
+					* @return {string}
+					*/
+					squash: function (url, resolutionUrl) {
+						var href,
+							cleanedUrl,
+							search,
+							stateIndex,
+							isPath = this.isPath(url),
+							uri = this.parseUrl(url),
+							preservedHash = uri.hash,
+							uiState = "";
+
+						// produce a url against which we can resole the provided path
+						resolutionUrl = resolutionUrl || (path.isPath(url) ? path.getLocation() : path.getDocumentUrl());
+
+						// If the url is anything but a simple string, remove any preceding hash
+						// eg #foo/bar -> foo/bar
+						//	#foo -> #foo
+						cleanedUrl = isPath ? path.stripHash(url) : url;
+
+						// If the url is a full url with a hash check if the parsed hash is a path
+						// if it is, strip the #, and use it otherwise continue without change
+						cleanedUrl = path.isPath(uri.hash) ? path.stripHash(uri.hash) : cleanedUrl;
+
+						// Split the UI State keys off the href
+						stateIndex = cleanedUrl.indexOf(this.uiStateKey);
+
+						// store the ui state keys for use
+						if (stateIndex > -1) {
+							uiState = cleanedUrl.slice(stateIndex);
+							cleanedUrl = cleanedUrl.slice(0, stateIndex);
+						}
+
+						// make the cleanedUrl absolute relative to the resolution url
+						href = path.makeUrlAbsolute(cleanedUrl, resolutionUrl);
+
+						// grab the search from the resolved url since parsing from
+						// the passed url may not yield the correct result
+						search = this.parseUrl(href).search;
+
+						// @TODO all this crap is terrible, clean it up
+						if (isPath) {
+							// reject the hash if it's a path or it's just a dialog key
+							if (path.isPath(preservedHash) || preservedHash.replace("#", "").indexOf(this.uiStateKey) === 0) {
+								preservedHash = "";
+							}
+
+							// Append the UI State keys where it exists and it's been removed
+							// from the url
+							if (uiState && preservedHash.indexOf(this.uiStateKey) === -1) {
+								preservedHash += uiState;
+							}
+
+							// make sure that pound is on the front of the hash
+							if (preservedHash.indexOf("#") === -1 && preservedHash !== "") {
+								preservedHash = "#" + preservedHash;
+							}
+
+							// reconstruct each of the pieces with the new search string and hash
+							href = path.parseUrl(href);
+							href = href.protocol + "//" + href.host + href.pathname + search + preservedHash;
+						} else {
+							href += href.indexOf("#") > -1 ? uiState : "#" + uiState;
+						}
+
+						return href;
+					},
+
+					/**
+					* Check if the hash is preservable
+					* @method isPreservableHash
+					* @member ns.util.path
+					* @param {string} hash
+					* @return {boolean}
+					*/
+					isPreservableHash: function (hash) {
+						return hash.replace("#", "").indexOf(this.uiStateKey) === 0;
+					},
+
+					/**
+					* Escape weird characters in the hash if it is to be used as a selector
+					* @method hashToSelector
+					* @member ns.util.path
+					* @param {string} hash
+					* @return {string}
+					* @static
+					*/
+					hashToSelector: function (hash) {
+						var hasHash = (hash.substring(0, 1) === "#");
+						if (hasHash) {
+							hash = hash.substring(1);
+						}
+						return (hasHash ? "#" : "") + hash.replace(new RegExp('([!"#$%&\'()*+,./:;<=>?@[\\]^`{|}~])', 'g'), "\\$1");
+					},
+
+					/**
+					* Check if the specified url refers to the first page in the main application document.
+					* @method isFirstPageUrl
+					* @member ns.util.path
+					* @param {string} url
+					* @param {Object} documentBase uri structure
+					* @param {boolean} documentBaseDiffers
+					* @param {Object} documentUrl uri structure
+					* @return {boolean}
+					* @static
+					*/
+					isFirstPageUrl: function (url, documentBase, documentBaseDiffers, documentUrl) {
+						var urlStructure,
+							samePath,
+							firstPage,
+							firstPageId,
+							hash;
+
+						documentBase = documentBase === undefined ? path.documentBase : documentBase;
+						documentBaseDiffers = documentBaseDiffers === undefined ? path.documentBaseDiffers : documentBaseDiffers;
+						documentUrl = documentUrl === undefined ? path.documentUrl : documentUrl;
+
+						// We only deal with absolute paths.
+						urlStructure = path.parseUrl(path.makeUrlAbsolute(url, documentBase));
+
+						// Does the url have the same path as the document?
+						samePath = urlStructure.hrefNoHash === documentUrl.hrefNoHash || (documentBaseDiffers && urlStructure.hrefNoHash === documentBase.hrefNoHash);
+
+						// Get the first page element.
+						firstPage = engine.getRouter().firstPage;
+
+						// Get the id of the first page element if it has one.
+						firstPageId = firstPage ? firstPage.id : undefined;
+						hash = urlStructure.hash;
+
+						// The url refers to the first page if the path matches the document and
+						// it either has no hash value, or the hash is exactly equal to the id of the
+						// first page element.
+						return samePath && (!hash || hash === "#" || (firstPageId && hash.replace(/^#/, "") === firstPageId));
+					},
+
+					/**
+					* Some embedded browsers, like the web view in Phone Gap, allow cross-domain XHR
+					* requests if the document doing the request was loaded via the file:// protocol.
+					* This is usually to allow the application to "phone home" and fetch app specific
+					* data. We normally let the browser handle external/cross-domain urls, but if the
+					* allowCrossDomainPages option is true, we will allow cross-domain http/https
+					* requests to go through our page loading logic.
+					* @method isPermittedCrossDomainRequest
+					* @member ns.util.path
+					* @param {Object} docUrl
+					* @param {string} reqUrl
+					* @return {boolean}
+					* @static
+					*/
+					isPermittedCrossDomainRequest: function (docUrl, reqUrl) {
+						return ns.getConfig('allowCrossDomainPages', false) &&
+							docUrl.protocol === "file:" &&
+							reqUrl.search(/^https?:/) !== -1;
+					},
+
+					/**
+					* Convert a object data to URI parameters
+					* @method getAsURIParameters
+					* @member ns.util.path
+					* @param {Object} data
+					* @return {string}
+					* @static
+					*/
+					getAsURIParameters: function (data) {
+						var url = '',
+							key;
+						for (key in data) {
+							if (data.hasOwnProperty(key)) {
+								url += encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) + '&';
+							}
+						}
+						return url.substring(0, url.length - 1);
+					},
+
+					/**
+					* Document Url
+					* @member ns.util.path
+					* @property {string|null} documentUrl
+					*/
+					documentUrl: null,
+
+					/**
+					* The document base differs
+					* @member ns.util.path
+					* @property {boolean} documentBaseDiffers
+					*/
+					documentBaseDiffers: false,
+
+					/**
+					* Set location hash to path
+					* @method set
+					* @member ns.util.path
+					* @param {string} path
+					* @static
+					*/
+					set: function (path) {
+						location.hash = path;
+					},
+
+					/**
+					* Return the substring of a filepath before the sub-page key,
+					* for making a server request
+					* @method getFilePath
+					* @member ns.util.path
+					* @param {string} path
+					* @param {string} dialogHashKey
+					* @return {string}
+					* @static
+					*/
+					getFilePath: function (path, dialogHashKey) {
+						var splitkey = '&' + ns.getConfig('subPageUrlKey', '');
+						return path && path.split(splitkey)[0].split(dialogHashKey)[0];
+					},
+
+					/**
+					* Remove the preceding hash, any query params, and dialog notations
+					* @method cleanHash
+					* @member ns.util.path
+					* @param {string} hash
+					* @param {string} dialogHashKey
+					* @return {string}
+					* @static
+					*/
+					cleanHash: function (hash, dialogHashKey) {
+						return path.stripHash(hash.replace(/\?.*$/, "").replace(dialogHashKey, ""));
+					},
+
+					/**
+					* Check if url refers to the embedded page
+					* @method isEmbeddedPage
+					* @member ns.util.path
+					* @param {string} url
+					* @param {boolean} allowEmbeddedOnlyBaseDoc
+					* @return {boolean}
+					* @static
+					*/
+					isEmbeddedPage: function (url, allowEmbeddedOnlyBaseDoc) {
+						var urlObject = path.parseUrl(url);
+
+						//if the path is absolute, then we need to compare the url against
+						//both the documentUrl and the documentBase. The main reason for this
+						//is that links embedded within external documents will refer to the
+						//application document, whereas links embedded within the application
+						//document will be resolved against the document base.
+						if (urlObject.protocol !== "") {
+							return (urlObject.hash &&
+									( allowEmbeddedOnlyBaseDoc ?
+											urlObject.hrefNoHash === path.documentUrl.hrefNoHash :
+											urlObject.hrefNoHash === path.parseLocation().hrefNoHash ));
+						}
+						return (/^#/).test(urlObject.href);
+					}
+				};
+
+			path.documentUrl = path.parseLocation();
+
+			base = document.querySelector('base');
+
+			/**
+			* The document base URL for the purposes of resolving relative URLs,
+			* and the name of the default browsing context for the purposes of
+			* following hyperlinks
+			* @member ns.util.path
+			* @property {Object} documentBase uri structure
+			* @static
+			*/
+			path.documentBase = base ? path.parseUrl(path.makeUrlAbsolute(base.getAttribute("href"), path.documentUrl.href)) : path.documentUrl;
+
+			path.documentBaseDiffers = (path.documentUrl.hrefNoHash !== path.documentBase.hrefNoHash);
+
+			/**
+			* Get document base
+			* @method getDocumentBase
+			* @member ns.util.path
+			* @param {boolean} [asParsedObject=false]
+			* @return {string|Object}
+			* @static
+			*/
+			path.getDocumentBase = function (asParsedObject) {
+				return asParsedObject ? utilsObject.copy(path.documentBase) : path.documentBase.href;
+			};
+
+			/**
+			* Find the closest page and extract out its url
+			* @method getClosestBaseUrl
+			* @member ns.util.path
+			* @param {HTMLElement} element
+			* @param {string} selector
+			* @return {string}
+			* @static
+			*/
+			path.getClosestBaseUrl = function (element, selector) {
+				// Find the closest page and extract out its url.
+				var url = utilsDOM.getNSData(utilsSelectors.getClosestBySelector(element, selector), "url"),
+					baseUrl = path.documentBase.hrefNoHash;
+
+				if (!ns.getConfig('dynamicBaseEnabled', true) || !url || !path.isPath(url)) {
+					url = baseUrl;
+				}
+
+				return path.makeUrlAbsolute(url, baseUrl);
+			};
+
+			ns.util.path = path;
+			}(window, window.document, ns));
+
+/*global window, define, XMLHttpRequest */
+/*jslint nomen: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Router
+ * Main class to navigate between pages and popups in profile Wearable.
+ *
+ * @class ns.router.Router
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Piotr Karny <p.karny@samsung.com>
+ * @author Tomasz Lukawski <t.lukawski@samsung.com>
+ */
+(function (window, document, ns) {
+	
+					/**
+				 * Local alias for ns.util
+				 * @property {Object} util Alias for {@link ns.util}
+				 * @member ns.router.Router
+				 * @static
+				 * @private
+				 */
+			var util = ns.util,
+				/**
+				 * Local alias for ns.event
+				 * @property {Object} eventUtils Alias for {@link ns.event}
+				 * @member ns.router.Router
+				 * @static
+				 * @private
+				 */
+				eventUtils = ns.event,
+				/**
+				 * Alias for {@link ns.util.DOM}
+				 * @property {Object} DOM
+				 * @member ns.router.Router
+				 * @static
+				 * @private
+				 */
+				DOM = util.DOM,
+				/**
+				 * Local alias for ns.util.path
+				 * @property {Object} path Alias for {@link ns.util.path}
+				 * @member ns.router.Router
+				 * @static
+				 * @private
+				 */
+				path = util.path,
+				/**
+				 * Local alias for ns.util.selectors
+				 * @property {Object} selectors Alias for {@link ns.util.selectors}
+				 * @member ns.router.Router
+				 * @static
+				 * @private
+				 */
+				selectors = util.selectors,
+				/**
+				 * Local alias for ns.util.object
+				 * @property {Object} object Alias for {@link ns.util.object}
+				 * @member ns.router.Router
+				 * @static
+				 * @private
+				 */
+				object = util.object,
+				/**
+				 * Local alias for ns.engine
+				 * @property {Object} engine Alias for {@link ns.engine}
+				 * @member ns.router.Router
+				 * @static
+				 * @private
+				 */
+				engine = ns.engine,
+				/**
+				 * Local alias for ns.router.wearable
+				 * @property {Object} routerMicro Alias for namespace ns.router.wearable
+				 * @member ns.router.Router
+				 * @static
+				 * @private
+				 */
+				routerMicro = ns.router,
+				/**
+				 * Local alias for ns.router.wearable.history
+				 * @property {Object} history Alias for {@link ns.router.wearable.history}
+				 * @member ns.router.Router
+				 * @static
+				 * @private
+				 */
+				history = routerMicro.history,
+				/**
+				 * Local alias for ns.router.wearable.route
+				 * @property {Object} route Alias for namespace ns.router.wearable.route
+				 * @member ns.router.Router
+				 * @static
+				 * @private
+				 */
+				route = routerMicro.route,
+				/**
+				 * Local alias for document body element
+				 * @property {HTMLElement} body
+				 * @member ns.router.Router
+				 * @static
+				 * @private
+				 */
+				body = document.body,
+				/**
+				 * Alias to Array.slice method
+				 * @method slice
+				 * @member ns.router.Router
+				 * @private
+				 * @static
+				 */
+				slice = [].slice,
+
+				/**
+				 * Router locking flag
+				 * @property {boolean} [_isLock]
+				 * @member ns.router.Router
+				 * @private
+				 */
+				_isLock = false,
+
+				Page = ns.widget.wearable.Page,
+
+				Router = function () {
+					var self = this;
+
+					/**
+					 * Element of the page opened as first.
+					 * @property {?HTMLElement} [firstPage]
+					 * @member ns.router.Router
+					 */
+					self.firstPage = null;
+					/**
+					 * The container of widget.
+					 * @property {?ns.widget.wearable.PageContainer} [container]
+					 * @member ns.router.Router
+					 */
+					self.container = null;
+					/**
+					 * Settings for last open method
+					 * @property {Object} [settings]
+					 * @member ns.router.Router
+					 */
+					self.settings = {};
+				};
+
+			/**
+			 * Default values for router
+			 * @property {Object} defaults
+			 * @property {boolean} [defaults.fromHashChange = false] Sets if will be changed after hashchange.
+			 * @property {boolean} [defaults.reverse = false] Sets the direction of change.
+			 * @property {boolean} [defaults.showLoadMsg = true] Sets if message will be shown during loading.
+			 * @property {number} [defaults.loadMsgDelay = 0] Sets delay time for the show message during loading.
+			 * @property {boolean} [defaults.volatileRecord = false] Sets if the current history entry will be modified or a new one will be created.
+			 * @member ns.router.Router
+			 */
+			Router.prototype.defaults = {
+				fromHashChange: false,
+				reverse: false,
+				showLoadMsg: true,
+				loadMsgDelay: 0,
+				volatileRecord: false
+			};
+
+			/**
+			 * Find the closest link for element
+			 * @method findClosestLink
+			 * @param {HTMLElement} element
+			 * @return {HTMLElement}
+			 * @private
+			 * @static
+			 * @member ns.router.Router
+			 */
+			function findClosestLink(element) {
+				while (element) {
+					if (element.nodeType === Node.ELEMENT_NODE && element.nodeName && element.nodeName === "A") {
+						break;
+					}
+					element = element.parentNode;
+				}
+				return element;
+			}
+
+			/**
+			 * Handle event link click
+			 * @method linkClickHandler
+			 * @param {ns.router.Router} router
+			 * @param {Event} event
+			 * @private
+			 * @static
+			 * @member ns.router.Router
+			 */
+			function linkClickHandler(router, event) {
+				var link = findClosestLink(event.target),
+					href,
+					useDefaultUrlHandling,
+					options;
+
+				if (link && event.which === 1) {
+					href = link.getAttribute("href");
+					useDefaultUrlHandling = (link.getAttribute("rel") === "external") || link.hasAttribute("target");
+					if (!useDefaultUrlHandling) {
+						options = DOM.getData(link);
+						options.link = link.id;
+						router.open(href, options, event);
+						eventUtils.preventDefault(event);
+					}
+				}
+			}
+
+			/**
+			 * Handle event for pop state
+			 * @method popStateHandler
+			 * @param {ns.router.Router} router
+			 * @param {Event} event
+			 * @private
+			 * @static
+			 * @member ns.router.Router
+			 */
+			function popStateHandler(router, event) {
+				var state = event.state,
+					prevState = history.activeState,
+					rules = routerMicro.route,
+					ruleKey,
+					options,
+					to,
+					url,
+					isContinue = true,
+					reverse,
+					transition;
+
+				if (_isLock) {
+					history.disableVolatileMode();
+					history.replace(prevState, prevState.stateTitle, prevState.stateUrl);
+					return;
+				}
+
+				if (state) {
+					to = state.url;
+					reverse = history.getDirection(state) === "back";
+					transition = reverse ? ((prevState && prevState.transition) || "none") : state.transition;
+					options = object.merge({}, state, {
+						reverse: reverse,
+						transition: transition,
+						fromHashChange: true
+					});
+
+					url = path.getLocation();
+
+					for (ruleKey in rules) {
+						if (rules.hasOwnProperty(ruleKey) && rules[ruleKey].onHashChange(url, options, prevState.stateUrl)) {
+							isContinue = false;
+						}
+					}
+
+					history.setActive(state);
+
+					if (isContinue) {
+						router.open(to, options);
+					}
+				}
+			}
+
+			/**
+			 * Change page to page given in parameter "to".
+			 * @method open
+			 * @param {string|HTMLElement} to Id of page or file url or HTMLElement of page
+			 * @param {Object} [options]
+			 * @param {"page"|"popup"|"external"} [options.rel = "page"] Represents kind of link as "page" or "popup" or "external" for linking to another domain.
+			 * @param {string} [options.transition = "none"] Sets the animation used during change of page.
+			 * @param {boolean} [options.reverse = false] Sets the direction of change.
+			 * @param {boolean} [options.fromHashChange = false] Sets if will be changed after hashchange.
+			 * @param {boolean} [options.showLoadMsg = true] Sets if message will be shown during loading.
+			 * @param {number} [options.loadMsgDelay = 0] Sets delay time for the show message during loading.
+			 * @param {boolean} [options.volatileRecord = false] Sets if the current history entry will be modified or a new one will be created.
+			 * @param {boolean} [options.dataUrl] Sets if page has url attribute.
+			 * @param {?string} [options.container = null] It is used in RoutePopup as selector for container.
+			 * @member ns.router.Router
+			 */
+			Router.prototype.open = function (to, options, event) {
+				var rel = ((options && options.rel) || "page"),
+					rule = route[rel],
+					deferred = {},
+					filter,
+					self = this;
+
+				if (_isLock) {
+					return;
+				}
+
+				if (rel === "back") {
+					history.back();
+					return;
+				}
+
+				if (rule) {
+					options = object.merge(
+						{
+							rel: rel
+						},
+						this.defaults,
+						rule.option(),
+						options
+					);
+					filter = rule.filter;
+					deferred.resolve = function (options, content) {
+						rule.open(content, options, event);
+					};
+					deferred.reject = function (options) {
+						eventUtils.trigger(self.container.element, "changefailed", options);
+					};
+					if (typeof to === "string") {
+						if (to.replace(/[#|\s]/g, "")) {
+							this._loadUrl(to, options, rule, deferred);
+						}
+					} else {
+						if (to && selectors.matchesSelector(to, filter)) {
+							deferred.resolve(options, to);
+						} else {
+							deferred.reject(options);
+						}
+					}
+				} else {
+					throw new Error("Not defined router rule [" + rel + "]");
+				}
+			};
+
+			/**
+			 * Method initializes page container and builds the first page if flag autoInitializePage is set.
+			 * @method init
+			 * @param {boolean} justBuild
+			 * @member ns.router.Router
+			 */
+			Router.prototype.init = function (justBuild) {
+				var page,
+					containerElement,
+					container,
+					firstPage,
+					pages,
+					activePages,
+					location = window.location,
+					PageClasses = Page.classes,
+					uiPageClass = PageClasses.uiPage,
+					uiPageActiveClass = PageClasses.uiPageActive,
+					pageDefinition = ns.engine.getWidgetDefinition('Page') || ns.engine.getWidgetDefinition('page'),
+					self = this;
+
+				body = document.body;
+				containerElement = ns.getConfig("pageContainer") || body;
+				pages = slice.call(containerElement.querySelectorAll(pageDefinition.selector));
+				self.justBuild = justBuild;
+
+				if (ns.getConfig("autoInitializePage", true)) {
+					firstPage = containerElement.querySelector("." + uiPageActiveClass);
+					if (!firstPage) {
+						firstPage = pages[0];
+					}
+
+					if (firstPage) {
+						activePages = containerElement.querySelectorAll("." + uiPageActiveClass);
+						slice.call(activePages).forEach(function (page) {
+							page.classList.remove("." + uiPageActiveClass);
+						});
+						containerElement = firstPage.parentNode;
+					}
+
+					if (justBuild) {
+												//engine.createWidgets(containerElement, true);
+						container = engine.instanceWidget(containerElement, "pagecontainer");
+						if (firstPage) {
+							self.register(container, firstPage);
+						}
+						return;
+					}
+
+					if (location.hash) {
+						//simple check to determine if we should show firstPage or other
+						page = document.getElementById(location.hash.replace("#", ""));
+						if (page && selectors.matchesSelector(page, "." + uiPageClass)) {
+							firstPage = page;
+						}
+					}
+				}
+
+				pages.forEach(function (page) {
+					if (!DOM.getNSData(page, "url")) {
+						DOM.setNSData(page, "url", page.id || location.pathname + location.search);
+					}
+				});
+
+				container = engine.instanceWidget(containerElement, "pagecontainer");
+				self.register(container, firstPage);
+			};
+
+			/**
+			 * Method removes all events listners set by router.
+			 * @method destroy
+			 * @member ns.router.Router
+			 */
+			Router.prototype.destroy = function () {
+				var self = this;
+				window.removeEventListener("popstate", self.popStateHandler, false);
+				if (body) {
+					body.removeEventListener("pagebeforechange", this.pagebeforechangeHandler, false);
+					body.removeEventListener("vclick", self.linkClickHandler, false);
+				}
+			};
+
+			/**
+			 * Method sets container.
+			 * @method setContainer
+			 * @param {ns.widget.wearable.PageContainer} container
+			 * @member ns.router.Router
+			 */
+			Router.prototype.setContainer = function (container) {
+				this.container = container;
+			};
+
+			/**
+			 * Method returns container.
+			 * @method getContainer
+			 * @return {ns.widget.wearable.PageContainer} container of widget
+			 * @member ns.router.Router
+			 */
+			Router.prototype.getContainer = function () {
+				return this.container;
+			};
+
+			/**
+			 * Method returns ths first page.
+			 * @method getFirstPage
+			 * @return {HTMLElement} the first page
+			 * @member ns.router.Router
+			 */
+			Router.prototype.getFirstPage = function () {
+				return this.firstPage;
+			};
+
+			/**
+			 * Method registers page container and the first page.
+			 * @method register
+			 * @param {ns.widget.wearable.PageContainer} container
+			 * @param {HTMLElement} firstPage
+			 * @member ns.router.Router
+			 */
+			Router.prototype.register = function (container, firstPage) {
+				var self = this;
+				self.container = container;
+				self.firstPage = firstPage;
+
+				self.linkClickHandler = linkClickHandler.bind(null, self);
+				self.popStateHandler = popStateHandler.bind(null, self);
+
+				document.addEventListener("vclick", self.linkClickHandler, false);
+				window.addEventListener("popstate", self.popStateHandler, false);
+
+				history.enableVolatileRecord();
+				if (firstPage) {
+					self.open(firstPage, { transition: "none" });
+				}
+			};
+
+			/**
+			 * Method opens popup.
+			 * @method openPopup
+			 * @param {HTMLElement|string} to Id or HTMLElement of popup.
+			 * @param {Object} [options]
+			 * @param {string} [options.transition = "none"] Sets the animation used during change of page.
+			 * @param {boolean} [options.reverse = false] Sets the direction of change.
+			 * @param {boolean} [options.fromHashChange = false] Sets if will be changed after hashchange.
+			 * @param {boolean} [options.showLoadMsg = true] Sets if message will be shown during loading.
+			 * @param {number} [options.loadMsgDelay = 0] Sets delay time for the show message during loading.
+			 * @param {boolean} [options.volatileRecord = false] Sets if the current history entry will be modified or a new one will be created.
+			 * @param {boolean} [options.dataUrl] Sets if page has url attribute.
+			 * @param {?string} [options.container = null] It is used in RoutePopup as selector for container.
+			 * @member ns.router.Router
+			 */
+			Router.prototype.openPopup = function (to, options) {
+				this.open(to, object.fastMerge({rel: "popup"}, options));
+			};
+
+			/**
+			 * Method closes popup.
+			 * @method closePopup
+			 * @param {Object} options
+			 * @param {string=} [options.transition]
+			 * @param {string=} [options.ext= in ui-pre-in] options.ext
+			 * @member ns.router.Router
+			 */
+			Router.prototype.closePopup = function (options) {
+				var popupRoute = this.getRoute("popup");
+
+				if (popupRoute) {
+					popupRoute.close(null, options);
+				}
+			};
+
+			Router.prototype.lock = function () {
+				_isLock = true;
+			};
+
+			Router.prototype.unlock = function () {
+				_isLock = false;
+			};
+
+			/**
+			 * Load content from url
+			 * @method _loadUrl
+			 * @param {string} url
+			 * @param {Object} options
+			 * @param {"page"|"popup"|"external"} [options.rel = "page"] Represents kind of link as "page" or "popup" or "external" for linking to another domain.
+			 * @param {string} [options.transition = "none"] Sets the animation used during change of page.
+			 * @param {boolean} [options.reverse = false] Sets the direction of change.
+			 * @param {boolean} [options.fromHashChange = false] Sets if will be changed after hashchange.
+			 * @param {boolean} [options.showLoadMsg = true] Sets if message will be shown during loading.
+			 * @param {number} [options.loadMsgDelay = 0] Sets delay time for the show message during loading.
+			 * @param {boolean} [options.volatileRecord = false] Sets if the current history entry will be modified or a new one will be created.
+			 * @param {boolean} [options.dataUrl] Sets if page has url attribute.
+			 * @param {?string} [options.container = null] It is used in RoutePopup as selector for container.
+			 * @param {string} [options.absUrl] Absolute Url for content used by deferred object.
+			 * @param {Object} rule
+			 * @param {Object} deferred
+			 * @param {Function} deferred.reject
+			 * @param {Function} deferred.resolve
+			 * @member ns.router.Router
+			 * @protected
+			 */
+			Router.prototype._loadUrl = function (url, options, rule, deferred) {
+				var absUrl = path.makeUrlAbsolute(url, path.getLocation()),
+					content,
+					request,
+					detail = {},
+					self = this;
+
+				content = rule.find(absUrl);
+
+				if (!content && path.isEmbedded(absUrl)) {
+					deferred.reject(detail);
+					return;
+				}
+				// If the content we are interested in is already in the DOM,
+				// and the caller did not indicate that we should force a
+				// reload of the file, we are done. Resolve the deferrred so that
+				// users can bind to .done on the promise
+				if (content) {
+					detail = object.fastMerge({absUrl: absUrl}, options);
+					deferred.resolve(detail, content);
+					return;
+				}
+
+				if (options.showLoadMsg) {
+					self._showLoading(options.loadMsgDelay);
+				}
+
+				// Load the new content.
+				request = new XMLHttpRequest();
+				request.responseType = "document";
+				request.overrideMimeType("text/html");
+				request.open("GET", absUrl);
+				request.addEventListener("error", self._loadError.bind(self, absUrl, options, deferred));
+				request.addEventListener("load", function (event) {
+					var request = event.target;
+					if (request.readyState === 4) {
+						if (request.status === 200 || (request.status === 0 && request.responseXML)) {
+							self._loadSuccess(absUrl, options, rule, deferred, request.responseXML);
+						} else {
+							self._loadError(absUrl, options, deferred);
+						}
+					}
+				});
+				request.send();
+			};
+
+			/**
+			 * Error handler for loading content by AJAX
+			 * @method _loadError
+			 * @param {string} absUrl
+			 * @param {Object} options
+			 * @param {"page"|"popup"|"external"} [options.rel = "page"] Represents kind of link as "page" or "popup" or "external" for linking to another domain.
+			 * @param {string} [options.transition = "none"] Sets the animation used during change of page.
+			 * @param {boolean} [options.reverse = false] Sets the direction of change.
+			 * @param {boolean} [options.fromHashChange = false] Sets if will be changed after hashchange.
+			 * @param {boolean} [options.showLoadMsg = true] Sets if message will be shown during loading.
+			 * @param {number} [options.loadMsgDelay = 0] Sets delay time for the show message during loading.
+			 * @param {boolean} [options.volatileRecord = false] Sets if the current history entry will be modified or a new one will be created.
+			 * @param {boolean} [options.dataUrl] Sets if page has url attribute.
+			 * @param {?string} [options.container = null] It is used in RoutePopup as selector for container.
+			 * @param {string} [options.absUrl] Absolute Url for content used by deferred object.
+			 * @param {Object} deferred
+			 * @param {Function} deferred.reject
+			 * @member ns.router.Router
+			 * @protected
+			 */
+			Router.prototype._loadError = function (absUrl, options, deferred) {
+				var detail = object.fastMerge({url: absUrl}, options),
+					self = this;
+				// Remove loading message.
+				if (options.showLoadMsg) {
+					self._showError(absUrl);
+				}
+
+				eventUtils.trigger(self.container.element, "loadfailed", detail);
+				deferred.reject(detail);
+			};
+
+			// TODO it would be nice to split this up more but everything appears to be "one off"
+			//	or require ordering such that other bits are sprinkled in between parts that
+			//	could be abstracted out as a group
+			/**
+			 * Success handler for loading content by AJAX
+			 * @method _loadSuccess
+			 * @param {string} absUrl
+			 * @param {Object} options
+			 * @param {"page"|"popup"|"external"} [options.rel = "page"] Represents kind of link as "page" or "popup" or "external" for linking to another domain.
+			 * @param {string} [options.transition = "none"] Sets the animation used during change of page.
+			 * @param {boolean} [options.reverse = false] Sets the direction of change.
+			 * @param {boolean} [options.fromHashChange = false] Sets if will be changed after hashchange.
+			 * @param {boolean} [options.showLoadMsg = true] Sets if message will be shown during loading.
+			 * @param {number} [options.loadMsgDelay = 0] Sets delay time for the show message during loading.
+			 * @param {boolean} [options.volatileRecord = false] Sets if the current history entry will be modified or a new one will be created.
+			 * @param {boolean} [options.dataUrl] Sets if page has url attribute.
+			 * @param {?string} [options.container = null] It is used in RoutePopup as selector for container.
+			 * @param {string} [options.absUrl] Absolute Url for content used by deferred object.
+			 * @param {Object} rule
+			 * @param {Object} deferred
+			 * @param {Function} deferred.reject
+			 * @param {Function} deferred.resolve
+			 * @param {string} html
+			 * @member ns.router.Router
+			 * @protected
+			 */
+			Router.prototype._loadSuccess = function (absUrl, options, rule, deferred, html) {
+				var detail = object.fastMerge({url: absUrl}, options),
+					content = rule.parse(html, absUrl);
+
+				// Remove loading message.
+				if (options.showLoadMsg) {
+					this._hideLoading();
+				}
+
+				if (content) {
+					deferred.resolve(detail, content);
+				} else {
+					deferred.reject(detail);
+				}
+			};
+
+			// TODO the first page should be a property set during _create using the logic
+			//	that currently resides in init
+			/**
+			 * Get initial content
+			 * @method _getInitialContent
+			 * @member ns.router.Router
+			 * @return {HTMLElement} the first page
+			 * @protected
+			 */
+			Router.prototype._getInitialContent = function () {
+				return this.firstPage;
+			};
+
+			/**
+			 * Show the loading indicator
+			 * @method _showLoading
+			 * @param {number} delay
+			 * @member ns.router.Router
+			 * @protected
+			 */
+			Router.prototype._showLoading = function (delay) {
+				this.container.showLoading(delay);
+			};
+
+			/**
+			 * Report an error loading
+			 * @method _showError
+			 * @param {string} absUrl
+			 * @member ns.router.Router
+			 * @protected
+			 */
+			Router.prototype._showError = function (absUrl) {
+				ns.error("load error, file: ", absUrl);
+			};
+
+			/**
+			 * Hide the loading indicator
+			 * @method _hideLoading
+			 * @member ns.router.Router
+			 * @protected
+			 */
+			Router.prototype._hideLoading = function () {
+				this.container.hideLoading();
+			};
+
+			/**
+			 * Returns true if popup is active.
+			 * @method hasActivePopup
+			 * @return {boolean}
+			 * @member ns.router.Router
+			 */
+			Router.prototype.hasActivePopup = function () {
+				var popup = this.getRoute("popup");
+				return popup && popup.hasActive();
+			};
+
+			/**
+			 * This function returns proper route.
+			 * @method getRoute
+			 * @param {string} Type of route
+			 * @return {?ns.router.route.interface}
+			 * @member ns.router.Router
+			 */
+			Router.prototype.getRoute = function (type) {
+				return route[type];
+			};
+
+			routerMicro.Router = Router;
+
+			engine.initRouter(Router);
+			}(window, window.document, ns));
+
+/*global window, define */
+/*jslint nomen: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Route Page
+ * Support class for router to control changing pages in profile Wearable.
+ * @class ns.router.route.page
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ */
+(function (document, ns) {
+	
+				var util = ns.util,
+				path = util.path,
+				DOM = util.DOM,
+				object = util.object,
+				utilSelector = util.selectors,
+				history = ns.router.history,
+				engine = ns.engine,
+				Page = ns.widget.wearable.Page,
+				baseElement,
+				slice = [].slice,
+				routePage = {},
+				head;
+
+			/**
+			 * Tries to find a page element matching id and filter (selector).
+			 * Adds data url attribute to found page, sets page = null when nothing found
+			 * @method findPageAndSetDataUrl
+			 * @param {string} id Id of searching element
+			 * @param {string} filter Query selector for searching page
+			 * @return {?HTMLElement}
+			 * @private
+			 * @static
+			 * @member ns.router.route.page
+			 */
+			function findPageAndSetDataUrl(id, filter) {
+				var page = document.getElementById(id);
+
+				if (page && utilSelector.matchesSelector(page, filter)) {
+					DOM.setNSData(page, "url", id);
+				} else {
+					// if we matched any element, but it doesn't match our filter
+					// reset page to null
+					page = null;
+				}
+				// @TODO ... else
+				// probably there is a need for running onHashChange while going back to a history entry
+				// without state, eg. manually entered #fragment. This may not be a problem on target device
+				return page;
+			}
+
+			/**
+			 * Property containing default properties
+			 * @property {Object} defaults
+			 * @property {string} defaults.transition="none"
+			 * @static
+			 * @member ns.router.route.page
+			 */
+			routePage.defaults = {
+				transition: "none"
+			};
+
+			/**
+			 * Property defining selector for filtering only page elements
+			 * @property {string} filter
+			 * @member ns.router.route.page
+			 * @static
+			 */
+			routePage.filter = "." + Page.classes.uiPage;
+
+			/**
+			 * Returns default route options used inside Router.
+			 * @method option
+			 * @static
+			 * @member ns.router.route.page
+			 * @return {Object} default route options
+			 */
+			routePage.option = function () {
+				var defaults = object.merge({}, routePage.defaults);
+				defaults.transition = ns.getConfig('pageTransition', defaults.transition);
+				return defaults;
+			};
+
+			/**
+			 * This method changes page. It sets history and opens page passed as a parameter.
+			 * @method open
+			 * @param {HTMLElement|string} toPage The page which will be opened.
+			 * @param {Object} [options]
+			 * @param {boolean} [options.fromHashChange] Sets if call was made on hash change.
+			 * @param {string} [options.dataUrl] Sets if page has url attribute.
+			 * @member ns.router.route.page
+			 */
+			routePage.open = function (toPage, options) {
+				var pageTitle = document.title,
+					url,
+					state = {},
+					router = engine.getRouter();
+
+				if (toPage === router.firstPage && !options.dataUrl) {
+					url = path.documentUrl.hrefNoHash;
+				} else {
+					url = DOM.getNSData(toPage, "url");
+				}
+
+				pageTitle = DOM.getNSData(toPage, "title") || utilSelector.getChildrenBySelector(toPage, ".ui-header > .ui-title").textContent || pageTitle;
+				if (!DOM.getNSData(toPage, "title")) {
+					DOM.setNSData(toPage, "title", pageTitle);
+				}
+
+				if (url && !options.fromHashChange) {
+					if (!path.isPath(url) && url.indexOf("#") < 0) {
+						url = path.makeUrlAbsolute("#" + url, path.documentUrl.hrefNoHash);
+					}
+
+					state = object.merge(
+						{},
+						options,
+						{
+							url: url
+						}
+					);
+
+					history.replace(state, pageTitle, url);
+				}
+
+				// write base element
+				this._setBase(url);
+
+				//set page title
+				document.title = pageTitle;
+				router.container.change(toPage, options);
+			};
+
+			/**
+			 * This method determines target page to open.
+			 * @method find
+			 * @param {string} absUrl Absolute path to opened page
+			 * @member ns.router.route.page
+			 * @return {?HTMLElement} Element of page to open.
+			 */
+			routePage.find = function (absUrl) {
+				var self = this,
+					router = engine.getRouter(),
+					dataUrl = self._createDataUrl(absUrl),
+					initialContent = router.getFirstPage(),
+					pageContainer = router.getContainer(),
+					page,
+					selector = "[data-url='" + dataUrl + "']",
+					filterRegexp = /,/gm;
+
+				if (/#/.test(absUrl) && path.isPath(dataUrl)) {
+					return null;
+				}
+
+				// Check to see if the page already exists in the DOM.
+				// NOTE do _not_ use the :jqmData pseudo selector because parenthesis
+				//      are a valid url char and it breaks on the first occurence
+				// prepare selector for new page
+				selector += self.filter.replace(filterRegexp, ",[data-url='" + dataUrl + "']");
+				page = pageContainer.element.querySelector(selector);
+
+				// If we failed to find the page, check to see if the url is a
+				// reference to an embedded page. If so, it may have been dynamically
+				// injected by a developer, in which case it would be lacking a
+				// data-url attribute and in need of enhancement.
+				if (!page && dataUrl && !path.isPath(dataUrl)) {
+					page = findPageAndSetDataUrl(dataUrl, self.filter);
+				}
+
+				// If we failed to find a page in the DOM, check the URL to see if it
+				// refers to the first page in the application. Also check to make sure
+				// our cached-first-page is actually in the DOM. Some user deployed
+				// apps are pruning the first page from the DOM for various reasons.
+				// We check for this case here because we don't want a first-page with
+				// an id falling through to the non-existent embedded page error case.
+				if (!page &&
+						path.isFirstPageUrl(dataUrl) &&
+						initialContent &&
+						initialContent.parentNode) {
+					page = initialContent;
+				}
+
+				return page;
+			};
+
+			/**
+			 * This method parses HTML and runs scripts from parsed code.
+			 * Fetched external scripts if required.
+			 * Sets document base to parsed document absolute path.
+			 * @method parse
+			 * @param {string} html HTML code to parse
+			 * @param {string} absUrl Absolute url for parsed page
+			 * @member ns.router.route.page
+			 * @return {?HTMLElement} Element of page in parsed document.
+			 */
+			routePage.parse = function (html, absUrl) {
+				var self = this,
+					page,
+					dataUrl = self._createDataUrl(absUrl);
+
+				// write base element
+				// @TODO shouldn't base be set if a page was found?
+				self._setBase(absUrl);
+
+				// Finding matching page inside created element
+				page = html.querySelector(self.filter);
+
+				// If a page exists...
+				if (page) {
+					// TODO tagging a page with external to make sure that embedded pages aren't
+					// removed by the various page handling code is bad. Having page handling code
+					// in many places is bad. Solutions post 1.0
+					DOM.setNSData(page, "url", dataUrl);
+					DOM.setNSData(page, "external", true);
+				}
+				return page;
+			};
+
+			/**
+			 * This method handles hash change, **currently does nothing**.
+			 * @method onHashChange
+			 * @static
+			 * @member ns.router.route.page
+			 * @return {null}
+			 */
+			routePage.onHashChange = function (/* url, options */) {
+				return null;
+			};
+
+			/**
+			 * This method creates data url from absolute url given as argument.
+			 * @method _createDataUrl
+			 * @param {string} absoluteUrl
+			 * @protected
+			 * @static
+			 * @member ns.router.route.page
+			 * @return {string}
+			 */
+			routePage._createDataUrl = function (absoluteUrl) {
+				return path.convertUrlToDataUrl(absoluteUrl, true);
+			};
+
+			/**
+			 * On open fail, currently never used
+			 * @method onOpenFailed
+			 * @member ns.router.route.page
+			 */
+			routePage.onOpenFailed = function (/* options */) {
+				this._setBase(path.parseLocation().hrefNoSearch);
+			};
+
+			/**
+			 * This method returns base element from document head.
+			 * If no base element is found, one is created based on current location.
+			 * @method _getBaseElement
+			 * @protected
+			 * @static
+			 * @member ns.router.route.page
+			 * @return {HTMLElement}
+			 */
+			routePage._getBaseElement = function () {
+				// Fetch document head if never cached before
+				if (!head) {
+					head = document.querySelector("head");
+				}
+				// Find base element
+				if (!baseElement) {
+					baseElement = document.querySelector("base");
+					if (!baseElement) {
+						baseElement = document.createElement("base");
+						baseElement.href = path.documentBase.hrefNoHash;
+						head.appendChild(baseElement);
+					}
+				}
+				return baseElement;
+			};
+
+			/**
+			 * Sets document base to url given as argument
+			 * @method _setBase
+			 * @param {string} url
+			 * @protected
+			 * @member ns.router.route.page
+			 */
+			routePage._setBase = function (url) {
+				var base = this._getBaseElement(),
+					baseHref = base.href;
+
+				if (path.isPath(url)) {
+					url = path.makeUrlAbsolute(url, path.documentBase);
+					if (path.parseUrl(baseHref).hrefNoSearch !== path.parseUrl(url).hrefNoSearch) {
+						base.href = url;
+						path.documentBase = path.parseUrl(path.makeUrlAbsolute(url, path.documentUrl.href));
+					}
+				}
+			};
+
+			ns.router.route.page = routePage;
+
+			}(window.document, ns));
+
+/*global window, define */
+/*jslint nomen: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Route Popup
+ * Support class for router to control changing pupups in profile Wearable.
+ * @class ns.router.route.popup
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Damian Osipiuk <d.osipiuk@samsung.com>
+ */
+(function (window, document, ns) {
+	
+				var
+			/**
+			 * @property {Object} Popup Alias for {@link ns.widget.Popup}
+			 * @member ns.router.route.popup
+			 * @private
+			 * @static
+			 */
+			Popup = ns.widget.core.Popup,
+
+			routePopup = {
+				/**
+				 * Object with default options
+				 * @property {Object} defaults
+				 * @property {string} [defaults.transition='none'] Sets the animation used during change of popup.
+				 * @property {?HTMLElement} [defaults.container=null] Sets container of element.
+				 * @property {boolean} [defaults.volatileRecord=true] Sets if the current history entry will be modified or a new one will be created.
+				 * @member ns.router.route.popup
+				 * @static
+				 */
+				defaults: {
+					transition: 'none',
+					container: null,
+					volatileRecord: true
+				},
+				/**
+				 * Popup Element Selector
+				 * @property {string} filter
+				 * @member ns.router.route.popup
+				 * @static
+				 */
+				filter: "." + Popup.classes.popup,
+				/**
+				 * Storage variable for active popup
+				 * @property {?HTMLElement} activePopup
+				 * @member ns.router.route.popup
+				 * @static
+				 */
+				activePopup: null,
+				/**
+				 * Dictionary for popup related event types
+				 * @property {Object} events
+				 * @property {string} [events.POPUP_HIDE='popuphide']
+				 * @member ns.router.route.popup
+				 * @static
+				 */
+				events: {
+					POPUP_HIDE: "popuphide"
+				}
+			},
+			/**
+			 * Alias for {@link ns.engine}
+			 * @property {Object} engine
+			 * @member ns.router.route.popup
+			 * @private
+			 * @static
+			 */
+			engine = ns.engine,
+			/**
+			 * Alias for {@link ns.util.path}
+			 * @property {Object} path
+			 * @member ns.router.route.popup
+			 * @private
+			 * @static
+			 */
+			path = ns.util.path,
+			/**
+			 * Alias for {@link ns.util.selectors}
+			 * @property {Object} utilSelector
+			 * @member ns.router.route.popup
+			 * @private
+			 * @static
+			 */
+			utilSelector = ns.util.selectors,
+			/**
+			 * Alias for {@link ns.router.history}
+			 * @property {Object} history
+			 * @member ns.router.route.popup
+			 * @private
+			 * @static
+			 */
+			history = ns.router.history,
+			/**
+			 * Alias for {@link ns.util.DOM}
+			 * @property {Object} DOM
+			 * @member ns.router.route.popup
+			 * @private
+			 * @static
+			 */
+			DOM = ns.util.DOM,
+			/**
+			 * Alias for array slice method
+			 * @method slice
+			 * @member ns.router.route.popup
+			 * @private
+			 * @static
+			 */
+			slice = [].slice,
+			/**
+			 * Alias for Object utils
+			 * @method slice
+			 * @member ns.router.route.popup
+			 * @private
+			 * @static
+			 */
+			object = ns.util.object,
+			/**
+			 * Popup's hash added to url
+			 * @property {string} popupHashKey
+			 * @member ns.router.route.popup
+			 * @private
+			 * @static
+			 */
+			popupHashKey = "popup=true",
+			/**
+			 * Regexp for popup's hash
+			 * @property {RegExp} popupHashKeyReg
+			 * @member ns.router.route.popup
+			 * @private
+			 * @static
+			 */
+			popupHashKeyReg = /([&|\?]popup=true)/;
+
+			/**
+			 * Tries to find a popup element matching id and filter (selector).
+			 * Adds data url attribute to found page, sets page = null when nothing found.
+			 * @method findPopupAndSetDataUrl
+			 * @param {string} id
+			 * @param {string} filter
+			 * @return {HTMLElement}
+			 * @member ns.router.route.popup
+			 * @private
+			 * @static
+			 */
+			function findPopupAndSetDataUrl(id, filter) {
+				var popup = document.getElementById(path.hashToSelector(id));
+
+				if (popup && utilSelector.matchesSelector(popup, filter)) {
+					DOM.setNSData(popup, 'url', id);
+				} else {
+					// if we matched any element, but it doesn't match our filter
+					// reset page to null
+					popup = null;
+				}
+				// @TODO ... else
+				// probably there is a need for running onHashChange while going back to a history entry
+				// without state, eg. manually entered #fragment. This may not be a problem on target device
+				return popup;
+			}
+
+			/**
+			 * This method returns default options for popup router.
+			 * @method option
+			 * @return {Object}
+			 * @member ns.router.route.popup
+			 * @static
+			 */
+			routePopup.option = function () {
+				var defaults = object.merge({}, routePopup.defaults);
+				defaults.transition = ns.getConfig('popupTransition', defaults.transition);
+				return defaults;
+			};
+
+			/**
+			 * This method sets active popup and manages history.
+			 * @method setActive
+			 * @param {?ns.widget.wearable.popup} activePopup
+			 * @param {Object} options
+			 * @member ns.router.route.popup
+			 * @static
+			 */
+			routePopup.setActive = function (activePopup, options) {
+				var url,
+					pathLocation = path.getLocation(),
+					documentUrl = pathLocation.replace(popupHashKeyReg, "");
+
+				this.activePopup = activePopup;
+
+				if (activePopup) {
+					// If popup is being opened, the new state is added to history.
+					if (options && !options.fromHashChange && options.history) {
+						url = path.addHashSearchParams(documentUrl, popupHashKey);
+						history.replace(options, "", url);
+					}
+				} else if (pathLocation !== documentUrl) {
+					// If popup is being closed, the history.back() is called
+					// but only if url has special hash.
+					// Url is changed after opening animation and in some cases,
+					// the popup is closed before this animation and then the history.back
+					// could cause undesirable change of page.
+					history.back();
+				}
+			};
+
+			/**
+			 * This method opens popup if no other popup is opened.
+			 * It also changes history to show that popup is opened.
+			 * If there is already active popup, it will be closed.
+			 * @method open
+			 * @param {HTMLElement|string} toPopup
+			 * @param {Object} options
+			 * @param {"page"|"popup"|"external"} [options.rel = 'popup'] Represents kind of link as 'page' or 'popup' or 'external' for linking to another domain.
+			 * @param {string} [options.transition = 'none'] Sets the animation used during change of popup.
+			 * @param {boolean} [options.reverse = false] Sets the direction of change.
+			 * @param {boolean} [options.fromHashChange = false] Sets if will be changed after hashchange.
+			 * @param {boolean} [options.showLoadMsg = true] Sets if message will be shown during loading.
+			 * @param {number} [options.loadMsgDelay = 0] Sets delay time for the show message during loading.
+			 * @param {boolean} [options.dataUrl] Sets if page has url attribute.
+			 * @param {string} [options.container = null] Selector for container.
+			 * @param {boolean} [options.volatileRecord=true] Sets if the current history entry will be modified or a new one will be created.
+			 * @param {Event} event
+			 * @member ns.router.route.popup
+			 * @static
+			 */
+			routePopup.open = function (toPopup, options, event) {
+				var popup,
+					router = engine.getRouter(),
+					events = routePopup.events,
+					removePopup = function () {
+						document.removeEventListener(events.POPUP_HIDE, removePopup, false);
+						toPopup.parentNode.removeChild(toPopup);
+						routePopup.activePopup = null;
+					},
+					openPopup = function () {
+						var positionTo = options["position-to"];
+						// add such option only if it exists
+						if (positionTo) {
+							options.positionTo = positionTo;
+						}
+						if (event && event.touches) {
+							options.x = event.touches[0].clientX;
+							options.y = event.touches[0].clientY;
+						} else if (event){
+							options.x = event.clientX;
+							options.y = event.clientY;
+						}
+
+						document.removeEventListener(events.POPUP_HIDE, openPopup, false);
+						popup = engine.instanceWidget(toPopup, "Popup", options);
+						popup.open(options);
+						routePopup.activePopup = popup;
+					},
+					activePage = router.container.getActivePage(),
+					container;
+
+				if (DOM.getNSData(toPopup, "external") === true) {
+					container = options.container ? activePage.element.querySelector(options.container) : activePage.element;
+					container.appendChild(toPopup);
+					document.addEventListener(routePopup.events.POPUP_HIDE, removePopup, false);
+				}
+
+				if (routePopup.hasActive()) {
+					document.addEventListener(routePopup.events.POPUP_HIDE, openPopup, false);
+					routePopup.close();
+				} else {
+					openPopup();
+				}
+			};
+
+			/**
+			 * This method closes active popup.
+			 * @method close
+			 * @param {ns.widget.wearable.Popup} [activePopup]
+			 * @param {string=} [options.transition]
+			 * @param {string=} [options.ext= in ui-pre-in] options.ext
+			 * @param {Object} options
+			 * @member ns.router.route.popup
+			 * @protected
+			 * @static
+			 */
+			routePopup.close = function (activePopup, options) {
+				activePopup = activePopup || this.activePopup;
+
+				if (activePopup) {
+					// Close and clean up
+					activePopup.close(options || {});
+				}
+			};
+
+			/**
+			 * This method handles hash change.
+			 * It closes active popup.
+			 * @method onHashChange
+			 * @param {string} url
+			 * @param {object} options
+			 * @return {boolean}
+			 * @member ns.router.route.popup
+			 * @static
+			 */
+			routePopup.onHashChange = function (url, options) {
+				var activePopup = this.activePopup;
+
+				if (activePopup) {
+					routePopup.close(activePopup, options);
+					// Default routing setting cause to rewrite further window history
+					// even if popup has been closed
+					// To prevent this onHashChange after closing popup we need to change
+					// disable volatile mode to allow pushing new history elements
+					return true;
+				}
+				return false;
+			};
+
+			/**
+			 * On open fail, currently never used
+			 * @method onOpenFailed
+			 * @member ns.router.route.popup
+			 * @return {null}
+			 * @static
+			 */
+			routePopup.onOpenFailed = function (/* options */) {
+				return null;
+			};
+
+			/**
+			 * This method finds popup by data-url.
+			 * @method find
+			 * @param {string} absUrl Absolute path to opened popup
+			 * @return {HTMLElement} Element of popup
+			 * @member ns.router.route.popup
+			 */
+			routePopup.find = function (absUrl) {
+				var self = this,
+					dataUrl = self._createDataUrl(absUrl),
+					activePage = engine.getRouter().getContainer().getActivePage(),
+					popup;
+
+				popup = activePage.element.querySelector("[data-url='" + dataUrl + "']" + self.filter);
+
+				if (!popup && dataUrl && !path.isPath(dataUrl)) {
+					popup = findPopupAndSetDataUrl(dataUrl, self.filter);
+				}
+
+				return popup;
+			};
+
+			/**
+			 * This method parses HTML and runs scripts from parsed code.
+			 * Fetched external scripts if required.
+			 * @method parse
+			 * @param {string} html HTML code to parse
+			 * @param {string} absUrl Absolute url for parsed popup
+			 * @return {HTMLElement}
+			 * @member ns.router.route.popup
+			 */
+			routePopup.parse = function (html, absUrl) {
+				var self = this,
+					popup,
+					dataUrl = self._createDataUrl(absUrl);
+
+				popup = html.querySelector(self.filter);
+
+				if (popup) {
+					// TODO tagging a popup with external to make sure that embedded popups aren't
+					// removed by the various popup handling code is bad. Having popup handling code
+					// in many places is bad. Solutions post 1.0
+					DOM.setNSData(popup, "url", dataUrl);
+					DOM.setNSData(popup, "external", true);
+				}
+
+				return popup;
+			};
+
+			/**
+			 * Convert url to data-url
+			 * @method _createDataUrl
+			 * @param {string} absoluteUrl
+			 * @return {string}
+			 * @member ns.router.route.popup
+			 * @protected
+			 * @static
+			 */
+			routePopup._createDataUrl = function (absoluteUrl) {
+				return path.convertUrlToDataUrl(absoluteUrl);
+			};
+
+			/**
+			 * Return true if active popup exists.
+			 * @method hasActive
+			 * @return {boolean}
+			 * @member ns.router.route.popup
+			 * @static
+			 */
+			routePopup.hasActive = function () {
+				return !!this.activePopup;
+			};
+
+			/**
+			 * Returns active popup.
+			 * @method getActive
+			 * @return {?ns.widget.wearable.Popup}
+			 * @member ns.router.route.popup
+			 * @static
+			 */
+			routePopup.getActive = function () {
+				return this.activePopup;
+			};
+
+			ns.router.route.popup = routePopup;
+
+			}(window, window.document, ns));
+
+/*global window, define */
+/*jslint nomen: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Route Drawer
+ * Support class for router to control drawer widget in profile Wearable.
+ * @class ns.router.route.drawer
+ * @author Hyeoncheol Choi <hc7.choi@samsung.com>
+ */
+(function (document, ns) {
+	
+				var WearableDrawer = ns.widget.wearable.Drawer,
+				WearableDrawerPrototype = WearableDrawer.prototype,
+				util = ns.util,
+				path = util.path,
+				DOM = util.DOM,
+				object = util.object,
+				utilSelector = util.selectors,
+				history = ns.router.history,
+				engine = ns.engine,
+				slice = [].slice,
+				routeDrawer = {},
+				drawerHashKey = "drawer=true",
+				drawerHashKeyReg = /([&|\?]drawer=true)/;
+
+			/**
+			 * Property containing default properties
+			 * @property {Object} defaults
+			 * @property {string} defaults.transition="none"
+			 * @static
+			 * @member ns.router.route.drawer
+			 */
+			routeDrawer.defaults = {
+				transition: "none"
+			};
+
+			/**
+			 * Property defining selector for filtering only drawer elements
+			 * @property {string} filter
+			 * @member ns.router.route.drawer
+			 * @static
+			 */
+			routeDrawer.filter = "." + WearableDrawer.classes.drawer;
+
+
+			/**
+			 * Returns default route options used inside Router.
+			 * But, drawer router has not options.
+			 * @method option
+			 * @static
+			 * @member ns.router.route.drawer
+			 * @return null
+			 */
+			routeDrawer.option = function () {
+				return null;
+			};
+
+			/**
+			 * This method opens the drawer.
+			 * @method open
+			 * @param {HTMLElement} drawerElement
+			 * @param {Object} [options]
+			 * @member ns.router.route.drawer
+			 */
+			routeDrawer.open = function (drawerElement, options) {
+				var self = this,
+					drawer = engine.instanceWidget(drawerElement, "Drawer");
+				drawer.open();
+			};
+
+			/**
+			 * This method determines target drawer to open.
+			 * @method find
+			 * @param {string} absUrl Absolute path to opened drawer widget
+			 * @member ns.router.route.drawer
+			 * @return {?HTMLElement} drawerElement
+			 */
+			routeDrawer.find = function (absUrl) {
+				var self = this,
+					dataUrl = path.convertUrlToDataUrl(absUrl),
+					activePage = engine.getRouter().getContainer().getActivePage(),
+					drawer;
+
+				drawer = activePage.element.querySelector("#" + dataUrl);
+
+				return drawer;
+			};
+
+			/**
+			 * This method parses HTML and runs scripts from parsed code.
+			 * But, drawer router doesn't need to that.
+			 * @method parse
+			 * @param {string} html HTML code to parse
+			 * @param {string} absUrl Absolute url for parsed page
+			 * @member ns.router.route.drawer
+			 * @return {?HTMLElement} Element of page in parsed document.
+			 */
+			routeDrawer.parse = function (html, absUrl) {
+				return null;
+			};
+
+			/**
+			 * This method sets active drawer and manages history.
+			 * @method setActive
+			 * @param {Object} activeDrawer
+			 * @member ns.router.route.drawer
+			 * @static
+			 */
+			routeDrawer.setActive = function (activeDrawer) {
+				var url,
+					pathLocation = path.getLocation(),
+					documentUrl = pathLocation.replace(drawerHashKeyReg, "");
+
+				this._activeDrawer = activeDrawer;
+
+				if(activeDrawer) {
+					url = path.addHashSearchParams(documentUrl, drawerHashKey);
+					history.replace({}, "", url);
+				} else if (pathLocation !== documentUrl) {
+					history.back();
+				}
+			};
+
+			/**
+			 * This method handles hash change.
+			 * @method onHashChange
+			 * @param {String} url
+			 * @param {Object} options
+			 * @static
+			 * @member ns.router.route.drawer
+			 * @return {null}
+			 */
+			routeDrawer.onHashChange = function (url, options, prev) {
+				var self = this,
+					activeDrawer = self._activeDrawer;
+
+				if (activeDrawer && prev.search(drawerHashKey) > 0 && url.search(drawerHashKey) < 0) {
+					activeDrawer.close(options);
+				}
+				return null;
+			};
+
+			ns.router.route.drawer = routeDrawer;
+
+			}(window.document, ns));
+
+/*global window, define */
+/*jslint nomen: true */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * #Route CircularIndexScrollbar
+ * Support class for router to control circularindexscrollbar widget in profile Wearable.
+ * @class ns.router.route.circularindexscrollbar
+ * @author Junyoung Park <jy-.park@samsung.com>
+ */
+(function (document, ns) {
+	
+				var CircularIndexScrollbar = ns.widget.wearable.CircularIndexScrollbar,
+				CircularIndexScrollbarPrototype = CircularIndexScrollbar.prototype,
+				util = ns.util,
+				path = util.path,
+				DOM = util.DOM,
+				object = util.object,
+				utilSelector = util.selectors,
+				history = ns.router.history,
+				engine = ns.engine,
+				slice = [].slice,
+				routeCircularIndexScrollbar = {},
+				circularindexscrollbarHashKey = "circularindexscrollbar=true",
+				circularindexscrollbarHashKeyReg = /([&|\?]circularindexscrollbar=true)/,
+				INDEXSCROLLBAR_SELECTOR = ".ui-circularindexscrollbar";
+
+			/**
+			 * Property defining selector for filtering only circularIndexScrollbar elements
+			 * @property {string} filter
+			 * @member ns.router.route.circularindexscrollbar
+			 * @static
+			 */
+			routeCircularIndexScrollbar.filter = INDEXSCROLLBAR_SELECTOR;
+
+			/**
+			 * Returns default route options used inside Router.
+			 * But, circularindexscrollbar router has not options.
+			 * @method option
+			 * @static
+			 * @member ns.router.route.circularindexscrollbar
+			 * @return null
+			 */
+			routeCircularIndexScrollbar.option = function () {
+				return null;
+			};
+
+			/**
+			 * This method opens the circularindexscrollbar.
+			 * @method open
+			 * @param {HTMLElement} element
+			 * @param {Object} [options]
+			 * @member ns.router.route.circularindexscrollbar
+			 */
+			routeCircularIndexScrollbar.open = function (element, options) {
+				return null;
+			};
+
+			/**
+			 * This method determines target circularIndexScrollbar to open.
+			 * @method find
+			 * @param {string} absUrl Absolute path to opened circularIndexScrollbar widget
+			 * @member ns.router.route.circularindexscrollbar
+			 * @return {?HTMLElement} circularIndexScrollbarElement
+			 */
+			routeCircularIndexScrollbar.find = function (absUrl) {
+				var self = this,
+					dataUrl = path.convertUrlToDataUrl(absUrl),
+					activePage = engine.getRouter().getContainer().getActivePage(),
+					circularIndexScrollbar;
+
+				circularIndexScrollbar = activePage.element.querySelector("#" + dataUrl);
+
+				return circularIndexScrollbar;
+			};
+
+			/**
+			 * This method parses HTML and runs scripts from parsed code.
+			 * But, circularIndexScrollbar router doesn't need to that.
+			 * @method parse
+			 * @param {string} html HTML code to parse
+			 * @param {string} absUrl Absolute url for parsed page
+			 * @member ns.router.route.circularindexscrollbar
+			 * @return {?HTMLElement} Element of page in parsed document.
+			 */
+			routeCircularIndexScrollbar.parse = function (html, absUrl) {
+				return null;
+			};
+
+			/**
+			 * This method sets active circularIndexScrollbar and manages history.
+			 * @method setActive
+			 * @param {Object} activeWidget
+			 * @member ns.router.route.circularindexscrollbar
+			 * @static
+			 */
+			routeCircularIndexScrollbar.setActive = function (activeWidget) {
+				var url,
+					pathLocation = path.getLocation(),
+					documentUrl = pathLocation.replace(circularindexscrollbarHashKeyReg, "");
+
+				this._activeWidget = activeWidget;
+
+				if(activeWidget) {
+					url = path.addHashSearchParams(documentUrl, circularindexscrollbarHashKey);
+					history.replace({}, "", url);
+				} else if (pathLocation !== documentUrl) {
+					history.back();
+				}
+			};
+
+			/**
+			 * This method handles hash change.
+			 * @method onHashChange
+			 * @param {String} url
+			 * @param {Object} options
+			 * @static
+			 * @member ns.router.route.circularindexscrollbar
+			 * @return {null}
+			 */
+			routeCircularIndexScrollbar.onHashChange = function (url, options, prev) {
+				var self = this,
+					activeWidget = self._activeWidget;
+
+				if (activeWidget && prev.search(circularindexscrollbarHashKey) > 0 && url.search(circularindexscrollbarHashKey) < 0) {
+					activeWidget.hide(options);
+				}
+				return null;
+			};
+
+			ns.router.route.circularindexscrollbar = routeCircularIndexScrollbar;
+
+			}(window.document, ns));
+
+/*global window, define */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*jslint plusplus: true, nomen: true */
+/**
+ * @class tau.navigator
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ */
+//  * @TODO add support of $.mobile.buttonMarkup.hoverDelay
+(function (document, ns) {
+	
+	
+			document.addEventListener("beforerouterinit", function () {
+				ns.setConfig('autoInitializePage', ns.autoInitializePage);
+			}, false);
+
+			document.addEventListener("routerinit", function (evt) {
+				var router = evt.detail,
+					history = ns.router.history,
+					navigator,
+					back = history.back.bind(router),
+					rule = ns.router.route,
+					classes = ns.widget.wearable.Page.classes,
+					pageActiveClass = classes.uiPageActive;
+				/**
+				 * @method changePage
+				 * @inheritdoc ns.router.Router#open
+				 * @member tau
+				 */
+				ns.changePage = router.open.bind(router);
+				document.addEventListener('pageshow', function () {
+					/**
+					 * Current active page
+					 * @property {HTMLElement} activePage
+					 * @member tau
+					 */
+					ns.activePage = document.querySelector('.' + pageActiveClass);
+				});
+				/**
+				 * First page element
+				 * @inheritdoc ns.router.Router#firstPage
+				 * @property {HTMLElement} firstPage
+				 * @member tau
+				 */
+				ns.firstPage = router.getFirstPage();
+				/**
+				 * @inheritdoc ns.router.history#back
+				 * @method back
+				 * @member tau
+				 */
+				ns.back = back;
+				/**
+				 * @inheritdoc ns.router.Router#init
+				 * @method initializePage
+				 * @member tau
+				 */
+				ns.initializePage = router.init.bind(router);
+				/**
+				 * Page Container widget
+				 * @property {HTMLElement} pageContainer
+				 * @inheritdoc ns.router.Router#container
+				 * @member tau
+				 */
+				ns.pageContainer = router.container;
+				/**
+				 * @method openPopup
+				 * @inheritdoc ns.router.Router#openPopup
+				 * @member tau
+				 */
+				ns.openPopup = function(to, options) {
+					var htmlElementTo;
+					if (to && to.length !== undefined && typeof to === 'object') {
+						htmlElementTo = to[0];
+					} else {
+						htmlElementTo = to;
+					}
+					router.openPopup(htmlElementTo, options);
+				};
+				/**
+				 * @method closePopup
+				 * @inheritdoc ns.router.Router#closePopup
+				 * @member tau
+				 */
+				ns.closePopup = router.closePopup.bind(router);
+
+			}, false);
+
+			}(window.document, ns));
+
+(function (ns) {
+	
+	
+			var engine = ns.engine;
+
+			ns.IndexScrollbar = function (element, options) {
+				ns.warn("tau.IndexScrollbar is deprecated. you have to use tau.widget.IndexScrollbar.");
+				return engine.instanceWidget(element, "IndexScrollbar", options);
+			};
+
+			ns.SectionChanger = function (element, options) {
+				ns.warn("tau.SectionChanger is deprecated. you have to use tau.widget.SectionChanger.");
+				return engine.instanceWidget(element, "SectionChanger", options);
+			};
+
+			ns.SwipeList = function (element, options) {
+				ns.warn("tau.SwipeList is deprecated. you have to use tau.widget.SwipeList.");
+				return engine.instanceWidget(element, "SwipeList", options);
+			};
+
+			ns.VirtualListview = function (element, options) {
+				ns.warn("tau.VirtualListview is deprecated. you have to use tau.widget.VirtualListview.");
+				return engine.instanceWidget(element, "VirtualListview", options);
+			};
+
+			}(ns));
+/*global define, window */
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/*
+ * @author Maciej Urbanski <m.urbanski@samsung.com>
+ * @author Krzysztof Antoszek <k.antoszek@samsung.com>
+ */
+(function (ns) {
+	
+				if (ns.getConfig("autorun", true) === true) {
+				ns.engine.run();
+			}
+			}(ns));
+
+/*global define */
+
+}(window, window.document));
diff --git a/lib/tau/wearable/js/tau.min.js b/lib/tau/wearable/js/tau.min.js
new file mode 100644
index 0000000..8bb0472
--- /dev/null
+++ b/lib/tau/wearable/js/tau.min.js
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+!function(a,b,c){var d=a.tau={},e=a.tauConfig=a.tauConfig||{};e.rootNamespace="tau",e.fileName="tau",d.version="0.10.4",function(a,b,d){var e=0,f=+new Date,g=[].slice,h=d.rootNamespace,i=d.fileName,j=function(a){var b=new Date;a.unshift("["+h+"]["+b.toLocaleString()+"]")};b.getUniqueId=function(){return h+"-"+b.getNumberUniqueId()+"-"+f},b.getNumberUniqueId=function(){return e++},b.log=function(){var a=g.call(arguments);j(a),console&&console.log.apply(console,a)},b.warn=function(){var a=g.call(arguments);j(a),console&&console.warn.apply(console,a)},b.error=function(){var a=g.call(arguments);j(a),console&&console.error.apply(console,a)},b.getConfig=function(a,b){return d[a]===c?b:d[a]},b.setConfig=function(a,b,e){(!e||e&&d[a]===c)&&(d[a]=b)},b.getFrameworkPath=function(){var b,c,d,e,f=a.getElementsByTagName("script"),g=f.length;for(b=0;g>b;b++)if(c=f[b].src,d=c.split("/"),e=d.length,d[e-1]===i+".js"||d[e-1]===i+".min.js")return d.slice(0,e-1).join("/");return null}}(a.document,d,e),function(a){a.setConfig("rootDir",a.getFrameworkPath(),!0),a.setConfig("version",""),a.setConfig("allowCrossDomainPages",!1,!0),a.setConfig("domCache",!1,!0)}(d),function(a,b,c){function d(){var a,c=b.createElement("div"),d=b.createElement("body"),e=b.getElementsByTagName("html")[0],f=getComputedStyle(c);return c.classList.add("is-circle-test"),d.appendChild(c),e.insertBefore(d,e.firstChild),a="1px"===f.width,e.removeChild(d),a}var e=!("undefined"==typeof tizen);c.support={cssTransitions:!0,mediaquery:!0,cssPseudoElement:!0,touchOverflow:!0,cssTransform3d:!0,boxShadow:!0,scrollTop:0,dynamicBaseTag:!0,cssPointerEvents:!1,boundingRect:!0,browser:{ie:!1,tizen:e},shape:{circle:e?a.matchMedia("(-tizen-geometric-shape: circle)").matches:d()},gradeA:function(){return!0}}}(a,a.document,d),function(a){a.setConfig("autoBuildOnPageChange",!1,!0),a.support.shape.circle?(a.setConfig("pageTransition","pop"),a.setConfig("popupTransition","pop"),a.setConfig("popupFullSize",!0),a.setConfig("scrollEndEffectArea","screen"),a.setConfig("enablePageScroll",!0),a.setConfig("enablePopupScroll",!0)):(a.setConfig("popupTransition","slideup"),a.setConfig("enablePageScroll",!1),a.setConfig("enablePopupScroll",!1))}(d),function(a){a.defaults={},Object.defineProperty(a.defaults,"autoInitializePage",{get:function(){return a.getConfig("autoInitializePage",!0)},set:function(b){return a.setConfig("autoInitializePage",b)}}),Object.defineProperty(a.defaults,"dynamicBaseEnabled",{get:function(){return a.getConfig("dynamicBaseEnabled",!0)},set:function(b){return a.setConfig("dynamicBaseEnabled",b)}}),Object.defineProperty(a.defaults,"pageTransition",{get:function(){return a.getConfig("pageTransition","none")},set:function(b){return a.setConfig("pageTransition",b)}}),Object.defineProperty(a.defaults,"popupTransition",{get:function(){return a.getConfig("popupTransition","none")},set:function(b){return a.setConfig("popupTransition",b)}}),Object.defineProperty(a.defaults,"popupFullSize",{get:function(){return a.getConfig("popupFullSize",!1)},set:function(b){return a.setConfig("popupFullSize",b)}}),Object.defineProperty(a.defaults,"enablePageScroll",{get:function(){return a.getConfig("enablePageScroll",!1)},set:function(b){return a.setConfig("enablePageScroll",b)}}),Object.defineProperty(a.defaults,"scrollEndEffectArea",{get:function(){return a.getConfig("scrollEndEffectArea","content")},set:function(b){return a.setConfig("scrollEndEffectArea",b)}}),Object.defineProperty(a.defaults,"enablePopupScroll",{get:function(){return a.getConfig("enablePopupScroll",!1)},set:function(b){return a.setConfig("enablePopupScroll",b)}})}(d),function(a,b,c){function d(a,b){var c,d=new XMLHttpRequest;return d.open("get",a,!1),b&&d.overrideMimeType(b),d.send(),4===d.readyState&&(c=d.status,200===c||0===c&&d.responseText)?d.responseText:null}function e(a){for(var b,c=l.call(a.querySelectorAll("script[src]")),d=c.length;--d>=0;)b=c[d],b.parentNode.removeChild(b);return c}function f(b){return function(){try{a.eval(b)}catch(c){"undefined"!=typeof console&&(c.stack||c.name&&c.message)}}}function g(b){var c,d=b.length;for(c=0;d>c;++c)b[c].call(a)}function h(a,c){var e,g,h,i,j=[];for(h=0,i=a.length;i>h;++h)g=d(a[h].src,"text/plain"),g&&(e=b.adoptNode(a[h]),e.setAttribute("data-src",a[h].src),e.removeAttribute("src"),j.push(f(g)),c&&c.appendChild(e));return j}var i=null,j=(a.requestAnimationFrame||a.webkitRequestAnimationFrame||a.mozRequestAnimationFrame||a.oRequestAnimationFrame||function(b){i=a.setTimeout(b.bind(b,+new Date),1e3/60)}).bind(a),k=c.util||{},l=[].slice;k.fetchSync=d,k.safeEvalWrap=f,k.batchCall=g,k.requestAnimationFrame=j,k.cancelAnimationFrame=(a.cancelAnimationFrame||a.webkitCancelAnimationFrame||a.mozCancelAnimationFrame||a.oCancelAnimationFrame||function(){a.clearTimeout(i)}).bind(a),k.async=j,k.importEvaluateAndAppendElement=function(a,c){var d=h(e(a),a),f=b.importNode(a,!0);return c.appendChild(f),g(d),f},k.isNumber=function(a){var b=parseFloat(a);return!isNaN(b)&&isFinite(b)},k.runScript=function(a,c){var e,f,g=b.createElement("script"),h=null,i=l.call(c.attributes),j=c.getAttribute("src"),m=k.path;for(null!==j&&(j=m.makeUrlAbsolute(j,a)),e=i.length;--e>=0;)f=i[e],"src"!==f.name?g.setAttribute(f.name,f.value):g.setAttribute("data-src",f.value);h=j?d(j,"text/plain"):c.textContent,h&&(g.src=URL.createObjectURL(new Blob([h],{type:"text/javascript"})),g.textContent=h),c.parentNode.replaceChild(g,c)},c.util=k}(a,a.document,d),function(a,b,c){function d(a,b,c){var d,e,f,g=[],h=c||1,i=!1;if(isNaN(a)||isNaN(b)?isNaN(a)&&isNaN(b)?(i=!0,d=a.charCodeAt(0),e=b.charCodeAt(0)):(d=isNaN(a)?0:a,e=isNaN(b)?0:b):(d=a,e=b),f=e>=d)for(;e>=d;)g.push(i?String.fromCharCode(d):d),d+=h;else for(;d>=e;)g.push(i?String.fromCharCode(d):d),d-=h;return g}function e(a){var b=typeof a,c=a&&a.length;return a&&a!==a.window?Array.isArray(a)||a instanceof NodeList||"function"===b&&(0===c||"number"==typeof c&&c>0&&c-1 in a):!1}c.util.array={range:d,isArrayLike:e}}(a,a.document,d),function(a,d){var e=Array.isArray,f=d.util.array.isArrayLike,g=/\s+/g,h=function(a){return a.trim()},i=function(a,b){var c,d,f=[];if("string"==typeof a&&(a=a.split(g).map(h)),e(a))for(d=0;d<a.length;d++)f.push({type:a[d],callback:b});else for(c in a)a.hasOwnProperty(c)&&f.push({type:c,callback:a[c]});return f};d.event={trigger:function(a,b,c,d,e){var f=new CustomEvent(b,{detail:c,bubbles:"boolean"==typeof d?d:!0,cancelable:"boolean"==typeof e?e:!0});return a.dispatchEvent(f)},preventDefault:function(a){var b=a._originalEvent;b&&b.preventDefault&&b.preventDefault(),a.preventDefault()},stopPropagation:function(a){var b=a._originalEvent;b&&b.stopPropagation&&b.stopPropagation(),a.stopPropagation()},stopImmediatePropagation:function(a){var b=a._originalEvent;b&&b.stopImmediatePropagation&&b.stopImmediatePropagation(),a.stopImmediatePropagation()},documentRelativeCoordsFromEvent:function(c){var d,e=c?c:a.event,f={x:e.clientX,y:e.clientY},g={x:e.pageX,y:e.pageY},h=0,i=0,j=b.body,k=b.documentElement;return c.type.match(/^touch/)&&(d=e.targetTouches[0]||e.originalEvent.targetTouches[0],g={x:d.pageX,y:d.pageY},f={x:d.clientX,y:d.clientY}),g.x||g.y?(h=g.x,i=g.y):(f.x||f.y)&&(h=f.x+j.scrollLeft+k.scrollLeft,i=f.y+j.scrollTop+k.scrollTop),{x:h,y:i}},targetRelativeCoordsFromEvent:function(a){var b=a.target,e={x:a.offsetX,y:a.offsetY};return(e.x===c||isNaN(e.x)||e.y===c||isNaN(e.y))&&(e=d.event.documentRelativeCoordsFromEvent(a),e.x-=b.offsetLeft,e.y-=b.offsetTop),e},fastOn:function(a,b,c,d){a.addEventListener(b,c,d||!1)},fastOff:function(a,b,c,d){a.removeEventListener(b,c,d||!1)},on:function(a,b,c,e){var g,h,j,k,l,m;for(l=f(a)?a:[a],j=l.length,m=i(b,c),k=m.length,g=0;j>g;g++)if("function"==typeof l[g].addEventListener)for(h=0;k>h;h++)d.event.fastOn(l[g],m[h].type,m[h].callback,e)},off:function(a,b,c,e){var g,h,j,k,l,m;for(l=f(a)?a:[a],j=l.length,m=i(b,c),k=m.length,g=0;j>g;g++)if("function"==typeof l[g].addEventListener)for(h=0;k>h;h++)d.event.fastOff(l[g],m[h].type,m[h].callback,e)},one:function(a,b,c,e){var g,h,j,k,l,m,n=[].slice,o=[];for(l=f(a)?n.call(a):[a],j=l.length,m=i(b,c),k=m.length,g=0;j>g;g++)if("function"==typeof l[g].addEventListener)for(o[g]=[],h=0;k>h;h++)o[g][h]=function(a,b){var c=n.call(arguments);d.event.fastOff(l[a],m[b].type,o[a][b],e),c.shift(),c.shift(),m[b].callback.apply(this,c)}.bind(null,g,h),d.event.fastOn(l[g],m[h].type,o[g][h],e)}}}(a,d),function(b,c){function d(a){var b=c.getConfig("namespace");return"[data-"+(b?b+"-":"")+a+"]"}function e(a,b){return l&&a[l]?a[l](b):!1}function f(a){for(var c=[],d=a.parentNode;d&&d!==b;)c.push(d),d=d.parentNode;return c}function g(a,c){for(var d=a;d&&d!==b;){if(c(d))return d;d=d.parentNode}return null}function h(a,b){return e(b,a)}function i(a,b){return b&&b.classList&&b.classList.contains(a)}function j(a,b){return b.tagName.toLowerCase()===a}var k=[].slice,l=function(){var a=b.createElement("div");return"function"==typeof a.webkitMatchesSelector?"webkitMatchesSelector":"function"==typeof a.mozMatchesSelector?"mozMatchesSelector":"function"==typeof a.msMatchesSelector?"msMatchesSelector":"function"==typeof a.matchesSelector?"matchesSelector":!1}();c.util.selectors={matchesSelector:e,getChildrenBySelector:function(a,b){return k.call(a.children).filter(h.bind(null,b))},getChildrenByDataNS:function(a,b){return k.call(a.children).filter(h.bind(null,d(b)))},getChildrenByClass:function(a,b){return k.call(a.children).filter(i.bind(null,b))},getChildrenByTag:function(a,b){return k.call(a.children).filter(j.bind(null,b))},getParents:f,getParentsBySelector:function(a,b){return f(a).filter(h.bind(null,b))},getParentsBySelectorNS:function(a,b){return f(a).filter(h.bind(null,d(b)))},getParentsByClass:function(a,b){return f(a).filter(i.bind(null,b))},getParentsByTag:function(a,b){return f(a).filter(j.bind(null,b))},getClosestBySelector:function(a,b){return g(a,h.bind(null,b))},getClosestBySelectorNS:function(a,b){return g(a,h.bind(null,d(b)))},getClosestByClass:function(a,b){return g(a,i.bind(null,b))},getClosestByTag:function(a,b){return g(a,j.bind(null,b))},getAllByDataNS:function(a,b){return k.call(a.querySelectorAll(d(b)))},getScrollableParent:function(c){for(var d,e;c&&c!=b.body;){if(e=a.getComputedStyle(c),e&&(d=e.getPropertyValue("overflow-y"),"scroll"===d||"auto"===d&&c.scrollHeight>c.clientHeight))return c;c=c.parentNode}return null}}}(a.document,d),function(a){var b={copy:function(a){return b.merge({},a)},fastMerge:function(a,b){var c;for(c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a},merge:function(){var a,b,d,e,f,g=[].slice.call(arguments),h=g.length;for(a=g.shift(),d=!0,"boolean"==typeof arguments[h-1]&&(d=arguments[h-1],h--),f=0;h>f;f++)if(b=g.shift(),null!==b)for(e in b)b.hasOwnProperty(e)&&(d||a[e]===c)&&(a[e]=b[e]);return a},inherit:function(a,b,c){var d,e,f=new b;for(d in c)c.hasOwnProperty(d)&&(e=c[d],f[d]="function"==typeof e?function(a,b,c){var d=function(){var c=a.prototype[b];return c?c.apply(this,arguments):null};return function(){var a,b=this._super;return this._super=d,a=c.apply(this,arguments),this._super=b,a}}(b,d,e):e);a.prototype=f,a.prototype.constructor=a},hasPropertiesOfValue:function(a,b){var c=Object.keys(a),d=c.length;if(0===d)return!1;for(;--d>=0;)if(a[c[d]]!==b)return!1;return!0}};a.util.object=b}(d),function(a,b,d){function e(a){return a.match(/\[data-role=/)&&!a.match(/:not\(\[data-role=/)?a.trim():a.trim()+":not([data-role='none'])"}function f(a,f,g,h,i,j,k){var l;if(a){if(!G[a]||j)return g=g||[],g.push("destroy","disable","enable","option","refresh","value"),l={name:a,methods:g,selector:f||"",selectors:f?f.split(",").map(e):[],widgetClass:h||null,namespace:i||"",widgetNameToLowercase:k===c?!0:!!k},G[a]=l,D.trigger(b,"widgetdefined",l,!1),!0}else d.error("Widget with selector ["+f+"] defined without a name, aborting!");return!1}function g(a,c){var d,e,f,g=a&&typeof a!==K?a.id:a;return typeof a===K&&(a=b.getElementById(g)),d=H[g],d&&"object"==typeof d&&(c?e=d.instances[c]:(f=Object.keys(d.instances),e=d.instances[f[0]]),e&&e.element===a)?e:null}function h(a){var b=a.element.id,c=a.name,d=H[b];d||(d={elementId:b,element:a.element,instances:{}}),d.instances[c]=a,H[b]=d}function i(a){var b=a&&typeof a!==K?a.id:a;return H[b]&&H[b].instances||null}function j(a,b){var c,d;return c=b.split(P),d=c.indexOf(a),d>-1&&(c.splice(d,1),b=c.join(P)),b}function k(a){a.removeAttribute(M),a.removeAttribute(O),a.removeAttribute(N)}function l(a,b){var c,d,e;b?(c=j(b,a.getAttribute(M)||""),d=j(b,a.getAttribute(O)||""),e=j(b,a.getAttribute(N)||""),c&&d&&e?(a.setAttribute(M,c),a.setAttribute(O,d),a.setAttribute(N,e)):k(a)):k(a)}function m(a,b){var c=a[b];return c?(c.element&&typeof c.element.setAttribute===L&&l(c.element,b),a[b]=null,!0):!1}function n(a,b){var c,d,e,f=typeof a===K?a:a.id,g=H[f],h=!1;if(g&&(typeof a===K&&(a=g.element),a&&l(a,b),c=H[f]&&H[f].instances)){if(!b){h=!0;for(d in c)c.hasOwnProperty(d)&&(e=m(c,d),c[d]=null,h=h&&e);return E.hasPropertiesOfValue(c,null)&&(H[f]=null),h}return e=m(c,b),E.hasPropertiesOfValue(c,null)&&(H[f]=null),e}return!1}function o(a){return n(a)}function p(a,c,d){var e,f,i=d||{},j=i.create,k=c.widgetClass,l=k?new k(a):!1,m=F.getParentsBySelectorNS(a,"enhance=false");return f=g(a,c.name),f&&f.element===a?f.element:(l&&!m.length&&(l.configure(c,a,d),typeof j===L&&D.one(a,c.name.toLowerCase()+"create",j),a.id&&(l.id=a.id),e=a.getAttribute(M),(!e||e&&-1===e.split(P).indexOf(l.name))&&(a=l.build(a)),a&&(l.element=a,h(l),l.trigger(S.WIDGET_BUILT,l,!1),J||l.init(a),l.bindEvents(a,J),D.trigger(a,S.WIDGET_BOUND,l,!1),D.trigger(b,S.WIDGET_BOUND,l))),l.element)}function q(a,c){var d;typeof a===K&&(a=b.getElementById(a)),d=g(a,c),d&&(d.destroy(),d.trigger("widgetdestroyed"),n(a,c))}function r(a,c){var d,e,f,g,h;if(typeof a===K&&(a=b.getElementById(a)),!c){f=i(a);for(d in f)f.hasOwnProperty(d)&&(e=f[d],e&&(e.destroy(),e.trigger("widgetdestroyed")))}for(g=C.call(a.querySelectorAll("["+O+"]")),h=g.length-1;h>=0;h-=1)g[h]&&r(g[h],!1);o(a)}function s(a,b,c){var d=a.getAttribute(N)||b&&b.name;return b=b||d&&G[d]||{name:d},p(a,b,c)}function t(a,b){var c=Node.DOCUMENT_POSITION_CONTAINS|Node.DOCUMENT_POSITION_PRECEDING;return a.element.compareDocumentPosition(b.element)&c?1:-1}function u(a){s(a.element||a,G[a.widgetName])}function v(a){var c,d,e,f,g,h,i=C.call(a.querySelectorAll(Q)),j=[],k=[],l=Object.keys(G),m=l.length;for(i.forEach(u),d=0;m>d;++d)if(g=l[d],f=G[g],h=f.selectors,h.length)for(c=R(g),j=C.call(a.querySelectorAll(h.join(c+",")+c)),e=j.length;--e>=0;)k.push({element:j[e],widgetName:g});k.sort(t),k.forEach(u),D.trigger(b,"built"),D.trigger(b,S.BOUND)}function w(a){v(a.target)}function x(){var a,c,d,e,f=b.head;if(c=f.querySelectorAll('[name="viewport"]'),a=c.length,a>0)for(--a,e=0;a>e;++e)f.removeChild(c[e]);else d=b.createElement("meta"),d.setAttribute("name","viewport"),d.setAttribute("content","width=device-width, user-scalable=no"),f.firstChild?f.insertBefore(d,f.firstChild):f.appendChild(d)}function y(){B&&(x(),D.trigger(b,"beforerouterinit",B,!1),B.init(J),D.trigger(b,"routerinit",B,!1))}function z(){B&&B.destroy()}var A,B,C=[].slice,D=d.event,E=d.util.object,F=d.util.selectors,G={},H={},I=a.location,J="#build"===I.hash,K="string",L="function",M="data-tau-built",N="data-tau-name",O="data-tau-bound",P=",",Q="*["+M+"]["+N+"]:not(["+O+"])",R=function(a){return":not(["+M+"*='"+a+"']):not(["+O+"*='"+a+"'])"},S={INIT:"tauinit",WIDGET_BOUND:"widgetbound",WIDGET_DEFINED:"widgetdefined",WIDGET_BUILT:"widgetbuilt",BOUND:"bound"};d.widgetDefinitions={},A={justBuild:"#build"===I.hash,dataTau:{built:M,name:N,bound:O,separator:P},destroyWidget:q,destroyAllWidgets:r,createWidgets:v,getDefinitions:function(){return G},getWidgetDefinition:function(a){return G[a]},defineWidget:f,getBinding:g,getAllBindings:i,setBinding:h,removeBinding:n,removeAllBindings:o,_clearBindings:function(){H={}},build:y,run:function(){switch(z(),D.fastOn(b,"create",w),D.trigger(b,S.INIT,{tau:d}),b.readyState){case"interactive":case"complete":y();break;default:D.fastOn(b,"DOMContentLoaded",y.bind(A))}},getRouter:function(){return B},initRouter:function(a){B=new a},instanceWidget:function(a,b,c){var e,f=g(a,b);return a?(!f&&G[b]&&(e=G[b],a=s(a,e,c),f=g(a,b)),f):(d.error("'element' cannot be empty"),null)},stop:z,setJustBuild:function(a){I.hash=a?"build":"",J=a},getJustBuild:function(){return J},_createEventHandler:w},A.eventType=S,d.engine=A}(a,a.document,d),function(a,b,c){function d(a){return a=w.getClosestBySelector(a,"a, label")}function e(a){return a=w.getClosestByTag(a,"li")}function f(){var a;r=d(r),q||!r||"A"!==r.tagName&&"LABEL"!==r.tagName||(a=e(r),a&&a.classList.add(v))}function g(){return a.getElementsByClassName(v)}function h(){var a,b=g(),c=b.length;for(a=0;c>a;a++)b[a].classList.remove(v)}function i(a){var b=a.touches[0];q=q||Math.abs(b.clientX-o)>u.scrollThreshold||Math.abs(b.clientY-p)>u.scrollThreshold,q&&(t(),h())}function j(b){var c=b.touches,d=c[0];1===c.length&&(q=!1,o=d.clientX,p=d.clientY,r=b.target,a.addEventListener("touchmove",i,!1),clearTimeout(s),s=setTimeout(f,u.addActiveClassDelay))}function k(a){0===a.touches.length&&(clearTimeout(s),s=null,q||setTimeout(h,u.keepActiveClassDelay),q=!1)}function l(){"hidden"===a.visibilityState&&h()}function m(){a.addEventListener("touchstart",j,!1),a.addEventListener("touchend",k,!1),a.addEventListener("visibilitychange",l,!1),b.addEventListener("pagehide",h,!1)}function n(){a.removeEventListener("touchstart",j,!1),a.removeEventListener("touchend",k,!1),b.removeEventListener("pagehide",h,!1)}var o,p,q,r,s,t,u={scrollThreshold:5,addActiveClassDelay:10,keepActiveClassDelay:100},v="ui-li-active",w=c.util.selectors;t=function(){a.removeEventListener("touchmove",i,!1)},m(),c.util.anchorHighlight={enable:m,disable:n}}(b,a,d),function(a){a.util.DOM=a.util.DOM||{}}(d),function(a,b,c){function d(b,c,d,e){var f=a.getComputedStyle(b),g=null,h=d;if(f&&(g=f.getPropertyValue(c)))switch(e){case"integer":g=parseInt(g,10),isNaN(g)||(h=g);break;case"float":g=parseFloat(g),isNaN(g)||(h=g);break;default:h=g}return h}function e(b,d,e,f){var g,h=a.getComputedStyle(b,e),i=null,j=c.util;for(g in d)d.hasOwnProperty(g)&&(i=h.getPropertyValue(g),d[g]=j.isNumber(i)&&!f?i.match(/\./gi)?parseFloat(i):parseInt(i,10):i)}function f(a,b,c,d,f,g){var h,i,j,k=0,l=null,m=null,n=null,o=b&&"outer"===b||!1,p=0,q={height:0,"margin-top":0,"margin-bottom":0,"padding-top":0,"padding-bottom":0,"border-top-width":0,"border-bottom-width":0,"box-sizing":""};if(a){h=a.style,"none"!==h.display?(e(a,q,f,!0),p=a.offsetHeight):g&&(l=h.display,m=h.visibility,n=h.position,h.display="block",h.visibility="hidden",h.position="relative",e(a,q,f,!0),p=a.offsetHeight,h.display=l,h.visibility=m,h.position=n),"string"==typeof q.height&&-1===q.height.indexOf("px")&&(q.height=0);for(j in q)q.hasOwnProperty(j)&&"box-sizing"!==j&&(i=parseFloat(q[j]),isNaN(i)&&(i=0),q[j]=i);k+=q.height+q["padding-top"]+q["padding-bottom"],c?k=p:o&&"border-box"!==q["box-sizing"]&&(k+=q["border-top-width"]+q["border-bottom-width"]),d&&(k+=Math.max(0,q["margin-top"])+Math.max(0,q["margin-bottom"]))}return k}function g(a,b,c,d,f,g){var h,i,j,k=0,l=null,m=null,n=null,o=0,p=b&&"outer"===b||!1,q={width:0,"margin-left":0,"margin-right":0,"padding-left":0,"padding-right":0,"border-left-width":0,"border-right-width":0,"box-sizing":""};if(a){h=a.style,"none"!==h.display?(e(a,q,f,!0),o=a.offsetWidth):g&&(l=h.display,m=h.visibility,n=h.position,h.display="block",h.visibility="hidden",h.position="relative",e(a,q,f,!0),h.display=l,h.visibility=m,h.position=n),"string"==typeof q.width&&-1===q.width.indexOf("px")&&(q.width=0);for(j in q)q.hasOwnProperty(j)&&"box-sizing"!==j&&(i=parseFloat(q[j]),isNaN(i)&&(i=0),q[j]=i);k+=q.width+q["padding-left"]+q["padding-right"],c?k=o:p&&"border-box"!==q["box-sizing"]&&(k+=q["border-left-width"]+q["border-right-width"]),d&&(k+=Math.max(0,q["margin-left"])+Math.max(0,q["margin-right"]))}return k}function h(a){var b=0,c=0;do c+=a.offsetTop,b+=a.offsetLeft,a=a.offsetParent;while(null!==a);return{top:c,left:b}}function i(a){return!(a.offsetWidth<=0&&a.offsetHeight<=0)}var j=c.util.DOM;j.getCSSProperty=d,j.extractCSSProperties=e,j.getElementHeight=f,j.getElementWidth=g,j.getElementOffset=h,j.isOccupiedPlace=i}(a,a.document,d),function(a,b,d){d.util.callbacks=function(a){var b,e,f,g,h,i,j,k,l=d.util.object,m=l.copy(a),n=[].slice,o=[],p=!m.once&&[],q={add:function(){if(o){var a=o.length;k(arguments),f?h=o.length:b&&(g=a,j(b))}return this},remove:function(){return o&&n.call(arguments).forEach(function(a){for(var b=o.indexOf(a);b>-1;)o.splice(b,1),f&&(h>=b&&h--,i>=b&&i--),b=o.indexOf(a,b)}),this},has:function(a){return a?!!o&&o.indexOf(a)>-1:!(!o||!o.length)},empty:function(){return o=[],h=0,this},disable:function(){return o=p=b=c,this},disabled:function(){return!o},lock:function(){return p=c,b||q.disable(),this},locked:function(){return!p},fireWith:function(a,b){return!o||e&&!p||(b=b||[],b=[a,b.slice?b.slice():b],f?p.push(b):j(b)),this},fire:function(){return q.fireWith(this,arguments),this},fired:function(){return!!e}};return k=function(a){n.call(a).forEach(function(a){var b=typeof a;"function"===b?m.unique&&q.has(a)||o.push(a):a&&a.length&&"string"!==b&&k(a)})},j=function(a){for(b=m.memory&&a,e=!0,i=g||0,g=0,h=o.length,f=!0;o&&h>i;){if(o[i].apply(a[0],a[1])===!1&&m.stopOnFalse){b=!1;break}i++}f=!1,o&&(p?p.length&&j(p.shift()):b?o=[]:q.disable())},q}}(a,a.document,d),function(a,b,c){var d=function(a){var b=c.util.callbacks,e=c.util.object,f=[["resolve","done",b({once:!0,memory:!0}),"resolved"],["reject","fail",b({once:!0,memory:!0}),"rejected"],["notify","progress",b({memory:!0})]],g="pending",h={},i={state:function(){return g},always:function(){return h.done(arguments).fail(arguments),this},then:function(){var a=arguments;return new d(function(b){f.forEach(function(c,d){var e="function"==typeof a[d]&&a[d];h[c[1]](function(){var a=e&&e.apply(this,arguments);a&&"function"==typeof a.promise?a.promise().done(b.resolve).fail(b.reject).progress(b.notify):b[c[0]+"With"](this===i?b.promise():this,e?[a]:arguments)})}),a=null}).promise()},promise:function(a){return a?e.merge(a,i):i}};return i.pipe=i.then,f.forEach(function(a,b){var c=a[2],d=a[3];i[a[1]]=c.add,d&&c.add(function(){g=d},f[1^b][2].disable,f[2][2].lock),h[a[0]]=function(){return h[a[0]+"With"](this===h?i:this,arguments),this},h[a[0]+"With"]=c.fireWith}),i.promise(h),a&&a.call(h,h),h};c.util.deferred=d}(a,a.document,d),function(a,b,d){function e(a){var b=d.getConfig(b);return"data-"+(b?b+"-":"")+a}var f=d.util.selectors,g=d.util.DOM;g.inheritAttr=function(a,b,c){var d,e=a.getAttribute(b);return!e&&(d=f.getClosestBySelector(a,c))?d.getAttribute(b):e},g.getNumberFromAttribute=function(a,b,c,d){var e=a.getAttribute(b),f=d;return isNaN(e)||("float"===c?(e=parseFloat(e),isNaN(e)||(f=e)):(e=parseInt(e,10),isNaN(e)||(f=e))),f},g.setNSData=function(a,b,c){a.setAttribute(e(b),c)},g.getNSData=function(a,b){var c=a.getAttribute(e(b));return"true"===c?!0:"false"===c?!1:c},g.hasNSData=function(a,b){return a.hasAttribute(e(b))},g.nsData=function(a,b,d){return d===c?g.getNSData(a,b):g.setNSData(a,b,d)},g.removeNSData=function(a,b){a.removeAttribute(e(b))},g.getData=function(a){var b,c,d,e,f="data-",g={},h=a.attributes,i=h.length;for(e=0;i>e;e++)b=h.item(e),c=b.nodeName,c.indexOf(f)>-1&&(d=b.value,g[c.replace(f,"")]="true"===d.toLowerCase()?!0:"false"===d.toLowerCase()?!1:d);return g},g.removeAttribute=function(a,b){a.removeAttribute(b),a[b]=!1},g.setAttribute=function(a,b,c){a[b]=c,a.setAttribute(b,c)}}(a,a.document,d),function(a,b){var c=b.engine,d={getInstance:c.getBinding,getAllInstances:c.getAllBindings};a.addEventListener(c.eventType.WIDGET_DEFINED,function(a){var d=a.detail,e=d.name;b.widget[e]=function(a,b){return c.instanceWidget(a,e,b)}},!0),b.widget=d}(a.document,d),function(a,b,c){function d(a,b){var c=a.classList;c.remove(b+n.left),c.remove(b+n.up),c.remove(b+n.right),c.remove(b+n.down)}var e=[].slice,f=b.engine,g=f.dataTau,h=b.util,i=b.event,j=h.DOM,k=h.object,l=function(){return this},m={},n={focusPrefix:"ui-focus-",blurPrefix:"ui-blur-",up:"up",down:"down",left:"left",right:"right"},o="function";m.configure=function(a,c,d){var e,f,g=this;g.options=g.options||{},g.element=g.element||null,a&&(e=a.name,f=a.namespace,g.name=e,g.widgetName=e,g.widgetEventPrefix=e.toLowerCase(),g.namespace=f,g.widgetFullName=((f?f+"-":"")+e).toLowerCase(),g.id=b.getUniqueId(),g.selector=a.selector),typeof g._configure===o&&g._configure(c),g._getCreateOptions(c),k.fastMerge(g.options,d)},m._getCreateOptions=function(a){var b=this.options,d=/[A-Z]/g;return b!==c&&Object.keys(b).forEach(function(c){var e=j.getNSData(a,c.replace(d,function(a){return"-"+a.toLowerCase()}));null!==e&&(b[c]=e)}),b},m.build=function(a){var b,c,d=this,e=a.getAttribute(g.built),f=a.getAttribute(g.name);return i.trigger(a,d.widgetEventPrefix+"beforecreate"),b=a.id,b?d.id=b:a.id=d.id,c=typeof d._build===o?d._build(a):a,e=e?e+g.separator+d.name:d.name,f=f?f+g.separator+d.name:d.name,a.setAttribute(g.built,e),a.setAttribute(g.name,f),c},m.init=function(a){var b=this;return b.id=a.id,typeof b._init===o&&b._init(a),a.getAttribute("disabled")||b.options.disabled===!0?b.disable():b.enable(),b},m.bindEvents=function(a,b){var c=this,d=a.getAttribute(g.bound);return b||(d=d?d+g.separator+c.name:c.name,a.setAttribute(g.bound,d)),typeof c._buildBindEvents===o&&c._buildBindEvents(a),b||typeof c._bindEvents!==o||c._bindEvents(a),c.trigger(c.widgetEventPrefix+"create",c),c},m._prepareAnimation=function(a,b){var c=this.element;switch(a){case"focus":d(c,n.blurPrefix),d(c,n.focusPrefix),c.classList.add(n.focusPrefix+b);break;case"blur":d(c,n.focusPrefix),d(c,n.blurPrefix),c.classList.add(n.blurPrefix+b)}},m._focus=function(a){this.element;typeof this._prepareAnimation===o&&this._prepareAnimation("focus",a),this.element.focus()},m._blur=function(a){var b=this.element;typeof this._prepareAnimation===o&&this._prepareAnimation("blur",a),b.blur()},m.destroy=function(a){var b=this;a=a||b.element,typeof b._destroy===o&&b._destroy(a),b.element&&b.trigger(b.widgetEventPrefix+"destroy"),a&&f.removeBinding(a,b.name)},m.disable=function(){var a=this,b=a.element,c=e.call(arguments);return typeof a._disable===o&&(c.unshift(b),a._disable.apply(a,c)),this},m.enable=function(){var a=this,b=a.element,c=e.call(arguments);return typeof a._enable===o&&(c.unshift(b),a._enable.apply(a,c)),this},m.refresh=function(){var a=this;return typeof a._refresh===o&&a._refresh.apply(a,arguments),a},m.option=function(){var a,b,d,f=this,g=e.call(arguments),h=g.shift(),i=g.shift(),j=!1;if("string"==typeof h)b=f._oneOption(h,i),h!==c&&i!==c&&(j=b,b=c);else if("object"==typeof h)for(a in h)h.hasOwnProperty(a)&&(d=f._oneOption(a,h[a]),a!==c&&h[a]!==c&&(j=j||d));return j&&f.refresh(),b},m._oneOption=function(a,b){var d,e=this,f=!1;return b===c?(d="_get"+(a[0].toUpperCase()+a.slice(1)),typeof e[d]===o?e[d]():e.options[a]):(d="_set"+(a[0].toUpperCase()+a.slice(1)),typeof e[d]===o?e[d](e.element,b):(e.options[a]=b,e.element&&(e.element.setAttribute("data-"+a.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()}),b),f=!0)),f)},m.isBound=function(a){var b=this.element;return a=a||this.name,b&&b.hasAttribute(g.bound)&&b.getAttribute(g.bound).indexOf(a)>-1},m.isBuilt=function(a){var b=this.element;return a=a||this.name,b&&b.hasAttribute(g.built)&&b.getAttribute(g.built).indexOf(a)>-1},m.value=function(a){var b=this;return a!==c?typeof b._setValue===o?b._setValue(a):b:typeof b._getValue===o?b._getValue():b},m.trigger=function(a,b,c,d){return i.trigger(this.element,a,b,c,d)},m.on=function(a,b,c){i.on(this.element,a,b,c)},m.off=function(a,b,c){i.off(this.element,a,b,c)},l.prototype=m,b.widget.BaseWidget=l}(a.document,d),function(a,b){b.widget.core=b.widget.core||{}}(a.document,d),function(c){function d(a,b,c){var d=a.element,e=d.classList,f=a._ui.overlay,g=a._callbacks.animationEnd;d.removeEventListener("animationend",g,!1),d.removeEventListener("webkitAnimationEnd",g,!1),b.split(" ").forEach(function(a){a=a.trim(),a.length>0&&(e.remove(a),f&&f.classList.remove(a))}),"pending"===c.state()&&c.resolve()}function e(a,b){var c=new i;return c.then(function(){c===a._callbacks.transitionDeferred&&b()}),a._callbacks.transitionDeferred=c,c}var f=c.widget.BaseWidget,g=c.engine,h=c.util.object,i=c.util.deferred,j=c.util.selectors,k=function(){var a=this,b={};a.selectors=p,a.options=h.merge({},k.defaults,{fullSize:c.getConfig("popupFullSize",k.defaults.fullSize),enablePopupScroll:c.getConfig("enablePopupScroll",k.defaults.enablePopupScroll)}),a.state=m.CLOSED,b.overlay=null,b.header=null,b.footer=null,b.content=null,b.container=null,a._ui=b,a._callbacks={}},l={transition:"none",dismissible:!0,overlay:!0,header:!1,footer:!1,overlayClass:"",history:!0,fullSize:!1,enablePopupScroll:null},m={DURING_OPENING:0,OPENED:1,DURING_CLOSING:2,CLOSED:3},n="ui-popup",o={popup:n,active:n+"-active",overlay:n+"-overlay",header:n+"-header",footer:n+"-footer",content:n+"-content",wrapper:n+"-wrapper",build:"ui-build",popupScroll:"ui-scroll-on",fixed:"ui-fixed"},p={header:"."+o.header,content:"."+o.content,footer:"."+o.footer},q="popup",r={show:q+"show",hide:q+"hide",before_show:q+"beforeshow",before_hide:q+"beforehide"},s=new f;k.classes=o,k.events=r,k.defaults=l,s._buildContent=function(a){var c,d,e=this,f=e._ui,g=e.selectors,h=f.content||a.querySelector(g.content),i=f.footer||a.querySelector(g.footer),j=[].slice.call(a.childNodes),k=j.length;if(!h){for(h=b.createElement("div"),h.className=o.content,c=0;k>c;++c)d=j[c],d!==f.footer&&d!==f.header&&h.appendChild(d);a.insertBefore(h,i)}h.classList.add(o.content),f.content=h},s._buildHeader=function(a){var c=this,d=c._ui,e=c.options,f=c.selectors,g=d.content||a.querySelector(f.content),h=d.header||a.querySelector(f.header);h||e.header===!1||(h=b.createElement("div"),h.className=o.header,"boolean"!=typeof e.header&&(h.innerHTML=e.header),a.insertBefore(h,g)),h&&h.classList.add(o.header),d.header=h},s._setHeader=function(a,b){var c=this,d=c._ui,e=d.header;e&&(e.parentNode.removeChild(e),d.header=null),c.options.header=b,c._buildHeader(d.container)},s._buildFooter=function(a){var c=this,d=c._ui,e=c.options,f=d.footer||a.querySelector(c.selectors.footer);f||e.footer===!1||(f=b.createElement("div"),f.className=o.footer,"boolean"!=typeof e.footer&&(f.innerHTML=e.footer),a.appendChild(f)),f&&f.classList.add(o.footer),d.footer=f},s._setFooter=function(a,b){var c=this,d=c._ui,e=d.footer;e&&(e.parentNode.removeChild(e),d.footer=null),c.options.footer=b,c._buildFooter(d.container)},s._build=function(a){var c,d=this,e=d._ui,f=a.firstChild;for(a.classList.add(o.popup),c=b.createElement("div"),c.classList.add(o.wrapper),e.wrapper=c,e.container=c;f;)c.appendChild(f),f=a.firstChild;return a.appendChild(c),this._buildHeader(e.container),this._buildFooter(e.container),this._buildContent(e.container),this._setOverlay(a,this.options.overlay),a},s._setOverlay=function(a,c){var d=this,e=d.options.overlayClass,f=d._ui,g=f.overlay;c?(g||(g=b.createElement("div"),a.parentNode.insertBefore(g,a),f.overlay=g),g.className=o.overlay+(e?" "+e:"")):g&&(g.parentNode.removeChild(g),f.overlay=null)},s._isActive=function(){var a=this.state;return a===m.DURING_OPENING||a===m.OPENED},s._isOpened=function(){return this.state===m.OPENED},s._init=function(b){var c=this,d=c.selectors,e=c._ui;e.header=e.header||b.querySelector(d.header),e.footer=e.footer||b.querySelector(d.footer),e.content=e.content||b.querySelector(d.content),e.wrapper=e.wrapper||b.querySelector("."+o.wrapper),e.container=e.wrapper||b,e.page=j.getClosestByClass(b,"ui-page")||a},s._setActive=function(a){var b=this,c=o.active,d=b.element.classList,e=g.getRouter().getRoute("popup"),f=b.options;"string"!=typeof f.positionTo&&(f.positionTo=null),a?(e.setActive(b,f),d.add(c),b.state=m.OPENED):(e.setActive(null,f),d.remove(c),b.state=m.CLOSED)},s._bindEvents=function(){var b=this;b._ui.page.addEventListener("pagebeforehide",b,!1),a.addEventListener("resize",b,!1),b._bindOverlayEvents()},s._bindOverlayEvents=function(){var a=this._ui.overlay;
+a&&a.addEventListener("click",this,!1)},s._unbindOverlayEvents=function(){var a=this._ui.overlay;a&&a.removeEventListener("click",this,!1)},s._unbindEvents=function(){var b=this;b._ui.page.removeEventListener("pagebeforehide",b,!1),a.removeEventListener("resize",b,!1),b._unbindOverlayEvents()},s._layout=function(b){var c=this,d=b.classList,e=c._ui,f=e.wrapper,g=e.header,h=e.footer,i=e.content,j=0,k=0;c.options.enablePopupScroll===!0?b.classList.add(o.popupScroll):b.classList.remove(o.popupScroll),d.contains(o.popupScroll)&&(d.add(o.build),g&&(j=g.offsetHeight,g.classList.contains(o.fixed)&&(i.style.marginTop=j+"px")),h&&(k=h.offsetHeight,h.classList.contains(o.fixed)&&(i.style.marginBottom=k+"px")),f.style.height=Math.min(i.offsetHeight+j+k,b.offsetHeight)+"px",d.remove(o.build)),!c.options.fullSize||d.contains("ui-popup-toast")||d.contains("ui-ctxpopup")||(f.style.height=a.innerHeight+"px")},s.open=function(a){var b=this,c=h.merge(b.options,a);b._isActive()||(c.dismissible||g.getRouter().lock(),b._show(c))},s.close=function(a){var b=this,c=h.merge(b.options,a);b._isActive()&&(c.dismissible||g.getRouter().unlock(),b._hide(c))},s._show=function(a){var b=this,c=h.merge({},a);b._layout(b.element),b.state=m.DURING_OPENING,c.ext=" in ",b.trigger(r.before_show),b._transition(c,b._onShow.bind(b))},s._onShow=function(){var a=this,b=a._ui.overlay;b&&(b.style.display="block"),a._setActive(!0),a.trigger(r.show)},s._hide=function(a){var b=this,c=b._isOpened();b.state=m.DURING_CLOSING,b.trigger(r.before_hide),c?(a.ext=" out ",b._transition(a,b._onHide.bind(b))):(b._callbacks.transitionDeferred.reject(),b._callbacks.animationEnd(),b._onHide())},s._onHide=function(){var a=this,b=a._ui.overlay;b&&(b.style.display=""),a._setActive(!1),a.trigger(r.hide)},s.handleEvent=function(a){var b=this;switch(a.type){case"pagebeforehide":b.close({transition:"none"});break;case"resize":b._onResize(a);break;case"click":a.target===b._ui.overlay&&b._onClickOverlay(a)}},s._refresh=function(){var a=this;a._unbindOverlayEvents(),a._setOverlay(a.element,a.options.overlay),a._bindOverlayEvents()},s._onClickOverlay=function(a){var b=this.options;a.preventDefault(),a.stopPropagation(),b.dismissible&&this.close()},s._onResize=function(){this._isOpened()&&this._refresh()},s._transition=function(b,c){var f,g,h=this,i=b.transition||h.options.transition||"none",j=i+b.ext,k=h.element,l=h._ui.overlay,m=k.classList;return f=e(h,c),"none"!==i?(g=d.bind(null,h,j,f),h._callbacks.animationEnd=g,k.addEventListener("animationend",g,!1),k.addEventListener("webkitAnimationEnd",g,!1),j.split(" ").forEach(function(a){a=a.trim(),a.length>0&&(m.add(a),l&&l.classList.add(a))})):a.setTimeout(f.resolve,0),f},s._destroy=function(){var a=this,b=a.element;a._unbindEvents(b),a._setOverlay(b,!1)},k.prototype=s,c.widget.core.Popup=k,g.defineWidget("Popup","[data-role='popup'], .ui-popup",["open","close","reposition"],k,"core")}(d),function(a,b,c){function d(b,c){var d,e,f,g=b.options,h=g.arrow.split(","),i=b.element,j=a.innerWidth,k=a.innerHeight,l=i.offsetWidth,m=i.offsetHeight,n=c.getBoundingClientRect(),o=n.left,p=n.top,q=Math.min(n.width,j-o),r=Math.min(n.height,k-p),s={l:{dir:"l",fixedPositionField:"x",fixedPositionFactor:1,size:l,max:o},r:{dir:"r",fixedPositionField:"x",fixedPositionFactor:-1,size:l,max:j-o-q},b:{dir:"b",fixedPositionField:"y",fixedPositionFactor:-1,size:m,max:p},t:{dir:"t",fixedPositionField:"y",fixedPositionFactor:1,size:m,max:k-p-r}};return d=s[h[0]]||s.t,h.forEach(function(a){var b=s[a],c=b.max;e||(b.size<c?e=b:c>d.max&&(d=b))}),e||(e=d,"x"===e.fixedPositionField?l=e.max:m=e.max),f={x:o+q/2-l/2,y:p+r/2-m/2,w:l,h:m,dir:e.dir},f[e.fixedPositionField]+=("x"===e.fixedPositionField?(l+q)*e.fixedPositionFactor:(m+r)*e.fixedPositionFactor)/2+g.distance*e.fixedPositionFactor,f}function e(b,c,d,e){var f,g,h=b._ui,i=h.wrapper,j=h.arrow,l=b.element,m=j.style,n=a.innerWidth,o=a.innerHeight,p=i.getBoundingClientRect(),q=j.offsetWidth/2,r={"padding-top":0,"padding-bottom":0,"padding-left":0,"padding-right":0},s={"margin-top":0,"margin-bottom":0,"margin-left":0,"margin-right":0,"padding-top":0,"padding-bottom":0,"padding-left":0,"padding-right":0},t={t:{pos:d,min:"left",max:"right",posField:"x",valField:"w",styleField:"left"},b:{pos:d,min:"left",max:"right",posField:"x",valField:"w",styleField:"left"},l:{pos:e,min:"top",max:"bottom",posField:"y",valField:"h",styleField:"top"},r:{pos:e,min:"top",max:"bottom",posField:"y",valField:"h",styleField:"top"}},u=t[c.dir];return k.extractCSSProperties(l,r),k.extractCSSProperties(i,s),f={t:r["padding-top"]+s["margin-top"]+s["padding-top"],b:r["padding-bottom"]+s["margin-bottom"]+s["padding-bottom"],l:r["padding-left"]+s["margin-left"]+s["padding-left"],r:r["padding-right"]+s["margin-right"]+s["padding-right"]},p={left:f.l+c.x,right:f.l+p.width+c.x,top:f.t+c.y,bottom:p.height+f.t+c.y},p[u.min]>u.pos-q?(g=c[u.posField],g>0?(c[u.posField]=Math.max(u.pos-q,0),u.pos=c[u.posField]+q):u.pos=p[u.min]+q):p[u.max]<u.pos+q&&(g=("w"===u.valField?n:o)-(c[u.posField]+c[u.valField]),g>0?(c[u.posField]+=Math.min(g,u.pos+q-p[u.max]),u.pos=c[u.posField]+c[u.valField]-q):u.pos=p[u.max]-q),m[u.styleField]=u.pos-q-c[u.posField]+"px",c}function f(a,b){var c=b.getBoundingClientRect(),d={};switch(a){case"l":d.x=c.right,d.y=c.top+c.height/2;break;case"r":d.x=c.left,d.y=c.top+c.height/2;break;case"t":d.x=c.left+c.width/2,d.y=c.bottom;break;case"b":d.x=c.left+c.width/2,d.y=c.top}return d}var g=c.widget.core.Popup,h=g.prototype,i=c.engine,j=c.util.object,k=c.util.DOM,l={arrow:"l,b,r,t",positionTo:"window",distance:0},m=function(){var a,b=this;g.call(b),b.options=j.merge(b.options,l),a=b._ui||{},a.wrapper=null,a.arrow=null,b._ui=a},n="ui-popup",o=j.merge({},g.classes,{context:"ui-ctxpopup",arrow:"ui-arrow",arrowDir:n+"-arrow-"}),p=j.merge({},g.events,{before_position:"beforeposition"}),q={WINDOW:"window",ORIGIN:"origin"},r=new g;m.defaults=j.merge({},g.defaults,l),m.classes=o,m.events=p,r._build=function(a){var c,d=this,e=d._ui;return c=b.createElement("div"),c.appendChild(b.createElement("span")),c.classList.add(o.arrow),e.arrow=c,a.appendChild(c),h._build.call(d,a),a},r._init=function(a){var b=this,c=b._ui;h._init.call(this,a),c.arrow=c.arrow||a.querySelector("."+o.arrow)},r._layout=function(a){var b=this;this._reposition(),h._layout.call(b,a)},r._reposition=function(a){var b=this,c=b.element,d=c.classList;a=j.merge({},b.options,a),b.trigger(p.before_position,null,!1),d.add(o.build),b._setContentHeight(),b._placementCoords(a),d.remove(o.build)},r._findClickedElement=function(a,c){return b.elementFromPoint(a,c)},r._placementCoords=function(a){var c,g,h,i,j,k=this,l=a.positionTo,m=a.x,n=a.y,p=k.element,r=p.style,s=p.classList;if("string"==typeof l){if(l===q.ORIGIN&&"number"==typeof m&&"number"==typeof n)h=k._findClickedElement(m,n);else if(l!==q.WINDOW)try{h=b.querySelector(a.positionTo)}catch(t){}}else h=l;h&&(s.add(o.context),g=p.offsetHeight,j=d(k,h),i=j.dir,s.add(o.arrowDir+i),k._ui.arrow.setAttribute("type",i),"number"!=typeof m&&"number"!=typeof n&&(c=f(i,h),m=c.x,n=c.y),j=e(k,j,m,n),g>j.h&&k._setContentHeight(j.h),r.left=j.x+"px",r.top=j.y+"px")},r._setContentHeight=function(b){var c,d,e,f=this,g=f.element,h=f._ui.content;h&&(c=h.style,(c.height||c.minHeight)&&(c.height="",c.minHeight=""),b=b||a.innerHeight,d=h.offsetHeight,e=g.offsetHeight,e>b&&(d-=e-b,c.height=d+"px",c.minHeight=d+"px"))},r._onHide=function(){var a=this,b=a._ui,c=a.element,d=c.classList,e=(b.content,b.arrow);d.remove(o.context),["l","r","b","t"].forEach(function(a){d.remove(o.arrowDir+a)}),c.removeAttribute("style"),e.removeAttribute("style"),h._onHide.call(a)},r._destroy=function(){var a,b=this,c=b.element,d=b._ui,e=d.wrapper,f=e.children.length;for(h._destroy.call(b),a=0;f>a;a++)c.appendChild(e.children[0]);e.parentNode.removeChild(e),d.arrow.parentNode.removeChild(d.arrow),d.wrapper=null,d.arrow=null},r.reposition=function(a){this._isActive()&&this._reposition(a)},m.prototype=r,c.widget.core.ContextPopup=m,i.defineWidget("Popup","[data-role='popup'], .ui-popup",["open","close","reposition"],m,"core",!0),c.widget.popup=c.widget.Popup}(a,a.document,d),function(a,b){function c(a){a.reset()}function d(a,b){var c=a._ui.marqueeInnerElement,d=c.scrollWidth,e=d/b;return e}function e(b,c){var d,e=b._ui.marqueeInnerElement,f=b.element,g=f.offsetWidth,h=e.scrollWidth,i=a.createElement("style"),j=c+"-"+b.id;switch(c){case t.SLIDE:d="@-webkit-keyframes "+j+" {0% { -webkit-transform: translate3d(0, 0, 0);}98%, 100% { -webkit-transform: translate3d(-"+(h-g)+"px, 0, 0);} }";break;case t.SCROLL:d="@-webkit-keyframes "+j+" {0% { -webkit-transform: translate3d(0, 0, 0);}100% { -webkit-transform: translate3d(-100%, 0, 0);} }";break;case t.ALTERNATE:d="@-webkit-keyframes "+j+" {0% { -webkit-transform: translate3d(0, 0, 0);}50% { -webkit-transform: translate3d(-"+(h-g)+"px, 0, 0);}100% { -webkit-transform: translate3d(0, 0, 0);} }";break;default:d=null}return d&&(b.element.appendChild(i),i.sheet.insertRule(d,0),b._ui.styleSheelElement=i),j}function f(a,c){var f=a._ui.marqueeInnerElement,g=f.style,h=d(a,isNaN(parseInt(c.speed))?v.speed:c.speed),i=e(a,c.marqueeStyle);isNaN(parseInt(c.speed))&&b.warn("speed value must be number(px/sec)"),"infinite"!==c.iteration&&isNaN(c.iteration)&&b.warn("iteration count must be number or 'infinite'"),isNaN(c.delay)&&b.warn("delay value must be number"),g.webkitAnimationName=i,g.webkitAnimationDuration=h+"s",g.webkitAnimationIterationCount=c.iteration,g.webkitAnimationTimingFunction=c.timingFunction,g.webkitAnimationDelay=c.delay+"s"}function g(a,b){var c=a.element;switch(b){case u.GRADIENT:c.offsetWidth<a._ui.marqueeInnerElement.scrollWidth&&c.classList.add(r.MARQUEE_GRADIENT);break;case u.ELLIPSIS:c.classList.add(r.MARQUEE_ELLIPSIS)}}function h(a,b){b?a.start():a.stop()}var i=b.widget.BaseWidget,j=b.engine,k=b.event,l=b.util.object,m=function(){this._ui={},this._ui.marqueeInnerElement=null,this._ui.styleSheelElement=null,this._state=p.STOPPED,this.options=l.merge({},m.defaults),this._callbacks={}},n=new i,o="ui-marquee",p={RUNNING:"running",STOPPED:"stopped",IDLE:"idle"},q={MARQUEE_START:"marqueestart",MARQUEE_END:"marqueeend",MARQUEE_STOPPED:"marqueestopped"},r={MARQUEE_CONTENT:o+"-content",MARQUEE_GRADIENT:o+"-gradient",MARQUEE_ELLIPSIS:o+"-ellipsis",ANIMATION_RUNNING:o+"-anim-running",ANIMATION_STOPPED:o+"-anim-stopped",ANIMATION_IDLE:o+"-anim-idle"},s={MARQUEE_CONTENT:"."+o+"-content"},t={SCROLL:"scroll",SLIDE:"slide",ALTERNATE:"alternate"},u={GRADIENT:"gradient",ELLIPSIS:"ellipsis",NONE:"none"},v={marqueeStyle:t.SLIDE,speed:60,iteration:1,delay:2,timingFunction:"linear",ellipsisEffect:"gradient",autoRun:!0};m.classes=r,m.defaults=v,n._build=function(b){for(var c=a.createElement("div");b.hasChildNodes();)c.appendChild(b.removeChild(b.firstChild));return c.classList.add(r.MARQUEE_CONTENT),b.appendChild(c),this._ui.marqueeInnerElement=c,b},n._init=function(a){var b=this;return b._ui.marqueeInnerElement=b._ui.marqueeInnerElement||a.querySelector(s.MARQUEE_CONTENT),g(b,b.options.ellipsisEffect),f(b,b.options),h(b,b.options.autoRun),a},n._bindEvents=function(){var a=this,b=a._ui.marqueeInnerElement,d=c.bind(null,a);a._callbacks.animationEnd=d,k.one(b,"webkitAnimationEnd",d)},n._refresh=function(){var a=this;a._resetStyle(),g(a,a.options),f(a,a.options),h(a,a.options.autoRun)},n._resetStyle=function(){var a=this,b=a.element,c=a._ui.styleSheelElement,d=a._ui.marqueeInnerElement.style;b.contains(c)&&b.removeChild(c),d.webkitAnimationName="",d.webkitAnimationDuration="",d.webkitAnimationDelay="",d.webkitAnimationIterationCount="",d.webkitAnimationTimingFunction=""},n._resetDOM=function(){for(var a=this._ui;a.marqueeInnerElement.hasChildNodes();)this.element.appendChild(a.marqueeInnerElement.removeChild(a.marqueeInnerElement.firstChild));return this.element.removeChild(a.marqueeInnerElement),null},n._destroy=function(){var a=this;return a._resetStyle(),a._resetDOM(),a._callbacks=null,a._ui=null,null},n._animationStart=function(){var a=this,b=a.element.classList,c=a._ui.marqueeInnerElement.classList;a._state=p.RUNNING,b.contains(r.MARQUEE_ELLIPSIS)&&b.remove(r.MARQUEE_ELLIPSIS),c.remove(r.ANIMATION_IDLE,r.ANIMATION_STOPPED),c.add(r.ANIMATION_RUNNING),a.trigger(q.MARQUEE_START)},n.start=function(){var a=this;switch(a._state){case p.IDLE:f(a,a.options),a._bindEvents(),a._animationStart();break;case p.STOPPED:a._state=p.RUNNING,a._animationStart();break;case p.RUNNING:}},n.stop=function(){var a=this,b=a._ui.marqueeInnerElement.classList;a._state!=p.IDLE&&(a._state=p.STOPPED,b.remove(r.ANIMATION_RUNNING),b.add(r.ANIMATION_STOPPED),a.trigger(q.MARQUEE_STOPPED))},n.reset=function(){var a=this,b=a.element.classList,c=a._ui.marqueeInnerElement.classList;a._state!=p.IDLE&&(a._state=p.IDLE,c.remove(r.ANIMATION_RUNNING,r.ANIMATION_STOPPED),c.add(r.ANIMATION_IDLE),a.options.ellipsisEffect==u.ELLIPSIS&&b.add(r.MARQUEE_ELLIPSIS),a._resetStyle(),a.trigger(q.MARQUEE_END))},m.prototype=n,b.widget.core.Marquee=m,j.defineWidget("Marquee",".ui-marquee",["start","stop","reset"],m,"core")}(a.document,d),function(a,b){b.widget.wearable=b.widget.wearable||{}}(a,d),function(a,b){var c=b.widget.BaseWidget,d=b.engine,e=function(){},f=new c;e.events={},f._build=function(a){return a},f._init=function(a){return a},f._bindEvents=function(a){return a},f._refresh=function(){return null},f._destroy=function(){return null},e.prototype=f,b.widget.wearable.Button=e,d.defineWidget("Button",".ui-btn",[],e,"wearable")}(a.document,d),function(a){var b=function(b,c){return new a.event.gesture.Instance(b,c)};b.defaults={triggerEvent:!1,updateVelocityInterval:16,estimatedPointerTimeDifference:15},b.Orientation={VERTICAL:"vertical",HORIZONTAL:"horizontal"},b.Direction={UP:"up",DOWN:"down",LEFT:"left",RIGHT:"right"},b.Event={START:"start",MOVE:"move",END:"end",CANCEL:"cancel",BLOCKED:"blocked"},b.Result={PENDING:1,RUNNING:2,FINISHED:4,BLOCK:8},b.plugin={},b.createDetector=function(a,c,d){if(!b.plugin[a])throw a+" gesture is not supported";return new b.plugin[a](c,d)},a.event.gesture=b}(d,a),function(a,b){var c=a.event.gesture;c.utils={getCenter:function(a){var c=[],d=[];return[].forEach.call(a,function(a){c.push(isNaN(a.clientX)?a.pageX:a.clientX),d.push(isNaN(a.clientY)?a.pageY:a.clientY)}),{clientX:(b.min.apply(b,c)+b.max.apply(b,c))/2,clientY:(b.min.apply(b,d)+b.max.apply(b,d))/2}},getVelocity:function(a,c,d){return{x:b.abs(c/a)||0,y:b.abs(d/a)||0}},getAngle:function(a,c){var d=c.clientY-a.clientY,e=c.clientX-a.clientX;return 180*b.atan2(d,e)/b.PI},getDirection:function(a,d){var e=b.abs(a.clientX-d.clientX),f=b.abs(a.clientY-d.clientY);return e>=f?a.clientX-d.clientX>0?c.Direction.LEFT:c.Direction.RIGHT:a.clientY-d.clientY>0?c.Direction.UP:c.Direction.DOWN},getDistance:function(a,c){var d=c.clientX-a.clientX,e=c.clientY-a.clientY;return b.sqrt(d*d+e*e)},getScale:function(a,b){return a.length>=2&&b.length>=2?this.getDistance(b[0],b[1])/this.getDistance(a[0],a[1]):1},getRotation:function(a,b){return a.length>=2&&b.length>=2?this.getAngle(b[1],b[0])-this.getAngle(a[1],a[0]):0},isVertical:function(a){return a===c.Direction.UP||a===c.Direction.DOWN},isHorizontal:function(a){return a===c.Direction.LEFT||a===c.Direction.RIGHT},getOrientation:function(a){return this.isVertical(a)?c.Orientation.VERTICAL:c.Orientation.HORIZONTAL}}}(d,a.Math),function(a){var b=a.event.gesture,c=a.util.object.merge,d=function(a,b){this.sender=b,this.strategy=a.create(),this.name=this.strategy.name,this.index=this.strategy.index||100,this.options=this.strategy.options||{}};d.prototype.detect=function(a){return this.strategy.handler(a,this.sender,this.strategy.options)},d.Sender={sendEvent:function(){}},d.plugin={},d.plugin.create=function(a){a.types||(a.types=[a.name]);var b=d.plugin[a.name]=function(b){this.options=c({},a.defaults,b)};return b.prototype.create=function(){return c({options:this.options},a)},b},b.Detector=d}(d,a),function(a,b,c){var d=a.event.gesture,e=a.util.object.merge,f="ontouchstart"in b;d.Manager=function(){var a=null,b=null,g=!1,h=!1,i=function(){this.instances=[],this.gestureDetectors=[],this.runningDetectors=[],this.detectorRequestedBlock=null,this.unregisterBlockList=[],this.gestureEvents=null,this.velocity=null};return i.prototype={_bindStartEvents:function(a){var b=a.getElement();f&&b.addEventListener("touchstart",this),b.addEventListener("mousedown",this)},_bindEvents:function(){f&&(c.addEventListener("touchmove",this),c.addEventListener("touchend",this),c.addEventListener("touchcancel",this)),c.addEventListener("mousemove",this),c.addEventListener("mouseup",this)},_unbindStartEvents:function(a){var b=a.getElement();f&&b.removeEventListener("touchstart",this),b.removeEventListener("mousedown",this)},_unbindEvents:function(){f&&(c.removeEventListener("touchmove",this),c.removeEventListener("touchend",this),c.removeEventListener("touchcancel",this)),c.removeEventListener("mousemove",this),c.removeEventListener("mouseup",this)},handleEvent:function(a){var b=a.type.toLowerCase();if(b.match(/touch/)&&(h=!0),!b.match(/mouse/)||!h&&1===a.which)switch(a.type){case"mousedown":case"touchstart":this._start(a);break;case"mousemove":case"touchmove":this._move(a);break;case"mouseup":case"touchend":this._end(a);break;case"touchcancel":this._cancel(a)}},_start:function(a){var c=a.currentTarget,f=[];g||(this._resetDetecting(),this._bindEvents(),b=this._createDefaultEventData(d.Event.START,a),this.gestureEvents={start:b,last:b},this.velocity={event:b,x:0,y:0},b=e(b,this._createGestureEvent(d.Event.START,a)),g=!0),this.instances.forEach(function(a){a.getElement()===c&&(f=f.concat(a.getGestureDetectors()))},this),f.sort(function(a,b){return a.index<b.index?-1:a.index>b.index?1:0}),this.gestureDetectors=this.gestureDetectors.concat(f),this._detect(f,b)},_move:function(a){g&&(a=this._createGestureEvent(d.Event.MOVE,a),this._detect(this.gestureDetectors,a),this.gestureEvents.last=a)},_end:function(a){a=e({},this.gestureEvents.last,this._createDefaultEventData(d.Event.END,a)),a.pointers.length>0||(this._detect(this.gestureDetectors,a),this.unregisterBlockList.forEach(function(a){this.unregist(a)},this),this._resetDetecting(),h=!1)},_cancel:function(a){a=e({},this.gestureEvents.last,this._createDefaultEventData(d.Event.CANCEL,a)),this._detect(this.gestureDetectors,a),this.unregisterBlockList.forEach(function(a){this.unregist(a)},this),this._resetDetecting(),h=!1},_detect:function(a,b){var c=[];a.forEach(function(a){var e;this.detectorRequestedBlock||(e=a.detect(b),e&d.Result.RUNNING&&this.runningDetectors.indexOf(a)<0&&this.runningDetectors.push(a),e&d.Result.FINISHED&&c.push(a),e&d.Result.BLOCK&&(this.detectorRequestedBlock=a))},this),c.forEach(function(a){var b;b=this.gestureDetectors.indexOf(a),b>-1&&this.gestureDetectors.splice(b,1),b=this.runningDetectors.indexOf(a),b>-1&&this.runningDetectors.splice(b,1)},this),this.detectorRequestedBlock&&(this.runningDetectors.forEach(function(a){var c=e({},b,{eventType:d.Event.BLOCKED});a.detect(c)}),this.runningDetectors.length=0,this.gestureDetectors.length=0,c.indexOf(this.detectorRequestedBlock)<0&&this.gestureDetectors.push(this.detectorRequestedBlock))},_resetDetecting:function(){g=!1,b=null,this.gestureDetectors.length=0,this.runningDetectors.length=0,this.detectorRequestedBlock=null,this.gestureEvents=null,this.velocity=null,this._unbindEvents()},_createDefaultEventData:function(a,b){var c=b.touches?b.touches:"mouseup"===b.type?[]:b.identifier=1&&[b],d=c[0],e=(new Date).getTime();return{eventType:a,timeStamp:e,pointer:d,pointers:c,srcEvent:b,preventDefault:function(){this.srcEvent.preventDefault()},stopPropagation:function(){this.srcEvent.stopPropagation()}}},_createGestureEvent:function(a,b){var c,f=this._createDefaultEventData(a,b),g=this.gestureEvents.start,h=this.gestureEvents.last,i=this.velocity.event,j={time:f.timeStamp-g.timeStamp,x:f.pointer.clientX-g.pointer.clientX,y:f.pointer.clientY-g.pointer.clientY},k={x:f.pointer.clientX-h.pointer.clientX,y:f.pointer.clientY-h.pointer.clientY},l=this.velocity,m=d.defaults.estimatedPointerTimeDifference;return g&&f.pointers.length!==g.pointers.length&&(g.pointers=[],[].forEach.call(f.pointers,function(a){g.pointers.push(e({},a))})),f.timeStamp-i.timeStamp>d.defaults.updateVelocityInterval&&(l=d.utils.getVelocity(f.timeStamp-i.timeStamp,f.pointer.clientX-i.pointer.clientX,f.pointer.clientY-i.pointer.clientY),e(this.velocity,l,{event:f})),c={x:Math.round(f.pointer.clientX+m*l.x*(k.x<0?-1:1)),y:Math.round(f.pointer.clientY+m*l.y*(k.y<0?-1:1))},(k.x<0&&c.x>h.estimatedX||k.x>0&&c.x<h.estimatedX)&&(c.x=h.estimatedX),(k.y<0&&c.y>h.estimatedY||k.y>0&&c.y<h.estimatedY)&&(c.y=h.estimatedY),e(f,{deltaTime:j.time,deltaX:j.x,deltaY:j.y,velocityX:l.x,velocityY:l.y,estimatedX:c.x,estimatedY:c.y,estimatedDeltaX:c.x-g.pointer.clientX,estimatedDeltaY:c.y-g.pointer.clientY,distance:d.utils.getDistance(g.pointer,f.pointer),angle:d.utils.getAngle(g.pointer,f.pointer),direction:d.utils.getDirection(g.pointer,f.pointer),scale:d.utils.getScale(g.pointers,f.pointers),rotation:d.utils.getRotation(g.pointers,f.pointers),startEvent:g,lastEvent:h}),f},register:function(a){var b=this.instances.indexOf(a);0>b&&(this.instances.push(a),this._bindStartEvents(a))},unregister:function(a){var b;return this.gestureDetectors.length?(this.unregisterBlockList.push(a),void 0):(b=this.instances.indexOf(a),b>-1&&(this.instances.splice(b,1),this._unbindStartEvents(a)),this.instances.length||this._destroy(),void 0)},_destroy:function(){this._resetDetecting(),this.instances.length=0,this.unregisterBlockList.length=0,h=!1,a=null}},{getInstance:function(){return a?a:a=new i}}}()}(d,a,a.document),function(a){var b=a.event.gesture,c=a.event.gesture.Detector,d=a.event.gesture.Manager,e=a.event,f=a.util.object.merge;b.Instance=function(a,c){this.element=a,this.eventDetectors=[],this.options=f({},b.defaults,c),this.gestureManager=null,this._init()},b.Instance.prototype={_init:function(){this.gestureManager=d.getInstance(),this.eventSender=f({},c.Sender,{sendEvent:this.trigger.bind(this)})},_findGestureDetector:function(a){var b,d,e=c.plugin;for(d in e)if(e.hasOwnProperty(d)&&(b=e[d],b.prototype.types.indexOf(a)>-1))return b},setOptions:function(a){return f(this.options,a),this},addDetector:function(a){var b=new c(a,this.eventSender),d=!!this.eventDetectors.length;return this.eventDetectors.push(b),this.eventDetectors.length&&!d&&this.gestureManager.register(this),this},removeDetector:function(a){var b=this.eventDetectors.indexOf(a);return b>-1&&this.eventDetectors.splice(b,1),this.eventDetectors.length||this.gestureManager.unregister(this),this},trigger:function(a,b){e.trigger(this.element,a,b,!1)},getElement:function(){return this.element},getGestureDetectors:function(){return this.eventDetectors},destroy:function(){this.element=null,this.eventHandlers={},this.gestureManager=null,this.eventSender=null,this.eventDetectors.length=0}}}(d,a),function(a,b){var c=a.event.gesture,d=a.event.gesture.Detector,e=a.util.object.merge,f=!!b.navigator.userAgent.match(/tizen/i);a.event.gesture.Drag=d.plugin.create({name:"drag",index:500,types:["drag","dragstart","dragend","dragcancel"],defaults:{blockHorizontal:!1,blockVertical:!1,threshold:10,angleThreshold:20,delay:0},triggerd:!1,handler:function(a,b,d){var g=a,h=d.threshold,i=d.angleThreshold,j=c.Result.PENDING,k={drag:this.types[0],start:this.types[1],end:this.types[2],cancel:this.types[3]},l=g.direction,m=Math.abs(g.angle);if(!this.triggerd&&g.eventType===c.Event.MOVE){if(Math.abs(g.deltaX)<h&&Math.abs(g.deltaY)<h)return f||g.preventDefault(),c.Result.PENDING;if(d.delay&&g.deltaTime<d.delay)return f||g.preventDefault(),c.Result.PENDING;if(d.blockHorizontal&&c.utils.isHorizontal(g.direction)||d.blockVertical&&c.utils.isVertical(g.direction))return c.Result.FINISHED;if(d.blockHorizontal&&(90-i>m||m>90+i))return c.Result.FINISHED;if(d.blockVertical&&m>0+i&&180-i>m)return c.Result.FINISHED;this.fixedStartPointX=0,this.fixedStartPointY=0,c.utils.isHorizontal(g.direction)?this.fixedStartPointX=(g.deltaX<0?1:-1)*h:this.fixedStartPointY=(g.deltaY<0?1:-1)*h}switch(d.blockHorizontal&&(l=g.deltaY<0?c.Direction.UP:c.Direction.DOWN),d.blockVertical&&(l=g.deltaX<0?c.Direction.LEFT:c.Direction.RIGHT),g=e({},g,{deltaX:g.deltaX+this.fixedStartPointX,deltaY:g.deltaY+this.fixedStartPointY,estimatedDeltaX:g.estimatedDeltaX+this.fixedStartPointX,estimatedDeltaY:g.estimatedDeltaY+this.fixedStartPointY,direction:l}),g.eventType){case c.Event.START:this.triggerd=!1;break;case c.Event.MOVE:j=c.Result.RUNNING,this.triggerd||b.sendEvent(k.start,g),b.sendEvent(k.drag,g),g.preventDefault(),this.triggerd=!0;break;case c.Event.BLOCKED:case c.Event.END:j=c.Result.FINISHED,this.triggerd&&(b.sendEvent(k.end,g),g.preventDefault(),this.triggerd=!1);break;case c.Event.CANCEL:j=c.Result.FINISHED,this.triggerd&&(b.sendEvent(k.cancel,g),g.preventDefault(),this.triggerd=!1)}return j}})}(d,a),function(a){var b=a.event.gesture,c=a.event.gesture.Detector;a.event.gesture.Swipe=c.plugin.create({name:"swipe",index:400,defaults:{timeThreshold:400,velocity:.6,orientation:b.Orientation.HORIZONTAL},handler:function(a,c,d){var e=a,f=b.Result.PENDING;return e.eventType!==b.Event.END?f:e.deltaTime>d.timeThreshold||d.orientation!==b.utils.getOrientation(e.direction)?f=b.Result.FINISHED:((e.velocityX>d.velocity||e.velocityY>d.velocity)&&(c.sendEvent(this.name,a),f=b.Result.FINISHED|b.Result.BLOCK),f)}})}(d,a),function(a){function b(a){var b;return d.forEach(function(c){c.element===a&&(b=c.instance)}),b}function c(a){d.forEach(function(b,c){b.element===a&&d.splice(c,1)})}var d=[],e=a.event.gesture||{};a.event.enableGesture=function(){var a=arguments[0],c=b(a),f=arguments.length,g=1;for(c||(c=new e.Instance(a),d.push({element:a,instance:c}));f>g;g++)c.addDetector(arguments[g])},a.event.disableGesture=function(){var a=arguments[0],d=b(a),e=arguments.length,f=1;d&&(e>1?d.removeDetector(arguments[f]):(d.destroy(),c(a)))},a.event.gesture=e}(d),function(a,b){function c(a){var b=this;g.on(a,"scroll",b,!1),g.on(b.element,"vclick",b,!1)}function d(a){var b=this;g.off(a,"scroll",b,!1),g.off(b.element,"vclick",b,!1)}var e=b.widget.BaseWidget,f=(b.widget.Marquee,b.engine),g=b.event,h=(b.event.gesture,b.util.object),i={EXPAND:"headerexpand",COLLAPSE:"headercollapse",COMPLETE:"headerexpandcomplete"},j=function(){var a=this;a._ui={},a._expanded=!1,a._basicText=null},k=500,l={ExpandableHeader:"ui-expandable-header",EXPAND:"ui-header-expand",BASIC:"ui-header-basic",TITLE:"ui-title"},m=new e;j.classes=l,j.events=i,m.handleEvent=function(a){var b=this;switch(a.type){case"scroll":b._onScroll(a);break;case"vclick":b._onClick(a)}},m._configure=function(){h.merge(this.options,{scrollElement:null})},m._build=function(a){return a.classList.contains(l.ExpandableHeader)||a.classList.add(l.ExpandableHeader),a},m._init=function(a){return this._initElements(a),a},m._initElements=function(a){var b,c,d=this,e=d._ui,f=d.options,h=a.offsetHeight;b=a.getElementsByClassName(l.TITLE)[0],c=f.scrollElement?"string"==typeof f.scrollElement?headerElement.querySelector(f.scrollElement):f.scrollElement:a.parentNode,a.classList.add(l.EXPAND),g.trigger(a,i.EXPAND),d._topOffset=a.offsetHeight-h,c.scrollTop=d._topOffset,e._titleElement=b,e._scrollElement=c},m._onClick=function(){var a=this,b=a.element,c=a._ui._scrollElement;b.classList.contains(l.EXPAND)&&(c.scrollTop=c.scrollTop-a._topOffset,b.classList.remove(l.EXPAND),b.classList.add(l.BASIC),g.trigger(b,i.COLLAPSE))},m._onScroll=function(a){var b=this,c=b.element,d=(b.options,b._ui),e=d._scrollElement;c.classList.contains(l.EXPAND)&&(0===e.scrollTop?g.trigger(c,i.COMPLETE):e.scrollTop>b._topOffset&&(e.scrollTop=e.scrollTop-b._topOffset,c.classList.remove(l.EXPAND),c.classList.add(l.BASIC),g.trigger(c,i.COLLAPSE))),clearTimeout(b._timer),b._timer=setTimeout(b._onScrollEnd.bind(b,a),k)},m._onScrollEnd=function(){var a=this,b=a._ui._scrollElement,c=a.element;0===b.scrollTop&&c.classList.contains(l.BASIC)&&(c.classList.add(l.EXPAND),c.classList.remove(l.BASIC),b.scrollTop=a._topOffset,g.trigger(c,i.EXPAND))},m._bindEvents=function(){var a=this;c.call(a,a._ui._scrollElement)},m._unbindEvents=function(){var a=this;d.call(a,a._ui._scrollElement)},m._refresh=function(){var a=this;a._initElements(a.element)},m._destroy=function(){this._unbindEvents()},j.prototype=m,b.widget.wearable.ExpandableHeader=j,f.defineWidget("ExpandableHeader","",[],j,"wearable")}(a.document,d),function(a,b){function c(a,b,c){var d=new XMLHttpRequest;d.open("GET",a,!1),d.send(),200===d.status||0===d.status?"function"==typeof b&&b(d,d.status):"function"==typeof c&&c(d,d.status,new Error(d.statusText))}function d(b,c,d){var e=a.createElement("script");e.type="text/javascript",e.text=c.responseText,a.body.appendChild(e),"function"==typeof b&&b(c,d)}function e(a,b,e){c(a,d.bind(null,b),e)}function f(b,c,d){var e=a.createElement("style");e.type="text/css",e.textContent=d.responseText.replace(r,"url("+b.replace(s,"images")),"function"==typeof c&&c(e)}function g(a,b,d){c(a,f.bind(null,a,b),d)}function h(a,b){var c;if(l){if(b&&(c=l.firstElementChild))return l.insertBefore(a,c),void 0;l.appendChild(a)}}function i(b){var c=a.createElement("link");return c.setAttribute("rel","stylesheet"),c.setAttribute("href",b),c.setAttribute("name","tizen-theme"),c}function j(a,b,c){p(a,"name","tizen-theme"),p(a,"theme-name",b),c?c.parentNode.replaceChild(a,c):h(a,!0)}function k(a,c,d){var e,f,h,k=m.length,l=null;for(e=0;k>e;e++)if(f=m[e].ownerNode,"tizen-theme"===o(f,"name")||f.getAttribute("href")===a){if(o(f,"theme-name")===c)return;l=f;break}d?g(a,function(a){j(a,c,l)},function(a,d){b.warn("There was a problem when loading '"+c+"', status: "+d)}):(h=i(a),j(h,c,l))}var l=a.head,m=a.styleSheets,n=b.util.DOM,o=n.getNSData,p=n.setNSData,q=b.util.load||{},r=/url\((\.\/)?images/gm,s=/[^/]+\.css$/;q.cacheBust=a.location.href.match(/debug=true/)?"?cacheBust="+(new Date).getTime():"",q.scriptSync=e,q.addElementToHead=h,q.makeLink=i,q.themeCSS=k,b.util.load=q}(a.document,d),function(a,b,c){var d=b.head,e=b.documentElement,f=c.frameworkData,g=c.util,h=g.DOM,i=g.load,j=c.support,k=function(a){var b=a.target,c=b.tagName.toLowerCase(),d=b.type;("input"!==c||"text"!==d&&"email"!==d&&"url"!==d&&"search"!==d&&"tel"!==d)&&"textarea"!==c&&(a.stopPropagation(),a.preventDefault())},l="theme.js",m="tau",n=/ui-(bar|body|overlay)-([a-z])\b/,o=/.*width=(device-width|\d+)\s*,?.*$/gi;c.theme={theme:"s",_activeTheme:null,init:function(a){var b=this,c=a.classList;f.getParams(),j.gradeA()&&(e.classList.add("ui-mobile"),c.add("ui-mobile-viewport")),b.loadTheme(f.theme)},scaleBaseFontSize:function(a,c){var d=Math.max(a*c|0,4);e.style.fontSize=d+"px",b.body.style.fontSize=d+"px"},getInheritedTheme:function(a,b){var c,d,e,f=a.parentNode;if(c=h.getNSData(a,"theme"),!c)for(;f;){if(d=f.className||"",e=n.exec(d),d&&e&&e.length>2){c=e[2];break}f=f.parentNode}return c||b},enableSelection:function(a,c){var d,e;switch(c){case"text":case"auto":case"none":d=c;break;default:d="auto"}return a===b&&(a=b.body),e=a.style,e.MozUserSelect=e.webkitUserSelect=e.userSelect=d,a},disableContextMenu:function(a){a.addEventListener("contextmenu",k,!0)},enableContextMenu:function(a){a.removeEventListener("contextmenu",k,!0)},loadTheme:function(a){var b,c,d=this,e=f.themePath,g=m,h=f.minified;f.themeLoaded||("tau"!==f.frameworkName&&(g="tizen-web-ui-fw-theme"),b=h?e+"/"+g+".min.css":e+"/"+g+".css",i.themeCSS(b,a),c=e+"/"+l,i.scriptSync(c),j.gradeA()&&d.setScaling(),f.themeLoaded=!0)},setViewport:function(a){var c,e=b.querySelector("meta[name=viewport]");return e?(c=e.getAttribute("content"),a=c.replace(o,"$1")):(e=b.createElement("meta"),e.name="viewport",c="width="+a+", user-scalable=no",e.content=c,d.insertBefore(e,d.firstChild)),a},isMobileBrowser:function(){return a.navigator.appVersion.indexOf("Mobile")>-1},setScaling:function(){var d=this,e=f.viewportWidth,g=f.defaultFontSize,h=1;b.body.setAttribute("data-tizen-theme-default-font-size",g),c.theme.isMobileBrowser()&&(f.viewportScale===!0&&(e="screen-width"),"screen-width"===e&&(e=a.self===a.top?a.outerWidth:b.documentElement.clientWidth),e=d.setViewport(e),"device-width"!==e&&(h=parseFloat(e/c.frameworkData.defaultViewportWidth),d.scaleBaseFontSize(g,h)))
+}},b.addEventListener("themeinit",function(a){var b=a.detail;b&&c.getConfig("autoInitializePage",!0)&&c.theme.init(b.getContainer())},!1)}(a,a.document,d),function(b,c){function d(a){a._isOpen&&a.close()}function e(a){a._refresh()}function f(a){a._refresh()}var g=c.widget.BaseWidget,h=c.util.selectors,i={WIDTH:240},j=function(){var a=this;a.options={position:"left",width:0,duration:100,closeOnClick:!0,overlay:!0},a._onOverlayClickBound=null,a._onResizeBound=null,a._onPageshowBound=null,a._pageSelector=null,a._isOpen=!1,a._ui={},a._drawerOverlay=null},k={page:"ui-page",drawer:"ui-drawer",header:"ui-drawer-header",left:"ui-drawer-left",right:"ui-drawer-right",overlay:"ui-drawer-overlay",open:"ui-drawer-open",close:"ui-drawer-close"},l=new g;j.prototype=l,j.classes=k,l._setOverlay=function(b){var c=this,d=c.options,e=c._drawerOverlay,f=e.style,g=Math.abs(b),h="right"===d.position?g/a.innerWidth:g/d.width;f.visibility=1>h?"visible":"hidden",f.opacity=1-h},l._translate=function(a,b){var c=this,d=c.element.style,e="none";b&&(e="-webkit-transform "+b/1e3+"s ease-out"),d.webkitTransform="translate3d("+a+"px, 0px, 0px)",d.webkitTransition=e,c.options.overlay&&c._setOverlay(a)},l._build=function(a){var b,c=this;for(a.classList.add(k.drawer),c._drawerPage=h.getClosestByClass(a,k.page),c._drawerPage.style.overflowX="hidden",b=a.nextElementSibling;b&&!b.classList.contains("ui-header");)b=b.nextElementSibling;return b&&b.classList.add(k.header),c._headerElement=b,c.options.overlay&&(c._createOverlay(a),c._drawerOverlay.style.visibility="hidden"),a},l._init=function(b){var c=this,d=c.options;d.width=d.width||i.WIDTH,"right"===d.position?(b.classList.add(k.right),c._translate(a.innerWidth,0)):(b.classList.add(k.left),c._translate(-d.width,0))},l._translateRight=function(){var b=this,c=b.options;"right"===c.position&&(b._isOpen?b._translate(a.innerWidth-c.width,0):b._translate(a.innerWidth,0))},l._refresh=function(){var b=this,c=b.options,d=b.element.parentNode,e=d.clientHeight,f=b.element.style,g=b._drawerOverlay,h=g&&g.style;f.width=c.width+"px",f.height=e+"px",h&&(h.width=a.innerWidth+"px",h.height=e+"px"),b._translateRight()},l._createOverlay=function(a){var c=this,d=b.createElement("div");d.classList.add(k.overlay),a.parentNode.insertBefore(d,a),c._drawerOverlay=d},l._bindEvents=function(){var b=this,c=b.options,g=b._drawerOverlay;b._onClickBound=d.bind(null,b),b._onResizeBound=e.bind(null,b),b._onPageshowBound=f.bind(null,b),c.overlay&&c.closeOnClick&&g&&g.addEventListener("vclick",b._onClickBound,!1),a.addEventListener("resize",b._onResizeBound,!1),b._drawerPage.addEventListener("pageshow",b._onPageshowBound,!1)},l.isOpen=function(){return this._isOpen},l.open=function(){var b=this,c=b.options,d=b.element.classList,e=b._drawerOverlay;e&&(e.style.visibility="visible"),d.remove(k.close),d.add(k.open),"left"===c.position?b._translate(0,c.duration):b._translate(a.innerWidth-c.width,c.duration),b._isOpen=!0},l.close=function(){var b=this,c=b.options,d=b.element.classList;b._isOpen=!1,d.remove(k.open),d.add(k.close),"left"===c.position?b._translate(-c.width,c.duration):b._translate(a.innerWidth,c.duration)},l._destroy=function(){var b=this,c=b._drawerOverlay;c&&c.removeEventListener("vclick",b._onClickBound,!1),a.removeEventListener("resize",b._onResizeBound,!1),b._drawerPage.removeEventListener("pageshow",b._onPageshowBound,!1)},c.widget.core.Drawer=j}(a.document,d),function(a){a.router=a.router||{}}(d),function(a,b){var c,d=b.util.object,e=0,f=0,g=a.history,h={activeState:null,replace:function(a,b,i){var j=d.merge({},a,{uid:c?f:++e,stateUrl:i,stateTitle:b});g[c?"replaceState":"pushState"](j,b,i),h.setActive(j)},back:function(){g.back()},setActive:function(a){return a&&(h.activeState=a,f=a.uid,a.volatileRecord)?(h.enableVolatileRecord(),void 0):(h.disableVolatileMode(),void 0)},getDirection:function(a){return a?a.uid<f?"back":"forward":"back"},enableVolatileRecord:function(){c=!0},disableVolatileMode:function(){c=!1}};b.router.history=h}(a,d),function(b,c){var d=c.widget.BaseWidget,e=c.util,f=e.DOM,g=c.engine,h=function(){var a=this;a.contentFillAfterResizeCallback=null,a.options={}},i={SHOW:"pageshow",HIDE:"pagehide",CREATE:"pagecreate",BEFORE_CREATE:"pagebeforecreate",BEFORE_SHOW:"pagebeforeshow",BEFORE_HIDE:"pagebeforehide"},j={uiPage:"ui-page",uiPageActive:"ui-page-active",uiSection:"ui-section",uiHeader:"ui-header",uiFooter:"ui-footer",uiContent:"ui-content",uiPageScroll:"ui-scroll-on",uiFixed:"ui-fixed"},k=new d;h.classes=j,h.events=i,k._configure=function(){this.options.enablePageScroll=c.getConfig("enablePageScroll")},k._contentFill=function(){var b,c,d,e,g,h,i=this,k=i.options,l=i.element,m=a.innerWidth,n=a.innerHeight,o=j.uiContent,p=j.uiHeader,q=j.uiFooter,r=j.uiPageScroll,s=0,t=0,u=0,v=[].slice.call(l.children),w=v.length,x=l.style,y=!1,z=!1;for(x.width=m+"px",x.height=n+"px",k.enablePageScroll===!0&&l.classList.add(r),b=0;w>b;b++)c=v[b],c.classList.contains(p)?(s=f.getElementHeight(c),c.classList.contains(j.uiFixed)&&(y=!0)):c.classList.contains(q)&&(h=a.getComputedStyle(c),u=parseFloat(h.marginTop),t+=f.getElementHeight(c),c.classList.contains(j.uiFixed)&&(z=!0));for(b=0;w>b;b++)c=v[b],c.classList.contains(o)&&(h=c.style,d=a.getComputedStyle(c),e=parseFloat(d.marginTop),g=parseFloat(d.marginBottom),l.classList.contains(r)?h.minHeight=n-s-t-e-g-u+"px":(h.height=n-s-t-e-g-u+"px",h.width=m+"px"),y&&(h.marginTop=s+"px"),z&&(h.marginBottom=t+"px"))},k._build=function(a){return a.classList.add(j.uiPage),a},k.setActive=function(a){var b=this.element.classList;a?b.add(j.uiPageActive):b.remove(j.uiPageActive)},k.isActive=function(){return this.element.classList.contains(j.uiPageActive)},k._bindEvents=function(){var b=this;b.contentFillAfterResizeCallback=b._contentFill.bind(b),a.addEventListener("resize",b.contentFillAfterResizeCallback,!1)},k._refresh=function(){this._contentFill()},k.layout=function(){this._contentFill()},k.onBeforeShow=function(){this.trigger(i.BEFORE_SHOW)},k.onShow=function(){this.trigger(i.SHOW)},k.onBeforeHide=function(){this.trigger(i.BEFORE_HIDE)},k.onHide=function(){this.trigger(i.HIDE)},k._destroy=function(){var b=this,c=b.element;c=c||b.element,a.removeEventListener("resize",b.contentFillAfterResizeCallback,!1),g.destroyAllWidgets(c,!0)},h.prototype=k,c.widget.wearable.Page=h,g.defineWidget("page","[data-role=page],.ui-page",["onBeforeShow","onShow","onBeforeHide","onHide","setActive","layout"],h,"wearable")}(a.document,d),function(a,b){function c(a){var c=this;b.event.disableGesture(a),k.off(a,"drag dragstart dragend dragcancel swipe transitionEnd webkitTransitionEnd",c,!1),k.off(c.element,"transitionEnd webkitTransitionEnd",c,!1)}function d(a){var c=this;c._eventBoundElement=a,b.event.enableGesture(a,new b.event.gesture.Drag,new b.event.gesture.Swipe({orientation:l.Orientation.HORIZONTAL})),k.on(a,"drag dragstart dragend dragcancel swipe transitionEnd webkitTransitionEnd",c,!1),k.on(c.element,"transitionEnd webkitTransitionEnd",c,!1)}var e=b.widget.core.Drawer,f=e.prototype,g=b.widget.wearable.Page,h=b.engine,i=(b.util.DOM,b.util.object),j=b.util.selectors,k=b.event,l=b.event.gesture,m=b.router.history,n=e.classes,o={CLOSED:"closed",OPENED:"opened",SLIDING:"sliding",SETTLING:"settling"},p={OPEN:"draweropen",CLOSE:"drawerclose"},q=function(){var a=this;e.call(a),a._isDrag=!1,a._state=o.CLOSED,a._settlingType=o.CLOSED,a._traslatedX=0},r=new e;q.prototype=r,q.classes=n,r.handleEvent=function(a){var b=this;switch(a.type){case"drag":b._onDrag(a);break;case"dragstart":b._onDragStart(a);break;case"dragend":b._onDragEnd(a);break;case"dragcancel":b._onDragCancel(a);break;case"swipe":b._onSwipe(a);break;case"transitionEnd":case"webkitTransitionEnd":b._onTransitionEnd(a)}},r._configure=function(){var a=this;i.merge(a.options,{duration:300,drawerTarget:"."+g.classes.uiPage,position:"left",enable:!0,dragEdge:1})},r._init=function(a){return this._initLayout(),a},r._initLayout=function(){var b=this,c=b.options,d=b.element,e=b._ui,h=a.createComment(d.id+"-placeholder");e._pageElement=j.getClosestByClass(d,g.classes.uiPage),e._targetElement=j.getClosestBySelector(d,c.drawerTarget),e._targetElement.appendChild(d),e._placeholder||(e._placeholder=h,d.parentNode.insertBefore(h,d)),c.width=c.width||d.offsetWidth,e._targetElement.style.overflowX="hidden",f._init.call(b,d)},r._onSwipe=function(a){var b=this,c="left"===a.detail.direction?"right":"left",d=b.options;d.enable&&d.position===c&&b.open()},r._onDragStart=function(a){var b=this;b._state!==o.OPENED&&(b.options.enable&&!b._isDrag&&b._state!==o.SETTLING&&b._checkSideEdge(a)?b._isDrag=!0:b.close())},r._onDrag=function(a){var b,c=this,d=a.detail.deltaX,e=c.options,f=c._traslatedX;e.enable&&c._isDrag&&c._state!==o.SETTLING&&("left"===e.position?(b=-e.width+d+f,0>b&&c._translate(b,0)):(b=e.width+d-f,b>0&&c._translate(b,0)))},r._onDragEnd=function(a){var b=this,c=b.options,d=a.detail;c.enable&&b._isDrag&&(Math.abs(d.deltaX)>c.width/2?b.open():b._state!==o.SETTLING&&b.close()),b._isDrag=!1},r._onDragCancel=function(){var a=this;a.options.enable&&a._isDrag&&a.close(),a._isDrag=!1},r._onTransitionEnd=function(){var a=this,b=(a.element,a.options.position);a._state===o.SETTLING&&(a._settlingType===o.OPENED?(a.trigger(p.OPEN,{position:b}),a._setActive(!0),a._state=o.OPENED):(a.trigger(p.CLOSE,{position:b}),a._setActive(!1),a._state=o.CLOSED))},r._checkSideEdge=function(a){var b=this,c=a.detail,d=c.pointer.clientX-c.estimatedDeltaX,e=b.options,f=e.position,g=b._eventBoundElement,h=g.offsetWidth,i=g.offsetLeft+h,j=h*e.dragEdge;return"left"===f&&d>0&&j>d||"right"===f&&d>i-j&&i>d?!0:!1},r._bindEvents=function(){var a=this,b=a._ui._targetElement;f._bindEvents.call(a),d.call(a,b)},r._enable=function(){this._oneOption("enable",!0)},r._disable=function(){this._oneOption("enable",!1)},r._destroy=function(){var a=this,b=a.element,d=a._ui._placeholder,e=d.parentNode;e.insertBefore(b,d),e.removeChild(d),f._destroy.call(a),c.call(a,a._eventBoundElement)},r._translate=function(a,b){var c=this;c._state!==o.SETTLING&&(c._state=o.SLIDING),f._translate.call(c,a,b)},r._setActive=function(a){var b=this,c=h.getRouter().getRoute("drawer");a?c.setActive(b):c.setActive(null)},r.setDragHandler=function(a){var b=this;b.options.dragEdge=1,c.call(b,b._eventBoundElement),d.call(b,a)},r.transition=function(a){var b=this,c=b.options;"left"===c.position?b._translate(-c.width+a,c.duration):b._translate(c.width-a,c.duration),b._traslatedX=a},r.open=function(){var a=this;a._state!==o.OPENED&&(a._state=o.SETTLING,a._settlingType=o.OPENED,f.open.call(a))},r.close=function(a){var b=this,c=a?a.reverse:!1;if(b._state!==o.CLOSED){if(!c&&b._state===o.OPENED)return m.back(),void 0;b._state=o.SETTLING,b._settlingType=o.CLOSED,f.close.call(b)}},r._refresh=function(){var a=this;f._refresh.call(a),a._initLayout()},r.getState=function(){return this._state},b.widget.wearable.Drawer=q,h.defineWidget("Drawer",".ui-drawer",["transition","setDragHandler","open","close","getState"],q,"wearable")}(a.document,d),function(a,b){function c(a,b){var c,d=b/a._maxValue*100,e=a._ui;d>=50?e.progressValue.classList.add(o.uiProgressbarHalf):e.progressValue.classList.remove(o.uiProgressbarHalf),c=360*(d/100),e.progressValueLeft.style.webkitTransform="rotate("+c+"deg)"}function d(a,b){var c=a._ui;c.progressValueLeft.style.borderWidth=b+"px",c.progressValueRight.style.borderWidth=b+"px",c.progressValueBg.style.borderWidth=b+"px"}function e(a,b){var c=parseFloat(b),d=a._ui;if(isNaN(c)){switch(b){case q.FULL:case q.LARGE:case q.MEDIUM:case q.SMALL:d.progressContainer.classList.add(n+"-"+b)}d.progressContainer.style.fontSize=j.getCSSProperty(d.progressContainer,"width",0,"float")+"px"}else d.progressContainer.style.fontSize=b+"px",d.progressContainer.style.width=b+"px",d.progressContainer.style.height=b+"px"}function f(a,b){b.thickness&&d(a,b.thickness),b.size&&e(a,b.size),b.containerClassName&&a._ui.progressContainer.classList.add(b.containerClassName)}var g=b.widget.BaseWidget,h=b.engine,i=b.event,j=b.util.DOM,k={CHANGE:"progresschange"},l=function(){var a=this,b={};b.progressContainer=null,b.progressValue=null,b.progressValueLeft=null,b.progressValueRight=null,b.progressValueBg=null,a.options={},a._ui=b,a._maxValue=null,a._value=null},m=new g,n="ui-progressbar",o={uiProgressbar:n,uiProgressbarBg:n+"-bg",uiProgressbarValue:n+"-value",uiProgressbarValueLeft:n+"-value-left",uiProgressbarValueRight:n+"-value-right",uiProgressbarHalf:n+"-half"},p={progressContainer:"."+o.uiProgressbar,progressBg:"."+o.uiProgressbarBg,progressValue:"."+o.uiProgressbarValue,progressValueLeft:"."+o.uiProgressbarValueLeft,progressValueRight:"."+o.uiProgressbarValueRight},q={FULL:"full",LARGE:"large",MEDIUM:"medium",SMALL:"small"};l.classes=o,m._configure=function(){this.options={thickness:null,size:q.MEDIUM,containerClassName:null}},m._build=function(b){var c,d,e,f,g,h=this,i=h._ui,j=b;return i.progressContainer=c=a.createElement("div"),i.progressValueBg=d=a.createElement("div"),i.progressValue=e=a.createElement("div"),i.progressValueLeft=f=a.createElement("div"),i.progressValueRight=g=a.createElement("div"),c.className=o.uiProgressbar,d.className=o.uiProgressbarBg,e.className=o.uiProgressbarValue,f.className=o.uiProgressbarValueLeft,g.className=o.uiProgressbarValueRight,c.id=j.id?j.id+"-container":"",e.appendChild(f),e.appendChild(g),c.appendChild(e),c.appendChild(d),j.parentNode.appendChild(c),j.parentNode.insertBefore(j,c),b},m._init=function(a){var d=this,e=d._ui,g=a,h=a.parentNode,i=d.options;return e.progressContainer=e.progressContainer||h.querySelector(p.progressContainer),e.progressValueBg=e.progressValueBg||h.querySelector(p.progressValueBg),e.progressValue=e.progressValue||h.querySelector(p.progressValue),e.progressValueLeft=e.progressValueLeft||h.querySelector(p.progressValueLeft),e.progressValueRight=e.progressValueRight||h.querySelector(p.progressValueRight),d._maxValue=j.getNumberFromAttribute(g,"max",null,100),d._maxValue<=0&&(b.error("max value of progress must be positive number that bigger than zero!"),d._maxValue=100),d._value=j.getNumberFromAttribute(g,"value",null,50),f(d,i),c(d,d._value),a},m._getValue=function(){return this.element.getAttribute("value")},m._setValue=function(a){var b,d=this;b=a>d._maxValue?d._maxValue:0>a?0:isNaN(a)?0:a,j.setAttribute(d.element,"value",b),d._value!==b&&(d._value=b,i.trigger(d.element,k.CHANGE),c(d,b))},m._refresh=function(){var a=this;return a._reset(),f(a,a.options),c(a,a._getValue()),null},m._reset=function(){var a=this,b=a._ui;b.progressValue.classList.remove(o.uiProgressbarHalf),b.progressValueLeft.style.webkitTransform="",a.options.thickness&&(b.progressValueLeft.style.borderWidth="",b.progressValueRight.style.borderWidth="",b.progressValueBg.style.borderWidth="")},m._destroy=function(){var a=this;return a._reset(),a.element.parentNode.removeChild(a._ui.progressContainer),a.element=null,a._ui=null,a._maxValue=null,a._value=null,null},l.prototype=m,b.widget.wearable.CircleProgressBar=l,h.defineWidget("CircleProgressBar",".ui-circle-progress",[],l,"wearable")}(a.document,d),function(a,b){var c=b.widget.BaseWidget,d=b.engine,e=function(){},f=new c;e.events={},f._build=function(a){return a},f._init=function(a){return a},f._bindEvents=function(a){return a},f._refresh=function(){return null},f._destroy=function(){return null},e.prototype=f,b.widget.wearable.Listview=e,d.defineWidget("Listview",".ui-listview",[],e,"wearable")}(a.document,d),function(b,c){var d=c.widget.BaseWidget,e=(c.widget.wearable.Page,c.util),f=c.event,g=e.DOM,h=c.engine,i={uiViewportTransitioning:"ui-viewport-transitioning",out:"out","in":"in",uiPreIn:"ui-pre-in",uiBuild:"ui-page-build"},j=function(){this.activePage=null},k={PAGE_CHANGE:"pagechange"},l="animationend",m="webkitAnimationEnd",n=new d;j.events=k,j.classes=i,n.change=function(a,b){var d,e=this,f=e.getActivePage();b=b||{},f&&f.element===a||(a.parentNode!==e.element&&(a=e._include(a)),a.classList.add(i.uiBuild),d=h.instanceWidget(a,"page"),d.layout(),c.getConfig("autoBuildOnPageChange",!1)&&h.createWidgets(a),f&&f.onBeforeHide(),d.onBeforeShow(),a.classList.remove(i.uiBuild),b.deferred={resolve:function(){f&&(f.onHide(),e._removeExternalPage(f,b)),d.onShow(),e.trigger(k.PAGE_CHANGE)}},e._transition(d,f,b))},n._transition=function(b,c,d){var e,g,h,j,k=this,n=k.element,o=n.classList,p=c&&d.transition?d.transition:"none",q=d.deferred,r="reverse",s=[i.in,i.out,i.uiPreIn,p];d.reverse&&s.push(r),o.add(i.uiViewportTransitioning),e=q.resolve,q.resolve=function(){var a=c&&c.element.classList,d=b.element.classList;o.remove(i.uiViewportTransitioning),d.remove.apply(d,s),a&&a.remove.apply(a,s),k._setActivePage(b),e()},"none"!==p?(j=function(){f.off(b.element,[l,m],j,!1),q.resolve()},f.one(b.element,[l,m],j,!1),c&&(h=[],h.push(p,i.out),d.reverse&&h.push(r),g=c.element.classList,g.add.apply(g,h)),g=b.element.classList,h=[],h.push(p,i.in,i.uiPreIn),d.reverse&&h.push(r),g.add.apply(g,h)):a.setTimeout(q.resolve,0)},n._include=function(a){var b=this.element;return a.parentNode!==b&&(a=e.importEvaluateAndAppendElement(a,b)),a},n._setActivePage=function(a){var b=this;b.activePage&&b.activePage.setActive(!1),b.activePage=a,a.setActive(!0)},n.getActivePage=function(){return this.activePage},n.showLoading=function(){return null},n.hideLoading=function(){return null},n._removeExternalPage=function(a,b){var c=a.element;b=b||{},b.reverse&&g.hasNSData(c,"external")&&(a.destroy(),c.parentNode&&c.parentNode.removeChild(c))},j.prototype=n,c.widget.wearable.PageContainer=j,h.defineWidget("pagecontainer","",["change","getActivePage","showLoading","hideLoading"],j,"wearable")}(a.document,d),function(b,c){var d=c.widget.BaseWidget,e=c.engine,f=c.event,g=f.trigger,h=f.gesture,i=3,j="-indicator",k=new d,l=function(){this.element=null,this._indexBar=null,this._centralAngle=0,this._activeIndexNo=0,this._isShow=!1,this._indexObjects=[],this._indicator={element:null,style:null,startX:0,positionX:0,maxPositionX:0,minPositionX:0,dragging:!1}},m={CW:"CW",CCW:"CCW"},n={SELECT:"select",INDEX_SHOW:"indexshow",INDEX_HIDE:"indexhide"},o={INDEXSCROLLBAR:"ui-circularindexscrollbar",INDEXBAR:"ui-circularindexscrollbar-indexbar",INDICATOR:"ui-circularindexscrollbar-indicator",INDICATOR_TEXT:"ui-circularindexscrollbar-indicator-text",INDICATOR_MINIMIZE:"ui-circularindexscrollbar-indicator-minimize",INDEX:"ui-circularindexscrollbar-index",SHOW:"ui-circularindexscrollbar-show",SELECTED:"ui-state-selected"};l.prototype=k,k._configure=function(){this.options={moreChar:".",delimiter:",",index:["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","1"],maxVisibleIndex:30,duration:500}},k._init=function(a){var b=this,c=b.options;return a.classList.add(o.INDEXSCROLLBAR),b._setIndices(c.index),b._draw(),b._setValueByPosition(b._activeIndexNo,!0),a},k._setIndices=function(a){var b=this,d=b.options,e=d.maxVisibleIndex;return null===a?(c.warn("CircularIndexScrollbar must have indices."),d.index=null,void 0):("string"==typeof a&&(a=a.split(d.delimiter)),i>e&&(c.warn("CircularIndexScrollbar is required at least 3 maxVisibleIndex, otherwise it may not work."),b.options.maxVisibleIndex=i),a.length<i&&c.warn("CircularIndexScrollbar is required at least 3 indices, otherwise it may not work."),b._centralAngle=360/(a.length>e?e:a.length),d.index=a,void 0)},k._draw=function(){var c,d=this,e=d.options,f=d.element,g=b.createElement("div"),h=b.createElement("a"),i=b.createElement("div"),k=a.innerWidth;e.index&&(e.index.length<e.maxVisibleIndex?d._drawBasicIndices(g):d._drawOmitIndices(g)),g.classList.add(o.INDEXBAR),h.classList.add(o.INDICATOR),h.classList.add(o.INDICATOR_MINIMIZE),i.classList.add(o.INDICATOR_TEXT),h.id=f.id+j,h.href="#"+f.id,h.setAttribute("data-rel",d.name.toLowerCase()),d._indicator.style=h.style,d._indicator.element=h,d._indexBar=g,f.appendChild(g),h.appendChild(i),f.appendChild(h),c=h.clientWidth,d._indicator.maxPositionX=k/2-c/2,d._indicator.minPositionX=.75*-c},k._drawBasicIndices=function(a){var c,d,e=this,f=e.options;for(d=0;d<f.index.length;d++)c=b.createElement("div"),e._setChildStyle(c,d,f.index[d]),a.appendChild(c),e._indexObjects.push({index:f.index[d],container:c})},k._drawOmitIndices=function(a){var c,d,e=this,f=e.options,g=f.index,h=g.length,i=f.maxVisibleIndex,j=h-parseInt((i+1)/2,10),k=parseInt(j/parseInt(i/2,10),10),l=j%parseInt(i/2,10),m=0,n=0;for(d=0;i>d;d++){if(c=b.createElement("div"),d%2)for(n=k+(l-->0?1:0),e._setChildStyle(c,d,f.moreChar);n-->0;)e._indexObjects.push({index:g[m++],container:c});else e._setChildStyle(c,d,g[m]),e._indexObjects.push({index:g[m++],container:c});a.appendChild(c)}},k._setChildStyle=function(a,c,d){var e,f,g=this,h=b.createElement("span"),i=g._centralAngle,j=90-i;e=c*i+90-i/2,f="rotate("+e+"deg) skew("+j+"deg)",a.classList.add(o.INDEX),a.style.webkitTransform=f,a.style.transform=f,f="skew("+-j+"deg) rotate("+(i/2-90)+"deg)",h.innerText=d,h.style.webkitTransform=f,h.style.transform=f,a.appendChild(h)},k.show=function(){var a,b,c=this,d=c.options,e=c._indicator,f=e.style;(!c._isShow||e.dragging)&&(a="-webkit-transform "+d.duration+"ms ease-out",b="translate3d("+e.maxPositionX+"px, 0, 0)",c._isShow=!0,c.element.classList.add(o.SHOW),f.webkitTransition=a,f.transition=a,f.webkitTransform=b,f.transform=b)},k.hide=function(a){var b,c,d=this,e=d.options,f=d._indicator,g=f.style,h=a?a.reverse:!1;if(d._isShow||f.dragging){if(!h&&d._isShow)return history.back(),void 0;b="-webkit-transform "+e.duration+"ms ease-out",c="translate3d("+f.minPositionX+"px, 0, 0)",d.element.classList.remove(o.SHOW),g.webkitTransition=b,g.transition=b,g.webkitTransform=c,g.transform=c,d._isShow=!1}},k.isShow=function(){return this._isShow},k.showHandler=function(){var a,b,c=this,d=c._indicator.style;c._isShow||(a="-webkit-transform "+c.options.duration/5+"ms ease-out",b="translate3d("+c._indicator.minPositionX+"px, 0, 0)",d.transition=a,d.webkitTransition=a,d.transform=b,d.webkitTransform=b)},k.hideHandler=function(){var a,b,d=this,e=d._indicator.style;return d._isShow?(c.warn("hideHandler() can be used only when CircularIndexSCrollbar is hidden."),void 0):(a="-webkit-transform "+d.options.duration/5+"ms ease-out",b="translate3d("+-d._indicator.element.clientWidth+"px, 0, 0)",e.transition=a,e.webkitTransition=a,e.transform=b,e.webkitTransform=b,void 0)},k._setValueByPosition=function(a,b){var c,d,e,f=this;f.options.index&&(c=f._indexObjects[f._activeIndexNo].container,d=f._indexObjects[a].container,e=f._indicator.element.firstChild,d&&(f._activeIndexNo=a,c.classList.remove(o.SELECTED),d.classList.add(o.SELECTED),e.innerHTML=f.options.index[a],b&&g(f.element,n.SELECT,{index:f.options.index[a]})))},k._nextIndex=function(){var a=this,b=a._activeIndexNo,c=a.options.index.length,d=c-1>b?b+1:0;a._setValueByPosition(d,!0)},k._prevIndex=function(){var a=this,b=a._activeIndexNo,c=a.options.index.length,d=b>0?b-1:c-1;a._setValueByPosition(d,!0)},k._setValue=function(a){var b,c=this,d=c.options.index;d&&(b=d.indexOf(a))>=0&&c._setValueByPosition(b,!1)},k._getValue=function(){var a=this,b=a.options.index;return b?b[a._activeIndexNo]:null},k._start=function(a){var b=this,c=b._indicator;c.dragging=!0,c.startX=a.detail.estimatedX,c.positionX=c.element.getBoundingClientRect().left,c.style.webkitTransition="none",c.style.transition="none",c.element.classList.remove(o.INDICATOR_MINIMIZE)},k._move=function(a){var b,c=this,d=c._indicator,e=d.maxPositionX,f=d.minPositionX,g=d.positionX+(a.detail.estimatedX-d.startX);g>=f&&e>=g?(b="translate3d("+g+"px, 0, 0)",d.style.webkitTransform=b,d.style.transform=b):g>e&&!c._isShow?c.show():f>g&&c._isShow&&c.hide()},k._end=function(){var a=this,b=a._indicator,c=b.element.getBoundingClientRect().left;b.dragging&&(c>(b.maxPositionX+b.minPositionX)/2?a.show():a.hide(),b.dragging=!1)},k._swipe=function(a){var b=this,c=a.detail;c.direction===h.Direction.RIGHT?(b._indicator.element.classList.remove(o.INDICATOR_MINIMIZE),b.show()):b.hide(),b._indicator.dragging=!1},k._wheel=function(a){var b=this,c=a.wheelDelta;b.options.index&&c&&(0>c?b._nextIndex():b._prevIndex())},k._transitionEnd=function(){var a=this;a._isShow?(f.on(b,"rotarydetent",a),a._setActive(!0),g(a.element,n.INDEX_SHOW)):(f.off(b,"rotarydetent",a),a._setActive(!1),g(a.element,n.INDEX_HIDE))},k._indicatorTransitionEnd=function(){var a=this;a._isShow||a._indicator.element.classList.add(o.INDICATOR_MINIMIZE)},k._rotary=function(a){var b=this,c=a.detail.direction;a.stopPropagation(),b.options.index&&(c===m.CW?b._nextIndex():b._prevIndex())},k.handleEvent=function(a){var b=this;switch(a.type){case"dragstart":b._start(a);break;case"drag":b._move(a);break;case"dragend":case"dragcancel":b._end(a);break;case"swipe":b._swipe(a);break;case"mousewheel":b._wheel(a);break;case"webkitTransitionEnd":b._indexBar===a.target?b._transitionEnd(a):b._indicatorTransitionEnd(a);break;case"rotarydetent":b._rotary(a)}},k._bindEvents=function(){var a=this,b=a._indicator.element;f.enableGesture(b,new f.gesture.Drag({blockVertical:!0}),new f.gesture.Swipe({orientation:h.Orientation.HORIZONTAL})),f.on(b,"drag dragstart dragend dragcancel swipe webkitTransitionEnd",a),f.on(a.element,"mousewheel",a),f.on(a._indexBar,"webkitTransitionEnd",a)},k._unbindEvents=function(){var a=this,c=a._indicator.element,d=a._indexBar;a.element&&f.off(a.element,"mousewheel",a),c&&(f.disableGesture(c),f.off(c,"drag dragstart dragend dragcancel swipe",a)),d&&f.off(d,"webkitTransitionEnd",a),f.off(b,"rotarydetent",a)},k._setActive=function(a){var b=this,c=e.getRouter().getRoute("circularindexscrollbar");a?c.setActive(b):c.setActive(null)},k._reset=function(){var a=this;a._indexBar=null,a._isShow=!1,a._activeIndexNo=0,a._centralAngle=0,a._indexObjects=[],a._indicator={element:null,style:null,startX:0,positionX:0,maxPositionX:0,minPositionX:0,dragging:!1},a.element.classList.remove(o.SHOW)},k._refresh=function(){var a=this,b=a.options;a._unbindEvents(),a._destroySubObjects(),a._reset(),a._setIndices(b.index),a._draw(),a._setValueByPosition(a._activeIndexNo,!0),a._bindEvents()},k._destroy=function(){var a=this;a.isBound()&&(a._unbindEvents(),a._destroySubObjects(),a._indexBar=null,a._indicator=null,a._indexObjects=null)},k._destroySubObjects=function(){var a=this.element;a.textContent=""},c.widget.wearable.CircularIndexScrollbar=l,e.defineWidget("CircularIndexScrollbar",".ui-circularindexscrollbar",[],l,"wearable")}(a.document,d),function(a,b,c){function d(a,b,c,d){var e,f,g,h;for(e=0,f=d.length;f>e;++e)h=d[e],(isNaN(c[h])===!1||isNaN(a[h])===!1)&&(g=Object.getOwnPropertyDescriptor(b,h),(!g||g.writable)&&(b[h]=c[h]||a[h]))}function e(a,b,c){var e,f,g,h,i=new CustomEvent(a,{bubbles:b.bubbles,cancelable:b.cancelable,detail:b.detail}),j=b.type,k=0;if(d(b,i,c,x),i._originalEvent=b,-1!==j.indexOf("touch")&&(j=b.touches,e=b.changedTouches,f=j&&j.length?j[0]:e&&e.length?e[0]:null))for(g=C.length;g>k;k++)h=C[k],i[h]=f[h];return i}function f(a,b,c){return b.target.dispatchEvent(e(a,b,c||{}))}function g(a){f("vmousedown",a)}function h(a){var b=a.clientX,c=a.clientY;return b||c?void 0:t(a)}function i(a){f("vclick",a,h(a))}function j(a){f("vmouseup",a)}function k(a){f("vmousemove",a)}function l(a){f("vmouseover",a)}function m(a){f("vmouseout",a)}function n(a){var b,c=a.touches;c&&1===c.length&&(y=!1,b=c[0],A=b.pageX,B=b.pageY,f("vmouseover",a),f("vmousedown",a))}function o(a){var b=a.touches;b&&0===b.length&&(f("vmouseup",a),f("vmouseout",a))}function p(a){var c,d=a.touches&&a.touches[0],e=y,g=w.eventDistanceThreshold;return d.identifier>0?(a.preventDefault(),a.stopPropagation(),void 0):(y=y||Math.abs(d.pageX-A)>g||Math.abs(d.pageY-B)>g,c=b.elementFromPoint(a.pageX,a.pageY),c&&f("_touchover",a),y&&!e&&f("vmousecancel",a),f("vmousemove",a),void 0)}function q(a){y||f("vmousecancel",a),y=!0}function r(a){f("vmousecancel",a)}function s(){return!1}function t(a){var b=a.target&&a.target.getBoundingClientRect(),c={};return b&&(c={clientX:b.left+b.width/2,clientY:b.top+b.height/2,which:1}),c}function u(a){var b;a.keyCode===D.enter&&(b=t(a),f("vmouseup",a,b),f("vclick",a,b))}function v(a){a.keyCode===D.enter&&f("vmousedown",a,t(a))}var w,x,y,z=a.hasOwnProperty("ontouchstart"),A=0,B=0,C=["clientX","clientY","pageX","pageY","screenX","screenY"],D={enter:13};x=["currentTarget","detail","button","buttons","clientX","clientY","offsetX","offsetY","pageX","pageY","screenX","screenY","toElement","which"],w={eventDistanceThreshold:10,touchSupport:z},w.bindTouch=function(){b.addEventListener("touchstart",n,!0),b.addEventListener("touchend",o,!0),b.addEventListener("touchmove",p,!0),b.addEventListener("touchenter",s,!0),b.addEventListener("_touchover",s,!0),b.addEventListener("touchcancel",r,!0),b.addEventListener("click",i,!0)},w.bindMouse=function(){b.addEventListener("mousedown",g,!0),b.addEventListener("mouseup",j,!0),b.addEventListener("mousemove",k,!0),b.addEventListener("mouseover",l,!0),b.addEventListener("mouseout",m,!0),b.addEventListener("keyup",u,!0),b.addEventListener("keydown",v,!0),b.addEventListener("scroll",q,!0),b.addEventListener("click",i,!0)},c.event.vmouse=w,z?w.bindTouch():w.bindMouse()}(a,a.document,d),function(a,b){b.widget.wearable.indexscrollbar=b.widget.wearable.indexscrollbar||{}}(a,d),function(a,b){function c(a,b){return this.element=a,this.options=d.merge(b,this._options,!1),this.container=this.options.container,this.indices={original:this.options.index,merged:[]},this._init(),this}var d=b.util.object,e=b.util.DOM;c.prototype={_options:{container:null,offsetLeft:0,index:[],verticalCenter:!1,moreChar:"*",indexHeight:41,selectedClass:"ui-state-selected",ulClass:null,maxIndexLen:0},_init:function(){this.indices.original=this.options.index,this.indexLookupTable=[],this.indexElements=null,this.selectedIndex=-1,this.visiblity="hidden",this._setMaxIndexLen(),this._makeMergedIndices(),this._drawDOM(),this._appendToContainer(),this.options.verticalCenter&&this._adjustVerticalCenter(),this._setIndexCellInfo()},_clear:function(){for(;this.element.firstChild;)this.element.removeChild(this.element.firstChild);this.indices.merged.length=0,this.indexLookupTable.length=0,this.indexElements=null,this.selectedIndex=-1,this.visiblity=null},refresh:function(){this._clear(),this._init()},destroy:function(){this._clear()},show:function(){this.visibility="visible",this.element.style.visibility=this.visibility},hide:function(){this.visibility="hidden",this.element.style.visibility=this.visibility},isShown:function(){return"visible"===this.visibility},_setMaxIndexLen:function(){var a,b=this.container.offsetHeight;a=Math.floor(b/this.options.indexHeight),a>0&&a%2===0&&(a-=1),this.options.maxIndexLen=this.options.maxIndexLen>0?Math.min(a,this.options.maxIndexLen):a},_makeMergedIndices:function(){var a,b,c=this.indices.original,d=c.length,e=Math.min(this.options.maxIndexLen,d),f=d-e,g=parseInt(f/parseInt(e/2,10),10),h=f%parseInt(e/2,10),i=[],j=[],k=0;for(a=0,b=e;b>a;a++)i[a]=1,a%2&&(i[a]+=g+(h-->0?1:0)),k+=i[a],j.push({start:k-1,length:i[a]});this.indices.merged=j},_drawDOM:function(){var b,c,d,e,f,g=this.indices.original,h=this.indices.merged,i=h.length,j=this.options.indexHeight,k=this.options.moreChar,l=9;for(c=a.createDocumentFragment(),e=0;i>e;e++)f=h[e],b=1===f.length?g[f.start]:k,d=a.createElement("li"),d.innerText=b.toUpperCase(),d.style.height=j+"px",d.style.lineHeight=b===k?j+l+"px":j+"px",c.appendChild(d);this.element.appendChild(c),this.options.ulClass&&this.element.classList.add(this.options.ulClass)},_adjustVerticalCenter:function(){var a=this.indices.merged.length,b=a*this.options.indexHeight,c=parseInt((this.container.offsetHeight-b)/2,10);this.element.style.paddingTop=c+"px"},_appendToContainer:function(){this.container.appendChild(this.element),this.element.style.left=this.options.offsetLeft+"px"},setPaddingTop:function(a){var b=this.element.clientHeight,c=this.element.style.paddingTop,d=this.container.clientHeight;c=""===c?0:parseInt(c,10),b-=c,b>d&&(a-=a+b-d),this.element.style.paddingTop=a+"px",this._setIndexCellInfo()},getOffsetTopByIndex:function(a){var b=this.indexLookupTable[a].cellIndex,c=this.indexElements[b],d=c.offsetTop;
+return d},_setIndexCellInfo:function(){var a=this.element,b=this.indices.merged,c=e.getElementOffset(this.container).top,d=this.element.querySelectorAll("LI"),f=[];[].forEach.call(d,function(a,d){for(var e=b[d],g=e.start,h=g+e.length,i=c+a.offsetTop,j=a.offsetHeight/e.length;h>g;g++)f.push({cellIndex:d,top:i,range:j}),i+=j}),this.indexLookupTable=f,this.indexElements=a.children},getIndexByPosition:function(a){var b,c,d,e,f=this.indexLookupTable;if(f[0]&&(b=f[0],a<b.top))return 0;if(f[f.length-1]&&(b=f[f.length-1],a>=b.top+b.range))return f.length-1;for(c=0,d=f.length;d>c;c++)if(b=f[c],e=a-b.top,e>=0&&e<b.range)return c;return 0},getValueByIndex:function(a){return 0>a&&(a=0),this.indices.original[a]},select:function(a){var b,c;this.clearSelected(),this.selectedIndex!==a&&(this.selectedIndex=a,b=this.indexLookupTable[a].cellIndex,c=this.indexElements[b],c.classList.add(this.options.selectedClass))},clearSelected:function(){var a=this.element,b=this.options.selectedClass,c=a.querySelectorAll("."+b);[].forEach.call(c,function(a){a.classList.remove(b)}),this.selectedIndex=-1}},b.widget.wearable.indexscrollbar.IndexBar=c}(a.document,d),function(b,c){function d(a){a.preventDefault(),a.stopPropagation()}function e(a,b){return this.element=a,this.options=f.merge(b,this._options,!1),this.value=null,this._init(),this}var f=c.util.object,g=c.event;e.prototype={_options:{className:"ui-indexscrollbar-indicator",selectedClass:"ui-selected",container:null},_init:function(){var a=this,b=a.options,c=a.element;c.className=b.className,c.innerHTML="<span></span>",g.on(c,["touchstart","touchmove"],d,!1),b.referenceElement.parentNode.insertBefore(c,b.referenceElement),a.fitToContainer()},fitToContainer:function(){var b=this.element,c=this.options.container,d=a.getComputedStyle(c).position;b.style.width=c.offsetWidth+"px",b.style.height=c.offsetHeight+"px","absolute"!==d&&"relative"!==d&&(b.style.top=c.offsetTop+"px",b.style.left=c.offsetLeft+"px")},setValue:function(a){this.value=a,a=a.toUpperCase();var b=a.substr(a.length-1),c=a.substr(0,a.length-1),d="<span>"+c+'</span><span class="ui-selected">'+b+"</span>";this.element.firstChild.innerHTML=d},show:function(){this.element.style.display="block"},hide:function(){this.element.style.display="none"},destroy:function(){for(var a=this.element;a.firstChild;)a.removeChild(a.firstChild);g.off(a,["touchstart","touchmove"],d,!1),this.element=null}},c.widget.wearable.indexscrollbar.IndexIndicator=e}(a.document,d),function(b,c){var d=function(){this.element=null,this.indicator=null,this.indexBar1=null,this.indexBar2=null,this.index=null,this.touchAreaOffsetLeft=0,this.indexElements=null,this.selectEventTriggerTimeoutId=null,this.ulMarginTop=0,this.eventHandlers={}},e=c.widget.BaseWidget,f=c.engine,g=c.event,h=c.util.object,i=c.util.DOM,j=c.widget.wearable.indexscrollbar.IndexBar,k=c.widget.wearable.indexscrollbar.IndexIndicator,l={SELECT:"select"},m="vmousedown",n="vmousemove",o="vmouseup",p=!1,q=new e;d.prototype=q,h.merge(q,{widgetName:"IndexScrollbar",widgetClass:"ui-indexscrollbar",_configure:function(){this.options={moreChar:"*",indexScrollbarClass:"ui-indexscrollbar",selectedClass:"ui-state-selected",indicatorClass:"ui-indexscrollbar-indicator",delimiter:",",index:["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","1"],maxIndexLen:0,indexHeight:41,keepSelectEventDelay:50,container:null,supplementaryIndex:null,supplementaryIndexMargin:1}},_build:function(a){return a},_init:function(a){var b=this,c=b.options;return a.classList.add(c.indexScrollbarClass),b._setIndex(a,c.index),b._setMaxIndexLen(a,c.maxIndexLen),b._setInitialLayout(),b._createSubObjects(),b._updateLayout(),b._extended(!0),a},_refresh:function(){this._isExtended()&&(this._unbindEvent(),this.indicator.hide(),this._extended(!1)),this._updateLayout(),this.indexBar1.refresh(),this._extended(!0)},_destroy:function(){var a=this;a.isBound()&&(a._unbindEvent(),a._extended(!1),a._destroySubObjects(),a.indicator=null,a.index=null,a.eventHandlers={})},_createSubObjects:function(){var a=this,c=a.options,d=a.element;a.indexBar1=new j(b.createElement("UL"),{container:d,offsetLeft:0,index:c.index,verticalCenter:!0,indexHeight:c.indexHeight,maxIndexLen:c.maxIndexLen}),"function"==typeof c.supplementaryIndex&&(a.indexBar2=new j(b.createElement("UL"),{container:d,offsetLeft:-d.clientWidth-c.supplementaryIndexMargin,index:[],indexHeight:c.indexHeight,ulClass:"ui-indexscrollbar-supplementary"}),a.indexBar2.hide()),a.indicator=new k(b.createElement("DIV"),{container:a._getContainer(),referenceElement:a.element,className:c.indicatorClass})},_destroySubObjects:function(){var a,b,c,d={iBar1:this.indexBar1,iBar2:this.indexBar2,indicator:this.indicator};for(c in d)a=d[c],a&&(b=a.element,a.destroy(),b.parentNode.removeChild(b))},_setInitialLayout:function(){var b=this.element,c=this._getContainer(),d=a.getComputedStyle(c).position,e=b.style;"absolute"!==d&&"relative"!==d&&(e.top=c.offsetTop+"px",e.height=c.offsetHeight+"px")},_setMaxIndexLen:function(a,b){var c=this,d=c.options,e=c._getContainer(),f=e.offsetHeight;0>=b&&(b=Math.floor(f/d.indexHeight)),b>0&&b%2===0&&(b-=1),d.maxIndexLen=b},_updateLayout:function(){this._setInitialLayout(),this._draw(),this.touchAreaOffsetLeft=this.element.offsetLeft-10},_draw:function(){return this.indexBar1.show(),this},_removeIndicator:function(){var a=this.indicator,b=a.element.parentNode;b.removeChild(a.element),a.destroy(),this.indicator=null},_getEventReceiverByPosition:function(b){var c,d=a.innerWidth,e=this.element.clientWidth;return c=this.options.supplementaryIndex?b>=d-e&&d>=b?this.indexBar1:this.indexBar2:this.indexBar1},_updateIndicatorAndTriggerEvent:function(b){this.indicator.setValue(b),this.indicator.show(),this.selectEventTriggerTimeoutId&&a.clearTimeout(this.selectEventTriggerTimeoutId),this.selectEventTriggerTimeoutId=a.setTimeout(function(){this.trigger(l.SELECT,{index:b}),this.selectEventTriggerTimeoutId=null}.bind(this),this.options.keepSelectEventDelay)},_onTouchStartHandler:function(a){p=!0;var c=a.touches||a._originalEvent&&a._originalEvent.touches;if(c&&c.length>1)return a.preventDefault(),a.stopPropagation(),void 0;var d=this._getPositionFromEvent(a),e=this.indexBar1,f=e.getIndexByPosition(d.y),g=e.getValueByIndex(f);e.select(f),b.addEventListener(n,this.eventHandlers.touchMove),b.addEventListener(o,this.eventHandlers.touchEnd),b.addEventListener("touchcancel",this.eventHandlers.touchEnd),this._updateIndicatorAndTriggerEvent(g)},_onTouchMoveHandler:function(a){var b=a._originalEvent&&a._originalEvent.touches;if(b&&b.length>1||!p)return g.preventDefault(a),g.stopPropagation(a),void 0;var c,d,e,f=this._getPositionFromEvent(a),h=this.indexBar1,i=this.indexBar2;d=this._getEventReceiverByPosition(f.x),d===i&&(i.options.index=this.options.supplementaryIndex(h.getValueByIndex(h.selectedIndex)),i.refresh()),c=d.getIndexByPosition(f.y),e=d.getValueByIndex(c),d===i?e=h.getValueByIndex(h.selectedIndex)+e:i&&!i.isShown()&&i.setPaddingTop(h.getOffsetTopByIndex(h.selectedIndex)),d.select(c),d.show(),h===d&&i&&i.hide(),this._updateIndicatorAndTriggerEvent(e),g.preventDefault(a),g.stopPropagation(a)},_onTouchEndHandler:function(a){var c=this,d=a._originalEvent&&a._originalEvent.touches;(d&&0===d.length||!d)&&(p=!1),c.indicator.hide(),c.indexBar1.clearSelected(),c.indexBar2&&(c.indexBar2.clearSelected(),c.indexBar2.hide()),b.removeEventListener(n,c.eventHandlers.touchMove),b.removeEventListener(o,c.eventHandlers.touchEnd),b.removeEventListener("touchcancel",c.eventHandlers.touchEnd)},_bindEvents:function(){this._bindResizeEvent(),this._bindEventToTriggerSelectEvent()},_unbindEvent:function(){this._unbindResizeEvent(),this._unbindEventToTriggerSelectEvent()},_bindResizeEvent:function(){this.eventHandlers.onresize=function(){this.refresh()}.bind(this),a.addEventListener("resize",this.eventHandlers.onresize)},_unbindResizeEvent:function(){this.eventHandlers.onresize&&a.removeEventListener("resize",this.eventHandlers.onresize)},_bindEventToTriggerSelectEvent:function(){var a=this;a.eventHandlers.touchStart=a._onTouchStartHandler.bind(a),a.eventHandlers.touchEnd=a._onTouchEndHandler.bind(a),a.eventHandlers.touchMove=a._onTouchMoveHandler.bind(a),a.element.addEventListener(m,a.eventHandlers.touchStart)},_unbindEventToTriggerSelectEvent:function(){var a=this;a.element.removeEventListener(m,a.eventHandlers.touchStart)},_data:function(a,b){var c,d=this.element,e=d.__data;if(e||(e=d.__data={}),"object"==typeof a){for(c in a)this._data(c,a[c]);return this}return"undefined"==typeof b?e[a]:(e[a]=b,this)},_isValidElement:function(a){return a.classList.contains(this.widgetClass)},_isExtended:function(){return!!this._data("extended")},_extended:function(a){return this._data("extended",a),this},_setIndex:function(a,b){var c=this.options;"string"==typeof b&&(b=b.split(c.delimiter)),c.index=b},_getOffset:function(a){var b=0,c=0;do c+=a.offsetTop,b+=a.offsetLeft,a=a.offsetParent;while(a);return{top:c,left:b}},_getContainer:function(){var a,c=this.options.container,d=this.element,e=d.parentNode;if(!c){for(;e!=b.body;){if(a=i.getCSSProperty(e,"overflow-y"),"scroll"===a||"auto"===a&&e.scrollHeight>e.clientHeight)return e;e=e.parentNode}c=d.parentNode}return c},_getPositionFromEvent:function(a){return-1!==a.type.search(/^touch/)?{x:a.touches[0].clientX,y:a.touches[0].clientY}:{x:a.clientX,y:a.clientY}},addEventListener:function(a,b){this.element.addEventListener(a,b)},removeEventListener:function(a,b){this.element.removeEventListener(a,b)}}),c.widget.wearable.IndexScrollbar=d,f.defineWidget("IndexScrollbar",".ui-indexscrollbar",[],d,"wearable")}(a.document,d),function(a,b){var c=b.widget.BaseWidget,d=b.engine,e=function(){return this},f=new c;e.events={},f._build=function(a){return a},f._init=function(a){return a},f._bindEvents=function(a){return a},f._refresh=function(){return null},f._destroy=function(){return null},e.prototype=f,b.widget.wearable.Progress=e,d.defineWidget("Progress","progress",[],e,"wearable")}(a.document,d),function(a,b){var c=b.widget.BaseWidget,d=b.engine,e=function(){return this},f=new c;e.events={},f._build=function(a){return a},f._init=function(a){return a},f._bindEvents=function(a){return a},f._refresh=function(){return null},f._destroy=function(){return null},e.prototype=f,b.widget.wearable.Progressing=e,d.defineWidget("Progressing",".ui-progress",[],e,"wearable")}(a.document,d),function(a,b){function c(a){return k[a]}function d(a,b){a.classList.add(c(b))}function e(b){return a.createElement(b)}var f=b.widget.BaseWidget,g=b.engine,h=function(){this.options={text:null}},i={},j="ui-switch",k={handler:j+"-handler",inneroffset:j+"-inneroffset",activation:j+"-activation",input:j+"-input",text:j+"-text"},l=new f;h.events=i,h.classes=k,l._build=function(a){var b,c=this.options,f=c.text,g=e("label"),h=e("input"),i=e("div"),j=e("div"),k=e("div");return f&&(b=e("div"),d(b,"text"),b.innerHTML=f,a.appendChild(b)),d(k,"handler"),j.appendChild(k),d(j,"inneroffset"),i.appendChild(j),d(i,"activation"),g.classList.add("ui-toggleswitch"),h.type="checkbox",d(h,"input"),g.appendChild(h),g.appendChild(i),a.appendChild(g),a},h.prototype=l,b.widget.wearable.ToggleSwitch=h,g.defineWidget("ToggleSwitch",".ui-switch",[],h,"wearable")}(a.document,d),function(b,c){function d(a){for(var b=a.element.children,c=b.length;--c>=0;)b[c].classList.remove(A.classes.uiListviewActive)}function e(b,c){var e=c.changedTouches||c._originalEvent&&c._originalEvent.changedTouches,f=e&&e.length?e[0]:c;c.type===C?Math.abs(z.clientX-f.clientX)>10&&Math.abs(z.clientY-f.clientY)>10&&(d(b),a.clearTimeout(m)):(d(b),a.clearTimeout(m))}function f(a){var b;b="LI"===n.tagName?n:n.parentNode,n.removeEventListener(C,y,!1),n.removeEventListener(D,y,!1),y=null,d(a),b.classList.add(A.classes.uiListviewActive),z={}}function g(b,c){var d;n=c.target,a.clearTimeout(m),n.removeEventListener(C,y,!1),n.removeEventListener(D,y,!1),m=a.setTimeout(f.bind(null,b),x),d=c.touches&&c.touches.length?c.touches[0]:c,z.clientX=d.clientX,z.clientY=d.clientY,y=e.bind(null,b),n.addEventListener(C,y,!1),n.addEventListener(D,y,!1)}function h(a){var b=a._scroll,c=b.direction,d=a.ui.scrollview,e=b.lastPositionX,f=b.lastPositionY,g=d.scrollLeft,h=d.scrollTop;a._refreshScrollbar(),c=[0,0,0,0],f>h&&(c[q]=1),e>g&&(c[r]=1),h>f&&(c[s]=1),g>e&&(c[t]=1),b.lastJumpY=Math.abs(h-f),b.lastJumpX=Math.abs(g-e),b.lastPositionX=g,b.lastPositionY=h,b.direction=c,b.clipHeight=d.clientHeight,b.clipWidth=d.clientWidth}function i(a,b){return parseInt(b===u?a.clientHeight:a.clientWidth,10)+1}function j(a,b){var c,d,e=a.element,f=a.options,g=a._scroll,h=0,j=f.dataLength,k=0,l=0,m=0,n=f.bufferSize,o=0,p=!1;for(h=f.orientation===u?g.clipHeight:g.clipWidth,m=i(e,f.orientation)/n,l=Math.floor((n-Math.floor(h/m))/2),0>=b-l?(d=0,k=0):d=b-l,d+n>=j&&(d=j-n,p=!0),k=b-d,a._loadData(d),w=!0,o=d*m,f.orientation===u?(p&&(o=a.ui.spacer.clientHeight),e.style.top=o+"px"):(p&&(o=a.ui.spacer.clientWidth),e.style.left=o+"px"),c=0;k>c;c+=1)o+=i(e.children[c],f.orientation);f.orientation===u?a.ui.scrollview.scrollTop=o:a.ui.scrollview.scrollLeft=o,w=!1,a._currentIndex=d}function k(a){var b,c,d,e=a.element,f=a._scroll,g=a.options,h=e.style,j=a._currentIndex,k=parseInt(g.bufferSize,10),l=g.dataLength,m=f.direction,n=f.clipWidth,o=f.clipHeight,p=f.lastPositionY,v=f.lastPositionX,w=parseInt(h.top,10)||0,x=parseInt(h.left,10)||0,y=0,z=0,A=0,B=null,C=0,D=0,E=0,F=0,G=0;for(b=e.children,E=b.length-1;E>0;E-=1)D+=g.orientation===u?b[E].clientHeight:b[E].clientWidth;if(C=i(e,g.orientation)/k,m[s]&&(G=p-w,A=l-j-k),m[q]&&(G=w+D-(p+o),A=j),m[r]&&(G=v-x,A=l-j-k),m[t]&&(G=x+D-(v-n),A=j),G>0&&1.5>=D/G){for(y=Math.floor(G/C)-Math.floor((k-o/C)/2),y=y>A?A:y,z=Math.floor(y/k),y%=k,z>0&&((m[s]||m[r])&&(c=1),(m[q]||m[t])&&(c=-1),a._loadData(j+c*z*k),j=a._currentIndex,F+=c*z*k*C),(m[s]||m[r])&&(j=j+k-1),E=y;E>0;E-=1)(m[s]||m[r])&&(B=e.appendChild(e.firstElementChild),++j,a._updateListItem(B,j),F+=B.clientHeight),(m[q]||m[t])&&(B=e.insertBefore(e.lastElementChild,e.firstElementChild),--j,a._updateListItem(B,j),F-=B.clientHeight);(m[q]||m[s])&&(d=w+F,(0>d||0>=j)&&(d=0,j=0),j>=l-1&&(d=a.ui.spacer.clientHeight),h.top=d+"px"),(m[t]||m[r])&&(d=x+F,(0>d||0>=j)&&(d=0),j>=l-1&&(d=a.ui.spacer.clientWidth),h.left=d+"px"),(m[s]||m[r])&&(j=j-k+1),a._currentIndex=j}}function l(a){var b=a._scroll;h.call(null,a),(b.lastJumpY>0||b.lastJumpX>0)&&(w||k(a))}var m,n,o=c.widget.BaseWidget,p=c.engine,q=0,r=1,s=2,t=3,u="y",v="x",w=!1,x=250,y=null,z={},A=function(){var a=this;return a.ui={scrollview:null,spacer:null,itemSize:0},a._scroll={direction:[0,0,0,0],lastPositionX:0,lastPositionY:0,lastJumpX:0,lastJumpY:0,clipWidth:0,clipHeight:0},a.name="VirtualListview",a._currentIndex=0,a.options={bufferSize:100,dataLength:0,orientation:u,listItemUpdater:null},a._scrollEventBound=null,a._touchStartEventBound=null,a},B="vmousedown",C="vmousemove",D="vmouseup",E=new o;A.classes={uiVirtualListContainer:"ui-virtual-list-container",uiListviewActive:"ui-listview-active"},E._updateListItem=function(a,b){this.options.listItemUpdater(a,b)},E._build=function(a){var b=A.classes;return a.classList.add(b.uiVirtualListContainer),a},E._init=function(a){var c,d,e,f,g,h=this,i=h.ui,j=h.options;c=j.orientation.toLowerCase()===v?v:u,d=a.parentElement,e=d.style,f=b.createElement("div"),g=f.style,g.display="block",g.position="static",d.appendChild(f),a.style.position="relative",c===v?(g.float="left",e.overflowX="scroll",e.overflowY="hidden"):(e.overflowX="hidden",e.overflowY="scroll"),j.dataLength<j.bufferSize&&(j.bufferSize=j.dataLength),j.bufferSize<1&&(j.bufferSize=1),i.spacer=f,i.scrollview=d,h.element=a,j.orientation=c},E._buildList=function(){var a,c,d=this.element,e=this.options.bufferSize,f=b.createDocumentFragment(),h=g.bind(null,this),i=this.options.orientation;for(c=0;e>c;++c)a=b.createElement("li"),i===v&&(a.style.float="left"),this._updateListItem(a,c),f.appendChild(a),a.addEventListener(B,h,!1);d.appendChild(f),this._touchStartEventBound=h,this._refresh()},E._refresh=function(){this._refreshScrollbar()},E._loadData=function(a){var b=this,c=b.element.firstElementChild;if(b._currentIndex!==a){b._currentIndex=a;do b._updateListItem(c,a),++a,c=c.nextElementSibling;while(c)}},E._refreshScrollbar=function(){var a,b=this,c=b.element,d=b.options,e=b.ui,f=e.spacer.style;d.orientation===u?(a=parseFloat(c.clientHeight)||0,f.height=a/d.bufferSize*d.dataLength-a+"px"):(a=parseFloat(c.clientWidth)||0,f.width=a/d.bufferSize*(d.dataLength-1)-4/3*a+"px")},E._bindEvents=function(){var a=l.bind(null,this),b=this.ui.scrollview;b&&(b.addEventListener("scroll",a,!1),this._scrollEventBound=a)},E._destroy=function(){var a,b=this,c=b.ui.scrollview,d=b.ui.spacer,e=b.element,f=e.style;for(f.position="static",b.options.orientation===u?f.top="auto":f.left="auto",c&&c.removeEventListener("scroll",b._scrollEventBound,!1),d.parentNode&&d.parentNode.removeChild(d);e.firstElementChild;)a=e.firstElementChild,a.removeEventListener(B,b._touchStartEventBound,!1),e.removeChild(a)},E.scrollTo=function(a){this.ui.scrollview.scrollTop=a},E.scrollToIndex=function(a){0>a&&(a=0),a>=this.options.dataLength&&(a=this.options.dataLength-1),h(this),j(this,a)},E.draw=function(){this._buildList(),this.trigger("draw")},E.setListItemUpdater=function(a){this.options.listItemUpdater=a},A.prototype=E,c.widget.wearable.VirtualListview=A,p.defineWidget("VirtualListview","",["draw","setListItemUpdater","scrollTo","scrollToIndex"],A,"wearable")}(a.document,d),function(a,b){b.widget.wearable.scroller=b.widget.wearable.scroller||{}}(a,d),function(a,b){b.widget.wearable.scroller.effect=b.widget.wearable.scroller.effect||{}}(a,d),function(a,b){var c=b.util.object,d=b.util.selectors,e=function(a,d){var f=this;f._orientation=null,f._maxValue=null,f._container=null,f._minEffectElement=null,f._maxEffectElement=null,f.options=c.merge({},e.defaults,{scrollEndEffectArea:b.getConfig("scrollEndEffectArea",e.defaults.scrollEndEffectArea)}),f._targetElement=null,f._isShow=!1,f._isDrag=!1,f._isShowAnimating=!1,f._isHideAnimating=!1,f._create(a,d)},f={content:"content",screen:"screen"},g={duration:500,scrollEndEffectArea:"content"},h={bouncingEffect:"ui-scrollbar-bouncing-effect",page:"ui-page",left:"ui-left",right:"ui-right",top:"ui-top",bottom:"ui-bottom",hide:"ui-hide",show:"ui-show"};e.defaults=g,e.prototype={_create:function(a,b){var c=this;c._container=c.options.scrollEndEffectArea===f.content?a:d.getClosestByClass(a,h.page),c._orientation=b.orientation,c._maxValue=c._getValue(b.maxScrollX,b.maxScrollY),c._initLayout()},_initLayout:function(){var c=this,d=c._minEffectElement=a.createElement("DIV"),e=c._maxEffectElement=a.createElement("DIV"),f=h.bouncingEffect;c._orientation===b.widget.wearable.scroller.Scroller.Orientation.HORIZONTAL?(d.className=f+" "+h.left,e.className=f+" "+h.right):(d.className=f+" "+h.top,e.className=f+" "+h.bottom),c._container.appendChild(d),c._container.appendChild(e),d.addEventListener("webkitAnimationEnd",this),e.addEventListener("webkitAnimationEnd",this)},drag:function(a,b){this._isDrag=!0,this._checkAndShow(a,b)},dragEnd:function(){var a=this;!a._isShow||a._isShowAnimating||a._isHideAnimating||a._beginHide(),a._isDrag=!1},show:function(){var a=this;a._targetElement&&(a._isShow=!0,a._beginShow())},hide:function(){var a=this;a._isShow&&(a._minEffectElement.style.display="none",a._maxEffectElement.style.display="none",a._targetElement.classList.remove(h.hide),a._targetElement.classList.remove(h.show)),a._isShow=!1,a._isShowAnimating=!1,a._isHideAnimating=!1,a._targetElement=null},_checkAndShow:function(a,b){var c=this,d=c._getValue(a,b);c._isShow?!c._isShow||c._isDrag||c._isShowAnimating||c._isHideAnimating||c._beginHide():d>=0?(c._targetElement=c._minEffectElement,c.show()):d<=c._maxValue&&(c._targetElement=c._maxEffectElement,c.show())},_getValue:function(a,c){return this._orientation===b.widget.wearable.scroller.Scroller.Orientation.HORIZONTAL?a:c},_beginShow:function(){var a=this;a._targetElement&&!a._isShowAnimating&&(a._targetElement.style.display="block",a._targetElement.classList.remove(h.hide),a._targetElement.classList.add(h.show),a._isShowAnimating=!0,a._isHideAnimating=!1)},_finishShow:function(){var a=this;a._isShowAnimating=!1,a._isDrag||(a._targetElement.classList.remove(h.show),a._beginHide())},_beginHide:function(){var a=this;a._isHideAnimating||(a._targetElement.classList.remove(h.show),a._targetElement.classList.add(h.hide),a._isHideAnimating=!0,a._isShowAnimating=!1)},_finishHide:function(){var a=this;a._isHideAnimating=!1,a._targetElement.classList.remove(h.hide),a.hide(),a._checkAndShow()},handleEvent:function(a){var b=this;"webkitAnimationEnd"===a.type&&(b._isShowAnimating?b._finishShow():b._isHideAnimating&&b._finishHide())},destroy:function(){var a=this;a._minEffectElement.removeEventListener("webkitAnimationEnd",a),a._maxEffectElement.removeEventListener("webkitAnimationEnd",a),a._container.removeChild(a._minEffectElement),a._container.removeChild(a._maxEffectElement),a._container=null,a._minEffectElement=null,a._maxEffectElement=null,a._targetElement=null,a._isShow=null,a._orientation=null,a._maxValue=null}},b.widget.wearable.scroller.effect.Bouncing=e}(a.document,d),function(b,c){var d=c.widget.BaseWidget,e=(c.event.gesture,c.engine),f=c.util.object,g=c.event,h=g.trigger,i=new d,j=c.widget.wearable.scroller.effect.Bouncing,k={START:"scrollstart",MOVE:"scrollmove",END:"scrollend",CANCEL:"scrollcancel"},l=!1,m=function(){};m.Orientation={VERTICAL:"vertical",HORIZONTAL:"horizontal"},i._build=function(a){if(1!==a.children.length)throw"scroller has only one child.";return this.scroller=a.children[0],this.scrollerStyle=this.scroller.style,this.bouncingEffect=null,this.scrollbar=null,this.scrollerWidth=0,this.scrollerHeight=0,this.scrollerOffsetX=0,this.scrollerOffsetY=0,this.maxScrollX=0,this.maxScrollY=0,this.startScrollerOffsetX=0,this.startScrollerOffsetY=0,this.orientation=null,this.enabled=!0,this.scrolled=!1,this.dragging=!1,this.scrollCanceled=!1,a},i._configure=function(){this.options=f.merge({},this.options,{scrollDelay:0,threshold:10,scrollbar:"",useBouncingEffect:!1,orientation:"vertical"})},i._init=function(){var a=this.options,b=this.scroller.children,c=this.element.style,d=this.scroller.style,e=this.element.offsetWidth/2,f=this.element.offsetHeight/2;this.orientation=this.orientation?this.orientation:"horizontal"===a.orientation?m.Orientation.HORIZONTAL:m.Orientation.VERTICAL,this.scrollerWidth=this.scroller.offsetWidth,this.scrollerHeight=this.scroller.offsetHeight,this.maxScrollX=e-this.scrollerWidth+b[b.length-1].offsetWidth/2,this.maxScrollY=f-this.scrollerHeight+b[b.length-1].offsetHeight/2,this.minScrollX=e-b[0].offsetWidth/2,this.minScrollY=f-b[0].offsetHeight/2,this.scrolled=!1,this.touching=!0,this.scrollCanceled=!1,this.orientation===m.Orientation.HORIZONTAL?this.maxScrollY=0:this.maxScrollX=0,c.overflow="hidden",c.position="relative",d.position="absolute",d.top="0px",d.left="0px",d.width=this.scrollerWidth+"px",d.height=this.scrollerHeight+"px",this._initScrollbar(),this._initBouncingEffect()},i._initScrollbar=function(){var a,b=this.options.scrollbar;b&&(a=c.widget.wearable.scroller.scrollbar.type[b],a&&(this.scrollbar=e.instanceWidget(this.element,"ScrollBar",{type:a,orientation:this.orientation})))},i._initBouncingEffect=function(){var a=this.options;a.useBouncingEffect&&(this.bouncingEffect=new j(this.element,{maxScrollX:this.maxScrollX,maxScrollY:this.maxScrollY,orientation:this.orientation}))},i._resetLayout=function(){var a=this.element.style,b=this.scrollerStyle;a.overflow="",a.position="",a.overflow="hidden",a.position="relative",b&&(b.position="",b.top="",b.left="",b.width="",b.height="",b["-webkit-transform"]="",b["-webkit-transition"]="")},i._bindEvents=function(){c.event.enableGesture(this.scroller,new c.event.gesture.Drag({threshold:this.options.threshold,delay:this.options.scrollDelay,blockVertical:this.orientation===m.Orientation.HORIZONTAL,blockHorizontal:this.orientation===m.Orientation.VERTICAL})),g.on(this.scroller,"drag dragstart dragend dragcancel",this),a.addEventListener("resize",this)},i._unbindEvents=function(){this.scroller&&(c.event.disableGesture(this.scroller),g.off(this.scroller,"drag dragstart dragend dragcancel",this),a.removeEventListener("resize",this))},i.handleEvent=function(a){switch(a.type){case"dragstart":this._start(a);break;case"drag":this._move(a);break;case"dragend":this._end(a);break;case"dragcancel":this.cancel(a);break;case"resize":this.refresh()}},i.setOptions=function(a){var b;for(b in a)a.hasOwnProperty(b)&&a[b]&&(this.options[b]=a[b])},i._refresh=function(){this._clear(),this._unbindEvents(),this._init(),this._bindEvents()},i.scrollTo=function(a,b,c){this._translate(a,b,c),this._translateScrollbar(a,b,c)},i._translate=function(b,c,d){var e,f,g=this.scrollerStyle;f=d?"-webkit-transform "+d/1e3+"s ease-out":"none",e="translate3d("+b+"px,"+c+"px, 0)",g["-webkit-transform"]=e,g["-webkit-transition"]=f,this.scrollerOffsetX=a.parseInt(b,10),this.scrollerOffsetY=a.parseInt(c,10)},i._translateScrollbar=function(a,b,c,d){this.scrollbar&&this.scrollbar.translate(this.orientation===m.Orientation.HORIZONTAL?-a:-b,c,d)},i._start=function(){this.scrolled=!1,this.dragging=!0,this.scrollCanceled=!1,this.startScrollerOffsetX=this.scrollerOffsetX,this.startScrollerOffsetY=this.scrollerOffsetY},i._move=function(a){var b=this.startScrollerOffsetX,c=this.startScrollerOffsetY,d=!l;this.enabled&&!this.scrollCanceled&&this.dragging&&(this.orientation===m.Orientation.HORIZONTAL?b+=a.detail.estimatedDeltaX:c+=a.detail.estimatedDeltaY,(b>this.minScrollX||b<this.maxScrollX)&&(b=b>this.minScrollX?this.minScrollX:this.maxScrollX),(c>this.minScrollY||c<this.maxScrollY)&&(c=c>this.minScrollY?this.minScrollY:this.maxScrollY),b!==this.scrollerOffsetX||c!==this.scrollerOffsetY?(this.scrolled||this._fireEvent(k.START),this.scrolled=!0,this._translate(b,c),this._translateScrollbar(b,c,0,d),this._fireEvent(k.MOVE),this.bouncingEffect&&this.bouncingEffect.hide()):(this.bouncingEffect&&this.bouncingEffect.drag(b,c),this._translateScrollbar(b,c,0,d)))},i._end=function(){this.dragging&&(this.bouncingEffect&&this.bouncingEffect.dragEnd(),this.scrollbar&&this.scrollbar.end(),this._endScroll(),this.dragging=!1)},i._endScroll=function(){this.scrolled&&this._fireEvent(k.END),this.scrolled=!1},i.cancel=function(){this.scrollCanceled=!0,this.scrolled&&(this._translate(this.startScrollerOffsetX,this.startScrollerOffsetY),this._translateScrollbar(this.startScrollerOffsetX,this.startScrollerOffsetY),this._fireEvent(k.CANCEL)),this.scrollbar&&this.scrollbar.end(),this.scrolled=!1,this.dragging=!1},i._fireEvent=function(a,b){h(this.element,a,b)},i._clear=function(){this.scrolled=!1,this.scrollCanceled=!1,this._resetLayout(),this._clearScrollbar(),this._clearBouncingEffect()},i._clearScrollbar=function(){this.scrollbar&&this.scrollbar.destroy(),this.scrollbar=null},i._clearBouncingEffect=function(){this.bouncingEffect&&this.bouncingEffect.destroy(),this.bouncingEffect=null},i._disable=function(){this.enabled=!1},i._enable=function(){this.enabled=!0},i._destroy=function(){this._clear(),this._unbindEvents(),this.scrollerStyle=null,this.scroller=null},m.prototype=i,c.widget.wearable.scroller.Scroller=m,e.defineWidget("Scroller",".scroller",["scrollTo","cancel"],m)}(a.document,d),function(a,b){var c=b.engine,d=b.util.object,e=function(){this.tabSize=0,this.activeIndex=0,this.width=0};e.EventType={change:"tabchange"},e.prototype=new b.widget.BaseWidget,d.fastMerge(e.prototype,{_init:function(a){var b=this.options;this.width=a.offsetWidth,a.classList.add(b.wrapperClass)},_configure:function(){this.options={margin:4,triggerEvent:!1,wrapperClass:"ui-tab-indicator",itemClass:"ui-tab-item",activeClass:"ui-tab-active"}},_createIndicator:function(){var b,c=this.options,d=this.activeIndex,e=a.createDocumentFragment(),f=[],g=c.margin,h=0,i=this.tabSize,j=this.width-g*(i-1),k=Math.floor(j/i),l=j%i,m=0;for(h=0;i>h;h++)f[h]=k;for(h=Math.floor((i-l)/2);l>0;h++,l--)f[h]+=1;for(h=0;i>h;h++)b=a.createElement("span"),b.classList.add(c.itemClass),b.style.width=f[h]+"px",b.style.left=m+"px",m+=f[h]+g,h===d&&b.classList.add(c.activeClass),e.appendChild(b);this.element.appendChild(e)},_removeIndicator:function(){this.element.innerHTML=""},_fireEvent:function(a,c){b.fireEvent(this.element,a,c)},_refresh:function(){this._removeIndicator(),this._createIndicator()},setActive:function(a){var b=this.options,c=this.element.children;this.activeIndex=a,[].forEach.call(c,function(a){a.classList.remove(b.activeClass)}),a<c.length&&(c[a].classList.add(b.activeClass),b.triggerEvent&&this._fireEvent(e.EventType.change,{active:a}))},setSize:function(a){var b=this.tabSize!==a;this.tabSize=a,b&&this.refresh()},_destroy:function(){var a=this.options;this._removeIndicator(),this.element.classList.remove(a.wrapperClass)}}),b.widget.wearable.TabIndicator=e,c.defineWidget("TabIndicator",".ui-tab",["setActive","setSize"],e)}(a.document,d),function(b,d){function e(){this.options={}}function f(a,b,d){var e,f=d!==c?d:b.length,g=0;for(e=0;f>e;e++)g+=a===h.Orientation.HORIZONTAL?b[e].offsetWidth:b[e].offsetHeight;return g}function g(a,b,c){var d=f(a,b,c+1);return d-=a===h.Orientation.HORIZONTAL?b[c].offsetWidth/2:b[c].offsetHeight/2}var h=d.widget.wearable.scroller.Scroller,i=d.event.gesture,j=d.engine,k=d.util.object,l=d.event,m={CHANGE:"sectionchange"};k.inherit(e,h,{_build:function(a){return this.tabIndicatorElement=null,this.tabIndicator=null,this.sections=null,this.sectionPositions=[],this.activeIndex=0,this.beforeIndex=0,this._super(a),a},_configure:function(){this._super(),this.options=k.merge(this.options,{items:"section",activeClass:"ui-section-active",circular:!1,animate:!0,animateDuration:100,orientation:"horizontal",changeThreshold:-1,useTab:!1,fillContent:!0})},_init:function(a){var b,c,d,e=this.options,f=this.scroller;if(f.style.position="absolute",this._sectionChangerWidth=a.offsetWidth,this._sectionChangerHeight=a.offsetHeight,this._sectionChangerHalfWidth=this._sectionChangerWidth/2,this._sectionChangerHalfHeight=this._sectionChangerHeight/2,this.orientation="horizontal"===e.orientation?h.Orientation.HORIZONTAL:h.Orientation.VERTICAL,"tab"===e.scrollbar&&(e.scrollbar=!1,e.useTab=!0),this.sections="string"==typeof e.items?f.querySelectorAll(e.items):e.items,b=this.sections.length,e.circular&&3>b)throw"if you use circular option, you must have at least three sections.";for(this.activeIndex>=b&&(this.activeIndex=b-1),c=0;b>c;c++)d=this.sections[c].className,d&&d.indexOf(e.activeClass)>-1&&(this.activeIndex=c),this.sectionPositions[c]=c;return this._prepareLayout(),this._initLayout(),this._super(),this._repositionSections(!0),this.setActiveSection(this.activeIndex),e.animate||(e.animateDuration=0),e.changeThreshold<0&&(e.changeThreshold=this._sectionChangerHalfWidth),this.enabled&&b>1?this.enable():this.disable(),a},_prepareLayout:function(){var a,b=this.options,c=this.sections.length,d=this._sectionChangerWidth,e=this._sectionChangerHeight,g=this.orientation,i=this.scroller.style;b.useTab&&(this._initTabIndicator(),a=this.tabIndicatorElement.offsetHeight,e-=a,this._sectionChangerHalfHeight=e/2,this.element.style.height=e+"px",this._sectionChangerHeight=e),g===h.Orientation.HORIZONTAL?(i.width=(b.fillContent?d*c:f(g,this.sections))+"px",i.height=e+"px"):(i.width=d+"px",i.height=(b.fillContent?e*c:f(g,this.sections))+"px")},_initLayout:function(){var a,b,c=this.sections.style,d=0,e=0;for(a=0,b=this.sections.length;b>a;a++)c=this.sections[a].style,c.position="absolute",this.options.fillContent&&(c.width=this._sectionChangerWidth+"px",c.height=this._sectionChangerHeight+"px"),this.orientation===h.Orientation.HORIZONTAL?(e=0,d=f(this.orientation,this.sections,a)):(e=f(this.orientation,this.sections,a),d=0),c.top=e+"px",c.left=d+"px"},_initBouncingEffect:function(){var a=this.options;a.circular||this._super()},_translateScrollbar:function(a,b,c,d){var e;this.scrollbar&&(e=this.orientation===h.Orientation.HORIZONTAL?-a+this.minScrollX:-b+this.minScrollY,this.scrollbar.translate(e,c,d))
+},_translateScrollbarWithPageIndex:function(a,b){var c;this.scrollbar&&(c=f(this.orientation,this.sections,this.activeIndex),this.scrollbar.translate(c,b))},_initTabIndicator:function(){var a=this.tabIndicatorElement=b.createElement("div");this.element.parentNode.insertBefore(a,this.element),this.tabIndicator=new j.instanceWidget(a,"TabIndicator"),this.tabIndicator.setSize(this.sections.length),this.tabIndicator.setActive(this.activeIndex),this.tabIndicatorHandler=function(a){this.tabIndicator.setActive(a.detail.active)}.bind(this),this.element.addEventListener(m.CHANGE,this.tabIndicatorHandler,!1)},_clearTabIndicator:function(){this.tabIndicator&&(this.element.parentNode.removeChild(this.tabIndicatorElement),this.element.removeEventListener(m.CHANGE,this.tabIndicatorHandler,!1),this.tabIndicator.destroy(),this.tabIndicator=null,this.tabIndicatorElement=null,this.tabIndicatorHandler=null)},_resetLayout:function(){var a,b,c=this.sections.style;for(a=0,b=this.sections.length;b>a;a++)c=this.sections[a].style,c.position="",c.width="",c.height="",c.top="",c.left="";this._super()},_bindEvents:function(){this._super(),d.event.enableGesture(this.scroller,new d.event.gesture.Swipe({orientation:this.orientation===h.Orientation.HORIZONTAL?i.Orientation.HORIZONTAL:i.Orientation.VERTICAL})),l.on(this.scroller,"swipe webkitTransitionEnd",this)},_unbindEvents:function(){this._super(),this.scroller&&(d.event.disableGesture(this.scroller),l.off(this.scroller,"swipe webkitTransitionEnd",this))},handleEvent:function(a){switch(this._super(a),a.type){case"swipe":this._swipe(a);break;case"webkitTransitionEnd":this._endScroll()}},_notifyChanagedSection:function(a){var b,c=this.options.activeClass,d=this.sections.length,e=0;for(e=0;d>e;e++)b=this.sections[e],b.classList.remove(c),e===this.activeIndex&&b.classList.add(c);this._fireEvent(m.CHANGE,{active:a})},setActiveSection:function(a,b){var c=this.sectionPositions[a],d=b,e=this.activeIndex,f=0,i=0,j=0,k=0;this.orientation===h.Orientation.HORIZONTAL?f=-g(this.orientation,this.sections,c):i=-g(this.orientation,this.sections,c),(this.beforeIndex-a>1||this.beforeIndex-a<-1)&&(d=0),this.activeIndex=a,this.beforeIndex=this.activeIndex,f!==this.scrollerOffsetX||i!==this.scrollerOffsetY?(this.orientation===h.Orientation.HORIZONTAL?j=this._sectionChangerHalfWidth+f:k=this._sectionChangerHalfHeight+i,this._translate(j,k,b),this._translateScrollbarWithPageIndex(a,d)):this._endScroll(),this.activeIndex!==e&&this._notifyChanagedSection(this.activeIndex)},getActiveSectionIndex:function(){return this.activeIndex},_start:function(a){this._super(a),this.beforeIndex=this.activeIndex},_move:function(a){var b=this.options.changeThreshold,c=this.orientation===h.Orientation.HORIZONTAL?a.detail.deltaX:a.detail.deltaY,d=this.activeIndex;this._super(a),this.scrolled&&(this.activeIndex=c>b?this._calculateIndex(this.beforeIndex-1):-b>c?this._calculateIndex(this.beforeIndex+1):this.beforeIndex,this.activeIndex!==d&&this._notifyChanagedSection(this.activeIndex))},_end:function(){this.scrollbar&&this.scrollbar.end(),this.enabled&&!this.scrollCanceled&&this.dragging&&(this.bouncingEffect&&this.bouncingEffect.dragEnd(),this.setActiveSection(this.activeIndex,this.options.animateDuration),this.dragging=!1)},_swipe:function(a){var b=a.detail.direction===i.Direction.UP||a.detail.direction===i.Direction.LEFT?1:-1,c=this._calculateIndex(this.beforeIndex+b);this.enabled&&!this.scrollCanceled&&this.dragging&&(this.bouncingEffect&&this.bouncingEffect.dragEnd(),this.activeIndex!==c&&(this.activeIndex=c,this._notifyChanagedSection(c)),this.setActiveSection(c,this.options.animateDuration),this.dragging=!1)},_endScroll:function(){this.enabled&&this.scrolled&&!this.scrollCanceled&&(this._repositionSections(),this._super())},_repositionSections:function(b){var c,d,e,i,j,k,l,m=this.sections.length,n=this.sectionPositions[this.activeIndex],o=a.parseInt(m/2,10),p=this.options.circular,q=0,r=0;if(this.orientation===h.Orientation.HORIZONTAL?(k=-g(this.orientation,this.sections,p?o:this.activeIndex),l=0):(k=0,l=-g(this.orientation,this.sections,p?o:this.activeIndex)),this._translateScrollbarWithPageIndex(this.activeIndex),(b||0===n||n===m-1)&&(this.orientation===h.Orientation.HORIZONTAL?q=this._sectionChangerHalfWidth+k:r=this._sectionChangerHalfHeight+l,this._translate(q,r),p))for(c=0;m>c;c++)e=(m+this.activeIndex-o+c)%m,d=this.sections[e].style,this.sectionPositions[e]=c,this.orientation===h.Orientation.HORIZONTAL?(i=0,j=f(this.orientation,this.sections,c)):(i=f(this.orientation,this.sections,c),j=0),d.top=i+"px",d.left=j+"px"},_calculateIndex:function(a){var b=this.sections.length;return a=this.options.circular?(b+a)%b:0>a?0:a>b-1?b-1:a},_clear:function(){this._clearTabIndicator(),this._super(),this.sectionPositions.length=0}}),d.widget.wearable.SectionChanger=e,j.defineWidget("SectionChanger",".scroller",["getActiveSectionIndex","setActiveSection"],e)}(a.document,d),function(a,b,c){var d=c.widget.wearable.VirtualListview,e=c.engine,f=c.util.DOM,g="x",h="y",i=function(){return this.options={bufferSize:100,dataLength:0,orientation:h,listItemUpdater:function(){return null}},this},j=new d,k=d.prototype,l=k.draw,m=k._refreshScrollbar;j.draw=function(){var a=this,c=a.element,d=a.ui,e=null,f=null;a.options.orientation===g&&(e=b.createElement("div"),f=e.style,c.parentNode.appendChild(e),e.appendChild(c),e.appendChild(d.spacer),f.width="10000px",f.height="100%",d.container=e),a._initListItem(),l.call(a)},j._refreshScrollbar=function(){var a=0,b=this.ui;m.call(this),b.container&&(a=this.element.clientWidth+b.spacer.clientWidth,b.container.style.width=a+"px")},j._initListItem=function(){var a=this,c=a.element,d=b.createElement("div"),e=b.createElement("div"),g=d.style,i=a.options.orientation,j=c.style,k=e.style;g.overflow="hidden",e.style.overflow="hidden",c.appendChild(e),e.appendChild(d),a.options.listItemUpdater(d,0),i===h?(j.overflowY="auto",j.overflowX="hidden",k.overflow="hidden",d.style.float="left",a._cellSize=f.getElementWidth(d),a._columnsCount=Math.floor(f.getElementWidth(c)/a._cellSize)):(j.overflowX="auto",j.overflowY="hidden",k.overflow="hidden",k.float="left",j.height="100%",k.height="100%",a._cellSize=f.getElementHeight(d),a._columnsCount=Math.floor(f.getElementHeight(c)/a._cellSize)),c.removeChild(e),a.options.originalDataLength=a.options.dataLength,a.options.dataLength/=a._columnsCount},j._updateListItem=function(a,c){var d,e,f,i,j,k=a.style,l=this.options;for(a.innerHTML="",k.overflow="hidden",k.position="relative",l.orientation===g&&(k.height="100%"),f=this._columnsCount,j=100/f,e=0;f>e;e++)d=b.createElement("div"),i=d.style,i.overflow="hidden",l.orientation===h?(d.style.float="left",d.style.width=j+"%"):d.style.height=j+"%",f*c+e<l.originalDataLength&&this.options.listItemUpdater(d,f*c+e),a.appendChild(d)},i.prototype=j,c.widget.wearable.VirtualGrid=i,e.defineWidget("VirtualGrid",".ui-virtualgrid",[],i)}(a,a.document,d),function(b,c){function d(a){var b=a._selectedIndex;null!==b&&a._ui.childItems[b].classList.remove(t.SNAP_LISTVIEW_SELECTED)}function e(a){var b,c,d=a._ui,e=d.childItems,f=d.scrollableParent,g=f.scrollTop,h=f.offsetHeight,i=g+h/2,j=e.length;for(a._isScrollStarted=!1,l.trigger(a._ui.scrollableParent,o.SCROLL_END),b=0;j>b;b++)if(c=e[b],c.itemTop<i&&c.itemBottom>=i){a._selectedIndex=b,c.classList.add(t.SNAP_LISTVIEW_SELECTED),l.trigger(c,o.SELECTED);break}}function f(b){var c=e.bind(null,b);b._isScrollStarted||(b._isScrollStarted=!0,l.trigger(b._ui.scrollableParent,o.SCROLL_START)),b._callbacks.scrollEnd=c,a.clearTimeout(b._timer),d(b),b._timer=a.setTimeout(c,u)}function g(a,b){var c,d=a._ui.scrollableParent,e=a._ui.childItems,f=a._selectedIndex,g=b.detail.direction;d&&e&&f>=0&&(c=e[f].itemHeight,g===r.CW&&f+1<e.length?d.scrollTop+=c:g===r.CCW&&f>0&&(d.scrollTop-=c))}function h(a){for(var c;a!=b.body;){if(c=m.getCSSProperty(a,"overflow-y"),"scroll"===c||"auto"===c&&a.scrollHeight>a.clientHeight)return a;a=a.parentNode}return null}function i(a){var b,c,d=a.children,e=d.length;for(b=0;e>b;b++)c=d[b],c.itemTop=c.offsetTop,c.itemHeight=c.offsetHeight,c.itemBottom=c.itemTop+c.itemHeight,c.classList.add("ui-snap-listview-item")}var j=c.widget.BaseWidget,k=c.engine,l=c.event,m=c.util.DOM,n=c.util.selectors,o={SCROLL_START:"scrollstart",SCROLL_END:"scrollend",SELECTED:"selected"},p=function(){var a=this;a._ui={page:null,scrollableParent:null,childItems:{}},a.options={},a._callbacks={},a._timer=null,a._isScrollStarted=!1,a._selectedIndex=null},q=new j,r={CW:"CW",CCW:"CCW"},s="ui-snap-listview",t={SNAP_LISTVIEW:s,SNAP_LISTVIEW_SELECTED:s+"-selected"},u=300;p.classes=t,q._build=function(a){return a.classList.contains(t.SNAP_LISTVIEW)||a.classList.add(t.SNAP_LISTVIEW),a},q._init=function(b){var c=this,d=c._ui,j=b,k=f.bind(null,c),m=g.bind(null,c);return c._callbacks.scrollStart=k,c._callbacks.rotaryDetent=m,d.page=n.getClosestByClass(j,"ui-page")||a,d.childItems=j.children,d.scrollableParent=h(j)||d.page,d.childItems&&d.childItems.length>0&&i(j),l.on(d.scrollableParent,"scroll",k),l.on(a,"rotarydetent",m),e(c),b},q._refresh=function(){var a=this,b=a.element,c=a._ui;return c.scrollableParent=h(b)||c.page,i(b),e(this),null},q._unbindEvents=function(){this._ui.scrollableParent.removeEventListener("scroll",this._callbacks.scrollStart,!1),a.removeEventListener("rotarydetent",this._callbacks.rotaryDetent,!1)},q._destroy=function(){var b=this;return b._unbindEvents(),b._ui=null,b._callbacks=null,b._isScrollStarted=null,b._timer&&a.clearTimeout(b._timer),b._timer=null,b._selectedIndex=null,null},p.prototype=q,c.widget.wearable.SnapListview=p,k.defineWidget("SnapListview",".ui-snap-listview",[],p,"wearable")}(a.document,d),function(b,d){var e=d.event.gesture,f=d.event,g=d.engine,h=d.util.DOM,i=d.util.selectors,j={LEFT:"swipelist.left",RIGHT:"swipelist.right"},k=function(){this.container=null,this.swipeElement=null,this.swipeLeftElement=null,this.swipeRightElement=null,this.swipeElementStyle=null,this.swipeLeftElementStyle=null,this.swipeRightElementStyle=null,this.activeElement=null,this.activeTarget=null,this.resetLayoutCallback=null,this.options={},this._interval=0,this._cancelled=!1,this._dragging=!1,this._animating=!1},l=new d.widget.BaseWidget,m=function(a){a.preventDefault()};l._configure=function(){this.options={threshold:10,animationThreshold:150,animationDuration:200,animationInterval:8,container:null,swipeTarget:"li",swipeElement:".ui-swipelist",swipeLeftElement:".ui-swipelist-left",swipeRightElement:".ui-swipelist-right",ltrStartColor:"",ltrEndColor:"",rtlStartColor:"",rtlEndColor:""}},l._init=function(a){var b,e,f=i.getClosestBySelector(a,"."+d.widget.wearable.Page.classes.uiPage),g=this.options,j=/rgb\(([0-9]+), ([0-9]+), ([0-9]+)\)/g;this.container=g.container?f.querySelector(g.container):this._findScrollableElement(this.element),this.container.style.position="relative",this.swipeElement=f.querySelector(g.swipeElement),this.swipeLeftElement=g.swipeLeftElement?f.querySelector(g.swipeLeftElement):c,this.swipeRightElement=g.swipeRightElement?f.querySelector(g.swipeRightElement):c,this.swipeElement&&(this.swipeElementStyle=this.swipeElement.style,this.swipeElementStyle.display="none",this.swipeElementStyle.background="transparent",this.swipeElementStyle.width=this.container.offsetWidth+"px",this.swipeElementStyle.height=this.container.offsetHeight+"px"),this.swipeLeftElement&&(this.swipeLeftElementStyle=this.swipeLeftElement.style,this.swipeLeftElementStyle.display="none",b=this.swipeLeftElement?h.getCSSProperty(this.swipeLeftElement,"background-image").match(j):c),this.swipeRightElement&&(this.swipeRightElementStyle=this.swipeRightElement.style,this.swipeRightElementStyle.display="none",e=this.swipeRightElement?h.getCSSProperty(this.swipeRightElement,"background-image").match(j):c),g.ltrStartColor=g.ltrStartColor||b[0],g.ltrEndColor=g.ltrEndColor||b[1],g.rtlStartColor=g.rtlStartColor||e[0],g.rtlEndColor=g.rtlEndColor||e[1],this.resetLayoutCallback=null,this.swipeElement.parentNode!==this.container&&(this.resetLayoutCallback=function(a,b,c){return function(){try{b?a.insertBefore(c,b):a.appendChild(c)}catch(d){c.parentNode.removeChild(c)}}}(this.swipeElement.parentNode,this.swipeElement.nextElementSibling,this.swipeElement),this.container.appendChild(this.swipeElement))},l._reset=function(){this.container.style.position="",this.swipeElementStyle.display="",this.swipeElementStyle.background="",this.swipeElementStyle.width="",this.swipeElementStyle.height="",this.swipeLeftElementStyle.display="",this.swipeLeftElementStyle.background="",this.swipeRightElementStyle.display="",this.swipeRightElementStyle.background="",this.resetLayoutCallback&&this.resetLayoutCallback(),this._unbindEvents()},l._bindEvents=function(){d.event.enableGesture(this.element,new e.Drag({threshold:this.options.threshold,blockVertical:!0}),new e.Swipe({orientation:e.Orientation.HORIZONTAL})),f.on(this.element,"drag dragstart dragend dragcancel swipe",this),f.on(b,"scroll touchcancel",this),f.on(this.swipeElement,"touchstart touchmove touchend",m,!1)},l._unbindEvents=function(){d.event.disableGesture(this.element),f.off(this.element,"drag dragstart dragend dragcancel swipe",this),f.off(b,"scroll touchcancel",this),f.off(this.swipeElement,"touchstart touchmove touchend",m,!1)},l.handleEvent=function(a){switch(a.type){case"dragstart":this._start(a);break;case"drag":this._move(a);break;case"dragend":this._end(a);break;case"swipe":this._swipe(a);break;case"dragcancel":case"scroll":this._cancel()}},l._translate=function(b,c,d){var e,f,g,h=c/a.innerWidth*100,i=this;this.swipeLeftElement&&c>=0?(e=i.options.ltrStartColor,f=i.options.ltrEndColor,g="left"):this.swipeRightElement&&0>c&&(e=i.options.rtlStartColor,f=i.options.rtlEndColor,g="right",h=Math.abs(h)),function j(){b.background="-webkit-linear-gradient("+g+", "+e+" 0%, "+f+" "+h+"%)",d&&h<i.options.animationDuration?(i._animating=!0,h+=i.options.animationInterval,a.webkitRequestAnimationFrame(j)):d&&h>=i.options.animationDuration&&(i._animating=!1,i._transitionEnd())}()},l._findScrollableElement=function(a){for(;a.scrollHeight<=a.offsetHeight&&a.scrollWidth<=a.offsetWidth;)a=a.parentNode;return a},l._findSwipeTarget=function(a){for(var b=this.options.swipeTarget;a&&a.webkitMatchesSelector&&!a.webkitMatchesSelector(b);)a=a.parentNode;return a},l._fireEvent=function(a,b){var c=this.activeTarget||this.listElement;f.trigger(c,a,b)},l._start=function(a){var b,c,d,e,f=a.detail;this._dragging=!1,this._cancelled=!1,this.activeTarget=this._findSwipeTarget(f.srcEvent.target),this.activeTarget&&(c=this.activeTarget.offsetWidth,d=this.activeTarget.offsetHeight,b=this.container.scrollTop,e=this.activeTarget.offsetTop-b,this.swipeElementStyle.top=b+"px",this.swipeLeftElementStyle&&(this.swipeLeftElementStyle.width=c+"px",this.swipeLeftElementStyle.height=d+"px",this.swipeLeftElementStyle.top=e+"px"),this.swipeRightElementStyle&&(this.swipeRightElementStyle.width=c+"px",this.swipeRightElementStyle.height=d+"px",this.swipeRightElementStyle.top=e+"px"),this._dragging=!0)},l._move=function(a){var b,c=a.detail,d=c.estimatedDeltaX;this._dragging&&!this._cancelled&&(this.swipeLeftElement&&c.direction===e.Direction.RIGHT&&d>=0?(this.swipeRightElementStyle&&(this.swipeRightElementStyle.display="none"),this.activeElement=this.swipeLeftElement,b=this.swipeLeftElementStyle):this.swipeRightElement&&c.direction===e.Direction.LEFT&&0>d&&(this.swipeLeftElementStyle&&(this.swipeLeftElementStyle.display="none"),this.activeElement=this.swipeRightElement,b=this.swipeRightElementStyle),b&&(b.display="block",this.swipeElementStyle.display="block",this._translate(b,d,!1)))},l._end=function(a){var b=a.detail;this._dragging&&!this._cancelled&&(this.swipeLeftElement&&b.estimatedDeltaX>this.options.animationThreshold?this._fire(j.LEFT,a):this.swipeRightElement&&b.estimatedDeltaX<-this.options.animationThreshold?this._fire(j.RIGHT,a):this._hide(),this._dragging=!1)},l._swipe=function(a){var b=a.detail;this._dragging&&!this._cancelled&&(this.swipeLeftElement&&b.direction===e.Direction.RIGHT?this._fire(j.LEFT,a):this.swipeRightElement&&b.direction===e.Direction.LEFT?this._fire(j.RIGHT,a):this._hide(),this._dragging=!1)},l._fire=function(a,b){var c=b.detail;a===j.LEFT?this._translate(this.swipeLeftElementStyle,c.estimatedDeltaX,!0):a===j.RIGHT&&this._translate(this.swipeRightElementStyle,c.estimatedDeltaX,!0)},l._transitionEnd=function(){this._hide(),this.activeElement===this.swipeLeftElement?this._fireEvent(j.LEFT):this.activeElement===this.swipeRightElement&&this._fireEvent(j.RIGHT)},l._cancel=function(){this._dragging=!1,this._cancelled=!0,this._hide()},l._hide=function(){this.swipeElementStyle&&(this.swipeElementStyle.display="none"),this.activeElement&&(this.activeElement.style.display="none")},l._destroy=function(){this._reset(),this.element=null,this.container=null,this.swipeElement=null,this.swipeLeftElement=null,this.swipeRightElement=null,this.swipeElementStyle=null,this.swipeLeftElementStyle=null,this.swipeRightElementStyle=null,this.activeElement=null,this.activeTarget=null,this.startX=null,this.options=null,this.gesture=null,this._cancelled=null,this._dragging=null,this._animating=null},k.prototype=l,d.widget.wearable.SwipeList=k,g.defineWidget("SwipeList",".ui-swipe",[],k)}(a.document,d),function(a,b){b.widget.wearable.scroller.scrollbar=b.widget.wearable.scroller.scrollbar||{}}(a,d),function(a,b){b.widget.wearable.scroller.scrollbar.type=b.widget.wearable.scroller.scrollbar.type||{}}(a,d),function(a,b){b.widget.wearable.scroller.scrollbar.type.interface={setScrollbarLayout:function(){},remove:function(){},start:function(){},end:function(){},offset:function(){}}}(a.document,d),function(a,b){var c=b.util.object,d=b.widget.wearable.scroller.scrollbar.type,e=d.interface,f=b.widget.wearable.scroller.Scroller;d.bar=c.merge({},e,{options:{animationDuration:500},setScrollbar:function(a,b,c){this._viewLayout=a,this._clipLayout=c,this._firstChildLayout=b,this._ratio=c/b},getScrollbarSize:function(){return this._firstChildLayout/this._viewLayout*this._firstChildLayout*this._ratio},offset:function(a,b){var c,d;return b=b*this._clipLayout/this._viewLayout,a===f.Orientation.VERTICAL?(c=0,d=b):(c=b,d=0),{x:c,y:d}},start:function(a){var b=a.style,c=this.options.animationDuration;b["-webkit-transition"]="opacity "+c/1e3+"s ease",b.opacity=1},end:function(a){var b=a.style,c=this.options.animationDuration;b["-webkit-transition"]="opacity "+c/1e3+"s ease",b.opacity=0}})}(a.document,d),function(b,c){var d=c.widget.BaseWidget,e=c.engine,f=new d,g=c.util.object,h=c.util.selectors,i=(c.widget.wearable.scroller.scrollbar.type,{wrapperClass:"ui-scrollbar-bar-type",barClass:"ui-scrollbar-indicator",orientationClass:"ui-scrollbar-"}),j=c.widget.wearable.scroller.Scroller,k=function(){this.wrapper=null,this.barElement=null,this.container=null,this.view=null,this.options={},this.type=null,this.maxScroll=null,this.started=!1,this.displayDelayTimeoutId=null,this.lastScrollPosition=0};f._build=function(a){return this.clip=a,this.view=a.children[0],this.firstChild=this.view.children[0],a},f._configure=function(){this.options=g.merge({},this.options,{type:!1,displayDelay:700,orientation:j.Orientation.VERTICAL})},f._init=function(){this.type=this.options.type,this.type&&this._createScrollbar()},f._bindEvents=function(){b.addEventListener("visibilitychange",this)},f._createScrollbar=function(){var a=this.options.orientation,c=b.createElement("DIV"),d=b.createElement("span"),e=this.view,f=this.clip,g=this.firstChild,h=this.type;f.appendChild(c),c.appendChild(d),c.classList.add(i.wrapperClass),d.className=i.barClass,a===j.Orientation.HORIZONTAL?(h.setScrollbar(e.offsetWidth,g.offsetWidth,f.offsetWidth),d.style.width=h.getScrollbarSize()+"px",c.classList.add(i.orientationClass+"horizontal")):(h.setScrollbar(e.offsetHeight,g.offsetHeight,f.offsetHeight),d.style.height=h.getScrollbarSize()+"px",c.classList.add(i.orientationClass+"vertical")),this.wrapper=c,this.barElement=d},f._removeScrollbar=function(){this.clip.removeChild(this.wrapper),this.wrapper=null,this.barElement=null},f._refresh=function(){var a=this;a._clear(),a._init(),a.translate(a.lastScrollPosition)},f.translate=function(b,c,d){var e,f,g,h,i=this.options.orientation;this.wrapper&&this.type&&this.lastScrollPosition!==b&&(d=d!==!1,this.lastScrollPosition=b,b=this.type.offset(i,b),g=this.barElement.style,f=c?"-webkit-transform "+c/1e3+"s ease-out":"none",e="translate3d("+b.x+"px,"+b.y+"px, 0)",g["-webkit-transform"]=e,g["-webkit-transition"]=f,this.started||this._start(),null!==this.displayDelayTimeoutId&&(a.clearTimeout(this.displayDelayTimeoutId),this.displayDelayTimeoutId=null),d&&(h=(c||0)+this.options.displayDelay,this.displayDelayTimeoutId=a.setTimeout(this._end.bind(this),h)))},f.end=function(){this.displayDelayTimeoutId||(this.displayDelayTimeoutId=a.setTimeout(this._end.bind(this),this.options.displayDelay))},f._start=function(){this.type.start(this.wrapper,this.barElement),this.started=!0},f._end=function(){this.started=!1,this.displayDelayTimeoutId=null,this.type&&this.type.end(this.wrapper,this.barElement)},f.handleEvent=function(a){var d;switch(a.type){case"visibilitychange":d=h.getClosestBySelector(this.clip,"."+c.widget.wearable.Page.classes.uiPage),"visible"===b.visibilityState&&d===c.activePage&&this.refresh()}},f._clear=function(){this._removeScrollbar(),this.started=!1,this.type=null,this.barElement=null,this.displayDelayTimeoutId=null},f._destroy=function(){this._clear(),b.removeEventListener("visibilitychange",this),this.options=null,this.clip=null,this.view=null},k.prototype=f,c.widget.wearable.scroller.scrollbar.ScrollBar=k,e.defineWidget("ScrollBar","",["translate"],k)}(a.document,d),function(b,c){var d=c.widget.BaseWidget,e=c.engine,f=function(){var a=this;a._activeIndex=null,a.options={}},g={indicator:"ui-page-indicator",indicatorActive:"ui-page-indicator-active",indicatorItem:"ui-page-indicator-item"},h=new d;f.classes=g,h._configure=function(){this.options={maxPage:5,numberOfPages:null}},h._build=function(a){return this._createIndicator(a),a},h._createIndicator=function(a){var d,e,f,h=this,i=h.options;if(null===i.numberOfPages)return c.error("build error: numberOfPages is null"),void 0;for(e=i.numberOfPages<i.maxPage?i.numberOfPages:i.maxPage,d=0;e>d;d++)f=b.createElement("span"),f.classList.add(g.indicatorItem),d===h._activeIndex&&f.classList.add(g.indicatorActive),a.appendChild(f)},h._removeIndicator=function(a){a.textContent=""},h.setActive=function(b){var d,e,f=this,h=b,i=f.element.children,j=f.options.maxPage,k=f.options.numberOfPages,l=a.parseInt(j/2,10),m=0,n=g.indicatorActive;if(f._activeIndex=b,k>j)e=j,m=k-j;else{if(null===k)return c.error("setActive error: numberOfPages is null"),void 0;if(0===k)return;e=k}for(d=0;e>d;d++)i[d].classList.remove(n);b>l&&l+m>=b?h=l:b>l+m&&(h=b-m),i[h].classList.add(n)},h._refresh=function(){var a=this;a._removeIndicator(a.element),a._createIndicator(a.element)},h._destroy=function(){this._removeIndicator(this.element)},f.prototype=h,c.widget.wearable.PageIndicator=f,e.defineWidget("PageIndicator",".ui-page-indicator",["setActive"],f,"wearable")}(a.document,d),function(a){a.helper=a.helper||{}}(d),function(a,b,c){function d(a){a._selectedMarqueeWidget&&(a._selectedMarqueeWidget.destroy(),a._selectedMarqueeWidget=null)}function e(){d(this)}function f(a){var b=this,c=a.target.querySelector(".ui-marquee");d(b),c&&(b._selectedMarqueeWidget=g.instanceWidget(c,"Marquee",{delay:b.options.marqueeDelay,autoRun:!1}),b._selectedMarqueeWidget.start())}var g=c.engine,h=c.util.object,i={marqueeDelay:0},j=function(a,b){var c=this;c.options=h.merge({},i),c._snapListviewWidget=null,c._selectedMarqueeWidget=null,c._callbacks={},c.init(a,b)},k=j.prototype;k.init=function(a,b){var c=this;h.fastMerge(c.options,b),c._snapListviewWidget=g.instanceWidget(a,"SnapListview"),c.bindEvents()},k.bindEvents=function(){var b,c,d=this;b=e.bind(d),c=f.bind(d),d._callbacks.touchStart=b,d._callbacks.selected=c,a.addEventListener("touchstart",b),a.addEventListener("selected",c)},k.unbindEvents=function(){var b=this;a.removeEventListener("touchstart",b._callbacks.touchStart),a.removeEventListener("selected",b._callbacks.selected),b._callbacks.touchStart=null,b._callbacks.selected=null},k.destroy=function(){var a=this;a.unbindEvents(),d(a),a._snapListviewWidget.destroy(),a.options=null,a._snapListviewWidget=null,a._selectedMarqueeWidget=null,a._callbacks=null},j.create=function(a,b){return new j(a,b)},c.helper.SnapListMarqueeStyle=j}(b,a,d),function(a,b,c){function d(a){h.on(a,k.COLLAPSE+" "+k.COMPLETE,this,!1)}function e(a){h.off(a,k.COLLAPSE+" "+k.COMPLETE,this,!1)}var f=c.engine,g=c.util.object,h=c.event,i=(c.widget.core.Marquee,c.widget.wearable.ExpandableHeader),j={delay:0,marqueeStyle:"scroll",ellipsisEffect:"none",speed:100,interation:"infinite",autoRun:!1},k=i.events,l={TITLE:"ui-title",MARQUEE:"ui-marquee"},m=function(a,b){var c=this;c.options=g.merge({},j),c._expandableHeader=null,c._marqueeWidget=null,c.init(a,b)},n=m.prototype;n.handleEvent=function(a){var b=this;switch(a.type){case k.COMPLETE:b._onComplete(a);break;case k.COLLAPSE:b._onCollapse(a)}},n._onComplete=function(){var a=this._marquee;a&&a.start()},n._onCollapse=function(){var a=this._marquee;a&&a.reset()},n.init=function(a,b){var c,d=this;c=b.textElement?"string"==typeof b.textElement?a.querySelector(b.textElement):b.textElement:a.querySelector("."+l.TITLE),g.fastMerge(d.options,b),d._element=a,d._expandableHeader=f.instanceWidget(a,"ExpandableHeader",{scrollElement:b.scrollElement}),c&&(c.classList.add(l.MARQUEE),d._marquee=f.instanceWidget(c,"Marquee",d.options)),d._bindEvents()},n._bindEvents=function(){var a=this;d.call(a,a._element)},n._unbindEvents=function(){var a=this;e.call(a,a._element)},n.destroy=function(){var a=this;a._unbindEvents(),a._element=null,a._expandableHeader=null,a._marquee=null,a._options=null},m.create=function(a,b){return new m(a,b)},c.helper.ExpandableHeaderMarqueeStyle=m}(b,a,d),function(a,b,c){function d(a){h.on(a,"touchstart touchend mousedown mouseup",this,!1)}function e(a){h.off(a,"touchstart touchend mousedown mouseup",this,!1)}var f=c.engine,g=c.util.object,h=c.event,i=c.util.selectors,j=(c.widget.wearable.Drawer,c.widget.wearable.SectionChanger,{more:".ui-more",sectionChanger:".ui-section-changer"}),k={page:"ui-page"},l=function(a,b){var c=this;c.options=g.merge({},j),c._drawerWidget=null,c._handlerElement=null,c._sectionChangerWidget=null,c.init(a,b)},m=l.prototype;m.handleEvent=function(a){var b=this;switch(a.type){case"touchstart":case"mousedown":b._onTouchStart(a);break;case"touchend":case"mouseup":b._onTouchEnd(a)}},m._onTouchStart=function(a){this._drawerWidget.transition(60),a.preventDefault(),a.stopPropagation()},m._onTouchEnd=function(){this._drawerWidget.close()},m.init=function(a,b){var c,d,e=this,h=i.getClosestByClass(a,k.page);g.fastMerge(e.options,b),c=h.querySelector(e.options.handler),d=a.querySelector(e.options.sectionChanger),e._drawerWidget=f.instanceWidget(a,"Drawer"),c&&(e._drawerWidget.setDragHandler(c),e._handlerElement=c,e._bindEvents()),d&&(e._sectionChangerWidget=f.instanceWidget(d,"SectionChanger",e.options))},m._bindEvents=function(){var a=this;d.call(a,a._handlerElement)},m._unbindEvents=function(){var a=this;e.call(a,a._handlerElement)},m.destroy=function(){var a=this;a._handlerElement&&a._unbindEvents(),a._drawerWidget=null,a._handlerElement=null,a._sectionChangerWidget=null},l.create=function(a,b){return new l(a,b)},c.helper.DrawerMoreStyle=l}(b,a,d),function(a){a.router.route=a.router.route||{}}(d),function(a,b,d){var e,f=d.engine,g=d.util.object,h=d.util.selectors,i=d.util.DOM,j={},k={uiStateKey:"&ui-state",urlParseRE:/^(((([^:\/#\?]+:)?(?:(\/\/)((?:(([^:@\/#\?]+)(?:\:([^:@\/#\?]+))?)@)?(([^:\/#\?\]\[]+|\[[^\/\]@#?]+\])(?:\:([0-9]+))?))?)?)?((\/?(?:[^\/\?#]+\/+)*)([^\?#]*)))?(\?[^#]+)?)(#.*)?/,getLocation:function(b){var c=this.parseUrl(b||a.location.href),d=c.hash;return d="#"===d?"":d,j=c,c.protocol+"//"+c.host+c.pathname+c.search+d},getDocumentUrl:function(a){return a?g.copy(k.documentUrl):k.documentUrl.href},parseLocation:function(){return this.parseUrl(this.getLocation())},parseUrl:function(a){var b;return"object"==typeof a?a:(b=k.urlParseRE.exec(a||"")||[],{href:b[0]||"",hrefNoHash:b[1]||"",hrefNoSearch:b[2]||"",domain:b[3]||"",protocol:b[4]||"",doubleSlash:b[5]||"",authority:b[6]||"",username:b[8]||"",password:b[9]||"",host:b[10]||"",hostname:b[11]||"",port:b[12]||"",pathname:b[13]||"",directory:b[14]||"",filename:b[15]||"",search:b[16]||"",hash:b[17]||""})},makePathAbsolute:function(a,b){var c,d,e,f;if(a&&"/"===a.charAt(0))return a;for(a=a||"",b=b?b.replace(/^\/|(\/[^\/]*|[^\/]+)$/g,""):"",c=b?b.split("/"):[],d=a.split("/"),f=0;f<d.length;f++)switch(e=d[f]){case".":break;case"..":c.length&&c.pop();break;default:c.push(e)}return"/"+c.join("/")},isSameDomain:function(a,b){return k.parseUrl(a).domain===k.parseUrl(b).domain},isRelativeUrl:function(a){return""===k.parseUrl(a).protocol},isAbsoluteUrl:function(a){return""!==k.parseUrl(a).protocol},makeUrlAbsolute:function(a,b){if(!k.isRelativeUrl(a))return a;var c=k.parseUrl(a),d=k.parseUrl(b),e=c.protocol||d.protocol,f=c.protocol?c.doubleSlash:c.doubleSlash||d.doubleSlash,g=c.authority||d.authority,h=""!==c.pathname,i=k.makePathAbsolute(c.pathname||d.filename,d.pathname),j=c.search||!h&&d.search||"",l=c.hash;return e+f+g+i+j+l},addSearchParams:function(a,b){var c=k.parseUrl(a),d="object"==typeof b?this.getAsURIParameters(b):b,e=c.search||"?";return c.hrefNoSearch+e+("?"===e.charAt(e.length-1)?"":"&")+d+(c.hash||"")},addHashSearchParams:function(a,b){var c=k.parseUrl(a),d="object"==typeof b?k.getAsURIParameters(b):b,e=c.hash,f=e?e.indexOf("?")<0?e+"?":e+"&":"#?";return c.hrefNoHash+f+("?"===f.charAt(f.length-1)?"":"&")+d},convertUrlToDataUrl:function(b,c,d){var e=k.parseUrl(b);return k.isEmbeddedPage(e,c)?e.hash.replace(/^#|\?.*$/g,""):(d=d||k.documentBase,k.isSameDomain(e,d)?e.hrefNoHash.replace(d.domain,""):a.decodeURIComponent(b))},get:function(a){return a===c&&(a=this.parseLocation().hash),this.stripHash(a).replace(/[^\/]*\.[^\/*]+$/,"")},isPath:function(a){return/\//.test(a)},clean:function(a,b){return a.replace(b.domain,"")},stripHash:function(a){return a.replace(/^#/,"")},stripQueryParams:function(a){return a.replace(/\?.*$/,"")},isHashValid:function(a){return/^#[^#]+$/.test(a)},isExternal:function(a,b){var c=k.parseUrl(a);return c.protocol&&c.domain!==b.domain?!0:!1},hasProtocol:function(a){return/^(:?\w+:)/.test(a)},isEmbedded:function(a){var b=k.parseUrl(a);return""!==b.protocol?!k.isPath(b.hash)&&!!b.hash&&b.hrefNoHash===k.parseLocation().hrefNoHash:/^#/.test(b.href)},squash:function(a,b){var c,d,e,f,g=this.isPath(a),h=this.parseUrl(a),i=h.hash,j="";return b=b||(k.isPath(a)?k.getLocation():k.getDocumentUrl()),d=g?k.stripHash(a):a,d=k.isPath(h.hash)?k.stripHash(h.hash):d,f=d.indexOf(this.uiStateKey),f>-1&&(j=d.slice(f),d=d.slice(0,f)),c=k.makeUrlAbsolute(d,b),e=this.parseUrl(c).search,g?((k.isPath(i)||0===i.replace("#","").indexOf(this.uiStateKey))&&(i=""),j&&-1===i.indexOf(this.uiStateKey)&&(i+=j),-1===i.indexOf("#")&&""!==i&&(i="#"+i),c=k.parseUrl(c),c=c.protocol+"//"+c.host+c.pathname+e+i):c+=c.indexOf("#")>-1?j:"#"+j,c},isPreservableHash:function(a){return 0===a.replace("#","").indexOf(this.uiStateKey)},hashToSelector:function(a){var b="#"===a.substring(0,1);return b&&(a=a.substring(1)),(b?"#":"")+a.replace(new RegExp("([!\"#$%&'()*+,./:;<=>?@[\\]^`{|}~])","g"),"\\$1")},isFirstPageUrl:function(a,b,d,e){var g,h,i,j,l;return b=b===c?k.documentBase:b,d=d===c?k.documentBaseDiffers:d,e=e===c?k.documentUrl:e,g=k.parseUrl(k.makeUrlAbsolute(a,b)),h=g.hrefNoHash===e.hrefNoHash||d&&g.hrefNoHash===b.hrefNoHash,i=f.getRouter().firstPage,j=i?i.id:c,l=g.hash,h&&(!l||"#"===l||j&&l.replace(/^#/,"")===j)},isPermittedCrossDomainRequest:function(a,b){return d.getConfig("allowCrossDomainPages",!1)&&"file:"===a.protocol&&-1!==b.search(/^https?:/)},getAsURIParameters:function(a){var b,c="";
+for(b in a)a.hasOwnProperty(b)&&(c+=encodeURIComponent(b)+"="+encodeURIComponent(a[b])+"&");return c.substring(0,c.length-1)},documentUrl:null,documentBaseDiffers:!1,set:function(a){j.hash=a},getFilePath:function(a,b){var c="&"+d.getConfig("subPageUrlKey","");return a&&a.split(c)[0].split(b)[0]},cleanHash:function(a,b){return k.stripHash(a.replace(/\?.*$/,"").replace(b,""))},isEmbeddedPage:function(a,b){var c=k.parseUrl(a);return""!==c.protocol?c.hash&&(b?c.hrefNoHash===k.documentUrl.hrefNoHash:c.hrefNoHash===k.parseLocation().hrefNoHash):/^#/.test(c.href)}};k.documentUrl=k.parseLocation(),e=b.querySelector("base"),k.documentBase=e?k.parseUrl(k.makeUrlAbsolute(e.getAttribute("href"),k.documentUrl.href)):k.documentUrl,k.documentBaseDiffers=k.documentUrl.hrefNoHash!==k.documentBase.hrefNoHash,k.getDocumentBase=function(a){return a?g.copy(k.documentBase):k.documentBase.href},k.getClosestBaseUrl=function(a,b){var c=i.getNSData(h.getClosestBySelector(a,b),"url"),e=k.documentBase.hrefNoHash;return d.getConfig("dynamicBaseEnabled",!0)&&c&&k.isPath(c)||(c=e),k.makeUrlAbsolute(c,e)},d.util.path=k}(a,a.document,d),function(a,b,c){function d(a){for(;a&&(a.nodeType!==Node.ELEMENT_NODE||!a.nodeName||"A"!==a.nodeName);)a=a.parentNode;return a}function e(a,b){var c,e,f,g=d(b.target);g&&1===b.which&&(c=g.getAttribute("href"),e="external"===g.getAttribute("rel")||g.hasAttribute("target"),e||(f=i.getData(g),f.link=g.id,a.open(c,f,b),h.preventDefault(b)))}function f(a,b){var c,d,e,f,g,h,i=b.state,k=o.activeState,m=n.route,p=!0;if(s)return o.disableVolatileMode(),o.replace(k,k.stateTitle,k.stateUrl),void 0;if(i){e=i.url,g="back"===o.getDirection(i),h=g?k&&k.transition||"none":i.transition,d=l.merge({},i,{reverse:g,transition:h,fromHashChange:!0}),f=j.getLocation();for(c in m)m.hasOwnProperty(c)&&m[c].onHashChange(f,d,k.stateUrl)&&(p=!1);o.setActive(i),p&&a.open(e,d)}}var g=c.util,h=c.event,i=g.DOM,j=g.path,k=g.selectors,l=g.object,m=c.engine,n=c.router,o=n.history,p=n.route,q=b.body,r=[].slice,s=!1,t=c.widget.wearable.Page,u=function(){var a=this;a.firstPage=null,a.container=null,a.settings={}};u.prototype.defaults={fromHashChange:!1,reverse:!1,showLoadMsg:!0,loadMsgDelay:0,volatileRecord:!1},u.prototype.open=function(a,b,c){var d,e=b&&b.rel||"page",f=p[e],g={},i=this;if(!s){if("back"===e)return o.back(),void 0;if(!f)throw new Error("Not defined router rule ["+e+"]");b=l.merge({rel:e},this.defaults,f.option(),b),d=f.filter,g.resolve=function(a,b){f.open(b,a,c)},g.reject=function(a){h.trigger(i.container.element,"changefailed",a)},"string"==typeof a?a.replace(/[#|\s]/g,"")&&this._loadUrl(a,b,f,g):a&&k.matchesSelector(a,d)?g.resolve(b,a):g.reject(b)}},u.prototype.init=function(d){var e,f,g,h,j,l,n=a.location,o=t.classes,p=o.uiPage,s=o.uiPageActive,u=c.engine.getWidgetDefinition("Page")||c.engine.getWidgetDefinition("page"),v=this;if(q=b.body,f=c.getConfig("pageContainer")||q,j=r.call(f.querySelectorAll(u.selector)),v.justBuild=d,c.getConfig("autoInitializePage",!0)){if(h=f.querySelector("."+s),h||(h=j[0]),h&&(l=f.querySelectorAll("."+s),r.call(l).forEach(function(a){a.classList.remove("."+s)}),f=h.parentNode),d)return g=m.instanceWidget(f,"pagecontainer"),h&&v.register(g,h),void 0;n.hash&&(e=b.getElementById(n.hash.replace("#","")),e&&k.matchesSelector(e,"."+p)&&(h=e))}j.forEach(function(a){i.getNSData(a,"url")||i.setNSData(a,"url",a.id||n.pathname+n.search)}),g=m.instanceWidget(f,"pagecontainer"),v.register(g,h)},u.prototype.destroy=function(){var b=this;a.removeEventListener("popstate",b.popStateHandler,!1),q&&(q.removeEventListener("pagebeforechange",this.pagebeforechangeHandler,!1),q.removeEventListener("vclick",b.linkClickHandler,!1))},u.prototype.setContainer=function(a){this.container=a},u.prototype.getContainer=function(){return this.container},u.prototype.getFirstPage=function(){return this.firstPage},u.prototype.register=function(c,d){var g=this;g.container=c,g.firstPage=d,g.linkClickHandler=e.bind(null,g),g.popStateHandler=f.bind(null,g),b.addEventListener("vclick",g.linkClickHandler,!1),a.addEventListener("popstate",g.popStateHandler,!1),o.enableVolatileRecord(),d&&g.open(d,{transition:"none"})},u.prototype.openPopup=function(a,b){this.open(a,l.fastMerge({rel:"popup"},b))},u.prototype.closePopup=function(a){var b=this.getRoute("popup");b&&b.close(null,a)},u.prototype.lock=function(){s=!0},u.prototype.unlock=function(){s=!1},u.prototype._loadUrl=function(a,b,c,d){var e,f,g=j.makeUrlAbsolute(a,j.getLocation()),h={},i=this;return e=c.find(g),!e&&j.isEmbedded(g)?(d.reject(h),void 0):e?(h=l.fastMerge({absUrl:g},b),d.resolve(h,e),void 0):(b.showLoadMsg&&i._showLoading(b.loadMsgDelay),f=new XMLHttpRequest,f.responseType="document",f.overrideMimeType("text/html"),f.open("GET",g),f.addEventListener("error",i._loadError.bind(i,g,b,d)),f.addEventListener("load",function(a){var e=a.target;4===e.readyState&&(200===e.status||0===e.status&&e.responseXML?i._loadSuccess(g,b,c,d,e.responseXML):i._loadError(g,b,d))}),f.send(),void 0)},u.prototype._loadError=function(a,b,c){var d=l.fastMerge({url:a},b),e=this;b.showLoadMsg&&e._showError(a),h.trigger(e.container.element,"loadfailed",d),c.reject(d)},u.prototype._loadSuccess=function(a,b,c,d,e){var f=l.fastMerge({url:a},b),g=c.parse(e,a);b.showLoadMsg&&this._hideLoading(),g?d.resolve(f,g):d.reject(f)},u.prototype._getInitialContent=function(){return this.firstPage},u.prototype._showLoading=function(a){this.container.showLoading(a)},u.prototype._showError=function(a){c.error("load error, file: ",a)},u.prototype._hideLoading=function(){this.container.hideLoading()},u.prototype.hasActivePopup=function(){var a=this.getRoute("popup");return a&&a.hasActive()},u.prototype.getRoute=function(a){return p[a]},n.Router=u,m.initRouter(u)}(a,a.document,d),function(a,b){function c(b,c){var d=a.getElementById(b);return d&&j.matchesSelector(d,c)?h.setNSData(d,"url",b):d=null,d}var d,e,f=b.util,g=f.path,h=f.DOM,i=f.object,j=f.selectors,k=b.router.history,l=b.engine,m=b.widget.wearable.Page,n=([].slice,{});n.defaults={transition:"none"},n.filter="."+m.classes.uiPage,n.option=function(){var a=i.merge({},n.defaults);return a.transition=b.getConfig("pageTransition",a.transition),a},n.open=function(b,c){var d,e=a.title,f={},m=l.getRouter();d=b!==m.firstPage||c.dataUrl?h.getNSData(b,"url"):g.documentUrl.hrefNoHash,e=h.getNSData(b,"title")||j.getChildrenBySelector(b,".ui-header > .ui-title").textContent||e,h.getNSData(b,"title")||h.setNSData(b,"title",e),d&&!c.fromHashChange&&(!g.isPath(d)&&d.indexOf("#")<0&&(d=g.makeUrlAbsolute("#"+d,g.documentUrl.hrefNoHash)),f=i.merge({},c,{url:d}),k.replace(f,e,d)),this._setBase(d),a.title=e,m.container.change(b,c)},n.find=function(a){var b,d=this,e=l.getRouter(),f=d._createDataUrl(a),h=e.getFirstPage(),i=e.getContainer(),j="[data-url='"+f+"']",k=/,/gm;return/#/.test(a)&&g.isPath(f)?null:(j+=d.filter.replace(k,",[data-url='"+f+"']"),b=i.element.querySelector(j),b||!f||g.isPath(f)||(b=c(f,d.filter)),!b&&g.isFirstPageUrl(f)&&h&&h.parentNode&&(b=h),b)},n.parse=function(a,b){var c,d=this,e=d._createDataUrl(b);return d._setBase(b),c=a.querySelector(d.filter),c&&(h.setNSData(c,"url",e),h.setNSData(c,"external",!0)),c},n.onHashChange=function(){return null},n._createDataUrl=function(a){return g.convertUrlToDataUrl(a,!0)},n.onOpenFailed=function(){this._setBase(g.parseLocation().hrefNoSearch)},n._getBaseElement=function(){return e||(e=a.querySelector("head")),d||(d=a.querySelector("base"),d||(d=a.createElement("base"),d.href=g.documentBase.hrefNoHash,e.appendChild(d))),d},n._setBase=function(a){var b=this._getBaseElement(),c=b.href;g.isPath(a)&&(a=g.makeUrlAbsolute(a,g.documentBase),g.parseUrl(c).hrefNoSearch!==g.parseUrl(a).hrefNoSearch&&(b.href=a,g.documentBase=g.parseUrl(g.makeUrlAbsolute(a,g.documentUrl.href))))},b.router.route.page=n}(a.document,d),function(a,b,c){function d(a,c){var d=b.getElementById(h.hashToSelector(a));return d&&i.matchesSelector(d,c)?k.setNSData(d,"url",a):d=null,d}var e=c.widget.core.Popup,f={defaults:{transition:"none",container:null,volatileRecord:!0},filter:"."+e.classes.popup,activePopup:null,events:{POPUP_HIDE:"popuphide"}},g=c.engine,h=c.util.path,i=c.util.selectors,j=c.router.history,k=c.util.DOM,l=([].slice,c.util.object),m="popup=true",n=/([&|\?]popup=true)/;f.option=function(){var a=l.merge({},f.defaults);return a.transition=c.getConfig("popupTransition",a.transition),a},f.setActive=function(a,b){var c,d=h.getLocation(),e=d.replace(n,"");this.activePopup=a,a?b&&!b.fromHashChange&&b.history&&(c=h.addHashSearchParams(e,m),j.replace(b,"",c)):d!==e&&j.back()},f.open=function(a,c,d){var e,h,i=g.getRouter(),j=f.events,l=function(){b.removeEventListener(j.POPUP_HIDE,l,!1),a.parentNode.removeChild(a),f.activePopup=null},m=function(){var h=c["position-to"];h&&(c.positionTo=h),d&&d.touches?(c.x=d.touches[0].clientX,c.y=d.touches[0].clientY):d&&(c.x=d.clientX,c.y=d.clientY),b.removeEventListener(j.POPUP_HIDE,m,!1),e=g.instanceWidget(a,"Popup",c),e.open(c),f.activePopup=e},n=i.container.getActivePage();k.getNSData(a,"external")===!0&&(h=c.container?n.element.querySelector(c.container):n.element,h.appendChild(a),b.addEventListener(f.events.POPUP_HIDE,l,!1)),f.hasActive()?(b.addEventListener(f.events.POPUP_HIDE,m,!1),f.close()):m()},f.close=function(a,b){a=a||this.activePopup,a&&a.close(b||{})},f.onHashChange=function(a,b){var c=this.activePopup;return c?(f.close(c,b),!0):!1},f.onOpenFailed=function(){return null},f.find=function(a){var b,c=this,e=c._createDataUrl(a),f=g.getRouter().getContainer().getActivePage();return b=f.element.querySelector("[data-url='"+e+"']"+c.filter),b||!e||h.isPath(e)||(b=d(e,c.filter)),b},f.parse=function(a,b){var c,d=this,e=d._createDataUrl(b);return c=a.querySelector(d.filter),c&&(k.setNSData(c,"url",e),k.setNSData(c,"external",!0)),c},f._createDataUrl=function(a){return h.convertUrlToDataUrl(a)},f.hasActive=function(){return!!this.activePopup},f.getActive=function(){return this.activePopup},c.router.route.popup=f}(a,a.document,d),function(a,b){var c=b.widget.wearable.Drawer,d=(c.prototype,b.util),e=d.path,f=(d.DOM,d.object,d.selectors,b.router.history),g=b.engine,h=([].slice,{}),i="drawer=true",j=/([&|\?]drawer=true)/;h.defaults={transition:"none"},h.filter="."+c.classes.drawer,h.option=function(){return null},h.open=function(a){var b=g.instanceWidget(a,"Drawer");b.open()},h.find=function(a){var b,c=e.convertUrlToDataUrl(a),d=g.getRouter().getContainer().getActivePage();return b=d.element.querySelector("#"+c)},h.parse=function(){return null},h.setActive=function(a){var b,c=e.getLocation(),d=c.replace(j,"");this._activeDrawer=a,a?(b=e.addHashSearchParams(d,i),f.replace({},"",b)):c!==d&&f.back()},h.onHashChange=function(a,b,c){var d=this,e=d._activeDrawer;return e&&c.search(i)>0&&a.search(i)<0&&e.close(b),null},b.router.route.drawer=h}(a.document,d),function(a,b){var c=b.widget.wearable.CircularIndexScrollbar,d=(c.prototype,b.util),e=d.path,f=(d.DOM,d.object,d.selectors,b.router.history),g=b.engine,h=([].slice,{}),i="circularindexscrollbar=true",j=/([&|\?]circularindexscrollbar=true)/,k=".ui-circularindexscrollbar";h.filter=k,h.option=function(){return null},h.open=function(){return null},h.find=function(a){var b,c=e.convertUrlToDataUrl(a),d=g.getRouter().getContainer().getActivePage();return b=d.element.querySelector("#"+c)},h.parse=function(){return null},h.setActive=function(a){var b,c=e.getLocation(),d=c.replace(j,"");this._activeWidget=a,a?(b=e.addHashSearchParams(d,i),f.replace({},"",b)):c!==d&&f.back()},h.onHashChange=function(a,b,c){var d=this,e=d._activeWidget;return e&&c.search(i)>0&&a.search(i)<0&&e.hide(b),null},b.router.route.circularindexscrollbar=h}(a.document,d),function(a,b){a.addEventListener("beforerouterinit",function(){b.setConfig("autoInitializePage",b.autoInitializePage)},!1),a.addEventListener("routerinit",function(d){var e=d.detail,f=b.router.history,g=f.back.bind(e),h=(b.router.route,b.widget.wearable.Page.classes),i=h.uiPageActive;b.changePage=e.open.bind(e),a.addEventListener("pageshow",function(){b.activePage=a.querySelector("."+i)}),b.firstPage=e.getFirstPage(),b.back=g,b.initializePage=e.init.bind(e),b.pageContainer=e.container,b.openPopup=function(a,b){var d;d=a&&a.length!==c&&"object"==typeof a?a[0]:a,e.openPopup(d,b)},b.closePopup=e.closePopup.bind(e)},!1)}(a.document,d),function(a){var b=a.engine;a.IndexScrollbar=function(c,d){return a.warn("tau.IndexScrollbar is deprecated. you have to use tau.widget.IndexScrollbar."),b.instanceWidget(c,"IndexScrollbar",d)},a.SectionChanger=function(c,d){return a.warn("tau.SectionChanger is deprecated. you have to use tau.widget.SectionChanger."),b.instanceWidget(c,"SectionChanger",d)},a.SwipeList=function(c,d){return a.warn("tau.SwipeList is deprecated. you have to use tau.widget.SwipeList."),b.instanceWidget(c,"SwipeList",d)},a.VirtualListview=function(c,d){return a.warn("tau.VirtualListview is deprecated. you have to use tau.widget.VirtualListview."),b.instanceWidget(c,"VirtualListview",d)}}(d),function(a){a.getConfig("autorun",!0)===!0&&a.engine.run()}(d)}(window,window.document);
\ No newline at end of file
diff --git a/lib/tau/wearable/theme/blue/images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png b/lib/tau/wearable/theme/blue/images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png
new file mode 100644
index 0000000..cac8bf2
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png b/lib/tau/wearable/theme/blue/images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png
new file mode 100644
index 0000000..2048b43
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png b/lib/tau/wearable/theme/blue/images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png
new file mode 100644
index 0000000..e06b5d5
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png b/lib/tau/wearable/theme/blue/images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png
new file mode 100644
index 0000000..b61c7a6
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png b/lib/tau/wearable/theme/blue/images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png
new file mode 100644
index 0000000..ea2506c
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/toggle_changeable.png b/lib/tau/wearable/theme/blue/images/Controller_icon/toggle_changeable.png
new file mode 100644
index 0000000..69500e8
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/toggle_changeable.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/toggle_circle.png b/lib/tau/wearable/theme/blue/images/Controller_icon/toggle_circle.png
new file mode 100644
index 0000000..80532ce
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/toggle_circle.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/toggle_list_circle.png b/lib/tau/wearable/theme/blue/images/Controller_icon/toggle_list_circle.png
new file mode 100644
index 0000000..e02e641
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/toggle_list_circle.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_check_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_check_holo_dark.png
new file mode 100644
index 0000000..b93066e
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_check_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_checkbox_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_checkbox_holo_dark.png
new file mode 100644
index 0000000..b66d28c
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_checkbox_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_checkbox_line_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_checkbox_line_holo_dark.png
new file mode 100644
index 0000000..e76b081
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_checkbox_line_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png
new file mode 100644
index 0000000..23d166d
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png
new file mode 100644
index 0000000..0effb3a
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png
new file mode 100644
index 0000000..e6e6501
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_next_depth_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_next_depth_holo_dark.png
new file mode 100644
index 0000000..5b3394b
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_next_depth_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png
new file mode 100644
index 0000000..880f013
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_radio_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_radio_holo_dark.png
new file mode 100644
index 0000000..0fc1881
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_radio_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_radiobox_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_radiobox_holo_dark.png
new file mode 100644
index 0000000..703cb0c
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_radiobox_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_radiobox_line.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_radiobox_line.png
new file mode 100644
index 0000000..1f92e88
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_btn_radiobox_line.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_activation_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_activation_holo_dark.png
new file mode 100644
index 0000000..266c73f
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_activation_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_activation_holo_dark_dim.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_activation_holo_dark_dim.png
new file mode 100644
index 0000000..699eb3e
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_activation_holo_dark_dim.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png
new file mode 100644
index 0000000..71e5b20
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_disabled_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_disabled_holo_dark.png
new file mode 100644
index 0000000..ebb05a6
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_disabled_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png
new file mode 100644
index 0000000..a53449a
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png
new file mode 100644
index 0000000..53e8ee4
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png
new file mode 100644
index 0000000..ef5ae33
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png
new file mode 100644
index 0000000..ba74981
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png
new file mode 100644
index 0000000..acdf9c4
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png
new file mode 100644
index 0000000..6f99bc8
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_holo_dark.png
new file mode 100644
index 0000000..28e5474
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png
new file mode 100644
index 0000000..b74f64e
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png
new file mode 100644
index 0000000..17a9ba1
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png
new file mode 100644
index 0000000..d7a0064
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png
new file mode 100644
index 0000000..f915470
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png
new file mode 100644
index 0000000..0f73347
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png
new file mode 100644
index 0000000..e3823c3
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png
new file mode 100644
index 0000000..e0d7382
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_divider.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_divider.png
new file mode 100644
index 0000000..30605ce
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_divider.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_left_softbtn.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_left_softbtn.png
new file mode 100644
index 0000000..6bf1b2e
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_left_softbtn.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_num_bg_focused.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_num_bg_focused.png
new file mode 100644
index 0000000..b26e87c
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_num_bg_focused.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_num_bg_normal.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_num_bg_normal.png
new file mode 100644
index 0000000..59b9ae1
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_num_bg_normal.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_num_dot.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_num_dot.png
new file mode 100644
index 0000000..aa5a1d2
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_num_dot.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_num_dot_01.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_num_dot_01.png
new file mode 100644
index 0000000..c9a2d8b
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_num_dot_01.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_right_softbtn.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_right_softbtn.png
new file mode 100644
index 0000000..023945a
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_right_softbtn.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_time_bg.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_time_bg.png
new file mode 100644
index 0000000..f5bf671
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_time_bg.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_01.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_01.png
new file mode 100644
index 0000000..9d0ed36
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_01.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_02.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_02.png
new file mode 100644
index 0000000..f3ff1ed
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_02.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_03.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_03.png
new file mode 100644
index 0000000..05ddd26
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_03.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_04.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_04.png
new file mode 100644
index 0000000..879851c
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_04.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_05.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_05.png
new file mode 100644
index 0000000..b523324
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_05.png
diff --git a/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_06.png b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_06.png
new file mode 100644
index 0000000..d320e18
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Datetimepicker/tw_timepicker_wheel_06.png
diff --git a/lib/tau/wearable/theme/blue/images/Indicator/b_fast_scroll_rollover_bg.png b/lib/tau/wearable/theme/blue/images/Indicator/b_fast_scroll_rollover_bg.png
new file mode 100644
index 0000000..dbfb43b
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Indicator/b_fast_scroll_rollover_bg.png
diff --git a/lib/tau/wearable/theme/blue/images/Indicator/b_index_scroll_bg.png b/lib/tau/wearable/theme/blue/images/Indicator/b_index_scroll_bg.png
new file mode 100644
index 0000000..348e3aa
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Indicator/b_index_scroll_bg.png
diff --git a/lib/tau/wearable/theme/blue/images/Indicator/list_scroll_triggle.png b/lib/tau/wearable/theme/blue/images/Indicator/list_scroll_triggle.png
new file mode 100644
index 0000000..983d398
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Indicator/list_scroll_triggle.png
diff --git a/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_brightness_off.png b/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_brightness_off.png
new file mode 100644
index 0000000..c1d4bf4
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_brightness_off.png
diff --git a/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_brightness_on.png b/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_brightness_on.png
new file mode 100644
index 0000000..22e92bf
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_brightness_on.png
diff --git a/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_mute.png b/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_mute.png
new file mode 100644
index 0000000..a68530a
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_mute.png
diff --git a/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_outdoor_off.png b/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_outdoor_off.png
new file mode 100644
index 0000000..5b0c414
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_outdoor_off.png
diff --git a/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_outdoor_on.png b/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_outdoor_on.png
new file mode 100644
index 0000000..9827653
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_outdoor_on.png
diff --git a/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_sound.png b/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_sound.png
new file mode 100644
index 0000000..f66d6ba
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_sound.png
diff --git a/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_sound_off.png b/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_sound_off.png
new file mode 100644
index 0000000..3038dff
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_sound_off.png
diff --git a/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_vibrate.png b/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_vibrate.png
new file mode 100644
index 0000000..2333074
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Popup/tw_device_options_vibrate.png
diff --git a/lib/tau/wearable/theme/blue/images/Popup/tw_ic_lock_power_off.png b/lib/tau/wearable/theme/blue/images/Popup/tw_ic_lock_power_off.png
new file mode 100644
index 0000000..35ab760
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Popup/tw_ic_lock_power_off.png
diff --git a/lib/tau/wearable/theme/blue/images/Popup/tw_ic_lock_restart.png b/lib/tau/wearable/theme/blue/images/Popup/tw_ic_lock_restart.png
new file mode 100644
index 0000000..b32aa3a
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Popup/tw_ic_lock_restart.png
diff --git a/lib/tau/wearable/theme/blue/images/Processing/tw_popup_progress_line.png b/lib/tau/wearable/theme/blue/images/Processing/tw_popup_progress_line.png
new file mode 100644
index 0000000..fd8c2f0
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Processing/tw_popup_progress_line.png
diff --git a/lib/tau/wearable/theme/blue/images/Processing/tw_progress.png b/lib/tau/wearable/theme/blue/images/Processing/tw_progress.png
new file mode 100644
index 0000000..58f13da
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Processing/tw_progress.png
diff --git a/lib/tau/wearable/theme/blue/images/Processing/tw_progress_full_loading_bg.png b/lib/tau/wearable/theme/blue/images/Processing/tw_progress_full_loading_bg.png
new file mode 100644
index 0000000..944fff1
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Processing/tw_progress_full_loading_bg.png
diff --git a/lib/tau/wearable/theme/blue/images/Processing/tw_progress_small_loading_bg.png b/lib/tau/wearable/theme/blue/images/Processing/tw_progress_small_loading_bg.png
new file mode 100644
index 0000000..8bc529d
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Processing/tw_progress_small_loading_bg.png
diff --git a/lib/tau/wearable/theme/blue/images/Processing/tw_widget_activity_01.png b/lib/tau/wearable/theme/blue/images/Processing/tw_widget_activity_01.png
new file mode 100644
index 0000000..8ec516e
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Processing/tw_widget_activity_01.png
diff --git a/lib/tau/wearable/theme/blue/images/Processing/tw_widget_activity_02.png b/lib/tau/wearable/theme/blue/images/Processing/tw_widget_activity_02.png
new file mode 100644
index 0000000..7b3ef90
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Processing/tw_widget_activity_02.png
diff --git a/lib/tau/wearable/theme/blue/images/Progress/tw_progressbar_indeterminate1_holo_dark.png b/lib/tau/wearable/theme/blue/images/Progress/tw_progressbar_indeterminate1_holo_dark.png
new file mode 100644
index 0000000..6cdff14
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Progress/tw_progressbar_indeterminate1_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Progress/tw_progressbar_indeterminate2_holo_dark.png b/lib/tau/wearable/theme/blue/images/Progress/tw_progressbar_indeterminate2_holo_dark.png
new file mode 100644
index 0000000..17905b9
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Progress/tw_progressbar_indeterminate2_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Progress/tw_progressbar_indeterminate3_holo_dark.png b/lib/tau/wearable/theme/blue/images/Progress/tw_progressbar_indeterminate3_holo_dark.png
new file mode 100644
index 0000000..b17353d
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Progress/tw_progressbar_indeterminate3_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Progress/tw_progressbar_indeterminate4_holo_dark.png b/lib/tau/wearable/theme/blue/images/Progress/tw_progressbar_indeterminate4_holo_dark.png
new file mode 100644
index 0000000..719a2bc
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Progress/tw_progressbar_indeterminate4_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Progress/tw_progressbar_indeterminate5_holo_dark.png b/lib/tau/wearable/theme/blue/images/Progress/tw_progressbar_indeterminate5_holo_dark.png
new file mode 100644
index 0000000..420de53
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Progress/tw_progressbar_indeterminate5_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Progress/tw_scrubber_control_focused_holo_dark.png b/lib/tau/wearable/theme/blue/images/Progress/tw_scrubber_control_focused_holo_dark.png
new file mode 100644
index 0000000..0d807e2
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Progress/tw_scrubber_control_focused_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Progress/tw_scrubber_control_holo_dark.png b/lib/tau/wearable/theme/blue/images/Progress/tw_scrubber_control_holo_dark.png
new file mode 100644
index 0000000..b7c6fdb
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Progress/tw_scrubber_control_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/Scroller/bouncing_bottom_edge.png b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_bottom_edge.png
new file mode 100644
index 0000000..7259d14
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_bottom_edge.png
diff --git a/lib/tau/wearable/theme/blue/images/Scroller/bouncing_bottom_glow.png b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_bottom_glow.png
new file mode 100644
index 0000000..5b150b0
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_bottom_glow.png
diff --git a/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_bottom_edge.png b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_bottom_edge.png
new file mode 100644
index 0000000..ded117d
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_bottom_edge.png
diff --git a/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_bottom_glow.png b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_bottom_glow.png
new file mode 100644
index 0000000..96f3684
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_bottom_glow.png
diff --git a/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_left_edge.png b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_left_edge.png
new file mode 100644
index 0000000..c7950f4
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_left_edge.png
diff --git a/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_left_glow.png b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_left_glow.png
new file mode 100644
index 0000000..5337045
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_left_glow.png
diff --git a/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_right_edge.png b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_right_edge.png
new file mode 100644
index 0000000..4037cb5
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_right_edge.png
diff --git a/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_right_glow.png b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_right_glow.png
new file mode 100644
index 0000000..7319c76
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_circle_right_glow.png
diff --git a/lib/tau/wearable/theme/blue/images/Scroller/bouncing_left_edge.png b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_left_edge.png
new file mode 100644
index 0000000..413fccd
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_left_edge.png
diff --git a/lib/tau/wearable/theme/blue/images/Scroller/bouncing_left_glow.png b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_left_glow.png
new file mode 100644
index 0000000..11015e4
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_left_glow.png
diff --git a/lib/tau/wearable/theme/blue/images/Scroller/bouncing_right_edge.png b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_right_edge.png
new file mode 100644
index 0000000..e14f69b
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_right_edge.png
diff --git a/lib/tau/wearable/theme/blue/images/Scroller/bouncing_right_glow.png b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_right_glow.png
new file mode 100644
index 0000000..69ed30b
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_right_glow.png
diff --git a/lib/tau/wearable/theme/blue/images/Scroller/bouncing_top_edge.png b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_top_edge.png
new file mode 100644
index 0000000..6138e66
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_top_edge.png
diff --git a/lib/tau/wearable/theme/blue/images/Scroller/bouncing_top_glow.png b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_top_glow.png
new file mode 100644
index 0000000..73b2fc9
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Scroller/bouncing_top_glow.png
diff --git a/lib/tau/wearable/theme/blue/images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png b/lib/tau/wearable/theme/blue/images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png
new file mode 100644
index 0000000..5e41e9a
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png
diff --git a/lib/tau/wearable/theme/blue/images/Swipelist/b_logs_icon_body_btn_call_nor.png b/lib/tau/wearable/theme/blue/images/Swipelist/b_logs_icon_body_btn_call_nor.png
new file mode 100644
index 0000000..8337333
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/Swipelist/b_logs_icon_body_btn_call_nor.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/00_field_btn_clear.png b/lib/tau/wearable/theme/blue/images/controls/00_field_btn_clear.png
new file mode 100644
index 0000000..eff4c22
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/00_field_btn_clear.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/00_field_btn_clear_press.png b/lib/tau/wearable/theme/blue/images/controls/00_field_btn_clear_press.png
new file mode 100644
index 0000000..778108e
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/00_field_btn_clear_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/00_search_icon.png b/lib/tau/wearable/theme/blue/images/controls/00_search_icon.png
new file mode 100644
index 0000000..c634b56
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/00_search_icon.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/00_slider_button_brightness_01.png b/lib/tau/wearable/theme/blue/images/controls/00_slider_button_brightness_01.png
new file mode 100644
index 0000000..8f9214f
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/00_slider_button_brightness_01.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/00_slider_button_brightness_02.png b/lib/tau/wearable/theme/blue/images/controls/00_slider_button_brightness_02.png
new file mode 100644
index 0000000..0df85e0
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/00_slider_button_brightness_02.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/00_slider_button_volume_01.png b/lib/tau/wearable/theme/blue/images/controls/00_slider_button_volume_01.png
new file mode 100644
index 0000000..1f41023
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/00_slider_button_volume_01.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/00_slider_button_volume_02.png b/lib/tau/wearable/theme/blue/images/controls/00_slider_button_volume_02.png
new file mode 100644
index 0000000..0f6f7f4
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/00_slider_button_volume_02.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/00_slider_handle.png b/lib/tau/wearable/theme/blue/images/controls/00_slider_handle.png
new file mode 100644
index 0000000..3a64686
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/00_slider_handle.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/00_slider_handle_press.png b/lib/tau/wearable/theme/blue/images/controls/00_slider_handle_press.png
new file mode 100644
index 0000000..ecb7e42
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/00_slider_handle_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/00_slider_popup_bg.png b/lib/tau/wearable/theme/blue/images/controls/00_slider_popup_bg.png
new file mode 100644
index 0000000..ef0a56e
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/00_slider_popup_bg.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_back.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_back.png
new file mode 100644
index 0000000..7618371
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_back.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_back_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_back_press.png
new file mode 100644
index 0000000..7618371
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_back_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_call.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_call.png
new file mode 100644
index 0000000..5b837fd
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_call.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_call_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_call_press.png
new file mode 100644
index 0000000..5b837fd
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_call_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_check.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_check.png
new file mode 100644
index 0000000..8df9a9c
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_check.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_check_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_check_press.png
new file mode 100644
index 0000000..8df9a9c
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_check_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_cancel.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_cancel.png
new file mode 100644
index 0000000..a5b5639
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_cancel.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_cancel_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_cancel_press.png
new file mode 100644
index 0000000..a5b5639
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_cancel_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_closed.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_closed.png
new file mode 100644
index 0000000..452209d
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_closed.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_closed_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_closed_press.png
new file mode 100644
index 0000000..452209d
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_closed_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_minus.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_minus.png
new file mode 100644
index 0000000..0f0170f
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_minus.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_minus_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_minus_press.png
new file mode 100644
index 0000000..0f0170f
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_minus_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_opened.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_opened.png
new file mode 100644
index 0000000..5b5cbd0
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_opened.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_opened_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_opened_press.png
new file mode 100644
index 0000000..5b5cbd0
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_opened_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_send.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_send.png
new file mode 100644
index 0000000..521b4b2
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_send.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_send_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_send_press.png
new file mode 100644
index 0000000..521b4b2
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_expand_send_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_gear.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_gear.png
new file mode 100644
index 0000000..8e4b359
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_gear.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_gear_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_gear_press.png
new file mode 100644
index 0000000..8e4b359
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_gear_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_grid.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_grid.png
new file mode 100644
index 0000000..ca6b769
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_grid.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_grid_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_grid_press.png
new file mode 100644
index 0000000..ca6b769
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_grid_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_home.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_home.png
new file mode 100644
index 0000000..1ba3820
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_home.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_home_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_home_press.png
new file mode 100644
index 0000000..1ba3820
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_home_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_info.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_info.png
new file mode 100644
index 0000000..1e5d984
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_info.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_info_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_info_press.png
new file mode 100644
index 0000000..1e5d984
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_info_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_left.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_left.png
new file mode 100644
index 0000000..b4eca6d
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_left.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_left_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_left_press.png
new file mode 100644
index 0000000..b4eca6d
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_left_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_plus.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_plus.png
new file mode 100644
index 0000000..12cbe29
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_plus.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_plus_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_plus_press.png
new file mode 100644
index 0000000..12cbe29
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_plus_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_refresh.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_refresh.png
new file mode 100644
index 0000000..33ff934
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_refresh.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_refresh_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_refresh_press.png
new file mode 100644
index 0000000..33ff934
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_refresh_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_rename.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_rename.png
new file mode 100644
index 0000000..e3603b8
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_rename.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_rename_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_rename_press.png
new file mode 100644
index 0000000..e3603b8
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_rename_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_right.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_right.png
new file mode 100644
index 0000000..659ea76
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_right.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_right_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_right_press.png
new file mode 100644
index 0000000..659ea76
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_right_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_search.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_search.png
new file mode 100644
index 0000000..12f4714
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_search.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_search_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_search_press.png
new file mode 100644
index 0000000..12f4714
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_search_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_star.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_star.png
new file mode 100644
index 0000000..f608394
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_star.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_star_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_star_press.png
new file mode 100644
index 0000000..f608394
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_star_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_warning.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_warning.png
new file mode 100644
index 0000000..4a39960
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_warning.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_button_warning_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_button_warning_press.png
new file mode 100644
index 0000000..4a39960
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_button_warning_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_icon_jump.png b/lib/tau/wearable/theme/blue/images/controls/button/00_icon_jump.png
new file mode 100644
index 0000000..3692cbd
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_icon_jump.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_icon_jump_left.png b/lib/tau/wearable/theme/blue/images/controls/button/00_icon_jump_left.png
new file mode 100644
index 0000000..9c299ac
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_icon_jump_left.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_icon_jump_left_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_icon_jump_left_press.png
new file mode 100644
index 0000000..9c299ac
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_icon_jump_left_press.png
diff --git a/lib/tau/wearable/theme/blue/images/controls/button/00_icon_jump_press.png b/lib/tau/wearable/theme/blue/images/controls/button/00_icon_jump_press.png
new file mode 100644
index 0000000..3692cbd
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/controls/button/00_icon_jump_press.png
diff --git a/lib/tau/wearable/theme/blue/images/listview/tw_list_add_holo_dark.png b/lib/tau/wearable/theme/blue/images/listview/tw_list_add_holo_dark.png
new file mode 100644
index 0000000..bd24e0e
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/listview/tw_list_add_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/listview/tw_list_delete_holo_dark.png b/lib/tau/wearable/theme/blue/images/listview/tw_list_delete_holo_dark.png
new file mode 100644
index 0000000..ccbb700
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/listview/tw_list_delete_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/listview/tw_list_setting_holo_dark.png b/lib/tau/wearable/theme/blue/images/listview/tw_list_setting_holo_dark.png
new file mode 100644
index 0000000..5b90223
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/listview/tw_list_setting_holo_dark.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_Back.png b/lib/tau/wearable/theme/blue/images/page/00_icon_Back.png
new file mode 100644
index 0000000..815a343
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_Back.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_Back_press.png b/lib/tau/wearable/theme/blue/images/page/00_icon_Back_press.png
new file mode 100644
index 0000000..fcbc346
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_Back_press.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_SIP_close_press_web.png b/lib/tau/wearable/theme/blue/images/page/00_icon_SIP_close_press_web.png
new file mode 100644
index 0000000..5d036a3
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_SIP_close_press_web.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_SIP_close_web.png b/lib/tau/wearable/theme/blue/images/page/00_icon_SIP_close_web.png
new file mode 100644
index 0000000..76f10ec
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_SIP_close_web.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_cancel_press_web.png b/lib/tau/wearable/theme/blue/images/page/00_icon_cancel_press_web.png
new file mode 100644
index 0000000..872ad33
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_cancel_press_web.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_cancel_web.png b/lib/tau/wearable/theme/blue/images/page/00_icon_cancel_web.png
new file mode 100644
index 0000000..3c37e96
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_cancel_web.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_delete_press_web.png b/lib/tau/wearable/theme/blue/images/page/00_icon_delete_press_web.png
new file mode 100644
index 0000000..829c8b0
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_delete_press_web.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_delete_web.png b/lib/tau/wearable/theme/blue/images/page/00_icon_delete_web.png
new file mode 100644
index 0000000..d105c7b
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_delete_web.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_done_press_web.png b/lib/tau/wearable/theme/blue/images/page/00_icon_done_press_web.png
new file mode 100644
index 0000000..b56c0f1
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_done_press_web.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_done_web.png b/lib/tau/wearable/theme/blue/images/page/00_icon_done_web.png
new file mode 100644
index 0000000..7b58fc4
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_done_web.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_edit_press_web.png b/lib/tau/wearable/theme/blue/images/page/00_icon_edit_press_web.png
new file mode 100644
index 0000000..b52b2b6
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_edit_press_web.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_edit_web.png b/lib/tau/wearable/theme/blue/images/page/00_icon_edit_web.png
new file mode 100644
index 0000000..a56d1f6
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_edit_web.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_more.png b/lib/tau/wearable/theme/blue/images/page/00_icon_more.png
new file mode 100644
index 0000000..95f17c7
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_more.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_more_press.png b/lib/tau/wearable/theme/blue/images/page/00_icon_more_press.png
new file mode 100644
index 0000000..d4d6951
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_more_press.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_plus_press_web.png b/lib/tau/wearable/theme/blue/images/page/00_icon_plus_press_web.png
new file mode 100644
index 0000000..f15fb71
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_plus_press_web.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_plus_web.png b/lib/tau/wearable/theme/blue/images/page/00_icon_plus_web.png
new file mode 100644
index 0000000..d49406f
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_plus_web.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_search_press_web.png b/lib/tau/wearable/theme/blue/images/page/00_icon_search_press_web.png
new file mode 100644
index 0000000..464c5c7
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_search_press_web.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_search_web.png b/lib/tau/wearable/theme/blue/images/page/00_icon_search_web.png
new file mode 100644
index 0000000..7788bec
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_search_web.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_select_all_press_web.png b/lib/tau/wearable/theme/blue/images/page/00_icon_select_all_press_web.png
new file mode 100644
index 0000000..32ae22e
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_select_all_press_web.png
diff --git a/lib/tau/wearable/theme/blue/images/page/00_icon_select_all_web.png b/lib/tau/wearable/theme/blue/images/page/00_icon_select_all_web.png
new file mode 100644
index 0000000..ce4af60
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/images/page/00_icon_select_all_web.png
diff --git a/lib/tau/wearable/theme/blue/tau.css b/lib/tau/wearable/theme/blue/tau.css
new file mode 100644
index 0000000..4571b63
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/tau.css
@@ -0,0 +1,3005 @@
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/***************************************************************************
+                  Body
+***************************************************************************/
+/***************************************************************************
+                   Action Bar
+***************************************************************************/
+/****************************************************************************
+               Circle Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Processing
+****************************************************************************/
+/****************************************************************************
+		Toggle Switch
+****************************************************************************/
+/***************************************************************************
+                   Buttons
+***************************************************************************/
+/***************************************************************************
+                   Popup
+***************************************************************************/
+/***************************************************************************
+                   Option Popup
+***************************************************************************/
+/***************************************************************************
+                  index scrollbar (vertical)
+***************************************************************************/
+/***************************************************************************
+                  circular index scrollbar
+***************************************************************************/
+/***************************************************************************
+                  Listview
+***************************************************************************/
+/****************************************************************************
+               Listview with Marquee
+****************************************************************************/
+/***************************************************************************
+                   Scroller
+***************************************************************************/
+/***************************************************************************
+                   Swipe list
+***************************************************************************/
+/***************************************************************************
+                   Checkbox/Radio
+***************************************************************************/
+/***************************************************************************
+						Page Indicator
+***************************************************************************/
+/************************************************************************/
+/*                           fixedUIStyle.less                          */
+/************************************************************************/
+/* When system font-size is changed, winset size (ex. header, footer, button, etc,
+   include font) also changed. But in UX guide, some UI elements should have fixed
+   size regardless of system font size.
+   So, this less file supports fixed style for some elements.
+   - Layout: header, footer, button
+   - Popup : popup header, popup footer
+   - toggleswitch
+   - progress: text for ratio
+*/
+/***********************************************************************/
+/*                         Layout(FIXED)                               */
+/***********************************************************************/
+/**********************************************************************/
+/*                        Button(FIXED)                               */
+/**********************************************************************/
+/**********************************************************************/
+/*                       Popup(FIXED)                                 */
+/**********************************************************************/
+/**********************************************************************/
+/*                      ToggleSwitch(FIXED)                           */
+/**********************************************************************/
+/*********************************************************************/
+/*                     Progress(FIXED)                               */
+/*********************************************************************/
+/************************
+Listview
+*************************/
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+/*
+ * default outline set none
+ */
+* {
+  outline: none;
+}
+/*
+ * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+  display: block;
+}
+/*
+ * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+audio,
+canvas,
+video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+/*
+ * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
+ * and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+[hidden] {
+  display: none;
+}
+/* ==========================================================================
+   Base
+   ========================================================================== */
+/*
+ * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+ *	`em` units.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ *	user zoom.
+ */
+html {
+  font-size: 100%;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+}
+/*
+ * Addresses `font-family` inconsistency between `textarea` and other form
+ * elements.
+ */
+html,
+button,
+input,
+select,
+textarea {
+  font-family: Tizen, Samsung Sans, Helvetica;
+}
+/*
+ * Addresses margins handled incorrectly in IE 6/7.
+ */
+body {
+  margin: 0;
+}
+/* ==========================================================================
+   Links
+   ========================================================================== */
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+/*
+ * Addresses font sizes and margins set differently in IE 6/7.
+ * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
+ * and Chrome.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+h3 {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+h4 {
+  font-size: 1em;
+  margin: 1.33em 0;
+}
+h5 {
+  font-size: 0.83em;
+  margin: 1.67em 0;
+}
+h6 {
+  font-size: 0.75em;
+  margin: 2.33em 0;
+}
+/*
+ * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
+ */
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+/*
+ * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+ */
+b,
+strong {
+  font-weight: bold;
+}
+blockquote {
+  margin: 1em 40px;
+}
+/*
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+dfn {
+  font-style: italic;
+}
+/*
+ * Addresses styling not present in IE 6/7/8/9.
+ */
+mark {
+  background: #ff0;
+  color: #000;
+}
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+p,
+pre {
+  margin: 1em 0;
+}
+/*
+ * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+/*
+ * Addresses CSS quotes not supported in IE 6/7.
+ */
+q {
+  quotes: none;
+}
+/*
+ * Addresses `quotes` property not supported in Safari 4.
+ */
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+small {
+  font-size: 75%;
+}
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+/* ==========================================================================
+   Lists
+   ========================================================================== */
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+dl,
+menu,
+ol,
+ul {
+  margin: 1em 0;
+}
+dd {
+  margin: 0 0 0 40px;
+}
+/*
+ * Addresses paddings set differently in IE 6/7.
+ */
+menu,
+ol,
+ul {
+  padding: 0 0 0 40px;
+}
+/*
+ * Corrects list images handled incorrectly in IE 7.
+ */
+nav ul,
+nav ol {
+  list-style: none;
+  list-style-image: none;
+}
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+/*
+ * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improves image quality when scaled in IE 7.
+ */
+img {
+  border: 0;
+  /* 1 */
+  -ms-interpolation-mode: bicubic;
+  /* 2 */
+}
+/*
+ * Corrects overflow displayed oddly in IE 9.
+ */
+svg:not(:root) {
+  overflow: hidden;
+}
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+/*
+ * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+figure {
+  margin: 0;
+}
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+/*
+ * Corrects margin displayed oddly in IE 6/7.
+ */
+form {
+  margin: 0;
+}
+/*
+ * Define consistent border, margin, and padding.
+ */
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+/*
+ * 1. Corrects color not being inherited in IE 6/7/8/9.
+ * 2. Corrects text not wrapping in Firefox 3.
+ * 3. Corrects alignment displayed oddly in IE 6/7.
+ */
+legend {
+  border: 0;
+  /* 1 */
+  padding: 0;
+  white-space: normal;
+  /* 2 */
+  *margin-left: -7px;
+  /* 3 */
+}
+/*
+ * 1. Corrects font size not being inherited in all browsers.
+ * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *	and Chrome.
+ * 3. Improves appearance and consistency in all browsers.
+ */
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  vertical-align: baseline;
+  /* 3 */
+  *vertical-align: middle;
+  /* 3 */
+}
+/*
+ * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+button,
+input {
+  line-height: normal;
+}
+/*
+ * Re-set default cursor for disabled elements.
+ */
+button[disabled],
+input[disabled] {
+  cursor: default;
+}
+input[type="time"],
+input[type="date"] {
+  color: #000000;
+}
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *	(include `-moz` to future-proof).
+ */
+input[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  /* 2 */
+  box-sizing: content-box;
+}
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+/*
+ * Removes inner padding and border in Firefox 3+.
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+/*
+ * 1. Removes default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+textarea {
+  overflow: auto;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+}
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+/*
+ * Remove most spacing between table cells.
+ */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/*
+ * Common definition for theme
+ */
+/***************************************************************
+   default font size (base font from WRT)
+   => small: 13px
+   => normal: 17px
+   => large: 20px
+
+This is only applied to gear2.
+so, we set @font_size_default as 17px on gear2 and it was changed to 16px since gear-S.
+This value only used for @rem_base, not for html font-size
+html font-size is set by WRT base font-size
+***************************************************************/
+/******************************
+  z-index order collection
+ ******************************/
+/***************************************************************************
+                   Common Style
+***************************************************************************/
+.screen-hidden {
+  visibility: hidden;
+  position: absolute;
+  top: -10000em;
+  left: -10000em;
+}
+/***************************************************************************
+                   Default Style.
+***************************************************************************/
+button,
+input {
+  outline: none;
+  cursor: pointer;
+}
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none !important;
+  color: rgba(245, 245, 245, 1);
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+img {
+  margin: 0;
+  padding: 0;
+}
+/******************************
+  Global LESS mixin collection
+ ******************************/
+/***************************************************************************
+                   Common Style
+***************************************************************************/
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+  height: 100%;
+  font-size: 2.125rem;
+  font-family: Tizen, Samsung Sans, Helvetica;
+  background: rgba(8, 8, 8, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(8, 8, 8, 1);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /* overrides webkit link color */
+}
+.ui-page.ui-page-active {
+  display: block;
+}
+.ui-page.ui-page-build {
+  display: block;
+  visibility: hidden;
+}
+.scrolling-mode-touch {
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-content {
+  width: auto;
+  height: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-header {
+  position: relative;
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  background-color: rgba(0, 31, 56, 1);
+}
+.ui-header .ui-title {
+  color: rgba(116, 196, 252, 1);
+  font-size: 32px;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  margin: 0px;
+  padding-left: 16px;
+  padding-right: 16px;
+  -webkit-mask-image: -webkit-linear-gradient(left, #000000 80%, rgba(0, 0, 0, 0) 95%);
+}
+.ui-header .ui-title.ui-icon {
+  padding-left: 60px;
+  background-position: 16px 14px;
+  background-size: 34px 34px;
+  background-repeat: no-repeat;
+}
+.ui-header.ui-has-more .ui-title {
+  padding-right: 78px;
+  -webkit-mask-image: -webkit-linear-gradient(left, #000000 70%, rgba(0, 0, 0, 0) 75%);
+}
+.ui-header button.ui-more,
+.ui-header input.ui-more {
+  border: 0 none;
+  padding: 0;
+}
+.ui-header .ui-more-disable {
+  cursor: default;
+  background-color: transparent;
+}
+.ui-header .ui-more {
+  display: block;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 68px;
+  height: 100%;
+  overflow: hidden;
+  text-indent: -1000em;
+  background-position: center center;
+  background-color: transparent;
+  cursor: pointer;
+}
+.ui-header .ui-more:active {
+  background-color: rgba(23, 73, 115, 1) !important;
+}
+.ui-header .ui-more.ui-icon-detail {
+  background-color: rgba(116, 196, 252, 1);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-detail[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: rgba(116, 196, 252, 0.2);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-overflow {
+  background-color: rgba(116, 196, 252, 1);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position-x: 0.9375rem;
+  -webkit-mask-position-y: 50%;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-overflow[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: rgba(116, 196, 252, 0.2);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-selectall {
+  background-color: rgba(116, 196, 252, 1);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-selectall[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: rgba(116, 196, 252, 0.2);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-footer {
+  width: 100%;
+  height: 85px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+/***************************************************************************
+                   Page Scroll
+***************************************************************************/
+.ui-page.ui-scroll-on {
+  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-page.ui-scroll-on .ui-content {
+  height: auto !important;
+}
+.ui-page.ui-scroll-on .ui-footer {
+  position: relative;
+}
+.ui-header.ui-fixed {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+}
+.ui-footer.ui-fixed {
+  position: fixed !important;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  -webkit-transform: translate3d(0, 0, 0);
+}
+/***************************************************************************
+                   Grid layout
+***************************************************************************/
+.ui-grid-col > * {
+  float: left;
+}
+.ui-page .ui-grid-col-1 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-1 > * {
+  width: 100%;
+}
+.ui-page .ui-grid-col-2 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-2 > * {
+  width: 50%;
+}
+.ui-page .ui-grid-col-3 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-3 > * {
+  width: 33.333333333333336%;
+}
+.ui-grid-row > * {
+  display: block;
+}
+/*
+ * Progressbar
+ */
+@-webkit-keyframes indeterminate {
+  0% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(0, 77, 153, 1);
+  }
+  25% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(0, 77, 153, 1);
+  }
+  50% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(0, 77, 153, 1);
+  }
+  75% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(0, 77, 153, 1);
+  }
+  100% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(0, 77, 153, 1);
+  }
+}
+progress {
+  position: relative;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: 0.875rem;
+  margin-bottom: 0.875rem;
+  color: rgba(245, 245, 245, 1);
+  width: 100%;
+  height: 0.375rem;
+  -webkit-appearance: none;
+  border: none;
+}
+progress::-webkit-progress-bar {
+  position: relative;
+  background-color: rgba(71, 71, 71, 1);
+  border-radius: 0.125rem;
+  overflow: hidden;
+}
+progress::-webkit-progress-value {
+  background-color: rgba(55, 161, 237, 1);
+  height: 0.375rem;
+  border-radius: 0.125rem;
+  overflow: hidden;
+}
+progress.ui-progress-indeterminate::-webkit-progress-bar {
+  background-color: rgba(55, 161, 237, 1);
+}
+progress.ui-progress-indeterminate::-webkit-progress-value {
+  background-size: 100% 100%;
+  -webkit-animation: indeterminate 150ms infinite;
+}
+.ui-progress-proportion {
+  display: inline-block;
+  float: left;
+  font-size: 20px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: -0.625rem;
+}
+.ui-progress-ratio {
+  display: inline-block;
+  float: right;
+  font-size: 20px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: -0.625rem;
+}
+.ui-circle-progress {
+  display: none;
+}
+.ui-progressbar.ui-progressbar-full {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.ui-progressbar.ui-progressbar-large {
+  width: 6.25rem;
+  height: 6.25rem;
+}
+.ui-progressbar.ui-progressbar-medium {
+  width: 5.25rem;
+  height: 5.25rem;
+}
+.ui-progressbar.ui-progressbar-small {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+.ui-progressbar {
+  position: relative;
+  display: inline-block;
+  pointer-events: none;
+}
+.ui-progressbar .ui-progressbar-value.ui-progressbar-half {
+  clip: rect(auto, auto, auto, auto);
+}
+.ui-progressbar .ui-progressbar-value.ui-progressbar-half .ui-progressbar-value-right {
+  -webkit-transform: rotate(180deg);
+}
+.ui-progressbar .ui-progressbar-value {
+  clip: rect(0, 1em, 1em, 0.5em);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left {
+  border: 0.5rem solid rgba(55, 161, 237, 1);
+  border-radius: 50%;
+  clip: rect(0, 0.5em, 1em, 0);
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right {
+  border: 0.5rem solid rgba(55, 161, 237, 1);
+  border-radius: 50%;
+  clip: rect(0, 0.5em, 1em, 0);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-bg {
+  border: 0.5rem solid rgba(71, 71, 71, 1);
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+}
+/*
+ * toggle switch
+ */
+.ui-switch {
+  width: 100%;
+  color: rgba(245, 245, 245, 1);
+}
+.ui-switch-inneroffset,
+.ui-switch-handler {
+  display: none;
+}
+.ui-switch-text {
+  margin-top: 30px;
+  margin-bottom: 40px;
+  padding: 0 30px;
+  font-size: 34px;
+  text-align: center;
+}
+.ui-switch-sub-text {
+  margin-top: 48px;
+  margin-bottom: 55px;
+  font-size: 26px;
+  text-align: center;
+  color: T161;
+}
+.ui-toggleswitch {
+  position: relative;
+  display: inline-block;
+  width: 92px;
+  height: 49px;
+}
+.ui-toggleswitch .ui-switch-input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-appearance: none;
+  display: block;
+}
+.ui-toggleswitch .ui-switch-input::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 0;
+  background-color: rgba(97, 96, 96, 1);
+  z-index: 0;
+}
+.ui-toggleswitch .ui-switch-input:active::before {
+  background-color: rgba(97, 96, 96, 1);
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button {
+  background-color: rgba(173, 173, 173, 1);
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button::before {
+  background-color: rgba(97, 96, 96, 1);
+}
+.ui-toggleswitch .ui-switch-activation,
+.ui-toggleswitch .ui-switch-button {
+  width: 59px;
+  height: 49px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 -49px;
+  background-color: rgba(245, 245, 245, 1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+.ui-toggleswitch .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-button::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 -98px;
+  background-color: rgba(128, 128, 128, 1);
+  top: 0;
+  left: 0;
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button {
+  width: 59px;
+  height: 49px;
+  -webkit-mask-position: 0 -49px;
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-transform: translate3d(33px, 0, 0);
+  -moz-transform: translate3d(33px, 0, 0);
+  -ms-transform: translate3d(33px, 0, 0);
+  -o-transform: translate3d(33px, 0, 0);
+  transform: translate3d(33px, 0, 0);
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -147px;
+  background-color: rgba(112, 186, 15, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked::before {
+  background-color: rgba(112, 186, 15, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active::before {
+  background-color: rgba(71, 97, 37, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button {
+  background-color: rgba(173, 173, 173, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button::before {
+  background-color: rgba(71, 97, 37, 1);
+}
+.ui-toggleswitch.ui-toggleswitch-large {
+  width: 207px;
+  height: 110px;
+  display: block;
+  margin: 0 auto;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button {
+  width: 132px;
+  height: 110px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 207px;
+  -webkit-mask-position: 0 -110px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-position: 0 -220px;
+  -webkit-mask-size: 207px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 207px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button {
+  width: 132px;
+  height: 110px;
+  -webkit-mask-position: 0 -110px;
+  -webkit-transform: translate3d(75px, 0, 0);
+  -moz-transform: translate3d(75px, 0, 0);
+  -ms-transform: translate3d(75px, 0, 0);
+  -o-transform: translate3d(75px, 0, 0);
+  transform: translate3d(75px, 0, 0);
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -330px;
+}
+/***********************
+Processing
+***********************/
+@-webkit-keyframes rotating {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+.ui-processing {
+  background-color: rgba(0, 123, 255, 1);
+  -webkit-mask-image: url("images/Processing/tw_progress_small_loading_bg.png");
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-animation: rotating 1s linear infinite;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin: 0 auto;
+  margin-top: 2.125rem;
+  margin-bottom: 0.875rem;
+}
+.ui-processing-text {
+  margin: 0 auto;
+  text-align: center;
+  width: 10.5rem;
+  font-size: 1.5rem;
+}
+.ui-processing.ui-processing-full-size {
+  background-color: transparent;
+  -webkit-mask-image: none;
+  -webkit-animation: none;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  margin: 0;
+}
+.ui-processing.ui-processing-full-size::after {
+  content: "";
+  background-color: rgba(55, 161, 237, 1);
+  -webkit-mask-image: url("images/Processing/tw_progress_full_loading_bg.png");
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-animation: rotating 1s linear infinite;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-btn {
+  display: block;
+  padding-top: 28.5px;
+  padding-right: 10px;
+  padding-bottom: 28.5px;
+  padding-left: 10px;
+  margin: 0px;
+  font-size: 32px;
+  line-height: 28px;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  border: 0 none;
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(2, 56, 92, 1);
+}
+a.ui-btn:active:hover,
+.ui-btn:enabled:active:hover {
+  background-color: rgba(23, 73, 115, 1);
+}
+.ui-btn:enabled:focus {
+  background-color: rgba(2, 56, 92, 1);
+}
+a.ui-btn.ui-state-disabled,
+.ui-btn:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(3, 44, 64, 1);
+  cursor: default;
+}
+.ui-btn.ui-multiline {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.ui-btn.ui-inline {
+  display: inline-block;
+}
+.ui-btn.ui-btn-icon {
+  background-position: center center;
+  height: 76px;
+  text-indent: -1000em;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  background-size: 60px 60px;
+}
+.ui-default {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(2, 56, 92, 1);
+}
+a.ui-default:active:hover,
+.ui-default:enabled:active:hover {
+  background-color: rgba(23, 73, 115, 1);
+}
+.ui-default:enabled:focus {
+  background-color: rgba(2, 56, 92, 1);
+}
+a.ui-default.ui-state-disabled,
+.ui-default:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(3, 44, 64, 1);
+  cursor: default;
+}
+.ui-color-red {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(207, 36, 2, 1);
+}
+a.ui-color-red:active:hover,
+.ui-color-red:enabled:active:hover {
+  background-color: rgba(222, 102, 78, 1);
+}
+.ui-color-red:enabled:focus {
+  background-color: rgba(207, 36, 2, 1);
+}
+a.ui-color-red.ui-state-disabled,
+.ui-color-red:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(69, 11, 1, 1);
+  cursor: default;
+}
+.ui-color-orange {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(237, 134, 0, 1);
+}
+a.ui-color-orange:active:hover,
+.ui-color-orange:enabled:active:hover {
+  background-color: rgba(242, 171, 78, 1);
+}
+.ui-color-orange:enabled:focus {
+  background-color: rgba(237, 134, 0, 1);
+}
+a.ui-color-orange.ui-state-disabled,
+.ui-color-orange:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(69, 39, 5, 1);
+  cursor: default;
+}
+.ui-color-green {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(97, 163, 16, 1);
+}
+a.ui-color-green:active:hover,
+.ui-color-green:enabled:active:hover {
+  background-color: rgba(146, 191, 90, 1);
+}
+.ui-color-green:enabled:focus {
+  background-color: rgba(97, 163, 16, 1);
+}
+a.ui-color-green.ui-state-disabled,
+.ui-color-green:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(50, 54, 48, 1);
+  cursor: default;
+}
+.ui-btn:focus,
+.ui-btn:active {
+  outline: none;
+}
+a.ui-btn {
+  text-decoration: none;
+  box-sizing: border-box;
+}
+button.ui-btn,
+input.ui-btn {
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 100%;
+}
+button.ui-btn.ui-inline,
+input.ui-btn.ui-inline {
+  display: inline-block;
+  width: auto;
+}
+.ui-grid-col-1 > .ui-btn {
+  border-left: solid 1px rgba(8, 8, 8, 1);
+}
+.ui-grid-col-1 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-col-2 > .ui-btn {
+  border-left: solid 1px rgba(8, 8, 8, 1);
+}
+.ui-grid-col-2 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-col-3 > .ui-btn {
+  border-left: solid 1px rgba(8, 8, 8, 1);
+}
+.ui-grid-col-3 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-row > .ui-btn {
+  margin-top: 1px;
+}
+.ui-grid-row > .ui-btn:first-child {
+  margin-top: 0px;
+}
+/***********************
+Normal Popup
+***********************/
+.ui-popup {
+  position: fixed;
+  left: 0px;
+  width: 100%;
+  margin: 0;
+  background-color: rgba(0, 17, 33, 1);
+  border: 3px solid rgba(0, 55, 92, 1);
+  display: none;
+  z-index: 1100;
+}
+.ui-popup:not(.ui-ctxpopup) {
+  bottom: 0;
+}
+.ui-popup .ui-popup-header {
+  width: 100%;
+  min-height: 68px;
+  font-size: 30px;
+  text-align: left;
+  background-color: rgba(5, 42, 71, 1);
+  color: rgba(116, 196, 252, 1);
+  padding-top: 14px;
+  padding-right: 13px;
+  padding-bottom: 14px;
+  padding-left: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ui-popup .ui-popup-content {
+  width: 100%;
+  min-height: 14rem;
+  font-size: 2.125rem;
+  text-align: left;
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(0, 17, 33, 1);
+  padding: 10px 16px 9px 16px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-popup .ui-popup-content .ui-listview,
+.ui-popup .ui-popup-content .ui-inline-listview {
+  margin: -0.5625rem -1rem -0.5625rem -1rem;
+}
+.ui-popup .ui-popup-content .ui-listview li,
+.ui-popup .ui-popup-content .ui-inline-listview li {
+  font-size: 2.125rem;
+}
+.ui-popup .ui-popup-footer {
+  width: 100%;
+  height: 83px;
+}
+.ui-popup .ui-popup-footer .ui-btn {
+  padding-top: 27px;
+  padding-bottom: 28px;
+  font-size: 30px;
+}
+.ui-popup.ui-popup-active {
+  display: block;
+}
+.ui-popup.in {
+  display: block;
+}
+.ui-popup.ui-build {
+  display: block;
+  visibility: hidden;
+}
+/***********************
+Popup Container Scroll
+***********************/
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) {
+  max-height: 100%;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-wrapper {
+  width: 100%;
+  max-height: 100%;
+  overflow: auto !important;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content {
+  height: auto !important;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header.ui-fixed {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2100;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-footer.ui-fixed {
+  position: absolute !important;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2100;
+  -webkit-transform: translate3d(0, 0, 0);
+}
+/***********************
+Option Popup
+***********************/
+.ui-popup.ui-ctxpopup {
+  background-color: transparent;
+  width: 100%;
+  border: 0 none;
+  border-radius: 0;
+  overflow: visible;
+}
+div.ui-popup.ui-ctxpopup.ui-popup-content-size {
+  width: auto;
+  padding: 0 0 0 0;
+}
+div.ui-popup.ui-ctxpopup.ui-popup-content-size .ui-popup-content {
+  width: auto;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content {
+  background-color: rgba(245, 245, 245, 1);
+  border: 1px solid rgba(112, 112, 112, 0.9);
+  color: #333;
+  min-height: initial;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li {
+  color: rgba(8, 8, 8, 1);
+  border-bottom: 1px solid rgba(204, 204, 204, 1);
+  min-height: 90px;
+  padding: 21px 8px 20px 16px;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a {
+  color: rgba(8, 8, 8, 1);
+  margin: -21px -16px;
+  padding: 21px 16px;
+  min-height: 48px;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(19, 99, 145, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li:last-child {
+  border: none;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon {
+  position: relative;
+  padding-left: 4.25rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon a {
+  margin-left: -4.25rem;
+  padding-left: 4.25rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0.375rem;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-top: -1.75rem;
+  background-color: rgba(99, 99, 99, 0.9);
+  -webkit-mask-size: 3.5rem 3.5rem;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  mask-size: 3.5rem 3.5rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview a.ui-list-icon:active::before {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview {
+  height: 4.3125rem;
+  overflow: hidden;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li {
+  float: left;
+  height: 4.1875rem;
+  line-height: 4.1875rem;
+  border-right: 1px solid rgba(8, 8, 8, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li:last-child {
+  border: none;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0rem 0.5rem;
+  color: rgba(8, 8, 8, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(19, 99, 145, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext {
+  width: 3.6875rem;
+  height: 4.1875rem;
+  text-indent: -1000em;
+  overflow: hidden;
+  position: relative;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2.6875rem;
+  height: 2.6875rem;
+  margin-top: -1.34375rem;
+  margin-left: -1.34375rem;
+  background-color: rgba(8, 8, 8, 1);
+  -webkit-mask-size: 2.6875rem 2.6875rem;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: 2.6875rem 2.6875rem;
+  mask-repeat: no-repeat;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview a.ui-list-icon-notext:active::before {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-popup.ui-ctxpopup .ui-arrow {
+  width: 36px;
+  height: 15px;
+  overflow: hidden;
+  position: absolute;
+  display: none;
+  animation-duration: 0;
+  -webkit-animation-duration: 0;
+}
+.ui-popup.ui-ctxpopup .ui-arrow span {
+  width: 20px;
+  height: 20px;
+  background-color: rgba(245, 245, 245, 1);
+  border: 1px solid rgba(112, 112, 112, 0.9);
+  position: absolute;
+  top: 6px;
+  left: 8px;
+  -webkit-transform: rotate(55deg) skew(24deg);
+  transform: rotate(55deg) skew(24deg);
+  animation-duration: 0;
+  -webkit-animation-duration: 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b {
+  padding: 20px 20px 0 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t {
+  padding: 0 20px 20px 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r {
+  padding: 20px 0 20px 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l {
+  padding: 20px 20px 20px 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow {
+  display: block;
+  bottom: -0.875rem;
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow {
+  display: block;
+  top: -14px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow {
+  display: block;
+  right: -25px;
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow {
+  display: block;
+  left: -25px;
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+/****************************************
+Popup Toast
+****************************************/
+.ui-popup.ui-popup-toast {
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  font-size: 1.5rem;
+  border: 3px solid rgba(0, 55, 92, 1);
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+  position: absolute;
+  bottom: 0;
+  top: auto;
+  height: auto;
+}
+.ui-popup.ui-popup-toast .ui-popup-content {
+  min-height: initial;
+  padding: 0.6875rem 2.625rem 0.75rem 2.625rem;
+  background-color: rgba(0, 17, 33, 1);
+}
+/****************************************
+Popup Overlay
+****************************************/
+.ui-popup-overlay {
+  position: fixed;
+  display: none;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: rgba(8, 8, 8, 0.7);
+}
+.ui-popup-overlay.in {
+  display: block;
+}
+/****************************************
+Popup Transition
+****************************************/
+.ui-popup.slideup.in {
+  -webkit-animation-name: popupslideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popupslideinfrombottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.slideup.out {
+  -webkit-animation-name: popupslideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popupslideouttobottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes popupslideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes popupslideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@-webkit-keyframes popupslideouttobottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@keyframes popupslideouttobottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+.ui-popup.pop.in {
+  -webkit-animation-name: popuppopin;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popuppopin;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.pop.out {
+  -webkit-animation-name: popuppopout;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popuppopout;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes popuppopin {
+  from {
+    transform: scale3d(0, 0, 1);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+@-webkit-keyframes popuppopout {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(0, 0, 1);
+  }
+}
+/****************************************
+Popup Overlay Transition
+****************************************/
+.ui-popup-overlay.slideup.in,
+.ui-popup-overlay.pop.in {
+  -webkit-animation-name: fadein;
+  -webkit-animation-duration: 250ms;
+  animation-name: fadein;
+  animation-duration: 250ms;
+}
+.ui-popup-overlay.slideup.out,
+.ui-popup-overlay.pop.out {
+  -webkit-animation-name: fadeout;
+  -webkit-animation-duration: 250ms;
+  animation-name: fadeout;
+  animation-duration: 250ms;
+}
+/****************************************
+Option Popup Transition
+****************************************/
+.ui-popup.ui-popup-arrow-t.slideup.in,
+.ui-popup.ui-popup-arrow-l.slideup.in,
+.ui-popup.ui-popup-arrow-r.slideup.in {
+  -webkit-animation-name: ctxpopupslideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideinfrombottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-t.slideup.out,
+.ui-popup.ui-popup-arrow-l.slideup.out,
+.ui-popup.ui-popup-arrow-r.slideup.out {
+  -webkit-animation-name: ctxpopupslideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideouttobottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-b.slideup.in {
+  -webkit-animation-name: ctxpopupslideinfromtop;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideinfromtop;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-b.slideup.out {
+  -webkit-animation-name: ctxpopupslideouttotop;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideouttotop;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes ctxpopupslideinfrombottom {
+  from {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@keyframes ctxpopupslideinfrombottom {
+  from {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideouttobottom {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+}
+@keyframes ctxpopupslideouttobottom {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideinfromtop {
+  from {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@keyframes ctxpopupslideinfromtop {
+  from {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideouttotop {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+}
+@keyframes ctxpopupslideouttotop {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+}
+/************************
+Listview
+*************************/
+.ui-listview li {
+  font-size: 2.5rem;
+  line-height: 3rem;
+  width: 100%;
+  min-height: 6.25rem;
+  padding: 1.3125rem 0.5rem 1.25rem 1rem;
+  border-bottom: 1px solid rgba(56, 56, 56, 1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview li > * {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-user-select: none;
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview li > a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: -1.3125rem -1rem;
+  padding: 1.625rem 1rem;
+  -o-box-sizing: content-box;
+  -ms-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.ui-listview li.ui-li-active {
+  background-color: rgba(8, 56, 94, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview .li-divider {
+  height: 1.875rem;
+  min-height: 1.875rem;
+  line-height: 1.875rem;
+  padding: 0 0.5rem 0 1rem;
+  background-color: rgba(29, 72, 105, 1);
+  color: rgba(151, 197, 230, 1);
+  font-size: 1.5rem;
+}
+.ui-listview .ui-li-sub-text {
+  color: rgba(85, 135, 171, 1);
+  font-size: 1.75rem;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-text {
+  width: calc(100% -  4.8125rem);
+  height: 100%;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-text::after {
+  content: "";
+  position: absolute;
+  height: 3.5rem;
+  width: 0.125rem;
+  background-color: rgba(245, 245, 245, 1);
+  right: 4.25rem;
+  top: 20%;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-divider {
+  display: none;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete,
+.ui-listview .ui-li-has-action-icon .ui-action-setting,
+.ui-listview .ui-li-has-action-icon .ui-action-add {
+  position: absolute;
+  height: 100%;
+  width: 4.5rem;
+  right: 0;
+  top: 0;
+  -webkit-mask-size: 3.5rem 3.5rem;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center center;
+  padding: 0;
+  margin: 0;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete {
+  -webkit-mask-image: url(images/listview/tw_list_delete_holo_dark.png);
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-setting {
+  -webkit-mask-image: url(images/listview/tw_list_setting_holo_dark.png);
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-add {
+  -webkit-mask-image: url(images/listview/tw_list_add_holo_dark.png);
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon.ui-li-active {
+  background-color: transparent;
+}
+.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active {
+  background-color: rgba(8, 56, 94, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete:active,
+.ui-listview .ui-li-has-action-icon .ui-action-setting:active,
+.ui-listview .ui-li-has-action-icon .ui-action-add:active {
+  background-color: rgba(8, 56, 94, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-datetime-widget {
+  position: relative;
+  height: 100%;
+}
+.ui-datetime {
+  text-align: center;
+  padding-top: 56px;
+}
+.ui-time-picker .ui-datetime {
+  padding-top: 53px;
+}
+.ui-datetime:only-child {
+  padding-top: 92px;
+}
+.ui-time-picker .ui-datetime:only-child {
+  padding-top: 89px;
+}
+.ui-datetime input[type='date'],
+.ui-datetime input[type='datetime'],
+.ui-datetime input[type='time'] {
+  display: none;
+}
+.ui-datefield {
+  height: 52px;
+  display: inline-block;
+  vertical-align: top;
+}
+.ui-datefield > .ui-btn {
+  float: left;
+  height: 52px;
+  padding: 0;
+  line-height: 52px;
+  font-size: 42px;
+  font-weight: 600;
+  border-radius: 2px;
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.ui-datefield .ui-datefield-separator {
+  display: block;
+  height: 100%;
+  float: left;
+  width: 18px;
+  background: transparent url('images/Datetimepicker/tw_timepicker_num_dot.png');
+}
+.ui-datefield > .ui-btn:enabled:focus {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.ui-datefield > .ui-btn:disabled {
+  color: #404040;
+}
+.ui-datafield > .ui-btn.ui-selected,
+.ui-datefield > .ui-btn:enabled:active,
+.ui-datefield > .ui-btn.ui-state-active:enabled,
+.ui-datefield > .ui-btn.ui-selected:enabled {
+  background-color: #ff9000;
+  color: #000;
+}
+/* -- for datepicker -- */
+.ui-date-picker .ui-datefield > .ui-btn:first-child {
+  margin-right: 2px;
+}
+.ui-date-picker .ui-datefield > .ui-btn:last-child {
+  margin-left: 2px;
+}
+.ui-date-picker .ui-datefield-year {
+  width: 114px;
+}
+.ui-date-picker .ui-datefield-month {
+  width: 102px;
+}
+.ui-date-picker .ui-datefield-day {
+  width: 68px;
+}
+/* -- end (for datepicker) -- */
+/* -- for timepicker -- */
+.ui-time-picker .ui-datefield-hour {
+  width: 74px;
+}
+.ui-time-picker .ui-datefield-min {
+  width: 74px;
+}
+.ui-time-picker .ui-datefield-period {
+  width: 84px;
+  margin-left: 10px;
+}
+.ui-time-picker .ui-datefield {
+  height: 58px;
+}
+.ui-time-picker .ui-datefield > .ui-btn {
+  height: 58px;
+  line-height: 58px;
+  font-size: 50px;
+}
+.ui-time-picker .ui-datefield > .ui-btn.ui-datefield-period {
+  font-size: 48px;
+}
+/* -- (end) for timepicker -- */
+.ui-datetime-wheel {
+  height: 68px;
+  margin: 0 10px;
+  margin-top: 30px;
+}
+.ui-time-picker .ui-datetime-wheel {
+  margin-top: 27px;
+}
+.ui-datetime-wheel .ui-btn {
+  width: 68px;
+  height: 68px;
+  float: left;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus {
+  float: right;
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-wheel {
+  display: block;
+  margin-left: 68px;
+  margin-right: 68px;
+  height: 68px;
+  padding: 10px 0;
+  background: url('images/Datetimepicker/tw_timepicker_wheel_01.png') center center no-repeat;
+}
+.ui-datetime-btns {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 76px;
+  border-top: 2px solid #262626;
+}
+/* Button separator */
+.ui-datetime-btns::before {
+  content: "";
+  height: 34px;
+  width: 1px;
+  background-color: #262626;
+  position: absolute;
+  left: 160px;
+  top: 20px;
+}
+.ui-datetime-btns .ui-btn {
+  height: 100%;
+  position: relative;
+  background-color: transparent;
+}
+.ui-datetime-btns .ui-btn:enabled:active,
+.ui-datetime-btns .ui-btn:enabled:focus,
+.ui-datetime-btns .ui-btn:enabled:active:focus {
+  background-color: transparent;
+}
+.ui-datetime-btns .ui-btn-left {
+  width: 160px;
+  float: left;
+  background: url('images/Datetimepicker/tw_timepicker_left_softbtn.png') center center no-repeat;
+}
+.ui-datetime-btns .ui-btn-right {
+  width: 159px;
+  float: right;
+  background: url('images/Datetimepicker/tw_timepicker_right_softbtn.png') center center no-repeat;
+}
+.ui-datetime-btns .ui-btn:disabled,
+.ui-datetime-btns .ui-btn.ui-state-disabled {
+  opacity: 0.2;
+}
+/* ---------------- */
+.ui-datetime-periods {
+  height: 102px;
+  margin-top: 7px;
+  display: inline-block;
+}
+.ui-datetime-periods .ui-btn,
+.ui-datetime-periods .ui-datetime-periods-separator {
+  height: 100%;
+  float: left;
+  padding: 0;
+  background: transparent;
+}
+.ui-datetime-periods .ui-btn {
+  width: 102px;
+  font-size: 34px;
+  line-height: 102px;
+}
+.ui-datetime-periods .ui-btn:enabled:focus {
+  background: transparent;
+}
+.ui-datetime-periods .ui-btn:enabled:active,
+.ui-datetime-periods .ui-btn:enabled:active:focus,
+.ui-datetime-periods .ui-btn.ui-selected:enabled:active,
+.ui-datetime-periods .ui-btn.ui-state-active:enabled:active {
+  color: inherit;
+  text-decoration: none;
+  background: url('images/Datetimepicker/tw_timepicker_time_bg.png') center center no-repeat;
+}
+.ui-datetime-periods .ui-btn.ui-selected:enabled,
+.ui-datetime-periods .ui-btn.ui-state-active:enabled {
+  color: #ff9000;
+  text-decoration: underline;
+}
+.ui-datetime-periods .ui-datetime-periods-separator {
+  width: 24px;
+  background: url('images/Datetimepicker/tw_timepicker_num_dot_01.png') center center no-repeat;
+}
+.ui-datetime-wheel.ui-hidden,
+.ui-datetime-periods.ui-hidden {
+  display: none;
+}
+/* Transitions originally inspired by those from jQtouch, nice work, folks */
+.ui-viewport-transitioning,
+.ui-viewport-transitioning .ui-page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.ui-pre-in {
+  z-index: 100;
+  visibility: visible;
+  display: block;
+  top: 0px;
+  left: 0px;
+}
+.in {
+  -webkit-animation-timing-function: ease-out;
+  -webkit-animation-duration: 350ms;
+  -moz-animation-timing-function: ease-out;
+  -moz-animation-duration: 350ms;
+  animation-timing-function: ease-out;
+  animation-duration: 350ms;
+}
+.out {
+  -webkit-animation-timing-function: ease-in;
+  -webkit-animation-duration: 225ms;
+  -moz-animation-timing-function: ease-in;
+  -moz-animation-duration: 225ms;
+  animation-timing-function: ease-in;
+  animation-duration: 225ms;
+}
+@-webkit-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-moz-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@-moz-keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.fade.out {
+  opacity: 0;
+  -webkit-animation-duration: 125ms;
+  -webkit-animation-name: fadeout;
+  -moz-animation-duration: 125ms;
+  -moz-animation-name: fadeout;
+  animation-duration: 125ms;
+  animation-name: fadeout;
+}
+.fade.in {
+  opacity: 1;
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: fadein;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: fadein;
+  animation-duration: 225ms;
+  animation-name: fadein;
+}
+/* slide up */
+.slideup.out {
+  -webkit-animation-name: fadeout;
+  -webkit-animation-duration: 250ms;
+  -moz-animation-name: fadeout;
+  -moz-animation-duration: 250ms;
+  animation-name: fadeout;
+  animation-duration: 250ms;
+}
+.slideup.in {
+  -webkit-transform: translateY(0);
+  -webkit-animation-name: slideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -moz-transform: translateY(0);
+  -moz-animation-name: slideinfrombottom;
+  -moz-animation-duration: 250ms;
+  transform: translateY(0);
+  animation-name: slideinfrombottom;
+  animation-duration: 250ms;
+}
+.slideup.in.reverse {
+  -webkit-animation-name: fadein;
+  -webkit-animation-duration: 250ms;
+  -moz-animation-name: fadein;
+  -moz-animation-duration: 250ms;
+  animation-name: fadein;
+  animation-duration: 250ms;
+}
+.slideup.out.reverse {
+  z-index: 101;
+  -webkit-transform: translateY(100%);
+  -webkit-animation-name: slideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -moz-transform: translateY(100%);
+  -moz-animation-name: slideouttobottom;
+  -moz-animation-duration: 250ms;
+  transform: translateY(100%);
+  animation-name: slideouttobottom;
+  animation-duration: 250ms;
+}
+@-webkit-keyframes slideinfrombottom {
+  from {
+    -webkit-transform: translateY(100%);
+  }
+  to {
+    -webkit-transform: translateY(0);
+  }
+}
+@-moz-keyframes slideinfrombottom {
+  from {
+    -moz-transform: translateY(100%);
+  }
+  to {
+    -moz-transform: translateY(0);
+  }
+}
+@keyframes slideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes slideouttobottom {
+  from {
+    -webkit-transform: translateY(0);
+  }
+  to {
+    -webkit-transform: translateY(100%);
+  }
+}
+@-moz-keyframes slideouttobottom {
+  from {
+    -moz-transform: translateY(0);
+  }
+  to {
+    -moz-transform: translateY(100%);
+  }
+}
+@keyframes slideouttobottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@-webkit-keyframes popnone {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes popin {
+  from {
+    transform: scale3d(0, 0, 1);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+@-webkit-keyframes popout {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(0, 0, 1);
+  }
+}
+.pop.out.reverse {
+  z-index: 200;
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popout;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popout;
+  animation-duration: 225ms;
+  animation-name: popout;
+}
+.pop.in.reverse {
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popnone;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popnone;
+  animation-duration: 225ms;
+  animation-name: popnone;
+}
+.pop.in {
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popin;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popin;
+  animation-duration: 225ms;
+  animation-name: popin;
+}
+.ui-indexscrollbar {
+  display: block;
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 2.8125rem;
+  height: 100%;
+  padding-left: 0.125rem;
+  background-color: rgba(33, 33, 33, 1);
+  z-index: 10;
+  overflow: visible;
+  -webkit-user-select: none;
+  cursor: pointer;
+}
+.ui-indexscrollbar ul {
+  position: absolute;
+  width: 100%;
+  top: 0;
+}
+.ui-indexscrollbar ul li {
+  color: rgba(84, 84, 84, 1);
+  display: block;
+  width: 100%;
+  text-align: center;
+  font-size: 1.5rem;
+  height: 2.25rem;
+}
+.ui-indexscrollbar ul li.ui-state-selected {
+  background-color: rgba(43, 43, 43, 1);
+  color: rgba(55, 161, 237, 1);
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary {
+  position: relative;
+  height: auto;
+  top: 0;
+  right: -2.5rem;
+  width: 100%;
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li {
+  background-color: rgba(43, 43, 43, 1);
+  color: rgba(84, 84, 84, 1);
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li.ui-state-selected {
+  background-color: rgba(43, 43, 43, 1);
+  color: rgba(55, 161, 237, 1);
+}
+.ui-indexscrollbar + .ui-listview li {
+  padding-right: 2.5rem;
+}
+.ui-indexscrollbar-indicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  display: none;
+}
+.ui-indexscrollbar-indicator > span {
+  width: 8.75rem;
+  height: 5.4375rem;
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 50%;
+  margin-left: -5.625rem;
+  margin-top: -2.6875rem;
+  line-height: 5.4375rem;
+  font-size: 4.375rem;
+  text-align: center;
+  background-color: rgba(0, 61, 107, 0.95);
+  color: rgba(250, 250, 250, 1);
+}
+.ui-indexscrollbar-indicator > span > span.ui-selected {
+  color: rgba(55, 161, 237, 1);
+}
+.ui-circularindexscrollbar {
+  position: fixed;
+  top: 0;
+  left: -100%;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+}
+.ui-circularindexscrollbar.ui-circularindexscrollbar-show .ui-circularindexscrollbar-indexbar {
+  pointer-events: auto;
+  -webkit-transform: scale(1, 1);
+  -webkit-transition-duration: 500ms;
+  -webkit-transition-timing-function: linear;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: -webkit-radial-gradient(center, ellipse cover, transparent 59%, rgba(33, 33, 33, 1) 59%);
+  overflow: hidden;
+  -webkit-transform: scale(1.2, 1.2);
+  -webkit-transition-duration: 500ms;
+  -webkit-transition-timing-function: linear;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  box-sizing: border-box;
+  width: 50%;
+  height: 50%;
+  margin-top: -50%;
+  margin-left: -50%;
+  -webkit-transform-origin: 100% 100% 0;
+  overflow: hidden;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index span {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin-left: 50%;
+  padding-top: 0.3125rem;
+  text-align: center;
+  color: rgba(84, 84, 84, 1);
+  -webkit-transform-origin: 50% 100% 0;
+  font-size: 1.25rem;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span {
+  color: rgba(55, 161, 237, 1);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator {
+  position: absolute;
+  top: 50%;
+  width: 8.9375rem;
+  height: 8.9375rem;
+  line-height: 8.9375rem;
+  border-radius: 50%;
+  background-color: rgba(0, 61, 107, 0.95);
+  -webkit-mask-image: url("images/Indicator/b_fast_scroll_rollover_bg.png");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 8.9375rem;
+  margin-top: -4.4375rem;
+  margin-left: 100%;
+  -webkit-transform: translate3d(-6.703125rem, 0, 0);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text {
+  text-align: center;
+  font-size: 4.375rem;
+  color: rgba(55, 161, 237, 1);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-minimize .ui-circularindexscrollbar-indicator-text {
+  padding-right: 0.4375rem;
+  text-align: right;
+  font-size: 2rem;
+}
+/***************************************************************************
+                   Scrollbar Style
+***************************************************************************/
+.ui-scrollbar-bar-type {
+  position: absolute;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-horizontal {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 8px;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-vertical {
+  right: 0;
+  top: 0;
+  width: 0.5rem;
+  height: 100%;
+}
+.ui-scrollbar-bar-type .ui-scrollbar-indicator {
+  position: absolute;
+  background-color: rgba(102, 102, 102, 1);
+}
+.ui-scrollbar-bar-type.ui-scrollbar-horizontal .ui-scrollbar-indicator {
+  height: 0.25rem;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-vertical .ui-scrollbar-indicator {
+  width: 0.25rem;
+}
+/***************************************************************************
+                   Scrollbar Bouncing Effect
+***************************************************************************/
+.ui-scrollbar-bouncing-effect {
+  display: none;
+  position: absolute;
+  background-repeat: no-repeat;
+  -webkit-animation-duration: 0.47s;
+  -moz-animation-duration: 0.47s;
+  -ms-animation-duration: 0.47s;
+  -o-animation-duration: 0.47s;
+  -webkit-animation-timing-function: step-start;
+  -moz-animation-timing-function: step-start;
+  -ms-animation-timing-function: step-start;
+  -o-animation-timing-function: step-start;
+  animation-timing-function: step-start;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-fill-mode: forwards;
+  -ms-animation-fill-mode: forwards;
+  -o-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  background-color: rgba(55, 161, 237, 0.7);
+}
+.ui-scrollbar-bouncing-effect::before {
+  content: "";
+  position: absolute;
+  background-color: rgba(55, 161, 237, 1);
+}
+.ui-scrollbar-bouncing-effect.ui-top,
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  width: 100%;
+  height: 3.125rem;
+  left: 0;
+  -webkit-mask-size: 100% 3.125rem;
+}
+.ui-scrollbar-bouncing-effect.ui-top::before,
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  width: 100%;
+  height: 0.125rem;
+  -webkit-mask-size: 100% 0.125rem;
+}
+.ui-scrollbar-bouncing-effect.ui-left,
+.ui-scrollbar-bouncing-effect.ui-right {
+  width: 3.125rem;
+  height: 100%;
+  top: 0;
+  -webkit-mask-size: 3.125rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-left::before,
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  width: 0.0625rem;
+  height: 100%;
+  -webkit-mask-size: 0.0625rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-top {
+  top: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_top_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-top::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_top_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  bottom: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_bottom_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_bottom_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left {
+  left: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_left_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_left_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right {
+  right: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_right_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_right_edge.png");
+}
+@-webkit-keyframes ui-bouncing-show {
+  0% {
+    opacity: 0;
+  }
+  10% {
+    opacity: 0.1;
+  }
+  20% {
+    opacity: 0.2;
+  }
+  30% {
+    opacity: 0.3;
+  }
+  40% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  60% {
+    opacity: 0.6;
+  }
+  70% {
+    opacity: 0.7;
+  }
+  80% {
+    opacity: 0.8;
+  }
+  90% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes ui-bouncing-hide {
+  0% {
+    opacity: 1;
+  }
+  10% {
+    opacity: 0.9;
+  }
+  20% {
+    opacity: 0.8;
+  }
+  30% {
+    opacity: 0.7;
+  }
+  40% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  60% {
+    opacity: 0.4;
+  }
+  70% {
+    opacity: 0.3;
+  }
+  80% {
+    opacity: 0.2;
+  }
+  90% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.ui-scrollbar-bouncing-effect.ui-show {
+  display: block;
+  -webkit-animation-name: ui-bouncing-show;
+}
+.ui-scrollbar-bouncing-effect.ui-hide {
+  display: block;
+  -webkit-animation-name: ui-bouncing-hide;
+}
+.ui-swipelist {
+  position: absolute;
+  top: 0;
+}
+.ui-swipelist-left,
+.ui-swipelist-right {
+  position: absolute;
+  display: none;
+}
+.ui-swipelist-left {
+  background: -webkit-linear-gradient(left, rgba(98, 168, 24, 1) 0%, rgba(8, 8, 8, 1) 0%);
+}
+.ui-swipelist-right {
+  background: -webkit-linear-gradient(right, rgba(235, 164, 23, 1) 0%, rgba(8, 8, 8, 1) 0%);
+}
+.ui-swipelist-icon,
+.ui-swipelist-text {
+  position: absolute;
+}
+.ui-swipelist-left .ui-swipelist-icon {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  width: 20%;
+  height: 100%;
+  margin-left: 2%;
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-mask-image: url("images/Swipelist/b_logs_icon_body_btn_call_nor.png");
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-swipelist-left .ui-swipelist-text {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  margin-left: 40%;
+  height: 100%;
+  line-height: 90px;
+}
+.ui-swipelist-right .ui-swipelist-icon {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  width: 20%;
+  height: 100%;
+  margin-left: 80%;
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-mask-image: url("images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png");
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-swipelist-right .ui-swipelist-text {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  margin-left: 20%;
+  height: 100%;
+  line-height: 90px;
+}
+/***************************************************************************
+                   Tab Style
+***************************************************************************/
+.ui-tab-indicator {
+  position: relative;
+  height: 6px;
+}
+.ui-tab-indicator .ui-tab-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  height: 6px;
+  background-color: rgba(76, 103, 125, 1);
+}
+.ui-tab-indicator .ui-tab-item.ui-tab-active {
+  background-color: rgba(55, 161, 237, 1);
+}
+input[type="checkbox"]:not(.ui-switch-input),
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  height: 56px;
+  width: 56px;
+  font-size: 32px;
+  -webkit-appearance: none;
+  position: relative;
+}
+input[type="radio"] {
+  background-color: rgba(0, 14, 26, 1);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+}
+input[type="radio"]::after {
+  content: "";
+  background-color: rgba(245, 245, 245, 0.3);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_line.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:checked::before {
+  content: "";
+  background-color: rgba(112, 186, 15, 1);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:active {
+  background-color: rgba(0, 50, 84, 0.4);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+}
+input[type="radio"]:active::after {
+  content: "";
+  background-color: rgba(245, 245, 245, 0.3);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_line.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:active:checked::before {
+  content: "";
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input) {
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(0, 14, 26, 1);
+}
+input[type="checkbox"]:not(.ui-switch-input)::after {
+  content: "";
+  background-color: rgba(245, 245, 245, 0.3);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):checked::before {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(112, 186, 15, 1);
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):active {
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(0, 50, 84, 0.4);
+}
+input[type="checkbox"]:not(.ui-switch-input):active::after {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(245, 245, 245, 0.3);
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):active:checked::before {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(245, 245, 245, 1);
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+.ui-marquee {
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  -webkit-user-select: none;
+}
+.ui-marquee.ui-marquee-gradient {
+  text-overflow: clip;
+}
+.ui-marquee.ui-marquee-gradient::after {
+  content: "";
+  width: 6.875rem;
+  height: 100%;
+  background: -webkit-linear-gradient(left, transparent 0%, rgba(8, 8, 8, 1) 100%);
+  position: absolute;
+  right: 0;
+}
+.ui-marquee.ui-marquee-ellipsis .ui-marquee-content {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ui-marquee-content {
+  overflow: visible;
+  display: inline-block;
+}
+.ui-marquee-anim-running {
+  -webkit-animation-play-state: running;
+}
+.ui-marquee-anim-stopped {
+  -webkit-animation-play-state: paused;
+}
+.ui-page-indicator {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translate3d(-50%, 0, 0);
+  -moz-transform: translate3d(-50%, 0, 0);
+  -ms-transform: translate3d(-50%, 0, 0);
+  -o-transform: translate3d(-50%, 0, 0);
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-page-indicator-item {
+  position: relative;
+  display: inline-block;
+  width: 0.8125rem;
+  height: 0.8125rem;
+  -webkit-mask-image: -webkit-radial-gradient(#000000 0.25rem, transparent 0.375rem);
+  background-color: rgba(245, 245, 245, 0.4);
+  margin-right: 0.5625rem;
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-page-indicator-item:last-child {
+  margin-right: 0;
+}
+.ui-page-indicator-item.ui-page-indicator-active {
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-snap-listview li {
+  -webkit-scroll-snap-destination: 50% 50%;
+}
+.ui-drawer {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  background-color: rgba(8, 8, 8, 1);
+  z-index: 1201;
+  box-sizing: border-box;
+}
+.ui-drawer.ui-drawer-close {
+  overflow: hidden;
+}
+.ui-drawer.ui-drawer-open {
+  overflow: auto;
+}
+.ui-drawer-overlay {
+  top: 0;
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 1200;
+}
+/***************************************************************************
+				   Footer Style (New style)
+***************************************************************************/
+.ui-page .ui-expandable-header {
+  height: 60px;
+}
+.ui-page .ui-expandable-header.ui-header-expand {
+  height: 80px;
+}
+.ui-page .ui-expandable-header.ui-header-expand .ui-title {
+  padding-top: 0;
+  transform: translate3d(0, 20px, 0);
+}
+.ui-section-changer {
+  height: 100%;
+}
diff --git a/lib/tau/wearable/theme/blue/tau.min.css b/lib/tau/wearable/theme/blue/tau.min.css
new file mode 100644
index 0000000..e3aadb5
--- /dev/null
+++ b/lib/tau/wearable/theme/blue/tau.min.css
@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+*{outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:Tizen,Samsung Sans,Helvetica}body{margin:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button[disabled],input[disabled]{cursor:default}input[type=time],input[type=date]{color:#000}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.screen-hidden{visibility:hidden;position:absolute;top:-10000em;left:-10000em}button,input{outline:0;cursor:pointer}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}a{text-decoration:none!important;color:rgba(245,245,245,1)}ul,li{margin:0;padding:0;list-style-type:none}img{margin:0;padding:0}html{-webkit-tap-highlight-color:rgba(0,0,0,0)}body{height:100%;font-size:2.125rem;font-family:Tizen,Samsung Sans,Helvetica;background:rgba(8,8,8,1);color:rgba(245,245,245,1)}.ui-page{width:100%;height:100%;overflow:hidden;display:none;position:absolute;top:0;left:0;background:rgba(8,8,8,1);-webkit-tap-highlight-color:rgba(0,0,0,0)}.ui-page.ui-page-active{display:block}.ui-page.ui-page-build{display:block;visibility:hidden}.scrolling-mode-touch{-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-content{width:auto;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-header{position:relative;width:100%;height:60px;line-height:60px;background-color:rgba(0,31,56,1)}.ui-header .ui-title{color:rgba(116,196,252,1);font-size:32px;font-weight:700;white-space:nowrap;overflow:hidden;margin:0;padding-left:16px;padding-right:16px;-webkit-mask-image:-webkit-linear-gradient(left,#000 80%,rgba(0,0,0,0) 95%)}.ui-header .ui-title.ui-icon{padding-left:60px;background-position:16px 14px;background-size:34px 34px;background-repeat:no-repeat}.ui-header.ui-has-more .ui-title{padding-right:78px;-webkit-mask-image:-webkit-linear-gradient(left,#000 70%,rgba(0,0,0,0) 75%)}.ui-header button.ui-more,.ui-header input.ui-more{border:0 none;padding:0}.ui-header .ui-more-disable{cursor:default;background-color:transparent}.ui-header .ui-more{display:block;position:absolute;top:0;right:0;width:68px;height:100%;overflow:hidden;text-indent:-1000em;background-position:center center;background-color:transparent;cursor:pointer}.ui-header .ui-more:active{background-color:rgba(23,73,115,1)!important}.ui-header .ui-more.ui-icon-detail{background-color:rgba(116,196,252,1);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-detail[disabled=disabled]{cursor:default;background-color:transparent;background-color:rgba(116,196,252,.2);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-overflow{background-color:rgba(116,196,252,1);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position-x:.9375rem;-webkit-mask-position-y:50%;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-overflow[disabled=disabled]{cursor:default;background-color:transparent;background-color:rgba(116,196,252,.2);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-selectall{background-color:rgba(116,196,252,1);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-selectall[disabled=disabled]{cursor:default;background-color:transparent;background-color:rgba(116,196,252,.2);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-footer{width:100%;height:85px;position:absolute;bottom:0;left:0}.ui-page.ui-scroll-on{overflow:auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-page.ui-scroll-on .ui-content{height:auto!important}.ui-page.ui-scroll-on .ui-footer{position:relative}.ui-header.ui-fixed{position:fixed!important;top:0;left:0;width:100%;z-index:1000}.ui-footer.ui-fixed{position:fixed!important;bottom:0;left:0;width:100%;z-index:1000;-webkit-transform:translate3d(0,0,0)}.ui-grid-col>*{float:left}.ui-page .ui-grid-col-1>*{float:left}.ui-page .ui-grid-col-1>*{width:100%}.ui-page .ui-grid-col-2>*{float:left}.ui-page .ui-grid-col-2>*{width:50%}.ui-page .ui-grid-col-3>*{float:left}.ui-page .ui-grid-col-3>*{width:33.333333333333336%}.ui-grid-row>*{display:block}@-webkit-keyframes indeterminate{0%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,77,153,1)}25%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,77,153,1)}50%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,77,153,1)}75%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,77,153,1)}100%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,77,153,1)}}progress{position:relative;padding-left:1rem;padding-right:1rem;margin-top:.875rem;margin-bottom:.875rem;color:rgba(245,245,245,1);width:100%;height:.375rem;-webkit-appearance:none;border:0}progress::-webkit-progress-bar{position:relative;background-color:rgba(71,71,71,1);border-radius:.125rem;overflow:hidden}progress::-webkit-progress-value{background-color:rgba(55,161,237,1);height:.375rem;border-radius:.125rem;overflow:hidden}progress.ui-progress-indeterminate::-webkit-progress-bar{background-color:rgba(55,161,237,1)}progress.ui-progress-indeterminate::-webkit-progress-value{background-size:100% 100%;-webkit-animation:indeterminate 150ms infinite}.ui-progress-proportion{display:inline-block;float:left;font-size:20px;padding-left:1rem;padding-right:1rem;margin-top:-.625rem}.ui-progress-ratio{display:inline-block;float:right;font-size:20px;padding-left:1rem;padding-right:1rem;margin-top:-.625rem}.ui-circle-progress{display:none}.ui-progressbar.ui-progressbar-full{position:fixed;top:0;left:0;width:100%;height:100%}.ui-progressbar.ui-progressbar-large{width:6.25rem;height:6.25rem}.ui-progressbar.ui-progressbar-medium{width:5.25rem;height:5.25rem}.ui-progressbar.ui-progressbar-small{width:3.5rem;height:3.5rem}.ui-progressbar{position:relative;display:inline-block;pointer-events:none}.ui-progressbar .ui-progressbar-value.ui-progressbar-half{clip:rect(auto,auto,auto,auto)}.ui-progressbar .ui-progressbar-value.ui-progressbar-half .ui-progressbar-value-right{-webkit-transform:rotate(180deg)}.ui-progressbar .ui-progressbar-value{clip:rect(0,1em,1em,.5em);width:100%;height:100%;position:absolute}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left{border:.5rem solid rgba(55,161,237,1);border-radius:50%;clip:rect(0,.5em,1em,0);height:100%;width:100%;position:absolute}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right{border:.5rem solid rgba(55,161,237,1);border-radius:50%;clip:rect(0,.5em,1em,0);width:100%;height:100%;position:absolute}.ui-progressbar .ui-progressbar-bg{border:.5rem solid rgba(71,71,71,1);border-radius:50%;width:100%;height:100%}.ui-switch{width:100%;color:rgba(245,245,245,1)}.ui-switch-inneroffset,.ui-switch-handler{display:none}.ui-switch-text{margin-top:30px;margin-bottom:40px;padding:0 30px;font-size:34px;text-align:center}.ui-switch-sub-text{margin-top:48px;margin-bottom:55px;font-size:26px;text-align:center;color:T161}.ui-toggleswitch{position:relative;display:inline-block;width:92px;height:49px}.ui-toggleswitch .ui-switch-input{position:absolute;width:100%;height:100%;-webkit-appearance:none;display:block}.ui-toggleswitch .ui-switch-input::before{content:"";position:absolute;width:100%;height:100%;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 0;background-color:rgba(97,96,96,1);z-index:0}.ui-toggleswitch .ui-switch-input:active::before{background-color:rgba(97,96,96,1)}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button{background-color:rgba(173,173,173,1)}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button::before{background-color:rgba(97,96,96,1)}.ui-toggleswitch .ui-switch-activation,.ui-toggleswitch .ui-switch-button{width:59px;height:49px;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 -49px;background-color:rgba(245,245,245,1);position:absolute;top:0;left:0;pointer-events:none;z-index:1}.ui-toggleswitch .ui-switch-activation::before,.ui-toggleswitch .ui-switch-button::before{content:"";position:absolute;width:100%;height:100%;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 -98px;background-color:rgba(128,128,128,1);top:0;left:0}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button{width:59px;height:49px;-webkit-mask-position:0 -49px;background-color:rgba(245,245,245,1);-webkit-transform:translate3d(33px,0,0);-moz-transform:translate3d(33px,0,0);-ms-transform:translate3d(33px,0,0);-o-transform:translate3d(33px,0,0);transform:translate3d(33px,0,0)}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -147px;background-color:rgba(112,186,15,1)}.ui-toggleswitch .ui-switch-input:checked::before{background-color:rgba(112,186,15,1)}.ui-toggleswitch .ui-switch-input:checked:active::before{background-color:rgba(71,97,37,1)}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button{background-color:rgba(173,173,173,1)}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button::before{background-color:rgba(71,97,37,1)}.ui-toggleswitch.ui-toggleswitch-large{width:207px;height:110px;display:block;margin:0 auto}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button{width:132px;height:110px;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:207px;-webkit-mask-position:0 -110px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before{-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-position:0 -220px;-webkit-mask-size:207px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before{-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:207px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button{width:132px;height:110px;-webkit-mask-position:0 -110px;-webkit-transform:translate3d(75px,0,0);-moz-transform:translate3d(75px,0,0);-ms-transform:translate3d(75px,0,0);-o-transform:translate3d(75px,0,0);transform:translate3d(75px,0,0)}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -330px}@-webkit-keyframes rotating{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}.ui-processing{background-color:rgba(0,123,255,1);-webkit-mask-image:url(images/Processing/tw_progress_small_loading_bg.png);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-animation:rotating 1s linear infinite;width:3.5rem;height:3.5rem;margin:0 auto;margin-top:2.125rem;margin-bottom:.875rem}.ui-processing-text{margin:0 auto;text-align:center;width:10.5rem;font-size:1.5rem}.ui-processing.ui-processing-full-size{background-color:transparent;-webkit-mask-image:none;-webkit-animation:none;width:100%;height:100%;pointer-events:none;position:fixed;top:0;left:0;margin:0}.ui-processing.ui-processing-full-size::after{content:"";background-color:rgba(55,161,237,1);-webkit-mask-image:url(images/Processing/tw_progress_full_loading_bg.png);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-animation:rotating 1s linear infinite;width:100%;height:100%;position:absolute}.ui-btn{display:block;padding-top:28.5px;padding-right:10px;padding-bottom:28.5px;padding-left:10px;margin:0;font-size:32px;line-height:28px;text-align:center;white-space:nowrap;cursor:pointer;vertical-align:middle;text-overflow:ellipsis;overflow:hidden;border:0 none;color:rgba(245,245,245,1);background-color:rgba(2,56,92,1)}a.ui-btn:active:hover,.ui-btn:enabled:active:hover{background-color:rgba(23,73,115,1)}.ui-btn:enabled:focus{background-color:rgba(2,56,92,1)}a.ui-btn.ui-state-disabled,.ui-btn:disabled{color:rgba(245,245,245,.2);background-color:rgba(3,44,64,1);cursor:default}.ui-btn.ui-multiline{padding-top:10px;padding-bottom:10px}.ui-btn.ui-inline{display:inline-block}.ui-btn.ui-btn-icon{background-position:center center;height:76px;text-indent:-1000em;overflow:hidden;background-repeat:no-repeat;background-size:60px 60px}.ui-default{color:rgba(245,245,245,1);background-color:rgba(2,56,92,1)}a.ui-default:active:hover,.ui-default:enabled:active:hover{background-color:rgba(23,73,115,1)}.ui-default:enabled:focus{background-color:rgba(2,56,92,1)}a.ui-default.ui-state-disabled,.ui-default:disabled{color:rgba(245,245,245,.2);background-color:rgba(3,44,64,1);cursor:default}.ui-color-red{color:rgba(245,245,245,1);background-color:rgba(207,36,2,1)}a.ui-color-red:active:hover,.ui-color-red:enabled:active:hover{background-color:rgba(222,102,78,1)}.ui-color-red:enabled:focus{background-color:rgba(207,36,2,1)}a.ui-color-red.ui-state-disabled,.ui-color-red:disabled{color:rgba(245,245,245,.2);background-color:rgba(69,11,1,1);cursor:default}.ui-color-orange{color:rgba(245,245,245,1);background-color:rgba(237,134,0,1)}a.ui-color-orange:active:hover,.ui-color-orange:enabled:active:hover{background-color:rgba(242,171,78,1)}.ui-color-orange:enabled:focus{background-color:rgba(237,134,0,1)}a.ui-color-orange.ui-state-disabled,.ui-color-orange:disabled{color:rgba(245,245,245,.2);background-color:rgba(69,39,5,1);cursor:default}.ui-color-green{color:rgba(245,245,245,1);background-color:rgba(97,163,16,1)}a.ui-color-green:active:hover,.ui-color-green:enabled:active:hover{background-color:rgba(146,191,90,1)}.ui-color-green:enabled:focus{background-color:rgba(97,163,16,1)}a.ui-color-green.ui-state-disabled,.ui-color-green:disabled{color:rgba(245,245,245,.2);background-color:rgba(50,54,48,1);cursor:default}.ui-btn:focus,.ui-btn:active{outline:0}a.ui-btn{text-decoration:none;box-sizing:border-box}button.ui-btn,input.ui-btn{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;width:100%}button.ui-btn.ui-inline,input.ui-btn.ui-inline{display:inline-block;width:auto}.ui-grid-col-1>.ui-btn{border-left:solid 1px rgba(8,8,8,1)}.ui-grid-col-1>.ui-btn:first-child{border-left:0 none}.ui-grid-col-2>.ui-btn{border-left:solid 1px rgba(8,8,8,1)}.ui-grid-col-2>.ui-btn:first-child{border-left:0 none}.ui-grid-col-3>.ui-btn{border-left:solid 1px rgba(8,8,8,1)}.ui-grid-col-3>.ui-btn:first-child{border-left:0 none}.ui-grid-row>.ui-btn{margin-top:1px}.ui-grid-row>.ui-btn:first-child{margin-top:0}.ui-popup{position:fixed;left:0;width:100%;margin:0;background-color:rgba(0,17,33,1);border:3px solid rgba(0,55,92,1);display:none;z-index:1100}.ui-popup:not(.ui-ctxpopup){bottom:0}.ui-popup .ui-popup-header{width:100%;min-height:68px;font-size:30px;text-align:left;background-color:rgba(5,42,71,1);color:rgba(116,196,252,1);padding-top:14px;padding-right:13px;padding-bottom:14px;padding-left:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-popup .ui-popup-content{width:100%;min-height:14rem;font-size:2.125rem;text-align:left;color:rgba(245,245,245,1);background-color:rgba(0,17,33,1);padding:10px 16px 9px;overflow:auto;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-popup .ui-popup-content .ui-listview,.ui-popup .ui-popup-content .ui-inline-listview{margin:-.5625rem -1rem -.5625rem -1rem}.ui-popup .ui-popup-content .ui-listview li,.ui-popup .ui-popup-content .ui-inline-listview li{font-size:2.125rem}.ui-popup .ui-popup-footer{width:100%;height:83px}.ui-popup .ui-popup-footer .ui-btn{padding-top:27px;padding-bottom:28px;font-size:30px}.ui-popup.ui-popup-active{display:block}.ui-popup.in{display:block}.ui-popup.ui-build{display:block;visibility:hidden}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast){max-height:100%}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-wrapper{width:100%;max-height:100%;overflow:auto!important;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content{height:auto!important}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header.ui-fixed{position:absolute!important;top:0;left:0;width:100%;z-index:2100}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-footer.ui-fixed{position:absolute!important;bottom:0;left:0;width:100%;z-index:2100;-webkit-transform:translate3d(0,0,0)}.ui-popup.ui-ctxpopup{background-color:transparent;width:100%;border:0 none;border-radius:0;overflow:visible}div.ui-popup.ui-ctxpopup.ui-popup-content-size{width:auto;padding:0}div.ui-popup.ui-ctxpopup.ui-popup-content-size .ui-popup-content{width:auto}.ui-popup.ui-ctxpopup .ui-popup-content{background-color:rgba(245,245,245,1);border:1px solid rgba(112,112,112,.9);color:#333;min-height:initial}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li{color:rgba(8,8,8,1);border-bottom:1px solid rgba(204,204,204,1);min-height:90px;padding:21px 8px 20px 16px}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a{color:rgba(8,8,8,1);margin:-21px -16px;padding:21px 16px;min-height:48px}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active{color:rgba(245,245,245,1);background-color:rgba(19,99,145,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li:last-child{border:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon{position:relative;padding-left:4.25rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon a{margin-left:-4.25rem;padding-left:4.25rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon::before{content:"";position:absolute;top:50%;left:.375rem;width:3.5rem;height:3.5rem;margin-top:-1.75rem;background-color:rgba(99,99,99,.9);-webkit-mask-size:3.5rem 3.5rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:3.5rem 3.5rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview a.ui-list-icon:active::before{background-color:rgba(245,245,245,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview{height:4.3125rem;overflow:hidden}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li{float:left;height:4.1875rem;line-height:4.1875rem;border-right:1px solid rgba(8,8,8,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li:last-child{border:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a{display:block;width:100%;height:100%;padding:0rem .5rem;color:rgba(8,8,8,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active{color:rgba(245,245,245,1);background-color:rgba(19,99,145,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext{width:3.6875rem;height:4.1875rem;text-indent:-1000em;overflow:hidden;position:relative}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext::before{content:"";position:absolute;top:50%;left:50%;width:2.6875rem;height:2.6875rem;margin-top:-1.34375rem;margin-left:-1.34375rem;background-color:rgba(8,8,8,1);-webkit-mask-size:2.6875rem 2.6875rem;-webkit-mask-repeat:no-repeat;mask-size:2.6875rem 2.6875rem;mask-repeat:no-repeat}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview a.ui-list-icon-notext:active::before{background-color:rgba(245,245,245,1)}.ui-popup.ui-ctxpopup .ui-arrow{width:36px;height:15px;overflow:hidden;position:absolute;display:none;animation-duration:0;-webkit-animation-duration:0}.ui-popup.ui-ctxpopup .ui-arrow span{width:20px;height:20px;background-color:rgba(245,245,245,1);border:1px solid rgba(112,112,112,.9);position:absolute;top:6px;left:8px;-webkit-transform:rotate(55deg) skew(24deg);transform:rotate(55deg) skew(24deg);animation-duration:0;-webkit-animation-duration:0}.ui-popup.ui-ctxpopup.ui-popup-arrow-b{padding:20px 20px 0}.ui-popup.ui-ctxpopup.ui-popup-arrow-t{padding:0 20px 20px}.ui-popup.ui-ctxpopup.ui-popup-arrow-r{padding:20px 0 20px 20px}.ui-popup.ui-ctxpopup.ui-popup-arrow-l{padding:20px 20px 20px 0}.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow{display:block;bottom:-.875rem;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow{display:block;top:-14px}.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow{display:block;right:-25px;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow{display:block;left:-25px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.ui-popup.ui-popup-toast{margin-left:0;margin-right:0;margin-bottom:0;font-size:1.5rem;border:3px solid rgba(0,55,92,1);border-radius:0;border-left:0;border-right:0;position:absolute;bottom:0;top:auto;height:auto}.ui-popup.ui-popup-toast .ui-popup-content{min-height:initial;padding:.6875rem 2.625rem .75rem;background-color:rgba(0,17,33,1)}.ui-popup-overlay{position:fixed;display:none;top:0;width:100%;height:100%;z-index:100;background-color:rgba(8,8,8,.7)}.ui-popup-overlay.in{display:block}.ui-popup.slideup.in{-webkit-animation-name:popupslideinfrombottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popupslideinfrombottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.slideup.out{-webkit-animation-name:popupslideouttobottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popupslideouttobottom;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes popupslideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0%)}}@keyframes popupslideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0%)}}@-webkit-keyframes popupslideouttobottom{from{transform:translateY(0%)}to{transform:translateY(100%)}}@keyframes popupslideouttobottom{from{transform:translateY(0%)}to{transform:translateY(100%)}}.ui-popup.pop.in{-webkit-animation-name:popuppopin;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popuppopin;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.pop.out{-webkit-animation-name:popuppopout;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popuppopout;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes popuppopin{from{transform:scale3d(0,0,1)}to{transform:scale3d(1,1,1)}}@-webkit-keyframes popuppopout{from{transform:scale3d(1,1,1)}to{transform:scale3d(0,0,1)}}.ui-popup-overlay.slideup.in,.ui-popup-overlay.pop.in{-webkit-animation-name:fadein;-webkit-animation-duration:250ms;animation-name:fadein;animation-duration:250ms}.ui-popup-overlay.slideup.out,.ui-popup-overlay.pop.out{-webkit-animation-name:fadeout;-webkit-animation-duration:250ms;animation-name:fadeout;animation-duration:250ms}.ui-popup.ui-popup-arrow-t.slideup.in,.ui-popup.ui-popup-arrow-l.slideup.in,.ui-popup.ui-popup-arrow-r.slideup.in{-webkit-animation-name:ctxpopupslideinfrombottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideinfrombottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-t.slideup.out,.ui-popup.ui-popup-arrow-l.slideup.out,.ui-popup.ui-popup-arrow-r.slideup.out{-webkit-animation-name:ctxpopupslideouttobottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideouttobottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-b.slideup.in{-webkit-animation-name:ctxpopupslideinfromtop;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideinfromtop;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-b.slideup.out{-webkit-animation-name:ctxpopupslideouttotop;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideouttotop;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes ctxpopupslideinfrombottom{from{transform:translateY(20%);opacity:0}to{transform:translateY(0%);opacity:1}}@keyframes ctxpopupslideinfrombottom{from{transform:translateY(20%);opacity:0}to{transform:translateY(0%);opacity:1}}@-webkit-keyframes ctxpopupslideouttobottom{from{transform:translateY(0%);opacity:1}to{transform:translateY(20%);opacity:0}}@keyframes ctxpopupslideouttobottom{from{transform:translateY(0%);opacity:1}to{transform:translateY(20%);opacity:0}}@-webkit-keyframes ctxpopupslideinfromtop{from{transform:translateY(-20%);opacity:0}to{transform:translateY(0%);opacity:1}}@keyframes ctxpopupslideinfromtop{from{transform:translateY(-20%);opacity:0}to{transform:translateY(0%);opacity:1}}@-webkit-keyframes ctxpopupslideouttotop{from{transform:translateY(0%);opacity:1}to{transform:translateY(-20%);opacity:0}}@keyframes ctxpopupslideouttotop{from{transform:translateY(0%);opacity:1}to{transform:translateY(-20%);opacity:0}}.ui-listview li{font-size:2.5rem;line-height:3rem;width:100%;min-height:6.25rem;padding:1.3125rem .5rem 1.25rem 1rem;border-bottom:1px solid rgba(56,56,56,1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;color:rgba(245,245,245,1)}.ui-listview li>*{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;color:rgba(245,245,245,1)}.ui-listview li>a{display:block;width:100%;height:100%;margin:-1.3125rem -1rem;padding:1.625rem 1rem;-o-box-sizing:content-box;-ms-box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.ui-listview li.ui-li-active{background-color:rgba(8,56,94,1);color:rgba(245,245,245,1)}.ui-listview .li-divider{height:1.875rem;min-height:1.875rem;line-height:1.875rem;padding:0 .5rem 0 1rem;background-color:rgba(29,72,105,1);color:rgba(151,197,230,1);font-size:1.5rem}.ui-listview .ui-li-sub-text{color:rgba(85,135,171,1);font-size:1.75rem}.ui-listview .ui-li-has-action-icon .ui-action-text{width:calc(100% - 4.8125rem);height:100%}.ui-listview .ui-li-has-action-icon .ui-action-text::after{content:"";position:absolute;height:3.5rem;width:.125rem;background-color:rgba(245,245,245,1);right:4.25rem;top:20%}.ui-listview .ui-li-has-action-icon .ui-action-divider{display:none}.ui-listview .ui-li-has-action-icon .ui-action-delete,.ui-listview .ui-li-has-action-icon .ui-action-setting,.ui-listview .ui-li-has-action-icon .ui-action-add{position:absolute;height:100%;width:4.5rem;right:0;top:0;-webkit-mask-size:3.5rem 3.5rem;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center center;padding:0;margin:0}.ui-listview .ui-li-has-action-icon .ui-action-delete{-webkit-mask-image:url(images/listview/tw_list_delete_holo_dark.png);background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-setting{-webkit-mask-image:url(images/listview/tw_list_setting_holo_dark.png);background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-add{-webkit-mask-image:url(images/listview/tw_list_add_holo_dark.png);background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon.ui-li-active{background-color:transparent}.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active{background-color:rgba(8,56,94,1);color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-delete:active,.ui-listview .ui-li-has-action-icon .ui-action-setting:active,.ui-listview .ui-li-has-action-icon .ui-action-add:active{background-color:rgba(8,56,94,1);color:rgba(245,245,245,1)}.ui-datetime-widget{position:relative;height:100%}.ui-datetime{text-align:center;padding-top:56px}.ui-time-picker .ui-datetime{padding-top:53px}.ui-datetime:only-child{padding-top:92px}.ui-time-picker .ui-datetime:only-child{padding-top:89px}.ui-datetime input[type=date],.ui-datetime input[type=datetime],.ui-datetime input[type=time]{display:none}.ui-datefield{height:52px;display:inline-block;vertical-align:top}.ui-datefield>.ui-btn{float:left;height:52px;padding:0;line-height:52px;font-size:42px;font-weight:600;border-radius:2px;background-color:rgba(255,255,255,.15)}.ui-datefield .ui-datefield-separator{display:block;height:100%;float:left;width:18px;background:transparent url(images/Datetimepicker/tw_timepicker_num_dot.png)}.ui-datefield>.ui-btn:enabled:focus{background-color:rgba(255,255,255,.15)}.ui-datefield>.ui-btn:disabled{color:#404040}.ui-datafield>.ui-btn.ui-selected,.ui-datefield>.ui-btn:enabled:active,.ui-datefield>.ui-btn.ui-state-active:enabled,.ui-datefield>.ui-btn.ui-selected:enabled{background-color:#ff9000;color:#000}.ui-date-picker .ui-datefield>.ui-btn:first-child{margin-right:2px}.ui-date-picker .ui-datefield>.ui-btn:last-child{margin-left:2px}.ui-date-picker .ui-datefield-year{width:114px}.ui-date-picker .ui-datefield-month{width:102px}.ui-date-picker .ui-datefield-day{width:68px}.ui-time-picker .ui-datefield-hour{width:74px}.ui-time-picker .ui-datefield-min{width:74px}.ui-time-picker .ui-datefield-period{width:84px;margin-left:10px}.ui-time-picker .ui-datefield{height:58px}.ui-time-picker .ui-datefield>.ui-btn{height:58px;line-height:58px;font-size:50px}.ui-time-picker .ui-datefield>.ui-btn.ui-datefield-period{font-size:48px}.ui-datetime-wheel{height:68px;margin:0 10px;margin-top:30px}.ui-time-picker .ui-datetime-wheel{margin-top:27px}.ui-datetime-wheel .ui-btn{width:68px;height:68px;float:left}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus{float:right;background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png) center center no-repeat}.ui-datetime-wheel .ui-wheel{display:block;margin-left:68px;margin-right:68px;height:68px;padding:10px 0;background:url(images/Datetimepicker/tw_timepicker_wheel_01.png) center center no-repeat}.ui-datetime-btns{position:absolute;bottom:0;width:100%;height:76px;border-top:2px solid #262626}.ui-datetime-btns::before{content:"";height:34px;width:1px;background-color:#262626;position:absolute;left:160px;top:20px}.ui-datetime-btns .ui-btn{height:100%;position:relative;background-color:transparent}.ui-datetime-btns .ui-btn:enabled:active,.ui-datetime-btns .ui-btn:enabled:focus,.ui-datetime-btns .ui-btn:enabled:active:focus{background-color:transparent}.ui-datetime-btns .ui-btn-left{width:160px;float:left;background:url(images/Datetimepicker/tw_timepicker_left_softbtn.png) center center no-repeat}.ui-datetime-btns .ui-btn-right{width:159px;float:right;background:url(images/Datetimepicker/tw_timepicker_right_softbtn.png) center center no-repeat}.ui-datetime-btns .ui-btn:disabled,.ui-datetime-btns .ui-btn.ui-state-disabled{opacity:.2}.ui-datetime-periods{height:102px;margin-top:7px;display:inline-block}.ui-datetime-periods .ui-btn,.ui-datetime-periods .ui-datetime-periods-separator{height:100%;float:left;padding:0;background:transparent}.ui-datetime-periods .ui-btn{width:102px;font-size:34px;line-height:102px}.ui-datetime-periods .ui-btn:enabled:focus{background:transparent}.ui-datetime-periods .ui-btn:enabled:active,.ui-datetime-periods .ui-btn:enabled:active:focus,.ui-datetime-periods .ui-btn.ui-selected:enabled:active,.ui-datetime-periods .ui-btn.ui-state-active:enabled:active{color:inherit;text-decoration:none;background:url(images/Datetimepicker/tw_timepicker_time_bg.png) center center no-repeat}.ui-datetime-periods .ui-btn.ui-selected:enabled,.ui-datetime-periods .ui-btn.ui-state-active:enabled{color:#ff9000;text-decoration:underline}.ui-datetime-periods .ui-datetime-periods-separator{width:24px;background:url(images/Datetimepicker/tw_timepicker_num_dot_01.png) center center no-repeat}.ui-datetime-wheel.ui-hidden,.ui-datetime-periods.ui-hidden{display:none}.ui-viewport-transitioning,.ui-viewport-transitioning .ui-page{width:100%;height:100%;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ui-pre-in{z-index:100;visibility:visible;display:block;top:0;left:0}.in{-webkit-animation-timing-function:ease-out;-webkit-animation-duration:350ms;-moz-animation-timing-function:ease-out;-moz-animation-duration:350ms;animation-timing-function:ease-out;animation-duration:350ms}.out{-webkit-animation-timing-function:ease-in;-webkit-animation-duration:225ms;-moz-animation-timing-function:ease-in;-moz-animation-duration:225ms;animation-timing-function:ease-in;animation-duration:225ms}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadeout{from{opacity:1}to{opacity:0}}@-moz-keyframes fadeout{from{opacity:1}to{opacity:0}}@keyframes fadeout{from{opacity:1}to{opacity:0}}.fade.out{opacity:0;-webkit-animation-duration:125ms;-webkit-animation-name:fadeout;-moz-animation-duration:125ms;-moz-animation-name:fadeout;animation-duration:125ms;animation-name:fadeout}.fade.in{opacity:1;-webkit-animation-duration:225ms;-webkit-animation-name:fadein;-moz-animation-duration:225ms;-moz-animation-name:fadein;animation-duration:225ms;animation-name:fadein}.slideup.out{-webkit-animation-name:fadeout;-webkit-animation-duration:250ms;-moz-animation-name:fadeout;-moz-animation-duration:250ms;animation-name:fadeout;animation-duration:250ms}.slideup.in{-webkit-transform:translateY(0);-webkit-animation-name:slideinfrombottom;-webkit-animation-duration:250ms;-moz-transform:translateY(0);-moz-animation-name:slideinfrombottom;-moz-animation-duration:250ms;transform:translateY(0);animation-name:slideinfrombottom;animation-duration:250ms}.slideup.in.reverse{-webkit-animation-name:fadein;-webkit-animation-duration:250ms;-moz-animation-name:fadein;-moz-animation-duration:250ms;animation-name:fadein;animation-duration:250ms}.slideup.out.reverse{z-index:101;-webkit-transform:translateY(100%);-webkit-animation-name:slideouttobottom;-webkit-animation-duration:250ms;-moz-transform:translateY(100%);-moz-animation-name:slideouttobottom;-moz-animation-duration:250ms;transform:translateY(100%);animation-name:slideouttobottom;animation-duration:250ms}@-webkit-keyframes slideinfrombottom{from{-webkit-transform:translateY(100%)}to{-webkit-transform:translateY(0)}}@-moz-keyframes slideinfrombottom{from{-moz-transform:translateY(100%)}to{-moz-transform:translateY(0)}}@keyframes slideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes slideouttobottom{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateY(100%)}}@-moz-keyframes slideouttobottom{from{-moz-transform:translateY(0)}to{-moz-transform:translateY(100%)}}@keyframes slideouttobottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popnone{from{opacity:1}to{opacity:1}}@-webkit-keyframes popin{from{transform:scale3d(0,0,1)}to{transform:scale3d(1,1,1)}}@-webkit-keyframes popout{from{transform:scale3d(1,1,1)}to{transform:scale3d(0,0,1)}}.pop.out.reverse{z-index:200;-webkit-animation-duration:225ms;-webkit-animation-name:popout;-moz-animation-duration:225ms;-moz-animation-name:popout;animation-duration:225ms;animation-name:popout}.pop.in.reverse{-webkit-animation-duration:225ms;-webkit-animation-name:popnone;-moz-animation-duration:225ms;-moz-animation-name:popnone;animation-duration:225ms;animation-name:popnone}.pop.in{-webkit-animation-duration:225ms;-webkit-animation-name:popin;-moz-animation-duration:225ms;-moz-animation-name:popin;animation-duration:225ms;animation-name:popin}.ui-indexscrollbar{display:block;position:fixed;right:0;top:0;width:2.8125rem;height:100%;padding-left:.125rem;background-color:rgba(33,33,33,1);z-index:10;overflow:visible;-webkit-user-select:none;cursor:pointer}.ui-indexscrollbar ul{position:absolute;width:100%;top:0}.ui-indexscrollbar ul li{color:rgba(84,84,84,1);display:block;width:100%;text-align:center;font-size:1.5rem;height:2.25rem}.ui-indexscrollbar ul li.ui-state-selected{background-color:rgba(43,43,43,1);color:rgba(55,161,237,1)}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary{position:relative;height:auto;top:0;right:-2.5rem;width:100%}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li{background-color:rgba(43,43,43,1);color:rgba(84,84,84,1)}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li.ui-state-selected{background-color:rgba(43,43,43,1);color:rgba(55,161,237,1)}.ui-indexscrollbar+.ui-listview li{padding-right:2.5rem}.ui-indexscrollbar-indicator{position:fixed;top:0;left:0;z-index:9;display:none}.ui-indexscrollbar-indicator>span{width:8.75rem;height:5.4375rem;position:absolute;display:block;top:50%;left:50%;margin-left:-5.625rem;margin-top:-2.6875rem;line-height:5.4375rem;font-size:4.375rem;text-align:center;background-color:rgba(0,61,107,.95);color:rgba(250,250,250,1)}.ui-indexscrollbar-indicator>span>span.ui-selected{color:rgba(55,161,237,1)}.ui-circularindexscrollbar{position:fixed;top:0;left:-100%;z-index:9999;width:100%;height:100%}.ui-circularindexscrollbar.ui-circularindexscrollbar-show .ui-circularindexscrollbar-indexbar{pointer-events:auto;-webkit-transform:scale(1,1);-webkit-transition-duration:500ms;-webkit-transition-timing-function:linear}.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar{pointer-events:none;position:absolute;top:0;left:100%;width:100%;height:100%;border-radius:50%;background:-webkit-radial-gradient(center,ellipse cover,transparent 59%,rgba(33,33,33,1) 59%);overflow:hidden;-webkit-transform:scale(1.2,1.2);-webkit-transition-duration:500ms;-webkit-transition-timing-function:linear}.ui-circularindexscrollbar .ui-circularindexscrollbar-index{position:absolute;top:50%;left:50%;box-sizing:border-box;width:50%;height:50%;margin-top:-50%;margin-left:-50%;-webkit-transform-origin:100% 100% 0;overflow:hidden}.ui-circularindexscrollbar .ui-circularindexscrollbar-index span{position:absolute;width:100%;height:100%;margin-left:50%;padding-top:.3125rem;text-align:center;color:rgba(84,84,84,1);-webkit-transform-origin:50% 100% 0;font-size:1.25rem}.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span{color:rgba(55,161,237,1)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator{position:absolute;top:50%;width:8.9375rem;height:8.9375rem;line-height:8.9375rem;border-radius:50%;background-color:rgba(0,61,107,.95);-webkit-mask-image:url(images/Indicator/b_fast_scroll_rollover_bg.png);-webkit-mask-repeat:no-repeat;-webkit-mask-size:8.9375rem;margin-top:-4.4375rem;margin-left:100%;-webkit-transform:translate3d(-6.703125rem,0,0)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text{text-align:center;font-size:4.375rem;color:rgba(55,161,237,1)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-minimize .ui-circularindexscrollbar-indicator-text{padding-right:.4375rem;text-align:right;font-size:2rem}.ui-scrollbar-bar-type{position:absolute}.ui-scrollbar-bar-type.ui-scrollbar-horizontal{left:0;bottom:0;width:100%;height:8px}.ui-scrollbar-bar-type.ui-scrollbar-vertical{right:0;top:0;width:.5rem;height:100%}.ui-scrollbar-bar-type .ui-scrollbar-indicator{position:absolute;background-color:rgba(102,102,102,1)}.ui-scrollbar-bar-type.ui-scrollbar-horizontal .ui-scrollbar-indicator{height:.25rem}.ui-scrollbar-bar-type.ui-scrollbar-vertical .ui-scrollbar-indicator{width:.25rem}.ui-scrollbar-bouncing-effect{display:none;position:absolute;background-repeat:no-repeat;-webkit-animation-duration:.47s;-moz-animation-duration:.47s;-ms-animation-duration:.47s;-o-animation-duration:.47s;-webkit-animation-timing-function:step-start;-moz-animation-timing-function:step-start;-ms-animation-timing-function:step-start;-o-animation-timing-function:step-start;animation-timing-function:step-start;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards;background-color:rgba(55,161,237,.7)}.ui-scrollbar-bouncing-effect::before{content:"";position:absolute;background-color:rgba(55,161,237,1)}.ui-scrollbar-bouncing-effect.ui-top,.ui-scrollbar-bouncing-effect.ui-bottom{width:100%;height:3.125rem;left:0;-webkit-mask-size:100% 3.125rem}.ui-scrollbar-bouncing-effect.ui-top::before,.ui-scrollbar-bouncing-effect.ui-bottom::before{width:100%;height:.125rem;-webkit-mask-size:100% .125rem}.ui-scrollbar-bouncing-effect.ui-left,.ui-scrollbar-bouncing-effect.ui-right{width:3.125rem;height:100%;top:0;-webkit-mask-size:3.125rem 100%}.ui-scrollbar-bouncing-effect.ui-left::before,.ui-scrollbar-bouncing-effect.ui-right::before{width:.0625rem;height:100%;-webkit-mask-size:.0625rem 100%}.ui-scrollbar-bouncing-effect.ui-top{top:0;-webkit-mask-image:url(images/Scroller/bouncing_top_glow.png)}.ui-scrollbar-bouncing-effect.ui-top::before{-webkit-mask-image:url(images/Scroller/bouncing_top_edge.png)}.ui-scrollbar-bouncing-effect.ui-bottom{bottom:0;-webkit-mask-image:url(images/Scroller/bouncing_bottom_glow.png)}.ui-scrollbar-bouncing-effect.ui-bottom::before{-webkit-mask-image:url(images/Scroller/bouncing_bottom_edge.png)}.ui-scrollbar-bouncing-effect.ui-left{left:0;-webkit-mask-image:url(images/Scroller/bouncing_left_glow.png)}.ui-scrollbar-bouncing-effect.ui-left::before{-webkit-mask-image:url(images/Scroller/bouncing_left_edge.png)}.ui-scrollbar-bouncing-effect.ui-right{right:0;-webkit-mask-image:url(images/Scroller/bouncing_right_glow.png)}.ui-scrollbar-bouncing-effect.ui-right::before{-webkit-mask-image:url(images/Scroller/bouncing_right_edge.png)}@-webkit-keyframes ui-bouncing-show{0%{opacity:0}10%{opacity:.1}20%{opacity:.2}30%{opacity:.3}40%{opacity:.4}50%{opacity:.5}60%{opacity:.6}70%{opacity:.7}80%{opacity:.8}90%{opacity:.9}100%{opacity:1}}@-webkit-keyframes ui-bouncing-hide{0%{opacity:1}10%{opacity:.9}20%{opacity:.8}30%{opacity:.7}40%{opacity:.6}50%{opacity:.5}60%{opacity:.4}70%{opacity:.3}80%{opacity:.2}90%{opacity:.1}100%{opacity:0}}.ui-scrollbar-bouncing-effect.ui-show{display:block;-webkit-animation-name:ui-bouncing-show}.ui-scrollbar-bouncing-effect.ui-hide{display:block;-webkit-animation-name:ui-bouncing-hide}.ui-swipelist{position:absolute;top:0}.ui-swipelist-left,.ui-swipelist-right{position:absolute;display:none}.ui-swipelist-left{background:-webkit-linear-gradient(left,rgba(98,168,24,1) 0,rgba(8,8,8,1) 0)}.ui-swipelist-right{background:-webkit-linear-gradient(right,rgba(235,164,23,1) 0,rgba(8,8,8,1) 0)}.ui-swipelist-icon,.ui-swipelist-text{position:absolute}.ui-swipelist-left .ui-swipelist-icon{width:20%;height:100%;margin-left:2%;background-color:rgba(245,245,245,1);-webkit-mask-image:url(images/Swipelist/b_logs_icon_body_btn_call_nor.png);-webkit-mask-repeat:no-repeat}.ui-swipelist-left .ui-swipelist-text{margin-left:40%;height:100%;line-height:90px}.ui-swipelist-right .ui-swipelist-icon{width:20%;height:100%;margin-left:80%;background-color:rgba(245,245,245,1);-webkit-mask-image:url(images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png);-webkit-mask-repeat:no-repeat}.ui-swipelist-right .ui-swipelist-text{margin-left:20%;height:100%;line-height:90px}.ui-tab-indicator{position:relative;height:6px}.ui-tab-indicator .ui-tab-item{position:absolute;top:0;left:0;display:block;height:6px;background-color:rgba(76,103,125,1)}.ui-tab-indicator .ui-tab-item.ui-tab-active{background-color:rgba(55,161,237,1)}input[type=checkbox]:not(.ui-switch-input),input[type=radio]{box-sizing:border-box;padding:0;height:56px;width:56px;font-size:32px;-webkit-appearance:none;position:relative}input[type=radio]{background-color:rgba(0,14,26,1);-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);-webkit-mask-repeat:no-repeat}input[type=radio]::after{content:"";background-color:rgba(245,245,245,.3);-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_line.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:checked::before{content:"";background-color:rgba(112,186,15,1);-webkit-mask-image:url(images/Controller_icon/tw_btn_radio_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:active{background-color:rgba(0,50,84,.4);-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);-webkit-mask-repeat:no-repeat}input[type=radio]:active::after{content:"";background-color:rgba(245,245,245,.3);-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_line.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:active:checked::before{content:"";background-color:rgba(245,245,245,1);-webkit-mask-image:url(images/Controller_icon/tw_btn_radio_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input){-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,14,26,1)}input[type=checkbox]:not(.ui-switch-input)::after{content:"";background-color:rgba(245,245,245,.3);-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):checked::before{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_check_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(112,186,15,1);width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):active{-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,50,84,.4)}input[type=checkbox]:not(.ui-switch-input):active::after{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(245,245,245,.3);width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):active:checked::before{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_check_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(245,245,245,1);width:56px;height:56px;position:absolute}.ui-marquee{position:relative;white-space:nowrap;overflow:hidden;-webkit-user-select:none}.ui-marquee.ui-marquee-gradient{text-overflow:clip}.ui-marquee.ui-marquee-gradient::after{content:"";width:6.875rem;height:100%;background:-webkit-linear-gradient(left,transparent 0,rgba(8,8,8,1) 100%);position:absolute;right:0}.ui-marquee.ui-marquee-ellipsis .ui-marquee-content{display:block;overflow:hidden;text-overflow:ellipsis}.ui-marquee-content{overflow:visible;display:inline-block}.ui-marquee-anim-running{-webkit-animation-play-state:running}.ui-marquee-anim-stopped{-webkit-animation-play-state:paused}.ui-page-indicator{position:absolute;left:50%;-webkit-transform:translate3d(-50%,0,0);-moz-transform:translate3d(-50%,0,0);-ms-transform:translate3d(-50%,0,0);-o-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.ui-page-indicator-item{position:relative;display:inline-block;width:.8125rem;height:.8125rem;-webkit-mask-image:-webkit-radial-gradient(#000 .25rem,transparent .375rem);background-color:rgba(245,245,245,.4);margin-right:.5625rem;-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-page-indicator-item:last-child{margin-right:0}.ui-page-indicator-item.ui-page-indicator-active{background-color:rgba(245,245,245,1);-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-snap-listview li{-webkit-scroll-snap-destination:50% 50%}.ui-drawer{width:100%;height:100%;position:fixed;top:0;background-color:rgba(8,8,8,1);z-index:1201;box-sizing:border-box}.ui-drawer.ui-drawer-close{overflow:hidden}.ui-drawer.ui-drawer-open{overflow:auto}.ui-drawer-overlay{top:0;position:fixed;background-color:rgba(0,0,0,.8);z-index:1200}.ui-page .ui-expandable-header{height:60px}.ui-page .ui-expandable-header.ui-header-expand{height:80px}.ui-page .ui-expandable-header.ui-header-expand .ui-title{padding-top:0;transform:translate3d(0,20px,0)}.ui-section-changer{height:100%}
\ No newline at end of file
diff --git a/lib/tau/wearable/theme/brown/images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png b/lib/tau/wearable/theme/brown/images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png
new file mode 100644
index 0000000..cac8bf2
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png b/lib/tau/wearable/theme/brown/images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png
new file mode 100644
index 0000000..2048b43
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png b/lib/tau/wearable/theme/brown/images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png
new file mode 100644
index 0000000..e06b5d5
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png b/lib/tau/wearable/theme/brown/images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png
new file mode 100644
index 0000000..b61c7a6
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png b/lib/tau/wearable/theme/brown/images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png
new file mode 100644
index 0000000..ea2506c
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/toggle_changeable.png b/lib/tau/wearable/theme/brown/images/Controller_icon/toggle_changeable.png
new file mode 100644
index 0000000..69500e8
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/toggle_changeable.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/toggle_circle.png b/lib/tau/wearable/theme/brown/images/Controller_icon/toggle_circle.png
new file mode 100644
index 0000000..80532ce
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/toggle_circle.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/toggle_list_circle.png b/lib/tau/wearable/theme/brown/images/Controller_icon/toggle_list_circle.png
new file mode 100644
index 0000000..e02e641
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/toggle_list_circle.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_check_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_check_holo_dark.png
new file mode 100644
index 0000000..b93066e
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_check_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_checkbox_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_checkbox_holo_dark.png
new file mode 100644
index 0000000..b66d28c
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_checkbox_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_checkbox_line_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_checkbox_line_holo_dark.png
new file mode 100644
index 0000000..e76b081
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_checkbox_line_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png
new file mode 100644
index 0000000..23d166d
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png
new file mode 100644
index 0000000..0effb3a
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png
new file mode 100644
index 0000000..e6e6501
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_next_depth_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_next_depth_holo_dark.png
new file mode 100644
index 0000000..5b3394b
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_next_depth_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png
new file mode 100644
index 0000000..880f013
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_radio_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_radio_holo_dark.png
new file mode 100644
index 0000000..0fc1881
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_radio_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_radiobox_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_radiobox_holo_dark.png
new file mode 100644
index 0000000..703cb0c
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_radiobox_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_radiobox_line.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_radiobox_line.png
new file mode 100644
index 0000000..1f92e88
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_btn_radiobox_line.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_activation_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_activation_holo_dark.png
new file mode 100644
index 0000000..266c73f
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_activation_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_activation_holo_dark_dim.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_activation_holo_dark_dim.png
new file mode 100644
index 0000000..699eb3e
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_activation_holo_dark_dim.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png
new file mode 100644
index 0000000..71e5b20
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_disabled_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_disabled_holo_dark.png
new file mode 100644
index 0000000..ebb05a6
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_disabled_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png
new file mode 100644
index 0000000..a53449a
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png
new file mode 100644
index 0000000..53e8ee4
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png
new file mode 100644
index 0000000..ef5ae33
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png
new file mode 100644
index 0000000..ba74981
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png
new file mode 100644
index 0000000..acdf9c4
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png
new file mode 100644
index 0000000..6f99bc8
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_holo_dark.png
new file mode 100644
index 0000000..28e5474
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png
new file mode 100644
index 0000000..b74f64e
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png
new file mode 100644
index 0000000..17a9ba1
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png
new file mode 100644
index 0000000..d7a0064
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png
new file mode 100644
index 0000000..f915470
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png
new file mode 100644
index 0000000..0f73347
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png
new file mode 100644
index 0000000..e3823c3
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png
new file mode 100644
index 0000000..e0d7382
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_divider.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_divider.png
new file mode 100644
index 0000000..30605ce
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_divider.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_left_softbtn.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_left_softbtn.png
new file mode 100644
index 0000000..6bf1b2e
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_left_softbtn.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_num_bg_focused.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_num_bg_focused.png
new file mode 100644
index 0000000..b26e87c
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_num_bg_focused.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_num_bg_normal.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_num_bg_normal.png
new file mode 100644
index 0000000..59b9ae1
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_num_bg_normal.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_num_dot.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_num_dot.png
new file mode 100644
index 0000000..aa5a1d2
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_num_dot.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_num_dot_01.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_num_dot_01.png
new file mode 100644
index 0000000..c9a2d8b
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_num_dot_01.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_right_softbtn.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_right_softbtn.png
new file mode 100644
index 0000000..023945a
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_right_softbtn.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_time_bg.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_time_bg.png
new file mode 100644
index 0000000..f5bf671
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_time_bg.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_01.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_01.png
new file mode 100644
index 0000000..9d0ed36
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_01.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_02.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_02.png
new file mode 100644
index 0000000..f3ff1ed
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_02.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_03.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_03.png
new file mode 100644
index 0000000..05ddd26
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_03.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_04.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_04.png
new file mode 100644
index 0000000..879851c
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_04.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_05.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_05.png
new file mode 100644
index 0000000..b523324
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_05.png
diff --git a/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_06.png b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_06.png
new file mode 100644
index 0000000..d320e18
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Datetimepicker/tw_timepicker_wheel_06.png
diff --git a/lib/tau/wearable/theme/brown/images/Indicator/b_fast_scroll_rollover_bg.png b/lib/tau/wearable/theme/brown/images/Indicator/b_fast_scroll_rollover_bg.png
new file mode 100644
index 0000000..dbfb43b
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Indicator/b_fast_scroll_rollover_bg.png
diff --git a/lib/tau/wearable/theme/brown/images/Indicator/b_index_scroll_bg.png b/lib/tau/wearable/theme/brown/images/Indicator/b_index_scroll_bg.png
new file mode 100644
index 0000000..348e3aa
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Indicator/b_index_scroll_bg.png
diff --git a/lib/tau/wearable/theme/brown/images/Indicator/list_scroll_triggle.png b/lib/tau/wearable/theme/brown/images/Indicator/list_scroll_triggle.png
new file mode 100644
index 0000000..983d398
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Indicator/list_scroll_triggle.png
diff --git a/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_brightness_off.png b/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_brightness_off.png
new file mode 100644
index 0000000..c1d4bf4
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_brightness_off.png
diff --git a/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_brightness_on.png b/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_brightness_on.png
new file mode 100644
index 0000000..22e92bf
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_brightness_on.png
diff --git a/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_mute.png b/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_mute.png
new file mode 100644
index 0000000..a68530a
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_mute.png
diff --git a/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_outdoor_off.png b/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_outdoor_off.png
new file mode 100644
index 0000000..5b0c414
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_outdoor_off.png
diff --git a/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_outdoor_on.png b/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_outdoor_on.png
new file mode 100644
index 0000000..9827653
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_outdoor_on.png
diff --git a/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_sound.png b/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_sound.png
new file mode 100644
index 0000000..f66d6ba
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_sound.png
diff --git a/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_sound_off.png b/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_sound_off.png
new file mode 100644
index 0000000..3038dff
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_sound_off.png
diff --git a/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_vibrate.png b/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_vibrate.png
new file mode 100644
index 0000000..2333074
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Popup/tw_device_options_vibrate.png
diff --git a/lib/tau/wearable/theme/brown/images/Popup/tw_ic_lock_power_off.png b/lib/tau/wearable/theme/brown/images/Popup/tw_ic_lock_power_off.png
new file mode 100644
index 0000000..35ab760
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Popup/tw_ic_lock_power_off.png
diff --git a/lib/tau/wearable/theme/brown/images/Popup/tw_ic_lock_restart.png b/lib/tau/wearable/theme/brown/images/Popup/tw_ic_lock_restart.png
new file mode 100644
index 0000000..b32aa3a
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Popup/tw_ic_lock_restart.png
diff --git a/lib/tau/wearable/theme/brown/images/Processing/tw_popup_progress_line.png b/lib/tau/wearable/theme/brown/images/Processing/tw_popup_progress_line.png
new file mode 100644
index 0000000..fd8c2f0
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Processing/tw_popup_progress_line.png
diff --git a/lib/tau/wearable/theme/brown/images/Processing/tw_progress.png b/lib/tau/wearable/theme/brown/images/Processing/tw_progress.png
new file mode 100644
index 0000000..58f13da
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Processing/tw_progress.png
diff --git a/lib/tau/wearable/theme/brown/images/Processing/tw_progress_full_loading_bg.png b/lib/tau/wearable/theme/brown/images/Processing/tw_progress_full_loading_bg.png
new file mode 100644
index 0000000..944fff1
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Processing/tw_progress_full_loading_bg.png
diff --git a/lib/tau/wearable/theme/brown/images/Processing/tw_progress_small_loading_bg.png b/lib/tau/wearable/theme/brown/images/Processing/tw_progress_small_loading_bg.png
new file mode 100644
index 0000000..8bc529d
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Processing/tw_progress_small_loading_bg.png
diff --git a/lib/tau/wearable/theme/brown/images/Processing/tw_widget_activity_01.png b/lib/tau/wearable/theme/brown/images/Processing/tw_widget_activity_01.png
new file mode 100644
index 0000000..8ec516e
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Processing/tw_widget_activity_01.png
diff --git a/lib/tau/wearable/theme/brown/images/Processing/tw_widget_activity_02.png b/lib/tau/wearable/theme/brown/images/Processing/tw_widget_activity_02.png
new file mode 100644
index 0000000..7b3ef90
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Processing/tw_widget_activity_02.png
diff --git a/lib/tau/wearable/theme/brown/images/Progress/tw_progressbar_indeterminate1_holo_dark.png b/lib/tau/wearable/theme/brown/images/Progress/tw_progressbar_indeterminate1_holo_dark.png
new file mode 100644
index 0000000..6cdff14
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Progress/tw_progressbar_indeterminate1_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Progress/tw_progressbar_indeterminate2_holo_dark.png b/lib/tau/wearable/theme/brown/images/Progress/tw_progressbar_indeterminate2_holo_dark.png
new file mode 100644
index 0000000..17905b9
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Progress/tw_progressbar_indeterminate2_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Progress/tw_progressbar_indeterminate3_holo_dark.png b/lib/tau/wearable/theme/brown/images/Progress/tw_progressbar_indeterminate3_holo_dark.png
new file mode 100644
index 0000000..b17353d
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Progress/tw_progressbar_indeterminate3_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Progress/tw_progressbar_indeterminate4_holo_dark.png b/lib/tau/wearable/theme/brown/images/Progress/tw_progressbar_indeterminate4_holo_dark.png
new file mode 100644
index 0000000..719a2bc
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Progress/tw_progressbar_indeterminate4_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Progress/tw_progressbar_indeterminate5_holo_dark.png b/lib/tau/wearable/theme/brown/images/Progress/tw_progressbar_indeterminate5_holo_dark.png
new file mode 100644
index 0000000..420de53
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Progress/tw_progressbar_indeterminate5_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Progress/tw_scrubber_control_focused_holo_dark.png b/lib/tau/wearable/theme/brown/images/Progress/tw_scrubber_control_focused_holo_dark.png
new file mode 100644
index 0000000..0d807e2
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Progress/tw_scrubber_control_focused_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Progress/tw_scrubber_control_holo_dark.png b/lib/tau/wearable/theme/brown/images/Progress/tw_scrubber_control_holo_dark.png
new file mode 100644
index 0000000..b7c6fdb
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Progress/tw_scrubber_control_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/Scroller/bouncing_bottom_edge.png b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_bottom_edge.png
new file mode 100644
index 0000000..7259d14
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_bottom_edge.png
diff --git a/lib/tau/wearable/theme/brown/images/Scroller/bouncing_bottom_glow.png b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_bottom_glow.png
new file mode 100644
index 0000000..5b150b0
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_bottom_glow.png
diff --git a/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_bottom_edge.png b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_bottom_edge.png
new file mode 100644
index 0000000..ded117d
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_bottom_edge.png
diff --git a/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_bottom_glow.png b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_bottom_glow.png
new file mode 100644
index 0000000..96f3684
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_bottom_glow.png
diff --git a/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_left_edge.png b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_left_edge.png
new file mode 100644
index 0000000..c7950f4
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_left_edge.png
diff --git a/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_left_glow.png b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_left_glow.png
new file mode 100644
index 0000000..5337045
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_left_glow.png
diff --git a/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_right_edge.png b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_right_edge.png
new file mode 100644
index 0000000..4037cb5
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_right_edge.png
diff --git a/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_right_glow.png b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_right_glow.png
new file mode 100644
index 0000000..7319c76
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_circle_right_glow.png
diff --git a/lib/tau/wearable/theme/brown/images/Scroller/bouncing_left_edge.png b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_left_edge.png
new file mode 100644
index 0000000..413fccd
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_left_edge.png
diff --git a/lib/tau/wearable/theme/brown/images/Scroller/bouncing_left_glow.png b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_left_glow.png
new file mode 100644
index 0000000..11015e4
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_left_glow.png
diff --git a/lib/tau/wearable/theme/brown/images/Scroller/bouncing_right_edge.png b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_right_edge.png
new file mode 100644
index 0000000..e14f69b
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_right_edge.png
diff --git a/lib/tau/wearable/theme/brown/images/Scroller/bouncing_right_glow.png b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_right_glow.png
new file mode 100644
index 0000000..69ed30b
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_right_glow.png
diff --git a/lib/tau/wearable/theme/brown/images/Scroller/bouncing_top_edge.png b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_top_edge.png
new file mode 100644
index 0000000..6138e66
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_top_edge.png
diff --git a/lib/tau/wearable/theme/brown/images/Scroller/bouncing_top_glow.png b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_top_glow.png
new file mode 100644
index 0000000..73b2fc9
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Scroller/bouncing_top_glow.png
diff --git a/lib/tau/wearable/theme/brown/images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png b/lib/tau/wearable/theme/brown/images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png
new file mode 100644
index 0000000..5e41e9a
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png
diff --git a/lib/tau/wearable/theme/brown/images/Swipelist/b_logs_icon_body_btn_call_nor.png b/lib/tau/wearable/theme/brown/images/Swipelist/b_logs_icon_body_btn_call_nor.png
new file mode 100644
index 0000000..8337333
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/Swipelist/b_logs_icon_body_btn_call_nor.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/00_field_btn_clear.png b/lib/tau/wearable/theme/brown/images/controls/00_field_btn_clear.png
new file mode 100644
index 0000000..eff4c22
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/00_field_btn_clear.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/00_field_btn_clear_press.png b/lib/tau/wearable/theme/brown/images/controls/00_field_btn_clear_press.png
new file mode 100644
index 0000000..778108e
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/00_field_btn_clear_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/00_search_icon.png b/lib/tau/wearable/theme/brown/images/controls/00_search_icon.png
new file mode 100644
index 0000000..c634b56
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/00_search_icon.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/00_slider_button_brightness_01.png b/lib/tau/wearable/theme/brown/images/controls/00_slider_button_brightness_01.png
new file mode 100644
index 0000000..8f9214f
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/00_slider_button_brightness_01.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/00_slider_button_brightness_02.png b/lib/tau/wearable/theme/brown/images/controls/00_slider_button_brightness_02.png
new file mode 100644
index 0000000..0df85e0
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/00_slider_button_brightness_02.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/00_slider_button_volume_01.png b/lib/tau/wearable/theme/brown/images/controls/00_slider_button_volume_01.png
new file mode 100644
index 0000000..1f41023
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/00_slider_button_volume_01.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/00_slider_button_volume_02.png b/lib/tau/wearable/theme/brown/images/controls/00_slider_button_volume_02.png
new file mode 100644
index 0000000..0f6f7f4
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/00_slider_button_volume_02.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/00_slider_handle.png b/lib/tau/wearable/theme/brown/images/controls/00_slider_handle.png
new file mode 100644
index 0000000..3a64686
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/00_slider_handle.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/00_slider_handle_press.png b/lib/tau/wearable/theme/brown/images/controls/00_slider_handle_press.png
new file mode 100644
index 0000000..ecb7e42
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/00_slider_handle_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/00_slider_popup_bg.png b/lib/tau/wearable/theme/brown/images/controls/00_slider_popup_bg.png
new file mode 100644
index 0000000..ef0a56e
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/00_slider_popup_bg.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_back.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_back.png
new file mode 100644
index 0000000..7618371
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_back.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_back_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_back_press.png
new file mode 100644
index 0000000..7618371
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_back_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_call.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_call.png
new file mode 100644
index 0000000..5b837fd
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_call.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_call_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_call_press.png
new file mode 100644
index 0000000..5b837fd
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_call_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_check.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_check.png
new file mode 100644
index 0000000..8df9a9c
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_check.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_check_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_check_press.png
new file mode 100644
index 0000000..8df9a9c
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_check_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_cancel.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_cancel.png
new file mode 100644
index 0000000..a5b5639
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_cancel.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_cancel_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_cancel_press.png
new file mode 100644
index 0000000..a5b5639
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_cancel_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_closed.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_closed.png
new file mode 100644
index 0000000..452209d
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_closed.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_closed_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_closed_press.png
new file mode 100644
index 0000000..452209d
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_closed_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_minus.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_minus.png
new file mode 100644
index 0000000..0f0170f
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_minus.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_minus_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_minus_press.png
new file mode 100644
index 0000000..0f0170f
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_minus_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_opened.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_opened.png
new file mode 100644
index 0000000..5b5cbd0
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_opened.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_opened_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_opened_press.png
new file mode 100644
index 0000000..5b5cbd0
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_opened_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_send.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_send.png
new file mode 100644
index 0000000..521b4b2
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_send.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_send_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_send_press.png
new file mode 100644
index 0000000..521b4b2
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_expand_send_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_gear.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_gear.png
new file mode 100644
index 0000000..8e4b359
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_gear.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_gear_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_gear_press.png
new file mode 100644
index 0000000..8e4b359
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_gear_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_grid.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_grid.png
new file mode 100644
index 0000000..ca6b769
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_grid.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_grid_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_grid_press.png
new file mode 100644
index 0000000..ca6b769
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_grid_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_home.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_home.png
new file mode 100644
index 0000000..1ba3820
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_home.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_home_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_home_press.png
new file mode 100644
index 0000000..1ba3820
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_home_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_info.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_info.png
new file mode 100644
index 0000000..1e5d984
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_info.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_info_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_info_press.png
new file mode 100644
index 0000000..1e5d984
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_info_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_left.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_left.png
new file mode 100644
index 0000000..b4eca6d
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_left.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_left_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_left_press.png
new file mode 100644
index 0000000..b4eca6d
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_left_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_plus.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_plus.png
new file mode 100644
index 0000000..12cbe29
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_plus.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_plus_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_plus_press.png
new file mode 100644
index 0000000..12cbe29
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_plus_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_refresh.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_refresh.png
new file mode 100644
index 0000000..33ff934
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_refresh.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_refresh_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_refresh_press.png
new file mode 100644
index 0000000..33ff934
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_refresh_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_rename.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_rename.png
new file mode 100644
index 0000000..e3603b8
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_rename.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_rename_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_rename_press.png
new file mode 100644
index 0000000..e3603b8
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_rename_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_right.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_right.png
new file mode 100644
index 0000000..659ea76
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_right.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_right_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_right_press.png
new file mode 100644
index 0000000..659ea76
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_right_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_search.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_search.png
new file mode 100644
index 0000000..12f4714
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_search.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_search_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_search_press.png
new file mode 100644
index 0000000..12f4714
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_search_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_star.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_star.png
new file mode 100644
index 0000000..f608394
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_star.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_star_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_star_press.png
new file mode 100644
index 0000000..f608394
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_star_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_warning.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_warning.png
new file mode 100644
index 0000000..4a39960
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_warning.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_button_warning_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_button_warning_press.png
new file mode 100644
index 0000000..4a39960
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_button_warning_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_icon_jump.png b/lib/tau/wearable/theme/brown/images/controls/button/00_icon_jump.png
new file mode 100644
index 0000000..3692cbd
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_icon_jump.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_icon_jump_left.png b/lib/tau/wearable/theme/brown/images/controls/button/00_icon_jump_left.png
new file mode 100644
index 0000000..9c299ac
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_icon_jump_left.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_icon_jump_left_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_icon_jump_left_press.png
new file mode 100644
index 0000000..9c299ac
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_icon_jump_left_press.png
diff --git a/lib/tau/wearable/theme/brown/images/controls/button/00_icon_jump_press.png b/lib/tau/wearable/theme/brown/images/controls/button/00_icon_jump_press.png
new file mode 100644
index 0000000..3692cbd
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/controls/button/00_icon_jump_press.png
diff --git a/lib/tau/wearable/theme/brown/images/listview/tw_list_add_holo_dark.png b/lib/tau/wearable/theme/brown/images/listview/tw_list_add_holo_dark.png
new file mode 100644
index 0000000..bd24e0e
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/listview/tw_list_add_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/listview/tw_list_delete_holo_dark.png b/lib/tau/wearable/theme/brown/images/listview/tw_list_delete_holo_dark.png
new file mode 100644
index 0000000..ccbb700
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/listview/tw_list_delete_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/listview/tw_list_setting_holo_dark.png b/lib/tau/wearable/theme/brown/images/listview/tw_list_setting_holo_dark.png
new file mode 100644
index 0000000..5b90223
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/listview/tw_list_setting_holo_dark.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_Back.png b/lib/tau/wearable/theme/brown/images/page/00_icon_Back.png
new file mode 100644
index 0000000..815a343
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_Back.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_Back_press.png b/lib/tau/wearable/theme/brown/images/page/00_icon_Back_press.png
new file mode 100644
index 0000000..fcbc346
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_Back_press.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_SIP_close_press_web.png b/lib/tau/wearable/theme/brown/images/page/00_icon_SIP_close_press_web.png
new file mode 100644
index 0000000..5d036a3
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_SIP_close_press_web.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_SIP_close_web.png b/lib/tau/wearable/theme/brown/images/page/00_icon_SIP_close_web.png
new file mode 100644
index 0000000..76f10ec
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_SIP_close_web.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_cancel_press_web.png b/lib/tau/wearable/theme/brown/images/page/00_icon_cancel_press_web.png
new file mode 100644
index 0000000..872ad33
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_cancel_press_web.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_cancel_web.png b/lib/tau/wearable/theme/brown/images/page/00_icon_cancel_web.png
new file mode 100644
index 0000000..3c37e96
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_cancel_web.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_delete_press_web.png b/lib/tau/wearable/theme/brown/images/page/00_icon_delete_press_web.png
new file mode 100644
index 0000000..829c8b0
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_delete_press_web.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_delete_web.png b/lib/tau/wearable/theme/brown/images/page/00_icon_delete_web.png
new file mode 100644
index 0000000..d105c7b
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_delete_web.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_done_press_web.png b/lib/tau/wearable/theme/brown/images/page/00_icon_done_press_web.png
new file mode 100644
index 0000000..b56c0f1
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_done_press_web.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_done_web.png b/lib/tau/wearable/theme/brown/images/page/00_icon_done_web.png
new file mode 100644
index 0000000..7b58fc4
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_done_web.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_edit_press_web.png b/lib/tau/wearable/theme/brown/images/page/00_icon_edit_press_web.png
new file mode 100644
index 0000000..b52b2b6
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_edit_press_web.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_edit_web.png b/lib/tau/wearable/theme/brown/images/page/00_icon_edit_web.png
new file mode 100644
index 0000000..a56d1f6
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_edit_web.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_more.png b/lib/tau/wearable/theme/brown/images/page/00_icon_more.png
new file mode 100644
index 0000000..95f17c7
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_more.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_more_press.png b/lib/tau/wearable/theme/brown/images/page/00_icon_more_press.png
new file mode 100644
index 0000000..d4d6951
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_more_press.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_plus_press_web.png b/lib/tau/wearable/theme/brown/images/page/00_icon_plus_press_web.png
new file mode 100644
index 0000000..f15fb71
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_plus_press_web.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_plus_web.png b/lib/tau/wearable/theme/brown/images/page/00_icon_plus_web.png
new file mode 100644
index 0000000..d49406f
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_plus_web.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_search_press_web.png b/lib/tau/wearable/theme/brown/images/page/00_icon_search_press_web.png
new file mode 100644
index 0000000..464c5c7
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_search_press_web.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_search_web.png b/lib/tau/wearable/theme/brown/images/page/00_icon_search_web.png
new file mode 100644
index 0000000..7788bec
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_search_web.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_select_all_press_web.png b/lib/tau/wearable/theme/brown/images/page/00_icon_select_all_press_web.png
new file mode 100644
index 0000000..32ae22e
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_select_all_press_web.png
diff --git a/lib/tau/wearable/theme/brown/images/page/00_icon_select_all_web.png b/lib/tau/wearable/theme/brown/images/page/00_icon_select_all_web.png
new file mode 100644
index 0000000..ce4af60
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/images/page/00_icon_select_all_web.png
diff --git a/lib/tau/wearable/theme/brown/tau.css b/lib/tau/wearable/theme/brown/tau.css
new file mode 100644
index 0000000..9d2c601
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/tau.css
@@ -0,0 +1,3005 @@
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/***************************************************************************
+                  Body
+***************************************************************************/
+/***************************************************************************
+                   Action Bar
+***************************************************************************/
+/****************************************************************************
+               Circle Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Processing
+****************************************************************************/
+/****************************************************************************
+		Toggle Switch
+****************************************************************************/
+/***************************************************************************
+                   Buttons
+***************************************************************************/
+/***************************************************************************
+                   Popup
+***************************************************************************/
+/***************************************************************************
+                   Option Popup
+***************************************************************************/
+/***************************************************************************
+                  index scrollbar (vertical)
+***************************************************************************/
+/***************************************************************************
+                  circular index scrollbar
+***************************************************************************/
+/***************************************************************************
+                  Listview
+***************************************************************************/
+/****************************************************************************
+               Listview with Marquee
+****************************************************************************/
+/***************************************************************************
+                   Scroller
+***************************************************************************/
+/***************************************************************************
+                   Swipe list
+***************************************************************************/
+/***************************************************************************
+                   Checkbox/Radio
+***************************************************************************/
+/***************************************************************************
+						Page Indicator
+***************************************************************************/
+/************************************************************************/
+/*                           fixedUIStyle.less                          */
+/************************************************************************/
+/* When system font-size is changed, winset size (ex. header, footer, button, etc,
+   include font) also changed. But in UX guide, some UI elements should have fixed
+   size regardless of system font size.
+   So, this less file supports fixed style for some elements.
+   - Layout: header, footer, button
+   - Popup : popup header, popup footer
+   - toggleswitch
+   - progress: text for ratio
+*/
+/***********************************************************************/
+/*                         Layout(FIXED)                               */
+/***********************************************************************/
+/**********************************************************************/
+/*                        Button(FIXED)                               */
+/**********************************************************************/
+/**********************************************************************/
+/*                       Popup(FIXED)                                 */
+/**********************************************************************/
+/**********************************************************************/
+/*                      ToggleSwitch(FIXED)                           */
+/**********************************************************************/
+/*********************************************************************/
+/*                     Progress(FIXED)                               */
+/*********************************************************************/
+/************************
+Listview
+*************************/
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+/*
+ * default outline set none
+ */
+* {
+  outline: none;
+}
+/*
+ * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+  display: block;
+}
+/*
+ * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+audio,
+canvas,
+video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+/*
+ * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
+ * and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+[hidden] {
+  display: none;
+}
+/* ==========================================================================
+   Base
+   ========================================================================== */
+/*
+ * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+ *	`em` units.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ *	user zoom.
+ */
+html {
+  font-size: 100%;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+}
+/*
+ * Addresses `font-family` inconsistency between `textarea` and other form
+ * elements.
+ */
+html,
+button,
+input,
+select,
+textarea {
+  font-family: Tizen, Samsung Sans, Helvetica;
+}
+/*
+ * Addresses margins handled incorrectly in IE 6/7.
+ */
+body {
+  margin: 0;
+}
+/* ==========================================================================
+   Links
+   ========================================================================== */
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+/*
+ * Addresses font sizes and margins set differently in IE 6/7.
+ * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
+ * and Chrome.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+h3 {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+h4 {
+  font-size: 1em;
+  margin: 1.33em 0;
+}
+h5 {
+  font-size: 0.83em;
+  margin: 1.67em 0;
+}
+h6 {
+  font-size: 0.75em;
+  margin: 2.33em 0;
+}
+/*
+ * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
+ */
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+/*
+ * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+ */
+b,
+strong {
+  font-weight: bold;
+}
+blockquote {
+  margin: 1em 40px;
+}
+/*
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+dfn {
+  font-style: italic;
+}
+/*
+ * Addresses styling not present in IE 6/7/8/9.
+ */
+mark {
+  background: #ff0;
+  color: #000;
+}
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+p,
+pre {
+  margin: 1em 0;
+}
+/*
+ * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+/*
+ * Addresses CSS quotes not supported in IE 6/7.
+ */
+q {
+  quotes: none;
+}
+/*
+ * Addresses `quotes` property not supported in Safari 4.
+ */
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+small {
+  font-size: 75%;
+}
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+/* ==========================================================================
+   Lists
+   ========================================================================== */
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+dl,
+menu,
+ol,
+ul {
+  margin: 1em 0;
+}
+dd {
+  margin: 0 0 0 40px;
+}
+/*
+ * Addresses paddings set differently in IE 6/7.
+ */
+menu,
+ol,
+ul {
+  padding: 0 0 0 40px;
+}
+/*
+ * Corrects list images handled incorrectly in IE 7.
+ */
+nav ul,
+nav ol {
+  list-style: none;
+  list-style-image: none;
+}
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+/*
+ * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improves image quality when scaled in IE 7.
+ */
+img {
+  border: 0;
+  /* 1 */
+  -ms-interpolation-mode: bicubic;
+  /* 2 */
+}
+/*
+ * Corrects overflow displayed oddly in IE 9.
+ */
+svg:not(:root) {
+  overflow: hidden;
+}
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+/*
+ * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+figure {
+  margin: 0;
+}
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+/*
+ * Corrects margin displayed oddly in IE 6/7.
+ */
+form {
+  margin: 0;
+}
+/*
+ * Define consistent border, margin, and padding.
+ */
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+/*
+ * 1. Corrects color not being inherited in IE 6/7/8/9.
+ * 2. Corrects text not wrapping in Firefox 3.
+ * 3. Corrects alignment displayed oddly in IE 6/7.
+ */
+legend {
+  border: 0;
+  /* 1 */
+  padding: 0;
+  white-space: normal;
+  /* 2 */
+  *margin-left: -7px;
+  /* 3 */
+}
+/*
+ * 1. Corrects font size not being inherited in all browsers.
+ * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *	and Chrome.
+ * 3. Improves appearance and consistency in all browsers.
+ */
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  vertical-align: baseline;
+  /* 3 */
+  *vertical-align: middle;
+  /* 3 */
+}
+/*
+ * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+button,
+input {
+  line-height: normal;
+}
+/*
+ * Re-set default cursor for disabled elements.
+ */
+button[disabled],
+input[disabled] {
+  cursor: default;
+}
+input[type="time"],
+input[type="date"] {
+  color: #000000;
+}
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *	(include `-moz` to future-proof).
+ */
+input[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  /* 2 */
+  box-sizing: content-box;
+}
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+/*
+ * Removes inner padding and border in Firefox 3+.
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+/*
+ * 1. Removes default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+textarea {
+  overflow: auto;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+}
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+/*
+ * Remove most spacing between table cells.
+ */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/*
+ * Common definition for theme
+ */
+/***************************************************************
+   default font size (base font from WRT)
+   => small: 13px
+   => normal: 17px
+   => large: 20px
+
+This is only applied to gear2.
+so, we set @font_size_default as 17px on gear2 and it was changed to 16px since gear-S.
+This value only used for @rem_base, not for html font-size
+html font-size is set by WRT base font-size
+***************************************************************/
+/******************************
+  z-index order collection
+ ******************************/
+/***************************************************************************
+                   Common Style
+***************************************************************************/
+.screen-hidden {
+  visibility: hidden;
+  position: absolute;
+  top: -10000em;
+  left: -10000em;
+}
+/***************************************************************************
+                   Default Style.
+***************************************************************************/
+button,
+input {
+  outline: none;
+  cursor: pointer;
+}
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none !important;
+  color: rgba(245, 245, 245, 1);
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+img {
+  margin: 0;
+  padding: 0;
+}
+/******************************
+  Global LESS mixin collection
+ ******************************/
+/***************************************************************************
+                   Common Style
+***************************************************************************/
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+  height: 100%;
+  font-size: 2.125rem;
+  font-family: Tizen, Samsung Sans, Helvetica;
+  background: rgba(36, 27, 19, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(36, 27, 19, 1);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /* overrides webkit link color */
+}
+.ui-page.ui-page-active {
+  display: block;
+}
+.ui-page.ui-page-build {
+  display: block;
+  visibility: hidden;
+}
+.scrolling-mode-touch {
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-content {
+  width: auto;
+  height: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-header {
+  position: relative;
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  background-color: rgba(51, 40, 30, 1);
+}
+.ui-header .ui-title {
+  color: rgba(255, 145, 0, 1);
+  font-size: 32px;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  margin: 0px;
+  padding-left: 16px;
+  padding-right: 16px;
+  -webkit-mask-image: -webkit-linear-gradient(left, #000000 80%, rgba(0, 0, 0, 0) 95%);
+}
+.ui-header .ui-title.ui-icon {
+  padding-left: 60px;
+  background-position: 16px 14px;
+  background-size: 34px 34px;
+  background-repeat: no-repeat;
+}
+.ui-header.ui-has-more .ui-title {
+  padding-right: 78px;
+  -webkit-mask-image: -webkit-linear-gradient(left, #000000 70%, rgba(0, 0, 0, 0) 75%);
+}
+.ui-header button.ui-more,
+.ui-header input.ui-more {
+  border: 0 none;
+  padding: 0;
+}
+.ui-header .ui-more-disable {
+  cursor: default;
+  background-color: transparent;
+}
+.ui-header .ui-more {
+  display: block;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 68px;
+  height: 100%;
+  overflow: hidden;
+  text-indent: -1000em;
+  background-position: center center;
+  background-color: transparent;
+  cursor: pointer;
+}
+.ui-header .ui-more:active {
+  background-color: rgba(110, 88, 67, 1) !important;
+}
+.ui-header .ui-more.ui-icon-detail {
+  background-color: rgba(255, 145, 0, 1);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-detail[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: rgba(255, 145, 0, 0.2);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-overflow {
+  background-color: rgba(255, 145, 0, 1);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position-x: 0.9375rem;
+  -webkit-mask-position-y: 50%;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-overflow[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: rgba(255, 145, 0, 0.2);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-selectall {
+  background-color: rgba(255, 145, 0, 1);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-selectall[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: rgba(255, 145, 0, 0.2);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-footer {
+  width: 100%;
+  height: 85px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+/***************************************************************************
+                   Page Scroll
+***************************************************************************/
+.ui-page.ui-scroll-on {
+  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-page.ui-scroll-on .ui-content {
+  height: auto !important;
+}
+.ui-page.ui-scroll-on .ui-footer {
+  position: relative;
+}
+.ui-header.ui-fixed {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+}
+.ui-footer.ui-fixed {
+  position: fixed !important;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  -webkit-transform: translate3d(0, 0, 0);
+}
+/***************************************************************************
+                   Grid layout
+***************************************************************************/
+.ui-grid-col > * {
+  float: left;
+}
+.ui-page .ui-grid-col-1 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-1 > * {
+  width: 100%;
+}
+.ui-page .ui-grid-col-2 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-2 > * {
+  width: 50%;
+}
+.ui-page .ui-grid-col-3 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-3 > * {
+  width: 33.333333333333336%;
+}
+.ui-grid-row > * {
+  display: block;
+}
+/*
+ * Progressbar
+ */
+@-webkit-keyframes indeterminate {
+  0% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(153, 87, 0, 1);
+  }
+  25% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(153, 87, 0, 1);
+  }
+  50% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(153, 87, 0, 1);
+  }
+  75% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(153, 87, 0, 1);
+  }
+  100% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(153, 87, 0, 1);
+  }
+}
+progress {
+  position: relative;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: 0.875rem;
+  margin-bottom: 0.875rem;
+  color: rgba(245, 245, 245, 1);
+  width: 100%;
+  height: 0.375rem;
+  -webkit-appearance: none;
+  border: none;
+}
+progress::-webkit-progress-bar {
+  position: relative;
+  background-color: rgba(79, 79, 79, 1);
+  border-radius: 0.125rem;
+  overflow: hidden;
+}
+progress::-webkit-progress-value {
+  background-color: rgba(255, 145, 0, 1);
+  height: 0.375rem;
+  border-radius: 0.125rem;
+  overflow: hidden;
+}
+progress.ui-progress-indeterminate::-webkit-progress-bar {
+  background-color: rgba(255, 145, 0, 1);
+}
+progress.ui-progress-indeterminate::-webkit-progress-value {
+  background-size: 100% 100%;
+  -webkit-animation: indeterminate 150ms infinite;
+}
+.ui-progress-proportion {
+  display: inline-block;
+  float: left;
+  font-size: 20px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: -0.625rem;
+}
+.ui-progress-ratio {
+  display: inline-block;
+  float: right;
+  font-size: 20px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: -0.625rem;
+}
+.ui-circle-progress {
+  display: none;
+}
+.ui-progressbar.ui-progressbar-full {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.ui-progressbar.ui-progressbar-large {
+  width: 6.25rem;
+  height: 6.25rem;
+}
+.ui-progressbar.ui-progressbar-medium {
+  width: 5.25rem;
+  height: 5.25rem;
+}
+.ui-progressbar.ui-progressbar-small {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+.ui-progressbar {
+  position: relative;
+  display: inline-block;
+  pointer-events: none;
+}
+.ui-progressbar .ui-progressbar-value.ui-progressbar-half {
+  clip: rect(auto, auto, auto, auto);
+}
+.ui-progressbar .ui-progressbar-value.ui-progressbar-half .ui-progressbar-value-right {
+  -webkit-transform: rotate(180deg);
+}
+.ui-progressbar .ui-progressbar-value {
+  clip: rect(0, 1em, 1em, 0.5em);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left {
+  border: 0.5rem solid rgba(255, 145, 0, 1);
+  border-radius: 50%;
+  clip: rect(0, 0.5em, 1em, 0);
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right {
+  border: 0.5rem solid rgba(255, 145, 0, 1);
+  border-radius: 50%;
+  clip: rect(0, 0.5em, 1em, 0);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-bg {
+  border: 0.5rem solid rgba(79, 79, 79, 1);
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+}
+/*
+ * toggle switch
+ */
+.ui-switch {
+  width: 100%;
+  color: rgba(245, 245, 245, 1);
+}
+.ui-switch-inneroffset,
+.ui-switch-handler {
+  display: none;
+}
+.ui-switch-text {
+  margin-top: 30px;
+  margin-bottom: 40px;
+  padding: 0 30px;
+  font-size: 34px;
+  text-align: center;
+}
+.ui-switch-sub-text {
+  margin-top: 48px;
+  margin-bottom: 55px;
+  font-size: 26px;
+  text-align: center;
+  color: T161;
+}
+.ui-toggleswitch {
+  position: relative;
+  display: inline-block;
+  width: 92px;
+  height: 49px;
+}
+.ui-toggleswitch .ui-switch-input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-appearance: none;
+  display: block;
+}
+.ui-toggleswitch .ui-switch-input::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 0;
+  background-color: rgba(102, 101, 101, 1);
+  z-index: 0;
+}
+.ui-toggleswitch .ui-switch-input:active::before {
+  background-color: rgba(102, 101, 101, 1);
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button {
+  background-color: rgba(179, 179, 179, 1);
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button::before {
+  background-color: rgba(102, 101, 101, 1);
+}
+.ui-toggleswitch .ui-switch-activation,
+.ui-toggleswitch .ui-switch-button {
+  width: 59px;
+  height: 49px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 -49px;
+  background-color: rgba(245, 245, 245, 1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+.ui-toggleswitch .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-button::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 -98px;
+  background-color: rgba(133, 133, 133, 1);
+  top: 0;
+  left: 0;
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button {
+  width: 59px;
+  height: 49px;
+  -webkit-mask-position: 0 -49px;
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-transform: translate3d(33px, 0, 0);
+  -moz-transform: translate3d(33px, 0, 0);
+  -ms-transform: translate3d(33px, 0, 0);
+  -o-transform: translate3d(33px, 0, 0);
+  transform: translate3d(33px, 0, 0);
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -147px;
+  background-color: rgba(115, 191, 15, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked::before {
+  background-color: rgba(115, 191, 15, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active::before {
+  background-color: rgba(75, 102, 39, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button {
+  background-color: rgba(179, 179, 179, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button::before {
+  background-color: rgba(75, 102, 39, 1);
+}
+.ui-toggleswitch.ui-toggleswitch-large {
+  width: 207px;
+  height: 110px;
+  display: block;
+  margin: 0 auto;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button {
+  width: 132px;
+  height: 110px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 207px;
+  -webkit-mask-position: 0 -110px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-position: 0 -220px;
+  -webkit-mask-size: 207px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 207px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button {
+  width: 132px;
+  height: 110px;
+  -webkit-mask-position: 0 -110px;
+  -webkit-transform: translate3d(75px, 0, 0);
+  -moz-transform: translate3d(75px, 0, 0);
+  -ms-transform: translate3d(75px, 0, 0);
+  -o-transform: translate3d(75px, 0, 0);
+  transform: translate3d(75px, 0, 0);
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -330px;
+}
+/***********************
+Processing
+***********************/
+@-webkit-keyframes rotating {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+.ui-processing {
+  background-color: rgba(255, 145, 0, 1);
+  -webkit-mask-image: url("images/Processing/tw_progress_small_loading_bg.png");
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-animation: rotating 1s linear infinite;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin: 0 auto;
+  margin-top: 2.125rem;
+  margin-bottom: 0.875rem;
+}
+.ui-processing-text {
+  margin: 0 auto;
+  text-align: center;
+  width: 10.5rem;
+  font-size: 1.5rem;
+}
+.ui-processing.ui-processing-full-size {
+  background-color: transparent;
+  -webkit-mask-image: none;
+  -webkit-animation: none;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  margin: 0;
+}
+.ui-processing.ui-processing-full-size::after {
+  content: "";
+  background-color: rgba(255, 145, 0, 1);
+  -webkit-mask-image: url("images/Processing/tw_progress_full_loading_bg.png");
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-animation: rotating 1s linear infinite;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-btn {
+  display: block;
+  padding-top: 28.5px;
+  padding-right: 10px;
+  padding-bottom: 28.5px;
+  padding-left: 10px;
+  margin: 0px;
+  font-size: 32px;
+  line-height: 28px;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  border: 0 none;
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(74, 64, 55, 1);
+}
+a.ui-btn:active:hover,
+.ui-btn:enabled:active:hover {
+  background-color: rgba(110, 88, 67, 1);
+}
+.ui-btn:enabled:focus {
+  background-color: rgba(74, 64, 55, 1);
+}
+a.ui-btn.ui-state-disabled,
+.ui-btn:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(13, 12, 11, 1);
+  cursor: default;
+}
+.ui-btn.ui-multiline {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.ui-btn.ui-inline {
+  display: inline-block;
+}
+.ui-btn.ui-btn-icon {
+  background-position: center center;
+  height: 76px;
+  text-indent: -1000em;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  background-size: 60px 60px;
+}
+.ui-default {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(74, 64, 55, 1);
+}
+a.ui-default:active:hover,
+.ui-default:enabled:active:hover {
+  background-color: rgba(110, 88, 67, 1);
+}
+.ui-default:enabled:focus {
+  background-color: rgba(74, 64, 55, 1);
+}
+a.ui-default.ui-state-disabled,
+.ui-default:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(13, 12, 11, 1);
+  cursor: default;
+}
+.ui-color-red {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(207, 36, 2, 1);
+}
+a.ui-color-red:active:hover,
+.ui-color-red:enabled:active:hover {
+  background-color: rgba(222, 102, 78, 1);
+}
+.ui-color-red:enabled:focus {
+  background-color: rgba(207, 36, 2, 1);
+}
+a.ui-color-red.ui-state-disabled,
+.ui-color-red:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(69, 11, 1, 1);
+  cursor: default;
+}
+.ui-color-orange {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(237, 134, 0, 1);
+}
+a.ui-color-orange:active:hover,
+.ui-color-orange:enabled:active:hover {
+  background-color: rgba(242, 171, 78, 0.4);
+}
+.ui-color-orange:enabled:focus {
+  background-color: rgba(237, 134, 0, 1);
+}
+a.ui-color-orange.ui-state-disabled,
+.ui-color-orange:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(69, 39, 5, 1);
+  cursor: default;
+}
+.ui-color-green {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(97, 163, 16, 1);
+}
+a.ui-color-green:active:hover,
+.ui-color-green:enabled:active:hover {
+  background-color: rgba(146, 191, 90, 1);
+}
+.ui-color-green:enabled:focus {
+  background-color: rgba(97, 163, 16, 1);
+}
+a.ui-color-green.ui-state-disabled,
+.ui-color-green:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(50, 54, 48, 1);
+  cursor: default;
+}
+.ui-btn:focus,
+.ui-btn:active {
+  outline: none;
+}
+a.ui-btn {
+  text-decoration: none;
+  box-sizing: border-box;
+}
+button.ui-btn,
+input.ui-btn {
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 100%;
+}
+button.ui-btn.ui-inline,
+input.ui-btn.ui-inline {
+  display: inline-block;
+  width: auto;
+}
+.ui-grid-col-1 > .ui-btn {
+  border-left: solid 1px rgba(36, 27, 19, 1);
+}
+.ui-grid-col-1 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-col-2 > .ui-btn {
+  border-left: solid 1px rgba(36, 27, 19, 1);
+}
+.ui-grid-col-2 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-col-3 > .ui-btn {
+  border-left: solid 1px rgba(36, 27, 19, 1);
+}
+.ui-grid-col-3 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-row > .ui-btn {
+  margin-top: 1px;
+}
+.ui-grid-row > .ui-btn:first-child {
+  margin-top: 0px;
+}
+/***********************
+Normal Popup
+***********************/
+.ui-popup {
+  position: fixed;
+  left: 0px;
+  width: 100%;
+  margin: 0;
+  background-color: rgba(31, 24, 19, 1);
+  border: 3px solid rgba(255, 145, 0, 1);
+  display: none;
+  z-index: 1100;
+}
+.ui-popup:not(.ui-ctxpopup) {
+  bottom: 0;
+}
+.ui-popup .ui-popup-header {
+  width: 100%;
+  min-height: 68px;
+  font-size: 30px;
+  text-align: left;
+  background-color: rgba(43, 37, 31, 1);
+  color: rgba(242, 159, 51, 1);
+  padding-top: 14px;
+  padding-right: 13px;
+  padding-bottom: 14px;
+  padding-left: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ui-popup .ui-popup-content {
+  width: 100%;
+  min-height: 14rem;
+  font-size: 2.125rem;
+  text-align: left;
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(31, 24, 19, 1);
+  padding: 10px 16px 9px 16px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-popup .ui-popup-content .ui-listview,
+.ui-popup .ui-popup-content .ui-inline-listview {
+  margin: -0.5625rem -1rem -0.5625rem -1rem;
+}
+.ui-popup .ui-popup-content .ui-listview li,
+.ui-popup .ui-popup-content .ui-inline-listview li {
+  font-size: 2.125rem;
+}
+.ui-popup .ui-popup-footer {
+  width: 100%;
+  height: 83px;
+}
+.ui-popup .ui-popup-footer .ui-btn {
+  padding-top: 27px;
+  padding-bottom: 28px;
+  font-size: 30px;
+}
+.ui-popup.ui-popup-active {
+  display: block;
+}
+.ui-popup.in {
+  display: block;
+}
+.ui-popup.ui-build {
+  display: block;
+  visibility: hidden;
+}
+/***********************
+Popup Container Scroll
+***********************/
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) {
+  max-height: 100%;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-wrapper {
+  width: 100%;
+  max-height: 100%;
+  overflow: auto !important;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content {
+  height: auto !important;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header.ui-fixed {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2100;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-footer.ui-fixed {
+  position: absolute !important;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2100;
+  -webkit-transform: translate3d(0, 0, 0);
+}
+/***********************
+Option Popup
+***********************/
+.ui-popup.ui-ctxpopup {
+  background-color: transparent;
+  width: 100%;
+  border: 0 none;
+  border-radius: 0;
+  overflow: visible;
+}
+div.ui-popup.ui-ctxpopup.ui-popup-content-size {
+  width: auto;
+  padding: 0 0 0 0;
+}
+div.ui-popup.ui-ctxpopup.ui-popup-content-size .ui-popup-content {
+  width: auto;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content {
+  background-color: rgba(245, 245, 245, 1);
+  border: 1px solid rgba(117, 117, 117, 0.9);
+  color: #333;
+  min-height: initial;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li {
+  color: rgba(8, 8, 8, 1);
+  border-bottom: 1px solid rgba(204, 204, 204, 1);
+  min-height: 90px;
+  padding: 21px 8px 20px 16px;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a {
+  color: rgba(8, 8, 8, 1);
+  margin: -21px -16px;
+  padding: 21px 16px;
+  min-height: 48px;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(217, 130, 17, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li:last-child {
+  border: none;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon {
+  position: relative;
+  padding-left: 4.25rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon a {
+  margin-left: -4.25rem;
+  padding-left: 4.25rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0.375rem;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-top: -1.75rem;
+  background-color: rgba(107, 107, 107, 0.9);
+  -webkit-mask-size: 3.5rem 3.5rem;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  mask-size: 3.5rem 3.5rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview a.ui-list-icon:active::before {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview {
+  height: 4.3125rem;
+  overflow: hidden;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li {
+  float: left;
+  height: 4.1875rem;
+  line-height: 4.1875rem;
+  border-right: 1px solid rgba(8, 8, 8, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li:last-child {
+  border: none;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0rem 0.5rem;
+  color: rgba(8, 8, 8, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(217, 130, 17, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext {
+  width: 3.6875rem;
+  height: 4.1875rem;
+  text-indent: -1000em;
+  overflow: hidden;
+  position: relative;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2.6875rem;
+  height: 2.6875rem;
+  margin-top: -1.34375rem;
+  margin-left: -1.34375rem;
+  background-color: rgba(8, 8, 8, 1);
+  -webkit-mask-size: 2.6875rem 2.6875rem;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: 2.6875rem 2.6875rem;
+  mask-repeat: no-repeat;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview a.ui-list-icon-notext:active::before {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-popup.ui-ctxpopup .ui-arrow {
+  width: 36px;
+  height: 15px;
+  overflow: hidden;
+  position: absolute;
+  display: none;
+  animation-duration: 0;
+  -webkit-animation-duration: 0;
+}
+.ui-popup.ui-ctxpopup .ui-arrow span {
+  width: 20px;
+  height: 20px;
+  background-color: rgba(245, 245, 245, 1);
+  border: 1px solid rgba(117, 117, 117, 0.9);
+  position: absolute;
+  top: 6px;
+  left: 8px;
+  -webkit-transform: rotate(55deg) skew(24deg);
+  transform: rotate(55deg) skew(24deg);
+  animation-duration: 0;
+  -webkit-animation-duration: 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b {
+  padding: 20px 20px 0 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t {
+  padding: 0 20px 20px 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r {
+  padding: 20px 0 20px 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l {
+  padding: 20px 20px 20px 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow {
+  display: block;
+  bottom: -0.875rem;
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow {
+  display: block;
+  top: -14px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow {
+  display: block;
+  right: -25px;
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow {
+  display: block;
+  left: -25px;
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+/****************************************
+Popup Toast
+****************************************/
+.ui-popup.ui-popup-toast {
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  font-size: 1.5rem;
+  border: 3px solid rgba(255, 145, 0, 1);
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+  position: absolute;
+  bottom: 0;
+  top: auto;
+  height: auto;
+}
+.ui-popup.ui-popup-toast .ui-popup-content {
+  min-height: initial;
+  padding: 0.6875rem 2.625rem 0.75rem 2.625rem;
+  background-color: rgba(31, 24, 19, 1);
+}
+/****************************************
+Popup Overlay
+****************************************/
+.ui-popup-overlay {
+  position: fixed;
+  display: none;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: rgba(8, 8, 8, 0.7);
+}
+.ui-popup-overlay.in {
+  display: block;
+}
+/****************************************
+Popup Transition
+****************************************/
+.ui-popup.slideup.in {
+  -webkit-animation-name: popupslideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popupslideinfrombottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.slideup.out {
+  -webkit-animation-name: popupslideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popupslideouttobottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes popupslideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes popupslideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@-webkit-keyframes popupslideouttobottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@keyframes popupslideouttobottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+.ui-popup.pop.in {
+  -webkit-animation-name: popuppopin;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popuppopin;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.pop.out {
+  -webkit-animation-name: popuppopout;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popuppopout;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes popuppopin {
+  from {
+    transform: scale3d(0, 0, 1);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+@-webkit-keyframes popuppopout {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(0, 0, 1);
+  }
+}
+/****************************************
+Popup Overlay Transition
+****************************************/
+.ui-popup-overlay.slideup.in,
+.ui-popup-overlay.pop.in {
+  -webkit-animation-name: fadein;
+  -webkit-animation-duration: 250ms;
+  animation-name: fadein;
+  animation-duration: 250ms;
+}
+.ui-popup-overlay.slideup.out,
+.ui-popup-overlay.pop.out {
+  -webkit-animation-name: fadeout;
+  -webkit-animation-duration: 250ms;
+  animation-name: fadeout;
+  animation-duration: 250ms;
+}
+/****************************************
+Option Popup Transition
+****************************************/
+.ui-popup.ui-popup-arrow-t.slideup.in,
+.ui-popup.ui-popup-arrow-l.slideup.in,
+.ui-popup.ui-popup-arrow-r.slideup.in {
+  -webkit-animation-name: ctxpopupslideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideinfrombottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-t.slideup.out,
+.ui-popup.ui-popup-arrow-l.slideup.out,
+.ui-popup.ui-popup-arrow-r.slideup.out {
+  -webkit-animation-name: ctxpopupslideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideouttobottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-b.slideup.in {
+  -webkit-animation-name: ctxpopupslideinfromtop;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideinfromtop;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-b.slideup.out {
+  -webkit-animation-name: ctxpopupslideouttotop;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideouttotop;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes ctxpopupslideinfrombottom {
+  from {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@keyframes ctxpopupslideinfrombottom {
+  from {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideouttobottom {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+}
+@keyframes ctxpopupslideouttobottom {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideinfromtop {
+  from {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@keyframes ctxpopupslideinfromtop {
+  from {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideouttotop {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+}
+@keyframes ctxpopupslideouttotop {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+}
+/************************
+Listview
+*************************/
+.ui-listview li {
+  font-size: 2.5rem;
+  line-height: 3rem;
+  width: 100%;
+  min-height: 6.25rem;
+  padding: 1.3125rem 0.5rem 1.25rem 1rem;
+  border-bottom: 1px solid rgba(46, 46, 46, 1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview li > * {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-user-select: none;
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview li > a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: -1.3125rem -1rem;
+  padding: 1.625rem 1rem;
+  -o-box-sizing: content-box;
+  -ms-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.ui-listview li.ui-li-active {
+  background-color: rgba(89, 74, 59, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview .li-divider {
+  height: 1.875rem;
+  min-height: 1.875rem;
+  line-height: 1.875rem;
+  padding: 0 0.5rem 0 1rem;
+  background-color: rgba(79, 74, 70, 1);
+  color: rgba(245, 245, 245, 1);
+  font-size: 1.5rem;
+}
+.ui-listview .ui-li-sub-text {
+  color: rgba(143, 110, 79, 1);
+  font-size: 1.75rem;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-text {
+  width: calc(100% -  4.8125rem);
+  height: 100%;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-text::after {
+  content: "";
+  position: absolute;
+  height: 3.5rem;
+  width: 0.125rem;
+  background-color: rgba(245, 245, 245, 1);
+  right: 4.25rem;
+  top: 20%;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-divider {
+  display: none;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete,
+.ui-listview .ui-li-has-action-icon .ui-action-setting,
+.ui-listview .ui-li-has-action-icon .ui-action-add {
+  position: absolute;
+  height: 100%;
+  width: 4.5rem;
+  right: 0;
+  top: 0;
+  -webkit-mask-size: 3.5rem 3.5rem;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center center;
+  padding: 0;
+  margin: 0;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete {
+  -webkit-mask-image: url(images/listview/tw_list_delete_holo_dark.png);
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-setting {
+  -webkit-mask-image: url(images/listview/tw_list_setting_holo_dark.png);
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-add {
+  -webkit-mask-image: url(images/listview/tw_list_add_holo_dark.png);
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon.ui-li-active {
+  background-color: transparent;
+}
+.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active {
+  background-color: rgba(89, 74, 59, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete:active,
+.ui-listview .ui-li-has-action-icon .ui-action-setting:active,
+.ui-listview .ui-li-has-action-icon .ui-action-add:active {
+  background-color: rgba(89, 74, 59, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-datetime-widget {
+  position: relative;
+  height: 100%;
+}
+.ui-datetime {
+  text-align: center;
+  padding-top: 56px;
+}
+.ui-time-picker .ui-datetime {
+  padding-top: 53px;
+}
+.ui-datetime:only-child {
+  padding-top: 92px;
+}
+.ui-time-picker .ui-datetime:only-child {
+  padding-top: 89px;
+}
+.ui-datetime input[type='date'],
+.ui-datetime input[type='datetime'],
+.ui-datetime input[type='time'] {
+  display: none;
+}
+.ui-datefield {
+  height: 52px;
+  display: inline-block;
+  vertical-align: top;
+}
+.ui-datefield > .ui-btn {
+  float: left;
+  height: 52px;
+  padding: 0;
+  line-height: 52px;
+  font-size: 42px;
+  font-weight: 600;
+  border-radius: 2px;
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.ui-datefield .ui-datefield-separator {
+  display: block;
+  height: 100%;
+  float: left;
+  width: 18px;
+  background: transparent url('images/Datetimepicker/tw_timepicker_num_dot.png');
+}
+.ui-datefield > .ui-btn:enabled:focus {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.ui-datefield > .ui-btn:disabled {
+  color: #404040;
+}
+.ui-datafield > .ui-btn.ui-selected,
+.ui-datefield > .ui-btn:enabled:active,
+.ui-datefield > .ui-btn.ui-state-active:enabled,
+.ui-datefield > .ui-btn.ui-selected:enabled {
+  background-color: #ff9000;
+  color: #000;
+}
+/* -- for datepicker -- */
+.ui-date-picker .ui-datefield > .ui-btn:first-child {
+  margin-right: 2px;
+}
+.ui-date-picker .ui-datefield > .ui-btn:last-child {
+  margin-left: 2px;
+}
+.ui-date-picker .ui-datefield-year {
+  width: 114px;
+}
+.ui-date-picker .ui-datefield-month {
+  width: 102px;
+}
+.ui-date-picker .ui-datefield-day {
+  width: 68px;
+}
+/* -- end (for datepicker) -- */
+/* -- for timepicker -- */
+.ui-time-picker .ui-datefield-hour {
+  width: 74px;
+}
+.ui-time-picker .ui-datefield-min {
+  width: 74px;
+}
+.ui-time-picker .ui-datefield-period {
+  width: 84px;
+  margin-left: 10px;
+}
+.ui-time-picker .ui-datefield {
+  height: 58px;
+}
+.ui-time-picker .ui-datefield > .ui-btn {
+  height: 58px;
+  line-height: 58px;
+  font-size: 50px;
+}
+.ui-time-picker .ui-datefield > .ui-btn.ui-datefield-period {
+  font-size: 48px;
+}
+/* -- (end) for timepicker -- */
+.ui-datetime-wheel {
+  height: 68px;
+  margin: 0 10px;
+  margin-top: 30px;
+}
+.ui-time-picker .ui-datetime-wheel {
+  margin-top: 27px;
+}
+.ui-datetime-wheel .ui-btn {
+  width: 68px;
+  height: 68px;
+  float: left;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus {
+  float: right;
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-wheel {
+  display: block;
+  margin-left: 68px;
+  margin-right: 68px;
+  height: 68px;
+  padding: 10px 0;
+  background: url('images/Datetimepicker/tw_timepicker_wheel_01.png') center center no-repeat;
+}
+.ui-datetime-btns {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 76px;
+  border-top: 2px solid #262626;
+}
+/* Button separator */
+.ui-datetime-btns::before {
+  content: "";
+  height: 34px;
+  width: 1px;
+  background-color: #262626;
+  position: absolute;
+  left: 160px;
+  top: 20px;
+}
+.ui-datetime-btns .ui-btn {
+  height: 100%;
+  position: relative;
+  background-color: transparent;
+}
+.ui-datetime-btns .ui-btn:enabled:active,
+.ui-datetime-btns .ui-btn:enabled:focus,
+.ui-datetime-btns .ui-btn:enabled:active:focus {
+  background-color: transparent;
+}
+.ui-datetime-btns .ui-btn-left {
+  width: 160px;
+  float: left;
+  background: url('images/Datetimepicker/tw_timepicker_left_softbtn.png') center center no-repeat;
+}
+.ui-datetime-btns .ui-btn-right {
+  width: 159px;
+  float: right;
+  background: url('images/Datetimepicker/tw_timepicker_right_softbtn.png') center center no-repeat;
+}
+.ui-datetime-btns .ui-btn:disabled,
+.ui-datetime-btns .ui-btn.ui-state-disabled {
+  opacity: 0.2;
+}
+/* ---------------- */
+.ui-datetime-periods {
+  height: 102px;
+  margin-top: 7px;
+  display: inline-block;
+}
+.ui-datetime-periods .ui-btn,
+.ui-datetime-periods .ui-datetime-periods-separator {
+  height: 100%;
+  float: left;
+  padding: 0;
+  background: transparent;
+}
+.ui-datetime-periods .ui-btn {
+  width: 102px;
+  font-size: 34px;
+  line-height: 102px;
+}
+.ui-datetime-periods .ui-btn:enabled:focus {
+  background: transparent;
+}
+.ui-datetime-periods .ui-btn:enabled:active,
+.ui-datetime-periods .ui-btn:enabled:active:focus,
+.ui-datetime-periods .ui-btn.ui-selected:enabled:active,
+.ui-datetime-periods .ui-btn.ui-state-active:enabled:active {
+  color: inherit;
+  text-decoration: none;
+  background: url('images/Datetimepicker/tw_timepicker_time_bg.png') center center no-repeat;
+}
+.ui-datetime-periods .ui-btn.ui-selected:enabled,
+.ui-datetime-periods .ui-btn.ui-state-active:enabled {
+  color: #ff9000;
+  text-decoration: underline;
+}
+.ui-datetime-periods .ui-datetime-periods-separator {
+  width: 24px;
+  background: url('images/Datetimepicker/tw_timepicker_num_dot_01.png') center center no-repeat;
+}
+.ui-datetime-wheel.ui-hidden,
+.ui-datetime-periods.ui-hidden {
+  display: none;
+}
+/* Transitions originally inspired by those from jQtouch, nice work, folks */
+.ui-viewport-transitioning,
+.ui-viewport-transitioning .ui-page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.ui-pre-in {
+  z-index: 100;
+  visibility: visible;
+  display: block;
+  top: 0px;
+  left: 0px;
+}
+.in {
+  -webkit-animation-timing-function: ease-out;
+  -webkit-animation-duration: 350ms;
+  -moz-animation-timing-function: ease-out;
+  -moz-animation-duration: 350ms;
+  animation-timing-function: ease-out;
+  animation-duration: 350ms;
+}
+.out {
+  -webkit-animation-timing-function: ease-in;
+  -webkit-animation-duration: 225ms;
+  -moz-animation-timing-function: ease-in;
+  -moz-animation-duration: 225ms;
+  animation-timing-function: ease-in;
+  animation-duration: 225ms;
+}
+@-webkit-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-moz-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@-moz-keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.fade.out {
+  opacity: 0;
+  -webkit-animation-duration: 125ms;
+  -webkit-animation-name: fadeout;
+  -moz-animation-duration: 125ms;
+  -moz-animation-name: fadeout;
+  animation-duration: 125ms;
+  animation-name: fadeout;
+}
+.fade.in {
+  opacity: 1;
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: fadein;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: fadein;
+  animation-duration: 225ms;
+  animation-name: fadein;
+}
+/* slide up */
+.slideup.out {
+  -webkit-animation-name: fadeout;
+  -webkit-animation-duration: 250ms;
+  -moz-animation-name: fadeout;
+  -moz-animation-duration: 250ms;
+  animation-name: fadeout;
+  animation-duration: 250ms;
+}
+.slideup.in {
+  -webkit-transform: translateY(0);
+  -webkit-animation-name: slideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -moz-transform: translateY(0);
+  -moz-animation-name: slideinfrombottom;
+  -moz-animation-duration: 250ms;
+  transform: translateY(0);
+  animation-name: slideinfrombottom;
+  animation-duration: 250ms;
+}
+.slideup.in.reverse {
+  -webkit-animation-name: fadein;
+  -webkit-animation-duration: 250ms;
+  -moz-animation-name: fadein;
+  -moz-animation-duration: 250ms;
+  animation-name: fadein;
+  animation-duration: 250ms;
+}
+.slideup.out.reverse {
+  z-index: 101;
+  -webkit-transform: translateY(100%);
+  -webkit-animation-name: slideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -moz-transform: translateY(100%);
+  -moz-animation-name: slideouttobottom;
+  -moz-animation-duration: 250ms;
+  transform: translateY(100%);
+  animation-name: slideouttobottom;
+  animation-duration: 250ms;
+}
+@-webkit-keyframes slideinfrombottom {
+  from {
+    -webkit-transform: translateY(100%);
+  }
+  to {
+    -webkit-transform: translateY(0);
+  }
+}
+@-moz-keyframes slideinfrombottom {
+  from {
+    -moz-transform: translateY(100%);
+  }
+  to {
+    -moz-transform: translateY(0);
+  }
+}
+@keyframes slideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes slideouttobottom {
+  from {
+    -webkit-transform: translateY(0);
+  }
+  to {
+    -webkit-transform: translateY(100%);
+  }
+}
+@-moz-keyframes slideouttobottom {
+  from {
+    -moz-transform: translateY(0);
+  }
+  to {
+    -moz-transform: translateY(100%);
+  }
+}
+@keyframes slideouttobottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@-webkit-keyframes popnone {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes popin {
+  from {
+    transform: scale3d(0, 0, 1);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+@-webkit-keyframes popout {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(0, 0, 1);
+  }
+}
+.pop.out.reverse {
+  z-index: 200;
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popout;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popout;
+  animation-duration: 225ms;
+  animation-name: popout;
+}
+.pop.in.reverse {
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popnone;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popnone;
+  animation-duration: 225ms;
+  animation-name: popnone;
+}
+.pop.in {
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popin;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popin;
+  animation-duration: 225ms;
+  animation-name: popin;
+}
+.ui-indexscrollbar {
+  display: block;
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 2.8125rem;
+  height: 100%;
+  padding-left: 0.125rem;
+  background-color: rgba(41, 41, 41, 1);
+  z-index: 10;
+  overflow: visible;
+  -webkit-user-select: none;
+  cursor: pointer;
+}
+.ui-indexscrollbar ul {
+  position: absolute;
+  width: 100%;
+  top: 0;
+}
+.ui-indexscrollbar ul li {
+  color: rgba(89, 89, 89, 1);
+  display: block;
+  width: 100%;
+  text-align: center;
+  font-size: 1.5rem;
+  height: 2.25rem;
+}
+.ui-indexscrollbar ul li.ui-state-selected {
+  background-color: rgba(51, 51, 51, 1);
+  color: rgba(255, 145, 0, 1);
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary {
+  position: relative;
+  height: auto;
+  top: 0;
+  right: -2.5rem;
+  width: 100%;
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li {
+  background-color: rgba(51, 51, 51, 1);
+  color: rgba(89, 89, 89, 1);
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li.ui-state-selected {
+  background-color: rgba(51, 51, 51, 1);
+  color: rgba(255, 145, 0, 1);
+}
+.ui-indexscrollbar + .ui-listview li {
+  padding-right: 2.5rem;
+}
+.ui-indexscrollbar-indicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  display: none;
+}
+.ui-indexscrollbar-indicator > span {
+  width: 8.75rem;
+  height: 5.4375rem;
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 50%;
+  margin-left: -5.625rem;
+  margin-top: -2.6875rem;
+  line-height: 5.4375rem;
+  font-size: 4.375rem;
+  text-align: center;
+  background-color: rgba(89, 74, 59, 0.95);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-indexscrollbar-indicator > span > span.ui-selected {
+  color: rgba(255, 145, 0, 1);
+}
+.ui-circularindexscrollbar {
+  position: fixed;
+  top: 0;
+  left: -100%;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+}
+.ui-circularindexscrollbar.ui-circularindexscrollbar-show .ui-circularindexscrollbar-indexbar {
+  pointer-events: auto;
+  -webkit-transform: scale(1, 1);
+  -webkit-transition-duration: 500ms;
+  -webkit-transition-timing-function: linear;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: -webkit-radial-gradient(center, ellipse cover, transparent 59%, rgba(41, 41, 41, 1) 59%);
+  overflow: hidden;
+  -webkit-transform: scale(1.2, 1.2);
+  -webkit-transition-duration: 500ms;
+  -webkit-transition-timing-function: linear;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  box-sizing: border-box;
+  width: 50%;
+  height: 50%;
+  margin-top: -50%;
+  margin-left: -50%;
+  -webkit-transform-origin: 100% 100% 0;
+  overflow: hidden;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index span {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin-left: 50%;
+  padding-top: 0.3125rem;
+  text-align: center;
+  color: rgba(89, 89, 89, 1);
+  -webkit-transform-origin: 50% 100% 0;
+  font-size: 1.25rem;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span {
+  color: rgba(255, 145, 0, 1);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator {
+  position: absolute;
+  top: 50%;
+  width: 8.9375rem;
+  height: 8.9375rem;
+  line-height: 8.9375rem;
+  border-radius: 50%;
+  background-color: rgba(89, 74, 59, 0.95);
+  -webkit-mask-image: url("images/Indicator/b_fast_scroll_rollover_bg.png");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 8.9375rem;
+  margin-top: -4.4375rem;
+  margin-left: 100%;
+  -webkit-transform: translate3d(-6.703125rem, 0, 0);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text {
+  text-align: center;
+  font-size: 4.375rem;
+  color: rgba(255, 145, 0, 1);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-minimize .ui-circularindexscrollbar-indicator-text {
+  padding-right: 0.4375rem;
+  text-align: right;
+  font-size: 2rem;
+}
+/***************************************************************************
+                   Scrollbar Style
+***************************************************************************/
+.ui-scrollbar-bar-type {
+  position: absolute;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-horizontal {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 8px;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-vertical {
+  right: 0;
+  top: 0;
+  width: 0.5rem;
+  height: 100%;
+}
+.ui-scrollbar-bar-type .ui-scrollbar-indicator {
+  position: absolute;
+  background-color: rgba(110, 110, 110, 1);
+}
+.ui-scrollbar-bar-type.ui-scrollbar-horizontal .ui-scrollbar-indicator {
+  height: 0.25rem;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-vertical .ui-scrollbar-indicator {
+  width: 0.25rem;
+}
+/***************************************************************************
+                   Scrollbar Bouncing Effect
+***************************************************************************/
+.ui-scrollbar-bouncing-effect {
+  display: none;
+  position: absolute;
+  background-repeat: no-repeat;
+  -webkit-animation-duration: 0.47s;
+  -moz-animation-duration: 0.47s;
+  -ms-animation-duration: 0.47s;
+  -o-animation-duration: 0.47s;
+  -webkit-animation-timing-function: step-start;
+  -moz-animation-timing-function: step-start;
+  -ms-animation-timing-function: step-start;
+  -o-animation-timing-function: step-start;
+  animation-timing-function: step-start;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-fill-mode: forwards;
+  -ms-animation-fill-mode: forwards;
+  -o-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  background-color: rgba(255, 145, 0, 0.4);
+}
+.ui-scrollbar-bouncing-effect::before {
+  content: "";
+  position: absolute;
+  background-color: rgba(255, 145, 0, 1);
+}
+.ui-scrollbar-bouncing-effect.ui-top,
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  width: 100%;
+  height: 3.125rem;
+  left: 0;
+  -webkit-mask-size: 100% 3.125rem;
+}
+.ui-scrollbar-bouncing-effect.ui-top::before,
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  width: 100%;
+  height: 0.125rem;
+  -webkit-mask-size: 100% 0.125rem;
+}
+.ui-scrollbar-bouncing-effect.ui-left,
+.ui-scrollbar-bouncing-effect.ui-right {
+  width: 3.125rem;
+  height: 100%;
+  top: 0;
+  -webkit-mask-size: 3.125rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-left::before,
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  width: 0.0625rem;
+  height: 100%;
+  -webkit-mask-size: 0.0625rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-top {
+  top: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_top_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-top::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_top_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  bottom: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_bottom_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_bottom_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left {
+  left: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_left_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_left_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right {
+  right: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_right_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_right_edge.png");
+}
+@-webkit-keyframes ui-bouncing-show {
+  0% {
+    opacity: 0;
+  }
+  10% {
+    opacity: 0.1;
+  }
+  20% {
+    opacity: 0.2;
+  }
+  30% {
+    opacity: 0.3;
+  }
+  40% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  60% {
+    opacity: 0.6;
+  }
+  70% {
+    opacity: 0.7;
+  }
+  80% {
+    opacity: 0.8;
+  }
+  90% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes ui-bouncing-hide {
+  0% {
+    opacity: 1;
+  }
+  10% {
+    opacity: 0.9;
+  }
+  20% {
+    opacity: 0.8;
+  }
+  30% {
+    opacity: 0.7;
+  }
+  40% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  60% {
+    opacity: 0.4;
+  }
+  70% {
+    opacity: 0.3;
+  }
+  80% {
+    opacity: 0.2;
+  }
+  90% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.ui-scrollbar-bouncing-effect.ui-show {
+  display: block;
+  -webkit-animation-name: ui-bouncing-show;
+}
+.ui-scrollbar-bouncing-effect.ui-hide {
+  display: block;
+  -webkit-animation-name: ui-bouncing-hide;
+}
+.ui-swipelist {
+  position: absolute;
+  top: 0;
+}
+.ui-swipelist-left,
+.ui-swipelist-right {
+  position: absolute;
+  display: none;
+}
+.ui-swipelist-left {
+  background: -webkit-linear-gradient(left, rgba(98, 168, 24, 1) 0%, rgba(36, 27, 19, 1) 0%);
+}
+.ui-swipelist-right {
+  background: -webkit-linear-gradient(right, rgba(235, 164, 23, 1) 0%, rgba(36, 27, 19, 1) 0%);
+}
+.ui-swipelist-icon,
+.ui-swipelist-text {
+  position: absolute;
+}
+.ui-swipelist-left .ui-swipelist-icon {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  width: 20%;
+  height: 100%;
+  margin-left: 2%;
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-mask-image: url("images/Swipelist/b_logs_icon_body_btn_call_nor.png");
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-swipelist-left .ui-swipelist-text {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  margin-left: 40%;
+  height: 100%;
+  line-height: 90px;
+}
+.ui-swipelist-right .ui-swipelist-icon {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  width: 20%;
+  height: 100%;
+  margin-left: 80%;
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-mask-image: url("images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png");
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-swipelist-right .ui-swipelist-text {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  margin-left: 20%;
+  height: 100%;
+  line-height: 90px;
+}
+/***************************************************************************
+                   Tab Style
+***************************************************************************/
+.ui-tab-indicator {
+  position: relative;
+  height: 6px;
+}
+.ui-tab-indicator .ui-tab-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  height: 6px;
+  background-color: rgba(64, 58, 53, 1);
+}
+.ui-tab-indicator .ui-tab-item.ui-tab-active {
+  background-color: rgba(250, 145, 7, 1);
+}
+input[type="checkbox"]:not(.ui-switch-input),
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  height: 56px;
+  width: 56px;
+  font-size: 32px;
+  -webkit-appearance: none;
+  position: relative;
+}
+input[type="radio"] {
+  background-color: rgba(18, 9, 0, 1);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+}
+input[type="radio"]::after {
+  content: "";
+  background-color: rgba(245, 245, 245, 0.3);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_line.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:checked::before {
+  content: "";
+  background-color: rgba(115, 191, 15, 1);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:active {
+  background-color: rgba(79, 36, 0, 0.4);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+}
+input[type="radio"]:active::after {
+  content: "";
+  background-color: rgba(245, 245, 245, 0.3);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_line.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:active:checked::before {
+  content: "";
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input) {
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(18, 9, 0, 1);
+}
+input[type="checkbox"]:not(.ui-switch-input)::after {
+  content: "";
+  background-color: rgba(245, 245, 245, 0.3);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):checked::before {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(115, 191, 15, 1);
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):active {
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(79, 36, 0, 0.4);
+}
+input[type="checkbox"]:not(.ui-switch-input):active::after {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(245, 245, 245, 0.3);
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):active:checked::before {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(245, 245, 245, 1);
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+.ui-marquee {
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  -webkit-user-select: none;
+}
+.ui-marquee.ui-marquee-gradient {
+  text-overflow: clip;
+}
+.ui-marquee.ui-marquee-gradient::after {
+  content: "";
+  width: 6.875rem;
+  height: 100%;
+  background: -webkit-linear-gradient(left, transparent 0%, rgba(36, 27, 19, 1) 100%);
+  position: absolute;
+  right: 0;
+}
+.ui-marquee.ui-marquee-ellipsis .ui-marquee-content {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ui-marquee-content {
+  overflow: visible;
+  display: inline-block;
+}
+.ui-marquee-anim-running {
+  -webkit-animation-play-state: running;
+}
+.ui-marquee-anim-stopped {
+  -webkit-animation-play-state: paused;
+}
+.ui-page-indicator {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translate3d(-50%, 0, 0);
+  -moz-transform: translate3d(-50%, 0, 0);
+  -ms-transform: translate3d(-50%, 0, 0);
+  -o-transform: translate3d(-50%, 0, 0);
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-page-indicator-item {
+  position: relative;
+  display: inline-block;
+  width: 0.8125rem;
+  height: 0.8125rem;
+  -webkit-mask-image: -webkit-radial-gradient(#000000 0.25rem, transparent 0.375rem);
+  background-color: rgba(245, 245, 245, 0.4);
+  margin-right: 0.5625rem;
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-page-indicator-item:last-child {
+  margin-right: 0;
+}
+.ui-page-indicator-item.ui-page-indicator-active {
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-snap-listview li {
+  -webkit-scroll-snap-destination: 50% 50%;
+}
+.ui-drawer {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  background-color: rgba(36, 27, 19, 1);
+  z-index: 1201;
+  box-sizing: border-box;
+}
+.ui-drawer.ui-drawer-close {
+  overflow: hidden;
+}
+.ui-drawer.ui-drawer-open {
+  overflow: auto;
+}
+.ui-drawer-overlay {
+  top: 0;
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 1200;
+}
+/***************************************************************************
+				   Footer Style (New style)
+***************************************************************************/
+.ui-page .ui-expandable-header {
+  height: 60px;
+}
+.ui-page .ui-expandable-header.ui-header-expand {
+  height: 80px;
+}
+.ui-page .ui-expandable-header.ui-header-expand .ui-title {
+  padding-top: 0;
+  transform: translate3d(0, 20px, 0);
+}
+.ui-section-changer {
+  height: 100%;
+}
diff --git a/lib/tau/wearable/theme/brown/tau.min.css b/lib/tau/wearable/theme/brown/tau.min.css
new file mode 100644
index 0000000..d7556a1
--- /dev/null
+++ b/lib/tau/wearable/theme/brown/tau.min.css
@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+*{outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:Tizen,Samsung Sans,Helvetica}body{margin:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button[disabled],input[disabled]{cursor:default}input[type=time],input[type=date]{color:#000}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.screen-hidden{visibility:hidden;position:absolute;top:-10000em;left:-10000em}button,input{outline:0;cursor:pointer}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}a{text-decoration:none!important;color:rgba(245,245,245,1)}ul,li{margin:0;padding:0;list-style-type:none}img{margin:0;padding:0}html{-webkit-tap-highlight-color:rgba(0,0,0,0)}body{height:100%;font-size:2.125rem;font-family:Tizen,Samsung Sans,Helvetica;background:rgba(36,27,19,1);color:rgba(245,245,245,1)}.ui-page{width:100%;height:100%;overflow:hidden;display:none;position:absolute;top:0;left:0;background:rgba(36,27,19,1);-webkit-tap-highlight-color:rgba(0,0,0,0)}.ui-page.ui-page-active{display:block}.ui-page.ui-page-build{display:block;visibility:hidden}.scrolling-mode-touch{-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-content{width:auto;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-header{position:relative;width:100%;height:60px;line-height:60px;background-color:rgba(51,40,30,1)}.ui-header .ui-title{color:rgba(255,145,0,1);font-size:32px;font-weight:700;white-space:nowrap;overflow:hidden;margin:0;padding-left:16px;padding-right:16px;-webkit-mask-image:-webkit-linear-gradient(left,#000 80%,rgba(0,0,0,0) 95%)}.ui-header .ui-title.ui-icon{padding-left:60px;background-position:16px 14px;background-size:34px 34px;background-repeat:no-repeat}.ui-header.ui-has-more .ui-title{padding-right:78px;-webkit-mask-image:-webkit-linear-gradient(left,#000 70%,rgba(0,0,0,0) 75%)}.ui-header button.ui-more,.ui-header input.ui-more{border:0 none;padding:0}.ui-header .ui-more-disable{cursor:default;background-color:transparent}.ui-header .ui-more{display:block;position:absolute;top:0;right:0;width:68px;height:100%;overflow:hidden;text-indent:-1000em;background-position:center center;background-color:transparent;cursor:pointer}.ui-header .ui-more:active{background-color:rgba(110,88,67,1)!important}.ui-header .ui-more.ui-icon-detail{background-color:rgba(255,145,0,1);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-detail[disabled=disabled]{cursor:default;background-color:transparent;background-color:rgba(255,145,0,.2);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-overflow{background-color:rgba(255,145,0,1);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position-x:.9375rem;-webkit-mask-position-y:50%;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-overflow[disabled=disabled]{cursor:default;background-color:transparent;background-color:rgba(255,145,0,.2);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-selectall{background-color:rgba(255,145,0,1);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-selectall[disabled=disabled]{cursor:default;background-color:transparent;background-color:rgba(255,145,0,.2);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-footer{width:100%;height:85px;position:absolute;bottom:0;left:0}.ui-page.ui-scroll-on{overflow:auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-page.ui-scroll-on .ui-content{height:auto!important}.ui-page.ui-scroll-on .ui-footer{position:relative}.ui-header.ui-fixed{position:fixed!important;top:0;left:0;width:100%;z-index:1000}.ui-footer.ui-fixed{position:fixed!important;bottom:0;left:0;width:100%;z-index:1000;-webkit-transform:translate3d(0,0,0)}.ui-grid-col>*{float:left}.ui-page .ui-grid-col-1>*{float:left}.ui-page .ui-grid-col-1>*{width:100%}.ui-page .ui-grid-col-2>*{float:left}.ui-page .ui-grid-col-2>*{width:50%}.ui-page .ui-grid-col-3>*{float:left}.ui-page .ui-grid-col-3>*{width:33.333333333333336%}.ui-grid-row>*{display:block}@-webkit-keyframes indeterminate{0%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(153,87,0,1)}25%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(153,87,0,1)}50%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(153,87,0,1)}75%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(153,87,0,1)}100%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(153,87,0,1)}}progress{position:relative;padding-left:1rem;padding-right:1rem;margin-top:.875rem;margin-bottom:.875rem;color:rgba(245,245,245,1);width:100%;height:.375rem;-webkit-appearance:none;border:0}progress::-webkit-progress-bar{position:relative;background-color:rgba(79,79,79,1);border-radius:.125rem;overflow:hidden}progress::-webkit-progress-value{background-color:rgba(255,145,0,1);height:.375rem;border-radius:.125rem;overflow:hidden}progress.ui-progress-indeterminate::-webkit-progress-bar{background-color:rgba(255,145,0,1)}progress.ui-progress-indeterminate::-webkit-progress-value{background-size:100% 100%;-webkit-animation:indeterminate 150ms infinite}.ui-progress-proportion{display:inline-block;float:left;font-size:20px;padding-left:1rem;padding-right:1rem;margin-top:-.625rem}.ui-progress-ratio{display:inline-block;float:right;font-size:20px;padding-left:1rem;padding-right:1rem;margin-top:-.625rem}.ui-circle-progress{display:none}.ui-progressbar.ui-progressbar-full{position:fixed;top:0;left:0;width:100%;height:100%}.ui-progressbar.ui-progressbar-large{width:6.25rem;height:6.25rem}.ui-progressbar.ui-progressbar-medium{width:5.25rem;height:5.25rem}.ui-progressbar.ui-progressbar-small{width:3.5rem;height:3.5rem}.ui-progressbar{position:relative;display:inline-block;pointer-events:none}.ui-progressbar .ui-progressbar-value.ui-progressbar-half{clip:rect(auto,auto,auto,auto)}.ui-progressbar .ui-progressbar-value.ui-progressbar-half .ui-progressbar-value-right{-webkit-transform:rotate(180deg)}.ui-progressbar .ui-progressbar-value{clip:rect(0,1em,1em,.5em);width:100%;height:100%;position:absolute}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left{border:.5rem solid rgba(255,145,0,1);border-radius:50%;clip:rect(0,.5em,1em,0);height:100%;width:100%;position:absolute}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right{border:.5rem solid rgba(255,145,0,1);border-radius:50%;clip:rect(0,.5em,1em,0);width:100%;height:100%;position:absolute}.ui-progressbar .ui-progressbar-bg{border:.5rem solid rgba(79,79,79,1);border-radius:50%;width:100%;height:100%}.ui-switch{width:100%;color:rgba(245,245,245,1)}.ui-switch-inneroffset,.ui-switch-handler{display:none}.ui-switch-text{margin-top:30px;margin-bottom:40px;padding:0 30px;font-size:34px;text-align:center}.ui-switch-sub-text{margin-top:48px;margin-bottom:55px;font-size:26px;text-align:center;color:T161}.ui-toggleswitch{position:relative;display:inline-block;width:92px;height:49px}.ui-toggleswitch .ui-switch-input{position:absolute;width:100%;height:100%;-webkit-appearance:none;display:block}.ui-toggleswitch .ui-switch-input::before{content:"";position:absolute;width:100%;height:100%;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 0;background-color:rgba(102,101,101,1);z-index:0}.ui-toggleswitch .ui-switch-input:active::before{background-color:rgba(102,101,101,1)}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button{background-color:rgba(179,179,179,1)}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button::before{background-color:rgba(102,101,101,1)}.ui-toggleswitch .ui-switch-activation,.ui-toggleswitch .ui-switch-button{width:59px;height:49px;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 -49px;background-color:rgba(245,245,245,1);position:absolute;top:0;left:0;pointer-events:none;z-index:1}.ui-toggleswitch .ui-switch-activation::before,.ui-toggleswitch .ui-switch-button::before{content:"";position:absolute;width:100%;height:100%;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 -98px;background-color:rgba(133,133,133,1);top:0;left:0}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button{width:59px;height:49px;-webkit-mask-position:0 -49px;background-color:rgba(245,245,245,1);-webkit-transform:translate3d(33px,0,0);-moz-transform:translate3d(33px,0,0);-ms-transform:translate3d(33px,0,0);-o-transform:translate3d(33px,0,0);transform:translate3d(33px,0,0)}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -147px;background-color:rgba(115,191,15,1)}.ui-toggleswitch .ui-switch-input:checked::before{background-color:rgba(115,191,15,1)}.ui-toggleswitch .ui-switch-input:checked:active::before{background-color:rgba(75,102,39,1)}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button{background-color:rgba(179,179,179,1)}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button::before{background-color:rgba(75,102,39,1)}.ui-toggleswitch.ui-toggleswitch-large{width:207px;height:110px;display:block;margin:0 auto}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button{width:132px;height:110px;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:207px;-webkit-mask-position:0 -110px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before{-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-position:0 -220px;-webkit-mask-size:207px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before{-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:207px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button{width:132px;height:110px;-webkit-mask-position:0 -110px;-webkit-transform:translate3d(75px,0,0);-moz-transform:translate3d(75px,0,0);-ms-transform:translate3d(75px,0,0);-o-transform:translate3d(75px,0,0);transform:translate3d(75px,0,0)}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -330px}@-webkit-keyframes rotating{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}.ui-processing{background-color:rgba(255,145,0,1);-webkit-mask-image:url(images/Processing/tw_progress_small_loading_bg.png);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-animation:rotating 1s linear infinite;width:3.5rem;height:3.5rem;margin:0 auto;margin-top:2.125rem;margin-bottom:.875rem}.ui-processing-text{margin:0 auto;text-align:center;width:10.5rem;font-size:1.5rem}.ui-processing.ui-processing-full-size{background-color:transparent;-webkit-mask-image:none;-webkit-animation:none;width:100%;height:100%;pointer-events:none;position:fixed;top:0;left:0;margin:0}.ui-processing.ui-processing-full-size::after{content:"";background-color:rgba(255,145,0,1);-webkit-mask-image:url(images/Processing/tw_progress_full_loading_bg.png);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-animation:rotating 1s linear infinite;width:100%;height:100%;position:absolute}.ui-btn{display:block;padding-top:28.5px;padding-right:10px;padding-bottom:28.5px;padding-left:10px;margin:0;font-size:32px;line-height:28px;text-align:center;white-space:nowrap;cursor:pointer;vertical-align:middle;text-overflow:ellipsis;overflow:hidden;border:0 none;color:rgba(245,245,245,1);background-color:rgba(74,64,55,1)}a.ui-btn:active:hover,.ui-btn:enabled:active:hover{background-color:rgba(110,88,67,1)}.ui-btn:enabled:focus{background-color:rgba(74,64,55,1)}a.ui-btn.ui-state-disabled,.ui-btn:disabled{color:rgba(245,245,245,.2);background-color:rgba(13,12,11,1);cursor:default}.ui-btn.ui-multiline{padding-top:10px;padding-bottom:10px}.ui-btn.ui-inline{display:inline-block}.ui-btn.ui-btn-icon{background-position:center center;height:76px;text-indent:-1000em;overflow:hidden;background-repeat:no-repeat;background-size:60px 60px}.ui-default{color:rgba(245,245,245,1);background-color:rgba(74,64,55,1)}a.ui-default:active:hover,.ui-default:enabled:active:hover{background-color:rgba(110,88,67,1)}.ui-default:enabled:focus{background-color:rgba(74,64,55,1)}a.ui-default.ui-state-disabled,.ui-default:disabled{color:rgba(245,245,245,.2);background-color:rgba(13,12,11,1);cursor:default}.ui-color-red{color:rgba(245,245,245,1);background-color:rgba(207,36,2,1)}a.ui-color-red:active:hover,.ui-color-red:enabled:active:hover{background-color:rgba(222,102,78,1)}.ui-color-red:enabled:focus{background-color:rgba(207,36,2,1)}a.ui-color-red.ui-state-disabled,.ui-color-red:disabled{color:rgba(245,245,245,.2);background-color:rgba(69,11,1,1);cursor:default}.ui-color-orange{color:rgba(245,245,245,1);background-color:rgba(237,134,0,1)}a.ui-color-orange:active:hover,.ui-color-orange:enabled:active:hover{background-color:rgba(242,171,78,.4)}.ui-color-orange:enabled:focus{background-color:rgba(237,134,0,1)}a.ui-color-orange.ui-state-disabled,.ui-color-orange:disabled{color:rgba(245,245,245,.2);background-color:rgba(69,39,5,1);cursor:default}.ui-color-green{color:rgba(245,245,245,1);background-color:rgba(97,163,16,1)}a.ui-color-green:active:hover,.ui-color-green:enabled:active:hover{background-color:rgba(146,191,90,1)}.ui-color-green:enabled:focus{background-color:rgba(97,163,16,1)}a.ui-color-green.ui-state-disabled,.ui-color-green:disabled{color:rgba(245,245,245,.2);background-color:rgba(50,54,48,1);cursor:default}.ui-btn:focus,.ui-btn:active{outline:0}a.ui-btn{text-decoration:none;box-sizing:border-box}button.ui-btn,input.ui-btn{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;width:100%}button.ui-btn.ui-inline,input.ui-btn.ui-inline{display:inline-block;width:auto}.ui-grid-col-1>.ui-btn{border-left:solid 1px rgba(36,27,19,1)}.ui-grid-col-1>.ui-btn:first-child{border-left:0 none}.ui-grid-col-2>.ui-btn{border-left:solid 1px rgba(36,27,19,1)}.ui-grid-col-2>.ui-btn:first-child{border-left:0 none}.ui-grid-col-3>.ui-btn{border-left:solid 1px rgba(36,27,19,1)}.ui-grid-col-3>.ui-btn:first-child{border-left:0 none}.ui-grid-row>.ui-btn{margin-top:1px}.ui-grid-row>.ui-btn:first-child{margin-top:0}.ui-popup{position:fixed;left:0;width:100%;margin:0;background-color:rgba(31,24,19,1);border:3px solid rgba(255,145,0,1);display:none;z-index:1100}.ui-popup:not(.ui-ctxpopup){bottom:0}.ui-popup .ui-popup-header{width:100%;min-height:68px;font-size:30px;text-align:left;background-color:rgba(43,37,31,1);color:rgba(242,159,51,1);padding-top:14px;padding-right:13px;padding-bottom:14px;padding-left:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-popup .ui-popup-content{width:100%;min-height:14rem;font-size:2.125rem;text-align:left;color:rgba(245,245,245,1);background-color:rgba(31,24,19,1);padding:10px 16px 9px;overflow:auto;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-popup .ui-popup-content .ui-listview,.ui-popup .ui-popup-content .ui-inline-listview{margin:-.5625rem -1rem -.5625rem -1rem}.ui-popup .ui-popup-content .ui-listview li,.ui-popup .ui-popup-content .ui-inline-listview li{font-size:2.125rem}.ui-popup .ui-popup-footer{width:100%;height:83px}.ui-popup .ui-popup-footer .ui-btn{padding-top:27px;padding-bottom:28px;font-size:30px}.ui-popup.ui-popup-active{display:block}.ui-popup.in{display:block}.ui-popup.ui-build{display:block;visibility:hidden}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast){max-height:100%}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-wrapper{width:100%;max-height:100%;overflow:auto!important;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content{height:auto!important}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header.ui-fixed{position:absolute!important;top:0;left:0;width:100%;z-index:2100}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-footer.ui-fixed{position:absolute!important;bottom:0;left:0;width:100%;z-index:2100;-webkit-transform:translate3d(0,0,0)}.ui-popup.ui-ctxpopup{background-color:transparent;width:100%;border:0 none;border-radius:0;overflow:visible}div.ui-popup.ui-ctxpopup.ui-popup-content-size{width:auto;padding:0}div.ui-popup.ui-ctxpopup.ui-popup-content-size .ui-popup-content{width:auto}.ui-popup.ui-ctxpopup .ui-popup-content{background-color:rgba(245,245,245,1);border:1px solid rgba(117,117,117,.9);color:#333;min-height:initial}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li{color:rgba(8,8,8,1);border-bottom:1px solid rgba(204,204,204,1);min-height:90px;padding:21px 8px 20px 16px}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a{color:rgba(8,8,8,1);margin:-21px -16px;padding:21px 16px;min-height:48px}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active{color:rgba(245,245,245,1);background-color:rgba(217,130,17,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li:last-child{border:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon{position:relative;padding-left:4.25rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon a{margin-left:-4.25rem;padding-left:4.25rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon::before{content:"";position:absolute;top:50%;left:.375rem;width:3.5rem;height:3.5rem;margin-top:-1.75rem;background-color:rgba(107,107,107,.9);-webkit-mask-size:3.5rem 3.5rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:3.5rem 3.5rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview a.ui-list-icon:active::before{background-color:rgba(245,245,245,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview{height:4.3125rem;overflow:hidden}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li{float:left;height:4.1875rem;line-height:4.1875rem;border-right:1px solid rgba(8,8,8,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li:last-child{border:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a{display:block;width:100%;height:100%;padding:0rem .5rem;color:rgba(8,8,8,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active{color:rgba(245,245,245,1);background-color:rgba(217,130,17,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext{width:3.6875rem;height:4.1875rem;text-indent:-1000em;overflow:hidden;position:relative}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext::before{content:"";position:absolute;top:50%;left:50%;width:2.6875rem;height:2.6875rem;margin-top:-1.34375rem;margin-left:-1.34375rem;background-color:rgba(8,8,8,1);-webkit-mask-size:2.6875rem 2.6875rem;-webkit-mask-repeat:no-repeat;mask-size:2.6875rem 2.6875rem;mask-repeat:no-repeat}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview a.ui-list-icon-notext:active::before{background-color:rgba(245,245,245,1)}.ui-popup.ui-ctxpopup .ui-arrow{width:36px;height:15px;overflow:hidden;position:absolute;display:none;animation-duration:0;-webkit-animation-duration:0}.ui-popup.ui-ctxpopup .ui-arrow span{width:20px;height:20px;background-color:rgba(245,245,245,1);border:1px solid rgba(117,117,117,.9);position:absolute;top:6px;left:8px;-webkit-transform:rotate(55deg) skew(24deg);transform:rotate(55deg) skew(24deg);animation-duration:0;-webkit-animation-duration:0}.ui-popup.ui-ctxpopup.ui-popup-arrow-b{padding:20px 20px 0}.ui-popup.ui-ctxpopup.ui-popup-arrow-t{padding:0 20px 20px}.ui-popup.ui-ctxpopup.ui-popup-arrow-r{padding:20px 0 20px 20px}.ui-popup.ui-ctxpopup.ui-popup-arrow-l{padding:20px 20px 20px 0}.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow{display:block;bottom:-.875rem;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow{display:block;top:-14px}.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow{display:block;right:-25px;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow{display:block;left:-25px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.ui-popup.ui-popup-toast{margin-left:0;margin-right:0;margin-bottom:0;font-size:1.5rem;border:3px solid rgba(255,145,0,1);border-radius:0;border-left:0;border-right:0;position:absolute;bottom:0;top:auto;height:auto}.ui-popup.ui-popup-toast .ui-popup-content{min-height:initial;padding:.6875rem 2.625rem .75rem;background-color:rgba(31,24,19,1)}.ui-popup-overlay{position:fixed;display:none;top:0;width:100%;height:100%;z-index:100;background-color:rgba(8,8,8,.7)}.ui-popup-overlay.in{display:block}.ui-popup.slideup.in{-webkit-animation-name:popupslideinfrombottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popupslideinfrombottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.slideup.out{-webkit-animation-name:popupslideouttobottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popupslideouttobottom;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes popupslideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0%)}}@keyframes popupslideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0%)}}@-webkit-keyframes popupslideouttobottom{from{transform:translateY(0%)}to{transform:translateY(100%)}}@keyframes popupslideouttobottom{from{transform:translateY(0%)}to{transform:translateY(100%)}}.ui-popup.pop.in{-webkit-animation-name:popuppopin;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popuppopin;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.pop.out{-webkit-animation-name:popuppopout;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popuppopout;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes popuppopin{from{transform:scale3d(0,0,1)}to{transform:scale3d(1,1,1)}}@-webkit-keyframes popuppopout{from{transform:scale3d(1,1,1)}to{transform:scale3d(0,0,1)}}.ui-popup-overlay.slideup.in,.ui-popup-overlay.pop.in{-webkit-animation-name:fadein;-webkit-animation-duration:250ms;animation-name:fadein;animation-duration:250ms}.ui-popup-overlay.slideup.out,.ui-popup-overlay.pop.out{-webkit-animation-name:fadeout;-webkit-animation-duration:250ms;animation-name:fadeout;animation-duration:250ms}.ui-popup.ui-popup-arrow-t.slideup.in,.ui-popup.ui-popup-arrow-l.slideup.in,.ui-popup.ui-popup-arrow-r.slideup.in{-webkit-animation-name:ctxpopupslideinfrombottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideinfrombottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-t.slideup.out,.ui-popup.ui-popup-arrow-l.slideup.out,.ui-popup.ui-popup-arrow-r.slideup.out{-webkit-animation-name:ctxpopupslideouttobottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideouttobottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-b.slideup.in{-webkit-animation-name:ctxpopupslideinfromtop;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideinfromtop;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-b.slideup.out{-webkit-animation-name:ctxpopupslideouttotop;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideouttotop;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes ctxpopupslideinfrombottom{from{transform:translateY(20%);opacity:0}to{transform:translateY(0%);opacity:1}}@keyframes ctxpopupslideinfrombottom{from{transform:translateY(20%);opacity:0}to{transform:translateY(0%);opacity:1}}@-webkit-keyframes ctxpopupslideouttobottom{from{transform:translateY(0%);opacity:1}to{transform:translateY(20%);opacity:0}}@keyframes ctxpopupslideouttobottom{from{transform:translateY(0%);opacity:1}to{transform:translateY(20%);opacity:0}}@-webkit-keyframes ctxpopupslideinfromtop{from{transform:translateY(-20%);opacity:0}to{transform:translateY(0%);opacity:1}}@keyframes ctxpopupslideinfromtop{from{transform:translateY(-20%);opacity:0}to{transform:translateY(0%);opacity:1}}@-webkit-keyframes ctxpopupslideouttotop{from{transform:translateY(0%);opacity:1}to{transform:translateY(-20%);opacity:0}}@keyframes ctxpopupslideouttotop{from{transform:translateY(0%);opacity:1}to{transform:translateY(-20%);opacity:0}}.ui-listview li{font-size:2.5rem;line-height:3rem;width:100%;min-height:6.25rem;padding:1.3125rem .5rem 1.25rem 1rem;border-bottom:1px solid rgba(46,46,46,1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;color:rgba(245,245,245,1)}.ui-listview li>*{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;color:rgba(245,245,245,1)}.ui-listview li>a{display:block;width:100%;height:100%;margin:-1.3125rem -1rem;padding:1.625rem 1rem;-o-box-sizing:content-box;-ms-box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.ui-listview li.ui-li-active{background-color:rgba(89,74,59,1);color:rgba(245,245,245,1)}.ui-listview .li-divider{height:1.875rem;min-height:1.875rem;line-height:1.875rem;padding:0 .5rem 0 1rem;background-color:rgba(79,74,70,1);color:rgba(245,245,245,1);font-size:1.5rem}.ui-listview .ui-li-sub-text{color:rgba(143,110,79,1);font-size:1.75rem}.ui-listview .ui-li-has-action-icon .ui-action-text{width:calc(100% - 4.8125rem);height:100%}.ui-listview .ui-li-has-action-icon .ui-action-text::after{content:"";position:absolute;height:3.5rem;width:.125rem;background-color:rgba(245,245,245,1);right:4.25rem;top:20%}.ui-listview .ui-li-has-action-icon .ui-action-divider{display:none}.ui-listview .ui-li-has-action-icon .ui-action-delete,.ui-listview .ui-li-has-action-icon .ui-action-setting,.ui-listview .ui-li-has-action-icon .ui-action-add{position:absolute;height:100%;width:4.5rem;right:0;top:0;-webkit-mask-size:3.5rem 3.5rem;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center center;padding:0;margin:0}.ui-listview .ui-li-has-action-icon .ui-action-delete{-webkit-mask-image:url(images/listview/tw_list_delete_holo_dark.png);background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-setting{-webkit-mask-image:url(images/listview/tw_list_setting_holo_dark.png);background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-add{-webkit-mask-image:url(images/listview/tw_list_add_holo_dark.png);background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon.ui-li-active{background-color:transparent}.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active{background-color:rgba(89,74,59,1);color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-delete:active,.ui-listview .ui-li-has-action-icon .ui-action-setting:active,.ui-listview .ui-li-has-action-icon .ui-action-add:active{background-color:rgba(89,74,59,1);color:rgba(245,245,245,1)}.ui-datetime-widget{position:relative;height:100%}.ui-datetime{text-align:center;padding-top:56px}.ui-time-picker .ui-datetime{padding-top:53px}.ui-datetime:only-child{padding-top:92px}.ui-time-picker .ui-datetime:only-child{padding-top:89px}.ui-datetime input[type=date],.ui-datetime input[type=datetime],.ui-datetime input[type=time]{display:none}.ui-datefield{height:52px;display:inline-block;vertical-align:top}.ui-datefield>.ui-btn{float:left;height:52px;padding:0;line-height:52px;font-size:42px;font-weight:600;border-radius:2px;background-color:rgba(255,255,255,.15)}.ui-datefield .ui-datefield-separator{display:block;height:100%;float:left;width:18px;background:transparent url(images/Datetimepicker/tw_timepicker_num_dot.png)}.ui-datefield>.ui-btn:enabled:focus{background-color:rgba(255,255,255,.15)}.ui-datefield>.ui-btn:disabled{color:#404040}.ui-datafield>.ui-btn.ui-selected,.ui-datefield>.ui-btn:enabled:active,.ui-datefield>.ui-btn.ui-state-active:enabled,.ui-datefield>.ui-btn.ui-selected:enabled{background-color:#ff9000;color:#000}.ui-date-picker .ui-datefield>.ui-btn:first-child{margin-right:2px}.ui-date-picker .ui-datefield>.ui-btn:last-child{margin-left:2px}.ui-date-picker .ui-datefield-year{width:114px}.ui-date-picker .ui-datefield-month{width:102px}.ui-date-picker .ui-datefield-day{width:68px}.ui-time-picker .ui-datefield-hour{width:74px}.ui-time-picker .ui-datefield-min{width:74px}.ui-time-picker .ui-datefield-period{width:84px;margin-left:10px}.ui-time-picker .ui-datefield{height:58px}.ui-time-picker .ui-datefield>.ui-btn{height:58px;line-height:58px;font-size:50px}.ui-time-picker .ui-datefield>.ui-btn.ui-datefield-period{font-size:48px}.ui-datetime-wheel{height:68px;margin:0 10px;margin-top:30px}.ui-time-picker .ui-datetime-wheel{margin-top:27px}.ui-datetime-wheel .ui-btn{width:68px;height:68px;float:left}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus{float:right;background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png) center center no-repeat}.ui-datetime-wheel .ui-wheel{display:block;margin-left:68px;margin-right:68px;height:68px;padding:10px 0;background:url(images/Datetimepicker/tw_timepicker_wheel_01.png) center center no-repeat}.ui-datetime-btns{position:absolute;bottom:0;width:100%;height:76px;border-top:2px solid #262626}.ui-datetime-btns::before{content:"";height:34px;width:1px;background-color:#262626;position:absolute;left:160px;top:20px}.ui-datetime-btns .ui-btn{height:100%;position:relative;background-color:transparent}.ui-datetime-btns .ui-btn:enabled:active,.ui-datetime-btns .ui-btn:enabled:focus,.ui-datetime-btns .ui-btn:enabled:active:focus{background-color:transparent}.ui-datetime-btns .ui-btn-left{width:160px;float:left;background:url(images/Datetimepicker/tw_timepicker_left_softbtn.png) center center no-repeat}.ui-datetime-btns .ui-btn-right{width:159px;float:right;background:url(images/Datetimepicker/tw_timepicker_right_softbtn.png) center center no-repeat}.ui-datetime-btns .ui-btn:disabled,.ui-datetime-btns .ui-btn.ui-state-disabled{opacity:.2}.ui-datetime-periods{height:102px;margin-top:7px;display:inline-block}.ui-datetime-periods .ui-btn,.ui-datetime-periods .ui-datetime-periods-separator{height:100%;float:left;padding:0;background:transparent}.ui-datetime-periods .ui-btn{width:102px;font-size:34px;line-height:102px}.ui-datetime-periods .ui-btn:enabled:focus{background:transparent}.ui-datetime-periods .ui-btn:enabled:active,.ui-datetime-periods .ui-btn:enabled:active:focus,.ui-datetime-periods .ui-btn.ui-selected:enabled:active,.ui-datetime-periods .ui-btn.ui-state-active:enabled:active{color:inherit;text-decoration:none;background:url(images/Datetimepicker/tw_timepicker_time_bg.png) center center no-repeat}.ui-datetime-periods .ui-btn.ui-selected:enabled,.ui-datetime-periods .ui-btn.ui-state-active:enabled{color:#ff9000;text-decoration:underline}.ui-datetime-periods .ui-datetime-periods-separator{width:24px;background:url(images/Datetimepicker/tw_timepicker_num_dot_01.png) center center no-repeat}.ui-datetime-wheel.ui-hidden,.ui-datetime-periods.ui-hidden{display:none}.ui-viewport-transitioning,.ui-viewport-transitioning .ui-page{width:100%;height:100%;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ui-pre-in{z-index:100;visibility:visible;display:block;top:0;left:0}.in{-webkit-animation-timing-function:ease-out;-webkit-animation-duration:350ms;-moz-animation-timing-function:ease-out;-moz-animation-duration:350ms;animation-timing-function:ease-out;animation-duration:350ms}.out{-webkit-animation-timing-function:ease-in;-webkit-animation-duration:225ms;-moz-animation-timing-function:ease-in;-moz-animation-duration:225ms;animation-timing-function:ease-in;animation-duration:225ms}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadeout{from{opacity:1}to{opacity:0}}@-moz-keyframes fadeout{from{opacity:1}to{opacity:0}}@keyframes fadeout{from{opacity:1}to{opacity:0}}.fade.out{opacity:0;-webkit-animation-duration:125ms;-webkit-animation-name:fadeout;-moz-animation-duration:125ms;-moz-animation-name:fadeout;animation-duration:125ms;animation-name:fadeout}.fade.in{opacity:1;-webkit-animation-duration:225ms;-webkit-animation-name:fadein;-moz-animation-duration:225ms;-moz-animation-name:fadein;animation-duration:225ms;animation-name:fadein}.slideup.out{-webkit-animation-name:fadeout;-webkit-animation-duration:250ms;-moz-animation-name:fadeout;-moz-animation-duration:250ms;animation-name:fadeout;animation-duration:250ms}.slideup.in{-webkit-transform:translateY(0);-webkit-animation-name:slideinfrombottom;-webkit-animation-duration:250ms;-moz-transform:translateY(0);-moz-animation-name:slideinfrombottom;-moz-animation-duration:250ms;transform:translateY(0);animation-name:slideinfrombottom;animation-duration:250ms}.slideup.in.reverse{-webkit-animation-name:fadein;-webkit-animation-duration:250ms;-moz-animation-name:fadein;-moz-animation-duration:250ms;animation-name:fadein;animation-duration:250ms}.slideup.out.reverse{z-index:101;-webkit-transform:translateY(100%);-webkit-animation-name:slideouttobottom;-webkit-animation-duration:250ms;-moz-transform:translateY(100%);-moz-animation-name:slideouttobottom;-moz-animation-duration:250ms;transform:translateY(100%);animation-name:slideouttobottom;animation-duration:250ms}@-webkit-keyframes slideinfrombottom{from{-webkit-transform:translateY(100%)}to{-webkit-transform:translateY(0)}}@-moz-keyframes slideinfrombottom{from{-moz-transform:translateY(100%)}to{-moz-transform:translateY(0)}}@keyframes slideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes slideouttobottom{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateY(100%)}}@-moz-keyframes slideouttobottom{from{-moz-transform:translateY(0)}to{-moz-transform:translateY(100%)}}@keyframes slideouttobottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popnone{from{opacity:1}to{opacity:1}}@-webkit-keyframes popin{from{transform:scale3d(0,0,1)}to{transform:scale3d(1,1,1)}}@-webkit-keyframes popout{from{transform:scale3d(1,1,1)}to{transform:scale3d(0,0,1)}}.pop.out.reverse{z-index:200;-webkit-animation-duration:225ms;-webkit-animation-name:popout;-moz-animation-duration:225ms;-moz-animation-name:popout;animation-duration:225ms;animation-name:popout}.pop.in.reverse{-webkit-animation-duration:225ms;-webkit-animation-name:popnone;-moz-animation-duration:225ms;-moz-animation-name:popnone;animation-duration:225ms;animation-name:popnone}.pop.in{-webkit-animation-duration:225ms;-webkit-animation-name:popin;-moz-animation-duration:225ms;-moz-animation-name:popin;animation-duration:225ms;animation-name:popin}.ui-indexscrollbar{display:block;position:fixed;right:0;top:0;width:2.8125rem;height:100%;padding-left:.125rem;background-color:rgba(41,41,41,1);z-index:10;overflow:visible;-webkit-user-select:none;cursor:pointer}.ui-indexscrollbar ul{position:absolute;width:100%;top:0}.ui-indexscrollbar ul li{color:rgba(89,89,89,1);display:block;width:100%;text-align:center;font-size:1.5rem;height:2.25rem}.ui-indexscrollbar ul li.ui-state-selected{background-color:rgba(51,51,51,1);color:rgba(255,145,0,1)}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary{position:relative;height:auto;top:0;right:-2.5rem;width:100%}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li{background-color:rgba(51,51,51,1);color:rgba(89,89,89,1)}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li.ui-state-selected{background-color:rgba(51,51,51,1);color:rgba(255,145,0,1)}.ui-indexscrollbar+.ui-listview li{padding-right:2.5rem}.ui-indexscrollbar-indicator{position:fixed;top:0;left:0;z-index:9;display:none}.ui-indexscrollbar-indicator>span{width:8.75rem;height:5.4375rem;position:absolute;display:block;top:50%;left:50%;margin-left:-5.625rem;margin-top:-2.6875rem;line-height:5.4375rem;font-size:4.375rem;text-align:center;background-color:rgba(89,74,59,.95);color:rgba(245,245,245,1)}.ui-indexscrollbar-indicator>span>span.ui-selected{color:rgba(255,145,0,1)}.ui-circularindexscrollbar{position:fixed;top:0;left:-100%;z-index:9999;width:100%;height:100%}.ui-circularindexscrollbar.ui-circularindexscrollbar-show .ui-circularindexscrollbar-indexbar{pointer-events:auto;-webkit-transform:scale(1,1);-webkit-transition-duration:500ms;-webkit-transition-timing-function:linear}.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar{pointer-events:none;position:absolute;top:0;left:100%;width:100%;height:100%;border-radius:50%;background:-webkit-radial-gradient(center,ellipse cover,transparent 59%,rgba(41,41,41,1) 59%);overflow:hidden;-webkit-transform:scale(1.2,1.2);-webkit-transition-duration:500ms;-webkit-transition-timing-function:linear}.ui-circularindexscrollbar .ui-circularindexscrollbar-index{position:absolute;top:50%;left:50%;box-sizing:border-box;width:50%;height:50%;margin-top:-50%;margin-left:-50%;-webkit-transform-origin:100% 100% 0;overflow:hidden}.ui-circularindexscrollbar .ui-circularindexscrollbar-index span{position:absolute;width:100%;height:100%;margin-left:50%;padding-top:.3125rem;text-align:center;color:rgba(89,89,89,1);-webkit-transform-origin:50% 100% 0;font-size:1.25rem}.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span{color:rgba(255,145,0,1)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator{position:absolute;top:50%;width:8.9375rem;height:8.9375rem;line-height:8.9375rem;border-radius:50%;background-color:rgba(89,74,59,.95);-webkit-mask-image:url(images/Indicator/b_fast_scroll_rollover_bg.png);-webkit-mask-repeat:no-repeat;-webkit-mask-size:8.9375rem;margin-top:-4.4375rem;margin-left:100%;-webkit-transform:translate3d(-6.703125rem,0,0)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text{text-align:center;font-size:4.375rem;color:rgba(255,145,0,1)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-minimize .ui-circularindexscrollbar-indicator-text{padding-right:.4375rem;text-align:right;font-size:2rem}.ui-scrollbar-bar-type{position:absolute}.ui-scrollbar-bar-type.ui-scrollbar-horizontal{left:0;bottom:0;width:100%;height:8px}.ui-scrollbar-bar-type.ui-scrollbar-vertical{right:0;top:0;width:.5rem;height:100%}.ui-scrollbar-bar-type .ui-scrollbar-indicator{position:absolute;background-color:rgba(110,110,110,1)}.ui-scrollbar-bar-type.ui-scrollbar-horizontal .ui-scrollbar-indicator{height:.25rem}.ui-scrollbar-bar-type.ui-scrollbar-vertical .ui-scrollbar-indicator{width:.25rem}.ui-scrollbar-bouncing-effect{display:none;position:absolute;background-repeat:no-repeat;-webkit-animation-duration:.47s;-moz-animation-duration:.47s;-ms-animation-duration:.47s;-o-animation-duration:.47s;-webkit-animation-timing-function:step-start;-moz-animation-timing-function:step-start;-ms-animation-timing-function:step-start;-o-animation-timing-function:step-start;animation-timing-function:step-start;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards;background-color:rgba(255,145,0,.4)}.ui-scrollbar-bouncing-effect::before{content:"";position:absolute;background-color:rgba(255,145,0,1)}.ui-scrollbar-bouncing-effect.ui-top,.ui-scrollbar-bouncing-effect.ui-bottom{width:100%;height:3.125rem;left:0;-webkit-mask-size:100% 3.125rem}.ui-scrollbar-bouncing-effect.ui-top::before,.ui-scrollbar-bouncing-effect.ui-bottom::before{width:100%;height:.125rem;-webkit-mask-size:100% .125rem}.ui-scrollbar-bouncing-effect.ui-left,.ui-scrollbar-bouncing-effect.ui-right{width:3.125rem;height:100%;top:0;-webkit-mask-size:3.125rem 100%}.ui-scrollbar-bouncing-effect.ui-left::before,.ui-scrollbar-bouncing-effect.ui-right::before{width:.0625rem;height:100%;-webkit-mask-size:.0625rem 100%}.ui-scrollbar-bouncing-effect.ui-top{top:0;-webkit-mask-image:url(images/Scroller/bouncing_top_glow.png)}.ui-scrollbar-bouncing-effect.ui-top::before{-webkit-mask-image:url(images/Scroller/bouncing_top_edge.png)}.ui-scrollbar-bouncing-effect.ui-bottom{bottom:0;-webkit-mask-image:url(images/Scroller/bouncing_bottom_glow.png)}.ui-scrollbar-bouncing-effect.ui-bottom::before{-webkit-mask-image:url(images/Scroller/bouncing_bottom_edge.png)}.ui-scrollbar-bouncing-effect.ui-left{left:0;-webkit-mask-image:url(images/Scroller/bouncing_left_glow.png)}.ui-scrollbar-bouncing-effect.ui-left::before{-webkit-mask-image:url(images/Scroller/bouncing_left_edge.png)}.ui-scrollbar-bouncing-effect.ui-right{right:0;-webkit-mask-image:url(images/Scroller/bouncing_right_glow.png)}.ui-scrollbar-bouncing-effect.ui-right::before{-webkit-mask-image:url(images/Scroller/bouncing_right_edge.png)}@-webkit-keyframes ui-bouncing-show{0%{opacity:0}10%{opacity:.1}20%{opacity:.2}30%{opacity:.3}40%{opacity:.4}50%{opacity:.5}60%{opacity:.6}70%{opacity:.7}80%{opacity:.8}90%{opacity:.9}100%{opacity:1}}@-webkit-keyframes ui-bouncing-hide{0%{opacity:1}10%{opacity:.9}20%{opacity:.8}30%{opacity:.7}40%{opacity:.6}50%{opacity:.5}60%{opacity:.4}70%{opacity:.3}80%{opacity:.2}90%{opacity:.1}100%{opacity:0}}.ui-scrollbar-bouncing-effect.ui-show{display:block;-webkit-animation-name:ui-bouncing-show}.ui-scrollbar-bouncing-effect.ui-hide{display:block;-webkit-animation-name:ui-bouncing-hide}.ui-swipelist{position:absolute;top:0}.ui-swipelist-left,.ui-swipelist-right{position:absolute;display:none}.ui-swipelist-left{background:-webkit-linear-gradient(left,rgba(98,168,24,1) 0,rgba(36,27,19,1) 0)}.ui-swipelist-right{background:-webkit-linear-gradient(right,rgba(235,164,23,1) 0,rgba(36,27,19,1) 0)}.ui-swipelist-icon,.ui-swipelist-text{position:absolute}.ui-swipelist-left .ui-swipelist-icon{width:20%;height:100%;margin-left:2%;background-color:rgba(245,245,245,1);-webkit-mask-image:url(images/Swipelist/b_logs_icon_body_btn_call_nor.png);-webkit-mask-repeat:no-repeat}.ui-swipelist-left .ui-swipelist-text{margin-left:40%;height:100%;line-height:90px}.ui-swipelist-right .ui-swipelist-icon{width:20%;height:100%;margin-left:80%;background-color:rgba(245,245,245,1);-webkit-mask-image:url(images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png);-webkit-mask-repeat:no-repeat}.ui-swipelist-right .ui-swipelist-text{margin-left:20%;height:100%;line-height:90px}.ui-tab-indicator{position:relative;height:6px}.ui-tab-indicator .ui-tab-item{position:absolute;top:0;left:0;display:block;height:6px;background-color:rgba(64,58,53,1)}.ui-tab-indicator .ui-tab-item.ui-tab-active{background-color:rgba(250,145,7,1)}input[type=checkbox]:not(.ui-switch-input),input[type=radio]{box-sizing:border-box;padding:0;height:56px;width:56px;font-size:32px;-webkit-appearance:none;position:relative}input[type=radio]{background-color:rgba(18,9,0,1);-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);-webkit-mask-repeat:no-repeat}input[type=radio]::after{content:"";background-color:rgba(245,245,245,.3);-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_line.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:checked::before{content:"";background-color:rgba(115,191,15,1);-webkit-mask-image:url(images/Controller_icon/tw_btn_radio_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:active{background-color:rgba(79,36,0,.4);-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);-webkit-mask-repeat:no-repeat}input[type=radio]:active::after{content:"";background-color:rgba(245,245,245,.3);-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_line.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:active:checked::before{content:"";background-color:rgba(245,245,245,1);-webkit-mask-image:url(images/Controller_icon/tw_btn_radio_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input){-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(18,9,0,1)}input[type=checkbox]:not(.ui-switch-input)::after{content:"";background-color:rgba(245,245,245,.3);-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):checked::before{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_check_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(115,191,15,1);width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):active{-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(79,36,0,.4)}input[type=checkbox]:not(.ui-switch-input):active::after{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(245,245,245,.3);width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):active:checked::before{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_check_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(245,245,245,1);width:56px;height:56px;position:absolute}.ui-marquee{position:relative;white-space:nowrap;overflow:hidden;-webkit-user-select:none}.ui-marquee.ui-marquee-gradient{text-overflow:clip}.ui-marquee.ui-marquee-gradient::after{content:"";width:6.875rem;height:100%;background:-webkit-linear-gradient(left,transparent 0,rgba(36,27,19,1) 100%);position:absolute;right:0}.ui-marquee.ui-marquee-ellipsis .ui-marquee-content{display:block;overflow:hidden;text-overflow:ellipsis}.ui-marquee-content{overflow:visible;display:inline-block}.ui-marquee-anim-running{-webkit-animation-play-state:running}.ui-marquee-anim-stopped{-webkit-animation-play-state:paused}.ui-page-indicator{position:absolute;left:50%;-webkit-transform:translate3d(-50%,0,0);-moz-transform:translate3d(-50%,0,0);-ms-transform:translate3d(-50%,0,0);-o-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.ui-page-indicator-item{position:relative;display:inline-block;width:.8125rem;height:.8125rem;-webkit-mask-image:-webkit-radial-gradient(#000 .25rem,transparent .375rem);background-color:rgba(245,245,245,.4);margin-right:.5625rem;-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-page-indicator-item:last-child{margin-right:0}.ui-page-indicator-item.ui-page-indicator-active{background-color:rgba(245,245,245,1);-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-snap-listview li{-webkit-scroll-snap-destination:50% 50%}.ui-drawer{width:100%;height:100%;position:fixed;top:0;background-color:rgba(36,27,19,1);z-index:1201;box-sizing:border-box}.ui-drawer.ui-drawer-close{overflow:hidden}.ui-drawer.ui-drawer-open{overflow:auto}.ui-drawer-overlay{top:0;position:fixed;background-color:rgba(0,0,0,.8);z-index:1200}.ui-page .ui-expandable-header{height:60px}.ui-page .ui-expandable-header.ui-header-expand{height:80px}.ui-page .ui-expandable-header.ui-header-expand .ui-title{padding-top:0;transform:translate3d(0,20px,0)}.ui-section-changer{height:100%}
\ No newline at end of file
diff --git a/lib/tau/wearable/theme/changeable/images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png
new file mode 100644
index 0000000..cac8bf2
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png
new file mode 100644
index 0000000..2048b43
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png
new file mode 100644
index 0000000..e06b5d5
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png
new file mode 100644
index 0000000..b61c7a6
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png
new file mode 100644
index 0000000..ea2506c
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/toggle_changeable.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/toggle_changeable.png
new file mode 100644
index 0000000..69500e8
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/toggle_changeable.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/toggle_circle.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/toggle_circle.png
new file mode 100644
index 0000000..80532ce
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/toggle_circle.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/toggle_list_circle.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/toggle_list_circle.png
new file mode 100644
index 0000000..e02e641
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/toggle_list_circle.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_check_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_check_holo_dark.png
new file mode 100644
index 0000000..b93066e
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_check_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_checkbox_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_checkbox_holo_dark.png
new file mode 100644
index 0000000..b66d28c
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_checkbox_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_checkbox_line_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_checkbox_line_holo_dark.png
new file mode 100644
index 0000000..e76b081
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_checkbox_line_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png
new file mode 100644
index 0000000..23d166d
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png
new file mode 100644
index 0000000..0effb3a
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png
new file mode 100644
index 0000000..e6e6501
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_next_depth_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_next_depth_holo_dark.png
new file mode 100644
index 0000000..5b3394b
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_next_depth_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png
new file mode 100644
index 0000000..880f013
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_radio_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_radio_holo_dark.png
new file mode 100644
index 0000000..0fc1881
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_radio_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_radiobox_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_radiobox_holo_dark.png
new file mode 100644
index 0000000..703cb0c
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_radiobox_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_radiobox_line.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_radiobox_line.png
new file mode 100644
index 0000000..1f92e88
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_btn_radiobox_line.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_activation_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_activation_holo_dark.png
new file mode 100644
index 0000000..266c73f
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_activation_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_activation_holo_dark_dim.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_activation_holo_dark_dim.png
new file mode 100644
index 0000000..699eb3e
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_activation_holo_dark_dim.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png
new file mode 100644
index 0000000..71e5b20
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_disabled_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_disabled_holo_dark.png
new file mode 100644
index 0000000..ebb05a6
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_disabled_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png
new file mode 100644
index 0000000..a53449a
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png
new file mode 100644
index 0000000..53e8ee4
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png
new file mode 100644
index 0000000..ef5ae33
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png
new file mode 100644
index 0000000..ba74981
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png
new file mode 100644
index 0000000..acdf9c4
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png
new file mode 100644
index 0000000..6f99bc8
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_holo_dark.png
new file mode 100644
index 0000000..28e5474
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png
new file mode 100644
index 0000000..b74f64e
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png
new file mode 100644
index 0000000..17a9ba1
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png
new file mode 100644
index 0000000..d7a0064
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png
new file mode 100644
index 0000000..f915470
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png
new file mode 100644
index 0000000..0f73347
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png
new file mode 100644
index 0000000..e3823c3
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png
new file mode 100644
index 0000000..e0d7382
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_divider.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_divider.png
new file mode 100644
index 0000000..30605ce
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_divider.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_left_softbtn.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_left_softbtn.png
new file mode 100644
index 0000000..6bf1b2e
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_left_softbtn.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_num_bg_focused.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_num_bg_focused.png
new file mode 100644
index 0000000..b26e87c
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_num_bg_focused.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_num_bg_normal.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_num_bg_normal.png
new file mode 100644
index 0000000..59b9ae1
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_num_bg_normal.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_num_dot.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_num_dot.png
new file mode 100644
index 0000000..aa5a1d2
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_num_dot.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_num_dot_01.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_num_dot_01.png
new file mode 100644
index 0000000..c9a2d8b
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_num_dot_01.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_right_softbtn.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_right_softbtn.png
new file mode 100644
index 0000000..023945a
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_right_softbtn.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_time_bg.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_time_bg.png
new file mode 100644
index 0000000..f5bf671
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_time_bg.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_01.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_01.png
new file mode 100644
index 0000000..9d0ed36
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_01.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_02.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_02.png
new file mode 100644
index 0000000..f3ff1ed
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_02.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_03.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_03.png
new file mode 100644
index 0000000..05ddd26
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_03.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_04.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_04.png
new file mode 100644
index 0000000..879851c
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_04.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_05.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_05.png
new file mode 100644
index 0000000..b523324
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_05.png
diff --git a/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_06.png b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_06.png
new file mode 100644
index 0000000..d320e18
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Datetimepicker/tw_timepicker_wheel_06.png
diff --git a/lib/tau/wearable/theme/changeable/images/Indicator/b_fast_scroll_rollover_bg.png b/lib/tau/wearable/theme/changeable/images/Indicator/b_fast_scroll_rollover_bg.png
new file mode 100644
index 0000000..dbfb43b
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Indicator/b_fast_scroll_rollover_bg.png
diff --git a/lib/tau/wearable/theme/changeable/images/Indicator/b_index_scroll_bg.png b/lib/tau/wearable/theme/changeable/images/Indicator/b_index_scroll_bg.png
new file mode 100644
index 0000000..348e3aa
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Indicator/b_index_scroll_bg.png
diff --git a/lib/tau/wearable/theme/changeable/images/Indicator/list_scroll_triggle.png b/lib/tau/wearable/theme/changeable/images/Indicator/list_scroll_triggle.png
new file mode 100644
index 0000000..983d398
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Indicator/list_scroll_triggle.png
diff --git a/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_brightness_off.png b/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_brightness_off.png
new file mode 100644
index 0000000..c1d4bf4
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_brightness_off.png
diff --git a/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_brightness_on.png b/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_brightness_on.png
new file mode 100644
index 0000000..22e92bf
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_brightness_on.png
diff --git a/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_mute.png b/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_mute.png
new file mode 100644
index 0000000..a68530a
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_mute.png
diff --git a/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_outdoor_off.png b/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_outdoor_off.png
new file mode 100644
index 0000000..5b0c414
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_outdoor_off.png
diff --git a/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_outdoor_on.png b/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_outdoor_on.png
new file mode 100644
index 0000000..9827653
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_outdoor_on.png
diff --git a/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_sound.png b/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_sound.png
new file mode 100644
index 0000000..f66d6ba
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_sound.png
diff --git a/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_sound_off.png b/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_sound_off.png
new file mode 100644
index 0000000..3038dff
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_sound_off.png
diff --git a/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_vibrate.png b/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_vibrate.png
new file mode 100644
index 0000000..2333074
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Popup/tw_device_options_vibrate.png
diff --git a/lib/tau/wearable/theme/changeable/images/Popup/tw_ic_lock_power_off.png b/lib/tau/wearable/theme/changeable/images/Popup/tw_ic_lock_power_off.png
new file mode 100644
index 0000000..35ab760
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Popup/tw_ic_lock_power_off.png
diff --git a/lib/tau/wearable/theme/changeable/images/Popup/tw_ic_lock_restart.png b/lib/tau/wearable/theme/changeable/images/Popup/tw_ic_lock_restart.png
new file mode 100644
index 0000000..b32aa3a
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Popup/tw_ic_lock_restart.png
diff --git a/lib/tau/wearable/theme/changeable/images/Processing/tw_popup_progress_line.png b/lib/tau/wearable/theme/changeable/images/Processing/tw_popup_progress_line.png
new file mode 100644
index 0000000..fd8c2f0
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Processing/tw_popup_progress_line.png
diff --git a/lib/tau/wearable/theme/changeable/images/Processing/tw_progress.png b/lib/tau/wearable/theme/changeable/images/Processing/tw_progress.png
new file mode 100644
index 0000000..58f13da
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Processing/tw_progress.png
diff --git a/lib/tau/wearable/theme/changeable/images/Processing/tw_progress_full_loading_bg.png b/lib/tau/wearable/theme/changeable/images/Processing/tw_progress_full_loading_bg.png
new file mode 100644
index 0000000..944fff1
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Processing/tw_progress_full_loading_bg.png
diff --git a/lib/tau/wearable/theme/changeable/images/Processing/tw_progress_small_loading_bg.png b/lib/tau/wearable/theme/changeable/images/Processing/tw_progress_small_loading_bg.png
new file mode 100644
index 0000000..8bc529d
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Processing/tw_progress_small_loading_bg.png
diff --git a/lib/tau/wearable/theme/changeable/images/Processing/tw_widget_activity_01.png b/lib/tau/wearable/theme/changeable/images/Processing/tw_widget_activity_01.png
new file mode 100644
index 0000000..8ec516e
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Processing/tw_widget_activity_01.png
diff --git a/lib/tau/wearable/theme/changeable/images/Processing/tw_widget_activity_02.png b/lib/tau/wearable/theme/changeable/images/Processing/tw_widget_activity_02.png
new file mode 100644
index 0000000..7b3ef90
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Processing/tw_widget_activity_02.png
diff --git a/lib/tau/wearable/theme/changeable/images/Progress/tw_progressbar_indeterminate1_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Progress/tw_progressbar_indeterminate1_holo_dark.png
new file mode 100644
index 0000000..6cdff14
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Progress/tw_progressbar_indeterminate1_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Progress/tw_progressbar_indeterminate2_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Progress/tw_progressbar_indeterminate2_holo_dark.png
new file mode 100644
index 0000000..17905b9
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Progress/tw_progressbar_indeterminate2_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Progress/tw_progressbar_indeterminate3_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Progress/tw_progressbar_indeterminate3_holo_dark.png
new file mode 100644
index 0000000..b17353d
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Progress/tw_progressbar_indeterminate3_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Progress/tw_progressbar_indeterminate4_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Progress/tw_progressbar_indeterminate4_holo_dark.png
new file mode 100644
index 0000000..719a2bc
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Progress/tw_progressbar_indeterminate4_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Progress/tw_progressbar_indeterminate5_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Progress/tw_progressbar_indeterminate5_holo_dark.png
new file mode 100644
index 0000000..420de53
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Progress/tw_progressbar_indeterminate5_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Progress/tw_scrubber_control_focused_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Progress/tw_scrubber_control_focused_holo_dark.png
new file mode 100644
index 0000000..0d807e2
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Progress/tw_scrubber_control_focused_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Progress/tw_scrubber_control_holo_dark.png b/lib/tau/wearable/theme/changeable/images/Progress/tw_scrubber_control_holo_dark.png
new file mode 100644
index 0000000..b7c6fdb
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Progress/tw_scrubber_control_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_bottom_edge.png b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_bottom_edge.png
new file mode 100644
index 0000000..7259d14
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_bottom_edge.png
diff --git a/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_bottom_glow.png b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_bottom_glow.png
new file mode 100644
index 0000000..5b150b0
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_bottom_glow.png
diff --git a/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_bottom_edge.png b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_bottom_edge.png
new file mode 100644
index 0000000..ded117d
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_bottom_edge.png
diff --git a/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_bottom_glow.png b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_bottom_glow.png
new file mode 100644
index 0000000..96f3684
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_bottom_glow.png
diff --git a/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_left_edge.png b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_left_edge.png
new file mode 100644
index 0000000..c7950f4
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_left_edge.png
diff --git a/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_left_glow.png b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_left_glow.png
new file mode 100644
index 0000000..5337045
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_left_glow.png
diff --git a/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_right_edge.png b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_right_edge.png
new file mode 100644
index 0000000..4037cb5
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_right_edge.png
diff --git a/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_right_glow.png b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_right_glow.png
new file mode 100644
index 0000000..7319c76
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_circle_right_glow.png
diff --git a/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_left_edge.png b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_left_edge.png
new file mode 100644
index 0000000..413fccd
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_left_edge.png
diff --git a/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_left_glow.png b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_left_glow.png
new file mode 100644
index 0000000..11015e4
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_left_glow.png
diff --git a/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_right_edge.png b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_right_edge.png
new file mode 100644
index 0000000..e14f69b
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_right_edge.png
diff --git a/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_right_glow.png b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_right_glow.png
new file mode 100644
index 0000000..69ed30b
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_right_glow.png
diff --git a/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_top_edge.png b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_top_edge.png
new file mode 100644
index 0000000..6138e66
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_top_edge.png
diff --git a/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_top_glow.png b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_top_glow.png
new file mode 100644
index 0000000..73b2fc9
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Scroller/bouncing_top_glow.png
diff --git a/lib/tau/wearable/theme/changeable/images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png b/lib/tau/wearable/theme/changeable/images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png
new file mode 100644
index 0000000..5e41e9a
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png
diff --git a/lib/tau/wearable/theme/changeable/images/Swipelist/b_logs_icon_body_btn_call_nor.png b/lib/tau/wearable/theme/changeable/images/Swipelist/b_logs_icon_body_btn_call_nor.png
new file mode 100644
index 0000000..8337333
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/Swipelist/b_logs_icon_body_btn_call_nor.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/00_field_btn_clear.png b/lib/tau/wearable/theme/changeable/images/controls/00_field_btn_clear.png
new file mode 100644
index 0000000..eff4c22
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/00_field_btn_clear.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/00_field_btn_clear_press.png b/lib/tau/wearable/theme/changeable/images/controls/00_field_btn_clear_press.png
new file mode 100644
index 0000000..778108e
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/00_field_btn_clear_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/00_search_icon.png b/lib/tau/wearable/theme/changeable/images/controls/00_search_icon.png
new file mode 100644
index 0000000..c634b56
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/00_search_icon.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/00_slider_button_brightness_01.png b/lib/tau/wearable/theme/changeable/images/controls/00_slider_button_brightness_01.png
new file mode 100644
index 0000000..8f9214f
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/00_slider_button_brightness_01.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/00_slider_button_brightness_02.png b/lib/tau/wearable/theme/changeable/images/controls/00_slider_button_brightness_02.png
new file mode 100644
index 0000000..0df85e0
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/00_slider_button_brightness_02.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/00_slider_button_volume_01.png b/lib/tau/wearable/theme/changeable/images/controls/00_slider_button_volume_01.png
new file mode 100644
index 0000000..1f41023
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/00_slider_button_volume_01.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/00_slider_button_volume_02.png b/lib/tau/wearable/theme/changeable/images/controls/00_slider_button_volume_02.png
new file mode 100644
index 0000000..0f6f7f4
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/00_slider_button_volume_02.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/00_slider_handle.png b/lib/tau/wearable/theme/changeable/images/controls/00_slider_handle.png
new file mode 100644
index 0000000..3a64686
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/00_slider_handle.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/00_slider_handle_press.png b/lib/tau/wearable/theme/changeable/images/controls/00_slider_handle_press.png
new file mode 100644
index 0000000..ecb7e42
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/00_slider_handle_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/00_slider_popup_bg.png b/lib/tau/wearable/theme/changeable/images/controls/00_slider_popup_bg.png
new file mode 100644
index 0000000..ef0a56e
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/00_slider_popup_bg.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_back.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_back.png
new file mode 100644
index 0000000..7618371
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_back.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_back_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_back_press.png
new file mode 100644
index 0000000..7618371
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_back_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_call.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_call.png
new file mode 100644
index 0000000..5b837fd
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_call.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_call_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_call_press.png
new file mode 100644
index 0000000..5b837fd
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_call_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_check.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_check.png
new file mode 100644
index 0000000..8df9a9c
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_check.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_check_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_check_press.png
new file mode 100644
index 0000000..8df9a9c
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_check_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_cancel.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_cancel.png
new file mode 100644
index 0000000..a5b5639
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_cancel.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_cancel_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_cancel_press.png
new file mode 100644
index 0000000..a5b5639
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_cancel_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_closed.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_closed.png
new file mode 100644
index 0000000..452209d
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_closed.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_closed_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_closed_press.png
new file mode 100644
index 0000000..452209d
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_closed_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_minus.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_minus.png
new file mode 100644
index 0000000..0f0170f
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_minus.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_minus_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_minus_press.png
new file mode 100644
index 0000000..0f0170f
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_minus_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_opened.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_opened.png
new file mode 100644
index 0000000..5b5cbd0
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_opened.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_opened_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_opened_press.png
new file mode 100644
index 0000000..5b5cbd0
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_opened_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_send.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_send.png
new file mode 100644
index 0000000..521b4b2
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_send.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_send_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_send_press.png
new file mode 100644
index 0000000..521b4b2
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_expand_send_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_gear.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_gear.png
new file mode 100644
index 0000000..8e4b359
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_gear.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_gear_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_gear_press.png
new file mode 100644
index 0000000..8e4b359
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_gear_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_grid.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_grid.png
new file mode 100644
index 0000000..ca6b769
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_grid.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_grid_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_grid_press.png
new file mode 100644
index 0000000..ca6b769
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_grid_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_home.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_home.png
new file mode 100644
index 0000000..1ba3820
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_home.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_home_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_home_press.png
new file mode 100644
index 0000000..1ba3820
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_home_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_info.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_info.png
new file mode 100644
index 0000000..1e5d984
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_info.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_info_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_info_press.png
new file mode 100644
index 0000000..1e5d984
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_info_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_left.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_left.png
new file mode 100644
index 0000000..b4eca6d
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_left.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_left_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_left_press.png
new file mode 100644
index 0000000..b4eca6d
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_left_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_plus.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_plus.png
new file mode 100644
index 0000000..12cbe29
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_plus.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_plus_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_plus_press.png
new file mode 100644
index 0000000..12cbe29
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_plus_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_refresh.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_refresh.png
new file mode 100644
index 0000000..33ff934
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_refresh.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_refresh_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_refresh_press.png
new file mode 100644
index 0000000..33ff934
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_refresh_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_rename.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_rename.png
new file mode 100644
index 0000000..e3603b8
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_rename.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_rename_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_rename_press.png
new file mode 100644
index 0000000..e3603b8
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_rename_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_right.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_right.png
new file mode 100644
index 0000000..659ea76
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_right.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_right_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_right_press.png
new file mode 100644
index 0000000..659ea76
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_right_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_search.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_search.png
new file mode 100644
index 0000000..12f4714
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_search.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_search_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_search_press.png
new file mode 100644
index 0000000..12f4714
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_search_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_star.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_star.png
new file mode 100644
index 0000000..f608394
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_star.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_star_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_star_press.png
new file mode 100644
index 0000000..f608394
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_star_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_warning.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_warning.png
new file mode 100644
index 0000000..4a39960
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_warning.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_button_warning_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_warning_press.png
new file mode 100644
index 0000000..4a39960
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_button_warning_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_icon_jump.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_icon_jump.png
new file mode 100644
index 0000000..3692cbd
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_icon_jump.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_icon_jump_left.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_icon_jump_left.png
new file mode 100644
index 0000000..9c299ac
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_icon_jump_left.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_icon_jump_left_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_icon_jump_left_press.png
new file mode 100644
index 0000000..9c299ac
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_icon_jump_left_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/controls/button/00_icon_jump_press.png b/lib/tau/wearable/theme/changeable/images/controls/button/00_icon_jump_press.png
new file mode 100644
index 0000000..3692cbd
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/controls/button/00_icon_jump_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/listview/tw_list_add_holo_dark.png b/lib/tau/wearable/theme/changeable/images/listview/tw_list_add_holo_dark.png
new file mode 100644
index 0000000..bd24e0e
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/listview/tw_list_add_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/listview/tw_list_delete_holo_dark.png b/lib/tau/wearable/theme/changeable/images/listview/tw_list_delete_holo_dark.png
new file mode 100644
index 0000000..ccbb700
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/listview/tw_list_delete_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/listview/tw_list_setting_holo_dark.png b/lib/tau/wearable/theme/changeable/images/listview/tw_list_setting_holo_dark.png
new file mode 100644
index 0000000..5b90223
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/listview/tw_list_setting_holo_dark.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_Back.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_Back.png
new file mode 100644
index 0000000..815a343
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_Back.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_Back_press.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_Back_press.png
new file mode 100644
index 0000000..fcbc346
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_Back_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_SIP_close_press_web.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_SIP_close_press_web.png
new file mode 100644
index 0000000..5d036a3
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_SIP_close_press_web.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_SIP_close_web.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_SIP_close_web.png
new file mode 100644
index 0000000..76f10ec
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_SIP_close_web.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_cancel_press_web.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_cancel_press_web.png
new file mode 100644
index 0000000..872ad33
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_cancel_press_web.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_cancel_web.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_cancel_web.png
new file mode 100644
index 0000000..3c37e96
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_cancel_web.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_delete_press_web.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_delete_press_web.png
new file mode 100644
index 0000000..829c8b0
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_delete_press_web.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_delete_web.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_delete_web.png
new file mode 100644
index 0000000..d105c7b
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_delete_web.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_done_press_web.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_done_press_web.png
new file mode 100644
index 0000000..b56c0f1
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_done_press_web.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_done_web.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_done_web.png
new file mode 100644
index 0000000..7b58fc4
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_done_web.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_edit_press_web.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_edit_press_web.png
new file mode 100644
index 0000000..b52b2b6
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_edit_press_web.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_edit_web.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_edit_web.png
new file mode 100644
index 0000000..a56d1f6
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_edit_web.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_more.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_more.png
new file mode 100644
index 0000000..95f17c7
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_more.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_more_press.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_more_press.png
new file mode 100644
index 0000000..d4d6951
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_more_press.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_plus_press_web.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_plus_press_web.png
new file mode 100644
index 0000000..f15fb71
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_plus_press_web.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_plus_web.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_plus_web.png
new file mode 100644
index 0000000..d49406f
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_plus_web.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_search_press_web.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_search_press_web.png
new file mode 100644
index 0000000..464c5c7
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_search_press_web.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_search_web.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_search_web.png
new file mode 100644
index 0000000..7788bec
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_search_web.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_select_all_press_web.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_select_all_press_web.png
new file mode 100644
index 0000000..32ae22e
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_select_all_press_web.png
diff --git a/lib/tau/wearable/theme/changeable/images/page/00_icon_select_all_web.png b/lib/tau/wearable/theme/changeable/images/page/00_icon_select_all_web.png
new file mode 100644
index 0000000..ce4af60
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/images/page/00_icon_select_all_web.png
diff --git a/lib/tau/wearable/theme/changeable/tau.circle.css b/lib/tau/wearable/theme/changeable/tau.circle.css
new file mode 100644
index 0000000..58f741c
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/tau.circle.css
@@ -0,0 +1,913 @@
+/***************************************************************************
+                  Body
+***************************************************************************/
+/***************************************************************************
+                   Action Bar
+***************************************************************************/
+/****************************************************************************
+               Circle Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Processing
+****************************************************************************/
+/***************************************************************************
+                   Buttons
+***************************************************************************/
+/***************************************************************************
+                   Popup
+***************************************************************************/
+/***************************************************************************
+                   Footer
+***************************************************************************/
+/***************************************************************************
+                   Toast Popup
+***************************************************************************/
+/***************************************************************************
+                   Option Popup
+***************************************************************************/
+/***************************************************************************
+                  circular index scrollbar
+***************************************************************************/
+/***************************************************************************
+                  Listview
+***************************************************************************/
+/****************************************************************************
+               Listview with Marquee
+****************************************************************************/
+/***************************************************************************
+                   Checkbox/Radio
+***************************************************************************/
+/***************************************************************************
+						Page Indicator
+***************************************************************************/
+/****************************************************************************
+		Toggle Switch
+****************************************************************************/
+/***************************************************************************
+                   Scroller
+***************************************************************************/
+/***************************************************************************
+                   More options
+***************************************************************************/
+/************************************************************************/
+/*                           fixedUIStyle.less                          */
+/************************************************************************/
+/* When system font-size is changed, winset size (ex. header, footer, button, etc,
+   include font) also changed. But in UX guide, some UI elements should have fixed
+   size regardless of system font size.
+   So, this less file supports fixed style for some elements.
+   - Layout: header, footer, button
+   - Popup : popup header, popup footer
+   - toggleswitch
+   - progress: text for ratio
+*/
+/***********************************************************************/
+/*                         Layout(FIXED)                               */
+/***********************************************************************/
+/**********************************************************************/
+/*                       Popup(FIXED)                                 */
+/**********************************************************************/
+/**********************************************************************/
+/*                      ToggleSwitch(FIXED)                           */
+/**********************************************************************/
+/************************
+Listview
+*************************/
+/***************************************************************************
+                   Common Style
+
+***************************************************************************/
+/***************************************************************************
+                   Development Tip
+  If you want to implement specific css code of circle device,
+  you should implement specific code here.
+  But when you implement code, you should check duplicate value
+  between common/layout.less and this file.
+  If you have duplicate value, please change static value to variable value.
+***************************************************************************/
+body {
+  background: rgba(8, 8, 8, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-header {
+  height: 128px;
+  line-height: 36px;
+  background-color: rgba(8, 8, 8, 1);
+}
+.ui-header .ui-title {
+  color: rgba(0, 149, 255, 1);
+  text-align: center;
+  padding-top: 54px;
+  margin-left: 2.5rem;
+  margin-right: 2.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+.ui-header .ui-title.ui-icon {
+  background: none !important;
+  padding-left: 1.5rem;
+}
+.ui-header.ui-has-more .ui-title {
+  padding-right: 1.5rem;
+  -webkit-mask-image: -webkit-linear-gradient(left, #000000 80%, rgba(0, 0, 0, 0) 95%);
+}
+.ui-header.ui-has-more .ui-more {
+  position: fixed;
+  top: 163px;
+  right: 8px;
+  width: 50px;
+  height: 36px;
+}
+.ui-header.ui-has-more .ui-more.ui-icon-overflow {
+  background-color: rgba(245, 245, 245, 0.8);
+}
+.ui-page {
+  background: rgba(8, 8, 8, 1);
+}
+.ui-page .ui-footer.ui-bottom-button {
+  overflow: hidden;
+}
+.ui-page .ui-footer.ui-bottom-button .ui-btn {
+  width: 112px;
+  height: 112px;
+  position: relative;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+  border-radius: 50%;
+  text-indent: -9999px;
+  margin-bottom: -22px;
+}
+.ui-page .ui-footer.ui-bottom-button .ui-btn:only-child::before {
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-page .ui-footer.ui-bottom-button .ui-btn::before {
+  content: "";
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-mask-size: 3.75rem 3.75rem;
+  -webkit-mask-repeat: no-repeat;
+  width: 3.75rem;
+  height: 3.75rem;
+  position: absolute;
+  bottom: 23px;
+}
+/***************************************************************************
+                   Page Scroll
+***************************************************************************/
+.ui-page.ui-scroll-on .ui-content {
+  margin-top: 7.625rem;
+  margin-bottom: 6.125rem;
+  padding-top: 0;
+}
+.ui-page.ui-scroll-on .ui-header ~ .ui-content {
+  margin-top: 0;
+}
+.ui-page.ui-scroll-on .ui-content ~ .ui-footer:not(.ui-expandable-footer) {
+  margin-top: -5.3125rem;
+}
+/*
+ * Common definition for theme
+ */
+/***************************************************************
+   default font size (base font from WRT)
+   => small: 13px
+   => normal: 17px
+   => large: 20px
+
+This is only applied to gear2.
+so, we set @font_size_default as 17px on gear2 and it was changed to 16px since gear-S.
+This value only used for @rem_base, not for html font-size
+html font-size is set by WRT base font-size
+***************************************************************/
+a {
+  color: rgba(245, 245, 245, 1);
+}
+/***************************************************************************
+                  toggle switch
+***************************************************************************/
+.ui-switch-text {
+  margin-top: 60px;
+  margin-bottom: 48px;
+  font-size: 34px;
+  padding: 0;
+}
+.ui-switch-sub-text {
+  margin-top: 48px;
+  margin-bottom: 55px;
+  font-size: 26px;
+  color: rgba(0, 149, 255, 1);
+}
+.ui-toggleswitch {
+  width: 69px;
+  height: 49px;
+}
+.ui-toggleswitch .ui-switch-input::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_list_circle.png);
+  -webkit-mask-size: 69px;
+  background-color: rgba(51, 51, 51, 1);
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-toggleswitch .ui-switch-input:active::before {
+  -webkit-transition-duration: 0;
+  -moz-transition-duration: 0;
+  -o-transition-duration: 0;
+  -ms-transition-duration: 0;
+  transition-duration: 0;
+  background-color: rgba(51, 51, 51, 1);
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button {
+  -webkit-transition-duration: 0;
+  -moz-transition-duration: 0;
+  -o-transition-duration: 0;
+  -ms-transition-duration: 0;
+  transition-duration: 0;
+  background-color: rgba(97, 96, 96, 1);
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button::before {
+  background-color: rgba(173, 173, 173, 1);
+}
+.ui-toggleswitch .ui-switch-activation,
+.ui-toggleswitch .ui-switch-button {
+  width: 49px;
+  height: 49px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_list_circle.png);
+  -webkit-mask-size: 69px;
+  -webkit-mask-position: 0 -49px;
+  background-color: rgba(128, 128, 128, 1);
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-toggleswitch .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-button::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_list_circle.png);
+  -webkit-mask-size: 69px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 -98px;
+  background-color: rgba(222, 222, 222, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button {
+  width: 49px;
+  height: 49px;
+  -webkit-mask-position: 0 -49px;
+  background-color: rgba(112, 186, 15, 1);
+  -webkit-transform: translate3d(20px, 0, 0);
+  -moz-transform: translate3d(20px, 0, 0);
+  -ms-transform: translate3d(20px, 0, 0);
+  -o-transform: translate3d(20px, 0, 0);
+  transform: translate3d(20px, 0, 0);
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -147px;
+  background-color: rgba(241, 242, 237, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked::before {
+  background-color: rgba(43, 69, 8, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active::before {
+  background-color: rgba(43, 69, 8, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button {
+  background-color: rgba(71, 97, 37, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button::before {
+  background-color: rgba(172, 173, 170, 1);
+}
+.ui-toggleswitch.ui-toggleswitch-large {
+  width: 136px;
+  height: 78px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button {
+  width: 78px;
+  height: 78px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_circle.png);
+  -webkit-mask-size: 136px;
+  -webkit-mask-position: 0 -78px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_circle.png);
+  -webkit-mask-size: 136px;
+  -webkit-mask-position: 0 -156px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_circle.png);
+  -webkit-mask-size: 136px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button {
+  width: 78px;
+  height: 78px;
+  -webkit-mask-position: 0 -78px;
+  -webkit-transform: translate3d(58px, 0, 0);
+  -moz-transform: translate3d(58px, 0, 0);
+  -ms-transform: translate3d(58px, 0, 0);
+  -o-transform: translate3d(58px, 0, 0);
+  transform: translate3d(58px, 0, 0);
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -234px;
+}
+/***************************************************************************
+                  popup
+***************************************************************************/
+/***********************
+Normal Popup
+***********************/
+.ui-popup {
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: rgba(0, 17, 33, 1);
+  border: 3px solid rgba(0, 149, 255, 1);
+}
+.ui-popup .ui-popup-header {
+  text-align: center;
+  min-height: 122px;
+  background-color: rgba(0, 17, 33, 1);
+  color: rgba(0, 149, 255, 1);
+  padding-top: 53px;
+  padding-right: 61px;
+  padding-bottom: 33px;
+  padding-left: 61px;
+}
+.ui-popup .ui-popup-header + .ui-popup-content {
+  padding-top: 26px;
+}
+.ui-popup .ui-popup-content {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(0, 17, 33, 1);
+  padding: 58px 55px 16px 55px;
+}
+.ui-popup .ui-popup-content .ui-listview,
+.ui-popup .ui-popup-content .ui-inline-listview {
+  margin: -1.5625rem -3.4375rem -1rem -3.4375rem;
+}
+.ui-popup .ui-popup-footer {
+  width: 0;
+  height: 0;
+}
+.ui-popup .ui-popup-footer .ui-btn {
+  height: 108px;
+  width: 108px;
+  border-radius: 54px;
+  position: fixed;
+  text-indent: -9999px;
+}
+.ui-popup .ui-popup-footer .ui-btn.ui-btn-footer-icon::before {
+  content: "";
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-mask-size: 48px 48px;
+  -webkit-mask-repeat: no-repeat;
+  width: 48px;
+  height: 48px;
+  position: absolute;
+}
+.ui-popup .ui-popup-footer .ui-btn:only-child {
+  top: -53px;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:only-child.ui-btn-footer-icon::before {
+  top: 54px;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:active {
+  background-color: rgba(51, 170, 255, 1);
+}
+.ui-popup .ui-popup-footer .ui-btn:active.ui-btn-footer-icon::before {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1) {
+  top: 50%;
+  left: -53px;
+  transform: translate3d(0, -50%, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1).ui-btn-footer-icon::before {
+  top: 50%;
+  left: 53px;
+  transform: translate3d(0, -50%, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2) {
+  top: 50%;
+  right: -53px;
+  transform: translate3d(0, -50%, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2).ui-btn-footer-icon::before {
+  top: 50%;
+  right: 53px;
+  transform: translate3d(0, -50%, 0);
+}
+/***********************
+Popup Container Scroll
+***********************/
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content {
+  margin-top: 7.625rem;
+  margin-bottom: 6.125rem;
+  padding-top: 0;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header + .ui-popup-content {
+  margin-top: 0;
+  padding-top: 26px;
+}
+/****************************************
+Popup Toast
+****************************************/
+.ui-popup.ui-popup-toast {
+  bottom: 2.6875rem;
+  border: 3px solid rgba(2, 56, 92, 1);
+  position: fixed;
+  max-height: 13.75rem;
+}
+.ui-popup.ui-popup-toast .ui-popup-content {
+  background-color: rgba(0, 17, 33, 1);
+  padding: 13px 40px 12px;
+  font-size: 32px;
+  text-align: center;
+  line-height: 42px;
+}
+/***********************
+Option Popup
+***********************/
+.ui-popup.ui-ctxpopup {
+  background-color: transparent;
+  left: 50% !important;
+  margin-left: -6.28125rem;
+  top: 50% !important;
+  margin-top: -6.28125rem;
+  width: 12.5625rem;
+}
+div.ui-popup.ui-ctxpopup.ui-popup-content-size {
+  width: 12.5625rem;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l {
+  padding: 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow > span,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow > span,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow > span,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow > span {
+  background-color: rgba(2, 56, 92, 1);
+  border: 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow {
+  left: 5.15625rem !important;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow {
+  top: 5.84375rem !important;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content {
+  -webkit-border-radius: 50%;
+  -webkit-mask-image: -webkit-radial-gradient(#000000 6.28125rem, transparent 0);
+  height: 12.5625rem !important;
+  min-height: 12.5625rem !important;
+  background-color: rgba(2, 56, 92, 1);
+  border: 1px solid rgba(8, 8, 8, 1);
+  padding: 0;
+  border: 0;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview {
+  margin: 0;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li {
+  font-size: 1.75rem;
+  min-height: 6.25rem;
+  text-align: center;
+  line-height: 3.625rem;
+  border-bottom: 1px solid rgba(8, 8, 8, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a {
+  color: rgba(245, 245, 245, 1);
+  margin: -1.46875rem -1rem;
+  padding: 1.46875rem 1rem;
+  min-height: 3.3125rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(23, 73, 115, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview {
+  height: initial;
+  overflow: hidden;
+  width: 12.5625rem !important;
+  margin: 0;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li {
+  font-size: 1.75rem;
+  float: none;
+  min-height: 6.25rem;
+  line-height: 3.625rem;
+  text-align: center;
+  border-bottom: 1px solid rgba(8, 8, 8, 1);
+  border-right: 0;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a {
+  margin: 0;
+  padding: 0;
+  line-height: 6.25rem;
+  color: rgba(245, 245, 245, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(23, 73, 115, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext {
+  width: 100%;
+  height: 100%;
+}
+/***************************************************************************
+                  listview
+***************************************************************************/
+.ui-listview li {
+  font-size: 2.25rem;
+  min-height: 6.5625rem;
+  padding: 1.78125rem 2.5rem;
+  border-bottom: 1px solid rgba(41, 41, 41, 1);
+  color: rgba(245, 245, 245, 1);
+  text-align: center;
+}
+.ui-listview li > * {
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview li > a {
+  padding: 1.78125rem 2.5rem;
+  margin: -1.8125rem -2.5rem;
+}
+.ui-listview li.ui-li-active {
+  background-color: rgba(8, 56, 94, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview li:last-child {
+  border: 0;
+}
+.ui-listview .li-divider {
+  height: 2.0625rem;
+  min-height: 2.0625rem;
+  line-height: 1.9375rem;
+  background-color: rgba(31, 31, 31, 1);
+  color: rgba(0, 149, 255, 1);
+  padding: 0;
+}
+.ui-listview .ui-li-sub-text {
+  color: rgba(0, 149, 255, 1);
+}
+.ui-header + .ui-content .ui-listview li:first-child {
+  border-top: 1px solid rgba(41, 41, 41, 1);
+}
+/***************************************************************************
+                  listview extra
+***************************************************************************/
+.ui-listview .ui-li-has-action-icon .ui-action-text::after {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-setting {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-add {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active {
+  background-color: rgba(8, 56, 94, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete:active,
+.ui-listview .ui-li-has-action-icon .ui-action-setting:active,
+.ui-listview .ui-li-has-action-icon .ui-action-add:active {
+  background-color: rgba(8, 56, 94, 1);
+  color: rgba(245, 245, 245, 1);
+}
+/***************************************************************************
+                  checkbox / radio button
+***************************************************************************/
+input[type="checkbox"]:not(.ui-switch-input) {
+  background-color: rgba(0, 14, 26, 1);
+}
+input[type="checkbox"]:not(.ui-switch-input)::after {
+  background-color: rgba(245, 245, 245, 0.3);
+}
+input[type="checkbox"]:not(.ui-switch-input):checked::before {
+  background-color: rgba(112, 186, 15, 1);
+}
+input[type="checkbox"]:not(.ui-switch-input)::before {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(112, 186, 15, 1);
+  width: 0;
+  height: 56px;
+  position: absolute;
+  -webkit-transition: width 150ms;
+}
+input[type="checkbox"]:not(.ui-switch-input):active {
+  background-color: rgba(0, 50, 84, 0.4);
+}
+input[type="checkbox"]:not(.ui-switch-input):active::after {
+  background-color: rgba(245, 245, 245, 0.3);
+}
+input[type="checkbox"]:not(.ui-switch-input):active:checked::before {
+  background-color: rgba(245, 245, 245, 1);
+}
+input[type="radio"] {
+  background-color: rgba(0, 14, 26, 1);
+}
+input[type="radio"]::after {
+  background-color: rgba(245, 245, 245, 0.3);
+}
+input[type="radio"]::before {
+  content: "";
+  background-color: rgba(112, 186, 15, 1);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+  -webkit-transform: scale3d(0, 0, 0);
+  -webkit-transition: -webkit-transform 150ms;
+}
+input[type="radio"]:checked::before {
+  background-color: rgba(112, 186, 15, 1);
+  -webkit-transform: scale3d(1, 1, 1);
+}
+input[type="radio"]:active {
+  background-color: rgba(0, 50, 84, 0.4);
+}
+input[type="radio"]:active:checked::before {
+  background-color: rgba(245, 245, 245, 1);
+}
+/***************************************************************************
+                  button
+***************************************************************************/
+.ui-default {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(2, 56, 92, 1);
+}
+a.ui-default:active:hover,
+.ui-default:enabled:active:hover {
+  background-color: rgba(23, 73, 115, 1);
+}
+.ui-default:enabled:focus {
+  background-color: rgba(2, 56, 92, 1);
+}
+a.ui-default.ui-state-disabled,
+.ui-default:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(3, 44, 64, 1);
+}
+.ui-color-red {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(207, 36, 2, 1);
+}
+a.ui-color-red:active:hover,
+.ui-color-red:enabled:active:hover {
+  background-color: rgba(222, 102, 78, 1);
+}
+.ui-color-red:enabled:focus {
+  background-color: rgba(207, 36, 2, 1);
+}
+a.ui-color-red.ui-state-disabled,
+.ui-color-red:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(69, 11, 1, 1);
+}
+.ui-color-orange {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(237, 134, 0, 1);
+}
+a.ui-color-orange:active:hover,
+.ui-color-orange:enabled:active:hover {
+  background-color: rgba(242, 171, 78, 1);
+}
+.ui-color-orange:enabled:focus {
+  background-color: rgba(237, 134, 0, 1);
+}
+a.ui-color-orange.ui-state-disabled,
+.ui-color-orange:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(69, 39, 5, 1);
+}
+.ui-color-green {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(97, 163, 16, 1);
+}
+a.ui-color-green:active:hover,
+.ui-color-green:enabled:active:hover {
+  background-color: rgba(146, 191, 90, 1);
+}
+.ui-color-green:enabled:focus {
+  background-color: rgba(97, 163, 16, 1);
+}
+a.ui-color-green.ui-state-disabled,
+.ui-color-green:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(50, 54, 48, 1);
+}
+.ui-grid-col-1 > .ui-btn {
+  border-left: solid 1px rgba(8, 8, 8, 1);
+}
+.ui-grid-col-2 > .ui-btn {
+  border-left: solid 1px rgba(8, 8, 8, 1);
+}
+.ui-grid-col-3 > .ui-btn {
+  border-left: solid 1px rgba(8, 8, 8, 1);
+}
+/***************************************************************************
+                  circle progress bar
+***************************************************************************/
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left {
+  border: 0.8125rem solid rgba(204, 223, 237, 1);
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right {
+  border: 0.8125rem solid rgba(204, 223, 237, 1);
+}
+.ui-progressbar .ui-progressbar-bg {
+  border: 0.8125rem solid rgba(64, 64, 64, 1);
+}
+.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-left,
+.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-right {
+  border: 0.3125rem solid rgba(204, 223, 237, 1);
+}
+.ui-progressbar.ui-progressbar-small .ui-progressbar-bg {
+  border: 0.3125rem solid rgba(64, 64, 64, 1);
+}
+/***************************************************************************
+                  circular index scroll bar
+***************************************************************************/
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar {
+  background: -webkit-radial-gradient(center, ellipse cover, transparent 59%, rgba(46, 46, 46, 1) 59%);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index span {
+  color: rgba(84, 84, 84, 1);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span {
+  color: rgba(55, 161, 237, 1);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator {
+  background-color: rgba(54, 54, 54, 0.85);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text {
+  color: rgba(55, 161, 237, 1);
+}
+/***************************************************************************
+                  drawer
+***************************************************************************/
+.ui-drawer {
+  background-color: rgba(8, 8, 8, 1);
+}
+.ui-drawer-overlay {
+  background-color: rgba(8, 8, 8, 0.8);
+}
+/***************************************************************************
+                  marquee
+***************************************************************************/
+.ui-marquee.ui-marquee-gradient::after {
+  background: -webkit-linear-gradient(left, transparent 0%, rgba(8, 8, 8, 1) 100%);
+}
+/***************************************************************************
+                  page indicator
+***************************************************************************/
+.ui-page-indicator-item {
+  background-color: rgba(245, 245, 245, 0.4);
+}
+.ui-page-indicator-item.ui-page-indicator-active {
+  background-color: rgba(245, 245, 245, 1);
+}
+/***************************************************************************
+                  processing
+***************************************************************************/
+.ui-processing {
+  background-color: rgba(55, 161, 237, 1);
+}
+.ui-processing.ui-processing-full-size::after {
+  background-color: rgba(55, 161, 237, 1);
+}
+/***************************************************************************
+                  progress
+***************************************************************************/
+@-webkit-keyframes indeterminate {
+  0% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(55, 161, 237, 1);
+  }
+  25% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(55, 161, 237, 1);
+  }
+  50% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(55, 161, 237, 1);
+  }
+  75% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(55, 161, 237, 1);
+  }
+  100% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(55, 161, 237, 1);
+  }
+}
+progress {
+  color: rgba(245, 245, 245, 1);
+}
+progress::-webkit-progress-bar {
+  background-color: rgba(64, 64, 64, 1);
+}
+progress::-webkit-progress-value {
+  background-color: rgba(204, 223, 237, 1);
+}
+progress.ui-progress-indeterminate::-webkit-progress-bar {
+  background-color: rgba(204, 223, 237, 1);
+}
+.ui-scrollbar-bouncing-effect.ui-top {
+  display: none;
+}
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  width: 100%;
+  height: 6.25rem;
+  left: 0;
+  -webkit-mask-size: 100% 6.25rem;
+}
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  width: 100%;
+  height: 6.25rem;
+  -webkit-mask-size: 100% 6.25rem;
+}
+.ui-scrollbar-bouncing-effect.ui-left,
+.ui-scrollbar-bouncing-effect.ui-right {
+  width: 6.25rem;
+  height: 100%;
+  top: 0;
+  -webkit-mask-size: 6.25rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-left::before,
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  width: 6.25rem;
+  height: 100%;
+  -webkit-mask-size: 6.25rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  bottom: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_bottom_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_bottom_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left {
+  left: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_left_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_left_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right {
+  right: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_right_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_right_edge.png");
+}
+/***************************************************************************
+				   Footer Style (New style)
+***************************************************************************/
+.ui-page .ui-expandable-header {
+  height: 128px;
+}
+.ui-page .ui-expandable-header.ui-header-expand {
+  height: 179px;
+}
+.ui-page .ui-expandable-header.ui-header-expand .ui-title {
+  transform: translate3d(0, 105px, 0);
+}
+.is-circle-test {
+  width: 1px;
+}
diff --git a/lib/tau/wearable/theme/changeable/tau.circle.min.css b/lib/tau/wearable/theme/changeable/tau.circle.min.css
new file mode 100644
index 0000000..ff50cad
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/tau.circle.min.css
@@ -0,0 +1 @@
+body{background:rgba(8,8,8,1);color:rgba(245,245,245,1)}.ui-header{height:128px;line-height:36px;background-color:rgba(8,8,8,1)}.ui-header .ui-title{color:rgba(0,149,255,1);text-align:center;padding-top:54px;margin-left:2.5rem;margin-right:2.5rem;padding-left:1.5rem;padding-right:1.5rem}.ui-header .ui-title.ui-icon{background:none!important;padding-left:1.5rem}.ui-header.ui-has-more .ui-title{padding-right:1.5rem;-webkit-mask-image:-webkit-linear-gradient(left,#000 80%,rgba(0,0,0,0) 95%)}.ui-header.ui-has-more .ui-more{position:fixed;top:163px;right:8px;width:50px;height:36px}.ui-header.ui-has-more .ui-more.ui-icon-overflow{background-color:rgba(245,245,245,.8)}.ui-page{background:rgba(8,8,8,1)}.ui-page .ui-footer.ui-bottom-button{overflow:hidden}.ui-page .ui-footer.ui-bottom-button .ui-btn{width:112px;height:112px;position:relative;left:50%;transform:translate3d(-50%,0,0);border-radius:50%;text-indent:-9999px;margin-bottom:-22px}.ui-page .ui-footer.ui-bottom-button .ui-btn:only-child::before{left:50%;transform:translate3d(-50%,0,0)}.ui-page .ui-footer.ui-bottom-button .ui-btn::before{content:"";background-color:rgba(245,245,245,1);-webkit-mask-size:3.75rem 3.75rem;-webkit-mask-repeat:no-repeat;width:3.75rem;height:3.75rem;position:absolute;bottom:23px}.ui-page.ui-scroll-on .ui-content{margin-top:7.625rem;margin-bottom:6.125rem;padding-top:0}.ui-page.ui-scroll-on .ui-header~.ui-content{margin-top:0}.ui-page.ui-scroll-on .ui-content~.ui-footer:not(.ui-expandable-footer){margin-top:-5.3125rem}a{color:rgba(245,245,245,1)}.ui-switch-text{margin-top:60px;margin-bottom:48px;font-size:34px;padding:0}.ui-switch-sub-text{margin-top:48px;margin-bottom:55px;font-size:26px;color:rgba(0,149,255,1)}.ui-toggleswitch{width:69px;height:49px}.ui-toggleswitch .ui-switch-input::before{-webkit-mask-image:url(images/Controller_icon/toggle_list_circle.png);-webkit-mask-size:69px;background-color:rgba(51,51,51,1);-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-toggleswitch .ui-switch-input:active::before{-webkit-transition-duration:0;-moz-transition-duration:0;-o-transition-duration:0;-ms-transition-duration:0;transition-duration:0;background-color:rgba(51,51,51,1)}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button{-webkit-transition-duration:0;-moz-transition-duration:0;-o-transition-duration:0;-ms-transition-duration:0;transition-duration:0;background-color:rgba(97,96,96,1)}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button::before{background-color:rgba(173,173,173,1)}.ui-toggleswitch .ui-switch-activation,.ui-toggleswitch .ui-switch-button{width:49px;height:49px;-webkit-mask-image:url(images/Controller_icon/toggle_list_circle.png);-webkit-mask-size:69px;-webkit-mask-position:0 -49px;background-color:rgba(128,128,128,1);-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-toggleswitch .ui-switch-activation::before,.ui-toggleswitch .ui-switch-button::before{-webkit-mask-image:url(images/Controller_icon/toggle_list_circle.png);-webkit-mask-size:69px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 -98px;background-color:rgba(222,222,222,1)}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button{width:49px;height:49px;-webkit-mask-position:0 -49px;background-color:rgba(112,186,15,1);-webkit-transform:translate3d(20px,0,0);-moz-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);-o-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -147px;background-color:rgba(241,242,237,1)}.ui-toggleswitch .ui-switch-input:checked::before{background-color:rgba(43,69,8,1)}.ui-toggleswitch .ui-switch-input:checked:active::before{background-color:rgba(43,69,8,1)}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button{background-color:rgba(71,97,37,1)}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button::before{background-color:rgba(172,173,170,1)}.ui-toggleswitch.ui-toggleswitch-large{width:136px;height:78px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button{width:78px;height:78px;-webkit-mask-image:url(images/Controller_icon/toggle_circle.png);-webkit-mask-size:136px;-webkit-mask-position:0 -78px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before{-webkit-mask-image:url(images/Controller_icon/toggle_circle.png);-webkit-mask-size:136px;-webkit-mask-position:0 -156px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before{-webkit-mask-image:url(images/Controller_icon/toggle_circle.png);-webkit-mask-size:136px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button{width:78px;height:78px;-webkit-mask-position:0 -78px;-webkit-transform:translate3d(58px,0,0);-moz-transform:translate3d(58px,0,0);-ms-transform:translate3d(58px,0,0);-o-transform:translate3d(58px,0,0);transform:translate3d(58px,0,0)}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -234px}.ui-popup{border-radius:50%;overflow:hidden;background-color:rgba(0,17,33,1);border:3px solid rgba(0,149,255,1)}.ui-popup .ui-popup-header{text-align:center;min-height:122px;background-color:rgba(0,17,33,1);color:rgba(0,149,255,1);padding-top:53px;padding-right:61px;padding-bottom:33px;padding-left:61px}.ui-popup .ui-popup-header+.ui-popup-content{padding-top:26px}.ui-popup .ui-popup-content{color:rgba(245,245,245,1);background-color:rgba(0,17,33,1);padding:58px 55px 16px}.ui-popup .ui-popup-content .ui-listview,.ui-popup .ui-popup-content .ui-inline-listview{margin:-1.5625rem -3.4375rem -1rem -3.4375rem}.ui-popup .ui-popup-footer{width:0;height:0}.ui-popup .ui-popup-footer .ui-btn{height:108px;width:108px;border-radius:54px;position:fixed;text-indent:-9999px}.ui-popup .ui-popup-footer .ui-btn.ui-btn-footer-icon::before{content:"";background-color:rgba(245,245,245,1);-webkit-mask-size:48px 48px;-webkit-mask-repeat:no-repeat;width:48px;height:48px;position:absolute}.ui-popup .ui-popup-footer .ui-btn:only-child{top:-53px;left:50%;transform:translate3d(-50%,0,0)}.ui-popup .ui-popup-footer .ui-btn:only-child.ui-btn-footer-icon::before{top:54px;left:50%;transform:translate3d(-50%,0,0)}.ui-popup .ui-popup-footer .ui-btn:active{background-color:rgba(51,170,255,1)}.ui-popup .ui-popup-footer .ui-btn:active.ui-btn-footer-icon::before{background-color:rgba(245,245,245,1)}.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1){top:50%;left:-53px;transform:translate3d(0,-50%,0)}.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1).ui-btn-footer-icon::before{top:50%;left:53px;transform:translate3d(0,-50%,0)}.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2){top:50%;right:-53px;transform:translate3d(0,-50%,0)}.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2).ui-btn-footer-icon::before{top:50%;right:53px;transform:translate3d(0,-50%,0)}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content{margin-top:7.625rem;margin-bottom:6.125rem;padding-top:0}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header+.ui-popup-content{margin-top:0;padding-top:26px}.ui-popup.ui-popup-toast{bottom:2.6875rem;border:3px solid rgba(2,56,92,1);position:fixed;max-height:13.75rem}.ui-popup.ui-popup-toast .ui-popup-content{background-color:rgba(0,17,33,1);padding:13px 40px 12px;font-size:32px;text-align:center;line-height:42px}.ui-popup.ui-ctxpopup{background-color:transparent;left:50%!important;margin-left:-6.28125rem;top:50%!important;margin-top:-6.28125rem;width:12.5625rem}div.ui-popup.ui-ctxpopup.ui-popup-content-size{width:12.5625rem}.ui-popup.ui-ctxpopup.ui-popup-arrow-t,.ui-popup.ui-ctxpopup.ui-popup-arrow-b,.ui-popup.ui-ctxpopup.ui-popup-arrow-r,.ui-popup.ui-ctxpopup.ui-popup-arrow-l{padding:0}.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow>span,.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow>span,.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow>span,.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow>span{background-color:rgba(2,56,92,1);border:0}.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow,.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow{left:5.15625rem!important}.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow,.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow{top:5.84375rem!important}.ui-popup.ui-ctxpopup .ui-popup-content{-webkit-border-radius:50%;-webkit-mask-image:-webkit-radial-gradient(#000 6.28125rem,transparent 0);height:12.5625rem!important;min-height:12.5625rem!important;background-color:rgba(2,56,92,1);border:1px solid rgba(8,8,8,1);padding:0;border:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview{margin:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li{font-size:1.75rem;min-height:6.25rem;text-align:center;line-height:3.625rem;border-bottom:1px solid rgba(8,8,8,1);color:rgba(245,245,245,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a{color:rgba(245,245,245,1);margin:-1.46875rem -1rem;padding:1.46875rem 1rem;min-height:3.3125rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active{color:rgba(245,245,245,1);background-color:rgba(23,73,115,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview{height:initial;overflow:hidden;width:12.5625rem!important;margin:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li{font-size:1.75rem;float:none;min-height:6.25rem;line-height:3.625rem;text-align:center;border-bottom:1px solid rgba(8,8,8,1);border-right:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a{margin:0;padding:0;line-height:6.25rem;color:rgba(245,245,245,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active{color:rgba(245,245,245,1);background-color:rgba(23,73,115,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext{width:100%;height:100%}.ui-listview li{font-size:2.25rem;min-height:6.5625rem;padding:1.78125rem 2.5rem;border-bottom:1px solid rgba(41,41,41,1);color:rgba(245,245,245,1);text-align:center}.ui-listview li>*{color:rgba(245,245,245,1)}.ui-listview li>a{padding:1.78125rem 2.5rem;margin:-1.8125rem -2.5rem}.ui-listview li.ui-li-active{background-color:rgba(8,56,94,1);color:rgba(245,245,245,1)}.ui-listview li:last-child{border:0}.ui-listview .li-divider{height:2.0625rem;min-height:2.0625rem;line-height:1.9375rem;background-color:rgba(31,31,31,1);color:rgba(0,149,255,1);padding:0}.ui-listview .ui-li-sub-text{color:rgba(0,149,255,1)}.ui-header+.ui-content .ui-listview li:first-child{border-top:1px solid rgba(41,41,41,1)}.ui-listview .ui-li-has-action-icon .ui-action-text::after{background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-delete{background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-setting{background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-add{background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active{background-color:rgba(8,56,94,1);color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-delete:active,.ui-listview .ui-li-has-action-icon .ui-action-setting:active,.ui-listview .ui-li-has-action-icon .ui-action-add:active{background-color:rgba(8,56,94,1);color:rgba(245,245,245,1)}input[type=checkbox]:not(.ui-switch-input){background-color:rgba(0,14,26,1)}input[type=checkbox]:not(.ui-switch-input)::after{background-color:rgba(245,245,245,.3)}input[type=checkbox]:not(.ui-switch-input):checked::before{background-color:rgba(112,186,15,1)}input[type=checkbox]:not(.ui-switch-input)::before{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_check_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(112,186,15,1);width:0;height:56px;position:absolute;-webkit-transition:width 150ms}input[type=checkbox]:not(.ui-switch-input):active{background-color:rgba(0,50,84,.4)}input[type=checkbox]:not(.ui-switch-input):active::after{background-color:rgba(245,245,245,.3)}input[type=checkbox]:not(.ui-switch-input):active:checked::before{background-color:rgba(245,245,245,1)}input[type=radio]{background-color:rgba(0,14,26,1)}input[type=radio]::after{background-color:rgba(245,245,245,.3)}input[type=radio]::before{content:"";background-color:rgba(112,186,15,1);-webkit-mask-image:url(images/Controller_icon/tw_btn_radio_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute;-webkit-transform:scale3d(0,0,0);-webkit-transition:-webkit-transform 150ms}input[type=radio]:checked::before{background-color:rgba(112,186,15,1);-webkit-transform:scale3d(1,1,1)}input[type=radio]:active{background-color:rgba(0,50,84,.4)}input[type=radio]:active:checked::before{background-color:rgba(245,245,245,1)}.ui-default{color:rgba(245,245,245,1);background-color:rgba(2,56,92,1)}a.ui-default:active:hover,.ui-default:enabled:active:hover{background-color:rgba(23,73,115,1)}.ui-default:enabled:focus{background-color:rgba(2,56,92,1)}a.ui-default.ui-state-disabled,.ui-default:disabled{color:rgba(245,245,245,.2);background-color:rgba(3,44,64,1)}.ui-color-red{color:rgba(245,245,245,1);background-color:rgba(207,36,2,1)}a.ui-color-red:active:hover,.ui-color-red:enabled:active:hover{background-color:rgba(222,102,78,1)}.ui-color-red:enabled:focus{background-color:rgba(207,36,2,1)}a.ui-color-red.ui-state-disabled,.ui-color-red:disabled{color:rgba(245,245,245,.2);background-color:rgba(69,11,1,1)}.ui-color-orange{color:rgba(245,245,245,1);background-color:rgba(237,134,0,1)}a.ui-color-orange:active:hover,.ui-color-orange:enabled:active:hover{background-color:rgba(242,171,78,1)}.ui-color-orange:enabled:focus{background-color:rgba(237,134,0,1)}a.ui-color-orange.ui-state-disabled,.ui-color-orange:disabled{color:rgba(245,245,245,.2);background-color:rgba(69,39,5,1)}.ui-color-green{color:rgba(245,245,245,1);background-color:rgba(97,163,16,1)}a.ui-color-green:active:hover,.ui-color-green:enabled:active:hover{background-color:rgba(146,191,90,1)}.ui-color-green:enabled:focus{background-color:rgba(97,163,16,1)}a.ui-color-green.ui-state-disabled,.ui-color-green:disabled{color:rgba(245,245,245,.2);background-color:rgba(50,54,48,1)}.ui-grid-col-1>.ui-btn{border-left:solid 1px rgba(8,8,8,1)}.ui-grid-col-2>.ui-btn{border-left:solid 1px rgba(8,8,8,1)}.ui-grid-col-3>.ui-btn{border-left:solid 1px rgba(8,8,8,1)}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left{border:.8125rem solid rgba(204,223,237,1)}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right{border:.8125rem solid rgba(204,223,237,1)}.ui-progressbar .ui-progressbar-bg{border:.8125rem solid rgba(64,64,64,1)}.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-left,.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-right{border:.3125rem solid rgba(204,223,237,1)}.ui-progressbar.ui-progressbar-small .ui-progressbar-bg{border:.3125rem solid rgba(64,64,64,1)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar{background:-webkit-radial-gradient(center,ellipse cover,transparent 59%,rgba(46,46,46,1) 59%)}.ui-circularindexscrollbar .ui-circularindexscrollbar-index span{color:rgba(84,84,84,1)}.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span{color:rgba(55,161,237,1)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator{background-color:rgba(54,54,54,.85)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text{color:rgba(55,161,237,1)}.ui-drawer{background-color:rgba(8,8,8,1)}.ui-drawer-overlay{background-color:rgba(8,8,8,.8)}.ui-marquee.ui-marquee-gradient::after{background:-webkit-linear-gradient(left,transparent 0,rgba(8,8,8,1) 100%)}.ui-page-indicator-item{background-color:rgba(245,245,245,.4)}.ui-page-indicator-item.ui-page-indicator-active{background-color:rgba(245,245,245,1)}.ui-processing{background-color:rgba(55,161,237,1)}.ui-processing.ui-processing-full-size::after{background-color:rgba(55,161,237,1)}@-webkit-keyframes indeterminate{0%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(55,161,237,1)}25%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(55,161,237,1)}50%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(55,161,237,1)}75%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(55,161,237,1)}100%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(55,161,237,1)}}progress{color:rgba(245,245,245,1)}progress::-webkit-progress-bar{background-color:rgba(64,64,64,1)}progress::-webkit-progress-value{background-color:rgba(204,223,237,1)}progress.ui-progress-indeterminate::-webkit-progress-bar{background-color:rgba(204,223,237,1)}.ui-scrollbar-bouncing-effect.ui-top{display:none}.ui-scrollbar-bouncing-effect.ui-bottom{width:100%;height:6.25rem;left:0;-webkit-mask-size:100% 6.25rem}.ui-scrollbar-bouncing-effect.ui-bottom::before{width:100%;height:6.25rem;-webkit-mask-size:100% 6.25rem}.ui-scrollbar-bouncing-effect.ui-left,.ui-scrollbar-bouncing-effect.ui-right{width:6.25rem;height:100%;top:0;-webkit-mask-size:6.25rem 100%}.ui-scrollbar-bouncing-effect.ui-left::before,.ui-scrollbar-bouncing-effect.ui-right::before{width:6.25rem;height:100%;-webkit-mask-size:6.25rem 100%}.ui-scrollbar-bouncing-effect.ui-bottom{bottom:0;-webkit-mask-image:url(images/Scroller/bouncing_circle_bottom_glow.png)}.ui-scrollbar-bouncing-effect.ui-bottom::before{-webkit-mask-image:url(images/Scroller/bouncing_circle_bottom_edge.png)}.ui-scrollbar-bouncing-effect.ui-left{left:0;-webkit-mask-image:url(images/Scroller/bouncing_circle_left_glow.png)}.ui-scrollbar-bouncing-effect.ui-left::before{-webkit-mask-image:url(images/Scroller/bouncing_circle_left_edge.png)}.ui-scrollbar-bouncing-effect.ui-right{right:0;-webkit-mask-image:url(images/Scroller/bouncing_circle_right_glow.png)}.ui-scrollbar-bouncing-effect.ui-right::before{-webkit-mask-image:url(images/Scroller/bouncing_circle_right_edge.png)}.ui-page .ui-expandable-header{height:128px}.ui-page .ui-expandable-header.ui-header-expand{height:179px}.ui-page .ui-expandable-header.ui-header-expand .ui-title{transform:translate3d(0,105px,0)}.is-circle-test{width:1px}
\ No newline at end of file
diff --git a/lib/tau/wearable/theme/changeable/tau.circle.min.template b/lib/tau/wearable/theme/changeable/tau.circle.min.template
new file mode 100644
index 0000000..9e76311
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/tau.circle.min.template
@@ -0,0 +1 @@
+body{background:B011;color:T011}.ui-header{height:128px;line-height:36px;background-color:B011}.ui-header .ui-title{color:T012;text-align:center;padding-top:54px;margin-left:2.5rem;margin-right:2.5rem;padding-left:1.5rem;padding-right:1.5rem}.ui-header .ui-title.ui-icon{background:none!important;padding-left:1.5rem}.ui-header.ui-has-more .ui-title{padding-right:1.5rem;-webkit-mask-image:-webkit-linear-gradient(left,#000 80%,rgba(0,0,0,0) 95%)}.ui-header.ui-has-more .ui-more{position:fixed;top:163px;right:8px;width:50px;height:36px}.ui-header.ui-has-more .ui-more.ui-icon-overflow{background-color:B052L1}.ui-page{background:B011}.ui-page .ui-footer.ui-bottom-button{overflow:hidden}.ui-page .ui-footer.ui-bottom-button .ui-btn{width:112px;height:112px;position:relative;left:50%;transform:translate3d(-50%,0,0);border-radius:50%;text-indent:-9999px;margin-bottom:-22px}.ui-page .ui-footer.ui-bottom-button .ui-btn:only-child::before{left:50%;transform:translate3d(-50%,0,0)}.ui-page .ui-footer.ui-bottom-button .ui-btn::before{content:"";background-color:F022L1i;-webkit-mask-size:3.75rem 3.75rem;-webkit-mask-repeat:no-repeat;width:3.75rem;height:3.75rem;position:absolute;bottom:23px}.ui-page.ui-scroll-on .ui-content{margin-top:7.625rem;margin-bottom:6.125rem;padding-top:0}.ui-page.ui-scroll-on .ui-header~.ui-content{margin-top:0}.ui-page.ui-scroll-on .ui-content~.ui-footer:not(.ui-expandable-footer){margin-top:-5.3125rem}a{color:T011}.ui-switch-text{margin-top:60px;margin-bottom:48px;font-size:34px;padding:0}.ui-switch-sub-text{margin-top:48px;margin-bottom:55px;font-size:26px;color:T161}.ui-toggleswitch{width:69px;height:49px}.ui-toggleswitch .ui-switch-input::before{-webkit-mask-image:url(images/Controller_icon/toggle_list_circle.png);-webkit-mask-size:69px;background-color:W014L2;-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-toggleswitch .ui-switch-input:active::before{-webkit-transition-duration:0;-moz-transition-duration:0;-o-transition-duration:0;-ms-transition-duration:0;transition-duration:0;background-color:W014L2P}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button{-webkit-transition-duration:0;-moz-transition-duration:0;-o-transition-duration:0;-ms-transition-duration:0;transition-duration:0;background-color:W014L4P}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button::before{background-color:W014L6P}.ui-toggleswitch .ui-switch-activation,.ui-toggleswitch .ui-switch-button{width:49px;height:49px;-webkit-mask-image:url(images/Controller_icon/toggle_list_circle.png);-webkit-mask-size:69px;-webkit-mask-position:0 -49px;background-color:W014L4;-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-toggleswitch .ui-switch-activation::before,.ui-toggleswitch .ui-switch-button::before{-webkit-mask-image:url(images/Controller_icon/toggle_list_circle.png);-webkit-mask-size:69px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 -98px;background-color:W014L6}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button{width:49px;height:49px;-webkit-mask-position:0 -49px;background-color:W014L3;-webkit-transform:translate3d(20px,0,0);-moz-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);-o-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -147px;background-color:W014L5}.ui-toggleswitch .ui-switch-input:checked::before{background-color:W014L1}.ui-toggleswitch .ui-switch-input:checked:active::before{background-color:W014L1P}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button{background-color:W014L3P}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button::before{background-color:W014L5P}.ui-toggleswitch.ui-toggleswitch-large{width:136px;height:78px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button{width:78px;height:78px;-webkit-mask-image:url(images/Controller_icon/toggle_circle.png);-webkit-mask-size:136px;-webkit-mask-position:0 -78px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before{-webkit-mask-image:url(images/Controller_icon/toggle_circle.png);-webkit-mask-size:136px;-webkit-mask-position:0 -156px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before{-webkit-mask-image:url(images/Controller_icon/toggle_circle.png);-webkit-mask-size:136px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button{width:78px;height:78px;-webkit-mask-position:0 -78px;-webkit-transform:translate3d(58px,0,0);-moz-transform:translate3d(58px,0,0);-ms-transform:translate3d(58px,0,0);-o-transform:translate3d(58px,0,0);transform:translate3d(58px,0,0)}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -234px}.ui-popup{border-radius:50%;overflow:hidden;background-color:B061L1E;border:3px solid B061L8}.ui-popup .ui-popup-header{text-align:center;min-height:122px;background-color:B061L1E;color:T091;padding-top:53px;padding-right:61px;padding-bottom:33px;padding-left:61px}.ui-popup .ui-popup-header+.ui-popup-content{padding-top:26px}.ui-popup .ui-popup-content{color:T092;background-color:B061L1E;padding:58px 55px 16px}.ui-popup .ui-popup-content .ui-listview,.ui-popup .ui-popup-content .ui-inline-listview{margin:-1.5625rem -3.4375rem -1rem -3.4375rem}.ui-popup .ui-popup-footer{width:0;height:0}.ui-popup .ui-popup-footer .ui-btn{height:108px;width:108px;border-radius:54px;position:fixed;text-indent:-9999px}.ui-popup .ui-popup-footer .ui-btn.ui-btn-footer-icon::before{content:"";background-color:F022L1i;-webkit-mask-size:48px 48px;-webkit-mask-repeat:no-repeat;width:48px;height:48px;position:absolute}.ui-popup .ui-popup-footer .ui-btn:only-child{top:-53px;left:50%;transform:translate3d(-50%,0,0)}.ui-popup .ui-popup-footer .ui-btn:only-child.ui-btn-footer-icon::before{top:54px;left:50%;transform:translate3d(-50%,0,0)}.ui-popup .ui-popup-footer .ui-btn:active{background-color:B065L4P}.ui-popup .ui-popup-footer .ui-btn:active.ui-btn-footer-icon::before{background-color:F022L1iP}.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1){top:50%;left:-53px;transform:translate3d(0,-50%,0)}.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1).ui-btn-footer-icon::before{top:50%;left:53px;transform:translate3d(0,-50%,0)}.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2){top:50%;right:-53px;transform:translate3d(0,-50%,0)}.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2).ui-btn-footer-icon::before{top:50%;right:53px;transform:translate3d(0,-50%,0)}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content{margin-top:7.625rem;margin-bottom:6.125rem;padding-top:0}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header+.ui-popup-content{margin-top:0;padding-top:26px}.ui-popup.ui-popup-toast{bottom:2.6875rem;border:3px solid B061L7;position:fixed;max-height:13.75rem}.ui-popup.ui-popup-toast .ui-popup-content{background-color:B061L1E;padding:13px 40px 12px;font-size:32px;text-align:center;line-height:42px}.ui-popup.ui-ctxpopup{background-color:transparent;left:50%!important;margin-left:-6.28125rem;top:50%!important;margin-top:-6.28125rem;width:12.5625rem}div.ui-popup.ui-ctxpopup.ui-popup-content-size{width:12.5625rem}.ui-popup.ui-ctxpopup.ui-popup-arrow-t,.ui-popup.ui-ctxpopup.ui-popup-arrow-b,.ui-popup.ui-ctxpopup.ui-popup-arrow-r,.ui-popup.ui-ctxpopup.ui-popup-arrow-l{padding:0}.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow>span,.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow>span,.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow>span,.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow>span{background-color:W011;border:0}.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow,.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow{left:5.15625rem!important}.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow,.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow{top:5.84375rem!important}.ui-popup.ui-ctxpopup .ui-popup-content{-webkit-border-radius:50%;-webkit-mask-image:-webkit-radial-gradient(#000 6.28125rem,transparent 0);height:12.5625rem!important;min-height:12.5625rem!important;background-color:W011;border:1px solid B2112;padding:0;border:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview{margin:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li{font-size:1.75rem;min-height:6.25rem;text-align:center;line-height:3.625rem;border-bottom:1px solid B212;color:T181}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a{color:T181;margin:-1.46875rem -1rem;padding:1.46875rem 1rem;min-height:3.3125rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active{color:T181P;background-color:B2111P}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview{height:initial;overflow:hidden;width:12.5625rem!important;margin:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li{font-size:1.75rem;float:none;min-height:6.25rem;line-height:3.625rem;text-align:center;border-bottom:1px solid B212;border-right:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a{margin:0;padding:0;line-height:6.25rem;color:T181}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active{color:T181P;background-color:B2111P}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext{width:100%;height:100%}.ui-listview li{font-size:2.25rem;min-height:6.5625rem;padding:1.78125rem 2.5rem;border-bottom:1px solid B0222;color:T0211;text-align:center}.ui-listview li>*{color:T0211}.ui-listview li>a{padding:1.78125rem 2.5rem;margin:-1.8125rem -2.5rem}.ui-listview li.ui-li-active{background-color:B041P;color:T0211P}.ui-listview li:last-child{border:0}.ui-listview .li-divider{height:2.0625rem;min-height:2.0625rem;line-height:1.9375rem;background-color:B012;color:T0231;padding:0}.ui-listview .ui-li-sub-text{color:T022}.ui-header+.ui-content .ui-listview li:first-child{border-top:1px solid B0222}.ui-listview .ui-li-has-action-icon .ui-action-text::after{background-color:T011}.ui-listview .ui-li-has-action-icon .ui-action-delete{background-color:F022L1i}.ui-listview .ui-li-has-action-icon .ui-action-setting{background-color:F022L1i}.ui-listview .ui-li-has-action-icon .ui-action-add{background-color:F022L1i}.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active{background-color:B041P;color:T0211P}.ui-listview .ui-li-has-action-icon .ui-action-delete:active,.ui-listview .ui-li-has-action-icon .ui-action-setting:active,.ui-listview .ui-li-has-action-icon .ui-action-add:active{background-color:B041P;color:T0211P}input[type=checkbox]:not(.ui-switch-input){background-color:W012L1}input[type=checkbox]:not(.ui-switch-input)::after{background-color:W231}input[type=checkbox]:not(.ui-switch-input):checked::before{background-color:W012L2}input[type=checkbox]:not(.ui-switch-input)::before{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_check_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:W012L2;width:0;height:56px;position:absolute;-webkit-transition:width 150ms}input[type=checkbox]:not(.ui-switch-input):active{background-color:W012L1P}input[type=checkbox]:not(.ui-switch-input):active::after{background-color:W231P}input[type=checkbox]:not(.ui-switch-input):active:checked::before{background-color:W012L2P}input[type=radio]{background-color:W013L1}input[type=radio]::after{background-color:W241}input[type=radio]::before{content:"";background-color:W013L2;-webkit-mask-image:url(images/Controller_icon/tw_btn_radio_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute;-webkit-transform:scale3d(0,0,0);-webkit-transition:-webkit-transform 150ms}input[type=radio]:checked::before{background-color:W013L2;-webkit-transform:scale3d(1,1,1)}input[type=radio]:active{background-color:W013L1P}input[type=radio]:active:checked::before{background-color:W013L2P}.ui-default{color:T041;background-color:W011}a.ui-default:active:hover,.ui-default:enabled:active:hover{background-color:W011P}.ui-default:enabled:focus{background-color:W011}a.ui-default.ui-state-disabled,.ui-default:disabled{color:T041D;background-color:W011D}.ui-color-red{color:T041;background-color:W012}a.ui-color-red:active:hover,.ui-color-red:enabled:active:hover{background-color:W012P}.ui-color-red:enabled:focus{background-color:W012}a.ui-color-red.ui-state-disabled,.ui-color-red:disabled{color:T041D;background-color:W012D}.ui-color-orange{color:T041;background-color:W013}a.ui-color-orange:active:hover,.ui-color-orange:enabled:active:hover{background-color:W013P}.ui-color-orange:enabled:focus{background-color:W013}a.ui-color-orange.ui-state-disabled,.ui-color-orange:disabled{color:T041D;background-color:W013D}.ui-color-green{color:T041;background-color:W014}a.ui-color-green:active:hover,.ui-color-green:enabled:active:hover{background-color:W014P}.ui-color-green:enabled:focus{background-color:W014}a.ui-color-green.ui-state-disabled,.ui-color-green:disabled{color:T041D;background-color:W014D}.ui-grid-col-1>.ui-btn{border-left:solid 1px B011}.ui-grid-col-2>.ui-btn{border-left:solid 1px B011}.ui-grid-col-3>.ui-btn{border-left:solid 1px B011}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left{border:.8125rem solid B065L2}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right{border:.8125rem solid B065L2}.ui-progressbar .ui-progressbar-bg{border:.8125rem solid B065L3}.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-left,.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-right{border:.3125rem solid B065L2}.ui-progressbar.ui-progressbar-small .ui-progressbar-bg{border:.3125rem solid B065L3}.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar{background:-webkit-radial-gradient(center,ellipse cover,transparent 59%,B0722 59%)}.ui-circularindexscrollbar .ui-circularindexscrollbar-index span{color:T0311}.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span{color:T0311P}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator{background-color:B0731}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text{color:T0312P}.ui-drawer{background-color:B011}.ui-drawer-overlay{background-color:B0511D}.ui-marquee.ui-marquee-gradient::after{background:-webkit-linear-gradient(left,transparent 0,B0211 100%)}.ui-page-indicator-item{background-color:T0211D}.ui-page-indicator-item.ui-page-indicator-active{background-color:W1911}.ui-processing{background-color:B065L6}.ui-processing.ui-processing-full-size::after{background-color:B065L6}@-webkit-keyframes indeterminate{0%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}25%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}50%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}75%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}100%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}}progress{color:T011}progress::-webkit-progress-bar{background-color:B065L3}progress::-webkit-progress-value{background-color:B065L2}progress.ui-progress-indeterminate::-webkit-progress-bar{background-color:B065L2}.ui-scrollbar-bouncing-effect.ui-top{display:none}.ui-scrollbar-bouncing-effect.ui-bottom{width:100%;height:6.25rem;left:0;-webkit-mask-size:100% 6.25rem}.ui-scrollbar-bouncing-effect.ui-bottom::before{width:100%;height:6.25rem;-webkit-mask-size:100% 6.25rem}.ui-scrollbar-bouncing-effect.ui-left,.ui-scrollbar-bouncing-effect.ui-right{width:6.25rem;height:100%;top:0;-webkit-mask-size:6.25rem 100%}.ui-scrollbar-bouncing-effect.ui-left::before,.ui-scrollbar-bouncing-effect.ui-right::before{width:6.25rem;height:100%;-webkit-mask-size:6.25rem 100%}.ui-scrollbar-bouncing-effect.ui-bottom{bottom:0;-webkit-mask-image:url(images/Scroller/bouncing_circle_bottom_glow.png)}.ui-scrollbar-bouncing-effect.ui-bottom::before{-webkit-mask-image:url(images/Scroller/bouncing_circle_bottom_edge.png)}.ui-scrollbar-bouncing-effect.ui-left{left:0;-webkit-mask-image:url(images/Scroller/bouncing_circle_left_glow.png)}.ui-scrollbar-bouncing-effect.ui-left::before{-webkit-mask-image:url(images/Scroller/bouncing_circle_left_edge.png)}.ui-scrollbar-bouncing-effect.ui-right{right:0;-webkit-mask-image:url(images/Scroller/bouncing_circle_right_glow.png)}.ui-scrollbar-bouncing-effect.ui-right::before{-webkit-mask-image:url(images/Scroller/bouncing_circle_right_edge.png)}.ui-page .ui-expandable-header{height:128px}.ui-page .ui-expandable-header.ui-header-expand{height:179px}.ui-page .ui-expandable-header.ui-header-expand .ui-title{transform:translate3d(0,105px,0)}.is-circle-test{width:1px}
\ No newline at end of file
diff --git a/lib/tau/wearable/theme/changeable/tau.circle.template b/lib/tau/wearable/theme/changeable/tau.circle.template
new file mode 100644
index 0000000..5d87f4b
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/tau.circle.template
@@ -0,0 +1,913 @@
+/***************************************************************************
+                  Body
+***************************************************************************/
+/***************************************************************************
+                   Action Bar
+***************************************************************************/
+/****************************************************************************
+               Circle Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Processing
+****************************************************************************/
+/***************************************************************************
+                   Buttons
+***************************************************************************/
+/***************************************************************************
+                   Popup
+***************************************************************************/
+/***************************************************************************
+                   Footer
+***************************************************************************/
+/***************************************************************************
+                   Toast Popup
+***************************************************************************/
+/***************************************************************************
+                   Option Popup
+***************************************************************************/
+/***************************************************************************
+                  circular index scrollbar
+***************************************************************************/
+/***************************************************************************
+                  Listview
+***************************************************************************/
+/****************************************************************************
+               Listview with Marquee
+****************************************************************************/
+/***************************************************************************
+                   Checkbox/Radio
+***************************************************************************/
+/***************************************************************************
+						Page Indicator
+***************************************************************************/
+/****************************************************************************
+		Toggle Switch
+****************************************************************************/
+/***************************************************************************
+                   Scroller
+***************************************************************************/
+/***************************************************************************
+                   More options
+***************************************************************************/
+/************************************************************************/
+/*                           fixedUIStyle.less                          */
+/************************************************************************/
+/* When system font-size is changed, winset size (ex. header, footer, button, etc,
+   include font) also changed. But in UX guide, some UI elements should have fixed
+   size regardless of system font size.
+   So, this less file supports fixed style for some elements.
+   - Layout: header, footer, button
+   - Popup : popup header, popup footer
+   - toggleswitch
+   - progress: text for ratio
+*/
+/***********************************************************************/
+/*                         Layout(FIXED)                               */
+/***********************************************************************/
+/**********************************************************************/
+/*                       Popup(FIXED)                                 */
+/**********************************************************************/
+/**********************************************************************/
+/*                      ToggleSwitch(FIXED)                           */
+/**********************************************************************/
+/************************
+Listview
+*************************/
+/***************************************************************************
+                   Common Style
+
+***************************************************************************/
+/***************************************************************************
+                   Development Tip
+  If you want to implement specific css code of circle device,
+  you should implement specific code here.
+  But when you implement code, you should check duplicate value
+  between common/layout.less and this file.
+  If you have duplicate value, please change static value to variable value.
+***************************************************************************/
+body {
+  background: B011;
+  color: T011;
+}
+.ui-header {
+  height: 128px;
+  line-height: 36px;
+  background-color: B011;
+}
+.ui-header .ui-title {
+  color: T012;
+  text-align: center;
+  padding-top: 54px;
+  margin-left: 2.5rem;
+  margin-right: 2.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+.ui-header .ui-title.ui-icon {
+  background: none !important;
+  padding-left: 1.5rem;
+}
+.ui-header.ui-has-more .ui-title {
+  padding-right: 1.5rem;
+  -webkit-mask-image: -webkit-linear-gradient(left, #000000 80%, rgba(0, 0, 0, 0) 95%);
+}
+.ui-header.ui-has-more .ui-more {
+  position: fixed;
+  top: 163px;
+  right: 8px;
+  width: 50px;
+  height: 36px;
+}
+.ui-header.ui-has-more .ui-more.ui-icon-overflow {
+  background-color: B052L1;
+}
+.ui-page {
+  background: B011;
+}
+.ui-page .ui-footer.ui-bottom-button {
+  overflow: hidden;
+}
+.ui-page .ui-footer.ui-bottom-button .ui-btn {
+  width: 112px;
+  height: 112px;
+  position: relative;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+  border-radius: 50%;
+  text-indent: -9999px;
+  margin-bottom: -22px;
+}
+.ui-page .ui-footer.ui-bottom-button .ui-btn:only-child::before {
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-page .ui-footer.ui-bottom-button .ui-btn::before {
+  content: "";
+  background-color: F022L1i;
+  -webkit-mask-size: 3.75rem 3.75rem;
+  -webkit-mask-repeat: no-repeat;
+  width: 3.75rem;
+  height: 3.75rem;
+  position: absolute;
+  bottom: 23px;
+}
+/***************************************************************************
+                   Page Scroll
+***************************************************************************/
+.ui-page.ui-scroll-on .ui-content {
+  margin-top: 7.625rem;
+  margin-bottom: 6.125rem;
+  padding-top: 0;
+}
+.ui-page.ui-scroll-on .ui-header ~ .ui-content {
+  margin-top: 0;
+}
+.ui-page.ui-scroll-on .ui-content ~ .ui-footer:not(.ui-expandable-footer) {
+  margin-top: -5.3125rem;
+}
+/*
+ * Common definition for theme
+ */
+/***************************************************************
+   default font size (base font from WRT)
+   => small: 13px
+   => normal: 17px
+   => large: 20px
+
+This is only applied to gear2.
+so, we set @font_size_default as 17px on gear2 and it was changed to 16px since gear-S.
+This value only used for @rem_base, not for html font-size
+html font-size is set by WRT base font-size
+***************************************************************/
+a {
+  color: T011;
+}
+/***************************************************************************
+                  toggle switch
+***************************************************************************/
+.ui-switch-text {
+  margin-top: 60px;
+  margin-bottom: 48px;
+  font-size: 34px;
+  padding: 0;
+}
+.ui-switch-sub-text {
+  margin-top: 48px;
+  margin-bottom: 55px;
+  font-size: 26px;
+  color: T161;
+}
+.ui-toggleswitch {
+  width: 69px;
+  height: 49px;
+}
+.ui-toggleswitch .ui-switch-input::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_list_circle.png);
+  -webkit-mask-size: 69px;
+  background-color: W014L2;
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-toggleswitch .ui-switch-input:active::before {
+  -webkit-transition-duration: 0;
+  -moz-transition-duration: 0;
+  -o-transition-duration: 0;
+  -ms-transition-duration: 0;
+  transition-duration: 0;
+  background-color: W014L2P;
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button {
+  -webkit-transition-duration: 0;
+  -moz-transition-duration: 0;
+  -o-transition-duration: 0;
+  -ms-transition-duration: 0;
+  transition-duration: 0;
+  background-color: W014L4P;
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button::before {
+  background-color: W014L6P;
+}
+.ui-toggleswitch .ui-switch-activation,
+.ui-toggleswitch .ui-switch-button {
+  width: 49px;
+  height: 49px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_list_circle.png);
+  -webkit-mask-size: 69px;
+  -webkit-mask-position: 0 -49px;
+  background-color: W014L4;
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-toggleswitch .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-button::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_list_circle.png);
+  -webkit-mask-size: 69px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 -98px;
+  background-color: W014L6;
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button {
+  width: 49px;
+  height: 49px;
+  -webkit-mask-position: 0 -49px;
+  background-color: W014L3;
+  -webkit-transform: translate3d(20px, 0, 0);
+  -moz-transform: translate3d(20px, 0, 0);
+  -ms-transform: translate3d(20px, 0, 0);
+  -o-transform: translate3d(20px, 0, 0);
+  transform: translate3d(20px, 0, 0);
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -147px;
+  background-color: W014L5;
+}
+.ui-toggleswitch .ui-switch-input:checked::before {
+  background-color: W014L1;
+}
+.ui-toggleswitch .ui-switch-input:checked:active::before {
+  background-color: W014L1P;
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button {
+  background-color: W014L3P;
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button::before {
+  background-color: W014L5P;
+}
+.ui-toggleswitch.ui-toggleswitch-large {
+  width: 136px;
+  height: 78px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button {
+  width: 78px;
+  height: 78px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_circle.png);
+  -webkit-mask-size: 136px;
+  -webkit-mask-position: 0 -78px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_circle.png);
+  -webkit-mask-size: 136px;
+  -webkit-mask-position: 0 -156px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_circle.png);
+  -webkit-mask-size: 136px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button {
+  width: 78px;
+  height: 78px;
+  -webkit-mask-position: 0 -78px;
+  -webkit-transform: translate3d(58px, 0, 0);
+  -moz-transform: translate3d(58px, 0, 0);
+  -ms-transform: translate3d(58px, 0, 0);
+  -o-transform: translate3d(58px, 0, 0);
+  transform: translate3d(58px, 0, 0);
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -234px;
+}
+/***************************************************************************
+                  popup
+***************************************************************************/
+/***********************
+Normal Popup
+***********************/
+.ui-popup {
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: B061L1E;
+  border: 3px solid B061L8;
+}
+.ui-popup .ui-popup-header {
+  text-align: center;
+  min-height: 122px;
+  background-color: B061L1E;
+  color: T091;
+  padding-top: 53px;
+  padding-right: 61px;
+  padding-bottom: 33px;
+  padding-left: 61px;
+}
+.ui-popup .ui-popup-header + .ui-popup-content {
+  padding-top: 26px;
+}
+.ui-popup .ui-popup-content {
+  color: T092;
+  background-color: B061L1E;
+  padding: 58px 55px 16px 55px;
+}
+.ui-popup .ui-popup-content .ui-listview,
+.ui-popup .ui-popup-content .ui-inline-listview {
+  margin: -1.5625rem -3.4375rem -1rem -3.4375rem;
+}
+.ui-popup .ui-popup-footer {
+  width: 0;
+  height: 0;
+}
+.ui-popup .ui-popup-footer .ui-btn {
+  height: 108px;
+  width: 108px;
+  border-radius: 54px;
+  position: fixed;
+  text-indent: -9999px;
+}
+.ui-popup .ui-popup-footer .ui-btn.ui-btn-footer-icon::before {
+  content: "";
+  background-color: F022L1i;
+  -webkit-mask-size: 48px 48px;
+  -webkit-mask-repeat: no-repeat;
+  width: 48px;
+  height: 48px;
+  position: absolute;
+}
+.ui-popup .ui-popup-footer .ui-btn:only-child {
+  top: -53px;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:only-child.ui-btn-footer-icon::before {
+  top: 54px;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:active {
+  background-color: B065L4P;
+}
+.ui-popup .ui-popup-footer .ui-btn:active.ui-btn-footer-icon::before {
+  background-color: F022L1iP;
+}
+.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1) {
+  top: 50%;
+  left: -53px;
+  transform: translate3d(0, -50%, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1).ui-btn-footer-icon::before {
+  top: 50%;
+  left: 53px;
+  transform: translate3d(0, -50%, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2) {
+  top: 50%;
+  right: -53px;
+  transform: translate3d(0, -50%, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2).ui-btn-footer-icon::before {
+  top: 50%;
+  right: 53px;
+  transform: translate3d(0, -50%, 0);
+}
+/***********************
+Popup Container Scroll
+***********************/
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content {
+  margin-top: 7.625rem;
+  margin-bottom: 6.125rem;
+  padding-top: 0;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header + .ui-popup-content {
+  margin-top: 0;
+  padding-top: 26px;
+}
+/****************************************
+Popup Toast
+****************************************/
+.ui-popup.ui-popup-toast {
+  bottom: 2.6875rem;
+  border: 3px solid B061L7;
+  position: fixed;
+  max-height: 13.75rem;
+}
+.ui-popup.ui-popup-toast .ui-popup-content {
+  background-color: B061L1E;
+  padding: 13px 40px 12px;
+  font-size: 32px;
+  text-align: center;
+  line-height: 42px;
+}
+/***********************
+Option Popup
+***********************/
+.ui-popup.ui-ctxpopup {
+  background-color: transparent;
+  left: 50% !important;
+  margin-left: -6.28125rem;
+  top: 50% !important;
+  margin-top: -6.28125rem;
+  width: 12.5625rem;
+}
+div.ui-popup.ui-ctxpopup.ui-popup-content-size {
+  width: 12.5625rem;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l {
+  padding: 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow > span,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow > span,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow > span,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow > span {
+  background-color: W011;
+  border: 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow {
+  left: 5.15625rem !important;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow {
+  top: 5.84375rem !important;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content {
+  -webkit-border-radius: 50%;
+  -webkit-mask-image: -webkit-radial-gradient(#000000 6.28125rem, transparent 0);
+  height: 12.5625rem !important;
+  min-height: 12.5625rem !important;
+  background-color: W011;
+  border: 1px solid B2112;
+  padding: 0;
+  border: 0;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview {
+  margin: 0;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li {
+  font-size: 1.75rem;
+  min-height: 6.25rem;
+  text-align: center;
+  line-height: 3.625rem;
+  border-bottom: 1px solid B212;
+  color: T181;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a {
+  color: T181;
+  margin: -1.46875rem -1rem;
+  padding: 1.46875rem 1rem;
+  min-height: 3.3125rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active {
+  color: T181P;
+  background-color: B2111P;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview {
+  height: initial;
+  overflow: hidden;
+  width: 12.5625rem !important;
+  margin: 0;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li {
+  font-size: 1.75rem;
+  float: none;
+  min-height: 6.25rem;
+  line-height: 3.625rem;
+  text-align: center;
+  border-bottom: 1px solid B212;
+  border-right: 0;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a {
+  margin: 0;
+  padding: 0;
+  line-height: 6.25rem;
+  color: T181;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active {
+  color: T181P;
+  background-color: B2111P;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext {
+  width: 100%;
+  height: 100%;
+}
+/***************************************************************************
+                  listview
+***************************************************************************/
+.ui-listview li {
+  font-size: 2.25rem;
+  min-height: 6.5625rem;
+  padding: 1.78125rem 2.5rem;
+  border-bottom: 1px solid B0222;
+  color: T0211;
+  text-align: center;
+}
+.ui-listview li > * {
+  color: T0211;
+}
+.ui-listview li > a {
+  padding: 1.78125rem 2.5rem;
+  margin: -1.8125rem -2.5rem;
+}
+.ui-listview li.ui-li-active {
+  background-color: B041P;
+  color: T0211P;
+}
+.ui-listview li:last-child {
+  border: 0;
+}
+.ui-listview .li-divider {
+  height: 2.0625rem;
+  min-height: 2.0625rem;
+  line-height: 1.9375rem;
+  background-color: B012;
+  color: T0231;
+  padding: 0;
+}
+.ui-listview .ui-li-sub-text {
+  color: T022;
+}
+.ui-header + .ui-content .ui-listview li:first-child {
+  border-top: 1px solid B0222;
+}
+/***************************************************************************
+                  listview extra
+***************************************************************************/
+.ui-listview .ui-li-has-action-icon .ui-action-text::after {
+  background-color: T011;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete {
+  background-color: F022L1i;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-setting {
+  background-color: F022L1i;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-add {
+  background-color: F022L1i;
+}
+.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active {
+  background-color: B041P;
+  color: T0211P;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete:active,
+.ui-listview .ui-li-has-action-icon .ui-action-setting:active,
+.ui-listview .ui-li-has-action-icon .ui-action-add:active {
+  background-color: B041P;
+  color: T0211P;
+}
+/***************************************************************************
+                  checkbox / radio button
+***************************************************************************/
+input[type="checkbox"]:not(.ui-switch-input) {
+  background-color: W012L1;
+}
+input[type="checkbox"]:not(.ui-switch-input)::after {
+  background-color: W231;
+}
+input[type="checkbox"]:not(.ui-switch-input):checked::before {
+  background-color: W012L2;
+}
+input[type="checkbox"]:not(.ui-switch-input)::before {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: W012L2;
+  width: 0;
+  height: 56px;
+  position: absolute;
+  -webkit-transition: width 150ms;
+}
+input[type="checkbox"]:not(.ui-switch-input):active {
+  background-color: W012L1P;
+}
+input[type="checkbox"]:not(.ui-switch-input):active::after {
+  background-color: W231P;
+}
+input[type="checkbox"]:not(.ui-switch-input):active:checked::before {
+  background-color: W012L2P;
+}
+input[type="radio"] {
+  background-color: W013L1;
+}
+input[type="radio"]::after {
+  background-color: W241;
+}
+input[type="radio"]::before {
+  content: "";
+  background-color: W013L2;
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+  -webkit-transform: scale3d(0, 0, 0);
+  -webkit-transition: -webkit-transform 150ms;
+}
+input[type="radio"]:checked::before {
+  background-color: W013L2;
+  -webkit-transform: scale3d(1, 1, 1);
+}
+input[type="radio"]:active {
+  background-color: W013L1P;
+}
+input[type="radio"]:active:checked::before {
+  background-color: W013L2P;
+}
+/***************************************************************************
+                  button
+***************************************************************************/
+.ui-default {
+  color: T041;
+  background-color: W011;
+}
+a.ui-default:active:hover,
+.ui-default:enabled:active:hover {
+  background-color: W011P;
+}
+.ui-default:enabled:focus {
+  background-color: W011;
+}
+a.ui-default.ui-state-disabled,
+.ui-default:disabled {
+  color: T041D;
+  background-color: W011D;
+}
+.ui-color-red {
+  color: T041;
+  background-color: W012;
+}
+a.ui-color-red:active:hover,
+.ui-color-red:enabled:active:hover {
+  background-color: W012P;
+}
+.ui-color-red:enabled:focus {
+  background-color: W012;
+}
+a.ui-color-red.ui-state-disabled,
+.ui-color-red:disabled {
+  color: T041D;
+  background-color: W012D;
+}
+.ui-color-orange {
+  color: T041;
+  background-color: W013;
+}
+a.ui-color-orange:active:hover,
+.ui-color-orange:enabled:active:hover {
+  background-color: W013P;
+}
+.ui-color-orange:enabled:focus {
+  background-color: W013;
+}
+a.ui-color-orange.ui-state-disabled,
+.ui-color-orange:disabled {
+  color: T041D;
+  background-color: W013D;
+}
+.ui-color-green {
+  color: T041;
+  background-color: W014;
+}
+a.ui-color-green:active:hover,
+.ui-color-green:enabled:active:hover {
+  background-color: W014P;
+}
+.ui-color-green:enabled:focus {
+  background-color: W014;
+}
+a.ui-color-green.ui-state-disabled,
+.ui-color-green:disabled {
+  color: T041D;
+  background-color: W014D;
+}
+.ui-grid-col-1 > .ui-btn {
+  border-left: solid 1px B011;
+}
+.ui-grid-col-2 > .ui-btn {
+  border-left: solid 1px B011;
+}
+.ui-grid-col-3 > .ui-btn {
+  border-left: solid 1px B011;
+}
+/***************************************************************************
+                  circle progress bar
+***************************************************************************/
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left {
+  border: 0.8125rem solid B065L2;
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right {
+  border: 0.8125rem solid B065L2;
+}
+.ui-progressbar .ui-progressbar-bg {
+  border: 0.8125rem solid B065L3;
+}
+.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-left,
+.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-right {
+  border: 0.3125rem solid B065L2;
+}
+.ui-progressbar.ui-progressbar-small .ui-progressbar-bg {
+  border: 0.3125rem solid B065L3;
+}
+/***************************************************************************
+                  circular index scroll bar
+***************************************************************************/
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar {
+  background: -webkit-radial-gradient(center, ellipse cover, transparent 59%, B0722 59%);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index span {
+  color: T0311;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span {
+  color: T0311P;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator {
+  background-color: B0731;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text {
+  color: T0312P;
+}
+/***************************************************************************
+                  drawer
+***************************************************************************/
+.ui-drawer {
+  background-color: B011;
+}
+.ui-drawer-overlay {
+  background-color: B0511D;
+}
+/***************************************************************************
+                  marquee
+***************************************************************************/
+.ui-marquee.ui-marquee-gradient::after {
+  background: -webkit-linear-gradient(left, transparent 0%, B0211 100%);
+}
+/***************************************************************************
+                  page indicator
+***************************************************************************/
+.ui-page-indicator-item {
+  background-color: T0211D;
+}
+.ui-page-indicator-item.ui-page-indicator-active {
+  background-color: W1911;
+}
+/***************************************************************************
+                  processing
+***************************************************************************/
+.ui-processing {
+  background-color: B065L6;
+}
+.ui-processing.ui-processing-full-size::after {
+  background-color: B065L6;
+}
+/***************************************************************************
+                  progress
+***************************************************************************/
+@-webkit-keyframes indeterminate {
+  0% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+  25% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+  50% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+  75% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+  100% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+}
+progress {
+  color: T011;
+}
+progress::-webkit-progress-bar {
+  background-color: B065L3;
+}
+progress::-webkit-progress-value {
+  background-color: B065L2;
+}
+progress.ui-progress-indeterminate::-webkit-progress-bar {
+  background-color: B065L2;
+}
+.ui-scrollbar-bouncing-effect.ui-top {
+  display: none;
+}
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  width: 100%;
+  height: 6.25rem;
+  left: 0;
+  -webkit-mask-size: 100% 6.25rem;
+}
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  width: 100%;
+  height: 6.25rem;
+  -webkit-mask-size: 100% 6.25rem;
+}
+.ui-scrollbar-bouncing-effect.ui-left,
+.ui-scrollbar-bouncing-effect.ui-right {
+  width: 6.25rem;
+  height: 100%;
+  top: 0;
+  -webkit-mask-size: 6.25rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-left::before,
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  width: 6.25rem;
+  height: 100%;
+  -webkit-mask-size: 6.25rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  bottom: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_bottom_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_bottom_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left {
+  left: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_left_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_left_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right {
+  right: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_right_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_right_edge.png");
+}
+/***************************************************************************
+				   Footer Style (New style)
+***************************************************************************/
+.ui-page .ui-expandable-header {
+  height: 128px;
+}
+.ui-page .ui-expandable-header.ui-header-expand {
+  height: 179px;
+}
+.ui-page .ui-expandable-header.ui-header-expand .ui-title {
+  transform: translate3d(0, 105px, 0);
+}
+.is-circle-test {
+  width: 1px;
+}
diff --git a/lib/tau/wearable/theme/changeable/tau.css b/lib/tau/wearable/theme/changeable/tau.css
new file mode 100644
index 0000000..4571b63
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/tau.css
@@ -0,0 +1,3005 @@
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/***************************************************************************
+                  Body
+***************************************************************************/
+/***************************************************************************
+                   Action Bar
+***************************************************************************/
+/****************************************************************************
+               Circle Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Processing
+****************************************************************************/
+/****************************************************************************
+		Toggle Switch
+****************************************************************************/
+/***************************************************************************
+                   Buttons
+***************************************************************************/
+/***************************************************************************
+                   Popup
+***************************************************************************/
+/***************************************************************************
+                   Option Popup
+***************************************************************************/
+/***************************************************************************
+                  index scrollbar (vertical)
+***************************************************************************/
+/***************************************************************************
+                  circular index scrollbar
+***************************************************************************/
+/***************************************************************************
+                  Listview
+***************************************************************************/
+/****************************************************************************
+               Listview with Marquee
+****************************************************************************/
+/***************************************************************************
+                   Scroller
+***************************************************************************/
+/***************************************************************************
+                   Swipe list
+***************************************************************************/
+/***************************************************************************
+                   Checkbox/Radio
+***************************************************************************/
+/***************************************************************************
+						Page Indicator
+***************************************************************************/
+/************************************************************************/
+/*                           fixedUIStyle.less                          */
+/************************************************************************/
+/* When system font-size is changed, winset size (ex. header, footer, button, etc,
+   include font) also changed. But in UX guide, some UI elements should have fixed
+   size regardless of system font size.
+   So, this less file supports fixed style for some elements.
+   - Layout: header, footer, button
+   - Popup : popup header, popup footer
+   - toggleswitch
+   - progress: text for ratio
+*/
+/***********************************************************************/
+/*                         Layout(FIXED)                               */
+/***********************************************************************/
+/**********************************************************************/
+/*                        Button(FIXED)                               */
+/**********************************************************************/
+/**********************************************************************/
+/*                       Popup(FIXED)                                 */
+/**********************************************************************/
+/**********************************************************************/
+/*                      ToggleSwitch(FIXED)                           */
+/**********************************************************************/
+/*********************************************************************/
+/*                     Progress(FIXED)                               */
+/*********************************************************************/
+/************************
+Listview
+*************************/
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+/*
+ * default outline set none
+ */
+* {
+  outline: none;
+}
+/*
+ * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+  display: block;
+}
+/*
+ * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+audio,
+canvas,
+video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+/*
+ * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
+ * and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+[hidden] {
+  display: none;
+}
+/* ==========================================================================
+   Base
+   ========================================================================== */
+/*
+ * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+ *	`em` units.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ *	user zoom.
+ */
+html {
+  font-size: 100%;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+}
+/*
+ * Addresses `font-family` inconsistency between `textarea` and other form
+ * elements.
+ */
+html,
+button,
+input,
+select,
+textarea {
+  font-family: Tizen, Samsung Sans, Helvetica;
+}
+/*
+ * Addresses margins handled incorrectly in IE 6/7.
+ */
+body {
+  margin: 0;
+}
+/* ==========================================================================
+   Links
+   ========================================================================== */
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+/*
+ * Addresses font sizes and margins set differently in IE 6/7.
+ * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
+ * and Chrome.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+h3 {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+h4 {
+  font-size: 1em;
+  margin: 1.33em 0;
+}
+h5 {
+  font-size: 0.83em;
+  margin: 1.67em 0;
+}
+h6 {
+  font-size: 0.75em;
+  margin: 2.33em 0;
+}
+/*
+ * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
+ */
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+/*
+ * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+ */
+b,
+strong {
+  font-weight: bold;
+}
+blockquote {
+  margin: 1em 40px;
+}
+/*
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+dfn {
+  font-style: italic;
+}
+/*
+ * Addresses styling not present in IE 6/7/8/9.
+ */
+mark {
+  background: #ff0;
+  color: #000;
+}
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+p,
+pre {
+  margin: 1em 0;
+}
+/*
+ * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+/*
+ * Addresses CSS quotes not supported in IE 6/7.
+ */
+q {
+  quotes: none;
+}
+/*
+ * Addresses `quotes` property not supported in Safari 4.
+ */
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+small {
+  font-size: 75%;
+}
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+/* ==========================================================================
+   Lists
+   ========================================================================== */
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+dl,
+menu,
+ol,
+ul {
+  margin: 1em 0;
+}
+dd {
+  margin: 0 0 0 40px;
+}
+/*
+ * Addresses paddings set differently in IE 6/7.
+ */
+menu,
+ol,
+ul {
+  padding: 0 0 0 40px;
+}
+/*
+ * Corrects list images handled incorrectly in IE 7.
+ */
+nav ul,
+nav ol {
+  list-style: none;
+  list-style-image: none;
+}
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+/*
+ * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improves image quality when scaled in IE 7.
+ */
+img {
+  border: 0;
+  /* 1 */
+  -ms-interpolation-mode: bicubic;
+  /* 2 */
+}
+/*
+ * Corrects overflow displayed oddly in IE 9.
+ */
+svg:not(:root) {
+  overflow: hidden;
+}
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+/*
+ * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+figure {
+  margin: 0;
+}
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+/*
+ * Corrects margin displayed oddly in IE 6/7.
+ */
+form {
+  margin: 0;
+}
+/*
+ * Define consistent border, margin, and padding.
+ */
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+/*
+ * 1. Corrects color not being inherited in IE 6/7/8/9.
+ * 2. Corrects text not wrapping in Firefox 3.
+ * 3. Corrects alignment displayed oddly in IE 6/7.
+ */
+legend {
+  border: 0;
+  /* 1 */
+  padding: 0;
+  white-space: normal;
+  /* 2 */
+  *margin-left: -7px;
+  /* 3 */
+}
+/*
+ * 1. Corrects font size not being inherited in all browsers.
+ * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *	and Chrome.
+ * 3. Improves appearance and consistency in all browsers.
+ */
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  vertical-align: baseline;
+  /* 3 */
+  *vertical-align: middle;
+  /* 3 */
+}
+/*
+ * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+button,
+input {
+  line-height: normal;
+}
+/*
+ * Re-set default cursor for disabled elements.
+ */
+button[disabled],
+input[disabled] {
+  cursor: default;
+}
+input[type="time"],
+input[type="date"] {
+  color: #000000;
+}
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *	(include `-moz` to future-proof).
+ */
+input[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  /* 2 */
+  box-sizing: content-box;
+}
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+/*
+ * Removes inner padding and border in Firefox 3+.
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+/*
+ * 1. Removes default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+textarea {
+  overflow: auto;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+}
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+/*
+ * Remove most spacing between table cells.
+ */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/*
+ * Common definition for theme
+ */
+/***************************************************************
+   default font size (base font from WRT)
+   => small: 13px
+   => normal: 17px
+   => large: 20px
+
+This is only applied to gear2.
+so, we set @font_size_default as 17px on gear2 and it was changed to 16px since gear-S.
+This value only used for @rem_base, not for html font-size
+html font-size is set by WRT base font-size
+***************************************************************/
+/******************************
+  z-index order collection
+ ******************************/
+/***************************************************************************
+                   Common Style
+***************************************************************************/
+.screen-hidden {
+  visibility: hidden;
+  position: absolute;
+  top: -10000em;
+  left: -10000em;
+}
+/***************************************************************************
+                   Default Style.
+***************************************************************************/
+button,
+input {
+  outline: none;
+  cursor: pointer;
+}
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none !important;
+  color: rgba(245, 245, 245, 1);
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+img {
+  margin: 0;
+  padding: 0;
+}
+/******************************
+  Global LESS mixin collection
+ ******************************/
+/***************************************************************************
+                   Common Style
+***************************************************************************/
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+  height: 100%;
+  font-size: 2.125rem;
+  font-family: Tizen, Samsung Sans, Helvetica;
+  background: rgba(8, 8, 8, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(8, 8, 8, 1);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /* overrides webkit link color */
+}
+.ui-page.ui-page-active {
+  display: block;
+}
+.ui-page.ui-page-build {
+  display: block;
+  visibility: hidden;
+}
+.scrolling-mode-touch {
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-content {
+  width: auto;
+  height: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-header {
+  position: relative;
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  background-color: rgba(0, 31, 56, 1);
+}
+.ui-header .ui-title {
+  color: rgba(116, 196, 252, 1);
+  font-size: 32px;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  margin: 0px;
+  padding-left: 16px;
+  padding-right: 16px;
+  -webkit-mask-image: -webkit-linear-gradient(left, #000000 80%, rgba(0, 0, 0, 0) 95%);
+}
+.ui-header .ui-title.ui-icon {
+  padding-left: 60px;
+  background-position: 16px 14px;
+  background-size: 34px 34px;
+  background-repeat: no-repeat;
+}
+.ui-header.ui-has-more .ui-title {
+  padding-right: 78px;
+  -webkit-mask-image: -webkit-linear-gradient(left, #000000 70%, rgba(0, 0, 0, 0) 75%);
+}
+.ui-header button.ui-more,
+.ui-header input.ui-more {
+  border: 0 none;
+  padding: 0;
+}
+.ui-header .ui-more-disable {
+  cursor: default;
+  background-color: transparent;
+}
+.ui-header .ui-more {
+  display: block;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 68px;
+  height: 100%;
+  overflow: hidden;
+  text-indent: -1000em;
+  background-position: center center;
+  background-color: transparent;
+  cursor: pointer;
+}
+.ui-header .ui-more:active {
+  background-color: rgba(23, 73, 115, 1) !important;
+}
+.ui-header .ui-more.ui-icon-detail {
+  background-color: rgba(116, 196, 252, 1);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-detail[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: rgba(116, 196, 252, 0.2);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-overflow {
+  background-color: rgba(116, 196, 252, 1);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position-x: 0.9375rem;
+  -webkit-mask-position-y: 50%;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-overflow[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: rgba(116, 196, 252, 0.2);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-selectall {
+  background-color: rgba(116, 196, 252, 1);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-selectall[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: rgba(116, 196, 252, 0.2);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-footer {
+  width: 100%;
+  height: 85px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+/***************************************************************************
+                   Page Scroll
+***************************************************************************/
+.ui-page.ui-scroll-on {
+  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-page.ui-scroll-on .ui-content {
+  height: auto !important;
+}
+.ui-page.ui-scroll-on .ui-footer {
+  position: relative;
+}
+.ui-header.ui-fixed {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+}
+.ui-footer.ui-fixed {
+  position: fixed !important;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  -webkit-transform: translate3d(0, 0, 0);
+}
+/***************************************************************************
+                   Grid layout
+***************************************************************************/
+.ui-grid-col > * {
+  float: left;
+}
+.ui-page .ui-grid-col-1 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-1 > * {
+  width: 100%;
+}
+.ui-page .ui-grid-col-2 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-2 > * {
+  width: 50%;
+}
+.ui-page .ui-grid-col-3 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-3 > * {
+  width: 33.333333333333336%;
+}
+.ui-grid-row > * {
+  display: block;
+}
+/*
+ * Progressbar
+ */
+@-webkit-keyframes indeterminate {
+  0% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(0, 77, 153, 1);
+  }
+  25% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(0, 77, 153, 1);
+  }
+  50% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(0, 77, 153, 1);
+  }
+  75% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(0, 77, 153, 1);
+  }
+  100% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(0, 77, 153, 1);
+  }
+}
+progress {
+  position: relative;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: 0.875rem;
+  margin-bottom: 0.875rem;
+  color: rgba(245, 245, 245, 1);
+  width: 100%;
+  height: 0.375rem;
+  -webkit-appearance: none;
+  border: none;
+}
+progress::-webkit-progress-bar {
+  position: relative;
+  background-color: rgba(71, 71, 71, 1);
+  border-radius: 0.125rem;
+  overflow: hidden;
+}
+progress::-webkit-progress-value {
+  background-color: rgba(55, 161, 237, 1);
+  height: 0.375rem;
+  border-radius: 0.125rem;
+  overflow: hidden;
+}
+progress.ui-progress-indeterminate::-webkit-progress-bar {
+  background-color: rgba(55, 161, 237, 1);
+}
+progress.ui-progress-indeterminate::-webkit-progress-value {
+  background-size: 100% 100%;
+  -webkit-animation: indeterminate 150ms infinite;
+}
+.ui-progress-proportion {
+  display: inline-block;
+  float: left;
+  font-size: 20px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: -0.625rem;
+}
+.ui-progress-ratio {
+  display: inline-block;
+  float: right;
+  font-size: 20px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: -0.625rem;
+}
+.ui-circle-progress {
+  display: none;
+}
+.ui-progressbar.ui-progressbar-full {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.ui-progressbar.ui-progressbar-large {
+  width: 6.25rem;
+  height: 6.25rem;
+}
+.ui-progressbar.ui-progressbar-medium {
+  width: 5.25rem;
+  height: 5.25rem;
+}
+.ui-progressbar.ui-progressbar-small {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+.ui-progressbar {
+  position: relative;
+  display: inline-block;
+  pointer-events: none;
+}
+.ui-progressbar .ui-progressbar-value.ui-progressbar-half {
+  clip: rect(auto, auto, auto, auto);
+}
+.ui-progressbar .ui-progressbar-value.ui-progressbar-half .ui-progressbar-value-right {
+  -webkit-transform: rotate(180deg);
+}
+.ui-progressbar .ui-progressbar-value {
+  clip: rect(0, 1em, 1em, 0.5em);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left {
+  border: 0.5rem solid rgba(55, 161, 237, 1);
+  border-radius: 50%;
+  clip: rect(0, 0.5em, 1em, 0);
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right {
+  border: 0.5rem solid rgba(55, 161, 237, 1);
+  border-radius: 50%;
+  clip: rect(0, 0.5em, 1em, 0);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-bg {
+  border: 0.5rem solid rgba(71, 71, 71, 1);
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+}
+/*
+ * toggle switch
+ */
+.ui-switch {
+  width: 100%;
+  color: rgba(245, 245, 245, 1);
+}
+.ui-switch-inneroffset,
+.ui-switch-handler {
+  display: none;
+}
+.ui-switch-text {
+  margin-top: 30px;
+  margin-bottom: 40px;
+  padding: 0 30px;
+  font-size: 34px;
+  text-align: center;
+}
+.ui-switch-sub-text {
+  margin-top: 48px;
+  margin-bottom: 55px;
+  font-size: 26px;
+  text-align: center;
+  color: T161;
+}
+.ui-toggleswitch {
+  position: relative;
+  display: inline-block;
+  width: 92px;
+  height: 49px;
+}
+.ui-toggleswitch .ui-switch-input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-appearance: none;
+  display: block;
+}
+.ui-toggleswitch .ui-switch-input::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 0;
+  background-color: rgba(97, 96, 96, 1);
+  z-index: 0;
+}
+.ui-toggleswitch .ui-switch-input:active::before {
+  background-color: rgba(97, 96, 96, 1);
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button {
+  background-color: rgba(173, 173, 173, 1);
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button::before {
+  background-color: rgba(97, 96, 96, 1);
+}
+.ui-toggleswitch .ui-switch-activation,
+.ui-toggleswitch .ui-switch-button {
+  width: 59px;
+  height: 49px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 -49px;
+  background-color: rgba(245, 245, 245, 1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+.ui-toggleswitch .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-button::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 -98px;
+  background-color: rgba(128, 128, 128, 1);
+  top: 0;
+  left: 0;
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button {
+  width: 59px;
+  height: 49px;
+  -webkit-mask-position: 0 -49px;
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-transform: translate3d(33px, 0, 0);
+  -moz-transform: translate3d(33px, 0, 0);
+  -ms-transform: translate3d(33px, 0, 0);
+  -o-transform: translate3d(33px, 0, 0);
+  transform: translate3d(33px, 0, 0);
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -147px;
+  background-color: rgba(112, 186, 15, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked::before {
+  background-color: rgba(112, 186, 15, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active::before {
+  background-color: rgba(71, 97, 37, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button {
+  background-color: rgba(173, 173, 173, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button::before {
+  background-color: rgba(71, 97, 37, 1);
+}
+.ui-toggleswitch.ui-toggleswitch-large {
+  width: 207px;
+  height: 110px;
+  display: block;
+  margin: 0 auto;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button {
+  width: 132px;
+  height: 110px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 207px;
+  -webkit-mask-position: 0 -110px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-position: 0 -220px;
+  -webkit-mask-size: 207px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 207px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button {
+  width: 132px;
+  height: 110px;
+  -webkit-mask-position: 0 -110px;
+  -webkit-transform: translate3d(75px, 0, 0);
+  -moz-transform: translate3d(75px, 0, 0);
+  -ms-transform: translate3d(75px, 0, 0);
+  -o-transform: translate3d(75px, 0, 0);
+  transform: translate3d(75px, 0, 0);
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -330px;
+}
+/***********************
+Processing
+***********************/
+@-webkit-keyframes rotating {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+.ui-processing {
+  background-color: rgba(0, 123, 255, 1);
+  -webkit-mask-image: url("images/Processing/tw_progress_small_loading_bg.png");
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-animation: rotating 1s linear infinite;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin: 0 auto;
+  margin-top: 2.125rem;
+  margin-bottom: 0.875rem;
+}
+.ui-processing-text {
+  margin: 0 auto;
+  text-align: center;
+  width: 10.5rem;
+  font-size: 1.5rem;
+}
+.ui-processing.ui-processing-full-size {
+  background-color: transparent;
+  -webkit-mask-image: none;
+  -webkit-animation: none;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  margin: 0;
+}
+.ui-processing.ui-processing-full-size::after {
+  content: "";
+  background-color: rgba(55, 161, 237, 1);
+  -webkit-mask-image: url("images/Processing/tw_progress_full_loading_bg.png");
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-animation: rotating 1s linear infinite;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-btn {
+  display: block;
+  padding-top: 28.5px;
+  padding-right: 10px;
+  padding-bottom: 28.5px;
+  padding-left: 10px;
+  margin: 0px;
+  font-size: 32px;
+  line-height: 28px;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  border: 0 none;
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(2, 56, 92, 1);
+}
+a.ui-btn:active:hover,
+.ui-btn:enabled:active:hover {
+  background-color: rgba(23, 73, 115, 1);
+}
+.ui-btn:enabled:focus {
+  background-color: rgba(2, 56, 92, 1);
+}
+a.ui-btn.ui-state-disabled,
+.ui-btn:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(3, 44, 64, 1);
+  cursor: default;
+}
+.ui-btn.ui-multiline {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.ui-btn.ui-inline {
+  display: inline-block;
+}
+.ui-btn.ui-btn-icon {
+  background-position: center center;
+  height: 76px;
+  text-indent: -1000em;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  background-size: 60px 60px;
+}
+.ui-default {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(2, 56, 92, 1);
+}
+a.ui-default:active:hover,
+.ui-default:enabled:active:hover {
+  background-color: rgba(23, 73, 115, 1);
+}
+.ui-default:enabled:focus {
+  background-color: rgba(2, 56, 92, 1);
+}
+a.ui-default.ui-state-disabled,
+.ui-default:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(3, 44, 64, 1);
+  cursor: default;
+}
+.ui-color-red {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(207, 36, 2, 1);
+}
+a.ui-color-red:active:hover,
+.ui-color-red:enabled:active:hover {
+  background-color: rgba(222, 102, 78, 1);
+}
+.ui-color-red:enabled:focus {
+  background-color: rgba(207, 36, 2, 1);
+}
+a.ui-color-red.ui-state-disabled,
+.ui-color-red:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(69, 11, 1, 1);
+  cursor: default;
+}
+.ui-color-orange {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(237, 134, 0, 1);
+}
+a.ui-color-orange:active:hover,
+.ui-color-orange:enabled:active:hover {
+  background-color: rgba(242, 171, 78, 1);
+}
+.ui-color-orange:enabled:focus {
+  background-color: rgba(237, 134, 0, 1);
+}
+a.ui-color-orange.ui-state-disabled,
+.ui-color-orange:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(69, 39, 5, 1);
+  cursor: default;
+}
+.ui-color-green {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(97, 163, 16, 1);
+}
+a.ui-color-green:active:hover,
+.ui-color-green:enabled:active:hover {
+  background-color: rgba(146, 191, 90, 1);
+}
+.ui-color-green:enabled:focus {
+  background-color: rgba(97, 163, 16, 1);
+}
+a.ui-color-green.ui-state-disabled,
+.ui-color-green:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(50, 54, 48, 1);
+  cursor: default;
+}
+.ui-btn:focus,
+.ui-btn:active {
+  outline: none;
+}
+a.ui-btn {
+  text-decoration: none;
+  box-sizing: border-box;
+}
+button.ui-btn,
+input.ui-btn {
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 100%;
+}
+button.ui-btn.ui-inline,
+input.ui-btn.ui-inline {
+  display: inline-block;
+  width: auto;
+}
+.ui-grid-col-1 > .ui-btn {
+  border-left: solid 1px rgba(8, 8, 8, 1);
+}
+.ui-grid-col-1 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-col-2 > .ui-btn {
+  border-left: solid 1px rgba(8, 8, 8, 1);
+}
+.ui-grid-col-2 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-col-3 > .ui-btn {
+  border-left: solid 1px rgba(8, 8, 8, 1);
+}
+.ui-grid-col-3 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-row > .ui-btn {
+  margin-top: 1px;
+}
+.ui-grid-row > .ui-btn:first-child {
+  margin-top: 0px;
+}
+/***********************
+Normal Popup
+***********************/
+.ui-popup {
+  position: fixed;
+  left: 0px;
+  width: 100%;
+  margin: 0;
+  background-color: rgba(0, 17, 33, 1);
+  border: 3px solid rgba(0, 55, 92, 1);
+  display: none;
+  z-index: 1100;
+}
+.ui-popup:not(.ui-ctxpopup) {
+  bottom: 0;
+}
+.ui-popup .ui-popup-header {
+  width: 100%;
+  min-height: 68px;
+  font-size: 30px;
+  text-align: left;
+  background-color: rgba(5, 42, 71, 1);
+  color: rgba(116, 196, 252, 1);
+  padding-top: 14px;
+  padding-right: 13px;
+  padding-bottom: 14px;
+  padding-left: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ui-popup .ui-popup-content {
+  width: 100%;
+  min-height: 14rem;
+  font-size: 2.125rem;
+  text-align: left;
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(0, 17, 33, 1);
+  padding: 10px 16px 9px 16px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-popup .ui-popup-content .ui-listview,
+.ui-popup .ui-popup-content .ui-inline-listview {
+  margin: -0.5625rem -1rem -0.5625rem -1rem;
+}
+.ui-popup .ui-popup-content .ui-listview li,
+.ui-popup .ui-popup-content .ui-inline-listview li {
+  font-size: 2.125rem;
+}
+.ui-popup .ui-popup-footer {
+  width: 100%;
+  height: 83px;
+}
+.ui-popup .ui-popup-footer .ui-btn {
+  padding-top: 27px;
+  padding-bottom: 28px;
+  font-size: 30px;
+}
+.ui-popup.ui-popup-active {
+  display: block;
+}
+.ui-popup.in {
+  display: block;
+}
+.ui-popup.ui-build {
+  display: block;
+  visibility: hidden;
+}
+/***********************
+Popup Container Scroll
+***********************/
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) {
+  max-height: 100%;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-wrapper {
+  width: 100%;
+  max-height: 100%;
+  overflow: auto !important;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content {
+  height: auto !important;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header.ui-fixed {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2100;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-footer.ui-fixed {
+  position: absolute !important;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2100;
+  -webkit-transform: translate3d(0, 0, 0);
+}
+/***********************
+Option Popup
+***********************/
+.ui-popup.ui-ctxpopup {
+  background-color: transparent;
+  width: 100%;
+  border: 0 none;
+  border-radius: 0;
+  overflow: visible;
+}
+div.ui-popup.ui-ctxpopup.ui-popup-content-size {
+  width: auto;
+  padding: 0 0 0 0;
+}
+div.ui-popup.ui-ctxpopup.ui-popup-content-size .ui-popup-content {
+  width: auto;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content {
+  background-color: rgba(245, 245, 245, 1);
+  border: 1px solid rgba(112, 112, 112, 0.9);
+  color: #333;
+  min-height: initial;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li {
+  color: rgba(8, 8, 8, 1);
+  border-bottom: 1px solid rgba(204, 204, 204, 1);
+  min-height: 90px;
+  padding: 21px 8px 20px 16px;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a {
+  color: rgba(8, 8, 8, 1);
+  margin: -21px -16px;
+  padding: 21px 16px;
+  min-height: 48px;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(19, 99, 145, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li:last-child {
+  border: none;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon {
+  position: relative;
+  padding-left: 4.25rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon a {
+  margin-left: -4.25rem;
+  padding-left: 4.25rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0.375rem;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-top: -1.75rem;
+  background-color: rgba(99, 99, 99, 0.9);
+  -webkit-mask-size: 3.5rem 3.5rem;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  mask-size: 3.5rem 3.5rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview a.ui-list-icon:active::before {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview {
+  height: 4.3125rem;
+  overflow: hidden;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li {
+  float: left;
+  height: 4.1875rem;
+  line-height: 4.1875rem;
+  border-right: 1px solid rgba(8, 8, 8, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li:last-child {
+  border: none;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0rem 0.5rem;
+  color: rgba(8, 8, 8, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(19, 99, 145, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext {
+  width: 3.6875rem;
+  height: 4.1875rem;
+  text-indent: -1000em;
+  overflow: hidden;
+  position: relative;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2.6875rem;
+  height: 2.6875rem;
+  margin-top: -1.34375rem;
+  margin-left: -1.34375rem;
+  background-color: rgba(8, 8, 8, 1);
+  -webkit-mask-size: 2.6875rem 2.6875rem;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: 2.6875rem 2.6875rem;
+  mask-repeat: no-repeat;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview a.ui-list-icon-notext:active::before {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-popup.ui-ctxpopup .ui-arrow {
+  width: 36px;
+  height: 15px;
+  overflow: hidden;
+  position: absolute;
+  display: none;
+  animation-duration: 0;
+  -webkit-animation-duration: 0;
+}
+.ui-popup.ui-ctxpopup .ui-arrow span {
+  width: 20px;
+  height: 20px;
+  background-color: rgba(245, 245, 245, 1);
+  border: 1px solid rgba(112, 112, 112, 0.9);
+  position: absolute;
+  top: 6px;
+  left: 8px;
+  -webkit-transform: rotate(55deg) skew(24deg);
+  transform: rotate(55deg) skew(24deg);
+  animation-duration: 0;
+  -webkit-animation-duration: 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b {
+  padding: 20px 20px 0 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t {
+  padding: 0 20px 20px 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r {
+  padding: 20px 0 20px 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l {
+  padding: 20px 20px 20px 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow {
+  display: block;
+  bottom: -0.875rem;
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow {
+  display: block;
+  top: -14px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow {
+  display: block;
+  right: -25px;
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow {
+  display: block;
+  left: -25px;
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+/****************************************
+Popup Toast
+****************************************/
+.ui-popup.ui-popup-toast {
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  font-size: 1.5rem;
+  border: 3px solid rgba(0, 55, 92, 1);
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+  position: absolute;
+  bottom: 0;
+  top: auto;
+  height: auto;
+}
+.ui-popup.ui-popup-toast .ui-popup-content {
+  min-height: initial;
+  padding: 0.6875rem 2.625rem 0.75rem 2.625rem;
+  background-color: rgba(0, 17, 33, 1);
+}
+/****************************************
+Popup Overlay
+****************************************/
+.ui-popup-overlay {
+  position: fixed;
+  display: none;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: rgba(8, 8, 8, 0.7);
+}
+.ui-popup-overlay.in {
+  display: block;
+}
+/****************************************
+Popup Transition
+****************************************/
+.ui-popup.slideup.in {
+  -webkit-animation-name: popupslideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popupslideinfrombottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.slideup.out {
+  -webkit-animation-name: popupslideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popupslideouttobottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes popupslideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes popupslideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@-webkit-keyframes popupslideouttobottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@keyframes popupslideouttobottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+.ui-popup.pop.in {
+  -webkit-animation-name: popuppopin;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popuppopin;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.pop.out {
+  -webkit-animation-name: popuppopout;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popuppopout;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes popuppopin {
+  from {
+    transform: scale3d(0, 0, 1);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+@-webkit-keyframes popuppopout {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(0, 0, 1);
+  }
+}
+/****************************************
+Popup Overlay Transition
+****************************************/
+.ui-popup-overlay.slideup.in,
+.ui-popup-overlay.pop.in {
+  -webkit-animation-name: fadein;
+  -webkit-animation-duration: 250ms;
+  animation-name: fadein;
+  animation-duration: 250ms;
+}
+.ui-popup-overlay.slideup.out,
+.ui-popup-overlay.pop.out {
+  -webkit-animation-name: fadeout;
+  -webkit-animation-duration: 250ms;
+  animation-name: fadeout;
+  animation-duration: 250ms;
+}
+/****************************************
+Option Popup Transition
+****************************************/
+.ui-popup.ui-popup-arrow-t.slideup.in,
+.ui-popup.ui-popup-arrow-l.slideup.in,
+.ui-popup.ui-popup-arrow-r.slideup.in {
+  -webkit-animation-name: ctxpopupslideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideinfrombottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-t.slideup.out,
+.ui-popup.ui-popup-arrow-l.slideup.out,
+.ui-popup.ui-popup-arrow-r.slideup.out {
+  -webkit-animation-name: ctxpopupslideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideouttobottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-b.slideup.in {
+  -webkit-animation-name: ctxpopupslideinfromtop;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideinfromtop;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-b.slideup.out {
+  -webkit-animation-name: ctxpopupslideouttotop;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideouttotop;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes ctxpopupslideinfrombottom {
+  from {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@keyframes ctxpopupslideinfrombottom {
+  from {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideouttobottom {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+}
+@keyframes ctxpopupslideouttobottom {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideinfromtop {
+  from {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@keyframes ctxpopupslideinfromtop {
+  from {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideouttotop {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+}
+@keyframes ctxpopupslideouttotop {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+}
+/************************
+Listview
+*************************/
+.ui-listview li {
+  font-size: 2.5rem;
+  line-height: 3rem;
+  width: 100%;
+  min-height: 6.25rem;
+  padding: 1.3125rem 0.5rem 1.25rem 1rem;
+  border-bottom: 1px solid rgba(56, 56, 56, 1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview li > * {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-user-select: none;
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview li > a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: -1.3125rem -1rem;
+  padding: 1.625rem 1rem;
+  -o-box-sizing: content-box;
+  -ms-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.ui-listview li.ui-li-active {
+  background-color: rgba(8, 56, 94, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview .li-divider {
+  height: 1.875rem;
+  min-height: 1.875rem;
+  line-height: 1.875rem;
+  padding: 0 0.5rem 0 1rem;
+  background-color: rgba(29, 72, 105, 1);
+  color: rgba(151, 197, 230, 1);
+  font-size: 1.5rem;
+}
+.ui-listview .ui-li-sub-text {
+  color: rgba(85, 135, 171, 1);
+  font-size: 1.75rem;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-text {
+  width: calc(100% -  4.8125rem);
+  height: 100%;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-text::after {
+  content: "";
+  position: absolute;
+  height: 3.5rem;
+  width: 0.125rem;
+  background-color: rgba(245, 245, 245, 1);
+  right: 4.25rem;
+  top: 20%;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-divider {
+  display: none;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete,
+.ui-listview .ui-li-has-action-icon .ui-action-setting,
+.ui-listview .ui-li-has-action-icon .ui-action-add {
+  position: absolute;
+  height: 100%;
+  width: 4.5rem;
+  right: 0;
+  top: 0;
+  -webkit-mask-size: 3.5rem 3.5rem;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center center;
+  padding: 0;
+  margin: 0;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete {
+  -webkit-mask-image: url(images/listview/tw_list_delete_holo_dark.png);
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-setting {
+  -webkit-mask-image: url(images/listview/tw_list_setting_holo_dark.png);
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-add {
+  -webkit-mask-image: url(images/listview/tw_list_add_holo_dark.png);
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon.ui-li-active {
+  background-color: transparent;
+}
+.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active {
+  background-color: rgba(8, 56, 94, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete:active,
+.ui-listview .ui-li-has-action-icon .ui-action-setting:active,
+.ui-listview .ui-li-has-action-icon .ui-action-add:active {
+  background-color: rgba(8, 56, 94, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-datetime-widget {
+  position: relative;
+  height: 100%;
+}
+.ui-datetime {
+  text-align: center;
+  padding-top: 56px;
+}
+.ui-time-picker .ui-datetime {
+  padding-top: 53px;
+}
+.ui-datetime:only-child {
+  padding-top: 92px;
+}
+.ui-time-picker .ui-datetime:only-child {
+  padding-top: 89px;
+}
+.ui-datetime input[type='date'],
+.ui-datetime input[type='datetime'],
+.ui-datetime input[type='time'] {
+  display: none;
+}
+.ui-datefield {
+  height: 52px;
+  display: inline-block;
+  vertical-align: top;
+}
+.ui-datefield > .ui-btn {
+  float: left;
+  height: 52px;
+  padding: 0;
+  line-height: 52px;
+  font-size: 42px;
+  font-weight: 600;
+  border-radius: 2px;
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.ui-datefield .ui-datefield-separator {
+  display: block;
+  height: 100%;
+  float: left;
+  width: 18px;
+  background: transparent url('images/Datetimepicker/tw_timepicker_num_dot.png');
+}
+.ui-datefield > .ui-btn:enabled:focus {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.ui-datefield > .ui-btn:disabled {
+  color: #404040;
+}
+.ui-datafield > .ui-btn.ui-selected,
+.ui-datefield > .ui-btn:enabled:active,
+.ui-datefield > .ui-btn.ui-state-active:enabled,
+.ui-datefield > .ui-btn.ui-selected:enabled {
+  background-color: #ff9000;
+  color: #000;
+}
+/* -- for datepicker -- */
+.ui-date-picker .ui-datefield > .ui-btn:first-child {
+  margin-right: 2px;
+}
+.ui-date-picker .ui-datefield > .ui-btn:last-child {
+  margin-left: 2px;
+}
+.ui-date-picker .ui-datefield-year {
+  width: 114px;
+}
+.ui-date-picker .ui-datefield-month {
+  width: 102px;
+}
+.ui-date-picker .ui-datefield-day {
+  width: 68px;
+}
+/* -- end (for datepicker) -- */
+/* -- for timepicker -- */
+.ui-time-picker .ui-datefield-hour {
+  width: 74px;
+}
+.ui-time-picker .ui-datefield-min {
+  width: 74px;
+}
+.ui-time-picker .ui-datefield-period {
+  width: 84px;
+  margin-left: 10px;
+}
+.ui-time-picker .ui-datefield {
+  height: 58px;
+}
+.ui-time-picker .ui-datefield > .ui-btn {
+  height: 58px;
+  line-height: 58px;
+  font-size: 50px;
+}
+.ui-time-picker .ui-datefield > .ui-btn.ui-datefield-period {
+  font-size: 48px;
+}
+/* -- (end) for timepicker -- */
+.ui-datetime-wheel {
+  height: 68px;
+  margin: 0 10px;
+  margin-top: 30px;
+}
+.ui-time-picker .ui-datetime-wheel {
+  margin-top: 27px;
+}
+.ui-datetime-wheel .ui-btn {
+  width: 68px;
+  height: 68px;
+  float: left;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus {
+  float: right;
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-wheel {
+  display: block;
+  margin-left: 68px;
+  margin-right: 68px;
+  height: 68px;
+  padding: 10px 0;
+  background: url('images/Datetimepicker/tw_timepicker_wheel_01.png') center center no-repeat;
+}
+.ui-datetime-btns {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 76px;
+  border-top: 2px solid #262626;
+}
+/* Button separator */
+.ui-datetime-btns::before {
+  content: "";
+  height: 34px;
+  width: 1px;
+  background-color: #262626;
+  position: absolute;
+  left: 160px;
+  top: 20px;
+}
+.ui-datetime-btns .ui-btn {
+  height: 100%;
+  position: relative;
+  background-color: transparent;
+}
+.ui-datetime-btns .ui-btn:enabled:active,
+.ui-datetime-btns .ui-btn:enabled:focus,
+.ui-datetime-btns .ui-btn:enabled:active:focus {
+  background-color: transparent;
+}
+.ui-datetime-btns .ui-btn-left {
+  width: 160px;
+  float: left;
+  background: url('images/Datetimepicker/tw_timepicker_left_softbtn.png') center center no-repeat;
+}
+.ui-datetime-btns .ui-btn-right {
+  width: 159px;
+  float: right;
+  background: url('images/Datetimepicker/tw_timepicker_right_softbtn.png') center center no-repeat;
+}
+.ui-datetime-btns .ui-btn:disabled,
+.ui-datetime-btns .ui-btn.ui-state-disabled {
+  opacity: 0.2;
+}
+/* ---------------- */
+.ui-datetime-periods {
+  height: 102px;
+  margin-top: 7px;
+  display: inline-block;
+}
+.ui-datetime-periods .ui-btn,
+.ui-datetime-periods .ui-datetime-periods-separator {
+  height: 100%;
+  float: left;
+  padding: 0;
+  background: transparent;
+}
+.ui-datetime-periods .ui-btn {
+  width: 102px;
+  font-size: 34px;
+  line-height: 102px;
+}
+.ui-datetime-periods .ui-btn:enabled:focus {
+  background: transparent;
+}
+.ui-datetime-periods .ui-btn:enabled:active,
+.ui-datetime-periods .ui-btn:enabled:active:focus,
+.ui-datetime-periods .ui-btn.ui-selected:enabled:active,
+.ui-datetime-periods .ui-btn.ui-state-active:enabled:active {
+  color: inherit;
+  text-decoration: none;
+  background: url('images/Datetimepicker/tw_timepicker_time_bg.png') center center no-repeat;
+}
+.ui-datetime-periods .ui-btn.ui-selected:enabled,
+.ui-datetime-periods .ui-btn.ui-state-active:enabled {
+  color: #ff9000;
+  text-decoration: underline;
+}
+.ui-datetime-periods .ui-datetime-periods-separator {
+  width: 24px;
+  background: url('images/Datetimepicker/tw_timepicker_num_dot_01.png') center center no-repeat;
+}
+.ui-datetime-wheel.ui-hidden,
+.ui-datetime-periods.ui-hidden {
+  display: none;
+}
+/* Transitions originally inspired by those from jQtouch, nice work, folks */
+.ui-viewport-transitioning,
+.ui-viewport-transitioning .ui-page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.ui-pre-in {
+  z-index: 100;
+  visibility: visible;
+  display: block;
+  top: 0px;
+  left: 0px;
+}
+.in {
+  -webkit-animation-timing-function: ease-out;
+  -webkit-animation-duration: 350ms;
+  -moz-animation-timing-function: ease-out;
+  -moz-animation-duration: 350ms;
+  animation-timing-function: ease-out;
+  animation-duration: 350ms;
+}
+.out {
+  -webkit-animation-timing-function: ease-in;
+  -webkit-animation-duration: 225ms;
+  -moz-animation-timing-function: ease-in;
+  -moz-animation-duration: 225ms;
+  animation-timing-function: ease-in;
+  animation-duration: 225ms;
+}
+@-webkit-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-moz-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@-moz-keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.fade.out {
+  opacity: 0;
+  -webkit-animation-duration: 125ms;
+  -webkit-animation-name: fadeout;
+  -moz-animation-duration: 125ms;
+  -moz-animation-name: fadeout;
+  animation-duration: 125ms;
+  animation-name: fadeout;
+}
+.fade.in {
+  opacity: 1;
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: fadein;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: fadein;
+  animation-duration: 225ms;
+  animation-name: fadein;
+}
+/* slide up */
+.slideup.out {
+  -webkit-animation-name: fadeout;
+  -webkit-animation-duration: 250ms;
+  -moz-animation-name: fadeout;
+  -moz-animation-duration: 250ms;
+  animation-name: fadeout;
+  animation-duration: 250ms;
+}
+.slideup.in {
+  -webkit-transform: translateY(0);
+  -webkit-animation-name: slideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -moz-transform: translateY(0);
+  -moz-animation-name: slideinfrombottom;
+  -moz-animation-duration: 250ms;
+  transform: translateY(0);
+  animation-name: slideinfrombottom;
+  animation-duration: 250ms;
+}
+.slideup.in.reverse {
+  -webkit-animation-name: fadein;
+  -webkit-animation-duration: 250ms;
+  -moz-animation-name: fadein;
+  -moz-animation-duration: 250ms;
+  animation-name: fadein;
+  animation-duration: 250ms;
+}
+.slideup.out.reverse {
+  z-index: 101;
+  -webkit-transform: translateY(100%);
+  -webkit-animation-name: slideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -moz-transform: translateY(100%);
+  -moz-animation-name: slideouttobottom;
+  -moz-animation-duration: 250ms;
+  transform: translateY(100%);
+  animation-name: slideouttobottom;
+  animation-duration: 250ms;
+}
+@-webkit-keyframes slideinfrombottom {
+  from {
+    -webkit-transform: translateY(100%);
+  }
+  to {
+    -webkit-transform: translateY(0);
+  }
+}
+@-moz-keyframes slideinfrombottom {
+  from {
+    -moz-transform: translateY(100%);
+  }
+  to {
+    -moz-transform: translateY(0);
+  }
+}
+@keyframes slideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes slideouttobottom {
+  from {
+    -webkit-transform: translateY(0);
+  }
+  to {
+    -webkit-transform: translateY(100%);
+  }
+}
+@-moz-keyframes slideouttobottom {
+  from {
+    -moz-transform: translateY(0);
+  }
+  to {
+    -moz-transform: translateY(100%);
+  }
+}
+@keyframes slideouttobottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@-webkit-keyframes popnone {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes popin {
+  from {
+    transform: scale3d(0, 0, 1);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+@-webkit-keyframes popout {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(0, 0, 1);
+  }
+}
+.pop.out.reverse {
+  z-index: 200;
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popout;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popout;
+  animation-duration: 225ms;
+  animation-name: popout;
+}
+.pop.in.reverse {
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popnone;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popnone;
+  animation-duration: 225ms;
+  animation-name: popnone;
+}
+.pop.in {
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popin;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popin;
+  animation-duration: 225ms;
+  animation-name: popin;
+}
+.ui-indexscrollbar {
+  display: block;
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 2.8125rem;
+  height: 100%;
+  padding-left: 0.125rem;
+  background-color: rgba(33, 33, 33, 1);
+  z-index: 10;
+  overflow: visible;
+  -webkit-user-select: none;
+  cursor: pointer;
+}
+.ui-indexscrollbar ul {
+  position: absolute;
+  width: 100%;
+  top: 0;
+}
+.ui-indexscrollbar ul li {
+  color: rgba(84, 84, 84, 1);
+  display: block;
+  width: 100%;
+  text-align: center;
+  font-size: 1.5rem;
+  height: 2.25rem;
+}
+.ui-indexscrollbar ul li.ui-state-selected {
+  background-color: rgba(43, 43, 43, 1);
+  color: rgba(55, 161, 237, 1);
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary {
+  position: relative;
+  height: auto;
+  top: 0;
+  right: -2.5rem;
+  width: 100%;
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li {
+  background-color: rgba(43, 43, 43, 1);
+  color: rgba(84, 84, 84, 1);
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li.ui-state-selected {
+  background-color: rgba(43, 43, 43, 1);
+  color: rgba(55, 161, 237, 1);
+}
+.ui-indexscrollbar + .ui-listview li {
+  padding-right: 2.5rem;
+}
+.ui-indexscrollbar-indicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  display: none;
+}
+.ui-indexscrollbar-indicator > span {
+  width: 8.75rem;
+  height: 5.4375rem;
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 50%;
+  margin-left: -5.625rem;
+  margin-top: -2.6875rem;
+  line-height: 5.4375rem;
+  font-size: 4.375rem;
+  text-align: center;
+  background-color: rgba(0, 61, 107, 0.95);
+  color: rgba(250, 250, 250, 1);
+}
+.ui-indexscrollbar-indicator > span > span.ui-selected {
+  color: rgba(55, 161, 237, 1);
+}
+.ui-circularindexscrollbar {
+  position: fixed;
+  top: 0;
+  left: -100%;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+}
+.ui-circularindexscrollbar.ui-circularindexscrollbar-show .ui-circularindexscrollbar-indexbar {
+  pointer-events: auto;
+  -webkit-transform: scale(1, 1);
+  -webkit-transition-duration: 500ms;
+  -webkit-transition-timing-function: linear;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: -webkit-radial-gradient(center, ellipse cover, transparent 59%, rgba(33, 33, 33, 1) 59%);
+  overflow: hidden;
+  -webkit-transform: scale(1.2, 1.2);
+  -webkit-transition-duration: 500ms;
+  -webkit-transition-timing-function: linear;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  box-sizing: border-box;
+  width: 50%;
+  height: 50%;
+  margin-top: -50%;
+  margin-left: -50%;
+  -webkit-transform-origin: 100% 100% 0;
+  overflow: hidden;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index span {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin-left: 50%;
+  padding-top: 0.3125rem;
+  text-align: center;
+  color: rgba(84, 84, 84, 1);
+  -webkit-transform-origin: 50% 100% 0;
+  font-size: 1.25rem;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span {
+  color: rgba(55, 161, 237, 1);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator {
+  position: absolute;
+  top: 50%;
+  width: 8.9375rem;
+  height: 8.9375rem;
+  line-height: 8.9375rem;
+  border-radius: 50%;
+  background-color: rgba(0, 61, 107, 0.95);
+  -webkit-mask-image: url("images/Indicator/b_fast_scroll_rollover_bg.png");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 8.9375rem;
+  margin-top: -4.4375rem;
+  margin-left: 100%;
+  -webkit-transform: translate3d(-6.703125rem, 0, 0);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text {
+  text-align: center;
+  font-size: 4.375rem;
+  color: rgba(55, 161, 237, 1);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-minimize .ui-circularindexscrollbar-indicator-text {
+  padding-right: 0.4375rem;
+  text-align: right;
+  font-size: 2rem;
+}
+/***************************************************************************
+                   Scrollbar Style
+***************************************************************************/
+.ui-scrollbar-bar-type {
+  position: absolute;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-horizontal {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 8px;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-vertical {
+  right: 0;
+  top: 0;
+  width: 0.5rem;
+  height: 100%;
+}
+.ui-scrollbar-bar-type .ui-scrollbar-indicator {
+  position: absolute;
+  background-color: rgba(102, 102, 102, 1);
+}
+.ui-scrollbar-bar-type.ui-scrollbar-horizontal .ui-scrollbar-indicator {
+  height: 0.25rem;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-vertical .ui-scrollbar-indicator {
+  width: 0.25rem;
+}
+/***************************************************************************
+                   Scrollbar Bouncing Effect
+***************************************************************************/
+.ui-scrollbar-bouncing-effect {
+  display: none;
+  position: absolute;
+  background-repeat: no-repeat;
+  -webkit-animation-duration: 0.47s;
+  -moz-animation-duration: 0.47s;
+  -ms-animation-duration: 0.47s;
+  -o-animation-duration: 0.47s;
+  -webkit-animation-timing-function: step-start;
+  -moz-animation-timing-function: step-start;
+  -ms-animation-timing-function: step-start;
+  -o-animation-timing-function: step-start;
+  animation-timing-function: step-start;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-fill-mode: forwards;
+  -ms-animation-fill-mode: forwards;
+  -o-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  background-color: rgba(55, 161, 237, 0.7);
+}
+.ui-scrollbar-bouncing-effect::before {
+  content: "";
+  position: absolute;
+  background-color: rgba(55, 161, 237, 1);
+}
+.ui-scrollbar-bouncing-effect.ui-top,
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  width: 100%;
+  height: 3.125rem;
+  left: 0;
+  -webkit-mask-size: 100% 3.125rem;
+}
+.ui-scrollbar-bouncing-effect.ui-top::before,
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  width: 100%;
+  height: 0.125rem;
+  -webkit-mask-size: 100% 0.125rem;
+}
+.ui-scrollbar-bouncing-effect.ui-left,
+.ui-scrollbar-bouncing-effect.ui-right {
+  width: 3.125rem;
+  height: 100%;
+  top: 0;
+  -webkit-mask-size: 3.125rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-left::before,
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  width: 0.0625rem;
+  height: 100%;
+  -webkit-mask-size: 0.0625rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-top {
+  top: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_top_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-top::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_top_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  bottom: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_bottom_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_bottom_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left {
+  left: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_left_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_left_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right {
+  right: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_right_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_right_edge.png");
+}
+@-webkit-keyframes ui-bouncing-show {
+  0% {
+    opacity: 0;
+  }
+  10% {
+    opacity: 0.1;
+  }
+  20% {
+    opacity: 0.2;
+  }
+  30% {
+    opacity: 0.3;
+  }
+  40% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  60% {
+    opacity: 0.6;
+  }
+  70% {
+    opacity: 0.7;
+  }
+  80% {
+    opacity: 0.8;
+  }
+  90% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes ui-bouncing-hide {
+  0% {
+    opacity: 1;
+  }
+  10% {
+    opacity: 0.9;
+  }
+  20% {
+    opacity: 0.8;
+  }
+  30% {
+    opacity: 0.7;
+  }
+  40% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  60% {
+    opacity: 0.4;
+  }
+  70% {
+    opacity: 0.3;
+  }
+  80% {
+    opacity: 0.2;
+  }
+  90% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.ui-scrollbar-bouncing-effect.ui-show {
+  display: block;
+  -webkit-animation-name: ui-bouncing-show;
+}
+.ui-scrollbar-bouncing-effect.ui-hide {
+  display: block;
+  -webkit-animation-name: ui-bouncing-hide;
+}
+.ui-swipelist {
+  position: absolute;
+  top: 0;
+}
+.ui-swipelist-left,
+.ui-swipelist-right {
+  position: absolute;
+  display: none;
+}
+.ui-swipelist-left {
+  background: -webkit-linear-gradient(left, rgba(98, 168, 24, 1) 0%, rgba(8, 8, 8, 1) 0%);
+}
+.ui-swipelist-right {
+  background: -webkit-linear-gradient(right, rgba(235, 164, 23, 1) 0%, rgba(8, 8, 8, 1) 0%);
+}
+.ui-swipelist-icon,
+.ui-swipelist-text {
+  position: absolute;
+}
+.ui-swipelist-left .ui-swipelist-icon {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  width: 20%;
+  height: 100%;
+  margin-left: 2%;
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-mask-image: url("images/Swipelist/b_logs_icon_body_btn_call_nor.png");
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-swipelist-left .ui-swipelist-text {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  margin-left: 40%;
+  height: 100%;
+  line-height: 90px;
+}
+.ui-swipelist-right .ui-swipelist-icon {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  width: 20%;
+  height: 100%;
+  margin-left: 80%;
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-mask-image: url("images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png");
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-swipelist-right .ui-swipelist-text {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  margin-left: 20%;
+  height: 100%;
+  line-height: 90px;
+}
+/***************************************************************************
+                   Tab Style
+***************************************************************************/
+.ui-tab-indicator {
+  position: relative;
+  height: 6px;
+}
+.ui-tab-indicator .ui-tab-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  height: 6px;
+  background-color: rgba(76, 103, 125, 1);
+}
+.ui-tab-indicator .ui-tab-item.ui-tab-active {
+  background-color: rgba(55, 161, 237, 1);
+}
+input[type="checkbox"]:not(.ui-switch-input),
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  height: 56px;
+  width: 56px;
+  font-size: 32px;
+  -webkit-appearance: none;
+  position: relative;
+}
+input[type="radio"] {
+  background-color: rgba(0, 14, 26, 1);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+}
+input[type="radio"]::after {
+  content: "";
+  background-color: rgba(245, 245, 245, 0.3);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_line.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:checked::before {
+  content: "";
+  background-color: rgba(112, 186, 15, 1);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:active {
+  background-color: rgba(0, 50, 84, 0.4);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+}
+input[type="radio"]:active::after {
+  content: "";
+  background-color: rgba(245, 245, 245, 0.3);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_line.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:active:checked::before {
+  content: "";
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input) {
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(0, 14, 26, 1);
+}
+input[type="checkbox"]:not(.ui-switch-input)::after {
+  content: "";
+  background-color: rgba(245, 245, 245, 0.3);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):checked::before {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(112, 186, 15, 1);
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):active {
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(0, 50, 84, 0.4);
+}
+input[type="checkbox"]:not(.ui-switch-input):active::after {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(245, 245, 245, 0.3);
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):active:checked::before {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(245, 245, 245, 1);
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+.ui-marquee {
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  -webkit-user-select: none;
+}
+.ui-marquee.ui-marquee-gradient {
+  text-overflow: clip;
+}
+.ui-marquee.ui-marquee-gradient::after {
+  content: "";
+  width: 6.875rem;
+  height: 100%;
+  background: -webkit-linear-gradient(left, transparent 0%, rgba(8, 8, 8, 1) 100%);
+  position: absolute;
+  right: 0;
+}
+.ui-marquee.ui-marquee-ellipsis .ui-marquee-content {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ui-marquee-content {
+  overflow: visible;
+  display: inline-block;
+}
+.ui-marquee-anim-running {
+  -webkit-animation-play-state: running;
+}
+.ui-marquee-anim-stopped {
+  -webkit-animation-play-state: paused;
+}
+.ui-page-indicator {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translate3d(-50%, 0, 0);
+  -moz-transform: translate3d(-50%, 0, 0);
+  -ms-transform: translate3d(-50%, 0, 0);
+  -o-transform: translate3d(-50%, 0, 0);
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-page-indicator-item {
+  position: relative;
+  display: inline-block;
+  width: 0.8125rem;
+  height: 0.8125rem;
+  -webkit-mask-image: -webkit-radial-gradient(#000000 0.25rem, transparent 0.375rem);
+  background-color: rgba(245, 245, 245, 0.4);
+  margin-right: 0.5625rem;
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-page-indicator-item:last-child {
+  margin-right: 0;
+}
+.ui-page-indicator-item.ui-page-indicator-active {
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-snap-listview li {
+  -webkit-scroll-snap-destination: 50% 50%;
+}
+.ui-drawer {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  background-color: rgba(8, 8, 8, 1);
+  z-index: 1201;
+  box-sizing: border-box;
+}
+.ui-drawer.ui-drawer-close {
+  overflow: hidden;
+}
+.ui-drawer.ui-drawer-open {
+  overflow: auto;
+}
+.ui-drawer-overlay {
+  top: 0;
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 1200;
+}
+/***************************************************************************
+				   Footer Style (New style)
+***************************************************************************/
+.ui-page .ui-expandable-header {
+  height: 60px;
+}
+.ui-page .ui-expandable-header.ui-header-expand {
+  height: 80px;
+}
+.ui-page .ui-expandable-header.ui-header-expand .ui-title {
+  padding-top: 0;
+  transform: translate3d(0, 20px, 0);
+}
+.ui-section-changer {
+  height: 100%;
+}
diff --git a/lib/tau/wearable/theme/changeable/tau.min.css b/lib/tau/wearable/theme/changeable/tau.min.css
new file mode 100644
index 0000000..e3aadb5
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/tau.min.css
@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+*{outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:Tizen,Samsung Sans,Helvetica}body{margin:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button[disabled],input[disabled]{cursor:default}input[type=time],input[type=date]{color:#000}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.screen-hidden{visibility:hidden;position:absolute;top:-10000em;left:-10000em}button,input{outline:0;cursor:pointer}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}a{text-decoration:none!important;color:rgba(245,245,245,1)}ul,li{margin:0;padding:0;list-style-type:none}img{margin:0;padding:0}html{-webkit-tap-highlight-color:rgba(0,0,0,0)}body{height:100%;font-size:2.125rem;font-family:Tizen,Samsung Sans,Helvetica;background:rgba(8,8,8,1);color:rgba(245,245,245,1)}.ui-page{width:100%;height:100%;overflow:hidden;display:none;position:absolute;top:0;left:0;background:rgba(8,8,8,1);-webkit-tap-highlight-color:rgba(0,0,0,0)}.ui-page.ui-page-active{display:block}.ui-page.ui-page-build{display:block;visibility:hidden}.scrolling-mode-touch{-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-content{width:auto;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-header{position:relative;width:100%;height:60px;line-height:60px;background-color:rgba(0,31,56,1)}.ui-header .ui-title{color:rgba(116,196,252,1);font-size:32px;font-weight:700;white-space:nowrap;overflow:hidden;margin:0;padding-left:16px;padding-right:16px;-webkit-mask-image:-webkit-linear-gradient(left,#000 80%,rgba(0,0,0,0) 95%)}.ui-header .ui-title.ui-icon{padding-left:60px;background-position:16px 14px;background-size:34px 34px;background-repeat:no-repeat}.ui-header.ui-has-more .ui-title{padding-right:78px;-webkit-mask-image:-webkit-linear-gradient(left,#000 70%,rgba(0,0,0,0) 75%)}.ui-header button.ui-more,.ui-header input.ui-more{border:0 none;padding:0}.ui-header .ui-more-disable{cursor:default;background-color:transparent}.ui-header .ui-more{display:block;position:absolute;top:0;right:0;width:68px;height:100%;overflow:hidden;text-indent:-1000em;background-position:center center;background-color:transparent;cursor:pointer}.ui-header .ui-more:active{background-color:rgba(23,73,115,1)!important}.ui-header .ui-more.ui-icon-detail{background-color:rgba(116,196,252,1);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-detail[disabled=disabled]{cursor:default;background-color:transparent;background-color:rgba(116,196,252,.2);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-overflow{background-color:rgba(116,196,252,1);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position-x:.9375rem;-webkit-mask-position-y:50%;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-overflow[disabled=disabled]{cursor:default;background-color:transparent;background-color:rgba(116,196,252,.2);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-selectall{background-color:rgba(116,196,252,1);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-selectall[disabled=disabled]{cursor:default;background-color:transparent;background-color:rgba(116,196,252,.2);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-footer{width:100%;height:85px;position:absolute;bottom:0;left:0}.ui-page.ui-scroll-on{overflow:auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-page.ui-scroll-on .ui-content{height:auto!important}.ui-page.ui-scroll-on .ui-footer{position:relative}.ui-header.ui-fixed{position:fixed!important;top:0;left:0;width:100%;z-index:1000}.ui-footer.ui-fixed{position:fixed!important;bottom:0;left:0;width:100%;z-index:1000;-webkit-transform:translate3d(0,0,0)}.ui-grid-col>*{float:left}.ui-page .ui-grid-col-1>*{float:left}.ui-page .ui-grid-col-1>*{width:100%}.ui-page .ui-grid-col-2>*{float:left}.ui-page .ui-grid-col-2>*{width:50%}.ui-page .ui-grid-col-3>*{float:left}.ui-page .ui-grid-col-3>*{width:33.333333333333336%}.ui-grid-row>*{display:block}@-webkit-keyframes indeterminate{0%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,77,153,1)}25%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,77,153,1)}50%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,77,153,1)}75%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,77,153,1)}100%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,77,153,1)}}progress{position:relative;padding-left:1rem;padding-right:1rem;margin-top:.875rem;margin-bottom:.875rem;color:rgba(245,245,245,1);width:100%;height:.375rem;-webkit-appearance:none;border:0}progress::-webkit-progress-bar{position:relative;background-color:rgba(71,71,71,1);border-radius:.125rem;overflow:hidden}progress::-webkit-progress-value{background-color:rgba(55,161,237,1);height:.375rem;border-radius:.125rem;overflow:hidden}progress.ui-progress-indeterminate::-webkit-progress-bar{background-color:rgba(55,161,237,1)}progress.ui-progress-indeterminate::-webkit-progress-value{background-size:100% 100%;-webkit-animation:indeterminate 150ms infinite}.ui-progress-proportion{display:inline-block;float:left;font-size:20px;padding-left:1rem;padding-right:1rem;margin-top:-.625rem}.ui-progress-ratio{display:inline-block;float:right;font-size:20px;padding-left:1rem;padding-right:1rem;margin-top:-.625rem}.ui-circle-progress{display:none}.ui-progressbar.ui-progressbar-full{position:fixed;top:0;left:0;width:100%;height:100%}.ui-progressbar.ui-progressbar-large{width:6.25rem;height:6.25rem}.ui-progressbar.ui-progressbar-medium{width:5.25rem;height:5.25rem}.ui-progressbar.ui-progressbar-small{width:3.5rem;height:3.5rem}.ui-progressbar{position:relative;display:inline-block;pointer-events:none}.ui-progressbar .ui-progressbar-value.ui-progressbar-half{clip:rect(auto,auto,auto,auto)}.ui-progressbar .ui-progressbar-value.ui-progressbar-half .ui-progressbar-value-right{-webkit-transform:rotate(180deg)}.ui-progressbar .ui-progressbar-value{clip:rect(0,1em,1em,.5em);width:100%;height:100%;position:absolute}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left{border:.5rem solid rgba(55,161,237,1);border-radius:50%;clip:rect(0,.5em,1em,0);height:100%;width:100%;position:absolute}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right{border:.5rem solid rgba(55,161,237,1);border-radius:50%;clip:rect(0,.5em,1em,0);width:100%;height:100%;position:absolute}.ui-progressbar .ui-progressbar-bg{border:.5rem solid rgba(71,71,71,1);border-radius:50%;width:100%;height:100%}.ui-switch{width:100%;color:rgba(245,245,245,1)}.ui-switch-inneroffset,.ui-switch-handler{display:none}.ui-switch-text{margin-top:30px;margin-bottom:40px;padding:0 30px;font-size:34px;text-align:center}.ui-switch-sub-text{margin-top:48px;margin-bottom:55px;font-size:26px;text-align:center;color:T161}.ui-toggleswitch{position:relative;display:inline-block;width:92px;height:49px}.ui-toggleswitch .ui-switch-input{position:absolute;width:100%;height:100%;-webkit-appearance:none;display:block}.ui-toggleswitch .ui-switch-input::before{content:"";position:absolute;width:100%;height:100%;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 0;background-color:rgba(97,96,96,1);z-index:0}.ui-toggleswitch .ui-switch-input:active::before{background-color:rgba(97,96,96,1)}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button{background-color:rgba(173,173,173,1)}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button::before{background-color:rgba(97,96,96,1)}.ui-toggleswitch .ui-switch-activation,.ui-toggleswitch .ui-switch-button{width:59px;height:49px;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 -49px;background-color:rgba(245,245,245,1);position:absolute;top:0;left:0;pointer-events:none;z-index:1}.ui-toggleswitch .ui-switch-activation::before,.ui-toggleswitch .ui-switch-button::before{content:"";position:absolute;width:100%;height:100%;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 -98px;background-color:rgba(128,128,128,1);top:0;left:0}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button{width:59px;height:49px;-webkit-mask-position:0 -49px;background-color:rgba(245,245,245,1);-webkit-transform:translate3d(33px,0,0);-moz-transform:translate3d(33px,0,0);-ms-transform:translate3d(33px,0,0);-o-transform:translate3d(33px,0,0);transform:translate3d(33px,0,0)}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -147px;background-color:rgba(112,186,15,1)}.ui-toggleswitch .ui-switch-input:checked::before{background-color:rgba(112,186,15,1)}.ui-toggleswitch .ui-switch-input:checked:active::before{background-color:rgba(71,97,37,1)}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button{background-color:rgba(173,173,173,1)}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button::before{background-color:rgba(71,97,37,1)}.ui-toggleswitch.ui-toggleswitch-large{width:207px;height:110px;display:block;margin:0 auto}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button{width:132px;height:110px;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:207px;-webkit-mask-position:0 -110px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before{-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-position:0 -220px;-webkit-mask-size:207px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before{-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:207px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button{width:132px;height:110px;-webkit-mask-position:0 -110px;-webkit-transform:translate3d(75px,0,0);-moz-transform:translate3d(75px,0,0);-ms-transform:translate3d(75px,0,0);-o-transform:translate3d(75px,0,0);transform:translate3d(75px,0,0)}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -330px}@-webkit-keyframes rotating{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}.ui-processing{background-color:rgba(0,123,255,1);-webkit-mask-image:url(images/Processing/tw_progress_small_loading_bg.png);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-animation:rotating 1s linear infinite;width:3.5rem;height:3.5rem;margin:0 auto;margin-top:2.125rem;margin-bottom:.875rem}.ui-processing-text{margin:0 auto;text-align:center;width:10.5rem;font-size:1.5rem}.ui-processing.ui-processing-full-size{background-color:transparent;-webkit-mask-image:none;-webkit-animation:none;width:100%;height:100%;pointer-events:none;position:fixed;top:0;left:0;margin:0}.ui-processing.ui-processing-full-size::after{content:"";background-color:rgba(55,161,237,1);-webkit-mask-image:url(images/Processing/tw_progress_full_loading_bg.png);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-animation:rotating 1s linear infinite;width:100%;height:100%;position:absolute}.ui-btn{display:block;padding-top:28.5px;padding-right:10px;padding-bottom:28.5px;padding-left:10px;margin:0;font-size:32px;line-height:28px;text-align:center;white-space:nowrap;cursor:pointer;vertical-align:middle;text-overflow:ellipsis;overflow:hidden;border:0 none;color:rgba(245,245,245,1);background-color:rgba(2,56,92,1)}a.ui-btn:active:hover,.ui-btn:enabled:active:hover{background-color:rgba(23,73,115,1)}.ui-btn:enabled:focus{background-color:rgba(2,56,92,1)}a.ui-btn.ui-state-disabled,.ui-btn:disabled{color:rgba(245,245,245,.2);background-color:rgba(3,44,64,1);cursor:default}.ui-btn.ui-multiline{padding-top:10px;padding-bottom:10px}.ui-btn.ui-inline{display:inline-block}.ui-btn.ui-btn-icon{background-position:center center;height:76px;text-indent:-1000em;overflow:hidden;background-repeat:no-repeat;background-size:60px 60px}.ui-default{color:rgba(245,245,245,1);background-color:rgba(2,56,92,1)}a.ui-default:active:hover,.ui-default:enabled:active:hover{background-color:rgba(23,73,115,1)}.ui-default:enabled:focus{background-color:rgba(2,56,92,1)}a.ui-default.ui-state-disabled,.ui-default:disabled{color:rgba(245,245,245,.2);background-color:rgba(3,44,64,1);cursor:default}.ui-color-red{color:rgba(245,245,245,1);background-color:rgba(207,36,2,1)}a.ui-color-red:active:hover,.ui-color-red:enabled:active:hover{background-color:rgba(222,102,78,1)}.ui-color-red:enabled:focus{background-color:rgba(207,36,2,1)}a.ui-color-red.ui-state-disabled,.ui-color-red:disabled{color:rgba(245,245,245,.2);background-color:rgba(69,11,1,1);cursor:default}.ui-color-orange{color:rgba(245,245,245,1);background-color:rgba(237,134,0,1)}a.ui-color-orange:active:hover,.ui-color-orange:enabled:active:hover{background-color:rgba(242,171,78,1)}.ui-color-orange:enabled:focus{background-color:rgba(237,134,0,1)}a.ui-color-orange.ui-state-disabled,.ui-color-orange:disabled{color:rgba(245,245,245,.2);background-color:rgba(69,39,5,1);cursor:default}.ui-color-green{color:rgba(245,245,245,1);background-color:rgba(97,163,16,1)}a.ui-color-green:active:hover,.ui-color-green:enabled:active:hover{background-color:rgba(146,191,90,1)}.ui-color-green:enabled:focus{background-color:rgba(97,163,16,1)}a.ui-color-green.ui-state-disabled,.ui-color-green:disabled{color:rgba(245,245,245,.2);background-color:rgba(50,54,48,1);cursor:default}.ui-btn:focus,.ui-btn:active{outline:0}a.ui-btn{text-decoration:none;box-sizing:border-box}button.ui-btn,input.ui-btn{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;width:100%}button.ui-btn.ui-inline,input.ui-btn.ui-inline{display:inline-block;width:auto}.ui-grid-col-1>.ui-btn{border-left:solid 1px rgba(8,8,8,1)}.ui-grid-col-1>.ui-btn:first-child{border-left:0 none}.ui-grid-col-2>.ui-btn{border-left:solid 1px rgba(8,8,8,1)}.ui-grid-col-2>.ui-btn:first-child{border-left:0 none}.ui-grid-col-3>.ui-btn{border-left:solid 1px rgba(8,8,8,1)}.ui-grid-col-3>.ui-btn:first-child{border-left:0 none}.ui-grid-row>.ui-btn{margin-top:1px}.ui-grid-row>.ui-btn:first-child{margin-top:0}.ui-popup{position:fixed;left:0;width:100%;margin:0;background-color:rgba(0,17,33,1);border:3px solid rgba(0,55,92,1);display:none;z-index:1100}.ui-popup:not(.ui-ctxpopup){bottom:0}.ui-popup .ui-popup-header{width:100%;min-height:68px;font-size:30px;text-align:left;background-color:rgba(5,42,71,1);color:rgba(116,196,252,1);padding-top:14px;padding-right:13px;padding-bottom:14px;padding-left:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-popup .ui-popup-content{width:100%;min-height:14rem;font-size:2.125rem;text-align:left;color:rgba(245,245,245,1);background-color:rgba(0,17,33,1);padding:10px 16px 9px;overflow:auto;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-popup .ui-popup-content .ui-listview,.ui-popup .ui-popup-content .ui-inline-listview{margin:-.5625rem -1rem -.5625rem -1rem}.ui-popup .ui-popup-content .ui-listview li,.ui-popup .ui-popup-content .ui-inline-listview li{font-size:2.125rem}.ui-popup .ui-popup-footer{width:100%;height:83px}.ui-popup .ui-popup-footer .ui-btn{padding-top:27px;padding-bottom:28px;font-size:30px}.ui-popup.ui-popup-active{display:block}.ui-popup.in{display:block}.ui-popup.ui-build{display:block;visibility:hidden}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast){max-height:100%}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-wrapper{width:100%;max-height:100%;overflow:auto!important;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content{height:auto!important}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header.ui-fixed{position:absolute!important;top:0;left:0;width:100%;z-index:2100}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-footer.ui-fixed{position:absolute!important;bottom:0;left:0;width:100%;z-index:2100;-webkit-transform:translate3d(0,0,0)}.ui-popup.ui-ctxpopup{background-color:transparent;width:100%;border:0 none;border-radius:0;overflow:visible}div.ui-popup.ui-ctxpopup.ui-popup-content-size{width:auto;padding:0}div.ui-popup.ui-ctxpopup.ui-popup-content-size .ui-popup-content{width:auto}.ui-popup.ui-ctxpopup .ui-popup-content{background-color:rgba(245,245,245,1);border:1px solid rgba(112,112,112,.9);color:#333;min-height:initial}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li{color:rgba(8,8,8,1);border-bottom:1px solid rgba(204,204,204,1);min-height:90px;padding:21px 8px 20px 16px}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a{color:rgba(8,8,8,1);margin:-21px -16px;padding:21px 16px;min-height:48px}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active{color:rgba(245,245,245,1);background-color:rgba(19,99,145,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li:last-child{border:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon{position:relative;padding-left:4.25rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon a{margin-left:-4.25rem;padding-left:4.25rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon::before{content:"";position:absolute;top:50%;left:.375rem;width:3.5rem;height:3.5rem;margin-top:-1.75rem;background-color:rgba(99,99,99,.9);-webkit-mask-size:3.5rem 3.5rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:3.5rem 3.5rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview a.ui-list-icon:active::before{background-color:rgba(245,245,245,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview{height:4.3125rem;overflow:hidden}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li{float:left;height:4.1875rem;line-height:4.1875rem;border-right:1px solid rgba(8,8,8,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li:last-child{border:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a{display:block;width:100%;height:100%;padding:0rem .5rem;color:rgba(8,8,8,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active{color:rgba(245,245,245,1);background-color:rgba(19,99,145,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext{width:3.6875rem;height:4.1875rem;text-indent:-1000em;overflow:hidden;position:relative}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext::before{content:"";position:absolute;top:50%;left:50%;width:2.6875rem;height:2.6875rem;margin-top:-1.34375rem;margin-left:-1.34375rem;background-color:rgba(8,8,8,1);-webkit-mask-size:2.6875rem 2.6875rem;-webkit-mask-repeat:no-repeat;mask-size:2.6875rem 2.6875rem;mask-repeat:no-repeat}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview a.ui-list-icon-notext:active::before{background-color:rgba(245,245,245,1)}.ui-popup.ui-ctxpopup .ui-arrow{width:36px;height:15px;overflow:hidden;position:absolute;display:none;animation-duration:0;-webkit-animation-duration:0}.ui-popup.ui-ctxpopup .ui-arrow span{width:20px;height:20px;background-color:rgba(245,245,245,1);border:1px solid rgba(112,112,112,.9);position:absolute;top:6px;left:8px;-webkit-transform:rotate(55deg) skew(24deg);transform:rotate(55deg) skew(24deg);animation-duration:0;-webkit-animation-duration:0}.ui-popup.ui-ctxpopup.ui-popup-arrow-b{padding:20px 20px 0}.ui-popup.ui-ctxpopup.ui-popup-arrow-t{padding:0 20px 20px}.ui-popup.ui-ctxpopup.ui-popup-arrow-r{padding:20px 0 20px 20px}.ui-popup.ui-ctxpopup.ui-popup-arrow-l{padding:20px 20px 20px 0}.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow{display:block;bottom:-.875rem;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow{display:block;top:-14px}.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow{display:block;right:-25px;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow{display:block;left:-25px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.ui-popup.ui-popup-toast{margin-left:0;margin-right:0;margin-bottom:0;font-size:1.5rem;border:3px solid rgba(0,55,92,1);border-radius:0;border-left:0;border-right:0;position:absolute;bottom:0;top:auto;height:auto}.ui-popup.ui-popup-toast .ui-popup-content{min-height:initial;padding:.6875rem 2.625rem .75rem;background-color:rgba(0,17,33,1)}.ui-popup-overlay{position:fixed;display:none;top:0;width:100%;height:100%;z-index:100;background-color:rgba(8,8,8,.7)}.ui-popup-overlay.in{display:block}.ui-popup.slideup.in{-webkit-animation-name:popupslideinfrombottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popupslideinfrombottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.slideup.out{-webkit-animation-name:popupslideouttobottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popupslideouttobottom;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes popupslideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0%)}}@keyframes popupslideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0%)}}@-webkit-keyframes popupslideouttobottom{from{transform:translateY(0%)}to{transform:translateY(100%)}}@keyframes popupslideouttobottom{from{transform:translateY(0%)}to{transform:translateY(100%)}}.ui-popup.pop.in{-webkit-animation-name:popuppopin;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popuppopin;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.pop.out{-webkit-animation-name:popuppopout;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popuppopout;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes popuppopin{from{transform:scale3d(0,0,1)}to{transform:scale3d(1,1,1)}}@-webkit-keyframes popuppopout{from{transform:scale3d(1,1,1)}to{transform:scale3d(0,0,1)}}.ui-popup-overlay.slideup.in,.ui-popup-overlay.pop.in{-webkit-animation-name:fadein;-webkit-animation-duration:250ms;animation-name:fadein;animation-duration:250ms}.ui-popup-overlay.slideup.out,.ui-popup-overlay.pop.out{-webkit-animation-name:fadeout;-webkit-animation-duration:250ms;animation-name:fadeout;animation-duration:250ms}.ui-popup.ui-popup-arrow-t.slideup.in,.ui-popup.ui-popup-arrow-l.slideup.in,.ui-popup.ui-popup-arrow-r.slideup.in{-webkit-animation-name:ctxpopupslideinfrombottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideinfrombottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-t.slideup.out,.ui-popup.ui-popup-arrow-l.slideup.out,.ui-popup.ui-popup-arrow-r.slideup.out{-webkit-animation-name:ctxpopupslideouttobottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideouttobottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-b.slideup.in{-webkit-animation-name:ctxpopupslideinfromtop;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideinfromtop;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-b.slideup.out{-webkit-animation-name:ctxpopupslideouttotop;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideouttotop;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes ctxpopupslideinfrombottom{from{transform:translateY(20%);opacity:0}to{transform:translateY(0%);opacity:1}}@keyframes ctxpopupslideinfrombottom{from{transform:translateY(20%);opacity:0}to{transform:translateY(0%);opacity:1}}@-webkit-keyframes ctxpopupslideouttobottom{from{transform:translateY(0%);opacity:1}to{transform:translateY(20%);opacity:0}}@keyframes ctxpopupslideouttobottom{from{transform:translateY(0%);opacity:1}to{transform:translateY(20%);opacity:0}}@-webkit-keyframes ctxpopupslideinfromtop{from{transform:translateY(-20%);opacity:0}to{transform:translateY(0%);opacity:1}}@keyframes ctxpopupslideinfromtop{from{transform:translateY(-20%);opacity:0}to{transform:translateY(0%);opacity:1}}@-webkit-keyframes ctxpopupslideouttotop{from{transform:translateY(0%);opacity:1}to{transform:translateY(-20%);opacity:0}}@keyframes ctxpopupslideouttotop{from{transform:translateY(0%);opacity:1}to{transform:translateY(-20%);opacity:0}}.ui-listview li{font-size:2.5rem;line-height:3rem;width:100%;min-height:6.25rem;padding:1.3125rem .5rem 1.25rem 1rem;border-bottom:1px solid rgba(56,56,56,1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;color:rgba(245,245,245,1)}.ui-listview li>*{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;color:rgba(245,245,245,1)}.ui-listview li>a{display:block;width:100%;height:100%;margin:-1.3125rem -1rem;padding:1.625rem 1rem;-o-box-sizing:content-box;-ms-box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.ui-listview li.ui-li-active{background-color:rgba(8,56,94,1);color:rgba(245,245,245,1)}.ui-listview .li-divider{height:1.875rem;min-height:1.875rem;line-height:1.875rem;padding:0 .5rem 0 1rem;background-color:rgba(29,72,105,1);color:rgba(151,197,230,1);font-size:1.5rem}.ui-listview .ui-li-sub-text{color:rgba(85,135,171,1);font-size:1.75rem}.ui-listview .ui-li-has-action-icon .ui-action-text{width:calc(100% - 4.8125rem);height:100%}.ui-listview .ui-li-has-action-icon .ui-action-text::after{content:"";position:absolute;height:3.5rem;width:.125rem;background-color:rgba(245,245,245,1);right:4.25rem;top:20%}.ui-listview .ui-li-has-action-icon .ui-action-divider{display:none}.ui-listview .ui-li-has-action-icon .ui-action-delete,.ui-listview .ui-li-has-action-icon .ui-action-setting,.ui-listview .ui-li-has-action-icon .ui-action-add{position:absolute;height:100%;width:4.5rem;right:0;top:0;-webkit-mask-size:3.5rem 3.5rem;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center center;padding:0;margin:0}.ui-listview .ui-li-has-action-icon .ui-action-delete{-webkit-mask-image:url(images/listview/tw_list_delete_holo_dark.png);background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-setting{-webkit-mask-image:url(images/listview/tw_list_setting_holo_dark.png);background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-add{-webkit-mask-image:url(images/listview/tw_list_add_holo_dark.png);background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon.ui-li-active{background-color:transparent}.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active{background-color:rgba(8,56,94,1);color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-delete:active,.ui-listview .ui-li-has-action-icon .ui-action-setting:active,.ui-listview .ui-li-has-action-icon .ui-action-add:active{background-color:rgba(8,56,94,1);color:rgba(245,245,245,1)}.ui-datetime-widget{position:relative;height:100%}.ui-datetime{text-align:center;padding-top:56px}.ui-time-picker .ui-datetime{padding-top:53px}.ui-datetime:only-child{padding-top:92px}.ui-time-picker .ui-datetime:only-child{padding-top:89px}.ui-datetime input[type=date],.ui-datetime input[type=datetime],.ui-datetime input[type=time]{display:none}.ui-datefield{height:52px;display:inline-block;vertical-align:top}.ui-datefield>.ui-btn{float:left;height:52px;padding:0;line-height:52px;font-size:42px;font-weight:600;border-radius:2px;background-color:rgba(255,255,255,.15)}.ui-datefield .ui-datefield-separator{display:block;height:100%;float:left;width:18px;background:transparent url(images/Datetimepicker/tw_timepicker_num_dot.png)}.ui-datefield>.ui-btn:enabled:focus{background-color:rgba(255,255,255,.15)}.ui-datefield>.ui-btn:disabled{color:#404040}.ui-datafield>.ui-btn.ui-selected,.ui-datefield>.ui-btn:enabled:active,.ui-datefield>.ui-btn.ui-state-active:enabled,.ui-datefield>.ui-btn.ui-selected:enabled{background-color:#ff9000;color:#000}.ui-date-picker .ui-datefield>.ui-btn:first-child{margin-right:2px}.ui-date-picker .ui-datefield>.ui-btn:last-child{margin-left:2px}.ui-date-picker .ui-datefield-year{width:114px}.ui-date-picker .ui-datefield-month{width:102px}.ui-date-picker .ui-datefield-day{width:68px}.ui-time-picker .ui-datefield-hour{width:74px}.ui-time-picker .ui-datefield-min{width:74px}.ui-time-picker .ui-datefield-period{width:84px;margin-left:10px}.ui-time-picker .ui-datefield{height:58px}.ui-time-picker .ui-datefield>.ui-btn{height:58px;line-height:58px;font-size:50px}.ui-time-picker .ui-datefield>.ui-btn.ui-datefield-period{font-size:48px}.ui-datetime-wheel{height:68px;margin:0 10px;margin-top:30px}.ui-time-picker .ui-datetime-wheel{margin-top:27px}.ui-datetime-wheel .ui-btn{width:68px;height:68px;float:left}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus{float:right;background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png) center center no-repeat}.ui-datetime-wheel .ui-wheel{display:block;margin-left:68px;margin-right:68px;height:68px;padding:10px 0;background:url(images/Datetimepicker/tw_timepicker_wheel_01.png) center center no-repeat}.ui-datetime-btns{position:absolute;bottom:0;width:100%;height:76px;border-top:2px solid #262626}.ui-datetime-btns::before{content:"";height:34px;width:1px;background-color:#262626;position:absolute;left:160px;top:20px}.ui-datetime-btns .ui-btn{height:100%;position:relative;background-color:transparent}.ui-datetime-btns .ui-btn:enabled:active,.ui-datetime-btns .ui-btn:enabled:focus,.ui-datetime-btns .ui-btn:enabled:active:focus{background-color:transparent}.ui-datetime-btns .ui-btn-left{width:160px;float:left;background:url(images/Datetimepicker/tw_timepicker_left_softbtn.png) center center no-repeat}.ui-datetime-btns .ui-btn-right{width:159px;float:right;background:url(images/Datetimepicker/tw_timepicker_right_softbtn.png) center center no-repeat}.ui-datetime-btns .ui-btn:disabled,.ui-datetime-btns .ui-btn.ui-state-disabled{opacity:.2}.ui-datetime-periods{height:102px;margin-top:7px;display:inline-block}.ui-datetime-periods .ui-btn,.ui-datetime-periods .ui-datetime-periods-separator{height:100%;float:left;padding:0;background:transparent}.ui-datetime-periods .ui-btn{width:102px;font-size:34px;line-height:102px}.ui-datetime-periods .ui-btn:enabled:focus{background:transparent}.ui-datetime-periods .ui-btn:enabled:active,.ui-datetime-periods .ui-btn:enabled:active:focus,.ui-datetime-periods .ui-btn.ui-selected:enabled:active,.ui-datetime-periods .ui-btn.ui-state-active:enabled:active{color:inherit;text-decoration:none;background:url(images/Datetimepicker/tw_timepicker_time_bg.png) center center no-repeat}.ui-datetime-periods .ui-btn.ui-selected:enabled,.ui-datetime-periods .ui-btn.ui-state-active:enabled{color:#ff9000;text-decoration:underline}.ui-datetime-periods .ui-datetime-periods-separator{width:24px;background:url(images/Datetimepicker/tw_timepicker_num_dot_01.png) center center no-repeat}.ui-datetime-wheel.ui-hidden,.ui-datetime-periods.ui-hidden{display:none}.ui-viewport-transitioning,.ui-viewport-transitioning .ui-page{width:100%;height:100%;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ui-pre-in{z-index:100;visibility:visible;display:block;top:0;left:0}.in{-webkit-animation-timing-function:ease-out;-webkit-animation-duration:350ms;-moz-animation-timing-function:ease-out;-moz-animation-duration:350ms;animation-timing-function:ease-out;animation-duration:350ms}.out{-webkit-animation-timing-function:ease-in;-webkit-animation-duration:225ms;-moz-animation-timing-function:ease-in;-moz-animation-duration:225ms;animation-timing-function:ease-in;animation-duration:225ms}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadeout{from{opacity:1}to{opacity:0}}@-moz-keyframes fadeout{from{opacity:1}to{opacity:0}}@keyframes fadeout{from{opacity:1}to{opacity:0}}.fade.out{opacity:0;-webkit-animation-duration:125ms;-webkit-animation-name:fadeout;-moz-animation-duration:125ms;-moz-animation-name:fadeout;animation-duration:125ms;animation-name:fadeout}.fade.in{opacity:1;-webkit-animation-duration:225ms;-webkit-animation-name:fadein;-moz-animation-duration:225ms;-moz-animation-name:fadein;animation-duration:225ms;animation-name:fadein}.slideup.out{-webkit-animation-name:fadeout;-webkit-animation-duration:250ms;-moz-animation-name:fadeout;-moz-animation-duration:250ms;animation-name:fadeout;animation-duration:250ms}.slideup.in{-webkit-transform:translateY(0);-webkit-animation-name:slideinfrombottom;-webkit-animation-duration:250ms;-moz-transform:translateY(0);-moz-animation-name:slideinfrombottom;-moz-animation-duration:250ms;transform:translateY(0);animation-name:slideinfrombottom;animation-duration:250ms}.slideup.in.reverse{-webkit-animation-name:fadein;-webkit-animation-duration:250ms;-moz-animation-name:fadein;-moz-animation-duration:250ms;animation-name:fadein;animation-duration:250ms}.slideup.out.reverse{z-index:101;-webkit-transform:translateY(100%);-webkit-animation-name:slideouttobottom;-webkit-animation-duration:250ms;-moz-transform:translateY(100%);-moz-animation-name:slideouttobottom;-moz-animation-duration:250ms;transform:translateY(100%);animation-name:slideouttobottom;animation-duration:250ms}@-webkit-keyframes slideinfrombottom{from{-webkit-transform:translateY(100%)}to{-webkit-transform:translateY(0)}}@-moz-keyframes slideinfrombottom{from{-moz-transform:translateY(100%)}to{-moz-transform:translateY(0)}}@keyframes slideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes slideouttobottom{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateY(100%)}}@-moz-keyframes slideouttobottom{from{-moz-transform:translateY(0)}to{-moz-transform:translateY(100%)}}@keyframes slideouttobottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popnone{from{opacity:1}to{opacity:1}}@-webkit-keyframes popin{from{transform:scale3d(0,0,1)}to{transform:scale3d(1,1,1)}}@-webkit-keyframes popout{from{transform:scale3d(1,1,1)}to{transform:scale3d(0,0,1)}}.pop.out.reverse{z-index:200;-webkit-animation-duration:225ms;-webkit-animation-name:popout;-moz-animation-duration:225ms;-moz-animation-name:popout;animation-duration:225ms;animation-name:popout}.pop.in.reverse{-webkit-animation-duration:225ms;-webkit-animation-name:popnone;-moz-animation-duration:225ms;-moz-animation-name:popnone;animation-duration:225ms;animation-name:popnone}.pop.in{-webkit-animation-duration:225ms;-webkit-animation-name:popin;-moz-animation-duration:225ms;-moz-animation-name:popin;animation-duration:225ms;animation-name:popin}.ui-indexscrollbar{display:block;position:fixed;right:0;top:0;width:2.8125rem;height:100%;padding-left:.125rem;background-color:rgba(33,33,33,1);z-index:10;overflow:visible;-webkit-user-select:none;cursor:pointer}.ui-indexscrollbar ul{position:absolute;width:100%;top:0}.ui-indexscrollbar ul li{color:rgba(84,84,84,1);display:block;width:100%;text-align:center;font-size:1.5rem;height:2.25rem}.ui-indexscrollbar ul li.ui-state-selected{background-color:rgba(43,43,43,1);color:rgba(55,161,237,1)}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary{position:relative;height:auto;top:0;right:-2.5rem;width:100%}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li{background-color:rgba(43,43,43,1);color:rgba(84,84,84,1)}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li.ui-state-selected{background-color:rgba(43,43,43,1);color:rgba(55,161,237,1)}.ui-indexscrollbar+.ui-listview li{padding-right:2.5rem}.ui-indexscrollbar-indicator{position:fixed;top:0;left:0;z-index:9;display:none}.ui-indexscrollbar-indicator>span{width:8.75rem;height:5.4375rem;position:absolute;display:block;top:50%;left:50%;margin-left:-5.625rem;margin-top:-2.6875rem;line-height:5.4375rem;font-size:4.375rem;text-align:center;background-color:rgba(0,61,107,.95);color:rgba(250,250,250,1)}.ui-indexscrollbar-indicator>span>span.ui-selected{color:rgba(55,161,237,1)}.ui-circularindexscrollbar{position:fixed;top:0;left:-100%;z-index:9999;width:100%;height:100%}.ui-circularindexscrollbar.ui-circularindexscrollbar-show .ui-circularindexscrollbar-indexbar{pointer-events:auto;-webkit-transform:scale(1,1);-webkit-transition-duration:500ms;-webkit-transition-timing-function:linear}.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar{pointer-events:none;position:absolute;top:0;left:100%;width:100%;height:100%;border-radius:50%;background:-webkit-radial-gradient(center,ellipse cover,transparent 59%,rgba(33,33,33,1) 59%);overflow:hidden;-webkit-transform:scale(1.2,1.2);-webkit-transition-duration:500ms;-webkit-transition-timing-function:linear}.ui-circularindexscrollbar .ui-circularindexscrollbar-index{position:absolute;top:50%;left:50%;box-sizing:border-box;width:50%;height:50%;margin-top:-50%;margin-left:-50%;-webkit-transform-origin:100% 100% 0;overflow:hidden}.ui-circularindexscrollbar .ui-circularindexscrollbar-index span{position:absolute;width:100%;height:100%;margin-left:50%;padding-top:.3125rem;text-align:center;color:rgba(84,84,84,1);-webkit-transform-origin:50% 100% 0;font-size:1.25rem}.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span{color:rgba(55,161,237,1)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator{position:absolute;top:50%;width:8.9375rem;height:8.9375rem;line-height:8.9375rem;border-radius:50%;background-color:rgba(0,61,107,.95);-webkit-mask-image:url(images/Indicator/b_fast_scroll_rollover_bg.png);-webkit-mask-repeat:no-repeat;-webkit-mask-size:8.9375rem;margin-top:-4.4375rem;margin-left:100%;-webkit-transform:translate3d(-6.703125rem,0,0)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text{text-align:center;font-size:4.375rem;color:rgba(55,161,237,1)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-minimize .ui-circularindexscrollbar-indicator-text{padding-right:.4375rem;text-align:right;font-size:2rem}.ui-scrollbar-bar-type{position:absolute}.ui-scrollbar-bar-type.ui-scrollbar-horizontal{left:0;bottom:0;width:100%;height:8px}.ui-scrollbar-bar-type.ui-scrollbar-vertical{right:0;top:0;width:.5rem;height:100%}.ui-scrollbar-bar-type .ui-scrollbar-indicator{position:absolute;background-color:rgba(102,102,102,1)}.ui-scrollbar-bar-type.ui-scrollbar-horizontal .ui-scrollbar-indicator{height:.25rem}.ui-scrollbar-bar-type.ui-scrollbar-vertical .ui-scrollbar-indicator{width:.25rem}.ui-scrollbar-bouncing-effect{display:none;position:absolute;background-repeat:no-repeat;-webkit-animation-duration:.47s;-moz-animation-duration:.47s;-ms-animation-duration:.47s;-o-animation-duration:.47s;-webkit-animation-timing-function:step-start;-moz-animation-timing-function:step-start;-ms-animation-timing-function:step-start;-o-animation-timing-function:step-start;animation-timing-function:step-start;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards;background-color:rgba(55,161,237,.7)}.ui-scrollbar-bouncing-effect::before{content:"";position:absolute;background-color:rgba(55,161,237,1)}.ui-scrollbar-bouncing-effect.ui-top,.ui-scrollbar-bouncing-effect.ui-bottom{width:100%;height:3.125rem;left:0;-webkit-mask-size:100% 3.125rem}.ui-scrollbar-bouncing-effect.ui-top::before,.ui-scrollbar-bouncing-effect.ui-bottom::before{width:100%;height:.125rem;-webkit-mask-size:100% .125rem}.ui-scrollbar-bouncing-effect.ui-left,.ui-scrollbar-bouncing-effect.ui-right{width:3.125rem;height:100%;top:0;-webkit-mask-size:3.125rem 100%}.ui-scrollbar-bouncing-effect.ui-left::before,.ui-scrollbar-bouncing-effect.ui-right::before{width:.0625rem;height:100%;-webkit-mask-size:.0625rem 100%}.ui-scrollbar-bouncing-effect.ui-top{top:0;-webkit-mask-image:url(images/Scroller/bouncing_top_glow.png)}.ui-scrollbar-bouncing-effect.ui-top::before{-webkit-mask-image:url(images/Scroller/bouncing_top_edge.png)}.ui-scrollbar-bouncing-effect.ui-bottom{bottom:0;-webkit-mask-image:url(images/Scroller/bouncing_bottom_glow.png)}.ui-scrollbar-bouncing-effect.ui-bottom::before{-webkit-mask-image:url(images/Scroller/bouncing_bottom_edge.png)}.ui-scrollbar-bouncing-effect.ui-left{left:0;-webkit-mask-image:url(images/Scroller/bouncing_left_glow.png)}.ui-scrollbar-bouncing-effect.ui-left::before{-webkit-mask-image:url(images/Scroller/bouncing_left_edge.png)}.ui-scrollbar-bouncing-effect.ui-right{right:0;-webkit-mask-image:url(images/Scroller/bouncing_right_glow.png)}.ui-scrollbar-bouncing-effect.ui-right::before{-webkit-mask-image:url(images/Scroller/bouncing_right_edge.png)}@-webkit-keyframes ui-bouncing-show{0%{opacity:0}10%{opacity:.1}20%{opacity:.2}30%{opacity:.3}40%{opacity:.4}50%{opacity:.5}60%{opacity:.6}70%{opacity:.7}80%{opacity:.8}90%{opacity:.9}100%{opacity:1}}@-webkit-keyframes ui-bouncing-hide{0%{opacity:1}10%{opacity:.9}20%{opacity:.8}30%{opacity:.7}40%{opacity:.6}50%{opacity:.5}60%{opacity:.4}70%{opacity:.3}80%{opacity:.2}90%{opacity:.1}100%{opacity:0}}.ui-scrollbar-bouncing-effect.ui-show{display:block;-webkit-animation-name:ui-bouncing-show}.ui-scrollbar-bouncing-effect.ui-hide{display:block;-webkit-animation-name:ui-bouncing-hide}.ui-swipelist{position:absolute;top:0}.ui-swipelist-left,.ui-swipelist-right{position:absolute;display:none}.ui-swipelist-left{background:-webkit-linear-gradient(left,rgba(98,168,24,1) 0,rgba(8,8,8,1) 0)}.ui-swipelist-right{background:-webkit-linear-gradient(right,rgba(235,164,23,1) 0,rgba(8,8,8,1) 0)}.ui-swipelist-icon,.ui-swipelist-text{position:absolute}.ui-swipelist-left .ui-swipelist-icon{width:20%;height:100%;margin-left:2%;background-color:rgba(245,245,245,1);-webkit-mask-image:url(images/Swipelist/b_logs_icon_body_btn_call_nor.png);-webkit-mask-repeat:no-repeat}.ui-swipelist-left .ui-swipelist-text{margin-left:40%;height:100%;line-height:90px}.ui-swipelist-right .ui-swipelist-icon{width:20%;height:100%;margin-left:80%;background-color:rgba(245,245,245,1);-webkit-mask-image:url(images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png);-webkit-mask-repeat:no-repeat}.ui-swipelist-right .ui-swipelist-text{margin-left:20%;height:100%;line-height:90px}.ui-tab-indicator{position:relative;height:6px}.ui-tab-indicator .ui-tab-item{position:absolute;top:0;left:0;display:block;height:6px;background-color:rgba(76,103,125,1)}.ui-tab-indicator .ui-tab-item.ui-tab-active{background-color:rgba(55,161,237,1)}input[type=checkbox]:not(.ui-switch-input),input[type=radio]{box-sizing:border-box;padding:0;height:56px;width:56px;font-size:32px;-webkit-appearance:none;position:relative}input[type=radio]{background-color:rgba(0,14,26,1);-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);-webkit-mask-repeat:no-repeat}input[type=radio]::after{content:"";background-color:rgba(245,245,245,.3);-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_line.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:checked::before{content:"";background-color:rgba(112,186,15,1);-webkit-mask-image:url(images/Controller_icon/tw_btn_radio_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:active{background-color:rgba(0,50,84,.4);-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);-webkit-mask-repeat:no-repeat}input[type=radio]:active::after{content:"";background-color:rgba(245,245,245,.3);-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_line.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:active:checked::before{content:"";background-color:rgba(245,245,245,1);-webkit-mask-image:url(images/Controller_icon/tw_btn_radio_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input){-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,14,26,1)}input[type=checkbox]:not(.ui-switch-input)::after{content:"";background-color:rgba(245,245,245,.3);-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):checked::before{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_check_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(112,186,15,1);width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):active{-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,50,84,.4)}input[type=checkbox]:not(.ui-switch-input):active::after{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(245,245,245,.3);width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):active:checked::before{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_check_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(245,245,245,1);width:56px;height:56px;position:absolute}.ui-marquee{position:relative;white-space:nowrap;overflow:hidden;-webkit-user-select:none}.ui-marquee.ui-marquee-gradient{text-overflow:clip}.ui-marquee.ui-marquee-gradient::after{content:"";width:6.875rem;height:100%;background:-webkit-linear-gradient(left,transparent 0,rgba(8,8,8,1) 100%);position:absolute;right:0}.ui-marquee.ui-marquee-ellipsis .ui-marquee-content{display:block;overflow:hidden;text-overflow:ellipsis}.ui-marquee-content{overflow:visible;display:inline-block}.ui-marquee-anim-running{-webkit-animation-play-state:running}.ui-marquee-anim-stopped{-webkit-animation-play-state:paused}.ui-page-indicator{position:absolute;left:50%;-webkit-transform:translate3d(-50%,0,0);-moz-transform:translate3d(-50%,0,0);-ms-transform:translate3d(-50%,0,0);-o-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.ui-page-indicator-item{position:relative;display:inline-block;width:.8125rem;height:.8125rem;-webkit-mask-image:-webkit-radial-gradient(#000 .25rem,transparent .375rem);background-color:rgba(245,245,245,.4);margin-right:.5625rem;-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-page-indicator-item:last-child{margin-right:0}.ui-page-indicator-item.ui-page-indicator-active{background-color:rgba(245,245,245,1);-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-snap-listview li{-webkit-scroll-snap-destination:50% 50%}.ui-drawer{width:100%;height:100%;position:fixed;top:0;background-color:rgba(8,8,8,1);z-index:1201;box-sizing:border-box}.ui-drawer.ui-drawer-close{overflow:hidden}.ui-drawer.ui-drawer-open{overflow:auto}.ui-drawer-overlay{top:0;position:fixed;background-color:rgba(0,0,0,.8);z-index:1200}.ui-page .ui-expandable-header{height:60px}.ui-page .ui-expandable-header.ui-header-expand{height:80px}.ui-page .ui-expandable-header.ui-header-expand .ui-title{padding-top:0;transform:translate3d(0,20px,0)}.ui-section-changer{height:100%}
\ No newline at end of file
diff --git a/lib/tau/wearable/theme/changeable/tau.min.template b/lib/tau/wearable/theme/changeable/tau.min.template
new file mode 100644
index 0000000..157d732
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/tau.min.template
@@ -0,0 +1 @@
+*{outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:Tizen,Samsung Sans,Helvetica}body{margin:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button[disabled],input[disabled]{cursor:default}input[type=time],input[type=date]{color:#000}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.screen-hidden{visibility:hidden;position:absolute;top:-10000em;left:-10000em}button,input{outline:0;cursor:pointer}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}a{text-decoration:none!important;color:T0811}ul,li{margin:0;padding:0;list-style-type:none}img{margin:0;padding:0}html{-webkit-tap-highlight-color:rgba(0,0,0,0)}body{height:100%;font-size:2.125rem;font-family:Tizen,Samsung Sans,Helvetica;background:B011;color:T0811}.ui-page{width:100%;height:100%;overflow:hidden;display:none;position:absolute;top:0;left:0;background:B011;-webkit-tap-highlight-color:rgba(0,0,0,0)}.ui-page.ui-page-active{display:block}.ui-page.ui-page-build{display:block;visibility:hidden}.scrolling-mode-touch{-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-content{width:auto;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-header{position:relative;width:100%;height:60px;line-height:60px;background-color:B0511}.ui-header .ui-title{color:T012;font-size:32px;font-weight:700;white-space:nowrap;overflow:hidden;margin:0;padding-left:16px;padding-right:16px;-webkit-mask-image:-webkit-linear-gradient(left,#000 80%,rgba(0,0,0,0) 95%)}.ui-header .ui-title.ui-icon{padding-left:60px;background-position:16px 14px;background-size:34px 34px;background-repeat:no-repeat}.ui-header.ui-has-more .ui-title{padding-right:78px;-webkit-mask-image:-webkit-linear-gradient(left,#000 70%,rgba(0,0,0,0) 75%)}.ui-header button.ui-more,.ui-header input.ui-more{border:0 none;padding:0}.ui-header .ui-more-disable{cursor:default;background-color:transparent}.ui-header .ui-more{display:block;position:absolute;top:0;right:0;width:68px;height:100%;overflow:hidden;text-indent:-1000em;background-position:center center;background-color:transparent;cursor:pointer}.ui-header .ui-more:active{background-color:W011P!important}.ui-header .ui-more.ui-icon-detail{background-color:B052L1;-webkit-mask-image:url(images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-detail[disabled=disabled]{cursor:default;background-color:transparent;background-color:B052L1D;-webkit-mask-image:url(images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-overflow{background-color:B052L1;-webkit-mask-image:url(images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position-x:.9375rem;-webkit-mask-position-y:50%;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-overflow[disabled=disabled]{cursor:default;background-color:transparent;background-color:B052L1D;-webkit-mask-image:url(images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-selectall{background-color:B052L1;-webkit-mask-image:url(images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-selectall[disabled=disabled]{cursor:default;background-color:transparent;background-color:B052L1D;-webkit-mask-image:url(images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-footer{width:100%;height:85px;position:absolute;bottom:0;left:0}.ui-page.ui-scroll-on{overflow:auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-page.ui-scroll-on .ui-content{height:auto!important}.ui-page.ui-scroll-on .ui-footer{position:relative}.ui-header.ui-fixed{position:fixed!important;top:0;left:0;width:100%;z-index:1000}.ui-footer.ui-fixed{position:fixed!important;bottom:0;left:0;width:100%;z-index:1000;-webkit-transform:translate3d(0,0,0)}.ui-grid-col>*{float:left}.ui-page .ui-grid-col-1>*{float:left}.ui-page .ui-grid-col-1>*{width:100%}.ui-page .ui-grid-col-2>*{float:left}.ui-page .ui-grid-col-2>*{width:50%}.ui-page .ui-grid-col-3>*{float:left}.ui-page .ui-grid-col-3>*{width:33.333333333333336%}.ui-grid-row>*{display:block}@-webkit-keyframes indeterminate{0%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}25%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}50%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}75%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}100%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}}progress{position:relative;padding-left:1rem;padding-right:1rem;margin-top:.875rem;margin-bottom:.875rem;color:T0811;width:100%;height:.375rem;-webkit-appearance:none;border:0}progress::-webkit-progress-bar{position:relative;background-color:B065L3;border-radius:.125rem;overflow:hidden}progress::-webkit-progress-value{background-color:B065L2;height:.375rem;border-radius:.125rem;overflow:hidden}progress.ui-progress-indeterminate::-webkit-progress-bar{background-color:B065L2}progress.ui-progress-indeterminate::-webkit-progress-value{background-size:100% 100%;-webkit-animation:indeterminate 150ms infinite}.ui-progress-proportion{display:inline-block;float:left;font-size:20px;padding-left:1rem;padding-right:1rem;margin-top:-.625rem}.ui-progress-ratio{display:inline-block;float:right;font-size:20px;padding-left:1rem;padding-right:1rem;margin-top:-.625rem}.ui-circle-progress{display:none}.ui-progressbar.ui-progressbar-full{position:fixed;top:0;left:0;width:100%;height:100%}.ui-progressbar.ui-progressbar-large{width:6.25rem;height:6.25rem}.ui-progressbar.ui-progressbar-medium{width:5.25rem;height:5.25rem}.ui-progressbar.ui-progressbar-small{width:3.5rem;height:3.5rem}.ui-progressbar{position:relative;display:inline-block;pointer-events:none}.ui-progressbar .ui-progressbar-value.ui-progressbar-half{clip:rect(auto,auto,auto,auto)}.ui-progressbar .ui-progressbar-value.ui-progressbar-half .ui-progressbar-value-right{-webkit-transform:rotate(180deg)}.ui-progressbar .ui-progressbar-value{clip:rect(0,1em,1em,.5em);width:100%;height:100%;position:absolute}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left{border:.5rem solid B065L2;border-radius:50%;clip:rect(0,.5em,1em,0);height:100%;width:100%;position:absolute}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right{border:.5rem solid B065L2;border-radius:50%;clip:rect(0,.5em,1em,0);width:100%;height:100%;position:absolute}.ui-progressbar .ui-progressbar-bg{border:.5rem solid B065L3;border-radius:50%;width:100%;height:100%}.ui-switch{width:100%;color:T0811}.ui-switch-inneroffset,.ui-switch-handler{display:none}.ui-switch-text{margin-top:30px;margin-bottom:40px;padding:0 30px;font-size:34px;text-align:center}.ui-switch-sub-text{margin-top:48px;margin-bottom:55px;font-size:26px;text-align:center;color:T161}.ui-toggleswitch{position:relative;display:inline-block;width:92px;height:49px}.ui-toggleswitch .ui-switch-input{position:absolute;width:100%;height:100%;-webkit-appearance:none;display:block}.ui-toggleswitch .ui-switch-input::before{content:"";position:absolute;width:100%;height:100%;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 0;background-color:W014L2P;z-index:0}.ui-toggleswitch .ui-switch-input:active::before{background-color:W014L2P}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button{background-color:W014L4P}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button::before{background-color:W014L6P}.ui-toggleswitch .ui-switch-activation,.ui-toggleswitch .ui-switch-button{width:59px;height:49px;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 -49px;background-color:W014L4;position:absolute;top:0;left:0;pointer-events:none;z-index:1}.ui-toggleswitch .ui-switch-activation::before,.ui-toggleswitch .ui-switch-button::before{content:"";position:absolute;width:100%;height:100%;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 -98px;background-color:W014L6;top:0;left:0}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button{width:59px;height:49px;-webkit-mask-position:0 -49px;background-color:W014L3;-webkit-transform:translate3d(33px,0,0);-moz-transform:translate3d(33px,0,0);-ms-transform:translate3d(33px,0,0);-o-transform:translate3d(33px,0,0);transform:translate3d(33px,0,0)}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -147px;background-color:W014L5}.ui-toggleswitch .ui-switch-input:checked::before{background-color:W014L1}.ui-toggleswitch .ui-switch-input:checked:active::before{background-color:W014L1P}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button{background-color:W014L3P}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button::before{background-color:W014L5P}.ui-toggleswitch.ui-toggleswitch-large{width:207px;height:110px;display:block;margin:0 auto}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button{width:132px;height:110px;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:207px;-webkit-mask-position:0 -110px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before{-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-position:0 -220px;-webkit-mask-size:207px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before{-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:207px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button{width:132px;height:110px;-webkit-mask-position:0 -110px;-webkit-transform:translate3d(75px,0,0);-moz-transform:translate3d(75px,0,0);-ms-transform:translate3d(75px,0,0);-o-transform:translate3d(75px,0,0);transform:translate3d(75px,0,0)}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -330px}@-webkit-keyframes rotating{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}.ui-processing{background-color:B066L1;-webkit-mask-image:url(images/Processing/tw_progress_small_loading_bg.png);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-animation:rotating 1s linear infinite;width:3.5rem;height:3.5rem;margin:0 auto;margin-top:2.125rem;margin-bottom:.875rem}.ui-processing-text{margin:0 auto;text-align:center;width:10.5rem;font-size:1.5rem}.ui-processing.ui-processing-full-size{background-color:transparent;-webkit-mask-image:none;-webkit-animation:none;width:100%;height:100%;pointer-events:none;position:fixed;top:0;left:0;margin:0}.ui-processing.ui-processing-full-size::after{content:"";background-color:B065L2;-webkit-mask-image:url(images/Processing/tw_progress_full_loading_bg.png);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-animation:rotating 1s linear infinite;width:100%;height:100%;position:absolute}.ui-btn{display:block;padding-top:28.5px;padding-right:10px;padding-bottom:28.5px;padding-left:10px;margin:0;font-size:32px;line-height:28px;text-align:center;white-space:nowrap;cursor:pointer;vertical-align:middle;text-overflow:ellipsis;overflow:hidden;border:0 none;color:T041;background-color:W011}a.ui-btn:active:hover,.ui-btn:enabled:active:hover{background-color:W011P}.ui-btn:enabled:focus{background-color:W011}a.ui-btn.ui-state-disabled,.ui-btn:disabled{color:T041D;background-color:W011D;cursor:default}.ui-btn.ui-multiline{padding-top:10px;padding-bottom:10px}.ui-btn.ui-inline{display:inline-block}.ui-btn.ui-btn-icon{background-position:center center;height:76px;text-indent:-1000em;overflow:hidden;background-repeat:no-repeat;background-size:60px 60px}.ui-default{color:T041;background-color:W011}a.ui-default:active:hover,.ui-default:enabled:active:hover{background-color:W011P}.ui-default:enabled:focus{background-color:W011}a.ui-default.ui-state-disabled,.ui-default:disabled{color:T041D;background-color:W011D;cursor:default}.ui-color-red{color:T041;background-color:W012}a.ui-color-red:active:hover,.ui-color-red:enabled:active:hover{background-color:W012P}.ui-color-red:enabled:focus{background-color:W012}a.ui-color-red.ui-state-disabled,.ui-color-red:disabled{color:T041D;background-color:W012D;cursor:default}.ui-color-orange{color:T041;background-color:W013}a.ui-color-orange:active:hover,.ui-color-orange:enabled:active:hover{background-color:W013P}.ui-color-orange:enabled:focus{background-color:W013}a.ui-color-orange.ui-state-disabled,.ui-color-orange:disabled{color:T041D;background-color:W013D;cursor:default}.ui-color-green{color:T041;background-color:W014}a.ui-color-green:active:hover,.ui-color-green:enabled:active:hover{background-color:W014P}.ui-color-green:enabled:focus{background-color:W014}a.ui-color-green.ui-state-disabled,.ui-color-green:disabled{color:T041D;background-color:W014D;cursor:default}.ui-btn:focus,.ui-btn:active{outline:0}a.ui-btn{text-decoration:none;box-sizing:border-box}button.ui-btn,input.ui-btn{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;width:100%}button.ui-btn.ui-inline,input.ui-btn.ui-inline{display:inline-block;width:auto}.ui-grid-col-1>.ui-btn{border-left:solid 1px B011}.ui-grid-col-1>.ui-btn:first-child{border-left:0 none}.ui-grid-col-2>.ui-btn{border-left:solid 1px B011}.ui-grid-col-2>.ui-btn:first-child{border-left:0 none}.ui-grid-col-3>.ui-btn{border-left:solid 1px B011}.ui-grid-col-3>.ui-btn:first-child{border-left:0 none}.ui-grid-row>.ui-btn{margin-top:1px}.ui-grid-row>.ui-btn:first-child{margin-top:0}.ui-popup{position:fixed;left:0;width:100%;margin:0;background-color:B061L1E;border:3px solid B061L7;display:none;z-index:1100}.ui-popup:not(.ui-ctxpopup){bottom:0}.ui-popup .ui-popup-header{width:100%;min-height:68px;font-size:30px;text-align:left;background-color:B061L2;color:T091;padding-top:14px;padding-right:13px;padding-bottom:14px;padding-left:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-popup .ui-popup-content{width:100%;min-height:14rem;font-size:2.125rem;text-align:left;color:T0811;background-color:B061L1E;padding:10px 16px 9px;overflow:auto;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-popup .ui-popup-content .ui-listview,.ui-popup .ui-popup-content .ui-inline-listview{margin:-.5625rem -1rem -.5625rem -1rem}.ui-popup .ui-popup-content .ui-listview li,.ui-popup .ui-popup-content .ui-inline-listview li{font-size:2.125rem}.ui-popup .ui-popup-footer{width:100%;height:83px}.ui-popup .ui-popup-footer .ui-btn{padding-top:27px;padding-bottom:28px;font-size:30px}.ui-popup.ui-popup-active{display:block}.ui-popup.in{display:block}.ui-popup.ui-build{display:block;visibility:hidden}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast){max-height:100%}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-wrapper{width:100%;max-height:100%;overflow:auto!important;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content{height:auto!important}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header.ui-fixed{position:absolute!important;top:0;left:0;width:100%;z-index:2100}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-footer.ui-fixed{position:absolute!important;bottom:0;left:0;width:100%;z-index:2100;-webkit-transform:translate3d(0,0,0)}.ui-popup.ui-ctxpopup{background-color:transparent;width:100%;border:0 none;border-radius:0;overflow:visible}div.ui-popup.ui-ctxpopup.ui-popup-content-size{width:auto;padding:0}div.ui-popup.ui-ctxpopup.ui-popup-content-size .ui-popup-content{width:auto}.ui-popup.ui-ctxpopup .ui-popup-content{background-color:B092L1;border:1px solid B092L2;color:#333;min-height:initial}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li{color:T111;border-bottom:1px solid B094;min-height:90px;padding:21px 8px 20px 16px}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a{color:T111;margin:-21px -16px;padding:21px 16px;min-height:48px}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active{color:T111P;background-color:B093P}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li:last-child{border:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon{position:relative;padding-left:4.25rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon a{margin-left:-4.25rem;padding-left:4.25rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon::before{content:"";position:absolute;top:50%;left:.375rem;width:3.5rem;height:3.5rem;margin-top:-1.75rem;background-color:B095;-webkit-mask-size:3.5rem 3.5rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:3.5rem 3.5rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview a.ui-list-icon:active::before{background-color:B095P}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview{height:4.3125rem;overflow:hidden}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li{float:left;height:4.1875rem;line-height:4.1875rem;border-right:1px solid B097}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li:last-child{border:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a{display:block;width:100%;height:100%;padding:0rem .5rem;color:T111}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active{color:T111P;background-color:B093P}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext{width:3.6875rem;height:4.1875rem;text-indent:-1000em;overflow:hidden;position:relative}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext::before{content:"";position:absolute;top:50%;left:50%;width:2.6875rem;height:2.6875rem;margin-top:-1.34375rem;margin-left:-1.34375rem;background-color:B096;-webkit-mask-size:2.6875rem 2.6875rem;-webkit-mask-repeat:no-repeat;mask-size:2.6875rem 2.6875rem;mask-repeat:no-repeat}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview a.ui-list-icon-notext:active::before{background-color:B096P}.ui-popup.ui-ctxpopup .ui-arrow{width:36px;height:15px;overflow:hidden;position:absolute;display:none;animation-duration:0;-webkit-animation-duration:0}.ui-popup.ui-ctxpopup .ui-arrow span{width:20px;height:20px;background-color:B092L1;border:1px solid B092L2;position:absolute;top:6px;left:8px;-webkit-transform:rotate(55deg) skew(24deg);transform:rotate(55deg) skew(24deg);animation-duration:0;-webkit-animation-duration:0}.ui-popup.ui-ctxpopup.ui-popup-arrow-b{padding:20px 20px 0}.ui-popup.ui-ctxpopup.ui-popup-arrow-t{padding:0 20px 20px}.ui-popup.ui-ctxpopup.ui-popup-arrow-r{padding:20px 0 20px 20px}.ui-popup.ui-ctxpopup.ui-popup-arrow-l{padding:20px 20px 20px 0}.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow{display:block;bottom:-.875rem;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow{display:block;top:-14px}.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow{display:block;right:-25px;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow{display:block;left:-25px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.ui-popup.ui-popup-toast{margin-left:0;margin-right:0;margin-bottom:0;font-size:1.5rem;border:3px solid B061L7;border-radius:0;border-left:0;border-right:0;position:absolute;bottom:0;top:auto;height:auto}.ui-popup.ui-popup-toast .ui-popup-content{min-height:initial;padding:.6875rem 2.625rem .75rem;background-color:B061L1E}.ui-popup-overlay{position:fixed;display:none;top:0;width:100%;height:100%;z-index:100;background-color:W1712}.ui-popup-overlay.in{display:block}.ui-popup.slideup.in{-webkit-animation-name:popupslideinfrombottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popupslideinfrombottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.slideup.out{-webkit-animation-name:popupslideouttobottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popupslideouttobottom;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes popupslideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0%)}}@keyframes popupslideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0%)}}@-webkit-keyframes popupslideouttobottom{from{transform:translateY(0%)}to{transform:translateY(100%)}}@keyframes popupslideouttobottom{from{transform:translateY(0%)}to{transform:translateY(100%)}}.ui-popup.pop.in{-webkit-animation-name:popuppopin;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popuppopin;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.pop.out{-webkit-animation-name:popuppopout;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popuppopout;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes popuppopin{from{transform:scale3d(0,0,1)}to{transform:scale3d(1,1,1)}}@-webkit-keyframes popuppopout{from{transform:scale3d(1,1,1)}to{transform:scale3d(0,0,1)}}.ui-popup-overlay.slideup.in,.ui-popup-overlay.pop.in{-webkit-animation-name:fadein;-webkit-animation-duration:250ms;animation-name:fadein;animation-duration:250ms}.ui-popup-overlay.slideup.out,.ui-popup-overlay.pop.out{-webkit-animation-name:fadeout;-webkit-animation-duration:250ms;animation-name:fadeout;animation-duration:250ms}.ui-popup.ui-popup-arrow-t.slideup.in,.ui-popup.ui-popup-arrow-l.slideup.in,.ui-popup.ui-popup-arrow-r.slideup.in{-webkit-animation-name:ctxpopupslideinfrombottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideinfrombottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-t.slideup.out,.ui-popup.ui-popup-arrow-l.slideup.out,.ui-popup.ui-popup-arrow-r.slideup.out{-webkit-animation-name:ctxpopupslideouttobottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideouttobottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-b.slideup.in{-webkit-animation-name:ctxpopupslideinfromtop;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideinfromtop;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-b.slideup.out{-webkit-animation-name:ctxpopupslideouttotop;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideouttotop;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes ctxpopupslideinfrombottom{from{transform:translateY(20%);opacity:0}to{transform:translateY(0%);opacity:1}}@keyframes ctxpopupslideinfrombottom{from{transform:translateY(20%);opacity:0}to{transform:translateY(0%);opacity:1}}@-webkit-keyframes ctxpopupslideouttobottom{from{transform:translateY(0%);opacity:1}to{transform:translateY(20%);opacity:0}}@keyframes ctxpopupslideouttobottom{from{transform:translateY(0%);opacity:1}to{transform:translateY(20%);opacity:0}}@-webkit-keyframes ctxpopupslideinfromtop{from{transform:translateY(-20%);opacity:0}to{transform:translateY(0%);opacity:1}}@keyframes ctxpopupslideinfromtop{from{transform:translateY(-20%);opacity:0}to{transform:translateY(0%);opacity:1}}@-webkit-keyframes ctxpopupslideouttotop{from{transform:translateY(0%);opacity:1}to{transform:translateY(-20%);opacity:0}}@keyframes ctxpopupslideouttotop{from{transform:translateY(0%);opacity:1}to{transform:translateY(-20%);opacity:0}}.ui-listview li{font-size:2.5rem;line-height:3rem;width:100%;min-height:6.25rem;padding:1.3125rem .5rem 1.25rem 1rem;border-bottom:1px solid B0222;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;color:T0211}.ui-listview li>*{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;color:T0211}.ui-listview li>a{display:block;width:100%;height:100%;margin:-1.3125rem -1rem;padding:1.625rem 1rem;-o-box-sizing:content-box;-ms-box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.ui-listview li.ui-li-active{background-color:B041P;color:T0211P}.ui-listview .li-divider{height:1.875rem;min-height:1.875rem;line-height:1.875rem;padding:0 .5rem 0 1rem;background-color:B012;color:T0231;font-size:1.5rem}.ui-listview .ui-li-sub-text{color:T022;font-size:1.75rem}.ui-listview .ui-li-has-action-icon .ui-action-text{width:calc(100% - 4.8125rem);height:100%}.ui-listview .ui-li-has-action-icon .ui-action-text::after{content:"";position:absolute;height:3.5rem;width:.125rem;background-color:T0811;right:4.25rem;top:20%}.ui-listview .ui-li-has-action-icon .ui-action-divider{display:none}.ui-listview .ui-li-has-action-icon .ui-action-delete,.ui-listview .ui-li-has-action-icon .ui-action-setting,.ui-listview .ui-li-has-action-icon .ui-action-add{position:absolute;height:100%;width:4.5rem;right:0;top:0;-webkit-mask-size:3.5rem 3.5rem;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center center;padding:0;margin:0}.ui-listview .ui-li-has-action-icon .ui-action-delete{-webkit-mask-image:url(images/listview/tw_list_delete_holo_dark.png);background-color:F022L1i}.ui-listview .ui-li-has-action-icon .ui-action-setting{-webkit-mask-image:url(images/listview/tw_list_setting_holo_dark.png);background-color:F022L1i}.ui-listview .ui-li-has-action-icon .ui-action-add{-webkit-mask-image:url(images/listview/tw_list_add_holo_dark.png);background-color:F022L1i}.ui-listview .ui-li-has-action-icon.ui-li-active{background-color:transparent}.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active{background-color:B041P;color:T0211P}.ui-listview .ui-li-has-action-icon .ui-action-delete:active,.ui-listview .ui-li-has-action-icon .ui-action-setting:active,.ui-listview .ui-li-has-action-icon .ui-action-add:active{background-color:B041P;color:T0211P}.ui-datetime-widget{position:relative;height:100%}.ui-datetime{text-align:center;padding-top:56px}.ui-time-picker .ui-datetime{padding-top:53px}.ui-datetime:only-child{padding-top:92px}.ui-time-picker .ui-datetime:only-child{padding-top:89px}.ui-datetime input[type=date],.ui-datetime input[type=datetime],.ui-datetime input[type=time]{display:none}.ui-datefield{height:52px;display:inline-block;vertical-align:top}.ui-datefield>.ui-btn{float:left;height:52px;padding:0;line-height:52px;font-size:42px;font-weight:600;border-radius:2px;background-color:rgba(255,255,255,.15)}.ui-datefield .ui-datefield-separator{display:block;height:100%;float:left;width:18px;background:transparent url(images/Datetimepicker/tw_timepicker_num_dot.png)}.ui-datefield>.ui-btn:enabled:focus{background-color:rgba(255,255,255,.15)}.ui-datefield>.ui-btn:disabled{color:#404040}.ui-datafield>.ui-btn.ui-selected,.ui-datefield>.ui-btn:enabled:active,.ui-datefield>.ui-btn.ui-state-active:enabled,.ui-datefield>.ui-btn.ui-selected:enabled{background-color:#ff9000;color:#000}.ui-date-picker .ui-datefield>.ui-btn:first-child{margin-right:2px}.ui-date-picker .ui-datefield>.ui-btn:last-child{margin-left:2px}.ui-date-picker .ui-datefield-year{width:114px}.ui-date-picker .ui-datefield-month{width:102px}.ui-date-picker .ui-datefield-day{width:68px}.ui-time-picker .ui-datefield-hour{width:74px}.ui-time-picker .ui-datefield-min{width:74px}.ui-time-picker .ui-datefield-period{width:84px;margin-left:10px}.ui-time-picker .ui-datefield{height:58px}.ui-time-picker .ui-datefield>.ui-btn{height:58px;line-height:58px;font-size:50px}.ui-time-picker .ui-datefield>.ui-btn.ui-datefield-period{font-size:48px}.ui-datetime-wheel{height:68px;margin:0 10px;margin-top:30px}.ui-time-picker .ui-datetime-wheel{margin-top:27px}.ui-datetime-wheel .ui-btn{width:68px;height:68px;float:left}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus{float:right;background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png) center center no-repeat}.ui-datetime-wheel .ui-wheel{display:block;margin-left:68px;margin-right:68px;height:68px;padding:10px 0;background:url(images/Datetimepicker/tw_timepicker_wheel_01.png) center center no-repeat}.ui-datetime-btns{position:absolute;bottom:0;width:100%;height:76px;border-top:2px solid #262626}.ui-datetime-btns::before{content:"";height:34px;width:1px;background-color:#262626;position:absolute;left:160px;top:20px}.ui-datetime-btns .ui-btn{height:100%;position:relative;background-color:transparent}.ui-datetime-btns .ui-btn:enabled:active,.ui-datetime-btns .ui-btn:enabled:focus,.ui-datetime-btns .ui-btn:enabled:active:focus{background-color:transparent}.ui-datetime-btns .ui-btn-left{width:160px;float:left;background:url(images/Datetimepicker/tw_timepicker_left_softbtn.png) center center no-repeat}.ui-datetime-btns .ui-btn-right{width:159px;float:right;background:url(images/Datetimepicker/tw_timepicker_right_softbtn.png) center center no-repeat}.ui-datetime-btns .ui-btn:disabled,.ui-datetime-btns .ui-btn.ui-state-disabled{opacity:.2}.ui-datetime-periods{height:102px;margin-top:7px;display:inline-block}.ui-datetime-periods .ui-btn,.ui-datetime-periods .ui-datetime-periods-separator{height:100%;float:left;padding:0;background:transparent}.ui-datetime-periods .ui-btn{width:102px;font-size:34px;line-height:102px}.ui-datetime-periods .ui-btn:enabled:focus{background:transparent}.ui-datetime-periods .ui-btn:enabled:active,.ui-datetime-periods .ui-btn:enabled:active:focus,.ui-datetime-periods .ui-btn.ui-selected:enabled:active,.ui-datetime-periods .ui-btn.ui-state-active:enabled:active{color:inherit;text-decoration:none;background:url(images/Datetimepicker/tw_timepicker_time_bg.png) center center no-repeat}.ui-datetime-periods .ui-btn.ui-selected:enabled,.ui-datetime-periods .ui-btn.ui-state-active:enabled{color:#ff9000;text-decoration:underline}.ui-datetime-periods .ui-datetime-periods-separator{width:24px;background:url(images/Datetimepicker/tw_timepicker_num_dot_01.png) center center no-repeat}.ui-datetime-wheel.ui-hidden,.ui-datetime-periods.ui-hidden{display:none}.ui-viewport-transitioning,.ui-viewport-transitioning .ui-page{width:100%;height:100%;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ui-pre-in{z-index:100;visibility:visible;display:block;top:0;left:0}.in{-webkit-animation-timing-function:ease-out;-webkit-animation-duration:350ms;-moz-animation-timing-function:ease-out;-moz-animation-duration:350ms;animation-timing-function:ease-out;animation-duration:350ms}.out{-webkit-animation-timing-function:ease-in;-webkit-animation-duration:225ms;-moz-animation-timing-function:ease-in;-moz-animation-duration:225ms;animation-timing-function:ease-in;animation-duration:225ms}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadeout{from{opacity:1}to{opacity:0}}@-moz-keyframes fadeout{from{opacity:1}to{opacity:0}}@keyframes fadeout{from{opacity:1}to{opacity:0}}.fade.out{opacity:0;-webkit-animation-duration:125ms;-webkit-animation-name:fadeout;-moz-animation-duration:125ms;-moz-animation-name:fadeout;animation-duration:125ms;animation-name:fadeout}.fade.in{opacity:1;-webkit-animation-duration:225ms;-webkit-animation-name:fadein;-moz-animation-duration:225ms;-moz-animation-name:fadein;animation-duration:225ms;animation-name:fadein}.slideup.out{-webkit-animation-name:fadeout;-webkit-animation-duration:250ms;-moz-animation-name:fadeout;-moz-animation-duration:250ms;animation-name:fadeout;animation-duration:250ms}.slideup.in{-webkit-transform:translateY(0);-webkit-animation-name:slideinfrombottom;-webkit-animation-duration:250ms;-moz-transform:translateY(0);-moz-animation-name:slideinfrombottom;-moz-animation-duration:250ms;transform:translateY(0);animation-name:slideinfrombottom;animation-duration:250ms}.slideup.in.reverse{-webkit-animation-name:fadein;-webkit-animation-duration:250ms;-moz-animation-name:fadein;-moz-animation-duration:250ms;animation-name:fadein;animation-duration:250ms}.slideup.out.reverse{z-index:101;-webkit-transform:translateY(100%);-webkit-animation-name:slideouttobottom;-webkit-animation-duration:250ms;-moz-transform:translateY(100%);-moz-animation-name:slideouttobottom;-moz-animation-duration:250ms;transform:translateY(100%);animation-name:slideouttobottom;animation-duration:250ms}@-webkit-keyframes slideinfrombottom{from{-webkit-transform:translateY(100%)}to{-webkit-transform:translateY(0)}}@-moz-keyframes slideinfrombottom{from{-moz-transform:translateY(100%)}to{-moz-transform:translateY(0)}}@keyframes slideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes slideouttobottom{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateY(100%)}}@-moz-keyframes slideouttobottom{from{-moz-transform:translateY(0)}to{-moz-transform:translateY(100%)}}@keyframes slideouttobottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popnone{from{opacity:1}to{opacity:1}}@-webkit-keyframes popin{from{transform:scale3d(0,0,1)}to{transform:scale3d(1,1,1)}}@-webkit-keyframes popout{from{transform:scale3d(1,1,1)}to{transform:scale3d(0,0,1)}}.pop.out.reverse{z-index:200;-webkit-animation-duration:225ms;-webkit-animation-name:popout;-moz-animation-duration:225ms;-moz-animation-name:popout;animation-duration:225ms;animation-name:popout}.pop.in.reverse{-webkit-animation-duration:225ms;-webkit-animation-name:popnone;-moz-animation-duration:225ms;-moz-animation-name:popnone;animation-duration:225ms;animation-name:popnone}.pop.in{-webkit-animation-duration:225ms;-webkit-animation-name:popin;-moz-animation-duration:225ms;-moz-animation-name:popin;animation-duration:225ms;animation-name:popin}.ui-indexscrollbar{display:block;position:fixed;right:0;top:0;width:2.8125rem;height:100%;padding-left:.125rem;background-color:B0722;z-index:10;overflow:visible;-webkit-user-select:none;cursor:pointer}.ui-indexscrollbar ul{position:absolute;width:100%;top:0}.ui-indexscrollbar ul li{color:T0311;display:block;width:100%;text-align:center;font-size:1.5rem;height:2.25rem}.ui-indexscrollbar ul li.ui-state-selected{background-color:B0724;color:T0311P}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary{position:relative;height:auto;top:0;right:-2.5rem;width:100%}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li{background-color:B0723;color:T0311}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li.ui-state-selected{background-color:B0723;color:T0313}.ui-indexscrollbar+.ui-listview li{padding-right:2.5rem}.ui-indexscrollbar-indicator{position:fixed;top:0;left:0;z-index:9;display:none}.ui-indexscrollbar-indicator>span{width:8.75rem;height:5.4375rem;position:absolute;display:block;top:50%;left:50%;margin-left:-5.625rem;margin-top:-2.6875rem;line-height:5.4375rem;font-size:4.375rem;text-align:center;background-color:B0731;color:T0312}.ui-indexscrollbar-indicator>span>span.ui-selected{color:T0312P}.ui-circularindexscrollbar{position:fixed;top:0;left:-100%;z-index:9999;width:100%;height:100%}.ui-circularindexscrollbar.ui-circularindexscrollbar-show .ui-circularindexscrollbar-indexbar{pointer-events:auto;-webkit-transform:scale(1,1);-webkit-transition-duration:500ms;-webkit-transition-timing-function:linear}.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar{pointer-events:none;position:absolute;top:0;left:100%;width:100%;height:100%;border-radius:50%;background:-webkit-radial-gradient(center,ellipse cover,transparent 59%,B0722 59%);overflow:hidden;-webkit-transform:scale(1.2,1.2);-webkit-transition-duration:500ms;-webkit-transition-timing-function:linear}.ui-circularindexscrollbar .ui-circularindexscrollbar-index{position:absolute;top:50%;left:50%;box-sizing:border-box;width:50%;height:50%;margin-top:-50%;margin-left:-50%;-webkit-transform-origin:100% 100% 0;overflow:hidden}.ui-circularindexscrollbar .ui-circularindexscrollbar-index span{position:absolute;width:100%;height:100%;margin-left:50%;padding-top:.3125rem;text-align:center;color:T0311;-webkit-transform-origin:50% 100% 0;font-size:1.25rem}.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span{color:T0311P}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator{position:absolute;top:50%;width:8.9375rem;height:8.9375rem;line-height:8.9375rem;border-radius:50%;background-color:B0731;-webkit-mask-image:url(images/Indicator/b_fast_scroll_rollover_bg.png);-webkit-mask-repeat:no-repeat;-webkit-mask-size:8.9375rem;margin-top:-4.4375rem;margin-left:100%;-webkit-transform:translate3d(-6.703125rem,0,0)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text{text-align:center;font-size:4.375rem;color:T0312P}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-minimize .ui-circularindexscrollbar-indicator-text{padding-right:.4375rem;text-align:right;font-size:2rem}.ui-scrollbar-bar-type{position:absolute}.ui-scrollbar-bar-type.ui-scrollbar-horizontal{left:0;bottom:0;width:100%;height:8px}.ui-scrollbar-bar-type.ui-scrollbar-vertical{right:0;top:0;width:.5rem;height:100%}.ui-scrollbar-bar-type .ui-scrollbar-indicator{position:absolute;background-color:B071}.ui-scrollbar-bar-type.ui-scrollbar-horizontal .ui-scrollbar-indicator{height:.25rem}.ui-scrollbar-bar-type.ui-scrollbar-vertical .ui-scrollbar-indicator{width:.25rem}.ui-scrollbar-bouncing-effect{display:none;position:absolute;background-repeat:no-repeat;-webkit-animation-duration:.47s;-moz-animation-duration:.47s;-ms-animation-duration:.47s;-o-animation-duration:.47s;-webkit-animation-timing-function:step-start;-moz-animation-timing-function:step-start;-ms-animation-timing-function:step-start;-o-animation-timing-function:step-start;animation-timing-function:step-start;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards;background-color:B018E}.ui-scrollbar-bouncing-effect::before{content:"";position:absolute;background-color:B019}.ui-scrollbar-bouncing-effect.ui-top,.ui-scrollbar-bouncing-effect.ui-bottom{width:100%;height:3.125rem;left:0;-webkit-mask-size:100% 3.125rem}.ui-scrollbar-bouncing-effect.ui-top::before,.ui-scrollbar-bouncing-effect.ui-bottom::before{width:100%;height:.125rem;-webkit-mask-size:100% .125rem}.ui-scrollbar-bouncing-effect.ui-left,.ui-scrollbar-bouncing-effect.ui-right{width:3.125rem;height:100%;top:0;-webkit-mask-size:3.125rem 100%}.ui-scrollbar-bouncing-effect.ui-left::before,.ui-scrollbar-bouncing-effect.ui-right::before{width:.0625rem;height:100%;-webkit-mask-size:.0625rem 100%}.ui-scrollbar-bouncing-effect.ui-top{top:0;-webkit-mask-image:url(images/Scroller/bouncing_top_glow.png)}.ui-scrollbar-bouncing-effect.ui-top::before{-webkit-mask-image:url(images/Scroller/bouncing_top_edge.png)}.ui-scrollbar-bouncing-effect.ui-bottom{bottom:0;-webkit-mask-image:url(images/Scroller/bouncing_bottom_glow.png)}.ui-scrollbar-bouncing-effect.ui-bottom::before{-webkit-mask-image:url(images/Scroller/bouncing_bottom_edge.png)}.ui-scrollbar-bouncing-effect.ui-left{left:0;-webkit-mask-image:url(images/Scroller/bouncing_left_glow.png)}.ui-scrollbar-bouncing-effect.ui-left::before{-webkit-mask-image:url(images/Scroller/bouncing_left_edge.png)}.ui-scrollbar-bouncing-effect.ui-right{right:0;-webkit-mask-image:url(images/Scroller/bouncing_right_glow.png)}.ui-scrollbar-bouncing-effect.ui-right::before{-webkit-mask-image:url(images/Scroller/bouncing_right_edge.png)}@-webkit-keyframes ui-bouncing-show{0%{opacity:0}10%{opacity:.1}20%{opacity:.2}30%{opacity:.3}40%{opacity:.4}50%{opacity:.5}60%{opacity:.6}70%{opacity:.7}80%{opacity:.8}90%{opacity:.9}100%{opacity:1}}@-webkit-keyframes ui-bouncing-hide{0%{opacity:1}10%{opacity:.9}20%{opacity:.8}30%{opacity:.7}40%{opacity:.6}50%{opacity:.5}60%{opacity:.4}70%{opacity:.3}80%{opacity:.2}90%{opacity:.1}100%{opacity:0}}.ui-scrollbar-bouncing-effect.ui-show{display:block;-webkit-animation-name:ui-bouncing-show}.ui-scrollbar-bouncing-effect.ui-hide{display:block;-webkit-animation-name:ui-bouncing-hide}.ui-swipelist{position:absolute;top:0}.ui-swipelist-left,.ui-swipelist-right{position:absolute;display:none}.ui-swipelist-left{background:-webkit-linear-gradient(left,B0242 0,B011 0)}.ui-swipelist-right{background:-webkit-linear-gradient(right,B0241 0,B011 0)}.ui-swipelist-icon,.ui-swipelist-text{position:absolute}.ui-swipelist-left .ui-swipelist-icon{width:20%;height:100%;margin-left:2%;background-color:F021L1i;-webkit-mask-image:url(images/Swipelist/b_logs_icon_body_btn_call_nor.png);-webkit-mask-repeat:no-repeat}.ui-swipelist-left .ui-swipelist-text{margin-left:40%;height:100%;line-height:90px}.ui-swipelist-right .ui-swipelist-icon{width:20%;height:100%;margin-left:80%;background-color:F021L1i;-webkit-mask-image:url(images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png);-webkit-mask-repeat:no-repeat}.ui-swipelist-right .ui-swipelist-text{margin-left:20%;height:100%;line-height:90px}.ui-tab-indicator{position:relative;height:6px}.ui-tab-indicator .ui-tab-item{position:absolute;top:0;left:0;display:block;height:6px;background-color:B0514}.ui-tab-indicator .ui-tab-item.ui-tab-active{background-color:B0514P1}input[type=checkbox]:not(.ui-switch-input),input[type=radio]{box-sizing:border-box;padding:0;height:56px;width:56px;font-size:32px;-webkit-appearance:none;position:relative}input[type=radio]{background-color:W013L1;-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);-webkit-mask-repeat:no-repeat}input[type=radio]::after{content:"";background-color:W241;-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_line.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:checked::before{content:"";background-color:W013L2;-webkit-mask-image:url(images/Controller_icon/tw_btn_radio_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:active{background-color:W013L1P;-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);-webkit-mask-repeat:no-repeat}input[type=radio]:active::after{content:"";background-color:W241P;-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_line.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:active:checked::before{content:"";background-color:W013L2P;-webkit-mask-image:url(images/Controller_icon/tw_btn_radio_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input){-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:W012L1}input[type=checkbox]:not(.ui-switch-input)::after{content:"";background-color:W231;-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):checked::before{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_check_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:W012L2;width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):active{-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:W012L1P}input[type=checkbox]:not(.ui-switch-input):active::after{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:W231P;width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):active:checked::before{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_check_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:W012L2P;width:56px;height:56px;position:absolute}.ui-marquee{position:relative;white-space:nowrap;overflow:hidden;-webkit-user-select:none}.ui-marquee.ui-marquee-gradient{text-overflow:clip}.ui-marquee.ui-marquee-gradient::after{content:"";width:6.875rem;height:100%;background:-webkit-linear-gradient(left,transparent 0,B0211 100%);position:absolute;right:0}.ui-marquee.ui-marquee-ellipsis .ui-marquee-content{display:block;overflow:hidden;text-overflow:ellipsis}.ui-marquee-content{overflow:visible;display:inline-block}.ui-marquee-anim-running{-webkit-animation-play-state:running}.ui-marquee-anim-stopped{-webkit-animation-play-state:paused}.ui-page-indicator{position:absolute;left:50%;-webkit-transform:translate3d(-50%,0,0);-moz-transform:translate3d(-50%,0,0);-ms-transform:translate3d(-50%,0,0);-o-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.ui-page-indicator-item{position:relative;display:inline-block;width:.8125rem;height:.8125rem;-webkit-mask-image:-webkit-radial-gradient(#000 .25rem,transparent .375rem);background-color:T0211D;margin-right:.5625rem;-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-page-indicator-item:last-child{margin-right:0}.ui-page-indicator-item.ui-page-indicator-active{background-color:W1911;-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-snap-listview li{-webkit-scroll-snap-destination:50% 50%}.ui-drawer{width:100%;height:100%;position:fixed;top:0;background-color:B011;z-index:1201;box-sizing:border-box}.ui-drawer.ui-drawer-close{overflow:hidden}.ui-drawer.ui-drawer-open{overflow:auto}.ui-drawer-overlay{top:0;position:fixed;background-color:rgba(0,0,0,.8);z-index:1200}.ui-page .ui-expandable-header{height:60px}.ui-page .ui-expandable-header.ui-header-expand{height:80px}.ui-page .ui-expandable-header.ui-header-expand .ui-title{padding-top:0;transform:translate3d(0,20px,0)}.ui-section-changer{height:100%}
\ No newline at end of file
diff --git a/lib/tau/wearable/theme/changeable/tau.template b/lib/tau/wearable/theme/changeable/tau.template
new file mode 100644
index 0000000..9b2789b
--- /dev/null
+++ b/lib/tau/wearable/theme/changeable/tau.template
@@ -0,0 +1,2989 @@
+/***************************************************************************
+                  Body
+***************************************************************************/
+/***************************************************************************
+                   Action Bar
+***************************************************************************/
+/****************************************************************************
+               Circle Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Processing
+****************************************************************************/
+/****************************************************************************
+		Toggle Switch
+****************************************************************************/
+/***************************************************************************
+                   Buttons
+***************************************************************************/
+/***************************************************************************
+                   Popup
+***************************************************************************/
+/***************************************************************************
+                   Option Popup
+***************************************************************************/
+/***************************************************************************
+                  index scrollbar (vertical)
+***************************************************************************/
+/***************************************************************************
+                  circular index scrollbar
+***************************************************************************/
+/***************************************************************************
+                  Listview
+***************************************************************************/
+/****************************************************************************
+               Listview with Marquee
+****************************************************************************/
+/***************************************************************************
+                   Scroller
+***************************************************************************/
+/***************************************************************************
+                   Swipe list
+***************************************************************************/
+/***************************************************************************
+                   Checkbox/Radio
+***************************************************************************/
+/***************************************************************************
+						Page Indicator
+***************************************************************************/
+/************************************************************************/
+/*                           fixedUIStyle.less                          */
+/************************************************************************/
+/* When system font-size is changed, winset size (ex. header, footer, button, etc,
+   include font) also changed. But in UX guide, some UI elements should have fixed
+   size regardless of system font size.
+   So, this less file supports fixed style for some elements.
+   - Layout: header, footer, button
+   - Popup : popup header, popup footer
+   - toggleswitch
+   - progress: text for ratio
+*/
+/***********************************************************************/
+/*                         Layout(FIXED)                               */
+/***********************************************************************/
+/**********************************************************************/
+/*                        Button(FIXED)                               */
+/**********************************************************************/
+/**********************************************************************/
+/*                       Popup(FIXED)                                 */
+/**********************************************************************/
+/**********************************************************************/
+/*                      ToggleSwitch(FIXED)                           */
+/**********************************************************************/
+/*********************************************************************/
+/*                     Progress(FIXED)                               */
+/*********************************************************************/
+/************************
+Listview
+*************************/
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+/*
+ * default outline set none
+ */
+* {
+  outline: none;
+}
+/*
+ * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+  display: block;
+}
+/*
+ * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+audio,
+canvas,
+video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+/*
+ * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
+ * and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+[hidden] {
+  display: none;
+}
+/* ==========================================================================
+   Base
+   ========================================================================== */
+/*
+ * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+ *	`em` units.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ *	user zoom.
+ */
+html {
+  font-size: 100%;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+}
+/*
+ * Addresses `font-family` inconsistency between `textarea` and other form
+ * elements.
+ */
+html,
+button,
+input,
+select,
+textarea {
+  font-family: Tizen, Samsung Sans, Helvetica;
+}
+/*
+ * Addresses margins handled incorrectly in IE 6/7.
+ */
+body {
+  margin: 0;
+}
+/* ==========================================================================
+   Links
+   ========================================================================== */
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+/*
+ * Addresses font sizes and margins set differently in IE 6/7.
+ * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
+ * and Chrome.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+h3 {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+h4 {
+  font-size: 1em;
+  margin: 1.33em 0;
+}
+h5 {
+  font-size: 0.83em;
+  margin: 1.67em 0;
+}
+h6 {
+  font-size: 0.75em;
+  margin: 2.33em 0;
+}
+/*
+ * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
+ */
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+/*
+ * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+ */
+b,
+strong {
+  font-weight: bold;
+}
+blockquote {
+  margin: 1em 40px;
+}
+/*
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+dfn {
+  font-style: italic;
+}
+/*
+ * Addresses styling not present in IE 6/7/8/9.
+ */
+mark {
+  background: #ff0;
+  color: #000;
+}
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+p,
+pre {
+  margin: 1em 0;
+}
+/*
+ * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+/*
+ * Addresses CSS quotes not supported in IE 6/7.
+ */
+q {
+  quotes: none;
+}
+/*
+ * Addresses `quotes` property not supported in Safari 4.
+ */
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+small {
+  font-size: 75%;
+}
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+/* ==========================================================================
+   Lists
+   ========================================================================== */
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+dl,
+menu,
+ol,
+ul {
+  margin: 1em 0;
+}
+dd {
+  margin: 0 0 0 40px;
+}
+/*
+ * Addresses paddings set differently in IE 6/7.
+ */
+menu,
+ol,
+ul {
+  padding: 0 0 0 40px;
+}
+/*
+ * Corrects list images handled incorrectly in IE 7.
+ */
+nav ul,
+nav ol {
+  list-style: none;
+  list-style-image: none;
+}
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+/*
+ * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improves image quality when scaled in IE 7.
+ */
+img {
+  border: 0;
+  /* 1 */
+  -ms-interpolation-mode: bicubic;
+  /* 2 */
+}
+/*
+ * Corrects overflow displayed oddly in IE 9.
+ */
+svg:not(:root) {
+  overflow: hidden;
+}
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+/*
+ * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+figure {
+  margin: 0;
+}
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+/*
+ * Corrects margin displayed oddly in IE 6/7.
+ */
+form {
+  margin: 0;
+}
+/*
+ * Define consistent border, margin, and padding.
+ */
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+/*
+ * 1. Corrects color not being inherited in IE 6/7/8/9.
+ * 2. Corrects text not wrapping in Firefox 3.
+ * 3. Corrects alignment displayed oddly in IE 6/7.
+ */
+legend {
+  border: 0;
+  /* 1 */
+  padding: 0;
+  white-space: normal;
+  /* 2 */
+  *margin-left: -7px;
+  /* 3 */
+}
+/*
+ * 1. Corrects font size not being inherited in all browsers.
+ * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *	and Chrome.
+ * 3. Improves appearance and consistency in all browsers.
+ */
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  vertical-align: baseline;
+  /* 3 */
+  *vertical-align: middle;
+  /* 3 */
+}
+/*
+ * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+button,
+input {
+  line-height: normal;
+}
+/*
+ * Re-set default cursor for disabled elements.
+ */
+button[disabled],
+input[disabled] {
+  cursor: default;
+}
+input[type="time"],
+input[type="date"] {
+  color: #000000;
+}
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *	(include `-moz` to future-proof).
+ */
+input[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  /* 2 */
+  box-sizing: content-box;
+}
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+/*
+ * Removes inner padding and border in Firefox 3+.
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+/*
+ * 1. Removes default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+textarea {
+  overflow: auto;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+}
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+/*
+ * Remove most spacing between table cells.
+ */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/*
+ * Common definition for theme
+ */
+/***************************************************************
+   default font size (base font from WRT)
+   => small: 13px
+   => normal: 17px
+   => large: 20px
+
+This is only applied to gear2.
+so, we set @font_size_default as 17px on gear2 and it was changed to 16px since gear-S.
+This value only used for @rem_base, not for html font-size
+html font-size is set by WRT base font-size
+***************************************************************/
+/******************************
+  z-index order collection
+ ******************************/
+/***************************************************************************
+                   Common Style
+***************************************************************************/
+.screen-hidden {
+  visibility: hidden;
+  position: absolute;
+  top: -10000em;
+  left: -10000em;
+}
+/***************************************************************************
+                   Default Style.
+***************************************************************************/
+button,
+input {
+  outline: none;
+  cursor: pointer;
+}
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none !important;
+  color: T0811;
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+img {
+  margin: 0;
+  padding: 0;
+}
+/******************************
+  Global LESS mixin collection
+ ******************************/
+/***************************************************************************
+                   Common Style
+***************************************************************************/
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+  height: 100%;
+  font-size: 2.125rem;
+  font-family: Tizen, Samsung Sans, Helvetica;
+  background: B011;
+  color: T0811;
+}
+.ui-page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: B011;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /* overrides webkit link color */
+}
+.ui-page.ui-page-active {
+  display: block;
+}
+.ui-page.ui-page-build {
+  display: block;
+  visibility: hidden;
+}
+.scrolling-mode-touch {
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-content {
+  width: auto;
+  height: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-header {
+  position: relative;
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  background-color: B0511;
+}
+.ui-header .ui-title {
+  color: T012;
+  font-size: 32px;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  margin: 0px;
+  padding-left: 16px;
+  padding-right: 16px;
+  -webkit-mask-image: -webkit-linear-gradient(left, #000000 80%, rgba(0, 0, 0, 0) 95%);
+}
+.ui-header .ui-title.ui-icon {
+  padding-left: 60px;
+  background-position: 16px 14px;
+  background-size: 34px 34px;
+  background-repeat: no-repeat;
+}
+.ui-header.ui-has-more .ui-title {
+  padding-right: 78px;
+  -webkit-mask-image: -webkit-linear-gradient(left, #000000 70%, rgba(0, 0, 0, 0) 75%);
+}
+.ui-header button.ui-more,
+.ui-header input.ui-more {
+  border: 0 none;
+  padding: 0;
+}
+.ui-header .ui-more-disable {
+  cursor: default;
+  background-color: transparent;
+}
+.ui-header .ui-more {
+  display: block;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 68px;
+  height: 100%;
+  overflow: hidden;
+  text-indent: -1000em;
+  background-position: center center;
+  background-color: transparent;
+  cursor: pointer;
+}
+.ui-header .ui-more:active {
+  background-color: W011P !important;
+}
+.ui-header .ui-more.ui-icon-detail {
+  background-color: B052L1;
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-detail[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: B052L1D;
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-overflow {
+  background-color: B052L1;
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position-x: 0.9375rem;
+  -webkit-mask-position-y: 50%;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-overflow[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: B052L1D;
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-selectall {
+  background-color: B052L1;
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-selectall[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: B052L1D;
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-footer {
+  width: 100%;
+  height: 85px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+/***************************************************************************
+                   Page Scroll
+***************************************************************************/
+.ui-page.ui-scroll-on {
+  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-page.ui-scroll-on .ui-content {
+  height: auto !important;
+}
+.ui-page.ui-scroll-on .ui-footer {
+  position: relative;
+}
+.ui-header.ui-fixed {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+}
+.ui-footer.ui-fixed {
+  position: fixed !important;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  -webkit-transform: translate3d(0, 0, 0);
+}
+/***************************************************************************
+                   Grid layout
+***************************************************************************/
+.ui-grid-col > * {
+  float: left;
+}
+.ui-page .ui-grid-col-1 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-1 > * {
+  width: 100%;
+}
+.ui-page .ui-grid-col-2 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-2 > * {
+  width: 50%;
+}
+.ui-page .ui-grid-col-3 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-3 > * {
+  width: 33.333333333333336%;
+}
+.ui-grid-row > * {
+  display: block;
+}
+/*
+ * Progressbar
+ */
+@-webkit-keyframes indeterminate {
+  0% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+  25% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+  50% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+  75% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+  100% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+}
+progress {
+  position: relative;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: 0.875rem;
+  margin-bottom: 0.875rem;
+  color: T0811;
+  width: 100%;
+  height: 0.375rem;
+  -webkit-appearance: none;
+  border: none;
+}
+progress::-webkit-progress-bar {
+  position: relative;
+  background-color: B065L3;
+  border-radius: 0.125rem;
+  overflow: hidden;
+}
+progress::-webkit-progress-value {
+  background-color: B065L2;
+  height: 0.375rem;
+  border-radius: 0.125rem;
+  overflow: hidden;
+}
+progress.ui-progress-indeterminate::-webkit-progress-bar {
+  background-color: B065L2;
+}
+progress.ui-progress-indeterminate::-webkit-progress-value {
+  background-size: 100% 100%;
+  -webkit-animation: indeterminate 150ms infinite;
+}
+.ui-progress-proportion {
+  display: inline-block;
+  float: left;
+  font-size: 20px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: -0.625rem;
+}
+.ui-progress-ratio {
+  display: inline-block;
+  float: right;
+  font-size: 20px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: -0.625rem;
+}
+.ui-circle-progress {
+  display: none;
+}
+.ui-progressbar.ui-progressbar-full {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.ui-progressbar.ui-progressbar-large {
+  width: 6.25rem;
+  height: 6.25rem;
+}
+.ui-progressbar.ui-progressbar-medium {
+  width: 5.25rem;
+  height: 5.25rem;
+}
+.ui-progressbar.ui-progressbar-small {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+.ui-progressbar {
+  position: relative;
+  display: inline-block;
+  pointer-events: none;
+}
+.ui-progressbar .ui-progressbar-value.ui-progressbar-half {
+  clip: rect(auto, auto, auto, auto);
+}
+.ui-progressbar .ui-progressbar-value.ui-progressbar-half .ui-progressbar-value-right {
+  -webkit-transform: rotate(180deg);
+}
+.ui-progressbar .ui-progressbar-value {
+  clip: rect(0, 1em, 1em, 0.5em);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left {
+  border: 0.5rem solid B065L2;
+  border-radius: 50%;
+  clip: rect(0, 0.5em, 1em, 0);
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right {
+  border: 0.5rem solid B065L2;
+  border-radius: 50%;
+  clip: rect(0, 0.5em, 1em, 0);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-bg {
+  border: 0.5rem solid B065L3;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+}
+/*
+ * toggle switch
+ */
+.ui-switch {
+  width: 100%;
+  color: T0811;
+}
+.ui-switch-inneroffset,
+.ui-switch-handler {
+  display: none;
+}
+.ui-switch-text {
+  margin-top: 30px;
+  margin-bottom: 40px;
+  padding: 0 30px;
+  font-size: 34px;
+  text-align: center;
+}
+.ui-switch-sub-text {
+  margin-top: 48px;
+  margin-bottom: 55px;
+  font-size: 26px;
+  text-align: center;
+  color: T161;
+}
+.ui-toggleswitch {
+  position: relative;
+  display: inline-block;
+  width: 92px;
+  height: 49px;
+}
+.ui-toggleswitch .ui-switch-input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-appearance: none;
+  display: block;
+}
+.ui-toggleswitch .ui-switch-input::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 0;
+  background-color: W014L2P;
+  z-index: 0;
+}
+.ui-toggleswitch .ui-switch-input:active::before {
+  background-color: W014L2P;
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button {
+  background-color: W014L4P;
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button::before {
+  background-color: W014L6P;
+}
+.ui-toggleswitch .ui-switch-activation,
+.ui-toggleswitch .ui-switch-button {
+  width: 59px;
+  height: 49px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 -49px;
+  background-color: W014L4;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+.ui-toggleswitch .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-button::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 -98px;
+  background-color: W014L6;
+  top: 0;
+  left: 0;
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button {
+  width: 59px;
+  height: 49px;
+  -webkit-mask-position: 0 -49px;
+  background-color: W014L3;
+  -webkit-transform: translate3d(33px, 0, 0);
+  -moz-transform: translate3d(33px, 0, 0);
+  -ms-transform: translate3d(33px, 0, 0);
+  -o-transform: translate3d(33px, 0, 0);
+  transform: translate3d(33px, 0, 0);
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -147px;
+  background-color: W014L5;
+}
+.ui-toggleswitch .ui-switch-input:checked::before {
+  background-color: W014L1;
+}
+.ui-toggleswitch .ui-switch-input:checked:active::before {
+  background-color: W014L1P;
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button {
+  background-color: W014L3P;
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button::before {
+  background-color: W014L5P;
+}
+.ui-toggleswitch.ui-toggleswitch-large {
+  width: 207px;
+  height: 110px;
+  display: block;
+  margin: 0 auto;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button {
+  width: 132px;
+  height: 110px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 207px;
+  -webkit-mask-position: 0 -110px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-position: 0 -220px;
+  -webkit-mask-size: 207px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 207px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button {
+  width: 132px;
+  height: 110px;
+  -webkit-mask-position: 0 -110px;
+  -webkit-transform: translate3d(75px, 0, 0);
+  -moz-transform: translate3d(75px, 0, 0);
+  -ms-transform: translate3d(75px, 0, 0);
+  -o-transform: translate3d(75px, 0, 0);
+  transform: translate3d(75px, 0, 0);
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -330px;
+}
+/***********************
+Processing
+***********************/
+@-webkit-keyframes rotating {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+.ui-processing {
+  background-color: B066L1;
+  -webkit-mask-image: url("images/Processing/tw_progress_small_loading_bg.png");
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-animation: rotating 1s linear infinite;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin: 0 auto;
+  margin-top: 2.125rem;
+  margin-bottom: 0.875rem;
+}
+.ui-processing-text {
+  margin: 0 auto;
+  text-align: center;
+  width: 10.5rem;
+  font-size: 1.5rem;
+}
+.ui-processing.ui-processing-full-size {
+  background-color: transparent;
+  -webkit-mask-image: none;
+  -webkit-animation: none;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  margin: 0;
+}
+.ui-processing.ui-processing-full-size::after {
+  content: "";
+  background-color: B065L2;
+  -webkit-mask-image: url("images/Processing/tw_progress_full_loading_bg.png");
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-animation: rotating 1s linear infinite;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-btn {
+  display: block;
+  padding-top: 28.5px;
+  padding-right: 10px;
+  padding-bottom: 28.5px;
+  padding-left: 10px;
+  margin: 0px;
+  font-size: 32px;
+  line-height: 28px;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  border: 0 none;
+  color: T041;
+  background-color: W011;
+}
+a.ui-btn:active:hover,
+.ui-btn:enabled:active:hover {
+  background-color: W011P;
+}
+.ui-btn:enabled:focus {
+  background-color: W011;
+}
+a.ui-btn.ui-state-disabled,
+.ui-btn:disabled {
+  color: T041D;
+  background-color: W011D;
+  cursor: default;
+}
+.ui-btn.ui-multiline {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.ui-btn.ui-inline {
+  display: inline-block;
+}
+.ui-btn.ui-btn-icon {
+  background-position: center center;
+  height: 76px;
+  text-indent: -1000em;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  background-size: 60px 60px;
+}
+.ui-default {
+  color: T041;
+  background-color: W011;
+}
+a.ui-default:active:hover,
+.ui-default:enabled:active:hover {
+  background-color: W011P;
+}
+.ui-default:enabled:focus {
+  background-color: W011;
+}
+a.ui-default.ui-state-disabled,
+.ui-default:disabled {
+  color: T041D;
+  background-color: W011D;
+  cursor: default;
+}
+.ui-color-red {
+  color: T041;
+  background-color: W012;
+}
+a.ui-color-red:active:hover,
+.ui-color-red:enabled:active:hover {
+  background-color: W012P;
+}
+.ui-color-red:enabled:focus {
+  background-color: W012;
+}
+a.ui-color-red.ui-state-disabled,
+.ui-color-red:disabled {
+  color: T041D;
+  background-color: W012D;
+  cursor: default;
+}
+.ui-color-orange {
+  color: T041;
+  background-color: W013;
+}
+a.ui-color-orange:active:hover,
+.ui-color-orange:enabled:active:hover {
+  background-color: W013P;
+}
+.ui-color-orange:enabled:focus {
+  background-color: W013;
+}
+a.ui-color-orange.ui-state-disabled,
+.ui-color-orange:disabled {
+  color: T041D;
+  background-color: W013D;
+  cursor: default;
+}
+.ui-color-green {
+  color: T041;
+  background-color: W014;
+}
+a.ui-color-green:active:hover,
+.ui-color-green:enabled:active:hover {
+  background-color: W014P;
+}
+.ui-color-green:enabled:focus {
+  background-color: W014;
+}
+a.ui-color-green.ui-state-disabled,
+.ui-color-green:disabled {
+  color: T041D;
+  background-color: W014D;
+  cursor: default;
+}
+.ui-btn:focus,
+.ui-btn:active {
+  outline: none;
+}
+a.ui-btn {
+  text-decoration: none;
+  box-sizing: border-box;
+}
+button.ui-btn,
+input.ui-btn {
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 100%;
+}
+button.ui-btn.ui-inline,
+input.ui-btn.ui-inline {
+  display: inline-block;
+  width: auto;
+}
+.ui-grid-col-1 > .ui-btn {
+  border-left: solid 1px B011;
+}
+.ui-grid-col-1 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-col-2 > .ui-btn {
+  border-left: solid 1px B011;
+}
+.ui-grid-col-2 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-col-3 > .ui-btn {
+  border-left: solid 1px B011;
+}
+.ui-grid-col-3 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-row > .ui-btn {
+  margin-top: 1px;
+}
+.ui-grid-row > .ui-btn:first-child {
+  margin-top: 0px;
+}
+/***********************
+Normal Popup
+***********************/
+.ui-popup {
+  position: fixed;
+  left: 0px;
+  width: 100%;
+  margin: 0;
+  background-color: B061L1E;
+  border: 3px solid B061L7;
+  display: none;
+  z-index: 1100;
+}
+.ui-popup:not(.ui-ctxpopup) {
+  bottom: 0;
+}
+.ui-popup .ui-popup-header {
+  width: 100%;
+  min-height: 68px;
+  font-size: 30px;
+  text-align: left;
+  background-color: B061L2;
+  color: T091;
+  padding-top: 14px;
+  padding-right: 13px;
+  padding-bottom: 14px;
+  padding-left: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ui-popup .ui-popup-content {
+  width: 100%;
+  min-height: 14rem;
+  font-size: 2.125rem;
+  text-align: left;
+  color: T0811;
+  background-color: B061L1E;
+  padding: 10px 16px 9px 16px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-popup .ui-popup-content .ui-listview,
+.ui-popup .ui-popup-content .ui-inline-listview {
+  margin: -0.5625rem -1rem -0.5625rem -1rem;
+}
+.ui-popup .ui-popup-content .ui-listview li,
+.ui-popup .ui-popup-content .ui-inline-listview li {
+  font-size: 2.125rem;
+}
+.ui-popup .ui-popup-footer {
+  width: 100%;
+  height: 83px;
+}
+.ui-popup .ui-popup-footer .ui-btn {
+  padding-top: 27px;
+  padding-bottom: 28px;
+  font-size: 30px;
+}
+.ui-popup.ui-popup-active {
+  display: block;
+}
+.ui-popup.in {
+  display: block;
+}
+.ui-popup.ui-build {
+  display: block;
+  visibility: hidden;
+}
+/***********************
+Popup Container Scroll
+***********************/
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) {
+  max-height: 100%;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-wrapper {
+  width: 100%;
+  max-height: 100%;
+  overflow: auto !important;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content {
+  height: auto !important;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header.ui-fixed {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2100;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-footer.ui-fixed {
+  position: absolute !important;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2100;
+  -webkit-transform: translate3d(0, 0, 0);
+}
+/***********************
+Option Popup
+***********************/
+.ui-popup.ui-ctxpopup {
+  background-color: transparent;
+  width: 100%;
+  border: 0 none;
+  border-radius: 0;
+  overflow: visible;
+}
+div.ui-popup.ui-ctxpopup.ui-popup-content-size {
+  width: auto;
+  padding: 0 0 0 0;
+}
+div.ui-popup.ui-ctxpopup.ui-popup-content-size .ui-popup-content {
+  width: auto;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content {
+  background-color: B092L1;
+  border: 1px solid B092L2;
+  color: #333;
+  min-height: initial;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li {
+  color: T111;
+  border-bottom: 1px solid B094;
+  min-height: 90px;
+  padding: 21px 8px 20px 16px;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a {
+  color: T111;
+  margin: -21px -16px;
+  padding: 21px 16px;
+  min-height: 48px;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active {
+  color: T111P;
+  background-color: B093P;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li:last-child {
+  border: none;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon {
+  position: relative;
+  padding-left: 4.25rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon a {
+  margin-left: -4.25rem;
+  padding-left: 4.25rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0.375rem;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-top: -1.75rem;
+  background-color: B095;
+  -webkit-mask-size: 3.5rem 3.5rem;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  mask-size: 3.5rem 3.5rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview a.ui-list-icon:active::before {
+  background-color: B095P;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview {
+  height: 4.3125rem;
+  overflow: hidden;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li {
+  float: left;
+  height: 4.1875rem;
+  line-height: 4.1875rem;
+  border-right: 1px solid B097;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li:last-child {
+  border: none;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0rem 0.5rem;
+  color: T111;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active {
+  color: T111P;
+  background-color: B093P;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext {
+  width: 3.6875rem;
+  height: 4.1875rem;
+  text-indent: -1000em;
+  overflow: hidden;
+  position: relative;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2.6875rem;
+  height: 2.6875rem;
+  margin-top: -1.34375rem;
+  margin-left: -1.34375rem;
+  background-color: B096;
+  -webkit-mask-size: 2.6875rem 2.6875rem;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: 2.6875rem 2.6875rem;
+  mask-repeat: no-repeat;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview a.ui-list-icon-notext:active::before {
+  background-color: B096P;
+}
+.ui-popup.ui-ctxpopup .ui-arrow {
+  width: 36px;
+  height: 15px;
+  overflow: hidden;
+  position: absolute;
+  display: none;
+  animation-duration: 0;
+  -webkit-animation-duration: 0;
+}
+.ui-popup.ui-ctxpopup .ui-arrow span {
+  width: 20px;
+  height: 20px;
+  background-color: B092L1;
+  border: 1px solid B092L2;
+  position: absolute;
+  top: 6px;
+  left: 8px;
+  -webkit-transform: rotate(55deg) skew(24deg);
+  transform: rotate(55deg) skew(24deg);
+  animation-duration: 0;
+  -webkit-animation-duration: 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b {
+  padding: 20px 20px 0 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t {
+  padding: 0 20px 20px 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r {
+  padding: 20px 0 20px 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l {
+  padding: 20px 20px 20px 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow {
+  display: block;
+  bottom: -0.875rem;
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow {
+  display: block;
+  top: -14px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow {
+  display: block;
+  right: -25px;
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow {
+  display: block;
+  left: -25px;
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+/****************************************
+Popup Toast
+****************************************/
+.ui-popup.ui-popup-toast {
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  font-size: 1.5rem;
+  border: 3px solid B061L7;
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+  position: absolute;
+  bottom: 0;
+  top: auto;
+  height: auto;
+}
+.ui-popup.ui-popup-toast .ui-popup-content {
+  min-height: initial;
+  padding: 0.6875rem 2.625rem 0.75rem 2.625rem;
+  background-color: B061L1E;
+}
+/****************************************
+Popup Overlay
+****************************************/
+.ui-popup-overlay {
+  position: fixed;
+  display: none;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: W1712;
+}
+.ui-popup-overlay.in {
+  display: block;
+}
+/****************************************
+Popup Transition
+****************************************/
+.ui-popup.slideup.in {
+  -webkit-animation-name: popupslideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popupslideinfrombottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.slideup.out {
+  -webkit-animation-name: popupslideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popupslideouttobottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes popupslideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes popupslideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@-webkit-keyframes popupslideouttobottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@keyframes popupslideouttobottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+.ui-popup.pop.in {
+  -webkit-animation-name: popuppopin;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popuppopin;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.pop.out {
+  -webkit-animation-name: popuppopout;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popuppopout;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes popuppopin {
+  from {
+    transform: scale3d(0, 0, 1);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+@-webkit-keyframes popuppopout {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(0, 0, 1);
+  }
+}
+/****************************************
+Popup Overlay Transition
+****************************************/
+.ui-popup-overlay.slideup.in,
+.ui-popup-overlay.pop.in {
+  -webkit-animation-name: fadein;
+  -webkit-animation-duration: 250ms;
+  animation-name: fadein;
+  animation-duration: 250ms;
+}
+.ui-popup-overlay.slideup.out,
+.ui-popup-overlay.pop.out {
+  -webkit-animation-name: fadeout;
+  -webkit-animation-duration: 250ms;
+  animation-name: fadeout;
+  animation-duration: 250ms;
+}
+/****************************************
+Option Popup Transition
+****************************************/
+.ui-popup.ui-popup-arrow-t.slideup.in,
+.ui-popup.ui-popup-arrow-l.slideup.in,
+.ui-popup.ui-popup-arrow-r.slideup.in {
+  -webkit-animation-name: ctxpopupslideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideinfrombottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-t.slideup.out,
+.ui-popup.ui-popup-arrow-l.slideup.out,
+.ui-popup.ui-popup-arrow-r.slideup.out {
+  -webkit-animation-name: ctxpopupslideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideouttobottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-b.slideup.in {
+  -webkit-animation-name: ctxpopupslideinfromtop;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideinfromtop;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-b.slideup.out {
+  -webkit-animation-name: ctxpopupslideouttotop;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideouttotop;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes ctxpopupslideinfrombottom {
+  from {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@keyframes ctxpopupslideinfrombottom {
+  from {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideouttobottom {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+}
+@keyframes ctxpopupslideouttobottom {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideinfromtop {
+  from {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@keyframes ctxpopupslideinfromtop {
+  from {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideouttotop {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+}
+@keyframes ctxpopupslideouttotop {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+}
+/************************
+Listview
+*************************/
+.ui-listview li {
+  font-size: 2.5rem;
+  line-height: 3rem;
+  width: 100%;
+  min-height: 6.25rem;
+  padding: 1.3125rem 0.5rem 1.25rem 1rem;
+  border-bottom: 1px solid B0222;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  color: T0211;
+}
+.ui-listview li > * {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-user-select: none;
+  color: T0211;
+}
+.ui-listview li > a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: -1.3125rem -1rem;
+  padding: 1.625rem 1rem;
+  -o-box-sizing: content-box;
+  -ms-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.ui-listview li.ui-li-active {
+  background-color: B041P;
+  color: T0211P;
+}
+.ui-listview .li-divider {
+  height: 1.875rem;
+  min-height: 1.875rem;
+  line-height: 1.875rem;
+  padding: 0 0.5rem 0 1rem;
+  background-color: B012;
+  color: T0231;
+  font-size: 1.5rem;
+}
+.ui-listview .ui-li-sub-text {
+  color: T022;
+  font-size: 1.75rem;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-text {
+  width: calc(100% -  4.8125rem);
+  height: 100%;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-text::after {
+  content: "";
+  position: absolute;
+  height: 3.5rem;
+  width: 0.125rem;
+  background-color: T0811;
+  right: 4.25rem;
+  top: 20%;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-divider {
+  display: none;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete,
+.ui-listview .ui-li-has-action-icon .ui-action-setting,
+.ui-listview .ui-li-has-action-icon .ui-action-add {
+  position: absolute;
+  height: 100%;
+  width: 4.5rem;
+  right: 0;
+  top: 0;
+  -webkit-mask-size: 3.5rem 3.5rem;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center center;
+  padding: 0;
+  margin: 0;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete {
+  -webkit-mask-image: url(images/listview/tw_list_delete_holo_dark.png);
+  background-color: F022L1i;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-setting {
+  -webkit-mask-image: url(images/listview/tw_list_setting_holo_dark.png);
+  background-color: F022L1i;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-add {
+  -webkit-mask-image: url(images/listview/tw_list_add_holo_dark.png);
+  background-color: F022L1i;
+}
+.ui-listview .ui-li-has-action-icon.ui-li-active {
+  background-color: transparent;
+}
+.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active {
+  background-color: B041P;
+  color: T0211P;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete:active,
+.ui-listview .ui-li-has-action-icon .ui-action-setting:active,
+.ui-listview .ui-li-has-action-icon .ui-action-add:active {
+  background-color: B041P;
+  color: T0211P;
+}
+.ui-datetime-widget {
+  position: relative;
+  height: 100%;
+}
+.ui-datetime {
+  text-align: center;
+  padding-top: 56px;
+}
+.ui-time-picker .ui-datetime {
+  padding-top: 53px;
+}
+.ui-datetime:only-child {
+  padding-top: 92px;
+}
+.ui-time-picker .ui-datetime:only-child {
+  padding-top: 89px;
+}
+.ui-datetime input[type='date'],
+.ui-datetime input[type='datetime'],
+.ui-datetime input[type='time'] {
+  display: none;
+}
+.ui-datefield {
+  height: 52px;
+  display: inline-block;
+  vertical-align: top;
+}
+.ui-datefield > .ui-btn {
+  float: left;
+  height: 52px;
+  padding: 0;
+  line-height: 52px;
+  font-size: 42px;
+  font-weight: 600;
+  border-radius: 2px;
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.ui-datefield .ui-datefield-separator {
+  display: block;
+  height: 100%;
+  float: left;
+  width: 18px;
+  background: transparent url('images/Datetimepicker/tw_timepicker_num_dot.png');
+}
+.ui-datefield > .ui-btn:enabled:focus {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.ui-datefield > .ui-btn:disabled {
+  color: #404040;
+}
+.ui-datafield > .ui-btn.ui-selected,
+.ui-datefield > .ui-btn:enabled:active,
+.ui-datefield > .ui-btn.ui-state-active:enabled,
+.ui-datefield > .ui-btn.ui-selected:enabled {
+  background-color: #ff9000;
+  color: #000;
+}
+/* -- for datepicker -- */
+.ui-date-picker .ui-datefield > .ui-btn:first-child {
+  margin-right: 2px;
+}
+.ui-date-picker .ui-datefield > .ui-btn:last-child {
+  margin-left: 2px;
+}
+.ui-date-picker .ui-datefield-year {
+  width: 114px;
+}
+.ui-date-picker .ui-datefield-month {
+  width: 102px;
+}
+.ui-date-picker .ui-datefield-day {
+  width: 68px;
+}
+/* -- end (for datepicker) -- */
+/* -- for timepicker -- */
+.ui-time-picker .ui-datefield-hour {
+  width: 74px;
+}
+.ui-time-picker .ui-datefield-min {
+  width: 74px;
+}
+.ui-time-picker .ui-datefield-period {
+  width: 84px;
+  margin-left: 10px;
+}
+.ui-time-picker .ui-datefield {
+  height: 58px;
+}
+.ui-time-picker .ui-datefield > .ui-btn {
+  height: 58px;
+  line-height: 58px;
+  font-size: 50px;
+}
+.ui-time-picker .ui-datefield > .ui-btn.ui-datefield-period {
+  font-size: 48px;
+}
+/* -- (end) for timepicker -- */
+.ui-datetime-wheel {
+  height: 68px;
+  margin: 0 10px;
+  margin-top: 30px;
+}
+.ui-time-picker .ui-datetime-wheel {
+  margin-top: 27px;
+}
+.ui-datetime-wheel .ui-btn {
+  width: 68px;
+  height: 68px;
+  float: left;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus {
+  float: right;
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-wheel {
+  display: block;
+  margin-left: 68px;
+  margin-right: 68px;
+  height: 68px;
+  padding: 10px 0;
+  background: url('images/Datetimepicker/tw_timepicker_wheel_01.png') center center no-repeat;
+}
+.ui-datetime-btns {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 76px;
+  border-top: 2px solid #262626;
+}
+/* Button separator */
+.ui-datetime-btns::before {
+  content: "";
+  height: 34px;
+  width: 1px;
+  background-color: #262626;
+  position: absolute;
+  left: 160px;
+  top: 20px;
+}
+.ui-datetime-btns .ui-btn {
+  height: 100%;
+  position: relative;
+  background-color: transparent;
+}
+.ui-datetime-btns .ui-btn:enabled:active,
+.ui-datetime-btns .ui-btn:enabled:focus,
+.ui-datetime-btns .ui-btn:enabled:active:focus {
+  background-color: transparent;
+}
+.ui-datetime-btns .ui-btn-left {
+  width: 160px;
+  float: left;
+  background: url('images/Datetimepicker/tw_timepicker_left_softbtn.png') center center no-repeat;
+}
+.ui-datetime-btns .ui-btn-right {
+  width: 159px;
+  float: right;
+  background: url('images/Datetimepicker/tw_timepicker_right_softbtn.png') center center no-repeat;
+}
+.ui-datetime-btns .ui-btn:disabled,
+.ui-datetime-btns .ui-btn.ui-state-disabled {
+  opacity: 0.2;
+}
+/* ---------------- */
+.ui-datetime-periods {
+  height: 102px;
+  margin-top: 7px;
+  display: inline-block;
+}
+.ui-datetime-periods .ui-btn,
+.ui-datetime-periods .ui-datetime-periods-separator {
+  height: 100%;
+  float: left;
+  padding: 0;
+  background: transparent;
+}
+.ui-datetime-periods .ui-btn {
+  width: 102px;
+  font-size: 34px;
+  line-height: 102px;
+}
+.ui-datetime-periods .ui-btn:enabled:focus {
+  background: transparent;
+}
+.ui-datetime-periods .ui-btn:enabled:active,
+.ui-datetime-periods .ui-btn:enabled:active:focus,
+.ui-datetime-periods .ui-btn.ui-selected:enabled:active,
+.ui-datetime-periods .ui-btn.ui-state-active:enabled:active {
+  color: inherit;
+  text-decoration: none;
+  background: url('images/Datetimepicker/tw_timepicker_time_bg.png') center center no-repeat;
+}
+.ui-datetime-periods .ui-btn.ui-selected:enabled,
+.ui-datetime-periods .ui-btn.ui-state-active:enabled {
+  color: #ff9000;
+  text-decoration: underline;
+}
+.ui-datetime-periods .ui-datetime-periods-separator {
+  width: 24px;
+  background: url('images/Datetimepicker/tw_timepicker_num_dot_01.png') center center no-repeat;
+}
+.ui-datetime-wheel.ui-hidden,
+.ui-datetime-periods.ui-hidden {
+  display: none;
+}
+/* Transitions originally inspired by those from jQtouch, nice work, folks */
+.ui-viewport-transitioning,
+.ui-viewport-transitioning .ui-page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.ui-pre-in {
+  z-index: 100;
+  visibility: visible;
+  display: block;
+  top: 0px;
+  left: 0px;
+}
+.in {
+  -webkit-animation-timing-function: ease-out;
+  -webkit-animation-duration: 350ms;
+  -moz-animation-timing-function: ease-out;
+  -moz-animation-duration: 350ms;
+  animation-timing-function: ease-out;
+  animation-duration: 350ms;
+}
+.out {
+  -webkit-animation-timing-function: ease-in;
+  -webkit-animation-duration: 225ms;
+  -moz-animation-timing-function: ease-in;
+  -moz-animation-duration: 225ms;
+  animation-timing-function: ease-in;
+  animation-duration: 225ms;
+}
+@-webkit-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-moz-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@-moz-keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.fade.out {
+  opacity: 0;
+  -webkit-animation-duration: 125ms;
+  -webkit-animation-name: fadeout;
+  -moz-animation-duration: 125ms;
+  -moz-animation-name: fadeout;
+  animation-duration: 125ms;
+  animation-name: fadeout;
+}
+.fade.in {
+  opacity: 1;
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: fadein;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: fadein;
+  animation-duration: 225ms;
+  animation-name: fadein;
+}
+/* slide up */
+.slideup.out {
+  -webkit-animation-name: fadeout;
+  -webkit-animation-duration: 250ms;
+  -moz-animation-name: fadeout;
+  -moz-animation-duration: 250ms;
+  animation-name: fadeout;
+  animation-duration: 250ms;
+}
+.slideup.in {
+  -webkit-transform: translateY(0);
+  -webkit-animation-name: slideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -moz-transform: translateY(0);
+  -moz-animation-name: slideinfrombottom;
+  -moz-animation-duration: 250ms;
+  transform: translateY(0);
+  animation-name: slideinfrombottom;
+  animation-duration: 250ms;
+}
+.slideup.in.reverse {
+  -webkit-animation-name: fadein;
+  -webkit-animation-duration: 250ms;
+  -moz-animation-name: fadein;
+  -moz-animation-duration: 250ms;
+  animation-name: fadein;
+  animation-duration: 250ms;
+}
+.slideup.out.reverse {
+  z-index: 101;
+  -webkit-transform: translateY(100%);
+  -webkit-animation-name: slideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -moz-transform: translateY(100%);
+  -moz-animation-name: slideouttobottom;
+  -moz-animation-duration: 250ms;
+  transform: translateY(100%);
+  animation-name: slideouttobottom;
+  animation-duration: 250ms;
+}
+@-webkit-keyframes slideinfrombottom {
+  from {
+    -webkit-transform: translateY(100%);
+  }
+  to {
+    -webkit-transform: translateY(0);
+  }
+}
+@-moz-keyframes slideinfrombottom {
+  from {
+    -moz-transform: translateY(100%);
+  }
+  to {
+    -moz-transform: translateY(0);
+  }
+}
+@keyframes slideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes slideouttobottom {
+  from {
+    -webkit-transform: translateY(0);
+  }
+  to {
+    -webkit-transform: translateY(100%);
+  }
+}
+@-moz-keyframes slideouttobottom {
+  from {
+    -moz-transform: translateY(0);
+  }
+  to {
+    -moz-transform: translateY(100%);
+  }
+}
+@keyframes slideouttobottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@-webkit-keyframes popnone {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes popin {
+  from {
+    transform: scale3d(0, 0, 1);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+@-webkit-keyframes popout {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(0, 0, 1);
+  }
+}
+.pop.out.reverse {
+  z-index: 200;
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popout;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popout;
+  animation-duration: 225ms;
+  animation-name: popout;
+}
+.pop.in.reverse {
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popnone;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popnone;
+  animation-duration: 225ms;
+  animation-name: popnone;
+}
+.pop.in {
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popin;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popin;
+  animation-duration: 225ms;
+  animation-name: popin;
+}
+.ui-indexscrollbar {
+  display: block;
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 2.8125rem;
+  height: 100%;
+  padding-left: 0.125rem;
+  background-color: B0722;
+  z-index: 10;
+  overflow: visible;
+  -webkit-user-select: none;
+  cursor: pointer;
+}
+.ui-indexscrollbar ul {
+  position: absolute;
+  width: 100%;
+  top: 0;
+}
+.ui-indexscrollbar ul li {
+  color: T0311;
+  display: block;
+  width: 100%;
+  text-align: center;
+  font-size: 1.5rem;
+  height: 2.25rem;
+}
+.ui-indexscrollbar ul li.ui-state-selected {
+  background-color: B0724;
+  color: T0311P;
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary {
+  position: relative;
+  height: auto;
+  top: 0;
+  right: -2.5rem;
+  width: 100%;
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li {
+  background-color: B0723;
+  color: T0311;
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li.ui-state-selected {
+  background-color: B0723;
+  color: T0313;
+}
+.ui-indexscrollbar + .ui-listview li {
+  padding-right: 2.5rem;
+}
+.ui-indexscrollbar-indicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  display: none;
+}
+.ui-indexscrollbar-indicator > span {
+  width: 8.75rem;
+  height: 5.4375rem;
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 50%;
+  margin-left: -5.625rem;
+  margin-top: -2.6875rem;
+  line-height: 5.4375rem;
+  font-size: 4.375rem;
+  text-align: center;
+  background-color: B0731;
+  color: T0312;
+}
+.ui-indexscrollbar-indicator > span > span.ui-selected {
+  color: T0312P;
+}
+.ui-circularindexscrollbar {
+  position: fixed;
+  top: 0;
+  left: -100%;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+}
+.ui-circularindexscrollbar.ui-circularindexscrollbar-show .ui-circularindexscrollbar-indexbar {
+  pointer-events: auto;
+  -webkit-transform: scale(1, 1);
+  -webkit-transition-duration: 500ms;
+  -webkit-transition-timing-function: linear;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: -webkit-radial-gradient(center, ellipse cover, transparent 59%, B0722 59%);
+  overflow: hidden;
+  -webkit-transform: scale(1.2, 1.2);
+  -webkit-transition-duration: 500ms;
+  -webkit-transition-timing-function: linear;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  box-sizing: border-box;
+  width: 50%;
+  height: 50%;
+  margin-top: -50%;
+  margin-left: -50%;
+  -webkit-transform-origin: 100% 100% 0;
+  overflow: hidden;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index span {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin-left: 50%;
+  padding-top: 0.3125rem;
+  text-align: center;
+  color: T0311;
+  -webkit-transform-origin: 50% 100% 0;
+  font-size: 1.25rem;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span {
+  color: T0311P;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator {
+  position: absolute;
+  top: 50%;
+  width: 8.9375rem;
+  height: 8.9375rem;
+  line-height: 8.9375rem;
+  border-radius: 50%;
+  background-color: B0731;
+  -webkit-mask-image: url("images/Indicator/b_fast_scroll_rollover_bg.png");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 8.9375rem;
+  margin-top: -4.4375rem;
+  margin-left: 100%;
+  -webkit-transform: translate3d(-6.703125rem, 0, 0);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text {
+  text-align: center;
+  font-size: 4.375rem;
+  color: T0312P;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-minimize .ui-circularindexscrollbar-indicator-text {
+  padding-right: 0.4375rem;
+  text-align: right;
+  font-size: 2rem;
+}
+/***************************************************************************
+                   Scrollbar Style
+***************************************************************************/
+.ui-scrollbar-bar-type {
+  position: absolute;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-horizontal {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 8px;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-vertical {
+  right: 0;
+  top: 0;
+  width: 0.5rem;
+  height: 100%;
+}
+.ui-scrollbar-bar-type .ui-scrollbar-indicator {
+  position: absolute;
+  background-color: B071;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-horizontal .ui-scrollbar-indicator {
+  height: 0.25rem;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-vertical .ui-scrollbar-indicator {
+  width: 0.25rem;
+}
+/***************************************************************************
+                   Scrollbar Bouncing Effect
+***************************************************************************/
+.ui-scrollbar-bouncing-effect {
+  display: none;
+  position: absolute;
+  background-repeat: no-repeat;
+  -webkit-animation-duration: 0.47s;
+  -moz-animation-duration: 0.47s;
+  -ms-animation-duration: 0.47s;
+  -o-animation-duration: 0.47s;
+  -webkit-animation-timing-function: step-start;
+  -moz-animation-timing-function: step-start;
+  -ms-animation-timing-function: step-start;
+  -o-animation-timing-function: step-start;
+  animation-timing-function: step-start;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-fill-mode: forwards;
+  -ms-animation-fill-mode: forwards;
+  -o-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  background-color: B018E;
+}
+.ui-scrollbar-bouncing-effect::before {
+  content: "";
+  position: absolute;
+  background-color: B019;
+}
+.ui-scrollbar-bouncing-effect.ui-top,
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  width: 100%;
+  height: 3.125rem;
+  left: 0;
+  -webkit-mask-size: 100% 3.125rem;
+}
+.ui-scrollbar-bouncing-effect.ui-top::before,
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  width: 100%;
+  height: 0.125rem;
+  -webkit-mask-size: 100% 0.125rem;
+}
+.ui-scrollbar-bouncing-effect.ui-left,
+.ui-scrollbar-bouncing-effect.ui-right {
+  width: 3.125rem;
+  height: 100%;
+  top: 0;
+  -webkit-mask-size: 3.125rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-left::before,
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  width: 0.0625rem;
+  height: 100%;
+  -webkit-mask-size: 0.0625rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-top {
+  top: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_top_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-top::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_top_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  bottom: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_bottom_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_bottom_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left {
+  left: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_left_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_left_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right {
+  right: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_right_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_right_edge.png");
+}
+@-webkit-keyframes ui-bouncing-show {
+  0% {
+    opacity: 0;
+  }
+  10% {
+    opacity: 0.1;
+  }
+  20% {
+    opacity: 0.2;
+  }
+  30% {
+    opacity: 0.3;
+  }
+  40% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  60% {
+    opacity: 0.6;
+  }
+  70% {
+    opacity: 0.7;
+  }
+  80% {
+    opacity: 0.8;
+  }
+  90% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes ui-bouncing-hide {
+  0% {
+    opacity: 1;
+  }
+  10% {
+    opacity: 0.9;
+  }
+  20% {
+    opacity: 0.8;
+  }
+  30% {
+    opacity: 0.7;
+  }
+  40% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  60% {
+    opacity: 0.4;
+  }
+  70% {
+    opacity: 0.3;
+  }
+  80% {
+    opacity: 0.2;
+  }
+  90% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.ui-scrollbar-bouncing-effect.ui-show {
+  display: block;
+  -webkit-animation-name: ui-bouncing-show;
+}
+.ui-scrollbar-bouncing-effect.ui-hide {
+  display: block;
+  -webkit-animation-name: ui-bouncing-hide;
+}
+.ui-swipelist {
+  position: absolute;
+  top: 0;
+}
+.ui-swipelist-left,
+.ui-swipelist-right {
+  position: absolute;
+  display: none;
+}
+.ui-swipelist-left {
+  background: -webkit-linear-gradient(left, B0242 0%, B011 0%);
+}
+.ui-swipelist-right {
+  background: -webkit-linear-gradient(right, B0241 0%, B011 0%);
+}
+.ui-swipelist-icon,
+.ui-swipelist-text {
+  position: absolute;
+}
+.ui-swipelist-left .ui-swipelist-icon {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  width: 20%;
+  height: 100%;
+  margin-left: 2%;
+  background-color: F021L1i;
+  -webkit-mask-image: url("images/Swipelist/b_logs_icon_body_btn_call_nor.png");
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-swipelist-left .ui-swipelist-text {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  margin-left: 40%;
+  height: 100%;
+  line-height: 90px;
+}
+.ui-swipelist-right .ui-swipelist-icon {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  width: 20%;
+  height: 100%;
+  margin-left: 80%;
+  background-color: F021L1i;
+  -webkit-mask-image: url("images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png");
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-swipelist-right .ui-swipelist-text {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  margin-left: 20%;
+  height: 100%;
+  line-height: 90px;
+}
+/***************************************************************************
+                   Tab Style
+***************************************************************************/
+.ui-tab-indicator {
+  position: relative;
+  height: 6px;
+}
+.ui-tab-indicator .ui-tab-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  height: 6px;
+  background-color: B0514;
+}
+.ui-tab-indicator .ui-tab-item.ui-tab-active {
+  background-color: B0514P1;
+}
+input[type="checkbox"]:not(.ui-switch-input),
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  height: 56px;
+  width: 56px;
+  font-size: 32px;
+  -webkit-appearance: none;
+  position: relative;
+}
+input[type="radio"] {
+  background-color: W013L1;
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+}
+input[type="radio"]::after {
+  content: "";
+  background-color: W241;
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_line.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:checked::before {
+  content: "";
+  background-color: W013L2;
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:active {
+  background-color: W013L1P;
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+}
+input[type="radio"]:active::after {
+  content: "";
+  background-color: W241P;
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_line.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:active:checked::before {
+  content: "";
+  background-color: W013L2P;
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input) {
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: W012L1;
+}
+input[type="checkbox"]:not(.ui-switch-input)::after {
+  content: "";
+  background-color: W231;
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):checked::before {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: W012L2;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):active {
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: W012L1P;
+}
+input[type="checkbox"]:not(.ui-switch-input):active::after {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: W231P;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):active:checked::before {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: W012L2P;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+.ui-marquee {
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  -webkit-user-select: none;
+}
+.ui-marquee.ui-marquee-gradient {
+  text-overflow: clip;
+}
+.ui-marquee.ui-marquee-gradient::after {
+  content: "";
+  width: 6.875rem;
+  height: 100%;
+  background: -webkit-linear-gradient(left, transparent 0%, B0211 100%);
+  position: absolute;
+  right: 0;
+}
+.ui-marquee.ui-marquee-ellipsis .ui-marquee-content {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ui-marquee-content {
+  overflow: visible;
+  display: inline-block;
+}
+.ui-marquee-anim-running {
+  -webkit-animation-play-state: running;
+}
+.ui-marquee-anim-stopped {
+  -webkit-animation-play-state: paused;
+}
+.ui-page-indicator {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translate3d(-50%, 0, 0);
+  -moz-transform: translate3d(-50%, 0, 0);
+  -ms-transform: translate3d(-50%, 0, 0);
+  -o-transform: translate3d(-50%, 0, 0);
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-page-indicator-item {
+  position: relative;
+  display: inline-block;
+  width: 0.8125rem;
+  height: 0.8125rem;
+  -webkit-mask-image: -webkit-radial-gradient(#000000 0.25rem, transparent 0.375rem);
+  background-color: T0211D;
+  margin-right: 0.5625rem;
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-page-indicator-item:last-child {
+  margin-right: 0;
+}
+.ui-page-indicator-item.ui-page-indicator-active {
+  background-color: W1911;
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-snap-listview li {
+  -webkit-scroll-snap-destination: 50% 50%;
+}
+.ui-drawer {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  background-color: B011;
+  z-index: 1201;
+  box-sizing: border-box;
+}
+.ui-drawer.ui-drawer-close {
+  overflow: hidden;
+}
+.ui-drawer.ui-drawer-open {
+  overflow: auto;
+}
+.ui-drawer-overlay {
+  top: 0;
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 1200;
+}
+/***************************************************************************
+				   Footer Style (New style)
+***************************************************************************/
+.ui-page .ui-expandable-header {
+  height: 60px;
+}
+.ui-page .ui-expandable-header.ui-header-expand {
+  height: 80px;
+}
+.ui-page .ui-expandable-header.ui-header-expand .ui-title {
+  padding-top: 0;
+  transform: translate3d(0, 20px, 0);
+}
+.ui-section-changer {
+  height: 100%;
+}
diff --git a/lib/tau/wearable/theme/default/images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png b/lib/tau/wearable/theme/default/images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png
new file mode 100644
index 0000000..cac8bf2
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png b/lib/tau/wearable/theme/default/images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png
new file mode 100644
index 0000000..2048b43
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png b/lib/tau/wearable/theme/default/images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png
new file mode 100644
index 0000000..e06b5d5
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png b/lib/tau/wearable/theme/default/images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png
new file mode 100644
index 0000000..b61c7a6
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png b/lib/tau/wearable/theme/default/images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png
new file mode 100644
index 0000000..ea2506c
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/toggle_changeable.png b/lib/tau/wearable/theme/default/images/Controller_icon/toggle_changeable.png
new file mode 100644
index 0000000..69500e8
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/toggle_changeable.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/toggle_circle.png b/lib/tau/wearable/theme/default/images/Controller_icon/toggle_circle.png
new file mode 100644
index 0000000..80532ce
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/toggle_circle.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/toggle_list_circle.png b/lib/tau/wearable/theme/default/images/Controller_icon/toggle_list_circle.png
new file mode 100644
index 0000000..e02e641
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/toggle_list_circle.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_check_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_check_holo_dark.png
new file mode 100644
index 0000000..b93066e
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_check_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_checkbox_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_checkbox_holo_dark.png
new file mode 100644
index 0000000..b66d28c
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_checkbox_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_checkbox_line_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_checkbox_line_holo_dark.png
new file mode 100644
index 0000000..e76b081
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_checkbox_line_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png
new file mode 100644
index 0000000..23d166d
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png
new file mode 100644
index 0000000..0effb3a
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png
new file mode 100644
index 0000000..e6e6501
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_next_depth_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_next_depth_holo_dark.png
new file mode 100644
index 0000000..5b3394b
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_next_depth_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png
new file mode 100644
index 0000000..880f013
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_radio_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_radio_holo_dark.png
new file mode 100644
index 0000000..0fc1881
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_radio_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_radiobox_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_radiobox_holo_dark.png
new file mode 100644
index 0000000..703cb0c
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_radiobox_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_radiobox_line.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_radiobox_line.png
new file mode 100644
index 0000000..1f92e88
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_btn_radiobox_line.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_activation_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_activation_holo_dark.png
new file mode 100644
index 0000000..266c73f
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_activation_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_activation_holo_dark_dim.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_activation_holo_dark_dim.png
new file mode 100644
index 0000000..699eb3e
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_activation_holo_dark_dim.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png
new file mode 100644
index 0000000..71e5b20
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_disabled_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_disabled_holo_dark.png
new file mode 100644
index 0000000..ebb05a6
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_disabled_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png
new file mode 100644
index 0000000..a53449a
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png
new file mode 100644
index 0000000..53e8ee4
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png
new file mode 100644
index 0000000..ef5ae33
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png
new file mode 100644
index 0000000..ba74981
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png
new file mode 100644
index 0000000..acdf9c4
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png
new file mode 100644
index 0000000..6f99bc8
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_holo_dark.png
new file mode 100644
index 0000000..28e5474
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png
new file mode 100644
index 0000000..b74f64e
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png
new file mode 100644
index 0000000..17a9ba1
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png
new file mode 100644
index 0000000..d7a0064
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png
new file mode 100644
index 0000000..f915470
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png
new file mode 100644
index 0000000..0f73347
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png
new file mode 100644
index 0000000..e3823c3
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png
new file mode 100644
index 0000000..e0d7382
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_divider.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_divider.png
new file mode 100644
index 0000000..30605ce
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_divider.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_left_softbtn.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_left_softbtn.png
new file mode 100644
index 0000000..6bf1b2e
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_left_softbtn.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_num_bg_focused.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_num_bg_focused.png
new file mode 100644
index 0000000..b26e87c
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_num_bg_focused.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_num_bg_normal.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_num_bg_normal.png
new file mode 100644
index 0000000..59b9ae1
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_num_bg_normal.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_num_dot.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_num_dot.png
new file mode 100644
index 0000000..aa5a1d2
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_num_dot.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_num_dot_01.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_num_dot_01.png
new file mode 100644
index 0000000..c9a2d8b
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_num_dot_01.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_right_softbtn.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_right_softbtn.png
new file mode 100644
index 0000000..023945a
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_right_softbtn.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_time_bg.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_time_bg.png
new file mode 100644
index 0000000..f5bf671
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_time_bg.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_01.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_01.png
new file mode 100644
index 0000000..9d0ed36
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_01.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_02.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_02.png
new file mode 100644
index 0000000..f3ff1ed
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_02.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_03.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_03.png
new file mode 100644
index 0000000..05ddd26
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_03.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_04.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_04.png
new file mode 100644
index 0000000..879851c
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_04.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_05.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_05.png
new file mode 100644
index 0000000..b523324
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_05.png
diff --git a/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_06.png b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_06.png
new file mode 100644
index 0000000..d320e18
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Datetimepicker/tw_timepicker_wheel_06.png
diff --git a/lib/tau/wearable/theme/default/images/Indicator/b_fast_scroll_rollover_bg.png b/lib/tau/wearable/theme/default/images/Indicator/b_fast_scroll_rollover_bg.png
new file mode 100644
index 0000000..dbfb43b
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Indicator/b_fast_scroll_rollover_bg.png
diff --git a/lib/tau/wearable/theme/default/images/Indicator/b_index_scroll_bg.png b/lib/tau/wearable/theme/default/images/Indicator/b_index_scroll_bg.png
new file mode 100644
index 0000000..348e3aa
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Indicator/b_index_scroll_bg.png
diff --git a/lib/tau/wearable/theme/default/images/Indicator/list_scroll_triggle.png b/lib/tau/wearable/theme/default/images/Indicator/list_scroll_triggle.png
new file mode 100644
index 0000000..983d398
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Indicator/list_scroll_triggle.png
diff --git a/lib/tau/wearable/theme/default/images/Popup/tw_device_options_brightness_off.png b/lib/tau/wearable/theme/default/images/Popup/tw_device_options_brightness_off.png
new file mode 100644
index 0000000..c1d4bf4
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Popup/tw_device_options_brightness_off.png
diff --git a/lib/tau/wearable/theme/default/images/Popup/tw_device_options_brightness_on.png b/lib/tau/wearable/theme/default/images/Popup/tw_device_options_brightness_on.png
new file mode 100644
index 0000000..22e92bf
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Popup/tw_device_options_brightness_on.png
diff --git a/lib/tau/wearable/theme/default/images/Popup/tw_device_options_mute.png b/lib/tau/wearable/theme/default/images/Popup/tw_device_options_mute.png
new file mode 100644
index 0000000..a68530a
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Popup/tw_device_options_mute.png
diff --git a/lib/tau/wearable/theme/default/images/Popup/tw_device_options_outdoor_off.png b/lib/tau/wearable/theme/default/images/Popup/tw_device_options_outdoor_off.png
new file mode 100644
index 0000000..5b0c414
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Popup/tw_device_options_outdoor_off.png
diff --git a/lib/tau/wearable/theme/default/images/Popup/tw_device_options_outdoor_on.png b/lib/tau/wearable/theme/default/images/Popup/tw_device_options_outdoor_on.png
new file mode 100644
index 0000000..9827653
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Popup/tw_device_options_outdoor_on.png
diff --git a/lib/tau/wearable/theme/default/images/Popup/tw_device_options_sound.png b/lib/tau/wearable/theme/default/images/Popup/tw_device_options_sound.png
new file mode 100644
index 0000000..f66d6ba
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Popup/tw_device_options_sound.png
diff --git a/lib/tau/wearable/theme/default/images/Popup/tw_device_options_sound_off.png b/lib/tau/wearable/theme/default/images/Popup/tw_device_options_sound_off.png
new file mode 100644
index 0000000..3038dff
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Popup/tw_device_options_sound_off.png
diff --git a/lib/tau/wearable/theme/default/images/Popup/tw_device_options_vibrate.png b/lib/tau/wearable/theme/default/images/Popup/tw_device_options_vibrate.png
new file mode 100644
index 0000000..2333074
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Popup/tw_device_options_vibrate.png
diff --git a/lib/tau/wearable/theme/default/images/Popup/tw_ic_lock_power_off.png b/lib/tau/wearable/theme/default/images/Popup/tw_ic_lock_power_off.png
new file mode 100644
index 0000000..35ab760
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Popup/tw_ic_lock_power_off.png
diff --git a/lib/tau/wearable/theme/default/images/Popup/tw_ic_lock_restart.png b/lib/tau/wearable/theme/default/images/Popup/tw_ic_lock_restart.png
new file mode 100644
index 0000000..b32aa3a
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Popup/tw_ic_lock_restart.png
diff --git a/lib/tau/wearable/theme/default/images/Processing/tw_popup_progress_line.png b/lib/tau/wearable/theme/default/images/Processing/tw_popup_progress_line.png
new file mode 100644
index 0000000..fd8c2f0
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Processing/tw_popup_progress_line.png
diff --git a/lib/tau/wearable/theme/default/images/Processing/tw_progress.png b/lib/tau/wearable/theme/default/images/Processing/tw_progress.png
new file mode 100644
index 0000000..58f13da
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Processing/tw_progress.png
diff --git a/lib/tau/wearable/theme/default/images/Processing/tw_progress_full_loading_bg.png b/lib/tau/wearable/theme/default/images/Processing/tw_progress_full_loading_bg.png
new file mode 100644
index 0000000..944fff1
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Processing/tw_progress_full_loading_bg.png
diff --git a/lib/tau/wearable/theme/default/images/Processing/tw_progress_small_loading_bg.png b/lib/tau/wearable/theme/default/images/Processing/tw_progress_small_loading_bg.png
new file mode 100644
index 0000000..8bc529d
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Processing/tw_progress_small_loading_bg.png
diff --git a/lib/tau/wearable/theme/default/images/Processing/tw_widget_activity_01.png b/lib/tau/wearable/theme/default/images/Processing/tw_widget_activity_01.png
new file mode 100644
index 0000000..8ec516e
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Processing/tw_widget_activity_01.png
diff --git a/lib/tau/wearable/theme/default/images/Processing/tw_widget_activity_02.png b/lib/tau/wearable/theme/default/images/Processing/tw_widget_activity_02.png
new file mode 100644
index 0000000..7b3ef90
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Processing/tw_widget_activity_02.png
diff --git a/lib/tau/wearable/theme/default/images/Progress/tw_progressbar_indeterminate1_holo_dark.png b/lib/tau/wearable/theme/default/images/Progress/tw_progressbar_indeterminate1_holo_dark.png
new file mode 100644
index 0000000..6cdff14
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Progress/tw_progressbar_indeterminate1_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Progress/tw_progressbar_indeterminate2_holo_dark.png b/lib/tau/wearable/theme/default/images/Progress/tw_progressbar_indeterminate2_holo_dark.png
new file mode 100644
index 0000000..17905b9
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Progress/tw_progressbar_indeterminate2_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Progress/tw_progressbar_indeterminate3_holo_dark.png b/lib/tau/wearable/theme/default/images/Progress/tw_progressbar_indeterminate3_holo_dark.png
new file mode 100644
index 0000000..b17353d
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Progress/tw_progressbar_indeterminate3_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Progress/tw_progressbar_indeterminate4_holo_dark.png b/lib/tau/wearable/theme/default/images/Progress/tw_progressbar_indeterminate4_holo_dark.png
new file mode 100644
index 0000000..719a2bc
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Progress/tw_progressbar_indeterminate4_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Progress/tw_progressbar_indeterminate5_holo_dark.png b/lib/tau/wearable/theme/default/images/Progress/tw_progressbar_indeterminate5_holo_dark.png
new file mode 100644
index 0000000..420de53
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Progress/tw_progressbar_indeterminate5_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Progress/tw_scrubber_control_focused_holo_dark.png b/lib/tau/wearable/theme/default/images/Progress/tw_scrubber_control_focused_holo_dark.png
new file mode 100644
index 0000000..0d807e2
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Progress/tw_scrubber_control_focused_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Progress/tw_scrubber_control_holo_dark.png b/lib/tau/wearable/theme/default/images/Progress/tw_scrubber_control_holo_dark.png
new file mode 100644
index 0000000..b7c6fdb
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Progress/tw_scrubber_control_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/Scroller/bouncing_bottom_edge.png b/lib/tau/wearable/theme/default/images/Scroller/bouncing_bottom_edge.png
new file mode 100644
index 0000000..7259d14
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Scroller/bouncing_bottom_edge.png
diff --git a/lib/tau/wearable/theme/default/images/Scroller/bouncing_bottom_glow.png b/lib/tau/wearable/theme/default/images/Scroller/bouncing_bottom_glow.png
new file mode 100644
index 0000000..5b150b0
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Scroller/bouncing_bottom_glow.png
diff --git a/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_bottom_edge.png b/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_bottom_edge.png
new file mode 100644
index 0000000..ded117d
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_bottom_edge.png
diff --git a/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_bottom_glow.png b/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_bottom_glow.png
new file mode 100644
index 0000000..96f3684
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_bottom_glow.png
diff --git a/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_left_edge.png b/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_left_edge.png
new file mode 100644
index 0000000..c7950f4
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_left_edge.png
diff --git a/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_left_glow.png b/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_left_glow.png
new file mode 100644
index 0000000..5337045
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_left_glow.png
diff --git a/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_right_edge.png b/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_right_edge.png
new file mode 100644
index 0000000..4037cb5
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_right_edge.png
diff --git a/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_right_glow.png b/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_right_glow.png
new file mode 100644
index 0000000..7319c76
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Scroller/bouncing_circle_right_glow.png
diff --git a/lib/tau/wearable/theme/default/images/Scroller/bouncing_left_edge.png b/lib/tau/wearable/theme/default/images/Scroller/bouncing_left_edge.png
new file mode 100644
index 0000000..413fccd
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Scroller/bouncing_left_edge.png
diff --git a/lib/tau/wearable/theme/default/images/Scroller/bouncing_left_glow.png b/lib/tau/wearable/theme/default/images/Scroller/bouncing_left_glow.png
new file mode 100644
index 0000000..11015e4
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Scroller/bouncing_left_glow.png
diff --git a/lib/tau/wearable/theme/default/images/Scroller/bouncing_right_edge.png b/lib/tau/wearable/theme/default/images/Scroller/bouncing_right_edge.png
new file mode 100644
index 0000000..e14f69b
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Scroller/bouncing_right_edge.png
diff --git a/lib/tau/wearable/theme/default/images/Scroller/bouncing_right_glow.png b/lib/tau/wearable/theme/default/images/Scroller/bouncing_right_glow.png
new file mode 100644
index 0000000..69ed30b
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Scroller/bouncing_right_glow.png
diff --git a/lib/tau/wearable/theme/default/images/Scroller/bouncing_top_edge.png b/lib/tau/wearable/theme/default/images/Scroller/bouncing_top_edge.png
new file mode 100644
index 0000000..6138e66
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Scroller/bouncing_top_edge.png
diff --git a/lib/tau/wearable/theme/default/images/Scroller/bouncing_top_glow.png b/lib/tau/wearable/theme/default/images/Scroller/bouncing_top_glow.png
new file mode 100644
index 0000000..73b2fc9
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Scroller/bouncing_top_glow.png
diff --git a/lib/tau/wearable/theme/default/images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png b/lib/tau/wearable/theme/default/images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png
new file mode 100644
index 0000000..5e41e9a
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png
diff --git a/lib/tau/wearable/theme/default/images/Swipelist/b_logs_icon_body_btn_call_nor.png b/lib/tau/wearable/theme/default/images/Swipelist/b_logs_icon_body_btn_call_nor.png
new file mode 100644
index 0000000..8337333
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/Swipelist/b_logs_icon_body_btn_call_nor.png
diff --git a/lib/tau/wearable/theme/default/images/controls/00_field_btn_clear.png b/lib/tau/wearable/theme/default/images/controls/00_field_btn_clear.png
new file mode 100644
index 0000000..eff4c22
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/00_field_btn_clear.png
diff --git a/lib/tau/wearable/theme/default/images/controls/00_field_btn_clear_press.png b/lib/tau/wearable/theme/default/images/controls/00_field_btn_clear_press.png
new file mode 100644
index 0000000..778108e
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/00_field_btn_clear_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/00_search_icon.png b/lib/tau/wearable/theme/default/images/controls/00_search_icon.png
new file mode 100644
index 0000000..c634b56
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/00_search_icon.png
diff --git a/lib/tau/wearable/theme/default/images/controls/00_slider_button_brightness_01.png b/lib/tau/wearable/theme/default/images/controls/00_slider_button_brightness_01.png
new file mode 100644
index 0000000..8f9214f
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/00_slider_button_brightness_01.png
diff --git a/lib/tau/wearable/theme/default/images/controls/00_slider_button_brightness_02.png b/lib/tau/wearable/theme/default/images/controls/00_slider_button_brightness_02.png
new file mode 100644
index 0000000..0df85e0
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/00_slider_button_brightness_02.png
diff --git a/lib/tau/wearable/theme/default/images/controls/00_slider_button_volume_01.png b/lib/tau/wearable/theme/default/images/controls/00_slider_button_volume_01.png
new file mode 100644
index 0000000..1f41023
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/00_slider_button_volume_01.png
diff --git a/lib/tau/wearable/theme/default/images/controls/00_slider_button_volume_02.png b/lib/tau/wearable/theme/default/images/controls/00_slider_button_volume_02.png
new file mode 100644
index 0000000..0f6f7f4
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/00_slider_button_volume_02.png
diff --git a/lib/tau/wearable/theme/default/images/controls/00_slider_handle.png b/lib/tau/wearable/theme/default/images/controls/00_slider_handle.png
new file mode 100644
index 0000000..3a64686
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/00_slider_handle.png
diff --git a/lib/tau/wearable/theme/default/images/controls/00_slider_handle_press.png b/lib/tau/wearable/theme/default/images/controls/00_slider_handle_press.png
new file mode 100644
index 0000000..ecb7e42
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/00_slider_handle_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/00_slider_popup_bg.png b/lib/tau/wearable/theme/default/images/controls/00_slider_popup_bg.png
new file mode 100644
index 0000000..ef0a56e
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/00_slider_popup_bg.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_back.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_back.png
new file mode 100644
index 0000000..7618371
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_back.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_back_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_back_press.png
new file mode 100644
index 0000000..7618371
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_back_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_call.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_call.png
new file mode 100644
index 0000000..5b837fd
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_call.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_call_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_call_press.png
new file mode 100644
index 0000000..5b837fd
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_call_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_check.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_check.png
new file mode 100644
index 0000000..8df9a9c
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_check.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_check_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_check_press.png
new file mode 100644
index 0000000..8df9a9c
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_check_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_cancel.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_cancel.png
new file mode 100644
index 0000000..a5b5639
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_cancel.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_cancel_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_cancel_press.png
new file mode 100644
index 0000000..a5b5639
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_cancel_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_closed.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_closed.png
new file mode 100644
index 0000000..452209d
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_closed.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_closed_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_closed_press.png
new file mode 100644
index 0000000..452209d
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_closed_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_minus.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_minus.png
new file mode 100644
index 0000000..0f0170f
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_minus.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_minus_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_minus_press.png
new file mode 100644
index 0000000..0f0170f
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_minus_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_opened.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_opened.png
new file mode 100644
index 0000000..5b5cbd0
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_opened.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_opened_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_opened_press.png
new file mode 100644
index 0000000..5b5cbd0
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_opened_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_send.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_send.png
new file mode 100644
index 0000000..521b4b2
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_send.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_send_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_send_press.png
new file mode 100644
index 0000000..521b4b2
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_expand_send_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_gear.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_gear.png
new file mode 100644
index 0000000..8e4b359
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_gear.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_gear_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_gear_press.png
new file mode 100644
index 0000000..8e4b359
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_gear_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_grid.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_grid.png
new file mode 100644
index 0000000..ca6b769
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_grid.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_grid_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_grid_press.png
new file mode 100644
index 0000000..ca6b769
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_grid_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_home.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_home.png
new file mode 100644
index 0000000..1ba3820
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_home.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_home_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_home_press.png
new file mode 100644
index 0000000..1ba3820
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_home_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_info.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_info.png
new file mode 100644
index 0000000..1e5d984
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_info.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_info_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_info_press.png
new file mode 100644
index 0000000..1e5d984
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_info_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_left.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_left.png
new file mode 100644
index 0000000..b4eca6d
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_left.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_left_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_left_press.png
new file mode 100644
index 0000000..b4eca6d
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_left_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_plus.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_plus.png
new file mode 100644
index 0000000..12cbe29
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_plus.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_plus_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_plus_press.png
new file mode 100644
index 0000000..12cbe29
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_plus_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_refresh.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_refresh.png
new file mode 100644
index 0000000..33ff934
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_refresh.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_refresh_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_refresh_press.png
new file mode 100644
index 0000000..33ff934
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_refresh_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_rename.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_rename.png
new file mode 100644
index 0000000..e3603b8
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_rename.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_rename_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_rename_press.png
new file mode 100644
index 0000000..e3603b8
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_rename_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_right.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_right.png
new file mode 100644
index 0000000..659ea76
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_right.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_right_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_right_press.png
new file mode 100644
index 0000000..659ea76
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_right_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_search.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_search.png
new file mode 100644
index 0000000..12f4714
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_search.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_search_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_search_press.png
new file mode 100644
index 0000000..12f4714
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_search_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_star.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_star.png
new file mode 100644
index 0000000..f608394
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_star.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_star_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_star_press.png
new file mode 100644
index 0000000..f608394
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_star_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_warning.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_warning.png
new file mode 100644
index 0000000..4a39960
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_warning.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_button_warning_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_button_warning_press.png
new file mode 100644
index 0000000..4a39960
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_button_warning_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_icon_jump.png b/lib/tau/wearable/theme/default/images/controls/button/00_icon_jump.png
new file mode 100644
index 0000000..3692cbd
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_icon_jump.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_icon_jump_left.png b/lib/tau/wearable/theme/default/images/controls/button/00_icon_jump_left.png
new file mode 100644
index 0000000..9c299ac
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_icon_jump_left.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_icon_jump_left_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_icon_jump_left_press.png
new file mode 100644
index 0000000..9c299ac
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_icon_jump_left_press.png
diff --git a/lib/tau/wearable/theme/default/images/controls/button/00_icon_jump_press.png b/lib/tau/wearable/theme/default/images/controls/button/00_icon_jump_press.png
new file mode 100644
index 0000000..3692cbd
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/controls/button/00_icon_jump_press.png
diff --git a/lib/tau/wearable/theme/default/images/listview/tw_list_add_holo_dark.png b/lib/tau/wearable/theme/default/images/listview/tw_list_add_holo_dark.png
new file mode 100644
index 0000000..bd24e0e
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/listview/tw_list_add_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/listview/tw_list_delete_holo_dark.png b/lib/tau/wearable/theme/default/images/listview/tw_list_delete_holo_dark.png
new file mode 100644
index 0000000..ccbb700
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/listview/tw_list_delete_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/listview/tw_list_setting_holo_dark.png b/lib/tau/wearable/theme/default/images/listview/tw_list_setting_holo_dark.png
new file mode 100644
index 0000000..5b90223
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/listview/tw_list_setting_holo_dark.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_Back.png b/lib/tau/wearable/theme/default/images/page/00_icon_Back.png
new file mode 100644
index 0000000..815a343
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_Back.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_Back_press.png b/lib/tau/wearable/theme/default/images/page/00_icon_Back_press.png
new file mode 100644
index 0000000..fcbc346
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_Back_press.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_SIP_close_press_web.png b/lib/tau/wearable/theme/default/images/page/00_icon_SIP_close_press_web.png
new file mode 100644
index 0000000..5d036a3
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_SIP_close_press_web.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_SIP_close_web.png b/lib/tau/wearable/theme/default/images/page/00_icon_SIP_close_web.png
new file mode 100644
index 0000000..76f10ec
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_SIP_close_web.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_cancel_press_web.png b/lib/tau/wearable/theme/default/images/page/00_icon_cancel_press_web.png
new file mode 100644
index 0000000..872ad33
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_cancel_press_web.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_cancel_web.png b/lib/tau/wearable/theme/default/images/page/00_icon_cancel_web.png
new file mode 100644
index 0000000..3c37e96
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_cancel_web.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_delete_press_web.png b/lib/tau/wearable/theme/default/images/page/00_icon_delete_press_web.png
new file mode 100644
index 0000000..829c8b0
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_delete_press_web.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_delete_web.png b/lib/tau/wearable/theme/default/images/page/00_icon_delete_web.png
new file mode 100644
index 0000000..d105c7b
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_delete_web.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_done_press_web.png b/lib/tau/wearable/theme/default/images/page/00_icon_done_press_web.png
new file mode 100644
index 0000000..b56c0f1
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_done_press_web.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_done_web.png b/lib/tau/wearable/theme/default/images/page/00_icon_done_web.png
new file mode 100644
index 0000000..7b58fc4
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_done_web.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_edit_press_web.png b/lib/tau/wearable/theme/default/images/page/00_icon_edit_press_web.png
new file mode 100644
index 0000000..b52b2b6
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_edit_press_web.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_edit_web.png b/lib/tau/wearable/theme/default/images/page/00_icon_edit_web.png
new file mode 100644
index 0000000..a56d1f6
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_edit_web.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_more.png b/lib/tau/wearable/theme/default/images/page/00_icon_more.png
new file mode 100644
index 0000000..95f17c7
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_more.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_more_press.png b/lib/tau/wearable/theme/default/images/page/00_icon_more_press.png
new file mode 100644
index 0000000..d4d6951
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_more_press.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_plus_press_web.png b/lib/tau/wearable/theme/default/images/page/00_icon_plus_press_web.png
new file mode 100644
index 0000000..f15fb71
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_plus_press_web.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_plus_web.png b/lib/tau/wearable/theme/default/images/page/00_icon_plus_web.png
new file mode 100644
index 0000000..d49406f
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_plus_web.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_search_press_web.png b/lib/tau/wearable/theme/default/images/page/00_icon_search_press_web.png
new file mode 100644
index 0000000..464c5c7
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_search_press_web.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_search_web.png b/lib/tau/wearable/theme/default/images/page/00_icon_search_web.png
new file mode 100644
index 0000000..7788bec
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_search_web.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_select_all_press_web.png b/lib/tau/wearable/theme/default/images/page/00_icon_select_all_press_web.png
new file mode 100644
index 0000000..32ae22e
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_select_all_press_web.png
diff --git a/lib/tau/wearable/theme/default/images/page/00_icon_select_all_web.png b/lib/tau/wearable/theme/default/images/page/00_icon_select_all_web.png
new file mode 100644
index 0000000..ce4af60
--- /dev/null
+++ b/lib/tau/wearable/theme/default/images/page/00_icon_select_all_web.png
diff --git a/lib/tau/wearable/theme/default/tau.circle.css b/lib/tau/wearable/theme/default/tau.circle.css
new file mode 100644
index 0000000..58f741c
--- /dev/null
+++ b/lib/tau/wearable/theme/default/tau.circle.css
@@ -0,0 +1,913 @@
+/***************************************************************************
+                  Body
+***************************************************************************/
+/***************************************************************************
+                   Action Bar
+***************************************************************************/
+/****************************************************************************
+               Circle Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Processing
+****************************************************************************/
+/***************************************************************************
+                   Buttons
+***************************************************************************/
+/***************************************************************************
+                   Popup
+***************************************************************************/
+/***************************************************************************
+                   Footer
+***************************************************************************/
+/***************************************************************************
+                   Toast Popup
+***************************************************************************/
+/***************************************************************************
+                   Option Popup
+***************************************************************************/
+/***************************************************************************
+                  circular index scrollbar
+***************************************************************************/
+/***************************************************************************
+                  Listview
+***************************************************************************/
+/****************************************************************************
+               Listview with Marquee
+****************************************************************************/
+/***************************************************************************
+                   Checkbox/Radio
+***************************************************************************/
+/***************************************************************************
+						Page Indicator
+***************************************************************************/
+/****************************************************************************
+		Toggle Switch
+****************************************************************************/
+/***************************************************************************
+                   Scroller
+***************************************************************************/
+/***************************************************************************
+                   More options
+***************************************************************************/
+/************************************************************************/
+/*                           fixedUIStyle.less                          */
+/************************************************************************/
+/* When system font-size is changed, winset size (ex. header, footer, button, etc,
+   include font) also changed. But in UX guide, some UI elements should have fixed
+   size regardless of system font size.
+   So, this less file supports fixed style for some elements.
+   - Layout: header, footer, button
+   - Popup : popup header, popup footer
+   - toggleswitch
+   - progress: text for ratio
+*/
+/***********************************************************************/
+/*                         Layout(FIXED)                               */
+/***********************************************************************/
+/**********************************************************************/
+/*                       Popup(FIXED)                                 */
+/**********************************************************************/
+/**********************************************************************/
+/*                      ToggleSwitch(FIXED)                           */
+/**********************************************************************/
+/************************
+Listview
+*************************/
+/***************************************************************************
+                   Common Style
+
+***************************************************************************/
+/***************************************************************************
+                   Development Tip
+  If you want to implement specific css code of circle device,
+  you should implement specific code here.
+  But when you implement code, you should check duplicate value
+  between common/layout.less and this file.
+  If you have duplicate value, please change static value to variable value.
+***************************************************************************/
+body {
+  background: rgba(8, 8, 8, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-header {
+  height: 128px;
+  line-height: 36px;
+  background-color: rgba(8, 8, 8, 1);
+}
+.ui-header .ui-title {
+  color: rgba(0, 149, 255, 1);
+  text-align: center;
+  padding-top: 54px;
+  margin-left: 2.5rem;
+  margin-right: 2.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+.ui-header .ui-title.ui-icon {
+  background: none !important;
+  padding-left: 1.5rem;
+}
+.ui-header.ui-has-more .ui-title {
+  padding-right: 1.5rem;
+  -webkit-mask-image: -webkit-linear-gradient(left, #000000 80%, rgba(0, 0, 0, 0) 95%);
+}
+.ui-header.ui-has-more .ui-more {
+  position: fixed;
+  top: 163px;
+  right: 8px;
+  width: 50px;
+  height: 36px;
+}
+.ui-header.ui-has-more .ui-more.ui-icon-overflow {
+  background-color: rgba(245, 245, 245, 0.8);
+}
+.ui-page {
+  background: rgba(8, 8, 8, 1);
+}
+.ui-page .ui-footer.ui-bottom-button {
+  overflow: hidden;
+}
+.ui-page .ui-footer.ui-bottom-button .ui-btn {
+  width: 112px;
+  height: 112px;
+  position: relative;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+  border-radius: 50%;
+  text-indent: -9999px;
+  margin-bottom: -22px;
+}
+.ui-page .ui-footer.ui-bottom-button .ui-btn:only-child::before {
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-page .ui-footer.ui-bottom-button .ui-btn::before {
+  content: "";
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-mask-size: 3.75rem 3.75rem;
+  -webkit-mask-repeat: no-repeat;
+  width: 3.75rem;
+  height: 3.75rem;
+  position: absolute;
+  bottom: 23px;
+}
+/***************************************************************************
+                   Page Scroll
+***************************************************************************/
+.ui-page.ui-scroll-on .ui-content {
+  margin-top: 7.625rem;
+  margin-bottom: 6.125rem;
+  padding-top: 0;
+}
+.ui-page.ui-scroll-on .ui-header ~ .ui-content {
+  margin-top: 0;
+}
+.ui-page.ui-scroll-on .ui-content ~ .ui-footer:not(.ui-expandable-footer) {
+  margin-top: -5.3125rem;
+}
+/*
+ * Common definition for theme
+ */
+/***************************************************************
+   default font size (base font from WRT)
+   => small: 13px
+   => normal: 17px
+   => large: 20px
+
+This is only applied to gear2.
+so, we set @font_size_default as 17px on gear2 and it was changed to 16px since gear-S.
+This value only used for @rem_base, not for html font-size
+html font-size is set by WRT base font-size
+***************************************************************/
+a {
+  color: rgba(245, 245, 245, 1);
+}
+/***************************************************************************
+                  toggle switch
+***************************************************************************/
+.ui-switch-text {
+  margin-top: 60px;
+  margin-bottom: 48px;
+  font-size: 34px;
+  padding: 0;
+}
+.ui-switch-sub-text {
+  margin-top: 48px;
+  margin-bottom: 55px;
+  font-size: 26px;
+  color: rgba(0, 149, 255, 1);
+}
+.ui-toggleswitch {
+  width: 69px;
+  height: 49px;
+}
+.ui-toggleswitch .ui-switch-input::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_list_circle.png);
+  -webkit-mask-size: 69px;
+  background-color: rgba(51, 51, 51, 1);
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-toggleswitch .ui-switch-input:active::before {
+  -webkit-transition-duration: 0;
+  -moz-transition-duration: 0;
+  -o-transition-duration: 0;
+  -ms-transition-duration: 0;
+  transition-duration: 0;
+  background-color: rgba(51, 51, 51, 1);
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button {
+  -webkit-transition-duration: 0;
+  -moz-transition-duration: 0;
+  -o-transition-duration: 0;
+  -ms-transition-duration: 0;
+  transition-duration: 0;
+  background-color: rgba(97, 96, 96, 1);
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button::before {
+  background-color: rgba(173, 173, 173, 1);
+}
+.ui-toggleswitch .ui-switch-activation,
+.ui-toggleswitch .ui-switch-button {
+  width: 49px;
+  height: 49px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_list_circle.png);
+  -webkit-mask-size: 69px;
+  -webkit-mask-position: 0 -49px;
+  background-color: rgba(128, 128, 128, 1);
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-toggleswitch .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-button::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_list_circle.png);
+  -webkit-mask-size: 69px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 -98px;
+  background-color: rgba(222, 222, 222, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button {
+  width: 49px;
+  height: 49px;
+  -webkit-mask-position: 0 -49px;
+  background-color: rgba(112, 186, 15, 1);
+  -webkit-transform: translate3d(20px, 0, 0);
+  -moz-transform: translate3d(20px, 0, 0);
+  -ms-transform: translate3d(20px, 0, 0);
+  -o-transform: translate3d(20px, 0, 0);
+  transform: translate3d(20px, 0, 0);
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -147px;
+  background-color: rgba(241, 242, 237, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked::before {
+  background-color: rgba(43, 69, 8, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active::before {
+  background-color: rgba(43, 69, 8, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button {
+  background-color: rgba(71, 97, 37, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button::before {
+  background-color: rgba(172, 173, 170, 1);
+}
+.ui-toggleswitch.ui-toggleswitch-large {
+  width: 136px;
+  height: 78px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button {
+  width: 78px;
+  height: 78px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_circle.png);
+  -webkit-mask-size: 136px;
+  -webkit-mask-position: 0 -78px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_circle.png);
+  -webkit-mask-size: 136px;
+  -webkit-mask-position: 0 -156px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_circle.png);
+  -webkit-mask-size: 136px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button {
+  width: 78px;
+  height: 78px;
+  -webkit-mask-position: 0 -78px;
+  -webkit-transform: translate3d(58px, 0, 0);
+  -moz-transform: translate3d(58px, 0, 0);
+  -ms-transform: translate3d(58px, 0, 0);
+  -o-transform: translate3d(58px, 0, 0);
+  transform: translate3d(58px, 0, 0);
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -234px;
+}
+/***************************************************************************
+                  popup
+***************************************************************************/
+/***********************
+Normal Popup
+***********************/
+.ui-popup {
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: rgba(0, 17, 33, 1);
+  border: 3px solid rgba(0, 149, 255, 1);
+}
+.ui-popup .ui-popup-header {
+  text-align: center;
+  min-height: 122px;
+  background-color: rgba(0, 17, 33, 1);
+  color: rgba(0, 149, 255, 1);
+  padding-top: 53px;
+  padding-right: 61px;
+  padding-bottom: 33px;
+  padding-left: 61px;
+}
+.ui-popup .ui-popup-header + .ui-popup-content {
+  padding-top: 26px;
+}
+.ui-popup .ui-popup-content {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(0, 17, 33, 1);
+  padding: 58px 55px 16px 55px;
+}
+.ui-popup .ui-popup-content .ui-listview,
+.ui-popup .ui-popup-content .ui-inline-listview {
+  margin: -1.5625rem -3.4375rem -1rem -3.4375rem;
+}
+.ui-popup .ui-popup-footer {
+  width: 0;
+  height: 0;
+}
+.ui-popup .ui-popup-footer .ui-btn {
+  height: 108px;
+  width: 108px;
+  border-radius: 54px;
+  position: fixed;
+  text-indent: -9999px;
+}
+.ui-popup .ui-popup-footer .ui-btn.ui-btn-footer-icon::before {
+  content: "";
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-mask-size: 48px 48px;
+  -webkit-mask-repeat: no-repeat;
+  width: 48px;
+  height: 48px;
+  position: absolute;
+}
+.ui-popup .ui-popup-footer .ui-btn:only-child {
+  top: -53px;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:only-child.ui-btn-footer-icon::before {
+  top: 54px;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:active {
+  background-color: rgba(51, 170, 255, 1);
+}
+.ui-popup .ui-popup-footer .ui-btn:active.ui-btn-footer-icon::before {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1) {
+  top: 50%;
+  left: -53px;
+  transform: translate3d(0, -50%, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1).ui-btn-footer-icon::before {
+  top: 50%;
+  left: 53px;
+  transform: translate3d(0, -50%, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2) {
+  top: 50%;
+  right: -53px;
+  transform: translate3d(0, -50%, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2).ui-btn-footer-icon::before {
+  top: 50%;
+  right: 53px;
+  transform: translate3d(0, -50%, 0);
+}
+/***********************
+Popup Container Scroll
+***********************/
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content {
+  margin-top: 7.625rem;
+  margin-bottom: 6.125rem;
+  padding-top: 0;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header + .ui-popup-content {
+  margin-top: 0;
+  padding-top: 26px;
+}
+/****************************************
+Popup Toast
+****************************************/
+.ui-popup.ui-popup-toast {
+  bottom: 2.6875rem;
+  border: 3px solid rgba(2, 56, 92, 1);
+  position: fixed;
+  max-height: 13.75rem;
+}
+.ui-popup.ui-popup-toast .ui-popup-content {
+  background-color: rgba(0, 17, 33, 1);
+  padding: 13px 40px 12px;
+  font-size: 32px;
+  text-align: center;
+  line-height: 42px;
+}
+/***********************
+Option Popup
+***********************/
+.ui-popup.ui-ctxpopup {
+  background-color: transparent;
+  left: 50% !important;
+  margin-left: -6.28125rem;
+  top: 50% !important;
+  margin-top: -6.28125rem;
+  width: 12.5625rem;
+}
+div.ui-popup.ui-ctxpopup.ui-popup-content-size {
+  width: 12.5625rem;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l {
+  padding: 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow > span,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow > span,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow > span,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow > span {
+  background-color: rgba(2, 56, 92, 1);
+  border: 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow {
+  left: 5.15625rem !important;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow {
+  top: 5.84375rem !important;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content {
+  -webkit-border-radius: 50%;
+  -webkit-mask-image: -webkit-radial-gradient(#000000 6.28125rem, transparent 0);
+  height: 12.5625rem !important;
+  min-height: 12.5625rem !important;
+  background-color: rgba(2, 56, 92, 1);
+  border: 1px solid rgba(8, 8, 8, 1);
+  padding: 0;
+  border: 0;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview {
+  margin: 0;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li {
+  font-size: 1.75rem;
+  min-height: 6.25rem;
+  text-align: center;
+  line-height: 3.625rem;
+  border-bottom: 1px solid rgba(8, 8, 8, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a {
+  color: rgba(245, 245, 245, 1);
+  margin: -1.46875rem -1rem;
+  padding: 1.46875rem 1rem;
+  min-height: 3.3125rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(23, 73, 115, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview {
+  height: initial;
+  overflow: hidden;
+  width: 12.5625rem !important;
+  margin: 0;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li {
+  font-size: 1.75rem;
+  float: none;
+  min-height: 6.25rem;
+  line-height: 3.625rem;
+  text-align: center;
+  border-bottom: 1px solid rgba(8, 8, 8, 1);
+  border-right: 0;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a {
+  margin: 0;
+  padding: 0;
+  line-height: 6.25rem;
+  color: rgba(245, 245, 245, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(23, 73, 115, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext {
+  width: 100%;
+  height: 100%;
+}
+/***************************************************************************
+                  listview
+***************************************************************************/
+.ui-listview li {
+  font-size: 2.25rem;
+  min-height: 6.5625rem;
+  padding: 1.78125rem 2.5rem;
+  border-bottom: 1px solid rgba(41, 41, 41, 1);
+  color: rgba(245, 245, 245, 1);
+  text-align: center;
+}
+.ui-listview li > * {
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview li > a {
+  padding: 1.78125rem 2.5rem;
+  margin: -1.8125rem -2.5rem;
+}
+.ui-listview li.ui-li-active {
+  background-color: rgba(8, 56, 94, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview li:last-child {
+  border: 0;
+}
+.ui-listview .li-divider {
+  height: 2.0625rem;
+  min-height: 2.0625rem;
+  line-height: 1.9375rem;
+  background-color: rgba(31, 31, 31, 1);
+  color: rgba(0, 149, 255, 1);
+  padding: 0;
+}
+.ui-listview .ui-li-sub-text {
+  color: rgba(0, 149, 255, 1);
+}
+.ui-header + .ui-content .ui-listview li:first-child {
+  border-top: 1px solid rgba(41, 41, 41, 1);
+}
+/***************************************************************************
+                  listview extra
+***************************************************************************/
+.ui-listview .ui-li-has-action-icon .ui-action-text::after {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-setting {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-add {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active {
+  background-color: rgba(8, 56, 94, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete:active,
+.ui-listview .ui-li-has-action-icon .ui-action-setting:active,
+.ui-listview .ui-li-has-action-icon .ui-action-add:active {
+  background-color: rgba(8, 56, 94, 1);
+  color: rgba(245, 245, 245, 1);
+}
+/***************************************************************************
+                  checkbox / radio button
+***************************************************************************/
+input[type="checkbox"]:not(.ui-switch-input) {
+  background-color: rgba(0, 14, 26, 1);
+}
+input[type="checkbox"]:not(.ui-switch-input)::after {
+  background-color: rgba(245, 245, 245, 0.3);
+}
+input[type="checkbox"]:not(.ui-switch-input):checked::before {
+  background-color: rgba(112, 186, 15, 1);
+}
+input[type="checkbox"]:not(.ui-switch-input)::before {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(112, 186, 15, 1);
+  width: 0;
+  height: 56px;
+  position: absolute;
+  -webkit-transition: width 150ms;
+}
+input[type="checkbox"]:not(.ui-switch-input):active {
+  background-color: rgba(0, 50, 84, 0.4);
+}
+input[type="checkbox"]:not(.ui-switch-input):active::after {
+  background-color: rgba(245, 245, 245, 0.3);
+}
+input[type="checkbox"]:not(.ui-switch-input):active:checked::before {
+  background-color: rgba(245, 245, 245, 1);
+}
+input[type="radio"] {
+  background-color: rgba(0, 14, 26, 1);
+}
+input[type="radio"]::after {
+  background-color: rgba(245, 245, 245, 0.3);
+}
+input[type="radio"]::before {
+  content: "";
+  background-color: rgba(112, 186, 15, 1);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+  -webkit-transform: scale3d(0, 0, 0);
+  -webkit-transition: -webkit-transform 150ms;
+}
+input[type="radio"]:checked::before {
+  background-color: rgba(112, 186, 15, 1);
+  -webkit-transform: scale3d(1, 1, 1);
+}
+input[type="radio"]:active {
+  background-color: rgba(0, 50, 84, 0.4);
+}
+input[type="radio"]:active:checked::before {
+  background-color: rgba(245, 245, 245, 1);
+}
+/***************************************************************************
+                  button
+***************************************************************************/
+.ui-default {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(2, 56, 92, 1);
+}
+a.ui-default:active:hover,
+.ui-default:enabled:active:hover {
+  background-color: rgba(23, 73, 115, 1);
+}
+.ui-default:enabled:focus {
+  background-color: rgba(2, 56, 92, 1);
+}
+a.ui-default.ui-state-disabled,
+.ui-default:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(3, 44, 64, 1);
+}
+.ui-color-red {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(207, 36, 2, 1);
+}
+a.ui-color-red:active:hover,
+.ui-color-red:enabled:active:hover {
+  background-color: rgba(222, 102, 78, 1);
+}
+.ui-color-red:enabled:focus {
+  background-color: rgba(207, 36, 2, 1);
+}
+a.ui-color-red.ui-state-disabled,
+.ui-color-red:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(69, 11, 1, 1);
+}
+.ui-color-orange {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(237, 134, 0, 1);
+}
+a.ui-color-orange:active:hover,
+.ui-color-orange:enabled:active:hover {
+  background-color: rgba(242, 171, 78, 1);
+}
+.ui-color-orange:enabled:focus {
+  background-color: rgba(237, 134, 0, 1);
+}
+a.ui-color-orange.ui-state-disabled,
+.ui-color-orange:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(69, 39, 5, 1);
+}
+.ui-color-green {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(97, 163, 16, 1);
+}
+a.ui-color-green:active:hover,
+.ui-color-green:enabled:active:hover {
+  background-color: rgba(146, 191, 90, 1);
+}
+.ui-color-green:enabled:focus {
+  background-color: rgba(97, 163, 16, 1);
+}
+a.ui-color-green.ui-state-disabled,
+.ui-color-green:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(50, 54, 48, 1);
+}
+.ui-grid-col-1 > .ui-btn {
+  border-left: solid 1px rgba(8, 8, 8, 1);
+}
+.ui-grid-col-2 > .ui-btn {
+  border-left: solid 1px rgba(8, 8, 8, 1);
+}
+.ui-grid-col-3 > .ui-btn {
+  border-left: solid 1px rgba(8, 8, 8, 1);
+}
+/***************************************************************************
+                  circle progress bar
+***************************************************************************/
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left {
+  border: 0.8125rem solid rgba(204, 223, 237, 1);
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right {
+  border: 0.8125rem solid rgba(204, 223, 237, 1);
+}
+.ui-progressbar .ui-progressbar-bg {
+  border: 0.8125rem solid rgba(64, 64, 64, 1);
+}
+.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-left,
+.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-right {
+  border: 0.3125rem solid rgba(204, 223, 237, 1);
+}
+.ui-progressbar.ui-progressbar-small .ui-progressbar-bg {
+  border: 0.3125rem solid rgba(64, 64, 64, 1);
+}
+/***************************************************************************
+                  circular index scroll bar
+***************************************************************************/
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar {
+  background: -webkit-radial-gradient(center, ellipse cover, transparent 59%, rgba(46, 46, 46, 1) 59%);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index span {
+  color: rgba(84, 84, 84, 1);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span {
+  color: rgba(55, 161, 237, 1);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator {
+  background-color: rgba(54, 54, 54, 0.85);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text {
+  color: rgba(55, 161, 237, 1);
+}
+/***************************************************************************
+                  drawer
+***************************************************************************/
+.ui-drawer {
+  background-color: rgba(8, 8, 8, 1);
+}
+.ui-drawer-overlay {
+  background-color: rgba(8, 8, 8, 0.8);
+}
+/***************************************************************************
+                  marquee
+***************************************************************************/
+.ui-marquee.ui-marquee-gradient::after {
+  background: -webkit-linear-gradient(left, transparent 0%, rgba(8, 8, 8, 1) 100%);
+}
+/***************************************************************************
+                  page indicator
+***************************************************************************/
+.ui-page-indicator-item {
+  background-color: rgba(245, 245, 245, 0.4);
+}
+.ui-page-indicator-item.ui-page-indicator-active {
+  background-color: rgba(245, 245, 245, 1);
+}
+/***************************************************************************
+                  processing
+***************************************************************************/
+.ui-processing {
+  background-color: rgba(55, 161, 237, 1);
+}
+.ui-processing.ui-processing-full-size::after {
+  background-color: rgba(55, 161, 237, 1);
+}
+/***************************************************************************
+                  progress
+***************************************************************************/
+@-webkit-keyframes indeterminate {
+  0% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(55, 161, 237, 1);
+  }
+  25% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(55, 161, 237, 1);
+  }
+  50% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(55, 161, 237, 1);
+  }
+  75% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(55, 161, 237, 1);
+  }
+  100% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(55, 161, 237, 1);
+  }
+}
+progress {
+  color: rgba(245, 245, 245, 1);
+}
+progress::-webkit-progress-bar {
+  background-color: rgba(64, 64, 64, 1);
+}
+progress::-webkit-progress-value {
+  background-color: rgba(204, 223, 237, 1);
+}
+progress.ui-progress-indeterminate::-webkit-progress-bar {
+  background-color: rgba(204, 223, 237, 1);
+}
+.ui-scrollbar-bouncing-effect.ui-top {
+  display: none;
+}
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  width: 100%;
+  height: 6.25rem;
+  left: 0;
+  -webkit-mask-size: 100% 6.25rem;
+}
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  width: 100%;
+  height: 6.25rem;
+  -webkit-mask-size: 100% 6.25rem;
+}
+.ui-scrollbar-bouncing-effect.ui-left,
+.ui-scrollbar-bouncing-effect.ui-right {
+  width: 6.25rem;
+  height: 100%;
+  top: 0;
+  -webkit-mask-size: 6.25rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-left::before,
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  width: 6.25rem;
+  height: 100%;
+  -webkit-mask-size: 6.25rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  bottom: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_bottom_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_bottom_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left {
+  left: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_left_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_left_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right {
+  right: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_right_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_right_edge.png");
+}
+/***************************************************************************
+				   Footer Style (New style)
+***************************************************************************/
+.ui-page .ui-expandable-header {
+  height: 128px;
+}
+.ui-page .ui-expandable-header.ui-header-expand {
+  height: 179px;
+}
+.ui-page .ui-expandable-header.ui-header-expand .ui-title {
+  transform: translate3d(0, 105px, 0);
+}
+.is-circle-test {
+  width: 1px;
+}
diff --git a/lib/tau/wearable/theme/default/tau.circle.min.css b/lib/tau/wearable/theme/default/tau.circle.min.css
new file mode 100644
index 0000000..ff50cad
--- /dev/null
+++ b/lib/tau/wearable/theme/default/tau.circle.min.css
@@ -0,0 +1 @@
+body{background:rgba(8,8,8,1);color:rgba(245,245,245,1)}.ui-header{height:128px;line-height:36px;background-color:rgba(8,8,8,1)}.ui-header .ui-title{color:rgba(0,149,255,1);text-align:center;padding-top:54px;margin-left:2.5rem;margin-right:2.5rem;padding-left:1.5rem;padding-right:1.5rem}.ui-header .ui-title.ui-icon{background:none!important;padding-left:1.5rem}.ui-header.ui-has-more .ui-title{padding-right:1.5rem;-webkit-mask-image:-webkit-linear-gradient(left,#000 80%,rgba(0,0,0,0) 95%)}.ui-header.ui-has-more .ui-more{position:fixed;top:163px;right:8px;width:50px;height:36px}.ui-header.ui-has-more .ui-more.ui-icon-overflow{background-color:rgba(245,245,245,.8)}.ui-page{background:rgba(8,8,8,1)}.ui-page .ui-footer.ui-bottom-button{overflow:hidden}.ui-page .ui-footer.ui-bottom-button .ui-btn{width:112px;height:112px;position:relative;left:50%;transform:translate3d(-50%,0,0);border-radius:50%;text-indent:-9999px;margin-bottom:-22px}.ui-page .ui-footer.ui-bottom-button .ui-btn:only-child::before{left:50%;transform:translate3d(-50%,0,0)}.ui-page .ui-footer.ui-bottom-button .ui-btn::before{content:"";background-color:rgba(245,245,245,1);-webkit-mask-size:3.75rem 3.75rem;-webkit-mask-repeat:no-repeat;width:3.75rem;height:3.75rem;position:absolute;bottom:23px}.ui-page.ui-scroll-on .ui-content{margin-top:7.625rem;margin-bottom:6.125rem;padding-top:0}.ui-page.ui-scroll-on .ui-header~.ui-content{margin-top:0}.ui-page.ui-scroll-on .ui-content~.ui-footer:not(.ui-expandable-footer){margin-top:-5.3125rem}a{color:rgba(245,245,245,1)}.ui-switch-text{margin-top:60px;margin-bottom:48px;font-size:34px;padding:0}.ui-switch-sub-text{margin-top:48px;margin-bottom:55px;font-size:26px;color:rgba(0,149,255,1)}.ui-toggleswitch{width:69px;height:49px}.ui-toggleswitch .ui-switch-input::before{-webkit-mask-image:url(images/Controller_icon/toggle_list_circle.png);-webkit-mask-size:69px;background-color:rgba(51,51,51,1);-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-toggleswitch .ui-switch-input:active::before{-webkit-transition-duration:0;-moz-transition-duration:0;-o-transition-duration:0;-ms-transition-duration:0;transition-duration:0;background-color:rgba(51,51,51,1)}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button{-webkit-transition-duration:0;-moz-transition-duration:0;-o-transition-duration:0;-ms-transition-duration:0;transition-duration:0;background-color:rgba(97,96,96,1)}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button::before{background-color:rgba(173,173,173,1)}.ui-toggleswitch .ui-switch-activation,.ui-toggleswitch .ui-switch-button{width:49px;height:49px;-webkit-mask-image:url(images/Controller_icon/toggle_list_circle.png);-webkit-mask-size:69px;-webkit-mask-position:0 -49px;background-color:rgba(128,128,128,1);-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-toggleswitch .ui-switch-activation::before,.ui-toggleswitch .ui-switch-button::before{-webkit-mask-image:url(images/Controller_icon/toggle_list_circle.png);-webkit-mask-size:69px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 -98px;background-color:rgba(222,222,222,1)}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button{width:49px;height:49px;-webkit-mask-position:0 -49px;background-color:rgba(112,186,15,1);-webkit-transform:translate3d(20px,0,0);-moz-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);-o-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -147px;background-color:rgba(241,242,237,1)}.ui-toggleswitch .ui-switch-input:checked::before{background-color:rgba(43,69,8,1)}.ui-toggleswitch .ui-switch-input:checked:active::before{background-color:rgba(43,69,8,1)}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button{background-color:rgba(71,97,37,1)}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button::before{background-color:rgba(172,173,170,1)}.ui-toggleswitch.ui-toggleswitch-large{width:136px;height:78px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button{width:78px;height:78px;-webkit-mask-image:url(images/Controller_icon/toggle_circle.png);-webkit-mask-size:136px;-webkit-mask-position:0 -78px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before{-webkit-mask-image:url(images/Controller_icon/toggle_circle.png);-webkit-mask-size:136px;-webkit-mask-position:0 -156px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before{-webkit-mask-image:url(images/Controller_icon/toggle_circle.png);-webkit-mask-size:136px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button{width:78px;height:78px;-webkit-mask-position:0 -78px;-webkit-transform:translate3d(58px,0,0);-moz-transform:translate3d(58px,0,0);-ms-transform:translate3d(58px,0,0);-o-transform:translate3d(58px,0,0);transform:translate3d(58px,0,0)}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -234px}.ui-popup{border-radius:50%;overflow:hidden;background-color:rgba(0,17,33,1);border:3px solid rgba(0,149,255,1)}.ui-popup .ui-popup-header{text-align:center;min-height:122px;background-color:rgba(0,17,33,1);color:rgba(0,149,255,1);padding-top:53px;padding-right:61px;padding-bottom:33px;padding-left:61px}.ui-popup .ui-popup-header+.ui-popup-content{padding-top:26px}.ui-popup .ui-popup-content{color:rgba(245,245,245,1);background-color:rgba(0,17,33,1);padding:58px 55px 16px}.ui-popup .ui-popup-content .ui-listview,.ui-popup .ui-popup-content .ui-inline-listview{margin:-1.5625rem -3.4375rem -1rem -3.4375rem}.ui-popup .ui-popup-footer{width:0;height:0}.ui-popup .ui-popup-footer .ui-btn{height:108px;width:108px;border-radius:54px;position:fixed;text-indent:-9999px}.ui-popup .ui-popup-footer .ui-btn.ui-btn-footer-icon::before{content:"";background-color:rgba(245,245,245,1);-webkit-mask-size:48px 48px;-webkit-mask-repeat:no-repeat;width:48px;height:48px;position:absolute}.ui-popup .ui-popup-footer .ui-btn:only-child{top:-53px;left:50%;transform:translate3d(-50%,0,0)}.ui-popup .ui-popup-footer .ui-btn:only-child.ui-btn-footer-icon::before{top:54px;left:50%;transform:translate3d(-50%,0,0)}.ui-popup .ui-popup-footer .ui-btn:active{background-color:rgba(51,170,255,1)}.ui-popup .ui-popup-footer .ui-btn:active.ui-btn-footer-icon::before{background-color:rgba(245,245,245,1)}.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1){top:50%;left:-53px;transform:translate3d(0,-50%,0)}.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1).ui-btn-footer-icon::before{top:50%;left:53px;transform:translate3d(0,-50%,0)}.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2){top:50%;right:-53px;transform:translate3d(0,-50%,0)}.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2).ui-btn-footer-icon::before{top:50%;right:53px;transform:translate3d(0,-50%,0)}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content{margin-top:7.625rem;margin-bottom:6.125rem;padding-top:0}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header+.ui-popup-content{margin-top:0;padding-top:26px}.ui-popup.ui-popup-toast{bottom:2.6875rem;border:3px solid rgba(2,56,92,1);position:fixed;max-height:13.75rem}.ui-popup.ui-popup-toast .ui-popup-content{background-color:rgba(0,17,33,1);padding:13px 40px 12px;font-size:32px;text-align:center;line-height:42px}.ui-popup.ui-ctxpopup{background-color:transparent;left:50%!important;margin-left:-6.28125rem;top:50%!important;margin-top:-6.28125rem;width:12.5625rem}div.ui-popup.ui-ctxpopup.ui-popup-content-size{width:12.5625rem}.ui-popup.ui-ctxpopup.ui-popup-arrow-t,.ui-popup.ui-ctxpopup.ui-popup-arrow-b,.ui-popup.ui-ctxpopup.ui-popup-arrow-r,.ui-popup.ui-ctxpopup.ui-popup-arrow-l{padding:0}.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow>span,.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow>span,.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow>span,.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow>span{background-color:rgba(2,56,92,1);border:0}.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow,.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow{left:5.15625rem!important}.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow,.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow{top:5.84375rem!important}.ui-popup.ui-ctxpopup .ui-popup-content{-webkit-border-radius:50%;-webkit-mask-image:-webkit-radial-gradient(#000 6.28125rem,transparent 0);height:12.5625rem!important;min-height:12.5625rem!important;background-color:rgba(2,56,92,1);border:1px solid rgba(8,8,8,1);padding:0;border:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview{margin:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li{font-size:1.75rem;min-height:6.25rem;text-align:center;line-height:3.625rem;border-bottom:1px solid rgba(8,8,8,1);color:rgba(245,245,245,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a{color:rgba(245,245,245,1);margin:-1.46875rem -1rem;padding:1.46875rem 1rem;min-height:3.3125rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active{color:rgba(245,245,245,1);background-color:rgba(23,73,115,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview{height:initial;overflow:hidden;width:12.5625rem!important;margin:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li{font-size:1.75rem;float:none;min-height:6.25rem;line-height:3.625rem;text-align:center;border-bottom:1px solid rgba(8,8,8,1);border-right:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a{margin:0;padding:0;line-height:6.25rem;color:rgba(245,245,245,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active{color:rgba(245,245,245,1);background-color:rgba(23,73,115,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext{width:100%;height:100%}.ui-listview li{font-size:2.25rem;min-height:6.5625rem;padding:1.78125rem 2.5rem;border-bottom:1px solid rgba(41,41,41,1);color:rgba(245,245,245,1);text-align:center}.ui-listview li>*{color:rgba(245,245,245,1)}.ui-listview li>a{padding:1.78125rem 2.5rem;margin:-1.8125rem -2.5rem}.ui-listview li.ui-li-active{background-color:rgba(8,56,94,1);color:rgba(245,245,245,1)}.ui-listview li:last-child{border:0}.ui-listview .li-divider{height:2.0625rem;min-height:2.0625rem;line-height:1.9375rem;background-color:rgba(31,31,31,1);color:rgba(0,149,255,1);padding:0}.ui-listview .ui-li-sub-text{color:rgba(0,149,255,1)}.ui-header+.ui-content .ui-listview li:first-child{border-top:1px solid rgba(41,41,41,1)}.ui-listview .ui-li-has-action-icon .ui-action-text::after{background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-delete{background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-setting{background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-add{background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active{background-color:rgba(8,56,94,1);color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-delete:active,.ui-listview .ui-li-has-action-icon .ui-action-setting:active,.ui-listview .ui-li-has-action-icon .ui-action-add:active{background-color:rgba(8,56,94,1);color:rgba(245,245,245,1)}input[type=checkbox]:not(.ui-switch-input){background-color:rgba(0,14,26,1)}input[type=checkbox]:not(.ui-switch-input)::after{background-color:rgba(245,245,245,.3)}input[type=checkbox]:not(.ui-switch-input):checked::before{background-color:rgba(112,186,15,1)}input[type=checkbox]:not(.ui-switch-input)::before{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_check_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(112,186,15,1);width:0;height:56px;position:absolute;-webkit-transition:width 150ms}input[type=checkbox]:not(.ui-switch-input):active{background-color:rgba(0,50,84,.4)}input[type=checkbox]:not(.ui-switch-input):active::after{background-color:rgba(245,245,245,.3)}input[type=checkbox]:not(.ui-switch-input):active:checked::before{background-color:rgba(245,245,245,1)}input[type=radio]{background-color:rgba(0,14,26,1)}input[type=radio]::after{background-color:rgba(245,245,245,.3)}input[type=radio]::before{content:"";background-color:rgba(112,186,15,1);-webkit-mask-image:url(images/Controller_icon/tw_btn_radio_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute;-webkit-transform:scale3d(0,0,0);-webkit-transition:-webkit-transform 150ms}input[type=radio]:checked::before{background-color:rgba(112,186,15,1);-webkit-transform:scale3d(1,1,1)}input[type=radio]:active{background-color:rgba(0,50,84,.4)}input[type=radio]:active:checked::before{background-color:rgba(245,245,245,1)}.ui-default{color:rgba(245,245,245,1);background-color:rgba(2,56,92,1)}a.ui-default:active:hover,.ui-default:enabled:active:hover{background-color:rgba(23,73,115,1)}.ui-default:enabled:focus{background-color:rgba(2,56,92,1)}a.ui-default.ui-state-disabled,.ui-default:disabled{color:rgba(245,245,245,.2);background-color:rgba(3,44,64,1)}.ui-color-red{color:rgba(245,245,245,1);background-color:rgba(207,36,2,1)}a.ui-color-red:active:hover,.ui-color-red:enabled:active:hover{background-color:rgba(222,102,78,1)}.ui-color-red:enabled:focus{background-color:rgba(207,36,2,1)}a.ui-color-red.ui-state-disabled,.ui-color-red:disabled{color:rgba(245,245,245,.2);background-color:rgba(69,11,1,1)}.ui-color-orange{color:rgba(245,245,245,1);background-color:rgba(237,134,0,1)}a.ui-color-orange:active:hover,.ui-color-orange:enabled:active:hover{background-color:rgba(242,171,78,1)}.ui-color-orange:enabled:focus{background-color:rgba(237,134,0,1)}a.ui-color-orange.ui-state-disabled,.ui-color-orange:disabled{color:rgba(245,245,245,.2);background-color:rgba(69,39,5,1)}.ui-color-green{color:rgba(245,245,245,1);background-color:rgba(97,163,16,1)}a.ui-color-green:active:hover,.ui-color-green:enabled:active:hover{background-color:rgba(146,191,90,1)}.ui-color-green:enabled:focus{background-color:rgba(97,163,16,1)}a.ui-color-green.ui-state-disabled,.ui-color-green:disabled{color:rgba(245,245,245,.2);background-color:rgba(50,54,48,1)}.ui-grid-col-1>.ui-btn{border-left:solid 1px rgba(8,8,8,1)}.ui-grid-col-2>.ui-btn{border-left:solid 1px rgba(8,8,8,1)}.ui-grid-col-3>.ui-btn{border-left:solid 1px rgba(8,8,8,1)}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left{border:.8125rem solid rgba(204,223,237,1)}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right{border:.8125rem solid rgba(204,223,237,1)}.ui-progressbar .ui-progressbar-bg{border:.8125rem solid rgba(64,64,64,1)}.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-left,.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-right{border:.3125rem solid rgba(204,223,237,1)}.ui-progressbar.ui-progressbar-small .ui-progressbar-bg{border:.3125rem solid rgba(64,64,64,1)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar{background:-webkit-radial-gradient(center,ellipse cover,transparent 59%,rgba(46,46,46,1) 59%)}.ui-circularindexscrollbar .ui-circularindexscrollbar-index span{color:rgba(84,84,84,1)}.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span{color:rgba(55,161,237,1)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator{background-color:rgba(54,54,54,.85)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text{color:rgba(55,161,237,1)}.ui-drawer{background-color:rgba(8,8,8,1)}.ui-drawer-overlay{background-color:rgba(8,8,8,.8)}.ui-marquee.ui-marquee-gradient::after{background:-webkit-linear-gradient(left,transparent 0,rgba(8,8,8,1) 100%)}.ui-page-indicator-item{background-color:rgba(245,245,245,.4)}.ui-page-indicator-item.ui-page-indicator-active{background-color:rgba(245,245,245,1)}.ui-processing{background-color:rgba(55,161,237,1)}.ui-processing.ui-processing-full-size::after{background-color:rgba(55,161,237,1)}@-webkit-keyframes indeterminate{0%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(55,161,237,1)}25%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(55,161,237,1)}50%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(55,161,237,1)}75%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(55,161,237,1)}100%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(55,161,237,1)}}progress{color:rgba(245,245,245,1)}progress::-webkit-progress-bar{background-color:rgba(64,64,64,1)}progress::-webkit-progress-value{background-color:rgba(204,223,237,1)}progress.ui-progress-indeterminate::-webkit-progress-bar{background-color:rgba(204,223,237,1)}.ui-scrollbar-bouncing-effect.ui-top{display:none}.ui-scrollbar-bouncing-effect.ui-bottom{width:100%;height:6.25rem;left:0;-webkit-mask-size:100% 6.25rem}.ui-scrollbar-bouncing-effect.ui-bottom::before{width:100%;height:6.25rem;-webkit-mask-size:100% 6.25rem}.ui-scrollbar-bouncing-effect.ui-left,.ui-scrollbar-bouncing-effect.ui-right{width:6.25rem;height:100%;top:0;-webkit-mask-size:6.25rem 100%}.ui-scrollbar-bouncing-effect.ui-left::before,.ui-scrollbar-bouncing-effect.ui-right::before{width:6.25rem;height:100%;-webkit-mask-size:6.25rem 100%}.ui-scrollbar-bouncing-effect.ui-bottom{bottom:0;-webkit-mask-image:url(images/Scroller/bouncing_circle_bottom_glow.png)}.ui-scrollbar-bouncing-effect.ui-bottom::before{-webkit-mask-image:url(images/Scroller/bouncing_circle_bottom_edge.png)}.ui-scrollbar-bouncing-effect.ui-left{left:0;-webkit-mask-image:url(images/Scroller/bouncing_circle_left_glow.png)}.ui-scrollbar-bouncing-effect.ui-left::before{-webkit-mask-image:url(images/Scroller/bouncing_circle_left_edge.png)}.ui-scrollbar-bouncing-effect.ui-right{right:0;-webkit-mask-image:url(images/Scroller/bouncing_circle_right_glow.png)}.ui-scrollbar-bouncing-effect.ui-right::before{-webkit-mask-image:url(images/Scroller/bouncing_circle_right_edge.png)}.ui-page .ui-expandable-header{height:128px}.ui-page .ui-expandable-header.ui-header-expand{height:179px}.ui-page .ui-expandable-header.ui-header-expand .ui-title{transform:translate3d(0,105px,0)}.is-circle-test{width:1px}
\ No newline at end of file
diff --git a/lib/tau/wearable/theme/default/tau.circle.min.template b/lib/tau/wearable/theme/default/tau.circle.min.template
new file mode 100644
index 0000000..9e76311
--- /dev/null
+++ b/lib/tau/wearable/theme/default/tau.circle.min.template
@@ -0,0 +1 @@
+body{background:B011;color:T011}.ui-header{height:128px;line-height:36px;background-color:B011}.ui-header .ui-title{color:T012;text-align:center;padding-top:54px;margin-left:2.5rem;margin-right:2.5rem;padding-left:1.5rem;padding-right:1.5rem}.ui-header .ui-title.ui-icon{background:none!important;padding-left:1.5rem}.ui-header.ui-has-more .ui-title{padding-right:1.5rem;-webkit-mask-image:-webkit-linear-gradient(left,#000 80%,rgba(0,0,0,0) 95%)}.ui-header.ui-has-more .ui-more{position:fixed;top:163px;right:8px;width:50px;height:36px}.ui-header.ui-has-more .ui-more.ui-icon-overflow{background-color:B052L1}.ui-page{background:B011}.ui-page .ui-footer.ui-bottom-button{overflow:hidden}.ui-page .ui-footer.ui-bottom-button .ui-btn{width:112px;height:112px;position:relative;left:50%;transform:translate3d(-50%,0,0);border-radius:50%;text-indent:-9999px;margin-bottom:-22px}.ui-page .ui-footer.ui-bottom-button .ui-btn:only-child::before{left:50%;transform:translate3d(-50%,0,0)}.ui-page .ui-footer.ui-bottom-button .ui-btn::before{content:"";background-color:F022L1i;-webkit-mask-size:3.75rem 3.75rem;-webkit-mask-repeat:no-repeat;width:3.75rem;height:3.75rem;position:absolute;bottom:23px}.ui-page.ui-scroll-on .ui-content{margin-top:7.625rem;margin-bottom:6.125rem;padding-top:0}.ui-page.ui-scroll-on .ui-header~.ui-content{margin-top:0}.ui-page.ui-scroll-on .ui-content~.ui-footer:not(.ui-expandable-footer){margin-top:-5.3125rem}a{color:T011}.ui-switch-text{margin-top:60px;margin-bottom:48px;font-size:34px;padding:0}.ui-switch-sub-text{margin-top:48px;margin-bottom:55px;font-size:26px;color:T161}.ui-toggleswitch{width:69px;height:49px}.ui-toggleswitch .ui-switch-input::before{-webkit-mask-image:url(images/Controller_icon/toggle_list_circle.png);-webkit-mask-size:69px;background-color:W014L2;-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-toggleswitch .ui-switch-input:active::before{-webkit-transition-duration:0;-moz-transition-duration:0;-o-transition-duration:0;-ms-transition-duration:0;transition-duration:0;background-color:W014L2P}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button{-webkit-transition-duration:0;-moz-transition-duration:0;-o-transition-duration:0;-ms-transition-duration:0;transition-duration:0;background-color:W014L4P}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button::before{background-color:W014L6P}.ui-toggleswitch .ui-switch-activation,.ui-toggleswitch .ui-switch-button{width:49px;height:49px;-webkit-mask-image:url(images/Controller_icon/toggle_list_circle.png);-webkit-mask-size:69px;-webkit-mask-position:0 -49px;background-color:W014L4;-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-toggleswitch .ui-switch-activation::before,.ui-toggleswitch .ui-switch-button::before{-webkit-mask-image:url(images/Controller_icon/toggle_list_circle.png);-webkit-mask-size:69px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 -98px;background-color:W014L6}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button{width:49px;height:49px;-webkit-mask-position:0 -49px;background-color:W014L3;-webkit-transform:translate3d(20px,0,0);-moz-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);-o-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -147px;background-color:W014L5}.ui-toggleswitch .ui-switch-input:checked::before{background-color:W014L1}.ui-toggleswitch .ui-switch-input:checked:active::before{background-color:W014L1P}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button{background-color:W014L3P}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button::before{background-color:W014L5P}.ui-toggleswitch.ui-toggleswitch-large{width:136px;height:78px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button{width:78px;height:78px;-webkit-mask-image:url(images/Controller_icon/toggle_circle.png);-webkit-mask-size:136px;-webkit-mask-position:0 -78px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before{-webkit-mask-image:url(images/Controller_icon/toggle_circle.png);-webkit-mask-size:136px;-webkit-mask-position:0 -156px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before{-webkit-mask-image:url(images/Controller_icon/toggle_circle.png);-webkit-mask-size:136px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button{width:78px;height:78px;-webkit-mask-position:0 -78px;-webkit-transform:translate3d(58px,0,0);-moz-transform:translate3d(58px,0,0);-ms-transform:translate3d(58px,0,0);-o-transform:translate3d(58px,0,0);transform:translate3d(58px,0,0)}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -234px}.ui-popup{border-radius:50%;overflow:hidden;background-color:B061L1E;border:3px solid B061L8}.ui-popup .ui-popup-header{text-align:center;min-height:122px;background-color:B061L1E;color:T091;padding-top:53px;padding-right:61px;padding-bottom:33px;padding-left:61px}.ui-popup .ui-popup-header+.ui-popup-content{padding-top:26px}.ui-popup .ui-popup-content{color:T092;background-color:B061L1E;padding:58px 55px 16px}.ui-popup .ui-popup-content .ui-listview,.ui-popup .ui-popup-content .ui-inline-listview{margin:-1.5625rem -3.4375rem -1rem -3.4375rem}.ui-popup .ui-popup-footer{width:0;height:0}.ui-popup .ui-popup-footer .ui-btn{height:108px;width:108px;border-radius:54px;position:fixed;text-indent:-9999px}.ui-popup .ui-popup-footer .ui-btn.ui-btn-footer-icon::before{content:"";background-color:F022L1i;-webkit-mask-size:48px 48px;-webkit-mask-repeat:no-repeat;width:48px;height:48px;position:absolute}.ui-popup .ui-popup-footer .ui-btn:only-child{top:-53px;left:50%;transform:translate3d(-50%,0,0)}.ui-popup .ui-popup-footer .ui-btn:only-child.ui-btn-footer-icon::before{top:54px;left:50%;transform:translate3d(-50%,0,0)}.ui-popup .ui-popup-footer .ui-btn:active{background-color:B065L4P}.ui-popup .ui-popup-footer .ui-btn:active.ui-btn-footer-icon::before{background-color:F022L1iP}.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1){top:50%;left:-53px;transform:translate3d(0,-50%,0)}.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1).ui-btn-footer-icon::before{top:50%;left:53px;transform:translate3d(0,-50%,0)}.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2){top:50%;right:-53px;transform:translate3d(0,-50%,0)}.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2).ui-btn-footer-icon::before{top:50%;right:53px;transform:translate3d(0,-50%,0)}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content{margin-top:7.625rem;margin-bottom:6.125rem;padding-top:0}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header+.ui-popup-content{margin-top:0;padding-top:26px}.ui-popup.ui-popup-toast{bottom:2.6875rem;border:3px solid B061L7;position:fixed;max-height:13.75rem}.ui-popup.ui-popup-toast .ui-popup-content{background-color:B061L1E;padding:13px 40px 12px;font-size:32px;text-align:center;line-height:42px}.ui-popup.ui-ctxpopup{background-color:transparent;left:50%!important;margin-left:-6.28125rem;top:50%!important;margin-top:-6.28125rem;width:12.5625rem}div.ui-popup.ui-ctxpopup.ui-popup-content-size{width:12.5625rem}.ui-popup.ui-ctxpopup.ui-popup-arrow-t,.ui-popup.ui-ctxpopup.ui-popup-arrow-b,.ui-popup.ui-ctxpopup.ui-popup-arrow-r,.ui-popup.ui-ctxpopup.ui-popup-arrow-l{padding:0}.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow>span,.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow>span,.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow>span,.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow>span{background-color:W011;border:0}.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow,.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow{left:5.15625rem!important}.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow,.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow{top:5.84375rem!important}.ui-popup.ui-ctxpopup .ui-popup-content{-webkit-border-radius:50%;-webkit-mask-image:-webkit-radial-gradient(#000 6.28125rem,transparent 0);height:12.5625rem!important;min-height:12.5625rem!important;background-color:W011;border:1px solid B2112;padding:0;border:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview{margin:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li{font-size:1.75rem;min-height:6.25rem;text-align:center;line-height:3.625rem;border-bottom:1px solid B212;color:T181}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a{color:T181;margin:-1.46875rem -1rem;padding:1.46875rem 1rem;min-height:3.3125rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active{color:T181P;background-color:B2111P}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview{height:initial;overflow:hidden;width:12.5625rem!important;margin:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li{font-size:1.75rem;float:none;min-height:6.25rem;line-height:3.625rem;text-align:center;border-bottom:1px solid B212;border-right:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a{margin:0;padding:0;line-height:6.25rem;color:T181}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active{color:T181P;background-color:B2111P}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext{width:100%;height:100%}.ui-listview li{font-size:2.25rem;min-height:6.5625rem;padding:1.78125rem 2.5rem;border-bottom:1px solid B0222;color:T0211;text-align:center}.ui-listview li>*{color:T0211}.ui-listview li>a{padding:1.78125rem 2.5rem;margin:-1.8125rem -2.5rem}.ui-listview li.ui-li-active{background-color:B041P;color:T0211P}.ui-listview li:last-child{border:0}.ui-listview .li-divider{height:2.0625rem;min-height:2.0625rem;line-height:1.9375rem;background-color:B012;color:T0231;padding:0}.ui-listview .ui-li-sub-text{color:T022}.ui-header+.ui-content .ui-listview li:first-child{border-top:1px solid B0222}.ui-listview .ui-li-has-action-icon .ui-action-text::after{background-color:T011}.ui-listview .ui-li-has-action-icon .ui-action-delete{background-color:F022L1i}.ui-listview .ui-li-has-action-icon .ui-action-setting{background-color:F022L1i}.ui-listview .ui-li-has-action-icon .ui-action-add{background-color:F022L1i}.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active{background-color:B041P;color:T0211P}.ui-listview .ui-li-has-action-icon .ui-action-delete:active,.ui-listview .ui-li-has-action-icon .ui-action-setting:active,.ui-listview .ui-li-has-action-icon .ui-action-add:active{background-color:B041P;color:T0211P}input[type=checkbox]:not(.ui-switch-input){background-color:W012L1}input[type=checkbox]:not(.ui-switch-input)::after{background-color:W231}input[type=checkbox]:not(.ui-switch-input):checked::before{background-color:W012L2}input[type=checkbox]:not(.ui-switch-input)::before{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_check_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:W012L2;width:0;height:56px;position:absolute;-webkit-transition:width 150ms}input[type=checkbox]:not(.ui-switch-input):active{background-color:W012L1P}input[type=checkbox]:not(.ui-switch-input):active::after{background-color:W231P}input[type=checkbox]:not(.ui-switch-input):active:checked::before{background-color:W012L2P}input[type=radio]{background-color:W013L1}input[type=radio]::after{background-color:W241}input[type=radio]::before{content:"";background-color:W013L2;-webkit-mask-image:url(images/Controller_icon/tw_btn_radio_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute;-webkit-transform:scale3d(0,0,0);-webkit-transition:-webkit-transform 150ms}input[type=radio]:checked::before{background-color:W013L2;-webkit-transform:scale3d(1,1,1)}input[type=radio]:active{background-color:W013L1P}input[type=radio]:active:checked::before{background-color:W013L2P}.ui-default{color:T041;background-color:W011}a.ui-default:active:hover,.ui-default:enabled:active:hover{background-color:W011P}.ui-default:enabled:focus{background-color:W011}a.ui-default.ui-state-disabled,.ui-default:disabled{color:T041D;background-color:W011D}.ui-color-red{color:T041;background-color:W012}a.ui-color-red:active:hover,.ui-color-red:enabled:active:hover{background-color:W012P}.ui-color-red:enabled:focus{background-color:W012}a.ui-color-red.ui-state-disabled,.ui-color-red:disabled{color:T041D;background-color:W012D}.ui-color-orange{color:T041;background-color:W013}a.ui-color-orange:active:hover,.ui-color-orange:enabled:active:hover{background-color:W013P}.ui-color-orange:enabled:focus{background-color:W013}a.ui-color-orange.ui-state-disabled,.ui-color-orange:disabled{color:T041D;background-color:W013D}.ui-color-green{color:T041;background-color:W014}a.ui-color-green:active:hover,.ui-color-green:enabled:active:hover{background-color:W014P}.ui-color-green:enabled:focus{background-color:W014}a.ui-color-green.ui-state-disabled,.ui-color-green:disabled{color:T041D;background-color:W014D}.ui-grid-col-1>.ui-btn{border-left:solid 1px B011}.ui-grid-col-2>.ui-btn{border-left:solid 1px B011}.ui-grid-col-3>.ui-btn{border-left:solid 1px B011}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left{border:.8125rem solid B065L2}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right{border:.8125rem solid B065L2}.ui-progressbar .ui-progressbar-bg{border:.8125rem solid B065L3}.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-left,.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-right{border:.3125rem solid B065L2}.ui-progressbar.ui-progressbar-small .ui-progressbar-bg{border:.3125rem solid B065L3}.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar{background:-webkit-radial-gradient(center,ellipse cover,transparent 59%,B0722 59%)}.ui-circularindexscrollbar .ui-circularindexscrollbar-index span{color:T0311}.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span{color:T0311P}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator{background-color:B0731}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text{color:T0312P}.ui-drawer{background-color:B011}.ui-drawer-overlay{background-color:B0511D}.ui-marquee.ui-marquee-gradient::after{background:-webkit-linear-gradient(left,transparent 0,B0211 100%)}.ui-page-indicator-item{background-color:T0211D}.ui-page-indicator-item.ui-page-indicator-active{background-color:W1911}.ui-processing{background-color:B065L6}.ui-processing.ui-processing-full-size::after{background-color:B065L6}@-webkit-keyframes indeterminate{0%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}25%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}50%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}75%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}100%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}}progress{color:T011}progress::-webkit-progress-bar{background-color:B065L3}progress::-webkit-progress-value{background-color:B065L2}progress.ui-progress-indeterminate::-webkit-progress-bar{background-color:B065L2}.ui-scrollbar-bouncing-effect.ui-top{display:none}.ui-scrollbar-bouncing-effect.ui-bottom{width:100%;height:6.25rem;left:0;-webkit-mask-size:100% 6.25rem}.ui-scrollbar-bouncing-effect.ui-bottom::before{width:100%;height:6.25rem;-webkit-mask-size:100% 6.25rem}.ui-scrollbar-bouncing-effect.ui-left,.ui-scrollbar-bouncing-effect.ui-right{width:6.25rem;height:100%;top:0;-webkit-mask-size:6.25rem 100%}.ui-scrollbar-bouncing-effect.ui-left::before,.ui-scrollbar-bouncing-effect.ui-right::before{width:6.25rem;height:100%;-webkit-mask-size:6.25rem 100%}.ui-scrollbar-bouncing-effect.ui-bottom{bottom:0;-webkit-mask-image:url(images/Scroller/bouncing_circle_bottom_glow.png)}.ui-scrollbar-bouncing-effect.ui-bottom::before{-webkit-mask-image:url(images/Scroller/bouncing_circle_bottom_edge.png)}.ui-scrollbar-bouncing-effect.ui-left{left:0;-webkit-mask-image:url(images/Scroller/bouncing_circle_left_glow.png)}.ui-scrollbar-bouncing-effect.ui-left::before{-webkit-mask-image:url(images/Scroller/bouncing_circle_left_edge.png)}.ui-scrollbar-bouncing-effect.ui-right{right:0;-webkit-mask-image:url(images/Scroller/bouncing_circle_right_glow.png)}.ui-scrollbar-bouncing-effect.ui-right::before{-webkit-mask-image:url(images/Scroller/bouncing_circle_right_edge.png)}.ui-page .ui-expandable-header{height:128px}.ui-page .ui-expandable-header.ui-header-expand{height:179px}.ui-page .ui-expandable-header.ui-header-expand .ui-title{transform:translate3d(0,105px,0)}.is-circle-test{width:1px}
\ No newline at end of file
diff --git a/lib/tau/wearable/theme/default/tau.circle.template b/lib/tau/wearable/theme/default/tau.circle.template
new file mode 100644
index 0000000..5d87f4b
--- /dev/null
+++ b/lib/tau/wearable/theme/default/tau.circle.template
@@ -0,0 +1,913 @@
+/***************************************************************************
+                  Body
+***************************************************************************/
+/***************************************************************************
+                   Action Bar
+***************************************************************************/
+/****************************************************************************
+               Circle Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Processing
+****************************************************************************/
+/***************************************************************************
+                   Buttons
+***************************************************************************/
+/***************************************************************************
+                   Popup
+***************************************************************************/
+/***************************************************************************
+                   Footer
+***************************************************************************/
+/***************************************************************************
+                   Toast Popup
+***************************************************************************/
+/***************************************************************************
+                   Option Popup
+***************************************************************************/
+/***************************************************************************
+                  circular index scrollbar
+***************************************************************************/
+/***************************************************************************
+                  Listview
+***************************************************************************/
+/****************************************************************************
+               Listview with Marquee
+****************************************************************************/
+/***************************************************************************
+                   Checkbox/Radio
+***************************************************************************/
+/***************************************************************************
+						Page Indicator
+***************************************************************************/
+/****************************************************************************
+		Toggle Switch
+****************************************************************************/
+/***************************************************************************
+                   Scroller
+***************************************************************************/
+/***************************************************************************
+                   More options
+***************************************************************************/
+/************************************************************************/
+/*                           fixedUIStyle.less                          */
+/************************************************************************/
+/* When system font-size is changed, winset size (ex. header, footer, button, etc,
+   include font) also changed. But in UX guide, some UI elements should have fixed
+   size regardless of system font size.
+   So, this less file supports fixed style for some elements.
+   - Layout: header, footer, button
+   - Popup : popup header, popup footer
+   - toggleswitch
+   - progress: text for ratio
+*/
+/***********************************************************************/
+/*                         Layout(FIXED)                               */
+/***********************************************************************/
+/**********************************************************************/
+/*                       Popup(FIXED)                                 */
+/**********************************************************************/
+/**********************************************************************/
+/*                      ToggleSwitch(FIXED)                           */
+/**********************************************************************/
+/************************
+Listview
+*************************/
+/***************************************************************************
+                   Common Style
+
+***************************************************************************/
+/***************************************************************************
+                   Development Tip
+  If you want to implement specific css code of circle device,
+  you should implement specific code here.
+  But when you implement code, you should check duplicate value
+  between common/layout.less and this file.
+  If you have duplicate value, please change static value to variable value.
+***************************************************************************/
+body {
+  background: B011;
+  color: T011;
+}
+.ui-header {
+  height: 128px;
+  line-height: 36px;
+  background-color: B011;
+}
+.ui-header .ui-title {
+  color: T012;
+  text-align: center;
+  padding-top: 54px;
+  margin-left: 2.5rem;
+  margin-right: 2.5rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+.ui-header .ui-title.ui-icon {
+  background: none !important;
+  padding-left: 1.5rem;
+}
+.ui-header.ui-has-more .ui-title {
+  padding-right: 1.5rem;
+  -webkit-mask-image: -webkit-linear-gradient(left, #000000 80%, rgba(0, 0, 0, 0) 95%);
+}
+.ui-header.ui-has-more .ui-more {
+  position: fixed;
+  top: 163px;
+  right: 8px;
+  width: 50px;
+  height: 36px;
+}
+.ui-header.ui-has-more .ui-more.ui-icon-overflow {
+  background-color: B052L1;
+}
+.ui-page {
+  background: B011;
+}
+.ui-page .ui-footer.ui-bottom-button {
+  overflow: hidden;
+}
+.ui-page .ui-footer.ui-bottom-button .ui-btn {
+  width: 112px;
+  height: 112px;
+  position: relative;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+  border-radius: 50%;
+  text-indent: -9999px;
+  margin-bottom: -22px;
+}
+.ui-page .ui-footer.ui-bottom-button .ui-btn:only-child::before {
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-page .ui-footer.ui-bottom-button .ui-btn::before {
+  content: "";
+  background-color: F022L1i;
+  -webkit-mask-size: 3.75rem 3.75rem;
+  -webkit-mask-repeat: no-repeat;
+  width: 3.75rem;
+  height: 3.75rem;
+  position: absolute;
+  bottom: 23px;
+}
+/***************************************************************************
+                   Page Scroll
+***************************************************************************/
+.ui-page.ui-scroll-on .ui-content {
+  margin-top: 7.625rem;
+  margin-bottom: 6.125rem;
+  padding-top: 0;
+}
+.ui-page.ui-scroll-on .ui-header ~ .ui-content {
+  margin-top: 0;
+}
+.ui-page.ui-scroll-on .ui-content ~ .ui-footer:not(.ui-expandable-footer) {
+  margin-top: -5.3125rem;
+}
+/*
+ * Common definition for theme
+ */
+/***************************************************************
+   default font size (base font from WRT)
+   => small: 13px
+   => normal: 17px
+   => large: 20px
+
+This is only applied to gear2.
+so, we set @font_size_default as 17px on gear2 and it was changed to 16px since gear-S.
+This value only used for @rem_base, not for html font-size
+html font-size is set by WRT base font-size
+***************************************************************/
+a {
+  color: T011;
+}
+/***************************************************************************
+                  toggle switch
+***************************************************************************/
+.ui-switch-text {
+  margin-top: 60px;
+  margin-bottom: 48px;
+  font-size: 34px;
+  padding: 0;
+}
+.ui-switch-sub-text {
+  margin-top: 48px;
+  margin-bottom: 55px;
+  font-size: 26px;
+  color: T161;
+}
+.ui-toggleswitch {
+  width: 69px;
+  height: 49px;
+}
+.ui-toggleswitch .ui-switch-input::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_list_circle.png);
+  -webkit-mask-size: 69px;
+  background-color: W014L2;
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-toggleswitch .ui-switch-input:active::before {
+  -webkit-transition-duration: 0;
+  -moz-transition-duration: 0;
+  -o-transition-duration: 0;
+  -ms-transition-duration: 0;
+  transition-duration: 0;
+  background-color: W014L2P;
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button {
+  -webkit-transition-duration: 0;
+  -moz-transition-duration: 0;
+  -o-transition-duration: 0;
+  -ms-transition-duration: 0;
+  transition-duration: 0;
+  background-color: W014L4P;
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button::before {
+  background-color: W014L6P;
+}
+.ui-toggleswitch .ui-switch-activation,
+.ui-toggleswitch .ui-switch-button {
+  width: 49px;
+  height: 49px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_list_circle.png);
+  -webkit-mask-size: 69px;
+  -webkit-mask-position: 0 -49px;
+  background-color: W014L4;
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-toggleswitch .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-button::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_list_circle.png);
+  -webkit-mask-size: 69px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 -98px;
+  background-color: W014L6;
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button {
+  width: 49px;
+  height: 49px;
+  -webkit-mask-position: 0 -49px;
+  background-color: W014L3;
+  -webkit-transform: translate3d(20px, 0, 0);
+  -moz-transform: translate3d(20px, 0, 0);
+  -ms-transform: translate3d(20px, 0, 0);
+  -o-transform: translate3d(20px, 0, 0);
+  transform: translate3d(20px, 0, 0);
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -147px;
+  background-color: W014L5;
+}
+.ui-toggleswitch .ui-switch-input:checked::before {
+  background-color: W014L1;
+}
+.ui-toggleswitch .ui-switch-input:checked:active::before {
+  background-color: W014L1P;
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button {
+  background-color: W014L3P;
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button::before {
+  background-color: W014L5P;
+}
+.ui-toggleswitch.ui-toggleswitch-large {
+  width: 136px;
+  height: 78px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button {
+  width: 78px;
+  height: 78px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_circle.png);
+  -webkit-mask-size: 136px;
+  -webkit-mask-position: 0 -78px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_circle.png);
+  -webkit-mask-size: 136px;
+  -webkit-mask-position: 0 -156px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_circle.png);
+  -webkit-mask-size: 136px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button {
+  width: 78px;
+  height: 78px;
+  -webkit-mask-position: 0 -78px;
+  -webkit-transform: translate3d(58px, 0, 0);
+  -moz-transform: translate3d(58px, 0, 0);
+  -ms-transform: translate3d(58px, 0, 0);
+  -o-transform: translate3d(58px, 0, 0);
+  transform: translate3d(58px, 0, 0);
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -234px;
+}
+/***************************************************************************
+                  popup
+***************************************************************************/
+/***********************
+Normal Popup
+***********************/
+.ui-popup {
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: B061L1E;
+  border: 3px solid B061L8;
+}
+.ui-popup .ui-popup-header {
+  text-align: center;
+  min-height: 122px;
+  background-color: B061L1E;
+  color: T091;
+  padding-top: 53px;
+  padding-right: 61px;
+  padding-bottom: 33px;
+  padding-left: 61px;
+}
+.ui-popup .ui-popup-header + .ui-popup-content {
+  padding-top: 26px;
+}
+.ui-popup .ui-popup-content {
+  color: T092;
+  background-color: B061L1E;
+  padding: 58px 55px 16px 55px;
+}
+.ui-popup .ui-popup-content .ui-listview,
+.ui-popup .ui-popup-content .ui-inline-listview {
+  margin: -1.5625rem -3.4375rem -1rem -3.4375rem;
+}
+.ui-popup .ui-popup-footer {
+  width: 0;
+  height: 0;
+}
+.ui-popup .ui-popup-footer .ui-btn {
+  height: 108px;
+  width: 108px;
+  border-radius: 54px;
+  position: fixed;
+  text-indent: -9999px;
+}
+.ui-popup .ui-popup-footer .ui-btn.ui-btn-footer-icon::before {
+  content: "";
+  background-color: F022L1i;
+  -webkit-mask-size: 48px 48px;
+  -webkit-mask-repeat: no-repeat;
+  width: 48px;
+  height: 48px;
+  position: absolute;
+}
+.ui-popup .ui-popup-footer .ui-btn:only-child {
+  top: -53px;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:only-child.ui-btn-footer-icon::before {
+  top: 54px;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:active {
+  background-color: B065L4P;
+}
+.ui-popup .ui-popup-footer .ui-btn:active.ui-btn-footer-icon::before {
+  background-color: F022L1iP;
+}
+.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1) {
+  top: 50%;
+  left: -53px;
+  transform: translate3d(0, -50%, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(1).ui-btn-footer-icon::before {
+  top: 50%;
+  left: 53px;
+  transform: translate3d(0, -50%, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2) {
+  top: 50%;
+  right: -53px;
+  transform: translate3d(0, -50%, 0);
+}
+.ui-popup .ui-popup-footer .ui-btn:not(:only-child):nth-child(2).ui-btn-footer-icon::before {
+  top: 50%;
+  right: 53px;
+  transform: translate3d(0, -50%, 0);
+}
+/***********************
+Popup Container Scroll
+***********************/
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content {
+  margin-top: 7.625rem;
+  margin-bottom: 6.125rem;
+  padding-top: 0;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header + .ui-popup-content {
+  margin-top: 0;
+  padding-top: 26px;
+}
+/****************************************
+Popup Toast
+****************************************/
+.ui-popup.ui-popup-toast {
+  bottom: 2.6875rem;
+  border: 3px solid B061L7;
+  position: fixed;
+  max-height: 13.75rem;
+}
+.ui-popup.ui-popup-toast .ui-popup-content {
+  background-color: B061L1E;
+  padding: 13px 40px 12px;
+  font-size: 32px;
+  text-align: center;
+  line-height: 42px;
+}
+/***********************
+Option Popup
+***********************/
+.ui-popup.ui-ctxpopup {
+  background-color: transparent;
+  left: 50% !important;
+  margin-left: -6.28125rem;
+  top: 50% !important;
+  margin-top: -6.28125rem;
+  width: 12.5625rem;
+}
+div.ui-popup.ui-ctxpopup.ui-popup-content-size {
+  width: 12.5625rem;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l {
+  padding: 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow > span,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow > span,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow > span,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow > span {
+  background-color: W011;
+  border: 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow {
+  left: 5.15625rem !important;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow,
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow {
+  top: 5.84375rem !important;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content {
+  -webkit-border-radius: 50%;
+  -webkit-mask-image: -webkit-radial-gradient(#000000 6.28125rem, transparent 0);
+  height: 12.5625rem !important;
+  min-height: 12.5625rem !important;
+  background-color: W011;
+  border: 1px solid B2112;
+  padding: 0;
+  border: 0;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview {
+  margin: 0;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li {
+  font-size: 1.75rem;
+  min-height: 6.25rem;
+  text-align: center;
+  line-height: 3.625rem;
+  border-bottom: 1px solid B212;
+  color: T181;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a {
+  color: T181;
+  margin: -1.46875rem -1rem;
+  padding: 1.46875rem 1rem;
+  min-height: 3.3125rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active {
+  color: T181P;
+  background-color: B2111P;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview {
+  height: initial;
+  overflow: hidden;
+  width: 12.5625rem !important;
+  margin: 0;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li {
+  font-size: 1.75rem;
+  float: none;
+  min-height: 6.25rem;
+  line-height: 3.625rem;
+  text-align: center;
+  border-bottom: 1px solid B212;
+  border-right: 0;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a {
+  margin: 0;
+  padding: 0;
+  line-height: 6.25rem;
+  color: T181;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active {
+  color: T181P;
+  background-color: B2111P;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext {
+  width: 100%;
+  height: 100%;
+}
+/***************************************************************************
+                  listview
+***************************************************************************/
+.ui-listview li {
+  font-size: 2.25rem;
+  min-height: 6.5625rem;
+  padding: 1.78125rem 2.5rem;
+  border-bottom: 1px solid B0222;
+  color: T0211;
+  text-align: center;
+}
+.ui-listview li > * {
+  color: T0211;
+}
+.ui-listview li > a {
+  padding: 1.78125rem 2.5rem;
+  margin: -1.8125rem -2.5rem;
+}
+.ui-listview li.ui-li-active {
+  background-color: B041P;
+  color: T0211P;
+}
+.ui-listview li:last-child {
+  border: 0;
+}
+.ui-listview .li-divider {
+  height: 2.0625rem;
+  min-height: 2.0625rem;
+  line-height: 1.9375rem;
+  background-color: B012;
+  color: T0231;
+  padding: 0;
+}
+.ui-listview .ui-li-sub-text {
+  color: T022;
+}
+.ui-header + .ui-content .ui-listview li:first-child {
+  border-top: 1px solid B0222;
+}
+/***************************************************************************
+                  listview extra
+***************************************************************************/
+.ui-listview .ui-li-has-action-icon .ui-action-text::after {
+  background-color: T011;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete {
+  background-color: F022L1i;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-setting {
+  background-color: F022L1i;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-add {
+  background-color: F022L1i;
+}
+.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active {
+  background-color: B041P;
+  color: T0211P;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete:active,
+.ui-listview .ui-li-has-action-icon .ui-action-setting:active,
+.ui-listview .ui-li-has-action-icon .ui-action-add:active {
+  background-color: B041P;
+  color: T0211P;
+}
+/***************************************************************************
+                  checkbox / radio button
+***************************************************************************/
+input[type="checkbox"]:not(.ui-switch-input) {
+  background-color: W012L1;
+}
+input[type="checkbox"]:not(.ui-switch-input)::after {
+  background-color: W231;
+}
+input[type="checkbox"]:not(.ui-switch-input):checked::before {
+  background-color: W012L2;
+}
+input[type="checkbox"]:not(.ui-switch-input)::before {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: W012L2;
+  width: 0;
+  height: 56px;
+  position: absolute;
+  -webkit-transition: width 150ms;
+}
+input[type="checkbox"]:not(.ui-switch-input):active {
+  background-color: W012L1P;
+}
+input[type="checkbox"]:not(.ui-switch-input):active::after {
+  background-color: W231P;
+}
+input[type="checkbox"]:not(.ui-switch-input):active:checked::before {
+  background-color: W012L2P;
+}
+input[type="radio"] {
+  background-color: W013L1;
+}
+input[type="radio"]::after {
+  background-color: W241;
+}
+input[type="radio"]::before {
+  content: "";
+  background-color: W013L2;
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+  -webkit-transform: scale3d(0, 0, 0);
+  -webkit-transition: -webkit-transform 150ms;
+}
+input[type="radio"]:checked::before {
+  background-color: W013L2;
+  -webkit-transform: scale3d(1, 1, 1);
+}
+input[type="radio"]:active {
+  background-color: W013L1P;
+}
+input[type="radio"]:active:checked::before {
+  background-color: W013L2P;
+}
+/***************************************************************************
+                  button
+***************************************************************************/
+.ui-default {
+  color: T041;
+  background-color: W011;
+}
+a.ui-default:active:hover,
+.ui-default:enabled:active:hover {
+  background-color: W011P;
+}
+.ui-default:enabled:focus {
+  background-color: W011;
+}
+a.ui-default.ui-state-disabled,
+.ui-default:disabled {
+  color: T041D;
+  background-color: W011D;
+}
+.ui-color-red {
+  color: T041;
+  background-color: W012;
+}
+a.ui-color-red:active:hover,
+.ui-color-red:enabled:active:hover {
+  background-color: W012P;
+}
+.ui-color-red:enabled:focus {
+  background-color: W012;
+}
+a.ui-color-red.ui-state-disabled,
+.ui-color-red:disabled {
+  color: T041D;
+  background-color: W012D;
+}
+.ui-color-orange {
+  color: T041;
+  background-color: W013;
+}
+a.ui-color-orange:active:hover,
+.ui-color-orange:enabled:active:hover {
+  background-color: W013P;
+}
+.ui-color-orange:enabled:focus {
+  background-color: W013;
+}
+a.ui-color-orange.ui-state-disabled,
+.ui-color-orange:disabled {
+  color: T041D;
+  background-color: W013D;
+}
+.ui-color-green {
+  color: T041;
+  background-color: W014;
+}
+a.ui-color-green:active:hover,
+.ui-color-green:enabled:active:hover {
+  background-color: W014P;
+}
+.ui-color-green:enabled:focus {
+  background-color: W014;
+}
+a.ui-color-green.ui-state-disabled,
+.ui-color-green:disabled {
+  color: T041D;
+  background-color: W014D;
+}
+.ui-grid-col-1 > .ui-btn {
+  border-left: solid 1px B011;
+}
+.ui-grid-col-2 > .ui-btn {
+  border-left: solid 1px B011;
+}
+.ui-grid-col-3 > .ui-btn {
+  border-left: solid 1px B011;
+}
+/***************************************************************************
+                  circle progress bar
+***************************************************************************/
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left {
+  border: 0.8125rem solid B065L2;
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right {
+  border: 0.8125rem solid B065L2;
+}
+.ui-progressbar .ui-progressbar-bg {
+  border: 0.8125rem solid B065L3;
+}
+.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-left,
+.ui-progressbar.ui-progressbar-small .ui-progressbar-value .ui-progressbar-value-right {
+  border: 0.3125rem solid B065L2;
+}
+.ui-progressbar.ui-progressbar-small .ui-progressbar-bg {
+  border: 0.3125rem solid B065L3;
+}
+/***************************************************************************
+                  circular index scroll bar
+***************************************************************************/
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar {
+  background: -webkit-radial-gradient(center, ellipse cover, transparent 59%, B0722 59%);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index span {
+  color: T0311;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span {
+  color: T0311P;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator {
+  background-color: B0731;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text {
+  color: T0312P;
+}
+/***************************************************************************
+                  drawer
+***************************************************************************/
+.ui-drawer {
+  background-color: B011;
+}
+.ui-drawer-overlay {
+  background-color: B0511D;
+}
+/***************************************************************************
+                  marquee
+***************************************************************************/
+.ui-marquee.ui-marquee-gradient::after {
+  background: -webkit-linear-gradient(left, transparent 0%, B0211 100%);
+}
+/***************************************************************************
+                  page indicator
+***************************************************************************/
+.ui-page-indicator-item {
+  background-color: T0211D;
+}
+.ui-page-indicator-item.ui-page-indicator-active {
+  background-color: W1911;
+}
+/***************************************************************************
+                  processing
+***************************************************************************/
+.ui-processing {
+  background-color: B065L6;
+}
+.ui-processing.ui-processing-full-size::after {
+  background-color: B065L6;
+}
+/***************************************************************************
+                  progress
+***************************************************************************/
+@-webkit-keyframes indeterminate {
+  0% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+  25% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+  50% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+  75% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+  100% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+}
+progress {
+  color: T011;
+}
+progress::-webkit-progress-bar {
+  background-color: B065L3;
+}
+progress::-webkit-progress-value {
+  background-color: B065L2;
+}
+progress.ui-progress-indeterminate::-webkit-progress-bar {
+  background-color: B065L2;
+}
+.ui-scrollbar-bouncing-effect.ui-top {
+  display: none;
+}
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  width: 100%;
+  height: 6.25rem;
+  left: 0;
+  -webkit-mask-size: 100% 6.25rem;
+}
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  width: 100%;
+  height: 6.25rem;
+  -webkit-mask-size: 100% 6.25rem;
+}
+.ui-scrollbar-bouncing-effect.ui-left,
+.ui-scrollbar-bouncing-effect.ui-right {
+  width: 6.25rem;
+  height: 100%;
+  top: 0;
+  -webkit-mask-size: 6.25rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-left::before,
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  width: 6.25rem;
+  height: 100%;
+  -webkit-mask-size: 6.25rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  bottom: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_bottom_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_bottom_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left {
+  left: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_left_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_left_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right {
+  right: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_right_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_circle_right_edge.png");
+}
+/***************************************************************************
+				   Footer Style (New style)
+***************************************************************************/
+.ui-page .ui-expandable-header {
+  height: 128px;
+}
+.ui-page .ui-expandable-header.ui-header-expand {
+  height: 179px;
+}
+.ui-page .ui-expandable-header.ui-header-expand .ui-title {
+  transform: translate3d(0, 105px, 0);
+}
+.is-circle-test {
+  width: 1px;
+}
diff --git a/lib/tau/wearable/theme/default/tau.css b/lib/tau/wearable/theme/default/tau.css
new file mode 100644
index 0000000..4571b63
--- /dev/null
+++ b/lib/tau/wearable/theme/default/tau.css
@@ -0,0 +1,3005 @@
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/***************************************************************************
+                  Body
+***************************************************************************/
+/***************************************************************************
+                   Action Bar
+***************************************************************************/
+/****************************************************************************
+               Circle Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Processing
+****************************************************************************/
+/****************************************************************************
+		Toggle Switch
+****************************************************************************/
+/***************************************************************************
+                   Buttons
+***************************************************************************/
+/***************************************************************************
+                   Popup
+***************************************************************************/
+/***************************************************************************
+                   Option Popup
+***************************************************************************/
+/***************************************************************************
+                  index scrollbar (vertical)
+***************************************************************************/
+/***************************************************************************
+                  circular index scrollbar
+***************************************************************************/
+/***************************************************************************
+                  Listview
+***************************************************************************/
+/****************************************************************************
+               Listview with Marquee
+****************************************************************************/
+/***************************************************************************
+                   Scroller
+***************************************************************************/
+/***************************************************************************
+                   Swipe list
+***************************************************************************/
+/***************************************************************************
+                   Checkbox/Radio
+***************************************************************************/
+/***************************************************************************
+						Page Indicator
+***************************************************************************/
+/************************************************************************/
+/*                           fixedUIStyle.less                          */
+/************************************************************************/
+/* When system font-size is changed, winset size (ex. header, footer, button, etc,
+   include font) also changed. But in UX guide, some UI elements should have fixed
+   size regardless of system font size.
+   So, this less file supports fixed style for some elements.
+   - Layout: header, footer, button
+   - Popup : popup header, popup footer
+   - toggleswitch
+   - progress: text for ratio
+*/
+/***********************************************************************/
+/*                         Layout(FIXED)                               */
+/***********************************************************************/
+/**********************************************************************/
+/*                        Button(FIXED)                               */
+/**********************************************************************/
+/**********************************************************************/
+/*                       Popup(FIXED)                                 */
+/**********************************************************************/
+/**********************************************************************/
+/*                      ToggleSwitch(FIXED)                           */
+/**********************************************************************/
+/*********************************************************************/
+/*                     Progress(FIXED)                               */
+/*********************************************************************/
+/************************
+Listview
+*************************/
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+/*
+ * default outline set none
+ */
+* {
+  outline: none;
+}
+/*
+ * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+  display: block;
+}
+/*
+ * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+audio,
+canvas,
+video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+/*
+ * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
+ * and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+[hidden] {
+  display: none;
+}
+/* ==========================================================================
+   Base
+   ========================================================================== */
+/*
+ * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+ *	`em` units.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ *	user zoom.
+ */
+html {
+  font-size: 100%;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+}
+/*
+ * Addresses `font-family` inconsistency between `textarea` and other form
+ * elements.
+ */
+html,
+button,
+input,
+select,
+textarea {
+  font-family: Tizen, Samsung Sans, Helvetica;
+}
+/*
+ * Addresses margins handled incorrectly in IE 6/7.
+ */
+body {
+  margin: 0;
+}
+/* ==========================================================================
+   Links
+   ========================================================================== */
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+/*
+ * Addresses font sizes and margins set differently in IE 6/7.
+ * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
+ * and Chrome.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+h3 {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+h4 {
+  font-size: 1em;
+  margin: 1.33em 0;
+}
+h5 {
+  font-size: 0.83em;
+  margin: 1.67em 0;
+}
+h6 {
+  font-size: 0.75em;
+  margin: 2.33em 0;
+}
+/*
+ * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
+ */
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+/*
+ * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+ */
+b,
+strong {
+  font-weight: bold;
+}
+blockquote {
+  margin: 1em 40px;
+}
+/*
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+dfn {
+  font-style: italic;
+}
+/*
+ * Addresses styling not present in IE 6/7/8/9.
+ */
+mark {
+  background: #ff0;
+  color: #000;
+}
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+p,
+pre {
+  margin: 1em 0;
+}
+/*
+ * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+/*
+ * Addresses CSS quotes not supported in IE 6/7.
+ */
+q {
+  quotes: none;
+}
+/*
+ * Addresses `quotes` property not supported in Safari 4.
+ */
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+small {
+  font-size: 75%;
+}
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+/* ==========================================================================
+   Lists
+   ========================================================================== */
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+dl,
+menu,
+ol,
+ul {
+  margin: 1em 0;
+}
+dd {
+  margin: 0 0 0 40px;
+}
+/*
+ * Addresses paddings set differently in IE 6/7.
+ */
+menu,
+ol,
+ul {
+  padding: 0 0 0 40px;
+}
+/*
+ * Corrects list images handled incorrectly in IE 7.
+ */
+nav ul,
+nav ol {
+  list-style: none;
+  list-style-image: none;
+}
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+/*
+ * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improves image quality when scaled in IE 7.
+ */
+img {
+  border: 0;
+  /* 1 */
+  -ms-interpolation-mode: bicubic;
+  /* 2 */
+}
+/*
+ * Corrects overflow displayed oddly in IE 9.
+ */
+svg:not(:root) {
+  overflow: hidden;
+}
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+/*
+ * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+figure {
+  margin: 0;
+}
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+/*
+ * Corrects margin displayed oddly in IE 6/7.
+ */
+form {
+  margin: 0;
+}
+/*
+ * Define consistent border, margin, and padding.
+ */
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+/*
+ * 1. Corrects color not being inherited in IE 6/7/8/9.
+ * 2. Corrects text not wrapping in Firefox 3.
+ * 3. Corrects alignment displayed oddly in IE 6/7.
+ */
+legend {
+  border: 0;
+  /* 1 */
+  padding: 0;
+  white-space: normal;
+  /* 2 */
+  *margin-left: -7px;
+  /* 3 */
+}
+/*
+ * 1. Corrects font size not being inherited in all browsers.
+ * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *	and Chrome.
+ * 3. Improves appearance and consistency in all browsers.
+ */
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  vertical-align: baseline;
+  /* 3 */
+  *vertical-align: middle;
+  /* 3 */
+}
+/*
+ * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+button,
+input {
+  line-height: normal;
+}
+/*
+ * Re-set default cursor for disabled elements.
+ */
+button[disabled],
+input[disabled] {
+  cursor: default;
+}
+input[type="time"],
+input[type="date"] {
+  color: #000000;
+}
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *	(include `-moz` to future-proof).
+ */
+input[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  /* 2 */
+  box-sizing: content-box;
+}
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+/*
+ * Removes inner padding and border in Firefox 3+.
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+/*
+ * 1. Removes default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+textarea {
+  overflow: auto;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+}
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+/*
+ * Remove most spacing between table cells.
+ */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/*
+ * Common definition for theme
+ */
+/***************************************************************
+   default font size (base font from WRT)
+   => small: 13px
+   => normal: 17px
+   => large: 20px
+
+This is only applied to gear2.
+so, we set @font_size_default as 17px on gear2 and it was changed to 16px since gear-S.
+This value only used for @rem_base, not for html font-size
+html font-size is set by WRT base font-size
+***************************************************************/
+/******************************
+  z-index order collection
+ ******************************/
+/***************************************************************************
+                   Common Style
+***************************************************************************/
+.screen-hidden {
+  visibility: hidden;
+  position: absolute;
+  top: -10000em;
+  left: -10000em;
+}
+/***************************************************************************
+                   Default Style.
+***************************************************************************/
+button,
+input {
+  outline: none;
+  cursor: pointer;
+}
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none !important;
+  color: rgba(245, 245, 245, 1);
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+img {
+  margin: 0;
+  padding: 0;
+}
+/******************************
+  Global LESS mixin collection
+ ******************************/
+/***************************************************************************
+                   Common Style
+***************************************************************************/
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+  height: 100%;
+  font-size: 2.125rem;
+  font-family: Tizen, Samsung Sans, Helvetica;
+  background: rgba(8, 8, 8, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(8, 8, 8, 1);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /* overrides webkit link color */
+}
+.ui-page.ui-page-active {
+  display: block;
+}
+.ui-page.ui-page-build {
+  display: block;
+  visibility: hidden;
+}
+.scrolling-mode-touch {
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-content {
+  width: auto;
+  height: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-header {
+  position: relative;
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  background-color: rgba(0, 31, 56, 1);
+}
+.ui-header .ui-title {
+  color: rgba(116, 196, 252, 1);
+  font-size: 32px;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  margin: 0px;
+  padding-left: 16px;
+  padding-right: 16px;
+  -webkit-mask-image: -webkit-linear-gradient(left, #000000 80%, rgba(0, 0, 0, 0) 95%);
+}
+.ui-header .ui-title.ui-icon {
+  padding-left: 60px;
+  background-position: 16px 14px;
+  background-size: 34px 34px;
+  background-repeat: no-repeat;
+}
+.ui-header.ui-has-more .ui-title {
+  padding-right: 78px;
+  -webkit-mask-image: -webkit-linear-gradient(left, #000000 70%, rgba(0, 0, 0, 0) 75%);
+}
+.ui-header button.ui-more,
+.ui-header input.ui-more {
+  border: 0 none;
+  padding: 0;
+}
+.ui-header .ui-more-disable {
+  cursor: default;
+  background-color: transparent;
+}
+.ui-header .ui-more {
+  display: block;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 68px;
+  height: 100%;
+  overflow: hidden;
+  text-indent: -1000em;
+  background-position: center center;
+  background-color: transparent;
+  cursor: pointer;
+}
+.ui-header .ui-more:active {
+  background-color: rgba(23, 73, 115, 1) !important;
+}
+.ui-header .ui-more.ui-icon-detail {
+  background-color: rgba(116, 196, 252, 1);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-detail[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: rgba(116, 196, 252, 0.2);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-overflow {
+  background-color: rgba(116, 196, 252, 1);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position-x: 0.9375rem;
+  -webkit-mask-position-y: 50%;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-overflow[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: rgba(116, 196, 252, 0.2);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-selectall {
+  background-color: rgba(116, 196, 252, 1);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-selectall[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: rgba(116, 196, 252, 0.2);
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-footer {
+  width: 100%;
+  height: 85px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+/***************************************************************************
+                   Page Scroll
+***************************************************************************/
+.ui-page.ui-scroll-on {
+  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-page.ui-scroll-on .ui-content {
+  height: auto !important;
+}
+.ui-page.ui-scroll-on .ui-footer {
+  position: relative;
+}
+.ui-header.ui-fixed {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+}
+.ui-footer.ui-fixed {
+  position: fixed !important;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  -webkit-transform: translate3d(0, 0, 0);
+}
+/***************************************************************************
+                   Grid layout
+***************************************************************************/
+.ui-grid-col > * {
+  float: left;
+}
+.ui-page .ui-grid-col-1 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-1 > * {
+  width: 100%;
+}
+.ui-page .ui-grid-col-2 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-2 > * {
+  width: 50%;
+}
+.ui-page .ui-grid-col-3 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-3 > * {
+  width: 33.333333333333336%;
+}
+.ui-grid-row > * {
+  display: block;
+}
+/*
+ * Progressbar
+ */
+@-webkit-keyframes indeterminate {
+  0% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(0, 77, 153, 1);
+  }
+  25% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(0, 77, 153, 1);
+  }
+  50% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(0, 77, 153, 1);
+  }
+  75% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(0, 77, 153, 1);
+  }
+  100% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: rgba(0, 77, 153, 1);
+  }
+}
+progress {
+  position: relative;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: 0.875rem;
+  margin-bottom: 0.875rem;
+  color: rgba(245, 245, 245, 1);
+  width: 100%;
+  height: 0.375rem;
+  -webkit-appearance: none;
+  border: none;
+}
+progress::-webkit-progress-bar {
+  position: relative;
+  background-color: rgba(71, 71, 71, 1);
+  border-radius: 0.125rem;
+  overflow: hidden;
+}
+progress::-webkit-progress-value {
+  background-color: rgba(55, 161, 237, 1);
+  height: 0.375rem;
+  border-radius: 0.125rem;
+  overflow: hidden;
+}
+progress.ui-progress-indeterminate::-webkit-progress-bar {
+  background-color: rgba(55, 161, 237, 1);
+}
+progress.ui-progress-indeterminate::-webkit-progress-value {
+  background-size: 100% 100%;
+  -webkit-animation: indeterminate 150ms infinite;
+}
+.ui-progress-proportion {
+  display: inline-block;
+  float: left;
+  font-size: 20px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: -0.625rem;
+}
+.ui-progress-ratio {
+  display: inline-block;
+  float: right;
+  font-size: 20px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: -0.625rem;
+}
+.ui-circle-progress {
+  display: none;
+}
+.ui-progressbar.ui-progressbar-full {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.ui-progressbar.ui-progressbar-large {
+  width: 6.25rem;
+  height: 6.25rem;
+}
+.ui-progressbar.ui-progressbar-medium {
+  width: 5.25rem;
+  height: 5.25rem;
+}
+.ui-progressbar.ui-progressbar-small {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+.ui-progressbar {
+  position: relative;
+  display: inline-block;
+  pointer-events: none;
+}
+.ui-progressbar .ui-progressbar-value.ui-progressbar-half {
+  clip: rect(auto, auto, auto, auto);
+}
+.ui-progressbar .ui-progressbar-value.ui-progressbar-half .ui-progressbar-value-right {
+  -webkit-transform: rotate(180deg);
+}
+.ui-progressbar .ui-progressbar-value {
+  clip: rect(0, 1em, 1em, 0.5em);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left {
+  border: 0.5rem solid rgba(55, 161, 237, 1);
+  border-radius: 50%;
+  clip: rect(0, 0.5em, 1em, 0);
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right {
+  border: 0.5rem solid rgba(55, 161, 237, 1);
+  border-radius: 50%;
+  clip: rect(0, 0.5em, 1em, 0);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-bg {
+  border: 0.5rem solid rgba(71, 71, 71, 1);
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+}
+/*
+ * toggle switch
+ */
+.ui-switch {
+  width: 100%;
+  color: rgba(245, 245, 245, 1);
+}
+.ui-switch-inneroffset,
+.ui-switch-handler {
+  display: none;
+}
+.ui-switch-text {
+  margin-top: 30px;
+  margin-bottom: 40px;
+  padding: 0 30px;
+  font-size: 34px;
+  text-align: center;
+}
+.ui-switch-sub-text {
+  margin-top: 48px;
+  margin-bottom: 55px;
+  font-size: 26px;
+  text-align: center;
+  color: T161;
+}
+.ui-toggleswitch {
+  position: relative;
+  display: inline-block;
+  width: 92px;
+  height: 49px;
+}
+.ui-toggleswitch .ui-switch-input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-appearance: none;
+  display: block;
+}
+.ui-toggleswitch .ui-switch-input::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 0;
+  background-color: rgba(97, 96, 96, 1);
+  z-index: 0;
+}
+.ui-toggleswitch .ui-switch-input:active::before {
+  background-color: rgba(97, 96, 96, 1);
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button {
+  background-color: rgba(173, 173, 173, 1);
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button::before {
+  background-color: rgba(97, 96, 96, 1);
+}
+.ui-toggleswitch .ui-switch-activation,
+.ui-toggleswitch .ui-switch-button {
+  width: 59px;
+  height: 49px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 -49px;
+  background-color: rgba(245, 245, 245, 1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+.ui-toggleswitch .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-button::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 -98px;
+  background-color: rgba(128, 128, 128, 1);
+  top: 0;
+  left: 0;
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button {
+  width: 59px;
+  height: 49px;
+  -webkit-mask-position: 0 -49px;
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-transform: translate3d(33px, 0, 0);
+  -moz-transform: translate3d(33px, 0, 0);
+  -ms-transform: translate3d(33px, 0, 0);
+  -o-transform: translate3d(33px, 0, 0);
+  transform: translate3d(33px, 0, 0);
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -147px;
+  background-color: rgba(112, 186, 15, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked::before {
+  background-color: rgba(112, 186, 15, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active::before {
+  background-color: rgba(71, 97, 37, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button {
+  background-color: rgba(173, 173, 173, 1);
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button::before {
+  background-color: rgba(71, 97, 37, 1);
+}
+.ui-toggleswitch.ui-toggleswitch-large {
+  width: 207px;
+  height: 110px;
+  display: block;
+  margin: 0 auto;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button {
+  width: 132px;
+  height: 110px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 207px;
+  -webkit-mask-position: 0 -110px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-position: 0 -220px;
+  -webkit-mask-size: 207px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 207px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button {
+  width: 132px;
+  height: 110px;
+  -webkit-mask-position: 0 -110px;
+  -webkit-transform: translate3d(75px, 0, 0);
+  -moz-transform: translate3d(75px, 0, 0);
+  -ms-transform: translate3d(75px, 0, 0);
+  -o-transform: translate3d(75px, 0, 0);
+  transform: translate3d(75px, 0, 0);
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -330px;
+}
+/***********************
+Processing
+***********************/
+@-webkit-keyframes rotating {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+.ui-processing {
+  background-color: rgba(0, 123, 255, 1);
+  -webkit-mask-image: url("images/Processing/tw_progress_small_loading_bg.png");
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-animation: rotating 1s linear infinite;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin: 0 auto;
+  margin-top: 2.125rem;
+  margin-bottom: 0.875rem;
+}
+.ui-processing-text {
+  margin: 0 auto;
+  text-align: center;
+  width: 10.5rem;
+  font-size: 1.5rem;
+}
+.ui-processing.ui-processing-full-size {
+  background-color: transparent;
+  -webkit-mask-image: none;
+  -webkit-animation: none;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  margin: 0;
+}
+.ui-processing.ui-processing-full-size::after {
+  content: "";
+  background-color: rgba(55, 161, 237, 1);
+  -webkit-mask-image: url("images/Processing/tw_progress_full_loading_bg.png");
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-animation: rotating 1s linear infinite;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-btn {
+  display: block;
+  padding-top: 28.5px;
+  padding-right: 10px;
+  padding-bottom: 28.5px;
+  padding-left: 10px;
+  margin: 0px;
+  font-size: 32px;
+  line-height: 28px;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  border: 0 none;
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(2, 56, 92, 1);
+}
+a.ui-btn:active:hover,
+.ui-btn:enabled:active:hover {
+  background-color: rgba(23, 73, 115, 1);
+}
+.ui-btn:enabled:focus {
+  background-color: rgba(2, 56, 92, 1);
+}
+a.ui-btn.ui-state-disabled,
+.ui-btn:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(3, 44, 64, 1);
+  cursor: default;
+}
+.ui-btn.ui-multiline {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.ui-btn.ui-inline {
+  display: inline-block;
+}
+.ui-btn.ui-btn-icon {
+  background-position: center center;
+  height: 76px;
+  text-indent: -1000em;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  background-size: 60px 60px;
+}
+.ui-default {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(2, 56, 92, 1);
+}
+a.ui-default:active:hover,
+.ui-default:enabled:active:hover {
+  background-color: rgba(23, 73, 115, 1);
+}
+.ui-default:enabled:focus {
+  background-color: rgba(2, 56, 92, 1);
+}
+a.ui-default.ui-state-disabled,
+.ui-default:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(3, 44, 64, 1);
+  cursor: default;
+}
+.ui-color-red {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(207, 36, 2, 1);
+}
+a.ui-color-red:active:hover,
+.ui-color-red:enabled:active:hover {
+  background-color: rgba(222, 102, 78, 1);
+}
+.ui-color-red:enabled:focus {
+  background-color: rgba(207, 36, 2, 1);
+}
+a.ui-color-red.ui-state-disabled,
+.ui-color-red:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(69, 11, 1, 1);
+  cursor: default;
+}
+.ui-color-orange {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(237, 134, 0, 1);
+}
+a.ui-color-orange:active:hover,
+.ui-color-orange:enabled:active:hover {
+  background-color: rgba(242, 171, 78, 1);
+}
+.ui-color-orange:enabled:focus {
+  background-color: rgba(237, 134, 0, 1);
+}
+a.ui-color-orange.ui-state-disabled,
+.ui-color-orange:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(69, 39, 5, 1);
+  cursor: default;
+}
+.ui-color-green {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(97, 163, 16, 1);
+}
+a.ui-color-green:active:hover,
+.ui-color-green:enabled:active:hover {
+  background-color: rgba(146, 191, 90, 1);
+}
+.ui-color-green:enabled:focus {
+  background-color: rgba(97, 163, 16, 1);
+}
+a.ui-color-green.ui-state-disabled,
+.ui-color-green:disabled {
+  color: rgba(245, 245, 245, 0.2);
+  background-color: rgba(50, 54, 48, 1);
+  cursor: default;
+}
+.ui-btn:focus,
+.ui-btn:active {
+  outline: none;
+}
+a.ui-btn {
+  text-decoration: none;
+  box-sizing: border-box;
+}
+button.ui-btn,
+input.ui-btn {
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 100%;
+}
+button.ui-btn.ui-inline,
+input.ui-btn.ui-inline {
+  display: inline-block;
+  width: auto;
+}
+.ui-grid-col-1 > .ui-btn {
+  border-left: solid 1px rgba(8, 8, 8, 1);
+}
+.ui-grid-col-1 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-col-2 > .ui-btn {
+  border-left: solid 1px rgba(8, 8, 8, 1);
+}
+.ui-grid-col-2 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-col-3 > .ui-btn {
+  border-left: solid 1px rgba(8, 8, 8, 1);
+}
+.ui-grid-col-3 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-row > .ui-btn {
+  margin-top: 1px;
+}
+.ui-grid-row > .ui-btn:first-child {
+  margin-top: 0px;
+}
+/***********************
+Normal Popup
+***********************/
+.ui-popup {
+  position: fixed;
+  left: 0px;
+  width: 100%;
+  margin: 0;
+  background-color: rgba(0, 17, 33, 1);
+  border: 3px solid rgba(0, 55, 92, 1);
+  display: none;
+  z-index: 1100;
+}
+.ui-popup:not(.ui-ctxpopup) {
+  bottom: 0;
+}
+.ui-popup .ui-popup-header {
+  width: 100%;
+  min-height: 68px;
+  font-size: 30px;
+  text-align: left;
+  background-color: rgba(5, 42, 71, 1);
+  color: rgba(116, 196, 252, 1);
+  padding-top: 14px;
+  padding-right: 13px;
+  padding-bottom: 14px;
+  padding-left: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ui-popup .ui-popup-content {
+  width: 100%;
+  min-height: 14rem;
+  font-size: 2.125rem;
+  text-align: left;
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(0, 17, 33, 1);
+  padding: 10px 16px 9px 16px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-popup .ui-popup-content .ui-listview,
+.ui-popup .ui-popup-content .ui-inline-listview {
+  margin: -0.5625rem -1rem -0.5625rem -1rem;
+}
+.ui-popup .ui-popup-content .ui-listview li,
+.ui-popup .ui-popup-content .ui-inline-listview li {
+  font-size: 2.125rem;
+}
+.ui-popup .ui-popup-footer {
+  width: 100%;
+  height: 83px;
+}
+.ui-popup .ui-popup-footer .ui-btn {
+  padding-top: 27px;
+  padding-bottom: 28px;
+  font-size: 30px;
+}
+.ui-popup.ui-popup-active {
+  display: block;
+}
+.ui-popup.in {
+  display: block;
+}
+.ui-popup.ui-build {
+  display: block;
+  visibility: hidden;
+}
+/***********************
+Popup Container Scroll
+***********************/
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) {
+  max-height: 100%;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-wrapper {
+  width: 100%;
+  max-height: 100%;
+  overflow: auto !important;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content {
+  height: auto !important;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header.ui-fixed {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2100;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-footer.ui-fixed {
+  position: absolute !important;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2100;
+  -webkit-transform: translate3d(0, 0, 0);
+}
+/***********************
+Option Popup
+***********************/
+.ui-popup.ui-ctxpopup {
+  background-color: transparent;
+  width: 100%;
+  border: 0 none;
+  border-radius: 0;
+  overflow: visible;
+}
+div.ui-popup.ui-ctxpopup.ui-popup-content-size {
+  width: auto;
+  padding: 0 0 0 0;
+}
+div.ui-popup.ui-ctxpopup.ui-popup-content-size .ui-popup-content {
+  width: auto;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content {
+  background-color: rgba(245, 245, 245, 1);
+  border: 1px solid rgba(112, 112, 112, 0.9);
+  color: #333;
+  min-height: initial;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li {
+  color: rgba(8, 8, 8, 1);
+  border-bottom: 1px solid rgba(204, 204, 204, 1);
+  min-height: 90px;
+  padding: 21px 8px 20px 16px;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a {
+  color: rgba(8, 8, 8, 1);
+  margin: -21px -16px;
+  padding: 21px 16px;
+  min-height: 48px;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(19, 99, 145, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li:last-child {
+  border: none;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon {
+  position: relative;
+  padding-left: 4.25rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon a {
+  margin-left: -4.25rem;
+  padding-left: 4.25rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0.375rem;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-top: -1.75rem;
+  background-color: rgba(99, 99, 99, 0.9);
+  -webkit-mask-size: 3.5rem 3.5rem;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  mask-size: 3.5rem 3.5rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview a.ui-list-icon:active::before {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview {
+  height: 4.3125rem;
+  overflow: hidden;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li {
+  float: left;
+  height: 4.1875rem;
+  line-height: 4.1875rem;
+  border-right: 1px solid rgba(8, 8, 8, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li:last-child {
+  border: none;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0rem 0.5rem;
+  color: rgba(8, 8, 8, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active {
+  color: rgba(245, 245, 245, 1);
+  background-color: rgba(19, 99, 145, 1);
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext {
+  width: 3.6875rem;
+  height: 4.1875rem;
+  text-indent: -1000em;
+  overflow: hidden;
+  position: relative;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2.6875rem;
+  height: 2.6875rem;
+  margin-top: -1.34375rem;
+  margin-left: -1.34375rem;
+  background-color: rgba(8, 8, 8, 1);
+  -webkit-mask-size: 2.6875rem 2.6875rem;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: 2.6875rem 2.6875rem;
+  mask-repeat: no-repeat;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview a.ui-list-icon-notext:active::before {
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-popup.ui-ctxpopup .ui-arrow {
+  width: 36px;
+  height: 15px;
+  overflow: hidden;
+  position: absolute;
+  display: none;
+  animation-duration: 0;
+  -webkit-animation-duration: 0;
+}
+.ui-popup.ui-ctxpopup .ui-arrow span {
+  width: 20px;
+  height: 20px;
+  background-color: rgba(245, 245, 245, 1);
+  border: 1px solid rgba(112, 112, 112, 0.9);
+  position: absolute;
+  top: 6px;
+  left: 8px;
+  -webkit-transform: rotate(55deg) skew(24deg);
+  transform: rotate(55deg) skew(24deg);
+  animation-duration: 0;
+  -webkit-animation-duration: 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b {
+  padding: 20px 20px 0 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t {
+  padding: 0 20px 20px 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r {
+  padding: 20px 0 20px 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l {
+  padding: 20px 20px 20px 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow {
+  display: block;
+  bottom: -0.875rem;
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow {
+  display: block;
+  top: -14px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow {
+  display: block;
+  right: -25px;
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow {
+  display: block;
+  left: -25px;
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+/****************************************
+Popup Toast
+****************************************/
+.ui-popup.ui-popup-toast {
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  font-size: 1.5rem;
+  border: 3px solid rgba(0, 55, 92, 1);
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+  position: absolute;
+  bottom: 0;
+  top: auto;
+  height: auto;
+}
+.ui-popup.ui-popup-toast .ui-popup-content {
+  min-height: initial;
+  padding: 0.6875rem 2.625rem 0.75rem 2.625rem;
+  background-color: rgba(0, 17, 33, 1);
+}
+/****************************************
+Popup Overlay
+****************************************/
+.ui-popup-overlay {
+  position: fixed;
+  display: none;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: rgba(8, 8, 8, 0.7);
+}
+.ui-popup-overlay.in {
+  display: block;
+}
+/****************************************
+Popup Transition
+****************************************/
+.ui-popup.slideup.in {
+  -webkit-animation-name: popupslideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popupslideinfrombottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.slideup.out {
+  -webkit-animation-name: popupslideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popupslideouttobottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes popupslideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes popupslideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@-webkit-keyframes popupslideouttobottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@keyframes popupslideouttobottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+.ui-popup.pop.in {
+  -webkit-animation-name: popuppopin;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popuppopin;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.pop.out {
+  -webkit-animation-name: popuppopout;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popuppopout;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes popuppopin {
+  from {
+    transform: scale3d(0, 0, 1);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+@-webkit-keyframes popuppopout {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(0, 0, 1);
+  }
+}
+/****************************************
+Popup Overlay Transition
+****************************************/
+.ui-popup-overlay.slideup.in,
+.ui-popup-overlay.pop.in {
+  -webkit-animation-name: fadein;
+  -webkit-animation-duration: 250ms;
+  animation-name: fadein;
+  animation-duration: 250ms;
+}
+.ui-popup-overlay.slideup.out,
+.ui-popup-overlay.pop.out {
+  -webkit-animation-name: fadeout;
+  -webkit-animation-duration: 250ms;
+  animation-name: fadeout;
+  animation-duration: 250ms;
+}
+/****************************************
+Option Popup Transition
+****************************************/
+.ui-popup.ui-popup-arrow-t.slideup.in,
+.ui-popup.ui-popup-arrow-l.slideup.in,
+.ui-popup.ui-popup-arrow-r.slideup.in {
+  -webkit-animation-name: ctxpopupslideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideinfrombottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-t.slideup.out,
+.ui-popup.ui-popup-arrow-l.slideup.out,
+.ui-popup.ui-popup-arrow-r.slideup.out {
+  -webkit-animation-name: ctxpopupslideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideouttobottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-b.slideup.in {
+  -webkit-animation-name: ctxpopupslideinfromtop;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideinfromtop;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-b.slideup.out {
+  -webkit-animation-name: ctxpopupslideouttotop;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideouttotop;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes ctxpopupslideinfrombottom {
+  from {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@keyframes ctxpopupslideinfrombottom {
+  from {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideouttobottom {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+}
+@keyframes ctxpopupslideouttobottom {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideinfromtop {
+  from {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@keyframes ctxpopupslideinfromtop {
+  from {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideouttotop {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+}
+@keyframes ctxpopupslideouttotop {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+}
+/************************
+Listview
+*************************/
+.ui-listview li {
+  font-size: 2.5rem;
+  line-height: 3rem;
+  width: 100%;
+  min-height: 6.25rem;
+  padding: 1.3125rem 0.5rem 1.25rem 1rem;
+  border-bottom: 1px solid rgba(56, 56, 56, 1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview li > * {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-user-select: none;
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview li > a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: -1.3125rem -1rem;
+  padding: 1.625rem 1rem;
+  -o-box-sizing: content-box;
+  -ms-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.ui-listview li.ui-li-active {
+  background-color: rgba(8, 56, 94, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview .li-divider {
+  height: 1.875rem;
+  min-height: 1.875rem;
+  line-height: 1.875rem;
+  padding: 0 0.5rem 0 1rem;
+  background-color: rgba(29, 72, 105, 1);
+  color: rgba(151, 197, 230, 1);
+  font-size: 1.5rem;
+}
+.ui-listview .ui-li-sub-text {
+  color: rgba(85, 135, 171, 1);
+  font-size: 1.75rem;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-text {
+  width: calc(100% -  4.8125rem);
+  height: 100%;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-text::after {
+  content: "";
+  position: absolute;
+  height: 3.5rem;
+  width: 0.125rem;
+  background-color: rgba(245, 245, 245, 1);
+  right: 4.25rem;
+  top: 20%;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-divider {
+  display: none;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete,
+.ui-listview .ui-li-has-action-icon .ui-action-setting,
+.ui-listview .ui-li-has-action-icon .ui-action-add {
+  position: absolute;
+  height: 100%;
+  width: 4.5rem;
+  right: 0;
+  top: 0;
+  -webkit-mask-size: 3.5rem 3.5rem;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center center;
+  padding: 0;
+  margin: 0;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete {
+  -webkit-mask-image: url(images/listview/tw_list_delete_holo_dark.png);
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-setting {
+  -webkit-mask-image: url(images/listview/tw_list_setting_holo_dark.png);
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-add {
+  -webkit-mask-image: url(images/listview/tw_list_add_holo_dark.png);
+  background-color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon.ui-li-active {
+  background-color: transparent;
+}
+.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active {
+  background-color: rgba(8, 56, 94, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete:active,
+.ui-listview .ui-li-has-action-icon .ui-action-setting:active,
+.ui-listview .ui-li-has-action-icon .ui-action-add:active {
+  background-color: rgba(8, 56, 94, 1);
+  color: rgba(245, 245, 245, 1);
+}
+.ui-datetime-widget {
+  position: relative;
+  height: 100%;
+}
+.ui-datetime {
+  text-align: center;
+  padding-top: 56px;
+}
+.ui-time-picker .ui-datetime {
+  padding-top: 53px;
+}
+.ui-datetime:only-child {
+  padding-top: 92px;
+}
+.ui-time-picker .ui-datetime:only-child {
+  padding-top: 89px;
+}
+.ui-datetime input[type='date'],
+.ui-datetime input[type='datetime'],
+.ui-datetime input[type='time'] {
+  display: none;
+}
+.ui-datefield {
+  height: 52px;
+  display: inline-block;
+  vertical-align: top;
+}
+.ui-datefield > .ui-btn {
+  float: left;
+  height: 52px;
+  padding: 0;
+  line-height: 52px;
+  font-size: 42px;
+  font-weight: 600;
+  border-radius: 2px;
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.ui-datefield .ui-datefield-separator {
+  display: block;
+  height: 100%;
+  float: left;
+  width: 18px;
+  background: transparent url('images/Datetimepicker/tw_timepicker_num_dot.png');
+}
+.ui-datefield > .ui-btn:enabled:focus {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.ui-datefield > .ui-btn:disabled {
+  color: #404040;
+}
+.ui-datafield > .ui-btn.ui-selected,
+.ui-datefield > .ui-btn:enabled:active,
+.ui-datefield > .ui-btn.ui-state-active:enabled,
+.ui-datefield > .ui-btn.ui-selected:enabled {
+  background-color: #ff9000;
+  color: #000;
+}
+/* -- for datepicker -- */
+.ui-date-picker .ui-datefield > .ui-btn:first-child {
+  margin-right: 2px;
+}
+.ui-date-picker .ui-datefield > .ui-btn:last-child {
+  margin-left: 2px;
+}
+.ui-date-picker .ui-datefield-year {
+  width: 114px;
+}
+.ui-date-picker .ui-datefield-month {
+  width: 102px;
+}
+.ui-date-picker .ui-datefield-day {
+  width: 68px;
+}
+/* -- end (for datepicker) -- */
+/* -- for timepicker -- */
+.ui-time-picker .ui-datefield-hour {
+  width: 74px;
+}
+.ui-time-picker .ui-datefield-min {
+  width: 74px;
+}
+.ui-time-picker .ui-datefield-period {
+  width: 84px;
+  margin-left: 10px;
+}
+.ui-time-picker .ui-datefield {
+  height: 58px;
+}
+.ui-time-picker .ui-datefield > .ui-btn {
+  height: 58px;
+  line-height: 58px;
+  font-size: 50px;
+}
+.ui-time-picker .ui-datefield > .ui-btn.ui-datefield-period {
+  font-size: 48px;
+}
+/* -- (end) for timepicker -- */
+.ui-datetime-wheel {
+  height: 68px;
+  margin: 0 10px;
+  margin-top: 30px;
+}
+.ui-time-picker .ui-datetime-wheel {
+  margin-top: 27px;
+}
+.ui-datetime-wheel .ui-btn {
+  width: 68px;
+  height: 68px;
+  float: left;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus {
+  float: right;
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-wheel {
+  display: block;
+  margin-left: 68px;
+  margin-right: 68px;
+  height: 68px;
+  padding: 10px 0;
+  background: url('images/Datetimepicker/tw_timepicker_wheel_01.png') center center no-repeat;
+}
+.ui-datetime-btns {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 76px;
+  border-top: 2px solid #262626;
+}
+/* Button separator */
+.ui-datetime-btns::before {
+  content: "";
+  height: 34px;
+  width: 1px;
+  background-color: #262626;
+  position: absolute;
+  left: 160px;
+  top: 20px;
+}
+.ui-datetime-btns .ui-btn {
+  height: 100%;
+  position: relative;
+  background-color: transparent;
+}
+.ui-datetime-btns .ui-btn:enabled:active,
+.ui-datetime-btns .ui-btn:enabled:focus,
+.ui-datetime-btns .ui-btn:enabled:active:focus {
+  background-color: transparent;
+}
+.ui-datetime-btns .ui-btn-left {
+  width: 160px;
+  float: left;
+  background: url('images/Datetimepicker/tw_timepicker_left_softbtn.png') center center no-repeat;
+}
+.ui-datetime-btns .ui-btn-right {
+  width: 159px;
+  float: right;
+  background: url('images/Datetimepicker/tw_timepicker_right_softbtn.png') center center no-repeat;
+}
+.ui-datetime-btns .ui-btn:disabled,
+.ui-datetime-btns .ui-btn.ui-state-disabled {
+  opacity: 0.2;
+}
+/* ---------------- */
+.ui-datetime-periods {
+  height: 102px;
+  margin-top: 7px;
+  display: inline-block;
+}
+.ui-datetime-periods .ui-btn,
+.ui-datetime-periods .ui-datetime-periods-separator {
+  height: 100%;
+  float: left;
+  padding: 0;
+  background: transparent;
+}
+.ui-datetime-periods .ui-btn {
+  width: 102px;
+  font-size: 34px;
+  line-height: 102px;
+}
+.ui-datetime-periods .ui-btn:enabled:focus {
+  background: transparent;
+}
+.ui-datetime-periods .ui-btn:enabled:active,
+.ui-datetime-periods .ui-btn:enabled:active:focus,
+.ui-datetime-periods .ui-btn.ui-selected:enabled:active,
+.ui-datetime-periods .ui-btn.ui-state-active:enabled:active {
+  color: inherit;
+  text-decoration: none;
+  background: url('images/Datetimepicker/tw_timepicker_time_bg.png') center center no-repeat;
+}
+.ui-datetime-periods .ui-btn.ui-selected:enabled,
+.ui-datetime-periods .ui-btn.ui-state-active:enabled {
+  color: #ff9000;
+  text-decoration: underline;
+}
+.ui-datetime-periods .ui-datetime-periods-separator {
+  width: 24px;
+  background: url('images/Datetimepicker/tw_timepicker_num_dot_01.png') center center no-repeat;
+}
+.ui-datetime-wheel.ui-hidden,
+.ui-datetime-periods.ui-hidden {
+  display: none;
+}
+/* Transitions originally inspired by those from jQtouch, nice work, folks */
+.ui-viewport-transitioning,
+.ui-viewport-transitioning .ui-page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.ui-pre-in {
+  z-index: 100;
+  visibility: visible;
+  display: block;
+  top: 0px;
+  left: 0px;
+}
+.in {
+  -webkit-animation-timing-function: ease-out;
+  -webkit-animation-duration: 350ms;
+  -moz-animation-timing-function: ease-out;
+  -moz-animation-duration: 350ms;
+  animation-timing-function: ease-out;
+  animation-duration: 350ms;
+}
+.out {
+  -webkit-animation-timing-function: ease-in;
+  -webkit-animation-duration: 225ms;
+  -moz-animation-timing-function: ease-in;
+  -moz-animation-duration: 225ms;
+  animation-timing-function: ease-in;
+  animation-duration: 225ms;
+}
+@-webkit-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-moz-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@-moz-keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.fade.out {
+  opacity: 0;
+  -webkit-animation-duration: 125ms;
+  -webkit-animation-name: fadeout;
+  -moz-animation-duration: 125ms;
+  -moz-animation-name: fadeout;
+  animation-duration: 125ms;
+  animation-name: fadeout;
+}
+.fade.in {
+  opacity: 1;
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: fadein;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: fadein;
+  animation-duration: 225ms;
+  animation-name: fadein;
+}
+/* slide up */
+.slideup.out {
+  -webkit-animation-name: fadeout;
+  -webkit-animation-duration: 250ms;
+  -moz-animation-name: fadeout;
+  -moz-animation-duration: 250ms;
+  animation-name: fadeout;
+  animation-duration: 250ms;
+}
+.slideup.in {
+  -webkit-transform: translateY(0);
+  -webkit-animation-name: slideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -moz-transform: translateY(0);
+  -moz-animation-name: slideinfrombottom;
+  -moz-animation-duration: 250ms;
+  transform: translateY(0);
+  animation-name: slideinfrombottom;
+  animation-duration: 250ms;
+}
+.slideup.in.reverse {
+  -webkit-animation-name: fadein;
+  -webkit-animation-duration: 250ms;
+  -moz-animation-name: fadein;
+  -moz-animation-duration: 250ms;
+  animation-name: fadein;
+  animation-duration: 250ms;
+}
+.slideup.out.reverse {
+  z-index: 101;
+  -webkit-transform: translateY(100%);
+  -webkit-animation-name: slideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -moz-transform: translateY(100%);
+  -moz-animation-name: slideouttobottom;
+  -moz-animation-duration: 250ms;
+  transform: translateY(100%);
+  animation-name: slideouttobottom;
+  animation-duration: 250ms;
+}
+@-webkit-keyframes slideinfrombottom {
+  from {
+    -webkit-transform: translateY(100%);
+  }
+  to {
+    -webkit-transform: translateY(0);
+  }
+}
+@-moz-keyframes slideinfrombottom {
+  from {
+    -moz-transform: translateY(100%);
+  }
+  to {
+    -moz-transform: translateY(0);
+  }
+}
+@keyframes slideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes slideouttobottom {
+  from {
+    -webkit-transform: translateY(0);
+  }
+  to {
+    -webkit-transform: translateY(100%);
+  }
+}
+@-moz-keyframes slideouttobottom {
+  from {
+    -moz-transform: translateY(0);
+  }
+  to {
+    -moz-transform: translateY(100%);
+  }
+}
+@keyframes slideouttobottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@-webkit-keyframes popnone {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes popin {
+  from {
+    transform: scale3d(0, 0, 1);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+@-webkit-keyframes popout {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(0, 0, 1);
+  }
+}
+.pop.out.reverse {
+  z-index: 200;
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popout;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popout;
+  animation-duration: 225ms;
+  animation-name: popout;
+}
+.pop.in.reverse {
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popnone;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popnone;
+  animation-duration: 225ms;
+  animation-name: popnone;
+}
+.pop.in {
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popin;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popin;
+  animation-duration: 225ms;
+  animation-name: popin;
+}
+.ui-indexscrollbar {
+  display: block;
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 2.8125rem;
+  height: 100%;
+  padding-left: 0.125rem;
+  background-color: rgba(33, 33, 33, 1);
+  z-index: 10;
+  overflow: visible;
+  -webkit-user-select: none;
+  cursor: pointer;
+}
+.ui-indexscrollbar ul {
+  position: absolute;
+  width: 100%;
+  top: 0;
+}
+.ui-indexscrollbar ul li {
+  color: rgba(84, 84, 84, 1);
+  display: block;
+  width: 100%;
+  text-align: center;
+  font-size: 1.5rem;
+  height: 2.25rem;
+}
+.ui-indexscrollbar ul li.ui-state-selected {
+  background-color: rgba(43, 43, 43, 1);
+  color: rgba(55, 161, 237, 1);
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary {
+  position: relative;
+  height: auto;
+  top: 0;
+  right: -2.5rem;
+  width: 100%;
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li {
+  background-color: rgba(43, 43, 43, 1);
+  color: rgba(84, 84, 84, 1);
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li.ui-state-selected {
+  background-color: rgba(43, 43, 43, 1);
+  color: rgba(55, 161, 237, 1);
+}
+.ui-indexscrollbar + .ui-listview li {
+  padding-right: 2.5rem;
+}
+.ui-indexscrollbar-indicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  display: none;
+}
+.ui-indexscrollbar-indicator > span {
+  width: 8.75rem;
+  height: 5.4375rem;
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 50%;
+  margin-left: -5.625rem;
+  margin-top: -2.6875rem;
+  line-height: 5.4375rem;
+  font-size: 4.375rem;
+  text-align: center;
+  background-color: rgba(0, 61, 107, 0.95);
+  color: rgba(250, 250, 250, 1);
+}
+.ui-indexscrollbar-indicator > span > span.ui-selected {
+  color: rgba(55, 161, 237, 1);
+}
+.ui-circularindexscrollbar {
+  position: fixed;
+  top: 0;
+  left: -100%;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+}
+.ui-circularindexscrollbar.ui-circularindexscrollbar-show .ui-circularindexscrollbar-indexbar {
+  pointer-events: auto;
+  -webkit-transform: scale(1, 1);
+  -webkit-transition-duration: 500ms;
+  -webkit-transition-timing-function: linear;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: -webkit-radial-gradient(center, ellipse cover, transparent 59%, rgba(33, 33, 33, 1) 59%);
+  overflow: hidden;
+  -webkit-transform: scale(1.2, 1.2);
+  -webkit-transition-duration: 500ms;
+  -webkit-transition-timing-function: linear;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  box-sizing: border-box;
+  width: 50%;
+  height: 50%;
+  margin-top: -50%;
+  margin-left: -50%;
+  -webkit-transform-origin: 100% 100% 0;
+  overflow: hidden;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index span {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin-left: 50%;
+  padding-top: 0.3125rem;
+  text-align: center;
+  color: rgba(84, 84, 84, 1);
+  -webkit-transform-origin: 50% 100% 0;
+  font-size: 1.25rem;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span {
+  color: rgba(55, 161, 237, 1);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator {
+  position: absolute;
+  top: 50%;
+  width: 8.9375rem;
+  height: 8.9375rem;
+  line-height: 8.9375rem;
+  border-radius: 50%;
+  background-color: rgba(0, 61, 107, 0.95);
+  -webkit-mask-image: url("images/Indicator/b_fast_scroll_rollover_bg.png");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 8.9375rem;
+  margin-top: -4.4375rem;
+  margin-left: 100%;
+  -webkit-transform: translate3d(-6.703125rem, 0, 0);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text {
+  text-align: center;
+  font-size: 4.375rem;
+  color: rgba(55, 161, 237, 1);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-minimize .ui-circularindexscrollbar-indicator-text {
+  padding-right: 0.4375rem;
+  text-align: right;
+  font-size: 2rem;
+}
+/***************************************************************************
+                   Scrollbar Style
+***************************************************************************/
+.ui-scrollbar-bar-type {
+  position: absolute;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-horizontal {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 8px;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-vertical {
+  right: 0;
+  top: 0;
+  width: 0.5rem;
+  height: 100%;
+}
+.ui-scrollbar-bar-type .ui-scrollbar-indicator {
+  position: absolute;
+  background-color: rgba(102, 102, 102, 1);
+}
+.ui-scrollbar-bar-type.ui-scrollbar-horizontal .ui-scrollbar-indicator {
+  height: 0.25rem;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-vertical .ui-scrollbar-indicator {
+  width: 0.25rem;
+}
+/***************************************************************************
+                   Scrollbar Bouncing Effect
+***************************************************************************/
+.ui-scrollbar-bouncing-effect {
+  display: none;
+  position: absolute;
+  background-repeat: no-repeat;
+  -webkit-animation-duration: 0.47s;
+  -moz-animation-duration: 0.47s;
+  -ms-animation-duration: 0.47s;
+  -o-animation-duration: 0.47s;
+  -webkit-animation-timing-function: step-start;
+  -moz-animation-timing-function: step-start;
+  -ms-animation-timing-function: step-start;
+  -o-animation-timing-function: step-start;
+  animation-timing-function: step-start;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-fill-mode: forwards;
+  -ms-animation-fill-mode: forwards;
+  -o-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  background-color: rgba(55, 161, 237, 0.7);
+}
+.ui-scrollbar-bouncing-effect::before {
+  content: "";
+  position: absolute;
+  background-color: rgba(55, 161, 237, 1);
+}
+.ui-scrollbar-bouncing-effect.ui-top,
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  width: 100%;
+  height: 3.125rem;
+  left: 0;
+  -webkit-mask-size: 100% 3.125rem;
+}
+.ui-scrollbar-bouncing-effect.ui-top::before,
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  width: 100%;
+  height: 0.125rem;
+  -webkit-mask-size: 100% 0.125rem;
+}
+.ui-scrollbar-bouncing-effect.ui-left,
+.ui-scrollbar-bouncing-effect.ui-right {
+  width: 3.125rem;
+  height: 100%;
+  top: 0;
+  -webkit-mask-size: 3.125rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-left::before,
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  width: 0.0625rem;
+  height: 100%;
+  -webkit-mask-size: 0.0625rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-top {
+  top: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_top_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-top::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_top_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  bottom: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_bottom_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_bottom_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left {
+  left: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_left_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_left_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right {
+  right: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_right_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_right_edge.png");
+}
+@-webkit-keyframes ui-bouncing-show {
+  0% {
+    opacity: 0;
+  }
+  10% {
+    opacity: 0.1;
+  }
+  20% {
+    opacity: 0.2;
+  }
+  30% {
+    opacity: 0.3;
+  }
+  40% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  60% {
+    opacity: 0.6;
+  }
+  70% {
+    opacity: 0.7;
+  }
+  80% {
+    opacity: 0.8;
+  }
+  90% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes ui-bouncing-hide {
+  0% {
+    opacity: 1;
+  }
+  10% {
+    opacity: 0.9;
+  }
+  20% {
+    opacity: 0.8;
+  }
+  30% {
+    opacity: 0.7;
+  }
+  40% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  60% {
+    opacity: 0.4;
+  }
+  70% {
+    opacity: 0.3;
+  }
+  80% {
+    opacity: 0.2;
+  }
+  90% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.ui-scrollbar-bouncing-effect.ui-show {
+  display: block;
+  -webkit-animation-name: ui-bouncing-show;
+}
+.ui-scrollbar-bouncing-effect.ui-hide {
+  display: block;
+  -webkit-animation-name: ui-bouncing-hide;
+}
+.ui-swipelist {
+  position: absolute;
+  top: 0;
+}
+.ui-swipelist-left,
+.ui-swipelist-right {
+  position: absolute;
+  display: none;
+}
+.ui-swipelist-left {
+  background: -webkit-linear-gradient(left, rgba(98, 168, 24, 1) 0%, rgba(8, 8, 8, 1) 0%);
+}
+.ui-swipelist-right {
+  background: -webkit-linear-gradient(right, rgba(235, 164, 23, 1) 0%, rgba(8, 8, 8, 1) 0%);
+}
+.ui-swipelist-icon,
+.ui-swipelist-text {
+  position: absolute;
+}
+.ui-swipelist-left .ui-swipelist-icon {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  width: 20%;
+  height: 100%;
+  margin-left: 2%;
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-mask-image: url("images/Swipelist/b_logs_icon_body_btn_call_nor.png");
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-swipelist-left .ui-swipelist-text {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  margin-left: 40%;
+  height: 100%;
+  line-height: 90px;
+}
+.ui-swipelist-right .ui-swipelist-icon {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  width: 20%;
+  height: 100%;
+  margin-left: 80%;
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-mask-image: url("images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png");
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-swipelist-right .ui-swipelist-text {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  margin-left: 20%;
+  height: 100%;
+  line-height: 90px;
+}
+/***************************************************************************
+                   Tab Style
+***************************************************************************/
+.ui-tab-indicator {
+  position: relative;
+  height: 6px;
+}
+.ui-tab-indicator .ui-tab-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  height: 6px;
+  background-color: rgba(76, 103, 125, 1);
+}
+.ui-tab-indicator .ui-tab-item.ui-tab-active {
+  background-color: rgba(55, 161, 237, 1);
+}
+input[type="checkbox"]:not(.ui-switch-input),
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  height: 56px;
+  width: 56px;
+  font-size: 32px;
+  -webkit-appearance: none;
+  position: relative;
+}
+input[type="radio"] {
+  background-color: rgba(0, 14, 26, 1);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+}
+input[type="radio"]::after {
+  content: "";
+  background-color: rgba(245, 245, 245, 0.3);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_line.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:checked::before {
+  content: "";
+  background-color: rgba(112, 186, 15, 1);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:active {
+  background-color: rgba(0, 50, 84, 0.4);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+}
+input[type="radio"]:active::after {
+  content: "";
+  background-color: rgba(245, 245, 245, 0.3);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_line.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:active:checked::before {
+  content: "";
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input) {
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(0, 14, 26, 1);
+}
+input[type="checkbox"]:not(.ui-switch-input)::after {
+  content: "";
+  background-color: rgba(245, 245, 245, 0.3);
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):checked::before {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(112, 186, 15, 1);
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):active {
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(0, 50, 84, 0.4);
+}
+input[type="checkbox"]:not(.ui-switch-input):active::after {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(245, 245, 245, 0.3);
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):active:checked::before {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: rgba(245, 245, 245, 1);
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+.ui-marquee {
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  -webkit-user-select: none;
+}
+.ui-marquee.ui-marquee-gradient {
+  text-overflow: clip;
+}
+.ui-marquee.ui-marquee-gradient::after {
+  content: "";
+  width: 6.875rem;
+  height: 100%;
+  background: -webkit-linear-gradient(left, transparent 0%, rgba(8, 8, 8, 1) 100%);
+  position: absolute;
+  right: 0;
+}
+.ui-marquee.ui-marquee-ellipsis .ui-marquee-content {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ui-marquee-content {
+  overflow: visible;
+  display: inline-block;
+}
+.ui-marquee-anim-running {
+  -webkit-animation-play-state: running;
+}
+.ui-marquee-anim-stopped {
+  -webkit-animation-play-state: paused;
+}
+.ui-page-indicator {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translate3d(-50%, 0, 0);
+  -moz-transform: translate3d(-50%, 0, 0);
+  -ms-transform: translate3d(-50%, 0, 0);
+  -o-transform: translate3d(-50%, 0, 0);
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-page-indicator-item {
+  position: relative;
+  display: inline-block;
+  width: 0.8125rem;
+  height: 0.8125rem;
+  -webkit-mask-image: -webkit-radial-gradient(#000000 0.25rem, transparent 0.375rem);
+  background-color: rgba(245, 245, 245, 0.4);
+  margin-right: 0.5625rem;
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-page-indicator-item:last-child {
+  margin-right: 0;
+}
+.ui-page-indicator-item.ui-page-indicator-active {
+  background-color: rgba(245, 245, 245, 1);
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-snap-listview li {
+  -webkit-scroll-snap-destination: 50% 50%;
+}
+.ui-drawer {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  background-color: rgba(8, 8, 8, 1);
+  z-index: 1201;
+  box-sizing: border-box;
+}
+.ui-drawer.ui-drawer-close {
+  overflow: hidden;
+}
+.ui-drawer.ui-drawer-open {
+  overflow: auto;
+}
+.ui-drawer-overlay {
+  top: 0;
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 1200;
+}
+/***************************************************************************
+				   Footer Style (New style)
+***************************************************************************/
+.ui-page .ui-expandable-header {
+  height: 60px;
+}
+.ui-page .ui-expandable-header.ui-header-expand {
+  height: 80px;
+}
+.ui-page .ui-expandable-header.ui-header-expand .ui-title {
+  padding-top: 0;
+  transform: translate3d(0, 20px, 0);
+}
+.ui-section-changer {
+  height: 100%;
+}
diff --git a/lib/tau/wearable/theme/default/tau.min.css b/lib/tau/wearable/theme/default/tau.min.css
new file mode 100644
index 0000000..e3aadb5
--- /dev/null
+++ b/lib/tau/wearable/theme/default/tau.min.css
@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2015 Samsung Electronics Co., Ltd
+ *
+ * Licensed under the Flora License, Version 1.1 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://floralicense.org/license/
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+*{outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:Tizen,Samsung Sans,Helvetica}body{margin:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button[disabled],input[disabled]{cursor:default}input[type=time],input[type=date]{color:#000}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.screen-hidden{visibility:hidden;position:absolute;top:-10000em;left:-10000em}button,input{outline:0;cursor:pointer}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}a{text-decoration:none!important;color:rgba(245,245,245,1)}ul,li{margin:0;padding:0;list-style-type:none}img{margin:0;padding:0}html{-webkit-tap-highlight-color:rgba(0,0,0,0)}body{height:100%;font-size:2.125rem;font-family:Tizen,Samsung Sans,Helvetica;background:rgba(8,8,8,1);color:rgba(245,245,245,1)}.ui-page{width:100%;height:100%;overflow:hidden;display:none;position:absolute;top:0;left:0;background:rgba(8,8,8,1);-webkit-tap-highlight-color:rgba(0,0,0,0)}.ui-page.ui-page-active{display:block}.ui-page.ui-page-build{display:block;visibility:hidden}.scrolling-mode-touch{-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-content{width:auto;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-header{position:relative;width:100%;height:60px;line-height:60px;background-color:rgba(0,31,56,1)}.ui-header .ui-title{color:rgba(116,196,252,1);font-size:32px;font-weight:700;white-space:nowrap;overflow:hidden;margin:0;padding-left:16px;padding-right:16px;-webkit-mask-image:-webkit-linear-gradient(left,#000 80%,rgba(0,0,0,0) 95%)}.ui-header .ui-title.ui-icon{padding-left:60px;background-position:16px 14px;background-size:34px 34px;background-repeat:no-repeat}.ui-header.ui-has-more .ui-title{padding-right:78px;-webkit-mask-image:-webkit-linear-gradient(left,#000 70%,rgba(0,0,0,0) 75%)}.ui-header button.ui-more,.ui-header input.ui-more{border:0 none;padding:0}.ui-header .ui-more-disable{cursor:default;background-color:transparent}.ui-header .ui-more{display:block;position:absolute;top:0;right:0;width:68px;height:100%;overflow:hidden;text-indent:-1000em;background-position:center center;background-color:transparent;cursor:pointer}.ui-header .ui-more:active{background-color:rgba(23,73,115,1)!important}.ui-header .ui-more.ui-icon-detail{background-color:rgba(116,196,252,1);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-detail[disabled=disabled]{cursor:default;background-color:transparent;background-color:rgba(116,196,252,.2);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-overflow{background-color:rgba(116,196,252,1);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position-x:.9375rem;-webkit-mask-position-y:50%;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-overflow[disabled=disabled]{cursor:default;background-color:transparent;background-color:rgba(116,196,252,.2);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-selectall{background-color:rgba(116,196,252,1);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-selectall[disabled=disabled]{cursor:default;background-color:transparent;background-color:rgba(116,196,252,.2);-webkit-mask-image:url(images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-footer{width:100%;height:85px;position:absolute;bottom:0;left:0}.ui-page.ui-scroll-on{overflow:auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-page.ui-scroll-on .ui-content{height:auto!important}.ui-page.ui-scroll-on .ui-footer{position:relative}.ui-header.ui-fixed{position:fixed!important;top:0;left:0;width:100%;z-index:1000}.ui-footer.ui-fixed{position:fixed!important;bottom:0;left:0;width:100%;z-index:1000;-webkit-transform:translate3d(0,0,0)}.ui-grid-col>*{float:left}.ui-page .ui-grid-col-1>*{float:left}.ui-page .ui-grid-col-1>*{width:100%}.ui-page .ui-grid-col-2>*{float:left}.ui-page .ui-grid-col-2>*{width:50%}.ui-page .ui-grid-col-3>*{float:left}.ui-page .ui-grid-col-3>*{width:33.333333333333336%}.ui-grid-row>*{display:block}@-webkit-keyframes indeterminate{0%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,77,153,1)}25%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,77,153,1)}50%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,77,153,1)}75%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,77,153,1)}100%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,77,153,1)}}progress{position:relative;padding-left:1rem;padding-right:1rem;margin-top:.875rem;margin-bottom:.875rem;color:rgba(245,245,245,1);width:100%;height:.375rem;-webkit-appearance:none;border:0}progress::-webkit-progress-bar{position:relative;background-color:rgba(71,71,71,1);border-radius:.125rem;overflow:hidden}progress::-webkit-progress-value{background-color:rgba(55,161,237,1);height:.375rem;border-radius:.125rem;overflow:hidden}progress.ui-progress-indeterminate::-webkit-progress-bar{background-color:rgba(55,161,237,1)}progress.ui-progress-indeterminate::-webkit-progress-value{background-size:100% 100%;-webkit-animation:indeterminate 150ms infinite}.ui-progress-proportion{display:inline-block;float:left;font-size:20px;padding-left:1rem;padding-right:1rem;margin-top:-.625rem}.ui-progress-ratio{display:inline-block;float:right;font-size:20px;padding-left:1rem;padding-right:1rem;margin-top:-.625rem}.ui-circle-progress{display:none}.ui-progressbar.ui-progressbar-full{position:fixed;top:0;left:0;width:100%;height:100%}.ui-progressbar.ui-progressbar-large{width:6.25rem;height:6.25rem}.ui-progressbar.ui-progressbar-medium{width:5.25rem;height:5.25rem}.ui-progressbar.ui-progressbar-small{width:3.5rem;height:3.5rem}.ui-progressbar{position:relative;display:inline-block;pointer-events:none}.ui-progressbar .ui-progressbar-value.ui-progressbar-half{clip:rect(auto,auto,auto,auto)}.ui-progressbar .ui-progressbar-value.ui-progressbar-half .ui-progressbar-value-right{-webkit-transform:rotate(180deg)}.ui-progressbar .ui-progressbar-value{clip:rect(0,1em,1em,.5em);width:100%;height:100%;position:absolute}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left{border:.5rem solid rgba(55,161,237,1);border-radius:50%;clip:rect(0,.5em,1em,0);height:100%;width:100%;position:absolute}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right{border:.5rem solid rgba(55,161,237,1);border-radius:50%;clip:rect(0,.5em,1em,0);width:100%;height:100%;position:absolute}.ui-progressbar .ui-progressbar-bg{border:.5rem solid rgba(71,71,71,1);border-radius:50%;width:100%;height:100%}.ui-switch{width:100%;color:rgba(245,245,245,1)}.ui-switch-inneroffset,.ui-switch-handler{display:none}.ui-switch-text{margin-top:30px;margin-bottom:40px;padding:0 30px;font-size:34px;text-align:center}.ui-switch-sub-text{margin-top:48px;margin-bottom:55px;font-size:26px;text-align:center;color:T161}.ui-toggleswitch{position:relative;display:inline-block;width:92px;height:49px}.ui-toggleswitch .ui-switch-input{position:absolute;width:100%;height:100%;-webkit-appearance:none;display:block}.ui-toggleswitch .ui-switch-input::before{content:"";position:absolute;width:100%;height:100%;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 0;background-color:rgba(97,96,96,1);z-index:0}.ui-toggleswitch .ui-switch-input:active::before{background-color:rgba(97,96,96,1)}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button{background-color:rgba(173,173,173,1)}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button::before{background-color:rgba(97,96,96,1)}.ui-toggleswitch .ui-switch-activation,.ui-toggleswitch .ui-switch-button{width:59px;height:49px;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 -49px;background-color:rgba(245,245,245,1);position:absolute;top:0;left:0;pointer-events:none;z-index:1}.ui-toggleswitch .ui-switch-activation::before,.ui-toggleswitch .ui-switch-button::before{content:"";position:absolute;width:100%;height:100%;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 -98px;background-color:rgba(128,128,128,1);top:0;left:0}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button{width:59px;height:49px;-webkit-mask-position:0 -49px;background-color:rgba(245,245,245,1);-webkit-transform:translate3d(33px,0,0);-moz-transform:translate3d(33px,0,0);-ms-transform:translate3d(33px,0,0);-o-transform:translate3d(33px,0,0);transform:translate3d(33px,0,0)}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -147px;background-color:rgba(112,186,15,1)}.ui-toggleswitch .ui-switch-input:checked::before{background-color:rgba(112,186,15,1)}.ui-toggleswitch .ui-switch-input:checked:active::before{background-color:rgba(71,97,37,1)}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button{background-color:rgba(173,173,173,1)}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button::before{background-color:rgba(71,97,37,1)}.ui-toggleswitch.ui-toggleswitch-large{width:207px;height:110px;display:block;margin:0 auto}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button{width:132px;height:110px;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:207px;-webkit-mask-position:0 -110px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before{-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-position:0 -220px;-webkit-mask-size:207px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before{-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:207px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button{width:132px;height:110px;-webkit-mask-position:0 -110px;-webkit-transform:translate3d(75px,0,0);-moz-transform:translate3d(75px,0,0);-ms-transform:translate3d(75px,0,0);-o-transform:translate3d(75px,0,0);transform:translate3d(75px,0,0)}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -330px}@-webkit-keyframes rotating{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}.ui-processing{background-color:rgba(0,123,255,1);-webkit-mask-image:url(images/Processing/tw_progress_small_loading_bg.png);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-animation:rotating 1s linear infinite;width:3.5rem;height:3.5rem;margin:0 auto;margin-top:2.125rem;margin-bottom:.875rem}.ui-processing-text{margin:0 auto;text-align:center;width:10.5rem;font-size:1.5rem}.ui-processing.ui-processing-full-size{background-color:transparent;-webkit-mask-image:none;-webkit-animation:none;width:100%;height:100%;pointer-events:none;position:fixed;top:0;left:0;margin:0}.ui-processing.ui-processing-full-size::after{content:"";background-color:rgba(55,161,237,1);-webkit-mask-image:url(images/Processing/tw_progress_full_loading_bg.png);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-animation:rotating 1s linear infinite;width:100%;height:100%;position:absolute}.ui-btn{display:block;padding-top:28.5px;padding-right:10px;padding-bottom:28.5px;padding-left:10px;margin:0;font-size:32px;line-height:28px;text-align:center;white-space:nowrap;cursor:pointer;vertical-align:middle;text-overflow:ellipsis;overflow:hidden;border:0 none;color:rgba(245,245,245,1);background-color:rgba(2,56,92,1)}a.ui-btn:active:hover,.ui-btn:enabled:active:hover{background-color:rgba(23,73,115,1)}.ui-btn:enabled:focus{background-color:rgba(2,56,92,1)}a.ui-btn.ui-state-disabled,.ui-btn:disabled{color:rgba(245,245,245,.2);background-color:rgba(3,44,64,1);cursor:default}.ui-btn.ui-multiline{padding-top:10px;padding-bottom:10px}.ui-btn.ui-inline{display:inline-block}.ui-btn.ui-btn-icon{background-position:center center;height:76px;text-indent:-1000em;overflow:hidden;background-repeat:no-repeat;background-size:60px 60px}.ui-default{color:rgba(245,245,245,1);background-color:rgba(2,56,92,1)}a.ui-default:active:hover,.ui-default:enabled:active:hover{background-color:rgba(23,73,115,1)}.ui-default:enabled:focus{background-color:rgba(2,56,92,1)}a.ui-default.ui-state-disabled,.ui-default:disabled{color:rgba(245,245,245,.2);background-color:rgba(3,44,64,1);cursor:default}.ui-color-red{color:rgba(245,245,245,1);background-color:rgba(207,36,2,1)}a.ui-color-red:active:hover,.ui-color-red:enabled:active:hover{background-color:rgba(222,102,78,1)}.ui-color-red:enabled:focus{background-color:rgba(207,36,2,1)}a.ui-color-red.ui-state-disabled,.ui-color-red:disabled{color:rgba(245,245,245,.2);background-color:rgba(69,11,1,1);cursor:default}.ui-color-orange{color:rgba(245,245,245,1);background-color:rgba(237,134,0,1)}a.ui-color-orange:active:hover,.ui-color-orange:enabled:active:hover{background-color:rgba(242,171,78,1)}.ui-color-orange:enabled:focus{background-color:rgba(237,134,0,1)}a.ui-color-orange.ui-state-disabled,.ui-color-orange:disabled{color:rgba(245,245,245,.2);background-color:rgba(69,39,5,1);cursor:default}.ui-color-green{color:rgba(245,245,245,1);background-color:rgba(97,163,16,1)}a.ui-color-green:active:hover,.ui-color-green:enabled:active:hover{background-color:rgba(146,191,90,1)}.ui-color-green:enabled:focus{background-color:rgba(97,163,16,1)}a.ui-color-green.ui-state-disabled,.ui-color-green:disabled{color:rgba(245,245,245,.2);background-color:rgba(50,54,48,1);cursor:default}.ui-btn:focus,.ui-btn:active{outline:0}a.ui-btn{text-decoration:none;box-sizing:border-box}button.ui-btn,input.ui-btn{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;width:100%}button.ui-btn.ui-inline,input.ui-btn.ui-inline{display:inline-block;width:auto}.ui-grid-col-1>.ui-btn{border-left:solid 1px rgba(8,8,8,1)}.ui-grid-col-1>.ui-btn:first-child{border-left:0 none}.ui-grid-col-2>.ui-btn{border-left:solid 1px rgba(8,8,8,1)}.ui-grid-col-2>.ui-btn:first-child{border-left:0 none}.ui-grid-col-3>.ui-btn{border-left:solid 1px rgba(8,8,8,1)}.ui-grid-col-3>.ui-btn:first-child{border-left:0 none}.ui-grid-row>.ui-btn{margin-top:1px}.ui-grid-row>.ui-btn:first-child{margin-top:0}.ui-popup{position:fixed;left:0;width:100%;margin:0;background-color:rgba(0,17,33,1);border:3px solid rgba(0,55,92,1);display:none;z-index:1100}.ui-popup:not(.ui-ctxpopup){bottom:0}.ui-popup .ui-popup-header{width:100%;min-height:68px;font-size:30px;text-align:left;background-color:rgba(5,42,71,1);color:rgba(116,196,252,1);padding-top:14px;padding-right:13px;padding-bottom:14px;padding-left:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-popup .ui-popup-content{width:100%;min-height:14rem;font-size:2.125rem;text-align:left;color:rgba(245,245,245,1);background-color:rgba(0,17,33,1);padding:10px 16px 9px;overflow:auto;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-popup .ui-popup-content .ui-listview,.ui-popup .ui-popup-content .ui-inline-listview{margin:-.5625rem -1rem -.5625rem -1rem}.ui-popup .ui-popup-content .ui-listview li,.ui-popup .ui-popup-content .ui-inline-listview li{font-size:2.125rem}.ui-popup .ui-popup-footer{width:100%;height:83px}.ui-popup .ui-popup-footer .ui-btn{padding-top:27px;padding-bottom:28px;font-size:30px}.ui-popup.ui-popup-active{display:block}.ui-popup.in{display:block}.ui-popup.ui-build{display:block;visibility:hidden}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast){max-height:100%}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-wrapper{width:100%;max-height:100%;overflow:auto!important;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content{height:auto!important}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header.ui-fixed{position:absolute!important;top:0;left:0;width:100%;z-index:2100}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-footer.ui-fixed{position:absolute!important;bottom:0;left:0;width:100%;z-index:2100;-webkit-transform:translate3d(0,0,0)}.ui-popup.ui-ctxpopup{background-color:transparent;width:100%;border:0 none;border-radius:0;overflow:visible}div.ui-popup.ui-ctxpopup.ui-popup-content-size{width:auto;padding:0}div.ui-popup.ui-ctxpopup.ui-popup-content-size .ui-popup-content{width:auto}.ui-popup.ui-ctxpopup .ui-popup-content{background-color:rgba(245,245,245,1);border:1px solid rgba(112,112,112,.9);color:#333;min-height:initial}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li{color:rgba(8,8,8,1);border-bottom:1px solid rgba(204,204,204,1);min-height:90px;padding:21px 8px 20px 16px}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a{color:rgba(8,8,8,1);margin:-21px -16px;padding:21px 16px;min-height:48px}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active{color:rgba(245,245,245,1);background-color:rgba(19,99,145,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li:last-child{border:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon{position:relative;padding-left:4.25rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon a{margin-left:-4.25rem;padding-left:4.25rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon::before{content:"";position:absolute;top:50%;left:.375rem;width:3.5rem;height:3.5rem;margin-top:-1.75rem;background-color:rgba(99,99,99,.9);-webkit-mask-size:3.5rem 3.5rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:3.5rem 3.5rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview a.ui-list-icon:active::before{background-color:rgba(245,245,245,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview{height:4.3125rem;overflow:hidden}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li{float:left;height:4.1875rem;line-height:4.1875rem;border-right:1px solid rgba(8,8,8,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li:last-child{border:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a{display:block;width:100%;height:100%;padding:0rem .5rem;color:rgba(8,8,8,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active{color:rgba(245,245,245,1);background-color:rgba(19,99,145,1)}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext{width:3.6875rem;height:4.1875rem;text-indent:-1000em;overflow:hidden;position:relative}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext::before{content:"";position:absolute;top:50%;left:50%;width:2.6875rem;height:2.6875rem;margin-top:-1.34375rem;margin-left:-1.34375rem;background-color:rgba(8,8,8,1);-webkit-mask-size:2.6875rem 2.6875rem;-webkit-mask-repeat:no-repeat;mask-size:2.6875rem 2.6875rem;mask-repeat:no-repeat}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview a.ui-list-icon-notext:active::before{background-color:rgba(245,245,245,1)}.ui-popup.ui-ctxpopup .ui-arrow{width:36px;height:15px;overflow:hidden;position:absolute;display:none;animation-duration:0;-webkit-animation-duration:0}.ui-popup.ui-ctxpopup .ui-arrow span{width:20px;height:20px;background-color:rgba(245,245,245,1);border:1px solid rgba(112,112,112,.9);position:absolute;top:6px;left:8px;-webkit-transform:rotate(55deg) skew(24deg);transform:rotate(55deg) skew(24deg);animation-duration:0;-webkit-animation-duration:0}.ui-popup.ui-ctxpopup.ui-popup-arrow-b{padding:20px 20px 0}.ui-popup.ui-ctxpopup.ui-popup-arrow-t{padding:0 20px 20px}.ui-popup.ui-ctxpopup.ui-popup-arrow-r{padding:20px 0 20px 20px}.ui-popup.ui-ctxpopup.ui-popup-arrow-l{padding:20px 20px 20px 0}.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow{display:block;bottom:-.875rem;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow{display:block;top:-14px}.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow{display:block;right:-25px;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow{display:block;left:-25px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.ui-popup.ui-popup-toast{margin-left:0;margin-right:0;margin-bottom:0;font-size:1.5rem;border:3px solid rgba(0,55,92,1);border-radius:0;border-left:0;border-right:0;position:absolute;bottom:0;top:auto;height:auto}.ui-popup.ui-popup-toast .ui-popup-content{min-height:initial;padding:.6875rem 2.625rem .75rem;background-color:rgba(0,17,33,1)}.ui-popup-overlay{position:fixed;display:none;top:0;width:100%;height:100%;z-index:100;background-color:rgba(8,8,8,.7)}.ui-popup-overlay.in{display:block}.ui-popup.slideup.in{-webkit-animation-name:popupslideinfrombottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popupslideinfrombottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.slideup.out{-webkit-animation-name:popupslideouttobottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popupslideouttobottom;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes popupslideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0%)}}@keyframes popupslideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0%)}}@-webkit-keyframes popupslideouttobottom{from{transform:translateY(0%)}to{transform:translateY(100%)}}@keyframes popupslideouttobottom{from{transform:translateY(0%)}to{transform:translateY(100%)}}.ui-popup.pop.in{-webkit-animation-name:popuppopin;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popuppopin;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.pop.out{-webkit-animation-name:popuppopout;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popuppopout;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes popuppopin{from{transform:scale3d(0,0,1)}to{transform:scale3d(1,1,1)}}@-webkit-keyframes popuppopout{from{transform:scale3d(1,1,1)}to{transform:scale3d(0,0,1)}}.ui-popup-overlay.slideup.in,.ui-popup-overlay.pop.in{-webkit-animation-name:fadein;-webkit-animation-duration:250ms;animation-name:fadein;animation-duration:250ms}.ui-popup-overlay.slideup.out,.ui-popup-overlay.pop.out{-webkit-animation-name:fadeout;-webkit-animation-duration:250ms;animation-name:fadeout;animation-duration:250ms}.ui-popup.ui-popup-arrow-t.slideup.in,.ui-popup.ui-popup-arrow-l.slideup.in,.ui-popup.ui-popup-arrow-r.slideup.in{-webkit-animation-name:ctxpopupslideinfrombottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideinfrombottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-t.slideup.out,.ui-popup.ui-popup-arrow-l.slideup.out,.ui-popup.ui-popup-arrow-r.slideup.out{-webkit-animation-name:ctxpopupslideouttobottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideouttobottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-b.slideup.in{-webkit-animation-name:ctxpopupslideinfromtop;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideinfromtop;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-b.slideup.out{-webkit-animation-name:ctxpopupslideouttotop;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideouttotop;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes ctxpopupslideinfrombottom{from{transform:translateY(20%);opacity:0}to{transform:translateY(0%);opacity:1}}@keyframes ctxpopupslideinfrombottom{from{transform:translateY(20%);opacity:0}to{transform:translateY(0%);opacity:1}}@-webkit-keyframes ctxpopupslideouttobottom{from{transform:translateY(0%);opacity:1}to{transform:translateY(20%);opacity:0}}@keyframes ctxpopupslideouttobottom{from{transform:translateY(0%);opacity:1}to{transform:translateY(20%);opacity:0}}@-webkit-keyframes ctxpopupslideinfromtop{from{transform:translateY(-20%);opacity:0}to{transform:translateY(0%);opacity:1}}@keyframes ctxpopupslideinfromtop{from{transform:translateY(-20%);opacity:0}to{transform:translateY(0%);opacity:1}}@-webkit-keyframes ctxpopupslideouttotop{from{transform:translateY(0%);opacity:1}to{transform:translateY(-20%);opacity:0}}@keyframes ctxpopupslideouttotop{from{transform:translateY(0%);opacity:1}to{transform:translateY(-20%);opacity:0}}.ui-listview li{font-size:2.5rem;line-height:3rem;width:100%;min-height:6.25rem;padding:1.3125rem .5rem 1.25rem 1rem;border-bottom:1px solid rgba(56,56,56,1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;color:rgba(245,245,245,1)}.ui-listview li>*{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;color:rgba(245,245,245,1)}.ui-listview li>a{display:block;width:100%;height:100%;margin:-1.3125rem -1rem;padding:1.625rem 1rem;-o-box-sizing:content-box;-ms-box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.ui-listview li.ui-li-active{background-color:rgba(8,56,94,1);color:rgba(245,245,245,1)}.ui-listview .li-divider{height:1.875rem;min-height:1.875rem;line-height:1.875rem;padding:0 .5rem 0 1rem;background-color:rgba(29,72,105,1);color:rgba(151,197,230,1);font-size:1.5rem}.ui-listview .ui-li-sub-text{color:rgba(85,135,171,1);font-size:1.75rem}.ui-listview .ui-li-has-action-icon .ui-action-text{width:calc(100% - 4.8125rem);height:100%}.ui-listview .ui-li-has-action-icon .ui-action-text::after{content:"";position:absolute;height:3.5rem;width:.125rem;background-color:rgba(245,245,245,1);right:4.25rem;top:20%}.ui-listview .ui-li-has-action-icon .ui-action-divider{display:none}.ui-listview .ui-li-has-action-icon .ui-action-delete,.ui-listview .ui-li-has-action-icon .ui-action-setting,.ui-listview .ui-li-has-action-icon .ui-action-add{position:absolute;height:100%;width:4.5rem;right:0;top:0;-webkit-mask-size:3.5rem 3.5rem;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center center;padding:0;margin:0}.ui-listview .ui-li-has-action-icon .ui-action-delete{-webkit-mask-image:url(images/listview/tw_list_delete_holo_dark.png);background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-setting{-webkit-mask-image:url(images/listview/tw_list_setting_holo_dark.png);background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-add{-webkit-mask-image:url(images/listview/tw_list_add_holo_dark.png);background-color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon.ui-li-active{background-color:transparent}.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active{background-color:rgba(8,56,94,1);color:rgba(245,245,245,1)}.ui-listview .ui-li-has-action-icon .ui-action-delete:active,.ui-listview .ui-li-has-action-icon .ui-action-setting:active,.ui-listview .ui-li-has-action-icon .ui-action-add:active{background-color:rgba(8,56,94,1);color:rgba(245,245,245,1)}.ui-datetime-widget{position:relative;height:100%}.ui-datetime{text-align:center;padding-top:56px}.ui-time-picker .ui-datetime{padding-top:53px}.ui-datetime:only-child{padding-top:92px}.ui-time-picker .ui-datetime:only-child{padding-top:89px}.ui-datetime input[type=date],.ui-datetime input[type=datetime],.ui-datetime input[type=time]{display:none}.ui-datefield{height:52px;display:inline-block;vertical-align:top}.ui-datefield>.ui-btn{float:left;height:52px;padding:0;line-height:52px;font-size:42px;font-weight:600;border-radius:2px;background-color:rgba(255,255,255,.15)}.ui-datefield .ui-datefield-separator{display:block;height:100%;float:left;width:18px;background:transparent url(images/Datetimepicker/tw_timepicker_num_dot.png)}.ui-datefield>.ui-btn:enabled:focus{background-color:rgba(255,255,255,.15)}.ui-datefield>.ui-btn:disabled{color:#404040}.ui-datafield>.ui-btn.ui-selected,.ui-datefield>.ui-btn:enabled:active,.ui-datefield>.ui-btn.ui-state-active:enabled,.ui-datefield>.ui-btn.ui-selected:enabled{background-color:#ff9000;color:#000}.ui-date-picker .ui-datefield>.ui-btn:first-child{margin-right:2px}.ui-date-picker .ui-datefield>.ui-btn:last-child{margin-left:2px}.ui-date-picker .ui-datefield-year{width:114px}.ui-date-picker .ui-datefield-month{width:102px}.ui-date-picker .ui-datefield-day{width:68px}.ui-time-picker .ui-datefield-hour{width:74px}.ui-time-picker .ui-datefield-min{width:74px}.ui-time-picker .ui-datefield-period{width:84px;margin-left:10px}.ui-time-picker .ui-datefield{height:58px}.ui-time-picker .ui-datefield>.ui-btn{height:58px;line-height:58px;font-size:50px}.ui-time-picker .ui-datefield>.ui-btn.ui-datefield-period{font-size:48px}.ui-datetime-wheel{height:68px;margin:0 10px;margin-top:30px}.ui-time-picker .ui-datetime-wheel{margin-top:27px}.ui-datetime-wheel .ui-btn{width:68px;height:68px;float:left}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus{float:right;background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png) center center no-repeat}.ui-datetime-wheel .ui-wheel{display:block;margin-left:68px;margin-right:68px;height:68px;padding:10px 0;background:url(images/Datetimepicker/tw_timepicker_wheel_01.png) center center no-repeat}.ui-datetime-btns{position:absolute;bottom:0;width:100%;height:76px;border-top:2px solid #262626}.ui-datetime-btns::before{content:"";height:34px;width:1px;background-color:#262626;position:absolute;left:160px;top:20px}.ui-datetime-btns .ui-btn{height:100%;position:relative;background-color:transparent}.ui-datetime-btns .ui-btn:enabled:active,.ui-datetime-btns .ui-btn:enabled:focus,.ui-datetime-btns .ui-btn:enabled:active:focus{background-color:transparent}.ui-datetime-btns .ui-btn-left{width:160px;float:left;background:url(images/Datetimepicker/tw_timepicker_left_softbtn.png) center center no-repeat}.ui-datetime-btns .ui-btn-right{width:159px;float:right;background:url(images/Datetimepicker/tw_timepicker_right_softbtn.png) center center no-repeat}.ui-datetime-btns .ui-btn:disabled,.ui-datetime-btns .ui-btn.ui-state-disabled{opacity:.2}.ui-datetime-periods{height:102px;margin-top:7px;display:inline-block}.ui-datetime-periods .ui-btn,.ui-datetime-periods .ui-datetime-periods-separator{height:100%;float:left;padding:0;background:transparent}.ui-datetime-periods .ui-btn{width:102px;font-size:34px;line-height:102px}.ui-datetime-periods .ui-btn:enabled:focus{background:transparent}.ui-datetime-periods .ui-btn:enabled:active,.ui-datetime-periods .ui-btn:enabled:active:focus,.ui-datetime-periods .ui-btn.ui-selected:enabled:active,.ui-datetime-periods .ui-btn.ui-state-active:enabled:active{color:inherit;text-decoration:none;background:url(images/Datetimepicker/tw_timepicker_time_bg.png) center center no-repeat}.ui-datetime-periods .ui-btn.ui-selected:enabled,.ui-datetime-periods .ui-btn.ui-state-active:enabled{color:#ff9000;text-decoration:underline}.ui-datetime-periods .ui-datetime-periods-separator{width:24px;background:url(images/Datetimepicker/tw_timepicker_num_dot_01.png) center center no-repeat}.ui-datetime-wheel.ui-hidden,.ui-datetime-periods.ui-hidden{display:none}.ui-viewport-transitioning,.ui-viewport-transitioning .ui-page{width:100%;height:100%;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ui-pre-in{z-index:100;visibility:visible;display:block;top:0;left:0}.in{-webkit-animation-timing-function:ease-out;-webkit-animation-duration:350ms;-moz-animation-timing-function:ease-out;-moz-animation-duration:350ms;animation-timing-function:ease-out;animation-duration:350ms}.out{-webkit-animation-timing-function:ease-in;-webkit-animation-duration:225ms;-moz-animation-timing-function:ease-in;-moz-animation-duration:225ms;animation-timing-function:ease-in;animation-duration:225ms}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadeout{from{opacity:1}to{opacity:0}}@-moz-keyframes fadeout{from{opacity:1}to{opacity:0}}@keyframes fadeout{from{opacity:1}to{opacity:0}}.fade.out{opacity:0;-webkit-animation-duration:125ms;-webkit-animation-name:fadeout;-moz-animation-duration:125ms;-moz-animation-name:fadeout;animation-duration:125ms;animation-name:fadeout}.fade.in{opacity:1;-webkit-animation-duration:225ms;-webkit-animation-name:fadein;-moz-animation-duration:225ms;-moz-animation-name:fadein;animation-duration:225ms;animation-name:fadein}.slideup.out{-webkit-animation-name:fadeout;-webkit-animation-duration:250ms;-moz-animation-name:fadeout;-moz-animation-duration:250ms;animation-name:fadeout;animation-duration:250ms}.slideup.in{-webkit-transform:translateY(0);-webkit-animation-name:slideinfrombottom;-webkit-animation-duration:250ms;-moz-transform:translateY(0);-moz-animation-name:slideinfrombottom;-moz-animation-duration:250ms;transform:translateY(0);animation-name:slideinfrombottom;animation-duration:250ms}.slideup.in.reverse{-webkit-animation-name:fadein;-webkit-animation-duration:250ms;-moz-animation-name:fadein;-moz-animation-duration:250ms;animation-name:fadein;animation-duration:250ms}.slideup.out.reverse{z-index:101;-webkit-transform:translateY(100%);-webkit-animation-name:slideouttobottom;-webkit-animation-duration:250ms;-moz-transform:translateY(100%);-moz-animation-name:slideouttobottom;-moz-animation-duration:250ms;transform:translateY(100%);animation-name:slideouttobottom;animation-duration:250ms}@-webkit-keyframes slideinfrombottom{from{-webkit-transform:translateY(100%)}to{-webkit-transform:translateY(0)}}@-moz-keyframes slideinfrombottom{from{-moz-transform:translateY(100%)}to{-moz-transform:translateY(0)}}@keyframes slideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes slideouttobottom{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateY(100%)}}@-moz-keyframes slideouttobottom{from{-moz-transform:translateY(0)}to{-moz-transform:translateY(100%)}}@keyframes slideouttobottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popnone{from{opacity:1}to{opacity:1}}@-webkit-keyframes popin{from{transform:scale3d(0,0,1)}to{transform:scale3d(1,1,1)}}@-webkit-keyframes popout{from{transform:scale3d(1,1,1)}to{transform:scale3d(0,0,1)}}.pop.out.reverse{z-index:200;-webkit-animation-duration:225ms;-webkit-animation-name:popout;-moz-animation-duration:225ms;-moz-animation-name:popout;animation-duration:225ms;animation-name:popout}.pop.in.reverse{-webkit-animation-duration:225ms;-webkit-animation-name:popnone;-moz-animation-duration:225ms;-moz-animation-name:popnone;animation-duration:225ms;animation-name:popnone}.pop.in{-webkit-animation-duration:225ms;-webkit-animation-name:popin;-moz-animation-duration:225ms;-moz-animation-name:popin;animation-duration:225ms;animation-name:popin}.ui-indexscrollbar{display:block;position:fixed;right:0;top:0;width:2.8125rem;height:100%;padding-left:.125rem;background-color:rgba(33,33,33,1);z-index:10;overflow:visible;-webkit-user-select:none;cursor:pointer}.ui-indexscrollbar ul{position:absolute;width:100%;top:0}.ui-indexscrollbar ul li{color:rgba(84,84,84,1);display:block;width:100%;text-align:center;font-size:1.5rem;height:2.25rem}.ui-indexscrollbar ul li.ui-state-selected{background-color:rgba(43,43,43,1);color:rgba(55,161,237,1)}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary{position:relative;height:auto;top:0;right:-2.5rem;width:100%}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li{background-color:rgba(43,43,43,1);color:rgba(84,84,84,1)}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li.ui-state-selected{background-color:rgba(43,43,43,1);color:rgba(55,161,237,1)}.ui-indexscrollbar+.ui-listview li{padding-right:2.5rem}.ui-indexscrollbar-indicator{position:fixed;top:0;left:0;z-index:9;display:none}.ui-indexscrollbar-indicator>span{width:8.75rem;height:5.4375rem;position:absolute;display:block;top:50%;left:50%;margin-left:-5.625rem;margin-top:-2.6875rem;line-height:5.4375rem;font-size:4.375rem;text-align:center;background-color:rgba(0,61,107,.95);color:rgba(250,250,250,1)}.ui-indexscrollbar-indicator>span>span.ui-selected{color:rgba(55,161,237,1)}.ui-circularindexscrollbar{position:fixed;top:0;left:-100%;z-index:9999;width:100%;height:100%}.ui-circularindexscrollbar.ui-circularindexscrollbar-show .ui-circularindexscrollbar-indexbar{pointer-events:auto;-webkit-transform:scale(1,1);-webkit-transition-duration:500ms;-webkit-transition-timing-function:linear}.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar{pointer-events:none;position:absolute;top:0;left:100%;width:100%;height:100%;border-radius:50%;background:-webkit-radial-gradient(center,ellipse cover,transparent 59%,rgba(33,33,33,1) 59%);overflow:hidden;-webkit-transform:scale(1.2,1.2);-webkit-transition-duration:500ms;-webkit-transition-timing-function:linear}.ui-circularindexscrollbar .ui-circularindexscrollbar-index{position:absolute;top:50%;left:50%;box-sizing:border-box;width:50%;height:50%;margin-top:-50%;margin-left:-50%;-webkit-transform-origin:100% 100% 0;overflow:hidden}.ui-circularindexscrollbar .ui-circularindexscrollbar-index span{position:absolute;width:100%;height:100%;margin-left:50%;padding-top:.3125rem;text-align:center;color:rgba(84,84,84,1);-webkit-transform-origin:50% 100% 0;font-size:1.25rem}.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span{color:rgba(55,161,237,1)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator{position:absolute;top:50%;width:8.9375rem;height:8.9375rem;line-height:8.9375rem;border-radius:50%;background-color:rgba(0,61,107,.95);-webkit-mask-image:url(images/Indicator/b_fast_scroll_rollover_bg.png);-webkit-mask-repeat:no-repeat;-webkit-mask-size:8.9375rem;margin-top:-4.4375rem;margin-left:100%;-webkit-transform:translate3d(-6.703125rem,0,0)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text{text-align:center;font-size:4.375rem;color:rgba(55,161,237,1)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-minimize .ui-circularindexscrollbar-indicator-text{padding-right:.4375rem;text-align:right;font-size:2rem}.ui-scrollbar-bar-type{position:absolute}.ui-scrollbar-bar-type.ui-scrollbar-horizontal{left:0;bottom:0;width:100%;height:8px}.ui-scrollbar-bar-type.ui-scrollbar-vertical{right:0;top:0;width:.5rem;height:100%}.ui-scrollbar-bar-type .ui-scrollbar-indicator{position:absolute;background-color:rgba(102,102,102,1)}.ui-scrollbar-bar-type.ui-scrollbar-horizontal .ui-scrollbar-indicator{height:.25rem}.ui-scrollbar-bar-type.ui-scrollbar-vertical .ui-scrollbar-indicator{width:.25rem}.ui-scrollbar-bouncing-effect{display:none;position:absolute;background-repeat:no-repeat;-webkit-animation-duration:.47s;-moz-animation-duration:.47s;-ms-animation-duration:.47s;-o-animation-duration:.47s;-webkit-animation-timing-function:step-start;-moz-animation-timing-function:step-start;-ms-animation-timing-function:step-start;-o-animation-timing-function:step-start;animation-timing-function:step-start;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards;background-color:rgba(55,161,237,.7)}.ui-scrollbar-bouncing-effect::before{content:"";position:absolute;background-color:rgba(55,161,237,1)}.ui-scrollbar-bouncing-effect.ui-top,.ui-scrollbar-bouncing-effect.ui-bottom{width:100%;height:3.125rem;left:0;-webkit-mask-size:100% 3.125rem}.ui-scrollbar-bouncing-effect.ui-top::before,.ui-scrollbar-bouncing-effect.ui-bottom::before{width:100%;height:.125rem;-webkit-mask-size:100% .125rem}.ui-scrollbar-bouncing-effect.ui-left,.ui-scrollbar-bouncing-effect.ui-right{width:3.125rem;height:100%;top:0;-webkit-mask-size:3.125rem 100%}.ui-scrollbar-bouncing-effect.ui-left::before,.ui-scrollbar-bouncing-effect.ui-right::before{width:.0625rem;height:100%;-webkit-mask-size:.0625rem 100%}.ui-scrollbar-bouncing-effect.ui-top{top:0;-webkit-mask-image:url(images/Scroller/bouncing_top_glow.png)}.ui-scrollbar-bouncing-effect.ui-top::before{-webkit-mask-image:url(images/Scroller/bouncing_top_edge.png)}.ui-scrollbar-bouncing-effect.ui-bottom{bottom:0;-webkit-mask-image:url(images/Scroller/bouncing_bottom_glow.png)}.ui-scrollbar-bouncing-effect.ui-bottom::before{-webkit-mask-image:url(images/Scroller/bouncing_bottom_edge.png)}.ui-scrollbar-bouncing-effect.ui-left{left:0;-webkit-mask-image:url(images/Scroller/bouncing_left_glow.png)}.ui-scrollbar-bouncing-effect.ui-left::before{-webkit-mask-image:url(images/Scroller/bouncing_left_edge.png)}.ui-scrollbar-bouncing-effect.ui-right{right:0;-webkit-mask-image:url(images/Scroller/bouncing_right_glow.png)}.ui-scrollbar-bouncing-effect.ui-right::before{-webkit-mask-image:url(images/Scroller/bouncing_right_edge.png)}@-webkit-keyframes ui-bouncing-show{0%{opacity:0}10%{opacity:.1}20%{opacity:.2}30%{opacity:.3}40%{opacity:.4}50%{opacity:.5}60%{opacity:.6}70%{opacity:.7}80%{opacity:.8}90%{opacity:.9}100%{opacity:1}}@-webkit-keyframes ui-bouncing-hide{0%{opacity:1}10%{opacity:.9}20%{opacity:.8}30%{opacity:.7}40%{opacity:.6}50%{opacity:.5}60%{opacity:.4}70%{opacity:.3}80%{opacity:.2}90%{opacity:.1}100%{opacity:0}}.ui-scrollbar-bouncing-effect.ui-show{display:block;-webkit-animation-name:ui-bouncing-show}.ui-scrollbar-bouncing-effect.ui-hide{display:block;-webkit-animation-name:ui-bouncing-hide}.ui-swipelist{position:absolute;top:0}.ui-swipelist-left,.ui-swipelist-right{position:absolute;display:none}.ui-swipelist-left{background:-webkit-linear-gradient(left,rgba(98,168,24,1) 0,rgba(8,8,8,1) 0)}.ui-swipelist-right{background:-webkit-linear-gradient(right,rgba(235,164,23,1) 0,rgba(8,8,8,1) 0)}.ui-swipelist-icon,.ui-swipelist-text{position:absolute}.ui-swipelist-left .ui-swipelist-icon{width:20%;height:100%;margin-left:2%;background-color:rgba(245,245,245,1);-webkit-mask-image:url(images/Swipelist/b_logs_icon_body_btn_call_nor.png);-webkit-mask-repeat:no-repeat}.ui-swipelist-left .ui-swipelist-text{margin-left:40%;height:100%;line-height:90px}.ui-swipelist-right .ui-swipelist-icon{width:20%;height:100%;margin-left:80%;background-color:rgba(245,245,245,1);-webkit-mask-image:url(images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png);-webkit-mask-repeat:no-repeat}.ui-swipelist-right .ui-swipelist-text{margin-left:20%;height:100%;line-height:90px}.ui-tab-indicator{position:relative;height:6px}.ui-tab-indicator .ui-tab-item{position:absolute;top:0;left:0;display:block;height:6px;background-color:rgba(76,103,125,1)}.ui-tab-indicator .ui-tab-item.ui-tab-active{background-color:rgba(55,161,237,1)}input[type=checkbox]:not(.ui-switch-input),input[type=radio]{box-sizing:border-box;padding:0;height:56px;width:56px;font-size:32px;-webkit-appearance:none;position:relative}input[type=radio]{background-color:rgba(0,14,26,1);-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);-webkit-mask-repeat:no-repeat}input[type=radio]::after{content:"";background-color:rgba(245,245,245,.3);-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_line.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:checked::before{content:"";background-color:rgba(112,186,15,1);-webkit-mask-image:url(images/Controller_icon/tw_btn_radio_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:active{background-color:rgba(0,50,84,.4);-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);-webkit-mask-repeat:no-repeat}input[type=radio]:active::after{content:"";background-color:rgba(245,245,245,.3);-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_line.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:active:checked::before{content:"";background-color:rgba(245,245,245,1);-webkit-mask-image:url(images/Controller_icon/tw_btn_radio_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input){-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,14,26,1)}input[type=checkbox]:not(.ui-switch-input)::after{content:"";background-color:rgba(245,245,245,.3);-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):checked::before{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_check_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(112,186,15,1);width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):active{-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(0,50,84,.4)}input[type=checkbox]:not(.ui-switch-input):active::after{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(245,245,245,.3);width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):active:checked::before{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_check_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:rgba(245,245,245,1);width:56px;height:56px;position:absolute}.ui-marquee{position:relative;white-space:nowrap;overflow:hidden;-webkit-user-select:none}.ui-marquee.ui-marquee-gradient{text-overflow:clip}.ui-marquee.ui-marquee-gradient::after{content:"";width:6.875rem;height:100%;background:-webkit-linear-gradient(left,transparent 0,rgba(8,8,8,1) 100%);position:absolute;right:0}.ui-marquee.ui-marquee-ellipsis .ui-marquee-content{display:block;overflow:hidden;text-overflow:ellipsis}.ui-marquee-content{overflow:visible;display:inline-block}.ui-marquee-anim-running{-webkit-animation-play-state:running}.ui-marquee-anim-stopped{-webkit-animation-play-state:paused}.ui-page-indicator{position:absolute;left:50%;-webkit-transform:translate3d(-50%,0,0);-moz-transform:translate3d(-50%,0,0);-ms-transform:translate3d(-50%,0,0);-o-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.ui-page-indicator-item{position:relative;display:inline-block;width:.8125rem;height:.8125rem;-webkit-mask-image:-webkit-radial-gradient(#000 .25rem,transparent .375rem);background-color:rgba(245,245,245,.4);margin-right:.5625rem;-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-page-indicator-item:last-child{margin-right:0}.ui-page-indicator-item.ui-page-indicator-active{background-color:rgba(245,245,245,1);-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-snap-listview li{-webkit-scroll-snap-destination:50% 50%}.ui-drawer{width:100%;height:100%;position:fixed;top:0;background-color:rgba(8,8,8,1);z-index:1201;box-sizing:border-box}.ui-drawer.ui-drawer-close{overflow:hidden}.ui-drawer.ui-drawer-open{overflow:auto}.ui-drawer-overlay{top:0;position:fixed;background-color:rgba(0,0,0,.8);z-index:1200}.ui-page .ui-expandable-header{height:60px}.ui-page .ui-expandable-header.ui-header-expand{height:80px}.ui-page .ui-expandable-header.ui-header-expand .ui-title{padding-top:0;transform:translate3d(0,20px,0)}.ui-section-changer{height:100%}
\ No newline at end of file
diff --git a/lib/tau/wearable/theme/default/tau.min.template b/lib/tau/wearable/theme/default/tau.min.template
new file mode 100644
index 0000000..157d732
--- /dev/null
+++ b/lib/tau/wearable/theme/default/tau.min.template
@@ -0,0 +1 @@
+*{outline:0}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:Tizen,Samsung Sans,Helvetica}body{margin:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button[disabled],input[disabled]{cursor:default}input[type=time],input[type=date]{color:#000}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.screen-hidden{visibility:hidden;position:absolute;top:-10000em;left:-10000em}button,input{outline:0;cursor:pointer}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}a{text-decoration:none!important;color:T0811}ul,li{margin:0;padding:0;list-style-type:none}img{margin:0;padding:0}html{-webkit-tap-highlight-color:rgba(0,0,0,0)}body{height:100%;font-size:2.125rem;font-family:Tizen,Samsung Sans,Helvetica;background:B011;color:T0811}.ui-page{width:100%;height:100%;overflow:hidden;display:none;position:absolute;top:0;left:0;background:B011;-webkit-tap-highlight-color:rgba(0,0,0,0)}.ui-page.ui-page-active{display:block}.ui-page.ui-page-build{display:block;visibility:hidden}.scrolling-mode-touch{-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-content{width:auto;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-header{position:relative;width:100%;height:60px;line-height:60px;background-color:B0511}.ui-header .ui-title{color:T012;font-size:32px;font-weight:700;white-space:nowrap;overflow:hidden;margin:0;padding-left:16px;padding-right:16px;-webkit-mask-image:-webkit-linear-gradient(left,#000 80%,rgba(0,0,0,0) 95%)}.ui-header .ui-title.ui-icon{padding-left:60px;background-position:16px 14px;background-size:34px 34px;background-repeat:no-repeat}.ui-header.ui-has-more .ui-title{padding-right:78px;-webkit-mask-image:-webkit-linear-gradient(left,#000 70%,rgba(0,0,0,0) 75%)}.ui-header button.ui-more,.ui-header input.ui-more{border:0 none;padding:0}.ui-header .ui-more-disable{cursor:default;background-color:transparent}.ui-header .ui-more{display:block;position:absolute;top:0;right:0;width:68px;height:100%;overflow:hidden;text-indent:-1000em;background-position:center center;background-color:transparent;cursor:pointer}.ui-header .ui-more:active{background-color:W011P!important}.ui-header .ui-more.ui-icon-detail{background-color:B052L1;-webkit-mask-image:url(images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-detail[disabled=disabled]{cursor:default;background-color:transparent;background-color:B052L1D;-webkit-mask-image:url(images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-overflow{background-color:B052L1;-webkit-mask-image:url(images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position-x:.9375rem;-webkit-mask-position-y:50%;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-overflow[disabled=disabled]{cursor:default;background-color:transparent;background-color:B052L1D;-webkit-mask-image:url(images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-selectall{background-color:B052L1;-webkit-mask-image:url(images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-header .ui-more.ui-icon-selectall[disabled=disabled]{cursor:default;background-color:transparent;background-color:B052L1D;-webkit-mask-image:url(images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png);-webkit-mask-size:3.25rem 3.75rem;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.ui-footer{width:100%;height:85px;position:absolute;bottom:0;left:0}.ui-page.ui-scroll-on{overflow:auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-page.ui-scroll-on .ui-content{height:auto!important}.ui-page.ui-scroll-on .ui-footer{position:relative}.ui-header.ui-fixed{position:fixed!important;top:0;left:0;width:100%;z-index:1000}.ui-footer.ui-fixed{position:fixed!important;bottom:0;left:0;width:100%;z-index:1000;-webkit-transform:translate3d(0,0,0)}.ui-grid-col>*{float:left}.ui-page .ui-grid-col-1>*{float:left}.ui-page .ui-grid-col-1>*{width:100%}.ui-page .ui-grid-col-2>*{float:left}.ui-page .ui-grid-col-2>*{width:50%}.ui-page .ui-grid-col-3>*{float:left}.ui-page .ui-grid-col-3>*{width:33.333333333333336%}.ui-grid-row>*{display:block}@-webkit-keyframes indeterminate{0%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}25%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}50%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}75%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}100%{-webkit-mask-image:url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:B065L6}}progress{position:relative;padding-left:1rem;padding-right:1rem;margin-top:.875rem;margin-bottom:.875rem;color:T0811;width:100%;height:.375rem;-webkit-appearance:none;border:0}progress::-webkit-progress-bar{position:relative;background-color:B065L3;border-radius:.125rem;overflow:hidden}progress::-webkit-progress-value{background-color:B065L2;height:.375rem;border-radius:.125rem;overflow:hidden}progress.ui-progress-indeterminate::-webkit-progress-bar{background-color:B065L2}progress.ui-progress-indeterminate::-webkit-progress-value{background-size:100% 100%;-webkit-animation:indeterminate 150ms infinite}.ui-progress-proportion{display:inline-block;float:left;font-size:20px;padding-left:1rem;padding-right:1rem;margin-top:-.625rem}.ui-progress-ratio{display:inline-block;float:right;font-size:20px;padding-left:1rem;padding-right:1rem;margin-top:-.625rem}.ui-circle-progress{display:none}.ui-progressbar.ui-progressbar-full{position:fixed;top:0;left:0;width:100%;height:100%}.ui-progressbar.ui-progressbar-large{width:6.25rem;height:6.25rem}.ui-progressbar.ui-progressbar-medium{width:5.25rem;height:5.25rem}.ui-progressbar.ui-progressbar-small{width:3.5rem;height:3.5rem}.ui-progressbar{position:relative;display:inline-block;pointer-events:none}.ui-progressbar .ui-progressbar-value.ui-progressbar-half{clip:rect(auto,auto,auto,auto)}.ui-progressbar .ui-progressbar-value.ui-progressbar-half .ui-progressbar-value-right{-webkit-transform:rotate(180deg)}.ui-progressbar .ui-progressbar-value{clip:rect(0,1em,1em,.5em);width:100%;height:100%;position:absolute}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left{border:.5rem solid B065L2;border-radius:50%;clip:rect(0,.5em,1em,0);height:100%;width:100%;position:absolute}.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right{border:.5rem solid B065L2;border-radius:50%;clip:rect(0,.5em,1em,0);width:100%;height:100%;position:absolute}.ui-progressbar .ui-progressbar-bg{border:.5rem solid B065L3;border-radius:50%;width:100%;height:100%}.ui-switch{width:100%;color:T0811}.ui-switch-inneroffset,.ui-switch-handler{display:none}.ui-switch-text{margin-top:30px;margin-bottom:40px;padding:0 30px;font-size:34px;text-align:center}.ui-switch-sub-text{margin-top:48px;margin-bottom:55px;font-size:26px;text-align:center;color:T161}.ui-toggleswitch{position:relative;display:inline-block;width:92px;height:49px}.ui-toggleswitch .ui-switch-input{position:absolute;width:100%;height:100%;-webkit-appearance:none;display:block}.ui-toggleswitch .ui-switch-input::before{content:"";position:absolute;width:100%;height:100%;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 0;background-color:W014L2P;z-index:0}.ui-toggleswitch .ui-switch-input:active::before{background-color:W014L2P}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button{background-color:W014L4P}.ui-toggleswitch .ui-switch-input:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:active~.ui-switch-button::before{background-color:W014L6P}.ui-toggleswitch .ui-switch-activation,.ui-toggleswitch .ui-switch-button{width:59px;height:49px;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 -49px;background-color:W014L4;position:absolute;top:0;left:0;pointer-events:none;z-index:1}.ui-toggleswitch .ui-switch-activation::before,.ui-toggleswitch .ui-switch-button::before{content:"";position:absolute;width:100%;height:100%;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:92px;-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 -98px;background-color:W014L6;top:0;left:0}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button{width:59px;height:49px;-webkit-mask-position:0 -49px;background-color:W014L3;-webkit-transform:translate3d(33px,0,0);-moz-transform:translate3d(33px,0,0);-ms-transform:translate3d(33px,0,0);-o-transform:translate3d(33px,0,0);transform:translate3d(33px,0,0)}.ui-toggleswitch .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -147px;background-color:W014L5}.ui-toggleswitch .ui-switch-input:checked::before{background-color:W014L1}.ui-toggleswitch .ui-switch-input:checked:active::before{background-color:W014L1P}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button{background-color:W014L3P}.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-activation::before,.ui-toggleswitch .ui-switch-input:checked:active~.ui-switch-button::before{background-color:W014L5P}.ui-toggleswitch.ui-toggleswitch-large{width:207px;height:110px;display:block;margin:0 auto}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button{width:132px;height:110px;-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:207px;-webkit-mask-position:0 -110px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before{-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-position:0 -220px;-webkit-mask-size:207px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before{-webkit-mask-image:url(images/Controller_icon/toggle_changeable.png);-webkit-mask-size:207px}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button{width:132px;height:110px;-webkit-mask-position:0 -110px;-webkit-transform:translate3d(75px,0,0);-moz-transform:translate3d(75px,0,0);-ms-transform:translate3d(75px,0,0);-o-transform:translate3d(75px,0,0);transform:translate3d(75px,0,0)}.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-activation::before,.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked~.ui-switch-button::before{-webkit-mask-position:0 -330px}@-webkit-keyframes rotating{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}.ui-processing{background-color:B066L1;-webkit-mask-image:url(images/Processing/tw_progress_small_loading_bg.png);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-animation:rotating 1s linear infinite;width:3.5rem;height:3.5rem;margin:0 auto;margin-top:2.125rem;margin-bottom:.875rem}.ui-processing-text{margin:0 auto;text-align:center;width:10.5rem;font-size:1.5rem}.ui-processing.ui-processing-full-size{background-color:transparent;-webkit-mask-image:none;-webkit-animation:none;width:100%;height:100%;pointer-events:none;position:fixed;top:0;left:0;margin:0}.ui-processing.ui-processing-full-size::after{content:"";background-color:B065L2;-webkit-mask-image:url(images/Processing/tw_progress_full_loading_bg.png);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-animation:rotating 1s linear infinite;width:100%;height:100%;position:absolute}.ui-btn{display:block;padding-top:28.5px;padding-right:10px;padding-bottom:28.5px;padding-left:10px;margin:0;font-size:32px;line-height:28px;text-align:center;white-space:nowrap;cursor:pointer;vertical-align:middle;text-overflow:ellipsis;overflow:hidden;border:0 none;color:T041;background-color:W011}a.ui-btn:active:hover,.ui-btn:enabled:active:hover{background-color:W011P}.ui-btn:enabled:focus{background-color:W011}a.ui-btn.ui-state-disabled,.ui-btn:disabled{color:T041D;background-color:W011D;cursor:default}.ui-btn.ui-multiline{padding-top:10px;padding-bottom:10px}.ui-btn.ui-inline{display:inline-block}.ui-btn.ui-btn-icon{background-position:center center;height:76px;text-indent:-1000em;overflow:hidden;background-repeat:no-repeat;background-size:60px 60px}.ui-default{color:T041;background-color:W011}a.ui-default:active:hover,.ui-default:enabled:active:hover{background-color:W011P}.ui-default:enabled:focus{background-color:W011}a.ui-default.ui-state-disabled,.ui-default:disabled{color:T041D;background-color:W011D;cursor:default}.ui-color-red{color:T041;background-color:W012}a.ui-color-red:active:hover,.ui-color-red:enabled:active:hover{background-color:W012P}.ui-color-red:enabled:focus{background-color:W012}a.ui-color-red.ui-state-disabled,.ui-color-red:disabled{color:T041D;background-color:W012D;cursor:default}.ui-color-orange{color:T041;background-color:W013}a.ui-color-orange:active:hover,.ui-color-orange:enabled:active:hover{background-color:W013P}.ui-color-orange:enabled:focus{background-color:W013}a.ui-color-orange.ui-state-disabled,.ui-color-orange:disabled{color:T041D;background-color:W013D;cursor:default}.ui-color-green{color:T041;background-color:W014}a.ui-color-green:active:hover,.ui-color-green:enabled:active:hover{background-color:W014P}.ui-color-green:enabled:focus{background-color:W014}a.ui-color-green.ui-state-disabled,.ui-color-green:disabled{color:T041D;background-color:W014D;cursor:default}.ui-btn:focus,.ui-btn:active{outline:0}a.ui-btn{text-decoration:none;box-sizing:border-box}button.ui-btn,input.ui-btn{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;width:100%}button.ui-btn.ui-inline,input.ui-btn.ui-inline{display:inline-block;width:auto}.ui-grid-col-1>.ui-btn{border-left:solid 1px B011}.ui-grid-col-1>.ui-btn:first-child{border-left:0 none}.ui-grid-col-2>.ui-btn{border-left:solid 1px B011}.ui-grid-col-2>.ui-btn:first-child{border-left:0 none}.ui-grid-col-3>.ui-btn{border-left:solid 1px B011}.ui-grid-col-3>.ui-btn:first-child{border-left:0 none}.ui-grid-row>.ui-btn{margin-top:1px}.ui-grid-row>.ui-btn:first-child{margin-top:0}.ui-popup{position:fixed;left:0;width:100%;margin:0;background-color:B061L1E;border:3px solid B061L7;display:none;z-index:1100}.ui-popup:not(.ui-ctxpopup){bottom:0}.ui-popup .ui-popup-header{width:100%;min-height:68px;font-size:30px;text-align:left;background-color:B061L2;color:T091;padding-top:14px;padding-right:13px;padding-bottom:14px;padding-left:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-popup .ui-popup-content{width:100%;min-height:14rem;font-size:2.125rem;text-align:left;color:T0811;background-color:B061L1E;padding:10px 16px 9px;overflow:auto;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-popup .ui-popup-content .ui-listview,.ui-popup .ui-popup-content .ui-inline-listview{margin:-.5625rem -1rem -.5625rem -1rem}.ui-popup .ui-popup-content .ui-listview li,.ui-popup .ui-popup-content .ui-inline-listview li{font-size:2.125rem}.ui-popup .ui-popup-footer{width:100%;height:83px}.ui-popup .ui-popup-footer .ui-btn{padding-top:27px;padding-bottom:28px;font-size:30px}.ui-popup.ui-popup-active{display:block}.ui-popup.in{display:block}.ui-popup.ui-build{display:block;visibility:hidden}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast){max-height:100%}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-wrapper{width:100%;max-height:100%;overflow:auto!important;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;-o-overflow-scrolling:touch;-ms-overflow-scrolling:touch;overflow-scrolling:touch}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content{height:auto!important}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header.ui-fixed{position:absolute!important;top:0;left:0;width:100%;z-index:2100}.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-footer.ui-fixed{position:absolute!important;bottom:0;left:0;width:100%;z-index:2100;-webkit-transform:translate3d(0,0,0)}.ui-popup.ui-ctxpopup{background-color:transparent;width:100%;border:0 none;border-radius:0;overflow:visible}div.ui-popup.ui-ctxpopup.ui-popup-content-size{width:auto;padding:0}div.ui-popup.ui-ctxpopup.ui-popup-content-size .ui-popup-content{width:auto}.ui-popup.ui-ctxpopup .ui-popup-content{background-color:B092L1;border:1px solid B092L2;color:#333;min-height:initial}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li{color:T111;border-bottom:1px solid B094;min-height:90px;padding:21px 8px 20px 16px}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a{color:T111;margin:-21px -16px;padding:21px 16px;min-height:48px}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active{color:T111P;background-color:B093P}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li:last-child{border:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon{position:relative;padding-left:4.25rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon a{margin-left:-4.25rem;padding-left:4.25rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon::before{content:"";position:absolute;top:50%;left:.375rem;width:3.5rem;height:3.5rem;margin-top:-1.75rem;background-color:B095;-webkit-mask-size:3.5rem 3.5rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-size:3.5rem 3.5rem}.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview a.ui-list-icon:active::before{background-color:B095P}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview{height:4.3125rem;overflow:hidden}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li{float:left;height:4.1875rem;line-height:4.1875rem;border-right:1px solid B097}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li:last-child{border:0}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a{display:block;width:100%;height:100%;padding:0rem .5rem;color:T111}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active{color:T111P;background-color:B093P}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext{width:3.6875rem;height:4.1875rem;text-indent:-1000em;overflow:hidden;position:relative}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext::before{content:"";position:absolute;top:50%;left:50%;width:2.6875rem;height:2.6875rem;margin-top:-1.34375rem;margin-left:-1.34375rem;background-color:B096;-webkit-mask-size:2.6875rem 2.6875rem;-webkit-mask-repeat:no-repeat;mask-size:2.6875rem 2.6875rem;mask-repeat:no-repeat}.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview a.ui-list-icon-notext:active::before{background-color:B096P}.ui-popup.ui-ctxpopup .ui-arrow{width:36px;height:15px;overflow:hidden;position:absolute;display:none;animation-duration:0;-webkit-animation-duration:0}.ui-popup.ui-ctxpopup .ui-arrow span{width:20px;height:20px;background-color:B092L1;border:1px solid B092L2;position:absolute;top:6px;left:8px;-webkit-transform:rotate(55deg) skew(24deg);transform:rotate(55deg) skew(24deg);animation-duration:0;-webkit-animation-duration:0}.ui-popup.ui-ctxpopup.ui-popup-arrow-b{padding:20px 20px 0}.ui-popup.ui-ctxpopup.ui-popup-arrow-t{padding:0 20px 20px}.ui-popup.ui-ctxpopup.ui-popup-arrow-r{padding:20px 0 20px 20px}.ui-popup.ui-ctxpopup.ui-popup-arrow-l{padding:20px 20px 20px 0}.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow{display:block;bottom:-.875rem;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow{display:block;top:-14px}.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow{display:block;right:-25px;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow{display:block;left:-25px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.ui-popup.ui-popup-toast{margin-left:0;margin-right:0;margin-bottom:0;font-size:1.5rem;border:3px solid B061L7;border-radius:0;border-left:0;border-right:0;position:absolute;bottom:0;top:auto;height:auto}.ui-popup.ui-popup-toast .ui-popup-content{min-height:initial;padding:.6875rem 2.625rem .75rem;background-color:B061L1E}.ui-popup-overlay{position:fixed;display:none;top:0;width:100%;height:100%;z-index:100;background-color:W1712}.ui-popup-overlay.in{display:block}.ui-popup.slideup.in{-webkit-animation-name:popupslideinfrombottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popupslideinfrombottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.slideup.out{-webkit-animation-name:popupslideouttobottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popupslideouttobottom;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes popupslideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0%)}}@keyframes popupslideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0%)}}@-webkit-keyframes popupslideouttobottom{from{transform:translateY(0%)}to{transform:translateY(100%)}}@keyframes popupslideouttobottom{from{transform:translateY(0%)}to{transform:translateY(100%)}}.ui-popup.pop.in{-webkit-animation-name:popuppopin;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popuppopin;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.pop.out{-webkit-animation-name:popuppopout;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:popuppopout;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes popuppopin{from{transform:scale3d(0,0,1)}to{transform:scale3d(1,1,1)}}@-webkit-keyframes popuppopout{from{transform:scale3d(1,1,1)}to{transform:scale3d(0,0,1)}}.ui-popup-overlay.slideup.in,.ui-popup-overlay.pop.in{-webkit-animation-name:fadein;-webkit-animation-duration:250ms;animation-name:fadein;animation-duration:250ms}.ui-popup-overlay.slideup.out,.ui-popup-overlay.pop.out{-webkit-animation-name:fadeout;-webkit-animation-duration:250ms;animation-name:fadeout;animation-duration:250ms}.ui-popup.ui-popup-arrow-t.slideup.in,.ui-popup.ui-popup-arrow-l.slideup.in,.ui-popup.ui-popup-arrow-r.slideup.in{-webkit-animation-name:ctxpopupslideinfrombottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideinfrombottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-t.slideup.out,.ui-popup.ui-popup-arrow-l.slideup.out,.ui-popup.ui-popup-arrow-r.slideup.out{-webkit-animation-name:ctxpopupslideouttobottom;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideouttobottom;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-b.slideup.in{-webkit-animation-name:ctxpopupslideinfromtop;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideinfromtop;animation-duration:250ms;transition-timing-function:ease-in-out}.ui-popup.ui-popup-arrow-b.slideup.out{-webkit-animation-name:ctxpopupslideouttotop;-webkit-animation-duration:250ms;-webkit-transition-timing-function:ease-in-out;animation-name:ctxpopupslideouttotop;animation-duration:250ms;transition-timing-function:ease-in-out}@-webkit-keyframes ctxpopupslideinfrombottom{from{transform:translateY(20%);opacity:0}to{transform:translateY(0%);opacity:1}}@keyframes ctxpopupslideinfrombottom{from{transform:translateY(20%);opacity:0}to{transform:translateY(0%);opacity:1}}@-webkit-keyframes ctxpopupslideouttobottom{from{transform:translateY(0%);opacity:1}to{transform:translateY(20%);opacity:0}}@keyframes ctxpopupslideouttobottom{from{transform:translateY(0%);opacity:1}to{transform:translateY(20%);opacity:0}}@-webkit-keyframes ctxpopupslideinfromtop{from{transform:translateY(-20%);opacity:0}to{transform:translateY(0%);opacity:1}}@keyframes ctxpopupslideinfromtop{from{transform:translateY(-20%);opacity:0}to{transform:translateY(0%);opacity:1}}@-webkit-keyframes ctxpopupslideouttotop{from{transform:translateY(0%);opacity:1}to{transform:translateY(-20%);opacity:0}}@keyframes ctxpopupslideouttotop{from{transform:translateY(0%);opacity:1}to{transform:translateY(-20%);opacity:0}}.ui-listview li{font-size:2.5rem;line-height:3rem;width:100%;min-height:6.25rem;padding:1.3125rem .5rem 1.25rem 1rem;border-bottom:1px solid B0222;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;color:T0211}.ui-listview li>*{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-user-select:none;color:T0211}.ui-listview li>a{display:block;width:100%;height:100%;margin:-1.3125rem -1rem;padding:1.625rem 1rem;-o-box-sizing:content-box;-ms-box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.ui-listview li.ui-li-active{background-color:B041P;color:T0211P}.ui-listview .li-divider{height:1.875rem;min-height:1.875rem;line-height:1.875rem;padding:0 .5rem 0 1rem;background-color:B012;color:T0231;font-size:1.5rem}.ui-listview .ui-li-sub-text{color:T022;font-size:1.75rem}.ui-listview .ui-li-has-action-icon .ui-action-text{width:calc(100% - 4.8125rem);height:100%}.ui-listview .ui-li-has-action-icon .ui-action-text::after{content:"";position:absolute;height:3.5rem;width:.125rem;background-color:T0811;right:4.25rem;top:20%}.ui-listview .ui-li-has-action-icon .ui-action-divider{display:none}.ui-listview .ui-li-has-action-icon .ui-action-delete,.ui-listview .ui-li-has-action-icon .ui-action-setting,.ui-listview .ui-li-has-action-icon .ui-action-add{position:absolute;height:100%;width:4.5rem;right:0;top:0;-webkit-mask-size:3.5rem 3.5rem;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center center;padding:0;margin:0}.ui-listview .ui-li-has-action-icon .ui-action-delete{-webkit-mask-image:url(images/listview/tw_list_delete_holo_dark.png);background-color:F022L1i}.ui-listview .ui-li-has-action-icon .ui-action-setting{-webkit-mask-image:url(images/listview/tw_list_setting_holo_dark.png);background-color:F022L1i}.ui-listview .ui-li-has-action-icon .ui-action-add{-webkit-mask-image:url(images/listview/tw_list_add_holo_dark.png);background-color:F022L1i}.ui-listview .ui-li-has-action-icon.ui-li-active{background-color:transparent}.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active{background-color:B041P;color:T0211P}.ui-listview .ui-li-has-action-icon .ui-action-delete:active,.ui-listview .ui-li-has-action-icon .ui-action-setting:active,.ui-listview .ui-li-has-action-icon .ui-action-add:active{background-color:B041P;color:T0211P}.ui-datetime-widget{position:relative;height:100%}.ui-datetime{text-align:center;padding-top:56px}.ui-time-picker .ui-datetime{padding-top:53px}.ui-datetime:only-child{padding-top:92px}.ui-time-picker .ui-datetime:only-child{padding-top:89px}.ui-datetime input[type=date],.ui-datetime input[type=datetime],.ui-datetime input[type=time]{display:none}.ui-datefield{height:52px;display:inline-block;vertical-align:top}.ui-datefield>.ui-btn{float:left;height:52px;padding:0;line-height:52px;font-size:42px;font-weight:600;border-radius:2px;background-color:rgba(255,255,255,.15)}.ui-datefield .ui-datefield-separator{display:block;height:100%;float:left;width:18px;background:transparent url(images/Datetimepicker/tw_timepicker_num_dot.png)}.ui-datefield>.ui-btn:enabled:focus{background-color:rgba(255,255,255,.15)}.ui-datefield>.ui-btn:disabled{color:#404040}.ui-datafield>.ui-btn.ui-selected,.ui-datefield>.ui-btn:enabled:active,.ui-datefield>.ui-btn.ui-state-active:enabled,.ui-datefield>.ui-btn.ui-selected:enabled{background-color:#ff9000;color:#000}.ui-date-picker .ui-datefield>.ui-btn:first-child{margin-right:2px}.ui-date-picker .ui-datefield>.ui-btn:last-child{margin-left:2px}.ui-date-picker .ui-datefield-year{width:114px}.ui-date-picker .ui-datefield-month{width:102px}.ui-date-picker .ui-datefield-day{width:68px}.ui-time-picker .ui-datefield-hour{width:74px}.ui-time-picker .ui-datefield-min{width:74px}.ui-time-picker .ui-datefield-period{width:84px;margin-left:10px}.ui-time-picker .ui-datefield{height:58px}.ui-time-picker .ui-datefield>.ui-btn{height:58px;line-height:58px;font-size:50px}.ui-time-picker .ui-datefield>.ui-btn.ui-datefield-period{font-size:48px}.ui-datetime-wheel{height:68px;margin:0 10px;margin-top:30px}.ui-time-picker .ui-datetime-wheel{margin-top:27px}.ui-datetime-wheel .ui-btn{width:68px;height:68px;float:left}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus{float:right;background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png) center center no-repeat}.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled:active:hover,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled,.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled:active:hover{background:transparent url(images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png) center center no-repeat}.ui-datetime-wheel .ui-wheel{display:block;margin-left:68px;margin-right:68px;height:68px;padding:10px 0;background:url(images/Datetimepicker/tw_timepicker_wheel_01.png) center center no-repeat}.ui-datetime-btns{position:absolute;bottom:0;width:100%;height:76px;border-top:2px solid #262626}.ui-datetime-btns::before{content:"";height:34px;width:1px;background-color:#262626;position:absolute;left:160px;top:20px}.ui-datetime-btns .ui-btn{height:100%;position:relative;background-color:transparent}.ui-datetime-btns .ui-btn:enabled:active,.ui-datetime-btns .ui-btn:enabled:focus,.ui-datetime-btns .ui-btn:enabled:active:focus{background-color:transparent}.ui-datetime-btns .ui-btn-left{width:160px;float:left;background:url(images/Datetimepicker/tw_timepicker_left_softbtn.png) center center no-repeat}.ui-datetime-btns .ui-btn-right{width:159px;float:right;background:url(images/Datetimepicker/tw_timepicker_right_softbtn.png) center center no-repeat}.ui-datetime-btns .ui-btn:disabled,.ui-datetime-btns .ui-btn.ui-state-disabled{opacity:.2}.ui-datetime-periods{height:102px;margin-top:7px;display:inline-block}.ui-datetime-periods .ui-btn,.ui-datetime-periods .ui-datetime-periods-separator{height:100%;float:left;padding:0;background:transparent}.ui-datetime-periods .ui-btn{width:102px;font-size:34px;line-height:102px}.ui-datetime-periods .ui-btn:enabled:focus{background:transparent}.ui-datetime-periods .ui-btn:enabled:active,.ui-datetime-periods .ui-btn:enabled:active:focus,.ui-datetime-periods .ui-btn.ui-selected:enabled:active,.ui-datetime-periods .ui-btn.ui-state-active:enabled:active{color:inherit;text-decoration:none;background:url(images/Datetimepicker/tw_timepicker_time_bg.png) center center no-repeat}.ui-datetime-periods .ui-btn.ui-selected:enabled,.ui-datetime-periods .ui-btn.ui-state-active:enabled{color:#ff9000;text-decoration:underline}.ui-datetime-periods .ui-datetime-periods-separator{width:24px;background:url(images/Datetimepicker/tw_timepicker_num_dot_01.png) center center no-repeat}.ui-datetime-wheel.ui-hidden,.ui-datetime-periods.ui-hidden{display:none}.ui-viewport-transitioning,.ui-viewport-transitioning .ui-page{width:100%;height:100%;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ui-pre-in{z-index:100;visibility:visible;display:block;top:0;left:0}.in{-webkit-animation-timing-function:ease-out;-webkit-animation-duration:350ms;-moz-animation-timing-function:ease-out;-moz-animation-duration:350ms;animation-timing-function:ease-out;animation-duration:350ms}.out{-webkit-animation-timing-function:ease-in;-webkit-animation-duration:225ms;-moz-animation-timing-function:ease-in;-moz-animation-duration:225ms;animation-timing-function:ease-in;animation-duration:225ms}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadeout{from{opacity:1}to{opacity:0}}@-moz-keyframes fadeout{from{opacity:1}to{opacity:0}}@keyframes fadeout{from{opacity:1}to{opacity:0}}.fade.out{opacity:0;-webkit-animation-duration:125ms;-webkit-animation-name:fadeout;-moz-animation-duration:125ms;-moz-animation-name:fadeout;animation-duration:125ms;animation-name:fadeout}.fade.in{opacity:1;-webkit-animation-duration:225ms;-webkit-animation-name:fadein;-moz-animation-duration:225ms;-moz-animation-name:fadein;animation-duration:225ms;animation-name:fadein}.slideup.out{-webkit-animation-name:fadeout;-webkit-animation-duration:250ms;-moz-animation-name:fadeout;-moz-animation-duration:250ms;animation-name:fadeout;animation-duration:250ms}.slideup.in{-webkit-transform:translateY(0);-webkit-animation-name:slideinfrombottom;-webkit-animation-duration:250ms;-moz-transform:translateY(0);-moz-animation-name:slideinfrombottom;-moz-animation-duration:250ms;transform:translateY(0);animation-name:slideinfrombottom;animation-duration:250ms}.slideup.in.reverse{-webkit-animation-name:fadein;-webkit-animation-duration:250ms;-moz-animation-name:fadein;-moz-animation-duration:250ms;animation-name:fadein;animation-duration:250ms}.slideup.out.reverse{z-index:101;-webkit-transform:translateY(100%);-webkit-animation-name:slideouttobottom;-webkit-animation-duration:250ms;-moz-transform:translateY(100%);-moz-animation-name:slideouttobottom;-moz-animation-duration:250ms;transform:translateY(100%);animation-name:slideouttobottom;animation-duration:250ms}@-webkit-keyframes slideinfrombottom{from{-webkit-transform:translateY(100%)}to{-webkit-transform:translateY(0)}}@-moz-keyframes slideinfrombottom{from{-moz-transform:translateY(100%)}to{-moz-transform:translateY(0)}}@keyframes slideinfrombottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes slideouttobottom{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateY(100%)}}@-moz-keyframes slideouttobottom{from{-moz-transform:translateY(0)}to{-moz-transform:translateY(100%)}}@keyframes slideouttobottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popnone{from{opacity:1}to{opacity:1}}@-webkit-keyframes popin{from{transform:scale3d(0,0,1)}to{transform:scale3d(1,1,1)}}@-webkit-keyframes popout{from{transform:scale3d(1,1,1)}to{transform:scale3d(0,0,1)}}.pop.out.reverse{z-index:200;-webkit-animation-duration:225ms;-webkit-animation-name:popout;-moz-animation-duration:225ms;-moz-animation-name:popout;animation-duration:225ms;animation-name:popout}.pop.in.reverse{-webkit-animation-duration:225ms;-webkit-animation-name:popnone;-moz-animation-duration:225ms;-moz-animation-name:popnone;animation-duration:225ms;animation-name:popnone}.pop.in{-webkit-animation-duration:225ms;-webkit-animation-name:popin;-moz-animation-duration:225ms;-moz-animation-name:popin;animation-duration:225ms;animation-name:popin}.ui-indexscrollbar{display:block;position:fixed;right:0;top:0;width:2.8125rem;height:100%;padding-left:.125rem;background-color:B0722;z-index:10;overflow:visible;-webkit-user-select:none;cursor:pointer}.ui-indexscrollbar ul{position:absolute;width:100%;top:0}.ui-indexscrollbar ul li{color:T0311;display:block;width:100%;text-align:center;font-size:1.5rem;height:2.25rem}.ui-indexscrollbar ul li.ui-state-selected{background-color:B0724;color:T0311P}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary{position:relative;height:auto;top:0;right:-2.5rem;width:100%}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li{background-color:B0723;color:T0311}.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li.ui-state-selected{background-color:B0723;color:T0313}.ui-indexscrollbar+.ui-listview li{padding-right:2.5rem}.ui-indexscrollbar-indicator{position:fixed;top:0;left:0;z-index:9;display:none}.ui-indexscrollbar-indicator>span{width:8.75rem;height:5.4375rem;position:absolute;display:block;top:50%;left:50%;margin-left:-5.625rem;margin-top:-2.6875rem;line-height:5.4375rem;font-size:4.375rem;text-align:center;background-color:B0731;color:T0312}.ui-indexscrollbar-indicator>span>span.ui-selected{color:T0312P}.ui-circularindexscrollbar{position:fixed;top:0;left:-100%;z-index:9999;width:100%;height:100%}.ui-circularindexscrollbar.ui-circularindexscrollbar-show .ui-circularindexscrollbar-indexbar{pointer-events:auto;-webkit-transform:scale(1,1);-webkit-transition-duration:500ms;-webkit-transition-timing-function:linear}.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar{pointer-events:none;position:absolute;top:0;left:100%;width:100%;height:100%;border-radius:50%;background:-webkit-radial-gradient(center,ellipse cover,transparent 59%,B0722 59%);overflow:hidden;-webkit-transform:scale(1.2,1.2);-webkit-transition-duration:500ms;-webkit-transition-timing-function:linear}.ui-circularindexscrollbar .ui-circularindexscrollbar-index{position:absolute;top:50%;left:50%;box-sizing:border-box;width:50%;height:50%;margin-top:-50%;margin-left:-50%;-webkit-transform-origin:100% 100% 0;overflow:hidden}.ui-circularindexscrollbar .ui-circularindexscrollbar-index span{position:absolute;width:100%;height:100%;margin-left:50%;padding-top:.3125rem;text-align:center;color:T0311;-webkit-transform-origin:50% 100% 0;font-size:1.25rem}.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span{color:T0311P}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator{position:absolute;top:50%;width:8.9375rem;height:8.9375rem;line-height:8.9375rem;border-radius:50%;background-color:B0731;-webkit-mask-image:url(images/Indicator/b_fast_scroll_rollover_bg.png);-webkit-mask-repeat:no-repeat;-webkit-mask-size:8.9375rem;margin-top:-4.4375rem;margin-left:100%;-webkit-transform:translate3d(-6.703125rem,0,0)}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text{text-align:center;font-size:4.375rem;color:T0312P}.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-minimize .ui-circularindexscrollbar-indicator-text{padding-right:.4375rem;text-align:right;font-size:2rem}.ui-scrollbar-bar-type{position:absolute}.ui-scrollbar-bar-type.ui-scrollbar-horizontal{left:0;bottom:0;width:100%;height:8px}.ui-scrollbar-bar-type.ui-scrollbar-vertical{right:0;top:0;width:.5rem;height:100%}.ui-scrollbar-bar-type .ui-scrollbar-indicator{position:absolute;background-color:B071}.ui-scrollbar-bar-type.ui-scrollbar-horizontal .ui-scrollbar-indicator{height:.25rem}.ui-scrollbar-bar-type.ui-scrollbar-vertical .ui-scrollbar-indicator{width:.25rem}.ui-scrollbar-bouncing-effect{display:none;position:absolute;background-repeat:no-repeat;-webkit-animation-duration:.47s;-moz-animation-duration:.47s;-ms-animation-duration:.47s;-o-animation-duration:.47s;-webkit-animation-timing-function:step-start;-moz-animation-timing-function:step-start;-ms-animation-timing-function:step-start;-o-animation-timing-function:step-start;animation-timing-function:step-start;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards;background-color:B018E}.ui-scrollbar-bouncing-effect::before{content:"";position:absolute;background-color:B019}.ui-scrollbar-bouncing-effect.ui-top,.ui-scrollbar-bouncing-effect.ui-bottom{width:100%;height:3.125rem;left:0;-webkit-mask-size:100% 3.125rem}.ui-scrollbar-bouncing-effect.ui-top::before,.ui-scrollbar-bouncing-effect.ui-bottom::before{width:100%;height:.125rem;-webkit-mask-size:100% .125rem}.ui-scrollbar-bouncing-effect.ui-left,.ui-scrollbar-bouncing-effect.ui-right{width:3.125rem;height:100%;top:0;-webkit-mask-size:3.125rem 100%}.ui-scrollbar-bouncing-effect.ui-left::before,.ui-scrollbar-bouncing-effect.ui-right::before{width:.0625rem;height:100%;-webkit-mask-size:.0625rem 100%}.ui-scrollbar-bouncing-effect.ui-top{top:0;-webkit-mask-image:url(images/Scroller/bouncing_top_glow.png)}.ui-scrollbar-bouncing-effect.ui-top::before{-webkit-mask-image:url(images/Scroller/bouncing_top_edge.png)}.ui-scrollbar-bouncing-effect.ui-bottom{bottom:0;-webkit-mask-image:url(images/Scroller/bouncing_bottom_glow.png)}.ui-scrollbar-bouncing-effect.ui-bottom::before{-webkit-mask-image:url(images/Scroller/bouncing_bottom_edge.png)}.ui-scrollbar-bouncing-effect.ui-left{left:0;-webkit-mask-image:url(images/Scroller/bouncing_left_glow.png)}.ui-scrollbar-bouncing-effect.ui-left::before{-webkit-mask-image:url(images/Scroller/bouncing_left_edge.png)}.ui-scrollbar-bouncing-effect.ui-right{right:0;-webkit-mask-image:url(images/Scroller/bouncing_right_glow.png)}.ui-scrollbar-bouncing-effect.ui-right::before{-webkit-mask-image:url(images/Scroller/bouncing_right_edge.png)}@-webkit-keyframes ui-bouncing-show{0%{opacity:0}10%{opacity:.1}20%{opacity:.2}30%{opacity:.3}40%{opacity:.4}50%{opacity:.5}60%{opacity:.6}70%{opacity:.7}80%{opacity:.8}90%{opacity:.9}100%{opacity:1}}@-webkit-keyframes ui-bouncing-hide{0%{opacity:1}10%{opacity:.9}20%{opacity:.8}30%{opacity:.7}40%{opacity:.6}50%{opacity:.5}60%{opacity:.4}70%{opacity:.3}80%{opacity:.2}90%{opacity:.1}100%{opacity:0}}.ui-scrollbar-bouncing-effect.ui-show{display:block;-webkit-animation-name:ui-bouncing-show}.ui-scrollbar-bouncing-effect.ui-hide{display:block;-webkit-animation-name:ui-bouncing-hide}.ui-swipelist{position:absolute;top:0}.ui-swipelist-left,.ui-swipelist-right{position:absolute;display:none}.ui-swipelist-left{background:-webkit-linear-gradient(left,B0242 0,B011 0)}.ui-swipelist-right{background:-webkit-linear-gradient(right,B0241 0,B011 0)}.ui-swipelist-icon,.ui-swipelist-text{position:absolute}.ui-swipelist-left .ui-swipelist-icon{width:20%;height:100%;margin-left:2%;background-color:F021L1i;-webkit-mask-image:url(images/Swipelist/b_logs_icon_body_btn_call_nor.png);-webkit-mask-repeat:no-repeat}.ui-swipelist-left .ui-swipelist-text{margin-left:40%;height:100%;line-height:90px}.ui-swipelist-right .ui-swipelist-icon{width:20%;height:100%;margin-left:80%;background-color:F021L1i;-webkit-mask-image:url(images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png);-webkit-mask-repeat:no-repeat}.ui-swipelist-right .ui-swipelist-text{margin-left:20%;height:100%;line-height:90px}.ui-tab-indicator{position:relative;height:6px}.ui-tab-indicator .ui-tab-item{position:absolute;top:0;left:0;display:block;height:6px;background-color:B0514}.ui-tab-indicator .ui-tab-item.ui-tab-active{background-color:B0514P1}input[type=checkbox]:not(.ui-switch-input),input[type=radio]{box-sizing:border-box;padding:0;height:56px;width:56px;font-size:32px;-webkit-appearance:none;position:relative}input[type=radio]{background-color:W013L1;-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);-webkit-mask-repeat:no-repeat}input[type=radio]::after{content:"";background-color:W241;-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_line.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:checked::before{content:"";background-color:W013L2;-webkit-mask-image:url(images/Controller_icon/tw_btn_radio_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:active{background-color:W013L1P;-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);-webkit-mask-repeat:no-repeat}input[type=radio]:active::after{content:"";background-color:W241P;-webkit-mask-image:url(images/Controller_icon/tw_btn_radiobox_line.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=radio]:active:checked::before{content:"";background-color:W013L2P;-webkit-mask-image:url(images/Controller_icon/tw_btn_radio_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input){-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:W012L1}input[type=checkbox]:not(.ui-switch-input)::after{content:"";background-color:W231;-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);-webkit-mask-repeat:no-repeat;width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):checked::before{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_check_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:W012L2;width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):active{-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:W012L1P}input[type=checkbox]:not(.ui-switch-input):active::after{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:W231P;width:56px;height:56px;position:absolute}input[type=checkbox]:not(.ui-switch-input):active:checked::before{content:"";-webkit-mask-image:url(images/Controller_icon/tw_btn_check_holo_dark.png);-webkit-mask-repeat:no-repeat;background-color:W012L2P;width:56px;height:56px;position:absolute}.ui-marquee{position:relative;white-space:nowrap;overflow:hidden;-webkit-user-select:none}.ui-marquee.ui-marquee-gradient{text-overflow:clip}.ui-marquee.ui-marquee-gradient::after{content:"";width:6.875rem;height:100%;background:-webkit-linear-gradient(left,transparent 0,B0211 100%);position:absolute;right:0}.ui-marquee.ui-marquee-ellipsis .ui-marquee-content{display:block;overflow:hidden;text-overflow:ellipsis}.ui-marquee-content{overflow:visible;display:inline-block}.ui-marquee-anim-running{-webkit-animation-play-state:running}.ui-marquee-anim-stopped{-webkit-animation-play-state:paused}.ui-page-indicator{position:absolute;left:50%;-webkit-transform:translate3d(-50%,0,0);-moz-transform:translate3d(-50%,0,0);-ms-transform:translate3d(-50%,0,0);-o-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.ui-page-indicator-item{position:relative;display:inline-block;width:.8125rem;height:.8125rem;-webkit-mask-image:-webkit-radial-gradient(#000 .25rem,transparent .375rem);background-color:T0211D;margin-right:.5625rem;-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-page-indicator-item:last-child{margin-right:0}.ui-page-indicator-item.ui-page-indicator-active{background-color:W1911;-webkit-transition-duration:150ms;-moz-transition-duration:150ms;-o-transition-duration:150ms;-ms-transition-duration:150ms;transition-duration:150ms}.ui-snap-listview li{-webkit-scroll-snap-destination:50% 50%}.ui-drawer{width:100%;height:100%;position:fixed;top:0;background-color:B011;z-index:1201;box-sizing:border-box}.ui-drawer.ui-drawer-close{overflow:hidden}.ui-drawer.ui-drawer-open{overflow:auto}.ui-drawer-overlay{top:0;position:fixed;background-color:rgba(0,0,0,.8);z-index:1200}.ui-page .ui-expandable-header{height:60px}.ui-page .ui-expandable-header.ui-header-expand{height:80px}.ui-page .ui-expandable-header.ui-header-expand .ui-title{padding-top:0;transform:translate3d(0,20px,0)}.ui-section-changer{height:100%}
\ No newline at end of file
diff --git a/lib/tau/wearable/theme/default/tau.template b/lib/tau/wearable/theme/default/tau.template
new file mode 100644
index 0000000..9b2789b
--- /dev/null
+++ b/lib/tau/wearable/theme/default/tau.template
@@ -0,0 +1,2989 @@
+/***************************************************************************
+                  Body
+***************************************************************************/
+/***************************************************************************
+                   Action Bar
+***************************************************************************/
+/****************************************************************************
+               Circle Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Progress Bar
+****************************************************************************/
+/****************************************************************************
+		Processing
+****************************************************************************/
+/****************************************************************************
+		Toggle Switch
+****************************************************************************/
+/***************************************************************************
+                   Buttons
+***************************************************************************/
+/***************************************************************************
+                   Popup
+***************************************************************************/
+/***************************************************************************
+                   Option Popup
+***************************************************************************/
+/***************************************************************************
+                  index scrollbar (vertical)
+***************************************************************************/
+/***************************************************************************
+                  circular index scrollbar
+***************************************************************************/
+/***************************************************************************
+                  Listview
+***************************************************************************/
+/****************************************************************************
+               Listview with Marquee
+****************************************************************************/
+/***************************************************************************
+                   Scroller
+***************************************************************************/
+/***************************************************************************
+                   Swipe list
+***************************************************************************/
+/***************************************************************************
+                   Checkbox/Radio
+***************************************************************************/
+/***************************************************************************
+						Page Indicator
+***************************************************************************/
+/************************************************************************/
+/*                           fixedUIStyle.less                          */
+/************************************************************************/
+/* When system font-size is changed, winset size (ex. header, footer, button, etc,
+   include font) also changed. But in UX guide, some UI elements should have fixed
+   size regardless of system font size.
+   So, this less file supports fixed style for some elements.
+   - Layout: header, footer, button
+   - Popup : popup header, popup footer
+   - toggleswitch
+   - progress: text for ratio
+*/
+/***********************************************************************/
+/*                         Layout(FIXED)                               */
+/***********************************************************************/
+/**********************************************************************/
+/*                        Button(FIXED)                               */
+/**********************************************************************/
+/**********************************************************************/
+/*                       Popup(FIXED)                                 */
+/**********************************************************************/
+/**********************************************************************/
+/*                      ToggleSwitch(FIXED)                           */
+/**********************************************************************/
+/*********************************************************************/
+/*                     Progress(FIXED)                               */
+/*********************************************************************/
+/************************
+Listview
+*************************/
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+/*
+ * default outline set none
+ */
+* {
+  outline: none;
+}
+/*
+ * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+  display: block;
+}
+/*
+ * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+audio,
+canvas,
+video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+/*
+ * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
+ * and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+[hidden] {
+  display: none;
+}
+/* ==========================================================================
+   Base
+   ========================================================================== */
+/*
+ * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+ *	`em` units.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ *	user zoom.
+ */
+html {
+  font-size: 100%;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+}
+/*
+ * Addresses `font-family` inconsistency between `textarea` and other form
+ * elements.
+ */
+html,
+button,
+input,
+select,
+textarea {
+  font-family: Tizen, Samsung Sans, Helvetica;
+}
+/*
+ * Addresses margins handled incorrectly in IE 6/7.
+ */
+body {
+  margin: 0;
+}
+/* ==========================================================================
+   Links
+   ========================================================================== */
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+/*
+ * Addresses font sizes and margins set differently in IE 6/7.
+ * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
+ * and Chrome.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+h2 {
+  font-size: 1.5em;
+  margin: 0.83em 0;
+}
+h3 {
+  font-size: 1.17em;
+  margin: 1em 0;
+}
+h4 {
+  font-size: 1em;
+  margin: 1.33em 0;
+}
+h5 {
+  font-size: 0.83em;
+  margin: 1.67em 0;
+}
+h6 {
+  font-size: 0.75em;
+  margin: 2.33em 0;
+}
+/*
+ * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
+ */
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+/*
+ * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+ */
+b,
+strong {
+  font-weight: bold;
+}
+blockquote {
+  margin: 1em 40px;
+}
+/*
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+dfn {
+  font-style: italic;
+}
+/*
+ * Addresses styling not present in IE 6/7/8/9.
+ */
+mark {
+  background: #ff0;
+  color: #000;
+}
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+p,
+pre {
+  margin: 1em 0;
+}
+/*
+ * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+/*
+ * Addresses CSS quotes not supported in IE 6/7.
+ */
+q {
+  quotes: none;
+}
+/*
+ * Addresses `quotes` property not supported in Safari 4.
+ */
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+small {
+  font-size: 75%;
+}
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+/* ==========================================================================
+   Lists
+   ========================================================================== */
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+dl,
+menu,
+ol,
+ul {
+  margin: 1em 0;
+}
+dd {
+  margin: 0 0 0 40px;
+}
+/*
+ * Addresses paddings set differently in IE 6/7.
+ */
+menu,
+ol,
+ul {
+  padding: 0 0 0 40px;
+}
+/*
+ * Corrects list images handled incorrectly in IE 7.
+ */
+nav ul,
+nav ol {
+  list-style: none;
+  list-style-image: none;
+}
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+/*
+ * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improves image quality when scaled in IE 7.
+ */
+img {
+  border: 0;
+  /* 1 */
+  -ms-interpolation-mode: bicubic;
+  /* 2 */
+}
+/*
+ * Corrects overflow displayed oddly in IE 9.
+ */
+svg:not(:root) {
+  overflow: hidden;
+}
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+/*
+ * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+figure {
+  margin: 0;
+}
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+/*
+ * Corrects margin displayed oddly in IE 6/7.
+ */
+form {
+  margin: 0;
+}
+/*
+ * Define consistent border, margin, and padding.
+ */
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+/*
+ * 1. Corrects color not being inherited in IE 6/7/8/9.
+ * 2. Corrects text not wrapping in Firefox 3.
+ * 3. Corrects alignment displayed oddly in IE 6/7.
+ */
+legend {
+  border: 0;
+  /* 1 */
+  padding: 0;
+  white-space: normal;
+  /* 2 */
+  *margin-left: -7px;
+  /* 3 */
+}
+/*
+ * 1. Corrects font size not being inherited in all browsers.
+ * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *	and Chrome.
+ * 3. Improves appearance and consistency in all browsers.
+ */
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  vertical-align: baseline;
+  /* 3 */
+  *vertical-align: middle;
+  /* 3 */
+}
+/*
+ * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+button,
+input {
+  line-height: normal;
+}
+/*
+ * Re-set default cursor for disabled elements.
+ */
+button[disabled],
+input[disabled] {
+  cursor: default;
+}
+input[type="time"],
+input[type="date"] {
+  color: #000000;
+}
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *	(include `-moz` to future-proof).
+ */
+input[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  /* 2 */
+  box-sizing: content-box;
+}
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+/*
+ * Removes inner padding and border in Firefox 3+.
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+/*
+ * 1. Removes default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+textarea {
+  overflow: auto;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+}
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+/*
+ * Remove most spacing between table cells.
+ */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/*
+ * Common definition for theme
+ */
+/***************************************************************
+   default font size (base font from WRT)
+   => small: 13px
+   => normal: 17px
+   => large: 20px
+
+This is only applied to gear2.
+so, we set @font_size_default as 17px on gear2 and it was changed to 16px since gear-S.
+This value only used for @rem_base, not for html font-size
+html font-size is set by WRT base font-size
+***************************************************************/
+/******************************
+  z-index order collection
+ ******************************/
+/***************************************************************************
+                   Common Style
+***************************************************************************/
+.screen-hidden {
+  visibility: hidden;
+  position: absolute;
+  top: -10000em;
+  left: -10000em;
+}
+/***************************************************************************
+                   Default Style.
+***************************************************************************/
+button,
+input {
+  outline: none;
+  cursor: pointer;
+}
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none !important;
+  color: T0811;
+}
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+img {
+  margin: 0;
+  padding: 0;
+}
+/******************************
+  Global LESS mixin collection
+ ******************************/
+/***************************************************************************
+                   Common Style
+***************************************************************************/
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+  height: 100%;
+  font-size: 2.125rem;
+  font-family: Tizen, Samsung Sans, Helvetica;
+  background: B011;
+  color: T0811;
+}
+.ui-page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: B011;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /* overrides webkit link color */
+}
+.ui-page.ui-page-active {
+  display: block;
+}
+.ui-page.ui-page-build {
+  display: block;
+  visibility: hidden;
+}
+.scrolling-mode-touch {
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-content {
+  width: auto;
+  height: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-header {
+  position: relative;
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  background-color: B0511;
+}
+.ui-header .ui-title {
+  color: T012;
+  font-size: 32px;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  margin: 0px;
+  padding-left: 16px;
+  padding-right: 16px;
+  -webkit-mask-image: -webkit-linear-gradient(left, #000000 80%, rgba(0, 0, 0, 0) 95%);
+}
+.ui-header .ui-title.ui-icon {
+  padding-left: 60px;
+  background-position: 16px 14px;
+  background-size: 34px 34px;
+  background-repeat: no-repeat;
+}
+.ui-header.ui-has-more .ui-title {
+  padding-right: 78px;
+  -webkit-mask-image: -webkit-linear-gradient(left, #000000 70%, rgba(0, 0, 0, 0) 75%);
+}
+.ui-header button.ui-more,
+.ui-header input.ui-more {
+  border: 0 none;
+  padding: 0;
+}
+.ui-header .ui-more-disable {
+  cursor: default;
+  background-color: transparent;
+}
+.ui-header .ui-more {
+  display: block;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 68px;
+  height: 100%;
+  overflow: hidden;
+  text-indent: -1000em;
+  background-position: center center;
+  background-color: transparent;
+  cursor: pointer;
+}
+.ui-header .ui-more:active {
+  background-color: W011P !important;
+}
+.ui-header .ui-more.ui-icon-detail {
+  background-color: B052L1;
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-detail[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: B052L1D;
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-overflow {
+  background-color: B052L1;
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position-x: 0.9375rem;
+  -webkit-mask-position-y: 50%;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-overflow[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: B052L1D;
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-selectall {
+  background-color: B052L1;
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-header .ui-more.ui-icon-selectall[disabled="disabled"] {
+  cursor: default;
+  background-color: transparent;
+  background-color: B052L1D;
+  -webkit-mask-image: url("images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png");
+  -webkit-mask-size: 3.25rem 3.75rem;
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-footer {
+  width: 100%;
+  height: 85px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+/***************************************************************************
+                   Page Scroll
+***************************************************************************/
+.ui-page.ui-scroll-on {
+  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-page.ui-scroll-on .ui-content {
+  height: auto !important;
+}
+.ui-page.ui-scroll-on .ui-footer {
+  position: relative;
+}
+.ui-header.ui-fixed {
+  position: fixed !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+}
+.ui-footer.ui-fixed {
+  position: fixed !important;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  -webkit-transform: translate3d(0, 0, 0);
+}
+/***************************************************************************
+                   Grid layout
+***************************************************************************/
+.ui-grid-col > * {
+  float: left;
+}
+.ui-page .ui-grid-col-1 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-1 > * {
+  width: 100%;
+}
+.ui-page .ui-grid-col-2 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-2 > * {
+  width: 50%;
+}
+.ui-page .ui-grid-col-3 > * {
+  float: left;
+}
+.ui-page .ui-grid-col-3 > * {
+  width: 33.333333333333336%;
+}
+.ui-grid-row > * {
+  display: block;
+}
+/*
+ * Progressbar
+ */
+@-webkit-keyframes indeterminate {
+  0% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate1_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+  25% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate2_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+  50% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate3_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+  75% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate4_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+  100% {
+    -webkit-mask-image: url(images/Progress/tw_progressbar_indeterminate5_holo_dark.png);
+    -webkit-mask-repeat: no-repeat;
+    background-color: B065L6;
+  }
+}
+progress {
+  position: relative;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: 0.875rem;
+  margin-bottom: 0.875rem;
+  color: T0811;
+  width: 100%;
+  height: 0.375rem;
+  -webkit-appearance: none;
+  border: none;
+}
+progress::-webkit-progress-bar {
+  position: relative;
+  background-color: B065L3;
+  border-radius: 0.125rem;
+  overflow: hidden;
+}
+progress::-webkit-progress-value {
+  background-color: B065L2;
+  height: 0.375rem;
+  border-radius: 0.125rem;
+  overflow: hidden;
+}
+progress.ui-progress-indeterminate::-webkit-progress-bar {
+  background-color: B065L2;
+}
+progress.ui-progress-indeterminate::-webkit-progress-value {
+  background-size: 100% 100%;
+  -webkit-animation: indeterminate 150ms infinite;
+}
+.ui-progress-proportion {
+  display: inline-block;
+  float: left;
+  font-size: 20px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: -0.625rem;
+}
+.ui-progress-ratio {
+  display: inline-block;
+  float: right;
+  font-size: 20px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  margin-top: -0.625rem;
+}
+.ui-circle-progress {
+  display: none;
+}
+.ui-progressbar.ui-progressbar-full {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.ui-progressbar.ui-progressbar-large {
+  width: 6.25rem;
+  height: 6.25rem;
+}
+.ui-progressbar.ui-progressbar-medium {
+  width: 5.25rem;
+  height: 5.25rem;
+}
+.ui-progressbar.ui-progressbar-small {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+.ui-progressbar {
+  position: relative;
+  display: inline-block;
+  pointer-events: none;
+}
+.ui-progressbar .ui-progressbar-value.ui-progressbar-half {
+  clip: rect(auto, auto, auto, auto);
+}
+.ui-progressbar .ui-progressbar-value.ui-progressbar-half .ui-progressbar-value-right {
+  -webkit-transform: rotate(180deg);
+}
+.ui-progressbar .ui-progressbar-value {
+  clip: rect(0, 1em, 1em, 0.5em);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-left {
+  border: 0.5rem solid B065L2;
+  border-radius: 50%;
+  clip: rect(0, 0.5em, 1em, 0);
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-value .ui-progressbar-value-right {
+  border: 0.5rem solid B065L2;
+  border-radius: 50%;
+  clip: rect(0, 0.5em, 1em, 0);
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-progressbar .ui-progressbar-bg {
+  border: 0.5rem solid B065L3;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+}
+/*
+ * toggle switch
+ */
+.ui-switch {
+  width: 100%;
+  color: T0811;
+}
+.ui-switch-inneroffset,
+.ui-switch-handler {
+  display: none;
+}
+.ui-switch-text {
+  margin-top: 30px;
+  margin-bottom: 40px;
+  padding: 0 30px;
+  font-size: 34px;
+  text-align: center;
+}
+.ui-switch-sub-text {
+  margin-top: 48px;
+  margin-bottom: 55px;
+  font-size: 26px;
+  text-align: center;
+  color: T161;
+}
+.ui-toggleswitch {
+  position: relative;
+  display: inline-block;
+  width: 92px;
+  height: 49px;
+}
+.ui-toggleswitch .ui-switch-input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-appearance: none;
+  display: block;
+}
+.ui-toggleswitch .ui-switch-input::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 0;
+  background-color: W014L2P;
+  z-index: 0;
+}
+.ui-toggleswitch .ui-switch-input:active::before {
+  background-color: W014L2P;
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button {
+  background-color: W014L4P;
+}
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:active ~ .ui-switch-button::before {
+  background-color: W014L6P;
+}
+.ui-toggleswitch .ui-switch-activation,
+.ui-toggleswitch .ui-switch-button {
+  width: 59px;
+  height: 49px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 -49px;
+  background-color: W014L4;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+.ui-toggleswitch .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-button::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 92px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 0 -98px;
+  background-color: W014L6;
+  top: 0;
+  left: 0;
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button {
+  width: 59px;
+  height: 49px;
+  -webkit-mask-position: 0 -49px;
+  background-color: W014L3;
+  -webkit-transform: translate3d(33px, 0, 0);
+  -moz-transform: translate3d(33px, 0, 0);
+  -ms-transform: translate3d(33px, 0, 0);
+  -o-transform: translate3d(33px, 0, 0);
+  transform: translate3d(33px, 0, 0);
+}
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -147px;
+  background-color: W014L5;
+}
+.ui-toggleswitch .ui-switch-input:checked::before {
+  background-color: W014L1;
+}
+.ui-toggleswitch .ui-switch-input:checked:active::before {
+  background-color: W014L1P;
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button {
+  background-color: W014L3P;
+}
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-activation::before,
+.ui-toggleswitch .ui-switch-input:checked:active ~ .ui-switch-button::before {
+  background-color: W014L5P;
+}
+.ui-toggleswitch.ui-toggleswitch-large {
+  width: 207px;
+  height: 110px;
+  display: block;
+  margin: 0 auto;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button {
+  width: 132px;
+  height: 110px;
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 207px;
+  -webkit-mask-position: 0 -110px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-button::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-position: 0 -220px;
+  -webkit-mask-size: 207px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input::before {
+  -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png);
+  -webkit-mask-size: 207px;
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button {
+  width: 132px;
+  height: 110px;
+  -webkit-mask-position: 0 -110px;
+  -webkit-transform: translate3d(75px, 0, 0);
+  -moz-transform: translate3d(75px, 0, 0);
+  -ms-transform: translate3d(75px, 0, 0);
+  -o-transform: translate3d(75px, 0, 0);
+  transform: translate3d(75px, 0, 0);
+}
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-activation::before,
+.ui-toggleswitch.ui-toggleswitch-large .ui-switch-input:checked ~ .ui-switch-button::before {
+  -webkit-mask-position: 0 -330px;
+}
+/***********************
+Processing
+***********************/
+@-webkit-keyframes rotating {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+.ui-processing {
+  background-color: B066L1;
+  -webkit-mask-image: url("images/Processing/tw_progress_small_loading_bg.png");
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-animation: rotating 1s linear infinite;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin: 0 auto;
+  margin-top: 2.125rem;
+  margin-bottom: 0.875rem;
+}
+.ui-processing-text {
+  margin: 0 auto;
+  text-align: center;
+  width: 10.5rem;
+  font-size: 1.5rem;
+}
+.ui-processing.ui-processing-full-size {
+  background-color: transparent;
+  -webkit-mask-image: none;
+  -webkit-animation: none;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  margin: 0;
+}
+.ui-processing.ui-processing-full-size::after {
+  content: "";
+  background-color: B065L2;
+  -webkit-mask-image: url("images/Processing/tw_progress_full_loading_bg.png");
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-animation: rotating 1s linear infinite;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.ui-btn {
+  display: block;
+  padding-top: 28.5px;
+  padding-right: 10px;
+  padding-bottom: 28.5px;
+  padding-left: 10px;
+  margin: 0px;
+  font-size: 32px;
+  line-height: 28px;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  border: 0 none;
+  color: T041;
+  background-color: W011;
+}
+a.ui-btn:active:hover,
+.ui-btn:enabled:active:hover {
+  background-color: W011P;
+}
+.ui-btn:enabled:focus {
+  background-color: W011;
+}
+a.ui-btn.ui-state-disabled,
+.ui-btn:disabled {
+  color: T041D;
+  background-color: W011D;
+  cursor: default;
+}
+.ui-btn.ui-multiline {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.ui-btn.ui-inline {
+  display: inline-block;
+}
+.ui-btn.ui-btn-icon {
+  background-position: center center;
+  height: 76px;
+  text-indent: -1000em;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  background-size: 60px 60px;
+}
+.ui-default {
+  color: T041;
+  background-color: W011;
+}
+a.ui-default:active:hover,
+.ui-default:enabled:active:hover {
+  background-color: W011P;
+}
+.ui-default:enabled:focus {
+  background-color: W011;
+}
+a.ui-default.ui-state-disabled,
+.ui-default:disabled {
+  color: T041D;
+  background-color: W011D;
+  cursor: default;
+}
+.ui-color-red {
+  color: T041;
+  background-color: W012;
+}
+a.ui-color-red:active:hover,
+.ui-color-red:enabled:active:hover {
+  background-color: W012P;
+}
+.ui-color-red:enabled:focus {
+  background-color: W012;
+}
+a.ui-color-red.ui-state-disabled,
+.ui-color-red:disabled {
+  color: T041D;
+  background-color: W012D;
+  cursor: default;
+}
+.ui-color-orange {
+  color: T041;
+  background-color: W013;
+}
+a.ui-color-orange:active:hover,
+.ui-color-orange:enabled:active:hover {
+  background-color: W013P;
+}
+.ui-color-orange:enabled:focus {
+  background-color: W013;
+}
+a.ui-color-orange.ui-state-disabled,
+.ui-color-orange:disabled {
+  color: T041D;
+  background-color: W013D;
+  cursor: default;
+}
+.ui-color-green {
+  color: T041;
+  background-color: W014;
+}
+a.ui-color-green:active:hover,
+.ui-color-green:enabled:active:hover {
+  background-color: W014P;
+}
+.ui-color-green:enabled:focus {
+  background-color: W014;
+}
+a.ui-color-green.ui-state-disabled,
+.ui-color-green:disabled {
+  color: T041D;
+  background-color: W014D;
+  cursor: default;
+}
+.ui-btn:focus,
+.ui-btn:active {
+  outline: none;
+}
+a.ui-btn {
+  text-decoration: none;
+  box-sizing: border-box;
+}
+button.ui-btn,
+input.ui-btn {
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 100%;
+}
+button.ui-btn.ui-inline,
+input.ui-btn.ui-inline {
+  display: inline-block;
+  width: auto;
+}
+.ui-grid-col-1 > .ui-btn {
+  border-left: solid 1px B011;
+}
+.ui-grid-col-1 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-col-2 > .ui-btn {
+  border-left: solid 1px B011;
+}
+.ui-grid-col-2 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-col-3 > .ui-btn {
+  border-left: solid 1px B011;
+}
+.ui-grid-col-3 > .ui-btn:first-child {
+  border-left: 0px none;
+}
+.ui-grid-row > .ui-btn {
+  margin-top: 1px;
+}
+.ui-grid-row > .ui-btn:first-child {
+  margin-top: 0px;
+}
+/***********************
+Normal Popup
+***********************/
+.ui-popup {
+  position: fixed;
+  left: 0px;
+  width: 100%;
+  margin: 0;
+  background-color: B061L1E;
+  border: 3px solid B061L7;
+  display: none;
+  z-index: 1100;
+}
+.ui-popup:not(.ui-ctxpopup) {
+  bottom: 0;
+}
+.ui-popup .ui-popup-header {
+  width: 100%;
+  min-height: 68px;
+  font-size: 30px;
+  text-align: left;
+  background-color: B061L2;
+  color: T091;
+  padding-top: 14px;
+  padding-right: 13px;
+  padding-bottom: 14px;
+  padding-left: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ui-popup .ui-popup-content {
+  width: 100%;
+  min-height: 14rem;
+  font-size: 2.125rem;
+  text-align: left;
+  color: T0811;
+  background-color: B061L1E;
+  padding: 10px 16px 9px 16px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-popup .ui-popup-content .ui-listview,
+.ui-popup .ui-popup-content .ui-inline-listview {
+  margin: -0.5625rem -1rem -0.5625rem -1rem;
+}
+.ui-popup .ui-popup-content .ui-listview li,
+.ui-popup .ui-popup-content .ui-inline-listview li {
+  font-size: 2.125rem;
+}
+.ui-popup .ui-popup-footer {
+  width: 100%;
+  height: 83px;
+}
+.ui-popup .ui-popup-footer .ui-btn {
+  padding-top: 27px;
+  padding-bottom: 28px;
+  font-size: 30px;
+}
+.ui-popup.ui-popup-active {
+  display: block;
+}
+.ui-popup.in {
+  display: block;
+}
+.ui-popup.ui-build {
+  display: block;
+  visibility: hidden;
+}
+/***********************
+Popup Container Scroll
+***********************/
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) {
+  max-height: 100%;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-wrapper {
+  width: 100%;
+  max-height: 100%;
+  overflow: auto !important;
+  -webkit-overflow-scrolling: touch;
+  -moz-overflow-scrolling: touch;
+  -o-overflow-scrolling: touch;
+  -ms-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-content {
+  height: auto !important;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-header.ui-fixed {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2100;
+}
+.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) .ui-popup-footer.ui-fixed {
+  position: absolute !important;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2100;
+  -webkit-transform: translate3d(0, 0, 0);
+}
+/***********************
+Option Popup
+***********************/
+.ui-popup.ui-ctxpopup {
+  background-color: transparent;
+  width: 100%;
+  border: 0 none;
+  border-radius: 0;
+  overflow: visible;
+}
+div.ui-popup.ui-ctxpopup.ui-popup-content-size {
+  width: auto;
+  padding: 0 0 0 0;
+}
+div.ui-popup.ui-ctxpopup.ui-popup-content-size .ui-popup-content {
+  width: auto;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content {
+  background-color: B092L1;
+  border: 1px solid B092L2;
+  color: #333;
+  min-height: initial;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li {
+  color: T111;
+  border-bottom: 1px solid B094;
+  min-height: 90px;
+  padding: 21px 8px 20px 16px;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a {
+  color: T111;
+  margin: -21px -16px;
+  padding: 21px 16px;
+  min-height: 48px;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li a:active {
+  color: T111P;
+  background-color: B093P;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview li:last-child {
+  border: none;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon {
+  position: relative;
+  padding-left: 4.25rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon a {
+  margin-left: -4.25rem;
+  padding-left: 4.25rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview .ui-list-icon::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0.375rem;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-top: -1.75rem;
+  background-color: B095;
+  -webkit-mask-size: 3.5rem 3.5rem;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  mask-size: 3.5rem 3.5rem;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-listview a.ui-list-icon:active::before {
+  background-color: B095P;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview {
+  height: 4.3125rem;
+  overflow: hidden;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li {
+  float: left;
+  height: 4.1875rem;
+  line-height: 4.1875rem;
+  border-right: 1px solid B097;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li:last-child {
+  border: none;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0rem 0.5rem;
+  color: T111;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview li a:active {
+  color: T111P;
+  background-color: B093P;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext {
+  width: 3.6875rem;
+  height: 4.1875rem;
+  text-indent: -1000em;
+  overflow: hidden;
+  position: relative;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview .ui-list-icon-notext::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2.6875rem;
+  height: 2.6875rem;
+  margin-top: -1.34375rem;
+  margin-left: -1.34375rem;
+  background-color: B096;
+  -webkit-mask-size: 2.6875rem 2.6875rem;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: 2.6875rem 2.6875rem;
+  mask-repeat: no-repeat;
+}
+.ui-popup.ui-ctxpopup .ui-popup-content .ui-inline-listview a.ui-list-icon-notext:active::before {
+  background-color: B096P;
+}
+.ui-popup.ui-ctxpopup .ui-arrow {
+  width: 36px;
+  height: 15px;
+  overflow: hidden;
+  position: absolute;
+  display: none;
+  animation-duration: 0;
+  -webkit-animation-duration: 0;
+}
+.ui-popup.ui-ctxpopup .ui-arrow span {
+  width: 20px;
+  height: 20px;
+  background-color: B092L1;
+  border: 1px solid B092L2;
+  position: absolute;
+  top: 6px;
+  left: 8px;
+  -webkit-transform: rotate(55deg) skew(24deg);
+  transform: rotate(55deg) skew(24deg);
+  animation-duration: 0;
+  -webkit-animation-duration: 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b {
+  padding: 20px 20px 0 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t {
+  padding: 0 20px 20px 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r {
+  padding: 20px 0 20px 20px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l {
+  padding: 20px 20px 20px 0;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-b .ui-arrow {
+  display: block;
+  bottom: -0.875rem;
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-t .ui-arrow {
+  display: block;
+  top: -14px;
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-r .ui-arrow {
+  display: block;
+  right: -25px;
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.ui-popup.ui-ctxpopup.ui-popup-arrow-l .ui-arrow {
+  display: block;
+  left: -25px;
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+/****************************************
+Popup Toast
+****************************************/
+.ui-popup.ui-popup-toast {
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  font-size: 1.5rem;
+  border: 3px solid B061L7;
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+  position: absolute;
+  bottom: 0;
+  top: auto;
+  height: auto;
+}
+.ui-popup.ui-popup-toast .ui-popup-content {
+  min-height: initial;
+  padding: 0.6875rem 2.625rem 0.75rem 2.625rem;
+  background-color: B061L1E;
+}
+/****************************************
+Popup Overlay
+****************************************/
+.ui-popup-overlay {
+  position: fixed;
+  display: none;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: W1712;
+}
+.ui-popup-overlay.in {
+  display: block;
+}
+/****************************************
+Popup Transition
+****************************************/
+.ui-popup.slideup.in {
+  -webkit-animation-name: popupslideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popupslideinfrombottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.slideup.out {
+  -webkit-animation-name: popupslideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popupslideouttobottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes popupslideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@keyframes popupslideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0%);
+  }
+}
+@-webkit-keyframes popupslideouttobottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@keyframes popupslideouttobottom {
+  from {
+    transform: translateY(0%);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+.ui-popup.pop.in {
+  -webkit-animation-name: popuppopin;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popuppopin;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.pop.out {
+  -webkit-animation-name: popuppopout;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: popuppopout;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes popuppopin {
+  from {
+    transform: scale3d(0, 0, 1);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+@-webkit-keyframes popuppopout {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(0, 0, 1);
+  }
+}
+/****************************************
+Popup Overlay Transition
+****************************************/
+.ui-popup-overlay.slideup.in,
+.ui-popup-overlay.pop.in {
+  -webkit-animation-name: fadein;
+  -webkit-animation-duration: 250ms;
+  animation-name: fadein;
+  animation-duration: 250ms;
+}
+.ui-popup-overlay.slideup.out,
+.ui-popup-overlay.pop.out {
+  -webkit-animation-name: fadeout;
+  -webkit-animation-duration: 250ms;
+  animation-name: fadeout;
+  animation-duration: 250ms;
+}
+/****************************************
+Option Popup Transition
+****************************************/
+.ui-popup.ui-popup-arrow-t.slideup.in,
+.ui-popup.ui-popup-arrow-l.slideup.in,
+.ui-popup.ui-popup-arrow-r.slideup.in {
+  -webkit-animation-name: ctxpopupslideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideinfrombottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-t.slideup.out,
+.ui-popup.ui-popup-arrow-l.slideup.out,
+.ui-popup.ui-popup-arrow-r.slideup.out {
+  -webkit-animation-name: ctxpopupslideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideouttobottom;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-b.slideup.in {
+  -webkit-animation-name: ctxpopupslideinfromtop;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideinfromtop;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+.ui-popup.ui-popup-arrow-b.slideup.out {
+  -webkit-animation-name: ctxpopupslideouttotop;
+  -webkit-animation-duration: 250ms;
+  -webkit-transition-timing-function: ease-in-out;
+  animation-name: ctxpopupslideouttotop;
+  animation-duration: 250ms;
+  transition-timing-function: ease-in-out;
+}
+@-webkit-keyframes ctxpopupslideinfrombottom {
+  from {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@keyframes ctxpopupslideinfrombottom {
+  from {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideouttobottom {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+}
+@keyframes ctxpopupslideouttobottom {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(20%);
+    opacity: 0.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideinfromtop {
+  from {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@keyframes ctxpopupslideinfromtop {
+  from {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+  to {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+}
+@-webkit-keyframes ctxpopupslideouttotop {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+}
+@keyframes ctxpopupslideouttotop {
+  from {
+    transform: translateY(0%);
+    opacity: 1.0;
+  }
+  to {
+    transform: translateY(-20%);
+    opacity: 0.0;
+  }
+}
+/************************
+Listview
+*************************/
+.ui-listview li {
+  font-size: 2.5rem;
+  line-height: 3rem;
+  width: 100%;
+  min-height: 6.25rem;
+  padding: 1.3125rem 0.5rem 1.25rem 1rem;
+  border-bottom: 1px solid B0222;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  color: T0211;
+}
+.ui-listview li > * {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-user-select: none;
+  color: T0211;
+}
+.ui-listview li > a {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: -1.3125rem -1rem;
+  padding: 1.625rem 1rem;
+  -o-box-sizing: content-box;
+  -ms-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+.ui-listview li.ui-li-active {
+  background-color: B041P;
+  color: T0211P;
+}
+.ui-listview .li-divider {
+  height: 1.875rem;
+  min-height: 1.875rem;
+  line-height: 1.875rem;
+  padding: 0 0.5rem 0 1rem;
+  background-color: B012;
+  color: T0231;
+  font-size: 1.5rem;
+}
+.ui-listview .ui-li-sub-text {
+  color: T022;
+  font-size: 1.75rem;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-text {
+  width: calc(100% -  4.8125rem);
+  height: 100%;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-text::after {
+  content: "";
+  position: absolute;
+  height: 3.5rem;
+  width: 0.125rem;
+  background-color: T0811;
+  right: 4.25rem;
+  top: 20%;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-divider {
+  display: none;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete,
+.ui-listview .ui-li-has-action-icon .ui-action-setting,
+.ui-listview .ui-li-has-action-icon .ui-action-add {
+  position: absolute;
+  height: 100%;
+  width: 4.5rem;
+  right: 0;
+  top: 0;
+  -webkit-mask-size: 3.5rem 3.5rem;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center center;
+  padding: 0;
+  margin: 0;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete {
+  -webkit-mask-image: url(images/listview/tw_list_delete_holo_dark.png);
+  background-color: F022L1i;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-setting {
+  -webkit-mask-image: url(images/listview/tw_list_setting_holo_dark.png);
+  background-color: F022L1i;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-add {
+  -webkit-mask-image: url(images/listview/tw_list_add_holo_dark.png);
+  background-color: F022L1i;
+}
+.ui-listview .ui-li-has-action-icon.ui-li-active {
+  background-color: transparent;
+}
+.ui-listview .ui-li-has-action-icon.ui-li-active .ui-action-text:active {
+  background-color: B041P;
+  color: T0211P;
+}
+.ui-listview .ui-li-has-action-icon .ui-action-delete:active,
+.ui-listview .ui-li-has-action-icon .ui-action-setting:active,
+.ui-listview .ui-li-has-action-icon .ui-action-add:active {
+  background-color: B041P;
+  color: T0211P;
+}
+.ui-datetime-widget {
+  position: relative;
+  height: 100%;
+}
+.ui-datetime {
+  text-align: center;
+  padding-top: 56px;
+}
+.ui-time-picker .ui-datetime {
+  padding-top: 53px;
+}
+.ui-datetime:only-child {
+  padding-top: 92px;
+}
+.ui-time-picker .ui-datetime:only-child {
+  padding-top: 89px;
+}
+.ui-datetime input[type='date'],
+.ui-datetime input[type='datetime'],
+.ui-datetime input[type='time'] {
+  display: none;
+}
+.ui-datefield {
+  height: 52px;
+  display: inline-block;
+  vertical-align: top;
+}
+.ui-datefield > .ui-btn {
+  float: left;
+  height: 52px;
+  padding: 0;
+  line-height: 52px;
+  font-size: 42px;
+  font-weight: 600;
+  border-radius: 2px;
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.ui-datefield .ui-datefield-separator {
+  display: block;
+  height: 100%;
+  float: left;
+  width: 18px;
+  background: transparent url('images/Datetimepicker/tw_timepicker_num_dot.png');
+}
+.ui-datefield > .ui-btn:enabled:focus {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.ui-datefield > .ui-btn:disabled {
+  color: #404040;
+}
+.ui-datafield > .ui-btn.ui-selected,
+.ui-datefield > .ui-btn:enabled:active,
+.ui-datefield > .ui-btn.ui-state-active:enabled,
+.ui-datefield > .ui-btn.ui-selected:enabled {
+  background-color: #ff9000;
+  color: #000;
+}
+/* -- for datepicker -- */
+.ui-date-picker .ui-datefield > .ui-btn:first-child {
+  margin-right: 2px;
+}
+.ui-date-picker .ui-datefield > .ui-btn:last-child {
+  margin-left: 2px;
+}
+.ui-date-picker .ui-datefield-year {
+  width: 114px;
+}
+.ui-date-picker .ui-datefield-month {
+  width: 102px;
+}
+.ui-date-picker .ui-datefield-day {
+  width: 68px;
+}
+/* -- end (for datepicker) -- */
+/* -- for timepicker -- */
+.ui-time-picker .ui-datefield-hour {
+  width: 74px;
+}
+.ui-time-picker .ui-datefield-min {
+  width: 74px;
+}
+.ui-time-picker .ui-datefield-period {
+  width: 84px;
+  margin-left: 10px;
+}
+.ui-time-picker .ui-datefield {
+  height: 58px;
+}
+.ui-time-picker .ui-datefield > .ui-btn {
+  height: 58px;
+  line-height: 58px;
+  font-size: 50px;
+}
+.ui-time-picker .ui-datefield > .ui-btn.ui-datefield-period {
+  font-size: 48px;
+}
+/* -- (end) for timepicker -- */
+.ui-datetime-wheel {
+  height: 68px;
+  margin: 0 10px;
+  margin-top: 30px;
+}
+.ui-time-picker .ui-datetime-wheel {
+  margin-top: 27px;
+}
+.ui-datetime-wheel .ui-btn {
+  width: 68px;
+  height: 68px;
+  float: left;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus {
+  float: right;
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:enabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus:disabled:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-plus.ui-state-disabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:enabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus:disabled:active:hover,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled,
+.ui-datetime-wheel .ui-btn.ui-datetime-wheel-minus.ui-state-disabled:active:hover {
+  background: transparent url('images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png') center center no-repeat;
+}
+.ui-datetime-wheel .ui-wheel {
+  display: block;
+  margin-left: 68px;
+  margin-right: 68px;
+  height: 68px;
+  padding: 10px 0;
+  background: url('images/Datetimepicker/tw_timepicker_wheel_01.png') center center no-repeat;
+}
+.ui-datetime-btns {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 76px;
+  border-top: 2px solid #262626;
+}
+/* Button separator */
+.ui-datetime-btns::before {
+  content: "";
+  height: 34px;
+  width: 1px;
+  background-color: #262626;
+  position: absolute;
+  left: 160px;
+  top: 20px;
+}
+.ui-datetime-btns .ui-btn {
+  height: 100%;
+  position: relative;
+  background-color: transparent;
+}
+.ui-datetime-btns .ui-btn:enabled:active,
+.ui-datetime-btns .ui-btn:enabled:focus,
+.ui-datetime-btns .ui-btn:enabled:active:focus {
+  background-color: transparent;
+}
+.ui-datetime-btns .ui-btn-left {
+  width: 160px;
+  float: left;
+  background: url('images/Datetimepicker/tw_timepicker_left_softbtn.png') center center no-repeat;
+}
+.ui-datetime-btns .ui-btn-right {
+  width: 159px;
+  float: right;
+  background: url('images/Datetimepicker/tw_timepicker_right_softbtn.png') center center no-repeat;
+}
+.ui-datetime-btns .ui-btn:disabled,
+.ui-datetime-btns .ui-btn.ui-state-disabled {
+  opacity: 0.2;
+}
+/* ---------------- */
+.ui-datetime-periods {
+  height: 102px;
+  margin-top: 7px;
+  display: inline-block;
+}
+.ui-datetime-periods .ui-btn,
+.ui-datetime-periods .ui-datetime-periods-separator {
+  height: 100%;
+  float: left;
+  padding: 0;
+  background: transparent;
+}
+.ui-datetime-periods .ui-btn {
+  width: 102px;
+  font-size: 34px;
+  line-height: 102px;
+}
+.ui-datetime-periods .ui-btn:enabled:focus {
+  background: transparent;
+}
+.ui-datetime-periods .ui-btn:enabled:active,
+.ui-datetime-periods .ui-btn:enabled:active:focus,
+.ui-datetime-periods .ui-btn.ui-selected:enabled:active,
+.ui-datetime-periods .ui-btn.ui-state-active:enabled:active {
+  color: inherit;
+  text-decoration: none;
+  background: url('images/Datetimepicker/tw_timepicker_time_bg.png') center center no-repeat;
+}
+.ui-datetime-periods .ui-btn.ui-selected:enabled,
+.ui-datetime-periods .ui-btn.ui-state-active:enabled {
+  color: #ff9000;
+  text-decoration: underline;
+}
+.ui-datetime-periods .ui-datetime-periods-separator {
+  width: 24px;
+  background: url('images/Datetimepicker/tw_timepicker_num_dot_01.png') center center no-repeat;
+}
+.ui-datetime-wheel.ui-hidden,
+.ui-datetime-periods.ui-hidden {
+  display: none;
+}
+/* Transitions originally inspired by those from jQtouch, nice work, folks */
+.ui-viewport-transitioning,
+.ui-viewport-transitioning .ui-page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.ui-pre-in {
+  z-index: 100;
+  visibility: visible;
+  display: block;
+  top: 0px;
+  left: 0px;
+}
+.in {
+  -webkit-animation-timing-function: ease-out;
+  -webkit-animation-duration: 350ms;
+  -moz-animation-timing-function: ease-out;
+  -moz-animation-duration: 350ms;
+  animation-timing-function: ease-out;
+  animation-duration: 350ms;
+}
+.out {
+  -webkit-animation-timing-function: ease-in;
+  -webkit-animation-duration: 225ms;
+  -moz-animation-timing-function: ease-in;
+  -moz-animation-duration: 225ms;
+  animation-timing-function: ease-in;
+  animation-duration: 225ms;
+}
+@-webkit-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-moz-keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@-moz-keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.fade.out {
+  opacity: 0;
+  -webkit-animation-duration: 125ms;
+  -webkit-animation-name: fadeout;
+  -moz-animation-duration: 125ms;
+  -moz-animation-name: fadeout;
+  animation-duration: 125ms;
+  animation-name: fadeout;
+}
+.fade.in {
+  opacity: 1;
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: fadein;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: fadein;
+  animation-duration: 225ms;
+  animation-name: fadein;
+}
+/* slide up */
+.slideup.out {
+  -webkit-animation-name: fadeout;
+  -webkit-animation-duration: 250ms;
+  -moz-animation-name: fadeout;
+  -moz-animation-duration: 250ms;
+  animation-name: fadeout;
+  animation-duration: 250ms;
+}
+.slideup.in {
+  -webkit-transform: translateY(0);
+  -webkit-animation-name: slideinfrombottom;
+  -webkit-animation-duration: 250ms;
+  -moz-transform: translateY(0);
+  -moz-animation-name: slideinfrombottom;
+  -moz-animation-duration: 250ms;
+  transform: translateY(0);
+  animation-name: slideinfrombottom;
+  animation-duration: 250ms;
+}
+.slideup.in.reverse {
+  -webkit-animation-name: fadein;
+  -webkit-animation-duration: 250ms;
+  -moz-animation-name: fadein;
+  -moz-animation-duration: 250ms;
+  animation-name: fadein;
+  animation-duration: 250ms;
+}
+.slideup.out.reverse {
+  z-index: 101;
+  -webkit-transform: translateY(100%);
+  -webkit-animation-name: slideouttobottom;
+  -webkit-animation-duration: 250ms;
+  -moz-transform: translateY(100%);
+  -moz-animation-name: slideouttobottom;
+  -moz-animation-duration: 250ms;
+  transform: translateY(100%);
+  animation-name: slideouttobottom;
+  animation-duration: 250ms;
+}
+@-webkit-keyframes slideinfrombottom {
+  from {
+    -webkit-transform: translateY(100%);
+  }
+  to {
+    -webkit-transform: translateY(0);
+  }
+}
+@-moz-keyframes slideinfrombottom {
+  from {
+    -moz-transform: translateY(100%);
+  }
+  to {
+    -moz-transform: translateY(0);
+  }
+}
+@keyframes slideinfrombottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes slideouttobottom {
+  from {
+    -webkit-transform: translateY(0);
+  }
+  to {
+    -webkit-transform: translateY(100%);
+  }
+}
+@-moz-keyframes slideouttobottom {
+  from {
+    -moz-transform: translateY(0);
+  }
+  to {
+    -moz-transform: translateY(100%);
+  }
+}
+@keyframes slideouttobottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@-webkit-keyframes popnone {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes popin {
+  from {
+    transform: scale3d(0, 0, 1);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+@-webkit-keyframes popout {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  to {
+    transform: scale3d(0, 0, 1);
+  }
+}
+.pop.out.reverse {
+  z-index: 200;
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popout;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popout;
+  animation-duration: 225ms;
+  animation-name: popout;
+}
+.pop.in.reverse {
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popnone;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popnone;
+  animation-duration: 225ms;
+  animation-name: popnone;
+}
+.pop.in {
+  -webkit-animation-duration: 225ms;
+  -webkit-animation-name: popin;
+  -moz-animation-duration: 225ms;
+  -moz-animation-name: popin;
+  animation-duration: 225ms;
+  animation-name: popin;
+}
+.ui-indexscrollbar {
+  display: block;
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 2.8125rem;
+  height: 100%;
+  padding-left: 0.125rem;
+  background-color: B0722;
+  z-index: 10;
+  overflow: visible;
+  -webkit-user-select: none;
+  cursor: pointer;
+}
+.ui-indexscrollbar ul {
+  position: absolute;
+  width: 100%;
+  top: 0;
+}
+.ui-indexscrollbar ul li {
+  color: T0311;
+  display: block;
+  width: 100%;
+  text-align: center;
+  font-size: 1.5rem;
+  height: 2.25rem;
+}
+.ui-indexscrollbar ul li.ui-state-selected {
+  background-color: B0724;
+  color: T0311P;
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary {
+  position: relative;
+  height: auto;
+  top: 0;
+  right: -2.5rem;
+  width: 100%;
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li {
+  background-color: B0723;
+  color: T0311;
+}
+.ui-indexscrollbar ul.ui-indexscrollbar-supplementary li.ui-state-selected {
+  background-color: B0723;
+  color: T0313;
+}
+.ui-indexscrollbar + .ui-listview li {
+  padding-right: 2.5rem;
+}
+.ui-indexscrollbar-indicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  display: none;
+}
+.ui-indexscrollbar-indicator > span {
+  width: 8.75rem;
+  height: 5.4375rem;
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 50%;
+  margin-left: -5.625rem;
+  margin-top: -2.6875rem;
+  line-height: 5.4375rem;
+  font-size: 4.375rem;
+  text-align: center;
+  background-color: B0731;
+  color: T0312;
+}
+.ui-indexscrollbar-indicator > span > span.ui-selected {
+  color: T0312P;
+}
+.ui-circularindexscrollbar {
+  position: fixed;
+  top: 0;
+  left: -100%;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+}
+.ui-circularindexscrollbar.ui-circularindexscrollbar-show .ui-circularindexscrollbar-indexbar {
+  pointer-events: auto;
+  -webkit-transform: scale(1, 1);
+  -webkit-transition-duration: 500ms;
+  -webkit-transition-timing-function: linear;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indexbar {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: -webkit-radial-gradient(center, ellipse cover, transparent 59%, B0722 59%);
+  overflow: hidden;
+  -webkit-transform: scale(1.2, 1.2);
+  -webkit-transition-duration: 500ms;
+  -webkit-transition-timing-function: linear;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  box-sizing: border-box;
+  width: 50%;
+  height: 50%;
+  margin-top: -50%;
+  margin-left: -50%;
+  -webkit-transform-origin: 100% 100% 0;
+  overflow: hidden;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index span {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin-left: 50%;
+  padding-top: 0.3125rem;
+  text-align: center;
+  color: T0311;
+  -webkit-transform-origin: 50% 100% 0;
+  font-size: 1.25rem;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-index.ui-state-selected span {
+  color: T0311P;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator {
+  position: absolute;
+  top: 50%;
+  width: 8.9375rem;
+  height: 8.9375rem;
+  line-height: 8.9375rem;
+  border-radius: 50%;
+  background-color: B0731;
+  -webkit-mask-image: url("images/Indicator/b_fast_scroll_rollover_bg.png");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 8.9375rem;
+  margin-top: -4.4375rem;
+  margin-left: 100%;
+  -webkit-transform: translate3d(-6.703125rem, 0, 0);
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-text {
+  text-align: center;
+  font-size: 4.375rem;
+  color: T0312P;
+}
+.ui-circularindexscrollbar .ui-circularindexscrollbar-indicator-minimize .ui-circularindexscrollbar-indicator-text {
+  padding-right: 0.4375rem;
+  text-align: right;
+  font-size: 2rem;
+}
+/***************************************************************************
+                   Scrollbar Style
+***************************************************************************/
+.ui-scrollbar-bar-type {
+  position: absolute;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-horizontal {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 8px;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-vertical {
+  right: 0;
+  top: 0;
+  width: 0.5rem;
+  height: 100%;
+}
+.ui-scrollbar-bar-type .ui-scrollbar-indicator {
+  position: absolute;
+  background-color: B071;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-horizontal .ui-scrollbar-indicator {
+  height: 0.25rem;
+}
+.ui-scrollbar-bar-type.ui-scrollbar-vertical .ui-scrollbar-indicator {
+  width: 0.25rem;
+}
+/***************************************************************************
+                   Scrollbar Bouncing Effect
+***************************************************************************/
+.ui-scrollbar-bouncing-effect {
+  display: none;
+  position: absolute;
+  background-repeat: no-repeat;
+  -webkit-animation-duration: 0.47s;
+  -moz-animation-duration: 0.47s;
+  -ms-animation-duration: 0.47s;
+  -o-animation-duration: 0.47s;
+  -webkit-animation-timing-function: step-start;
+  -moz-animation-timing-function: step-start;
+  -ms-animation-timing-function: step-start;
+  -o-animation-timing-function: step-start;
+  animation-timing-function: step-start;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-fill-mode: forwards;
+  -ms-animation-fill-mode: forwards;
+  -o-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  background-color: B018E;
+}
+.ui-scrollbar-bouncing-effect::before {
+  content: "";
+  position: absolute;
+  background-color: B019;
+}
+.ui-scrollbar-bouncing-effect.ui-top,
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  width: 100%;
+  height: 3.125rem;
+  left: 0;
+  -webkit-mask-size: 100% 3.125rem;
+}
+.ui-scrollbar-bouncing-effect.ui-top::before,
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  width: 100%;
+  height: 0.125rem;
+  -webkit-mask-size: 100% 0.125rem;
+}
+.ui-scrollbar-bouncing-effect.ui-left,
+.ui-scrollbar-bouncing-effect.ui-right {
+  width: 3.125rem;
+  height: 100%;
+  top: 0;
+  -webkit-mask-size: 3.125rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-left::before,
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  width: 0.0625rem;
+  height: 100%;
+  -webkit-mask-size: 0.0625rem 100%;
+}
+.ui-scrollbar-bouncing-effect.ui-top {
+  top: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_top_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-top::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_top_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-bottom {
+  bottom: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_bottom_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-bottom::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_bottom_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left {
+  left: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_left_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-left::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_left_edge.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right {
+  right: 0;
+  -webkit-mask-image: url("images/Scroller/bouncing_right_glow.png");
+}
+.ui-scrollbar-bouncing-effect.ui-right::before {
+  -webkit-mask-image: url("images/Scroller/bouncing_right_edge.png");
+}
+@-webkit-keyframes ui-bouncing-show {
+  0% {
+    opacity: 0;
+  }
+  10% {
+    opacity: 0.1;
+  }
+  20% {
+    opacity: 0.2;
+  }
+  30% {
+    opacity: 0.3;
+  }
+  40% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  60% {
+    opacity: 0.6;
+  }
+  70% {
+    opacity: 0.7;
+  }
+  80% {
+    opacity: 0.8;
+  }
+  90% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes ui-bouncing-hide {
+  0% {
+    opacity: 1;
+  }
+  10% {
+    opacity: 0.9;
+  }
+  20% {
+    opacity: 0.8;
+  }
+  30% {
+    opacity: 0.7;
+  }
+  40% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  60% {
+    opacity: 0.4;
+  }
+  70% {
+    opacity: 0.3;
+  }
+  80% {
+    opacity: 0.2;
+  }
+  90% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.ui-scrollbar-bouncing-effect.ui-show {
+  display: block;
+  -webkit-animation-name: ui-bouncing-show;
+}
+.ui-scrollbar-bouncing-effect.ui-hide {
+  display: block;
+  -webkit-animation-name: ui-bouncing-hide;
+}
+.ui-swipelist {
+  position: absolute;
+  top: 0;
+}
+.ui-swipelist-left,
+.ui-swipelist-right {
+  position: absolute;
+  display: none;
+}
+.ui-swipelist-left {
+  background: -webkit-linear-gradient(left, B0242 0%, B011 0%);
+}
+.ui-swipelist-right {
+  background: -webkit-linear-gradient(right, B0241 0%, B011 0%);
+}
+.ui-swipelist-icon,
+.ui-swipelist-text {
+  position: absolute;
+}
+.ui-swipelist-left .ui-swipelist-icon {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  width: 20%;
+  height: 100%;
+  margin-left: 2%;
+  background-color: F021L1i;
+  -webkit-mask-image: url("images/Swipelist/b_logs_icon_body_btn_call_nor.png");
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-swipelist-left .ui-swipelist-text {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  margin-left: 40%;
+  height: 100%;
+  line-height: 90px;
+}
+.ui-swipelist-right .ui-swipelist-icon {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  width: 20%;
+  height: 100%;
+  margin-left: 80%;
+  background-color: F021L1i;
+  -webkit-mask-image: url("images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png");
+  -webkit-mask-repeat: no-repeat;
+}
+.ui-swipelist-right .ui-swipelist-text {
+  /*
+	Icon and text need to set position or url and so on.
+	We thought that swipelist's content style need to be implemented by developer wanted.
+	*/
+  margin-left: 20%;
+  height: 100%;
+  line-height: 90px;
+}
+/***************************************************************************
+                   Tab Style
+***************************************************************************/
+.ui-tab-indicator {
+  position: relative;
+  height: 6px;
+}
+.ui-tab-indicator .ui-tab-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  height: 6px;
+  background-color: B0514;
+}
+.ui-tab-indicator .ui-tab-item.ui-tab-active {
+  background-color: B0514P1;
+}
+input[type="checkbox"]:not(.ui-switch-input),
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  height: 56px;
+  width: 56px;
+  font-size: 32px;
+  -webkit-appearance: none;
+  position: relative;
+}
+input[type="radio"] {
+  background-color: W013L1;
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+}
+input[type="radio"]::after {
+  content: "";
+  background-color: W241;
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_line.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:checked::before {
+  content: "";
+  background-color: W013L2;
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:active {
+  background-color: W013L1P;
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+}
+input[type="radio"]:active::after {
+  content: "";
+  background-color: W241P;
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_line.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="radio"]:active:checked::before {
+  content: "";
+  background-color: W013L2P;
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input) {
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: W012L1;
+}
+input[type="checkbox"]:not(.ui-switch-input)::after {
+  content: "";
+  background-color: W231;
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):checked::before {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: W012L2;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):active {
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: W012L1P;
+}
+input[type="checkbox"]:not(.ui-switch-input):active::after {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: W231P;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+input[type="checkbox"]:not(.ui-switch-input):active:checked::before {
+  content: "";
+  -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png);
+  -webkit-mask-repeat: no-repeat;
+  background-color: W012L2P;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+}
+.ui-marquee {
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  -webkit-user-select: none;
+}
+.ui-marquee.ui-marquee-gradient {
+  text-overflow: clip;
+}
+.ui-marquee.ui-marquee-gradient::after {
+  content: "";
+  width: 6.875rem;
+  height: 100%;
+  background: -webkit-linear-gradient(left, transparent 0%, B0211 100%);
+  position: absolute;
+  right: 0;
+}
+.ui-marquee.ui-marquee-ellipsis .ui-marquee-content {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ui-marquee-content {
+  overflow: visible;
+  display: inline-block;
+}
+.ui-marquee-anim-running {
+  -webkit-animation-play-state: running;
+}
+.ui-marquee-anim-stopped {
+  -webkit-animation-play-state: paused;
+}
+.ui-page-indicator {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translate3d(-50%, 0, 0);
+  -moz-transform: translate3d(-50%, 0, 0);
+  -ms-transform: translate3d(-50%, 0, 0);
+  -o-transform: translate3d(-50%, 0, 0);
+  transform: translate3d(-50%, 0, 0);
+}
+.ui-page-indicator-item {
+  position: relative;
+  display: inline-block;
+  width: 0.8125rem;
+  height: 0.8125rem;
+  -webkit-mask-image: -webkit-radial-gradient(#000000 0.25rem, transparent 0.375rem);
+  background-color: T0211D;
+  margin-right: 0.5625rem;
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-page-indicator-item:last-child {
+  margin-right: 0;
+}
+.ui-page-indicator-item.ui-page-indicator-active {
+  background-color: W1911;
+  -webkit-transition-duration: 150ms;
+  -moz-transition-duration: 150ms;
+  -o-transition-duration: 150ms;
+  -ms-transition-duration: 150ms;
+  transition-duration: 150ms;
+}
+.ui-snap-listview li {
+  -webkit-scroll-snap-destination: 50% 50%;
+}
+.ui-drawer {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  background-color: B011;
+  z-index: 1201;
+  box-sizing: border-box;
+}
+.ui-drawer.ui-drawer-close {
+  overflow: hidden;
+}
+.ui-drawer.ui-drawer-open {
+  overflow: auto;
+}
+.ui-drawer-overlay {
+  top: 0;
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 1200;
+}
+/***************************************************************************
+				   Footer Style (New style)
+***************************************************************************/
+.ui-page .ui-expandable-header {
+  height: 60px;
+}
+.ui-page .ui-expandable-header.ui-header-expand {
+  height: 80px;
+}
+.ui-page .ui-expandable-header.ui-header-expand .ui-title {
+  padding-top: 0;
+  transform: translate3d(0, 20px, 0);
+}
+.ui-section-changer {
+  height: 100%;
+}
diff --git a/version.txt b/version.txt
new file mode 100644
index 0000000..f3f8b21
--- /dev/null
+++ b/version.txt
@@ -0,0 +1 @@
+1.0.188