first cut of the new, shiny...
Andrew Lewman authored 13 years ago
|
1) @charset "UTF-8";
2) /* Layout */
3)
4) /* UNIVERSAL ------------*/
5)
6) body {
7) background: #fff;
8) }
9)
10) #wrap {
11) width: 960px;
12) margin: 0 auto;
13) }
14)
15) .left { float: left; }
16) .right { float: right; }
17) .twenty { width: 20%; }
18) .thirty { width: 30%; }
19) .forty { width: 40%; }
20) .fifty { width: 50%; }
21) .sixty { width: 60%; }
22) .hundred { width: 100%; }
23)
24) .nopad { padding: 0; }
25) .toppad { padding-top: 10px; }
26) .toptwenty { margin-top: 20px; }
27) .topforty { margin-top: 40px; }
28)
29)
30) /* HEADER ------------*/
31)
32) #header {
33) width: 960px;
34) height: 97px;
35) margin-bottom: 23px;
36) position: relative;
37) }
38)
39) h1#logo {
40) margin: 0;
41) float: left;
42) }
43)
44) h1#logo a,
45) h1#logo a:visited {
46) background: url(../images/tor-logo.jpg) left top no-repeat;
47) text-indent: -9999px;
48) overflow: hidden;
49) width: 150px;
50) height: 97px;
51) display: block;
52) }
53)
54) #nav {
55) float: right;
56) }
57)
58) #nav ul {
59) height: 50px;
60) float: right;
61) margin-bottom: 0;
62) }
63)
64) #nav ul li {
65) float: left;
66) display: inline;
67) width: auto;
68) }
69)
70) #calltoaction {
71) height: 30px;
72) float: right;
73) margin-top: 10px;
74) }
75)
76) #calltoaction ul {
77) padding: 0;
78) margin: 0;
79) height: 30px;
80) list-style: none;
81) float: right;
82) }
83)
84) #calltoaction ul li {
85) list-style: none;
86) display: inline;
87) float: left;
88) width: auto;
89) margin-left: 10px;
90) }
91)
92) #calltoaction ul li a:link,
93) #calltoaction ul li a:visited{
94) background: #96c35a;
95) border-top: 1px solid #6ab334;
96) border-left: 1px solid #6ab334;
97) border-bottom: 1px solid #5a952b;
98) border-right: 1px solid #5a952b;
99) padding: 8px 8px 0px;
100) color: #222c14;
101) font-weight: bold;
102) text-decoration: none;
103) font-size: 1.167em;
104) line-height: 1.167em;
105) height: 22px;
106) float: left;
107) }
108)
109) #calltoaction ul li a:hover,
110) #calltoaction ul li a.active { background: #6ab334; }
111)
112)
113) /* BANNER ------------*/
114)
115) #banner {
116) background: url(../images/bg-banner.jpg) left top no-repeat;
117) height: 200px;
118) width: 600px;
119) padding: 23px 15px;
120) margin-bottom: 15px;
121) }
122)
123) #download a:link,
124) #download a:visited {
125) margin: -17px 0 0;
|
|
make the alternating colors...
Andrew Lewman authored 13 years ago
|
126) background: url(../images/button-download.png) left top no-repeat;
|
|
first cut of the new, shiny...
Andrew Lewman authored 13 years ago
|
127) width: 257px;
128) height: 79px;
129) float: left;
130) padding: 35px 0 0 80px;
131) text-decoration: none;
132) }
133)
134) #download a .download-tor {
135) background: url(../images/button-download-arrow.png) right center no-repeat;
136) font-family: "Arial Narrow", Arial, sans-serif;
137) color: #fff;
138) font-size: 2.167em;
139) letter-spacing: 1px;
140) padding-right: 25px;
141) }
142) #download a .version {
143) color: #bda5cc;
144) font-size: 1.167em;
145) line-height: 1.167em;
146) }
147) #download a .info {
148) color: #bda5cc;
149) font-size: 0.833em;
150) line-height: 0.833em;
151) }
152)
153) #download a:hover {
154) background-position: 0 -114px;
155) }
156) #download a:hover .version,
157) #download a:hover .info { color: #f1c6a1; }
158)
159) #banner ul {
160) background: #387520 url(../images/banner-gradient.jpg) left top repeat-x;
161) border: 1px solid #366b32;
162) width: 180px;
163) float: right;
164) margin: 0 15px 0 0;
165) padding: 10px 10px 10px 30px;
166) }
167)
168) #banner ul li {
169) list-style: url(../images/white-bullet.png) outside;
170) padding: 5px 0;
171) }
172)
173) /* CONTENT ------------*/
174)
175) #content {
176) width: 960px;
177) }
178)
|
|
increase max img width, lin...
Andrew Lewman authored 13 years ago
|
179) #content img { max-width: 550px; }
|
|
first cut of the new, shiny...
Andrew Lewman authored 13 years ago
|
180)
181) #breadcrumbs { padding: 0 0 10px 5px; }
182)
183) #home #maincol {
184) float: left;
185) width: 620px;
186) margin-right: 20px;
187) }
188)
189) #maincol {
190) float: right;
191) width: 710px;
192) margin-bottom: 20px;
193) }
194)
195) #maincol-left {
196) float: left;
197) width: 710px;
198) margin-bottom: 20px;
199) }
200)
201) .subcol {
202) width: 280px;
203) float: left;
204) margin: 0 0 25px;
205) }
206)
207) #content .first {
208) margin-right: 20px;
209) }
210)
211) /* SIDEBAR ------------*/
212)
213) #home #sidecol {
214) float: right;
215) width: 300px;
216) }
217)
218) #sidecol {
219) float: left;
220) width: 230px;
221) margin-right: 20px;
222) }
223)
224) #sidecol-right {
225) float: right;
226) width: 230px;
227) margin-left: 20px;
228) }
229)
230) #torusers { margin: 0 0 27px; }
231) .user {
232) margin: 0 0 12px;
233) height: auto;
234) }
235) .user img, .project-icon {
236) border: 1px solid #cac8a7;
237) float: left;
238) margin: 3px 10px 0 0;
239) }
240) .user p { margin: 0; }
241)
242) /* IMGSHADOW ------------*/
243)
244) .img-shadow {
245) float:left;
246) background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
247) background: url(../images/shadow.gif) no-repeat bottom right;
248) margin: 10px 0 10px 10px !important;
249) margin: 10px 0 10px 5px;
250) }
251)
252) .img-shadow .infoblock,
253) .img-shadow .important-infoblock,
254) .img-shadow .custom-infoblock,
255) .img-shadow #sidenav,
256) .img-shadow .sidenav-sub {
257) display: block;
258) position: relative;
259) margin: -6px 6px 6px -6px;
260) background-color: #fff;
261) border: 1px solid #ddd;
262) }
263) .img-shadow .important-infoblock {
264) background-color: #f7f8f0;
265) border: 1px solid #eeefe8;
266) }
267)
268) .img-shadow .infoblock,
269) .img-shadow .important-infoblock {
270) padding: 15px;
271) width: 188px;
272) }
273)
274) .img-shadow .custom-infoblock {
275) padding: 15px;
276) height: 120px;
277) width: 426px;
278) }
279)
280) .img-shadow .infoblock p,
281) .img-shadow .important-infoblock p,
282) .img-shadow .custom-infoblock p {
283) margin: 0;
284) }
285)
286)
287) /* SIDENAV ------------*/
288)
289) /*Note: #sidenav-sub is used on the downloads page as a tertiary navigation*/
290)
291) .img-shadow #sidenav,
292) .img-shadow .sidenav-sub {
293) padding: 10px 0 0;
294) width: 218px;
295) }
296)
297) #sidenav ul li,
298) .sidenav-sub ul li { border-bottom: 1px solid #ddd; }
299)
300) #sidenav ul li.dropdown a:link,
301) #sidenav ul li.dropdown a:visited { background: url(../images/sidenav-arrow.gif) left center no-repeat; }
302) #sidenav ul li.dropdown a.active { background: url(../images/sidenav-arrow-active.gif) left center no-repeat; }
303)
304) .sidenav-sub ul li.dropdown a:link,
305) .sidenav-sub ul li.dropdown a:visited {
306) background: url(../images/sidenav-arrow.gif) left top no-repeat;
307) margin-top: 12px;
308) }
309)
310) #sidenav ul li a:link,
311) #sidenav ul li a:visited {
312) display: block;
313) height: auto;
314) padding: 8px 15px 8px 26px;
315) }
316)
317) #sidenav ul li ul li a:link,
318) #sidenav ul li ul li a:visited {
319) padding-left: 37px;
320) }
321)
322) .sidenav-sub ul li a:link,
323) .sidenav-sub ul li a:visited {
324) display: block;
325) padding: 0 15px 10px 26px;
326) line-height: 16px;
327) }
328)
329) #sidenav ul li.active {
330) background: url(../images/sidenav-active.png) left center no-repeat;
331) width: 230px;
332) border: 0;
333) }
334)
335) #sidenav ul li ul li ul li a:link,
336) #sidenav ul li ul li ul li a:visited {
337) padding-left: 48px;
338) }
339)
340) /* TABLE ------------*/
341)
342) table { width: 100%; }
343)
344) td { padding: 12px; }
345)
346) table td img,
347) table tr img {
348) border: 1px solid #cac8a7;
349) float: left;
350) margin-right: 10px;
351) }
352)
353) .icon {
354) float: left;
355) width: auto;
356) margin-right: 15px;
357) padding: 10px 0;
358) border: 0;
359) }
360)
361) .calendar {
362) background: url(../images/icon-calendar.jpg) left top no-repeat;
363) float: left;
364) margin-right: 10px;
365) width: 45px;
366) height: 54px;
367) text-align: center;
368) padding: 4px 0;
369) }
370)
371) .fauxhead {
372) background: url(../images/table-arrow.jpg) right top no-repeat;
373) width: 100%;
374) height: 11px;
375) }
376)
377) .beige { background: #f5f5df; }
|
|
slightly lighter gray.
Andrew Lewman authored 13 years ago
|
378) .gray { background: #e0e0e0; }
|
|
first cut of the new, shiny...
Andrew Lewman authored 13 years ago
|
379)
380) .meta {
381) float: right;
382) width: auto;
383) }
384)
385) /* DL TABLE ------------*/
386)
387) td.intro { padding: 0 0 10px; }
388)
389) .windows,
390) .mac,
391) .linux,
392) .android { padding: 5px 0 5px 20px; }
393)
394) .windows { background: url(../images/icon-windows.gif) left center no-repeat; }
395) .mac { background: url(../images/icon-mac.gif) left center no-repeat; }
396) .linux { background: url(../images/icon-linux.gif) left center no-repeat; }
397) .android { background: url(../images/icon-android.gif) left center no-repeat; }
398)
399)
400) /* MISC ------------*/
401)
402) .title {
403) background: url(../images/table-title-arrow.jpg) right top no-repeat;
404) padding: 10px 25px 0 10px;
405) height: 33px;
406) float: left;
407) }
408)
409) .title a:link,
410) .title a:visited {
411) background: url(../images/table-title.jpg) left top no-repeat;
412) height: 33px;
413) display: block;
414) }
415)
416) .paypal {
417) float: left;
418) width: auto;
419) min-height: 159px;
420) max-width: 365px;
421) }
422) .paypal span { padding-right: 20px; }
423)
424) .warning {
425) background: #ebd4a9 url(../images/warning.jpg) left center no-repeat;;
426) border: 1px solid #deba78;
427) padding: 10px 15px;
428) }
429) .warning p { padding-left: 40px; }
430)
431) .focus {
432) background: #f4f2c7;
433) border: 1px solid #ebd4a9;
434) padding: 10px 15px;
435) }
436)
437) .focus .icon {
438) float: left;
439) width: auto;
440) margin-right: 10px;
441) }
442)
443) .featured-project { width: 313px; }
444)
445) /* FORM ------------*/
446)
447) input, select {
448) margin: 0 3px 10px 0;
449) }
450)
451) input.textfield {
452) padding: 0 10px;
453) vertical-align: top;
454) }
455)
456) .donate-btn {
|
|
fix the donation links so t...
Andrew Lewman authored 13 years ago
|
457) background: left top no-repeat;
|
|
first cut of the new, shiny...
Andrew Lewman authored 13 years ago
|
458) height: 26px;
459) width: 92px;
460) text-indent: -9999px;
461) overflow: hidden;
462) border: 0;
463) vertical-align: top;
464) margin-top: 5px;
465) }
466) .donate-btn:hover {
467) background-position: 0 -26px;
468) cursor: pointer;
469) }
470)
471) .signup {
472) background: #96c35a;
473) border-top: 1px solid #6ab334;
474) border-left: 1px solid #6ab334;
475) border-bottom: 1px solid #5a952b;
476) border-right: 1px solid #5a952b;
477) height: 31px;
478) padding: 0 5px;
479) vertical-align: top;
480) color: #222c14;
481) font-weight: bold;
482) font-size: 1em;
483) line-height: 1em;
484) }
485) .signup:hover { background: #6ab334; }
486)
487) select#lang {
488) float: left;
489) width: 160px;
490) margin-right: 3px;
491) }
492) .go {
493) background: #96c35a;
494) border-top: 1px solid #6ab334;
495) border-left: 1px solid #6ab334;
496) border-bottom: 1px solid #5a952b;
497) border-right: 1px solid #5a952b;
498) padding: 0 5px;
499) vertical-align: top;
500) color: #222c14;
501) font-weight: bold;
502) font-size: 1em;
503) line-height: 1em;
504) height: 18px;
505) }
506) .go:hover { background: #6ab334; }
507)
508)
509) /* FOOTER ------------*/
510)
511) #footer {
|
|
increase the space for the...
Andrew Lewman authored 13 years ago
|
512) /* width: 960px; original */
513) width: 1024px;
|
|
first cut of the new, shiny...
Andrew Lewman authored 13 years ago
|
514) height: 200px;
515) border-top: 1px solid #ddd;
516) padding: 20px 0;
517) margin: 20px 0 0;
518) }
519)
520) .onion {
521) float: left;
|
|
increase the space for the...
Andrew Lewman authored 13 years ago
|
522) /* width: 78px; original */
523) width: 88px;
|
|
first cut of the new, shiny...
Andrew Lewman authored 13 years ago
|
524) padding-right: 20px;
525) height: 100%;
526) }
527)
528) #footer .about {
529) width: 180px;
530) padding-right: 30px;
531) border-right: 1px solid #ddd;
532) float: left;
533) }
534)
535) #footer .newsletter {
536) padding: 0 0 15px 30px;
537) width: auto;
538) margin-left: 308px;
539) }
540)
541) #footer input.textfield {
542) width: 220px;
543) height: 26px;
544) }
545)
546) #footer input {
547) margin: 0;
548) }
549)
550) #footer .col {
551) float: left;
552) width: 100px;
553) margin-left: 20px;
554) }
555)
556) #footer .first { margin-left: 30px; }
557) #footer .wider { width: 201px; }
558)
559) /*
560) ** Markup free clearing
561) ** Details: http://www.positioniseverything.net/easyclearing.html
562) */
563) .clearfix:after {
564) content: ".";
565) display: block;
566) height: 0;
567) clear: both;
568) visibility: hidden;
569) }
570)
571) .clearfix {
572) display: inline-block;
573) }
574)
575) /* Hides from IE-mac \*/
576) * html .clearfix {
577) height: 1%;
578) }
579) .clearfix {
580) display: block;
581) }
|
first cut of the new, shiny...