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;
126) background: url(../images/button-download.png) left top no-repeat;
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)
179) #content img { max-width: 250px; }
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; }
378)
379) .meta {
380) float: right;
381) width: auto;
382) }
383)
384) /* DL TABLE ------------*/
385)
386) td.intro { padding: 0 0 10px; }
387)
388) .windows,
389) .mac,
390) .linux,
391) .android { padding: 5px 0 5px 20px; }
392)
393) .windows { background: url(../images/icon-windows.gif) left center no-repeat; }
394) .mac { background: url(../images/icon-mac.gif) left center no-repeat; }
395) .linux { background: url(../images/icon-linux.gif) left center no-repeat; }
396) .android { background: url(../images/icon-android.gif) left center no-repeat; }
397)
398)
399) /* MISC ------------*/
400)
401) .title {
402) background: url(../images/table-title-arrow.jpg) right top no-repeat;
403) padding: 10px 25px 0 10px;
404) height: 33px;
405) float: left;
406) }
407)
408) .title a:link,
409) .title a:visited {
410) background: url(../images/table-title.jpg) left top no-repeat;
411) height: 33px;
412) display: block;
413) }
414)
415) .paypal {
416) float: left;
417) width: auto;
418) min-height: 159px;
419) max-width: 365px;
420) }
421) .paypal span { padding-right: 20px; }
422)
423) .warning {
424) background: #ebd4a9 url(../images/warning.jpg) left center no-repeat;;
425) border: 1px solid #deba78;
426) padding: 10px 15px;
427) }
428) .warning p { padding-left: 40px; }
429)
430) .focus {
431) background: #f4f2c7;
432) border: 1px solid #ebd4a9;
433) padding: 10px 15px;
434) }
435)
436) .focus .icon {
437) float: left;
438) width: auto;
439) margin-right: 10px;
440) }
441)
442) .featured-project { width: 313px; }
443)
444) /* FORM ------------*/
445)
446) input, select {
447) margin: 0 3px 10px 0;
448) }
449)
450) input.textfield {
451) padding: 0 10px;
452) vertical-align: top;
453) }
454)
455) .donate-btn {
456) background: url(../images/button-donate.jpg) left top no-repeat;
457) height: 26px;
458) width: 92px;
459) text-indent: -9999px;
460) overflow: hidden;
461) border: 0;
462) vertical-align: top;
463) margin-top: 5px;
464) }
465) .donate-btn:hover {
466) background-position: 0 -26px;
467) cursor: pointer;
468) }
469)
470) .signup {
471) background: #96c35a;
472) border-top: 1px solid #6ab334;
473) border-left: 1px solid #6ab334;
474) border-bottom: 1px solid #5a952b;
475) border-right: 1px solid #5a952b;
476) height: 31px;
477) padding: 0 5px;
478) vertical-align: top;
479) color: #222c14;
480) font-weight: bold;
481) font-size: 1em;
482) line-height: 1em;
483) }
484) .signup:hover { background: #6ab334; }
485)
486) select#lang {
487) float: left;
488) width: 160px;
489) margin-right: 3px;
490) }
491) .go {
492) background: #96c35a;
493) border-top: 1px solid #6ab334;
494) border-left: 1px solid #6ab334;
495) border-bottom: 1px solid #5a952b;
496) border-right: 1px solid #5a952b;
497) padding: 0 5px;
498) vertical-align: top;
499) color: #222c14;
500) font-weight: bold;
501) font-size: 1em;
502) line-height: 1em;
503) height: 18px;
504) }
505) .go:hover { background: #6ab334; }
506)
507)
508) /* FOOTER ------------*/
509)
510) #footer {
511) width: 960px;
512) height: 200px;
513) border-top: 1px solid #ddd;
514) padding: 20px 0;
515) margin: 20px 0 0;
516) }
517)
518) .onion {
519) float: left;
520) width: 78px;
521) padding-right: 20px;
522) height: 100%;
523) }
524)
525) #footer .about {
526) width: 180px;
527) padding-right: 30px;
528) border-right: 1px solid #ddd;
529) float: left;
530) }
531)
532) #footer .newsletter {
533) padding: 0 0 15px 30px;
534) width: auto;
535) margin-left: 308px;
536) }
537)
538) #footer input.textfield {
539) width: 220px;
540) height: 26px;
541) }
542)
543) #footer input {
544) margin: 0;
545) }
546)
547) #footer .col {
548) float: left;
549) width: 100px;
550) margin-left: 20px;
551) }
552)
553) #footer .first { margin-left: 30px; }
554) #footer .wider { width: 201px; }
555)
556) /*
557) ** Markup free clearing
558) ** Details: http://www.positioniseverything.net/easyclearing.html
559) */
560) .clearfix:after {
561) content: ".";
562) display: block;
563) height: 0;
564) clear: both;
565) visibility: hidden;
566) }
567)
568) .clearfix {
569) display: inline-block;
570) }
571)
572) /* Hides from IE-mac \*/
573) * html .clearfix {
574) height: 1%;
575) }
576) .clearfix {
577) display: block;
578) }
|