tor-webwml.git

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: 550px; } 

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) .gray { background: #e0e0e0; }

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 {
393) 	padding: 5px 0 5px 30px;
394) 	}

395) 
396) .windows { background: url(../images/icon-windows.gif) left center no-repeat; }
397) .mac { background: url(../images/icon-mac.gif) left center no-repeat; }
398) .linux { background: url(../images/icon-linux.gif) left center no-repeat; }
399) .android { background: url(../images/icon-android.gif) left center no-repeat; }
400) 
401) 
402) /* MISC ------------*/
403) 
404) .title {
405) 	background: url(../images/table-title-arrow.jpg) right top no-repeat;
406) 	padding: 10px 25px 0 10px;
407) 	height: 33px;
408) 	float: left;
409) }
410) 
411) 	.title a:link,
412) 	.title a:visited {
413) 		background: url(../images/table-title.jpg) left top no-repeat;
414) 		height: 33px;
415) 		display: block;
416) 	}	
417) 
418) .paypal {
419) 	float: left;
420) 	width: auto;
421) 	min-height: 159px;
422) 	max-width: 365px;
423) }
424) 	.paypal span { padding-right: 20px; }
425) 
426) .warning {

427)     background: #F4F2C7;
428)     border: 2px dashed #bfbd8c;
429)     padding: 25px 25px;
430)     margin-top: 4px;
431) 	}
432) 
433) 	.warning h2 {
434)  	  background: url("../images/warning.jpg") no-repeat scroll left top transparent;
435) 		padding-left: 40px;
436) 		}
437) 	
438) 	.warning p {
439) 		padding-left: 20px;
440) 		}

441) 	
442) .focus {
443) 	background: #f4f2c7;
444) 	border: 1px solid #ebd4a9;
445) 	padding: 10px 15px;
446) }
447) 
448) 	.focus .icon {
449) 		float: left;
450) 		width: auto;
451) 		margin-right: 10px;
452) 	}
453) 	
454) .featured-project { width: 313px; }
455) 	
456) /* FORM ------------*/
457) 
458) input, select {
459) 	margin: 0 3px 10px 0;
460) }
461) 
462) input.textfield {
463) 	padding: 0 10px;
464) 	vertical-align: top;
465) }
466) 
467) .donate-btn {

468)     background: left top no-repeat; 

469) 	height: 26px;
470) 	width: 92px;
471) 	text-indent: -9999px;
472) 	overflow: hidden;
473) 	border: 0;
474) 	vertical-align: top;
475) 	margin-top: 5px;
476) }
477) 	.donate-btn:hover {
478) 		background-position: 0 -26px;
479) 		cursor: pointer;
480) 	}
481) 
482) .signup {
483) 	background: #96c35a;
484) 	border-top: 1px solid #6ab334;
485) 	border-left: 1px solid #6ab334;
486) 	border-bottom: 1px solid #5a952b;
487) 	border-right: 1px solid #5a952b;
488) 	height: 31px;
489) 	padding: 0 5px;
490) 	vertical-align: top;
491) 	color: #222c14;
492) 	font-weight: bold;
493) 	font-size: 1em;
494) 	line-height: 1em;
495) }
496) 	.signup:hover { background: #6ab334; }
497) 
498) select#lang {
499) 	float: left;
500) 	width: 160px;
501) 	margin-right: 3px;
502) }
503) .go {
504) 	background: #96c35a;
505) 	border-top: 1px solid #6ab334;
506) 	border-left: 1px solid #6ab334;
507) 	border-bottom: 1px solid #5a952b;
508) 	border-right: 1px solid #5a952b;
509) 	padding: 0 5px;
510) 	vertical-align: top;
511) 	color: #222c14;
512) 	font-weight: bold;
513) 	font-size: 1em;
514) 	line-height: 1em;
515) 	height: 18px;
516) }
517) 	.go:hover { background: #6ab334; }
518) 
519) 	
520) /* FOOTER ------------*/
521) 
522) #footer {

523) 	/* width: 960px; original */
524) 	width: 1024px;

525) 	height: 200px;
526) 	border-top: 1px solid #ddd;
527) 	padding: 20px 0;
528) 	margin: 20px 0 0;
529) }
530) 
531) 	.onion {
532) 		float: left;

533) 		/* width: 78px; original */
534) 		width: 88px;

535) 		padding-right: 20px;
536) 		height: 100%;
537) 	}
538) 
539) 	#footer .about {
540) 		width: 180px;
541) 		padding-right: 30px;
542) 		border-right: 1px solid #ddd;
543) 		float: left;
544) 	}
545) 	
546) 	#footer .newsletter {
547) 		padding: 0 0 15px 30px;
548) 		width: auto;
549) 		margin-left: 308px;
550) 	}
551) 	
552) 		#footer input.textfield {
553) 			width: 220px;
554) 			height: 26px;
555) 		}
556) 		
557) 		#footer input {
558) 			margin: 0;
559) 		}
560) 	
561) 	#footer .col {
562) 		float: left;
563) 		width: 100px;
564) 		margin-left: 20px;
565) 	}
566) 	
567) 		#footer .first { margin-left: 30px; }
568) 		#footer .wider { width: 201px; }

569) 
570) 
571) /* DONATION ADDITIONS ----------- */
572) 
573) small {
574) 	margin: 0px auto 0px auto;
575) 	text-align: center;
576) 	font-size: 10px;
577) 	font-style: italic;
578) 	}
579) 
580) .hlist {
581) 	text-align: center;
582) 	display: block;
583) 	width: 100%;
584) 	padding: 0px 0px;
585) 	list-style: none;
586) 	margin: 0px 0px 18px 0px;
587) 	}
588) 
589) 	.hlist li {
590) 		display: inline-block;
591) 		border-right: 1px solid #444444;
592) 		margin-left: -4px;
593) 		}
594) 	
595) 	.hlist li.last {
596) 		border-right: 0px solid #444444;
597) 		}
598) 
599) 	.hlist a {
600) 		display: block;
601) 		top: 0px;
602) 		right: 0px;
603) 		bottom: 0px;
604) 		left: 0px;
605) 		text-decoration: none;
606) 		font-weight: bold;
607) 		padding: 0px 8px;
608) 		}
609)  
610) .dbox {
611) 	float: none;
612) 	text-align: center;
613) 	color: #222222;
614) 	border: 2px solid #cbcbaf;
615)    background-color: #ffffed;
616) 	padding: 20px 20px;
617) 	width: 163px;
618) 	margin: 0px 0px 0px 10px;
619)    -webkit-border-radius: 5px;
620)    -moz-border-radius: 5px;
621)    border-radius: 5px;
622) 	}
623) 
624) 	.dbox p {
625) 		display: block;
626) 		padding: 0px 0px 0px 0px;
627) 		margin: 0px 0px 0px 0px;
628) 		}
629) 
630) 	.dbox h2 {
631) 		background: url() top left transparent;
632) 		color: #23300E;
633) 		padding:0px 0px 15px 0px;
634) 		}
635) 
636) 	.dbox input ,
637) 	.dbox select {
638) 	   background-color: #fefff7;
639) 	   color: #23300E;
640) 	   border:2px solid #CCCFB8;
641) 	   -webkit-border-radius: 5px;
642) 	   -moz-border-radius: 5px;
643) 	   border-radius: 5px;
644) 	   padding: 0px 0px 0px 5px;
645) 	   margin: 0px 0px 10px 0px;
646) 	   }
647) 
648) 		.dbox input:focus ,
649) 		.dbox select:focus {
650) 		   -moz-box-shadow: 0px 0px 4px #cbcbaf;
651) 		   -webkit-box-shadow: 0px 0px 4px #cbcbaf;
652)  		   box-shadow: 0px 0px 4px #cbcbaf;
653)  		   border:2px solid #cbcbaf;	
654) 		   background-color: #FFFFFF;
655) 			}
656) 
657) 	.dbox select.cur {
658) 		margin-right: 5px;
659) 		text-align: left;
660) 		}
661) 
662) 	.dbox input.amount {
663) 		width: 100px;
664) 		margin-right: 0px;
665) 		text-align: left;
666) 		}
667) 	
668) 	.dbox select#t3 {
669) 		width: 100%;
670) 		margin-bottom: 20px;
671) 		padding: 0px 0px;
672) 		}
673) 
674) 	.dbox input.donate-btn {
675) 		background: url(../images/btn_donateCC_LG.gif) left top no-repeat transparent;
676) 		height: 26px;
677) 		width: 122px;
678) 		margin-top: 0px;
679) 		display: block;
680) 	   background-color: transparent;
681) 	   color: transparent;
682) 	   border:0px solid transparent;
683) 	   -webkit-border-radius: 5px;
684) 	   -moz-border-radius: 5px;
685) 	   border-radius: 5px;
686) 	   margin: 10px auto 10px auto;
687) 	   padding: 0px 0px 0px 0px;
688) 		}
689) 
690) 	.dbox span {
691) 		float: left;
692) 		padding-right: 0px;
693) 		}
694) 	
695) 	.dbox div label {
696) 		padding: 0px 10px 0px 0px;
697) 		}
698) 
699) 	.dbox h6#ppinfo{
700) 		width: 100%;
701) 		text-align: center;
702) 		margin: -15px auto 0px auto;
703) 		}
704) 	
705) 	.dbox small,
706) 	.dbox.donate #ppinfo {
707) 		margin: 0px auto 0px auto;
708) 		text-align: center;
709) 		font-size: 10px;
710) 		font-style: italic;
711) 		}
712) 
713) .dbox.dl {
714) 	margin: -50px 0px 20px 20px;
715) 	float: right;
716)   	}
717) 			
718) .dbox.donate {
719) 	float: none;
720) 	padding: 30px 30px;
721) 	width: 626px;
722) 	min-height: 0px;
723) 	max-width: none;
724) 	text-align: left;
725) 	}
726) 
727) 	.dbox.donate input ,
728) 	.dbox.donate select {
729) 		padding-bottom: 0px;
730) 		margin-bottom: 0px;
731) 		}
732) 	
733) 	.dbox.donate .drow {
734) 		margin: 0px 0px 0px 20px;
735) 		}
736) 	
737) 	.dbox.donate .drow div {
738) 		padding: 0px 0 0 0px;
739) 		width: auto;
740) 		display: block;
741) 		}
742) 
743) 	.dbox.donate h3 {
744) 		padding-left: 0px;
745) 		color: #23300E;
746) 		margin: 0 0 10px 0;
747) 		}
748) 
749) 	.dbox.donate h4 {
750) 		padding-left: 20px;
751) 		}
752) 
753) 	.dbox.donate p {
754) 		padding: 5px 20px 15px 40px;
755) 		}
756) 	
757) 	.dbox.donate span {
758) 		float: left;
759) 		padding-right: 0px;
760) 		}
761) 	
762) 	.dbox.donate div label {
763) 		padding: 0px 10px 0px 0px;
764) 		}
765) 
766) 	.dbox.donate .type {
767) 		padding-left: 20px;
768) 		}
769) 
770) 	.dbox.donate select#t3 {
771) 		width: auto;
772) 		margin-bottom: 0px;
773) 		}
774) 
775) 	.dbox.donate ul.amounts {
776) 		width: auto;
777) 		}
778) 
779) 	.dbox.donate ul.amounts li {
780) 		display: inline-block;
781) 		margin-left: 20px;
782) 		}
783) 
784) 	.dbox.donate ul.amounts li label {
785) 		padding: 0px 0px 0px 5px;
786) 		}
787) 		
788) 	.dbox.donate input.donate-btn {
789) 		background: url(../images/btn_donateCC_LG.gif) left top no-repeat transparent;
790) 		height: 26px;
791) 		width: 115px;
792) 		margin-top: -3px;
793) 		display: inline-block;
794) 	   background-color: transparent;
795) 	   color: transparent;
796) 	   border:0px solid transparent;
797) 		}
798) 
799) .dbox.dsmall {
800) 	position: relative;
801) 	display: inline-block;
802) 	width: 170px;
803) 	height: 140px;
804) 	text-align: center;
805) 	margin: 0px 10px;
806) 	vertical-align: top;
807) 	}
808) 
809) 	.dbox.dsmall input.donate-btn {
810) 		background: url() left top no-repeat transparent;
811) 		width: auto;
812) 		height: auto;
813) 		margin-top: 0px;
814) 		display: block;
815) 	   background-color: transparent;
816) 	   color: transparent;
817) 	   border:0px solid transparent;
818) 		}

819) 	

820) 	.dbox.dsmall div label {
821) 		padding: 0px 0px 0px 0px;
822) 		}
823) 
824) 	.dbox.dsmall small {
825) 		display: block;
826) 		position: absolute;
827) 		width: 172px;
828) 		float: none;
829) 		bottom: 20px;
830) 		margin: 0px auto;
831) 		}
832) 	
833) 	.givv p {
834) 		text-align: justify;
835) 		margin-top: 10px;
836) 		font-size: 11px;
837) 		line-height: 13px;
838) 		}

839) /*
840) ** Markup free clearing
841) ** Details: http://www.positioniseverything.net/easyclearing.html
842) */
843) .clearfix:after {
844)   content: ".";
845)   display: block;
846)   height: 0;
847)   clear: both;
848)   visibility: hidden;
849) }
850) 
851) .clearfix {
852)   display: inline-block;
853) }
854) 
855) /* Hides from IE-mac \*/
856) * html .clearfix {
857)   height: 1%;
858) }
859) .clearfix {
860)   display: block;
861) }