- Move the UI to FontAwesome

- Fix a lot of issues in the CSS - Re-enable the chat button on the contact page
12 years ago · c8a706faea
110 changed files with 387 additions and 926 deletions
--- a/app/models/contact/Contact.php
+++ b/app/models/contact/Contact.php
@ -199,7 +199,7 @@ class Contact extends Model {

            if(isset($jid)) {
                $sizes = array(
-                    'l'     => 200,
+                    'l'     => 210,
                    'm'     => 120,
                    's'     => 50,
                    'xs'    => 28,
--- a/app/views/admin.tpl
+++ b/app/views/admin.tpl
@ -2,9 +2,11 @@
 	<?php $this->widget('Tabs');?>
    <div id="center" >
 		<div class="fixed_block">
-			<h1><?php echo __('page.administration'); ?></h1>
+			<h1 class="paddedtopbottom">
+                <i class="fa fa-cogs"></i> <?php echo __('page.administration'); ?>
+            </h1>
 		</div>
-		<div class="moving_block" >
+		<div>
 			<?php $this->widget('AdminMain');?>
 			<?php $this->widget('AdminDB');?>
 			<?php $this->widget('AdminTest');?>
--- a/app/views/adminlogin.tpl
+++ b/app/views/adminlogin.tpl
@ -1,9 +1,11 @@
 <div id="main">
    <div id="center" >
 		<div class="fixed_block">
-			<h1><?php echo __('page.login'); ?></h1>
+			<h1 class="paddedtopbottom">
+                <i class="fa fa-sign-in"></i> <?php echo __('page.login'); ?>
+            </h1>
 		</div>
-		<div class="moving_block" >
+		<div>
 			<?php $this->widget('AdminLogin');?>
 		</div>
    </div>
--- a/app/views/explore.tpl
+++ b/app/views/explore.tpl
@ -13,7 +13,7 @@
    </div>
    <div id="center">
        <div class="protect black" title="<?php echo getFlagTitle("black"); ?>"></div>
-        <h1><?php echo __('page.explore'); ?></h1>
+        <h1 class="paddedtopbottom"><i class="fa fa-globe"></i> <?php echo __('page.explore'); ?></h1>
        <?php $this->widget('Hot');?>
        <div class="clear"></div>
        <?php $this->widget('Explore');?>
--- a/app/views/friend.tpl
+++ b/app/views/friend.tpl
@ -11,6 +11,7 @@
        <?php $this->widget('ContactSummary');?>
        <?php $this->widget('ContactInfo');?>
        <?php $this->widget('ContactAction');?>
+        <div class="clear"></div>
        <?php $this->widget('ContactManage');?>
    </div>

--- a/app/views/page.tpl
+++ b/app/views/page.tpl
@ -14,6 +14,7 @@
 	<script src="<?php echo BASE_URI; ?>app/assets/js/leaflet.js"></script>
    
    <meta name="viewport" content="width=device-width, user-scalable=no">
+
    <?php
        $this->addCss('css/animations.css');

@ -34,11 +35,7 @@
    
        $user = new User();

-        $color = $user->getConfig('color');    
-        $pattern = $user->getConfig('pattern');
-        
-        if(!isset($pattern))
-            $pattern = 'empty';
+        $color = $user->getConfig('color');
        
        if(isset($color)) {
            echo '
@ -60,9 +57,9 @@
        }
    ?>
    <?php $this->widget('System');?>
-
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  </head>
-    <body class="<?php echo $pattern; ?>">
+    <body>
        <noscript>
            <style type="text/css">
                nav {display:none;} #content {display: none;}
--- a/app/widgets/About/about.tpl
+++ b/app/widgets/About/about.tpl
@ -1,4 +1,6 @@
-<div class="tabelem padded" title="{$c->__('page.about')}" id="about">
+<div class="tabelem paddedtop" title="{$c->__('page.about')}" id="about">
+    <h1><i class="fa fa-info-circle"></i> {$c->__('page.about')} </h1>
+
    <p>{$c->__('info')}
        <a href="http://www.gnu.org/licenses/agpl-3.0.html">GNU Affero General Public License v3</a>.
    </p>
@ -73,7 +75,7 @@
        </dd>
    </dl>
    
-    <h2>{$c->__('title.software')}</h2>
+    <h2><i class="fa fa-rocket"></i> {$c->__('title.software')}</h2>
    <dl>
       <dt>Database Library</dt><dd>Modl - Movim DB Layer <a href="https://launchpad.net/modl">launchpad.net/modl</a> under AGPLv3</dd>
       <dt>XMPP Library</dt><dd>Moxl - Movim XMPP Library <a href="https://launchpad.net/moxl">launchpad.net/moxl</a> under AGPLv3</dd>
@ -83,13 +85,14 @@
       <dt>Map Library</dt><dd>Leaflet <a href="http://leafletjs.com/">leafletjs.com</a> under BSD</dd>
       <dt>Markdown</dt><dd>Michel Fortin <a href="http://michelf.ca/projects/php-markdown/">michelf.ca</a> ©Michel Fortin</dd>
    </dl>
-    <h2>{$c->__('title.resources')}</h2>
+    <h2><i class="fa fa-html5"></i> {$c->__('title.resources')}</h2>
    <dl>
       <dt>Icons</dt><dd>Famfamfam <a href="http://www.famfamfam.com/">www.famfamfam.com</a> under CC BY 3.0</dd>
       <dt></dt><dd>Icomoon <a href="http://keyamoon.com/">by Keyamoon</a> under CC BY 3.0</dd>
+       <dt></dt><dd>FontAwesome <a href="http://fortawesome.github.io/">by Dave Gandy</a> under CC BY 3.0</dd>
    </dl>

-    <h2>{$c->__('title.api')}</h2>
+    <h2><i class="fa fa-code"></i> {$c->__('title.api')}</h2>
    <dl>
       <dt>OpenStreetMap</dt><dd>Nominatim <a href="http://nominatim.openstreetmap.org/">nominatim.openstreetmap.org</a></dd>
       <dt>Last.fm API</dt><dd><a href="http://www.last.fm/api">www.last.fm/api</a></dd>
--- a/app/widgets/AdminDB/admindb.tpl
+++ b/app/widgets/AdminDB/admindb.tpl
@ -1,6 +1,6 @@
-<div id="admindb" class="tabelem padded" title="{$c->__('db.legend')}">
+<div id="admindb" class="tabelem paddedtop" title="{$c->__('db.legend')}">
    <fieldset>
-        <legend>{$c->__('')}</legend>
+        <legend>{$c->__('db.legend')}</legend>
        <div class="clear"></div>  
        
        {if="!$connected"}
--- a/app/widgets/AdminLogin/adminlogin.tpl
+++ b/app/widgets/AdminLogin/adminlogin.tpl
@ -12,7 +12,6 @@
        <input 
            class="button color green oppose" 
            type="submit" 
-            
            name="submit" 
            value="{$c->__('button.submit')}" />
    </fieldset>
--- a/app/widgets/AdminMain/adminmain.tpl
+++ b/app/widgets/AdminMain/adminmain.tpl
@ -1,5 +1,5 @@
 <form name="admin" id="adminform" action="#" method="post">
-    <div id="admingen" class="tabelem padded" title="{$c->__('admin.general')}">
+    <div id="admingen" class="tabelem paddedtop" title="{$c->__('admin.general')}">
    <fieldset>
        <legend>{$c->__('admin.general')}</legend>

@ -175,7 +175,7 @@

    <input 
    type="submit" 
-    class="button icon yes color green oppose" 
+    class="button color green oppose" 
    value="{$c->__('button.submit')}"/>
    <div class="clear"></div>
    </div>
--- a/app/widgets/AdminTest/admintest.tpl
+++ b/app/widgets/AdminTest/admintest.tpl
@ -1,4 +1,4 @@
-<div id="admincomp" class="tabelem padded" title="{$c->__('admin.compatibility')}">
+<div id="admincomp" class="tabelem paddedtop" title="{$c->__('admin.compatibility')}">
    <fieldset>
        <legend>{$c->__('admin.compatibility')}</legend>
        <div class="clear"></div>
--- a/app/widgets/Api/api.tpl
+++ b/app/widgets/Api/api.tpl
@ -1,4 +1,4 @@
-<div id="api" class="tabelem padded" title="{$c->__("api.title")}">
+<div id="api" class="tabelem paddedtop" title="{$c->__("api.title")}">
    <p>{$infos}</p>

    {if="isset($json)"}
@ -7,7 +7,7 @@
                {$c->__('api.registered')}
                {if="!$unregister_status"}
                    <a class="button color red oppose" onclick="{$unregister}">
-                        {$c->__('button.unregister')}
+                        <i class="fa fa-sign-out"></i> {$c->__('button.unregister')}
                    </a>
                {/if}
                <div class="clear"></div>
@ -24,7 +24,7 @@
            {if="$unregister_status"}
                <div class="message info">{$c->__('api.unregister')}
                    <a class="button color orange oppose" onclick="{$unregister}">
-                        {$c->__('button.reset')}
+                        <i class="fa fa-sign-out"></i> {$c->__('button.reset')}
                    </a>
                    <div class="clear"></div>
                </div>
@ -32,7 +32,9 @@
        {else}
            <div class="message info">
                {$c->__('api.register')}
-                <a class="button color green oppose" onclick="{$register}">{$c->__('button.register')}</a>
+                <a class="button color green oppose" onclick="{$register}">
+                    <i class="fa fa-sign-in"></i> {$c->__('button.register')}
+                </a>
                <div class="clear"></div>
            </div>
        {/if}
--- a/app/widgets/Avatar/_avatar_form.tpl
+++ b/app/widgets/Avatar/_avatar_form.tpl
@ -12,23 +12,23 @@
        </div>

        <div class="element" id="camdiv">
-            <label for="url">{$c->__('avatar.webcam')}</label>
+            <label for="url"><i class="fa fa-camera"></i> {$c->__('avatar.webcam')}</label>
            <video id="runningcam" class="squares" autoplay></video>
            <canvas style="display:none;"></canvas>
            
            <a 
                id="shoot" 
-                class="button icon preview color green" 
+                class="button color green" 
                onclick="return false;">
-                {$c->__('avatar.cheese')}
+                <i class="fa fa-smile-o"></i> {$c->__('avatar.cheese')}
            </a>
            <a
                id="capture" 
-                class="button icon image color purple" 
+                class="button color purple" 
                onclick="
                    showVideo();
                    return false;">
-                {$c->__('avatar.snapshot')}
+                <i class="fa fa-smile-o"></i> {$c->__('avatar.snapshot')}
            </a>
        </div>
    </fieldset>
@ -39,8 +39,7 @@
            movim_button_save('#avatarvalidate');
            this.value = '{$c->t('Submitting')}'; 
            this.className='button color orange icon loading inactive';" 
-        class="button icon color green yes"
+        class="button color green oppose"
        id="avatarvalidate"
-        style="float: right;"
-        >{$c->__('button.submit')}</a>
+        ><i class="fa fa-check"></i> {$c->__('button.submit')}</a>
 </form>
--- a/app/widgets/Bookmark/_bookmark_list.tpl
+++ b/app/widgets/Bookmark/_bookmark_list.tpl
@ -1,4 +1,4 @@
-<h2>{$c->__('title.conferences')}</h2>
+<h2><i class="fa fa-users"></i> {$c->__('title.conferences')}</h2>
 <ul>
    {loop="$conferences"}
        <li>
@ -8,11 +8,11 @@
    {/loop}
 </ul>

-<h2>{$c->__('title.groups')}</h2>
+<h2><i class="fa fa-bookmark-o"></i> {$c->__('title.groups')}</h2>
 {loop="$subscriptions"}
    {if="$c->checkNewServer($value)"}
        <a href="{$c->route('server', $value->server)}">
-            <h3>{$value->server}</h3>
+            <h3><i class="fa fa-sitemap"></i> {$value->server}</h3>
        </a>
    {/if}
    <li>
--- a/app/widgets/Bookmark/bookmark.tpl
+++ b/app/widgets/Bookmark/bookmark.tpl
@ -6,24 +6,28 @@

 <!--<h2>{$c->t('Bookmarks')}</h2>-->

-<div id="bookmarks">
+<div id="bookmarks" class="paddedtop">
    {$preparebookmark}
 </div>
-<br />
-<a class="button black alone icon gear"
-   href="{$subscriptionconfig}"
-   title="{$c->t('Configure')}"></a>

-<a class="button color blue icon users alone merged right" 
-   style="float: right;"
-   title="{$c->t('Add a new Chat Room')}"
-   onclick="movim_toggle_display('#bookmarkmucadd')"></a>
-<!--<a class="button color icon link alone merged" 
-   style="float: right;"
-   title="{$c->t('Add a new URL')}"
-   onclick="movim_toggle_display('#bookmarkurladd')"></a>-->
-<a class="button black icon alone refresh merged left" 
-   style="float: right;"
-   title="{$c->t('Refresh')}"
-   onclick="{$getbookmark}"></a>
-<br />
+<div class="padded">
+    <a class="button black alone"
+       href="{$subscriptionconfig}"
+       title="{$c->t('Configure')}">
+        <i class="fa fa-gear"></i> 
+    </a>
+    <a class="button color blue alone merged right oppose" 
+       title="{$c->t('Add a new Chat Room')}"
+       onclick="movim_toggle_display('#bookmarkmucadd')">
+        <i class="fa fa-comments"></i> 
+    </a>
+    <!--<a class="button color icon link alone merged" 
+       style="float: right;"
+       title="{$c->t('Add a new URL')}"
+       onclick="movim_toggle_display('#bookmarkurladd')"></a>-->
+    <a class="button black alone merged left oppose" 
+       title="{$c->t('Refresh')}"
+       onclick="{$getbookmark}">
+        <i class="fa fa-refresh"></i> 
+    </a>
+</div>
--- a/app/widgets/Chat/chat.css
+++ b/app/widgets/Chat/chat.css
@ -12,7 +12,7 @@
 }

 #chats .filler {
-    width: 200px;
+    width: 15rem;
    height: 0;
    background-color: red;
    display: inline-block;
--- a/app/widgets/Config/config.tpl
+++ b/app/widgets/Config/config.tpl
@ -1,15 +1,14 @@
 <div class="tabelem padded" title="{$c->__('page.configuration')}" id="config" >
    <a 
-        class="button color orange icon user"
-        href="{$c->route('nodeconfig', array($me,'urn:xmpp:microblog:0'))}" 
-        style="float: right;">
-        {$c->__('config.feed_configuration')}
+        class="button color orange oppose"
+        href="{$c->route('nodeconfig', array($me,'urn:xmpp:microblog:0'))}" >
+        <i class="fa fa-user"></i> {$c->__('config.feed_configuration')}
    </a>
    <form enctype="multipart/form-data" method="post" action="index.php" name="general">
        <fieldset>
-            <legend>{$c->__('config.general')}</legend>
+            <legend><i class="fa fa-sliders"></i> {$c->__('config.general')}</legend>
            <div class="element">
-                <label for="language">{$c->__('config.language')}</label>
+                <label for="language"><i class="fa fa-language"></i> {$c->__('config.language')}</label>
                <div class="select">
                    <select name="language" id="language">
                        <option value="en">English (default)</option>
@ -35,7 +34,7 @@
        <fieldset>
            <legend>{$c->__('config.appearence')}</legend>
            <div class="element">
-                <label for="color">{$c->__('config.background_color')}</label> 
+                <label for="color"><i class="fa fa-adjust"></i> {$c->__('config.background_color')}</label> 
                <a 
                    type="button" 
                    onclick="
@ -60,7 +59,7 @@
            </div>
            
            <div class="element">
-                <label for="size">{$c->__('config.font_size')}</label>
+                <label for="size"><i class="fa fa-font"></i> {$c->__('config.font_size')}</label>
                <a 
                    type="button" 
                    onclick="
@ -104,69 +103,6 @@
                </span>
            </div>
            
-            <div class="element large">
-                <label for="pattern">{$c->__('button.reset')}</label>
-                
-                <input type="radio" name="pattern" id="argyle" value="argyle"/>
-                <label for="argyle"><span></span>
-                    <div class="preview argyle"
-                        style="background-color: #6d695c;"></div>
-                </label>
-                
-                <input type="radio" name="pattern" id="default" value="default"/>
-                <label for="default"><span></span>
-                    <div class="preview default"
-                        style="background-color: #082D50;;"></div>
-                </label>
-                
-                <input type="radio" name="pattern" id="tableclothe" value="tableclothe"/>
-                <label for="tableclothe"><span></span>
-                    <div class="preview tableclothe"
-                        style="background-color: rgba(200, 0, 0, 1);"></div>
-                </label>
-                
-                <input type="radio" name="pattern" id="blueprint" value="blueprint"/>
-                <label for="blueprint"><span></span>
-                    <div class="preview blueprint"
-                        style="background-color:#269;"></div>
-                </label>
-                
-                <input type="radio" name="pattern" id="cicada" value="cicada"/>
-                <label for="cicada"><span></span>
-                    <div class="preview cicada"
-                        style="background-color: #026873;"></div>
-                </label>
-                
-                <input type="radio" name="pattern" id="stripes" value="stripes"/>
-                <label for="stripes"><span></span>
-                    <div class="preview stripes"
-                        style="background-color: orange;"></div>
-                </label>
-                
-                <input type="radio" name="pattern" id="stars" value="stars"/>
-                <label for="stars"><span></span>
-                    <div class="preview stars"
-                        style="background-color:black; background-size: 100px 100px;"></div>
-                </label>
-                
-                <input type="radio" name="pattern" id="paper" value="paper"/>
-                <label for="paper"><span></span>
-                    <div class="preview paper"
-                        style="background-color: #23343E;"></div>
-                </label>
-                
-                <input type="radio" name="pattern" id="tartan" value="tartan"/>
-                <label for="tartan"><span></span>
-                    <div class="preview tartan"
-                        style="background-color: hsl(2, 57%, 40%);"></div>
-                </label>
-                
-                <input type="radio" name="pattern" id="empty" value=""/>
-                <label for="empty"><span></span>
-                    <div class="preview empty"
-                        style="background-color: white;"></div>
-                </label>
-            </div>
        </fieldset>
        <br />
        
@ -180,9 +116,8 @@
        <a 
            onclick="{$submit}" 
            type="button" 
-            class="button icon yes color green" 
-            style="float: right;">
-            {$c->__('button.submit')}
+            class="button color green oppose" >
+            <i class="fa fa-check"></i> {$c->__('button.submit')}
        </a>
        <div class="clear"></div>
    </form>
--- a/app/widgets/ConfigData/configdata.tpl
+++ b/app/widgets/ConfigData/configdata.tpl
@ -1,20 +1,22 @@
 <div class="tabelem padded" title="{$c->__('title')}" id="configdata" >
    <form enctype="multipart/form-data" method="post" action="index.php" name="general">
        <fieldset>
-            <legend>{$c->__('title.cache')}</legend>
+            <legend><i class="fa fa-database"></i> {$c->__('title.contacts')} - {$stats.rosterlink}</legend>
            <div class="clear"></div>
+            <br />
            <div class="element thin">
-                <label for="name">{$c->__('title.contacts')} - {$stats.rosterlink}</label><br />
                <a 
                    type="button" 
-                    class="button icon color red back"
-                    onclick="{$clearrosterlink}">{$c->__('button.clear')}</a>
+                    class="button color red"
+                    onclick="{$clearrosterlink}">
+                    <i class="fa fa-trash-o"></i> {$c->__('button.clear')}
+                </a>
            </div>
        </fieldset>

    
        <fieldset>
-            <legend>{$c->__('title.posts')} - {$stats.post}</legend>
+            <legend><i class="fa fa-pencil"></i> {$c->__('title.posts')} - {$stats.post}</legend>
            <div class="clear"></div>
            <ul class="stats">
                {loop="$pstats"}
@ -32,13 +34,15 @@
                <a 
                    type="button" 
                    name="email" 
-                    class="button icon color red back"
-                    onclick="{$clearpost}">{$c->__('button.clear')}</a>
+                    class="button color red"
+                    onclick="{$clearpost}">
+                    <i class="fa fa-trash-o"></i> {$c->__('button.clear')}
+                </a>
            </div>
        </fieldset>
        
        <fieldset>
-            <legend>{$c->__('title.messages')} - {$stats.message}</legend>
+            <legend><i class="fa fa-comment"></i> {$c->__('title.messages')} - {$stats.message}</legend>
            <div class="clear"></div>
            <ul class="stats">
                {loop="$mstats"}
@ -56,8 +60,10 @@
                <a 
                    type="button" 
                    name="email" 
-                    class="button icon color red back"
-                    onclick="{$clearmessage}">{$c->__('button.clear')}</a>
+                    class="button color red"
+                    onclick="{$clearmessage}">
+                    <i class="fa fa-trash-o"></i> {$c->__('button.clear')}
+                </a>
            </div>
        </fieldset>
    </form>
--- a/app/widgets/Connection/connection.css
+++ b/app/widgets/Connection/connection.css
@ -6,8 +6,6 @@
    vertical-align: middle;

    text-overflow: ellipsis;
-    margin: -1em;
-    padding-bottom: 1em;
 }

 #connection span#countdown {
--- a/app/widgets/ContactAction/ContactAction.php
+++ b/app/widgets/ContactAction/ContactAction.php
@ -64,7 +64,6 @@ class ContactAction extends WidgetCommon
        if(isset($c)) {            
            // Chat button
            if($c->jid != $this->user->getLogin()) {
-            
                $presences = getPresences();
                
                $html .='<h2>'.$this->__('title').'</h2>';
@ -74,27 +73,25 @@ class ContactAction extends WidgetCommon
                    2 => 'yellow',
                    3 => 'red', 
                    4 => 'purple'
-                        );
+                );

-                if(isset($c->presence) && !in_array($c->presence, array(5, 6))) {
+                if($c->value && !in_array((int)$c->value, array(5, 6))) {
                    $html .= '
                        <a
-                            class="button color '.$ptoc[$c->presence].' icon chat"
-                            style="float: left;"
+                            class="button color '.$ptoc[(int)$c->value].'"
                            id="friendchat"
                            onclick="'.$this->genCallWidget("Chat","ajaxOpenTalk", "'".$c->jid."'").'"
                        >
-                            '.$presences[$c->presence].' - '.$this->__('chat').'
+                            <i class="fa fa-comment"></i> '.$presences[(int)$c->value].' - '.$this->__('chat').'
                        </a>';
                }
            }
            
-            $html .= '<div style="clear: both;"></div>';
+            $html .= '<div style="clear: both;"></div><br />';
            
            $html .='
            <a
-                class="button icon rm black"
-                style="margin: 1em 0px; display: block;"
+                class="button black"
                id="friendremoveask"
                onclick="
                    document.querySelector(\'#friendremoveyes\').style.display = \'block\';
@ -102,16 +99,16 @@ class ContactAction extends WidgetCommon
                    this.style.display = \'none\'
                "
            >
-                '.t('Remove this contact').'
+                <i class="fa fa-minus"></i> '.t('Remove this contact').'
            </a>

            <a
-                class="button color green icon yes merged left';
+                class="button color green merged left';
            if(!isset($c->presence) || $c->presence == 5)
                $html .=' left';
            $html .= '"
                id="friendremoveyes"
-                style="margin: 1em 0px; float: left; display: none;"
+                style="float: left; display: none;"
                onclick="
                    setTimeout(function() {'.
                        $this->genCallAjax("ajaxRemoveContact", "'".$_GET['f']."'").
@ -119,12 +116,12 @@ class ContactAction extends WidgetCommon
                    $this->genCallAjax("ajaxUnsubscribeContact", "'".$_GET['f']."'").
                'this.className=\'button color green icon loading merged left\'; setTimeout(function() {location.reload(false)}, 2000);"
            >
-                '.__('button.yes').'
+                <i class="fa fa-check"></i> '.__('button.yes').'
            </a>

            <a
-                class="button color red icon no merged right"
-                style="margin: 1em 0px; float: left; display: none;"
+                class="button color red merged right"
+                style="float: left; display: none;"
                id="friendremoveno"
                onclick="
                    document.querySelector(\'#friendremoveask\').style.display = \'block\';
@ -132,15 +129,14 @@ class ContactAction extends WidgetCommon
                    this.style.display = \'none\'
                "
            >
-                '.__('button.no').'
+                <i class="fa fa-times"></i> '.__('button.no').'
            </a>';
        } elseif($_GET['f'] != $this->user->getLogin()) {
-                            
            $html .='<h2>'.$this->__('actions').'</h2>';
            
            $html .='
            <a
-                class="button color purple icon add"
+                class="button color purple"
                onclick="
                    setTimeout(function() {'.
                        $this->genCallAjax("ajaxAddContact", "'".$_GET['f']."'").
@ -148,14 +144,10 @@ class ContactAction extends WidgetCommon
                $this->genCallAjax("ajaxSubscribeContact", "'".$_GET['f']."'").
                'this.className=\'button color purple icon loading merged left\'; setTimeout(function() {location.reload(false)}, 3000);"
            >
-                '.$this->__('invite').'
+                <i class="fa fa-plus"></i> '.$this->__('invite').'
            </a>';
        }
        
        return $html;
    }
-    
-    function build() {
-        echo $this->prepareContactInfo();
-    }
 }
--- a/app/widgets/ContactAction/contactaction.tpl
+++ b/app/widgets/ContactAction/contactaction.tpl
@ -0,0 +1,3 @@
+<div class="paddedtopbottom" id="contactaction_widget">
+    {$c->prepareContactInfo()}
+</div>
--- a/app/widgets/ContactInfo/contactinfo.tpl
+++ b/app/widgets/ContactInfo/contactinfo.tpl
@ -1,3 +1,3 @@
-<div id="contactinfo">
+<div id="contactinfo" class="paddedtop">
    {$c->prepareContactInfo($_GET['f'])}
 </div>  
--- a/app/widgets/ContactManage/_contact_manage_form.tpl
+++ b/app/widgets/ContactManage/_contact_manage_form.tpl
@ -28,6 +28,8 @@
    
    <a 
        name="submit" 
-        class="button black icon yes" 
-        onclick="{$submit} this.style.display = 'none';">{$c->__('button.save')}</a>
+        class="button black" 
+        onclick="{$submit} this.style.display = 'none';">
+        <i class="fa fa-check"></i> {$c->__('button.save')}
+    </a>
 </form>
--- a/app/widgets/ContactManage/contactmanage.tpl
+++ b/app/widgets/ContactManage/contactmanage.tpl
@ -1,5 +1,4 @@
-<div class="clear"></div>
-<div id="contactmanage">
+<div id="contactmanage" class="paddedtop">
    {if="$ok"}
        {$contact}
    {/if}
--- a/app/widgets/ContactPubsubSubscription/contactpubsubsubscription.tpl
+++ b/app/widgets/ContactPubsubSubscription/contactpubsubsubscription.tpl
@ -1,6 +1,6 @@
 <div class="tabelem" title="{$c->__('title')}" id="groupsubscribedlistfromfriend">
    <div class="protect red" title="{function="getFlagTitle("red")"}"></div>
-    <h1>{$c->__('title')}</h1>
+    <h1 class="paddedtopbottom">{$c->__('title')}</h1>
    <script type="text/javascript">
        {$refresh}
    </script>
--- a/app/widgets/ContactSummary/ContactSummary.php
+++ b/app/widgets/ContactSummary/ContactSummary.php
@ -33,11 +33,11 @@ class ContactSummary extends WidgetCommon
        $cd = new \Modl\ContactDAO();
        
        if($_GET['f'] == $this->user->getLogin()) {
-            $contact = $cd->get($this->user->getLogin());
+            $contact = $cd->getRosterItem($this->user->getLogin());
        }

        if(!isset($contact)) {
-            $contact = $cd->get($_GET['f']);
+            $contact = $cd->getRosterItem($_GET['f']);
        }
        
        if(isset($contact)) {
@ -66,29 +66,26 @@ class ContactSummary extends WidgetCommon
    
    function prepareContactSummary($contact)
    {
-        $gender = getGender();
-        $marital = getMarital();
-
        // Contact avatar
        $html = '
-            <img class="avatar" src="'.$contact->getPhoto('l').'"/>
+            <a
+                class="avatar"
+                style="background-image: url('.$contact->getPhoto('l').');"
+                href="'.Route::urlize('friend',$contact->jid).'">
+            </a>
            ';
            
        $presencetxt = getPresencesTxt();
            
        // Contact general infos
-        if(isset($contact->presence))
-            $html .= '
-                <h1 class="'.$presencetxt[$contact->presence].'">'.$contact->getTrueName().'</h1>';
-        else
-            $html .= '<h1>'.$contact->getTrueName().'</h1>';
+        $html .= '<h1 class="paddedbottom">'.$contact->getTrueName().'</h1>';
                
        if($this->testIsSet($contact->url) && filter_var($contact->url, FILTER_VALIDATE_URL)) 
-            $html .= '<a target="_blank" href="'.$contact->url.'">'.$contact->url.'</a>';
+            $html .= '<a target="_blank" class="paddedtop" href="'.$contact->url.'">'.$contact->url.'</a>';
          
-        if(isset($contact->status)) {
+        if($contact->status) {
            $html .= '
-                <div class="textbubble">
+                <div class="paddedbottom">
                    '.prepareString($contact->status).'
                </div>'; 
        }
--- a/app/widgets/ContactSummary/contactsummary.css
+++ b/app/widgets/ContactSummary/contactsummary.css
@ -1,28 +1,18 @@
 #contactsummary {
    background-color: rgba(20, 20, 20, 0.5);
-    margin: -1em;
-    padding: 1em;
    line-height: 1.5em;
+    padding-bottom: 1rem;
 }

 #contactsummary h1 {
    color: white;
    line-height: 1.5em;
-    padding: 0px;
-
 }

-#contactsummary img.avatar {
-    width: 200px;
-    height: 200px;
-    display: block;
-    margin: -1em;
-    margin-bottom: 1em;
-}

-#contactsummary .textbubble {
-    margin: -1em;
-    margin-top: 1em;
-    background-color: rgba(20, 20, 20, 0.7);
-    padding: 1em;
+#contactsummary a.avatar {
+    width: 100%;
+    padding-bottom: 100%;
+    display: block;
+    background-size: 100%;
 }
--- a/app/widgets/Discover/discover.tpl
+++ b/app/widgets/Discover/discover.tpl
@ -1,5 +1,5 @@
 <div id="discover">
-    <h1>{$c->__('last')}</h1>
+    <h1 class="paddedtopbottom">{$c->__('last')}</h1>

    <ul class="list paddedtop">
    {loop="$users"}
--- a/app/widgets/Explore/_explore_groups.tpl
+++ b/app/widgets/Explore/_explore_groups.tpl
@ -3,7 +3,7 @@
        <a href="{$c->route('server', $value->server)}">
            <span class="tag orange">{$c->__('groups')}</span>
            <span class="tag">{$value->number}</span>
-            <span class="content">{$value->server}</span>
+            <span class="content"><i class="fa fa-sitemap"></i>{$value->server}</span>
        </a>
    </li>
 {/loop}
--- a/app/widgets/Explore/explore.tpl
+++ b/app/widgets/Explore/explore.tpl
@ -1,6 +1,6 @@
 <div id="serverresult" class="padded">
    <a class="button color purple oppose icon search" href="{$myserver}">{$c->__('discover_my_server')}</a>
-    <h2>{$c->__('discussion_servers')}</h2>
+    <h2><i class="fa fa-comments-o"></i> {$c->__('discussion_servers')}</h2>
    <ul class="list">
        {$servers}
    </ul>
@ -9,7 +9,7 @@
 <div class="clear"></div>

 <div class="padded">
-    <h2>{$c->__('last_registered')}</h2>
+    <h2><i class="fa fa-clock-o"></i> {$c->__('last_registered')}</h2>

    <ul class="list">
    {loop="$users"}
--- a/app/widgets/Feed/Feed.php
+++ b/app/widgets/Feed/Feed.php
@ -141,8 +141,8 @@ class Feed extends WidgetCommon {
                <div class="block large">
                    <div 
                        class="older" 
-                        onclick="'.$this->genCallAjax($function, "'".$next."'").'; this.parentNode.style.display = \'none\'">'.
-                            __('post.older').'
+                        onclick="'.$this->genCallAjax($function, "'".$next."'").'; this.parentNode.style.display = \'none\'">
+                        <i class="fa fa-history"></i> '. __('post.older').'
                    </div>
                </div>';
        } else {
--- a/app/widgets/Feed/feed.tpl
+++ b/app/widgets/Feed/feed.tpl
@ -3,28 +3,26 @@
    {$c->prepareHead()}
    </div>

-    <div class="posthead">
-                    
+    <div class="posthead paddedbottom">
        <a 
-            class="button color merged left icon blog" 
+            class="button color merged left" 
            href="{$blog_url}"
            target="_blank">
-            {$c->__('page.blog')}
+            <i class="fa fa-pencil"></i> {$c->__('page.blog')}
        </a><a 
-            class="button color orange merged right icon feed" 
+            class="button color orange merged right" 
            href="{$feed_url}"
            target="_blank">
-            {$c->__('page.feed')} (Atom)
+            <i class="fa fa-rss"></i> {$c->__('page.feed')} (Atom)
        </a>

        <a 
-            class="button color purple icon user oppose" 
+            class="button color purple oppose" 
            href="{$friend_url}">
-            {$c->__('my_posts')}
+            <i class="fa fa-user"></i> {$c->__('my_posts')}
        </a>
    </div>
    
-    
    <div id="feedcontent">
        <div id="feedposts">
            {$feeds}
--- a/app/widgets/Help/help.tpl
+++ b/app/widgets/Help/help.tpl
@ -1,4 +1,5 @@
 <div class="tabelem paddedtop" title="{$c->__('page.help')}" id="help">
+<h1><i class="fa fa-life-ring"></i> {$c->__('page.help')}</h1>
    
 <h2>{$c->__('what.title')}</h2>

--- a/app/widgets/Hot/hot.tpl
+++ b/app/widgets/Hot/hot.tpl
@ -1,5 +1,5 @@
 <div class="paddedtop">
-    <h2>{$c->__('explore.hot')}</h2>
+    <h2><i class="fa fa-paper-plane-o"></i> {$c->__('explore.hot')}</h2>

    <ul class="list">
    {loop="$nodes"}
--- a/app/widgets/Location/Location.php
+++ b/app/widgets/Location/Location.php
@ -97,16 +97,17 @@ class Location extends WidgetBase
                <div id="mapdiv" style="width: auto; height: 250px; display: none;"></div>
                <div class="clear"></div>
                <a 
-                    class="button color green icon geo" 
+                    class="button color green" 
                    style="margin-top: 1em;"
-                    onclick="getMyPosition(); this.style.display = \'none\';">'.
-                    t('Update my position').'
+                    onclick="getMyPosition(); this.style.display = \'none\';">
+                    <i class="fa fa-compass"></i> '.t('Update my position').'
                </a>
                <a 
                    id="mypossubmit" 
                    style="display: none; margin-top: 1em; float: right;"
-                    class="button color green icon yes merged left" 
-                    onclick="'.$submit.' hidePositionChoice();">'.t('Accept').'</a>
+                    class="button color green merged left" 
+                    onclick="'.$submit.' hidePositionChoice();">
+                    <i class="fa fa-check"></i> '.t('Accept').'</a>
            </div>';
        
        return $html;
--- a/app/widgets/Login/login.tpl
+++ b/app/widgets/Login/login.tpl
@ -25,7 +25,7 @@
                    type="submit"
                    data-loading="{$c->__('button.connecting')}"
                    value="{$c->__('button.come_in')}"
-                    class="button color green icon yes"/> 
+                    class="button color green"/> 
            </div>
            <div class="clear"></div>

@ -33,8 +33,8 @@
            <div class="clear"></div>

            <p class="create">
-                <a class="button color transparent oppose icon user" href="{$c->route('account')}">
-                    {$c->__('form.create_one')}
+                <a class="button color transparent oppose" href="{$c->route('account')}">
+                    <i class="fa fa-user"></i> {$c->__('form.create_one')}
                </a>
                <span>{$c->__('form.no_account')}</span>
            </p>
--- a/app/widgets/MediaUpload/mediaupload.tpl
+++ b/app/widgets/MediaUpload/mediaupload.tpl
@ -3,7 +3,7 @@
        <form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php">
            <fieldset>
                <div class="element">
-                    <label for="image_file">{$c->__('upload.info')}</label>
+                    <label for="image_file"><i class="fa fa-file-image-o"></i> {$c->__('upload.info')}</label>
                    <input type="file" name="image_file" id="image_file" onchange="fileSelected();" />
                </div>

@ -34,8 +34,8 @@
            </fieldset>

            <div class="clear"></div>
-            <a id="uploadbutton" class="button icon color green upload" onclick="startUploading()" />
-                {$c->__('button.upload')}
+            <a id="uploadbutton" class="button color green" onclick="startUploading()" />
+                <i class="fa fa-upload"></i> {$c->__('button.upload')}
            </a>
                
            <div class="message info" id="error">
--- a/app/widgets/News/News.php
+++ b/app/widgets/News/News.php
@ -30,8 +30,8 @@ class News extends WidgetCommon {
                <div class="block large">
                    <div 
                        class="older" 
-                        onclick="'.$this->genCallAjax($function, "'".$next."'").'; this.parentNode.style.display = \'none\'">'.
-                            __('post.older').'
+                        onclick="'.$this->genCallAjax($function, "'".$next."'").'; this.parentNode.style.display = \'none\'">
+                        <i class="fa fa-history"></i> '.__('post.older').'
                    </div>
                </div>';
        }   
--- a/app/widgets/Node/Node.php
+++ b/app/widgets/Node/Node.php
@ -199,8 +199,8 @@ class Node extends WidgetCommon
                <div class="block large">
                    <div
                        class="older"
-                        onclick="'.$this->genCallAjax($function, "'".$serverid."'", "'".$groupid."'", "'".$next."'").'; this.parentNode.style.display = \'none\'">'.
-                            t('Get older posts').'
+                        onclick="'.$this->genCallAjax($function, "'".$serverid."'", "'".$groupid."'", "'".$next."'").'; this.parentNode.style.display = \'none\'">
+                        <i class="fa fa-history"></i> '. __('post.older') .'
                    </div>
                </div>';
        }   
--- a/app/widgets/Node/_node_content.tpl
+++ b/app/widgets/Node/_node_content.tpl
@ -1,35 +1,37 @@
-<div class="posthead">
+<div class="posthead paddedtopbottom">
    {if="$subscribed == true"}  
        <a
            href="#" 
-            class="button color icon back"
+            class="button color"
            onclick="movim_toggle_display('#groupunsubscribe')">
-            {$c->__('node.unsubscribe')}
+            <i class="fa fa-arrow-left"></i> {$c->__('node.unsubscribe')}
        </a>
    {else}
        <a 
            href="#" 
-            class="button color green icon next"
+            class="button color green"
            onclick="movim_toggle_display('#groupsubscribe')">
-            {$c->__('node.subscribe')}
+            <i class="fa fa-arrow-right"></i> {$c->__('node.subscribe')}
        </a>
    {/if}
    <a 
-        class="button color icon blog merged left" 
+        class="button color merged left" 
        href="{$c->route('blog',array($serverid,$groupid))}"
        target="_blank"
    >
-        {$c->__('page.blog')}
+        <i class="fa fa-pencil"></i> {$c->__('page.blog')}
    </a><a 
-        class="button color orange icon alone feed merged right" 
+        class="button color orange alone merged right" 
        href="{$c->route('feed',array($serverid,$groupid))}"
        target="_blank"
-    ></a>
+    ><i class="fa fa-rss"></i></a>
    <a
        href="#"
        onclick="{$refresh}
        this.className='button icon color alone orange loading'; this.onclick=null;"
-        class="button color blue icon alone refresh"></a>
+        class="button color blue alone">
+        <i class="fa fa-refresh"></i>
+    </a>

    <!--
    <a 
@ -38,11 +40,11 @@
    >{$c->t('Get Subscription')}</a>
    -->
    <a 
-        class="button color icon user"
-        style="float: right; display: none;"
+        class="button color oppose"
+        style="display: none;"
        id="configbutton"
        href="{$c->route('nodeconfig', array($serverid,$groupid))}"
-    >{$c->__('page.configuration')}</a>
+    ><i class="fa fa-user"></i> {$c->__('page.configuration')}</a>
 </div>

 <div class="popup" id="groupsubscribe">
--- a/app/widgets/Node/_node_metadata.tpl
+++ b/app/widgets/Node/_node_metadata.tpl
@ -1,10 +1,10 @@
 <h1>{$title}</h1>
 {if="isset($creation)"}
-    <span class="key">{$c->t('created')}</span>
+    <span class="key"><i class="fa fa-clock-o"></i> </span>
    <span>{$creation}</span>
 {/if}
 {if="isset($creator)"}
-    <span class="key">{$c->t('by')}</span>
+    <span class="key"><i class="fa fa-user"></i> </span>
    <span>{$creator}</span>
 {/if}

--- a/app/widgets/Node/node.tpl
+++ b/app/widgets/Node/node.tpl
@ -1,10 +1,10 @@
 <div class="tabelem protect red" id="node" title="{$c->__('page.posts')}">
    <div class="breadcrumb">
        <a href="{$c->route('explore')}">
-            {$c->__('page.explore')}
+            <i class="fa fa-globe"></i> {$c->__('page.explore')}
        </a>
        <a href="{$c->route('server', $server)}">
-            {$server}
+            <i class="fa fa-sitemap"></i> {$server}
        </a>
        <a href="{$c->route('node', array($server, $node))}">
            {$title}
@ -13,10 +13,10 @@
    </div>
    <div class="clear"></div>
    
-    <div class="metadata" id="metadata">
+    <div class="metadata paddedtopbottom" id="metadata">
        {$metadata}
    </div>
-    
+    <br />
    <div id="formpublish" style="padding-bottom: 1em; display: none;">
        {$formpublish}
    </div>
--- a/app/widgets/NodeAffiliations/NodeAffiliations.php
+++ b/app/widgets/NodeAffiliations/NodeAffiliations.php
@ -67,10 +67,9 @@ class NodeAffiliations extends WidgetBase
            <hr />
            <br />
            <a 
-                class="button color green icon yes" 
-                style="float: right;"
+                class="button color green oppose" 
                onclick="'.$ok.'">
-                '.__('button.validate').'
+                <i class="fa fa-check"></i> '.__('button.validate').'
            </a></form><div class="clear"></div>';
        return $html;
    }
--- a/app/widgets/NodeAffiliations/nodeaffiliations.tpl
+++ b/app/widgets/NodeAffiliations/nodeaffiliations.tpl
@ -1,11 +1,11 @@
 {if="$pepfilter"}
 <div class="tabelem" title="{$c->__('affiliations.title')}" id="groupmemberlist">
-    <h1>{$c->__('affiliations.title')}</h1>
-    <div class="posthead">
+    <h1 class="paddedtopbottom"><i class="fa fa-key"></i> {$c->__('affiliations.title')}</h1>
+    <div class="posthead paddedtopbottom">
        <a 
-            class="button icon users color green" 
+            class="button color green" 
            onclick="{$getaffiliations} this.parentNode.style.display = 'none'">
-                {$c->__('affiliations.get')}
+            <i class="fa fa-key"></i> {$c->__('affiliations.get')}
        </a>
    </div>
    
--- a/app/widgets/NodeConfig/NodeConfig.php
+++ b/app/widgets/NodeConfig/NodeConfig.php
@ -75,15 +75,14 @@ class NodeConfig extends WidgetBase
                '
                <hr /><br />
                <a
-                        class="button color green icon yes" 
-                        style="float: right;"
+                        class="button color green oppose" 
                        onclick="
                            '.$submit.'
                            this.onclick=null;
                            this.style.display = \'none\'
                            "
                    >
-                        '.__('button.validate').'
+                        <i class="fa fa-check"></i> '.__('button.validate').'
                </a>
                <br />
                <br />
--- a/app/widgets/NodeConfig/nodeconfig.tpl
+++ b/app/widgets/NodeConfig/nodeconfig.tpl
@ -1,9 +1,9 @@
 <div class="breadcrumb">
    <a href="{$c->route('explore')}">
-        {$c->__('page.explore')}
+        <i class="fa fa-globe"></i> {$c->__('page.explore')}
    </a>
    <a href="{$c->route('server', $server)}">
-        {$server}
+        <i class="fa fa-sitemap"></i> {$server}
    </a>
    <a href="{$c->route('node', array($server, $node))}">
        {$name}
@ -11,19 +11,19 @@
    <a>{$c->__('page.configuration')}</a>
 </div>
 <div class="tabelem" title="{$c->t('Configuration')}" id="groupconfig">
-    <h1>{$c->__('page.configuration')}</h1>
+    <h1 class="paddedtopbottom"><i class="fa fa-sliders"></i> {$c->__('page.configuration')}</h1>
    
    <div id="groupconfiguration" class="paddedtop">
        <div id="handlingmessages"></div>
        <a 
-            class="button color green icon write" 
+            class="button color green" 
            onclick="{$group_config} this.style.display = 'none'">
-            {$c->__('group.config')}
+            <i class="fa fa-sliders"></i> {$c->__('group.config')}
        </a>
        <a 
-            class="button color red icon no" 
+            class="button color red" 
            onclick="{$group_delete} this.style.display = 'none'">
-            {$c->__('group.delete')}
+            <i class="fa fa-times"></i> {$c->__('group.delete')}
        </a>
    </div>
 </div>
--- a/app/widgets/NodeSubscriptions/NodeSubscriptions.php
+++ b/app/widgets/NodeSubscriptions/NodeSubscriptions.php
@ -62,10 +62,9 @@ class NodeSubscriptions extends WidgetBase
            <hr />
            <br />
            <a 
-                class="button color green icon yes" 
-                style="float: right;"
+                class="button color green oppose" 
                onclick="'.$ok.'">
-                '.__('button.validate').'
+                <i class="fa fa-check"></i> '.__('button.validate').'
            </a></form><div class="clear"></div>';
        return $html;
    }
--- a/app/widgets/NodeSubscriptions/nodesubscriptions.tpl
+++ b/app/widgets/NodeSubscriptions/nodesubscriptions.tpl
@ -1,11 +1,11 @@
 {if="$pepfilter"}
 <div id="subscriptions" class="tabelem" title="{$c->__('subscriptions.title')}">
-    <h1>{$c->__('subscriptions.info')}</h1>
-    <div class="posthead">
+    <h1 class="paddedtopbottom"><i class="fa fa-users"></i> {$c->__('subscriptions.info')}</h1>
+    <div class="posthead paddedtopbottom">
        <a 
-            class="button icon users color green" 
+            class="button color green" 
            onclick="{$getsubscriptions} this.parentNode.style.display = 'none'">
-            {$c->__('subscriptions.get')}
+            <i class="fa fa-users"></i> {$c->__('subscriptions.get')}
        </a>
    </div>
    
--- a/app/widgets/Presence/presence.css
+++ b/app/widgets/Presence/presence.css
@ -18,11 +18,14 @@
    background-position: 1em center;
    color: white;
    width: 7em;
+
+    transition: background 1s;
+    border-left: 1px solid rgba(0, 0, 0, 0.1);
 }

 #logouttab, #logoutlist {
    position: fixed;
-    right: 200px;
+    right: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
@ -32,7 +35,7 @@
 }

 #logouttab:hover {
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.3);
 }

 #logoutlist {
--- a/app/widgets/Profile/Profile.php
+++ b/app/widgets/Profile/Profile.php
@ -98,13 +98,15 @@ class Profile extends WidgetCommon

            // My avatar
            $html .= '
-            <a href="'.Route::urlize('friend',$this->user->getLogin()).'">
-                <img src="'.$me->getPhoto('l').'" alt="avatar"/>
+            <a
+                class="avatar"
+                style="background-image: url('.$me->getPhoto('l').');"
+                href="'.Route::urlize('friend',$this->user->getLogin()).'">
            </a>';
                
            // Contact general infos
            $html .= '
-                    <h1 style="text-decoration: none;">'.$me->getTrueName().'</h1>';
+                    <h1 class="padded" style="text-decoration: none;">'.$me->getTrueName().'</h1>';
                    
            $html .= '
                <div class="textbubble">
--- a/app/widgets/Profile/profile.css
+++ b/app/widgets/Profile/profile.css
@ -1,28 +1,21 @@
 #profile_widget {
    background-color: rgba(20, 20, 20, 0.5);
-    margin: -1em;
-    padding: 1em;
    line-height: 1.5em;
-    padding-bottom: 0em;
 }

 #profile_widget h1 {
    color: white;
    line-height: 1.5em;
-    padding: 0px;
-    margin: 0.5em 0em;
 }

-#profile_widget img {
-    width: 200px;
-    height: 200px;
+#profile_widget a.avatar {
+    width: 100%;
+    padding-bottom: 100%;
    display: block;
-    margin: -1em;
-    margin-bottom: 1em;
+    background-size: 100%;
 }

 #profile_widget .textbubble {
-    margin: 0em -1em;
    margin-top: 1em;
    background-color: rgba(20, 20, 20, 0.7);
    padding: 1em;
--- a/app/widgets/Roster/roster.css
+++ b/app/widgets/Roster/roster.css
@ -114,20 +114,8 @@
    text-shadow: 0px -0.1em 0px rgba(0, 0, 0, 0.5);
 }

-#roster ul#rosterlist h1 {
-    padding: 1em;
-    color: #777;
-    line-height: 1em;
-    font-size: 1em;
-
-    text-shadow: 0px -0.1em 0px rgba(0, 0, 0, 0.5);
-}
-
-#roster ul#rosterlist h1:hover {
-    cursor: pointer;
-}
-
 #roster ul#rosterlist h1:before {
+    cursor: pointer;
    content: "+";
    width: 20px;
    padding-right: 5px;
@ -141,9 +129,6 @@

 #roster ul#rosterlist ul.contact li img {
    max-height: 3em;
-}
-
-#roster ul#rosterlist ul.contact li img {
    float: left;
    width: 3em;
    height: 3em;
@ -260,11 +245,11 @@

 #rostermenu {
    position: fixed;
-    bottom: 0px;
-    right: 0px;
+    bottom: 0;
+    right: 0;
    display: block;
    background-color: rgba(36, 36, 36, 1);
-    width: 200px;
+    width: 15rem;
    pointer-events: auto;
    z-index: 3;
 }
--- a/app/widgets/ServerNodes/ServerNodes.php
+++ b/app/widgets/ServerNodes/ServerNodes.php
@ -52,9 +52,9 @@ class ServerNodes extends WidgetCommon
        if(!in_array($type, array('conference', 'muc', 'discussion', 'chat'))) {
            $head = '
                <a 
-                    class="button icon add color green" 
+                    class="button color green" 
                    onclick="movim_toggle_display(\'#groupCreation\')">
-                    '.t("Create a new group").'
+                    <i class="fa fa-plus"></i> '.t("Create a new group").'
                </a>';
                
            $html = '
--- a/app/widgets/ServerNodes/servernodes.tpl
+++ b/app/widgets/ServerNodes/servernodes.tpl
@ -1,20 +1,22 @@
 <div class="breadcrumb protect red ">
-    <a href="{$c->route('explore')}">{$c->__('page.explore')}</a>
+    <a href="{$c->route('explore')}">
+        <i class="fa fa-globe"></i> {$c->__('page.explore')}
+    </a>
    <a href="{$c->route('server', $_GET['s'])}">
-        {$_GET['s']}
+        <i class="fa fa-sitemap"></i> {$_GET['s']}
    </a>
    <a>{$c->__('topics')}</a>
 </div> 
-<div class="posthead " id="servernodeshead">
+<div class="posthead paddedtopbottom" id="servernodeshead">
    <a
        href="#"
        onclick="{$get_nodes}; 
            this.className='button icon loading color orange'; this.onclick=null;"
-        class="button icon refresh color">
-        {$c->__('button.refresh')}
+        class="button color">
+        <i class="fa fa-refresh"></i> {$c->__('button.refresh')}
    </a>
 </div>
-<div id="servernodes" class="tabelem padded" title="{$c->__('page.server')}">
+<div id="servernodes" class="tabelem paddedtop" title="{$c->__('page.server')}">
    <div id="newGroupForm"></div>
    <div id="servernodeslist">
        {$server}
--- a/app/widgets/Statistics/statistics.tpl
+++ b/app/widgets/Statistics/statistics.tpl
@ -1,4 +1,4 @@
-<div id="statistics" class="tabelem padded" title="{$c->__("statistics.title")}">
+<div id="statistics" class="tabelem paddedtop" title="{$c->__("statistics.title")}">
    <ul class="list">
        <li class="title">
            <a class="action">{$c->__('statistics.since')}</a>
--- a/app/widgets/Tabs/tabs.css
+++ b/app/widgets/Tabs/tabs.css
@ -1,9 +1,7 @@
-ul#navtabs {
+#navtabs {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
-    /*color: white;
-    background-color: transparent;*/
    text-align: center;
 }

@ -13,6 +11,8 @@ ul#navtabs {

    padding: 0em 2em;
    white-space: nowrap;
+
+    transition: background 0.5s;
 }
 #navtabs li a{
    display: block; 
@ -22,10 +22,6 @@ ul#navtabs {
    text-decoration: none;
 }

-.tabs {
-    clear: both;
-}
-
 #navtabs li:hover {
    background-color: rgba(0, 0, 0, 0.3);
 }
@ -42,10 +38,6 @@ ul#navtabs {
    position: relative;
 }

-.moving_block{
-    /*position: absolute;
-    top: 0px;*/
-}
 .fixed_block{ 
    background-color: white; 
    width: 880px;
--- a/app/widgets/Vcard4/_vcard4_form.tpl
+++ b/app/widgets/Vcard4/_vcard4_form.tpl
@ -1,6 +1,6 @@
 <form name="vcard4" id="vcard4form">
    <fieldset>
-        <legend>{$c->__('page.profile')}</legend>
+        <legend><i class="fa fa-user"></i> {$c->__('page.profile')}</legend>
        <div class="element">
            <label for="fn">{$c->__('vcard.name')}</label>
            <input type="text" name="fn" class="content" value="{$me->fn}">
@ -100,7 +100,7 @@
    </fieldset>

    <fieldset>
-        <legend>{$c->__('vcard.position_title')}</legend>
+        <legend><i class="fa fa-compass"></i> {$c->__('vcard.position_title')}</legend>
            
        <div class="element">
            <label for="url">{$c->__('vcard.locality')}</label>
@ -126,20 +126,20 @@
    </fieldset>

    <fieldset>
-        <legend>{$c->__('vcard.accounts_title')}</legend>
+        <legend><i class="fa fa-circle-thin"></i> {$c->__('vcard.accounts_title')}</legend>
        
        <div class="element">
-            <label for="twitter">{$c->__('vcard.twitter')}</label>
+            <label for="twitter"><i class="fa fa-twitter"></i> {$c->__('vcard.twitter')}</label>
            <input type="text" name="twitter" class="content" value="{$me->twitter}" placeholder="{$c->__('Nickname')}">
        </div>
        
        <div class="element">
-            <label for="skype">{$c->__('vcard.skype')}</label>
+            <label for="skype"><i class="fa fa-skype"></i> {$c->__('vcard.skype')}</label>
            <input type="text" name="skype" class="content" value="{$me->skype}" placeholder="{$c->__('Nickname')}">
        </div>
        
        <div class="element">
-            <label for="skype">{$c->__('vcard.yahoo')}</label>
+            <label for="skype"><i class="fa fa-yahoo"></i> {$c->__('vcard.yahoo')}</label>
            <input type="email" name="yahoo" class="content" value="{$me->yahoo}" placeholder="{$c->__('Yahoo Account')}">
        </div>
    </fieldset>
@ -151,18 +151,20 @@
                movim_button_save('#vcard4validate');
                this.value = '{$c->__('Submitting')}'; 
                this.className='button color orange icon loading merged right inactive';" 
-            class="button icon merged right color green yes" 
-            style="float: right;"
+            class="button merged right color green oppose" 
            id="vcard4validate"
-            >{$c->__('Submit')}</a>
+            >
+            <i class="fa fa-check"></i> {$c->__('Submit')}
+        </a>
        <a
            onclick="document.querySelector('#vcard4form').reset();"
-            class="button icon no merged left color orange"
-            style="float: right;">{$c->__('Reset')}</a>
+            class="button merged left color orange oppose">
+            <i class="fa fa-eraser"></i> {$c->__('Reset')}
+        </a>
    </fieldset> 

    <fieldset>
-        <legend>{$c->__('vcard.privacy_title')}</legend>
+        <legend><i class="fa fa-lock"></i> {$c->__('vcard.privacy_title')}</legend>
        <div class="element">
            <label>{$c->__('vcard.privacy_question')}</label>
            <div class="checkbox">
--- a/app/widgets/Wall/_wall_head.tpl
+++ b/app/widgets/Wall/_wall_head.tpl
@ -1,6 +1,6 @@
 {if="$start == -1"}
    {$map}
-    <div class="posthead spacetop">
+    <div class="posthead paddedbottom">
        <a 
            class="button color icon blog merged left" 
            href="{$c->route('blog',array($from, 'urn:xmpp:microblog:0'))}"
@ -35,7 +35,7 @@
        <div 
            class="older" 
            onclick="{$older} this.parentNode.style.display = 'none'">
-            {$c->__('post.older')}
+            <i class="fa fa-history"></i> {$c->__('post.older')}
        </div>
    </div>
 {/if}
--- a/app/widgets/WidgetCommon/WidgetCommon.php
+++ b/app/widgets/WidgetCommon/WidgetCommon.php
@ -489,7 +489,11 @@ class WidgetCommon extends WidgetBase {
                            com = this.parentNode.querySelectorAll(\'.comment\'); 
                            for(i = 0; i < com.length; i++) { com.item(i).style.display = \'block\';};
                            this.style.display = \'none\';">
-                        <a class="getcomments icon chat">'.__('post.comments_older').'</a>
+                        <div class="comments">
+                            <a class="getcomments">
+                                <i class="fa fa-history"></i> '.__('post.comments_older').'
+                            </a>
+                        </div>
                    </article>';
            $comcounter = $size - 3;
        }
@ -644,8 +648,8 @@ class WidgetCommon extends WidgetBase {
        $html = '
            <div class="comment">
                <a 
-                    class="getcomments icon chat" >'.
-                    __('post.no_comments').
+                    class="getcomments" >
+                    <i class="fa fa-comments-o"></i> '.__('post.no_comments').
                '</a>
            </div>';
        RPC::call('movim_fill', $parent.'comments', $html);
@ -655,8 +659,8 @@ class WidgetCommon extends WidgetBase {
        $html = '
            <div class="comment">
                <a 
-                    class="getcomments icon chat" >'.
-                    __('post.no_comments_stream').
+                    class="getcomments" >
+                    <i class="fa fa-comments-o"></i> '.__('post.no_comments_stream').
                '</a>
            </div>';
        RPC::call('movim_fill', $parent.'comments', $html);
--- a/app/widgets/WidgetCommon/_comments_toolbox.tpl
+++ b/app/widgets/WidgetCommon/_comments_toolbox.tpl
@ -1,15 +1,19 @@
 <div class="comments" id="{$post->nodeid}comments">
    {$comments}
    <a 
-        class="getcomments icon chat" 
-        onclick="{$getcomments} this.innerHTML = '{$c->__('post.comments_loading')}'"
-    >{$c->__('post.comments_get')}</a>
+        class="getcomments" 
+        onclick="{$getcomments} this.innerHTML = '<i class=\'fa fa-clock-o\'></i> {$c->__('post.comments_loading')}'"
+    >
+        <i class="fa fa-comments-o"></i> {$c->__('post.comments_get')}
+    </a>
 </div>
 <div class="comments">
-    <a class="addcomment icon chat"
+    <a class="addcomment"
        onclick="
        this.parentNode.querySelector('#commentsubmit').style.display = 'table'; 
-        this.style.display ='none'">{$c->__('post.comment_add')}</a>
+        this.style.display ='none'">
+        <i class="fa fa-comment-o"></i> {$c->__('post.comment_add')}
+    </a>
    <table id="commentsubmit">
        <tr>
            <td>
@ -27,9 +31,9 @@
                                {$publishcomment}
                                document.getElementById('{$post->nodeid}commentcontent').value = '';
                            }"
-                    class="button color green icon yes"
+                    class="button color green"
                >
-                    {$c->__('button.submit')}
+                    <i class="fa fa-check"></i> {$c->__('button.submit')}
                </a>
            </td>
        </tr>
--- a/app/widgets/WidgetCommon/_submit_form.tpl
+++ b/app/widgets/WidgetCommon/_submit_form.tpl
@ -67,34 +67,34 @@
                        onclick="{$publish_item}
                                document.querySelector('#postpublish').reset();
                                movim_textarea_autoheight(document.querySelector('#postpublishcontent'));"
-                        class="button icon color green icon yes">
-                        {$c->__('button.submit')}
+                        class="button color green">
+                        <i class="fa fa-envelope"></i> {$c->__('button.submit')}
                    </a>
                    <a 
-                        class="button icon color alone merged left images"
+                        class="button color alone merged left images"
                        style="float: left;"
                        title="{$c->__('page.gallery')}"
                        onclick="
                            movim_toggle_display('#galleryselect');
                            "
-                    ></a>
+                    ><i class="fa fa-picture-o"></i></a>
                    <a 
-                        class="button icon color alone merged left preview"
+                        class="button color alone merged left"
                        style="float: left;"
                        title="{$c->__('page.preview')}"
                        onclick="
                            movim_toggle_display('#postpreview');
                            {$post_preview}"
-                    ></a><a 
-                        class="button color icon alone help merged" 
+                    ><i class="fa fa-eye"></i></a><a 
+                        class="button color alone merged" 
                        style="float: left;"
                        href="http://daringfireball.net/projects/markdown/basics"
                        title="{$c->__('page.help')}"
                        target="_blank"
-                    ></a><a title="{$c->__('post.geolocalisation')}"
+                    ><i class="fa fa-life-ring"></i></a><a title="{$c->__('post.geolocalisation')}"
                        onclick="setPosition(document.querySelector('#latlonpos')); showPosition(document.querySelector('#latlonpos').value);"
                        style="float: left;"
-                        class="button icon color icon alone geo merged right"></a>
+                        class="button color alone merged right"><i class="fa fa-location-arrow"></i></a>
                    <span id="postpublishlocation"></span>

                </td>
--- a/themes/movim/css/animations.css
+++ b/themes/movim/css/animations.css
@ -8,6 +8,20 @@
            animation: fadeIn 1s ease-in-out, dropDown 1s ease-in-out;
 }

+@keyframes dropRight{
+    0%{
+        transform: translateX(10em);
+        opacity:0;
+    }
+    50%{
+        opacity:1;
+    }
+    100%{
+        transform: translateX(0);
+        opacity:1;
+    }
+}
+
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
@ -56,6 +70,8 @@
    100% { background-color: #3C7E91; }
 }

+
+
@media screen and (max-width: 1024px) {
 .fadeDown {
    -webkit-animation: none;
--- a/themes/movim/css/forms.css
+++ b/themes/movim/css/forms.css
@ -298,7 +298,7 @@ legend {
    margin-right: 0.5em;
 }

-.icon.alone:before {
+.button.alone:before {
    margin-right: 0;
 }

@ -318,6 +318,7 @@ legend {

 .button.black {
    border: 1px solid #555;
+    color: white;
 }

 .button.color {
--- a/themes/movim/css/mobile.css
+++ b/themes/movim/css/mobile.css
@ -21,8 +21,8 @@

 body {
    background-image: none;
-    margin: 0px;
-    padding: 0px;
+    margin: 0;
+    padding: 0;
    width: 100%;
    font-size: 16px;
    position: relative;
@ -59,7 +59,7 @@ h1 {

 #main {
    clear: both;
-    padding-right: 0px;
+    padding-right: 0;
    overflow-x: hidden;
    margin-top: 3em;
 }
@ -93,7 +93,7 @@ span.mobile {
 }
 */
 table#feedsubmitform {
-    margin: 0 0.5em;
+    margin: 0 0.5rem;
 }

 .element {
@ -105,15 +105,15 @@ table#feedsubmitform {
 }

 .posthead {
-    padding: 0.5em;
+    padding: 0.5rem;
 }

 .post {
-    padding: 0.5em;
+    padding: 0.5rem;
 }

 .post .avatar {
-    margin-right: 0.5em;
+    margin-right: 0.5rem;
 }

 .post .postbubble {
@ -146,7 +146,7 @@ table#feedsubmitform {
 }

 #loginpage {
-    margin: 0.5em !important;
+    margin: 0.5rem !important;
    margin-top: 20% ! important;
    background-position: center 0em !important;
 }
@ -161,7 +161,7 @@ table#feedsubmitform {

 #logouttab, #logoutlist {
    right: 0px !important;
-    width: 3em !important;
+    width: 3rem !important;
 }

 ul.thumb li {
@ -169,7 +169,7 @@ ul.thumb li {
 }

 #notifslist, #notifstab {
-    top: 3em !important;
+    top: 3rem !important;
 }

 #notifslist, #logoutlist {
@ -187,7 +187,7 @@ ul.thumb li {
 }

 #roster input[name=search] {
-    top: 3em !important;
+    top: 3rem !important;
 }

 .popup {
@ -211,25 +211,30 @@ ul.thumb li {

 #notifslist {
    margin: 0 !important;
-    margin-top: 3em !important;
+    margin-top: 3rem !important;
 }

 /* A default padding for some elements */
 .padded {
-    padding: 0.5em;
+    padding: 0.5rem;
 }

 .paddedtop {
-    padding: 0.5em;
-    padding-top: 0px;
+    padding: 0.5rem;
+    padding-top: 0;
+}
+
+.paddedbottom {
+    padding: 0.5rem;
+    padding-bottom: 0;
 }

 .paddedtopbottom {
-    padding: 0em 0.5em;
+    padding: 0rem 0.5rem;
 }

 .spacetop {
-    padding-top: 0.5em;
+    padding-top: 0.5rem;
 }

 /* Definition list */
@ -247,6 +252,10 @@ ul.list li span.tag.desc {
    display: none;
 }

+legend {
+    width: 100%;
+}
+
 }

@media screen and (max-width: 640px) {
--- a/themes/movim/css/nav.css
+++ b/themes/movim/css/nav.css
@ -37,34 +37,41 @@ nav .wrapper {

 .menu li a, .menu li label {
    display: inline-block;
-    line-height: 0em;
+    line-height: 0;
    padding: 1.5em;
    text-indent: 2em;
    color: white;
    text-decoration: none;

+    transition: background 1s;
+
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 1em center;
 }

 .menu li a.root, .menu li a.root.active {
-	width: 200px;
+	width: 12rem;
    color: transparent;
    background-image: url(../img/logo.svg);
    background-size: auto auto;
    background-position: center center;
    padding-left: 0;
    padding-right: 0;
+
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
 }

 .menu li a:hover, .menu li label:hover {
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.2);
    cursor: pointer;
 }

 .menu li a.active {
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: rgba(0, 0, 0, 0.3);
 }

 .menu li .discover,
--- a/themes/movim/css/posts.css
+++ b/themes/movim/css/posts.css
@ -7,7 +7,7 @@ article img {
    max-width: 100%;
 }

-article > * {
+article:not(.comment) > *:not(footer) {
    background-color: white;
 }

@ -46,12 +46,15 @@ article section {
 }

 article footer {
-    border-bottom: 1px solid #DDD;
-    padding-bottom: 1em;
+    border-bottom: 1px solid #D4D4D4;
+    border-left: 1px solid #F1F1F1;
+    border-right: 1px solid #EEE;
+    border-top: 1px solid #F2F2F2;
+    background-color: #F5F7FA;
 }

-article:nth-last-child(-n+2) footer {
-    border-bottom: none;
+article footer .comments {
+    padding: 0.5em;
 }

 article footer:after {
@ -90,12 +93,12 @@ article .spoiler:hover {
 article.comment > * {
    border-radius: 0;
 }
-
+/*
 article.comment:nth-child(odd) header,
 article.comment:nth-child(odd) section {
-    background-color: #FBFBFB;
+    background-color: #F5F7FA;
    line-height: 1.5em;
-}
+}*/

 article.comment header img {
    width: 2em;
@ -108,9 +111,7 @@ article.comment header span.date {
 .posthead {
    display: block;
    width: 100%;
-    padding: 0 1em;
-    padding-top: 1em;
-    
+
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
@ -134,7 +135,7 @@ article.comment header span.date {

 .getcomments,
 .addcomment {
-    line-height: 2.3em;
+    line-height: 1.7em;
 }

 .getcomments:hover,
@ -142,20 +143,6 @@ article.comment header span.date {
    cursor: pointer;
 }

-.getcomments:before,
-.addcomment:before {
-    content: "";
-    padding: 0.5em 1em;
-}
-
-.getcomments:before {
-    background-color: #FC8F12;
-}
-
-.addcomment:before {
-    background-color: #6FCC43;
-}
-
 article table#commentsubmit {
    border: 1px solid #DDD;
    border-spacing: 0px;
@ -179,7 +166,7 @@ article table#commentsubmit textarea {
 }

 article table#commentsubmit .commentsubmitrow {
-    background-color: #F3F3F3;
+    background-color: #F5F7FA;
    display: block;
 }

@ -188,8 +175,6 @@ article table#commentsubmit .commentsubmitrow td {
 }

 .metadata p {
-    padding: 0 1em;
-    margin-bottom: 1em;
    font-style:italic;
 }

@ -223,7 +208,7 @@ article .enclosures {
    -webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
    clear: both;
-    padding: 1em 0;
+    padding: 0.5em;
 }

 article .enclosures .enclosure,
@ -288,12 +273,12 @@ article span.group {
    float: right;
    margin-left: 1em;
    padding-right: 0.5em;
-    line-height: 2em;
+    line-height: 3em;
    max-width: 300px;

    background-size: 16px 16px;
    background-repeat: no-repeat;
-    background-position: 0 0.5em;
+    background-position: 0 1em;
    
    white-space: nowrap;  
    overflow: hidden;
--- a/themes/movim/css/style.css
+++ b/themes/movim/css/style.css
@ -53,8 +53,7 @@ body {

    margin: 0 auto;
    width: 100%;
-    /*max-width: 1280px;*/
-    padding-right: 200px;
+    padding-right: 15rem;
    
    background-color: #32434D;
    
@ -65,75 +64,6 @@ body {
    background-attachment:fixed;
 }

-/* Background pattern */
-.default {
-    background-image: radial-gradient(center
-     45deg, ellipse, rgba(255,255,255, 0.6) 0%, rgba(255,255,255,0) 100%);
-    background-image: -moz-radial-gradient(center
-     45deg, ellipse, rgba(255,255,255, 0.6) 0%, rgba(255,255,255,0) 100%);
-    background-image: -webkit-radial-gradient(50% 50%, ellipse, rgba(255,255,255, 0.6), rgba(255,255,255,0) );
-    background-image: -o-radial-gradient(50% 50%, ellipse, rgba(255,255,255, 0.6), rgba(255,255,255,0) );
-    
-    background-repeat: no-repeat;
-}
-
-.argyle {
-    background-image: url(../img/back/argyle.png);
-}
-
-.paper {
-    background-image: url(../img/back/paper.png);
-}
-
-.carbon {
-    background-size:16px 16px;
-}
-
-.blueprint {
-    background-image: 
-    linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px),
-    linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px),
-    linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px);
-    background-image: 
-    -webkit-linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px),
-    -webkit-linear-gradient(left, rgba(255,255,255,.5) 2px, transparent 2px),
-    -webkit-linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px),
-    -webkit-linear-gradient(left, rgba(255,255,255,.2) 1px, transparent 1px);
-    background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
-    background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
-}
-
-.tableclothe {
-    background-image: url(../img/back/tableclothe.png);
-}
-.cicada {
-    background-image: url(../img/back/cicada.png);
-}
-
-.stripes {
-    background-image: url(../img/back/stripes.png);
-}
-
-.stars {
-    background-image:
-    radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
-    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
-    radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
-    radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
-    background-image:
-    -webkit-radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
-    -webkit-radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
-    -webkit-radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
-    -webkit-radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
-    background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 
-    background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
-}
-
-.tartan {
-    background-image: url(../img/back/tartan.png);
-}
-
 /* A simple clear element*/
 .clear {
    clear: both;
@ -196,7 +126,6 @@ h1 {
    line-height: 2.5em;
    font-size: 1.5em;
    margin: 0px;
-    padding: 0 0.6em;
    vertical-align: bottom;
 }

@ -252,20 +181,34 @@ ul.clean li {

 /* A default padding for some elements */
 .padded {
-    padding: 1em;
+    padding: 1rem;
 }

 .paddedtop {
-    padding: 1em;
-    padding-top: 0px;
+    padding: 1rem;
+    padding-top: 0;
+}
+
+.paddedbottom {
+    padding: 1rem;
+    padding-bottom: 0;
 }

 .paddedtopbottom {
-    padding: 0em 1em;
+    padding: 0em 1rem;
 }

 .spacetop {
-    padding-top: 1em;
+    padding-top: 1rem;
+}
+
+/* Font awesome */
+.fa {
+    margin-right: 0.25em;
+}
+
+.button.alone .fa {
+    margin-right: 0;
 }

 /* The main parts of the page */
@ -297,10 +240,9 @@ ul.clean li {
    -webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
    float: left;
-    padding: 1em;
-    width: 200px;
+    width: 12rem;
    color: white;
-    top: 0px;
+    top: 0;
    overflow: hidden;
 }

@ -330,16 +272,15 @@ ul.clean li {
 #right
 {
    display: block;
-    width: 200px;
+    width: 15rem;
    position: fixed;
-    top: 0px;
-    right: 0px;
+    top: 0;
+    right: 0;
    padding-top: 0em;
    height: 100%;
    overflow: hidden;
    pointer-events:none;
    z-index: 2;
-    background-image: url(../img/paper.png);
 }

 #right:after {
@ -348,8 +289,8 @@ ul.clean li {
    content: "";
    display: block;
    position: absolute;
-    top: 0em;
-    left: 0em;
+    top: 0;
+    left: 0;
    width: 0.7em;
    height: 100%;
 }
@ -427,32 +368,6 @@ ul.clean li {
    cursor: pointer;
 }

-/* Filters */
-
-.filters {
-	float: right;
-    margin: 0px;
-    padding: 0px;
-    /*font-size: 1.2em;*/
-    margin-right: 1.5em;
-}
-
-.filters li {
-	display: inline-block;
-    padding: 0em 1.5em;
-    line-height: 2em;
-}
-
-.filters li:hover {
-    color: #333;
-	cursor: pointer;
-}
-
-.filters li.on {
-    font-weight: bold;
-    color: #333;
-}
-
 /* Table */
 table thead {
    font-weight: bold;
@ -566,15 +481,6 @@ ul.list li span.desc {
    text-decoration: none;
    width:  30%;
 }
-/*
-ul.list li span.desc:before  {
-    background: linear-gradient(to right, rgba(255,255,255,0), white);
-    display: block;
-    height: 2em;
-    content : " ";
-    width: 100%;
-    position: absolute;
-}*/

 ul.list li span.tag.red { background-color: #D92727; }
 ul.list li span.tag.blue { background-color: #0DB8B5; }
--- a/themes/movim/css/template.css
+++ b/themes/movim/css/template.css
@ -1,7 +1,7 @@
 .block {
    width: 50%;
    display: inline-block;
-    padding: 1em;
+    padding: 1rem;
    padding-right: 0;
    padding-bottom: 0;
    box-sizing: border-box;
@ -24,7 +24,7 @@
 .block:nth-of-type(even) {
    float: right;
    clear: right;
-    padding-right: 1em;
+    padding-right: 1rem;
 }

@media screen and (max-width: 1400px) {
@ -33,7 +33,7 @@
 }

 .block:nth-of-type(even) {
-    padding-right: 0.5em;
+    padding-right: 0.5rem;
 }

 }
@ -41,11 +41,11 @@
@media screen and (max-width: 1024px) {
 .block {
    width: 100%;
-    padding: 0.5em;
+    padding: 0.5rem;
    padding-bottom: 0;
 }

 .block:nth-of-type(even) {
-    padding-right: 0.5em;
+    padding-right: 0.5rem;
 }
 }
--- a/themes/movim/img/icons/button/arrow-left.svg
+++ b/themes/movim/img/icons/button/arrow-left.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M0 16l16 16v-10h16l0-12h-16v-10z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/arrow-right.svg
+++ b/themes/movim/img/icons/button/arrow-right.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M32 16l-16-16v10h-16l-0 12h16v10z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/bubbles.svg
+++ b/themes/movim/img/icons/button/bubbles.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="32" viewBox="0 0 36 32">
-	<path d="M34 28.161c0 1.422 0.813 2.653 2 3.256v0.498c-0.332 0.045-0.671 0.070-1.016 0.070-2.125 0-4.042-0.892-5.398-2.321-0.819 0.218-1.688 0.336-2.587 0.336-4.971 0-9-3.582-9-8 0-4.418 4.029-8 9-8 4.971 0 9 3.582 9 8 0 1.73-0.618 3.331-1.667 4.64-0.213 0.463-0.333 0.979-0.333 1.522zM16 0c8.702 0 15.781 5.644 15.995 12.672-1.537-0.685-3.237-1.047-4.995-1.047-2.986 0-5.807 1.045-7.942 2.943-2.214 1.968-3.433 4.607-3.433 7.432 0 1.396 0.298 2.747 0.867 3.993-0.163 0.004-0.327 0.007-0.492 0.007-0.849 0-1.682-0.054-2.495-0.158-3.437 3.437-7.539 4.053-11.505 4.144v-0.841c2.142-1.049 4-2.961 4-5.145 0-0.305-0.024-0.604-0.068-0.897-3.619-2.383-5.932-6.024-5.932-10.103 0-7.18 7.163-13 16-13z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/call.svg
+++ b/themes/movim/img/icons/button/call.svg
@ -1,65 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generated by IcoMoon.io -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   width="32"
-   height="32"
-   viewBox="0 0 32 32"
-   id="svg2"
-   inkscape:version="0.48.4 r9939"
-   sodipodi:docname="hang-up.svg">
-  <metadata
-     id="metadata10">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs8" />
-  <sodipodi:namedview
-     pagecolor="#000000"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="1"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1012"
-     id="namedview6"
-     showgrid="true"
-     inkscape:zoom="19.46"
-     inkscape:cx="16.001358"
-     inkscape:cy="14.42062"
-     inkscape:window-x="0"
-     inkscape:window-y="23"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2">
-    <inkscape:grid
-       type="xygrid"
-       id="grid2987"
-       empspacing="5"
-       visible="true"
-       enabled="true"
-       snapvisiblegridlinesonly="true" />
-  </sodipodi:namedview>
-  <path
-     d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z"
-     fill="#ffffff"
-     id="path4" />
-</svg>
--- a/themes/movim/img/icons/button/camera-off.svg
+++ b/themes/movim/img/icons/button/camera-off.svg
@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M25.333 26.667h-18.667c-2.205 0-4-1.795-4-4v-10.667c0-2.205 1.795-4 4-4h2.115l1.333-1.333c0.772-0.772 2.128-1.333 3.219-1.333h5.333c1.091 0 2.447 0.561 3.219 1.333l1.333 1.333h2.115c2.205 0 4 1.795 4 4v10.667c0 2.205-1.795 4-4 4zM6.667 10.667c-0.736 0-1.333 0.597-1.333 1.333v10.667c0 0.736 0.597 1.333 1.333 1.333h18.667c0.736 0 1.333-0.597 1.333-1.333v-10.667c0-0.736-0.597-1.333-1.333-1.333h-2.667c-0.355 0-0.693-0.14-0.943-0.391l-1.724-1.724c-0.268-0.268-0.953-0.552-1.333-0.552h-5.333c-0.38 0-1.065 0.284-1.333 0.552l-1.724 1.724c-0.249 0.251-0.588 0.391-0.943 0.391h-2.667z" fill="#ffffff" />
-	<path d="M16 13.333c1.839 0 3.333 1.495 3.333 3.333s-1.495 3.333-3.333 3.333-3.333-1.495-3.333-3.333 1.495-3.333 3.333-3.333M16 12c-2.579 0-4.667 2.088-4.667 4.667 0 2.576 2.088 4.667 4.667 4.667s4.667-2.091 4.667-4.667c0-2.579-2.088-4.667-4.667-4.667z" fill="#ffffff" />
-	<path d="M24 11.599c-0.959 0-1.733 0.776-1.733 1.735s0.775 1.732 1.733 1.732 1.733-0.773 1.733-1.732-0.775-1.735-1.733-1.735z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/camera.svg
+++ b/themes/movim/img/icons/button/camera.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M25.333 8h-2.115l-1.333-1.333c-0.772-0.772-2.127-1.333-3.219-1.333h-5.333c-1.092 0-2.447 0.561-3.219 1.333l-1.333 1.333h-2.115c-2.205 0-4 1.795-4 4v10.667c0 2.205 1.795 4 4 4h18.667c2.205 0 4-1.795 4-4v-10.667c0-2.205-1.795-4-4-4zM16 21.333c-2.577 0-4.667-2.091-4.667-4.667 0-2.579 2.089-4.667 4.667-4.667s4.667 2.088 4.667 4.667c0 2.576-2.089 4.667-4.667 4.667zM24 15.065c-0.959 0-1.733-0.773-1.733-1.732s0.775-1.735 1.733-1.735 1.733 0.776 1.733 1.735-0.775 1.732-1.733 1.732z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/checkmark.svg
+++ b/themes/movim/img/icons/button/checkmark.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/close.svg
+++ b/themes/movim/img/icons/button/close.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/contract.svg
+++ b/themes/movim/img/icons/button/contract.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M2 18h12v12l-4.321-4.321-6.313 6.313-3.359-3.359 6.313-6.313zM25.679 22.321l6.313 6.313-3.359 3.359-6.313-6.313-4.321 4.321v-12h12zM30 14h-12v-12l4.321 4.321 6.313-6.313 3.359 3.359-6.313 6.313zM9.679 6.321l4.321-4.321v12h-12l4.321-4.321-6.313-6.313 3.359-3.359z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/envelope.svg
+++ b/themes/movim/img/icons/button/envelope.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M29 4h-26c-1.65 0-3 1.35-3 3v20c0 1.65 1.35 3 3 3h26c1.65 0 3-1.35 3-3v-20c0-1.65-1.35-3-3-3zM12.461 17.199l-8.461 6.59v-15.676l8.461 9.086zM5.512 8h20.976l-10.488 7.875-10.488-7.875zM12.79 17.553l3.21 3.447 3.21-3.447 6.58 8.447h-19.579l6.58-8.447zM19.539 17.199l8.461-9.086v15.676l-8.461-6.59z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/expand.svg
+++ b/themes/movim/img/icons/button/expand.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M32 0v12l-4.321-4.321-6.625 6.625-3.359-3.359 6.625-6.625-4.321-4.321zM7.679 4.321l6.625 6.625-3.359 3.359-6.625-6.625-4.321 4.321v-12h12zM27.679 24.321l4.321-4.321v12h-12l4.321-4.321-6.625-6.625 3.359-3.359zM14.304 21.054l-6.625 6.625 4.321 4.321h-12v-12l4.321 4.321 6.625-6.625z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/eye.svg
+++ b/themes/movim/img/icons/button/eye.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M16 6c-6.979 0-13.028 4.064-16 10 2.972 5.936 9.021 10 16 10 6.979 0 13.027-4.064 16-10-2.972-5.936-9.021-10-16-10zM23.889 11.303c1.88 1.199 3.473 2.805 4.67 4.697-1.197 1.891-2.79 3.498-4.67 4.697-2.362 1.507-5.090 2.303-7.889 2.303-2.799 0-5.527-0.796-7.889-2.303-1.88-1.199-3.473-2.805-4.67-4.697 1.197-1.891 2.79-3.498 4.67-4.697 0.122-0.078 0.246-0.154 0.371-0.228-0.311 0.854-0.482 1.776-0.482 2.737 0 4.418 3.582 8 8 8s8-3.582 8-8c0-0.962-0.17-1.883-0.482-2.737 0.124 0.074 0.248 0.15 0.371 0.228zM16 12.813c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/feed.svg
+++ b/themes/movim/img/icons/button/feed.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M4.259 23.467c-2.35 0-4.259 1.917-4.259 4.252 0 2.349 1.909 4.244 4.259 4.244 2.358 0 4.265-1.895 4.265-4.244-0-2.336-1.907-4.252-4.265-4.252zM0.005 10.873v6.133c3.993 0 7.749 1.562 10.577 4.391 2.825 2.822 4.384 6.595 4.384 10.603h6.16c-0-11.651-9.478-21.127-21.121-21.127zM0.012 0v6.136c14.243 0 25.836 11.604 25.836 25.864h6.152c0-17.64-14.352-32-31.988-32z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/gear.svg
+++ b/themes/movim/img/icons/button/gear.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M29.181 19.070c-1.679-2.908-0.669-6.634 2.255-8.328l-3.145-5.447c-0.898 0.527-1.943 0.829-3.058 0.829-3.361 0-6.085-2.742-6.085-6.125h-6.289c0.008 1.044-0.252 2.103-0.811 3.070-1.679 2.908-5.411 3.897-8.339 2.211l-3.144 5.447c0.905 0.515 1.689 1.268 2.246 2.234 1.676 2.903 0.672 6.623-2.241 8.319l3.145 5.447c0.895-0.522 1.935-0.82 3.044-0.82 3.35 0 6.067 2.725 6.084 6.092h6.289c-0.003-1.034 0.259-2.080 0.811-3.038 1.676-2.903 5.399-3.894 8.325-2.219l3.145-5.447c-0.899-0.515-1.678-1.266-2.232-2.226zM16 22.479c-3.578 0-6.479-2.901-6.479-6.479 0-3.578 2.901-6.479 6.479-6.479 3.578 0 6.479 2.901 6.479 6.479-0 3.578-2.901 6.479-6.479 6.479z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/hang-up.svg
+++ b/themes/movim/img/icons/button/hang-up.svg
@ -1,77 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generated by IcoMoon.io -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   width="32"
-   height="32"
-   viewBox="0 0 32 32"
-   id="svg2"
-   inkscape:version="0.48.4 r9939"
-   sodipodi:docname="hang-up.svg">
-  <metadata
-     id="metadata10">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs8" />
-  <sodipodi:namedview
-     pagecolor="#000000"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="1"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1012"
-     id="namedview6"
-     showgrid="true"
-     inkscape:zoom="19.46"
-     inkscape:cx="16.001358"
-     inkscape:cy="14.42062"
-     inkscape:window-x="0"
-     inkscape:window-y="23"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2">
-    <inkscape:grid
-       type="xygrid"
-       id="grid2987"
-       empspacing="5"
-       visible="true"
-       enabled="true"
-       snapvisiblegridlinesonly="true" />
-  </sodipodi:namedview>
-  <path
-     d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z"
-     fill="#ffffff"
-     id="path4" />
-  <path
-     style="fill:#ffffff;fill-opacity:1;stroke:none"
-     d="m 24,12 0,-4 -4,0 -8,8 c 0.575808,1 3,3.180324 4,4 z"
-     id="path2989"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccc" />
-  <path
-     style="fill:#ffffff;fill-opacity:1;stroke:none"
-     d="m 5,23 c 0.4918053,1 2.4212965,3 4,4 l -5,5 -4,0 0,-4 z"
-     id="path3759"
-     inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccc" />
-</svg>
--- a/themes/movim/img/icons/button/home.svg
+++ b/themes/movim/img/icons/button/home.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M32 19l-6-6v-9h-4v5l-6-6-16 16v1h4v10h10v-6h4v6h10v-10h4z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/image.svg
+++ b/themes/movim/img/icons/button/image.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M0 4v26h32v-26h-32zM30 28h-28v-22h28v22zM22 11c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3-1.657 0-3-1.343-3-3zM28 26h-24l6-16 8 10 4-3z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/images.svg
+++ b/themes/movim/img/icons/button/images.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M4 8v20h28v-20h-28zM30 24.667l-4-6.667-4.533 3.778-3.467-5.778-12 10v-16h24v14.667zM8 15c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3-1.657 0-3-1.343-3-3zM28 4h-28v20h2v-18h26z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/link.svg
+++ b/themes/movim/img/icons/button/link.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M29.794 2.333l-0.126-0.126c-2.942-2.942-7.756-2.942-10.698 0l-6.816 6.817c-2.942 2.942-2.942 7.756 0 10.697l0.126 0.126c0.245 0.245 0.505 0.466 0.773 0.671l2.495-2.495c-0.291-0.172-0.566-0.377-0.816-0.627l-0.126-0.126c-1.597-1.597-1.597-4.196 0-5.793l6.816-6.816c1.597-1.597 4.196-1.597 5.793 0l0.126 0.126c1.597 1.597 1.597 4.197 0 5.793l-3.084 3.084c0.535 1.322 0.789 2.731 0.767 4.137l4.769-4.769c2.942-2.942 2.942-7.756-0-10.697zM19.72 12.154c-0.245-0.245-0.505-0.466-0.773-0.67l-2.495 2.495c0.291 0.172 0.566 0.377 0.816 0.627l0.126 0.126c1.597 1.597 1.597 4.196 0 5.793l-6.817 6.817c-1.597 1.597-4.196 1.597-5.793 0l-0.126-0.126c-1.597-1.598-1.597-4.196 0-5.793l3.084-3.084c-0.535-1.322-0.789-2.731-0.767-4.137l-4.769 4.769c-2.942 2.942-2.942 7.756 0 10.698l0.126 0.126c2.942 2.942 7.756 2.942 10.698 0l6.816-6.816c2.942-2.942 2.942-7.756 0-10.698l-0.126-0.126z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/location.svg
+++ b/themes/movim/img/icons/button/location.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M16 0c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zM16 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/loop.svg
+++ b/themes/movim/img/icons/button/loop.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M27.313 4.687c-2.895-2.896-6.895-4.687-11.313-4.687-6.859 0-12.709 4.316-14.984 10.381l3.746 1.405c1.706-4.548 6.094-7.786 11.238-7.786 3.314 0 6.313 1.344 8.485 3.515l-4.485 4.485h12v-12l-4.687 4.687zM16 28c-3.314 0-6.313-1.343-8.485-3.515l4.485-4.485h-12v12l4.687-4.687c2.895 2.896 6.894 4.687 11.313 4.687 6.859 0 12.709-4.316 14.984-10.381l-3.746-1.405c-1.706 4.548-6.094 7.786-11.238 7.786z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/map.svg
+++ b/themes/movim/img/icons/button/map.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M0 6l10-4v24l-10 4zM22 6v24l-10-3.333v-24zM32 2v24l-8 3.2v-24z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/microphone-off.svg
+++ b/themes/movim/img/icons/button/microphone-off.svg
@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M16 21.333c-2.941 0-5.333-2.393-5.333-5.333v-8c0-2.94 2.392-5.333 5.333-5.333s5.333 2.393 5.333 5.333v8c0 2.94-2.392 5.333-5.333 5.333zM16 5.333c-1.471 0-2.667 1.195-2.667 2.667v8c0 1.472 1.196 2.667 2.667 2.667s2.667-1.195 2.667-2.667v-8c0-1.472-1.196-2.667-2.667-2.667z" fill="#ffffff" />
-	<path d="M25.333 16v-2.667c0-0.737-0.596-1.333-1.333-1.333s-1.333 0.596-1.333 1.333v2.667c0 3.676-2.991 6.667-6.667 6.667s-6.667-2.991-6.667-6.667v-2.667c0-0.737-0.596-1.333-1.333-1.333s-1.333 0.596-1.333 1.333v2.667c0 4.693 3.484 8.576 8 9.227v1.44h-4c-0.737 0-1.333 0.596-1.333 1.333s0.596 1.333 1.333 1.333h10.667c0.737 0 1.333-0.596 1.333-1.333s-0.596-1.333-1.333-1.333h-4v-1.44c4.516-0.651 8-4.533 8-9.227z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/microphone.svg
+++ b/themes/movim/img/icons/button/microphone.svg
@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M16 21.333c2.941 0 5.333-2.393 5.333-5.333v-8c0-2.941-2.392-5.333-5.333-5.333s-5.333 2.392-5.333 5.333v8c0 2.94 2.392 5.333 5.333 5.333z" fill="#ffffff" />
-	<path d="M25.333 16v-2.667c0-0.736-0.596-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v2.667c0 3.676-2.991 6.667-6.667 6.667s-6.667-2.991-6.667-6.667v-2.667c0-0.736-0.596-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v2.667c0 4.693 3.484 8.576 8 9.227v1.44h-4c-0.737 0-1.333 0.596-1.333 1.333s0.596 1.333 1.333 1.333h10.667c0.737 0 1.333-0.596 1.333-1.333s-0.596-1.333-1.333-1.333h-4v-1.44c4.516-0.651 8-4.533 8-9.227z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/minus.svg
+++ b/themes/movim/img/icons/button/minus.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M0 13v6c0 0.552 0.448 1 1 1h30c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1h-30c-0.552 0-1 0.448-1 1z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/music.svg
+++ b/themes/movim/img/icons/button/music.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M10 6l22-6v23c0 2.761-3.134 5-7 5s-7-2.239-7-5c0-2.761 3.134-5 7-5 1.074 0 2.091 0.173 3 0.481v-10.3l-14 3.818v15c0 2.761-3.134 5-7 5-3.866 0-7-2.239-7-5 0-2.761 3.134-5 7-5 1.074 0 2.091 0.173 3 0.481v-16.481z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/pencil.svg
+++ b/themes/movim/img/icons/button/pencil.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M12 20l4-2 14-14-2-2-14 14-2 4zM9.041 27.097c-0.989-2.085-2.052-3.149-4.137-4.137l3.097-8.525 4-2.435 12-12h-6l-12 12-6 20 20-6 12-12v-6l-12 12-2.435 4" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/phone.svg
+++ b/themes/movim/img/icons/button/phone.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/plus.svg
+++ b/themes/movim/img/icons/button/plus.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M31 12h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v11h-11c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h11v11c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-11h11c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/quill.svg
+++ b/themes/movim/img/icons/button/quill.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M12 18.333c0 0 6.373-3.824 9.961-2.313 0.744-1.133 1.477-2.354 2.194-3.601-3.51-0.86-8.155-0.086-8.155-0.086s5.944-3.566 9.583-2.45c0.73-1.316 1.439-2.614 2.124-3.822-2.899-0.196-5.707 0.272-5.707 0.272s3.723-2.234 7.081-2.612c1.056-1.714 2.037-3.059 2.919-3.721-17.531 0-28 20-32 32h2l6-10c0 0 2 2 8 0 1.421-0.474 2.842-1.789 4.237-3.56-3.519-0.892-8.237-0.106-8.237-0.106z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/remove.svg
+++ b/themes/movim/img/icons/button/remove.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M6 32h20l2-22h-24zM20 4v-4h-8v4h-10v6l2-2h24l2 2v-6h-10zM18 4h-4v-2h4v2z" fill="#ffffff" />
-</svg>
--- a/themes/movim/img/icons/button/search.svg
+++ b/themes/movim/img/icons/button/search.svg
@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
-	<path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12-6.627 0-12 5.373-12 12 0 6.627 5.373 12 12 12 2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z" fill="#ffffff" />
-</svg>