* { margin: 0; padding: 0; }
img { border: 0; }
.clear { clear: both; }
.floatleft { float: left; }
.floatright { float: right; }
.marginleft { margin-left: 10px; }
.marginright { margin-right: 10px; }
a img.img-border, .img-border { border: 4px solid #e8e8e8; }
a:hover img.img-border { border: 4px solid #555; }

body {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	color: #333333;
	background: url(img/bg-night.jpg) repeat top center;
	margin: 0;
	padding: 0;
	}
	
	p { 
		font-size: 14px; 
		line-height: 145%;
		margin-top: 10px;
		}	
		.up-btn {
			width: 18px;
			height: 18px;
			background: url(img/up-btn.gif) 0 0 no-repeat;
			position: absolute;
			right: 5px;
			bottom: 5px;
			display: block;
		}
		.up-btn:hover { background: transparent url(img/up-btn2.gif) 0 0 no-repeat !important;  }
		a.btn {	
			color: #555;
			background: url(img/btn-launch.png) no-repeat 0 0;
			text-decoration: none;
			text-align: center;
			display: block;
			width: 100px;
			height: 24px;
			line-height: 24px;
			}
		a.btn:hover {
			background: url(img/btn-launch.png) 0 -24px no-repeat;
			color: #FFF71A;
			}
	
#wrapper {
	background: url(img/j2-topbar-bg.jpg) repeat-x top center;
	}
	
	#header {
		background: url(img/j2-topbar.jpg) no-repeat top center;
		margin: 0 auto;
		width: 920px;
		height: 50px;
		padding: 80px 50px 0 50px;
		}
		#header a {
			float: left;
			}
		#nav {
			list-style-type: none;
			float: right;
			}
		#nav li {
			float: left;
			font-size: 13px;
			font-family: Helvetica, Arial, sans-serif;
			text-transform: capitalize;
			}
		#nav li a {	
			color: #555;
			background: url(img/button-bg.png) no-repeat 0 0;
			text-decoration: none;
			text-align: center;
			display: block;
			width: 82px;
			height: 24px;
			line-height: 24px;
			margin-right: 15px;
			}
		#nav li a:hover {
			background: url(img/button-bg.png) 0 -48px no-repeat;
			color: #FFF71A;
			}
		#nav li a.active {
			color: #999;
			background: url(img/button-bg.png) 0 -24px no-repeat;
			}

#container {
	margin: 0 auto;
	width: 920px;
	padding: 0 50px;
	}
		
#content {
	width: 550px;
	background: #fff;
	float: left;
	border: 10px solid #474747;
	}
		
	.theBox {
		border-bottom: 1px dashed #999;
		margin-left: -10px;
		padding: 25px 50px;
		position: relative;
		}
	#status {
		border-left: 10px solid #325A6A;
		background: url(img/icon-status.png) 5px 5px no-repeat;
		}
		#status a { color: #444; text-decoration: underline; }
		#status a:hover { color: #0085BB; background: #CADBED; }
	#link {
		border-left: 10px solid #6D4056;
		background: url(img/icon-link.png) 5px 5px no-repeat;
		}
		#link a { color: #C5307A; text-decoration: underline; }
		#link a:hover { color: #C5307A; background: #FFC0E3; }
		#link h3 a { text-decoration: none; color: #444; } 
	#video {
		border-left: 10px solid #736332;
		background: url(img/icon-video.png) 5px 5px no-repeat;
		}
		#video a { color: #C69500; text-decoration: underline; }
		#video a:hover { color: #C69500; background: #F5DA8C; }		
	#photo {
		border-left: 10px solid #6E3262;
		background: url(img/icon-photo.png) 5px 5px no-repeat;
		}
		#photo a { color: #534155; text-decoration: underline; }
		#photo a:hover { color: #9E21A7; background: #EDB2F1; }
	#blog {
		border-left: 10px solid #326942;
		background: url(img/icon-blog.png) 5px 5px no-repeat;
		}
		#blog a { color: #690; text-decoration: underline; }
		#blog a:hover { color: #690; background: #FF9; }		
	#doodle {
		border-left: 10px solid #713243;
		background: url(img/icon-doodle.png) 5px 5px no-repeat;
		}
		#doodle a { color: #C00; text-decoration: underline; }
		#doodle a:hover { color: #C00; background: #F79EA5; }
	#work {
		border-left: 10px solid #858585;
		background: url(img/icon-work.png) 5px 5px no-repeat;
		}					
		#work em {
			font-size: 11px; color: #777;
			}
	#me {
		border-left: 10px solid #585549;
		background: url(img/me.png) 5px 5px no-repeat;
		}
		#me a { color: #5C573F; text-decoration: underline; }
		#me a:hover { color: #5C573F; background: #D4D2C9; }
		#me img.my-photo {
			float: right;
			margin: 0 0 0 15px;
			padding: 5px;
			border: 1px solid #ccc;
			}					
		#me em {
			font-size: 11px; color: #777;
			}			

		p.date {
			position: absolute;
			right: 5px;
			top: 5px;
			font-size: 10px !important;
			padding: 0 !important;
			margin: 0 !important;
			color: #999;
		}	
		
		object {
			padding: 10px;
			background: #D9D9D9;
		}
		
h2 {
	font-size: 24px;
	color: #444;
	font-weight: bold;
	}
h3 {
	font-size: 18px;
	color: #444;
	font-weight: bold;
	}
h4 {
	font-size: 16px;
	font-weight: normal;
	color: #888;
	}
h5 {
	font-size: 14px;
	font-weight: bold;
	color: #777;
	}
h6 {
	font-size: 14px;
	font-weight: normal;
	color: #777;
	}

#special { height: 30px; margin-bottom: 1px; background: #222; width: 560px; padding-left: 10px; }
#special p { font-size: 11px; color: #555; line-height: 30px; }

#paginate {
       background: #474747;
       padding: 10px 10px 0 10px;
       width: 530px;
       }
#paginate a { color: #777; font-size: 12px; text-decoration: none; }
#paginate a:hover { color: #FFF71A; }
#paginate a.btn-new { float: left; width: 50%; display: block; }
#paginate a.btn-old { float: right; width: 50%; text-align: right; }
	
blockquote {
	background: #e8e8e8;
	padding: 15px;
margin: 10px 0 0 0;
font-size: 12px;
}
blockquote p { margin: 0 0 10px 0; font-size: 12px !important; }

#sidebar {
	width: 310px;
	float: right;
	background: url(img/tab-bg.gif) 0 0 no-repeat;
	padding-left: 10px;
	}
	
	#sidebar h2#recent-work {
		background: #FFF71A url(img/recent-work.jpg) 0 8px no-repeat;
		height: 35px;
		}
	#sidebar h2#recent-work span { display: none; }
	
	#small-work li {
		list-style-type: none;
		margin-bottom: 25px;
		}
		#small-work li h5 {
			margin: 4px 0 0 5px;
			padding: 0;
			}
		#small-work li p {
			color: #555;
			margin: 0 0 5px 5px;
			padding: 0;
			font-size: 12px;
			}
		#small-work li img {
			border: 5px solid #222;
			}
		/*#small-work li a:hover img { border: 5px solid #272727; }*/
	
	#work-list li {
		list-style-type: none;
		height: 35px;
		line-height: 35px;
		margin-bottom: 1px;
		}
	#work-list li a {
		background: #393939;
		text-decoration: none;
		padding-left: 15px;
		display: block;
		color: #BBB;
		font-size: 13px;
		}
	#work-list li a:hover {
		background: #111;
		color: #FFF71A;
		}
		
		.workImg-out {
			background:url(img/diag-bg.png) repeat 0 0;	
			filter:alpha(opacity=85);
			-moz-opacity:0.75;
			-khtml-opacity: 0.75;
			opacity: 0.75;	
		}
		.workImg-over {
			background:url(img/yellowborder.png) no-repeat 0 0;	
			filter:alpha(opacity=85);
			-moz-opacity:0.75;
			-khtml-opacity: 0.75;
			opacity: 0.75;
		}
		
		#widescreen {
			width: 900px;
			background: #fff;
			border: 10px solid #474747;
			}

#footer {
	clear: both;
	height: 100px;
}