.default #imgBGTop { position: absolute; top: 0; width: 100%; z-index: -1; }
.default #imgBGBtm { position: absolute; bottom: 0px; width: 100%; z-index: -1; }
.default #divHeader { display: none; position: absolute; top: 3px; width: 100%; color: #ddd; text-align: center; z-index: -1; }
.default #divFooter { display: none; position: absolute; bottom: 3px; width: 100%; color: #ddd; text-align: center; z-index: 0; }




.default #divChitChat {
	position: absolute;
	top: 10px;
	right: 10px;
	left: 10px;
	bottom: 10px;
	border: 1px solid rgba(0,0,0,0.2);
	color: #f5f5f5;
	z-index: 0;
	overflow: hidden;
}

.default #divChitChat #ulApp {
	position: absolute;
	top: 2px;
	width: 402px;
	height: 131px;
	border-right: 1px solid rgba(0,0,0,0.2);
}
.default #divChitChat #ulApp li h1 {
	font: 80px 'verdana';
	color: #f5f5f5;
	text-shadow: 0px 1px 1px #4d4d4d;
	text-decoration: none;
}
.default #divChitChat #ulApp li h2 {
	color: #396AA4;
	font-weight: bold;
	font-variant: small-caps;
	text-shadow: 0px 1px 1px #4d4d4d;
}








.default #divChitChat #divNav {
	margin-top: 131px;
	width: 403px;
	height: calc(100% - 133px);
	overflow: hidden;
}


/* Target List */

.default #divChitChat #divNav ul:first-child { width: 403px; }
.default #divChitChat #divNav ul:first-child li {
	margin: 2px;
	height: 42px;
	color: #aaa;
	font-size: 35px;
	text-align: center;
	border: 1px solid rgba(0,0,0,0.2);
}
.default #divChitChat #divNav ul:first-child li:hover { background-color: rgba(0,0,0,0.2); }
.default #divChitChat #divNav ul:first-child li.liSel {
	margin-right: 0;
	background-color: rgba(80,80,80,0.1);
	border-right-width: 0;
}
.default #divChitChat #divNav ul:first-child li:last-child:hover { background-color: transparent; }		/* this prevents the background coloring since this is non-selectable */
.default #divChitChat #divNav ul:first-child li:nth-child(3) img,
.default #divChitChat #divNav ul:first-child li:last-child img {
	margin: 0 4px;
	padding-top: 6px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	opacity: 0.5;
}
.default #divChitChat #divNav ul:first-child li:nth-child(3) img:hover,
.default #divChitChat #divNav ul:first-child li:last-child img:hover { opacity: 1; }
.default #divChitChat #divNav ul:first-child li .textbox,
.default #divChitChat #divNav ul:first-child li .listbox {
	border-width: 0;			/* this unsets _global.css value */
	vertical-align: top;
}
.default #divChitChat #divNav ul:first-child li .textbox {
	margin-top: 10px;
margin-right: 20px;
/*	width: 240px;	*/
width: 275px;
	border-bottom: 1px solid rgba(0,0,0,0.2);
}
.default #divChitChat #divNav ul:first-child li .listbox {
	margin-top: 6px;
	margin-right: 10px;
	width: calc(100% - 68px);
	color: #aaa;
	font-size: 18px;
}


/* Friends List */

.default #divChitChat #divNav ul:nth-child(2) {
	width: 402px;
	height: calc(100% - 220px);
	overflow: auto;
}
.default #divChitChat #divNav ul:nth-child(2) li {
	float: left;
	display: inline-block;
	margin: 1px;
	width: 124px;
	height: 124px;
	border: 1px solid rgba(0,0,0,0.2);
	cursor: pointer;
}
.default #divChitChat #divNav ul:nth-child(2) li:hover { background-color: rgba(0,0,0,0.2); }
.default #divChitChat #divNav ul:nth-child(2) li:first-child,
.default #divChitChat #divNav ul:nth-child(2) li:nth-child(2),
.default #divChitChat #divNav ul:nth-child(2) li:nth-child(3) { margin-top: 0; }				/* adjusts the first 3 <img> */
.default #divChitChat #divNav ul:nth-child(2) li:nth-child(3n+1) { margin-left: 2px; }			/* adjusts the last 3 <img>  */
.default #divChitChat #divNav ul:nth-child(2) li:nth-last-child(-n+3) { margin-bottom: 0; }
.default #divChitChat #divNav ul:nth-child(2) li.liSel { background-color: rgba(0,0,0,0.2); cursor: default; }
.default #divChitChat #divNav ul:nth-child(2) li.liNew {
	padding: 2px;
	width: 112px;
	height: 112px;
	border: 5px solid rgba(0,0,0,0.2);
}
.default #divChitChat #divNav ul:nth-child(2) li.liNew:hover { border: 5px solid rgba(0,0,0,0.4); }
.default #divChitChat #divNav ul:nth-child(2) li img {
	width: 100%;
	height: 100%;
	opacity: 0.5;
}
.default #divChitChat #divNav ul:nth-child(2) li:hover img,
.default #divChitChat #divNav ul:nth-child(2) li.liSel img { opacity: 1; }
.default #divChitChat #divNav ul:nth-child(2) li.liNew img {
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	border: 1px solid rgba(0,0,0,0.4);
}
.default #divChitChat #divNav ul:nth-child(2) li.liNew:hover img { opacity: 0.7; }
.default #divChitChat #divNav ul:nth-child(2) li.liNew img.imgNo,
.default #divChitChat #divNav ul:nth-child(2) li.liNew img.imgYes {
	position: absolute;
	margin-top: 85px;
	width: 24px;
	height: 24px;
/*	background-color: rgba(0,0,0,0.2);	*/
	border-width: 0;
	opacity: 1;
}
.default #divChitChat #divNav ul:nth-child(2) li.liNew img.imgNo { margin-left: 86px; }
.default #divChitChat #divNav ul:nth-child(2) li.liNew img.imgYes { margin-left: 2px; }


/* Footer Icons */

.default #divChitChat #divNav ul:last-child {
	position: absolute;
	left: 2px;
	bottom: 2px;
	width: 398px;
	height: 30px;
	overflow: hidden;
	border: 1px solid rgba(0,0,0,0.2);
}
.default #divChitChat #divNav ul:last-child li {
	display: inline-block;
	height: 100%;
	text-align: center;
	vertical-align: bottom;
}
.default #divChitChat #divNav ul:last-child li:hover { background-color: rgba(0,0,0,0.3); cursor: pointer; }
.default #divChitChat #divNav ul:last-child li:first-child,
.default #divChitChat #divNav ul:last-child li:nth-child(2),
.default #divChitChat #divNav ul:last-child li:nth-child(3),
.default #divChitChat #divNav ul:last-child li:nth-child(6),
.default #divChitChat #divNav ul:last-child li:nth-child(7),
.default #divChitChat #divNav ul:last-child li:last-child { width: 40px; }
.default #divChitChat #divNav ul:last-child li:nth-child(4),
.default #divChitChat #divNav ul:last-child li:nth-child(5) {
	width: calc(50% - 120px);
	font-size: 18px;
	font-weight: bold;
	line-height: 30px;
	color: #555;
}
.default #divChitChat #divNav ul:last-child li:nth-child(4):hover,
.default #divChitChat #divNav ul:last-child li:nth-child(5):hover { color: #bbb; }
.default #divChitChat #divNav ul:last-child li.liSel {
	color: #eee;
	background-color: rgba(0,0,0,0.3);
	cursor: default;
}
.default #divChitChat #divNav ul:last-child li.liSel:hover { color: #eee; }
.default #divChitChat #divNav ul:last-child li img {
	padding-top: 2px;
	width: 25px;
	height: 25px;
	opacity: 0.5;
}
.default #divChitChat #divNav ul:last-child li:hover img { opacity: 1; }








.default #divChitChat #divSearch { display: none; }
.default #divChitChat #divSearch #ulSearch>li {
	margin: 10px 10px 0 10px;
	padding: 5px 5px 0;
	width: calc(100% - 34px);
	background-color: rgba(179, 189, 204, 0.75);		/* #f0f2f5 as base; using #b3bdcc */
	border: 1px solid rgba(0,0,0,0.2);
}
.default #divChitChat #divSearch #ulSearch>li:first-child,
.default #divChitChat #divSearch #ulSearch>li:nth-child(2) {
	padding: 0;
	width: calc(100% - 20px);
	border-width: 0;
	background-color: transparent;
}
.default #divChitChat #divSearch #ulSearch>li:first-child .textbox {
	width: calc(100% - 40px);
	height: 24px;
	background-color: rgba(0,0,0,0.2);
	border: 1px solid rgba(0,0,0,0.3);
	border-right-width: 0;
}
.default #divChitChat #divSearch #ulSearch>li:first-child img {
	padding: 2px;
	width: 26px;
	height: 26px;
	background-color: rgba(0,0,0,0.2);
	border: 1px solid rgba(0,0,0,0.3);
	border-left-width: 0;
	vertical-align: bottom;
}
.default #divChitChat #divSearch #ulSearch li img {
	width: 50px;
	height: 50px;
	background-color: rgba(0,0,0,0.2);
	border: 1px solid rgba(255,255,255,0.75);
}
.default #divChitChat #divSearch #ulSearch li ul {
	display: inline-block;
	width: calc(100% - 60px);
	height: 50px;
}
.default #divChitChat #divSearch #ulSearch li ul li {
	float: left;
	display: inline-block;
	width: 50%;
	height: 25px;
	line-height: 25px;
	color: #555;
	vertical-align: middle;
}
.default #divChitChat #divSearch #ulSearch li ul li:first-child { font-size: 20px; font-weight: bold; }
.default #divChitChat #divSearch #ulSearch li ul li:nth-child(2),
.default #divChitChat #divSearch #ulSearch li ul li:nth-child(4) { text-align: right; }
.default #divChitChat #divSearch #ulSearch li ul li:nth-child(4) { font-weight: bold; }




.default #divChitChat #divActivity { display: none; }
.default #divChitChat #divActivity .Main ul {
	margin: 0 auto;
	padding: 5px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	overflow: auto;
	text-align: center;
}
.default #divChitChat #divActivity .Main ul li {
	display: inline-block;
	margin: 5px;
	width: 250px;
	height: 200px;
	border: 1px solid rgba(0,0,0,0.2);
}
.default #divChitChat #divActivity .Footer .textbox { width: calc(100% - 318px); }
.default #divChitChat #divActivity .Footer #ulActivityType { margin-right: 2px; }
.default #divChitChat #divActivity .Footer #ulActivityType li {
	padding: 4px 0 3px;
	height: 19px;
	color: #555;
	font-weight: bold;
	border: 1px solid rgba(0,0,0,0.2);
	background-color: rgba(0,0,0,0.2);
	text-align: center !important;
	cursor: pointer;
}
.default #divChitChat #divActivity .Footer #ulActivityType li.liSel { color: #fff; cursor: default; }




.default #divChitChat #divStream { display: none; }
.default #divChitChat #divStream .Main #divStreamFeed {
	margin: 10px auto;
	width: 640px;
	height: 480px;
	border: 1px solid rgba(0,0,0,0.2);
}
.default #divChitChat #divStream .Main #ulStreamChat {
	margin: 0 10px 10px;
	padding: 5px;
	width: calc(100% - 32px);
	height: calc(100% - 524px);
	border: 1px solid rgba(0,0,0,0.2);
	background-color: rgba(0,0,0,0.1);
	overflow: auto;
}
.default #divChitChat #divStream .Main #ulStreamChat li {
	display: block;
	padding-left: 5px;
	font-size: 16px;
}
.default #divChitChat #divStream .Main #ulStreamChat li.liUser {
	margin-top: 10px;
	padding-left: 0;
	height: 20px;
	text-align: right;
	font-size: 12px;
}
.default #divChitChat #divStream .Main #ulStreamChat li.liUser:first-child { margin-top: 0; }
.default #divChitChat #divStream .Main #ulStreamChat li.liUser label {
	float: left;
	font-weight: bold;
	font-size: 16px;
}
.default #divChitChat #divStream .Supplemental #ulStreamMemberships .imgGroupVisibility {
	/* https://stackoverflow.com/questions/12225843/toggle-image-src-attribute-using-javascript/12225903 */
	margin-top: -2px;
	width: 45px;
	height: 30px;
	background: url('../../../imgs/default/toggle.png') 0 -30px;
	background-size: 45px 60px;
}
.default #divChitChat #divStream .Supplemental #ulStreamMemberships img.clicked { background-position: 0 0; }




.default #divChitChat #divChitGroup { display: none; }
.default #divChitChat #divChitGroup .Main {
	padding: 5px;
	height: calc(100% - 126px);
	width: calc(70% - 45px);
}
.default #divChitChat #divChitGroup .Main div {
	display: inline-block;
	margin: 5px;
	width: calc(50% - 15px);
	height: calc(33% - 9px);
	border: 1px solid rgba(0,0,0,0.2);
}
.default #divChitChat #divChitGroup .Footer #lstChitGroupTarget { margin-left: 0; width: 100%; }
.default #divChitChat #divChitGroup .Footer div {
	width: calc(100% - 155px);
	height: 56px;
	color: #555;
	background-color: rgba(255,255,255,0.5);
	border: 1px solid rgba(0,0,0,0.2);
}




.default #divChitChat #divChitPrivate { display: none; }
.default #divChitChat #divChitPrivate .Main div {
	margin: 10px 10px 0 10px;
	width: calc(100% - 22px);
	height: calc(50% - 17px);
	border: 1px solid rgba(0,0,0,0.2);
}
.default #divChitChat #divChitPrivate .Footer div {
	width: calc(100% - 2px);
	height: 56px;
	color: #555;
	background-color: rgba(255,255,255,0.5);
	border: 1px solid rgba(0,0,0,0.2);
}




.default #divChitChat #divChatter { display: none; }




.default #divChitChat #divFeed { }
.default #divChitChat #divFeed .Supplemental #ulFeedProfile li { cursor: default; }
.default #divChitChat #divFeed .Supplemental #ulFeedProfile li #imgFeedProfileAvatar {
	float: none;				/* unsets from _common.css > .default #divChitChat .container .Supplemental ul li img */
	display: block;
	margin: 0 auto;
	padding: 2px;
	width: auto;				/* unsets from _common.css > .default #divChitChat .container .Supplemental ul li img */
	height: auto;
	max-width: 128px;
	max-height: 128px;
	border: 1px solid rgba(0,0,0,0.2);
	opacity: 1;				/* unsets from _common.css > .default #divChitChat .container .Supplemental ul li img */
}
.default #divChitChat #divFeed .Supplemental #ulFeedMemberships .imgGroupVisibility {
	/* https://stackoverflow.com/questions/12225843/toggle-image-src-attribute-using-javascript/12225903 */
	margin-top: -2px;
	width: 45px;
	height: 30px;
	background: url('../../../imgs/default/toggle.png') 0 -30px;
	background-size: 45px 60px;
}
.default #divChitChat #divFeed .Supplemental #ulFeedMemberships img.clicked { background-position: 0 0; }




.default #divChitChat #divChatGroup { display: none; }




.default #divChitChat #divChatPrivate { display: none; }
.default #divChitChat #divChatPrivate .Supplemental #ulChatPrivateProfile li #imgChatPrivateProfileAvatar {
	float: none;				/* unsets from _common.css > .default #divChitChat .container .Supplemental ul li img */
	display: block;
	margin: 0 auto;
	padding: 2px;
	width: auto;				/* unsets from _common.css > .default #divChitChat .container .Supplemental ul li img */
	height: auto;
	max-width: 128px;
	max-height: 128px;
	border: 1px solid rgba(0,0,0,0.2);
	opacity: 1;				/* unsets from _common.css > .default #divChitChat .container .Supplemental ul li img */
}