J1.5

Customising the JA Purity template/template.css

From Joomla! Documentation

< J1.5:Customising the JA Purity template

The "J1.5" namespace is an archived namespace. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

CSS Files

ja_purity/css/template.css

   1 /* COMMON STYLE
   2 --------------------------------------------------------- */
   3 html, body, form, fieldset {
   4 	margin: 0;
   5 	padding: 0;
   6 }
   7 
   8 body {
   9 	color: #000000;
  10 	background: #FFFFFF;
  11 	font-family: Arial, Helvetica, sans-serif;
  12 	line-height: 150%;
  13 }
  14 
  15 body#bd {
  16 	color: #333333;
  17 	background: #F2F2F2;
  18 }
  19 
  20 body.contentpane {
  21 	width: auto; /* Printable Page */
  22 	margin: 1em 2em;
  23 	line-height: 1.3em;
  24 	margin: 0px 0px 0px 0px;
  25 	font-size: 12px;
  26 	color: #333;
  27 }
  28 
  29 body.fs1 {
  30 	font-size: 10px;
  31 }
  32 
  33 body.fs2{
  34 	font-size: 11px;
  35 }
  36 
  37 body.fs3{
  38 	font-size: 12px;
  39 }
  40 
  41 body.fs4{
  42 	font-size: 13px;
  43 }
  44 
  45 body.fs5{
  46 	font-size: 14px;
  47 }
  48 
  49 body.fs6{
  50 	font-size: 15px;
  51 }
  52 
  53 /* Normal link */
  54 a {
  55 	color: #006699;
  56 	text-decoration: underline;
  57 }
  58 
  59 a:hover, a:active, a:focus {
  60 	color: #333333;
  61 	text-decoration: underline;
  62 }
  63 
  64 /* Title text */
  65 .contentheading, .componentheading, .blog_more strong, h1, h2, h3, h4 {
  66 	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  67 }
  68 
  69 /* Small text */
  70 small, .small, .smalldark, .mosimage_caption, .createby, .createdate, .modifydate, a.readon, .img_caption {
  71 	color: #666666;
  72 	font-size: 92%;
  73 }
  74 
  75 /* Heading */
  76 h1 {
  77 	font-size: 180%;
  78 }
  79 
  80 h2 {
  81 	font-size: 150%;
  82 }
  83 
  84 h3 {
  85 	font-size: 125%;
  86 }
  87 
  88 h4 {
  89 	font-size: 100%;
  90 	text-transform: uppercase;
  91 }
  92 
  93 p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 {
  94 	margin: 1em 0;
  95 	padding: 0;
  96 }
  97 
  98 ul {
  99 	list-style: none;
 100 }
 101 
 102 ul li {
 103 	padding-left: 30px;
 104 	background: url(../images/bullet.gif) no-repeat 18px 8px;
 105 	line-height: 180%;
 106 }
 107 
 108 ol li {
 109 	margin-left: 35px;
 110 	line-height: 180%;
 111 }
 112 
 113 th {
 114 	padding: 5px;
 115 	font-weight: bold;
 116 	text-align: left;
 117 }
 118 
 119 fieldset {
 120 	border: none;
 121 	padding: 10px 5px;
 122 	background: url(../images/hdot2.gif) repeat-x top;
 123 }
 124 
 125 fieldset a {
 126 	font-weight: bold;
 127 }
 128 
 129 hr {
 130 	border-top: 1px solid #CCCCCC;
 131 	border-right: 0;
 132 	border-left: 0;
 133 	border-bottom: 0;
 134 	height: 1px;
 135 }
 136 
 137 td, div {
 138 	font-size: 100%;
 139 }
 140 
 141 img {
 142 	border: none;
 143 }
 144 /* FORM
 145 --------------------------------------------------------- */
 146 form {
 147 	margin: 0;
 148 	padding: 0;
 149 }
 150 
 151 form label {
 152 	cursor: pointer;
 153 }
 154 
 155 input, select, textarea, .inputbox {
 156 	padding: 3px 5px;
 157 	font-family: Tahoma, Arial, Helvetica, sans-serif;
 158 	font-size: 100%;
 159 }
 160 
 161 .button {
 162 	padding: 3px 5px;
 163 	border: 1px solid #333333;
 164 	background: url(../images/grad1.gif) repeat-x top #333333;
 165 	color: #CCCCCC;
 166 	font-size: 85%;
 167 	text-transform: uppercase;
 168 }
 169 
 170 .button:hover, .button:focus {
 171 	border: 1px solid #999999;
 172 	background: #333333;
 173 	color: #FFFFFF;
 174 }
 175 
 176 * html .button {
 177 	padding: 2px 0 !important; /*IE 6*/
 178 }
 179 
 180 *+html .button {
 181 	padding: 2px 0 !important; /*IE 7*/
 182 }
 183 
 184 .inputbox {
 185 	border: 1px solid #CCCCCC;
 186 	background: #FFFFFF;
 187 }
 188 
 189 .inputbox:hover, .inputbox:focus {
 190 	background: #FFFFCC;
 191 }
 192 
 193 /* BONUS TYPOGRAPHY STYLES
 194 --------------------------------------------------------- */
 195 pre, .code {
 196 	padding: 10px 15px;
 197 	margin: 5px 0 15px;
 198 	border-left: 5px solid #999999;
 199 	background: #FFFFFF;
 200 	font: 1em/1.5 "Courier News", monospace;
 201 }
 202 
 203 blockquote {
 204 	padding: 1em 40px 1em 15px;
 205 }
 206 
 207 blockquote span.open {
 208 	padding: 0 0 0 20px;
 209 	background: url(../images/so-q.gif) no-repeat left top;
 210 }
 211 
 212 blockquote span.close {
 213 	padding: 0 20px 0 0;
 214 	background: url(../images/sc-q.gif) no-repeat bottom right;
 215 }
 216 
 217 /* Quote hilight */
 218 .quote-hilite {
 219 	padding: 10px 15px;
 220 	margin: 0;
 221 	border: 1px solid #CACACC;
 222 	background: #FFFFFF;
 223 }
 224 
 225 /* Small quote */
 226 .small-quote {
 227 	margin: 0;
 228 	padding: 0;
 229 	background: none;
 230 }
 231 
 232 .small-quote span.open-quote {
 233 	margin: 0;
 234 	padding-left: 20px;
 235 	background: url(../images/so-q.gif) no-repeat center left;
 236 }
 237 
 238 .small-quote span.close-quote {
 239 	margin: 0;
 240 	padding-right: 20px;
 241 	background: url(../images/sc-q.gif) no-repeat center right;
 242 }
 243 
 244 .small-quote span.author {
 245 	padding: 2px 5px 2px 20px;
 246 	border-top: 1px solid #DCDDE0;
 247 	margin: 0.5em 0 0;
 248 	display: block;
 249 	background: url(../images/author.gif) no-repeat 5px 4px #EAEBEE;
 250 	font-size: 90%;
 251 	text-transform: uppercase;
 252 }
 253 
 254 /* Rropcap */
 255 .dropcap {
 256 	float: left;
 257 	padding: 4px 8px 0 0;
 258 	display: block;
 259 	color: #999999;
 260 	font: 50px/40px Georgia, Times, serif;
 261 }
 262 
 263 /* Tips, Error, Message, Hightlight*/
 264 p.error {
 265 	padding-left: 25px;
 266 	color: #BF0000;
 267 	background: url(../images/icon-error.gif) no-repeat top left;
 268 }
 269 
 270 p.message {
 271 	padding-left: 25px;
 272 	color: #006699;
 273 	background: url(../images/icon-info.gif) no-repeat top left;
 274 }
 275 
 276 p.tips {
 277 	padding-left: 25px;
 278 	color: #EE9600;
 279 	background: url(../images/icon-tips.gif) no-repeat top left;
 280 }
 281 
 282 .highlight {
 283 	padding: 1px 5px;
 284 	background: #FFFFCC;
 285 	font-weight: bold;
 286 }
 287 
 288 /* Note Style */
 289 p.stickynote {
 290 	padding: 10px 0px 10px 40px;
 291 	border: 1px solid #CACACC;
 292 	background: url(../images/sticky-bg.gif) no-repeat 5px center #FFFFFF;
 293 }
 294 
 295 p.download {
 296 	padding: 10px 0px 10px 40px;
 297 	border: 1px solid #CACACC;
 298 	background: url(../images/download-bg.gif) no-repeat 5px center #FFFFFF;
 299 }
 300 
 301 .blocknumber {
 302 	clear: both;
 303 	padding: 5px 15px 10px;
 304 	position: relative;
 305 }
 306 
 307 /* Check list */
 308 ul.checklist {
 309 	list-style: none;
 310 }
 311 
 312 ul.checklist li {
 313 	margin-left: 15px;
 314 	padding: 0 0 5px 20px;
 315 	background: url(../images/checklist-bg.gif) no-repeat 0 3px;
 316 }
 317 
 318 /* Small checklist */
 319 ul.small-checklist {
 320 	list-style: none;
 321 }
 322 
 323 ul.small-checklist li {
 324 	margin-left: 15px;
 325 	padding: 0 0 5px 20px;
 326 	background: url(../images/icon_list.gif) no-repeat 0 3px;
 327 }
 328 
 329 /* Check list */
 330 ul.stars {
 331 	list-style: none;
 332 }
 333 
 334 ul.stars li {
 335 	margin-left: 15px;
 336 	padding: 0px 0 5px 20px;
 337 	background: url(../images/star-bg.gif) no-repeat 0 3px;
 338 }
 339 
 340 /* Bignumber */
 341 .bignumber {
 342 	float: left;
 343 	margin-right: 8px;
 344 	padding: 6px 7px;
 345 	display: block;
 346 	background: url(../images/ol-bg.gif) no-repeat top left;
 347 	color: #7BA566;
 348 	font: bold 20px/normal Arial, sans-serif;
 349 }
 350 
 351 /* Talking box. Thinking box. */
 352 div.bubble1, div.bubble2, div.bubble3, div.bubble4 {
 353 	margin: 15px 0;
 354 }
 355 
 356 div.bubble1 span.author,
 357 div.bubble2 span.author,
 358 div.bubble3 span.author,
 359 div.bubble4 span.author {
 360 	padding-left: 15px;
 361 	margin-left: 15px;
 362 	background: url(../images/author.gif) no-repeat center left;
 363 	font-weight: bold;
 364 }
 365 
 366 div.bubble1 div {
 367 	margin: 0;
 368 	width: 100%;
 369 	background: url(../images/bub1-br.gif) no-repeat bottom right;
 370 }
 371 
 372 div.bubble1 div div {
 373 	background: url(../images/bub1-bl.gif) no-repeat bottom left;
 374 }
 375 
 376 div.bubble1 div div div {
 377 	background: url(../images/bub1-tr.gif) no-repeat top right;
 378 }
 379 
 380 div.bubble1 div div div div {
 381 	background: url(../images/bub1-tl.gif) no-repeat top left;
 382 }
 383 
 384 div.bubble1 div div div div div {
 385 	margin: 0;
 386 	padding: 15px 15px 30px 15px;
 387 	width: auto;
 388 }
 389 
 390 div.bubble2 div {
 391 	margin: 0;
 392 	width: 100%;
 393 	background: url(../images/bub2-br.gif) no-repeat bottom right;
 394 }
 395 
 396 div.bubble2 div div {
 397 	background: url(../images/bub2-bl.gif) no-repeat bottom left;
 398 }
 399 
 400 div.bubble2 div div div {
 401 	background: url(../images/bub2-tr.gif) no-repeat top right;
 402 }
 403 
 404 div.bubble2 div div div div {
 405 	background: url(../images/bub2-tl.gif) no-repeat top left;
 406 }
 407 
 408 div.bubble2 div div div div div {
 409 	margin: 0;
 410 	padding: 15px 15px 35px 15px;
 411 	width: auto;
 412 }
 413 
 414 div.bubble3 div {
 415 	margin: 0;
 416 	width: 100%;
 417 	background: url(../images/bub3-br.gif) no-repeat bottom right;
 418 }
 419 
 420 div.bubble3 div div {
 421 	background: url(../images/bub3-bl.gif) no-repeat bottom left;
 422 }
 423 
 424 div.bubble3 div div div {
 425 	background: url(../images/bub3-tr.gif) no-repeat top right;
 426 }
 427 
 428 div.bubble3 div div div div {
 429 	background: url(../images/bub3-tl.gif) no-repeat top left;
 430 }
 431 
 432 div.bubble3 div div div div div {
 433 	margin: 0;
 434 	padding: 15px 15px 50px 15px;
 435 	width: auto;
 436 }
 437 
 438 div.bubble4 div {
 439 	margin: 0;
 440 	width: 100%;
 441 	background: url(../images/bub4-br.gif) no-repeat bottom right;
 442 }
 443 
 444 div.bubble4 div div {
 445 	background: url(../images/bub4-bl.gif) no-repeat bottom left;
 446 }
 447 
 448 div.bubble4 div div div {
 449 	background: url(../images/bub4-tr.gif) no-repeat top right;
 450 }
 451 
 452 div.bubble4 div div div div {
 453 	background: url(../images/bub4-tl.gif) no-repeat top left;
 454 }
 455 
 456 div.bubble4 div div div div div {
 457 	margin: 0;
 458 	padding: 15px 15px 55px 15px;
 459 	width: auto;
 460 }
 461 
 462 /* Legend */
 463 .legend-title {
 464 	margin: 0;
 465 	padding: 0 3px;
 466 	float: left;
 467 	display: block;
 468 	background: #F6F6F6;
 469 	font-weight: bold;
 470 	position: absolute;
 471 	top: -10px;
 472 	left: 7px;
 473 }
 474 
 475 .legend {
 476 	margin: 20px 0;
 477 	padding: 0 10px;
 478 	border: 1px solid #CACACC;
 479 	background: #FFFFFF;
 480 	position: relative;
 481 }
 482 
 483 /* JOOMLA STYLE
 484 --------------------------------------------------------- */
 485 table.blog {
 486 }
 487 
 488 .article_separator {
 489 	clear: both;
 490 	display: block;
 491 	height: 20px;
 492 }
 493 
 494 .article_column {
 495 }
 496 
 497 .column_separator {
 498 	padding: 0 25px;
 499 }
 500 
 501 /* content tables */
 502 td.sectiontableheader {
 503   padding: 4px;
 504   border-right: 1px solid #fff;
 505 }
 506 
 507 tr.sectiontableentry0 td,
 508 tr.sectiontableentry1 td,
 509 tr.sectiontableentry2 td {
 510   padding: 4px;
 511 }
 512 
 513 td.sectiontableentry0,
 514 td.sectiontableentry1,
 515 td.sectiontableentry2 {
 516   padding: 3px;
 517 }
 518 
 519 table.contentpane {
 520 	border: none;
 521 	width: 100%;
 522 }
 523 
 524 table.contentpaneopen {
 525 	border: none;
 526 	border-collapse: collapse;
 527 	border-spacing: 0;
 528 }
 529 
 530 table.contenttoc {
 531 	margin: 0 0 10px 10px;
 532 	padding: 0;
 533 	width: 35%;
 534 	float: right;
 535 }
 536 
 537 table.contenttoc a {
 538 	text-decoration: none;
 539 }
 540 
 541 table.contenttoc td {
 542 	padding: 1px 5px 1px 25px;
 543 	background: url(../images/bullet-list.gif) no-repeat 5% 50%;
 544 }
 545 
 546 table.contenttoc th {
 547 	padding: 0 0 3PX;
 548 	border-bottom: 1px solid #CCCCCC;
 549 	text-indent: 5px;
 550 }
 551 
 552 table.poll {
 553 	padding: 0;
 554 	width: 100%;
 555 	border-collapse: collapse;
 556 }
 557 
 558 table.pollstableborder {
 559 	padding: 0;
 560 	width: 100%;
 561 	border: none;
 562 	text-align: left;
 563 }
 564 
 565 table.pollstableborder img {
 566 	vertical-align: baseline;
 567 }
 568 
 569 table.pollstableborder td {
 570 	padding: 4px!important;
 571 	border-collapse: collapse;
 572 	border-spacing: 0;
 573 }
 574 
 575 table.pollstableborder tr.sectiontableentry1 td {
 576 	background: #ECECEC;
 577 }
 578 
 579 table.searchintro {
 580 	padding: 10px 0;
 581 	width: 100%;
 582 }
 583 
 584 table.searchintro td {
 585 	padding: 5px!important;
 586 }
 587 
 588 table.adminform {
 589 }
 590 
 591 .adminform .inputbox {
 592 }
 593 
 594 .blog_more {
 595 	padding: 10px 0;
 596 	background: url(../images/hdot.gif) repeat-x top;
 597 }
 598 
 599 .blog_more strong {
 600 	margin: 0 0 5px;
 601 	display: block;
 602 	font-size: 125%;
 603 }
 604 
 605 .blog_more ul {
 606 	margin: 0;
 607 	padding: 0;
 608 }
 609 
 610 .blog_more ul li {
 611 	margin: 0;
 612 	padding: 0 0 0 17px;
 613 	background: url(../images/bullet.gif) no-repeat 6px 8px;
 614 }
 615 
 616 .category {
 617 	font-weight: bold;
 618 }
 619 
 620 h1.componentheading, .componentheading {
 621 	padding: 5px 0 15px;
 622 	margin: 0 0 10px;
 623 	background: url(../images/hdot.gif) repeat-x bottom;
 624 }
 625 
 626 .componentheading {
 627 	font-size: 200%;
 628 	font-weight: bold;
 629 }
 630 
 631 .contentdescription {
 632 	padding-bottom: 30px;
 633 }
 634 
 635 h2.contentheading, .contentheading {
 636 	padding: 5px 0 8px;
 637 	margin: 0;
 638 	font-weight: normal;
 639 }
 640 
 641 table.blog .contentheading {
 642 	font-size: 150%;
 643 }
 644 
 645 .contentheading {
 646 	font-size: 200%;
 647 }
 648 
 649 a.contentpagetitle,
 650 a.contentpagetitle:hover,
 651 a.contentpagetitle:active,
 652 a.contentpagetitle:focus {
 653 	text-decoration: none !important;
 654 }
 655 
 656 a.readon {
 657 	float: left;
 658 	margin-top: 10px;
 659 	padding: 1px 5px 1px 14px;
 660 	border: 1px solid #F6F6F6;
 661 	display: block;
 662 	background: url(../images/arrow.png) no-repeat 5px 48%;
 663 	color: #006699;
 664 	font-weight: bold;
 665 	text-decoration: none;
 666 	text-transform: uppercase;
 667 }
 668 
 669 a.readon:hover, a.readon:active, a.readon:focus {
 670 	border: 1px solid #ECECEC;
 671 	background: url(../images/arrow.png) no-repeat 5px 48% #FFFFFF;
 672 }
 673 
 674 table.contentpaneopen td, table.contentpane td {
 675 }
 676 
 677 table.contentpaneopen, table.contentpane, table.blog {
 678 	width: 100%;
 679 }
 680 
 681 .moduletable {
 682 	padding: 0;
 683 }
 684 
 685 ul.pagination {
 686 	margin: 15px auto;
 687 	padding: 10px 0;
 688 	background: url(../images/hdot.gif) repeat-x top;
 689 }
 690 
 691 ul.pagination li {
 692 	margin: 0;
 693 	padding: 0;
 694 	display: inline;
 695 	background: none;
 696 }
 697 
 698 ul.pagination li span{
 699 	padding: 2px 5px;
 700 }
 701 
 702 ul.pagination a {
 703 	padding: 2px 5px;
 704 	border: 1px solid #F6F6F6;
 705 }
 706 
 707 ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
 708 	border: 1px solid #ECECEC;
 709 	background: #FFFFFF;
 710 }
 711 
 712 .pagenavbar {
 713 	padding-left: 14px;
 714 }
 715 
 716 .pagenavcounter {
 717 	padding: 8px 14px 0 14px;
 718 }
 719 
 720 .sectiontableheader {
 721 	padding: 8px 5px;
 722 	background: #444444;
 723 	color: #FFFFFF;
 724 }
 725 
 726 .sectiontableheader a {
 727 	color: #FFFFFF;
 728 }
 729 
 730 tr.sectiontableentry1 td {
 731 	padding: 8px 5px;
 732 	background: url(../images/hdot2.gif) repeat-x bottom;
 733 }
 734 
 735 tr.sectiontableentry2 td {
 736 	padding: 8px 5px;
 737 	background: url(../images/hdot2.gif) repeat-x bottom #ECECEC;
 738 }
 739 
 740 tr.sectiontableentry1:hover td,
 741 tr.sectiontableentry2:hover td {
 742 	background: url(../images/hdot2.gif) repeat-x bottom #FFFFCC;
 743 }
 744 
 745 .smalldark {
 746 	text-align: left;
 747 }
 748 
 749 div.syndicate div {
 750 	text-align: center;
 751 }
 752 
 753 .pollstableborder tr.sectiontableentry1 td,
 754 .pollstableborder tr.sectiontableentry2 td {
 755 	background: none;
 756 }
 757 
 758 /* META
 759 --------------------------------------------------------- */
 760 .article-tools {
 761 	border-top: 1px solid #DDDDDD;
 762 	width: 100%;
 763 	float: left;
 764 	clear: both;
 765 	margin-bottom: 15px;
 766 	display: block;
 767 	background: #ECECEC;
 768 }
 769 
 770 .article-meta {
 771 	padding: 5px;
 772 	width: 80%;
 773 	float: left;
 774 }
 775 
 776 .createby {
 777 	padding: 3px 3px 3px 20px;
 778 	background: url(../images/icon-user.gif) no-repeat 0 2px;
 779 }
 780 
 781 .createdate {
 782 	padding: 3px 3px 3px 20px;
 783 	background: url(../images/icon-date.gif) no-repeat 0 2px;
 784 }
 785 
 786 .modifydate {
 787 	width: 100%;
 788 	float: left;
 789 }
 790 
 791 div.buttonheading {
 792 	float: right;
 793 	width: 15%;
 794 }
 795 
 796 .buttonheading img {
 797 	margin: 7px 5px 0 0;
 798 	border: 0;
 799 	float: right;
 800 }
 801 
 802 /* MAIN LAYOUT DIVS
 803 --------------------------------------------------------- */
 804 #ja-wrapper {
 805 	width: 100%;
 806 	margin: 0;
 807 	background: #F2F2F2;
 808 }
 809 
 810 #ja-containerwrap {
 811 	background: url(../images/cw-bg1.gif) repeat-y 50% 0;
 812 }
 813 
 814 #ja-containerwrap2 {
 815 	background: url(../images/cw-bg2.gif) no-repeat 50% 0;
 816 }
 817 
 818 #ja-container {
 819 	background: url(../images/c-bg1.gif) repeat-y 18% 0;
 820 }
 821 
 822 #ja-container2 {
 823 	padding: 20px 0;
 824 	background: url(../images/c-bg2.gif) no-repeat 18% 0;
 825 }
 826 
 827 #ja-mainbody-fr #ja-col1 {
 828 	width: 20%;
 829 }
 830 
 831 #ja-mainbody-fr #ja-contentwrap {
 832 	width: 80%;
 833 }
 834 
 835 #ja-mainbody, #ja-mainbody-fl {
 836 	float: left;
 837 	width: 80%;
 838 }
 839 
 840 #ja-mainbody #ja-contentwrap {
 841 	float: right;
 842 	width: 75%;
 843 }
 844 
 845 #ja-mainbody-fl #ja-contentwrap {
 846 	float: left;
 847 	width: 100%;
 848 }
 849 
 850 #ja-mainbody-f, #ja-mainbody-fr {
 851 	float: none;
 852 	width: 100%;
 853 }
 854 
 855 #ja-mainbody-fr #ja-contentwrap {
 856 	width: 74.8%;
 857 	float: right;
 858 }
 859 
 860 #ja-mainbody-fr #ja-col1 {
 861 	width: 20%;
 862 	float: left;
 863 }
 864 
 865 #ja-mainbody-fr #ja-contentwrap {
 866 	width: 80%;
 867 }
 868 
 869 #ja-content {
 870 	padding: 0 20px 0 40px;
 871 }
 872 #ja-contentwrap {
 873 	min-height: 300px;
 874 	height: auto;
 875 }
 876 * html #ja-contentwrap {
 877 	height: 300px;
 878 }
 879 #ja-mainbody-fl #ja-content {
 880 	padding-left: 0;
 881 }
 882 
 883 #ja-mainbody-f #ja-content {
 884 	padding: 0;
 885 }
 886 
 887 /* Full */
 888 #ja-containerwrap-f {
 889 	background: url(../images/cwf-bg.gif) repeat-x top left #F6F6F6;
 890 }
 891 
 892 #ja-containerwrap-f #ja-containerwrap2 {
 893 	background: none;
 894 }
 895 
 896 #ja-containerwrap-f #ja-container,
 897 #ja-containerwrap-f #ja-container2 {
 898 	background: none;
 899 }
 900 
 901 /* Full left */
 902 #ja-containerwrap-fl {
 903 	background: url(../images/cwf-bg.gif) repeat-x top left #F6F6F6;
 904 }
 905 
 906 #ja-containerwrap-fl #ja-containerwrap2,
 907 #ja-containerwrap-fl #ja-container,
 908 #ja-containerwrap-fl #ja-container2 {
 909 	background: none;
 910 }
 911 
 912 /* Full right */
 913 #ja-containerwrap-fr {
 914 	background: url(../images/cw-bg1.gif) repeat-y 50% 0;
 915 }
 916 
 917 #ja-containerwrap-fr #ja-containerwrap2 {
 918 	background: url(../images/cw-bg2.gif) no-repeat 50% 0;
 919 }
 920 
 921 /* HEADER
 922 --------------------------------------------------------- */
 923 #ja-headerwrap {
 924 	background: #333333;
 925 	color: #CCCCCC;
 926 	line-height: normal;
 927 	height: 80px;
 928 }
 929 
 930 #ja-header {
 931 	position: relative;
 932 	height: 80px;
 933 }
 934 
 935 .ja-headermask {
 936 	width: 602px;
 937 	display: block;
 938 	background: url(../images/header-mask.png) no-repeat top right;
 939 	height: 80px;
 940 	position: absolute;
 941 	top: 0;
 942 	right: -1px;
 943 }
 944 
 945 #ja-header a {
 946 	color: #CCCCCC;
 947 }
 948 
 949 h1.logo, h1.logo-text {
 950 	margin: 0 0 0 5px;
 951 	padding: 0;
 952 	font-size: 180%;
 953 	text-transform: uppercase;
 954 }
 955 
 956 h1.logo a {
 957 	width: 208px;
 958 	display: block;
 959 	background: url(../images/logo.png) no-repeat;
 960 	height: 80px;
 961 	position: relative;
 962 	z-index: 100;
 963 }
 964 
 965 h1.logo a span {
 966 	position: absolute;
 967 	top: -1000px;
 968 }
 969 
 970 h1.logo-text a {
 971 	color: #CCCCCC !important;
 972 	text-decoration: none;
 973 	outline: none;
 974 	position: absolute;
 975 	bottom: 40px;
 976 	left: 5px;
 977 }
 978 
 979 p.site-slogan {
 980 	margin: 0;
 981 	padding: 0;
 982 	padding: 2px 5px;
 983 	color: #FFFFFF;
 984 	background: #444444;
 985 	font-size: 92%;
 986 	position: absolute;
 987 	bottom: 20px;
 988 	left: 0;
 989 }
 990 
 991 /* Search */
 992 #ja-search {
 993 	padding-left: 20px;
 994 	background: url(../images/icon-search.gif) no-repeat center left;
 995 	position: absolute;
 996 	bottom: 15px;
 997 	right: 0;
 998 }
 999 
1000 #ja-search .inputbox {
1001 	width: 120px;
1002 	border: 1px solid #333333;
1003 	padding: 3px 5px;
1004 	color: #999999;
1005 	background: #444444;
1006 	font-size: 92%;
1007 }
1008 
1009 /* MAIN NAVIGATION
1010 --------------------------------------------------------- */
1011 
1012 #ja-pathway {
1013 	font-size: 92%;
1014 }
1015 
1016 #ja-pathway strong {
1017 	margin-right: 5px;
1018 	font-weight: normal;
1019 }
1020 
1021 #ja-pathway a {
1022 	text-decoration: none;
1023 }
1024 
1025 #ja-pathway img {
1026 	margin: 1px 5px;
1027 }
1028 
1029 /* MODULE
1030 --------------------------------------------------------- */
1031 div.moduletable,
1032 div.moduletable_menu,
1033 div.moduletable_text {
1034 	padding: 0 0 20px;
1035 	margin-bottom: 15px;
1036 	background: url(../images/hdot.gif) repeat-x bottom;
1037 }
1038 
1039 div.moduletable h3,
1040 div.moduletable_menu h3,
1041 div.moduletable_text h3 {
1042 	padding: 0 0 8px;
1043 	margin: 0;
1044 	color: #7BA566;
1045 	font-size: 125%;
1046 	font-weight: bold;
1047 	text-transform: uppercase;
1048 }
1049 
1050 /* Module rounded */
1051 div.module h3 {
1052 	margin: 0 -15px 10px;
1053 	padding: 8px 15px 5px;
1054 	border-bottom: 2px solid #F6F6F6;
1055 	color: #7BA566;
1056 	font-size: 125%;
1057 	font-weight: bold;
1058 	text-transform: uppercase;
1059 }
1060 
1061 div.module_black,
1062 div.module_green,
1063 div.module_blue,
1064 div.module_red,
1065 div.module {
1066 	margin-bottom: 20px;
1067 	float: left;
1068 	clear: both;
1069 	width: 100%;
1070 	background: url(../images/b-br.gif) no-repeat bottom right #FFFFFF;
1071 }
1072 
1073 div.module div {
1074 	background: url(../images/b-bl.gif) no-repeat bottom left;
1075 }
1076 
1077 div.module div div {
1078 	background: url(../images/b-tr.gif) no-repeat top right;
1079 }
1080 
1081 div.module div div div {
1082 	padding: 0 15px 10px;
1083 	background: url(../images/b-tl.gif) no-repeat top left;
1084 }
1085 
1086 div.module_black div div div div,
1087 div.module_green div div div div,
1088 div.module_blue div div div div,
1089 div.module_red div div div div,
1090 div.module_text div div div div,
1091 div.module div div div div {
1092 	margin: 0;
1093 	padding: 0;
1094 	float: none;
1095 	width: 99%;
1096 	background: none;
1097 }
1098 
1099 div.module_text h3 {
1100 	margin: 0 0 10px;
1101 	width: 100%;
1102 	clear: both;
1103 	display: block;
1104 	overflow: hidden;
1105 }
1106 
1107 div.module_text span {
1108 	padding: 0 3px 0 0;
1109 	float: left;
1110 	clear: both;
1111 	display: block;
1112 	background: #F6F6F6;
1113 	font-weight: bold;
1114 }
1115 
1116 div.module_text {
1117 	margin-bottom: 20px;
1118 	padding: 0;
1119 	float: left;
1120 	clear: both;
1121 	width: 100%;
1122 	background: url(../images/bt-br.gif) no-repeat bottom right #F6F6F6;
1123 }
1124 
1125 div.module_text div {
1126 	background: url(../images/bt-bl.gif) no-repeat bottom left;
1127 }
1128 
1129 div.module_text div div {
1130 	background: url(../images/bt-tr.gif) no-repeat top right;
1131 }
1132 
1133 div.module_text div div div {
1134 	padding: 0 15px 10px;
1135 	display: block;
1136 	background: url(../images/bt-tl.gif) no-repeat top left;
1137 }
1138 
1139 div.banneritem_text {
1140 	padding: 5px 0 !important;
1141 }
1142 
1143 /* red */
1144 div.module_black h3,
1145 div.module_green h3,
1146 div.module_blue h3,
1147 div.module_red h3 {
1148 	margin: 0 -15px 10px;
1149 	padding: 8px 15px 5px;
1150 	border-bottom: 1px solid #F6F6F6;
1151 	color: #FFFFFF;
1152 	font-size: 125%;
1153 	font-weight: bold;
1154 	text-transform: uppercase;
1155 }
1156 
1157 div.module_red {
1158 	background: url(../images/br-br.gif) no-repeat bottom right #BF0000;
1159 	color: #FFFFFF;
1160 }
1161 
1162 div.module_red div {
1163 	background: url(../images/br-bl.gif) no-repeat bottom left;
1164 }
1165 
1166 div.module_red div div {
1167 	background: url(../images/br-tr.gif) no-repeat top right;
1168 }
1169 
1170 div.module_red div div div {
1171 	padding: 0 15px 10px;
1172 	background: url(../images/br-tl.gif) no-repeat top left;
1173 }
1174 
1175 /* blue */
1176 div.module_blue {
1177 	background: url(../images/bb-br.gif) no-repeat bottom right #006699;
1178 	color: #FFFFFF;
1179 }
1180 
1181 div.module_blue div {
1182 	background: url(../images/bb-bl.gif) no-repeat bottom left;
1183 }
1184 
1185 div.module_blue div div {
1186 	background: url(../images/bb-tr.gif) no-repeat top right;
1187 }
1188 
1189 div.module_blue div div div {
1190 	padding: 0 15px 10px;
1191 	background: url(../images/bb-tl.gif) no-repeat top left;
1192 }
1193 
1194 /* green */
1195 div.module_green {
1196 	background: url(../images/bg-br.gif) no-repeat bottom right #7BA566;
1197 	color: #FFFFFF;
1198 }
1199 
1200 div.module_green div {
1201 	background: url(../images/bg-bl.gif) no-repeat bottom left;
1202 }
1203 
1204 div.module_green div div {
1205 	background: url(../images/bg-tr.gif) no-repeat top right;
1206 }
1207 
1208 div.module_green div div div {
1209 	padding: 0 15px 10px;
1210 	background: url(../images/bg-tl.gif) no-repeat top left;
1211 }
1212 
1213 /* black */
1214 div.module_black {
1215 	background: url(../images/bl-br.gif) no-repeat bottom right #333333;
1216 	color: #FFFFFF;
1217 }
1218 
1219 div.module_black div {
1220 	background: url(../images/bl-bl.gif) no-repeat bottom left;
1221 }
1222 
1223 div.module_black div div {
1224 	background: url(../images/bl-tr.gif) no-repeat top right;
1225 }
1226 
1227 div.module_black div div div {
1228 	padding: 0 15px 10px;
1229 	background: url(../images/bl-tl.gif) no-repeat top left;
1230 }
1231 
1232 div.module_blue ul,
1233 div.module_blue ol,
1234 div.module_red ul,
1235 div.module_red ol,
1236 div.module_black ul,
1237 div.module_black ol,
1238 div.module_green ul,
1239 div.module_green ol {
1240 	margin: 0;
1241 	padding: 0;
1242 }
1243 
1244 div.module_blue li,
1245 div.module_red li,
1246 div.module_black li,
1247 div.module_green li {
1248 	margin-left: 20px;
1249 	padding: 0;
1250 	line-height: 150%;
1251 }
1252 
1253 div.module_blue a,
1254 div.module_red a,
1255 div.module_black a,
1256 div.module_green a {
1257 	color: #FFFFFF;
1258 }
1259 
1260 div.advs {
1261 	float: left;
1262 	width: 100%;
1263 	clear: both;
1264 	display: block;
1265 }
1266 
1267 /* LEFT COLUMN + RIGHT COLUMN
1268 --------------------------------------------------------- */
1269 #ja-col1 {
1270 	float: left;
1271 	width: 24.99%;
1272 	padding-top: 10px;
1273 	overflow: hidden;
1274 }
1275 
1276 #ja-col2 {
1277 	float: right;
1278 	width: 20%;
1279 	overflow: hidden;
1280 }
1281 
1282 #ja-col1 table,
1283 #ja-col2 table {
1284 	border-collapse: collapse;
1285 	border-spacing: 0;
1286 }
1287 
1288 #ja-col1 ul li,
1289 #ja-col2 ul li {
1290 	padding-left: 15px;
1291 	margin: 0;
1292 	background: url(../images/bullet.gif) no-repeat 5px 50%;
1293 }
1294 
1295 #ja-col1 ul, #ja-col2 ul {
1296 	margin: 0;
1297 }
1298 
1299 #ja-col1 ol, #ja-col2 ol {
1300 	margin-left: 5px;
1301 }
1302 
1303 #ja-col1 .article_separator,
1304 #ja-col2 .article_separator {
1305 	display: none;
1306 }
1307 
1308 /* SPOTLIGHT
1309 --------------------------------------------------------- */
1310 /* Spotlight Box Style */
1311 .ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right {
1312 	float: left;
1313 	overflow: hidden;
1314 }
1315 
1316 .ja-box-left div.moduletable,
1317 .ja-box-full div.moduletable {
1318 	padding-right: 30px;
1319 	background: none;
1320 }
1321 
1322 .ja-box-right div.moduletable {
1323 	padding-left: 30px;
1324 	background: url(../images/vdot2.gif) repeat-y left;
1325 }
1326 
1327 .ja-box-center div.moduletable {
1328 	padding: 0 30px;
1329 	background: url(../images/vdot2.gif) repeat-y left;
1330 }
1331 
1332 #ja-botsl h3 {
1333 	background: none;
1334 }
1335 
1336 #ja-botslwrap {
1337 	border-top: 5px solid #CCCCCC;
1338 	background: #444444;
1339 	color: #CCCCCC;
1340 }
1341 
1342 #ja-botsl {
1343 	padding: 15px 0;
1344 }
1345 
1346 #ja-botsl div.moduletable {
1347 	padding-top: 0;
1348 	padding-bottom: 0;
1349 	margin: 0;
1350 }
1351 
1352 #ja-botsl h3 {
1353 	margin: 0 0 12px;
1354 	padding: 0;
1355 	color: #FFFFFF;
1356 }
1357 
1358 #ja-botsl a {
1359 	color: #CCCCCC;
1360 }
1361 
1362 #ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus {
1363 	color: #FFFFFF;
1364 }
1365 
1366 #ja-botsl ul, #ja-botsl p, #ja-botsl ol {
1367 	padding: 0;
1368 	margin: 0 !important;
1369 }
1370 
1371 #ja-botsl ul li {
1372 	padding: 0 0 0 15px;
1373 	margin: 0;
1374 	background: url(../images/bullet2.gif) no-repeat 3px 8px;
1375 }
1376 
1377 #ja-botsl ol li {
1378 	margin-left: 25px;
1379 	padding: 0 !important;
1380 }
1381 
1382 #ja-botsl td {
1383 	padding: 0;
1384 }
1385 
1386 #ja-botsl .article_separator {
1387 	display: none;
1388 }
1389 
1390 #ja-botsl table {
1391 	border-spacing: 0;
1392 	border-collapse: collapse;
1393 }
1394 
1395 /* FOOTER
1396 --------------------------------------------------------- */
1397 #ja-footerwrap {
1398 	border-top: 5px solid #CCCCCC;
1399 	padding: 20px 0 30px;
1400 	clear: both;
1401 	background: url(../images/grad3.gif) repeat-x bottom #F6F6F6;
1402 }
1403 
1404 #ja-footer {
1405 	padding: 0;
1406 	color: #666666;
1407 	background: url(../images/vdot.gif) repeat-y 22% 0;
1408 	position: relative;
1409 }
1410 
1411 #ja-footer .copyright {
1412 	clear: both;
1413 	display: block;
1414 	padding-left: 25%;
1415 	color: #666666;
1416 	font-style: normal;
1417 	font-size: 92%;
1418 }
1419 
1420 #ja-footnav {
1421 	padding-left: 25%;
1422 }
1423 
1424 #ja-footer ul {
1425 	margin: 0 0 5px;
1426 	padding: 0;
1427 }
1428 
1429 #ja-footer li {
1430 	margin: 0;
1431 	padding: 0;
1432 	display: inline;
1433 	background: none;
1434 }
1435 
1436 #ja-footer li a {
1437 	padding: 0 15px 0 0;
1438 	display: inline;
1439 	color: #666666;
1440 	font-weight: bold;
1441 	font-size: 92%;
1442 	line-height: normal;
1443 	text-decoration: none;
1444 	text-transform: uppercase;
1445 }
1446 
1447 #ja-footer li a:hover, #ja-footer li a:active, #ja-footer li a:focus {
1448 	color: #333333;
1449 	text-decoration: none;
1450 }
1451 
1452 .ja-cert {
1453 	font-size: 92%;
1454 	position: absolute;
1455 	right: 0;
1456 	top: 18px;
1457 }
1458 
1459 .ja-cert a {
1460 	margin: 0 0 0 5px;
1461 	padding: 0;
1462 	border: none;
1463 	border: none;
1464 	text-decoration: none;
1465 }
1466 
1467 .ja-cert a span {
1468 	display: none;
1469 }
1470 
1471 .ja-cert a img {
1472 	border: none;
1473 }
1474 
1475 .banneritem {
1476 	display: block;
1477 	margin-top: 15px;
1478 }
1479 
1480 /* MISCELLANOUS
1481 ----------------------------------------------------------- */
1482 ul.accessibility {
1483 	position: absolute;
1484 	top: -100%;
1485 }
1486 
1487 /*usertool*/
1488 ul.ja-usertools-font {
1489 	font-size: 11px;
1490 	position: absolute;
1491 	top: 8px;
1492 	right: 70px;
1493 }
1494 
1495 ul.ja-usertools-font li {
1496 	padding: 0;
1497 	margin: 0;
1498 	display: inline;
1499 	background: none;
1500 }
1501 
1502 /*collapsible h3*/
1503 h3.show {
1504 	background: url(../images/arrow2.png) no-repeat 90% 60%;
1505 	cursor: pointer;
1506 }
1507 
1508 h3.hide {
1509 	background: url(../images/arrow3.png) no-repeat 90% 60%;
1510 	cursor: pointer;
1511 }
1512 
1513 /*others*/
1514 #ja-banner {
1515 	margin: 15px 0;
1516 	text-align: center;
1517 }
1518 
1519 div.back_button a,
1520 div.back_button a:hover,
1521 div.back_button a:active {
1522 	margin: 10px 0;
1523 	display: block;
1524 	background: none!important;
1525 	text-decoration: none!important;
1526 }
1527 
1528 #form-login p {
1529 	margin: 0 0 5px;
1530 }
1531 
1532 #form-login ul {
1533 	margin: 10px 0 0;
1534 }
1535 
1536 #form-login .inputbox {
1537 	width: 90%;
1538 }
1539 
1540 .clr {
1541 	clear: both;
1542 }
1543 
1544 .hasTip img {
1545 	margin: 10px 5px 0 0;
1546 	border: none;
1547 }
1548 
1549 /* Tooltips */
1550 .tool-tip {
1551 	float: left;
1552 	border: 1px solid #D4D5AA;
1553 	padding: 5px;
1554 	background: #FFFFCC;
1555 	max-width: 200px;
1556 }
1557 
1558 .tool-title {
1559 	padding: 0;
1560 	margin: 0;
1561 	margin-top: -15px;
1562 	padding-top: 15px;
1563 	padding-bottom: 5px;
1564 	background: url(../../system/images/selector-arrow.png) no-repeat;
1565 	font-size: 100%;
1566 	font-weight: bold;
1567 }
1568 
1569 .tool-text {
1570 	margin: 0;
1571 	font-size: 100%;
1572 }
1573 
1574 #system-message dd.message ul,
1575 #system-message dd.error ul,
1576 #system-message dd.notice ul {
1577 	padding: 0;
1578 	margin: 0;
1579 }
1580 
1581 #system-message dd.message ul li,
1582 #system-message dd.error ul li,
1583 #system-message dd.notice ul li {
1584 	background: none;
1585 	padding: 5px;
1586 	margin: 0;
1587 	color: #FFFFFF;
1588 }
1589 
1590 /* System Standard Messages */
1591 #system-message dd.message ul {
1592 	background: #006699;
1593 	border: none;
1594 }
1595 
1596 /* System Error Messages */
1597 #system-message dd.error ul {
1598 	background: #BF0000;
1599 	border: none;
1600 }
1601 
1602 /* System Notice Messages */
1603 #system-message dd.notice ul {
1604 	background: #EE9600;
1605 	border: none;
1606 }
1607 
1608 /* Clearfix */
1609 .clearfix:after {
1610 	clear: both;
1611 	display: block;
1612 	content: ".";
1613 	height: 0;
1614 	visibility: hidden;
1615 }
1616 
1617 * html > body .clearfix {
1618 	width: 100%;
1619 	display: block;
1620 }
1621 
1622 * html .clearfix {
1623 	height: 1%;
1624 }
1625 
1626 /* Firefox Scrollbar Hack - Do not remove */
1627 html {
1628 	margin-bottom: 1px;
1629 	height: 100%!important;
1630 	height: auto;
1631 }

ja_purity/css/template_rtl.css

  1 /* COMMON STYLE
  2 --------------------------------------------------------- */
  3 html {
  4 	direction: rtl;
  5 }
  6 
  7 ul li {
  8 	padding-right: 30px;
  9 	background-position: 98% 8px;
 10 }
 11 
 12 ol li {
 13 	margin-right: 35px;
 14 	margin-left: -35px;
 15 	padding: 0;
 16 }
 17 
 18 th {
 19 	text-align: right;
 20 }
 21 
 22 /* JOOMLA STYLE
 23 --------------------------------------------------------- */
 24 td.sectiontableheader {
 25   border-left: 1px solid #fff;
 26   border-right: none;
 27 }
 28 
 29 table.contenttoc {
 30 	float:left;
 31 	margin: 0 10px 10px 0px;
 32 }
 33 
 34 table.contenttoc td {
 35 	padding: 1px 25px 1px 5px;
 36 	background-position: 95% 50%;
 37 }
 38 
 39 table.pollstableborder {
 40 	text-align: right;
 41 }
 42 
 43 .blog_more ul li {
 44 	padding: 0 17px 0 0;
 45 	background-position: 98% 8px;
 46 }
 47 
 48 a.readon {
 49 	float: right;
 50 	padding: 1px 14px 1px 5px;
 51 	background: url(../images/rtl/arrow.png) no-repeat 95% 48%;
 52 }
 53 
 54 a.readon:hover, a.readon:active, a.readon:focus {
 55 	background: url(../images/rtl/arrow.png) no-repeat 95% 48% #FFFFFF;
 56 }
 57 
 58 ul.pagination li span{
 59 	padding: 0;
 60 }
 61 
 62 .pagenavbar {
 63 	padding-right: 14px;
 64 	background-position: center right;
 65 }
 66 
 67 .pagenavcounter {
 68 	padding: 8px 14px 0 14px;
 69 	background-position: 0 11px;
 70 }
 71 
 72 .smalldark {
 73 	text-align: right;
 74 }
 75 
 76 /* META
 77 --------------------------------------------------------- */
 78 .article-tools {
 79 	float: right;
 80 }
 81 
 82 .article-meta {
 83 	float: right;
 84 }
 85 
 86 .createby {
 87 	padding: 3px 20px 3px 3px;
 88 	background-position: 100% 5px;
 89 	float: right;
 90 }
 91 
 92 .createdate {
 93 	padding: 3px 20px 3px 3px;
 94 	background-position: 100% 5px;
 95 	float: right;
 96 }
 97 
 98 .buttonheading img {
 99 	margin: 7px 0 0 5px;
100 	float: left;
101 }
102 
103 /* MAIN LAYOUT DIVS
104 --------------------------------------------------------- */
105 #ja-containerwrap {
106 	background: url(../images/rtl/cw-bg12.gif) repeat-y 50% 0;
107 }
108 
109 #ja-containerwrap-fr {
110 	background: url(../images/rtl/cw-bg12.gif) repeat-y 50% 0;
111 }
112 
113 #ja-containerwrap2 {
114 	background: url(../images/rtl/cw-bg2.gif) no-repeat 50% 0;
115 }
116 
117 #ja-container {
118 	background: url(../images/rtl/c-bg1.gif) repeat-y 82% 0;
119 	padding: 0;
120 }
121 
122 #ja-container2 {
123 	background: url(../images/rtl/c-bg2.gif) no-repeat 82% top;
124 	padding: 20px 0;
125 }
126 
127 #ja-mainbody, #ja-mainbody-fl {
128 	float: right;
129 }
130 
131 #ja-mainbody #ja-contentwrap,
132 #ja-mainbody-fr #ja-contentwrap,
133 #ja-mainbody-fl #ja-contentwrap {
134 	float: left;
135 }
136 
137 #ja-mainbody-fl #ja-contentwrap #ja-content {
138 	padding-left: 20px;
139 }
140 
141 #ja-mainbody-f, #ja-mainbody-fr {
142 	float: right;
143 }
144 
145 #ja-content {
146 	padding: 0 40px 0 20px;
147 }
148 .OPE #ja-content {
149 	padding-left: 40px;
150 }
151 .OPE #ja-mainbody #ja-content {
152 	padding-right: 20px;
153 }
154 #ja-mainbody-fl #ja-content {
155 	padding-right: 0;
156 }
157 
158 /* Full */
159 #ja-containerwrap-f {
160 	background: url(../images/rtl/cwf-bg.gif) repeat-x top right #F6F6F6;
161 }
162 
163 /* Full right */
164 #ja-containerwrap-fl {
165 	background: url(../images/rtl/cwf-bg.gif) repeat-x top right #F6F6F6;
166 }
167 
168 #ja-containerwrap-fr #ja-containerwrap2 {
169 	background: url(../images/rtl/cw-bg2.gif) no-repeat 50% 0;
170 }
171 
172 /* HEADER
173 --------------------------------------------------------- */
174 .ja-headermask {
175 	background-position: top left;
176 	left: -1px;
177 	right: auto;
178 }
179 
180 h1.logo-text a {
181 	right: 5px;
182 	left: auto;
183 }
184 
185 p.site-slogan {
186 	right: 0;
187 	left: auto;
188 }
189 
190 /* Search */
191 #ja-search {
192 	background-position: center right;
193 	left: 0;
194 	right: auto;
195 }
196 
197 /* MAIN NAVIGATION
198 --------------------------------------------------------- */
199 
200 /* MODULE
201 --------------------------------------------------------- */
202 div.module_black,
203 div.module_green,
204 div.module_blue,
205 div.module_red,
206 div.module {
207 	float: right;
208 }
209 
210 div.module_black div div div div,
211 div.module_green div div div div,
212 div.module_blue div div div div,
213 div.module_red div div div div,
214 div.module_text div div div div,
215 div.module div div div div {
216 	float: none;
217 }
218 
219 div.module_text span {
220 	float: right;
221 }
222 
223 div.module_text {
224 	float: right;
225 }
226 
227 div.module_blue li,
228 div.module_red li,
229 div.module_black li,
230 div.module_green li {
231 	margin-right: 20px;
232 	margin-left: auto;
233 }
234 
235 div.advs {
236 	float: right;
237 }
238 
239 /* PATHWAY
240 --------------------------------------------------------- */
241 #ja-pathway {
242 }
243 
244 /* right COLUMN + left COLUMN
245 --------------------------------------------------------- */
246 #ja-col1 {
247 	float: right;
248 }
249 
250 #ja-col2 {
251 	float: left;
252 }
253 
254 #ja-col1 ul li,
255 #ja-col2 ul li {
256 	padding-right: 15px;
257 	background-position: 100% 10px;
258 }
259 
260 #ja-col1 ol, #ja-col2 ol,
261 #ja-col1 ul, #ja-col2 ul
262 {
263 	margin-right: 5px;
264 }
265 ul.menu li.active a span {
266 	background: none;
267 }
268 
269 /* SPOTLIGHT
270 --------------------------------------------------------- */
271 /* Spotlight Box Style */
272 .ja-box-full, .ja-box-right, .ja-box-center, .ja-box-left {
273 	float: right;
274 }
275 
276 .ja-box-left div.moduletable,
277 .ja-box-full div.moduletable {
278 	padding-left: 30px;
279 }
280 
281 .ja-box-right div.moduletable {
282 	padding-left: 30px;
283 	padding-right: 30px;
284 	background-position: right;
285 }
286 
287 .ja-box-center div.moduletable {
288 	background-position: right;
289 }
290 
291 #ja-botsl ul li {
292 	padding: 0 15px 0 0;
293 	background-position: 99% 8px;
294 }
295 
296 #ja-botsl ol li {
297 	margin-right: 25px;
298 }
299 
300 /* FOOTER
301 --------------------------------------------------------- */
302 #ja-footer {
303 	background-position: 78% 0;
304 }
305 
306 #ja-footer .copyright {
307 	padding-right: 25%;
308 }
309 
310 #ja-footnav {
311 	padding-right: 25%;
312 }
313 
314 #ja-footnav li{
315 	float: right;
316 	direction: ltr;
317 }
318 
319 #ja-footer li a {
320 	padding: 0 0 0 15px;
321 }
322 
323 .ja-cert {
324 	left: 0;
325 	right: auto;
326 }
327 
328 .ja-cert a {
329 	margin: 0 5px 0 0;
330 }
331 
332 .banneritem {
333 	display: block;
334 	margin-top: 15px;
335 }
336 
337 /* MISCELLANOUS
338 ----------------------------------------------------------- */
339 /*usertool*/
340 ul.ja-usertools-font {
341 	left: 70px;
342 	right: auto;
343 }
344 
345 /*collapsible h3*/
346 h3.show {
347 	background-position: 10% 60%;
348 }
349 
350 h3.hide {
351 	background-position: 10% 60%;
352 }
353 
354 .hasTip img {
355 	margin: 10px 0 0 5px;
356 }
357 
358 /* Tooltips */
359 .tool-tip {
360 	float: right;
361 }
362 
363 .breadcrumbs {
364 }
365 
366 .breadcrumbs a {
367 	float: right;
368 }
369 
370 .breadcrumbs img {
371 	float: right;
372 	margin-top: 10px;
373 	padding-top: 5px;
374 }
375 
376 /* MainNav
377 --------------------------------------------------------- */
378 #ja-mainnav{
379 	direction: ltr;
380 }
381 
382 #ja-mainnav li a {
383 	direction: rtl;
384 }
385 
386 #ja-cssmenu {
387 	float: right;
388 }
389 
390 #ja-cssmenu li {
391 	float: right;
392 }
393 
394 #ja-cssmenu li ul {
395 	right: 0;
396 }
397 
398 #ja-cssmenu li ul ul {
399 	margin: -1.5em 14em 0 0; /* third-and-above-level lists */
400 }
401 
402 #ja-cssmenu li li {
403 	padding: 0 0 0 1em;
404 }
405 
406 /* STYLING THE MENU
407 -----------------------------------*/
408 /* 1st level */
409 #ja-cssmenu li ul a {
410 	border-left: none;
411 }
412 
413 #ja-cssmenu li.havesubchild,
414 #ja-cssmenu li.havesubchild-active {
415 	background-position: 6% 50%;
416 }
417 
418 body.IE6 #ja-cssmenu li ul,
419 body.IE7 #ja-cssmenu li ul,
420 body.OPE #ja-cssmenu li ul {
421 	left: auto;
422 	top: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
423 }
424 
425 body.IE6 #ja-cssmenu li.sfhover ul ul, body.IE6 #ja-cssmenu li.havechildsfhover ul ul, body.IE6 #ja-cssmenu li.havechild-activesfhover ul ul, body.IE6 #ja-cssmenu li.activesfhover ul ul,
426 body.IE6 #ja-cssmenu li.sfhover ul ul ul, body.IE6 #ja-cssmenu li.havechildsfhover ul ul ul, body.IE6 #ja-cssmenu li.havechild-activesfhover ul ul ul, body.IE6 #ja-cssmenu li.activesfhover ul ul ul,
427 body.IE7 #ja-cssmenu li.sfhover ul ul, body.IE7 #ja-cssmenu li.havechildsfhover ul ul, body.IE7 #ja-cssmenu li.havechild-activesfhover ul ul, body.IE7 #ja-cssmenu li.activesfhover ul ul,
428 body.IE7 #ja-cssmenu li.sfhover ul ul ul, body.IE7 #ja-cssmenu li.havechildsfhover ul ul ul, body.IE7 #ja-cssmenu li.havechild-activesfhover ul ul ul, body.IE7 #ja-cssmenu li.activesfhover ul ul ul,
429 body.OPE #ja-cssmenu li.sfhover ul ul, body.OPE #ja-cssmenu li.havechildsfhover ul ul, body.OPE #ja-cssmenu li.havechild-activesfhover ul ul, body.OPE #ja-cssmenu li.activesfhover ul ul,
430 body.OPE #ja-cssmenu li.sfhover ul ul ul, body.OPE #ja-cssmenu li.havechildsfhover ul ul ul, body.OPE #ja-cssmenu li.havechild-activesfhover ul ul ul, body.OPE #ja-cssmenu li.activesfhover ul ul ul {
431 	left: auto;
432 	left: auto;
433 	top: -999em;
434 }
435 
436 /* This "unhides" the sub-menus (left: -999em is what hides them) */
437 body.IE6 #ja-cssmenu li.sfhover ul, body.IE6 #ja-cssmenu li.havechildsfhover ul, body.IE6 #ja-cssmenu li.havechild-activesfhover ul, body.IE6 #ja-cssmenu li.activesfhover ul,
438 body.IE6 #ja-cssmenu li li.sfhover ul, body.IE6 #ja-cssmenu li li.havesubchildsfhover ul, body.IE6 #ja-cssmenu li li.havesubchild-activesfhover ul, body.IE6 #ja-cssmenu li li.activesfhover ul,
439 body.IE6 #ja-cssmenu li li li.sfhover ul, body.IE6 #ja-cssmenu li li li.havesubchildsfhover ul, body.IE6 #ja-cssmenu li li li.havesubchild-activesfhover ul, body.IE6 #ja-cssmenu li li li.activesfhover ul,
440 body.IE7 #ja-cssmenu li.sfhover ul, body.IE7 #ja-cssmenu li.havechildsfhover ul, body.IE7 #ja-cssmenu li.havechild-activesfhover ul, body.IE7 #ja-cssmenu li.activesfhover ul,
441 body.IE7 #ja-cssmenu li li.sfhover ul, body.IE7 #ja-cssmenu li li.havesubchildsfhover ul, body.IE7 #ja-cssmenu li li.havesubchild-activesfhover ul, body.IE7 #ja-cssmenu li li.activesfhover ul,
442 body.IE7 #ja-cssmenu li li li.sfhover ul, body.IE7 #ja-cssmenu li li li.havesubchildsfhover ul, body.IE7 #ja-cssmenu li li li.havesubchild-activesfhover ul, body.IE7 #ja-cssmenu li li li.activesfhover ul,
443 body.OPE #ja-cssmenu li.sfhover ul, body.OPE #ja-cssmenu li.havechildsfhover ul, body.OPE #ja-cssmenu li.havechild-activesfhover ul, body.OPE #ja-cssmenu li.activesfhover ul,
444 body.OPE #ja-cssmenu li li.sfhover ul, body.OPE #ja-cssmenu li li.havesubchildsfhover ul, body.OPE #ja-cssmenu li li.havesubchild-activesfhover ul, body.OPE #ja-cssmenu li li.activesfhover ul,
445 body.OPE #ja-cssmenu li li li.sfhover ul, body.OPE #ja-cssmenu li li li.havesubchildsfhover ul, body.OPE #ja-cssmenu li li li.havesubchild-activesfhover ul, body.OPE #ja-cssmenu li li li.activesfhover ul {
446 	top: auto;
447 }
448 
449 /* TYPOGRAPY FIX FOR RTL */
450 pre, .code {
451 	border-right: 5px solid #999999;
452 	border-left: none;
453 }
454 
455 blockquote {
456 	padding: 1em 40px 1em 15px;
457 }
458 
459 blockquote span.open {
460 	float: right;
461 	padding: 0 20px 0 0;
462 	background-position: right top;
463 }
464 
465 blockquote span.close {
466 	padding: 0 0 0 20px;
467 	background-position: bottom left;
468 }
469 
470 /* Small quote */
471 .small-quote span.open-quote {
472 	padding-left: 20px;
473 	background-position: center left;
474 }
475 
476 .small-quote span.close-quote {
477 	padding-right: 20px;
478 	background-position: center right;
479 }
480 
481 .small-quote span.author {
482 	padding: 2px 20px 2px 5px;
483 	background-position: 99% 4px;
484 }
485 
486 /* Dropcap */
487 .dropcap {
488 	float: right;
489 	padding: 4px 0 0 8px;
490 }
491 
492 /* Note Style */
493 p.stickynote {
494 	padding: 10px 40px 10px 0;
495 	background-position: 99% 50%;
496 }
497 
498 p.download {
499 	padding: 10px 40px 10px 0;
500 	background-position: 99% 50%;
501 }
502 
503 .blocknumber {
504 	clear: both;
505 	padding: 5px 15px 10px;
506 	position: relative;
507 }
508 
509 /* Check list */
510 ul.checklist {
511 	list-style: none;
512 }
513 
514 ul.checklist li {
515 	margin-right: 15px;
516 	padding: 0 20px 5px 0px;
517 	background-position: right 3px;
518 }
519 /* Small checklist */
520 ul.small-checklist {
521 	list-style: none;
522 }
523 
524 ul.small-checklist li {
525 	margin-right: 15px;
526 	padding: 0 20px 5px 0;
527 	background-position: right 3px;
528 }
529 
530 /* Check list */
531 ul.stars {
532 	list-style: none;
533 }
534 
535 ul.stars li {
536 	margin-right: 15px;
537 	padding: 0px 20px 5px 0;
538 	background-position: right 3px;
539 }
540 
541 .IE7 ul li, 
542 .IE7 ul.checklist li, 
543 .IE7 ul.small-checklist li,
544 .IE7 ul.stars li
545 {
546 	padding-right: 40px;
547 }
548 
549 /* Tips, Error, Message, Hightlight*/
550 p.error {
551 	padding-right: 25px;
552 	background-position: top right;
553 }
554 
555 p.message {
556 	padding-right: 25px;
557 	background-position: top right;
558 }
559 
560 p.tips {
561 	padding-right: 25px;
562 	background-position: top right;
563 }
564 
565 /* Bignumber */
566 .bignumber {
567 	float: right;
568 	margin-left: 8px;
569 	padding: 6px 7px;
570 	display: block;
571 	background-position: top right;
572 }
573 
574 /* Talking box. Thinking box. */
575 div.bubble1 span.author,
576 div.bubble2 span.author,
577 div.bubble3 span.author,
578 div.bubble4 span.author {
579 	padding-right: 15px;
580 	margin-right: 15px;
581 	background-position: center right;
582 	float: right;
583 }
584 
585 div.bubble1 div {
586 	background: url(../images/rtl/bub12-br.gif) no-repeat bottom left;
587 }
588 
589 div.bubble1 div div {
590 	background: url(../images/rtl/bub12-bl.gif) no-repeat bottom right;
591 }
592 
593 div.bubble1 div div div {
594 	background: url(../images/rtl/bub12-tr.gif) no-repeat top left;
595 }
596 
597 div.bubble1 div div div div {
598 	background: url(../images/rtl/bub12-tl.gif) no-repeat top right;
599 }
600 
601 div.bubble2 div {
602 	background: url(../images/rtl/bub22-br.gif) no-repeat bottom left;
603 }
604 
605 div.bubble2 div div {
606 	background: url(../images/rtl/bub22-bl.gif) no-repeat bottom right;
607 }
608 
609 div.bubble2 div div div {
610 	background: url(../images/rtl/bub22-tr.gif) no-repeat top left;
611 }
612 
613 div.bubble2 div div div div {
614 	background: url(../images/rtl/bub22-tl.gif) no-repeat top right;
615 }
616 
617 div.bubble3 div {
618 	background: url(../images/rtl/bub32-br.gif) no-repeat bottom left;
619 }
620 
621 div.bubble3 div div {
622 	background: url(../images/rtl/bub32-bl.gif) no-repeat bottom right;
623 }
624 
625 div.bubble3 div div div {
626 	background: url(../images/rtl/bub32-tr.gif) no-repeat top left;
627 }
628 
629 div.bubble3 div div div div {
630 	background: url(../images/rtl/bub32-tl.gif) no-repeat top right;
631 }
632 
633 div.bubble4 div {
634 	background: url(../images/rtl/bub42-br.gif) no-repeat bottom left;
635 }
636 
637 div.bubble4 div div {
638 	background: url(../images/rtl/bub42-bl.gif) no-repeat bottom right;
639 }
640 
641 div.bubble4 div div div {
642 	background: url(../images/rtl/bub42-tr.gif) no-repeat top left;
643 }
644 
645 div.bubble4 div div div div {
646 	background: url(../images/rtl/bub42-tl.gif) no-repeat top right;
647 }
648 
649 /* Legend */
650 .legend-title {
651 	display: block;
652 	float: left;
653 	right: 7px;
654 	left: auto;
655 }