/*------------------------------------*\
   CONTENTS
\*------------------------------------*/
/*
COMPATIBILITY
OVERRIDES
COMMENTS
*/


/*------------------------------------*\
   $COMPATIBILITY
\*------------------------------------*/


/*------------------------------------*\
   $OVERRIDES
\*------------------------------------*/

.comments .icon-16x16.icon-follow {
    background-position: -311px -23px;
}

.comments .icon-16x16.icon-delete {
    background-position: -311px top;
}

.comments .comment-box .button.delete,
.comments .comment-box .button.spam {
    padding: 4px;
}

.comments .paginationui-container li {
    padding: 0;
}


/*------------------------------------*\
   $COMMENTS
\*------------------------------------*/

.comments header > h3 {
    padding: 10px;
    border: solid 1px #CCC;
    border-bottom-width: 0px;
}

.comments .pagination {
    float: right;
}

.comments .commentInformation,
.comments #comments-container > div {
    *zoom: 1;
}
.comments .commentInformation:after,
.comments #comments-container > div:after {
    content: " ";
    display: table;
}
.comments .commentInformation:after,
.comments #comments-container > div:after {
    clear: both;
}

.comments .paginationui-container {
    float: right;
}

#commentsPlaceholder {}

	#commentsPane {
		position: relative;
        border: solid 1px #CCC;
        padding: 20px;
	}

		#commentsPane:after {
			content: "";
			display: block;
			clear: both;
			visibility: hidden;
			line-height: 0;
			height: 0;
		}

		#root-comments-controls {
			width: 100%;
			-webkit-box-sizing: border-box;
			   -moz-box-sizing: border-box;
			     -o-box-sizing: border-box;
			    -ms-box-sizing: border-box;
			        box-sizing: border-box;
            *zoom: 1;
		}

        #root-comments-controls:after {
            content: " ";
            display: table;
        }
        #root-comments-controls:after {
            clear: both;
        }

			textarea.commentBody {
				padding: 5px;
				margin: 5px 0 0 0;
				width: 100%;
				height: 100px;
				font-size: 17px;
                resize: none;
				-webkit-box-sizing: border-box;
				   -moz-box-sizing: border-box;
				     -o-box-sizing: border-box;
				    -ms-box-sizing: border-box;
				        box-sizing: border-box;
			}

			.characterCounter {
				float: left;
				padding: 0;
				margin: 5px 0;
			}

            #root-comments-controls .button {
				display: block;
				float: right;				
				margin: 10px 0 0 0;
			}

        .commentInformation {
            position: relative;
            padding: 10px 0;
        }

			.commentInformation .totalComments {
				float: left;
				line-height: 30px;
			}

			.commentInformation span.title {
				display: block;
				float: right;
				font-family: "OswaldBook", Arial, sans-serif;
				font-size: 15px;
				padding: 0 5px 0 0;
				margin: 6px 0 0 0;
			}

	#comments-container > div {
		margin-top: 5px;
	}

		.comment-box {
			position: relative;
            background-color: #F9F9F9;
            border: solid 1px #CCC;
			padding: 15px 15px 0 15px;
			-webkit-box-sizing: border-box;
			   -moz-box-sizing: border-box;
			     -o-box-sizing: border-box;
			    -ms-box-sizing: border-box;
			        box-sizing: border-box;
		}

			.comment-box div p.body {
				display: block;
				float: left;
				padding-bottom: 15px;
				margin-bottom: 0;
				width: 90%;
                text-overflow: ellipsis;
                overflow: hidden;
			}

			.tagline {
				padding: 0;
				margin: 0;
			}

            .tagline {
                width: 100%;
                *zoom: 1;
            }
            .tagline {
                content: " ";
                display: table;
            }
            .tagline {
                clear: both;
            }

				.tagline span {
					display: block;
					float: left;
				}

				.tagline .expand {
					display: none;
				}

				.tagline .published-on {
                    font-size: 11px;
                    margin: 5px 25px 0 25px;
				}

				.tagline .like {
					margin: 0;
				}

				.tagline .like,
                .tagline .dislike {
					margin: 2px;
				}

					.tagline .like a, .tagline .dislike a {
						float: left;
						display: block;
						overflow: hidden;
					}

					.tagline .like span, .tagline .dislike span {
						margin-right: 4px;
                        font-size: 14px;
					}

                    .tagline .like span {
                        color: #090;
                    }

                    .tagline .dislike span {
                        color: #c00000;
                    }

                    .tagline .like a:hover .icon-like,
                    .tagline .dislike a:hover .icon-dislike {
                        background-image: url('/assets/Wpe/Platform/Common/common/global/img/icons/glyphicons-halflings-active.png');
                    }

			.comment-box .button.delete,
            .comment-box .button.spam {
				display: none;
				position: absolute;
				top: 15px;
				right: 15px;
				height: 14px;
				padding: 0 14px 0 0;
				margin: 0;
				line-height: 0;
				overflow: hidden;
			}

				.comment-box .delete:hover:before {
					display: block;
					content: "Delete";
                    padding: 0 4px 10px 4px;
                    line-height:14px
				}

				.comment-box .spam:hover:before {
					display: block;
					content: "Flag as spam";
                    padding: 0 4px 10px 4px;
                    line-height:14px
				}

            .comment-box .tagline .button {
                display: block;
            }

			.comment-box .button {
				display: none;
				position: relative;
				float: right;
				clear: both;
				margin-top: -38px;
			}

				.comment-box:hover .delete,
                .comment-box:hover .spam,
                .comment-box:hover .button {
					display: block;
				}

				.comment-box .delete:hover,
                .comment-box .spam:hover {
					color: #c00000;
				}

			.comment-box .reported {
				position: absolute;
				top: 10px;
				right: 15px;
				font-size: 11px;
				color: #c00000;
			}

		.child-comments-container {
			display: block;
			width: 95.75%;
			border: none;
			float: right;
			clear: both;
		}

        .child-comments-container > div {
            margin: 5px 0 0 0;
        }

			.child-comments-container .child-comments-container .button {
				display: none;
			}

			.seeParentBox a {
				display: block;
				width: 100%;
				padding: 10px;
				font-size: 15px;
				font-family: "OswaldBook", Arial, sans-serif;
				background: #D1D1D1;
				margin: 5px 0;
				border-bottom: 1px solid #919191;
				-webkit-box-sizing: border-box;
				   -moz-box-sizing: border-box;
				     -o-box-sizing: border-box;
				    -ms-box-sizing: border-box;
				        box-sizing: border-box;				
			}

            .moreBox {
                float: left;
                width: 100%;
            }

			.moreBox a {
                text-align: center;
				display: block;
                width: 30%;
				clear: both;
                margin: 5px auto 0;
				-webkit-box-sizing: border-box;
				   -moz-box-sizing: border-box;
				     -o-box-sizing: border-box;
				    -ms-box-sizing: border-box;
				        box-sizing: border-box;				
			}

				.seeParentBox a:hover, .moreBox a:hover {
					background: #F3F3F3;
				}

		.selected {}

		.replyBox {
			clear: both;
			padding: 10px 0 0 0;
			margin-bottom: 15px;
			border-top: 1px solid #CCC;
		}

			.replyBox textarea.comment-wrapper.text-area-comment {
				width: 100%;
				height: 65px;
				padding: 10px;
				margin: 0;
                resize: none;
				-webkit-box-sizing: border-box;
				   -moz-box-sizing: border-box;
				     -o-box-sizing: border-box;
				    -ms-box-sizing: border-box;
				        box-sizing: border-box;
			}

			.replyBox .button {
				display: block;
				position: inherit;
				clear: none;
				float: right;
				margin-top: 5px;
			}


	#commentsPane .icon-loader {
        margin: 14px 14px 0 0
	}

	.float-right {
		float: right;
	}

	.error-message {
        display: none;
		float: right;
		width: 325px;
		font-size: 10px;
		color: #c00000;
		text-align: right;
		padding-top: 15px;
		padding-right: 10px;
	}