jquery.tabs.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. /* Caution! Ensure accessibility in print and other media types... */
  2. @media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
  3. .tabs-hide {
  4. display: none;
  5. }
  6. }
  7. /* Hide useless elements in print layouts... */
  8. @media print {
  9. .tabs-nav {
  10. display: none;
  11. }
  12. }
  13. /* Skin */
  14. .tabs-nav {
  15. margin-left:0px;
  16. list-style: none;
  17. padding: 0px 4px 4px 4px;
  18. border-bottom:1px dotted #999999;
  19. border-top:1px dotted #999999;
  20. vertical-align:middle;
  21. background:#efefef;
  22. }
  23. .tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
  24. display: block;
  25. clear: both;
  26. content: " ";
  27. }
  28. .tabs-nav li {
  29. float: left;
  30. margin: 0 0 0 1px;
  31. min-width: 84px; /* be nice to Opera */
  32. }
  33. .tabs-nav a, .tabs-nav a span {
  34. display: block;
  35. padding: 0 10px;
  36. }
  37. .tabs-nav a {
  38. position: relative;
  39. top: 1px;
  40. z-index: 2;
  41. padding-left: 0;
  42. color: #27537a;
  43. font-size: 12px;
  44. font-weight: bolder;
  45. line-height: 1.2;
  46. text-align: center;
  47. text-decoration: none;
  48. white-space: nowrap; /* required in IE 6 */
  49. }
  50. .tabs-nav .tabs-selected a {
  51. color: #000;
  52. }
  53. .tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
  54. background-position: 100% -150px;
  55. outline: 0; /* prevent dotted border in Firefox */
  56. }
  57. .tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
  58. background-position: 100% -100px;
  59. }
  60. .tabs-nav a span {
  61. /*width: 64px;*/ /* IE 6 treats width as min-width */
  62. /*min-width: 64px;*/
  63. /*height: 18px;*/ /* IE 6 treats height as min-height */
  64. /*min-height: 18px;*/
  65. /*padding-top: 6px;*/
  66. /*padding-right: 0;*/
  67. }
  68. *>.tabs-nav a span { /* hide from IE 6 */
  69. width: auto;
  70. height: auto;
  71. }
  72. .tabs-nav .tabs-selected a span {
  73. /*padding-top: 7px;*/
  74. }
  75. .tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
  76. background-position: 0 -50px;
  77. }
  78. .tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
  79. background-position: 0 0;
  80. }
  81. .tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
  82. cursor: text;
  83. }
  84. .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
  85. cursor: pointer;
  86. }
  87. .tabs-nav .tabs-disabled {
  88. opacity: .4;
  89. }
  90. .tabs-container {
  91. /*border-top: 1px solid #97a5b0;
  92. padding: 1em 8px;
  93. background: #fff;*/ /* declare background color for container to avoid distorted fonts in IE while fading */
  94. }
  95. .tabs-loading em {
  96. padding: 0 0 0 20px;
  97. background: url(loading.gif) no-repeat 0 50%;
  98. }