1#pic {display:block}
2/* make visanle */ /* set width, margin auto centers , increase the left padding */
3#toplogo{ visibility:visible; height:inital; width:50%; margin:0 auto; padding-left:250px; height:auto; display:block}
4/* z-index:100; */
5.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 */
6.menu { padding: 0; width: 220px; list-style: none; text-indent: 0px; }
7
8
9 /* #nav { display: none; } all nav execpt berger normally hidden */
10 #nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type { display: none; }
11 /* revers this #nav a { font-size:large; padding: 5px 5px; text-decoration:none; */
12 #nav a { font-size:small; padding:6px 0 6px 20px;}
13 #nav a:hover { padding-left: 40px; }
14 /*
15#nav > ul { display: none; }
16#nav:target > ul { display: block; } */
17#nav > ul { display:block;}
18
19
20.munchkin{ display:none; }
21
22.container{ background-color:#CCFFFF; border:thick; border-color:#006633; border-style:solid; padding: 0; border-radius: 25px; }
23 /* body has pading(or poss margin) to allow room for menu */
24 .body {padding-left:250px;}
25 /* menu div floats left, with background and text colours it is fixed, but should it be absolute? */
26 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;
27 color: #FFFFFF ; background-color:#006633; overflow-y: auto; max-height:90% }
28/* all items of class menu NO NEED TO float left, OR SET WIDTH OR margin-right:20px; */
29
30
31.menu li { margin-top: 3px; margin-left:20px; }
32 /* WHY SET FONT AGAIN */
33.menu .menu a { font-size:12px; padding:4px; color: #646464; display: block; padding: 6px 30px; height: 20px; text-decoration: none;
34 background: url('http://www.kniveton.net/pc-scripts/background.gif') no-repeat right;}
35 /* On hover change background image and increase paddng to make room padding: 6px 40px; BUT BETTER TO INCREASE JUST LEFT PADDING */
36.menu .menu a:hover {
37 background: url('http://www.kniveton.net/pc-scripts/highlight.gif') no-repeat right;
38 padding-left:40px;
39}
40#nav > a { display: none; } /* all nav execpt berger normally hidden */
41/* square a little lert padding min height to allow for editing links in white #square{display:block}*/
42#square { padding-left: 20px; min-height 25px; display:block }
43#square a{ color:white; padding:0; font-size:medium; text-decoration:underline }
44#square a:hover { padding:0; background-color: #669900; border-radius: 25px; padding:1px}
45/* make white on green background, center, round corners */
46.headder {color: #FFFFFF; background-color:#006633; text-align:center; border-radius: 25px;
47}
48
49/* set size of pics div */
50#pic { height:281px; width:500px;}
51/* put images one on top of the other, move them right and round corners */
52#pic img { position:absolute; left:40%; border-radius: 25px;}
53
54.right{margin:5px; border-radius: 25px; float:right; }
55.left{margin:5px; border-radius: 25px; float:left; }
56/* all the rest is to make the images fde into one another */
57@-webkit-keyframes imgFade {
58 0% {opacity:1; }
59 17% {opacity:1;}
60 25% {opacity:0;}
61 92% {opacity:0;}
62 100% {opacity:1;}
63}
64@-moz-keyframes imgFade {
65 0% {opacity:1;}
66 17% {opacity:1;}
67 25% {opacity:0;}
68 92% {opacity:0;}
69 100% {opacity:1;}
70}
71
72@-o-keyframes imgFade {
73 0% {opacity:1;}
74 17% {opacity:1;}
75 25% {opacity:0;}
76 92% {opacity:0;}
77 100% {opacity:1;}
78}
79
80@keyframes imgFade {
81 0% {opacity:1;}
82 17% {opacity:1;}
83 25% {opacity:0;}
84 92% {opacity:0;}
85 100% {opacity:1;}
86}
87#pic img {
88 -webkit-animation-name: imgFade;
89 -webkit-animation-timing-function: ease-in-out;
90 -webkit-animation-iteration-count: infinite;
91 -webkit-animation-duration: 40s;
92
93 -moz-animation-name: imgFade;
94 -moz-animation-timing-function: ease-in-out;
95 -moz-animation-iteration-count: infinite;
96 -moz-animation-duration: 40s;
97
98 -o-animation-name: imgFade;
99 -o-animation-timing-function: ease-in-out;
100 -o-animation-iteration-count: infinite;
101 -o-animation-duration: 40s;
102
103 animation-name: imgFade;
104 animation-timing-function: ease-in-out;
105 animation-iteration-count: infinite;
106 animation-duration: 40s;
107}
108#pic img:nth-of-type(1) {
109 -webkit-animation-delay: 30s;
110 -moz-animation-delay: 30s;
111 -o-animation-delay: 30s;
112 animation-delay: 30s;
113}
114#pic img:nth-of-type(2) {
115 -webkit-animation-delay: 20s;
116 -moz-animation-delay: 20s;
117 -o-animation-delay: 20s;
118 animation-delay: 20s;
119}
120#pic img:nth-of-type(3) {
121 -webkit-animation-delay: 10s;
122 -moz-animation-delay: 10s;
123 -o-animation-delay: 10s;
124 animation-delay: 10s;
125}
126#pic img:nth-of-type(4) {
127 -webkit-animation-delay: 0;
128 -moz-animation-delay: 0;
129 -o-animation-delay: 0;
130 animation-delay: 0;
131}
132}
133/* dont show if screen is less than 700px wide */
Issues: