@import "compass/css3";

@charset "UTF-8";
/* Feedback Variables */
$FBButtonHeight : 40px;
$FBButtonWidth : 140px;
$FBFormWidth : 250px;
$FBFormHeight : 330px;
$FBInputHeight: 32px;
$FBBorderRadius: 4px;
$FBColor: rgb(84, 183, 219);
$FBButtonTextColor: rgb(255,255,255);
$FBHilight: rgb(204,204,204);

/* Utility Classes */
.roundall {
  border-radius: $FBBorderRadius;
}

/* Feedback Classes */
.feedback {
  position: fixed;  
  height: $FBButtonHeight + $FBFormHeight;  
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;  
}

.feedbacklink {
  height: $FBButtonHeight;
  width: $FBButtonWidth;  
  color: $FBButtonTextColor;
  display: block;
  cursor: pointer;  
  text-align: center;
  line-height: $FBButtonHeight;    
  background-color: $FBColor;   
}

#feedbackform {
  background-color: white;
  width: $FBFormWidth;
  height: $FBFormHeight;
  clear: both;
  padding: 15px;    
  label {
    display: block;
    margin: 5px 0;
  } 
  input {
    height: $FBInputHeight;
    padding: 0 5px;
    width: 100%;
    border: 1px solid $FBHilight;
  }
  input:focus, textarea:focus {
    outline: 1px solid $FBColor; 
    -webkit-box-shadow: 0px 0px 2px $FBColor; /* Looks weird in -moz */   
  }
  textarea {
    width: 100%;
    padding: 5px 0 5px 5px; /*right padding needs to be 0 */
    border: 1px solid $FBHilight;
    resize: vertical;
  }
  input[type=submit] {
    margin: 10px 0;
    background-color: $FBColor;
    border: none;
    color: $FBButtonTextColor;
  }  
}

/*Position specific styling */
.feedback-bottom {
  &.feedback-hide,
  &.feedback-sent {
    bottom: - $FBFormHeight;
  }
  &.feedback-show {
    bottom: 0; 
  }
}

.feedback-top {
  &.feedback-hide,
  &.feedback-sent {
    top: - $FBFormHeight;  
  }
  &.feedback-show {
    top: 0;
  }
}

.feedback-right {
  right: 0;  
  .feedbacklink {
    float: right;
 }
}

.feedback-left {
  left: 0;  
}

.feedback-right {
  right: 0;  
}

/*Hide form after submission */
.feedback-top.feedback-hideform {
   top: - $FBButtonHeight - $FBFormHeight;
}

.feedback-bottom.feedback-hideform {
   bottom: - $FBButtonHeight - $FBFormHeight;;  
}

/*Corner styling */
.feedback-right.feedback-bottom {
   a, #feedbackform {
    border-radius: $FBBorderRadius 0 0 0;
  } 
}

.feedback-right.feedback-top {
   a, #feedbackform {
    border-radius: 0 0 0 $FBBorderRadius;
  } 
}

.feedback-left.feedback-bottom {
   a, #feedbackform {
    border-radius: 0 $FBBorderRadius 0 0;
  } 
}

.feedback-left.feedback-top {
   a, #feedbackform {
    border-radius: 0 0 $FBBorderRadius 0;
  } 
}

/*Arrow integration */
.feedback-top.feedback-hide .feedbacklink::before,
.feedback-bottom.feedback-show .feedbacklink::before {
  content: "↓ ";
  
}
.feedback-bottom.feedback-hide .feedbacklink::before,
.feedback-top.feedback-show .feedbacklink::before {
  content: "↑ ";
}


.feedback.feedback-sent .feedbacklink::before {
  content: "";
}

.instructions {
  position: fixed;
  bottom: 0px;
  left: 43%;
  background: white;
  color: black;
  width: 350px;
  padding: 0 20px; 
  border-radius: $FBBorderRadius;  
  h1 {
    text-align: center;
    color: $FBColor;
  }
}