/**
 * Portfolio content layout for www.gracepok.com
 * 
 * author:  Grace Pok
 * Version: 2.0 - overhauled layout
 * 
 * Color scheme
 * 	Green:  999933
 * 	Dark Red:  550000	
 * 
 */


/* Content
 *-------------------------------------------------------*/
#imagearea, #textarea {
	float: left;
}
#imagearea, #imgbox, #imgmask {
	width: 600px;
	height: 400px;	
	overflow: hidden;
}
#imagearea {
	padding-left: 4px;
	padding-right: 35px;
}

#imgbox, #imgmask {
	position: relative;
	left: 0px;
	cursor: pointer;
}

#imgbox { 
	top: 0;
}
#imgmask {
	top: -400px;
	background: url('../assets/imagemask.png') no-repeat top left;
	z-index: 1000;
}
#textarea {
	width: 210px;
	height: 362px;
	padding: 20px;
	background: url('../assets/textareabg.gif') no-repeat top left;
}


#textarea h2 , #textarea .projdesc { font-size: 1.2em;  margin: 0; color: #999933; }
#textarea h3 { 
	font-size: 1.0em;
 	margin-bottom: 0; 
}
#textarea p {
	margin: 0 0 0.5em 0;
	line-height: 1.4;
}



/** project **/

ul.projnote {
	margin: 0 ;
	padding: 0 0 5px 5px;
	float: left;  /* needed to contain the floating LI */
	list-style: none;
	height: 20px;
}
/* A tag: link, visited, hover -- in this order */
ul.projnote li {
	margin: 0; padding: 0;
	float: left;
	width: 3.5em;
	border-right: 3px solid white;
	font-weight: bold;
	font-size: 85%;	
	text-align: center;
	background-color: #999933;
}
ul.projnote a {
	display: block;
	cursor: pointer;
}
ul.projnote a em {
	visibility: hidden;;
}

a.projImage:hover {
	background-color: #AAAA33;	
}
a.projImage_cur, a.projImage_cur:hover {
	background-color: #550000;
}