/*-----------------------------------------------------------------------------------------------
 * NTS JC Pearl ( Theme for the JComments 3.0.x )
 * Current version: 1.0.1
 * Author: Nice Theme Store
 * @copyright	Copyright (C) Dec 2009 9themestore.com <@email:9themestore@gmail.com>.All rights reserved.
 * License: GNU General Public License version 2
-----------------------------------------------------------------------------------------------*/


/* ----------------------------------------------
	COMMENT LIST
------------------------------------------------- */

#jc {
	margin-top: 40px;
}

/* --- Comment title --- */
#jc h4 {
	border-bottom: 2px solid #eee;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 20px;
	padding-bottom: 10px;
}

#jc #comments > .comments-list > div {
	border: 1px solid #ddd;
	border-radius: 3px;
	margin-bottom: 10px;
	padding: 10px 15px 15px;
}

#jc #comments > .comments-list .comments-list {
	border: 0;
	border-radius: 0;
	margin: 0 0 0 30px;
	padding: 0;
}

#jc #comments > .comments-list > .comments-list > div {
	border: 1px solid #ddd;
	border-radius: 3px;
	margin-bottom: 10px;
	padding: 10px 15px 15px;
}


/* --- Comment box --- */
#jc .rbox {
  position: relative;
  padding-left: 65px;
}

#jc .comment-avatar {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 50px;
}

#jc .comment-avatar img {
  border-radius: 3px;
  width: 50px;
}

#jc .comment-box .comment-meta {
	border-bottom: 1px solid #dedede;
	margin-bottom: 10px;
	padding-bottom: 5px;
	overflow: hidden;
}

#jc .comment-box .comment-meta .comments-vote {
  float: right;
}

#jc .comment-box .comment-meta .comments-vote a {
  background-color: #999;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 2px;
  display: block;
  float: left;
  height: 18px;
  margin-left: 3px;
  vertical-align: middle;
  width: 18px;
}

#jc .comment-box .comment-meta .comments-vote a.vote-good {
  background-color: #1D6600;
  background-image: url(images/up-icon.png);
}

#jc .comment-box .comment-meta .comments-vote a.vote-poor {
  background-color: #7f8c8d;
  background-image: url(images/down-icon.png);
}

#jc .comment-box .comment-meta .comments-vote span.vote-none,
#jc .comment-box .comment-meta .comments-vote span.vote-good,
#jc .comment-box .comment-meta .comments-vote span.vote-poor {
  border: 1px solid #ddd;
  border-radius: 2px;
  box-sizing: border-box;
  display: block;
  float: left;
  height: 19px;
  font-size: 11px;
  font-weight: bold;
  line-height: 19px;
  margin-left: 5px;
  padding: 0 5px;
  min-width: 8px;
  text-align: center;
}

#jc .comment-box .comment-meta .comments-vote span.vote-good {
  background-color: #fcfcfc;
  border-color: #1D6600;
  color: #1D6600;
}

#jc .comment-box .comment-meta .comment-anchor {
  background: url(images/link-icon.png) no-repeat center center #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 2px;
  display: block;
  float: right;
  height: 17px;
  margin-left: 4px;
  text-align: center;
  text-indent: -100px;
  overflow: hidden;
  width: 18px;
}

#jc .comment-box .comment-meta .comment-anchor:hover {
	background: url(images/link-hover-icon.png) no-repeat center center #1D6600;
	border-color: #1D6600;
}

#jc .comment-box .comment-meta .author-homepage,
#jc .comment-box .comment-meta .comment-email {
	display: block;
	float: left;
	line-height: 1;
	margin-right: 5px;
	padding-left: 18px;
	padding-right: 5px;
}

#jc .comment-box .comment-meta .author-homepage {
  background: url(images/web-icon.png) no-repeat 0 2px;
  border-right: 1px solid #ddd;
	color: #666;
	font-weight: 600;
}

#jc .comment-box .comment-meta .comment-email {
  background: url(images/email-icon.png) no-repeat 0 1px;
  border-right: 1px solid #ddd;
	color: #666;
	font-size: 14px;
	padding-left: 18px;
}

#jc .comment-box .comment-meta .comment-author {
  background: url(images/user-icon.png) no-repeat 0 0;
  border-right: 1px solid #ddd;
  color: #1D6600;
  display: block;
  float: left;
	font-weight: bold;
	font-size: 14px;
	line-height: 1;
	padding-left: 18px;
	padding-right: 7px;
	margin-right: 3px;
}

#jc .comment-box .comment-meta a:hover,
#jc .comment-box .comment-meta a:focus,
#jc .comment-box .comment-meta a:active {
	text-decoration: underline;
}

#jc .comment-box .comment-meta .comment-date {
  background: url(images/clock-icon.png) no-repeat 0 0;
	color: #000;
	display: block;
	float: left;
	font-size: 11px;
	line-height: 16px;
	min-height: 16px;
	padding-left: 18px;
}


/* Comment body */
#jc .comment-body {
	margin-bottom: 20px;
}

#jc .comment-body .quote {
	color: #666;
	font-size: 12px;
	font-weight: bold;
}

#jc .comment-body blockquote {
	background: url(images/quot-icon.png) no-repeat 10px 10px #FFFCD2;
	border: 1px solid #D9D8CE;
	border-radius: 3px;
	margin: 0;
	padding: 10px 10px 10px 30px;
}

/* Comment buttons */
#jc .comment-box .comments-buttons {
	display: block;
	text-align: right;
}

#jc .comment-box .comments-buttons a {
	background-color: #F5F5F5;
  background-repeat: no-repeat;
  background-position: 5px 3px;
	border: 1px solid #cacaca;
	border-radius: 3px;
	color: #000;
	display: inline-block;
	font-size: 9px;
	font-weight: bold;
	line-height: 1;
	padding: 4px 10px 4px 20px;
	text-transform: uppercase;
}

#jc .comment-box .comments-buttons a:hover,
#jc .comment-box .comments-buttons a:focus,
#jc .comment-box .comments-buttons a:active {
	color: #1D6600;
	text-decoration: none;
}

#jc .comment-box .comments-buttons a.btn-reply {
  background-image: url(images/reply-icon.png);
}

#jc .comment-box .comments-buttons a.btn-reply-quote {
  background-image: url(images/reply-icon.png);
}

#jc .comment-box .comments-buttons a.btn-quote {
  background-image: url(images/quote-sm-icon.png);
}


/* Toolbar */
#jc .toolbar {
  overflow: hidden;
  margin-top: -19px;
}

#jc .toolbar a {
  background-color: #999;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid #999;
  border-radius: 2px;
  display: block;
  float: left;
  height: 18px;
  margin-right: 4px;
  width: 18px;
}

#jc .toolbar a.toolbar-button-edit {
  background-image: url(images/edit-icon.png);
}

#jc .toolbar a.toolbar-button-delete {
  background-image: url(images/delete-icon.png);
}

#jc .toolbar a.toolbar-button-publish {
  background-image: url(images/publish-icon.png);
}

#jc .toolbar a.toolbar-button-ip {
  background-image: url(images/ip-icon.png);
}

#jc .toolbar a:hover,
#jc .toolbar a:focus,
#jc .toolbar a:active {
  background-color: #1D6600;
  border-color: #1D6600;
}

/* Comment footer */
#jc #comments-list-footer {
	margin-bottom: 30px;
}

#jc #comments-list-footer br {
}

#jc #comments-list-footer a {
	display: inline-block;
	font-size: 14px;
	padding-left: 20px;
}

#jc #comments-list-footer a.refresh {
	background: url(images/refresh-ico.png) no-repeat 0px 5px;
}

#jc #comments-list-footer a.rss {
	background: url(images/rss-ico.png) no-repeat 0px 5px;
}

#jc #comments-list-footer a#comments-subscription {
	background: url(images/email-ico.png) no-repeat 0px 5px;
}

/* Navigation */
#jc #nav-top,
#jc #nav-bottom {
	margin: 10px 0;
	text-align: center;
}

#jc #nav-top span,
#jc #nav-bottom span {
	border: 1px solid #ddd;
	border-radius: 2px;
	padding: 3px 5px;
	display: inline-block;
	line-height: 1;
	margin: 0 2px;
}

#jc #nav-top span:hover,
#jc #nav-bottom span:hover {
	border: 1px solid #1D6600;
	cursor: pointer;
}

#jc #nav-top span.activepage,
#jc #nav-bottom span.activepage {
	background: #1D6600;
	border-color: #1D6600;
	color: #fff;
}

#jc #nav-top span.activepage:hover,
#jc #nav-bottom span.activepage:hover {
	cursor: default;
}


/* ----------------------------------------------
	COMMENT FORM
------------------------------------------------- */
#jc #comments-form {
	overflow: hidden;
}

#jc .form-left {
	margin-bottom: 10px;
	overflow: hidden;
}

#jc .form-left p {
	display: block;
	float: left;
	margin-bottom: 15px;
	width: 48%;
}

#jc .form-left p:nth-child(2n) {
	float: right;
}

#jc .form-left p input {
	border: 1px solid #ddd;
	border-radius: 2px;
	box-shadow: none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	height: 34px;
	font-size: 14px;
	line-height: 34px;
	margin-bottom: 0;
	padding: 0 10px;
	width: 100%;
}

#jc .form-left p label {
	color: #000;
	font-weight: bold;
}

#jc .smiles {
	margin-bottom: 5px;
}

#jc .smiles img {
	margin-right: 3px;
}

#jc .smiles img:hover {
	cursor: pointer;
}

#jc .form-right textarea {
	border: 1px solid #ccc;
	box-shadow: none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-radius: 3px 3px 0 0;
	height: 150px;
	margin-bottom: 0;
	padding: 15px;
	width: 100%;
}

#jc .form-right .grippie {
	background: #fcfcfc;
	border: 1px solid #ccc;
	border-top: 0;
	border-radius: 0 0 3px 3px;
	font-size: 11px;
	min-height: 20px;
	padding: 5px 15px;
}

#jc .subscribe input {
	margin: 0 5px 0 0;
	vertical-align: middle;
}

#jc .subscribe label {
	display: inline-block;
}

#jc #captcha {
	background: #fcfcfc;
	border: 1px dashed #ddd;
	padding: 15px;
	overflow: hidden;
	width: 50%;
}

#jc #captcha img {
	border: 5px solid #ddd;
	float: left;
	margin-right: 10px;
}

#jc #captcha span.captcha {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	display: inline-block;
	font-weight: bold;
	margin-bottom: 5px;
	padding: 2px 5px;
}

#jc #captcha span.captcha:hover {
	background-color: #1D6600;
	border-color: #1D6600;
	color: #fff;
	cursor: pointer;
}

#jc #captcha #comments-form-captcha {
	border: 1px solid #ddd;
	border-radius: 2px;
	box-shadow: none;
	box-sizing: border-box;
	height: 32px;
	line-height: 32px;
	padding: 0 10px;
	width: 100px;
}

#jc #comments-form-buttons .btn {
	background: #1D6600;
	border: 0;
	box-shadow: none;
	color: #fff;
	display: inline-block;
	font-weight: bold;
	line-height: 1;
	padding: 10px 15px;
	text-shadow: none;
}

#jc #comments-form-buttons .btn a {
	color: #fff;
}

#jc #comments-form-buttons .btn:hover {
	background: #e67e22;
	cursor: pointer;
}

#jc #comments-form-buttons .btn:hover a:hover {
	text-decoration: none;
}

/* BBCode & Smiles
--------------------------------------------------*/
/* BBCode */
#jc span.bbcode {
  width: auto;
  height: 23px;
  display: block;
  margin-bottom: 5px;
}

#jc .bbcode a,
#jc .bbcode a:focus,
#jc .bbcode a:active,
#jc .bbcode a:hover{
  width: 23px;
  height: 23px;
  float: left;
  margin: 0 2px 0 0;
  display: block;
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-image: url(images/jc_bbcodes.gif);
  text-decoration: none;
  border: none !important;
}

#jc a.bbcode-empty  { background-position: 0 0; }

#jc a.bbcode-b      { background-position: -30px 0 !important; }

#jc a.bbcode-i      { background-position: -60px 0 !important; }

#jc a.bbcode-u      { background-position: -90px 0 !important; }

#jc a.bbcode-s      { background-position: -120px 0 !important; }

#jc a.bbcode-url    { background-position: -150px 0 !important; }

#jc a.bbcode-img    { background-position: -180px 0 !important; }

#jc a.bbcode-list   { background-position: -210px 0 !important; }

#jc a.bbcode-hide   { background-position: -240px 0 !important; }

#jc a.bbcode-quote  { background-position: -270px 0 !important; }

#jc a.bbcode-smile  { background-position: -300px 0 !important; }

#jc a.bbcode-youtube{ background-position: -330px 0 !important; }

#jc a.bbcode-google { background-position: -360px 0 !important; }

#jc a.bbcode-wiki   { background-position: -390px 0 !important; }

#jc a.bbcode-facebook{ background-position: -420px 0 !important; }

#jc a.bbcode-flickr{ background-position: -450px 0 !important; }

#jc a.bbcode-instagram  { background-position: -480px 0 !important; }

#jc a.bbcode-vimeo  { background-position: -510px 0 !important; }

#jc span.bbcode img {
  width: 23px;
  height: 23px;
  float: left;
  margin: 0 2px 0 0;
}

#jc .custombbcode {
  width: 23px;
  height: 23px;
  float: left;
  margin: 0 2px 0 0;
  display: block;
  text-decoration: none;
  cursor: pointer;
}


/* Smiles */
#comments-form-smilespanel {
  background: #ffffdd;
  border: 1px solid #ccc;
  margin-top: 7px;
  padding: 10px;
  width: 300px;
}

#comments-form-smilespanel img {
  padding: 0 2px 5px;
}

#comments-form-smilespanel img:hover {
  cursor: pointer;
  opacity: 0.5;
}

/* Footer */
#comments-footer {
	margin-bottom: 20px;
	padding-top: 20px;
}


/* ----------------------------------------------
	RESPONSIVE
------------------------------------------------- */
@media (max-width: 480px) {
	#jc .rbox {
		padding-left: 0;
	}
	
	/* Avatar */
	#jc .comment-avatar {
		width: 32px;
	}
	
	#jc .comment-avatar img {
		width: 32px;
	}
	
	#jc .comment-box .comment-meta {
		padding-left: 40px;
	}
	
	#jc .comment-box .comment-meta .author-homepage,
	#jc .comment-box .comment-meta .comment-email,
	#jc .comment-box .comment-meta .comment-date {
		background: none;
		border: 0;
		float: none;
		margin-bottom: 3px;
		padding-left: 0;
	}
	
	#jc .comment-box .comment-meta .comment-author,
	#jc .comment-box .comment-meta .comment-date {
		background: none;
		border: 0;
		float: none;
		margin-bottom: 3px;
		padding-left: 0;
	}
	
	#jc .toolbar {
		margin: 20px 0 0 0;
	}
	
	/* Login form */
	#jc .form-left p {
		float: none;
		width: 100%;
	}
	
	#jc #captcha {
		width: 100%;
	}
}


@media (max-width: 320px) {
	#jc #comments > .comments-list .comments-list {
		margin-left: 0;
	}

	/* Avatar */
	#jc .comment-avatar {
		display: none;
	}
	
	#jc .comment-box .comment-meta {
		padding-left: 0;
	}
	
	#jc .comment-box .comments-buttons a {
		margin-bottom: 5px;
	}
	
	#jc #captcha {
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}

	#jc #captcha img {
		clear: both;
		display: block;
		float: none;
		margin-bottom: 5px;
	}
	
	#jc #captcha br {
		display: none;
	}
	
	#jc #captcha #comments-form-captcha {
		float: left;
		margin-right: 5px;
		width: 115px;
	}
	
	#jc #captcha span.captcha {
		padding: 4px 5px;
	}
}