body {
	background-color: #000000
}


h1 {
	color: #ffffff;
		font-family: Georgia, serif
	font-size: 20px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 26.4px;
}

p1 {
color: #ffffff;
	font-family: Copperplate, "Copperplate Gothic Light", fantasy;
	font-size: 17px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	line-height: 26.4px;
}

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 0px; 
   left: 0; 
   width: 100%; 
}
h2 span { 
   color: white; 
  font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px; 
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}
h2 span.spacer {
   padding:0 5px;
}

#nav {
	position: absolute;
	width: auto;
	top: 112px;
	left: 10px;
	background-color: #000000;
	z-index: 4;
}

/* If I add ':link' to the top selector the background and all borders drop off aswell as colour.*/
#nav a {
	color: #203F71;
	font-weight: bold 24px/45px Helvetica, Sans-Serif; 
	text-decoration: none;
	background-color: #FFFFFF;
	border: solid 1px #000000;
	padding: 1px;
}

#nav a:hover {
	color: #FFFFFF;
	text-decoration: none;
	background-color: #203F71
}

#nav a:active {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}