/* @charset "UTF-8"; */
/* @import url("footer-style.css"); */

:root{

	--dark-1: #0d1117;
	--dark-2: #161b22;
	--dark-3: #21262d;
	--baseColor: whitesmoke;
	--hoverBaseColor: #f0f0f0;
	/* #323232 */
	--highlightColor: #d9762e;
/* 	--highlightColor: crimson; */
	--fontColor: whitesmoke;

	/* previous/current/following post bg color */
	--nrmlPstBG: var(--baseColor);
	--prvPstBg: var(--baseColor);
	--crntPstBg: white;
	/*--fllwPstBg: #f9f1f1;*/
	--fllwPstBg: var(--baseColor);

	/* name are meant to be percentages */
	--twenty: 180px;
	--forty: 360px;
	--sixty: 540px;
	--eighty: 720px;
	--hundred: 900px;

	--maxwidth: var(--hundred);
	--minwidth: 320px;

	--navBarHeight: 75px;

	--radiusPixelSize: 2px;
	--secondaryRadPixSize: 5px;
	--buttonRadiusSize: var(--radiusPixelSize);

	--brdColorOpct: rgba(0, 0, 0, 0.10);
	--fntClrOpct: rgba(0, 0, 0, 0.25);
}
/*****************************************************************************************/
/************************************ BASE ELEMENTS **************************************/
/*****************************************************************************************/
*, ::after, ::before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
@font-face {
	font-family: itcKabelFontFace;
	src: url(../font/ITCKABELSTD-BOOK.OTF);
}
@font-face {
	font-family: itcKabelFontFace;
	src: url(../font/ITCKABELSTD-DEMI.OTF);
	font-weight: bold;
}
@font-face {
	font-family: itcKabelFontFace;
	src: url(../font/ITCKABELSTD-BOLD.OTF);
	font-weight: 900;
}
html, body {
	color: var(--fontColor);
	font-family: "ITC Kabel Std Book", "itcKabelFontFace", "Segoe UI", "Trebuchet MS", Helvetica, Arial, sans-serif;
	height: 100%;
	width: 100%;
}
body{
	overflow: hidden;
	overflow-y: scroll;
	/*background-color: var(--dark-1);*/
}
a{
	color: inherit;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
input[type="text"], input[type="email"], input[type="password"], button, textarea{
	font-family: inherit;
	padding: 5px;
	border: 1px solid var(--brdColorOpct);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus{
	border-color: var(--highlightColor);
}
input[type="color"], input[type="color"]:before, input[type="color"]:after{
	border: 0;
	outline: none;
	background: none;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
input[type="radio"]{
	/*background-color: blue;*/
}
label::selection{
	background-color: red;
}
textarea{
	resize: vertical;
}
button, .actvBttn:hover{
	border: 1px solid transparent;
	border-radius: var(--buttonRadiusSize);
	background-color: var(--highlightColor);

	color: var(--baseColor);
	font-weight: bold;
	font-size: 15px;

	/*padding: 0 10px;*/
}
button:hover, .actvBttn{
	border-color: var(--highlightColor);
	background-color: var(--baseColor);
	color: var(--highlightColor);
	cursor: pointer;
}
nav{
	z-index: 999;

	position: fixed;
	bottom: 0;
	left:0;
	right: 0;

	width: 100%;
}
ul{
	list-style-type: none;
}
ul li{
	/*background-color: pink;*/
}
.pntrHvr:hover{
	cursor: pointer;
}
/*****************************************************************************************/
/************************************ FLEX ELEMENTS **************************************/
/*****************************************************************************************/
.rflx{
	display: flex;
	flex-direction: row;
}
.cflx{
	display: flex;
	flex-direction: column;
}
.ovflwHidden{
	overflow: hidden;
}
.displayNone{
	display: none;
}
.algnItmFlxEnd{
	align-items: flex-end;
}
.algnItmFlxStart{
	align-items: flex-start;
}
.algnItmFlxCenter{
	align-items: center;
}
.jstfyCntSpBtwn{
	justify-content: space-between;
}
.jstfyCntFlxEnd{
	justify-content: flex-end;
}
.jstfyCntFlxStart{
	justify-content: flex-start;
}
.jstfyCntFlxCenter{
	justify-content: center;
}
.flxWrap{
	flex-wrap: wrap;
}
/*****************************************************************************************/
/************************************ SIZE ELEMENTS **************************************/
/*****************************************************************************************/
.fullWidth{
	width: 100%;
}
.fullHeight{
	height: 100%;
}
.fullMinWidth{
	max-width: var(--minwidth);
}
.minWidth{
	min-width: var(--minwidth);
}
/* numbers are meant to be percentages (100/5) */
.w20{
	width: var(--twenty);
}
.h20{
	height: var(--twenty);
}
.w40{
	width: var(--forty);
}
.h40{
	height: var(--forty);
}
.w60{
	width: var(--sixty);
}
.h60{
	height: var(--sixty);
}
.w80{
	width: var(--eighty);
}
.h80{
	height: var(--eighty);
}
.w100{
	width: var(--hundred);
}
.h100{
	height: var(--hundred);
}
.navHght{
	max-height: var(--navBarHeight);
	min-height: var(--navBarHeight);
	height: 100%;
}
.navHghtInWidth{
	max-width: var(--navBarHeight);
	min-width: var(--navBarHeight);
	width: 100%;
}
.usrIconPrcnt{
	width: 10%;
}
@media(max-width: 479px) {
	.usrIconPrcnt{
		width: 20%;
	}
}
.icnBox20px{
	min-height: 20px;
	max-height: 20px;
	height: 100%;
	min-width: 20px;
	max-width: 20px;
	width: 100%;
}
/*****************************************************************************************/
/************************************* TEXT ELEMENTS *************************************/
/*****************************************************************************************/
.fntSize12{
	font-size: 12px;
}
.fntSize15{
	font-size: 15px;
}
.fntSize18{
	font-size: 18px;
}
.fntSize20{
	font-size: 20px;
}
.fntSize25{
	font-size: 25px;
}
.fntHglghClr{
    color: var(--highlightColor);
}
.txtAlLeft{
	text-align: left;
}
.txtAlRight{
	text-align: right;
}
.txtAlCenter{
	text-align: center;
}
.txtAlJustify{
	text-align: justify;
}
.txtNoWrap{
	white-space: nowrap;
}
.txtBold{
	font-weight: bold;
}
.txtNormal{
	font-weight: normal;
}
.txtUnderlineHover:hover{
	text-decoration: underline;
}
.txtHgLgColor{
	color: var(--highlightColor);
}
.prelined{
	white-space: pre-line;
}
/*****************************************************************************************/
/*********************************** BORDER ELEMENTS *************************************/
/*****************************************************************************************/
.softBorderTop{
	border-top: 1px solid;
	border-top-color: var(--brdColorOpct);
}
.softBorderBot{
	border-bottom: 1px solid;
	border-bottom-color: var(--brdColorOpct);
}
.softBorderRght{
	border-right: 1px solid;
	border-right-color: var(--brdColorOpct);
}
.softBorderLft{
	border-left: 1px solid;
	border-left-color: var(--brdColorOpct);
}
.softBorderAll{
	border: 1px solid;
	border-color: var(--brdColorOpct);
}
.softBorderAllHover{
	border: 1px solid;
	border-color: var(--brdColorOpct);
}
.softBorderAllHover:hover{
	border-color: var(--highlightColor);
}
.hglgtBorderAll{
	border: 1px solid;
	border-color: var(--highlightColor);
}
.hglgtBorderTop{
    border-top: 1px solid;
	border-top-color: var(--highlightColor);
}
.brdRadMain{
	border-radius: var(--radiusPixelSize);
}
.brdRadScnd{
	border-radius: var(--secondaryRadPixSize);
}
.brdRad5px{
	border-radius: 5px;
}
.brdRad2px{
	border-radius: 2px;
}
.brdHover{
	border: 1px solid transparent;
}
.brdHover:hover{
	border-color: var(--highlightColor);
}
.noBrdRadLft{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.noBrdRadRgt{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.noBrdRadTop{
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.noBrdRadBot{
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
/*****************************************************************************************/
/************************************ COLOR ELEMENTS *************************************/
/*****************************************************************************************/
.dark1{
	background-color: var(--dark-1);
}
.dark2{
	background-color: var(--dark-2);
}
.dark3{
	background-color: var(--dark-3);
}
.hglghtClr{
	border-color: var(--highlightColor);
}
.opct50{
	opacity: 0.5;
}
.previousPostBGClr, .normalPostBGClr{
	background-color: var(--prvPstBg);
	/*box-shadow:0 0 5px rgba(0, 0, 0, 0.05);*/
}
.currentPostBGClr{
	background-color: var(--crntPstBg);
/* 	background-color: var(--highlightColor); */
/* 	border: 1px solid var(--highlightColor); */
	box-shadow:0 0 5px rgba(0, 0, 0, 0.1);
}
.followingPostBGClr{
	background-color: var(--fllwPstBg);
	box-shadow:0 0 5px rgba(0, 0, 0, 0.20);
}
.postHover:hover{
	/*background-color: salmon;*/
	background-color: rgba(250, 128, 114, .05);
}
.bxShdw15{
	box-shadow:0 0 5px rgba(0, 0, 0, 0.15);
}
.bxShdw20{
	box-shadow:0 0 5px rgba(0, 0, 0, 0.20);
}
.sftBGHover{
	text-decoration: none;
	background-color: transparent;
	border: 0;
	border-left: 4px solid transparent;
}
.sftBGHover:hover{
	text-decoration: none;
	font-weight: bold;
	background-color: var(--hoverBaseColor);
	border-left: 4px solid var(--highlightColor);
}
/*****************************************************************************************/
/********************************** POSITION ELEMENTS *************************************/
/*****************************************************************************************/
.mrgAuto{
	margin: auto;
}
.mrgAuto0{
	margin: auto 0;
}
.mrg0Auto{
	margin: 0 auto ;
}
.pddng5px{
	padding: 5px;
}
.pddng0px5px{
	padding: 0 5px;
}
.pddng5px0px{
	padding: 5px 0;
}
.pddng0px{
	padding: 0;
}
.mrg5px{
	margin: 5px;
}
.mrgLeft5px{
	margin-left: 5px;
}
.mrgRight5px{
	margin-right: 5px;
}
.mrgTop5px{
	margin-top: 5px;
}
.mrgBot5px{
	margin-bottom: 5px;
}
.mrg5px0px{
	margin: 0;
	margin-top: 5px;
	margin-bottom: 5px;
}
.mrg0px5px{
	margin: 0;
	margin-left: 5px;
	margin-right: 5px;
}
.pddngBot0px{
	padding-bottom: 0;
}
.pddngTop5px{
	padding-top: 5px;
}
.pddngBot5px{
	padding-bottom: 5px;
}
.pddngLft5px{
	padding-left: 5px;
}
.pddngRgt5px{
	padding-right: 5px;
}
.pddng0px25px{
	padding: 0 25px;
}
.stckyTop{
	/*reminder: parent should not have overflow*/
	position: sticky;
	top: 0;
}
.zIndxVeryHigh{
	z-index: 999;
}
.zIndxHigh{
	z-index: 75;
}
.zIndxMed{
	z-index: 45;
}
.zIndxLow{
	z-index: 25;
}
.posRelative{
	position: relative;
}
/*****************************************************************************************/
/*************************** CONTENT/SPECIFIC ELEMENTS ***********************************/
/*****************************************************************************************/
.fllBdyClr{
	position: fixed;
	z-index: -9999;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	background-color: var(--highlightColor);
	opacity: 0.1;
}
.container {
	margin: 0 auto;
	/*padding-top: 10px;*/
	padding-bottom: calc(var(--navBarHeight) + 5px);
/* 	padding-bottom: calc(5px + var(--navBarHeight)); */

	max-width: var(--maxwidth);
	min-width: var(--minwidth);
	width: 100%;
	min-height: 100%;

	/*box-shadow:0 0 5px rgba(0, 0, 0, 0.15);*/
	/*box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);*/
	/*box-shadow: 0 0 5px rgba(220, 20, 60, 0.5);*/
}
.navContainer {
	margin: 0 auto;
	padding: 0;

	max-width: var(--maxwidth);
	min-width: var(--minwidth);
	width: 100%;

	min-height: var(--navBarHeight);

	border-top: 1px solid var(--highlightColor);
	box-shadow:0 0 5px rgba(0, 0, 0, 0.15);
}
.userPicWrapper{
	position: relative;
	height: 40px;
}
.userPicStyle{
	z-index: 9;
	position: absolute;
	left: calc(50% - 55px);

	height: 110px;
	width: 110px;
	bottom: 0;
	padding: 5px;
}
.coloredLineTop{
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--highlightColor);

	box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.connectingDiv{
	margin: 0 auto;
	background-color: var(--brdColorOpct);
	width:2px;
	height: 5px;
}
.sqrOuter {
	/*background-color: #d7d7d7;*/
	/*border: 1px solid black;*/
	position: relative;
	width: 100%;
}
.sqrOuter:before {
	content: "";
	display: block;
	padding-top: 100%;
}
.sqrInner {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.nvButton{
	/*padding: 0;*/
	margin: 0;
	/*width: var(--navBarHeight);*/
	width: 100%;
	height: 100%;

	color: var(--highlightColor);
	background-color: transparent;
	border: 0;
	border-radius: 0;
}
.nvButton:hover{
	border-top: 3px solid var(--highlightColor);
/* 	border-bottom: 3px solid  var(--highlightColor); */
}
.nvMenuButton{
	min-width: 100%;
	min-height: 100%;

	/*border: 0;*/
	/*border-left: 4px solid transparent;*/
	border-radius: 0;
	color: var(--highlightColor);
	/*text-decoration: none;*/
	height: 40px;
	/*background-color: transparent;*/
	font-weight: normal;
}

.pstButton{
	background-color: transparent;
	border: 1px solid var(--fntClrOpct);
	color: var(--fntClrOpct);
	font-weight: normal;

}
.pstButton:hover{
	border: 1px solid var(--highlightColor);
	color: var(--highlightColor);

}
.qckPanel{
	position: absolute;
	top: 0px;
	right: 5px;
	max-width: 125px;
	min-width: 100px;
}
.userBgPic{
	background-color: lightgrey;
	background-position: center;
	background-repeat: no-repeat;
}
/*****************************************************************************************/
/********************************** SVG ELEMENTS ************************************/
/*****************************************************************************************/
.svgBG{
	fill: lightgrey;
}
.svgLIGHT{
	fill: var(--baseColor);
}
.svgDARK{
	fill: darkgrey;
}
.svgHIGHLIGHT{
	fill: var(--highlightColor);
}
.svgSettingsSize{
	width: 20%;
}