* { margin: 0; padding: 0; }

body { background: #FFF; color: #FFF; font: 62.5%/1.75 "Lucida Grande", "Trebuchet MS", sans-serif; text-align: center; position: relative; }

#margin { margin: 10px; background: #123 url(../img/bg_top.png) repeat-x;  }
#background { background: url(../img/decor.png) bottom left no-repeat; width: 100%; }
#container { display: none; padding: 100px 0; width: 920px; margin: 0 auto; text-align: left; }

#examples { background: #FFF; color: #033; display: block; font-size: 10px; margin-bottom: 10px; padding: 5px 20px; text-decoration: none; }
#exampleList { list-style: none; margin-bottom: 15px; }
#exampleList li { display: inline; }
#exampleList li a { color: #FFF; display: block; padding: 2px 20px; text-decoration: none; }
#exampleList li a:hover { text-decoration: underline; }

#examples.changed { background: #FFF; color: #033; float: left; font-size: 10px; left: 45px; padding: 5px 20px; position: relative; text-decoration: none; top: 10px; width: 100px; }
#exampleList.changed { float: left; left: 50px; list-style: none; margin-bottom: 0; position: relative; top: 13px; width: 250px; }
#exampleList.changed li a { border: 1px solid #264D4D; color: #FFF; display: block; float: left; font-size: 9px; width: 20px; height: 18px; text-decoration: none; margin-right: 3px; padding: 2px 0 0; }
#exampleList.changed li a.current, #exampleList.changed li a:hover { border: 1px solid #FFF; }
#exampleList.changed li a span { display: none; }
#outer-wrap { background: #CCC url(../img/bg_examples.png) bottom repeat-x; height: 0; overflow: hidden; padding-left: 55px; text-align: left; }
#inner-wrap { padding-top: 50px; width: 920px; text-align: left; }
	#left { background-color: #CCC; float: left; padding-top: 50px; width: 300px; }
	#desc p { color: #333; width: auto; }
	#desc p a { background: url(../img/icon_site.gif) no-repeat 0 1px; color: #F33; display: block; margin-bottom: 5px; padding-left: 20px; text-decoration: none; }
	#desc p a:hover { text-decoration: underline; }
	#main { background: #FFF; float: right; margin-right: 33px; padding: 5px; }

#content { padding-left: 315px; }
#content h3 { margin: 0; padding: 20px 0 5px; }
#content img { border: 1px solid #264D4D; margin-bottom: 10px; padding: 5px; }
#content a#linkedIn { border-bottom: 1px dotted #234D4D; display: inline; padding: 2px 0; text-decoration: none; }
#content a#linkedIn:hover { border-bottom: 1px dotted #FFF; }
#content a#linkedIn img { border: none; padding: 0; margin: 0; vertical-align: text-bottom; }
#contact { text-align: right; }
#contact img { padding: 0 5px 10px 0; }
#contact h2 { letter-spacing: normal; margin-bottom: 2px; }
#contact p { width: 100%; }
#contact a { color: #FFF; font-weight: bold; text-decoration: none; }
#footer { position: relative; }
#footer p { position: absolute; left: 315px; top: -42px; font-size: 9px; }

a { color: #FFF; display: block; }
h1 { font-size: 70px; letter-spacing: -1px; }
h1 strong { font-style: normal; opacity: .4; }
h2 { font-size: 20px; letter-spacing: 1px; margin-bottom: 5px; }
h2 strong { opacity: .4; }
h3 { color: #F33; font-size: 18px; font-weight: normal; letter-spacing: -1px; margin-bottom: 15px; }
p { font-size: 11px; margin-bottom: 20px; width: 525px; }
p.intro { width: 280px; }
p.phone { font-size: 15px; margin-bottom: 2px; opacity: .7; }
	
@media screen {
	.sIFR-flash { visibility: visible !important; 	margin: 0; padding: 0; }
	.sIFR-replaced, .sIFR-ignore { visibility: visible !important; }
	.sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; }
	.sIFR-replaced div.sIFR-fixfocus { margin: 0pt; padding: 0pt; overflow: auto; letter-spacing: 0px; float: none;	}
}
	
@media print {
	.sIFR-flash { display: none !important; height: 0; width: 0; position: absolute; overflow: hidden; }
	.sIFR-alternate { visibility: visible !important; display: block !important; position: static !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; }
}
	
@media screen {
	p.phone { opacity: 1; }
}