body, p, h1, h2, h3, h4, img { margin: 0; padding: 0; }

body
{
	text-align: center;
	background: url(../img/bg.png) #484848;
	color: #d0d0d0;
	font: 16px/22px Cambria, Georgia, serif;
	letter-spacing: 1px;
}

p { margin-bottom: 22px; }

li { margin-bottom: 6px; }

ol, ul { margin-top: 22px; margin-bottom: 22px; }

ol ol, ol ul, ul ol, ul ul { margin-top: 6px; margin-bottom: 6px; }

.nobr { white-space: nowrap; }

#author { margin: 0.5em 0 0 0; letter-spacing: 1px; text-align: center; }
#summary { margin: 1.5em 0 3em 0; font-size: 120%; line-height: 1.5em; font-style: italic; letter-spacing: 1px; }
#details { margin: 0 0 22px; font-size: 80%; line-height: 1.5em; letter-spacing: 1px; text-align: center; }

a:link { text-decoration: underline; }
a:link { color: #00AEFF; }
a:visited { color: #CC00FF; }
a:hover { color: #006CFF; }
a:active { color: #FF0000; }

h1
{
	margin: 22px auto;
	font: 3em/1em Calibri, Arial, sans-serif;
	font-weight: bold;
	color: #181818;
	text-shadow: 0px 1px 1px #585858;
	text-align: center;
}

h2 { margin-top: 0; margin-bottom: 1em; font-size: 207%; font-weight: normal; letter-spacing: 2px; text-align: center; }
h3 { margin-top: 0; margin-bottom: 22px; font-size: 144%; font-weight: normal; letter-spacing: 1px; text-align: center; }
strong { font-weight: bold; color: white; }
dfn { font-weight: bold; font-style: italic; color: white; }
sup { font-size: 10px; line-height: 10px; vertical-align: top; }
h3 sup, h3 sub { font-size: 16px; line-height: 16px; }
h3 sup { vertical-align: 4px; }
h3 sub { vertical-align: -2px; }
h3 .section-number { margin: 0 20px; }

h1 a:link, h1 a:visited, h1 a:hover, h1 a:active
{
	margin: 2px;
	border: none;
	color: #181818;
	text-decoration: none;
	padding: 6px;
	outline: none;
}
h1 a:hover
{
	margin: 0px;
	border-top: 2px solid #585858;
	border-right: 2px solid #181818;
	border-bottom: 2px solid #181818;
	border-left: 2px solid #585858;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: rgba(255, 255, 255, 0.04);
}

cite { font-weight: normal; font-style: normal; }
cite.book { font-style: italic; }
cite.paper { font-weight: bold; }
cite.journal, cite.proceedings { font-style: italic; }
cite.volume { font-weight: bold; }

blockquote.pullquote { margin: 0 0 22px 0; font: 22px/33px Cambria, Georgia, serif; font-style: italic; font-weight: bold; }
blockquote.pullquote p { margin-bottom: 0; }
blockquote:before { content: open-quote; font-size: 42px; color: #909090; float: left; width: 0.5em; margin-left: -0.5em; }
blockquote:after { content: close-quote; font-size: 42px; color: #909090; float: right; width: 0.5em; margin-right: -0.5em; margin-top: -36px; }

#page { width: 1200px; margin: 0 auto; color: white; text-align: left; }


.main, .column, .fullwidth, .outside
{
	background-color: #181818;
	color: #d0d0d0;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	border-left: 1px solid #545454;
	border-right: 1px solid #545454;
	border-bottom: 1px solid #545454;
}

.main /* Must NOT have layout in IE or clearing fails if negative margin > float width */
{
	margin: 22px 219px 0;
	padding: 22px 20px 0;
	overflow: visible;
}

.fullwidth
{
	margin: 22px 0 0;
	padding: 22px 20px 0;
}

.twocolumn
{
	margin: 0;
}

.column
{
	width: 548px;
	margin: 22px 0 0;
	padding: 22px 20px 0;
}

.left { float: left; clear: left; }
.right { float: right; clear: right; }

.outside
{
	width: 160px;
	margin-top: 0;
	margin-bottom: 0;
	padding: 22px 20px 20px;
	position: relative;
	top: -20px;
}

.outside.left+.outside.left, .outside.right+.outside.right
{
	margin-top: 22px;
}

.outside, .footnote
{
	font: 14px/22px Calibri, Arial, sans-serif;
	color: #909090;
}

.outside.right
{
	margin-left: 40px;
	margin-right: -240px;
}

.outside.left
{
	margin-left: -240px;
	margin-right: 40px;
}

.footnote + .footnote
{
	margin-top: -11px;
}

.inside
{
	width: 200px;
	margin-top: 1px;
	margin-bottom: 22px;
}

.inside.left
{
	margin-left: 20px;
	margin-right: 40px;
}

.inside.right
{
	margin-left: 40px;
	margin-right: 20px;
}

.steplabel
{
	font-size: 48px;
	line-height: 48px;
	padding: 0 5px 5px;
	border: 1px solid #181818;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

/* Reverse out label text, matching a 0.6 perceived brightness (except for hues that can't go that high, when we choose a perceived brightness a little below the corresponding text colour. */
.steplabel.yellow-text      { color: black; background-color: #B68D00; }
.steplabel.green-text       { color: black; background-color: #00A666; }
.steplabel.blue-text        { color: black; background-color: #0097DD; }
.steplabel.blue-purple-text { color: black; background-color: #005FE0; }
.steplabel.purple-red-text  { color: black; background-color: #D20077; }
.steplabel.purple-text      { color: black; background-color: #BA00E9; }

.steplabel
{
	float: left;
	margin: 0 20px 11px 0;
}

.iconsteplabel
{
	padding-top: 10px;
}

.step
{
	float: left;
	width: 480px;
}

.left.step2of4 { position: relative; left: 203px; }
.left.step3of4 { position: relative; left: 407px; }
.left.step4of4 { position: relative; left: 610px; }

.mainstep
{
	float: left;
	width: 600px;
}

.stepclear { clear: left; font-size: 1px; line-height: 1px; margin: 0; }

.boxlabel { font-size: 120%; line-height: 120%; font-weight: normal; }

.centred { text-align: center; }
img.centred { margin-bottom: 22px; }

.centrebox { margin: 2em auto; }

.codesnippet { padding-left: 3em; white-space: pre; font-family: Consolas, "Lucida Console", monospace; font-size: 12px; line-height: 1.25em; }

/* Colour scheme: colours to match #d0d0d0 text in perceived brightness as closely as possible without distorting hue */
.red-text { color: #FF0000; }
.red-yellow-text { color: #FF8A00; }
.yellow-text { color: #F5BF00; }
.yellow-green-text { color: #B8D900; }
.green-text { color: #00E089; }
.green-blue-text { color: #00DBE3; }
.blue-text { color: #00AEFF; }
.blue-purple-text { color: #006CFF; }
.purple-text { color: #CC00FF; }
.purple-red-text { color: #FF0090; }

/* Auto-clearing */
.main:after, .twocolumn:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.main, .twocolumn { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .main, * html .twocolumn { height:1%; }
.main, .twocolumn { display:block; }
/* end clearfix */