Merged in better print styles

main.html

@@ -5,7 +5,6 @@
 
   <link rel="stylesheet" href="${ settings.LIB_URL }jquery.treeview.css" type="text/css" media="all" />
   <link rel="stylesheet" href="/static/css/application.css" type="text/css" media="all" />
-  <link href="/static/css/print.css" rel="stylesheet" type="text/css" media="print"/>
 
   <script type="text/javascript" src="${ settings.LIB_URL }jquery-1.6.2.min.js"></script>
   <script type="text/javascript" src="${ settings.LIB_URL }jquery-ui-1.8.16.custom.min.js"></script>

sass/base/_extends.scss

@@ -53,6 +53,10 @@ h1.top-header {
   padding: lh();
   vertical-align: top;
   width: flex-grid(9) + flex-gutter();
+
+  @media print {
+    @include box-shadow(none);
+  }
 }
 
 .sidebar {
@@ -80,6 +84,10 @@ h1.top-header {
     border-bottom: 1px solid #d3d3d3;
   }
 
+  @media print {
+    display: none;
+  }
+
   h3 {
     border: none;
     border-bottom: 1px solid #d3d3d3;
@@ -165,6 +173,10 @@ h1.top-header {
   margin: (-$body-line-height) (-$body-line-height) $body-line-height;
   text-shadow: 0 1px 0 #fff;
 
+  @media print {
+    display: none;
+  }
+
   a {
     color: darken(#F6EFD4, 80%);
 

sass/courseware/_courseware.scss

@@ -46,6 +46,12 @@ div.course-wrapper {
           width: auto;
           border-right: 0;
         }
+
+        @media print {
+          display: block;
+          width: auto;
+          border-right: 0;
+        }
       }
 
       section.problem {
@@ -59,6 +65,16 @@ div.course-wrapper {
           padding: 0;
         }
 
+        @media print {
+          display: block;
+          width: auto;
+          padding: 0;
+
+          canvas, img {
+            page-break-inside: avoid;
+          }
+        }
+
         span {
           &.unanswered, &.ui-icon-bullet {
             @include inline-block();

sass/layout/_footer.scss

@@ -6,6 +6,10 @@ footer {
   margin-top: $body-line-height;
   padding: 0 $body-line-height;
 
+  @media print {
+    display: none;
+  }
+
   p {
     float: left;
 

sass/layout/_header.scss

@@ -3,6 +3,10 @@ div.header-wrapper {
   border-bottom: 1px solid #fff;
   @include box-shadow(inset 0 -4px 6px darken($mit-red, 5%));
 
+  @media print {
+    display: none;
+  }
+
   header {
     @extend .clearfix;
     @extend .wrapper;

sass/layout/_layout.scss

@@ -19,6 +19,11 @@ html {
       margin-top: 3px;
       overflow: hidden;
 
+      @media print {
+        border-bottom: 0;
+        @include border-radius(none);
+      }
+
       @media screen and (min-width: 1400px) {
         @include border-radius(4px);
         margin-top: lh(.5);

sass/print.scss

-.header-wrapper  {display:none;}
-#accordion  {display:none;}
-.ui-accordion  {display:none;
-visibility:hidden;
-width:0%;
-}
+