google-families.css

html {
	margin:0;
	padding:0;
}
body {
	background-color:#E9E9E3;
	font:100%/1.5 sans-serif;
	padding:0;
	margin:0 2em;
}
header, footer {
	background-color:#423e45;
	color:#E9E9E3;
	padding:1em 2em;
	margin:0 -2em 2em;
	text-shadow:-1px -1px 0 #000;
	background-image:-moz-linear-gradient(top, rgba(255,255,255,.1), rgba(255,255,255,0));
	background-image:-ms-linear-gradient(top, rgba(255,255,255,.1), rgba(255,255,255,0));
	background-image:-webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(255,255,255,0));
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.1)), to(rgba(255,255,255,0)));
	background-image:linear-gradient(top, rgba(255,255,255,.1), rgba(255,255,255,0));
	
}
footer {
	margin:2em -2em 0;
}
a {
	text-decoration:none;
	color:hsl(0,100%,10%);
}
a:hover, a:focus {
	text-decoration:underline;
}
header a, footer a {
	color:hsl(0,40%,75%);
}
h1 {
	font-size:2em;
	margin:0;
}
h2 {
	font-size:1em;
	font-weight:normal;
	font-style:italic;
	margin:0;
}
h3 {
	font-size:2em;
	margin:0;
	line-height:1.1;
	font-weight:normal;
}
h3 a {
	display:block;
	border-bottom:2px solid rgba(0,0,0,.333);
	color:#222;
}
h3 a:focus, h3 a:hover {
	text-decoration:none;
	border-bottom-color:rgba(0,0,0,.667);
}
ul {
	margin:0;
	padding:0;
}
.font {
	width:47%;
	margin-bottom:2em;
	margin-right:2.9%;
	display:inline-block;
	vertical-align:top;
}

li {
	display:inline-block;
	padding-right:3px;
	text-transform:capitalize;
}
li:after {
	content: ',';
}
li:last-child:after {
	content: '';
}

@media screen and (max-width: 640px) {
.font{ width:100%; margin-right:0;}
}
@media screen and (min-width: 1020px) and (max-width: 1279px) {
.font {	width:30%; }
}
@media screen and (min-width: 1280px) and (max-width: 1599px) {
.font { width:22%; }
}
@media screen and (min-width: 1600px) {
.font { width:17%; }
}