diff --git a/browserid/static/dialog/style.css b/browserid/static/dialog/style.css
index 866f565a7e84cb126ca42ac74ec2ee1b2f991891..9fce5bdeb7797a5024dcdc786301b94418d104de 100644
--- a/browserid/static/dialog/style.css
+++ b/browserid/static/dialog/style.css
@@ -20,7 +20,7 @@ span.sitename, span.email {
font-weight: bold;
}
-.dialog .title {
+.dialog h2 {
font-size: 2em;
font-weight: bold;
margin: auto;
@@ -141,9 +141,8 @@ div.input > * {
float: left;
}
-div.input > div.note {
- float: right;
- margin-top: .7em;
+div.note {
+ display: inline
}
div.content {
@@ -153,7 +152,7 @@ div.content {
text-align: left;
}
-div.content > div.input {
+div.content > div.input, .formRow {
height: 3em;
font-size: .8em;
}
@@ -163,13 +162,13 @@ div.content > div.summary {
margin-bottom: 2em;
}
-div.content > div.input > div.label {
+.formRow > label {
width: 80px;
text-align: left;
- margin-top: .7em;
+ display: inline-block;
}
-div.input input {
+.formRow input {
border: 1px solid black;
width: 240px;
height: 2em;
diff --git a/browserid/static/dialog/views/addemail.ejs b/browserid/static/dialog/views/addemail.ejs
index 14a6ddebf011711f8cb7187b46415d67f4523cc5..f790408a3a7debb186464e13a00d3a48857c8b78 100644
--- a/browserid/static/dialog/views/addemail.ejs
+++ b/browserid/static/dialog/views/addemail.ejs
@@ -1,9 +1,9 @@
- <div class="title"> Add a new email address </div>
+ <h2> Add a new email address </h2>
<div class="content">
<div class="summary">Setting up a up a new email address is easy, tell us what it is and we'll get started:</div>
- <div class="input">
- <div class="label"> Email </div>
- <div class="input"> <input type="text" id="email_input"></input></div>
+ <div class="formRow">
+ <label for="email_input">Email</label>
+ <input type="text" id="email_input"></input>
<div class="note"></div>
</div>
</div>
diff --git a/browserid/static/dialog/views/authenticate.ejs b/browserid/static/dialog/views/authenticate.ejs
index 728e4c0408027a07f5bee324b6a7a7bb6bb3b479..a5c19a11e55a86a15c252f82ac937ea160e4d599 100644
--- a/browserid/static/dialog/views/authenticate.ejs
+++ b/browserid/static/dialog/views/authenticate.ejs
@@ -1,13 +1,13 @@
<div class="content">
<p class="prompt">Signing into <span class="sitename bad"><%= sitename %></span>:</p>
- <div class="input">
- <div class="label"> Email </div>
- <div class="input"> <input type="text" id="email_input"></input></div>
+ <div class="formRow">
+ <label for="email_input"> Email </label>
+ <input type="text" id="email_input" />
</div>
- <div class="input">
- <div class="label"> Password </div>
- <div class="input"> <input type="password" id="password_input"></input></div>
- <div class="note"> <a href="#" id="forgotpassword">I forgot my password</a> </div>
+ <div class="formRow">
+ <label for="password_input"> Password </label>
+ <input type="password" id="password_input" />
+ <a href="#" id="forgotpassword">I forgot my password</a>
</div>
<div class="attention_lame" id="nosuchaccount" style="display:none;">
No such account exists with that email and/or password
diff --git a/browserid/static/dialog/views/confirmemail.ejs b/browserid/static/dialog/views/confirmemail.ejs
index 977e6d1fa84c069696b3adcd5fae5f2b2b50c046..f1174e5feb09f22ce0e2ebd0bd25fa490f734e17 100644
--- a/browserid/static/dialog/views/confirmemail.ejs
+++ b/browserid/static/dialog/views/confirmemail.ejs
@@ -1,4 +1,4 @@
- <div class="title"> Confirm Your Email </div>
+ <h2> Confirm Your Email </h2>
<div class="content">
<div class="summary">Welcome, <span class="email good"><%= email %></span>. You will receive a <strong>confirmation email</strong> in a few moments. To activate your BrowserID, please <strong>visit the link</strong> included in the email.</div>
<div class="attention" id="waiting_confirmation">
diff --git a/browserid/static/dialog/views/create.ejs b/browserid/static/dialog/views/create.ejs
index 5ed0b0fce116ba1f389fcf8c16907ead5d17dcc1..138fbc0a3cb61757e6ba5530891878a9c91e58c8 100644
--- a/browserid/static/dialog/views/create.ejs
+++ b/browserid/static/dialog/views/create.ejs
@@ -1,21 +1,23 @@
<div class="content">
<div class="summary">BrowserID makes signing in <b>safer and easier</b>. To begin, please provide an email address and pick a password:</div>
- <div class="input">
- <div class="label"> Email </div>
- <div class="input"> <input id="email_input" type="text"></input></div>
- <div class="note" id="email_input_note" style="display:none;"><span class="good">Not registered</span></div>
+ <div class="formRow">
+ <label for="email_input"> Email </label>
+ <input id="email_input" type="email"/>
+ <span class="note" id="email_input_note" style="display:none;">
+ <span class="good">Not registered</span>
+ </span>
</div>
- <div class="input">
- <div class="label"> Password </div>
- <div class="input"> <input id="password_input" type="password"></input></div>
+ <div class="formRow">
+ <label for="password_input"> Password </label>
+ <input id="password_input" type="password"/>
</div>
- <div class="input">
- <div class="label"> Verify </div>
- <div class="input"> <input id="password_verify_input" type="password"></input></div>
- <div class="note passwordnote" id="enter_a_password"><span class="bad">Enter a password</span></div>
- <div class="note passwordnote" id="passwords_different" style="display:none;"><span class="bad">Passwords different</span></div>
- <div class="note passwordnote" id="password_too_short" style="display:none;"><span class="bad">Password too short</span></div>
- <div class="note passwordnote" id="password_ok" style="display:none;"><span class="good">Password OK</span></div>
+ <div class="formRow">
+ <label for="password_verify_text"> Verify </label>
+ <input id="password_verify_input" type="password"/>
+ <span class="note passwordnote" id="enter_a_password"><span class="bad">Enter a password</span></span>
+ <span class="note passwordnote" id="passwords_different" style="display:none;"><span class="bad">Passwords different</span></span>
+ <span class="note passwordnote" id="password_too_short" style="display:none;"><span class="bad">Password too short</span></span>
+ <span class="note passwordnote" id="password_ok" style="display:none;"><span class="good">Password OK</span></span>
</div>
<div class="attention_lame" style="display:none;" id="emailinuse_message">
<span id="in_use_email">Email</span> in use, If this email is yours you can <a href="#" id="suggest_signin">sign in</a> with it?
diff --git a/browserid/static/dialog/views/forgotpassword.ejs b/browserid/static/dialog/views/forgotpassword.ejs
index 8674d5403fdd2bc1abe204f7e93a2048c969de6c..2ee1d184bad0dcdd605bded04135ec676e7829c7 100644
--- a/browserid/static/dialog/views/forgotpassword.ejs
+++ b/browserid/static/dialog/views/forgotpassword.ejs
@@ -1,21 +1,21 @@
<div class="content">
<div class="summary"><b>Forgot your password?</b> No problem! Enter your email address, pick a new password, and we'll get you set up again!</div>
- <div class="input">
- <div class="label"> Email </div>
- <div class="input"> <input id="email_input" type="text"></input></div>
- <div class="note" id="email_input_note" style="display:none;"><span class="good">Not registered</span></div>
+ <div class="formRow">
+ <label for="email_input"> Email </label>
+ <input id="email_input" type="email"/>
+ <span class="note" id="email_input_note" style="display:none;"><span class="good">Not registered</span></span>
</div>
- <div class="input">
- <div class="label"> Password </div>
- <div class="input"> <input id="password_input" type="password"></input></div>
+ <div class="formRow">
+ <label for="password_input"> Password </label>
+ <input id="password_input" type="password"/>
</div>
- <div class="input">
- <div class="label"> Verify </div>
- <div class="input"> <input id="password_verify_input" type="password"></input></div>
- <div class="note passwordnote" id="enter_a_password"><span class="bad">Enter a password</span></div>
- <div class="note passwordnote" id="passwords_different" style="display:none;"><span class="bad">Passwords different</span></div>
- <div class="note passwordnote" id="password_too_short" style="display:none;"><span class="bad">Password too short</span></div>
- <div class="note passwordnote" id="password_ok" style="display:none;"><span class="good">Password OK</span></div>
+ <div class="formRow">
+ <label for="password_verify_input"> Verify </label>
+ <input id="password_verify_input" type="password"/>
+ <span class="note passwordnote" id="enter_a_password"><span class="bad">Enter a password</span></span>
+ <span class="note passwordnote" id="passwords_different" style="display:none;"><span class="bad">Passwords different</span></span>
+ <span class="note passwordnote" id="password_too_short" style="display:none;"><span class="bad">Password too short</span></span>
+ <span class="note passwordnote" id="password_ok" style="display:none;"><span class="good">Password OK</span></span>
</div>
<div class="attention_lame" style="display:none;" id="emailinuse_message">
<span id="in_use_email">Email</span> in use, If this email is yours you can <a href="#">sign in</a> with it?
diff --git a/browserid/static/dialog/views/wait.ejs b/browserid/static/dialog/views/wait.ejs
index c7125438d480e7070c72741a681b61a7dbbd82ce..f50eb0eb7ec305da60b72a7b90674e29a58f4df1 100644
--- a/browserid/static/dialog/views/wait.ejs
+++ b/browserid/static/dialog/views/wait.ejs
@@ -1,2 +1,2 @@
- <div class="title"><%= title %></div>
+ <h2><%= title %></h2>
<div class="content"><%= message %></div>