2 ------------------- Tails custom style ---------------------------------------------
3 Some text sizing use ems with decimals to calculate round pixel numbers by
4 default, when the user does not resize the text.
5 See: http://www.alistapart.com/articles/howtosizetextincss/
17 - Get in Touch with Us
24 - Documentation Styling
31 @font-face { font-family: "Source Sans Pro Regular"; src: url
("lib/SourceSansPro-Regular.ttf"); }
36 font-family: "DejaVu Sans", "Verdana", sans-serif
;
38 background: url
(lib/strip.png);
43 /* Basic Typography */
44 /* This section implements the ideas of typographic scale and rythm as
45 * explained on http://lamb.cc/typograph/. */
47 /* Set the main font-size to 14px.
48 * Set the main line-height, λ to 21px.
49 * All this section is calculated so that each element measures in height a
50 * multiple of λ. This allows, for exemple, to keep parallel threads of text
51 * in a same vertical rythm. */
53 font-size: 87.5%; /* 16×87.5%=14px */
54 line-height: 1.5; /* 14×1.5=21px=λ */
57 /* The bottom margin of all elements is fixed to a multiple of λ so that they
58 * don't brake the rythm when they overlap. We set all top margin to 0. */
60 margin: 0 0 1.5em 0; /* 14×1.5=21px=λ */
64 font-family: "Source Sans Pro Regular", "DejaVu Sans", "Verdana", sans-serif
;
67 h1
, h2
, h3
, .sidebar
{
68 font-family: "Source Sans Pro Regular", "DejaVu Sans", "Verdana", sans-serif
;
72 /* The size h1, h2 and h3 follows a traditional scale of 1, 1.5 and 2.
73 Their line-height are adjusted to a multiple of λ. */
76 font-size: 2em; /* 14×2=28px */
77 line-height: 1.5em; /* 28×1.5=42px=2λ */
78 margin: 0.4em 0 0.35em 0; /* 28×0.75=21px=λ */
82 font-size: 1.5em; /* 14×1.5=21px */
83 line-height: 2em; /* 21×1=21px=λ */
84 margin: 0.5em 0 0.5em 0; /* 21×1=21px=λ */
88 font-size: 1.071em; /* 14×1.071=15px */
89 text-transform: uppercase
;
90 letter-spacing: 0.067em; /* 15×0.067=1px */
91 margin: 0.7em 0 0.7em 0; /* 15×1.4=21px=λ */
94 /* avoid super-long lines */
95 p
, ul
, ol
, h1
, h2
, h3
, h4
, h5
, h6
{
105 margin-bottom: 0.5em;
108 code
, kbd
, samp
, pre
, tt
, var
, p
.pre
, p
.code
{
109 font-family: "Courier", monospace
;
122 border: solid
1px #AAAAAA;
125 tbody th
, tbody td
, tfoot th
, tfoot td
{
126 border-top: solid
1px #AAAAAA;
129 img
.img
{ /* overwrite style.css */
133 img
.margin
{ /* overwrite style.css */
134 margin: 2em 4em 2em 0em;
139 input
[type
="text"], input
[type
="password"], input
[type
="select"],
140 input
[type
="search"], #editcontent
{
163 padding: 0 2em 2em 2em;
166 border :0px solid black
;
167 -moz-box-shadow: 3px 3px 5px rgba
(5, 5, 5, 0.2);
168 -webkit-box-shadow: 3px 3px 5px rgba
(5, 5, 5, 0.2);
169 box-shadow: 3px 3px 5px rgba
(5, 5, 5, 0.2);
171 background: rgba
(255, 255, 255, 1.00);
174 .pageheader .actions ul {
179 .pageheader .actions li {
191 .pageheader .actions {
197 font-size: 1em; /* override style.css */
202 background: #56347c url
(lib/banner.png) no-repeat
;
203 -moz-box-shadow: 3px 3px 5px rgba
(5, 5, 5, 0.2);
204 -webkit-box-shadow: 3px 3px 5px rgba
(5, 5, 5, 0.2);
205 box-shadow: 3px 3px 5px rgba
(5, 5, 5, 0.2);
210 border: 0px solid black
;
219 .banner .tails span {
224 font-size: 2.5em; /* 14×2.5=35px */
225 line-height: 1.2; /* 35×1.2=42px=2λ */
228 margin: 1.5em 0 0.6em 0; /* 35x0.6=21px=λ */
230 border-left: 10px solid
#444444;
236 font-size: 1.231em; /* 13×1.231=16px */
237 margin-top: 0.625em; /* 16×0.625=10px */
241 height: 1em; /* always take up 1em even if empty */
245 #homepage #news
, #homepage #security
,
246 #page-found_a_problem #bugs
, #page-found_a_problem #wishlist
,
247 #page-download #bittorrent
, #page-download #http
{
248 display: inline-block
;
253 #page-download #bittorrent
, #page-download #http
{
258 #page-found_a_problem #bugs
,
267 font-family: "Source Sans Pro Regular", "DejaVu Sans", "Verdana", sans-serif
;
277 .sidebar .button a, .sidebar .button .selflink, .sidebar .links {
281 -moz-box-shadow: 1px 1px 5px rgba
(5, 5, 5, 0.2);
282 -webkit-box-shadow: 1px 1px 5px rgba
(5, 5, 5, 0.2);
283 box-shadow: 1px 1px 5px rgba
(5, 5, 5, 0.2);
284 -moz-border-radius: 0.5em;
285 -webkit-border-radius: 0.5em;
286 border-radius: 0.5em;
287 -moz-box-sizing: border-box
;
288 -o-box-sizing: border-box
;
289 -webkit-box-sizing: border-box
;
290 box-sizing: border-box
;
293 .sidebar .button a, .sidebar .button .selflink {
294 text-decoration: none
;
300 background-color: #0a0;
303 .sidebar .button a:hover, .sidebar .button .selflink {
304 background-color: #56347c;
307 .sidebar .download a {
308 background: #0a0 url
('lib/download-arrow.png') no-repeat scroll right
30%;
311 .sidebar .download a span, .sidebar .download span.selflink span {
316 .sidebar .download .download {
317 font-size: 1.571em; /* 14×1.571=22px */
320 .sidebar .download .tails {
321 font-size: 2.286em; /* 14×2.286=32px */
325 .sidebar .download .date {
326 font-size: 1.143em; /* 14×1.143=16px */
331 border:1px solid
#DDDDDD;
335 .sidebar .links .selflink {
336 border-left: 2px solid black
;
347 .sidebar .links li a, .sidebar .links li .selflink {
348 font-size: 1.429em; /* 14×1.429=20px */
350 padding: 0.25em 0.7em; /* 5px 14px */
351 border-top: 1px #ddd solid
;
352 text-decoration: none
;
353 letter-spacing: 0.05em;
356 .sidebar .links li a:hover {
358 border-left: 2px solid
#0a0;
359 padding: 0.25em 0.7em; /* 5px 14px */
360 padding-left: 0.6em; /* 20×0.6=12px=padding-border */
363 .sidebar .links li:first-child a {
367 .sidebar .links li:first-child a:hover {
368 border-left: 2px solid
#0a0;
371 .sidebar .links li:first-child .selflink {
372 border-left: 2px solid black
;
378 .sidebar .donate a, .sidebar .donate .selflink {
379 background: #0a0 url
('lib/donate.png') no-repeat scroll
10px 50%;
380 font-size: 1.857em; /* 14×1.857=26px */
389 text-decoration: none
;
397 #news h1
, #security h1
, #doc h1
, #found_a_problem h1
, #talk h1
, #bugs h1
, #wishlist h1
, #design h1
, #other h1
, #tools h1
{
400 background-color:none
;
403 border-radius: 0.2em;
414 background-color: #eee;
415 border: thin solid
#ccc;
417 margin: 1.5em 1em 1.5em 1.5em;
418 padding: 0.25em 0.5em;
425 .inlinepage .inlineheader .header {
487 .forum-post-numcomments, .forum-post-updated, .forum-post-published {
491 .forum-post-title, .forum-post-numcomments, .forum-post-updated {
492 border-right: 1px solid
#AAAAAA;
495 .forum-posts td, .forum-posts td:first-child, .forum-posts td:last-child {
505 #pagebody .blogform
> a
.feedbutton
{
509 .blogform > input[name="title"] {
513 .blogform > input[type="submit"] {
524 list-style-type: decimal
;
528 background: url
(lib/loupe.png) no-repeat
;
529 background-color: white
;
530 background-position: 97% 50%;
532 padding: 3px 16px 3px 3px;
533 -moz-border-radius: 0.5em;
534 -webkit-border-radius: 0.5em;
535 border-radius: 0.5em;
536 border: 2px solid
#bbb;
545 border-top:thin solid dimgray
;
546 border-left:thin solid dimgray
;
547 border-bottom:thin dotted darkgrey
;
548 border-right:thin dotted darkgrey
;
557 /* a[href*="/recentchanges/"]
567 border-bottom: 1px solid
#0a0;
570 text-decoration: none
;
573 /* test inside and outside links */
574 #pagebody a
[href^
="http"] {
576 background: url
(lib/link_out.gif) no-repeat right bottom
;
579 #pagebody a
[href^
="http://localhost"],
580 #pagebody a
[href^
="http://tails.boum.org"],
581 #pagebody a
[href^
="https://tails.boum.org"],
582 #pagebody a
[href^
="http://dl.amnesia.boum.org"] {
583 background-image: none
;
587 #pagebody span
.definition a
{
593 #pagebody span
.definition
a:hover
{
597 #pagebody span
.definition
a:after
{
626 #comments .actions
> ul
{
634 /* Get in Touch with Us */
637 display: inline-block
;
644 #homepage div
.three-blocks
{
648 div
.three-blocks p
, div
.three-blocks ul
, div
.three-blocks form
{
652 div
.three-blocks img
{
653 text-decoration: none
;
661 display: inline-block
;
666 .bullet-number-one
, .bullet-number-two
, .bullet-number-three
,
667 .bullet-number-four
, .bullet-number-five
, .bullet-number-six
,
668 .bullet-number-seven, .bullet-number-eight, .bullet-number-nine {
676 .bullet-number-one { background: url
('lib/bullet/1.png') no-repeat top left
; }
677 .bullet-number-two { background: url
('lib/bullet/2.png') no-repeat top left
; }
678 .bullet-number-three { background: url
('lib/bullet/3.png') no-repeat top left
; }
679 .bullet-number-four { background: url
('lib/bullet/4.png') no-repeat top left
; }
680 .bullet-number-five { background: url
('lib/bullet/5.png') no-repeat top left
; }
681 .bullet-number-six { background: url
('lib/bullet/6.png') no-repeat top left
; }
682 .bullet-number-seven { background: url
('lib/bullet/7.png') no-repeat top left
; }
683 .bullet-number-eight { background: url
('lib/bullet/8.png') no-repeat top left
; }
684 .bullet-number-nine { background: url
('lib/bullet/9.png') no-repeat top left
; }
685 .bullet-number-zero { background: url
('lib/bullet/0.png') no-repeat top left
; }
687 /* Download Buttons */
689 #pagebody a
.download-file
,
690 #pagebody a
.download-signature
,
691 #pagebody a
.download-key
{
693 font-family: "Source Sans Pro Regular", "DejaVu Sans", "Verdana", sans-serif
;
695 -moz-box-shadow: 1px 1px 5px rgba
(5, 5, 5, 0.2);
696 -webkit-box-shadow: 1px 1px 5px rgba
(5, 5, 5, 0.2);
697 box-shadow: 1px 1px 5px rgba
(5, 5, 5, 0.2);
698 -moz-border-radius: 0.5em;
699 -webkit-border-radius: 0.5em;
700 border-radius: 0.5em;
701 text-decoration: none
;
703 padding: 0.5em 64px 0.5em 18px;
707 #pagebody a
.download-file
{
708 background: #0a0 url
('lib/download-arrow.png') no-repeat scroll right center
;
711 #pagebody a
.download-signature
{
712 background: #0a0 url
('lib/download-signature.png') no-repeat scroll right center
;
715 #pagebody a
.download-key
{
716 background: #0a0 url
('lib/download-key.png') no-repeat scroll right center
;
719 #pagebody p
.checksum
{
720 word-wrap: break-word
;
726 #pagebody div
.toggleable
{
729 border-top: solid
5px black
;
730 border-bottom: solid
5px black
;
734 padding-bottom: 63px;
737 #pagebody div
.toggleable span
.hide a
.toggle
{
743 background: url
('lib/close.png') no-repeat
15px 0px;
747 /* Hide revert button on recentchanges */
754 .pageheader .actions {
759 background:url
(lib
/tools-20
.jpg
) right no-repeat
;
764 .pageheader .actions ul {
766 /* reduce the extra vertical space between title and body
767 margin-bottom: 1.385em; 13×1.385=18px
768 margin-top: -0.538em; 13×1.538=20px */
774 .pageheader .actions li {
782 .pageheader .actions li a {
784 text-decoration:none
;
787 .pageheader .actions:hover {
790 .pageheader .actions:hover ul {
801 .pageheader .actions:hover ul li {
803 -moz-transition: all
0.3s ease-out
;
804 -webkit-transition: all
0.3s ease-out
;
805 -o-transition: all
0.3s ease-out
;
806 transition: all
0.3s ease-out
;
807 border-bottom:2px solid white
;
810 .pageheader .actions:hover ul li:hover {
811 border-bottom:2px solid
#451E6F;
812 text-decoration:none
;
817 .pageheader .actions:hover ul li:hover a {
818 -moz-transition: all
0,5s ease-out
;
819 -webkit-transition: all
0,5s ease-out
;
820 -o-transition: all
0,5s ease-out
;
821 transition: all
0,5s ease-out
;
829 border-left:2px solid green
;
830 -moz-transition:all
0.1s ease-out
;
836 blockquote
> p:hover
{
840 #crumbs ul
, #crumbs li
{
841 list-style-type:none
;
851 border-bottom:1px solid
#DEDEDE;
868 #crumbs li:first-child img
{
874 background:url
(lib/crumbs.gif) no-repeat right center
;
880 #crumbs li
a:visited
{
882 text-decoration:none
;
891 /* Language Toolbar */
893 .pageheader #otherlanguages {
903 .pageheader #otherlanguages ul {
905 /* reduce the extra vertical space between title and body
906 margin-bottom: 1.385em; 13×1.385=18px
907 margin-top: -0.538em; 13×1.538=20px */
916 .pageheader #otherlanguages li {
924 .pageheader #otherlanguages li a {
926 text-decoration:none
;
931 .pageheader #otherlanguages ul li {
933 text-decoration:none
;
935 -moz-transition: all
0.3s ease-out
;
936 -webkit-transition: all
0.3s ease-out
;
937 -o-transition: all
0.3s ease-out
;
938 transition: all
0.3s ease-out
;
939 border-bottom:2px solid white
;
944 .pageheader #otherlanguages ul li span {
947 .pageheader #otherlanguages ul li:hover, .pageheader #otherlanguages ul li.current{
948 border-bottom:2px solid green
;
949 text-decoration:none
;
954 .pageheader #otherlanguages ul li.master, .pageheader #otherlanguages ul li:hover.master {
959 .pageheader #otherlanguages ul li:hover a {
960 -moz-transition: all
0,5s ease-out
;
961 -webkit-transition: all
0,5s ease-out
;
962 -o-transition: all
0,5s ease-out
;
963 transition: all
0,5s ease-out
;
967 .current > .visible {
968 text-transform: none
!important
;
972 /* visible and hidden */
974 .pageheader #otherlanguages ul li span.visible {
976 text-transform:uppercase
;
979 .pageheader #otherlanguages ul li span.hidden {
983 .pageheader #otherlanguages ul li:hover span.visible {
987 .pageheader #otherlanguages ul li:hover span.hidden {
994 margin-bottom: 1.5em;
999 display: inline-block
;
1005 display: inline-block
;
1006 vertical-align: top
;
1015 /* Documentation Styling */
1017 span
.application
{ font-style: italic
; }
1018 span
.button
{ font-weight: bold
; }
1020 font-family: "Courier";
1021 font-size: 1.143em; /* 14×1.143=16px */
1024 font-family: "Courier";
1025 font-size: 1.143em; /* 14×1.143=16px */
1026 border: 1px solid
#E0E0DF;
1027 padding-left: 0.2em;
1028 padding-right: 0.2em;
1030 span
.emphasis
{ font-style: italic
; }
1031 span
.filename
{ font-style: italic
; display: inline-block
; }
1032 span
.guilabel
{ font-weight: bold
; }
1033 span
.guimenu
{ font-weight: bold
; }
1034 span
.guisubmenu
{ font-weight: bold
; }
1035 span
.guimenuitem
{ font-weight: bold
; }
1036 span
.keycap
{ font-weight: bold
; }
1037 span
.menuchoice
{ font-weight: bold
; }
1038 span
.replaceable
{ font-style: italic
; }
1039 div
.bug
, div
.caution
, div
.next
, div
.note
, div
.tip
{
1040 background-color: #FFFFF0;
1041 border: 1px solid
#E0E0DF;
1043 background-position: 6px 0.5em;
1044 background-repeat: no-repeat
;
1047 margin: 0 0 1.5em 0;
1050 div
.bug
p:only-child
, div
.caution
p:only-child
, div
.next
p:only-child
, div
.note
p:only-child
, div
.tip
p:only-child
{
1051 display: table-cell
;
1053 vertical-align: bottom
;
1055 div
.bug
p:last-child
, div
.caution
p:last-child
, div
.next
p:last-child
, div
.note
p:last-child
, div
.tip
p:last-child
{
1059 background-image: url
(lib
/admon-bug
.png
);
1062 background-image: url
(lib
/admon-caution
.png
);
1065 background-image: url
(lib
/go-next
.png
);
1068 background-image: url
(lib
/admon-note
.png
);
1071 background-image: url
(lib
/admon-tip
.png
);
1078 border: solid
1px #bbb;
1079 margin-bottom: 1.5em;
1082 div
.pageheader div
.trail
{
1086 div
.trail span
.trailup
{
1090 div
.trail span
.trailarrow
{
1094 div
.trail span
.trailprev
, div
.trail span
.trailnext
{
1099 div
.trail span
.trailprev
{
1103 div
.trail span
.trailprev a
{
1107 div
.trail span
.trailnext
{
1111 div
.trail span
.trailnext a
{
1112 margin-right: 0.5em;
1117 /* doc/get/trusting_tails_signing_key */
1123 /* "Are you using Tor?" link on /news */
1130 #tor_check a
[href
="https://check.torproject.org/"] {
1136 -moz-box-shadow: 1px 1px 5px rgba
(5, 5, 5, 0.2);
1137 -webkit-box-shadow: 1px 1px 5px rgba
(5, 5, 5, 0.2);
1138 box-shadow: 1px 1px 5px rgba
(5, 5, 5, 0.2);
1139 -moz-border-radius: 0.5em;
1140 -webkit-border-radius: 0.5em;
1141 border-radius: 0.5em;
1155 font-family: "Century Gothic", "Avant Garde", Avenir
, TeXGyreAdventorRegular
, "Heiti SC", "Heiti TC", AppleGothic
, sans-serif
;
1156 font-weight: normal
;
1163 /* Contribute section */
1169 div
.contribute-roles-1
{
1170 display: inline-block
;
1175 div
.contribute-roles-3 div
.contribute-role
{
1179 div
.contribute-role
{
1180 display: inline-block
;
1182 vertical-align: top
;
1185 div
.contribute-role p
{
1189 div
.contribute-role img
{
1191 margin: 0 auto
0.5em;