body {
  background: #CCCCCC;
  font-family: sans-serif;
  font-size: 13px;
  margin: 20%;
}


.title{
  
  text-align: center;
  font-size: 40px;
  color: #000000;
  font-family: serif;
    	
}

.main{	
  font-size: 13px;
  text-align: justify;
  color: #006600;
	
}


.subtitle{	 
  font-size: 20px;
  font-style: italic;
  text-align: center;
   color: #000000;
  font-family: serif;
	
}

.button{	 
  font-size: 20px;
  text-align: center;
	
}


/* generic stuff for thumbs, poems and vines */

.thumb {
  position: absolute; 
  z-index:3;
  width: 700px;
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.hidden {
  visibility: hidden;
		
}

.visible {
  visibility: visible;
	}

.poem1 {
  position: absolute;
  top: 200px;
  width: 260px;
  height: 1000px;
  margin: 0px 200px;
  padding: 20px;
  padding-top: 20px;
  z-index:2;
  color: white;
  background-color: #000000;
}

.poem2 {
  position: absolute;
  top: 100px;
  width: 260px;
  height: 1000px;
  margin: 0px 200px;
  padding: 20px;
  padding-top: 20px;
  z-index:2;
  color: white;
  background-color: #000000;
}


.justify {
  text-align: justify;
}

.center {
  text-align: center;
}


.vine {
  position: absolute;
  width: 700px;
  z-index:1;
  text-align: center;
  
}

/* top positioning of each element */

#title {
  top: 80px;
}

#subtitle {
  top: 140px;
}

#thumb1 {
  top: 200px;
}

#vine1 {
  top: 250px;
}

#thumb2 {
  top: 300px;
}

#vine2 {
  top: 350px;
}

#thumb3 {
  top: 400px;
}

#vine3 {
  top: 450px;
}

#thumb4 {
  top: 500px;
}

#vine4 {
  top: 550px;
}

#thumb5 {
  top: 600px;
}

#button {
  top: 780px;
}

#button3 {
  top: 300px;
}


#thumb6 {
  top: 100px;
}

#vine6 {
  top: 150px;
}

#thumb7 {
  top: 200px;
}

#vine7 {
  top: 250px;
}

#thumb8 {
  top: 300px;
}

#vine8 {
  top: 350px;
}

#thumb9 {
  top: 400px;
}

#vine9 {
  top: 450px;
}

#thumb10 {
  top: 500px;
}


#vine10 {
  top: 550px;
}

#thumb11 {
  top: 600px;
}