* {
box-sizing:border-box;
}
/* mobile */
html,
body {
margin:0;
padding:0;
font-family:helvetica,arial,sans-serif;
}
body {
padding:20px;
}
h1,
h2,
h3,
p {
margin:0;
padding:0;
font-weight:normal;
}
h1 {
margin-bottom:4px;
}
.directory > ul > li > h3 {
margin-bottom:0.5%;
padding-bottom:2%;
border-bottom:dotted 1px #e2e2e2;
}
header {
padding-bottom:20px;
border-bottom:solid 1px #e2e2e2;
}
footer {
padding-top:20px;
border-top:solid 1px #e2e2e2;
}
footer p {
font-size:10px;
}
.directory > ul {
margin:20px 0;
padding:0;
list-style-type:none;
overflow:auto;
}
.directory > ul > li,
.directory > ul > li > ul > li {
margin-bottom:2%;
padding:2%;
}
.directory > ul li ul {
margin:0 0 5px 1.2em;
padding:0;
list-style-type:square;
}
.directory > ul > li > ul {
margin:0;
padding:0;
}
.directory li {
padding:5px 0;
}
.directory li a {
text-decoration:none;
color:#b31b1b;
}
.directory li a:after {
content: " \00bb";
}
@media only screen and (min-width:768px) {
/* tablet portrait */
.directory > ul > li > ul > li {
display: inline-block;
vertical-align: top;
width:49%;
margin-bottom:20px;
}
}
@media only screen and (min-width:1024px) {
/* tablet landscape, medium screen */
.directory > ul > li > ul > li {
width:33%;
}
}
@media only screen and (min-width:1200px) {
/* large screen */
body {
padding:0;
}
.page {
margin:0 auto;
padding:20px 0;
width:1024px;
}
.directory > ul > li > ul > li {
width:25%;
}
}