/*
agentur einfachpersoenlich
   (c) 2016 Dipl.-Ing. Joerg Petermann 
*/

/*	Reset */
html,body,div,span,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,a,img,strong,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}
address{padding:0 0 30px; line-height:1.7;}
abbr,acronym{border-bottom:.1em dotted;}
ins{background:#ffffcc;text-decoration:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
ol,ul{list-style:none;}
blockquote:before,blockquote:after{content:none;}
table{border-collapse:collapse;border-spacing:0;}
input:focus,textarea:focus{border:1px solid #999; outline:0;}
a:hover, a:active, a:focus { outline: none; -moz-outline-style: none;}
::-webkit-input-placeholder {color:#999;}
:-moz-placeholder {color:#999;}
.placeholder {color: #999;}

/* Clearfix */
.clr{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
.scfl:after{clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0; }

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
 .cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

@-ms-viewport{ width: device-width; zoom:1; }
@-o-viewport{ width: device-width; zoom:1; }
@viewport{ width: device-width; zoom:1; }

*{
margin:0;
padding:0;
}

body{
font:85%/1.6em verdana, arial, sans-serif;
color:#333;
background:#f9f9f9;
}

a{
color:#0069b4;
font-weight:normal;
text-decoration:underline;
outline:none;
}

a:hover{
color:#666;
text-decoration:none;
}

h1,h2,h3,h4,h5,h6,p,ul,ol,table,td,input,textarea,form,fieldset,select,blockquote{
margin:0 0 1em;
}

ul,
ul li{
list-style-type:none;
}

.scfl:after{
content:" ";  
display:block; 
visibility:hidden;
clear:both; 
height: 0.1px;
font-size: 0.1em;
line-height: 0;
}

* html .scfl { display:inline-block; }
/*  \*/
* html .scfl { height:1%; }
.scfl{ display:block;}
/*  */

h1,h2,h3,h4{
font-family: verdana, Arial, "trebuchet MS", Helvetica, sans-serif;
font-weight:bold;
color:#333;
text-rendering: optimizeLegibility;
line-height:1.3em;
}	

h1 {
margin: 0 0 1em;
font-size: 140%;
color:#333;
}

h2 {
margin: 0 0 .8em;
font-size: 140%;
color:#333;
}

h3, .h3 {
margin: 0 0 .5em;
font-size: 110%;
clear:both;
color:#333;
}

h4, .h4 {
margin: 0 0 .3em;
font-size: 100%;
color:#333;
}

h1 a, 
h2 a, 
h3 a, 
h4 a,
.h3 a, 
.h4 a{
font-weight:bold;
border:0;
text-decoration:none;
color:#333;
}

h1 a:hover, 
h2 a:hover, 
h3 a:hover, 
h4 a:hover,
.h3 a:hover, 
.h4 a:hover{
color:#36c;
text-decoration:underline;
}

.nobord{
border:0 !important;
}

#seite{
width:1024px;
height:728px;
margin:3em auto;
padding:3em;
text-align:center;
border:13px solid #E67008;
border:13px solid #FF8028;
background:#000;
-webkit-border-radius:4em;
-moz-border-radius:4em;
border-radius:4em;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
position:relative;
}

.lo{
position:absolute;
top:-13px;
left:-13px;
width:3.3em;
height:3.3em;
border:13px solid #006;
border:13px solid #00f;
-webkit-border-radius:4em 0 0 0;
-moz-border-radius:4em 0 0 0;
border-radius:4em 0 0 0;
border-width:13px 0 0 13px;
}

.ro{
position:absolute;
top:-13px;
right:-13px;
width:3.3em;
height:3.3em;
border:13px solid #006;
border:13px solid #00f;
-webkit-border-radius:0 4em 0 0;
-moz-border-radius:0 4em 0 0;
border-radius:0 4em 0 0;
border-width:13px 13px 0 0;
}

.ru{
position:absolute;
bottom:-13px;
right:-13px;
width:3.3em;
height:3.3em;
border:13px solid #006;
border:13px solid #00f;
-webkit-border-radius:0 0 4em 0;
-moz-border-radius:0 0 4em 0;
border-radius:0 0 4em 0;
border-width:0 13px 13px 0;
}

.lu{
position:absolute;
bottom:-13px;
left:-13px;
width:3.3em;
height:3.3em;
border:13px solid #006;
border:13px solid #00f;
-webkit-border-radius:0 0 0 4em;
-moz-border-radius:0 0 0 4em;
border-radius:0 0 0 4em;
border-width:0 0 13px 13px;
}

#blatt{
width:100%;
height:100%;
background:#fff;
text-align:left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

header img{
position:absolute;
top:6em;
right:5em;
width:104px;
height:auto;
}


#main{
width:100%;
float:left;
display:block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:2em 3em;
font-size:.9em;
}

body.ende #main,
body.hilfe #main{padding:11em 10em !important;}
body.hallo1 #main{padding:14em 10em !important;}
body.hallo2 #main{padding:12em 8em !important;}
body.hallo4 #main{padding:11em !important;}

body.ende #main p{
text-align:center;
}

#main ul{
margin:0 2em 1em 10em;
}

#main ul li{
background:transparent url("/pkt.png") no-repeat 0 2px;
padding-left:2em;
color:#00f;
}

#main ul.punkte{
float:left;
display:block;
margin-left:1.5em;
margin-right:0;
}

#main ul.punkte li{
float:left;
display:inline-block;
margin-right:1.5em;
color:#333;
}

#main .alignright{
float:right;
display:inline-block;
}

#main .alignleft{
float:left;
display:inline-block;
}

#main .aligncenter{
margin:0 auto;
text-align:center;
}

#main .inputbox{
float:left;
display:inline-block;
width:100%;
margin:1.2em 0;
}

#main .inputbox h3{
float:left;
display:inline-block;
width:14em;
font-size:1em;
}

#main .inputbox p.aussage{
float:left;
display:inline-block;
width:52em;
}

body.slider #main .inputbox h3,
body.slider #main .inputbox p.aussage{
margin-bottom:0em !important;
}

#main .inputbox strong{
font-weight:bold;
font-size:1.2em;
}

#main .inputbox .radio{
float:left;
display:inline-block;
margin-right:2.8em;
position:relative;
}

body.slider #main .inputbox .radio{
margin-bottom:-1em !important;
}

#main .inputbox .doppel .radio{
margin-right:1em !important; 
}

#main .inputbox .doppel div{
float:left;
display:inline-block;
border:1px solid #ccc;
margin-right:2.8em;
padding:0 .5em;
}

#main .inputbox .doppel label{
position:absolute;
top:0;
left:0;
}

#main .inputbox .doppel .radio input{
margin-left:2em;
}

#main .inputbox form input#weiter{
position:absolute;
bottom:5em;
width:100px;
right:7em;
border:1px solid #ccc;
padding:.2em .7em;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
font-size:1.1em;
background:#eee;
}

#main .inputbox form input#weiter.aktiv{
border:1px solid #f60;
background:#FF8028;
color:#fff;
}

#main .meldung{
position:absolute;
bottom:5em;
left:20.4em;
color:red;
}

#main #ladebalken{
clear:both;
background:#f9f9f9;
height:13px;
width:100%;
border:1px solid #ededed; 
margin:auto;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

#main #fortschritt {
height:13px; 
width:0px; 
background:#007F00; 
border:none;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}

#main form fieldset{
border:1px solid #ccc;
padding:1em;
}


#main h3.rot{
margin-top:4em;
font-size:1.2em;
color:red;
}

#main form{
font-size:.9em;
}

#main .blau{
color:#00f !important;
}

#main form fieldset{
margin:0 0 2em;
}

#main form legend{
padding:0 .3em;
}

#main .spalte30{
float:left;
display:inline-block;
width:30%;
margin-right:3%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

#main .spalte30 label{
float:left;
display:inline-block;
clear:both;
width:40%;
line-height:1.2em;
margin:0 0 1em;
}

#main .spalte30 input,
#main .spalte30 select{
float:left;
display:inline-block;
width:55%;
margin:0 0 1em;
font-size:1em;
font-family:verdana,arial, sans serif;
color:#666;
padding:.2em .4em;
border:1px solid #ccc;
}

#main .spalte30 select{
width:59%;
}

#main form p.select{
float:left;
display:inline-block;
width:12%;
margin:0;
}

#main form .dreifach{
width:25% !important;
}

#main form .dreifach select{
width:80% !important;
}

#main form p.select select{
width:92%;
}

#main .fehler{
border:1px solid red !important;
}

#main #slider{
width:98.7%;
outline:none;
}

body.inputbild form input{
margin-left:7em;
}

body.mehrfach #main h3{
margin-top:2em;
margin-top:3em;
}

body.mehrfach #main .aussage{
margin-top:1.6em;
margin-top:2.6em;
}

body.mehrfach #main p.select{
width:100%;
}

body.mehrfach #main p.select select{
clear:both;
float:left;
display:inline-block;
text-align:left;
margin:0 0 3em 14em;
width:40em !important;
}

body.mehrfach #main .meldung{
margin-left:-1em;
}

body.radio4 #main p.radio{
width:300px;
}

body.radio4 #main p.marginleft{
margin-left:15.6em !important;
}

body.text #main .aussage{
margin-left:1.6em !important;
}

body.text #main p.text{
margin-left:15.6em !important;
}

body.text #main p.text input{
padding:2px 4px;
border:1px solid #ccc;
}

#main p.passwort{
float:right !important;
margin-right:3em !important;
}

#main p.passwort input{
border:1px solid #ccc;
padding:2px 4px;
width:6em;
}