diff --git a/simpleid/www/html/simpleid.css b/simpleid/www/html/simpleid.css
new file mode 100644
index 0000000..02dc644
--- /dev/null
+++ b/simpleid/www/html/simpleid.css
@@ -0,0 +1,383 @@
+/*
+ * SimpleID
+ *
+ * Copyright (C) Kelvin Mo 2009
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public
+ * License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * This program 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
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public
+ * License along with this program; if not, write to the Free
+ * Software Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA.
+ * 
+ * $Id$
+ */
+
+@import url(normalize.css);
+
+/* General elements -------------------------------------------------------- */
+html {
+    font: 12px/19px Helvetica, Arial, sans-serif;
+}
+
+h1 {
+    font-weight: normal;
+    color: #666666;
+}
+
+a {
+    border-bottom: 1px solid #CCCCCC;
+    color: #1144AA;
+    text-decoration: none !important;
+    font-weight: bold;
+}
+a:visited {
+    border-color: #CCCCCC;
+    color: #114499;
+}
+a:focus, a:hover {
+    border-color: #4488EE;
+    color: #4488EE;
+}
+
+table {
+    border-collapse: collapse;
+    margin: 0 0 1em 0;
+    width: 100%;
+}
+
+td, th {
+    border-bottom: 1px solid #CCCCCC;
+    text-align: left;
+    vertical-align: top;
+    padding: 5px 5px;
+}
+th {
+    border-bottom: 0px;
+    background-color: #666666;
+    color: #FFFFFF;
+    white-space: nowrap;
+    font-weight: bold;
+}
+
+pre {
+    border:1px solid #CCCCCC;
+    padding: 5px;
+    font-family:"Bitstream Vera Sans Mono","Courier New",monospace;
+    font-size: 0.9em;
+    white-space: nowrap;
+    overflow: scroll;
+}
+
+/* Page layout ------------------------------------------------------------- */
+#header {
+    background-color: #666666;
+    color: #CCCCCC;
+    padding: 0px 10px;
+    line-height: 1;
+}
+#header-inner { margin: 0px auto; max-width: 1140px; }
+
+#header h1 {
+    font-weight: bold;
+    font-size: 14px;
+    text-transform: uppercase;
+    margin: 0.5em 0;
+    color: #CCCCCC;
+    letter-spacing: 0;
+}
+
+#header h1 a {
+    color: #FFFFFF;
+    text-decoration: none;
+    border-bottom: none;
+}
+
+#nav-toggle, #logo { float: left; padding: 5px 0px; }
+#nav-toggle {
+    padding: 5px;
+    border-right: 1px solid #FFFFFF;
+    margin-right: 0.5em;
+    cursor: pointer;
+    display: none;
+}
+#nav-toggle img { padding: 0.5em; }
+
+#nav {
+    background-color: #666666;
+    color: #CCCCCC;
+    padding: 5px 10px;
+}
+#nav-inner { margin: 0px auto; max-width: 1140px; }
+#nav ul {
+    margin: 0;
+    padding: 0;
+    text-align: left;
+}
+#nav li {
+    display: inline;
+    list-style-type: none;
+}
+#nav a {
+    background-color: #888888;
+    padding: 6px 8px;
+    border-width: 0;
+    color: #FFFFFF;
+}
+#nav ul#nav-left { float: left; }
+#nav ul#nav-right { float: right; }
+
+#user {
+    float: right;
+    margin: 0.5em 0;
+    padding: 5px 0;
+}
+.logged-in-as .identity {
+    padding-left: 20px;
+    background: transparent url(user.png) no-repeat top left;
+    color: #FFFFFF;
+}
+.logged-in-as a {
+    color: #FFFFFF;
+    border-bottom-color: #FFFFFF;
+    font-weight: normal;
+}
+#logout:before { content: " · "; }
+
+#user-toggle {
+    float: right;
+    padding: 5px;
+    margin-left: 0.5em;
+    border-left: 1px solid #FFFFFF;
+    cursor: pointer;
+    display: none;
+}
+#user-toggle img { padding: 0.5em; }
+
+#footer {
+    margin: 2em 0;
+    padding: 0px 10px;
+    text-align: right;
+    font-size: 0.9em;
+    color: #999999;
+}
+#footer address { font-style: normal }
+#footer a { color: #999999; }
+
+#content {
+    margin: auto;
+    padding: 1em 10px;
+    max-width: 1140px;
+    clear: both;
+}
+
+
+/* Specific elements ------------------------------------------------------- */
+.realm, .site {
+    padding-left: 20px;
+    background: transparent url(world.png) no-repeat top left;
+}
+.app {
+    padding-left: 20px;
+    background: transparent url(application.png) no-repeat top left;
+}
+.device {
+    padding-left: 20px;
+    background: transparent url(drive.png) no-repeat top left;
+}
+.url-elide { color: #999999; }
+
+span.last-time { display: none; }
+
+.message, .login-security {
+    border: 1px solid #666666;
+    border-radius: 4px;
+    padding: 0 10px;
+    background: #DDDDDD;
+    margin-bottom: 10px;
+}
+.message p { line-height: 1; }
+
+.unsecure {
+    border: 1px solid #AAAA11;
+    background: #FFFFDD;
+}
+.unsecure p { padding-left: 20px; background: transparent url(lock-open.png) no-repeat top left; }
+.secure {
+    border: 1px solid #44AA11;
+    background: #EEFFDD;
+}
+.secure p { padding-left: 20px; background: transparent url(lock.png) no-repeat top left; }
+
+.block {
+    background-color: #EEEEEE;
+    margin-bottom: 20px;
+}
+.block-header {
+    background-color: #666666;
+    margin:0 0 5px;
+    padding: 5px 10px;
+}
+.block-header h2 {
+    font-size: 1.2em;
+    font-weight: bold;
+    color: #FFFFFF;
+    margin: 0;
+    padding: 0;
+    border-top-width: 0;
+}
+.block-header-links {
+    float: right;
+    font-size: 0.9em;
+    text-align: right;
+    white-space: nowrap;
+}
+.block-header-links a {
+    color: #FFFFFF;
+    border-bottom-color: #FFFFFF;
+    font-weight: normal;
+}
+.block-content {
+    padding: 5px 10px;
+}
+.block-content p {
+    margin: 0 0 5px 0;
+    padding: 0;
+}
+.block-content h3 {
+    font-size: 1em;
+    font-weight: bold;
+    margin: 0;
+    padding: 5px 0 0 0;
+}
+
+#discovery label { display: inline; }
+#discovery-templates { display: none; }
+
+.otp-key {
+    font-size: 18px;
+    font-family: "Bitstream Vera Sans Mono","Courier New",monospace;
+    margin: 5px;
+}
+.otp-letters { padding: 0 2px; }
+#otp-key-qr { padding: 16px 0; }
+
+/* Forms */
+.form-item { margin: 1em 0; }
+
+label {
+    display: block;
+    font-weight: bold;
+    padding: 2px 0;
+}
+label.option { font-weight: normal; }
+
+select, textarea, input[type="text"], input[type="password"], input[type="number"] {
+    display: inline-block;
+    padding: 0.5em;    
+    border: 1px solid #AAAAAA;
+    border-radius: 2px;
+}
+select:focus, textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus {
+    border-color: #1144AA;
+}
+
+input[type="submit"], input[type="button"] {
+    padding: 0.5em 1em;
+    background-color: #EEEEEE;
+    border: 1px solid #999999;
+    border-radius: 2px;
+    zoom: 1;
+    vertical-align: middle;
+    font-weight: bold;
+}
+input[type="submit"]:active, input[type="button"]:active {
+    box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
+}
+input[type="submit"][disabled], input[type="button"][disabled] {
+    color: #999999 !important;
+    background-color: #EEEEEE !important;
+    border-color: #999999 !important;
+}
+input[type="submit"].form-default, input[type="button"].form-default {
+    color: #FFFFFF;
+    background-color: #1144AA;
+    border-color: #114499;
+}
+
+input[type="radio"], input[type="checkbox"] { margin: 0.5em 0; }
+input[type="radio"]:focus, input[type="checkbox"]:focus {
+    outline: 1px auto #1144AA;
+}
+
+/* Dialogs and dialog pages */
+.dialog-page { background: #EEEEEE; }
+.dialog-page #content {
+    padding-top: 50px;
+    max-width: 400px;
+}
+.dialog-page #content-inner {
+    padding: 20px;
+    border: 10px solid #DDDDDD;
+    background: #FFFFFF;
+}
+
+.dialog-page form { padding-right: 2px; } /* Used to adjust the padding in text boxes */
+.dialog-page .form-item { padding-right: 1em; } /* Used to adjust the padding in text boxes */
+.dialog-page select, .dialog-page textarea, .dialog-page input[type="text"], .dialog-page input[type="password"], .dialog-page input[type="number"] {
+    width: 100%;
+}
+
+/* Mobile devices ---------------------------------------------------------- */
+@media only screen and (max-width: 767px) {
+    html { font-size: 14px; }
+
+    #logo .version { display: none; }
+
+    #nav-toggle, #user-toggle { display: block; }
+    #nav-toggle.expand, #user-toggle.expand { background-color: #888888; }
+
+    #nav {
+        display: none;
+        position: absolute;
+        float: none;
+        left: 10px;
+        top: 40px;
+        padding: 0;
+    }
+    #nav.expand { display: block; }
+    #nav li { display: block; }
+    #nav a { display: block; }
+
+    #user {
+        display: none;
+        position: absolute;
+        float: none;
+        right: 10px;
+        top: 40px;
+        background-color: #888888;
+        margin: 0;
+        padding: 0 8px;
+    }
+    #user.expand { display: block; }
+    #user span {
+        display: block;
+        padding: 6px 0;
+    }
+    #logout:before { content: ""; }
+    
+    .dialog-page { background: #FFFFFF; }
+    .dialog-page #content { padding-top: 10px; }
+    .dialog-page #content-inner {
+        padding: 0px;
+        border-width: 0px;
+    }
+}
+