/****** POST BOX ELEMENTS *******/

#postForm textarea {
	width: 100%;
	max-width: 100%;
	max-height: 450px;
}

#postMessage .initialText {
	color: #aaa !important;
	font-style: italic !important;
}

#postMessage input[type=text],
#postMessage select,
#postMessage textarea {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 3px;
	margin: 8px 0px;
	color: #000;
	font-size: 1.3rem;
	font-style: normal;
	border: 1px solid #888;
}

#postMessage textarea {
	overflow: hidden;
}

.submitButton {
	color: #666;
	font-size: 1.4rem;
	height: 32px;
	width: 115px;
	border: 2px solid #ccc;
	background: url(/images/site-assets/button_bg.gif) repeat-x #f5f5f5;
	cursor: pointer;
	float: right;
	-moz-border-radius: 6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

.submitButton:hover {
	background-position: bottom;
	border-color: #dddddd;
	color: #333333;
}

.btnDelete {
	cursor: pointer;
}

.inact,
.inact:hover {
	background: #f5f5f5;
	border: 1px solid #e7e7e7;
	color: #aaaaaa;
	cursor: auto;
}

.counter {
	color: #CCCCCC;
	float: right;
	font-family: Georgia, serif;
	font-size: 3.2rem;
	font-weight: bold;
	height: 40px;
	overflow: hidden;
}


/****** TIMELINE ELEMENTS *******/

#timeline{
	box-shadow: 3px 3px 9px #888;
}
#timeline h1,
#timeline h2,
#timeline h3,
#timeline h4,
#timeline h5 {
	font-family: 'Chelsea Basis Medium';
	font-weight: 400;
}
#timeline h5 {
font-size: 1.7rem;
}
.listing_header{
	background-color: #006cff;
	color:#eee;
	padding:12px 0;
	margin:0px auto;
	text-align: center;
	cursor: pointer;
}
.listing_header b:hover{
	color: #f1cc1b;
}
ul.statuses {
	margin: 0 0 10px;
	padding: 0px;
}

ul.statuses li {
	position: relative;
	border-bottom: 1px dashed #D2DADA;
	padding: 10px;
	list-style: none;
	font-size: 1.4rem;
}

ul.statuses li:first-child {
	border-top: 0px;
}

ul.statuses li:last-child {
	border-bottom: 0px;
}

ul.statuses li:hover {
	background-color: #F7F7F7;
}

.thepost {
	background-color: #eee;
}

.thepost:hover {
	background-color: #f0f0f0;
}

.thepost {
	display: grid;
	grid-template-columns: 70px auto 50px;
	grid-gap: 10px;
	background-color: #fff;
	border-top: 2px solid #d0d0d0;
	padding: 8px 0;
}

.msgAvatar {
	grid-column: 1;
	grid-row: 1 / span 1;
	text-align: center;
}

.msgAvatar img.avatar {
	border-radius: 10px;
	width: 50px;
	max-width: 50px;
	max-height: 50px;
	min-height: 50px;
}

.msgInfo img.avatar:hover {
	-webkit-filter: brightness(70%);
}
#chat-tools #account_box{
	margin: 10px auto;
	text-align: center;
}
#chat-tools #account_box .avatar {
height: 34px;
margin-left: 10px;
border-radius: 7px;
}

.msgWrap {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.msgText {
	font-family: 'Chelsea Basis Medium';
	color: #3050a0;
	font-size: 1.7rem;
	padding-bottom: 10px;
}

.msgInfo {}

.msgInfo a {
	color: #000;
	font-weight: bold;
	font-size: 1.2rem;
}
.msgInfo a:hover {
	text-decoration: underline;
}
.msgInfo span.repliesnum::before{
    content: "\1f4ac";
    font-size: 1.4rem;
		margin-right: 5px;
    vertical-align: bottom;
}
.msgInfo span.repliesnum{
	font-size: 1.2rem;
	margin-left: 5px;
}
.msgDate {
	grid-column: 2;
	grid-row: 1 / span 1;
	font-size: 1.2rem;
	color: #999999;
	display: inline-block;
	float: right;
  text-align: right;
}

.msgIcons {
	grid-column: 3;
	grid-row: 1 / span 2;
	text-align: center;
}
.msgIcons .button-1{
	background:#bebebe;
	border:0;
	color:#000;
}
.thereplies {
	display: none;
	grid-column: 1 / span 3;
	grid-row: 3 / span 2;
	background-color: #edf1f4;
	padding: 0 20px 0 5px;
  margin: 30px 15px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	box-shadow: 3px 3px 9px #aaa;
}

#modal_thread .modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	border: 1px solid #888;
	width: 80%;
	top: 35%;
	transform: translateY(-25%);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.thread_btn {
	cursor: pointer;
}
.loadmore{
	cursor: pointer;
	background-color: #006cff;
	color:#eee;
	padding:12px 0;
	margin:0px auto;
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
}
#timeline > span {
	display: n;
}
#timeline > span:last-of-type {
	display: block;
}
.loadmore:hover{
	color:#0035ca;
}

.postFooter {
	clear: both;
	width: 99%;
	color: #888;
	font-size: 10px;
	margin-top: 20px;
	padding-top: 5px;
	height: 15px;
	border-top: 1px solid #888;
}

.postFooter .postDisclaimer {
	font-style: italic;
	padding-left: 10px;
	float: left;
}

.postFooter .postTime {
	width: 140px;
	float: right;
	padding-left: 7px;
}

.mod_edit {
	clear: both;
	width: 99%;
	height: 15px;
	text-align: right;
}
.mod_edit button{
	display: inline-block;
	margin-right: 7px;
}

.postdate {
	height: 20px;
	width: 300px;
	border: 1px solid #ff0000;
	padding-left: 10px;
}

.thumbpic {
	width: 50px;
	height: 55px;
	overflow: hidden;
	float: right;
	padding-right: 5px;
	margin-bottom: 7px;
}

.post_replyline {
	position: relative;
	height: 32px;
}

.post_replyline_box {
	position: relative;
	display: inline-block;
	top: 0px;
	color: #111;
}
.post_replyline_box:nth-child(n+2){
	float:right;
	margin-left:10px;
}
.post_replyline_box .icon{
	padding-top:5px;
}
.post_replyline_box a {
	color: #3640ba;
}

#orignalpost{
	font-size:85%;
	font-weight: normal;
	font-style: italic;
}
[data-othertype="mods"] {
	background-color: #249f41;
}

i.fa,i.fa-solid,i.fa-brands { margin-left:6px; padding-left: 3px; }
i.fa-square-x-twitter, i.fa-x-twitter {  color: #000;  }
i.fa-twitter { color: #1d9bf0; }
i.fa-bluesky { color: #0085ff;  }
i.fa-instagram { color:#feda77;  }
i.fa-youtube { color: #ff6161;  font-size: 1.15em; }
i.fa-image { color: #8de186;  }
i.fa-link { color: #befffa;  }


/*************** Normal Bubble ***************/
div.bubble {
	clear: both;
	width: auto;
	margin: 25px 0px 30px 20px;
	padding-top: 5px;
}

div.bubble blockquote {
	margin: 0px;
	padding-bottom: 10px;
	padding-left: 5px;
	border: 1px solid #c9c2c1;
	background-color: #fff;
}

div.bubble blockquote p {
	margin: 10px;
	padding: 3px;
}

div.bubble cite {
	position: relative;
	margin: 0px;
	padding: 7px 0px 0px 15px;
	top: 6px;
	font-style: normal;
}

.white {
	color: #fff;
}
.nomore {
  display: none;
}

/*********** rounded Bubble *****************/

div.bubble div.rounded_bubble {
	position: relative;
	margin-bottom: 10px;
	border: 1px solid #6a6a6a;
  box-shadow: 1px 1px 7px #666;
	background-color: #ededed;
	border-radius: 7px;
	padding: 15px;
}

div.bubble div.rounded_bubble blockquote {
	border: 0;
	background-color: transparent;
}

div.bubble div.rounded_bubble blockquote p {
	margin: 0px 10px;
}

div.bubble cite.rounded_bubble,
div.bubble cite.rounded_bubble_newpost {
	position: relative;
	margin: 0px;
	padding-left: 15px;
	padding-top: 12px;
	margin-bottom: 10px;
	top: 9px;
	border-radius: 7px;
}

div.bubble cite.rounded_bubble_newpost {
	border-radius: 7px;
}

div.bubble div.rounded_bubble h3 {
	padding: 5px 0px 0px 5px;
}

.rounded_bubble blockquote a {  color:#DEA200; }
.rounded_bubble blockquote a:hover {  color:#FFFF40; }
.rounded_bubble strong {
	color: #909090;
	margin-left: 13px;
}
div.bubble div.rounded_bubble.firstpost{
	background-color: #cee2f9;
	color:#000;
}

/***********  REGISTER **********/

.register-form {
	width: 500px;
	margin: 0 auto;
	text-align: center;
	padding: 10px;
	color: #fff;
	background: #c4c4c4;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.register-form form input {
	padding: 5px;
}

.register-form .btn {
	background: #726E6E;
	padding: 7px;
	border-radius: 5px;
	text-decoration: none;
	width: 50px;
	display: inline-block;
	color: #FFF;
}

.register-form .register {
	border: 0;
	width: 60px;
	padding: 8px;
}


/****** GENERAL STYLING *******/

.clear {
	clear: both;
}

.hide {
	display: none;
}

#postForm {
	text-align: center;
}

#postForm #inputField {
	min-height: 120px;
}

@media (max-width: 1240px) {
	#username {
		width: 100%;
		display: block;
	}

	.submitButton {
		margin: 0 auto;
		float: none;
	}
}


/****** mobile ********/
@media (max-width: 800px) {
  .thepost{
	  grid-template-columns: 70px auto;
	}
	.msgWrap, .msgIcons .thereplies {
		float: none;
		display: block;
		grid-column: 2;
	}
	.msgWrap{
		grid-column: 2;
		grid-row: 1 / span 1;
	}
	.msgDate{
		padding-top: 10px;
		margin-right: 8px;
    display: block;
		float:none;
		text-align: right;
	}
	.msgIcons{
		grid-column: 3;
	  grid-row: 1 / span 1;
	}
	.thereplies{
		grid-column: 1 /span 3;
    grid-row: 3 / span 1;
		margin: 10px 15px 15px 0;
		padding:8px;
	}
	div.bubble{
		margin: 10px 0px 20px 12px;
	}
		.postFooter .postDisclaimer{
		float: none;
		display: none;
	}
	.post_replyline{
	height: fit-content;
	}
	.post_replyline_box{
		display: block;
		float: none;
		margin-bottom: 10px;
	}	
	.post_replyline_box:first-child{
		width:100%;
		text-align: left;
	}
	.post_replyline_box:nth-child(2){
		float: left;
    text-align: left;
    width: 40%;
    min-height: 40px;
	}	
	.post_replyline_box:last-child{
		float: right;
		margin-bottom: 50px;
	}
	div.bubble cite{
		text-align: right;
		padding: 0;
		top:1;
	}	
}