@import url(https://fonts.googleapis.com/css?family=Newsreader);
		
a.external {
    background: url(/images/misc/external.png) center right no-repeat;
    padding-right: 13px;
    padding-top: 10px;
}

code {
    font-family: monospace;
    font-size: 90%;
    background: #ededed;
}

#glossary-wrapper {
    margin: auto;
    max-width: 800px;
    font-family: "Newsreader";
}

#glossary-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0.5em;
    font-size: 1.5em;
    line-height: 1.5em;
    font-weight: bold;
    font-family: "Source Sans Pro";    
}
.glossary-header {
    cursor: pointer;
    box-sizing: content-box;
    border: none;
    padding: 0 6.2px;
}
.glossary-header:hover {
    color: #ff6900;
}
.glossary-header.selected {
    background-color: #ff6900;
    color: white;
}
.glossary-header.small {
    font-size: 65%;
}
#glossary-games {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.0em;
}
.glossary-game-header {
    height: 38px;
    margin-right: 0.1em;
    margin-bottom: 0.5em;
    cursor: pointer;
    box-sizing: content-box;
    padding: 3px;
    border: 3px solid white;
}
.glossary-game-header.selected {
    border-color: #ff6900;
}
.glossary-game-header:hover {
    border-color: #ff6900;
}


#glossary-intro {
    margin-top: -1.5em;
    margin-bottom: 1.5em;
    font-family: "Source Sans Pro";
    font-weight: bold;
    font-size: 16px;
    font-style: italic;
    color: #333;
    border: 2px solid #333;
    border-radius: 15px;
    padding: 10px;
}


.noresults {
    font-family: "Newsreader";
    color: #1e1e1e;
    font-size: 120%;
}

.term {
    margin-bottom: 2.5em;
    position: relative;
    color: #1e1e1e;
    font-family: "Newsreader";
}
.term a {
    color: #000;
    border-bottom: solid 1px;
}
.term a:hover {
    color: #ff6900;
}
.term.fromClick {
    padding-left: 3em;
}
.term.fromClick .name {
    color: #ffa362;
}
.term.recently-selected .name {
    color: #ff6900;
}

.glossary-game {
    height: 28px;
    margin-left: 0.5em;
    cursor: pointer;
}
.term .linkToTerm {
    margin-left: auto; /* right-align the link */
    display: flex; /* flex the image inside of it so it can be vertically centered */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
}
.term .linkToTerm img {
    height: 28px;
    /* same as close button color */
    filter: invert(70%) sepia(0%) saturate(27%) hue-rotate(232deg) brightness(102%) contrast(108%);
}
.term .linkToTerm img:hover {
    /* same as close button hover color */
    filter: invert(43%) sepia(81%) saturate(2747%) hue-rotate(1deg) brightness(105%) contrast(103%);
}

.term .term-close-button {
    width: 22px;
    position: absolute;
    left: 22px;
    /* filter: invert(96%) sepia(1%) saturate(996%) hue-rotate(175deg) brightness(110%) contrast(60%); */
    filter: invert(70%) sepia(0%) saturate(27%) hue-rotate(232deg) brightness(102%) contrast(108%);
}
/* matches #ff6900 */
.term .term-close-button:hover {
    filter: invert(43%) sepia(81%) saturate(2747%) hue-rotate(1deg) brightness(105%) contrast(103%);
}
.term svg {
    position: absolute;
}

.term .term-content {
    padding-left: 2em;
}
.term.fromClick .term-content {
    padding-left: 0;
}

.term .media-container {
    padding-left: 1em;
    margin-top: 1em;
    display: flex;    
}
.term.fromClick .media-container {
    padding-left: 0;
}

.term .lightbox {
    margin-top: 15px;
    font-weight: bold;
    border: 2px solid #555;
    color: #555;
    border-radius: 15px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    font-family: "Source Sans Pro";
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.term .lightbox img {
    margin-left: 7px;
    /* convert the black icon to #9E0067 -- source https://codepen.io/sosuke/pen/Pjoqqp */
    /* filter: invert(11%) sepia(68%) saturate(5306%) hue-rotate(309deg) brightness(91%) contrast(111%); */
    filter: invert(34%) sepia(13%) saturate(0%) hue-rotate(267deg) brightness(91%) contrast(93%);
}
.term .lightbox:hover {
    background-color: #555;
    color: white;
}
.term .lightbox:hover img {
    /* convert hovered image to white */
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(152deg) brightness(103%) contrast(103%);
}

.term .headerdiv {
    display: flex;
    align-items: center;
    margin-bottom: 0.6em;
}
.term .name {
    color: #ff6900;
    font-family: "Source Sans Pro";
    font-size: 1.5em;
    font-weight: bold;
    padding-right: 0.4em;
    /* text-transform: uppercase; */
    /* letter-spacing: 1px; */
}

.term .subname {
    color: #ff6900;
    font-family: "Source Sans Pro";
    font-size: 1.2em;
    font-weight: 600;
    /* text-transform: uppercase; */
    padding-right: 0.4em;
    /* letter-spacing: 1px; */
    margin-top: -0.3em;
    margin-bottom: 0.6em;
}

 .term .termOfTheDay {
    display: flex;
    flex-direction: row;
    color: #878787;
    font-family: "Source Sans Pro";
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 0.7em;
}
.term .termOfTheDay:before, .term .termOfTheDay:after{
    content: "";
    flex: 1 1;
    border-bottom: 2px solid;
    margin: auto;
}
.term .termOfTheDay:before {
    margin-right: 20px
}
.term .termOfTheDay:after {
    margin-left: 20px
}

.term .term-jp-container {
    margin-top: 1em;
    display: flex;
    align-items: flex-start;
}
.term .term-jp-text {
    margin-left: 1em;

}
.term .term-flag {
    width: 36px;
    border-radius: 15%;
}
.term .term-botlinks {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
    font-size: 80%;
}
.term .term-botlinks > a {
    margin-left: 20px;
    border-bottom: none;
    text-decoration: underline;
}

/* .term .def {
} */

.glossary-link {
    cursor: pointer;
}
.glossary-media-icon {
    width: 32px;
    vertical-align: middle;
}

.gfyVid {
    max-height: 480px;
}


#search-input {
    margin-left: auto;
    margin-right: auto;
    background-image: url('/css/images/searchicon.png');
    background-position: 10px 12px; 
    background-repeat: no-repeat;
    
    width: 75%;
    padding: 12px 20px 12px 40px;
    border: 2px solid #bbb;
    margin-bottom: 12px;
}
#search-input::placeholder {
    color: #555;
}

#glossary-expand {
    border: 3px solid #1d37b7;
    border-radius: 10px;
    padding: 5px;
    font-size: 120%;
    text-align: center;
    font-weight: bold;
    color: #1d37b7;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

#glossary-expand:hover {
    background-color: #1d37b7;
    color: white;
}

.sidepage-header {
    color: #ff6900;
    font-family: "Source Sans Pro";
    font-size: 1.7em;
    font-weight: bold;
    margin-bottom: 0.8em;
}
.sidepage-subheader {
    color: #ff6900;
    font-family: "Source Sans Pro";
    font-size: 1.5em;
    font-weight: bold;
}

#glossary-stats {
    width: 100%;
    border: 2px solid #ff6900;
    border-radius: 20px;
    margin-bottom: 40px;
}

.stats-header, .update-header {
    font-weight: bold;
    color: #ff6900;
    font-family: "Source Sans Pro";
}
.update-header {
    font-size: 120%;
}
.stats-hr {
    border-top: solid 1px #ff6900;
    color: #ff6900;
    margin: 0;
}
.stats-by-game {
    display: flex;
    flex-wrap: wrap;
    padding-left: 15px;
}
.stats-by-game > div {
    flex: 0 0 19%;
    display: flex;
    align-items: center;
    margin: 7px 0;
    padding-right: 15px;
}

.stats-game-icon {
    height: 36px;
    margin-right: 8px;
}
.update-list > li, .credits-list > li {
    margin-bottom: 20px;
    margin-left: 15px;
    text-indent: -15px;
}
.update-hr {
    border-top: solid 1px #ff6900;
    color: #ff6900;
    margin-bottom: 20px;
}
.credits-list > li {
    margin-bottom: 10px;
}
.update-sublist {
    text-indent: 0;
    list-style-type: square;
    list-style-position: inside;
    margin: 0;
    padding: 0;
}
.update-sublist > li {
    margin: 0.3em 0;
}
.update-term-list {
    width: 100%;
    border: 2px solid #ff6900;
    border-radius: 20px;
    padding: 0.5em 1em;
    margin: 0.5em 0 1em 0;
    display: none;
    flex-wrap: wrap;
}
.update-term-list > div {
    flex-basis: 50%;
    padding-right: 5px;
}
.update-term-list img {
    width: 16px;
    margin-left: 0.3em;
    vertical-align: text-top;
}
.expand-term-button {
    font-family: "Source Sans Pro";
    font-weight: bold;
    color: #ff6900;
    border: 2px solid #ff6900;
    padding: 0.3em 0.6em;
    margin: 0.4em 0;
    border-radius: 15px;
    display: inline-block;
    cursor: default;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.expand-term-button:hover {
    color: white;
    background-color: #ff6900;
}
.increase-value {
    color: green;
    font-family: "Source Sans Pro";
    font-weight: bold;
}


@media (max-width: 980px) {
    .term .term-close-button {
        width: 18px;
        left: 20px;
    }
}
@media (max-width: 840px) {
    .term .term-close-button {
        width: 22px;
        left: 22px;
    }
    #glossary-intro {
        font-size: 14px;
        padding: 6px;
        border-radius: 8px;
    }
}
@media (max-width: 736px) {
    .term {
        margin-bottom: 2em;
    }
    .term .term-close-button {
        width: 18px;
        left: 16px;
    }
    .glossary-media-icon {
        width: 26px;
    }
    .glossary-game-header {
        height: 32px;
    }
    .glossary-game {
        height: 22px;
    }
    .term .linkToTerm img {
        height: 22px;
    }
    .term .term-flag {
        width: 28px;
    }
    #search-input {
        width: 100%;
    }
    .stats-by-game {
        padding-left: 10px;
    }
    .stats-by-game > div {
        flex: 0 0 24%;
    }
    .stats-game-icon {
        height: 28px;
    }
    .update-term-list img {
        width: 13px;
    }
}
@media (max-width: 480px) {
    #glossary-intro {
        font-size: 12px;
    }
}
@media (max-width: 285px) {
    .update-term-list > div {
        flex-basis: 100%;
    }
}