/* THIS SHOULD BE MOVED TO SOME GENERAL STYLE SHEET... */

#repliesWrapper {
/*    visibility: hidden; */
    display: none;
}

#threadsContainer,
#repliesContainer {
	margin-bottom: 10px;
}

#repliesThreadData {
	margin-bottom: 10px;
}

#newThreadContainer {
    border: 1px #000000 solid;
    padding: 20px;
    margin: 20px;
}

#newReplyContainer {
    border: 1px #000000 solid;
    padding: 20px;
    margin: 20px;

}

.forum .compose input,
.forum .editing input {
	background: transparent;
	border: none;
	font: inherit;
	margin: 0;						/* Remove default margin */
	padding: 0;						/* Remove default padding */
	outline: none;
	width: 100%;
}

.forum .compose textarea,
.forum .editing textarea {
	background: transparent;
	border: none;
	font: inherit;
	margin: 0;						/* Remove default margin */
	padding: 0;						/* Remove default padding */
	resize: none;
	outline: none;
	width: 100%;
}

/******************** FILTERS AND SEARCH **********************/

.forum .filters {
	display: table;
	font-size: 1.2em;
	margin: 0 auto 0 auto;
    padding-bottom: 10px;
}

.forum .filters > * {
	display: table-cell;
	padding: 0 5px 0 5px;
	vertical-align: middle;
}

.forum .search {
	border: #cccccc 3px solid;
	border-radius: 8px;
	box-sizing: border-box;
	height: 30px;
	line-height: 24px;					/* 30px - 2 * 3px border */
	position: relative;
	text-align: left;
	width: 200px;
}

.forum .search input {
    color: #000000;
	background-color: transparent;
	border: none !important;
	font-size: inherit;
	line-height: inherit;
	outline: none;
	padding: 0 0 0 5px;
	width: 165px;
    margin: 0;
}

.forum .search img {
	cursor: pointer;
	position: absolute;
	right: -1px;
	top: -2px;
}

/******************** PAGES **********************/

.forum .threadsPaginator,
.forum .repliesPaginator {
	text-align: center;
}

.forum .threadsPaginator div,
.forum .repliesPaginator div {
	display: inline-block;
}

.forum .page img {
	display: none;
	position: relative;
}

.forum .ellipsis img {
	position: relative;
}

.forum .page:not(.selected):not(:active) .standard,
.forum .page:not(.selected):active :not(.selected).active,
.forum .page.selected:not(:active) .selected:not(.active),
.forum .page.selected:active .selected.active {
	display: inherit;
}

.forum .back img {
	display: none;
}

.forum .back:not(:active) .standard,
.forum .back:active .active {
	display: inherit;
}

/******************** THREADS AND REPLIES **********************/

.forum.threadView {
	margin-bottom: 10px;
}

.forum .thread,
.forum .reply,
.forum .compose {
	margin-left: 140px;					/* Make room for tank */
	margin-top: 10px;
	position: relative;
}

.forum .reply {
    transition: margin-top 0.3s 0.3s;
}

.forum.threadView .thread {
	min-height: 90px;					/* Make sure tanks do not overlap as all thread's tanks are placed on the same side */
}

.forum .reply,
#repliesWrapper .compose {
	margin-right: 140px;				/* Make room for tank */
}

.forum .reply.right {
	text-align: right;					/* Right align every second reply bubble */
}

.forum .reply.collapsed {
    margin-top: 0px !important;
}

.forum .reply.left:not(.collapsed) + .reply.left,
.forum .reply.right:not(.collapsed) + .reply.right {
    margin-top: 30px;                   /* Two adjacent replies on the same side should have a bigger margin */
}

.forum .compose {
	text-align: center;
    z-index: 1;
}

.forum .compose .bubble {
	background-color: #ffffff;
}

.forum .container {
    display: inline-block;
    position: relative;
}

/* Shitty hack to make bubbles correct size while disallowing them to overflow with long words */
.forum .thread .container.actionCount0 { width: 100%; }
.forum .thread .container.actionCount1 { width: calc(100% - 32px); }
.forum .thread .container.actionCount2 { width: calc(100% - 64px); }
.forum .thread .container.actionCount3 { width: calc(100% - 96px); }
.forum .thread .container.actionCount4 { width: calc(100% - 128px); }
.forum .thread .container.actionCount5 { width: calc(100% - 160px); }
.forum .thread .container.actionCount6 { width: calc(100% - 192px); }
.forum .thread .container.actionCount7 { width: calc(100% - 224px); }

.forum .reply .container.actionCount0 { max-width: 100%; }
.forum .reply .container.actionCount1 { max-width: calc(100% - 32px); }
.forum .reply .container.actionCount2 { max-width: calc(100% - 64px); }
.forum .reply .container.actionCount3 { max-width: calc(100% - 96px); }
.forum .reply .container.actionCount4 { max-width: calc(100% - 128px); }
.forum .reply .container.actionCount5 { max-width: calc(100% - 160px); }
.forum .reply .container.actionCount6 { max-width: calc(100% - 192px); }
.forum .reply .container.actionCount7 { max-width: calc(100% - 224px); }

.forum .editing .container {
    width: 100%;
}

.forum .compose .container {
    width: 100%;
	margin-bottom: 10px;					/* Add space between bubble and button */
}

/******************** TANKS **********************/

.forum .tank {
	text-align: center;
    font-family: TankTrouble;
	position: absolute;
	right: 100%;
	top: -10px;
	width: 140px;
	z-index: 1;
	opacity: 1.0;
	transition: opacity 0.3s;
}

.forum .tank canvas {
    width: 140px;
    height: 84px;
    cursor: pointer;
}

.forum .tank div {
    width: 150px;
    height: 20px;
    left: -5px;
    top: -12px;
    position: relative;
}

.forum .deleted .tank {
	opacity: 0.2;
}

.forum .reply.right .tank {
	left: 100%;							/* Right align every second tank */
}

.forum .reply.right .tank canvas {
	-moz-transform: scale(-1, 1);		/* Flip every second tank */
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

/******************** BUBBLES **********************/

.forum .bubble {
	border: #cccccc 2px solid;
	border-radius: 6px;
	padding: 10px;
	position: relative;
	text-align: left;
	transition: background 0.3s, border 0.3s;
	word-wrap: break-word;
	background-color: #eeeeee;
    box-sizing: border-box;
}

.forum .deleted .bubble {
	border: #dddddd 2px dashed;
	color: #dddddd;
	background-color: #ffffff;
}

.forum .approvable:not(.approved):not(.deleted):not(.banned):not(.editing) .bubble,
.forum .deletable:not(.approved):not(.deleted):not(.banned):not(.editing) .bubble,
.forum .bannable:not(.approved):not(.deleted):not(.banned):not(.editing) .bubble {
	border: #ffda00 2px solid;
	background-color: #ffffcc;
}

.forum .bubble * {
    position: relative;     /* Place bubble contents in front of pointers */
}


.forum .bubble {
	width: 100%;
}

.forum .thread.selectable:not(.editing) .bubble {
	cursor: pointer;
}

.forum .thread.selectable:not(.editing) .bubble:hover {
	background: #cccccc;
}

.forum .thread.selectable.approvable:not(.approved):not(.deleted):not(.banned):not(.editing) .bubble:hover,
.forum .thread.selectable.deletable:not(.approved):not(.deleted):not(.banned):not(.editing) .bubble:hover,
.forum .thread.selectable.bannable:not(.approved):not(.deleted):not(.banned):not(.editing) .bubble:hover {
	background: #ffda00;
}

.forum .thread.selectable.deleted .bubble:hover {
	background: #eeeeee;
}

.forum .bubble .header {
	font-size: 1.2em;
	font-weight: bold;
}

.forum .bubble .details {
	color: #999999;
	text-align: right;
}

.forum .deleted .bubble .details {
	color: #cccccc;
}

.forum .editing .bubble {
    background-color: #ffffff;
}

.forum .editing .bubble .header,
.forum .editing .bubble .content,
.forum .editing .bubble .details {
    display: none;
}

.forum .editing .bubble .edit .header {
    display: inherit;
}

.forum .reply:not(.editing) .bubble .edit,
.forum .thread:not(.editing) .bubble .edit {
    display: none;
}

/******************** LOCK **********************/

.forum .thread .bubble .lock {
    display: none;
    position: absolute;
    right: -17px;
    bottom: -15px;
}

.forum .thread.locked .bubble .lock {
    display: inherit;
}


/******************** PIN **********************/

.forum .thread .bubble .pin {
    display: none;
    position: absolute;
    right: -15px;
    top: -30px;
}

.forum .thread.pinned .bubble .pin {
    display: inherit;
}

/******************** POINTER **********************/

.forum .bubble .pointer{
	background: inherit;
	position: absolute;
	top: 8px;
    width: 22px;
    height: 15px;
}

.forum .deleted .bubble .pointer{
	display: none;
}

.forum .bubble .pointer.left{
	-moz-transform: skewX(-55deg);
	-webkit-transform: skewX(-55deg);
	-o-transform: skewX(-55deg);
    transform: skewX(-55deg);
    left: -9px;
}

.forum .bubble .pointer.right{
	-moz-transform: skewX(55deg);
	-webkit-transform: skewX(55deg);
	-o-transform: skewX(55deg);
    transform: skewX(55deg);
    right: -9px;
}

.forum .bubble .pointer.border{
	border-bottom: inherit;
    z-index: -1;
}

.forum .bubble .pointer.border.left {
	left: -14px;
	border-left: inherit;
	border-left-width: 4px;
}

.forum .bubble .pointer.border.right {
	right: -14px;
	border-right: inherit;
	border-right-width: 4px;
}

.forum .bubble .pointer.inner{
    background: inherit;
}

.forum .reply.right .pointer.left {
	display: none;
}

.forum .reply.left .pointer.right {
	display: none;
}

/******************** ACTIONS **********************/

.forum .actions {
    display: block;
    position: absolute;
    top: calc(50% - 15px);
}

.forum .moderatorActions {
	display: inline-block;
}

/* Shitty hack to make actions correct size while disallowing bubbles to overflow with long words */
.forum .actions.actionCount1 { width: 32px; }
.forum .actions.actionCount2 { width: 64px; }
.forum .actions.actionCount3 { width: 96px; }
.forum .actions.actionCount4 { width: 128px; }
.forum .actions.actionCount5 { width: 160px; }
.forum .actions.actionCount6 { width: 192px; }
.forum .actions.actionCount7 { width: 224px; }

.forum .thread .actions {
    left: 100%;
}

.forum .actions.left {
    right: 100%;
}

.forum .actions.right {
    left: 100%;
}

.forum .action {
    display: inline-block;
	padding: 0 1px 0 1px;
}

.forum .action * {
	cursor: pointer;
}

.forum .thread:not(.approvable) .action.approve,
.forum .thread:not(.deletable) .action.delete,
.forum .thread:not(.bannable) .action.ban,
.forum .thread:not(.lockable) .action.lock,
.forum .thread:not(.pinnable) .action.pin,
.forum .thread:not(.editable) .action.edit,
.forum .thread:not(.editable) .action.acceptEdit,
.forum .thread:not(.editable) .action.cancelEdit,
.forum .thread:not(.likable) .action.like {
    display: none;
}

.forum .thread.deleted .action.approve,
.forum .thread.banned .action.approve,
.forum .thread.editing .action.approve,
.forum .thread.deleted .action.like,
.forum .thread.banned .action.like,
.forum .thread.editing .action.like,
.forum .thread.locked .action.edit,
.forum .thread.deleted .action.edit,
.forum .thread.banned .action.edit,
.forum .thread.editing .action.edit,
.forum .thread.editing .action.lock,
.forum .thread.editing .action.pin,
.forum .thread.approved .action.delete,
.forum .thread.banned .action.delete,
.forum .thread.editing .action.delete,
.forum .thread.approved .action.ban,
.forum .thread.deleted:not(.banned) .action.ban,
.forum .thread.editing .action.ban,
.forum .thread:not(.editing) .action.acceptEdit,
.forum .thread:not(.editing) .action.cancelEdit
/*.forum .thread.banned .action.pin*/
{
	display: none;
}

.forum .thread.approved .action.approve .off,
.forum .thread.locked .action.lock .off,
.forum .thread.pinned .action.pin .off,
.forum .thread.deleted .action.delete .off,
.forum .thread.banned .action.ban .off {
    display: none;
}

.forum .thread:not(.approved) .action.approve .on,
.forum .thread:not(.locked) .action.lock .on,
.forum .thread:not(.pinned) .action.pin .on,
.forum .thread:not(.deleted) .action.delete .on,
.forum .thread:not(.banned) .action.ban .on {
    display: none;
}

.forum .reply:not(.approvable) .action.approve,
.forum .reply:not(.deletable) .action.delete,
.forum .reply:not(.bannable) .action.ban,
.forum .reply:not(.editable) .action.edit,
.forum .reply:not(.editable) .action.acceptEdit,
.forum .reply:not(.editable) .action.cancelEdit,
.forum .reply:not(.likable) .action.like {
    display: none;
}

.forum .reply.deleted .action.approve,
.forum .reply.banned .action.approve,
.forum .reply.editing .action.approve,
.forum .reply.deleted .action.like,
.forum .reply.banned .action.like,
.forum .reply.editing .action.like,
.forum .reply.deleted .action.edit,
.forum .reply.banned .action.edit,
.forum .reply.editing .action.edit,
.forum .reply.approved .action.delete,
.forum .reply.banned .action.delete,
.forum .reply.editing .action.delete,
.forum .reply.approved .action.ban,
.forum .reply.deleted:not(.banned) .action.ban,
.forum .reply.editing .action.ban,
.forum .reply:not(.editing) .action.acceptEdit,
.forum .reply:not(.editing) .action.cancelEdit
{
	display: none;
}

.forum .reply.approved .action.approve .off,
.forum .reply.deleted .action.delete .off,
.forum .reply.banned .action.ban .off {
    display: none;
}

.forum .reply:not(.approved) .action.approve .on,
.forum .reply:not(.deleted) .action.delete .on,
.forum .reply:not(.banned) .action.ban .on {
    display: none;
}



.forum .reply.left .actions.left {
	display: none;
}

.forum .reply.right .actions.right {
	display: none;
}

.forum .like img,
.forum .edit img,
.forum .acceptEdit img,
.forum .cancelEdit img {
    display: none;
}

.forum .thread:not(.liked) .like:not(:active) .standard,
.forum .thread:not(.liked) .like:active :not(.selected).active,
.forum .thread.liked .like:not(:active) .selected:not(.active),
.forum .thread.liked .like:active .selected.active,
.forum .reply:not(.liked) .like:not(:active) .standard,
.forum .reply:not(.liked) .like:active :not(.selected).active,
.forum .reply.liked .like:not(:active) .selected:not(.active),
.forum .reply.liked .like:active .selected.active,
.forum .edit:not(:active) .standard,
.forum .edit:active .active,
.forum .acceptEdit:not(:active) .standard,
.forum .acceptEdit:active .active,
.forum .cancelEdit:not(:active) .standard,
.forum .cancelEdit:active .active
 {
	display: inherit;
}

/******************** SYNCHRONIZATION INFO **********************/

.forum .synchronization {
    font-size: 0.8em;
	margin-top: 10px;
	text-align: center;
}

/******************** STATUS **********************/

.forum .status {
	font-size: 1.2em;
	font-weight: bold;
	margin-top: 10px;
	text-align: center;
}

/******************** PLAYER PANEL **********************/

.forum.panelWrapper #playerPanel {
    position: relative;
}