@charset "utf-8";
body{
width: 100%;
padding: 0;
margin: 0;
background-position:center;
}
.container {
	font-family: Helvetica, ariel, sans-serif;
	font-size: 14px;
	font-style: normal;
	background-color: #003366;
	background-position:center;
	margin:auto;
	height:auto;
	width:1440px;	
	position:relative;
	
	overflow:visible;
	
}
#HeaderFlagArea{
	position:relative;
	height:125px;
	width:280px;
	margin:0px;
	padding:0px;
	top:0px;
	float:left;
}	





#MenuArea{
	position:relative;
	top:5px;
	padding:0px;
	margin:0px;
	width:980px;	
	height:50px;
	margin-left:auto;
	margin-right:auto;
}

#map{
	height:100%;
}

#map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}

/* The below menus control the buttons fading in and out 5 different buttons etc*/
#menubar1{ 
	position:relative;
	top:15px;
	left:90px;	
}

#menubar1 > a{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:20px;	
	background:#003300;/*Dark Green colour of menu bars before you press*/		 	
	padding: 12px 20px;
	color:#fff; /*Text Colour white */		
	margin-right:1px;
	text-decoration:blink;
	-ms-transition: background 0.9s linear 0s, color 0.3s linear 0s;
	transition: background 0.9s linear 0s, color 0.3s linear 0s;
	clear:both;
}
		
#menubar1 > a:hover{
	background:#009900;/*Light Green when you press button*/	
	color:#fff;/*middle blue*/  	
}

#menubar2{ 
	position:relative;
	top:15px;
	left:130px;
	
}

#menubar2 > a{
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:20px;	
	background:#003300;/*Dark Blue colour of menu bars before you press*/		 	
	padding: 12px 20px;
	color:#fff; /*Text Colour white */		
	margin-right:1px;
	text-decoration:blink;
	-ms-transition: background 0.9s linear 0s, color 0.3s linear 0s;
	transition: background 0.9s linear 0s, color 0.3s linear 0s;
	clear:both;
}
		
#menubar2 > a:hover{
	background:#009900;/*Light blue when you press button*/	
	color:#fff;/*middle blue*/  	
}

#menubar3{ 
	position:relative;
	top:15px;
	left:130px;
	
}

#menubar3 > a{
	font-family: Helvetica,  Arial, sans-serif;
	font-weight:bold;
	font-size:20px;	
	background:#003300;/*Dark yellow colour of menu bars before you press*/		 	
	padding: 12px 20px;
	color:#fff; /*Text Colour white */		
	margin-right:1px;
	text-decoration:blink;
	-ms-transition: background 0.9s linear 0s, color 0.3s linear 0s;
	transition: background 0.9s linear 0s, color 0.3s linear 0s;
	clear:both;
}
		
#menubar3 > a:hover{
	background:#009900;/*Light yellow when you press button*/	
	color:#fff;/*middle yellow*/  	
}

#menubar4{ 
	position:relative;
	top:15px;
	left:130px;	
}

#menubar4 > a{
	font-family: Helvetica,  Arial, sans-serif;
	font-weight:bold;
	font-size:20px;	
	background:#003300;/*Dark pueple colour of menu bars before you press*/		 	
	padding: 12px 20px;
	color:#fff; /*Text Colour white */		
	margin-right:1px;
	text-decoration:blink;
	-ms-transition: background 0.9s linear 0s, color 0.3s linear 0s;
	transition: background 0.9s linear 0s, color 0.3s linear 0s;
	clear:both;
}
		
#menubar4 > a:hover{
	background:#009900;/*Light purple when you press button*/	
	color:#fff;/*middle blue*/
}

#menubar5{ 
	position:relative;
	top:15px;
	left:130px;
	
}

#menubar5 > a{
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:20px;	
	background:#003300;/*Dark yellow colour of menu bars before you press*/		 	
	padding: 12px 20px;
	color:#fff; /*Text Colour white */		
	margin-right:1px;
	text-decoration:blink;
	-ms-transition: background 0.9s linear 0s, color 0.3s linear 0s;
	transition: background 0.9s linear 0s, color 0.3s linear 0s;
	clear:both;
}

		
#menubar5 > a:hover{
	background:#009900;/*Light yellow when you press button*/	
	color:#fff;/*middle blue*/
  	

}



/*this creates the DROPDOWN BUTTON */


/* Dropdown Button and colour blue and text white  and allows the button to fade from dark green to light green*/
.dropbtn {
    font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:20px;	   
    background-color: #003300;
    color: white;
    padding: 11px;
    border: none;
    cursor: pointer;
	text-decoration:blink;
	-ms-transition: background 0.9s linear 0s, color 0.3s linear 0s;
	transition: background 0.9s linear 0s, color 0.3s linear 0s;
	clear:both;
}

/* Dropdown button on hover & focus  Colour Green*/
.dropbtn:hover, .dropbtn:focus {
    background:#009900;/*Light green when you press button*/	
	color:#fff;/*middle green*/  
}











/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
	
    
}

/* Dropdown Content (Hidden by Default)  see through drop down box*/
.dropdown-content {
    display: none;
    position: absolute;  
    min-width: 219px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	
	
}

/* Links inside the dropdown */
.dropdown-content a {
    font-family: Helvetica, ariel, sans-serif;
	color: white;
	font-size:15px;
    padding: 6px 6px;
    text-decoration: none;
    display: block;
    text-decoration:blink;
	-ms-transition: background 0.9s linear 0s, color 0.3s linear 0s;
	transition: background 0.9s linear 0s, color 0.3s linear 0s;
	clear:both;


}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	 background:#009900;/*Light blue when you press button*/	
	 color:#fff;/*middle blue*/ 
	}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}






/* These 4 Divs puts in a picture first before the changing pictures start its needed otherwise you would get blank screen at start*/
#HeaderAreaPicture{
	position:relative;
	padding:0px;
	margin:0px;
	width:1440px;	
	height:350px;
	background-image:url(images/waterfall2.jpg);
}

#HeaderAreaPictureFAUNA{
	position:relative;
	padding:0px;
	margin:0px;
	width:1440px;	
	height:350px;
	background-image:url(images/fauna3.jpg);
}

#HeaderAreaPictureFLORA{
	position:relative;
	padding:0px;
	margin:0px;
	width:1440px;	
	height:350px;
	background-image:url(Flora/FloraAA.jpg);
}
#HeaderAreaPictureTT{
	position:relative;
	padding:0px;
	margin:0px;
	width:1440px;	
	height:350px;
	background-image:url(images/adlphi.jpg);
}


/*------------------------------------------------------------------*/



/* This puts the logo on the Header Area DeiseNatureways */
#Logo{
	position:relative;
	top:125px;
	left:950px;
	padding:0px;
	margin:0px;
	width:220px;	
	height:110px;
	background-image:url(images/DN99.jpg);

}


/*????????????????????????????Not sure find out*/
#BoxArea1{
	position:relative;
	font-size:18px;
	top:10px;
	left:10px;
	padding:0px;
	margin:0px;
	padding-left:20px;
	width:400px;	
	height:150px;
}

/*-------------------------------------------------*/


/* The Below 3 Divs control the Leaf bar and the TT Bar */

#GreenBarArea{	
	position:relative;	
	padding:0px;
	margin:0px;
	width:1440px;	
	height:60px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/greenbar1.jpg);
	
}

#GreenBarAreaText{
	font-family:Helvetica, Times, serif;
	position:absolute;
	width:600px;
	height:60px;
	font-size:30px;
	color:#FFF;
	padding:0px;
	margin:0px;	
	left:210px;
	bottom:15px;
}

#GreenBarAreaTextHP{
	font-family:Helvetica, Times, serif;
	position:absolute;
	top:1px;
	width:900px;
	height:60px;
	font-size:30px;
	color:#FFF;
	padding:0px;
	margin:0px;	
	left:290px;
	bottom:15px;
	background-image:url(images/weldnhp.png);
}



#GreenBarAreaTextTT{
	font-family:Helvetica, Times, serif;
	position:absolute;
	top:20px;
	width:950px;
	height:60px;
	font-size:30px;
	color:#FFF;
	padding:0px;
	margin:0px;	
	left:40px;
	bottom:15px;
	background-image:url(images/weldntt.png);
}


#GreenBarWelFlora{
	font-family:Helvetica, Times, serif;
	position:absolute;
	top:1px;
	width:900px;
	height:60px;
	font-size:30px;
	color:#FFF;
	padding:0px;
	margin:0px;	
	left:290px;
	bottom:15px;
	background-image:url(images/weldnflorap.png);
}


#GreenBarAreaLinks{	
	position:relative;	
	padding:0px;
	margin:0px;
	width:1440px;	
	height:60px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/greenbar1.jpg);
	
}

#GreenBarAreaTextLinks{
	font-family:Helvetica, Times, serif;
	position:absolute;
	top:1px;
	width:900px;
	height:60px;
	font-size:30px;
	color:#FFF;
	padding:0px;
	margin:0px;	
	left:290px;
	bottom:15px;
	background-image:url(images/weldnlinks.png);
	
}

#GreenBarWelFauna{
	font-family:Helvetica, Times, serif;
	position:absolute;
	top:1px;
	width:900px;
	height:60px;
	font-size:30px;
	color:#FFF;
	padding:0px;
	margin:0px;	
	left:290px;
	bottom:15px;
	background-image:url(images/weldnfaunap.png);
}
#GreenBarWelContact{
	font-family:Helvetica, Times, serif;
	position:absolute;
	top:1px;
	width:900px;
	height:60px;
	font-size:30px;
	color:#FFF;
	padding:0px;
	margin:0px;	
	left:270px;
	bottom:15px;
	background-image:url(images/weldncup.png);
}


#GreenBarLogoArea{
	position:relative;	
	padding:0px;
	margin:2px;
	width:200px;
	Height:60px;
	float:right;
	margin-right:220px;
}



#GreenBarAreaTT{	
	position:relative;	
	padding:0px;
	margin:0px;
	width:1440px;	
	height:60px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/skycloudbar.jpg);
	
}

#GreenBarAreaFlora{	
	position:relative;	
	padding:0px;
	margin:0px;
	width:1440px;	
	height:60px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/skycloudbar.jpg);
	
}

#GreenBarAreaFauna{	
	position:relative;	
	padding:0px;
	margin:0px;
	width:1440px;	
	height:60px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/skycloudbar.jpg);
	
}

#GreenBarAreaContact{	
	position:relative;	
	padding:0px;
	margin:0px;
	width:1440px;	
	height:60px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/greenbar1.jpg);
	
}

/*-------------------------------------------------------------*/




/* The Flora Title and Fauna Title are the text header Just above the moving flora and Fauna photos in the mainbody*/

#FloraTitle{
	position:relative;
	top:5px;
	left:100px;
	padding:0px;
	margin:0px;
	width:800px;	
	height:150px;
	background-image:url(images/waterfordflora2.png);
					
}
#FaunaTitle{
	position:relative;
	top:5px;
	left:100px;
	padding:0px;
	margin:0px;
	width:800px;	
	height:150px;
	background-image:url(images/waterfordfauna2.png);
					
}

/*---------------------------------------------------------------------*/


/*These 4 display the WELCOME TO DEISENATUREWAYS.IE in Different Colours in the Header Area*/

#MainTitle{
	position:relative;
	top:50px;
	left:220px;
	padding:0px;
	margin:0px;
	width:620px;	
	height:56px;
/*	background-image:url(images/DNN300.png);  */
	
}


#MainTitleFlora{
	position:relative;
	top:50px;
	left:220px;
	padding:0px;
	margin:0px;
	width:620px;	
	height:56px;
	background-image:url(images/ddnyellow.png);
	
}

#MainTitleFauna{
	position:relative;
	top:50px;
	left:220px;
	padding:0px;
	margin:0px;
	width:620px;	
	height:56px;
	background-image:url(images/DNN300.png);
	
}

#MainTitleTT{
	position:relative;
	top:50px;
	left:220px;
	padding:0px;
	margin:0px;
	width:620px;	
	height:56px;
	background-image:url(images/ddnblue.png);
	
}

/*-----------------------------------------------------------------------*/



/* The MainbodyArea1 anf MainbodyAreaTT is where you put the first background image ie trees, river etc only 1 image per page*/
#MainbodyArea1{	
	position:relative;
	top:0px;
	padding:0px;
	margin:0px;
	width:1440px;	
	height:1300px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/backgroundimage2.jpg);
}

#MainbodyAreaTT{	
	position:relative;
	top:0px;
	padding:0px;
	margin:0px;
	width:1440px;	
	height:1300px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/adlphi4.jpg);
}

#MainbodyAreaFAUNA{	
	position:relative;
	top:0px;
	padding:0px;
	margin:0px;
	width:1440px;	
	height:1300px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/floraBG2.jpg);
}

.trailattributes {
	position:relative;
	top:0px;
	padding:0px;
	margin:0px;
	color:#CCC;
}
/*------------------------------------------------------------------*/


/*CONTACT US PAGE the Main Area Layout*/

#MainbodyContactArea{
	position:relative;
	color:#FC0;
	padding:0px;
	margin:0px;
	width:800px;
	height:900px;
	padding-top:40px;
	margin-left:auto;
	margin-right:auto;
}

/*The MainbodyArea2 is the See through png screen that pictures, videos text goes on */
#MainbodyArea2{	
	position:relative;
	top:20px;
	padding:0px;
	margin:0px;
	width:980px;	
	height:925px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/mainbodygreen80.png);
	
}


/*This MainbodyboxFlora where you set the area for your Slider screen*/
#MainbodyBoxFlora{	
	position:relative;
	top:80px;
	left:30px;
	padding:0px;
	margin:0px;
	width:920px;	
	height:500px;
		
}

/* This is where you set up the area for Contact Map*/
#MainbodyBoxContact{
	position:relative;
	top:18px;
	padding:0px;
	margin:0px;
	width:800px;
	height:400px;
	float:left;
	background-image:url(images/contact.jpg);
}



/* This is where you set up the area for box1 on the mainbody*/
#MainbodyBox1{	
	position:relative;
	top:18px;
	padding-left:20px;
	padding:0px;
	margin:0px;
	width:480px;	
	height:400px;
	float:left;	
}

/*This is where I set up the area for the box1 where I put the map in index file slight difference from above*/
#MainbodyMapBoxtt1{	
	position:relative;
	top:13px;
	left:15px;
	padding:0px;
	margin:0px;
	width:440px;	
	height:325px;
	float:left;
	border-radius: 25px;
	background-image:url(images/greenway.jpg);
}
#MainbodyMapBoxtt2{	
	position:relative;
	top:13px;
	left:15px;
	padding:0px;
	margin:0px;
	width:440px;	
	height:325px;
	float:left;
	border-radius: 25px;
	background-image:url(images/croughwod.jpg);
}


#MainbodyMapBoxtt3{	
	position:relative;
	top:13px;
	left:15px;
	padding:0px;
	margin:0px;
	width:440px;	
	height:325px;
	float:left;
	border-radius: 25px;
	background-image:url(images/dunmoreport.jpg);
}
#MainbodyMapBoxtt4{	
	position:relative;
	top:13px;
	left:15px;
	padding:0px;
	margin:0px;
	width:440px;	
	height:325px;
	float:left;
	border-radius: 25px;
	background-image:url(images/hurthill.jpg);
}
#MainbodyMapBoxtt5{	
	position:relative;
	top:13px;
	left:15px;
	padding:0px;
	margin:0px;
	width:440px;	
	height:325px;
	float:left;
	border-radius: 25px;
	background-image:url(images/greenway.jpg);
}

#MainbodyMapBoxtt6{	
	position:relative;
	top:13px;
	left:15px;
	padding:0px;
	margin:0px;
	width:440px;	
	height:325px;
	float:left;
	border-radius: 25px;
	background-image:url(images/johnriver.jpg);
}


/*This is the area for the map to be displayed in the contact us web page */
#MainbodyMapBoxContact{	
	position:relative;
	top:600px;
	left:15px;
	padding:0px;
	margin:0px;
	width:440px;	
	height:325px;
	float:left;
	border-radius: 25px;
}

/* This is where you set up the area inside the box1 area atop for the title ie MAP*/
#Box1TopArea{
	position:relative;
	font-size:20px;
	left:50px;
	padding:0px;
	margin:0px;
	padding-left:125px;
	width:250px;	
	height:40px;
}

/*this sets up the lower area where you put in TEXT i.e. say about us description*/
#Box1LowerArea{
	position:relative;
	font-size:20px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	top:10px;
	left:30px;
	padding:0px;
	margin:0px;
	margin-right:30px;
	width:400px;
	height:300px;
}




/*?????????*/
#MainbodyMapBox2{
	position:relative;
	top:10px;
	left:5px;
	right:5px;
	padding:0px;
	margin:0px;
	width:450px;
	height:370px;
	float:right;
	clear:both;
}


#MainbodyBox2I{	
	position:relative;
	top:10px;
	margin-right:10px;
	padding:0px;
	margin:0px;
	width:400px;	
	height:370px;
	float:right;
	

}
#Box2TopAreaI{
	position:relative;
	font-size:20px;
	left:5px;
	top:10px;
	padding:0px;
	margin:0px;
	padding-left:30px;
	width:400px;	
	height:40px;
}

#Box2LowerAreaI{
	position:relative;
	font-size:14px;
	right:50px;
	padding:0px;
	margin:0px;
	width:400px;
	height:370px;
	z-index:30;
	
	
}

#Box2LowerAreaI img{ /*This controls the position of the image you put onto the box */
	position:relative;
	margin:0px;
	padding:0px;
	padding-top:30px;
	padding-left:15px;
	padding-right:40px;
	z-index:20;
}




#MainbodyBox2{	
	position:relative;
	top:10px;
	margin-right:10px;
	padding:0px;
	margin:0px;
	width:450px;	
	height:370px;
	float:right;
	

}
#Box2TopArea{
	position:relative;
	font-size:20px;
	left:40px;
	top:10px;
	padding:0px;
	margin:0px;
	padding-left:60px;
	width:300px;	
	height:40px;
}

#Box2LowerArea{
	position:relative;
	font-size:14px;
	left:20px;
	padding:0px;
	margin:0px;
	width:450px;
	height:370px;
	z-index:30;
	
	
}

#Box2LowerArea img{ /*This controls the position of the image you put onto the box */
	position:relative;
	margin:0px;
	padding:0px;
	padding-top:30px;
	padding-left:15px;
	padding-right:40px;
	z-index:20;
}

/*LINKS PARAGRAPHS */
ul{
	color:#FFF;
	list-style-image: url(images/kingfisher.png);}
li {
	margin: 10px 0px 0px 0px;}
	

#Box1TopAreaLinks{
	position:relative;
	font-size:20px;
	left:30px;
	padding:0px;
	margin:0px;
	padding-left:100px;
	width:280px;	
	height:10px;
}

#Box1LowerAreaLinks {
	position:relative;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	left:30px;
	padding:0px;
	margin:0px;
	margin-right:30px;
	width:400px;
	height:300px;
}




#MainbodyBox2Links{	
	position:relative;
	color:#FFF;
	top:10px;
	margin-right:10px;
	padding:0px;
	margin:0px;
	width:450px;	
	height:370px;
	float:right;
	

}
#Box2TopAreaLinks{
	position:relative;
	font-size:20px;
	left:40px;
	top:10px;
	padding:0px;
	margin:0px;
	padding-left:60px;
	width:350px;	
	height:30px;
}

#Box2LowerAreaLinks{
	position:relative;
	color:#FFF;
	font-size:14px;
	fonfont-family:Arial, Helvetica, sans-serif;	
	left:10px;
	padding:0px;
	margin:0px;
	width:420px;
	height:500px;
	z-index:30;
	
	
}






#MainbodyBox4Links{	
	position:relative;
	font-size:14px;
	color:#FFF;
	top:100px;
	left:30px;	
	margin-right:10px;
	padding:0px;
	margin:0px;
	width:450px;	
	height:400px;
	float:left;
		
}

#Box4TopAreaLinks{
	position:relative;
	font-size:20px;
	color:#FFF;
	top:10px;
	left:10px;
	padding:0px;
	margin:0px;
	margin-left:125px;
	width:200px;	
	height:40px;
}

#Box4LowerAreaLinks{
	position:relative;
	font-size:14px;
	color:#FFF;
	top:20px;
	left:20px;
	padding:0px;
	margin:0px;
	width:430px;
	height:400px;
	z-index:30;
	
	
}

#Box4LowerAreaLinks img{ /*This controls the position of the image you put onto the box */
	position:relative;
	margin:0px;
	padding:0px;
	padding-top:30px;
	padding-left:15px;
	padding-right:40px;
	z-index:20;
}
#Box4BottomTextLinks {
	position:relative;
	font-size:14px;
	color:#FFF;
	left:110px;
	top:10px;
	width:430px;
	height:100px;
}
/*****************This is the slider for the index*****************************/

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 0;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 26px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: `1.5s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;/*White*/
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 25px;
  width: 25px;
  margin: 0 4px;
  background-color: #15fa04;
  border-radius: 90%;
  display: inline-block;
  transition: background-color 1.5s ease;
}

.active, .dot:hover {
  background-color: #ffffff;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 3.0s;
  animation-name: fade;
  animation-duration: 3.0s;
}

@-webkit-keyframes fade {
  from {opacity: .2} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .2} 
  to {opacity: 1}
}



/*******************************Slider End above*************************************/




#MainbodyBox3{	
	position:relative;
	top:10px;
	left:20px;
	padding:0px;
	margin:0px;
	width:450px;	
	height:300px;
	float:left;	
}

#Box3TopArea{
	position:relative;
	top:10px;
	left:20px;
	font-size:20px;
	padding:0px;
	margin:0px;
	margin-left:125px;
	width:200px;	
	height:40px;
}

#Box3LowerArea{
	position:relative;
	font-size:14px;
	top:10px;
	left:10px;
	padding:0px;
	margin:0px;
	padding-left:10px;
	width:400px;	
	height:600px;
	clear:both;
}
	
#MainbodyBox4{	
	position:relative;
	font-size:14px;
	top:100px;
	left:30px;	
	margin-right:10px;
	padding:0px;
	margin:0px;
	width:450px;	
	height:300px;
	float:left;
		
}

#Box4TopArea{
	position:relative;
	font-size:20px;
	top:10px;
	left:10px;
	padding:0px;
	margin:0px;
	margin-left:125px;
	width:200px;	
	height:40px;
}

#Box4LowerArea{
	position:relative;
	font-size:14px;
	top:20px;
	left:20px;
	padding:0px;
	margin:0px;
	width:430px;
	height:300px;
	background-image:url(images/frame8.png);
	z-index:30;
	
	
}

#Box4LowerArea img{ /*This controls the position of the image you put onto the box */
	position:relative;
	margin:0px;
	padding:0px;
	padding-top:30px;
	padding-left:15px;
	padding-right:40px;
	z-index:20;
}
#Box4BottomText {
	position:relative;
	font-size:14px;
	left:110px;
	top:10px;
	width:430px;
	height:100px;
}

/*This is the Bottom Left Box for Home page photo bitterfly flower grass frame*/
#MainbodyBox5{
	
	position:relative;
	font-size:14px;
	color:#FFF;
	left:20px;
	bottom:250px;
	padding:0px;
	margin:0px;
	width:450px;
	height:300px;
	float:left;
		
}
#Box5TopArea{
	position:relative;
	font-size:20px;
	top:60px;
	left:100px;
	padding:0px;
	margin:0px;
	margin-left:20px;
	width:300px;	
	height:40px;
}

#Box5LowerArea{
	position:relative;
	font-size:14px;
	top:70px;
	left:20px;
	padding:0px;
	margin:0px;
	width:430px;
	height:300px;
	background-image:url(images/frame7.png);
	z-index:30;
	
	
}

#Box5LowerArea img{ /*This controls the position of the image you put onto the box */
	position:relative;
	margin:0px;
	padding:0px;
	padding-top:30px;
	padding-left:15px;
	padding-right:40px;
	z-index:20;
}

#Box5BottomText {
	position:relative;
	font-size:14px;
	left:100px;
	top:60px;
	width:430px;
	height:100px;
}

/*Links PAGE */

#MainbodyBox4LINK{	
	position:relative;
	font-size:14px;
	top:100px;
	left:30px;	
	margin-right:10px;
	padding:0px;
	margin:0px;
	width:450px;	
	height:300px;
	float:left;
		
}

#Box4TopAreaLINK{
	position:relative;
	font-size:20px;
	top:10px;
	left:10px;
	padding:0px;
	margin:0px;
	margin-left:125px;
	width:200px;	
	height:40px;
}

#Box4LowerAreaLINK{
	position:relative;
	font-size:14px;
	top:20px;
	left:20px;
	padding:0px;
	margin:0px;
	width:430px;
	height:300px;
	z-index:30;
	
	
}

#Box4LowerAreaLINK img{ /*This controls the position of the image you put onto the box */
	position:relative;
	margin:0px;
	padding:0px;
	padding-top:30px;
	padding-left:15px;
	padding-right:40px;
	z-index:20;
}
#Box4BottomTextLINK {
	position:relative;
	font-size:14px;
	left:110px;
	top:10px;
	width:430px;
	height:100px;
}

#MainbodyBox5LINK{
	
	position:relative;
	font-size:14px;
	color:#FFF;
	left:20px;
	bottom:250px;
	padding:0px;
	margin:0px;
	width:450px;
	height:300px;
	float:left;
		
}
#Box5TopAreaLINK{
	position:relative;
	font-size:20px;
	top:60px;
	left:100px;
	padding:0px;
	margin:0px;
	margin-left:20px;
	width:300px;	
	height:10px;
}

#Box5LowerAreaLINK{
	position:relative;
	font-size:14px;
	top:70px;
	left:20px;
	padding:0px;
	margin:0px;
	width:380px;
	height:300px;
	z-index:30;
	
	
}

#Box5LowerAreaLINK img{ /*This controls the position of the image you put onto the box */
	position:relative;
	margin:0px;
	padding:0px;
	padding-top:30px;
	padding-left:15px;
	padding-right:40px;
	z-index:20;
}

#Box5BottomTextLINK {
	position:relative;
	font-size:14px;
	left:100px;
	top:60px;
	width:380px;
	height:300px;
}


/*---------------------------------------------------*/

#MainbodyBox4TT{	
	position:relative;
	font-size:14px;
	top:100px;
	left:30px;	
	margin-right:10px;
	padding:0px;
	margin:0px;
	width:450px;	
	height:300px;
	float:left;
		
}

#Box4TopAreaTT{
	position:relative;
	font-size:20px;
	top:10px;
	left:50px;
	padding:0px;
	margin:0px;
	margin-left:125px;
	width:200px;	
	height:40px;
}

#Box4LowerAreaTT{
	position:relative;
	font-size:14px;
	top:20px;
	left:20px;
	padding:0px;
	margin:0px;
	width:430px;
	height:300px;
	background-image:url(images/frame4.png);
	z-index:30;
	
	
}

#Box4LowerAreaTT img{ /*This controls the position of the image you put onto the box */
	position:relative;
	margin:0px;
	padding:0px;
	padding-top:30px;
	padding-left:15px;
	padding-right:40px;
	z-index:20;
}



#MainbodyBox5TT{	
	position:relative;
	font-size:14px;
	color:#FFF;
	left:20px;
	bottom:200px;
	padding:0px;
	margin:0px;
	width:450px;
	height:300px;
	float:left;
		
}
#Box5TopAreaTT{
	position:relative;
	font-size:24px;
	top:50px;
	left:150px;
	padding:0px;
	margin:0px;
	margin-left:20px;
	width:200px;	
	height:40px;
}

#Box5LowerAreaTT{
	position:relative;
	font-size:14px;
	top:70px;
	left:20px;
	padding:0px;
	margin:0px;
	width:430px;
	height:300px;
	background-image:url(images/frame4.png);
	z-index:30;
	
	
}

#Box5LowerAreaTT img{ /*This controls the position of the image you put onto the box */
	position:relative;
	margin:0px;
	padding:0px;
	padding-top:30px;
	padding-left:15px;
	padding-right:40px;
	z-index:20;
}


/*------------------------------------------------*/

#MainbodyBox6{	
	position:relative;
	top:10px;
	margin-right:10px;
	padding:0px;
	margin:0px;
	width:450px;	
	height:300px;
	Float:right;	
}


#Box6TopArea{
	position:relative;
	top:10px;
	padding:0px;
	margin:0px;
	margin-left:125px;
	width:200px;	
	height:40px;
}

/*----------------------------------------------------------------*/


/*The Box Gallery below this will be where you put say 16 frames/boxes to put in a photo of the walks*/

#GalleryArea {
	width:900px;
	height:800px;
	margin:0px;
	padding:0px;
	margin-left:20px;
	
}
#Box1 {
	width:141px;
	height:172px;
	margin:0px;
	padding:0px;
	margin-top:50px;	
	float:left;
	background-image:url(images/GreenFrame1.png);
	
}
#Box1 img{
	margin:0px;
	padding:0px;
	padding-top:41px;
	padding-left:8px;
	
	
}

#Box2 {
	width:141px;
	height:172px;
	margin:0px;
	padding:0px;
	margin-left:10px;
	margin-top:50px;	
	float:left;
	background-image:url(images/GreenFrame1.png);
	
	

}
#Box2 img{
	margin:0px;
	padding:0px;
	padding-top:41px;
	padding-left:20px;
	
}

#Box3 {
	width:141px;
	height:172px;
	margin:0px;
	padding:0px;
	margin-left:10px;
	margin-top:50px;	
	float:left;
	background-image:url(images/GreenFrame1.png);
		
}


#Box3 img{
	margin:0px;
	padding:0px;
	padding-top:41px;
	padding-left:8px;
	
}

#Box4 {
	width:141px;
	height:172px;
	margin:0px;
	padding:0px;
	margin-left:10px;
	margin-top:50px;	
	float:left;
	background-image:url(images/GreenFrame1.png);
		
}

#Box4 img{
	margin:0px;
	padding:0px;
	padding-top:38px;
	padding-left:8px;
	
}

#Box5 {
	width:141px;
	height:172px;
	margin:0px;
	padding:0px;
	margin-left:10px;
	margin-top:50px;	
	float:left;
	background-image:url(images/GreenFrame1.png);
		
}

#Box5 img{
	margin:0px;
	padding:0px;
	padding-top:38px;
	padding-left:8px;
	
}

#Box6 {
	width:141px;
	height:172px;
	margin:0px;
	padding:0px;
	margin-left:10px;
	margin-top:50px;	
	float:left;
	background-image:url(images/GreenFrame1.png);
		
}

#Box6 img{
	margin:0px;
	padding:0px;
	padding-top:38px;
	padding-left:8px;
	
}


/*---------------------------------------------------------------------*/


/*This displays  the footer bar */
#FooterAreaC{
	position:relative;
	top:25px;
	padding:0px;
	margin:0px;
	width:980px;
	height:130px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/footer2.png);
	background-repeat:no-repeat;
	
}

/*sets area to left of the footer bar*/




#FooterAreaC{
	position:relative;
	top:25px;
	padding:0px;
	margin:0px;
	width:980px;
	height:130px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/footer2.png);
	background-repeat:no-repeat;
	
}

#FooterAreaRightC{
	position:relative;
	padding:0px;
	margin:0px;
	width:960px;
	height:125px;
	
	
}
#FooterAreaRight4C{
	position:relative;
	padding:0px;
	margin:0px;
	top:20px;
	width:250px;
	height:100px;
	bottom:35px;
	float:right;
	
}
#FooterAreaRight4C img{ /*This controls the position of the image you put onto the box */
	position:relative;
	margin:0px;
	padding:0px;
	top:5px;


}






#FooterAreaFF{
	position:relative;
	top:25px;
	padding:0px;
	margin:0px;
	width:980px;
	height:130px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/footer2.png);
	background-repeat:no-repeat;
	
}

#FooterAreaRightFF{
	position:relative;
	padding:0px;
	margin:0px;
	width:960px;
	height:125px;
	
	
}
#FooterAreaRight4FF{
	position:relative;
	padding:0px;
	margin:0px;
	top:20px;
	width:250px;
	height:100px;
	bottom:35px;
	float:right;
	
}
#FooterAreaRight4FF img{ /*This controls the position of the image you put onto the box */
	position:relative;
	margin:0px;
	padding:0px;
	top:5px;


}






#FooterArea{
	position:relative;
	top:25px;
	padding:0px;
	margin:0px;
	width:980px;
	height:130px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/footer2.png);
	background-repeat:no-repeat;
	
}

/*sets area to left of the footer bar*/
#FooterAreaRight{
	position:relative;
	padding:0px;
	margin:0px;
	width:960px;
	height:125px;
	
	
}

/*sert area to right of the footerbar*/
#FooterAreaRight1{
	position:relative;
	padding:0px;
	margin:0px;
	width:100px;
	height:100px;
	float:right;
	
}
#FooterAreaRight1 img{ /*This controls the position of the image you put onto the box */
	position:relative;
	margin:0px;
	padding:20px;
	
	
	
}

#FooterAreaRight2{
	position:relative;
	padding:0px;
	margin:0px;
	width:100px;
	height:100px;
	float:right;


	
	
}
#FooterAreaRight2 img{ /*This controls the position of the image you put onto the box */
	position:relative;
	margin:00px;
	padding:20px;
	
	
}

#FooterAreaRight3{
	position:relative;
	padding:0px;
	margin:0px;
	width:100px;
	height:100px;
	float:right;
	
}
#FooterAreaRight3 img{ /*This controls the position of the image you put onto the box */
	position:relative;
	margin:0px;
	padding:20px;
	
	
}


#FooterAreaRight4{
	position:relative;
	padding:0px;
	margin:0px;
	top:20px;
	width:250px;
	height:100px;
	float:right;
	
}
#FooterAreaRight4 img{ /*This controls the position of the image you put onto the box */
	position:relative;
	margin:0px;
	padding:0px;
	top:5px;


}

#FooterAreaLeft5{
	position:relative;
	padding:0px;
	margin:0px;
	width:250px;
	height:120px;
	float:left;
	
}
#FooterAreaLeft5 img{ /*This controls the position of the image you put onto the box */
	position:relative;
	margin:0px;
	padding:0px;
	top:5px;


}


/*----------------------------------------------------------------*/

/* Bottom Footer Area this displays the logos*/


#FooterAreaBottom{
	position:relative;
	top:25px;
	padding:0px;
	margin:0px;
	width:980px;
	height:200px;
	margin-left:auto;
	margin-right:auto;
	margin-top:5px;
	background-image:url(images/footer4.png);
	background-repeat:no-repeat;
	
}


#FooterBottomLogos{
	position:relative;
	top:9px;
	padding:0px;
	margin:0px;
	width:960px;
	height:180px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/6logowhitefade50.png);
}

#FooterBottom1{
	position:relative;
	top:25px;
	padding:0px;
	margin:0px;
	width:960px;
	height:180px;
	margin-left:auto;
	margin-right:auto;
}

#FooterBottomArea1{
	position:relative;
	bottom:10px;
	padding:0px;
	margin:0px;
	width:950px;
	height:170px;
	margin-left:auto;
	margin-right:auto;
	
}

#FooterBox1{
	position:relative;
	bottom:10px;
	padding:0px;
	margin:0px;
	width:300px;
	height:85px;
	margin-left:auto;
	margin-right:auto;
	float:left;
}

#FooterBox2{
	position:relative;
	bottom:10px;
	padding:0px;
	margin:0px;
	width:300px;
	height:85px;
	margin-left:auto;
	margin-right:auto;
	float:right;
	
}
#FooterBox3{
	position:relative;
	left:25px;
	bottom:10px;
	padding:0px;
	margin:0px;
	width:300px;
	height:85px;
	margin-left:auto;
	margin-right:auto;

}

#FooterBox4{
	position:relative;
	bottom:10px;
	padding:0px;
	margin:0px;
	width:300px;
	height:85px;
	margin-left:auto;
	margin-right:auto;
	float:left;
}

#FooterBox5{
	position:relative;
	bottom:10px;
	padding:0px;
	margin:0px;
	width:300px;
	height:85px;
	margin-left:auto;
	margin-right:auto;
	float:right;

}

#FooterBox6{
	position:relative;
	left:25px;
	bottom:10px;
	padding:0px;
	margin:0px;
	width:300px;
	height:85px;
	margin-left:auto;
	margin-right:auto;

}

/*CSS CODE FOR SLIDESHOW */






.css-slideshow{
  position: relative;
  max-width: 1440px;
  height: 350px;
  
}

.css-slideshow figure{
  margin: 0;
  max-width: 980px;
  height: 30px;
  background: #fff;
  position: absolute;
}

.css-slideshow img{
  box-shadow: 0 0 2px #666;
}

.css-slideshow figcaption{
  position: absolute;
  top: 310px;
  left:220px;
  color: #fff;
  background: rgba(0,0,0, .3);
  font-size: .9em;
  padding: 8px 12px;
  opacity: 1; /*Change opacity to 0 and the text disapears until the mouse is moved over it */
  transition: opacity .5s;
}


.css-slideshow:hover figure figcaption{
  transition: opacity .5s;
  opacity: 1;
}


.css-slideshow-attr{ 
  max-width: 800px;
  text-align: right;
  font-size: .9em;
  font-style: italic;
  margin:0 auto;
}


.css-slideshow-attr a{
  color: #666;
}


.css-slideshow figure{
  opacity:0;
}


figure:nth-child(1) {
  animation: xfade 88s 42s infinite;
}
figure:nth-child(2) {
  animation: xfade 88s 36s infinite;
}
figure:nth-child(3) {
  animation: xfade 88s 30s infinite;
}
figure:nth-child(4) {
  animation: xfade 88s 24s infinite;
}
figure:nth-child(5) {
  animation: xfade 88s 18s infinite;
}
figure:nth-child(6) {
  animation: xfade 88s 12s infinite;
}
figure:nth-child(7) {
  animation: xfade 88s 6s infinite;
}
figure:nth-child(8) {
  animation: xfade 88s 0s infinite;
}

@keyframes xfade{
  from {
	  opacity: 0;
  }
 5% {
    opacity: 1;
  }
  15%{
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  to {
    opacity: 0;
  }
}


















.css-carousal {
	overflow:hidden;

}

.css-carousal .css-img{
	width:980px;
	height:350px;
	max-width:980px;
	max-height:350px;
	position:absolute;
	opacity:0;
	-webkit-animation-name: css-animation-fade;
	-webkit-animation-duration: 30s;
	-webkit-animation-itteration-count: infinite;
	
}

@-webkit-keyframes css-animation-fade{
	from { opacity:0;}
	5%   { opacity: 1;}
	15%  { opacity: 1;}
	20%  {opacity: 0;}
	to   { opacity: 0;}
	 
		
}




.css-carousal .css-img:nth-child(2){
		-webkit-animation-delay(2): 5s;
}

.css-carousal .css-img:nth-child(3){
		-webkit-animation-delay(2): 10s;
}

.css-carousal .css-img:nth-child(4){
		-webkit-animation-delay(2): 15s;
}

.css-carousal .css-img:nth-child(5){
		-webkit-animation-delay(2): 20s;
}
.css-carousal .css-img:nth-child(6){
		-webkit-animation-delay(2): 25s;
}


/*The below code is for the slideshow in the index html */

.w3-container:after,.w3-row:after,.w3-row-padding:after,.w3-topnav:after,.w3-clear:after,.w3-btn-group:before,.w3-btn-group:after,.w3-btn-bar:before,.w3-btn-bar:after
{content:"";display:table;clear:both}

.w3-container{padding:0.01em 16px}

.w3-content{max-width:980px;margin:auto}

.w3-display-container{position:relative}


.w3-center{text-align:center!important}

.w3-section{margin-top:16px!important;margin-bottom:16px!important}

.w3-large{font-size:18px!important}

.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}

.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}

.w3-padding-left{padding-left:16px!important}.w3-padding-right{padding-right:56px!important}

.w3-hover-text-khaki,.w3-hover-text-lime,.w3-hover-text-orange,.w3-hover-text-deep-orange,.w3-hover-text-pink,.w3-hover-text-purple,
.w3-hover-text-deep-purple,.w3-hover-text-red,.w3-hover-text-sand,.w3-hover-text-teal,.w3-hover-text-yellow,.w3-hover-text-white,.w3-hover-text-black,.w3-hover-text-grey,.w3-hover-text-light-grey,.w3-hover-text-dark-grey
{-webkit-transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s}


.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}

.w3-border{border:1px solid #ccc!important}


.w3-transparent{background-color:transparent!important}


.w3-hover-white,.w3-hover-black,.w3-hover-grey,.w3-hover-light-grey,.w3-hover-dark-grey,.w3-hover-text-amber,.w3-hover-text-aqua,.w3-hover-text-blue,.w3-hover-text-light-blue,
.w3-hover-text-brown,.w3-hover-text-cyan,.w3-hover-text-blue-grey,.w3-hover-text-green,.w3-hover-text-light-green,.w3-hover-text-indigo,.w3-hover-text-khaki,.w3-hover-text-lime,.w3-hover-text-orange,.w3-hover-text-deep-orange,.w3-hover-text-pink,.w3-hover-text-purple,
.w3-hover-text-deep-purple,.w3-hover-text-red,.w3-hover-text-sand,.w3-hover-text-teal,.w3-hover-text-yellow,.w3-hover-text-white,.w3-hover-text-black,.w3-hover-text-grey,.w3-hover-text-light-grey,.w3-hover-text-dark-grey
{-webkit-transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s}


.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}