.cms-block-onlinepse {
    line-height: 1;
    vertical-align: baseline;

    ol, ul {
        list-style: none;
    }

    blockquote, q {
        quotes: none;
    }

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    @font-face {
        font-family: "FreeUniversal";
        src: url("/bundles/blmediablumepse/administration/static/online-periodensystem-files/media/PeriodicTable/fonts/FreeUniversal-Regular.woff");
    }

    @font-face {
        font-family: "FreeUniversal";
        src: url("/bundles/blmediablumepse/administration/static/online-periodensystem-files/media/PeriodicTable/fonts/FreeUniversal-Bold.woff");
        font-weight: bold;
    }

    @font-face {
        font-family: "FreeUniversal";
        src: url("/bundles/blmediablumepse/administration/static/online-periodensystem-files/media/PeriodicTable/fonts/FreeUniversal-Italic.woff");
        font-style: italic, oblique;
    }

    @font-face {
        font-family: "FreeUniversal";
        src: url("/bundles/blmediablumepse/administration/static/online-periodensystem-files/media/PeriodicTable/fonts/FreeUniversal-BoldItalic.woff");
        font-weight: bold;
        font-style: italic, oblique;
    }

    .language_button {
        cursor: pointer;
        width: 2.0em;
        height: 2.0em;
        background-size: 100%;
    }

    #tooltip {
        max-width: 20em;
        max-height: 8em;
        display: none;
        border: 0.3em solid gray;
        border-radius: 0.5em;
        padding: 0.2em;
        text-align: left;
        opacity: 1.0;
        background-color: white;
        z-index: 100;
        position: fixed;
    }

    .elements {
        border: 0;
        width: 0;
        border-collapse: collapse;
        clear: left;
        position: relative;
    }

    .elements tr:nth-child(2) td:nth-child(11) {
        padding-right: 15px;
    }

    .element {
    }

    .group_new {
        background-color: #008968;
        text-align: center;
        font-size: 0.8em;
        border: 1px solid black;
        margin-right: -1px;
        margin-bottom: -1px;
        padding-right: -2px;
        padding-bottom: -2px;
        line-height: 1.1;
    }

    .group_old {
        background-color: #AAD1AC;
        text-align: center;
        font-size: 0.8em;
        border: 1px solid black;
        margin-right: -1px;
        margin-bottom: -1px;
        padding-right: -2px;
        padding-bottom: -2px;
        line-height: 1.1;
    }

    .period_number {
        vertical-align: middle;
        width: 1em;
        margin-left: -1em;
        text-align: center;
        margin-bottom: 14px;
    }

    .value {
        cursor: pointer;
    }


    .space {
        width: 0.5em;
    }


    .pse_icon, .pse_pse_icon {
        cursor: pointer;
        width: 3em;
        height: 3.5em;
        font-size: 1em;
        border: 1px solid #000;
        padding: .2em;
        margin-right: -1px;
        margin-bottom: -1px;
        text-align: right;
        opacity: .8
    }

    .pse_icon:hover, .pse_pse_icon:hover {
        opacity: 1.0;
    }

    .radioactive {
        background-image: url("/bundles/blmediablumepse/administration/static/online-periodensystem-files/media/PeriodicTable/images/radioactive.png");
        background-repeat: no-repeat;
        background-size: 25%;
        background-position: 100% 100%;
        z-index: -1;
    }

    #source_info {
        width: 20em;
        height: 5em;
        display: none;
        max-width: 50%;
        max-height: 90%;
        border: 0.3em solid gray;
        border-radius: 0.5em;
        padding: 0.2em;
        text-align: left;
        opacity: 1.0;
        background-color: white;
        z-index: 100;
        position: fixed;
    }

    #source_info .authors {
        font-style: normal;
    }

    #source_info .title {
        font-style: normal;
        font-weight: bold;
    }

    #source_info .journal {
        font-style: italic;
    }

    #source_info .publisher {
        font-style: italic;
    }

    #info, #settings {
        width: 40em;
        height: 40em;
        max-width: 50%;
        max-height: 90%;
        border: 0.3em solid gray;
        border-top: 2em solid gray;
        border-radius: 0.5em;
        padding: 0.2em;
        text-align: left;
        opacity: 1.0;
        background-color: white;
        z-index: 100;
        position: fixed;
        box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 2px;
        overflow: auto;
    }

    #info h1, #settings h1 {
        font-size: 1.2em;
        margin-bottom: 0.8em;
        color: black;
    }

    #info .description {
        margin-bottom: 0.8em;
    }

    #info table {
        line-height: 1.5em;
        width: 100%;
        margin-bottom: 1em;
        border-top: 0.1em solid black;
        border-bottom: 0.1em solid black;
    }

    #info tr:nth-child(2n+1) {
        background-color: #eeeeee;
    }

    #info th {
        background-color: #dedede;
        font-size: 1.2em;
    }

    .info_exit_button, .settings_exit_button {
        background-image: url("/bundles/blmediablumepse/administration/static/online-periodensystem-files/media/PeriodicTable/images/close.png");
        background-repeat: no-repeat;
        background-size: 100%;
        float: right;
        width: 1.5em;
        height: 1.5em;
        position: relative;
        margin-right: 0.8em;
        margin-top: 0.3em;
        z-index: 200;
    }

    .atomic_mass {
        text-align: left;
        font-size: 0.8em;
        line-height: 0.85em;
    }

    .symbol {
        font-size: 1.2em;
        line-height: 1.65em;
        padding: 0 0.125em;
    }

    .atomic_number {
        text-align: left;
        vertical-align: bottom;
        font-size: 0.8em;
        line-height: 3px;
        z-index: 0;
    }

    .synthetic .symbol {
        color: red;
    }

    .solid .symbol {
        color: black;
    }

    .gas .symbol {
        color: green;
    }

    .solid.synthetic.radioactive .symbol {
        color: red;
    }

    .liquid .symbol {
        color: blue;
    }

    .unkown .symbol {
        color: gray;
    }

    .category_0 {
        background-color: #C8DDF0;
    }

    .category_1 {
        background-color: #C8DDF0;
    }

    .category_2 {
        background-color: #FFE27D;
    }

    .category_3 {
        background-color: #FCC976;
    }

    .category_4 {
        background-color: #FFF5D7;
    }

    .category_5 {
        background-color: #FFF5D7;
    }

    .category_6 {
        background-color: #FFF5D7;
    }

    .category_7 {
        background-color: #FFF5D7;
    }

    .category_8 {
        background-color: #C8DDF0;
    }

    .category_9 {
        background-color: #EBF1E2;
    }

    .category_10 {
        background-color: #FFE27D;
    }

    .category_11 {
        background-image: -webkit-linear-gradient(#C8DDF0 0%, #EBF1E2 100%);
        background-image: -moz-linear-gradient(#C8DDF0 0%, #EBF1E2 100%);
        background-image: -o-linear-gradient(#C8DDF0 0%, #EBF1E2 100%);
        background-image: linear-gradient(#C8DDF0 0%, #EBF1E2 100%);
    }

    .category_12 {
        background-image: -webkit-linear-gradient(#FFF5D7 0%, #EBF1E2 100%);
        background-image: -moz-linear-gradient(#FFF5D7 0%, #EBF1E2 100%);
        background-image: -o-linear-gradient(#FFF5D7 0%, #EBF1E2 100%);
        background-image: linear-gradient(#FFF5D7 0%, #EBF1E2 100%);
    }

    .category_13 {
        background-image: -webkit-linear-gradient(#FFE27D 0%, #EBF1E2 100%);
        background-image: -moz-linear-gradient(#FFE27D 0%, #EBF1E2 100%);
        background-image: -o-linear-gradient(#FFE27D 0%, #EBF1E2 100%);
        background-image: linear-gradient(#FFE27D 0%, #EBF1E2 100%);
    }

    sup {
        font-size: xx-small;
        vertical-align: super;
    }

    sub {
        font-size: xx-small;
        vertical-align: sub;
    }

    #container {
        display: none;
        position: relative;
        z-index: 0;
        float: left;
        background: rgba(255, 255, 255, 0.5);
        padding: 2em;
        padding-top: 0;
    }

    #info-container {
        display: none;
        position: fixed;
        width: 40em;
        max-width: 50%;
        z-index: 2;
    }

    body {
        background-repeat: repeat;
        background-size: 100%;
        font-family: "Helvetica", "FreeUniversal";
    }

    #container_normal_elements {
        position: relative;
    }

    #container_lanthanoids_actinoids {
        position: relative;
        margin-top: 1em;
        float: right;
        right: 61px;
    }

    #container_normal_elements td {
        vertical-align: bottom;
    }

    #container_lanthanoids_actinoids td {
        vertical-align: middle;
    }

    .lanact_header {
        color: red;
        text-align: right;
        font-size: 1.2em;
        margin-right: 1em;
    }

    .space {
        width: 1em;
    }

    h1 {
        font-size: 2em;
        line-height: 2.5em;
        text-align: center;
        color: red;
    }

    .on_off_switch {
        cursor: pointer;
        padding-left: 2.1em;
        font-size: 1.2em;
        line-height: 2em;
    }

    .on {
        background: url("/bundles/blmediablumepse/administration/static/online-periodensystem-files/media/PeriodicTable/images/switch-on.png") center left no-repeat;
        background-size: 1.5em;
    }

    .off {
        background: url("/bundles/blmediablumepse/administration/static/online-periodensystem-files/media/PeriodicTable/images/switch-off.png") center left no-repeat;
        background-size: 1.5em;
    }

    #controls {
        background: rgba(105, 105, 105, 0.5);
        border-radius: 0.5em;
        width: 100%;
    }

    #controls-table {
        margin: 0.4em;
        border-collapse: seperate;
    }

    #controls td {
        padding-right: 1.0em;
        vertical-align: middle;
    }

    #fullscreen_button {
        cursor: pointer;
        width: 2.0em;
        height: 2.0em;
        background: url("/bundles/blmediablumepse/administration/static/online-periodensystem-files/media/PeriodicTable/images/fullscreen.png") center no-repeat;
        background-size: 100%;
    }

    #zoom_in_button {
        cursor: pointer;
        width: 2.0em;
        height: 2.0em;
        background: url("/bundles/blmediablumepse/administration/static/online-periodensystem-files/media/PeriodicTable/images/zoom-in.png") center no-repeat;
        background-size: 100%;
    }

    #zoom_out_button {
        cursor: pointer;
        width: 2.0em;
        height: 2.0em;
        background: url("/bundles/blmediablumepse/administration/static/online-periodensystem-files/media/PeriodicTable/images/zoom-out.png") center no-repeat;
        background-size: 100%;
    }

    #settings_button {
        cursor: pointer;
        width: 2.0em;
        height: 2.0em;
        background: url("/bundles/blmediablumepse/administration/static/online-periodensystem-files/media/PeriodicTable/images/settings.png") center no-repeat;
        background-size: 100%;
    }

    #clear_cache_button {
        cursor: pointer;
        height: 2.0em;
        width: 2.0em;
        background: url("/bundles/blmediablumepse/administration/static/online-periodensystem-files/media/PeriodicTable/images/refresh.png") center left no-repeat;
        padding-left: 2em;
        background-size: 1.8em;
    }

    .legend_top {
        padding-bottom: 1.9em;
        text-align: right;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    .legend_bottom {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    .legend_middle {
        vertical-align: bottom;
        padding-bottom: 1.3em;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    table.legend {
        margin-left: auto;
        margin-right: auto;
    }

    .legend_box {
        padding-bottom: 2.4em;
        padding-top: 2.2em;
    }

    #wait_container {
        display: none;
    }

    #wait_box {
        background-color: #eeeeee;
        position: absolute;
        left: 25%;
        top: 25%;
        width: 50%;
        height: 50%;
        border: 0.3em solid gray;
        border-top: 2em solid gray;
        border-radius: 0.5em;
        padding: 0.2em;
        border-radius: 0.5em;
    }

    #wait_box h1 {
        font-size: 1.2em;
        margin-bottom: 0.8em;
        color: black;
    }

    #wait_animation {
        background: url("/bundles/blmediablumepse/administration/static/online-periodensystem-files/media/PeriodicTable/images/wait_animation.gif") center no-repeat;
        background-size: 100%;
        width: 2em;
        height: 2em;
        margin: auto;
    }
}