/* CSS Document */
html {
    position: relative;	
	height:100%;

	box-sizing: border-box;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}
*,*:before,*:after {box-sizing: inherit;}
body {
position:relative;
margin:0;
padding:0;
font:normal normal normal 15px/1.5em Lato,'Roboto','Poppins',helvetica,sans-serif;/*'Source Sans Pro',*/
color:#400400;
word-break:keep-all;
background:#444; 

}
@media screen and (min-width:1200px) {
	body main {
	font-size:15px;
	line-height:1.6em;
	word-break:normal;
	}
} /*MEDIA*/

button,
textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius:0;
border:0;
}
:focus {outline:none;}/*Replaced by custom CSS for accessibility*/
/* Responsive Images: add a max-width to individual classes */
    img	{
	max-width:100%;	
	height:auto;
    color: #20B790;
    font-weght: bolder;
    font-size: 10px ; 
    text-transform: uppercase;
    }
/*HEADER*/
.backlink {
    display:inline-block;
    background:transparent;
    color:#dadada;
    font-size:1.2em;
    text-decoration:none;
    text-align:center;
    padding:0.2em 0.5em;
    width:auto;
    min-width:6em;
    transition:all ease 0.4s;
    cursor:pointer;
}
.backlink:hover,
.backlink:focus {
    background:#F7931E;
    text-align:left;color:white;
}
header h1 {
    display:inline-block;
    margin:0 0.5em 0 0;
    float:right;
    font-size:160%;
    font-weight:300;

}

/* MAIN LAYOUT (body overflow is hidden)*/
body {
    overflow:hidden;
}
main {
    overflow-x:hidden;
    overflow-y:auto;/*!!!There is an underlying width issue here*/
}
main {
    position:relative;
    display:grid;
    grid-template-areas: 'header-area filter-area list-area display-area';
    grid-template-columns: 100vw 0vw;
}
header {
    grid-area:header-area;
    grid-column-start: 1; 
    grid-column-end: 4; 
    grid-row-start: 1; 
    grid-row-end: 1;
    height:3em;
    margin:0;
    padding:0.5em;
    background:#333333;
    color:#dedede;
    border-bottom:2px solid #666666;
}
.item-filter {
    grid-area:fliter-area;
    grid-column-start: 1; 
    grid-column-end: 1; 
    grid-row-start: 2; 
    grid-row-end: 2; 
    height:8em;
    color:#dedede;
}
.list {
    grid-area:list-area;
    grid-column-start: 1; 
    grid-column-end: 1; 
    grid-row-start: 3; 
    grid-row-end: 3; 
    height:calc(100vh - 11em);
    padding:1em 1.5em 1em 0.5em;;
    background:#333333;
    color:#dedede;

}
.display {
    position:relative;
    grid-area:display-area;
    grid-column-start: 2; 
    grid-column-end: 2; 
    grid-row-start: 2; 
    grid-row-end: 4; 
    background:white;
    color:#333333;
    display:none;
}
@media screen and (min-width:960px) {
    body {

    }
    main {
    display:grid;
    width:100vw;
    height:auto;
    grid-template-areas: 'header-area filter-area list-area display-area';
    grid-template-columns: 30vw 70vw;
    }
    .list {
    overflow-x:hidden;
    overflow-y:auto;
    padding:1em 0.5em;
    }
    .display {
    display:block;
    overflow-x:hidden;
    overflow-y:auto;
    }
}
@media screen and (min-width:1920px) {
    main {
    grid-template-columns: 20vw 80vw;
    }
}
/* DEFAULT SYLES*/

/*FILTERED LIST DYNAMIC FORM*/
.item-filter {
    padding:0.5em 0.5em 0.5em 1em;
    border-bottom:1px solid #333333;
    box-shadow: inset 0px -2px 2px rgba(0,0,0,0.8);
}
.sortLable {
    display:block;
    font-size:0.9em;
    margin-bottom:0.5em;
    color:#dedede;
}
/*Booklist Filter*/
.filterform fieldset {
    padding:0 16px 0 0;
    margin:0;
    color:white;
    border:0;
}
.filterform legend span {
    font-size:1.2em;
    margin-left:-3px;
}
.filterinput {
    display:inline-block;
    height:2em;
    width:100%;
    padding:0.2em;
    margin-bottom:0.5em;
    padding-left:24px;
    font-size:1.1em;
    color:white;
    background:#888888;
    box-shadow: inset 0px 2px 2px rgba(0,0,0,0.8);
    border:1px solid transparent;
    border-radius:4px;
}
.filterinput:focus {
    padding-left:8px;
    border:0px solid #41B224;
    border-left:16px solid #41B224;
}
    ::placeholder {
    color: #B3E0A7;
    opacity: 1; /* Firefox */
    font-style:italic;  
    }
    :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #B3E0A7;
    font-style:italic;
    }
    ::-ms-input-placeholder { /* Microsoft Edge */
    color: #B3E0A7;
    font-style:italic;
    }
#results {
    font-size:1em;
    color:white;
    margin-top:-0.5em;
    text-align:left;
    padding-right:1em;
}
#results span {
    display:inline-block;
    padding:0.2em 0.3em;
    font-size:1.2em;
    font-weight:bold;
    border:1px solid #41B224;
    background:#454545;
    color:white;
}
#resetThis {
    float:right;
    margin:-0.3em 1em 0 0;
    background:#3C6ABA;
    color:white;
    padding:0.5em 1em;
    border-radius:2px;
    box-shadow:0 0 0 rgba(0,0,0,0);
    cursor:pointer;
    transition:all 0.2s;
}
#resetThis:hover,
#resetThis:focus {
    background:#F7931E;
    box-shadow:1px 2px 3px rgba(0,0,0,0.4);
}
@media screen and (min-width:960px) {
    .sortLable {
    width:100%;
    }
    .filterinput {
    margin:0 0 1em 0;
    }
}/*end media*/
/* GROWL confirmation (Booklist)*/
#growl {
	position:absolute;
	bottom:0px;
	right:10px;
	width:300px;
	padding:0 1em 0.5em 1em;
	line-height:1.2em;
	background:#180A11;
	color:white;
	font-size:1em;
	border:0;
    border-top:16px solid #41B224;
    border-bottom:24px solid #41B224;
	border-radius:2px;
	box-shadow:0px 2px 6px black;
	z-index:1000!important;
	opacity:0.9;
	transition:all 1s;
}
.not {
	opacity:0!important;
	bottom:-400px!important;
    right:10px;
}
.growlAlert {
	display:inline-block;
	color:gold;
	padding:8px 0;
}
@media screen and (min-width:960px){
	#growl {
	right:20px;
	width:360px;
	}
}/*end media*/

/*LIST*/
.list-heading {
    color:white;
    padding:0.5em;
    /*background:#888888;*/
    font-size:1.1em;
    margin-bottom:0.8em;
}
span.up a,
span.up a:visited {
    display:inline-block;
    padding:0.1em 0.5em;
    width:7em;
    float:right;
    font-size:10px;
    color:#dedede;
    text-align:center;
    text-decoration:none;
    background:0;
    border:0px solid #dedede;
    border-radius:2px;
    text-transform:uppercase;
    transition: background ease 0.4s;
}
span.up a:hover,
span.up a:focus {
    background:#F7931E;
}
.entry {
    position:relative;
    margin:0em 0.5em 1em 0.5em;
    padding:0.5em;
    height:auto;
    min-height:100px;
    background:#666666;
    font-size:100%;
    color:white;
    border:1px solid transparent;
    border-radius:2px;
    box-shadow:1px 2px 5px rgba(0,0,0,0.5);
}
.entry.shown {
    background:#ffffff;
    color:#333333;
}
.entry:last-of-type {
    margin-bottom:4em;
}
.list-image {
    position:absolute;
    left:0.5em;
    top:0.5em;
    width:50px;
    height:60px;
    background:grey;
    box-shadow:1px 2px 5px rgba(0,0,0,0.4);
}
.list-text {
    display:block;
    margin:0;
    padding:0 40px 0 66px;
}
.item-title {
    margin:0;
    font-weight:700;
    font-size:100%;
    border-bottom:1px solid #888888;
    padding-bottom:0.5em;
    margin-bottom:0.5em;
}
.item-title span {
    display:block;
    font-weight:300;
    font-size:95%;
}
.list-text dd {
    display:block;
    margin-left:0;
}
.item-citation-label,
.item-reference-label {
    margin-top:1em;
    font-weight:bold;
    color:#8557A7;
}
.shown .item-author {
    color:#41B224;
}
/*List control paragraph and buttons*/
.list-control button {
padding:0.4em 0.3em;
font-size:70%;
text-transform:uppercase;
background:#41B224;
color:white;
border:0;
border-radius:2px;
cursor:pointer;
transition:all 0.2s;
}
.list-control button:nth-of-type(2){
margin:0 0.5em;
}
.list-control button:hover,
.list-control button:focus {
background:#F7931E;
box-shadow:1px 2px 5px rgba(0,0,0,0.4);
}
.list-control button:active {
box-shadow:0 0 0 transparent;
}
/*Item Menu*/
.item-menu-button {
    position:absolute;
    top:0.5em;
    right:0.5em;
    height:30px;
    width:30px;
    background:0;
    border-radius:2px;
    cursor:pointer;
    transform:rotate(90deg);
    transition: all 0.4s;
}
.item-menu-button .bar1,
.item-menu-button .bar2,
.item-menu-button .bar3{
    height:5px;
    width:5px;
    margin:0.2em auto;
    border-radius:50%;
    background:#C2ABD3;
    transform:all 0.4s;
}
/*Transform hamburger bars on click*/
.shown .item-menu-button {
    background-color:red;
}
.change .bar1,
.change .bar2,
.change .bar3
{/*hamburger bars setup*/
    width: 16px;
    height: 3px;
    background-color: #fff;
    margin: 4px auto;
    border-radius:0;
    transition: all 0.4s;
}
.shown .change .bar1,
.shown .change .bar2,
.shown .change .bar3
{/*hamburger bars setup*/
    background-color: white;
    transition: all 0.4s;
}
    .change .bar1 {
    -webkit-transform: 
    rotate(-45deg) 
    translate(-6px, 20px);
    transform: 
    rotate(-45deg) 
    translate(-7px, 6px);
    }
    .change .bar2 {
    opacity: 0;
    }
    .change .bar3 {
    -webkit-transform: 
    rotate(45deg) 
    translate(-2px, -2px);
    transform: 
    rotate(45deg) 
    translate(-4px, -3px);
    }
.item-menu-button:hover div {
    background:white;
}
/*BACK TO THE TOP - called by jQuery on scroll - px for font to avoid overtaking UI on increasing font*/
#topper.bttNone	{ /*start state */
    visibility:hidden;
    opacity:0;
}
#topper.btt	{ /*on scroll down */
    position:fixed;
    bottom:30px;
    left:90%;
    width:7em;
    margin-left:-7em;
    font-size:18px;
    text-align:center;
    opacity:1;
    z-index:100;
}
#topper.btt a,
#topper.btt a:visited	{
    display:inline-block;
    height:50px;
    width:50px;
    text-align:center;
    border:none;
    border-radius:2em;
    padding:10px;
    background-color:rgba(10,10,10,0.3);
    color:#FFFFFF;
    font-size:18px;
    text-decoration:none;
}
#topper.btt a:hover	{
    background-color:#F7931E;
    text-decoration:none;
    cursor:pointer;
}
#topper.bttNone,
#topper.btt {
    -webkit-transition:opacity 0.5s linear;
    transition:opacity 0.5s linear;
}
@media screen and (min-width:960px) {
        .entry:hover,
        .entry:focus {
        background:#777777;
        cursor:pointer;
        }
        .list-text {
        padding:0 8px 0 66px;
        width:100%;
        margin:0;
        }
        /*Hide the kebab*/
        .item-menu-button,
        .item-menu {
        display:none;
        }
        /*Highlight the selected item*/
        .selected,
        .selected:hover,
        .selected:focus {
        background:white;
        color:#333333;
        box-shadow:0 0 0 transparent;
        }
        /*Controlling the display area and content text box and image*/
        .list-display-content {
        width:100%;
        margin-right:1em;
        }
        .list-display-content .list-image {
        position:relative;
        display:block;
        width:40%;
        max-width:300px;
        height:auto;
        margin:0 2em 0 0;
        box-shadow:2px 5px 12px rgba(0,0,0,0.7);
        float:right;
        }
        .list-display-content .list-image:after {
         clear:both;
        }
        .list-display-content .list-text {
        padding:0.5em 2em 0.5em 0em;
        margin-left:1em;
        width:60%;
        max-width:800px;
        background:white;
        font-size:1.05em;
        line-height:1.4em!important;
        }
        .display h2.select-notice {
        margin:12em auto 0 auto;
        text-align:center;
        color:#41B224;
        text-shadow:0px 0px 18px #B3E0A7;
        }
        /*display heading/title*/
        .display .item-title {
        font-size:160%;
        line-height:1.1em;
        }
        /*Author*/
        .display .item-author
        {
        color:#41B224;
        font-size:1.2em;
        }
        .display .item-author:before {
        content:"By "
        }
        /*Citation and reference heading*/
        .display .item-description-label,
        .display .item-citation-label,
        .display .item-reference-label {
        color:#8557A7;
        font-size:1.1em;
        }
        .display .item-citation,
        .display .item-reference {
        padding-bottom:1em;
        margin:1em 0 2em 0;
        border-bottom:1px solid #8557A7;
        }
        /*Google Ads*/
        .display .googleAds {
        margin-top:8em;
        }
        /*copy buttons*/
        .list-control {
        padding:0.5em 0 1em 0em;
        margin-left:1.0em;
        text-align:left;
        }
           /*List control paragraph and buttons*/
        .list-control button {
        padding:0.5em 1em;
        font-size:80%;
        text-transform:uppercase;
        background:#41B224;
        color:white;
        border:0;
        border-radius:2px;
        cursor:pointer;
        }
     
            /*SCROLL BARS (Webkit only)
    ::-webkit-scrollbar the scrollbar.
    ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards).
    ::-webkit-scrollbar-thumb the draggable scrolling handle.
    ::-webkit-scrollbar-track the track (progress bar) of the scrollbar.
    ::-webkit-scrollbar-track-piece the track (progress bar) NOT covered by the handle.
    ::-webkit-scrollbar-corner the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
    ::-webkit-resizer the draggable resizing handle that appears at the bottom corner of some elements.
    ::-webkit-scrollbar {}
    ::-webkit-scrollbar-button {}
    ::-webkit-scrollbar-thumb {}
    ::-webkit-scrollbar-track {}
    ::-webkit-scrollbar-track-piece {}*/
    /* width */
    ::-webkit-scrollbar {
        width: 16px;
    }
    ::-webkit-scrollbar-track {
        background:#333333;
        box-shadow: inset 0 0 3px #000000; 
        border-radius: 2px;
    }
    ::-webkit-scrollbar-thumb {
        background: #888888; 
        border-radius: 2px;
        box-shadow: inset 0 0 5px #000000;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: orange; 
    }
}/*end media*/
/*Wider viewports*/
@media screen and (min-width:1200px){
        .display .item-title {
        font-size:200%;
        line-height:1.1em;
        }
} 
@media screen and (min-width:1800px){
    /*Main three sections*/
        .display .list-image {
        max-width:500px;
        margin-right:10%;
        }
        /*Google Ads*/
        .display .googleAds {
        margin-top:16em;
        }
    }/*end media*/


/*HIDDEN - LAST to override anything*/
    .hidden {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;}