/* Global Resetting */
html{	
	width: 100%;
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
	color:#666666;
	font-size: 62.5%;
	/* reset font-sizes to 1em == 10px */
}
* {
	font-size: 1em;
	/* reset font-sizes to 1em == 10px */
	padding: 0;
	margin: 0;
	font-family: 'CenturyGothic', 'Century Gothic', 'Arial', 'ArialMT', sans-serif, Helvetica;
	list-style:none;
}

p{
	padding-top:0px;
	padding-bottom:0px;
}
a img{
	border:0;
}
.clear{
	clear:both;
}

/* Layout CSS */
#Main {
	margin:10px auto;
	width:625px;
}
#MainHome {
	margin:10px auto;
	width:625px;
}
#MainHome a {
	font-family: 'CenturyGothic', 'Century Gothic', 'ArialMT', 'Arial', sans-serif, Helvetica;
	color:#666666;
	text-decoration:none;
}
	#MainHome a:hover {
		color:#333333;
	}
	#MainHome a.mainlink {
		font-weight:bold;
		color:#666666;
	}
		#MainHome a.mainlink:hover {
			color:#333333;
		}
#MainHome a.chinese {
	font-family: 'Arial', 'ArialMT', sans-serif, Helvetica;
}
#Header {
	clear:left;
}


	#Header h1 {
		text-align: center;
		text-transform: lowercase;
		color:#666666;
		font-size:3em;
		line-height:1.5em;
/*
		padding-left:20px;
*/
	}
		#Menu1 {
/*
			padding:10px 50px 0;
*/
		}
			#Menu1 li {
				float:left;
				text-transform:lowercase;
				margin:0;
			}
				#Menu1 li.current,
				#Menu1 li.section {
				}
				#Menu1 li a {
					font-family: 'ArialMT', 'Arial', sans-serif, 'CenturyGothic', 'Century Gothic', Helvetica;
					display:block;
					color:#666666;
					font-size:1.7em;
					text-decoration:none;
					padding:4px 11px;
				}
					#Menu1 li a:hover {
						color:#333333;
					}
					#Menu1 li.current a,
					#Menu1 li.section a {
						color:#333333;
						font-weight:bold;
					}

#Header2 {
	clear:left;
}
	#Header2 h1 {
		text-align: center;
		text-transform: lowercase;
		color:#333333;
		font-size:1.5em;
		margin-top:40px;
	}

#ContentContainer {
	padding-top:20px;
	padding-bottom:20px;
	overflow: auto;
}

#Banner {
	text-align: center;
}

#Menu2 {
	margin-left: 20px;
	width: 17em;
	float:left;
	background:#f0f0f0;
	border:1px solid #ddd;
	padding:10px 10px 10px 10px;
}
	#Menu2 li {
		padding-left:15px;
		background:url(../images/menu2_arrow.gif) no-repeat left center;
	}
	#Menu2 a {
		color:#333;
		font-weight:bold;
		font-size:1.1em;
		line-height:1.6em;
		text-decoration:none;
	}
	#Menu2 a:hover {
		text-decoration:underline;
	}
	#Menu2 li.current a,
	#Menu2 li.section a {
		color:#0083C8;
	}

#Content {
	float:left;
	margin:0;
	width:100%;
}

.wrks img {
	border:1px solid #333333;
}

/*
.wrks {
	display: block;
	width: 125px;
	height: 101px;
}
.wrks span {
	display:none;
}
#works1 { background: url("/assets/images/work1b.png") no-repeat 0 0; }
#works1:hover { background: url("/assets/images/work1.png") no-repeat 0 0; }
#works2 { background: url("/assets/images/work2b.png") no-repeat 0 0; }
#works2:hover { background: url("/assets/images/work2.png") no-repeat 0 0; }
#works3 { background: url("/assets/images/work3b.png") no-repeat 0 0; }
#works3:hover { background: url("/assets/images/work3.png") no-repeat 0 0; }
#works4 { background: url("/assets/images/work4b.png") no-repeat 0 0; }
#works4:hover { background: url("/assets/images/work4.png") no-repeat 0 0; }
*/

div.breadcrumbs {
	margin-bottom:10px;
	font-size:1em;
	color:#666;
}
div.breadcrumbs a {
	text-decoration:none;
}

#Footer {
	clear:both;
	text-align:center;
	font-family: 'CenturyGothic', 'Century Gothic', 'ArialMT', 'Arial', sans-serif, Helvetica;
	font-size:1.1em;
	color:#333333;
	margin-top:70px;
}
	#Footer span {
		color:#ccc;
		font-size:1.1em;
		line-height:2em;
		font-weight:bold;
	}
	#Footer a {
		color:#666666;
	}
		#Footer a:hover {
			text-decoration:none;
		}


/* The rest of this file is for the second tutorial */
#NewsList,
#StaffList {
	background:#f0f0f0;
	border:1px dotted #ccc;
	padding:10px;
}

#NewsList li,
#StaffList li {
	margin: 0;
	list-style-type: none;
}
	#NewsList li.newsDateTitle span {
		color:#666;
		line-height:2em;
	}
	#NewsList li.newsDateTitle a {
		font-size:1.3em;
		font-weight:bold;
		color:#0083C8;
		text-decoration:none;
		padding-left:20px;
		background:url(../images/treeicons/news-file.gif) no-repeat left center;
	}
		#NewsList li.newsDateTitle a:hover {
			border-bottom:1px dotted #0083C8;
		}
		
	#NewsList li.newsSummary {
		margin-bottom:20px;
	}
		#NewsList li.newsSummary span {
			font-size:1.1em;
			line-height:1.5em;
			color:#333;
		}
		#NewsList li.newsSummary a.readMoreLink {
			color:#0083C8;
			text-decoration:none;
		}
			#NewsList li.newsSummary a.readMoreLink:hover {
				border-bottom:1px dotted #0083C8;
			}

div.newsDetails {
	margin-bottom:10px;
}

div.newsDetails p {
	color:#666;
	margin:0;
	font-size:1em;
}

div.pageComments {
	background:#f0f0f0;
	border:1px dotted #ccc;
	padding:10px;
}

#StaffList .staffname { 
	clear: both;
	padding-left: 60px;
	height: 1.2em;
}

#StaffList .staffphoto {
	float: left;
	margin-left: 3px;
	margin-top: -1.2em;
}     
#StaffList .staffphoto img {
	border:1px solid #AAA;
}

#StaffList .staffdescription {
	margin-left: 60px;
	margin-bottom:30px;
}

#StaffPhoto {
	float: left;
	margin-right: 10px;
}

#StaffPhoto img {
	border:1px solid #AAA;
}

#PageComments {
	list-style:none;
	background:#e9e9e9;
	border:1px solid #ccc;
	border-bottom:0;
	padding:0;
	margin:0;
}
	#PageComments li {
		list-style:none;
		padding:5px;
		margin:0;
		font-size:1em;
		border-bottom:1px dotted #bbb;
	}
		#PageComments li p span {
			font-style:italic;
		}
		#PageComments a.deletelink {
			font-weight:bold;
		}

			
#PageNumbers {
	font-weight:bold;
	color:#333;
	font-size:1.1em;
	text-align:center;
	padding:5px;
	border:1px solid #ddd;
	background:#e9e9e9;
}
#PageNumbers * {
	padding:0 5px;
	line-height:1.5em;
}
#PageNumbers a {
	color:#0083C8;
	text-decoration:none;
}
	#PageNumbers a:hover {
		text-decoration:underline;
	}


#container {
	position:relative;
	width:620px;
	height:850px;
	margin:10px auto 0 auto;
	padding:0;
	border:0px solid #AAAAAA;
	background-repeat:no-repeat;
	overflow:hidden;
	letter-spacing:1px;
}
.paintings {
	background:url(/assets/works/paintings/lematin.jpg);
	background-position:11px 83px;
}
.paintingscolor {
	background:url(/assets/works/paintings/lamercolor.jpg);
	background-position:11px 137px;
}
.sculptures {
	background:url(/assets/works/sculptures/dao.jpg);
	background-position:11px 83px;
}
.graphics {
	background:url(/assets/works/graphics/franceblack.jpg);
	background-position:74px 137px;
}
#container a.works {
	float:left;
	padding:6px 6px;
	display:inline;
	color:#000;
	text-decoration:none;
	width:50px;
	height:50px;
	cursor:default;
}
#container a.works img.thumb {
	display:block;
	border:1px solid #000;
}

#container a.works span {
	display:none;
	border:0;
	width:602px;
	background:#FFFFFF;
	border:1px solid #fff;
	text-align:center;
}
#container a.works span img {
	margin:10px auto;
	border:1px solid #000;
}

#container a.works:hover {
	white-space:normal;
}
#container a.works:hover img.thumb {
	border:1px solid #fff;
}
#container a.works:hover span {
	display:block;
	position:absolute;
	left:9px;
	z-index:10;
	height:710px;
}
.paintings a.works:hover span,
.sculptures a.works:hover span {
	top:71px;
}
.paintingscolor a.works:hover span,
.graphics a.works:hover span {
	top:125px;
}
#container a.works:active img.thumb {
	border:1px solid #fc0;
} 
#container a.works:active span,
#container a.works:focus span {
	display:block;
	position:absolute;
	left:9px;
	z-index:5;
	height:710px;
}
.paintingscolor a.works:active span,
.paintingscolor a.works:focus span,
.graphics a.works:active span,
.graphics a.works:focus span {
	top:125px;
}
.paintings a.works:active span,
.paintings a.works:focus span,
.sculptures a.works:active span,
.sculptures a.works:focus span {
	top:71px;
}

#container a.works:focus {
	outline:0;
}
#container a.works:focus img.thumb {
	border:1px solid #fc0
}



/*
#container {
	position:relative;
	width:620px;
	height:800px;
	margin:10px auto 0 auto;
	padding:0;
	border:0px solid #AAAAAA;
	background-repeat:no-repeat;
	overflow:hidden;
	letter-spacing:1px;
}
.paintings {
	background:url(/assets/works/paintings/bachwacht.jpg);
	background-position:10px 136px;
}
.sculptures {
	background:url(/assets/works/sculptures/dao.jpg);
	background-position:10px 71px;
}
.graphics {
	background:url(/assets/works/graphics/franceblack.jpg);
	background-position:10px 136px;
}
#container ul {
	width:620px;
	height:800px;
	margin:0 5px 0 16px; 
	float:left; 
	padding:0;
	list-style-type:none;
}
#container li {
	float:left;
	list-style-type:none;
}		
#container a.works, #container a.works:visited {
	display:block;
	color:#000;
	text-decoration:none;
	border:1px solid #AAAAAA;
	margin:0 0 0 -17px;
	text-align:left;
	cursor:default;
	height:50px;
	width:50px;
}
#container a.works span {
	position:absolute;
	width:1px;
	height:1px;
	top:0px;
	left:9px;
	overflow:hidden;
	background:#FFFFFF;
}
#container a.works:hover {
	border:1px solid #666666;
}
#container a.works:hover span {
	position:absolute;
	width:610px;
	height:710px;
	color:#666666;
}
.paintings a.works:hover span, .graphics a.works:hover span {
	margin-top:135px;
}
.sculptures a.works:hover span {
	margin-top:70px;
}
#container a.works:hover img {
	float:left;
	margin-right:5px;
}
.paintings a.works:hover img, .graphics a.works:hover img {
	border:1px solid #AAAAAA;
}
.sculptures a.works:hover img {
	border:1px solid #FFFFFF;
}

#container a.painting01 { background:url(/assets/works/paintings/bachwachttnail.jpg); }
#container a.painting02 { background:url(/assets/works/paintings/backtoyouItnail.jpg); }
#container a.painting03 { background:url(/assets/works/paintings/backtoyouIItnail.jpg);}
#container a.painting04 { background:url(/assets/works/paintings/coupletnail.jpg);}
#container a.painting05 { background:url(/assets/works/paintings/daoItnail.jpg);}
#container a.painting06 { background:url(/assets/works/paintings/lamanttnail.jpg);}
#container a.painting07 { background:url(/assets/works/paintings/lamertnail.jpg);}
#container a.painting08 { background:url(/assets/works/paintings/ledosblanctnail.jpg);}
#container a.painting09 { background:url(/assets/works/paintings/lemariagetnail.jpg);}
#container a.painting10 { background:url(/assets/works/paintings/lemariagecolortnail.jpg);}
#container a.painting11 { background:url(/assets/works/paintings/lematintnail.jpg);}
#container a.painting12 { background:url(/assets/works/paintings/lematin2009tnail.jpg);}
#container a.painting13 { background:url(/assets/works/paintings/lesmariestnail.jpg);}
#container a.painting14 { background:url(/assets/works/paintings/lilieandfriendtnail.jpg);}
#container a.painting15 { background:url(/assets/works/paintings/lilytnail.jpg);}
#container a.painting16 { background:url(/assets/works/paintings/nudotnail.jpg);}
#container a.painting17 { background:url(/assets/works/paintings/onestnail.jpg);}
#container a.painting18 { background:url(/assets/works/paintings/pimpernelletnail.jpg);}
#container a.painting19 { background:url(/assets/works/paintings/quimarchetnail.jpg);}
#container a.painting20 { background:url(/assets/works/paintings/selfportraittnail.jpg);}
#container a.painting21 { background:url(/assets/works/paintings/untitled2009tnail.jpg);}

#container a.sculpture01 { background:url(/assets/works/sculptures/daotnail.jpg); }
#container a.sculpture02 { background:url(/assets/works/sculptures/lamanttnail.jpg); }
#container a.sculpture03 { background:url(/assets/works/sculptures/peuttreunjourtnail.jpg);}
#container a.sculpture04 { background:url(/assets/works/sculptures/peuttreunjourIItnail.jpg);}

#container a.graphic01 { background:url(/assets/works/graphics/franceblacktnail.jpg); }
#container a.graphic02 { background:url(/assets/works/graphics/indiablacktnail.jpg); }
#container a.graphic03 { background:url(/assets/works/graphics/indiabluetnail.jpg); }
#container a.graphic04 { background:url(/assets/works/graphics/petitscalinsItnail.jpg); }
#container a.graphic05 { background:url(/assets/works/graphics/petitscalinsIItnail.jpg); }
#container a.graphic06 { background:url(/assets/works/graphics/petitscalinsIIItnail.jpg); }
#container a.graphic07 { background:url(/assets/works/graphics/petitscalinsIVtnail.jpg); }
#container a.graphic08 { background:url(/assets/works/graphics/petitscalinsVtnail.jpg); }
#container a.graphic09 { background:url(/assets/works/graphics/petitscalinsVItnail.jpg); }
#container a.graphic10 { background:url(/assets/works/graphics/petitscalinsVIItnail.jpg); }
#container a.graphic11 { background:url(/assets/works/graphics/petitscalinsVIIItnail.jpg); }
#container a.graphic12 { background:url(/assets/works/graphics/petitscalinsIXtnail.jpg); }
#container a.graphic13 { background:url(/assets/works/graphics/petitscalinsXtnail.jpg); }
#container a.graphic14 { background:url(/assets/works/graphics/petitscalinsXItnail.jpg); }
#container a.graphic15 { background:url(/assets/works/graphics/petitscalinsXIItnail.jpg); }
#container a.graphic16 { background:url(/assets/works/graphics/petitscalinsXIIItnail.jpg); }

*/