/*
 * Custom styling for IntenseDebate comments on the blog.
 */

/* Default font size should be slightly smaller than the main body text. */
@media all {
    #idc-container-parent #idc-container,
    #idc-container-parent #idc-container div,
    #idc-container-parent #idc-container .idc-text_noresize
    {font-size: 18px;}
}
@media all and (max-width:720px) {
    #idc-container-parent #idc-container,
    #idc-container-parent #idc-container div,
    #idc-container-parent #idc-container .idc-text_noresize
    {font-size: 17px;}
}
@media all and (max-width:680px) {
    #idc-container-parent #idc-container,
    #idc-container-parent #idc-container div,
     #idc-container-parent #idc-container .idc-text_noresize
    {font-size: 16px;}
}
@media all and (max-width:640px) {
    #idc-container-parent #idc-container,
    #idc-container-parent #idc-container div,
    #idc-container-parent #idc-container .idc-text_noresize
    {font-size: 15px;}
}
@media all and (max-width:600px) {
    #idc-container-parent #idc-container,
    #idc-container-parent #idc-container div,
    #idc-container-parent #idc-container .idc-text_noresize
    {font-size: 14px;}
}
@media all and (max-width:560px){
    #idc-container-parent #idc-container,
    #idc-container-parent #idc-container div,
    #idc-container-parent #idc-container .idc-text_noresize
    {font-size: 13px;}
}

/* Make the comment edit box match the body font. */
#idc-container-parent #idc-container .idc-text_noresize {
    font-family: "ff-tisa-web-pro", Georgia, serif;
}

/* Keep a good line height too. */
#idc-container-parent #idc-container, #idc-container-parent #idc-container div {
    line-height: 1.45em;
}

/* Timestamps and instructions should only be slightly smaller than that. */
#idc-container-parent #idc-container .idc-c .idc-time a, #idc-container-parent #idc-container .idc-c .idc-time {
    font-size: 90%;
    line-height: 1.45em;
}
#idc-container-parent #idc-container .idc-c-m .idc-form-info {
    font-size: 80%;
    line-height: 1.45em;
}
#idc-container-parent #idc-container .idc-thread_active {
    font-size: 80%;
    line-height: 1.45em;
}

/* The h3 should be styled like an h2 in the main content. Wish I could just make it an h2, but eh. */
#idc-container-parent #idc-container #IDCommentsHead h3 {
    font-size: 145%;
    margin: 2em 0 0.7em 0;
}

/* No border at the bottom of the comments section. */
#idc-container-parent #idc-container .idc-foot {
    border: none;
}

/* No background image on comment headers. Instead, a solid color. */
#idc-container-parent #idc-container .idc-c-h {
    background-image: none;
    background-color: rgba(154, 154, 154, 0.05);
    border-radius: 0.3em;
    padding: 0.4em;
}

/* Bold, sans-serif names. */
#idc-container-parent #idc-container .idc-i > *:first-child {
  font-family: "adelle-sans", Helvetica, Arial, sans-serif;
  font-weight: 700;
}

/* Hide the badge that shows FB/Twitter/WP/etc. */
#idc-container-parent #idc-container .idc-a-facebook {
    display: none;
}

/* Big margins between comment threads, with smaller margins within threads. */
#idc-container-parent #idc-container .idc-comments > .idc-thread {
    margin-top: 3em;
}
#idc-container-parent #idc-container .idc-comments > .idc-thread:first-child {
    margin-top: 1em;
}
#idc-container-parent #idc-container .idc-comments > .idc-thread .idc-thread {
    margin-top: 1em;
}

/* And for the comment box, which apparently is also a "thread", ignore the margins denoted above. */
#idc-container-parent #idc-container h3 + .idc-thread {
    margin-top: 0;
}

/* Slightly larger margins between the comment and the "Reply" buttons and such. */
#idc-container-parent #idc-container .idc-c-b {
    margin-top: 1em;
}

/* Avatars should have a border that's less bright. */
#idc-container-parent #idc-container .idc-avatar {
    background-color: #aaa;
}

/* Except for admins, which have a gold border. */
#idc-container-parent #idc-container .idc-admin .idc-avatar {
    background-color: #ad981f;
}

/* Vertically center the arrows for collapsible content at all text sizes. */
@media all {#idc-container-parent #idc-container .idc-collapselink_closed {background-position-y: 0px;}}
@media all and (max-width:720px){#idc-container-parent #idc-container .idc-collapselink_closed {background-position-y: -1px;}}
@media all and (max-width:680px){#idc-container-parent #idc-container .idc-collapselink_closed {background-position-y: -2px;}}
@media all and (max-width:640px){#idc-container-parent #idc-container .idc-collapselink_closed {background-position-y: -3px;}}
@media all and (max-width:600px){#idc-container-parent #idc-container .idc-collapselink_closed {background-position-y: -4px;}}
@media all and (max-width:560px){#idc-container-parent #idc-container .idc-collapselink_closed {background-position-y: -5px;}}

@media all {#idc-container-parent #idc-container .idc-collapselink {background-position-y: -38px;}}
@media all and (max-width:720px){#idc-container-parent #idc-container .idc-collapselink {background-position-y: -39px;}}
@media all and (max-width:680px){#idc-container-parent #idc-container .idc-collapselink {background-position-y: -40px;}}
@media all and (max-width:640px){#idc-container-parent #idc-container .idc-collapselink {background-position-y: -41px;}}
@media all and (max-width:600px){#idc-container-parent #idc-container .idc-collapselink {background-position-y: -42px;}}
@media all and (max-width:560px){#idc-container-parent #idc-container .idc-collapselink {background-position-y: -43px;}}

/* Hardcode in the size of the facebook login button so that it properly wraps to the next line on devices like the iPhone 6. */
#idc-container-parent #idc-container .idc-postnav-list li:last-child {
    width: 81px;
}