/* CSS Reset */ 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, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, svg, hr {margin: 0;padding: 0;border: 0;font-size: 100%; font: inherit; vertical-align: baseline; font-weight: normal;}body {background: #fff; line-height: 1;}blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;}ins {text-decoration: none; background: #fff75c;}del {text-decoration: line-through;} em {font-style:italic;} strong {font-weight:bold;} abr {border-bottom:1px dotted;} input[type=submit], button {cursor:pointer;-webkit-appearance:none;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, svg, main { display: block;} /* make sure the page doesn't shift horizontally */ html{overflow-y:scroll}

body {
	background: white;
	color: #000;
	font-family: Verdana, Arial, sans-serif;
	font-size: 24px;
	line-height: 35px;
	min-width: 300px; /* Stop viewport squishing content when it's very narrow */
	max-width: 840px; /* For centre-alignment */
}

@media only screen and (min-width: 840px) {
	body {
		margin: 0 auto; /* For centre-alignment */
	}
}


h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: 40px;
	margin: 40px 0 40px;
}

h1 {
	font-size: 60px;
	line-height: 70px;
	text-align: center;
	margin-bottom: 60px;
}

	@media only screen and (min-width: 600px) {
		h1 {
			font-size: 68px;
		}
	}

	@media only screen and (min-width: 800px) {
		h1 {
			font-size: 100px;
			line-height: 120px;
			margin: 20px 0 40px 0;
		}
	}

h2 {
	font-size: 27px;
	line-height: 45px;
	text-align: center;
	margin-top: 60px;
}

img {
	max-width: 100%;
}

p {
	margin-bottom: 20px;
}

small {
	display: block;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}

.speech {
	background: url(images/bubble-1-slim.png) top center no-repeat;
	color: #333;
	font-family: 'Comic Sans MS', 'Marker Felt','Lucida Grande', sans-serif;
	font-size: 25px;
	line-height: 40px;
	margin: -100px auto 20px auto;
	max-width: 250px; /* width of image */
	min-height: 305px; /* height of image */
	padding: 110px 20px 20px 20px;
	position: relative; /* this makes z-index work */
	z-index: 3; /* to make sure the bubble appears over the photo */
}

.speech p {
	padding: 0 0 0 0;
	text-align: center;
}

	@media only screen and (min-width: 600px) {
		.speech {
			background: url(images/bubble-2-side.png) top center no-repeat;
			margin-top: -200px;
			max-width: 485px; /* width of image */
			min-height: 280px; /* height of image */
			padding: 0;
		}
	}

	@media only screen and (min-width: 530px) {
		.speech {
			background: url(images/bubble-1-slim-side.png) top center no-repeat;
			margin: -310px 0 20px 160px;
			max-width: 270px;
			min-height: 315px;
			padding: 50px 30px 20px 80px;
		}
	}

	@media only screen and (min-width: 560px) {
		.speech {
			margin-left: 190px;
		}
	}

	@media only screen and (min-width: 800px) {
		.speech {
			margin-bottom: 0;
			max-width: 200px;
		    padding: 50px 40px 20px 90px;
		}
	}

.speech-eric {
	background: url(images/bubble-small-top.png) top center no-repeat;
	padding-top: 20px;
	min-height: 110px; /* height of image */
}

	@media only screen and (min-width: 400px) {
		.speech-eric {
			background: url(images/bubble-small-side.png) top center no-repeat;
			margin: -260px 0 100px 120px;
			min-height: 160px; /* height of image */
			width: 181px; /* width of image */
		}
	}

	@media only screen and (min-width: 450px) {
		.speech-eric {
			margin-top: -260px;
			margin-left: 140px;
			margin-bottom: 150px;
			min-height: 100px;
		}
	}

	@media only screen and (min-width: 840px) {
		.speech-eric {
			background: url(images/bubble-small-diag.png) top center no-repeat;
			margin-top: -85px;
			margin-left: 140px;
			margin-bottom: 0;
			min-height: 125px; /* height of image */
			width: 155px; /* width of image */
		}
	}

.speech-eric p {
	font-size: 90px;
	padding: 20px 30px 20px 30px;
}

	@media only screen and (min-width: 400px) {
		.speech-eric p {
			padding: 0 40px 20px 80px;
		}
	}

	@media only screen and (min-width: 400px) {
		.speech-eric p {
			padding-left: 80px;
		}
	}

	@media only screen and (min-width: 530px) {
		.speech-eric p {
			padding-left: 35px;
		}
	}

	@media only screen and (min-width: 840px) {
		.speech-eric p {
			padding-top: 10px;
			padding-left: 0;
		}
	}

.main {
	margin: 0 auto;
	max-width: 900px;
	padding: 0 20px 40px 20px;
}

.sam-says, .eric-says {
	margin: 20px auto;
	width: 280px; /* this width is required to make things centred */
}

	@media only screen and (min-width: 530px) {
		.sam-says, .eric-says {
			width: 490px;
		}
	}

	@media only screen and (min-width: 560px) {
		.sam-says, .eric-says {
			width: 520px;
		}
	}

	@media only screen and (min-width: 840px) {
		.sam-says {
			float: right;
			width: 525px;
		}
	}

.eric-says {
	margin-top: -40px;
}

	@media only screen and (min-width: 530px) {
		.eric-says {
			margin-top: -80px;
		}
	}

	@media only screen and (min-width: 840px) {
		.eric-says {
			float: left;
			margin-top: 20px;
			width: 275px;
		}
	}

.photo-aral {
	margin-bottom: 40px;
	max-width: 100%;
}

.photo-sam, .photo-eric {
	border: 6px solid #333;
	display: block;
	position: relative; /* this makes z-index work */
	width: 260px; /* this isn't the full width, but that means it'll render slightly nicer on hi-dpi screens */
	z-index: 2; /* to make sure the bubble appears over the photo */
}

	@media only screen and (min-width: 400px) {
		.photo-eric {
			margin-left: -30px;
		}
	}

	@media only screen and (min-width: 530px) {
		.photo-eric {
			margin-left: 20px;
		}
	}

	@media only screen and (min-width: 800px) {
		.photo-eric {
			margin-left: 0;
		}
	}

	@media only screen and (min-width: 840px) {
		.photo-sam {
			margin-left: 15px;
		}
	}

.no-he-hasnt {
	clear: both;
	font-size: 45px;
	font-weight: bold;
	line-height: 60px;
	margin-bottom: 40px;
	text-align: center;
}

.well-update {
	font-size: 19px;
	line-height: 30px;
}

.responsible {
	font-size: 17px;
	line-height: 25px;
	margin: 0 auto;
	max-width: 600px;
}

.indie {
	margin-top: 40px;
}

div#controls {
	display: block;
	margin: 20px auto 60px auto;
	margin-top: 60px;
	/*text-align: center;*/
	width: 400px;
	border-radius: 10px;
	border: 5px solid black;
	padding: 10px;
}

/* Aral's audio player styles */
/*#controls {*/
	/*width: 70px;*/
	/*float: left;*/
/*}*/

#progress {
   width: 24px;
   height: 1px;
   /*margin-left: 80px;*/
   margin-left: 1px;
   border: 1px solid gray;
}

#play {
	/*display: none;*/
	/*margin-top: 5px;*/
	margin-left: auto;
	margin-right: auto;
/*	margin-left: 13px;
	margin-right: 20px;
*/	display: block;
}

#play-image {

	vertical-align: center;
}

#dots {
	width: 48px;
	height: 15px;
}

button {
	border: 0;
	background: transparent;
	font-size: 36px;
}

/* end Aral's audio player styles */

@media only screen and (min-width: 800px) {
	div#controls {
		margin-top: 0;
	}
}

/* Sam’s tweet */

iframe#twitter-widget-0.twitter-tweet.twitter-tweet-rendered {
	width: 100% !important;
	margin-top: 36px !important;
	margin-bottom: 36px !important;
}