body { background: #F9F9F3; font-family: "Tahoma", "Arial", "Verdana", "Geneva CE", "lucida", sans-serif; font-size: 1em; color: #84A0AD; text-align: center; }
body, table, h1, h2, h3, h4, h5, h6, ul, ol, li, a, img, p, form, hr, dl, dt, dd, frame { padding: 0; margin: 0; border: 0; }

a { color: #84A0AD; }
a:hover { color: #84A0AD; }

#universe { width: 595px; padding: 39px 0 50px 0; margin: 0 auto;  text-align: left; } 
 
h1 { width: 137px; height: 72px; float: left; font-size: 1em; }
h1 a { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; }
h1 span { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url("../images/gfx-h1.gif") no-repeat 0 0; cursor: pointer; }

#contact, #backtoportfolio { display: block; width: 69px; height: 30px; float: right; position: relative; overflow: hidden; font-size: 0.7em; margin: 22px 0 0 7px; right: 7px; }
#contact span, #backtoportfolio span { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url("../images/gfx-contact.gif") no-repeat 0 0; cursor: pointer; }
#contact:hover, #backtoportfolio:hover { background: transparent; }
#contact:hover span, #backtoportfolio:hover span { background-position: 0 100%; }
#backtoportfolio { width: 115px; }
#backtoportfolio span { background: url("../images/gfx-backtoportfolio.gif") no-repeat 0 0; }

#welcome { clear: both; width: 596px; height: 78px; position: relative; overflow: hidden; background: url("../images/gfx-welcome.gif") no-repeat 0 0; }
#welcome span { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url("../images/gfx-welcome.gif") no-repeat 0 0; }

#item { width: 595px; background: url("../images/bcg-item.gif") no-repeat 0 0; margin: 20px 0 0 0; padding: 358px 0 0 6px; text-align: left; position: relative; }
#item .pic { position: absolute; left: 6px; top: 6px; width: 583px; height: 331px; overflow: hidden; }
#item .info { float: left; padding: 0 0 0 10px; }
#item h2 { font-size: 0.7em; line-height: 120%; color: #688998; }
#item h2 span { font-weight: normal; color: #84A0AD; padding: 0 0 0 1px; }
#item p { font-size: 0.7em; color: #ADBCC1; line-height: 120%; float: right; text-align: right; padding: 0 21px 0 20px; }
#item .info p { float: none; text-align: left; padding: 0; }
.pic a { width: 292px; height: 331px; display: block; position: absolute; top: 0; z-index: 50; background: url("../images/bcg-transparent.gif") no-repeat 0 0;  }
.pic a:hover { background-repeat: no-repeat; background-position: 0 0; }
.pic span { display: none; }
.goprev { left: 0; }     .goprev:hover { background-image: url("../images/gfx-goprev.gif"); }
.gonext { right: -1px; } .gonext:hover { background-image: url("../images/gfx-gonext.gif"); }

#contactbox { width: 595px; height: 352px; background: url("../images/bcg-item.gif") no-repeat 0 0; padding: 6px 0 0 6px; text-align: left; position: relative; margin: 20px 0 -15px 0; }
#contactbox p { width: 276px; height: 270px; background: #fff url("../images/bcg-contactbox.gif") no-repeat 0 0; padding: 61px 0 0 307px; position: relative; font-size: 0.8em; }
#contactbox img { position: absolute; left: 0; bottom: 0; }
#contactbox span, #contactbox a { width: 267px; display: block; position: relative; overflow: hidden; }
#contactbox span span, #contactbox a span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: 0 0; background-repeat: no-repeat; }
#contactbox a:hover span { background-position: left bottom; }
#c-name { height: 77px; } #c-name span { background-image: url("../images/gfx-cname.gif"); }
#c-mail { height: 29px; } #c-mail span { background-image: url("../images/gfx-cmail.gif"); }
#c-ims  { height: 98px; } #c-ims span  { background-image: url("../images/gfx-cims.gif"); }

#navi { clear: both; padding: 16px 0 0 0; }
#navi a, #navi div { display: block; height: 42px; position: relative; overflow: hidden; float: left; font-size: 0.7em; z-index: 1; }
#navi span { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-repeat: no-repeat; background-position: left center; }
#navi div span { background-position: 0 0; } 
#navi a:hover { z-index: 2; }
#navi a:hover span { background-position: left bottom; z-index: 30; cursor: pointer; }

#prev { width: 248px; text-align: left; }
#prev:hover { margin: 0 -1px 0 0; padding: 0 1px 0 0; }
#prev span { background-image: url("../images/gfx-prev.gif"); }

#prlist { width: 102px; margin: 0 0 0 -1px; background: url("../images/gfx-projectlist2.gif") no-repeat left center; z-index: 10; }
#prlist a { width: 101px; padding: 0 1px 0 0; }
#prlist a:hover { display: block; position: relative; z-index: 10; }
#navi #prlist a span { background-image: url("../images/gfx-projectlist.gif"); background-position: left center; }
#navi #prlist a:hover span { background-position: left bottom; }
#navi.open #prlist a { display: none; }
#next { width: 247px; margin: 0 0 0 -1px; }
#next:hover { margin: 0 0 0 -2px; border-left: 1px solid #DBE1DF; }
#next span {  background-image: url("../images/gfx-next.gif"); }
.open #prev span, .jsopen #prev span { background-image: url("../images/gfx-prev2.gif"); }
.open #next span, .jsopen #next span { background-image: url("../images/gfx-next2.gif"); }

#navi.jsopen #prlist a span { background-image: url("../images/gfx-projectlist2.gif"); }
#navi.jsopen #prlist a:hover span { background-position: left bottom; }

#projectlist { clear: both; width: 100%; list-style: none; background: url("../images/bcg-projectlist-bottom.gif") no-repeat left bottom; font-size: 0.7em; padding: 2px 0 0 0; position: relative; top: -2px; z-index: 10; }
#projectlist a { width: 563px; display: block; border-left: 1px solid #E7E9E5; border-right: 1px solid #E7E9E5; border-bottom: 1px solid #F0F1EE; background: #FEFEFB; padding: 13px 15px 14px 15px; text-decoration: none; text-align: right; color: #ADB5B8; cursor: pointer; }
#projectlist a:hover { color: #A6ACAE; border: 1px solid #E6E7E4; background: #F9FAF6; margin: -1px 0 0 0; }
#projectlist a:hover strong { color: #425E6B;}
#projectlist .active a strong { color: #51707E; } 
/* #projectlist .active a strong { padding: 0 9px 0 0; color: #51707E; background: url("../images/gfx-projectlist-current.gif") no-repeat right center;  } */
#projectlist .last a { padding: 13px 15px 17px 15px; border: none; background: url("../images/bcg-projectlist-libottom.gif") no-repeat left bottom; }
#projectlist .last a:hover { border: none; border-top: 1px solid #E6E7E4; background: none; }
#projectlist strong { float: left; color: #88A2AE; font-weight: normal; }

#copyright { clear: both; width: 185px; height: 55px; overflow: hidden; position: relative; font-size: 0.7em; }
#copyright span { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url("../images/gfx-copyright.gif") no-repeat 0 0; }