/* Created by Paul Gonzalez Becerra */

body	{	margin:	0px;	}

.navigation	{
	width:	100%;
	height:	24px;
	background-color:	#a2ffa2;
	position:	fixed;
	top:	0px;
	left:	0px;
}

.content	{
	margin-top:	24px;
}

#img-logo	{
	width:	96px;
	height:	24px;
}

.filters	{
	width:	100%;
	padding:	1em;
	text-align:	center;
}

span.filter	{
	min-width:	24px;
	height:	1em;
	padding:	4px;
	background-color:	#4b4b4b;
	color:	#ebebeb;
	display:	inline-block;
	border:	1px solid #101820;
	user-select:	none;
}

span.filter:hover	{
	cursor:	pointer;
	background-color:	#5b5b5b;
}

span.filter input, span.filter button	{
	height:	0.9em;
	margin:	0px;
	vertical-align:	top;
	user-select:	auto;
}

#search-button	{
	font-size:	0.9em;
	height:	100%;
	color:	white;
	background-color:	#4b4b4b;
	border:	none;
}

#search-button:hover	{
	color:	ghostwhite;
	backgroundcolor:	#5b5b5b;
	border:	none;
}

span.filter	{
	height:	100%;
	color:	white;
}

span.filter:first-child	{
	border-top-left-radius:	5px;
	border-bottom-left-radius:	5px;
}

span.filter:last-child	{
	border-top-right-radius:	5px;
	border-bottom-right-radius:	5px;
}

.projects	{
	clear:	both;
}

.hidden	{
	display:	none;
}

.project	{
	background-color:	#a2c4e6;
	transition:	width 0.35s, height 0.35s, background-color 1s;
}

.project.fullview	{
	background-color:	#e6e6e6;
	position:	fixed;
	border:	#101820 2px solid;
	top:	1%;
	left:	1%;
	width:	98%;
	height:	98%;
}

.project.fullview .project-collapse	{
	width:	24px;
	height:	24px;
	position:	fixed;
	top:	2%;
	right:	2%;
	border-radius:	50%;
	background-color:	#d4d4d4;
	border:	#101820 1px solid;
	text-align:	center;
	line-height:	24px;
}
.project.fullview .project-collapse:hover	{
	cursor:	pointer;
	background-color:	#cfcfcf;
}
.project.preview .project-collapse	{
	display:	none;
}

.project.fullview .project-images	{
	margin-top:	8px;
	margin-bottom:	4px;
	height:	175px;
	display:	block;
	width:	100%;
	overflow:	auto;
}

.project.fullview .project-images img	{
	max-width:	200px;
	max-height:	150px;
	display:	inline;
	padding:	4px;
}

.project.fullview .project-title	{
	width:	100%;
	height:	32px;
	line-height:	32px;
	font-family:	monospace lucida console;
	font-size:	2em;
	font-weight:	bold;
	text-align:	center;
	border-bottom:	2px solid black;
	overflow:	hidden;
	text-overflow:	clip;
}

.project.fullview .project-links	{
	display:	block;
	width:	100%;
	height:	1em;
}

.project.fullview .project-links a {
	float:	right;
	margin:	4px;
	color:	#101820;
}

.project.fullview .project-desc	{
	height:	50%;
	text-align:	left;
	padding:	8px 8px 8px 8px;
	overflow:	hidden;
	text-overflow:	clip;
	clear:	both;
	overflow:	auto;
}

.project.fullview .project-expand	{
	display:	none;
}

/* Small View */

.project.preview	{
	width:	90%;
	height:	386px;
	float:	left;
	margin:	1% 5%;
}

.project.preview .project-title	{
	width:	100%;
	height:	32px;
	line-height:	32px;
	text-align:	center;
	border-bottom:	2px solid black;
	overflow:	hidden;
	text-overflow:	clip;
}

.project.preview .project-desc	{
	height:	50%;
	text-align:	left;
	padding:	8px 8px 8px 8px;
	overflow:	hidden;
	text-overflow:	clip;
}

.project.preview .project-expand	{
	width:	100%;
	height:	23px;
	line-height:	23px;
	text-align:	center;
}

.project.preview .project-expand:hover	{
	cursor:	pointer;
}

/* Medium View */

@media(min-width: 640px)	{
	.project.preview	{
		width:	31%;
		height:	256px;
		float:	left;
		margin:	1%;
	}

	.project.preview .project-title	{
		width:	100%;
		height:	32px;
		line-height:	32px;
		text-align:	center;
		border-bottom:	2px solid black;
		overflow:	hidden;
		text-overflow:	clip;
	}

	.project.preview .project-desc	{
		height:	50%;
		text-align:	left;
		padding:	8px 8px 8px 8px;
		overflow:	hidden;
		text-overflow:	clip;
	}
}

/* Large view */
@media(min-width:1000px)	{
	.project.preview	{
		width:	23%;
		height:	256px;
		float:	left;
		margin:	1%;
	}

	.project.preview .project-title	{
		width:	100%;
		height:	32px;
		line-height:	32px;
		text-align:	center;
		border-bottom:	2px solid black;
		overflow:	hidden;
		text-overflow:	clip;
	}

	.project.preview .project-desc	{
		height:	50%;
		text-align:	left;
		padding:	8px 8px 8px 8px;
		overflow:	hidden;
		text-overflow:	clip;
	}
}

.project.preview .project-images	{
	margin-top:	4px;
	text-align:	center;
}

.project.preview .project-links	{
	display:	none;
}

.project.preview .project-images a	{
	display:	none;
}

.project.preview .project-images a:first-child	{
	display:	block;
}

.project.preview .project-images a:first-child img	{
	max-width:	100px;
	max-height:	50px;
}

/* Color Codes */
.cc-xout		{	color:	#a4a4a4;	}
.cc-inst		{	color:	lime;	}
.cc-type		{	color:	yellow;	}
.cc-cmnt		{	color:	#00ffff;	}
.cc-name		{	background-color:	ghostwhite;	color:	black;	}
.cc-public		{	background-color:	#0c7b96;	color:	white;	}
.cc-protected	{	background-color:	#88368b;	color:	white;	}
.cc-desc		{	background-color:	#686c75;	color:	white;	}
.cc-more		{	background-color:	#9eaebb;	color:	white;	}
.cc-odd			{	background-color:	ghostwhite;	color:	black;	}
.cc-even		{	background-color:	#686c75;	color:	white;	}

.cc-odd > div:first-child, .cc-even > div:first-child	{	text-align:	right;	}

a.cc-link		{	color:	white;	}
a.cc-link:hover		{	color:	white;	}
.cc-odd a.cc-link		{	color:	black;	}
.cc-odd a.cc-link:hover	{	color:	black;	}
.cc-even a.cc-link		{	color:	white;	}
.cc-even a.cc-link:hover	{	color:	white;	}

/* Rainbow Colors */
.rc-red		{	background-color:	red;	color:	white;	}
.rc-orange	{	background-color:	orange;	color:	white;	}
.rc-yellow	{	background-color:	yellow;	color:	black;	}
.rc-green	{	background-color:	green;	color:	white;	}
.rc-blue	{	background-color:	blue;	color:	white;	}
.rc-teal	{	background-color:	teal;	color:	white;	}
.rc-purple	{	background-color:	purple;	color:	white;	}

/* Pastel Colors */
.pc-tan				{	background-color:	#f7eace;	color:	black;	}
.pc-lavender		{	background-color:	#a4a0c5;	color:	black;	}
.pc-dream			{	background-color:	#bbe0d9;	color:	black;	}
.pc-seafoam			{	background-color:	#85d2ca;	color:	black;	}
.pc-storm			{	background-color:	#9eaebb;	color:	black;	}
.pc-amethyst		{	background-color:	#88368b;	color:	white;	}
.pc-thunder			{	background-color:	#928f8a;	color:	white;	}
.pc-slate			{	background-color:	#686c75;	color:	white;	}
.pc-ocean			{	background-color:	#0c7b96;	color:	white;	}

/* End of File */