body {
	text-align: center;
	background-color: lightgray;
}

body, textarea, input {
	font-family: Helvetica, Arial;
	color: dimgray;
	border: none;
	text-align: left;
}

a {
	color: dimgray;
}

p {
	text-indent: 1.5em;
}

.section {
	width: 550px;
	margin: auto;
	overflow: auto;
	margin-bottom: 30px;
	padding: 30px;
}

.dark {
	background-color: lightgray;
	border-style: solid;
	border-width: 1px;
	border-color: dimgray;
}

.sectionbody {
	margin-top: 40px;
}

.step {
	text-transform: uppercase;
	position: absolute;
	margin-top: -50px;
	margin-left: -50px;
	background-color: dimgray;
	color: lightgray;
	padding: 20px;
	font-size: 20px;
}

.screenshot {
	width: 800px;
}

.small-screenshot {
	display: block;
	margin-top: 30px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 700px) {
	.section {
		width: 70%;
	}

	.screenshot {
		width: 100%;
		background-size: 100%;
	}

	.small-screenshot {
		width: 100%;
	}
}

.top-left {
	position: fixed;
	top: 2px;
	left: 2px;
}

.small-text {
	font-size: small;
}

.buttons {
	text-align: center;
	line-height: 2em;
	margin-top: 30px;
}

.outerbutton {
	display: inline-block;
	vertical-align: top;
}

.button {
	text-decoration: none;
	margin: 10px;
}

.button:hover {
	background-color: dimgray;
	color: lightgray;
}

.bigbutton {
	padding: 10px;
	padding-left: 35px;
	background-repeat: no-repeat;
	background-position: left center;
}

.windows {
	background-image: url('windows.png');
}

.windows:hover {
	background-image: url('windows2.png');
}

.osx {
	background-image: url('osx.png');
}

.osx:hover {
	background-image: url('osx2.png');
}

.stallman {
	background-image: url('stallman.png');
}

.stallman:hover {
	background-image: url('stallman2.png');
}

.jar {
	background-image: url('jar.png');
}

.jar:hover {
	background-image: url('jar2.png');
}