@charset "utf-8";
/* CSS Document */

/*Container für das Canvas Element. Mit dessen Hilfe wird dieses positioniert*/
#canvasWrapper {
    width: 960px;
    height: 150px;
    position: relative;
}
/*Wird nur während des Ladeprozesses gezeigt.*/
#preloader {
    width: 30px;
    height: 30px;
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -15px;
    margin-top: -15px;
    padding: 5px;
    background-color: #FFF;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
/*Das eigentliche canvas Element, also die Bühne, auf der animiert wird.*/
#canvas {
    cursor: pointer;
}
/*Container für die Bilder sowie die zugehörigen Attribute*/
#myImages {
    display: none;
}
/*Container für die Hauptnavigation Im Standard leicht transparent*/
#midNavigation{
    height: 27px;
    position: absolute;
    top: 120px;
    left: 375px;
    opacity: 0.4;
}
/*Container für die Hauptnavigation wird beim Überfahren des Bildes mit der Maus weniger Transparent*/
#midNavigation.active{
    opacity: 0.9;
}
/*Container für die: zum vorherigen Bild Grafik*/
#prevBtn{
    height: 27px;
    width: 27px;
    background: url("../images/prevBtn.png") left top no-repeat;
    float: left;
    cursor: pointer;
}
/*Container für die: zum vorherigen Bild Grafik Hover Grafig*/
#prevBtn:hover{
    background: url("../images/prevBtnOver.png") left top no-repeat;
}
/*Container für die: zum nächsten Bild Grafik*/
#nextBtn{
    height: 27px;
    width: 27px;
    background: url("../images/nextBtn.png") left top no-repeat;
    float: right;
    cursor: pointer;
}
/*Container für die: zum nächsten Bild Grafik Hover Grafig*/
#nextBtn:hover{
    background: url("../images/nextBtnOver.png") left top no-repeat;
}
/*Container für alle Navigationselemente, die automatisch pro Bild angelegt werden.*/
#midCon{
    height: 27px;
    float: left;
    margin: 0 3px;
}
/*Linker Bereich des Hintergrundes der Navigationselemente. Dieser dehnt sich nach rechts aus.*/
#bgLeft{
    height: 27px;
    background:url("../images/bgNavMid.png") left top no-repeat;
    float: left;
}
/*Rechter Bereich des Hintergrundes der Navigationselemente. Schließt die Grafik nach rechts ab.*/
#bgRight{
    height: 27px;
    width: 5px;
    background:url("../images/bgNavMid.png") right top no-repeat;
    float: right;
}
/*Hebt das Float der vorherigen DIV's auf.*/
.clearer{
    clear: both;
    height: 1px;
}
/*Navigationselement. Von diesem werden automatisch so viele erzeugt, wie Bilder genutzt werden. Werden im #bgLeft platziert.*/
.navBtn{
    width: 18px;
    height: 27px;
    background: url("../images/navMidBtn.png") left top;
    margin-left: 4px;
    margin-top: 1px;
    float: left;
    cursor: pointer;
}
/*Aktives Navigationselement. Wird farblich hervorgerhoben.*/
.navBtnActive{
    width: 18px;
    height: 27px;
    background: url("../images/navMidBtn.png") left 25px;
    margin-left: 4px;
    margin-top: 1px;
    float: left;
    cursor: pointer;
}
/*Container für die möglichen, optionalen Textbeschreibungen.*/
#conDescription{
    position: absolute;
    top: 200px;
    left: 0px;
    opacity: 0.8;
    width: 250px;
}
/*Überschrift der Bildbeschreibung.*/
.headline_txt{
    position: relative;
    background-color: #000;
    padding: 5px;
    color: #FFF;
    width: 400px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 16px;
}
/*Textbeschreibung des Bildes*/
.description_txt{
    position: relative;
    width: 400px;
    background-color: #FFF;
    padding: 5px;
    color: #000;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    left:15px;
    margin-top: 2px;
}
/*
* ACHTUNG: Alle nachfolgenden Formatierungen dienen nur zur Gestaltung der Erklärungstexte etc.
* und sind für die Animation selbst nicht notwendig!
* Diese müssen Sie nicht in Ihre CSS Datei aufnehmen!
*/
h1, h2, h3 {
    font-family:Arial, Helvetica, sans-serif;
    color: #1e90ff;
}
h1 {
    font-size: 18px;
}
h2 {
    font-size: 16px;
    color: #778899;
}
h3 {
    color: #FF6600;
    font-size: 14px;
    margin: 0;
}
h4 {
    color: #556b2f;
    font-size: 12px;
    margin: 10px 0 0 0;
    font-weight: bold;
}
textarea {
    background-color: #f0f8ff;
    border: 1px dashed #1e90ff;
    padding: 5px;
}
textarea.cssStyle {
    width: 960px;
    height: 25px;
    overflow: hidden;
}
textarea.jsStyle {
    width: 960px;
    height: 120px;
    overflow: hidden;
}
textarea.scriptStyle {
    width: 960px;
    height: 180px;
}
textarea.elementsStyle {
    width: 960px;
    height: 250px;
}
.description {
    font-family:Arial, Helvetica, sans-serif;
    width: 975px;
    font-size: 12px;
    color: black;
    margin:0 0 20px 0;
    line-height: 18px;
}
span.red {
    color: red;
}
td, #params th {
    padding: 8px;
}
thead {
    background-color: #333;
    color: #FFF;
    font-weight: bold;
    font-size: 14px;
}
tbody tr {
    background-color: #CCC;
}
tbody tr:nth-child(2n) {
    background-color: #999;
}

button {
    color:white;
    font-weight:bold;
    padding: 5px 10px;
    background-color: black;
    border: 1px solid black;
    border-radius: 25px;
}