@charset "UTF-8";
/* CSS Document */
 input {
    width: 100%;
}

input.button {
    width: 100%;
} 

@media (min-width: 320px) {
    input {
        width: 50%;
    }
    
    input.button {
        width: 80%;
    } 
}

@media (min-width: 640px) {
    input {
        width: 80%;
    }
    
    input.button {
        width: 80%;
    } 
}

/* Main content */
.grid-item-1 {
    grid-area: top;
    background-color: #ffffff;     }
.grid-item-2 {
    grid-area: left;
    width: 100%;
    padding: 1px 10px;    
    background-color: #ffffff;     }
.grid-item-3 {
    grid-area: centre;
    padding: 1px 10px;    
    background-color: #ffffff;     }
.grid-item-4 {
    grid-area: right;
    width: 100%;
    padding: 1px 10px;    
    background-color: #ffffff;     }  
    
/* Main content: by default the three grid items are aligned in a column */
.grid {
    display: grid;
    width: 95%;
    grid-gap: 20px;
    grid-template-areas:
    'top'
    'left'
    'right';   
    }   

@media (min-width: 320px) {    
/* Main content: on a narrow screen the three grid items are aligned in a column */
.grid {
    display: grid;
    width: 95%;
    grid-gap: 20px;
    grid-template-areas:
    'top'
    'left'
    'right';   
    }   
}

@media (min-width: 640px) {    
/* Main content: on a wide screen the grid items are top, and below that, left and right but these are re-defined for specialist pages */
.grid {
    display: grid;
    width: 95%;
    grid-gap: 20px;
    grid-template-areas:
    'top top'
    'left right';
    }    
}

/* End of Grid definition */

/* Filter and sort */
.controls {
/*    background-color: #DFDBDB; */
    background-color: #4e7389;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 1rem;
    min-height: 2.75rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    /* main axis is vertical */
    padding: 5px;
    }

.sort{
    display: flex;
    flex-direction: column;
    margin: 2px;
    width: 100%;
    }

.filter{
    display: flex;
    flex-direction: column;
    margin: 2px;
    width: 100%;
    }

.sortitem,
.filteritem {
    color: #ffffff;
    font-size: smaller;
    text-decoration: None;
    margin-left: 1rem;
    display: flex;
    justify-content: space-between;
    padding: 2px;
    width: 99%;
}

.filteritem {    
    flex-direction: column;
}
    
.filterlabel {
    padding: 2px;
    display: flex;
}  

.filterbox {
    height: 20px;
    display: flex;
}  

@media (min-width: 320px) {    
/* For a narrow screen the controls are vertical */
.controls {
    background-color: #4e7389;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 1rem;
    min-height: 2.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    /* main axis is vertical */
    padding: 0 1rem;
    }
}
    
@media (min-width: 640px) {    
/* For a wide screen the controls are horizontal */
.controls {
    width: 90%;
    background-color: #4e7389;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size: 1rem;
    min-height: 2.75rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    /* main axis is horizontal */
    margin: 2px;
    }

.sort{
    display: flex;
    flex-direction: column;
    margin: 2px;
    width: 30%;
}

.filter{
    display: flex;
    flex-direction: column;
    margin: 2px;
    width: 70%;
}
.sortitem,
.filteritem {
    color: #ffffff;
    text-decoration: None;
    font-size: smaller;
    margin-left: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 2px;
    width: 99%;
    }
    
.filterlabel {
    padding: 2px;
    display: flex;
}  

.filterbox {
    width: 60%;
    height: 20px;
    display: flex;
}  
}