body {
	font-family: Arial,Helvetica;
	font-size: 12px;
	text-align: center;
	color: #484440;
	background: #7f756b url(../images/body-bg.jpg) repeat top center;
}

a {color: #59311b; text-decoration: none;}
a:hover { text-decoration: underline; }

#page-wrapper {
	position: relative;
	width: 1024px;
	margin: 0 auto;
	text-align: left;
	background: transparent url(../images/page-wrapper-bg.png) no-repeat top left;
	height: 800px;
}

#logo {
	float: left;
	width: 140px;
	height: 208px;
	margin: 3px 0 0 23px;
}

#navigation-wrapper {
	float: left;
	position: relative;
	margin-left: 30px;
	z-index: 50;
}
#navigation-wrapper ul {
	list-style-type: none;
}
#navigation-wrapper ul li {	float: left; }
#navigation-wrapper ul li a { display: block; background: transparent no-repeat top left; text-indent: -999em; }
#navigation-wrapper ul li#habitats a { background-image: url(../images/navigation-habitats.png); width: 148px; height: 74px; margin: 18px 31px 0 0; }
#navigation-wrapper ul li#bugseye-view a { background-image: url(../images/navigation-bugseye-view.png); width: 184px; height: 71px; margin: 22px 40px 0 0; }
#navigation-wrapper ul li#bug-gallery a { background-image: url(../images/navigation-bug-gallery.png); width: 120px; height: 115px; margin: 0px 0 0 0; }
#navigation-wrapper ul li#teachers-notes a { background-image: url(../images/navigation-teachers-notes.png); width: 151px; height: 32px; margin: 0 0 0 -3px; }

#footer-wrapper {
	position: absolute;
	top: 695px;
	width: 1024px;
}

#credits {
	float: left;
	margin: 30px 0 0 180px;
	width: 200px;
	color: #000;
}
#credits p {
	margin-bottom: 10px;
}

#hsbc-logo {
	display: block;
	float: left;
	margin: 0 0 0 62px;
}
#national-trust-logo {
	display: block;
	float: left;
	margin: 5px 0 0 185px;
}


/* individual page styles */

#habitats-panel-wrapper {
	position: absolute;
	top: 125px;
	left: 137px;
	width: 766px;
	height: 552px;
	background: transparent url(../images/habitats-panel-wrapper-bg.png) no-repeat 5px 5px;
}

#habitats-panel {
	position: relative;
	margin: 0 34px;
	width: 687px;
	overflow: hidden;
}

#habitat-panel-scroller {
	position: relative;
	left: 0;
	height: 549px;
	width: 0;
}

.habitat-panel {
	position: relative;
	float: left;
	background: transparent url(../images/habitat-panel-bg.png) no-repeat top left;
	height: 509px;
	width: 199px;
	margin: 0 -5px;
	padding: 20px;
	z-index: 0;
	font-size: 11px;
	overflow: hidden;
}
.habitat-panel img {
	margin-bottom: 5px;
}
.habitat-panel h2 {
	font-size: 12px;
	margin-bottom: 3px;
	color: #59311b;
}

#habitats-left-arrow {
	position: absolute;
	top: 210px;
	left: 0px;
}
#habitats-right-arrow {
	position: absolute;
	top: 210px;
	right: 11px;
}


#bug-gallery-wrapper {
	position: absolute;
	top: 125px;
	left: 141px;/*138*/
	width: 764px;
	height: 558px;
	background: transparent url(../images/bug-gallery-wrapper-bg.png) no-repeat 0px 0px;
}

#bug-gallery-panel {
	position: relative;
	margin: 10px 0 0 39px;
	width: 642px;
	overflow: hidden;
	height: 500px;
	padding: 15px;
	background: transparent url(../images/bug-gallery-bg.jpg) no-repeat top left;
}

#bug-gallery-scroller {
	position: relative;
	left: 0;
	height: 500px;
	width: 0;
	overflow: hidden;
}

.bug-gallery-group {
	float: left;
	width: 642px;
}

#bug-gallery-left-arrow {
	position: absolute;
	top: 210px;
	left: 0px;
}
#bug-gallery-right-arrow {
	position: absolute;
	top: 210px;
	right: 14px;
}

.bug-gallery-item {
	float: left;
	width: 184px;
	height: 210px;
	margin: 18px 15px;
	background: transparent url(../images/bug-gallery-item-bg.png) no-repeat 0 0;
	text-align: center;
}
.bug-gallery-item.left {
	background-position: 0 0;
}
.bug-gallery-item.mid {
	background-position: -183px 0;
}
.bug-gallery-item.right {
	background-position: -366px 0;
}

.bug-gallery-item div {
	float: left;
	display: block;
	height: 132px;
	margin: 22px 0 0 20px;
}
.bug-gallery-item span {
	clear: left;
	display: block;
	margin: 0 auto;
	width: 143px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
}

#home-panel-outer {
	position: absolute;
	top: 125px;
	left: 166px;
	width: 687px;
	padding: 18px 0 0 0;
	background: transparent url(../images/home-panel-outer-bg.png) no-repeat 0px 0px;
}
#home-panel-inner {
	overflow: hidden;
	height: 513px; /* 304 */
	padding: 0 0 27px 21px;
	background: transparent url(../images/home-panel-inner-bg.png) no-repeat bottom left;
}

#home-content {
	float: left;
	width: 400px;
	font-size: 13px;
}
#home-content h1 {
	color: #59311b;
	font-size: 17px;
	margin-top: 10px;
}
#home-content p {
	margin-bottom: 20px;
}

#bug-anim-wrapper {
	position: absolute;
	left: 240px;
	margin-top: -120px;
	width: 622px;
	height: 418px;
}

.default-panel {
	position: absolute;
	top: 125px;
	left: 166px;
	height: 558px;
	background: transparent url(../images/default-panel-bg.png) no-repeat 0px 0px;
}
#teachers-notes-panel {
	width: 645px;
	padding: 23px 26px 0 26px;
}
#teachers-notes-panel h2 {
	color: #59311b;
	font-size: 15px;
	margin-bottom: 10px;
}
#teachers-notes-panel p {
	font-size: 11px;
	margin-bottom: 10px;
}
#teachers-notes-panel a {
	color: #59311b;
	text-decoration: none;
}

#bugseye-view-panel {
	width: 687px;
	padding: 18px 0 0 21px;
}

#flash-habitat-wrapper {
	position: relative;
	width: 655px;
	height: 304px;
	overflow: hidden;
}

#habitat-navigation-wrapper {
	float: left;
	width: 190px;
}
#habitat-navigation-wrapper h1 {
	width: 139px;
	height: 34px;
	background: url(../images/habitat-title.gif) no-repeat top left;
	text-indent: -999em;
	margin: 10px 0;
}
#habitat-navigation-wrapper ul {
	list-style-type: none;
}
#habitat-navigation-wrapper ul li a {
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	color: #484440;
}
#habitat-navigation-wrapper ul li a:hover, #habitat-navigation-wrapper ul li a.selected { color: #59311b; }

#habitat-content-wrapper {
	float: left;
	margin: 10px 0 0 0;
	width: 255px;
}
#habitat-content-wrapper h3 {
	font-size: 17px;
	color: #59311b;
}
#habitat-content {
	font-size: 13px;
}
#habitat-content p {
	margin-bottom: 10px;
}
#habitat-content span.attr {
	color: #59311b;
	font-weight: bold;
}
#habitat-image-wrapper {
	float: right;
	margin: 10px 32px 0 0;
}

.left-arrow {
	display: block;
	width: 39px;
	height: 60px;
	background: transparent url(../images/arrow-left.gif) top left no-repeat;
	text-indent: -999em;
	z-index: 1;
}
.right-arrow {
	display: block;
	width: 39px;
	height: 60px;
	background: transparent url(../images/arrow-right.gif) top left no-repeat;
	text-indent: -999em;
	z-index: 1;
}