.position {
    margin: 50px 0px 0px 50px;
}

.box {
    width: 100px;
    height: 100px;
    margin: 100px;
    background-color: #ccc;
    float: left;
}

.border1 {
    border-top-right-radius: 10px;
}

.border2 {
    border-radius: 5px 10px / 10px;
}

.shadow1 {
    box-shadow: 0 0 5px 5px #888;
}

.shadow2 {
    box-shadow: inset 0 0 5px 5px #888;
}

.shadow3 {
    box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
}

.shadow4 {
    box-shadow: 5px 5px rgba(0,0,0,0.5);
}

.textshadow {
    color: #fff;
    font-size: 40px;
    text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
    margin-top: 100px;
    float: left;
}

.button_mid {
    background-color: #666666;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 14px;
    margin: 0px 20px;
    margin-bottom: 40px;
    padding: 12px 20px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.button_mid:hover {
    box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 15px rgba(255, 255, 255, 0.4) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
}

.button_mid:active {
    box-shadow: 0 2px 0 #393939, 0 4px 4px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.2) inset;
    top: 7px;
}

.button_klein {
    background-color: #666666;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
    color: #FFFFFF;
    display: inline-block;
    font-size: 14px;
    margin: 0px 20px;
    margin-bottom: 40px;
    padding: 2px 10px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.button_klein:hover {
    box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 15px rgba(255, 255, 255, 0.4) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
}

.button_klein:active {
    box-shadow: 0 2px 0 #393939, 0 4px 4px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.2) inset;
    top: 7px;
}





.red {
    background-color: #C44848;
    box-shadow: 0 5px 5px #863333, 0 9px 0 #5F2626, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
}

.red:hover {
    box-shadow: 0 5px 5px #863333, 0 9px 0 #5F2626, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 15px rgba(255, 255, 255, 0.4) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
}

.red:active {
    box-shadow: 0 2px 0 #5F2626, 0 4px 4px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.2) inset;
}

.yellow {
    background-color: #E6DB17;
    box-shadow: 0 5px 5px #898210, 0 9px 0 #605C1E, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
}
.yellow:hover {
    box-shadow: 0 5px 5px #898210, 0 9px 0 #605C1E, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 15px rgba(255, 255, 255, 0.4) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
}
.yellow:active {
    box-shadow: 0 2px 0 #605C1E, 0 4px 4px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.2) inset;
}

.green {
    background-color: #7EC244;
    box-shadow: 0 5px 5px #518631, 0 9px 0 #395F26, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
}

.green:hover {
    box-shadow: 0 5px 5px #518631, 0 9px 0 #395F26, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 15px rgba(255, 255, 255, 0.4) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
}

.green:active {
    box-shadow: 0 2px 0 #395F26, 0 4px 4px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.2) inset;
}


.blue {
	/*  Button Farbe */
    background-color: #518cd4;
	/*  3D Button Farbe  */
    box-shadow: 0 5px 5px #316b86, 0 9px 0 #223d81, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 9px rgba(255, 255, 255, 0.2) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
}

.blue:hover {
    box-shadow: 0 5px 5px #367e9f, 0 9px 0 #223d81, 0 9px 10px rgba(0, 0, 0, 0.4), 0 2px 15px rgba(255, 255, 255, 0.4) inset, 0 -2px 9px rgba(0, 0, 0, 0.2) inset;
}

.blue:active {
    box-shadow: 0 2px 0 #274373, 0 4px 4px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.2) inset;
}

.rectangular {
    border-radius: 10px 10px 10px 10px / 35px 35px 35px 35px;
}

.criss-cross {
    border-radius: 35px 5px 35px 5px;
}