/* main */

body > .user_tray_inner {
	position: fixed;
	bottom: 0;
	right: 15px;
	height: 31px;
	line-height: 31px;
	border-bottom: none !important;
	border-top-right-radius: 3px;
	z-index: 900;
	font-size: 0;	/* fix the white space */
}

body > .user_tray * {
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

body > .user_tray .right {
	float: right;
}

body > .user_tray .left {
	float: left;
}


/* main buttons */

body > .user_tray .buttons {
	display: inline-block;
	padding: 0 5px;
	user-select: none;
    -webkit-user-select: none;
}

body > .user_tray .button {
	display: inline-block;
	padding: 0 5px;
	width: 20px;
	text-align: center;
}

body > .user_tray .button > .fa {
	cursor: pointer;
}

body > .user_tray .button > .fa:hover {
	opacity: 0.75;
}

body > .user_tray .home_button {
	font-size: 22px;
	margin-bottom: -2px;
}

body > .user_tray .messages_button {
	font-size: 19px;
}

body > .user_tray .notifications_button {
	font-size: 19px;
}

body > .user_tray .applications_button {
	font-size: 17px;
}

body > .user_tray .twitch_button {
    font-size: 19px;
}

body > .user_tray .ts3_button {
	font-size: 19px;
}

body > .user_tray .ts3_total {
	position: absolute;
	height: 12px;
	line-height: 12px;
	margin: -25px 0 0 6px;
	font-size: 10px;
	font-weight: bold;
	text-shadow: -1px 0px #fff, 0px 1px #fff, 1px 0 #fff, 0 -1px #fff;
	cursor: pointer;
}

body > .user_tray .button .button_total_container {
	position: absolute;
	width: 22px;
	line-height: 16px;
	margin: -54px 0 0 -2px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	border-radius: 3px;
}

body > .user_tray .button .button_total_wrapper {
	width: 100%;
	height: 15px;
	line-height: 15px;
	overflow: hidden;
}

body > .user_tray .button .button_arrow {
	position: absolute;
    width: 0;
    height: 0;
    margin: 0 0 0 7px;
	border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #EEE;	/* replaced by theme */
}

body > .user_tray .button .button_arrow_inner {
    width: 0;
    height: 0;
    margin: -4px 0 0 -3px;
	border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid #FFF471;	/* replaced by theme */
}


/* windows */

body > .user_tray .button_window {
	display: none;
	width: 370px;
	padding: 10px 10px 15px 15px;
	position: absolute;
	border-radius: 5px;
	z-index: 996;
	text-align: left;
}

body > .user_tray .button_window .window_content {
	height: 100%;
}

body > .user_tray .button_window .window_header {
	line-height: 25px;
	font-size: 17px;
	font-weight: bold;
	margin-bottom: 10px;
}

body > .user_tray .button_window .window_message_tab {
	display: inline-block;
	margin-right: 4px;
	padding: 2px 7px;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	border-radius: 3px;
	box-shadow: 1px 1px 1px;	/* color added by theme */
	cursor: pointer;
	opacity: 0.35;
}

body > .user_tray .button_window .window_message_tab:hover {
	opacity: 0.75;
}

body > .user_tray .button_window .window_message_tab.active {
	opacity: 1;
}

body > .user_tray .button_window .window_message_tab_divider {
	display: inline-block;
	width: 1px;
}

body > .user_tray .button_window .window_title .total_value {
	display: none;
}

body > .user_tray .button_window .window_page {
	float: right;
	margin-right: 15px;
	line-height: 27px;
	font-size: 13px;
	font-weight: normal;
}

body > .user_tray .button_window .window_close {
	float: right;
	line-height: 25px;
	cursor: pointer;
}

body > .user_tray .button_window .window_loading {
	padding-top: 15px;
	text-align: center;
	font-size: 13px;
}

body > .user_tray .button_window .window_empty {
	padding-top: 15px;
	line-height: 20px;
	text-align: center;
	font-size: 13px;
}

body > .user_tray .button_window .window_empty_title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
}

body > .user_tray .button_window .window_empty_text {
	margin-bottom: 10px;
}

body > .user_tray .button_window .window_empty_image {
	width: 200px;
	height: 190px;
	border-radius: 100px;
}

body > .user_tray .button_window .window_empty_link {
	padding-top: 10px;
	text-align: center;
	font-size: 16px;
}

body > .user_tray .button_window .window_footer {
	margin-top: 5px;
	line-height: 20px;
	font-size: 13px;
}

body > .user_tray .button_window .window_footer_center {
	text-align: center;
}

body > .user_tray .button_window .window_arrow {
	position: absolute;
    width: 0;
    height: 0;
    margin-top: 15px;
	border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #000;	/* replaced by theme */
}

body > .user_tray .button_window .window_arrow_inner {
	width: 0;
    height: 0;
    margin: -8px 0 0 -7px;
	border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #E4E4E4;	/* replaced by theme */
}


/* window - filled */

body > .user_tray .window_filled {
	overflow-x: hidden;
	overflow-y: auto;
}

body > .user_tray .window_filled .window_filled_loading {
    height: 20px;
    line-height: 20px;
	font-size: 13px;
}

body > .user_tray .window_filled .box {
	display: block;
	height: 71px;
	font-size: 13px;
	line-height: 16px;
	margin: 0 10px 8px 0;
	border-radius: 5px;
	box-shadow: 1px 1px 2px;	/* color added by theme */
}

body > .user_tray .window_filled .box:hover, 
body > .user_tray .window_filled .box:focus {
	text-decoration: none;
}

body > .user_tray .window_filled .box_avatar {
	float: left;
	width: 73px;
	height: 73px;
	margin: -1px 0 0 -1px;
	border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

body > .user_tray .window_filled .box_avatar_grouped {
	float: left;
	width: 67px;
	height: 67px;
	padding: 2px 3px 2px 2px;
}

body > .user_tray .window_filled .box_avatar_small {
	float: left;
	width: 31px;
	height: 31px;
	margin: 1px;
}

body > .user_tray .window_filled .box_data {
	height: 100%;
	margin-left: 72px;
	padding: 0 8px;
}

body > .user_tray .window_filled .box_data b {
	font-weight: bold;
	display: inline-block;
	margin-top: -2px;
    padding: 0 3px;
}

body > .user_tray .window_filled .box_meta {
	height: 27px;
	line-height: 27px;
	overflow: hidden;
}

body > .user_tray .window_filled .box_author {
	width: 180px;
	font-size: 13px;
	font-weight: bold;
	overflow: hidden;
}

body > .user_tray .window_filled .box_date {
	float: right;
	font-size: 10px;
}

body > .user_tray .window_filled .box_delete {
	display: none;
	float: right;
	padding-top: 6px;
	font-size: 18px;
	cursor: pointer;
}

body > .user_tray .window_filled .box_details b  {
	vertical-align: bottom;
}

body > .user_tray .window_filled .box:hover .box_date {
	display: none;
}

body > .user_tray .window_filled .box:hover .box_delete {
	display: block;
}

body > .user_tray .window_filled .box_title {
	height: 20px;
	line-height: 20px;
	font-weight: bold;
	font-size: 13px;
	overflow: hidden;
}

body > .user_tray .window_filled .box_data .fa {
	vertical-align: auto;	/* IE fix */
}

body > .user_tray .window_filled .box_details {
	height: 20px;
	line-height: 18px;
	font-size: 13px;
	overflow: hidden;
}

body > .user_tray .window_filled .box_details_double {
	height: 40px;
}

body > .user_tray .window_filled .box_divider {
	height: 10px;
	margin: 20px 0 10px 0;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
}

body > .user_tray .window_filled .box_divider_inner {
	width: 120px;
	height: 20px;
	line-height: 20px;
	margin: -10px 0 0 115px;
	text-align: center;
	overflow: hidden;
}

body > .user_tray .window_filled .box_friend_interact {
	cursor: pointer;
}


/* ts3 modifications */

body > .user_tray .ts3-top {
	padding: 0 0 5px 0;
}

body > .user_tray .ts3-middle {
	height: 182px;
}


/* popups for notifications */

.element_popup.box_friend_interact_popup {
	width: 300px;
}

.element_popup.box_friend_interact_popup .content {
	padding: 0;
}


/* windows with different sizes */

body > .user_tray .button.messages .button_window {
	height: 415px;
	margin-top: -488px;
	margin-left: -291px;
}

body > .user_tray .button.notifications .button_window {
	height: 380px;
	margin-top: -453px;
	margin-left: -321px;	/* +30px */
}

body > .user_tray .button.applications .button_window {
	height: 380px;
	margin-top: -453px;
	margin-left: -351px;	/* +30px */
}

body > .user_tray .button.twitch .button_window {
    height: 380px;
    margin-top: -453px;
    margin-left: -366px;	/* +30px */
}

body > .user_tray .button.ts3 .button_window {
	height: 310px;
	margin-top: -383px;
	margin-left: -377px;	/* +30px */
}

body > .user_tray .button.messages .window_arrow {
	margin-left: 276px;
}

body > .user_tray .button.notifications .window_arrow {
	margin-left: 307px;	/* +30px */
}

body > .user_tray .button.applications .window_arrow {
	margin-left: 337px;	/* +30px */
}

body > .user_tray .button.twitch .window_arrow {
    margin-left: 352px;	/* +30px */
}

body > .user_tray .button.ts3 .window_arrow {
	margin-left: 363px;	/* +30px */
}

body > .user_tray .button.messages .window_filled {
	height: 320px;
}

body > .user_tray .button.notifications .window_filled {
	height: 320px;
}

body > .user_tray .button.applications .window_filled {
	height: 320px;
}

body > .user_tray .button.twitch .window_filled {
    height: 340px;
}


/* growl notifications */

body > .user_tray .growls {
	position: absolute;
	right: 0;
	margin-top: -60px;	/* increments by -50px for every growl */
	z-index: 995;
}

body > .user_tray .growl {
	clear: right;
	float: right;
	height: 30px;
	line-height: 30px;
	padding: 5px;
	margin-bottom: 10px;
	border-radius: 5px;
	font-size: 13px;
	overflow: hidden;
}

body > .user_tray .growl:hover, 
body > .user_tray .growl:focus {
	text-decoration: none;
}

body > .user_tray .growl_default {
	width: 490px;
}

body > .user_tray .growl_online_game {
	width: 275px;
}

body > .user_tray .growl_online {
	width: 195px;
}

body > .user_tray .growl_avatar {
	width: 23px;
	height: 23px;
	border-radius: 5px;
}

body > .user_tray  .growl_username {
	padding: 0 5px;
}

body > .user_tray  .growl .element_username {
	font-weight: bold;
}

/* twitch */

.user_tray .live_status_badge {
    padding: 2px;
    height: 6px;
    border-radius: 3px;
    display: inline;
    color: white;
}

.user_tray .live_status_badge.live {
    background-color: rgb(186, 8, 8);
}

.user_tray .live_status_badge.not_live {
    background-color: rgb(171, 171, 171);
}

.user_tray .twitch_count {
    float: right;
}

.user_tray .twitch_count i {
    position: relative;
    top: -1px;
}

.user_tray .twitch_username {
    font-weight: bold;
}

.user_tray .twitch .box_title_content {
    position: relative;
    top: -3px;
    font-size: 10px;
}

.user_tray .twitch .box_details_content {
    font-size: 11px;
}

.user_tray .twitch .box:hover .box_date {
    display: block !important;
}

.user_tray .twitch .window_filled .box_title {
    line-height: 11px !important;
}

.user_tray .twitch .box {
    cursor: pointer;
}