body {
  background: #A4A4A4 url(../images/bg_gradient.gif) repeat-x;
}

/*This is for the animated gif on the righthand side of the screen - for the periodic table use 391X370, for the graph 460X322, mini_graph 200X140,mini elements 200x189px */
#graph {
	background: url(../images/Animated_mini_graph.gif) no-repeat;
	position:absolute;
	top:33%;	
	right:5%;	
	width:200px;
	height:140px;
	z-index: 1;
}
#elements {
	background: url(../images/Animated_mini_elements.gif) no-repeat;
	position:absolute;
	top:50%;	
	right:5%;	
	width:200px;
	height:189px;
	z-index: 1;
}

#logo1 {
  position: absolute;
  top: 5%;
  right: 40px;
  width: 326px;
  height: 147px;
  background: url(../images/transparent_logo.gif) no-repeat;
  text-indent: -9999em;
  margin: 0;
  z-index: 2;
}

/*This is the lower logo reading "G.A.S. Analytical Systems Ltd." beneath the regular GAS logo in the top right. Orig top 25% right40px*/
#logo2 {
  position: absolute;
  top: 30%;
  right: 40px;
  width: 384px;
  height: 32px;
  background: url(../images/gas_logo2.gif) no-repeat;
  text-indent: -9999em;
  margin: 0;
  z-index: 2;
}

/*This is the graphic with two squares*/
#intro {
  position: absolute;
  top: 15%;
  left: 40px;
  background: url(../images/Squares.gif) no-repeat;
  padding: 5px 0 0 61px;
  width: 500px;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 0.8em;
}
/*This is to move the "G" in the paragraph about GAS Analytical off the visual page - but keep it for "readers" */
#intro span {
  position: absolute;
  top: -1000px;
}

/*This positions the paragraph about GAS*/
#intro p {
  margin: 0 0 20px 0;
}

/* This is the horizontal block that stretches across the screen */
#portfolio {
  position: absolute;
  top: 35%;
  left: 0;
  width: 100%;
  height: 370px;
  background: url(../images/bg_checkered.gif);
}

/*This is the logo in the lower left corner. Original placement top75% left10% (for the 300x180px version)
#tenyears {
	position:absolute;
	top:5%;
	left:40%;
	width:200px;
	height:120px;
	background:url(../images/10yrlogo_transparent.gif);
}
*/

/*This defines the area that the blocks and images appear in*/
ul {
  position: absolute;
  top: 35%;
  left: 40px;
  padding:0;
  z-index: 4;
  list-style: none inside;
  width: 782px;
  height: 294px;
  margin: 0;
}

/*This defines the size of the blocks the photos are within*/
ul li {
  width: 175px;
  height: 175px;
  float: left;
  margin: 0 18px 18px 0;
  background: url(../images/bg_checkered_dark.gif);
}

ul li a {
  float: left;
  width: 102px;
  height: 102px;
  margin: 12px 0 0 12px;
}

ul li a img {
  border: 0;
}