Split up CSS for clarity

8 files changed, 896 insertions, 909 deletions

diff --git a/hyperkitty/static/css/hyperkitty-base.css b/hyperkitty/static/css/hyperkitty-base.css
new file mode 100644
index 0000000..9d17e55
--- /dev/null
+++ b/hyperkitty/static/css/hyperkitty-base.css
@@ -0,0 +1,30 @@
+body {
+	position: relative;
+	padding-top: 70px;
+	background-color: white;
+}
+
+ul.nav.auth {
+    float: right;
+    margin: 0;
+}
+
+
+/* Search box */
+
+#searchbox {
+    text-align:right;
+    padding-right: 20px;
+}
+
+#searchbox input {
+    width: 250px
+}
+
+#searchbox input::-webkit-input-placeholder {
+    font-style: italic;
+}
+
+#searchbox input:-moz-placeholder {
+    font-style: italic;
+}
diff --git a/hyperkitty/static/css/hyperkitty-common.css b/hyperkitty/static/css/hyperkitty-common.css
new file mode 100644
index 0000000..7a3b572
--- /dev/null
+++ b/hyperkitty/static/css/hyperkitty-common.css
@@ -0,0 +1,232 @@
+/*
+ * Classes common to two or more pages, but not all (those go to base.css)
+ */
+
+
+.right {
+    text-align: right;
+}
+
+.inline-block {
+    display: inline-block;
+}
+
+.inline li, .inline-block li {
+    display: inline-block;
+    list-style-type: none;
+}
+
+
+/* from Bootstrap's alert class */
+.errorlist {
+  list-style-type: none;
+  margin: 0 0 20px 0;
+  padding: 8px 35px 8px 14px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  border: 1px solid #eed3d7;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  color: #b94a48;
+  background-color: #f2dede;
+}
+
+
+/* Flash messages */
+.flashmsg {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    text-align: center;
+}
+.flashmsg .alert {
+    display: inline-block;
+}
+
+
+/* Forms (replies, registration, ...) */
+form .buttons .submit {
+    /* leave some space before the cancel button/link */
+    margin-right: 2em;
+}
+
+
+/* Favorites */
+.saved, .notsaved {
+    padding-left: 20px;
+    background: no-repeat scroll left center;
+}
+.saved {
+    background-image: url("../img/saved.png");
+}
+.notsaved {
+    background-image: url("../img/notsaved.png");
+}
+
+
+/* Gravatar */
+.gravatar {
+    vertical-align: top;
+    width:40px;
+    font-size: 70%;
+}
+.gravatar img {
+    width: 40px;
+}
+
+
+
+/*
+ * Like / dislike
+ */
+
+form.likeform {
+    display: inline;
+    margin: 0;
+    margin-right: 1em;
+    padding: 0;
+}
+.likestatus {
+    padding-left: 20px;
+    margin-right: 1.5em;
+    font-weight: bold;
+}
+
+.neutral {
+    background: url("../img/neutral.png") no-repeat scroll left;
+}
+.like {
+    background: url("../img/like.png") no-repeat scroll left;
+}
+.likealot {
+    background: url("../img/likealot.png") no-repeat scroll left;
+}
+
+.youlike,
+.youdislike {
+    padding-left: 15px;
+    margin-left: 0.5em;
+}
+.youlike {
+    background: url("../img/youlike.png") no-repeat scroll left;
+}
+.youdislike {
+    background: url("../img/youdislike.png") no-repeat scroll left;
+}
+.youlike.disabled {
+  background: url("../img/youlike-disabled.png") no-repeat scroll left;
+  color: #999;
+}
+.youdislike.disabled {
+  background: url("../img/youdislike-disabled.png") no-repeat scroll left;
+  color: #999;
+}
+
+
+
+/* Months list */
+
+#months-list h3 {
+    margin-top: 1em;
+    font-size: 120%;
+}
+#months-list {
+    padding-top: 1em;
+}
+#months-list li.current {
+    font-weight: bold;
+}
+
+
+
+/*
+ * Attachments
+ */
+
+p.attachments {
+    margin-bottom: 0;
+    font-weight: bold;
+}
+a.attachments {
+    padding-left: 18px;
+    background: url("../img/mail-attachment.png") no-repeat scroll left;
+}
+.email-info div.attachments {
+    display: inline;
+    padding: 0 1em;
+}
+.email-info .attachments ul.attachments-list {
+    display: none;
+    position: absolute;
+    margin-left: 0;
+    padding-right: 0.5em;
+    border: 1px solid #aaa;
+    border-top: none;
+    z-index: 1;
+}
+.even .email-info .attachments ul.attachments-list {
+    background-color: rgb(246, 246, 246);
+}
+.odd .email-info .attachments ul.attachments-list {
+    background-color: rgb(238, 238, 238);
+}
+.email-info .attachments ul.attachments-list li {
+    list-style-position: inside;
+    padding-left: 0.5em;
+}
+
+
+
+/*
+ * Replies
+ */
+
+a.reply {
+  background: url("../img/reply.png") no-repeat left center;
+  padding-left: 20px;
+  margin-left: 1em;
+}
+a.reply.disabled {
+  background: url("../img/reply-disabled.png") no-repeat left center;
+  color: #999;
+}
+.reply-form {
+    display: none;
+    padding-top: 1em;
+}
+.reply-form p.reply-tools {
+    font-size: 90%;
+}
+.reply-form p {
+    margin: 0;
+}
+.reply-form textarea {
+    width: 95%;
+}
+.reply-result {
+    text-align: center;
+}
+.reply-result .alert {
+    display: inline-block;
+}
+.reply-result .alert-success {
+    margin-bottom: 0;
+}
+.reply-result .alert-error {
+    white-space: pre;
+    text-align: left;
+}
+
+
+
+/*
+ * New thread form
+ */
+
+.new-thread-form {
+    margin-left: 2em;
+}
+.new-thread-form #id_subject,
+.new-thread-form textarea {
+    width: 90%;
+}
diff --git a/hyperkitty/static/css/hyperkitty-index.css b/hyperkitty/static/css/hyperkitty-index.css
new file mode 100644
index 0000000..0bd8889
--- /dev/null
+++ b/hyperkitty/static/css/hyperkitty-index.css
@@ -0,0 +1,37 @@
+/* List of lists */
+
+#logo {
+    display: block;
+    margin: 120px auto;
+    clear: both;
+}
+
+h1.lists {
+    margin-bottom: 0.5em;
+}
+
+.all-lists .list-name {
+    font-size: 120%;
+    color: black;
+    font-weight: bold;
+}
+.all-lists .list-address {
+    font-size: 90%;
+    font-style: italic;
+}
+.all-lists a {
+    display: block;
+    padding: 2em;
+    margin: 1em auto;
+    overflow: hidden;
+    border: 1px solid #ccc;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    color: black;
+}
+.all-lists a:hover {
+    text-decoration: none;
+    background-color: #eee;
+    color: black;
+}
diff --git a/hyperkitty/static/css/hyperkitty-message.css b/hyperkitty/static/css/hyperkitty-message.css
new file mode 100644
index 0000000..0870277
--- /dev/null
+++ b/hyperkitty/static/css/hyperkitty-message.css
@@ -0,0 +1,250 @@
+/*
+ * Message view
+ */
+
+.message-header {
+    margin-bottom: 3em;
+}
+
+.message-header .thread-back {
+    display: block;
+    padding-top: 38px;
+    width: 160px;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    background-position: top center;
+    background-image: url('../img/button_back.png');
+    margin-bottom: 1em;
+}
+
+
+
+/*
+ * Thread view
+ */
+
+.thread-header {
+    /*background-color: #f6f6f6;*/
+    /*border-bottom: 1px solid #b3b3b3;*/
+    margin-bottom: 6em;
+    padding: 1em 0;
+}
+
+.thread-header h1,
+.message-header h1 {
+    text-align: center;
+    font-size: 24px;
+    line-height: 26px;
+}
+
+.thread-header .thread-older,
+.thread-header .thread-newer {
+    display: block;
+    padding-top: 38px;
+    width: 160px;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    background-position: top center;
+    text-align: center;
+    color: #aaaaaa;
+}
+.thread-header .thread-older {
+    float: right;
+    background-image: url('../img/button_older.png');
+}
+.thread-header .thread-newer {
+    float: left;
+    background-image: url('../img/button_newer.png');
+}
+
+#olderhread, #newewthread {
+    font-size: 70%;
+    color: rgb(167, 169, 172);
+}
+
+#olderhread {
+    float: right;
+    margin-top: 2em;
+    margin-right: 20px;
+}
+
+#thread-overview-info {
+    float: right;
+}
+
+
+
+/*
+ * Thread general information column
+ */
+
+.days-num {
+    font-size: 200%;
+    display: inline-block;
+}
+.days-text {
+    font-size: 70%;
+    display: inline-block;
+    margin-right: 2em;
+}
+
+.favorite a {
+    color: rgb(167, 169, 172);
+}
+.favorite a.saved,
+.favorite a.notsaved {
+    /* Will be shown via Javascript */
+    display: none;
+}
+
+/* Tags */
+#tags {
+    color: rgb(167, 169, 172);
+    margin-top: 2em;
+}
+
+#tag-title {
+    color: rgb(77, 77, 77);
+    text-transform: uppercase;
+}
+
+#tags ul {
+    padding: 10px 0;
+    margin: 0;
+}
+#tags ul li {
+    padding-left: 0;
+}
+#tags ul li span {
+    margin-left: 5px;
+}
+
+#add-tag {
+    margin-top: 0.3em;
+}
+
+/* Participants */
+#participants {
+    margin-top: 2em;
+    color: rgb(167, 169, 172);
+}
+
+#participants_title {
+    color: rgb(77, 77, 77);
+    text-transform: uppercase;
+}
+
+#participants ul {
+    padding: 0;
+    margin: 0;
+}
+
+#participants li {
+    list-style-type: none;
+    margin: 1em 0;
+}
+
+#participants img {
+    width: 20px;
+    vertical-align: middle;
+}
+
+
+/* Main section with the whole thread */
+
+/* First email of the thread. */
+
+.email-header {
+    position:relative;
+    margin-bottom: 1em;
+    height: 40px;
+}
+
+.email-header .gravatar {
+    margin-right: 10px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.email-author .name{
+    color: rgb(55, 113, 200);
+    font-weight: bold;
+}
+.email-author .rank{
+    color: rgb(167, 169, 172);
+    font-size: 80%;
+    font-weight: bold;
+}
+
+.email-first .email-date {
+    text-align: right;
+}
+.email-date .date {
+    font-weight: bold;
+}
+.email-date .time {
+    color: rgb(167, 169, 172);
+    margin-left: 0.5em;
+    border-bottom: 1px dashed rgb(167, 169, 172);
+    cursor: help;
+}
+
+.sort-mode {
+    text-align: right;
+}
+
+/* The email thread */
+.even, .odd {
+    border-top: 1px solid rgb(179, 179, 179);
+    padding: 1em;
+	margin: 20px 0px 20px 0px;
+}
+.even {
+    background-color: rgb(246, 246, 246);
+}
+.odd {
+    background-color: rgb(238, 238, 238);
+}
+
+.email-body {
+    white-space: pre;
+    overflow: auto;
+}
+.replies .email-body {
+    -webkit-border-radius: 5px 5px 5px 5px;
+    -moz-border-radius: 5px 5px 5px 5px;
+    border-radius: 5px 5px 5px 5px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: rgb(179, 179, 179);
+    padding: 5px;
+    min-height: 40px;
+    background-color: rgb(255, 255, 255);
+}
+
+.email-body span.read-more a,
+.email-body span.read-less a {
+    float: right;
+    padding: 3px 10px 0px 0px;
+}
+
+.email-info {
+    padding: 0px;
+    margin-top: 5px;
+}
+
+/* Inline quotes */
+.quoted-switch a {
+    background-color: #fafafa;
+    padding: 0 4px 2px 4px;
+    border-left: 2px solid rgb(55, 113, 200);
+    font-weight: bold;
+    font-size: 115%;
+}
+.quoted-switch a:hover {
+    text-decoration: none;
+}
+.quoted-text {
+    border-left: 2px solid rgb(55, 113, 200);
+    padding-left: 0.2em;
+}
diff --git a/hyperkitty/static/css/hyperkitty-overview.css b/hyperkitty/static/css/hyperkitty-overview.css
new file mode 100644
index 0000000..458586b
--- /dev/null
+++ b/hyperkitty/static/css/hyperkitty-overview.css
@@ -0,0 +1,81 @@
+/* Summary page */
+
+#recent_activities h2 {
+    font-size: 22px;
+    line-height: 32px;
+    margin-bottom: 0.5em;
+    text-align: center;
+}
+
+#graph h2 {
+    text-align: center;
+}
+#graph rect {
+    cursor: pointer;
+}
+
+#fig {
+  position: relative;
+  margin: auto;
+  width: 540px;
+  height: 330px;
+}
+
+
+#top-discussion,
+#discussion-by-topic,
+#most-active,
+#discussion-maker {
+    padding: 1em;
+    padding-bottom: 0;
+    border: 1px solid #ddd;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    margin: 1em 0;
+}
+
+.category {
+    font-variant: small-caps;
+    font-weight: bold;
+    color: white;
+    -webkit-border-radius: 5px 5px 5px 5px;
+    -moz-border-radius: 5px 5px 5px 5px;
+    border-radius: 5px 5px 5px 5px;
+    vertical-align: top;
+    margin-bottom: 10px;
+    padding-top: 0px;
+    padding-left: 10px;
+}
+
+.category_entry {
+    list-style-type: circle;
+    margin-top: 0px;
+    padding-bottom: 10px;
+    padding-left: 25px;
+}
+
+.category_entry li {
+    padding-bottom: 10px;
+}
+
+.maker {
+    color: rgb(102, 102, 102);
+    padding-right: 10px;
+    padding-bottom: 20px;
+}
+
+.maker-id, .maker-name {
+    font-weight: bold;
+    font-size: 115%;
+    vertical-align: top;
+    padding-right: 20px;
+}
+
+.maker .gravatar {
+    padding-right: 20px;
+}
+
+.score{
+    font-weight: bold;
+}
diff --git a/hyperkitty/static/css/hyperkitty-threadslist.css b/hyperkitty/static/css/hyperkitty-threadslist.css
new file mode 100644
index 0000000..3106aba
--- /dev/null
+++ b/hyperkitty/static/css/hyperkitty-threadslist.css
@@ -0,0 +1,192 @@
+/*
+ * Threads view header
+ */
+
+#thread-list .thread-list-header {
+    margin-bottom: 4em;
+}
+
+#thread-list .thread-list-header .thread-list-info {
+    display: inline;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+#thread-list .thread-list-header .thread-list-info li {
+    display: inline;
+    margin-right: 2em;
+}
+#thread-list .thread-list-header .thread-list-info li.list-address {
+    font-size: 120%;
+    margin-right: 4em;
+}
+
+#thread-list .thread-list-header .thread-new {
+    float: right;
+}
+#thread-list .thread-list-header .thread-new strong {
+    font-size: 150%;
+    font-weight: bold;
+    margin-right: 0.2em;
+}
+
+
+
+/*
+ * Thread view
+ */
+
+.thread {
+    margin: 2em 0 2em 0;
+}
+
+.thread-id {
+    font-weight: bold;
+    font-size: 125%;
+    color: rgb(102, 102, 102);
+    vertical-align: top;
+    padding-right: 10px;
+}
+
+.thread-title {
+    font-weight: bold;
+    font-size: 125%;
+}
+
+.thread-date {
+    font-style: italic;
+    font-size: 70%;
+    color: rgb(128, 0, 0);
+}
+
+.thread-info {
+    text-align:right;
+    clear: both;
+    margin-left: 46px;
+}
+.thread-info .tags {
+    display: inline;
+    margin-right: 1em;
+}
+.thread-info .participant, .thread-info .discussion {
+    padding-left: 20px;
+    background: no-repeat scroll left center;
+}
+.thread-info .participant {
+    background-image: url("../img/participant.png");
+    padding-left: 16px;
+    margin-right: 1em;
+}
+.thread-info .discussion {
+    background-image: url("../img/discussion.png");
+    margin-right: 2em;
+}
+.thread-info .thread-show {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin-left: 2em;
+}
+
+.thread-content {
+    margin-top: 0.5em;
+}
+.thread-content .gravatar {
+    float: left;
+}
+.thread-content .thread-email {
+    display: block;
+    margin-left: 46px;
+    margin-bottom: 5px;
+}
+
+/* Part containing the body of the mail which can be shown/hidden */
+.expander {
+    background-image: linear-gradient(bottom, rgb(236,236,236) 11%, rgb(255,255,255) 100%);
+    background-image: -o-linear-gradient(bottom, rgb(236,236,236) 11%, rgb(255,255,255) 100%);
+    background-image: -moz-linear-gradient(bottom, rgb(236,236,236) 11%, rgb(255,255,255) 100%);
+    background-image: -webkit-linear-gradient(bottom, rgb(236,236,236) 11%, rgb(255,255,255) 100%);
+    background-image: -ms-linear-gradient(bottom, rgb(236,236,236) 11%, rgb(255,255,255) 100%);
+
+    background-image: -webkit-gradient(
+        linear,
+        left bottom,
+        left top,
+        color-stop(0.11, rgb(236,236,236)),
+        color-stop(1, rgb(255,255,255))
+    );
+    border-style: solid;
+    border-width: 1px;
+    border-color: rgb(236,236,236);
+    -webkit-border-radius: 5px 5px 5px 5px;
+    -moz-border-radius: 5px 5px 5px 5px;
+    border-radius: 5px 5px 5px 5px;
+    padding: 1em;
+    margin-left: 21px;
+    display: block;
+    vertical-align: top;
+    white-space: pre;
+}
+
+.thread-email .expander.collapsed {
+    white-space: normal;
+}
+
+/*
+.thread-email span.read-more a,
+.thread-email span.read-less a {
+    display: block;
+    float: right;
+    margin-top: 0.5em;
+}
+*/
+
+
+
+/*
+ * Thread types
+ */
+
+.type {
+    font-variant: small-caps;
+    font-weight: bold;
+    color: white;
+    padding: 3px;
+    -webkit-border-radius: 5px 5px 5px 5px;
+    -moz-border-radius: 5px 5px 5px 5px;
+    border-radius: 5px 5px 5px 5px;
+    vertical-align: top;
+    width: 110px;
+    text-align:center;
+}
+
+.type a {
+    color: white;
+}
+
+.type_question {
+    background-color: rgb(179, 128, 255);
+}
+
+.type_agenda {
+    background-color: rgb(42, 127, 255);
+}
+
+.type_todo {
+    background-color: rgb(200, 171, 55);
+}
+
+.type_dead {
+    background-color: rgb(0, 0, 0);
+}
+
+.type_announcement {
+    background-color: rgb(170, 212, 0);
+}
+
+.type_policy {
+    background-color: rgb(200, 55, 171);
+}
+
+.type_test {
+    background-color: rgb(200, 171, 55);
+}
diff --git a/hyperkitty/static/css/hyperkitty-user.css b/hyperkitty/static/css/hyperkitty-user.css
new file mode 100644
index 0000000..69b50d5
--- /dev/null
+++ b/hyperkitty/static/css/hyperkitty-user.css
@@ -0,0 +1,74 @@
+/*
+ * Login form
+ */
+
+#login,
+#register {
+    text-align: left;
+    width: 40em;
+    margin: 0 auto;
+}
+#login h2,
+#register h2 {
+    margin: 4em 0 1em 0;
+    text-align: center;
+    font-size: 160%;
+}
+#login .social-login {
+    text-align: center;
+}
+#login .social-login li {
+	margin: 0 20px;
+}
+
+
+
+/*
+ * User profile page
+ */
+
+#user-profile {
+    padding: 0 2em;
+}
+
+#user-profile h1 {
+    margin-bottom: 1em;
+}
+
+#user-profile h3 {
+    margin-top: 2em;
+}
+
+#user-profile form {
+    float: left;
+}
+
+#user-profile div.gravatar {
+    /*float: right;*/
+    float: left;
+    width: auto;
+    font-size: 95%;
+    margin-left: 4em;
+}
+#user-profile img.gravatar {
+    width: auto;
+}
+#user-profile .gravatar p {
+    text-align: center;
+}
+
+
+table.user-data {
+    width: auto;
+}
+table.user-data th label {
+    font-weight: bold;
+}
+table.user-data th,
+table.user-data td {
+    vertical-align: middle;
+}
+table.user-data label,
+table.user-data input {
+    margin-bottom: 0;
+}
diff --git a/hyperkitty/static/css/hyperkitty.css b/hyperkitty/static/css/hyperkitty.css
deleted file mode 100644
index 5ef49e0..0000000
--- a/hyperkitty/static/css/hyperkitty.css
+++ /dev/null
@@ -1,909 +0,0 @@
-body {
-	position: relative;
-	padding-top: 70px;
-	background-color: white;
-}
-
-#logo {
-    display: block;
-    margin: 120px auto;
-    clear: both;
-}
-
-ul.nav.auth {
-    float: right;
-    margin: 0;
-}
-
-
-/* from Bootstrap's alert class */
-.errorlist {
-  list-style-type: none;
-  margin: 0 0 20px 0;
-  padding: 8px 35px 8px 14px;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  border: 1px solid #eed3d7;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-  color: #b94a48;
-  background-color: #f2dede;
-}
-
-
-.right {
-    text-align: right;
-}
-
-.inline-block {
-    display: inline-block;
-}
-
-.inline li, .inline-block li {
-    display: inline-block;
-    list-style-type: none;
-}
-
-.flashmsg {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    text-align: center;
-}
-.flashmsg .alert {
-    display: inline-block;
-}
-
-form .buttons .submit {
-    /* leave some space before the cancel button/link */
-    margin-right: 2em;
-}
-
-
-/* Add icons to some text */
-.participant, .discussion, .saved, .notsaved {
-    padding-left: 20px;
-    background: no-repeat scroll left center;
-}
-
-.participant {
-    background-image: url("../img/participant.png");
-    padding-left: 16px;
-}
-
-.discussion {
-    background-image: url("../img/discussion.png");
-}
-
-.saved {
-    background-image: url("../img/saved.png");
-}
-
-.notsaved {
-    background-image: url("../img/notsaved.png");
-}
-
-.gravatar {
-    vertical-align: top;
-    width:40px;
-    font-size: 70%;
-}
-
-.gravatar img {
-    width: 40px;
-}
-
-
-/* ******************* */
-
-
-/* List of lists */
-
-h1.lists {
-    margin-bottom: 0.5em;
-}
-
-.all-lists .list-name {
-    font-size: 120%;
-    color: black;
-    font-weight: bold;
-}
-.all-lists .list-address {
-    font-size: 90%;
-    font-style: italic;
-}
-.all-lists a {
-    display: block;
-    padding: 2em;
-    margin: 1em auto;
-    overflow: hidden;
-    border: 1px solid #ccc;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    color: black;
-}
-.all-lists a:hover {
-    text-decoration: none;
-    background-color: #eee;
-    color: black;
-}
-
-
-/* Login form */
-
-#login,
-#register {
-    text-align: left;
-    width: 40em;
-    margin: 0 auto;
-}
-#login h2,
-#register h2 {
-    margin: 4em 0 1em 0;
-    text-align: center;
-    font-size: 160%;
-}
-#login .social-login {
-    text-align: center;
-}
-#login .social-login li {
-	margin: 0 20px;
-}
-
-
-/* User profile page */
-
-#user-profile {
-    padding: 0 2em;
-}
-
-#user-profile h1 {
-    margin-bottom: 1em;
-}
-
-#user-profile h3 {
-    margin-top: 2em;
-}
-
-#user-profile form {
-    float: left;
-}
-
-#user-profile div.gravatar {
-    /*float: right;*/
-    float: left;
-    width: auto;
-    font-size: 95%;
-    margin-left: 4em;
-}
-#user-profile img.gravatar {
-    width: auto;
-}
-#user-profile .gravatar p {
-    text-align: center;
-}
-
-
-table.user-data {
-    width: auto;
-}
-table.user-data th label {
-    font-weight: bold;
-}
-table.user-data th,
-table.user-data td {
-    vertical-align: middle;
-}
-table.user-data label,
-table.user-data input {
-    margin-bottom: 0;
-}
-
-
-/* Like / dislike */
-
-form.likeform {
-    display: inline;
-    margin: 0;
-    margin-right: 1em;
-    padding: 0;
-}
-.likestatus {
-    padding-left: 20px;
-    margin-right: 1.5em;
-    font-weight: bold;
-}
-
-.neutral {
-    background: url("../img/neutral.png") no-repeat scroll left;
-}
-.like {
-    background: url("../img/like.png") no-repeat scroll left;
-}
-.likealot {
-    background: url("../img/likealot.png") no-repeat scroll left;
-}
-
-.youlike,
-.youdislike {
-    padding-left: 15px;
-    margin-left: 0.5em;
-}
-.youlike {
-    background: url("../img/youlike.png") no-repeat scroll left;
-}
-.youdislike {
-    background: url("../img/youdislike.png") no-repeat scroll left;
-}
-.youlike.disabled {
-  background: url("../img/youlike-disabled.png") no-repeat scroll left;
-  color: #999;
-}
-.youdislike.disabled {
-  background: url("../img/youdislike-disabled.png") no-repeat scroll left;
-  color: #999;
-}
-
-
-
-/* Top of the page -- header */
-.header {
-    background-color: rgb(236, 236, 236);
-	min-height : 100px;
-}
-
-#white {
-    color: rgb(255, 255, 255);
-    background-color: rgb(255, 255, 255);
-    margin-bottom: 0px;
-}
-
-#headline {
-    min-height: 50px;
-}
-
-
-/* Search box */
-
-#searchbox {
-    text-align:right;
-    padding-right: 20px;
-}
-
-#searchbox input {
-    width: 250px
-}
-
-#searchbox input::-webkit-input-placeholder {
-    font-style: italic;
-}
-
-#searchbox input:-moz-placeholder {
-    font-style: italic;
-}
-
-
-/* Summary page */
-
-#recent_activities h2 {
-    font-size: 22px;
-    line-height: 32px;
-    margin-bottom: 0.5em;
-    text-align: center;
-}
-
-#graph h2 {
-    text-align: center;
-}
-#graph rect {
-    cursor: pointer;
-}
-
-#fig {
-  position: relative;
-  margin: auto;
-  width: 540px;
-  height: 330px;
-}
-
-
-#top-discussion,
-#discussion-by-topic,
-#most-active,
-#discussion-maker {
-    padding: 1em;
-    padding-bottom: 0;
-    border: 1px solid #ddd;
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    border-radius: 10px;
-    margin: 1em 0;
-}
-
-.category {
-    font-variant: small-caps;
-    font-weight: bold;
-    color: white;
-    -webkit-border-radius: 5px 5px 5px 5px;
-    -moz-border-radius: 5px 5px 5px 5px;
-    border-radius: 5px 5px 5px 5px;
-    vertical-align: top;
-    margin-bottom: 10px;
-    padding-top: 0px;
-    padding-left: 10px;
-}
-
-.category_entry {
-    list-style-type: circle;
-    margin-top: 0px;
-    padding-bottom: 10px;
-    padding-left: 25px;
-}
-
-.category_entry li {
-    padding-bottom: 10px;
-}
-
-.maker {
-    color: rgb(102, 102, 102);
-    padding-right: 10px;
-    padding-bottom: 20px;
-}
-
-.maker-id, .maker-name {
-    font-weight: bold;
-    font-size: 115%;
-    vertical-align: top;
-    padding-right: 20px;
-}
-
-.maker .gravatar {
-    padding-right: 20px;
-}
-
-.score{
-    font-weight: bold;
-}
-
-
-/* Months list */
-
-#months-list h3 {
-    margin-top: 1em;
-    font-size: 120%;
-}
-#months-list {
-    padding-top: 1em;
-}
-#months-list li.current {
-    font-weight: bold;
-}
-
-
-/* Threads view header */
-
-#thread-list .thread-list-header {
-    margin-bottom: 4em;
-}
-
-#thread-list .thread-list-header .thread-list-info {
-    display: inline;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-#thread-list .thread-list-header .thread-list-info li {
-    display: inline;
-    margin-right: 2em;
-}
-#thread-list .thread-list-header .thread-list-info li.list-address {
-    font-size: 120%;
-    margin-right: 4em;
-}
-
-#thread-list .thread-list-header .thread-new {
-    float: right;
-}
-#thread-list .thread-list-header .thread-new strong {
-    font-size: 150%;
-    font-weight: bold;
-    margin-right: 0.2em;
-}
-
-
-/* Thread view */
-
-.thread {
-    margin: 2em 0 2em 0;
-}
-
-.thread-id {
-    font-weight: bold;
-    font-size: 125%;
-    color: rgb(102, 102, 102);
-    vertical-align: top;
-    padding-right: 10px;
-}
-
-.thread-title {
-    font-weight: bold;
-    font-size: 125%;
-}
-
-.thread-date {
-    font-style: italic;
-    font-size: 70%;
-    color: rgb(128, 0, 0);
-}
-
-.thread-info {
-    text-align:right;
-    clear: both;
-    margin-left: 46px;
-}
-.thread-info .tags {
-    display: inline;
-    margin-right: 1em;
-}
-.thread-info .participant {
-    margin-right: 1em;
-}
-.thread-info .discussion {
-    margin-right: 2em;
-}
-.thread-info .thread-show {
-    padding-top: 2px;
-    padding-bottom: 2px;
-    margin-left: 2em;
-}
-
-.thread-content {
-    margin-top: 0.5em;
-}
-.thread-content .gravatar {
-    float: left;
-}
-.thread-content .thread-email {
-    display: block;
-    margin-left: 46px;
-    margin-bottom: 5px;
-}
-
-/* Part containing the body of the mail which can be shown/hidden */
-.expander {
-    background-image: linear-gradient(bottom, rgb(236,236,236) 11%, rgb(255,255,255) 100%);
-    background-image: -o-linear-gradient(bottom, rgb(236,236,236) 11%, rgb(255,255,255) 100%);
-    background-image: -moz-linear-gradient(bottom, rgb(236,236,236) 11%, rgb(255,255,255) 100%);
-    background-image: -webkit-linear-gradient(bottom, rgb(236,236,236) 11%, rgb(255,255,255) 100%);
-    background-image: -ms-linear-gradient(bottom, rgb(236,236,236) 11%, rgb(255,255,255) 100%);
-
-    background-image: -webkit-gradient(
-        linear,
-        left bottom,
-        left top,
-        color-stop(0.11, rgb(236,236,236)),
-        color-stop(1, rgb(255,255,255))
-    );
-    border-style: solid;
-    border-width: 1px;
-    border-color: rgb(236,236,236);
-    -webkit-border-radius: 5px 5px 5px 5px;
-    -moz-border-radius: 5px 5px 5px 5px;
-    border-radius: 5px 5px 5px 5px;
-    padding: 1em;
-    margin-left: 21px;
-    display: block;
-    vertical-align: top;
-    white-space: pre;
-}
-
-.thread-email .expander.collapsed {
-    white-space: normal;
-}
-
-/*
-.thread-email span.read-more a,
-.thread-email span.read-less a {
-    display: block;
-    float: right;
-    margin-top: 0.5em;
-}
-*/
-
-
-/* Thread types */
-.type {
-    font-variant: small-caps;
-    font-weight: bold;
-    color: white;
-    padding: 3px;
-    -webkit-border-radius: 5px 5px 5px 5px;
-    -moz-border-radius: 5px 5px 5px 5px;
-    border-radius: 5px 5px 5px 5px;
-    vertical-align: top;
-    width: 110px;
-    text-align:center;
-}
-
-.type a {
-    color: white;
-}
-
-.type_question {
-    background-color: rgb(179, 128, 255);
-}
-
-.type_agenda {
-    background-color: rgb(42, 127, 255);
-}
-
-.type_todo {
-    background-color: rgb(200, 171, 55);
-}
-
-.type_dead {
-    background-color: rgb(0, 0, 0);
-}
-
-.type_announcement {
-    background-color: rgb(170, 212, 0);
-}
-
-.type_policy {
-    background-color: rgb(200, 55, 171);
-}
-
-.type_test {
-    background-color: rgb(200, 171, 55);
-}
-
-.invisible {
-    visibility: hidden;
-}
-
-.removed {
-    display: none;
-}
-
-
-
-/* Attachments */
-
-p.attachments {
-    margin-bottom: 0;
-    font-weight: bold;
-}
-a.attachments {
-    padding-left: 18px;
-    background: url("../img/mail-attachment.png") no-repeat scroll left;
-}
-.email-info div.attachments {
-    display: inline;
-    padding: 0 1em;
-}
-.email-info .attachments ul.attachments-list {
-    display: none;
-    position: absolute;
-    margin-left: 0;
-    padding-right: 0.5em;
-    border: 1px solid #aaa;
-    border-top: none;
-    z-index: 1;
-}
-.even .email-info .attachments ul.attachments-list {
-    background-color: rgb(246, 246, 246);
-}
-.odd .email-info .attachments ul.attachments-list {
-    background-color: rgb(238, 238, 238);
-}
-.email-info .attachments ul.attachments-list li {
-    list-style-position: inside;
-    padding-left: 0.5em;
-}
-
-
-
-/* Message view */
-
-.message-header {
-    margin-bottom: 3em;
-}
-
-.message-header .thread-back {
-    display: block;
-    padding-top: 38px;
-    width: 160px;
-    overflow: hidden;
-    background-repeat: no-repeat;
-    background-position: top center;
-    background-image: url('../img/button_back.png');
-    margin-bottom: 1em;
-}
-
-
-/* Thread view */
-
-.thread-header {
-    /*background-color: #f6f6f6;*/
-    /*border-bottom: 1px solid #b3b3b3;*/
-    margin-bottom: 6em;
-    padding: 1em 0;
-}
-
-.thread-header h1,
-.message-header h1 {
-    text-align: center;
-    font-size: 24px;
-    line-height: 26px;
-}
-
-.thread-header .thread-older,
-.thread-header .thread-newer {
-    display: block;
-    padding-top: 38px;
-    width: 160px;
-    overflow: hidden;
-    background-repeat: no-repeat;
-    background-position: top center;
-    text-align: center;
-    color: #aaaaaa;
-}
-.thread-header .thread-older {
-    float: right;
-    background-image: url('../img/button_older.png');
-}
-.thread-header .thread-newer {
-    float: left;
-    background-image: url('../img/button_newer.png');
-}
-
-#olderhread, #newewthread {
-    font-size: 70%;
-    color: rgb(167, 169, 172);
-}
-
-#olderhread {
-    float: right;
-    margin-top: 2em;
-    margin-right: 20px;
-}
-
-#thread-overview-info {
-    float: right;
-}
-
-/* Thread general information column */
-
-.days-num {
-    font-size: 200%;
-    display: inline-block;
-}
-.days-text {
-    font-size: 70%;
-    display: inline-block;
-    margin-right: 2em;
-}
-
-.favorite a {
-    color: rgb(167, 169, 172);
-}
-.favorite a.saved,
-.favorite a.notsaved {
-    /* Will be shown via Javascript */
-    display: none;
-}
-
-
-#grey {
-    color: rgb(167, 169, 172);
-    background-color: rgb(167, 169, 172);
-    margin: 0px;
-    border: 0 none;
-    height: 1px;
-}
-
-#tags {
-    color: rgb(167, 169, 172);
-    margin-top: 2em;
-}
-
-#tag-title {
-    color: rgb(77, 77, 77);
-    text-transform: uppercase;
-}
-
-#tags ul {
-    padding: 10px 0;
-    margin: 0;
-}
-#tags ul li {
-    padding-left: 0;
-}
-#tags ul li span {
-    margin-left: 5px;
-}
-
-#add-tag {
-    margin-top: 0.3em;
-}
-
-#participants {
-    margin-top: 2em;
-    color: rgb(167, 169, 172);
-}
-
-#participants_title {
-    color: rgb(77, 77, 77);
-    text-transform: uppercase;
-}
-
-#participants ul {
-    padding: 0;
-    margin: 0;
-}
-
-#participants li {
-    list-style-type: none;
-    margin: 1em 0;
-}
-
-#participants img {
-    width: 20px;
-    vertical-align: middle;
-}
-
-
-/* Main section with the whole thread */
-
-/* First email of the thread. */
-
-.email-header {
-    position:relative;
-    margin-bottom: 1em;
-    height: 40px;
-}
-
-.email-header .gravatar {
-    margin-right: 10px;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.email-author .name{
-    color: rgb(55, 113, 200);
-    font-weight: bold;
-}
-.email-author .rank{
-    color: rgb(167, 169, 172);
-    font-size: 80%;
-    font-weight: bold;
-}
-
-.email-first .email-date {
-    text-align: right;
-}
-.email-date .date {
-    font-weight: bold;
-}
-.email-date .time {
-    color: rgb(167, 169, 172);
-    margin-left: 0.5em;
-    border-bottom: 1px dashed rgb(167, 169, 172);
-    cursor: help;
-}
-
-.add_comment {
-    float: right;
-}
-
-.sort-mode {
-    text-align: right;
-}
-
-/* The email thread */
-.even, .odd {
-    border-top: 1px solid rgb(179, 179, 179);
-    padding: 1em;
-	margin: 20px 0px 20px 0px;
-}
-.even {
-    background-color: rgb(246, 246, 246);
-}
-.odd {
-    background-color: rgb(238, 238, 238);
-}
-
-.email-body {
-    white-space: pre;
-    overflow: auto;
-}
-.replies .email-body {
-    -webkit-border-radius: 5px 5px 5px 5px;
-    -moz-border-radius: 5px 5px 5px 5px;
-    border-radius: 5px 5px 5px 5px;
-    border-style: solid;
-    border-width: 1px;
-    border-color: rgb(179, 179, 179);
-    padding: 5px;
-    min-height: 40px;
-    background-color: rgb(255, 255, 255);
-}
-
-.email-body span.read-more a,
-.email-body span.read-less a {
-    float: right;
-    padding: 3px 10px 0px 0px;
-}
-
-.email-info {
-    padding: 0px;
-    margin-top: 5px;
-}
-
-.quoted-switch a {
-    background-color: #fafafa;
-    padding: 0 4px 2px 4px;
-    border-left: 2px solid rgb(55, 113, 200);
-    font-weight: bold;
-    font-size: 115%;
-}
-.quoted-switch a:hover {
-    text-decoration: none;
-}
-.quoted-text {
-    border-left: 2px solid rgb(55, 113, 200);
-    padding-left: 0.2em;
-}
-
-
-/*
- * Replies
- */
-a.reply {
-  background: url("../img/reply.png") no-repeat left center;
-  padding-left: 20px;
-  margin-left: 1em;
-}
-a.reply.disabled {
-  background: url("../img/reply-disabled.png") no-repeat left center;
-  color: #999;
-}
-.reply-form {
-    display: none;
-    padding-top: 1em;
-}
-.reply-form p.reply-tools {
-    font-size: 90%;
-}
-.reply-form p {
-    margin: 0;
-}
-.reply-form textarea {
-    width: 95%;
-}
-.reply-result {
-    text-align: center;
-}
-.reply-result .alert {
-    display: inline-block;
-}
-.reply-result .alert-success {
-    margin-bottom: 0;
-}
-.reply-result .alert-error {
-    white-space: pre;
-    text-align: left;
-}
-
-
-/*
- * New thread form
- */
-.new-thread-form {
-    margin-left: 2em;
-}
-.new-thread-form #id_subject,
-.new-thread-form textarea {
-    width: 90%;
-}