/* 
Title:     Sunny Art Museum main styles
Author:    yorenchang@gmail.com
Updated:   Sep 26 2007
*/

body{
	margin: 0;
	padding: 0;
	background: #d4d4d4 url(../img/bg_subpage.gif) 0 0 repeat-x;
	font: 12px/1.5em Tahoma, Verdana, sans-serif;
	color: #818181;
}
body.main{
	background: #d4d4d4 url(../img/bg.gif) 0 0 repeat-x;
}
body.index{
	background: #d4d4d4 url(../img/bg_index.gif) 0 0 repeat-x;
}

img{
	border: 0;
}
a:link{
	
}
a:visited{
	
}
a:hover{
	text-decoration: none;
	
}
.left{
	float: left;
}
.right{
	float: right;
}
img.left, img.right{
	padding: 3px;
}
.none{
	display: none;
}
.clear{
	clear: both;
}

/* wrapper
------------------------------------------------*/

#wrapper{
	width: 860px;
}

/* header
------------------------------------------------*/

/* content
------------------------------------------------*/

/*index*/

.index #wrapper{
	background-color: #fff;
	width: 984px;
}
.index #nav{
	width: 300px;
	background-color: #d4d4d4
}

/* homepage */

.main #nav{
	height: 270px;
}
.main #monoSlideshow{
	float: left;
	width: 710px;
	height: 270px;
}

/* subpage */

#nav{
	float: left;
	width: 150px;
	height: 160px;
}
#photo{
	float: left;
	width: 710px;
	height: 160px;
}

#main{
	clear: both;
	width: 860px;
	background: #d4d4d4 url(../img/bg_main.gif) bottom right repeat-y;
	float: left;
}
	#main #subnav{
		float: left;
		width: 150px;
		text-align: right;
		padding-top: 10px;
	}
		#main #subnav p{
			margin: 0;
		}
		#main #subnav ul{
			margin: 0 10px 0 0;
			padding: 0;
		}
			#main #subnav ul li{
				list-style: none;
				line-height: 2em;
				color: #603913;
			}
			#main #subnav ul li a:link, #subnav ul li a:visited{
				color: #A69A8F;
				text-decoration: none;
			}
			#main #subnav ul li a:hover{
				text-decoration: underline;
			}
	#main #content{
		float: left;
		background-color: #fff;
		font-size: 15px;
	}
	#main #content.three{
		width: 500px;
	}
	#main #content.three h2 a:link, #main #content.three h2 a:visited{
		color: #A69A8F;
		text-decoration: none;
	}
	#main #content.three h2 a:hover{
		text-decoration: underline;
	}
	#main #content.floor, #main #content.news, #main #content.exhibit{
		width: 710px;
	}
		#main #content.floor dl{
			font-size: 12px;
		}
			#main #content.floor dl dt{
				font-weight: bold;
				color: #2DAAC6;
			}
			#main #content.floor dl dd{
				margin: 0 0 1em 0;
			}
				#main #content.floor dl dd a:link, #main #content.floor dl dd a:visited{
					color: #818181;
				}
				#main #content.floor dl dd span.date{
					font-size: 11px;
					color: #603913;
				}
		#main #content.floor #second{
			background: #f4f4f4;
			padding: 10px 0;
		}
		#main #content.floor p a.s:link, #main #content.floor p a.s:visited{
			font-size: 12px;
			font-weight: bold;
			color: #2DAAC6;
			text-decoration: none;
		}
		#main #content.floor p a.s:hover{
			text-decoration: underline;
		}
		#main #content p, #main #content.floor dl, .main #main #content h2, #main #content.news h2, #main #content.exhibit .focus, #main #content form#commentForm{
			margin: 10px 20px 15px 20px;
			line-height: 1.5em;
		}
		#main #content.news h2, .main #main #content h2{
			color: #A69A8F;
			font-size: 15px;
		}
		#main #content.news p, .main #main #content p{
			font-size: 12px;
		}
		#main #content.news #nlist{
			margin: 20px 0 0 0;
			padding-left: 20px;
		}
			#main #content.news #nlist .newsItem{			
				width:325px;
				margin: 0 10px 0 0;
				float: left;
			}
			#main #content.news #nlist .hover{
				background: #f4f4f4;
			}
				#main #content.news #nlist .newsItem p.date{
					font: 11px Georgia, serif;
					color: #603913;
					margin: 5px 0 0 10px;
				}
				#main #content.news #nlist .newsItem p{
					font-size: 11px;
					margin: 0 0 5px 10px;
				}
				#main #content.news #nlist .newsItem p a:link, #main #content.news #nlist .newsItem p a:visited{
					color: #818181;
					text-decoration: none;
				}
				#main #content.news #nlist .newsItem p a:hover{
					text-decoration: underline;
				}
		#main #content.exhibit .focus{
			background-color: #CAEAF1;
			font-size: 13px;
			padding: 5px 0;
		}
			#main #content.exhibit .focus img{
				margin: 0 3px 13px 0;
			}
			#main #content.exhibit .focus h2, #main #content.exhibit #exData2 h2{
				color: #603913;
				font-size: 15px;
				margin: 0;
			}
			#main #content.exhibit .focus h2 a:link, #main #content.exhibit .focus h2 a:visited{
				color: #603913;
				text-decoration: none;
			}
			#main #content.exhibit .focus h2 a:hover{
				text-decoration: underline;
			}
			#main #content.exhibit .focus p, #main #content.exhibit #exData2 p{				
				margin: 10px 20px;
				font-family: sans-serif;
				line-height: 1.2em;
			}
			#main #content.exhibit .focus p.date, #main #content.exhibit #exData2 p.date{
				font: bold 12px Georgia, Times, serif;
				margin: 0;
			}
		#main #content.exhibit #singles{
			padding-left:20px;
		}
			#main #content.exhibit .single{
				width: 330px;
				height: 128px;
				float: left;
				margin: 0 10px 10px 0;
				background-color: #f4f4f4;
			}
				#main #content.exhibit .single img{
					padding: 3px 10px 20px 10px;
				}
				#main #content.exhibit .single h2{					
					font-size: 12px;
					margin: 0;
					color: #2DAAC6;
				}
				#main #content.exhibit .single h2 a:link, #main #content.exhibit .single h2 a:visited{
					color: #2DAAC6;
					text-decoration: none;
				}
				#main #content.exhibit .single h2 a:hover{
					text-decoration: underline;
				}
				#main #content.exhibit .single p.date, #main #content.exhibit #exData3 p.date{
					font: 11px Georgia, Times, serif;
					margin: 0;
					color: #603913;
				}
				#main #content.exhibit .single p{
					font-size: 11px;
					margin: 10px;
				}
			#main #content.exhibit .exData{
				clear: both;
				margin: 10px 10px 0 20px;
			}
				#main #content.exhibit #exData1{
					margin: 0 20px 15px 0;
					width: 190px;
					background-color: #2DAAC6;
					color: #fff;
					font-size: 11px;
					float: left;
				}
				#main #content.exhibit #exData2{
					margin: 0 0 15px 0;
					width: 460px;
					font-size: 13px;
					float: left;
				}
					#main #content.exhibit #exData2 p{
						margin: 10px 0 0 0;
					}
				#main #content.exhibit #exData3{
					width: 190px;
					margin: 0 20px 15px 0;
					float: left;
				}
					#main #content.exhibit #exData3 h3{
						color: #2DAAC6;
						font-size: 12px;
						margin: 0;
					}
					#main #content.exhibit #exData3 p{
						margin: 0 0 10px 0;
						font-size: 11px;
						line-height: 1.3em;
					}
		#main #content.exhibit #photos{
			background-color: #f4f4f4;
			padding: 10px 0;
		}
			#main #content.exhibit #photos div {
				margin: 0 0 0 10px;
			}
			#main #content.exhibit #photos img {
				border: 1px solid #cccccc;
				margin: 8px 4px;
			}
		#main #content p.message{
			border: 1px solid #603913;
			background-color: #e1e299;
			width: 90%;
			padding: 1em 0;
			color: #603913;
			font-size: 12px;
			font-weight: bold;
		}
		#main #content form#commentForm{
			font-size: 12px;
		}
			#main #content form#commentForm fieldset{
				border: none;
				padding: 0;
				margin: 0;
			}
				#main #content form#commentForm fieldset legend{
					color: #603913;
					font-weight: bold;
					padding: 0;
				}
			#main #content form#commentForm label{
				display: block;
				color: #603913;
				margin: 10px 0 0 0;
			}
			#main #content form#commentForm input.submit{
				float: right;
				margin: 10px 20px 0 0;
				border: 2px solid #cfcfcf;
				background-color: #efefef;
				color: #818181;
			}
	#main #newslist{
		float: left;
		width: 210px;
		background-color: #f4f4f4;
	}
		#main #newslist p img{
			margin: 10px 0 0 0;
		}
		.main #main #newslist p.date{
			font: 11px Georgia, serif;
			color: #603913;
			margin: 10px 0 0 10px;
			padding: 0;
		}
		.main #main #newslist p{
			font-size: 11px;
			margin: 0 0 5px 10px;
			padding: 0;
		}
		.main #main #newslist p a:link, .main #main #newslist p a:visited,#main #content.exhibit #exData3 p a:link, #main #content.exhibit #exData3 p a:visited{
			color: #818181;
			text-decoration: none;
		}
		.main #main #newslist p a:hover, #main #content.exhibit #exData3 p a:hover{
			text-decoration: underline;
		}
		#main #newslist h2{
			margin: 0 0 0 10px;
			color: #2DAAC6;
			font-size: 12px;
		}
		#main #newslist p{
			margin: 0 0 10px 10px;
		}
		#main #newslist p.more a:link, #main #newslist p.more a:visited{
			color: #603913;
			font-weight: bold;
			text-decoration: none;
		}
		#main #newslist p.more a:hover{
			text-decoration: underline;
		}

/* footer
------------------------------------------------*/

#footer{
	clear: both;
}