* {
	padding: 0;
	text-decoration: none;
	border: none;
	list-style: none;
	margin: 0;
	outline: none;
}

html {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	-webkit-font-smoothing: antialiased;
}

body {
	background: #caccd0 url(i/bg.jpg) repeat;
	color: #434a50;
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 10px;
	margin-top: 40px;
}

@media only screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: none;
  }
}

#hahn {
	margin: auto;
	width: 780px;
}

h1 {
	font-family: 'Rancho', cursive;
	font-size: 8em;
	text-align: center;
}
	h1.essays {
		color: #fff;
		text-shadow: #222 1px 1px 2px;
	}
h2 {
	font-size: 2.3em;
	font-weight: normal;
	text-align: center;
	text-shadow: #fff 0 1px 0;
}
h3 {
	font-family: 'Rancho', cursive;
	font-size: 4em;
	font-weight: normal;
	text-align: center;
	padding: 10px 0 30px 0px;
}
	.portfolio-text h3  {
		font-family: 'Helvetica';
		font-size: 2.2em;
		font-weight: normal;
		text-align: left;
		padding: 20px 0 10px 0px;
	}
	h3.essays  {
		text-align: left;
		padding-bottom: 20px;
	}
h4 {
	font-size: 1.7em;
	font-weight: normal;
	padding: 0 0 10px 0;
	text-shadow: #fff 0 1px 0;
}
h6 {
	font-size: 1.1em;
	font-weight: normal;
	line-height: 18px;
	padding: 20px 0;
	text-shadow: #fff 0 1px 0;
}

p {
	font-size: 1.4em;
	line-height: 22px;
	text-shadow: #fff 0 1px 0;
}
p.about {
	font-size: 2.2em;
	line-height: 32px;
	text-align: justify;
	margin-bottom: 6px;
}

a {
	color: #121619;
	font-weight: normal;
	text-decoration: none;
	text-shadow: #fff 0 1px 0;
}
a:active {
	position: relative;
	top: 1px;
}
hr {
	border: 1px solid #ebecec;
	height: 1px;
}

#wrapper {
	background: #fff;
	overflow: hidden;
	width: 780px;
	-webkit-box-shadow: #333 0 1px 2px;
	-moz-box-shadow: #333 0 1px 2px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px; 
}

#main {
	float: left;
	width: 460px;
}
#title {
	margin: 60px 20px 0 20px;
	height: 120px;
	width: 740px;
}

#content-index {
	margin: 60px 40px 0 40px;
	}
	
.container {
	margin: 30px 0 30px 0;
	overflow: hidden;
}
	.me {
		float: right;
		border: 4px solid #fff;
		height: 168px;
		margin: 0 1px 1px 30px;
		width: 136px; 
		-webkit-box-shadow: #666 0 1px 2px;
		-moz-box-shadow: #666 0 1px 2px;
	}

.box {
	float: left;
	margin: 10px 47px 0 1px;
	width: 200px;
}
	.box-last {
		float: left;
		margin: 10px 0 0 0;
		width: 200px;
	}
	.portfolio-thumb {
		height: 150px;
		border: 1px solid #fff; 
		width: 200px;
		-webkit-box-shadow: #666 0 1px 2px;
		-moz-box-shadow: #666 0 1px 2px;
	}
		.portfolio-thumb:hover {
			-webkit-box-shadow: #333 0 1px 3px;
			-moz-box-shadow: #333 0 1px 3px;
		}
	.portfolio-link {
			margin: 10px 0;
			text-align: center; 
			width: 200px;
	
		}

#flickr_badge_wrapper {margin: 10px 0; width: 710px; height: 82px}
	#flickr_icon_td {padding:0 5px 0 0 !important;}
	.flickr_badge_image {text-align:justify !important;}
	.flickr_badge_image img {margin: 0 5px 0 0; border: 1px solid #fff; -webkit-box-shadow: #666 0 1px 2px;-moz-box-shadow: #666 0 1px 2px !important;}
	.flickr_badge_image img:hover {-webkit-box-shadow: #333 0 1px 3px;-moz-box-shadow: #333 0 1px 3px !important;}

/*Portfolio */

.portfolio-item {
	margin: 60px 0;
	height: 380px;
	position: relative;
}
	.portfolio-item .portfolio-text {
		padding: 40px 0 0 0;
		width: 200px;
	}
	.portfolio-item .portfolio-text p{
		padding: 20px 0;
	}
	.portfolio-item .webdesign-img {
		border: 1px solid #fff;
		float: right;
		height: 380px;
		margin: 0 -50px 0 0;
		position: relative;
		width: 500px;
		-webkit-box-shadow: #666 0 1px 2px;
		-moz-box-shadow: #666 0 1px 2px;
	}
		.portfolio-item .webdesign-img:hover {
			-webkit-box-shadow: #333 0 1px 2px;
			-moz-box-shadow: #333 0 1px 2px;
			margin: 0 -42px 0 0;;
		}
	.portfolio-item .printdesign-img {
		border: 1px solid #fff;
		float: right;
		height: 380px;
		margin: 0 -50px 0 0;
		position: relative;
		width: 500px;
		-webkit-box-shadow: #666 0 1px 2px;
		-moz-box-shadow: #666 0 1px 2px;
	}
		.portfolio-item .printdesign-img:hover {
			-webkit-box-shadow: #333 0 1px 2px;
			-moz-box-shadow: #333 0 1px 2px;
			margin: 0 -48px 0 0;;
		}
	
	
/*Essays */	

#wrapper-essays {
	background: url(i/wrapper-essays-bg.png) repeat;
	overflow: hidden;
	width: 780px;
	-webkit-box-shadow: #333 0 1px 2px;
	-moz-box-shadow: #333 0 1px 2px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px; 
	}

.essays-library-item {
	background: url(i/essays-library-item-bg.png) center bottom no-repeat;
	margin: 0 -40px 0 -40px;
	width: 780px;
	height: 420px;
}
.essays-library-item-paper {
	background: url(i/essays-item-paper-bg.jpg) repeat;
	border-bottom: #999 solid 1px;
	height: 292px;
	padding: 40px 20px 20px 20px;
	margin: 30px auto;
	width: 600px;
	-webkit-box-shadow: #555 0 -1px 10px;
	-moz-box-shadow: #555 0 -1px 10px;
}
	.essays-library-item-paper p {
		padding: 10px 0;
	}

.essays-item {
	background: url(i/essays-library-item-bg.png) center bottom no-repeat;
	margin: 0 -40px 0 -40px;
	padding: 0 0 37px 0;
	width: 780px;
}
.essays-item-paper {
	background: url(i/essays-item-paper-bg.jpg) repeat;
	border-bottom: #999 solid 1px;
	padding: 30px 20px 10px 20px;
	margin: 30px auto;
	width: 600px;
	-webkit-box-shadow: #555 0 -1px 10px;
	-moz-box-shadow: #555 0 -1px 10px;
}
	.essays-item-paper p {
		padding: 10px 0;
	}
	
#essay-FlattrButton {
	float: right;
}

#essay-slider {
	margin: 20px -40px 0 -40px;
}
	.essay-scroll {
		overflow: auto;
		position: relative; /* fix for IE to respect overflow */
	}
	.essay-scrollContainer div.panel {
		margin: 0 -118px 26px 0px;
		width: 780px; /* change to 560px if not using JS to remove rh.scroll */
	}
	
.essay-paper {
	background: url(i/essay-paper.jpg) no-repeat;
	margin: 26px auto 0 auto;
	height: 800px;
	padding: 48px 0 0 0;
	position: relative;
	width: 600px;
	-webkit-box-shadow: #333 1px 1px 4px;
	-moz-box-shadow: #333 1px 1px 4px;
}
	.essay-paper p {
		line-height: 24px;
		padding: 0 28px 0 34px;
		text-shadow: none;
	}	
	.essay-paper .date {
		font-size: 1.2em;
		line-height: 24px;
		padding: 0 28px 24px 34px;
		text-align: right;
		font-style: italic;
	}
	
#essay-navigation {
		text-align: center;
	}
		#essay-navigation li {
			display: inline;
			padding: 5px;
			position: relative;
			margin: 0 4px 0 4px;
		}
		#essay-navigation li ul.essay-navigation {
			position: absolute;
		}
		#essay-navigation ul li a {
			background: #533924; 
			background: -webkit-gradient(
			    linear,
			    left bottom,
			    left top,
			    color-stop(0.04, rgb(18,22,31)),
			    color-stop(0.52, rgb(17,22,48))
			);
			background: -moz-linear-gradient(
			    center bottom,
			    rgb(18,22,31) 4%,
			    rgb(17,22,48) 52%
			);
			border: #111630 solid 1px;
			border-top: #12161f solid 1px;
			color: #eee;
			font-size: 1.2em;
			font-weight: bold;
			padding: 4px 7px 4px 8px;
			text-shadow: #333 0 1px 0;
			-webkit-box-shadow: #757575 0 1px 1px;
			-moz-box-shadow: #ebecec 0 1px 1px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
				
		}
		#essay-navigation ul li a:hover {
			background: #fff;
			background: -webkit-gradient(
			    linear,
			    left bottom,
			    left top,
			    color-stop(0.04, rgb(53,55,69)),
			    color-stop(0.52, rgb(55,61,89))
			);
			background: -moz-linear-gradient(
			    center bottom,
			    rgb(53,55,69) 4%,
			    rgb(55,61,89) 52%
			);
			color: #fff;
			text-decoration: none;
		}
		#essay-navigation ul li a:active {
			top: 0px;
		}
		#essay-navigation ul li a.selected {
			background: #fff;
			background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, 1)),to(rgba(211, 211, 211, 1)));
			background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
			border: none;
			color: #121619;
			padding: 4px 7px 4px 8px;
			text-shadow: #fff 0 1px 0;
			-webkit-box-shadow: #333 0 1px 4px;
			-moz-box-shadow: #333 0 1px 4px;
		}

/*Wallpapers */
	
	#content-index .wallpaper {
		margin: 0 -40px 0px -40px;
		overflow: hidden;
	}
	#content-index .ipad {
		float: right;
		margin: 0;
		width: 440px;
	}
	#content-index .fb {
		float: left;
		margin: 50px 0 0 40px;
		width: 200px;
	}
	#content-index .twt {
		float: left;
		margin: 20px 0 0 40px;
		width: 200px;
	}
	#content-index .flattr {
		float: left;
		margin: 20px 0 0 40px;
		width: 200px;
	}
	#content-index .mac-small {
		float: left;
		margin: 20px 0 0 40px;
		width: 125px;
		-webkit-box-shadow: #666 0 1px 2px;
		-moz-box-shadow: #666 0 1px 2px;
	}
		#content-index .mac-small:hover {
			-webkit-box-shadow: #333 0 1px 3px;
			-moz-box-shadow: #333 0 1px 3px;
		}
	#content-index .wallpaper-title {
		float: left;
		margin: 60px 0 20px 40px;
	}
	#content-index .wallpaper-text{
		clear: left;
		float: left;
		font-size: 1.4em;
		line-height: 20px;
		margin: 10px 0 20px 40px;
		width: 300px;
	}
		#content-index .wallpaper-text-bottom {
			clear: left;
			float: left;
			font-size: 1.2em;
			font-style: italic;
			line-height: 19px;
			margin: 240px 0 20px 40px;
			width: 250px;
		}

#slider {
  margin: 0 -40px 0 -40px;
  width: 780px;
}
	.scroll {
	  overflow: auto;
	  position: relative; /* fix for IE to respect overflow */
	}
	.scrollContainer div.panel {
	  border-bottom: solid 1px #999;
	  width: 780px; /* change to 560px if not using JS to remove rh.scroll */
	}
	ul.navigation {
	    margin: 40px 0 0 40px;
	}
	ul.navigation li {
		float: left;
		margin: 0 15px 50px 0;
		}
		ul.navigation li a {
			float: left;
			height: 50px;
			padding: 2px;
			width: 100px;
			-webkit-box-shadow: #666 0 1px 2px;
			-moz-box-shadow: #666 0 1px 2px;
			-moz-border-radius: 2px; 
			-webkit-border-radius: 2px;
			}
		ul.navigation a:hover {
			-webkit-box-shadow: #333 0 1px 3px;
			-moz-box-shadow: #333 0 1px 3px;
			}
		ul.navigation a.selected {
			-webkit-box-shadow: #333 0 1px 3px;
			-moz-box-shadow: #333 0 1px 3px;
			}

/*Footer */

#footer {
	display: block;
	margin: auto;
	margin-bottom: 20px;
	overflow: hidden;
	padding: 12px 20px 6px 20px;
	position: relative;
	text-shadow: #fff 0 1px 0;
	width: 760px;
	}
	#footer ul { float: left; width: 600px; }
	#footer ul li {display: block; font-size: 1.2em; float: left;  margin-right: 14px; }
		#footer ul li a, #footer ul li a:hover, #footer ul li a:focus {color: #2c3238; text-decoration: none; }
	#footer p { color: #575f66; float: right; font-size: 1.2em; margin: -4px 0 10px 0; }
		#footer p a, #footer p a:hover, #footer p a:focus { color: #575f66; text-decoration: none; }