/**
 * Friends bar style sheet
 *
 * @author Pierre HUBERT
 */

/**
 * For computers / tablets (any size)
 */
@media screen and (min-width: 513px)  {

	#friendsList {
		position: fixed;
		right: 0px;
		border-left: 1px black solid;
		z-index: 999;
		top: 0px;
		height: 100%;
		padding-top: 50px;
	}
}

/**
 * For big screens
 */
@media screen and (min-width: 1200px) {

	#friendsList {
		width: 230px !important;
		transition: right 1s;
		right: -175px;
		background-color: #fff3ff80;
		display: block !important;
	}

	#friendsList:hover {
		background-color: #ffffff;
		right: 0px;
	}

	/**
	 * Hide friend button toggle
	 */
	.friendToggleButton {
		display: none !important;
	}

}

/**
 * For small screens / tablets
 */
@media screen and (max-width: 1200px) and (min-width: 513px)  {
	#friendsList {
		right: 0px;
		background-color: #ffffff;
	}
}

/**
 * Common to small screen / tablets / smartphones
 */
@media screen and (max-width: 1200px) {
	#friendsList {
		display: none;
	}

	#friendsList.visible-bar {
		display: block;
	}
}

/**
 * Very small computers / tablets / smartphones
 */
@media screen and (max-width: 513px)  {
	#friendsList {
		background-color: #ffffff;
		padding-top: 50px;
		position: fixed;
		height: 100%;
		width: 100% !important;
		top: 0px;
		left: 0px;
	}
}

#friendsList td {
	vertical-align: middle;
}

#friendsList .account-image {
	margin: auto 10px auto auto;
	max-width: 40px;
	height: 40px;
	border-radius: 50%;
	visibility: visible
}

#friendsList .statusRow {
	width: 58px;
	text-align: center;
}