/* ************************************************  */
/*               CSS for logogallery.html            */
/*             Diron Graphics & Design 2005          */
/* ************************************************  */


body {
	background-image: url(images/bk_dironblu_.jpg);
	color: #000000;
	font: 10px Verdana, Arial, sans-serif;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}

h1 {

	color: #E8ADB6;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 1px;
	font-family: Tahoma, Arial, sans-serif;
}

p {
 	font: 10px Verdana, Arial, sans-serif;
	color: #E8ADB6;
}

#galcontainer {
  width: 95%;
  margin-left: 255px;
  margin-right: 200px;
  margin-top: 5%;
  margin-left: 255px;
  padding: 1em;
  max-width: 65em;     /* original 55em  */

}

/* ----------------  CSS for the LOGO Gallery ONLY --------------------- */

/* Removing the list bullets and indentation */
ul#gallery {
  padding:0;
  margin:0;
  width:448px;
  height:336px;
  position:relative;
  list-style-type:none;
  background:#888;

  }

/* Resize the images to 64px x 48px */
#gallery a img {
  position:relative;
  width:62px;
  height:46px;
  border:1px solid #888;
  z-index:100;
  }

/* Default style for list items */
#gallery li {
  width:64px;
  height:48px;
  float:left;
  z-index:100;
  }

/* Styling the left side of the display area */
#gallery li.lft {
  float:left;
  clear:left;
  }

/* Styling the right side of the display area */
#gallery li.rgt {
  float:right;
  clear:right;
  }

/* Force the bottom row of images into place (IE only) */
#gallery li.pad {
  height:0;
  display:block;
  margin-top:-2px;
  width:448px;
  font-size:0;
  }

/* Getting rid of the image gaps */
#gallery a {
  position:relative;
  width:64px;
  height:48px;
  display:block;
  float:left;
  z-index:100;
  cursor:default;
  }

/* Resizing the link on hover */
#gallery a:hover {
  width:160px;
  height:120px;
  padding:108px 144px;
  position:absolute;
  left:0;
  top:0;
  z-index:20;
  }

/* Resizing the thumbnail on hover */
#gallery a:hover img {
  background:#eee;
  position:relative;
  width:160px;
  height:120px;
  border:0;
  z-index:20;
  }

/* Resizing the link when 'clicked' */
#gallery a:active, #gallery a:focus {
  background:transparent;
  width:320px;
  height:240px;
  padding:48px 64px;
  position:absolute;
  left:0;
  top:0;
  z-index:10;
  }

/* Resizing the image when 'clicked' */
#gallery a:active img, #gallery a:focus img {
  background:#eee;
  position:relative;
  width:320px;
  height:240px;
  border:0;
  z-index:10;
  }

/* The 'click' hack for Internet Explorer */
a:visited {
  color:#D96886;
  }

/* Adding the background image */
ul#gallery {
  padding:0;
  margin:0;
  width:448px;
  height:336px;
  position:relative;
  background:#888 url(images/gallery/bkmain_logo.jpg);
  }

/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
  background:#888;
  width:320px;
  height:240px;
  padding:48px 64px;
  position:absolute;
  left:0;
  top:0;
  z-index:10;
  }
#gallery a:hover img {
  background:#aaa;
  position:relative;
  width:320px;
  height:240px;
  border:0;
  z-index:10;
  }
}