/* CSS RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
border:0;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
outline:0;
padding:0;
vertical-align:baseline;
}
:focus {
outline:0;
}
body {
background:#FFF;
color:#000;
font-size:62.5%;
line-height:1;
}
ol,ul {
list-style:none;
}
table {
border-collapse:separate;
border-spacing:0;
}
caption,th,td {
font-weight:400;
text-align:left;
}
blockquote:before,blockquote:after,q:before,q:after {
content:"";
}
blockquote,q {
quotes:"" "";
}
/* END RESET */

/*Start Main Content*/
body 
{
	-x-system-font:none;
	font-size-adjust:none;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	background:#056170 none repeat scroll 0 0;
	font: 9em Helvetica, Arial, sans-serif; 
	color:#07090e;
	line-height:22px;
}

/*-----------------Begin Head Elements-----------------*/

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

#container
{
	width:960px;
	margin:0 auto;
	z-index:100;
}

#logo
{
	position: relative;
	height: 118px;
	padding-left:20px;
	z-index:500;
}

.displace 
{
	position: absolute;
	left: -5000px;
}

/*-----------------End Head Elements------------------*/

/*-----------------Begin Content---------------------*/
/*Content Info*/
#content
{
	background: #fff;
	font-size: 15px;
	height:2400px;
}

.buffer
{
	margin:10px auto;
	padding:70px 103px 20px;
}

h1
{
	padding: 10px 0 10px;
}
	.header a
	{
		font: 22pt Helvetica, Arial, sans-serif;
		color:#056170;
	}

a.link
{
	position: relative;
	float: right;
	padding-right: 70px;
	font: 12pt Helvetica, Arial, sans-serif; 
	color: #056170;
}

.p
{
	margin: 10px 0;
}

hr
{
	color: #DFE6E8;
}


/*End Content Info*/
/*--------------End Content-----------------*/

/*-------Start Work Styles Start Here---------*/
.section
{
	/*Controls web, disign, and bio sections*/
	
}

div #requisite
{
	border-bottom:1px solid #DFE6E8;
	margin-bottom:1em;
	padding:0 0 1.5em;
	position:relative;
}

div #web
{
	padding:1.5em 0 0;
	position:relative;
}
	#web #tribute
	{
		/*border-bottom:1px solid #DFE6E8;*/
		/*margin-bottom:1em;*/
		padding:0 0 1.5em;
	}
	
	#web #peony
	{
		/*border-bottom:1px solid #DFE6E8;*/
		margin-bottom:1em;
		padding:0 0 1.5em;
	}
	
	#web #phone
	{
		margin-bottom:1em;
		padding:0 0 1em;
	}

div #design
{
	margin-bottom:1em;
	padding:0 0 1.5em;
	border-bottom:1px solid #DFE6E8;
	position:relative;
}

div #bio
{
	/*border-top:1px solid #CBC;*/
	position: relative;
	/*margin-top:2em;*/
}

div .work
{
	width:750px;
}
/*--------------End Work Styles---------------*/


/*--------------Caption Start---------------*/

.zitem {
	width:750px;
	height:400px;	
	border:2px solid #CBC;	
	margin:5px 5px 5px 0;
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
}

.zitem .caption {
	width:750px;
	height:20px;
	background:#056170;
	color:#fff;
	text-align: center;
		
	/* fix it at the bottom */
	position:absolute;
	bottom:-1px; /* fix IE issue */
	left:0;

	/* hide it by default */
	display:none;

	/* opacity setting */
	filter:alpha(opacity=70);    /* ie  */
	-moz-opacity:0.7;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.7;    /* for really really old safari */  
	opacity: 0.7;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.zitem .caption a {
	text-decoration:none;
	color:#fff;
	font-size:12px;	
	
	/* add spacing and make the whole row clickable*/
	padding:5px;
	display:block;
}

img {
	border:0;
	/* allow javascript moves the img position*/
}


/*--------------End Caption-----------------*

/*--------------Bio Styles Go Here---------*/

		#bio .bio 
		{
			float:left;
			padding-top:1.5em;
			text-align:left;
			width:450px;
		}
		
		#bio .bio .p 
		{
			margin:10px 0 0 20px;
		}
		
		#bio #skillz 
		{
			float:right;
			padding:0 0 0 19px;
			width:285px;
		}
		
		#special
		{
			padding-top:70px;
		}
		
		#interest
		{
			padding-top: 25px;
		}
		
		.skill 
		{
			margin:0 0 60px 10px;
			padding: 5px 0;
		}
		
		ul.listoskills 
		{
			height:30px;
			list-style-image:none;
			list-style-position:outside;
			list-style-type:none;
			width:520px;
		}
		
		.listoskills li, listoskills 	
		{
			background-image:url(../images/check.png);
			background-repeat:no-repeat;
			float:left;
			height:20px;
			padding:0 0 0 22px;
			width:16em;
		}
		
		#contact
		{	
			position:relative;
			top:25px;
			width:350px;
		}
		
		.contact
		{
			padding:10px 0 0 5px;
		}
		
		ul.listocontacts
		{	
			/*padding:0 0 0 5px;*/
			width:16em;
		}
			
		.listocontacts li, listocontacts 
		{
			float:left;
			/*height:1.5em;*/
			width:350px;
		}
	
		
		.listocontacts a
		{
			font-size:12pt;
			/*font-weight:bold;*/
		}
		
		#bio h1 
		{
			color:#056170;
			/*color:#2B9251;*/
			font-size:20pt;
		}
		
		#bio h2
		{
			color:#056170;
			/*color:#2B9251;*/
			font-size:16pt;
		}
		
	

		
/*--------------End Bio Styles-------------*/

/*--------------Begin Footer-----------------*/

#footer, #footer a
{
	background-color:#056170;
	color: #fff;
	text-align: center;
	margin:5px auto;
	font-size:12px;
	line-height:10px;

}

	#tiny
	{
		font: 10px Helvetica, Arial, sans-serif; 
	}
	
/---------------*End Footer*-----------------/

/*End Main Content*/Content*/