body{
  visibility: hidden;
}

/* make the 'change subject' button on topbar visible */
#change_subject{
  display: inline-block !important;
}

.animate_duration_short{
    -webkit-animation-duration: 0.4s;
    -moz-animation-duration: 0.4s;
    -ms-animation-duration: 0.4s;
    -o-animation-duration: 0.4s;
    animation-duration: 0.4s;
}

.animate_duration_long{
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

#ContentContainer {
  width: 1140px;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  margin: auto;
}

#NoticeBar{
  width: 100%;
  line-height: 36px;
  text-align: center;
  margin-top: -5px;
  background-color: white;
  border-radius: 4px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
}

#NoticeBar .new{
  background-color: #2baf00;
  color: white;
  font-weight: 600;
  border-radius: 4px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 2px;
  margin-right: 2px;
  font-size: 13px;
}

#QuestionsColumn {
  float: left;
  width: 520px;
  height: 100%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  position: fixed;
}

#MyQuestion {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background-color: white;
  padding: 20px;
  height: auto;
  overflow: hidden;
}

#askQuestionContainer{
  width: 100%;
  overflow: hidden;
  display: none;
}

.askTypeContainer{
  overflow: hidden;
}

.askTypeImage{
  float: left;
  margin: auto 3px;
  width: 18px;
  height: 18px;
}

.askTypeText{
  float: left;
}

#paidQuestion{
  float: right;
}

#paidQuestion .askTypeImage{ background-image: url(/images/platform/money.png); }
#freeQuestion .askTypeImage{ background-image: url(/images/platform/thunder.png); }
#paidQuestion:hover .askTypeImage, #paidQuestion.selected .askTypeImage{
  background-image: url(/images/platform/money2.png); }
#freeQuestion:hover .askTypeImage, #freeQuestion.selected .askTypeImage{
  background-image: url(/images/platform/thunder2.png);
}


.askQuestionType{
  color: black;
  font-size: 14px;
  border: 1px solid;
  border-bottom: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  height: 35px;
  line-height: 35px;
  width: 49.17%;
  text-align: center;
  float: left;
  cursor: pointer;
background-color: #e1e8ed;
background-image: linear-gradient(#fff,#e1e8ed);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
border-color: #C1CCD4;
}

.askQuestionType:hover, .askQuestionType.selected{
  color: white;
  border-color: #D46E00;
background: rgb(255,175,75); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,175,75,1) 0%, rgba(255,146,10,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,175,75,1)), color-stop(100%,rgba(255,146,10,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,175,75,1) 0%,rgba(255,146,10,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 ); /* IE6-9 */
}

#QuestionEntry {
  position: relative;
  max-height: 270px;
  padding: 10px;
  resize: none;
  font-size: 18px;
  font-weight: 400;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  height: 50px;
  background-color: #fff;
  -webkit-box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.04);
  -webkit-box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.04);
  -moz-box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.04);
  box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.04);
  border: 1px solid #d8d8d8; /* #d8d8d8 */
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  overflow-y: auto;
}

#QuestionEntry:focus {
  outline: 0;
}

#howItWorks{
  font-size: 16px;
  float: right;
  line-height: 32px;
  margin-right: 12px;
  display: none;
}

#howItWorksOr{
  font-size: 16px;
  float: right;
  line-height: 32px;
  margin-right: 12px;
  display: none;
}

#myQuestionPreview{
  font-size: 14px;
  font-weight: 400;
  padding: 10px;
  width: auto;
  box-sizing: border-box;
  min-height: 34px !important;
  max-height: 66px !important; /* it was 44 before, guruantee good. Not sure if the value now will mess shit up */
  line-height: 22px;
  overflow: hidden;
}

/* remove mathjax's margin in preview */
/*#myQuestionPreview .MathJax_Display{
  margin-top: 0 !important;
}*/

#MyQuestionButtons {
  width: 100%;
  margin-top: 10px;
}

.QuestionUtilitiesButton {
  float: left;
  height: 32px;
  margin-right: 5px;
  display: none;
}

.QuestionUtilitiesButton:hover {
  cursor: pointer;
}

#ReplyContainer .QuestionUtilitiesButton{
  display: inline;
}

.QUBImage{
  float: left;
  width: 18px;
  height: 18px;
  margin-right: 6px;
}

.QUB_equation_image{ background-image: url(/images/platform/equation.png); }
.QUB_draw_image{ background-image: url(/images/platform/draw.png); }
.QUB_photo_image{ background-image: url(/images/platform/photo.png); }
.QUB_audio_image{ background-image: url(/images/platform/mic.png); }

.QUBText{
  float: left;
  text-align: left;
  padding-left: 0px;
  padding-right: 3px;
  font-size: 14px;
  font-weight: 400;
  color: #66757f;
}

#PostReply{
  float: right;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 2px;
}

#PostQuestion, #PostBumpButton, #PostCloseButton, #PostCustomRequest {
  float: right;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: 6px;
  margin-top: 2px;
}

#PostBumpButton, #PostCloseButton{
  display: none;
}

#OtherQuestionsContainer {
  width: 500px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background-color: white;
  border-bottom-width: 2px;
  padding-left: 20px;
  padding-bottom: 20px;
  margin-top: 10px;
  overflow: hidden;
}

#OtherQuestionsOptions{
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 12px;
  color: #66757f;
}

div.SwitchQuestionType{
  display: inline-block;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  padding-left: 10px;
  padding-right: 10px;
  height: 30.1px;
  line-height: 30px;
  text-align: center;
  margin-right: 3px;
}

#UserQuestionsButton{
  color: black;
  border: 1px solid #eaeaea;
  outline: 0;
  font-size: 14px;
  height: 26px;
  text-indent: 5px;
  width: 117px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
}



div.Clicked {
  background: #f5f8fa;
  box-shadow: 0 0 0px 1px #c5dfea inset;
  -moz-box-shadow: 0 0 0px 1px #c5dfea inset;
  -webkit-box-shadow: 0 0 0px 1px #c5dfea inset;
}

div.Clicked:hover{ cursor: default; }

div.NotClicked {
  background: white;
  box-shadow: 0 0 0px 1px white inset;
  -moz-box-shadow: 0 0 0px 1px white inset;
  -webkit-box-shadow: 0 0 0px 1px white inset;
}

div.NotClicked:hover{
  cursor: pointer;
  background: #f5f8fa;
  box-shadow: 0 0 0px 1px #c5dfea inset;
  -moz-box-shadow: 0 0 0px 1px #c5dfea inset;
  -webkit-box-shadow: 0 0 0px 1px #c5dfea inset;
}


.QuestionsBoard {
  overflow-y: scroll;
  overflow-x: hidden;
}

.Questions {
  padding: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #F0F6FA;
  margin-bottom: 10px;
  border: 1px solid #c5dfea;
  width: 450px;
  min-height: 80px;
  height: auto !important;
  position: relative;
  transition: background-color 0.2s;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  -ms-transition: background-color 0.2s;
}

.Questions:hover {
  cursor: pointer;
  background: #F9FBFC;
}

.QuestionsUsers {
  display: inline-block;
  float: left;
  position: relative;
}

.QuestionsUsersPic {
  width: 70px;
  height: 70px;
  background-image: url("/images/default_profile_pic.png");
  border-radius: 0px;
  -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.04),0 1px 5px rgba(0,0,0,.1);
  -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.04),0 1px 5px rgba(0,0,0,.1);
  box-shadow: 0 0 0 1px rgba(0,0,0,.04),0 1px 5px rgba(0,0,0,.1);
  border: 3px solid white;
}

.QuestionsUsersLevel {
  position: absolute;
  bottom: -6px;
  right: -4px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border: 2px solid white;
  background: #ef9300;
  border-radius: 1000px;
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
}

.OtherQuestionsContent {
  width: 345px;
  display: inline-block;
  /*max-height: 130px;*/
  padding-left: 15px;
  padding-right: 10px;
  font-size: 14px;
  text-shadow: none;
  line-height: 22px;
}

.QuestionsUsersName {
  /*float: left;*/
  padding-right: 5px;
  color: #ef9300;
  font-weight: 600;
  font-size: 15px;
}

.QuestionsContent{
  max-height: 90px;
  overflow: hidden;
}

.QuestionsMisc{
  font-size: 11px;
  color: #939393;
/*  margin-bottom: -3px;
*/}



.QuestionViewing::after{ content: " viewing"; }

.QuestionReplying::after{ content: " replying"; }

.RepliesCount::before{
  content: "·"; margin-left: 4px; margin-right: 5px;
}
.RepliesCount::after{
  content: " Replies";
}

.QuestionSubject{ text-transform: capitalize; }
.QuestionSubject::before{ content: "·"; margin-left: 4px; margin-right: 5px; }

.PostMisc{
  margin-top: 10px;
  font-size: 12px;
  color: #939393;
}

.DotSeparator{
  margin-left: 5px; margin-right: 4px;
}

.EditPost:hover, .DeletePost:hover, .UnsubPost:hover, .ReportPost:hover{
  cursor: pointer;
  text-decoration: underline;
}





.QuestionsVisitor{
  margin-top: 7px;
  margin-right: 7px;
  float: left;
  width: 26px;
  height: 26px;
  border: 2px solid white;
  -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.04),0 1px 5px rgba(0,0,0,.1);
  -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.04),0 1px 5px rgba(0,0,0,.1);
  box-shadow: 0 0 0 1px rgba(0,0,0,.04),0 1px 5px rgba(0,0,0,.1);
}

.replying::after{
  display: block;
  content:"";
  margin-left: 15px;
  margin-top: 15px;
  width: 17px;
  height: 17px;
  background-image: url(/images/platform/reply.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}


.SecondColumn {
  float: right;
  width: 563px;
  margin-right: 5px; /* to display border shadow */
  height: 100%;
  -webkit-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background-color: #fff;
  border-bottom-width: 2px;
  padding: 20px;
  padding-bottom: 40px;
  margin-bottom: 53px;
}

#OnlineTitle {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
}

#OnlineUserField {
  position: relative;
}

#OnlineUserField .spinner{
  margin-top: 30px;
}

.OnlineUser {
  margin-top: 40px;
  float: left;
  text-shadow: none;
  width: 50%;
  height: 82px;
}

.OnlineUser .no-link{
  color: inherit;
  display: inline-block;
}

.OnlineLeft {
  float: left;
  margin-left: 20px;
  margin-right: 10px;
  height: 76px;
  width: 76px;
}

.OnlineRight {
  width: auto;
  height: 82px;
  overflow: hidden;
}

.OnlineUserName {
  text-align: left;
  color: #ef9300;
  font-weight: 600;
  font-size: 15px;
  height: 23px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.UserSchool {
  font-size: 13px;
  width: 100%;
  height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.UserStat {
  font-size: 13px;
  width: 100%;
  max-height: 36px;
  overflow: hidden;
}

.UserStat a {
  text-decoration: none;
  color: #00b1f2;
}

.UserStat a:hover {
  cursor: pointer;
  text-decoration: underline;
}

#MyQuestionColumn {
  width: 605px;
  float: right;
  margin-bottom: 53px;
  margin-right: 5px; /* to display border shadow */
}

#MyQuestionMisc {
  width: 100%;
  display: inline-block;
  color: white;
  text-shadow: 0px 1px rgba(0,0,0,0.2);
  font-size: 14px;
  font-weight: 600;
}

#ReturnOnlinePage {
  float: left;
}
#ReturnOnlinePage::before{ content: "← " }
#ReturnOnlinePage::after{ content: " online users" }

#ReturnOnlinePage:hover {
  text-decoration: underline;
  cursor: pointer;
}

#MyQuestionStatistics {
  float: right;
  padding-right: 2px;
}

#MyQuestionReplying{ float: left; margin-right: 5px; }

#MyQuestionReplying::after{ content: " replying"; }

#MyQuestionViewing::before{ content: "·"; margin-left: 2px; margin-right: 6px; }

#MyQuestionViewing{ float: left; }

#MyQuestionViewing::after{ content: " viewing"; }

#ParticipantPreview {
  float: right;
  width: 595px;
  background: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 5px;
  padding-left: 3px;
  text-shadow: none;
  margin-bottom: 10px;
  min-height: 30px;
}

.VisitorPreview {
  float: right;
  margin-left: 5px;
  width: 30px;
  height: 30px;
}


#MyQuestionDisplay {
  float: right;
  width: 563px;
  position: relative;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: white;
  padding: 20px;
  text-shadow: none;
  font-weight: 400;
  font-size: 14px;
  min-height: 82px;
  height: auto !important;
  height: 82px;
background-image: linear-gradient(90deg, rgba(223, 35, 253, 1) 0%, rgba(0, 245, 255, 1) 33%, rgba(255, 252, 0, 1) 66%, rgba(255, 107, 0, 1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#ffff00',GradientType=1 ); /* ie6-9 */

  background-size: 100% 3px;
  background-position: 50% 100%;
  background-repeat: no-repeat;
}

.notMine .editGroup, .notMine .deleteGroup{
  display: none;
}

.MyQuestionLeft {
  display: inline-block;
  float: left;
}

.MyQuestionRight {
  display: inline-block;
  margin-left: 15px;
  font-size: 14px;
  text-shadow: none;
  line-height: 22px;
  width: 466px;
  overflow: hidden;
}

.MyQuestionUserName {
  text-align: left;
  color: #ef9300;
  font-weight: 600;
  font-size: 15px;
  height: 23px;
  width: 165px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.MyQuestionContent {
  word-wrap: break-word;
}

.MyQuestionTools {
  text-align: right;
  float: right;
  width: 100%;
  margin-top: 25px;
  display: inline-block;
}

.MyQuestionTools.Hidden {
  display: none;
}

.MyQuestionTools > .Button{
  padding-left: 20px;
  padding-right: 20px;
  margin-left: 3px;
}

.Bump,
.Close,
.Edit {
  display: inline-block;
  width: 90px;
  height: 40px;
  margin-left: 8px;
}

#MyAnswersContainer{
  width: 100%;
}

.MyAnswerDisplay{
  position: relative;
}

.MyAnswerDisplay,
#ReplyContainer,
#TypingReply {
  float: right;
  margin-top: 10px;
  width: 563px;
  background: #fff;
  -webkit-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 20px;
  text-shadow: none;
  font-weight: 400;
  font-size: 14px;
/*  min-height: 82px;*/
  height: auto !important;
  height: 82px;
}


#MyAnswersContainer .tip{
  position: absolute;
  top: 5px;
  right: 13px;
  width: 22px;
  height: 27px;
  background-image: url(/images/platform/tip.png);
  background-position: center bottom;
  opacity: 1;
  cursor: pointer;
  transition: all 0.1s;
  -ms-transition: all 0.1s;
  webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -o-transition: all 0.1s;
}

#MyAnswersContainer .tip:hover{
  transform: scale(1.1);
}

.upvote{
  position: absolute;
  top: 5px;
  right: 45px;
  width: 22px;
  height: 27px;
  background-image: url(/images/platform/upvote.png);
  background-position: center bottom;
  background-size: 22px 22px;
  opacity: 1;
  cursor: pointer;
  transition: all 0.1s;
  -ms-transition: all 0.1s;
  webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -o-transition: all 0.1s;
}

.upvote:hover{
  transform: scale(1.1);
}

.upvote.upvoted{ background-image: url(/images/platform/upvoted.png); }

.upvote.upvoted:hover{ transform: scale(1); }

.upvote_count{
  position: absolute;
  top: 14px;
  right: 74px;
  color: #1a9ed9;
  font-size: 14px;
  cursor: pointer;
}

#MyQuestionDisplay .upvote{ right: 13px;  }
#MyQuestionDisplay .upvote_count{ right: 42px;  }

.upvote_count[data-like=""]{
  display: none;
}

.upvote_count:hover{
  text-decoration: underline;
}

.MyAnswerRight {
  display: inline-block;
  margin-left: 15px;
  font-size: 14px;
  text-shadow: none;
  line-height: 22px;
  width: 466px;
  overflow: hidden;
}

.MyAnswerUserName {
  text-align: left;
  color: #ef9300;
  font-weight: 600;
  font-size: 15px;
  height: 23px;
  width: 165px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.MyAnswerContent {
  word-wrap: break-word;
}

#TypingReply{
  color: #909090;
  font-style: italic;
  padding-top: 18px;
  font-size: 15px;
}

#TypingReply span{
  font-weight: 600;
}

#TypingReply[data-users=""]{
  display: none;
}


#ReplyContainer {
  height: 50px;
  margin-bottom: 85px;
}

#ReplyContainer{
  padding-bottom: 13px;
}

#ReplyBox {
  position: relative;
  padding: 10px;
  resize: none;
  font-size: 14px;
  font-weight: 400;
  font-family: "Source Sans Pro", sans-serif;
  height: 80px;
  line-height: 23px;
  background-color: #fff;
  border: 1px solid #d8d8d8;
  width: 100%;
  box-sizing: border-box;
}

#ReplyBox:focus {
  outline: 0;
}

.ReplyTools {
  width: 100%;
  margin-top: 5px;
}

.ReplyButton {
  width: 70px;
  float: right;
  height: 40px;
}


/* when edit mode is on, we add "temporary hidden" class to all direct children of the container,
then when done, remove the class */
.temporaryHidden{
  display: none;
}

.editMode{
}

.editModeButton{
  float: right;
  width: 75px;
  margin-left: 8px;
}

.editBox{
  position: relative;
  padding: 10px;
  resize: none;
  font-size: 14px;
  font-weight: 400;
  font-family: inherit;
  line-height: 23px;
  background-color: #fff;
  border: 1px solid #d8d8d8;
  width: 100%;
  box-sizing: border-box;
}
#MyQuestionDisplay .editBox{ height: 50px; }
.MyAnswerDisplay .editBox{ height: 50px; }


#QuestionBoardSpinner{
  overflow: hidden;
  position: relative;
}

.modQuestion, .modAnswer{
  position: absolute;
  right: 0;
  bottom: 0px;
}

.livePreview{
  width: 100%;
  font-size: 14px;
  margin-bottom: 20px;
  display: none;
}

.previewTitle{
  color: #909090;
  content: "Live preview:";
  display: block;
  margin-bottom: 10px;
}

.previewWrapper{
  position: relative;
}

.previewBuffer{
  visibility: none;
}






/* -------------------------------- symbol table -------------------------------- */

#symbolTable{
  position: fixed;
  top: 100px;
  left: 100px;
  z-index: 22;
  font-size: 12px;
  background: rgba(255,255,255,1);
  border-radius: 5px;
  overflow: hidden;
  display: none;
}

#symbolTable .pop_title{
  cursor: move;
}

#symbolTable * {
  transition: all 0.15s;
  -webkit-transition: all 0.15s;
  -moz-transition: all 0.15s;
  -o-transition: all 0.15s;
  -ms-transition: all 0.15s;
}

#symbolCategories{
  float: left;
  padding: 3px;
  height: 150px;
}

.symbolCategory{
  width: 100px;
  padding: 5px;
  margin-bottom: 3px;
  cursor: pointer;
}
.symbolCategory:hover{
  background: #f2f2f2;
}
.symbolCategory.chosen{
  background: #e0e0e0;
}

.symbolList{
  float: right;
  width: 350px;
  padding: 5px;
  min-height: 150px;
  border-left: 1px solid #dddddd;
  display: none;
  overflow-y: auto;
  font-size: 14px;
}
.symbolList.chosen{
  display: inline;
}

.symbolEntity{
  /*margin-right: 3px;
  margin-bottom: 3px;*/
  min-width: 40px;
  display: inline-block;
  cursor: pointer;
  border-radius: 2px;
  text-align: center;
}
.symbolEntity:hover{
  background: #f2f2f2;
}
.symbolEntity:active{
  background: #e0e0e0;
}

.symbolEntity .MathJax_Display{
  padding: 0 !important;
  text-align: center !important;
}

/* some latex are longer than the standard 40px width, which makes them look messy beside others, so
we put padding to make it cleaner */
.symbolEntity.longOne{
  padding-left: 10px;
  padding-right: 10px;
}







/* -------------------------------- drawing -------------------------------- */

#gameWrapper .pop_title{
  cursor: move;
}

#gameWrapper{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 880px;
  height: 500px;
  /*top: 45px; bottom: 40px;
  width: 100%;*/
  border-radius: 10px;
  overflow: hidden;
  position: fixed;
  z-index: 22;
  display: none;
}

#gameContainer{
  top: 34px;
  left: 0;
  bottom: 60px;
  width: 100%;
  position: absolute;
  background: white;
}


#canvas, #tmp_canvas{
  width: 100%;
  height: 100%;
  position: absolute;
}

#cursor{
  position :absolute;
  width: 50px;
  height: 50px;
  background: url(/images/draw/pencil_black.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: none;
  top: 5px;
  left: 5px;
}

#canvas, #cursor, #tmp_canvas{
  cursor: crosshair;
}

#game_tools{
  position: absolute;
  padding-left: 10px;
  padding-right: 5px;
  overflow: hidden;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fafafa;
  padding-top: 10px;
}

.game_tool{
  width: 40px;
  height: 40px;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 4px;
  float: left;
  margin-top: 0px;
  margin-right: 5px;
  margin-bottom: 10px;
  cursor: pointer;

background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(246,246,246,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0 );
}
.game_tool:hover{
background: rgba(246,246,246,1);
background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(246,246,246,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#ffffff', GradientType=0 );
}
.game_tool:active, .game_tool.active{
background: rgba(230,230,230,1);
background: -moz-linear-gradient(top, rgba(230,230,230,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(230,230,230,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(230,230,230,1) 0%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(230,230,230,1) 0%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(230,230,230,1) 0%, rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(230,230,230,1) 0%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#ffffff', GradientType=0 );
}

.game_tool_img{
  width: 100%;
  height: 100%;
  background-size: 70% 70%;
}

#game_tool_pencil .game_tool_img{
  background-image: url(/images/draw/tool_pencil.png);
}

#game_tool_eraser .game_tool_img{
  background-image: url(/images/draw/tool_eraser.png);
}

#game_tool_undo .game_tool_img{
  background-image: url(/images/draw/tool_undo.png);
}

#game_tool_delete .game_tool_img{
  background-image: url(/images/draw/tool_delete.png);
}

#game_tool_transparent .game_tool_img{
  background-image: url(/images/draw/tool_transparent.png);
}

.game_tool_color{
  width: 28px;
  height: 28px;
  border-radius: 4px;
  float: left;
  margin-top: 7px;
  margin-left: 4px;
  margin-bottom: 10px;
  cursor: pointer;
/*  -webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.3);
  -moz-box-shadow:    0px 0px 4px 0px rgba(50, 50, 50, 0.3);
  box-shadow:         0px 0px 4px 0px rgba(50, 50, 50, 0.3);*/
  border: 1px solid rgba(0,0,0,0.2);
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  transition: all 0.15s;
  -webkit-transition: all 0.15s;
  -moz-transition: all 0.15s;
  -o-transition: all 0.15s;
  -ms-transition: all 0.15s;
}
.game_tool_color:active{
  -webkit-box-shadow: 0px 0px 0px 0px rgba(50, 50, 50, 0.3);
  -moz-box-shadow:    0px 0px 0px 0px rgba(50, 50, 50, 0.3);
  box-shadow:         0px 0px 0px 0px rgba(50, 50, 50, 0.3);
}
.game_tool_color:hover{
  -ms-transform: scale(1.15, 1.15);
  -webkit-transform: scale(1.15, 1.15);
  transform: scale(1.15, 1.15);
}


.game_tool_color[data-color='red']{ background: rgb(203,7,7); margin-left: 5px; }
.game_tool_color[data-color='pink']{ background: rgb(248,64,174); }
.game_tool_color[data-color='yellow']{ background: rgb(207,248,41); }
.game_tool_color[data-color='purple']{ background: rgb(164,7,203); }
.game_tool_color[data-color='blue']{ background: rgb(41,124,248); }
.game_tool_color[data-color='green']{ background: rgb(7,195,82); }
.game_tool_color[data-color='orange']{ background: rgb(248,171,56); }
.game_tool_color[data-color='brown']{ background: rgb(195,120,7); }
.game_tool_color[data-color='white']{ background: rgb(255,255,255); }
.game_tool_color[data-color='gray']{ background: rgb(112,112,112); }
.game_tool_color[data-color='black']{ background: rgb(0,0,0); }
.game_tool_color[data-color='#fae7d0']{ background: #fae7d0; }

#game_tool_size{
  float: left;
  margin-left: 15px;
  position: relative;
}

#pencil_size{
  width: 18px;
  height: 12px;
  font-size: 12px;
  font-weight: 400;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#size_slider{
  width: 100px;
  margin-top: 7px;
}

.ui-slider{
  border-radius: 4px;
  border: 1px solid #aaaaaa;
  height: 4px;
  position: relative;
  background: white;
}

.ui-slider-handle{
  border-radius: 100px;
  border: 1px solid #d3d3d3;
  top: -5px;
  margin-left: -6px;
  position: absolute;
  z-index: 2;
  width: 12px;
  height: 12px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
.ui-slider-handle:focus { outline: 0; }


#insert_drawing, #download_drawing{
  float: right;
  margin-top: 4px;
  padding-left: 10px;
  padding-right: 10px;
  width: auto;
  font-size: 16px;
  line-height: 32px;
  height: 36px;
  text-align: center;
  font-weight: 500;
}

#myQuestionPreview .PostImage{
  width: 90px;
  display: block;
}

.QuestionsBoard .PostImage{
  width: 100px;
  display: block;
}

/* for guest, tell them to signup instead of displaying question textarea */
#signupMessage {
  color: #888888;
  position: relative;
  padding: 11px;
  resize: none;
  font-size: 18px;
  font-weight: 600;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  height: 50px;
  -webkit-box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.04);
  -webkit-box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.04);
  -moz-box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.04);
  box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.04);
  border: 1px solid #d8d8d8; /* #d8d8d8 */
  overflow-y: auto;
  background: #fafafa;
}

/* avoid latex bomb */
.MathJax .math{
  max-height: 5000px !important;
}

#chooseSubjectPop{
  width: 688px;
}

#chooseSubjectPop .pop_body{
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  overflow: hidden;
}

.choose_subject_title{
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 50px;
}

.choose_subject_block{
  float: left;
  width: 200px;
  padding: 6px;
  border: 1px solid #d8d8d8;
  overflow: hidden;
  font-size: 16px;
  line-height: 30px;
  border-radius: 6px;
  margin: 4px;
  cursor: pointer;
  background: white;
  font-weight: 400;
  transition: all 0.1s;
  -ms-transition: all 0.1s;
  webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -o-transition: all 0.1s;
}
.choose_subject_block:hover{
  border-color: #ACCEDE;
  background: #eff9ff;
  font-weight: 600;
  transform: scale(1.05);
  -ms-transform: scale(1.05);
  -webkit-transform: scale(1.05);
}
.choose_subject_block.selected{
  background: #0589CE;
  border-color: #0589CE;
  color: white;
  font-weight: 600;
}

.choose_subject_block .pic{
  float: left;
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.choose_subject_block .text{
  text-transform: capitalize;
}





/* --------------------------------- Record Panel --------------------------------- */
#record_panel {
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -200px;
  width: 400px;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  position: fixed;
  display: none;
  background-color: white;
  z-index: 2;
}

#record_panel .pop_title{
  cursor: move;
}

.record_duration{
  margin-top: 10px;
  color: #4D4D4D;
  font-size: 100px;
  font-weight: 300;
  text-align: center;
}

.record_btns{
  margin-top: 0px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 210px;
  overflow: hidden;
}

#record_button{
  float: left;
  width: 100px;
}

#insert_recording{
  float: right;
  width: 100px;
}

#record_message{
  margin-top: 15px;
  color: #8C9CA8;
  text-align: center;
}

#record_preview{
  margin-top: 25px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}