/*****************************/
/* CSS Screen Portfolio Page */
/*****************************/

#content {
	width: 880px;
	margin-top: 10px;
	margin: 0 auto;
}

#content-left {
	width: 680px;
	margin-top: 5px;
	color: #000000;
	margin-right: 20px;
	float: left;
}
.content-left-hr  {
	width: 680px;
	height: 2px;
	margin-right: 20px;
	float: left;
}

#content-right {
	width: 180px;
	margin-top: 5px;
	color: #000000;
	background-color: e9edef;
	text-align: center;
	float: left;
}

h2 {
	font-family: Helvetica, Arial, Verdana, sans-serif; 			 
	font-size: 18px;
	line-height: 20px;
	font-weight: bold;
	padding-bottom: 10px; 
}

h3 {
	font-family: Helvetica, Arial, Verdana, sans-serif; 
	font-size: 12px;
	line-height: 16px;
	font-weight: bold;
	padding-bottom: 10px; 
}

p {
	font-family: Helvetica, Arial, Verdana, sans-serif; 			 
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
	padding-bottom: 10px; 
}

#doodle {
	text-align: center;
	margin: 0 auto;
	padding-top: 5px;
	padding-bottom: 5px; 
}

/* Link State Portfolio */
a.link-state-portfolio {
	font-family: Cambria, Times, 'Times New Roman', serif;
	font-size: 20px;
	line-height: 20px;
	font-weight: bold;
	color: #101efa;
	text-decoration: none;
}	

a.link-state-portfolio:link {
	color: #101efa;	
}	

a.link-state-portfolio:visited {
	color: #0710a2;	
}	

a.link-state-portfolio:hover {
	color: #004061;		
	background-color: #d0c9cd;
	text-decoration: underline;
}	

a.link-state-portfolio:active {
	color: #ff0000;	
}

/* http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer */
.thumbnail {
	position: relative;
	z-index: 0;
}

.thumbnail:hover {
	background-color: transparent;
	z-index: 50;
}
 /*CSS for enlarged image*/
.thumbnail span {
	position: absolute;
	background-color: lightyellow;
	padding: 5px;
	left: -1000px;
	border: 1px dashed gray;
	visibility: hidden;
	color: black;
	text-decoration: none;
}
.thumbnail span.rotate90 {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.thumbnail span.rotate180 {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.thumbnail span.rotate270 {
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

/*CSS for enlarged image*/
.thumbnail span img { 
	border-width: 0;
	padding: 2px;
}

.thumbnail:hover span { /*CSS for enlarged image on hover*/
	visibility: visible;
	top: -100;
	left: 60px; /*position where enlarged image should offset horizontally */
}