CSS editing for RTL

  

Hi,


I'm currently editing the SILK UI Framewrok, Navigation Wizard 3steps weblock to use it in RTL based page. I shall edit its CSS to be compatible with RTL (Right to lift), I try to replace each right by left and vise versa, but each time i fail to get good result; could you help guys with this :


SyntaxEditor Code Snippet

/* Wizard **************************/
.WizardParent {
    border: 1px solid #e2e2e2;
    display: table;
    overflow: hidden;
    width: 100%;
}

.WizardStep {
    background: #fff;
    display: table-cell;
    font-weight: 600;
    line-height: 38px;
    padding-right: 20px;
    position: relative;
    text-align: center;
    width: 1%;

    -servicestudio-display: inline-block;
    -servicestudio-width: 20%;
}

.WizardStep.ActiveStep {
    background: #e2e2e2;
    color: #fff;
    font-weight: bold;
}

.WizardStep.Past {
    background: #fff;
}

.WizardStep a,
.WizardStep a:link {
    display: block;
    line-height: 38px;
    text-align: center;
}

.WizardStep a,
.WizardStep a:link,
.WizardStep a[disabled="disabled"],
.WizardStep a[disabled="disabled"]:hover {
    color: #333;
}

/* after: right arrow on wizard step **************************/
.WizardStep:after {
    border-right: 1px solid #e2e2e2;
    border-top: 1px solid #e2e2e2;
    content: "";
    height: 38px;
    position: absolute;
    right: 8px;
    top: 0;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    width: 38px;
    z-index: 1;
}

.WizardStep:last-of-type:after {
    background: none;
}

/* before: left "inverted" arrow on wizard step **************************/
.WizardStep:before {
    border-bottom: 20px solid #fff;
    border-left: 20px solid transparent;
    border-top: 20px solid #fff;
    content: "";
    height: 0;
    left: -20px;
    position: absolute;
    top: 0;
    width: 0;
}

.WizardStep:first-of-type:before {
    border: none;
    margin-left: 0;
}

.WizardStep.Past:before {
    border-bottom-color: #fff;
    border-top-color: #fff;
}

.WizardStep.ActiveStep\:before {
    border-bottom-color: #e2e2e2;
    border-top-color: #e2e2e2;
}

.WizardStep.LastStep\:after,
.WizardStep.ActiveStep\:after,
.WizardStep.HideArrow\:after,
.WizardStep\:last-of-type\:after {
    border: 0;
    content: "";
}

/* !important needed to override in all themes **************************/
.ie7 .WizardStep:after,
.ie8 .WizardStep:after {
    right: 0 !important;
    width: 0 !important;
}

.ie7 .WizardStep:before,
.ie8 .WizardStep:before {
    content: none !important;
}

Hi,

I am assuming this is related to this issue: http://www.outsystems.com/forums/discussion/19641/fixing-css-expert-needed/ ?