/* Grüner Schalter mit Farbwechsel */
/* Version 0.0.1.1 */
/* 2018-11-18 */
/* by T. C. Woodeggs, Glockenbreite 3, D-34414 Warburg, Germany */


.button-green {

    /* Eckenrundungen Schalter */
	-webkit-border-top-left-radius:0.7vw;
	-moz-border-radius-topleft:0.7vw;
	border-top-left-radius:0.7vw;
	-webkit-border-top-right-radius:0.7vw;
	-moz-border-radius-topright:0.7vw;
	border-top-right-radius:0.7vw;
	-webkit-border-bottom-right-radius:0.7vw;
	-moz-border-radius-bottomright:0.7vw;
	border-bottom-right-radius:0.7vw;
	-webkit-border-bottom-left-radius:0.7vw;
	-moz-border-radius-bottomleft:0.7vw;
    border-bottom-left-radius:0.7vw;

/* vor dem Komma: 1.Wert: Rechtsverschiebung einer Farbe unter dem Schalter, 2.Wert: Verschiebung einer Farbe unter dem Schalter von oben nach unten, 3.Wert: Zerstreuung der Farbe unter dem Schalter */
/* hinter dem Komma: 1.Wert: Überlappung des Schalters mit Farbe von links nach rechts, 2.Wert: Überlappung mit Farbe von oben unten, 3.Wert: Zerstreuung der überlappenden Farbe */
	-moz-box-shadow: 0.3vw 0.3vw 0.7vw #777, 0.3vw 0.3vw 0.7vw #666 inset;
	-webkit-box-shadow: 0.3vw 0.3vw 0.7vw #777, 0.3vw 0.3vw 0.7vw #666 inset;
	box-shadow: 0.3vw 0.3vw 0.7vw #777, 0.3vw 0.3vw 0.7vw #666 inset;
}

.button-green {
	width: 40vw; }

.button-green {
	text-align:center; }

.button-green:hover {
	background-color: #0186ba;
	background-image: -moz-linear-gradient(#04acec,  #0186ba);	
	background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background-image: -webkit-linear-gradient(#04acec, #0186ba);
	background-image: -o-linear-gradient(#04acec, #0186ba);
	background-image: -ms-linear-gradient(#04acec, #0186ba);
	background-image: linear-gradient(#04acec, #0186ba);
	text-shadow: 0vw 0vw 0.3vw #fff;	
    color:#ffffff;
}

.button-green {
	border: 0.1vw solid #222;
	background-color: #111;
	background-image: -moz-linear-gradient(#09521c, #111); 
	background-image: -webkit-gradient(linear, left top, left bottom, from(#09521c), to(#111));	
	background-image: -webkit-linear-gradient(#09521c, #111);	
	background-image: -o-linear-gradient(#09521c, #111);
	background-image: -ms-linear-gradient(#09521c, #111);
	background-image: linear-gradient(#09521c, #111);
					
	text-shadow: none;	

	text-indent:0;
	display:inline-block;
	color:#f5f5f5;
	font-size:3.5vw;
	font-weight:bold;
/* height > line-height = Ausrichtung unten, height < line-height = Ausrichtung oben; height = line-height Ausrichtung= mittig */
    height: 10vw;
	line-height: 10vw;
	text-decoration:none;
}

.button-green:active {
    position:relative;
/* Schalterverschiebung beim Drücken */
	top:0.3vw; }