@font-face
  font-family: droid-sans-mono
  font-style: normal
  font-weight: normal
  src: local("Droid Sans Mono"), local("DroidSansMono"), url('fonts/droid/DroidSansMono.ttf') format("truetype")

=user-select($val:"none")
  -webkit-user-select: #{$val};
  -moz-user-select: #{$val};
  -ms-user-select: #{$val};
  user-select: #{$val};

=disable-user-select
  +user-select(none)

=enable-user-select
  +user-select(initial)

@import help
@import misc_page
@import console
@import account
@import activity
@import projects
@import project
@import wizard
@import editor
@import jupyter
@import tasks
@import archive
@import course
@import interact
@import explore
@import consoles
@import top_navbar
@import 3d
@import d3
@import stripe

.hide
  display: none

.tt
  font-family: monospace

.lighten
  color: #666

.lighten-2
  color: #999

.small
  font-size: 9pt

.smallish
  font-size: 10pt

.large
  font-size: 16pt

.Large
  font-size: 18pt

.huge
  font-size: 22pt

.bold
  font-weight: bold

.close
  font-size: 20pt

.center
  text-align: center

body
  padding-top: 43px

/* mezzo-small, larger than xs, smaller than sm, like the old tasklist button size */

.btn-ms
  padding-bottom: 2px
  padding-left: 10px
  padding-right: 10px
  padding-top: 2px
  letter-spacing: normal
  line-height: 20px
  margin-bottom: 0px
  margin-left: -1px
  margin-right: 0px
  margin-top: 0px
  font-size: 11.9px

@media (max-width: 767px)
  .salvus-project
    position: relative !important
    top: 0px !important

/* so on iOS scroll-into-view modals work */
@media (max-width: 480px)
  .modal.fade.in
    top: 10px

/* This is a hack to accurately determine if the screen is displaying in responsive mode.
 * When responsive mode, .salvus-responsive-mode-test will have a width of 767px and in full size the
 * width will be 10000px.
 */
@media (max-width: 767px)
  .salvus-responsive-mode-test
    width: 767px

@media (min-width: 768px)
  .salvus-responsive-mode-test
    width: 10000px

.ui-pnotify-history-container
  position: fixed

/* The following makes it so the codemirror cursor is visible to the naked eye.
 * I do not understand how anybody can stand the default nearly-invisible vertical line.
/*.CodeMirror div.CodeMirror-cursor {
 *  background-color:#000 !important;
 *  width:1ex !important;
 *  opacity:0.5;
 *}
 */

.CodeMirror, .CodeMirror-wrap
  line-height: normal

/* see http://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width-without-overflowing-when-padding-is-present  */

.boxsizingBorder
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box

.highlight
  background-color: orange
  padding: 3px
  margin: -3px
  border-radius: 3px

/* fix bootstrap ugliness  */

code
  color: #444 !important
  background-color: #f9f2f4 !important
  padding-left: 2px !important
  padding-right: 2px !important

blockquote p
  font-size: 15px

.constrained
  max-width: 1170px

.modal h3
  margin: 0

.modal-footer
  padding: 5px

input[type="text"], select, input[type="email"], select, input[type="password"], select
  margin-bottom: 10px

.btn
  white-space: normal

.btn-black
  color: #fff
  background-color: #000000
  border-color: #000000

.tooltip
  font-size: 11px

.checkbox
  margin-top: 4px
  margin-bottom: 4px

.navbar-default
  .navbar-collapse, .navbar-form
    position: relative
    top: 1px

/* Make math visible even when there is a dark background.  Since mathjax is always black, this
 * helps a lot.  Obviously, it isn't perfect, but it is better than USELESS. '
 */

.MathJax_SVG_Display
  background: white

/* From http://stackoverflow.com/questions/13955163/imitating-a-blink-tag-with-css3-animations  */

.blink
  animation: blink 1s steps(5, start) infinite
  -webkit-animation: blink 1s steps(5, start) infinite

@keyframes blink
  to
    visibility: hidden


@-webkit-keyframes blink
  to
    visibility: hidden


.cm-spell-error
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==)
  background-position: bottom left
  background-repeat: repeat-x

*[data-toggle*="collapse"]
  cursor:pointer

/* Fix menubar height at the top of the screen, mainly on Firefox. */
ul.nav.pull-right.navbar-nav li
  height: 42px