@import url('reset.css');

/* @font-face {
	font-family: Cambria;
	src: url(images/cambriab.ttf);
} */

html {
	background: url(images/html.gif) repeat-x top left #fff;
	height: 100%;
}

body:before {
	background: #283645;
	border-bottom: 1px solid #fff;
	content: "";
	display: block;
	height: 5px;
}
body {
	background: url(images/body.gif) repeat-x 0 -5px;
	background: url(images/lower.png), -webkit-gradient(linear, 0 0, 0 100%, from(#99b4d0), color-stop(35%, #fff), to(#fff)) no-repeat top center; 
	background: url(images/lower.png), -moz-linear-gradient(top, #99b4d0, #fff 35%, #fff) no-repeat top center; 

	color: #768392;
	font: normal 13px Arial, Verdana, Tahoma, Helvetica, sans-serif;
	height: 100%;
}

a,
a:link,
a:visited {
	color: #283645;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

/* *** global *** */
header, nav, section, article, aside, footer {
	display: block;
}
#wrapper {
	margin: 0 40px;
	width: 90%;
}

/* *** header *** */
header {
	padding-top: 32px;
}
#logo {
	color: #283645;
	float: left;
	font: bold 50px 'Droid Serif';
	letter-spacing: -1px;
	margin-bottom: 26px;
	text-shadow: 0 0 1px #283645;
}
	#logo span {
		color: #fff;
		display: block;
		font-size: 17px;
		margin-top: 5px;
		text-indent: 7px;
		text-shadow: 1px 1px 0 #65768a;
	}
	
	/* *** navigation *** */
	nav {
		float: right;
	}
		#skipto {
			display: none;
		}
		#view-source {
			background: url(images/button.gif) repeat-x bottom left #222e3b;
			background: -webkit-gradient(linear, 0 0, 0 100%, from(#131b24), to(#283645));
			background: -moz-linear-gradient(top, #131b24, #283645);

			border-top: 2px solid #222e3b;
			color: #fff;
			display: block;
			float: right;
			font-size: 14px;
			margin-top: 8px;
			padding: 6px 19px 8px 17px;
			
			-moz-border-radius: 18px;
			-webkit-border-radius: 18px;
			border-radius: 18px;
		}
			#view-source span {
				background: url(images/icons.gif) no-repeat 0 3px;
				display: block;
				padding-left: 24px;
			}
	
/* *** content *** */
#content {
	clear: both;
	font-size: 16px;
	margin-botom: 20px;
}

/* *** index page *** */
img.me {
	background: #fff;
	border: 1px solid #d1cabd;
	float: right;
	height: 300px;
	margin-left: 20px;
	padding: 2px;
	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.entry p {
	line-height: 150%;
	margin-bottom: 20px;
}
	.entry p:first-child {
		font-weight: bold;
	}
	
.entry h1, .entry h2, .entry h3, .entry h4 {
	color: #283645;
	margin-bottom: 10px;
}
	
.entry ul {
	padding-bottom: 10px;
}
	.entry li {
		margin-bottom: 10px;
	}
	
.entry abbr {
	cursor: default;
}
	
.skillset {
	margin-bottom: 10px;
}
	.skillset li {
		display: inline-block;
		width: 25%;
	}
	
.findme {
	height: 55px;
	margin-bottom: 20px;
}
	.findme li {
		float: left;
		margin-right: 40px;
	}
	.findme a {
		display: block;
		height: 55px;
		text-indent: -9999px; outline: none;
	}
		.findme .i a {
			background: url(images/am.png) no-repeat center center;
			width: 267px;
		}
		.findme .ii a {
			background: url(images/psdtovb.png) no-repeat center center;
			width: 148px;
		}

/* ** portfolio item bit ** */
.bit {
	float: left;
	margin: 0 25px 25px 0;
	width: 299px;
}
	/* thumbnail */
	.bit img {
		background: #fff;
		border: 4px solid #fff;
		display: block;
		margin-bottom: 25px;
		max-width: 291px;
		opacity: 0.9;
		position: relative;
		
		-moz-box-shadow: 0 0 12px #b4b4b4;
		-webkit-box-shadow: 0 0 12px #b4b4b4;
		box-shadow: 0 0 12px #b4b4b4;
		

		-moz-transition: -moz-transform 0.4s ease-in-out, opacity 0.5s ease;
		-webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.5s ease;
		-o-transition: -o-transform 0.4s ease-in-out, opacity 0.5s ease;
	}
		.bit a:hover img {
			opacity: 1;

			-webkit-transform: scale(1.1); z-index: 100;
			-moz-transform: scale(1.1);
			-o-transform: scale(1.1);
		}
	
	/* inner text */
	.bit .box {
		background: #f1ebe0;
		padding: 14px;
		position: relative;
		
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		border-radius: 7px;
	}
		.bit h2 {
			color: #283645;
			font-size: 20px;
			line-height: 16px;
			letter-spacing: -1px;
			margin-bottom: 10px;
		}
		.bit li {
			font-size: 12px;
			margin-top: 10px;
		}
			.html a, .live a {
				background: url(images/icons.gif) no-repeat top left;
				display: inline-block;
				height: 17px;
				padding-left: 22px;
			}
			.live.html a {
				background-position: 0 -26px;
			}
			.live a {
				background-position: 0 -53px;
			}

	/* arrow */
	.bit .arrow {
		background: #f1ebe0;
		display: block;
		height: 20px;
		width: 20px;
		
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		
		position: absolute; top: -10px; left: 20px;
	}


/* *** footer *** */
footer {
	clear: both;
	font-size: 11px;
	padding-bottom: 20px;
}

/* *** mobile *** */
@media only screen and (max-width: 480px) {
	#wrapper {
		margin: 0;
		padding: 0 20px;
		width: auto;
	}
	
	header {
		padding-top: 20px;
	}
		#logo {
			float: none;
			text-align: center;
		}
		
		#view-source {
			display: none;
		}
		
	#content {
	}
		img.me {
			display: none;
		}
		
		.skillset li {
			display: block;
			width: auto;
		}
		
		.findme {
			height: auto;
			margin-bottom: 0;
		}
			.findme li {
				float: none;
				margin-bottom: 10px;
			}
			.findme a {
				margin: 0 auto;
			}
}

/* *** remy's view source *** */
#source-code { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); }
#source-code:target { display: block; }
#source-code pre { padding: 20px; font: 14px/1.6 Monaco, Courier, MonoSpace; margin: 50px auto; background: rgba(0,0,0,0.8); color: white; width: 80%; height: 80%; overflow: auto; }
#source-code pre a, #source-code pre a span { text-decoration: none; color: #00ccff !important; }
#x { position: absolute; top: 30px; left: 10%; margin-left: -41px; }