summaryrefslogtreecommitdiffstats
path: root/stylesheets/styles.css
blob: 61a7f9c85ef4a2e6db57cc64f4957232bf8a7d97 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,900italic,300,700,900);
:root {
  color-scheme: light dark;
}
body{padding:50px;font:21px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;color:#222;font-weight:300;}
h1, h2, h3, h4, h5, h6{color:#222;margin:0 0 20px;}
p, ul, ol, table, pre, dl{margin:0 0 20px;}
h1, h2, h3{line-height:1.1;}
h1{font-size:28px;font-weight:900;}
h2{color:#393939;}
h3, h4, h5, h6{color:#494949;}
a{color:#39c;font-weight:400;text-decoration:none;}
a small{color:#777;margin-top:-0.6em;display:block;}
.wrapper{width:860px;margin:0 auto;}
blockquote{border-left:1px solid #e5e5e5;margin:0;padding:0 0 0 20px;font-style:italic;}
code, pre{font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;color:#333;}
pre{padding:8px 16px;background:#f8f8f8;border-radius:5px;border:1px solid #e5e5e5;overflow-x:auto;font-size:17px;}
table{width:100%;border-collapse:collapse;}
th, td{text-align:left;padding:5px 10px;border-bottom:1px solid #e5e5e5;}
dt{color:#444;font-weight:700;}
th{color:#444;}
img{max-width:100%;}
a img{position:relative;top:3px;}
header{width:270px;float:left;position:fixed;}
header ul{list-style:none;height:40px;padding:0;background:#eee;background:-moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));background:-webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);background:-o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);background:-ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);background:linear-gradient(top, #f8f8f8 0%,#dddddd 100%);border-radius:5px;border:1px solid #d2d2d2;box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;width:270px;}
header li{width:89px;float:left;border-right:1px solid #d2d2d2;height:40px;}
header ul a{line-height:1;font-size:11px;color:#999;display:block;text-align:center;padding-top:6px;height:40px;}
strong{color:#222;font-weight:700;}
header ul li + li{width:88px;border-left:1px solid #fff;}
header ul li + li + li{border-right:none;width:89px;}
header ul a strong{font-size:14px;display:block;color:#222;}
section{width:500px;float:right;padding-bottom:180px;}
small{font-size:13px;}
hr{border:0;background:#e5e5e5;height:1px;margin:0 0 20px;}
footer{float:left;position:fixed;bottom:50px;}
.compatible{width:auto;height:120px;margin-right:10px;}
@media print, screen and (max-width:960px){div.wrapper{width:auto;margin:0;}
header, section, footer{float:none;position:static;width:auto;}
header{padding-right:320px;}
.screenshots{height:600px;width:175%;}
section{border:1px solid #e5e5e5;border-width:1px 0;padding:20px 0;margin:0 0 20px;}
header a small{display:inline;}
header ul{position:absolute;right:50px;top:52px;}S
header ul:nth-of-type(2){top:116px;}
}
@media print, screen and (max-width:840px){.screenshots{height:500px;width:175%;}
.compatible{height:110px;}
}
@media print, screen and (max-width:720px){body{word-wrap:break-word;}
header{padding:0;}
header ul, header p.view{position:static;}
.screenshots{height:400px;width:inherit;}
pre, code{word-wrap:normal;}
.compatible{height:90px;}
}
@media print, screen and (max-width:480px){body{padding:15px;}
.screenshots{height:300px;}
header ul{display:none;}
.compatible{height:70px;}
}
@media print{body{padding:0.4in;font-size:12pt;color:#444;}
}
.hidden{display:none;}
.screenshots{position:relative;}
.screenshots img{position:absolute;cursor:pointer;top:0;}
#config{top:8px;left:0;}
.background{z-index:-1;top:0;left:0;position:fixed;width:100%;height:100%;background:url(../images/logo.png) no-repeat 200px 100px;opacity:0.4;}
.app{width:48px;height:48px;display:block;background-size:contain;font-size:0;}
.windows{background-image:url(../images/windows.png);}
.macos{background-image:url(../images/logo.png);}
@media (prefers-color-scheme: dark) {
   body,strong{color:#ddd}
   h1,h2,code{color:#ccc;}
   h3,h4,h5,h6{color:#bbb;}
   pre code{color:#222}
}