/**
 * 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;
	}

	#friendsList:hover {
		z-index: 1001;
	}
}

/**
 * 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;
		min-width: 200px;
	}
}

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

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

/**
 * 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 ul {
	padding-left: 0px;
}

#friendsList li {
	list-style: none;
}

#friendsList li:hover {
	background: #f4f4f4;
	text-decoration: none;
}

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

#friendsList h4 {
	padding: 0;
	margin: 0 0 0 45px;
	color: #444444;
	font-size: 15px;
	position: relative;
}

#friendsList a {
	border-bottom: 1px solid #f4f4f4;
	display: block;
	white-space: nowrap;
	padding: 5px 5px 5px 5px;
}