@import url('jquery-ui-1.8.17.custom.css');

* {
	font-family: 'tahoma', sans-serif;
}

body, div, p {
	background: #efefef;
}

.hidden { display: none; }

#container {
	min-width: 750px;
	max-width: 960px;
	position: relative;
}

nav {
	position: fixed;
	width: 130px;
	text-align: center;
	padding-top: 20px;
	z-index: 100;
}
	nav > a img {
		width: 100px;
		height: 100px;
		background: #000000;
		margin: 0px auto;
		border-radius: 10px;
		outline: none;
	}
	nav ul {
		margin: 0px;
		padding: 0px;
		text-align: left;
	}
		nav ul li {
			list-style: none;
		}
		nav #social {
			margin: 10px auto 10px auto;
			height: 25px;
			width: 100px;
		}
			nav #social li {
				display: inline;
				width: 25%;
				float: left;
				height: 25px;
				text-align: center;
			}
				nav #social li a {
					display: block;
					height: 25px;
					text-indent: -50em;
					overflow: hidden;
					background: url('/images/social_sprites.png') no-repeat;
					background-size: 100px 50px;
				}
					nav #social li a.twitter { background-position: 0 0; }
						nav #social li a.twitter:hover { background-position: 0 -26px; }
					nav #social li a.linkedin { background-position: -25px 0; }
						nav #social li a.linkedin:hover { background-position: -25px -26px; }
					nav #social li a.googleplus { background-position: -50px 0; }
						nav #social li a.googleplus:hover { background-position: -50px -26px; }
					nav #social li a.rss { background-position: -75px 0; }
						nav #social li a.rss:hover { background-position: -75px -26px; }
		nav #mainCats {

		}
			nav #mainCats li {
				margin: 10px 0px;
				font-size: 1.1em;
			}
				nav #mainCats li a {
					display: inline-block;
					background: #6d6e71;
					padding: 5px 15px 5px 10px;
					color: #ffffff;
					text-decoration: none;
					border-radius: 0 20px 20px 0;
				}
				nav #mainCats li a:hover {
					background: #fd6125;
				}
			nav #mainCats li ul {
				display: none;
			}

#main {
	margin: 0 0px 0 130px;
	position: relative;
}
	#main header {
		padding-top: 15px;
	}
		#main header h1 {
			margin: 0px 0px 20px 0px;
			font-family: 'Lobster', cursive;
			font-size: 3em;
			color: #6d6e71;
		}
			#main header h1 span {
				display: none;
				float: left;
				background: #000000;
				width: 30px;
				height: 30px;
				margin: 14px 10px 0px 0px;
				background: url('/images/grabber.png') no-repeat;
				background-size: 30px 30px;
			}
		#main header form {
			float: right;
			width: 240px;
			margin-top: 10px;
		}
			#main header form input {
				border-radius: 15px;
				font-size: 1.2em;
				height: 28px;
				margin-left: 5px;
				outline: none;
				padding-left: 10px;
			}

				/* auto complete */
				.ui-widget-content {
					background: #ffffff;
					border: 1px solid #cccccc;
					border-radius: 0px 0px auto auto;
					box-shadow: 0 3px 5px 0px rgba(100,100,100,.5);
				}
					.ui-menu-item {
						height: 25px;
					}
					.ui-state-hover {
						border: 1px solid #fd6125;
						background-color: #fd6125;
						font-weight: bold;
						color: #ffffff !important;
						cursor: pointer;
					}

	#main #content {
		
	}
		#main #content #itemList {
			margin: 0px;
			padding: 0px;
		}
			#main #content #itemList li {
				list-style: none;
				margin-left: 0px;
				padding: 5px;
				border-bottom: 1px solid #dedede;
				font-size: 1em;
			}
				#main #content #itemList li:hover {
					background: #dedede;
				}
				#main #content #itemList li a {
					color: #6d6e71;
				}
				#main #content #itemList li a:hover,
				#main #content #itemList li a:visited:hover
				{
					color: #fd6125;
				}
				#main #content #itemList li span {
					float: right;
					font-size: .8em;
				}
			#main #content #postMetrics {
				border-bottom: 1px solid #bbbbbb;
				margin-bottom: 10px;
				/*
				height: 40px;
				overflow: hidden;
				*/
			}
				#main #content #postMetrics h2 {
					margin: 0px auto 10px auto;
					font-family: 'Open Sans Condensed', sans-serif;
					font-size: 2em;
					color: #6d6e71;
				}
				#main #content #postMetrics p {
					margin: 0px 0px 10px 0px;
					color: #9BA09E;
					background: none;
				}
					#main #content #postMetrics p a {
						color: #9BA09E;
					}
						#main #content #postMetrics p a:hover {
							color: #fd6125;
						}

		#main #content p,
		#main #content blockquote,
		#main #content ul,
		#main #content ol
		{
			font-size: 1.2em;
			color: #6d6e71;
			margin: auto auto 15px auto;
			line-height: 1.5em;
		}
			#main #content ul ul,
			#main #content ol ul,
			#main #content ol ol,
			#main #content ul ol
			{
				font-size: 1em;
			}
			#main #content p a {
				color: #222222;
			}
			#main #content p a:hover,
			#main #content p a:visited:hover
			{
				color: #fd6125;
			}
		#main #content h3,
		#main #content h4
		{
			font-size: 1.6em;
			font-family: 'Open Sans Condensed', sans-serif;
			margin: auto auto 5px auto;
			text-align: left;
			color: #4F4F51;
			padding-bottom: 5px;
			border-bottom: 1px solid #4F4F51;
			clear: both;
		}
			#main #content p .codeBold,
			ul.codeBold li b
			{
				border-radius: 5px;
				border: 1px solid #444444;
				font: .8em/1em 'courier new',courier,monospace;
				color: #ffffff;
				background:#777777;
				padding: 3px 5px;
			}
		#main #content blockquote {
			background: url('../images/bg_blockquote.png') no-repeat;
			margin: auto 30px 15px 30px;
			font-style: italic;
		}



		#main #content ul li a {
			color: #222222;
		}
			#main #content ul li a:hover,
			#main #content ul li a:visited:hover
			{
				color: #fd6125;
			}

		#main #content ul li.psProTip {
			background: url('/images/icon_photoshop-pro-tip.png') no-repeat;
			padding-left: 20px;
			list-style: none;
			font-weight: bold;
		}

		.psProTip {
			background: url('/images/icon_photoshop-pro-tip.png') no-repeat;
			padding-left: 20px;
			font-weight: bold;
		}
			#main #content ul li,
			#main #content ol li
			{
				margin: auto 10px auto auto;
			}
				#main #content ul li img,
				#main #content ol li img
				{
					margin: 5px 0px 20px 0px;
				}
		#main #content .floatRight {
			float: right;
			margin: 0px 0px 0px 10px;
		}
		#main #content .floatLeft {
			float: left;
			margin: 0px 10px 10px 0px;
		}
		#main #content #relatedPosts {
			margin: 10px;
			padding: 10px;
		}
			#main #content #relatedPosts li {
				
			}
				#main #content #relatedPosts li a {
					color: #222222;
					font-size: 1em;
				}
				#main #content #relatedPosts li a:hover,
				#main #content #relatedPosts li a:visited:hover
				{
					color: #fd6125;
				}


/* CSS for embedded gists */
.gist {
	background: none;
}
	.gist-highlight {
		border-left: 3ex solid #eee;
		position: relative;
	}
		.gist-highlight pre {
			counter-reset: linenumbers;
			line-height: 2em;
		}
			.gist-highlight pre div:before {
				color: #aaa;
				content: counter(linenumbers);
				counter-increment: linenumbers;
				left: -3ex;
				position: absolute;
				text-align: right;
				width: 2.5ex;
			}
			.gist .gist-file .gist-data pre {
				background: none repeat scroll 0 0 transparent !important;
				border: medium none !important;
				font-family: 'Bitstream Vera Sans Mono','Courier',monospace;
				font-size: 1.1em;
				margin: 0 !important;
				padding: 0.25em 0.5em 0.5em !important;
			}
				.gist .gist-file .gist-data pre .line {
					background: #ffffff;
				}


/*
aside {
	width: 100px;
	border: 1px solid green;
	position: absolute;
	right: 0px;
	top: 0px;
	padding-top: 20px;
	display: none;
}
*/


footer {
	margin: 20px 100px 20px 130px;
	text-align: center;
	clear: both;
}

.errorImage {
	position: relative;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	cursor: pointer;
	-webkit-box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
	-moz-box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
	box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
}
.errorImage:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(253,97,37, 0.5);
	-moz-transition: all .3s linear;
	-webkit-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;
}


/* comments and comment form */
/*
* comments
*/

	#comments .singleComment {
		border: 1px solid #bbbbbb;
		padding: 10px;
		min-height: 60px;
		border-radius: 10px;
		margin: 10px;
	}

	#comments .blogOwner {
		background: #dddddd;
	}

		#comments .singleComment p {
			margin: auto auto 0 auto;
			background: none;
		}

		#comments .singleComment i {
			font-size: .9em;
		}

		#comments .singleComment .commenter {
			margin-top: 8px;
			padding-top: 2px;
			border-top: 1px dashed #666666;
		}

	#comments .noComment {
		padding: 5px;
		margin: 0px 0px 0px 10px;
	}

	#commentForm {
		margin: 20px 0 0 0;
		border-top: 1px solid #ffffff;
	}

		#commentForm form {
			margin-top: 10px;
		}

			#commentForm form .formRowNormal {
				height: 35px;
				line-height: 35px;
			}

				#commentForm form .formRowNormal label,
				#commentForm form .formRowNormal .formItem {
					font-weight: bold;
					float: left;
					width: 32%;
					text-align: center;
					margin-left: 6px;
					color: #6D6E71;
				}

				#commentForm form .formRowNormal .formItem input {
					width: 182px;
					border-radius: 15px;
					font-size: 1.2em;
					height: 30px;
					margin-left: 5px;
					outline: none;
					padding-left: 10px;
				}

					/* reset width for the subscribe checkbox */
					#commentForm form .formRowNormal #subscribe {
						width: 20px;
					}

			#commentForm form .formRowLarge {
				text-align: center;
			}

				#commentForm form .formRowLarge textarea {
					width: 600px;
					height: 100px;
					padding: 5px;
				}





/* contact form */
#contactFormContainer {

}

	#contactFormContainer form {

	}

		#contactFormContainer form p {
			line-height: 1.4em;
			margin-bottom: 20px;
		}
			#contactFormContainer form p.returnString {
				color: #fd6125 !important;
			}

		#contactFormContainer form div {
			width: 100%;
			line-height: 25px;
			clear: both;
			margin-bottom: 20px;
		}

			#contactFormContainer form div label {
				width: 100px;
				display: block;
				float: left;
				text-align: right;
				margin-right: 10px;
				font-weight: bold !important;
				height: 25px;
				color: #6D6E71;
			}

			#contactFormContainer form div input {
				width: 230px;
				height: 25px;
			}

			#contactFormContainer form div textarea {
				width: 400px;
				height: 200px;
			}




/* media queries */
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#container {
		min-width: 480px;
		max-width: 640px;
		position: relative;
	}
	nav {
		position: fixed;
		left: -130px;
		background: #cccccc;
		height: 100%;
		box-shadow: 3px 0px 5px 0px rgba(100,100,100,.5);
	}
	#main {
		margin: 0 10px 0 10px;
	}
		#main header form {
			display: none;
		}
		#main header h1 {
			font-size: 2.6em;
		}
			#main header h1 span {
				float: none;
				display: block;
			}
		#main #content #itemList li span {
			display: block;
		}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	#container {
		min-width: 320px;
		max-width: 480px;
		position: relative;
	}
	nav {
		position: fixed;
		left: -130px;
		background: #cccccc;
		height: 100%;
		box-shadow: 3px 0px 5px 0px rgba(100,100,100,.5);
	}
	#main {
		margin: 0 10px 0 10px;
	}
		#main header form {
			display: none;
		}
		#main header h1 {
			font-size: 2.6em;
		}
			#main header h1 span {
				display: block;
			}
		#main #content #itemList li span {
			float: none;
			display: block;
		}
}