From 997b629fba743967fb6b684dd91780870144a7cf Mon Sep 17 00:00:00 2001
From: myleneb <mylene@humain.es>
Date: Fri, 31 Jul 2015 10:58:25 +0200
Subject: [PATCH] Lot of fixes + templating

---
 css/style.css                | 993 ++++++++++++++++-------------------
 img/tornado_avatar.png       | Bin 3279 -> 3284 bytes
 js/theme_option.js           |  92 ++--
 sass/base/_commons.sass      |  13 +-
 sass/base/_utils.sass        |   6 +-
 sass/base/_var.sass          |  24 +-
 sass/layout/_dm.sass         |   1 -
 sass/layout/_menu.sass       |  48 +-
 sass/layout/_modal.sass      | 338 +++++-------
 sass/layout/_postboard.sass  | 356 +++++++------
 sass/layout/_profile.sass    |  11 +-
 sass/layout/_prompt.sass     |  73 +++
 sass/layout/_responsive.sass |  16 +-
 sass/layout/_wrapper.sass    |  48 ++
 sass/pages/_following.sass   |   6 +-
 sass/style.sass              | 154 +-----
 16 files changed, 1046 insertions(+), 1133 deletions(-)
 create mode 100644 sass/layout/_prompt.sass
 create mode 100644 sass/layout/_wrapper.sass

diff --git a/css/style.css b/css/style.css
index 4d8b7e2..e94511a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -107,7 +107,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
   font-weight: normal;
   font-style: normal;
 }
-[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .post-context span:before, .post-reply:before, .post-propagate:before, .post-favorite:before, .post .show-more:before, ul.userMenu-search-profiles button:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .icon-down-after:after {
+[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .postboard-posts .post .show-more:before, .post-context span:before, .post-interactions span:before, .post-stats li.stat-count:before, ul.userMenu-search-profiles button:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .icon-down-after:after {
   font-family: "fontello";
   font-style: normal;
   font-weight: normal;
@@ -138,7 +138,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 }
 
 /* '' */
-.icon-star:before, .post-favorite:before {
+.icon-star:before, .post-interactions span.post-favorite:before {
   content: "";
 }
 
@@ -192,12 +192,12 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 }
 
 /* '' */
-.icon-comment:before, .post-reply:before {
+.icon-comment:before, .post-interactions span.post-reply:before {
   content: "";
 }
 
 /* '' */
-.icon-chat:before, .post .show-more:before {
+.icon-chat:before, .postboard-posts .post .show-more:before {
   content: "";
 }
 
@@ -232,7 +232,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 }
 
 /* '' */
-.icon-twistagain:before, .post-context span:before, .post-propagate:before {
+.icon-twistagain:before, .post-context span:before, .post-interactions span.post-propagate:before, .post-stats li.stat-count:before {
   content: "";
 }
 
@@ -243,14 +243,12 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 
 /* '' */
 /* FONTS */
-/* usefull vars */
 * {
   outline: none !important;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   list-style: none;
-  color: #444;
 }
 
 html, body {
@@ -263,7 +261,12 @@ html, body {
 
 html {
   font-size: 14px;
-  background-color: #EBEBEB;
+  background-color: #E2E1DD;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjEwMCUiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlMmUxZGQiLz48c3RvcCBvZmZzZXQ9IjMzLjMzMzMzJSIgc3RvcC1jb2xvcj0iI2UyZTFkZCIvPjxzdG9wIG9mZnNldD0iNjYuNjY2NjclIiBzdG9wLWNvbG9yPSIjZTJlMWRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZDJkMGNhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  background-size: 100%;
+  background-image: -moz-radial-gradient(50% 100%, #e2e1dd, #e2e1dd, #e2e1dd, #d2d0ca);
+  background-image: -webkit-radial-gradient(50% 100%, #e2e1dd, #e2e1dd, #e2e1dd, #d2d0ca);
+  background-image: radial-gradient(50% 100%, #e2e1dd, #e2e1dd, #e2e1dd, #d2d0ca);
   background-attachment: fixed;
 }
 
@@ -281,7 +284,7 @@ a {
 }
 a:hover, a:active {
   color: #A1B775;
-  text-decoration: none;
+  text-decoration: underline;
 }
 a i {
   text-decoration: underline;
@@ -297,13 +300,11 @@ strong, b {
 }
 
 img {
-  background: #FDFCFA;
+  background: #F3F2F0;
 }
 
 h1 {
   font-size: 1.1em;
-  text-transform: uppercase;
-  letter-spacing: 0.07em;
   font-weight: 700;
   line-height: 1.1em;
 }
@@ -364,13 +365,13 @@ h3 .isFollowing:after {
   display: none;
 }
 
-.box-shadow, .modal-wrapper, .postboard .post, .dashboard > .module, .mini-profile, ul.dropdown-menu {
+.box-shadow, .modal-wrapper, ul.dropdown-menu {
   -moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0);
   -webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0);
   box-shadow: 0 8px 13px rgba(17, 17, 17, 0);
 }
 
-.clear-fix:after, .userMenu > ul:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after, .mini-following-info a:after, .forEdition.profile-card:after, .expanded-content:after, .following .following-list li a:after, .network.singleBlock:after, .options .tab-content:after, .dashboard > .module:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow ol:after, .twister-user:after {
+.clear-fix:after, .userMenu > ul:after, .wrapper:after, .dashboard > .module:after, .modal-wrapper.following-modal a:after, .modal-wrapper .modal-content:after, .modal-header:after, .prompt-wrapper .modal-header:after, .twister-user:after, .direct-messages-thread .post:after, .forEdition.profile-card:after, #postboard-top:after, #postboard-top .post-area:after, .expanded-content:after, .following .following-list li a:after, .network.singleBlock:after, .options .tab-content:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, .who-to-follow ol:after {
   content: "";
   display: table;
   clear: both;
@@ -406,7 +407,7 @@ button:hover, a.button:hover {
 button.disabled, a.button.disabled {
   opacity: 0.5;
   color: #999;
-  background-color: #EBEBEB;
+  background-color: #F3F2F0;
 }
 button.disabled:hover, a.button.disabled:hover {
   color: #666;
@@ -414,14 +415,14 @@ button.disabled:hover, a.button.disabled:hover {
   -webkit-box-shadow: 1px 1px 0 rgba(68, 68, 68, 0.3);
   box-shadow: 1px 1px 0 rgba(68, 68, 68, 0.3);
 }
-button.color-1, .modal-content button.postboard-news, button.follow, a.button.color-1, .modal-content a.button.postboard-news, a.button.follow {
-  background: #5E80A2;
-  border-color: #547392;
+button.color-1, .modal-wrapper .modal-content button.postboard-news, button.follow, a.button.color-1, .modal-wrapper .modal-content a.button.postboard-news, a.button.follow {
+  background: #A1B775;
+  border-color: #96ae64;
   color: white;
   font-weight: 500;
 }
-button.color-1:hover, .modal-content button.postboard-news:hover, button.follow:hover, a.button.color-1:hover, .modal-content a.button.postboard-news:hover, a.button.follow:hover {
-  border-color: #425a72;
+button.color-1:hover, .modal-wrapper .modal-content button.postboard-news:hover, button.follow:hover, a.button.color-1:hover, .modal-wrapper .modal-content a.button.postboard-news:hover, a.button.follow:hover {
+  border-color: #687b40;
 }
 button.color-2, button.unfollow, a.button.color-2, a.button.unfollow {
   background: #64676C;
@@ -451,18 +452,19 @@ button.light:hover, a.button.light:hover {
 .userMenu {
   width: 100%;
   position: fixed;
-  height: 50px;
+  height: 42px;
   left: 0;
   margin: 0;
-  background-color: #64676C;
+  background-color: #67686C;
   z-index: 2;
 }
 .userMenu > ul {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  width: 100%;
-  padding: 0 30% 0 15%;
+  max-width: 100%;
+  width: 1200px;
+  margin: auto;
   background: url('../img/logo.png?1437893891') no-repeat 50% 50%;
   background-size: 20px;
 }
@@ -473,24 +475,22 @@ button.light:hover, a.button.light:hover {
   display: block;
 }
 .userMenu > ul li > a {
-  line-height: 50px;
+  line-height: 42px;
   padding: 0 0.5em;
   display: inline-block;
   color: rgba(255, 255, 255, 0.7) !important;
-  font-size: 1em;
+  font-size: 1.1em;
   position: relative;
-  font-weight: 500;
+  font-weight: 400;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 .userMenu > ul li > a:hover {
   color: white !important;
+  text-decoration: none;
 }
-.userMenu > ul li > a span {
-  color: rgba(255, 255, 255, 0.7) !important;
-}
-.userMenu > ul li.current a, .userMenu > ul li.current a span {
+.userMenu > ul li.current a {
   color: white !important;
 }
 
@@ -503,23 +503,23 @@ button.light:hover, a.button.light:hover {
   position: absolute;
   text-align: center;
   display: none;
-  top: 6px;
-  right: -6px;
+  top: 4px;
+  right: -7px;
   background: #A1B775;
-  color: #fff;
   width: 15px;
   height: 15px;
   line-height: 15px;
   font-size: 10px;
-  padding: 3px;
+  padding: 1px;
   font-weight: 900;
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   border-radius: 50%;
+  letter-spacing: -0.01em;
   -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
-  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
+  color: white;
 }
 .userMenu li.userMenu-home .menu-news.show {
   display: block;
@@ -536,14 +536,12 @@ button.light:hover, a.button.light:hover {
 .userMenu li.userMenu-config + a, .userMenu li.userMenu-search + a {
   color: #222;
 }
-.userMenu li.userMenu-search {
-  margin: 3px;
-}
 .userMenu li.userMenu-search > input {
-  border: 1px solid #aaa;
-  line-height: 12px;
+  border: 1px solid #dedede;
+  line-height: 21px;
   font-size: 12px;
-  padding: 7px;
+  padding: 0 7px;
+  background: white;
 }
 .userMenu li.userMenu-search > input:focus {
   border-color: #222;
@@ -552,11 +550,67 @@ button.light:hover, a.button.light:hover {
   font-size: 1.5rem;
 }
 
+/* Wrapper and blocks */
+.wrapper {
+  width: 1200px;
+  max-width: 100%;
+  margin: auto;
+  padding-top: 52px;
+  position: relative;
+  z-index: 1;
+}
+
+.dashboard.left {
+  top: 42px;
+  float: left;
+  width: 140px;
+  min-height: 700px;
+}
+.dashboard.left > .module {
+  width: 120px;
+  position: fixed;
+  top: 52px;
+}
+.dashboard.right {
+  float: left;
+  top: 42px;
+  overflow: hidden;
+  width: 360px;
+  padding-left: 20px;
+  padding-right: 3px;
+}
+.dashboard > .module {
+  width: 100%;
+  margin-bottom: 20px;
+  background: #FDFCFA;
+  width: 100%;
+  -moz-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
+  -webkit-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
+  box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
+}
+.dashboard > .module h3 {
+  float: left;
+  padding: 10px;
+}
+.dashboard > .module h4 {
+  clear: left;
+  border-top: 1px solid #E2E1DD;
+  padding: 7px 10px;
+  font-size: 90%;
+}
+.dashboard > .module small {
+  display: none;
+}
+
 /*********** POPUP MODAL ************* */
+.modal-blackout {
+  display: none;
+}
+
 .modal-wrapper {
-  background: #EBEBEB;
-  z-index: 3000;
-  width: 30%;
+  background: #F3F2F0;
+  z-index: 4;
+  width: 34%;
   position: fixed;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -565,63 +619,130 @@ button.light:hover, a.button.light:hover {
   right: 0;
   bottom: 0;
   overflow: hidden;
-  -moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
-  -webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
-  box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
+  -moz-box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2);
+  -webkit-box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2);
+  box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2);
 }
-.modal-wrapper .postboard {
-  border: none;
-  padding: 0;
+.modal-wrapper.new-user .modal-content {
+  padding: 25px;
+}
+.modal-wrapper.new-user .modal-close {
+  display: none;
+}
+.modal-wrapper.new-user .text {
+  margin: 0 0 15px 0;
+}
+.modal-wrapper.new-user .emphasis {
+  text-align: center;
+}
+.modal-wrapper.new-user .secret-key {
+  display: block;
+  margin-top: 8px;
+  color: black;
+  font-weight: bold;
+  font-size: 110%;
+}
+.modal-wrapper.following-modal h2 {
+  display: none;
 }
-.modal-wrapper .post-area-new {
+.modal-wrapper.following-modal .mini-following-info {
+  border-bottom: 1px solid #E2E1DD;
+  line-height: 42px;
+}
+.modal-wrapper.following-modal a {
+  display: block;
   padding: 10px;
+  width: 100%;
+  color: #444;
+  background: #FDFCFA;
 }
-
-.modal-blackout {
-  background: transparent;
-  z-index: -1;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 0;
-  height: 0;
+.modal-wrapper.following-modal a:hover {
+  background: white;
+  text-decoration: none;
+  font-weight: 500;
 }
-
-.modal-content {
+.modal-wrapper.following-modal .mini-profile-photo {
+  width: 42px;
+  min-height: 42px;
+  overflow-x: hidden;
+  line-height: 0;
+  margin: 0 1rem 0 0;
+  float: left;
+}
+.modal-wrapper.following-modal .mini-following-name:after {
+  line-height: 20px;
+}
+.modal-wrapper.following-modal .mini-screen-name {
+  display: none;
+}
+.modal-wrapper.who-to-follow-modal a {
+  color: #222;
+}
+.modal-wrapper.who-to-follow-modal a.twister-user-name:hover {
+  text-decoration: none;
+}
+.modal-wrapper.who-to-follow-modal .twister-user-info {
+  text-align: left;
+  font-size: 0.8rem;
+  line-height: 1rem;
+  width: 80%;
+  padding-left: 62px;
+}
+.modal-wrapper.who-to-follow-modal button {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+.modal-wrapper.who-to-follow-modal .bio {
+  color: rgba(0, 0, 0, 0.6);
+  font-style: italic;
+  padding: 0.25rem 0;
+}
+.modal-wrapper .modal-content {
+  width: 100%;
   overflow: hidden;
   overflow-y: auto;
-  background: #EBEBEB;
 }
-.modal-content .postboard-news {
+.modal-wrapper .modal-content .postboard {
+  padding: 0;
+  clear: none !important;
+  position: relative;
+  width: 100%;
+  margin: auto;
+}
+.modal-wrapper .modal-content .postboard h2 {
+  display: block;
+}
+.modal-wrapper .modal-content .postboard h2 span {
+  display: none;
+}
+.modal-wrapper .modal-content .postboard-news {
   position: fixed;
   display: block;
   right: 2px;
-  top: 52px;
+  top: 44px;
   z-index: 2000;
 }
-.modal-content h2 span {
-  display: none;
-}
 
-.modal-header {
+.modal-header, .prompt-wrapper .modal-header {
   position: relative;
-  background: #47494c;
-  height: 50px;
+  background: #212121;
+  height: 42px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
-.modal-header h3 {
+.modal-header h3, .prompt-wrapper .modal-header h3 {
   padding-left: 20px;
-  line-height: 50px;
+  line-height: 42px;
   font-weight: 500;
   font-size: 1rem;
   color: white;
 }
-.modal-header span {
+.modal-header span, .prompt-wrapper .modal-header span {
   position: absolute;
   top: 0;
-  line-height: 50px;
+  line-height: 42px;
   font-size: 1rem;
   cursor: pointer;
   color: rgba(255, 255, 255, 0.7);
@@ -630,7 +751,7 @@ button.light:hover, a.button.light:hover {
 .modal-header span:hover {
   color: white;
 }
-.modal-header span b {
+.modal-header span b, .prompt-wrapper .modal-header span b {
   display: none;
 }
 .modal-header span.modal-close {
@@ -644,22 +765,19 @@ button.light:hover, a.button.light:hover {
   right: 35px;
 }
 
-/* MODAL */
-.modal-content {
-  width: 100%;
-}
-.modal-content .postboard {
-  padding: 0;
-  clear: none !important;
+/* Composants */
+.twister-user {
   position: relative;
+  box-sizing: border-box;
+  background: #FDFCFA;
+  border-top: 1px solid #E2E1DD;
   width: 100%;
-  margin: auto;
-  background: #EBEBEB;
-}
-.modal-content .postboard h2 {
-  display: block;
+  min-height: auto;
+  padding: 7px;
+  clear: left;
 }
 
+/*********** POPUP PROMPT ************ */
 /*********** POPUP PROMPT ************ */
 .prompt-wrapper {
   background: #FDFCFA;
@@ -673,14 +791,25 @@ button.light:hover, a.button.light:hover {
   -webkit-box-shadow: 0 8px 33px rgba(0, 0, 0, 0.3);
   box-shadow: 0 8px 33px rgba(0, 0, 0, 0.3);
 }
-.prompt-wrapper .modal-buttons {
-  padding: 10px;
-  text-align: right;
+.prompt-wrapper .modal-buttons, .prompt-wrapper .following-config-method-buttons {
+  padding: 0 20px 20px 0;
+  float: right;
 }
 .prompt-wrapper .modal-content {
-  background: #FDFCFA;
-  padding: 10px 10px 30px 10px;
-  text-align: center;
+  padding: 20px;
+}
+.prompt-wrapper .post-data {
+  border: 1px solid #F3F2F0;
+  position: relative;
+  padding: 10px;
+  background: white;
+}
+.prompt-wrapper .modal-header h3 span {
+  padding-left: 5px;
+  color: white;
+}
+.prompt-wrapper .modal-header h3 span:hover {
+  cursor: default;
 }
 
 /************ FOLLOWING-CONFIG MODAL ********* */
@@ -708,9 +837,6 @@ button.light:hover, a.button.light:hover {
 .prompt-wrapper.reTwist.prompt-wrapper {
   margin-top: -110px;
 }
-.prompt-wrapper.reTwist .modal-content {
-  padding: 20px 15px;
-}
 .prompt-wrapper.reTwist .post-expand, .prompt-wrapper.reTwist .post-interactions {
   display: none;
 }
@@ -718,10 +844,6 @@ button.light:hover, a.button.light:hover {
   position: static;
   float: right;
 }
-.prompt-wrapper.reTwist .post-text {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
 
 /********* REPLY POSTS MODAL************** */
 .prompt-wrapper.reply.prompt-wrapper {
@@ -765,13 +887,12 @@ button.light:hover, a.button.light:hover {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   width: 100%;
-  background: #f0f0f0;
 }
 .modal-wrapper.directMessages .post-photo {
-  width: 40px;
+  width: 42px;
 }
 .modal-wrapper.directMessages .post-text {
-  margin-left: 50px;
+  margin-left: 52px;
   font-size: 0.9rem;
 }
 .modal-wrapper.directMessages .post-info-name {
@@ -815,7 +936,7 @@ button.light:hover, a.button.light:hover {
 }
 .direct-messages-list li {
   position: relative;
-  border-bottom: 1px solid #EBEBEB;
+  border-bottom: 1px solid #E2E1DD;
   background: #FDFCFA;
 }
 
@@ -873,7 +994,7 @@ button.light:hover, a.button.light:hover {
   float: left;
   word-wrap: break-word;
   max-width: 70%;
-  min-height: 40px;
+  min-height: 42px;
 }
 .direct-messages-thread .post .post-photo {
   position: absolute;
@@ -897,100 +1018,6 @@ button.light:hover, a.button.light:hover {
   left: auto;
 }
 
-/********* NEW USER MODAL************* */
-.modal-wrapper.new-user .modal-content {
-  padding: 25px;
-}
-.modal-wrapper.new-user .modal-close {
-  display: none;
-}
-.modal-wrapper.new-user .text {
-  margin: 0 0 15px 0;
-}
-.modal-wrapper.new-user .emphasis {
-  text-align: center;
-}
-.modal-wrapper.new-user .secret-key {
-  display: block;
-  margin-top: 8px;
-  color: black;
-  font-weight: bold;
-  font-size: 110%;
-}
-
-/******** HASHTAG MODAL********** */
-.modal-wrapper.hashtag-modal .postboard {
-  padding: 0;
-}
-
-/****** CONVERSATION MODAL********** */
-.modal-wrapper.conversation-modal .postboard {
-  padding: 0;
-}
-
-/****** FOLLOWING MODAL****** */
-.modal-wrapper.following-modal h2 {
-  display: none;
-}
-
-.mini-following-info {
-  border-bottom: 1px solid #EBEBEB;
-  line-height: 40px;
-}
-.mini-following-info a {
-  display: block;
-  padding: 10px;
-  width: 100%;
-  color: #444;
-  background: #FDFCFA;
-}
-.mini-following-info a:hover {
-  background: white;
-}
-.mini-following-info .mini-profile-photo {
-  width: 40px;
-  line-height: 0;
-  margin: 0 1rem 0 0;
-  float: left;
-}
-.mini-following-info .mini-screen-name {
-  display: none;
-}
-
-/******* WHO TO FOLLOW MODAL****** */
-.modal-wrapper.who-to-follow-modal .open-profile-modal:hover {
-  text-decoration: none;
-}
-.modal-wrapper.who-to-follow-modal a.twister-user-name {
-  color: #444;
-}
-.modal-wrapper.who-to-follow-modal a.twister-user-name span {
-  padding-bottom: 0.5rem;
-  font-size: 1rem;
-  line-height: 1rem;
-  color: #444;
-  font-weight: 500;
-  opacity: 1;
-  letter-spacing: 0;
-}
-.modal-wrapper.who-to-follow-modal .twister-user-info {
-  text-align: left;
-  font-size: 0.8rem;
-  line-height: 1rem;
-  width: 80%;
-  padding-left: 60px;
-}
-.modal-wrapper.who-to-follow-modal button {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-}
-.modal-wrapper.who-to-follow-modal .bio {
-  color: rgba(0, 0, 0, 0.6);
-  font-style: italic;
-  padding-bottom: 0.5rem;
-}
-
 /*************************************
  ******************* PROFILE MODAL
  ************************************** */
@@ -1012,17 +1039,10 @@ button.light:hover, a.button.light:hover {
   height: 100%;
   overflow: auto;
 }
-.profile-modal .modal-content .postboard-posts .post {
-  padding: 0;
-  margin-bottom: 1px;
-}
-.profile-modal .modal-content .post-interactions {
-  margin: 2px 10px 3px 60px;
-}
 .profile-modal .modal-content .profile-card {
   margin: 0;
   padding: 0;
-  border-bottom: 1px solid #EBEBEB;
+  border-bottom: 1px solid #E2E1DD;
 }
 .profile-modal .modal-content .profile-data {
   background: none;
@@ -1101,8 +1121,7 @@ button.light:hover, a.button.light:hover {
 }
 
 .isFollowing:after {
-  font-size: 15px;
-  position: absolute;
+  font-size: 10px;
 }
 
 .known-followers {
@@ -1224,25 +1243,86 @@ button.light:hover, a.button.light:hover {
   display: none;
 }
 
-/************* POST BOARD ************ */
+/*************  TOP TEXTAREA ************ */
+#postboard-top {
+  position: relative;
+  margin-bottom: 10px;
+  transition: height 0.3s linear;
+  padding: 10px;
+  background: white;
+  overflow: hidden;
+  background: #FDFCFA;
+  -moz-transition-property: top;
+  -o-transition-property: top;
+  -webkit-transition-property: top;
+  transition-property: top;
+  -moz-transition-duration: 0.1s;
+  -o-transition-duration: 0.1s;
+  -webkit-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+  -moz-transition-timing-function: ease-out;
+  -o-transition-timing-function: ease-out;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+  top: 0;
+  z-index: 120;
+}
+#postboard-top.on, #postboard-top, #postboard-top.fixed {
+  -moz-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
+  -webkit-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
+  box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
+}
+#postboard-top.fixed {
+  position: fixed;
+  width: 360px;
+  top: 42px;
+}
+#postboard-top .profile-photo {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 42px;
+}
+#postboard-top .profile-photo img {
+  width: 100%;
+}
+#postboard-top .post-area {
+  overflow: hidden;
+  width: 100%;
+  padding-left: 58px;
+  padding-right: 0;
+  display: inline;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  background: none;
+  float: right;
+}
+#postboard-top .post-area .post-area-new {
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+#postboard-top .post-area .post-area-new textarea {
+  margin: 0 0 10px 0;
+}
+
+/*************  POSTBOARD ************ */
 .postboard {
-  width: 55%;
-  margin-left: 15%;
-  padding: 7px 20px;
+  width: 700px;
+  float: left;
 }
-.postboard h2 {
+.postboard h2, .postboard .postboard-news {
   display: none;
 }
-.postboard .postboard-posts {
+
+.postboard-posts {
   position: relative;
   z-index: 1;
   clear: both;
+  /*********** EVERYTHING SPECIFIC TO OPEN POSTS  ************* */
 }
-.postboard .postboard-news {
-  display: none;
-}
-.postboard .post {
-  background: #FDFCFA;
+.postboard-posts .post {
   position: relative;
   margin-bottom: 1px;
   -moz-transition-property: margin;
@@ -1257,58 +1337,58 @@ button.light:hover, a.button.light:hover {
   -o-transition-timing-function: ease-out;
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
+  color: #5e5e5e;
+  cursor: pointer;
+}
+.postboard-posts .post:hover {
+  color: #000;
 }
-.postboard .post .post, .postboard .post .original.post, .postboard .post .post.open, .postboard .post .mini-profile .post.post-area-new, .mini-profile .postboard .post .post.post-area-new, .postboard .post #postboard-top .post-area .post.post-area-new, #postboard-top .post-area .postboard .post .post.post-area-new {
-  position: relative;
+.postboard-posts .post .show-more {
+  display: inline-block;
+  float: right;
+  font-size: 12px;
+  color: #919191;
 }
-
-.module.open .post, .mini-profile .module.post-area-new .post, #postboard-top .post-area .module.post-area-new .post {
-  color: #1e1e1e;
+.postboard-posts .post .show-more:hover {
+  color: #515151;
 }
-
-.post:hover {
-  color: #1e1e1e;
+.postboard-posts .post .post-expand {
+  color: #919191;
+  cursor: pointer;
+  font-size: 12px;
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
 }
-
-.post-data {
-  padding: 1rem;
+.postboard-posts .post .post-expand:hover {
+  color: #515151;
 }
-
-.post.open .original, .mini-profile .post.post-area-new .original, #postboard-top .post-area .post.post-area-new .original, .post.open .related, .mini-profile .post.post-area-new .related, #postboard-top .post-area .post.post-area-new .related {
-  margin-bottom: 1px;
+.postboard-posts .post .post-data {
+  padding: 10px;
+  background: #FDFCFA;
 }
-
 .postboard-posts > .post {
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
+  -moz-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
+  -webkit-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
+  box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
 }
-.postboard-posts > .post.open, .mini-profile .postboard-posts > .post.post-area-new, #postboard-top .post-area .postboard-posts > .post.post-area-new {
+.postboard-posts > .post.open, #postboard-top .post-area .postboard-posts > .post.post-area-new, .mini-profile .postboard-posts > .post.post-area-new {
   margin-top: 1rem;
   margin-bottom: 1rem;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-.postboard-posts > .post:after {
-  content: "";
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 0;
-  height: 100%;
-  transition: all 0.2s linear;
+  -moz-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0);
+  -webkit-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0);
+  box-shadow: 1px 2px 2px rgba(17, 17, 17, 0);
 }
-.postboard-posts > .post.open:after, .mini-profile .postboard-posts > .post.post-area-new:after, #postboard-top .post-area .postboard-posts > .post.post-area-new:after {
-  width: 5px;
-}
-
-.post:hover {
-  cursor: pointer;
+.postboard-posts > .post.open .post, #postboard-top .post-area .postboard-posts > .post.post-area-new .post, .mini-profile .postboard-posts > .post.post-area-new .post {
+  color: #1e1e1e;
+  -moz-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
+  -webkit-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
+  box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1);
+  margin-bottom: 1px;
 }
-
-.open, .mini-profile .post-area-new, #postboard-top .post-area .post-area-new {
-  background: none !important;
+.postboard-posts > .post.open .post:not(.original) .post-expand, #postboard-top .post-area .postboard-posts > .post.post-area-new .post:not(.original) .post-expand, .mini-profile .postboard-posts > .post.post-area-new .post:not(.original) .post-expand {
+  display: none;
+  margin: 0;
 }
 
 .post-photo {
@@ -1317,7 +1397,7 @@ button.light:hover, a.button.light:hover {
   float: left;
   vertical-align: middle;
   overflow: hidden;
-  width: 40px;
+  width: 42px;
 }
 .post-photo img {
   width: 100%;
@@ -1332,7 +1412,6 @@ button.light:hover, a.button.light:hover {
   float: left;
   margin-left: 10px;
 }
-
 .post-info-name:hover {
   text-decoration: none;
   color: black;
@@ -1359,9 +1438,9 @@ button.light:hover, a.button.light:hover {
 }
 
 .post-text {
-  margin: 0 0 0 50px;
+  margin: 0 0 0 52px;
   word-wrap: break-word;
-  min-height: 20px;
+  min-height: 22px;
   padding: 0;
 }
 .post-text a:hover {
@@ -1374,7 +1453,7 @@ button.light:hover, a.button.light:hover {
   margin: 0 0 1em 0;
   color: #919191;
 }
-.post-context:before {
+.post-context span:before {
   display: block;
   float: left;
   background: #A1B775;
@@ -1389,15 +1468,6 @@ button.light:hover, a.button.light:hover {
   margin-right: 0.4em;
 }
 
-.mini-screen-name {
-  font-size: 13px;
-  color: #444;
-}
-
-.post-retransmited-icon {
-  display: none;
-}
-
 .post-interactions {
   margin: 10px 0 3px 0;
   text-align: right;
@@ -1409,72 +1479,41 @@ button.light:hover, a.button.light:hover {
   cursor: pointer;
   font-size: 12px;
   line-height: 12px;
-}
-
-.post-expand {
-  color: #919191;
-  cursor: pointer;
-  font-size: 12px;
-  position: absolute;
-  left: 10px;
-  bottom: 10px;
-}
-.post-expand:hover {
-  color: #515151;
-}
-
-.post-reply, .post-propagate, .post-favorite {
-  padding-left: 10px;
+  position: relative;
+  margin-left: 7px;
   display: none;
 }
-.post-reply:hover, .post-propagate:hover, .post-favorite:hover {
+.post-interactions span:hover {
   color: #515151;
 }
-
-.post-favorite {
+.post-interactions span.post-favorite {
   display: none !important;
 }
-
-.post .show-more {
-  display: inline-block;
-  float: right;
-  font-size: 12px;
-  color: #919191;
-}
-.post .show-more:hover {
-  color: #515151;
-}
-
-.expanded-content.show-pic {
-  display: block;
-}
-
-.expanded-post .post-expand, .expanded-post .post-reply, .expanded-post .post-propagate, .expanded-post .post-favorite {
-  color: #919191;
-}
-.expanded-post .post-expand:hover, .expanded-post .post-reply:hover, .expanded-post .post-propagate:hover, .expanded-post .post-favorite:hover {
-  color: #515151;
-}
-
-.related .post-expand {
-  display: none;
-  margin: 0;
-}
-
-.post:hover .post-reply, .post:hover .post-propagate, .post:hover .post-favorite, .original.open .post-interactions .post-reply, .mini-profile .original.post-area-new .post-interactions .post-reply, #postboard-top .post-area .original.post-area-new .post-interactions .post-reply, .original.open .post-interactions .post-propagate, .mini-profile .original.post-area-new .post-interactions .post-propagate, #postboard-top .post-area .original.post-area-new .post-interactions .post-propagate, .original.open .post-interactions .post-favorite, .mini-profile .original.post-area-new .post-interactions .post-favorite, #postboard-top .post-area .original.post-area-new .post-interactions .post-favorite, .post:hover .original .post-interactions .post-reply, .post:hover .original .post-interactions .post-propagate, .post:hover .original .post-interactions .post-favorite, .related.post:hover .post-reply, .related.post:hover .post-propagate, .related.post:hover .post-favorite {
+.post:hover .post-interactions .post-reply, .post:hover .post-interactions .post-propagate {
   display: inline-block;
 }
 
-.open .related .post-reply, .mini-profile .post-area-new .related .post-reply, #postboard-top .post-area .post-area-new .related .post-reply, .open .related .post-propagate, .mini-profile .post-area-new .related .post-propagate, #postboard-top .post-area .post-area-new .related .post-propagate, .open .related .post-favorite, .mini-profile .post-area-new .related .post-favorite, #postboard-top .post-area .post-area-new .related .post-favorite {
+.open .related .post-reply, #postboard-top .post-area .post-area-new .related .post-reply, .mini-profile .post-area-new .related .post-reply,
+.open .related .post-propagate,
+#postboard-top .post-area .post-area-new .related .post-propagate,
+.mini-profile .post-area-new .related .post-propagate,
+.open .related .post-favorite,
+#postboard-top .post-area .post-area-new .related .post-favorite,
+.mini-profile .post-area-new .related .post-favorite {
   display: none !important;
 }
-.open .related:hover .post-reply, .mini-profile .post-area-new .related:hover .post-reply, #postboard-top .post-area .post-area-new .related:hover .post-reply, .open .related:hover .post-propagate, .mini-profile .post-area-new .related:hover .post-propagate, #postboard-top .post-area .post-area-new .related:hover .post-propagate {
+.open .related:hover .post-reply, #postboard-top .post-area .post-area-new .related:hover .post-reply, .mini-profile .post-area-new .related:hover .post-reply,
+.open .related:hover .post-propagate,
+#postboard-top .post-area .post-area-new .related:hover .post-propagate,
+.mini-profile .post-area-new .related:hover .post-propagate {
   display: inline-block !important;
 }
 
 .expanded-content {
-  display: none;
-  padding: 5px 5px 0 5px;
+  padding: 0;
+}
+.expanded-content textarea {
+  clear: left;
 }
 
 .image-preview {
@@ -1498,14 +1537,15 @@ button.light:hover, a.button.light:hover {
   display: inline-block;
 }
 .post-stats li.stat-count {
-  font-weight: 700;
-  font-size: 11px;
+  font-size: 12px;
   float: left;
   line-height: 20px;
-  color: llighten(#444, 30%);
+}
+.post-stats li.stat-count:before {
+  margin-right: 0;
 }
 .post-stats li.stat-count span:last-child {
-  padding-right: 5px;
+  display: none;
 }
 .post-stats a {
   position: relative;
@@ -1513,53 +1553,62 @@ button.light:hover, a.button.light:hover {
   display: inline-block;
   width: 20px;
   height: 20px;
-  margin: 0 1px 0 0;
+  margin: 0 2px 0 0;
 }
 .post-stats a img {
   width: 20px;
   height: 20px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
 }
 
-.user-name-tooltip {
+.avatar-row {
+  margin-left: 5px;
+}
+.avatar-row a:hover .user-name-tooltip {
+  display: block;
+}
+.avatar-row .user-name-tooltip {
   display: none;
   position: absolute;
-  background: #2a2a2a;
-  font-size: 12px;
+  background: #222;
+  font-size: 11px;
+  line-height: 11px;
   white-space: nowrap;
-  padding: 3px 5px;
+  padding: 5px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
   color: #fff;
-  top: -42px;
-  left: 0px;
+  top: -32px;
+  left: -10px;
 }
-.user-name-tooltip:after {
+.avatar-row .user-name-tooltip:after {
   content: "";
   position: absolute;
   width: 0;
-  left: 4px;
+  left: 13px;
   bottom: -5px;
-  border-top: solid 5px #2a2a2a;
+  border-top: solid 5px #222;
   border-left: solid 5px transparent;
   border-right: solid 5px transparent;
 }
 
-.post-stats a:hover .user-name-tooltip {
-  display: inline-block;
-}
-
 .post-replies .sub-replies {
-  border-left: solid 18px #EBEBEB;
+  border-left: solid 18px transparent;
 }
 
 .following {
-  width: 40%;
-  margin-left: 30%;
-  padding: 20px;
+  width: 55%;
+  margin-left: 15%;
+  padding: 7px 20px;
 }
 .following h2 {
   display: none;
 }
 .following .following-list li {
-  border-bottom: 1px solid #EBEBEB;
+  border-bottom: 1px solid #E2E1DD;
   line-height: 45px;
   background: #FDFCFA;
   position: relative;
@@ -1582,7 +1631,7 @@ button.light:hover, a.button.light:hover {
   color: #444;
 }
 .following .mini-profile-photo {
-  width: 40px;
+  width: 42px;
   line-height: 0;
   margin: 0 1rem 0 0;
   float: left;
@@ -1683,7 +1732,7 @@ button.light:hover, a.button.light:hover {
   padding: 2rem;
 }
 .network.singleBlock .module {
-  background: #EBEBEB;
+  background: #F3F2F0;
   -moz-box-shadow: 0 1px 1px rgba(85, 85, 85, 0.1);
   -webkit-box-shadow: 0 1px 1px rgba(85, 85, 85, 0.1);
   box-shadow: 0 1px 1px rgba(85, 85, 85, 0.1);
@@ -1795,7 +1844,7 @@ button.light:hover, a.button.light:hover {
   margin: 5px 0px 5px 12px;
 }
 .options .tab-content {
-  background: #EBEBEB;
+  background: #F3F2F0;
   position: relative;
   padding: 20px;
 }
@@ -1827,7 +1876,7 @@ button.light:hover, a.button.light:hover {
   color: #222;
 }
 .options input:checked + label.tabs {
-  background: #EBEBEB;
+  background: #F3F2F0;
   color: #222;
 }
 
@@ -1839,13 +1888,13 @@ button.light:hover, a.button.light:hover {
   display: block;
   margin: 0;
   padding: 5px;
-  border-bottom: 1px solid #EBEBEB;
+  border-bottom: 1px solid #E2E1DD;
   text-align: center;
   font-size: 0.9em;
   transition: color 0.1s linear;
 }
 .promoted-posts-only li.disabled {
-  background: #F4F3F2;
+  background: #F3F2F0;
 }
 .promoted-posts-only li.active, .promoted-posts-only li.active span {
   color: #444;
@@ -1858,58 +1907,12 @@ button.light:hover, a.button.light:hover {
   color: rgba(68, 68, 68, 0.3);
 }
 
-/* Wrapper and blocks */
-.wrapper {
-  width: 100%;
-  max-width: 100%;
-  margin: auto;
-  padding-top: 50px;
-  position: relative;
-  z-index: 1;
-}
-
-.dashboard.left {
-  position: absolute;
-  top: 50px;
-  left: 0;
-  width: 15%;
-}
-.dashboard.left > .module {
-  float: right;
-  width: 128px;
-}
-.dashboard.right {
-  position: fixed;
-  right: 0;
-  top: 50px;
-  overflow: hidden;
-  width: 30%;
-}
-.dashboard > .module {
-  max-width: 320px;
-  margin-bottom: 20px;
-  background: #FDFCFA;
-  width: 100%;
-}
-.dashboard > .module h3 {
-  float: left;
-  padding: 20px;
-}
-.dashboard > .module h4 {
-  clear: left;
-  border-top: 1px solid #EBEBEB;
-  padding: 10px;
-}
-.dashboard > .module small {
-  display: none;
-}
-
 /********** CONFIG SUBMENU & SEARCH RESULTS *********** */
 .dialog-modal {
   display: none;
   background: #222;
   position: absolute;
-  top: 46px;
+  top: 38px;
   right: 0;
   width: 320px;
   overflow: hidden;
@@ -1938,7 +1941,7 @@ ul.userMenu-search-profiles li {
   margin: 0;
   cursor: pointer;
   background: #FDFCFA;
-  border-bottom: 1px solid #EBEBEB;
+  border-bottom: 1px solid #E2E1DD;
 }
 ul.userMenu-search-profiles li:hover {
   background: white;
@@ -1948,7 +1951,7 @@ ul.userMenu-search-profiles li a {
   width: 100%;
   font-size: 12px;
   font-weight: 400;
-  line-height: 40px;
+  line-height: 42px;
   display: block;
   margin: 0;
   padding: 0;
@@ -1965,10 +1968,12 @@ ul.userMenu-search-profiles .mini-screen-name {
   font-weight: 500;
 }
 ul.userMenu-search-profiles .mini-profile-photo {
-  width: 40px;
+  width: 42px;
   height: auto;
-  margin: 10px;
+  min-height: 42px;
+  margin: 5px;
   float: left;
+  overflow-x: hidden;
 }
 ul.userMenu-search-profiles .mini-profile-info {
   width: 100%;
@@ -1976,9 +1981,9 @@ ul.userMenu-search-profiles .mini-profile-info {
 }
 ul.userMenu-search-profiles button {
   font-size: 1.4rem;
-  line-height: 25px;
-  height: 30px;
-  width: 40px;
+  line-height: 27px;
+  height: 32px;
+  width: 42px;
   text-align: center;
   font-weight: 500;
   padding: 0;
@@ -1995,7 +2000,7 @@ ul.userMenu-search-profiles button {
   padding: 3px 10px;
   margin: 10px 20px 0 0;
   border: none;
-  background: #EBEBEB;
+  background: #F3F2F0;
   box-sizing: border-box;
 }
 
@@ -2007,6 +2012,9 @@ ul.userMenu-search-profiles button {
 }
 
 /***************** MINI PROFILE ****************************** */
+.mini-profile a:hover {
+  text-decoration: none;
+}
 .mini-profile a.button {
   background: #aaa;
   margin: 1em auto;
@@ -2030,8 +2038,8 @@ ul.userMenu-search-profiles button {
 .mini-profile-indicators {
   margin: 0;
   text-align: center;
-  border-top: 1px solid #EBEBEB;
-  background: #F4F3F2;
+  border-top: 1px solid #E2E1DD;
+  background: #F3F2F0;
 }
 .mini-profile-indicators li {
   -moz-box-sizing: border-box;
@@ -2041,7 +2049,7 @@ ul.userMenu-search-profiles button {
   position: relative;
   font-size: 0.8em;
   text-align: center;
-  border-bottom: 1px solid #EBEBEB;
+  border-bottom: 1px solid #E2E1DD;
 }
 .mini-profile-indicators li a {
   color: #777777;
@@ -2060,9 +2068,8 @@ ul.userMenu-search-profiles button {
 
 .messages-qtd {
   position: absolute;
-  top: 50%;
-  margin-top: -11px;
-  right: 11px;
+  top: 5px;
+  right: 5px;
   background: #A1B775;
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
   color: #fff;
@@ -2080,6 +2087,10 @@ ul.userMenu-search-profiles button {
   display: none;
 }
 
+.left .mini-profile-info {
+  padding-top: 32px;
+}
+
 .mini-profile-name {
   color: #444;
   font-size: 1em;
@@ -2097,14 +2108,14 @@ ul.userMenu-search-profiles button {
   width: 64px;
   height: auto;
   display: block;
-  margin: 32px auto 0 auto;
+  margin: auto;
 }
 
 .profile-data {
   clear: both;
   padding: 0 0 1em 0;
   text-align: center;
-  background: #EBEBEB;
+  background: #F3F2F0;
 }
 .mini-profile .profile-data {
   display: none;
@@ -2164,16 +2175,16 @@ ul.userMenu-search-profiles button {
   color: #444;
 }
 
-.mini-follower-link {
+.mini-follower-link, .followed-by {
   display: inline-block;
   margin: 1px;
   line-height: 12px;
 }
-.mini-follower-link.isFollowing:after {
+.mini-follower-link.isFollowing:after, .followed-by.isFollowing:after {
   display: none;
 }
-.mini-follower-link:after {
-  content: "·";
+.mini-follower-link:after, .followed-by:after {
+  content: "";
   font-weight: 900;
   color: #222;
   margin-left: 1px;
@@ -2192,7 +2203,7 @@ ul.userMenu-search-profiles button {
   -moz-transition: height 0.3s linear;
   -o-transition: height 0.3s linear;
   -ms-transition: height 0.3s linear;
-  height: 40px;
+  height: 42px;
   border: none;
   background: white;
   border: 1px solid rgba(0, 0, 0, 0.1);
@@ -2207,77 +2218,10 @@ ul.userMenu-search-profiles button {
   display: none;
 }
 
-#postboard-top {
-  clear: both;
-  position: relative;
-  margin-bottom: 10px;
-  transition: height 0.3s linear;
-  padding: 10px;
-  background: white;
-  overflow: hidden;
-  background: #FDFCFA;
-  -moz-box-shadow: 0 0 13px rgba(17, 17, 17, 0);
-  -webkit-box-shadow: 0 0 13px rgba(17, 17, 17, 0);
-  box-shadow: 0 0 13px rgba(17, 17, 17, 0);
-  -moz-transition-property: box-shadow;
-  -o-transition-property: box-shadow;
-  -webkit-transition-property: box-shadow;
-  transition-property: box-shadow;
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  -moz-transition-timing-function: ease-out;
-  -o-transition-timing-function: ease-out;
-  -webkit-transition-timing-function: ease-out;
-  transition-timing-function: ease-out;
-  z-index: 120;
-}
-#postboard-top.on {
-  -moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
-  -webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
-  box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
-}
-#postboard-top.hide {
-  display: none !important;
-}
-#postboard-top.show {
-  display: block;
-}
-#postboard-top .profile-photo {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  width: 40px;
-}
-#postboard-top .profile-photo img {
-  width: 100%;
-}
-#postboard-top .post-area {
-  overflow: hidden;
-  width: 100%;
-  padding-left: 58px;
-  padding-right: 0;
-  display: inline;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  background: none;
-  float: right;
-}
-#postboard-top .post-area .post-area-new {
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-#postboard-top .post-area .post-area-new textarea {
-  margin: 0 0 10px 0;
-}
-
 #post-preview {
-  background: #EBEBEB;
-  border: 1px solid #EBEBEB;
-  padding: 15px;
+  border: 1px solid #E2E1DD;
+  border-bottom: 0;
+  padding: 5px;
   -moz-transition-property: all;
   -o-transition-property: all;
   -webkit-transition-property: all;
@@ -2287,10 +2231,12 @@ ul.userMenu-search-profiles button {
   -webkit-transition-duration: 0.1s;
   transition-duration: 0.1s;
   width: 100% !important;
+  font-size: 90%;
   word-wrap: break-word;
+  clear: left;
 }
 
-.post-area-new.open textarea, .mini-profile .post-area-new textarea, #postboard-top .post-area .post-area-new textarea {
+.post-area-new.open textarea, #postboard-top .post-area .post-area-new textarea, .mini-profile .post-area-new textarea {
   height: 80px;
 }
 
@@ -2313,7 +2259,7 @@ textarea.splited-post {
   text-align: right;
 }
 
-.post-area-new.open > .post-area-extras, .mini-profile .post-area-new > .post-area-extras, #postboard-top .post-area .post-area-new > .post-area-extras {
+.post-area-new.open > .post-area-extras, #postboard-top .post-area .post-area-new > .post-area-extras, .mini-profile .post-area-new > .post-area-extras {
   height: auto;
   transition: all 0.6s linear;
 }
@@ -2335,9 +2281,6 @@ textarea.splited-post {
 .who-to-follow.module li:hover button {
   display: block;
 }
-.who-to-follow.module .bio {
-  text-align: left !important;
-}
 .who-to-follow small {
   display: none;
 }
@@ -2349,58 +2292,37 @@ textarea.splited-post {
   clear: both;
 }
 
-.twister-user {
-  position: relative;
-  box-sizing: border-box;
-  background: #FDFCFA;
-  border-top: 1px solid #EBEBEB;
-  width: 100%;
-  min-height: auto;
-  padding: 10px 0;
-  clear: left;
-  -moz-transition-property: background;
-  -o-transition-property: background;
-  -webkit-transition-property: background;
-  transition-property: background;
-  -moz-transition-duration: 0.1s;
-  -o-transition-duration: 0.1s;
-  -webkit-transition-duration: 0.1s;
-  transition-duration: 0.1s;
-}
-.twister-user:hover {
-  background: white;
-}
-
 img.twister-user-photo {
   float: left;
   display: block;
   float: left;
-  width: 40px;
+  width: 42px;
   height: auto;
-  margin: 0 10px;
-  background: #EBEBEB;
+  margin: 0 10px 0 0;
 }
 
 .followers {
   font-size: 12px;
-  color: #444;
 }
 .followers label, .followers a {
   display: inline-block;
 }
 
 .followed-by {
-  color: #aaa;
   font-size: 12px;
   cursor: pointer;
   display: block;
 }
 
 .twister-user-name, .twister-by-user-name {
-  font-weight: bold;
+  font-weight: 500;
   font-size: 14px;
-  color: #aaa;
   text-decoration: none;
+  color: #222;
+}
+
+.twister-user-name {
+  font-weight: 700;
 }
 
 .twister-user-tag {
@@ -2467,7 +2389,7 @@ img.twister-user-photo {
 .toptrends-list {
   margin: 0;
   clear: both;
-  border-top: 1px solid #EBEBEB;
+  border-top: 1px solid #E2E1DD;
   padding: 10px;
 }
 .toptrends-list li {
@@ -2695,11 +2617,20 @@ ul.dropdown-menu li > li > a {
     padding: 0;
   }
 
-  .postboard {
-    width: 85%;
+  .postboard, #postboard-top.onTop {
+    position: absolute;
+    left: 135px;
+    right: 20px;
+    width: auto;
   }
 
   .modal-wrapper {
     width: 85%;
   }
+  .modal-wrapper .postboard {
+    width: 700px;
+    float: left;
+    position: relative;
+    left: 0;
+  }
 }
diff --git a/img/tornado_avatar.png b/img/tornado_avatar.png
index e5a44e526921522bec3dce4bfb62b88aab061f4c..887bbca7e188e56a77c023b7816b3441d1a686e6 100644
GIT binary patch
literal 3284
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
Zh<U+_!Mg#;J`uljg!X+HUeiAE{{S133|0UD

literal 3279
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
B43hu=

diff --git a/js/theme_option.js b/js/theme_option.js
index 4dd9760..3487501 100644
--- a/js/theme_option.js
+++ b/js/theme_option.js
@@ -1,43 +1,18 @@
-
-
-
-
 $(window).resize(function()
 {
-    $('.module.toptrends').detach().appendTo($('.dashboard.right'));
-    $('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
-    $('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
+    reAppendModules();
 });
 
-
-
 $(document).ready(function()
 {
-    $('.module.toptrends').detach().appendTo($('.dashboard.right'));
-    $('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
-    $('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
+    var windowHeight = $(window).height();
+
+    reOrganizeTemplates()
 
     $('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');});
     $('#postboard-top textarea').on('focus',function(){$('#postboard-top').addClass('on');});
 
 
-
-    var windowHeight = $(window).height();
-    $('.modal-close').html('');
-    $('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
-
-    $('.modal-back').html('');
-    $('.twister-user-remove').html('');
-    $('.profile-card-main').attr('style', '');
-    $('.userMenu-search-profiles button').html('+').attr('title',polyglot.t('Follow'));
-    $('.mini-profile-actions span').html('');
-    $('.promoted-posts-only').detach().appendTo($('.left .mini-profile'));
-    $('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
-    $('.post-context').each(function(){
-        $(this).prependTo($(this).parent());
-    });
-
-
     $( '.userMenu-home.current a' ).on( 'click', function() {
         $('html, body').animate({scrollTop:0},300);
         return false
@@ -45,9 +20,8 @@ $(document).ready(function()
 
 
 
-    
-    $( ".promoted-posts-only").click(function() {
     // modify the way promoted posts are shown
+    $( ".promoted-posts-only").click(function() {
         //active promoted posts tab
         $(this).children('.promoted-posts').addClass(promotedPostsOnly ? "active" : "disabled");
         $(this).children('.normal-posts').addClass(promotedPostsOnly ? "disabled" : "active");
@@ -72,16 +46,58 @@ $(document).ready(function()
         $(document).ready(localizeLabels);
 
 
-    $('<div></div>').appendTo('.postboard-loading');
-    $('<div></div>').appendTo('.postboard-loading');
-    $('<div></div>').appendTo('.postboard-loading');
 
 
+    $(window).scroll(function(){
+        window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals
+    });
+       /*
+    $(window).scroll(function(){
+        window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals
+
+        if ($(document).scrollTop() >= 142) {
+            if (this.css('position') === 'relative')
+                this.addClass('onTop'); 
+        }else if (this.css('position') === 'fixed')
+            this.removeClass('onTop'); 
+    }).bind($('#postboard-top')));*/
+}
+);
+
+function reOrganizeTemplates() { // for nin's templating
 
-});
+    reAppendModules();
+
+    //removes unused html
+    $('.modal-close').html('');
+    $('.modal-back').html('');
+    $('.twister-user-remove').html('');
+    $('.profile-card-main').attr('style', '');
+    $('.userMenu-search-profiles button').html('+').attr('title',polyglot.t('Follow'));
+    $('.mini-profile-actions span').html('');
+
+    //re-organizes
+    $('.promoted-posts-only').detach().appendTo($('.left .mini-profile'));
+    $('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
+    $('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
+    $('.post-context').each(function(){ $(this).prependTo($(this).parent()); }); // puts context on top of post
+
+    //loader
+    newLoader()
+}
 
+function reAppendModules() { // avoid w1200 things
+    $('.module.toptrends').detach().appendTo($('.dashboard.right'));
+    $('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
+    $('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
+}
 
 
+function newLoader() { // create divs for new loader
+    $('<div></div>').appendTo('.postboard-loading');
+    $('<div></div>').appendTo('.postboard-loading');
+    $('<div></div>').appendTo('.postboard-loading');
+}
 
 function localizeLabels() {
     $("label[for=tab_language]").text(polyglot.t("Language"));
@@ -93,8 +109,8 @@ function localizeLabels() {
 }
 
 function openModal(modal) {
-    window_scrollY = window.pageYOffset;
-
+    
+    var windowHeight = $(window).height();
     if (!modal.classBase)
         modal.classBase = '.modal-wrapper';
 
@@ -118,7 +134,6 @@ function openModal(modal) {
     if (modal.classBase === '.modal-wrapper') {
         modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight());
 
-        var windowHeight = $(window).height();
         if (modal.self.outerHeight() > windowHeight) {
             modal.content.outerHeight(modal.content.outerHeight() - modal.self.outerHeight() + windowHeight);
             modal.self.outerHeight(windowHeight);
@@ -129,3 +144,4 @@ function openModal(modal) {
 
     return modal;
 }
+
diff --git a/sass/base/_commons.sass b/sass/base/_commons.sass
index 3e058d1..10c479b 100644
--- a/sass/base/_commons.sass
+++ b/sass/base/_commons.sass
@@ -2,7 +2,7 @@
 	outline: none!important
 	+box-sizing(border-box)
 	list-style: none
-	color: $defaut-font-color
+
 
 
 html, body
@@ -16,6 +16,7 @@ html
 	font-size: $global-font-size
 	background-color: $main-background-color
 	//+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) )
+	+background-image(radial-gradient(50% 100% , $main-background-color,$main-background-color,$main-background-color, darken($main-background-color, 7%)) )
 	background-attachment: fixed
 body 
 	font-size: $main-font-size
@@ -23,15 +24,15 @@ body
 	font-family : $main-font-family
 	font-weight: 400
 	overflow-y: scroll
-	
 
 
-a
+
+a 
 	text-decoration: none
 	color: $main-color-color
 	&:hover, &:active
 		color: $main-color-color
-		text-decoration: none
+		text-decoration: underline
 	i 
 		text-decoration: underline
 		font-style: normal
@@ -43,12 +44,10 @@ strong, b
 	font-weight: 600
 
 img 
-	background: $bloc-light-color
+	background: $bloc-background-color
 
 h1
 	font-size: 1.1em
-	text-transform: uppercase
-	letter-spacing: 0.07em
 	font-weight: 700
 	line-height: 1.1em
 
diff --git a/sass/base/_utils.sass b/sass/base/_utils.sass
index c916406..9dfee13 100644
--- a/sass/base/_utils.sass
+++ b/sass/base/_utils.sass
@@ -41,12 +41,12 @@ button, a.button
 			color: #666
 			+box-shadow(1px 1px 0 rgba(#444, .3))
 	&.color-1 
-		background: #5E80A2
-		border-color: darken(#5E80A2, 5%)
+		background: $main-color-color
+		border-color: darken($main-color-color, 5%)
 		color: white
 		font-weight: 500
 		&:hover 
-			border-color: darken(#5E80A2, 15%)
+			border-color: darken($main-color-color, 22%)
 	&.color-2
 		background: #64676C
 		border-color: darken(#64676C, 5%)
diff --git a/sass/base/_var.sass b/sass/base/_var.sass
index 8da9ad7..8141bab 100644
--- a/sass/base/_var.sass
+++ b/sass/base/_var.sass
@@ -1,11 +1,19 @@
 //these are the main variables used in the sass file
 
+$site-width : 1200px
+$gut 		: 20
+$postboardWidth : 700px
+$miniProfileWidth : $site-width/10
+$leftWidth 	: $miniProfileWidth + $gut 
+$rightWidth : $site-width - ($leftWidth + $postboardWidth)
 
+$mini-usr-img : 42px
+$usr-img : 64px
 
-
-$site-width : 100%
-$gut-width : 2.5%
 $space : 1rem
+
+
+
 // colors
 
 $light-grey: #C3C3C3
@@ -18,10 +26,9 @@ $dark-grey : #444
 $main-color-light: #aaa
 $main-color-dark: #222
 $main-color-color: $color-green
-$main-background-color: #EBEBEB
+$main-background-color: #E2E1DD
 $bloc-light-color : #FDFCFA
-
-$bloc-background-color: #EBEBEB
+$bloc-background-color: #F3F2F0
 
 $defaut-font-color: $dark-grey
 
@@ -36,8 +43,3 @@ $main-font-family: "Roboto", sans-serif
 $symbol-font-family: "fontello"
 $serif-font-family: "Droid", serif
 
-
-/* usefull vars */
-
-$mini-usr-img : 40px
-$usr-img : 64px
\ No newline at end of file
diff --git a/sass/layout/_dm.sass b/sass/layout/_dm.sass
index 31cef58..7a512e2 100644
--- a/sass/layout/_dm.sass
+++ b/sass/layout/_dm.sass
@@ -28,7 +28,6 @@
 	.modal-content
 		+box-sizing(border-box)
 		width: 100%
-		background: #f0f0f0
 
 	.post-photo
 		width: $mini-usr-img
diff --git a/sass/layout/_menu.sass b/sass/layout/_menu.sass
index ea8c431..a1aa1bd 100644
--- a/sass/layout/_menu.sass
+++ b/sass/layout/_menu.sass
@@ -1,24 +1,25 @@
 // vars for the menu
 
-$menu-height : 50px
+$menu-height : 42px
 $menu-font-color: white
-
+$menuBgColor : #67686C
 .userMenu
 	width: 100%
 	position: fixed
 	height: $menu-height
 	left: 0
 	margin: 0
-	background-color: #64676C
-	//+background-image(linear-gradient(to left , $color-green, $color-green, #5E80A2) )
-	
+	//background-color: #FFAF1C
+	//+background-image(linear-gradient(to right , $color-green, #5E80A2) )
+	background-color: $menuBgColor
 	z-index: 2
 	> ul
 		@extend .clear-fix
 		+box-sizing(border-box)
-		width: 100%
-		padding: 0 30% 0 15% 
-		background: image-url("logo.png") no-repeat 50% 50%
+		max-width: 100%
+		width: $site-width
+		margin: auto
+		background: image-url("logo.png") no-repeat 50% 50% 
 		background-size: 20px
 		li
 			float: left
@@ -30,17 +31,17 @@ $menu-font-color: white
 				padding: 0 .5em
 				display: inline-block
 				color: rgba($menu-font-color, 0.7)!important
-				font-size: 1em
+				font-size: 1.1em
 				position: relative
-				font-weight: 500
+				font-weight: 400
 				+box-sizing(border-box)
 				&:hover
 					color: $menu-font-color!important
-			> a span 
-				color: rgba($menu-font-color, 0.7)!important
-			&.current  a, &.current a span
+					text-decoration: none
+
+
+			&.current  a
 				color: $menu-font-color!important
-				//+text-shadow(1px 1px 0 rgba(#000,.2))
 
 
 /* Menu specific entries */ 
@@ -55,19 +56,19 @@ $menu-font-color: white
 			position: absolute
 			text-align: center
 			display: none
-			top: 6px
-			right: -6px
+			top: 4px
+			right: -7px
 			background: $main-color-color
-			color: #fff
 			width: 15px 
 			height: 15px
 			line-height: 15px
 			font-size: 10px
-			padding: 3px
+			padding: 1px
 			font-weight: 900
 			+border-radius(50%)
+			letter-spacing: -0.01em
 			+box-sizing(content-box)
-			+text-shadow(1px 1px 0 rgba(#000, .3))
+			color: white
 			&.show 
 				display: block
 
@@ -82,13 +83,12 @@ $menu-font-color: white
 		+ a 
 			color: $main-color-dark 
 	&.userMenu-search
-		margin: 3px
-
 		> input 
-			border: 1px solid $main-color-light
-			line-height: 12px 
+			border: 1px solid #dedede
+			line-height: $menu-height/2
 			font-size: 12px
-			padding: 7px
+			padding: 0 7px
+			background: white
 			&:focus 
 				border-color: $main-color-dark
 	&.userMenu-config > a
diff --git a/sass/layout/_modal.sass b/sass/layout/_modal.sass
index bd5bb74..0f2844f 100644
--- a/sass/layout/_modal.sass
+++ b/sass/layout/_modal.sass
@@ -1,17 +1,20 @@
-
-
 /*********** POPUP MODAL **************/
 
-
 // vars modal
 
 $header-modal-height : $menu-height
 
 
+// style
+
+.modal-blackout
+	display: none
+
+
 .modal-wrapper
 	background: $bloc-background-color
-	z-index: 3000
-	width: 30%
+	z-index: 4
+	width: 34%
 	position: fixed
 	+box-sizing(border-box)
 	@extend .box-shadow
@@ -19,37 +22,116 @@ $header-modal-height : $menu-height
 	right: 0
 	bottom: 0
 	overflow: hidden
-	+box-shadow(0 8px 13px rgba(#111, 0.2))
-	.postboard
-		border: none
-		padding: 0
+	+box-shadow(-8px 0 13px rgba(#111, 0.2))
 
-	.post-area-new
-		padding: 10px
+	// NEW USER MODAL //
 
-.modal-blackout
-	background: rgba(0, 0, 0, 0)
-	z-index: -1
-	position: fixed
-	left: 0
-	top: 0
-	width: 0
-	height: 0
+	&.new-user
 
-.modal-content
-	@extend .clear-fix
-	overflow: hidden
-	overflow-y: auto
-	.postboard-news
-		position: fixed
-		display: block
-		right: 2px
-		top: $header-modal-height +2
-		z-index: 2000
-		@extend .color-1
-	h2 span 
-		display: none
-	background:  $bloc-background-color
+		.modal-content
+			padding: 25px
+		.modal-close
+			display: none
+		.text
+			margin: 0 0 15px 0
+		.emphasis
+			text-align: center
+		.secret-key
+			display: block
+			margin-top: 8px
+			color: rgba(0.5, 0, 0, 1)
+			font-weight: bold
+			font-size: 110%
+
+
+	// FOLOWING MODAL //
+
+	&.following-modal
+
+		h2 
+			display: none
+		.mini-following-info
+			border-bottom: 1px solid $main-background-color
+			line-height: $mini-usr-img
+
+		a 
+			display: block 
+			padding: 10px
+			width: 100%
+
+			@extend .clear-fix
+			color: $defaut-font-color
+			background: $bloc-light-color
+
+			&:hover 
+				background: white
+				text-decoration: none 
+				font-weight: 500
+		.mini-profile-photo
+			width: $mini-usr-img
+			min-height: $mini-usr-img
+			overflow-x: hidden
+			line-height: 0
+			margin: 0 $space 0 0
+			float: left
+		.mini-following-name 
+			&:after 
+				line-height: 20px
+		.mini-screen-name 
+			display: none
+	
+
+
+
+	&.who-to-follow-modal
+		a 
+			color: $main-color-dark
+			&.twister-user-name 
+				&:hover 
+					text-decoration: none
+		.twister-user-info
+			text-align: left
+			font-size: .8rem
+			line-height: 1rem
+			width: 80%
+			padding-left: $mini-usr-img + 20
+		button 
+			position: absolute 
+			right: 10px
+			top: 10px
+			@extend .small	
+		.bio
+			color: rgba(0, 0, 0, 0.6)
+			font-style: italic
+			padding: .25rem 0
+
+
+	.modal-content
+		width: 100%
+		@extend .clear-fix
+		overflow: hidden
+		overflow-y: auto
+
+		.postboard
+			padding: 0
+			clear: none!important
+			position: relative
+			width: 100%
+			margin: auto
+
+			h2 
+				display: block
+				span 
+					display: none 
+
+
+		.postboard-news
+			position: fixed
+			display: block
+			right: 2px
+			top: $header-modal-height +2
+			z-index: 2000
+			@extend .color-1
 
 
 
@@ -57,7 +139,7 @@ $header-modal-height : $menu-height
 
 .modal-header
 	position: relative
-	background: darken(#64676C,12%)
+	background: darken($main-color-dark,.3)
 	height: $header-modal-height 
 	+box-sizing(border-box)
 	@extend .clear-fix
@@ -99,190 +181,26 @@ $header-modal-height : $menu-height
 
 
 
-/* MODAL */
-.modal-content
-	width: 100%
-	.postboard
-		padding: 0
-		clear: none!important
-		position: relative
-		width: 100%
-		margin: auto
-		background: $bloc-background-color
-
-		h2 
-			display: block
-
-
-
-
-
-/*********** POPUP PROMPT *************/
+/* Composants */
 
-.prompt-wrapper
+.twister-user
+	position: relative
+	box-sizing: border-box
 	background: $bloc-light-color
-	z-index: 5
-	position: fixed
-	top: 50%
-	left: 50%
-	width: 600px
-	margin-left: -300px
-	+box-shadow(0 8px 33px rgba(#000, .3))
-	.modal-buttons
-		padding: 10px
-		text-align: right
-	.modal-content
-		background: $bloc-light-color
-		padding: 10px 10px 30px 10px
-		text-align: center
-
-
-/************ FOLLOWING-CONFIG MODAL **********/
-
-.prompt-wrapper.following-config-modal
-	margin-top: -100px
-
-	.modal-buttons
-		display: none
-	h2
-		text-transform: none
-		display: inline-block!important
-		font-size: 1rem 
-		font-weight: 400
-		padding: $space
-		span
-			display: inline-block!important
-			b
-				font-weight: 400
-
+	@extend .clear-fix
+	border-top: 1px solid $main-background-color
+	width: 100%
+	min-height: auto
+	padding: 7px 
+	clear: left
 
 
-/************ RETWIST POSTS MODAL **********/
+/*********** POPUP PROMPT *************/
 
-.prompt-wrapper.reTwist
-	&.prompt-wrapper
-		margin-top: -110px
-	.modal-content
-		padding: 20px 15px
-
-	.post-expand, .post-interactions
-		display: none
-	.post-info-time 
-		position: static
-		float: right
-	.post-text 
-		margin-top: 10px
-		margin-bottom: 10px
-
-/********* REPLY POSTS MODAL***************/
-
-.prompt-wrapper.reply
-	&.prompt-wrapper
-		margin-top: -110px
-	.modal-buttons, .post-expand, .post-interactions
-		display: none
-	.post-area
-		padding-bottom: 6px
+@import '_prompt'
 
 /********* DIRECT MESSAGES MODAL ***********/ 
 
 @import '_dm'
 
 
-
-/********* NEW USER MODAL**************/
-
-.modal-wrapper.new-user
-
-	.modal-content
-		padding: 25px
-	.modal-close
-		display: none
-	.text
-		margin: 0 0 15px 0
-	.emphasis
-		text-align: center
-	.secret-key
-		display: block
-		margin-top: 8px
-		color: rgba(0.5, 0, 0, 1)
-		font-weight: bold
-		font-size: 110%
-
-/******** HASHTAG MODAL***********/
-
-.modal-wrapper.hashtag-modal
-
-	.postboard
-		padding: 0
-
-/****** CONVERSATION MODAL***********/
-
-.modal-wrapper.conversation-modal
-
-	.postboard
-		padding: 0
-
-/****** FOLLOWING MODAL*******/
-
-
-.modal-wrapper.following-modal
-	h2 
-		display: none
-.mini-following-info
-	border-bottom: 1px solid $main-background-color
-	line-height: $mini-usr-img
-
-	a 
-		display: block 
-		padding: 10px
-		width: 100%
-		@extend .clear-fix
-		color: $defaut-font-color
-		background: $bloc-light-color
-		&:hover 
-			background: white
-	.mini-profile-photo
-		width: $mini-usr-img
-		line-height: 0
-		margin: 0 $space 0 0
-		float: left
-	.mini-screen-name 
-		display: none
-
- 
-
-
-/******* WHO TO FOLLOW MODAL*******/
-
-.modal-wrapper.who-to-follow-modal
-
-	.open-profile-modal
-		&:hover
-			text-decoration: none
-
-	a.twister-user-name 
-		color: $defaut-font-color
-		span 
-			padding-bottom: .5rem 
-			font-size: 1rem 
-			line-height: 1rem 
-			color: $defaut-font-color
-			font-weight: 500
-			opacity: 1 
-			letter-spacing: 0
-	.twister-user-info
-		text-align: left
-		font-size: .8rem
-		line-height: 1rem
-		width: 80%
-		padding-left: $mini-usr-img + 20
-	button 
-		position: absolute 
-		right: 10px
-		top: 10px
-		@extend .small	
-	.bio
-		color: rgba(0, 0, 0, 0.6)
-		font-style: italic
-		padding-bottom: .5rem
diff --git a/sass/layout/_postboard.sass b/sass/layout/_postboard.sass
index 3c16313..249c13f 100755
--- a/sass/layout/_postboard.sass
+++ b/sass/layout/_postboard.sass
@@ -1,78 +1,126 @@
-/************* POST BOARD *************/
-
+/*************  TOP TEXTAREA *************/
+#postboard-top
+	position: relative 
+	@extend .clear-fix
+	margin-bottom: 10px
+	transition: height .3s linear
+	padding: 10px
+	background: white
+	overflow: hidden
+	background: $bloc-light-color
+	@extend .on
+	+transition-property( top)
+	+transition-duration(.1s)
+	+transition-timing-function(ease-out)	
+	top: 0
+	&.on 
+		+box-shadow(1px 2px 2px rgba(#111, 0.1))
+	z-index: 120
+
+	&.fixed 
+		position: fixed 
+		width: $rightWidth 
+		top: $menu-height
+		@extend .on
+	.profile-photo
+		position: absolute
+		top: 10px
+		left: 10px
+		width: $mini-usr-img
+		img
+			width: 100%
+	.post-area
+		overflow: hidden
+		@extend .clear-fix
+		width: 100%
+		padding-left: 58px
+		padding-right: 0
+		display: inline
+		+box-sizing(border-box)
+		background: none
+		float: right
+		.post-area-new
+			@extend .open
+			+box-shadow(none)
+			textarea
+				margin: 0 0 10px 0
 
-// vars for postboard 
 
+/*************  POSTBOARD *************/
 
 
 .postboard
-	width: 55%
-	margin-left: 15%
-	padding: 7px 20px
-	h2 
-		display: none
-	.postboard-posts
-		position: relative
-		z-index: 1
-		clear: both
-	
-	.postboard-news
+	width: $postboardWidth
+	float: left
+
+	h2, .postboard-news 
 		display: none
 
+.postboard-posts
+	position: relative
+	z-index: 1
+	clear: both
+
+
 	.post
-		background: $bloc-light-color
+		
 		position: relative
 		margin-bottom: 1px
-		@extend .box-shadow
 		+transition-property(margin)
 		+transition-duration(.5s)
-		+transition-timing-function(ease-out)	
-		.post, .original.post, .post.open
-			position: relative
-
-
-.module.open
-	.post
-		color: darken($defaut-font-color, 15%)
-
-.post:hover
-	color: darken($defaut-font-color, 15%)
-
-.post-data
-	padding: $space
-
-
-.post.open
-	.original, .related
-		margin-bottom: 1px
-
-
-.postboard-posts > .post
-	+border-radius(2px)
-	&.open
-		margin-top: $space
-		margin-bottom: $space
-		+border-radius(2px)
-
-	&:after
-		content: ""
-		position: absolute
-		right: 0
-		top: 0
-		width: 0
-		height: 100%
-		transition: all .2s linear
-	&.open:after
-		width: 5px
+		+transition-timing-function(ease-out)
+		color: lighten($defaut-font-color, 10%)
+		cursor: pointer
+		&:hover 
+			color: #000
+
+		.show-more
+			display: inline-block
+			float: right
+			font-size: 12px
+			color: lighten($dark-grey,30%)
+			@extend .extend-icon
+			@extend .icon-chat
+			&:hover
+				color: lighten($dark-grey,5%)
+		.post-expand
+			color: lighten($dark-grey,30%)
+			cursor: pointer
+			font-size: 12px
+			position: absolute
+			left: 10px
+			bottom: 10px
+			&:hover
+				color: lighten($dark-grey,5%)		
+		.post-data
+			padding: 10px
+			background: $bloc-light-color
+
+
+
+
+
+	/*********** EVERYTHING SPECIFIC TO OPEN POSTS  **************/
+
+	> .post
+		+box-shadow(1px 2px 2px rgba(#111, 0.1))
+		&.open
+			margin-top: $space
+			margin-bottom: $space
+			+box-shadow(1px 2px 2px rgba(#111, 0))
+			.post 
+				color: darken($defaut-font-color, 15%)
+				+box-shadow(1px 2px 2px rgba(#111, 0.1))
+				margin-bottom: 1px
+				&:not(.original)
+					.post-expand
+						display: none
+						margin: 0			
+	
 
 
-.post:hover
-	cursor: pointer
 
 
-.open
-	background: none!important
-	
 
 .post-photo
 	margin: 0
@@ -92,11 +140,9 @@
 	display: inline-block
 	float: left
 	margin-left: 10px
-
-
-.post-info-name:hover
-	text-decoration: none
-	color: black
+	&:hover
+		text-decoration: none
+		color: black
 
 .post-info-tag
 	font-size: 12px
@@ -132,24 +178,21 @@
 	span
 		@extend .icon-twistagain
 		@extend .extend-icon
-	&:before
-		display: block
-		float: left
-		background: $main-color-color
-		text-align: center
-		padding: 1px 2px 2px 2px
-		line-height: 9px
-		font-size: 9px
-		+border-radius(3px)
-		color: white
-		margin-right: .4em
+		&:before
+			display: block
+			float: left
+			background: $main-color-color
+			text-align: center
+			padding: 1px 2px 2px 2px
+			line-height: 9px
+			font-size: 9px
+			+border-radius(3px)
+			color: white
+			margin-right: .4em
 
-.mini-screen-name
-	font-size: 13px
-	color: $dark-grey
 
-.post-retransmited-icon
-	display: none
+
+// .post-interactions (reply, retransmit, fav)
 
 .post-interactions
 	margin: 10px 0 3px 0
@@ -161,79 +204,42 @@
 		cursor: pointer
 		font-size: 12px
 		line-height: 12px
-
-.post-expand
-	color: lighten($dark-grey,30%)
-	cursor: pointer
-	font-size: 12px
-	position: absolute
-	left: 10px
-	bottom: 10px
-	&:hover
-		color: lighten($dark-grey,5%)
-
-.post-reply, .post-propagate, .post-favorite
-	@extend .extend-icon
-	padding-left: 10px
-	display: none
-	&:hover
-		color: lighten($dark-grey,5%)
-
-.post-reply
-	@extend .icon-comment
-
-.post-propagate
-	@extend .icon-twistagain
-
-.post-favorite
-	display: none!important
-	@extend .icon-star
-
-.post
-	.show-more
-		display: inline-block
-		float: right
-		font-size: 12px
-		color: lighten($dark-grey,30%)
 		@extend .extend-icon
-		@extend .icon-chat
-		&:hover
-			color: lighten($dark-grey,5%)
-
-
-.expanded-content.show-pic
-	display: block
-
-.expanded-post
-
-	.post-expand, .post-reply, .post-propagate, .post-favorite
-		color: lighten($dark-grey,30%)
+		position: relative
+		margin-left: 7px
+		display: none
 		&:hover
 			color: lighten($dark-grey,5%)
 
-.related .post-expand
-	display: none
-	margin: 0
+		&.post-reply
+			@extend .icon-comment
+		&.post-propagate
+			@extend .icon-twistagain
+		&.post-favorite
+			display: none!important //maybe one day
+			@extend .icon-star
 
-
-.post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover
-	.post-reply, .post-propagate, .post-favorite
-		display: inline-block
+	.post:hover &
+		.post-reply, .post-propagate //, .post-favorite maybe one day
+			display: inline-block
 
 .open .related
-	.post-reply, .post-propagate, .post-favorite
+	.post-reply, 
+	.post-propagate, 
+	.post-favorite
 		display: none!important
 	&:hover
-		.post-reply, .post-propagate/*, .post-favorite*/
+		.post-reply, 
+		.post-propagate/*, .post-favorite*/
 			display: inline-block!important
 
 
-
 .expanded-content
-	display: none
-	padding: 5px 5px 0 5px
+	//display: none
+	padding: 0
 	@extend .clear-fix
-
+	textarea 
+		clear: left
 
 .image-preview
 	max-width: 100%
@@ -252,48 +258,64 @@
 	li
 		display: inline-block
 		&.stat-count
-			font-weight: 700
-			font-size: 11px
+			font-size: 12px
 			float: left
 			line-height: 20px
-			color: llighten($dark-grey,30%)
-			span:last-child
-				padding-right: 5px
+			@extend .extend-icon
+			@extend .icon-twistagain
+			&:before 
+				margin-right: 0
+			span:last-child 
+				display: none
+
 	a
 		position: relative
 		text-decoration: none
 		display: inline-block
 		width: 20px
 		height: 20px
-		margin: 0 1px 0 0
+		margin: 0 2px 0 0
+
 		img
 			width: 20px
 			height: 20px
+			+border-radius(3px)
 
 
-.user-name-tooltip
-	display: none
-	position: absolute
-	background: lighten($main-color-dark,3%)
-	font-size: 12px
-	white-space: nowrap
-	padding: 3px 5px
-	color: #fff
-	top: -42px
-	left: 0px
-	&:after
-		content: ""
+
+
+//what appears on top of .avatar-row img on hover
+
+.avatar-row
+	margin-left: 5px
+	a:hover 
+		.user-name-tooltip 
+			display: block
+
+	.user-name-tooltip
+		display: none
 		position: absolute
-		width: 0
-		left: 4px
-		bottom: -5px
-		border-top: solid 5px lighten($main-color-dark,3%)
-		border-left: solid 5px transparent
-		border-right: solid 5px transparent
-
-.post-stats a:hover .user-name-tooltip
-	display: inline-block
+		background: $main-color-dark
+		font-size: 11px
+		line-height: 11px
+		white-space: nowrap
+		padding:  5px
+		+border-radius(3px)
+		color: #fff
+		top: -32px
+		left: -10px
+		&:after
+			content: ""
+			position: absolute
+			width: 0
+			left: 13px
+			bottom: -5px
+			border-top: solid 5px $main-color-dark
+			border-left: solid 5px transparent
+			border-right: solid 5px transparent
+
+// Posts replies get left border to show threads
 
 .post-replies .sub-replies
-	border-left: solid 18px $main-background-color
+	border-left: solid 18px transparent
 
diff --git a/sass/layout/_profile.sass b/sass/layout/_profile.sass
index 335ceb6..682040a 100644
--- a/sass/layout/_profile.sass
+++ b/sass/layout/_profile.sass
@@ -34,11 +34,7 @@ $modal-postboard-post-height: 100%
 			height: $modal-postboard-post-height
 			overflow: auto
 
-		.postboard-posts .post
-			padding: 0
-			margin-bottom: 1px
-		.post-interactions
-			margin: 2px 10px 3px 60px
+
 		.profile-card
 			margin: 0
 			padding: 0
@@ -109,8 +105,9 @@ $modal-postboard-post-height: 100%
 
 
 .isFollowing:after
-	font-size: 15px
-	position: absolute
+	font-size: 10px
+
+
 
 .follow
 	@extend .color-1
diff --git a/sass/layout/_prompt.sass b/sass/layout/_prompt.sass
new file mode 100644
index 0000000..f193a09
--- /dev/null
+++ b/sass/layout/_prompt.sass
@@ -0,0 +1,73 @@
+/*********** POPUP PROMPT *************/
+
+.prompt-wrapper
+	background: $bloc-light-color
+
+	z-index: 5
+	position: fixed
+	top: 50%
+	left: 50%
+	width: 600px
+	margin-left: -300px
+	+box-shadow(0 8px 33px rgba(#000, .3))
+	.modal-buttons, .following-config-method-buttons
+		padding: 0 20px 20px 0
+		float: right
+	.modal-content
+		padding: 20px
+	.post-data
+		border: 1px solid $bloc-background-color
+		position: relative
+		padding: 10px 
+		background: white
+	.modal-header
+		@extend .modal-header 
+		h3 span 
+			padding-left: 5px 
+			color: white 
+			&:hover 
+				cursor: default
+
+
+ 
+/************ FOLLOWING-CONFIG MODAL **********/
+
+.prompt-wrapper.following-config-modal
+	margin-top: -100px
+	.modal-buttons
+		display: none
+	h2
+		text-transform: none
+		display: inline-block!important
+		font-size: 1rem 
+		font-weight: 400
+		padding: $space
+		span
+			display: inline-block!important
+			b
+				font-weight: 400
+
+
+
+/************ RETWIST POSTS MODAL **********/
+
+.prompt-wrapper.reTwist
+	&.prompt-wrapper
+		margin-top: -110px
+
+	.post-expand, .post-interactions
+		display: none
+	.post-info-time 
+		position: static
+		float: right
+
+
+/********* REPLY POSTS MODAL***************/
+
+.prompt-wrapper.reply
+	&.prompt-wrapper
+		margin-top: -110px
+	.modal-buttons, .post-expand, .post-interactions
+		display: none
+	.post-area
+		padding-bottom: 6px
\ No newline at end of file
diff --git a/sass/layout/_responsive.sass b/sass/layout/_responsive.sass
index 62bc41f..69a1554 100644
--- a/sass/layout/_responsive.sass
+++ b/sass/layout/_responsive.sass
@@ -1,15 +1,23 @@
 
-@media (max-width:1200px)
-
+@media (max-width: $site-width)
 	.right 
 		display: none 
 	.userMenu 
 		ul 
 			padding: 0
-	.postboard 
-		width: 85%
+	.postboard, #postboard-top.onTop
+		position: absolute
+		left: 135px
+		right: 20px
+		width: auto
+
 	.modal-wrapper
 		width: 85%
+		.postboard
+			width: $postboardWidth
+			float: left
+			position: relative 
+			left: 0
 
 @media (max-width: 600px)
 
diff --git a/sass/layout/_wrapper.sass b/sass/layout/_wrapper.sass
new file mode 100644
index 0000000..cd73375
--- /dev/null
+++ b/sass/layout/_wrapper.sass
@@ -0,0 +1,48 @@
+
+
+
+/* Wrapper and blocks */
+.wrapper
+	width: $site-width
+	max-width: 100%
+	margin: auto
+	padding-top: $menu-height + $gut/2
+	position: relative
+	z-index: 1
+	@extend .clear-fix
+.dashboard
+	&.left
+		top: $menu-height 
+		float: left
+		width:  $leftWidth 
+		min-height: 700px
+		> .module
+			width: $miniProfileWidth
+			position: fixed
+			top: $menu-height + $gut/2
+			
+	&.right 
+		float: left
+		top: $menu-height 
+		overflow: hidden
+		width: $rightWidth
+		padding-left: 20px
+		padding-right: 3px
+	> .module
+		width: 100%
+		margin-bottom: 20px
+		background: $bloc-light-color
+		width: 100%
+		
+		+box-shadow(1px 2px 2px rgba(#111, 0.1))
+		@extend .clear-fix
+		h3
+			float: left
+			padding: 10px
+		h4 
+			clear: left
+			border-top: 1px solid $main-background-color
+			padding: 7px 10px
+			font-size: 90% 
+		small
+			display: none
\ No newline at end of file
diff --git a/sass/pages/_following.sass b/sass/pages/_following.sass
index d407076..3adfdba 100644
--- a/sass/pages/_following.sass
+++ b/sass/pages/_following.sass
@@ -1,8 +1,8 @@
 
 .following 
-	width: 40%
-	margin-left: 30%
-	padding: 20px
+	width: 55%
+	margin-left: 15%
+	padding: 7px 20px
 	h2 
 		display: none
 	.following-list li
diff --git a/sass/style.sass b/sass/style.sass
index cbd211e..149628b 100755
--- a/sass/style.sass
+++ b/sass/style.sass
@@ -10,6 +10,7 @@
 
 // layout
 @import 'layout/_menu'
+@import 'layout/_wrapper'
 @import 'layout/_modal'
 @import 'layout/_profile'
 @import 'layout/_postboard'
@@ -38,7 +39,7 @@
 		font-size: .9em
 		transition: color .1s linear
 		&.disabled 
-			background: #F4F3F2 
+			background: $bloc-background-color
 		&.active, &.active span
 			color: $defaut-font-color
 			cursor: default
@@ -52,50 +53,6 @@
 
 
 
-/* Wrapper and blocks */
-.wrapper
-	width: 100%
-	max-width: 100%
-	margin: auto
-	padding-top: $menu-height
-	position: relative
-	z-index: 1
-
-.dashboard
-	&.left
-		position: absolute 
-		top: $menu-height 
-		left: 0
-		width: 15%
-		> .module
-			float: right
-			width: $usr-img * 2
-	&.right 
-		position: fixed 
-		right: 0
-		top: $menu-height 
-		overflow: hidden
-		width: 30%
-
-	> .module
-		max-width: 320px
-		margin-bottom: 20px
-		background: $bloc-light-color
-		width: 100%
-		@extend .box-shadow
-		@extend .clear-fix
-		h3
-			float: left
-			padding: 20px
-		h4 
-			clear: left
-			border-top: 1px solid $main-background-color
-			padding: 10px
-		small
-			display: none
-
-
-
 
 
 /********** CONFIG SUBMENU & SEARCH RESULTS ************/
@@ -159,8 +116,10 @@ ul.userMenu-search-profiles
 	.mini-profile-photo 
 		width: $mini-usr-img
 		height: auto
-		margin: 10px
+		min-height: $mini-usr-img
+		margin: 5px
 		float: left
+		overflow-x: hidden
 	.mini-profile-info
 		width: 100%
 		float: none
@@ -204,8 +163,10 @@ ul.userMenu-search-profiles
 /***************** MINI PROFILE *******************************/
 
 .mini-profile
-	@extend .box-shadow
-	
+
+	a:hover 
+		text-decoration: none 
+
 	a.button
 		background: $main-color-light
 		margin: 1em auto
@@ -227,7 +188,7 @@ ul.userMenu-search-profiles
 	text-align: center
 	@extend .clear-fix
 	border-top: 1px solid $main-background-color
-	background: #F4F3F2 
+	background: $bloc-background-color
 
 	li
 		+box-sizing(border-box)
@@ -261,9 +222,8 @@ ul.userMenu-search-profiles
 
 .messages-qtd
 	position: absolute
-	top: 50%
-	margin-top: -11px
-	right: 11px
+	top: 5px
+	right: 5px
 	background: $main-color-color
 	+text-shadow(1px 1px 0 rgba(#000,.2))
 	color: #fff
@@ -276,6 +236,8 @@ ul.userMenu-search-profiles
 
 .mini-profile-view
 	display: none
+.left .mini-profile-info
+	padding-top: 32px
 
 .mini-profile-name
 	color: $dark-grey
@@ -293,7 +255,7 @@ ul.userMenu-search-profiles
 	width: $usr-img
 	height: auto
 	display: block
-	margin: 32px auto 0 auto
+	margin: auto
 
 
 
@@ -350,14 +312,14 @@ ul.userMenu-search-profiles
 	float: right
 	color: $dark-grey
 
-.mini-follower-link
+.mini-follower-link, .followed-by
 	display: inline-block
 	margin: 1px
 	line-height: 12px
 	&.isFollowing:after
 		display: none
 	&:after
-		content: '·'
+		content: ''
 		font-weight: 900
 		color: $main-color-dark
 		margin-left: 1px
@@ -390,60 +352,19 @@ ul.userMenu-search-profiles
 .mini-profile .post-area
 	display: none
 
-#postboard-top
-	clear: both
-	position: relative 
-	@extend .clear-fix
-	margin-bottom: 10px
-	transition: height .3s linear
-	padding: 10px
-	background: white
-	overflow: hidden
-	background: $bloc-light-color
-	+box-shadow(0 0 13px rgba(#111, 0))
-	+transition-property(box-shadow)
-	+transition-duration(.2s)
-	+transition-timing-function(ease-out)	
-	&.on 
-		+box-shadow(0 8px 13px rgba(#111, 0.2))
-	z-index: 120
-	&.hide
-		display: none!important
-	&.show
-		display: block
 
-	.profile-photo
-		position: absolute
-		top: 10px
-		left: 10px
-		width: $mini-usr-img
-		img
-			width: 100%
-	.post-area
-		overflow: hidden
-		@extend .clear-fix
-		width: 100%
-		padding-left: 58px
-		padding-right: 0
-		display: inline
-		+box-sizing(border-box)
-		background: none
-		float: right
-		.post-area-new
-			@extend .open
-			+box-shadow(none)
-			textarea
-				margin: 0 0 10px 0
 
 
 #post-preview 
-	background: $bloc-background-color 
 	border: 1px solid $main-background-color 
-	padding: 15px
+	border-bottom: 0
+	padding: 5px
 	+transition-property(all)
 	+transition-duration(.1s)
 	width: 100%!important
+	font-size: 90%
 	word-wrap: break-word
+	clear: left
 
 
 
@@ -494,9 +415,6 @@ textarea.splited-post
 				display: none 
 			&:hover button 
 				display: block
-		.bio 
-			text-align: left!important
-
 
 	small
 		display: none
@@ -507,21 +425,6 @@ textarea.splited-post
 		@extend .clear-fix
 		clear: both
 
-.twister-user
-	position: relative
-	box-sizing: border-box
-	background: $bloc-light-color
-	@extend .clear-fix
-	border-top: 1px solid $main-background-color
-	width: 100%
-	min-height: auto
-	padding: 10px 0
-	clear: left
-	+transition-property(background)
-	+transition-duration(.1s)
-	@extend .clear-fix
-	&:hover 
-		background: white
 
 
 
@@ -531,29 +434,29 @@ img.twister-user-photo
 	float: left
 	width: $mini-usr-img
 	height: auto
-	margin: 0 10px
-	background: $main-background-color
+	margin: 0 10px 0 0
 
 
 
 
 .followers
 	font-size: 12px
-	color: $dark-grey
 	label, a
 		display: inline-block
 
 .followed-by
-	color: $main-color-light
 	font-size: 12px
 	cursor: pointer
 	display: block
 
 .twister-user-name, .twister-by-user-name
-	font-weight: bold
+	font-weight: 500
 	font-size: 14px
-	color: $main-color-light
 	text-decoration: none
+	color: $main-color-dark
+.twister-user-name
+	font-weight: 700
+
 
 .twister-user-tag
 	font-size: 12px
@@ -666,9 +569,6 @@ img.twister-user-photo
 
 /******* LOADER *************/
 
-
-
-
 .postboard-loading, .loading-roller
 	font-size: 100px
 	width: .4em