@charset "UTF-8";
 /* for Spry Data - prevents the code from loading before being rendered */
.SpryHiddenRegion {
    visibility: hidden;
}

#show {
/* hide the 'show filters' button */
    margin: 0px 0px 10px 0px;
    display: none;
}
/* Sort and filter controls */
.controls {
    background-color: seagreen;
    color: white;
    font-family: "Segoe", "Segoe UI", "DejaVu Sans", "Trebuchet MS", "Verdana", "sans-serif";
    font-size: 1rem;
    min-height: 2.75rem;
    padding: 5px;
    width: 95%;
    margin: 0 auto 0 auto;
}

.filter-head {
    color: white;
    background-color: seagreen;
    /*padding: 1rem 1rem;*/
}

.filters {
    display: flex;
    flex-direction: column;
    background-color: seagreen; 
    padding: 0 1rem;
}
.filter-col {
    display: flex;
    flex-direction: column;
    background-color: seagreen;
    padding: 1rem 1rem;
}
.filteritem {
    color: #ffffff;
    font-size: smaller;
    display: flex;
    flex-direction: column;
    width: 80%;
    padding: 2px 0;
    }
.buttons {
    display: flex;
    flex-direction: column;
    background-color: seagreen;  
    padding: 0 1rem;
}
.filter-button {
    display: flex;
    flex-direction: column;
    background-color: seagreen;
    padding: 0 1rem;
}

.button {
    background-color: seagreen;
    color: white;
    font-size: smaller;
    text-decoration: None;
    margin-left: auto;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    border-radius: 12px;
    box-shadow: 0px 3px 5px #000000;
    text-align: center;
    width: 100px;
}

.button:hover {
    background-color: lightgreen; 
    color: darkgreen;
}
    
.sort {    
    font-size: 1rem;
    padding: 0 1rem 1rem 1rem;
}

/* used for messages */
.announcementMsg {

    color: crimson;
}

/* used for messages where emphasis not necessary */
.normalMsg {

    color: darkslategray;
    }


@media (min-width: 900px) {
.filters {
    display: flex;
    flex-direction: row;
    background-color: seagreen; 
    padding: 0 1rem;
}
.filter-col {
    display: flex;
    flex-direction: column;
    background-color: seagreen;
    padding: 1rem 1rem;
}
.buttons {
    display: flex;
    flex-direction: row;
    background-color: seagreen;  
    padding: 0 1rem;
}
.filter-button {
    display: flex;
    flex-direction: column;
    background-color: seagreen;
    padding: 0 1rem;
}
}


/* Styles for the catalogue list */

/* is th actually used? 
th {
    color: darkgreen;
    text-align: left;
    vertical-align: text-top;
}*/

td {
    text-align: left;
    vertical-align: text-top;
}

td.top, td.image, td.details, td.view { 
    vertical-align: top;
}

td.narrow { 
    align: center;
}
   
table.narrow {
    display: block;
}

table.wide {
    display: none;
}

td a:link {
    color: white;
    text-decoration: none;
    }
    
td a:hover, a:visited {
    color: limegreen;
    text-decoration: none;
    }

@media (min-width: 800px) {
table.narrow {
    display: none;
}

table.wide {
    display: block;
}
}

.itemAuthor, .itemDate {
    font-size: large;
    color: seagreen;
}

.itemTitle {	
    font-size: large;
	font-style: italic;
    color: seagreen;
}

.itemDescription {
    color: seagreen;
    }

.itemID, .itemDetail {
    color:darkgrey;
    }

.itemRights {color:crimson;}