/**
 *  WICHTIG: Der Anfang ist von uns. Weiter unten von Lohmann. Wenn er mal eine neue Version
 *  schickt, dann ersetzen wir nur das untere.
 */

/**
 *  Unserer Code um einen scrollenden Container um die Tabelle zu basteln.
 *  Hintergrund: Die Tabelle hat als Breite 100%. D.h. die wird einfach kleiner und verursacht
 *               daher von sich aus kein Scrolling im außeren Container. Wir müssen ihr eine
 *               sinnvolle Mindestbreite geben. Ich nehme mal 800.
 */

div.periodensystem-container-overflows {
    overflow: auto; 
}

table.Periodensystem {
    min-width: 800px;
}


/*   AB HIER IST DER VOM LOHMANN GELIEFERTER CSS UNVERÄNDERT  */

/*---Tabelle---*/
table.Periodensystem {
    max-width: 1000px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/*---Tabelle---*/
table.Periodensystem table {
    border-collapse: collapse;
    border-spacing: 0;
    display: block;
    overflow-x: scroll;

}

/*---Zellen---*/
table.Periodensystem td, table.Periodensystem th {
    padding: .1em;
    min-width: 60px;
}

/*---Schrift---*/
table.Periodensystem td, table.Periodensystem th {
    font-size: 0.5em;
    text-align: center;
    vertical-align: middle;
    border-style: none;
    color: #333030;
}

/*---Elementsymbole/Kürzel---*/
table.Periodensystem span.Symbol {
    font-size: 1.75rem;
    font-weight: 600;
}

/*---Elemente Allgemein---*/
table.Periodensystem td.Element {
    background-color: #e9eff5;
    border-width: 0.1rem;
    border-color: white;
    border-style: solid;
}

table.Periodensystem td.Element a {
    display: block;
    text-decoration: none;
    color: #333030;
}

table.Periodensystem td.Element a:hover {
    color: #ffffff;
}

/*---Nummerierung---*/
table.Periodensystem td.Gruppe {
    vertical-align: bottom;
    padding: .1em .1em;
}

/*---Elemente rot---*/
table.Periodensystem td.Akalimetall {
    background-color: rgba(199, 45, 45, 0.7);
}

table.Periodensystem td.Akalimetall a:hover {
    background: rgba(199, 45, 45, 1);
}

/*---Elemente orange---*/
table.Periodensystem td.Erdakalimetall {
    background-color: rgba(235, 107, 28, 0.5);
}

table.Periodensystem td.Erdakalimetall a:hover {
    background: rgba(235, 107, 28, 1);
}

/*---Elemente gelb---*/
table.Periodensystem td.Uebergangsmetall {
    background-color: rgba(240, 208, 24, 0.5);
}

table.Periodensystem td.Uebergangsmetall a:hover {
    /*background:rgba(199,192,45,1);*/
    background-color: rgba(240, 208, 24, 0.8);
}

/*---Elemente rosa---*/
table.Periodensystem td.Lanthanoid {
    background-color: rgba(199, 45, 105, 0.5);
}

table.Periodensystem td.Lanthanoid a:hover {
    background: rgba(199, 45, 105, 0.7);
}

/*---Elemente lila---*/
table.Periodensystem td.Actinoid {
    background-color: rgba(148, 45, 199, 0.5);
}

table.Periodensystem td.Actinoid a:hover {
    background: rgba(148, 45, 199, 0.7);
}

/*---Elemente grĂĽn---*/
table.Periodensystem td.Metall {
    background-color: rgba(52, 161, 42, 0.6);
}

table.Periodensystem td.Metall a:hover {
    background: rgba(52, 161, 42, 1);
}

/*---Elemente tĂĽrkis---*/
table.Periodensystem td.Halbmetall {
    background-color: rgba(45, 199, 127, 0.5);
}

table.Periodensystem td.Halbmetall a:hover {
    background: rgba(45, 199, 127, 0.9);
}

/*---Elemente helblau---*/
table.Periodensystem td.Nichtmetall {
    background-color: rgba(45, 146, 199, 0.6);
}

table.Periodensystem td.Nichtmetall a:hover {
    background: rgba(45, 146, 199, 1);
}

/*---Elemente dunkelblau---*/
table.Periodensystem td.Halogen {
    background-color: rgba(45, 71, 199, 0.5);
}

table.Periodensystem td.Halogen a:hover {
    background: rgba(45, 71, 199, 1);
}

/*---Elemente dunkelgrau---*/
table.Periodensystem td.Edelgas {
    background-color: rgba(119, 119, 119, 0.6);
}

table.Periodensystem td.Edelgas a:hover {
    background: rgba(119, 119, 119, 1);
}

/*---Elemente hellgrau---*/
table.Periodensystem td.Unbekannt {
    background-color: rgba(187, 187, 187, 0.5);
}

table.Periodensystem td.Unbekannt a:hover {
    background: rgba(187, 187, 187, 1);
}