/* johndmchugh.com                */
            /* screen.css                     */
            /* 2006-10-30                     */

              @import url(thumbs.css);


            /* GLOBAL RESET */

              * {
                border: none;
                margin: 0;
                padding: 0;
              }


            /* DOCUMENT */

              html {
                background: #000;
                color: #ddd;
              }

              body {
                font: 76%/1.0 "Trebuchet MS", sans-serif;
                margin: 0 auto;
                max-width: 720px;
                padding: 0 4px;
              }


            /* LINKS */

              a {
                text-decoration: none;
              }

              a:link,
              a:visited {
                color: #ddd;
              }

              a:focus,
              a:hover {
                color: #fff;
              }

              a:active {
                color: #777;
              }


            /* HEADER & BRANDING */

  body.story  h1 {
                float: left;
                font-size: 2.0em;
                padding-top: 8px;
                text-transform: uppercase;
              }

              #branding {
                float: right;
                text-align: right;
              }

  body.index  #branding {
                margin: 1.0em 0 3.0em;
              }

  body.story  #branding {
                margin-top: 8px;
              }

              #branding dd,
              #branding dt,
              #branding h1,
              #branding h2 {
                display: inline;
                font-size: 2.0em;
              }

              #branding dt,
              #branding h1 {
                font-weight: bold;
              }

              #branding dd,
              #branding h2 {
                font-weight: normal;
                margin-left: 0.5em;
                text-transform: uppercase;
              }


            /* CONTACT */

              #contact {
                clear: right;
                color: #777;
                float: right;
                width: 50%; /* sigh */
              }

              #contact address {
                clear: right;
                float: right;
                font-size: 1.5em;
                font-style: normal;
                height: 1.0em;
              }

              #contact address.phone {
                margin-bottom: 0.5em;
              }

              #contact address a:link,
              #contact address a:visited {
                color: #777;
              }

              #contact address a:focus,
              #contact address a:hover {
                color: #999;
              }

              #contact address a:active {
                color: #555;
              }


            /* BLOG LINK */

              .bloglink {
                clear: right;
                float: right;
                font-size: 1.5em;
                font-style: normal;
                height: 1.0em;
                margin-top: 2.0em;
                margin-bottom: 15em;
              }

              .bloglink a {
                background: url('link.png') left 8px no-repeat;
                padding-left: 16px;
              }

              .bloglink a:focus,
              .bloglink a:hover {
                background-image: url('link-focus.png');
              }

              .bloglink small {
                color: #777;
                font-size: 0.667em;
                font-weight: bold;
              }


            /* MENU */

              .menu {
                list-style: none none outside;
              }

              ol.menu {
                margin-top: 6.0em;
              }

              ol.menu li a {
                text-transform: uppercase;
              }

              ul.menu {
                margin-top: 10em;
              }

              .menu li a:link,
              .menu li a:visited {
                background: url('link.png') right center no-repeat;
                font-size: 1.5em;
                padding-right: 16px;
              }

              .menu li a:focus,
              .menu li a:hover {
                background: url('link-focus.png') right center no-repeat;
              }

              .menu li small {
                font-size: 1.0em;
                visibility: hidden;
              }

              .menu li small span {
                display: block;
                visibility: visible;
              }

              .menu li small span.place {
                margin-top: 0.1667em;
              }

              .menu li small span.date {
                margin-top: -1.0em;
              }


            /* PHOTO */

  body.story  #photo {
                clear: both;
                min-height: 325px;
              }

  body.story  #photo img {
                float: left;
                margin: 1px 80px 0 0;
              }

  body.story  #photo object {
                float: left;
                margin: 1px 12px 0 0;
              }

  body.index  #photo img {
                width: 100%;
              }

  body.story  #photo.wide img {
                margin-bottom: 1px;
                margin-right: 0;
              }

              #photo p {
                color: #bbb;
                font-size: 1.08em;
                font-weight: bold;
                line-height: 1.24em;
                text-align: right;
              }

              #photo p.context {
                margin-top: 1.5em;
              }

              #photo p.context a {
                text-decoration: underline;
              }

              #photo p.context a:link,
              #photo p.context a:visited {
                color: #999;
              }

              #photo p.context a:focus,
              #photo p.context a:hover {
                color: #ddd;
              }

              #photo p.context a:active {
                color: #777;
              }

              #photo p.date {
                color: #777;
              }

              #photo.wide p.date,
              #photo.wide p.caption {
                float: left;
                margin-right: 0.5em;
                text-align: left;
              }

              #photo.wide p.context {
                margin-top: 0;
              }


            /* STORY */

              #story {
                padding: 3.0em 0 1.0em;
              }

              #story p {
                clear: both;
                color: #bbb;
                font-size: 1.08em;
                font-weight: bold;
                line-height: 1.23em;
                margin: 1.0em 0;
                text-align: justify;
              }


            /* NAVIGATION */

              #navigation {
                clear: both;
                margin: 0 -2px;
              }

              #navigation a,
              #navigation strong {
                display: block;
                float: left;
                margin: 0 2px 3px;
              }

              #navigation a.thumb {
                background: #fff;
                color: #000;
                height: 42px;
              }

              #navigation a.thumb:focus img,
              #navigation a.thumb:hover img {
                opacity: 0.8;
              }

              #navigation a.thumb:active {
                background: #000;
                color: #fff;
              }

              #navigation a.next {
                background: url('next-focus.png') no-repeat;
              }

              #navigation a.previous {
                background: url('previous-focus.png') no-repeat;
              }

              #navigation a.start {
                background: url('start-focus.png') no-repeat;
              }

              #navigation a.next:focus img,
              #navigation a.next:hover img,
              #navigation a.previous:focus img,
              #navigation a.previous:hover img,
              #navigation a.start:focus img,
              #navigation a.start:hover img {
                visibility: hidden;
              }

              #navigation a.next:active {
                background: url('next-active.png') no-repeat;
              }

              #navigation a.previous:active {
                background: url('previous-active.png') no-repeat;
              }

              #navigation a.start:active {
                background: url('start-active.png') no-repeat;
              }

              #navigation strong {
                font-size: 24px;
                line-height: 42px;
                text-align: center;
              }


            /* CREDIT */

              #credit {
                clear: both;
                color: #777;
                font-size: 0.8333em;
                padding-bottom: 0.5em;
                text-align: right;
                text-transform: uppercase;
              }

              #credit a:link,
              #credit a:visited {
                color: #777;
              }

              #credit a:focus,
              #credit a:hover {
                color: #999;
              }

              #credit a:active {
                color: #555;
              }