@CHARSET "UTF-8";
#main {
	background: url(../images/ankieta.jpg) no-repeat top left;
	overflow: auto;
}
#main .pos_rel {
	position: relative;
}
#main .content {
	padding-top: 50px;
	padding-left: 410px;
}

#main .content2 {
	padding-top: 50px;
	padding-left: 500px;
}

#main .content2 h1.heading,
#main .content h1.heading {
	text-indent: -9999px;
	width: 84px;
	height: 18px;
	background: url(../images/ankietaHeader.gif) no-repeat top left;
	float: left;
	margin-left: 18px;
}
#main .content2 h1.heading {
	float: none;
	padding-bottom: 15px;
}
#main .content h5 {
	text-indent: -9999px;
	width: 314px;
	height: 18px;
	display: block;
	float: left;
	clear: right;
}
#main .content h5.step1 {
	background: url(../images/step1.gif) no-repeat;
	background-position: 20px 0px;
}
#main .content h5.step2 {
	background: url(../images/step2.gif) no-repeat;
	background-position: 20px 0px;
}
#main .content h5.step3 {
	background: url(../images/step3.gif) no-repeat;
	background-position: 20px 0px;
}
#main .content h5.step4 {
	background: url(../images/step4.gif) no-repeat;
	background-position: 20px 0px;
}
#main .content h5.step5 {
	background: url(../images/step5.gif) no-repeat;
	background-position: 20px 0px;
}
#main .content h5.step6 {
	background: url(../images/step6.gif) no-repeat;
	background-position: 20px 0px;
}
#main .content h5.step7 {
	background: url(../images/step7.gif) no-repeat;
	background-position: 20px 0px;
}
#main .content h5.step8 {
	background: url(../images/step8.gif) no-repeat;
	background-position: 20px 0px;
}
#main .content h5.step9 {
	background: url(../images/step9.gif) no-repeat;
	background-position: 20px 0px;
}
#previous {
	display: block;
	float: left;
	height: 380px;
	width: 60px;
	background: url(../images/left.png) no-repeat center left;
	text-indent: -9999px;
}
#next {
	display: block;
	float: left;
	height: 380px;
	width: 60px;	
	background: url(../images/right.png) no-repeat center right;
	text-indent: -9999px;
}
#main .content .hidden_arrow {
	background: none;
}
#main .content .splash {
	background: #ffffff;
	position: absolute;
	z-index: 2000; 
	left: 468px; 
	top: 50px; 
	height: 350px;
	width: 440px;
}
#main .content .splash .show_questions {
	text-indent: -9999px;
	display:block;
	margin: 25px 0 0 190px;
	width: 192px;
	height: 42px;
}

#main .content .splash .show_blue {
	background: url(../images/wypelnijAnkieteNiebieski.jpg) no-repeat top left;
}
#main .content .splash .show_yellow {
	background: url(../images/wypelnijAnkieteZolty.jpg) no-repeat top left;
}
#main .content .splash .show_green {
	background: url(../images/wypelnijAnkiete.jpg) no-repeat top left;
}
#questionnaire .item {
	width: 430px;
	height: 380px;
	overflow: hidden;
	background: transparent !important;
}
#questionnaire p.question {
	font-weight: bold;
	font-size: 12px;
	padding: 28px 0 10px 18px;
	width: 100%;
}
#questionnaire p.subquestion {
	font-size: 12px;
	padding: 0 0 10px 18px;
	width: 100%;
}
#questionnaire p.question2 {
	font-weight: bold;
	font-size: 12px;
	padding: 28px 0 10px 18px;
	width: 413px;
}
div.sortable p {
	cursor: move;
	margin: 5px 0 0 20px;
	padding: 5px 0px 5px 5px !important;
	width: 400px !important;
}
div.sortable p.lg {
	border: 1px solid #75bf22;
}
div.sortable p.hf {
	border: 1px solid #f2cf02;
}
fieldset {
	float: left;
}
fieldset #questionnaire label sup {
	color: #ff0000;
}
fieldset #questionnaire label.right {
	clear: right;
	display: block;
	padding: 2px 0 10px 18px;
	width: 370px;
}
fieldset #questionnaire label.left {
	clear: left;
	float: left;
	text-align: right;
	display: block;
	padding: 2px 10px 10px 0;
	width: 170px;
}
fieldset #questionnaire label.sup {
	padding-top: 1px;
}
#questionnaire .textInput {
	width: 85px;
	height: 16px;
	border: 1px solid #c9c9c9;
	background: url(../images/inputBackground.gif) repeat-x top left;
	margin: 0px 3px 0px 3px;
}
#questionnaire .short {
	width: 60px;
	font-size: 10px;
}
#questionnaire .long {
	width: 244px;
	margin: 2px 0px 10px 0px;
}
fieldset .wyslij {
	position: absolute;
	top: 210px;
	left: 40px;
	width: 150px; 
	height: 40px; 
	background: url(../images/wyslij.gif) no-repeat top left; 
	cursor: pointer;
	text-indent: -9999px;
	border: none;
}
fieldset .wyczyscAnkiete {
	position: absolute;
	top: 210px;
	left: 204px;
	width: 150px; 
	height: 40px; 
	background: url(../images/wyczysc.gif) no-repeat top left; 
	cursor: pointer;
	text-indent: -9999px;
	border: none;
}
p.success {
	width: 410px !important;
}
#main .content2 p.success {
    padding: 5px 17px 0px;
	text-align: justify;
	line-height: 18px;
}
#main .content2 p.success span {
    color: #000;
}
#main .content2 p.success span.info {
    color: #FF033E;
    font-size: 16px;
    font-weight: bold;
}
/* 
 * The state classes are a little bit complex, because of the doubble class bug in IE6
 * The state class looks like this:
 * 
 * .ui-radio-state[-checked][-disabled][-hover] or .ui-checkbox-state[-checked][-disabled][-hover]
 * 
 * Examples:
 * 
 * .ui-radio-state-checked (simply checked) 
 * .ui-radio-state-checked-hover (checked and hovered/focused)
 * .ui-radio-state-hover (unchecked and hovered/focused)
 * 
 */

.ui-radio-state-disabled,
.ui-radio-state-checked-disabled,
.ui-radio-state-disabled-hover,
.ui-radio-state-checked-disabled-hover {
	color: #999;
}
span.ui-checkbox,
span.ui-radio {
	display: block;
	float: left;
	width: 16px;
	height: 16px;
	background: url(../images/icon_checkbox.png) 0 -40px no-repeat;
}
span.ui-helper-hidden {
	display: none;
}
label {
	padding: 2px;
	
}
span.ui-radio-state-hover,
span.ui-checkbox-state-hover {
	background-position: 0 -114px;
}

span.ui-checkbox-state-checked {
	background-position: 0 -1px;
}

span.ui-checkbox-state-checked-hover {
	background-position: 0 -75px;
}
span.ui-radio-state-checked-disabled-hover,
span.ui-radio-state-checked-disabled,
span.ui-radio-state-checked {
	background-position: 0 -161px;
}


span.ui-radio-state-checked-hover {
	background-position: 0 -200px;
}
.ui-helper-hidden-accessible {
	position: absolute;
	left: -999em;
}