diff --git a/authority/static/dialog/index.html b/authority/static/dialog/index.html
index c0fb00329c7f0c28994849cef251b50631cb7e25..a159cf38cf6751a18edf9ff5a43d3c57631c20b5 100644
--- a/authority/static/dialog/index.html
+++ b/authority/static/dialog/index.html
@@ -4,8 +4,10 @@
<link href="../dialog/style.css" type="text/css" media="screen" rel="stylesheet"></link>
</head>
<body id="body">
+<div id="header">
+ <div class="title">BrowserID</div><div class="subtitle">A better way to log in.</div>
+</div>
<div id="authenticate_dialog" class="dialog">
- <div class="title"> Sign in with BrowserID </div>
<div class="content">
<div class="summary">Enter your email and BrowserID password to log into <span class="sitename bad"></span>:</div>
<div class="input">
@@ -83,7 +85,7 @@
<div id="sign_in_dialog" class="dialog">
<div class="title"> Sign in with BrowserID </div>
<div class="content">
- <p>How would you like to idenitfy yourself to <span class="sitename"></span>:</p>
+ <p>How would you like to identify yourself to <span class="sitename"></span>:</p>
<form id="identities" name="identities">
</form>
</div>
diff --git a/authority/static/dialog/style.css b/authority/static/dialog/style.css
index 1c6ff0d44e82f621da611bf4ab8ccd26570d0ecf..efe36fef6b47268a3bff62ea3bd7808b7be4d63c 100644
--- a/authority/static/dialog/style.css
+++ b/authority/static/dialog/style.css
@@ -1,20 +1,36 @@
+@font-face {
+ font-family: 'Shadows Into Light';
+ font-style: normal;
+ font-weight: normal;
+ src: local('Shadows Into Light'), local('ShadowsIntoLight'), url('../css/sil.ttf') format('truetype');
+}
+
+@font-face {
+ font-family: 'Tenor Sans';
+ font-style: normal;
+ font-weight: normal;
+ src: local('Tenor Sans'), local('TenorSans'), url('../css/ts.ttf') format('truetype');
+}
+
body {
position: absolute;
- font-family: Helvetica Narrow, sans-serif;
+ font-family: 'Tenor Sans', Helvetica Narrow, sans-serif;
font-size: 11pt;
width: 598px;
height: 398px;
padding: 0;
margin: 0;
}
+
span.sitename, span.email {
font-weight: bold;
}
-.title {
+
+.dialog .title {
font-size: 2em;
font-weight: bold;
margin: auto;
- margin-top: 1.5em;
+ margin-top: .5em;
margin-bottom: 1em;
}
@@ -121,8 +137,10 @@ button.disabled {
.dialog {
display: none;
- position: relative;
- top: 0;
+ position: fixed;
+ top: 40px;
+ right: 0;
+ bottom: 60px;
left: 0;
margin: auto;
text-align: center;
@@ -140,6 +158,7 @@ div.input > div.note {
div.content {
width: 450px;
margin: auto;
+ margin-top: 20px;
text-align: left;
}
@@ -159,7 +178,6 @@ div.content > div.input > div.label {
margin-top: .7em;
}
-
div.input input {
border: 1px solid black;
width: 240px;
@@ -218,3 +236,29 @@ div.dialog div.attention_lame {
font-size: .8em;
}
+#header {
+ position: fixed;
+ padding: 0;
+ border: 0;
+ margin: 0;
+ left: 0;
+ top: 0;
+ height: 40px;
+ width: 100%;
+ background: #008;
+ color: #fff;
+}
+
+#header .title {
+ font-size: 1.7em;
+ font-weight: bold;
+ float: left;
+ margin: 4px 16px 0 16px;
+}
+
+#header .subtitle {
+ size: 1.2em;
+ font-family: 'Shadows into light', arial, serif;
+ float: left;
+ margin-top: .6em;
+}