#topbar{
	width: 100%;
	height: 45px;
	background: white;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 20;
    transition: all 0.15s;
    -ms-transition: all 0.15s;
    webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    -o-transition: all 0.15s;
}

#topbar.transparency{
	background: rgba(255,255,255,0.92);
}

#topbarContent {
	max-width: 1170px;
	width: auto;
	height: 100%;
	margin: auto;
	padding-bottom: 0px;
	display: block;
}

/* for visitors BEGIN */
.topbarLogin{
	margin-top: 6px;
}

.topbarLogin > button{
	padding-left: 18px;
	padding-right: 18px;
	margin-left: 3px;
	border-radius: 100px;
	font-size: 13px;
}




#topbarLeft{
	/* do not put float: left; cuz it fucks up in firefox */
	height: 100%;
	margin-left: 15px;
	display: inline-block; /* without this, it fucks the width and make shits stack on multiple lines */
}

#logo{
	float: left;
	cursor: pointer;
	height: 100%;
}

#topbarIconContainer{
	float: left;
	margin-right: 30px;
}

.topbarButton{
	height: 45px;
	line-height: 45px;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
	font-weight: 600;
	float: left;
	padding-left: 15px; padding-right: 15px;
	border-bottom: 0px solid #008cbf;
	color: rgb(102, 117, 127);
	transition: all 0.15s ease-in-out;
	webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	-o-transition: all 0.15s ease-in-out;
	-ms-transition: all 0.15s ease-in-out;
	box-sizing: border-box;
}

.topbarButton.selected{
	border-bottom-width: 4px;
	color: #008cbf;
}

.topbarButton .icon{
	float: left;
	margin-top: 11px;
	margin-right: 5px;
	width: 22px;
	height: 22px;
}

.topbarButton[data-tab='questions'] .icon{
	background-image: url(/images/topbar/questions.png);
}
.topbarButton[data-tab='questions'].selected .icon{
	background-image: url(/images/topbar/questions2.png);
}

.topbarButton[data-tab='game'] .icon{
	background-image: url(/images/topbar/game.png);
}
.topbarButton[data-tab='game'].selected .icon{
	background-image: url(/images/topbar/game2.png);
}

.topbarButton[data-tab='social'] .icon{
	background-image: url(/images/topbar/social.png);
}
.topbarButton[data-tab='social'].selected .icon{
	background-image: url(/images/topbar/social2.png);
}

.topbarButton[data-tab='room'] .icon{
	background-image: url(/images/topbar/room.png);
}
.topbarButton[data-tab='room'].selected .icon{
	background-image: url(/images/topbar/room2.png);
}

.topbarButton[data-tab='movie'] .icon{
	background-image: url(/images/topbar/movie.png);
}
.topbarButton[data-tab='movie'].selected .icon{
	background-image: url(/images/topbar/movie2.png);
}


.topbarIcon {
    position:relative;
 	width: 20px;
 	height: 45px;
 	float: left;
 	vertical-align: middle;
 	margin-left: 25px;
}

.topbarIcon > img {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    width: 23px;
    cursor: pointer;
}

.icon_bubble {
  position: absolute;
  top: 4px;
  right: -8px;
  padding: 2px;
  padding-left: 3px;
  padding-right: 3px;
  /* padding-right: 3px; */
  /* background-color: red; */
  color: white;
  font-weight: 600;
  font-size: 11px;
  height: 10px;
  line-height: 10px;
  text-align: center;
  /* border: 2px solid white; */
  cursor: pointer;
  border-radius: 2px;
  box-shadow: 0px 1px 1px gray;
  -webkit-box-shadow: 0px 1px 1px gray;
  -moz-box-shadow: 0px 1px 1px gray;
  background-color: #EF000B;
  background-image: -webkit-gradient(linear, center top, center bottom, from(#FF524C), to(#EF000B));
  background-image: -webkit-linear-gradient(#FF525B, #EF000B);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .4);
}


.topbarMiddle{
	position: absolute;
  	left: 0;
  	right: 0;
  	margin: 0 auto;
  	width: 210px;
}

.topbarMiddle_guest{ /* special css for guest type topbar */
	display: inline-block;
	margin-left: 15px;
	position: relative;
}

#change_subject{
	background: transparent;
	color: #008CBF;
	cursor: pointer;
	border: 0;
	display: none; /* in platform.css, this button will be visible */
}

#change_subject_top{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	overflow: hidden;
}

#change_subject_img{
	background-image: url(/images/subject/all_subjects.png);
	width: 20px;
	height: 20px;
	margin-top: 12px;
	float: left;
}

#change_subject_text{
	float: left;
	margin-left: 6px;
	text-transform: capitalize;
}

#subject_list_dropdown{
	left: 50%;
	position: absolute;
	top: 45px;
	margin-left: -315px; /* this is (subject_box's width + padding-left) / 2 */
	overflow: hidden;
	display: none;
	width: 587px;
	padding-left: 4px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

/* for guest */
#subject_list_dropdown.guest{
	margin-left: -63px;
}

.subject_box{
	float: left;
	width: 160px;
	line-height: 32px !important;
	height: 32px;
	text-transform: capitalize;
}

.subject_box .pic{
	width: 22px;
	height: 22px;
	margin-right: 10px;
	margin-top: 5px;
	float: left;
}

.subject_user_count{
	float: right;
	margin-right: 10px;
}
.subject_user_count::before{ content: "("; }
.subject_user_count::after{ content: " online)"; }

#topbarDonate{
	position: relative;
	float: left; margin-top: 10px; margin-left: 0px;
}

#topbarDonateExplain{
	position: absolute;
	top: 30px;
	left: -38px;
	width: 144px;
	padding: 10px;
	color: white;
	font-size: 12px;
	font-weight: 400;
	border-radius: 5px;
	border: 0px solid rgb(0,166,232);
	background: rgba(0,0,0,0.8);
	color: white;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	z-index: 100;
	display: none;
}


#topbarRight{
	float: right;
	display: inline-block; /* without this, it fucks the width and make shits stack on multiple lines */
}

#topbarProfile{
	margin-left: 10px;
	margin-top: 0px;
	float: left;
	width: 38px;
	height: 38px;
	border: 4px solid white;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.75);
	overflow: hidden;
}

.topbarProfilePic{
	width: 100%;
	height: 100%;
}

#topbarName{
	float: left;
	margin-left: 10px;
	font-weight: 600;
	line-height: 45px;
	color: #585858;
	padding-right: 15px;
	height: 45px;
	max-width: 120px;
	display: none;
}

.rotated{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.rotated:hover{
transform:rotate(365deg);
-ms-transform:rotate(365deg); /* IE 9 */
-webkit-transform:rotate(365deg); /* Opera, Chrome, and Safari */
border-radius: 30px;
}


.dropDown{
	z-index: 20;
	width: 400px;
	top: 45px;
	position: absolute;
	border-radius: 10px;
	color: black;
	font-size: 12px;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);

}

#friendBox{ display: none; position: absolute;}
#messageBox{ display: none; }
#notifBox{ display: none; }

#friendDropdown{
	background: #068DBA;
	left: -260px;
}

#messageDropdown{
	background: #04B404;
	left: -305px;
}

#notifDropdown{
	background: #D3B400;
	left: -350px;
}

.arrowUp {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	top: 40px;
	position: absolute;
	z-index: 21;
}

#friendArrow{
	left: 5px;
	border-bottom: 5px solid #068DBA;
}

#messageArrow{
	left: 5px;
	border-bottom: 5px solid #04B404;
}

#notifArrow{
	left: 5px;
	border-bottom: 5px solid #D3B400;
}

.dropDown_title{
	font-weight: 600;
	width: 100%;
	line-height: 27px;
	float: left;
	color: white;
}

.dropDown_title_tools{
	float: right; margin-right: 10px; cursor: pointer;
}

.dropDown_seeAll{
	float: left;
	font-weight: 600;
	line-height: 27px;
	width: 100%;
	text-align: center;
	cursor: default;
	color: white;
	height: 27px;
}

.dropDown_contentWrapper{
	float: left;
	max-height: 230px;
	overflow-y: auto;
	width: 100%;
}

.dropDown_content{
	position: relative;
	width: auto;
	padding: 10px;
	font-size: 13px;
	height: 60px;
	margin-bottom: 1.1px;
	background: rgba(255, 255, 255, 0.98); /* if change this, change .dropDown_content.empty too */
	transition: background 0.15s;
	webkit-transition: background 0.15s;
	-moz-transition: background 0.15s;
	-o-transition: background 0.15s;
	-ms-transition: background 0.15s;
}

#friendDropdown .dropDown_content_img{
	cursor: pointer;
}

.dropDown_content_img{
	float:left;
	height: 60px;
	width: 60px;
}
.dropDown_content_desc_friend{
	float: left; margin-left: 10px; line-height: 18px; margin-top: 10px;
	width: 192px;
}
.dropDown_content_name{
	font-weight: 600;
}

.dropDown_content_right{
	margin-left: 70px; line-height: 18px;
	width: auto;
	overflow: hidden;
	font-weight: 400;
	word-wrap: break-word;
}

.dropDown_content_preview{
	color: black;
	height: 18px;
	overflow: hidden;
}
.dropDown_content_preview img{
	max-height: 18px;
}

.dropDown_content_time{
	font-size: 10px; color: #939393;
}

.dropDown_content.unread, .dropDown_content.fakeUnread{
	background:rgba(255, 255, 255, 0.82);
}

#messageBox .dropDown_content:hover, #notifBox .dropDown_content:hover{
	cursor: pointer;
	background:rgba(255, 255, 255, 0.92);
}

.dropDown_content.empty{
	text-align: center;
	height: 30px;
	line-height: 30px;
	background: rgba(255, 255, 255, 0.98) !IMPORTANT;
	cursor: auto !IMPORTANT;
	display: none;
}

#friendDropdown .utils{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 2px;
	margin: auto;
	height: 20px;
}

#friendDropdown .utils > *{
	float: right;
	border-radius: 2px;
	width: 50px;
	text-align: center;
	font-size: 12px;
	line-height: 20px;
	cursor: pointer;
	margin-right: 8px;
	border-width: 1px;
	border-style: solid;
	box-sizing: border-box;
}

.addFriend{
	border-color: transparent;
	background-color: #068DBA;
	color: white;
	font-weight: 600;
}

.reject_friend_request{
	border-color: #AAB5BD;
	color: #66757f;
	font-weight: 400;
}

.friend_request_info{
	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}

#settingsButton{
	cursor: pointer;
	float: left;
	margin-left: 0px;
	height: 45px;
	width: 50px;
	position: relative;
}

#settingsButton .arrow-down{
	margin-left: auto;
	margin-right: auto;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid #4DAFD2;
	margin-top: 19px;
}

#settingsButton:hover .arrow-down{
	border-top-color: #097DA6;
}


#settingsButton .menu_arrow{
	top: 13px;
}

#settingsButton .menu{
	top: 45px;
	width: 111px;
	right: 2px;
	overflow: visible;
}


#settingsButton .menu:after, #settingsButton .menu:before {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid white;
    top: -7px;
    content: '';
    left: 89px;
    margin-left: -5px;
    position: absolute;
}

/* Styling for second triangle (border) */
#settingsButton .menu:before {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid transparent;
    border-bottom-color: rgb(197, 223, 234); /* Can't be included in the shorthand to work */
    top: -8px;
    margin-left: -6px;
}