body {
	background-color: #111;
}

#container{
	color:#111;
	width:100% ;
	min-width:980px;
	height:auto;
	}
	
/* header  */

#page_header
{
	width:100% ;
	height:100px ;
	float:left;
	margin-left:30px;
	margin-top:30px;
	background:url(images/tingyuchen.png) no-repeat;	
	border-bottom:dotted;
	border-bottom-width:thin;
	border-bottom-color:#FFF;
}

#page_header email a
{
	/*background:url(Images/email.png) no-repeat;*/
	text-decoration:none;
	color:#FFF;
	width:50px;
	margin-top:54px;
	float:right;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight:100;
	font-size:10px;
	padding-top:3px;
	padding-bottom:6px;
	padding-left:0px;
}

#page_header twitter a
{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:10px;
	color:#FFF;
	text-decoration:none;
	/*background:url(Images/twitter.png) no-repeat;*/
	width:50px;
	height:8px;
	margin-top:54px;
	float:right;	
	padding-top:3px;
	padding-bottom:6px;
	padding-left:25px;
	border-left:thin;
	border-left-style:dotted;
	border-left-color:#898989;

}

#page_header linkedin a
{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:10px;
	color:#FFF;
	text-decoration:none;
	/*background:url(Images/twitter.png) no-repeat;*/
	height:8px;
	width:70px;
	margin-top:54px;
	float:right;	
	padding-top:3px;
	padding-bottom:6px;
	padding-left:24px;
	padding-right:30px;
	border-left:thin;
	border-left-style:dotted;
	border-left-color:#898989;

}


#page_header twitter a:hover  {color:#ff0099}
#page_header email a:hover  {color:#ff0099}
#page_header linkedin a:hover  {color:#ff0099}

#mini_bio
{
	width:25%;
	position:relative;
	font-family:Verdana, Geneva, sans-serif;
	padding-left:190px;
	font-size:10px;
	float:left;
	color:#898989;
	}


/* Left Col */
#left_col
{
	background-color:#111;	
	width:150px;
	height:2000px;
	margin-left:30px;
	padding-top:50px;
	float:left;
}
	
	
#left_col li
{
	width: 100px;
	height:35px;	
	list-style:none;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
}	
	
	
#left_col li a
{	
	color:#FFF;
	font-size:12px;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	padding-top:3px;
	padding-bottom:3px;
	padding-left:5px;
	padding-right:7px;
}

#left_col li a:hover
{	
	background-image:url(Images/btn-bg.png);
	color:#FFF;
}


.active
{	
	background-image:url(Images/btn-bg.png);
	color:#FFF;
	}


/* Page content body */

#page_body
{
	min-width:980px;
	max-width:100%;
	height:100%;
	float:left;
	background-color:#111;
}


ul#portfolio {
	min-width:780px;
	max-width:100%;
	height:auto;
	background-color:#111;
	margin-top:49px;
	padding:0px;
}


/* type of work  eg interactive. web*/
ul#portfolio p {
font-family:Georgia, "Times New Roman", Times, serif;
width:300px;
height:20px;
color:#898989;
font-size:10px;
text-align:center;
float:left;
}

/* name of projects*/
ul#portfolio ul.submenu li {
width:300px;
height:20px;
margin-top:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
}

/* name of projects a*/
ul#portfolio ul.submenu a{
width:300px;
height: 10px;
color:#FFF;
list-style:none;
text-decoration:none;
display:block;
}

/* name of projects rollover*/
ul#portfolio ul.submenu a:hover
{
width:300px;
height:10px;
color:#ff0099;
display:block;
list-style:none;
text-decoration:none;
}

/*indivisaul project box*/
ul#portfolio li {
padding-bottom:10px;
float:left;
background-color:#111;
margin-top:0px;
margin-bottom:20px;
list-style:none;
}

/* About page*/
#about
{
	width:200px;
	margin-top:40px;
	margin-left:40px;
	padding-bottom:40px;
	float:left;
}

#about p
{
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	line-height:15px;
	color:#999;
	padding-right: 20px;
	}
	
#about li a
{
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	list-style:none;
	text-decoration:none;
	color:#FFF;
}
#about li a:hover
{
	color:#ff0099;
}

/*Footer*/

#footer 
{
	width:100% ;
	height:12px ;
	margin-left:30px;
	border-top:dotted;
	border-top-width:thin;
	border-top-color:#FFF;
	float:left;
}
#footer p
{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
color:#898989;
}

/*Subepages*/

#project
{
	margin:40px;
	width:845px;
	height: 20px;
}

#project_content
{
	width:665px;
	float:left;
	padding:0px;
}
	
#project_content li
{
	width:665px;
	padding-top:30px;
	padding-bottom:30px;
	margin-left:40px;
	border-bottom-color:#333;
	border-bottom-style:dotted;
	border-bottom-width:thin;
}
	
#project_content_2
{
	width:480px;
	float:left;
	padding:0px;
}
	
#project_content_2 li
{
	width:480px;
	padding-top:30px;
	padding-bottom:30px;
	margin-left:40px;
	border-bottom-color:#333;
	border-bottom-style:dotted;
	border-bottom-width:thin;
}	

#description
{
    width:480px;
	margin-left:40px;
    font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	line-height: 14px;
	color:#898989;
	padding-top:10px;
}

.style1
{
    font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
	line-height: 14px;
    color:#FFF;
	padding-top:10px;
}

#project p
{
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
	padding-left:40px;
	color:#FFF;
	float:left;
}

#project li a
{
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	list-style:none;
	text-decoration:none;
	padding-top:20px;
	color:#F06;
	float:right;
}

#presentation
{
	width:980px;
	float:left;
	padding:0px;
	margin-left:40px;
}

#bio 
{
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#FFF;
	padding-top:9px;
}


 

ul#portfolio ul a.project1 {
	background-image:url(images/01.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
	}
	
ul#portfolio ul a.project2 {
	background-image:url(images/02.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
	}
	
ul#portfolio ul a.project3 {
	background-image:url(images/03.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
	}
	
ul#portfolio ul a.project4 {
	background-image:url(images/04.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
	}
	
ul#portfolio ul a.project5 {
	background-image:url(images/05.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
	}
	
ul#portfolio ul a.project6 {
	background-image:url(images/06.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
	}
	
ul#portfolio ul a.project7{
	background-image:url(images/07.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
	}
	
ul#portfolio ul a.project8 {
	background-image:url(images/08.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
	}
	
ul#portfolio ul a.project9 {
	background-image:url(images/09.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
	}
	
ul#portfolio ul a.project10 {
	background-image:url(images/10.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
	}
	
ul#portfolio ul a.project11 {
	background-image:url(images/11.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
	}
	
ul#portfolio ul a.project12 {
	background-image:url(images/12.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
	}	
	
	
ul#portfolio ul a.project13 {
	background-image:url(images/13.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
	}
	
ul#portfolio ul a.project14 {
	background-image:url(images/14.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
	}		
	
ul#portfolio ul a.project15{
	background-image:url(images/15.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
	}	
	
ul#portfolio ul a.project16{
	background-image:url(images/16.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
}	

ul#portfolio ul a.project17{
	background-image:url(images/17.jpg) ;display:block;width:300px;height:199px;background-repeat:no-repeat;
}	

ul#portfolio ul a:hover { background-position:0 -199px; }