/*--------------------------------------------------------------
!!!!! IMPORTANT NOTES !!!!!!!!!!

Breakpoints 

phones: max-width: 599px
lg phones and small tablets: max-width: 767px
tablets: max-width: 992px
laptops & desktops: min-width: 993px;

#e40707 = link colours
#cd1d1d = button background
#fa7c7c = button border
#622 = button border


@media screen and (max-width: 767px) {

@media screen and (max-width: 599px) {

*/



div.topic-list ul  {display: flex;
    flex-wrap: wrap;
    margin: 0 0 1rem 0;
    padding: 0;
    font-size: .7rem;
    color: #999;
    border-bottom: solid 1px #ccc;
}  
 
div.topic-list ul li {
    display: inline-block;
    padding: 0 .5rem;
    border-right: solid 1px #ccc;}

    div.topic-list ul li:last-of-type {
        border-right:none;}

div.material-type  {
        text-align: right; 
            margin: 0 0 1rem 0;
            padding: 0;
            font-size: .7rem;
            color: #999;
            border-top: solid 1px #ccc;
        }  
/* on search results page */
div.search {display: flex;}
div.search-results-area {width: 70%; padding: 0 3% 0 0;}
aside.sidebar-search {width: 30%;  padding: 0 0 0 3%;}
.search-item {border-bottom: solid 1px #ddd; padding-bottom: 1em;}

#search-results {border: solid 1px #c4c4c4; padding: 0; margin: 2rem 0}
#search-results h2 {font-size: 1.25rem; background-color: #c4c4c4; padding: 1rem; margin: 0 0 2rem 0; }
#resultslist {padding: 0 1rem;}
#resultslist h2  {font-size: 1.25rem; background-color: transparent; padding: 0 rem; margin: 0; }
/*on search page */

div.search-page {display: flex;}
div.search-page form.search-form {width: 50%; padding: 2rem; margin: 0 auto;}
div.search-page aside {width: 100%; padding-top: 2rem; }
div.search-page aside div.tipsandtricks {width: 100%; display: flex; flex-wrap: wrap; border-top: solid 1px #c4c4c4;}

div.search-page aside div.tipsandtricks h2 {width: 100%; }

div.search-page aside div.tipsandtricks div {width: 50%;padding: 0 1rem;}

/*tips and tricks*/
.tipsandtricks h2 {font-size: 1.25rem; background-color: #c4c4c4; padding: 1rem; margin: 0 0 2rem 0; }
.tipsandtricks h3 {font-size: 1.25rem; padding: .5rem 0 0 0; margin: 0 0 -.75rem 0; }
.tipsandtricks {background: #f3f3f3;}
.tipsandtrickscontent {padding: 0 1rem;}