/*******************************************/
/*** HRI- LAYOUT (mit responsive Design) ***/
/*******************************************/
  
/*** HTML Seite allgemein ***/
html { -webkit-text-size-adjust: none; }
a{ text-decoration:none; color:#E78C29; }
a:hover{ text-decoration:underline; }
html, body, page, form{
  text-align:left;
  padding:0;
  border:0px solid black;
  border-style:none;
}
body{
  font-size:18px;
}
.maintab, .content, body,  .sortable-number, .qrowclass1, .qrowclass2,  .qslidermoved ,  .qerror {
  background-color:transparent;

}
html{ height:100%; }

.qerror{
  color:#990000;
}

/***Farbverflauf von links nach rechts***/
html, page, .footer{
  background-color: #ffffff;
}


.header{
  text-align:left;
}

.maintab, .content{
  height: inherit;
  border: none;
  padding:0;
}
.maintab{
  position: absolute;
}
.maintab{
  width:auto;
  left: 30px;
  right: 30px;
  top: 0;
  padding-bottom:60px;
}
.content{
  max-width:1200px;
  padding:10px 0px;
  padding-bottom:30px;
}


.nav-buttons{
  margin:0px auto;
  max-width:1000px;
  text-align:center;
}
.nav-buttons img{
  height:34px;
}

/* Konfiguration des Continue und Backbuttons */

#continuebutton, #backbutton {
	height:38px;
	width: 89px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 25px;
	margin-left: 0px;
	box-shadow:inset 0px 1px 0px 0px #fce2c1;
	background:linear-gradient(to bottom, #E78C29 5%, #E78C29 100%);
	background-color:#E78C29;
	border-radius:6px;
	border:0px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	text-transform: capitalize;
	padding:12px 13px;
	text-decoration:none;
	text-shadow:0px 1px 0px #E67801;
}
#continuebutton:hover, #backbutton:hover {
	background:linear-gradient(to bottom, #E67801 5%, #E78C29 100%);
	background-color:#E67801;
}
#continuebutton:active, #backbutton:active {
	position:relative;
	top:1px;
}

/***** Fußzeile ****/
.footer{
  border-bottom:1px solid #666666;
	margin-top:10px;
  /* font-size:0.8em; */
}

/*Datenschutz*/
.Datenschutz{
  font-weight:bold;
  cursor:pointer;
  color: -webkit-link;
  text-decoration: underline;
  height:40px;
  padding:0px 5px;
  color:#E78C29;
  font-size:1em;
  line-height: 40px;
  position:relative;
}
.Datenschutz .hrefImp, .Datenschutz .hrefData, .Datenschutz .Info{
  position:absolute;
  right:5px;
  color:#666;
  font-size:0.6em;
  text-decoration:none;
  cursor:pointer;
}
.Datenschutz .hrefImp{ display: none; top:10px; }
.Datenschutz .hrefData{ display: none;  bottom:10px; }
.Datenschutz .Info{
  line-height: normal;
  display: none;
  left:0px; 
  top:0px;
  cursor:default;
  font-size:0.8em;
}


/* #fortschritt-balken{ */
  /* height:14px; */
  /* border:1px solid #666666; */
  /* position:relative; */
/* } */
/* #fortschritt{ */
  /* position:absolute; */
  /* top:0px; */
  /* left:0px; */
  /* height:14px; */
  /* background-color:#ee8008; */
  /* font-size:0.8em; */
  /* color:#ffffff; */
  /* font-family:monospace; */
  /* min-width:30px; */
/* } */
#fortschritt-line {
	position: relative;
	height: 20px;
  border-top: 1px solid #666;  
  display:block;
}
#fortschritt {
	width: 203px; 
	height: 20px; 
	position: absolute; 
	border: 0px solid #ffffff; 
	padding: 0; 
	color: white;
    font-size: 0.9em;
    margin: 3px 20px;
}
#fortschritt-img {
	margin: 0px; 
	position: absolute; 
	left: 0px; 
	height: 30px;
}



/******Layout Fragen*******/
.qtext, .content, .qtable, .custom-error, .qhelptext, .footnotes {margin: 0px auto;}
.qtext{
  border: 0px solid #313131;
  color: #313131;
  margin-top:20px;
}
.qtext{
  font-size: 1em;
  font-weight:normal;
  padding:3px 0px;
	padding-bottom: 10px;
}
.custom-error{
  outline: 1px solid #cc0033;
  padding:3px;
  overflow:auto;
}
.custom-error .error-message{
  font-size: 0.8em;
  font-weight:bold;
  color: #cc0033;
}
.qtitle {
  color:#313131;
  font-weight:normal;
  font-size: 0.8em;  
  margin:15px auto;
}
.qtable {
  border-collapse: separate;
  border-spacing: 0px;
}
.qhelptext {
  margin: 10px auto;
}
.qitemtextcell, .qlabeltextcell, .qunspecifytextcell{
  color: #313131;
  font-size: 0.9em;
  padding: 2px;
  vertical-align: middle;
}

.qrightitemtextcell { 
	color: #313131;
  font-size: 0.8em;
  padding: 2px;
  vertical-align: middle;
}

.qlabeltextcell {
   padding-bottom: 5px;
}

.qrowclass1, .qrowclass2 {
  height: 35px;
  line-height: normal; 
  padding: 3px;
  background-image: none;
}
.qrowclass1{ background-color:#f1f1f1; }
.qrowclass2{ }

.multiq .qbuttoncell img, .multigridq .qbuttoncell img { vertical-align: fixed; }

/******Layout Gridfragen*******/
.qanchortext, .qitemtextcell, .qlabeltextcell, .singlegridq .qlabeltextcell, .multigridq .qlabeltextcell, .qgridheader, .qrowclass1, .qrowclass2 {
  border: 0px solid #ffffff;
  text-align: left;
}
/* .singlegridq .qlabeltextcell, .multigridq .qlabeltextcell{ vertical-align:bottom; } */
.singlegridq .qitemtextcell, .multigridq .qitemtextcell{ min-width:200px; max-width: 600px; }
.singlegridq .qrowclass1, .multigridq .qrowclass1,
.singlegridq .qrowclass2, .multigridq .qrowclass2{ border-bottom:1px solid #f2f2f2; }
.singlegridq .qgriderrorcell, .multigridq .qgriderrorcell{ background-color:#cc0033; }

/* Highlighting bei MouseOver */
.qhighlight {
  background-color: #666666;
  color:#ffffff;
}
.singlegridq .qhighlight, .multigridq .qhighlight{
  background-color: #666666;
  color: #ffffff;
}

/******* OpenQ *******/
.qopenfield{
  width:50%;
  margin:5px;
  height:15px;
}

/******* Halboffene Textfelder *******/
.qlabelopen{ border:1px solid #a9a9a9; }

/******* Sortable (Drag & Drop) *******/
.connectedSortable {
  border: 1px solid #f1f1f1;
  min-width: 50px;
  min-height: 30px;
  height: 170px;
  width: 220px;
  margin:0px auto;
  padding-bottom: 25px;
  background-color: #a8a8a9;
}
 .connectedSortable li{
  padding:5px 0px 0px 10px;
  background-color: #ffffff;
  color: #313131;
  height:20px;
  width: 200px;
  float:left;
}
.connectedSortable li:hover{color:#cc0033;}  
.sortable-number, .connectedSortable li {background-image: none;}
.sortable-number{
  color:#cc0033;
  position: static;
}


/*******Schieberegler**********/
.qslidercell {width: 375px;}
.qsliderunspecifytextcell{ 
  font-size: 0.9em;
  color: #313131;
  width: 260px;
  font-weight: bold;
}
.qsliderunspecifybuttoncell{width:64px; float:right;}  


/****************/

.onDesktop{display:block;}