:root {
    --cellpadding: 0px 10px 0px 10px;
    --example-font-size: 18px;
    --body-font-size: 20px;
}

body {
    font-family: 'georgia';
    font-size: var(--body-font-size);
}

a:link,
a:visited {
    color: lightsteelblue;
    text-decoration: none;
}

a:hover,
a:active {
    color: snow;
}

/*
 * div that wraps modal content
 * (was originally a <p>, which
 * had its own margins, but changed
 * to <div> so can embed HTML)
 */
div.modal-content-main {
    margin: 18px 0px 18px 0px;
}

/**
 * main content
 */

.content-wrapper {
    margin-top: 80px;
    padding-left: 30px;
    padding-right: 30px;
}

#header {
    text-align: center;
    text-transform: uppercase;
    font-size: 30pt;
}

/**
 * navigation header
 */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: black;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 5px 0px 0px 0px;
}

.navbar a {
    border-radius: 15px 15px 0px 0px;
    font-size: 20px;
    text-align: center;
    border: 1px solid black;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar a.selected {
    border-bottom: 0px;
}


.navbar a:hover,
.dropdown:hover {
    background-color: #F73D4B;
}

/**
 * example sentences
 */

table.examples {
    border: 1px solid black;
    background-color: white;
    border-collapse: collapse;
}

table.examples th,
table.examples td {
    padding: var(--cellpadding);
    border: 1px solid black;
}

/**
 * cells IN ANY TABLE
 * containing example sentences
 * (right side of tables)
 */
table.examples td.sentence,
table#examples-main td.sentence {
    /** padding 0 IMPORTANT:
	 * some of these <td> have clickable <button>
	 * and some just <span>s (nom example setnences)
	 * need padding to be same for both. Doing this way:
	 * - setting padding 0 here,
	 * - padding (Desired padding) on <button>s
	 * - padding (Desired padding) on these <td> that DON'T
	 *   have button (have their own class)
	 * Reason doing it this way, instead
	 * of setting padding Desired here, then padding 0
	 * on child button, is because the buttons have
	 * boxshadow on hover, and if padding is set here and 0
	 * on buttons, they will hover strange.
	 * Additionally, can't do the box-shadow hover directly
	 * on the <td> to overcome that, because box-shadow
	 * hover has some weird behavior where it's obscured
	 * by surrounding <Td>s.
	 * Thus:
	 * 	- need same padding on <td>, regardless if has
	 * 	  <button> child (non-nom sentences),
	 * 	  or direct <span> children (nom sentence)
	 *  - for the cells with buttons,
	 *    want box shadow on hover, but can't do the
	 *    box-shadow on <td> as it gets obscured, and
	 *    on <button> it doesn,t, so the box shadow
	 *    hover has to be done on the <button>
	 *  - as a result, need padding: 0 on this <td>,
	 *    and put the padding on <button> (and <td>
	 *    without <buttons>)
	 *    else buttons will be padded and hover will
	 *    look strange
	 *
	 *   DO NOT JUST PUT BUTTONS IN ALL OF THEM, AND
	 *   DISABLE THOSE BUTTONS IN THE NOM CASE, BECAUSE
	 *   CURSOR WILL CHANGE, AND YOU WILL ALSO HAVE
	 *   TO STILL ADD CLASS TO INDICATE WHEN DISABLED
	 *   AS THEY WOULD STILL BE STYLED DIFFERENTLY (I.E.
	 *   NO BOX SHADOW ON HOVER, ETC.)
	 */
    padding: 0px;
    /** IMPORTANT! font-size: 0px is
	 * needed specifically for nom
	 * example sentences, which have
	 * <span> as direct children, rather
	 * than <button> with <span>s.
	 * This is 1/2 of strategy to remove
	 * space around those children <span>s
	 * (which would end up putting a space
	 * between noun root + declined part)
	 * - you set font-size 0 on <span>s DIRECT parent (this)
	 * - then set font-size on the <span>
	 * --> space eliminated
	 * https://stackoverflow.com/questions/25667401/how-to-remove-the-space-between-two-span-tags
	 */
    font-size: 0px;
}

/**
 * <td> with NOMINATIVE example sentences
 * (they don't have <button>, and just have
 * <span>s as direct children)
 */
table.examples td.sentence.no-btn,
table#examples-main td.sentence.no-btn {
    /** IMPORTANT to do padding here: see long comment above for why */
    padding: var(--cellpadding);
}

/**
 * <button> within the <td>s with example
 * sentences (only non-nominative sentences
 * have a button)
 */
td.sentence button {
    /** IMPORTANT to do padding here: see long comment above for why */
    padding: var(--cellpadding);
    border: 0px;
}

/**
 * add box shadow on hover of modal triggers
 */
td.sentence button:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6)
}

/** styling within modal trigger
 * buttons (right column of example
 * tables)
 */
td button.modal-triggers {
    display: inline-block;
    text-align: left;
    width: 100%;
    height: 100%;
    background-color: inherit;
    cursor: pointer;
    /** set font-size to 0 as strategy to remove
	 * space around <span> children of these buttons;
	 * you set font-size 0 on <span>s DIRECT parent
	 * (must be here, can't just be in td.sentence),
	 * then set font-size on the <span> and it eliminates the space
	 * https://stackoverflow.com/questions/25667401/how-to-remove-the-space-between-two-span-tags
	 */
    font-size: 0px;
}

/**
 * 		!! DO NOT REMOVE !!
 * This is the way to remove spacing around <span>
 * in example sentences that creates a space within
 * declined noun.
 *
 * 	- 1: you set font-size: 0 in DIRECT PARENT of <span>s
 * 	- 2: you set font-size: x in the spans
 */
td button.modal-triggers>span,
td.sentence>span {
    font-size: var(--example-font-size);
}

/**
 * styling for examples on the
 * left column of example tables
 * (not within buttons)
 * using flex to get rid of space
 * around <span> so that there's
 * no space within the nouns
 */
div.example {
    display: flex;
    font-size: var(--example-font-size);
}

div.example.dictionary {
    font-weight: normal;
}

tr.exception {
    font-style: italic;
}

span.example.dictionary.end {
    font-weight: bold;
    color: black;
}

span.end {
    font-weight: bold;
}

/**
 * examples in 'how to decline'
 * sections where you want just
 * the declined part of a noun
 * to be colored; setting font-size: 0
 * as way to remove spacing around
 * those two spans so that there's
 * no space within the noun
 */
p.example {
    font-size: 0;
    margin: 0;
}

/**
 * as a result of strategy above,
 * all strings must be in a <span>
 * and need to set font-size on them.
 * (else they won't show up as they
 * will have no font-size)
 */
p.example span {
    font-size: var(--body-font-size);
}

td.spelling {
    border: 3px solid black !important;
}

span.noun {
    font-weight: bold;
}

/**
 * table in examples.html
 * that contains all nouns
 */

table#examples-main {
    border: 1px solid black;
    background-color: white;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
}

table#examples-main th,
table#examples-main td {
    padding: var(--cellpadding);
    border: 1px solid black;
}

/**
 * filter on examples.html
 */
#noun-ending-wrapper-content {
    display: flex;
}

.noun-ending-inner {
    width: 20%
}

.checkbox-header {
    text-align: center;
    padding: 10px 0px 7px 0px;
}

#gender-set,
#case-set {
    display: flex;
}

#gender-set .wrapbox,
#case-set .wrapbox {
    padding-right: 10px;
}

/** expand/collapse all row */

tr#expand-collapse-all {
    background-color: darkblue;
    color: white;
    font-style: italic;
    font-size: 14px;
}

tr#expand-collapse-all td,
tr#expand-collapse-all th {
    padding: 10px;
}