/* user profile sidebar */
.sidebar {
	.userAvatar {
		text-align: center;
		overflow: hidden;
		
		> a {
			display: block;
		}
	}
}

.framedIconList {
	li {
		float: left;
		margin: 0 2px 4px 0;
		
		.framed {
			display: inline-block;
		}
	}
	
	&::after {
		content: "";
		height: 0;
		display: block;
		clear: both;
	}
}

/* user information */
.userInformation {
	> .inlineDataList,
	> .dataList {
		font-size: @wcfSmallFontSize;
	}
	
	> .dataList {
		margin-top: 0;
	}
	
	> .inlineDataList {
		margin-top: @wcfGapSmall;
		
		~ .inlineDataList {
			margin-top: 0;
		}
	}
	
	> .containerHeadline + .inlineDataList {
		margin-top: 0;
	}
	
	> .containerHeadline > p {
		margin-bottom: 2px;
	}
}

.userTitleBadge {
	font-weight: normal;
	max-width: 154px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.userProfilePreview {
	position: relative;

	> .userInformation {
		padding-bottom: 16px;// + @wcfGapTiny;
		
		> .userStats,
		> .userFields {
			margin-bottom: @wcfGapTiny+1;
			padding-top: @wcfGapTiny+1;
			border-top: 1px dotted @wcfContainerBorderColor;
		}
		
		> .userFields {
			padding-bottom: @wcfGapTiny+1;
			border-bottom: 1px dotted @wcfContainerBorderColor;
		}
		
		> .buttonGroupNavigation {
			position: absolute;
			bottom: 0;
			right: 0;
		}
	}
}

/* ##### User List #### */
.userHeadline {
	position: relative;
	
	> nav.buttonGroupNavigation {
		position: absolute;
		right: @wcfGapSmall;
		top: @wcfGapSmall;
	}
}

.letters {
	> li {
		margin-bottom: @wcfGapTiny;
		
		> .button {
			min-width: 1.2em;
			text-align: center;
		}
	}
}

/* recent activities */
.recentActivityList {
	> li {
		&.recentActivitiesMore {
			text-align: center;
			
			> button {
				padding-left: 30px;
				padding-right: 30px;
			}
			
			> small {
				color: @wcfDimmedColor;
			}
		}
		
		> div.box48 > div {
			overflow: hidden;
		}
	}
}

/* dashboard boxes */
.dashboardBoxSidebarButton {
	padding-bottom: @wcfGapLarge !important;
	
	> div {
		text-align: center;
		
		> .button {
			font-size: @wcfTitleFontSize;
			padding: 5px 13px;
		}
	}
}

.usersOnlineInfoBox {
	.usersOnlineLegend {
		margin-top: @wcfGapSmall;
		
		> p {
			display: inline-block;
		}
		
		> ul {
			display: inline-block;
		}
	}
}

@media only screen and (max-width: 800px) {
	#tplUser .userHeadline {
		overflow: visible;
		
		> .invisible {
			display: block;
			float: left;
		}
		
		> *:not(.invisible) {
			margin-left: 59px;
		}
		
		> h1 {
			margin-right: 30px;
		}
	}
}

/* avatar cropping */
.userAvatarCrop {
	cursor: pointer;
}

#userAvatarCropSelection {
	position: relative;
	margin: 0 auto;
}

#userAvatarCropOverlay {
	background-color: #000000;
	height: 100%;
	opacity: 0.5;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 10;
}

#userAvatarCropOverlaySelection {
	cursor: move;
	position: absolute;
	left: 0;
	top: 0;
	height: 128px;
	overflow: hidden;
	width: 128px;
	z-index: 20;
}

/* 3rd party login */
.buttonList.thirdPartyLogin {
	text-align: center;
}

.thirdPartyLoginButton {
	border-radius: 3px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #fff;
	display: inline-block;
	font-size: 0;
	
	&:hover {
		color: #fff;
		text-decoration: none;
	}
	
	> .icon {
		border-right: 1px solid rgba(0, 0, 0, 0.1);
		color: #fff;
		text-shadow: none;
		padding: 4px 6px;
	}
	
	> span:not(.icon) {
		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
		font-size: 1rem;
		padding: 4px 12px;
	}
	
	&.googleLoginButton {
		background-color: rgb(221, 75, 57);
		
		&:hover {
			background-color: rgb(202, 53, 35);
		}
	}
	
	&.facebookLoginButton {
		background-color: rgb(59, 89, 152);
		
		&:hover {
			background-color: rgb(48, 72, 123);
		}
	}
	
	&.twitterLoginButton {
		background-color: rgb(85, 172, 238);
		
		&:hover {
			background-color: rgb(48, 154, 234);
		}
	}
	
	&.githubLoginButton {
		background-color: rgb(68, 68, 68);
		
		&:hover {
			background-color: rgb(48, 48, 48);
		}
	}
}