Skip to content

Instantly share code, notes, and snippets.

@extratone
Last active June 30, 2025 10:55
Show Gist options
  • Save extratone/fb69091668f5e27c5167e9aa68e092e9 to your computer and use it in GitHub Desktop.
Save extratone/fb69091668f5e27c5167e9aa68e092e9 to your computer and use it in GitHub Desktop.
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
}
header > figure {
margin: 0 0 5px 16px;
padding: 0;
float: right;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th,
td {
text-align: left;
font-weight: normal;
}
form legend {
display: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
}
blockquote,
q {
quotes: "" "";
}
ol,
ul {
list-style: none;
}
hr {
display: none;
visibility: hidden;
}
:focus {
outline: 0;
}
html {
-webkit-font-smoothing: subpixel-antialiased;
}
body {
font: normal 0.95em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
background: rgba(249, 249, 244, 1);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
-webkit-transition: all 0.2s ease-out;
}
h1,
h2,
h3 {
color: #333;
text-shadow: -1px 0 0 #222, 0 0 #fff;
}
h1 {
font-size: 36px;
margin-bottom: 1em;
line-height: 1;
}
h2 {
font-size: 21px;
margin-bottom: 0.65em;
}
h3 {
font-size: 18px;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
#main small {
font-size: 12px;
font-weight: bold;
text-align: center;
display: block;
float: left;
width: 100%;
clear: both;
margin: 10px 0;
}
header,
#extrainfo,
footer {
position: relative;
max-width: 650px;
margin: 30px;
float: left;
}
#extrainfo .apphome {
display: none;
}
header ul {
list-style: disc;
list-style-position: outside;
margin: 20px 1em;
}
footer {
font-size: 13px;
line-height: 18px;
}
footer h5 {
margin: 10px 0;
}
#skiptochart {
margin: 1em;
text-align: center;
}
nav ul,
div.nav ul {
float: left;
width: 100%;
clear: both;
padding: 0;
margin: 0 0 20px 0;
}
nav li,
div.nav li {
list-style-type: none;
float: left;
margin-right: 10px;
}
nav a,
div.nav a {
font-size: 12px;
margin: 5px 0 20px 0;
font-weight: 600;
clear: both;
background: #333;
color: #ddd;
line-height: 2em;
display: block;
padding: 4px 10px 0 10px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.125) inset;
text-shadow: 0 -1px 1px #222;
opacity: 0.8;
}
nav a:hover,
div.nav a:hover {
opacity: 1;
}
aside {
position: relative;
float: right;
margin: 30px 30px 10px 10px;
}
#extrainfo h3 {
color: #fff;
padding: 5px;
position: relative;
left: -5px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#extrainfo ul {
font-size: 14px;
list-style: circle;
list-style-position: outside;
margin-bottom: 20px;
padding-left: 20px;
}
#extrainfo .stdfeatures {
width: 500px;
}
#extrainfo p {
font-size: 14px;
}
#extrainfo div {
background: #333;
color: #eee;
padding: 20px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
border: solid 1px #fff;
}
p {
margin-bottom: 1.2em;
}
strong {
font-weight: 600;
}
em {
font-style: italic;
}
a {
color: #4297d8;
text-decoration: none;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
a:hover {
color: rgba(99, 185, 255, 1);
}
#main {
padding-bottom: 50px;
margin-top: 150px;
float: left;
position: relative;
}
#filtertoggle {
position: absolute;
z-index: 101;
left: 40px;
top: -25px;
font-size: 12px;
font-weight: bold;
color: #666;
}
#filtertoggle.filtered {
color: rgba(122, 55, 55, 1);
}
#featurecomp {
width: 1640px;
padding: 0;
margin: 0 20px;
padding-top: 0;
padding-bottom: 0;
position: relative;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
li.app {
white-space: nowrap;
list-style: none;
font-weight: bold;
float: left;
width: 100%;
position: relative;
margin: 4px 0;
height: 14px;
}
li.app a:not([class]) {
color: #fff;
margin-right: 5px;
display: block;
}
b.homepage {
opacity: 0;
z-index: 10;
position: absolute;
left: 6px;
font-size: 10px;
margin-right: 6px;
background: rgba(50, 50, 50, 0.5);
color: #eee;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
padding: 0 2px;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}
li.app span:hover b.homepage {
opacity: 1;
}
li.app ul {
border-top: 1px solid #ccc;
border-right: 1px solid #ccc !important;
border-bottom: 1px solid #eee;
border-left: 1px solid #ccc !important;
}
li.app:last-child ul {
border-bottom: 1px solid #ccc !important;
}
li.app:nth-of-type(2n) ul {
background: rgba(50, 50, 50, 0.15);
}
li.app.new > span > a:before {
content: "* ";
color: #3c959b;
}
li.app span {
display: block;
width: 180px;
text-align: right;
font-size: 13px;
height: 22px;
position: absolute;
z-index: 100;
left: 10px;
background: #333;
border-bottom: 1px solid #ddd;
}
ul.features {
font-weight: normal;
padding: 0;
position: absolute;
left: 190px;
top: 0;
}
.features li {
text-align: center;
float: left;
display: block;
width: 42px;
height: 20px;
font-size: 12px;
}
.headerrow {
font-size: 13px;
font-weight: bold;
padding-left: 213px;
list-style: none;
margin-top: 0;
padding-top: 0;
position: absolute;
}
#filtertoggle.filtered:hover,
.headerrow:hover {
cursor: pointer;
}
.headerrow li {
text-align: left;
float: left;
width: 42px;
height: 100px;
display: block;
position: relative;
-webkit-transform: rotate(-50deg) translate(65px, 0);
-moz-transform: rotate(-40deg) translate(59px, -5px);
transform: rotate(-40deg) translate(59px, -5px);
white-space: nowrap;
}
#filtertoggle.filtered,
li.feature,
li.app span,
.headerrow span {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.headerrow span.selected {
color: rgba(95, 177, 70, 1);
background: rgba(144, 224, 120, 0.2);
}
.headerrow li#f_price {
-webkit-transform: rotate(-50deg) translate(75px, 0);
-moz-transform: rotate(-40deg) translate(69px, -5px);
}
li.selected {
display: none;
}
li.selected li.feature {
opacity: 0.4;
}
li.selected > span {
background: rgba(0, 0, 0, 0.7) !important;
}
li.selected > span a {
color: #bbb !important;
}
.headerrow li.separator span:after {
content: "\25BD";
margin-left: 4px;
}
ul li.separator {
width: 5px;
background: #666;
}
.headerrow .separator {
background: 0;
}
.headerrow .separator span {
border-bottom: solid 5px #555;
color: #333;
font-weight: bold;
width: 75px;
padding-left: 30px;
position: absolute;
height: 5px;
left: -28px;
top: 10px;
text-transform: uppercase;
font-size: 12px;
line-height: 11px;
text-align: right;
text-indent: 78px;
}
.features li.price,
#f_price {
font-size: 12px;
font-weight: bold;
width: 65px;
}
ul.key {
margin: 1em;
}
.key strong {
font-weight: 600;
padding: 0 4px;
margin: 2px 0;
width: 30px;
display: inline-block;
border: solid 1px #aaa;
text-align: center;
}
.features .yes,
.key .yes {
background: rgba(195, 255, 176, 0.75);
}
.features .yes.premium,
.key .yes.premium {
background: rgba(176, 216, 152, 0.75);
}
.features .no,
.key .no {
background: rgba(230, 230, 230, 0.5);
}
.features .unknown,
.key .unknown {
background: rgba(200, 200, 200, 0.5);
}
.popup,
.arrow:after {
background: rgba(0, 0, 0, 0.8);
z-index: 100;
}
li.app .popup ul {
border: none !important;
}
li.app .popup ul li {
border-top: solid 1px #333;
border-bottom: solid 1px #222;
}
li.app .popup ul li:first-child {
border-top: 0;
}
li.app .popup ul li:last-child {
border-bottom: 0;
}
.popup span {
background: none !important;
}
.popup {
position: absolute;
min-width: 200px;
max-width: 650px;
white-space: nowrap;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
padding: 0;
text-align: center;
text-indent: 0;
color: #fff;
text-shadow: #5b5b5b 0 -1px 0;
font: 14px/18px "Myriad Pro", "Helvetica Neue", Helvetica, Arial, sans;
margin: 20px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.05) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.05) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.05) inset;
}
.popup p {
color: #999 !important;
display: block;
padding: 0 !important;
margin: 0 !important;
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
}
.popup ul {
font-size: 13px;
list-style-type: none;
margin: 0;
padding: 4px 8px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.popup li {
color: #ddd;
padding: 2px 0 0;
line-height: 1.6em;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.popup li:first-child {
border-top: 0;
margin-top: 0;
}
.popup li:last-child {
border-bottom: 0;
margin-bottom: 6px;
}
li.app .popup a {
color: #fff;
margin: 0;
display: inline;
}
.popup .apphome a {
color: #fff !important;
margin: 4px 0;
padding: 6px 4px 2px 4px;
display: block;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #111;
background: -webkit-linear-gradient(top, #565656 22.5%, #4a4a4a 100);
background: -moz-linear-gradient(top, #565656 22.5%, #4a4a4a 100);
background: linear-gradient(top, #565656 22.5%, #4a4a4a 100);
-webkit-box-shadow: 0 0 2px #222, inset 0 -2px 3px #616161;
-moz-box-shadow: 0 0 2px #222, inset 0 -2px 3px #616161;
box-shadow: 0 0 2px #222, inset 0 -2px 3px #616161;
text-indent: 0;
text-shadow: #3c3c3c 0 -1px 0;
line-height: 1.5em;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
overflow: hidden;
text-overflow: ellipsis;
}
.popup .apphome a:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.2, #4e4e4e), color-stop(1, #4a4a4a));
background: -webkit-linear-gradient(top, #4e4e4e 18.6%, #4a4a4a 100);
background: -moz-linear-gradient(top, #4e4e4e 18.6%, #4a4a4a 100);
background: linear-gradient(top, #4e4e4e 18.6%, #4a4a4a 100);
}
.popup .apphome a:active {
background: -webkit-linear-gradient(top, #3a3a3d 22.5%, #4a4a4a 100);
background: -moz-linear-gradient(top, #3a3a3d 22.5%, #4a4a4a 100);
background: linear-gradient(top, #3a3a3d 22.5%, #4a4a4a 100);
}
.arrow {
overflow: hidden;
position: absolute;
}
.arrow:after {
content: "";
position: absolute;
width: 27px;
height: 28px;
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.north .arrow,
.south .arrow {
display: block;
width: 28px;
height: 18px;
left: 50%;
margin-left: -14px;
}
.north .arrow {
top: -18px;
left: 50%;
margin-left: -13px;
}
.north .arrow:after {
top: 10px;
}
.south .arrow {
bottom: -18px;
}
.south .arrow:after {
bottom: 10px;
}
.east .arrow,
.west .arrow {
display: block;
width: 18px;
height: 28px;
top: 32px;
}
.east .arrow {
right: 13px;
margin-top: -18px;
right: -18px;
}
.east .arrow:after {
right: 10px;
}
.west .arrow {
margin-top: -18px;
left: -18px;
}
.west .arrow:after {
left: 10px;
}
.left,
.left li,
.left li a {
text-align: left;
text-indent: 10px;
}
.nodivider li {
border: none !important;
}
.compact li a {
margin: 0;
}
.compact.nodivider li a {
margin: 2px 0 0;
}
.compact ul {
padding-top: 7px;
}
#extrainfo > div {
position: relative;
border: 0;
}
a.expander {
color: #fff !important;
font-weight: bold;
text-transform: uppercase;
margin: 4px 0;
font-size: 13px;
width: 140px;
text-align: center;
float: right;
padding: 3px 4px 2px 4px;
display: block;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid rgba(94, 135, 89, 1);
background: rgba(111, 225, 97, 1);
text-indent: 0;
line-height: 1.5em;
-webkit-transition: all 0.1s ease-in-out;
overflow: hidden;
text-overflow: ellipsis;
}
#extrainfo .apphome {
list-style: none;
margin: 4px 0;
padding: 0;
}
a.expander.left {
float: left;
margin: 10px 10px 0 0;
width: 100px;
height: 30px;
padding-top: 20px;
}
a.expander:hover {
background: rgba(96, 211, 82, 1);
}
a.expander:active {
background: rgba(96, 211, 82, 1);
}
.avgrating {
font-weight: bold;
font-size: 18px;
text-align: right;
color: #444;
display: block;
float: left;
margin: 14px 6px 0;
}
.appstore .app-dev {
width: 400px;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
overflow: hidden;
}
.appstore div.rating {
float: right;
}
.appstore .rating-star:after {
content: "\272f";
font-size: 24px;
color: rgba(222, 205, 122, 1);
}
.appstore .rating-star.ghost:after {
color: #666;
}
.appstore,
.appstore div {
background: #eee !important;
color: #333 !important;
border: none !important;
box-shadow: none !important;
}
.appstore div.rating,
.appstore div.rating div {
padding: 0 !important;
}
.appstore img.app-icon {
position: absolute;
top: 20px;
right: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.appstore .imgwrap {
padding: 0 !important;
margin: 0 !important;
}
.super {
font-size: 0.85em;
position: relative;
top: -0.25em;
}
.appstore .app-price {
font-weight: bold;
color: #666;
float: right;
font-size: 24px;
}
.appstore .app-currency {
float: right;
font-weight: bold;
color: #ccc;
font-size: 24px;
margin-right: 4px;
}
.appstore span.app-name {
display: none;
font-size: 21px;
font-weight: bold;
color: #333;
clear: both;
margin: 0 10px 10px 0;
text-shadow: 0 -1px 0 #222;
}
.appstore .app-dev {
color: #777;
float: left;
clear: both;
}
span.label.wide {
display: block;
clear: both;
margin: 15px 0;
width: 120px;
font-size: 12px;
}
.app-details {
float: left;
list-style-type: none !important;
padding: 0 !important;
}
span.label {
width: 90px;
float: left;
color: #666;
text-align: right;
margin-right: 10px;
}
span.value {
float: left;
color: #333;
width: 150px;
}
.label.review {
font-weight: bold;
color: #666;
border-bottom: solid 1px #ccc;
}
div.reviews {
clear: both;
max-height: 200px;
overflow: auto;
}
div.user-review {
clear: both;
font-size: 16px;
}
.user-review p.content {
font-size: 12px !important;
}
.user-review .user-info {
font-size: 12px;
}
.app-screenshots {
float: left;
clear: both;
width: 550px;
padding: 10px !important;
}
.app-screenshots ul {
padding: 0 !important;
margin: 0;
}
.app-screenshots li {
list-style: none;
float: left;
margin: 0 10px 10px 0;
border: solid 2px #aaa;
box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.125);
}
.app-screenshots p {
width: 100%;
display: block;
clear: both;
} /*! fancyBox v2.0.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-tmp iframe,
.fancybox-tmp object {
vertical-align: top;
padding: 0;
margin: 0;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 1002;
}
.fancybox-outer {
position: relative;
padding: 0;
margin: 0;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fancybox-opened {
z-index: 1003;
}
.fancybox-opened .fancybox-outer {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-inner {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
outline: 0;
overflow: hidden;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 10px;
}
.fancybox-image,
.fancybox-iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
vertical-align: top;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
#fancybox-loading,
.fancybox-close,
.fancybox-prev span,
.fancybox-next span {
background-image: url("fancybox_sprite.png");
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 1010;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url("fancybox_loading.gif") center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 1004;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
background: transparent url("blank.gif");
z-index: 1003;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 36px;
margin-top: -18px;
cursor: pointer;
z-index: 1003;
visibility: hidden;
}
.fancybox-prev span {
left: 20px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 20px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -9999px;
left: -9999px;
padding: 0;
overflow: visible;
visibility: hidden;
}
#fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 1001;
background: #000;
}
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
text-shadow: none;
z-index: 1005;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 1003;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent;
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #fff;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
}
.fancybox-title-inside-wrap {
margin-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, 0.8);
}
#sponsor {
background: #333;
width: 100%;
float: left;
clear: both;
margin: 0 0 20px 0;
padding: 1em 0 0;
color: white;
font-weight: 700;
text-align: center;
line-height: 1;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment