| author | Henry Story <henry.story@bblfish.net> |
| Sun, 18 Dec 2011 15:01:02 +0100 | |
| branch | webid |
| changeset 151 | 452667628c73 |
| parent 150 | ae0e626ba6c4 |
| child 152 | 5df9d155c38d |
| 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&ts=$timeStamp</b>&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>
--- /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 @@ +@charset "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%; } +
--- /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 <lloyd@hilaiel.com> + * + * 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 +} + +@media 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