@charset "utf-8";

/* ############## comments.css ############## */

* {font-family: Arial, Helvetica, sans-serif;}

/* $$$$$$$$$$$$$$$$$$$$$$ Overall HashOver styling $$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

#hashover {
	animation: fadeInAnimation ease 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
	0% {
		opacity: 0.3;
	}
	100% {
		opacity: 1;
	}
}

.hashover{
	font-size:95%;
}

.hashover form {
	margin: 0;
}

.hashover-content p{
	margin-bottom: 0.75em;
}

.hashover-content p:last-child{
	margin-bottom: 0;
}

.hashover-textarea {
	width: calc(100% - 0.625em);
	margin-left: 0.31em;
	display: block;
	resize: none;
	overflow: hidden;
	padding: 0.25em 0.38em 1em 0.38em;
	border: 0.13em solid hsl(0, 0%, 62%);
	border-radius: 0.25em;
	min-height: 2.6em;
	transition: 180ms box-shadow ease-in-out;
	opacity: 0.5;
}

.hashover textarea:focus,
.hashover textarea:hover {
	border-color: hsl(108, 30%, 52%);
	box-shadow: 0 0 0 0.13em hsl(120, 26%, 86%);
	outline: 0.2em solid transparent;
}
/* hashover-avatar-image is the avatar in the main comment submission box hashover-avatar is the avatar everywhere else */
.hashover-avatar-image div:first-child, .hashover-avatar div:first-child{
	display: block;
	width: 2em;
	height: 2em;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
/*	box-sizing: content-box;*/
}

/* $$$$$$$$$$$$$$$$$$$$$$ LINKS, etc $$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
.hashover-formatting {
	color: hsl(240, 100%, 50%);
	cursor: pointer;
	margin-right: 0.5em;
}
.hashover-formatting:before {
	background: url("/images/info.svg") 0 0.063em/auto 80% no-repeat;
	content:'\00a0\00a0\00a0\00a0';
}

.hashover-buttons a {
	
	text-decoration: none;
	margin-left: 1.2em;
	word-break: keep-all;
	line-height: 1.8;
}

.hashover-buttons a:active {
	background-color: inherit;
	box-shadow: none;
}

.btn {
	background: linear-gradient(to bottom, hsl(120, 33%, 98%) 0%, hsl(94, 4%, 76%) 100%);
	user-select: none;
	border: 0.085em solid hsl(94, 4%, 76%);
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	border-radius: 0;
	color: hsl(90, 19%, 13%);
	font-size: 100%;
	text-shadow: 0 0.1em 0 hsl(86, 25%, 80%);
	width: auto;
	box-shadow: 0.063em 0.13em 0.13em 0.063em hsl(160, 26%, 38%);
	outline: none;
	padding: 0.3em 0.35em 0.2em 0.35em;
	margin: 0.13em 0.25em;
	line-height: 1;
	&:focus, &:hover {
		position: relative;
		top: 0.08em;
		color:light-dark(hsl(0, 97%, 26%), hsl(60, 100%, 70%));
		background: linear-gradient(to bottom, light-dark(hsl(94, 4%, 76%), hsl(90, 2%, 23%)) 0%, light-dark(hsl(120, 33%, 98%), hsl(0, 0%, 32%)) 100%);
		box-shadow: .063em .125em .125em .063em light-dark(hsl(160, 26%, 38%), transparent);
		text-shadow: none;
	}
	&:active {
		top: 0.22em;
		background: linear-gradient(to bottom, hsl(0, 50%, 73%) 0%, hsl(342, 78%, 21%) 100%);
		box-shadow: .063em .125em .125em .063em hsl(160, 26%, 38%);
		color:inherit;
	}
}



/* $$$$$$$$$$$$$$$$$$$$$$ SUBMISSION FORMS $$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
.hashover-form-section {
	border: 0.063em solid hsl(120, 26%, 86%);
	border-radius: 0.25em;
	margin-left: 2.5em;
}

/* Top of submission form */
.hashover-title.hashover-main-title.hashover-dashed-title {
	display: none;
}

.hashover-main-message {
	text-align: center;
	color: hsl(0, 95%, 65%);
	margin: 0.13em 0.2em 0 0;
}

.hashover-inputs {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0.31em 0 0.13em 0;
	border-radius: 0.25em 0.25em 0 0;
	text-align: center;
	position: relative;
}

.hashover-inputs .hashover-avatar-image {
	position: absolute;
	left: -2.3em;
}

.hashover-comment-name.hashover-top-name, .hashover-name-plain.hashover-top-name {
	width: calc(100% - 0.625em);
	margin: 0 0.31em;
}
.hashover-top-name a {
	text-decoration: none;
}

.hashover-input-cell{
		flex: 1 1 auto;
		margin: 0 0.2em 0.2em 0.2em;
}
.hashover-input-info {
	width: 98%;
}

/* Personal detail stuff - is not used and we prevent empty boxes */
/* Also remove barkdull's links to stuff */
.hashover-required-fields, .hashover-end-links {
	display: none;
}

/* Bottom of submission form */
/* The FORMATTING div that displays formatting options */
/* Height is set to 0 to hide it initially */
/* NB: Applies to ALL forms */
.hashover-formatting-message {
	width: 100%;
	max-height: 0em;
	overflow: hidden;
}
.hashover-formatting-message .hashover-title {
	font-weight: bold;
	text-align: center;
	color: hsl(0, 100%, 50%);
}

/* The div that displays the formatting options */
.hashover-formatting-table {
	margin: 0.31em auto 0 auto;
	width: 98%;
	border-style: solid;
	border-width: 0.063em 0.063em 0.13em 0.063em;
	border-color: hsl(120, 100%, 20%);
	background-color: hsl(160, 100%, 97%);
	border-radius: 0.25em;
}

.hashover-formatting-table>div {
	padding: 0.25em 0.13em 0.25em 0.56em;
}

/* $$$$$$$$$$$$$$$$$$$$$$ HASHOVER EYE ICON TO TOGGLE PASSWORD VISIBILITY $$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
.hashoverPW-btn{
	margin-left: -2em;
	width:2em;
	min-width: 2em;
	background: none;
	border: none;
	cursor: pointer;
	outline: inherit;
}
[id^='hashover-main-password']{padding-right: 2em;}

.hashover-input-cell:nth-last-child(3) {display:flex;}
.hashover-password-input{flex:1 1 auto;}

/* $$$$$$$$$$$$$$$$$$$$$$ Footer at the end of the main submission form $$$$$$$$$$$$$$$$$$$$$$ */
/* NB: Also at foot of other forms too */
.hashover-form-footer {
	padding: 0.31em;
	display: flex;
	flex-wrap: wrap;
	min-height: 2.56em;
	justify-content: space-between;
	border-radius: 0 0 0.25em 0.25em;
}

/* $$$$$$$$$$$$$$$$$$$$$$ Section for "Notify me of Replies" checkbox and "Formatting" link $$$$$$$$$$$$$$$$$$$$$$ */
/* $$$$$$$$$$$$$$$$$$$$$$ NO LONGER USE THE replies checkbox $$$$$$$$$$$$$$$$$$$$$$ */
/*.hashover-form-links {
	display: inline-flex;
	flex-wrap: wrap;
	margin-bottom: 0.2em;
	position: relative;
}
.hashover-form-links label:focus,
.hashover-form-links label:hover {
	margin-top: 0.063em;
	margin-bottom: -0.063em;
}*/

/* "Notify me of Replies" checkbox */
/*.hashover-form-links label {
	cursor: pointer;
	margin-right: 0.5em;
}*/
/* the transform scale is a hack for chrome browser */
/*.hashover-form-links label input {
	width: 1em;
	height: 1em;
	font-size: 83%;
	transform: scale(1);
} */

/* Section with Login/Logout/Post/Edit/Reply "buttons" */
/* Style all the input buttons the same, note that the cancel "button" is not an input, but a link, so various styles have to be forced on */
.hashover-form-buttons {
	justify-content: flex-end;
	flex-grow: 1;
	flex-shrink: 1;
	display: inline-flex;
	flex-wrap: wrap;
/*	font-family: Arial, Helvetica, Roboto, sans-serif;*/
	align-items: flex-start;
}
/* Important: all these are meant to look like a button, though all are <input> except the Cancel <a> tag */

/* $$$$$$$$$$$$$$$$$$$$$$ MAIN COMMENTS Section $$$$$$$$$$$$$$$$$$$$$$$$$$$$ */
/* The remaining part is covered by the hashover-comments-section
	which contains the count and the dropdown to choose sorting */

/* General styling of links */
.hashover-comments-section a {
	text-decoration: none;
	display: inline-block;
}

/*The count and the dropdown section */
.hashover-count-sort {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 1.25em 0.625em 0.94em 0.625em;
	align-items: center;
	background: inherit;
}

/* Dropdown to choose what way the comments are arranged */
.hashover select {
	height: 1.71em;
	color: hsl(240, 100%, 50%);
	background-color: inherit;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	padding: 0.13em 0.13em 0.13em 0.25em;
	cursor: pointer;
/* 	outline: 0 !important; */
}

.hashover-sort-select:before {
	content: "Sort by:";
	color: inherit;
}

.hashover select:focus, .hashover select:hover, .hashover select:focus-visible, .hashover select:active{
	color: hsl(0, 100%, 50%);
	position: relative;
	top:1px;
	outline: 0 !important;
}

/* Style and remove unwanted options from the dropdown */
.hashover select option{
	background: hsl(48, 100%, 97%);
	color: hsl(0, 0%, 0%);
}

/* $$$$$$$$$$$$$$$$$$$$$$ THE COMMENTS $$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

/* $$$$$$$$$$$$$$$$$$$$$$ Individual comments $$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

/* NB: The overall container for each comment also encloses all its replies	
and the individual replies do not have an encompassing div, but are composed of
two divs .hashover-header and .hashover-balloon */

/* The overall container for each comment and its replies */
.hashover-comment {
	margin: 0 0 0.625em 2.5em;
	border-radius: 0.25em;
}

/* Header for each comment */
.hashover-comment .hashover-header {
	margin-top: 1.06em;
	padding: 0 0.25em 0.2em 0.25em;
	display: flex;
	justify-content: space-between;
	align-items: baseline; /* align-items: center; For borders */
	position: relative;
	flex-wrap: wrap;
}

.hashover-avatar {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	left: -2.5em;
	bottom: -0.25em;
	margin-bottom: 0.25em;
}
/*.hashover-comment-name.hashover-name-plain, .hashover-comment-name.hashover-name-website */
.hashover-comment-name {
	font-weight: bold;
	display: inline-block;
	margin: 0 auto 0 -1.5em;
	padding-top: 0.25em;
}

.hashover-comment-name.hashover-name-plain span:first-child, .hashover-comment-name.hashover-name-website span:first-child{
	padding-right:0.25em;
}

.hashover-comment-name.hashover-name-website > a {
	text-decoration: underline;
}

.hashover-thread-link{
	/*margin-left: auto;*/
	padding-right: 0.31em;
/*	padding-top: 0.25em;*/
	padding-top: 0;
}
 
/* Actual text of the comment */
.hashover-content {
	margin-top: 0.25em;
	padding: 0.45em 0.35em 0.35em 0.65em ;
	line-height: 1.3;
	background: hsl(48, 100%, 97%);
	border-style: solid;
	border-color: hsl(120, 68%, 85%);
	border-width: 0.063em;
	border-radius: 0.25em;
	overflow: hidden;
	/* in case the comment includes faulty markup or long lines */
}

/* The footer of the comment */
.hashover-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0.2em 0.31em;
	align-items: center;
	font-size: 94%;
	line-height: 1;
}

/* Container for Date and Like Count and Dislike Count */
.hashover-footer .hashover-date {
	margin: 0.4em auto 0 0;
	align-self: baseline;
}

.hashover-date-permalink {
	text-decoration: none;
}

/* Container for Edit and Reply buttons */
.hashover-footer .hashover-buttons {
	display: flex;
	justify-content: space-evenly;
	margin: 0 0 0 auto;
	flex-wrap: wrap;
}

.hashover-like:before,
.hashover-liked:before,
.hashover-dislike:before,
.hashover-disliked:before,
.hashover-comment-edit:before,
.hashover-comment-reply:before{
	vertical-align: text-top;
	content:'\00a0';
	display: inline-block;
	padding-right: 1rem;
}

/* Edit button */
.hashover-comment-edit:before {
	background: url("/images/wrench.svg") 0 0.13em no-repeat /* !important */;
	filter: invert(18%) sepia(85%) saturate(1500%) brightness(99%) contrast(102%);
}

/* Reply button */
.hashover-comment-reply:before{
	background: url("/images/reply.svg") 0 0.13em no-repeat /* !important */;
	filter: invert(75%) sepia(75%) saturate(7000%) brightness(99%) contrast(102%);
}

/* $$$$$$$$$$$$$$$$$$$$$$ images in comments $$$$$$$$$$$$$$$$$$$$$$ */

.hashover-embedded-image {
	cursor: pointer;
	display: inline-block;
	position: relative;
	max-width:90%;
	max-height:25em;
	height:auto;
}

.hashover-embedded-image:focus,
.hashover-embedded-image:hover{
	top: 2px;
	filter: saturate(600%);
}

/* $$$$$$$$$$$$$$$$$$$$$$ Reply comments and comments with replies $$$$$$$$$$$$$$$$$$$$$$ */
.hashover-comment.hashover-reply {
	width: 97%; /* Progressive indentation */
	margin-left: auto;
}

/* NB: Make all comments below third indentation with no further indent otherwise comments can get too narrow */
.hashover-has-replies .hashover-has-replies .hashover-has-replies .hashover-comment {
	width: 100%;
	margin-left: 0;
}

/* $$$$$$$$$$$$$$$$$$$$$$ The Reply form that appears when someone wants to edit or reply $$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

.hashover-reply-form .hashover-avatar-image {
	display: none;
}

.hashover-reply-form .hashover-inputs {
	margin: 0.13em 0 0.13em 0;
	border: 0;
}

/* $$$$$$$$$$$$$$$$$$$$$$ The Editing form $$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

form.hashover-edit-form {
	margin-top: 0.5em;
}

.hashover-edit-form select,
.hashover-edit-form .hashover-title.hashover-dashed-title {
	text-align: center;
	margin-bottom: 0.13em;
}

.hashover-edit-form .hashover-inputs {
	padding: 0.2em 0.2em 0.25em 0.25em;
}

/* Deleted comments if not wanting them displayed */
.hashover-deleted {
	display: none;
}

.hashFoot{
	display: flex;
	justify-content: space-between;
	margin-top: 0.94em;
	text-align: center;
	font-size: 85%;
}
.hashFoot img{
	height: calc(1 * 1.62em);
	width: auto;
	margin: 0 0.25em;
	flex:0 0 auto;
}

/* $$$$$$$$$$$$$$$$$$$$$$ Styling of Markup in comments $$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

.hashover big {
	font-size: 110%;
}

.hashover small{
	font-size: 85%;
}
.hashover sup,
.hashover sub {
	font-size: 75%;
}

.hashover ul,
.hashover ol {
	margin: 0.13em 0 0.56em 1.44em;
	padding: 0;
	line-height: 0.33;
}

.hashover li {
	line-height: 1.2 /* !important */;
}

.hashover pre {
	display: block;
	font-family: monospace;
	white-space: pre;
	color: hsl(0, 0%, 0%);
	background-color: hsl(120, 26%, 86%);
	margin: 0.44em 0;
}

.hashover code {
	padding: 0.063em 0.25em;
	font-family: monospace;
	white-space: nowrap;
	line-height: 1;
	color: hsl(0, 0%, 0%);
	background-color: hsl(120, 26%, 86%);
}

code.hashover-inline {
	background-color: hsl(60, 100%, 82%);
	font-family: inherit !important;
}

/* Waiting to Connect animation */
/* Requires inside the hashover div: */
/* <div class = "blobHolder"><div class = "blob1"></div><div class = "blob2"></div> */
.blobHolder{
	width: 12.5em;
	height: 1.9em;
	position: relative;
	top: 0.94em;
	left: 50%;
	transform: translate(-50%,-50%);
}
.blob1,.blob2{
	width: 1.9em;
	height: 1.9em;
	position: absolute;
	border-radius: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background:hsl(180, 100%, 50%);
}
.blob1{
	left:20%;
	animation:osc-l 2.5s ease infinite;
}
.blob2{
	left:80%;
	animation:osc-r 2.5s ease infinite;
}

@keyframes osc-l{
	0%{left:20%;}
	47%{left:50%;background: hsl(0, 78%, 69%);}
	53%{left:50%;background: hsl(0, 78%, 69%);}
	100%{left:20%;}
}
@keyframes osc-r{
	0%{left:80%;}
	47%{left:50%;background: hsl(0, 78%, 69%);}
	53%{left:50%;background: hsl(0, 78%, 69%);}
	100%{left:80%;}
}

/* $$$$$$$$$$$$$$$$$$$$$$ My Show Hide Buttons $$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

/*.hashShowHide{
	padding: 1em 1em 1em 1em;
	width: 90%;
	margin-top: 1.3em;
	font-size: 120%;
}*/