body {
 font-family: Verdana, Arial, sans-serif;
 margin: 0;
 padding: 0;
 color: #666;
 background-color: #fff;
 text-align: center;
}

#horizon { /* as seen at http://www.hicksdesign.co.uk/journal/archives/000062.php */
 background-color: transparent;
 position: absolute;
 top: 50%;
 left: 0px;
 width: 100%;
 margin-top: -200px;
 text-align: center;
 min-width: 399px; 
}

#box {
 height: 399px;
 width: 399px;
 position: relative;
 border: 1px solid black;
 background: url(bg.jpg) no-repeat;
 padding: 0;
 margin: 0px auto;
}

div#box a {
 display: block;
 position: relative;
 width: 41px;
 height: 41px;
 margin: 20px auto;
 padding: 0;
 text-decoration: none;
 color: #999;
}

div#box a#portf {
 margin-top: 50px;
 background: url(1.gif) no-repeat;
}
div#box a#portf:hover, div#box a#portf:active {
 width: 351px;
 background: url(1.gif) 140px -41px no-repeat;
}

div#box a#terr {
 background: url(2.gif) no-repeat;
}
div#box a#terr:hover, div#box a#terr:active {
 width: 351px;
 background: url(2.gif) 0 -41px no-repeat;
}

div#box a#vnd {
 background: url(3.gif) no-repeat;
}
div#box a#vnd:hover, div#box a#vnd:active {
 width: 351px;
 background: url(3.gif) 140px -41px no-repeat;
}

div#box a h2, div#box a p {
 display:none;
}
div#box a:hover h2, div#box a:active h2, div#box a:hover p, div#box a:active p {
 display:block;
}

h2, p {
 font-size: 10px;
 margin: 0;
 padding: 0;
 padding-top: 5px;
}

h2 {
 color: #444;
 font-weight: normal;
}

a#terr h2, a#terr p {
 text-align: left;
 margin-left: 5px;
}
a#vnd h2, a#vnd p, a#portf h2, a#portf p {
 text-align: right;
 margin-right: 5px;
}