/* general stuff... */

	*
	{
		/* get rid of the browser's default stylesheet to give a clean slate, plus specify default font */
		margin: 0;
		padding: 0;
		border: none;
		font-family: "Century Gothic", Decker, Futura, "Twentieth Century", "Gill Sans", Verdana, Geneva, Arial, Helvetica, Sans-Serif;
	}
	
	html
	{
		overflow-y: scroll;
	}
	
	body
	{
		background: url(images/header_small.gif) repeat-x;
	}
	
	h1
	{
		/* this heading is intentionally invisible - it's just there for Google and screen-readers */
		position: absolute;
		top: 0;
		left: -2000px;
	}

	h2, h3
	{
		clear: both;
		color: #002d6b;	/*navy*/
		margin-bottom: 10px;
	}
	
	p
	{
		line-height: 1.3;
		font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
	}
	
	span.themed
	{
		color: #002d6b;	/*navy*/
		font-weight: bold;
		font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
	}

/* tricks to get footer to stay at bottom of page */

	html, body, #container
	{
		height: 100%;
		min-height: 100%;
		width: 100%;
	}
	
	html>body, html>body #container {
		height: auto;
	}
	
	#container {
		position: absolute;
		top: 0;
	}

/* header and logo... */
	
	#header
	{
		width: 100%;
		background-color: #b0aeb2;	/*grey*/
	}
	
	#logo
	{
		display: block;
		margin-top: 4px;
		margin-left: auto;
		margin-right: auto;
	}

/* navigation... */

	#navigation
	{
		font-size: 1.2em;
		display: block;
		background-color: #b0aeb2;	/*grey*/
		position: relative;
		height: 40px;
	}

	#navigation ul {
		text-align: center;
		list-style: none;
		position: absolute;
		bottom: -2px;
		width: 100%;
		padding: 10px 0 5px 0;
	}

	#navigation ul li {
		display: inline;
		margin-right: 4px;
	}

	#navigation ul li.last {
		margin-right: 0;
	}

	#navigation ul li a {
		padding: 2px 9px 5px 9px;
		text-decoration: none;
		background: #002d6b;	/*navy*/
		color: White;
		border: 2px solid #002d6b;	/*navy*/
		border-bottom: none;
	}

	#navigation a.active {
		background: White;
		color: #002d6b;		/*navy*/
		cursor: default;
	}

	#navigation ul li a:hover {
		color: #b0aeb2;	/*grey*/
	}

	/*prevent hover effects on active tab by setting text back to navy, i.e. reversing the switch to grey*/
	#navigation ul li a.active:hover {
		color: #002d6b;	/*navy*/
	}

/* main bit of the page... */

	#main, #main_skinny
	{
		margin-left: auto;
		margin-right: auto;
		padding: 30px 0px 20px 20px;
	}
	
	#main
	{
		width: 958px;
	}
	
	#main_skinny
	{
		width: 430px;
	}

/* welcome page and about us page */
			
	div.centred
	{
		margin-left: 210px;
	}
	
	div.centredIE6
	{
		margin-left: 105px;
	}
	
	div.caption
	{
		text-align: center;
		margin-top: 5px;
	}
	
	img.panorama
	{
		width: 500px;
		height: 230px;
	}
	
	img.team
	{
		width: 500px;
		height: 327px;
	}
	
	ul.aboutus
	{
		margin-left: 40px;
	}
	
	ul.aboutus li
	{
		list-style-image: url(images/bullet.jpg);
	}
	
/* gallery and gallery2 pages, plus image handling... */
	
	img.biggest
	{
		width: 436px;
		height: 292px;
	}
	
	img.regular
	{
		width: 400px;
		height: 268px;
		margin-bottom:5px;
	}
	
	img.small_4
	{
		width: 277px;
		height: 186px;
	}
	
	img.small_6
	{
		width: 149px;
		height: 100px;
	}
	
	img.thumbnail
	{
		width: 75px;
		height: 50px;
	}
	
	img.styled, img.biggest, img.regular, img.small_4, img.small_6, img.thumbnail
	{
		border: 1px solid #002d6b;	/*navy*/
	}

	.gallery, .gallery2_4, .gallery2_6, #imagebrowser
	{
		list-style-type: none;
		clear: both;
	}
	
	.gallery li, .gallery2_4 li, .gallery2_6 li, div.border, div.centred, div.centredIE6, #imagebrowser li.big
	{
		padding: 10px;
		border-top: 2px solid #ccc;			/*light grey*/
		border-left: 2px solid #ccc;		/*light grey*/
		border-bottom: 2px solid #b0aeb2;	/*grey*/
		border-right: 2px solid #b0aeb2;	/*grey*/
	}
	
	#imagebrowser li.big
	{
		padding-bottom: 10px;
	}
	
	.gallery li, .gallery2_4 li, .gallery2_6 li, div.border, div.centred, div.centredIE6
	{
		float: left;
	}
	
	#imagebrowser li
	{
		min-height: 263px;
		float: left;
		margin-right: 10px;
	}
	
	.gallery li, .gallery2_4 li, .gallery2_6 li
	{
		margin: 10px 15px 5px 0;
	}
	
	#picture6, #small4
	{
		/* no right margin on last one to keep page width to minimum */
		margin-right: 0;
	}
	
	div.border, div.centred, div.centredIE6
	{
		margin-bottom: 20px;
	}
	
	.gallery a, .gallery2_4 a, .gallery2_6 a
	{
		/* make the white space clickable */
		display: block;
		height: 100%;
		width: 100%;
	}
	
	.gallery a.caption, .gallery2_4 a.caption, .gallery2_6 a.caption
	{
		font-weight: bold;
		font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
		margin-top: 10px;
	}
	
	.gallery2_6 a.caption
	{
		font-size: 0.9em;
	}
	
	.padding
	{
		font-size: 0.8em;
	}

	.gallery li
	{
		width: 440px;
	}
	
	.gallery2_4 li
	{
		width: 280px;
	}
	
	.gallery2_6 li
	{
		width: 152px;
	}
	
/* gallery2 page... */
	
	img.thumbnail
	{
		margin-top: 120px;
	}
	
	#buttons, #buttonsIE6
	{
		width: 100%;
		clear: both;
		white-space: nowrap;
	}
	
	#buttons
	{
		position: relative;
		top: -37px;
	}
	
	#previous, #previousIE6
	{
		float: left;
	}
	
	#next, #nextIE6
	{
		float: right;
	}
	
	#next
	{
		position: relative;
		left: -10px;
	}
	
	#previous a, #previousIE6 a
	{
		padding: 0 3px 2px 0;
	}
	
	#next a, #nextIE6 a
	{
		padding: 0 0 2px 4px;
	}
	
	.button a:link, .button a:visited, .buttonIE6 a:link, .buttonIE6 a:visited
	{
		background: #b0aeb2;	/*grey*/
		color: #002d6b;			/*navy*/
		text-decoration: none;
		font-weight: bold;
		border-top: 2px solid #ccc;		/*light grey*/
		border-left: 2px solid #ccc;	/*light grey*/
		border-bottom: 2px solid #888;	/*dark grey*/
		border-right: 2px solid #888;	/*dark grey*/
	}
	
	.button a:link, .button a:visited
	{
		position: relative;
	}

	.arrows 
	{ 
		font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
		font-size: 120%; 
	}
	
	#previous .arrows
	{
		position: relative;
		left: 2px;
	}
	
	#testimonial
	{
		clear: both;
		padding-bottom: 10px;
	}

	div.credit
	{
		text-align: right;
	}
	
/* contact info page */

	dt
	{
		width: 4em;
		float: left;
		margin: 0;
	}

	dd
	{
		margin-left: 5em;
		font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
		padding: 0.1em 0 0.2em 0;
	}

	dd a
	{
		font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
	}
	
/* footer... */	

	#clearfix
	{
		clear: both;
		height: 50px;
	}
	
	#clearfixIE6
	{
		clear: both;
		height: 10px;
	}
	
	#footer, #footerIE6
	{
		text-align: center;
		width: 100%;
		font-size: .7em;
		padding-bottom: 1em;
	}
		
/* trick to get footer to stay at bottom of page */
	
	#footer
	{
		position: absolute;
		bottom: 0;
	}