/* Resets */

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video, details, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	}									
article, aside, figure, footer, header, hgroup, nav, section, details, summary {display: block;}
img,
object,
embed {max-width: 100%;}
html {overflow-y: scroll;}
ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
input, select {vertical-align: middle;}
pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}
select, input, textarea {font: 99% sans-serif;}
table {font-size: inherit; font: 100%;}
small {font-size: 85%;}
strong {font-weight: bold;}
td, td img {vertical-align: top;} 
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
pre, code, kbd, samp {font-family: monospace, sans-serif;}
.clickable,
label, 
input[type=button], 
input[type=submit], 
input[type=file], 
button {cursor: pointer;}
button, input, select, textarea {margin: 0;}
button {width: auto; overflow: visible;}
.ie7 img {-ms-interpolation-mode: bicubic;}
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; } 
	
/* layout */

body {
	font-family: 'Open Sans Condensed', sans-serif;
	color: #555555;
	}

.wrapper {
	width: 600px;

	background: url(../images/body-bg.gif);
	}

header.main {
	background: url(../images/header-bg.gif);
	margin-bottom: -36px;
	}

footer {
	clear: both;
	background: #fff;
	text-align: center;
	padding: 25px 0;
	}
	
h1 {
	font-size: 48px;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #ffffff;
	text-align: center;
	line-height: 1;
	padding: 22px 0 38px;
	margin: 0;
	}

ol {
	padding: 0 0 8px;
	float: left;
	width: 100%;
	}

ol li {
	background: #fff;
	float: left;
	width: 572px;
	clear: both;
	margin: 10px 0 10px 15px;
	list-style-type: none;
	-webkit-box-shadow:  0 0 5px rgba(0, 0, 0, .23);
	box-shadow:  0 0 5px rgba(0, 0, 0, .23);
	}

ol li .step {
	float: left;
	width: 207px;
	color: #ff9900;
	font-size: 24px;
	text-align: center;
	padding: 0 10px;
	}
	
ol li .step .number {
	margin: 27px auto 5px;
	display: block;
	width: 55px;
	height: 55px;
	background: url(../images/circle.png) center center no-repeat;
	color: #fff;
	font: bold 48px/58px Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif;
	}

ol li iframe {
	float: right;
	margin: 8px 8px 8px 0;
	}