/* feedback */

@import "variables";

#wrapper {
		  background: #eee;
		  font-family: "Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
		  font-size: 12px;
		  width: 450px;
		  margin:  0px auto;
		  text-align: left;
		  border: 1px solid #ddd;
		  padding: 0px;
		  .border-radius (8px);
		  #header_feedback h1 {
					 font-size: 17px;
					 color: #CF4454;
					 border-bottom: 2px solid #ccc;
					 text-align: left !important;
					 padding: 5px 10px;
		  }
		  form {
					 padding: 15px 0px;
					 .ctrlHolder {
								color: #444;
								font-size: 14px;
								font-weight: bold;
								padding: 0px 0px 10px 15px;
								width: 99%;
								label {
										  display: block; padding-bottom: 3px;
										  em {color: red;}
										  .priority {
													 display: inline;
													 margin-right: 0.1%;
													 margin-left: 1%;
													 position: relative;
													 top: 5px;
										  }
								}
								ul.category {
										  list-style: none;
										  text-align: center;
										  li {
													 display: inline;
													 height: 40px;
													 background-position: center left;
													 cursor: pointer;
													 padding: 10px 0.4% 10px 0;
													 margin: 0px 0.5% 0px 1%;
													 img {
																position: relative;
																top: 20px;
																width: 11px;
																height: 7px;
																margin: 0;
																display: none;
													 }
													 #problem img {right: 10%;}
													 #idea img {right: 6.25%;}
													 #question img {right: 10%;}
													 #praise img {right: 12.5%;}
													 div {
																display: inline;
																margin: 0px 1% 0px 0;
																padding: 0px 0px 5px 5%;
																height: 40px;
																font-weight: bold;
																color: #007;
																.problem {background: url('../../img/icon/feedback-problem.png') no-repeat;}
																.idea {background: url('../../img/icon/feedback-idea.png') no-repeat;}
																.question {background: url('../../img/icon/feedback-question.png') no-repeat;}
																.praise {background: url('../../img/icon/feedback-praise.png') no-repeat;}
													 }
													 &:hover {
																background-color: #fff;
																padding: 10px 0.6% 10px 0px;
																.border-radius (7px);
																div {text-decoration: underline;}
													 }
										  }	
								}
					 }
					 .list {width: 100%;padding: 0px 0px 0px 0px;}
		  }
		  .selected {
					 background-color: #fff;
					 background-position: center left;
					 cursor: pointer;
					 padding: 10px 0.6% 10px 0.6%;
					 .border-radius(7px);
		  }
		  input {
					 border: 1px solid #ccc;
					 font-size: 12px;
					 padding: 3px 5px;
					 .border-radius(7px);
					 #priority-input {
								position: relative;
								top: 4px;
								display: inline;
								height: 22px;
								width: 100px;
								.border-radius(7px);
					 }
		  }
		  select {
					 border: none;
					 padding: 0px 0px 0px 22px;
					 overflow: hidden;
					 width: 38px;
					 font-size: 14px;
					 margin-right: 1%;
		  }
		  option {
					 background: #eee;
					 padding: 0px 0px 0px 20px;
					 margin-top: 2px;
					 height: 22px;
					 vertical-align: middle;
					 .border-radius(0px);
					 .happy {background: url('../../img/icon/feedback-happy.png') no-repeat;}
					 .silly {background: url('../../img/icon/feedback-silly.png') no-repeat;}
					 .indifferent {background: url('../../img/icon/feedback-indifferent.png') no-repeat;}
					 .sad {background: url('../../img/icon/feedback-sad.png') no-repeat;}
		  }
		  
		  .ticket_data {
					 .border-radius(0px);
					 padding-top: 5px;
		  			 margin-top: 0px;
					 input {
								width: 92%;
								height: 30px;
								.border-radius(7px);
					 }
					 textarea {
								width: 92%;
								padding: 3px 5px;
								height: 70px;
								border: 1px solid #ccc;
								.border-radius(7px);
					 }
		  }
		  .buttonHolder {
					 border-top: 1px solid #ccc;
					 .border-radius(0px);
					 padding-top: 5px;
					 margin-top: 5px;
					 text-align: center;
					 button {
								color: #ffffcc;
								font-weight: bold;
								cursor: pointer;
								overflow: visible;
								font-size: 100%;
								padding: 4px 8px;
								background-color: #99cc66;
								border: 1px solid #75a848;
								&:hover {
										  text-decoration: none;
										  background-color: #90c55c;
										  border-color: #54822c;
										  }
								.disabled {
										  background-color: gray;
										  border-color: #54822c;
								}
					 }
		  }
}