#feedback-button,
#feedback-prompt {
	position: fixed;
	bottom: 3px;
	right: 10px;
	margin: 0;	/* To override .sending in "notifications.css""... */
	border: 1px solid #b2b2b2;

	/* Background is for the button. The prompt gets an overridden image. */
	background: #f1f1f1 url('../images/flat_icons/doublearrow-up.png') no-repeat 95% center;
}

#feedback-button {
	width: 180px;	/* How to get it dynamically? It's not a big problem - if the text is longer (e.g., in Polish), the button expands nicely to two lines. */
}

#feedback-prompt {
	overflow: hidden;	/* Important for animation (when the height is being manipulated). */
	background-image: url('../images/flat_icons/doublearrow-down.png');
	background-position: 95% 16px;
	padding: 12px;
	width: 300px;
}

#feedback-button h2,
#feedback-prompt h2 {
	width: auto;	/* Override global h2 width: 100%. */
	float: none;	/* Override global h2 float. */
	margin: 0;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;	/* Because collapsing happens upon clicking. */
}

#feedback-button h2 {
	margin: 0 12px;
	padding: 8px 0;
}

#feedback-prompt h2 {
	margin: 0 0 6px;
	padding: 3px 0 5px 4px;	/* The 4px offset seems a bit weird, but it is what I see in the design. */
}

#feedback-prompt p a {
	text-decoration: none;
	color: #1179bf;
	font-size: 14px;
}

/* All blocks of various feedback states hidden by default. */
#feedback-prompt > div,
#feedback-prompt form {
	display: none;
}

/* Define which blocks are visible in which states. */
#feedback-prompt.unprepared form,
#feedback-prompt.data_collection_requested form,
#feedback-prompt.sending .sending_indicator,
#feedback-prompt.sent_success .sent_info_success,
#feedback-prompt.sent_failure .sent_info_failure {
	display: block;
}

#feedback-prompt form textarea {
	border: 1px solid #b2b2b2;	/* The same colour as #feedback-prompt border. */
	background: #ffffff;
	padding: 7px;
	width: 282px;	/* For browsers that do not understand "calc", assume 300px #feedback-prompt width. */
	width: calc(100% - 2*2px - 2*7px);	/* 2*2px border - 2*7px padding. */
	height: 140px;
}

#feedback-prompt form button {
	border: none;	/* To override the default browser button borders. */
	border-radius: 4px 4px;
	background: #4c6684;
	padding: 15px 0;
	width: 100%;
	color: #ffffff;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
}

#feedback-prompt form button.disabled {
	background: #808080;
	cursor: default;
	outline: none;
}

#feedback-prompt div,
#feedback-prompt p {
	margin: 18px 0;
	text-align: center;
	color: #808080;
	font-size: 14px;
}

#feedback-prompt form p {
	margin: 8px 0 12px;	/* Below the textarea. Odd margins because of the attachment icon. */
	text-align: left;
	color: #666666;
	font-size: 12px;
}

#feedback-prompt form p img {
	margin-right: 4px;
	vertical-align: middle;
}

#feedback-prompt .sending_indicator,
#feedback-prompt .sent_info_success,
#feedback-prompt .sent_info_failure {
	margin-top: 45px;
}

#feedback-prompt .email_info .email_input_field {
	display: none;
	outline: none;
	margin: 0;
	vertical-align:middle;
}

#feedback-prompt .email_info {
	display: block;
	text-align: left;
	padding-bottom: 10px;
}

#feedback-prompt #edit_email_button {
	padding: 0;
	border: none;
}

#feedback-prompt .user_email_input.invalid {
	outline: none;
    border: 1px solid #be1e2d;
}

#feedback-prompt .saving_email,
#feedback-prompt .email_not_saved {
	display: none;
}

#feedback-prompt .email_info .email_not_saved,
#feedback-prompt .email_info .email_not_specified {
	color: red;
}

#feedback-prompt .saving_email.visible {
	display: inline-block;
	margin: 0;
}

#feedback-prompt .user_email_input,
#feedback-prompt .email_info .user_email_submit {
	border:1px solid #b2b2b2;
	position:relative;
	float:left;
}
	
#feedback-prompt .user_email_input {
    border-radius:3px 0px 0px 3px;
    border-right:none;
    padding:5px 4px 6px 7px;
    outline:none;
}

#feedback-prompt .email_info .user_email_submit {
	border-left:none;
	padding: 7px 4px 8px 7px;
	margin: 0px 0px -8px -4px;
	border-radius: 0px 3px 3px 0px;
}