@import url(/css/reset.css);
@import url(/css/default.css);
@import url(/css/menu.css);
@import url(/css/jquery.css);
@import url(/css/other.css);
@import url(/css/Site.css);

/* Menu style tweaks */

#menunav ul {
    width: 300px;
    overflow: visible;
    min-height: 1px;
    padding: 0;
}

#menunav li {
    position: relative;
}

#menunav ul li {
    background: none;
    float: none;
    width: 300px;
    line-height: 1.5em;
    height: auto;
}

#menunav ul ul {
    left: 300px;
    top: -1px;
}

#menunav ul ul.goleft {
    left: -300px;
}

#menunav ul a:hover,
#menunav ul a:focus {
    background: #e5e9f3;
}

.menu a,
.menu a:link {
    padding: 20px 22px 19px;
    font-size: 1.2em;
}

.menu ul ul {
    background: none;
    background-color: #fff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.menu ul ul a,
.menu ul ul a:visited,
.menu ul ul a:link,
.menu ul ul a:active {
    line-height: inherit;
    padding: 3px 14px;
    display: block;
    text-decoration: none;
}

.menu .arr {
    font-size: 0.9em;
}

.menu ul ul .bull {
    position: absolute;
    top: 0;
    right: 4px;
    display: block;
    padding: 3px;
    color: #333;
}

.menu .bull {
    display: none;
}

.menu ul ul ul {
    border-top: none;
}

.menu .goleft ul {
    right: 0;
    left: auto;
}

.menu li.goleft:hover ul li:hover ul {
    right: 100%;
    left: auto;
}

.menu ul ul a:hover,
.menu ul ul a:focus,
.menu ul ul a:active {
    text-decoration: none !important;
}

#sitemap #menunav li ul li,
#sitemap #menunav li ul li a {
    font-weight: bold;
    font-weight: 600;
}

#sitemap #menunav li ul li ul li,
#sitemap #menunav li ul li ul li a {
    font-weight: normal;
}


/* HOMEPAGE */

body.index #fullbody,
body.index #footer_max,
body.index #header_menustrip,
body.index #header_max,
body.index #section_strip {
    min-width: 917px;
}

#three-col {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: visible;
}

#three-col #subscribe img {
    vertical-align: middle;
}

#homeFeatured,
#three-col .panel {
    width: 100%;
    float: left;
    background: #fff;
    margin: 0 0 20px 0;
    padding: 0;
    border: 1px solid #e5e9f3;
    box-sizing: border-box;
}

#three-col .box {
    float: left;
    width: 33.333%;
    padding: 0 20px 0 0;
    overflow: hidden;
    box-sizing: border-box;
    margin-top: 20px;
}

#three-col .box.last {
    padding-right: 0;
}

#three-col .panel h2,
#homeFeatured h2 {
    border-bottom: 1px solid #e5e9f3;
    color: #2c55a6;
    padding: 8px 16px 10px 16px;
    font-weight: bold;
    font-weight: 600;
    font-size: 1.15em;
    text-decoration: none;
}

#three-col .panel a h3 {
    text-decoration: none;
}

#homeFeatured .content,
#three-col .panel .content {
    padding: 0 18px 20px;
    min-height: 100px;
}

#latestNews .nib {
    margin-bottom: 1em;
    clear: left;
    width: 278px;
}

#latestNews .nib a {
    line-height: 1.4em;
}

#latestNews .nib div.nid {
    overflow: hidden;
    padding: 0px 5px 0px 0px;
    line-height: 1.4em;
}

#latestNews .nib div.nii {
    float: left;
    margin: 0 0.25em 0em 0;
}

.new #news_right {
    width: 55%;
}

.new #news_other {
    width: 25%;
}

.new.lowIE #news_right {
    width: 70%;
}

#news_highlights ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.index #main {}


/* HOMEPAGE - SRI BANNER */

#homeFeatured {
    float: right;
    width: 300px;
    height: 292px;
    /*font-size: 1.2em;*/
    margin: 0;
    padding: 0;
    margin-top: 14px;
    margin-right: 1px;
}


/*Rotating banner*/

#banner-home-container {
    width: 100%;
    overflow: hidden;
}

#banner-home img.default {
    cursor: default !important;
}

#banner-home img.pointer {
    cursor: pointer !important;
}

.cycle-overlay a,
.cycle-overlay a:link,
.cycle-overlay a:visited,
.cycle-overlay a:active {
    color: #333;
    font-weight: bold;
    text-decoration: none;
}

.cycle-overlay a:focus,
.cycle-overlay a:hover {
    color: #358433;
}

.cycle-overlay a {
    display: block;
    position: absolute;
    bottom: 36px;
    left: 24px;
    min-width: 400px;
    max-width: 460px;
    z-index: 600;
    background: url(../../images/sb-banner-text-bg.png) repeat;
    color: #000;
    padding: 0;
}

.cycle-overlay a.right {
    right: 24px;
    left: auto;
}

.cycle-overlay a span.title {
    font-size: 22px;
    font-weight: bold;
    float: left;
    padding: 1.5% 2.5% 1.5% 2.5%;
}

.cycle-overlay span.desc {
    font-size: 16px;
    float: left;
    clear: left;
    font-weight: normal;
    width: 95%;
    padding: 0px 2.5% 2% 2.5%;
}

.cycle-overlay span.title:empty {
    display: none;
}

.cycle-overlay span.desc:empty {
    display: none;
}

a#b-next {
    z-index: 130;
    position: absolute;
    right: 25px;
    top: 150px;
    top: calc(50% - 50px);
    height: 76px;
    width: 42px;
    background: url(../../images/b-arrows-large.png) no-repeat 0px 0px;
}

a#b-prev {
    z-index: 129;
    position: absolute;
    left: 25px;
    top: 150px;
    top: calc(50% - 50px);
    height: 76px;
    width: 42px;
    background: url(../../images/b-arrows-large.png) no-repeat -42px 0px;
    margin: 0 11px 0 0;
}

a#b-pause {
    z-index: 132;
    position: absolute;
    right: 25px;
    bottom: 18px;
    height: 21px;
    width: 35px;
    font-size: 0.85em;
    color: #fff;
    text-align: center;
}

a#b-play {
    z-index: 131;
    position: absolute;
    right: 25px;
    bottom: 18px;
    height: 21px;
    width: 35px;
    display: none;
    font-size: 0.85em;
    color: #fff;
    text-align: center;
}

a:hover#b-prev,
a:focus#b-prev {
    background: url(../../images/b-arrows-large.png) no-repeat -42px -75px;
}

a:hover#b-next,
a:focus#b-next {
    background: url(../../images/b-arrows-large.png) no-repeat 0px -75px;
}

a:hover#b-pause,
a:focus#b-pause {
    text-decoration: underline;
}

a:hover#b-play,
a:focus#b-play {
    text-decoration: underline;
}

@media(max-width:1023px) {
    #banner-home-container {
        width: 100%;
        margin-left: 0;
        overflow: hidden;
        height: auto;
    }
}

@media(max-width:767px) {
    .cycle-overlay span.title {
        font-size: 18px;
    }
    .cycle-overlay span.desc {
        font-size: 14px;
    }
    a#b-pause,
    a#b-play {
        bottom: 14px;
        top: inherit;
    }
    a#b-next,
    a#b-prev {
        top: 80px;
    }
    .cycle-overlay {
        position: relative;
        top: auto;
        right: auto;
        min-width: 0;
        max-width: none;
        color: #000;
        padding: 0;
        background-image: none;
        background-color: beige;
        margin-left: 0;
        left: 0;
    }
}

@media(max-width:479px) {
    a#b-next,
    a#b-prev {
        top: 35px;
    }
}


/* STRUCTURE */

body.noRight #content {
    margin-right: 0;
}

body.noLeft #content {
    margin-left: 0;
}

body.noRight #colRight,
body.noLeft #colLeft,
body.noStructure #menu,
body.noStructure #colLeft,
body.noStructure #colRight,
body.noStructure #main,
body.noStructure #content,
body.noStructure #header,
body.noStructure #footer,
{
    display: none;
}


/* GLOSSARY */

#glossary_letters {
    margin-top: .5em;
}

#glossary_letters a {
    padding: 0 .8em;
    border-right: solid 1px #00a0ae;
}

#glossary_letters a.last {
    border-right: none;
}

#glossary_letters a.selected {
    color: white;
}

.glossary_details h4.page {
    color: #7ab800;
    font-weight: bold;
    font-weight: 600;
    font-size: 1.2em;
}

#glossary .glossary_col table {
    margin: 15px 0 0 0;
    width: 280px;
    border-collapse: collapse;
}

#glossary .glossary_col table td:hover div p {
    width: 285px;
    position: absolute;
}


/* GENERAL */

#pageHeader {
    height: 74px;
    background: #6a77c7 url(../images/pageHeader_bg.jpg) top left no-repeat;
    position: relative;
    z-index: -99;
}

#pageHeader h1,
#pageHeader a.h1 {
    position: absolute;
    top: 15px;
    left: 23px;
    font-size: 2.5em;
    font-weight: normal;
    color: #fff;
}

#pageHeader #quicklink {
    position: absolute;
    top: 32px;
    right: 30px;
}


/* NEWS */

.deck {
    margin-bottom: 1.25em;
}


/* FOOTER */

#footer #wimm {
    float: left;
    width: 50%;
    margin-top: 2em;
    text-align: right;
    box-sizing: border-box;
    padding-right: 95px;
}

#footer #uoft {
    float: left;
    width: 50%;
    margin-top: 2em;
    text-align: left;
    box-sizing: border-box;
    padding-left: 5px;
}

#footer ul#bottom_links {
    margin: 3em auto 0 auto;
    list-style: none;
    width: 406px;
    font-size: 13px;
    padding-left: 0;
}

#footer ul#bottom_links li {
    float: left;
    padding: 0 8px;
    border-right: 1px solid #676767;
    line-height: 1em;
}

#footer ul#bottom_links li.last {
    border-right: none;
}


/* EVENTS */

#contentLeft {
    /*margin-right: 190px;*/
}


/* OTHER */

#contact-form div.row2 div.erroralt,
#contact-form div.submit {
    margin-left: 0;
}


/* Core facilities */

#core-facilities .column,
#panel-links .column {
    position: relative;
}

#core-facilities .column a,
#panel-links .column a {
    display: block;
    position: absolute;
    top: 0;
    color: #fff;
    text-align: center;
    height: 100%;
    width: 100%;
    padding: 2em 1em 0 1em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-image: url(/uploads/1/_research/resources/core-facilities/overlay3.png);
    font-size: 28px;
    line-height: 1.2em;
    font-weight: bold;
    font-weight: 600;
}

#core-facilities .column a:hover,
#core-facilities .column a:focus,
#panel-links .column a:hover,
#panel-links .column a:focus {
    background-image: none;
    text-decoration: none;
}

#core-facilities .line,
#panel-links .line {
    float: left;
    width: 100%;
    text-align: center;
    background: url(/uploads/1/_research/resources/core-facilities/line.jpg) left 0.66em repeat-x;
    margin-top: 0.66em;
    margin-bottom: 1em;
}

#core-facilities .line h2.learn-more,
#panel-links .line h2.learn-more {
    display: inline-block;
    background-color: #fff;
    padding: 0 1em;
}

#core-facilities h2 a,
#panel-links h2 a {
    color: #2e55a5
}

#core-facilities .row2,
#panel-links.row2,
#panel-links .row2 {
    padding: 4.5%;
}

#core-facilities .row2.other,
#panel-links .row2.other {
    background-color: #e5e9f3;
    padding: 4% 4.5%;
}

#core-facilities .row2 p,
#panel-links .row2 p {
    margin-bottom: 0.25em;
}

#core-facilities a.btn,
#panel-links a.btn {
    float: right;
    margin-left: 1.5em;
    margin-top: -0.5em;
    background-color: #f1f1f2;
    color: #2e55a5 !important;
    -webkit-box-shadow: 1px 1px 1px 0px #bbb;
    -moz-box-shadow: 1px 1px 1px 0px #bbb;
    box-shadow: 1px 1px 1px 0px #bbb;
}

#core-facilities a:hover.btn,
#panel-links a:hover.btn {
    background-color: #f8f8f8;
}

.cycle-overlay a[href='javascript:void(0)'] {
    cursor: default;
}

.cycle-overlay a[href='javascript:void(0)']:hover,
.cycle-overlay a[href='javascript:void(0)']:focus,
.cycle-overlay a[href='javascript:void(0)']:active {
    color: #333 !important;
}


/* RESPONSIVE */

@media (max-width: 1023px) {
    #footer #wimm {
        float: none;
        margin-left: auto;
        margin-right: auto;
        width: auto;
        padding-right: 0;
        text-align: center;
    }
    .menu ul {
        width: 752px;
        margin: 0 auto;
    }
    .b-body {
        width: 100%;
        height: auto;
    }
    .menu a {
        font-size: 0.95em !important;
        padding: 20px 2px !important;
    }
    .menu ul ul a {
        padding: 3px 14px !important;
    }
    #three-col .box {
        width: 49.75%;
        margin-right: 0;
        padding-right: 20px;
        overflow: visible;
        margin-top: 0;
    }
    #three-col .box:last-child {
        padding-right: 0;
    }
    #three-col div.box:first-child {
        width: 100%;
        margin-top: 20px;
        padding-right: 0;
    }
    #three-col .panel,
    #homeFeatured {
        width: 100%;
        height: auto;
    }
    #latestNews .nib {
        width: auto;
    }
    .menu {
        width: 100%;
        margin-left: 0;
    }
}

@media(max-width:767px) {
    .menu ul,
    #menunav ul li,
    #menunav ul {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    #menunav ul ul.goleft {
        left: 0;
    }
    .menu ul ul .bull {
        display: none;
    }
    /*#menunav ul li a:first-child { border-bottom: 1px solid #fff; }*/
    #menunav ul ul {
        display: none !important;
    }
    .menu ul ul a {
        width: 100%;
        text-align: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .menu ul ul a:hover,
    .menu ul ul a:focus,
    .menu ul ul a:active {
        text-decoration: underline !important;
    }
    #menunav ul ul {
        left: 0;
        background-color: #fff !important;
    }
    #three-col .box {
        width: 100%;
        padding-right: 0;
    }
    #three-col div.box:first-child {
        margin-right: 0;
        width: 100%;
    }
}