html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  color: #000;
  font-family:  'Lucida Grande', 'Trebuchet MS', Geneva, Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.4em;
  text-align: center;
}
h1 {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 10px;
}
h2 {
  font-size: 13px;
  font-weight: bold;
}
img {
  margin: 4px;
  border: 0;
}
a {
  color: #000;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  margin: 0;
  padding: 0;
}
/*all*/
#wrapper{
  position: relative;
  min-height: 100%;
  margin: 0 auto;
  padding: 35px 0 0;
  width: 610px;
}
#wordmark img {
  margin: 0;
}
#wordmark, #wordmark a, #wordmark img {
  height: 67px;
}
#main {
  margin: 35px 7px 10px;
  padding: 0 0 90px;
  text-align: left;
}
#main a, #main a.thumb {
  display: inline;
}
#main a.thumb {
  float: left;
  position: relative; /*this is the key*/
  margin: 1px;
  height: 83px;
  z-index: 24;
  background-color: transparent;
  color: #000;
  text-decoration: none
}
#main a.thumb:hover {
  margin: 0;
  border: 1px solid #000;
  z-index: 25;
  background-color: transparent;
}
#main a.thumb span {
  display: none;
}
#main a.thumb:hover span { /*the span will display just on :hover state*/
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  padding: 0 3px;
  border: 1px solid #000;
  border-style: solid none none solid;
  background-color: #fff;
  color: #000;
  text-align: center;
}
#main .thumb img {
  margin: 4px;
}
/*nav*/
.nav li {
  display: inline;
}
a.current {
  text-decoration: underline;
}
/*footer*/
#footer {
  position: absolute;
  bottom: 40px;
  left: 40%;
  color: #999;
}
#footer p.me, #footer p.me a {
  margin: 0;
  padding: 0;
  color: #bbb;
  font-size: 9px;
}