Guild Wars 2 Wiki:Projects/CSS documentation/template navs- monobook

/** NAVS **/
div.nav {
    position: relative;
}

div.nav .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.nav .box {
    width: 42em;
}

div.nav.thin .box {
    width: 34em;
}

div.nav.wide .box {
    width: 50em;
}

div.nav.full .box {
    width: unset;
}

div.nav .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: 0.52;
    font-weight: 700;
    line-height: 100%;
    text-align: center;
    margin: -1px -1px 0px;
    padding: 0.769em 0;
    position: relative;
    z-index: 1;
}

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

div.nav .box::after,
div.nav .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.nav .box::after,
div.nav .heading::after {
    bottom: -3px;
}

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

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

div.nav 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.nav dd {
    float: left;
    text-align: left;
    border-left: 2px solid #888;
    margin: 0;
    padding: 2px 0px 2px 8px;
    width: 67%;
}

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

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

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

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

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

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

div.nav.guardian .heading {
    background-color: #39C;
}

div.nav.guardian dd,
div.nav.guardian dt,
div.nav.guardian table th,
div.nav table tr.guardian th {
    border-color: #39C;
}

div.nav.revenant .heading {
    background-color: #C23F3A;
}

div.nav.revenant dd,
div.nav.revenant dt,
div.nav.revenant table th,
div.nav table tr.revenant th {
    border-color: #C23F3A;
}

div.nav.warrior .heading {
    background-color: #F93;
}

div.nav.warrior dd,
div.nav.warrior dt,
div.nav.warrior table th,
div.nav table tr.warrior th {
    border-color: #F93;
}

div.nav.engineer .heading {
    background-color: #963;
}

div.nav.engineer dd,
div.nav.engineer dt,
div.nav.engineer table th,
div.nav table tr.engineer th {
    border-color: #963;
}

div.nav.ranger .heading {
    background-color: #6C3;
}

div.nav.ranger dd,
div.nav.ranger dt,
div.nav.ranger table th,
div.nav table tr.ranger th {
    border-color: #6C3;
}

div.nav.thief .heading {
    background-color: #C66;
}

div.nav.thief dd,
div.nav.thief dt,
div.nav.thief table th,
div.nav table tr.thief th {
    border-color: #C66;
}

div.nav.elementalist .heading {
    background-color: #EC5752;
}

div.nav.elementalist dd,
div.nav.elementalist dt,
div.nav.elementalist table th,
div.nav table tr.elementalist th {
    border-color: #EC5752;
}

div.nav.mesmer .heading {
    background-color: #939;
}

div.nav.mesmer dd,
div.nav.mesmer dt,
div.nav.mesmer table th,
div.nav table tr.mesmer th {
    border-color: #939;
}

div.nav.necromancer .heading {
    background-color: #396;
}

div.nav.necromancer dd,
div.nav.necromancer dt,
div.nav.necromancer table th,
div.nav table tr.necromancer th {
    border-color: #396;
}

div.nav.asura .heading {
    background-color: #96F;
}

div.nav.asura dd,
div.nav.asura dt,
div.nav.asura table th,
div.nav table tr.asura th {
    border-color: #96F;
}

div.nav.charr .heading {
    background-color: #D25D6B;
}

div.nav.charr dd,
div.nav.charr dt,
div.nav.charr table th,
div.nav table tr.charr th {
    border-color: #D25D6B;
}

div.nav.human .heading {
    background-color: #FC3;
}

div.nav.human dd,
div.nav.human dt,
div.nav.human table th,
div.nav table tr.human th {
    border-color: #FC3;
}

div.nav.norn .heading {
    background-color: #6CF;
}

div.nav.norn dd,
div.nav.norn dt,
div.nav.norn table th,
div.nav table tr.norn th {
    border-color: #6CF;
}

div.nav.sylvari .heading {
    background-color: #3C3;
}

div.nav.sylvari dd,
div.nav.sylvari dt,
div.nav.sylvari table th,
div.nav table tr.sylvari th {
    border-color: #3C3;
}

div.nav.npc .heading {
    background-color: #6C3;
}

div.nav.npc dd,
div.nav.npc dt,
div.nav.npc table th,
div.nav table tr.npc th {
    border-color: #6C3;
}

div.nav.pve .heading {
    background-color: #FC6;
}

div.nav.pve dd,
div.nav.pve dt,
div.nav.pve table th,
div.nav table tr.pve th {
    border-color: #FC6;
}

div.nav.equip .heading {
    background-color: #F96;
}

div.nav.equip dd,
div.nav.equip dt,
div.nav.equip table th,
div.nav table tr.equip th {
    border-color: #F96;
}

div.nav.mech1 .heading {
    background-color: #69C;
}

div.nav.mech1 dd,
div.nav.mech1 dt,
div.nav.mech1 table th,
div.nav table tr.mech1 th {
    border-color: #69C;
}

div.nav.mech2 .heading {
    background-color: #3CC;
}

div.nav.mech2 dd,
div.nav.mech2 dt,
div.nav.mech2 table th,
div.nav table tr.mech2 th {
    border-color: #3CC;
}

div.nav.location .heading {
    background-color: #96C;
}

div.nav.location dd,
div.nav.location dt,
div.nav.location table th,
div.nav table tr.location th {
    border-color: #96C;
}

div.nav.lore .heading {
    background-color: #C6C;
}

div.nav.lore dd,
div.nav.lore dt,
div.nav.lore table th,
div.nav table tr.lore th {
    border-color: #C6C;
}

div.nav.promo .heading {
    background-color: #9C3;
}

div.nav.promo dd,
div.nav.promo dt,
div.nav.promo table th,
div.nav table tr.promo th {
    border-color: #9C3;
}

div.nav.quest .heading {
    background-color: #F8B57D;
}

div.nav.quest dd,
div.nav.quest dt,
div.nav.quest table th,
div.nav table tr.quest th {
    border-color: #F8B57D;
}

div.nav.crafting .heading,
div.nav.recipe .heading {
    background-color: #963;
}

div.nav.crafting dd,
div.nav.crafting dt,
div.nav.crafting table th,
div.nav table tr.crafting th,
div.nav.recipe dd,
div.nav.recipe dt,
div.nav.recipe table th,
div.nav table tr.recipe th {
    border-color: #963;
}

/* Subheadings */
div.nav .subheading {
    background-color: #CCC;
    border-color: #AAA;
}

/* Subheadings - professions */
div.nav .subheading.guardian {
    background-color: #B9E0EC;
    border-color: #94B3BD;
}

div.nav .subheading.revenant {
    background-color: #E3B4AA;
    border-color: #BFA8A0;
}

div.nav .subheading.warrior {
    background-color: #FFE8B3;
    border-color: #CCBA8F;
}

div.nav .subheading.engineer {
    background-color: #E8BC84;
    border-color: #BA966A;
}

div.nav .subheading.ranger {
    background-color: #C7EFA2;
    border-color: #9FBF82;
}

div.nav .subheading.thief {
    background-color: #DEC6C9;
    border-color: #B29EA1;
}

div.nav .subheading.elementalist {
    background-color: #FBC5C3;
    border-color: #C99E9C;
}

div.nav .subheading.mesmer {
    background-color: #DBBCEA;
    border-color: #AF96BB;
}

div.nav .subheading.necromancer {
    background-color: #A9D3B7;
    border-color: #87A992;
}

/* Subheadings - races */
div.nav .subheading.asura {
    background-color: #D1BDF8;
    border-color: #A797C6;
}

div.nav .subheading.charr {
    background-color: #FFBCC3;
    border-color: #CC969C;
}

div.nav .subheading.human {
    background-color: #FFF2B3;
    border-color: #CCC28F;
}

div.nav .subheading.norn {
    background-color: #BADDFF;
    border-color: #95B1CC;
}

div.nav .subheading.sylvari {
    background-color: #B0F3B2;
    border-color: #8DC28E;
}

/* Subheadings - types */
div.nav .subheading.npc {
    background-color: #B3E699;
    border-color: #8FB87A;
}

div.nav .subheading.pve {
    background-color: #FFE6B3;
    border-color: #CCB88F;
}

div.nav .subheading.equip {
    background-color: #FFCCB3;
    border-color: #CCA38F;
}

div.nav .subheading.skin {
    background-color: #FFD4DF;
    border-color: #B3A1A5;
}

div.nav .subheading.mech1 {
    background-color: #B3CCE6;
    border-color: #8FA3B8;
}

div.nav .subheading.mech2 {
    background-color: #99E6E6;
    border-color: #7AB8B8;
}

div.nav .subheading.lore {
    background-color: #E6B3E6;
    border-color: #B88FB8;
}

div.nav .subheading.location {
    background-color: #CCB3E6;
    border-color: #A38FB8;
}

div.nav .subheading.promo {
    background-color: #CCE699;
    border-color: #A3B87A;
}

div.nav .subheading.crafting,
div.nav .subheading.recipe {
    background-color: #E6CCB3;
    border-color: #B8A38F;
}

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