html, body, h1, h2, h3, h4 {
	margin: 0;
	padding: 0;
}
h1 img {
	display: block;
}
img {
	border: 0;
}
a {
	color: #333333;
}
a:hover {
	color: #330066;
}
.left {
	float: left;
}
.right {
	float: right;
}
.more {
	text-align: right;
}
.clear {
	clear: both;
}

body {
	background: #9E85BD;
	text-align: center;
	font: 12px Comic Sans MS, sans-serif;
	color: #380B61;
	padding: 25px 0 0 0;
<!--This changes the image which is repeated as the background e.g. shaded purple & the background colour to use of the image is not available. 
Padding is the space before the header.  Font size/colour relates to the general body text.-->
}


/** layout **/		
#wrapper {
	text-align: left;
	margin: auto;
	width: 678px;
  position: relative;
}


/** header **/
#header {
  padding-top: 1px;
}
#header h1 {
  font: 37px "Comic Sans MS", serif;
  font-weight: normal;
  position: absolute;
  left: 0;
  top: 22px;
  color: #380B61;
  padding: 0 0 0 0.7em;
  margin: -1em 0 0 0;
  line-height: 1;
<!--This changes the colour and size of the page header. Top is the distance of the header from the top of page.-->
}
#nav-top {
  margin-left: 503px;
}
#nav-top ul {
  margin: 1em 0 0 0;
  padding: 0;
  height: 31px;
}
#nav-top li {
  float: left;
  background: #9E85BD url(images/tab_left.gif) no-repeat;<!--this amends the colour/image shown behind the tab, and needs to match background colour-->
  list-style: none;
  text-align: center;
  font: 18px "Comic Sans MS", serif;
  height: 31px;
  line-height: 31px;<!--This changes the colour on mouseover of the image above the header.-->
}
#nav-top li div {
  background: top right url(images/tab_right.gif) no-repeat;
}
#nav-top li#tab-faq {
  width: 59px;
}
#nav-top li#tab-map {
  width: 99px;
  margin-left: 3px;
}
#nav-top a {
  color: #333333;
  text-decoration: none;
}
#nav-top a:hover {
  color: #330066;
}

#nav {
  padding-top: 198px; 
  background: url(bridgeimages/header.gif) no-repeat;
<!--This changes the space between the main image and the header above, and sets the main image.-->
}
#nav ul {
  margin: 0;
  padding: 0;
  height: 36px;
  line-height: 36px;
  border-left: 0px solid #330066;
  background: bottom left url(bridgeimages/nav_lit.bmp) repeat-x;
<!--formats the navigation uniform list-->
}
#nav li {
  list-style: none;
  float: left;
  margin: 0;
  padding: 0 10px;
}
#nav li.home {
  background: bottom left url(bridgeimages/nav_drk.bmp) repeat-x;
  padding-left: 25px;
}
#nav a {
  font: 16px "Comic Sans MS", serif;
  color: #FFE5C3;
  text-decoration: none; <!--This sets the font colour under the main image.-->
}
#nav a:hover {
  color: #330066;<!--This changes the hover colour of the tabs under the main image.-->
}


/** content **/

#content {
  padding-left: 20px;
}
#content h2 {
  font: 24px "Comic Sans MS", serif;
  color: #333333;
  font-weight: normal;
  border-left: 3px solid #996699;
  padding: 1px 1px 1px 8px;
  margin-top: 22px;<!--This changes the colour of the main text headers, e.g. "Welcome to the Bridge Project" and the colour of the solid line to the side.--!>
}
#content p {
  margin-left: 11px;
  line-height: 1.4;
}
#content a {
  color: #333333;
  font-weight: bold;
  text-decoration: none;
}
#content a:hover {
  color: #330066;
}

#content .left-col {
  float: left;
  width: 522px;
}
#content .right-col {
  float: right;
  width: 130px;
}

#content #welcome {
  margin-right: 40px;
  font-size:13px;
  color: #333333;
}
#content #welcome a{
  color: #333333;
  text-decoration:underline;
}
#content #welcome a:hover{
  color: #330066;
  text-decoration:underline;<!--This changes the mouse over colour of the "more" link on the main page paragraph.-->
}
#gallery {
  margin-top: 14px;
}
#gallery .box {
  float: left;
  width: 119px;
  padding: 0 23px 2.3em 23px; 
  margin-right: 1px;
  background: #996699;  
  position: relative; 
}
#gallery .box h3 {
  text-align: center;
  line-height: 23px;
  font: 23px "Comic Sans MS", serif;
  color: #333333;
  height: 23px;
  margin-bottom: 20px;
  
}
#gallery .box p {
  margin: 1em 0;
  padding: 0;
  line-height: 1.4;
}
#gallery .box .more {
  height: 18px;
  line-height: 18px;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 3.2em;
  padding-right: 4px;
  margin-bottom: 0;
}
#gallery .box .more a {
  color: #333333;
}
#gallery .box .more a:hover {
  color: #330066;
}
#gallery .box-lit {
  background: #ff99cc;
}
#gallery .box-lit h3 {
  
}
#gallery .box-lit .more {
  }

#content .right-col li, #content .right-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#content .right-col li {
  border-left: 1px solid #996699;
  padding-left: 9px;
  margin: 10px;
}
#content .right-col a {
  font-size: 12px;
  font-weight: normal;
  color: #333333;
}
#content .right-col a:hover {
  color: #330066;
}

.guidetable, .guidetable TD, .guidetable TH
{
font-size:12px;
color:#333333;
padding-left: 10px;
height:40px;
	border-width: 1px;
	border-spacing: 0px;
	border-style: outset;
	border-color: gray;
	border-collapse: separate;
}

/** later **/

#later {
  color: #333333;
}
#later h2 {
  font-size: 20px;
}
#later .right-col p {
  font-size: 12px;
  line-height: 1.7;
}

#later .box {
  float: left;
  width: 85px;

}
#later .box a{
	text-decoration:underline;
}
#later #later-b1 {
  padding-top: 67px;
  margin-right: 4px;
}
#later #later-b2 {
  width: 155px;
  margin-right: 4px;
}
#later #later-b3 {
  width: 114px;
  margin-right: 6px;
}
#later #later-b4 {
  padding-top: 67px;
  width: 137px;
}

#footc {
  height: 10px; 
}
#footer {
  background: #996699;
  text-align: center;
  color: #333333;
  padding: 14px;
}