J1.5:Customising the JA Purity template/template.css

From Joomla! Documentation
< J1.5:Customising the JA Purity template(Difference between revisions)
Jump to: navigation, search
m
m (Adjusted category)
(One intermediate revision by one user not shown)
Line 2,293: Line 2,293:
 
}
 
}
 
</source>
 
</source>
−
<noinclude>
+
[[Category:CSS]]
−
[[Category:Beginners]]
+
−
[[Category:JA Purity template]]
+
−
[[Category:Tutorials]]
+
−
</noinclude>
+

Revision as of 17:03, 15 January 2011

Replacement filing cabinet.png
This Namespace has been archived - Please Do Not Edit or Create Pages in this namespace. Pages contain information for a Joomla! version which is no longer supported. It exists only as a historical reference, will not be improved and its content may be incomplete.
Quill icon.png
 This article is a stub and needs to be expanded. If you can provide information or finish this article you're welcome to do so. Please remove this message afterwards or replace with {{inuse}} while making major edits. - Thank you.


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. }
Retrieved from "http://docs.joomla.org/index.php?title=J1.5:Customising_the_JA_Purity_template/template.css&oldid=35233"
Personal tools
Namespaces

Variants
Actions
Navigation
Joomla! Sites
Toolbox