/* Main Nav CSS */
.sys_sitewrap {
    position: relative !important;
}
#siteheader #TopNav {
    position: static !important;
}
.mainNav UL{
    vertical-align: top;
    display: inline-block;
    *display: inline; /*DC: supports IE6/7 */
    zoom: 1; /*DC: supports IE6/7 */
}
.mainNav .homeSub A:hover,
.mainNav .aboutSub A:hover, 
.mainNav .studySub A:hover,
.mainNav .livingSub A:hover, 
.mainNav .internationalSub A:hover,
.mainNav .researchSub A:hover, 
.mainNav .alumniSub A:hover,
.mainNav .studentlifeSub A:hover, 
.mainNav .departmentsandschoolsSub A:hover{
    color: #fff;
    background-color: #202a30;
    text-decoration:none;
}
.mainNav A, .mainNav LI {
    display:block;
    float:left;
}
.mainNav DIV A, .mainNav UL A, .mainNav UL LI, .mainNav LI A {
    float:none;
}
.mainNav DIV A, .mainNav UL A {
    font-size:11px;
    color:#222;
    text-align:left;
    border-color:#fff;
    border-width:1px 0;
    padding:3px 20px 3px 10px;
}
.mainNav  A:hover {
  text-decoration:none;
}

  #TopNav > ul {
    display:block;
  }
  .sys_showHideMenu, a.sys_sectionMenu  {
    display:none;
  }

li.back {
    display:none;
}
.mainNav li.menuSectionTitle {
    display:none;   
}

.sys_dropDown ul {
    width: 235px;
    margin-right: 10px;
}


/* Responsive nav 
-------------------------------------------------------------------------------------------------------------------*/

#TopNav ul li.sys_staffstudent, #TopNav ul li.sys_staffstudent {
    display:none;
}    
.mainNav li > ul {
    border:#676767 1px solid;
    background-color:#fff;
    margin:-1px 0 0 0px;
    padding: 5px 10px;
    width:500px;
    position:absolute;
    visibility: hidden;
    z-index: 500;
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
     column-count: 2;
     column-gap: 10px;  
}
/*
.mainNav li > ul.studySub, .mainNav li > ul.departmentsandschoolsSub{
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
     column-count: 3;
     column-gap: 10px; 
     width:600px;
}
*/
.no-csscolumns .mainNav li > ul li {
    float: left;
    width:245px;
    
}
.mainNav ul li {
    border-bottom:1px solid #ccc;
    padding:5px 0;
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid;
    break-inside:avoid; /* ie10 */
    column-break-inside:avoid;

}
    .mainNav > li:hover > ul {
        display:block;
       visibility: visible;
    }
    .sys_dropDownReverse {
        right:0;
    }
    .sys_breadcrumb div.sys_sectionMore {
        display:none;
    }

.sys_dropDown {
    width: 745px;
    position: absolute;
    top: 88px;
    left: 193px;
    background: #fff;
    float: left;
    display: none;
    border-right: #676767 1px solid;
    border-top: 3px solid #eb641e;
    border-left: #676767 1px solid;
    border-bottom: #676767 1px solid;
    background-color: #fff;
    margin: -1px 0 0 0px;
    padding: 5px 0 10px 10px;
    z-index:999999;
}

li:hover .sys_dropDown {
    display:block;   
}
.mainNav .sys_findYourCourse {
    display:none;   
}
.mainNav li.sys_mainHomeMobile {
    display:none;
}
.js #TopNav .mainNav.mobileNav {
    display:none;
}
#TopNav .mainNav.desktopNav {
    height:auto !important;
}


@media handheld, only screen and (max-width: 650px) {
    
    .mainNav li.menuSectionTitle {
        display:block;   
    }
    .mainNav li.sys_mainHomeMobile {
        display:block;
    }
    
    #TopNav ul li.sys_staffstudent {
        width: 50%;
        float: left;
        display:block;
        clear:none;
    }
    
    #TopNav ul li.sys_staffstudent a {
        background-color: #fff !important;
        color: #202a30 !important;
        font-weight:normal;
        border-bottom: 2px solid #8f9497 !important;
        padding: 15px !important;
    }
    #TopNav ul li.sys_staffstudent:first-of-type a {
            border-right: 2px solid #8f9497;
    }
    #TopNav ul li.sys_staffstudent a:hover, #TopNav ul li.sys_staffstudent:hover {
        background: #FFF !important;
    }
    #TopNav ul li.sys_staffstudent a:after {
        display: block;
        width: 20px;
        height: 18px;
        background-image: url('/SiteElements/MenuFiles/arrow-next.png');
        background-repeat: no-repeat;
        content: "";
        overflow: visible;
        float: right;
        top: 0;
        position: relative;
        background-size: 9px 16px;
    }
       .mainNav li > ul, .mainNav li > ul.studySub, .mainNav li > ul.departmentsandschoolsSub {
            -moz-column-count: auto;
            -moz-column-gap: 0;
            -webkit-column-count: 1;
            -webkit-column-gap: 0;
            column-count: auto;
            visibility: visible;
            width:100%;
        }   
      
        .no-csscolumns .mainNav li > ul li {
            float: none;
            width:auto;
        
        }
        
    .mainNav li > ul {
        margin:0;
        padding:0;
        border-right:none;
        border-top:none;
        border-left:none;
        border-bottom:none;
        width:100%;
        display: block;
    }
    .mainNav ul li {
        padding: 0;
        display: block;
        width: auto;
        border-right:none;
        border-top:none;
        border-left:none;
        border-bottom:none;
    }    
    #TopNav{
        margin-bottom:0;
    }
    .sys_dropDownReverse {
            right:auto;
    }
    #siteheader #TopNav.sys_mainMenuActive {
        display: block;
        z-index:15000;
        width: 100%;
        position:absolute;
        top: 70px;
        background: #fff;
        padding: 0;
    }
    .mainNav {
        box-shadow: 0px 15px 10px rgba(50, 50, 50, 0.75);
        z-index:10000;
        overflow:hidden;
        position: absolute;
        width: 100%;
      }    
      
    
     /* Main nav
    -------------------------------------------------*/ 
    
    .mainNav .sys_findYourCourse {
        display:block;   
    }
    #siteheader #TopNav a.qmparent {
        background-image:none !important;   
    }
    #siteheader #TopNav a {
        border-bottom:none;  
    }
    /* menu colours DC*/  
    
    #siteheader #TopNav  a.sys_findYourCourseLink {
        background-color: #fff !important;
        color: #202a30 !important;
    }
    #siteheader #TopNav #about > a, #siteheader #TopNav  a.sys_aboutus {
        background-color: #fff !important;
        color: #202a30 !important;
    }
    #siteheader #TopNav #about li.menuSectionTitle a {
        background: #00a69e !important;
        color: #fff !important;
        box-shadow: 0 4px 5px rgba(0,0,0,0.2);
        position: relative;
        padding: 15px 20px !important;
        z-index: 9;
    }
    #siteheader #TopNav #about li.back a {
        padding: 15px 20px !important;
    }
    #siteheader #TopNav #studentlife > a, #siteheader #TopNav a.sys_life {
        background-color: #fff !important;
        color: #202a30 !important;
    }
    #siteheader #TopNav #studentlife li.menuSectionTitle a {
        background: #009ed7 !important;
        color: #fff !important;
        box-shadow: 0 4px 5px rgba(0,0,0,0.2);
        position: relative;
        z-index: 9;
    }
    #siteheader #TopNav #study > a, #siteheader #TopNav a.sys_studyhere {
        background-color: #fff !important;
        color: #202a30 !important;
    }
    #siteheader #TopNav #study li.menuSectionTitle a {
        background: #00a648 !important;
        color: #fff !important;
        box-shadow: 0 4px 5px rgba(0,0,0,0.2);
        position: relative;
        z-index: 9;
    }
    #siteheader #TopNav #living > a, #siteheader #TopNav a.sys_forbusiness {
        background-color: #fff !important;
        color: #202a30 !important;
    }
    #siteheader #TopNav #living li.menuSectionTitle a {
        background: #f5af0a !important;
        color: #fff !important;
        box-shadow: 0 4px 5px rgba(0,0,0,0.2);
        position: relative;
        z-index: 9;
    }
    #siteheader #TopNav #international > a, #siteheader #TopNav a.sys_international {
        background-color: #fff !important;
        color: #202a30 !important;
    }
    #siteheader #TopNav #international li.menuSectionTitle a {
        background: #9857ae !important;
        color: #fff !important;
        box-shadow: 0 4px 5px rgba(0,0,0,0.2);
        position: relative;
        z-index: 9;
    }
    #siteheader #TopNav #research > a, #siteheader #TopNav a.sys_research {
        background-color: #fff !important;
        color: #202a30 !important;
    }
    #siteheader #TopNav #research li.menuSectionTitle a {
        background: #949a00 !important;
        color: #fff !important;
        box-shadow: 0 4px 5px rgba(0,0,0,0.2);
        position: relative;
        z-index: 9;
    }
    #siteheader #TopNav #alumni > a, #siteheader #TopNav a.sys_alumni {
        background-color: #fff !important;
        color: #202a30 !important;
    }
    #siteheader #TopNav #alumni li.menuSectionTitle a {
        background: #d72d2d !important;
        color: #fff !important;
        box-shadow: 0 4px 5px rgba(0,0,0,0.2);
        position: relative;
        z-index: 9;
    }
    #siteheader #TopNav #departmentsandschools > a, #siteheader #TopNav a.sys_dept {
        background-color: #fff !important;
        color: #202a30 !important;
    }
    #siteheader #TopNav #departmentsandschools li.menuSectionTitle a {
        background: #eb641e !important;
        color: #fff !important;
        box-shadow: 0 4px 5px rgba(0,0,0,0.2);
        position: relative;
        z-index: 9;
        padding-right: 51px !important;
    }
    #siteheader #TopNav a.qmparent {
    
        color: #202a30 !important;
        background-color: #333;
        text-align: left !important;
        border-right:none !important;
        border-bottom: 2px solid grey;
        border-bottom: 2px solid #8f9497;
    }
    #siteheader #TopNav > div > a.back {
        background:#fff !important;   
    }
    #siteheader {
         overflow:hidden;
         background-color: #fff !important;
         padding:0;
    }
    #siteheader #TopNav #about .back a, 
    #siteheader #TopNav #studentlife .back a, 
    #siteheader #TopNav #study .back a, 
    #siteheader #TopNav #living .back a, 
    #siteheader #TopNav #international .back a, 
    #siteheader #TopNav #research .back a, 
    #siteheader #TopNav #alumni .back a, 
    #siteheader #TopNav #departmentsandschools .back a {
        background:#fff !important; 
        
    }
    #TopNav br{
        display: none;
    }
    .mainNav DIV A, .mainNav UL A {
        font-size: inherit;
        color: #222;
        font-weight: 700;
        text-align: left;
        border-color: #fff;
        border-width: 1px 0;
        padding: 3px 20px 3px 10px;
    }
    
    .sys_showHideMenu {
        background: #202a30;
        color: #FFFFFF;
        display: block;
        font-weight: bold;
        width: 70px;
        overflow: hidden;
        height: 68px;
        cursor: pointer;
        float: right;
        text-indent: -999999px;
        padding: 2px 0 0 0;
        border-left: 1px solid #57676e;
    }
    .sys_showHideMenu .sys_iconBar {
        display: block;
        background: #5c696f;
        width: 33px;
        height: 5px;
        margin: 6px 19px;
    }
    .sys_showHideMenu.sys_menuOpen .sys_iconBar {
        background: #ea641d;
    }
    .sys_showHideMenu.sys_menuOpen {
        background:#fff;   
    }
    /*.sys_menuClosed:after {
        content: "≡";
        float: right;
        font-size: 5em;
        font-weight: 100;
        text-indent: 999999px;
        line-height: 0.65em;
        color: #57676e;
        padding: 3px 17px 0 0;
    }
    .sys_menuOpen:after {
        content: "≡";
         float: right;
         font-size: 5em;
         font-weight: 100;
         text-indent: 999999px;
         line-height: 0.65em;
        color:#ea641d;
        padding: 3px 17px 0 0;
    }*/
    #TopNav > ul {
        display:none;
        clear:both;
    }
    
    /* reset main styles */
    
    .mainNav > ul, .mainNav > ul > li > ul  {
      display: block;
    }
    .mainNav > ul > li > ul, .mainNav li ul li ul {
      display: block;
    }
    .mainNav > ul {
      border:none;
      width:100%;
      right: -120%;
      padding:0;
    }
    .mainNav > ul  > li {
      width: auto;
      display: block;
      border-bottom:none;
    }
    .mainNav > ul  > li > a{
      display: block;
    }
    .sys_menuHidden {
        display: none;
      }
    .js #TopNav .mainNav.mobileNav.sys_menuShown {
        display: block;
        background: #fff;
      }
    .sys_menuShown {
        display: block;
      }
    .mainNav li {
        float:none;
        width: auto;
        position: static;
        border-right:none;
        border-top:none;
        border-left:none;
        border-bottom:none;
        clear:both;
    }
    .mainNav li a{
        padding:15px 15px 11px 15px !important;
        display:block;
        background: #efefef;
        width: auto !important;
        height: auto !important;
        border-bottom:1px solid #fff;
        color: #202a30;
        font-size: 20px;
        font-weight: normal;
        position:relative;
    }
    #siteheader #TopNav a.qmparent {
        font-weight: normal !important;
    }
    .mainNav li ul {
        position: absolute;
        /*right: -120%;*/
        -webkit-transform: translate3d(120%, 0, 0);
        -moz-transform: translate3d(120%, 0, 0);
        -o-transform: translate3d(120%, 0, 0);
        transform: translate3d(120%, 0, 0);
        top: 0;
        width: 100%;
        -webkit-transition:-webkit-transform 0.3s linear;
        -moz-transition:transform 0.3s linear ;
        -o-transition:-o-transform 0.3s linear ;
        transition:transform 0.3s linear ;
    }
    .no-csstransforms3d .mainNav li ul {
        right: -120%;
    }
    .mainNav li ul.active {
        /* right: 0; */
        -webkit-transform: translate3d(0%, 0, 0);
        -moz-transform: translate3d(0%, 0, 0);
        -o-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
        z-index: 500;
    }
    
    .no-csstransforms3d .mainNav li ul.active {
        right: 0;
    }
    .navParent:after, .parentClosed:after {
        display: block;
        width: 20px;
        height: 18px;
        background-image: url('/SiteElements/MenuFiles/arrow-next.png');
        background-repeat: no-repeat;
        content: "";
        overflow: visible;
        float: right;
        top: 0;
        position: relative;
        background-size: 9px 16px;
    }
    ul.active .navParent,ul.active .parentClosed, ul.active li a {
        padding-left:40px !important;
        
    }
    ul.active .navParent:after,ul.active .parentClosed:after, ul.active li a:after {
        float: left;
        top: 17px;
        left:21px;
        position:absolute;
        
    }
    ul.active li.back a:after {
        background-position: -580px -6px;
        float: right;
        top: 16px;
        position: absolute;
        right: 17px;
        left: auto;
    }
    ul.active li.menuSectionTitle:after {
        content:'';
        background-position: -628px -3px;
        float:right;
    }
    ul.active li.menuSectionTitle a:after{
        display: block;
        content: "";
        float: right;
        top: 19px;
        background: url('/SiteElements/MenuFiles/caret.png') no-repeat;
        width: 16px;
        height: 12px;
        background-size: 15px 12px;
        margin-right: 25px;
        position: absolute;
        right: -1px;
        left: auto;
    }
    li.menuSectionTitle a {
        padding-left:20px;
    }
    .parentClosed {
        cursor: pointer;
    }
    .mainNav > ul > li.back, .mainNav li.back {
      overflow: hidden;
      display: block;
      border-bottom:1px solid #fff;
    }
    .mainNav li.back {
        display:block;
    }
    .mainNav li.back a:after {
        display: block;
        width: 20px;
        height: 18px;
        background-image: url('/SiteElements/MenuFiles/arrow-prev.png');
        background-position: 0 0 !important;
        background-repeat: no-repeat;
        content: "";
        overflow: visible;
        float: right;
        top: 0;
        position: relative;
        background-size: 9px 16px;
    }
    .mainNav li.back a.backLink {
        float: left;
        padding: 15px 0 !important;
        text-align: center;
        width: 75px !important;
        border-bottom:none;
        border-right:1px solid #fff;
        background: #ccc !important;
        color: #444;
    }
    .mainNav li.back a:hover {
        color:#202a30;   
    }
    .mainNav li.back span{
        padding:15px 20px;
        display:block;
        text-align: center;
        font-weight: bold;
        color: #fff;
    }
    .mainNav li a.homeLinkTop {
        font-weight: bold;
        text-align: center;
        border-bottom: none;
    }
    .homeLink {
        display: block;
    }
    .mainNav li.homeLink {
        display: block;
    }
    a.loading {
        background-image: url(/SiteElements/Images/preloader.gif) !important;
        background-position: 93% 50% !important;
        background-repeat: no-repeat !important;
        background-size:25px !important;
    }
    .menuSectionTitle a {
        background: #ddd !important;
        font-weight: bold;
    }
    .sys_dropDown {
        width: 745px;
        position: absolute;
        top: 94px;
        left: 193px;
        background: #fff;
        float: left;
        display: none;
        border-right: none;
        border-top: none;
        border-left: none;
        border-bottom: none;
        background-color: #fff;
        margin: -1px 0 0 0px;
        padding: 5px 0 10px 10px;
        z-index:999999;
    }

}