Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
9 lars 1 
/*blue #0078c9
2 
orange #ff5e3c		*/
3 
 
4 
@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
5 
 
6 
@font-face {
7 
	font-family: 'icomoon';
8 
	src:url('../images/icons/icomoon.eot');
9 
	src:url('../images/icons/icomoond41d.eot?#iefix') format('embedded-opentype'),
10 
		url('../images/icons/icomoon.svg#icomoon') format('svg'),
11 
		url('../images/icons/icomoon.woff') format('woff'),
12 
		url('../images/icons/icomoon.ttf') format('truetype');
13 
	font-weight: normal;
14 
	font-style: normal;
15 
}
16 
 
17 
::selection {
18 
	background: #0078c9;
19 
	color: #fff;
20 
}
21 
::-moz-selection {
22 
	background: #0078c9;
23 
	color: #fff;
24 
}
25 
 
26 
body {
27 
	color: #5d6365;
28 
	font-size: 1em;
29 
	line-height: 1.6em;
30 
	font-family: 'Open Sans', sans-serif;
31 
	font-weight: 300;
32 
	background: #5d6365;
33 
}
34 
 
35 
#background {
36 
	position: absolute;
37 
	top: 0;
38 
	left: 0;
39 
	width: 100%;
40 
	height: 100%;
41 
	overflow: hidden;
42 
}
43 
#background img {
44 
	min-height: 100%;
45 
	min-width: 100%;
46 
}
47 
#background:before {
48 
	content: '';
49 
	display: block;
50 
	width: 100%;
51 
	height: 20%;
52 
	position: absolute;
53 
	bottom: 0;
54 
	background: -moz-linear-gradient(top,  rgba(93,99,101,0) 0%, rgba(93,99,101,1) 100%); /* FF3.6+ */
55 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(93,99,101,0)), color-stop(100%,rgba(93,99,101,1))); /* Chrome,Safari4+ */
56 
	background: -webkit-linear-gradient(top,  rgba(93,99,101,0) 0%,rgba(93,99,101,1) 100%); /* Chrome10+,Safari5.1+ */
57 
	background: -o-linear-gradient(top,  rgba(93,99,101,0) 0%,rgba(93,99,101,1) 100%); /* Opera 11.10+ */
58 
	background: -ms-linear-gradient(top,  rgba(93,99,101,0) 0%,rgba(93,99,101,1) 100%); /* IE10+ */
59 
	background: linear-gradient(to bottom,  rgba(93,99,101,0) 0%,rgba(93,99,101,1) 100%); /* W3C */
60 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005d6365', endColorstr='#5d6365',GradientType=0 ); /* IE6-9 */
61 
}
62 
 
63 
#wrapper {
64 
	width: 100%;
65 
	max-width: 1300px;
66 
	margin: 0 auto;
67 
	position: relative;
68 
	box-shadow: 0.6em 0px 15px rgba(0,0,0,0.1), -0.6em 0px 15px rgba(0,0,0,0.1);
69 
}
70 
 
71 
* {
72 
	-webkit-transition: all 300ms;
73 
	-moz-transition: all 300ms;
74 
	-o-transition: all 300ms;
75 
	-ms-transition: all 300ms;
76 
	transition: all 300ms;
77 
}
78 
 
79 
h1 {
80 
	font-weight: 300;
81 
	font-size: 1.4em;
82 
	line-height: 1.4em;
83 
	margin-bottom: 1.8em;
84 
}
85 
h2 {
86 
	color: #a9b1b3;
87 
	font-weight: 300;
88 
	font-size: 4em;
89 
	line-height: 1.4em;
90 
	margin-bottom: 0.5em;
91 
}
92 
h3 {
93 
	font-size: 2em;
94 
	line-height: 1.4em;
95 
	margin-bottom: 0.7em;
96 
	padding-top: 1em;
97 
}
98 
h4 {
99 
	font-size: 1.4em;
100 
	line-height: 1.4em;
101 
	font-weight: 400;
102 
	margin-bottom: 1em;
103 
}
104 
p {
105 
	margin-bottom: 1.5em;
106 
}
107 
 
108 
strong {
109 
	font-weight: 600;
110 
}
111 
 
112 
a {
113 
	text-decoration: none;
114 
	color: #0078c9;
115 
	font-weight: 600;
116 
}
117 
a:hover {
118 
	color: #a9b1b3;
119 
}
120 
a.alt {
121 
	color: rgba(255,255,255,0.75);
122 
}
123 
a.alt:hover {
124 
	color: rgba(255,255,255,1);
125 
}
126 
 
127 
a:before {
128 
	font-family: 'icomoon';
129 
	font-style: normal;
130 
	speak: none;
131 
	font-weight: normal;
132 
	line-height: 1;
133 
	-webkit-font-smoothing: antialiased;
134 
}
135 
 
136 
a.button {
137 
	display: inline-block;
138 
	padding: 0.8em 1em;
139 
	border: 3px solid #ff5e3c;
140 
	border-radius: 6px;
141 
	color: #ff5e3c;
142 
	background: #fff;
143 
	font-weight: 600;
144 
}
145 
a.button:hover {
146 
	background: #ff5e3c;
147 
	color: #fff;
148 
}
149 
a.button.alt {
150 
	color: #ff5e3c;
151 
	border: none;
152 
}
153 
a.button.alt:hover {
154 
	background: #ff5e3c;
155 
	color: #fff;
156 
	border: none;
157 
}
158 
a.button:active {
159 
	-webkit-transform: scale3d(0.95,0.95,1);
160 
	-moz-transform: scale3d(0.95,0.95,1);
161 
	-o-transform: scale3d(0.95,0.95,1);
162 
	-ms-transform: scale3d(0.95,0.95,1);
163 
	transform: scale3d(0.95,0.95,1);
164 
}
165 
 
166 
a.white {
167 
	color: #fff;
168 
	padding-bottom: 3px;
169 
	border-bottom: 1px solid rgba(255,255,255,0);
170 
}
171 
a.white:hover {
172 
	border-bottom: 1px solid rgba(255,255,255,1);
173 
}
174 
 
175 
.row {
176 
	overflow: hidden;
177 
}
178 
 
179 
header {
180 
	background: #fff;
181 
	max-width: 1300px;
182 
	box-shadow: 0px 3px 0px rgba(0,0,0,0.05);
183 
}
184 
header select {
185 
	display: none;
186 
}
187 
 
188 
section {
189 
	width: 100%;
190 
	margin: 0 auto;
191 
	overflow: hidden;
192 
	border-bottom: 2px dashed #e5eaeb;
193 
	padding: 6em;
194 
	background: #fff;
195 
	box-sizing: border-box;
196 
	-moz-box-sizing: border-box;
197 
}
198 
#talk {
199 
	border-bottom: none !important;
200 
}
201 
 
202 
footer {
203 
	width: 100%;
204 
	margin: 0 auto;
205 
	padding: 6em;
206 
	background: #0078c9;
207 
	color: #fff;
208 
	box-sizing: border-box;
209 
	-moz-box-sizing: border-box;
210 
	text-align: center;
211 
}
212 
 
213 
nav {
214 
	width: 100%;
215 
	max-width: 1300px;
216 
	box-sizing: border-box;
217 
	-moz-box-sizing: border-box;
218 
	background: #fff;
219 
	float: right;
220 
	z-index: 2;
221 
	text-align: right;
222 
}
223 
nav ul {
224 
	display: block;
225 
	width: auto;
226 
	float: right;
227 
}
228 
nav li {
229 
	display: inline-block;
230 
	margin: 0;
231 
	float: left;
232 
}
233 
nav a {
234 
	display: inline-block;
235 
	font-weight: 400;
236 
	color: #a9b1b3;
237 
	padding: 1.5em 0.75em;
238 
}
239 
nav a:hover {
240 
	background: #0078c9;
241 
	color: #fff;
242 
}
243 
 
244 
#mobile-nav {
245 
	display: none;
246 
}
247 
 
248 
#social {
249 
	width: auto;
250 
	position: absolute;
251 
	left: 0;
252 
	top: 0;
253 
	z-index: 3;
254 
}
255 
#social div {
256 
	float: left;
257 
	width: 90px;
258 
	padding: 1.5em 2em;
259 
}
260 
#tweet {
261 
	margin-top: 2px;
262 
}
263 
div#github {
264 
	position: relative;
265 
	bottom: 4px;
266 
	margin-left: 0px;
267 
	padding-top: 2em;
268 
	width: 90px;
269 
}
270 
#github a {
271 
	-webkit-transition: none;
272 
	-moz-transition: none;
273 
	-o-transition: none;
274 
	-ms-transition: none;
275 
	transition: none;
276 
}
277 
 
278 
pre {
279 
	box-sizing: border-box;
280 
	-moz-box-sizing: border-box;
281 
	padding: 3em;
282 
	background: #e6eff1;
283 
	box-shadow: 0px 0px 20px rgba(0,0,0,0.0);
284 
	margin-bottom: 4em;
285 
	white-space: pre-wrap;
286 
}
287 
pre:hover {
288 
	background: #fff;
289 
	box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
290 
}
291 
pre:last-child {
292 
	margin-bottom: 0;
293 
}
294 
 
295 
 
296 
/*
297 
-------------------------------------
298 
Welcome
299 
-------------------------------------
300 
*/
301 
 
302 
#welcome {
303 
	text-align: center;
304 
	padding: 12em 0 9em;
305 
	color: #fff;
306 
	width: 100%;
307 
	border-bottom: none;
308 
	background: rgba(0,0,0,0.3);
309 
}
310 
 
311 
#welcome h1 {
312 
	display: block;
313 
	max-width: 635px;
314 
	margin-left: auto;
315 
	margin-right: auto;
316 
}
317 
 
318 
#tooltipster {
319 
	width: 100%;
320 
	max-width: 258px;
321 
	margin-bottom: 2em;
322 
}
323 
 
324 
#browser-support {
325 
	margin-bottom: 2.8em;
326 
}
327 
#browser-support li {
328 
	display: inline-block;
329 
	margin: 0.25em;
330 
	font-size: 0;
331 
	line-height: 0;
332 
}
333 
#browser-support li img {
334 
	height: 42px;
335 
	opacity: 0.5;
336 
}
337 
#browser-support li img:hover {
338 
	opacity: 1;
339 
}
340 
 
341 
#download {
342 
	font-size: 1.2em;
343 
	line-height: 1.4em;
344 
	width: 100%;
345 
}
346 
#download a.button {
347 
	margin-right: 0.6em;
348 
}
349 
#download a.button:before {
350 
	content: "\64";
351 
	padding-right: 1em;
352 
	font-size: 0.9em;
353 
}
354 
 
355 
 
356 
/*
357 
-------------------------------------
358 
Demos
359 
-------------------------------------
360 
*/
361 
 
362 
#demos ul {
363 
	display: block;
364 
	width: 100%;
365 
	font-size: 1.4em;
366 
	line-height: 1.4em;
367 
}
368 
#demos li {
369 
	display: block;
370 
	width: 50%;
371 
	font-weight: 400;
372 
	margin-bottom: 1em;
373 
	overflow: hidden;
374 
	padding-top: 1.4em;
375 
	padding-right: 2em;
376 
	box-sizing: border-box;
377 
	-moz-box-sizing: border-box;
378 
	float: left;
379 
}
380 
#demos span {
381 
	display: block;
382 
	border: 3px solid #ff5e3c;
383 
	border-radius: 100%;
384 
	box-sizing: border-box;
385 
	-moz-box-sizing: border-box;
386 
	width: 5em;
387 
	height: 5em;
388 
	background: #ff5e3c;
389 
	color: #fff;
390 
	font-size: 0.6em;
391 
	line-height: 1em;
392 
	font-weight: 700;
393 
	padding: 1.8em 0 0 0;
394 
	text-align: center;
395 
	margin: -1.4em 1em 0 0;
396 
	text-transform: uppercase;
397 
	float: left;
398 
}
399 
#demos span:hover {
400 
	background: #fff !important;
401 
	color: #5d6365;
402 
	border: 3px solid #5d6365 !important;
403 
	cursor: pointer;
404 
}
405 
 
406 
 
407 
/*
408 
-------------------------------------
409 
Tooltips
410 
-------------------------------------
411 
*/
412 
 
413 
#demos span.tooltipster-icon {
414 
	cursor: help;
415 
	margin-left: 4px;
416 
	background: #0078c9;
417 
	border: 3px solid #0078c9;
418 
	width: 2.3em;
419 
	height: 2.3em;
420 
	padding: 0.4em 0 0;
421 
	margin: 2em 0 0 -3em;
422 
}
423 
 
424 
.tooltipster-default .tooltipster-content {
425 
	font-family: 'Open Sans', sans-serif;
426 
}
427 
.tooltipster-default .tooltipster-content img {
428 
	float: left;
429 
	margin-right: 10px;
430 
	border: 2px solid #000;
431 
}
432 
.tooltipster-default .tooltipster-content p {
433 
	margin: 0;
434 
}
435 
.tooltipster-default .tooltipster-content a {
436 
	color: #fff;
437 
	border-bottom: 1px solid rgba(255,255,255,0.4);
438 
}
439 
.tooltipster-default .tooltipster-content a:hover {
440 
	color: #fff;
441 
	border-bottom: 1px solid rgba(255,255,255,1);
442 
}
443 
 
444 
.tooltipster-blue {
445 
	background: #0078c9;
446 
	color: #fff;
447 
	border-radius: 5px;
448 
}
449 
.tooltipster-blue .tooltipster-content {
450 
	font-family: 'Open Sans', sans-serif;
451 
	font-size: 14px;
452 
	line-height: 16px;
453 
	padding: 8px 10px;
454 
}
455 
 
456 
.tooltipster-white {
457 
	background: #fff;
458 
	color: #0078c9;
459 
	border-radius: 5px;
460 
}
461 
.tooltipster-white .tooltipster-content {
462 
	font-family: 'Open Sans', sans-serif;
463 
	font-size: 14px;
464 
	line-height: 16px;
465 
	padding: 8px 10px;
466 
}
467 
 
468 
.tooltipster-pink {
469 
	background: url(../images/pattern-navy.png);
470 
	background-color: #ff3c70;
471 
	color: #fff;
472 
	border-radius: 5px;
473 
	box-shadow: inset -3px -3px 0 #ff3c70;
474 
}
475 
.tooltipster-pink .tooltipster-content {
476 
	font-family: 'Courier', monospace;
477 
	font-weight: 400;
478 
	font-size: 16px;
479 
	line-height: 16px;
480 
	padding: 15px 18px;
481 
}
482 
 
483 
 
484 
/*
485 
-------------------------------------
486 
Options
487 
-------------------------------------
488 
*/
489 
 
490 
table {
491 
	width: 100%;
492 
}
493 
table h4 {
494 
	margin-bottom: 0;
495 
}
496 
tr:nth-child(odd) {
497 
	background: #f4f5f7;
498 
}
499 
td {
500 
	padding: 2em;
501 
}
502 
td h4 {
503 
	font-family: 'Courier', monospace;
504 
	color: #0078c9;
505 
}
506 
 
507 
 
508 
/*
509 
-------------------------------------
510 
Themes
511 
-------------------------------------
512 
*/
513 
 
514 
#themes .themes span {
515 
	display: inline-block;
516 
	padding: 1em;
517 
	margin-right: 1em;
518 
	margin-bottom: 1em;
519 
	opacity: 0.8;
520 
}
521 
 
522 
.tooltipster-default-preview {
523 
	border-radius: 5px;
524 
	border: 2px solid #000;
525 
	background: #4c4c4c;
526 
	color: #fff;
527 
	font-family: Arial, sans-serif;
528 
	font-size: 14px;
529 
	line-height: 16px;
530 
	padding: 8px 10px;
531 
	font-weight: 400;
532 
	box-sizing: border-box;
533 
	-moz-box-sizing: border-box;
534 
}
535 
 
536 
.tooltipster-light-preview {
537 
	border-radius: 5px;
538 
	border: 1px solid #cccccc;
539 
	background: #ededed;
540 
	color: #666666;
541 
	font-family: Arial, sans-serif;
542 
	font-size: 14px;
543 
	line-height: 16px;
544 
	padding: 8px 10px;
545 
	font-weight: 400;
546 
}
547 
 
548 
.tooltipster-punk-preview {
549 
	border-radius: 5px;
550 
	border-bottom: 3px solid #f71169;
551 
	background: #2a2a2a;
552 
	color: #fff;
553 
	font-family: 'Courier', monospace;
554 
	font-size: 14px;
555 
	line-height: 16px;
556 
	padding: 8px 10px;
557 
	font-weight: 400;
558 
}
559 
 
560 
.tooltipster-noir-preview {
561 
	border-radius: 0px;
562 
	border: 3px solid #2c2c2c;
563 
	background: #fff;
564 
	color: #2c2c2c;
565 
	font-family: 'Georgia', serif;
566 
	font-size: 14px;
567 
	line-height: 16px;
568 
	padding: 8px 10px;
569 
	font-weight: 400;
570 
}
571 
 
572 
.tooltipster-shadow-preview {
573 
	border-radius: 5px;
574 
	background: #fff;
575 
	box-shadow: 0px 0px 14px rgba(0,0,0,0.3);
576 
	color: #2c2c2c;
577 
	font-family: 'Arial', sans-serif;
578 
	font-size: 14px;
579 
	line-height: 16px;
580 
	padding: 8px 10px;
581 
	font-weight: 400;
582 
}
583 
 
584 
 
585 
/*
586 
-------------------------------------
587 
Talk
588 
-------------------------------------
589 
*/
590 
 
591 
#talk h3 {
592 
	margin-bottom: 1em;
593 
}
594 
 
595 
 
596 
/*
597 
-------------------------------------
598 
Breakpoints
599 
-------------------------------------
600 
*/
601 
 
602 
@media all and (max-width : 1100px) {
603 
	#tweet, #gplus {
604 
		display: none;
605 
	}
606 
	#demos li {
607 
		width: 100%;
608 
	}
609 
	table, tr, td {
610 
		display: block;
611 
	}
612 
	td {
613 
		padding: 2em 2em 0 2em;
614 
	}
615 
	td:last-child {
616 
		padding-bottom: 2em;
617 
	}
618 
}
619 
 
620 
@media all and (max-width : 920px) {
621 
	#demos ul {
622 
		width: 100%;
623 
		padding: 0;
624 
	}
625 
}
626 
 
627 
@media all and (max-width : 820px) {
628 
	nav ul {
629 
		display: none;
630 
	}
631 
	#social div {
632 
		padding: 0.5em 0.7em;
633 
	}
634 
	header {
635 
		padding: 0;
636 
	}
637 
	header select {
638 
		display: block;
639 
		float: right;
640 
		margin: 1em 1em;
641 
	}
642 
	section {
643 
		padding: 3em;
644 
	}
645 
	#welcome {
646 
		padding: 7.4em 3em 6em;
647 
	}
648 
	#download span {
649 
		display: block;
650 
		margin-top: 0.5em;
651 
	}
652 
}
653 
 
654 
@media all and (max-width : 450px) {
655 
	table h4 {
656 
		font-size: 1em;
657 
		line-height: 1em;
658 
	}
659 
	section {
660 
		padding: 2em;
661 
	}
662 
	h2 {
663 
		font-size: 3em;
664 
		line-height: 1.2em;
665 
		margin-bottom: 0.23em;
666 
	}
667 
	h3 {
668 
		font-size: 1.4em;
669 
		line-height: 1.4em;
670 
		margin-bottom: 1.3em;
671 
	}
672 
	h4 {
673 
		font-size: 1.2em;
674 
	}
675 
	pre {
676 
		padding: 1em;
677 
	}
678 
}