/* Authored by Nicholas Flook for Reef Design 2008 */

#mycarousel-next{
float: right;
clear: both;
margin-right: 50px;
padding-bottom: 10px;
}

/* The overall page structure is as follows

body
	#container
		.BlackStrip
			#header
				#logo
				#nav
					ul (li, li, li..)
				(end of #nav)
			(end of #header)
		(end of .BlackStrip)

		#content
			...
		(end of #content)

		.BlackStrip
			#footer
				ul#footer-nav (li, li)
			(end of #footer)
		(end of .BlackStrip)

	(end of #container)
(end of body)

*/




body {
	font-family:verdana,arial,helvetica,sans-serif;
	font-size:11px;
	color:#000;
	background:#000;
	text-align:center;
	margin:0;
	padding:0;
	width:100%;
}

#container {
	width:100%;
	margin:0 auto;
	background:#fff;
	height:636px;
	text-align:center;
}

.BlackStrip {
	margin-top:0;
	width:100%;
	background:#000;
	text-align:center;
	/* and then this BlackStrip, which stretches across the whole page, contains a centered header: */
}

#header {
	margin-left:auto; margin-right:auto; /* Tell standards compliant browsers to center within the containing div */
	/* (The containing div's text-align:center should tell IE6 to do it as well) */
	background:#000;
	width:968px;
	height:182px;
	padding:0;
}

	#header #logo {
		text-align:left;
		height:150px;
		padding:10px 0 0;
	}

	/* See also the file topmenu.css, which contains styles for the topmenu, i.e. #nav */

#content {
	/* A fixed width white area centred on the stretchy white central space. Lives within container */
	width:968px;
	margin-left:auto; margin-right:auto; /* Tell standards compliant browsers to center within the containing div */
	height:450px;
}

/* #content then contains these three colummns,
(except we've now got a wrapper around the second and third
in order to enable the YUI carousel): */

	#content #side-nav-column {
		width:220px;
		float:left;
		margin:4px 0 0 0;
	}

	#content #copy-column {
		width:340px;
		float:left;
		margin:0 0 0 0;
		font-size:11px;
	}

	#content #image-column {
		width:356px;
		float:left;
		margin:20px 0 0;
		height:400px;
	}



.clear {
	clear:both;
	height:0;
}

/* This can also be done with a png although not supported by some browsers - will review this later */
.image-caption {
	position:relative;
	width:100%;
	top:-18px;
	left:0;
	padding:2px;
	color:#000;
	background:#fff;
	text-align:left;
	font-family:times new roman, georgia, garamond, serif;
	opacity:0.75;
}


a img {
	background:transparent;
	text-decoration:none;
	border:none;
}

a:link {
	color:#630;
}