/* La Tienda ARPM, 2001. Verdana/Geneva en 10-11 px, líneas grises de 1 px, columna de promociones crema. */
body { margin: 10px 0 20px; background: #fff; color: #000; font-family: Verdana, Geneva, Arial, sans-serif; font-size: 11px; }
td { font-family: Verdana, Geneva, Arial, sans-serif; font-size: 11px; }
img { border: 0; }
a { color: #33c; }
a:focus, input:focus, select:focus { outline: 2px solid #5a64a0; outline-offset: 1px; }

.barra { background: url(../assets/barra.gif) no-repeat; height: 26px; }
.barra td { text-align: center; height: 24px; }
.barra a { color: #fff; font-weight: bold; text-decoration: none; font-size: 11px; }
.barra a:hover { text-decoration: underline; }
.barra .sep { width: 2px; background: url(../assets/barra_sep.gif) no-repeat center 1px; }

.d { font-size: 10px; line-height: 12px; }
.chica { font-size: 9px; color: #666; }
.celda { padding: 10px 14px 12px 26px; }
.der { border-right: 1px solid #999; }
.abajo { border-bottom: 1px solid #999; }
.cat { padding: 14px 10px 6px; }
.cat select { font-size: 11px; width: 150px; }
.pie a { font-size: 12px; font-weight: bold; color: #66c; }
.legal { font-size: 9px; color: #666; line-height: 13px; }

.promo { background: #fffbda; border-radius: 10px 10px 0 0; border-bottom: 1px solid #c8c0a0; padding: 6px 7px 7px; margin: 0 0 4px; }
.promo .d { margin: 3px 0; }
.promo .mas { text-align: right; font-size: 10px; }
.promo .mas a { color: #000; text-decoration: none; }

.lado { background: #eee; }
.lado .tit { background: #999; color: #fff; font-weight: bold; padding: 3px 6px; }
.lado .tit.azul { background: #5a64a0; }
.lado ul { margin: 6px 0 10px; padding: 0 0 0 18px; }
.lado li { margin: 3px 0; }
.lado .caja { padding: 6px; }

.migas { font-size: 10px; color: #666; padding: 2px 0 8px; }
.lista td { border-bottom: 1px solid #ccc; padding: 8px 6px; vertical-align: top; }
.lista th, .pedido th, .config th { background: #ccc; font-size: 10px; text-align: left; padding: 3px 6px; }
.pedido td { border-bottom: 1px solid #ccc; padding: 6px; }
.config { border: 1px solid #ccc; }
.config td { padding: 5px 8px; }
.aviso { background: #fffbda; border: 1px solid #c8c0a0; padding: 8px; margin: 10px 0; }
.movil { display: none; }

@media (max-width: 760px) {
  body { margin: 6px 0 16px; }
  table.pagina { width: 100% !important; }
  td.principal, td.lateral, td.lado, td.contenido { display: block; width: auto !important; }
  td.hueco { display: none; }
  .barra { background-size: 100% 26px; }
  .barra a { font-size: 10px; }
  .barra .oval { display: none; }
  table.grid, table.cats, table.ancho { width: 100% !important; }
  .celda { padding: 8px 6px 10px 8px; }
  .celda .foto { width: 120px; height: auto; }
  .cats td { display: block; width: auto !important; border: 0 !important; border-bottom: 1px solid #ccc !important; }
  td.lateral { padding: 12px 6px 0; }
  .promo { display: inline-block; vertical-align: top; width: calc(50% - 20px); margin: 0 2px 6px; }
  td.lado { display: none !important; }
  td.contenido { padding: 0 8px; }
  table.producto > tbody > tr > td { display: block; width: auto !important; padding: 0 !important; }
  table.producto img[name=foto] { width: 220px; height: auto; }
  .pedido td, .pedido th { padding: 4px 3px; font-size: 10px; }
  .logo { width: 300px; height: auto; }
}
@media (max-width: 760px) { .largo { display: none; } }