@charset "utf-8";

/* Basis CSS InnoSurvey Frontend */

/*
------------------------------------------------------------------------------------- 
reset styles
------------------------------------------------------------------------------------- 
 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del,
dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit;
font-size: 100%; font-family: inherit; vertical-align: baseline; }
:focus { outline: 0; }
body { line-height: 100%; color: black; background: white; height: 101%; background-color: #fff; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
html { height: 100%; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.clearfix { display: inline-block; }
.ie7 address { font-style: normal; }
/* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */

/*
------------------------------------------------------------------------------------- 
Basic Elements
------------------------------------------------------------------------------------- 
 */


body {
	background: #ececec url(../images/bg_survey.jpg) repeat-x top left;
	font-family: Arial, Helvetica,sans-serif;
	font-size: 13px;
	text-align:center;
	color: #444;
	line-height: 1.25em;
	}

p {margin-bottom: 8px;line-height: 1.5em;}

h1 {font-weight: normal; font-size: 28px; margin-bottom: 5px; margin-top: 10px; color: #555; line-height: 1.1em;}

h2 {font-weight: normal; font-size: 22px; margin-bottom: 20px;color: #555; line-height: 1.25em;}

h3 {font-weight: bold; font-size: 15px; margin-bottom: 15px; color: #555; line-height: 1.25em;}

h4 {font-weight: bold; font-size: 15px; margin-bottom: 15px; color: #999; line-height: 1.25em;}

hr {
	background-color: #ccc; /* Farbe für Opera und Firefox */
	color: #ccc; /* Farbe für Internet Explorer (IE) */
	border: 0;
	height: 1px;
	margin: 15px 0px 15px 0px; /* Unbedingt Margin angeben, damit einheitlich dargestellt wird */
	}

textarea { font: 13px/1.6 Arial, Helvetica,sans-serif; }

/*
------------------------------------------------------------------------------------- 
container styling
------------------------------------------------------------------------------------- 
 */


#wrap {
	background: #fff;
	width: 720px;
	height: auto;
	margin: 0 auto;
	text-align: left;
}

#header {
	background: #ffffff;
	margin-top: 0px;
	margin-bottom: 0px;
}
.header_line_top {
	background: url(../images/header_line_top.jpg) no-repeat top left;
	height:7px;
}
.header_line_bottom {
	background: url(../images/header_line_bottom.jpg) no-repeat top left;
	height:12px;
}

#content {
	background: white;
	min-height: 150px;
}

#footer {
	background: white;
	min-height: 100px;
}

#footer_end            { color: #999; max-width: 970px; min-width: 560px; 
					  background: #f5f5f5; border-top: 1px solid #eee;
					  margin: 0px auto 15px; font-size:10px;padding:10px 10px 10px 10px;}
#footer_end p           { padding: 10px 15px; color: #999; text-align:right;}
#footer_end a           { color: #999; text-decoration: none; }
#footer_end a:hover     { border-top: 1px solid #336699;  }

.innoshadow			{ margin-bottom: -5px;}

.element { padding: 30px 30px 0 30px; clear:both; overflow: visible;}
* html .element { padding: 15px 30px 0px 30px; } /* IE6 FIX */
*+html .element { padding: 15px 30px 0px 30px; } /* IE7 FIX */


/* float-clearing for elements in survey 
.element:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
*/

.red {background: #FFE6F2;}

/*
------------------------------------------------------------------------------------- 
table styling
------------------------------------------------------------------------------------- 
 */

table td.td_title {
		font-weight: bold;
}


table { 
	clear:both; 
	margin-bottom:10px; 
	width:auto;
	border-collapse: collapse;
	}

table td { 
	padding: 4px 15px 4px 0px; 
	border-bottom: 1px #ddd solid; 
	vertical-align: middle; 
	text-align: left;
	font-size:13px;
	}

table th { 
	padding: 4px 8px 4px 0px; 
	font-weight: normal; 
	background: #777; 
	color: #fff; 
	text-align:left;
	}

table th span { float:left; }



/*-- table for forms - additional styling to standard table */
table.tabform	{ border-bottom: 1px solid #eee; }
table.tabform td {  }

table.tabform input[type=text]	 { min-width: 250px;}
table.tabform select 			 { min-width: 250px;}


/*
------------------------------------------------------------------------------------- 
question-boxes for different types 

structure: qbox_radio_horizontal
1) qbox > means its a container for questions
2) radio, checkbox etc. > means the type of contained questions
3) horizontal or vertical > indicates the alignement

------------------------------------------------------------------------------------- 
 */

/* radiobuttons horizontal */
.qbox_radio_horizontal {padding-bottom: 10px;}
.qbox_radio_horizontal li {float:left;margin-right: 20px; margin-bottom: 5px; }
.qbox_radio_horizontal label {margin-left: 2px;}
.qbox_radio_horizontal li * {display:block; text-align: center; margin: 0px auto 8px auto;}
* html .qbox_radio_horizontal li * { margin: 0px 4px 8px 0px; } /* IE6 FIX */
*+html .qbox_radio_horizontal li * { margin: 0px 4px 8px 0px; } /* IE7 FIX */

/* radiobuttons vertical */
.qbox_radio_vertical li {float:none; margin-bottom: 18px; clear:both;}
.qbox_radio_vertical label {margin-left: 2px; float:left; width: 90%; margin-bottom: 8px;}
.qbox_radio_vertical img {vertical-align: middle;}
.qbox_radio_vertical li * {margin-right: 10px;}
.qbox_radio_vertical li input[type=text] {margin-left: 20px;}
.qbox_radio_vertical li div.group_textarea { margin: -15px 0 20px 18px;}
.qbox_radio_vertical li div.group_textarea label { display:block}
.qbox_radio_vertical li div.group_textarea span { display:block;}
.qbox_radio_vertical input[type=radio] {float:left; margin: 0px 5px 0 0; height: 15px; width: 15px;}
.qbox_radio_vertical span {margin-bottom: 8px; margin-left: 2px; float:left; width: 90%; display:inline-block;}
* html .qbox_radio_vertical li div.group_textarea { margin: 0px 0px 0px 0px;} /* IE6 FIX */


/* checkbox horizontal */
.qbox_checkbox_horizontal {padding-bottom: 10px;}
.qbox_checkbox_horizontal li {float:left;margin-right: 20px; margin-bottom: 5px;}
.qbox_checkbox_horizontal label {margin-left: 2px;}
.qbox_checkbox_horizontal li * {display:block; text-align: center; margin: 0px auto 8px auto;}
* html .qbox_checkbox_horizontal li * { margin: 0px 4px 8px 0px; } /* IE6 FIX */
*+html .qbox_checkbox_horizontal li * { margin: 0px 4px 8px 0px; } /* IE7 FIX */


/* checkbox vertical */
.qbox_checkbox_vertical li {float:none; margin-bottom: 8px; clear: both;}
.qbox_checkbox_vertical label {margin-left: 2px; float:left; width: 90%; margin-bottom: 8px;}
.qbox_checkbox_vertical img {vertical-align: middle;}
.qbox_checkbox_vertical li * {margin-right: 10px;}
.qbox_checkbox_vertical li div.group_textarea { margin: -15px 0 20px 30px;}
.qbox_checkbox_vertical li div.group_textarea label { display:block;}
.qbox_checkbox_vertical li div.group_textarea span { display:block;}
.qbox_checkbox_vertical input[type=checkbox] {float:left; margin: 0px 5px 0 0; height: 15px; width: 15px;}
* html .qbox_checkbox_vertical li div.group_textarea { margin: 0px 0px 0px 0px;} /* IE6 FIX */


/* group for checkboxes with images */
.group_qimage_vertical {float:none; margin-bottom: 8px;}


/* 2 column view for checkboxes or radioboxex */
.columns {float:left; width:48%;}
.qbox_checkbox_vertical div.columns label {width: auto;float:left;}
.qbox_checkbox_vertical div.columns input {float:left;}
.qbox_checkbox_vertical div.columns input[type=text] {clear:left;}
.qbox_radio_vertical div.columns label {width: auto;float:left;}
.qbox_radio_vertical div.columns input {float:left;}
.qbox_radio_vertical div.columns input[type=text] {clear:left;}


/* input 1line or textarea */
.qbox_textinput {}
.qbox_textinput .labelgroup {padding-bottom: 10px;}
.qbox_textinput .qgroup {padding-bottom: 20px;}
.qbox_textinput input {width: 300px;}
.qbox_textinput textarea {width: 100%;}

/* grouping of label and input */
.questiongroup {}
.labelgroup {}
.inputgroup {}

/* circle choice > red / orange / green */

.qbox_circlechoice {}
.qbox_circlechoice .labelgroup {padding-bottom: 10px;}
.qbox_circlechoice .circlegroup {padding-right: 20px;float:left;}
.qbox_circlechoice .qgroup {padding-bottom: 20px;}


/* different basic elements like space or line */
.space {display:block; width:100%;height: 20px;}

a.link_file { padding: 1px 7px 0px 23px; margin-left: 5px; margin-top: -5px; background: transparent url(../images/page_attach.gif) no-repeat 0px 0px; }
a:hover.link_file { background-color: #dae4ff;}	

/*
------------------------------------------------------------------------------------- 
survey navigation
------------------------------------------------------------------------------------- 
 */

.surveynavigation { overflow: hidden; width: auto; padding: 30px 30px 30px 30px; clear:both;}

.buttons a, .buttons button{
	display:block;
	float:left;
	margin:0 7px 0 0;
	background-color:#f5f5f5;
	border:1px solid #dedede;
	border-top:1px solid #eee;
	border-left:1px solid #eee;

	font-family:Arial, Helvetica,Verdana, sans-serif;
	font-size:100%;
	line-height:130%;
	text-decoration:none;
	font-weight:bold;
	color:#565656;
	cursor:pointer;
	padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
	width:auto;
	overflow:visible;
	padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
	padding:5px 10px 5px 7px; /* Firefox */
	line-height:17px; /* Safari */
}
*:first-child+html button[type]{
	padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
	margin:0 3px -3px 0 !important;
	padding:0;
	border:none;
	width:16px;
	height:16px;
}

button:hover, .buttons a:hover{
	background-color:#ccc;
	border:1px solid #999;
	color:#fff;
}
.buttons a:active{
	background-color:#ccc;
	border:1px solid #999;
	color:#fff;
}

button.back {float:left;background: #f5f5f5 url(../images/surveynav_left.jpg) no-repeat center left; padding-left: 20px !important;}
button.forward {float:right;background: #f5f5f5 url(../images/surveynav_right.jpg) no-repeat center right; padding-right: 20px !important;}
button.downlaod {float:right;background: #f5f5f5 url(../images/surveynav_download.jpg) no-repeat center right; padding-right: 30px !important;}

button:hover.back {float:left;background: #ccc url(../images/surveynav_left_hover.jpg) no-repeat center left;}
button:hover.forward {float:right;background: #ccc url(../images//surveynav_right_hover.jpg) no-repeat center right;}
button:hover.downlaod {float:right;background: #ccc url(../images/surveynav_download_hover.jpg) no-repeat center right;}

/*
------------------------------------------------------------------------------------- 
page progress styling 
------------------------------------------------------------------------------------- 
 */


#progress {
	background: transparent;
	margin-top: 15px;
	margin-bottom: 10px;
	text-align: center;
}

#progress .step {
	width: 40px;
	height: 17px;
	padding: 13px 0 10px 0;
	display:inline-block;
	background: #ccc;
	text-align: center;
	color: #fff;
	margin-right: 20px;
	vertical-align: middle;
	font-size: 15px;
	margin-bottom: 12px;
	}

#progress .active {
	background:#64A9E0;
	color: #fff;
	}

* html #progress .step {display: inline;} /*IE6 Fix*/
*+html #progress .step {display: inline;} /*IE7 Fix*/

/* smaller steps - only if more than 10 pages */

#progress_small {
	background: transparent;
	margin-top: 15px;
	margin-bottom: 0px;
	text-align: center;
}

#progress_small .step {
	width: 25px;
	height: 10px;
	padding: 5px 0 10px 0;
	display:inline-block;
	background: #ccc;
	text-align: center;
	color: #fff;
	margin-right: 3px;
	vertical-align: middle;
	font-size: 13px;
	margin-bottom: 12px;
	}

* html #progress_small .step { height: 5px; padding-bottom:5px; }

#progress_small .active {
	background:#64A9E0;
	color: #fff;
	}

* html #progress_small .step {display: inline;} /*IE6 Fix*/
*+html #progress_small .step {display: inline;} /*IE7 Fix*/


/*
------------------------------------------------------------------------------------- 
messages
------------------------------------------------------------------------------------- 
 */

.msg_error 			{ text-align: left; margin-bottom: 20px; clear:both;
					  background: #FFE6F2 url(../images/survey/exclamation_red.png) no-repeat 7px 50%; 
					  padding: 5px 5px 5px 30px; border: 1px dotted #999; }

.msg_alert 			{ text-align: left; margin-bottom: 20px; clear:both;
					  background: #FFFFC8 url(../images/backend/exclamation.png) no-repeat 7px 50%; 
					  padding: 5px 5px 5px 30px; border: 1px dotted #999; }

.msg_info 			{ text-align: left; margin-bottom: 20px; clear:both;
					  background: #d2f6ff url(../images/backend/information.png) no-repeat 7px 50%; 
					  padding: 5px 5px 5px 30px; border: 1px dotted #999; }

.msg_ok				{ text-align:left;margin-bottom:20px; clear:both;
					  background:#D7FAD7 url(../images/backend/ok.png) no-repeat 7px 50%;
					  padding:5px 5px 5px 30px;border:1px dotted #999; }

div.msg_error p, div.msg_alert p, div.msg_info p, div.msg_ok p		{ margin-bottom: 0px ;}					

label.error {		text-align: left; margin-top:10px; margin-bottom: 20px; 
					  background: #FFE6F2 url(../images/exclamation_red.png) no-repeat 7px 50%; 
					  padding: 5px 5px 5px 30px; border: 1px dotted #999;
					  width:auto; display:block;


}

input.error {
	border: 1px dotted #999;

}


.img {background-color:#FFFFFF}