/* custom css for reality deck*/

.sbu-background-red {
    background-color: #990000;
}

.navbar-custom {
    background-color: #0088cc;
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: #292b2c;
}

h1, h2, h3, h4, h5, h6 {
    color: white;
}

a {
    color: #0088cc;
}

/*
 front page title
 */

.front-column-title {
    background-image: url(https://www.stonybrook.edu/commcms/_resources/images/rays/button-1.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 40px;
    line-height: 35px;
    padding: 7px 0px 1px 12px;
    color: #fff;
    letter-spacing: 0.025em;
    font-size: 18px;
    /*position: relative;*/
    margin: 0px 0px 20px;
    text-align: center;
    text-transform: lowercase;
    text-transform: uppercase;
    /* font-family: Museo_Slab_300; */
    /*font-family: Museo_Slab_500_2, sans-serif;*/
}
/* Override bold and strong tags -> Effra-Rg doesn't have bolder*/
b, strong {
    font-weight: bold;
}

/* Override min height */
main {
    min-height: 50vh;
    background-color: black;
}

/* CSS for front page */
#about-tab {
    position: absolute;
    left: 17%;
    top: 5%;
}

#facility-tab {
    position: absolute;
    left: 25%;
    top: 70%;
}

#gallery-tab {
    position: absolute;
    left: 55%;
    top: 75%;
}

#people-tab {
    position: absolute;
    left: 43%;
    top: 35%;
}

#research-tab {
    position: absolute;
    left: 64%;
    top: 15%;
}

#media-tab {
    position: absolute;
    left: 80%;
    top: 60%;
}

.menu-image-hotspot {
    position: absolute; 
    border-width: 5px; 
    border-style: solid;
    border-color: #550000;
    width: 10%;
    height: 20%;
    /* background-color: #888888; */
}

.menu-image-hotspot-container {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.menu-image-hotspot-background {
    position: absolute;
    background-color: #555555;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

.menu-image-hotspot-container span {
    position: absolute;
    width: 100%;
    height: 100%;
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 0.15em;
    padding-left: 0.15em;
    font-size: 1.4vw;
    color: #FFFFFF;
}

.menu-image-hotspot:hover {
    border-color: #DD0000;
}

#menu-image-background {
    position: absolute;
    width: 100%;
    height: 100%;
}

#menu-image {
    position: relative;
    /*top: 0;
    bottom: 0;
    left: 0;
    right: 0;*/
 /* position: relative;  */
 /* min-height: 384px;  */
}

#menu-image-container {
    margin-bottom: 1.0em;
}

.hero-unit {
    padding: 20px;
    background-color: #222222;
    border-radius: 6px;
}

.hero-unit-center {
    text-align: center;
}

.hero-unit-video {
    width: 100%;
    height: 600px;
}

#about-content-tab::before {
    display: block;
    content: " ";
    margin-top: -100px;
    height: 100px;
    visibility: hidden;
    pointer-events: none;
}

/* CSS for facility content */
.facility-title, .gallery-title {
    font-size: 20px;
    font-weight: bold;
}

/* Login page override */
/*.form-login {
    color: black;
}*/

/* Department of Computer Science header override*/
#header-brand a.navbar-brand {
    font-weight: 500;
    font-size: 1.5rem;
    text-transform: none;
    text-decoration: none;
}

/* Override banner text size*/
h5.card-text {
    font-size: 1.68em;
}

/* Override banner width*/
.image-style-banner-full {
    width: 100%;
}

/* Override for footer*/
.footerSeparator {
    background-image: url("http://realitydeck.cs.stonybrook.edu/sites/default/files/realitydeck/2021-06/red-rays-full-1.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

footer#page-footer {
    background-image: url("http://realitydeck.cs.stonybrook.edu/sites/default/files/realitydeck/2021-06/black-rays-full.jpg");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 0 !important;
    color: white !important;
}

/* Override paragraph justification and grid column max-widths*/
#page-content p {
    text-align: left;
}

.col-1, .col-2, .col-3, .col-4 {
    max-width: none;
}

/* Override table for Labs*/
table {
    border-spacing: 20px;
}

td {
    padding: 20px;
}

/* Override caption for publications*/
caption {
    caption-side: top;
    font-weight: bold;
    font-size: large;
}

/* Override fonts for body*/
body {
    color: white;
    background-color: black;
    font-family: Effra-Rg, Verdana, Arial, Helvetica, sans-serif;
}

/* Override for college name*/
div.college-name-container {
    background: url("http://realitydeck.cs.stonybrook.edu/sites/default/files/realitydeck/2021-05/white-rays-top-nav.jpg") no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    padding-top: 16px;
    padding-bottom: 14px;
    display: flex;
}

a.college-name {
    text-decoration: none;
    color: #000;
    font-family: 'CenturyExpandedLTW01-Ro';
    line-height: 1.5rem;
    display: inline-block;
    width: 100%;
    padding-left: 21px;
}

/* Override fonts for main nav*/
.nav-item .nav-link {
    font-family: Effra-Rg, Verdana, Arial, Helvetica, sans-serif;
    font-weight: 900 !important;
    font-size: 14px !important;
    line-height: 50px;
}

.dropdown-item {
    font-family: Effra-Rg, Verdana, Arial, Helvetica, sans-serif;
    font-weight: 900 !important;
}

/* remove line animation below nav items*/
#menu-main a.nav-item::before {
    content: none;
}

/* disable navbar transitions and set navbar item widths*/
#menu-main .nav li {
    -webkit-transition: none;
    transition: none;
    min-width: 140px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    text-align: center;
}

#menu-main a.nav-item {
    -webkit-transition: none;
    transition: none;
    width: 100%;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/*drop-down override*/
#header-menu .nav .navbar-nav li.nav-item:hover {
    background-color: #a00;
}

/* remove triangle on top of dropdown*/
#menu-main .dropdown-menu:after {
    content: none;
}

#menu-main a.nav-item::before {
    background-color: #990000;
}

#menu-main li.nav-item:hover {
    background-color: #9FC4E7;
}

/* highlight current page on navbar */
#menu-main li.nav-item.active {
    background-color: #9FC4E7;
}

#menu-main .nav-item:hover .dropdown-menu {
    display: block;
}

#menu-main .nav-item .dropdown-menu {
    margin-top: 0;
}

.dropdown-toggle::after{
    content: normal;
}

div.btn-group.show div.dropdown-menu.show {
    background-color: #4b4b4b;
}

div.btn-group.show div.dropdown-menu.show button.dropdown-item {
    color: #e1e1e1;
}

div.btn-group.show div.dropdown-menu.show div.dropdown-divider {
    border-top: 1px solid rgba(50, 50, 50, 0.9);
}

div.btn-group.show div.dropdown-menu.show button.dropdown-item:hover,
div.btn-group.show div.dropdown-menu.show button.dropdown-item:focus {
    background-color: #1e1e1e;
    color: #f0f0f0;
}