html {
  font:11px/14px "Lucida Sans", sans-serif;
  color:#896c5c;
  background:#F9F2EB url(bg.jpg);
}

html.home {
  background:#efdec5 url(bg-home.jpg);
}

body {
  width:829px;
  height:611px;
  position:relative;
  margin:0 auto 20px auto;
  background:transparent url(bg-bar-left.jpg) no-repeat;
}
.home body {
  width:376px;
  height:596px;
  position:relative;
  margin:0 auto 20px auto;
  background:transparent url(home.jpg) no-repeat;
}

h1,
h2 {
  display:none;
}

/******************************************************************************/

.handheld,
.print {
  display:none;
}

/******************************************************************************/

.index {
  position:absolute;
  /*top:57px;*/
  top:33px;
  left:230px;
  width:548px;
  height:472px;
  margin:0;
  overflow:auto;
  background:transparent url(window-illustration.jpg) no-repeat;
}

.index li {
  list-style-type:none;
  float:left;
  margin:12px 0 0 12px;
  font-size:10px;
}

.index li a {
  display:block;
  line-height:0;
}

.index li a:hover {
  -moz-opacity:.7;
  opacity:.7;
}

/******************************************************************************/

.motionSample .sample {
  position:absolute;
  top:57px;
  left:243px;
  width:514px;
  height:400px;
  margin:0;
  background:transparent url(window-motion.jpg) no-repeat center;
}

.motionSample #noFlash,
.motionSample #flash {
  position:absolute;
  top:29px;
  display:none;
}
.motionSample #flash { left:-15px; }

.motionSample .sample ol {
  display:block;
  margin:29px 0 0 13px;
  overflow:auto;
}

.motionSample .sample li {
  display:block;
  float:left;
  margin:2px;
}

.motionSample .sample img {
  vertical-align: text-bottom;
}

.motionSample .subnav .play {
  display:block;
  top:370px;
  left:49px;
}

.motionSample .subnav .play a {
  display:none;
  width:43px;
  height:20px;
  background: transparent url(play-button.png) no-repeat;
  cursor:pointer;
}

.motionSample .subnav {
  left:215px;
  width:570px;
}

.motionSample .subnav .prev,
.motionSample .subnav .next {
  top:180px;
}

.motionSample .info {
  position:absolute;
  margin:0;
  top:478px;
  left:265px;
  color:#C09A7B;
}

.motionSample .info li {
  display:block;
}

.motionSample .info b {
  font-weight:normal;
  color:#896c5c;
}

.motionSample #reel {
  position:absolute;
  margin:0;
  top:13px;
  right:31px;
}

.motionSample #reel a {
  display:block;
  width:77px;
  height:55px;
  background:transparent url(demo-reel-button.png) no-repeat;
}

.motionSample #reel a:hover {
  -moz-opacity:.6;
  opacity:.6;
}

.motionSample #reel a * {
  display:none;
}

/******************************************************************************/

.subnav {
  position:absolute;
  top:57px;
  margin:0;
}

.subnav li {
  position:absolute;
  list-style-type:none;
}
.subnav .prev { left:0; }
.subnav .next { right:0; }

.subnav .prev a,
.subnav .next a {
  display:block;
  width:32px;
  height:30px;
}
.subnav .prev a { background:transparent url(nav-arrow-left.png) no-repeat left; }
.subnav .next a { background:transparent url(nav-arrow-right.png) no-repeat right; }

.subnav .prev a:hover,
.subnav .next a:hover,
.subnav .play a:hover {
  -moz-opacity:.6;
  opacity:.6;
}

.subnav .prev a *,
.subnav .next a *,
.subnav .play a * { display:none; }

/******************************************************************************/

.illustrationSample .sample {
  position:absolute;
  top:57px;
  left:230px;
  width:548px;
  height:472px;
  margin:0;
  background:transparent url(window-illustration.jpg) no-repeat;
}

.illustrationSample .sample img {
  display:block;
  margin:31px auto 0;
}

.illustrationSample .sample .title {
  margin-top:1em;
  text-align:center;
}

.illustrationSample .subnav {
  left:204px;
  width:600px;
}

.illustrationSample .subnav .prev,
.illustrationSample .subnav .next {
  top:227px;
}

/******************************************************************************/

#about {
  position:absolute;
  width:540px;
  height:588px;
  top:3px;
  left:207px;
  background:transparent url(about.jpg) no-repeat;
}

#about .bio {
  position:absolute;
  width:300px;
  top:107px;
  left:97px;
  font-size:11px;
  color:#C09A7B;
}

#p1 { margin-left:10px; }
#p2 { margin-left:-5px; }
#p3 { margin-left:10px; }
#p4 { margin-left:30px; }

/******************************************************************************/

.reel .sample {
  position:absolute;
  top:57px;
  left:230px;
  width:548px;
  height:400px;
  margin:0;
  background:transparent url(window-motion.jpg) no-repeat center;
}

.reel #noFlash,
.reel #flash {
  position:absolute;
  top:29px;
}

/******************************************************************************/

.home #menu {
  top:400px;
  left:146px;
}

#menu {
  position:absolute;
  top:198px;
  left:47px;
}

#menu h3 {
  display:none;
}

#menu ul {
  margin:0;
}

#menu li {
  list-style-type:none;
  margin-bottom:5px;
  color:#7A736B;
}

#menu .home {
  display:none;
}

#menu a.selected {
  cursor:default;
}

#menu .motion a,
#menu .illustration a,
#menu .links a,
#menu .about a,
#menu .contact a,
#menu .reel a {
  display:block;
  width:87px;
  background-color:transparent;
  background-repeat:no-repeat;
}

#menu .motion a {
  height:19px;
  background-image:url(menu-motion-up.png);
}
#menu .motion a.selected,
#menu .motion a:hover {
  background-image:url(menu-motion-down.png);
}

#menu .illustration a {
  height:12px;
  background-image:url(menu-illustration-up.png);
}
#menu .illustration a.selected,
#menu .illustration a:hover {
  background-image:url(menu-illustration-down.png);
}

#menu .links a {
  height:27px;
  background-image:url(menu-links-up.png);
}
#menu .links a.selected,
#menu .links a:hover {
  background-image:url(menu-links-down.png);
}

#menu .about a {
  height:21px;
  background-image:url(menu-about-up.png);
}
#menu .about a.selected,
#menu .about a:hover {
  background-image:url(menu-about-down.png);
}

#menu .contact a {
  height:16px;
  background-image:url(menu-contact-up.png);
}
#menu .contact a:hover {
  background-image:url(menu-contact-down.png);
}

#menu .reel a {
  height:31px;
  background-image:url(menu-reel-up.png);
}
#menu .reel a.selected,
#menu .reel a:hover {
  background-image:url(menu-reel-down.png);
}

#menu .motion a *,
#menu .illustration a *,
#menu .links a *,
#menu .about a *,
#menu .contact a *,
#menu .reel a * {
  display:none;
}

/******************************************************************************/

#logo {
  position:absolute;
  top:8px;
  left:42px;
  margin:0;
}

#logo a {
  display:block;
  width:96px;
  height:168px;
  background:transparent url(logo.jpg) no-repeat;
}

#logo a:hover {
  -moz-opacity:.8;
  opacity:.8;
}
#logo.selected a {
  -moz-opacity:1;
  opacity:1;
  cursor:default;
}

#logo a * {
  display:none;
}

.home #logo {
  top:219px;
  left:141px;
}

/******************************************************************************/

.home #mail {
  display:none;
}

.about #mail {
  top:20px;
  right:20px;
  background-image:url(mail-stamp.png);
}

#mail {
  position:absolute;
  bottom:30px;
  right:20px;
  margin:0;
  background:transparent url(mail-stamp-small.png) no-repeat;
  z-index:3;
}

#mail a {
  display:block;
  width:123px;
  height:49px;
}

#mail span,
#mail a * {
  display:none;
}

/******************************************************************************/

#copyright {
  margin:0;
  position:absolute;
  bottom:-1.5em;
  right:0;
  font-size:9px;
  color:#C1A78C;
}