/**
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 five rules are required for Slideshow to work correctly.
	Override at your own risk.
*/

.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;
}
.slideshow-thumbnails ul {
	left: 0; position: absolute; top: 0; width: 100000px;
}

/**
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: 480px; width: 640px;
}		
.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: auto; margin: 0 auto; width: 640px;
}
.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 12px/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: 22px; opacity: .7;
}

/**
HTML:
	<div class="slideshow-controller">
		<ul>
			<li class="first"><a /></li>
			<li class="prev"><a /></li>
			<li class="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(controller.png) no-repeat; height: 48px; left: 50%; margin: -24px 0 0 -122px; overflow: hidden; position: absolute; top: 50%; width: 244px; z-index: 10000;
}
.slideshow-controller * {
	margin: 0; outline: none; padding: 0;
}
.slideshow-controller-hidden { 
	opacity: 0;
}
.slideshow-controller-visible {
	opacity: 1;
}
.slideshow-controller a {
	background: url(controller-controls.png) no-repeat -47px 0; cursor: pointer; display: block; height: 18px; left: 112px; overflow: hidden; position: absolute; top: 15px; width: 20px;
}
.slideshow-controller a.active {
	background-position: -47px -18px;
}
.slideshow-controller li {
	list-style: none;
}			 
.slideshow-controller li.first a {
	background-position: 0 0; left: 36px; width: 19px;
}
.slideshow-controller li.first a.active {
	background-position: 0 -18px;
}
.slideshow-controller li.prev a {
	background-position: -19px 0; left: 68px; width: 28px;
}
.slideshow-controller li.prev a.active {
	background-position: -19px -18px;
}
.slideshow-controller li.play a {
	background-position: -67px 0;
}
.slideshow-controller li.play a.active {
	background-position: -67px -18px;
}
.slideshow-controller li.next a {
	background-position: -87px 0; left: 148px; width: 28px;
}
.slideshow-controller li.next a.active {
	background-position: -87px -18px;
}
.slideshow-controller li.last a {
	background-position: -115px 0; left: 189px; width: 19px;
}
.slideshow-controller li.last a.active {
	background-position: -115px -18px;
}

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

.slideshow-loader {
	background: url(loader.png); height: 30px; right: 2px; position: absolute; top: 2px; width: 30px; 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: -55px; height: 55px; left: 0; position: absolute; width: 100%;
}
.slideshow-thumbnails * {
	margin: 0; padding: 0;
}
.slideshow-thumbnails li {
	float: left; list-style: none;
}
.slideshow-thumbnails a {
	display: block; float: left; outline: none; margin: 5px 5px 0 0; padding: 5px;
}
.slideshow-thumbnails a:hover {
	background-color: #FF9 !important; opacity: 1 !important;
}
.slideshow-thumbnails img {
	display: block;
}
.slideshow-thumbnails-hidden {
	background-color: #FFF; opacity: 0;
}
.slideshow-thumbnails-inactive {
	background-color: #FFF; opacity: .5;
}
.slideshow-thumbnails-active {
	background-color: #9FF; opacity: 1;
}

/* copy of main css as slideshow will not cope with two css files
plus changes to img done here */
body
				{background: #cdcdcd;}
button
			  {background-color: red;
				font-size: 18px;				
				font-family: arial;
				color: #ffffff;
				-moz-border-radius: 10px 10px 10px 10px;
				}
				
div.grey
				{background-color: #414042;
				background-image: url(../images/page87.jpg);
				background-repeat: no-repeat;}
div.space
				 {height:60px;}
h1
				{/* Main headings in red */
				color: red;
				font-size: 45px;				
				font-family: arial;
				padding: 30px 30px 0px 40px;
				margin: 0;}		
h1.index
				{/* Main headings in red */
				color: #ffffff;
				background-color: #1082f7;
				font-size: 45px;				
				font-family: arial;
				padding: 0px 30px 0px 30px;
				-moz-border-radius: 0px 14px 0px 14px;
				border: 2px solid #1082f7;
				margin: 0;}		 

h1.cover			
				{color: #fff;
				font-size: 20px;				
				font-family: arial;
				padding: 0px 0px 0px 0;
				margin: 0;}
h1.two			
				{color: #fff;
				font-size: 14px;				
				font-family: arial;
				padding: 0px 0px 0px 0;
				margin: 0;}
h1.three
				{/* Main headings in red */
				color: red;
				font-size: 40px;				
				font-family: arial;
				padding: 100px 0px 0px 40px;
				margin: 0;}
h1.four
				{/* Main headings in red */
				color: red;
				font-size: 40px;				
				font-family: arial;
				padding: 10px 0px 0px 40px;
				margin: 0;}
h1.five
				{/* Main headings in red */
				color: red;
				font-size: 40px;				
				font-family: arial;
				padding: 30px 0px 0px 40px;
				margin: 0;}	
h1.six
				{/* Main headings in red */
				color: red;
				font-size: 45px;				
				font-family: arial;
				padding: 30px 0px 0px 30px;
				margin: 0;}	
h1.seven
				{/* Main headings in red */
				color: red;
				font-size: 30px;				
				font-family: arial;
				padding: 50px 0px 0px 40px;
				margin: 0;}
h1.eight
				{/* Main headings in red */
				color: #fff;
				font-size: 30px;
				font-weight: bold;				
				font-family: arial;
				padding: 50px 0px 0px 40px;
				margin: 0;}
h2			
				{/* Second headings in blue */
				color: blue;
				font-size: 20px;				
				font-family: arial;
				padding: 20px 0px 0px 40px;
				margin: 0;}
h2.two			
				{/* Second headings in blue */
				color: blue;
				font-size: 22px;				
				font-family: arial;
				padding: 100px 0px 0px 40px;
				margin: 0;}
h2.three			
				{/* Second headings in blue */
				color: blue;
				font-size: 22px;				
				font-family: arial;
				padding: 10px 0px 10px 40px;
				margin: 0;}
h2.four			
				{/* Second headings in blue */
				color: blue;
				font-size: 22px;				
				font-family: arial;
				padding: 10px 20px 10px 20px;
				margin: 0;}			
h2.cover
				{color: #fff;
				font-size: 80px;				
				font-family: arial;
				padding: 20px 0px 0px 0;
				margin: 0;}
h2.red
				{color: red;
				font-size: 19px;				
				font-family: arial;
				padding: 40px 0px 0px 30px;
				margin: 0;}
h3.cover
				{color: #fff;
				font-size: 14px;				
				font-family: arial;
				padding: 390px 0px 0px 0px;
				margin: 0;}
h3.page78			
				{/* Second headings in blue */
				color: blue;
				font-size: 18px;				
				font-family: arial;
				padding: 0px 0px 0px 0px;
				margin: 0;}	
h4
				{/* For page numbers */
				color: #000000;
				font-size: 12px;				
				font-family: arial;
				padding: 10px 0px 0px 0px;
				margin: 0px 0 0 0px;}
h4.last
				{/* For page numbers */
				color: #fff;
				font-size: 12px;				
				font-family: arial;
				padding: 10px 0px 0px 0px;
				margin: 0;}
img			{
				padding: 0 0 0 0px;}
img.two	{
				padding: 0 0 0 0px;
				}
img.three	{
				padding: 29px 0 0 0px;
				}
img.four	{
				padding: 0 40px 0 0px;
				}
img.five			{
				padding: 0 0 0 40px;}	
img.six			{
				padding: 0 10px 0 20px;}	
img.seven			{
				padding: 5px 0px 0 10px;}		
img.eight		{
				padding: 0px 0px 10px 0px;}		
p
  			{color: #000000;
				font-size: 18px;				
				font-family: arial;
				padding: 0px 0px 0px 40px;
				margin: 0;} 
p.advertising
				{background: #ffffff;
				}				
p.footer
  			{
				color: #000000;
				font-size: 8px;				
				font-family: arial;
				padding: 30px 0px 0px 40px;
				margin: 0;}

p.footer2
  			{
				color: #000000;
				font-size: 8px;				
				font-family: arial;
				padding: 10px 0px 0px 40px;
				margin: 0;}
p.footer3
  			{
				color: #000000;
				font-size: 10px;				
				font-family: arial;
				font-weight: bold;
				padding: 5px 0px 0px 0px;
				margin: 0;}
p.name
			 {color: #000000;
				font-size: 12px;				
				font-family: arial;
				padding: 0px 0px 0px 20px;
				margin: 0;}
p.nametwo
			 {color: #000000;
				font-size: 12px;				
				font-family: arial;
				padding: 0px 0px 0px 0px;
				margin: 0;}
p.namethree
			 {color: #000000;
				font-size: 12px;				
				font-family: arial;
				padding: 0px 0px 0px 40px;
				margin: 0;}
p.page5
  			{color: #000000;
				font-size: 11px;				
				font-family: arial;
				padding: 0px 0px 0px 40px;
				margin: 0;}

p.page40
  			{color: #000000;
				font-size: 11px;				
				font-family: arial;
				padding: 0px 0px 0px 30px;
				margin: 0;}
p.page40head
  			{color: #000000;
				font-size: 11px;				
				font-family: arial;
				padding: 25px 0px 0px 30px;
				margin: 0;}
p.page59
  			{color: #000000;
				font-size: 11px;				
				font-family: arial;
				padding: 0px 0px 0px 10px;
				margin: 0;}
p.page61
  			{color: #000000;
				font-size: 16px;				
				font-family: arial;
				padding: 0px 0px 0px 10px;
				margin: 0;}
p.page63
  			{color: #000000;
				font-size: 10px;				
				font-family: arial;
				padding: 0px 0px 0px 30px;
				margin: 0;}
p.page63b
  			{color: #000000;
				font-size: 10px;				
				font-family: arial;
				padding: 0px 0px 0px 20px;
				margin: 0;}
p.page71
  			{color: #000000;
				font-size: 11px;				
				font-family: arial;
				padding: 0px 0px 0px 10px;
				margin: 0;}
p.physics
  			{color: #000000;
				font-size: 16px;				
				font-family: arial;
				padding: 0px 0px 0px 40px;
				margin: 0;}
p.quote
			 {color: blue;
				font-size: 15px;				
				font-family: arial;
				font-decoration: italics;
				padding: 0px 0px 0px 20px;
				margin: 0;}
p.quote2
			 {color: blue;
				font-size: 22px;				
				font-family: arial;
				font-decoration: italics;
				padding: 0px 0px 0px 20px;
				margin: 0;}		
p.quote3
			 {color: blue;
				font-size: 15px;				
				font-family: arial;
				font-decoration: italics;
				padding: 0px 0px 0px 00px;
				margin: 0;}		
p.two
  			{color: #000000;
				font-size: 22px;				
				font-family: arial;
				padding: 0px 0px 0px 40px;
				margin: 0;}
p.three
  			{color: #fff;
				background: #414045;
				height: 82px;
				font-size: 15px;				
				font-family: arial;
				padding: 20px 0px 0px 40px;
				margin: 0;}
p.four
  			{color: blue;
				font-size: 16px;				
				font-family: arial;
				padding: 0px 0px 0px 20px;
				margin: 0;}
p.five
  			{color: #000000;
				font-size: 19px;				
				font-family: arial;
				padding: 0px 0px 0px 40px;
				margin: 0;} 
p.six
  			{color: #000000;
				font-size: 22px;				
				font-family: arial;
				padding: 0px 0px 0px 20px;
				margin: 0;}
p.seven
  			{color: #000000;
				font-size: 18px;				
				font-family: arial;
				padding: 0px 0px 0px 30px;
				margin: 0;}
p.eight
  			{color: blue;
				font-size: 16px;				
				font-family: arial;
				padding: 0px 0px 0px 40px;
				margin: 0;}
p.white
  			{color: #fff;
				font-size: 12px;
				font-weight: bold;				
				font-family: arial;
				padding: 0px 0px 2px 50px;
				margin: 0;}
p.white2
  			{color: #fff;
				font-size: 9px;
				font-weight: bold;				
				font-family: arial;
				padding: 0px 0px 1px 50px;
				margin: 0;}
td.advertising
				{
				height: 120px;
				width: 750px;
				border: 1px solid #000000;}
td.exhibition
				{width: 300px;
				v-align: center;}
td.space
				{height: 30px;}
td.space2
				{height: 80px;}
td.words
				{color: #000000;
				background-color: #ffffff;
				width: 600px;
				font-size: 14px;
				font-weight: normal;
				-moz-border-radius: 0 14px 0 14px;
				border: 2px solid #1082f7;				
				font-family: arial;
				padding: 15px 25px 15px 25px;
				margin: 0;}
td.words4
				{color: #000000;
				width: 600px;
				font-size: 13px;
				font-weight: normal;				
				font-family: arial;
				text-align: left;
				padding: 15px 25px 15px 25px;
				margin: 0;}
				
/* css for menu system */

/* CSS Drop Down Menu */

#menu
{
	margin-left: 0px;
	margin-right: 0px;
	float: none;
}

/* Menu at rest */
#menu a, #menu a:visited
{
	height: 2%;
	display: block;
	white-space: nowrap;
	padding-top: 8px;				/* height of the menu box above text */
	padding-bottom: 5px;				/* height of the menu box below text */
	text-align: left;
	padding-left: 5px;
	text-decoration: none;				/* this stops the default underline of links */
	color: #1082f7;					/* color of the text */
	background-color: #3d3f40;			/* color of the background */
}

#menu a.titlebar
{
	background-color: #3d3f40;
	color: #1082f7;					/* color of the text */
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 2px;
	padding-right: 0px;
	font-size: 11px;
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	border-right: 2px solid #6d6e70;
}
#menu a.titlebar:hover
{
	background-color: #6d6e70;			/* color of background */
}


/* Attaches down-arrow to all top-parents */
 
#menu a.grandparent, #menu a.grandparent:hover
{
	background-image: url(../../graphics/downarrow.gif);
	background-position: right center;
	background-repeat: no-repeat;
	padding: 4px 4px 4px 2px;
}

/* Attaches side-arrow to all parents */
#menu a.parent, #menu a.parent:hover
{
	background-image: url(/images/navigation/menu-arrow-right.gif);
	background-position: right center;
	background-repeat: no-repeat;
}

/* Menu at mouse-over  */
#menu a:hover
{
	color: #ffffff;					/* color of text */
	background-color: #6d6e70;			/* color of background */
	font-size: 11px;
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
}

/* NOTE  the width attriute below is REQUIRED IN BOTH #menu ul and #menu li rules below. */
/* If you remove these, the menu will automatically adjust to the length of the menu text. */
/* In other words, the menu becomes a variable width menu (some menus require that) */
/* HOWEVER, you must add padding to left and right make the menu text readable */

#menu ul
{
	list-style: none;				/* do not remove or alter */
	margin: 0;					/* do not remove or alter */
	padding: 0;					/* do not remove or alter */
	float: left;					/* do not remove or alter */
	width: 98.5px;					/* width of all menu boxes -- read note above*/
}

/* Font and font size */
#menu li
{
	font-size: 11px;
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
	position: relative;
	min-height: 1px;
	vertical-align: bottom;
	width: 98px;					/* width of all menu boxes -- read note above*/
}

/* ===== DO NOT REMOVE OR ALTER ANYTHING BELOW ===== */

/* parent menu */
#menu ul ul
{
	position:absolute;
	top: auto;
	left: auto;
	display:none;
	padding: 0;
	margin: 0;
	z-index: 1;
}

/* child menu */
#menu ul ul ul
{
	position:absolute;
	top: 0;
	left: 100%;
}

div#menu li:hover
{
	cursor:pointer;
}

div#menu li:hover ul ul,
div#menu li li:hover ul ul,
div#menu li li li:hover ul ul,
div#menu li li li li:hover ul ul
{display:none;}

div#menu li:hover ul,
div#menu li li:hover ul,
div#menu li li li:hover ul,
div#menu li li li li:hover ul
{display:block;}

/* IE stuff */
#menu
{
	float: none;
}
#menu ul li
{
	float:left;
}
#menu a
{
	height:1%;
}