wp-content/themes/twentyeleven/rtl.css

   1 /*
   2 Theme Name: Twenty Eleven
   3
   4 Adding support for language written in a Right To Left (RTL) direction is easy -
   5 it's just a matter of overwriting all the horizontal positioning attributes
   6 of your CSS stylesheet in a separate stylesheet file named rtl.css.
   7
   8 http://codex.wordpress.org/Right_to_Left_Language_Support
   9
  10 */
  11
  12 /* =Reset reset
  13 ----------------------------------------------- */
  14
  15 caption, th, td {
  16         text-align: right;
  17 }
  18
  19 /* =Structure
  20 ----------------------------------------------- */
  21
  22 body {
  23         direction:rtl;
  24         unicode-bidi:embed;
  25 }
  26
  27 /* Showcase */
  28 .page-template-showcase-php section.recent-posts {
  29         float: left;
  30         margin: 0 31% 0 0;
  31 }
  32 .page-template-showcase-php #main .widget-area {
  33         float: right;
  34         margin: 0 0 0 -22.15%;
  35 }
  36
  37 /* One column */
  38
  39 .one-column article.feature-image.small .entry-summary a {
  40         left: auto;
  41         right: -9%;
  42 }
  43
  44 /* Simplify the pullquotes and pull styles */
  45 .one-column.singular .entry-meta .edit-link a {
  46         right: 0px;
  47         left: auto;
  48 }
  49 /* Make sure we have room for our comment avatars */
  50 .one-column .commentlist > li.comment {
  51         margin-left: 0;
  52         margin-right: 102px;
  53 }
  54 /* Make sure the logo and search form don't collide */
  55 .one-column #branding #searchform {
  56         right: auto;
  57         left: 40px;
  58 }
  59 /* Talking avatars take up too much room at this size */
  60 .one-column .commentlist > li.comment {
  61         margin-right: 0;
  62 }
  63 .one-column .commentlist > li.comment .comment-meta,
  64 .one-column .commentlist > li.comment .comment-content {
  65         margin-right: 0;
  66         margin-left: 85px;
  67 }
  68 .one-column .commentlist .avatar {
  69         right: auto;
  70         left: 1.625em;
  71 }
  72 .one-column .commentlist .children .avatar {
  73         left: auto;
  74         right: 2.2em;
  75 }
  76
  77 /* =Global
  78 ----------------------------------------------- */
  79
  80 /* Text elements */
  81 p {
  82         margin-bottom: 1.625em;
  83 }
  84 ul, ol {
  85         margin: 0 2.5em 1.625em 0;
  86 }
  87 .ltr ul, .ltr ol {
  88         margin: 0 0 1.625em 2.5em;
  89 }
  90 blockquote {
  91         font-family: Arial, sans-serif;
  92 }
  93 blockquote em, blockquote i, blockquote cite {
  94         font-style: normal;
  95 }
  96
  97 /* Forms */
  98 textarea {
  99         padding-left: 0;
 100         padding-right: 3px;
 101 }
 102 input#s {
 103         background-position: 97% 6px;
 104         padding: 4px 28px 4px 10px;
 105 }
 106
 107 /* Assistive text */
 108 #access a.assistive-text:active,
 109 #access a.assistive-text:focus {
 110         left: auto;
 111         right: 7.6%;
 112 }
 113
 114 /* =Header
 115 ----------------------------------------------- */
 116
 117 #site-title {
 118         margin-right: 0;
 119         margin-left: 270px;
 120 }
 121
 122 #site-description {
 123         margin: 0 0 3.65625em 270px;
 124 }
 125
 126 /* =Menu
 127 -------------------------------------------------------------- */
 128
 129 #access {
 130         float: right;
 131 }
 132 #access ul {
 133         margin: 0 -0.8125em 0 0;
 134         padding-right: 0;
 135 }
 136 #access li {
 137         float: right;
 138 }
 139 #access ul ul {
 140         float: right;
 141         left: auto;
 142         right: 0;
 143 }
 144 #access ul ul ul {
 145         left: auto;
 146         right: 100%;
 147 }
 148
 149 /* Search Form */
 150 #branding #searchform {
 151         right: auto;
 152         left: 7.6%;
 153         text-align: left;
 154 }
 155 #branding #s {
 156         float: left;
 157 }
 158 #branding .only-search + #access div {
 159         padding-right: 0;
 160         padding-left: 205px;
 161 }
 162
 163
 164 /* =Content
 165 ----------------------------------------------- */
 166 .entry-title,
 167 .entry-header .entry-meta {
 168         padding-right: 0;
 169         padding-left: 76px;
 170 }
 171 .entry-content td,
 172 .comment-content td {
 173         padding: 6px 0 6px 10px;
 174 }
 175 .page-link span {
 176         margin-right: 0;
 177         margin-left: 6px;
 178 }
 179 .entry-meta .edit-link a {
 180         float: left;
 181 }
 182 /* Images */
 183
 184 .wp-caption .wp-caption-text,
 185 .gallery-caption {
 186         font-family: Arial, sans-serif;
 187 }
 188 .wp-caption .wp-caption-text {
 189         padding: 10px 40px 5px 0px;
 190 }
 191 .wp-caption .wp-caption-text:before {
 192         margin-right: 0;
 193         margin-left: 5px;
 194         left: auto;
 195         right: 10px;
 196 }
 197 #content .gallery-columns-4 .gallery-item {
 198         padding-right:0;
 199         padding-left:2%;
 200 }
 201
 202 /* Author Info */
 203 .singular #author-info {
 204         margin: 2.2em -35.4% 0 -35.6%;
 205 }
 206 #author-avatar {
 207         float: right;
 208         margin-right: 0;
 209         margin-left: -78px;
 210 }
 211 #author-description {
 212         float: right;
 213         margin-left: 0;
 214         margin-right: 108px;
 215 }
 216 /* Comments link */
 217 .entry-header .comments-link a {
 218         background-image: url(images/comment-bubble-rtl.png);
 219         right: auto;
 220         left: 0;
 221 }
 222
 223 /*
 224         Post Formats Headings
 225 */
 226 .singular .entry-title,
 227 .singular .entry-header .entry-meta {
 228         padding-left: 0;
 229 }
 230 .singular .entry-header .entry-meta {
 231         left: auto;
 232         right: 0;
 233 }
 234 .singular .entry-meta .edit-link a {
 235         left: auto;
 236         right: 50px;
 237 }
 238
 239
 240 /* =Gallery
 241 ----------------------------------------------- */
 242
 243 .format-gallery .gallery-thumb {
 244         float: right;
 245         margin: .375em 0 0 1.625em;
 246 }
 247
 248
 249 /* =Status
 250 ----------------------------------------------- */
 251
 252 .format-status img.avatar {
 253         float: right;
 254         margin: 4px 0 2px 10px;
 255 }
 256
 257
 258 /* =Image
 259 ----------------------------------------------- */
 260
 261 .indexed.format-image div.entry-meta {
 262         float: right;
 263 }
 264 /* =error404
 265 ----------------------
 266 ------------------------- */
 267 .error404 #main .widget {
 268         float: right;
 269         margin-right: auto;
 270         margin-left: 3.7%;
 271 }
 272 .error404 #main .widget_archive {
 273         margin-left: 0;
 274 }
 275 .error404 #main .widget_tag_cloud {
 276         margin-left: 0;
 277 }
 278
 279 /* =Showcase
 280 ----------------------------------------------- */
 281
 282 article.intro .edit-link a {
 283         right: auto;
 284         left: 20px;
 285 }
 286
 287 /* Featured post */
 288 section.featured-post {
 289         float: right;
 290 }
 291
 292 /* Small featured post */
 293 section.featured-post .attachment-small-feature {
 294         float: left;
 295         margin: 0 0 1.625em -8.9%;
 296         right: auto;
 297         left: -15px;
 298 }
 299 article.feature-image.small {
 300         float: right;
 301 }
 302 article.feature-image.small .entry-summary p a {
 303         left:auto;
 304         right: -23.8%;
 305         padding: 9px 85px 9px 26px;
 306 }
 307
 308 /* Large featured post */
 309 section.feature-image.large .hentry {
 310         left:auto;
 311         right: 9%;
 312         margin: 1.625em 0 0 9%;
 313 }
 314 /* Featured Slider */
 315 .featured-posts .showcase-heading {
 316         padding-left: 0;
 317         padding-right: 8.9%;
 318 }
 319 .featured-posts section.featured-post {
 320         left: auto;
 321         right: 0;
 322 }
 323 #content .feature-slider {
 324         right: auto;
 325         left: 8.9%;
 326 }
 327 .feature-slider li {
 328         float: right;
 329 }
 330 /* Recent Posts */
 331 section.recent-posts .other-recent-posts a[rel="bookmark"] {
 332         float: right;
 333 }
 334 section.recent-posts .other-recent-posts .comments-link a,
 335 section.recent-posts .other-recent-posts .comments-link > span {
 336         padding: 0.3125em 1em 0.3125em 0;
 337         right: auto;
 338         left: 0;
 339         text-align: left;
 340 }
 341
 342 /* =Attachments
 343 ----------------------------------------------- */
 344
 345 /* =Navigation
 346 -------------------------------------------------------------- */
 347
 348 .nav-previous {
 349         float: right;
 350 }
 351 .nav-next {
 352         float: left;
 353         text-align: left;
 354 }
 355
 356 /* Singular navigation */
 357 #nav-single {
 358         float: left;
 359         text-align: left;
 360 }
 361 #nav-single .nav-next {
 362         padding-left: 0;
 363         padding-right: .5em;
 364 }
 365
 366
 367 /* =Widgets
 368 ----------------------------------------------- */
 369
 370 .widget ul ul {
 371         margin-left: 0;
 372         margin-right: 1.5em;
 373 }
 374
 375 /* Twitter */
 376 .widget_twitter .timesince {
 377         margin-right: 0;
 378         margin-left: -10px;
 379         text-align: left;
 380 }
 381
 382 /* =Comments
 383 ----------------------------------------------- */
 384
 385 .commentlist .children li.comment {
 386         border-left: none;
 387         border-right: 1px solid #ddd;
 388         -moz-border-radius: 3px 0  0 3px;
 389         border-radius: 3px 0 0 3px;
 390 }
 391 .commentlist .children li.comment .comment-meta {
 392         margin-left: 0;
 393         margin-right: 50px;
 394 }
 395 .commentlist .avatar {
 396         left: auto;
 397         right: -102px;
 398 }
 399 .commentlist > li:before {
 400         content: url(images/comment-arrow-rtl.png);
 401         left:auto;
 402         right: -21px;
 403 }
 404 .commentlist > li.pingback:before {
 405         content: '';
 406 }
 407 .commentlist .children .avatar {
 408         left: auto;
 409         right: 2.2em;
 410 }
 411
 412 /* Post author highlighting */
 413 .commentlist > li.bypostauthor:before {
 414         content: url(images/comment-arrow-bypostauthor-rtl.png);
 415 }
 416
 417 /* sidebar-page.php comments */
 418 /* Make sure we have room for our comment avatars */
 419 .page-template-sidebar-page-php .commentlist > li.comment,
 420 .page-template-sidebar-page-php.commentlist .pingback {
 421         margin-left: 0;
 422         margin-right: 102px;
 423 }
 424
 425 /* Comment Form */
 426 #respond .comment-form-author label,
 427 #respond .comment-form-email label,
 428 #respond .comment-form-url label,
 429 #respond .comment-form-comment label {
 430         left: auto;
 431         right: 4px;
 432 }
 433 #respond .comment-form-author label,
 434 #respond .comment-form-email label,
 435 #respond .comment-form-url label,
 436 #respond .comment-form-comment label {
 437         -webkit-box-shadow: -1px 2px 2px rgba(204,204,204,0.8);
 438         -moz-box-shadow: -1px 2px 2px rgba(204,204,204,0.8);
 439         box-shadow: -1px 2px 2px rgba(204,204,204,0.8);
 440 }
 441 #respond .comment-form-author .required,
 442 #respond .comment-form-email .required {
 443         left: auto;
 444         right: 75%;
 445 }
 446 #respond .form-submit {
 447         float: left;
 448 }
 449 #respond input#submit {
 450         left: auto;
 451         right: 30px;
 452         padding: 5px 22px 5px 42px;
 453 }
 454 #respond #cancel-comment-reply-link {
 455         margin-left: 0;
 456         margin-right: 10px;
 457 }
 458 #cancel-comment-reply-link {
 459         right: auto;
 460         left: 1.625em;
 461 }
 462
 463 /* =Footer
 464 ----------------------------------------------- */
 465
 466 /* Two Footer Widget Areas */
 467 #supplementary.two .widget-area {
 468         float: right;
 469         margin-right: 0;
 470         margin-left: 3.7%;
 471 }
 472 #supplementary.two .widget-area + .widget-area {
 473         margin-left: 0;
 474 }
 475
 476 /* Three Footer Widget Areas */
 477 #supplementary.three .widget-area {
 478         float: right;
 479         margin-right: 0;
 480         margin-left: 3.7%;
 481 }
 482 #supplementary.three .widget-area + .widget-area + .widget-area {
 483         margin-left: 0;
 484 }
 485
 486 /* Site Generator Line */
 487 #site-generator .sep {
 488         background-position: right center;
 489 }
 490
 491
 492 /* =Responsive Structure
 493 ----------------------------------------------- */
 494
 495 @media (max-width: 800px) {
 496         /* Simplify the showcase template when small feature */
 497         section.featured-post .attachment-small-feature,
 498         .one-column section.featured-post .attachment-small-feature {
 499                 float: right;
 500         }
 501         article.feature-image.small {
 502                 float: left;
 503         }
 504         article.feature-image.small .entry-summary p a {
 505                 right: 0;
 506         }
 507         .singular .entry-meta .edit-link a {
 508                 left: auto;
 509                 right: 0px;
 510         }
 511         /* Make sure we have room for our comment avatars */
 512         .commentlist > li.comment,
 513         .commentlist .pingback {
 514                 margin-left: 0;
 515                 margin-right: 102px;
 516         }
 517         /* No need to float footer widgets at this size */
 518         #colophon #supplementary .widget-area {
 519                 margin-left: 0;
 520         }
 521         /* No need to float 404 widgets at this size */
 522         .error404 #main .widget {
 523                 margin-left: 0;
 524         }
 525 }
 526 @media (max-width: 650px) {
 527         /* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
 528         #site-title,
 529         #site-description {
 530                 margin-left: 0;
 531         }
 532         /* Talking avatars take up too much room at this size */
 533         .commentlist > li.comment,
 534         .commentlist > li.pingback {
 535                 margin-right: 0 !important;
 536         }
 537         .commentlist .children .avatar {
 538                 left: auto;
 539                 right: 2.2em;
 540         }
 541         /* Use the available space in the smaller comment form */
 542         #respond .comment-form-author .required,
 543         #respond .comment-form-email .required {
 544             left: auto;
 545             right: 95%;
 546         }
 547         #content .gallery-columns-3 .gallery-item {
 548                 padding-right: 0;
 549                 padding-left:2%;
 550         }
 551 }
 552 @media (max-width: 450px) {
 553         #content .gallery-columns-2 .gallery-item {
 554                 padding-right:0;
 555                 padding-left:4%;
 556         }
 557 }
 558
 559 /* =Print
 560 ----------------------------------------------- */
 561
 562 @media print {
 563         #primary {
 564             float: right;
 565         }
 566         /* Comments */
 567         .commentlist .avatar {
 568             left: auto;
 569             right: 2.2em;
 570         }
 571         .commentlist li.comment .comment-meta {
 572             margin-left: 0;
 573             margin-right: 50px;
 574         }
 575 }
 576
 577 /* =IE7
 578 ----------------------------------------------- */
 579
 580 #ie7 section.recent-posts {
 581         margin-right: 0;
 582         margin-left: 7.6%;
 583 }