/* FONTS */
@font-face { font-family:OxygenB; src: url('OxygenB.ttf'); }
@font-face { font-family:OxygenL; src: url('OxygenL.ttf'); }
@font-face { font-family:OxygenR; src: url('OxygenR.ttf'); }

@font-face { font-family:OxygenBie; src: url('OxygenB.eot'); }
@font-face { font-family:OxygenLie; src: url('OxygenL.eot'); }
@font-face { font-family:OxygenRie; src: url('OxygenR.eot'); }

/* PREFORMATS */

.pastel-red { color:#cc6666; }
.pastel-blue { color:#6699cc; }
.pastel-green { color:#66cc99; }

/* FIX */

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
	.clearfix {
		display: inline-block;
	}
 
	html[xmlns] .clearfix {
		display: block;
	}
 
	* html .clearfix {
		height: 1%;
	}
	
.leftie {
	float:left;
}

.rightie {
	float:right;
}
	
	
/* OVERALL */

html {
	cursor:default;
	-webkit-font-smoothing:antialiased!important;
	font-smoothing:			antialiased !important;
}
		
body {
	font-family:Oxygen,OxygenR,OxygenRie,serif;
	font-size:12px; color:#4a4a4a;
	background-color:#fff;
}
		
img {
	padding:0;
	border:0;
	margin:0;
	-webkit-transform: translate3d(0, 0, 0);
	transform:		   translate3d(0, 0, 0);
	-ms-transform:	   translate3d(0, 0, 0);
}

	img.grayscale {
	  /* for Webkit browsere, Chrome 19+, Safari 6+ ... */
	  -webkit-filter: grayscale(1);

	  /* this is for Firefox 3.5+, Firefox mobile */
	  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'gs\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#gs");

	  /* for IE6+ */
	  filter: gray;
	}

#container {
	position:absolute;
	top:0; left:0;
	clear:both;
	width:100%;
}
		
	#side-menu {
		position:fixed;
		top:0; left:0;
		z-index:100;
		display:block;
		
		float:left;
		width:230px;
		height:100%;
		margin-right:20px;
		padding:10px;
		text-align:center;
	}
	
		#the-logo  {
			width:100%;
			border-top:dotted 1px #ccc;
			border-bottom:dotted 1px #ccc;
			text-transform:uppercase;
		}
			
			#the-logo .the-name {
				font-size:40px;
				letter-spacing:-2px;
			}
				
			#the-logo .the-guy {
				position:relative;
				top:-25px;
				font-size:20px;
			}
				
			#the-logo .the-skill1, #the-logo .the-skill2 {
				font-weight:bold;
				letter-spacing:.5px;
			}
		
		#side-menu ul {
			display:block;
			list-style:none;
			padding:0; margin:0;
			font-size:12px;
			text-transform:uppercase;
			text-align:left;
		}
			
			#side-menu ul li {
				padding:5px 0;
				border-bottom:dotted 1px #ccc;
				cursor:pointer;
				text-indent:10px;
			}
			
				#side-menu ul li a {
					text-decoration:none;
					color:#4a4a4a;
					display:block;
					height:18px;
					width:100%;
				}
			
			#side-menu ul .you-are-here { background-color:#cc6666; }
			#side-menu ul .you-are-here a { color:#fff; }
			
			#side-menu ul li:last-child {
				border-bottom:none;
			}
		
#content {
	position:absolute;
	top:0; left:260px;
	
	width:auto;
	height:100%;
	padding:0 10px;
	margin:5px 0;
	background:rgba(5,5,5,0);
}
	
	/* PREVIEW THUMBNAIL */
	.feat-thumb {
		float:left;
		margin:10px;
		display:block;
		position:relative;
		overflow:hidden;
		background:rgba(0,0,0,.5);
		transition:			background 0.3s ease-in-out;
		-webkit-transition:	background 0.3s ease-in-out;
		-moz-transition:	background 0.3s ease-in-out;
	}
	
		.feat-thumb:hover, .feat-thumb:active {
			background:rgba(0,0,0,0);
		}
	
		/* THUMBNAIL IMAGE */
		.feat-thumb .fthumb {
			display:block;
			max-width:300px;
			-moz-box-shadow:    -5px 0px 35px #000;
			-webkit-box-shadow: -5px 0px 35px #000;
			box-shadow:         -5px 0px 35px #000;
			
			transition:			transform 0.3s ease-in-out;
			-webkit-transition:	-webkit-transform 0.3s ease-in-out;
			-moz-transition:	-moz-transform 0.3s ease-in-out;
		}
		
			/* ON HOVER, MOVE TO THE RIGHT */
			.feat-thumb:hover .fthumb {
				transform:			translateX(100%);
				-webkit-transform:	translateX(100%);
				-moz-transform:		translateX(100%);
			}
		
		/* THUMBNAIL DESCRIPTIONS */
		.feat-thumb .feat-desc {
			position:absolute;
			top:0;
			z-index:-1;
			display:block;
			max-width:300px;
			background:#4a4a4a;
			
			transform:			translateX(-100%);
			-webkit-transform:	translateX(-100%);
			-moz-transform:		translateX(-100%);
			
			transition:			transform 0.3s ease-in-out;
			-webkit-transition:	-webkit-transform 0.3s ease-in-out;
			-moz-transition:	-moz-transform 0.3s ease-in-out;
		}
			/* ON HOVER, MOVE TO THE RIGHT */
			.feat-thumb:hover .feat-desc {
				transform:			translateX(0%);
				-webkit-transform:	translateX(0%);
				-moz-transform:		translateX(0%);
			}
			
			/* TITLE */
			.feat-thumb .feat-desc .proj-title {
				height:90px;
				width:260px;
				color:#ffcc66;
				font-size:26px;
				font-weight:300;
				padding:10px 20px 0 20px;
			}
			
			/* DATE */
			.feat-thumb .feat-desc .proj-date {
				top:110px;
				height:10px;
				color:rgba(255,255,255,.7);
				font-size:14px;
				padding:0 20px 10px 20px;
			}
			
			/* DESCRIPTION */
			.feat-thumb .feat-desc .proj-desc {
				top:130px;
				height:260px;
				width:260px;
				color:#fff;
				font-size:14px;
				padding:10px 20px 10px 20px;
				white-space: pre-wrap;
			}
			
				.feat-thumb:nth-child(2n+0) .feat-desc {
					background:#ececec;
				}
				
				.feat-thumb:nth-child(2n+0) .feat-desc .proj-title {
					color:#cc6666;
				}
				
				.feat-thumb:nth-child(2n+0) .feat-desc .proj-date {
					color:rgba(0,0,0,.5);
				}
			
				.feat-thumb:nth-child(2n+0) .feat-desc .proj-desc {
					color:#4a4a4a;
				}
		
		/* VIEW DETAILS */
		.feat-thumb .proj-detl {
			position:absolute;
			bottom:0;
			height:40px;
			width:260px;
			color:ffcc66;
			font-size:12px;
			padding:10px 20px 10px 20px;
			opacity:0;
			
			transition:			opacity 0.1s ease-in-out;
			-webkit-transition:	opacity 0.1s ease-in-out;
			-moz-transition:	opacity 0.1s ease-in-out;
		}
		
			.feat-thumb .proj-detl .proj-page {
				float:left; 
				background:rgba(255,255,255,.8);
				border-radius:5px;
				color:333;
				height:20px;
				line-height:20px;
				width:auto;
				padding:5px 10px;
				text-align:center;
				border-top:solid 1px #333;
				border-left:solid 1px #333;
				text-decoration:none;
				color:#333;
				cursor:pointer;
			}
		
			.feat-thumb .proj-detl .exurl {
				float:right; 
				margin:0 10px;
				-moz-box-shadow:    none;
				-webkit-box-shadow: none;
				box-shadow:         none;
			}
			
			.feat-thumb:hover > .proj-detl , .feat-thumb:active > .proj-detl {
				opacity:.8;
			}
			
/* PREVIEW PANE for CONTROL PANEL only */
#preview-pane {
	width:600px;
	height:400px;
	overflow:hidden;
}
	
	/* PREVIEW THUMBNAIL */
	.prev-thumb {
		width:600px;
		float:left;
		display:block;
		position:relative;
		overflow:hidden;
	}
	
		/* THUMBNAIL IMAGE */
		.prev-thumb .fthumb {
			float:right;
			display:block;
			max-width:300px;
			-moz-box-shadow:    -5px 0px 35px #000;
			-webkit-box-shadow: -5px 0px 35px #000;
			box-shadow:         -5px 0px 35px #000;
		}
		
		/* THUMBNAIL DESCRIPTIONS */
		.prev-thumb .feat-desc {
			float:left;
			display:block;
			max-width:300px;
			background:#4a4a4a;
		}
			
			/* TITLE */
			.prev-thumb .feat-desc .proj-title {
				height:90px;
				width:260px;
				color:#ffcc66;
				font-size:26px;
				font-weight:300;
				padding:10px 20px 0 20px;
			}
			
			/* DATE */
			.prev-thumb .feat-desc .proj-date {
				top:110px;
				height:10px;
				color:rgba(255,255,255,.7);
				font-size:14px;
				padding:0 20px 10px 20px;
			}
			
			/* DESCRIPTION */
			.prev-thumb .feat-desc .proj-desc {
				top:130px;
				height:260px;
				width:260px;
				color:#fff;
				font-size:14px;
				padding:10px 20px 10px 20px;
				white-space: pre-wrap;
			}
			
				.prev-thumb:nth-child(2n+0) .feat-desc {
					background:#ececec;
				}
				
				.prev-thumb:nth-child(2n+0) .feat-desc .proj-title {
					color:#cc6666;
				}
				
				.prev-thumb:nth-child(2n+0) .feat-desc .proj-date {
					color:rgba(0,0,0,.5);
				}
			
				.prev-thumb:nth-child(2n+0) .feat-desc .proj-desc {
					color:#4a4a4a;
				}
		
		/* VIEW DETAILS */
		.prev-thumb .proj-detl {
			position:absolute;
			bottom:0;
			height:40px;
			width:260px;
			color:ffcc66;
			font-size:12px;
			padding:10px 20px 10px 20px;
		}
		
			.prev-thumb .proj-detl .proj-page {
				float:left; 
				background:rgba(255,255,255,.8);
				border-radius:5px;
				color:333;
				height:20px;
				line-height:20px;
				width:auto;
				padding:5px 10px;
				text-align:center;
				border-top:solid 1px #333;
				border-left:solid 1px #333;
				text-decoration:none;
				color:#333;
				cursor:pointer;
			}
		
			.prev-thumb .proj-detl .exurl {
				float:right; 
				margin:0 10px;
				-moz-box-shadow:    none;
				-webkit-box-shadow: none;
				box-shadow:         none;
			}