/*My Laurier*/

 #mnuMyLaurier{ 
    background-color: #330072 !important; 
    color: #fff !important; 
    cursor: pointer; 
    padding: 0 15px;
    font-size: 14px;
    float: left;
}

 #mnuMyLaurier > div{
     width: 100%;
     position: relative;
 }

#myLaurierBar{
    padding: 15px 25px;
    text-align: right;
    line-height: 10px;
  /*  background-color: #704d9c !important;*/
    background-color: #330072 !important;
}

#myLaurierBar a{
    text-transform:  uppercase;
    display: inline-block;
    margin-right: 20px;
}

#myLaurierBar a:hover{
    color: #fff;
    text-decoration: underline;
}

/*#myLaurierBar,*/
#mnuMyLaurier:hover,
#mnuMyLaurier.open{
    background-color: #5B328E !important;
} 

#mnuMyLaurier .myLaurierTriangle .icon{
    display: none;
}

#mnuMyLaurier.open .myLaurierTriangle{
    border: none;
    right: 14px;
}

#mnuMyLaurier.open .myLaurierTriangle .icon{
    display: block;
    color: #F2A900;
    position: relative;
    right: 17px;
    top: -8px;
    font-size: 14px;
}

.myLaurierTriangle{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13.9px 8px 0 8px;
    border-color: #F2A900 transparent transparent transparent;
    display: inline-block;
    cursor: pointer;
    margin-right: 14px; /* */ 
    margin-top: 6px;
    float: right;
}

#personal{ padding-top: 40px; }

#myLaurierBar{ height: 40px; font-size: 14px;}


#myLaurierLinks{
    max-width: 25%; /*important!!!*/
}

#mySchedule{
     background-color: #eee; padding: 20px; 
     border: 2px solid #330072;
}

#myScheduleContainer{
    min-height: 334px;
    padding-right: 20px;
}

#myScheduleContainer caption{
    text-align: left;
    padding-bottom: 10px;
}

#schedule{
    clear: left;
}

#eventCalendarQuickLinks.canGoFull{
    max-width: 100%;
}


/** TASK: Missing "Event Calendar Quick Links" header from tab **/
.classinfo .col-16.col-subj-code,
.classinfo .col-16.col-type-code,
.classinfo .col-16.col-day-of-week{
    /*width 16.66%*/
    width: 14%; /*recouped 3 * 2.66% */
}

.classinfo .col-16.col-location,
.classinfo .col-16.col-instructor{
    width: 20.16%; /*3.5% + 16.66 */    
}

@media (min-width: 1024px) {
    #mnuMyLaurier.open .myLaurierTriangle .icon{
        right: 15px;
    }
}


@media (max-width: 1024px) {
   #mnuMyLaurier{ 
       position: relative;
       padding-left: 25px;
       height: 40px;
    } 
    
     #mnuMyLaurier > div > div{
         height: 40px !important;
     }
   
   .myLaurierTriangle{
        position: absolute;
        right: 21px;
        top: 10px;
        margin-right: 0px;
   }  
   
   
   #myLaurierLinks{
       clear: both;
       width: 100%;
       max-width: 100%;
   }
   
   #schedule{
       margin-bottom: 40px;
   }
   
   #quickLinks,
   #myQuickLinks{
        max-width: 48%;   
        width: 100%;
   }
   
   #quickLinks{ float: left; }
   #myQuickLinks{ float: right; }
   
   #myLaurierLinks > #myQuickLinks{
       float: left;
       width: 100%;
       max-width: 100%;
   }
   
   #personal #links-home #quickLinksPersonal{
          float: left;
    width: 45%;
    margin-right: 20px;
 
   }
   
   
   
   #eventCalendarQuickLinks a.btn{
       clear: both;
       max-width: 250px;
       width: 100%;
       margin-bottom: 20px;
   }
   
   #eventCalendarQuickLinks .btn:last-child{
       margin-bottom: 0;
   }
   
    #schedule,
    #eventCalendarQuickLinks{
        margin-left: 0;
    }
   
   

}

@media (max-width: 600px) {
    #mnuMyLaurier,
    #mnuMyLaurier > div > div{ height: 40px !important;} 
    #mnuMyLaurier > div > div > div { font-size: 14px; }
    
    .myLaurierTriangle{
        position: absolute;
        right: 20px;
        top: 10px;
    }
    
    #personal #links-home #quickLinksPersonal{
        width: 100%;
    }
    
    #schedule,
    #scheduleContainer,
    #myLaurierLinks,
    #quickLinks,
    #myQuickLinks,
    #eventCalendarQuickLinks{
        clear: both;
        width: 100%;
        max-width: 100%;
        
    }
    
   
    
     #schedule{
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        overflow-x: scroll;
    }
    
     #schedule > #myScheduleContainer{
         min-width: 500px;
         width: 100%;
         max-width: 100%;
         display: block;
     }
     
     #myScheduleContainer{
         min-height: auto;
         padding-bottom: 20px;
     }
     

}

/*Accessibility changes*/
#personal{overflow: hidden;}