diff --git a/stylesheets/style.css b/stylesheets/style.css
index e1965a47..14463dc6 100644
--- a/stylesheets/style.css
+++ b/stylesheets/style.css
@@ -432,3 +432,24 @@ table.mod.config-editor input[type="text"] {
   text-indent: 0px;
   background: inherit;
 }
+
+#attention_bar {
+  height: 1.5em;
+  width: 100%;
+  text-align: center;
+}
+#attention_bar_form {
+  display: none;
+  padding: 0;
+  margin: 0;
+}
+#attention_bar_input {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+}
+#attention_bar:hover {
+  background-color: #fff;
+  opacity: 0.8;
+}
diff --git a/templates/attention_bar.html b/templates/attention_bar.html
index 44afc78e..35f6b8f0 100644
--- a/templates/attention_bar.html
+++ b/templates/attention_bar.html
@@ -1,10 +1,6 @@
 {% if config.attention_bar %}
-<div id="attention_bar" style="height: 1.5em; width: 100%; padding: 0; margin: 0; text-align: center; display: block;></div>
-<form method="post" action="/attentionbar.php" id="attention_bar_form" style="display: none; padding: 0; margin: 0;">
- <input id="attention_bar_input" name="text" style="width: 100%; padding: 0; margin: 0; text-align: center;" value="" type="text">
+<div id="attention_bar"></div>
+<form method="post" action="{{ config.root }}attentionbar.php" id="attention_bar_form">
+  <input id="attention_bar_input" name="text" value="" type="text">
 </form>
-<style>
-#attention_bar:hover { background-color: #fff; opacity: 0.8; }
-</style>
-<script type="text/javascript" src="/js/attention-bar.js"></script>
 {% endif %}