media.css

  1. 6.x themes/fp6_clean/media.css
  2. 4.x modules/tinymce/inc/tiny_mce/plugins/media/css/media.css
  3. 5.x modules/tinymce/inc/tiny_mce/plugins/media/css/media.css
/*
 * This CSS file is for handling mobile and print media.
*/





/* hide or alter various elements when we go to print */
@media print {
  
  #top-nav, 
  #sidebar-left,
  .dash-welcome-block,
  #page-print-options,
  #breadcrumbs-wrapper,
  a.button,
  .change-term-link a,
  .header-profile-image,
  td.actions, 
  th.header-sortable-actions,  
  .fp-boxes-submit-button,
  .admin-toolbox-link-wrapper,
  fieldset.new-comment-fs,
  fieldset.upload-file-fs,
  #render-advise_history_left_column a.view-print-all,
  #render-advise_history_right_column a.view-print-all,
  td.student-files-delete-td,
  a.approval-edit,
  fieldset.enter-audit-comment-fs,
  fieldset.view-url-options-fs,
  .fp-bottom-message 
  {
    display: none !important;
  }
  
   #page-content {
     width: 100% !important;
     padding: 0 !important;
   }
  
   .student-mini-profile .profile-top-details-wrapper {
     width: 50% !important;
   }
   
   .profile-line-content a {
     display: none;
   }
   
   
  
} /* media print */











@media screen and (max-width: 1550px) {  
  
  .student-profile-header-full .profile-top-wrapper-right-side {
    width: 400px;
  }
  
  .student-profile-header-full .profile-inline-line label {
    min-width: 130px;
  }
  
  
  
  
  
  
}  




@media screen and (max-width: 1450px) {  
  
  .student-mini-profile .profile-top-wrapper-right-side {
    width: 400px;
  }
  
  .student-mini-profile .profile-inline-line label {
    min-width: 130px;
  }
  
  
}  /* max-width 1450px */



@media screen and (max-width: 1380px) {
  .student-profile-header-full .profile-top-wrapper-right-side {
    width: 300px;
  }
  
  .student-profile-header-full .profile-top-wrapper-right-side {
    width: 300px;
  }
  
  

  .page--login #page-login-user-form {
    float: left;
    width: calc(100% - 600px);  
    text-align: center; 
    
  }
  
  .page--login #page-login-page__wallpaper {
    width: 600px;       
  }
  
  
  
  

} /* max-width 1380px */




@media screen and (max-width: 1170px) {
  
  .student-mini-profile .profile-top-details-wrapper .profile-detail-line-degree .profile-line-content {
    display: inline;    
    vertical-align: top;  
  }  
  
  
}




@media screen and (max-width: 1130px) {  
  
  .top-banner img {
    height: 50px !important;
    width: auto;
  }
  

  .student-mini-profile {
    font-size: 1.0em;
  }

  .student-mini-profile .profile-inline-line label {
    min-width: 100px;
  }


  table.student-alerts {
    font-size: 0.9em;
  }

  
  .page--login #page-login-user-form {
    float: left;
    width: calc(100% - 400px);  
    text-align: center; 
    
  }
  
  .page--login #page-login-page__wallpaper {
    width: 400px;       
  }
  
  
  
}  /* max-width 1130px */



@media screen and (max-width: 1075px) {  
  
  .student-mini-profile h2 {
    font-size: 1.0em;
    font-weight: bold;
  }


  .student-mini-profile .profile-top-wrapper-left-side {
    width: 300px;
  }

  .student-mini-profile .profile-top-wrapper-right-side {
    width: 200px;
  }


  
  .student-mini-profile .profile-inline-line label {
    display: none;
  }

  .student-mini-profile .has-mobile-content .profile-line-content{
    display: none;
  }
  .student-mini-profile .has-mobile-content .mobile-profile-line-content {
    display: inline !important;
  }

 
  table.student-alerts td.short-desc {
    max-width: 300px;
  }

  table.student-alerts td.short-desc .short-desc-wrapper {
    max-width: 300px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    
  }
  
  .dash-box {
    display: inline-block !important;
    width: 100% !important;
  }
  
  
  .dash-box .contents {    
    max-height: none !important;
    overflow-y: auto !important;  
  }
  
  .dash-box .dash-feed-block {
    margin: 0 !important;    
  }
  
  
  .select-from-event-types a.event-type {
    margin-right: 0;
    margin-bottom: 30px;
  }
  
  .force-spaces {
    display: none;
  } 
  
  
}  /* max-width 1075px */










@media screen and (max-width: 975px) {  
  
  
  #header #top-nav form .smallinput {
    width: 150px;
  }
  
  .student-mini-profile .header-profile-image {
    display: none;
  }  
  
  .student-profile-header-full .header-profile-image {
    display: block;    
    width: 100px !important;
  }
  
  .student-profile-header-full .header-profile-image img {
    width: 90px;
    height: auto;
    border-radius: 5px;
  }
  
  
  .page--login .login-content-div .left-side-content {
    width: 100%;
  }
  
  .page--login #page-login-user-form {
    float: left;
    width: 100%;  
    text-align: center; 
    
  }
  
  .page--login #page-login-page__wallpaper {
    display: none;       
  }
  
  
  
}  /* max-width 975px */


@media screen and (max-width: 825px) {  
  
  
  #header #top-nav form .smallinput {
    display: none;
  }
  
  #header #top-nav form a {
    margin-left: 0px;
  }
  
  #sidebar-left {
    width: 75px;
  }
  
  #sidebar-left ul.sidebar-left-nav li {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  
  #sidebar-left ul.sidebar-left-nav li i {
    font-size: 1.5em !important;
  }
  #sidebar-left ul.sidebar-left-nav li .desc {
    display: none;
  }
  
  
  .has-sidebar-left #page-content {
    width: calc(100vw - 100px);
    padding-left: 5px;
  }  
  
  #page-content {    
    font-size: 0.9em;
  }
  
  
  
  .change-term-link {
    display: block;
  }

  .student-profile-header-full .header-profile-image {
    display: none;    
    
  }


  table.student-alerts td.short-desc {
    max-width: 200px;
  }

  table.student-alerts td.short-desc .short-desc-wrapper {
    max-width: 200px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    
  }

  
}  /* max-width 825px */











@media screen and (max-width: 650px) {  

  #page-content {
    font-size: 0.8em;
  }

  
  /* at this point, we need to get rid of ALL the navigation (top and side) and replace with
   * a single hamburger menu, which expands to show all options.
   */
  .mobile-hamburger-icon {
    display: inline-block !important;    
    float: left;
    font-size: 2em;
    margin-left: 10px;    
    margin-right: 10px;
  }
  
  .mobile-hamburger-icon a {
    display: inline-block;
    width: 50px;
    padding-bottom: 3px;
    text-align: center;
    zborder: 1px solid #ccc;
    zborder-radius: 5px;    
  }
  
  #sidebar-left,
  ul.top-nav-ul {
     display: none !important;
  }
    

  .has-sidebar-left #page-content {
    width: calc(100% - 10px);
    
    padding-left: 5px;
  }  


  #element-inner-wrapper-course-search-subject {
    width: 100% !important;
  } 

  #mobile-hamburger-menu ul.top-nav-ul
  {
    display: block !important;
  }

  #mobile-hamburger-menu ul.top-nav-ul li.cog-only {
    display: block !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #mobile-hamburger-menu .mobile-hamburger-icon {
    display: none !important;
  }
  
  #mobile-hamburger-menu a {
    color: white;
  }
  
  #mobile-hamburger-menu .sidebar-left-nav li {
    font-size: 1.4em !important;
  }
  
  #mobile-hamburger-menu .sidebar-left-nav li i {
    font-size: 2em !important;
  }
  
  #mobile-hamburger-menu .top-nav-ul .tub-icon-element-alert {
    display: inline-block !important;
  }
  
  #mobile-hamburger-menu .top-nav-ul .tub-icon-element-alert .tub-alert-count {
    top: 12px;
    right: -6px;
    font-size: .65em;
  }
  
  
  .student-mini-profile .profile-top-wrapper-left-side {
    width: 250px;
  }

  .student-mini-profile .profile-top-wrapper-right-side {
    width: 150px;
  }
  
  
  table.student-alerts .author,
  table.student-alerts .updated
  {
    display: none; 
  }
  
  table.student-alerts td.short-desc {
    max-width: 100%
  }

  table.student-alerts td.short-desc .short-desc-wrapper {
    max-width: 400px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    
  }  
  
  
  .advising-stats-block-inner-wrapper .advising-stat-box {
    padding-right: 0px !important;
  }
  
 .advising-stats-block-inner-wrapper .advising-stat-box-wide {  
    min-width: 100% !important;    
  }
  
  .element-type-textfield input, 
  .element-type-password input, 
  .element-type-datetime-local input, 
  .element-type-time input, 
  .element-type-search input {
    width: 90%;
  }  
  
  
  .select-from-event-types {
    width: 100%;
  }
  
  .select-from-event-types a.event-type {
      display: inline-block;
      margin-left: 20px;
      
      margin-bottom: 30px;
  }
  
  table.custom-calendar .calendar-entry {
    display: none;
  }
  table.custom-calendar .mobile-day-count {
    display: block !important;
  }
  
  
  
  
  
}  /* max-width 650px */









@media screen and (max-width: 450px) {  
  
  
  .top-banner img {
    height: 40px !important;
    width: auto;
  }
  
  .mobile-hamburger-icon {
    font-size: 1.9em;
  }  
  
  #page-print-options {
    display: none;
  }
  
  body.has-page-tabs .inner-page-content-wrapper { 
    margin-left: 0;
  }
  
  #page-student-mini-profile-wrapper {
    margin-left: 0;
  }
  
  ul.tabs {
    padding-left: 0;
  }
  
  /* at this width, we go down to displaying the Degree plan in a single column. */
  .fp-semester-table {
    width: calc(100% - 10px);
  }
  .fp-semester-table td.fp-boxes {
    display: block;
    width: 100%;
    text-align: left !important;
  }
  
  .fp-semester-table td.fp-boxes table {
    width: 100%;
    margin-right: 0;
    padding-right: 0;
  }
  
  .student-mini-profile .profile-detail-line-student-name-cwid,
  .student-mini-profile .profile-detail-line-empty
  {
    display: none;
  }
    
  
  #engagements-list-page .add-engagements-buttons {
    font-size: 0.9em;
    float: none;
    clear: both;
    text-align: center;
  }
  

 table.student-alerts td.short-desc .short-desc-wrapper {
    max-width: 250px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    
  }  

  
}  /* max-width 450px */







@media screen and (max-width: 375px) {  
  
  
  .top-banner img {
    height: 30px !important;
    width: auto;
  }
  
  .mobile-hamburger-icon {
    font-size: 1.8em;
  }  

  .student-mini-profile .profile-top-wrapper-left-side {
    width: 100%;
  }

  .student-mini-profile .profile-top-wrapper-right-side {
    width: 100%;
  }


  
  .student-mini-profile .profile-detail-line-rank,
  .student-mini-profile .profile-detail-line-cumu
  {
    display: inline;
    padding-right: 20px;
  }
  
  
 table.student-alerts td.short-desc .short-desc-wrapper {
    max-width: 200px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    
  }  
  
  
}  /* max-width 375px */

File

themes/fp6_clean/media.css
View source
  1. /*

  2.  * This CSS file is for handling mobile and print media.

  3. */

  4. 

  5. 

  6. 

  7. 

  8. 

  9. /* hide or alter various elements when we go to print */

  10. @media print {

  11.   

  12.   #top-nav, 

  13.   #sidebar-left,

  14.   .dash-welcome-block,

  15.   #page-print-options,

  16.   #breadcrumbs-wrapper,

  17.   a.button,

  18.   .change-term-link a,

  19.   .header-profile-image,

  20.   td.actions, 

  21.   th.header-sortable-actions,  

  22.   .fp-boxes-submit-button,

  23.   .admin-toolbox-link-wrapper,

  24.   fieldset.new-comment-fs,

  25.   fieldset.upload-file-fs,

  26.   #render-advise_history_left_column a.view-print-all,

  27.   #render-advise_history_right_column a.view-print-all,

  28.   td.student-files-delete-td,

  29.   a.approval-edit,

  30.   fieldset.enter-audit-comment-fs,

  31.   fieldset.view-url-options-fs,

  32.   .fp-bottom-message 

  33.   {

  34.     display: none !important;

  35.   }

  36.   

  37.    #page-content {

  38.      width: 100% !important;

  39.      padding: 0 !important;

  40.    }

  41.   

  42.    .student-mini-profile .profile-top-details-wrapper {

  43.      width: 50% !important;

  44.    }

  45.    

  46.    .profile-line-content a {

  47.      display: none;

  48.    }

  49.    

  50.    

  51.   

  52. } /* media print */

  53. 

  54. 

  55. 

  56. 

  57. 

  58. 

  59. 

  60. 

  61. 

  62. 

  63. 

  64. @media screen and (max-width: 1550px) {  

  65.   

  66.   .student-profile-header-full .profile-top-wrapper-right-side {

  67.     width: 400px;

  68.   }

  69.   

  70.   .student-profile-header-full .profile-inline-line label {

  71.     min-width: 130px;

  72.   }

  73.   

  74.   

  75.   

  76.   

  77.   

  78.   

  79. }  

  80. 

  81. 

  82. 

  83. 

  84. @media screen and (max-width: 1450px) {  

  85.   

  86.   .student-mini-profile .profile-top-wrapper-right-side {

  87.     width: 400px;

  88.   }

  89.   

  90.   .student-mini-profile .profile-inline-line label {

  91.     min-width: 130px;

  92.   }

  93.   

  94.   

  95. }  /* max-width 1450px */

  96. 

  97. 

  98. 

  99. @media screen and (max-width: 1380px) {

  100.   .student-profile-header-full .profile-top-wrapper-right-side {

  101.     width: 300px;

  102.   }

  103.   

  104.   .student-profile-header-full .profile-top-wrapper-right-side {

  105.     width: 300px;

  106.   }

  107.   

  108.   

  109. 

  110.   .page--login #page-login-user-form {

  111.     float: left;

  112.     width: calc(100% - 600px);  

  113.     text-align: center; 

  114.     

  115.   }

  116.   

  117.   .page--login #page-login-page__wallpaper {

  118.     width: 600px;       

  119.   }

  120.   

  121.   

  122.   

  123.   

  124. 

  125. } /* max-width 1380px */

  126. 

  127. 

  128. 

  129. 

  130. @media screen and (max-width: 1170px) {

  131.   

  132.   .student-mini-profile .profile-top-details-wrapper .profile-detail-line-degree .profile-line-content {

  133.     display: inline;    

  134.     vertical-align: top;  

  135.   }  

  136.   

  137.   

  138. }

  139. 

  140. 

  141. 

  142. 

  143. @media screen and (max-width: 1130px) {  

  144.   

  145.   .top-banner img {

  146.     height: 50px !important;

  147.     width: auto;

  148.   }

  149.   

  150. 

  151.   .student-mini-profile {

  152.     font-size: 1.0em;

  153.   }

  154. 

  155.   .student-mini-profile .profile-inline-line label {

  156.     min-width: 100px;

  157.   }

  158. 

  159. 

  160.   table.student-alerts {

  161.     font-size: 0.9em;

  162.   }

  163. 

  164.   

  165.   .page--login #page-login-user-form {

  166.     float: left;

  167.     width: calc(100% - 400px);  

  168.     text-align: center; 

  169.     

  170.   }

  171.   

  172.   .page--login #page-login-page__wallpaper {

  173.     width: 400px;       

  174.   }

  175.   

  176.   

  177.   

  178. }  /* max-width 1130px */

  179. 

  180. 

  181. 

  182. @media screen and (max-width: 1075px) {  

  183.   

  184.   .student-mini-profile h2 {

  185.     font-size: 1.0em;

  186.     font-weight: bold;

  187.   }

  188. 

  189. 

  190.   .student-mini-profile .profile-top-wrapper-left-side {

  191.     width: 300px;

  192.   }

  193. 

  194.   .student-mini-profile .profile-top-wrapper-right-side {

  195.     width: 200px;

  196.   }

  197. 

  198. 

  199.   

  200.   .student-mini-profile .profile-inline-line label {

  201.     display: none;

  202.   }

  203. 

  204.   .student-mini-profile .has-mobile-content .profile-line-content{

  205.     display: none;

  206.   }

  207.   .student-mini-profile .has-mobile-content .mobile-profile-line-content {

  208.     display: inline !important;

  209.   }

  210. 

  211.  

  212.   table.student-alerts td.short-desc {

  213.     max-width: 300px;

  214.   }

  215. 

  216.   table.student-alerts td.short-desc .short-desc-wrapper {

  217.     max-width: 300px;

  218.     white-space: nowrap;

  219.     overflow-x: hidden;

  220.     text-overflow: ellipsis;

  221.     

  222.   }

  223.   

  224.   .dash-box {

  225.     display: inline-block !important;

  226.     width: 100% !important;

  227.   }

  228.   

  229.   

  230.   .dash-box .contents {    

  231.     max-height: none !important;

  232.     overflow-y: auto !important;  

  233.   }

  234.   

  235.   .dash-box .dash-feed-block {

  236.     margin: 0 !important;    

  237.   }

  238.   

  239.   

  240.   .select-from-event-types a.event-type {

  241.     margin-right: 0;

  242.     margin-bottom: 30px;

  243.   }

  244.   

  245.   .force-spaces {

  246.     display: none;

  247.   } 

  248.   

  249.   

  250. }  /* max-width 1075px */

  251. 

  252. 

  253. 

  254. 

  255. 

  256. 

  257. 

  258. 

  259. 

  260. 

  261. @media screen and (max-width: 975px) {  

  262.   

  263.   

  264.   #header #top-nav form .smallinput {

  265.     width: 150px;

  266.   }

  267.   

  268.   .student-mini-profile .header-profile-image {

  269.     display: none;

  270.   }  

  271.   

  272.   .student-profile-header-full .header-profile-image {

  273.     display: block;    

  274.     width: 100px !important;

  275.   }

  276.   

  277.   .student-profile-header-full .header-profile-image img {

  278.     width: 90px;

  279.     height: auto;

  280.     border-radius: 5px;

  281.   }

  282.   

  283.   

  284.   .page--login .login-content-div .left-side-content {

  285.     width: 100%;

  286.   }

  287.   

  288.   .page--login #page-login-user-form {

  289.     float: left;

  290.     width: 100%;  

  291.     text-align: center; 

  292.     

  293.   }

  294.   

  295.   .page--login #page-login-page__wallpaper {

  296.     display: none;       

  297.   }

  298.   

  299.   

  300.   

  301. }  /* max-width 975px */

  302. 

  303. 

  304. @media screen and (max-width: 825px) {  

  305.   

  306.   

  307.   #header #top-nav form .smallinput {

  308.     display: none;

  309.   }

  310.   

  311.   #header #top-nav form a {

  312.     margin-left: 0px;

  313.   }

  314.   

  315.   #sidebar-left {

  316.     width: 75px;

  317.   }

  318.   

  319.   #sidebar-left ul.sidebar-left-nav li {

  320.     padding-top: 15px;

  321.     padding-bottom: 15px;

  322.   }

  323.   

  324.   #sidebar-left ul.sidebar-left-nav li i {

  325.     font-size: 1.5em !important;

  326.   }

  327.   #sidebar-left ul.sidebar-left-nav li .desc {

  328.     display: none;

  329.   }

  330.   

  331.   

  332.   .has-sidebar-left #page-content {

  333.     width: calc(100vw - 100px);

  334.     padding-left: 5px;

  335.   }  

  336.   

  337.   #page-content {    

  338.     font-size: 0.9em;

  339.   }

  340.   

  341.   

  342.   

  343.   .change-term-link {

  344.     display: block;

  345.   }

  346. 

  347.   .student-profile-header-full .header-profile-image {

  348.     display: none;    

  349.     

  350.   }

  351. 

  352. 

  353.   table.student-alerts td.short-desc {

  354.     max-width: 200px;

  355.   }

  356. 

  357.   table.student-alerts td.short-desc .short-desc-wrapper {

  358.     max-width: 200px;

  359.     white-space: nowrap;

  360.     overflow-x: hidden;

  361.     text-overflow: ellipsis;

  362.     

  363.   }

  364. 

  365.   

  366. }  /* max-width 825px */

  367. 

  368. 

  369. 

  370. 

  371. 

  372. 

  373. 

  374. 

  375. 

  376. 

  377. 

  378. @media screen and (max-width: 650px) {  

  379. 

  380.   #page-content {

  381.     font-size: 0.8em;

  382.   }

  383. 

  384.   

  385.   /* at this point, we need to get rid of ALL the navigation (top and side) and replace with

  386.    * a single hamburger menu, which expands to show all options.

  387.    */

  388.   .mobile-hamburger-icon {

  389.     display: inline-block !important;    

  390.     float: left;

  391.     font-size: 2em;

  392.     margin-left: 10px;    

  393.     margin-right: 10px;

  394.   }

  395.   

  396.   .mobile-hamburger-icon a {

  397.     display: inline-block;

  398.     width: 50px;

  399.     padding-bottom: 3px;

  400.     text-align: center;

  401.     zborder: 1px solid #ccc;

  402.     zborder-radius: 5px;    

  403.   }

  404.   

  405.   #sidebar-left,

  406.   ul.top-nav-ul {

  407.      display: none !important;

  408.   }

  409.     

  410. 

  411.   .has-sidebar-left #page-content {

  412.     width: calc(100% - 10px);

  413.     

  414.     padding-left: 5px;

  415.   }  

  416. 

  417. 

  418.   #element-inner-wrapper-course-search-subject {

  419.     width: 100% !important;

  420.   } 

  421. 

  422.   #mobile-hamburger-menu ul.top-nav-ul

  423.   {

  424.     display: block !important;

  425.   }

  426. 

  427.   #mobile-hamburger-menu ul.top-nav-ul li.cog-only {

  428.     display: block !important;

  429.     margin-right: 0 !important;

  430.     padding-left: 0 !important;

  431.     padding-right: 0 !important;

  432.   }

  433. 

  434.   #mobile-hamburger-menu .mobile-hamburger-icon {

  435.     display: none !important;

  436.   }

  437.   

  438.   #mobile-hamburger-menu a {

  439.     color: white;

  440.   }

  441.   

  442.   #mobile-hamburger-menu .sidebar-left-nav li {

  443.     font-size: 1.4em !important;

  444.   }

  445.   

  446.   #mobile-hamburger-menu .sidebar-left-nav li i {

  447.     font-size: 2em !important;

  448.   }

  449.   

  450.   #mobile-hamburger-menu .top-nav-ul .tub-icon-element-alert {

  451.     display: inline-block !important;

  452.   }

  453.   

  454.   #mobile-hamburger-menu .top-nav-ul .tub-icon-element-alert .tub-alert-count {

  455.     top: 12px;

  456.     right: -6px;

  457.     font-size: .65em;

  458.   }

  459.   

  460.   

  461.   .student-mini-profile .profile-top-wrapper-left-side {

  462.     width: 250px;

  463.   }

  464. 

  465.   .student-mini-profile .profile-top-wrapper-right-side {

  466.     width: 150px;

  467.   }

  468.   

  469.   

  470.   table.student-alerts .author,

  471.   table.student-alerts .updated

  472.   {

  473.     display: none; 

  474.   }

  475.   

  476.   table.student-alerts td.short-desc {

  477.     max-width: 100%

  478.   }

  479. 

  480.   table.student-alerts td.short-desc .short-desc-wrapper {

  481.     max-width: 400px;

  482.     white-space: nowrap;

  483.     overflow-x: hidden;

  484.     text-overflow: ellipsis;

  485.     

  486.   }  

  487.   

  488.   

  489.   .advising-stats-block-inner-wrapper .advising-stat-box {

  490.     padding-right: 0px !important;

  491.   }

  492.   

  493.  .advising-stats-block-inner-wrapper .advising-stat-box-wide {  

  494.     min-width: 100% !important;    

  495.   }

  496.   

  497.   .element-type-textfield input, 

  498.   .element-type-password input, 

  499.   .element-type-datetime-local input, 

  500.   .element-type-time input, 

  501.   .element-type-search input {

  502.     width: 90%;

  503.   }  

  504.   

  505.   

  506.   .select-from-event-types {

  507.     width: 100%;

  508.   }

  509.   

  510.   .select-from-event-types a.event-type {

  511.       display: inline-block;

  512.       margin-left: 20px;

  513.       

  514.       margin-bottom: 30px;

  515.   }

  516.   

  517.   table.custom-calendar .calendar-entry {

  518.     display: none;

  519.   }

  520.   table.custom-calendar .mobile-day-count {

  521.     display: block !important;

  522.   }

  523.   

  524.   

  525.   

  526.   

  527.   

  528. }  /* max-width 650px */

  529. 

  530. 

  531. 

  532. 

  533. 

  534. 

  535. 

  536. 

  537. 

  538. @media screen and (max-width: 450px) {  

  539.   

  540.   

  541.   .top-banner img {

  542.     height: 40px !important;

  543.     width: auto;

  544.   }

  545.   

  546.   .mobile-hamburger-icon {

  547.     font-size: 1.9em;

  548.   }  

  549.   

  550.   #page-print-options {

  551.     display: none;

  552.   }

  553.   

  554.   body.has-page-tabs .inner-page-content-wrapper { 

  555.     margin-left: 0;

  556.   }

  557.   

  558.   #page-student-mini-profile-wrapper {

  559.     margin-left: 0;

  560.   }

  561.   

  562.   ul.tabs {

  563.     padding-left: 0;

  564.   }

  565.   

  566.   /* at this width, we go down to displaying the Degree plan in a single column. */

  567.   .fp-semester-table {

  568.     width: calc(100% - 10px);

  569.   }

  570.   .fp-semester-table td.fp-boxes {

  571.     display: block;

  572.     width: 100%;

  573.     text-align: left !important;

  574.   }

  575.   

  576.   .fp-semester-table td.fp-boxes table {

  577.     width: 100%;

  578.     margin-right: 0;

  579.     padding-right: 0;

  580.   }

  581.   

  582.   .student-mini-profile .profile-detail-line-student-name-cwid,

  583.   .student-mini-profile .profile-detail-line-empty

  584.   {

  585.     display: none;

  586.   }

  587.     

  588.   

  589.   #engagements-list-page .add-engagements-buttons {

  590.     font-size: 0.9em;

  591.     float: none;

  592.     clear: both;

  593.     text-align: center;

  594.   }

  595.   

  596. 

  597.  table.student-alerts td.short-desc .short-desc-wrapper {

  598.     max-width: 250px;

  599.     white-space: nowrap;

  600.     overflow-x: hidden;

  601.     text-overflow: ellipsis;

  602.     

  603.   }  

  604. 

  605.   

  606. }  /* max-width 450px */

  607. 

  608. 

  609. 

  610. 

  611. 

  612. 

  613. 

  614. @media screen and (max-width: 375px) {  

  615.   

  616.   

  617.   .top-banner img {

  618.     height: 30px !important;

  619.     width: auto;

  620.   }

  621.   

  622.   .mobile-hamburger-icon {

  623.     font-size: 1.8em;

  624.   }  

  625. 

  626.   .student-mini-profile .profile-top-wrapper-left-side {

  627.     width: 100%;

  628.   }

  629. 

  630.   .student-mini-profile .profile-top-wrapper-right-side {

  631.     width: 100%;

  632.   }

  633. 

  634. 

  635.   

  636.   .student-mini-profile .profile-detail-line-rank,

  637.   .student-mini-profile .profile-detail-line-cumu

  638.   {

  639.     display: inline;

  640.     padding-right: 20px;

  641.   }

  642.   

  643.   

  644.  table.student-alerts td.short-desc .short-desc-wrapper {

  645.     max-width: 200px;

  646.     white-space: nowrap;

  647.     overflow-x: hidden;

  648.     text-overflow: ellipsis;

  649.     

  650.   }  

  651.   

  652.   

  653. }  /* max-width 375px */

  654. 

  655. 

  656. 

  657. 

  658. 

  659. 

  660. 

  661.