body {
	font-family: Verdana, Geneva, "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", sans-serif;
	text-align: left;
}


/********** FORMULARZE ********************************************************/

/* teksty informacyjne */
.form-loader span { padding-left: 5px; background: url(loader.gif) left center no-repeat; } /* tekst pojawiający się w czasie wysyłania formularza */
.form-failure { color: red; } /* tekst gdy wysłanie formularza nie powiodło się */
.form-success { color: green; } /* tekst gdy wysłanie formularza powiodło się */

/* teksty informacyjne przed i za polem */
form .info-before, form .info-after { font-size: 0.8em; color: #999;text-align: left; }
form .info-before { margin: 0.8em 0 0.2em 200px; }
form .info-after { margin: 0.4em 0 0.8em 200px; }
form .focus .info-before, form .focus .info-after { color: #666; }

/* tu ustawiamy szerokości elementów */
form { width: 395px; margin: 0 auto; padding: 0; } /* szerokość i wycentrowanie formularza */
form label.title { width: 100px; text-align: left;} /* szerokość tytułu inputa */
form input.type-text { width: 150px; text-align: left;} /* szerokość inputa typu text, number, email, date */
form textarea { width: 150px; } /* szerokość textarea */
form select { width: 150px; } /* szerokość select */
form small { display: block; padding: 5px 10px; width: 350px; }
/* specjalne ustawienia dla typu daterange: */
form .daterange-wrap .date-start { width: 210px; } /* div zawierający wszystko dla pierwszej daty */
form .daterange-wrap .date-end {  width: 210px; } /* div zawierający wszystko dla drugiej daty */
form .daterange-wrap div label.title {  width: 30px; }
form .daterange-wrap div input.date { width: 150px; }
form .daterange-wrap small { width: 230px; clear: both; position: relative; top: -17px; }

form fieldset { border: none; padding: 0; margin: 0; } /* pola pogrupowane są w elementy fieldset */
form fieldset.with-legend { border: 1px solid #ddd; padding: 20px; margin-bottom: 10px; } /* fieldset zawiereający element legend (tytuł fieldseta) */
form fieldset.with-legend legend { font-size: 0.82em; color: #666; } /* tytuł fieldseta */

form .fieldwrap { margin-bottom: 5px; clear: both; overflow: hidden; } /* to jest div "owijający" input, jego tytuł i informację o nim */
/* dla każdego typu pola mamy też specjalne klasy dla powyższego div'a: */
form .text-wrap {}
form .textarea-wrap {}
form .email-wrap {}
form .date-wrap {}
form .daterange-wrap {}
form .number-wrap {}
form .checkbox-wrap {}
form .select-wrap {}
form .file-wrap {}
form .infotext-wrap {}

form label.title { display: block; float: left; border-bottom: 1px dashed #aaa; color: #243956; } /* tytuł inputa */
form .focus label.title { border-bottom: 1px dashed #666; color: #000; } /* tytuł aktywnego inputa */
form .infotext-wrap label.title { width: auto; border: 0; }
form small { color: #666; background: #f6f6f6; }

/* informacje o stanie pola */
form label.message { font-size: 0.82em; display: inline-block; padding-left: 0.5em; } /* informacja o stanie inputa (czy wymagane, czy dobry format, etc.) */
form label.info {
	color: #AEF;
} /* informacja o stanie inputa (ten sam element co wyżej) w stanie informacyjnym */
form .focus label.info { color: #bbb; }
form label.error { color: red; } /* informacja o stanie inputa (ten sam element co wyżej) w stanie błędu (kolor czcionki powinien być taki sam jak wartość 'error_color' w pliku konfiguracyjnym formularza (sample_form.php)) */

/* inputy i typy pól */
form input.type-text { background: #f6f6f6; border: 1px solid #aaa; } /* input typu text (ta klasa objemuje pola typu: text, date, number, email) */
form .focus input.type-text { background: #ddd; border: 1px solid #666; font-size: 10px;}
form input.text { font-size: 11px;}
form input.date {}
form input.number {}
form input.email {}
form input.checkbox {}
form input.file {}
form textarea { background: #f6f6f6; border: 1px solid #aaa; }
form .focus textarea { background: #ddd; border: 1px solid #666; }
form select { background: #f6f6f6; border: 1px solid #aaa; }
form .focus select { background: #ddd; border: 1px solid #666; }

/* specjalne ustawienia dla typu daterange: */
form .daterange-wrap label.title { }
form .daterange-wrap .date-start { float: left; } /* div zawierający wszystko dla pierwszej daty */
form .daterange-wrap .date-end { float: left; } /* div zawierający wszystko dla drugiej daty */
form .daterange-wrap div label.title { border: none; text-align: right; padding-right: 5px; }
form .daterange-wrap div input.date {}
form .daterange-wrap div label.message { display: block; text-align: right; padding-right: 30px; }

/* specjalne pola zgrupowane (radios, checkboxes) */
form fieldset.group { border: none; padding: 0; margin-bottom: 20px; }
form fieldset.group legend { font-size: 1em; color: #555; border-bottom: 1px dashed #aaa; }
form fieldset.group .fieldwrap { margin: 5px 0 0 200px; }
form fieldset.group label.title { width: 280px;}
form fieldset.group label.message { padding-left: 500px;}

/* przyciski */
form .buttons { border: 1px solid #ddd; padding: 10px 15px; overflow: hidden; zoom: 1; }
form .buttons input { border: 1px solid #000; background: #ddd; padding: 4px 6px; }
form .buttons .submit { color: #000; font-weight: bold; float: left; }
form .buttons .reset { color: #999; float: right; }

#ui-datepicker-div { font-family: Verdana, Geneva, "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", sans-serif; font-size: 0.82em; } /* div zawierający kalendarzyk */

/* specjalne klasy różnych inputów */
form .strong label.title { font-weight: bold; }
form .wide label.title { width: 350px; float: right; border: 0; }
form .wide input { float: left; }
form .wide label.message { padding-left: 28px; }