/* @override http://ryanmnelson.com/_css/style.css */

/* ######  The Basics ###### */
body, html {
	background: black url(../_images/bg-body.png) repeat-x;
	text-align: center;
	margin: 0;
}
/* ######  Containers ###### */

#content-wrap {
	background: url(../_images/bg-page-wrap-outer.jpg) no-repeat center 0;
	xmin-height: 550px;
	margin-left: auto;
	margin-right: auto;
	min-width: 960px;
	text-align: left;
}

#header {
	height: 42px;
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	background: #cbe2f0 url(../_images/twitter-leftcap.png) no-repeat left top;
}
#page-top {
	display: block;
	position: relative;
	height: 320px;
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}
#page-main {
	display: block;
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	color: white;
	xoverflow: hidden;
	position: relative;
	overflow: hidden;
	padding-bottom: 40px;
}
#footer {
	height: 51px;
	background-image: url(../_images/bg-footer.png);
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	clear: both;
}
#ready.panel .wrapper,#tried.panel .wrapper {
	position: relative;
	top: 85px;
	left: 60px;
}
#no-browser.panel .wrapper {
	position: relative;
	top: 105px;
	left: 505px;
	float: left;
}

.col {
	width: 185px;
	margin-right: 18px;
	text-align: left;
	float: left;
	font: 13px/19px Tahoma;
}
#ready .col,#tried .col {
	width: 292px;
	float: none;
}

div#item-info {
	float: left;
	width: 340px;
	display: block;
	margin-left: 30px;
	margin-right: -30px;
}
div#info-wrap {
	xbackground: url(../_images/bg-highlight.png) no-repeat center top;
	xpadding-top: 20px;
	margin-top: 10px;
	text-align: center;
}
div#item-images {
	float: left;
	width: 530px;
	display: block;
	position: relative;
	padding-left: 50px;
	padding-bottom: 120px;
}
div.galleria_wrapper {
	width: 495px;
	height: 343px;
	background: url(../_images/bg-gallery.jpg) no-repeat;
	padding-left: 21px;
	padding-bottom: 21px;
}
p#breadcrumb {
	color: #c2daf0;
	font: italic 12px Tahoma;
	padding-top: 13px;
	padding-bottom: 13px;
	padding-left: 13px;
	margin-bottom: 0;
	letter-spacing: 1px;
	width: 943px;
	background-image: url(../_images/38opacity.png);
}
span.divider {
	background: url(../_images/divider.png) no-repeat 0 bottom;
	display: block;
	overflow: hidden;
	margin-left: 2px;
	margin-right: 2px;
	margin-bottom: 20px;
}
p#breadcrumb a {
	color: #c2daf0;
	font: italic 12px Tahoma;
	text-decoration: none;
}
p#breadcrumb a:hover {
	color: white;
}
p#breadcrumb em {
	color: white;
	font-weight: bold;
	font-style: italic;
	font-size: 14px;
}
img#clientlogo {
	margin-bottom: 20px;
	margin-top: 5px;
}
/* ######  Nav - Main ###### */
ul#nav {
	position: absolute;
	bottom: 0;
	left: 25px;
}
ul#nav li {
	float: left;
	display: block;
	cursor: hand;
}
ul#nav li span {
	cursor: hand;
}
ul#nav li a.nav-issues {
	background-position: 0 0;
	margin-right: 13px;
}

ul#nav li a.nav-experience {
	background-position: 0 126px;
	margin-right: 22px;
}

ul#nav li a.nav-about {
	background-position: 0 84px;
	margin-right: 16px;
}

ul#nav li a.nav-join {
	background-position: 0 42px;
}
ul#nav li a,
ul#nav li a .js-hover{
	display: block;
	xtext-indent: -9000px;
	height: 42px;
	width: 103px;
	float: left;
	background-image: url(../_images/nav-bg.jpg);
}
ul#nav li a * {
	display: none;
}
ul#nav li.selected a.nav-issues {
	background-position: 103px 0;
}
ul#nav li.selected a.nav-experience {
	background-position: 103px 126px;
}
ul#nav li.selected a.nav-about {
	background-position: 103px 84px;
}
ul#nav li.selected a.nav-join {
	background-position: 103px 42px;
}

/*hover will be disabled if js is on*/
ul#nav li.css-hover.not-selected a.nav-issues:hover,
ul#nav li a.nav-issues .js-hover {
	background-position: 206px 0;
}
ul#nav li.css-hover.not-selected a.nav-experience:hover,
ul#nav li a.nav-experience .js-hover {
	background-position: 206px 126px;
}
ul#nav li.css-hover.not-selected a.nav-about:hover,
ul#nav li a.nav-about .js-hover {
	background-position: 206px 84px;
}
ul#nav li.css-hover.not-selected a.nav-join:hover,
ul#nav li a.nav-join .js-hover {
	background-position: 206px 42px;
}

/* ######  Portfolio List ###### */
ul.portfolio {
	background: url(../_images/bg-portfolio-list.jpg) no-repeat center top;
	overflow: hidden;
	xmargin-top: 20px;
	margin-top: 20px;
	padding-top: 10px;
	width: 786px;
	display: block;
	margin-right: -40px;
}
ul.portfolio.print {
	background: url(../_images/bg-portfolio-list-print.jpg) no-repeat center top;
}
ul.portfolio li {
	width: 246px;
	height: 114px;
	background-image: url(../_images/bg-portfolio-item.png);
	margin-right: 15px;
	margin-bottom: 15px;
	position: relative;
	float: left;
}
ul.portfolio li a {
	width: 222px;
	height: 90px;
	display: block;
	color: white;
	text-decoration: none;
	background-repeat: no-repeat;
	position: relative;
	top: 12px;
	left: 12px;
	text-shadow: #323232 1px 1px 0;
	font: bold 15px Tahoma, "Helvetica Neue", Verdana, sans-serif;
}
ul.portfolio li a span {
	width: 222px;
	position: relative;
	background: url(../_images/portfolio-item-overlay.png) no-repeat;
	display: block;
	padding-left: 10px;
	height: 30px;
	padding-top: 60px;
}
ul.portfolio li a:hover span {
	background-image: url(../_images/portfolio-item-overlay-hover.png);
}

/* ######  Slider Issues ###### */
div#ready h2 {
	display: block;
	background: url(../_images/title-ready.png) no-repeat;
	text-indent: -9000px;
	position: absolute;
	width: 345px;
	height: 56px;
	left: 38px;
	top: 33px;
	margin-left: 20px;
}
div#no-browser h2 {
	display: block;
	background: url(../_images/title-no-browser.png) no-repeat;
	text-indent: -9000px;
	position: absolute;
	width: 437px;
	height: 56px;
	right: 17px;
	top: 63px;
}
div#tried h2 {
	display: block;
	background: url(../_images/title-tried.png) no-repeat;
	text-indent: -9000px;
	position: absolute;
	width: 345px;
	height: 56px;
	left: 38px;
	top: 33px;
	margin-left: 20px;
}
/* slider nav */

#slider .navigation {
	position: absolute;
	z-index: 99;
	width: 740px;
	top: 363px;
	left: 220px;
	display: block;
	text-align: center;
}

#slider .navigation li {
	float: left;
	display: block;
}
#slider .navigation li a:link, 
#slider .navigation li a:visited {
	position: relative;
	color: #dbefff;
	font: bold 12px "Trebuchet MS", "Helvetica Neue", Verdana, sans-serif;
	text-decoration: none;
	text-shadow: #000 0 1px 0;
	height: 28px;
	display: block;
	float: left;
	margin-right: 30px;
	padding-top: 6px;
	padding-left: 30px;
	padding-right: 23px;
}
#slider .navigation li a:hover {
	color: white;	
}
#slider .navigation li a.selected {
	background: url(../_images/bg-menu-secondary.png) no-repeat right top;
	text-shadow: #000 0 1px 0;
}
#slider .navigation li a.selected:hover {
	color: #dbefff;	
}
#slider .navigation li a span {
	display: block;
	left: 0;
	width: 26px;
	height: 28px;
	position: absolute;
	bottom: 0;
	xbackground-color: orange;
	top: 0;
	padding-top: 1px;
}
#slider .navigation li a.selected span {
	background: url(../_images/bg-menu-secondary.png) no-repeat left;
}

/* slider containrs */

#slider {
  width: 955px;
  margin: 0 auto;
  position: relative;
}

.scroll {
  height: 524px;
  overflow: auto;
  position: relative; /* fix for IE to respect overflow */
  clear: left;
  width: 954px;
  overflow-x:hidden:
}

.scrollContainer div.panel {
  height: 525px;
  width: 957px;
}

div#ready.panel {
	background: url(../_images/slide-yes.jpg) no-repeat right top;
}
div#no-browser.panel {
	background: url(../_images/slide-no-browser.jpg) no-repeat left top;
}
div#tried.panel {
	background: url(../_images/slide-tried.jpg) no-repeat 407px 0;
	position: relative;
}

.scrollButtons {
	display: none;
}
#slider a.button-next {
	width: 87px;
	height: 28px;
	text-indent: -9999px;
	background: url(../_images/button-next.png) no-repeat 0 top;
	display: block;
	float: right;
	margin-top: 20px;
}
#slider a.button-next:hover {
	background-position: 0 bottom;
}

/* ######  Top Images ###### */
.issues #top-image,
.experience #top-image,
.join #top-image {
	width: 313px;
	height: 309px;
	background-image: url(../_images/me.jpg);
	position: absolute;
	right: 39px;
	bottom: 1px;
}
.about #top-image {
	width: 326px;
	height: 309px;
	background-image: url(../_images/packed.jpg);
	position: absolute;
	right: 39px;
	bottom: 1px;
}
.xjoin #top-image {
	width: 215px;
	height: 219px;
	background-image: url(../_images/join-badge.jpg);
	position: absolute;
	right: 124px;
	bottom: 1px;
}

#top-intro {
	position: absolute;
	width: 547px;
	height: 106px;
	left: 32px;
	bottom: 65px;
	display: none;
}
.default.issues #top-intro {
	background-image: url(../_images/title-default-intro.png);
}
.default.experience #top-intro {
	background-image: url(../_images/title-default-experience.png);
}
.default.experience.Web #top-intro {
	background-image: url(../_images/title-default-web.png);
}
.default.experience.Print #top-intro {
	background-image: url(../_images/title-default-print.png);
}
.default.about #top-intro {
	background-image: url(../_images/title-default-about.png);
}
.default.join #top-intro {
	background-image: url(../_images/title-default-join.png);
}
img#logo-default {
	width: 475px;
	height: 110px;
	position: absolute;
	top: 12px;
	left: 10px;
}
/* ######  Typography ###### */
body {
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
h2 {
	color: #dbefff;
	font: italic bold 27px Cambria, Georgia, serif;
	text-shadow: black 1px 1px 0px;
}
h4, .panel p em {
	color: white;
	font: 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	display: block;
}
h3#Web,h3#Print {
	width: 127px;
	background: url(../_images/title-web.png) no-repeat;
	text-indent: -9000px;
	height: 130px;
	margin-right: 14px;
	display: block;
	margin-top: 30px;
	margin-left: 20px;
	float: left;
}
h3#Web {
	background: url(../_images/title-web.png) no-repeat right top;
	float: left;
}
h3#Print {
	background: url(../_images/title-print.png) no-repeat right top;
	margin-top: 30px;
}
p {
	color: #95a7b0;
	margin-bottom: 9px;
	line-height: 19px;
	font-size: 13px;
}
div#item-info p {
	padding-left: 58px;
	padding-top: 5px;
	color: white;
}
a {
	font-weight: bold;
	text-decoration: none;
	color: #0093ff;
	outline: none;	
}
a:hover {
	color: #ff861d;
}
#header p {
	margin-top: 0;
	position: relative;
	top: 7px;
	float: left;
	left: 71px;
	padding-left: 4px;
	padding-top: 7px;
	color: #29658a;
	font: italic 12px Georgia, "Times New Roman", Times, serif;
	height: 20px;
	padding-right: 10px;
	background: white url(../_images/twitter-rightcap.png) no-repeat right center;
}
#header p a:link {
	color: #0a2536;
	font-weight: bold;
	font-style: italic;
	padding-right: 5px;
	text-decoration: none;
}
#header p a:hover {
	color: #175982;	
}

h4#title-recently-dugg {
	display: block;
	width: 281px;
	height: 44px;
	top: 0;
	left: 0;
	background-image: url(../_images/title-recently-dugg.png);
	text-indent: -9000px;
}
#digg-widget-container a {
	font: 12px/15px "Trebuchet MS", "Helvetica Neue", Verdana, sans-serif;
	text-decoration: none;
}
#digg-widget-container h3 a {
	color: #b7ecff;
}
#digg-widget-container h3 a:hover {
	color: white;	
}
#digg-widget-container ul {
	margin-top: 45px;
}
#digg-widget-container ul li {
	padding-left: 40px;
	margin-bottom: 4px;
	padding-right: 20px;
	margin-left: 20px;
}
#digg-widget-container ul li a.digg-count {
	color: #454545;
	font-style: italic;
	display: block;
	float: left;
	margin-left: -40px;
	margin-top: 4px;
}
#digg-widget-container ul li a.digg-count:hover {
	color: #868686;	
}
#digg-widget-container a.digg-count span {
	display: none;
}
span#type {
	display: block;
	text-align: left;
}
span#url {
	display: block;
	background: url(../_images/label-url.png) no-repeat left center;
	height: 19px;
	text-align: left;
	padding-left: 58px;
	padding-top: 11px;
	margin-bottom: 6px;
	color: #474747;
	font-size: 13px;
	clear: both;
	padding-bottom: 5px;
}

#bio,#call-to-action {
	width: 352px;
	position: absolute;
	top: 30px;
	left: 20px;
	padding-left: 15px;
}
#call-to-action {
	background: url(../_images/bg-interested.jpg) no-repeat center bottom;
	padding-bottom: 170px;
}
#bio p,#call-to-action p {
	font-size: 13px;
	line-height: 28px;
	margin-bottom: 15px;
	color: white;
	z-index: 99;
	position: relative;
}
#bio p {
	font-family: Georgia, "Times New Roman", Times, serif;
}
#bio p.quote {
	display: block;
	background: url(../_images/bg-quote.jpg) no-repeat center top;
	font-size: 13px;
	line-height: 21px;
	padding-top: 16px;
	color: #a4bdd3;
	padding-right: 5px;
	padding-left: 30px;
}
#bio p.quote .name {
	color: #ffa200;
	font-weight: bold;
	display: block;
	font-size: 13px;
	margin-bottom: -3px;
	margin-top: 7px;
}
#bio p.quote .position {
	color: #3e4d56;
	font-size: 11px;
}
#bio span#photo {
	width: 180px;
	display: block;
	background: url(../_images/ryan.jpg) no-repeat;
	padding-top: 221px;
	font-size: 10px;
	color: #475263;
	margin-bottom: 3px;
	margin-right: 13px;
	float: right;
	position: relative;
	left: 5px;
}

#bio h3#whos-ryan {
	width: 188px;
	height: 219px;
	text-indent: -9999px;
	background-image: url(../_images/whos-ryan.jpg);
	margin-bottom: -87px;
	margin-left: -29px;
	position: relative;
	right: -5px;
}
#bio h3#title-critics {
	width: 250px;
	height: 29px;
	text-indent: -9999px;
	background-image: url(../_images/title-critics.png);
	margin-top: 40px;
}
div#resume,div#networking {
	width: 536px;
	top: 25px;
	right: 15px;
	padding-top: 30px;
	background: url(../_images/bg-resume.jpg) no-repeat;
	float: right;
	position: relative;
}
div#networking {
	display: block;
	padding-bottom: 80px;
}
div#networking a {
	color: #30496d;
	display: block;
	width: 300px;
	margin-bottom: 10px;
	height: 47px;
	margin-left: 70px;
}
div#networking a:hover {
	color: #0093ff;
}
div#networking a img {
	position: relative;
	bottom: -9px;
	margin-right: 8px;
}
div#resume h3#suits-squares {
	width: 250px;
	height: 29px;
	text-indent: -9999px;
	background-image: url(../_images/title-suits-squares.png);
	margin-left: 40px;
	margin-bottom: 10px;
	margin-top: 10px;
}
div#networking h3#find-me {
	width: 250px;
	height: 29px;
	text-indent: -9999px;
	margin-left: 50px;
	margin-bottom: 10px;
	margin-top: 10px;
	background: url(../_images/title-find-me.png) no-repeat;
}
div#call-to-action h3#interested {
	width: 250px;
	height: 29px;
	text-indent: -9999px;
	margin-left: 0;
	margin-top: 10px;
	background: url(../_images/title-interested.png) no-repeat;
}
div#resume h4 {
	padding-left: 110px;
	display: block;
	margin-left: 40px;
	padding-bottom: 30px;
	color: #54626e;
}
div#resume h4 em {
	font-weight: bold;
	color: #618dc2;
}
div#resume h4#year2009 {
	background: url(../_images/2009.png) no-repeat left top;
	margin-top: 0;
}
div#resume h4#year2008 {
	background: url(../_images/2008.png) no-repeat left top;
	margin-top: 0;
}
div#resume h4#year2007 {
	background: url(../_images/2007.png) no-repeat left top;
	margin-top: 0;
}
div#resume h4#year2006 {
	background: url(../_images/2006.png) no-repeat left top;
	margin-top: 0;
}
div#resume h4#year2005 {
	background: url(../_images/2005.png) no-repeat left top;
	margin-top: 0;
}
div#resume p.date {
	margin-left: 150px;
	margin-top: -30px;
	font-size: 11px;
}
div#resume ul.resume {
	margin-left: 167px;
	margin-right: 50px;
	font-size: 12px;
	color: #b1bcc7;
	margin-bottom: 30px;
	line-height: 17px;
	text-align: justify;
}
div#resume ul.resume li {
	list-style-type: circle;
	margin-bottom: 12px;
}
/* ######  Images ###### */
img#label-roles {
	float: left;
	margin-right: 4px;
	margin-top: 1px;
}
/* ######  Skill Ratings ###### */
ul#skills {
	display: block;
	overflow: hidden;
	margin-left: 66px;
	padding-left: 106px;
	background: url(../_images/label-skills.png) no-repeat left top;
	margin-bottom: 30px;
}
ul#skills li {
	display: block;
	width: 66px;
	float: left;
	position: relative;
	height: 169px;
	text-indent: -9999px;
	margin-left: -32px;
	background-position: left top;
	background-repeat: no-repeat;
}
ul#skills li#psd { background-image: url(../_images/label-psd.png); }
ul#skills li#js { background-image: url(../_images/label-js.png); }
ul#skills li#ai { background-image: url(../_images/label-ai.png); }
ul#skills li#wp { background-image: url(../_images/label-wp.png); }
ul#skills li#copywriting { background-image: url(../_images/label-copywriting.png); }
ul#skills li#php { background-image: url(../_images/label-php.png); }
ul#skills li#css { background-image: url(../_images/label-css.png); }
ul#skills li#fl { background-image: url(../_images/label-fl.png); }
ul#skills li#indd { background-image: url(../_images/label-indd.png); }
ul#skills li#strategy { background-image: url(../_images/label-strategy.png); }

ul#skills li span {
	width: 29px;
	height: 80px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: url(../_images/rating.png) no-repeat;
	border-right: 1px solid #0b0b15;
}
ul#skills li.rating-2 span { background-position: -29px; }
ul#skills li.rating-3 span { background-position: -58px; }
ul#skills li.rating-4 span { background-position: -87px; }
ul#skills li.rating-5 span { background-position: -116px; }

/* ######  Role & Type ###### */
ul#type {
	text-align: left;
}
ul#role {
	background: url(../_images/bg-highlight.png) no-repeat center top;
	padding-top: 10px;
	display: block;
	overflow: hidden;
	margin-bottom: 16px;
	position: relative;
}
ul#role li {
	display: block;
	height: 36px;
	padding-left: 16px;
	position: absolute;
	float: left;
}
ul#role li.item1 {
	left: 60px;
}
ul#role li.item2 {
	left: 100px;
}
ul#role li.item3 {
	left: 140px;
}
ul#role li.item4 {
	left: 180px;
}
ul#role li.item5 {
	left: 220px;
}
ul#role li.over {
	background: url(../_images/endcap-role.png) no-repeat;
	xmargin-right: -42px;
	z-index: 100;
}
ul#role li span {
	color: white;
	font: italic bold 12px Tahoma;
	float: left;
	display: block;
}
ul#role li span.wrap {
	height: 26px;
	display: block;
	padding-left: 19px;
	padding-right: 13px;
	padding-top: 10px;
	text-indent: -9000px;
}
ul#role li.over span.wrap {
	background: url(../_images/bg-role.png) no-repeat right;
}
ul#role li.over span.wrap {
	width: auto;
	text-indent: 0;
}
ul#role li span.leftcap {
	background: url(../_images/bg-roll.png) no-repeat right;
	height: 36px;
	width: 20px;
}
ul#role li span.icon {
	width: 29px;
	height: 28px;
	display: block;
	float: left;
	position: absolute;
	top: 4px;
	left: 4px;
}
ul#role li.ai span.icon {	background-image: url(../_images/icon-ai.png);}
ul#role li.blogger span.icon {background-image: url(../_images/icon-blogger.png); }
ul#role li.copywriting span.icon {background-image: url(../_images/icon-copywriting.png); }
ul#role li.css span.icon {background-image: url(../_images/icon-css.png); }
ul#role li.dw span.icon { background-image: url(../_images/icon-dw.png);}
ul#role li.fl span.icon {background-image: url(../_images/icon-fl.png); }
ul#role li.indd span.icon {background-image: url(../_images/icon-indd.png); }
ul#role li.id span.icon {background-image: url(../_images/icon-identity.png); }
ul#role li.js span.icon {background-image: url(../_images/icon-js.png); }
ul#role li.php span.icon {background-image: url(../_images/icon-php.png); }
ul#role li.psd span.icon {background-image: url(../_images/icon-psd.png); }
ul#role li.strategy span.icon {background-image: url(../_images/icon-strategy.png); }
ul#role li.wp span.icon {background-image: url(../_images/icon-wp.png); }

ul#role li {
	background-repeat: no-repeat;
}

/* ######  Forms ###### */
/* ######  Shortcuts ###### */