@charset "UTF-8";
/* CSS Document */
/* -------------------------------------------------------------------------------- */
/* Basic Construction */
/* -------------------------------------------------------------------------------- */
html {
	font-size: 13px;
	background: #111 url(../images/background-tile-4.png) repeat fixed center top;
	border: 0px solid #000;
}
body {
	width: 980px;
	margin: auto;
	position: relative;
	color: #fff;
}

div.clear {
	clear: both;
}
/* -------------------------------------------------------------------------------- */
/* Header & Footer */
/* -------------------------------------------------------------------------------- */
a#anchor-top {
	display: block;
	height: 39px;
}
div#header {
	background: #000 url(../images/alastair-warren-industrial-interaction.png) no-repeat 15px center;
	margin: 0px 39px 0 39px;
	padding-top: 15px;
	height: 40px;
}
div#footer {
	background: #000;
	margin: 78px 39px 0 39px;
	padding-top: 15px;
	height: 40px;
	position: relative;
}
div#header a, div#header span, div#footer a, div#footer span {
	display: block;
	float: left;
	text-decoration: none;
	height: 26px;
}
#bio-link {
	background: url(../images/industrial-designer-portfolio-resume-links.png) no-repeat;
	margin-left: 536px;
	width: 34px;
}
#bio-link:hover {
	background-position: left bottom;
}
#blog-link {
	background: url(../images/industrial-designer-portfolio-resume-links.png) no-repeat;
	background-position: -34px 0;
	width: 42px;
}
#blog-link:hover {
	background-position: -34px bottom;
}
#contact-link, #contact-link-bottom {
	background: url(../images/industrial-designer-portfolio-resume-links.png) no-repeat;
	background-position: -76px 0;
	width: 61px;
}
#contact-link:hover, #contact-link-bottom:hover {
	background-position: -76px bottom;
}
#link-spacer {
	background: url(../images/industrial-designer-portfolio-resume-links.png) no-repeat;
	background-position: -137px 0;
	width: 34px;
}
#resume-link-top, #resume-link-bottom {
	background: url(../images/industrial-designer-portfolio-resume-links.png) no-repeat;
	background-position: -171px 0;
	width: 58px;
}
#resume-link-top:hover, #resume-link-bottom:hover {
	background-position: -171px bottom;
}
#portfolio-link-top, #portfolio-link-bottom {
	background: url(../images/industrial-designer-portfolio-resume-links.png) no-repeat;
	background-position: -229px 0;
	width: 126px;
}
#portfolio-link-top:hover, #portfolio-link-bottom:hover {
	background-position: -229px bottom;
}
#back-to-top-link {
	margin-left: 485px;
	background: url(../images/industrial-designer-portfolio-resume-links.png) no-repeat;
	background-position: -350px 0;
	width: 84px;
}
#back-to-top-link:hover {
	background-position: -350px bottom;
}
/* -------------------------------------------------------------------------------- */
/* Message Boxes */
/* -------------------------------------------------------------------------------- */
div.message {
	margin: 6px 39px 0px 39px;
	padding: 15px 50px 15px 50px;
	color: #888;
	background: #000 url(../images/icon-info.png) no-repeat 15px center;
	line-height: 1.7;
}

h2 {
	padding-bottom: 3px;
	color: #fff;
	text-transform: uppercase;
}

div.job-looking h2 {
	color: #888;
}

div.message a {
	color: #888;
	text-decoration: none;
	border-bottom: 1px dotted #fff;
}

div.message a:hover {
	color: #a1b929;
	border-bottom: 1px solid #a1b929;
}

div.email-sent {
	background-image: url(../images/icon-accept.png);
}

div.email-sent h2 {
	color: #a1b929;
}

div.email-failed {
	background-image: url(../images/icon-cancel.png);
	background-position: 15px 28px;
}

div.email-failed h2 {
	color: #f55;
}

div.email-failed textarea {
	margin-top: 11px;
	width: 795px;
	height: 90px;
	padding: 2px 4px 2px 4px;
	font-family: "Helvetica Neue", Helvetica, Arial, "Luxi Sans", sans-serif;
	overflow: auto;
}

div.ie6 {
	background-image: url(../images/icon-cancel.png);
	background-position: 15px 28px;
	margin-top: 78px;
}

div.ie6 h2 {
	color: #f55;
}

div.ie6 p {
	padding-bottom: 10px;
}

/* -------------------------------------------------------------------------------- */
/* Section Separator */
/* -------------------------------------------------------------------------------- */
div#bio-separator {
	margin: 78px 39px 0 39px;
	text-align: center;
	color: #fff;
}
/* -------------------------------------------------------------------------------- */
/* Resume */
/* -------------------------------------------------------------------------------- */
div#resume-container-top {
	position: relative;
	margin-left: 39px;
	margin-top: -10px;
	padding-bottom: 10px;
}
	div#resume-container-top-inner {
		margin-bottom: 62px;
	}
		div.resume-image-arrow {
			background: transparent url(../images/resume-image-arrow.png) no-repeat 713px 1px; 
		}
		div#portfolio-introduction-resume-top {
			margin-top: 6px;
			margin-left: 0;
		}
/* -------------------------------------------------------------------------------- */
/* Contact */
/* -------------------------------------------------------------------------------- */
a#anchor-contact {
	position: absolute;
	margin-top: 0px;
}
div#contact-container {
	margin: 78px 39px 0px 39px;
	padding: 0 15px 39px 15px;
	background: #000;
	position: relative;
}
div#contact-container .column-1 {
	float: left;
	width: 235px;
	padding-right: 44px;
	padding-top: 63px;
	padding-left: 39px	
}
div#contact-container  p {
	line-height: 1.5;
}
div#contact-container .column-2 {
	float: left;
	padding-top: 63px;
	width: 520px; /* Should be 514px but allowing space for silly browsers */
	line-height: 0;
}
#contact-phone, #contact-email, #contact-skype, #contact-online {
	display: block;
	padding-left: 50px;
	margin: 10px;
	margin-left: 0;
	background: transparent url(../images/alastair-warren-design-portfolio-headings.png) no-repeat left 2px;
	color: #bbb;
}
#contact-phone {
	margin-top: 20px;
}
#contact-email {
	background-position: left -29px;
}
#contact-skype {
	background-position: left -59px;
}
#contact-online {
	background-position: left -89px;
}
div#contact-container .column-1 span a {
	color: #bbb;
	margin-right: 5px;
	text-decoration: none;
	border-bottom: 1px dotted #555;
}
div#contact-container .column-1 span a:hover {
	color: #a1b926;
	border-bottom: 1px solid #a1b926;
}
/* -------------------------------------------------------------------------------- */
/* Contact Form */
/* -------------------------------------------------------------------------------- */
#sendemail {
	position: relative;
}
#emailname, #emailaddress, #emailbody {
	background: #fff;
	padding: 2px;
	border: 1px solid #fff;
}
#emailname, #emailaddress {
	background: #fff url(../images/contact-alastair-warren.png) no-repeat 4px 5px;
	height: 17px;
	margin-bottom: 2px;
	margin-top: 7px;
}
#emailname {
	margin-right: 2px;
	padding-left: 41px;
	width: 210px;	
}
#emailaddress {
	background-position: 4px -19px;
	padding-left: 43px;
	width: 210px;	
}
#emailbody {
	width: 504px;
	height: 90px;
	padding: 2px 4px 2px 4px;
	font-family: "Helvetica Neue", Helvetica, Arial, "Luxi Sans", sans-serif;
	overflow: auto;
}
#emailname:focus, #emailaddress:focus, #emailbody:focus {
	border: 1px solid #a1b926;
}
#submit {
	position: absolute;
	right: 8px;
	bottom: 2px;
	border: 0 none transparent;
	background: #a1b926 url(../images/contact-alastair-warren.png) no-repeat 5px -47px;
	width: 40px;
	height: 25px;
}
#submit:hover {
	background-position: 5px -77px;
	cursor: pointer;
}
/* -------------------------------------------------------------------------------- */
/* Bio */
/* -------------------------------------------------------------------------------- */
#bio-video-placeholder {
	margin: 78px 0 0 39px;
}
div.bio-introduction {
	margin: 6px 39px 0 39px;
	padding: 8px 15px 5px 15px;
	background: #000;
	margin-top: 6px;
	height: 20px;
}
div.bio-introduction h1 {
	background: url(../images/portfolio/jefferswood-bed-and-breakfast-website.png) no-repeat left center;
	font-size: 100%;
	font-weight: normal;
	color: #737373;
	padding-left: 110px;
}
/* -------------------------------------------------------------------------------- */
/* Portfolio Description */
/* -------------------------------------------------------------------------------- */
div#bio-description-container {
	margin: 0px 39px 39px 39px;
	padding: 0 15px 39px 15px;
	background: #000;
}
div#bio-description-container .column-1, div#bio-description-container .column-2, div#bio-description-container .column-3 {
	background: url(../images/work.png) no-repeat left 58px;
	width: 235px;
	padding-right: 44px;
	padding-top: 63px;
}
div#bio-description-container  p {
	line-height: 1.5;
}
div#bio-description-container .column-1 {
	background-position: 39px 58px;
	padding-left: 39px	
}
div#bio-description-container .column-2 {
	background-image: url(../images/play.png);
}
div#bio-description-container .column-3 {
	background-image: none;
	padding-right: 30px;
	margin-right: 0px;
	padding-top: 79px;
	letter-spacing: 0;
	line-height: 0;
	width: 237px;
}
div#bio-description-container .column-3 img {
	padding-left: 4px;
	padding-bottom: 4px;
}
/* -------------------------------------------------------------------------------- */
/* Credits */
/* -------------------------------------------------------------------------------- */
div#credits {
	margin-right: 39px;
	text-align: right;
	font-size: 80%;
	color: #000;
	padding-top: 5px;
	height: 34px;
}

div#credits p {
	padding-bottom: 3px;
}

div#credits:hover {
	color: #555;
	font-size: 80%;
}

div#credits a {
	color: #000;
	text-decoration: none;
	border-bottom: 1px dotted #000;
}
div#credits:hover  a {
	color: #555;
	border-color: #555;
}
div#credits a:hover {
	color: #a1b926;
	text-decoration: none;
	border-color: #a1b926;
}
/* -------------------------------------------------------------------------------- */
/* AddThis */
/* -------------------------------------------------------------------------------- */
div.addthis-toolbox-email {
	position: absolute;
	right: 98px;
	margin-top: -18px;
}
	div.addthis-toolbox-email a, div.addthis-toolbox-email a:hover {
		border: 0 none transparent;
	}
	div.addthis-toolbox-email #addthis-button-expand {
		margin-top: -1px;
		padding-right: 12px;
		margin-left: 1px;
	}
div.addthis-toolbox-footer {
	position: absolute;
	left: 380px;
	top: 19px;
}
#addthis-button-expand {
	height: 16px;
	width: 16px;
	background: url(../images/icon-up-arrow-off.png) no-repeat center top;
}
#addthis-button-expand:hover {
	background-image: url(../images/icon-up-arrow-on.png);
}