/* SCREEN.CSS */
html { -webkit-text-size-adjust:none; } /* iPhone support */
body {
  margin: 2em auto;
  background: #303030 url('/images/background.gif') repeat-x;
  font: 75% "Gill Sans", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
  color: #DDD;
}
.container {
  width: 960px;
}

/* BLUEPRINT OVERRIDES::  ---------------------- */
h1, h2, h3, h4, h5, h6 {
  color: #DDD;
}
div.vcard {
  padding-left: 0;
}
div.vcard div span.tel {
  font-weight: normal;
}
div.vcard span a.email {
  font-weight: normal;
}
a, a:visited, a:link { color: #fff; text-decoration: none; }
a:hover { color: #945a42; }
pre { font-size: 120%; }
hr.space { background-color: transparent; height: 0px; width: 20px; }
hr.ie6 { display: none; }

/* /BLUEPRINT OVERRIDES ------------------------ */
/* HEADER:: ------------------------------------ */
#header {
  width: 230px;
  float: left;
  margin-right: 10px;
  padding-right: 0px;
  padding-left: 0px;
  text-align: left;
}
#header img#logo { margin: 0em 0 0em 4px; }
#header h1 { display: none; }
/* /HEADER ------------------------------------- */
/* NAV:: --------------------------------------- */
#nav { width: 720px; float: left; margin-right: 0; padding-bottom: 0; }
#nav p { text-align: left; font-weight: bold; margin-bottom: 1em; color: #945a42; padding: 10px 0 0 4px; }
#nav p a { text-decoration: none; letter-spacing: 0.15em; font-weight: normal; color: #ccc; }
#nav p a span { /*font-size: 130%;*/ }
#nav p a:hover { color: #A7785A; border-bottom: 1px solid #945a42; }

#home #home_nav,
#portfolio #portfolio_nav,
#published_work #published-work_nav,
#archive #archive_nav,
#biography #biography_nav,
#clients #clients_nav,
#contact #contact_nav {
  color: #945a42;
}

/* /NAV ---------------------------------------- */
/* FOOTER:: ------------------------------------ */
#footer {
  width: 950px;
  margin: 0;
  float: left;
  margin-right: 10px;
  margin-right: 0;
  margin-top: 2em;
  padding: 0;
}
#footer p {
  margin: 0 40px -1em 0px;
  padding: 1em 0 0 40px;
  text-align: right;
  font-size: 90%;
  color: #999;
}
#footer p#credit {
  margin: 0em 40px 1em 0;
  font-size: 90%;
  text-align: right;
}
#footer p#credit span {
  color: #666;
}

/* /FOOTER ------------------------------------- */
/* MAIN-CONTENT -------------------------------- */
#main-content {
  width: 870px;
  float: left;
  margin-right: 10px;
  padding-right: 40px;
  padding-left: 40px;
  margin-right: 0;
  margin-top: 0em;
  /* SLIDESHOW:: ------------------------------- */
}
#main-content p {
  font-size: 110%;
}
#main-content h2 {
  font-size: 120%;
  padding-bottom: 5px;
}
#main-content #slideshow {
  width: 870px;
  float: left;
  margin-right: 10px;
  position: relative;
  text-align: center;
  padding: 0;
  margin: 10px 0px;
  /* CONTROLS:: ------------------------------ */
  /* /CONTROLS ------------------------------- */
}
#main-content #slideshow #controls {
  z-index: 1000;
  position: absolute;
  text-align: left;
  top: 0;
  left: -40px;
  width: 160px;
  height: 180px;
  background-image: url('/images/blank.gif') repeat;
  opacity: 0.8;
}
#main-content #slideshow #controls ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
  font-size: 90%;
}
#main-content #slideshow #controls ul li {
  padding: 2px 0;
  color: #999;
}
#main-content #slideshow #controls ul li a {
  color: #999;
  text-decoration: none;
}
#main-content #slideshow #controls ul li a:hover {
  color: #945a42;
}
#main-content #slideshow #controls ul .all-loaded {
  color: #666;
}
#main-content #slideshow div.pics {
  text-align: center;
  padding: 0;
}
#main-content #slideshow div.pics div.caption p {
  text-align: right;
  padding: 0 5px;
  color: #888;
}
#main-content #slideshow div.pics div.caption p span {
  color: #666;
}

#slides .loading {
  top: 0;
  left: 120px;
  z-index: 0;
  height: 500px;
  width: 500px;
  background: url('/images/loader-big.gif') no-repeat center center;
  margin: 0 auto 20px auto;
}

/* /SLIDESHOW -------------------------------- */
/* /MAIN-CONTENT ------------------------------- */
/* HOME PAGE OVERRIDES ------------------------- */
#home #main-content {
  width: 950px;
  margin: 0;
  float: left;
  margin-right: 10px;
  margin-right: 0;
  padding-left: 0px;
  padding-right: 0px;
}
#home #main-content hr.divider {
  background-color: #545454;
  height: 1px;
}
#home #main-content #slideshow {
  width: 870px;
  float: left;
  margin-right: 10px;
  padding-left: 40px;
  padding-right: 40px;
  margin-right: 0;
  /* CONTROLS:: ------------------------------ */
}
#home #main-content #slideshow div.image div.desc {
  padding-left: 40px;
  width: 430px;
  float: left;
  margin-right: 10px;
  text-align: left;
  color: #888;
}
#home #main-content #slideshow div.image div.desc span {
  color: #666;
}
#home #main-content #slideshow div.image div.desc p {
  padding-left: 20px;
}
#home #main-content #slideshow div.image div.caption {
  width: 390px;
  float: left;
  margin-right: 10px;
  margin-right: 0;
}
#home #main-content #slideshow div.image div.caption p {
  text-align: right;
  padding: 0 60px 0 5px;
  color: #888;
}
#home #main-content #slideshow div.image div.caption p span {
  color: #666;
}
#home #main-content #slideshow #controls {
  left: 0px;
}
#home #column1, #home #column2, #home #column3, #home #column4 {
  width: 230px;
  float: left;
  margin-right: 10px;
  /* override this here, just in case we're getting some Textile HTML code */
  /* used by the YAML based snippets */
}
#home #column1 h3, #home #column2 h3, #home #column3 h3, #home #column4 h3 {
  padding: 6px;
  margin: 0 0px 1em 0px;
  font-size: 120%;
  text-transform: uppercase;
}
#home #column1 h3 a, #home #column2 h3 a, #home #column3 h3 a, #home #column4 h3 a {
  text-decoration: none;
  font-weight: normal;
  color: #ccc;
}
#home #column1 h3 a:hover, #home #column2 h3 a:hover, #home #column3 h3 a:hover, #home #column4 h3 a:hover {
  color: #A7785A;
  border-bottom: 1px solid #945a42;
}
#home #column1 p, #home #column2 p, #home #column3 p, #home #column4 p {
  padding: 6px;
}
#home #column1 .home-box, #home #column2 .home-box, #home #column3 .home-box, #home #column4 .home-box {
  background: #3A3A3A;
  border: 1px solid #2D2D2D;
  height: 265px;
  text-align: center;
}
#home #column1 .home-box table, #home #column2 .home-box table, #home #column3 .home-box table, #home #column4 .home-box table {
  width: 100%;
}
#home #column1 .home-box table td.title, #home #column2 .home-box table td.title, #home #column3 .home-box table td.title, #home #column4 .home-box table td.title {
  height: 45px;
  vertical-align: top;
  text-align: left;
  padding: 0;
}
#home #column1 .home-box table td.title h3, #home #column2 .home-box table td.title h3, #home #column3 .home-box table td.title h3, #home #column4 .home-box table td.title h3 {
  padding: 6px;
  margin: 0 0px 0 0px;
  font-size: 120%;
  text-transform: uppercase;
}
#home #column1 .home-box table td.title h3 a, #home #column2 .home-box table td.title h3 a, #home #column3 .home-box table td.title h3 a, #home #column4 .home-box table td.title h3 a {
  text-decoration: none;
  font-weight: normal;
  color: #ccc;
}
#home #column1 .home-box table td.title h3 a:hover, #home #column2 .home-box table td.title h3 a:hover, #home #column3 .home-box table td.title h3 a:hover, #home #column4 .home-box table td.title h3 a:hover {
  color: #A7785A;
  border-bottom: 1px solid #945a42;
}
#home #column1 .home-box table td.title p, #home #column2 .home-box table td.title p, #home #column3 .home-box table td.title p, #home #column4 .home-box table td.title p {
  color: #666;
  padding: 0 6px 6px 6px;
  margin: -4px 0 0 0;
}
#home #column1 .home-box table td.text, #home #column2 .home-box table td.text, #home #column3 .home-box table td.text, #home #column4 .home-box table td.text {
  padding-top: 0;
}
#home #column1 .home-box table td.text p, #home #column2 .home-box table td.text p, #home #column3 .home-box table td.text p, #home #column4 .home-box table td.text p {
  padding: 0;
  font-size: 100%;
}
#home #column1 .home-box table td.imgbox, #home #column2 .home-box table td.imgbox, #home #column3 .home-box table td.imgbox, #home #column4 .home-box table td.imgbox {
  vertical-align: top;
  text-align: center;
}
#home #column4 {
  margin-right: 0;
}

/* /HOME PAGE ---------------------------------- */
/* PORTFOLIO PAGE OVERRIDES -------------------- */

/* /PORTFOLIO PAGE ----------------------------- */
/* PUBLISHED_WORK PAGE OVERRIDES --------------- */

/* /PUBLISHED_WORK PAGE ------------------------ */
/* /MAIN-CONTENT ------------------------------- */
/* ARCHIVE PAGE OVERRIDES ---------------------- */
#archive {
  /* the intro text on archives page */
  /* the main thumbnails grid holder div */
  /* single page layout (same as #slideshow, but not cycle'd) */
}
#archive #intro {
  width: 390px;
  float: left;
  margin-right: 10px;
  margin-right: 0;
}
#archive #thumbs-grid {
  width: 870px;
  float: left;
  margin-right: 10px;
  margin-right: 0;
  /* the main archive sections box */
}
#archive #thumbs-grid .archive-box {
  float: left;
  background: #343434;
  border: 1px solid #232323;
  height: 230px;
  width: 190px;
  margin: 10px 10px;
  text-align: center;
}
#archive #thumbs-grid .archive-box table td.title {
  height: 45px;
  vertical-align: top;
  text-align: left;
  padding: 0;
}
#archive #thumbs-grid .archive-box table td.title h3 {
  padding: 6px;
  margin: 0 0px 0 0px;
  font-size: 120%;
}
#archive #thumbs-grid .archive-box table td.title h3 a {
  text-decoration: none;
  font-weight: normal;
  color: #ccc;
}
#archive #thumbs-grid .archive-box table td.title h3 a:hover {
  color: #A7785A;
  border-bottom: 1px solid #945a42;
}
#archive #thumbs-grid .archive-box table td.imgbox {
  vertical-align: top;
  text-align: center;
}
#archive #thumbs-grid div.thumb {
  text-align: center;
  float: left;
  width: 180px;
  height: 180px;
  padding: 8px;
  margin: 8px;
  /* without box & border, it looks bad */
  background: #343434;
  border: 1px solid #222;
}
#archive #thumbs-grid div.thumb img {
  padding: 2px;
  border: none;
}
#archive #thumbs-grid div.thumb span.caption {
  font-size: 90%;
  color: #555;
}
#archive #clickthrough {
  width: 790px;
  float: left;
  margin-right: 10px;
  margin-right: 0;
  text-align: center;
  padding: 0;
  margin: 10px 40px;
}
#archive #clickthrough .pagination {
  text-align: center;
  margin: -1em 0 1em 0;
}
#archive #clickthrough div.image div.caption {
  color: #666;
  text-align: right;
  padding: 0px 2em 0 0;
}
#archive h2 {
  color: #945a42;
}

#archive.index h2 {
  color: #DDD;
}

/* /ARCHIVE PAGE ------------------------------- */
/* BIOGRAPHY PAGE OVERRIDES -------------------- */
#biography {
  /* HIGHLIGHTED REVIEWS */
}
#biography #main-content #left {
  width: 510px;
  float: left;
  margin-right: 10px;
  padding-right: 40px;
}
#biography #main-content #right {
  width: 310px;
  float: left;
  margin-right: 10px;
  margin-right: 0;
}
#biography #main-content #right p {
  padding: 5px 0px;
  color: #999;
}
#biography #main-content #right p a {
  color: #999;
  border-bottom: none;
}
#biography #main-content #right p a:hover {
  color: #945a42;
  border-bottom: 1px dashed #945a42;
}
#biography #main-content #self-portrait {
  width: 220px;
}
#biography #main-content #self-portrait p.caption {
  color: #999;
  padding: 10px 0px;
  font-size: 90%;
}
#biography #main-content #self-portrait.left {
  margin: 0 20px 10px 0px;
}
#biography #main-content #self-portrait.right {
  margin: 0 0px 10px 20px;
}
#biography #main-content hr {
  background-color: #555;
  color: #555;
}
#biography #main-content p {
  color: #ccc;
  font: 96% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
  line-height: 135%;
}
#biography #main-content ul {
  list-style-type: none;
  margin-left: -0.4em;
}
#biography #main-content #major-projects ul li, #biography #main-content #monographs ul li {
  color: #bbb;
  font-size: 95%;
  padding: 8px 5px;
  text-transform: uppercase;
}
#biography #main-content #major-projects ul li strong, #biography #main-content #monographs ul li strong {
  font-size: 100%;
}
#biography #main-content #major-projects ul li span, #biography #main-content #monographs ul li span {
  color: #666;
}
#biography #main-content #major-projects ul li:hover, #biography #main-content #monographs ul li:hover {
  background-color: #444;
}
#biography #main-content #sel-reviews {
  /* SELECTED REVIEWS LIST */
}
#biography #main-content #sel-reviews ul li {
  color: #bbb;
  font-size: 95%;
  padding: 8px 5px;
  text-transform: uppercase;
}
#biography #main-content #sel-reviews ul li strong {
  color: #DDD;
}
#biography #main-content #sel-reviews ul li span {
  padding-left: 30px;
}
#biography #main-content #sel-reviews ul li:hover {
  background-color: #444;
}
#biography .hl-review {
  text-align: left;
}
#biography .hl-review h4 {
  font-size: 120%;
  text-transform: uppercase;
}
#biography .hl-review img {
  padding: 10px 10px 10px 0;
}

/* /BIOGRAPHY PAGE ----------------------------- */
/* CLIENTS PAGE OVERRIDES ----------------------- */
#clients #main-content #left {
  width: 550px;
  float: left;
  margin-right: 10px;
}
#clients #main-content #right {
  width: 310px;
  float: left;
  margin-right: 10px;
  margin-right: 0;
}
#clients #main-content ul {
  list-style-type: none;
  margin-left: 0.2em;
}
#clients #main-content ul li {
  color: #bbb;
  font-size: 95%;
  padding: 5px 5px;
  text-transform: uppercase;
}
#clients #main-content ul li strong {
  font-size: 100%;
  color: #DDD;
}
#clients #main-content #ed-clients-left {
  width: 270px;
  float: left;
  margin-right: 10px;
}
#clients #main-content #ed-clients-left ul {
  text-align: right;
}
#clients #main-content #ed-clients-right {
  width: 230px;
  float: left;
  margin-right: 10px;
  margin-right: 0;
}
#clients #main-content #ed-clients-right ul {
  text-align: left;
}
#clients #main-content .imgbox {
  margin: 0.4em 0 0 -0.2em;
}
#clients #main-content .imgbox p {
  text-align: left;
  padding: 0 1.5em 0 5px;
  color: #888;
  font-size: 90%;
}
#clients #main-content .imgbox p span {
  color: #666;
}

/* /CLIENTS PAGE ------------------------------- */
/* CONTACT PAGE OVERRIDES ---------------------- */
#contact #main-content #contact_box {
  width: 310px;
  float: left;
  margin-right: 10px;
}
#contact #main-content #img_col {
  width: 550px;
  float: left;
  margin-right: 10px;
  margin-right: 0;
}
#contact #main-content .vcard .fn {
  text-transform: uppercase;
}
#contact #main-content p {
  margin-bottom: 0.5em;
}
#contact #main-content h4 {
  margin: 0;
}
#contact #main-content .imgbox {
  text-align: right;
}
#contact #main-content .imgbox p {
  padding: 0 0em 0 5px;
  color: #888;
  font-size: 90%;
}
#contact #main-content .imgbox p span {
  color: #666;
}
#contact #main-content .imgbox img {
  margin-top: 36px;
}

/* /CONTACT PAGE ------------------------------- */
/* BOOKMARK PHOTO PAGE OVERRIDES --------------- */
#photo #main-content {
  /* single page layout (same as #slideshow, but not cycle'd) */
}
#photo #main-content #clickthrough {
  text-align: center;
  width: 800px;
  padding: 0;
  margin: 10px 40px;
}
#photo #main-content #clickthrough div.image div.caption {
  color: #666;
  text-align: right;
  padding: 0px 2em 0 0;
}

/* /BOOKMARK PHOTO PAGE ------------------------ */
/* CLASSES ------------------------------------- */
.left {
  float: left;
}

.right {
  float: right;
}

/* /CLASSES ------------------------------------ */
/* PAGINATION ---------------------------------- */
.pagination_info {
  text-align: left;
  text-transform: uppercase;
  padding: 0px 0 5px 0;
  margin: 0.3em 0em 0 0.5em;
}
.pagination_info b {
  color: #945a42;
  padding: 0px 5px;
  font-size: 110%;
}

.pagination {
  text-align: right;
  text-transform: uppercase;
  color: #945a42;
  padding: 0px 0 5px 0;
  margin: 0.3em 0.8em 0 0;
}
.pagination a {
  padding: 0.2em 0.5em;
  margin: 0.2em;
  text-decoration: none;
  color: #ccc;
}
.pagination a.next_page span,
.pagination a.prev_page span {
  font-size: 130%;
}
.pagination a:hover {
  background-color: #7E7968;
  color: #fff;
}
.pagination a:active {
  color: #fff;
}
.pagination span.current {
  padding: 0.2em 0.5em;
  margin: 0.2em;
  font-weight: bold;
  color: #945a42;
}
.pagination span.disabled {
  padding: 0.2em 0.5em;
  margin: .2em;
  color: #777;
}

/* /PAGINATION --------------------------------- */
p.timer {
  margin-top: 4em;
  text-align: center;
  font-size: 80%;
  color: #555;
  display: none;
}

/* DEBUG:: */
/* TODO ITEMS ---------------------------------- */
#todo {
  width: 870px;
  float: left;
  margin-right: 10px;
  margin-right: 0;
  color: #666;
}
#todo h4 {
  color: #666;
}
#todo ul {
  list-style: square outside;
}

#home #todo {
  width: 950px;
  margin: 0;
  float: left;
  margin-right: 10px;
}

/* /TODO ITEMS --------------------------------- */