BODY {
	MARGIN: 0px; BACKGROUND-COLOR: #ffffff
}
A:link {
	FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: bold;
}
A:visited {
	FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: bold;
}
A:active {
	FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: bold;
}
A:hover {
	FONT-SIZE: 12px; COLOR: #FFff66; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: bold;
}

a.a:link {
	FONT-SIZE: 12px; COLOR: #ff0000; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: normal;
}
a.a:visited {
	FONT-SIZE: 12px; COLOR: #ff0000; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: normal;
}
a.a:active {
	FONT-SIZE: 12px; COLOR: #ff0000; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: normal;
}
a.a:hover {
	FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: normal;
}

a.a1:link {
	FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: bold;
}
a.a1:visited {
	FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: bold;
}
a.a1:active {
	FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: bold;
}
a.a1:hover {
	FONT-SIZE: 12px; COLOR: #FF6600; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: bold;
}

a.ad:link {
	FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: normal;
}
a.ad:visited {
	FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: normal;
}
a.ad:active {
	FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: normal;
}
a.ad:hover {
	FONT-SIZE: 12px; COLOR: #FF6600; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: normal;
}

a.ad1:link {
	FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: bold;
}
a.ad1:visited {
	FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: bold;
}
a.ad1:active {
	FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: bold;
}
a.ad1:hover {
	FONT-SIZE: 12px; COLOR: #FF6600; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: bold;
}


a.more:link {
	FONT-SIZE: 12px; COLOR: #FF6600; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: normal;
}
a.more:visited {
	FONT-SIZE: 12px; COLOR: #FF6600; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: normal;
}
a.more:active {
	FONT-SIZE: 12px; COLOR: #FF6600; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: normal;
}
a.more:hover {
	FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: "Arial"; TEXT-DECORATION: none ;font-weight: normal;
}


.grey_menubox_idle {
	BACKGROUND-COLOR: #ffffff
}
.grey_menubox_active {
	BACKGROUND-COLOR: #badef8
}



#gallery {
width: 718px;
height: 100%;
min-height: 100%;
background: #ffc; /* test color */
position: relative; /* so AP spans take their postion from here */
}

#gallery img {display: block;}

#gallerynav {
float:left;
width: 150px;
margin: 40px 0 0 0; /* top gap instead of the <br's> */
background: #dad; /* purple */
}

#gallerynav ul {
width: 100px;
margin: 0;
padding: 1px 0; /* contain collapsing margins from li's */
list-style-type:none;
background: #abc; /* blue for list */
}

#gallerynav li {
margin: 10px 0; /* space out the li's which hold the images */
}

#gallerynav li img {
border: 2px solid #cbc5b2;
width: 60px; /* width and height can be removed from HTML to here if they are all the same */
height: 60px;
margin: 0 auto; /* to center little image in the li */
}

#gallerynav li img:hover {
border: 2px solid #7aaaec;
}

/* the following combines the fact that all the big images no matter their state or where they are have the same properties - this may not be the actual case, but the three selectors are how to target them */
#gallerynav li span img,
#gallerynav li span img:hover,
#slideshow img {
border: 0px none;
margin: 0;
width: 350px; /* again only put the width and height in here if the large images have .. */
height: 350px
}

#gallerynav li span{
position: absolute;
top: 40px;
left: 150px; /* same as width of #slideshow div shown below */
visibility: hidden;
}

#gallerynav li:hover span {
/* no need to redeclare the properties again just the visibility overrule */
visibility: visible;
}

#slideshow {
background: #ffe;
margin-left: 150px; /* width of left #gallerynav or more */
padding-top: 40px; /* same as top position of absolute span if you want the pop-up images over the top */
}

#slideshow img {
/* this rule is combined with the span image one above but would be best here if the properties are actually different */
}