/* PortobelloStyle.css */

body 
{ font-family: -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

h2
{ color: #660066;
}

h3
{ color: #440044;
}

h4
{ color: #440044;
}

h5
{
}

body {
    background: #f0f0f0;
}

.bar {
    clear: both;
    background: #5070b0;
    color: #ffffff;
    font-size: 0.9em;
    min-height: 52px; /* Ensure always a bit taller than logotype, below */
}

#bottom-bar {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    font-size: 0.85em;
}

#logotype {
    float: left;
    width: 163px;
    height: 50px;
}
    
#main-menu {
    display: flex;
    width: calc(95% - 170px);
    flex-flow: row wrap;
    align-items: flex-start;
    padding: 0.5em;
    list-style: none;
}

#main-menu li {
    display: inline-block;
    white-space: nowrap;
    padding-left: 1.5em;
    padding-right: 0.5em;
    max-width: 140px;
    flex: 20%;
}

.bar ul {
    margin-bottom: 0;
}

.bar a {
    text-decoration: none;
    font-weight: bold;
    color: #ffffff;
}

.content {
    background: white;
    margin: 0;
    padding: 0;
    padding-top: 1em;
    padding-bottom: 2em;
}    

#professionals th {
    font-style: italic;
    font-weight: normal;
    text-align: center;
    padding-right: 1em;
}

#professionals td {
    text-align: center;
    padding-right: 1em;
}

#professionals a {
    font-weight: bold;
}

#professionals img {
    display: block;
    margin: auto;
}

button a {
    display: block;
    font-size: 1.4em;
    font-weight: bold;
    padding: 1em;
}

#concert-list, #programme-notes {
    font-size: 0.85em;
}

.photo-grid {
    display: flex;
    flex-flow: row wrap;
}

.photo-grid img {
    padding-right: 0.4em;
    padding-bottom: 0.4em;
}

img.gallery-display {
    width: 100%;
    object-fit: contain;
}

#practice-parts {
    display: flex;
    flex-flow: row wrap;
}

#practice-parts article h3 {
    padding-right: 2em;
}

a {
    text-decoration: none;
    color:  #5070b0;
}

a:hover {
    color: #000000;
}

img.notes {
    height: 15em;
    padding-left: 2em;
    padding-top: 2em;
}

/* We have three layout cutover points by device width:

   Desktop-ish: > 820px
   Tablet-ish: 500-820px
   Phone-ish: < 500px

   Desktop and tablet get the same layout but with different margins
   and spacings. Phone gets a different layout with less reliance on
   columns and more vertical stacking.
*/

@media only screen and (min-device-width: 500px)
{
    /* Things that desktop-ish and tablet-ish layouts have in common. */
    
    .content {
        background-image: url(Images/PaleBeethoven.jpg);
    }
    
    #main-image {
        width: 52%;
        float: right;
        margin-top: 2em;
        margin-left: 2em;
        margin-bottom: 1em;
    }
    
    #person-image {
        width: 30%;
        float: right;
        margin-top: 2em;
        margin-left: 2em;
        margin-bottom: 1em;
    }

    h2 {
        font-size: 1.4em;
        padding-top: 1em;
        margin-bottom: 0.5em;
    }
    
    .details {
        clear: both;
        display: flex;
    }

    .details article {
        flex: 50%;
    }

    .two-column, .three-column {
        display: flex;
        flex-flow: row wrap;
        column-gap: 2em;
    }

    .two-column article {
        flex: calc(49% - 2em);
    }

    .three-column article {
        flex: calc(33% - 2em);
    }
}


@media only screen and (min-device-width: 500px) and (max-device-width: 820px)
{
    /* Tablet-ish */
    
    .content, .bar {
        padding-left: 5%;
        padding-right: 5%;
    }

    /* The top bar padding is a little smaller than the content and bottom
       bar padding because of the P of Portobello in the logo, which
       looks better with some overhang! */
    
    #top-bar {
        padding-left: 4%;
    }

    #logotype {
        padding-top: 0.4em;
    }

    #main-menu li {
        flex: 120px;
    }
}

@media only screen and (min-device-width: 820px)
{
    /* Desktop-ish */
    
    .content, .bar {
        padding-left: 11%;
        padding-right: 11%;
    }

    /* See above! */
    
    #top-bar {
        padding-left: 10%;
    }
}

@media only screen and (min-device-width: 0px) and (max-device-width: 500px)
{
    /* Phone-ish */
    
    body {
        background: white;
    }
    
    .content, .bar {
	padding-left: 5%;
	padding-right: 5%;
    }

    h2 {
        margin-bottom: 0.5em;
    }
    
    #top-bar {
        padding: 0;
        text-align: center;
        font-size: 0.95em;
        line-height: 1.5em;
    }

    #logotype {
        width: 90%;
        margin-left: 5%;
        height: auto;
    }
    
    #main-menu {
        width: 100%;
        text-align: left;
        padding: 0;
        padding-top: 0.3em;
        padding-bottom: 0.5em;
    }

    #main-menu li {
        flex: calc(50% - 2.1em);
    }

    #main-image {
        float: none;
        display: block;
        width: 100%;
    }
    
    #person-image {
        width: 40%;
        float: right;
        margin-top: 2em;
        margin-left: 2em;
        margin-bottom: 1em;
    }

    #concert-list, #programme-notes {
        margin-left: -5%;
        width: 110%;
    }
}