/*
 * SDE Article Comments
 *  
 * Comments are placed at bottom of every article (only when editor have deactivated them)
 * in the related content.
 *
 * http://svn.sueddeutsche.de/repos/users_sde/jduerr/layouts/comments/comments.css
 *
 * @project    Sueddeutsche.de
 * @package    sde_modules_comments
 * @copyright  Sueddeutsche.de, (c) 2011
 * @author     Jochen Duerr <jochen.duerr@sueddeutsche.de>
 * @version    $Id$
 * @url        $URL$
*/

#comments {
    width: 560px;
}

/*
 * @section :: icon for comments
*/

#comments .icon {
  background: url('/app/service/integration/css/sprite-comments.png') no-repeat scroll 0 0 transparent;
  text-transform: none;
}

/*
 * @section :: write comment / squeal comment
*/

#comments .discuss {
    background: none no-repeat 0 0 #ecebe6;
    padding: 1.5em 0.75em;
}

#comments span.datetime {
    margin-left: 0.7em;
}

#comments .discuss.answer,
#comments .comment.squeal {
    background: none no-repeat 0 0 transparent;
    margin: 0;
    padding: 0em 1.5em 2em 1.5em;
    position: relative;
}

#comments .select + .comment.answer,
#comments .select + .discuss.answer,
#comments .select + .comment.squeal {
    border-bottom: none;
    border-top: 1px solid #ccc;
    box-shadow: inset 0 8px 8px -7px #ccc;
    -moz-box-shadow: inset 0 8px 8px -7px #ccc;
    -webkit-box-shadow: inset 0 8px 8px -7px #ccc;
    padding-top: 2.0em;
}

#comments .select + .comment.answer .comment.squeal {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

#comments .comment.squeal {
    display: none;
    border-left: none;
    border-right: none;
}

#comments .discuss.answer > .bubble,
#comments .comment.squeal > .bubble {
    background: url(/app/service/integration/css/arrow_comments2.png) no-repeat scroll 0 0 transparent;
    height: 27px;
    left: 393px;
    position: absolute;
    top: -1px;
    width: 41px;
}

.ie #comments .discuss.answer > .bubble,
.ie #comments .comment.squeal > .bubble {
    top: -2px;
}

#comments .discuss strong {
    color: #333;
    font-family: 'SZSansBold';
    font-size: 1.8em; /* 24px */
}

.noSZfonts #comments .discuss strong {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-weight: 700;
}

#comments .discuss span.profile {
    color: #999999;
    cursor: pointer;
    font-size: 1.2em; /* 16px */
    margin-left: 1.0em;
}

#comments .discuss span.profile.facebook {
    background: url('/app/service/integration/css/sprite-comments.png') no-repeat scroll -7px -89px transparent;
    padding-left: 2.0em;
}

#comments .discuss .notify,
#comments .squel .notify {
    color: #999;
    display: none;
    font-size: 1.05em; /* 14px */
    padding: 2px;
    text-align: left;
}

#comments .discuss .notify.error,
#comments .squel .notify.error {
    padding: 2px;
}

#comments .discuss form,
#comments .comment.squeal form {
    position: relative;
}

#comments .comment.squeal form {
    text-align: right;
}

#comments .discuss form {
    margin-top: 0.75em;
    text-align: right;
}

#comments .discuss form > label,
#comments .comment.squeal form > label {
    color: #999;
    font-size: 1.2em; /* 16px */
}

#comments .discuss form > label.comment_text,
#comments .discuss form > label.answer_text,
#comments .comment.squeal form > label.squeal_text {
    display: block;
    margin-bottom: 0.5em;
    position: static;
}

#comments .comment.squeal form > label.squeal_text {
    text-align: left;
}

#comments .discuss form > label.comment_text > textarea,
#comments .discuss form > label.answer_text > textarea,
#comments .comment.squeal form > label.squeal_text > textarea {
    border: 1px solid #ccc;
    color: #999;
    display: inline-block;
    font-family: 'SZSansBold';
    font-size: 1.0em; /* 16px */
    height: 67px;
    padding: 0.35em;
}

.noSZfonts #comments .discuss form > label.comment_text > textarea,
.noSZfonts #comments .discuss form > label.answer_text > textarea,
.noSZfonts #comments .comment.squeal form > label.squeal_text > textarea {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-weight: 700;
}

#comments .discuss form > label.comment_text > textarea {
    resize: vertical;
    width: 530px;
}

#comments .discuss form > label.answer_text > textarea,
#comments .comment.squeal form > label.squeal_text > textarea {
    margin-top: 1.5em;
}

#comments .discuss form > label.comment_text > em,
#comments .discuss form > label.answer_text > em {
    bottom: 32px;
    left: 2px;
    position: absolute;
}

#comments .discuss.answer form > label.answer_text > textarea {
    width: 510px;
    resize: vertical;
}

#comments .comment.squeal form > label.squeal_text > textarea {
    width: 460px;
}

#comments .discuss form > label.comment_text > span.bubble,
#comments .discuss form > label.answer_text > span.bubble {
    display: none;
}

#comments .comment.squeal form > label.squeal_text > span.bubble {
    background-position: -10px -26px;
    height: 20px;
    position: absolute;
    width: 23px;
}

#comments .discuss form > label.comment_text > span.bubble,
#comments .discuss form > label.answer_text > span.bubble {
    left: 153px;
    top: 16px;
}

#comments .comment.squeal form > label.squeal_text > span.bubble {
    left: 200px;
    top: 32px;
}

.ie7 #comments .discuss form > label.comment_text > span.bubble,
.ie7 #comments .discuss form > label.answer_text > span.bubble {
    top: 17px;
}

.ie7 #comments .comment.squeal form > label.squeal_text > span.bubble {
    top: 33px;
}


.discuss label.local_rules {
    display: inline-block;    
    position: relative;
    float:right;
    font-size: 1.2em; /* 16px */
    margin-top: 2px;
}

.discuss label.local_rules,
.discuss label.local_rules a {
    color: #999;
}

.discuss label.user_login_status {
    margin-left: 3em;
    color: #999;
    font-size: 1.2em; /* 16px */
}


#comments .discuss form > label.answer_footer {
    display: inline-block;
    position: absolute;
    bottom: -17px;
    left: 0px;

}


#comments .discuss form > label.comment_facebook,
#comments .discuss form > label.answer_facebook {
    background-position: 5px -89px;
    display: block;
    padding-left: 35px;
    position: relative;
}

#comments .discuss form > label.comment_facebook {
    margin-left: 325px;
}

#comments .discuss form > label.answer_facebook {
    margin-left: 315px;  
}

.ie7 #comments .discuss form > label.comment_facebook,
.ie7 #comments .discuss form > label.answer_facebook {
    background-position: 10px -89px;
    padding-left: 3.5em;
}

#comments .discuss form > label.comment_facebook input,
#comments .discuss form > label.answer_facebook input {
    left: 0;
    position: absolute;
    top: 1px;
}

.ie7 #comments .discuss form > label.comment_facebook input,
.ie7 #comments .discuss form > label.answer_facebook input {
    top: -2px;
}

#comments .discuss form > input.cta,
#comments .comment.squeal form > input.cta {
    height: 1.4em;
    margin-top: 1.0em;
    padding-right: 30px;
}

#comments .discuss form.comment_form > input.cta {
    background-position: 110px -45px;
}

#comments .discuss form.answer_form > input.cta {
    background-position: 77px -45px;
}

#comments .comment.squeal form.squeal_form > input.cta {
    background-position: 80px -45px;
}

#comments .discuss img.profile {
    bottom: 31px;
    display: block;
    height: 75px;
    left: 0;
    position: absolute;
    width: 75px;
}

.ie7 #comments .discuss img {
    bottom: 34px;
}

#comments_settings {
    color: red;
    font-family: 'SZSansBold';
    float: right;
    padding-left: 1em;
}

.noSZfonts #comments_settings {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-weight: 700;
}

#comments .discuss ul.comment_user li,
#comments .discuss ul.answer_user li {
    color: #333;
    float: left;
    font-size: 0.905em; /* 12px */
    position: relative;
}

#comments .discuss ul.comment_user span,
#comments .discuss ul.answer_user span {
    background-position: -10px -90px;
    color: #46639d;
    font-family: 'SZSansBold';
    margin-right: 3.0em;
    padding-left: 1.7em;
}

.noSZfonts #comments .discuss ul.comment_user span,
.noSZfonts #comments .discuss ul.answer_user span {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-weight: 700;
}

#comments .discuss ul.comment_user b,
#comments .discuss ul.answer_user b {
    background-position: 30px 1px;
    cursor: pointer;
    padding-right: 1.7em;
}

/*
 * @section :: comment menu
*/

#comments .menu ul {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    clear: both;
    float: left;
    position: relative;
    width: 100%;
}

#comments .menu li {
    border-left: 1px solid #ccc;
    color: #333;
    cursor: pointer;
    float: left;
    font-size: 1.2em; /* 16px */
    padding: 0.75em 0;
    text-align: center;
    width: 189px;
}

#comments .menu li.current {
    color: #333;
    font-family: 'SZSansBold';
}

.noSZfonts #comments .menu li.current {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-weight: 700;
}

#comments .menu li.current span.bubble {
    background-position: -10px -63px;
    bottom: -10px;
    height: 10px;
    position: absolute;
    width: 18px;
}

#comments .menu li.best.current span.bubble {
    left: 80px;
}

#comments .menu li.user.current span.bubble {
    left: 257px;
}

#comments .menu li.all.current span.bubble {
    left: 434px;
}

#comments .menu li.last {
    border-right: 1px solid #ccc;
    width: 178px;
}

/*
 * @section :: comment paging
*/

#comments .paging {
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    clear: both;
    padding: 0.75em 0;
}

#comments .paging.first {
    padding-top: 1.0em;
}

.ie7 #comments .paging.first {
    float: right;
}

#comments .paging.last {
    text-align: center;
}

#comments .paging span {
    color: #999;
    font-size: 1.2em; /* 16px */
    padding: 0 1.5em 0 0.75em;
}

.ie7 #comments .paging.first span {
    float: left;
}

#comments .paging ol {
    display: inline-block;
}

#comments .paging.first ol {
    float: right;
    padding-right: 0.75em;
}

#comments .paging li {
    color: #333;
    display: inline;
    font-family: 'SZSansBold';
    font-size: 1.2em; /* 16px */
}

.noSZfonts #comments .paging li {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-weight: 700;
}

#comments .paging li[data-page] {
    border-right: 1px solid #333;
    color: #333;
    cursor: pointer;
    font-family: 'SZSansBold';
    margin-right: 0.35em;
}

.noSZfonts #comments .paging li[data-page] {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-weight: 700;
}

#comments .paging li.current {
    color: #666;
}

#comments .paging li.last {
    border: none;
    margin: 0;
}

/*
 * @section :: comment comments
*/

#comments .comment {
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    clear: both;
    padding: 0.75em;
    position: relative;
    word-wrap: break-word;
}

#comments .comment.select {
    border-bottom: none;
    /*
        border-bottom: 1px solid #ccc;
        box-shadow: 0 6px 10px -4px #ccc;
        -moz-box-shadow: 0 6px 10px -4px #ccc;
        -webkit-box-shadow: 0 6px 10px -4px #ccc;
    */
}

.ie #comments .comment.select {
    border-bottom: 1px solid #ccc;
}

#comments .comment.next {
    border-top: 1px solid #ccc;
    box-shadow: 0 -6px 10px -4px #ccc;
    -moz-box-shadow: 0 -6px 10px -4px #ccc;
    -webkit-box-shadow: 0 -6px 10px -4px #ccc;
}

.ie #comments .comment.next {
    border-top: 1px solid #ccc;
}

#comments .comment.answer {
    /* background: url("/app/service/integration/css/arrow_comments2.png") no-repeat scroll 400px 0 transparent; */
    border: none;
    padding: 2em 1.5em 1em 1.5em;
}

#comments .comment.show_answer > span,
#comments .comment.answer > span {
    border-bottom: 1px solid #ccc;
    color: #333;
    display: block;
    font-family: 'SZSansBold;'
        font-size: 1.05em;
    margin-bottom: 0.75em;
    padding: 0.75em 0;    
}

.noSZfonts #comments .comment.show_answer > span,
.noSZfonts #comments .comment.answer > span {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-weight: 700;
}

#comments .comment.answer .bubble,
#comments .discuss.answer .bubble {
    display: none;
}

#comments .comment.select + .comment.answer > .bubble,
#comments .comment.select + .discuss.answer > .bubble {
    background: url(/app/service/integration/css/arrow_comments2.png) no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 27px;
    left: 430px;
    position: absolute;
    width: 41px;
}

#comments .comment.select + .comment.answer > .bubble,
#comments .comment.select + .discuss.answer > .bubble {
    border: none;
    top: -1px;
}

.ie #comments .comment.select + .comment.answer > .bubble,
.ie #comments .comment.select + .discuss.answer > .bubble {
    top: -2px;
}

#comments .comment.show_answer li,
#comments .comment.answer li {
    border-top: 1px solid #ccc;
    margin-bottom: 0;
    padding-top: 0.75em;
}

#comments .comment.show_answer li:first-child,
#comments .comment.answer li:first-child {
    border-top: none;
}

#comments .comment.show_answer li:last-child,
#comments .comment.answer li:last-child {
    border-bottom: 1px solid #ccc;
}

#comments .comment.show_answer li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

#comments .comment.answer li.answer .teaser {
    margin-top: 10px;
}

/*
 * @section :: comment teaser
*/

#comments .teaser {
    min-height: 75px;
}

#comments .teaser img {
    display: block;
    float: left;
    margin: 0 0.7em 0.7em 0;
}

#comments .teaser strong {
  color: #333;
  display: inline;
  font-family: 'SZSansBold';
  font-size: 1.2em; /* 16px */
  line-height: 1.5em;
}

.noSZfonts #comments .teaser strong {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-weight: 700;
}

#comments .comment.answer li.answer .teaser a {
  display: inline;
}

#comments .comment.answer li.answer .teaser a strong {
  font-size: 0.53em; /* 16px */
}

#comments .teaser span {
    color: #999;
    font-size: 1.2em; /* 16px */
    margin-right: 0.7em;
}

#comments .teaser span.red {
    color: #b70000;
}

#comments .teaser p {
    color: #666;
    font-size: 1.2em; /* 16px */
    line-height: 1.5em;
    margin: 0.5em 0 0.75em 0;
}

/*
 * @section :: comment functions
 * 
 * Like "löschen", "Melden", "Bewerten", "Empfehlen" und "Antworten"
*/

#comments .functions {
    display: inline;
}

#comments .teaser .functions {
    display: inline-block;
    float: right;
    margin-top: 3px;
}

#comments .teaser .squealOrDelete {
    display: none;
}

#comments .teaser .squealOrDelete .delete {
    display: none;
}
#comments .functions p {
    color: #999;
    font-size: 1.2em; /* 16px */
    margin: 0 0 0.75em 0;
    clear: both;
}

#comments .functions ul {
    height: 25px;
}

#comments .functions.squealOrDelete ul {
    height: auto;
}

#comments .functions li {
    border: none !important;
    color: #666;
    cursor: pointer;
    display: inline-block;
    font-family: 'SZSansBold';
    font-size: 1.05em; /* 14px */
    padding: 0 0.5em 0 0em;
}

.noSZfonts #comments .functions li {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-weight: 700;
}

.ie7 #comments .functions li {
    display: inline;
    zoom: 1;
}

#comments .functions li.recommend {
    margin-bottom: -4px;
    padding: 0 1.0em 0 0;
    position: relative;
    vertical-align: bottom;
}

#comments .functions li.recommend img {
    margin-right: 0.25em;
}

#comments .functions li.recommend span {
    background-image: url('/app/service/integration/css/lesenswert_bubble_right.png'), url('/app/service/integration/css/lesenswert_bubble_left.png'); 
    background-position: right top, left top;
    background-repeat: no-repeat, no-repeat;
    color: #333;
    display: inline-block;
    font-size: 0.86em;
    padding: 0.3em 0.3em 0.3em 0.7em;
    vertical-align: top;
}

.ie #comments .functions li.recommend span {
    background-image: url('/app/service/integration/css/lesenswert_bubble_left.png');
    background-position: 0 -1px;
    background-repeat: no-repeat;
    border-right: 1px solid #ccc;
    padding-bottom: 0.1em;
}

#comments .functions li.answer {
    border: 1px solid #ccc !important;
    color: #666;
    float: right;
    font-size: 1.05em; /* 14px */
    padding: 0.25em 0.5em;
}

.ie7 #comments .functions li.answer {
    float: none;
} 

#comments .functions li.answer span {
    color: #333;
    font-family: 'SZSansBold';
}

.noSZfonts #comments .functions li.answer span {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-weight: 700;
}

#comments .answer_header {
    border-bottom: 1px solid #ccc !important;
    font-family: 'SZSansBold';
    font-size: 16px;
    padding-bottom: 1.0em;
}

.noSzfonts #comments .answer_header {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-weight: 700;
}

/*
 * @section :: comment editorpick
*/

#comments span.editorpick{
    display: inline-block;
    width: 16px;
    height: 12px;
}

#comments span.editorpick.active {
    background-position: -10px -320px;
}

#comments span.editorpick.inactive {
    background-position: -10px -354px;
}

#comments span.trashcan {
    background-position: -10px -286px;
}

/*
 * @section :: select settings
*/

#comments_login_selector {
    background: none repeat scroll 0 0 #fff;
    border: 2px solid #999;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 5px 5px 10px #333;
    -moz-box-shadow: 5px 5px 10px #333;
    -webkit-box-shadow: 5px 5px 10px #333;
    outline: 0 none;
    padding: 0.5em 0.5em .5em;
    position: absolute;
    width: 560px;
    height: auto;
    z-index: 1000001;
    display: none;
}

#comments_admin_panel {

}

#comments_login_selector .close {
    background: url('/app/service/integration/css/login_sprite.png') no-repeat scroll 0 0 transparent;
    border: medium none;
    cursor: pointer;
    height: 28px;
    padding: 0;
    position: absolute;
    right: -15px;
    text-indent: -999em;
    top: -15px;
    width: 28px;
}

#comment_loginshime {
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5);
    display: none;
    height: 100%;
    left: -100px;
    position: absolute;
    top: 0;
    width: 140%;
    z-index: 1000000;
}


#comments_confirm {
    width: 300px;
    position: absolute;
    z-index: 1000001;
    display: none;
}


#comments_login_select  {
    background-color: #fff;
    color: #666;
    font-size: 10pt;
    margin: 0;
    padding: 1.5em;
    height: 6em;
}

#comments_login_select  h3 {
    font-family: 'SZSansBold';
    font-size: 1.4em;
    color: #666;
    margin: 0 0 1.0em 0;
}

#comments_login_select  h3 {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-weight: 700;
}

#comments_login_select .user_login,
#comments_login_select .user_login ul {
    list-style: none;
    margin: 0;
    padding: 0.3em 0 0 0;
}

#comments_login_select .user_login li {
    display: inline;
    margin-right: 1.5em;
}

#comments_login_select .user_login li.sz,
#comments_login_select .user_login li.fb {
    background: url('/app/service/integration/css/login_sprite.png') no-repeat scroll 0 0 transparent;
    border: 1px solid #ccc;
    color: #000;
    display: block;
    float: left;
    font-family: 'SZSansBold';
    font-size: 1.05em;
    height: 32px;
    padding: 0.5em 0.5em 0.5em 45px;
    width: 185px;
    cursor: pointer;
}

.noSZfonts #comments_login_select .user_login li.sz,
.noSZfonts #comments_login_select .user_login li.fb {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-weight: 700;
}

#comments_login_select .user_login li.sz {
    background-position: 7px -70px;
}

#comments_login_select .user_login li.fb {
    background-position: 7px -30px;
}

#comments_login_select .user_login a {
    color: #666;
    font-size: 1.05em; /* 14px */
    line-height: 1.23em;
    text-decoration: none;
}

/* Nachrichten an den Benutzer, beim adden und removen von Kommentaren */

div.comment_msg {
    margin-top: 10px;  
    padding-top: 1.0em;
}

/*
 * @section :: comments deactivated / frozen
*/      

#nocomments_article {
    background: none repeat scroll 0 0 #ecebe6;
    padding: 1.4em 0.7em 0.7em 0.7em;
}

#nocomments_article .header {
    color: #333;
    font-family: 'SZSansBold';
    font-size: 1.2em; /* 16px */
    margin: 0 0 0.35em 0;
    padding: 0;
    text-transform: none;
}

#nocomments_article .header {
    font-family: Arial, Helvetica, clean, sans-serif;
    font-weight: 700;
}

#nocomments_article .body {
    color: #999;
    font-size: 1.05em; /* 14px */
    line-height: 1.5em;
    margin: 0;
    padding: 0;
}

#comments .entry-summary > a {
    color: #888888;
    font-family: SZSansRegular;
    font-size: 1em;
}

#comments .teaser strong a {
    color: #333;
    font-size: 1.2em;
    font-family: SZSansRegular;
    line-height: 1.5em;
}