﻿#wholePage {
	background-image: url('../images/siteBackgroundBlog.jpg');
}

/* Banner ============================================================== */

#pageBanner {
	background-image: url('../images/blogBanner.jpg');
}

.pageTitleBlog {
	background-image: url('../images/blogPageTitleBack.jpg');
}

#mainPage {
	background-image: url('../images/blogMainPageBack.jpg');
}
#mainPage h1 {
	display: block;
	
	width: 536px;

	padding: 0px 0px;
	margin: 16px 32px 0px 32px;
}

#mainPageArticle {
	background-color: #0E0E0E;
	background-image: url('../images/blogArticleMainPageBack.jpg');
	background-position: right top;
	padding-top: 0px;
	margin-top: -100px;
}

.blogPost {
	color: #FFFFFF;
}

	/* Standard Blog Post ============================================================== */
	a.blogHomeBtn {
		position: absolute;
		top: 139px;
		left: 50%;
		margin-left: -506px;
		z-index: 100;
		
		opacity: 0;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
	}
		
	div.blogPost {
		width: 572px;
		padding-bottom: 160px;
		
		display: inline-block;
		float: left;
	}
	
	h1.blogPost {
		font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
		font-size: 20pt;
		font-weight: 600;
		letter-spacing: -1.5pt;
		
		margin: 0px 0px;
		padding: 0px 375px 8px 0px;
		display: block;

		line-height: 150%;
	}
	
	.blogPost > span {
		display: block;
		padding: 0px 0px 4px 0px;
		font-size: 10.5pt;
		line-height: 150%;
		
		letter-spacing: 0.03em;
	}
	
	.blogPost p {
		font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
		font-size: 11pt;
	/*	letter-spacing: 0.025em;*/
		
		font-weight: lighter;
		line-height: 200%;
		padding: 0px 0px;
		margin: 4px 0px;
	}
	
	.blogPost img {
		max-width: 572px;
	}
	
	.blogPost p {
		padding: 8px 0px;
	}
	
	.blogPost a {
		color: #FFCC00;
	}
	
	.blogPost span.postTime {
		color: #E3E3E3;
		font-size: 9pt;
	}

div.blogCommentForm {
	display: block;
	width: 528px;
	
	padding: 8px 22px;
	overflow: hidden;
	
	background-image: url('../images/blogCommentFormBack.png');
	margin-top: 0px;
}

	/* Add Blog Post Comment ============================================================== */
	
	h3.commentHeader {
		display: block;
		width: 572px;
		
		margin-bottom: 0px;
	}
	
	h3.addComment {
		display: block;
		width: 572px;
		
		padding-bottom: 4px;
		border-bottom: 2px solid #23A8F4;
		
		margin-bottom: 0px;
	}
	
	div.blogCommentFormLeft {
		width: 280px;
		
		display: inline-block;
		float: left;
		margin: 0px 0px;
		padding: 0px 0px;
	}
	
	div.blogCommentFormRight {
		width: 220px;
		
		display: inline-block;
		float: right;
		margin: 0px 0px;
		padding: 0px 0px;
	}

	div.blogCommentFormRight > p {
		width: 220px;
		line-height: 120%;
		
		font-size: 8pt;
		color: #E0E0E0;
		font-weight: 400;
		
		padding: 0px 0px;
		margin: 12px 0px 0px 0px;
	}

	div.blogCommentFormRight > p.error {
		color: #FF0000;	
	}
	
	div.blogCommentFormRight > p > span.working {
		color: #CCFF00;
	}

	div.blogCommentForm label {
		display: block;
	
		padding: 4px 0px 2px 0px;
		
		cursor: text;
		
		font-size: 9pt;
		color: #FFFFFF;
		
		font-weight: bold;
	}
	
	
	label.blogCommentText280{
		width: 280px;	
	}
	
	label.blogCommentText220 {
		width: 220px;
	}
	
	label.blogCommentText528 {
		width: 528px;
		clear: both;
		
	}
	
	div.blogCommentForm input {
		display: block;
		
		height: 26px;
		
		border: 0px none;
		margin: 0px 0px 0px 0px;
		padding: 2px 28px 0px 8px;
	
		background-position: top left;
		background-repeat: no-repeat;
		
		line-height: 26px;
		vertical-align: middle;
		
		font-size: 11pt;
		color: #FFFFFF;
	}
	
	div.blogCommentForm input[type="hidden"] {
		display: none;
	}
	
	input.blogCommentText280 {
		background-image: url(../images/blogCommentText280BackIdle.png);
		width: 244px;
	}
	
	input.blogCommentText220 {
		background-image: url(../images/blogCommentText220BackIdle.png);
		width: 184px;
	}
	
	textarea.blogCommentTextarea {
		display: block;
		overflow: auto;
		
		width: 512px;
		max-width: 512px;
		height: 185px;
		max-height: 185px;
		overflow: auto;
		
		border: 0px none;
		margin: 0px 0px 2px 0px;
		padding: 8px 8px;
		
		background-image: url(../images/blogCommentTextareaBack.png);
		background-repeat: no-repeat;
		
		line-height: 150%;
		vertical-align: middle;
		
		font-size: 10pt;
		color: #FFFFFF;
	}
	
	input[type="button"].blogCommentBtn {
		position: relative;
		left: 417px;
		
		cursor: pointer;
		
		width: 115px;
		height: 34px;
		
		padding: 0px 0px;
		margin: 12px 0px 3px 0px;
		
		border: 0px none;
		
		background-image: url(../images/blogCommentFormContributeBtn.png);
		background-position: left top;
		background-repeat: no-repeat;
	}
	
	input[type="button"].blogCommentBtn:hover {
		background-image: url(../images/blogCommentFormContributeBtnOver.png);
	}
	
	input[type="button"].blogCommentBtn:active {
		background-image: url(../images/blogCommentFormContributeBtnDown.png);
	}

#pageSplitImgBlog {
	display: inline-block;

	height: 569px;
	width: 2px;
	
	float: left;
	
	margin: 18px auto 0px 32px;
}

#pageSplitImgBlogIndex {
	display: inline-block;

	height: 569px;
	width: 2px;
	
	float: left;
	
	margin: 74px auto 0px 32px;
}


#blogRight {
	width: 327px;
	min-height: 500px;
	
	display: inline-block;
	float: right;
	
	padding: 18px 16px 32px 0px;
	margin: 0px 0px;
}

#blogRightIndex {
	width: 398px;
	min-height: 500px;
	
	display: inline-block;
	float: right;
	
	background-image: url(../images/KashiProfileBack.png);
	background-position: -2px 0px;
	background-repeat: no-repeat;
	
	padding: 0px 0px 160px 0px;
	margin: 48px 0px 160px 0px;
	
	position: relative;
}

	/* Standard Blog Comments ============================================================== */
	
	div.blogComment {
		background-image: url(../images/blogCommentBack.png);
		background-position: left bottom;
		background-repeat: repeat-x;
		
		padding: 10px 20px;
	}
	
	div.even {
		background-position: left top;
	}
	
	div.blogComment > a.avatar, div.blogComment > img {
		display: inline-block;
		padding: 4px 5px 5px 4px;
		background-image: url(../images/blogCommentImageBack.png);
		background-position: left top;
		background-repeat: no-repeat;
		
		margin: 0px 0px 0px -4px;
		
		vertical-align: top;
	}
	
	div.blogComment > span > a.authorLink {
		text-decoration: none;
		color: #23A8F4;
	}
	
	div.blogComment > span > a.authorLink:hover {
		text-decoration: underline;
	}
	
	div.blogComment > span > a.authorLink > img {
		margin: 0px 4px;
		opacity: 0.8;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
		filter: alpha(opacity=80);
	}
	
	div.blogComment > span > a.authorLink > img:hover {
		opacity: 1;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
	}
	
	div.blogComment span.comment {
		padding: 0px 0px;
		margin: 0px 0px 0px 10px;
		
		line-height: 175%;
		font-size: 10pt;
		
		color: #B2B2B2;
		
		width: 440px;
		display: inline-block;
	}
	
	div.blogComment span.blogCommentTime {
		font-size: 10pt;
		font-weight: 400;
		letter-spacing: -1pt;
		color: #6F6F6F;
				
		display: inline-block;
		width: 132px;
		text-align: right;
		
		margin: 0px 0px;
		padding: 0px 0px;
	}
	
	div.blogComment span.blogCommentAuthor {
		font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
		font-size: 14pt;
		font-weight: 600;
		letter-spacing: -1pt;

		color: #23A8F4;
		display: inline-block;
		width: 400px;	

		margin: 0px 0px;
		padding: 0px 0px;	
	}

	/* Standard Blog Statements ============================================================== */

	p.blogStatement {
		display: inline-block;
		width: 268px;
		overflow: hidden;
	
		background-image: url(../images/blogStatementsBack.png);
		background-position: left top;
		background-repeat: repeat-y;
		color: #FFFFFF;
		
		margin: 0px 0px 4px 9px;
		padding: 32px 16px 16px 32px;
		
		line-height: 200%;
		font-size: 10pt;
		
		opacity: 0;
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
	}
	
	p.blogStatement a {
		display: inline-block;
		float: right;
		
		height: 28px;

		margin-top: 0px;
		margin-right: -8px;
		
		padding: 4px 32px 0px 4px;
		line-height: 28px;
		vertical-align: bottom;
		
		font-size: 9pt;

		text-decoration: none;
		color: #1A1A1A;
		
		background-image: url(../images/tweetIcon.png);
		background-position: right 4px;
		background-repeat: no-repeat;		
	}
	
	p.blogStatement a:hover {
		color: #23A8F4;
		background-image: url(../images/tweetIconOver.png);
	}
	
	p.blogStatement a:active { color: #FFFFFF; }

	
#siteFooter {
	background-image: url('../images/blogFooterBack.jpg');
}	

	/* Blog Post Listing on Main Blog Page ============================================================== */
	
	#blogPostsExtended {
		width: 600px;
		
		margin: 48px -32px 160px -32px;
	
		display: inline-block;
		float: left;
		
		position: relative;
	}
	
	#blogPostsExtended > h2 {
		margin: 0px 0px 0px 32px;
	}
		#firstPost {
			width: 600px;
			height: 406px;
			
			color: #FFFFFF;
			
			margin: 0px 0px;
			padding: 0px 0px;

			background-image: url(../images/blogIndexFeatureBack.jpg);
			background-repeat: no-repeat;
		}
	
		#firstPost > div {
			width: 536px;
			margin: 0px 32px;
		}
		
		#firstPost > h2 {
			width: 536px;
			padding: 0px 0px;
			margin: 0px 32px;
			
			text-decoration: none;
			
			font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
			font-size: 18pt;
			font-weight: 600;
			letter-spacing: -1.5pt;
	
			color: #FFFFFF;
		}
		
		#firstPost > h2 > a {
			text-decoration: none;
			color: #FFFFFF;
		}
		
		#firstPost > a.featureImg > img {
			min-height: 178px;
			max-height: 178px;

			max-width: 536px;
			min-width: 536px;
		
			width: 536px;
			height: 178px;
		}
		
		#firstPost > a.featureImg {
			width: 546px;
			height: 188px;
			
			margin: 0px 27px 0px 27px;
			
			display: block;
			
			background-image: url(../images/blogIndexFeatureImageBack.jpg);
			background-repeat: no-repeat;
			padding: 5px 5px;
		}
		
		#firstPost p {
			font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
			font-size: 10pt;
			
			line-height: 175%;
			
			color: #FFFFFF;
		}
		
	
	#blogPostIndex {
		width: 600px;
		min-height: 500px;
		
		padding: 32px 0px 0px 0px;
		margin: 0px 0px 0px 0px;
		background-repeat: no-repeat;
	}
	
	.indexContinued {
		background-image: url(../images/blogIndexUnfeaturedBack.jpg);
	}
	
	h2.searchResults {
		width: 536px;
		margin: 0px 32px;
		
		font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
		font-size: 18pt;
		font-weight: 600;
		letter-spacing: -1.5pt;

		color: #FFFFFF;
	}
	
		#blogPostIndex  span.highlight {
			background-color: #FFCC00;
			color: #0E0E0E;
		}
		
		#blogPostIndex > div.blogBlurb {
			width: 536px;
			margin: 0px 32px 32px 32px;
		}
		
		#blogPostIndex > div.blogBlurb > h3 {
			margin: 0px 0px;
			padding: 2px 2px;
			display: block;
			width: 374px;
			height: 22px;
			overflow: hidden;
			float: right;
		}
		
		#blogPostIndex > div.blogBlurb > h3 > a {
			line-height: 22px;
			vertical-align: middle;
			
			color: #EDEDED;
			font-size: 13.5pt;
			
			font-weight: 600;
			letter-spacing: -1px;
			text-decoration: none;
		}
		
		#blogPostIndex > div.blogBlurb > h3 > a:hover {
			color: #FFFFFF;
		}
		
		#blogPostIndex > div.blogBlurb > a.unfeaturedBlogImage {
			display: inline-block;
			width: 162px;
			height: 162px;
			
			margin: 0px 0px 0px -7px;
			background-image: url(../images/blogIndexUnfeaturedImageBack.png);
			background-repeat: no-repeat;
		}
		
		
		#blogPostIndex > div.blogBlurb > a.unfeaturedBlogImage > img {
			width: 140px;
			height: 140px;
			
			margin: 7px auto auto 7px;
		}
		
		#blogPostIndex > div.blogBlurb > p {
			display: inline-block;
			width: 374px;
			height: 86px;
			overflow: hidden;

			color: #EDEDED;
			float: right;
			
			line-height: 23px;
			vertical-align: middle;
			margin: 4px 0px 8px 0px;
		}
		
		#blogPostIndex > div.blogBlurb > div {
			width: 374px;
			height: 28px;

			display: inline-block;
			float: right;
		
			margin: 0px 0px;
		}
		
	a.blogLinkBtn {
		display: inline-block;
		background-repeat: no-repeat;
		width: 86px;
		height: 18px;
		padding: 6px 16px 4px 30px;
		
		text-decoration: none;
		color: #D4D4D4;
		
		font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
		font-size: 12px;
		letter-spacing: -1px;
		line-height: 18px;
		vertical-align: middle;
	}
	
	a.blogLinkBtn:hover {
		color: #FFFFFF;
	}
	
	a.commentsBtn {
		width: 54px;
		background-image: url(../images/blogCommentsBtnBack.png);
	}
	
	a.continueReadingBtn {
		background-image: url(../images/blogContinueReadingBtn.png);
	}

	
	#blogPostsExtended div.pageNumbers {
		float: right;
	}
	
	#blogPostsExtended a.blogPageNumbers, #blogPostsExtended a.blogPageNumbersSelected {
		float: left;
		padding: 4px 8px;
		margin: 0px 0px 0px 1px;
		
		border-top: 2px solid #23A8F4;
		font-size: 12pt;
		font-weight: 500;
		
		text-decoration: none;
		
		color: #FFFFFF;
	}
	
	#blogPostsExtended a.blogPageNumbers:hover {
		border-top: 2px solid #FFFFFF;
		background-color: #FFFFFF;
		color: #23A8F4;
	}
	
	 #blogPostsExtended a.blogPageNumbersSelected {
		border-top: 2px solid #CECECE;
		background-color: #1A1A1A;
		color: #23A8F4;
	}
	
	#blogPostsExtended > h1 {
		padding: 0px 0px 16px 0px;
		margin: 0px 0px;
	}
	
	/* Kashi's Profile from Blog Right on Blog Index Page ============================================================== */
	
	#KashiProfile {
		width: 398px;
		height: 180px;
		overflow: hidden;
		padding: 0px 0px;
		
		position: relative;
	}

		#KashiProfile img {
			border: 0px none;
		}

		#KashiProfile h3 {
			margin: 0px 0px;
			padding: 0px 0px;

			width: 132px;
			height: 38px;
			
			position: absolute;
			left: 101px;
			top: 13px;
			
			font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
			font-size: 17pt;
			font-weight: 600;
			letter-spacing: -1.5pt;
			line-height: 20px;
	
			color: #FFFFFF;
		}
		
		#KashiProfile > a.kashiTie {
			position: absolute;
			left: 28px;
			top: 61px;
		}
		
		#KashiProfile > a.twitterBtn {
			position: absolute;
			left: 94px;
			top: 65px;
		}
		
		#KashiProfile > a.briefDesc {
			position: absolute;
			left: 94px;
			top: 104px;
		}
		
	/*Search Form from Blog Right on Blog Index Page ============================================================== */
	
		#blogIndexSearch {
			width: 344px;
			height: 76px;
			
			padding: 21px 25px 21px 33px;
			margin: -1px 0px -1px -1px;
			
			background-image: url(../images/blogIndexSearchBack.png);
			background-repeat: no-repeat;
		}
		
		#blogIndexSearch label {
			display: block;
			padding: 0px 2px 2px 2px;
			
			width: 297px;
			margin: 0px 0px;

			cursor: text;
			
			font-size: 9pt;
			
			color: #FFFFFF;
			
			font-weight: bold;
		}
		
		#blogIndexSearch input[type="text"] {
			display: inline-block;
			
			height: 26px;
			
			border: 0px none;
			margin: 0px 0px;
			padding: 2px 8px 0px 8px;
		
		
			background-image: url(../images/searchTextBack.png);
			width: 281px;
			
			background-position: top left;
			background-repeat: no-repeat;
			
			line-height: 26px;
			vertical-align: middle;
			
			font-size: 11pt;
			color: #FFFFFF;
		}
		
		#blogIndexSearch input[type="submit"] {
			display: inline-block;
			width: 39px;
			height: 36px;
			
			float: right;					
			background: transparent;
			
			background-image: url(../images/blogIndexSearchGoBtn.png);
			background-position: left top;
			background-repeat: no-repeat;
			overflow: hidden;
			
			border: 0px none;
		}
	
	/* Blog Right on Main Blog Page ============================================================== */
	
	ul.popularTags {
		list-style-type: none;
		text-indent: 0px;
	}
	
	ul.popularTags > li {
		display: inline-block;
		float: right;
		padding: 2px 0px 0px 12px;
		margin: 0px 8px 8px 0px;
		
		max-width: 271px;
		height: 48px;
		
		text-align: right;
		line-height: 64px;
		font-size: 50px;
		
		cursor: pointer;
		
		overflow: hidden;
		
		color: #FFFFFF;
	}
	
	ul.popularTags > li:hover {
		background-image: url(../images/blogSquareBack.gif);
		border-left: 2px solid #23a8f4;
		padding: 2px 0px 0px 10px;
	}