@charset "utf-8";

ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
	margin:0;
	padding:0;
	font-size:inherit;
	list-style:none;
	font-weight:normal;
}

a img {
	border:0;
}

/* phark elements */
#logo,
#imWes,
#homeSubtitle,
#littleAboutMyself,
#dontTakeMyWordForIt,
#getInTouch{
	text-indent:-9999em;
	overflow:hidden;
	text-align:left;
}

html {
	background:#bcc1c6 url(../images/bg.png) repeat-x;
}

body {
	background:url(../images/bg_top.png) no-repeat top center;
	margin:0;
	padding:20px 30px 30px;
	font:13px/18px Arial, Helvetica, sans-serif;
	color:#141414;
}

#page {
	width:800px;
	margin:0 auto;
}

#mainContent p {
	margin:0 0 15px;
}

/* -- Header ----------------------------------- */
#header {
	font-size:15px;
	color:#25333e;
	text-shadow:1px 1px 1px #fff;
	overflow:hidden;
}

#header a {
	text-decoration:none;
	color:#25333e;
}

#logo {
	display:block;
	background:url(../images/wesruv.png) no-repeat;
	width:137px;
	height:45px;
	float:left;
}

ul#primaryNav {
	float:left;
	margin:0 0 0 27px;
}

ul#primaryNav li {
	float:left;
	margin:0 13px 0 0;
	background:url(../images/menu_bg.png) repeat-x 0 -122px;
}

ul#primaryNav li a {
	display:block;
	background:url(../images/menu_left.png) no-repeat left -132px;
}

ul#primaryNav li a span {
	display:block;
	background:url(../images/menu_right.png) no-repeat right -132px;
}

ul#primaryNav li a span span {
	padding:9px 17px 19px;
}

ul#primaryNav li:hover {
	background:url(../images/menu_bg.png) repeat-x 0 -66px;
}

ul#primaryNav li:hover a {
	background:url(../images/menu_left.png) no-repeat left -66px;
	text-shadow:1px 1px 1px #fff;
}

ul#primaryNav li:hover a span span {
	background:url(../images/menu_right.png) no-repeat right -66px;
}

#page.portfolio ul#primaryNav li.portfolio,
#page.portfolio ul#primaryNav li.portfolio:hover,
#page.about ul#primaryNav li.about,
#page.about ul#primaryNav li.about:hover, 
#page.contact ul#primaryNav li.contact,
#page.contact ul#primaryNav li.contact:hover {
	background:url(../images/menu_bg.png) repeat-x;
}

#page.portfolio ul#primaryNav li.portfolio a,
#page.portfolio ul#primaryNav li.portfolio:hover a,
#page.about ul#primaryNav li.about a,
#page.about ul#primaryNav li.about:hover a,
#page.contact ul#primaryNav li.contact a,
#page.contact ul#primaryNav li.contact:hover a {
	background:url(../images/menu_left.png) no-repeat top left;
	color:#fff;
	text-shadow:1px 1px 1px #000;
}

#page.portfolio ul#primaryNav li.portfolio a span,
#page.portfolio ul#primaryNav li.portfolio:hover a span,
#page.about ul#primaryNav li.about a span,
#page.about ul#primaryNav li.about:hover a span,
#page.contact ul#primaryNav li.contact a span,
#page.contact ul#primaryNav li.contact:hover a span {
	background:url(../images/menu_right.png) no-repeat top right;
}

#page.portfolio ul#primaryNav li.portfolio a span span,
#page.portfolio ul#primaryNav li.portfolio:hover a span span,
#page.about ul#primaryNav li.about a span span,
#page.about ul#primaryNav li.about:hover a span span,
#page.contact ul#primaryNav li.contact a span span,
#page.contact ul#primaryNav li.contact:hover a span span {
	background:url(../images/menu_active_middle.png) no-repeat top center;
}

ul#ressyAndFolio {
	height:39px;
	overflow:hidden;
	float:right;
	margin:0 0 33px;
}

ul#ressyAndFolio:hover {
	height:72px;
	margin-bottom:0;
}

ul#ressyAndFolio a {
	text-shadow:1px 1px 1px #fff;
}

ul#ressyAndFolio .ressy {
	height:39px;
	background:url(../images/ressybu_bg.png) top left repeat-x;
}

ul#ressyAndFolio .ressy a {
	display:block;
	background:url(../images/ressybu_big-sides.png) no-repeat top left;
}

ul#ressyAndFolio .ressy a span {
	display:block;
	padding:9px 16px 12px 36px;
	background:url(../images/ressybu_small-sides.png) no-repeat top right;
}

ul#ressyAndFolio .ressy:hover,
ul#ressyAndFolio .ressy:hover a {
	background-position:0 -50px;
}

ul#ressyAndFolio .ressy:hover a span {
	background-position:right -50px;
}

ul#ressyAndFolio .folio {
	margin:0 4px;
	height:33px;
	background:url(../images/ressybu_bg.png) repeat-x 0 -100px;
}

ul#ressyAndFolio .folio a {
	display:block;
	background:url(../images/ressybu_small-sides.png) no-repeat left -100px;
}

ul#ressyAndFolio .folio a span {
	display:block;
	background:url(../images/ressybu_big-sides.png) no-repeat right -100px;
	font-size:12px;
	padding:6px 0 8px 13px;
}

ul#ressyAndFolio .folio:hover,
ul#ressyAndFolio .folio:hover a {
	background-position:0 -150px;
}

ul#ressyAndFolio .folio:hover a span {
	background-position:right -150px;
}

/* -- Button ----------------------------------*/
#page .button {
	background:url(../images/button_bg.png) repeat-x;
	display:inline-block;
	color:#fff;
	text-shadow:1px 1px 1px #000;
	text-decoration:none;
	font-size:15px;
}

#page .button div.inner1 {
	display:inline-block;
	background:url(../images/button_left.png) no-repeat;
	height:auto;
}

#page .button div div.inner2 {
	background:url(../images/button_right.png) no-repeat right top;
	display:inline-block;
	padding:8px 13px;
	height:auto;
}

/* -- Homepage ----------------------------------- */
h1#imWes {
	background:url(../images/home_headline.png) no-repeat;
	width:706px;
	height:47px;
	margin:16px 0 8px;
}

p#homeSubtitle {
	background:url(../images/home_subtitle.png) no-repeat;
	width:721px;
	height:43px;
	margin:0 0 48px;
}

p#homeSub{
	font-size:18px;
	line-height:24px;
	margin-bottom:25px;
}

#homeSub a{
	color:#206598;
	text-decoration:none;
	display:inline-block;
/*	background:#d9e1e7;
	padding:0 5px;*/
}

#homeSub a:hover{
/*	background:#e1eaf1;*/
}

/* -- Folio Containers ----------------------------------- */
ul.work {
	margin:0 0 -20px;
	overflow:visible;
}

ul.work li.folioPiece {
	overflow:visible;
	margin:0 0 50px;
}

ul.gallery li {
	display:none;
}

ul.work .primaryImage {
	float:left;
	display:block;
	margin:0 0 0 -3px;
}

ul.work .description {
	background:#cad0d4 url(../images/folio_content_bg.png) repeat-x bottom;
	margin:0 0 0 430px;
}

ul.work .description .inner1 {
	background:url(../images/folio_content_bottom-right.png) bottom right no-repeat;
	height:255px;
}

ul.work h3 {
	background:url(../images/folio_header_bg.png) repeat-y right;
	border-bottom:1px solid #3b464f;
	font:25px/32px Tahoma, Geneva, sans-serif;
	color:#fff;
	text-shadow:-1px -1px 1px #000;
}

ul.work h3 span {
	display:block;
	background:url(../images/folio_header_top.png) no-repeat right top;
	padding:8px 20px;
}

ul.work h4 {
	color:#fff;
	background:#55626e;
	border-top:1px solid #728290;
	border-bottom:1px solid #dfe4e8;
	text-shadow:-1px -1px 1px #000;
	padding:5px 20px;
	margin:0 1px 0 0;
}

ul.work .descriptionCopy {
	background:url(../images/folio_content_top-right.png) top right no-repeat;
	padding:10px 20px;
}

#infoGraphics.folioPiece{
    overflow:visible;
}

#infoGraphics.folioPiece .primaryImage{
    margin:0 0 0 -15px;
}


/* -- About ----------------------------------- */
.about p {
	font-size:15px;
	line-height:21px;
}

.about .skills {
	padding:0 0 0 25px;
	margin:-10px 0 15px;
}

.about .skills li {
	font-size:15px;
	line-height:21px;
	list-style:disc;
	margin:0 0 5px;
}

.about #mainContent a {
	color:#003d6c;
	text-decoration:none;
}

#myselfish {
	float:right;
	padding:25px 0 0;
	margin:0 0 0 30px;
}

#littleAboutMyself {
	background:url(../images/about_little-about-myself.png) no-repeat;
	width:379px;
	height:46px;
	margin:16px 0 10px;
}

#dontTakeMyWordForIt {
	background:url(../images/about_dont-take-my-word.png) no-repeat;
	width:305px;
	height:29px;
	clear:right;
	margin:45px 0 20px;
}

.quotes {
	margin:0 0 30px;
}

.quote {
	clear:left;
	overflow:hidden;
	width:720px;
	margin:0 0 30px;
}

.quote .avatar {
	float:left;
}

.quote .description {
	background:#cdd1d4 url(../images/about_quote-box_bg.png) top repeat-x;
	margin:0 0 0 90px;
}

.quote .description .inner1 {
	background:url(../images/about_quote-box_bg.png) bottom repeat-x;
}

.quote .description .inner2 {
	background:url(../images/about_quote-box_border.png) left repeat-y;
}

.quote .description .inner3 {
	background:url(../images/about_quote-box_border.png) right repeat-y;
}

.quote .description .inner4 {
	background:url(../images/about_quote-box_bottom-right.png) no-repeat bottom right;
}

.quote .description .inner5 {
	background:url(../images/about_quote-box_top-left.png) no-repeat top left;
}

.quote .description .inner6 {
	background:url(../images/about_quote-box_top-right.png) no-repeat top right;
	padding:12px 17px;
}

.about #mainContent .quote .description p {
	margin-bottom:5px;
}

.quote .credit {
	background:url(../images/about_quote-box_credit_bg.png) no-repeat;
	width:303px;
	height:55px;
	margin:0 0 0 90px;
	color:#fff;
	padding:11px 17px 0;
	float:left;
}

#mainContent .quote .credit p {
	text-shadow:1px 1px 1px #000;
	margin:0;
	padding:0;
	line-height:17px;
}

.quote .name {
	font-size:17px;
}

.quote .title {
	font-size:12px;
	color:#ddd;
}

#mainContent .quotes .button {
	margin:10px 0 0;
	color:#fff;
	float:right;
}

#mainContent .quotes .button div.inner1 div.inner2 {
	padding:6px 10px 6px 13px;
}

.quotes .button div.inner3 {
	background:url(../images/linked-in_logo.png) no-repeat right top;
	padding:2px 28px 2px 0;
}





/* -- Contact ----------------------------------- */
#page.contact{
	background:url(../images/contact_diagram.jpg) no-repeat right 120px;
}

#page.contact #getInTouch{
	background:url(../images/contact_get-in-touch.png) no-repeat;
	height:39px;
	width:235px;
	margin:0 0 20px;
}

#page.contact label{display:block;}

#page.contact .inputField{
	background:url(../images/contact_form-field.png);
    height:33px;
    text-align:center;
	width:360px;
    margin:5px 0 15px;
}

#page.contact .inputField input{
    font-size:16px;
    margin:5px 0 0;
    border:0px solid #fff;
    width:345px;
}

#page.contact .inputMessage{
	background:url(../images/contact_form-field_bg.png) repeat-y;
width:360px;
    margin:5px 0 15px;
}

#page.contact .inputMessage .inner1{
	background:url(../images/contact_form-field_top.png) no-repeat;
}

#page.contact .inputMessage .inner2{
	background:url(../images/contact_form-field_bottom.png) no-repeat bottom;
padding:6px 3px 3px;
text-align:center;
}

#page.contact .inputMessage textarea{
    border:1px solid #fff;
    font:14px/20px Aria, Helvetica, sans-serif;
    width:345px;
}

#page.contact #feedbackSubmit{
	margin:0 0 30px;
	padding:5px 8px;
}


#page.contact .successMessage, #page.contact .errorMessage {
    height:500px;
}

#page.contact h1{
    color:#3877a4;
    font-size:30px;
    line-height:32px;
    margin:0 0 10px;
}

#page.contact p{
    padding:0 470px 0 0;
    font-size:15px;
    line-height:21px;
}

#page.contact .errorMessage  h1, #page.contact .error{
    color:#8a2401;
}




#footer {
	clear:both;
	text-shadow:1px 1px 1px #fff;
	text-align:right;
	margin:0 20px;
}