add theme nin original files

theme_nin_original/css/fonts/fontello/fontello.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2014 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="search" unicode="&#xe800;" d="m0 386q0 80 31 152t84 126 125 84 153 31 152-31 126-84 84-126 31-152q0-123-69-223l191-191q21-21 21-51 0-29-22-50t-50-21q-30 0-50 21l-191 191q-100-69-223-69-80 0-153 31t-125 83-84 126-31 153z m143 0q0-103 73-177t177-73 176 73 74 177-74 176-176 74-177-74-73-176z" horiz-adv-x="928.6" />
+<glyph glyph-name="mail" unicode="&#xe801;" d="m467 366l-449 210 0 109 893 0 0-109z m0-123l444 210 0-437-893 0 0 438z" horiz-adv-x="928" />
+<glyph glyph-name="heart" unicode="&#xe802;" d="m0 517q0 123 71 192t196 70q34 0 70-12t67-33 54-38 42-38q20 20 42 38t54 38 67 33 70 12q125 0 196-70t71-192q0-123-128-251l-347-335q-10-10-25-10t-25 10l-348 336q-5 5-15 15t-31 36-38 55-30 67-13 77z" horiz-adv-x="1000" />
+<glyph glyph-name="star" unicode="&#xe803;" d="m0 489q0 21 31 26l280 40 126 254q11 23 27 23t28-23l125-254 280-40q32-5 32-26 0-12-15-27l-203-197 48-279q1-4 1-12 0-11-6-19t-17-9q-10 0-22 7l-251 132-250-132q-13-7-23-7-11 0-17 9t-6 19q0 4 1 12l48 279-203 197q-14 15-14 27z" horiz-adv-x="928.6" />
+<glyph glyph-name="user" unicode="&#xe804;" d="m0 66q0 30 2 58t8 61 15 60 24 55 34 45 48 30 62 11q5 0 24-12t41-27 60-27 75-12 74 12 61 27 41 27 24 12q34 0 62-11t48-30 34-45 24-55 15-60 8-61 2-58q0-67-41-106t-108-39h-488q-67 0-108 39t-41 106z m179 498q0 89 62 152t152 63 151-63 63-152-63-151-151-63-152 63-62 151z" horiz-adv-x="785.7" />
+<glyph glyph-name="camera" unicode="&#xe805;" d="m0 64v500q0 59 42 101t101 42h125l28 76q11 27 39 47t58 20h286q29 0 57-20t39-47l29-76h125q59 0 101-42t41-101v-500q0-59-41-101t-101-42h-786q-59 0-101 42t-42 101z m286 250q0-103 73-176t177-74 176 74 74 176-74 177-176 73-177-73-73-177z m89 0q0 67 47 114t114 47 113-47 47-114-47-113-113-47-114 47-47 113z" horiz-adv-x="1071.4" />
+<glyph glyph-name="ok" unicode="&#xe806;" d="m68 332q0 22 15 38l76 76q16 16 38 16t38-16l164-165 366 367q16 16 38 16t38-16l76-76q15-16 15-38t-15-38l-404-404-76-76q-16-15-38-15t-38 15l-76 76-202 202q-15 16-15 38z" horiz-adv-x="1000" />
+<glyph glyph-name="cancel" unicode="&#xe807;" d="m61 112q0 23 16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38t-15-38l-76-76q-16-15-38-15t-38 15l-164 164-164-164q-16-15-38-15t-38 15l-76 76q-16 16-16 38z" horiz-adv-x="785.7" />
+<glyph glyph-name="plus" unicode="&#xe808;" d="m0 332v107q0 23 16 38t38 16h232v232q0 22 15 38t38 16h107q23 0 38-16t16-38v-232h232q22 0 38-16t16-38v-107q0-22-16-38t-38-16h-232v-232q0-22-16-38t-38-15h-107q-22 0-38 15t-15 38v232h-232q-23 0-38 16t-16 38z" horiz-adv-x="785.7" />
+<glyph glyph-name="minus" unicode="&#xe809;" d="m0 332v107q0 23 16 38t38 16h678q22 0 38-16t16-38v-107q0-22-16-38t-38-15h-678q-23 0-38 15t-16 38z" horiz-adv-x="785.7" />
+<glyph glyph-name="down" unicode="&#xe80a;" d="m50 425q0 14 11 25l92 92q11 11 26 11t25-11l296-296 296 296q11 11 25 11t26-11l92-92q11-11 11-25t-11-26l-414-413q-10-11-25-11t-25 11l-414 413q-11 11-11 26z" horiz-adv-x="1000" />
+<glyph glyph-name="lock" unicode="&#xe80b;" d="m0 46v322q0 22 16 38t38 15h17v108q0 102 74 176t176 74 177-74 73-176v-108h18q23 0 38-15t16-38v-322q0-22-16-37t-38-16h-535q-23 0-38 16t-16 37z m179 375h285v108q0 59-42 101t-101 41-101-41-41-101v-108z" horiz-adv-x="642.9" />
+<glyph glyph-name="quote" unicode="&#xe80c;" d="m0 100v393q0 58 23 111t61 91 91 61 111 23h35q15 0 26-11t10-25v-72q0-14-10-25t-26-10h-35q-59 0-101-42t-42-101v-18q0-22 16-38t37-16h125q45 0 76-31t32-76v-214q0-45-32-76t-76-31h-214q-44 0-76 31t-31 76z m500 0v393q0 58 23 111t61 91 91 61 111 23h35q15 0 26-11t10-25v-72q0-14-10-25t-26-10h-35q-59 0-101-42t-42-101v-18q0-22 15-38t38-16h125q45 0 76-31t32-76v-214q0-45-32-76t-76-31h-214q-44 0-76 31t-31 76z" horiz-adv-x="928.6" />
+<glyph glyph-name="comment" unicode="&#xe80d;" d="m0 350q0 73 40 139t106 114 160 76 194 28q136 0 251-48t182-130 67-179-67-179-182-130-251-48q-39 0-81 4-110-97-257-135-27-7-63-12-10-1-17 5t-10 16v1q-2 2 0 7t1 5 2 5l4 5t4 5 4 5q4 5 17 19t20 22 17 22 18 28 15 33 15 42q-88 50-138 123t-51 157z" horiz-adv-x="1000" />
+<glyph glyph-name="chat" unicode="&#xe80e;" d="m0 421q0 78 53 144t143 104 197 38 197-38 143-104 53-144-53-143-143-104-197-38q-48 0-98 9-70-50-155-72-21-5-48-9h-2q-6 0-12 5t-6 11q-1 2-1 4t1 4 1 3l1 3t2 3 2 3 3 2 2 3q3 3 13 14t15 16 12 17 14 21 11 25q-69 40-108 98t-40 125z m344-354q32-3 49-3 90 0 172 25t148 72q69 52 107 119t37 141q0 43-13 85 72-39 114-99t42-128q0-67-40-126t-108-98q5-14 11-25t14-21 13-16 14-17 13-14q0 0 2-2t3-3 2-3 2-3l1-3t1-3 1-4-1-3q-2-8-7-13t-13-4q-27 4-48 9-85 23-155 72-50-9-98-9-151 0-263 74z" horiz-adv-x="1000" />
+<glyph glyph-name="left" unicode="&#xe80f;" d="m86 386q0 14 11 25l414 414q10 10 25 10t25-10l92-93q11-10 11-25t-11-25l-296-296 296-297q11-10 11-25t-11-25l-92-93q-11-10-25-10t-25 10l-414 415q-11 10-11 25z" horiz-adv-x="714.3" />
+<glyph glyph-name="right" unicode="&#xe810;" d="m50 64q0 15 11 25l296 297-296 296q-11 11-11 25t11 25l92 93q11 10 26 10t25-10l414-414q10-11 10-25t-10-25l-414-414q-11-11-25-11t-26 11l-92 92q-11 11-11 25z" horiz-adv-x="714.3" />
+<glyph glyph-name="up" unicode="&#xe811;" d="m50 133q0 14 11 25l414 414q11 10 25 10t25-10l414-414q11-11 11-25t-11-26l-92-92q-11-10-26-10t-25 10l-296 297-296-297q-11-10-25-10t-26 10l-92 92q-11 11-11 26z" horiz-adv-x="1000" />
+<glyph glyph-name="cog" unicode="&#xe812;" d="m0 299v103q0 6 4 11t9 6l86 14q7 19 18 42-19 27-50 64-4 6-4 11 0 7 4 12 12 16 46 49t44 33q6 0 12-4l64-50q19 10 43 18 6 60 13 86 3 13 16 13h104q6 0 11-4t6-10l13-85q19-6 41-17l66 49q5 4 11 4 7 0 12-4 81-75 81-90 0-5-4-10-7-9-24-30t-25-34q13-27 19-46l85-12q5-2 9-6t4-11v-103q0-6-4-11t-9-6l-86-14q-6-19-18-42 19-27 50-64 4-6 4-11 0-7-4-11-13-17-46-50t-44-33q-6 0-11 4l-64 50q-21-11-43-17-6-60-13-87-4-13-17-13h-104q-6 0-11 4t-5 10l-13 85q-19 6-42 18l-66-50q-4-4-11-4-6 0-12 4-80 75-80 90 0 5 4 10 5 8 23 30t26 34q-13 24-20 46l-85 13q-5 1-9 5t-4 11z m214 51q0-59 42-101t101-42 101 42 42 101-42 101-101 42-101-42-42-101z m429-325v78q0 9 83 18 7 16 17 29-29 63-29 77 0 2 3 4 2 1 19 11t33 19 17 9q4 0 25-26t29-38q12 1 17 1t17-1q28 40 51 63l4 1q2 0 69-39 2-2 2-4 0-14-28-77 9-13 16-29 83-9 83-18v-78q0-9-83-17-6-15-16-29 28-63 28-77 0-2-2-4-68-40-69-40-5 0-26 27t-29 37q-11-1-17-1t-17 1q-7-11-29-37t-25-27q-1 0-69 40-3 2-3 4 0 14 29 77-10 14-17 29-83 8-83 17z m0 572v78q0 9 83 17 7 16 17 29-29 63-29 77 0 2 3 4 2 1 19 11t33 19 17 9q4 0 25-26t29-38q12 2 17 2t17-2q28 40 51 63l4 1q2 0 69-39 2-2 2-4 0-14-28-77 9-13 16-29 83-8 83-17v-78q0-9-83-18-6-15-16-29 28-63 28-77 0-2-2-4-68-39-69-39-5 0-26 26t-29 38q-11-1-17-1t-17 1q-7-12-29-38t-25-26q-1 0-69 39-3 2-3 4 0 14 29 77-10 14-17 29-83 9-83 18z m143-533q0-29 21-50t50-21 51 21 21 50q0 29-22 51t-50 21-50-21-21-51z m0 572q0-30 21-51t50-21 51 21 21 51q0 29-22 50t-50 21-50-21-21-50z" horiz-adv-x="1071.4" />
+<glyph glyph-name="doc" unicode="&#xe813;" d="m0-96v892q0 23 16 38t38 16h446v-304q0-22 16-38t38-15h303v-589q0-23-15-38t-38-16h-750q-23 0-38 16t-16 38z m571 660v264q13-8 21-16l227-228q8-7 16-20h-264z" horiz-adv-x="857.1" />
+<glyph glyph-name="arrows" unicode="&#xe814;" d="m0-7v250q0 14 11 25t25 11h250q14 0 25-11t10-25-10-25l-77-77q40-37 90-57t105-20q74 0 139 37t104 99q6 10 29 66 5 13 17 13h107q8 0 13-6t5-12q0-3 0-4-36-150-150-243t-267-93q-81 0-157 31t-136 88l-72-72q-11-11-25-11t-25 11-11 25z m10 446v4q36 150 151 243t268 93q81 0 158-31t137-88l72 72q11 11 25 11t26-11 10-25v-250q0-14-10-25t-26-11h-250q-14 0-25 11t-10 25 10 25l77 77q-82 77-194 77-75 0-140-37t-104-99q-6-10-29-66-5-13-17-13h-111q-7 0-13 6t-5 12z" horiz-adv-x="857.1" />
+<glyph glyph-name="twistagain" unicode="&#xe815;" d="m0 386q0 13 8 23l179 214q11 12 27 12t28-12l178-214q9-10 9-23 0-15-11-25t-25-11h-107v-214h321q9 0 14-6l89-108q4-6 4-11 0-8-5-13t-13-5h-535q-5 0-8 1t-5 4-3 4-2 7 0 6v335h-107q-15 0-25 11t-11 25z m357 232q0 7 5 12t13 6h536q4 0 7-1t5-4 3-5 2-6 1-7v-334h107q14 0 25-11t10-25q0-14-8-23l-179-214q-11-13-27-13t-27 13l-179 214q-8 9-8 23 0 14 10 25t26 11h107v214h-322q-9 0-14 7l-89 107q-4 5-4 11z" horiz-adv-x="1071.4" />
+<glyph glyph-name="bell" unicode="&#xe816;" d="m632 426q16-34 40-52t45-22 44-23 35-55q22-62-74-161t-252-157q-164-58-297-45t-155 75q-20 54 12 111t18 111q-56 192-47 300t113 192q26 22 29 51t29 39q24 8 46-12t56-18q132 2 198-66t160-268z m-186-404q88 32 159 85t100 91 25 50q-8 22-49 33t-124 1-187-48q-102-38-173-87t-94-84-17-53q4-12 50-22t134-4 176 38z m-62 174q8 2 21 7t17 7l2-2q14-40-17-83t-89-63q-96-36-152 14 78 68 218 120z" horiz-adv-x="800" />
+</font>
+</defs>
+</svg>

theme_nin_original/js/theme_option.js

@@ -0,0 +1,165 @@
+$(window).on('resize', function () {
+    testRightSide();
+    reAppendModules();
+});
+
+$(window).on('load', function () {
+    testRightSide();
+});
+
+$(function () {
+    testRightSide();
+    reOrganizeTemplates();
+
+    // indirect eval call in hope to execute code globally
+    (1, eval)(postToElem.toString().replace(/postContext.append\(twister\.tmpl\.postRtBy/,
+        'postContext.prependTo(postContext.parent()).append(twister.tmpl.postRtBy'));
+
+    (1, eval)(openModal.toString().replace(/window_scrollY = window\.pageYOffset;/, '')
+        .replace(/\$\('body'\)\.css\('overflow', 'hidden'\);/, ''));
+
+    $('.userMenu-home.current a').on('click', function () {
+        $('html, body').animate({scrollTop:0},300);
+        return false
+    });
+
+    // modify the way promoted posts are shown
+    $('.promoted-posts-only').on('click', function () {
+        //active promoted posts tab
+        $(this).children('.promoted-posts').addClass(promotedPostsOnly ? "active" : "disabled");
+        $(this).children('.normal-posts').addClass(promotedPostsOnly ? "disabled" : "active");
+        $('#postboard-top').removeClass(promotedPostsOnly ? "show" : "hide");
+        //active normal posts
+        $(this).children('.promoted-posts').removeClass(promotedPostsOnly ? "disabled" : "active");
+        $(this).children('.normal-posts').removeClass(promotedPostsOnly ? "active" : "disabled");
+        $('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show");
+    });
+
+    if (/\/options.html$/i.test(document.location))
+        localizeLabels();
+
+    $(window).on('scroll', function () {
+        window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals
+    });
+
+    // Collapse all .post.open
+    var allPostButton = $('<li></li>').addClass('userMenu-collapsePosts').append('<a href="#">Collapse All</a>');
+    $('.mini-profile-indicators').append(allPostButton);
+    $(allPostButton).children('a').on('click', function(e) {
+        var allPost =  $('#posts .post.open');
+        allPost.each(function(){
+        if (e.button === 0 && window.getSelection() == 0)
+            postExpandFunction(e, $(this));
+        });
+        return false
+    });
+});
+
+function testRightSide() { // if rightside is empty, don't show it and engarge postboard
+    var container = $('.dashboard.right');
+
+    if (container.children('.module:not(:empty)').length) {
+        container.show();
+        $('.wrapper .postboard').removeClass('large');
+    } else {
+        container.hide();
+        $('.wrapper .postboard').addClass('large');
+    }
+}
+
+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', '');
+    $('.mini-profile-actions span').html('');
+
+    //group chat
+    $('.mini-profile-indicators li.userMenu-groupmessages a span:last-child ').html('Group Msg');
+
+    $('button.invite').html('invite');
+    $('button.leave').html('leave');
+    $('.secret-key').attr('title', 'copy secret key');
+
+    //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'));
+
+    twister.tmpl.accountMC.find('.alias')
+        .insertBefore(twister.tmpl.accountMC.find('.avatar'));
+
+    //loader
+    newLoader()
+
+    // new post button
+    $('<li></li>')
+        .addClass('userMenu-newPost')
+        .prependTo('.mini-profile-indicators');
+    $('<a href="#">New post</a>')
+        .addClass('ion')
+        .addClass('ion-plus')
+        .appendTo('.userMenu-newPost')
+        .on('click', function () {
+            if(!$('.mini-profile .post-area').hasClass('display')) {$('.mini-profile .post-area').addClass('display');}
+            else  {$('.mini-profile .post-area').removeClass('display');}
+            return false;
+    });
+
+    // new post prompt
+    $('<div><h3>New post</h3><span class="modal-close prompt-close"></span></div>')
+        .addClass('modal-header')
+        .prependTo('.mini-profile .post-area');
+
+    $('.mini-profile .post-area .post-submit').on('click', function () {
+        $('.mini-profile .post-area').removeClass('display');
+    });
+    $('.mini-profile .post-area .modal-close').on('click', function () {
+        $('.mini-profile .post-area').removeClass('display');
+    });
+
+    // button "follow" in search
+    // not very nice but works
+    $('li:not(.twister-user) button.follow').html('+').attr('title',polyglot.t('Follow'));
+    $('li:not(.twister-user) button.follow')
+        .on("eventToggleFollow", function() {
+            $(this).text('+').attr('title', polyglot.t('Follow'));
+        })
+        .on("eventToggleUnfollow", function() {
+            $(this).text('-').attr('title', polyglot.t('Unfollow'));
+        });
+}
+
+// Close new post prompt with esc key
+$(document).on('keyup', function (e) {
+    if (e.keyCode == 27) {
+        $('.mini-profile .post-area').removeClass('display');
+        closeModal();
+    }
+});
+
+function reAppendModules() { // avoid w1200 things
+    $('.dashboard.right')
+        .append($('.module.toptrends'))
+        .append($('.module.who-to-follow'))
+        .append($('.module.twistday-reminder'))
+        .append($('.module.new-users'))
+    ;
+}
+
+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.tabs').each(function (i, elem) {
+        var elem = $(elem);
+        elem.text(polyglot.t(elem.text()));
+    });
+}

theme_nin_original/sass/base/_commons.sass

@@ -0,0 +1,107 @@
+*
+	outline: none!important
+	+box-sizing(border-box)
+	list-style: none
+
+
+
+html, body
+	min-height: 100%
+	color: $defaut-font-color
+	position: absolute
+	width: 100%
+
+html
+	font-size: $global-font-size
+	background-color: #ddd
+	background-image: image-url("bg.png", false, false)
+	background-attachment: fixed
+
+body
+	font-size: $main-font-size
+	line-height : $main-line-height
+	font-family : $main-font-family, "Symbola"
+	font-weight: 400
+	overflow-y: scroll!important
+
+
+
+a
+	text-decoration: none
+	color: $main-color-color
+	&:hover, &:active
+		color: $main-color-color
+		text-decoration: underline
+	i
+		text-decoration: underline
+		font-style: normal
+
+i, em
+	font-style: italic
+	font-family: $serif-font-family
+	letter-spacing: 0
+
+strong, b
+	font-weight: 600
+
+img
+	background: $bloc-background-color
+
+h1
+	font-size: 1.1em
+	font-weight: 700
+	line-height: 1.1em
+
+h2
+	font-size: 1.1em
+	text-transform: uppercase
+	letter-spacing: 0.07em
+	font-weight: 400
+	line-height: 1.1em
+
+h3
+	font-size: 1.1em
+	font-weight: 400
+	line-height: 1.1em
+
+br
+	display: block
+
+textarea, input
+	background: white
+	display: block
+	border: none
+	font-family: "Monospace", $main-font-family
+	font-size: .8rem
+
+
+samp
+	background: $dark-grey
+	color: white
+	font-size: 11px
+	line-height: 11px
+	display: inline-block
+	padding:  5px
+	+border-radius(1px)
+	font-weight: 500
+	font-family: monospace
+	word-wrap: break-word
+
+/* isFollowing */
+
+
+.isFollowing
+	@extend .ion-checkmark
+	@extend .ion-after
+	&:after
+		color: $main-color-color
+		padding-left: 3px
+		display: inline
+		font-size: 11px
+		vertical-align: top
+		line-height: 10px
+h3
+	.isFollowing:before
+		display: none!important
+	.isFollowing:after
+		display: none!important

theme_nin_original/sass/base/_fonts.sass

@@ -0,0 +1,159 @@
+@font-face
+	font-family: "Roboto"
+	src: url("fonts/roboto/Roboto-Regular.ttf")
+	font-weight: 400
+
+
+@font-face
+	font-family: "Roboto"
+	src: url("fonts/roboto/Roboto-Medium.ttf")
+	font-weight: 500
+
+
+@font-face
+	font-family: "Roboto"
+	src: url("fonts/roboto/Roboto-Bold.ttf")
+	font-weight: 700
+
+@font-face
+	font-family: "Roboto"
+	src: url("fonts/roboto/Roboto-Black.ttf")
+	font-weight: 900
+
+
+@font-face
+	font-family: "Roboto"
+	src: url("fonts/roboto/Roboto-Italic.ttf")
+	font-weight: 400
+	font-style: italic
+
+@font-face
+	font-family: "Droid"
+	src: url("fonts/DroidSerif-Italic.ttf")
+	font-weight: 400
+	font-style: italic
+
+
+@font-face
+	font-family: "Roboto"
+	src: url("fonts/roboto/Roboto-MediumItalic.ttf")
+	font-weight: 500
+	font-style: italic
+
+
+@font-face
+	font-family: "Roboto"
+	src: url("fonts/roboto/Roboto-BoldItalic.ttf")
+	font-weight: 700
+	font-style: italic
+
+
+
+/* S Y M B O L A */
+
+@font-face
+	font-family: "Symbola"
+	src: url("Symbola.ttf")
+	font-weight: 400
+	font-style: normal
+
+
+
+/* ICONS */
+
+@font-face
+	font-family: "Ionicons"
+	src: url("fonts/ionicons/ionicons.eot?v=2.0.0")
+	src: url("fonts/ionicons/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"), url("fonts/ionicons/ionicons.ttf?v=2.0.0") format("truetype"), url("fonts/ionicons/ionicons.woff?v=2.0.0") format("woff"), url("fonts/ionicons/ionicons.svg?v=2.0.0#Ionicons") format("svg")
+	font-weight: normal
+	font-style: normal
+
+
+
+.ion:before, .ion-after:after
+	display: inline-block
+	font-family: "Ionicons"
+	speak: none
+	font-style: inherit
+	font-weight: inherit
+	font-variant: inherit
+	text-transform: normal
+	text-rendering: auto
+	line-height: inherit
+	-webkit-font-smoothing: antialiased
+	-moz-osx-font-smoothing: grayscale
+.ion:before
+	padding: 0 3px
+
+.ion:after, .ion-after:before
+	display: none
+
+.ion-alert:before
+	content: "\f101"
+
+.ion-checkmark:after, .ion-checkmark:before
+	content: "\f122"
+
+.ion-gear:before
+	content: "\f13d"
+
+.ion-shuffle:before
+	content: "\f3a8"
+
+.ion-mention:before
+	content: "\f39b"
+
+.ion-chatbox:before
+	content: "\f11c"
+
+.ion-profile:before
+	content: "\f2d8"
+
+.ion-plus:before
+	content: "\f11d"
+
+.ion-reply:before
+	content: "\f2d4"
+
+.ion-close:before
+	content: "\f12a"
+
+.ion-minus:before
+	content: "\f123"
+
+
+.ion-back:before
+	content: "\f124"
+
+.ion-post-promo:before
+	content: "\f470"
+
+.ion-post-normal:before
+	content: "\f1fd"
+
+.ion-home:before
+	content: "\f144"
+
+.ion-network:before
+	content: "\f2b5"
+
+.ion-eye:before
+	content: "\f133"
+
+.ion-tox:before
+	content: "\f200"
+
+.ion-copy:before
+	content: "\f381"
+
+.ion-search:after
+	content: "\f21f"
+
+.ion-right:after
+	content: "\f125"
+
+.ion-android-contacts:before
+	content: "\f2d9"
+
+.ion-arrow-shrink:before
+	content: "\f267"

theme_nin_original/sass/base/_utils.sass

@@ -0,0 +1,79 @@
+
+
+
+.box-shadow
+	+box-shadow(0 8px 13px rgba(#111, 0))
+
+
+.clear-fix
+	&:after // clearfix
+		content: ""
+		display: table
+		clear: both
+
+
+
+/************** BUTTONS ************/
+
+@mixin button-basic
+	padding: .6rem 1rem
+	display: inline-block
+	line-height: .75rem
+	letter-spacing: 0.07rem
+	font-size: .75rem
+	position: relative
+	font-weight: 300
+	text-transform: uppercase
+	+transition-property(background, border-color)
+	+transition-duration(.1s)
+	color: $dark-grey
+	background: #F8F8F8
+	border: 1px solid darken( #F8F8F8 , 5%)
+	font-family: $symbol-font-family, $main-font-family
+	cursor: pointer
+	&:hover
+		border-color: darken( #F8F8F8 , 15%)
+		text-decoration: none
+		color: $dark-grey
+	&.disabled
+		opacity: .5
+		color: #999
+		background-color: $bloc-background-color
+		&:hover
+			color: #666
+			+box-shadow(1px 1px 0 rgba(#444, .3))
+
+@mixin button-color-basic($type: 1)
+	$color: $main-color-color
+	$hover-border-color-darken-amount: 22%
+	@if $type == 2
+		$color: #64676C
+		$hover-border-color-darken-amount: 15%
+	background: $color
+	border-color: darken($color, 5%)
+	color: white
+	font-weight: 500
+	&:hover
+		border-color: darken($color, $hover-border-color-darken-amount)
+
+@mixin button-small-basic
+	padding:  .5rem
+	font-weight: 700
+	font-size: .7rem
+	line-height: .7rem
+
+button, a.button
+	@include button-basic
+	&.color-1
+		@include button-color-basic
+	&.color-2
+		@include button-color-basic(2)
+	&.small
+		@include button-small-basic
+	&.light
+		background: #eee
+		border-color: darken(#eee, 5%)
+		color: $main-color-dark
+		font-weight: 500
+		&:hover
+			border-color: darken(#eee, 25%)

theme_nin_original/sass/base/_var.sass

@@ -0,0 +1,49 @@
+//these are the main variables used in the sass file
+
+$site-width : 1200px
+$gut 		: 18px
+$postboardWidth : 670px
+
+$miniProfileWidth : $site-width/8
+$leftWidth 	: $miniProfileWidth + $gut
+$rightWidth : $site-width - ($leftWidth + $postboardWidth)
+
+$postboardLargeWidth : $postboardWidth + $rightWidth
+
+$micro-usr-img : 36px
+$mini-usr-img : 48px
+$usr-img : 64px
+
+$space : 1rem
+
+
+
+// colors
+$light-grey: #C3C3C3
+$color-green: #A1B775
+$color-red: #EF5D43
+$color-blue: #39434F
+$dark-grey : #3E3C42
+
+
+$main-color-light: #000
+$main-color-dark: #222
+$main-color-color: $color-green
+$main-background-color: #eee
+$bloc-light-color: #FDFCFA
+$bloc-background-color: #F3F2F0
+
+
+
+$defaut-font-color: $dark-grey
+
+$global-font-size : 15px
+$main-font-size : 1rem
+$main-line-height  :  1.3rem
+
+
+/* FONTS */
+
+$main-font-family: "Roboto", sans-serif, "Symbola"
+$symbol-font-family: "Ionicons"
+$serif-font-family: "Droid", serif

theme_nin_original/sass/layout/_account.sass

@@ -0,0 +1,43 @@
+/********* ACCOUNT MODAL *********/
+
+.account-modal
+	.module
+		margin: 4px
+		> div
+			margin: 4px 0
+			padding: 4px 12px
+	input, textarea
+		display: block
+		border: 1px solid rgba(0, 0, 0, .1)
+		width: 320px
+		margin: 12px 16px
+		padding: 2px 4px
+	textarea
+		width: 320px
+		max-width: 320px
+		min-width: 320px
+		min-height: 28px
+	input:focus, textarea:focus
+		border-bottom: solid 1px $main-color-color
+	.alias
+		margin: 0px 16px
+	.avatar
+		cursor: pointer
+		width: 64px
+		height: 64px
+		overflow: hidden
+		margin: 12px 16px
+		img
+			width: 64px
+			height: auto
+			border: 1px solid rgba(0, 0, 0, .1)
+	.c-buttons
+		text-align: right
+	.toggle-secret-key
+		float: left
+	.secret-key-container
+		text-align: center
+		font-size: 12px
+	.secret-key
+		background-color: $color-green
+		font-weight: bold

theme_nin_original/sass/layout/_dm.sass

@@ -0,0 +1,167 @@
+/****** DIRECT MESSAGES MODAL**********/
+
+.modal-wrapper.directMessages
+
+	.post-area-new
+		display: none
+		z-index: 5
+		background: $bloc-light-color !important
+		position: absolute
+		bottom: 0px
+		width: 100% !important
+		padding: 10px 20px!important
+		+box-shadow(0 -8px 13px rgba(#111, 0.1))
+	#post-preview
+		background: none
+		border: none
+		padding: 5px
+		width: 100%!important
+
+
+	.modal-header
+		h3 span
+			display: inline-block!important
+			padding-left: 5px
+			color: white
+			cursor: default
+
+	.modal-content
+		+box-sizing(border-box)
+		width: 100%
+
+	.post-photo
+		width: $mini-usr-img
+	.post-text
+		margin-left: $mini-usr-img + 10px
+		font-size: .9rem
+	.post-info-name
+		float: none
+	.message.received, .message.sent
+		.post-info-name
+			display: none
+	.post-info-tag
+		line-height: 1em
+		padding: 0
+		display: inline
+		font-size: 80%
+		margin: 0 0 0 1em
+	.post-info-sent
+		position: absolute
+		left: 50%
+		top: 10px
+		display: none
+
+.direct-messages-list .post
+	padding: 20px
+	cursor: pointer
+	@extend .ion-after
+	@extend .ion-right
+	&:after
+		position: absolute
+		right: 25px
+		top: 50%
+		font-size: 1.1em
+		margin: -0.55em 0 0 0
+		color: rgba(0, 0, 0, 0.4)
+		opacity: 0
+		+transition-property(right, opacity)
+		+transition-duration(.2s)
+		+transition-timing-function(ease-out)
+.direct-messages-list
+	.post:hover:after
+		opacity: 1
+		right: 5px
+	.post:hover
+		background: white
+
+	.post .messages-qtd
+		display: none
+		top: 4px
+		left: 56px
+
+	li
+		position: relative
+		border-bottom: 1px solid $main-background-color
+		background: $bloc-light-color
+.direct-messages-thread
+	padding-bottom: 160px
+	max-width: 420px
+	margin: auto
+	li
+		position: relative!important
+
+	.post
+		@extend .clear-fix
+		background: none
+		left: 0
+		margin: 0px 10px 20px 10px
+		cursor: default
+		position: relative
+		.post-info-time
+			float: none
+			display: block
+			text-align: center
+			font-size: 10px
+			padding-top: 10px
+			margin-bottom: 10px
+			cursor: default
+			position: static
+			&:hover
+				color: $main-color-light
+
+
+
+
+		.post-text:after, .post-text:nth-child(2n):after
+			content: ""
+			width: 1px
+			background: transparent
+			position: absolute
+			top: 10px
+			white-space: normal
+
+		.post-text:after
+			border-top: solid 7px transparent
+			border-bottom: solid 7px transparent
+			border-right: solid 7px white
+			left: -7px
+
+		.post-text
+			background: white
+			margin-right: $mini-usr-img + 10
+			margin-left: $mini-usr-img + 10
+			position: relative
+			display: inline-block
+			max-width: 300px
+			font-size: .9rem
+			padding: 5px 10px
+			z-index: 4
+			float: left
+			word-wrap: break-word
+			max-width: 70%
+			min-height: $mini-usr-img
+
+		.post-photo
+			position: absolute
+			left: 0
+			top: 30px
+			float: none
+			margin: 0
+
+
+
+	.post.sent
+
+		.post-text:after
+			border-top: solid 7px transparent
+			border-bottom: solid 7px transparent
+			border-right: none
+			border-left: solid 7px white
+			right: -7px
+			left: auto
+		.post-text
+			float: right
+		.post-photo
+			position: absolute
+			right: 0
+			left: auto

theme_nin_original/sass/layout/_following.sass

@@ -0,0 +1,83 @@
+/********** FOLLOWING OWN ***********/
+
+.following-own-modal
+	.modal-content
+		padding: 0
+	.following-list
+		display: flex
+		flex-wrap: wrap
+		justify-content: space-evenly
+		> li
+			width: 48%
+			margin: 2px
+			padding-top: 12px
+			padding-bottom: 8px
+			border: solid 1px rgba(69, 71, 77, .1)
+			background: #FFF
+			text-align: center
+			> div
+				position: relative
+			&:hover
+				border-bottom: solid 1px $main-color-color
+				.mini-profile-actions
+					display: block
+		.mini-profile-photo
+			width: 64px
+			height: 64px
+			margin: 2px
+		.mini-profile-name
+			padding: 4px
+		.mini-screen-name
+			display: none
+		.following-config
+			width: 100%
+			text-align: center
+			margin: 4px
+		.following-config button
+			display: inline-block
+		.mini-profile-actions
+			display: none
+			position: absolute
+			top: 0
+			right: 8px
+		.mini-profile-actions
+			span
+				cursor: pointer
+				display: inline-block
+				position: relative
+				top: -12px
+				right: -8px
+				z-index: 10
+				background: $main-color-color
+				&:hover
+					background: #AAA
+			ul
+				height: 0
+				overflow: hidden
+				position: absolute
+				z-index: 20
+				top: 8px
+				right: -8px
+				padding: 0
+				background: #FFF
+				transition: height .2s linear
+				> li
+					text-align: left
+					white-space: nowrap
+					color: rgba(0, 0, 0, .7)
+					font-size: 12px
+					margin: 0
+					padding: 4px 16px 4px 8px
+					border-bottom: solid 1px rgba(0, 0, 0, 0)
+					background: #FFF
+					&:hover
+						border-bottom: solid 1px $main-color-color
+			&:hover
+				ul
+					height: 57px
+					box-shadow: 8px 10px 10px 0px rgba(0, 0, 0, .2)
+		.swarm-status
+			font-size: 11px
+			display: block
+		.latest-activity
+			font-size: 11px

theme_nin_original/sass/layout/_groupchat.sass

@@ -0,0 +1,150 @@
+// group messages
+
+
+.group-messages-join-group
+	.modal-content
+		padding: 20px
+	button
+		margin: 5px 0
+	.label
+		font-weight: 700
+		padding: 5px 0
+		text-align: left
+	input[type="text"]
+		padding: 3px
+		width: 100%
+		margin-bottom: 10px
+	input[type="checkbox"]
+		float: left
+		margin-right: 10px
+
+.groupMessages
+	button
+		margin: 5px
+
+	.direct-messages-thread
+		padding-bottom: 200px
+	.post-area-new.open
+		bottom: 40px
+	.direct-messages-list
+		li
+			padding: 10px 20px
+
+		.post-photo
+			display: none
+
+		.post-text
+			display: none
+		.post-info-time
+			position: static
+			display: block
+			text-align: left
+			padding: 5px 0
+			color: inherit
+
+			&:hover
+				text-decoration: none
+				color: inherit
+
+		.post .messages-qtd
+			top: 50%
+			left: unset
+			right: 24px
+			margin-top: -13px
+
+
+// new group
+.group-messages-new-group
+	text-align: center!important
+	.label
+		font-weight: 700
+		padding: 5px 1%
+		text-align: left
+	textarea
+		&.description, &.invite
+			width: 98%
+			margin: 5px auto
+			padding: 5px
+			text-align: left
+			border: 1px solid darken( #F8F8F8 , 5%)
+
+
+// there is no special class for group DM profile modal window currently
+.profile-card[data-screen-name^=\*]
+	.profile-bio
+		text-align: center
+		margin: 0
+
+		.group-description
+			display: inline-block
+			border: 1px solid rgba(0, 0, 0, 0)
+			background: none
+			text-align: center
+			width: 58%
+			padding: 4px
+			vertical-align: middle
+
+			&:focus
+				border: 1px solid rgba(0, 0, 0, .1)
+				background: white
+
+			&:hover
+				border: 1px solid rgba(0, 0, 0, .1)
+
+			.save, .cancel
+				display: none
+
+
+// messages control
+.group-messages-control
+	text-align: left!important
+	button
+		margin: 3px 0 3px 3px
+	textarea
+		width: 98%
+		margin: 5px auto
+		padding: 5px
+		text-align: left
+		border: 1px solid darken( #F8F8F8 , 5%)
+	.invite-form
+		display: none
+	div.profile-bio
+		margin-left: 0
+
+	.secret-key
+		display: none
+		font-size: 10px
+		padding: 5px
+		margin: 3px
+		cursor: pointer
+		border: 1px solid darken( #F8F8F8 , 5%)
+		color: $dark-grey
+		background: #F8F8F8
+		overflow: hidden
+		&:hover
+			background: white
+
+
+.direct-messages-thread + .group-messages-control
+	position: absolute
+	bottom: 0
+	height: 40px
+	overflow: hidden
+	left: 0
+	width: 100%
+	padding: 3px 10px
+	text-align: right!important
+	z-index: 200
+	background: $bloc-light-color
+	+box-shadow(0 -8px 13px rgba(#111, 0.1))
+	.invite-form
+		@include prompt-wrapper-basic
+		bottom: 40px
+		top: auto
+		textarea
+			min-height: 100px
+	button
+		float: none
+		display: inline-block
+		padding: 7px
+		@include button-color-basic

theme_nin_original/sass/layout/_login.sass

@@ -0,0 +1,29 @@
+/****** LOGIN TO ACCOUNT MODAL ******/
+
+.login-modal
+	.module
+		margin: 4px
+		> div
+			margin: 4px 0
+			padding: 4px 12px
+		> div:last-child
+			text-align: right
+			margin: 8px 0
+		input
+			border: 1px solid rgba(0, 0, 0, .1)
+			width: 320px
+			margin: 12px 16px
+			padding: 2px 4px
+		select
+			border: 1px solid rgba(0, 0, 0, .1)
+			width: 310px
+			margin: 12px 16px
+			padding: 2px 4px
+		input:focus, select:focus
+			border-bottom: solid 1px $main-color-color
+		.secret-key
+			width: 500px
+		.availability
+			color: #45474D
+			display: inline-block
+			margin-left: 16px

theme_nin_original/sass/layout/_menu.sass

@@ -0,0 +1,118 @@
+// vars for the menu
+
+$menu-height : 52px
+$menu-font-color: white
+$menuBgColor : $dark-grey
+.userMenu
+	width: 100%
+	position: fixed
+	height: $menu-height
+	left: 0
+	margin: 0
+	//background-color: #FFAF1C
+	//+background-image(linear-gradient(to right , $color-green, #5E80A2) )
+	background-color: $menuBgColor
+	z-index: 20
+	> ul
+		@extend .clear-fix
+		+box-sizing(border-box)
+		max-width: 100%
+		width: $site-width
+		margin: auto
+		background: image-url("logo.png", false, false) no-repeat 50% 50%
+		background-size: 20px
+		li
+			position: relative
+			display: block
+			float: left
+			margin: 0 10px
+			> a
+				line-height: $menu-height
+				display: inline-block
+				color: rgba($menu-font-color, 0.5)!important
+				font-size: 1rem
+				position: relative
+				font-size: 1rem
+				&:hover
+					color: $menu-font-color!important
+					text-decoration: none
+
+				&:before
+					padding-right: 5px
+				span
+					display: inline-block
+
+
+			&.current  a
+				color: $menu-font-color!important
+
+
+/* Menu specific entries */
+
+.userMenu li
+
+	&.userMenu-home
+		a
+			.label
+				display: inline-block!important
+
+		.menu-news
+			position: absolute
+			text-align: center
+			display: none
+			top: 5px
+			right: -12px
+			background: $main-color-color
+			width: 15px
+			height: 15px
+			line-height: 15px
+			font-size: 10px
+			padding: 1px
+			margin: 0
+			font-weight: 900
+			+border-radius(50%)
+			+box-sizing(content-box)
+			color: white
+			&.show
+				display: block
+
+
+	&.userMenu-dhtindicator, &.userMenu-connections, &.userMenu-messages, &.userMenu-groupmessages
+		display: none!important
+
+	&.userMenu-config, &.userMenu-search
+		float: right
+		color: $menu-font-color
+		+ a
+			color: $main-color-dark
+	&.userMenu-search
+		> input
+			border: 1px solid rgba(white,.3)
+			line-height: $menu-height/2
+			margin-top: $menu-height/4
+			font-size: 12px
+			padding: 0 7px
+			background: rgba(white,.1)
+			color: white
+			+border-radius(7px)
+			&:focus
+				border-color: rgba(white,.7)
+	&.userMenu-config > a
+		@extend .ion
+		@extend .ion-gear
+		font-size: 1.5rem
+	.config-menu.dialog-modal
+		a
+			background: $bloc-light-color
+			border-top: 1px solid $main-background-color
+			&:hover
+				background: white
+			text-decoration: none
+			display: block
+			width: 100%
+			font-weight: 400
+			line-height: $mini-usr-img / 1.5
+			display: block
+			margin: 0
+			padding: 5px
+			color: $defaut-font-color!important

theme_nin_original/sass/layout/_modal.sass

@@ -0,0 +1,351 @@
+/*********** POPUP MODAL **************/
+
+// vars modal
+
+$header-modal-height : $menu-height
+
+
+// style
+
+@mixin modal-blackout
+	display: block
+	background: rgba(0,0,0, 0.6)
+	z-index: -1
+	position: fixed
+	left: 0
+	top: 0
+	width: 100%
+	height: 100%
+
+.modal-blackout
+	display: none
+
+
+.modal-wrapper
+	background: $bloc-background-color
+	z-index: 100
+	width: 34%
+	position: fixed
+	+box-sizing(border-box)
+	@extend .box-shadow
+	height: 100vh
+	right: 0
+	bottom: 0
+	overflow: hidden
+	+box-shadow(-8px 0 13px rgba(#111, 0.2))
+	+transition-property(top, bottom)
+	+transition-duration(1s)
+	&.remove
+		bottom: 300%
+	// NEW USER MODAL //
+
+	&.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: 80%
+
+
+	// 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
+			@include button-small-basic
+		.bio
+			color: rgba(0, 0, 0, 0.6)
+			font-style: italic
+			padding: .25rem 0
+
+
+	.modal-content
+		background: $bloc-light-color
+		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
+			@include button-color-basic
+
+
+	&.new-users-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
+			@include button-small-basic
+		.bio
+			color: rgba(0, 0, 0, 0.6)
+			font-style: italic
+			padding: .25rem 0
+
+
+.modal-header
+	position: relative
+	background: darken($main-color-dark,.3)
+	height: $header-modal-height
+	+box-sizing(border-box)
+	@extend .clear-fix
+
+	h3
+		padding-left: 20px
+		line-height: $header-modal-height
+		font-weight: 500
+		font-size: 1rem
+		float: left
+		color: white
+		span
+			position: relative
+	span
+
+		@extend .ion
+		position: absolute
+		top: 0
+		line-height: $header-modal-height
+		font-size: 1rem
+		cursor: pointer
+		color:  rgba(white , 0.7)
+		transition: color .1s linear
+		&:hover
+			color: white
+
+		b
+			display: none
+
+		&.modal-close
+			@extend .ion-close
+			right: 10px
+		&.mark-all-as-read
+			@extend .ion-checkmark
+			position: static
+			float: left
+			margin-left: 10px
+			display: none
+		&.modal-back
+			@extend .ion-back
+			right: 70px
+
+
+.inline-warn
+	background-color: #FEFEDF
+	padding: 10px
+	.close
+		float: right
+		font-size: 1.2em
+		color: #e34f42
+		cursor: pointer
+		margin: -8px 2px 8px 8px
+	.text
+		font-size: 0.8em
+		text-align: center
+	.options
+		font-size: 0.8em
+		text-align: right
+		margin-top: 4px
+		div > *
+			display: inline-block
+
+
+/* Composants */
+
+.twister-peer
+	margin: 0
+	min-height: 72px
+	padding: 4px
+	border-top: solid 1px $main-background-color
+	border-bottom: solid 1px $main-background-color
+	background: $bloc-light-color
+	+ .twister-peer
+		border-top: none
+	.avatar
+		float: left
+		width: 48px
+		height: 48px
+		overflow: hidden
+		margin: 4px
+		img
+			width: 48px
+			height: auto
+		&:hover
+			cursor: pointer
+	.name
+		display: inline-block
+		font-weight: 600
+		&:hover
+			cursor: pointer
+	.alias
+		display: inline-block
+		&:hover
+			color: $main-color-color
+			cursor: pointer
+	.bio
+		text-align: center
+		padding: 4px
+
+.avatar.tiny
+	width: 20px
+	height: 20px
+	+border-radius(3px)
+
+.twister-user
+	position: relative
+	box-sizing: border-box
+	background: $bloc-light-color
+	@extend .clear-fix
+	border-bottom: 1px solid $main-background-color
+	width: 100%
+	min-height: auto
+	padding: 7px
+	clear: left
+	&:first-child
+		border-top: 1px solid $main-background-color
+		border-bottom: 1px solid $main-background-color !important
+	&:last-child
+		border-bottom: 0
+	small
+		display: none
+
+
+
+
+/* Minimized */
+.minimize-modal
+	@extend .ion
+	@extend .ion-minus
+	position: absolute
+	top: 0
+	line-height: $header-modal-height
+	font-size: 1rem
+	cursor: pointer
+	color:  rgba(white , 0.7)
+	transition: color .1s linear
+	right: 35px!important
+	&:hover
+		color: white
+
+	b
+		display: none
+
+
+
+#modals-minimized
+	position: fixed
+	z-index: 2000
+	left: 0
+	bottom: 0
+	width: $leftWidth
+	text-align: right
+	li
+		background: $dark-grey
+		cursor: pointer
+		margin-right: 10px
+		font-weight: 600
+		font-size: .8rem
+		padding: .5rem
+		margin-bottom: 10px
+		color: rgba(white, .8)
+		+transition(margin .2s)
+		&:hover
+			color: white
+			margin-right: 0
+
+/*********** POPUP PROMPT *************/
+
+@import '_prompt'
+
+/********* DIRECT MESSAGES MODAL ***********/
+
+@import '_dm'
+
+@import '_groupchat'

theme_nin_original/sass/layout/_postboard.sass

@@ -0,0 +1,393 @@
+/*************  TOP TEXTAREA *************/
+#postboard-top
+	position: relative
+	@extend .clear-fix
+	margin-bottom: 10px
+	transition: height .3s linear
+	padding: 15px
+	background: white
+	overflow: hidden
+	background: $bloc-light-color
+	+transition-property( top)
+	+transition-duration(.1s)
+	+transition-timing-function(ease-out)
+	top: 0
+	+box-shadow(1px 2px 2px rgba(#111, 0.1))
+	z-index: 120
+
+	.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
+
+	&.onTop
+		position: fixed
+		bottom: 0
+		left: 0
+		top: auto
+		margin-bottom: 0
+		z-index: 2000
+		+box-shadow(0 -5px 13px rgba(#111, 0.2))
+		width: 320px
+		max-width: 100%
+		.profile-photo
+			display: none!important
+		.post-area
+			padding-left: 0
+
+
+
+/*************  POSTBOARD *************/
+
+
+.postboard
+	width: $postboardWidth
+	float: left
+
+	h2, .postboard-news
+		display: none
+
+	&.large
+		width: $postboardLargeWidth
+
+.postboard-posts
+	position: relative
+	z-index: 1
+	clear: both
+
+
+	.post
+
+		position: relative
+		margin-bottom: 1px
+		+transition-property(margin)
+		+transition-duration(.5s)
+		+transition-timing-function(ease-out)
+		color: $defaut-font-color
+		cursor: pointer
+
+		&:hover
+			color: #000
+
+		.show-more
+			display: inline-block
+			float: right
+			font-size: .8rem
+			color: lighten($dark-grey,30%)
+
+			&:hover
+				color: lighten($dark-grey,5%)
+		.post-expand
+			color: lighten($dark-grey,30%)
+			background: $bloc-light-color
+			cursor: pointer
+			font-size: .8rem
+			position: absolute
+			left: 10px
+			bottom: 10px
+			&:hover
+				color: lighten($dark-grey,5%)
+		.post-data
+			padding:  15px
+			background: $bloc-light-color
+
+		&.promoted
+			> .post-data
+				.post-text::after
+					font-size: 70%
+					color: #FFF
+					background-color: rgba($color-green, 0.75)
+					margin: 0px 8px
+					padding: 2px 4px
+					content: attr(data-promoted)
+				&:hover
+					.post-text::after
+						background-color: $color-green
+
+
+
+
+
+	/*********** 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-photo
+	margin: 0
+	display: inline-block
+	float: left
+	vertical-align: middle
+	overflow: hidden
+	width: $mini-usr-img
+	margin: 0 15px 15px 0
+	max-height: $mini-usr-img
+	clear: both
+	img
+		width: 100%
+		height: auto!important
+
+.post-info-name
+	font-weight: 500
+	color: inherit
+	text-decoration: none
+	display: inline-block
+	font-size: 1rem
+	float: left
+	&:hover
+		text-decoration: none
+		color: black
+
+.post-info-tag
+	font-size: .8rem
+	opacity: .6
+	margin-top: 4px
+	display: inline-block
+
+.post-info-sent
+	display: block
+	position: absolute
+	top: -10px
+	right: 0
+	font-size: 15px
+
+
+.post-info-time
+	position: absolute
+	font-size: .8rem
+	line-height: .8rem
+	text-decoration: none
+	top: 12px
+	right: 0
+	padding-right: 11px
+	text-align: right
+	color: lighten($dark-grey,30%)
+	&:hover
+		color: lighten($dark-grey,5%)
+
+.post-text
+	margin: 0 0 0 ($mini-usr-img +15)
+	word-wrap: break-word
+	min-height: $mini-usr-img - 20
+	padding: 0
+	a:hover
+		text-decoration: underline
+
+
+.post-context
+	font-size: .8rem
+	line-height: .8rem
+	margin: 2px 0 4px 60px
+
+	color: lighten($dark-grey,30%)
+
+
+.post-rt-by
+	margin: 0 0 1em
+	div
+		display: inline
+	.prep:before, .prep:after
+		content: ' '
+
+
+.post-rt-icon
+	@extend .ion-shuffle
+	@extend .ion
+	&:before
+		display: block
+		float: left
+		color: $main-color-color
+
+		line-height: .8rem
+		font-size: .8rem
+
+		margin-right: .4em
+
+
+// .post-interactions (reply, retransmit, fav)
+
+.post-interactions
+	margin: 10px 0 3px 0
+	text-align: right
+	height: .8rem
+	line-height: .8rem
+	span
+		color: lighten($dark-grey,30%)
+		cursor: pointer
+		font-size: .8rem
+		line-height: .8rem
+		@extend .ion
+		position: relative
+		margin-left: 7px
+		display: none
+		.open .original &
+			display: inline-block!important
+
+		&:hover
+			color: lighten($dark-grey,5%)
+		&:before
+			padding: 3px
+		&.post-reply
+			@extend .ion-plus
+		&.post-propagate
+			@extend .ion-shuffle
+		&.post-favorite
+			@extend .ion-alert
+
+	.post:hover &
+		.post-reply, .post-propagate , .post-favorite
+			display: inline-block
+
+
+.open .related
+	.post-reply,
+	.post-propagate,
+	.post-favorite
+		display: none!important
+	&:hover
+		.post-reply,
+		.post-propagate,
+		.post-favorite
+			display: inline-block!important
+
+
+.expanded-content
+	//display: none
+	padding: 0
+	@extend .clear-fix
+	textarea
+		clear: left
+
+.image-preview
+	max-width: 100%
+	width: auto
+	display: block
+	margin: auto
+
+.preview-container
+	width: 100%
+	text-align: center
+	overflow-y: auto
+	background: black
+	clear: both
+
+.post-stats
+	display: flex
+	float: left
+	clear: left
+	height: 34px
+	> div
+		line-height: 16px
+		vertical-align: middle
+	.stat-count
+		font-size: 12px
+		padding-right: 4px
+		border-right: solid 1px $light-grey
+		div:last-child
+			display: none
+	.avatar-row
+		padding: 4px
+		a
+			display: inline-block
+			position: relative
+			margin-right: 2px
+
+.post
+	.new-replies-available
+		text-align: center
+		margin-top: 8px
+		button
+			@include button-color-basic
+
+
+
+
+//what appears on top of .avatar-row img on hover
+
+.avatar-row
+	a:hover
+		.user-name-tooltip
+			display: block
+
+	.user-name-tooltip
+		display: none
+		position: absolute
+		background: $main-color-dark
+		font-size: 11px
+		line-height: 11px
+		white-space: nowrap
+		padding:  5px
+		+border-radius(3px)
+		color: #fff
+		top: -28px
+		left: -10px
+		&:after
+			content: ""
+			position: absolute
+			width: 0
+			left: 13px
+			bottom: -4px
+			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 transparent
+
+
+
+
+.post-rt-reference
+	padding: 10px
+	margin-top: 10px
+	position: relative
+	border: 1px solid #eee
+	+border-radius(3px)
+	&:hover
+		background-color: #FFF
+		cursor: pointer
+	.post-photo
+		display: none
+	.post-info-name
+		font-size: 12px
+	.post-text
+		margin: 5px 0 0 0
+		clear: both
+		font-size: 12px
+		line-height: 130%
+	.post-info-time
+		font-size: 80%
+	.post-area
+		padding-left: 0

theme_nin_original/sass/layout/_profile.sass

@@ -0,0 +1,156 @@
+
+// variables for width
+
+$modal-width: 980px
+$modal-height: 580px
+$modal-gut: 15px
+$modal-postboard-height: $modal-height - 3*$modal-gut
+$modal-left-col: 400px
+$modal-right-col: ($modal-width - 2*$modal-gut) - $modal-left-col - $modal-gut
+$modal-postboard-post-height: 100%
+
+/*************************************
+ ******************* PROFILE MODAL
+ ***************************************/
+
+.profile-modal
+
+	.modal-content
+		overflow: hidden
+		padding: 0
+		position: relative
+		#profile-posts
+			padding: 0
+
+		.postboard
+			width: 100%
+			height: 100%
+			position: absolute
+
+		.postboard-posts
+			display: block
+			height: $modal-postboard-post-height
+			overflow: auto
+
+		.profile-card
+			margin: 0
+			padding: 0
+			border-bottom: 1px solid $main-background-color
+		.profile-data
+			background: none
+
+		.members
+			overflow-y: auto
+
+.profile-modal
+	h2.profile-screen-name
+		display: block
+		letter-spacing: 0
+		text-transform: none
+		color: lighten($dark-grey, 30%)
+		padding:  5px 0
+		margin: 0
+		font-size: 13px
+		line-height: 13px
+
+
+/* Profile card*/
+
+.profile-card
+	width: 100%
+	background: $bloc-light-color
+	padding: $modal-gut
+.profile-card-main
+	position: relative
+	text-align: left
+	word-wrap: break-word
+	background: none!important
+	padding: 10px
+	h1, h2
+		display: inline !important
+		b
+			font-weight: 400
+	&:before
+		content: ""
+		border: solid 0px #fff
+		position: absolute
+		left: 1px
+		top: 1px
+		right: 1px
+		bottom: 1px
+		z-index: 0
+	*
+		position: relative
+		z-index: 1
+
+.profile-card-photo
+	height: auto
+	width: $usr-img
+	margin: 0 10px 10px 0
+	display: block
+	float: left
+
+.profile-bio
+	@extend i
+	text-align: left
+	font-size: .9rem
+
+	margin-left:  $usr-img + 10
+.profile-card-buttons
+	text-align: center
+	padding: 0 0 $space 0
+
+
+.isFollowing:after
+	font-size: 10px
+
+
+
+.follow
+	@include button-color-basic
+.unfollow
+	@include button-color-basic(2)
+
+
+.known-followers
+	text-align: center
+	clear: both
+	width: 100%
+
+
+#msngrswr
+	display: none
+	text-align: center
+	margin: 10px 0
+
+.profile-extra-contact
+	display: none
+	margin: 0 15px 0 0
+	font-weight: 500
+	padding: 2px 8px 3px 8px
+	+border-radius(2px)
+
+
+
+.bitmessage-ctc, .tox-ctc
+	background: #999
+	color: white
+	font-size: 1rem
+	display: inline-block
+	padding: 10px
+	line-height: 1rem
+	@extend .ion-copy
+	@extend .ion
+
+
+
+.profile-modal
+	.profile-tox, .profile-bitmessage
+		display: inline-block
+		margin-right: 5px
+		font-size: 13px
+		&:hover
+			color: $main-color-color
+			text-decoration: none
+		@extend .ion-tox
+		@extend .ion

theme_nin_original/sass/layout/_prompt.sass

@@ -0,0 +1,102 @@
+/*********** POPUP PROMPT *************/
+
+@mixin prompt-wrapper-basic
+	background: $bloc-light-color
+	z-index: 200
+	position: fixed
+	top: 50%
+	left: 50%
+	width: 600px
+	margin-left: -300px
+	+box-shadow(0 8px 33px rgba(#000, .3))
+
+.prompt-wrapper
+	@include prompt-wrapper-basic
+	.following-config-method-buttons
+		padding: 0 20px 20px 0
+		float: right
+	.modal-content
+		background: $bloc-light-color
+		padding: 20px
+		.post-area
+			textarea
+				clear: both
+	.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
+	.modal-buttons
+		margin: 4px 0
+		text-align: right
+	.switch-mode
+		display: inline-block
+		float: left
+		margin: 12px 4px 4px
+		color: $main-color-color
+		cursor: pointer
+		font-size: .8rem
+		line-height: .8rem
+		@extend .ion
+		@extend .ion-shuffle
+
+
+.confirm-popup.prompt-wrapper
+	margin-top: -100px
+
+
+/******** NEW ACCOUNT POPUP **********/
+
+.new-account-briefing
+	&.prompt-wrapper
+		margin-top: -184px
+		.modal-blackout
+			@include modal-blackout
+
+
+/************ FOLLOWING-CONFIG MODAL **********/
+
+.prompt-wrapper.following-config-modal
+	margin-top: -100px
+	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: -150px
+
+	.post-expand, .post-interactions
+		display: none
+	.post-info-time
+		position: static
+		float: right
+
+
+/********* REPLY POSTS MODAL***************/
+
+.prompt-wrapper.reply
+	&.prompt-wrapper
+		margin-top: -110px
+	.post-expand, .post-interactions
+		display: none
+	.post-area
+		padding-bottom: 6px

theme_nin_original/sass/layout/_responsive.sass

@@ -0,0 +1,103 @@
+
+@media (max-width: $site-width)
+	.right
+		display: none
+	.userMenu
+		ul
+			padding: 0
+	.postboard
+		position: absolute
+		left: $leftWidth
+		right: 20px
+		width: auto!important
+
+
+	.modal-wrapper
+		width: 85%
+		.postboard
+			width: $postboardWidth
+			float: left
+			position: relative
+			left: 0
+
+@media (max-width: 700px)
+
+	.network
+		&.singleBlock
+			margin-top: $menu-height
+			.module
+				width: 100%
+				margin: 0 !important
+				float: none
+
+	.userMenu
+		> ul
+			background-image: none
+
+
+	.userMenu li.userMenu-search > input
+		width: 150px
+
+	.prompt-wrapper
+		width: 98%
+		left: 1%
+		margin-left: 0
+
+	.dashboard
+		&.left
+			top: 0
+			margin-top: 0
+			min-height: $menu-height + 70px
+			width: 100%
+			> .module
+				top: $menu-height
+				float: none
+				width:  100%
+				position: fixed
+				z-index: 10
+
+			.mini-profile-info
+				display: none
+	.mini-profile-indicators li
+		width: 20%
+		margin: 0
+		float: left
+
+		&.userMenu-user, &.userMenu-collapsePosts
+			display: none
+
+	.who-follow
+		display: none
+	.promoted-posts-only
+		display: none
+
+	.wrapper
+		padding-top: 0
+	.postboard
+		width: 100%
+		float: none
+		left: 0
+		z-index: 5
+		top: 0
+		position: relative
+		margin-top: 0
+		.modal-wrapper &
+			top: auto
+	#postboard-top
+		display: none
+	.modal-wrapper
+		width: 90%
+
+
+
+
+
+
+@media (max-width: 360px)
+
+
+	.userMenu li.userMenu-search > input
+		width: 100px
+	.dialog-modal
+		right: -50px
+		width: 290px

theme_nin_original/sass/layout/_tabs.sass

@@ -0,0 +1,72 @@
+.options
+  position: relative
+
+  input
+    display: inline-block
+
+  button, input, select
+    font-size: 13px
+
+  label
+    cursor: pointer
+
+  .label-h
+    font-weight: 700
+
+  input[type=radio]
+    display: none!important
+    visibility: hidden
+    opacity: 0
+
+  input[type='checkbox']
+    cursor: pointer
+    vertical-align: sub
+
+  input[type='range']
+    cursor: pointer
+    vertical-align: -16px
+
+  .container
+    margin: 5px 0px 5px 12px
+
+  .tab-content
+    background: $bloc-background-color
+    position: relative
+    padding: 20px
+    @extend .clear-fix
+    > div
+      position: absolute
+      top: 0
+      left: 0
+      height: auto
+      width: 100%
+      z-index: -1
+      opacity: 0
+      visibility: hidden
+  input
+    &#tab_language:checked ~ .tab-content .language,
+    &#t-2:checked ~ .tab-content .theme,
+    &#t-3:checked ~ .tab-content .notifications,
+    &#t-4:checked ~ .tab-content .keys,
+    &#t-5:checked ~ .tab-content .appearance,
+    &#t-6:checked ~ .tab-content .users,
+    &#t-7:checked ~ .tab-content .webtorrent,
+    &#t-8:checked ~ .tab-content .DMs
+      position: relative
+      z-index: 10
+      opacity: 1
+      visibility: visible
+
+  label.tabs
+    &:hover
+      color: $main-color-dark
+    text-align: center
+    width: auto
+    display: inline-block!important
+    margin: 0 5px 0 0
+    padding: 5px 15px
+    color: $main-color-light
+
+  input:checked + label.tabs
+    background: $bloc-background-color
+    color: $main-color-dark

theme_nin_original/sass/layout/_wrapper.sass

@@ -0,0 +1,51 @@
+/* Wrapper and blocks */
+.wrapper
+	width: $site-width
+	max-width: 100%
+	margin: auto
+	padding-top: $menu-height + $gut
+	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
+			z-index: 2000
+
+	&.right
+		float: left
+		top: $menu-height
+		overflow: hidden
+		width: $rightWidth
+		padding-left: $gut
+		padding-right: 3px
+	> .module
+		width: 100%
+		margin-bottom: 20px
+		background: $bloc-light-color
+		width: 100%
+		min-height: $mini-usr-img
+		+box-shadow(1px 2px 2px rgba(#111, 0.1))
+		+border-radius(3px)
+		@extend .clear-fix
+		overflow: hidden
+		h3
+			float: left
+			padding: 10px
+		h4
+			clear: left
+			padding: 10px 10px 5px 10px
+			font-size: 90%
+		small
+			display: none
+		ol
+			@extend .clear-fix
+			clear: both
+			position: relative

theme_nin_original/sass/pages/_network.sass

@@ -0,0 +1,86 @@
+/********** LOGIN AND NETWORK PAGES *******/
+.network
+	&.singleBlock
+		@extend .clear-fix
+
+
+		ul
+			line-height: 2rem
+			padding: 1rem 2rem
+
+
+		.module
+
+			background: $bloc-background-color
+			+box-shadow(0 1px 1px rgba(#555, .1))
+			margin-bottom: 50px
+			width: 49%
+			float: left
+			margin-right: 1%
+			@extend .clear-fix
+			&:last-child
+				margin-right: 0
+
+			&:last-child
+				h2
+					+background-image(linear-gradient(to right , $color-green, #5E80A2) )
+
+
+
+	.spam-msg
+		resize: none
+		width: 100%
+		display: block
+		padding: $space
+		height: 180px
+		border: solid 1px rgba(0, 0, 0, 0.1)
+		position: relative
+		margin: $space 0
+		font-family: $main-font-family
+
+
+	.highlight
+		font-size: 1.2rem
+		display: block
+		margin: $space 0
+
+	span.connection-status
+		font-weight: 500
+		&:before
+			content: ""
+			display: inline-block
+			height: .8em
+			width: .8em
+			margin-right: .8em
+			background: $color-red
+			color: white
+		&.connected:before
+			background: $main-color-color
+
+	.post-area-extras
+		margin-right: 20px
+
+	.connections span, .known-peers, .dht-nodes, .blocks, .last-block-time, .mining-difficulty
+		color: $main-color-color
+		font-weight: 700
+		font-family: Arial
+		font-size: 95%
+	h2
+		font-weight: 400
+		+background-image(linear-gradient(to left , $color-green, #5E80A2) )
+		padding: 1rem 2rem
+		color: white
+
+
+	h3
+		font-weight: 600
+		margin-top: 2*$space
+		padding: 0 1.5rem
+		+box-sizing(content-box)
+		&:after
+			display: block
+			content: ''
+			height: 1px
+			width: 100%
+			background: rgba(#5F81A1,.5)
+			margin-top: $space

theme_nin_original/sass/style.sass

@@ -0,0 +1,752 @@
+@charset "UTF-8"
+@import compass
+@import 'compass/reset'
+@import 'compass/utilities'
+
+// base
+@import 'base/_fonts'
+@import 'base/_var'
+@import 'base/_commons'
+@import 'base/_utils'
+
+// layout
+
+@import 'layout/_menu'
+@import 'layout/_wrapper'
+@import 'layout/_modal'
+@import 'layout/_account'
+@import 'layout/_login'
+@import 'layout/_profile'
+@import 'layout/_postboard'
+@import 'layout/_following'
+
+// pages
+
+@import 'pages/_network'
+
+@import 'layout/_tabs'
+
+
+
+
+.promoted-posts-only
+	margin: 0 0
+
+	li
+		cursor: pointer
+		display: block
+		margin: 0
+		width: 50%
+		padding: .5rem
+		float: left
+		text-align: center
+		transition: color .1s linear
+		position: relative
+		border-left: 1px solid $main-background-color
+		span
+			font-size: .8rem
+			line-height: .8rem
+			display: block
+		&.disabled
+			background: $bloc-background-color
+			color: rgba($defaut-font-color, .3)
+			z-index: 3
+		&.active
+			color: $defaut-font-color
+			cursor: default
+
+			z-index: 5
+
+
+
+
+
+/********** CONFIG SUBMENU & SEARCH RESULTS ************/
+
+.dialog-modal
+	display: none
+	background: $main-color-dark
+	position: absolute
+	top: $menu-height - 4
+	right: 0
+	width: 320px
+	overflow: hidden
+	+box-shadow(0 8px 33px rgba(#000, .3))
+
+.userMenu-search .dialog-modal:after
+	right: auto
+	left: 150px
+
+.direct-messages, .dropdown-menu-item
+	display: block
+	padding: 10px
+
+
+
+ul.userMenu-search-profiles
+	width: 100%
+	padding: 0
+
+
+	li
+		float: none
+		display: block
+		margin: 0
+		@extend .clear-fix
+		cursor: pointer
+		background: $bloc-light-color
+		border-bottom: 1px solid $main-background-color
+		&:hover
+			background: white
+			button
+				display: block
+
+		a
+			display: block
+			width: 100%
+			font-size: 12px
+			font-weight: 400
+			line-height: $mini-usr-img / 1.5
+			display: block
+			margin: 0
+			padding: 0
+			color: $defaut-font-color
+			span, b, span:hover, b:hover
+				display: inline-block
+				color: $defaut-font-color
+				font-weight: 400
+				font-size: 12px
+
+	.mini-screen-name b,
+	.mini-screen-name
+		font-weight: 500
+	.mini-profile-photo
+		width: $mini-usr-img / 1.5
+		height: auto
+		height: $mini-usr-img / 1.5
+		overflow: hidden
+		margin: 5px
+		float: left
+		overflow-x: hidden
+	.mini-profile-info
+		width: 100%
+		float: none
+	.mini-profile-name
+		padding: 5px 0 0 0
+
+	button
+		display: none
+		font-size: 0.7rem
+		line-height: 0.7rem
+		text-align: center
+		font-weight: 700
+		padding: 0.4rem
+		position: absolute
+		top: 8px
+		right: 8px
+
+
+
+
+
+.userMenu-search-sugestions a
+	color: rgba(0, 0, 0, 0.7)
+	padding: 10x 20px
+	display: block
+	clear: both
+
+
+
+
+
+
+/***************** MINI PROFILE *******************************/
+
+.mini-profile
+
+	a:hover
+		text-decoration: none
+
+	a.button
+		background: $main-color-light
+		margin: 1em auto
+	.post-area
+		margin-top: 1px
+		margin-bottom: 20px
+
+		@extend .clear-fix
+		.modal-header
+			@extend .modal-header
+			h3
+				padding: 0 0 0 20px
+	.post-area-new
+		@extend .open
+		padding: 20px
+		+box-shadow(none)
+		margin: 0
+		textarea
+			width: 100%
+
+.mini-profile-indicators
+	margin: 0
+	text-align: center
+	@extend .clear-fix
+	border-top: 1px solid $main-background-color
+	background: $bloc-background-color
+
+	li
+		+box-sizing(border-box)
+		display: block
+		position: relative
+		font-size: .8em
+		text-align: center
+		border-bottom: 1px solid $main-background-color
+
+		a
+			color: lighten($dark-grey,10%)
+			display: block
+			padding: .5rem 0
+			&:hover
+				color: $dark-grey
+				background: $bloc-light-color
+			&:before
+				display: block!important
+				width: 100%!important
+				font-size: 1.4rem!important
+
+	.userMenu-connections a
+		@extend .ion-mention
+		@extend .ion
+	.userMenu-messages a
+		@extend .ion-chatbox
+		@extend .ion
+	.userMenu-user a
+		@extend .ion-profile
+		@extend .ion
+	.userMenu-groupmessages a
+		@extend .ion-android-contacts
+		@extend .ion
+	.userMenu-collapsePosts a
+		@extend .ion
+		@extend .ion-arrow-shrink
+.messages-qtd
+	position: absolute
+	top: 5px
+	right: 5px
+	background: $main-color-color
+	text-align: center
+	+text-shadow(1px 1px 0 rgba(#000,.2))
+	color: #fff
+	width: 25px
+	height: 25px
+	line-height: 25px
+	font-size: 10px
+	font-weight: 900
+	+border-radius(50%)
+
+.mini-profile-view
+	display: none
+.left .mini-profile-info
+	padding-top: 20px
+
+.mini-profile-name
+	color: $dark-grey
+	font-size: 1em
+	font-weight: 500
+	padding: 10px  0
+	display: block
+	text-align: center
+	margin: auto
+	&:hover
+		color: $main-color-light
+
+
+.mini-profile-photo img
+	width: $usr-img
+	height: auto
+	display: block
+	margin: auto
+
+
+
+.profile-data
+	@extend .clear-fix
+	clear: both
+	padding: 0 0 1em 0
+	text-align: center
+	background: $bloc-background-color
+	.mini-profile &
+		display: none
+	li
+		display: inline
+		margin: 0 5px
+		float: none
+		a
+			color: $dark-grey
+			display: inline-block
+			font-size: 13px
+			padding-bottom: 3px
+			&:hover
+				color: $main-color-light
+			span
+				&.posts-count, &.following-count, &.followers-count
+					display: inline-block
+					padding-right: 5px
+.mini-profile
+	a
+		span.following-count
+			display: block
+			font-weight: 900
+			font-size: 1.2rem
+			color: lighten($dark-grey,20%)
+		&:hover span.following-count
+			color: $dark-grey
+
+.mini-profile-info a:hover
+	text-decoration: none
+
+.who-follow
+	display: block
+	position: absolute
+	bottom: 10px
+	padding: 10px
+	width: 100%
+	background: $bloc-light-color
+	font-size: 12px
+	z-index: 10
+	+transition(all .2s linear)
+	+box-shadow(-8px 0 13px rgba(#111, 0.2))
+
+
+.show-more-followers
+	@include button-basic
+	float: right
+	margin-right: 5px
+
+.mini-follower-link, .followed-by
+	display: inline-block
+	margin: 1px 5px
+	line-height: 12px
+	&.isFollowing:after
+		display: none
+
+.latest-activity
+	font-size: 12px
+	label
+		display: inline-block
+	.time
+		display: inline-block
+		cursor: pointer
+		font-size: 12px
+		line-height: 12px
+		margin: 1px 5px
+
+
+/***************** POST AREA ***************/
+
+.post-area-new
+
+	textarea
+		resize: none
+		+box-sizing(border-box)
+		width: 100%
+		display: block
+		transition: all .3s linear
+		-webkit-transition: height 0.3s linear
+		-moz-transition: height 0.3s linear
+		-o-transition: height 0.3s linear
+		-ms-transition: height 0.3s linear
+		height: $mini-usr-img
+		border: none
+		background: rgba(255, 255, 255, 1)
+		border: 1px solid rgba(0, 0, 0, 0.1)
+		padding: 5px
+		margin: 5px 0
+		&:focus
+			border-bottom: solid 1px $main-color-color
+
+.mini-profile .post-area
+	display: none
+	&.display
+		display: block
+		@include prompt-wrapper-basic
+		margin-top: -110px
+
+
+
+#post-preview
+	border: 1px solid $main-background-color
+	border-bottom: 0
+	padding: 5px
+	+transition-property(all)
+	+transition-duration(.1s)
+	width: 100%!important
+	font-size: 90%
+	line-height: normal
+	word-wrap: break-word
+	clear: left
+
+#opt-form-post-preview
+	width: 100%
+	#post-preview
+		background-color: #FCFFF3
+		width: 76% !important
+		margin-left: 16px
+		padding: 8px
+		.preview-container
+			background-color: rgba(0,0,0, 0.05)
+			margin-top: 8px
+		.image-preview
+			width: auto
+
+
+
+
+.post-area-new.open textarea
+	height: 80px
+
+textarea.splited-post
+	box-shadow: none!important
+	height: 28px
+
+.splited-post-counter
+	color: rgba(0, 0, 0, 0.3)
+	font-weight: bold
+	&:before
+		content: '\2026'
+
+.post-area-extras
+	overflow: hidden
+	height: 0
+	text-align: right
+
+.post-area-new.open > .post-area-extras
+	height: auto
+	transition: all .6s linear
+
+.post-area-remaining
+	padding-right: 3px
+	&.warn
+		color: #ff0000
+
+
+
+
+
+/******** WHO TO FOLLOW ********/
+
+.who-to-follow
+	&.module
+
+		li
+			button
+				position: absolute
+				right: 30px
+				top: 10px
+				@include button-small-basic
+				display: none
+				padding: .4rem!important
+			&:hover button
+				display: block
+
+
+
+img.twister-user-photo
+	float: left
+	display: block
+	float: left
+	width: $micro-usr-img
+	height: auto
+	margin: 0 10px 0 0
+
+
+
+
+.followers
+	font-size: 12px
+	label, a
+		display: inline-block
+
+.followed-by
+	font-size: 12px
+	cursor: pointer
+	display: block
+
+.twister-user-name, .twister-by-user-name
+	font-weight: 500
+	font-size: 14px
+	text-decoration: none
+	color: $main-color-dark
+.twister-user-name
+	font-weight: 700
+
+
+.twister-user-tag
+	font-size: 12px
+	line-height: 14px
+	opacity: .8
+	display: inline-block
+	letter-spacing: 0px
+
+.twister-user-remove
+	font-size: 13px
+	opacity: .5
+	text-decoration: none
+	cursor: pointer
+	position: absolute
+	padding: 5px
+	top: 0
+	right: 0
+	display: block
+	@extend .ion-close
+	@extend .ion
+
+.twister-user:hover .twister-user-remove
+	text-decoration: none
+
+.twister-user-remove:hover
+	opacity: 1
+
+.refresh-toptrends, .twistday-reminder .refresh, .refresh-users
+	@extend .ion-shuffle
+	@extend .ion
+	color: lighten($main-color-dark,30%)
+	cursor: pointer
+	font-size: .7rem
+	font-weight: 500
+	text-transform: none
+	letter-spacing: 0
+	float: right
+	display: block
+	margin:  10px
+	position: relative
+
+.view-all-users
+	color: lighten($main-color-dark,30%)
+	cursor: pointer
+	font-size: .7rem
+	font-weight: 500
+	text-transform: none
+	letter-spacing: 0
+	float: right
+	display: block
+	margin:  10px
+	position: relative
+	@extend .ion-eye
+	@extend .ion
+.refresh-toptrends:hover, .twistday-reminder .refresh:hover, .refresh-users:hover, .view-all-users:hover
+	color: $main-color-color
+	text-decoration: none
+	background-color: transparent
+
+/***********TOP TRENDS***************/
+
+.toptrends-list
+	margin: 0
+	clear: both
+	border-top: 1px solid $main-background-color
+	padding: 10px
+
+	li
+		display: inline-block
+
+	a
+		color: $main-color-light
+		padding: 3px 8px
+		display: inline-block
+		text-transform: uppercase
+		font-size: 11px
+		margin: 3px
+		font-weight: 500
+		background: white
+		+box-shadow(0 5px 8px rgba(#555, 0.2))
+		&:hover
+			color: $main-color-dark
+
+/********* TWISTDAY REMINDER *******/
+
+.twistday-reminder
+
+
+	.twister-user-full, .twister-user-tag
+		font-size: .9rem
+		line-height: 1rem
+		color: $defaut-font-color
+		font-weight: 500
+		opacity: 1
+		display: inline-block
+	.twisterday
+		font-size: 12px
+
+/*********** NEWCOMERS ************/
+
+.new-users
+	&.module
+		li
+			button
+				position: absolute
+				right: 30px
+				top: 10px
+				@include button-small-basic
+				display: none
+				padding: .4rem!important
+			&:hover button
+				display: block
+
+
+/******* LOADER *************/
+
+.postboard-loading, .loading-roller
+	font-size: 100px
+	width: .4em
+	height: .4em
+	position: relative
+	list-style: none
+	border-radius: 50%
+	margin:  100px auto
+	display: none
+
+	div
+		width: .1em
+		height: .1em
+		position: absolute
+		border-radius: 50%
+
+		&:nth-child(1)
+			background: #62839F
+			top: 0
+			left: 50%
+			margin-left: -.05em
+			transform-origin: 50% 250%
+			animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate
+
+
+		&:nth-child(2)
+			background: #749294
+			top: 50%
+			right: 0
+			margin-top: -.05em
+			transform-origin: -150% 50%
+			animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate
+
+
+		&:nth-child(3)
+			background: #94AC7E
+			bottom: 0
+			left: 50%
+			margin-left: -.05em
+			transform-origin: 50% -150%
+			animation:  rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate
+
+
+		&:nth-child(4)
+			background: #B4C669
+			top: 50%
+			left: 0
+			margin-top: -.05em
+			transform-origin: 250% 50%
+			animation: rota 1.72s linear infinite,  opa 5.25s ease-in-out infinite alternate
+
+@keyframes rota
+	to
+		transform: rotate(360deg)
+
+
+@keyframes opa
+	12.0%
+		opacity: 0.80
+	19.5%
+		opacity: 0.88
+	37.2%
+		opacity: 0.64
+	40.5%
+		opacity: 0.52
+	52.7%
+		opacity: 0.69
+	60.2%
+		opacity: 0.60
+	66.6%
+		opacity: 0.52
+	70.0%
+		opacity: 0.63
+	79.9%
+		opacity: 0.60
+	84.2%
+		opacity: 0.75
+	91.0%
+		opacity: 0.87
+
+
+
+/* Options*/
+
+.options
+	.appearance div
+		clear: both
+		div
+			float: left
+			clear: none
+			padding: 10px
+			.label
+				font-weight: 400
+
+	#filterLangList
+		width: 90%
+
+	#filterLangListCont div, #TopTrendsCont div, #TwistdayReminderCont div
+		float: none
+		padding: 0px 4px
+
+.suboptions
+	margin: 5px 30px
+	border: double 2px rgba(69, 71, 77, 0.1)
+	height: 0px
+	padding: 0!important
+	overflow: hidden
+	float: right
+	transition: height .3s linear
+	-webkit-transition: height .3s linear
+	-moz-transition: height .3s linear
+	-o-transition: height .3s linear
+	-ms-transition: height .3s linear
+	font-size: .9em
+	line-height: .9em
+	font-style: italic
+	div
+		float: none!important
+	span
+		font-style: normal
+
+/********** AUTOCOMPLETING *********/
+
+.textcomplete-wrapper textarea
+	display: inline
+
+ul.dropdown-menu
+	min-width: 160px
+	padding: 5px 0 7px
+	margin: 2px 0 0
+	list-style: none
+	background-color: #fff
+	border: 1px solid rgba(0, 0, 0, 0.2)
+	border-bottom: solid 2px $main-color-color
+	@extend .box-shadow
+	z-index: 2000!important
+	li
+		> li > a
+			padding: 3px 20px
+			white-space: nowrap
+			transition: all 100ms
+
+/* Language filter messages */
+
+.langFilterSimData
+	color: rgba( 0, 0, 0, .7 )
+	font: 10px "Open Sans", sans-serif
+	text-align: center
+
+.langFilterSimData em
+	color: $main-color-color
+
+
+@import 'layout/_responsive'