#main{
   width:1100px;
   /*border:thin solid black;*/
   position:relative;
   margin-left:auto; /*centre*/
   margin-right:auto; /*centre*/
}

.mainheight{
   height:1320px;
}

.peachbodyHeight{
height:1520px;
}


.cranebodyHeight{
height:1740px;

}

.heartbodyHeight{
height:1720px;

}


#navigation{
   position:absolute;
   top:0px;
   left:0px;
   width:100%;
   height:30px;
   /*border:thin solid red;*/
   text-align:right;
   
}

#navigation2{
position:absolute;
   top:0px;
   left:0px;
   width:50%;
   height:30px;
   /*border:thin solid red;*/
   text-align:left;

}

.image{
height:400px;
width:400px;
/*border:thin solid red;*/
border-top-left-radius:200px;
   border-top-right-radius:200px;
   border-bottom-left-radius:200px;
   border-bottom-right-radius:200px;
   background-color:white;
}

#image1{
position:absolute;
left:120px;
top:57.5px;
}

#image2{
position:absolute;
right:120px;
top:57.5px;
}

#image3{
position:absolute;
left:120px;
bottom:57.5px;
}

#image4{
position:absolute;
right:120px;
bottom:57.5px;
}








.nav{
   padding-left:10px;
   padding-right:10px;
   text-decoration:none;
   font-family: 'Abril Fatface', cursive;
   /*font-family:'Poiret One', cursive;
   font-weight: bold;*/
   font-size: 20px;
   color:white;
   background-color:#6B10E8;
   border-top-left-radius:5px;
   border-top-right-radius:5px;
   
}
.nav:visited{

}

.typography1 {
   float:left;
   color: #306DA7; 
   font-size: 30pt; 
   font-family: 'Signika', sans-serif; 
   padding-bottom:200px;
   padding-top: 50px;
   padding-left:20px;
   margin-right:50px;

}

#footer{
   position:absolute;
   bottom:0px;
   left:0px;
   width:100%;
   height:25px;
   background-color:#6B10E8;
   color:white;
   text-align:center;
   font-size:10pt;
   /*border: thin solid green;*/
   border-bottom-left-radius:15px;
   border-bottom-right-radius:15px;
   /*border-top-left-radius:15px;
   border-top-right-radius:15px;*/
   
   
}

#coll{
border: thin solid red;
width:400px;
height: 400px;
position:absolute;
top:15px;
left:15px;
}

body{
background-color:#5B80FD;
}

.m{
position:absolute;
top:0px;
width:110px;
height:60px;
/*border:thin solid red;*/
border-bottom-left-radius:110px;
border-bottom-right-radius:110px;
background-color:#AB72FF;

}

#n{
position:absolute;
left:0px;
}

#s{
position:absolute;
left:110px;
}
#d{
position:absolute;
left:220px;
}
#f{
position:absolute;
left:330px;
}
#g{
position:absolute;
left:440px;
}
#h{
position:absolute;
left:550px;
}
#j{
position:absolute;
left:660px;
}
#k{
position:absolute;
left:770px;
}
#l{
position:absolute;
left:880px;
}
#m{
position:absolute;
left:990px;
}



#banner{
   position:absolute;
   top:30px;
   left:0px;
   width:100%;
   height:270px;
   /*border:thin solid blue;*/
   background-color:#6B10E8;
   border-top-left-radius:15px;

   /*border-bottom-left-radius:15px;
   border-bottom-right-radius:15px;*/
}

/*#content{
   position:absolute;
   top:275px;
   left:0px;
   width:1080px;
   border:thin solid green;
   background-color:white;
   padding:10px;
}*/

#content{
   position:absolute;
   top:310px;
   left:0px;
   width:100%;
   /*border:thin solid green;*/
   background-color:#87CEFA;
    /*border-top-left-radius:15px;
   border-top-right-radius:15px;
   border-bottom-left-radius:15px;
   border-bottom-right-radius:15px;*/
 
}

.creditsbodyheight{
height:875px;
}

#creditsContent{
   position:absolute;
   top:310px;
   left:0px;
   width:100%;
   height:530px;
   /*border:thin solid green;*/
   background-color:#87CEFA;
    /*border-top-left-radius:15px;
   border-top-right-radius:15px;
   border-bottom-left-radius:15px;
   border-bottom-right-radius:15px;*/
 
}




.mainContentHeight{
   Height:975px;
}

#title{
   position:absolute;
   top:50px;
   right:30px;
   width:1100px;
   color:white;
   font-size:100pt;
   font-family:'Fontdiner Swanky', cursive;
   text-align:right;
   /*border:thin solid red;*/
}

.floatright {
  float:right;
  padding-left:5px;
  padding-right:10px;

}

 ul{     margin:0px;
        padding: 0;
        list-style: none;
        
    }
    ul li{
        display: inline-block;
        position: relative;
        line-height: 100%;
        text-align: left;
    }
    ul li a{
        display: block;
        padding: 8px 25px;
        color: #333;
        text-decoration: none;
    }
    ul li a:hover{
        color: #6B10E8;
        background: white;
		
    }
    ul li ul.dropdown{
        min-width: 110px; /* Set width of the dropdown */
        background: white;
		font-family:'Abril Fatface', cursive;
        display: none;
        position: absolute;
        z-index: 999;
		top:30px;
        right: 0;
		border:2px solid grey;
		/*border-top-left-radius:10px;
   border-bottom-left-radius:10px;*/
   
		
    }
    ul li:hover ul.dropdown{
        display: block;	/* Display the dropdown */
    }
    ul li ul.dropdown li{
        display: block;
    }
	
	.abc{
	color:#6B10E8;
	}
	
	.abc:hover{
	background:#6B10E8;
	color:white;
	}
	
	
	#image1{
		
		background-image:url("images/peach2.jpg");
		background-repeat:no-repeat;
		 background-position: center; 
	}
	
	
	#image2{
		
		background-image:url("images/crane5.jpg");
		background-repeat:no-repeat;
		 background-position: center; 
	}
	
	#image3{
		background-image:url("images/boat4.jpg");
		background-repeat:no-repeat;
		 background-position: center; 
	}
	
	#image4{
		
		background-image:url("images/heart2.jpg");
		background-repeat:no-repeat;
		 background-position: center; 
	}
	
	
	.text{
      height:400px;
       width:400px;
      border:thin solid grey;
      border-top-left-radius:200px;
        border-top-right-radius:200px;
      border-bottom-left-radius:200px;
      border-bottom-right-radius:200px;
      background-color:white;
	  text-align:center;
	  font-family: 'Open Sans Condensed', sans-serif;
	  font-size:50px;
	  color:black;
	  opacity:0;}
	
	.text:hover{
		opacity:0.6;
	}
	
	.subtitle{
	border:thin solid red;
	height:100px;
	width:500px;
	position:absolute;
	left:300px;
	top:50px;
	}
	
	.subContent{
   position:absolute;
   top:240px;
   left:0px;
   width:100%;
   height:1345px;
   /*border:thin solid green;*/
   background-color:#87CEFA;
    /*border-top-left-radius:15px;
   border-top-right-radius:15px;
   border-bottom-left-radius:15px;
   border-bottom-right-radius:15px;*/
 
}

#peachHeight{
height:1245px;
}

#craneHeight{
height:1465px;
}

#heartHeight{
height:1445px;
}

.creditsContentHeight{
height:1000px;
}



.sscontent{
	
	position:absolute;
	top:50px;
	left:50px;
	width:1000px;
	height:1245px;
	background-color:white;
	border-top-left-radius:25px;
   border-top-right-radius:25px;
   border-bottom-left-radius:25px;
   border-bottom-right-radius:25px;
}

#peachSSheight{
height:1145px;
}

#craneSSheight{
height:1365px;
}

#heartSSheight{
height:1345px;
}

#creditsSSheight{
width:470px;
height:470px;
background-color:white;
	border-radius:235px;
   
   position:absolute;
   left:315px;
   top:30px;
}


.banner2{
   position:absolute;
   top:30px;
   left:0px;
   width:100%;
   height:200px;
   /*border:thin solid blue;*/
   background-color:#6B10E8;
   /*border-top-left-radius:15px;*/

   /*border-bottom-left-radius:15px;
   border-bottom-right-radius:15px;*/
}

.title2{
	
	font-size:60pt;
	position:absolute;
	width:1050px;
	left:25px;
	top:45px;
	text-align:center;
	background-color:#AB72FF;
	color:white;
	border-radius:20px;
	font-family: 'Open Sans Condensed', sans-serif;

}



#peachS1{
	background-image:url("images/first.jpg");
	background-repeat:no-repeat;
	background-position: center; 
	
}

.step1{
	
    width:300px;
	
	position:relative;
	top:50px;
	left:50px;
}

.step2{
	
    width:300px;
	
	position:absolute;
	top:50px;
	left:350px;
}

/*.step3{
	height:700px;
    width:300px;
	border:thin solid red;
	position:absolute;
	top:50px;
	left:650px;
}*/

.step4{
	height:400px;
    width:300px;
	
	position:absolute;
	top:370px;
	left:50px;
}

.step5{
	height:700px;
    width:300px;
	
	position:absolute;
	top:370px;
	left:350px;
}

.step6{
	height:360px;
    width:300px;
	
	position:absolute;
	top:370px;
	left:650px;
}

.step7{
	
    width:300px;
	
	position:absolute;
	top:750px;
	left:50px;
}

.step8{
    width:600px;
	
	position:absolute;
	top:750px;
	left:350px;


}

#peach8{
position:absolute;
right:0px;
top:45px;
}



/*.pic{
	border:thin solid red;
}*/


.number{
	padding-top:6px;
	padding-bottom:6px;
	padding-left:14px;
	padding-right:14px;
	background-color:#5B80FD;
	color:white;
	border-radius:30px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: bold;
	
	
}

.number10{
	padding-top:6px;
	padding-bottom:6px;
	padding-left:11px;
	padding-right:11px;
	background-color:#5B80FD;
	color:white;
	border-radius:30px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: bold;
	
	
}



.line{
	
	position:absolute;
	left:45px;
	top:0px;
}

.see{
	/*border:thin solid blue;*/
	width:33px;
}

.cstep1{
	
    width:300px;
	
	position:relative;
	top:50px;
	left:50px;
}

.cstep2{
	
    width:300px;
	
	position:absolute;
	top:50px;
	left:350px;
}

.cstep3{
	
    width:300px;
	/*border:thin solid red;*/
	position:absolute;
	top:50px;
	left:650px;
}

.cstep4{
	
    width:600px;
	
	position:absolute;
	height:300px;
	left:50px;
	top:300px;
}

.imagec32{

    position:absolute;
	right:15px;
	top:50px;

}

.cstep6{
	
    width:300px;
	
	height:350px;
	position:absolute;
	left:650px;
	top:300px;
}

.cstep5{
    width:600px;
	
	position:absolute;
	left:50px;
	top:610px;

}


#imagec52{

    position:absolute;
	right:0px;
	top:41px;

}

.cstep7{
    width:300px;
	
	position:absolute;
	left:650px;
	top:610px;

}

.cstep8{
    width:600px;
	
	position:absolute;
	left:50px;
	top:970px;

}



.cstep10{
    width:300px;
	
	position:absolute;
	left:650px;
	top:1020px;

}

#imagec72{
position:absolute;
right:18px;
top:32px;

}

.hstep4{
	
    width:900px;
	position:absolute;
	left:50px;
	top:330px;
}

#imageh4{

position:absolute;
right:320px;
top:50px;
}
#imageh5{
position:absolute;
right:0px;
top:50px;

}





.hstep7{
	
    width:300px;
	
	position:absolute;
	left:50px;
	top:700px;
}

.hstep8{
	
    width:300px;
	
	position:absolute;
	left:350px;
	top:700px;
}

.hstep9{
	
    width:300px;
	
	position:absolute;
	left:650px;
	top:700px;
}

.hstep10{
	
    width:300px;
	
	position:absolute;
	left:50px;
	top:1020px;
}



.hstep11{
	
    width:300px;
	
	position:absolute;
	left:350px;
	top:1020px;
}

#move{

position:absolute;
top:0px;
left:20px;
}

.line2{
	
	position:absolute;
	width:200px;
	left:45px;
	top:0px;
}

.hstep12{
	
    width:300px;
	
	position:absolute;
	left:650px;
	top:1020px;
}

.bstep4{
	width:300px;
	
	position:absolute;
	height:300px;
	left:50px;
	top:370px;
	
}

.bstep5{
	width:300px;
	
	position:absolute;
	height:300px;
	left:350px;
	top:370px;
	
}

.bstep6{
	
    width:300px;
	
	height:350px;
	position:absolute;
	left:650px;
	top:370px;
}

.bstep7{
    width:300px;
	
	position:absolute;
	left:50px;
	top:750px;

}


.bstep8{
    width:600px;
	
	position:absolute;
	left:350px;
	top:620px;

}

#imageb9{
position:absolute;
	top:80px;
	left:0px;
}

#imageb8{
	position:absolute;
	top:80px;
	left:190px;
	
}

#imageb12{
	position:absolute;
	top:80px;
	right:0px;
}


.bstep10{
    width:300px;
	
	position:absolute;
	left:200px;
	top:1050px;

}

.bstep11{
    width:300px;
	
	position:absolute;
	left:500px;
	top:1050px;

}


/*.check{
position:absolute;
bottom:0px;
height:50px;
width:100%;
border:thin solid red
}*/

#creditsSSheight{
	font-family: 'Bangers', cursive;
	font-size:45px;
	text-align:center;
}
	  
#top{
position:absolute;
top:370px;
left:65px;
}

#bottom{
position:absolute;
top:370px;
left:250px;

}