/*
	CSS file for HTML forms

	(c) 2008 Jiri Lysek
	jlx@seznam.cz
*/

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

form {
	margin: 0px 0px 10px 0px;
	padding: 0px;
}

form br, form hr, .simple_form br, .simple_form hr, .wide_form br, .wide_form hr, .table_form hr, .table_form br {
	clear: both;
}

form h1, form h2 {
	margin: 12px 0px 10px 10px;
	text-decoration: underline;
}

form hr {
	border: none;
	border-bottom: 1px solid #25252D;
	height: 1px;
}

.simple_form {
	display: block;
	width: 480px;
	border: 1px solid;
	background-color: #E7E8EA;
}

.table_form, .wide_form {
	display: block;
	width: 100%;
	border: 1px solid;
	background-color: #E7E8EA;
}

.wide_form .simple_form {
	width: 470px;
}

.left_part, .right_part {
	width: 470px;
}

.left_part {
	float: left;
	margin: 0px 0px 10px 10px;
}

.right_part {
	float: right;
	margin: 0px 10px 10px 0px;
}

.form_error {
	border: 2px solid #F4A186;
	background: url('../images/incomplete.png') 5px 5px no-repeat;
	background-color: #FFC3A0;
	padding: 5px 5px 5px 35px;
	font-weight: bold;
	margin: 15px;
}

.form_alert {
	border: 2px solid #FFD284;
	background: url('../images/icon_alert.png') 5px 5px no-repeat;
	background-color: #FFF0A0;
	padding: 5px 5px 5px 35px;
	font-weight: bold;
	margin: 15px;
}

.form_info {
	border: 2px solid #B0C5E3;
	background: url('../images/info.png') 5px 5px no-repeat;
	background-color: #BCD1EF;
	padding: 5px 5px 5px 35px;
	font-weight: bold;
	margin: 15px;
}

.form_highlight {
	background-color: #E0E1E2 !important;
	border-color: #6E6E6E;
	box-shadow: 0px 0px 2px 2px #F9CA81 !important;
}

.form_success, .form_ok {
	border: 2px solid #9AD28D;
	background: url('../images/done.png') 5px 5px no-repeat;
	background-color: #BAE0C3;
	padding: 5px 5px 5px 35px;
	font-weight: bold;
	margin: 15px;
}

form fieldset {
	margin: 5px;
}

form fieldset legend {
	font-weight: bold;
}

form img {
	margin: 0px 0px 10px 0px;
}

/* ========================================================================== */

.form_header {
	padding: 5px;
	margin: 0px 0px 5px 0px;
	background-color: #25252D;
	color: #E6E7EB;
}

.simple_form .form_detail {
	width: 460px;
	clear: left;
	text-align: right;
	display: block;
	padding-bottom: 5px;
	margin: 0px;
	font-size: 10px;
}

.wide_form .form_detail {
	width: 870px;
	clear: left;
	text-align: right;
	display: block;
	padding-bottom: 5px;
	margin: 0px;
	font-size: 10px;
}

form .input_container {
	float: left;
	margin: 0px;
	padding: 2px;
}

form .input_container.form_input {
	margin: 0px 0px 5px 0px;
}

form .no_label {
	margin-left: 200px;
}

textarea, input, select {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #CFD0D1;
	border: 1px solid #888888;
	padding: 2px;
}

select, select.visible_input {
	width: 255px;
	margin-bottom: 5px;
	padding: 1px;
}

select optgroup {
	font-style: normal;
	font-size: 12px;
	padding: 0px;
	margin: 0px;
}

select option.divider {
	height: 0px;
	font-size: 0px;
	border: 1px inset #252525;
	margin: 2px;
}

select option, select optgroup option {
	margin-top: 2px;
	font-size: 12px;
	margin: 0px;
}

button, input[type=button], input[type=reset], input[type=submit] {
	padding: 0px 8px 0px 8px;
	height: 27px;
	line-height: 24px;
	background: url('../images/button.png') 0px -1px repeat-x;
	margin-right: 10px;
	border: 1px dashed #7D7D7D;
	cursor: pointer;
}

button {
	margin-bottom: 5px;
}

form button {
	margin-bottom: 0px;
}

input[type=submit], input[type=button], input[type=reset] {
	float: right;
	margin-bottom: 10px;
}

button:active, input[type=button]:active, input[type=reset]:active, input[type=submit]:active {
	background: url('../images/button_active.png') 0px -1px repeat-x;
	border: 1px dashed #575757;
}

.simple_form textarea {
	width: 250px;
}

.wide_form textarea {
	width: 710px;
}

.form_input {
	display: block;
	float: left;
	margin: 0px 0px 5px 0px;
	padding: 2px;
	border: 1px solid #888888;
	background-color: #CFD0D1;
}

.wide_form .form_input {
	width: 710px;
}

.simple_form .form_input {
	width: 250px;
}

input[type=text], input[type=email], input[type=number], input[type=password], input[type=file], input[type=color], .visible_input, textarea {
	display: block;
	width: 250px;
	float: left;
	margin-bottom: 5px;
	padding-top: 2px;
	background-color: #CFD0D1;
}

label {
	display: block;
	text-align: right;
	width: 180px;
	padding-right: 20px;
	padding-top: 3px;
	float: left;
	height: 20px;
}

table td label {
	width: auto;
	height: auto;
	float: none;
	padding: 0px;
	display: inline;
	margin: 0px;
}

table td label img {
	display: inline;
	padding: 0px;
	margin: 0px;
}

label.mandatory {
	font-weight: bold;
}

label.lang_field {
	background-repeat: no-repeat;
	background-position: 182px 3px;
}

form .tiny_input {
	width: 15px;
	margin-right: 2px;
}

form .tiny_input[type=number] {
	width: 35px;
}

form .small_input {
	width: 25px;
	margin-right: 2px;
}

form .small_input[type=number] {
	width: 45px;
}

form .medium_input {
	width: 40px;
	margin-right: 2px;
}

form .medium_input[type=number] {
	width: 60px;
}

form .large_input {
	width: 710px;
}

form .input_container {
	width: 265px;
}

input[type=checkbox], input[type=radio], .visible_checkbox {
	float: left;
	width: 255px;
	margin-bottom: 5px;
}

.simple_form .submit, .simple_form .form_submit {
	display: block;
	width: 250px;
	text-align: right;
	margin: 10px 10px 0px 10px;
}

.wide_form .submit, .wide_form .form_submit {
	display: block;
	width: 500px;
	text-align: right;
}

.simple_form .form_help {
	display: block;
	width: 250px;
	float: left;
	margin: 0px 0px 5px 200px;
	padding: 2px;
	border-bottom: 1px dashed #888888;
}

.wide_form .form_help {
	display: block;
	width: 710px;
	float: left;
	margin: 0px 0px 5px 200px;
	padding: 2px;
	border-bottom: 1px dashed #888888;
}

.wide_form .input_container {
	width: 710px;
}

.wide_form .left_part .input_container, .wide_form .right_part .input_container {
	width: 265px;
}

.input_container label, .input_container input[type=checkbox], .input_container input[type=radio] {
	width: auto;
}

.form_message {
	border: 2px solid red;
	font-size: 12px;
	padding: 5px;
	width: 435px;
}

form .inline_input, form .inline_label {
	width: auto;
	padding: 0px;
}

textarea.monospace {
	font-family: Courier New, Courier, monospace;
}

textarea.error, input.error, select.error {
	background-color: #FFC3A0;
	background-image: url('../images/icon_error.png');
	background-position: top right;
	background-repeat: no-repeat;
	padding: 2px;
}

textarea.alert, input.alert, select.alert {
	background-color: #FFF0A0;
	background-image: url('../images/icon_alert.png');
	background-position: top right;
	background-repeat: no-repeat;
	padding: 2px;
}

table label, table input[type=checkbox], table input[type=radio] {
	width: auto;
	text-align: left;
}

button.plus input[type=button].plus, button.minus, input[type=button].minus {
	border: 0px;
	width: 20px;
	height: 20px;
	padding: 0px;
}

button.plus, input[type=button].plus {
	background: url('../images/plus.png');
}

button.minus, input[type=button].minus {
	background: url('../images/minus.png');
}

form .input {
	float: left;
	margin-bottom: 5px;
	padding-top: 2px;
	display: block;
}

/* vybrani obrazku */

form .img_select {
	float: left;
	border: 1px solid #888888;
	background-color: #CFD0D1;
	margin-bottom: 5px;
	padding-bottom: 5px;
}

form .img_select.error {	background-color: #FFC3A0;	}

form .img_select .buttons {
	width: 100px;
	float: right;
	margin: 10px;
}

form .img_select .buttons input {
	margin: 0px 0px 10px 0px;
}

form .img_select .image_container {
	float: left;
	display: block;
	position: relative;
	border: 2px solid #888888;
	margin: 8px 0px 0px 8px;
	padding: 0px;
	width: 120px;
	height: 90px;
	line-height: 90px;
	text-align: center;
}

form .img_select .image_container.highlight {
	border: 2px solid #FDC056;
}

form .img_select .image_container img {
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}

form .img_select .image_container .button_container {
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
}

form .img_select .image_container .button_container span, form .img_select .image_container .button_container a {
	display: block;
	padding: 2px;
	margin: 0px 3px 3px 0px;
	width: 20px;
	height: 20px;
	cursor: pointer;
	float: left;
	background-position: center center;
	border-radius: 3px;
	opacity: 0.8;
}

form .img_select .image_container:hover .button_container span, form .img_select .image_container:hover .button_container a {
	background-color: #CFD0D1;
}

form .img_select .image_container .button_container span.delete {
	position: absolute;
	bottom: 0px;
	left: 0px;
}

form .img_select .image_container .button_container span:hover, form .img_select .image_container .button_container a:hover {
	background-color: #FDC056;
	opacity: 1;
}

form .img_select .buttons input {
	margin: 0px 0px 10px 0px;
}

.wide_form .img_select {
	width: 714px;
}

.simple_form .img_select {
	width: 250px;
}

.table_form .img_select {
	width: 100%;
}

/* vybrani souboru */

form .file_select {
	float: left;
	border: 1px solid #888888;
	background-color: #CFD0D1;
	margin-bottom: 5px;
}

form .file_select.error {	background-color: #FFC3A0;	}

form .file_select .buttons {
	width: 100px;
	float: right;
	margin: 10px;
}

form .file_select .buttons input {
	margin: 0px 0px 10px 0px;
}

form .file_select span {
	cursor: pointer;
}

form .file_select .files {
	float: left;
}

form .file_select .file_container {
	display: block;
	height: 30px;
	line-height: 30px;
}

form .file_select .file_container .button_container {
	float: left;
}

form .file_select .file_container .button_container span {
	width: 14px;
	height: 20px;
	float: left;
	display: block;
	padding: 2px;
	background-position: center;
}

form .file_select .file_container .file {
	margin-left: 10px;
}

form .file_select .file_container .button_container span.delete {
	width: 18px;
}

.wide_form .file_select {
	width: 714px;
}

.simple_form .file_select {
	width: 250px;
}

/* spolecne pro vyber */

.simple_form .file_select .container, .simple_form .img_select .container {
	float: left;
	width: 150px;
}

.wide_form .file_select .container, .wide_form .img_select .container {
	float: left;
	width: 550px;
}

.one_line {
	height: 22px;
	margin: 0px 0px 0px 0px;
	padding: 0px;
}

.one_line input[type=button], .one_line input[type=reset], .one_line input[type=submit], .one_line button {
	height: 22px;
	float: left;
	margin: 0px 0px 0px 2px;
}

.one_line input[type=text] {
	height: 16px;
	float: left;
}

.one_line select {
	height: 22px;
	float: left;
}

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

.ul_form .ul_progress {
}

.ul_form .ul_progress .bar_cont {
	margin: 2px;
}

.ul_form .ul_progress .bar {
	font-size: 0;
	width: 0%;
	height: 6px;
	border: 1px solid #000000;
	border-radius: 2px;
	background-color: #B0C5E3;
	clear: both;
}

.ul_form .ul_progress .filename {
	float: left;
	width: 80%;
	display: block;
	overflow: hidden;
}

.ul_form .ul_progress .status{
	float: right;
	width: 20%;
	display: block;
	text-align: right;
}