Updated /gamma web css

author: Giulio Cesare Solaroli <giulio.cesare@clipperz.com> 2012-03-17 21:10:14 (UTC)
committer: Giulio Cesare Solaroli <giulio.cesare@clipperz.com> 2012-03-17 21:10:14 (UTC)
commit: 25029b943781850c76fbf43827af0204f35a98bf (patch) (unidiff)
tree: 1fcaefffee8366b548465a05a6c4cba0c31e131d
parent: 928f3f3ed3981f7f81b69ed94f2a315205db39fa (diff)
download: clipperz-25029b943781850c76fbf43827af0204f35a98bf.zip
clipperz-25029b943781850c76fbf43827af0204f35a98bf.tar.gz
clipperz-25029b943781850c76fbf43827af0204f35a98bf.tar.bz2
6 files changed, 1223 insertions, 2768 deletions
diff --git a/frontend/gamma/css/web.css b/frontend/gamma/css/web.css
index e4890b6..0a72e09 100644
--- a/frontend/gamma/css/web.css
+++ b/frontend/gamma/css/web.css
@@ -1,3703 +1,2210 @@
 /*
 Copyright 2008-2011 Clipperz Srl
 This file is part of Clipperz Community Edition.
 Clipperz Community Edition is an online password manager.
 For further information about its features and functionalities please
 refer to http://www.clipperz.com.
 * Clipperz Community Edition is free software: you can redistribute
  it and/or modify it under the terms of the GNU Affero General Public
  License as published by the Free Software Foundation, either version
  3 of the License, or (at your option) any later version.
 * Clipperz Community Edition is distributed in the hope that it will
  be useful, but WITHOUT ANY WARRANTY; without even the implied
  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  See the GNU Affero General Public License for more details.
 * You should have received a copy of the GNU Affero General Public
  License along with Clipperz Community Edition.  If not, see
  <http://www.gnu.org/licenses/>.
 */
 /*
 Color list:
 - login box:
                light#ff9955
                dark#ff6622
 - login button:
                regular#dd5500
                hover#773311
 - login translations:
        box: #cc6622;
        not-selected:
                        color:  #ddaa99
                        background:#994422
        selected: #772211;
 */
 html {
  height: 100%;
 }
 body {
  font-family: Helvetica-Neue, Helvetica, Arial, Geneva, sans-serif;
  margin: 0px;
 }
+div.modalDialogMask.userInfoBoxMask {
+  -moz-opacity: 0.0;
+  opacity: .0;
+  filter: alpha(opacity=0);
+  z-index: 19000;
+}
 .reset-margin {
  margin: 0px;
  padding: 0px;
  border: 0px;
 }
 .clear {
  clear: both;
 }
 .hidden_none {
  display: none;
  visibility: hidden;
 }
 .keepTogether {
  display: inline-block;
  white-space: nowrap;
 }
 #mainDiv {
  margin: 0 auto;
 }
 /*
 Color list:
 - login box:
                light#ff9955
                dark#ff6622
 - login button:
                regular#dd5500
                hover#773311
 - login translations:
        box: #cc6622;
        not-selected:
                        color:  #ddaa99
                        background:#994422
        selected: #772211;
 */
 html {
  height: 100%;
 }
 body {
  font-family: Helvetica-Neue, Helvetica, Arial, Geneva, sans-serif;
  margin: 0px;
 }
+div.modalDialogMask.userInfoBoxMask {
+  -moz-opacity: 0.0;
+  opacity: .0;
+  filter: alpha(opacity=0);
+  z-index: 19000;
+}
 .reset-margin {
  margin: 0px;
  padding: 0px;
  border: 0px;
 }
 .clear {
  clear: both;
 }
 .hidden_none {
  display: none;
  visibility: hidden;
 }
 .keepTogether {
  display: inline-block;
  white-space: nowrap;
 }
 #mainDiv {
  margin: 0 auto;
 }
 div#loading {
  width: 100%;
  height: 100%;
  display: table;
  background-image: -ms-radial-gradient(center, circle farthest-corner, #4d52b3 0%, #1f2148 100%);
  /* IE10 */
  background-image: -moz-radial-gradient(center, circle farthest-corner, #4d52b3 0%, #1f2148 100%);
  /* Mozilla Firefox */
  background-image: -o-radial-gradient(center, circle farthest-corner, #4d52b3 0%, #1f2148 100%);
  /* Opera */
  background-image: -webkit-radial-gradient(center, circle farthest-corner, #4d52b3 0%, #1f2148 100%);
  /* Webkit (Chrome 11+) */
  background-image: radial-gradient(center, circle farthest-corner, #4d52b3 0%, #1f2148 100%);
  /* Proposed W3C Markup */
  background-image: -webkit-gradient(radial, center center, 0, center center, 495, color-stop(0, #4d52b3), color-stop(1, #1f2148));
  /* Webkit (Safari/Chrome 10) */
 }
 div#loading div {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  text-align: center;
 }
 div#loading div h1 {
  font-size: 40pt;
  color: #ffffff;
  text-shadow: -1px -1px 2px #2e316c, 1px 1px 1px #454aa1;
 }
 div#loading div h3 {
  font-size: 18pt;
  text-shadow: -1px -1px 1px #2e316c, 1px 1px 1px #454aa1;
  color: #1f2148;
 }
 div#loading div h5 {
  padding-left: 20px;
  color: #ff9200;
 }
 /*
 Color list:
 - login box:
                light#ff9955
                dark#ff6622
 - login button:
                regular#dd5500
                hover#773311
 - login translations:
        box: #cc6622;
        not-selected:
                        color:  #ddaa99
                        background:#994422
        selected: #772211;
 */
 html {
  height: 100%;
 }
 body {
  font-family: Helvetica-Neue, Helvetica, Arial, Geneva, sans-serif;
  margin: 0px;
 }
+div.modalDialogMask.userInfoBoxMask {
+  -moz-opacity: 0.0;
+  opacity: .0;
+  filter: alpha(opacity=0);
+  z-index: 19000;
+}
+.reset-margin {
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
+}
+.clear {
+  clear: both;
+}
+.hidden_none {
+  display: none;
+  visibility: hidden;
+}
+.keepTogether {
+  display: inline-block;
+  white-space: nowrap;
+}
+#mainDiv {
+  margin: 0 auto;
+}
+div.tooltip {
+  position: absolute;
+  z-index: 30001;
+}
+div.tooltip div.tooltip_body {
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  border-top: 1px solid #d4d4d4;
+  border-left: 1px solid #a2a2a2;
+  border-right: 1px solid #6f6f6f;
+  border-bottom: 1px solid #3c3c3c;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  border-top: 1px solid #d4d4d4;
+  border-left: 1px solid #a2a2a2;
+  border-right: 1px solid #6f6f6f;
+  border-bottom: 1px solid #3c3c3c;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  border-top: 1px solid #d4d4d4;
+  border-left: 1px solid #a2a2a2;
+  border-right: 1px solid #6f6f6f;
+  border-bottom: 1px solid #3c3c3c;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  border-top: 1px solid #d4d4d4;
+  border-left: 1px solid #a2a2a2;
+  border-right: 1px solid #6f6f6f;
+  border-bottom: 1px solid #3c3c3c;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  border-top: 1px solid #d4d4d4;
+  border-left: 1px solid #a2a2a2;
+  border-right: 1px solid #6f6f6f;
+  border-bottom: 1px solid #3c3c3c;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#555555));
+  background: -moz-linear-gradient(0% 100% 90deg, #555555, #bbbbbb);
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  -webkit-box-shadow: 4px 4px 10px #333333;
+  -moz-box-shadow: 4px 4px 10px #333333;
+  box-shadow: 4px 4px 10px #333333;
+  border-top: 1px solid #d4d4d4;
+  border-left: 1px solid #a2a2a2;
+  border-right: 1px solid #6f6f6f;
+  border-bottom: 1px solid #3c3c3c;
+}
+div.tooltip div.tooltip_body span {
+  display: block;
+  padding: 10px;
+  font-size: 10pt;
+  color: white;
+}
+div.tooltip div.tooltip_body div.tooltip_text {
+  width: 200px;
+}
+div.tooltip div.tooltip_arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 6px solid transparent;
+}
+div.tooltip.BELOW div.tooltip_arrow {
+  top: -12px;
+  left: 97px;
+  border-bottom: 6px solid #bbbbbb;
+}
+div.tooltip.ABOVE div.tooltip_arrow {
+  position: static;
+  margin-left: 97px;
+  border-top: 6px solid #555555;
+}
+div.tooltip.LEFT div.tooltip_arrow {
+  left: 203px;
+  top: 10px;
+  border-left: 6px solid #747474;
+}
+div.tooltip.LEFT div.tooltip_body div.tooltip_text {
+  min-height: 45px;
+}
+div.tooltip.RIGHT div.tooltip_arrow {
+  left: -12px;
+  top: 10px;
+  border-right: 6px solid #9c9c9c;
+}
+div.tooltip.RIGHT div.tooltip_body div.tooltip_text {
+  min-height: 45px;
+}
+/*
+Color list:
+- login box:
+                light#ff9955
+                dark#ff6622
+- login button:
+                regular#dd5500
+                hover#773311
+- login translations:
+        box: #cc6622;
+        not-selected:
+                        color:  #ddaa99
+                        background:#994422
+        selected: #772211;
+*/
+html {
+  height: 100%;
+}
+body {
+  font-family: Helvetica-Neue, Helvetica, Arial, Geneva, sans-serif;
+  margin: 0px;
+}
+div.modalDialogMask.userInfoBoxMask {
+  -moz-opacity: 0.0;
+  opacity: .0;
+  filter: alpha(opacity=0);
+  z-index: 19000;
+}
 .reset-margin {
  margin: 0px;
  padding: 0px;
  border: 0px;
 }
 .clear {
  clear: both;
 }
 .hidden_none {
  display: none;
  visibility: hidden;
 }
 .keepTogether {
  display: inline-block;
  white-space: nowrap;
 }
 #mainDiv {
  margin: 0 auto;
 }
 div.pageHeaderAndBody {
  height: 100%;
 }
 body > div.pageHeaderAndBody {
  height: auto;
  min-height: 100%;
 }
 div.pageHeader {
  background-color: #1f2148;
  min-width: 1013px;
 }
 div.pageHeader div#miscLinks {
  float: right;
 }
 div.pageHeader div#miscLinks ul {
  margin: 12px 0px 0px;
  padding: 15px;
 }
 div.pageHeader div#miscLinks ul li {
  display: inline;
  margin: 0px;
  padding: 0px;
  border: 0px;
 }
 div.pageHeader div#miscLinks ul li a {
  color: #ffffff;
  margin: 0px;
  padding: 0px;
  border: 0px;
  margin: 0px;
  padding: 0px;
  border: 0px;
  margin: 0px;
  padding: 0px;
  border: 0px;
  margin: 0px;
  padding: 0px;
  border: 0px;
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
  padding: 15px;
  border-left: 1px solid #3e428f;
  font-weight: normal;
  text-decoration: none;
  font-size: 12pt;
  min-width: 70px;
 }
 div.pageHeader div#miscLinks ul li a:hover {
  color: #b8bae1;
 }
 div.pageHeader div#miscLinks ul li a#donateHeaderLink {
  border-left: 0px;
 }
 div.pageHeader div#logoFrame {
  padding: 16px 16px 60px 16px;
  min-height: 44px;
 }
 div.pageHeader div#logoFrame a {
  color: white;
  text-decoration: none;
 }
 div.pageHeader div#logoFrame a canvas {
  margin: 0px;
  padding: 0px;
  border: 0px;
  margin: 0px;
  padding: 0px;
  border: 0px;
  margin: 0px;
  padding: 0px;
  border: 0px;
  margin: 0px;
  padding: 0px;
  border: 0px;
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
  width: 150px;
  height: 39px;
 }
 div.pageHeader div#logoFrame a h5.clipperzPayoff {
  font-size: 13pt;
  font-weight: normal;
  white-space: nowrap;
  margin: 0px;
  padding-left: 4px;
 }
 div.pageHeader div#featureTabs table {
  width: 100%;
  padding: 6px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 46px;
 }
 div.pageHeader div#featureTabs table tr td {
  width: 25%;
  vertical-align: top;
  font-size: 11pt;
  color: white;
 }
 div.pageHeader div#featureTabs table tr td img {
  float: left;
 }
 div.pageHeader div#featureTabs table tr td span {
  display: block;
  padding: 5 10 5 85;
 }
 div.pageHeader div#featureTabs canvas.featureIcon {
  width: 76px;
  height: 76px;
  display: block;
  float: left;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffad79), to(#ff6622));
  background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ffad79);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffad79), to(#ff6622));
  background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ffad79);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffad79), to(#ff6622));
  background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ffad79);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffad79), to(#ff6622));
  background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ffad79);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffad79), to(#ff6622));
+  background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ffad79);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffad79), to(#ff6622));
+  background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ffad79);
+  border-radius: 38px;
+  -moz-border-radius: 38px;
+  -webkit-border-radius: 38px;
+  border-radius: 38px;
+  -moz-border-radius: 38px;
+  -webkit-border-radius: 38px;
  border-radius: 38px;
  -moz-border-radius: 38px;
  -webkit-border-radius: 38px;
  border-radius: 38px;
  -moz-border-radius: 38px;
  -webkit-border-radius: 38px;
  border-radius: 38px;
  -moz-border-radius: 38px;
  -webkit-border-radius: 38px;
  border-radius: 38px;
  -moz-border-radius: 38px;
  -webkit-border-radius: 38px;
 }
 div.pageHeader div#news {
  top: -82px;
  left: 240px;
  width: 310px;
  height: 90px;
  position: absolute;
  background-color: #616475;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
-  -webkit-box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
+  -webkit-border-bottom-right-radius: 8px;
-  -moz-box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
+  -moz-border-radius-bottomright: 8px;
-  box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
+  border-bottom-right-radius: 8px;
-  -webkit-box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
+  -webkit-border-bottom-right-radius: 8px;
-  -moz-box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
+  -moz-border-radius-bottomright: 8px;
-  box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
+  border-bottom-right-radius: 8px;
-  -webkit-box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
+  -webkit-border-bottom-right-radius: 8px;
-  -moz-box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
+  -moz-border-radius-bottomright: 8px;
-  box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
+  border-bottom-right-radius: 8px;
-  -webkit-box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
+  -webkit-border-bottom-left-radius: 8px;
-  -moz-box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
+  -moz-border-radius-bottomleft: 8px;
-  box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-bottom-left-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -moz-border-radius-bottomright: 8px;
+  border-bottom-right-radius: 8px;
+  -webkit-box-shadow: 2px 2px 9px #333333;
+  -moz-box-shadow: 2px 2px 9px #333333;
+  box-shadow: 2px 2px 9px #333333;
+  -webkit-box-shadow: 2px 2px 9px #333333;
+  -moz-box-shadow: 2px 2px 9px #333333;
+  box-shadow: 2px 2px 9px #333333;
+  -webkit-box-shadow: 2px 2px 9px #333333;
+  -moz-box-shadow: 2px 2px 9px #333333;
+  box-shadow: 2px 2px 9px #333333;
+  -webkit-box-shadow: 2px 2px 9px #333333;
+  -moz-box-shadow: 2px 2px 9px #333333;
+  box-shadow: 2px 2px 9px #333333;
+  -webkit-box-shadow: 2px 2px 9px #333333;
+  -moz-box-shadow: 2px 2px 9px #333333;
+  box-shadow: 2px 2px 9px #333333;
+  -webkit-box-shadow: 2px 2px 9px #333333;
+  -moz-box-shadow: 2px 2px 9px #333333;
+  box-shadow: 2px 2px 9px #333333;
 }
 div.pageHeader div#news div#newsframe {
  margin-left: 10px;
  margin-right: 10px;
  height: 75px;
  overflow: hidden;
 }
 div.pageHeader div#news div#newsframe iframe {
  width: 290px;
  border: 0px;
  color: #616475;
  background-color: #616475;
 }
 div.pageHeader div#news div.grip {
  width: 310px;
  height: 12px;
  margin-top: 2px;
  cursor: pointer;
 }
 div.pageHeader div#news div.grip div.gripHandler {
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
 }
 div.pageHeader div#news.open div.grip div.gripHandler {
  border-bottom: 5px solid #e9e9ec;
 }
 div.pageHeader div#news.hidden div.grip div.gripHandler {
  border-top: 5px solid #e9e9ec;
 }
 div.pageFooter {
  margin-top: -90px;
  height: 90px;
  clear: both;
 }
 div.pageFooter div.footerWrapper {
  clear: both;
  padding-top: 10px;
 }
 div.pageFooter div.footerWrapper div.footerContent {
  background-color: #eaebe6;
  padding: 20px;
  font-size: 8pt;
 }
 div.pageFooter div.footerWrapper div.footerContent canvas.footerStarIcon {
  width: 40px;
  height: 40px;
  float: left;
 }
 div.pageFooter div.footerWrapper div.footerContent span.copyright {
  padding-left: 10px;
  color: #a0a0a0;
 }
 div.pageFooter div.footerWrapper div.footerContent a {
  padding-left: 50px;
  display: block;
  color: #888888;
  font-weight: bold;
  text-decoration: none;
 }
 div.pageFooter div.footerWrapper div.footerContent span.applicationVersion {
  padding: 8px;
  color: #888888;
  background-color: #d2d2d2;
  position: relative;
  top: -40px;
  float: right;
 }
 /*
 Color list:
 - login box:
                light#ff9955
                dark#ff6622
 - login button:
                regular#dd5500
                hover#773311
 - login translations:
        box: #cc6622;
        not-selected:
                        color:  #ddaa99
                        background:#994422
        selected: #772211;
 */
 html {
  height: 100%;
 }
 body {
  font-family: Helvetica-Neue, Helvetica, Arial, Geneva, sans-serif;
  margin: 0px;
 }
+div.modalDialogMask.userInfoBoxMask {
+  -moz-opacity: 0.0;
+  opacity: .0;
+  filter: alpha(opacity=0);
+  z-index: 19000;
+}
 .reset-margin {
  margin: 0px;
  padding: 0px;
  border: 0px;
 }
 .clear {
  clear: both;
 }
 .hidden_none {
  display: none;
  visibility: hidden;
 }
 .keepTogether {
  display: inline-block;
  white-space: nowrap;
 }
 #mainDiv {
  margin: 0 auto;
 }
 div#loginBox {
  width: 273px;
  z-index: 19000;
  top: -30px;
  right: 30px;
  position: relative;
  float: right;
 }
 div#loginBox div.header {
  height: 25px;
  width: 273px;
  background-color: #ff9b5a;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 20px;
+  -moz-border-radius-topleft: 20px;
+  border-top-left-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
+  -webkit-border-top-right-radius: 20px;
+  -moz-border-radius-topright: 20px;
+  border-top-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
 }
 div#loginBox div.body {
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9b5a), to(#ff6622));
  background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ff9b5a);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9b5a), to(#ff6622));
  background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ff9b5a);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9b5a), to(#ff6622));
  background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ff9b5a);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9b5a), to(#ff6622));
  background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ff9b5a);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9b5a), to(#ff6622));
+  background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ff9b5a);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9b5a), to(#ff6622));
+  background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ff9b5a);
 }
 div#loginBox div.body h4 {
  color: #ffffff;
  font-size: 16pt;
  font-weight: normal;
  padding-left: 20px;
  margin: 0px;
 }
 div#loginBox div.body form.loginForm {
  padding: 5px 20px 0px;
  margin-bottom: 0px;
 }
 div#loginBox div.body form.loginForm label {
  color: #ffffff;
  font-size: 10pt;
  display: block;
  padding-top: 5px;
 }
 div#loginBox div.body form.loginForm label.checkbox {
  display: inline;
 }
 div#loginBox div.body form.loginForm input {
  width: 230px;
  font-size: 14pt;
  color: #333366;
  background-color: #ffffff;
  border: 1px solid #bb4924;
  padding: 2px 5px;
  height: 28px;
 }
 div#loginBox div.body form.loginForm input.checkbox {
  margin: 10px 8px 0px 0px;
  height: auto;
  width: auto;
  border: 0px;
 }
 div#loginBox div.body form.loginForm input.checkbox:hover {
  cursor: pointer;
 }
 div#loginBox div.body form.loginForm input.otp {
  width: 57px;
  display: inline;
  padding-left: 0px;
  padding-right: 0px;
  height: 28px;
  font: 8pt monospace;
 }
 div#loginBox div.body form.loginForm input.submit {
  margin: 0px 45px;
  width: 140px;
  color: #ffffff;
  background-color: #d44100;
  border: 1px solid #bb4924;
  padding: 6px;
  font-size: 12pt;
  height: auto;
 }
 div#loginBox div.body form.loginForm input.submit:hover {
  color: #ffffff;
  background-color: #7e2700;
  cursor: pointer;
 }
 div#loginBox div.body form.loginForm ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
 }
 div#loginBox div.body form.loginForm ul li {
  display: block;
 }
 div#loginBox div.body form.loginForm div.translations {
  margin: 15px -20px;
  background-color: #c87b59;
 }
 div#loginBox div.body form.loginForm div.translations h4 {
  font-size: 9pt;
  padding: 6px 20px 0px;
 }
 div#loginBox div.body form.loginForm div.translations ul {
  margin: 0px;
  padding: 5px 10px 10px;
  margin-bottom: 15px;
 }
 div#loginBox div.body form.loginForm div.translations ul li {
  font-size: 8pt;
  color: #ddaa99;
  background-color: #994422;
  display: inline-block;
  padding: 2px 4px;
  margin: 1px;
 }
 div#loginBox div.body form.loginForm div.translations ul li.selected {
  color: #ffffff;
  background-color: #772211;
 }
 div#loginBox div.body form.loginForm div.translations ul li.selected:hover {
  cursor: default;
 }
 div#loginBox div.body form.loginForm div.translations ul li:hover {
  cursor: pointer;
  color: #ffffff;
 }
 div#loginBox div.footer {
  height: 37px;
  width: 273px;
  background-color: #ff6622;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-left-radius: 20px;
+  -moz-border-radius-bottomleft: 20px;
+  border-bottom-left-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
+  -webkit-border-bottom-right-radius: 20px;
+  -moz-border-radius-bottomright: 20px;
+  border-bottom-right-radius: 20px;
 }
 body.ext-gecko div#loginBox form.loginForm div.translations ul li {
  display: -moz-inline-box;
 }
 div#featurePoints {
  min-width: 400px;
  padding-top: 15px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 330px;
 }
 div#featurePoints table tbody tr td {
  width: 50%;
  vertical-align: top;
 }
 div#featurePoints div.block {
  padding: 10px;
  color: #86858e;
 }
 div#featurePoints div.block h3 {
  font-weight: normal;
  font-size: 12pt;
  margin: 0px;
  padding: 5px 0px;
 }
 div#featurePoints div.block ul {
  margin: 0px;
  margin-left: 20px;
  padding: 0px;
  list-style-position: outside;
 }
 div#featurePoints div.block ul li {
  font-size: 10pt;
  padding: 3px 0px;
 }
 div.activeFeatures {
  float: left;
  margin-left: 20px;
  height: 100px;
 }
 div.activeFeatures a {
  display: inline-block;
  padding-left: 46px;
  color: #ff5906;
  text-decoration: none;
  font-size: 10pt;
 }
 div.activeFeatures a span.payoff {
  display: block;
  font-size: 13pt;
  font-weight: lighter;
  color: #9b9689;
  margin: 0px;
  padding: 0px;
 }
 div.activeFeatures a:hover span.payoff {
  color: #666666;
 }
 div.activeFeatures div.keepTogether a {
  padding-left: 0px;
 }
 div.activeFeatures div.keepTogether div {
  display: inline-block;
  padding-right: 15px;
 }
 div.activeFeatures div.keepTogether canvas {
  width: 46px;
  height: 46px;
  vertical-align: bottom;
 }
 div.activeFeatures div.createAccountLink {
  display: inline-block;
  width: 282;
  height: 65px;
  margin-right: 20px;
 }
 div.activeFeatures div.createAccountLink a.createAccountLink {
  position: relative;
  top: -92px;
  left: 5px;
 }
 div.activeFeatures div.createAccountLink a.createAccountLink span.payoff {
  margin-top: 23px;
  margin-left: 40px;
  font-size: 17pt;
  color: #64626c;
 }
 div.activeFeatures div.createAccountLink a.createAccountLink span.link {
  padding-left: 40px;
  padding-right: 50px;
  padding-bottom: 10px;
  font-size: 12pt;
 }
 div.activeFeatures div.createAccountLink:hover a.createAccountLink span.payoff {
  color: #54535a;
 }
 div.activeFeatures div.createAccountLink:hover a.createAccountLink span.link {
  color: white;
 }
 div.activeFeatures div.createAccountLink canvas {
  width: 282px;
  height: 93px;
 }
 /*
-img.favicon {
+Color list:
-        height: 16px;
+- login box:
-        width: 16px;
+                light#ff9955
-}
+                dark#ff6622
+- login button:
-body.ext-gecko .keepTogether {
+                regular#dd5500
-        display: -moz-inline-box;
+                hover#773311
-}
+- login translations:
+        box: #cc6622;
+        not-selected:
+                        color:  #ddaa99
+                        background:#994422
+        selected: #772211;
+*/
+html {
+  height: 100%;
-div.activeFeatures {
-        float: left;
-        margin-left: 20px;
-        height: 100px;
-}
-div.activeFeatures a {
-        display: inline-block;
-        padding-left: 46px;
-        color: #ff5906;
-        text-decoration: none;
-        font-size: 10pt;
-}
-div.activeFeatures .keepTogether a {
-        padding-left: 0px;
-}
-div.activeFeatures a span.payoff {
-        display: block;
-        font-size: 13pt;
-        font-weight: lighter;
-        color: #9b9689;
-        margin: 0px;
-        padding: 0px;
-}
-// body.ext-gecko div.activeFeatures a {
-        //display: -moz-inline-box;
-// }
-div.activeFeatures a:hover span.payoff {
-        color: #666666;
-}
-div.activeFeatures a:hover span.link {
-        //font-weight: bold;
-}
-div.activeFeatures div.keepTogether div {
-        display: inline-block;
-        padding-right: 15px;
-}
-// body.ext-gecko div.activeFeatures div.keepTogether div {
-        //display: -moz-inline-box;
-// }
-div.activeFeatures div.createAccountLink {
-        display: inline-block;
-        width: 282;
-        height: 65px;
-        //background-image: url(../images/old/home/register.png);
-        margin-right: 20px;
-}
-// body.ext-gecko div.activeFeatures div.createAccountLink {
-        //display: -moz-inline-box;
-// }
-div.activeFeatures a.createAccountLink {
-        position: relative;
-        top: -92px;
-        left: 5px;
-}
-div.activeFeatures div.createAccountLink a.createAccountLink span.payoff {
-        margin-top: 23px;
-        margin-left: 40px;
-        font-size: 17pt;
-        color: #64626c;
-}
-div.activeFeatures div.createAccountLink a.createAccountLink span.link {
-        padding-left: 40px;
-        padding-right: 50px;
-        padding-bottom: 10px;
-        font-size: 12pt;
-}
-div.activeFeatures div.createAccountLink:hover {
-        //background-image: url(../images/old/home/register_selected.png);
-}
-div.activeFeatures div.createAccountLink:hover a.createAccountLink span.payoff {
-        color: #54535a;
-}
-div.activeFeatures div.createAccountLink:hover a.createAccountLink span.link {
-        color: white;
-}
-// div.activeFeatures div.screenshotLink {
-        // background: url(../images/old/home/look.png) no-repeat 0 -3px;
-// }
-// 
-// div.activeFeatures div.offlineLink {
-        // background: url(../images/old/home/download.png) no-repeat 10px -4px; 
-// }
-div.createAccountLink canvas {
-        width: 282px;
-        height: 93px;
-}
-div.activeFeatures .keepTogether canvas {
-        width: 46px;
-        height: 46px;
-        vertical-align: bottom;
-}
-div.pageHeaderAndBody {
-        height: 100%;
-}
-body > div.pageHeaderAndBody {
-        height: auto;
-        min-height: 100%;
-}
-div#pageBody {
-        min-width: 1013px;
-        padding-bottom: 90px;
-}
-div.pageFooter {
-        margin-top: -90px;
-        height: 90px;
-        clear: both;
-}
-div.footerWrapper {
-        clear: both;
-        padding-top: 10px;
-}
-div.footerContent {
-        background-color: #eaebe6;
-        padding: 20px;
-        font-size: 8pt;
-}
-// div.pageFooter div.footerContent div.footerStarIcon {
-div.pageFooter div.footerContent canvas.footerStarIcon {
-        //background-image: url(../images/old/footer/star.png);
-        width: 40px;
-        height: 40px;
-        float: left;
-}
-div.pageFooter div.footerContent span.copyright {
-        padding-left: 10px;
-        color: #a0a0a0;
-}
-div.pageFooter div.footerContent a {
-        padding-left: 50px;
-        display: block;
-        color: #888888;
-        font-weight: bold;
-        text-decoration: none;
-}
-div.pageFooter div.footerContent span.applicationVersion {
-        padding: 8px;
-        color: #888888;
-        background-color: #d2d2d2;
-        position: relative;
-        top: -40px;
-        float: right;
-}
-div#javaScriptAlert div.mask {
-        position: fixed;
-        top: 0px;
-        left: 0px;
-        right: 0px;
-        bottom: 0px;
-        background-color: black;
-        z-index: 1001;
-        -moz-opacity: 0.7;
-        opacity: .70;
-        filter: alpha(opacity=70);
-}
-div#javaScriptAlert div.header {
-        height: 34px;
-        width: 468;
-        background-image: url(../images/old/alert/header.png);
-}
-div#javaScriptAlert div.body {
-        background-image: url(../images/old/alert/body.png);
-        padding: 0px 20px 10px 20px;
-}
-// div#javaScriptAlert div.body div.alert {
-        // padding-left: 100px;
-        // background: url(../images/old/alert/alert.png) no-repeat;
-// }
-// div#javaScriptAlert div.body img.alert {
-div#javaScriptAlert div.body div.alertLogo {
-        float: left;
-        background-image: url(../images/old/alert/alert.png);
-        width: 88px;
-        height: 88px;
-}
-div#javaScriptAlert div.body div.alert {
-        padding-left: 100px;
-}
-div#javaScriptAlert div.footer {
-        height: 34px;
-        width: 468;
-        background-image: url(../images/old/alert/footer.png);
-}
-div#javaScriptAlert div.message {
-        position: relative;
-        top: -150px;
-        z-index: 1002;
-        //left: 100px;
-        //right: 100px;
-        margin-left: auto;
-        margin-right: auto;
-        max-width: 468px;
-}
-div#javaScriptAlert div.message h1 {
-        font-size: 16pt;
-        margin: 0px;
-        color: #ff5930;
-}
-div#javaScriptAlert div.message p {
-        margin-top: 0px;
-        color: #999999;
-}
-div#javaScriptAlert div.message h3 {
-        font-size: 12pt;
-        margin-bottom: 0px;
-        color: #ff5930;
-}
-div#javaScriptAlert div.message h5 {
-        margin: 0px;
-        color: #999999;
-}
-div.LoginProgress {
-        position: relative;
-        left: -190px;
-        top: -100px;
-        width: 380px;
-        height: 200px;
-        //background: url(../images/old/loginProgress/background.png);
-        background-color: #d7d7c0;
-        -webkit-border-radius: 20px;
-        -moz-border-radius: 20px;
-        border-radius: 20px;
-        -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6);
-        -moz-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6);
-        box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6);
-}
-div.LoginProgress div.header {
-        height: 40px;
-}
-div.LoginProgress div.header h3 {
-        font-size: 12pt;
-        font-weight: normal;
-        margin: 0px;
-        color: #777777;
-        padding-top: 13px;
-        padding-left: 18px;
-}
-div.LoginProgress div.body {
-        height: 120px;
-        overflow: auto;
-        padding-left: 20px;
-        padding-right: 20px;
-        background-color: #f1f1e9;
-        //margin-left: 19px;
-        //margin-right: 18px;
-}
-div.LoginProgress div.body div.img {
-        margin: 10px;
-        width: 50px;
-        height: 50px;
-        float: left;
-}
-div.LoginProgress div.body div.img.ALERT {
-        //background-image: url(../images/old/simpleMessageBox/Alert.png);
-        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9955), to(#ff6622), color-stop(1, #333333));
-        background: -moz-linear-gradient(0% 100% 90deg, #ff6622, #ff9955);
-        -webkit-border-radius: 25px;
-        -moz-border-radius: 25px;
-        border-radius: 25px;
-}
-div.LoginProgress div.body div.img.ALERT canvas {
-        width: 50px;
-        height: 50px;
-        //background-image: url(../images/old/simpleMessageBox/excalmationPoint.png);
-}
-div.LoginProgress div.body div.loadingBar {
-        position: relative;
-        top: 51px;
-        left: 60px;
-}
-div.LoginProgress div.body div.errorBox p {
-        color: #787872;
-        padding-top: 20px;
-        padding-left: 80px;
-}
-div.LoginProgress div.footer {
-        margin-left: 19px;
-        margin-right: 18px;
-}
-div.LoginProgress div.footer a {
-        text-decoration: none;
-        text-align: center;
-        color: #787872;
-        display: block;
-        font-weight: bold;
-        font-size: 11pt;
-        width: 100px;
-        margin-top: 11px;
-        margin-left: auto;
-        margin-right: auto;
-}
-div.LoginProgress div.footer div.button.default {
-        text-decoration: underline;
-}
-div.LoginProgress div.buttonArea {
-        text-align: center;
-}
-div.LoginProgress div.button {
-        display: inline-block;
-}
-div.LoginProgress div.footer a:hover {
-        color: #515247;
-}
-div.SimpleMessagePanel {
-        position: relative;
-        left: -225px;
-        top: -70px;
-        width: 450px;
-        height: 140px;
-        //background: url(../images/old/loginProgress/background.png);
-}
-div.SimpleMessagePanel div.header {
-        height: 17px;
-        background: url(../images/old/simpleMessageBox/background_header.png) no-repeat;
-}
-div.SimpleMessagePanel div.body {
-        //height: 120px;
-        //overflow: auto;
-        //margin-left: 19px;
-        //margin-right: 18px;
-        background: url(../images/old/simpleMessageBox/background_body.png) repeat-y;
-        padding-left: 25px;
-        padding-right: 25px;
-        padding-top: 10px;
-}
-div.SimpleMessagePanel div.body h3 {
-        font-size: 14pt;
-        font-weight: normal;
-        margin: 0px;
-        padding-top: 4px;
-        color: #787872;
-}
-div.SimpleMessagePanel div.body div.img {
-        width: 66px;
-        height: 60px;
-        float: left;
-}
-div.SimpleMessagePanel div.body p {
-        margin: 0;
-        font-size: 10pt;
-        font-weight: normal;
-        color: #787872;
-        padding-top: 10px;
-        padding-bottom: 5px;
-        line-height: 1.3;
-}
-div.SimpleMessagePanel div.body div.img.ALERT {
-        background: url(../images/old/simpleMessageBox/Alert.png) no-repeat;
-}
-div.SimpleMessagePanel div.body div.img.INFO {
-        background: url(../images/old/simpleMessageBox/Info.png) no-repeat;
-}
-div.SimpleMessagePanel div.body div.buttonArea {
-        height: 40px;
-        clear: both;
-}
-div.SimpleMessagePanel div.body div.buttonArea > div {
-        float: right;
-        margin-left: 15px;
-        margin-top: 10px;
-}
-div.SimpleMessagePanel div.footer {
-        height: 25px;
-        background: url(../images/old/simpleMessageBox/background_footer.png) no-repeat;
-}
-div.SimpleMessagePanel div.passphrase {
-        padding-left: 65px;
-}
-div.SimpleMessagePanel div.passphrase input {
-        width: 250px;
-        font-size: 14pt;
-        border: 1px solid #bb4924;
-        color: #333366;
-        background-color: white;
-        padding: 2px 5px;
-        height: 28px;
-}
-div.SimpleMessagePanel div.progressBarWrapper {
-        margin-left: 80px;
 }
+body {
-div.button_wrapper {
+  font-family: Helvetica-Neue, Helvetica, Arial, Geneva, sans-serif;
-        height: 32px;
+  margin: 0px;
-        background: url(../images/old/button/default_left.png) no-repeat;
-        cursor: pointer;
 }
-div.button_wrapper.hover {
+div.modalDialogMask.userInfoBoxMask {
-        background: url(../images/old/button/hover_left.png) no-repeat;
+  -moz-opacity: 0.0;
+  opacity: .0;
+  filter: alpha(opacity=0);
+  z-index: 19000;
 }
-div.button_wrapper.clicked {
+.reset-margin {
-        background: url(../images/old/button/clicked_left.png) no-repeat;
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
 }
-div.button_bodyWrapper {
+.clear {
-        height: 32px;
+  clear: both;
-        margin-left: 6px;
-        padding-right: 6px;
-        background: url(../images/old/button/default_main.png) repeat-x right 0;
 }
-div.button_wrapper.hover div.button_bodyWrapper {
+.hidden_none {
-        background: url(../images/old/button/hover_main.png) repeat-x right 0;
+  display: none;
+  visibility: hidden;
 }
-div.button_wrapper.clicked div.button_bodyWrapper {
+.keepTogether {
-        background: url(../images/old/button/clicked_main.png) repeat-x right 0;
+  display: inline-block;
+  white-space: nowrap;
 }
-div.button_body {
+#mainDiv {
-        text-align: center;
+  margin: 0 auto;
-        min-width: 60px;
-        padding: 0px 7px;
-        padding-top: 8px;
 }
-div.button_body span {
+div.userInfoBox {
-        font-size: 11pt;
+  position: absolute;
-        color: white;
+  width: 160px;
+  height: 120px;
+  top: 100px;
+  left: 15px;
+  color: white;
+  background-color: #ff9955;
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9a56), to(#ff6723));
+  background: -moz-linear-gradient(0% 100% 90deg, #ff6723, #ff9a56);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9a56), to(#ff6723));
+  background: -moz-linear-gradient(0% 100% 90deg, #ff6723, #ff9a56);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9a56), to(#ff6723));
+  background: -moz-linear-gradient(0% 100% 90deg, #ff6723, #ff9a56);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9a56), to(#ff6723));
+  background: -moz-linear-gradient(0% 100% 90deg, #ff6723, #ff9a56);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9a56), to(#ff6723));
+  background: -moz-linear-gradient(0% 100% 90deg, #ff6723, #ff9a56);
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9a56), to(#ff6723));
+  background: -moz-linear-gradient(0% 100% 90deg, #ff6723, #ff9a56);
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -webkit-box-shadow: 2px 2px 9px #333333;
+  -moz-box-shadow: 2px 2px 9px #333333;
+  box-shadow: 2px 2px 9px #333333;
+  -webkit-box-shadow: 2px 2px 9px #333333;
+  -moz-box-shadow: 2px 2px 9px #333333;
+  box-shadow: 2px 2px 9px #333333;
+  -webkit-box-shadow: 2px 2px 9px #333333;
+  -moz-box-shadow: 2px 2px 9px #333333;
+  box-shadow: 2px 2px 9px #333333;
+  -webkit-box-shadow: 2px 2px 9px #333333;
+  -moz-box-shadow: 2px 2px 9px #333333;
+  box-shadow: 2px 2px 9px #333333;
+  -webkit-box-shadow: 2px 2px 9px #333333;
+  -moz-box-shadow: 2px 2px 9px #333333;
+  box-shadow: 2px 2px 9px #333333;
+  -webkit-box-shadow: 2px 2px 9px #333333;
+  -moz-box-shadow: 2px 2px 9px #333333;
+  box-shadow: 2px 2px 9px #333333;
 }
-div.button_wrapper.default div.button_body span {
+div.userInfoBox.locked {
-        font-weight: bold;
+  z-index: 19001;
 }
+div.userInfoBox.locked div.header a.lockButton {
-// div.button_footer {
+  background: url(../images/old/lock/locked.png) no-repeat -5px -2px;
-        // margin: 0px;
-        // height: 31px;
-        // width: 6px;
-        // background: green url(../images/old/button/default_right.png) no-repeat;
-// }
-input.entropyLevelIndicator {
-        background: url(../images/old/passwordField/background.png) no-repeat 0 26px;
-}
-div.passwordEntropyWrapper {
-        padding: 0px;
-        border: 1px solid #bb4924;
-        border-top: 0px;
-        margin-bottom: 4px;
-        background-color: white;
-        margin-right: 3px;
-        margin-top: -2;
-}
-div.passwordEntropy {
-        height: 4px;
-        font-size: 1pt;
-        background: url(../images/old/entropyBackground.gif) repeat-x 0 0;
-        line-height: 3px;
 }
+div.userInfoBox.locked div.header a.lockButton:hover {
-div.userInfoBox {
+  background: url(../images/old/lock/locked_hover.png) no-repeat -5px -2px;
-        position: absolute;
-        width: 160px;
-        height: 120px;
-        top: 100px;
-        left: 15px;
-        //background-image: url(../images/old/main/userInfoBackground.png);
-        background-color: #ff9955;
-        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9a56), to(#ff6723), color-stop(1, #333333));
-        background: -moz-linear-gradient(0% 100% 90deg, #ff6723, #ff9a56);
-        -webkit-border-radius: 10px;
-        -moz-border-radius: 10px;
-        border-radius: 10px;
-        -webkit-box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
-        -moz-box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
-        box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
-        color: white;
 }
-div.userInfoBox div.body {
+div.userInfoBox.locked div.body a {
-        padding: 0px 12px;
+  display: none;
 }
 div.userInfoBox div.header {
-        height: 30px;
+  height: 30px;
 }
 div.userInfoBox div.header h1 {
-        font-size: 8pt;
+  font-size: 8pt;
-        font-weight: normal;
+  font-weight: normal;
-        margin: 0px;
+  margin: 0px;
-        padding-top: 12px;
+  padding-top: 12px;
-        padding-left: 12px;
+  padding-left: 12px;
 }
 div.userInfoBox div.header a.lockButton {
-        position: absolute;
+  position: absolute;
-        top: 8px;
+  top: 8px;
-        right: 12px;
+  right: 12px;
-        display: block;
+  display: block;
-        width: 15px;
+  width: 15px;
-        height: 20px;
+  height: 20px;
-        text-decoration: none;
+  text-decoration: none;
-        background: url(../images/old/lock/unlocked.png) no-repeat -5px -2px;
+  background: url(../images/old/lock/unlocked.png) no-repeat -5px -2px;
 }
 div.userInfoBox div.header a.lockButton:hover {
-        background: url(../images/old/lock/unlocked_hover.png) no-repeat -5px -2px;
+  background: url(../images/old/lock/unlocked_hover.png) no-repeat -5px -2px;
-}
-div.userInfoBox.locked {
-        z-index: 19001;
 }
-div.modalDialogMask.userInfoBoxMask {
+div.userInfoBox div.body {
-        -moz-opacity: 0.0;
+  padding: 0px 12px;
-        opacity: .0;
-        filter: alpha(opacity=0);
-        z-index: 19000;
-}
-div.userInfoBox.locked div.header a.lockButton {
-        background: url(../images/old/lock/locked.png) no-repeat -5px -2px;
-}
-div.userInfoBox.locked div.header a.lockButton:hover {
-        background: url(../images/old/lock/locked_hover.png) no-repeat -5px -2px;
 }
 div.userInfoBox div.body h3 {
-        font-size: 11pt;
+  font-size: 11pt;
-        font-weight: bold;
+  font-weight: bold;
-        margin: 0px;
+  margin: 0px;
 }
 div.userInfoBox div.body ul {
-        list-style-image: url(../images/old/main/userInfoBullet.png);
+  font-size: 8pt;
-        font-size: 8pt;
+  padding: 0px;
-        padding: 0px;
+  margin: 4px 0px;
-        margin: 4px 0px;
+  list-style-position: inside;
-        list-style-position: inside;
+  text-shadow: #000000 0 0 0;
-        text-shadow: #000000 0 0 0;
 }
 div.userInfoBox div.body ul li span.number {
-        font-weight: bold;
+  font-weight: bold;
-        padding-right: 3px;
+  padding-right: 3px;
 }
 div.userInfoBox div.body a {
-        display: block;
+  display: block;
-        margin-top: 8
+  margin-top: 8px;
-        px;
+  border-top: 1px solid white;
-        border-top: 1px solid white;
+  padding-top: 6px;
-        padding-top: 6px;
+  font-size: 10pt;
-        font-size: 10pt;
+  font-weight: bold;
-        font-weight: bold;
+  color: #d15a22;
-        color: #d15a22;
+  border-color: #fe9a5f;
-        text-decoration: none;
+  text-decoration: none;
-        border-color: #fe9a5f;
 }
 div.userInfoBox div.body a:hover {
-        color: #8c3b15;
+  color: #8c3b15;
-}
-div.userInfoBox.locked div.body a {
-        display: none;
 }
-div.messageBox {
-        position: absolute;
-        width: 409px;
-        height: 29px;
-        top: 23px;
-        left: 204px;
-        background: url(../images/old/main/messageBoxBackground.png);
-}
-div.messageBox h3 {
-        display: inline-block;
-        color: #342f6b;
-        font-weight: bold;
-        margin: 7px 2px 0px 12px;
-        font-size: 10pt;
-}
-body.ext-gecko div.messageBox h3 {
-        display: -moz-inline-box;
-}
-div.messageBox h1 {
-        color: #342f6b;
-        display: inline;
-        font-weight: normal;
-        margin: 0px 1px;
-        font-size: 9pt;
-}
-div.messageBox a {
-        display: block;
-        width: 20px;
-        height: 20px;
-        float: right;
-        position: absolute;
-        right: 5px;
-        top: 4px;
-        background-image: url(../images/old/main/messageBoxCloseButton.png);
-}
-div.messageBox a:hover {
-        background-image: url(../images/old/main/messageBoxCloseButtonActive.png);
-}
 div.sidePanels {
-        //position: relative;
+  float: left;
-        //top: 110px;
+  margin-top: 106px;
+  margin-left: 20px;
-        float: left;
+  width: 160px;
-        margin-top: 106px;
-        margin-left: 20px;
-        width: 160px;
-}
-div.tabSidePanel {
-        margin-right: -10px;
-        //position: absolute;
-        //width: 250px;
-        //height: 250px;
-        //top: 250px;
-        //left: 10px;
-}
-div.tabSidePanel ul {
-        margin: 0px;
-        padding-left: 0px;
-        list-style-type: none;
-        color: #f78b46;
-}
-div.tabSidePanel ul.mainTabs {
-        margin: 0px;
-}
-div.tabSidePanel ul.mainTabs li {
-        //margin-bottom: 6px;
-}
-div.tabSidePanel ul.mainTabs li a {
-        display: block;
-        line-height: 30px;
-        height: 43px;
-        padding-left: 40px;
-        color: #ff6621;
-        margin: 0px;
-        font-weight: normal;
-        font-size: 13pt;
-        text-decoration: none;
-}
-div.tabSidePanel ul.mainTabs li div.selectionHighlighter {
-        display: none;
-}
-div.tabSidePanel ul.mainTabs li.selected div.selectionHighlighter {
-        display: block;
-        position: absolute;
-        left: 154px;
-        margin-top: -43px;
-}
-// div.tabSidePanel ul.mainTabs li.selected div.selectionHighlighter div.selectionHighlighterIcon {
-        // background-image: url(../images/main/tabs/selectionHighligher.png);
-        // width: 50px;
-        // height: 34px;
-        // float: left;
-        // z-index: 35000;
-        // border: 1px solid red;
-// }
-div.tabSidePanel ul.mainTabs li.selected div.selectionHighlighter a.add {
-        font-size: 14pt;
-        font-weight: bold;
-        position: relative;
-        top: -34px;
-        right: 16px;
-        background: none;
-        color: #c0531b;
-        padding-left: 15px;
-}
-div.tabSidePanel ul.mainTabs li.selected div.selectionHighlighter a.add:hover {
-        color: white;
-}
-div.tabSidePanel ul.mainTabs li.selected div.selectionHighlighter a.add span {
-        font-size: 8pt;
-        vertical-align: middle;
-}
-div.tabSidePanel ul.mainTabs li.selected div.selectionHighlighter a.add h3 {
-        display: inline;
-        padding-left: 5px;
-}
-div.tabSidePanel ul.mainTabs li.cards.selected a {
-        margin-left: -10px;
-        padding-left: 50px;
-        color: white;
-        background: url(../images/old/main/tabs/cardsBackground.png) -9px -14px;
-}
-div.tabSidePanel ul.mainTabs li.cards.selected a:hover {
-        background: url(../images/old/main/tabs/cardsBackground.png) -9px -14px;
-}
-div.tabSidePanel ul.mainTabs li.cards a {
-        background: url(../images/old/main/tabs/cardsBackground.png) -19px -63px;
-}
-div.tabSidePanel ul.mainTabs li.cards a:hover {
-        background: url(../images/old/main/tabs/cardsBackground.png) -19px -110px;
-}
-div.tabSidePanel ul.mainTabs li.directLogins.selected a {
-        margin-left: -10px;
-        padding-left: 50px;
-        color: white;
-        //background: url(../images/old/main/tabs/directLoginBackground.png) 0 -1px;
-        background: url(../images/old/main/tabs/directLoginBackground.png) -9px -14px;
-}
-div.tabSidePanel ul.mainTabs li.directLogins.selected a:hover {
-        color: white;
-        //background: url(../images/old/main/tabs/directLoginBackground.png) 0 -1px;
-        background: url(../images/old/main/tabs/directLoginBackground.png) -9px -14px;
-}
-div.tabSidePanel ul.mainTabs li.directLogins a {
-        //background: url(../images/old/main/tabs/directLoginBackground.png) 0 -34px;
-        background: url(../images/old/main/tabs/directLoginBackground.png) -19px -63px;
-}
-div.tabSidePanel ul.mainTabs li.directLogins a:hover {
-        //background: url(../images/old/main/tabs/directLoginBackground.png) 0 -67px;
-        background: url(../images/old/main/tabs/directLoginBackground.png) -19px -110px;
-}
-div.tabSidePanel ul.otherTabs {
-        margin: 10px 0px;
-}
-div.tabSidePanel ul.otherTabs li {
-        margin-top: -4px;
-}
-div.tabSidePanel ul.otherTabs li div.selectionHighlighter {
-        display: none;
-}
-div.tabSidePanel ul.otherTabs li.selected div.selectionHighlighter {
-        display: block;
-        position: absolute;
-        left: 154px;
-        margin-top: -42px;
-}
-div.tabSidePanel ul.otherTabs a {
-        display: block;
-        line-height: 36px;
-        height: 43px;
-        padding-left: 40px;
-        color: #ff6621;
-        text-decoration: none;
-        //background: url(../images/old/main/tabs/itemsBackground.png) -10px -49px;
-}
-div.tabSidePanel ul.otherTabs li.selected a {
-        //background: url(../images/old/main/tabs/itemsBackground.png) 0 -1px;
-        //background: url(../images/old/main/tabs/itemsBackground.png) 0 -67px;
-        margin-left: -10px;
-        padding-left: 50px;
-        background: url(../images/old/main/tabs/itemsBackground.png) 1px -96px;
-        color: white;
-}
-div.tabSidePanel ul.otherTabs a:hover {
-        //background: url(../images/old/main/tabs/itemsBackground.png) 0 -34px;
-        background: url(../images/old/main/tabs/itemsBackground.png) -10px -49px;
-}
-div.tagSidePanel {
-        //position: relative;
-        //width: 250px;
-        //min-height: 100px;
-        //left: 10px;
-        margin-right: -8px;
-}
-div.tagSidePanel div.header {
-        height: 50px;
-        background-image: url(../images/old/main/tabs/tagsBackground.png);
-}
-div.tagSidePanel div.header h1 {
-        padding-left: 52px;
-        padding-top: 14px;
-        font-size: 14pt;
-        font-weight: normal;
-        color: #888888;
-}
-div.tagSidePanel div.body {
-        background: url(../images/old/main/tabs/tagsBackground.png) -255px;
-}
-div.tagSidePanel div.footer {
-        height: 10px;
-        background: url(../images/old/main/tabs/tagsBackground.png) -510px -40px;
-}
-div.tagSidePanel ul.tags {
-        margin: 0px;
-        list-style-type: none;
-        padding: 0px;
-}
-div.tagSidePanel ul.tags li a {
-        display: block;
-        font-size: 9pt;
-        text-decoration: none;
-        color: #ff6621;
-        padding: 0px 4px 0px 15px;
-        line-height: 20px;
-}
-div.tagSidePanel ul.tags li a:hover {
-        background-color: #dddddd;
-}
-div.tagSidePanel ul.tags li span.tagCardinality {
-        float: right;
-        font-size: 8pt;
-        color: #999999;
-        margin-right: 15px;
-        margin-top: -17px;
-}
-div.tagSidePanel ul.tags li.selected a {
-        background-color: #d4d5cf;
-}
-div.tagSidePanel ul.tags li.selected a:hover {
-        background-color: #d4d5cf;
-}
-div.tagSidePanel ul.tags li.selected a {
-        font-weight: bold;
-}
-div.groupSidePanel {
-        margin-right: -10px;
-        //position: relative;
-        //width: 250px;
-        //min-height: 100px;
-        //left: 10px;
-}
-div.groupSidePanel div.header {
-        height: 50px;
-        background-image: url(../images/old/main/tabs/groupsBackground.png);
-}
-div.groupSidePanel div.header h1 {
-        padding-left: 52px;
-        padding-top: 14px;
-        font-size: 14pt;
-        font-weight: normal;
-        color: white;
-}
-div.groupSidePanel div.header a {
-        float: right;
-        margin-top: -30px;
-        margin-right: 20px;
-        text-decoration: none;
-        color: #666666;
-        font-size: 9pt;
-        line-height: 18px;
-}
-div.groupSidePanel div.header a:hover {
-        color: #444444;
-}
-div.groupSidePanel div.body {
-        background: url(../images/old/main/tabs/groupsBackground.png) -255px;
-}
-div.groupSidePanel div.footer {
-        height: 10px;
-        background: url(../images/old/main/tabs/groupsBackground.png) -510px -39px;
-}
-div.groupSidePanel ul.groups {
-        margin: 0px;
-        list-style-type: none;
-        padding: 0px;
-}
-div.groupSidePanel ul.groups li a {
-        display: block;
-        font-size: 9pt;
-        text-decoration: none;
-        color: white;
-        padding: 0px 4px 0px 15px;
-        line-height: 20px;
-}
-div.groupSidePanel ul.groups li a:hover {
-        background-color: #aaaaaa;
-}
-div.groupSidePanel ul.groups li span.groupCardinality {
-        float: right;
-        font-size: 8pt;
-        color: #dddddd;
-        margin-right: 15px;
-        margin-top: -17px;
-}
-div.groupSidePanel ul.groups li.selected a {
-        background-color: #bbbbbb;
-}
-div.groupSidePanel ul.groups li.selected a:hover {
-        background-color: #bbbbbb;
-}
-div.groupSidePanel ul.groups li.selected a {
-        font-weight: bold;
-}
-div.mainPanels {
-        float: left;
-        width: 833px;
-        margin-top: -38px;
-        //position: relative;
-        //width: 100%;
-        //min-height: 600px;
-        //top: -40px;
-        //left: 250px;
-}
-div.mainFooter {
-        clear: both;
-}
-// div.body div.rows table.rows tbody tr td.delete
-div.delete, div.new {
-        padding-left: 5px;
-        height: 19px;
-}
-div.new span, div.delete span {
-        margin: 0px;
-        padding: 0px;
-        border: 0px;
-        display: inline-block;
-        height: 19px;
-        padding-right: 6px;
-}
-div.new span a, div.delete span a {
-        white-space: nowrap;
-}
-div.delete:hover {
-        background: url(../images/old/delete_background_left.png) no-repeat 0;
-}
-div.delete:hover span {
-        background: url(../images/old/delete_background.png) no-repeat right 0;
-}
-div.new:hover {
-        background: url(../images/old/new_background_left.png) no-repeat 0;
-}
-div.new:hover span {
-        background: url(../images/old/new_background.png) no-repeat right 0;
-}
-// tr.selected div.delete {
-        // background: url(../images/old/delete_background_left.png) no-repeat 0; 
-// }
-// tr.selected div.delete span {
-        // background: url(../images/old/delete_background.png) no-repeat right 0;
-// }
-div.body div.rows table.rows tbody tr td.delete div.delete span a {
-        visibility: hidden;
-        font-size: 8pt;
-        vertical-align: -13px;
-        color: black;
-}
-div.body div.rows table.rows tbody tr.selected td.delete div.delete span a {
-        visibility: visible;
-}
-div.body div.rows table.rows tbody tr:hover td.delete div.delete span a {
-        visibility: visible;
-}
-div.body div.rows table.rows tbody tr:hover td.delete div.delete:hover span a {
-        color: white;
-}
-// div.body div.rows table.rows tbody tr.selected td.delete div.delete span a {
-        // color: white;
-// }
-div.gridComponent table.rows thead tr th {
-        text-align: left;
-        height: 30px;
-        vertical-align: bottom;
-}
-div.gridComponent table.rows thead tr th.sortable span {
-        cursor: pointer;
-}
-div.gridComponent table.rows thead tr th.sortable span a {
-        margin-left: 5px;
-        padding-left: 10px;
-}
-div.gridComponent table.rows thead tr th.directLoginTH {
-        width: 420px;
-}
-div.gridComponent table.rows thead tr th.latestUpdateTH {
-        width: 100px;
-}
-div.gridComponent table.rows thead tr th.commandsTH {
-        width: 150px;
-}
-div.gridComponent table.rows thead a {
-        text-decoration: none;
-}
-div.gridComponent table.rows thead span {
-        font-weight: normal;
-        font-size: 9pt;
-        line-height: 20px;
-}
-div.gridComponent div.header div.headerSlot {
-        float: right;
-}
-div.mainPanels div.gridComponent div.body table.rows td.favicon {
-        padding-left: 25px;
-}
-div.mainPanels div.gridComponent div.body table.rows td.favicon img {
-        width: 16px;
-        height: 16px;
-        border: 0px;
-}
-div.gridComponent th.directLoginTH span {
-        margin-left: 7px;
-}
-td.card_directLogins div {
-        display: inline-table;
-}
-td.card_directLogins span {
-        display: inline-block;
-}
-// td.card_directLogins a {
-        // display: inline-table;
-        // height: 19px;
-// 
-        // padding-right: 7px;
-// }
-// 
-// td.card_directLogins a:hover {
-        // background: url(../images/old/directLink_background.png) right 0;
-// }
-div.card_directLogin {
-        display: inline-block;
-        height: 19px;
-        padding-left: 7px;
-}
-div.card_directLogin_ellipses span {
-        padding-bottom: 2px;
-}
-div.card_directLogin div.card_directLogin_body {
-        display: inline-block;
-        height: 19px;
-        padding-right: 8px;
-        background-position: left;
-}
-div.card_directLogin div.card_directLogin_body a {
-        vertical-align: -14px;
-}
-// div.card_directLogin:hover {
-div.card_directLogin:hover {
-        background: url(../images/old/directLink_background_left.png) no-repeat 0 0;
-}
-// div.card_directLogin:hover div {
-div.card_directLogin:hover div.card_directLogin_body {
-        background: url(../images/old/directLink_background.png) right 0;
-}
-div.DirectLoginListPopup {
-        position: absolute;
-        width: 184px;
-}
-div.DirectLoginListPopup div.DirectLoginListPopup_body {
-        background-image: url(../images/old/directLogins_background.png);
-        padding-top: 8px;
-}
-div.DirectLoginListPopup div.DirectLoginListPopup_footer {
-        height: 8px;
-        background-image: url(../images/old/directLogins_background_bottom.png);
-}
-div.DirectLoginListPopup div.DirectLoginListPopup_body ul {
-        margin: 0px;
-        padding-left: 13px;
-        list-style: none;
-}
-div.DirectLoginListPopup div.DirectLoginListPopup_body ul li {
-        padding-top: 4px;
-        height: 20px;
-        padding-right: 10px;
-        white-space: nowrap;
-}
-div.DirectLoginListPopup div.DirectLoginListPopup_body ul li div {
-        padding-right: 10px;
-        overflow: hidden;
-}
-div.DirectLoginListPopup div.DirectLoginListPopup_body ul li img.favicon {
-        padding-left: 9px;
-        padding-right: 5px;
-}
-div.DirectLoginListPopup div.DirectLoginListPopup_body ul li a {
-        text-decoration: none;
-        color: white;
-        font-weight: normal;
-        font-size: 10pt;
-        vertical-align: 3px;
-        white-space: nowrap;
-        padding-right: 8px;
-}
-div.DirectLoginListPopup div.DirectLoginListPopup_body ul li:hover {
-        //background-color: #a5a696;
-        //background-color: #7b7d70;
-        background-color: rgba(123, 125, 112, 0.5);
-}
-div.DirectLoginListPopup div.DirectLoginListPopup_body ul li:hover a {
-        background: url(../images/old/directLink_no_background.png) right;
-}
-div.mainPanels div.gridComponent div.header {
-        //height: 90px;
-        //background: url(../images/old/main/blocks/cardGridBackground.png) no-repeat;
-        background: url(../images/old/main/blocks/cardGridBackground.png) no-repeat;
-        padding-left: 40px;
-        padding-right: 40px;
-        padding-top: 20px;
-        padding-bottom: 10px;
-}
-div.mainPanels div.gridComponent div.header form.search {
-        height: 32px;
-        margin: 0px;
-}
-div.mainPanels div.gridComponent div.header form.search div.clearSearchButton {
-        position: absolute;
-        margin-left: 192px;
-        width: 22px;
-        height: 22px;
-        margin-top: 6px;
-        background: url(../images/old/filter/clearFilter_notSelected.png) no-repeat;
-}
-div.mainPanels div.gridComponent div.header form.search div.clearSearchButton:hover {
-        background: url(../images/old/filter/clearFilter_selected.png) no-repeat;
-        cursor: pointer;
-}
-div.mainPanels div.gridComponent div.header form.search div.search {
-        display: block;
-        float: left;
-        width: 217px;
-}
-div.mainPanels div.gridComponent div.header form.search input.search {
-        border: 1px solid #76786a;
-        color: #666666;
-        font-size: 12pt;
-        width: 100%;
-        padding: 4px;
-        padding-left: 24px;
-        padding-right: 26px;
-        background: #e8ecde url(../images/old/main/grid/search.png) no-repeat 2px 4px;
-}
-div.mainPanels div.gridComponent div.header form.search input.search.disabled {
-        disabled: disabled;
-}
-div.mainPanels div.gridComponent div.header form.search input.search.running {
-        background: #e8ecde url(../images/old/main/grid/running_search.gif) no-repeat 4px 5px;
-}
-div.mainPanels div.gridComponent div.body {
-        clear: both;
-        background: url(../images/old/main/blocks/cardGridBackground.png) repeat-y -836px;
-}
-div.mainPanels div.gridComponent div.footer {
-        background: url(../images/old/main/blocks/cardGridBackground.png) 834px -28px;
-        height: 35px;
-}
-div.mainPanels div.gridComponent div.body h1 {
-        margin: 0px;
-}
-div.mainPanels div.gridComponent div.body div.rows {
-        margin-left: 9px;
-        margin-right: 6px;
-        min-height: 582px;
-        background: url(../images/old/main/blocks/cardGridStripes.png) 0 7px;
-}
-div.mainPanels div.gridComponent.noRows div.body table.rows thead, div.mainPanels div.gridComponent.empty div.body table.rows thead {
-        visibility: hidden;
-}
-div.mainPanels div.gridComponent.empty div.body div.rows {
-        background: #eaebe6 url(../images/old/lock/background_star.png) no-repeat center center;
-}
-div.mainPanels div.gridComponent.noRows div.body div.rows {
-        background: #eaebe6;
-}
-div.mainPanels div.gridComponent div.body table.rows {
-        display: block;
-        width: 100%;
-}
-div.mainPanels div.gridComponent div.body table.rows tbody tr.odd.selected {
-        background-color: #a5a696;
-}
-div.mainPanels div.gridComponent div.body table.rows tbody tr.even.selected {
-        background-color: #a5a696;
-}
-div.mainPanels div.gridComponent div.body table.rows tbody tr.selected td a {
-        color: #f3f4eb;
-}
-div.mainPanels div.gridComponent div.body table.rows tbody tr.odd {
-        background-color: #d4d5cf;
-}
-div.mainPanels div.gridComponent div.body table.rows tbody tr.even {
-        background-color: #eaebe6;
-}
-div.mainPanels div.gridComponent div.body table.rows tbody tr.odd:hover {
-        background-color: #a5a696;
-}
-div.mainPanels div.gridComponent div.body table.rows tbody tr.even:hover {
-        background-color: #a5a696;
-}
-div.mainPanels div.gridComponent div.body table.rows tbody tr td {
-        height: 23px;
-        max-height: 23px;
-        //white-space: nowrap;
-        //overflow: hidden;
-}
-div.mainPanels div.gridComponent div.body table.rows tbody tr td span {
-        color: #828479;
-        font-size: 10pt;
-}
-div.mainPanels div.gridComponent div.body table.rows tbody tr td a {
-        color: #828479;
-        font-size: 10pt;
-        text-decoration: none;
-}
-div.mainPanels div.gridComponent div.body table.rows tbody tr:hover td span {
-        color: #f3f4eb;
-}
-div.mainPanels div.gridComponent div.body table.rows tbody tr.selected td span {
-        color: #f3f4eb;
-}
-div.mainPanels div.gridComponent div.body table.rows tbody tr:hover td a {
-        color: #f3f4eb;
-}
-div.mainPanels div.gridComponent div.body table.rows tbody tr td.title a {
-        font-weight: bold;
-}
-div.mainPanels div.gridComponent div.body table.rows tbody tr td img.favicon {
-        float: right;
-        padding-right: 6px;
-}
-div.gridComponent table.rows thead img {
-        padding-left: 10px;
-        vertical-align: middle;
-}
-div.gridComponent table.rows thead tr th {
-        background-color: #eaebe6;
-        border-bottom: 1px solid #b3b4af;
-}
-div.gridComponent table.rows thead span {
-        color: #8c8f7e;
-}
-div.gridComponent table.rows thead tr th.unsorted span.sortable a {
-        background-image: url(../images/old/main/grid/unsorted.png);
-}
-div.gridComponent table.rows thead tr th.descending span.sortable a {
-        background-image: url(../images/old/main/grid/descending.png);
-}
-div.gridComponent table.rows thead tr th.ascending span.sortable a {
-        background-image: url(../images/old/main/grid/ascending.png);
-}
-div.gridComponent table.rows thead tr th.faviconTH {
-        width: 53px;
-}
-div.gridComponent table.rows thead tr th.titleTH {
-        width: 200px;
-        max-width: 200px;
-}
-div.gridComponent table.rows thead tr th.deleteTH {
-        width: 50px;
-}
-div.mainPanels div.directLoginGrid div.header form.search {
-        background: url(../images/old/main/blocks/directLoginGridBackground.png) no-repeat;
-        padding-left: 40px;
-        padding-top: 20px;
-        padding-bottom: 10px;
-        margin: 0px;
-}
-div.mainPanels div.directLoginGrid div.header form.search input.search {
-        border: 1px solid #76786a;
-        color: #666666;
-        font-size: 12pt;
-        padding: 4px;
-        background-color: #e8ecde;
-}
-div.mainPanels div.directLoginGrid div.header form.search input.searchButton {
-        background-color: #858877;
-        border: 0px;
-        color: white;
-        font-size: 10pt;
-}
-div.mainPanels div.directLoginGrid div.body {
-        background: url(../images/old/main/blocks/directLoginGridBackground.png) repeat-y -836px;
-}
-div.mainPanels div.directLoginGrid div.footer {
-        background: url(../images/old/main/blocks/directLoginGridBackground.png) 834px -28px;
-        height: 35px;
-}
-div.mainPanels div.directLoginGrid div.body h1 {
-        margin: 0px;
-}
-div.mainPanels div.directLoginGrid div.body div.rows {
-        margin-left: 9px;
-        margin-right: 6px;
-        min-height: 582px;
-        background: url(../images/old/main/blocks/directLoginGridStripes.png) 0 7px;
-}
-div.mainPanels div.directLoginGrid div.body table.rows {
-        display: block;
-        width: 100%;
-}
-div.mainPanels div.directLoginGrid div.body table.rows img {
-        border: 0px;
-}
-div.mainPanels div.directLoginGrid div.body table.rows tbody tr.even {
-        background-color: #787666;
-}
-div.mainPanels div.directLoginGrid div.body table.rows tbody tr.odd {
-        background-color: #646351;
-}
-div.mainPanels div.directLoginGrid div.body table.rows tbody tr.odd:hover {
-        background-color: #d1d4c6;
-}
-div.mainPanels div.directLoginGrid div.body table.rows tbody tr.even:hover {
-        background-color: #d1d4c6;
-}
-div.mainPanels div.directLoginGrid div.body table.rows tbody tr td {
-        height: 23px;
-        color: #e1e0d6;
-        font-size: 10pt;
-}
-div.mainPanels div.directLoginGrid div.body table.rows tbody tr:hover td {
-        color: #777867;
-}
-div.mainPanels div.directLoginGrid div.body table.rows tbody tr td.title  {
-        font-weight: bold;
-}
-div.directLoginGrid div.body table.rows tbody tr a {
-        color: #e1e0d6;
-        text-decoration: none;
-}
-div.directLoginGrid div.body table.rows tbody tr:hover a {
-        color: #777867;
-}
-div.directLogin_directLogin {
-        display: inline-block;
-        height: 19px;
-        padding-left: 7px;
-}
-div.directLogin_directLogin div.directLogin_directLogin_body {
-        display: inline-block;
-        height: 19px;
-        padding-right: 8px;
-        background-position: left;
-}
-div.directLogin_directLogin div.directLogin_directLogin_body a {
-        vertical-align: -14px;
-}
-div.directLogin_directLogin:hover {
-        background: url(../images/old/directLink_background_left.png) no-repeat 0 0;
-}
-div.directLogin_directLogin:hover div.directLogin_directLogin_body {
-        background: url(../images/old/directLink_background.png) right 0;
-}
-table.rows tbody tr td div.directLogin_directLogin:hover div.directLogin_directLogin_body a {
-        color: #f3f4eb;
-}
-div.directLoginGrid table.rows thead span {
-        color: #e1e0d6;
-}
-div.directLoginGrid table.rows thead tr th {
-        background-color: #787762;
-        border-bottom: 1px solid #999883;
-}
-div.directLoginGrid table.rows thead tr th.faviconTH {
-        min-width: 53px;
-        width: 53px;
-}
-div.directLoginGrid table.rows thead tr th.titleTH {
-        min-width: 250px;
-        width: 250px;
-}
-div.directLoginGrid table.rows thead tr th.titleTH span {
-        margin-left: 7px;
-}
-div.directLoginGrid table.rows thead tr th.strengthTH {
-        width: 100px;
-}
-div.directLoginGrid table.rows thead tr th.cardTitleTH {
-        width: 400px;
-}
-div.directLoginGrid table.rows thead tr th.bookmarkableLinkTH {
-        width: 64px;
-}
-div.directLoginGrid table.rows thead tr th.deleteTH {
-        width: 50px;
-}
-div.directLoginGrid table.rows thead tr th.latestAccessTH {
-        width: 100px;
-}
-div.directLoginGrid table.rows thead tr th.commandsTH {
-        width: 100px;
-}
-div.directLoginGrid table.rows thead img {
-        padding-left: 10px;
-        vertical-align: middle;
-}
-div.directLoginGrid table.rows thead tr th.unsorted span.sortable a {
-        background: url(../images/old/main/grid/directLogins/unsorted.png) no-repeat;
-}
-div.directLoginGrid table.rows thead tr th.descending span.sortable a {
-        background: url(../images/old/main/grid/directLogins/descending.png) no-repeat;
-}
-div.directLoginGrid table.rows thead tr th.ascending span.sortable a {
-        background: url(../images/old/main/grid/directLogins/ascending.png) no-repeat;
-}
-div.subPanelTabs ul {
-        margin: 0px;
-        margin-right: 7px;
-        padding: 0px;
-}
-div.subPanelTabs ul li {
-        display: inline-block;
-        vertical-align: middle;
-        //width: 130px;
-        height: 50px;
-        //border-right: 1px solid #a5a79c;
-        //border-bottom: 1px solid #a5a79c;
-        border-right: 1px solid #eef0e3;
-        border-bottom: 1px solid #d5d5bc;
-}
-div.subPanelTabs ul li.first:hover {
-        //background: url(../images/old/main/blocks/otherPanelBackground_selected.png) no-repeat -9px -5px;
-}
-div.subPanelTabs ul li:hover {
-        //background: url(../images/old/main/blocks/otherPanelBackground_selected.png) no-repeat -45px -5px;
-        border-right: 1px solid #d5d5bc;
-        background-color: #eef0e3;
-}
-div.subPanelTabs ul li a {
-        color: #787872;
-        text-decoration: none;
-        display: block;
-        text-align: center;
-        padding-top: 15px;
-        padding-left: 20px;
-        padding-right: 20px;
-        font-size: 13pt;
-}
-div.subPanelTabs ul li.first {
-        //background: url(../images/old/main/blocks/otherPanelBackground_selected.png) no-repeat -9px -5px;
-        -webkit-border-top-left-radius: 20px;
-        -moz-border-radius-topleft: 20px;
-        border-top-left-radius: 20px;
-}
-div.subPanelTabs ul li.selected {
-        //background: url(../images/old/main/blocks/otherPanelBackground_selected.png) no-repeat -45px -5px;
-        background-color: #eef0e3;
-        border-bottom: 1px solid #eef0e3;
-        border-right: 1px solid #d5d5bc;
-}
-div.subPanelTabs ul li.selected:hover {
-        border-right: 1px solid #d5d5bc;
-}
-div.subPanelTabs ul li.selected a {
-        color: #444440;
-}
-div.subPanelContent {
-        padding-top: 20px;
-        padding-left: 30px;
-        padding-right: 30px;
-        min-height: 280px;
-        color: #787872;
-        margin: 0px 6px 0 9px;
-}
-div.subPanelContent ul {
-        margin: 0px;
-        padding: 0px;
-        list-style-type: none;
-}
-div.subPanelContent ul li.selected {
-        display: block;
-}
-div.subPanelContent ul li {
-        display: none;
-}
-div.subPanelContent h3 {
-        margin: 0px;
-        border: 0px;
-        padding: 0px;
-}
-div.mainPanels div.otherPanel {
-        margin: 5px 10px;
-        background-color: #eef0e3;
-        -webkit-border-radius: 20px;
-        -moz-border-radius: 20px;
-        border-radius: 20px;
-        -webkit-box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
-        -moz-box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
-        box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.6);
-}
-div.mainPanels div.otherPanel div.header {
-        //background: url(../images/old/main/blocks/otherPanelBackground.png) no-repeat;
-        //height: 90px;
-        background-color: #d5d5bc;
-        //padding-left: 9px;
-        //padding-top: 5px;
-        margin: 0px;
-        margin-bottom: 0px;
-        -webkit-border-top-left-radius: 20px;
-        -webkit-border-top-right-radius: 20px;
-        -moz-border-radius-topleft: 20px;
-        -moz-border-radius-topright: 20px;
-        border-top-left-radius: 20px;
-        border-top-right-radius: 20px;
-}
-div.mainPanels div.otherPanel div.body {
-        //background: url(../images/old/main/blocks/otherPanelBackground.png) repeat-y -836px;
-        margin: 0px;
-        border: 0px;
-        padding: 0px;
-}
-div.mainPanels div.otherPanel div.footer {
-        //background: url(../images/old/main/blocks/otherPanelBackground.png) 834px -18px;
-        height: 45px;
-}
-div.mainPanels div.otherPanel div.body h1 {
-        margin: 0px;
-}
-form.changePassphrase div.currentCredentials, form.changePassphrase div.newPassphrase {
-        float: left;
-        padding: 10px 20px;
-}
-form.changePassphrase label {
-        display: inline-block;
-        width: 150px;
-}
-form.changePassphrase div.confirm {
-        clear: both;
-        padding: 10px 20px;
-}
-form.changePassphrase div.confirm label {
-        width: 500px;
-}
-div.accountPanel h3.manageOTP {
-        margin-top: 20px;
-        margin-left: -20px;
-        padding-top: 10px;
-        padding-left: 20px;
-        border-top: 1px solid #aaaaaa;
-}
-div#modalDialogMask, div.modalDialogMask {
-        z-index: 20000;
-        //position: absolute;
-        position: fixed;
-        top: 0;
-        left: 0;
-        -moz-opacity: 0.5;
-        opacity: .50;
-        filter: alpha(opacity=50);
-        //background-color: #cccccc;
-        background-color: #000000;
-        width: 100%;
-        height: 100%;
-        zoom: 1;
-}
-div#modalDialogFrame, div.modalDialogFrame {
-        position: absolute;
-        //border: 1px solid white;
-        -moz-opacity: 0.5;
-        opacity: .50;
-        filter: alpha(opacity=50);
-        background-color: #333333;
-        z-index: 20001;
-        -webkit-border-radius: 20px;
-        -moz-border-radius: 20px;
-        border-radius: 20px;
-}
-div#modalDialog, div.modalDialog {
-        z-index: 20001;
-}
-// div#modalDialog.scrollable,
-div.modalDialog.scrollable {
-        position: absolute;
-        top: 0;
-        left: 50%;
-}
-// div#modalDialog.fixed,
-div.modalDialog.fixed {
-        position: fixed;
-        top: 40%;
-        left: 50%;
-}
-div#modalDialog div, div.modalDialog div {
-        z-index: 20002;
-        list-style-type: circle;
-}
-div.modalDialogMask.simpleMessagePanelMask {
-        z-index: 20010;
-}
-div.modalDialogFrame.simpleMessagePanelMask {
-        z-index: 20011;
-}
-div.modalDialog.simpleMessagePanelMask {
-        z-index: 20011;
-}
-div.modalDialog.simpleMessagePanelMask div {
-        z-index: 20012;
-}
-div.bookmarklet div.bookmarklet_link {
-        //padding-top: 5px;
-        //padding-left: 4px;
-        //padding-right: 3px;
-        
-        //float: right;
-        //margin-top: 12px;
-        //margin-right: 13px;
-        height: 34px;
-}
-div.bookmarklet div.bookmarklet_link a {
-        color: #838975;
-        text-decoration: none;
-        font-weight: bold;
-        font-size: 10pt;
-        //display: block;
-        //text-align: right;
-        //padding-top: 7px;
-        //padding-right: 11px;
-        //padding-bottom: 6px;
-}
-div.bookmarklet div.bookmarklet_link a div.icon {
-        background: url(../images/old/bookmarklet/placeholder_icon.png) no-repeat 0 0;
-        float: left;
-        width: 34px;
-        height: 34px;
-}
-div.bookmarklet div.bookmarklet_link a:hover div.icon {
-        background: url(../images/old/bookmarklet/placeholder_selected_icon.png) no-repeat 0 0;
-}
-div.bookmarklet div.bookmarklet_link a div.text {
-        display: block;
-        float: right;
-        background: url(../images/old/bookmarklet/placeholder.png) no-repeat right 0;
-        white-space: nowrap;
-        height: 34px;
-}
-div.bookmarklet div.bookmarklet_link a:hover div.text {
-        background: url(../images/old/bookmarklet/placeholder_selected.png) no-repeat right 0;
-}
-div.bookmarklet div.bookmarklet_link a div.text span {
-        display: block;
-        padding-top: 10px;
-        padding-right: 10px;
-        padding-left: 6px;
-        clear: both;
-}
-div.tooltip {
-        position: absolute;
-        z-index: 30001;
-}
-div.tooltip div.tooltip_body {
-        position: absolute;
-}
-div.tooltip div.tooltip_arrow {
-        position: absolute;
-}
-div.tooltip.BELOW div.tooltip_arrow {
-        background: url(../images/old/tooltips/top_arrow.png) no-repeat;
-}
-div.tooltip.ABOVE div.tooltip_arrow {
-        background: url(../images/old/tooltips/bottom_arrow.png) no-repeat;
-}
-div.tooltip.LEFT div.tooltip_arrow {
-        background: url(../images/old/tooltips/right_arrow.png) no-repeat;
-}
-div.tooltip.RIGHT div.tooltip_arrow {
-        //margin-top: 7px;
-        background: url(../images/old/tooltips/left_arrow.png) no-repeat;
-}
-div.tooltip.RIGHT div.tooltip_body {
-        //padding-left: 13px;
-}
-div.tooltip div.tooltip_body div.tooltip_text {
-        width: 171px;
-        background: url(../images/old/tooltips/body.png) no-repeat center top;
-}
-div.tooltip.LEFT div.tooltip_body div.tooltip_text, div.tooltip.RIGHT div.tooltip_body div.tooltip_text {
-        min-height: 45px;
-}
-div.tooltip div.tooltip_body span {
-        display: block;
-        padding: 10px;
-        padding-bottom: 4px;
-        font-size: 10pt;
-        color: white;
-}
-div.tooltip div.tooltip_footer {
-        height: 7px;
-        background: url(../images/old/tooltips/body_bottom.png) no-repeat;
-}
-// --------------------------------------- 
-div.mainDialog {
-        position: relative;
-        left: -263px;
-        width: 525px;
-        height: 325px;
-}
-div.scrollable div.mainDialog {
-        top: 0px;
-}
-div.fixed div.mainDialog {
-        top: -118px;
-}
-div.mainDialog div.header {
-        height: 55px;
-        background: url(../images/old/cardDialog/background_header.png) no-repeat;
-}
-div.mainDialog div.header div.title {
-        padding-top: 16px;
-        padding-left: 20px;
-        padding-right: 20px;
-}
-div.mainDialog div.header div.title input {
-        width: 100%;
-        display: block;
-        font-size: 16pt;
-        margin: 0px;
-        border: 0px;
-        padding: 3px 10px;
-        color: #787872;
-        border: 1px solid #cccec0;
-        background-color: #cccec0;
-}
-div.mainDialog div.header div.title h3 {
-        display: block;
-        font-size: 16pt;
-        color: #787872;
-        margin: 0px;
-        border: 0px;
-        padding: 3px 10px;
-}
-div.mainDialog div.header div.title.selectedField input, div.mainDialog div.header div.title:hover input {
-        border: 1px solid #515247;
-        background-color: #b5b7ab;
-}
-div.mainDialog div.header div.title.disabled:hover input {
-        border: 1px solid #cccec0;
-        background-color: #cccec0;
-}
-div.mainDialog div.body {
-        padding-top: 0px;
-        padding-left: 10px;
-        padding-right: 9px;
-        min-height: 200px;
-        background: url(../images/old/cardDialog/background_body.png) repeat-y;
-}
-div.mainDialog div.body div.mask {
-        display: none;
-}
-div.mainDialog.loading div.body div.mask {
-        display: block;
-        position: absolute;
-        top: 55px;
-        left: 10px;
-        right: 9px;
-        bottom: 70px;
-        z-index: 1001;
-        background-color: white;
-        padding-left: 146px;
-        padding-right: 146px;
-        padding-top: 70px;
-}
-div.mainDialog.loading div.body .tabPanels {
-        display: none;
-}
-div.mainDialog.loading div.body div.mask h3.progressDescription {
-        margin: 0px;
-        text-align: center;
-        padding-bottom: 10px;
-        color: #cccec0;
-        font-size: 14pt;
-        font-weight: normal;
-}
-div.loadingBar {
-        height: 22px;
-        width: 214px;
-        background: url(../images/old/loading/loadingBar.gif) no-repeat center top;
-}
-div.loadingBar div.loadingBarProgressBox {
-        padding: 2px;
-}
-div.loadingBar div.loadingBarProgress {
-        height: 18px;
-        width: 0%;
-        //background-repeat: no-repeat;
-        background-color: rgba(248, 79, 0, 0.6);
-        -webkit-border-radius: 9px;
-        -moz-border-radius: 9px;
-        border-radius: 9px;
-}
-div.mainDialog div.body div ul {
-        padding: 0px;
-        clear: both;
-        margin: 0px;
-        list-style-type: none;
-}
-div.mainDialog div.body div.tabs {
-        height: 20px;
-}
-div.mainDialog div.body div.tabs ul.tabs {
-        height: 33px;
-        //border-bottom: 1px solid #515247;
-        //background: #cccec0 url(../images/old/cardDialog/tabs_shadow.png) repeat-x 0 -5px;
-        background: url(../images/old/cardDialog/tabs_background.png) repeat-x;
-}
-div.mainDialog div.body div.tabs ul.tabs li {
-        //width: 150px;
-        height: 32px;
-        font-size: 11pt;
-        text-align: center;
-        border-right: 1px solid #515247;
-        float: left;
-        color: #787872;
-        border-bottom: 1px solid #515247;
-        background: #cccec0 url(../images/old/cardDialog/tabs_shadow.png) repeat-x 0 -5px;
-        cursor: pointer;
-}
-div.mainDialog div.body div.tabs ul.tabs li div {
-        display: none;
-}
-div.mainDialog div.body div.tabs ul.tabs li span {
-        display: block;
-        padding-top: 9px;
-        padding-bottom: 6px;
-        padding-left: 40px;
-        padding-right: 40px;
-}
-div.mainDialog div.body div.tabs ul.tabs li:hover {
-        color: #515247;
-}
-div.mainDialog div.body div.tabs ul.tabs li.disabled:hover {
-        color: #787872;
-        cursor: default;
-}
-div.mainDialog div.body div.tabs ul.tabs li.selected {
-        color: #515247;
-        background-color: #f1f2e9;
-        border-bottom: 1px solid #f1f2e9;
-        cursor: default;
-}
-div.mainDialog div.body div.tabs ul.tabs li.selected.disabled:hover {
-        color: #515247;
-}
-div.mainDialog div.body div.tabs ul.tabs li.selected div.backToDirectLoginList {
-        position: absolute;
-        display: block;
-        top: 63px;
-        left: 140;
-        width: 20px;
-}
-div.mainDialog div.body div.tabs ul.tabs li.selected div.addDirectLoginButton {
-        position: absolute;
-        display: block;
-        top: 63px;
-        left: 265px;
-        width: 20px;
-}
-div.mainDialog div.body div.tabs ul.tabs li.selected div span {
-        padding: 0px;
-        margin: 0px;
-}
-div.mainDialog div.body div.tabs ul.tabs li.selected div:hover {
-        cursor: pointer;
-}
-div.mainDialog div.body .tabPanels {
-        clear: both;
-}
-div.mainDialog div.body ul.tabPanels li.tabPanel {
-        display: none;
-}
-div.mainDialog div.body ul.tabPanels li.tabPanel.selected {
-        display: block;
-}
-div.mainDialog div.body ul.tabPanels li.tabPanel.selected h2 {
-        margin: 0px;
-        text-align: center;
-        padding-top: 50px;
-        color: #787872;
-}
-div.mainDialog div.body ul.tabPanels li.tabPanel.selected div.wizardStepDescription {
-        margin: 0px 20px 10px;
-        font-size: 10pt;
-        color: b0b0b0;
-        font-style: italic;
-        text-align: center;
-}
-div.mainDialog div.footer {
-        height: 70px;
-        background: url(../images/old/cardDialog/background_footer.png) no-repeat 0 -14px;
-}
-div.mainDialog div.footer div.buttonArea {
-        padding-left: 40px;
-        padding-right: 40px;
-        padding-top: 15px;
-}
-div.mainDialog div.footer div.buttonArea div {
-        padding-left: 20px;
-        padding-right: 20px;
-        float: left;
-        font-weight: bold;
-        color: #787872;
-}
-div.mainDialog div.footer div.buttonArea div.disabled {
-        color: #b1b1a8;
-}
-div.mainDialog div.footer div.buttonArea div.disabled:hover {
-        color: #b1b1a8;
-        cursor: default;
-}
-div.mainDialog div.footer div.buttonArea div:hover {
-        color: #515247;
-        cursor: pointer;
-}
-div.mainDialog div.footer div.buttonArea div.save {
-        float: right;
-}
-div.addDirectLoginButton {
-        height: 20px;
-                width: 20px;
-        background: url(../images/old/cardDialog/addDirectLogin_disabled_background.png) no-repeat -9px -9px;
-        color: white;
-        font-weight: bold;
-}
-div.addDirectLoginButton span {
-        display: block;
-        height: 20px;
-                width: 20px;
-}
-div.addDirectLoginButton:hover {
-        background: url(../images/old/cardDialog/addDirectLogin_background.png) no-repeat -9px -9px;
-}
-div.directLoginsComponentContainer {
-        overflow: hidden;
-        //background-color: green;
-}
-div.CardDialog div.directLogins {
-        //background-color: yellow;
-        padding-top: 2px;
-}
-div.CardDialog div.addNewDirectLoginSplash {
-        margin: 0px 80px;
-}
-div.CardDialog div.addNewDirectLoginSplash h3 {
-        color: #aaaaaa;
-        text-align: center;
-        font-weight: normal;
-        font-size: 11pt;
-}
-div.CardDialog div.addNewDirectLoginSplash a {
-        display: block;
-        text-decoration: none;
-        margin-left: auto;
-        margin-right: auto;
-        width: 190px;
-        //color: #787878;
-        color: rgba(255, 98, 6, 0.75);
-        text-transform: uppercase;
-        background: url(../images/old/cardDialog/addDirectLogin_disabled_background.png) no-repeat right;
-}
-div.CardDialog div.addNewDirectLoginSplash a span {
-        text-align: center;
-}
-div.CardDialog div.addNewDirectLoginSplash a:hover {
-        color: #ff6206;
-        background: url(../images/old/cardDialog/addDirectLogin_background.png) no-repeat right;
-}
-div.CardDialog div.directLoginItem {
-        clear: both;
-        min-height: 32px;
-        padding-left: 10px;
-        padding-top: 4px;
-        padding-bottom: 2px;
-        //width: 100px;
-        max-height: 32px;
-        overflow: hidden;
-}
-div.CardDialog div.directLoginItem:hover {
-        background-color: #cccec0;
-}
-div.CardDialog div.addDirectLoginListItem {
-        min-height: 32px;
-        padding-left: 10px;
-        padding-top: 4px;
-        padding-bottom: 2px;
-        max-height: 32px;
-        overflow: hidden;
-        background: url(../images/old/cardDialog/addDirectLogin_disabled_background.png) no-repeat 22px 0;
-}
-div.CardDialog div.addDirectLoginListItem a {
-        display: block;
-        font-size: 11pt;
-        padding-top: 6px;
-        padding-left: 50px;
-        color: rgba(255, 98, 6, 0.75);
-        text-decoration: none;
-        text-transform: uppercase;
-}
-div.CardDialog div.addDirectLoginListItem:hover {
-        background: url(../images/old/cardDialog/addDirectLogin_background.png) no-repeat 22px 0;
-        color: #ff6206;
-        background-color: #cccec0;
-}
-div.CardDialog div.directLoginItem div.cardDialogRecordDirectLoginComponent_favicon img.favicon {
-        width: 32px;
-        height: 32px;
-        float: left;
-}
-div.CardDialog div.directLoginItem div.cardDialogRecordDirectLoginComponent_label input {
-        float: left;
-        font-size: 11pt;
-        border: 0px;
-        padding: 5px;
-        color: #787872;
-        border: 1px solid #ededeb;
-        background-color: #ededeb;
-        height: 30px;
-        margin-left: 10px;
-        width: 68%;
-        margin-right: 5px;
-}
-div.CardDialog div.directLoginItem:hover div.cardDialogRecordDirectLoginComponent_label input {
-        border: 1px solid #515247;
-        background-color: #b5b7ab;
-}
-div.CardDialog div.directLoginItem > div.open {
-        float: left;
-        margin-top: 5px;
-        margin-right: 2px;
-        padding-left: 5px;
-        visibility: hidden;
-}
-div.CardDialog div.directLoginItem > div.edit, div.CardDialog div.directLoginItem > div.delete {
-        float: left;
-        margin-top: 5px;
-        margin-left: 3px;
-        padding-left: 5px;
-        visibility: hidden;
-}
-div.CardDialog div.directLoginItem > div.open a {
-        display: block;
-        width: 22px;
-        height: 22px;
-        background: url(../images/old/cardDialog/openDirectLogin.png) no-repeat 0 -2px;
-}
-div.CardDialog div.directLoginItem > div.open a:hover {
-        background: url(../images/old/cardDialog/openDirectLogin_selected.png) no-repeat 0 -2px;
-}
-div.CardDialog div.directLoginItem:hover > div.open, div.CardDialog div.directLoginItem:hover > div.edit, div.CardDialog div.directLoginItem:hover > div.delete {
-        visibility: visible;
-}
-div.CardDialog div.directLoginItem div.edit span {
-        padding-right: 6px;
-        display: block;
-}
-div.CardDialog div.directLoginItem div.open span a, div.CardDialog div.directLoginItem div.edit span a, div.CardDialog div.directLoginItem div.delete span a {
-        font-size: 8pt;
-        color: #666666;
-        text-decoration: none;
-        line-height: 19px;
-}
-div.CardDialog div.directLoginItem div.edit:hover {
-        background: url(../images/old/new_background_left.png) no-repeat;
-}
-div.CardDialog div.directLoginItem div:hover span a {
-        color: white;
-}
-div.CardDialog div.directLoginItem div.edit:hover span {
-        background: url(../images/old/new_background.png) no-repeat right center;
-}
-div.CardDialog div.directLoginItem div.delete:hover {
-        background: url(../images/old/delete_background_left.png) no-repeat;
-}
-div.CardDialog div.directLoginItem div.delete:hover span {
-        background: url(../images/old/delete_background.png) right;
-}
-div.CardDialog div.directLoginEditDetail {
-        position: relative;
-        //background-color: red;
-}
-form.directLoginEditingForm div.title, form.directLoginEditingForm div.favicon {
-        padding: 5px 10px;
-}
-form.directLoginEditingForm div.title.disabled:hover {
-        background-color: #f1f2e9;
-}
-form.directLoginEditingForm div.title:hover, form.directLoginEditingForm div.favicon:hover {
-        background-color: #cccec0;
-}
-form.directLoginEditingForm div.title input {
-        //width: 100%;
-        margin: 0px;
-        margin-left: 10px;
-        width: 440px;
-}
-form.directLoginEditingForm div.favicon {
-        padding-left: 10px;
-}
-// form.directLoginEditingForm div.favicon img.favicon {
-form.directLoginEditingForm img.favicon {
-        float: left;
-        width: 32px;
-        height: 32px;
-}
-form.directLoginEditingForm div.favicon input {
-        margin-top: 1px;
-        width: 465px;
-}
-form.directLoginEditingForm div.disabled:hover input, form.directLoginEditingForm div input {
-        font-size: 11pt;
-        border: 0px;
-        padding: 5px;
-        color: #787872;
-        border: 1px solid #ededeb;
-        background-color: #ededeb;
-        height: 30px;
-}
-form.directLoginEditingForm div:hover input {
-        border: 1px solid #515247;
-        background-color: #b5b7ab;
-}
-div.bindings div.binding > span.formFieldName {
-        display: inline-block;
-        width: 140px;
-        overflow: hidden;
-        margin-right: 10px;
-        color: #6b5147;
-        text-overflow: ellipsis;
-}
-div.bindings div.binding {
-        padding-bottom: 3px;
-}
-div.bindings div.binding > input {
-        margin-right: 10px;
-        background: #cccec0;
-        width: 150px;
-        border: 1px solid #cccec0;
-}
-div.bindings div.binding:hover > input {
-        border: 1px solid #cccec0;
-}
-div.bindings div.binding > select {
-        font-size: 13pt;
-}
-div.bindings div.binding span.fieldLock {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        margin-right: 3px;
-}
-div.bindings div.binding.showLocked input {
-        background: url(../images/old/cardDialog/password_background.png) no-repeat 2px 3px;
-        //color: black;
-        overflow: hidden;
-        background: #cccec0 url(../images/old/cardDialog/password_background.png) no-repeat 2px 3px;
-        color: rgba(237, 237, 235, 0.1);
-}
-div.bindings div.binding span.fieldLock a {
-        display: none;
-}
-div.bindings div.binding.locked span.fieldLock a {
-        display: block;
-        width: 20px;
-        height: 20px;
-        text-decoration: none;
-        background-image: url(../images/old/cardDialog/lock_open.png);
 }
-div.bindings div.binding.locked.showLocked span.fieldLock a {
+div.sidePanels div.tabSidePanel {
-        background-image: url(../images/old/cardDialog/lock_closed.png);
+  margin-right: -10px;
-        text-decoration: none;
 }
+div.sidePanels div.tabSidePanel ul {
-div.formValues {
+  margin: 0px;
-        padding-top: 15px;
+  padding-left: 0px;
+  list-style-type: none;
+  color: #f78b46;
 }
-div.formValues div.formValue div {
+div.sidePanels div.tabSidePanel ul.mainTabs {
-        margin: 0px;
+  margin: 0px;
-        display: inline-block;
 }
-div.formValues div.formValue > span.formFieldName {
+div.sidePanels div.tabSidePanel ul.mainTabs li a {
-        display: inline-table;
+  display: block;
-        width: 160px;
+  line-height: 30px;
-        overflow: hidden;
+  height: 43px;
-        margin-right: 10px;
+  padding-left: 40px;
-        color: #6b5147;
+  color: #ff6621;
+  margin: 0px;
+  font-weight: normal;
+  font-size: 13pt;
+  text-decoration: none;
 }
+div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter {
-div.directLoginEditing {
+  display: none;
-        padding-top: 2px;
 }
-div.directLoginEditing div.tabContainer {
+div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add {
-        min-height: 150px;
+  font-size: 14pt;
-        height: 200px;
+  font-weight: bold;
+  position: relative;
+  top: -34px;
+  right: 16px;
+  background: none;
+  color: #c0531b;
+  padding-left: 15px;
 }
-div.directLoginEditing div.tabContainer > ul.tabs {
+div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add:hover {
-        display: none;
+  color: white;
 }
+div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add span {
-div.directLoginEditing li {
+  font-size: 8pt;
-        padding: 10px;
+  vertical-align: middle;
 }
-div.directLoginEditing li.configuration > .bookmarkletConfigurationWrapper > textarea {
+div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add h3 {
-        float: left;
+  display: inline;
-        width: 320px;
+  padding-left: 5px;
-        height: 125px;
-        font-family: monospace;
-        font-weight: normal;
-        font-size: 8pt;
-        border: 1px solid #ccc;
 }
-div.directLoginEditing li.configuration > .bookmarkletConfigurationWrapper .bookmarkletComponent {
+div.sidePanels div.tabSidePanel ul.mainTabs li.selected div.selectionHighlighter {
-        float: right;
+  display: block;
+  position: absolute;
+  left: 154px;
+  margin-top: -43px;
 }
-div.directLoginEditing li.configuration > textarea.error {
+div.sidePanels div.tabSidePanel ul.mainTabs li.cards a {
-        border: 1px solid red;
+  background: url(../images/old/main/tabs/cardsBackground.png) -19px -63px;
-        background-color: rgba(255, 0, 0, 0.1);
 }
+div.sidePanels div.tabSidePanel ul.mainTabs li.cards a:hover {
-div.CardDialog div.body {
+  background: url(../images/old/main/tabs/cardsBackground.png) -19px -110px;
-        padding-bottom: 1px;
 }
-div.CardDialog div.body table.fields {
+div.sidePanels div.tabSidePanel ul.mainTabs li.cards.selected a {
-        width: 100%;
+  margin-left: -10px;
-        padding-top: 8px;
+  padding-left: 50px;
-        padding-bottom: 1px;
+  color: white;
+  background: url(../images/old/main/tabs/cardsBackground.png) -9px -14px;
 }
-div.CardDialog div.body table.fields thead {
+div.sidePanels div.tabSidePanel ul.mainTabs li.cards.selected a:hover {
-        background: url(../images/old/cardDialog/dottedLine_background.png) repeat-x 0 15px;
+  background: url(../images/old/main/tabs/cardsBackground.png) -9px -14px;
 }
-div.CardDialog div.body table.fields tfoot {
+div.sidePanels div.tabSidePanel ul.mainTabs li.directLogins a {
-        background: url(../images/old/cardDialog/dottedLine_background.png) repeat-x 0 bottom;
+  background: url(../images/old/main/tabs/directLoginBackground.png) -19px -63px;
 }
-div.CardDialog div.body table.fields thead th {
+div.sidePanels div.tabSidePanel ul.mainTabs li.directLogins a:hover {
-        text-align: left;
+  background: url(../images/old/main/tabs/directLoginBackground.png) -19px -110px;
-        font-weight: normal;
-        font-size: 9pt;
-        color: #787872;
-        padding-left: 10px;
-        padding-bottom: 3px;
-        //border-bottom: 1px dotted;
 }
-div.CardDialog div.body table.fields thead th.fieldStateTH {
+div.sidePanels div.tabSidePanel ul.mainTabs li.directLogins.selected a {
-        width: 10px;
+  margin-left: -10px;
+  padding-left: 50px;
+  color: white;
+  background: url(../images/old/main/tabs/directLoginBackground.png) -9px -14px;
 }
-div.CardDialog div.body table.fields tbody td.fieldLabel input {
+div.sidePanels div.tabSidePanel ul.mainTabs li.directLogins.selected a:hover {
-        width: 130px;
+  color: white;
+  background: url(../images/old/main/tabs/directLoginBackground.png) -9px -14px;
 }
-div.CardDialog div.body table.fields thead th.fieldLockTH {
+div.sidePanels div.tabSidePanel ul.otherTabs {
-        width: 10px;
+  margin: 10px 0px;
 }
-div.CardDialog div.body table.fields tbody td.fieldValue input {
+div.sidePanels div.tabSidePanel ul.otherTabs li {
-        width: 280px;
+  margin-top: -4px;
 }
-div.CardDialog div.body table.fields thead th.fieldActionTH {
+div.sidePanels div.tabSidePanel ul.otherTabs li div.selectionHighlighter {
-        width: 30px;
+  display: none;
 }
-div.CardDialog div.body table.fields thead th.fieldDeleteTH {
+div.sidePanels div.tabSidePanel ul.otherTabs li a {
-        width: 40px;
+  display: block;
+  line-height: 36px;
+  height: 43px;
+  padding-left: 40px;
+  color: #ff6621;
+  text-decoration: none;
 }
-div.CardDialog div.body table.fields tbody tr:hover, div.CardDialog div.body table.fields tbody tr.selectedField {
+div.sidePanels div.tabSidePanel ul.otherTabs li a:hover {
-        background-color: #cccec0;
+  background: url(../images/old/main/tabs/itemsBackground.png) -10px -49px;
 }
-div.CardDialog div.body table.fields tbody tr td {
+div.sidePanels div.tabSidePanel ul.otherTabs li.selected a {
-        font-size: 11pt;
+  margin-left: -10px;
-        color: #787872;
+  padding-left: 50px;
-        height: 35px;
+  background: url(../images/old/main/tabs/itemsBackground.png) 1px -96px;
+  color: white;
 }
-div.CardDialog div.body table.fields tbody tr td input {
+div.sidePanels div.tabSidePanel ul.otherTabs li.selected div.selectionHighlighter {
-        font-size: 11pt;
+  display: block;
-        border: 0px;
+  position: absolute;
-        padding: 5px;
+  left: 154px;
-        color: #787872;
+  margin-top: -42px;
-        border: 1px solid #ededeb;
-        background-color: #ededeb;
-        height: 30px;
 }
+div.tagSidePanel {
+  /*
+        margin-right: -8px;
-div.CardDialog div.body table.fields tbody tr td.fieldValue div.locked input {
+        div.tagSidePanel div.header {
-        background: #ededeb url(../images/old/cardDialog/password_background.png) no-repeat 2px 3px;
+                height: 50px;
-        color: #ededeb;
+                background-image: url(../images/old/main/tabs/tagsBackground.png);
-        color: rgba(237, 237, 235, 0.1);
+        }
-        //color: black;
+        div.tagSidePanel div.header h1 {
-        //line-height: 100px;
+                padding-left: 52px;
+                padding-top: 14px;
-        overflow: hidden;
+                font-size: 14pt;
-}
+                font-weight: normal;
-div.locked input.value::-moz-selection {
+                color: #888888;
-        background: #ff0000;
+        }
-}
+        div.tagSidePanel div.body {
-div.locked input.value::selection {
+                background: url(../images/old/main/tabs/tagsBackground.png) -255px;
-        background: #ff0000;
+        }
-}
+        div.tagSidePanel div.footer {
-div.CardDialog div.body table.fields tbody tr.new.selectedField td input,
+                height: 10px;
-div.CardDialog div.body table.fields tbody tr.new:hover td input,
+                background: url(../images/old/main/tabs/tagsBackground.png) -510px -40px;
-div.CardDialog div.body table.fields tbody tr:hover td input,
+        }
-div.CardDialog div.body table.fields tbody tr.selectedField td input {
+        div.tagSidePanel ul.tags {
-        border: 1px solid #515247;
+                margin: 0px;
-        background-color: #b5b7ab;
+                list-style-type: none;
-}
+                padding: 0px;
-div.CardDialog div.body table.fields tbody tr:hover td.fieldValue div.locked input, div.CardDialog div.body table.fields tbody tr.selectedField td.fieldValue div.locked input {
+        }
-        background: #b5b7ab url(../images/old/cardDialog/password_background.png) no-repeat 2px 3px;
+        div.tagSidePanel ul.tags li a {
-        color: #b5b7ab;
+                display: block;
-        color: rgba(237, 237, 235, 0.1);
+                font-size: 9pt;
-}
+                text-decoration: none;
-div.CardDialog div.body table.fields tbody td.fieldLock div {
+                color: #ff6621;
-        width: 20px;
+                padding: 0px 4px 0px 15px;
-        height: 19px;
+                line-height: 20px;
-        cursor: pointer;
+        }
-}
+        div.tagSidePanel ul.tags li a:hover {
-div.CardDialog div.body table.fields tbody tr:hover td.fieldLock div.locked {
+                background-color: #dddddd;
-        background-image: url(../images/old/cardDialog/lock_closed.png);
+        }
-}
+        div.tagSidePanel ul.tags li span.tagCardinality {
-div.CardDialog div.body table.fields tbody tr:hover td.fieldLock div.unlocked {
+                float: right;
-        background-image: url(../images/old/cardDialog/lock_open.png);
+                font-size: 8pt;
-}
+                color: #999999;
-div.CardDialog div.body table.fields tbody tr td.fieldAddDelete div span a {
+                margin-right: 15px;
-        text-decoration: none;
+                margin-top: -17px;
-        visibility: hidden;
+        }
-        font-size: 8pt;
+        div.tagSidePanel ul.tags li.selected a {
-        vertical-align: -13px;
+                background-color: #d4d5cf;
-        color: black;
+        }
-}
+        div.tagSidePanel ul.tags li.selected a:hover {
-div.CardDialog div.body table.fields tbody tr.selectedField td.fieldAddDelete div span a {
+                background-color: #d4d5cf;
-        visibility: visible;
+        }
-}
+        div.tagSidePanel ul.tags li.selected a {
-div.CardDialog div.body table.fields tbody tr:hover td.fieldAddDelete div span a {
+                font-weight: bold;
-        visibility: visible;
+        }
-}
+*/
-div.CardDialog div.body table.fields tbody tr:hover td.fieldAddDelete div:hover span a {
-        color: white;
-}
-div.CardDialog div.body div.notes {
-        background: url(../images/old/cardDialog/dottedLine_background.png) repeat-x 0 0;
-        padding-top: 2px;
-}
-div.CardDialog div.body div.notes div {
-        padding-left: 20px;
-        padding-right: 20px;
-        padding-top: 4px;
-        padding-bottom: 4px;
-}
-div.CardDialog div.body div.notes div:hover, div.CardDialog div.body div.notes.selectedField div {
-        background-color: #cccec0;
-}
-div.CardDialog.loading div.body div.notes div textarea {
-        display: none;
-}
-div.CardDialog div.body div.notes div textarea {
-        border: 0;
-        width: 470px;
-        //width: 100%;
-        //height: 100px;
-        //      min-height: 400px;
-        //overflow: hidden;
-        color: #787872;
-        border: 1px solid #ededeb;
-        background-color: #ededeb;
-        display: block;
-        line-height: 12pt;
-        min-height: 50px;
-}
-div.CardDialog div.body div.notes div:hover textarea, div.CardDialog div.body div.notes.selectedField div textarea {
-        border: 1px solid #515247;
-        background-color: #b5b7ab;
-}
-div.CardDialog div.body table.fields tbody tr td.fieldAction {
-        //background-color: red;
-        padding-left: 4px;
-}
-div.CardDialog div.body table.fields tbody tr td.fieldAction a {
-        display: inline-block;
-        text-decoration: none;
-        text-align: center;
-        width: 16px;
-        height: 16px;
-}
-div.CardDialog div.body table.fields tbody tr td.fieldAction a.email {
-        background: url(../images/old/cardDialog/fieldTypes/email.png) no-repeat 0 0;
-}
-div.CardDialog div.body table.fields tbody tr td.fieldAction a.email:hover {
-        background: url(../images/old/cardDialog/fieldTypes/email_selected.png) no-repeat 0 0;
-}
-div.CardDialog div.body table.fields tbody tr td.fieldAction a.url {
-        background: url(../images/old/cardDialog/fieldTypes/url.png) no-repeat 0 0;
-}
-div.CardDialog div.body table.fields tbody tr td.fieldAction a.url:hover {
-        background: url(../images/old/cardDialog/fieldTypes/url_selected.png) no-repeat 0 0;
-}
-div.CardDialog div.body table.fields tbody tr td.fieldAction a.password {
-        background: url(../images/old/cardDialog/fieldTypes/password.png) no-repeat 0 0;
-}
-div.CardDialog div.body table.fields tbody tr td.fieldAction a.password:hover {
-        background: url(../images/old/cardDialog/fieldTypes/password_selected.png) no-repeat 0 0;
-}
-div#disabledZone {
-        display: block;
-        visibility: visible;
-}
-div#messageZone {
-        display: block;
-        visibility: visible;
-}
-div.CardDialog div.error div.img {
-        margin: 10px;
-        width: 50px;
-        height: 50px;
-        float: left;
-        background-image: url(../images/old/simpleMessageBox/Alert.png);
-}
-div.rulerWrapper {
-        left: -1000px;
-        margin-top: -30px;
-        margin-left: 50%;
-        z-index: 25000;
-}
-div.rulerWrapper.fixed {
-        position: fixed;
-}
-div.rulerWrapper.scrollable {
-        position: absolute;
 }
-div.ruler {
+div.groupSidePanel {
-        //position: absolute;
+  /*
+        margin-right: -10px;
-        width: 541px;
-        height: 96px;
-        margin-left: -270px;
-        background: url(../images/old/ruler/ruler.png) no-repeat;
-}
-div.ruler a {
-        position: absolute;
-        display: block;
-        width: 15px;
-        height: 15px;
-        top: 3px;
-        text-decoration: none;
-}
-div.ruler a.exit {
-        margin-left: 2px;
-        background: url(../images/old/ruler/exit.png) no-repeat;
-}
-div.ruler a.exit:hover {
-        background: url(../images/old/ruler/exit_selected.png) no-repeat;
-}
-div.ruler a.smallButton.previous {
-        right: 16px;
-        background: url(../images/old/ruler/small_previous.png) no-repeat;
-}
-div.ruler a.smallButton.previous:hover {
-        cursor: pointer;
-        background: url(../images/old/ruler/small_previous_selected.png) no-repeat;
-}
-div.ruler a.smallButton.previous.disabled, div.ruler a.smallButton.previous.disabled:hover {
-        cursor: default;
-        background: url(../images/old/ruler/small_previous_disabled.png) no-repeat;
-}
-div.ruler a.smallButton.next {
-        right: 3px;
-        background: url(../images/old/ruler/small_next.png) no-repeat;
-}
-div.ruler a.smallButton.next:hover {
-        cursor: pointer;
-        background: url(../images/old/ruler/small_next_selected.png) no-repeat;
-}
-div.ruler a.smallButton.next.disabled, div.ruler a.smallButton.next.disabled:hover {
-        cursor: default;
-        background: url(../images/old/ruler/small_next_disabled.png) no-repeat;
-}
-div.ruler div.steps, div.ruler div.dots {
-        position: absolute;
-        background-color: rgba(255, 255, 255, 0);
-        margin-left: 30px;
-        margin-right: 30px;
-}
-div.ruler div.steps {
-        top: 25px;
-        height: 30px;
-}
-div.ruler div.dots {
-        top: 58px;
-        height: 25px;
-}
-div.ruler div ul {
-        list-style-type: none;
-        margin: 0px;
-        padding: 0px;
-}
-div.ruler div ul li {
-        display: inline-block;
-        vertical-align: top;
-}
-div.ruler > div.steps > ul > li:first-child, div.ruler > div.dots > ul > li:first-child {
-        margin-left: 0px;
-}
-div.ruler div.steps_3 ul li {
-        margin-left: 135px;
-}
-div.ruler div.steps_4 ul li {
-        margin-left: 67px;
-}
-div.ruler div.steps_5 ul li {
-        margin-left: 32px;
-}
-div.ruler div.steps_6 ul li {
-        margin-left: 12px;
-}
-div.ruler div ul li span {
-        font-weight: bold;
-        text-align: center;
-        width: 70px;
-        display: block;
-        font-size: 8pt;
-        overflow: hidden;
-        color: rgba(0, 0, 0, 0.3);
-}
-div.ruler div ul li.selected span {
-        color: black;
-}
-div.ruler div.dots ul li span {
-        //text-align: center;
-        //width: 26px;
-        //margin-left: 22px;
-        //margin-right: 22px;
-        //height: 25px;
-        //background-color: #e57218;
-        font-size: 40pt;
+        div.groupSidePanel div.header {
-        line-height: 47px;
+                height: 50px;
-}
+                background-image: url(../images/old/main/tabs/groupsBackground.png);
-div.ruler div.marker {
+        }
-        position: absolute;
+        div.groupSidePanel div.header h1 {
-        top: -3px;
+                padding-left: 52px;
-        //left: -246px;
+                padding-top: 14px;
-}
+                font-size: 14pt;
-div.ruler div.marker div.markerBody {
+                font-weight: normal;
-        width: 77px;
+                color: white;
-        height: 97px;
+        }
-        background: url(../images/old/ruler/marker.png) no-repeat;
+        div.groupSidePanel div.header a {
-}
+                float: right;
-div.ruler div.marker div.next {
+                margin-top: -30px;
-        position: absolute;
+                margin-right: 20px;
-        top: 25px;
+                text-decoration: none;
-        left: 76px;
+                color: #666666;
-        width: 27px;
+                font-size: 9pt;
-        height: 65px;
+                line-height: 18px;
-        background: url(../images/old/ruler/next.png) no-repeat -13px;
+        }
-        z-index: 26000;
+        div.groupSidePanel div.header a:hover {
-}
+                color: #444444;
-div.ruler div.marker div.next:hover {
+        }
-        cursor: pointer;
+        div.groupSidePanel div.body {
-        background: url(../images/old/ruler/next.png) no-repeat -2px;
+                background: url(../images/old/main/tabs/groupsBackground.png) -255px;
-}
+        }
-div.ruler div.marker div.disabled {
+        div.groupSidePanel div.footer {
-        display: none;
+                height: 10px;
-}
+                background: url(../images/old/main/tabs/groupsBackground.png) -510px -39px;
-div.ruler div.marker div.previous {
+        }
-        position: absolute;
+        div.groupSidePanel ul.groups {
-        top: 25px;
+                margin: 0px;
-        left: -24px;
+                list-style-type: none;
-        width: 27px;
+                padding: 0px;
-        height: 65px;
+        }
-        //background: url(../images/old/ruler/previous.png) no-repeat 13px 1px;
+        div.groupSidePanel ul.groups li a {
-        background: url(../images/old/ruler/previous.png) no-repeat 18px 1px;
+                display: block;
-        z-index: 26000;
+                font-size: 9pt;
-}
+                text-decoration: none;
-div.ruler div.marker div.previous:hover {
+                color: white;
-        cursor: pointer;
+                padding: 0px 4px 0px 15px;
-        //background: url(../images/old/ruler/previous.png) no-repeat 2px 1px;
+                line-height: 20px;
-        background: url(../images/old/ruler/previous.png) no-repeat 7px 1px;
+        }
+        div.groupSidePanel ul.groups li a:hover {
+                background-color: #aaaaaa;
+        }
+        div.groupSidePanel ul.groups li span.groupCardinality {
+                float: right;
+                font-size: 8pt;
+                color: #dddddd;
+                margin-right: 15px;
+                margin-top: -17px;
+        }
+        div.groupSidePanel ul.groups li.selected a {
+                background-color: #bbbbbb;
+        }
+        div.groupSidePanel ul.groups li.selected a:hover {
+                background-color: #bbbbbb;
+        }
+        div.groupSidePanel ul.groups li.selected a {
+                font-weight: bold;
+        }
+*/
 }
-div.createNewCardSplash {
-        margin-top: -450px;
-        margin-left: 250px;
-        width: 354px;
-        float: left;
-        height: 186px;
-        text-align: center;
-        background: url(../images/old/main/grid/createNewCardSplash.png) no-repeat;
-}
-div.createNewCardSplash:hover {
-        cursor: pointer;
-        background: url(../images/old/main/grid/createNewCardSplash_selected.png) no-repeat;
-}
-div.createNewCardSplash span {
-        display: block;
-        padding-top: 130px;
-        font-size: 14pt;
-        color: #9a9586;
-}
-div.createNewCardSplash:hover span {
-        color: #605c4e;
-}
-//=============================================
-div.NewUserCreation div.tabContainer {
-        min-height: 150px;
-        height: 200px;
-}
-div.NewUserCreation div.tabContainer > ul.tabs {
-        display: none;
-}
-ul.createUserStates li.creating {
-        background: url(../images/old/creatingUser.gif) no-repeat center center;
-}
-ul.createUserStates li {
-        height: 100px;
-}
-ul.createUserStates li span {
-        display: block;
-        width: 100%;
-        text-align: center;
-        color: #999;
-        font-style: italic;
-}
-div.NewUserCreation form.newUserCreationForm ul.tabPanels {
-        padding-top: 10px;
-}
-div.NewUserCreation form.newUserCreationForm ul ul {
-        margin-left: auto;
-        margin-right: auto;
-        width: 400px;
-}
-div.NewUserCreation form.newUserCreationForm ul.credentials li {
-        height: 45px;
-}
-div.NewUserCreation form.newUserCreationForm ul.credentials span.label {
-        text-align: right;
-        display: inline-block;
-        font-size: 12pt;
-        color: #787872;
-        width: 110px;
-        vertical-align: baseline;
-}
-div.NewUserCreation form.newUserCreationForm ul.credentials input {
-        font-size: 13pt;
-        color: #787872;
-        height: 35px;
-        margin-left: 15px;
-        padding-left: 5px;
-}
-div.NewUserCreation form.newUserCreationForm ul.termsOfService li {
-        padding: 0 0 15 0;
-}
-div.NewUserCreation form.newUserCreationForm ul.termsOfService input {
-        display: inline-block;
-}
-div.NewUserCreation form.newUserCreationForm ul.termsOfService .label {
-        display: inline-block;
-        text-align: left;
-        font-size: 12pt;
-        color: #787872;
-        width: 350px;
-        vertical-align: top;
-        padding-left: 10px;
-}
-div.NewUserCreation form.newUserCreationForm ul.termsOfService a {
-        font-weight: bold;
-        color: #787872;
-        text-decoration: none;
-}
-div.NewUserCreation form.newUserCreationForm ul.termsOfService a:hover {
-        color: #444;
-}
-div.NewUserCreation form.newUserCreationForm ul.createUserStates li.done span {
-        font-size: 16pt;
-        color: green;
-}
-div.NewUserCreation form.newUserCreationForm ul.createUserStates li.fail span {
-        font-size: 16pt;
-        color: red;
-}
-*/
-\ No newline at end of file
diff --git a/frontend/gamma/html/exitPage_template.html b/frontend/gamma/html/exitPage_template.html
index b46f9f6..e17bee0 100644
--- a/frontend/gamma/html/exitPage_template.html
+++ b/frontend/gamma/html/exitPage_template.html
@@ -1,137 +1,112 @@
-<!--
-Copyright 2008-2011 Clipperz Srl
-This file is part of Clipperz Community Edition.
-Clipperz Community Edition is an online password manager.
-For further information about its features and functionalities please
-refer to http://www.clipperz.com.
-* Clipperz Community Edition is free software: you can redistribute
-  it and/or modify it under the terms of the GNU Affero General Public
-  License as published by the Free Software Foundation, either version
-  3 of the License, or (at your option) any later version.
-* Clipperz Community Edition is distributed in the hope that it will
-  be useful, but WITHOUT ANY WARRANTY; without even the implied
-  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
-  See the GNU Affero General Public License for more details.
-* You should have received a copy of the GNU Affero General Public
-  License along with Clipperz Community Edition.  If not, see
-  <http://www.gnu.org/licenses/>.
-->
 <html>
 <head>
        <title>clipperz</title>
        <link rel="stylesheet" type="text/css" href="./static.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
 </head>
 <body>
 <!-- h1>clipper<span class="logo_z">z</span></h1 -->
 <div class="header">
        <div id="logo"></div>
        <h5 class="clipperzPayoff">keep it to yourself!</h5>
 </div>
 <div class="contentWrapper">
        <div class="block1">
                <div class="languageBlock en-us">
                        <div class="flags"></div>
                        <div class="content">
                                <h3>Goodbye! Thanks for using Clipperz.</h3>
                                <p>You just logged out from your Clipperz account. We hope to see you again soon!</p>
                        </div>
                </div>
                <div class="languageBlock zh-cn">
                        <div class="flags"></div>
                        <div class="content">
                                <h3>下次再见！感谢您使用 Clipperz。</h3>
        
                                <p>您仅仅是从您的 Clipperz 账户登出，我们希望很快再次见到您！</p>
                        </div>
                </div>
                <!--
                <div class="languageBlock fr-fr">
                        <div class="flags"></div>
                        <div class="content">
                                <h3></h3>
        
                                <p></p>
                        </div>
                </div>
                -->
                <div class="languageBlock it-it">
                        <div class="flags"></div>
                        <div class="content">
                                <h3>Arrivederci! Grazie per aver scelto Clipperz.</h3>
        
                                <p>Sei uscito da Clipperz. Speriamo di rivederti presto.</p>
                        </div>
                </div>
                <div class="languageBlock ja-jp">
                        <div class="flags"></div>
                        <div class="content">
                                <h3>Clipperz をご利用いただきありがとうございました。</h3>
        
                                <p>Clipperz から正常にログアウトしました。またのご利用をお待ちしています。</p>
                        </div>
                </div>
        </div>
        <div class="block2">
                <div class="languageBlock pt-br">
                        <div class="flags"></div>
                        <div class="content">
                                <h3>Até logo! Obrigado por utilizar Clipperz.</h3>
        
                                <p>Você acaba de sair de sua conta Clipperz. Esperamos ve-lo de volta em breve!</p>
                        </div>
                </div>
                <div class="languageBlock es-es">
                        <div class="flags"></div>
                        <div class="content">
                                <h3>¡Hasta luego! Gracias por usar Clipperz</h3>
        
                                <p>Se acaba cerrar su sesión Clipperz. ¡Esperamos verlo nuevamente pronto!</p>
                        </div>
                </div>
                <div class="languageBlock ru-ru">
                        <div class="flags"></div>
                        <div class="content">
                                <h3>До свидания! Спасибо за использование Clipperz.</h3>
        
                                <p>Вы только что вышли из своего аккаунта Clipperz. Мы надеемся увидеть Вас снова!</p>
                        </div>
                </div>
                <div class="languageBlock de-de">
                        <div class="flags"></div>
                        <div class="content">
                                <h3>Auf Wiedersehen! Danke, dass Sie Clipperz verwendet haben.</h3>
        
                                <p>Sie haben sich gerade von Ihrem Clipperz-Account abgemeldet. Wir hoffen, Sie bald wieder zu sehen.</p>
                        </div>
                </div>
        </div>
 </div>
 </body>
 </html>
diff --git a/frontend/gamma/js/Clipperz/PM/Proxy.js b/frontend/gamma/js/Clipperz/PM/Proxy.js
index 9817eac..190bffd 100644
--- a/frontend/gamma/js/Clipperz/PM/Proxy.js
+++ b/frontend/gamma/js/Clipperz/PM/Proxy.js
@@ -17,153 +17,153 @@ refer to http://www.clipperz.com.
  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  See the GNU Affero General Public License for more details.
 * You should have received a copy of the GNU Affero General Public
  License along with Clipperz Community Edition.  If not, see
  <http://www.gnu.org/licenses/>.
 */
 if (typeof(Clipperz) == 'undefined') { Clipperz = {}; }
 if (typeof(Clipperz.PM) == 'undefined') { Clipperz.PM = {}; }
 //=============================================================================
 Clipperz.PM.Proxy = function(args) {
        args = args || {};
        this._shouldPayTolls = args.shouldPayTolls || false;
        this._tolls = {
                        'CONNECT':[],
                        'REGISTER':[],
                        'MESSAGE':[]
        };
        if (args.isDefault === true) {
                Clipperz.PM.Proxy.defaultProxy = this;
        }
        return this;
 }
 Clipperz.PM.Proxy.prototype = MochiKit.Base.update(null, {
        'toString': function() {
                return "Clipperz.PM.Proxy";
        },
        //=========================================================================
        'shouldPayTolls': function() {
                return this._shouldPayTolls;
        },
        //-------------------------------------------------------------------------
        'tolls': function() {
                return this._tolls;
        },
        //-------------------------------------------------------------------------
        'payToll': function(aRequestType, someParameters) {
                        vardeferredResult;
 //console.log(">>> Proxy.payToll", aRequestType, someParameters);
                if (this.shouldPayTolls()) {
                        deferredResult = new Clipperz.Async.Deferred("Proxy.payToll", {trace:false});
                        if (this.tolls()[aRequestType].length == 0) {
                                deferredResult.addMethod(this, 'sendMessage', 'knock', {requestType:aRequestType});
                                deferredResult.addMethod(this, 'setTollCallback');
                        }
                        deferredResult.addMethod(this.tolls()[aRequestType], 'pop');
                        deferredResult.addCallback(MochiKit.Base.methodcaller('deferredPay'));
                        deferredResult.addCallback(function(aToll) {
                                var result;
                        
                                result = {
                                        parameters: someParameters,
                                        toll: aToll
                                }
                                
                                return result;
                        });
                
                        deferredResult.callback();
                } else {
                        deferredResult = MochiKit.Async.succeed({parameters:someParameters});
                }
 //console.log("<<< Proxy.payToll");
                return deferredResult;
        },
        //-------------------------------------------------------------------------
        'addToll': function(aToll) {
 //console.log(">>> Proxy.addToll", aToll);
                this.tolls()[aToll.requestType()].push(aToll);
 //console.log("<<< Proxy.addToll");
        },
        //=========================================================================
        'setTollCallback': function(someParameters) {
 //console.log(">>> Proxy.setTollCallback", someParameters);
                if (typeof(someParameters['toll']) != 'undefined') {
 //console.log("added a new toll", someParameters['toll']);
                        this.addToll(new Clipperz.PM.Toll(someParameters['toll']));
                }
 //console.log("<<< Proxy.setTallCallback", someParameters['result']);
                return someParameters['result'];
        },
        //=========================================================================
        'registration': function (someParameters) {
                return this.processMessage('registration', someParameters, 'REGISTER');
        },
        'handshake': function (someParameters) {
                return this.processMessage('handshake', someParameters, 'CONNECT');
        },
        'message': function (someParameters) {
                return this.processMessage('message', someParameters, 'MESSAGE');
        },
        'logout': function (someParameters) {
                return this.processMessage('logout', someParameters, 'MESSAGE');
        },
        //=========================================================================
        'processMessage': function (aFunctionName, someParameters, aRequestType) {
                        vardeferredResult;
-                deferredResult = new Clipperz.Async.Deferred("Proxy.processMessage", {trace:true});
+                deferredResult = new Clipperz.Async.Deferred("Proxy.processMessage", {trace:false});
                deferredResult.addMethod(this, 'payToll', aRequestType);
                deferredResult.addMethod(this, 'sendMessage', aFunctionName);
                deferredResult.addMethod(this, 'setTollCallback');
                deferredResult.callback(someParameters);
                
                        return deferredResult;  
        },
        //=========================================================================
        'sendMessage': function () {
                        throw Clipperz.Base.exception.AbstractMethod;   
        },
        //=========================================================================
        'isReadOnly': function () {
                return false;
        },
        //=========================================================================
        __syntaxFix__: "syntax fix"
        
 });
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js
index 095e8ed..8df7e0e 100644
--- a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js
+++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js
@@ -1,213 +1,214 @@
 /*
 Copyright 2008-2011 Clipperz Srl
 This file is part of Clipperz Community Edition.
 Clipperz Community Edition is an online password manager.
 For further information about its features and functionalities please
 refer to http://www.clipperz.com.
 * Clipperz Community Edition is free software: you can redistribute
  it and/or modify it under the terms of the GNU Affero General Public
  License as published by the Free Software Foundation, either version
  3 of the License, or (at your option) any later version.
 * Clipperz Community Edition is distributed in the hope that it will
  be useful, but WITHOUT ANY WARRANTY; without even the implied
  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  See the GNU Affero General Public License for more details.
 * You should have received a copy of the GNU Affero General Public
  License along with Clipperz Community Edition.  If not, see
  <http://www.gnu.org/licenses/>.
 */
 Clipperz.Base.module('Clipperz.PM.UI.Common.Components');
 Clipperz.PM.UI.Common.Components.Tooltip = function(args) {
        args = args || {};
        Clipperz.PM.UI.Common.Components.Tooltip.superclass.constructor.apply(this, arguments);
                this._element   = args.element|| Clipperz.Base.exception.raise('MandatoryParameter');
                this._text              = args.text     || Clipperz.Base.exception.raise('MandatoryParameter');
                this._position  = args.position         || 'BELOW';             //'BELOW', 'ABOVE', 'LEFT', 'RIGHT'
        this._boxDimensions = null;
        this._enabled = (typeof(args.enabled) == 'undefined' ? true : args.enabled);
        this._isVisible = false;
        this.renderSelf();
        return this;
 }
 //=============================================================================
 Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.Tooltip, Clipperz.PM.UI.Common.Components.BaseComponent, {
        //-------------------------------------------------------------------------
        'toString': function () {
                return "Clipperz.PM.UI.Common.Components.Tooltip component";
        },
        //-------------------------------------------------------------------------
        'text': function () {
                return this._text;
        },
        
        'setText': function (aValue) {
                this._text = aValue;
        },
        //-------------------------------------------------------------------------
        'position': function () {
                return this._position;
        },
        
        'setPosition': function (aValue) {
                this._position = aValue;
        },
        //-------------------------------------------------------------------------
        'enabled': function () {
                return this._enabled;
        },
        
        'setIsEnabled': function (aValue) {
                this._enabled = aValue;
        },
        //-------------------------------------------------------------------------
        'isVisible': function () {
                return this._isVisible;
        },
        
        'setIsVisible': function (aValue) {
                this._isVisible = aValue;
        },
        //-------------------------------------------------------------------------
        'renderSelf': function() {
        //      this.append(this.element(), {tag:'div', id:this.getId('tooltip'), cls:'tooltip ' + this.position(), children:[
        //      this.append(MochiKit.DOM.currentDocument().body, {tag:'div', id:this.getId('tooltip'), cls:'tooltip ' + this.position(), children:[
                this.append(MochiKit.DOM.getElement('Clipperz_PM_UI_Common_Components_Tooltip_wrapperNode'), {tag:'div', id:this.getId('tooltip'), cls:'tooltip ' + this.position(), children:[
                        {tag:'div', id:this.getId('body'), cls:'tooltip_body', children:[
                                {tag:'div', cls:'tooltip_text', children:[
                                        {tag:'span', html:this.text()}
-                                ]},
+                                ]}//,
-                                {tag:'div', id:this.getId('footer'), cls:'tooltip_footer'}
+        //                      {tag:'div', id:this.getId('footer'), cls:'tooltip_footer'}
                        ]},
                        {tag:'div', id:this.getId('arrow'), cls:'tooltip_arrow'}
                ]});
                this._boxDimensions = MochiKit.Style.getElementDimensions(this.getId('body'));
        //      this._boxDimensions.h += MochiKit.Style.getElementDimensions(this.getId('footer')).h;
                MochiKit.Style.hideElement(this.displayElement());
                MochiKit.Signal.connect(this.element(), 'onmouseenter', this, 'show');
                MochiKit.Signal.connect(this.element(), 'onmouseleave', this, 'hide');
        },
        //-----------------------------------------------------
        'displayElement': function() {
                return this.getElement('tooltip');
        },
        //-------------------------------------------------------------------------
        'boxDimensions': function () {
                return this._boxDimensions;
        },
        //-------------------------------------------------------------------------
        'show': function () {
                var elementSizeAndPosition;
                var arrowPosition;
                var bodyPosition;
                if (this.isVisible() == false) {
                        arrowPosition = {};
                        bodyPosition = {};
                        this.setIsVisible(true);
                        elementSizeAndPosition = Clipperz.Style.getSizeAndPosition(this.element());
 //console.log("ELEMENT SIZE AND POSITION", Clipperz.Base.serializeJSON(elementSizeAndPosition));
 //console.log("BOX DIMENSIONS", Clipperz.Base.serializeJSON(this.boxDimensions()));
                        switch (this.position()) {
                                case 'ABOVE':
 //console.log("ABOVE");
-                                        MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:36, h:13}, 'px');
+        //                              MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:36, h:13}, 'px');
                                        bodyPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - this.boxDimensions().w/2);
                                        bodyPosition.y = elementSizeAndPosition.position.y - this.boxDimensions().h - 13;
                                
-                                        arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2);
+        //                              arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2);
-                                        arrowPosition.y = elementSizeAndPosition.position.y - 13;
+        //                              arrowPosition.y = elementSizeAndPosition.position.y - 13;
                                        break;
                                case 'BELOW':
 //console.log("BELOW");
-                                        MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:36, h:13}, 'px');
+        //                              MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:36, h:13}, 'px');
                                        bodyPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - this.boxDimensions().w/2);
                                        bodyPosition.y = elementSizeAndPosition.position.y + elementSizeAndPosition.dimensions.h + 13;
                                
-                                        arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2);
+        //                              arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2);
-                                        arrowPosition.y = elementSizeAndPosition.position.y + elementSizeAndPosition.dimensions.h;
+        //                              arrowPosition.y = elementSizeAndPosition.position.y + elementSizeAndPosition.dimensions.h;
                                        break;
                                case 'LEFT':
 //console.log("LEFT");
-                                        MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:13, h:36}, 'px');
+        //                              MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:13, h:36}, 'px');
                                        bodyPosition.x = elementSizeAndPosition.position.x - this.boxDimensions().w - 13;
                                        bodyPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - this.boxDimensions().h/2);
-                                        arrowPosition.x = elementSizeAndPosition.position.x -13;
+        //                              arrowPosition.x = elementSizeAndPosition.position.x -13;
-                                        arrowPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - 36/2);
+        //                              arrowPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - 36/2);
                                        break;
                                case 'RIGHT':
 //console.log("RIGHT");
-                                        MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:13, h:36}, 'px');
+        //                              MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:13, h:36}, 'px');
                                        bodyPosition.x = elementSizeAndPosition.position.x + elementSizeAndPosition.dimensions.w + 13;
                                        bodyPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - this.boxDimensions().h/2);
-                                        arrowPosition.x = elementSizeAndPosition.position.x + elementSizeAndPosition.dimensions.w;
+        //                              arrowPosition.x = elementSizeAndPosition.position.x + elementSizeAndPosition.dimensions.w;
-                                        arrowPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - 36/2);
+        //                              arrowPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - 36/2);
                                        break;
                        }
 //console.log("X: " + bodyPosition.x + ", Y: " + bodyPosition.y);
-                        MochiKit.Style.setElementPosition(this.getId('body'), bodyPosition);
+                        MochiKit.Style.setElementPosition(this.getId('tooltip'), bodyPosition);
-                        MochiKit.Style.setElementPosition(this.getId('arrow'), arrowPosition);
+        //              MochiKit.Style.setElementPosition(this.getId('body'), bodyPosition);
+        //              MochiKit.Style.setElementPosition(this.getId('arrow'), arrowPosition);
                        MochiKit.Visual.appear(this.displayElement(), {duration:0.4});
                }
        },
        'hide': function () {
                if (this.isVisible() == true) {
                        MochiKit.Visual.fade(this.displayElement(), {duration:0.4});
                        this.setIsVisible(false);
                }
        },
        //-------------------------------------------------------------------------
 /*
        'shouldRemoveElementWhenClearningUp': function () {
                return false;
        },
 */
        //-------------------------------------------------------------------------
        __syntaxFix__: "syntax fix"
 });
 Clipperz.PM.UI.Common.Components.Tooltip.initTooltips = function () {
        Clipperz.DOM.Helper.insertBefore(MochiKit.DOM.currentDocument().body.childNodes[0], {tag:'div', id:'Clipperz_PM_UI_Common_Components_Tooltip_wrapperNode'});
 }
 MochiKit.DOM.addLoadEvent(Clipperz.PM.UI.Common.Components.Tooltip.initTooltips);
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/LoginForm.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/LoginForm.js
index 389d876..a10ba4f 100644
--- a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/LoginForm.js
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/LoginForm.js
@@ -1,200 +1,178 @@
 /*
 Copyright 2008-2011 Clipperz Srl
 This file is part of Clipperz Community Edition.
 Clipperz Community Edition is an online password manager.
 For further information about its features and functionalities please
 refer to http://www.clipperz.com.
 * Clipperz Community Edition is free software: you can redistribute
  it and/or modify it under the terms of the GNU Affero General Public
  License as published by the Free Software Foundation, either version
  3 of the License, or (at your option) any later version.
 * Clipperz Community Edition is distributed in the hope that it will
  be useful, but WITHOUT ANY WARRANTY; without even the implied
  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  See the GNU Affero General Public License for more details.
 * You should have received a copy of the GNU Affero General Public
  License along with Clipperz Community Edition.  If not, see
  <http://www.gnu.org/licenses/>.
 */
 Clipperz.Base.module('Clipperz.PM.UI.Web.Components');
 Clipperz.PM.UI.Web.Components.LoginForm = function(args) {
        args = args || {};
        this._autocomplete = args.autocomplete || 'off';
        Clipperz.PM.UI.Web.Components.LoginForm.superclass.constructor.apply(this, arguments);
        this._slots = {
                        'passphraseEntropy':this.getId('passphraseEntropy')
        };
        return this;
 }
 //=============================================================================
 Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.LoginForm, Clipperz.PM.UI.Common.Components.BaseComponent, {
        //-------------------------------------------------------------------------
        'toString': function () {
                return "Clipperz.PM.UI.Web.Components.LoginForm component";
        },
        'autocomplete': function () {
                return this._autocomplete;
        },
        //-------------------------------------------------------------------------
        'renderSelf': function() {
                this.append(this.element(), {tag:'div', id:'loginBox', children:[
                        {tag:'div', cls:'header'},
                        {tag:'div', cls:'body', id:this.getId('body'), children:[
                                {tag:'div', id:this.getId('loginForm'), children:[
                                        {tag:'div', children:[
                                                {tag:'h4', html:'Login'},
        //                                      {tag:'form', cls:'loginForm', autocomplete:this.autocomplete(), children:[
                                                {tag:'form', id:this.getId('form'), cls:'loginForm', children:[
                                                        {tag:'label', html:'username', 'for':this.getId('usernameField')},
-                                                        {tag:'input', id:this.getId('usernameField'), type:'text', cls:'username'/*, value:'joe'*/},
+                                                        {tag:'input', id:this.getId('usernameField'), type:'text', cls:'username'},
-                                                        {tag:'ul', id:this.getId('passwordOptions'), children:[
+                                                        {tag:'label', html:'passphrase / OTP', 'for':this.getId('passphraseField')},
-                                                                {tag:'li', id:this.getId('passphraseOption'), children:[
+                                                        {tag:'input', id:this.getId('passphraseField'), type:'password', cls:'password'},
-                                                                        {tag:'label', html:'passphrase / OTP', 'for':this.getId('passphraseField')},
-                                                                        {tag:'input', id:this.getId('passphraseField'), type:'password', cls:'password'/*, value:'clipperz'*/}
-                                                                        ]}      //,
-/*
-                                                                {tag:'li', id:this.getId('otpOption'), children:[
-                                                                        {tag:'label', html:'one-time password', 'for':this.getId('otpField_1')},
-                                                                        {tag:'input', id:this.getId('otpField_1'), type:'text', cls:'otp', value:'abcd-efgh'},
-                                                                        {tag:'input', id:this.getId('otpField_2'), type:'text', cls:'otp', value:'abcd-efgh'},
-                                                                        {tag:'input', id:this.getId('otpField_3'), type:'text', cls:'otp', value:'abcd-efgh'},
-                                                                        {tag:'input', id:this.getId('otpField_4'), type:'text', cls:'otp', value:'abcd-efgh'}
-                                                                ]}
-*/
-                                                        ]},
-        //                                              {tag:'input', id:this.getId('otpCheckbox'), type:'checkbox', cls:'checkbox'},
-        //                                              {tag:'label', html:'use a one-time passphrase', 'for':this.getId('otpCheckbox'), cls:'checkbox'},
                                                        {tag:'div', cls:'translations', children:[
                                                                {tag:'h4', html:'choose your language'},
                                                                {tag:'ul', children:[
                                                                        {tag:'li', cls:'selected', html:'english'},
                                                                        {tag:'li', html:'italiano'},
                                                                        {tag:'li', html:'dutch'},
                                                                        {tag:'li', html:'french'},
                                                                        {tag:'li', html:'spanish'},
                                                                        {tag:'li', html:'chinese'},
                                                                        {tag:'li', html:'japanese'},
                                                                        {tag:'li', html:'portugal'},
                                                                        {tag:'li', html:'arabic'}
                                                                ]}
                                                        ]},
                                                        {tag:'input', id:this.getId('submitButton'), type:'submit', value:'login', cls:'submit'}
                                                ]}
                                        ]}
                                ]}
                        ]},
                        {tag:'div', cls:'footer'}
                ]});
                if (this.autocomplete() == 'off') {
                        MochiKit.DOM.updateNodeAttributes(this.getElement('form'), {autocomplete:'off'});
                }
        //      Clipperz.Style.setBackgroundGradient(this.getElement('body'), {from:"#ff9955", to:"#ff6622"})
                
        //      this.setEntropyDisplay(new Clipperz.PM.UI.Common.Components.PasswordEntropyDisplay(this.getElement('passphraseField')));
        //      MochiKit.Signal.connect(this.getId('otpCheckbox'), 'onclick', this, 'togglePasswordFields');
        //      this.showPassphraseField();
                
                this.getElement('usernameField').focus();
                MochiKit.Signal.connect(this.getElement('loginForm'), 'onsubmit', this, 'loginEventHandler');
        },
        //-----------------------------------------------------------------------------
 /*
        'togglePasswordFields': function(anEvent) {
                var shouldUseOTP;
                
                shouldUseOTP = this.getElement('otpCheckbox').checked;
                
                if (shouldUseOTP == false) {
                        this.showPassphraseField();
                } else {
                        this.showOTPFields();
                }
        },
 */
        //-----------------------------------------------------------------------------
 /*
        'showPassphraseField': function() {
                this.showElement('passphraseOption');
                this.hideElement('otpOption');
        },
 */
        //-----------------------------------------------------------------------------
        'focusOnPassphraseField': function () {
                this.getElement('passphraseField').focus();
                this.getElement('passphraseField').select();
        },
        //-----------------------------------------------------------------------------
 /*
        'showOTPFields': function() {
                this.hideElement('passphraseOption');
                this.showElement('otpOption');
        },
 */
        //-------------------------------------------------------------------------
        
        'loginEventHandler': function(anEvent) {
-                        varusername;
+        //              varusername;
-                var passphrase;
+        //      var passphrase;
-        //      var shouldUseOTP;
-        //      var otp;
                var signalArguments;
                anEvent.preventDefault();
-                username = this.getElement('usernameField').value;
+        //      username = this.getElement('usernameField').value;
-                passphrase = this.getElement('passphraseField').value;
+        //      passphrase = this.getElement('passphraseField').value;
-        //              otp =this.getElement('otpField_1').value +
-        //                      this.getElement('otpField_2').value +
+        //      signalArguments = {username:username};
-        //                      this.getElement('otpField_3').value +
+        //      signalArguments.passphrase = passphrase;
-        //                      this.getElement('otpField_4').value;
-        //      shouldUseOTP = this.getElement('otpCheckbox').checked;
+                signalArguments = {
+                                'username':     this.getElement('usernameField').value,
-                signalArguments = {username:username};
+                                'passphrase':this.getElement('passphraseField').value
+                };
-        //      if (shouldUseOTP) {
-        //              signalArguments.otp = otp;
-        //      } else {
-                        signalArguments.passphrase = passphrase;
-        //      }
                MochiKit.Signal.signal(this, 'doLogin', signalArguments);
        },
        //-------------------------------------------------------------------------
        'submitButtonElement': function() {
                return this.getElement('submitButton');
        },
        //-------------------------------------------------------------------------
        __syntaxFix__: "syntax fix"
 });
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/LoginController.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/LoginController.js
index d0b378c..a57152d 100644
--- a/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/LoginController.js
+++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Controllers/LoginController.js
@@ -1,234 +1,228 @@
 /*
 Copyright 2008-2011 Clipperz Srl
 This file is part of Clipperz Community Edition.
 Clipperz Community Edition is an online password manager.
 For further information about its features and functionalities please
 refer to http://www.clipperz.com.
 * Clipperz Community Edition is free software: you can redistribute
  it and/or modify it under the terms of the GNU Affero General Public
  License as published by the Free Software Foundation, either version
  3 of the License, or (at your option) any later version.
 * Clipperz Community Edition is distributed in the hope that it will
  be useful, but WITHOUT ANY WARRANTY; without even the implied
  warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  See the GNU Affero General Public License for more details.
 * You should have received a copy of the GNU Affero General Public
  License along with Clipperz Community Edition.  If not, see
  <http://www.gnu.org/licenses/>.
 */
 Clipperz.Base.module('Clipperz.PM.UI.Web.Controllers');
 Clipperz.PM.UI.Web.Controllers.LoginController = function(args) {
        this._args = args || {};
        this._loginPage = null;
        this._newUserWizardController = null;
        this._newUserCreationComponent = null;
        return this;
 }
 MochiKit.Base.update(Clipperz.PM.UI.Web.Controllers.LoginController.prototype, {
        'toString': function() {
                return "Clipperz.PM.UI.Web.Controllers.LoginController";
        },
        'args': function () {
                return this._args;
        },
        //-----------------------------------------------------------------------------
        'loginPage': function() {
                if (this._loginPage == null) {
                        this._loginPage = new Clipperz.PM.UI.Web.Components.LoginPage();
                        
                        MochiKit.Signal.connect(this._loginPage, 'createNewAccountClick', this, 'handleCreateNewAccountClick')
                }
                
                return this._loginPage;
        },
        //-----------------------------------------------------------------------------
        'run': function(args) {
                        varslot;
                        varloginPage;
                        varloginForm;
                slot = args.slot;
                        loginForm =new Clipperz.PM.UI.Web.Components.LoginForm({'autocomplete': this.args()['autocomplete']});
                slot.setContent(this.loginPage());
                this.loginPage().slotNamed('loginForm').setContent(loginForm);
                MochiKit.Signal.connect(loginForm, 'doLogin', MochiKit.Base.method(this, 'doLogin', loginForm));
                MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'doLogin', MochiKit.Base.method(this, 'doLogin', loginForm));
        },
        //-----------------------------------------------------------------------------
        'doLogin': function(aLoginForm, anEvent) {
                var deferredResult;
                        varparameters;
-        //              varshouldUseOTP;
                var loginProgress;
                        varuser;
                var getPassphraseDelegate;
                parameters = anEvent;
-        //      shouldUseOTP = (typeof(parameters.passphrase) == 'undefined');
                getPassphraseDelegate = MochiKit.Base.partial(MochiKit.Async.succeed, parameters.passphrase);
                user = new Clipperz.PM.DataModel.User({'username':parameters.username, 'getPassphraseFunction':MochiKit.Base.method(Clipperz.PM.RunTime.mainController, 'getPassphrase')});
                loginProgress = new Clipperz.PM.UI.Web.Components.LoginProgress();
                deferredResult = new Clipperz.Async.Deferred("LoginController.doLogin", {trace:false});
                deferredResult.addCallbackPass(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'initProgress', {'steps':4});
                deferredResult.addMethod(Clipperz.PM.RunTime.mainController, 'setPassphraseDelegate', getPassphraseDelegate);
                deferredResult.addMethod(loginProgress, 'deferredShowModal', {deferredObject:deferredResult, openFromElement:aLoginForm.submitButtonElement()});
                deferredResult.addMethod(Clipperz.Crypto.PRNG.defaultRandomGenerator(), 'deferredEntropyCollection');
-        //      if (shouldUseOTP == false) {
+                deferredResult.addMethod(user, 'login');
-                        deferredResult.addMethod(user, 'login');
-        //      } else {
-        //              deferredResult.addMethod(user, 'loginUsingOTP', parameters.username, parameters.otp);
-        //      }
                deferredResult.addCallback(function(aLoginProgress, res) {
                        aLoginProgress.disableCancel();
                        return res;
                }, loginProgress);
                deferredResult.addCallback(function () {
                                MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'CARDS_CONTROLLER_DID_RUN',MochiKit.Base.method(loginProgress, 'deferredHideModalAndRemove', {closeToElement:MochiKit.DOM.currentDocument().body}));
                })
                deferredResult.addMethod(this, 'userLoggedIn', user, loginProgress, aLoginForm);
                deferredResult.addErrback (MochiKit.Base.method(this, 'handleFailedLogin', loginProgress));
                deferredResult.addErrback (MochiKit.Base.method(loginProgress, 'deferredHideModalAndRemove', {closeToElement:aLoginForm.submitButtonElement()}));
                deferredResult.addErrbackPass (MochiKit.Base.method(aLoginForm, 'focusOnPassphraseField'));
                deferredResult.addBoth(MochiKit.Base.method(Clipperz.PM.RunTime.mainController, 'removePassphraseDelegate', getPassphraseDelegate));
                deferredResult.callback();
                MochiKit.Signal.connect(loginProgress, 'cancelEvent', deferredResult, 'cancel');
                return deferredResult;
        },
        //-----------------------------------------------------------------------------
        'userLoggedIn': function(aUser) {
 //Clipperz.log(">>> LoginController.userLoggedIn");
                MochiKit.Signal.signal(this, 'userLoggedIn', {user: aUser});
 //Clipperz.log("<<< LoginController.userLoggedIn");
        },
        //=========================================================================
        'handleCreateNewAccountClick': function (aComponent) {
        //      return Clipperz.PM.DataModel.User.registerNewAccount("new", "user");
                return Clipperz.Async.callbacks("LoginController.handleCreateNewAccountClick", [
        //'             MochiKit.Base.method(this, 'newUserCreationComponent'),
        //              MochiKit.Base.methodcaller('deferredShowModal', {openFromElement:aComponent}),
        //              MochiKit.Base.method(this.newUserWizardController(), 'run')
                        MochiKit.Base.method(this, 'newUserCreationComponent'),
                        Clipperz.Async.forkAndJoin("Async.test succeedingForkedAndWaitDeferrer", [
                                MochiKit.Base.method(this.newUserCreationComponent(), 'deferredShowModal', {openFromElement:aComponent, duration:0.5}),
                                MochiKit.Base.method(this.newUserWizardController(), 'run')
                        ], {trace:false}),
        //                      MochiKit.Base.method(this.newUserCreationComponent(), 'enableCredentialsField')                 
                ], {trace:false});
        },
        //-----------------------------------------------------------------------------
        'newUserWizardController': function () {
                if (this._newUserWizardController == null) {
                        this._newUserWizardController = new Clipperz.PM.UI.Web.Controllers.NewUserWizardController({
                                'newUserCreationComponent': this.newUserCreationComponent()
                        })
        //                      MochiKit.Signal.connect(this._newUserWizardController, 'exit',this, 'handleHideNewUserCreationComponent');
                                MochiKit.Signal.connect(this._newUserWizardController, 'done',this, 'handleCompleteNewUserCreationComponent');
                }
                
                return this._newUserWizardController;
        },
        //-------------------------------------------------------------------------
        'newUserCreationComponent': function () {
                if (this._newUserCreationComponent == null) {
                        this._newUserCreationComponent = new Clipperz.PM.UI.Web.Components.NewUserCreationComponent();
                }
                
                return this._newUserCreationComponent;
        },
        'clearNewUserCreationComponent': function () {
                if (this._newUserCreationComponent != null) {
                        this._newUserCreationComponent.clear();
                }
                this._newUserCreationComponent = null;
        },
        //-------------------------------------------------------------------------
        'handleHideNewUserCreationComponent': function () {
                this.clearNewUserCreationComponent();
        },
        'handleCompleteNewUserCreationComponent': function (someParameters) {
                        vardeferredResult;
                        varuser;
                        varnewUserCreationComponent;
                user = someParameters.user;
                newUserCreationComponent = this.newUserCreationComponent();
                        MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'CARDS_CONTROLLER_DID_RUN',MochiKit.Base.method(newUserCreationComponent, 'deferredHideModal', {closeToElement:MochiKit.DOM.currentDocument().body})),
                deferredResult = new Clipperz.Async.Deferred("LoginController.handleCompleteNewUserCreationComponent", {trace:false});
                deferredResult.addCallbackList([
                        MochiKit.Base.method(Clipperz.Crypto.PRNG.defaultRandomGenerator(), 'deferredEntropyCollection'),
                        MochiKit.Base.method(user, 'login'),
                        MochiKit.Base.method(this, 'userLoggedIn', user),
                        MochiKit.Base.method(this, 'clearNewUserCreationComponent')
                ]);
                deferredResult.addErrback(function (aValue) { Clipperz.log("WTF!! Error doing the login after creating a new user" + aValue)});
                deferredResult.callback();
                
                return deferredResult;
        },
        //=========================================================================
        'handleFailedLogin': function(aLoginProgress, anError) {
                var result;
 //console.log("anError", anError);
                if (anError instanceof MochiKit.Async.CancelledError) {
                        result = anError;
                } else {
                        var deferredResult;
                        
 MochiKit.Logging.logError("## MainController - FAILED LOGIN: " + anError);
                        deferredResult = new MochiKit.Async.Deferred();
                        aLoginProgress.showErrorMessage("failed login");
        //              Clipperz.NotificationCenter.register(loginProgress, 'cancelEvent', deferredResult, 'callback');
                        MochiKit.Signal.connect(aLoginProgress, 'cancelEvent', deferredResult, 'callback');
                        deferredResult.addCallback(MochiKit.Async.fail, anError)
                        result = deferredResult;
author	Giulio Cesare Solaroli <giulio.cesare@clipperz.com>	2012-03-17 21:10:14 (UTC)
committer	Giulio Cesare Solaroli <giulio.cesare@clipperz.com>	2012-03-17 21:10:14 (UTC)
commit	25029b943781850c76fbf43827af0204f35a98bf (patch) (unidiff)
tree	1fcaefffee8366b548465a05a6c4cba0c31e131d
parent	928f3f3ed3981f7f81b69ed94f2a315205db39fa (diff)
download	clipperz-25029b943781850c76fbf43827af0204f35a98bf.zip clipperz-25029b943781850c76fbf43827af0204f35a98bf.tar.gz clipperz-25029b943781850c76fbf43827af0204f35a98bf.tar.bz2