d13bd3a1212716cc1b4a5232badeea7d9978df88
[web.git] / style.css
1 @charset "utf-8";
2
3 /* General Fonts */
4 html, body, div, p {
5     font-family: DejaVu Sans, Verdana, Arial, sans-serif;
6     font-size: 12pt;
7 }
8 /* Header Size & Spacing */
9 h1 {
10     margin-top: 0.1em;
11     font-size: 200%;
12     margin-bottom: 0.4em;
13 }
14 h2 {
15     margin-top: 0.5em;
16     font-size: 150%;
17     margin-bottom: 0.2em;
18 }
19 h3 {
20     margin-top: 0.5em;
21     font-size: 135%;
22     margin-bottom: 0.1em;
23 }
24 h4 {
25     margin-top: 0.5em;
26     font-size: 120%;
27     margin-bottom: 0.0em;
28 }
29
30 /* Layout and Color stuff */
31 /* General page structure */
32 body {
33     padding: 0.8em;
34     margin: 0;
35     color:#DDD;
36     background-color:#505050;
37 }
38 #frame {
39     margin: 0 auto;
40     max-width: calc(50em + 2*11em); /* content width plus 2*navi width */
41 }
42
43 /* The inner box */
44 #title, #content {
45     border: solid #121212 1px;
46     background-color: #252525;
47     margin: 0 11.0em; /* navi width */
48     padding: 0;
49 }
50 #title {
51     border-bottom: none;
52     border-radius: 10px 10px 0px 0px;
53 }
54 #title h1 {
55     border-bottom: solid #08f 2px;
56     text-align: center;
57     padding: 0 0.7em;
58     margin-bottom: 0;
59 }
60 #content {
61     border-top: none;
62     border-radius: 0px 0px 10px 10px;
63     display: block;
64     padding: 0.7em;
65     padding-top: 1px; /* If we use 0 here, things get ugly. What?!? */
66 }
67
68 /* Navigation menu */
69 #navi {
70     /* No border, no padding, so all the width computations become easy. */
71     float: left;
72     background-color:#505050;
73     width: 11.0em; /* navi width */
74     padding: 0;
75     margin: 0;
76 }
77 #navi ul {
78     margin: 0px;
79     padding: 0px;
80     list-style-type: none;
81 }
82 #navi ul ul {
83     /* Indentation for nested nodes */
84     margin-left: 1.2em;
85 }
86 #navi li {
87     /* Border around the links */
88     margin-bottom:0.1em;
89     background-color: #252525;
90     border-left: solid #36ff00 2px;
91     border-right: solid #36ff00 2px;
92     border-top-left-radius: 10px;
93     border-bottom-left-radius: 10px;
94 }
95 #navi li a {
96     display: block;
97     width: 100%;
98     
99     color: #9ed2ff;
100     font-size:110%;
101     text-decoration: none;
102     text-align: center;
103 }
104 #navi li.current
105 {
106     border-color: #ffa700;
107 }
108 #navi li:hover {
109     border-color: #08f;
110     border-radius: 0;
111 }
112 #navi li:hover a {
113     color: #DDD;
114 }
115
116 /* Small screens */
117 @media screen and (max-width:60em) {
118     #frame, #title, #content, #navi {
119         margin: 0;
120         width: auto;
121         max-width: none;
122         clear: both;
123     }
124     #navi {
125         /* Place navi above the title */
126         float: none;
127         border: solid #121212 1px;
128         border-bottom: none;
129         background-color: #252525;
130         padding: 0;
131     }
132     #navi ul, #navi ul ul, #navi li, #navi li a {
133         margin: 0;
134         padding: 0;
135         display: inline;
136     }
137     #navi > ul {
138         padding: 0.3em;
139         display: block;
140         border-bottom: solid #36ff00 2px;
141     }
142     /* Display only parent and children, and deocare them appropriately */
143     #navi li {
144         display:inline-block;
145         margin: 0 0.2em;
146     }
147     #navi li.sibling {
148         display:none;
149     }
150     #navi li.parent:before, #navi li.current:before {
151         content: "» ";
152     }
153     #navi li.child:before {
154         content: "» ";
155     }
156     #navi li.child + li:before {
157         content: "| ";
158     }
159     #navi li {
160         border: none;
161     }
162     #navi li.current a {
163         text-decoration: underline;
164     }
165 }
166
167 /* Printing */
168 @media print {
169     #frame, #title, #content {
170         margin: 0;
171         padding: 0;
172         width: auto;
173         max-width: none;
174         border: none;
175     }
176     #title h1 {
177         border: none;
178     }
179     #navi {
180         display: none;
181     }
182 }
183
184 /* RST styling */
185 article.rst dt {
186     font-weight: bold;
187 }
188 article.rst dd {
189     margin-bottom: 1em;
190 }
191 article.rst a.rst-footnote {
192     vertical-align: super;
193 }
194 article.rst div.rst-footnote {
195     display: table;
196 }
197 article.rst div.rst-footnote > * {
198     display: table-cell;
199 }
200 article.rst div.rst-footnote a {
201     min-width: 3em;
202 }
203 article.rst .rst-literal, article.rst pre {
204     font-family: monospace;
205     font-size: 82%;
206 }
207 article.rst .rst-literal {
208     padding: 0.1em 0.2em;
209     background-color: #505050;
210 }
211 article.rst pre {
212     padding: 0.6em;
213     background-color: #505050;
214 }
215
216 /* Content styling */
217 #content p {
218     margin: 0.5em 0;
219     line-height: 1.3;
220 }
221 #content a {
222     color:#9ed2ff;
223 }
224 #content a:visited {
225     color:#bfe1ff;
226 }
227 #content a:hover {
228     color:#5089ba;
229 }