body {
background-color: #000;
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 20px;
color: #afafaf;
}

* {
padding: 0;
margin: 0;
}

a {
color: #fff;
text-decoration: none;
}

a:hover {
color: #f00;
}

p, h1, h2 {
margin: 8px 0;
}

h1 {
color: #ee3424;
}

article {
width: 646px;
margin: 0 auto;
display: block;
}

header {
display: block;
margin-top: 40px;
}

header h1 {
background: url(amatl-logo.png) no-repeat;
width: 154px;
height: 40px;
}

header h1 span {
visibility: hidden;
}

header p {
font-size: 13px;
color: #afafaf;
margin: 0 0 0 56px;
padding: 0 0 10px 0;
border-bottom: #333 1px dotted;
}

section {
display: block;
margin: 0 0 10px 56px;
}

section h4 {
font-size: 12px;
color:#555;
text-transform: uppercase;
margin: 30px 0 0 0;
clear: both;
}

.example {
width: 280px;
height: 140px;
margin: 10px 30px 0 0;
float: left;
}

.example-second {
margin: 10px 0 0 0;
}

.example-last {
margin: 10px 0 20px 0;
}

.meta {
}

.meta-info {
font-size: 12px;
line-height: 15px;
}

img.screenshot {
display: block;
border: #333 5px solid;
margin: 0 10px 0 0;
float: left;
}

a img.screenshot {
border: #333 5px solid;
opacity:1;
}

a:hover img.screenshot {
opacity:0.5;
}

footer {
font-size: 12px;
color: #777;
display: block;
margin: 30px 0 30px 56px;
padding: 10px 0;
border-top: #333 1px dotted;
}

footer p:hover span {
color: #f00;
}