/* Basic coding for the body. Background image should show ricepaperlarge.png, pale yellow background color displayed if image doesn't render, font color set to a dark teal, sans-serif text.*/

body {
  background-image: url(ricepaperlarge.png);
  background-color: #ffffcc;
  color: #006666;
  font-family: sans-serif;
}


/* Style to bold and center the welcome text on the main page */

#welcome {
  font-weight: bold;
  text-align: center;
}

h1 {
  line-height: 200%;
}


/* Nav style largely borrowed from the Pacific Trails lessons, but removing the float - it doesn't seem to play well with the "papers" effect. */
nav {
	font-weight: bold;
	display: block;
	text-align: center;
}

/*these three styles set the color of links for visited, unvisited, and hovered over; also remove underline from links; based on the nav links from Pacific Trails, but I wanted  */
a:link {
	color: #669900;
	text-decoration: none;
}

a:visited {
	color: #264d00;
	text-decoration:none;
}

a:hover {
	color: #99ff66;
	text-decoration:  none;
}

/* remove list markers from list items in the nav */
nav ul {
	list-style-type: none;
	padding: 0;
}

/* make the nav list display as a horizontal bar, space list items out */

nav li {
	display: inline;
	padding: 0px 10px;
}
/* This whole section is lifted from the "shuffled papers" effect in the class materials - it should enclose the content designated with class "papers" in a box that resembles, well, shuffled papers. Source URL for the code is here: http://cssdeck.com/labs/shuffled-paper */

.papers, .papers:before, .papers:after
{
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}

.papers
{
	position: relative;
	width: 50%;
	padding: 2em;
	margin: 50px auto;
}

.papers:before, .papers:after
{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: rotateZ(2.5deg);
	-o-transform: rotate(2.5deg);
	transform: rotateZ(2.5deg);
	z-index: -1;
}

.papers:after
{
	-webkit-transform: rotateZ(-2.5deg);
	-o-transform: rotate(-2.5deg);
	transform: rotateZ(-2.5deg);
}

.papers h1
{
	font-size: 1.8em;
	font-weight: normal;
	text-align: center;
	padding: 0.2em 0;
	margin: 0;
	border-top: 1px solid #ddd;
	border-bottom: 2px solid #ddd;
}

.papers p
{
	text-align: left;
	margin: 1.5em 0;
}
/* end shuffled papers section */

/* These styles should configure images to float to one side for the yard list, feeding, city list, and city sites pages. */

#sapsucker {
  float: right;
}

#quail {
  float: left;
}

#finches {
  float: left;
}

#egret {
  float: right;
}

/* "Zebra striping" for the table, and some slight padding for readability */

tr:nth-of-type(even) {
	background-color: #e6ffe6
}

td {
  padding: 5px;
}

th {
  padding: 5px;
}

/* Bolding and padding to make description list more readable */

dt {
  padding: 10px;
  font-weight: bold;
}

dt {
  padding: 10px;
}

/* Smaller, centered text on the progress div */
#progress {
  font-size: 0.95em;
  text-align: center;
}

/* Styles to make the form display neatly */
label {
	float: left;
	display: block;
	width: 8em;
	padding-right: 1em;
}

input {
	display: block;
	margin-bottom: 1em;
}

textarea {
	display: block;
	margin-bottom: 1em;
}