/* Filename: common.css
Author: Marcus Chronabery
Date: 9/9/18 */
/* used for most form buttons */
.button-custom {
    border: solid 1px grey;
}

.jumbotron {
    background-color: transparent;
    background-image: url(../images/cards/bg-collage.jpg);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    margin-left: -15px;
    margin-right: -15px;
    font-weight: 500;
    min-height: 730px;
}

#date-time {
    color: #ffffff;
}

.dropdown-menu {
    margin-top: -3px;
}

/* used for sign-up link on the login modal */
#sign-up-link {
    margin-left: 30px;
}

/* used for login modal */
#login-password-label {
    margin-top: 20px;
}

#login-links-wrapper {
    margin-top: 10px;
}

label.validation-warning {
    margin-top: 0px;
    margin-bottom: -15px;
    margin-left: 10px;
    font-size: x-small;
    color: #f00;
}

figcaption {
    font-style: italic;
    word-break: break-all;
    font-size: 12px;
}

.clickable {
    cursor: pointer;
}

/*Handheld devices require a larger top margin*/
@media (min-width: 576px), (max-width:576px) {
    .jumbotron {
        margin-top: 30px;
        padding: 2rem 1rem;
    }
    
    #footer * {
        font-size: 14px;
    }
}

@media (max-width: 411px) and (min-width: 377px) {
    #browse-jumbotron, #sell-jumbotron {
        margin-right: -80px;
    }
}

/*Devices between 361px and 376px in width, e.g. iphone 6/7/8/X*/
@media (max-width: 376px) and (min-width: 361px) {
    #home-jumbotron, #events-jumbotron, #signup-jumbotron, #contact-jumbotron, #dice-roller-jumbotron {
        margin-right: -55px;  
    }
    
    #browse-jumbotron, #sell-jumbotron {
        margin-right: -95px;
    }
}

/*Devices <= 360px in width, e.g. galaxy s5, iphone 5/SE*/
@media (max-width: 360px) {
    #home-jumbotron, #events-jumbotron {
        margin-right: -70px;   
    }
    
    #browse-jumbotron, #sell-jumbotron {
        margin-right: -110px;
    }
}

@media (max-width: 320px) {
    #home-jumbotron, #events-jumbotron, #signup-jumbotron, #contact-jumbotron, #dice-roller-jumbotron {
        margin-right: -110px;   
    }
    
    #browse-jumbotron, #sell-jumbotron {
        margin-right: -135px;
    }
}