Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
freebsd
GitHub Repository: freebsd/freebsd-doc
Path: blob/main/website/content/en/layout/css/navigation.css
18096 views
1
/*
2
* FreeBSD.org - Navigation (and List) Styles
3
*
4
* $FreeBSD$
5
*/
6
7
/* Site Navigation */
8
9
@media screen {
10
#topnav {
11
text-align: left;
12
color: #666;
13
font-size: 0.9em;
14
margin: 0;
15
padding: 0;
16
height: 29px;
17
overflow: visible;
18
margin-top: 7px;
19
}
20
21
#topnavleft {
22
width: 7px;
23
height: 29px;
24
border: 0px;
25
padding-right: 10px;
26
margin: 0px;
27
float: left;
28
}
29
30
#topnavleft img {
31
border: 0px;
32
margin: 0;
33
padding: 0;
34
}
35
36
#topnavright {
37
width: 7px;
38
height: 29px;
39
border: 0px;
40
padding: 0px;
41
margin: 0px;
42
float: right;
43
}
44
45
#topnavright img {
46
border: 0px;
47
margin: 0;
48
padding: 0;
49
}
50
51
#topnavlist {
52
list-style: none;
53
margin: 0;
54
padding: 0;
55
height: 29px;
56
}
57
58
#topnavlist li {
59
padding: 0 1em 0 1.2em;
60
display: inline;
61
border-left: 1px solid #B4B4B4;
62
}
63
64
#topnavlist li a {
65
color: #666;
66
font-weight: bold;
67
text-decoration: none;
68
}
69
70
#topnavlist li:first-child {
71
border-left: 0;
72
padding-left: 0;
73
}
74
75
/* New drop-down menu implementation */
76
77
#menu {
78
float: left;
79
height: 2.0em;
80
font-size: 90%;
81
clear: both;
82
margin-top: .1%;
83
font-weight: bold;
84
}
85
86
#menu ul {
87
list-style: none;
88
margin: 0;
89
padding: 0px 10px 2px 10px;
90
float: left;
91
border-left: 1px solid #B4B4B4;
92
}
93
94
#menu ul:first-child {
95
padding-left: 0;
96
border: 0;
97
}
98
99
#menu a {
100
display: block;
101
padding: 0px 3px;
102
color: #666;
103
text-decoration: none;
104
}
105
106
#menu a:hover {
107
color: #990000;
108
}
109
110
#menu li {
111
position: relative;
112
}
113
114
#menu ul ul {
115
position: absolute;
116
background-color: #e5e5e5;
117
padding: 2px;
118
border: 0;
119
width: 10em;
120
z-index: 500;
121
}
122
123
#menu ul ul li {
124
border-top: 1px solid #B4B4B4;
125
padding: 4px 0 4px 0;
126
}
127
128
#menu ul ul ul {
129
top: 0;
130
left: 100%;
131
background: #e5e5e5;
132
}
133
134
div#menu ul ul,
135
div#menu ul li:hover ul ul,
136
div#menu ul ul li:hover ul ul {
137
display: none;
138
}
139
140
div#menu ul li:hover ul,
141
div#menu ul ul li:hover ul,
142
div#menu ul ul ul li:hover ul {
143
display: block;
144
}
145
146
/* Language selection */
147
148
#languagenav {
149
text-align: right;
150
color: #666;
151
font-size: 0.9em;
152
margin: 0px 0px 0px 0px;
153
right: 0px;
154
padding: 0;
155
}
156
157
#languagenavlist {
158
list-style: none;
159
margin: 0;
160
padding: 0;
161
}
162
163
#languagenavlist li {
164
padding: 0 0.5em 0 0.2em;
165
display: inline;
166
border-right: 1px solid #B6B6B6;
167
}
168
169
#languagenavlist li.last-child {
170
padding: 0 0em 0 0.2em;
171
border-right: 0;
172
}
173
174
#languagenavlist li a {
175
text-decoration: underline;
176
}
177
178
#languagenavlist li a:hover {
179
}
180
181
/* The search navigation is the list of links above the search box. */
182
183
#searchnav {
184
position: relative;
185
text-align: right;
186
color: #fff;
187
font-size: 0.9em;
188
margin: 0px 0px 0px 0px;
189
margin-top: 8px;
190
right: 0px;
191
padding: 0;
192
}
193
194
#searchnavlist {
195
list-style: none;
196
margin: 0;
197
padding: 0;
198
}
199
200
#searchnavlist li {
201
padding: 0 0.6em 0 0.3em;
202
display: inline;
203
border-right: 1px solid #fff;
204
}
205
206
#searchnavlist li.last-child {
207
padding: 0 0 0 0.3em;
208
border-right: 0;
209
}
210
211
#searchnavlist li a {
212
color: #FFCC66;
213
text-decoration: underline;
214
}
215
216
#searchnavlist li a:hover {
217
color: #fff;
218
}
219
220
/* Category Navigation */
221
222
#sidenav, #sidenav ul, #sidenav ul ul {
223
margin: 0;
224
padding: 0;
225
list-style: none;
226
font-size: 1.0em;
227
}
228
229
#sidenav {
230
width: 150px;
231
background-color: #eee;
232
border: 1px solid #D4D4D4;
233
}
234
235
#sidenav ul {
236
padding: 8px 4px 12px 4px;
237
}
238
239
#sidenav ul ul {
240
background: none;
241
background-color: #eee;
242
margin: 0;
243
padding: 0;
244
list-style: none;
245
}
246
247
#sidenav ul ul li {
248
background: none;
249
border: none;
250
}
251
252
#sidenav ul li {
253
border-bottom: 1px solid #eee;
254
margin: 0;
255
padding-left: 12px;
256
background-image: url(../images/blt_red_arrow.png);
257
background-repeat: no-repeat;
258
background-position: 12px 0.65em;
259
}
260
261
#sidenav ul li.active {
262
font-weight: bold;
263
}
264
265
#sidenav ul li.active span {
266
display: none;
267
}
268
269
#sidenav ul li a {
270
display: block;
271
color: #990000;
272
text-decoration: underline;
273
padding: 3px 5px 3px 12px;
274
margin: 0;
275
}
276
277
#sidenav ul ul li a.active {
278
font-weight: bold;
279
}
280
281
#sidenav ul ul li a {
282
display: block;
283
padding-left: 12px;
284
margin: 0;
285
}
286
287
#sidenav ul li a:hover {
288
color: #000;
289
}
290
291
#feedlinks {
292
padding-top: 5px;
293
padding-left: 5px;
294
margin-top: 5px;
295
margin-left: 5px;
296
list-style: none;
297
display: block;
298
}
299
300
#feedlinks ul {
301
list-style-image: url(../images/rss_icon.png);
302
}
303
304
/* Right Navigation */
305
306
.rightnav, .rightnav ul, .rightnav ul ul {
307
margin: 0;
308
padding: 0;
309
list-style: none;
310
font-size: 1.0em;
311
}
312
313
.rightnav {
314
width: 150px;
315
background-color: #eee;
316
border: 1px solid #D4D4D4;
317
}
318
319
.rightnav ul {
320
padding: 8px 4px 12px 4px;
321
}
322
323
.rightnav ul ul {
324
background: none;
325
background-color: #eee;
326
margin: 0;
327
padding: 0;
328
list-style: none;
329
}
330
331
.rightnav ul ul li {
332
background: none;
333
border: none;
334
}
335
336
.rightnav ul li {
337
border-bottom: 1px solid #eee;
338
margin: 0;
339
padding-left: 12px;
340
background-image: url(../images/blt_red_arrow.png);
341
background-repeat: no-repeat;
342
background-position: 12px 0.65em;
343
}
344
345
.rightnav ul li.active {
346
font-weight: bold;
347
}
348
349
.rightnav ul li.active span {
350
display: none;
351
}
352
353
.rightnav ul li a {
354
display: block;
355
color: #990000;
356
text-decoration: underline;
357
padding: 3px 5px 3px 12px;
358
margin: 0;
359
}
360
361
.rightnav ul ul li a.active {
362
font-weight: bold;
363
}
364
365
.rightnav ul ul li a {
366
display: block;
367
padding-left: 12px;
368
margin: 0;
369
}
370
371
.rightnav ul li a:hover {
372
color: #000;
373
}
374
375
.rightnav h1, .rightnav h2, .rightnav h3, .rightnav h4, .rightnav h5, .rightnav h6, .rightnav p {
376
padding-left: 10px;
377
padding-right: 10px;
378
}
379
}
380
381
@media print {
382
#topnav, #topnavleft, #topnavright, #topnavlist { display: none; }
383
#menu { display: none; }
384
#languagenav, #languagenavlist { display: none; }
385
#searchnav, #searchnavlist { display: none; }
386
#sidenav { display: none; }
387
#feedlinks { display: none; }
388
.rightnav { display: none; }
389
}
390
391