diff --git a/index.html b/index.html
index 1f16d14..bff8c47 100755
--- a/index.html
+++ b/index.html
@@ -252,7 +252,7 @@ <h2 data-l10n-id="other">Other</h2>
       <menu type="toolbar">
         <button data-click="saveFromEditor" id="editorSaveButton"><span class="icon icon-save"></span></button>
         <button data-click="fullscreen"><span class="icon icon-fs"></span></button>
-        <button data-click="sidebar" data-click-id="main" class="drawerEnabled"><span class="icon icon-menu"></span></button>
+        <button data-click="sidebar" data-click-id="main" class="menu drawerEnabled"><span class="icon icon-menu"></span></button>
       </menu>
       <h1><span id="currentFileLocation" style="display:none;"></span><span id="currentFileDirectory" style="display:none;"></span><span id="currentFileName"></span><span id="currentFileType"></span></h1>
     </header>
@@ -282,7 +282,7 @@ <h1><span id="currentFileLocation" style="display:none;"></span><span id="curren
           </div>
         </li>
         <div class="tabToolbar">
-          <button data-click="sidebar" data-click-id="main" class="icon-menu"></button>
+          <button data-click="sidebar" data-click-id="main" class="icon-menu drawerEnabled"></button>
           <button data-click="closeFile" class="icon-close"></button>
           <button data-click="fullscreen" class="icon-efs"></button>
           <button data-click="saveFromEditor" id="zenSaveButton" class="icon-save"></button>
diff --git a/scripts/firetext.js b/scripts/firetext.js
index f9b1843..0e6c05a 100644
--- a/scripts/firetext.js
+++ b/scripts/firetext.js
@@ -915,7 +915,20 @@ document.addEventListener('blur', function(event) {
 function initGestures () {
   new GestureDetector(document.body).startDetecting();
   document.body.addEventListener('swipe', function (event) {
-    processActions(('data-swipe-'+event.detail.direction), event.target);  
+  	// Detect direction
+    var direction;
+    if (document.body.classList.contains('rtl')) {
+      if (event.detail.direction == 'right') {
+      	direction = 'left';
+      } else if (event.detail.direction == 'left') {
+      	direction = 'right';
+      }
+    } else {
+      direction = event.detail.direction;
+    } 
+    
+    // Process the action
+    processActions(('data-swipe-'+direction), event.target); 
   });
 }
 
diff --git a/scripts/language.js b/scripts/language.js
index 029038f..575a083 100644
--- a/scripts/language.js
+++ b/scripts/language.js
@@ -15,16 +15,27 @@ firetext.language = function () { return this.getCurrent(); };
 /* Init
 ------------------------*/ 
 firetext.language.init = function () {
-  if (!firetext.settings.get('language')) {
-    firetext.settings.save('language', document.webL10n.getLanguage());    
-  } 
-  
-  // Localize interface
-  var language = firetext.settings.get('language');
-  document.webL10n.setLanguage(language);
-  document.body.setAttribute('language', language);
+	if (!firetext.settings.get('language')) {
+		firetext.settings.save('language', document.webL10n.getLanguage());		 
+	} 
+	
+	// Localize interface
+	var language = firetext.settings.get('language');
+	document.webL10n.setLanguage(language);
+	document.body.setAttribute('data-language', language);
+	
+	// LTR / RTL
+	if (language == 'he' |
+			language == 'ar' |
+			language == 'tr') {
+		document.body.classList.remove('ltr');  
+		document.body.classList.add('rtl');  		
+	} else {
+		document.body.classList.remove('rtl');  
+		document.body.classList.add('ltr');  
+	}
 }
 
 firetext.language.getCurrent = function () {
-  return (firetext.settings.get('language'));
+	return (firetext.settings.get('language'));
 }
diff --git a/style/bb/buttons.css b/style/bb/buttons.css
index 3ea4bfb..b009d43 100755
--- a/style/bb/buttons.css
+++ b/style/bb/buttons.css
@@ -23,7 +23,7 @@ a[role="button"] {
   background: #fafafa url(buttons/images/ui/default.png) repeat-x left bottom;
   border: 0.1rem solid #a6a6a6;
   border-radius: 0.2rem;
-  font: 500 1.6rem/3.8rem 'MozTT', Sans-serif;
+  font: 500 1.5rem/3.8rem 'MozTT', Sans-serif;
   color: #333;
   text-align: center;
   text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
@@ -113,18 +113,6 @@ li a[role="button"] {
   overflow: visible;
 }
 
-/* Hacking box-shadow */
-li button:after,
-li a[role="button"]:after {
-  content: "";
-  position: absolute;
-  bottom: -0.3rem;
-  left: 0;
-  right: 0;
-  height: 0.2rem;
-  background: url(buttons/images/ui/shadow.png) repeat-x left bottom;
-}
-
 /* Press */
 li a[role="button"]:active:after,
 li button:active:after {
diff --git a/style/bb/drawer.css b/style/bb/drawer.css
index 05f9c48..441894f 100755
--- a/style/bb/drawer.css
+++ b/style/bb/drawer.css
@@ -193,7 +193,6 @@ section[data-type="sidebar"] > nav {
   max-height: calc(100% - 5rem);
     max-height: -moz-calc(100% - 5rem);
     max-height: -webkit-calc(100% - 5rem);
-  margin-right: -0.8rem;
   width: 100%;
 }
 
@@ -270,4 +269,26 @@ section[data-type="sidebar"] > nav > ul > li > a {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-}
\ No newline at end of file
+}
+
+
+/* RTL */
+.rtl section[data-type="sidebar"] {
+    left: auto;
+    right: 0;
+}
+
+.rtl section[data-type="sidebar"][data-position="right"] {
+    right: auto;
+    left: 0;    
+}
+
+.rtl section[data-type="sidebar"] [role="toolbar"] {
+    left: auto;
+    right: 0;
+}
+
+.rtl section[data-type="sidebar"][data-position="right"] [role="toolbar"] {
+    right: auto;
+    left: 0;    
+}
diff --git a/style/bb/input_areas.css b/style/bb/input_areas.css
index a1113be..1b678ce 100755
--- a/style/bb/input_areas.css
+++ b/style/bb/input_areas.css
@@ -294,42 +294,44 @@ form p button[type="reset"]::-moz-focus-inner,
  * Right-to-Left layout
  */
 
-html[dir="rtl"] form p input:valid,
-html[dir="rtl"] form p input:valid:focus,
-html[dir="rtl"] .form p input:valid,
-html[dir="rtl"] .form p input:valid:focus {
+.rtl form p input:focus,
+.rtl .form p input:focus,
+.rtl form p input:valid,
+.rtl form p input:valid:focus,
+.rtl .form p input:valid,
+.rtl .form p input:valid:focus {
   padding: 0 0.8rem 0 3.5rem;
 }
 
-html[dir="rtl"] form p textarea:valid,
-html[dir="rtl"] form p textarea:valid:focus,
-html[dir="rtl"] .form p textarea:valid,
-html[dir="rtl"] .form p textarea:valid:focus {
+.rtl form p textarea:valid,
+.rtl form p textarea:valid:focus,
+.rtl .form p textarea:valid,
+.rtl .form p textarea:valid:focus {
   padding: 0.8rem 0.8rem 0.8rem 3.5rem;
 }
 
-html[dir="rtl"] form p input + button[type="reset"],
-html[dir="rtl"] form p textarea + button[type="reset"],
-html[dir="rtl"] .form p input + button[type="reset"],
-html[dir="rtl"] .form p textarea + button[type="reset"] {
+.rtl form p input + button[type="reset"],
+.rtl form p textarea + button[type="reset"],
+.rtl .form p input + button[type="reset"],
+.rtl .form p textarea + button[type="reset"] {
   right: auto;
   left: 0;
 }
 
-html[dir="rtl"] fieldset legend.action:after {
+.rtl fieldset legend.action:after {
   margin: 0 0.5rem 0 0;
 }
 
-html[dir="rtl"] fieldset legend {
+.rtl fieldset legend {
   padding: 0 1.8rem 0 0.5rem;
 }
 
-html[dir="rtl"] form[role="search"] button[type="submit"] + p > textarea,
-html[dir="rtl"] .form[role="search"] button[type="submit"] + p > textarea {
+.rtl form[role="search"] button[type="submit"] + p > textarea,
+.rtl .form[role="search"] button[type="submit"] + p > textarea {
   padding: 0.5rem 0.8rem 0.5rem 3rem;
 }
 
-html[dir="rtl"] form[role="search"] button[type="submit"] + p > button,
-html[dir="rtl"] .form[role="search"] button[type="submit"] + p > button {
+.rtl form[role="search"] button[type="submit"] + p > button,
+.rtl .form[role="search"] button[type="submit"] + p > button {
   left: 1rem;
-}
\ No newline at end of file
+}
diff --git a/style/bb/lists.css b/style/bb/lists.css
index 989d7fa..0e51300 100755
--- a/style/bb/lists.css
+++ b/style/bb/lists.css
@@ -110,7 +110,7 @@
 
 [data-type="list"] aside[class^="icon-"], 
 [data-type="list"] aside[class*=" icon-"] {
-  padding: 1.4rem .5rem;
+  padding: 1.4rem 0;
     -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
@@ -127,6 +127,15 @@
   text-align: right;
 }
 
+.pack-end button {
+    font-size: 1.5rem;
+    width: auto;
+    padding: 0 0.2rem;
+    margin-top: 0.5rem;
+    position: absolute;
+    right: 0;
+}
+
 [data-type="list"] aside[data-icon] {
   width: 3rem;
   height: 6rem;
@@ -160,7 +169,6 @@
 }
 
 [data-type="list"] li p:first-of-type {
-  font-size: 1.8rem;
   line-height: 2.2rem;
   color: #000;
   padding: 1rem 0 0;
@@ -214,3 +222,19 @@
 [data-type="list"] [data-type="edit"] li > a:active:after {
   display: none;
 }
+
+
+/* RTL */
+.rtl [data-type="list"] aside { 
+    float: right;   
+    margin: 0 0 0 0.5rem;
+}
+
+.rtl [data-type="list"] .pack-end {
+    float: left;
+}
+
+.pack-end button {
+    left: 0;
+    right: auto;
+}
diff --git a/style/bb/tabs.css b/style/bb/tabs.css
index da76692..ebfd23e 100755
--- a/style/bb/tabs.css
+++ b/style/bb/tabs.css
@@ -264,3 +264,25 @@
 [role="tablist"][data-type="filter"].bottom > [role="tab"] > a {
   height: auto;
 }
+
+
+/* RTL */
+.rtl [role="tablist"] > [role="tab"] {
+    float: right;   
+}
+
+.rtl [role="tablist"] [role="tabpanel"] {
+    -moz-transform: translateX(102%);
+    -webkit-transform: translateX(102%);
+    -o-transform: translateX(102%);
+    -ms-transform: translateX(102%);
+  transform: translateX(102%);
+}
+
+.rtl [role="tablist"] .selected ~ [role="tab"] [role="tabpanel"] {
+    -moz-transform: translateX(-102%);
+    -webkit-transform: translateX(-102%);
+    -o-transform: translateX(-102%);
+    -ms-transform: translateX(-102%);
+  transform: translateX(-102%);
+}
diff --git a/style/bb/toolbars.css b/style/bb/toolbars.css
index 0141611..a291fd2 100755
--- a/style/bb/toolbars.css
+++ b/style/bb/toolbars.css
@@ -54,3 +54,18 @@
   box-sizing: border-box;
   text-align: right;
 }
+
+
+/* RTL */
+.rtl [role="toolbar"] ul {
+    float: right;   
+}
+
+.rtl [role="toolbar"] ul:last-child {
+    float: left;
+    text-align: left;
+}
+
+.rtl [role="toolbar"] li {
+    float: right;   
+}
diff --git a/style/headers.css b/style/headers.css
index 724702e..263ccb4 100755
--- a/style/headers.css
+++ b/style/headers.css
@@ -13,14 +13,14 @@ section > header:first-child {
 }
 
 section > header:first-child h1 {
-  font: 2.5rem/4.8rem "MozTT", Sans-serif;
+  font: 2.4rem/4.6rem "MozTT", Sans-serif;
   text-align: left;
   color: inherit;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
   overflow: hidden;
-  margin: 0 0 0 4rem;
+  margin: 0 0 0 3.5rem;
   height: 100%;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -121,9 +121,9 @@ section > header:first-child button {
   text-decoration: none;
 }
 
-section > header:first-child > button:first-child .icon,
-section > header:first-child > a:first-child .icon {
-  padding-right: .7rem;
+section > header:first-child > button:first-child .icon-close,
+section > header:first-child > a:first-child .icon-close {
+  padding-right: 0.7rem;
 }
 
 section > header:first-child > button:first-child .icon-menu,
@@ -260,26 +260,66 @@ section > header h2 {
 /* ----------------------------------
  * HEADERS: right-to-left tweaks
  * ---------------------------------- */
+.rtl section > header:first-child {
+    direction: ltr;
+}
 
-html[dir="rtl"] section > header:first-child h1 {
-  text-align: right;
-  margin: 0 3rem 0 0;
+.rtl section > header:first-child h1 {
+    direction: rtl;
+    text-align: right;
+    margin: 0 3.5rem 0 0 !important;
+}
+
+.rtl section > header:first-child > button,
+.rtl section > header:first-child > a {
+    right: 0;
+    left: auto;
+    direction: rtl;
+}
+
+.rtl section > header:first-child menu[type="toolbar"] {
+    float: left;
 }
 
-html[dir="rtl"] section > header:first-child button,
-html[dir="rtl"] section > header:first-child a {
-  left: inherit;
-  right: 0;
+.rtl section > header:first-child menu[type="toolbar"] a,
+.rtl section > header:first-child menu[type="toolbar"] button {
+    float: right;
 }
 
-html[dir="rtl"] section > header:first-child > button .icon,
-html[dir="rtl"] section > header:first-child > a .icon {
-  margin-left: 0;
-  margin-right: -2rem;
+.rtl section > header:first-child menu[type="toolbar"] .menu {
+    padding-left: 0;
+    text-align: left;
+    min-width: 2rem;
 }
 
-html[dir="rtl"] section > header:first-child > button .icon:after,
-html[dir="rtl"] section > header:first-child > a .icon:after {
-  left: inherit;
-  right: 0;
+.rtl section > header:first-child > button:first-child .icon,
+.rtl section > header:first-child > a:first-child .icon {
+    padding-right: 0;
+    padding-left: 0.7rem;    
+}
+
+.rtl section > header:first-child > button .icon:after,
+.rtl section > header:first-child > a .icon:after {
+    left: auto;
+    right: 0;
+}
+    
+.rtl section > header:first-child > button:first-child .icon-menu,
+.rtl section > header:first-child > a:first-child .icon-menu {
+    padding-right: 0;
+    padding-left: 1.3rem;
+}
+    
+.rtl section > header:first-child > button:first-child .icon-close,
+.rtl section > header:first-child > a:first-child .icon-close {
+    padding-right: 0.7rem;
+}
+    
+.rtl section > header:first-child > button:first-child .icon-back,
+.rtl section > header:first-child > a:first-child .icon-back {
+       -moz-transform: scale(-1, 1);
+       -webkit-transform: scale(-1, 1);
+       -o-transform: scale(-1, 1);
+    transform: scale(-1, 1);
+    padding-right: 1rem;
 }
diff --git a/style/icons.css b/style/icons.css
index 3b14697..dd57cdc 100644
--- a/style/icons.css
+++ b/style/icons.css
@@ -17,6 +17,7 @@
 
 [class^="icon-"], 
 [class*=" icon-"] {
+  direction: ltr;
   font-family: 'Firetext' !important;
   speak: none;
   font-style: normal;
diff --git a/style/icons/misc/spinner.png b/style/icons/misc/spinner.png
index 94aa7aa..6bf055d 100755
Binary files a/style/icons/misc/spinner.png and b/style/icons/misc/spinner.png differ
diff --git a/style/icons/night/misc/spinner-night.png b/style/icons/night/misc/spinner-night.png
index 6694aa7..cf205e7 100755
Binary files a/style/icons/night/misc/spinner-night.png and b/style/icons/night/misc/spinner-night.png differ
diff --git a/style/main.css b/style/main.css
index 122bfc3..d218c26 100755
--- a/style/main.css
+++ b/style/main.css
@@ -16,12 +16,6 @@ html, body {
   color: #6f6f6f;
 }
 
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  src: local('OpenSans'), url(fonts/OpenSans.woff) format('woff');
-}
-
 [role="main"].header-only {
   height: calc(100% - 5rem);
     height: -moz-calc(100% - 5rem);
@@ -30,8 +24,9 @@ html, body {
 }
 
 .firetext {
-  text-align: center !important;
-  padding-top: 0 !important;
+    text-align: center !important;
+    padding-top: 0 !important;
+    margin: 0 0 0 4rem !important;
 }
 
 .redAlert {
@@ -43,6 +38,15 @@ html, body {
 }
 
 
+/* Fonts */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  src: local('OpenSans'), url(fonts/OpenSans.woff) format('woff');
+}
+
+
+
 /* Style hacks */
 [role="toolbar"] button.ftanylitics {
   background-color: #444;
@@ -105,7 +109,7 @@ form[role=dialog].current {
   margin: 0 0;
   font-family: "Open Sans";
   font-weight: normal;
-  font-size: 1.8rem;
+  font-size: 1.7rem;
 }
 
 [data-type="list"] li a,
@@ -164,11 +168,11 @@ form[role=dialog].current {
 }
 
 [data-type="list"] li.fileListItem .fileItemName {
-  font-size: 1.8rem;
+  font-size: 1.6rem;
   color: #2c2c2c;
   font-weight: bold;
   margin: 0;
-  padding: 1rem 0 0;
+  padding: 0.5rem 0 0;
 }
 
 [data-type="list"] li.fileListItem .fileItemPath {
@@ -189,7 +193,7 @@ form[role=dialog].current {
 /* Buttons */
 .button-block {
   width: 96%;
-  margin-left: 2%;
+  margin-left: 1.5%;
 }
 
 
@@ -234,27 +238,10 @@ legend.action select {
 }
 
 aside.pack-end select {
-  background: none;
-  outline: none;
-  border: none;
-  border-radius: 0px;
-  font-size: 1.5rem;
   position: absolute;
   right: 0;
-  padding-top: 1.3rem;
+  margin-top: 1.4rem;
   text-align: right;
-  text-indent: 1.5rem;
-}
-
-aside.pack-end select:after {
-  content: "";
-  position: absolute;
-  top: 1.8rem;
-  width: 0;
-  height: 0;
-  margin-left: 0.5rem;
-  border: 0.4rem solid transparent;
-  border-top-color: #333;
 }
 
 legend.action select.dummy,
@@ -326,39 +313,35 @@ aside select.dummy {
   width: 100%;
   border: none;
   outline: none;
-  height: calc(100% - 3.9rem);
     height: -moz-calc(100% - 3.9rem);
     height: -webkit-calc(100% - 3.9rem);
+  height: calc(100% - 3.9rem);
 }
 
 
 /* Spinner (Throbber) */
 .spinner {
-  border-radius: 8px;
-  background-color: #fff;
+  border-radius: 100%;
+  background-color: rgba(255,255,255,0.5);
   padding: 10px;
   opacity: 0;
   display: inline-block;
   visibility: hidden;
-  transition: opacity .3s, .3s visibility 0s;
     -moz-transition: opacity .3s, .3s visibility 0s;
     -webkit-transition: opacity .3s, .3s visibility 0s;
     -o-transition: opacity .3s, .3s visibility 0s;
+  transition: opacity .3s, .3s visibility 0s;
   pointer-events: none;
 }
 
-.spinner:hover, .spinner:active, .spinner:focus {
-  opacity: .3 !important;
-}
-
 .spinner.center {
   position: fixed;
-  left: calc(50% - 53px / 2);
     left: -moz-calc(50% - 53px / 2);
     left: -webkit-calc(50% - 53px / 2);
-  top: calc(50% - 53px / 2);
+  left: calc(50% - 53px / 2);
     top: -moz-calc(50% - 53px / 2);
     top: -webkit-calc(50% - 53px / 2);
+  top: calc(50% - 53px / 2);
 }
 
 .spinner.shown {
@@ -376,55 +359,149 @@ aside select.dummy {
   background-position: center;
   width: 33px;
   height: 33px;
-  animation: spin .5s steps(30) infinite;
-    -moz-animation: spin .5s steps(30) infinite;
-    -webkit-animation: spin .5s steps(30) infinite;
-    -o-animation: spin .5s steps(30) infinite;
+    -moz-animation: spin 1s linear infinite;
+    -webkit-animation: spin 1s linear infinite;
+    -o-animation: spin 1s linear infinite;
+  animation: spin 1s linear infinite;
 }
 
 @keyframes spin{
   0%{
-    transform: rotate(0turn);
       -moz-transform: rotate(0turn);
       -webkit-transform: rotate(0turn);
       -o-transform: rotate(0turn);
       -ms-transform: rotate(0turn);
+    transform: rotate(0turn);
   }
   100%{
-    transform: rotate(1turn);
       -moz-transform: rotate(1turn);
       -webkit-transform: rotate(1turn);
       -o-transform: rotate(1turn);
       -ms-transform: rotate(1turn);
+    transform: rotate(1turn);
   }
 }
 @-moz-keyframes spin{
   0%{
-    transform: rotate(0turn);
       -moz-transform: rotate(0turn);
+    transform: rotate(0turn);
   }
   100%{
-    transform: rotate(1turn);
       -moz-transform: rotate(1turn);
+    transform: rotate(1turn);
   }
 }
 @-webkit-keyframes spin{
   0%{
-    transform: rotate(0turn);
       -webkit-transform: rotate(0turn);
+    transform: rotate(0turn);
   }
   100%{
-    transform: rotate(1turn);
       -webkit-transform: rotate(1turn);
+    transform: rotate(1turn);
   }
 }
 @-o-keyframes spin{
   0%{
+      -o-transform: rotate(0turn);
     transform: rotate(0turn);
+  }
+  100%{
+      -o-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+
+/* RTL */
+.rtl {
+    direction: rtl;
+}
+
+.rtl aside.pack-end select {
+    left: 0;
+    right: auto;
+    direction: ltr;
+    text-indent: 0;
+    text-align: left;
+}
+
+.rtl .button-block {
+    margin-right: 1.5%;
+}
+
+.rtl #fileTypeLegend {
+    float: left;  
+}
+
+.rtl .tabToolbar button,
+.rtl .tabToolbar .button,
+.rtl .tabToolbar input[type="button"] {
+    float: left;
+}
+
+.rtl .tabToolbar .icon-menu {
+    padding-left: 0;
+    width: 3rem;
+}
+
+.rtl .spinner > div {
+    -moz-animation-name: rtlSpin;
+    -webkit-animation-name: rtlSpin;
+    -o-animation-name: rtlSpin;
+  animation-name: rtlSpin;
+}
+
+.rtl .icon-arrow {
+       -moz-transform: scale(-1, 1);
+       -webkit-transform: scale(-1, 1);
+       -o-transform: scale(-1, 1);
+    transform: scale(-1, 1);    
+}
+
+@keyframes rtlSpin{
+  0%{
+      -moz-transform: rotate(1turn);
+      -webkit-transform: rotate(1turn);
+      -o-transform: rotate(1turn);
+      -ms-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+  100%{
+      -moz-transform: rotate(0turn);
+      -webkit-transform: rotate(0turn);
       -o-transform: rotate(0turn);
+      -ms-transform: rotate(0turn);
+    transform: rotate(0turn);
+  }
+}
+@-moz-keyframes rtlSpin{
+  0%{
+      -moz-transform: rotate(1turn);
+    transform: rotate(1turn);
   }
   100%{
+      -moz-transform: rotate(0turn);
+    transform: rotate(0turn);
+  }
+}
+@-webkit-keyframes rtlSpin{
+  0%{
+      -webkit-transform: rotate(1turn);
     transform: rotate(1turn);
+  }
+  100%{
+      -webkit-transform: rotate(0turn);
+    transform: rotate(0turn);
+  }
+}
+@-o-keyframes rtlSpin{
+  0%{
       -o-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+  100%{
+      -o-transform: rotate(0turn);
+    transform: rotate(0turn);
   }
 }
diff --git a/style/night.css b/style/night.css
index 5d24443..192f378 100644
--- a/style/night.css
+++ b/style/night.css
@@ -39,7 +39,7 @@
 
 /* Spinner */
 .night .spinner {
-  background: #2c2c2c;
+  background: rgba(44,44,44,0.5);
   border: none;
 }
 
diff --git a/style/regions.css b/style/regions.css
index 327a5fa..6ce648a 100755
--- a/style/regions.css
+++ b/style/regions.css
@@ -111,3 +111,46 @@ section[role="dialog"].current {
     -ms-transform: translateX(-80%) !important;
   transform: translateX(-80%) !important;
 }
+
+
+/* RTL */
+.rtl section[role="region"] {
+    -moz-transform: translateX(100%);
+    -webkit-transform: translateX(100%);
+    -o-transform: translateX(100%); 
+    -ms-transform: translateX(100%); 
+  transform: translateX(100%);
+}
+
+.rtl section[role="region"].current,
+.rtl [role="region"].parent {
+    -moz-transform: none;
+    -webkit-transform: none;
+    -o-transform: none;
+    -ms-transform: none; 
+  transform: none;
+}
+
+.rtl section[role="region"].current ~ section[role="region"] {  
+    -moz-transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
+    -o-transform: translateX(-100%);
+    -ms-transform: translateX(-100%);
+  transform: translateX(-100%);
+}
+
+.rtl [data-state="drawer"].current {
+    -moz-transform: translateX(-80%) !important;
+    -webkit-transform: translateX(-80%) !important;
+    -o-transform: translateX(-80%) !important;
+    -ms-transform: translateX(-80%) !important;
+  transform: translateX(-80%) !important;
+}
+
+.rtl [data-state="drawer"][data-position="right"].current {
+    -moz-transform: translateX(80%) !important;
+    -webkit-transform: translateX(80%) !important;
+    -o-transform: translateX(80%) !important;
+    -ms-transform: translateX(80%) !important;
+  transform: translateX(80%) !important;
+}