/* a potential color scheme (colormind.io)

F9C412 (built-in bahunya buttons)
70B83D greenish
F2512C orangish
D32A31 reddish
097477 gross
056F7F slatish
26944A another green
1E9748 another green
2BC1A7 teal
*/

.revealer { display: none; } /* see revealer.js */

img.identicon {
    margin: 0; /* theme puts auto on img */
    width: 4em;
}

section {
    width: auto; /* TODO(dnc): fix issue in ncase-theme.css */
}
section section {width: 100%;}

.border { border: .2rem solid #202020; } /* TODO(dnc): expose something like this in theme css */

/* svg icon before page title */
header h1 img, header h2 img {
    /* filter: invert(84%) sepia(100%) saturate(0%) hue-rotate(8deg) brightness(107%) contrast(102%); /* white */
    display: inline-block;
    vertical-align: sub;
    height: 1.618em;
    max-width: 100%;
    padding: 0;
}

header h1 {
    text-transform: uppercase;
}

header img {
    filter: invert(100%); /* white on black icons */
}
nav img {
    filter: invert(0%); /* black on white icons */
}
nav {z-index: 99;}

.clear { clear: both; }

.column, .hcenter {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

/* .hcenter > * {display:block;}*/

.row, .vcenter {
    display: flex;
    align-items: center;
}

.spacearound { justify-content: space-around; }
.spacebetween { justify-content: space-between; }
.spaced, .spaceevenly { justify-content: space-evenly; }

/* header h2 { font-style: normal; } */

footer ul {
    list-style: none;
}
footer ul li {
    display: inline-block;
    margin: 0 1.0rem;
}

/* https://stackoverflow.com/questions/31140935/how-do-i-add-vertical-line-on-my-menu-item-in-html-css */
footer nav a:not(:last-child):after {
    content: "|";
}

button {
    /* padding: 1.0ex; */
    display: flex;
    align-items: center;
}

fieldset {
    margin: 0 1em 1em 0;
}

/* icons describing form fields */
form .icon {
    /*filter: invert(84%) sepia(100%) saturate(0%) hue-rotate(8deg) brightness(107%) contrast(102%); /* white */
    filter: invert(100%);
    /*float: left;*/
    /*display: inline-block; */
    width: 8rem;
    margin: 0 1rem 1rem 0;
}

button.bigger {
    padding: 1.5ex;
    font-style: italic;
    /* text-decoration: underline;*/
}
/* smaller buttons for inline links */
button.smaller {
    padding: 1ex;
    margin: 1ex 1ex;
}
button.smaller .icon {
    max-width: 1em;
}

.smaller { font-size: smaller; }

button .icon {
    display: inline-block;
    filter: invert(0%);
    max-width: 100% !important;
    vertical-align: middle;
    padding: 0 !important;
    margin: 0.0ex 1.0ex;
    height: 2em;
    width: auto;
}

button.bigger {
    display: block;
}

button.bigger img {
    height: 3em;
    margin: 0.5ex 0.0ex;
    display: block;
}


.brand {
    /*font-variant: small-caps;*/
    font-weight: bolder;
}

.centerXXX {
    margin: auto;
    width: 50%;
}

/* icons small on mobile browsers */
imgXXX {
    max-width: 100%;
    height: auto;
    padding: 1ex;
}

td img { padding: 0; }

header img XXX {
    height: auto;
    /* margin-top: -60px; /* TODO(dnc): fix kludgy styles */
}

header nav img, header h2 imgXXX {
    padding: 0;
    margin: 0;
    vertical-align: sub; /* icons in header nav alongside text */
}

table.layout {
    max-width: 100%;
    table-layout: fixed;
}

table.layout textarea { max-width: 100%; }
/*button { max-width: 20%; }*/

table tr td, table tr th {vertical-align: middle;}
table tr th {text-align: center;}

.sansfrontiers td { border: none; }

form div { width: 100%; }

form fieldset div.error {
    /* margin-top: -1.5em;*/
}

/* we put small tags after form elements, but ncase-theme adds margin bottom to those elements*/
input+small, select+small, textarea+small {
    margin-top: -1.5em;
}

div.error, .error {
    color: orangered;
    font-style: italic;
    font-weight: bold;
}

textarea.error, form input.error, select.error {
    border: .15em solid orangered !important;
}

fieldset table tr td {
    border: none;
    border-bottom: none;
}

table td input {
    margin-bottom: 0em;
}

/* hide items that should appear only when JS is enabled and shows them */
.hidden { display: none; }
.template { display: none; }

.whenAuthSignedIn, .whenAuthSignedOut { display: none !important; }
.whenJavaScriptEnabled {display: none !important; }

/* https://stackoverflow.com/questions/43806515/position-svg-elements-over-an-image/43806724 */
.img-overlay-wrap {
  position: relative;
  display: inline-block; /* <= shrinks container to image size */
  /*transition: transform 150ms ease-in-out;*/
}

.img-overlay-wrap img { /* <= optional, for responsiveness */
   display: block;
   /* max-width: 100%;
   height: auto;*/
}

.img-overlay-wrap .overlay, .img-overlay-wrap .underlay {
  position: absolute;
  top: 0;
  left: 0;
}

.underlay { z-index: -1; }

.box-overlay-wrap img.identicon {
    padding: 20px;
    transform: skewY(30deg); /* cube effect */
    margin-left: -12px;
    margin-top: 4px;
    padding-top: 26px;
}


td {
    text-align: center;
    vertical-align: middle;
}

/* experiment forms no text only images */
/*fieldset label, fieldset small { display: none; }*/
table.layout img {max-width: none;} /* prevent icon shrink */


table.layout tr td {
    border: none;
    text-align: center;
    vertical-align: middle;
}

table tr.compact td, td.compact {
    padding: 0;
}

table td button {
    margin: 0;
}




pre {text-align: left;}

/* disappear on small screens */
@media(max-width:64em) {
    header img {
	max-width: 64px;
	padding: 0;
    }
    .verbose {font-size: 66%;}
    img.verbose {max-width: 50%;}
}

@media(max-width:32em) {
    header img, form img {
	max-width: 33%;
	padding: 0;
    }

    .verbose {display: none;}
}



textarea {width:100%;}

/* allow some image to shrink on small display */
form div imgX { max-width: 20%; }


/* https://stackoverflow.com/questions/35529599/make-text-more-selectable */
.magiccodewrap, .transportCodeWrap {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;
}

.magiccode, .transportCode {
    -webkit-user-select: all;  /* Chrome all / Safari all */
    -moz-user-select: all;     /* Firefox all */
    -ms-user-select: all;      /* IE 10+ */
    user-select: all;

    font-weight: bolder;
}

/* https://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width-without-overflowing-when-padding-is-present */
.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}