#masthead { background: #014fbe url(../images/scitecheng-banner.jpg) no-repeat right top; }
#site-title { color: #ffffff }
#splash-image { background: #fbfbfb url(../images/splash-image.jpg) no-repeat left center; }
.datatable tr:hover { cursor: text; }

/*-----------------------------------*/
/*--Start Zoology home page splash --*/
#imcont { width: 690px; background: #1d1d1d; margin: 0; padding: 0; font: 10px normal Arial, Helvetica, sans-serif; }
* {margin: 0; padding: 0;  outline: none;}
.container {overflow: hidden;	width: 705px;	margin: 0 auto;}
#spmain {padding: 10px;background: #f0f0f0;	border: 1px solid #ccc;}
/*--Main Image Preview--*/
.main_image {	width: 450px; height: 440px;float: left;	background: #333;	position: relative;	overflow: hidden;	color: #fff;}
.main_image h2 {font-size: 1.6em; font-weight: normal;margin: 0 0 5px;	padding: 10px; color:#FFF;}
.main_image p {	font-size: 1.3em;	font-weight: normal; padding: 10px;	margin: 0;	line-height: 1.6em;}
.main_image .block small {margin-left: 10px;}
.main_image .desc{position: absolute;bottom: 0;	left: 0;width: 100%;display: none;}
.main_image .block{	width: 100%;background: #111;border-top: 1px solid #000;}
.main_image a.collapse {background: url(../resimg/btn_collapse.gif) no-repeat left top;height: 27px; width: 93px;text-indent: -99999px;position: absolute; top: -27px; right: 20px; }
.main_image a.show {background-position: left bottom;} 
/*--Thumbnails--*/
.image_thumb {float: left; width: 252px; background: #f0f0f0; ; border-right: 1px solid #fff; border-top: 1px solid #ccc; vertical-align:middle;}
.image_thumb img {border: 1px solid #ccc; padding: 6px; background: #fff; float: left;}
.image_thumb ul {margin: 0; padding: 0;list-style: none; vertical-align:middle;}
.image_thumb ul li{margin: 0; padding: 6px 6px;background: #f0f0f0; width: 250px; 
float: left;border-bottom: 1px solid #ccc;border-top: 1px solid #fff;border-right: 1px solid #ccc;}
					/*float: left;border-bottom: 1px solid #ccc;border-top: 1px solid #fff;border-right: 1px solid #ccc; line-height:4.8em;}*/
.image_thumb ul li.hover {background: #999; cursor: pointer;}
.image_thumb ul li.active {background: #fff;cursor: default;}
html .image_thumb ul li h2 {font-size: 1.32em; margin: 5px 0; padding: 0;}
/*.image_thumb ul li .block {float: left; margin-left: 10px; padding: 0; width: 170px; height:4.8em; }	*/
.image_thumb ul li .block {float: left; margin-left: 10px; padding: 0; width: 170px;}	
.image_thumb ul li p{display: none;}
/*--End Zoology home page splash --*/
/*---------------------------------*/

/* Start Zoology slideshow */

#zooimages {
	height: 510px;
}

/**
Stylesheet: Slideshow.css
	CSS for Slideshow.

License:
	MIT-style license.

Copyright:
	Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
	
HTML:
	<div class="slideshow">
		<div class="slideshow-images" />
		<div class="slideshow-captions" />
		<div class="slideshow-controller" />
		<div class="slideshow-loader" />
		<div class="slideshow-thumbnails" />
	</div>
	
Notes:
	These next four rules are set by the Slideshow script.
	You can override any of them with the !important keyword but the slideshow probably will not work as intended.
*/

.slideshow {
	display: block;
	position: relative;
	z-index: 0;
}
.slideshow-images {
	display: block;
	overflow: hidden;
	position: relative;
}		
.slideshow-images img {
	display: block;
	position: absolute;
	z-index: 1;
}		
.slideshow-thumbnails {
	overflow: hidden;
}

/**
HTML:
	<div class="slideshow-images">
		<img />
		<img />
	</div>
	
Notes:
	The images div is where the slides are shown.
	Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
*/

.slideshow-images {
	height: 450px;
	width: 600px;
}		
.slideshow-images-visible { 
	opacity: 1;
}	
.slideshow-images-prev { 
	opacity: 0; 
}
.slideshow-images-next { 
	opacity: 0; 
}
.slideshow-images img {
	float: left;
	left: 0;
	top: 0;
}	

/**
Notes:
	These are examples of user-defined styles.
	Customize these classes to your usage of Slideshow.
*/

.slideshow {
	height: 450px;
	margin: 0 auto;
	width: 600px;
}
.slideshow a img {
	border: 0;
}

/**
HTML:
	<div class="slideshow-captions">
		...
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the captions animation.
*/

.slideshow-captions {
	background: #000;
	bottom: 0;
	color: #FFF;
	font: normal 14px/22px Arial, sans-serif;
	left: 0;
	overflow: hidden;
	position: absolute;
	text-indent: 10px;
	width: 100%;
	z-index: 10000;
}
.slideshow-captions-hidden {
	height: 0;
	opacity: 0;
}
.slideshow-captions-visible {
	height: 30px;
	opacity: .7;
}

/**
HTML:
	<div class="slideshow-controller">
		<ul>
			<li class="first"><a /></li>
			<li class="prev"><a /></li>
			<li class="pause play"><a /></li>
			<li class="next"><a /></li>
			<li class="last"><a /></li>
		</ul>
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the controller animation.
*/

.slideshow-controller {
	background: url(../../research/mallee-fire/css/controller.png) no-repeat;
	height: 42px;
	left: 50%;
	margin: -21px 0 0 -119px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	width: 238px;
	z-index: 10000;
}
.slideshow-controller * {
	margin: 0;
	padding: 0;
}
.slideshow-controller-hidden { 
	opacity: 0;
}
.slideshow-controller-visible {
	opacity: 1;
}
.slideshow-controller a {
	cursor: pointer;
	display: block;
	height: 18px;
	overflow: hidden;
	position: absolute;
	top: 12px;
}
.slideshow-controller a.active {
	background-position: 0 18px;
}
.slideshow-controller li {
	list-style: none;
}
.slideshow-controller li.first a {
	background-image: url(../../research/mallee-fire/css/controller-first.gif);
	left: 33px;
	width: 19px;
}
.slideshow-controller li.last a {
	background-image: url(../../research/mallee-fire/css/controller-last.gif);
	left: 186px;
	width: 19px;
}
.slideshow-controller li.next a {
	background-image: url(../../research/mallee-fire/css/controller-next.gif);
	left: 145px;
	width: 28px;
}
.slideshow-controller li.pause a {
	background-image: url(../../research/mallee-fire/css/controller-pause.gif);
	left: 109px;
	width: 20px;
}
.slideshow-controller li.play a {
	background-position: 20px 0;
}
.slideshow-controller li.play a.active {
	background-position: 20px 18px;
}
.slideshow-controller li.prev a {
	background-image: url(../../research/mallee-fire/css/controller-prev.gif);
	left: 65px;
	width: 28px;
}

/**
HTML:
	<div class="slideshow-loader" />
	
Notes:
	Customize the hidden / visible classes to affect the loader animation.
*/

.slideshow-loader {
	height: 28px;
	right: 0;
	position: absolute;
	top: 0;
	width: 28px;
	z-index: 10001;
}
.slideshow-loader-hidden {
	opacity: 0;
}
.slideshow-loader-visible {
	opacity: 1;
}

/**
HTML:
	<div class="slideshow-thumbnails">
		<ul>
			<li><a class="slideshow-thumbnails-active" /></li>
			<li><a class="slideshow-thumbnails-inactive" /></li>
			...
			<li><a class="slideshow-thumbnails-inactive" /></li>
		</ul>
	</div>
	
Notes:
	Customize the active / inactive classes to affect the thumbnails animation.
	Use the !important keyword to override FX without affecting performance.
*/

.slideshow-thumbnails {
	bottom: -65px;
	height: 65px;
	left: 0;
	position: absolute;
	width: 100%;
}
.slideshow-thumbnails * {
	margin: 0;
	padding: 0;
}
.slideshow-thumbnails ul {
	height: 65px;
	left: 0;
	position: absolute;
	top: 0;
	width: 10000px;
}
.slideshow-thumbnails li {
	float: left;
	list-style: none;
	margin: 5px 5px 5px 0;
	position: relative;
}
.slideshow-thumbnails a {
	display: block;
	float: left;
	padding: 5px;
	position: relative; 
}
.slideshow-thumbnails a:hover {
	background-color: #FF9 !important;
	opacity: 1 !important;
}
.slideshow-thumbnails img {
	display: block;
}
.slideshow-thumbnails-active {
	background-color: #9FF;
	opacity: 1;
}
.slideshow-thumbnails-inactive {
	background-color: #FFF;
	opacity: .5;
}

/* End Zoology slideshow */

/* Teaching slideshow */

/** 
 * Slideshow style rules.
 */
#slideshow-teach {
	margin:0 auto;
	width:640px;
	height:263px;
	background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;
	position:relative;
}
#slideshow-teach #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow-teach #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:263px;
}
/** 
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(img/control_right.jpg) no-repeat 0 0;
}
#pageContainer {
  background:#393737 url(img/bg_body.jpg) repeat-x top left;
  margin:0 auto;
  width:100%;
}
#pageContainer h1 {
  display:block;
  width:100%;
}
.slide h2, .slide p {
  margin:15px;
  color:#fff;
}
.slide h2 {
  font:italic 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#FFC;
  letter-spacing:+1px;
  background-color:transparent;
}
.slide img {
  float:right;
  margin:0 15px;
}
/* end teaching slideshow */
/*** Zoo Research Splash specific css ***/
*                      { margin: 0; padding: 0; }
/*body                   { font: 12px Georgia, Serif; background: #fff; color: #000; }*/
.slider2 a, a img               { border: 0; text-decoration: none; }
.slider2 blockquote             { margin-left: 30px; }
.slider2 ul                     { margin: 0 0 25px 25px; }
.slider2 ul li                  { font: 15px Georgia, Serif; margin: 0 0 8px 0; }

/* For Specific Slides */
.quoteSlide            { padding: 20px; }
.quoteSlide blockquote { font: italic 24px/1.5 Georgia, Serif; text-align: center; color: #444; margin: 0 0 10px 0; }
.quoteSlide p          { text-align: center; }
.panel1 blockquote { font: italic 20px/1.5 Georgia, Serif; text-align: center; color: #fff; margin: 0 0 10px 0; }
.panel2 blockquote { font: italic 16px/1.5 Georgia, Serif; text-align: center; color: #fff; margin-top: 270px; }
.panel3 blockquote { font: italic 16px/1.5 Georgia, Serif; text-align: center; color: #000; margin-top: -10px; }
.panel3 blockquote { font: italic 16px/1.5 Georgia, Serif; text-align: center; color: #000; margin-top: -10px; }
.panel4 blockquote { font: italic 18px/1.5 Georgia, Serif; text-align: right; color: #000; margin-top: -10px; margin-left:200px; }
.panel5 blockquote { font: italic 16px/1.5 Georgia, Serif; text-align: center; color: #000; }
.panel6 blockquote { font: italic 16px/1.5 Georgia, Serif; text-align: right; color: #fff; margin-top: 300px; margin-left:30px; }
.panel7 blockquote { font: italic 16px/1.5 Georgia, Serif; text-align: center; color: #000; margin-top: 320px; }
.panel8 blockquote { font: italic 18px/1.5 Georgia, Serif; text-align: center; color: #fff;}
.panel8 h5 { font: italic 18px/1.5 Georgia, Serif; text-align: center; color:#FF0;}

/* Set slider2 panel sizes */
#slider2 .panel1       { width: 500px; height: 500px; background-color: #000; }
#slider2 .panel2       { width: 450px; height: 470px; background-image: url(../resimg/fire-ecology3.jpg); }
#slider2 .panel3       { width: 450px; height: 470px; background-image: url(../resimg/insectecol3.jpg); }
#slider2 .panel4       { width: 450px; height: 495px; background-image: url(../resimg/psyllid.jpg); }
#slider2 .panel5       { width: 480px; height: 520px; background-color: #fff; }
#slider2 .panel6       { width: 490px; height: 440px; background-image: url(../resimg/behavecol2.jpg); }
#slider2 .panel7       { width: 450px; height: 470px; background-image: url(../resimg/wildlifecons2.jpg); }
#slider2 .panel8       { width: 470px; height: 520px; background-color: #000; }

/*
    AnythingSlider v1.4.1+ Default (base) theme

    By Chris Coyier: http://css-tricks.com
    with major improvements by Doug Neiner: http://pixelgraphics.us/
    based on work by Remy Sharp: http://jqueryfordesigners.com/
*/

/******* SET DEFAULT DIMENSIONS HERE ********/
div.anythingSlider {
	width: 700px;
	height: 390px;
	margin: 0 auto;
	overflow: hidden; /* needed for Opera and Safari */
}

/****** SET COLORS HERE *******/
/* Default State */
div.anythingSlider .thumbNav a.cur, div.anythingSlider .thumbNav a {
	background: #777;
	color: #000;
}
div.anythingSlider .anythingWindow {
	border-top: 3px solid #777;
	border-bottom: 3px solid #777;
}
div.anythingSlider .start-stop {
	background-color: #040;
	color: #fff;
}
div.anythingSlider .start-stop.playing {
	background-color: #800;
}
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
	color: #ddd;
}

/* Active State */
div.anythingSlider.activeSlider .anythingWindow {
	border-color: #7C9127;
}
div.anythingSlider.activeSlider .thumbNav a.cur, div.anythingSlider.activeSlider .thumbNav a {
	background-color: #7C9127;
}
div.anythingSlider .start-stop {
	background-color: #080;
	color: #fff;
}
div.anythingSlider .start-stop.playing {
	background-color: #d00;
}
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
	color: #fff;
}

/**** DO NOT CHANGE BELOW THIS LINE ****/
/* anythingSlider viewport window */
div.anythingSlider .anythingWindow {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
}
/* wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */
div.anythingSlider {
	position: relative;
	padding: 0 45px 28px 45px;
}
/* anythingSlider base UL */
ul.anythingBase {
	background: transparent;
	list-style: none;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
}
ul.anythingBase li.panel {
	background: transparent;
	display: block;
	overflow: hidden;
	float: left;
	padding: 0;
	margin: 0;
}

/* Navigation Arrows */
div.anythingSlider .arrow {
	top: 50%;
	position: absolute;
	display: block;
}
div.anythingSlider .arrow a {
	display: block;
	height: 120px;
	margin: -60px 0 0 0;
	width: 45px;
	text-align: center;
	outline: 0;
	background: url(../images/arrows-default.png) no-repeat;
	text-indent: -9999px;
}
div.anythingSlider .forward { right: 0; }
div.anythingSlider .back { left: 0; }
div.anythingSlider .forward a { background-position: 0 -40px; }
div.anythingSlider .back a { background-position: -88px -40px; }
div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: 0 -240px; }
div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: -88px -240px; }
div.anythingSlider .forward.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
div.anythingSlider .back.disabled { display: none; }

/* Navigation Links */
div.anythingSlider .anythingControls { outline: 0; display: none; }
div.anythingSlider .thumbNav { margin: 0; }
div.anythingSlider .thumbNav li { display: inline; }
div.anythingSlider .thumbNav a {
	font: 11px/18px Georgia, Serif;
	display: inline-block;
	text-decoration: none;
	padding: 2px 8px;
	height: 18px;
	margin: 0 5px 0 0;
	background-image: url(../images/cellshade.png);
	background-repeat: repeat-x;
	text-align: center;
	outline: 0;
	border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
}
div.anythingSlider .thumbNav a:hover {
	background-image: none;
}

/* slider autoplay right-to-left, reverse order of nav links to look better */
div.anythingSlider.rtl .thumbNav a { float: right; } /* reverse order of nav links */
div.anythingSlider.rtl .thumbNav { float: left; }    /* move nav link group to left */
div.anythingSlider.rtl .anythingWindow {
	direction: ltr;
	unicode-bidi: bidi-override;
}
/* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */

/* Autoplay Start/Stop button */
div.anythingSlider .start-stop {
	background-image: url(../images/cellshade.png);
	background-repeat: repeat-x;
	background-position: center top;
	padding: 2px 5px;
	width: 40px;
	text-align: center;
	text-decoration: none;
	float: right;
	z-index: 100;
	outline: 0;
	border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
}
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; }

div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .thumbNav a, div.anythingSlider .arrow a, div.anythingSlider .start-stop {
	transition-duration: 0;
	-o-transition-duration: 0;
	-moz-transition-duration: 0;
	-webkit-transition-duration: 0;
}