/* STANDARD */

body {
    background-color: white;
    color: darkblue;
    font-size:small;
    font-weight:bold;
    width:620px; /* für mobile Handys anpassen; 20px kleiner als content-width in meta-viewport */
}

/* Button */
input[type=button], input[type=submit], input[type=reset] {
    font-size: x-large;
    color: darkblue;
    border: 3px solid darkblue;
    border-radius: 10px;
    padding: 10px 10px;
	cursor: pointer;
}

/* Image-Button */
input[type=image] {
    border: 5px solid transparent;
    border-radius: 10px;
	cursor: pointer;
}

/* Link */
a {
    border: 5px solid transparent;
    border-radius: 10px;
    font-size: x-large;
	cursor: pointer;
}

/* Label */
label, span {
    font-size: x-large;
}

caption{
    font-size: large;
    color: red;
    border: 1px solid darkblue;
    text-align: left;
}

/* Textfeld  */
input[type=text], input[type=date], input[type=number], input[type=search], input[type=password], select {
    font-size: x-large;
    padding: 5px 5px;
    border-width: 3px;
    border-radius: 10px;
    box-sizing: border-box;
} 
:focus {
    border: 3px solid red;
}

/* Auswahl rot markieren */
input[type=radio]:checked ~ label, input[type=checkbox]:checked ~ label { 
    color: red; 
}

/* Image */
img {
    border-radius: 10px;
}

/* Tabelle */
table {
    border-radius: 10px;
}

/* Proggress bar */

    /* Edge, IE */
    progress {
        color: lightgreen;
        background-color: white;
        border-radius: 10px;
        animation: progress-pulse 1s linear infinite;
        -webkit-animation: progress-pulse 1s linear infinite;
    }

    /* Chrome, Safari, Opera */
    progress::-webkit-progress-bar {
        background-color: white;
        border-radius: 10px;
        animation: progress-pulse 1s linear infinite;
        -webkit-animation: progress-pulse 1s linear infinite;
    }
    progress::-webkit-progress-value {
        background-color: lightgreen;
        border-radius: 10px;
        animation: progress-pulse 1s linear infinite;
        -webkit-animation: progress-pulse 1s linear infinite;
    }

    /* Firefox */
    progress::-moz-progress-bar {
        background-color: lightgreen;
        border-radius: 10px;
        animation: progress-pulse 1s linear infinite;
        -webkit-animation: progress-pulse 1s linear infinite;
    }

    /* Animation bewirkt das Neuzeichnen des Steuerelments */
@-webkit-keyframes progress-pulse {
    from, 50% {
        width: 100%;
    }
    50%, to {
        width: 99.9%;
    }
}

@keyframes progress-pulse {
    from, 50% {
        width: 100%;
    }
    50%, to {
        width: 99.9%;
    } 
}


/* KLASSEN */

.container {
    position: relative;
    width: 100px;
    height: 100px;
    float: left;
    margin-left: 10px;
}

.checkbox {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.LinkLikeAButton {
    color: darkblue;
    background-color: ButtonFace;
    border: 3px solid darkblue;
    border-radius: 10px;
    padding: 5px 5px;
    cursor: pointer;
}

/* FileUpload individualisieren */
.inputfile {
    height: 1px;
    width: 1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.inputfile + label {
    background-color: ButtonFace;
    color: ButtonText;
    border: 5px solid transparent;
    border-radius: 10px;
    padding: 5px 25px;
    display: inline-block;
	cursor: pointer;
}

.duklerHintergrund {
    background-color: darkblue;
    color: white;
}

/* Fester Rahmen */
.visibleDiv
{
    position: fixed;
    left: 10px;
    bottom: 10px;
}

/* Blinkender Rahmen */
.blink {
    animation: blink-animation 1s linear infinite;
    -webkit-animation: blink-animation 1s linear infinite;
}
@keyframes blink-animation { from,  49.9% { border-color: red;  }  50%,  to { border-color: transparent;  } }
@-webkit-keyframes blink-animation { from,  49.9% { border-color: red;  }  50%,  to { border-color: transparent;  } }