added templates of html that should have been pushed in previous commit webid
authorHenry Story <henry.story@bblfish.net>
Sun, 18 Dec 2011 15:01:02 +0100
branchwebid
changeset 151 452667628c73
parent 150 ae0e626ba6c4
child 152 5df9d155c38d
added templates of html that should have been pushed in previous commit
src/main/resources/template/webidp/WebIdService.about.xhtml
src/main/resources/template/webidp/WebIdService.auth.html
src/main/resources/template/webidp/WebIdService.badcert.html
src/main/resources/template/webidp/WebIdService.entry.html
src/main/resources/template/webidp/idp/auth_arrow.png
src/main/resources/template/webidp/idp/bg.png
src/main/resources/template/webidp/idp/general.css
src/main/resources/template/webidp/idp/icon.png
src/main/resources/template/webidp/idp/production.min.css
src/main/resources/template/webidp/idp/profile_anonymous.png
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main/resources/template/webidp/WebIdService.about.xhtml	Sun Dec 18 15:01:02 2011 +0100
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head id="head">
+	<title>WebId Identity Provider Info Page</title>
+	<script src="/public/logout.js" type="text/javascript" />
+</head>
+<body>
+
+<div id="tx-content">
+    <p>This is a simple Identity Provider for <a href="http://webid.info/spec">WebID</a>. It is meant to help
+        sites that would like to provide WebID authentication to their users quickly.</p>
+    <p>If you are hosting such a site then you can rely on this service to help authenticate your users with WebID,
+        without your needing to set up https on your server. When you are satisfied of its usefulness you can deploy it
+        to your site.</p>
+    <p>There are two stages to get going. First you need to create the login button linking to this service. Then you need to
+        understand how to interpret what will be returned, so that you can write a script to authenticate
+        your users with the given WebID - ie, set a cookie for them.</p>
+
+    <h2>Create your login link</h2>
+    <p>Create a login button or link that points to this service. This needs to contain an attribute as a URL to a
+        script on your site so that we can send you the response. This will be done by redirecting the user's browser
+        with a signed response containing his WebID. To create such a link enter the URL of your login service here:</p>
+    <form action="" method="get">Requesting auth service URL:
+        <input name="rs" size="80" type="text" />
+        <input type="submit" value="Log into this service provider" />
+    </form>
+    <p>By clicking on the form you will land on a page whose URL is the one you should enter into your
+        login button/link. You will also see what identity you were logged in as, and given some options to change
+        it.
+    </p>
+
+    <h2>Understanding the response</h2>
+    <p>The redirected to URL is constructed on the following pattern: </p>
+    <pre><b>$relyingService?webid=$webid&amp;ts=$timeStamp</b>&amp;sig=$URLSignature</pre>
+    <p>Where the above variables have the following meanings: </p>
+    <ul>
+        <li><code>$relyingService</code> is the URL passed by the server in
+            the initial request as the <code>rs</code> parameter, and is the service to which the response is sent.</li>
+        <li><code>$webid</code> is the WebID of the user connecting.</li>
+        <li><code>$timeStamp</code> is a time stamp in XML Schema format
+            (same as used by Atom). This is needed to reduce the ease of developing
+            replay attacks.</li>
+        <li><code>$URLSignature</code> is the signature of the whole URL
+            in bold above using the public key shown below, and encoded in a
+            <a href="http://commons.apache.org/codec/apidocs/org/apache/commons/codec/binary/Base64.html#encodeBase64URLSafeString%28byte[]%29">URL friendly base64</a> encoding.</li>
+    </ul>
+
+    <h3>Error responses</h3>
+    <p>In case of error the service gets redirected to <code>$relyingService?error=$code</code>Where
+        $code can be either one of</p>
+    <ul>
+        <li><code>nocert</code>: when the client has no cert. </li>
+        <li><code>noVerifiedWebId</code>: no verified WebId was found in the certificate</li>
+        <li><code>noWebId</code>: todo: show this error when there are no webids at all</li>
+        <li><code>IdPError</code>: for some error in the IdP setup. Warn
+            the IdP administrator!</li>
+        <li>other messages, not standardised yet</li>
+    </ul>
+
+    <h2>Verifiying the WebId</h2>
+
+    <p>In order for the Relying Party to to be comfortable that the returned WebId
+        was not altered in transit, the whole URL is signed by this server as
+        shown above. Here are the public keys and algorithms this us using:</p>
+
+
+    <p>The signature uses the RSA with SHA-1 algorithm.</p>
+
+    <p>The public key used by this service that verifies the signature is: </p>
+
+    <ul>
+        <li>Key Type: <pre>http://www.w3.org/ns/auth/rsa#RSAPublicKey</pre></li>
+        <li>public exponent (decimal): <pre>65537</pre> </li>
+        <li>modulus (decimal):<br />
+           <pre>84:56:e8:8b:04:b9:1f:3b:10:00:07:ab:18:e8:fc:66:4e:aa:bc:47:f6:
+41:56:ab:96:6f:9c:d5:fc:5d:e9:fd:ce:a1:0f:5e:ce:26:f5:2e:35:e2:
+b7:0f:b3:db:17:0b:1b:c9:73:69:39:8a:39:4d:23:c3:b2:99:a7:a5:8b:
+5b:a8:2a:84:05:a3:d8:14:35:2e:49:7d:47:b6:80:52:90:37:ca:99:39:
+da:08:a4:f2:ef:f9:26:25:a9:4e:dd:44:57:df:43:3f:95:cd:cf:34:3f:
+41:58:e4:bc:19:63:ad:8f:b5:65:e3:3e:5e:d2:b3:19:f6:ca:ed:e5:a1:
+e7:cd:f1:9f:70:04:ea:66:a9:ad:77:cb:02:8d:c1:8d:45:89:39:07:b4:
+54:71:98:82:b0:55:39:c4:50:ad:24:3a:df:8f:df:fa:39:36:da:d9:98:
+65:1c:dd:4d:3f:d9:09:a7:5e:2d:de:cd:af:22:1e:25:b1:2e:d1:6d:74:
+e4:96:2f:2a:87:5a:c1:23:37:ff:38:ed:e1:f5:c5:20:fc:81:cf:cb:c7:
+1e:61:d1:77:6b:32:0d:6a:94:cb:8e:98:55:07:ea:09:f5:01:75:79:07:
+6e:f5:50:06:d0:1f:bd:11:94:85:86:c5:42:6f:76:e9:a9:fa:cf:db:91:
+13:92:c2:69:
+</pre>
+        </li>
+    </ul>
+
+    <p>For ease of use, depending on which tool you use, here is the public key in a PEM format:</p>
+<pre>
+-----BEGIN PUBLIC KEY-----
+MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAhFboiwS5HzsQAAerGOj8
+Zk6qvEf2QVarlm+c1fxd6f3OoQ9ezib1LjXitw+z2xcLG8lzaTmKOU0jw7KZp6WL
+W6gqhAWj2BQ1Lkl9R7aAUpA3ypk52gik8u/5JiWpTt1EV99DP5XNzzQ/QVjkvBlj
+rY+1ZeM+XtKzGfbK7eWh583xn3AE6maprXfLAo3BjUWJOQe0VHGYgrBVOcRQrSQ6
+34/f+jk22tmYZRzdTT/ZCadeLd7NryIeJbEu0W105JYvKodawSM3/zjt4fXFIPyB
+z8vHHmHRd2syDWqUy46YVQfqCfUBdXkHbvVQBtAfvRGUhYbFQm926an6z9uRE5LC
+aQIDAQAB
+-----END PUBLIC KEY-----
+</pre>
+</div>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main/resources/template/webidp/WebIdService.auth.html	Sun Dec 18 15:01:02 2011 +0100
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!--
+  ~ Copyright (c) 2011 Henry Story (bblfish.net)
+  ~ under the MIT licence defined at
+  ~    http://www.opensource.org/licenses/mit-license.html
+  -->
+<html>
+<head>
+    <title>WebID Authentication Service</title>
+    <link rel="stylesheet" type="text/css" href="idp/production.min.css"/>
+    <script src="/public/logout.js" type="text/javascript"></script>
+</head>
+
+<body class="form">
+
+<div id="wrapper">
+    <header id="header" class="cf">
+        <div class="wrapper">
+            <img id="logo" src="idp/icon.png"/>
+        </div>
+    </header>
+
+    <div id="content">
+        <section id="formWrap">
+            <form class="webidform" novalidate="" action="WebIdService.auth.html" method="POST">
+                <div id="favicon">
+                    <div class="vertical">
+                        <a class="response auth" href="http://webid.fcns.eu/"><span class="button sitename" id="sitename">webid.fcns.eu</span></a>
+                    </div>
+                </div>
+                <div id="signIn">
+                    <div class="arrow"></div>
+                    <div class="table">
+                        <div class="vertical contents">
+                            <div class="form_section">
+                                <span class="authenticated">
+                                    <p><b>Name:</b> <span class="user_name">Bblfish</span></p>
+                                    <img class="mugshot" height="100px" src="http://bblfish.net/pix/bfish.small.east.jpg" alt="User avatar"/>
+                                </span>
+                                <div class="submit cf">
+                                    <input type="submit"  class="light" tabindex="3" value="change id" onclick="logout()"/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </section>
+
+
+        <section id="wait" style="display: none; ">
+            <div class="table">
+                <div class="vertical contents">
+                    <h2>Communicating with server</h2>
+
+                    <p>Just a moment while we talk with the server.</p>
+                </div>
+            </div>
+        </section>
+
+
+        <section id="error">
+            <div class="table">
+                <div class="vertical contents">
+                </div>
+            </div>
+        </section>
+
+    </div>
+
+</div>
+<!-- END OF SITE_WRAPPER -->
+
+<footer>
+    WebID for a distributed Secure Social Web ... Now !
+</footer>
+<!-- END OF FOOTER -->
+
+
+</body>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main/resources/template/webidp/WebIdService.badcert.html	Sun Dec 18 15:01:02 2011 +0100
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<!--
+  ~ Copyright (c) 2011 Henry Story (bblfish.net)
+  ~ under the MIT licence defined at
+  ~    http://www.opensource.org/licenses/mit-license.html
+  -->
+<html>
+<head>
+    <title>WebID Authentication Service</title>
+    <link rel="stylesheet" type="text/css" href="idp/production.min.css"/>
+    <script src="/public/logout.js" type="text/javascript"></script>
+</head>
+
+<body class="form">
+
+<div id="wrapper">
+<header id="header" class="cf">
+        <div class="wrapper">
+            <img id="logo" src="idp/icon.png"/>
+        </div>
+</header>
+ 
+
+<div id="content">
+    <section id="formWrap">
+        <form class="webidform" novalidate="" action="WebIdService.auth.html" method="POST">
+            <div id="favicon">
+                <div class="vertical">
+                    <a class="response" href="http://webid.fcns.eu/"><strong class="sitename" id="sitename">webid.fcns.eu</strong></a>
+                </div>
+            </div>
+            <div id="signIn">
+                <div class="arrow"></div>
+                <div class="table">
+                    <div class="vertical contents">
+                        <strong class="error">Certificate missing a WebID</strong>  (<a href="/test/auth/webid">details</a>)
+                        <div class="form_section">
+                            <img class="depiction" src="idp/profile_anonymous.png"/>
+                            <div class="submit cf">
+                                <input type="submit" class="button" tabindex="3" value="try again" onclick="logout()"/>
+                                <button class="newuser" tabindex="3">verify email</button>
+
+                                <button class="returning" tabindex="3">select email</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </section>
+
+
+    <section id="wait" style="display: none; ">
+        <div class="table">
+            <div class="vertical contents">
+                <h2>Communicating with server</h2>
+                <p>Just a moment while we talk with the server.</p>
+            </div>
+        </div>
+    </section>
+
+
+    <section id="error">
+        <div class="table">
+            <div class="vertical contents">
+            </div>
+        </div>
+    </section>
+
+</div>
+
+</div>  <!-- END OF SITE_WRAPPER -->
+
+	<footer>
+    	 WebID for a distributed Secure Social Web ... Now !
+	</footer> <!-- END OF FOOTER -->
+
+
+</body>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main/resources/template/webidp/WebIdService.entry.html	Sun Dec 18 15:01:02 2011 +0100
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+  ~ Copyright (c) 2011 Henry Story (bblfish.net)
+  ~ under the MIT licence defined at
+  ~    http://www.opensource.org/licenses/mit-license.html
+  -->
+<html>
+<head>
+<title>WebID Authentication Service</title>
+<link rel="stylesheet" type="text/css" href="idp/production.min.css"/>
+</head>
+
+<body class="form">
+
+<div id="wrapper">
+<header id="header" class="cf">
+	<div class="wrapper">
+        		<img id="logo" src="idp/icon.png"/>
+    </div>
+</header>
+ 
+
+<div id="content">
+    <section id="formWrap">
+        <form class="webidform" novalidate="" action="WebIdService.badcert.html" method="POST">
+            <div id="favicon">
+                <div class="vertical">
+                    <a class="response" href="http://webid.fcns.eu/"><strong class="sitename" id="sitename">webid.fcns.eu</strong></a>
+                </div>
+            </div>
+            <div id="signIn">
+                <div class="arrow"></div>
+                <div class="table">
+                    <div class="vertical contents">
+                        <img class="depiction" src="idp/profile_anonymous.png"/>
+                        <div class="form_section">
+                            <div class="submit cf">
+                                <input type="submit" class="button" tabindex="3" value="sign in"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </section>
+
+
+    <section id="wait" style="display: none; ">
+        <div class="table">
+            <div class="vertical contents">
+                <h2>Communicating with server</h2>
+                <p>Just a moment while we talk with the server.</p>
+            </div>
+        </div>
+    </section>
+
+
+    <section id="error">
+        <div class="table">
+            <div class="vertical contents">
+            </div>
+        </div>
+    </section>
+
+</div>
+
+</div>  <!-- END OF SITE_WRAPPER -->
+
+	<footer>
+    	 WebID ready for the Secure Social Web
+	</footer> <!-- END OF FOOTER -->
+
+
+</body>
+</html>
Binary file src/main/resources/template/webidp/idp/auth_arrow.png has changed
Binary file src/main/resources/template/webidp/idp/bg.png has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main/resources/template/webidp/idp/general.css	Sun Dec 18 15:01:02 2011 +0100
@@ -0,0 +1,118 @@
[email protected] "UTF-8";
+/* CSS Document */
+
+*{ outline:none; font-size:14px; color:#333333; margin:0px; padding:0px;font-family:Arial, Helvetica, sans-serif; }
+body{  }
+a{ display:inline-block; text-decoration:none; }
+.clear{ clear:both; }
+.hide{ display:none; }
+
+ul{ padding-left:20px; margin:5px 0px; }
+ul li{ padding:4px 0px; }
+
+h1, h2, h3 {  }
+h3{ color:#666; font-weight:lighter; }
+
+
+
+/* GENERAL FORM */
+
+input, textarea { border:1px solid #333; width:300px; padding:4px; margin-bottom:10px; }
+button{ padding:5px 10px; border:none; background:#F2F2F2; color:#0083E2; cursor:pointer; margin-right:10px;-moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;border-radius: 5px; }
+button:hover{ border:none; background:#CCC; color:#00396B; }
+select{  }
+
+a{ color:#0083E2; text-decoration:none; font-size:12px; }   
+a:hover{ text-decoration:none; color:#00396B; } 
+
+
+
+#topbar{ width:100%; height:50px; background:#333; color:#CCC; }
+#topbar img{ position:relative; top:-2px; }
+.wrapper, .wrapper h1{ color:#CCC; }
+.wrapper h1, .wrapper input, .wrapper button{ display:inline-block; }
+
+.wrapper h1{ font-size:24px; padding:10px 0px; margin-right:40px; cursor:pointer; position:relative; top:3px; }
+
+.wrapper form{ display:inline-block; width:280px; }
+.wrapper input{ width:240px; background:#666; border:1ps solid #000; position:relative; z-index:1; color:#CCC; }
+.wrapper button{ display:inline-block; position:relative; z-index:2; left:-30px; width:15px; height:15px; padding:0px; margin:0px; border:none; cursor:pointer; background:url(../a_img/search_btn.png) no-repeat; }
+
+.topbar_links{ text-decoration:none; font-size:16px; padding:4px; margin:0px 3px; color:#CCC; }
+.topbar_links:hover{ color:#999; }
+
+
+.wrapper div{ position:absolute; right:0px; text-align:right; top:18px; color:#CCC; }
+.wrapper div a{ color:#CCC; font-size:14px; text-decoration:none; }
+.wrapper div a:hover{ text-decoration:none; color:#999; }
+.wrapper div span{ margin:0px 4px; color:#ccc; }
+
+#site_wrapper, .wrapper{ width:960px; margin:0 auto; position:relative; }
+
+#site_wrapper{ margin-top:10px; margin-bottom:20px; min-height:500px; }
+
+#site_content{ width:100%; position:relative; }
+
+
+#left_column{ width:520px; float:left; padding-right:17px; border-right:1px solid #666; height:100%; min-height:900px; }
+
+#right_column{ width:400px; float:right; height:100%; }
+
+#footer{ margin-bottom:50px; margin-top:20px; padding-top:10px; border-top:1px solid #CCC; text-align:center; color:#9f9f9f; }
+
+
+#status_box{ padding:15px 0px; }
+#status_box h2{ padding:5px; font-size:16px; font-weight:normal; display:block; }
+#status_box textarea{ width:510px; height:20px; display:block; }
+#status_box  button{  }
+#status_box  button:hover{  }
+#status_box span{ font-size:11px; color:#999; font-style:oblique; }
+
+
+
+#load_more{ width:100%; background:#EEFAFF; padding:10px 0px; }
+
+
+
+/* FOR USER WALL FEED DISPLAY */
+.story_box{ width:100%; border-bottom:1px solid #CCC; padding:15px 0px 5px 0px; }
+.story_box:hover{ background:#F2F2F2; }
+
+.story_left_column{ float:left; width:40px; margin-right:18px; margin-bottom:15px; padding-left:3px; }
+.story_left_column img{ width:100%; }
+
+.story_right_column{float:right; width:875px; }
+.story_right_column input{ display:inline-block; width:15px; height:15px; float:left; margin-top:2px; }
+.text{ font-size:16px; margin-bottom:10px; }
+
+.story_bottom_row{ width:100%; }
+.story_bottom_left{ float:left; margin-left:3px; }
+.story_bottom_left span{  color:#B3B3B3; font-size:10px; margin-right:5px; }
+.story_bottom_left span a{font-size:10px; }
+.story_bottom_right{ float:right; margin-right:3px; }
+
+.strikethrough{ text-decoration:line-through; }
+
+
+
+
+/* FOR COMMENT SLIDE DOWN */
+.story_comments{ width:865px; padding:10px 5px; background:#F2F6FE; border-bottom:1px solid #CCC; margin-left:85px; }
+.story_comments_img{ float:left; width:40px; }
+.story_comments_txt{ float:right; width:800px; }
+.story_comments_txt textarea{ height:20px; width:780px !important; }
+.story_comments_txt strong{ color:#999; font-weight:lighter; }
+.story_comments_txt button{  }
+.story_comments_txt button:hover{  }
+
+/* FOR USER INFO DISPLAY */
+
+
+
+
+
+
+/* FOR PROFILE PAGE */
+#profile_img_holder{ width:80px; height:80px; border:1px solid #333333; background:url(img/ajax-loader.gif) 50% 50%; float:left; margin-right:20px; }
+#profile_img_holder img{ width:100%; height:100%; }
+
Binary file src/main/resources/template/webidp/idp/icon.png has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main/resources/template/webidp/idp/production.min.css	Sun Dec 18 15:01:02 2011 +0100
@@ -0,0 +1,806 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is Mozilla BrowserID.
+ *
+ * The Initial Developer of the Original Code is Mozilla.
+ * Portions created by the Initial Developer are Copyright (C) 2011
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Lloyd Hilaiel <[email protected]>
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+/** Adapted for WebID, by Henry Story */
+
+* {
+    margin: 0;
+    padding: 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    box-sizing: border-box
+}
+
+html, body {
+    height: 100%
+}
+
+body {
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    line-height: 21px;
+    background-image: url('bg.png');
+    overflow-y: scroll
+}
+
+.cf:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0
+}
+
+html[xmlns] .cf {
+    display: block
+}
+
+* html .cf {
+    height: 1%
+}
+
+.sans {
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
+}
+
+.serif {
+    font-family: 'Droid Serif', Georgia, serif
+}
+
+.mono {
+    font-family: 'Monaco', monospace
+}
+
+.tooltip {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background: #000;
+    background: rgba(0, 0, 0, .7);
+    color: #fff;
+    border-radius: 5px;
+    padding: 2px 15px;
+    border: 2px solid #000;
+    font-weight: bold;
+    display: none;
+    max-width: 275px;
+    z-index: 5
+}
+
+a {
+    color: #222;
+    text-decoration: none
+}
+
+a:hover, button:hover {
+    text-decoration: underline
+}
+
+p:last-child {
+    margin-bottom: 0 !important
+}
+
+input[type=email], input[type=password] {
+    width: 100%;
+    font-size: 14px;
+    padding: 5px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #a3a29d #c6c3b4 #c6c3b4 #a3a29d;
+    outline: 0;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    -o-border-radius: 3px;
+    border-radius: 3px;
+    -webkit-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
+    -moz-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
+    -o-box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
+    box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5)
+}
+
+input[type=email]:focus, input[type=password]:focus {
+    border: 1px solid #549fdc;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    -o-border-radius: 0;
+    border-radius: 0;
+    -webkit-box-shadow: 0 0 0 1px #549fdc inset;
+    -moz-box-shadow: 0 0 0 1px #549fdc inset;
+    -o-box-shadow: 0 0 0 1px #549fdc inset;
+    box-shadow: 0 0 0 1px #549fdc inset
+}
+
+input[type=email]:disabled, input[type=password]:disabled {
+    background-color: #f0f0f0;
+    color: #4f4f4f
+}
+
+input[type=radio], input[type=checkbox] {
+    cursor: pointer
+}
+
+img.depiction {
+    float: left;
+}
+
+a.auth {
+    text-decoration: none;
+}
+
+span[class~="sitename"] {
+    text-decoration: none;
+    font-size: 28px;
+    height: 52px;
+    padding: 7px 25px;
+    float: none;
+    vertical-align: middle;
+    border: 1px solid #37a6ff;
+    font-family: 'Droid Serif', Georgia, serif;
+    color: #fff;
+    text-shadow: -1px -1px 0 #37a6ff;
+    text-transform: lowercase;
+    cursor: pointer;
+    -webkit-box-shadow: 0 0 0 1px #76c2ff inset;
+    -moz-box-shadow: 0 0 0 1px #76c2ff inset;
+    -o-box-shadow: 0 0 0 1px #76c2ff inset;
+    box-shadow: 0 0 0 1px #76c2ff inset;
+    -webkit-border-radius: 8px;
+    -moz-border-radius: 8px;
+    -o-border-radius: 8px;
+    border-radius: 8px;
+    background-color: #37a6ff;
+    background-image: -moz-linear-gradient(center top, #76c2ff 0, #37a6ff 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76c2ff), color-stop(100%, #37a6ff))
+}
+
+
+button, .button {
+    font-size: 14px;
+    height: 28px;
+    padding: 0 10px;
+    float: right;
+    vertical-align: middle;
+    border: 1px solid #37a6ff;
+    font-family: 'Droid Serif', Georgia, serif;
+    color: #fff;
+    text-shadow: -1px -1px 0 #37a6ff;
+    text-transform: lowercase;
+    cursor: pointer;
+    -webkit-box-shadow: 0 0 0 1px #76c2ff inset;
+    -moz-box-shadow: 0 0 0 1px #76c2ff inset;
+    -o-box-shadow: 0 0 0 1px #76c2ff inset;
+    box-shadow: 0 0 0 1px #76c2ff inset;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -o-border-radius: 5px;
+    border-radius: 5px;
+    background-color: #37a6ff;
+    background-image: -moz-linear-gradient(center top, #76c2ff 0, #37a6ff 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76c2ff), color-stop(100%, #37a6ff))
+}
+
+button:hover, button:focus, .button:hover, .button:focus {
+    background-color: #76c2ff;
+    background-image: -moz-linear-gradient(center top, #76c2ff 50%, #37a6ff 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #76c2ff), color-stop(100%, #37a6ff))
+}
+
+button:active, .button:active {
+    background-color: #006ec6;
+    border: 1px solid #003e70;
+    color: #eee;
+    text-shadow: -1px -1px 0 #006ec6;
+    -webkit-box-shadow: 0 0 5px #003763 inset;
+    -moz-box-shadow: 0 0 5px #003763 inset;
+    -o-box-shadow: 0 0 5px #003763 inset;
+    box-shadow: 0 0 5px #003763 inset;
+    background-image: -moz-linear-gradient(center top, #3aa7ff 0, #006ec6 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3aa7ff), color-stop(100%, #006ec6))
+}
+
+button::-moz-focus-inner, .button::-moz-focus-inner {
+    padding: 0;
+    border: 0
+}
+
+
+button[disabled] {
+    opacity: .5
+}
+
+hr {
+    height: 1px;
+    border: 0;
+    background-color: #eee;
+    width: 700px
+}
+
+.right {
+    text-align: right
+}
+
+h1 {
+    font-size: 24px;
+    font-weight: normal;
+    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5)
+}
+
+header ul li {
+    display: inline-block;
+    float: left
+}
+
+header a {
+    color: #222
+}
+
+header a.home {
+    width: 80px;
+    height: 21px;
+    background-image: url('icon.png');
+    display: block;
+    background-position: left 4px;
+    background-repeat: no-repeat
+}
+
+footer {
+    color: #aaa
+}
+
+footer a {
+    color: #aaa
+}
+
+footer ul li {
+    display: inline-block;
+    float: left;
+    margin: 0 10px 0 0
+}
+
+footer .help {
+    float: right;
+    color: #62615f;
+    cursor: help
+}
+
+.cancelVerify {
+    font-weight: bold
+}
+
+h2 {
+    margin-bottom: 20px;
+    font-size: 150%;
+    color: #222;
+    font-weight: bold
+}
+
+#wrapper {
+    min-width: 640px;
+    position: relative
+}
+
+.table {
+    display: table;
+    width: 100%
+}
+
+.vertical {
+    height: 250px;
+    display: table-cell;
+    vertical-align: middle;
+    width: 100%
+}
+
+#content {
+    position: relative;
+    height: 250px;
+    overflow: hidden
+}
+
+section {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 0
+}
+
+section>.contents {
+    display: table-cell;
+    vertical-align: middle;
+    height: 250px
+}
+
+#wait {
+    text-align: center;
+    z-index: 1;
+    background-image: url("bg.png")
+}
+
+#error {
+    position: absolute;
+    text-align: center;
+    display: none;
+    z-index: 2;
+    background-color: #fff
+}
+
+#error ul, #error li {
+    list-style-type: none
+}
+
+#wait strong, #error strong {
+    color: #222;
+    font-weight: bold
+}
+
+#error.unsupported .vertical {
+    width: 630px;
+    margin: 0 auto;
+    display: block
+}
+
+#error.unsupported .vertical>div {
+    display: table-cell;
+    vertical-align: middle;
+    padding: 0 10px;
+    height: 250px
+}
+
+#error #moreInfo {
+    display: none
+}
+
+#error a {
+    color: #549fdc;
+    text-decoration: underline
+}
+
+#error #borderbox {
+    border-left: 1px solid #777;
+    padding: 20px 0
+}
+
+#error #borderbox img {
+    border: 0
+}
+
+#error #alternative .lighter {
+    color: #777
+}
+
+#formWrap {
+    background-color: #fff;
+    background-image: none;
+    display: block
+}
+
+#signIn {
+    background-image: url('bg.png');
+    position: absolute;
+    left: 0;
+    top: 0
+}
+
+#signIn .table {
+    width: 325px;
+    margin-right: 40px
+}
+
+.arrow {
+    width: 40px;
+    height: 250px;
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-image: url('auth_arrow.png');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: #fff
+}
+
+#favicon {
+    position: absolute;
+    left: 375px;
+    top: 0;
+    right: 0;
+    z-index: 10
+}
+
+#favicon strong {
+    font-size: 1.5em
+}
+
+#favicon img {
+    display: block;
+    margin: 0 auto 10px
+}
+
+#favicon .vertical {
+    display: block;
+    line-height: 250px;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis
+}
+
+div#required_email {
+    padding-top: .7em;
+    font-size: 1.2em;
+    font-weight: bold
+}
+
+#signIn .vertical {
+    padding: 0 20px
+}
+
+#signIn .vertical ul {
+    list-style-type: none;
+    position: relative
+}
+
+#signIn .vertical ul li {
+    margin-top: 10px
+}
+
+#signIn .vertical ul li:first-child {
+    margin-top: 0
+}
+
+#signIn .submit {
+    line-height: 28px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0
+}
+
+#signIn .submit>p {
+    line-height: 13px;
+    clear: right;
+    text-align: center
+}
+
+#signIn label.half, .half {
+    width: 50%;
+    display: inline-block;
+    float: left
+}
+
+#forgotPassword {
+    color: #888784;
+    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
+    font-size: 11px
+}
+
+#signIn button.create {
+    font-size: 14px;
+    height: 28px;
+    padding: 0 10px;
+    float: right
+}
+
+label {
+    display: block;
+    color: #62615f;
+    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5)
+}
+
+label.selectable {
+    cursor: pointer
+}
+
+.inputs>li>label {
+    color: #333
+}
+
+.inputs>li>label.preselected {
+    font-weight: bold
+}
+
+.inputs>li:only-child>label.selectable {
+    cursor: default
+}
+
+.learn {
+    display: inline-block;
+    font-size: 12px;
+    color: #62615f;
+    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5)
+}
+
+footer .learn a {
+    color: #549fdc
+}
+
+.checkregistration p {
+    color: #62615f;
+    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5)
+}
+
+header {
+    padding: 20px;
+    font-weight: bold;
+    background-color: rgba(0, 0, 0, 0.05);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+    -webkit-box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.1) inset;
+    -moz-box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.1) inset;
+    -o-box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.1) inset;
+    box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.1) inset
+}
+
+header ul {
+    display: block;
+    float: left
+}
+
+header ul li {
+    margin: 0 10px 0 0;
+    color: #222;
+    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5)
+}
+
+header, footer {
+    display: block;
+    width: 100%;
+    border-top: 1px solid rgba(0, 0, 0, 0.05)
+}
+
+footer {
+    padding: 20px
+}
+
+.inputs {
+    margin: 1em 0 .5em;
+    padding: 0 1em;
+    line-height: 18px
+}
+
+.pickemail .inputs {
+    max-height: 110px;
+    overflow-y: auto;
+    position: relative
+}
+
+.form_section {
+    height: 176px;
+    position: relative
+}
+
+.add {
+    font-size: 80%
+}
+
+.inputs>li:only-child input[type=radio] {
+    display: none
+}
+
+label[for=remember] {
+    display: inline;
+    margin-left: 13px
+}
+
+#thisIsNotMe {
+    margin-right: 10px;
+    float: right
+}
+
+#useNewEmail {
+    margin-left: .8em
+}
+
+.pickemail .vertical a {
+    background-color: #f0efed;
+    color: #4e4e4e;
+    font-size: .75em;
+    padding: 0 5px;
+    display: inline-block;
+    line-height: 18px
+}
+
+.submit>button {
+    margin: 0 5px 0 0
+}
+
+#newEmail {
+    -moz-box-flex: 1
+}
+
+.newuser, .forgot, .returning {
+    display: none
+}
+
+#create_text_section {
+    color: #222
+}
+
+#checkemail {
+    text-align: center
+}
+
[email protected] screen and (max-width:640px) {
+    #wrapper {
+        min-width: 320px;
+        width: 100%;
+        margin: 0 auto
+    }
+
+    header, footer {
+        padding: 5px 20px
+    }
+
+    header ul li:nth-child(2) {
+        display: none
+    }
+
+    button {
+        height: 40px;
+        font-size: 18px
+    }
+
+    input[type=email], input[type=password] {
+        font-size: 17px
+    }
+
+    section {
+        position: static;
+        overflow: visible
+    }
+
+    .inputs>li>label {
+        font-size: 18px
+    }
+
+    .vertical>strong {
+        font-size: 20px
+    }
+
+    #signIn, #favicon {
+        display: block;
+        width: 100%;
+        position: relative;
+        padding: 10px
+    }
+
+    #signIn {
+        max-width: none;
+        padding: 10px
+    }
+
+    #signIn .table {
+        width: 100%;
+        margin: 0
+    }
+
+    #signIn form {
+        padding: 0
+    }
+
+    #favicon {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        background-image: url('bg.png');
+        text-align: center;
+        left: 0
+    }
+
+    #favicon img {
+        width: 32px;
+        height: auto;
+        display: inline;
+        margin: 0;
+        vertical-align: middle
+    }
+
+    #favicon .vertical {
+        height: auto;
+        line-height: 20px
+    }
+
+    #formWrap {
+        background-color: transparent
+    }
+
+    .error #formWrap, .error #wait, .waiting #formWrap {
+        display: none
+    }
+
+    .arrow {
+        display: none
+    }
+
+    #checkemail p {
+        height: 250px
+    }
+
+    #signIn .vertical {
+        padding-bottom: 0
+    }
+
+    #signIn .vertical ul li {
+        margin-top: 20px
+    }
+
+    #signIn .submit {
+        position: static
+    }
+
+    #signIn .submit>p {
+        font-size: 14px
+    }
+
+    label[for=remember] {
+        display: block;
+        font-size: 15px;
+        margin: 13px
+    }
+
+    #content, .form_section, .pickemail .inputs, .vertical {
+        height: auto;
+        max-height: none;
+        overflow: visible
+    }
+
+    .pickemail .vertical a {
+        font-size: 1.2em
+    }
+
+    #useNewEmail {
+        margin-top: 18px
+    }
+
+    #error .vertical, #wait .vertical {
+        height: 250px
+    }
+
+    #error .vertical {
+        width: auto
+    }
+
+    #error .vertical>div {
+        display: block;
+        height: auto;
+        padding: 10px
+    }
+
+    #error #borderbox {
+        border-left: none;
+        padding: 0
+    }
\ No newline at end of file
Binary file src/main/resources/template/webidp/idp/profile_anonymous.png has changed