/* main container with all comments */
.skomment_comments:after { content: "."; display: block;height: 0; clear: both; visibility: hidden;}

/* some default stuff */
.comment.odd {
    background-color: #ffd;
}
.comment.even {
    background-color: #ffe;
}

.loop (@index) when (@index > 0) {
    (~".level_@{index}") {
        margin-left: @index * 40px;
    }

    .loop(@index - 1);
}

.loop(10);

span.space {
    margin-left: 15px;
}

img.active {
    border: 1px solid blue;
}

.no-comments-yet { color: #999999; }

/******************************************************************************************
 * 
 * SKOMMENT MODULE FOR EXPRESSIONENGINE. DEVELOPED BY KEES™ www.kees-tm.nl
 * 
 ******************************************************************************************/

#skomment-container{
  font-size:12px;
  color:#333;
  min-width:300px;
}

/*** COMMENT ***/
#skomment-container .skomment{
  border:1px dotted #efefef;
  -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;box-shadow:inset 0px 1px 0px 0px #ffffff;
  margin-bottom: 5px;
  padding-bottom: 5px;
  margin-top: 15px;
 background: #fafafa; 
}

#skomment-container .skomment:after {content: "."; display: block;height: 0; clear: both; visibility: hidden;}

#skomment-container .skomment.admin {
  /*border-left: solid 0px #f46d00; */
}

#skomment-container .skomment.highlight{
  border:1px solid red;
}
#skomment-container .skomment.verwijderd{
  border:1px solid red;
  height: 50px;
  overflow: hidden;
}

/*** COMMENT HEADER SECTION ***/
#skomment-container .skomment-header{
  padding:0px;
}

#skomment-container .skomment.level_0{ margin-left:0px; margin-top:15px; }
#skomment-container .skomment.level_1{ margin-left:0px; }

/* 

required for threaded comments mode

#skomment-container .skomment.level_1{ margin-left:0px; }
#skomment-container .skomment.level_2{ margin-left:80px; }
#skomment-container .skomment.level_3{ margin-left:120px; }
#skomment-container .skomment.level_4{ margin-left:160px; }
#skomment-container .skomment.level_5{ margin-left:200px; }
#skomment-container .skomment.level_6{ margin-left:240px; }
#skomment-container .skomment.level_7{ margin-left:280px; }
#skomment-container .skomment.level_8{ margin-left:320px; }
#skomment-container .skomment.level_9{ margin-left:360px; }

*/

/*** COMMENT CONTENT SECTION ***/

#skomment-container .skomment-content{ padding:10px 10px 10px 10px; position: relative; border: solid 0px red;}

.skomment .skomment-content .skomment-avatar { float: left; background: #fff; width: 35px; height: 35px;padding: 2px; border: 1px solid #999;border-radius: 20%; box-shadow: 0px 1px 1px 1px #d8d8d8}
.skomment .skomment-content .skomment-avatar img { display: block; width: 100%;border: 0;  margin: 0; border-radius: 20%;}
.skomment .skomment-content .skomment-name { margin-left: 10px; float: left; }
.skomment .skomment-content .skomment-name span { display: block; }
.skomment .skomment-content .skomment-name span.name { color: #5b5b5b; font-style:italic; float: left; font-size: 13px; font-weight: normal; margin-bottom: 7px;  }
.skomment .skomment-content .skomment-name span.in-reply-to { float: left; margin-left: 5px; margin-top: 1px; color:#b0b0b0; }
.skomment .skomment-content .skomment-name span.date { clear:left; font-size: 10px; float: left; width: 160px; text-align: left; color: #b8b8b8;}
.skomment .skomment-content .skomment-body { margin-top: 10px; }
.skomment .skomment-content .skomment-body img { max-width: 95%;  }
.skomment .skomment-content .scoreButton { color: #8d8d8d; background: url(/themes/third_party/skomment/images/comment-thumb.png) 0px 2px no-repeat; padding: 5px; padding-left: 20px; position: absolute; right: 10px; top: 10px; text-align: center;}
.skomment .skomment-content .buttons { overflow: hidden; display: none; position: absolute; right: 10px; top: 10px; }
.skomment .skomment-content .flagged { position: absolute; left: 160px; top: 30px; width: 16px; height: 16px; background:url(http://www.data-cx.com/images/icon_red_flag.gif) no-repeat;}
.skomment .skomment-content .reply { display: none; position: absolute; right: 15px; bottom: 5px; }
.skomment .skomment-content .reply .skomment-reageer-on-comment { border: 0;}

.skomment .comment-reply-container { margin: 15px; border: solid 0px red; min-height: 150px}
.skomment .comment-textarea { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box; height: 45px; margin-bottom: 0px; height: 60px; resize: none}
.skomment .comment-name { margin-bottom: 10px}
.skomment .comment-email {margin-left: 10px; margin-bottom: 10px}
.skomment .comment-captcha-container { float: left; margin-bottom: 10px;}
.skomment .comment-captcha { margin-left: 10px; }
.skomment .comment-post-button {  margin-top: 0; float: right; }

.skomment_mobile .comment-name { margin-bottom: 10px}
.skomment_mobile .comment-email {margin-left: 0px; margin-bottom: 10px}
.skomment_mobile .comment-captcha { margin-left: 0px; margin-bottom: 10px; }

#skomment-container .skomment-content .buttons a{
  float:right;
  width:27px;
  height:22px;
  display:block;
  text-indent:-9999px;
  margin:0 0px 0 10px;
}

#skomment-container .skomment-content a.skomment-plus{ background:url('/themes/third_party/skomment/images/skomment_iconsv2.png') no-repeat 0 0; }
#skomment-container .skomment-content a.skomment-plus:hover,
#skomment-container .skomment-content a.skomment-plus.active{ background:url('/themes/third_party/skomment/images/skomment_iconsv2.png') no-repeat 0 -32px; }

#skomment-container .skomment-content a.skomment-minus{ background:url('/themes/third_party/skomment/images/skomment_iconsv2.png') no-repeat -37px 0px; }
#skomment-container .skomment-content a.skomment-minus:hover,
#skomment-container .skomment-content a.skomment-minus.active{ background:url('/themes/third_party/skomment/images/skomment_iconsv2.png') no-repeat -37px -32px; }

#skomment-container .skomment-content a.skomment-notify{ background:url('/themes/third_party/skomment/images/skomment_iconsv2.png') no-repeat -74px 0px; }
#skomment-container .skomment-content a.skomment-notify:hover,
#skomment-container .skomment-content a.skomment-notify.active{ background:url('/themes/third_party/skomment/images/skomment_iconsv2.png') no-repeat -74px -32px; }
  
#skomment-container .skomment-content a.skomment-delete{ background:url('/themes/third_party/skomment/images/skomment_iconsv2.png') no-repeat -111px 0px; }
#skomment-container .skomment-content a.skomment-delete:hover{ background:url('/themes/third_party/skomment/images/skomment_iconsv2.png') no-repeat -111px -32px; }

#skomment-container .skomment-content a.skomment-close{ background:url('/themes/third_party/skomment/images/skomment_iconsv2.png') no-repeat -111px 0px; }
#skomment-container .skomment-content a.skomment-close:hover{ background:url('/themes/third_party/skomment/images/skomment_iconsv2.png') no-repeat -111px -32px; }

#skomment-container .skomment-content a.skomment-publiceer{ background:url('/themes/third_party/skomment/images/skomment_iconsv2.png') no-repeat -148px 0px; }

#skomment-container .skomment-content a.skomment-ban{ background:url('/themes/third_party/skomment/images/skomment_iconsv2.png') no-repeat -185px 0px; }
#skomment-container .skomment-content a.skomment-ban:hover{ background:url('/themes/third_party/skomment/images/skomment_iconsv2.png') no-repeat -185px -32px; }
  
  
/*** ADD NEW PARENT COMMENT ***/
.skomment-add-comment .skomment-add-comment {
  float: right;
}

.skomment-add-comment textarea.skomment-textarea {
  width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;
  font-size:12px;
  color:#333;
  height:100px;
  margin-top:10px;
  margin-bottom: 0px;
  resize: none;
}

.skomment-add-comment input.skomment-submit{
  margin:10px 0 0 0;
}
  
div.skomment-flag {
    display:none;
}

.buttonReply { cursor: pointer; -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;box-shadow:inset 0px 1px 0px 0px #ffffff;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #ededed) );background:-moz-linear-gradient( center top, #ededed 5%, #ededed 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ededed');background-color:#ededed;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid #bfbfbf;display:inline-block; color:#717171; font-size:11px;font-weight:normal;padding:6px 7px; text-decoration:none;}
.buttonReply:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #ededed) ); background:-moz-linear-gradient( center top, #ededed 5%, #ededed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ededed'); background-color:#ededed;}
.buttonReply:active { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dadada), color-stop(1, #dadada) ); background:-moz-linear-gradient( center top, #dadada 5%, #dadada 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dadada', endColorstr='#dadada'); background-color:#dadada;}

/*** PAGINATION ***/

.pagination { padding-bottom: 15px; position: relative; margin-top: 15px; margin-right: 0px; }
.pagination .page { position: absolute; left: 48%; color: #a5a5a5; top: 8px; }

.pagination_prev { float: left; border: solid 1px #f0eeee; padding: 8px 10px 8px 10px; }
.pagination_prev:hover { text-decoration: none; background: #f8f8f8 }

.pagination_next { float: right; border: solid 1px #f0eeee; padding: 8px 10px 8px 10px; text-decoration: none; }
.pagination_next:hover { text-decoration: none; background: #f8f8f8 }

a.pagination_prev,a.pagination_next { font-size: 11px; }
a.pagination_prev { padding-left: 8px; background: #f8f8f8 }
a.pagination_next { padding-right: 8px; background: #f8f8f8 }

/*** TOP COMMENTS ***/

.skomment_top_comments { margin-top: 20px; margin-bottom: 15px; }

.top_skomment { background: #fafafa; position: relative; margin-bottom: 10px; padding: 5px;}
.top_skomment .top-skomment-avatar { margin-left: 2px; float: left; background: #fff; width: 25px; height: 25px;padding: 2px; border: 1px solid #999;border-radius: 20%; box-shadow: 0px 1px 1px 1px #d8d8d8}
.top_skomment .top-skomment-avatar img { display: block; width: 100%;border: 0;  margin: 0; border-radius: 20%;}
.top_skomment .top-skomment-name { margin-left: 10px; float: left; }
.top_skomment .top-skomment-name span { display: block; }
.top_skomment .top-skomment-name span.name { color: #4f4f4f;  font-size: 12px; font-weight: bold;  margin-bottom: 2px;}
.top_skomment .top-skomment-name span.date { color: #b8b8b8; font-size: 10px;}
.top_skomment .top-skomment-body { margin-top: 10px; float: left; margin-left: 15px; font-size: 11px;}
.top_skomment .top-skomment-body img { max-width: 95%;}
.top_skomment .top-skomment-score { color: #8d8d8d; background: url(/themes/third_party/skomment/images/comment-thumb.png) 0px 2px no-repeat; padding: 5px; padding-left: 20px; position: absolute; right: 10px; top: 10px; text-align: center;}

span.comments_sort { position: relative; top: -2px;right: -4px;}


#skomment-container .admin_closed { border: solid 1px red; border-left: solid 2px red;}