/* Vertical centering: make div as large as viewport and use table layout */
div.vertical {top: 0; left: 0; width: 100%; height: 100%;
  position: fixed; display: table}
p.vert {display: table-cell; vertical-align: middle}

/* Horizontal centering of image: set left & right margins to 'auto' */
img.displayed {display: block; margin: 1em auto}

/* Also center the lines in the paragraph */
p.vert {text-align: center}

img.stretchy {
  width: 80%;
  position:  relative;
}

#maincontainer{
		width: 100%;
		height: 100%;
		overflow: auto;
		background: none;
		margin: 0 auto;
		/*margin-top: 45px;*/
		padding: 0;
	    /*position: absolute*/
		z-index: 50;
		text-align: center;
		position: fixed;
	}
	
#entire {
	position: relative;
	width: 816px;
	margin: 0 auto;
	padding-bottom: 20px;
}

/*

.nav {
  width: 816px;
  height: 612px;
  background: url(images/ByHandStacked.png) no-repeat;
  position: absolute;
  top:  0px;
  left:  0px;
  list-style-type: none;
}

.nav li a:link, .nav li a:visited {
  position: absolute;
  top: 0;
  height: 612px;
  text-indent: -9000px;
  overflow: hidden;
}

  .nav .home a:link, .nav .home a:visited {
    left: 0px;
    width: 816px;
  }
  
  .nav .home a:hover, .nav .home a:focus {
    background: url(images/ByHandStacked.png) no-repeat 0px -612px;
  }
  
  .nav .home a:active {
    background: url(images/ByHandStacked.png) no-repeat 0px -612px;
  }
  
/*This is an entirely new div class, despite using the same
names as above -- it is called by jQuery to replace the .nav .home divs*/ 

/* functioning:

.nav-home {
  position: absolute;
  top: 0;
	left: 0;
	width: 816px;
  height: 612px;
  text-indent: -9000px;
  overflow: hidden;
  background: url(images/ByHandStacked.png) no-repeat 0px -612px;
}

*/


/* This limits the link rollover space to just the blue text,
  while keeping the image rollover at full size.*/

.nav {
  width: 816px;
  height: 612px;
  background: url(images/ByHandStacked.png) no-repeat 0px 0px;
  position: absolute;
  top:  0px;
  left:  0px;
  list-style-type: none;
}

.nav li a:link, .nav li a:visited {
  position: absolute;
  top: 190px;
  height: 205px;
  text-indent: -9000px;
  overflow: hidden;
}

  .nav .home a:link, .nav .home a:visited {
    left: 139px;
    width: 525px;
  }
  
  .nav .home a:hover, .nav .home a:focus {
    background: url(images/ByHandStacked.png) no-repeat -139px -802px;
  } 
  
  .nav .home a:active {
    background: url(images/ByHandStacked.png) no-repeat 0px -612px;
  }
  
/*This is an entirely new div class, despite using the same
names as above -- it is called by jQuery to replace the .nav .home divs*/ 

.nav-home {
  position: absolute;
  top: 0;
	left: 0;
	width: 816px;
  height: 612px;
  text-indent: -9000px;
  overflow: hidden;
  background: url(images/ByHandStacked.png) no-repeat 0px -612px;
}