#pic {display:block}
/* make visanle  */ /* set width, margin auto centers , increase the left padding */
#toplogo{ visibility:visible; height:inital; width:50%; margin:0 auto; padding-left:250px; height:auto; display:block}
/* z-index:100; */
.menu {  position:static; top:1px; font-family: Verdana, Helvetica, Arial, sans-serif;; background-color:#006633; float:left;border-radius: 25px; margin-right:10px} /* the menu box */
.menu { padding: 0;		width: 220px; list-style: none; text-indent: 0px;     }  


 /* #nav  { display: none;	}	 all nav execpt berger normally hidden */
 #nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type  { display: none; }
 /*  revers this	#nav a { font-size:large; padding: 5px 5px; text-decoration:none; */
  #nav a { font-size:small; padding:6px 0 6px 20px;}
  #nav a:hover { padding-left: 40px; }
  /*
#nav > ul { display: none;  }
#nav:target > ul { display: block; } */
#nav > ul { display:block;}

 
.munchkin{ display:none;  }

.container{ background-color:#CCFFFF; border:thick; border-color:#006633; border-style:solid; padding: 0; border-radius: 25px; } 
 /* body has pading(or poss margin) to allow room for menu */
 .body {padding-left:250px;}
 /* menu div floats left, with background and text colours it is fixed, but should it be absolute? */
 div.menu{float:left; padding:1px 12px 12px 1px; margin-top: 2px;  margin-left: 2px; position:fixed ; top:13px;  border-radius: 25px;   min-height: 20px; width: 230px;
	color: #FFFFFF ;	background-color:#006633; overflow-y: auto; max-height:90% }
/* all items of class menu NO NEED TO float left, OR SET WIDTH OR margin-right:20px;  */


.menu li { margin-top: 3px;	 margin-left:20px;	 }
	 /* WHY SET FONT AGAIN  */ 
.menu .menu a { font-size:12px; padding:4px; color: #646464; display: block; padding: 6px 30px; height: 20px; text-decoration: none;
  background: url('http://www.kniveton.net/pc-scripts/background.gif') no-repeat right;}
	/* On hover change background image and increase paddng to make room padding: 6px 40px; BUT BETTER TO INCREASE JUST LEFT PADDING */
.menu .menu a:hover {
  background: url('http://www.kniveton.net/pc-scripts/highlight.gif') no-repeat right;
  padding-left:40px;
}
#nav > a { display: none;	}	 /* all nav execpt berger normally hidden */
/* square a little lert padding min height to allow for editing links in white #square{display:block}*/
#square { padding-left: 20px;   min-height 25px; display:block }
#square a{ color:white; padding:0; font-size:medium; text-decoration:underline }
#square a:hover { padding:0;  background-color: #669900; border-radius: 25px; padding:1px}
/* make white on green background, center, round corners */
.headder {color: #FFFFFF; background-color:#006633; text-align:center; border-radius: 25px;
}

/* set size of pics div */
#pic { height:281px;  width:500px;}
/* put images one on top of the other, move them right and round corners */
#pic img { position:absolute;  left:40%;  border-radius: 25px;}

.right{margin:5px; border-radius: 25px; float:right;   }
.left{margin:5px; border-radius: 25px; float:left;   }
/* all the rest is to make the images fde into one another */
@-webkit-keyframes imgFade {
 0% {opacity:1; }
 17% {opacity:1;}
 25% {opacity:0;}
 92% {opacity:0;}
 100% {opacity:1;}
}
@-moz-keyframes imgFade {
 0% {opacity:1;}
 17% {opacity:1;}
 25% {opacity:0;}
 92% {opacity:0;}
 100% {opacity:1;}
}

@-o-keyframes imgFade {
 0% {opacity:1;}
 17% {opacity:1;}
 25% {opacity:0;}
 92% {opacity:0;}
 100% {opacity:1;}
}

@keyframes imgFade {
 0% {opacity:1;}
 17% {opacity:1;}
 25% {opacity:0;}
 92% {opacity:0;}
 100% {opacity:1;}
}
#pic img {
  -webkit-animation-name: imgFade;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 40s;

  -moz-animation-name: imgFade;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 40s;

  -o-animation-name: imgFade;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 40s;

  animation-name: imgFade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 40s;
}
#pic img:nth-of-type(1) {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  animation-delay: 30s;
}
#pic img:nth-of-type(2) {
  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  -o-animation-delay: 20s;
  animation-delay: 20s;
}
#pic img:nth-of-type(3) {
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  -o-animation-delay: 10s;
  animation-delay: 10s;
}
#pic img:nth-of-type(4) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}
}
/* dont show if screen is less than 700px wide  */