/*a:link    {text-decoration: none; color: red;}
a:visited {text-decoration: underline; color: green;}
a:hover {text-decoration: underline;}*/
body{

  font-size: 18px;	
  text-align:center;
  font-family: "Montserrat", sans-serif;
/*	border-width: 10px !important;
    border: 10px solid transparent;  
    -webkit-border-image: url(frag-border.jpg) 30 round; 
    -o-border-image: url(frag-border.jpg) 30 round; 
    border-image: url(frag-border.jpg) 30 round;	*/  
}
body img

{ max-width: 100%;}

#Frag
{
	position:relative;
//	float:left;
	width:auto;
	font-size:32px;
	text-align:center;
	margin-right:45px;
    padding: 10px;	
}

#antworten
{
	position:relative;
	width:100%;
}

#falsche
{
	margin-top:45px;
	color: red;
	text-align: center;
	font-weight:bold;
}

#richtig
{
	margin-top:45px;
	color: green;
	text-align: center;	
	font-weight:bold;
}

#NOLOGIN
{
	margin-top:45px;
	color: black;
	text-align: center;	
}

label
{
	display:block;
}

#Losung
{
	font-style: italic;
	text-align:center;
}
#weiter
{	
	text-align:center;
}
.antwort
{
	position:relative;
	float:left;
	margin-left:5%;
	margin-right:5%;
	margin-top:5%;
	width:40%;
	text-align:center;
}

.knopf
	{
		width:100%;
		max-width: 350px;
		min-width: 250px;
		height: 60px;
		margin: auto;
		font-weight: bold;
		font-size:20px;	
		color: #ffffff;
		text-shadow: 1px 1px 1px #000;
		border: solid thin #882d13;
		-webkit-border-radius: .7em;
		-moz-border-radius: .7em;
		border-radius: .7em;
		-webkit-box-shadow: 2px 2px 3px #999;
		box-shadow: 2px 2px 2px #bbb;
		background: #000090;
		background: -webkit-linear-gradient( #000090 , #0000ff);
		background: -o-linear-gradient( #000090 , #0000ff);
		background: -moz-linear-gradient( #000090 , #0000ff); 
		background: linear-gradient( #000090 , #0000ff);		
	}
	
.knopf:hover
	{
		cursor:pointer;
		background: #ff6000;
		background: -webkit-linear-gradient( #ff6000 , #ff9000);
		background: -o-linear-gradient( #ff6000 , #ff9000);
		background: -moz-linear-gradient( #ff6000 , #ff9000); 
		background: linear-gradient( #ff6000 , #ff9000);		
	}
	
.falsch
	{
		font-weight: bold;
		color: #ffffff;
		text-shadow: 1px 1px 1px #000;
		border: solid thin #882d13;
		-webkit-border-radius: .7em;
		-moz-border-radius: .7em;
		border-radius: .7em;
		-webkit-box-shadow: 2px 2px 3px #999;
		box-shadow: 2px 2px 2px #bbb;
		background: #900000;
		background: -webkit-linear-gradient( #900000 , #ff0000);
		background: -o-linear-gradient( #900000 , #ff0000);
		background: -moz-linear-gradient( #900000 , #ff0000); 
		background: linear-gradient( #900000 , #ff0000);		
	}
.falsch:hover
	{
		cursor:not-allowed;			
		background: #900000;
		background: -webkit-linear-gradient( #900000 , #ff0000);
		background: -o-linear-gradient( #900000 , #ff0000);
		background: -moz-linear-gradient( #900000 , #ff0000); 
		background: linear-gradient( #900000 , #ff0000);		
	}	
.richtig,.richtig:hover
	{
		background: #009000;
		background: -webkit-linear-gradient( #009000 , #00ff00);
		background: -o-linear-gradient( #009000 , #00ff00);
		background: -moz-linear-gradient( #009000 , #00ff00); 
		background: linear-gradient( #009000 , #00ff00);			
	}

.richtig:hover
	{
		cursor:not-allowed;		
	}
	
.grau
{
		color:black;
		background: #B7B7B7 ;
		background: -webkit-linear-gradient( #B7B7B7  , #828282);
		background: -o-linear-gradient( #B7B7B7  , #828282);
		background: -moz-linear-gradient( #B7B7B7  , #828282); 
		background: linear-gradient( #B7B7B7  , #828282);
}
.grau:hover
{
		cursor:not-allowed;	
		color:black;
		background: #B7B7B7 ;
		background: -webkit-linear-gradient( #B7B7B7  , #828282);
		background: -o-linear-gradient( #B7B7B7  , #828282);
		background: -moz-linear-gradient( #B7B7B7  , #828282); 
		background: linear-gradient( #B7B7B7  , #828282);
}
	
.falsch2
	{
		width: 20em;
		height: 3em;
		padding: .5em;
		font-weight: bold;
		font-size:1.0em;
		color: #ffffff;
		text-shadow: 1px 1px 1px #000;
		border: solid thin #882d13;
		-webkit-border-radius: .7em;
		-moz-border-radius: .7em;
		border-radius: .7em;
		-webkit-box-shadow: 2px 2px 3px #999;
		box-shadow: 2px 2px 2px #bbb;
		background-color: #0000ff;
		background-image: -webkit-gradient(linear, left top, left bottom,
		from(#009000), to(#00ff00),color-stop(0.4, #00cc00));	
	}		

.Hilfe
{
	position:relative;
	float:left;
	width:100%;
	text-align:center;
	margin-bottom:10px;
	z-index:10;
}

.tooltip-info {
    background: black !important;
    padding:10px;
    color:#fff !important; 
    z-index: 99;
	border-width: 10px !important;
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(border.png) 30 round !important; /* Safari 3.1-5 */
    -o-border-image: url(border.png) 30 round !important; /* Opera 11-12.1 */
    border-image: url(border.png) 30 round !important;	
}




.Zurück
{
		background: #FFF03A ; /* For browsers that do not support gradients */
		background: -webkit-linear-gradient( #FFF03A , #FFBC00 ); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient( #FFF03A , #FFBC00); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient( #FFF03A , #FFBC00); /* For Firefox 3.6 to 15 */
		background: linear-gradient( #FFF03A  , #FFBC00); /* Standard syntax */				
/*		background-image: -webkit-gradient(linear, left top, left bottom,
		from(#FF00C8), to(#C000FF),color-stop(0.4, #0000cc));		*/
}

.Zurück:hover
{
		background: #FF3A3A ; /* For browsers that do not support gradients */
		background: -webkit-linear-gradient( #FF3A3A , #8A3D07 ); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient( #FF3A3A , #8A3D07); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient( #FF3A3A , #8A3D07); /* For Firefox 3.6 to 15 */
		background: linear-gradient( #FF3A3A  , #8A3D07); /* Standard syntax */		
/*	background-image: -webkit-gradient(linear, left top, left bottom,
	from(#FF00C8), to(#C000FF),color-stop(0.4, #FF0000));			*/
}

@media only screen and (max-width: 700px){	/*X Mobile L-M-S*/

.antwort
{
	position:relative;
	float:left;
	margin-left:5%;
	margin-right:5%;
	width:90%;
	text-align:center;
}

}
	
@media only screen and (max-width: 450px){	/*X Mobile L-M-S*/

#Frag
{
	font-size:22px;
	margin-top:45px;
	margin-right:0px;	
}

#falsche
{
	margin-right:45px;
}

.antwort
{
	margin:5%;
	width:90%;
}

.knopf
	{
		font-size:16px;			
		width:100%;
	}

	
}	


@media only screen and (min-width: 1200px){	/*X LAPTOP*/
.antwort
{
	margin:2.5%;
	width:20%;
}

.knopf
	{
		font-size:24px;
		height: 75px;		
	}

}