/* ================================================================================== */
/*                                                                                    */
/*                                 STYLE-FEEDBACK.CSS                                 */
/*                                                                                    */																 
/* ================================================================================== */


#feedback-button {
	position:fixed;
	left:0;
	bottom:0;
	width:60px;
	height:60px;
	background:#ffc000;
	background:rgba(0,0,0,0.05);
	border-radius:0 30px 0 0;
	cursor:e-resize;
	-webkit-transition:100ms all;
	transition:100ms all;
	color:rgba(0,0,0,0.25);
	z-index:200;
	}

/* To hide feedback button after feedback submitted:
body.feedback-done #feedback-button {
	display:none;
	}
*/

#feedback-button:hover {
	background:black;
	color:#ffc000;
	width:240px;
	}

body.feedback-done #feedback-button:hover {
	width:300px;
	}

#feedback-button:before {
	position:absolute;
	left:0;
	width:60px;
	text-align:center;
	font-family:'FontAwesome';
	content:"\f075";
	font-size:24px;
	line-height:40px;
	}

#feedback-button:hover:before {
	left:6px;
	font-size:30px;
	line-height:60px;
	}
	
#feedback-button:after {
	position:absolute;
	top:40px;
	left:0;
	width:60px;
	text-align:center;
	content:"feedback";
	font-size:12px;
	line-height:20px;
	}

#feedback-button:hover:after {
	top:20px;
	left:64px;
	text-align:left;
	font-size:24px;
	width:auto;
	content:"Send feedback";
	}

/* cute. need to extend width of box
body.feedback-done #feedback-button:hover:after {
	content:"Send more feedback";
	}
*/
	
#feedback {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background:white;
	transition: opacity 0.5s;
	display:none;
	z-index:1000;
	}

#feedback.show, #feedback.hiding {
	display:block;
	}

#feedback.hiding.fade {
	opacity:0;
	}
	
#feedback-fade {
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background:rgba(255,255,255,0.9);
	transition:background 3s;
	}

#feedback.hiding #feedback-fade {
	background:rgba(255,255,255,0);
	}

#feedback-sent {
	display:block;
	position:absolute;
	top:200px;
	left:10%;
	width:80%;
	padding:60px 24px;
	height:auto;
	min-height:114px;
	border-radius:12px;
	background:white;
	box-sizing:border-box;
	line-height:1.5em;
	text-align:center;
	font-size:24px;
	background:white;
	color:black;
	z-index:2;
	border:1px solid rgba(0,0,0,0.2);
	}

#feedback-box {
	display:block;
	position:relative;
	left:0;
	z-index:3;
	width:100%;
	margin:auto;
	padding:0;
	border:0;
	height:auto;
	background:white;
	transition:left 0.33s;
	}

#feedback.hiding #feedback-box {
	left:100%;
	}

#feedback-header {
	display:block;
	position:relative;	/* for cancel x button */
	box-sizing:border-box;
	height:60px;
	width:100%;
	background:black;
	color:#ffc000;
	text-align:center;
	line-height:60px;
	font-size:24px;
	font-family:'Source sans pro',arial;
	}

#feedback-x {
	position:absolute;
	top:0;
	right:0;
	display:block;
	width:60px;
	height:60px;
	line-height:60px;
	border-radius:6px 0 0 0;
	border:none;
	color:white;
	text-align:center;
	cursor:pointer;
	font-size:18px;
	}

#feedback-x .fa {
	margin:0;
	}

#feedback-x:hover {
	background:#ffc000;
	color:black;
	}

#feedback-intro {
	display:block;
	box-sizing:border-box;
	width:100%;
	min-height:60px;
	margin:0;
	padding:12px 36px;
	font-size:18px;
	line-height:1.4em;
	color:#444;
	border-bottom:1px dotted #ccc;
	}

#feedback-intro a {
	border-bottom:1px dotted gray;
	}

#feedback-input, textarea#feedback-input {
	display:block;
	margin:0;
	box-sizing:border-box;
	width:100%;
	height:auto;
	min-height:200px;
	padding:24px 36px;
	outline:none;
	overflow: auto;
	border:0;
	font-family:'Source Sans Pro',arial;
	font-size:20px;
	color:black;
	line-height:1.4em;
	background:white;
	resize:none;
	}

#feedback-input::placeholder {
	font-family:'Source Sans Pro',arial;
	}
	
#feedback-footer {
	display:block;
	box-sizing:border-box;
	height:60px;
	width:100%;
	padding:12px;
	text-align:right;
	border-top:1px dotted #ccc;
	border-bottom:1px solid #aaa;
	}

#feedback-cancel, #feedback-submit {
	display:inline-block;
	width:90px;
	height:36px;
	box-sizing:border-box;
	text-align:center;
	font-size:21px;
	line-height:36px;
	border-radius:6px;
	color:black;
	cursor:pointer;
	}

#feedback-cancel {			
	margin-right:6px;
	color:#aaa;
	}

#feedback-cancel:hover, #feedback-submit:hover {
	background:#ffc000;
	color:black;
	}	

@media (min-width:600px) {
	#feedback-button {
		width:80px;
		height:90px;
		border-radius:0 60px 0 0;
		background:transparent;
	}
	#feedback-button:before {
		font-size:32px;
		padding:0;
		width:64px;
		top:32px;
		line-height:32px;
	}
	#feedback-button:hover:before {
		top:18px;
		left:0;
		font-size:32px;
		line-height:62px;
	}
	#feedback-button:after {
		top:64px;
		width:64px;
	}
	#feedback-button:hover:after {
		top:40px;
	}
}

@media (min-width:641px) {
	#feedback {
		top:120px;
	}
	#feedback-fade {
		background:rgba(0,0,0,0.4);
	}

	#feedback-sent {
		width:600px;
		left:50%;
		margin-left:-300px;
	}

	#feedback-box {	
		width:640px;
		border-radius:12px;
		box-shadow:0 6px 48px 12px rgba(0,0,0,0.33);
	}
	#feedback-header {
		padding-left:36px;
		text-align:left;
		border-radius:12px 12px 0 0;
	}
	#feedback-footer {
		border-bottom:none;
		border-radius:0 0 12px 12px;
	}
}

@media (min-width:1024px) {
	#feedback-button {
		width:100px;
		height:120px;
		border-radius:0 80px 0 0;
	}
	#feedback-button:hover {
		width:320px;
	}
	#feedback-button:before {
		font-size:40px;
		padding:0;
		width:86px;
		top:48px;
		line-height:48px;
	}
	#feedback-button:hover:before {
		top:48px;
		font-size:40px;
		line-height:48px;
	}
	#feedback-button:after {
		top:94px;
		width:86px;
	}
	#feedback-button:hover:after {
		top:62px;
		left:82px;
		font-size:28px;
	}
}

@media (min-width:1280px) {
	#feedback-button {
		width:120px;
		border-radius:0 100px 0 0;

	}
	#feedback-button:before {
		width:100px;
	}
	#feedback-button:after {
		width:100px;
	}
}

/* For guide */
.guide #feedback-button {
	bottom:50px;
	height:50px;
	background:transparent;
	}

.guide #feedback-button:before {
	color:rgba(0,0,0,.333);
	font-size:30px;
	}

.guide #feedback-button:after {
	display:none;
	}

/*.guide #guide.show ~ #feedback-button */
.tab-no-back #feedback-button {
	bottom:0;
	color:#999;
	height:50px;
	}

/*.guide #guide.show ~ #feedback-button:before */ 
.tab-no-back #feedback-button:before {
	line-height:45px;
	font-size:30px;
	}

/*.guide #guide.show ~ #feedback-button:after */
.tab-no-back #feedback-button:after {
	display:none;
	}

.guide #feedback-input, .guide textarea#feedback-input {
	min-height:180px;
	}

@media (min-width:600px) {
	.guide #feedback-button {
		height:50px;
	}
	.guide #feedback-button:before {
		top:0;
	}
}