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, 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         left: 0;
 338         text-align: left;
 339 }
 340
 341 /* =Attachments
 342 ----------------------------------------------- */
 343
 344 /* =Navigation
 345 -------------------------------------------------------------- */
 346
 347 .nav-previous {
 348         float: right;
 349 }
 350 .nav-next {
 351         float: left;
 352         text-align: left;
 353 }
 354
 355 /* Singular navigation */
 356 #nav-single {
 357         float: left;
 358         text-align: left;
 359 }
 360 #nav-single .nav-next {
 361         padding-left: 0;
 362         padding-right: .5em;
 363 }
 364
 365
 366 /* =Widgets
 367 ----------------------------------------------- */
 368
 369 .widget ul ul {
 370         margin-left: 0;
 371         margin-right: 1.5em;
 372 }
 373
 374 /* Twitter */
 375 .widget_twitter .timesince {
 376         margin-right: 0;
 377         margin-left: -10px;
 378         text-align: left;
 379 }
 380
 381 /* =Comments
 382 ----------------------------------------------- */
 383
 384 .commentlist .children li.comment {
 385         border-left: none;
 386         border-right: 1px solid #ddd;
 387         -moz-border-radius: 3px 0  0 3px;
 388         border-radius: 3px 0 0 3px;
 389 }
 390 .commentlist .children li.comment .comment-meta {
 391         margin-left: 0;
 392         margin-right: 50px;
 393 }
 394 .commentlist .avatar {
 395         left: auto;
 396         right: -102px;
 397 }
 398 .commentlist > li:before {
 399         content: url(images/comment-arrow-rtl.png);
 400         left:auto;
 401         right: -21px;
 402 }
 403 .commentlist > li.pingback:before {
 404         content: '';
 405 }
 406 .commentlist .children .avatar {
 407         left: auto;
 408         right: 2.2em;
 409 }
 410
 411 /* Post author highlighting */
 412 .commentlist > li.bypostauthor:before {
 413         content: url(images/comment-arrow-bypostauthor-rtl.png);
 414 }
 415
 416 /* sidebar-page.php comments */
 417 /* Make sure we have room for our comment avatars */
 418 .page-template-sidebar-page-php .commentlist > li.comment,
 419 .page-template-sidebar-page-php.commentlist .pingback {
 420         margin-left: 0;
 421         margin-right: 102px;
 422 }
 423
 424 /* Comment Form */
 425 #respond .comment-form-author label,
 426 #respond .comment-form-email label,
 427 #respond .comment-form-url label,
 428 #respond .comment-form-comment label {
 429         left: auto;
 430         right: 4px;
 431 }
 432 #respond .comment-form-author label,
 433 #respond .comment-form-email label,
 434 #respond .comment-form-url label,
 435 #respond .comment-form-comment label {
 436         -webkit-box-shadow: -1px 2px 2px rgba(204,204,204,0.8);
 437         -moz-box-shadow: -1px 2px 2px rgba(204,204,204,0.8);
 438         box-shadow: -1px 2px 2px rgba(204,204,204,0.8);
 439 }
 440 #respond .comment-form-author .required,
 441 #respond .comment-form-email .required {
 442         left: auto;
 443         right: 75%;
 444 }
 445 #respond .form-submit {
 446         float: left;
 447 }
 448 #respond input#submit {
 449         left: auto;
 450         right: 30px;
 451         padding: 5px 22px 5px 42px;
 452 }
 453 #respond #cancel-comment-reply-link {
 454         margin-left: 0;
 455         margin-right: 10px;
 456 }
 457 #cancel-comment-reply-link {
 458         right: auto;
 459         left: 1.625em;
 460 }
 461
 462 /* =Footer
 463 ----------------------------------------------- */
 464
 465 /* Two Footer Widget Areas */
 466 #supplementary.two .widget-area {
 467         float: right;
 468         margin-right: 0;
 469         margin-left: 3.7%;
 470 }
 471 #supplementary.two .widget-area + .widget-area {
 472         margin-left: 0;
 473 }
 474
 475 /* Three Footer Widget Areas */
 476 #supplementary.three .widget-area {
 477         float: right;
 478         margin-right: 0;
 479         margin-left: 3.7%;
 480 }
 481 #supplementary.three .widget-area + .widget-area + .widget-area {
 482         margin-left: 0;
 483 }
 484
 485 /* Site Generator Line */
 486 #site-generator .sep {
 487         background-position: right center;
 488 }
 489
 490
 491 /* =Responsive Structure
 492 ----------------------------------------------- */
 493
 494 @media (max-width: 800px) {
 495         /* Simplify the showcase template when small feature */
 496         section.featured-post .attachment-small-feature,
 497         .one-column section.featured-post .attachment-small-feature {
 498                 float: right;
 499         }
 500         article.feature-image.small {
 501                 float: left;
 502         }
 503         article.feature-image.small .entry-summary p a {
 504                 right: 0;
 505         }
 506         .singular .entry-meta .edit-link a {
 507                 left: auto;
 508                 right: 0px;
 509         }
 510         /* Make sure we have room for our comment avatars */
 511         .commentlist > li.comment,
 512         .commentlist .pingback {
 513                 margin-left: 0;
 514                 margin-right: 102px;
 515         }
 516         /* No need to float footer widgets at this size */
 517         #colophon #supplementary .widget-area {
 518                 margin-left: 0;
 519         }
 520         /* No need to float 404 widgets at this size */
 521         .error404 #main .widget {
 522                 margin-left: 0;
 523         }
 524 }
 525 @media (max-width: 650px) {
 526         /* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
 527         #site-title,
 528         #site-description {
 529                 margin-left: 0;
 530         }
 531         /* Talking avatars take up too much room at this size */
 532         .commentlist > li.comment,
 533         .commentlist > li.pingback {
 534                 margin-right: 0 !important;
 535         }
 536         .commentlist .children .avatar {
 537                 left: auto;
 538                 right: 2.2em;
 539         }
 540         /* Use the available space in the smaller comment form */
 541         #respond .comment-form-author .required,
 542         #respond .comment-form-email .required {
 543             left: auto;
 544             right: 95%;
 545         }
 546         #content .gallery-columns-3 .gallery-item {
 547                 padding-right: 0;
 548                 padding-left:2%;
 549         }
 550 }
 551 @media (max-width: 450px) {
 552         #content .gallery-columns-2 .gallery-item {
 553                 padding-right:0;
 554                 padding-left:4%;
 555         }
 556 }
 557
 558 /* =Print
 559 ----------------------------------------------- */
 560
 561 @media print {
 562         #primary {
 563             float: right;
 564         }
 565         /* Comments */
 566         .commentlist .avatar {
 567             left: auto;
 568             right: 2.2em;
 569         }
 570         .commentlist li.comment .comment-meta {
 571             margin-left: 0;
 572             margin-right: 50px;
 573         }
 574 }
 575
 576 /* =IE7
 577 ----------------------------------------------- */
 578
 579 #ie7 section.recent-posts {
 580         margin-right: 0;
 581         margin-left: 7.6%;
 582 }