body {font-family: Arial, Helvetica, Sans Serif;}
#container {width: 800px ; margin: auto;}  /* zoom: 1   hat eher nichts bewirkt */
.thanx {font-size: 20px; font-weight: bold; color: orange; text-align: center;}
#headline, #legende { position: relative; width: 810px; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; margin: auto; }
#headline { height: 5em; }
#headline h1 {font-size: 24px; margin-top: 10px; text-align: center;}
#headline h1 span {color: #999;}

#legende { margin-top: 3px; height: 60px;}
#legende #imgtext { position: absolute; left: 120px;}
#legende #imgtext span { position: absolute; left: 40px; top: 8px; width: 200px;}
#legende #text  { position: absolute; left: 320px;}

#kommentar { position: relative; top: 0px; left: 211px; height: 60px; width: 598px; margin-bottom: -5px; box-shadow: 0 0 5px #ccc; border: none; }

.slidelineelem {position: absolute; top: 0; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; }

.slideline { position: relative; width: 800px; min-height: 60px; margin: 10px auto;}
.tooltip { width: 20px; height: 20px; position: absolute; top: 2px; left: 6px; text-align: center; z-index: 100 !important; color: #aaa;}
.tt-on {background: #fefefe !important; }
.tt-off {background: none  !important;}


.answer { width: 200px; height: 100%; overflow-y: auto;}
.answer p {padding-left: 20px; }
.fett {font-weight: bold; }

.slider-container {width: 600px; left: 210px; height: 100%; position: relative; height: 60px;}
.slidehover:hover {border: 1px solid #bbb; box-shadow: 0 0 5px #bbb;}

.slider {position: relative; width: 500px; top: 50%; margin: auto; margin-top: -9px;}

#boxcontainer {position: absolute; top: 20px; left: 76px; width: 492px; height: 32px; background: url(../img/verlauf-headline.jpg) no-repeat;box-shadow: 0 0 5px #666;}
.colorbox { color: #666; position: absolute; top: 6px;}


.submit {
    width: 810px; height: 50px; margin: auto; font-size: 30px; margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
}
.submit:hover {
    background: #eee;
    cursor: pointer;
}

.cstm-label { position: absolute; font-size: 10px; left: -2px;}
.cstm-text { position: absolute; top: 25px; left: 16px; width: 160px;}

#no-choice { position: absolute; top: 17px; left: 31px;}
#no0 { left: 15px;}
#no1 { left: 60px;}
#no2 { left: 105px;}
#no3 { left: 150px;}
#no4 { left: 195px;}
#no5 { left: 243px;}
#no6 { left: 290px;}
#no7 { left: 335px;}
#no8 { left: 380px;}
#no9 { left: 425px;}
#no10 { left: 463px;}

.grad-grey { 
 /*
	background: #ffffff;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
 */

}