/* @group Reset / Common */

*{
	border:0;
	margin:0;
	padding:0;
	font-family: "Lucida Grande", Lucida, "Helvetica Nenu",Tahoma, sans-serif;
}
a{
	text-decoration:none;
	color:#ae7b2c;
	outline:none;
	-webkit-transition-duration: 500ms;
}
a:hover{
	color: #bc963d;
}
ul{
	list-style:none;
}

body{
	background-image: url('../images/background.png');
	height:100%;
}
h2{
	text-indent:-623em;
	display:block;
	overflow:hidden;
}
.hide{
	display:none;
}
aside,
nav,
footer{
	display: block;
}
/* My Comment */
/* @end */

/* @group Structure */

#wrapper{
	width:100%;
	position:absolute;
	top:50%;
	margin-top:-330px;
	height:0;
}
#content{
	width:890px;
	height:603px;
	margin:0 auto;
	background:url('../images/shadow.png') no-repeat;
	overflow:hidden; /* reduce extra hidden space*/
}
#mainContent,
#subContent,
#copyright{
	width:718px;
	margin:0 auto;
	position:relative;
}
#mainContent{
	top: 96px;
	background:url('../images/bg_main.png') repeat-x;
	height:403px;
	position: relative;
}
#subContent{
	top: 106px;
	background:url('../images/bg_sub.png') repeat-x;
	height:62px;
}

/* @end */

#messageBox{
	position: relative;
	top: 12px;
	left: 28px;
	width: 600px;
	height: 66px;
	background: rgb(249, 244, 218);
	margin: 20px auto -85px;
	border: 1px solid rgba(255,255,255,.2);
	-webkit-box-shadow: #6f5c41 0px 2px 4px;
	-moz-box-shadow: #6f5c41 0px 2px 4px;
	font-size: 11px;
	color: rgb(85, 78, 73);
	text-shadow: rgba(255,255,255,.6) 0px 1px 0px;
	line-height: 18px;
	-webkit-transform: rotate(1deg);
	z-index: 1001;
}
#messageBox img{
	position: relative;
	left: 40px;
	top: 20px;
}
#messageBox p{
	position: relative;
	left: 90px;
	top: -24px;
}
/* @group Works */

#mainCol{
	position:relative;
	padding:14px 15px;
	color:#322c27;
	text-shadow:#f7f5ef 0px 1px 0px;
	background: url(../images/vert_line.png) right 2px repeat-y;
	width:459px;
	height:373px;
	overflow:hidden;
}

#works{
	position:relative;
}
.work{
	display:table-cell;
	padding-right:15px;
	vertical-align: top;
}


/*#mainCol h2{
	background:url('../images/heading_works.png');
	width:75px;
	height:23px;
}*/

#mainCol p strong{
	font-size:14px;
	line-height:18px;
	margin-left:-1px;
}
#mainCol p strong small{
	font-size:10px;
	font-weight:normal;
}
#mainCol p {
	font-size:11px;
	line-height:16px;
	position:relative;
	left:7px;
	top: 14px;
}
/* @end */

/* @group Sidebar */

#subCol{
	position:absolute;
	top: 0px;
	right:0;
	width:229px;
}
#about h2{
	background:url('../images/heading_about.png');
	width: 140px;
	height: 27px;
	margin-bottom:3px;
}
#about{
	padding:15px 0;
}
#elsewhere{
	padding:11px 0;	
}
#about,
#elsewhere{
	font-size:11px;
	line-height:15px;
	color: #58534e;
	width:174px;
	margin:0 auto;
}
.break{
	background:url('../images/hoz_line.png') repeat-x;
	text-indent:-623em;
	height:4px;
	overflow:hidden;
	margin-top:3px;
}
#elsewhere h2{
	background:url('../images/heading_elsewhere.png');
	width: 113px;
	height: 22px;
}
#elsewhere ul{
	margin-top:12px;
	margin-left:-8px;
}
#elsewhere ul li{
	width:176px;
	padding:4px 8px;
	margin-top:4px;
}
#elsewhere ul li:hover{
	background:url('../images/sidebar_link_hover.png') no-repeat;
}
#elsewhere ul li a{
	text-indent:-623em;
	display:block;
	background-repeat:no-repeat;
	height:16px;
	width:170px;
}
#twitter{
	background-image:url('../images/link_twitter.png');
}
#flickr{
	background-image:url('../images/link_flickr.png');
}	
#quicksnapper{
	background-image:url('../images/link_quicksnapper.png');
}	
#email{
	background-image:url('../images/link_email.png');
}

	/* @group Twitter Bubble */
	#bubbleWrapper{
		position:relative;
		top: -3px;
		margin-bottom:-16px;
	}
	.bubble{
		position:relative;
		left:-4px;
		width:178px;
		color:#625f57;
		text-shadow:#fff 0px 1px 0px;
	}
	#elsewhere ol{
		margin:0 auto;
		padding:0 0 6px;
		list-style:none;
		width:150px;
		overflow:hidden;
		text-overflow: ellipsis;
	}
	#elsewhere ol li a{
		display:block;
	}
	#elsewhere ol li span a{
		display:inline;
	}
	#bubbleTop,
	#bubbleBtm{
		position:relative;
		text-indent:-623em;
	}
	#bubbleTop{
		background:url('../images/bubble_top.png') no-repeat;
	}
	#bubbleContent{
		background:url('../images/bubble_mid.png') repeat-y;	
	}
	#bubbleBtm{
		background:url('../images/bubble_btm.png') no-repeat;
	}
	/* @end */

/* @end */

/* @group Bottom Bar */
#subContent h2{
	background:url('../images/heading_goodies.png') no-repeat;
	width:101px;
	height:31px;
	position:relative;
	left:22px;
	top: 16px;
	float:left;
}
#thumbnails{
	position:relative;
	left:60px;
	top:5px;
	width:550px;
	height:60px;
	overflow:hidden;
}
#thumbnails li{
    float:left;
	margin-left:2px;
}
#thumbnails li img{
	width:56px;
}
#thumbnails .badge{
	height:19px;
	width:19px;
	position:relative;
	top:-57px;
	right:15px;
	margin-right:-19px;
	margin-bottom:-19px;
}
/* @end */

/* @group Goodies */

#mainContent .preview,
#mainContent .description{
	display:none;
}
#mainContent .preview{
	padding:15px 15px 10px;
	position:relative;
	width:459px;
	background: url(../images/vert_line.png) right 2px repeat-y;
}
#mainContent .preview img{
	border-bottom:1px solid #fcfbf9;
}
#mainContent .description{
	position:absolute;
	top: 0;
	right:0;
	width:200px;
	padding:24px 16px;
	color:#424c47;
	font-size:11px;
}
.description h3,
.description h4{
	text-shadow:#fcfbf9 0px 1px 0px
}
.description h3{
	color:#49403b;
	font-size:16px;
}
.description h4{
	font-size:12px;
	color:#69615b;
	text-transform:uppercase;
	margin:16px 0px 0px;
}

.description small{
	font-size:10px;
	color:#59514b;
}
.description p{
	margin:2px 0 4px;
	line-height:1.3em;
}
.description li{
	margin-bottom:4px;
	list-style:disc;
	margin-left:16px;
}
.description .download{
	display:block;
	margin-top:1.4em;
}

/* @end */

/* @group Copyright */
#copyright{
	height:0px;
	background-color:#333;
}
#copyright a{
	text-indent:-623em;
	background:url('../images/logo.png') no-repeat;
	display:block;
	width:16px;
	height:175px;
	position:relative;
	left:-25px;
	top:-165px;
}

/* @end */

#mainCol .work p{
	display: block;
	margin-top: -60px;
	text-shadow: rgba(0,0,0,.5) 0px -1px 0px;
	color: #666;
	text-align: center;
	font-size: 10px;
}
#mainCol .work p strong{
	color: #fff;
	font-weight: normal;
	font-size: 12px;
}
.work p a{
	color: #969797;
	font-size: 10px;
}
.work p a:hover{
	color: #fefdf7;
}