body {
  margin: 0px;
  font-family: Courier, monospace;
  font-size: 15px;
  line-height: 23px;
}

body, a {
  color: transparent;
}

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#page {
  margin: 150px 0px 0px 78px;
}

#nav {
  position: fixed;
  top: 0px;
  z-index: 1;
}

#nav li {
  cursor: pointer;
  position: absolute;
  padding: 5px 8px;
  background-color: white;
  background-position: 8px 5px;
  background-repeat: no-repeat;
}

li#nav_home {
  width: 167px;
  height: 20px;
  top: 40px;
  left: 70px;
}

li#nav_projects {
  width: 81px;
  height: 13px;
  top: 40px;
  left: 330px;
}

li#nav_about {
  width: 50px;
  height: 13px;
  top: 63px;
  left: 330px;
  padding-top: 2px;
}

#nav_home {
  background-image: url(../images/terry.gif);
}

#nav.visible #nav_projects,
#nav.visible #nav_about,
#nav:hover #nav_projects,
#nav:hover #nav_about {
  background-image: url(../images/nav.gif);
}

#nav.visible #nav_about,
#nav:hover #nav_about {
  background-position: 8px -34px;
}

#projects #nav #nav_projects,
#nav #nav_projects:hover {
  background-position: 8px -13px;
}

#about #nav #nav_about,
#nav #nav_about:hover {
  background-position: 8px -52px;
}

#projects #nav_projects,
#about #nav_about {
  width: 97px;
}


/* HOME ---------------- */

#home {
  overflow: hidden;
}

#home #page {
  margin: 0px;
  width: 720px;
  height: 771px;
}

/* PROJECTS ------------ */

#projects.work1 #page {
  background: url(../images/projects/01_aaarc.jpg) no-repeat;
  width: 1471px;
  height: 3200px;
}

#projects.work2 #page {
  background: url(../images/projects/02_unbalanced.jpg) no-repeat;
  width: 1428px;
  height: 1959px;
}

#projects.work3 #page {
  background: url(../images/projects/03_halo.jpg) no-repeat;
  width: 1578px;
  height: 1030px;
}

#projects.work4 #page {
  background: url(../images/projects/04_want.jpg) no-repeat;
  width: 2042px;
  height: 2465px;
}

#projects.work5 #page {
  background: url(../images/projects/05_mustlovetype.jpg) no-repeat;
  width: 2000px;
  height: 480px;
}

#projects.work6 #page {
  background: url(../images/projects/06_elitica.jpg) no-repeat;
  width: 1376px;
  height: 1737px;
}

#projects.work7 #page {
  background: url(../images/projects/07_rome.jpg) no-repeat;
  width: 1893px;
  height: 1000px;
}

#projects.work8 #page {
  background: url(../images/projects/08_livelife.jpg) no-repeat;
  width: 1194px;
  height: 1930px;
}

#projects.work9 #page {
  background: url(../images/projects/09_random.jpg) no-repeat;
  width: 2050px;
  height: 920px;
}

#projects.work10 #page {
  background: url(../images/projects/10_marks.jpg) no-repeat;
  width: 1206px;
  height: 1750px;
}

#work {
  background: url(../images/projects.gif) no-repeat;
  width: 432px;
  height: 88px;
  line-height: 20px;
  position: fixed;
  top: 40px;
  left: 500px;
  padding: 5px 8px;
  z-index: 1;
  display: none;
}

#projects #work {
  display: block;
}

#work li {
  float: left;
  margin-right: 27px;
  cursor: pointer;
  ;
}

#projects.work1 #work1, #work1:hover { background: url(../images/projects.gif) no-repeat 0px -100px; }
#projects.work2 #work2, #work2:hover { background: url(../images/projects.gif) no-repeat 0px -120px; }
#projects.work3 #work3, #work3:hover { background: url(../images/projects.gif) no-repeat 0px -140px; }
#projects.work4 #work4, #work4:hover { background: url(../images/projects.gif) no-repeat 0px -160px; }
#projects.work5 #work5, #work5:hover { background: url(../images/projects.gif) no-repeat 0px -180px; }
#projects.work6 #work6, #work6:hover { background: url(../images/projects.gif) no-repeat 0px -200px; }
#projects.work7 #work7, #work7:hover { background: url(../images/projects.gif) no-repeat 0px -220px; }
#projects.work8 #work8, #work8:hover { background: url(../images/projects.gif) no-repeat 0px -240px; }
#projects.work9 #work9, #work9:hover { background: url(../images/projects.gif) no-repeat 0px -260px; }
#projects.work10 #work10, #work10:hover { background: url(../images/projects.gif) no-repeat 0px -280px; }

#projects #description {
  position: fixed;
  bottom: 9px;
  left: 0px;
  width: 545px;
  background: white url(../images/descriptions.gif) no-repeat;
  z-index: 1;
}

#projects #description.collapsed {
  width: 70px;
  background-image: none;
}

#projects #description .slash {
  background: url(../images/slash.gif) no-repeat 40px 8px;
  width: 21px;
  height: 62px;
  padding: 10px 10px 10px 40px;
  cursor: pointer;
}

#projects.work1 #description {
  background-position: 78px 9px;
  height: 96px;
}

#projects.work2 #description {
  background-position: 78px -90px;
  height: 80px;
}

#projects.work3 #description {
  background-position: 78px -170px;
  height: 115px;
}

#projects.work4 #description {
  background-position: 78px -290px;
  height: 125px;
}

#projects.work5 #description {
  background-position: 78px -422px;
  height: 96px;
}

#projects.work6 #description {
  background-position: 78px -522px;
  height: 110px;
}

#projects.work7 #description {
  background-position: 78px -636px;
  height: 76px;
}

#projects.work8 #description {
  background-position: 78px -724px;
  height: 96px;
}

#projects.work9 #description {
  background-position: 78px -820px;
  height: 96px;
}

#projects.work10 #description {
  background-position: 78px -920px;
  height: 56px;
}

/* ABOUT --------------- */

#about #page {
  background: url(../images/about.gif) no-repeat;
  width: 540px;
  height: 261px;
}

#bio {
  display: none;
}

#about #bio {
  display: block;
}

#about #page p {
  margin-bottom: 26px;
}

#contact {
  margin-top: 26px;
  line-height: 25px;
}

#contact label {
  font-weight: bold;
  width: 99px;
  display: block;
  float: left;
  clear: both;
}

#contact_email a:hover {
  background: url(../images/email.gif) no-repeat;
}

#contact_phone a:hover {
  background: url(../images/phone.gif) no-repeat;
}

#contact_resume a:hover {
  background: url(../images/resume.gif) no-repeat;
}