/* reset.css
@ref: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
address,caption,cite,code,dfn,em,strong,th,var { 
	font-style:normal; 
	font-weight:normal; 
}

/* styles.css
----------------------------*/
@font-face {
  font-family: "Rock Salt";
  font-style: normal;
  font-weight: normal;
  src: url('fonts/Rock_Salt/RockSalt.ttf');
}
@font-face {
  font-family: "Coda";
  font-style: normal;
  font-weight: 800;
  src: url('fonts/Coda/Coda-Heavy.ttf');
}
body {
	background:hsl(60, 10%, 70%);
	font:62.5%/140% Helvetica, Arial;
	color:#000;
}
#container {
	margin:0 auto;
	width:960px;
}
header, footer, article {
	display:block;
}
h1 {
	text-align:center;
	text-transform:uppercase;
	line-height:1;
	margin:20px auto 0;
}
h1 dt {
	display:block;
	font-family:"Rock Salt", Helvetica, Arial;
	font-size:3em;
}
h1 dd {
	display:block;
	font-family:"Coda", Arial;
	font-size:40em;
	line-height:1;
	margin:0.25em 0 0;
	text-shadow:10px 10px 5px rgba(51, 51, 51, 0.7);
	text-transform:uppercase;
	margin-bottom:-40px;
}
html.oldie h1 dd {
	margin-top:10px;
	margin-bottom:5px;
}
a {
	color:hsl(240, 40%, 40%);
	text-decoration:underline;
}
a:hover {
	text-decoration:underline;
}
#main {
	margin:0 auto;
	overflow:hidden;
	text-align:center;
}
#lead-in {
	float:left;
	width:480px;
}
#suckerpunch {
	float:right;
	width:430px;
}
p {
	font-size:2em;
}
p, blockquote {
	font-family:Georgia, Serif;
	line-height:1.5;
	margin:10px auto;
	text-align:left;
}
blockquote {
  background:url(../images/quotes.png) no-repeat 0 5px;
	font-style:italic;
	margin-top:0;
	min-height:94px;
  padding-left:45px;
}
blockquote#keywords {
	padding-top:15px;
}
blockquote p {
	color:#333;
}
#description {
	display:none;
}
ul {
	font-size:12px;
}
strong,
#desc-tag {
	font-weight:bold;
	color:#333;
}
code {
	font-family:"Courier New";
}
footer > p {
	text-align:center;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	/* Styles */
	#container {
		width:300px;
	}
	h1 {
		margin:10px 0;
	}
	h1 dt {
		font-size:1.5em;
		line-height:2;
	}
	h1 dd {
		font-size:16em;
		text-shadow:3px 3px 5px rgba(51, 51, 51, 0.7);
	}
}
/* HTC Tattoo (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 220px) 
and (max-device-width : 320px) {
	/* Styles */
	#container {
		width:215px;
	}
	h1 {
		margin:10px 0;
	}
	h1 dt {
		font-size:1.5em;
		line-height:2;
	}
	h1 dd {
		font-size:10em;
		margin-bottom:5px;
		text-shadow:3px 3px 5px rgba(51, 51, 51, 0.7);
	}
	footer {
		margin-top:20px;
	}
}