/*-----------------------------------------------------------------------------------------------
GLOBAL RESET
-----------------------------------------------------------------------------------------------*/

* { border: 0; margin: 0; padding: 0; outline: none; }
a img, a img:hover { outline: none; border: none; }
a, a:hover { outline: none; border: none; text-decoration: none; cursor: pointer; }
ul { list-style: none; }
.clearfix { display: block; height: 1%; }
.clearfix:after { clear: both; content: '.'; display: block; visibility: hidden; height: 0; }

/*-----------------------------------------------------------------------------------------------
TYPOGRAPHY
-----------------------------------------------------------------------------------------------*/

body {
	font-family: Helvetica, Verdana, Arial, Sans-Serif;
	color: #353535;
	font-size: 12px;
	line-height: 18px;
	}
p a, em a, strong a, cite a { border-bottom: 1px dotted #b53282; padding: 0 0 1px 0; }
a:link, a:visited  { color: #b53282; }
a:hover { color: #d850a3; }
a:active { color: #961a66; }

/*-----------------------------------------------------------------------------------------------
STRUCTURE
-----------------------------------------------------------------------------------------------*/

html { background: url(images/bg_html.jpg) top left repeat; }
body { background: url(images/bg_body.png) top left repeat-x; opacity: 0; }
#page {
	position: relative;
	margin: 0 auto 40px auto;
	width: 940px;
	}
#header {
	position: relative;
	border-bottom: 5px solid #CCCDCC;
	width: 940px;
	height: 81px;
	margin: 6px auto 30px auto;
	float: left;
	}
#header h1 {
	position: absolute;
	bottom: 19px;
	left: 0;
	height: 18px;
	width: 146px;
	background: url(images/sprite.png) -10px -10px;
	text-indent: -9999px;
	}
#header h2, #header .projects {
	position: absolute;
	bottom: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 18px;
	font-weight: normal;
	}
#header em {
	position: absolute; left: 20px; top: -16px;
	color: #BABABA;
	font-size: 10px;
	line-height: 10px;
	font-style: normal;
	text-transform: uppercase;
	}
#header h2 {
	font-family: Georgia, Palatino, Times, Serif;
	left: 165px;
	color: #9A9A9A;
	}
#header .projects { right: 0px; }
#header .projects .project {
	position: relative;
	float: left;
	margin: 0 0 0 20px;
	}
#header .projects .project a {
	font-family: Georgia, Palatino, Times, Serif;
	color: #353535;
	}
#header .projects .project a:hover { color: #6A6A6A; }
#header .projects .project a:active { color: black; }
.popup {
	position: absolute;
	display: none;
	background: url(images/bg_popup.png) repeat;
	color: white;
	font-family: Georgia, Palatino, Times, Serif;
	font-size: 13px;
	line-height: 22px;
	font-style: normal;
	font-weight: normal;
	text-align: center;
	height: 22px;
	width: 160px;
	padding: 15px 10px 5px 10px;
	z-index: 10;
	}
#takeaway {
	position: relative;
	background: url(images/dig.jpg) #353535 top left;
	width: 940px;
	height: 250px;
	margin: 0 0 30px 0;
	float: left;
	opacity: 0;
	}
#takeaway a {
	position: absolute;
	bottom: 15px;
	background: url(images/glass.png) repeat;
	height: 32px;
	padding: 14px 15px;
	opacity: 0.7;
	}
#takeaway a em {
	display: block;
	color: #BABABA;
	font-size: 10px;
	line-height: 10px;
	font-style: normal;
	text-transform: uppercase;
	margin: 0 0 5px 0;
	}
#takeaway a strong {
	color: white;
	font-family: Georgia, Palatino, Times, Serif;
	font-size: 18px;
	line-height: 18px;
	font-style: normal;
	font-weight: normal;
	}
#sidebar {
	float: left;
	width: 239px;
	}
#sidebar h2 {
	color: #353535;
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
	padding: 0 15px 25px 0;
	margin: -4px 0 0 0;
	float: left;
	}
#sidebar #nav {
	border-top: 1px solid #D0CDC8;
	border-bottom: 1px solid white;
	width: 100%;
	float: left;
	}
#sidebar #nav li {
	border-top: 1px solid white;
	border-bottom: 1px solid #D0CDC8;
	line-height: 38px;
	width: 100%;
	float: left;
	}
#sidebar #nav li a {
	position: relative;
	color: #353535;
	font-weight: bold;
	text-shadow: 1px 1px 0 white;
	width: 210px;
	padding: 0 0 0 29px;
	float: left;
	}
#sidebar #nav li a:active {
	color: black;
	}
#sidebar #nav li a .icon {
	background: url(images/sprite.png);
	position: absolute; top: 11px; left: 0;
	width: 16px;
	height: 16px;
	}
#sidebar #nav li.resume a .icon { background-position: -10px -40px; }
#sidebar #nav li.lifestream a .icon { background-position: -36px -40px; }
#sidebar #nav li.work a .icon { background-position: -62px -40px; }
#sidebar #nav li.notebook a .icon { background-position: -88px -40px; }
#sidebar #cta {
	background: url(images/sprite.png) -8px -69px;
	width: 225px;
	height: 36px;
	margin: 18px 0 0 -2px;
	text-indent: -9999px;
	float: left;
	}
#sidebar #cta:hover { background-position: -8px -109px; }
#sidebar #cta:active { background-position: -8px -149px; }
#sidebar #tweet {
	background: url(images/twitter_top.png) top left no-repeat;
	width: 219px;
	margin: 15px 0 0 0;
	padding: 19px 0 0 0;
	float: left;
	}
#sidebar #tweet img {
	background: url(images/twitter_bg.png) top left;
	margin: 20px 0 0 -20px;
	padding: 0 102px 0 101px;
	}
#sidebar #tweet p {
	background: url(images/twitter_bg.png) top left;
	width: 179px;
	padding: 0 20px 30px 20px;
	float: left;
	}
#sidebar #tweet em {
	background: url(images/twitter_base.png) bottom left no-repeat;
	color: #a5a2a2;
	padding: 0 20px 30px 20px;
	margin: -20px 0 0 0;
	width: 179px;
	float: left;
	}
#lifestream {
	width: 219px;
	margin: 22px 0 0 0;
	float: left;
	}
#lifestream p {
	color: #353535;
	font-style: normal;
	width: 193px;
	float: left;
	}
#lifestream em {
	color: #9A9A9A;
	margin: 0 0 15px 0;
	float: left;
	}
#sidebar #follow {
	background: url(images/sprite.png) -8px -189px;
	font-style: italic;
	line-height: 29px;
	text-indent: -9999px;
	height: 33px;
	width: 225px;
	margin: 9px 0 0 -2px;
	float: left;
	}
#sidebar #follow:hover {
	background-position: -8px -225px;
	text-indent: 110px;
	}
#sidebar #follow:active {
	background-position: -8px -261px;
	text-indent: 110px;
	}
#content {
	border-left: 1px solid #D0CDC8;
	width: 680px;
	padding: 0 0 0 20px;
	float: left;
	}
#content h3 {
	color: #353535;
	font-family: Georgia, Palatino, Times, Serif;
	font-size: 22px;
	line-height: 26px;
	font-weight: normal;
	margin: -4px 0 15px 0;
	float: left;
	}
#content h4 {
	color: #9A9A9A;
	font-family: Georgia, Palatino, Times, Serif;
	font-size: 18px;
	line-height: 22px;
	font-weight: normal;
	float: left;
	}
#content h4 strong {
	color: #353535;
	font-weight: normal;
	}
#content h5 {
	color: #353535;
	font-family: Georgia, Palatino, Times, Serif;
	font-size: 28px;
	line-height: 28px;
	font-weight: normal;
	width: 100%;
	margin: 0 0 25px 0;
	float: left;
	}
#experience strong, #skills strong {
	width: 100%;
	margin: 0px 0 1px 0;
	float: left;
	}
#content em {
	font-family: Georgia, Palatino, Times, Serif;
	color: #777;
	font-size: 13px;
	font-style: normal;
	width: 100%;
	margin: 0 0 15px 0;
	float: left;
	}
#achievements em { width: 65px; clear: both; }
#achievements strong {
	margin: 0px 0 15px 0;
	float: left;
	}
#experience {
	width: 330px;
	margin: 31px 20px 10px 0;
	float: left;
	}
#experience div {
	position: relative;
	width: 265px;
	height: 50px;
	padding: 0 0 20px 65px;
	float: left;
	}
#experience a {
	background: url(images/sprite.png) -179px -10px;
	position: absolute; left: 0; top: 0;
	text-indent: -9999px;
	height: 50px;
	width: 50px;
	z-index: 2;
	}
#experience img {
	background: #353535;
	position: absolute; left: 0; top: 0;
	z-index: 1;
	}
#experience strong { margin: -2px 0 1px 0; }
#experience em { margin: 0; }
#content #skills {
	width: 330px;
	margin: 31px 0 10px 0;
	float: left;
	}
#achievements {
	border-top: 1px solid #d9d3cb;
	width: 700px;
	padding: 20px 0 0 0;
	float: left;
	}
#footer {
	color: #BABABA;
	font-size: 10px;
	line-height: 9px;
	font-style: normal;
	text-transform: uppercase;
	float: left;
	}
#footer cite { font-style: normal; }
#footer cite a { color: #BABABA; border: none; }
#footer a { margin: 0 10px 0 0; }