@charset "UTF-8";
/* CSS Document */


/* global and page variations */


#navigation {
	width:900px;
	height:100px;
	padding: 0;
	margin: 0;
}

/* #navigation .spacer {
	width:150px;
	height:100px;
	padding:0;
	margin:0;
} */

#menu {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 750px;
	height: 100px;
	position: relative;
	float: right;
}

#menu span {
  display: none;
  position: absolute;
}

#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
}

#menu a:hover {
  background-position: left bottom;
}

#menu a:hover span {
  display: block;
}

#menu .about {
	width: 100px;
	height: 21px;
	background: url('../images/about.png') no-repeat;
	left: 10px;
	top: 30px;
}

#menu .about span {
  width: 92px;
  height: 60px;
  background: url('../images/about-rollover.png') no-repeat;
  left: -23px;
  top: 16px;
}

#menu .about2 {
  width: 100px;
  height: 22px;
  background: url('../images/about_active.png') no-repeat;
  left: 10px;
  top: 29px;
}


#menu .news {
	width: 100px;
	height: 21px;
	background: url('../images/news.png') no-repeat;
	left: 90px;
	top: 30px;
}

#menu .news span {
  width: 92px;
  height: 60px;
  background: url('../images/news-rollover.png') no-repeat;
  left: -10px;
  top: -60px;
}

#menu .news2 {
  width: 100px;
  height: 22px;
  background: url('../images/news_active.png') no-repeat;
  left: 90px;
  top: 29px;
}

#menu .illustrations {
  width: 100px;
  height: 21px;
  background: url('../images/illustrations.png') no-repeat;
  left: 166px;
  top: 30px;
}

#menu .illustrations span {
  width: 92px;
  height: 60px;
  background: url('../images/illustrations-rollover.png') no-repeat;
  left: -40px;
  top: 20px;
}

#menu .illustrations2 {
  width: 100px;
  height: 22px;
  background: url('../images/illustrations_active.png') no-repeat;
  left: 166px;
  top: 29px;
}

#menu .design {
  width: 100px;
  height: 21px;
  background: url('../images/design.png') no-repeat;
  left: 294px;
  top: 30px;
}

#menu .design span {
  width: 120px;
  height: 60px;
  background: url('../images/design-rollover.png') no-repeat;
  left: -60px;
  top: -50px;
}

#menu .design2 {
  width: 100px;
  height: 22px;
  background: url('../images/design_active.png') no-repeat;
  left: 294px;
  top: 29px;
}

#menu .commercial {
  width: 130px;
  height: 21px;
  background: url('../images/commercial.png') no-repeat;
  left: 383px;
  top: 30px;
}

#menu .commercial span {
  width: 130px;
  height: 60px;
  background: url('../images/commercial-rollover.png') no-repeat;
  left: 96px;
  top: 5px;
}

#menu .commercial2 {
  width: 130px;
  height: 22px;
  background: url('../images/commercial_active.png') no-repeat;
  left: 383px;
  top: 29px;
}


#menu .photography {
  width: 103px;
  height: 21px;
  background: url('../images/photography.png') no-repeat;
  left: 550px;
  top: 30px;
}

#menu .photography span {
  width: 200px;
  height: 60px;
  background: url('../images/photography-rollover.png') no-repeat;
  left: -30px;
  top: 15px;
}

#menu .photography2 {
  width: 103px;
  height: 22px;
  background: url('../images/photography_active.png') no-repeat;
  left: 550px;
  top: 29px;
}

#menu .links {
  width: 120px;
  height: 21px;
  background: url('../images/links.png') no-repeat;
  left: 689px;
  top: 30px;
}

#menu .links span {
  width: 120px;
  height: 70px;
  background: url('../images/links-rollover.png') no-repeat;
  left: -27px;
  top: -59px;
}

#menu .links2 {
  width: 120px;
  height: 22px;
  background: url('../images/links_active.png') no-repeat;
  left: 689px;
  top: 29px;
}






/* -----  This is for the padding around each image in the galleries  ------- */

.gallery img {
	padding: 1px;
}

 /* ------   end gallery image padding  --------- */






.bio-img img{
	margin-top:-40px;
	padding-left:10px;

}



/*  global classes  */

.noDisplay {
	display: none;
}