/* Web fonts */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
@import url(http://fonts.googleapis.com/earlyaccess/notonastaliqurdu.css);
@import url(http://fonts.googleapis.com/earlyaccess/notonaskharabic.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanstelugu.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanshebrew.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosansdevanagari.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosansthai.css);


/* Element styles, from purecss.io/css/main.css */

body {
    min-width: 320px;
    font-family: 'Noto Sans', 'Droid Sans', Helvetica, Arial, sans-serif;
    font-size: 20px;
    color: #333;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: rgb(75, 75, 75);
}
h3 {
    font-size: 1.25em;
}
h4 {
    font-size: 1.125em;
}
a {
    color: #265778; /* block-normal-text-normal */
    text-decoration: none;
}
.term a.edge-link {
    opacity: 0.2;
}
.term:hover a.edge-link {
    opacity: 1;
}

.content {
    margin: 0 auto;
    clear: both;
}

.header {
     position: relative;
     margin: 0;
     color: #333;
     padding: 2.5em 2em 0;
 }
.header h1 {
    margin: 0;
    font-size: 2.5em;
}
.header h1.error {
    margin: 0;
    font-size: 1.5em;
}
.header h2 {
    color: #777;
    padding: 0;
    margin-top: 0;
}
@media screen and (min-width:84em) {
    .top-menu-h {
        position: relative;
    }
    .top-menu-h .pure-menu-list {
        position: absolute;
        top: 0;
        right: 0;
    }
    .top-menu-v {
        display: none;
    }
}
@media screen and (max-width:83.999em) {
    .top-menu-h {
        display: none;
    }
    .top-menu-v {
        position: relative;
        font-size: 80%;
    }
    .top-menu-v .pure-menu-list {
        position: absolute;
        top: 0;
        right: 0;
    }
}
.pure-menu-item {
    line-height: 75%;
}
.header .subtitle {
    font-weight: normal;
    font-size: 1em;
    line-height: 90%;
}
.heading-logo {
    position: relative;
    top: -1rem;
    float: left;
    padding-right: 1rem;
}
.footer {
    background-color: #ddd;
    margin: 0;
    padding: 1em;
    font-size: 1rem;
}

.footer .creative-commons {
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}

.luminoso-logo {
    max-width: 200px;
    float: right;
    position: relative;
    top: -2em;
}

/* The grid of edges grouped by feature */
.rel-grid {
    background: #f4f4f4;
    margin-top: 2em;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
div.feature-box {
    padding: 0.1em 1em 0.1em 1em;
    box-sizing: border-box;
}
div.feature-box ul {
    padding-left: 1em;
}
div.feature-box li {
    list-style-type: none;
    padding-top: 0.1em;
    padding-left: 1em;
    text-indent: -1.5em;
}
div.feature-box h2 {
    font-weight: normal;
    color: #888;
}
.external-links {
    background: #ffffff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
/* A table of edges matching a query */
.edge-list {
    background: #f4f4f4;
    margin-top: 1em;
    padding: 1em;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.edge-start {
    text-align: right;
    vertical-align: top;
    padding: 0.5em;
}
.edge-rel {
    text-align: center;
    vertical-align: top;
    padding: 0.5em;
}
.edge-end {
    text-align: left;
    vertical-align: top;
    padding: 0.5em 1.5em 0.5em 0.5em;
}
.weight {
    font-size: 0.8rem;
}
.sources {
    font-size: 0.8rem;
}
.api {
    font-size: 0.8rem;
}

/* Documentation areas */
.doc {
    color: #000;
    font-size: 16px;
    padding-left: 2.5em;
    padding-right: 2.5em;
    padding-top: 1em;
    padding-bottom: 1em;
}

/* Search form */
.search-form {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.search-form select {
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    height: 3rem;
}
.search-form input[type=text] {
    height: 3rem;
}
.search-form button {
    height: 3rem;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #fff;
}

.term-examples {
    font-size: 20px;
    list-style-type: none;
}

.api-example {
    font-size: 12px;
    background-color: #eee;
    width: 100%;
    height: 240px;
    padding: 5px;
    overflow-y: scroll;
}

.api-example pre {
    margin: 0;
}

.svg-container {
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%;
	vertical-align: middle;
	overflow: hidden;
}
a .graph-node-label {
    color: #004466;
    fill: #004466;
    text-decoration: none;
}
.graph-edge-label {
    font-size: 15px;
    font-family: 'Noto Serif', FreeSerif, 'Times New Roman', serif;
    font-style: italic;
}
.graph-node-label {
    font-size: 15px;
    text-anchor: middle;
}

/* Pagination */
.pagination {
    text-align: center;
    margin: 1em;
}
.pagination-counter {
    padding: 1em;
}

.term span.language {
    /* This font size is relative to the parent font size. All other
        em units in this block are relative to this. */
    font-size: 0.6em;
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    top: -.25em;
    min-width: 2em;
    min-height: 2em;
    font-weight: bold;
    padding-top: 0.35em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    text-indent: 0;
    text-align: center;
    border-radius: 0.3em;
}

/* The default color scheme for a language not covered here */
span.language {
    background-color: #fff;
    color: #888;
}

/* We're going to represent every language with an icon, made of its
    IETF language code in a particular color scheme. I hope this
    is more acceptable than the practice of using flags of particular
    *countries* as language icons.

    Now, although we're not using flags themselves, it is true that
    flags are where most of these colors come from.

    In many cases, the colors for a language are inspired by common
    colors in the flags of the countries, regions, or cultures that do
    speak that language. To be honest, the colors are also influenced
    somewhat by color schemes from Civilization 5.

    But I also have taken some liberties to account for languages
    spoken in multiple countries that might not necessarily get
    along, and to work around the fact that like half the flags are
    red, white, and blue. */

.lang-ar, .lang-fa {
    font-family: 'Noto Naskh Arabic', 'Noto Sans', sans-serif;
}

.lang-ur {
    font-family: 'Noto Nastaliq Urdu', 'Noto Sans', sans-serif;
}

.lang-te {
    font-family: 'Noto Sans Telugu', 'Noto Sans', sans-serif;
}

.lang-he {
    font-family: 'Noto Sans Hebrew', 'Noto Sans', sans-serif;
}

.lang-hi {
    font-family: 'Noto Sans Devanagari', 'Noto Sans', sans-serif;
}

.lang-ja {
    font-family: 'Noto Sans CJK JP', 'Noto Sans', sans-serif;
}

.lang-zh {
    font-family: 'Noto Sans CJK TC', 'Noto Sans', sans-serif;
}

.lang-ko {
    font-family: 'Noto Sans CJK KR', 'Noto Sans', sans-serif;
}

.lang-th {
    font-family: 'Noto Sans Thai', 'Noto Sans', sans-serif;
}

.lang-en span.language, .lang-en span.language a {
    background-color: #22a;
    color: #fff;
}
.lang-ar span.language, .lang-ar span.language a {
    background-color: #272;
    color: #fff;
}
.lang-es span.language, .lang-es span.language a {
    background-color: #fe8;
    color: #c00;
}
.lang-pt span.language, .lang-pt span.language a {
    background-color: #4b4;
    color: #fe4;
}
.lang-de span.language, .lang-de span.language a {
    background-color: #000;
    color: #fe4;
}
.lang-fr span.language, .lang-fr span.language a {
    background-color: #77f;
    color: #fff;
}
.lang-it span.language, .lang-it span.language a {
    background-color: #fff;
    color: #292;
}
.lang-ja span.language, .lang-ja span.language a {
    background-color: #fff;
    color: #c44;
}
.lang-nl span.language, .lang-nl span.language a {
    background-color: #f83;
    color: #fff;
}
.lang-ru span.language, .lang-ru span.language a {
    background-color: #953;
    color: #fff;
}
.lang-zh span.language, .lang-zh span.language a {
    background-color: #d40;
    color: #fff;
}
.lang-cmn span.language, .lang-cmn span.language a {
    background-color: #d40;
    color: #fff;
}

/* Historical languages get sepia backgrounds */
.lang-la span.language, .lang-la span.language a {
    background-color: #edc;
    color: #94d;
}
.lang-grc span.language, .lang-grc span.language a {
    background-color: #cba;
    color: #393;
}
.lang-enm span.language, .lang-enm span.language a {
    background-color: #edc;
    color: #f77;
}
.lang-ang span.language, .lang-ang span.language a {
    background-color: #cba;
    color: #f77;
}
.lang-frm span.language, .lang-frm span.language a {
    background-color: #edc;
    color: #77f;
}
.lang-fro span.language, .lang-fro span.language a {
    background-color: #cba;
    color: #77f;
}
.lang-dum span.language, .lang-dum span.language a {
    background-color: #edc;
    color: #fa0;
}
.lang-odt span.language, .lang-odt span.language a {
    background-color: #edc;
    color: #fa0;
}
.lang-gml span.language, .lang-gml span.language a {
    background-color: #edc;
    color: #fa0;
}
.lang-osx span.language, .lang-osx span.language a {
    background-color: #cba;
    color: #fa0;
}
.lang-gmh span.language, .lang-gmh span.language a {
    background-color: #edc;
    color: #ba0;
}
.lang-goh span.language, .lang-goh span.language a {
    background-color: #cba;
    color: #ba0;
}
.lang-cu span.language, .lang-cu span.language a {
    background-color: #edc;
    color: #953;
}
.lang-orv span.language, .lang-orv span.language a {
    background-color: #cba;
    color: #953;
}

/* Constructed languages get two shades of the same color */
.lang-eo span.language, .lang-eo span.language a {
    background-color: #4b4;
    color: #dfd;
}
.lang-io span.language, .lang-io span.language a {
    background-color: #44b;
    color: #ddf;
}
.lang-vo span.language, .lang-vo span.language a {
    background-color: #bb4;
    color: #ffb;
}
.lang-jbo span.language, .lang-jbo span.language a {
    background-color: #f84;
    color: #fdb;
}

/* A bunch more languages that we have reasonable support for */
.lang-af span.language, .lang-af span.language a {
    background-color: #000;
    color: #1c4;
}
.lang-ast span.language, .lang-ast span.language a {
    background-color: #68a;
    color: #fd4;
}
.lang-bg span.language, .lang-bg span.language a {
    background-color: #d33;
    color: #7c7;
}
/* Catalan: from flag of Catalonia */
.lang-ca span.language, .lang-ca span.language a {
    background-color: #d33;
    color: #fd0;
}
.lang-cs span.language, .lang-cs span.language a {
    background-color: #ccc;
    color: #369;
}
.lang-cy span.language, .lang-cy span.language a {
    background-color: #c96;
    color: #000;
}
.lang-da span.language, .lang-da span.language a {
    background-color: #ddd;
    color: #f55;
}
.lang-el span.language, .lang-el span.language a {
    background-color: #79c;
    color: #fff;
}
.lang-eu span.language, .lang-eu span.language a {
    background-color: #4a0;
    color: #fff;
}
.lang-et span.language, .lang-et span.language a {
    background-color: #000;
    color: #79c;
}
.lang-fa span.language, .lang-fa span.language a {
    background-color: #bf9;
    color: #800;
}
.lang-fi span.language, .lang-fi span.language a {
    background-color: #fff;
    color: #22a;
}
.lang-fil span.language, .lang-fil span.language a {
    background-color: #fff;
    color: #ec0;
}
/* Faroese: gray ram on dark blue */
.lang-fo span.language, .lang-fo span.language a {
    background-color: #22a;
    color: #ccc;
}
.lang-ga span.language, .lang-ga span.language a {
    background-color: #4b1;
    color: #fa6;
}
/* Scots Gaelic: from Scottish coat of arms */
.lang-gd span.language, .lang-gd span.language a {
    background-color: #fd4;
    color: #800;
}
.lang-gl span.language, .lang-gl span.language a {
    background-color: #79c;
    color: #800;
}
.lang-he span.language, .lang-he span.language a {
    background-color: #fff;
    color: #79c;
}
.lang-hi span.language, .lang-hi span.language a {
    background-color: #f93;
    color: #060;
}
.lang-hu span.language, .lang-hu span.language a {
    background-color: #6b6;
    color: #b33;
}
.lang-hy span.language, .lang-hy span.language a {
    background-color: #fb2;
    color: #359;
}
/* Icelandic: can't represent another red, white, and blue flag, so let's make it look icy */
.lang-is span.language, .lang-is span.language a {
    background-color: #ddf;
    color: #777;
}
/* Georgian: light red on white, vaguely like the flag except not */
.lang-ka span.language, .lang-ka span.language a {
    background-color: #fff;
    color: #f88;
}
.lang-ko span.language, .lang-ko span.language a {
    background-color: #007;
    color: #f55;
}
.lang-lt span.language, .lang-lt span.language a {
    background-color: #da2;
    color: #fff;
}
.lang-lv span.language, .lang-lv span.language a {
    background-color: #800;
    color: #ccc;
}
/* Malagasy: from seal of Madagascar */
.lang-mg span.language, .lang-mg span.language a {
    background-color: #ff8;
    color: #282;
}
.lang-mi span.language, .lang-mi span.language a {
    background-color: #000;
    color: #fff;
}
/* Macedonian: white on olive, because all the other color schemes
    are taken */
.lang-mk span.language, .lang-mk span.language a {
    background-color: #890;
    color: #fff;
}
/* Malay: Compromise between Indonesia, Malaysia, Singapore, and Brunei */
.lang-ms span.language, .lang-ms span.language a {
    background-color: #fda;
    color: #f55;
}
.lang-no span.language, .lang-no span.language a {
    background-color: #f55;
    color: #ddd;
}
.lang-nv span.language, .lang-nv span.language a {
    background-color: #fda;
    color: #863;
}
/* Occitan: from unofficial flag of Occitania, but more orange */
.lang-oc span.language, .lang-oc span.language a {
    background-color: #d33;
    color: #fc6;
}
.lang-pl span.language, .lang-pl span.language a {
    background-color: #f55;
    color: #fff;
}
.lang-ro span.language, .lang-ro span.language a {
    background-color: #fd4;
    color: #469;
}
/* Sami: left segment of the Sami flag */
.lang-se span.language, .lang-se span.language a {
    background-color: #f55;
    color: #00c;
}
/* Serbo-Croatian gets an arbitrary color scheme */
.lang-sh span.language, .lang-sh span.language a {
    background-color: #74c;
    color: #ddd;
}
.lang-hbs span.language, .lang-hbs span.language a {
    background-color: #74c;
    color: #ddd;
}
/* Man, I can't even tell Slovenia and Slovakia apart by their flags */
.lang-sk span.language, .lang-sk span.language a {
    background-color: #f77;
    color: #478;
}
.lang-sl span.language, .lang-sl span.language a {
    background-color: #478;
    color: #f77;
}
.lang-sq span.language, .lang-sq span.language a {
    background-color: #f55;
    color: #000;
}
.lang-sv span.language, .lang-sv span.language a {
    background-color: #79c;
    color: #fd4;
}
.lang-th span.language, .lang-th span.language a {
    background-color: #f74;
    color: #eef;
}
/* Telugu: from flag of India */
.lang-te span.language, .lang-te span.language a {
    background-color: #f93;
    color: #33a;
}
.lang-tr span.language, .lang-tr span.language a {
    background-color: #f44;
    color: #fff;
}
.lang-uk span.language, .lang-uk span.language a {
    background-color: #469;
    color: #fd4;
}
.lang-ur span.language, .lang-ur span.language a {
    background-color: #151;
    color: #fff;
}
.lang-vi span.language, .lang-vi span.language a {
    background-color: #fff;
    color: #f93;
}
.lang-mul span.language, .lang-mul span.language a {
    background-color: #ff8;
    color: #000;
}

/* Not a language, but could indicate a link to another resource */
.lang-none span.language, .lang-none span.language a {
    background-color: #bdf;
    color: #000;
}

.nolink {
    font-family: monospace;
    font-size: 80%;
}