/**
 * @file
 * Mooreart Theme (based on Stark layout)
 */

.page-node-204 h1 { display: none; }
.hold-204 {
    background:black;
    width: 100%;
    height: 100px;
    margin-top: -10px;
    /* to add space below the splash pic if needed */ 
}
.splash-204 { 
    position: relative; /* hold this div in place & position the pic */
    background: black;
    height: 100vh;
} 





/* --- ENEMIES A LOVE STORY --- */

.enemies-outer { 
    position: relative; 
    height: 100%;
}

.enemies-production-info {
    width: 320px; 
    font-size: 14px;
    display: inline-block;
}

.enemies-production-info tbody {
    border: 0;
}

.enemies-production-info table {
    border-collapse: collapse;
    border: 0;
    width: 100%;
}

.enemies-production-info h4 {
    margin-bottom: 6px;
}

.enemies-production-info p {
    margin: 0 0 6px 0;
}

.enemies-biolink {
    float: left;
    width: 200px;
    height: 300px;
}

.enemies-content .views-row {
    /* NOTE: this is set in the View (enemies block) */
    width: 200px;
    height: 220px;
    margin-right: 5px;
}






/* --- GENERAL/GLOBAL FORMATTING --- */

html, body {
    font-family: 'Lucida Sans Unicode', Helvetica, Arial;
    height: 100vh;
}

#navigation h2 { display: none; } /* hides the "Main Menu" heading */
.breadcrumb { display: none; }

#sidebar-first {
    background: #8a0811;
    color: white;
    /* padding-left: 10px; */
}

#header {
    /* site url area at the top */ 
    background: #4f050a; 
}

/* performances zebra striping */
.gray, .cc1 { background-color: #dddddd; } 


.indentedblock {
    margin-left: 15px;
}

.indentedblock p {
    margin-left: 15px;
}





/* ART GALLERIES, MUSIC CLIPPINGS */

.view-art-thumbs .views-row, .view-music-clippings .views-row {
    float: left;
    text-align: center;
    font-size: 14px;
    clear: none;
}

.view-art-thumbs .views-row {
    width: 130px;
    height: 200px;
}

.clippings-page .views-row {
    /* this style is defined in the clippings View. */
    width: 230px;
    height: 350px;
    margin-right: 20px;
}







/* --- MAIN MENU LINKS --- */

/* the header "contains" the main menu links, which look like tabs. */
#header {
    /* the site url area */
    height: 58px;
    margin-bottom: -25px;
    text-align: center;
}

#main-menu ul,
#main-menu li {
    padding: 0; margin: 0;
}

#main-menu li a {
    display: block;
    float: left;
    width: 100px;
    background: black;
    text-align: center;
    margin-right: 5px;
    padding: 0 1px;
    height: 25px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#main-menu a { 
    color: white;
    text-decoration: none;
}

#main-menu .active,
#main-menu .active-trail { 
    background: #8a0811; 
}







/* --- SIDE BAR LINKS --- */

#header a,
#navigation a,
#sidebar-first a,
#sidebar-navigation a,
#mynav1 a {
    color: white;
    text-decoration: none;
}

#navigation a:hover,
#sidebar-first a:hover,
#sidebar-navigation a:hover,
#mynav1 a:hover {
    text-decoration: underline;
    color: yellow;
}






/* --- SCREEN SETTINGS --- */


@media only screen and (max-device-width: 480px) {
    body {
        width: 400px;
    }
    
    .hold-204 { display: none; } /* splash screen */

    #content {
        clear: right;
    }
    
    .anchor-204 { width: 100%; }
    .block h2 { margin-top: 0; }
    
    /* link to jump to the menu */
    #mynav1 {
        position: absolute;
        top: 10px;
        right: 10px;
    }
}






@media only screen and (max-width: 800px) {
    body {
        width: 100%;
        min-width: 400px;
    }
    
    .hold-204 { display: none; } /* splash screen */

    #sidebar-first {
        clear: both;
    }
    
    .anchor-204 { width: 100%; }
    .block h2 { margin-top: 0; }
    
    /* link to jump to the menu */
    #mynav1 {
        position: absolute;
        top: 40px;
        left: 260px;
        width: 100px;
    }
}





@media only screen and (min-width: 801px) {

    /* ENEMIES FORMATTING */

    .page-node-210 .title { color: white; }

    .enemies-background {
        position: fixed;
        left: 0;
        top: 0;
        width: calc(100% - 318px);
        height: 100%;
        background: url('/sites/mooreart.amberjinn.com/files/clippings/enemies-background-photo.jpg');
        z-index: -1;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }
    
    .enemies-content {
        background: rgba(255, 255, 255, 0.8);
        margin: 0 40px;
        padding: 20px;
        min-height: 900px;
    }
    
    .views-view-grid {
        /* enemies pictures */
        margin: 0 auto;
        text-align: center;
    }




    li, ul.menu li { 
        list-style: none; 
        list-style-image: none; 
        margin: 0;
    }
    
    .anchor-204 {
        width: 100%; 
        /* transform: translateY(=100); */
        z-index: -2;
    }

    /* this affects the content and sidebar divs ONLY */
    #main { 
        display: flex; 
        align-items: stretch;
    }
    
    /* the menu is on the left, 300px in size;
        and right side of content is adjusted for it. */
    
    #main-menu, #header {
        position: absolute;
        left: calc(100% - 318px);
        width: 300px;
    }
    
    #main-menu {
        top: 25px; /* moves the tabs below the site url */
    }

    #sidebar-first {
        width: 300px;
    }
    
    #content {
        width: calc(100% - 310px); /* the extra 10's for the padding below */
        position: relative; /* for enemies? */
    }
 
    .region-sidebar-first {
        padding-top: 50px; /* out of the way of the tabs */
    }
    
    #mynav1, #mynav2 { display: none; }
}