html,body,div,span,h1,h2,p,img,audio{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
.clear{clear:both}

html { background: #aaa; }
.container { width: 700px; margin: 0 auto; padding: 48px 0; }
.container .box { float: left; width: 300px; margin: 5px; padding: 20px; }
.container .expanded { float: none; width: auto; margin-bottom: 10px; }
.container .dark { background: #292929 url(../images/dark-pattern.png); }
.container .light { background: #eee url(../images/light-pattern.png); }
pre { font-size: 12px; padding: 10px; margin: 5px 0 0; text-align: left; white-space: pre-wrap; white-space: -moz-pre-wrap !important; white-space: -pre-wrap; white-space: -o-pre-wrap;  word-wrap: break-word; }
.dark pre { color: #bbb; background: #444; background: rgba(105,105,105,0.3); }
.light pre { color: #333; background: #ccc; background: rgba(155,155,155,0.3); }

@media screen and (max-width: 780px) {
	.container { width: auto; padding: 10px; }
	.container .box { float: none; width: auto; }
}

@media screen and (max-width: 320px) {
	.container { width: auto; padding: 0; }
	.container .box { padding: 10px; margin: 0; }
}