@charset "UTF-8";
body {overflow-y: scroll;}
body, html {
    background-color: #E4E4E4;
    color: #333;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}
#wrap_all {
    height: auto;
    margin: auto;
    width: 970px;
    padding-top: 5px;
}
header, section, aside, footer, #start, #start_k2, #startInfo, #startTut, #masse_k2 {
    background-color: #fff;
    border: 1px solid #8e8e8e;
}
header {
    margin-bottom: 3px;
}
 hr { height: 2px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.2); }
.left {
    float: left;
    margin-right: 10px;
    margin-bottom: 0;
    margin-top: 0;
}
.right {
    float: right;
    margin-left: 10px;
}
.bildunterschrift {font-size: .85rem;}
.brand {
    background: rgba(0, 0, 0, 0) url("../images/layout/uebersicht.png") no-repeat scroll 0 0;
    float: left;
    height: 47px;
    margin: 4px 10px;
    width: 76px;
}
.brand:hover {
    background: rgba(0, 0, 0, 0) url("../images/layout/uebersicht_active.png") no-repeat scroll 0 0;
}
.brand_theme {
    background: rgba(0, 0, 0, 0) url("../images/layout/logo_echembook.png") no-repeat scroll 0 0;
    float: left;
    height: 47px;
    margin: 4px 10px;
    width: 63px;
}
.breadcrumb {
    font-size: .9rem;
    margin-bottom: 5px;
    margin-top: 4px;
    font-weight: bold;
}
strong {color: #4f4f4f;}
h1 {
    font-size: 1rem;
    margin: 0;
}
#startInfo h1 {font-size: 2rem; margin-top: 20px;}
#startInfo p {font-size: 1.5rem; margin-bottom: 100px;}
.pse {
    background: rgba(0, 0, 0, 0) url("../images/PSE_klein.png") no-repeat scroll 0 0;
    float: right;
    height: 45px;
    margin-right: 8px;
    width: 74px;
    margin-top: 7px;
}
.logout {
    background: rgba(0, 0, 0, 0) url("../images/layout/logout.png") no-repeat scroll 0 0;
    float: right;
    height: 54px;
    margin-right: 13px;
    margin-left: 13px;
    width: 50px;
    margin-top: 8px;
}
.help {
    background: rgba(0, 0, 0, 0) url("../images/layout/echembook_logo_hilfe_s.png") no-repeat scroll 0 0;
    float: right;
    height: 54px;
    margin-right: 8px;
    width: 50px;
    margin-top: 8px;
}

.help:hover {
    background: rgba(0, 0, 0, 0) url("../images/layout/echembook_logo_hilfe_sactive.png") no-repeat scroll 0 0;
}
header a, header a:hover {
    color: #333;
    text-decoration: none;
}
#startInfo {text-align: center; min-height: 700px;
    width: 99.8%;}
#startInfo table tr td img {width: 80%; height: auto;}
#startInfo table tr td a {display: block;}
#startTut {text-align: center;     min-height: 700px;
    width: 99.8%;}
.logo_start {margin:40px 20px;}
#startTut .video {margin-top: 30px;}
#startTut button {
    background-color: #666;
    border: medium none;
    border-radius: 7px;
    color: #fff;
    float: left;
    font-size: 1rem;
    min-height: 40px;
    margin: 15px;
    padding: 0 15px;
}
#startTut button.Tut_back {float: right;padding: 0 15px;}
section, #masse_k2 {
    float: left;
    min-height: 575px;
    max-height: 575px;
    padding:0;
    width: 69.4%;
    /*padding-top: 10px;*/
    z-index: 8888;
}
#masse_k2 {width: 100%;  max-height: 567px;
    min-height: 567px;}
/*@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {
	section, #masse_k2 {
    min-height: 575px;
    max-height: 575px;
    overflow-y: auto;
    z-index: 8888;
}
}*/


section h2, #masse_k2 h2 {color: #c6161e; margin: 0 10px; font-size: 1rem; margin-top: 10px;}
section h3 {color: #333; margin: 10px; margin-top: 0px; margin-bottom: 5px; font-size: 1rem; margin-top: 10px;}
section p, #masse_k2 p {
    line-height: 22px;
    margin: 10px 20px 10px 10px;
    /*margin-left: 20px;
    margin-right: 20px;*/
    text-align: justify;
}
section ol li, section ul li {line-height: 22px;}
section table {margin-left: 10px; margin-right: 10px;}
/*section table tr td {padding: 5px;}*/
section table ul {margin: 0px 0px 0px 30px; padding: 0px;}
section table ul li {margin: 0px; padding: 0px;}
section table p {margin: 0px; padding: 0px;}
section table.text-left p {text-align: left;}
section table.zeb tr:nth-child(even) {
 background-color: #FFFFFF;
}
section table.zeb tr:nth-child(odd) {
 background-color: #EEEEEE;
}
section table thead {text-align: left;}
section table thead tr th {padding: 10px;}
section table thead tr th:nth-child(1) {background-color: #e0ecf7;}
section table thead tr th:nth-child(2) {background-color: #fef8dd;}
section img {    border: 1px solid #ccc;
    height: auto;
    /*max-width: 100%;*/
    padding: 5px;
    width: auto;}
img[src*="info_icon"], img[src*="icon_uebungen"], img[src*="sprechblase_grau"] {
    padding: 0px;
    border: none;
    position: relative;
}
section img[src*="info_icon"] {top: 4px; left: 5px; margin-right: 10px;}
section img[src*="sprechblase_grau"] {left: 10px; margin-right: 10px;}
section table img {padding: 5px;}
section img.uebungNote {width: 95%; eight: auto;}
aside {
    float: right;
    min-height: 575px;
    max-height: 575px;
    padding: 0;
    width: 30%;
}
/*@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {
	aside {
    min-height: 575px;
    max-height: 575px;
    overflow-y: auto;
    z-index: 8888;
}
}*/
aside p {
    /*line-height: 25px;
    margin: 0 10px;*/
    margin: 0 10px;
   font-size: .8rem;
    margin-top: 10px;
}
aside p a {
    color: #333;
    text-decoration: none;
}
aside p a:hover {opacity: .65;}
aside p.blau {display: block; background-color: #bae9fd; margin-left: 45px; padding: 10px; margin-right: 20px; margin-top: 10px; font-size: .9rem;}
aside p.blauRahmen {display: block; border: solid 1px #bae9fd; margin-left: 10px; padding: 10px; margin-right: 10px; margin-top: 10px;}
aside div.blauZusam {display: block; background-color: #bae9fd; margin-left: 10px; margin-right: 10px; padding: 10px 0; margin-top: 10px;}
aside ul {list-style: outside none none;
    margin: 0 20px 0 45px;
    padding: 0 15px 10px;}
aside ul.blau {background-color: #bae9fd;}
aside ul li {display: block; line-height: 22px; }
aside ul li i {margin-right: 5px;}
aside p img.uebers {width: 51%; height: auto;}
aside p .textUebers {position: relative; left: -20px;}
aside .ampel {
    background-color: #666;
    border-radius: 10px;
    float: right;
    height: 133px;
    margin-right: 90px;
    margin-top: 30px;
    width: 43px;
}
aside .ampelLabel {
    float: left;
    height: 133px;
    line-height: 43px;
    margin-top: 30px;
    text-align: right;
    width: 110px;
}
.info {margin-left: 10px; margin-top: 10px;}
.talk {margin-top: 10px; margin-left: 10px; margin-right: -10px;}
.video {margin-left: 20px; margin-top: 10px; }
video {border: 1px solid #ccc;}


#start, #start_k2{
    min-height: 630px;
    max-height: 630px;
    width: 99.8%;
}
#masse_k2 {border: none; background: url('../images/layout/bg_masse_ipad1.png') no-repeat top left;}
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
    #masse_k2 {border: none; background: url('../images/layout/bg_masse_ipad1.png') no-repeat top left;}
    }

#start .ampel, #start_k2 .ampel {
    background-color: #666;
    border-radius: 10px;
    border: none !important;
    margin-left: 0px !important;
    float: right;
    height: 124px;
    margin-right: 20px;
    margin-top: 0px !important;
    width: 46px;
}
#start .ampelsmall, #start_k2 .ampelsmall {
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #666 !important;
    margin-left: 115px !important;
    float: right;
    height: 70px;
    margin-top: 0px !important;
    width: 30px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 5px;
}
footer {
    height: 57px;
    margin-top: 2px;
    margin-top: -19px;
}
/*@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px) {
       footer {margin-top: -19px;}
    }
@media only screen
  and (min-device-width: 1400px) {
       footer {margin-top: -19px;}
    }*/
.icons {
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    width: 530px;
}
.back {
    background: rgba(0, 0, 0, 0) url("../images/layout/back.png") no-repeat scroll 0 0;
    float: left;
    height: 55px;
    margin-bottom: 8px;
    margin-top: 8px;
    margin-left: 15px;
    width: 80px;
}
.next {
    background: rgba(0, 0, 0, 0) url("../images/layout/next.png") no-repeat scroll 0 0;
    float: right;
    height: 55px;
    width: 80px;
}
.basis {
    background: rgba(0, 0, 0, 0) url("../images/layout/icon_basistext.png") no-repeat scroll 0 0;
    float: left;
    height: 55px;
    width: 110px;
}
.basis:hover {
    background: rgba(0, 0, 0, 0) url("../images/layout/icon_basistext_active.png") no-repeat scroll 0 0;
}
.basishover {
    background: rgba(0, 0, 0, 0) url("../images/layout/icon_basistext_active.png") no-repeat scroll 0 0;
    float: left;
    height: 55px;
    width: 110px;
}
.experiment {
    background: rgba(0, 0, 0, 0) url("../images/layout/icon_experiment.png") no-repeat scroll 0 0;
    float: left;
    height: 55px;
    width: 110px;
}
.experiment:hover {
    background: rgba(0, 0, 0, 0) url("../images/layout/icon_experiment_active.png") no-repeat scroll 0 0;
}
.experimenthover {
    background: rgba(0, 0, 0, 0) url("../images/layout/icon_experiment_active.png") no-repeat scroll 0 0;
        float: left;
    height: 55px;
    width: 110px;
}
.uebung {
    background: rgba(0, 0, 0, 0) url("../images/layout/icon_uebungen.png") no-repeat scroll 0 0;
    float: left;
    height: 55px;
    width: 110px;
}
.uebung:hover {
    background: rgba(0, 0, 0, 0) url("../images/layout/icon_uebungen_active.png") no-repeat scroll 0 0;
}
.uebunghover {
    background: rgba(0, 0, 0, 0) url("../images/layout/icon_uebungen_active.png") no-repeat scroll 0 0;
    float: left;
    height: 55px;
    width: 110px;
}
.zusammen {
    background: rgba(0, 0, 0, 0) url("../images/layout/icon_zusammenfassung.png") no-repeat scroll 0 0;
    float: left;
    height: 55px;
    width: 110px;
}
.zusammen:hover {
    background: rgba(0, 0, 0, 0) url("../images/layout/icon_zusammenfassung_active.png") no-repeat scroll 0 0;
}
.zusammenhover {
    background: rgba(0, 0, 0, 0) url("../images/layout/icon_zusammenfassung_active.png") no-repeat scroll 0 0;
    float: left;
    height: 55px;
    width: 110px;
}
.pfeil {
    float: left;
}
.no-border {border: none;}
.no-padding {padding: 0;}

#start #startCenter, #start_k2 #startCenter {
    display: block;
    height: 270px;
    margin-left: 330px;
    margin-top:170px;
    width: 365px;
}
#start_k2 #startCenter {
    margin-left: 320px;
    margin-top: 180px;
}
/* Großer Bildschirm 
@media screen and (min-width : 1400px)  {
    #start #startCenter {margin-left: 23%;}
    #start_k2 #startCenter {margin-left: 26%;}
}
@media screen and (min-device-width : 768px)
and (max-device-width : 1024px)  {
    #start #startCenter {margin-left: 33%;}
}*/

#start div, #start_k2 div {
    border-radius: 20px;
    cursor: pointer;
    display: block;
    height: 120px;
    position: absolute;
    text-align: center;
    width: 180px;
    padding-top: 4px;
}
#start_k2 div {height: 140px;}
#start div img:hover, #start_k2 div img:hover {opacity: .65;}
#start div #info img:hover, #start_k2 div #info img:hover {opacity: 1;}
/* Laptop */
#start div:nth-child(2), #start_k2 div:nth-child(2) {
    border: 2px solid #e5153f;
    margin-left: 390px;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(2){
    margin-left: 390px;
    margin-top: 10px;
}
#start div:nth-child(3), #start_k2 div:nth-child(3) {
    border: 2px solid #e69028;
    margin-left: 640px;
    margin-top: 90px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(3) {
    margin-left: 660px;
    margin-top: 80px;
}
#start div:nth-child(4), #start_k2 div:nth-child(4) {
    border: 2px solid #f0e432;
    margin-left: 750px;
    margin-top: 260px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(4) {
    margin-left: 720px;
    margin-top: 280px;
}
#start div:nth-child(5), #start_k2 div:nth-child(5) {
    border: 2px solid #93dd31;
    margin-left: 640px;
    margin-top: 430px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(5) {
    margin-left: 500px;
    margin-top: 470px;
}
#start div:nth-child(6), #start_k2 div:nth-child(6) {
    border: 2px solid #29b137;
    margin-left: 390px;
    margin-top: 490px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(6) {
    margin-left: 250px;
    margin-top: 470px;
}
#start div:nth-child(7), #start_k2 div:nth-child(7) {
    border: 2px solid #32d7e8;
    margin-left: 140px;
    margin-top: 430px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(7) {
    margin-left: 60px;
    margin-top: 280px;
}
#start div:nth-child(8), #start_k2 div:nth-child(8) {
    border: 2px solid #225ffb;
    margin-left: 20px;
    margin-top: 260px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(8) {
    margin-left: 110px;
    margin-top: 80px;
}
#start div:nth-child(9) {
    border: 2px solid #b323e6;
    margin-left: 140px;
    margin-top: 90px;
    padding-left: 10px;
    padding-right: 0px;
}
/* iPad */
/* portrait and landscape 
@media screen and (min-device-width : 768px)
and (max-device-width : 1024px)  {

#start div:nth-child(2), #start_k2 div:nth-child(2) {
    border: 2px solid #e5153f;
    margin-left: 40%;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(2){
    margin-left: 38%;
    margin-top: 10px;
}
#start div:nth-child(3), #start_k2 div:nth-child(3) {
    border: 2px solid #e69028;
    margin-left: 66%;
    margin-top: 80px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(3) {
    margin-left: 65%;
    margin-top: 60px;
}
#start div:nth-child(4), #start_k2 div:nth-child(4) {
    border: 2px solid #f0e432;
    margin-left: 75%;
    margin-top: 240px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(4) {
    margin-left: 70%;
    margin-top: 250px;
}
#start div:nth-child(5), #start_k2 div:nth-child(5) {
    border: 2px solid #93dd31;
    margin-left: 66%;
    margin-top: 400px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(5) {
    margin-left: 51%;
    margin-top: 435px;
}
#start div:nth-child(6), #start_k2 div:nth-child(6) {
    border: 2px solid #29b137;
    margin-left: 40%;
    margin-top: 460px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(6) {
    margin-left: 23%;
    margin-top: 435px;
}
#start div:nth-child(7), #start_k2 div:nth-child(7) {
    border: 2px solid #32d7e8;
    margin-left: 14%;
    margin-top: 400px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(7) {
    margin-left: 5%;
    margin-top: 240px;
}
#start div:nth-child(8), #start_k2 div:nth-child(8) {
    border: 2px solid #225ffb;
    margin-left: 6%;
    margin-top: 250px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(8) {
    margin-left: 10%;
    margin-top: 50px;
}
#start div:nth-child(9) {
    border: 2px solid #b323e6;
    margin-left: 14%;
    margin-top: 80px;
    padding-left: 10px;
    padding-right: 0px;
}

}*/
/* Desktop 
@media screen and (min-width : 1400px)  {

    #start div:nth-child(2), #start_k2 div:nth-child(2) {
    border: 2px solid #e5153f;
    margin-left: 28%;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(2){
    margin-left: 32%;
    margin-top: 10px;
}
#start div:nth-child(3), #start_k2 div:nth-child(3) {
    border: 2px solid #e69028;
    margin-left: 47%;
    margin-top: 80px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(3) {
    margin-left: 52%;
    margin-top: 60px;
}
#start div:nth-child(4), #start_k2 div:nth-child(4) {
    border: 2px solid #f0e432;
    margin-left: 53%;
    margin-top: 240px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(4) {
    margin-left: 56%;
    margin-top: 250px;
}
#start div:nth-child(5), #start_k2 div:nth-child(5) {
    border: 2px solid #93dd31;
    margin-left: 46%;
    margin-top: 400px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(5) {
    margin-left: 41%;
    margin-top: 435px;
}
#start div:nth-child(6), #start_k2 div:nth-child(6) {
    border: 2px solid #29b137;
    margin-left: 28%;
    margin-top: 450px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(6) {
    margin-left: 21%;
    margin-top: 435px;
}
#start div:nth-child(7), #start_k2 div:nth-child(7) {
    border: 2px solid #32d7e8;
    margin-left: 10%;
    margin-top: 400px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(7) {
    margin-left: 7%;
    margin-top: 240px;
}
#start div:nth-child(8), #start_k2 div:nth-child(8) {
    border: 2px solid #225ffb;
    margin-left: 4%;
    margin-top: 240px;
    padding-left: 10px;
    padding-right: 0px;
}
#start_k2 div:nth-child(8) {
    margin-left: 12%;
    margin-top: 50px;
}
#start div:nth-child(9) {
    border: 2px solid #b323e6;
    margin-left: 10%;
    margin-top: 80px;
    padding-left: 10px;
    padding-right: 0px;
}

}*/

#start div:nth-child(n+10):nth-child(-n+17), #start_k2 div:nth-child(n+9):nth-child(-n+15) {
    display: none;
    height: auto;
    margin-left: 333px;
    margin-top: 185px;
    position: absolute;
    width: 300px;
}
#start_k2 div:nth-child(n+9):nth-child(-n+15) {
    margin-left: 315px;
    width: 330px;
}
/*@media screen and (min-device-width : 768px)
              and (max-device-width : 1024px)  {
    #start div:nth-child(n+10):nth-child(-n+17) {
    margin-left: 34.5%;
    }
    #start_k2 div:nth-child(n+9):nth-child(-n+15) {
    margin-left: 30%;
    width: 330px;
}
    }
@media screen and (min-width : 1400px)  {
    #start div:nth-child(n+10):nth-child(-n+17) {
    margin-left: 24.9%;
    }
#start_k2 div:nth-child(n+9):nth-child(-n+15) {
    margin-left: 26.9%;
    width: 330px;
}
}*/
textarea {
    box-shadow: none;
    float: right;
    height: 200px;
    width: 150px;
    font-family: Arial,Helvetica,sans-serif;
}
textarea.le1, textarea.le2, textarea.le3, textarea.le4, textarea.le5, textarea.le6, textarea.le7, textarea.le8 {float: none; width: 303px; height: 100px;}
textarea.le7 {height: 60px;}
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
    and (-webkit-min-device-pixel-ratio: 1) {
   section table.LE1_Augabe, section table.LE3_Augabe, section table.LE2_Augabe, section table.LE4_Augabe, section table.LE5_Augabe, section table.LE6_Augabe, section table.LE7_Augabe {
       display: block;
        width: 280px !important;
       margin-left: 0px;
    }
        textarea.le1, textarea.le3, textarea.le2, textarea.le4, textarea.le5, textarea.le6, textarea.le7 {width: 270px;}
    }

textarea.voll {width: 550px; float: left; margin-left: 20px; height: 100px;}
#start div:nth-child(n+10) textarea, #start_k2 div:nth-child(n+9) textarea {
    border-left: 1px solid #e5153f;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
#start div:nth-child(n+11) textarea, #start_k2 div:nth-child(n+10) textarea {
    border-left: 1px solid #e69028;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
#start div:nth-child(n+12) textarea, #start_k2 div:nth-child(n+11) textarea {
    border-left: 1px solid #f0e432;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
#start div:nth-child(n+13) textarea, #start_k2 div:nth-child(n+12) textarea {
    border-left: 1px solid #93dd31;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
#start div:nth-child(n+14) textarea, #start_k2 div:nth-child(n+13) textarea {
    border-left: 1px solid #29b137;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
#start div:nth-child(n+15) textarea, #start_k2 div:nth-child(n+14) textarea {
    border-left: 1px solid #32d7e8;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
#start div:nth-child(n+16) textarea, #start_k2 div:nth-child(n+15) textarea {
    border-left: 1px solid #225ffb;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
#start div:nth-child(n+17) textarea {
    border-left: 1px solid #b323e6;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
#start #info, #start_k2 #info {margin: 0px !important; border: none; width: 300px; height: auto; text-align: left; padding-left: 4px;}
#start_k2 #info {width: 330px;}
#start div:nth-child(n+10) table, #start_k2 div:nth-child(n+9) table {border: 1px solid #e5153f;}
#start div:nth-child(n+11) table, #start_k2 div:nth-child(n+10) table {border: 1px solid #e69028;}
#start div:nth-child(n+12) table, #start_k2 div:nth-child(n+11) table {border: 1px solid #f0e432;}
#start div:nth-child(n+13) table, #start_k2 div:nth-child(n+12) table {border: 1px solid #93dd31;}
#start div:nth-child(n+14) table, #start_k2 div:nth-child(n+13) table {border: 1px solid #29b137;}
#start div:nth-child(n+15) table, #start_k2 div:nth-child(n+14) table {border: 1px solid #32d7e8;}
#start div:nth-child(n+16) table, #start_k2 div:nth-child(n+15) table {border: 1px solid #225ffb;}
#start div:nth-child(n+17) table {border: 1px solid #b323e6;}
.button, .button_start {
    border: 1px solid #333;
    border-radius: 10px;
    box-shadow: none;
    font-size: 1.1rem;
    height: 30px;
    margin-left: 30%;
    margin-top: 3px;
    width: 150px;
    cursor: pointer;
}
.button_start {font-size: .9rem;}
.marginLeft30 {
    margin-left: 30% !important;
}
a[class*="le"]>.button, a[class*="le"]>.button_start {
    margin-left: 0px;
    width: 145px;
}
#start div:nth-child(n+10) .button_start, #start_k2 div:nth-child(n+9) .button_start {
    background-color: #ea4365;
}
#start div:nth-child(n+11) .button_start, #start_k2 div:nth-child(n+10) .button_start {
    background-color: #e69028;
}
#start div:nth-child(n+12) .button_start, #start_k2 div:nth-child(n+11) .button_start {
    background-color: #f0e432;
}
#start div:nth-child(n+13) .button_start, #start_k2 div:nth-child(n+12) .button_start {
    background-color: #93dd31;
}
#start div:nth-child(n+14) .button_start, #start_k2 div:nth-child(n+13) .button_start {
    background-color: #29b137;
}
#start div:nth-child(n+15) .button_start, #start_k2 div:nth-child(n+14) .button_start {
    background-color: #32d7e8;
}
#start div:nth-child(n+16) .button_start, #start_k2 div:nth-child(n+15) .button_start {
    background-color: #225ffb;
}
#start div:nth-child(n+17) .button_start {
    background-color: #b323e6;
}
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {

      .button {font-size: .9rem;}

}

.clear {
    clear: both;
    display: block;
    height: 1px;
}
}

/* Animationen */
#aniSalz {
    margin-left: 10px;
    margin-top: 10px;
}
			.axis
			{
				font: 10px sans-serif;
				-webkit-user-select: none;
				-moz-user-select: none;
				user-select: none;
			}

			.axis .domain
			{
				fill: none;
				stroke: #000;
				stroke-opacity: .3;
				stroke-width: 10px;
				stroke-linecap: round;
			}

			.axis .halo
			{
				fill: none;
				stroke: #ddd;
				stroke-width: 8px;
				stroke-linecap: round;
			}

			.slider .handle
			{
				fill: #fff;
				stroke: #000;
				stroke-opacity: .5;
				stroke-width: 1.25px;
				cursor: crosshair;
			}

			.chart, .chart_diffusion, .chart_solution
			{
				background: transparent none repeat scroll 0 0;
                border: 1px solid #444;
                border-radius: 10px;
                box-shadow: none;
                font: 10px sans-serif;
                height: 79px;
                margin-top: 5px;
                margin-bottom: 5px;
                position: relative;
                width: 79px;
			}
            .chart_diffusion {width: 300px; height: 300px;}
            .chart_solution {width: 400px; height: 400px;}

			.toolbar
            {
                left: 158px;
                position: absolute;
                top: 435px;
            }
            .toolbar_2
            {
                left: 528px;
                position: absolute;
                top: 435px;
            }

			.chart ellipse { fill: #00AA66; }

			.chart circle
			{
				fill-opacity: 0;
				stroke: #666;
				stroke-width: 1px;
			}
.hidden {display: none;}
.fix {position: fixed !important; display: block !important;}

/* Ampel */
input[type=radio].css-checkbox {
position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
						}

input[type=radio].css-checkbox + label.css-label-rot,
input[type=radio].css-checkbox + label.css-label-orange,
input[type=radio].css-checkbox + label.css-label-gruen,
#start .ampelsmall input[type=radio].css-checkbox + label.css-label-rot,
#start .ampelsmall input[type=radio].css-checkbox + label.css-label-orange,
#start .ampelsmall input[type=radio].css-checkbox + label.css-label-gruen,
#start_k2 .ampelsmall input[type=radio].css-checkbox + label.css-label-rot,
#start_k2 .ampelsmall input[type=radio].css-checkbox + label.css-label-orange,
#start_k2 .ampelsmall input[type=radio].css-checkbox + label.css-label-gruen {
		margin: 4px 3px;
		height:35px;
        width: 35px;
		display:inline-block;
		line-height:16px;
		background-repeat:no-repeat;
		background-position: 0 0;
		font-size:16px;
		vertical-align:middle;
		cursor:pointer;
}
#start .ampel input[type=radio].css-checkbox + label.css-label-rot,
#start .ampel input[type=radio].css-checkbox + label.css-label-orange,
#start .ampel input[type=radio].css-checkbox + label.css-label-gruen,
#start_k2 .ampel input[type=radio].css-checkbox + label.css-label-rot,
#start_k2 .ampel input[type=radio].css-checkbox + label.css-label-orange,
#start_k2 .ampel input[type=radio].css-checkbox + label.css-label-gruen{
        height:35px;
        width: 35px;
        margin: 2px 3px;
        float: left;
}
#start .ampelsmall input[type=radio].css-checkbox + label.css-label-rot,
#start .ampelsmall input[type=radio].css-checkbox + label.css-label-orange,
#start .ampelsmall input[type=radio].css-checkbox + label.css-label-gruen,
#start_k2 .ampelsmall input[type=radio].css-checkbox + label.css-label-rot,
#start_k2 .ampelsmall input[type=radio].css-checkbox + label.css-label-orange,
#start_k2 .ampelsmall input[type=radio].css-checkbox + label.css-label-gruen{
       height: 18px;
       width: 18px;
       margin: 2px;
}
/* iPad */
/* portrait and landscape */
/*@media screen and (min-device-width : 768px)
and (max-device-width : 1024px)  {
#start .ampelsmall input[type=radio].css-checkbox + label.css-label-rot,
#start .ampelsmall input[type=radio].css-checkbox + label.css-label-orange,
#start_k2 .ampelsmall input[type=radio].css-checkbox + label.css-label-rot,
#start_k2 .ampelsmall input[type=radio].css-checkbox + label.css-label-orange {
    margin-left: 6px;
}
    #start_k2 .ampelsmall input[type=radio].css-checkbox + label.css-label-rot.ampel_le2,
    #start_k2 .ampelsmall input[type=radio].css-checkbox + label.css-label-orange.ampel_le2 {
        margin-left: 5px;
    }
}*/
input[type=radio].css-checkbox:checked + label.css-label-gruen {
		background-position: 0 -35px;
}
input[type=radio].css-checkbox:checked + label.css-label-orange {
		background-position: 0 -70px;
}
input[type=radio].css-checkbox:checked + label.css-label-rot {
		background-position: 0 -105px;
}
label.css-label-rot, label.css-label-orange, label.css-label-gruen {
		background-image:url(../images/checkbox_ampel.png);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
}
#start .ampel input[type=radio].css-checkbox:checked + label.css-label-gruen,
#start_k2 .ampel input[type=radio].css-checkbox:checked + label.css-label-gruen{
		background-position: 0 -35px;
}
#start .ampel input[type=radio].css-checkbox:checked + label.css-label-orange,
#start_k2 .ampel input[type=radio].css-checkbox:checked + label.css-label-orange {
		background-position: 0 -70px;
}
#start .ampel input[type=radio].css-checkbox:checked + label.css-label-rot,
#start_k2 .ampel input[type=radio].css-checkbox:checked + label.css-label-rot {
		background-position: 0 -105px;
}
#start .ampel label.css-label-rot, #start .ampel label.css-label-orange, #start .ampel label.css-label-gruen,
#start_k2 .ampel label.css-label-rot, #start_k2 .ampel label.css-label-orange, #start_k2 .ampel label.css-label-gruen{
		background-image:url(../images/checkbox_ampel_start.png);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
}
#start .ampelsmall input[type=radio].css-checkbox:checked + label.css-label-gruen,
#start_k2 .ampelsmall input[type=radio].css-checkbox:checked + label.css-label-gruen {
		background-position: 0 -18px;
}
#start .ampelsmall input[type=radio].css-checkbox:checked + label.css-label-orange,
#start_k2 .ampelsmall input[type=radio].css-checkbox:checked + label.css-label-orange {
		background-position: 0 -36px;
}
#start .ampelsmall input[type=radio].css-checkbox:checked + label.css-label-rot,
#start_k2 .ampelsmall input[type=radio].css-checkbox:checked + label.css-label-rot {
		background-position: 0 -54px;
}
#start .ampelsmall label.css-label-rot, #start .ampelsmall label.css-label-orange, #start .ampelsmall label.css-label-gruen, #start_k2 .ampelsmall label.css-label-rot, #start_k2 .ampelsmall label.css-label-orange, #start_k2 .ampelsmall label.css-label-gruen {
		background-image:url(../images/checkbox_ampel_start_small.png);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
}
.teilchen {margin-left: 128px;}
.gruen {color: #3fb171; }
.blauinhalt {color: #0070c0; }
.violet {color: #7f0a7e; }
.orange {color: #fc7f21; }
.red {color: #c6161e;}
.grau {color: #7f7f86;}
.kupfer {color: #9a8306; }
.schwefel {color: #e1bf0b;}
.darkred {color: #933633;}
.dunkelgruen { color: #4e6228;}
.dunkelviolet {color: #403152;}
button#true, button#false,button#true1, button#false1,button#true2, button#false2,button#true3, button#false3,button#true4, button#false4,button#true5, button#false5 {font-size: .85rem;}
.lueckentext_rot {border: solid 2px #c6161e; border-radius: 5px; background-color: rgba(198,22,30,.6);}
.lueckentext_gruen {border: solid 2px #3fb171; border-radius: 5px; background-color: rgba(63,177,113,.6);}
.lueckentext_grau {border: solid 2px #777777; border-radius: 5px; background-color: rgba(119,119,119,.6);}
.tableBorder {border: solid 1px #333; padding: 2px;}

/* Danger */
section img#danger_LE3,
section img#danger_LE4,
section img#dangerK2_LE1,
section img#dangerK2_LE2,
section img#dangerK2_LE3,
section img#dangerK2_LE5,
section img#dangerK2_LE6,
section img#dangerK2_LE7,
section img#T2_LE1_la2
{display: block;}
section img#danger_LE3:hover,
section img#danger_LE4:hover,
section img#dangerK2_LE1:hover,
section img#dangerK2_LE3:hover,
section img#dangerK2_LE5:hover,
section img#dangerK2_LE6:hover,
section img#dangerK2_LE7:hover,
section img#loesevorgang:hover,
section img#abkuehlen:hover,
section img.pse_gr:hover,
section img#loesevorgang_content:hover,
section img#abkuehlen_content:hover,
section img#T2_LE1_la2_content:hover
{cursor: pointer;}
#danger_LE3_content,
#danger_LE4_content,
#dangerK2_LE1_content,
#dangerK2_LE3_content,
#dangerK2_LE5_content,
#dangerK2_LE6_content,
#dangerK2_LE7_content,
#loesevorgang_content,
.pse_gr,
#abkuehlen_content,
#T2_LE1_la2_content {
    background-color: #eee;
    border: 1px solid #eee;
    border-radius: 10px;
    display: none;
    height: 420px;
    margin-left: 6px;
    position: absolute;
    top: 145px;
    width: 710px;
    z-index: 9999;
}
.pse_gr {top: 60px; left: 20px;}
#loesevorgang_content, #abkuehlen_content, .pse_gr {width: 900px; height: auto; z-index: 9999;}
#T2_LE1_la2_content {height: 460px; top: 80px;}
#close {background-color: #c6161e; border-radius: 10px; float: right; margin: 10px; padding: 5px 10px; height: 50pxx; color: #fff;}
#close:hover {cursor: pointer;}
#points {display: inline-block; width: 100%; text-align: center;}
.points {
    background-color: #ccc;
    border-radius: 5px;
    bottom: 25px;
    display: block;
    float: left;
    height: 10px;
    left: 32%;
    margin-right: 15px;
    position: relative;
    width: 10px;}
.points_white {
    background-color: #fff;
    border-radius: 5px;
    bottom: 25px;
    display: block;
    float: left;
    height: 10px;
    left: 32%;
    margin-right: 15px;
    position: relative;
    width: 10px;}
.points:hover{background-color: #4f4f4f;}
.points_active {background-color: #4f4f4f;
    border-radius: 5px;
    bottom: 25px;
    display: block;
    float: left;
    height: 10px;
    left: 32%;
    margin-right: 15px;
    position: relative;
    width: 10px;}

/* Aufgaben K2 */
span.edit {
        color:darkblue;
        padding:1px;
        height:15px;
        vertical-align:baseline;
        font-weight:bold;
        font-style:italic;
        background-color:#DFEAF2;
        border-style:solid;
        border-color:#DFEAF2;
        border-width:1px;
        min-width:80px;
        display:inline-block;
        border-bottom-color:#000000;
        border-bottom-style:solid;
        border-bottom-width:1px;
      }
      span.edit:hover {
        background-color:#ffffff; /* #ffe6d5 */
        border-color:#008EDA; /* #ff6600  */
      }
      .nach_rechts {
        text-align:right;
      }
      span.falsch {
        color:#a00; /*rot*/
        background-color:#ffd5d5;
        border-bottom-style:none;
      }
      span.richtig {
        color:#4a0; /*grün*/
        background-color:#e5ffd5;
        border-bottom-style:none;
      }
      input[type=button] {
        font-weight:bold;
        background-color:cornflowerblue;
        color:white;
        padding:2px;
        border-style:solid;
        border-color:#bebebe;
        border-width:1px;
        margin:2px;
        margin-right:10px;
      }
      input[type=button]:hover {
        color:cornflowerblue;
        background-color:#fff;
        border-color:cornflowerblue;
        cursor:pointer;
      }

/*Dalton*/
button.dalton {background: linear-gradient(0deg, #EDEDED, #FFFFFF); border: 1px solid #ccc; font-size: .9rem; border-radius: 5px;}
#dalton_erklaerung {
        display: block;
    height: 250px;
    margin-left: 10px;
    width: 620px;
    background-color: #cc0000;
}

/*Animation Atom-Molekühl K2 LE2*/
 /** init stuff - hide all show frames **/
            #atom-molekuel {
              border: 1px solid #ccc;
                margin-left: 10px;
                max-height: 240px;
                max-width: 640px;
                min-height: 240px;
                padding-top: 15px;
            }
#wrap-all {
            max-height: 190px;
            max-width: 640px;
            min-height: 190px;}
#molekuel_wrap {width: 30%; float: left;}
#molekuel_wrap_wrap {width: 48%; float: left;}
.text {font-size: .8rem; width: 50%; float: right; padding: 5px;}
            *[data-animationtype="wrapper"], *[data-animationtype="show"]{
            display: none;
            }
            .molekuel_wrapper{
            padding: 15px;
            }
			.molekuel{
			height: 64px;
			width: 256px;
			-webkit-transition: -webkit-all 0.5s ease-in-out 0.3s;
			transition: all 0.5s ease-in-out 0.3s;
			box-sizing: border-box;
			position: relative;
			}
            .molekuel_counter{
            position: absolute;
            top: -15px;
            color: greenyellow;
            font-size: 20px;
            font-weight: bold;
            }
			.molekuel.active{
			width: 118px;
			margin: 0 69px;
			-webkit-transition: -webkit-all 0.5s ease-in-out 0s;
			transition: all 0.5s ease-in-out 0s;
			}
			.stickstoff{
			background-color: lightblue;
			height: 64px;
			width: 64px;
			border-radius: 32px;
			position: absolute;
			}
			.index_num{
			visibility:hidden;
			opacity:0;
			position: absolute;
			width: 14px;
			height: 14px;
			bottom: 18px;
			left: 63px;
			font-size: 14px;
			-webkit-transition: -webkit-all 0.3s ease-in-out 0s;
			transition: all 0.3s ease-in-out 0s;
			}
            .atom_counter {
            position: absolute;
            top: -15px;
            color: orangered;
            font-size: 20px;
            font-weight: bold;
            }
			.stickstoff > div.aton_name{
			height: 16px;
			width: 16px;
			margin-left: 24px;
			margin-right: 24px;
			margin-top: 24px;
			margin-bottom: 24px;
			-webkit-transition: -webkit-all 0.5s ease-in-out 0s;
			transition: all 0.5s ease-in-out 0s;
			}
			.molekuel.active .stickstoff div.aton_name{
			-webkit-transition: -webkit-all 0.5s ease-in-out 0.3s;
			transition: all 0.5s ease-in-out 0.3s;
			}
			.stickstoff:nth-child(1){
			left: 0;
			}
			.stickstoff:nth-child(2){
			right: 0;
			}
			.molekuel.active .stickstoff:nth-child(1) div.aton_name{
			margin-left: 51px;
			margin-right: -3px;
			}
			.molekuel.active .stickstoff:nth-child(2) div.aton_name{
			margin-right: 51px;
			margin-left: -3px;
			}
			.molekuel.active .index_num{
			visibility:visible;
			opacity:1;
			-webkit-transition: -webkit-all 0.3s ease-in-out 0.5s;
			transition: all 0.3s ease-in-out 0.5s;
			}


			/** rotate one mokekül **/
			.molekuel[data-id="1"]{
			-moz-transform: rotate(30deg);
			-ms-transform: rotate(30deg);
			-o-transform: rotate(30deg);
			-webkit-transform: rotate(30deg);
			transform: rotate(30deg);
			transform: rotate(30deg);
			top: 50px;
			left: 340px;
			}
			/** if text transform to horizontal is needed, we need to align the .index_num properly. **/

			.molekuel[data-id="1"] .stickstoff div, .molekuel[data-id="1"] .index_num{
			-moz-transform: rotate(-30deg);
			-ms-transform: rotate(-30deg);
			-o-transform: rotate(-30deg);
			-webkit-transform: rotate(-30deg);
			transform: rotate(-30deg);
			}

			#hypothese_wrapper{
			padding: 10px 0px;
			}
			#hypothese_wrapper > * {
			position: relative;
			display: inline-block;
			}
			#hypothese_wrapper > #hypothese2 {
			top: 5px;
			}
			#relation_check{
			height: 42px;
			width: 42px;
			margin-left: 2px;
			}
			#relation_right{
			display: none;
			height: 42px;
			width: 42px;
			background: url(../images/relation_check.png) no-repeat 0 0px;
			}
			#relation_false{
			display: none;
			height: 42px;
			width: 42px;
			background: url(../images/relation_check.png) no-repeat 0 -42px;
			}

/* wasserstoff-sauerstoff */

#wasserstoff-sauerstoff {display: block; width: 500px; height: 500px;}

/* 3D Diamant */
#RG1, #RG1_Fullerene, #RG1_Graphite {
    display: block;
    float: right;
    margin-right: 130px;
    margin-top: -260px;
    width: 200px;
}
#RG1_Fullerene {margin-top: -170px}
#RG1 > span, #RG1_Fullerene > span, #RG1_Graphite > span {
    display: block;
    margin-bottom: 10px;
}
