/* ======================== GENERAL ======================== */

body {
  position: relative;
  background: url(/images/ui/background.gif) center top;
  width: 656px; /* 612px col + 22px*2 sombra */
  margin: auto;
  font-family: Georgia, Serif;
  font-size: 0.85em; /* PSD: 12.5pt; CSS: 13.6px */
  line-height: 1.323em; /* 13.6×1.323=18px */
  color: #b7b1a9;
}

h4, #skip_to_content, .caption, .print {
  display: none;
}

/* ======================== TIPOGRAFIAS Y COLORES ======================== */

a, #content .awards a {
  color: #988f87;
  text-decoration: none;
}

a:hover, #content .awards a:hover, #footer a:hover {
  color: #8e941a;
}

a:active, #content .awards a:active, #footer a:active {
  color: #3d2e25;
}

#footer a, #content .vcard a {
  color: #b7b1a9;
}

#content a {
  color: #8e941a;
}

#content a:hover {
  color: #8e941a;
  border-bottom: 1px dotted #8e941a;
}

#content a:active {
  color: #3d2e25;
  border-bottom: 1px dotted #3d2e25;
}

.related-links, .related-links a {
  font-style: italic;
}

#local-nav a {
  color: #988f87;
}

#content h2 a {
  color: #3d2e25;
}

#content h2 a:hover {
  border: 0;
}

#content .awards a:hover, #content .awards a:active, #home-nav a:hover, #home-nav a:active, #local-nav a:hover, #local-nav a:active, #content .vcard a:hover, #content .vcard a:active {
  border: 0;
}

a.external {
  background: transparent url(/images/ui/external.gif) no-repeat scroll right center;
  padding-right: 13px;
}

p.legal a.external {
  background: none;
  padding-right: 0;
}

.selected {
  color: #3d2e25 !important;
}

.contact.selected a {
  cursor: default;
  color: #3d2e25;
}

#main-nav {
  color: #988f87;
}

#top li:hover {
  color: #8e941a;
}

#local-nav a.inactive {
  color: #b7b1a9;
}

h1, h2 { /* Títulos */
  font-size: 1.36em; /* PSD: 19pt; CSS: 18.49px */
  font-weight: normal;
  color: #655c53;
}

h1 span, h2 span { /* Tipo de trabajo */
  font-size: 0.74em; /* PSD: 12.5pt CSS: 13.68px */
  color: #988f87;
}

h3 { /* Subtítulos */
  font-size: 1em;
  font-weight: normal;
  color: #655c53;
}

#main-nav {  /* Navegación principal */
  font-size: 1.36em; /* PSD: 19pt; CSS: 18.49px */
}

#main-nav .subnav {  /* Navegación secundaria */
  font-size: 0.74em; /* PSD: 12.5pt CSS: 13.68px */
  font-style: italic;
}

#main-nav .contact {  /* Link de contacto */
  font-size: 0.74em; /* PSD: 12.5pt CSS: 13.68px */
}

#top > li, #local-nav > li {
  cursor: default;
}

#language a { /* idiomas */
  font-family: Verdana, Sans-serif;
  font-size: 0.65em; /* PSD: 8pt CSS: 8.84px */
  text-transform: uppercase;
}

.overlay, #navigation li { /* Rollover de imagenes */
  font-family: Verdana, Sans-serif;
  font-size: 0.60em; /* PSD: 8pt; CSS: 8.16px */
  text-transform: uppercase;
  line-height: 0.9em;
  color: #fff;
}

#client-list {
  color: #655c53;
}

#content .vcard { /* just for contact form */
  font-size: 1.36em;
}

#content form label {
  font-family: Verdana, Sans-serif;
  font-size: 0.65em; /* PSD: 8pt CSS: 8.84px */
  text-transform: uppercase;
  color: #655c53;
}

#content form input, #content form textarea {
  font-family: Verdana, Sans-serif;
  font-size: 0.81em; /* 11px */
}

#footer {  /* Copyright */
  font-style: italic;
}

/* ======================== HEADER AND FOOTER ======================== */

#header {
  position: relative;
  padding: 18px 22px 0 0;
  margin-left: 34px;
}

#language {
  position: absolute;
  top: 50px;
  left: 450px;
}

#language li {
  float: left;
  line-height: 0.75em;
  border-left: 1px solid #988f87;
  padding-left: 6px;
  margin-left: 6px;
}

#language li.first {
  border: 0;
  padding: 0;
  margin: 0;
}

#main-nav {
  background: url(/images/ui/bg-top.png) center top no-repeat;
  position: absolute; /* para alinear absolute a contact y subnav */
  top: 63px;
  left: 0px;
  width: 592px;
  height: 58px;
  padding: 28px 34px 0 30px;
  min-height: 58px;
  height: auto !important;
  height: 58px;
}

#main-nav .contact {
  position: absolute;
  top: 31px;
  left: 478px;
}

#main-nav li {
  float: left; /* para que los items se alineen horizontalmente */
  line-height: 1em;
  padding: 4px 6px 4px 6px;
}

#top > li.first {
  padding-left: 4px;
}

#main-nav .subnav {
  /* ubica los UL de subnav como absolute #main-nav y los esconde */
  position: absolute;
  left: 30px;
  top: 52px;
  width: 588px;
  padding-bottom: 4px;
  display: none;
  background: #fff;
}

#main-nav .subnav li {
  background: url(/images/ui/nav-pipe.gif) left center no-repeat;
}

#main-nav .subnav li.first {
  background: none;
}

#main-nav li.selected ul {
  display: block;
}

#main-nav .subnav a {
  display: block; /* para que el padding funcione en IE6 y 7 */
}

#top li:hover ul, #top li.over ul {  /* muestra la subnav en rollover */
  /* la 2da instrucción es para IE 5-6 y funciona con un javascript */
  display: block;
  z-index: 1; /* evita que la subnav elegida oculte las over */
}

#footer {
  clear: both;
  position: relative;
  top: 86px;
  background: url(/images/ui/bg-bot.png) center bottom no-repeat;
  padding: 0 34px 53px 34px;
  min-height: 18px;
  height: auto !important;
  height: 18px;
}

.projects_index #footer, .posts_index #footer, .case_studies_index #footer {
  background: url(/images/ui/bg-bot-beige.png) center bottom no-repeat;
}

#footer dt, #footer .adr, #footer .website {
  display: none;
}

#footer .legal {
  float: left;
}

#footer dd, #footer .credits {
  float: left;
  line-height: 0.85em;
  border-left: 1px solid #b7b1a9;
  padding-left: 6px;
  margin-left: 6px;
}

#footer dd.first {
  border: 0;
  padding: 0;
  margin: 0;
}

/* ======================== CONTENT ======================== */

#content {
  position: relative;
  top: 86px;
  background: url(/images/ui/bg-mid.png) center top;
  padding: 318px 107px 18px 34px;
  min-height: 318px; /* las 3 líneas son porque IE6 no soporta min-height */
  height: auto !important;
  height: 318px;
}

.customers_index #content, .pages_credits #content, .pages_philosophy #content, .messages_new #content {
  padding: 318px 52px 18px 34px;
}

.projects_index #content, .posts_index #content, .case_studies_index #content {
  background: url(/images/ui/bg-mid-beige.png) center top;
  padding: 12px 52px 18px 184px;
  min-height: 624px;
  height: auto !important;
  height: 624px;
}

.posts_show #content {
  padding: 0 52px 18px 184px;
  min-height: 624px;
  height: auto !important;
  height: 624px;
}

.error #content {
  padding: 0 52px 18px 34px;
  min-height: 624px;
  height: auto !important;
  height: 624px;
}

#content h1 {
  width: 434px; /* 458-12*2 */
  padding-bottom: 10px;
}

#content h1 span { /* hides commas, section name */
  display: none;
}

.projects_index #content h1, .posts_index #content h1, .case_studies_index #content h1 {
  color: #3d2e25;
  padding-bottom: 60px;
}

.case_studies_show #content h1 {
  color: #3d2e25;
  padding-bottom: 0;
}

#content h1 .type, #content h2 .type { /* Tipo de trabajo */
  display: inline;
  border-left: 1px solid #988f87;
  padding-left: 6px;
  margin-left: 4px;
}

#content .content-body strong {
  font-weight: bold;
}

#content .content-body em {
  font-style: italic;
}

.projects_index #content h2, .posts_index #content h2, .case_studies_index #content h2 {
  padding-bottom: 10px;
}

.case_studies_show #content .type { /* Tipo */
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  color: #655c53;
  padding-bottom: 10px;
}

.case_studies_show #content h3 { /* Subtítulos */
  font-style: italic;
  color: #3d2e25;
}

.error #content h3 {
  padding-top: 18px;
}

.error #content h3.first {
  padding-top: 0;
}

.overlay {
  position: absolute;
  display: none;
  background:url(/images/ui/overlay.png);
  bottom: 0;
  left: 0;
  width: 150px;
  height: 16px;
}

.overlay .info {
  position: absolute;
  display: block;
  bottom: 4px;
  left: 6px;
  white-space: nowrap;
}

.overlay .job {
  border-left: 1px solid #fff;
  padding-left: 6px;
  margin-left: 6px;
}

#home-nav a, a:hover .overlay {
  display: block;
}

.related-links {
  clear: both;
  padding-top: 18px;
  height: 14px;
}

.related-links li {
  float: left;
  line-height: 1em;
  border-left: 1px solid #8e941a;
  padding-left: 6px;
  margin-left: 6px;
}

.related-links li.first {
  border: 0;
  padding: 0;
  margin: 0;
}

.awards {
  clear: both;
  padding-top: 21px;
  background: url(/images/ui/award.gif) no-repeat 0 18px;
  height: 20px;
}

.awards li {
  float: left;
  line-height: 1em;
  border-left: 1px solid #988f87;
  padding-left: 6px;
  margin-left: 6px;
}

.awards li.first {
  border: 0;
  padding-left: 24px;
  margin: 0;
}

.step-links {
  padding-top: 18px;
}

.step-links li {
  float: left;
  border-left: 1px solid #8e941a;
  padding: 0 6px;
}

.step-links li.first {
  border-left: 0;
  padding-left: 0;
}

/* ======================== HOME ======================== */

#home-nav, #section-image {
  position: absolute;
  top: 0;
  left: 22px;
  height: 296px;
  width: 612px;
}

#home-nav li {
  position: relative; /* para poder hacer absolute los overlay */
  float: left;
  height: 146px;
  margin-left: 4px;
}

#home-nav li.first {
  margin: 0 0 4px 0;
}

#home-nav li.image2 {
  margin: 0;
}

#home-nav .first .overlay {
  width: 612px;
}

/* ====================== NEWS, PROJECTS, CASE STUDIES ==================== */

#local-nav {
  position: absolute;
  top: 36px;
  height: 1em; /* sin esto no alinea bien la subnav en IE6 */
}

#local-nav a {
  display: block;
  padding: 4px;
}

#local-nav li.first > a {
  padding-left: 0;
}

#local-nav li {
  float: left;
  line-height: 1em;
  background: url(/images/ui/nav-pipe.gif) left center no-repeat;
  padding-left: 2px;
  margin-left: 2px;
}

#local-nav li.first {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}

#local-nav .subnav {
  position: absolute;
  left: 0;
  top: 18px;
  width: 438px;
  padding-bottom: 4px;
  display: none;
  background: #f2f2ef;
}

#local-nav li.selected ul {
  display: block;
}

#local-nav li:hover ul, #local-nav li.over ul {
  display: block;
}

ul#list li {
  clear: both;
  position: relative;
  padding-bottom: 24px;
  min-height: 146px; /* las 3 líneas son porque IE6 no soporta min-height */
  height: auto !important;
  height: 146px;
}

ul#list img {
  position: absolute;
  top: 0;
  left: -162px;
}

.posts_show #content img { /* por si se usa la vista de la noticia */
  position: absolute;
  top: 34px;
  left: 22px;
}

.more {
  font-style: italic;
  border-left: 1px solid #8e941a;
  padding-left: 6px;
  margin-left: 6px;
}

/* ======================== IMAGE NAVIGATION ======================== */

#navigation_wrapper {
  position: absolute;
  top: 0;
  left: 22px;
}

#navigation_wrapper {
  height: 296px;
  width: 612px;
  overflow: hidden;
}

#navigation {
  display: block;
  position: relative;
  width: 5000px;
  margin: 0;
  padding: 0;
}

#navigation li {
  display: block;
  position: relative;
  float: left;
  margin-left: 4px;
}

#navigation li.first {
  margin-left: 0;
}

#navigation li a, #navigation li a img {
  display: block;
}

#navigation li a.previous, #navigation li a.this, #navigation li a.backtrack {
  position: absolute;
  width: 150px;
  height: 296px;
  top: 0;
  z-index: 1;
  background: url(/images/ui/overlay.png) repeat;
  opacity: 0;
  color: #fff;
}

#navigation li a.previous, #navigation li a.this {
  left: 0;
}

#navigation li a.backtrack {
  right: 0;
}

#navigation li a.previous:hover, #navigation li a.this:hover, #navigation li a.backtrack:hover {
  opacity: 1;
  color: #fff;
}

#navigation li a.previous:active, #navigation li a.this:active, #navigation li a.backtrack:active {
  opacity: 0.75;
  color: #fff;
}

#navigation li a.previous span, #navigation li a.this span, #navigation li a.backtrack span {
  display: block;
  position: absolute;
  bottom: 4px;
  left: 6px;
}

#navigation li a.previous:hover span, #navigation li a.this:hover span, #navigation li a.backtrack:hover span,
#navigation li a.previous:active span, #navigation li a.this:active span, #navigation li a.backtrack:active span {
  opacity: 1;
}

#remote {
  position: absolute;
  top: 322px;
  left: 484px;
  width: 140px;
  height: 11px;
}

#remote p {
  float: left;
  width: 11px;
  height: 11px;
  margin-left: 2px;
  background: url(/images/ui/nav-circ.gif) no-repeat 0 -40px;
  text-indent: -5000px;
}

#remote p.first {
  margin-left: 0;
}

#remote p a {
  display: block;
  width: 11px;
  height: 11px;
  background: url(/images/ui/nav-circ.gif) no-repeat 0 -40px;
}

#remote p a:hover {
  background-position: 0 -20px;
  border-bottom: 0;
}

#remote p a:active {
  background-position: 0 -60px;
  border-bottom: 0;
}

#remote p a.selected, #remote p a.selected:hover, #remote p a.selected:active {
  background-position: 0 0px;
  cursor: default;
}

/* ======================== CLIENTS ======================== */

#client-list {
  position: relative;
  left: -12px;
}

#client-list li {
  float: left;
  background: url(/images/ui/nav-pipe.gif) left center no-repeat;
  padding-left: 6px;
  margin-left: 6px;
  white-space: nowrap;
}

#client-list li.first, #client-list li.left {
  background: none;
}

.footnote {
  clear: both;
  padding-top: 18px;
}

/* ======================== PHILOSOPHY ======================== */

#section-image li {
  float: left;
  height: 296px;
}

#section-image li.image1 {
  padding-right: 4px;
}

/* ======================== CONTACT ======================== */

.messages_new #content h1, .messages_create #content h1 {
  display: none;
}

#content .vcard dt, #content .vcard .org, #content .vcard .website, #content .vcard .locality span {
  display: none;
}

#content .vcard .postal-code {
  text-transform: lowercase;
}

#content .vcard dd {
  width: 290px; /* sin esto hace scroll horizontal */
}

#content .vcard .tel, #content .vcard .email {
  position: relative;
  top: -2.92em; /* (18px line height x 3) / 18.5px font-size */
  left: 296px; /* 304px imagen + 4px calle - 12px margen */
}

#content form {
  position: relative;
}

#content form .name-input {
  width: 146px;
}

#content form .email-input {
  position: absolute;
  top: 0;
  left: 148px;
}

#content form label {
  display: block;
}

#content form .name-input input, #content form .email-input input {
  border: 1px solid #988f87;
  padding: 2px;
  width: 136px;
}

#content form textarea {
  border: 1px solid #988f87;
  padding: 2px;
  width: 560px;
}

#content form .message-input {
  padding-top: 8px;
}

#content form .submit-btn input {
  font-family: Georgia, Sans-serif;
  font-size: 1.36em;
  color: #8e941a;
  cursor: pointer;
  background: 0;
  border: 0;
  border-bottom: 1px solid #fff;
  margin: 0;
  padding: 6px 0 0 0;
}

#content form .submit-btn input:hover {
  border-bottom: 1px dotted #8e941a;
}

#content form .warning {
  font-size: 1.36em;
  padding-left: 12px;
}

#content form .warning strong {
  color: #655c53;
}