GW2Wiki:Proyectos/CSS/template navs- common

div.navegacion {
  position:relative;
}

div.navegacion .box {
  background-image: linear-gradient(135deg,#fff 0%,#eee 100%);
  border: 1px solid #AAA;
  border-spacing: 0;
  font-size: 0.9230769231em;
  min-height: 60px;
  position: relative;
  margin: auto;
}

div.navegacion      .box { width:42em; }
div.navegacion.thin .box { width:34em; }
div.navegacion.wide .box { width:50em; }
div.navegacion.full .box { width:unset; }

div.navegacion .heading {
  background-color:#888;
  background-image:url(/images/c/cc/Infobox_header_overlay.png) !important;
  border:1px solid rgba(0,0,0,0.25);
  border-bottom-width:0;
  font-family:Arial, sans-serif!important;
  font-size:1.083em;
  font-size-adjust:.52;
  font-weight:700;
  line-height:100%;
  text-align:center;
  margin:-1px -1px 0px;
  padding:.769em 0;
  position:relative;
  z-index:1;
}

div.navegacion .clear {
  height:0.667em;
}

div.navegacion .box::after,
div.navegacion .heading::after {
  content:"";
  position:absolute;
  width:100%;
  left:0;
  height:3px;
  background-image:url(/images/4/45/Shadow_after.png);
  background-size:100% 3px;
}

div.navegacion .box::after,
div.navegacion .heading::after {
  bottom:-3px;
}

div.navegacion .wrapper {
  padding: 0px 8px;
}

div.navegacion dl,
div.navegacion .wrapper.hlist > ul {
  margin:0.667em 0em;
}

div.navegacion dt {
  float:left;
  text-align:right;
  clear:left;
  border-right:2px solid #999;
  margin:0 -2px 0 0;
  padding:2px 8px 2px 0px;
  width:25%;
}

div.navegacion dd {
  float:left;
  text-align:left;
  border-left:2px solid #888;
  border-radius:4px 4px 0px 0px;
  margin:0;
  padding:2px 0px 2px 8px;
  width:67%;
}

div.navegacion dt, div.navegacion dd {
  line-height:1.667em;
}

div.navegacion table {
  line-height:1.667em;
  background-color:transparent;
  border-collapse:collapse;
  width:100%;
  margin:0.667em 0;
}

div.navegacion table th {
  text-align:right;
  border-right:2px solid #888;
  vertical-align:top;
  padding:2px 8px;
}

div.navegacion table td {
  padding:2px 8px;
}

.navegacion .wrapper p {
  margin-top:0.667em;
  margin-bottom:0.667em;
}

div.navegacion .selflink {
  font-weight:bold;
}

div.navegacion.guardián .heading { background-color:#39C; }
div.navegacion.guardián dd,
div.navegacion.guardián dt,
div.navegacion.guardián table th { border-color:#39C; }

div.navegacion.retornado .heading { background-color:#C23F3A; }
div.navegacion.retornado dd,
div.navegacion.retornado dt,
div.navegacion.retornado table th { border-color:#C23F3A; }

div.navegacion.guerrero .heading { background-color:#F93; }
div.navegacion.guerrero dd,
div.navegacion.guerrero dt,
div.navegacion.guerrero table th { border-color:#F93; }

div.navegacion.ingeniero .heading { background-color:#963; }
div.navegacion.ingeniero dd,
div.navegacion.ingeniero dt,
div.navegacion.ingeniero table th { border-color:#963; }

div.navegacion.guardabosques .heading { background-color:#6C3; }
div.navegacion.guardabosques dd,
div.navegacion.guardabosques dt,
div.navegacion.guardabosques table th { border-color:#6C3; }

div.navegacion.ladrón .heading { background-color:#C66; }
div.navegacion.ladrón dd,
div.navegacion.ladrón dt,
div.navegacion.ladrón table th { border-color:#C66; }

div.navegacion.elementalista .heading { background-color:#EC5752; }
div.navegacion.elementalista dd,
div.navegacion.elementalista dt,
div.navegacion.elementalista table th { border-color:#EC5752; }

div.navegacion.hipnotizador .heading { background-color:#939; }
div.navegacion.hipnotizador dd,
div.navegacion.hipnotizador dt,
div.navegacion.hipnotizador table th { border-color:#939; }

div.navegacion.nigromante .heading { background-color:#396; }
div.navegacion.nigromante dd,
div.navegacion.nigromante dt,
div.navegacion.nigromante table th { border-color:#396; }

div.navegacion.asura .heading { background-color:#96F; }
div.navegacion.asura dd,
div.navegacion.asura dt,
div.navegacion.asura table th { border-color:#96F; }

div.navegacion.charr .heading { background-color:#D25D6B; }
div.navegacion.charr dd,
div.navegacion.charr dt,
div.navegacion.charr table th { border-color:#D25D6B; }

div.navegacion.humano .heading { background-color:#FC3; }
div.navegacion.humano dd,
div.navegacion.humano dt,
div.navegacion.humano table th { border-color:#FC3; }

div.navegacion.norn .heading { background-color:#6CF; }
div.navegacion.norn dd,
div.navegacion.norn dt,
div.navegacion.norn table th { border-color:#6CF; }

div.navegacion.sylvari .heading { background-color:#3C3; }
div.navegacion.sylvari dd,
div.navegacion.sylvari dt,
div.navegacion.sylvari table th { border-color:#3C3; }

div.navegacion.pnj .heading { background-color:#6C3; }
div.navegacion.pnj dd,
div.navegacion.pnj dt,
div.navegacion.pnj table th { border-color:#6C3; }

div.navegacion.jce .heading { background-color:#FC6; }
div.navegacion.jce dd,
div.navegacion.jce dt,
div.navegacion.jce table th { border-color:#FC6; }

div.navegacion.equip .heading { background-color:#F96; }
div.navegacion.equip dd,
div.navegacion.equip dt,
div.navegacion.equip table th { border-color:#F96; }

div.navegacion.mech1 .heading { background-color:#69C; }
div.navegacion.mech1 dd,
div.navegacion.mech1 dt,
div.navegacion.mech1 table th { border-color:#69C; }

div.navegacion.mech2 .heading { background-color:#3CC; }
div.navegacion.mech2 dd,
div.navegacion.mech2 dt,
div.navegacion.mech2 table th { border-color:#3CC; }

div.navegacion.localización .heading { background-color:#96C; }
div.navegacion.localización dd,
div.navegacion.localización dt,
div.navegacion.localización table th { border-color:#96C; }

div.navegacion.popular .heading { background-color:#C6C; }
div.navegacion.popular dd,
div.navegacion.popular dt,
div.navegacion.popular table th { border-color:#C6C; }

div.navegacion.promo .heading { background-color:#9C3; }
div.navegacion.promo dd,
div.navegacion.promo dt,
div.navegacion.promo table th { border-color:#9C3; }

div.navegacion.quest .heading { background-color:#F8B57D; }
div.navegacion.quest dd,
div.navegacion.quest dt,
div.navegacion.quest table th { border-color:#F8B57D; }

div.navegacion.condición .heading { background-color:#51A651; }
div.navegacion.condición dd,
div.navegacion.condición dt,
div.navegacion.condición table th { border-color:#51A651; }

div.navegacion.hom .heading,
div.navegacion.artesanía .heading,
div.navegacion.receta .heading { background-color:#963; }
div.navegacion.hom dd,
div.navegacion.hom dt,
div.navegacion.hom table th,
div.navegacion.artesanía dd,
div.navegacion.artesanía dt,
div.navegacion.artesanía table th,
div.navegacion.receta dd,
div.navegacion.receta dt,
div.navegacion.receta table th { border-color:#963; }

/* Hide and reduce margins of horizontal rules between multiple navs */
.navegacion ~ hr {
  background-color:transparent;
  margin:0.5em 0 !important;
}