/* Comment Link */
a.comment-link:link {
	color: #2626ff;
}

/* Visited Comment Link */
a.comment-link:visited {
	color: #800080;
}

/* Active & Hovered Comment Link */
a.comment-link:active, a.comment-link:hover {
	color: #FF0000;
}

/* Page of the comment  (additional comments are hided on screens of <1024px, this is controlled though homepage.css)*/
.comment-page, .additional-comment-page {
	font-family: 'Roboto', sans-serif;
	font-size: 1.1em;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 5px;
	padding-bottom: 10px;
}

/* Comments quantity */
.comment-quantity {
	color: #a9a9a9;
	font-size: 0.82em;
}

/* Homepage Comment */
.comment {
	font-family: 'Arimo', sans-serif;
	padding-left: 5px;
}

/* Name of the commentator */
.comment-name {
	font-style: italic;
}

/* More comments */
.more-comments {
	text-align: center;
	margin-top: 15px;
	padding-bottom: 20px;
}


/* Comments on the /comments/ page */
.all-comments-page {
	margin-top: 20px;
	margin-left: 20%;
	margin-right: 20%;
}

/* Comments Block on Content Pages */
#comments {
	margin-top: 20px;
	padding-left: 20%;
	padding-right: 20%;
	background-color: #f2f2f2;
}

/* Comments formatting on the /comments/ page */
.all-comment-page {
	font-family: 'Roboto', sans-serif;
	padding-top: 5px;
	padding-bottom: 10px;
}

/* Page Name style on the /comments/ page */
.all-comments-page-name {
	font-size: 1.3em;
}

/* Content Page Comment */
.comment-content {
	font-family: 'PT+Serif', serif;
	font-size: 1.5em;
}

/* Comments Date */
.comment-date {
	color: #a9a9a9;
	font-size: 0.82em;
	padding-top: 5px;
	padding-bottom: 15px;
}

/* Content Page Comment Response */
div.comment-content-response {
	font-family: 'PT+Serif', serif;
	font-size: 1.5em;
	padding-left: 40px;
}

UL.comments, OL.comments {
	font-size: 1em;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* Comments Date Response */
.comment-date-response {
	color: #a9a9a9;
	font-size: 0.82em;
	padding-top: 5px;
	padding-bottom: 15px;
	padding-left: 40px;
}

/* Comments Separator */
hr.comments {
	border-style: solid;
	border-width: 1px;
	color: #e5e5e5;
}

/* Add a Comment Button */
.add-comment {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 15px;
	padding-bottom: 25px;
}


/* New Comment Block */
#new-comment-parent {
	display: none;
	position: absolute;
	z-index: 2;
	right: 0;
	height: 20000%;
}

.new-comment {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	width: 512px;
	background-color: #f2f2f2;
    border-style: solid;
    border-width: 1px;
   	border-color: #a9a9a9;
}

div.hide-new-comment {
	position: relative;
	z-index: 4;
	margin-top: 20px;
	margin-left: 15px;
	width: 35px;
	height: 20px;
	background-image: url("/_theme/images/menu-35x20-active.png");
    border: none;
    cursor: pointer;
}

div.comment-form {
	position: relative;
	margin-top: -35px;
}

textarea {
	width: 452px;
	height: 250px;
	background-color: #ffffff;
    border-style: solid;
    border-width: 1px;
   	border-color: #a9a9a9;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 20px;
	margin-right: 20px;
	padding: 10px;
	font-size: 1.3em;
}

input {
	width: 452px;
	background-color: #ffffff;
    border-style: solid;
    border-width: 1px;
   	border-color: #a9a9a9;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 20px;
	margin-right: 20px;
	padding: 10px;
	font-size: 1.3em;
}

div.checkbox-area {
	white-space: nowrap;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 1.3em;
	text-align: center;
	color: #828282;
}

input.checkbox {
	margin: 0;
	height: 20px;
	width: 20px;
}

input.button {
	width: 472px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: 20px;
	color: #4a4a4a;
	background-color: #e5e5e5;
	font-size: 1.3em;
	text-decoration: none;
	border-style: solid;
	border-width: 1px;
	border-color: #262626;
	cursor: pointer;
}

input.button:hover {
	color: #ffffff;
	background-color: #a9a9a9;
}


/* Unique styles for screen resolution of 1024px and below */
@media screen and (max-width: 1024px) {
	#comments {
		padding-left: 10%;
		padding-right: 10%;
	}

	.all-comments-page {
		margin-left: 10%;
		margin-right: 10%;
	}

	.all-comments-page-name {
		font-size: 1.2em;
	}

	.comment-content {
		font-size: 1.4em;
	}

	.comment-content-response {
		font-size: 1.4em;
		padding-left: 30px;
	}

	.comment-date-response {
		padding-left: 30px;
	}

	.new-comment {
		width: 400px;
	}

	div.hide-new-comment {
		margin-top: 20px;
		margin-left: 10px;
	}

	textarea {
		width: 360px;
		height: 250px;
		margin-bottom: 5px;
		margin-left: 15px;
		margin-right: 15px;
		padding: 5px;
		font-size: 1.2em;
	}

	input {
		width: 360px;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-left: 15px;
		margin-right: 15px;
		padding: 5px;
		font-size: 1.2em;
	}

	div.checkbox-area {
		margin-top: 5px;
		margin-bottom: 5px;
		font-size: 1.2em;
	}

	input.checkbox {
		height: 15px;
		width: 15px;
	}

	input.button {
		width: 370px;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-bottom: 15px;
		font-size: 1.2em;
	}
}


/* Unique styles for screen resolution of 639px and below */
@media screen and (max-width: 639px) {
	#comments {
		padding-left: 10px;
		padding-right: 10px;
	}

	.all-comments-page {
		margin-top: 15px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.all-comments-page-name {
		font-size: 1.1em;
	}

	.comment-content {
		font-size: 1.3em;
	}

	.comment-content-response {
		font-size: 1.3em;
	}

	.new-comment {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 3;
		width: 100%;
		border-left: 0px;
		border-right: 0px;
	}

	div.hide-new-comment {
		margin-top: 20px;
		margin-left: 15px;
    	width: 28px;
	    height: 20px;
    	background-image: url("/_theme/images/menu-28x20-active.png");
	}

	textarea {
		width: 92%;
		height: 150px;
		font-size: 1.1em;
	}

	input {
		width: 92%;
		font-size: 1.1em;
	}

	div.checkbox-area {
		font-size: 1.1em;
	}

	input.checkbox {
		height: 15px;
		width: 15px;
	}

	input.button {
		width: 300px;
		font-size: 1.1em;
	    display: block;
	    margin: auto;
		margin-bottom: 15px;
	}
}


/* Unique styles for screen resolution of 450px and below */
@media screen and (max-width: 450px) {
	textarea {
		width: 90%;
	}

	input {
		width: 90%;
	}
}


/* Unique styles for screen resolution of 320px and below */
@media screen and (max-width: 320px) {
	.all-comments-page {
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}

	.all-comments-page-name {
		font-size: 1em;
	}

	.comment-content {
		font-size: 1.1em;
	}

	.comment-content-response {
		font-size: 1.1em;
		padding-left: 20px;
	}

	.comment-date-response {
		padding-left: 20px;
	}

	textarea {
		width: 88%;
		font-size: 1em;
	}

	input {
		width: 88%;
	}

	div.checkbox-area {
		font-size: 1em;
	}

	input.checkbox {
		height: 10px;
		width: 10px;
	}

	input.button {
		width: 88%;
		font-size: 1em;
	}
}