body {	/* Set the basics */
	margin: 0;
	padding: 0;
	background: #000;
	font: 0.8em Verdana,Arial,Helvetica,sans-serif;
	color: #fff;
}

a {
	font-weight: bold;
	text-decoration: none;
}
	
a:link {
	color: #ff6;
}
	
a:visited {
	color: #c90;
}
	
a:hover, a:active {
	color: #c00;
}
	
#header {
	margin: 0;
	background:  url(../pix/header.jpg) 0 0 repeat-x; /* Set the gradient fill */
}

#mast {
	height: 270px;	/* To fit the crest image */
	background: transparent url(../pix/logo.jpg) 0 0 no-repeat;	/* Put the sqn crest top left */
}

#navbar {
	background: transparent;
}

h1 {	/* Replace the h1 text with an image */
	height: 110px;	
	text-indent: -1000em;
	margin: 0 0 0 250px;
	padding: 0;
	background: transparent url(../pix/h1.jpg) 0 0 no-repeat;
}

ul#nav {
margin: 0;
padding: 0;
list-style-type: none;
position: absolute;
top: 134px;
left: 215px;
height: 46px;
font: 16px "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
text-transform: uppercase;
width: 100%;
}

#nav li, #nav li a { /*float the main list items*/
	margin: 0;
	padding: 0;
	float: left;
	display: block;
}

#nav li ul, .hidden {	/* Hide the subnav */
	display: none;
}

#nav li.off ul, #nav li.on ul { /* put the subnav below */
	position: absolute;
	top: 48px;
	left: 0;
	*left: -40px;	/* fix the margin in IE */
	padding: 5px 0 0;
	background: #000;
	height: 30px;
	width: 700px;
}

#nav li a { /* style the main nav links */
	color: #000;
	display: block;
	width: 5em;
	border: none;
	padding: 13px;
	text-decoration: none;
	text-align: center;
}

#nav li.on a { /* style the current item */
	border: none;
	color: #fff;
	background:  url(../pix/on.jpg) 0 0 repeat-x;
}

#nav li.on ul a, #nav li.off ul a { /* style the sub-menu links */
	float: left; /*ie doesn't inherit the float*/
	color: #fff;
	width: auto;
	margin-right: 15px;
	background: #000;
	font-size: small;
	padding: 6px 10px;
}

#nav li.on ul { /* show the sub-menu for the selected item */
	display: block;
}

#nav li.off:hover ul, #nav li.over ul { /* show the sub-menu on hover */
	display: block;
	z-index: 6000;
}

#nav li.off a:hover, #nav li.on a:hover { /* set the hover styles */
	background:  url(../pix/hover.jpg) 0 0 repeat-x;
	color: #fff;
}

#content {
	width: 550px;
	*width: 55%;
	border-left: 215px solid #000;
	border-right: 120px solid #000;
	margin-right: -120px;
	padding-bottom: 30px;
	float: left;
	z-index: 50;
}

h2 {	/* give the heading a left-to-right gradient underline */
	background:  url(../pix/grad1.jpg) bottom left no-repeat;
	padding-bottom: 5px;
}

h3 {	/* give the heading a right-to-left gradient underline */
	background:   url(../pix/grad2.jpg) bottom right no-repeat;
	padding-bottom: 3px;
}

h4 {	/* give the heading a left-to-left gradient underline */
	background:   url(../pix/grad3.jpg) bottom left no-repeat;
	padding-bottom: 3px;
}

#panel {	/* move the panel over to the right */
	width: 100px;
	float: right;
	padding-left: 20px;
	padding-bottom: 20px;
	margin-right: 40px;
	margin-top: -40px;
	text-align: right;
}

#panel a {	/* remove the underline from links */
	text-decoration: none;
}

.error {
	font-weight: bold;
	font-size: large;
	color: #f00;
}

#footer {	/* Place the gradient in the footer and move the text to the right */
	clear: both;
	height: 62px;
	background:  url(../pix/footer.jpg) 0 0 repeat-x;
	font-size: x-small;
	text-align: right;
	padding: 10px;
}

#footer a {	/* Remove the text formatting from the links */
	text-decoration: none;
}

#flickr_badge_uber_wrapper {	/* Set the size of the Flickr badge */
	width: auto;
}

.flickr_badge_image img {	/* Style the images in the badge */
	border: 2px solid white !important;
	margin: 10px 0;
}

img.new {	/* Have a bit of Web 2.0 branding */
	position:absolute;
	top: 5px;
	left: 5px;
}

table#urls {	/* Set the basics for the "Useful links" table */
	font-size: 11px;
	padding: 3px;
	width: 99%;
	z-index: 10;
}

table#urls th {	/* Style the header row */
	font-weight: bold;
	color: #fff;
	background-color: #333;
	padding: 5px;
	text-align: left;
}

table#urls caption { /* Hide the table caption from view */
	display: none;
}

#urls tr.td1 {	/* Colour the rows */
	background-color: #000;
}

#urls tr.td2 {	/* Alternate row colour */
	background-color: #222;
}

#urls td {	/* Space things out a bit */
	padding: 5px;
}

td a:link, td a:visited, td a:hover, td a:active {
	text-decoration: none;
	font-weight: bold;
}

address {
	margin-top: 10px;
}

legend {
	color: #c00;
}

ul.list {	/* Fancy bulleted  lists */
	list-style: url(../pix/rnd.gif) outside;
	vertical-align: middle;
	line-height: 150%;
}

img {
	border: none;
}

img#ident {		/* Position each page's ident image */
	width: 200px;
	height: 180px;
	position: absolute;
	top: 300px;
	left: 0;
	margin: 10px;
}

img#aco {		/* Position the ACO logo */
	width: 100px;
	height: 45px;
	margin: 10px;
	position: absolute;
	bottom: 10px;;
	left: 10px;
}

img#ewlogo {	/* Position the Essex Wing logo */
	width: 45px;
	height: 45px;
	margin: 10px;
	position: absolute;
	bottom: 10px;
	left: 120px;
}

span, span a:link {
	color: #333;
}

div.pic {	/* Applies a 35mm slide background to some images */
	float: left;
	width: 150px;
	height: 136px;
	margin: 0;
	padding: 0;
	background: url(../pix/35mm.gif) center no-repeat;
}

div.ls img {	/* Denote landscape layout images */
	width: 142px;
	height: 96px;
	margin: 20px 3px;
}

div.pt img {	/* Denote portrait layout images */
	height: 96px;
	width: 65px;
	margin: 20px 42px;
}

div.staff {		/* Layout each staff member in their own div */
	float: left;
	width: 99%;
	height: auto;
	padding: 20px 20px 10px 0;
}

img.officer, img.snco, img.ci, img.icdt {	/* Define staff image sizes */
	width: 120px;
	height: 90px;
	float: left;
	margin-right: 20px;
	background: #000;
}

p.info {
	font-size: x-small;
	margin-top: 2em;
}