grade_summary.sass

// print button for grades summary page
.print-grades
  float: right
  
  @media print
    display: none

// styles for grade summary tables
#grades_summary
  border-collapse: collapse
  border-bottom: 1px solid #eee
  
  @media print
    border-bottom: none
    a
      text-decoration: none !important
      color: black

#grades_summary thead th
  border-top: none
  font-size: 1.0em
  padding: 4px 5px 2px
  font-weight: bold
  background-color: #444
  color: #fff
  text-align: left
  
  @media print
    :text-transform uppercase
    :color black
    :font-size 1.2em
    :font-weight bold
    :border-bottom 2px solid black
    :padding-left 0

#grades_summary tr
  
  > *
    padding: 5px
    text-align: left
    border-top: 2px solid black
    background-color: #fff
  
    @media print
      border-top: 1px solid black
      color: black !important
      background-color: transparent !important

#grades_summary tr.comments td
  border-width: 0
  font-size: 0.8em
  padding-left: 30px
  
  @media print
    padding-left: 0
    font-style: italic
    font-size: 0.9em

#grades_summary tr.rubric_assessments>td
  border-width: 0
  padding-left: 30px
  table.rubric
    margin-top: 0
    margin-bottom: 20px

#grades_summary tr.editable:hover > *
  background-color: #cdf

#grades_summary tr.editable.student_assignment.dropped:hover td.points_possible
  background-image: url(/images/earmark_hover.png)

#grades_summary tr.student_assignment.dropped td
  color: #ccc
  
  @media print
    color: black

#grades_summary tr.student_assignment.dropped td.points_possible
  background-image: url(/images/earmark.png)
  background-repeat: no-repeat
  background-position: top left

#grades_summary tr.student_assignment.dropped td a
  color: #aaa
  
  @media print
    color: black
    font-weight: normal

#grades_summary th.assignment_score
  text-align: center

#grades_summary td.assignment_score
  cursor: pointer
  text-align: center
  white-space: nowrap

#grades_summary tr > .assignment_score:hover .grade
  font-weight: bold

#grades_summary tr > .assignment_score .grade.changed
  color: #800
  font-weight: bold

#grades_summary th.possible
  text-align: right
  white-space: nowrap

#grades_summary td.possible
  text-align: right
  padding-right: 15px

#grades_summary td.details
  text-align: right
  padding-left: 0
  white-space: nowrap
  min-width: 80px // 4 x 20 pixel icons

#grades_summary th.title
  font-size: 1.1em
  font-weight: normal
  padding-left: 20px
  word-break: break-all
  
  @media print
    padding-left: 0
    font-size: 1.0em
    font-weight: normal

#grades_summary th.title .context
  visibility: hidden
  font-size: 0.8em
  color: #999
  padding-left: 10px
  line-height: 0.5em
  
  @media print
    visibility: visible
    margin: 5px 0
    padding: 0

#grades_summary th.title .context.context_hover
  visibility: visible

#grades_summary td.due
  font-size: 0.8em
  white-space: nowrap
  
  @media print
    font-size: 1em

#grades_summary tr.assignment_graded > *
  background-color: #eee
  
  @media print
    background-color: transparent
  
    &.title
      font-weight: bold

#grades_summary tr.final_grade > *
  background-color: #666
  color: #eee
  font-size: 1.5em
  font-weight: bold
  
  @media print
    background-color: transparent
    text-transform: uppercase
    border-top: 2px solid black
    font-size: 1.2em

#grades_summary tr.group_total
  td, th[scope=row]
    background-color: #ccc
    border-top-width: 0
    font-weight: bold
  
    @media print
      background-color: transparent
      border-top-width: 1px
      text-transform: uppercase
    
      &.title .context
        display: none

#grades_summary tr.group_total td.possible
  font-weight: normal
  font-size: 0.8em

.revert_score_link
  position: absolute
  top: 2px
  left: 0px
  opacity: 0.5
  display: none

.revert_score_link:hover
  opacity: 1.0


#grades_summary .tooltip
  :position relative
  :z-index 10
  :outline none
  &:hover, &:focus
    :text-decoration none
    .tooltip_wrap, .tooltip_text
      :visibility visible
  &:active
    :outline none
    :text-decoration none
    .tooltip_wrap, .tooltip_text
      :visibility visible
  .tooltip_wrap, .tooltip_text
    :display block
    :visibility hidden
  .tooltip_wrap
    :background url("/images/tooltip_carat.png") no-repeat left bottom
    :bottom 15px
    :padding-bottom 3px
    :position absolute
    // ie puts the tooltips too low.
    .ie &
      :bottom 25px
  .tooltip_text
    :background-color #444
    :background-position left bottom
    :color #fff
    :left 0px
    :max-width 250px
    :padding 2px 7px 2px
    :white-space nowrap
    table tr td
      :background-color transparent
      :font-size 1.0em
      :padding 0 2px
      :border-width 0px
  .right
    :right 0px
    :background-position right bottom

#observer_user_url
  :font-size 0.8em
  :border 1px solid #aaa

#only_consider_graded_assignments_wrapper
  label
    font-size: 0.8em
    display: block

.score_details_table
  :font-size 1.3em
  :width 100%
  :border 1px solid black

a.screenreader-toggle
  :color #b7b7b7
  :font-weight normal
  :padding-right 5px

div.rubric-toggle
  :padding-bottom 5px

#navpills li
  border: none
  border-radius: 4px
  background: none
  float: left
  list-style-type: none

  &.ui-tabs-active
    background-color: #1588CC
    a
      color: #fff

  a
    padding: 0.3em 1.3em
    font-weight: inherit
    text-shadow: none
    float: left

#navpills
  overflow: hidden
  margin: 0
  padding: 0
  margin-bottom: 1em

.ui-tabs .ui-tabs-nav
  border: none

.ui-tabs .ui-tabs-panel
  border: none
  padding: 0

$outcome-border: 1px solid #BCC2CA

#outcomes ul
  background-color: #f4f4f4
  border: $outcome-border
  border-radius: 3px
  overflow: hidden

#outcomes li
  list-style-type: none
  overflow: hidden
  border-top: $outcome-border

  &:first-child
    border-top: none

  .outcome
    float: left
    width: 80%
    padding: 1em
    border-right: $outcome-border
    -moz-box-sizing: border-box
    box-sizing: border-box

  .description
    color: #b4b4b4

  .score
    float: right
    width: 20%
    padding: 1em
    -moz-box-sizing: border-box
    box-sizing: border-box