Chris@0
|
1 /* --------------- System Tabs --------------- */
|
Chris@0
|
2
|
Chris@0
|
3 div.tabs {
|
Chris@18
|
4 margin-bottom: 20px;
|
Chris@0
|
5 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
Chris@0
|
6 }
|
Chris@0
|
7 .tabs ul.primary {
|
Chris@0
|
8 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
Chris@0
|
9 }
|
Chris@0
|
10 .tabs ul.primary li a {
|
Chris@18
|
11 display: block;
|
Chris@18
|
12 height: 1.8em;
|
Chris@18
|
13 padding: 0 10px 3px;
|
Chris@0
|
14 color: #000;
|
Chris@18
|
15 border-width: 1px;
|
Chris@18
|
16 border-style: solid solid none solid;
|
Chris@18
|
17 border-color: #bbb;
|
Chris@0
|
18 background-color: #ededed;
|
Chris@18
|
19 text-shadow: 0 1px 0 #fff;
|
Chris@18
|
20 font-size: 0.929em;
|
Chris@0
|
21 line-height: 1.9;
|
Chris@0
|
22 }
|
Chris@0
|
23 .tabs ul.primary li.is-active a {
|
Chris@18
|
24 border: 1px solid #bbb;
|
Chris@14
|
25 background-color: #fff;
|
Chris@0
|
26 }
|
Chris@14
|
27
|
Chris@0
|
28 @media screen and (max-width: 37.5em) { /* 600px */
|
Chris@0
|
29 .tabs ul.primary {
|
Chris@0
|
30 border-bottom: 1px solid #bbb;
|
Chris@0
|
31 }
|
Chris@0
|
32 .tabs ul.primary li {
|
Chris@0
|
33 display: block;
|
Chris@0
|
34 margin: 0;
|
Chris@0
|
35 }
|
Chris@0
|
36 .tabs ul.primary li a {
|
Chris@0
|
37 padding: 5px 10px;
|
Chris@0
|
38 }
|
Chris@0
|
39 .tabs ul.primary li.is-active a {
|
Chris@0
|
40 border-bottom: none;
|
Chris@0
|
41 }
|
Chris@0
|
42 }
|
Chris@14
|
43
|
Chris@0
|
44 @media screen and (min-width: 37.5em) { /* 600px */
|
Chris@0
|
45 .tabs ul.primary {
|
Chris@18
|
46 overflow: hidden;
|
Chris@18
|
47 height: auto;
|
Chris@18
|
48 margin: 0;
|
Chris@18
|
49 padding: 0 3px;
|
Chris@18
|
50 white-space: nowrap;
|
Chris@18
|
51 border: none;
|
Chris@0
|
52 border-collapse: collapse;
|
Chris@18
|
53 background: transparent url(../../images/tabs-border.png) repeat-x left bottom;
|
Chris@0
|
54 line-height: normal;
|
Chris@0
|
55 }
|
Chris@0
|
56 .tabs ul.primary li {
|
Chris@0
|
57 display: block;
|
Chris@0
|
58 float: left; /* LTR */
|
Chris@18
|
59 margin: 0 5px 0 0; /* LTR */
|
Chris@0
|
60 vertical-align: bottom;
|
Chris@0
|
61 }
|
Chris@0
|
62 [dir="rtl"] .tabs ul.primary li {
|
Chris@18
|
63 float: right;
|
Chris@0
|
64 margin: 0 0 0 5px;
|
Chris@0
|
65 }
|
Chris@0
|
66 .tabs ul.primary li a {
|
Chris@0
|
67 float: left; /* not LTR */
|
Chris@0
|
68 border-top-left-radius: 6px;
|
Chris@0
|
69 border-top-right-radius: 6px;
|
Chris@0
|
70 }
|
Chris@0
|
71 .tabs ul.primary li.is-active a {
|
Chris@0
|
72 border-bottom: 1px solid #fff;
|
Chris@0
|
73 }
|
Chris@0
|
74 }
|
Chris@0
|
75 .tabs ul.secondary {
|
Chris@18
|
76 overflow: hidden;
|
Chris@0
|
77 margin: 5px;
|
Chris@0
|
78 padding: 0.5em 0;
|
Chris@18
|
79 border-bottom: none;
|
Chris@0
|
80 }
|
Chris@0
|
81 .tabs ul.secondary li {
|
Chris@0
|
82 display: block;
|
Chris@0
|
83 float: left; /* LTR */
|
Chris@0
|
84 margin: 0;
|
Chris@0
|
85 padding: 0 1em;
|
Chris@18
|
86 border-right: 1px solid #ccc; /* LTR */
|
Chris@0
|
87 }
|
Chris@0
|
88 [dir="rtl"] .tabs ul.secondary li {
|
Chris@18
|
89 float: right;
|
Chris@18
|
90 border-right: none;
|
Chris@0
|
91 border-left: 1px solid #ccc;
|
Chris@0
|
92 }
|
Chris@0
|
93 .tabs ul.secondary li:last-child {
|
Chris@0
|
94 border-right: none; /* LTR */
|
Chris@0
|
95 }
|
Chris@0
|
96 [dir="rtl"] .tabs ul.secondary li:last-child {
|
Chris@0
|
97 border-left: none;
|
Chris@0
|
98 }
|
Chris@0
|
99 .tabs ul.secondary li:first-child {
|
Chris@0
|
100 padding-left: 0; /* LTR */
|
Chris@0
|
101 }
|
Chris@0
|
102 [dir="rtl"] .tabs ul.secondary li:first-child {
|
Chris@0
|
103 padding-right: 0;
|
Chris@0
|
104 }
|
Chris@0
|
105 .tabs ul.secondary li a {
|
Chris@0
|
106 display: inline;
|
Chris@0
|
107 padding: 0.25em 0.5em;
|
Chris@0
|
108 text-decoration: none;
|
Chris@0
|
109 }
|
Chris@0
|
110 .tabs ul.secondary li a.is-active {
|
Chris@0
|
111 border-bottom: none;
|
Chris@0
|
112 border-radius: 5px;
|
Chris@18
|
113 background: #f2f2f2;
|
Chris@0
|
114 }
|