/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.7.0
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}

body{margin:10px;}h1{font-size:138.5%;}h2{font-size:123.1%;}h3{font-size:108%;}h1,h2,h3{margin:1em 0;}h1,h2,h3,h4,h5,h6,strong,dt{font-weight:bold;}optgroup{font-weight:normal;}abbr,acronym{border-bottom:1px dotted #000;cursor:help;}em{font-style:italic;}del{text-decoration:line-through;}blockquote,ul,ol,dl{margin:1em;}ol,ul,dl{margin-left:2em;}ol li{list-style:decimal outside;}ul li{list-style:disc outside;}dl dd{margin-left:1em;}th,td{border:1px solid #000;padding:.5em;}th{font-weight:bold;text-align:center;}caption{margin-bottom:.5em;text-align:center;}sup{vertical-align:super;}sub{vertical-align:sub;}p,fieldset,table,pre{margin-bottom:1em;}button,input[type="checkbox"],input[type="radio"],input[type="reset"],input[type="submit"]{padding:1px;}
/* End Yahoo Copyright */

/*HTML Styles*/
body, html {
	background: black url(images/redLeather.jpg) repeat left top;
	color: white;
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
}

body {border-top: 8px solid #3A0003;}

a {outline:none;}

/*Global Classes*/

.floatRight {float:right;}

.floatLeft {float:left;}

.clearBoth {clear:both;}

.alignCenter {
	margin-left:auto;
	margin-right:auto;
}

.alignTextCenter {text-align: center;}

.alignTextRight {text-align: right;}

.white {color: #FFF;}

.whitebg {background-color: #FFF;}

.black {color: #000;}

.blackbg {background-color: #000;}

.marginPaddingZero {
	margin:0;
	padding:0;
}

.imageReplacement {
	display:block;
	text-indent:-9000px;
}

.niceFont {font-family: "Berlin Sans FB", "Berlin Sans", Arial, Helvetica, sans-serif;}

/*Div's and Formatting*/

#header {
	header: 55px;
}

	h1#siteTitle {
		margin: 10px 0px 0px 35px;
		padding: 0px;
		background: transparent url(images/christopherJohnson.png) no-repeat left top;
		width: 300px;
		height: 20px;
	}
	
	h1#siteTitle a {display:block;width: 200px;}
	
	h2#siteDescription {
		margin: 5px 0px 0px 35px;
		padding: 0px;
		background: transparent url(images/siteDescription.png) no-repeat left top;
		width: 400px;
		height: 20px;
	}
	
	h2#siteDescription a {
		width: 350px;
		height: 10px;
		display: block;
	}

	#headerNavBar {}
	
	#headerNavBar ul {list-style:none; margin: 10px 0px 0px;padding:0px;}
	
	#headerNavBar ul li {list-style:none; float: left; padding:0px; position:relative;}
	
	li.page-item-8 { /*Home Link*/
		width: 150px;
		height: 74px;
		background: transparent url(images/home.png) no-repeat 0px 0px;
		display: block;
		text-indent: -9000px;/**/
		margin: 0px 0px 0px 52px;
		z-index: 0;
	}
	
	.home li.page-item-8 {z-index: 2 !important;}/**/
	
	li.page-item-8 a {
		width: 150px;
		height: 54px;
		display: block;
		margin-top: -10px;
	}
	
	/*These Styles only apply if the user is in the portfolio section or on a portfolio page, otherwise, these styles must be changed.*/
	li.page-item-6 { /*Portfolio Link*/
		width: 150px;
		height: 84px;
		background: transparent url(images/portfolio.png) no-repeat 0px 0px;
		display: block;
		text-indent: -9000px;/**/
		margin: -10px 0px 0px 100px;
		z-index: 2;
	}
	
	.home li.page-item-6 {z-index: 0 !important;}
	
	li.page-item-6 a {
		width: 150px;
		height: 54px;
		display: block;
	}
	
	/*These Styles only apply if the user is in the portfolio section or on a portfolio page, otherwise, these styles must be changed.*/
	li.page-item-10 { /*Meet Chris Link*/
		width: 150px;
		height: 84px;
		background: transparent url(images/meetchris.png) no-repeat 0px 0px;
		display: block;
		text-indent: -9000px;/**/
		margin: -10px 0px 0px 175px;
		z-index: 0;
	}
	
	.page-id-10 li.page-item-10 {z-index: 2 !important;}
	
	li.page-item-10 a {
		width: 140px;
		height: 54px;
		display: block;
	}

	#contact {
		display: block;
		/*margin: 0px 0px 0px 195px;*/
		position: absolute;
		z-index: 2;
		float: right;
		left: 771px;
		top: 26px;
	}

#wrapper {
	background: transparent url(images/notebookBackground.jpg) no-repeat left top;
	width: 950px;
	min-height: 670px;
	margin: 0px 0px 0px 20px;
	padding-top: 20px;
	position: relative;
	top: 40px;
	/*z-index: 1;*/
	color: #000;
	font-size: 90%;
}

#wrapper a {color:#3A0003; text-decoration:none;}

	#left {
		/*border: 1px solid red;*/
		width: 406px;
		min-height: 400px;
		z-index: 2;
		position: relative;
		clear:left;
		margin-top: -30px;
		padding: 0px 30px;
	}
	
	.pageNavTop {height: 20px; width: 200px;}
	
	.projectDate {
		margin-top: 0px;
		z-index: 3;
		height: 30px;
		color: #3A0003;
		font-weight: bold;
		/*padding-left: 10px;*/
	}
	
	.projectLink {
		width: 164px;
		height: 59px;
		background: transparent url(images/externalSite.png) no-repeat right center;
		padding: 0px;
		margin: -15px 20px 0px 0px;
	}
	
	.projectLink a {
		display: block;
		width: 164px;
		height: 59px;
	}
		
	
	h1.clientName {
		font-weight:normal;
		font-size: 22px;
		margin: 1.5em 0 .3em 0;
	}
	
	.leftCategories {
		height: 65px;
		margin-top: 10px;
	}
	
	.leftTags {
		/*margin-top: 10px;*/
	}
	
	.workDone, tags {font-size: 16px;}
	
	.leftScreenshot {margin-top: -10px;}
	
	.screenshotTape {position: relative; z-index:3; float: left; margin-left: 20px;}
	
	.screenshotText {margin-top: 10px; font-size: 80%; width: 140px; padding-right: 16px;}
	
	.screenshot {position: relative; z-index:2; float: left; margin-top: -25px;}
	
	#right {
		/*border: 1px solid red;*/
		width: 395px;
		min-height: 400px;
		z-index: 2;
		position: relative;
		margin-top: -30px;
		padding: 0px 10px 0px 5px;
	}
	
	.rightLogo {
		margin: -20px 0px 0px 10px;
		position: relative;
		z-index: 3;
	}
	
	.rightNotes {
		height: 180px;
		/*background: red;*/
		overflow: hidden;
		margin-left: 10px;
		font-size: 85%;
		line-height: 1.4em;
		padding: 0px 10px;
	}
	
	.rightNotes h3 {
		background: transparent url(images/writeSprite.png) no-repeat left top;
		width: 61px;
		height: 32px;
		margin: 10px 0px;
		padding: 0px;
	}
	
	.rightTestimonial {
		width: 422px;
		height: 323px;
		background: transparent url(images/notebackground.png) no-repeat left top;
	}
	
	.rightTestimonial h3 {
		background: transparent url(images/writeSprite.png) no-repeat 145px -33px;
		width: 320px;
		height: 32px;
		margin: 44px 0px -3px;
		padding: 0px;
	}
	
	p.rightTestimonialContent {
		padding: 0px 40px 0px 37px;
		margin-top: -10px;
		height: 150px;
		overflow: hidden;
	}
	
	.rightTestimonialAuthor {
		width: 300px;
	}
	
	/* Homepage Specific Styles */
	
	.homepage h1, .homepage h2, .homepage h3 {margin: 0px; padding: 0px;}
	
	h3#hpHello {
		width:102px;
		height: 32px;
		background: transparent url(images/homepageSprite.png) no-repeat left top;
	}
	
	h1#hpChristopherJohnson {
		width: 338px;
		height: 47px;
		background: transparent url(images/homepageSprite.png) no-repeat left -32px;
		position: relative;
		z-index:3;
	}
	
	#hpChrisImage {margin-top: -12px;position: relative;z-index:1;}
	
	h2#hpWebDesigner {
		width: 350px;
		height: 47px;
		background: transparent url(images/homepageSprite.png) no-repeat left -79px;
		margin-top: 10px;
	}
	
	h3#hpFreelance {
		width: 360px;
		height: 70px;
		background: transparent url(images/homepageSprite.png) no-repeat left -126px;
	}
	
	h3#hpIntroduce {
		width: 256px;
		height: 26px;
		background: transparent url(images/homepageSprite.png) no-repeat left -196px;
		margin: 15px 0px 0px 120px;
	}
	
	h3#hpIntroduce a {display: block; width: 256px; height: 26px;}
	
	#hpContactCard {
		position:relative;
		z-index:2;
		width: 333px;
		height: 157px;
		float: left;
		margin: 10px 0px 0px 35px;
	}
	
	a#hpContactLink {
		display:block;
		top: -20px;
		width: 333px;
		height: 157px;
		float: left;
		position: relative;
	}
	
	.homepage #right {width: 415px !important;}
	
	h2#hpFeaturedWork {
		width: 184px;
		height: 36px;
		background: transparent url(images/writeSprite.png) no-repeat left -64px;
		margin: -30px 0px 0px 20px;
	}
	
	h3#hpKeepingMeBusy {
		width: 222px;
		height: 21px;
		background: transparent url(images/homepageSprite.png) no-repeat left -222px;
		margin: 5px 0px 5px 20px;
	}
	
	.homepageScreenshot {
		width: 182px;
		height: 210px;
		overflow: hidden;
		margin: 0px 0px 5px 20px;
	}
	
	a.homepageScreenshotImageLink {
		display: block;
		background: #EDE1B5;
		border: 6px solid #3A0003;
		width: 154px;
		height: 154px;
		text-align: center;
		padding: 8px;
	}
	
	a.homepageScreenshotImageLink:hover {background: #4E260A;}
	
	a.homepageScreenshotBaseLink {
		font-style: italic;
		text-align: center;
		font-size: 15px;
		font-family: Times, serif;
		width: 170px;
		display: block;
		margin-top: 5px;
	}
	
	a.homepageScreenshotBaseLink:hover {text-decoration:underline !important;}
	
	h3#hpSeePortfolio {
		width: 207px;
		height: 21px;
		background: transparent url(images/homepageSprite.png) no-repeat left -243px;
		margin: 0px 0px 10px 200px;
	}
	
	h3#hpSeePortfolio a {
		display: block;
		width: 207px;
		height: 21px;
	}
	
	#hpOrView {
		width: 151px;
		height: 21px;
		background: transparent url(images/homepageSprite.png) no-repeat -209px -243px;
		margin: 0px 0px 0px 20px;
	}
	
	ul#hpCatView {
		list-style: none;
		margin: 0px 0px 0px 20px;
		padding: 0px;
	}
	
	ul#hpCatView li {
		list-style:none;
		float: left;
		margin: 0px 5px 5px 0px;
		padding: 2px;
		border: 1px solid #3A0003;
		background: #EDE1B5;
	}
	
	ul#hpCatView li:hover {background: #3A0003;}
	
	ul#hpCatView a:hover {color: #FFF;}
	
	/* Archive Page Specific Styles*/
	
	.archive #wrapper {padding-top: 35px !important;}
	
	.archiveContainerClass {
		width: 930px;
		height: 402px;
		background: transparent url(images/folder.png) no-repeat left top;
		position: relative;
	}
	
	#archiveContainer1 {z-index: 3;}
	
	#archiveContainer2 {z-index: 4; margin-top: -200px;}
	
	#archiveContainer3 {z-index: 5; margin-top: -200px;}
	
	#archiveContainer4 {z-index: 6; margin-top: -200px;}
	
	#archiveContainer5 {z-index: 7; margin-top: -200px;}
	
	#archiveContainer6 {z-index: 8; margin-top: -200px;}
	
	#archiveContainer7 {z-index: 9; margin-top: -200px;}
	
	#archiveContainer8 {z-index: 10; margin-top: -200px;}
	
	#archiveContainer9 {z-index: 11; margin-top: -200px;}
	
	#archiveContainer10 {z-index: 12; margin-top: -200px;}
	
	#archiveContainer11 {z-index: 13; margin-top: -200px;}
	
	#archiveContainer12 {z-index: 14; margin-top: -200px;}
	
	#archiveContainer13 {z-index: 15; margin-top: -200px;}
	
	#archiveContainer14 {z-index: 16; margin-top: -200px;}
	
	#archiveContainer15 {z-index: 17; margin-top: -200px;}
	
	#archiveContainer16 {z-index: 18; margin-top: -200px;}
	
	#archiveContainer17 {z-index: 19; margin-top: -200px;}
	
	#archiveContainer18 {z-index: 20; margin-top: -200px;}
	
	#archiveContainer19 {z-index: 21; margin-top: -200px;}
	
	#archiveContainer20 {z-index: 22; margin-top: -200px;}
	
	#rightArchive, #leftArchive {height: 220px; margin-top: -20px;}
	
	#leftArchive {
		width:395px;
		padding-left: 40px;	
		font-size: 85%;
	}	

	.even {margin-left: 20px;}
	
	.odd {}
	
	.archiveDate {/*height: 20px;*/}
	
	.archiveLogo {
		padding-top: 10px;
		height: 50px;
	}
	
	.archiveCategory, .archiveTag {padding: 10px 0px 0px 10px;}
	
	#rightArchive {
		width:440px;
		padding-left: 15px;
	}
	
	.archiveExcerpt {
		background: transparent url(images/notecardCropped.jpg) no-repeat left top;
		width: 380px;
		height: 249px;
	}
	
	h3.archiveNoteHeader {
		margin:0 0 5px 10px;
		background: transparent url(images/writeSprite.png) no-repeat left top;
		width: 61px;
		height: 32px;
	}
	
	.archiveScreenshotImage {margin: 0px 5px;}
	
	.archiveExcerpt p {font-size: 80%;}
	
	#contactPhone {}
	
	#contactFacebook {
		background: transparent url(images/contactIconSprite.png) no-repeat left -24px;
	}
	
	#contactLinkedIn {
		background: transparent url(images/contactIconSprite.png) no-repeat left -48px;
	}
	
	#contactTwitter {
		background: transparent url(images/contactIconSprite.png) no-repeat left -72px;
	}
	
	#contactBlog {
		background: transparent url(images/contactIconSprite.png) no-repeat left -96px;
	}
	
	#contactGoogleProfile {
		background: transparent url(images/contactIconSprite.png) no-repeat left -120px;
	}
	
	.contactLink {
		padding: 5px 0px 0px 30px;
		height: 19px;
		display: block;
		margin-top: 10px;
	}
	
.base {
	position: relative;
	height: 260px;
}

	.baseNavigation {
		z-index: 20;
		position: relative;
		width: 380px;
		height: 50px;
		/*background: transparent url(images/notecardCropped.jpg) no-repeat left top;*/
		margin: 20px 0px 0px 20px;
	}
	
	ol.wp-paginate {
		list-style: none;
	}
	
	ol.wp-paginate li {
		list-style: none;
		float: left;
	}
	
	.wp-paginate .title {margin-right: 10px;}
	
	.wp-paginate .page, .wp-paginate .next, .wp-paginate .prev {
		border: 1px solid #63320F;
		padding: .3em .5em;
		background: #3A0003;
		margin-right: 8px;
	}
	
	.wp-paginate .current {background: #63320F;}
	
	.wp-paginate a {
		color: white;
		text-decoration: none;
	}

	.baseViewRecent {
		margin: 15px 0 0 570px;
		position: relative;
		z-index: 20;
	}
	
#footer {
	position: relative;
	border-top: 29px solid #3A0003;
	background: #000;
	/*min-height: 250px;*/
	font-size: 80%;
	padding: 20px;
}

#footerLeftCol {
	width: 500px;
}