/* CSS Document */
body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	line-height: 1.5;
	background-attachment: fixed;
	background-image: url(../images/bg01.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}

#container {
	width: 95%;
	margin: 0 auto;
	max-width: 800px;
	background-color: rgba(255,255,255,0.25);
	font-family: Verdana, Geneva, sans-serif;
}
header {
	min-height: 100px;
	background-color: rgba(255,255,255,0.25);
}
header h1 {
	margin: 0 20px 0 120px;
	text-align: center;
	color: #000;
	background-color: rgba(255,255,255,0.25);
}
/*The rule below lets images adjust in size to their containers. Since no width is set for 
the images in html or css, the images will display the full width of their contain
up to their native resolution which is 360px by 360px. They won't go larger than this and
will maintain their aspect ratio as long as no other sizes are set in css or html. 
Image divs containing flower images do this. */

img {
	max-width:100%;
}
nav {
	background-color: rgba(255,255,255,0.25);
}
nav ul { /* removes default margins and padding from ul */
	margin:0;
	padding:0;

}
nav li {
	list-style:none; /* removes bullet */
	height:40px;
	line-height:40px; /* centers text vertically in nav button */

}
nav li a {
	text-decoration: none; /* removes underline */
	font-weight: bold;
	color: #000;
	display: block;	/* makes clickable area fill the button */

}
div.image {
	text-align:center;
}
p.caption {
	margin: 5px 0 40px 0;
	font-weight: bold;
	color: #000;
}
footer {
	background-color: rgba(255,255,255,0.25);
	text-align: center;
	font-size: 0.9em;
	clear: both;
	padding: 0px;
}