@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} }