Source code
Revision control
Copy as Markdown
Other Tools
:root {
--margin-left: 80px;
--subtle: whitesmoke;
--carousel-card-width: 180px;
}
body {
margin: 0;
padding: 0 0 80px 0;
}
a:link {
text-decoration: none;
}
a:visited {
color: blue;
}
h5[test-label] {
margin-top: 30px;
margin-bottom: 4px;
}
nav {
border-bottom: 1px solid #ececec;
padding-bottom: 20px;
margin-bottom: 20px;
}
#searchform {
padding-top: 20px;
margin-bottom: 20px;
}
nav>div,
#searchform,
.moz-carousel,
.factrow {
display: flex;
align-items: center;
}
nav>div,
#searchform {
gap: 40px;
}
nav>div,
#searchform,
#searchresults,
#top {
margin-left: var(--margin-left);
}
#searchbox {
font-size: 14px;
padding: 10px 20px;
width: 300px;
border-radius: 20px;
border: 2px solid var(--subtle);
height: 20px;
}
.card-container {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.card-container>.card {
height: 160px;
border-radius: 3px;
border: 1px solid var(--subtle);
display: inline-block;
box-sizing: border-box;
padding: 10px;
}
.card-container>.card:not(:last-child) {
margin-right: 10px;
}
.card-container>.card>a {
display: block;
margin-bottom: 2px;
}
#searchresults {
width: 900px;
display: grid;
grid-template-columns: 600px 300px;
}
.moz-carousel,
.factrow {
gap: 10px;
}
.moz-carousel {
overflow: hidden;
}
.moz-carousel[narrow],
.moz-carousel-container {
width: calc(var(--carousel-card-width) * 3 + (3 * 10px));
overflow-x: auto;
}
.moz-carousel[extra] {
width: calc(var(--carousel-card-width) * 4 + (3 * 10px));
}
.moz-carousel>.moz-inner {
border: 1px solid var(--subtle);
border-radius: 10px;
padding: 10px;
}
.moz-carousel>.moz-carousel-card {
flex: 1 0 var(--carousel-card-width);
border: 1px solid var(--subtle);
font-size: 14px;
}
.moz-carousel-card .moz-carousel-image {
width: 100%;
height: 120px;
background-color: var(--subtle);
display: flex;
align-items: center;
justify-content: center;
}
.moz-carousel-card-inner-content {
padding: 10px 20px 20px 20px;
}
.multi-col {
display: grid;
padding: 10px 20px 20px 20px;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mock-image {
height: 100px;
background-color: var(--subtle);
display: flex;
align-items: center;
justify-content: center;
}
/* Some SERPs hide anchors using CSS */
.hidden {
display: none;
}
/* Typography */
h2 {
line-height: 100%;
margin-bottom: 10px;
margin-top: 10px;
}