Updated home screen to match new UI mocks.

BUG=115350
TEST=Home screen looks shinier. Rest of UI still works, but may look a bit funky for a while.

Review URL: https://chromiumcodereview.appspot.com/9385040

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@123122 0039d316-1c4b-4281-b951-d872f2087c98

8 files changed, 4621 insertions, 225 deletions

diff --git a/remoting/resources/chromoting128.png b/remoting/resources/chromoting128.png
index 65e6dd0..f8ca330 100644
--- a/remoting/resources/chromoting128.png
+++ b/remoting/resources/chromoting128.png
diff --git a/remoting/resources/chromoting16.png b/remoting/resources/chromoting16.png
index ec97600..bbaaa0f 100644
--- a/remoting/resources/chromoting16.png
+++ b/remoting/resources/chromoting16.png
diff --git a/remoting/resources/chromoting48.png b/remoting/resources/chromoting48.png
index 30bd598..e1d4766 100644
--- a/remoting/resources/chromoting48.png
+++ b/remoting/resources/chromoting48.png
diff --git a/remoting/webapp/_locales/en/messages.json b/remoting/webapp/_locales/en/messages.json
index bf1d2bb..da15c1f 100644
--- a/remoting/webapp/_locales/en/messages.json
+++ b/remoting/webapp/_locales/en/messages.json
@@ -37,6 +37,10 @@
     "message": "Connect",
     "description": "Label for the connect button. Clicking this button will start the Chromoting session if the access code is correct."
   },
+  "CONNECTION_HISTORY_BUTTON": {
+    "message": "Connection history",
+    "description": "Label for the connection history button. Clicking this button opens a dialog showing recent connections."
+  },
   "CONTINUE_BUTTON": {
     "message": "Continue",
     "description": "Label for the continue button on the pre-authorization page. Clicking this button takes the user to the standard Google Accounts authorization page."
@@ -132,7 +136,7 @@
     "description": "Help link, displayed in the top-left (assuming ltr layout) corner of the main screen. Clicking this takes the user to our FAQ."
   },
   "HOME_ACCESS_BUTTON": {
-    "message": "Access Now",
+    "message": "Access",
     "description": "Clicking this button starts the desktop access process."
   },
   "HOME_ACCESS_DESCRIPTION": {
@@ -159,12 +163,8 @@
     "message": "To securely access this computer from anywhere you sign in to Chromoting, you must first enable remote connections.",
     "description": "Message displayed when the current computer is not accepting remote connections, instructing the user how to enable them."
   },
-  "HOME_MY_COMPUTERS_TITLE": {
-    "message": "My Computers",
-    "description": "Title for the portion of the home page showing the list of hosts the user has previously registered for remote access at any time."
-  },
   "HOME_SHARE_BUTTON": {
-    "message": "Share Now",
+    "message": "Share",
     "description": "Clicking this button starts the desktop sharing process."
   },
   "HOME_SHARE_DESCRIPTION": {
@@ -213,13 +213,13 @@
     "message": "Authorize",
     "description": "Sub-title for the one-time authorization step. Displayed after the product name and separated by a chevron."
   },
-  "MODE_CONNECT": {
-    "message": "Connect",
-    "description": "Sub-title for the client app. Displayed after the product name and separated by a chevron."
+  "MODE_IT2ME": {
+    "message": "Remote Assistance",
+    "description": "Sub-title for the remote assistance section of the UI, which contains buttons to share this computer or to connect to another computer, both on a one-off basis."
   },
-  "MODE_SHARE": {
-    "message": "Share",
-    "description": "Sub-title for the host app. Displayed after the product name and separated by a chevron."
+  "MODE_ME2ME": {
+    "message": "My Computers",
+    "description": "Sub-title for the remote access section of the UI, which contains a list of currently-shared hosts and a button to enable this computer for long-term sharing."
   },
   "OK": {
     "message": "OK",
diff --git a/remoting/webapp/host_list.js b/remoting/webapp/host_list.js
index 8539f28..345ac7f 100644
--- a/remoting/webapp/host_list.js
+++ b/remoting/webapp/host_list.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -197,7 +197,6 @@ remoting.HostList.prototype.showOrHide_ = function(show) {
   var parent = /** @type {Element} */ (this.table_.parentNode);
   parent.hidden = !show;
   if (show) {
-    parent.style.height = parent.scrollHeight + 'px';
     removeClass(parent, remoting.HostList.COLLAPSED_);
   } else {
     addClass(parent, remoting.HostList.COLLAPSED_);
diff --git a/remoting/webapp/host_table_entry.js b/remoting/webapp/host_table_entry.js
index 2774acf..8db8a08 100644
--- a/remoting/webapp/host_table_entry.js
+++ b/remoting/webapp/host_table_entry.js
@@ -68,19 +68,15 @@ remoting.HostTableEntry.prototype.init = function(host, onRename, onDelete) {
 
   // Create the host icon cell.
   var hostIcon = document.createElement('td');
-  addClass(hostIcon, 'host-list-row-start');
   var hostIconImage = document.createElement('img');
   hostIconImage.src = 'icon_host.png';
-  addClass(hostIconImage, 'host-list-main-icon');
+  addClass(hostIcon, 'host-list-main-icon');
   hostIcon.appendChild(hostIconImage);
   this.tableRow.appendChild(hostIcon);
 
   // Create the host name cell.
   this.hostNameCell_ = document.createElement('td');
-  addClass(this.hostNameCell_, 'mode-select-label');
-  this.hostNameCell_.appendChild(
-      document.createTextNode(host.hostName));
-  this.hostNameCell_.ondblclick = function() { that.beginRename_(); };
+  this.setHostName_();
   this.tableRow.appendChild(this.hostNameCell_);
 
   // Create the host status cell.
@@ -88,24 +84,22 @@ remoting.HostTableEntry.prototype.init = function(host, onRename, onDelete) {
   if (host.status == 'ONLINE') {
     var hostUrl = chrome.extension.getURL('main.html') +
         '?mode=me2me&hostId=' + encodeURIComponent(host.hostId);
-    var connectButton = document.createElement('button');
-    connectButton.setAttribute('class', 'mode-select-button');
-    connectButton.setAttribute('type', 'button');
     var startMe2Me = function() { window.location.replace(hostUrl); };
-    connectButton.addEventListener('click', startMe2Me, false);
-    connectButton.innerHTML =
-        chrome.i18n.getMessage(/*i18n-content*/'CONNECT_BUTTON');
-    hostStatus.appendChild(connectButton);
+    this.hostNameCell_.addEventListener('click', startMe2Me, false);
+    hostIcon.addEventListener('click', startMe2Me, false);
+    hostStatus.addEventListener('click', startMe2Me, false);
+    addClass(this.tableRow, 'clickable');
   } else {
     addClass(this.tableRow, 'host-offline');
     hostStatus.innerHTML = chrome.i18n.getMessage(/*i18n-content*/'OFFLINE');
   }
-  hostStatus.className = 'host-list-row-end';
+  hostStatus.className = 'host-list-label';
   this.tableRow.appendChild(hostStatus);
 
   // Create the host rename cell.
   var editButton = document.createElement('td');
-  editButton.onclick = function() { that.beginRename_(); };
+  var beginRename = function() { that.beginRename_(); };
+  editButton.addEventListener('click', beginRename, true);
   addClass(editButton, 'clickable');
   addClass(editButton, 'host-list-edit');
   var penImage = document.createElement('img');
@@ -116,7 +110,7 @@ remoting.HostTableEntry.prototype.init = function(host, onRename, onDelete) {
 
   // Create the host delete cell.
   var deleteButton = document.createElement('td');
-  deleteButton.onclick = function() { onDelete(that); }
+  deleteButton.addEventListener('click', function() { onDelete(that); }, false);
   addClass(deleteButton, 'clickable');
   addClass(deleteButton, 'host-list-edit');
   var crossImage = document.createElement('img');
@@ -178,7 +172,14 @@ remoting.HostTableEntry.prototype.removeEditBox_ = function() {
     editBox.removeEventListener('blur', this.onBlurReference_, false);
   }
   this.hostNameCell_.innerHTML = '';  // Remove the edit box.
-  this.hostNameCell_.appendChild(document.createTextNode(this.host.hostName));
+  this.setHostName_();
+};
+
+remoting.HostTableEntry.prototype.setHostName_ = function() {
+  var hostNameNode = document.createElement('span');
+  hostNameNode.innerText = this.host.hostName;
+  addClass(hostNameNode, 'host-list-label');
+  this.hostNameCell_.appendChild(hostNameNode);
 };
 
 /**
diff --git a/remoting/webapp/main.css b/remoting/webapp/main.css
index 80350a4..b39f3d5 100644
--- a/remoting/webapp/main.css
+++ b/remoting/webapp/main.css
@@ -3,18 +3,4443 @@
  * found in the LICENSE file.
  */
 
+html,body,div,span,applet,object,iframe,
+h1,h2,h3,h4,h5,h6,p,blockquote,pre,
+a,abbr,acronym,address,big,cite,code,
+del,dfn,em,font,img,ins,kbd,q,s,samp,
+small,strike,strong,sub,sup,tt,var,
+dl,dt,dd,ol,ul,li,
+fieldset,form,label,legend,
+table,caption,tbody,tfoot,thead,tr,th,td {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    font-weight: inherit;
+    font-style: inherit;
+    font-size: 100%;
+    font-family: inherit;
+    vertical-align: baseline;
+}
+body {
+    line-height: 1;
+    color: black;
+    background: white;
+}
+ol,ul {
+    list-style: none;
+}
+table {
+    border-collapse: separate;
+    border-spacing: 0;
+}
+caption,th,td {
+    text-align: left;
+    font-weight: normal;
+}
+blockquote:before,blockquote:after,
+q:before,q:after {
+    content: "";
+}
+blockquote,q {
+    quotes: "" "";
+}
+input::-moz-focus-inner {
+    border: 0;
+}
+
+
+/*------------------------------------------------------------------
+@global Type
+------------------------------------------------------------------*/
+body,body input,body button,body td {
+    font-family: "Arial", "Helvetica", sans-serif;
+    color: #222;
+    font-size:12px;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+h1,h2,h3,h4,h5 {
+    font-size: 16px;
+    line-height:24px;
+    font-weight: normal;
+    color: #222;
+}
+p {
+    margin: 0 0 1em;
+    font-size: 13px;
+    line-height: 18px;
+}
+p.nonLatin {
+    font-size: 14px;
+    line-height: 21px;
+}
+li {
+    line-height: 17px;
+}
+a {
+    text-decoration: none;
+    color: #15c;
+    cursor: pointer;
+}
+a:visited {
+    color: #61c;
+}
+a:active {
+    color: #d14836;
+}
+a.secondary {
+    text-decoration: none;
+    color: #2D9AE3;
+}
+iframe {
+    border: 0px;
+}
+strong, b {
+    color: #000;
+    font-weight:bold;
+}
+em {
+    font-style: italic;
+}
+
+div.mobile {
+    width:320px;
+}
+
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1; }
+
+/*------------------------------------------------------------------
+Stickersheet global styles
+------------------------------------------------------------------*/
+#stickersheet #siteTitle {
+    padding: 30px 40px;
+}
+#stickers > ul > li {
+    padding: 30px 0;
+    border-bottom: 1px solid #DDD;
+    position: relative;
+}
+.componentName {
+    display: block;
+    height: 29px;
+    float: none;
+    font-size: 20px;
+    line-height: 24px;
+    color: #222;
+    margin-bottom: 21px;
+    margin-left: 0px;
+    margin-right: 0px;
+}
+.option {
+    float: left;
+    width: 336px;
+    margin-right: 16px;
+}
+.option .componentName {
+    margin-bottom: 0;
+}
+#stickersheet h2.componentName a {
+    color: #222;
+}
+#stickers > ul {
+    margin: 0 44px;
+}
+/* stickersheet specific positioning */
+.kd-modaldialog.demo,
+.kd-settings.demo {
+    position: relative;
+    top: 0;
+    left: 0;
+    margin-left: 0;
+    -webkit-transform: scale(1.0);
+    z-index: 0;
+}
+#stickers #kd-tooltip {
+    top: 75px;
+    margin-left: 0;
+}
+#wrap {
+    overflow: auto;
+    height: 100%;
+}
+#stickers > ul > li ol {
+    margin: 5px 10px;
+}
+#stickers > ul > li ol li {
+    margin-bottom: 5px;
+}
+#stickers .kd-buttonbar {
+    margin-bottom: 16px;
+}
+#modaldemo {
+    display: none;
+}
+.sectionTitle {
+    float: left;
+    width: 160px;
+    margin-right: 16px;
+    clear: left;
+    margin-bottom: 16px;
+}
+.sectionContent {
+    float: left;
+    clear: right;
+    margin-bottom: 16px;
+}
+
+/*------------------------------------------------------------------
+Styleguide container
+------------------------------------------------------------------*/
+.styleguide {
+    padding: 0 44px 44px;
+}
+.styleguide .section {
+    position:relative;
+    padding: 44px 0;
+    height: 100%;
+    overflow:visible;
+    border-bottom: 1px solid #ebebeb;
+}
+.styleguide .section.clearfix {
+    overflow:hidden;
+}
+.styleguide .section .section {
+    padding: 16px 0;
+    border-bottom: 0;
+}
+.styleguide .section h3 {
+/*  margin: 16px 0;*/
+}
+#styleGuideNav {
+    width:156px;
+    position:fixed;
+    left:0;
+    top:28px;
+}
+#styleGuideNav li li a{
+    width:144px;
+    overflow:hidden;
+    white-space:nowrap;
+    text-overflow:ellipsis;
+}
+#styleGuideNav li li a.selected{
+    color:#d14836;
+}
+
+/*------------------------------------------------------------------
+Notes And Metrics
+------------------------------------------------------------------*/
+.notesBox .kd-zippy{
+    margin-top:-20px;
+}
+.notesBox .kd-zippy .row{
+    float:right;
+    display: block;
+    clear:both;
+}
+.notesBox .kd-disclosureindicator {
+    position:relative;
+    top:-2px;
+    cursor:default;
+}
+.notesBox .kd-disclosureindicator + h3{
+    display: inline;
+    margin-left:6px;
+    cursor:default;
+}
+.notesBox .kd-zippycontent{
+    height:100%;
+    overflow:hidden;
+    margin-bottom: 20px;
+    margin-left:16px;
+    background-color: #F5F5F5;
+    clear:both;
+}
+.notesBox .notes{
+    width:320px;
+    float:left;
+    padding-top:10px;
+    padding-bottom:10px;
+    padding-left:16px;
+}
+
+.notesBox h3{
+margin-bottom:10px;
+margin-top:10px;
+}
+
+.notesBox .metrics{
+    width:320px;
+    float:left;
+    padding-top:10px;
+    padding-bottom:10px;
+    padding-left:16px;
+
+}
+
+.notesBox ul {
+    list-style:disc outside;
+    padding: 0 16px 16px;
+}
+
+.notesBox ul li {
+    margin-bottom: 5px;
+}
+
+/*------------------------------------------------------------------
+Grid
+------------------------------------------------------------------*/
+#grid {
+    border-left: 44px solid rgba(255,255,0,0.1);
+    border-right: 44px solid rgba(255,255,0,0.1);
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    -webkit-box-sizing: content-box;
+    overflow: hidden;
+    -webkit-transition: all 0.218s;
+}
+html.x-expand #grid {
+    border-left: 72px solid rgba(255,255,0,0.05);
+    border-right: 72px solid rgba(255,255,0,0.05);
+}
+.gridline {
+    width: 72px;
+    height: 117px;
+    background-color: rgba(0,0,127,0.04);
+    border-left: 28px solid rgba(0,0,127,0.01);
+    border-right: 28px solid rgba(0,0,127,0.01);
+    margin-right: 16px;
+    float: left;
+    -webkit-box-sizing: border-box;
+}
+.gridline-right {
+    float: right;
+    margin-right: 0;
+    margin-left: 16px;
+}
+.gridfill {
+    background: red;
+}
+
+/*------------------------------------------------------------------
+Component: Typography
+------------------------------------------------------------------*/
+.productName{
+    font-size: 20px;
+    line-height: 24px;
+    color: #DD4B39;
+}
+.title{
+    color:#1155CC;
+    font-weight:normal;
+}
+.greytext{
+    color:#777777;
+}
+.bodylink{
+    color:#1155CC;
+}
+.searchlink{
+    color:#1122CC;
+}
+.visitedlink{
+    color:#6611CC;
+}
+.redlink{
+    color:#DD4B39;
+}
+.secondary{
+    font-size:11px;
+    color:#777777;
+}
+.secondary.nonLatin{
+    font-size:12px;
+    color:#777777;
+}
+.source{
+    color:#009933;
+}
+
+#typography p {
+    line-height: 170%;
+    margin-bottom: 0;
+}
+
+/*------------------------------------------------------------------
+Component: Colors
+------------------------------------------------------------------*/
+#colorTable {
+    border-left:1px solid #ebebeb;
+    border-bottom:1px solid #ebebeb;
+}
+#colorTable th{
+    background:#f5f5f5;
+    border:1px solid #e5e5e5;
+    border-right:1px solid #e5e5e5;
+    border-top:1px solid #e5e5e5;
+    font-weight:bold;
+    color:#222;
+}
+#colorTable td, #colorTable th{
+    text-align:left;
+    border-top:1px solid #ebebeb;
+    border-right:1px solid #ebebeb;
+    padding:4px 4px;
+}
+.colorBlock {
+    color: #FFF;
+    font-weight: bold;
+}
+.colorBlock.dark {
+    color: #222;
+}
+.colorBlock span {
+    text-align: left;
+    display: inline-block;
+    width: 100%;
+}
+.colorBlock:first-child {
+    margin-left: 0;
+}
+
+
+/* Background Color Changer */
+#bgColorChanger{
+    display:block;
+    position: relative;
+    width:250px;
+    margin-bottom:40px;
+
+    background: #FFF;
+    outline: 1px solid rgba(0,0,0,0.2);
+    -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    padding: 16px;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+}
+#bgColorChanger .title {
+    padding-right:10px;
+}
+
+#otherColor{
+    display:none;
+    width:auto;
+    margin-top:16px;
+}
+#otherColor input[type=text]{
+    width:auto;
+}
+#otherColor ul li, #otherColor label{display:inline-block; margin-bottom:0;}
+#otherColor ul li{margin-left:8px;}
+#otherColor ul li:first-child{margin-left:0;}
+
+/*------------------------------------------------------------------
+Component: Horizontal Rules
+------------------------------------------------------------------*/
+.whiteBox,.greyBox {
+    padding: 16px 0;
+    margin-bottom: 16px;
+}
+.greyBox {
+    background: #f1f1f1;
+}
+.kd-ruledBox {
+    width: 100%;
+}
+.kd-greyRuled {
+    border-top: 1px solid #e5e5e5;
+}
+.kd-whiteRuled {
+    border-top: 1px solid #ebebeb;
+}
+
+/*------------------------------------------------------------------
+Component: Shadows
+------------------------------------------------------------------*/
+.shadowList{
+    padding:16px;
+    list-style:disc inside;
+}
+.shadowList > li{
+    margin-bottom:16px;
+    position:relative;
+}
+.shadowList .kd-modaldialog{
+    display:block;
+    position:relative;
+    top:0;
+    left:0;
+    opacity:1;
+    margin:16px 0;
+    -webkit-transform:none;
+}
+
+/*------------------------------------------------------------------
+Component: Search Bar (Google Bar)
+------------------------------------------------------------------*/
+#kd-searchbar,
+#kd-googlebar{
+    position:relative;
+    background:#f1f1f1;
+    height:29px;
+    padding:21px 0;
+    border-bottom:1px solid #e5e5e5;
+    z-index:40;
+}
+#kd-googlebar.alternate{
+    z-index:30;
+}
+
+/* Search area */
+#kd-search {
+    position:absolute;
+    left:220px;
+    right:308px;
+    bottom:21px;
+    max-width:600px;
+    height:29px;
+}
+#kd-searchfield {
+    position:absolute;
+    left:0;
+    right:88px;
+    margin:0;
+    font-size:16px;
+    color:#000;
+}
+::-webkit-input-placeholder{
+    color:#999;
+}
+#kd-searchfield:-moz-placeholder, input:-moz-placeholder{
+    color:#999;
+}
+#kd-searchbutton {
+    position:absolute;
+    top:0;
+    right:0;
+}
+#kd-searchbutton img {
+    opacity:1;
+}
+#kd-googlebar.alternate #kd-search {
+    left:414px;
+    max-width:406px;
+}
+.kd-googlebuttonbar .kd-button{
+    min-width:0;
+    width:28px;
+}
+.kd-googlebuttonbar .kd-button .maskedIcon{
+    background:#7b7b7b;
+    display:inline-block;
+    width:21px;
+    height:21px;
+    margin:4px 0 0;
+    -moz-transition: all 0.218s;
+    -webkit-transition: all 0.218s;
+    -o-transition: all 0.218s;
+}
+.kd-googlebuttonbar .kd-button:hover .maskedIcon,
+.kd-googlebuttonbar .kd-button:active .maskedIcon,
+.kd-googlebuttonbar .kd-button.selected .maskedIcon{
+    background:#DD4B39;
+}
+.kd-googlebuttonbar .kd-button .maskedIcon img{visibility:hidden;}
+.kd-googlebuttonbar.kd-segmentedcontrol{
+    display:inline-block;
+    float:none;
+    margin-left:0;
+}
+
+
+/* Mobile variations */
+.mobile #kd-searchbar,
+.mobile #kd-googlebar {
+    height:29px;
+    padding:14px 0;
+}
+.mobile #kd-searchbar .kd-buttonbar.right,
+.mobile #kd-googlebar .kd-buttonbar.right{
+    margin-right:7px;
+}
+.mobile #kd-searchbar #kd-social .kd-share,
+.mobile #kd-googlebar #kd-social .kd-share{
+    padding-left:0;
+    margin-left:9px;
+}
+.mobile #kd-searchbar #kd-social .kd-notifications,
+.mobile #kd-googlebar #kd-social .kd-notifications{
+    min-width:19px;
+    width:19px;
+}
+.mobile #kd-searchbar #kd-social .kd-share,
+.mobile #kd-googlebar #kd-social .kd-share{
+    min-width:19px;
+    width:19px;
+}
+.mobile #kd-searchbar #kd-social .kd-avatar,
+.mobile #kd-googlebar #kd-social .kd-avatar{
+    margin-left:9px;
+}
+
+/*------------------------------------------------------------------
+Subcomponent: App Switcher
+------------------------------------------------------------------*/
+.kd-appswitcher {
+    position:relative;
+    top:-21px;
+    width:160px;
+    height:71px;
+    margin:0 0 0 44px;
+    float:left;
+}
+.kd-appswitcher .logo {
+    display:block;
+    width:160px;
+    height:71px;
+    cursor:pointer;
+}
+.kd-appswitcher .logo img {
+    display:block;
+    margin-top:1px;
+    width:117px;
+    height:71px;
+    float:left;
+    image-rendering:optimizeQuality;
+}
+.kd-appswitcher .logo .kd-disclosureindicator {
+    display:block;
+    position:relative;
+    top:50%;
+    float:left;
+    margin-top:-2px;
+    margin-left:6px;
+    background-position:0 0;
+    -webkit-transform:rotate(90deg);
+    -moz-transform:rotate(90deg);
+    transform:rotate(90deg);
+    opacity:0.3;
+
+    -webkit-transition:opacity 0.218s;
+    -moz-transition:opacity 0.218s;
+    transition:opacity 0.218s;
+}
+.kd-appswitcher:hover .logo .kd-disclosureindicator {
+    opacity:1;
+    -webkit-transition:opacity 0.18s;
+    -moz-transition:opacity 0.18s;
+    transition:opacity 0.18s;
+}
+.kd-appswitcher.open span.logo {
+    cursor:default;
+}
+
+.kd-appswitcher-menu {
+    position:absolute;
+    top:71px;
+    left:-4000px;
+    max-height:44px;
+    margin-top:-10px;
+
+    background:#2d2d2d;
+    border-bottom:1px solid #686868;
+
+    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
+    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
+    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
+
+    z-index:9999;
+    opacity:0;
+    -webkit-transition-property:opacity, max-height, margin, left;
+    -webkit-transition-duration:0.218s, 0.218s, 0.218s, 0s;
+    -webkit-transition-delay:0s, 0s, 0s, 0.218s;
+    -moz-transition-property:opacity, max-height, margin, left;
+    -moz-transition-duration:0.218s, 0.218s, 0.218s, 0s;
+    -moz-transition-delay:0s, 0s, 0s, 0.218s;
+    transition-property:opacity, max-height, margin, left;
+    transition-duration:0.218s, 0.218s, 0.218s, 0s;
+    transition-delay:0s, 0s, 0s, 0.218s;
+}
+.kd-appswitcher.open .kd-appswitcher-menu {
+    left:-18px;
+    max-height:400px;
+    opacity:1;
+    margin-top:0;
+    -webkit-transition-property:opacity, max-height, margin, left;
+    -webkit-transition-duration:0s, 0s, 0.218s, 0s;
+    -webkit-transition-delay:0s;
+    -moz-transition-property:opacity, max-height, margin, left;
+    -moz-transition-duration:0s, 0s, 0.218s, 0s;
+    -moz-transition-delay:0s;
+    transition-property:opacity, max-height, margin, left;
+    transition-duration:0s, 0s, 0.218s, 0s;
+    transition-delay:0s;
+}
+.kd-appswitcher-menu:before {
+    content:"";
+    display:block;
+    position:absolute;
+    top:-12px;
+    left:133px;
+    margin-left:-1px;
+    border-style:solid;
+    border-color:#777 transparent;
+    border-width:0 12px 12px;
+    z-index:20;
+}
+.kd-appswitcher-menu:after {
+    content:"";
+    display:block;
+    position:absolute;
+    top:-11px;
+    left:133px;
+    border-style:solid;
+    border-color:#2d2d2d transparent;
+    border-width:0 11px 11px;
+    z-index:21;
+}
+.kd-app {
+    width:192px;
+    height:43px;
+    border-top:1px solid #7d7d7d;
+}
+.kd-app:first-child {
+    border-top-color:#2d2d2d;
+}
+.kd-app > a {
+    display:block;
+    width:135px;
+    height:43px;
+    line-height:43px;
+    padding-left:57px;
+    background-position:12px center;
+    background-repeat:no-repeat;
+    color:#fff;
+}
+.kd-app:hover > a,
+a.logo:hover + .kd-appswitcher-menu .kd-app-search > a  {
+    background-color:#4c4c4c;
+}
+.kd-app-double > a {
+    height:34px;
+    padding-top:9px;
+    line-height:13px;
+}
+.app-caption {
+    font-size:10px;
+    color:rgba(255,255,255,0.5);
+}
+
+.killTransition {
+    -webkit-transition-duration:0;
+    -moz-transition-duration:0;
+    transition:0;
+}
+.kd-more-menu {
+    position:absolute;
+    top:0;
+    bottom:-1px;
+    left:-1000%;
+    width:0;
+    overflow:hidden;
+
+    background:#fff;
+    border:1px solid #e5e5e5;
+
+    -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+
+    -webkit-transition-property:width, left;
+    -webkit-transition-duration:0.218s, 0s;
+    -webkit-transition-easing-function:ease-in, linear;
+    -webkit-transition-delay:0.2s, 0.418s;
+    -moz-transition-property:width, left;
+    -moz-transition-duration:0.218s, 0s;
+    -moz-transition-easing-function:ease-in, linear;
+    -moz-transition-delay:0.2s, 0.418s;
+    -o-transition-property:width, left;
+    -o-transition-duration:0.218s, 0s;
+    -o-transition-easing-function:ease-in, linear;
+    -o-transition-delay:0.2s, 0.418s;
+    transition-property:width, left;
+    transition-duration:0.218s, 0s;
+    transition-easing-function:ease-in, linear;
+    transition-delay:0.2s, 0.418s;
+}
+.kd-app:hover > .kd-more-menu,
+.kd-app .kd-more-menu.open {
+    width:192px;
+    left:100%;
+
+    -webkit-transition-easing-function:ease-out, linear;
+    -webkit-transition-delay:0.2s;
+    -moz-transition-easing-function:ease-out, linear;
+    -moz-transition-delay:0.2s;
+    -o-transition-easing-function:ease-out, linear;
+    -o-transition-delay:0.2s;
+    transition-easing-function:ease-out, linear;
+    transition-delay:0.2s;
+}
+.kd-more-menu .kd-more-container {
+    position:absolute;
+    top:0;
+    right:0;
+    width:192px;
+}
+.kd-more-container ul{
+    float:left;
+}
+.kd-appswitcher-menu .kd-app-more:hover .kd-more-menu,
+.kd-appswitcher-menu .kd-app-more .kd-more-container {
+    width:576px;
+}
+.kd-more-menu .kd-app { border-top:1px solid #e5e5e5; }
+.kd-more-menu .kd-app:first-child { border-top:none; }
+.kd-more-menu .kd-app:hover > a { background-color:rgba(0,0,0,0.05); }
+
+.kd-more-menu .kd-app > a { color:#2d2d2d; }
+
+
+.mobile .kd-appswitcher {
+    position:absolute;
+    top:0;
+    left:0;
+    margin:0 0 0 16px;
+    float:none;
+    width:120px;
+    height:57px;
+}
+.mobile .kd-appswitcher .kd-appswitcher-menu { top:57px; }
+.mobile .kd-appswitcher.open .kd-appswitcher-menu { left:-10px; }
+
+.mobile .kd-appswitcher .kd-appswitcher-menu:before {
+    top:-8px;
+    left:15px;
+    border-width:0 8px 8px;
+}
+.mobile .kd-appswitcher .kd-appswitcher-menu:after {
+    top:-7px;
+    left:15px;
+    border-width:0 7px 7px;
+}
+.mobile .kd-appswitcher .logo { width:120px; height:60px; }
+.mobile .kd-appswitcher .logo img { width:99px; height:60px; }
+
+.mobile .kd-more-menu { left:-9999px; }
+.mobile .kd-appswitcher-menu .kd-app-more .kd-more-container { width:192px; }
+
+.mobile .kd-app:hover > .kd-more-menu,
+.mobile .kd-app .kd-more-menu.open {
+    width:192px;
+    left:50px;
+}
+
+/*------------------------------------------------------------------
+Component: Sidebars
+------------------------------------------------------------------*/
+#styleguide #sidebars {
+    overflow: visible;
+    height: 544px;
+}
+.sidebarHolder {
+    width: 220px;
+    float: left;
+/*  border-left:1px solid #ebebeb;
+    border-right:1px solid #ebebeb;*/
+}
+.sidebarHolder h4 {
+    padding: 16px 0;
+}
+
+.kd-content-sidebar {
+    width:160px;
+    padding:16px 0px 16px 44px;
+    border-left:1px solid #ebebeb;
+}
+.kd-content-sidebar li {
+    position:relative;
+    margin-left: -16px;
+    border-bottom:1px solid transparent;
+}
+.kd-content-sidebar li a {
+    display: block;
+    line-height: 29px;
+    color: #333;
+    font-size: 13px;
+    cursor:default;
+}
+
+.kd-content-sidebar .kd-zippy .row a {
+    margin-left: 16px;
+}
+.kd-content-sidebar li
+.kd-content-sidebar ul ul{
+    margin-left:28px;
+}
+.kd-content-sidebar ul ul li,
+.kd-content-sidebar ul ul li a{
+    line-height:19px;
+}
+.kd-content-sidebar ul ul li a{
+    padding-left: 12px;
+    margin-left: 32px;
+}
+.kd-content-sidebar ul ul li .kd-disclosureindicator{
+    top:0;
+    height:19px;
+}
+.kd-content-sidebar ul ul li:hover .kd-disclosureindicator{
+/*  height:16px;*/
+}
+.kd-content-sidebar li.selected .kd-disclosureindicator,
+
+.kd-content-sidebar li .kd-disclosureindicator {
+    position: relative;
+    display: block;
+    float: left;
+    width:15px;
+    height:29px;
+    background-position:center;
+    margin-left:-1px;
+    opacity: 0.8;
+    filter: alpha(opacity=80);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+    -moz-transition: none;
+    -o-transition: none;
+    -webkit-transition: none;
+    cursor:default;
+}
+.kd-content-sidebar li:hover > .kd-disclosureindicator {
+    opacity: 1.0;
+    filter: alpha(opacity=80);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+}
+
+.kd-content-sidebar ul > li > a {
+    padding-left: 16px;
+}
+
+.kd-content-sidebar ul > li > a:hover {
+    background-color: #eee;
+}
+.kd-content-sidebar span.row {
+    display: block;
+}
+.kd-content-sidebar span.row.split:hover {
+    background-color: transparent;
+}
+
+.kd-content-sidebar span.row:hover,
+.kd-content-sidebar .kd-zippycontent li a:hover,
+.kd-content-sidebar span.row.split a:hover,
+.kd-content-sidebar span.row.split .kd-disclosureindicator:hover {
+    background-color: #eee;
+    color: #222;
+}
+
+.kd-content-sidebar .kd-zippy span.row:hover .kd-disclosureindicator,
+.kd-content-sidebar .kd-zippy span.row.split .kd-disclosureindicator:hover {
+    opacity: 1.0;
+    filter: alpha(opacity=80);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+}
+
+.kd-content-sidebar li.selected a {
+    color: #d14836;
+}
+ul.iconlist li a, li.kd-labellistitem a {
+    background-position: 25px 50%;
+    background-repeat: no-repeat;
+}
+li.kd-labellistitem.selected a{
+    background-position:20px 50%;
+}
+ul.iconlist li.kd-sidebarlistitem a{
+    background-position: 44px 50%;
+    padding-left:75px;
+}
+ul.iconlist li.kd-sidebarlistitem.selected a{
+    background-position: 39px 50%;
+    padding-left:70px;
+}
+.kd-menulabel{
+    position:absolute;
+    height:11px;
+    width:11px;
+    top:11px;
+    right:11px;
+    cursor:default;
+    border-radius:1px;
+    -moz-border-radius:1px;
+    -webkit-border-radius:1px;
+}
+.kd-menulabel.red{
+    background:#DD4B39;
+}
+.kd-menulabel.grey{
+    background:#999999;
+}
+.kd-menulabel.blue{
+    background:#4D90F0;
+}
+
+.kd-content-sidebar .kd-menulist li{
+    margin-left:0;
+}
+.kd-flyouttrigger.selected .kd-menulist{
+    display:block;
+}
+.kd-flyouttrigger.selected .kd-menulist.clip{
+    overflow-y:auto;
+}
+/*sidebars - extended hover and selected states*/
+.kd-content-sidebar .kd-sidebarlistitem{
+    margin-left:-44px;
+}
+.kd-content-sidebar .kd-sidebarlistitem > a{
+    padding-left:44px;
+}
+.kd-content-sidebar .kd-sidebarlistitem.selected > a/*, .kd-content-sidebar .kd-sidebarlistitem.kd-zippy.expanded > .row*/{
+    border-left:5px solid #999;
+    padding-left:39px;
+}
+.kd-content-sidebar .kd-sidebarlistitem > .row{
+    padding-left:28px;
+}
+/*sidebar zippy*/
+.kd-content-sidebar .kd-sidebarlistitem.kd-zippy .kd-zippycontent{
+    margin-left:29px;
+}
+
+.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split:hover .row{
+    background-color:transparent;
+}
+.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .row{
+    padding-left:0;
+}
+.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .kd-disclosureindicator{
+    padding-left:28px;
+    background-position:34px center;
+    margin-left:0;
+}
+
+.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .kd-disclosureindicator{
+    width:13px;
+    border-right:1px solid #FFF;
+}
+.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .label > a{
+    margin-left:41px;
+    padding-left:3px;
+}
+.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .kd-disclosureindicator:hover,
+/*.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .kd-disclosureindicator.down,*/
+.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .label:hover{
+    background-color:#EEE;
+    color: #222;
+}
+.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .label{
+    display:block;
+}
+.kd-content-sidebar .kd-sidebarlistitem.kd-zippy.split .kd-disclosureindicator.down{
+    background-position:32px center;
+}
+
+/*------------------------------------------------------------------
+Component: App bars
+------------------------------------------------------------------*/
+.kd-appbar {
+    position:relative;
+    padding: 21px 0;
+    border-bottom: 1px solid #ebebeb;
+    height: 29px;
+    z-index:20;
+    background:#fff;
+}
+.kd-appbar .kd-appname {
+    width: 160px;
+    margin-right: 16px;
+    margin-left: 44px;
+    height: 29px;
+    float: left;
+    font-size: 20px;
+    font-weight: normal;
+    line-height: 29px;
+    color: #666;
+    white-space:nowrap;
+}
+.kd-appbar .kd-appname a { color: #666; cursor:pointer; }
+#stickers .kd-appbar .kd-buttonbar {
+    margin-bottom: 0;
+}
+.kd-buttonbar{
+    height:29px;
+    line-height:29px;
+}
+.kd-buttonbar.right {
+    float: right;
+    margin-right: 44px;
+}
+.kd-buttonbar.left {
+    float: left;
+}
+.kd-buttonbar span.kd-count, .kd-buttonbar span.kd-count strong {
+    line-height: 29px;
+    color: #666;
+}
+.kd-buttonbar.right span.kd-count {
+    float: left;
+}
+.kd-buttonbar.left span.kd-count {
+    float: right;
+    margin-left: 16px;
+}
+#styleguide .section .kd-appbar h4 {
+    margin-bottom: 16px;
+}
+
+/* Maps (mini) app bar */
+.maps .kd-appbar { width:380px; }
+.maps .kd-appbar .kd-appname { width:auto; }
+.maps .kd-maps-collapser {
+    display:block;
+    position:absolute;
+    top:0;
+    bottom:0;
+    right:0;
+    width:15px;
+    line-height:71px;
+    vertical-align:middle;
+    text-align:center;
+    border: 1px solid #ebebeb;
+    border-width:0 1px;
+    background:#fff;
+    cursor:pointer;
+    -webkit-transition:line-height 0.18s;
+    -moz-transition:line-height 0.18s;
+    transition:line-height 0.18s;
+}
+.maps .kd-maps-collapser .kd-disclosureindicator {
+    -webkit-transform: rotate(-180deg);
+    -moz-transform: rotate(-180deg);
+    transform: rotate(-180deg);
+}
+.maps .kd-maps-collapser:hover {
+    background:#f1f1f1;
+}
+
+/* Mobile app bar */
+.mobile .kd-appbar {
+    padding:7px 0;
+}
+.mobile .kd-appbar .kd-appname{
+    width:auto;
+    margin-left:16px;
+    margin-right:7px;
+
+    font-size:16px;
+}
+.mobile .kd-appbar .kd-appname.arrowed:before {
+    display:inline-block;
+    content:"‹";
+    text-align:right;
+    width:12px;
+    margin:0 4px 0 -16px;
+}
+.mobile .kd-appbar .kd-buttonbar.right{
+    margin-right:7px;
+}
+.mobile .kd-appbar .kd-button-action img,
+.mobile .kd-appbar .kd-button-share img,
+.mobile .kd-appbar .kd-button-submit img{
+    opacity:1;
+}
+.mobile .kd-appbar .kd-button.mid { margin-left:-1px; }
+.mobile .kd-appbar .kd-button.right { margin-left:-1px; }
+.mobile .kd-appbar .kd-button:first-child { margin-left:0; }
+.mobile .kd-appbar .cancel-button{
+    display:inline-block;
+    height:27px;
+    width:34px;
+    line-height:27px;
+    padding:4px 0;
+    text-align:center;
+    margin-left:6px;
+    margin-right:-6px;
+}
+.mobile .kd-appbar .cancel-button img{
+    opacity:.667;
+}
+
+/*------------------------------------------------------------------
+Component: Toolbar
+------------------------------------------------------------------*/
+.kd-toolbar {
+    height: 29px;
+    background: #f1f1f1;
+    border-top: 1px solid #e5e5e5;
+    border-bottom: 1px solid #ebebeb;
+    margin-bottom: 44px;
+    padding: 8px 44px 4px;
+}
+.kd-toolbar .kd-select .kd-disclosureindicator{
+    margin-top:7px;
+}
+.kd-toolbarbutton {
+    border-color: transparent;
+    background: 0;
+}
+.kd-toolbar .kd-button{
+    margin-left:0;
+}
+.kd-toolbar .kd-button.right{
+    margin-left:0;
+}
+.kd-toolbarbutton.small, .kd-toolbar .kd-button.small{
+    width:24px;
+    min-width:24px;
+}
+.kd-toolbarbutton, .kd-toolbar .kd-button{
+    height:24px;
+    line-height:24px;
+}
+.kd-toolbar .kd-menubutton.small{
+    width:34px;
+}
+.kd-toolbar .kd-button{
+    min-width:0;
+}
+.kd-toolbarbutton:hover {
+    border: 1px solid #C6C6C6;
+    color: #333;
+    -webkit-transition: all 0.0s;
+    -moz-transition: all 0.0s;
+    -o-transition: all 0.0s;
+    transition: all 0.0s;
+    background-color: #f8f8f8;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));
+    background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
+    background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
+    background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
+    background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
+    background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8',EndColorStr='#f1f1f1');
+    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
+    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
+    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
+}
+.kd-toolbarbutton:active {
+    background-color: #f6f6f6;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#f1f1f1));
+    background-image: -webkit-linear-gradient(top,#f6f6f6,#f1f1f1);
+    background-image: -moz-linear-gradient(top,#f6f6f6,#f1f1f1);
+    background-image: -ms-linear-gradient(top,#f6f6f6,#f1f1f1);
+    background-image: -o-linear-gradient(top,#f6f6f6,#f1f1f1);
+    background-image: linear-gradient(top,#f6f6f6,#f1f1f1);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f6f6f6',EndColorStr='#f1f1f1');
+    -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+}
+.kd-toolbarbutton:visited {
+    color: #666;
+}
+.kd-toolbarbutton.focus {
+    outline: none;
+    border: 1px solid #4d90fe;
+}
+
+.kd-toolbarbutton.selected, .kd-toolbar .kd-menubutton.selected {
+    background-color: #EEEEEE;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#EEEEEE),to(#E0E0E0));
+    background-image: -webkit-linear-gradient(top,#EEEEEE,#E0E0E0);
+    background-image: -moz-linear-gradient(top,#EEEEEE,#E0E0E0);
+    background-image: -ms-linear-gradient(top,#EEEEEE,#E0E0E0);
+    background-image: -o-linear-gradient(top,#EEEEEE,#E0E0E0);
+    background-image: linear-gradient(top,#EEEEEE,#E0E0E0);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE',EndColorStr='#E0E0E0');
+    -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    border: 1px solid #CCC;
+    color: #333;
+}
+
+.kd-toolbar .kd-select,
+.kd-toolbar .kd-menubutton {
+/*  background: #fdfdfd;*/
+    border-color:transparent;
+}
+.kd-toolbar .kd-select:hover, .kd-toolbar .kd-menubutton:hover{
+    border: 1px solid #C6C6C6;
+}
+
+.kd-toolbarseparator {
+    display: inline-block;
+    float: left;
+    height: 17px;
+    margin: 5px 6px 0 6px;
+    border-left: 1px solid #CCC;
+}
+.kd-toolbarseparator.no-margin{
+    margin:5px 0 0 0;
+}
+.buttongroup{
+    margin:0 6px;
+    float:left;
+}
+.buttongroup.first{
+    margin-left:0;
+}
+.kd-toolbarseparator + .kd-select.kd-menubutton {
+    margin-left: -1px;
+}
+.kd-select.kd-menubutton + .kd-toolbarseparator {
+    margin-left: -1px;
+}
+.kd-toolbar .kd-select.kd-menubutton {
+    background-color: transparent;
+    background-image: none;
+}
+
+/*------------------------------------------------------------------
+Component: Tabs
+------------------------------------------------------------------*/
+#stickersheet .kd-tabbar-horz {
+    margin-bottom: 40px;
+}
+.kd-tabbar-horz {
+    border-bottom: 1px solid #ccc;
+    height: 28px;
+}
+.kd-tabbar-vert {
+    border-right: 1px solid #ccc;
+    display: inline-block;
+    width: 71px;
+    height: 100%;
+}
+.kd-tabbutton {
+    display: inline-block;
+    min-width: 54px;*min-width:70px;/*hello,IE7!*/
+    text-align: center;
+    color: #666;
+    font-size: 11px;
+    font-weight: bold;
+    height: 27px;
+    padding: 0 8px;
+    line-height: 27px;
+    -webkit-transition: all 0.218s;
+    -moz-transition: all 0.218s;
+    -o-transition: all 0.218s;
+    transition: all 0.218s;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5',EndColorStr='#f1f1f1');
+    -webkit-user-select:none;
+    -moz-user-select:none;
+    cursor:default;
+
+    border: 1px solid transparent;
+}
+
+.kd-tabbutton:hover {
+    color: #222;
+}
+
+.kd-tabbutton:active {
+    color: #333;
+}
+
+.kd-tabbutton.selected {
+    color: #202020;
+    border: 1px solid #ccc;
+}
+
+.kd-tabbar-horz .kd-tabbutton {
+    -webkit-border-top-left-radius:2px;
+    -webkit-border-top-right-radius:2px;
+    -moz-border-radius-topleft: 2px;
+    -moz-border-radius-topright: 2px;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+}
+
+.kd-tabbar-vert .kd-tabbutton {
+    -webkit-border-top-left-radius:2px;
+    -webkit-border-bottom-left-radius:2px;
+    -moz-border-radius-topleft: 2px;
+    -moz-border-radius-bottomleft: 2px;
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+}
+
+.kd-tabbar-horz .kd-tabbutton.selected {
+    border-bottom: 1px solid #fff;
+
+}
+
+.kd-tabbar-vert .kd-tabbutton.selected {
+    border-right: 1px solid #fff;
+}
+
+/*------------------------------------------------------------------
+Component: Buttons
+------------------------------------------------------------------*/
+.kd-button {
+    display: inline-block;
+    min-width: 54px;*min-width:70px;/*hello,IE7!*/
+    border:1px solid #DCDCDC;
+    border: 1px solid rgba(0,0,0,0.1);
+    text-align: center;
+    color: #444;
+    font-size: 11px;
+    font-weight: bold;
+    height: 27px;
+    padding: 0 8px;
+    line-height: 27px;
+    -webkit-border-radius:2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    -webkit-transition: all 0.218s;
+    -moz-transition: all 0.218s;
+    -o-transition: all 0.218s;
+    transition: all 0.218s;
+    background-color: #f5f5f5;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));
+    background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
+    background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
+    background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
+    background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
+    background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5',EndColorStr='#f1f1f1');
+    -webkit-user-select:none;
+    -moz-user-select:none;
+    cursor:default;
+}
+.kd-button:hover, .kd-button.hover {
+    border: 1px solid #C6C6C6;
+    color: #222;
+    -webkit-transition: all 0.0s;
+    -moz-transition: all 0.0s;
+    -o-transition: all 0.0s;
+    transition: all 0.0s;
+    background-color: #f8f8f8;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));
+    background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
+    background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
+    background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
+    background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
+    background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8',EndColorStr='#f1f1f1');
+    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
+    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
+    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
+}
+.kd-button:active, .kd-button.active {
+    background-color: #f6f6f6;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#f1f1f1));
+    background-image: -webkit-linear-gradient(top,#f6f6f6,#f1f1f1);
+    background-image: -moz-linear-gradient(top,#f6f6f6,#f1f1f1);
+    background-image: -ms-linear-gradient(top,#f6f6f6,#f1f1f1);
+    background-image: -o-linear-gradient(top,#f6f6f6,#f1f1f1);
+    background-image: linear-gradient(top,#f6f6f6,#f1f1f1);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f6f6f6',EndColorStr='#f1f1f1');
+    -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+}
+.kd-button.active{
+    border: 1px solid #C6C6C6;
+    color: #333;
+}
+
+.kd-button:visited {
+    color: #666;
+}
+.kd-button.focus, .kd-button.right.focus, .kd-button.mid.focus, .kd-button.left.focus{
+    outline: none;
+    border: 1px solid #4d90fe;
+    z-index:4 !important;
+}
+
+.kd-button.selected {
+    background-color: #EEEEEE;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#EEEEEE),to(#E0E0E0));
+    background-image: -webkit-linear-gradient(top,#EEEEEE,#E0E0E0);
+    background-image: -moz-linear-gradient(top,#EEEEEE,#E0E0E0);
+    background-image: -ms-linear-gradient(top,#EEEEEE,#E0E0E0);
+    background-image: -o-linear-gradient(top,#EEEEEE,#E0E0E0);
+    background-image: linear-gradient(top,#EEEEEE,#E0E0E0);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEEEEE',EndColorStr='#E0E0E0');
+    -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    border: 1px solid #CCC;
+    color: #333;
+}
+.kd-button input[type=checkbox] {
+    position: relative;
+    top: 3px;
+}
+
+.kd-button img {
+    display: inline-block;
+    margin: -3px 0 0;
+    opacity: 0.55;
+    *margin:4px 0 0; /*IE7*/
+/*  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; //IE CANNOT HANDLE OPACITY ON PNGS, SO WE ARE JUST GONNA REMOVE THESE FILTERS
+    filter: alpha(opacity=80);*/
+
+    margin-left: 0px;
+    margin-right: 0px;
+    vertical-align: middle;
+}
+
+.kd-button.selected img {
+    opacity: 0.9;
+/*  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+    filter: alpha(opacity=90);*/
+}
+.kd-button:hover img {
+    opacity: 0.72;
+/*  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+    filter: alpha(opacity=90);*/
+}
+.kd-button:active img {
+    opacity: 1.0;
+/*  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+    filter: alpha(opacity=100);*/
+}
+
+/* Disabled buttons */
+.kd-button.disabled, .kd-button.disabled:hover, .kd-button.disabled:active {
+    background: none;
+    color: #b8b8b8;
+    border: 1px solid #f3f3f3;
+    border: 1px solid rgba(0,0,0,0.05);
+    cursor: default;
+    pointer-events: none;
+}
+.kd-button.disabled.active{
+    -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+}
+.kd-button-submit.disabled, .kd-button-submit.disabled:hover, .kd-button-submit.disabled:active,
+.kd-button-share.disabled, .kd-button-share.disabled:hover, .kd-button-share.disabled:active,
+.kd-button-action.disabled, .kd-button-action.disabled:hover, .kd-button-action.disabled:active {
+    border: 1px solid #505050;
+    background-color: #666;
+    color: #FFF;
+    opacity: 0.5;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+    filter: alpha(opacity=50);
+}
+.kd-button.disabled img {
+    opacity: 0.5;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+    filter: alpha(opacity=50);
+}
+
+/* Colored Buttons */
+.kd-button-submit:focus, .kd-button-submit.focus,
+.kd-button-share:focus, .kd-button-share.focus,
+.kd-button-action:focus, .kd-button-action.focus{
+    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
+    -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
+    -moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
+}
+.kd-button-submit:focus, .kd-button-submit.focus,
+.kd-button-share:focus, .kd-button-share.focus,
+.kd-button-action:focus, .kd-button-action.focus {
+    border-color:#404040;
+}
+
+.kd-button-submit:focus:hover, .kd-button-submit.focus:hover,
+.kd-button-share:focus:hover, .kd-button-share.focus:hover,
+.kd-button-action:focus:hover, .kd-button-action.focus:hover{
+    box-shadow:inset 0 0 0 1px #fff, 0px 1px 1px rgba(0,0,0,0.1);
+    -webkit-box-shadow:inset 0 0 0 1px #fff, 0px 1px 1px rgba(0,0,0,0.1);
+    -moz-box-shadow:inset 0 0 0 1px #fff, 0px 1px 1px rgba(0,0,0,0.1);
+}
+
+.kd-button-submit,
+.kd-button-share,
+.kd-button-action {
+    border: 1px solid #505050;
+    color: #FFF;
+    background-color: #666;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#777),to(#555));
+    background-image: -webkit-linear-gradient(top,#777,#555);
+    background-image: -moz-linear-gradient(top,#777,#555);
+    background-image: -ms-linear-gradient(top,#777,#555);
+    background-image: -o-linear-gradient(top,#777,#555);
+    background-image: linear-gradient(top,#777,#555);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#777777',EndColorStr='#555555');
+}
+.kd-button-submit:hover,
+.kd-button-share:hover,
+.kd-button-action:hover {
+    border: 1px solid #404040;
+    color: #FFF;
+    background-color: #555;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#666),to(#444));
+    background-image: -webkit-linear-gradient(top,#666,#444);
+    background-image: -moz-linear-gradient(top,#666,#444);
+    background-image: -ms-linear-gradient(top,#666,#444);
+    background-image: -o-linear-gradient(top,#666,#444);
+    background-image: linear-gradient(top,#666,#444);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666',EndColorStr='#444444');
+}
+.kd-button-submit:active, .kd-button-submit:focus:active, .kd-button-submit.focus:active,
+.kd-button-share:active, .kd-button-share:focus:active, .kd-button-share.focus:active,
+.kd-button-action:active, .kd-button-action:focus:active, .kd-button-action.focus:active {
+    -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
+    -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
+    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
+}
+
+.kd-button-share {
+    text-shadow: 0px 1px rgba(0,0,0,0.1);
+}
+.kd-button-share:hover {
+    text-shadow: 0px 1px rgba(0,0,0,0.3);
+}
+.kd-button-action {
+    margin-bottom: 16px;
+    text-transform: uppercase;
+    letter-spacing:1;
+    text-shadow: 0px 1px rgba(0,0,0,0.1);
+}
+.kd-button-action:hover {
+    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
+    box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
+}
+.kd-button-action:visited,
+.kd-button-share:visited,
+.kd-button-submit:visited {
+    color: #FFF;
+}
+.kd-button.kd-button-action img,
+.kd-button.kd-button-action.selected img,
+.kd-button.kd-button-action:hover img,
+.kd-button.kd-button-action:active img,
+.kd-button.kd-button-submit img,
+.kd-button.kd-button-submit.selected img,
+.kd-button.kd-button-submit:hover img,
+.kd-button.kd-button-submit:active img,
+.kd-button.kd-button-share img,
+.kd-button.kd-button-share.selected img,
+.kd-button.kd-button-share:hover img,
+.kd-button.kd-button-share:active img {
+    opacity: 1.0;
+}
+
+/* Buttons of all styles */
+.kd-buttonbar .kd-button,
+.kd-buttonbar .kd-combobutton,
+.kd-buttonbar .kd-expandbutton {
+    float: left;
+    margin: 0;
+    margin-left: 16px;
+    position: relative;
+    z-index: 1;
+}
+.left + .kd-combobutton{
+    margin-left:0;
+}
+
+.kd-buttonbar .kd-button:hover {
+    z-index: 2;
+}
+.kd-buttonbar .kd-button:first-child,
+.kd-buttonbar .kd-combobutton:first-child,
+.kd-buttonbar .kd-expandbutton:first-child {
+    margin-left: 0;
+}
+
+.kd-button.small,
+.mobile .kd-button.small {
+    min-width: 34px;
+    width: 34px;
+    padding: 0;
+}
+.mobile .kd-button {
+    min-width:30px;
+    width:30px;
+    padding:0 8px;
+    margin-left:7px;
+}
+.kd-menubutton {
+    position: relative;
+}
+.kd-menubutton .kd-disclosureindicator {
+    float: right;
+    margin-top: 10px;
+    margin-left: 7px;
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    transform: rotate(90deg);
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+    opacity: .8;
+    -webkit-transition: none;
+    -moz-transition: none;
+    -o-transition: none;
+    transition: none;
+
+/*  ie hacks*/
+    *float:none;
+    *position:relative;
+    *top:-3px;
+    margin-top:12px\0/;
+}
+.kd-select { position:relative; }
+.kd-select .kd-disclosureindicator{
+    width:7px;
+    height:11px;
+    -webkit-transform: none;
+    -moz-transform: none;
+    transform: none;
+    margin-top:8px;
+}
+
+.kd-menubutton.small img {
+    margin-left: -8px;
+}
+.kd-menubutton.small .kd-disclosureindicator {
+    position: absolute;
+    margin: 10px 0;
+    right: 4px;
+}
+.kd-menubutton .kd-menulist .kd-disclosureindicator {
+    float: none;
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    transform: rotate(0);
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+    opacity: .8;
+}
+.kd-menubutton img + .label{
+    margin-left:5px;
+}
+
+.kd-menubutton img {
+    display: inline-block;
+}
+.kd-menubutton:hover .kd-disclosureindicator {
+    border-left-color: #999;
+    opacity: 1;
+}
+.kd-menubutton span.label {
+    display: inline-block;
+}
+.kd-combobutton .kd-menubutton:first-child {
+    -webkit-border-radius: 2px 0 0 2px;
+    -moz-border-radius: 2px 0 0 2px;
+    border-radius: 2px 0 0 2px;
+}
+.kd-combobutton .kd-menutrigger,
+.mobile .kd-combobutton .kd-menutrigger {
+    margin-left: -1px;
+    border-left-color: transparent;
+    padding: 0 8px 0 2px;
+    width:auto;
+    min-width: 0;
+    -webkit-border-radius: 0 2px 2px 0;
+    -moz-border-radius: 0 2px 2px 0;
+    border-radius: 0 2px 2px 0;
+    z-index: 0;
+}
+.kd-combobutton .kd-menutrigger:hover {
+    border-left-color: #c6c6c6;
+}
+
+.kd-expandbutton {
+    display: inline-block;
+    overflow: hidden;
+    z-index: 0;
+    width: 88px;
+    height: 29px;
+    position: relative;
+    -webkit-transition: all 0.218s;
+    -moz-transition: all 0.218s;
+    -o-transition: all 0.218s;
+    transition: all 0.218s;
+    cursor:pointer;
+}
+.kd-expandbutton:hover {
+    width: 210px;
+    margin-left: -100px;
+}
+.kd-expandbutton:hover .expand-options{
+    border-color: #e5e5e5;
+}
+.kd-expandbutton .expand-options {
+    display: inline-block;
+    background: #f7f7f7;
+    border: 1px solid #f0f0f0;
+    padding-left: 16px;
+    -webkit-border-radius: 2px 0 0 2px;
+    -moz-border-radius: 2px 0 0 2px;
+    border-radius: 2px 0 0 2px;
+    position: absolute;
+    left: 0;
+    width: 144px;
+    font-size:11px;
+}
+.kd-expandbutton .expand-options span {
+    float:left;
+    padding: 0 8px;
+    line-height: 27px;
+    color:#666;
+/*  border-left:1px solid transparent;*/
+}
+
+.kd-expandbutton .expand-options span:hover, .kd-expandbutton .expand-options span.selected{
+    background-color:#e5e5e5;
+    color: #222;
+}
+.kd-expandbutton .expand-options .kd-disclosureindicator {
+    position: absolute;
+    top: 50%;
+    margin-top: -3px;
+    left: -3px;
+    opacity: .5;
+    -webkit-transform: rotate(180deg);
+    -moz-transform: rotate(180deg);
+    transform: rotate(180deg);
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+
+}
+.kd-expandbutton .main {
+    z-index: 1;
+    position: absolute;
+    right: 0;
+}
+.kd-expandbutton:hover .kd-button.main{
+    border: 1px solid #C6C6C6;
+    color: #333;
+    -webkit-transition: all 0.0s;
+    -moz-transition: all 0.0s;
+    -o-transition: all 0.0s;
+    transition: all 0.0s;
+    background-color: #f8f8f8;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));
+    background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
+    background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
+    background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
+    background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
+    background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8',EndColorStr='#f1f1f1');
+    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
+    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
+    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
+}
+
+/* Combo/segmented buttons */
+.kd-combobutton .kd-button-action.small {
+    margin: 0 0 0 1px;
+}
+.kd-button.left {
+    border-right-color: transparent;
+    margin-right: 0;
+    -webkit-border-radius: 2px 0 0 2px;
+    -moz-border-radius: 2px 0 0 2px;
+    border-radius: 2px 0 0 2px;
+}
+.kd-button.left:hover {
+    border-right: 1px solid #c6c6c6;
+}
+.kd-button.mid {
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    margin-left:0;
+    margin-right:0;
+}
+.kd-button.mid + .kd-button.mid, .kd-button.left + .kd-button.mid{
+    margin-left: -1px;
+}
+.kd-button.right {
+    margin-left: 0;
+    -webkit-border-radius: 0 2px 2px 0;
+    -moz-border-radius: 0 2px 2px 0;
+    border-radius: 0 2px 2px 0;
+    margin-left:-1px;
+}
+.kd-button.right:hover {
+    border-left: 1px solid #c6c6c6;
+}
+.kd-segmentedcontrol{
+    float:left;
+    margin-left:16px;
+}
+.kd-segmentedcontrol:first-child{
+    margin-left:0;
+}
+.kd-button.left.kd-button-action:hover {
+    border-right: 1px solid transparent;
+}
+.kd-button.right.kd-button-action:hover {
+    border-left: 1px solid transparent;
+}
+
+/* Mini buttons */
+.kd-button.mini{
+    height:17px;
+    line-height:17px;
+    min-width:0;
+}
+/* Mini text input */
+input[type="text"].mini{
+    height:17px;
+    line-height:17px;
+    display:inline-block;
+    padding:0 2px;
+    -webkit-box-sizing:content-box;
+    font-size:11px;
+}
+
+/* View toggle buttonset */
+.kd-viewtoggle{
+    display:block;
+    height:29px;
+    position:relative;
+}
+.kd-viewtoggle .kd-button{
+    position:absolute;
+    margin:0;
+    -webkit-transition: right 0.13s;
+    -moz-transition: right 0.13s;
+    -o-transition: right 0.13s;
+    transition: right 0.13s;
+
+    -webkit-transition-delay:0.4s;
+    -moz-transition-delay:0.4s;
+    -o-transition-delay:0.4s;
+    transition-delay:0.4s;
+}
+.kd-viewtoggle .kd-button.selected{
+    z-index:3;
+}
+.kd-viewtoggle .tab{
+    position: absolute;
+    top: 0;
+    right: 36px;
+    display:block;
+    height:27px;
+    width:16px;
+    border: 1px solid #ebebeb;
+    -webkit-border-radius: 2px 0 0 2px;
+    -moz-border-radius: 2px 0 0 2px;
+    border-radius: 2px 0 0 2px;
+    -webkit-transition: all 0.218s linear 0.4s;
+    -moz-transition: all 0.218s linear 0.4s;
+    -o-transition: all 0.218s linear 0.4s;
+    transition: all 0.218s linear 0.4s;
+}
+.kd-viewtoggle.wide .tab{
+    right:72px;
+}
+.kd-viewtoggle:hover .kd-button{
+    -webkit-transition-delay:0;
+    -moz-transition-delay:0;
+    -o-transition-delay:0;
+    transition-delay:0;
+}
+.kd-viewtoggle:hover .tab{
+    right:0;
+}
+.kd-viewtoggle .kd-button.selected{
+    border-color:#CCC;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+}
+
+/* Colored button bar */
+.kd-buttonbar-colored {
+    padding:10px;
+    height:19px;
+    background: #4D90FE;
+}
+.kd-buttonbar-colored span {
+    font-size: 13px;
+    font-weight: bold;
+    color: white;
+    float: left;
+    line-height: 19px;
+    height:19px;
+    background: #4D90FE;
+    text-shadow: 0px 1px 0px rgba(0,0,0,0.3);
+}
+.kd-buttonbar-colored .kd-button{
+    color: white;
+    height:19px;
+    font-size: 11px;
+    margin-top:-1px;
+    background: none;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.16)), to(rgba(0,0,0,0.2)));
+    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0,0.2));
+    background-image:    -moz-linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0,0.2));
+    background-image:     -ms-linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0,0.2));
+    background-image:      -o-linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0,0.2));
+    background-image:         linear-gradient(top, rgba(0,0,0,0.16), rgba(0,0,0,0.2));
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#160000FF, endColorstr=#220000FF);
+    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#160000FF, endColorstr=#220000FF);
+}
+.kd-buttonbar-colored .kd-button:hover,
+.kd-buttonbar-colored .kd-button.hover {
+    color: white;
+    background: none;
+    border: 1px solid rgba(0,0,0,0.2);
+
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.14)), to(rgba(0,0,0,0.2)));
+    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0,0.2));
+    background-image:    -moz-linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0,0.2));
+    background-image:     -ms-linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0,0.2));
+    background-image:      -o-linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0,0.2));
+    background-image:         linear-gradient(top, rgba(0,0,0,0.14), rgba(0,0,0,0.2));
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#14000000, endColorstr=#22000000);
+    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#14000000, endColorstr=#22000000);
+}
+.kd-buttonbar-colored .kd-button.focus, .kd-button.right.focus,
+.kd-buttonbar-colored .kd-button.mid.focus, .kd-button.left.focus{
+    outline: none;
+    border: 1px solid white;
+    z-index:4 !important;
+}
+.kd-buttonbar-colored .kd-button.disabled,
+.kd-buttonbar-colored .kd-button.disabled:hover,
+.kd-buttonbar-colored .kd-button.disabled:active {
+    color: rgba(255, 255, 255, 0.5);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FFFFFF, endColorstr=#50FFFFFF);
+    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FFFFFF, endColorstr=#50FFFFFF);
+}
+
+/* Slide toggle button */
+.kd-slidetoggle{
+    height: 27px;
+    line-height: 27px;
+    width:94px;
+    padding:0;
+    -webkit-border-radius:2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    border:1px solid #CCC;
+    font-weight:bold;
+    color:#666;
+    position:relative;
+    overflow:hidden;
+
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#e0e0e0));
+    background-image: -webkit-linear-gradient(top, #EEEEEE, #e0e0e0);
+    background-image:    -moz-linear-gradient(top, #EEEEEE, #e0e0e0);
+    background-image:     -ms-linear-gradient(top, #EEEEEE, #e0e0e0);
+    background-image:      -o-linear-gradient(top, #EEEEEE, #e0e0e0);
+    background-image:         linear-gradient(top, #EEEEEE, #e0e0e0);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EEEEEE, endColorstr=#e0e0e0);
+    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EEEEEE, endColorstr=#e0e0e0);
+
+    -webkit-box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1);
+    -moz-box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1);
+    box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1);
+}
+.kd-slidetoggle span {
+    display: inline-block;
+    width: 45px;
+    text-align: center;
+
+    -webkit-border-radius:2px 2px 0 0;
+    -moz-border-radius: 2px 2px 0 0;
+    border-radius: 2px 2px 0 0;
+}
+.kd-slidetoggle span.on{
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#3b93ff), to(#3689EE));
+    background-image: -webkit-linear-gradient(top, #3b93ff, #3689EE);
+    background-image:    -moz-linear-gradient(top, #3b93ff, #3689EE);
+    background-image:     -ms-linear-gradient(top, #3b93ff, #3689EE);
+    background-image:      -o-linear-gradient(top, #3b93ff, #3689EE);
+    background-image:         linear-gradient(top, #3b93ff, #3689EE);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3b93ff, endColorstr=#3689EE);
+    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3b93ff, endColorstr=#3689EE);
+
+    color:#FFF;
+
+    width:47px;
+    margin-right:-2px;
+
+    -webkit-box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1);
+    -moz-box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1);
+    box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1);
+
+    -webkit-border-radius:2px 0 0 2px;
+    -moz-border-radius: 2px 0 0 2px;
+    border-radius: 2px 0 0 2px;
+}
+.kd-slidetoggle .thumb{
+    content:'';
+    position:absolute;
+    display:block;
+    top:-1px;
+    left:-1px;
+    height:27px;
+    width:47px;
+    border:1px solid #CCC;
+    -webkit-border-radius:2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+
+    -webkit-box-shadow: 0px 1px 2px 0 rgba(0,0,0,0.1);
+    -moz-box-shadow: 0px 1px 2px 0 rgba(0,0,0,0.1);
+    box-shadow: 0px 1px 2px 0 rgba(0,0,0,0.1);
+
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f1f1f1));
+    background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
+    background-image:    -moz-linear-gradient(top, #f8f8f8, #f1f1f1);
+    background-image:     -ms-linear-gradient(top, #f8f8f8, #f1f1f1);
+    background-image:      -o-linear-gradient(top, #f8f8f8, #f1f1f1);
+    background-image:         linear-gradient(top, #f8f8f8, #f1f1f1);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1);
+    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8f8f8, endColorstr=#f1f1f1);
+
+    -webkit-transition: all 0.130s ease-out;
+    -moz-transition: all 0.130s ease-out;
+    -o-transition: all 0.130s ease-out;
+    transition: all 0.130s ease-out;
+}
+.kd-slidetoggle.on .thumb{
+    left:46px;
+}
+.kd-slidetoggle .thumb::after{
+    content:"";
+    position:absolute;
+    display:block;
+    top:9px;
+    left:15px;
+    height:9px;
+    width:17px;
+    background-image:
+        -webkit-linear-gradient(left, #ccc 50%, transparent 50%),
+        -webkit-linear-gradient(left, #ccc 50%, transparent 50%),
+        -webkit-linear-gradient(left, #ccc 50%, transparent 50%),
+        -webkit-linear-gradient(left, #ccc 50%, transparent 50%),
+        -webkit-linear-gradient(left, #ccc 50%, transparent 50%);
+    background-size:2px 0;
+    background-position:0 0, 0 2px, 0 4px, 0 6px, 0 8px;
+    background-repeat:repeat-x;
+}
+
+/*------------------------------------------------------------------
+Component: Butter Bar
+------------------------------------------------------------------*/
+.kd-butterbar {
+    position: absolute;
+    text-align:center;
+    bottom:0;
+    padding:0 16px;
+    background:#F9EDBE;
+    border:1px solid #F0C36D;
+    margin-bottom:-15px;
+    left:-1000%;
+
+    -webkit-border-radius:2px;
+    -moz-border-radius:2px;
+    border-radius:2px;
+
+    margin-left:-190px;
+    opacity:0;
+
+    -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+
+    -webkit-transform:scale(.2);
+    -moz-transform:scale(.2);
+    -o-transform:scale(.2);
+    transform:scale(.2);
+
+    -webkit-transition: opacity 1s, -webkit-transform 0 linear 1s, left 0 linear 1s;
+    -moz-transition: opacity 0.130s;
+    -o-transition: opacity 0.130s;
+    transition: opacity 0.130s;
+}
+.kd-butterbar.shown{
+    opacity:1;
+    left:496px;
+    -webkit-transform:scale(1.00);
+
+    -webkit-transition: all 0.130s, left 0 linear 0;
+    -moz-transition: all 0.218s;
+    -o-transition: all 0.218s;
+/*  transition: all 0.218s, left 0;*/
+}
+.kd-butterbar p{
+    margin-bottom:0;
+    line-height:29px;
+    font-size:11px;
+}
+
+.kd-butterbar a{
+    color:#333;
+    text-decoration:underline;
+}
+.kd-butterbar a:hover{
+    color:#202020;
+}
+
+.kd-butterbar.mini{
+    margin-bottom:-5px;
+}
+.kd-butterbar.mini p{
+    line-height:19px;
+}
+
+/*------------------------------------------------------------------
+Component: Text Field, Autocomplete
+------------------------------------------------------------------*/
+input[type=text] {
+    height: 29px;
+    background-color: #FFF;
+    line-height: 27px;
+    padding-left: 8px;
+    color: #333;
+    border: 1px solid #d9d9d9;
+    border-top: 1px solid #c0c0c0;
+    display: inline-block;
+    vertical-align: top;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-border-radius: 1px;
+}
+input[type=text]:hover {
+    border: 1px solid #b9b9b9;
+    border-top: 1px solid #a0a0a0;
+    -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+}
+input[type=text]:focus {
+    -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
+    -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
+    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3);
+    outline: none;
+    border: 1px solid #4d90fe;
+}
+input#fakesearch {
+    width: 512px;
+    font-size: 16px;
+}
+input#fakesearch:focus + .kd-autocomplete {
+    display: block;
+}
+.kd-search-form {
+    position: relative;
+}
+.kd-autocomplete {
+    width: 510px;
+    padding: 0;
+    display: none;
+    position: absolute;
+    left: 1px;
+    top: 29px;
+    z-index: 100;
+}
+.kd-autocompletelistitem {
+    font-size: 16px;
+    line-height: 30px;
+    padding-left: 10px;
+}
+.kd-autocompletelistitem:hover {
+    background: #eee;
+}
+
+/*------------------------------------------------------------------
+Component: Zippy
+------------------------------------------------------------------*/
+.kd-zippycontent {
+    position: relative;
+    overflow: hidden;
+    height: 0;
+    -webkit-transition: all 0.218s;
+    -moz-transition: all 0.218s;
+    -o-transition: all 0.218s;
+    transition: all 0.218s;
+}
+.kd-zippycontent > *{position:absolute;bottom:0; left:0; width:100%;}
+.kd-zippy.expanded .kd-zippycontent{}
+
+.kd-zippycontent ul.iconList li a {
+    padding-left: 30px;
+    margin-left: 32px;
+    background-repeat: no-repeat;
+    background-position: 2px center;
+    line-height: 23px;
+}
+
+/* zippy as folder */
+.kd-zippy.kd-parent img.icon{ float:left; position:relative; top:2px; margin-right:5px; opacity:.6;}
+.kd-zippy.kd-parent ul li a{line-height:23px; padding-left:0;}
+.kd-zippy.kd-parent.has_icon ul li a{padding-left:23px;}
+.kd-zippy.kd-parent ul li img.icon{top:-1px;}
+
+/*------------------------------------------------------------------
+Component: Accordion
+------------------------------------------------------------------*/
+.kd-accordion .kd-zippy{
+    border-bottom:1px solid #ebebeb;
+}
+.kd-accordion label{
+    display:block;
+}
+.kd-accordion .kd-zippycontent{
+}
+.kd-accordion .kd-zippycontent > ul{
+    bottom:auto;
+    top:0;
+}
+.kd-accordion .kd-zippycontent ul li{
+    margin-left:28px;
+    line-height:29px;
+}
+.kd-accordion .kd-zippycontent ul li input[type=radio]{
+    margin-bottom:-2px;
+}
+.kd-accordion .row > a{
+    -webkit-transition: color 0.130s linear;
+    -moz-transition: color 0.130s linear;
+    -o-transition: color 0.130s linear;
+    transition: color 0.130s linear;
+}
+.kd-accordion .expanded .row > a{
+    color:#222;
+    font-weight:bold;
+}
+.kd-accordion .expanded .row .kd-disclosureindicator{
+
+
+}
+
+/*------------------------------------------------------------------
+Compondent: Slider
+------------------------------------------------------------------*/
+.kd-slider {
+    position:relative;
+    width:137px;
+    height:5px;
+    padding:5px 0;
+    margin-bottom:20px;
+
+    cursor:default;
+    -webkit-user-select:none;
+    -moz-user-select:none;
+}
+.kd-slider:before {
+    content:"";
+    display:block;
+    width:141px;
+    height:5px;
+    margin-left:-2px;
+    -webkit-border-radius:3px;
+    -moz-border-radius:3px;
+    border-radius:3px;
+    background:#e5e5e5;
+}
+.kd-slider:hover:before {
+    background:#d1d1d1;
+}
+
+.kd-slider .kd-sliderhandle {
+    display:block;
+    position:absolute;
+    top:50%;
+    left:0;
+    z-index:1;
+
+    background:#999;
+    cursor:pointer;
+    cursor:col-resize;
+
+    -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.1);
+    -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);
+    box-shadow:0px 1px 1px rgba(0,0,0,0.1);
+
+    -webkit-transition: left 0.218s;
+    -moz-transition: left 0.218s;
+    -o-transition: left 0.218s;
+    transition: left 0.218s;
+}
+.kd-slider .kd-sliderhandle-inner {
+    display:block;
+    position:absolute;
+    top:1px;
+    left:1px;
+
+    background:#999;
+    text-align:center;
+    text-indent:-9999px;
+    line-height:15px;
+}
+.kd-slider:hover .kd-sliderhandle-inner {
+    background:#fff;
+}
+.kd-slider .kd-sliderhandle:active {
+    background:#535252;
+}
+.kd-slider:active .kd-sliderhandle {
+    -webkit-transition: left 0;
+    -moz-transition: left 0;
+    -o-transition: left 0;
+    transition: left 0;
+}
+.kd-slider .kd-sliderhandle:active .kd-sliderhandle-inner {
+    background:#535252;
+}
+.kd-slider.kd-slider-range .kd-sliderambit {
+    display:block;
+    position:absolute;
+    top:0;
+    left:0;
+    height:5px;
+    margin-top:5px;
+
+    background:#c6c6c6;
+    cursor:pointer;
+    cursor:move;
+}
+.kd-slider.kd-slider-range:hover .kd-sliderambit {
+    background:#535252;
+}
+.kd-slider.kd-slider-range:active .kd-sliderambit {
+    background-color:#999;
+    background-size:6px 6px;
+    background-position:left -1px;
+    background-repeat:repeat-x;
+    background-image:-webkit-linear-gradient(135deg, transparent, transparent 3px, #fff 3px, #fff 4px, transparent 4px, transparent);
+    background-image:-moz-linear-gradient(135deg, transparent, transparent 3px, #fff 3px, #fff 4px, transparent 4px, transparent);
+    background-image:-o-linear-gradient(135deg, transparent, transparent 3px, #fff 3px, #fff 4px, transparent 4px, transparent);
+    background-image:linear-gradient(135deg, transparent, transparent 3px, #fff 3px, #fff 4px, transparent 4px, transparent);
+}
+
+.kd-slider-continuous .kd-sliderhandle {
+    width:17px;
+    height:17px;
+    margin-top:-8px;
+    margin-left:-8px;
+
+    -webkit-border-radius:8px;
+    -moz-border-radius:8px;
+    border-radius:8px;
+}
+.kd-slider-continuous .kd-sliderhandle-inner {
+    width:15px;
+    height:15px;
+
+    -webkit-border-radius:7px;
+    -moz-border-radius:7px;
+    border-radius:7px;
+}
+.kd-slider-continuous.kd-slider-range .kd-sliderhandle {
+    width:9px;
+
+    -webkit-border-radius:0;
+    -moz-border-radius:0;
+    border-radius:0;
+}
+.kd-slider-continuous.kd-slider-range .kd-sliderhandle-inner {
+    width:7px;
+
+    -webkit-border-radius:0;
+    -moz-border-radius:0;
+    border-radius:0;
+}
+.kd-slider-continuous.kd-slider-range .kd-sliderhandle-min {
+    -webkit-border-top-left-radius: 8px;
+    -webkit-border-bottom-left-radius: 8px;
+    -moz-border-radius-topleft: 8px;
+    -moz-border-radius-bottomleft: 8px;
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+}
+.kd-slider-continuous.kd-slider-range .kd-sliderhandle-min .kd-sliderhandle-inner {
+    -webkit-border-top-left-radius: 6px;
+    -webkit-border-bottom-left-radius: 6px;
+    -moz-border-radius-topleft: 6px;
+    -moz-border-radius-bottomleft: 6px;
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+}
+.kd-slider-continuous.kd-slider-range .kd-sliderhandle-max {
+    margin-left:0;
+    -webkit-border-top-right-radius: 8px;
+    -webkit-border-bottom-right-radius: 8px;
+    -moz-border-radius-topright: 8px;
+    -moz-border-radius-bottomright: 8px;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+}
+.kd-slider-continuous.kd-slider-range .kd-sliderhandle-max .kd-sliderhandle-inner {
+    -webkit-border-top-right-radius: 6px;
+    -webkit-border-bottom-right-radius: 6px;
+    -moz-border-radius-topright: 6px;
+    -moz-border-radius-bottomright: 6px;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
+
+.kd-slider-discrete {
+    padding-bottom:26px;
+}
+.kd-slider-discrete .kd-sliderhandle {
+    width:16px;
+    height:9px;
+    margin-top:-18px;
+    margin-left:-8px;
+
+    -webkit-border-top-left-radius: 3px;
+    -webkit-border-top-right-radius: 3px;
+    -moz-border-radius-topleft: 3px;
+    -moz-border-radius-topright: 3px;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+}
+.kd-slider-discrete .kd-sliderhandle:before {
+    content:"";
+    display:block;
+    position:absolute;
+    top:9px;
+    border-style:solid;
+    border-color:#999 transparent;
+    border-width:8px 8px 0;
+}
+.kd-slider-discrete .kd-sliderhandle:active:before {
+    border-color:#535252 transparent;
+}
+.kd-slider-discrete .kd-sliderhandle-inner {
+    width:14px;
+    height:8px;
+
+    -webkit-border-top-left-radius: 2px;
+    -webkit-border-top-right-radius: 2px;
+    -moz-border-radius-topleft: 2px;
+    -moz-border-radius-topright: 2px;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+}
+.kd-slider-discrete .kd-sliderhandle-inner:before {
+    content:"";
+    display:block;
+    position:absolute;
+    top:8px;
+    border-style:solid;
+    border-color:#999 transparent;
+    border-width:7px 7px 0;
+}
+.kd-slider-discrete:hover .kd-sliderhandle-inner {
+    background:#fff;
+}
+.kd-slider-discrete:hover .kd-sliderhandle-inner:before {
+    border-color:#fff transparent;
+}
+.kd-slider-discrete .kd-sliderhandle:active .kd-sliderhandle-inner:before {
+    border-color:#535252 transparent;
+}
+
+.kd-slider-discrete.kd-slider-range .kd-sliderhandle {
+    width:8px;
+}
+.kd-slider-discrete.kd-slider-range .kd-sliderhandle-inner {
+    width:6px;
+}
+.kd-slider-discrete.kd-slider-range .kd-sliderhandle-min {
+    margin-left:-7px;
+    -webkit-border-top-right-radius: 0;
+    -moz-border-radius-topright: 0;
+    border-top-right-radius: 0;
+}
+.kd-slider-discrete.kd-slider-range .kd-sliderhandle-min:before {
+    border-width:8px 0 0 8px;
+}
+.kd-slider-discrete.kd-slider-range .kd-sliderhandle-min .kd-sliderhandle-inner {
+    -webkit-border-top-right-radius: 0;
+    -moz-border-radius-topright: 0;
+    border-top-right-radius: 0;
+}
+.kd-slider-discrete.kd-slider-range .kd-sliderhandle-min .kd-sliderhandle-inner:before {
+    border-width:6px 0 0 6px;
+}
+.kd-slider-discrete.kd-slider-range .kd-sliderhandle-max {
+    margin-left:0;
+    -webkit-border-top-left-radius: 0;
+    -moz-border-radius-topleft: 0;
+    border-top-left-radius: 0;
+}
+.kd-slider-discrete.kd-slider-range .kd-sliderhandle-max:before {
+    border-width:8px 8px 0 0;
+}
+.kd-slider-discrete.kd-slider-range .kd-sliderhandle-max .kd-sliderhandle-inner {
+    -webkit-border-top-left-radius: 0;
+    -moz-border-radius-topleft: 0;
+    border-top-left-radius: 0;
+}
+.kd-slider-discrete.kd-slider-range .kd-sliderhandle-max .kd-sliderhandle-inner:before {
+    border-width:6px 6px 0 0;
+}
+
+.kd-slider-discrete .kd-sliderruler {
+    position:absolute;
+    top:18px;
+    left:0;
+    width:100%;
+    height:18px;
+}
+.kd-slider-discrete .kd-sliderstep {
+    display:block;
+    position:relative;
+    float:left;
+    width:9px;
+    height:10px;
+    padding-top:8px;
+    margin-left:12px;
+    margin-right:-4px;
+
+    text-align:center;
+    font-size:12px;
+    color:#343434;
+}
+.kd-slider-discrete .kd-sliderstep:first-child {
+    margin-left:-4px;
+}
+.kd-slider-discrete .kd-sliderstep:before {
+    content:"";
+    display:block;
+    position:absolute;
+    top:0;
+    left:4px;
+    width:1px;
+    height:5px;
+
+    background:#d0d0d0;
+}
+.kd-slider-discrete .kd-sliderstep-minor {
+    text-indent:-9999px;
+}
+.kd-slider-discrete .kd-sliderstep-minor:before {
+    height:2px;
+}
+
+/*------------------------------------------------------------------
+Component: Checkboxes and Radio buttons
+------------------------------------------------------------------*/
+input[type=checkbox], input[type=radio], .fakecheckbox, .fakeradio{
+    -webkit-appearance: none;
+    width: 13px;
+    height: 13px;
+    border: 1px solid #C6C6C6;
+    margin:0;
+    -webkit-border-radius:1px;
+    -moz-border-radius:1px;
+    border-radius:1px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    cursor:default;
+    position:relative;
+}
+input[type=checkbox]:active, input[type=radio]:active, .fakecheckbox:active, .fakeradio:active{
+    border-color:#666;
+    background:#ebebeb;
+}
+input[type=checkbox]:hover, input[type=radio]:hover, .fakecheckbox:hover, .fakeradio:hover{
+    border-color:#666;
+    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1);
+    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1);
+    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1);
+}
+input[type=radio], .fakeradio{
+    border-radius:50%;
+    width: 15px;
+    height: 15px;
+}
+
+input[type=checkbox].disabled, input[type=radio].disabled, .fakecheckbox.disabled, .fakeradio.disabled{
+    border-color:#f1f1f1;
+    background:#FFF;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+}
+.disabledtext{
+    color:#B8B8B8;
+}
+
+input[type=radio]:checked::after, .fakeradio.checked::after{
+    content:'';
+    display:block;
+    position:relative;
+    top:3px;
+    left:3px;
+    width:7px;
+    height:7px;
+    background:#666;
+    border-radius:50%;
+}
+
+input[type=checkbox]:checked::after, .fakecheckbox.checked::after {
+    content:url('../images/check_no_box.png');
+    display:block;
+    position:absolute;
+    top:-6px;
+    left:-5px;
+}
+
+input[type=checkbox]:focus, .fakecheckbox.focus {
+    outline: none;
+    border-color:#4d90fe;
+}
+.fakecheckbox, .fakeradio{
+    display:inline-block;
+}
+
+/*------------------------------------------------------------------
+Component: Menus
+------------------------------------------------------------------*/
+.kd-menulist {
+    background: #FFF;
+    /* border:1px solid #CCC;/*THIS SHOULD BE USED IN NON-WEBKIT BROWSERS ONLY - OTHER BROWSERS DO NOT INTERPRET THE OUTLINE STYLE CORRECTLY*/
+    outline:1px solid rgba(0,0,0,0.2);
+    padding:0 0 6px;
+    white-space: nowrap;
+    -moz-transition: opacity 0.218s;
+    -o-transition: opacity 0.218s;
+    -webkit-transition: opacity 0.218s;
+    transition: opacity 0.218s;
+    -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+.kd-menulist-bubble {
+    margin-top:11px;
+    padding-top:6px;
+}
+.kd-menulist-bubble:after{
+    content:"";
+    outline: none;
+    display: block;
+    position: absolute;
+    top: -11px;
+    left: 24px;
+    margin: 0 0 0 -5px;
+    width: 17px;
+    height: 11px;
+
+}
+.kd-menulistitem {
+    display: block;
+    padding: 6px 44px 6px 16px;
+    position: relative;
+    color: #333;
+    font-size:13px;
+    font-weight:normal;
+    cursor: default;
+    margin: 0;
+}
+.kd-menuchecklistitem {
+    padding-left: 30px;
+}
+
+.kd-shortcutitem{
+    padding-right:72px;
+}
+
+.kd-shortcut{
+    position:absolute;
+    right:16px;
+    text-align:right;
+    color:#CCC;
+}
+
+.kd-menulistitem.kd-menuchecklistitem.selected {
+    background-position: left center;
+    background-repeat: no-repeat;
+    background-color: #FFF;
+}
+.kd-menulistitem.kd-menuchecklistitem.selected:hover {
+    background-color: #EEE;
+}
+.kd-menulistitem.disabled, .kd-menulistitem.disabled:hover, .kd-menulistitem.disabled {
+    color: #ccc;
+    background-color: #FFF;
+    cursor: default;
+}
+
+.kd-menulist .kd-flyout {
+    position: absolute;
+    left: 100%;
+    top: 0;
+    width: 1px;
+    overflow: hidden;
+    opacity: 0.0;
+    -moz-opacity: 0.0;
+    filter: alpha(opacity=00);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
+/*  -moz-transition: opacity 0.218s;
+    -o-transition: opacity 0.218s;
+    -webkit-transition: opacity 0.218s;
+    transition: opacity 0.218s;*/
+}
+
+.kd-menulistitem:hover .kd-flyout {
+    width: auto;
+    overflow: visible;
+    opacity: 1.0;
+    -moz-opacity: 1.0;
+    filter: alpha(opacity=100);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+    -moz-transition: opacity 0s;
+    -webkit-transition: opacity 0s;
+    transition: opacity 0s;
+    -moz-transition-delay:0.130s;
+    -webkit-transition-delay:0.130s;
+    transition-delay:0.130s;
+}
+
+.kd-menulistitem .kd-disclosureindicator {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    margin-top: -3px;
+    opacity: .5;
+}
+
+.kd-menulistitem:hover, .kd-menulistitem.selected {
+    background-color: #f1f1f1;
+    color: #222;
+
+    -moz-transition: background 0s;
+    -o-transition: background 0s;
+    -webkit-transition: background 0s;
+    transition: background 0s;
+}
+.kd-menulistitem:hover .kd-disclosureindicator {
+    border-left-color: #999;
+    opacity: 1;
+    -webkit-transition: none;
+    -moz-transition: none;
+    transition: none;
+}
+.kd-menurule {
+    border-top: 1px solid #ebebeb;
+    margin-top: 9px;
+    margin-bottom: 10px;
+}
+
+/*------------------------------------------------------------------
+Component: Menu Button
+------------------------------------------------------------------*/
+.kd-menubutton .kd-menulist {
+    text-align: left;
+    position: absolute;
+    z-index: 99;
+    background: #FFF;
+    height: 0;
+    width:auto;
+    left:-9999px;
+    /*overflow: hidden;*/
+
+    -moz-transition: 0;
+    -o-transition: 0;
+    -webkit-transition: 0;
+    transition: 0;
+
+    opacity: 0.0;
+    -moz-opacity: 0.0;
+    filter: alpha(opacity=00);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
+}
+.kd-menubutton .kd-menulist.shown {
+    left:0;
+    height: auto;
+    opacity: 1.0;
+    -moz-opacity: 1.0;
+    filter: alpha(opacity=100);
+    -moz-transition: 0;
+    -o-transition: 0;
+    -webkit-transition: 0;
+    transition: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+}
+.kd-menubutton .kd-menulist.scroll.shown {
+    max-height: 174px;
+    overflow: auto;
+}
+
+/*------------------------------------------------------------------
+Component: Modal Dialog
+------------------------------------------------------------------*/
+#kd-modalshield {
+    background: #FFF;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
+    opacity: 0.0;
+    opacity: 0.0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
+    filter: alpha(opacity=00);
+    -webkit-transition: all 0.218s;
+    -moz-transition: all 0.218s;
+    -o-transition: all 0.218s;
+    transition: all 0.218s;
+}
+html.x-mobile #kd-modalshield {
+    display: none;
+}
+html.x-mobile #kd-modaldialog {
+    display: none;
+}
+body.strawman #kd-modalshield {
+    top: 44px;
+}
+body.kd-compact #kd-modalshield {
+    top: 72px;
+}
+html.y-expand #kd-modalshield {
+    top: 80px;
+}
+#kd-modalshield.visible {
+    opacity: .75;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
+    filter: alpha(opacity=75);
+    opacity: .75;
+}
+.kd-modaldialog.visible {
+    opacity: 1.0;
+    -webkit-transform: scale(1.0);
+    -moz-transform: scale(1.0);
+    transform: scale(1.0);
+}
+.kd-modaldialog {
+    -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+    -ms-box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+    background: white;
+    left: 50%;
+    outline:1px solid rgba(0,0,0,0.2);/* border:1px solid #CCC;/*THIS IS FOR NON-WEBKIT BROWSERS ONLY - OTHER BROWSERS DO NOT INTERPRET THE OUTLINE STYLE CORRECTLY*/
+    padding:30px 42px;
+    position: fixed;
+    right: auto;
+    width: 512px;
+    height: auto;
+    overflow: hidden;
+    z-index: 100;
+    top: 72px;
+    margin-left: -256px;
+    opacity: 0.0;
+    -webkit-transform: scale(1.05);
+    -moz-transform: scale(1.05);
+    transform: scale(1.05);
+    -webkit-transition: all 0.218s;
+    -moz-transition: all 0.218s;
+    transition: all 0.218s;
+}
+.kd-modaldialog.medium {
+    padding:28px 32px;
+
+    width: 384px;
+}
+.kd-modaldialog.small {
+    padding:16px 20px;
+
+    width: 256px;
+}
+.kd-modaldialog h1 {
+    margin-bottom: 1em;
+}
+
+.kd-modaldialog.small h1 {
+    margin-bottom: 8px;
+}
+.kd-formbuttons{
+    margin-top:16px;
+}
+.kd-formbuttons .kd-button.primary{
+    float:left;
+    margin-right:16px;
+}
+.kd-modaldialog .kd-confirmation {
+    display: inline-block;
+    padding-top: 7px;
+}
+.kd-modaldialog input[type=checkbox] {
+    margin-left: 0;
+    margin-right: 6px;
+    margin-bottom: -1px;
+}
+.kd-closebutton {
+    width: 44px;
+    height: 44px;
+    background: url('../images/icons/x.png') center no-repeat;
+    position: absolute;
+    top: 0;
+    right: 0;
+    opacity: .7;
+    -moz-opacity: .7;
+    filter: alpha(opacity=70);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+    cursor:default;
+}
+.kd-closebutton:hover {
+    opacity: 1;
+    -moz-opacity: 1;
+    filter: alpha(opacity=100);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+}
+
+/*------------------------------------------------------------------
+Component: Prompt
+------------------------------------------------------------------*/
+.kd-prompt label {
+    display: block;
+    margin-bottom: 16px;
+}
+.kd-prompt input[type=text] {
+    width: 100%;
+}
+
+/*------------------------------------------------------------------
+Component: Settings
+------------------------------------------------------------------*/
+.kd-settings {
+    -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+    -ms-box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+    background: white;
+    left: 50%;
+    outline:1px solid rgba(0,0,0,0.2);/* border:1px solid #CCC;/*THIS IS FOR NON-WEBKIT BROWSERS ONLY - OTHER BROWSERS DO NOT INTERPRET THE OUTLINE STYLE CORRECTLY*/
+    position: fixed;
+    right: auto;
+    width: 800px;
+    height: auto;
+    overflow: hidden;
+    z-index: 100;
+    top: 72px;
+    margin-left: -256px;
+    opacity: 0.0;
+    -webkit-transform: scale(1.05);
+    -moz-transform: scale(1.05);
+    transform: scale(1.05);
+    -webkit-transition: all 0.218s;
+    -moz-transition: all 0.218s;
+    transition: all 0.218s;
+}
+.kd-settings.visible {
+    opacity: 1.0;
+    -webkit-transform: scale(1.0);
+    -moz-transform: scale(1.0);
+    transform: scale(1.0);
+}
+.kd-settings-hd {
+    background-color: #f1f1f1;
+    border-bottom: 1px solid #ccc;
+    height: 71px;
+}
+.kd-settings-hd h1 {
+    padding-top: 26px;
+    padding-left: 42px;
+}
+.kd-settings-hd .kd-formbuttons {
+    float: right;
+    padding-right: 26px;
+    padding-top: 22px;
+    margin: 0;
+}
+.kd-settings-nav {
+    padding: 36px 20px 36px 42px;
+    border-right: 1px solid #ebebeb;
+    width: 108px;
+    float: left;
+    overflow: auto;
+}
+.kd-settings-nav li {
+    margin-bottom: 13px;
+}
+.kd-settings-nav li a {
+    display: block;
+    color: #333;
+    cursor: default;
+}
+.kd-settings-nav li a:hover {
+    color: #111;
+}
+.kd-settings-nav li a.selected {
+    color: #DD4B39;
+    font-weight: bold;
+}
+.kd-settings-content {
+    width: 629px;
+    margin-left: 171px;
+    height: auto;
+    overflow: hidden;
+    padding-bottom: 20px;
+}
+.kd-settings-content .kd-settings-pane {
+    display: none;
+    padding: 16px 32px;
+    height: auto;
+    max-height: 400px;
+    overflow: auto;
+}
+.kd-settings-content .kd-settings-pane.selected {
+    display: block;
+}
+
+.kd-settings-pane-section {
+    clear: both;
+    border-bottom: 1px solid #ebebeb;
+    padding: 20px 0;
+    height: 100%;
+    overflow: hidden;
+}
+.kd-settings-pane-section p {
+    line-height: 13px;
+}
+.kd-settings-pane-section .setting-label {
+    display: block;
+    width: 185px;
+    float: left;
+    font-weight: bold;
+}
+.kd-settings-pane-section .setting-label .info {
+    font-size: 11px;
+    color: #666;
+    font-weight: normal;
+}
+.kd-settings-pane-section .setting {
+    margin-left: 210px;
+}
+.kd-settings-pane-section .kd-button.kd-select {
+    float: none;
+    margin-left: 0;
+    min-width: 0;
+    margin-right: 5px;
+}
+
+.kd-settings-pane-section .setting input[type=checkbox] {
+    margin-right: 5px;
+    bottom: -1px;
+}
+
+/*------------------------------------------------------------------
+Component: Bubble Panel
+------------------------------------------------------------------*/
+.kd-bubble {
+    position: relative;
+    background: #FFF;
+    outline: 1px solid rgba(0,0,0,0.2);
+    -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    padding: 16px;
+    width: 146px;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+}
+.kd-bubble .pointer {
+    outline: none;
+    display: block;
+    position: absolute;
+    top: -11px;
+    left: 24px;
+    margin: 0 0 0 -5px;
+    width: 17px;
+    height: 11px;
+}
+
+.kd-bubble p {
+    margin-bottom: 0;
+    color: #666;
+}
+
+.kd-bubble p.links {
+    margin-top: 10px;
+}
+.kd-bubble p.links a:hover{
+    text-decoration:underline;
+}
+
+.kd-bubble.alert{
+    background: #F9EDBE;
+    outline: 1px solid #f0c36d;
+}
+
+.kd-profilebox{
+    width:336px;
+}
+.kd-profilebox .kd-disclaimer{
+    background:#F9EDBE;
+    padding:16px;
+    margin:-16px -16px 0 -16px;
+    border-bottom:1px solid #ddd8c0;
+}
+.kd-profilebox .kd-disclaimer p{
+    color:#202020;
+}
+.kd-profile{
+    padding:22px 0;
+    height:100%;
+    overflow:hidden;
+}
+.kd-profileimage{
+    float:left;
+    width:160px;
+}
+.kd-profileimage img{
+    border:1px solid #CCC;
+}
+.kd-profileinfo{
+    float:right;
+    width:160px;
+}
+.kd-profileinfo .email{
+    color:#999;
+}
+.kd-profileinfo ul{
+    margin-top:6px;
+}
+.kd-profileinfo ul li{
+    line-height:24px;
+}
+.kd-profileinfo .kd-profilename{
+    font-size:13px;
+    line-height:13px;
+    color:#202020;
+    font-weight:bold;
+}
+.kd-accountlist{
+    background:#f1f1f1;
+    padding:3px 16px 0;
+    margin:0 -16px 0;
+    border-top:1px solid #CCC;
+    -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1);
+}
+.kd-accountlist h3{
+    font-size:13px;
+    font-weight:bold;
+}
+.kd-accountlist img{
+    border:1px solid #CCC;
+    position:absolute;
+    left:0;
+    top:2px;
+}
+.kd-accountlist ul{
+    margin-top:3px;
+}
+.kd-accountlist ul li{
+    height:44px;
+    position:relative;
+}
+.kd-accountlist ul li p{
+    margin-left:44px;
+}
+.kd-bubble .bottomlinks{
+    margin:0 -16px;
+    padding:16px 16px 0;
+    border-top:1px solid #CCC;
+}
+.kd-bubble .bottomlinks a{
+    float:right;
+}
+.kd-bubble .bottomlinks a:first-child{
+    float:left;
+}
+#stickers .kd-bubble{
+    margin-right:44px;
+    float:left;
+}
+.kd-bubble.dark{background:#2d2d2d;width:auto;outline: 1px solid rgba(255,255,255,0.5);}
+.kd-bubble.dark ul{height:100%; overflow:hidden;}
+.kd-bubble.dark li{float:left; margin-left:16px;}
+.kd-bubble.dark li img{display:block;}
+.kd-bubble.dark li:first-child{margin-left:0;}
+
+/*------------------------------------------------------------------
+Component: Hovercard
+------------------------------------------------------------------*/
+.kd-hovercard {
+    outline:1px solid rgba(0,0,0,0.2);
+    width: 160px;
+    -moz-transition: opacity 0.218s;
+    -o-transition: opacity 0.218s;
+    -webkit-transition: opacity 0.218s;
+    transition: opacity 0.218s;
+    -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.kd-hovercard .kd-cardprofile {
+    padding: 16px 16px 0;
+    border-bottom: 1px solid #ebebeb;
+}
+
+.kd-hovercard .kd-menulist {
+    outline: 0;
+    width: auto;
+    -moz-transition: none;
+    -o-transition: none;
+    -webkit-transition: none;
+    transition: none;
+    -webkit-box-shadow: 0;
+    -moz-box-shadow: 0;
+    box-shadow: 0;
+}
+
+/*------------------------------------------------------------------
+Component: Date Picker
+------------------------------------------------------------------*/
+.kd-datepicker{
+    padding:16px;
+    outline: 1px solid rgba(0,0,0,0.2);
+    opacity:0;
+    width:144px;
+    position:absolute;
+    left:-9999px;
+    z-index:3;
+    background:#FFF;
+
+    -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    -webkit-transition: all 0.13s linear, left 0 linear .13s;
+    -moz-transition: all 0.13s linear;
+    -o-transition: all 0.13s linear;
+    transition: all 0.13s linear;
+}
+.kd-minicalendar{
+    width:148px;
+    margin-left:-4px;
+}
+.kd-datepicker .kd-minicalendar{
+    width:144px;
+    margin:0;
+
+}
+.kd-datepicker.shown{
+    opacity:1;
+    -webkit-transition:0, left 0 linear 0;
+    -moz-transition:0
+    -o-transition:0;
+    transition:0;
+}
+.kd-minicalendar h2{
+    font-size:13px;
+    color:#666;
+    padding-left:4px;
+}
+.kd-minicalendar h2 .links{
+    float:right;
+    margin-right:2px;
+}
+.kd-minicalendar h2 .links img{
+    cursor:default;
+}
+.kd-minicalendar td, .kd-minicalendar th{
+    width:20px;
+    height:20px;
+    line-height:20px;
+    padding-left:4px;
+    font-size:11px;
+    color:#666;
+    cursor:default;
+}
+.kd-minicalendar td:hover, .kd-minicalendar td.selected, .kd-minicalendar h2 .links img:hover{
+    background:#eee;
+    color:#333;
+}
+
+.kd-minicalendar td.disabled{
+    color:#ccc;
+}
+.kd-minicalendar td.disabled:hover{
+    background:none;
+    cursor:default;
+}
+
+/*------------------------------------------------------------------
+Component: Color Picker
+------------------------------------------------------------------*/
+.kd-colorpicker{
+    width:140px;
+    padding:16px;
+    outline: 1px solid rgba(0,0,0,0.2);
+    -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+}
+.kd-menubutton .kd-colorpicker{
+    padding:0;
+}
+.kd-menubutton.selected .kd-colorpicker{
+    padding:16px;
+}
+.kd-colortable{
+    width:140px;
+}
+.kd-colortable.primaries{
+    margin-bottom:8px;
+}
+.kd-colortable td{
+    width:16px;
+    height:16px;
+    border:1px solid #FFF;
+    cursor:default;
+    position:relative;
+}
+.kd-colortable td:hover{
+    border-color:#333;
+}
+.kd-colortable td.selected:after{
+    content:'';
+    display:block;
+    position:absolute;
+    top:-3px;
+    right:0;
+    width:18px;
+    height:18px;
+}
+
+/*------------------------------------------------------------------
+Component: Activity Indicator
+------------------------------------------------------------------*/
+#loader {
+    position:relative;
+    width:19px;
+    height:19px;
+}
+#loader * {
+    display:block;
+    position:absolute;
+}
+#loader .circle {
+    width:100%;
+    height:100%;
+    -webkit-border-radius:50%;
+    -moz-border-radius:50%;
+    border-radius:50%;
+    opacity:0;
+    overflow:hidden;
+}
+
+#loader .mask {
+    height:100%;
+    width:100%;
+    opacity:0;
+    overflow:hidden;
+}
+
+#loader .mask.first {
+    -webkit-transition-property:border-color;
+    -webkit-transition-duration:0s;
+    -webkit-transition-delay:0.22s;
+    -moz-transition-property:border-color;
+    -moz-transition-duration:0s;
+    -moz-transition-delay:0.22s;
+    transition-property:border-color;
+    transition-duration:0s;
+    transition-delay:0.22s;
+}
+
+#loader .circle.initial .mask { top:0; height:50%; }
+
+#loader .circle.red .mask.first { top:0; height:50%; border-bottom:1px solid #555; }
+#loader .circle.red .mask.second { bottom:0; height:50%; }
+
+#loader .circle.yellow .mask.first { right:0; width:50%; border-left:1px solid #888; }
+#loader .circle.yellow .mask.second { left:0; width:50%; }
+
+#loader .circle.green .mask.first { bottom:0; height:50%; border-top:1px solid #555; }
+#loader .circle.green .mask.second { top:0; height:50%; }
+
+#loader .circle.blue .mask.first { left:0; width:50%; border-right:1px solid #888;}
+#loader .circle.blue .mask.second { right:0; width:50%; }
+
+#loader .circle .mask .base {
+    height:100%;
+    width:100%;
+    opacity:0;
+    -webkit-border-radius:50%;
+    -moz-border-radius:50%;
+    border-radius:50%;
+    -webkit-transition-property:opacity;
+    -webkit-transition-timing-function:linear;
+    -webkit-transition-duration:0s;
+    -webkit-transition-delay:0s;
+    -moz-transition-property:opacity;
+    -moz-transition-timing-function:linear;
+    -moz-transition-duration:0s;
+    -moz-transition-delay:0s;
+    transition-property:opacity;
+    transition-timing-function:linear;
+    transition-duration:0s;
+    transition-delay:0s;
+}
+
+#loader .circle .mask .mover {
+    height:100%;
+    width:100%;
+    -webkit-border-radius:50%;
+    -moz-border-radius:50%;
+    border-radius:50%;
+    -webkit-transition-property:background-color, left, top, right, bottom, width, height;
+    -webkit-transition-timing-function:ease-in;
+    -webkit-transition-duration:0.22s;
+    -webkit-transition-delay:0s;
+    -moz-transition-property:background-color, left, top, right, bottom, width, height;
+    -moz-transition-timing-function:ease-in;
+    -moz-transition-duration:0.22s;
+    -moz-transition-delay:0s;
+    transition-property:background-color, left, top, right, bottom, width, height;
+    transition-timing-function:ease-in;
+    transition-duration:0.22s;
+    transition-delay:0s;
+}
+#loader .circle .mask.second .mover,
+#loader .circle.initial .mask .mover {
+    -webkit-transition-timing-function:ease-out;
+    -webkit-transition-delay:0.22s;
+    -moz-transition-timing-function:ease-out;
+    -moz-transition-delay:0.22s;
+    transition-timing-function:ease-out;
+    transition-delay:0.22s;
+}
+
+#loader .circle.red .mask.first .base { top:0; height:200%; background-color:#888; }
+#loader .circle.red .mask.second .base { bottom:0; height:200%; background-color:#555; }
+
+#loader .circle.yellow .mask.first .base { right:0; width:200%; background-color:#555; }
+#loader .circle.yellow .mask.second .base { left:0; width:200%; background-color:#888; }
+
+#loader .circle.green .mask.first .base { bottom:0; height:200%; background-color:#888; }
+#loader .circle.green .mask.second .base { top:0; height:200%; background-color:#555; }
+
+#loader .circle.blue .mask.first .base { left:0; width:200%; background-color:#555; }
+#loader .circle.blue .mask.second .base { right:0; width:200%; background-color:#888; }
+
+#loader .circle.initial .mask .mover {
+    top:100%;
+    height:0;
+    background-color:#363636;
+}
+#loader .circle.red .mask.first .mover { top:0; height:200%; background-color:#555; }
+#loader .circle.red .mask.second .mover { bottom:100%; height:0; background-color:#6a6a6a }
+
+#loader .circle.yellow .mask.first .mover { right:0; width:200%; background-color:#888; }
+#loader .circle.yellow .mask.second .mover { left:100%; width:0; background-color:#363636; }
+
+#loader .circle.green .mask.first .mover { bottom:0; height:200%; background-color:#555; }
+#loader .circle.green .mask.second .mover { top:100%; height:0; background-color:#6a6a6a; }
+
+#loader .circle.blue .mask.first .mover { left:0; width:200%; background-color:#888; }
+#loader .circle.blue .mask.second .mover { right:100%; width:0; background-color:#363636; }
+
+/* Initial State */
+#loader.initial .circle.initial,
+#loader.initial .circle.initial .mask {
+    opacity:1;
+}
+#loader.initial .circle.initial .mask .mover {
+    top:0;
+    height:200%;
+    background-color:#555;
+}
+
+/* Moving from Red to Yellow */
+#loader.yellow .circle.yellow,
+#loader.yellow .circle.yellow .mask,
+#loader.yellow .circle.yellow .mask .base {
+    opacity:1;
+}
+#loader.yellow .circle.yellow .mask.first {
+    border-color:#555;
+}
+#loader.yellow .circle.yellow .mask.first .mover {
+    right:100%;
+    width:0;
+    background-color:#6a6a6a;
+}
+#loader.yellow .circle.yellow .mask.second .mover {
+    left:0;
+    width:200%;
+    background-color:#555;
+}
+
+/* Moving from Yellow to Green */
+#loader.green .circle.green,
+#loader.green .circle.green .mask,
+#loader.green .circle.green .mask .base {
+    opacity:1;
+}
+#loader.green .circle.green .mask.first {
+    border-color:#888;
+}
+#loader.green .circle.green .mask.first .mover {
+    bottom:100%;
+    height:0;
+    background-color:#363636;
+}
+#loader.green .circle.green .mask.second .mover {
+    top:0;
+    height:200%;
+    background-color:#888;
+}
+
+
+/* Moving from Green to Blue */
+#loader.blue .circle.blue,
+#loader.blue .circle.blue .mask,
+#loader.blue .circle.blue .mask .base {
+    opacity:1;
+}
+#loader.blue .circle.blue .mask.first {
+    border-color:#555;
+}
+#loader.blue .circle.blue .mask.first .mover {
+    left:100%;
+    width:0;
+    background-color:#6a6a6a;
+}
+#loader.blue .circle.blue .mask.second .mover {
+    right:0;
+    width:200%;
+    background-color:#555;
+}
+
+/* Moving from Blue to Red */
+#loader.red .circle.red,
+#loader.red .circle.red .mask,
+#loader.red .circle.red .mask .base {
+    opacity:1;
+}
+#loader.red.firstTime .circle.red .mask.second .base {
+    opacity:0;
+}
+#loader.red .circle.red .mask.first {
+    border-color:#888;
+}
+#loader.red .circle.red .mask.first .mover {
+    top:100%;
+    height:0;
+    background-color:#363636;
+}
+#loader.red .circle.red .mask.second .mover {
+    bottom:0;
+    height:200%;
+    background-color:#888;
+}
+#loader.offline .mask.first .base,
+#loader.offline .mask.second .mover,
+#loader.readyOn .base,
+#loader.readyOn .mover,
+#loader.transitionOn .mask.second .base{
+    background-color:#999 !important;
+}
+#loader.offline .mask.first,
+#loader.readyOn .mask.first{
+    border-color:#999 !important;
+}
+#loader .bolt{
+    position:absolute;
+    top:50%;
+    left:50%;
+    margin-top:-6px;
+    margin-left:-3px;
+    opacity:0;
+    width:8px;
+    height:14px;
+
+    -webkit-transition: opacity .218s linear .44s;
+    -moz-transition: opacity .218s linear .44s;
+    -o-transition: opacity .218s linear .44s;
+    transition: opacity .218s linear .44s;
+}
+#loader.offline .bolt{
+    opacity:1;
+}
+/*#loader.transitionOn .mask.first .mover{
+    background-color:#999 !important;
+}*/
+
+#loader.stopped .mask.first .base,
+#loader.finishing .mask.first .base,
+#loader.finishing .mask.second .base,
+#loader.finishing .mask.first .mover{
+    opacity:0 !important;
+}
+
+#loader.finishing .mask.first{
+    border-color:transparent !important;
+}
+#loader.finishing.blue .circle.blue .mask.second .mover{
+    width:0;
+    right:100%;
+}
+#loader.finishing.green .circle.green .mask.second .mover{
+    height:0;
+    top:100%;
+}
+#loader.finishing.yellow .circle.yellow .mask.second .mover{
+    width:0;
+    left:100%;
+}
+#loader.finishing.red .circle.red .mask.second .mover{
+    height:0;
+    bottom:100%;
+}
+#loader.finishing .mover{
+    -webkit-transition-delay:0s !important;
+    -moz-transition-delay:0s !important;
+    transition-delay:0s !important;
+}
+
+/*------------------------------------------------------------------
+Component: Progress Bar
+------------------------------------------------------------------*/
+.kd-progressstatus{
+    color:#202020;
+    margin-bottom:0;
+}
+.kd-progresstext{
+    color:#999;
+}
+.kd-progressbar{
+    width:320px;
+    border:1px solid #999;
+    padding:1px;
+}
+.kd-progresstrack {
+    background-color:#ccc;
+    width:170px;
+    height:5px;
+}
+.kd-progressbar-blue .kd-progresstrack { background-color:#6188f5; }
+
+.kd-progressbar-tall .kd-progresstrack,
+.kd-progressbar-tall .kd-quantitytrack {
+    height:8px;
+}
+
+.kd-progressbar-animated .kd-progresstrack {
+    -webkit-box-shadow:inner 0 0 0 1px rgba(0,0,0,0.1);
+    -moz-box-shadow:inner 0 0 0 1px rgba(0,0,0,0.1);
+    box-shadow:inner 0 0 0 1px rgba(0,0,0,0.1);
+
+    background-repeat:repeat-x;
+    background-position:0 0;
+    background-size:16px 8px;
+    background-image:-webkit-linear-gradient(315deg, transparent, transparent 33%, rgba(0,0,0,0.12) 33%, rgba(0,0,0,0.12) 66%, transparent 66%, transparent);
+    background-image:-moz-linear-gradient(315deg, transparent, transparent 33%, rgba(0,0,0,0.12) 33%, rgba(0,0,0,0.12) 66%, transparent 66%, transparent);
+    background-image:-o-linear-gradient(315deg, transparent, transparent 33%, rgba(0,0,0,0.12) 33%, rgba(0,0,0,0.12) 66%, transparent 66%, transparent);
+    background-image:linear-gradient(315deg, transparent, transparent 33%, rgba(0,0,0,0.12) 33%, rgba(0,0,0,0.12) 66%, transparent 66%, transparent);
+
+    -webkit-animation-name: bg;
+    -webkit-animation-duration: 0.8s;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-timing-function: linear;
+}
+.kd-progressbar-animated.kd-progressbar-tall .kd-progresstrack {
+    background-size:20px 10px;
+    -webkit-animation-name: bg-tall;
+}
+
+@-webkit-keyframes bg {
+    0% { background-position:0 0; }
+    100% { background-position:-16px 0; }
+}
+@-webkit-keyframes bg-tall {
+    0% { background-position:0 0; }
+    100% { background-position:-20px 0; }
+}
+
+/*------------------------------------------------------------------
+Component: Quantity Bar
+------------------------------------------------------------------*/
+.kd-quantitytrack{
+    width:170px;
+    height:5px;
+    background-color: #CCC;
+    background-image: -webkit-linear-gradient(0, transparent 50%, white 50%);
+    background-image: -moz-linear-gradient(0, transparent 50%, white 50%);
+    background-image: linear-gradient(0, transparent 50%, white 50%);
+    -o-background-size: 5px;
+    -moz-background-size: 5px;
+    -webkit-background-size: 5px;
+    background-size: 5px;
+}
+
+/*------------------------------------------------------------------
+Component: Scrollbars
+------------------------------------------------------------------*/
+.scrollBarBox{
+    width:144px;
+    margin-right:44px;
+    position:relative;
+    display:inline-block;
+    -webkit-box-sizing:border-box;
+}
+.scrollBarInner{
+    height:300px;
+    overflow:auto;
+    padding-top:20px;
+    padding-right:16px;
+}
+.scrollBarInner .shadowTop{
+    width:100%;
+    margin-right:0;
+    height:6px;
+    position:absolute;
+    top:0;
+    left:0;
+    background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.2)), to(rgba(0,0,0,0)));
+    -webkit-mask-box-image:-webkit-gradient(linear, left top, right top, color-stop(0.0, rgba(0,0,0,0.1)), color-stop(0.5, rgba(0,0,0,.8)), color-stop(1.0, rgba(0,0,0,0.1)));
+    opacity:0;
+}
+.scrollBarInner .shadowTop:after {
+    content:"";
+    display:block;
+    position:absolute;
+    top:0px;
+    left:0;
+    width:100%;
+    height:0;
+    border-top:1px solid #ebebeb; /*FOR IE*/
+    border-top:1px solid rgba(0, 0, 0, 0.3);
+}
+
+.scrollBarInner .shadowBottom{
+    width:100%;
+    margin-right:0;
+    height:4px;
+    position:absolute;
+    bottom:0;
+    left:0;
+    background:-webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,.2)), to(rgba(0,0,0,0)));
+    -webkit-mask-box-image:-webkit-gradient(linear, left top, right top, color-stop(0.0, rgba(0,0,0,0.1)), color-stop(0.5, rgba(0,0,0,.8)), color-stop(1.0, rgba(0,0,0,0.1)));
+    opacity:1;
+}
+.scrollBarInner .shadowBottom:after {
+    content:"";
+    display:block;
+    position:absolute;
+    bottom:0px;
+    left:0;
+    width:100%;
+    height:0;
+    border-bottom:1px solid #ebebeb; /*FOR IE*/
+    border-bottom:1px solid rgba(0, 0, 0, 0.3);
+}
+
+::-webkit-scrollbar {
+    width: 16px;
+    height: 16px;
+}
+
+::-webkit-scrollbar-button {
+    height: 0px;
+    width: 0px;
+}
+
+::-webkit-scrollbar-button:start:decrement,
+::-webkit-scrollbar-button:end:increment {
+    display: block;
+}
+
+::-webkit-scrollbar-button:vertical:start:increment,
+::-webkit-scrollbar-button:vertical:end:decrement {
+    display: none;
+}
+::-webkit-scrollbar-track:vertical {
+    border-right: 0px solid transparent;
+    border-left: 5px solid transparent;
+    background-clip:padding-box;
+    background-color: white;
+}
+::-webkit-scrollbar-track:horizontal {
+    border-bottom: 0px solid transparent;
+    border-top: 5px solid transparent;
+    background-clip:padding-box;
+    background-color: white;
+
+}
+
+::-webkit-scrollbar-thumb {
+    min-height: 28px;
+    padding-top:100px;
+    background-clip:padding-box;
+    background-color: rgba(0,0,0,0.2);
+    -webkit-box-shadow: inset 1px 1px 0px rgba(0,0,0,0.10),
+                        inset 0px -1px 0px  rgba(0,0,0,0.07);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0,0,0,0.4);
+    -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.25);
+}
+
+::-webkit-scrollbar-thumb:active {
+    -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35);
+    background-color: rgba(0,0,0,0.5);
+}
+::-webkit-scrollbar-thumb:vertical {
+    border-top: 0px solid transparent;
+    border-bottom: 0px solid transparent;
+    border-right: 0px solid transparent;
+    border-left: 5px solid transparent;
+}
+::-webkit-scrollbar-thumb:horizontal {
+    border-top: 5px solid transparent;
+    border-bottom: 0px solid transparent;
+    border-right: 0px solid transparent;
+    border-left: 0px solid transparent;
+}
+
+.inline-scroller .scrollBarInner::-webkit-scrollbar-track:vertical {
+    border-left: 6px solid transparent;
+    border-right: 1px solid transparent;
+}
+.inline-scroller .scrollBarInner::-webkit-scrollbar-track:horizontal {
+    border-top: 6px solid transparent;
+    border-bottom: 1px solid transparent;
+}
+
+.inline-scroller .scrollBarInner::-webkit-scrollbar-thumb:vertical {
+    border-left: 6px solid transparent;
+    border-right: 1px solid transparent;
+    border-top: 0px solid transparent;
+    border-bottom: 0px solid transparent;
+}
+.inline-scroller .scrollBarInner::-webkit-scrollbar-thumb:horizontal {
+    border-left: 0px solid transparent;
+    border-right: 0px solid transparent;
+    border-top: 6px solid transparent;
+    border-bottom: 1px solid transparent;
+}
+
+::-webkit-scrollbar-track:hover {
+  background-color:rgba(0,0,0,0.05);
+   -webkit-box-shadow: inset 1px 0px 0px  rgba(0,0,0,0.10);
+}
+
+::-webkit-scrollbar-track:active {
+  background-color:rgba(0,0,0,0.05);
+  -webkit-box-shadow: inset 1px 0px 0px  rgba(0,0,0,0.14),
+                      inset -1px -1px 0px  rgba(0,0,0,0.07);
+}
+
+/*------------------------------------------------------------------
+Component: Tooltips
+------------------------------------------------------------------*/
+#kd-tooltip {
+    display: block;
+    position: absolute;
+    background: #2d2d2d;
+    top: -5px;
+    color: #FFF;
+    font-weight: bold;
+    text-align: center;
+    outline: 1px solid rgba(255,255,255,0.5);
+    height: 29px;
+    line-height: 29px;
+    margin-left: -20px;
+    padding: 0 10px;
+    font-size: 11px;
+    z-index: 2000;
+    opacity: 0.0;
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
+    box-shadow: 1px 2px 4px rgba(0,0,0,0.2);
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-transition: opacity 0.13s;
+    -moz-transition: opacity 0.13s;
+    -o-transition: opacity 0.13s;
+    transition: opacity 0.13s;
+}
+#kd-tooltip .pointer {
+    outline: none;
+    display: block;
+    position: absolute;
+    top: -5px;
+    left: 24px;
+    margin: 0 0 0 -5px;
+    width: 0;
+    height: 0;
+    line-height: 0px;
+    font-size: 0px;
+    /* This sets the tooptip pointer color */
+    border-top: transparent;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid #2d2d2d;
+}
+#kd-tooltip.visible {
+    opacity: 1.0;
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+}
+
+/*------------------------------------------------------------------
+Component: Sample Form
+------------------------------------------------------------------*/
+form ul li{
+    margin-bottom:16px;
+}
+form{
+    width:336px;
+}
+fieldset{
+    border:1px solid #ebebeb;
+    padding:16px;
+}
+legend{
+    padding:0 6px;
+}
+form label{
+    display:block;
+    line-height:29px;
+}
+form input[type=text]{
+    width:100%;
+}
+form label input[type=radio], form label input[type=checkbox]{
+    bottom:-1px;
+}
+form label input[type=checkbox]{
+    margin-right:5px;
+}
+form .kd-button.kd-select{
+    float:none;
+    margin-left:0;
+}
+
+/*------------------------------------------------------------------
+Component: Form Errors
+------------------------------------------------------------------*/
+#errorDemo{
+    width:280px;
+}
+
+input[type=text].kd-formerror{
+    border:1px solid #DD4B39;
+}
+.kd-errormessage{
+    color:#DD4B39;
+    padding:9px 0   ;
+}
+.kd-errormessage .qm{
+    background:#DD4B39;
+    color:#FFF;
+    font-weight:bold;
+    display:inline-block;
+    padding: 0 5px ;
+    -webkit-border-radius:10px;
+    -moz-border-radius:10px;
+    border-radius:10px;
+
+    position: relative;
+    top: -1px;
+}
+.kd-textlabel{
+    color:#666;
+}
+
+/*------------------------------------------------------------------
+Component: List
+------------------------------------------------------------------*/
+
+.kd-list table,
+.kd-list tbody {
+    display:block;
+    width:100%;
+    overflow:visible;
+}
+.kd-list table tr {
+    display:block;
+    position:relative;
+    height:39px;
+    margin-top:-1px;
+    background-color:#f8f8f8;
+    border:1px solid;
+    border-color:#ebebea transparent;
+    z-index:1;
+}
+.kd-list table tr.highlighted {
+    background:#fff;
+}
+.kd-list table tr.checked {
+    background-color: #f6ebae;
+    border-color:#ebdb84 transparent;
+    z-index:2;
+}
+.kd-list table tr:hover {
+    z-index:3;
+    border-color:#ccc;
+    -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+    -ms-box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+}
+.kd-list table tr.checked:hover {
+    border-color:#e5d36f;
+}
+.kd-list table tr:hover input[type=checkbox],
+.kd-list table tr:hover .fakecheckbox,
+.kd-list table tr.checked input[type=checkbox],
+.kd-list table tr.checked .fakecheckbox {
+    background:#fff;
+}
+.kd-list table tr td {
+    display:block;
+    position:absolute;
+}
+.kd-list table tr td a {
+    display:block;
+    text-overflow:ellipsis;
+    overflow:hidden;
+    white-space:nowrap;
+    line-height:39px;
+    font-size:13px;
+    color:#333;
+}
+
+.y-crush .kd-list table tr {
+    height:29px;
+}
+.y-crush .kd-list table tr.two-line,
+.mobile .kd-list table tr.two-line {
+    height:51px;
+}
+.y-crush .kd-list table tr td a,
+.mobile .kd-list table .two-line td a {
+    line-height:29px;
+}
+.mobile .kd-list table tr td:first-child {
+    left:16px;
+    padding-left:0;
+}
+
+/* KNURLING */
+.kd-list table.knurling tr:hover:after {
+    content:"";
+    position:absolute;
+    top:2px;
+    bottom:2px;
+    left:2px;
+    width:7px;
+    background-image:-webkit-linear-gradient(top, #ddd, #ddd 50%, transparent 50%, transparent);
+    background-image:-moz-linear-gradient(top, #ddd, #ddd 50%, transparent 50%, transparent);
+    background-image:linear-gradient(top, #ddd, #ddd 50%, transparent 50%, transparent);
+    background-size:1px 2px;
+    cursor:pointer;
+    z-index:3;
+}
+.kd-list table.knurling tr.checked:after {
+    background-image:-webkit-linear-gradient(top, #dcc961, #dcc961 50%, transparent 50%, transparent);
+    background-image:-moz-linear-gradient(top, #dcc961, #dcc961 50%, transparent 50%, transparent);
+    background-image:linear-gradient(top, #dcc961, #dcc961 50%, transparent 50%, transparent);
+}
+
+/* Responsive resize transitions */
+.kd-list table tr {
+    -webkit-transition:height 0.18s;
+    -moz-transition:height 0.18s;
+    transition:height 0.18s;
+}
+.kd-list table tr td {
+    -webkit-transition-property:top, left, right;
+    -webkit-transition-duration:0.18s;
+    -moz-transition-property:top, left, right;
+    -moz-transition-duration:0.18s;
+    transition-property:top, left, right;
+    transition-duration:0.18s;
+}
+.kd-list table tr td a {
+    -webkit-transition-property:padding, line-height;
+    -webkit-transition-duration:0.18s;
+    -moz-transition-property:padding, line-height;
+    -moz-transition-duration:0.18s;
+    transition-property:padding, line-height;
+    transition-duration:0.18s;
+}
+
+/*------------------------------------------------------------------
+Component: Footers
+------------------------------------------------------------------*/
+.pageFooter{
+    padding:11px 44px;
+    border-top:1px solid #ebebeb;
+    font-size:12px;
+}
+.pageFooter a:hover{
+    text-decoration:underline;
+}
+.pageFooter, .pageFooter a{color:#999;}
+.pageFooter ul.linklist.right{
+    float:right;
+}
+.pageFooter ul.linklist.left{
+    float:left;
+}
+.pageFooter ul.linklist > li, .pageFooter ul.linklist{
+/*  display:inline;*/
+    float:left;
+}
+.pageFooter ul.linklist > li{
+    margin:0 8px;
+}
+.pageFooter ul.linklist .kd-menubutton{
+    border-left:1px solid;
+    border-right:1px solid;
+    border-color:transparent;
+    margin:-11px 0 0;
+    padding:11px 7px;
+}
+.pageFooter ul.linklist .chatbutton{
+    padding-top:8px;
+    padding-bottom:6px;
+    margin-right:60px;
+}
+.pageFooter ul.linklist .kd-menubutton.selected a{
+    color:#000;
+}
+.pageFooter ul.linklist .kd-menubutton.selected .kd-disclosureindicator{
+    -webkit-transform:rotate(-90deg);
+}
+.pageFooter ul.linklist .kd-menubutton:hover, .pageFooter ul.linklist .kd-menubutton.selected{
+    border-color:#ebebeb;
+}
+.pageFooter ul.linklist .kd-menubutton:hover a{
+    text-decoration:none;
+}
+.pageFooter .kd-menubutton a{margin:0;}
+
+.pageFooter .kd-menubutton .kd-disclosureindicator{
+    margin:4px 0 0 4px;
+    opacity:.6;
+}
+.pageFooter .kd-menubutton img{
+    opacity:.6;
+}
+.pageFooter .kd-menubutton:hover .kd-disclosureindicator, .pageFooter .kd-menubutton:hover img, .pageFooter .kd-menubutton.selected img{
+    opacity:.8;
+}
+.pageFooter .kd-menulist{
+    -webkit-box-shadow: 0px -2px 4px rgba(0,0,0,0.2);
+    -moz-box-shadow: 0px -2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 -2px 4px rgba(0,0,0,0.2);
+    outline:0;
+    border:1px solid #a7a7a7;
+    border-bottom:0;
+}
+
+.componentName, #stickersheet h2.componentName a { color: #DD4B39; }
+.kd-content-sidebar .kd-sidebarlistitem.selected > a { border-left-color:#dd4b39; }
+.kd-appbar .kd-appname, .kd-appbar .kd-appname a { color:#DD4B39; }
+
+
+
+.kd-button-submit.disabled, .kd-button-submit.disabled:hover, .kd-button-submit.disabled:active {
+    border-color:#3079ed;
+    background-color: #4d90fe;
+}
+.kd-button-share.disabled, .kd-button-share.disabled:hover, .kd-button-share.disabled:active {
+    border-color:#29691d;
+    background-color: #3d9400;
+}
+.kd-button-action.disabled, .kd-button-action.disabled:hover, .kd-button-action.disabled:active {
+    border-color: #b0281a;
+    background-color: #d14836;
+}
+
+.kd-button-submit:focus, .kd-button-submit.focus{
+    border-color:#4D90FE
+}
+.kd-button-share:focus, .kd-button-share.focus{
+    border-color:#29691d;
+}
+.kd-button-action:focus, .kd-button-action.focus{
+    border-color:#d14836;
+}
+
+.kd-button-submit {
+    border-color: #3079ed;
+    background-color: #4d90fe;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
+    background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
+    background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
+    background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
+    background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
+    background-image: linear-gradient(top,#4d90fe,#4787ed);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#4787ed');
+}
+.kd-button-submit:hover {
+    border-color: #2f5bb7;
+    background-color: #357ae8;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#357ae8));
+    background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
+    background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
+    background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
+    background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
+    background-image: linear-gradient(top,#4d90fe,#357ae8);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#357ae8');
+}
+
+.kd-button-share {
+    border-color: #29691d;
+    background-color: #3d9400;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#3d9400),to(#398a00));
+    background-image: -webkit-linear-gradient(top,#3d9400,#398a00);
+    background-image: -moz-linear-gradient(top,#3d9400,#398a00);
+    background-image: -ms-linear-gradient(top,#3d9400,#398a00);
+    background-image: -o-linear-gradient(top,#3d9400,#398a00);
+    background-image: linear-gradient(top,#3d9400,#398a00);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3d9400',EndColorStr='#398a00');
+}
+.kd-button-share:hover {
+    border-color: #2D6200;
+    background-color: #368200;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#3d9400),to(#368200));
+    background-image: -webkit-linear-gradient(top,#3d9400,#368200);
+    background-image: -moz-linear-gradient(top,#3d9400,#368200);
+    background-image: -ms-linear-gradient(top,#3d9400,#368200);
+    background-image: -o-linear-gradient(top,#3d9400,#368200);
+    background-image: linear-gradient(top,#3d9400,#368200);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3d9400',EndColorStr='#368200');
+}
+
+.kd-button-action {
+    margin-bottom: 16px;
+    border: 1px solid transparent;
+    color: #FFF;
+    text-transform: uppercase;
+    letter-spacing:1;
+    background-color: #d14836;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#d14836));
+    background-image: -webkit-linear-gradient(top,#dd4b39,#d14836);
+    background-image: -moz-linear-gradient(top,#dd4b39,#d14836);
+    background-image: -ms-linear-gradient(top,#dd4b39,#d14836);
+    background-image: -o-linear-gradient(top,#dd4b39,#d14836);
+    background-image: linear-gradient(top,#dd4b39,#d14836);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dd4b39',EndColorStr='#d14836');
+}
+.kd-button-action:hover {
+    border-color: #b0281a;
+    border-bottom-color: #AF301F;
+    background-color: #c53727;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#c53727));
+    background-image: -webkit-linear-gradient(top,#dd4b39,#c53727);
+    background-image: -moz-linear-gradient(top,#dd4b39,#c53727);
+    background-image: -ms-linear-gradient(top,#dd4b39,#c53727);
+    background-image: -o-linear-gradient(top,#dd4b39,#c53727);
+    background-image: linear-gradient(top,#dd4b39,#c53727);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dd4b39',EndColorStr='#c53727');
+}
+.kd-button-action:active,
+.kd-button-action:focus:active,
+.kd-button-action.focus:active {
+    border-color: #992A1B;
+    background-color: #b0281a;
+    background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#b0281a));
+    background-image: -webkit-linear-gradient(top,#dd4b39,#b0281a);
+    background-image: -moz-linear-gradient(top,#dd4b39,#b0281a);
+    background-image: -ms-linear-gradient(top,#dd4b39,#b0281a);
+    background-image: -o-linear-gradient(top,#dd4b39,#b0281a);
+    background-image: linear-gradient(top,#dd4b39,#b0281a);
+}
+
+.kd-accordion .expanded .row > a { color:#d14836; }
+
+/*------------------------------------------------------------------
+Component: Activity Indicator
+------------------------------------------------------------------*/
+#loader .circle.red .mask.first { border-bottom-color:rgb(60,120,248); }
+#loader .circle.yellow .mask.first { border-left-color:rgb(250,36,36); }
+#loader .circle.green .mask.first { border-top-color:rgb(255,211,75); }
+#loader .circle.blue .mask.first { border-right-color:rgb(0,177,95);}
+
+#loader .circle.red .mask.first .base { background-color:rgb(250,36,36); }
+#loader .circle.red .mask.second .base { background-color:rgb(60,120,248); }
+
+#loader .circle.yellow .mask.first .base { background-color:rgb(255,211,75); }
+#loader .circle.yellow .mask.second .base { background-color:rgb(250,36,36); }
+
+#loader .circle.green .mask.first .base { background-color:rgb(0,177,95); }
+#loader .circle.green .mask.second .base { background-color:rgb(255,211,75); }
+
+#loader .circle.blue .mask.first .base { background-color:rgb(60,120,248); }
+#loader .circle.blue .mask.second .base { background-color:rgb(0,177,95); }
+
+#loader .circle.initial .mask .mover { background-color:rgb(33,89,189); }
+
+#loader .circle.red .mask.first .mover { background-color:rgb(60,120,248); }
+#loader .circle.red .mask.second .mover { background-color:rgb(158,18,18); }
+
+#loader .circle.yellow .mask.first .mover { background-color:rgb(250,36,36); }
+#loader .circle.yellow .mask.second .mover { background-color:rgb(222,161,26); }
+
+#loader .circle.green .mask.first .mover { background-color:rgb(255,211,75); }
+#loader .circle.green .mask.second .mover { background-color:rgb(0,137,72); }
+
+#loader .circle.blue .mask.first .mover { background-color:rgb(0,177,95); }
+#loader .circle.blue .mask.second .mover { background-color:rgb(33,89,189); }
+
+#loader.initial .circle.initial .mask .mover { background-color:rgb(60,120,248); }
+
+#loader.yellow .circle.yellow .mask.first { border-color:rgb(255,211,75); }
+#loader.yellow .circle.yellow .mask.first .mover { background-color:rgb(158,18,18); }
+#loader.yellow .circle.yellow .mask.second .mover { background-color:rgb(255,211,75); }
+
+#loader.green .circle.green .mask.first { border-color:rgb(0,177,95); }
+#loader.green .circle.green .mask.first .mover { background-color:rgb(222,161,26); }
+#loader.green .circle.green .mask.second .mover { background-color:rgb(0,177,95); }
+
+#loader.blue .circle.blue .mask.first { border-color:rgb(60,120,248); }
+#loader.blue .circle.blue .mask.first .mover { background-color:rgb(0,137,72); }
+#loader.blue .circle.blue .mask.second .mover { background-color:rgb(60,120,248); }
+
+#loader.red .circle.red .mask.first { border-color:rgb(250,36,36); }
+#loader.red .circle.red .mask.first .mover { background-color:rgb(33,89,189); }
+#loader.red .circle.red .mask.second .mover { background-color:rgb(250,36,36); }
+
 a {
   color: rgb(0, 102, 204);
   text-decoration: none;
 }
 
 body {
-  background: -webkit-gradient(radial, center center, 0, center center, 400,
-                               from(rgb(254, 254, 254)),
-                               to(rgb(239, 239, 239)));
-  font-family: 'Open sans', Arial, sans-serif;
-  margin:0;
-  padding:0;
+  margin: 0;
+  padding: 20px;
   direction: __MSG_@@bidi_dir__;
 }
 
@@ -56,17 +4481,26 @@ form {
   display: inline;
 }
 
-h1 {
-  font-size: 24px;
-  font-weight: normal;
+h1.icon-label {
+  vertical-align: 14px;
+  margin-bottom: 60px;
+  font-size: 28px;
+  font-weight: 300;
+  color: #aaa;
+  font-family: "Open sans", "Ariel", sans-serif
 }
 
-html {
-  /*
-    Used to force background gradient to center correctly.
-    http://crbug.com/109705
-  */
-  height: 100%;
+h2 {
+  color: #666;
+}
+
+header {
+  display: -webkit-box;
+  width: 100%;
+}
+
+header > .box-spacer {
+  -webkit-box-flex: 1;
 }
 
 label {
@@ -74,6 +4508,17 @@ label {
   font-weight: bold;
 }
 
+section {
+  width: 690px;
+  margin: 30px auto;
+  border: 1px solid #e5e5e5;
+  background: #f9f9f9;
+  padding: 20px 30px 20px 30px;
+  border-radius: 3px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.07);
+}
+
+
 /* Classes */
 
 .access-code-digit-group {
@@ -106,12 +4551,6 @@ label {
   height: 0 !important;
 }
 
-.choice-header {
-  font-size: 24px;
-  font-weight: normal;
-  margin-__MSG_@@bidi_start_edge__: 10px;
-}
-
 .choice-footer {
   font-size: 14px;
 }
@@ -125,17 +4564,13 @@ label {
   cursor: pointer;
 }
 
-.description {
-  margin-bottom: 25px;
-}
-
 .error-state {
   background-image: url('icon_warning.png');
   background-repeat: no-repeat;
   background-position: top __MSG_@@bidi_start_edge__;
   padding-__MSG_@@bidi_start_edge__: 30px;
   padding-top: 3px;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
   color: #900;
   display: inline-block;
 }
@@ -182,43 +4617,34 @@ label {
   margin-bottom: 10px;
 }
 
-.mode-select-button {
-  width: 100%;
-  height: 32px;
-  white-space: nowrap;
+.mode-select-button-column {
+  text-align: __MSG_@@bidi_end_edge__;
 }
 
-.mode-select-label {
-  padding-__MSG_@@bidi_end_edge__: 20px;
+.mode-select-button-column button {
+  min-width: 72px;
 }
 
 .mode-select-table {
-  margin-__MSG_@@bidi_start_edge__: 40px;
-  width: 600px;  /* width + margin = body width */
   border-collapse: collapse;
-  margin-top: 40px;
+  margin-top: 30px;
+  width: 100%;
 }
 
 .mode-select-table-spacer {
-  height: 20px;
+  height: 13px;
 }
 
 .mode-select-table-underline td {
-  border-bottom: 1px solid #c6c6c6;
+  border-bottom: 1px solid #ebebeb;
 }
 
 .hide-scrollbars {
   overflow-y: hidden;
 }
 
-.host-list-container {
-  -webkit-transition: all 0.5s;
-  overflow: hidden;
-}
-
 .host-list-table {
-  margin-__MSG_@@bidi_start_edge__: 30px;
-  width: 610px;  /* width + margin = body width */
+  width: 100%;
   border-spacing: 0;
 }
 
@@ -228,12 +4654,15 @@ label {
 }
 
 .host-list-row td {
-  border-bottom: 1px solid transparent;
-  border-top: 1px solid transparent;
+  border-bottom: 1px solid #ebebeb;
 }
 
-.host-list-row:hover {
-  background-color: #e7eef2;
+td {
+  vertical-align: middle;
+}
+
+.host-online:hover {
+  background-color: #f2f2f2;
 }
 
 .host-list-rename-icon, .host-list-remove-icon {
@@ -256,46 +4685,29 @@ label {
   opacity: 0.5;
 }
 
-.host-list-row:hover td {
-  border-bottom: 1px solid #c6c6c6;
-  border-top: 1px solid #c6c6c6;
-}
-
-.host-list-row-end {
-  padding-__MSG_@@bidi_end_edge__: 10px;
+.host-list-main-icon {
+  width: 40px;
 }
 
-.host-list-row-start {
-  padding-__MSG_@@bidi_start_edge__: 10px;
-}
-
-.host-offline {
-  color: #a9a9a9;
+.host-list-edit-icon,
+.host-list-rename-icon {
+  width: 16px;
 }
 
+.host-offline .host-list-label,
 .host-offline .host-list-main-icon {
   opacity: 0.5;
 }
 
+.kd-button {
+  white-space:nowrap;
+}
+
 .small-print {
   font-size: 13px;
   color: #AAA;
 }
 
-.top-primary {
-  font-size: 14px;
-  position: absolute;
-  top: 0.5em;
-  __MSG_@@bidi_start_edge__: 0.5em;
-}
-
-.top-secondary {
-  font-size: 14px;
-  position: absolute;
-  top: 0.5em;
-  __MSG_@@bidi_end_edge__: 0.5em;
-}
-
 .waiting {
   color: rgb(180, 180, 180);
 }
@@ -351,8 +4763,9 @@ label {
   color: rgba(0, 0, 0, 0.5);
 }
 
-#daemon-control {
-  margin-top: 50px;
+#daemon-plugin-container {
+  width: 0;
+  height: 0;
 }
 
 #dialog-screen {
@@ -382,14 +4795,6 @@ label {
   width: 64px;
 }
 
-#main {
-  color: rgb(115, 115, 115);
-  font-size: 16px;
-  margin: 100px auto 0 auto;
-  padding: 10px;
-  width: 640px;
-}
-
 #host-list-error {
   margin-__MSG_@@bidi_start_edge__: 40px;
 }
@@ -410,3 +4815,7 @@ label {
   min-width: 0;
   line-height: 0;
 }
+
+#top-secondary {
+  margin-top: 10px
+}
diff --git a/remoting/webapp/main.html b/remoting/webapp/main.html
index 4f98247..1bb4914 100644
--- a/remoting/webapp/main.html
+++ b/remoting/webapp/main.html
@@ -7,13 +7,13 @@ found in the LICENSE file.
 
 <html>
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
     <link href="http://fonts.googleapis.com/css?family=Open+Sans&amp;v1"
           rel="stylesheet" type="text/css">
-    <link rel="icon" type="image/png" href="chromoting16.png" />
-    <link rel="stylesheet" href="debug_log.css" />
-    <link rel="stylesheet" href="main.css" />
-    <link rel="stylesheet" href="toolbar.css" />
+    <link rel="icon" type="image/png" href="chromoting16.png">
+    <link rel="stylesheet" href="debug_log.css">
+    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="toolbar.css">
     <script src="ask_pin_dialog.js"></script>
     <script src="client_plugin_async.js"></script>
     <script src="client_plugin_v1.js"></script>
@@ -53,87 +53,57 @@ found in the LICENSE file.
 
     <div id="daemon-plugin-container"></div>
 
-    <div class="top-primary"
-         data-ui-mode="home client host"
-         hidden>
-      <span id="email-status">
+    <header data-ui-mode="auth home client host" hidden>
+      <div>
+        <img src="chromoting48.png">
+        <h1 class="icon-label" i18n-content="PRODUCT_NAME"></h1>
+      </div>
+      <div class="box-spacer"></div>
+      <div id="top-secondary">
         <span id="current-email"></span>
         <span data-ui-mode="home client.unconnected client.connect-failed">
-        (<a id="clear-oauth" href="#" i18n-content="SIGN_OUT_BUTTON"></a>)
+          <a id="clear-oauth" href="#" i18n-content="SIGN_OUT_BUTTON"></a> |
+          <a id="connection-history" href="#"
+             i18n-content="CONNECTION_HISTORY_BUTTON"></a> |
         </span>
-      </span>
-    </div>
-
-    <div class="top-secondary" data-ui-mode="auth home client host">
-      <a href="https://www.google.com/support/chrome/bin/answer.py?answer=1649523"
-         target="_blank" i18n-content="HELP"></a>
-    </div>
-
-    <div id="session-toolbar"
-         data-ui-mode="in-session"
-         class="toolbar-container"
-         hidden>
-      <div class="toolbar-border">
-        <span id="session-status-message" i18n-content="LABEL_CONNECTED"></span>
-        <strong id="connected-to"></strong>
-        <button id="toolbar-disconnect"
+        <a href="https://www.google.com/support/chrome/bin/answer.py?answer=1649523"
+           target="_blank" i18n-content="HELP"></a>
+      </div>
+    </header>
+
+    <section id="auth-panel" data-ui-mode="auth">
+      <h2 i18n-content="MODE_AUTHORIZE"></h2>
+      <p i18n-content="DESCRIPTION_AUTHORIZE"></p>
+      <div class="centered-button">
+        <button id="auth-button"
+                class="kd-button"
                 type="button"
-                i18n-content="DISCONNECT_MYSELF_BUTTON">
+                i18n-content="CONTINUE_BUTTON">
         </button>
-        <span class="end-align">
-          <button id="toggle-scaling">
-            <img src="scale-to-fit.png">
-          </button>
-        </span>
-      </div>
-      <div class="toolbar-stub" id="toolbar-stub">
-        <div class="arrow-down"></div>
       </div>
-    </div> <!-- session-toolbar -->
-
-    <div id="main" data-ui-mode="auth home host client" hidden>
-
-      <header class="choice-header">
-        <img id="icon" src="chromoting128.png">
-        <h1 class="icon-label">
-          <span i18n-content="PRODUCT_NAME"></span>
-          <span data-ui-mode="auth client host">&nbsp;&rsaquo;&nbsp;</span>
-          <span i18n-content="MODE_AUTHORIZE" data-ui-mode="auth"></span>
-          <span i18n-content="MODE_CONNECT" data-ui-mode="client"></span>
-          <span i18n-content="MODE_SHARE" data-ui-mode="host"></span>
-        </h1>
-      </header>
-
-      <img id="divider-top" src="dividertop.png">
-
-      <div id="auth-panel" data-ui-mode="auth">
-        <div class="description" i18n-content="DESCRIPTION_AUTHORIZE"></div>
-        <div class="centered-button">
-          <button id="auth-button"
-                  class="big-button"
-                  type="button"
-                  i18n-content="CONTINUE_BUTTON">
-          </button>
-        </div>
-      </div> <!-- auth-panel -->
+    </section> <!-- auth-panel -->
 
-      <div data-ui-mode="home">
-        <div class="description"
-             i18n-content="DESCRIPTION_HOME"
+    <div data-ui-mode="home">
+      <section>
+        <div i18n-content="DESCRIPTION_HOME"
              i18n-value-1="<a href='https://chrome.google.com/remotedesktop'>chrome.google.com/remotedesktop</a>"></div>
+      </section>
+
+      <section>
+        <h2 i18n-content="MODE_IT2ME"></h2>
+        <!-- TODO(jamiewalch): Rewrite this using flex boxes -->
         <table class="mode-select-table">
           <tr>
             <td>
-              <div i18n-content="HOME_SHARE_DESCRIPTION"
-                  class="mode-select-label"></div>
+              <div i18n-content="HOME_SHARE_DESCRIPTION"></div>
               <div id="chrome-os-no-share"
                    i18n-content="HOME_SHARE_DESCRIPTION_CHROME_OS"
                    class="small-print"></div>
             </td>
-            <td>
+            <td class="mode-select-button-column">
               <button id="share-button"
                       i18n-content="HOME_SHARE_BUTTON"
-                      class="mode-select-button"
+                      class="kd-button kd-button-share"
                       type="button">
               </button>
             </td>
@@ -144,34 +114,33 @@ found in the LICENSE file.
           <tr class="mode-select-table-spacer">
           </tr>
           <tr>
-            <td i18n-content="HOME_ACCESS_DESCRIPTION"
-                class="mode-select-label"></td>
-            <td>
+            <td i18n-content="HOME_ACCESS_DESCRIPTION"></td>
+            <td class="mode-select-button-column">
               <button id="access-mode-button"
                       i18n-content="HOME_ACCESS_BUTTON"
-                      class="mode-select-button"
+                      class="kd-button"
                       type="button">
               </button>
             </td>
           </tr>
         </table>
-
-        <div id="host-list-div"
-             class="host-list-container collapsed"
-             hidden>
-          <img src="dividerbottom.png">
-          <h1 i18n-content="HOME_MY_COMPUTERS_TITLE"></h1>
-          <table id="host-list" class="host-list-table"></table>
-          <div id="host-list-error" class="error-state"></div>
-        </div> <!-- host-list-div -->
-
+      </section>
+
+      <section id="host-list-div"
+               class="host-list-container collapsed"
+               hidden>
+        <h2 i18n-content="MODE_ME2ME"></h2>
+        <table id="host-list" class="host-list-table"></table>
+        <div id="host-list-error" class="error-state"></div>
         <div id="daemon-control" data-ui-mode="home.daemon">
-          <table>
+          <table class="host-list-table">
+            <!-- TODO(jamiewalch): Rewrite this using flex boxes and apply the
+                 host-offline style if the daemon is not running -->
             <tr>
-              <td>
+              <td class="host-list-main-icon">
                 <img src="icon_host.png">
               </td>
-              <td>
+              <td class="host-list-label">
                 <span id="this-computer-name"
                       data-ui-mode="home.daemon.enabled">
                   Spongebob Squaretrousers
@@ -180,16 +149,18 @@ found in the LICENSE file.
                       data-ui-mode="home.daemon.disabled">
                 </span>
               </td>
-              <td>
+              <td class="mode-select-button-column">
                 <button type="button"
                         id="stop-daemon"
                         i18n-content="HOME_DAEMON_STOP_BUTTON"
-                        data-ui-mode="home.daemon.enabled">
+                        data-ui-mode="home.daemon.enabled"
+                        class="kd-button">
                 </button>
                 <button type="button"
                         id="start-daemon"
                         i18n-content="HOME_DAEMON_START_BUTTON"
-                        data-ui-mode="home.daemon.disabled">
+                        data-ui-mode="home.daemon.disabled"
+                        class="kd-button">
                 </button>
               </td>
             </tr>
@@ -201,6 +172,7 @@ found in the LICENSE file.
                i18n-content="HOME_DAEMON_CHANGE_PIN_LINK"></a>
           </div>
         </div> <!-- daemon-control -->
+      </section> <!-- host-list-div -->
 
         <div id="dialog-screen" hidden></div>
 
@@ -229,8 +201,7 @@ found in the LICENSE file.
         </div> <!-- host.waiting-for-code -->
 
         <div data-ui-mode="host.waiting-for-connection">
-          <div class="description"
-               i18n-content="INSTRUCTIONS_SHARE_ABOVE"></div>
+          <div i18n-content="INSTRUCTIONS_SHARE_ABOVE"></div>
           <div id="access-code-display" dir="ltr"></div>
           <div id="access-code-countdown-container">
             <div id="access-code-countdown" class="expiring" hidden>
@@ -238,8 +209,7 @@ found in the LICENSE file.
                     i18n-content="ACCESS_CODE_TIMER"></span>
             </div>
           </div>
-          <div class="description"
-               i18n-content="INSTRUCTIONS_SHARE_BELOW"></div>
+          <div i18n-content="INSTRUCTIONS_SHARE_BELOW"></div>
         </div> <!-- host.waiting-for-connection -->
 
         <div data-ui-mode="host.shared">
@@ -248,7 +218,7 @@ found in the LICENSE file.
           <div class="centered-button">
             <button id="cancel-share-button"
                     type="button"
-                    class="big-button"
+                    class="kd-button"
                     i18n-content="STOP_SHARING_BUTTON">
             </button>
           </div>
@@ -266,7 +236,7 @@ found in the LICENSE file.
              data-ui-mode="host.share-failed host.share-finished">
           <button id="host-finished-button"
                   type="button"
-                  class="big-button"
+                  class="kd-button"
                   autofocus="autofocus"
                   i18n-content="OK">
           </button>
@@ -278,7 +248,7 @@ found in the LICENSE file.
 
       <div id="client-panel" data-ui-mode="client">
         <div data-ui-mode="client.unconnected">
-          <div class="description" i18n-content="DESCRIPTION_CONNECT"></div>
+          <div i18n-content="DESCRIPTION_CONNECT"></div>
           <div id="access-code-entry-row">
             <form id="access-code-form" action="">
               <label for="access-code-entry" i18n-content="ACCESS_CODE"></label>
@@ -287,12 +257,12 @@ found in the LICENSE file.
                      autofocus="autofocus"
                      autocomplete="off"/>
               <button id="connect-button"
-                      class="big-button"
+                      class="kd-button"
                       type="submit"
                       i18n-content="CONNECT_BUTTON">
               </button>
               <button id="client-cancel-button"
-                      class="big-button"
+                      class="kd-button"
                       type="button"
                       i18n-content="CANCEL">
               </button>
@@ -313,7 +283,7 @@ found in the LICENSE file.
                      autofocus="autofocus"
                      autocomplete="off"/>
               <button id="connect-button"
-                      class="big-button"
+                      class="kd-button"
                       type="submit"
                       i18n-content="CONNECT_BUTTON">
               </button>
@@ -334,7 +304,7 @@ found in the LICENSE file.
              class="centered-button">
           <button id="client-finished-it2me-button"
                   type="button"
-                  class="big-button"
+                  class="kd-button"
                   i18n-content="OK"
                   autofocus="autofocus">
           </button>
@@ -344,37 +314,31 @@ found in the LICENSE file.
              class="centered-button">
           <button id="client-finished-me2me-button"
                   type="button"
-                  class="big-button"
+                  class="kd-button"
                   i18n-content="OK"
                   autofocus="autofocus">
           </button>
           <button id="client-reconnect-button"
                   type="button"
-                  class="big-button"
+                  class="kd-button"
                   i18n-content="RECONNECT">
           </button>
         </div> <!-- client.connect-failed.me2me client.session-finished.me2me -->
 
       </div> <!-- client-panel -->
 
-      <img id="divider-bottom"
-           src="dividerbottom.png"
-           data-ui-mode="auth host client">
-
       <footer class="choice-footer">
         <div id="waiting-footer"
              data-ui-mode="host.waiting-for-connection host.waiting-for-code client.connecting">
           <img src="spinner.gif">
           <span class="waiting icon-label" i18n-content="FOOTER_WAITING"></span>
           <button id="cancel-button"
-                  class="big-button"
+                  class="kd-button"
                   i18n-content="CANCEL">
           </button>
         </div> <!-- waiting-footer -->
       </footer>
 
-    </div> <!-- main -->
-
     <div id="nat-box-container" class="information-box-centerer" hidden>
       <div class="information-box-padding"></div>
       <div class="information-box"
@@ -384,7 +348,30 @@ found in the LICENSE file.
       <div class="information-box-padding"></div>
     </div> <!-- nat-box-container -->
 
+
     <div id="session-mode" data-ui-mode="in-session client" hidden>
+      <div id="session-toolbar"
+           data-ui-mode="in-session"
+           class="toolbar-container"
+           hidden>
+        <div class="toolbar-border">
+          <span id="session-status-message"
+                i18n-content="LABEL_CONNECTED"></span>
+          <strong id="connected-to"></strong>
+          <button id="toolbar-disconnect"
+                  type="button"
+                  i18n-content="DISCONNECT_MYSELF_BUTTON">
+          </button>
+          <span class="end-align">
+            <button id="toggle-scaling">
+              <img src="scale-to-fit.png">
+            </button>
+          </span>
+        </div>
+        <div class="toolbar-stub" id="toolbar-stub">
+          <div class="arrow-down"></div>
+        </div>
+      </div> <!-- session-toolbar -->
     </div> <!-- session-mode -->
 
     <section id="debug-log" dir="ltr" hidden>