/*   
Encouraged Commentary Base Styles
http://encouragedcommentary.com

This is a simple stylesheet with the basic styles and rules needed 
to style the utilities generated by encouraged commentary.

Author: Jim Jeffers
Author URI: http://donttrustthisguy.com

Version: 1.0
.
You may reuse these styles for your own purposes. It is advised that you paste the section 
into your own stylesheet and enhance them to your own taste.
.
*/

/*  KEEP OUR CSS CLEAN
    Some guidelines to follow:
    1. Break code down into sections.
    2. Keep your rules alphabetically sorted.
    3. Only put one selector per line for a block of rules that apply to multiple selectors.
    4. Indent your rules, only one rule per line.
        
        example:
        
        element#id,
        element.class {
            rule1: value;
            rule2: value;
            top: value;
        }
*/

/* =ENCOURAGED COMMENTARY
   ------------------------------------------------------ */
   /* These rules are just here for reference change them or remove them as you see fit. */
   .commentlist {
      margin-left: 60px;
   }
   
   /* I like to use absolute positioning to control the comment controls. If you want 
   to do this as well keep position: relative; for the 'comment' class as seen in this rule. */
   .comment {
      padding: 1em;
      position: relative;
   }

   .response {
      border-left: 1px solid #444;
      padding-left: 40px;
   }
   
   .current-comment {
      background: rgba(0,0,0,.1);
   }
   
   /* Styles for the 'respond' button. This button is a span with the id of 'comment-respond'. */
   span#comment-respond,
   .comment-reply,
   .comment-quote {
      background: #3b5e8e;
      color: #e5e5e5;
      cursor: pointer;
      display: block;
      font-family: arial, sans-serif;
      padding: 2px 5px;
      text-transform: lowercase;
      
      -webkit-border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -moz-border-radius: 5px;
   }
   
   /* Styles for the comment controls. */
   .comment-controls {
      bottom: 0;
      left: 420px;
      padding: 10px 20px;
      position: absolute;
      top: 0;
      width: 270px;
   }

   .comment-controls h6 {
      font-weight: bold;
   }
   
   .comment-controls div{
      clear: both;
   }
   
   .comment-controls ol {
      display: block;
      font-size: 0.875em;
   }
   
   /* Styles for the comment 'reply' and 'quote' buttons. */
   .comment-reply, 
   .comment-quote {
      background: rgba(0,0,0,.1);
      color: #aaa !important;
      font-size: 0.875em;
      left: -95px;
      position: absolute;
      text-decoration: none;
      top: 5px;
   }

   .comment-reply:hover, 
   .comment-quote:hover {
      background: rgba(0,0,0,.5) !important;
      color: #fff !important;
   }

   .comment-quote {
      left: -30px;
   }
   
   /* Styles for an individual list item in the comment controls */
   .comment-controls ol li {
      display: block;
      float: left;
      margin: 4px 8px 0 0;
      padding: 2px 0;
   }
   
   .comment-controls ol li a {
      background: #111;
      color: #999;
      display: block;
      font: normal normal normal 0.875em Arial, sans-serif;
      padding: 4px;
      text-decoration: none;
      
      -webkit-border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -moz-border-radius: 5px;
   }
   
   /* Highlight the current comment in the list of related comments. */
   .comment-controls ol li.current a {
      background: #f90;
      color: #333;
   }
   
   
   /* Styles for the preview container. */
   #encouraged-preview {
      color: #999;
      font-size: 0.875em;
      line-height: 1.25em;
      left: 470px;
      position: absolute;
      top: 133px;
      width: 400px;
   }
   
   /* Alternate height for large comments. */
   .extended {
      height: 300px;
   }
   
   /* Kind of important if you are using the preview with or without the lightbox */
   .encouraged-form {
      position: relative;
   }
   
   /* This is to style the opt out of quoting button. */
   #encouraged-comment-delete {
      left: 470px;
      position: absolute;
      top: 90px;
   }
   
   /* Lightbox Styles */
   #comment-lightbox {
      background: #fff;
      border: 10px solid #000;
      height: 620px;
      left: 50%;
      margin-left: -320px;
      margin-top: -240px;
      overflow: hidden;
      position: fixed;
      top: 50%;
      width: 640px;
      z-index: 2001;
   }
   
   /* This layer is the fade behind the lightbox */
   #comment-lightbox-background {
      background: #000;
      height: 100%;
      left: 0;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 2000;
   }
   
   /* All of the work below here is to restyle the comment form when it is pulled into the lightbox. */
   #comment-lightbox .encouraged-form {
      padding: 10px;
   }
   
   #comment-lightbox .encouraged-form label {
      color: #000;
      font-size: 0.75em;
   }
   
   #comment-lightbox .encouraged-form #comment {
      height: 290px;
      width: 290px;
   }
   
   #comment-lightbox .encouraged-form #encouraged-preview {
      background: #fff;
      height: 430px;
      left: 330px;
      overflow: auto;
      padding: 10px;
      top: 30px;
      width: 290px;
   }
   
   #comment-lightbox #encouraged-comment-delete {
      padding: 4px 0 0 0;
      top: 0;
      left: 330px;
   }
   
   /* This styling is applied to the close button that is automatically generated when the lightbox is called. */
   #encouraged-comment-lightbox-toggle {
      background: #000;
      color: #fff;
      display: block;
      right: 0;
      position: absolute;
      padding: 0 0 4px 4px;
      top: 0;
   }