b5ca818835aaefadc68eae3a242c5a07f98efe3e
[software/elephly-net.git] / css / screen.css
1 html, body {
2 font-family: "droid serif", Georgia, Gentium, Palatino, Goudy, "Book Antiqua", "Palatino Linotype", "Linux Libertine", "Times New Roman", serif;
3 font-size: 100%;
4 line-height: 1.3em;
5 color: #333;
6 background: #eeede5; }
7
8 body {
9 margin: 0 auto; }
10 body .elephly {
11 background: #bdc0ac; }
12
13 #page ul {
14 list-style: square outside;
15 margin-top: 1em;
16 margin-bottom: 1em; }
17
18 div.time {
19 color: #9ba0a7;
20 margin-top: -0.6em;
21 margin-bottom: 0.6em;
22 font-size: 0.9em;
23 font-weight: normal; }
24
25 img#logo {
26 border-radius: 1em;
27 width: 100%;
28 margin-bottom: 0.5em; }
29
30 div#navigation {
31 position: fixed;
32 top: 0;
33 padding: 0.5em;
34 height: 100%;
35 width: 8em;
36 background: #fff;
37 border-left: 1px solid #cccccc;
38 border-right: 1px solid #cccccc;
39 font-family: "Droid Sans", Arial, sans-serif; }
40 div#navigation ul ul {
41 margin-left: 1em;
42 margin-bottom: 0.4em; }
43 div#navigation li {
44 width: 100%;
45 margin: 0; }
46 div#navigation li a {
47 padding: 4px;
48 display: block;
49 color: #389;
50 text-decoration: none;
51 border: none; }
52 div#navigation li a:visited {
53 color: #167; }
54 div#navigation li a:hover {
55 color: #fff;
56 background: #666; }
57
58 div.figure {
59 float: right;
60 text-align: center;
61 background: #fff;
62 box-shadow: 0 0 0.4em 0 #888;
63 padding: 1em;
64 margin: 0.5em -4em 0.5em 1em; }
65 div#page div.figure p.caption {
66 width: auto;
67 text-align: center;
68 font-size: 0.8em; }
69
70 h1 {
71 color: #000;
72 margin-bottom: .2em;
73 line-height: 1.5em;
74 display: block;
75 font-size: 1.9em;
76 font-weight: 300;
77 font-family: Georgia; }
78
79 h1:first-child {
80 margin-top: 14px; }
81
82 * + h1, * + h2 {
83 margin-top: .5em; }
84
85 h2, h3 {
86 color: #333;
87 margin-bottom: 0.5em;
88 line-height: 1.05em;
89 clear: both;
90 letter-spacing: -0.04em;
91 font-size: 1.3em;
92 font-weight: 700;
93 font-family: "Droid Sans", Arial, sans-serif; }
94
95 h3 {
96 font-size: 1.2em; }
97
98 a {
99 color: #389;
100 text-decoration: none;
101 border-bottom: 1px dotted #eeede5; }
102 a:visited {
103 color: #167; }
104 a:hover {
105 background: #eeede5; }
106
107 strong {
108 font-weight: bold; }
109
110 div#page {
111 width: 590px;
112 overflow: visible;
113 padding-left: 2em;
114 margin-bottom: 100px;
115 margin-left: 9em; }
116 div#page ul {
117 width: 36em; }
118 div#page p {
119 margin-bottom: 0;
120 text-align: justify;
121 width: 36em;
122 font-size: 1em; }
123 div#page p img, div#page p video {
124 display: inline;
125 float: right;
126 margin-left: 0.8em;
127 -moz-border-radius: 15px;
128 border-radius: 15px; }
129 div#page p.back {
130 margin-top: 1.5em;
131 width: 20%; }
132 div#page blockquote {
133 margin-left: 3em;
134 margin-top: 1em;
135 margin-bottom: 1em;
136 font-size: 0.9em;
137 font-style: italic; }
138 div#page blockquote p {
139 width: 80%; }
140 div#page img.full {
141 margin-top: 0.5em;
142 margin-bottom: 1em;
143 margin-left: 0;
144 margin-right: 0;
145 position: static;
146 float: none;
147 clear: both;
148 padding: 0;
149 display: block;
150 -moz-border-radius: 15px;
151 border-radius: 15px; }
152 div#page img.stretch {
153 width: 100%; }
154 div#page div.fineprint {
155 font-size: .7em;
156 text-indent: 0;
157 line-height: 1em;
158 margin-top: 1em;
159 padding-top: 1em;
160 border-top: 1px dotted #aaaaaa;
161 width: 100%;
162 color: #666;
163 clear: both;
164 display: block; }
165 div#page div.fineprint license {
166 display: block;
167 clear: both; }
168 div#page div.fineprint img {
169 display: block;
170 float: left;
171 margin-right: .5em; }
172
173 p + p, div.figure + p {
174 text-indent: .5em;
175 margin-top: 0.2em; }
176
177 img.flickr {
178 position: relative;
179 display: block;
180 margin: 0 auto;
181 width: 100%; }
182
183 img.undecorated {
184 margin: 0;
185 padding: 0; }
186
187 img.headline {
188 margin: 0;
189 margin-right: 1em;
190 padding: 0;
191 vertical-align: text-bottom; }
192
193 div#columns {
194 margin-bottom: 1em; }
195 div#columns ul {
196 list-style: none outside none;
197 margin: 0;
198 float: left;
199 width: 32%; }
200
201 span.code {
202 font-family: "Envy Code R", "Inconsolata", "Consolas", "Courier New", monospace;
203 font-size: 0.85em;
204 color: #111;
205 background: #dedede;
206 border-bottom: #888;
207 padding: .15em; }
208
209 br {
210 clear: left; }
211
212 em {
213 font-style: italic; }
214
215 .item + .item {
216 margin-top: 1em; }
217
218 ul.list {
219 list-style-type: square; }
220 ul.list li {
221 margin-bottom: .4em; }
222 ul.list li .description {
223 font-size: .8em; }
224
225 table {
226 font-size: .8em;
227 line-height: 1em;
228 border-collapse: collapse;
229 margin-bottom: 1em;
230 clear: both; }
231 table th {
232 color: #999;
233 font-weight: 400;
234 padding-right: 1em;
235 border-right: 1px solid #ffaa00;
236 text-align: right; }
237 table td {
238 color: #777;
239 margin: 0;
240 padding: 0;
241 padding-left: 1em;
242 text-align: left; }
243
244 div.download {
245 float: left;
246 width: 35%;
247 margin-right: 10%;
248 margin-bottom: 1.5em; }
249 div.download a {
250 display: block;
251 width: 100%;
252 text-align: center;
253 padding: 0.5em 0;
254 font-family: sans-serif;
255 background: #fff;
256 color: #888;
257 border-radius: 2em;
258 -moz-border-radius: 2em; }
259 div.download a:hover {
260 background: #888;
261 color: #fff; }
262
263 h1.year {
264 border-bottom: 4px solid #eeede5;
265 width: 50%; }
266
267 h2.month {
268 font-weight: normal; }
269
270 ul.archive {
271 margin-left: 1em; }
272
273 /* DISQUS */
274 h1.disqus {
275 margin-top: 1em;
276 float: left; }
277
278 div#disqus_thread {
279 border-top: 5px solid #999999;
280 padding: 0 1em 1em;
281 background: #eeede5;
282 margin-top: 1em;
283 -moz-border-radius: 0 0 15px 15px;
284 border-radius: 0 0 15px 15px;
285 font-size: 14px; }
286 div#disqus_thread ul {
287 width: auto; }
288 div#disqus_thread #dsq-global-toolbar {
289 margin: 0.5em 0; }
290 div#disqus_thread #dsq-reply {
291 margin-top: 0.5em; }
292 div#disqus_thread h3 {
293 clear: none; }
294
295 #mobilemenu {
296 display: none; }