* {
	margin: 0;
	padding: 0;
}

body {
	font: 10pt/1.5 "HelveticaNeue", Helvetica, sans-serif;
}

html {
	background: rgb(95%,95%,95%);
	min-height: 100.2%;
}

body > * {
	margin: 0 auto;
	width: 44em;
	clear: both;
}

a {
	color: inherit;
	text-decoration: none;
}

.markerfelt {
font-family: "MarkerFelt-Thin", sans-serif;
}

h2 {
	font-size: 175%;
	font-family: "HelveticaNeue-Light", Helvetica, sans-serif;
	font-weight: lighter;
}

h3, #releasenotes dt {
	line-height: 1.2;
	font-size: 112%;
	font-family: "HelveticaNeue", Helvetica, sans-serif;
	font-weight: bold;
}

/* =resume */
#resume {
	background: #0057C2 url(img/info.png) no-repeat 4em 50%;
	padding: 2em 4em;
	color: #fff;
	text-shadow: 0 1px 0 #333;
	text-align: justify;
	position: relative;
}

#resume p {
	margin-left: 60px;
}

#resume strong {
	font-weight: normal;
	background: #5891D7;
	padding: .1em .25em;
}

#resume::before {
	content: ".";
	text-indent: -9999px;
	display: block;
	width: 57px;
	position: absolute;
	top: -30px;
	left: -30px;
	bottom: 0;
	background: url(img/shadow-top-left.png) no-repeat 0 0;
}

#resume::after {
	content: ".";
	text-indent: -9999px;
	display: block;
	width: 69px;
	position: absolute;
	top: -28px;
	right: -27px;
	bottom: 0;
	background: url(img/shadow-top-right.png) no-repeat 0 0;
}

/* =head */
#head {
	width: 100%;
	height: 160px;
	text-indent: -9999px;
	overflow: hidden;
	background: url(img/head.png) no-repeat 50% 0;
}

/* =download */
#download {
	padding: 2em 4em;
	background: #333;
	color: #fff;
	text-shadow: 0 1px 0 #000;
	text-align: justify;
	border-top: 1px solid #222;
	position: relative;
	margin-top: -1px;
}

#download::before {
	content: ".";
	text-indent: -9999px;
	display: block;
	width: 4px;
	position: absolute;
	top: 0;
	left: -4px;
	bottom: 0;
	background: url(img/shadow-left.png) repeat-y;
}

#download::after {
	content: ".";
	text-indent: -9999px;
	display: block;
	width: 4px;
	position: absolute;
	top: 0;
	right: -4px;
	bottom: 0;
	background: url(img/shadow-right.png) repeat-y;
}

#download > div:first-child {
	width: 20em;
	float: left;
}

#download > div + div {
	width: 20em;
	float: right;
}

.break {
	display: block;
	clear: both;
	height: 0;
	opacity: 0;
}

#download ul { display: table; margin-top: .5em; }
#download ul li { display: table-row; }
#download ul li > * { display: table-cell; }
#download ul li > strong { text-align: right; padding-right: .5em; }

#download h2 {
	font-size: 200%;
}

#download h2 a {
	display: block;
	padding-left: 2.75em;
	-webkit-transition: text-shadow 0.25s linear;
}

#download a:hover, #download a:focus {
	text-shadow: 0 0 3px #fff;
}

#download a:active {
	color: #ccc;
	text-shadow: 0 -1px 0 #000;
}
#download div:first-child h2::before {
	content: url(img/arrow.png);
	height: 113px;
	margin-top: 10px;
	margin-left: -29px;
	margin-bottom: -13px;
	display: block;
	float: left;
	margin-right: .5em;
}


#download div + div h2::before {
	content: url(img/dollar.png);
	height: 113px;
	margin-top: 10px;
	margin-right: -30px;
	margin-bottom: -13px;
	display: block;
	float: right;
	margin-left: .5em;
}

/* =features */
#features {
	background: #fff;
	padding: 2em 4em;
	position: relative;
	border-top: 1px solid #222;
	border-bottom: 1px solid #222;
	margin-top: -1px;
	margin-bottom: -1px;
}

#features h2 {
	text-shadow: 0 1px 3px #999;
}

#features::before {
	content: ".";
	text-indent: -9999px;
	display: block;
	width: 4px;
	position: absolute;
	top: 0;
	left: -4px;
	bottom: 0;
	background: url(img/shadow-left.png) repeat-y;
}

#features::after {
	content: ".";
	text-indent: -9999px;
	display: block;
	width: 4px;
	position: absolute;
	top: 0;
	right: -4px;
	bottom: 0;
	background: url(img/shadow-right.png) repeat-y;
}

#features ul::after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	opacity: 0;
}

#features ul {
	list-style: none;
}

#features li {
	display: block;
	width: 20em;
	margin: .5em 0;
}

#features li p {
	text-align: justify;
}

#features li:first-child,
#features li:first-child + li + li,
#features li:first-child + li + li + li + li,
#features li:first-child + li + li + li + li + li + li,
#features li:first-child + li + li + li + li + li + li + li + li {
	float: left;
	clear: both;
}

#features li:first-child + li,
#features li:first-child + li + li + li,
#features li:first-child + li + li + li + li + li,
#features li:first-child + li + li + li + li + li + li + li,
#features li:first-child + li + li + li + li + li + li + li + li + li {
	float: right;
}

#features h3::before {
	content: ".";
	text-indent: -9999px;
	margin-left: -36px;
	margin-right: 4px;
	margin-bottom: -32px;
	display: block;
	width: 32px;
	height: 32px;
	padding: 0;
	background: no-repeat 50% 50%;
}

#readwrite h3::before { background-image: url(img/readwrite.png); }
#uptodate h3::before { background-image: url(img/uptodate.png); }
#integrated h3::before { background-image: url(img/integrated.png); }
#international h3::before { background-image: url(img/international.png); }
#keyboard h3::before { background-image: url(img/keyboard.png); }
#whenyouwant h3::before { background-image: url(img/whenyouwant.png); }
#customizable h3::before { background-image: url(img/customizable.png); }
#interface h3::before { background-image: url(img/interface.png); }
#lightweight h3::before { background-image: url(img/lightweight.png); }
#free h3::before { background-image: url(img/free.png); }

/* =screenshots */
#screenshots {
	padding: 2em 4em;
	background: #666;
	position: relative;
}
#screenshots > div {
display: table;
width: 100%;
}
#screenshots h2 {
	color: #fff;
	text-shadow: 0 1px 0 #000;
	margin-bottom:.75em;
}
#screenshots ul {
	display: table-row;
}
#screenshots > div > ul:first-child li {
	padding-bottom: 30px;
}
#screenshots li {
	text-align: center;
	display: table-cell;
	vertical-align: top;
}
#screenshots img {
	border: none;
}

#screenshots a:hover img, #screenshots a:focus img {
	opacity: .8;
}

#screenshots a:active img {
	opacity: .65;
}

#screenshots::before, #releasenotes::before {
	content: ".";
	text-indent: -9999px;
	display: block;
	width: 4px;
	position: absolute;
	top: 0;
	left: -4px;
	bottom: 0;
	background: url(img/shadow-bottom-left.png) no-repeat 100% 100%;
}

#screenshots::after, #releasenotes::after {
	content: ".";
	text-indent: -9999px;
	display: block;
	width: 4px;
	position: absolute;
	top: 0;
	right: -4px;
	bottom: 0;
	background: url(img/shadow-bottom-right.png) no-repeat 100% 100%;
}

/* =releasenotes */
#releasenotes {
	background: #fff;
	position: relative;
	padding: 2em 4em;
}

#releasenotes dl {
	margin: 0 -4em;
	padding: 0 4em;
}

#releasenotes dt {
	margin-top: 1em;
}

#releasenotes dd {
	margin: .5em 2em;
}

/* =foot */
#foot {
	background: url(img/shadow.png) no-repeat 50% 0;
	color: #666;
	font-size: 85%;
	padding: 1em 0;
	text-align: center;
}

#foot a, a[href="index.html"] {
	border-bottom: 1px solid #999;
	padding: .1em .25em;
	background: #ccc;
	color: #666;
}

a[href="index.html"] {
	margin-top: -2em;
	margin-left: -4em;
	float: left;
	display: block;
	background: #ccc;
	padding: 0 .5em;
	line-height: 1.5em;
	border-right: 1px solid #999;
}

#releasenotes a[href="index.html"] + * { clear: both; }

#foot a:hover, #foot a:focus, a[href="index.html"]:hover, a[href="index.html"]:focus {
	border-color: #999;
	background: #999;
	color: #fff;
}

/* mozilla sucks */
body.unsupported > *::before, body.unsupported > *::after,
body.unsupported > #download h2::before, body.unsupported > #download h2::after {
	content: none !important;
	display: none;
	height: 0;
	width: 0;
	margin: 0;
	outline: solid;
}