rtl.css

/*
Theme Name: SiteOrigin North
Adding support for language written in a Right To Left (RTL) direction is easy -
it's just a matter of overwriting all the horizontal positioning attributes
of your CSS stylesheet in a separate stylesheet file named rtl.css.

https://codex.wordpress.org/Right_to_Left_Language_Support

*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Elements
  ## Lists
  ## Forms
# Accessibility
#Layout
  ## General Layout
  ## Site Masthead
  ## Site Footer
  ## Widgets
# Content
  ## Posts and pages
  ## Comments
  ## Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
body {
  direction: rtl;
  unicode-bidi: embed; }

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Lists
--------------------------------------------------------------*/
ul, ol {
  margin: 0 3em 1.5em 0; }

li > ul,
li > ol {
  margin-left: auto;
  margin-right: 1.5em; }

dd {
  margin: 0 0 1.5em 1.5em; }

/*--------------------------------------------------------------
## Forms
--------------------------------------------------------------*/
textarea {
  padding-left: 0;
  padding-right: 3px; }

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
.screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus {
  left: auto;
  right: 5px; }

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## General Layout
--------------------------------------------------------------*/
.content-area {
  float: right;
  margin: 0 0 0 -35%; }
  @media (max-width: 600px) {
    body.rtl.responsive .content-area {
      margin: 0 !important; } }

.site-main {
  margin: 0 0 0 35%; }
  @media (max-width: 600px) {
    body.rtl.responsive .site-main {
      margin: 0 !important; } }

.site-content .widget-area {
  float: left;
  padding-right: 40px;
  padding-left: 0; }
  @media (max-width: 600px) {
    body.rtl.responsive .site-content .widget-area {
      padding-right: 0; } }

/*--------------------------------------------------------------
## Site Masthead
--------------------------------------------------------------*/
#masthead .site-branding {
  padding-right: 0;
  padding-left: 20px; }
  #masthead .site-branding > * {
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -ms-transform-origin: right center;
    -o-transform-origin: right center;
    transform-origin: right center; }

#topbar p {
  text-align: left; }

/*--------------------------------------------------------------
## Site Footer
--------------------------------------------------------------*/
#colophon .widgets .widget-wrapper {
  border-right: none;
  border-left: 1px solid #d4d4d4;
  float: right; }
  #colophon .widgets .widget-wrapper:last-child {
    border-left: none; }

#colophon .widgets aside:last-child {
  border-left: 0; }

@media (max-width: 640px) {
  #colophon .widgets .widget-wrapper {
    border-left: none; } }

#scroll-to-top {
  left: 20px;
  margin-left: auto;
  margin-right: -22px;
  right: auto; }
  #scroll-to-top img {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg); }

/*--------------------------------------------------------------
## Widgets
--------------------------------------------------------------*/
.widget ul {
  margin-right: 0;
  padding-left: 0;
  padding-right: 1.275em; }

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.entry-meta li {
  margin-right: auto;
  margin-left: 12px; }

.entry-meta li .meta-icon {
  float: right;
  margin-right: auto;
  margin-left: 6px; }

.tags-list a {
  margin-right: auto;
  margin-left: 10px; }

.more-link {
  float: left; }

.author-box .author-avatar {
  float: right; }

.author-box .author-description {
  margin-left: 0;
  margin-right: 120px; }

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-list li.comment .comment-container {
  margin-left: auto;
  margin-right: 120px; }

.comment-list li.comment .avatar-container {
  float: right; }

.comment-list li.comment .comment-reply-link {
  float: left; }

.comment-list li.comment .children {
  margin-left: auto;
  margin-right: 70px; }

.comment-list li.comment.pingback .comment-container {
  margin-right: auto; }

#commentform .comment-form-author, #commentform .comment-form-email, #commentform .comment-form-url {
  float: right; }

#commentform .form-submit {
  text-align: left; }
  #commentform .form-submit input {
    float: left; }
    #commentform .form-submit input:hover {
      box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.1); }

/*--------------------------------------------------------------
## Navigation
--------------------------------------------------------------*/
.main-navigation {
  text-align: left; }
  .main-navigation ul {
    padding-right: 0; }
    .main-navigation ul ul {
      text-align: right; }
      .main-navigation ul ul ul {
        left: auto;
        right: 100%;
        margin-left: auto !important;
        margin-right: 0 !important; }
      .main-navigation ul ul li:hover > ul,
      .main-navigation ul ul li.focus > ul {
        left: auto;
        right: 100%; }
  .main-navigation .svg-icon-menu {
    float: right; }

#header-search {
  left: auto;
  right: 0; }
  #header-search form {
    right: 20px;
    left: 59px; }
  #header-search input[type="search"] {
    right: auto;
    left: 20px; }
  #header-search #close-search {
    right: auto;
    left: 20px; }
    #header-search #close-search.animate-in {
      -webkit-transform: scale(1) rotate(-90deg);
      -moz-transform: scale(1) rotate(-90deg);
      -ms-transform: scale(1) rotate(-90deg);
      -o-transform: scale(1) rotate(-90deg);
      transform: scale(1) rotate(-90deg); }

#mobile-navigation {
  left: auto;
  right: 0; }
  #mobile-navigation ul ul li {
    padding-left: 0;
    padding-right: 2em; }

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  float: right; }
  .comment-navigation .nav-previous .north-icon-next,
  .posts-navigation .nav-previous .north-icon-next,
  .post-navigation .nav-previous .north-icon-next {
    float: right;
    margin: 0.25em 5px; }

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  float: left;
  text-align: left; }
  .comment-navigation .nav-next .north-icon-previous,
  .posts-navigation .nav-next .north-icon-previous,
  .post-navigation .nav-next .north-icon-previous {
    float: left;
    margin: 0.25em 5px 0 0; }