filtered query working ok

explorerjs.html

@@ -24,7 +24,7 @@
       <div class="container">
 
         <div class="navbar-header">
-          <a href="#" class="navbar-brand">ComexJS</a>
+          <a href="index.html" class="navbar-brand"> <img width="20px" src="img/home.png"></img> ComexJS</a>
           <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -102,6 +102,40 @@
                        </li>
                   </ul>
                   
+
+                  <ul id="category-A" class="nav navbar-nav navbar-right">
+                      
+                        <li>
+                            <ul style="list-style-type: none; margin:0em 1em;">
+                                <li><div id="sliderANodeWeight"></div></li>
+                                <li><div id="sliderAEdgeWeight"></div></li>
+                                <li><div id="sliderANodeSize"></div></li>
+                            </ul>
+                        </li>
+                  </ul>
+
+                  <ul id="filterslegend" class="nav navbar-nav navbar-right">
+                        <li>
+                            <ul style="list-style-type: none;">
+                                <li>Nodes</li>
+                                <li>Edges</li>
+                                <li>Size</li>
+                            </ul>
+                        </li>
+                        
+                  </ul>
+
+                  <ul id="category-B" class="nav navbar-nav navbar-right">
+                        <li>
+                            <ul style="list-style-type: none; margin:0em 1em;">
+                                <li><div id="sliderBNodeWeight"></div></li>
+                                <li><div id="sliderBEdgeWeight"></div></li>
+                                <li><div id="sliderBNodeSize"></div></li>
+                            </ul>
+                        </li>
+                        
+                  </ul>
+
                   <ul class="nav navbar-nav navbar-right">
                      <li><a>
                               <input type="checkbox" id="checkboxdiv" onclick="alertCheckBox(this);">Add</input>
@@ -112,7 +146,9 @@
                               <input id="searchinput"  autocomplete="off" class="form-control input-sm col-lg-8" placeholder="Search" type="text">
                      </a></li>
                   </ul>
+
                 </div>
+
                   <!--
                   <ul class="nav navbar-nav navbar-right">
                     <li><a href="#">Link</a></li>
@@ -129,26 +165,6 @@
                   </ul>
                   -->
             
-                  <ul id="category-A" class="nav navbar-nav navbar-right">
-                      
-                        <li>
-                            <ul style="list-style-type: none; margin:0em 1em;">
-                                <li><div id="sliderANodeWeight"></div></li>
-                                <li><div id="sliderAEdgeWeight"></div></li>
-                                <li><div id="sliderANodeSize"></div></li>
-                            </ul>
-                        </li>
-                  </ul>
-                  <ul id="category-B" class="nav navbar-nav navbar-right">
-                        <li>
-                            <ul style="list-style-type: none; margin:0em 1em;">
-                                <li><div id="sliderBNodeWeight"></div></li>
-                                <li><div id="sliderBEdgeWeight"></div></li>
-                                <li><div id="sliderBNodeSize"></div></li>
-                            </ul>
-                        </li>
-                        
-                  </ul>
         </div><!-- /.nav-collapse -->
     </div><!-- /.navbar -->
 
@@ -178,12 +194,13 @@
                         <img width="34px" src="img/world.png"></img>
                       </a>
                   </li> 
-<!-- 
+
+
                    <li>
                       <a href="#" id="statsicon" onclick="$('#statsmodal').modal('show');" >
                         <img width="34px" src="img/stats.png"></img>
                       </a>
-                  </li>  -->
+                  </li>
 	                
                    <li>
                       <a href="#" id="saveAs"><img width="30px" src="img/save.png"></img></a>
@@ -237,53 +254,6 @@
 
 
 
-<div id="statsmodal" class="modal fade">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-        <h4 class="modal-title">Modal title</h4>
-      </div>
-      <div class="modal-body">
-        <p>Here goes the stats</p>
-      </div>
-    </div>
-  </div>
-</div> 
-
-<div id="mainmodal" class="modal fade">
-    
-        <div id="my-text-input"></div>
-  <!-- <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-        <h4 class="modal-title">Come on, change network</h4>
-      </div>
-      <div class="modal-body">    
-      </div>
-    </div>
-  </div> -->
-</div> 
-
-
-
-
-<div id="geomapmodal" class="modal fade">
-
-    <!-- <div class="modal-content"> -->
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-        <h4 class="modal-title">Geomap</h4>
-      </div>
-      <div class="modal-body">
-        <div class="geomapCont"></div>
-      </div>
-    <!-- </div> -->
-  <!-- <div class="geomapCont"></div> -->
-  <!-- <div id="closemodal2" data-dismiss="modal"></div> -->
-</div>
-
     <!--<script src="libs/jquery/jquery-1.9.1.js"></script>-->
     <!--<script src="libs/jquery/jquery-ui.js" type="text/javascript"></script>-->
     

geomap2/php/mapael.php

@@ -5,17 +5,25 @@ header('Content-Type: application/json');
  geomap/php/mapael.php?db=["data/nci/graph.db"]&query=["biomass","fuel","cooperatives","energy use","energy poverty","wind power","clean energy","social business","remote areas","Solar","battery","kerosene lanterns","retailers","lamps","energy production","distribution","grid electricity"]
  */
 
+/*
+http://localhost/adasd/geomap2/php/mapael.php?db="php/community.db"&query=["all"]
+http://localhost/adasd/geomap2/?db="php/community.db"&query=["all"]
+*/
 include('parameters_details.php');
 include('countries_iso3166.php');
 
 
 $sql="";
 $table="scholars";
-$column="country";
+$column="norm_country";
 $query = str_replace( '__and__', '&', $_GET["query"] );
 $query = str_replace( 'D::', '', $query );
 $elems = json_decode($query);
 
+
+$singularnick= "scholar";
+$pluralnick = "scholars";
+
 $selectiveQuery=true;
 if(count($elems)==1){
     foreach ($elems as $e){
@@ -107,7 +115,7 @@ if($selectiveQuery){
             $info["attrs"] = array();
             $info["attrs"]["href"] = "#";
             $info["tooltip"] = array();
-            //$info["tooltip"]["content"] = "<span style='font-weight=bold;'>" . $CC[$key] . "</span><br/>" . $realOCC.'  people ('.$info["percentage"].'%)';
+            //$info["tooltip"]["content"] = "<span style='font-weight=bold;'>" . $CC[$key] . "</span><br/>" . $realOCC.'  '.$pluralnick.' ('.$info["percentage"].'%)';
             $norm_country[$key] = $info;
             
             if($percentage>$maxF) $maxF=$percentage;
@@ -127,13 +135,13 @@ if($selectiveQuery){
         $old=$value["percentage"];
         $new=$old*$constant;# da formula!
         $norm_country[$key]["percentage"]=round($new,2);
-        $norm_country[$key]["tooltip"]["content"]= "<span style='font-weight=bold;'>" . $CC[$key] . "</span><br/>" . $value["realValue"].'  people ('.round($new,2).'%)';
+        $norm_country[$key]["tooltip"]["content"]= "<span style='font-weight=bold;'>" . $CC[$key] . "</span><br/>" . $value["realValue"].'  '.$pluralnick.' ('.round($new,2).'%)';
         //pr($value["code"].": ".$value["realValue"].", ".$value["percentage"].", div:".($country_divisor[$key]+1));
     }
 } else {
     //    $column="data";
-        $sql = "select count(*),data from ISIkeyword GROUP BY data ORDER BY count(*) DESC";
-        $sql = "select count(*),country from scholars GROUP BY country ORDER BY count(*) DESC";
+    $sql = "select count(*),data from ISIkeyword GROUP BY data ORDER BY count(*) DESC";
+    $sql = "select count(*),".$column." from scholars GROUP BY country ORDER BY count(*) DESC";
     ////}
     ////$sql="select count(*),data from ISIC1Country GROUP BY data ORDER BY count(*) DESC";//ademe
     //
@@ -142,7 +150,7 @@ if($selectiveQuery){
         $tempcount = 0;
         if ($norm_country[$code]) {
             $norm_country[$code]["value"]+=$row["count(*)"];
-            $norm_country[$code]["tooltip"]["content"] = "<span style='font-weight=bold;'>" . $CC[$code] . "</span><br/>" . $norm_country[$code]["value"].' people';
+            $norm_country[$code]["tooltip"]["content"] = "<span style='font-weight=bold;'>" . $CC[$code] . "</span><br/>" . $norm_country[$code]["value"].' '.$pluralnick;
         } else {
             $info = array();
             $info["code"] = $code;
@@ -150,15 +158,12 @@ if($selectiveQuery){
             $info["attrs"] = array();
             $info["attrs"]["href"] = "#";
             $info["tooltip"] = array();
-            $info["tooltip"]["content"] = "<span style='font-weight=bold;'>" . $CC[$code] . "</span><br/>" . $row["count(*)"].' people';
+            $info["tooltip"]["content"] = "<span style='font-weight=bold;'>" . $CC[$code] . "</span><br/>" . $row["count(*)"].' '.$pluralnick;
             $norm_country[$code] = $info;
         }
     }
 }
 
-
-
-
 $occToCC = array();
 foreach ($norm_country as $c) {
     if (!$occToCC[$c["value"]]) {
@@ -218,12 +223,12 @@ foreach ($temp as $key => $value) {
             $moreinfo["tooltip"] = array();
             if($selectiveQuery){
                 if($norm_country[$j]["realValue"]==1){
-                    $moreinfo["tooltip"]["content"] = "<span style='font-weight=bold;'>" . $CC[$j] . "</span><br/>" . $norm_country[$j]["realValue"]. ' person ('.$norm_country[$j]["percentage"].'%)';
+                    $moreinfo["tooltip"]["content"] = "<span style='font-weight=bold;'>" . $CC[$j] . "</span><br/>" . $norm_country[$j]["realValue"]. ' '.$pluralnick.' ('.$norm_country[$j]["percentage"].'%)';
                 } else {
-                    $moreinfo["tooltip"]["content"] = "<span style='font-weight=bold;'>" . $CC[$j] . "</span><br/>" . $norm_country[$j]["realValue"]. ' people ('.$norm_country[$j]["percentage"].'%)';
+                    $moreinfo["tooltip"]["content"] = "<span style='font-weight=bold;'>" . $CC[$j] . "</span><br/>" . $norm_country[$j]["realValue"]. ' '.$pluralnick.' ('.$norm_country[$j]["percentage"].'%)';
                 }                    
             } else {
-                $moreinfo["tooltip"]["content"] = "<span style='font-weight=bold;'>" . $CC[$j] . "</span><br/>" . $value["occ"]. ' people';
+                $moreinfo["tooltip"]["content"] = "<span style='font-weight=bold;'>" . $CC[$j] . "</span><br/>" . $value["occ"]. ' '.$pluralnick;
             }
             $thedata[$j] = $moreinfo;
         }

index-CSS/README.md

+this folder include 'eggplant', an example theme for jquery-ui
+
+the example use the jquery-ui toolbar, but you may use another library (eg. extjs) or anything else.

index-CSS/jquery.qtip.min.css

+.ui-tooltip-fluid{display:block;visibility:hidden;position:static!important;float:left!important;max-width:none!important;min-width:0!important;max-height:none!important;min-height:0!important;}.ui-tooltip,.qtip{position:absolute;left:-31000px;top:-31000px;max-width:280px;min-width:50px;outline:none;}.ui-tooltip-content{position:relative;padding:5px 9px;overflow:hidden;border-width:1px;border-style:solid;text-align:left;word-wrap:break-word;overflow:hidden;}.ui-tooltip-titlebar{position:relative;min-height:19px;padding:5px 35px 4px 10px;overflow:hidden;border-width:1px 1px 0;border-style:solid;font-weight:bold;}div.ui-tooltip-titlebar+div.ui-tooltip-content{border-top-width:0;}/*!Default close button class */ .ui-tooltip-titlebar .ui-state-default{position:absolute;right:5px;top:50%;margin-top:-9px;cursor:pointer;outline:medium none;border-width:1px;border-style:solid;}.ui-tooltip-titlebar .ui-icon,.ui-tooltip-icon .ui-icon{display:block;text-indent:-1000em;}.ui-tooltip-icon,.ui-tooltip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}.ui-tooltip-icon .ui-icon{width:18px;height:14px;text-align:center;text-indent:0;font:normal bold 10px/13px Tahoma,sans-serif;color:inherit;background:transparent none no-repeat -100em -100em;}/*!Default tooltip style */ .ui-tooltip-titlebar,.ui-tooltip-content{border-color:#F1D031;background-color:#FFFFA3;color:#555;}.ui-tooltip-titlebar{background-color:#FFEF93;}.ui-tooltip-titlebar .ui-tooltip-icon{border-color:#CCC;background:#F1F1F1;color:#777;}.ui-tooltip-titlebar .ui-state-hover{border-color:#AAA;color:#111;}/*!Light tooltip style */ .ui-tooltip-light .ui-tooltip-titlebar,.ui-tooltip-light .ui-tooltip-content{border-color:#E2E2E2;color:#454545;}.ui-tooltip-light .ui-tooltip-content{background-color:white;}.ui-tooltip-light .ui-tooltip-titlebar{background-color:#f1f1f1;}/*!Dark tooltip style */ .ui-tooltip-dark .ui-tooltip-titlebar,.ui-tooltip-dark .ui-tooltip-content{border-color:#303030;color:#f3f3f3;}.ui-tooltip-dark .ui-tooltip-content{background-color:#505050;}.ui-tooltip-dark .ui-tooltip-titlebar{background-color:#404040;}.ui-tooltip-dark .ui-tooltip-icon{border-color:#444;}.ui-tooltip-dark .ui-tooltip-titlebar .ui-state-hover{border-color:#303030;}/*!Cream tooltip style */ .ui-tooltip-cream .ui-tooltip-titlebar,.ui-tooltip-cream .ui-tooltip-content{border-color:#F9E98E;color:#A27D35;}.ui-tooltip-cream .ui-tooltip-content{background-color:#FBF7AA;}.ui-tooltip-cream .ui-tooltip-titlebar{background-color:#F0DE7D;}.ui-tooltip-cream .ui-state-default .ui-tooltip-icon{background-position:-82px 0;}/*!Red tooltip style */ .ui-tooltip-red .ui-tooltip-titlebar,.ui-tooltip-red .ui-tooltip-content{border-color:#D95252;color:#912323;}.ui-tooltip-red .ui-tooltip-content{background-color:#F78B83;}.ui-tooltip-red .ui-tooltip-titlebar{background-color:#F06D65;}.ui-tooltip-red .ui-state-default .ui-tooltip-icon{background-position:-102px 0;}.ui-tooltip-red .ui-tooltip-icon{border-color:#D95252;}.ui-tooltip-red .ui-tooltip-titlebar .ui-state-hover{border-color:#D95252;}/*!Green tooltip style */ .ui-tooltip-green .ui-tooltip-titlebar,.ui-tooltip-green .ui-tooltip-content{border-color:#90D93F;color:#3F6219;}.ui-tooltip-green .ui-tooltip-content{background-color:#CAED9E;}.ui-tooltip-green .ui-tooltip-titlebar{background-color:#B0DE78;}.ui-tooltip-green .ui-state-default .ui-tooltip-icon{background-position:-42px 0;}/*!Blue tooltip style */ .ui-tooltip-blue .ui-tooltip-titlebar,.ui-tooltip-blue .ui-tooltip-content{border-color:#ADD9ED;color:#5E99BD;}.ui-tooltip-blue .ui-tooltip-content{background-color:#E5F6FE;}.ui-tooltip-blue .ui-tooltip-titlebar{background-color:#D0E9F5;}.ui-tooltip-blue .ui-state-default .ui-tooltip-icon{background-position:-2px 0;}div.ui-tooltip-tip{position:absolute;margin:0 auto;overflow:hidden;line-height:.1px;font-size:1px;background:transparent!important;border:0!important;z-index:10;}div.ui-tooltip-tip *{line-height:.1px;font-size:.1px;}div.ui-tooltip-tip div{background:transparent!important;border:0 dashed transparent;}#qtip-overlay{position:absolute;left:-10000em;top:-10000em;background-color:black;cursor:pointer;opacity:.7;filter:alpha(opacity=70);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";}/*!Add shadows to your tooltips in:FF3+,Chrome 2+,Opera 10.6+,IE6+,Safari 2+*/ .ui-tooltip-shadow{-webkit-box-shadow:1px 1px 3px 1px rgba(0,0,0,0.15);-moz-box-shadow:1px 1px 3px 1px rgba(0,0,0,0.15);box-shadow:1px 1px 3px 1px rgba(0,0,0,0.15);}.ui-tooltip-shadow .ui-tooltip-titlebar,.ui-tooltip-shadow .ui-tooltip-content{filter:progid:DXImageTransform.Microsoft.Shadow(Color='gray',Direction=135,Strength=3);-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Color='gray',Direction=135,Strength=3)";}/*!Add rounded corners to your tooltips in:FF3+,Chrome 2+,Opera 10.6+,IE9+,Safari 2+*/ .ui-tooltip-rounded,.ui-tooltip-rounded .ui-tooltip-content{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}.ui-tooltip-rounded .ui-tooltip-titlebar{-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;}.ui-tooltip-rounded .ui-tooltip-titlebar+.ui-tooltip-content{-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;}/*!Youtube tooltip style */ .ui-tooltip-youtube{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 0 3px #333;-moz-box-shadow:0 0 3px #333;box-shadow:0 0 3px #333;}.ui-tooltip-youtube .ui-tooltip-titlebar,.ui-tooltip-youtube .ui-tooltip-content{background:transparent;background:rgba(0,0,0,0.85);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000)";color:white;border:1px solid #CCC;}.ui-tooltip-youtube .ui-tooltip-titlebar{border-bottom-width:0;-moz-border-radius:3px 3px 0 0;-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}.ui-tooltip-youtube .ui-tooltip-content{-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.ui-tooltip-youtube .ui-tooltip-icon{border-color:#444;}.ui-tooltip-youtube .ui-tooltip-titlebar .ui-state-hover{border-color:#303030;}.ui-tooltip-jtools{background:#232323;background:rgba(0,0,0,0.7);background-image:-moz-linear-gradient(top,#717171,#232323);background-image:-webkit-gradient(linear,left top,left bottom,from(#717171),to(#232323));border:2px solid #ddd;border:2px solid rgba(241,241,241,1);-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 0 12px #333;-moz-box-shadow:0 0 12px #333;box-shadow:0 0 12px #333;}.ui-tooltip-jtools .ui-tooltip-titlebar{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)";}.ui-tooltip-jtools .ui-tooltip-content{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)";}.ui-tooltip-jtools .ui-tooltip-titlebar,.ui-tooltip-jtools .ui-tooltip-content{background:transparent;color:white;border:0 transparent;}.ui-tooltip-jtools .ui-tooltip-icon{border-color:#555;}.ui-tooltip-jtools .ui-tooltip-titlebar .ui-state-hover{border-color:#333;}.ui-tooltip-cluetip{-webkit-box-shadow:4px 4px 5px rgba(0,0,0,0.4);-moz-box-shadow:4px 4px 5px rgba(0,0,0,0.4);box-shadow:4px 4px 5px rgba(0,0,0,0.4);}.ui-tooltip-cluetip .ui-tooltip-titlebar{background-color:#87876A;color:white;border:0 transparent;}.ui-tooltip-cluetip .ui-tooltip-content{background-color:#D9D9C2;color:#111;border:0 transparent;}.ui-tooltip-cluetip .ui-tooltip-icon{border-color:#808064;}.ui-tooltip-cluetip .ui-tooltip-titlebar .ui-state-hover{border-color:#696952;color:#696952;}.ui-tooltip-tipsy{border:0 solid #000;border:0 solid rgba(0,0,0,.87);-moz-border-radius:4px;-webkit-border-radius:4px;-o-border-radius:4px;border-radius:4px;}.ui-tooltip-tipsy .ui-tooltip-titlebar,.ui-tooltip-tipsy .ui-tooltip-content{background:transparent;background:rgba(0,0,0,.87);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000)";color:white;border:0;font-size:11px;font-family:'Lucida Grande',sans-serif;font-weight:bold;line-height:16px;text-shadow:0 1px black;}.ui-tooltip-tipsy .ui-tooltip-titlebar{padding:6px 35px 0 10px;border-bottom-width:0;-moz-border-radius:3px 3px 0 0;-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}.ui-tooltip-tipsy .ui-tooltip-content{padding:6px 10px;-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.ui-tooltip-tipsy .ui-tooltip-icon{margin-top:-7px;border-color:#444;text-shadow:none;}.ui-tooltip-tipsy .ui-tooltip-titlebar .ui-state-hover{border-color:#303030;}.ui-tooltip-tipped .ui-tooltip-titlebar,.ui-tooltip-tipped .ui-tooltip-content{border:3px solid #959FA9;}.ui-tooltip-tipped .ui-tooltip-titlebar{background:#3A79B8;background-image:-moz-linear-gradient(top,#3A79B8,#2E629D);background-image:-webkit-gradient(linear,left top,left bottom,from(#3A79B8),to(#2E629D));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)";color:white;font-weight:normal;font-family:serif;border-bottom-width:0;-moz-border-radius:3px 3px 0 0;-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}.ui-tooltip-tipped .ui-tooltip-content{background-color:#F9F9F9;color:#454545;-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.ui-tooltip-tipped .ui-tooltip-icon{border:2px solid #285589;background:#285589;}.ui-tooltip-tipped .ui-tooltip-icon .ui-icon{background-color:#FBFBFB;color:#555;}
\ No newline at end of file

index-CSS/newstyle.css

+/*
+CSS to move the sidebar to the right hand side
+*/
+.container-fluid > .sidebar-left {
+  float: left;
+  width: 220px;
+}
+
+.container-fluid > .sidebar-right {
+  float: right;
+  width: 220px;
+}
\ No newline at end of file