/*
CSS EXPLANATIONS

margin: spacing around the outside of an element.
 4 values = top right bottom left.
 3 values = top left+right bottom.
 2 values = top+bottom left+right.
 If both left and right have a value of auto,
 then the element is centered horizontally.
*/

@import url("reset.29df1f523ad2.css");
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:regular,bold);


/*  Custom properties
    https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
................................... */

:root {
    --main-font: 'Droid Sans', helvetica, arial, Geneva, sans-serif;
}

/* Light/default color scheme. */
html {
    --text-color: hsl(0, 0%, 25%);
    --text-shadow-color: white;
    --outer-background-color: hsl(27, 18%, 90%);
    --background-color: hsl(30, 18%, 95%);

    --heading-color-soft: hsl(0, 0%, 45%);
    --heading-underline-color-soft: hsl(0, 0%, 88%);
    --heading-color-bold: hsl(0, 0%, 35%);
    --heading-underline-color-bold: hsl(0, 0%, 70%);
    --link-color: hsl(6, 100%, 27%);
    --link-hover-color: hsl(6, 90%, 40%);
    --container-shadow-color: hsl(0, 0%, 60%);
    --content-box-color: hsl(30, 10%, 85%);
    --faint-hr-color: hsl(0, 0%, 87%);

    --field-text-color: hsl(0, 0%, 10%);
    --field-background-color: hsl(0, 0%, 100%);
    --field-border-color: hsl(0, 0%, 80%);
    --field-border-focus-color: hsl(0, 0%, 20%);
    --button-background-color: hsl(0, 0%, 90%);
    --button-background-hover-color: hsl(0, 0%, 80%);
    --button-background-active-color: hsl(0, 0%, 70%);
    --button-border-color: hsl(0, 0%, 60%);
    /* Ideally, this should not blend with the background too much, while also
       looking OK alongside Firefox's non-overrideable <option> hover color of
       light gray. */
    --select-background-color: hsl(0, 0%, 93%);
    --select-background-active-color: hsl(0, 0%, 80%);

    --nav-button-text-color: hsl(0, 0%, 40%);
    --nav-button-gradient-color-1: hsl(0, 0%, 100%, 85%);
    --nav-button-gradient-color-2: hsl(0, 0%, 100%, 55%);
    --nav-button-base-color: hsl(0, 0%, 70%);
    --nav-button-base-hover-color: hsl(0, 0%, 88%);
    --nav-button-prominent-color: hsl(0, 31%, 68%);
    --nav-button-prominent-hover-color: hsl(0, 55%, 66%);
    --nav-button-profile-color: hsl(60, 41%, 65%);
    --nav-button-profile-hover-color: hsl(60, 61%, 63%);
    --nav-button-source-color: hsl(240, 31%, 68%);
    --nav-button-source-hover-color: hsl(240, 55%, 66%);
    --nav-button-image-color: hsl(120, 31%, 68%);
    --nav-button-image-hover-color: hsl(120, 55%, 66%);

    /* Make dialogs faintly transparent; useful when the dialog is talking
     about some page content that it's sitting on top of */
    --dialog-background-color: hsl(30, 18%, 95%, 90%);
    /* We don't need the dialog transparency for forms, though. And it makes
     form fields look weird (at least on the Add/Remove Labels page) */
    --dialog-form-background-color: hsl(30, 18%, 95%);

    --kbd-background-color: hsl(0, 0%, 87%);

    --top-message-outer-background-color: hsl(0, 0%, 7%);
    --top-message-normal-background-color: hsl(48, 86%, 92%);
    --top-message-maintenance-background-color: hsl(0, 100%, 90%);
    --top-message-border: white;

    --status-color-pending: hsl(240, 60%, 83%);
    --status-color-in-progress: hsl(60, 60%, 83%);
    --status-color-done: hsl(120, 60%, 83%);
    --status-color-failure: hsl(0, 60%, 83%);
}
/* Dark color scheme. */
html.dark-scheme {
    --text-color: hsl(0, 0%, 75%);
    --text-shadow-color: black;
    --outer-background-color: hsl(27, 18%, 10%);
    --background-color: hsl(210, 5%, 15%);

    --heading-color-soft: hsl(0, 0%, 55%);
    --heading-underline-color-soft: hsl(0, 0%, 18%);
    --heading-color-bold: hsl(0, 0%, 65%);
    --heading-underline-color-bold: hsl(0, 0%, 35%);
    --link-color: hsl(200, 75%, 65%);
    --link-hover-color: hsl(200, 85%, 55%);
    --container-shadow-color: hsl(0, 0%, 60%);
    --content-box-color: hsl(210, 5%, 25%);
    --faint-hr-color: hsl(0, 0%, 25%);

    --field-text-color: hsl(0, 0%, 75%);
    --field-background-color: hsl(210, 15%, 5%);
    --field-border-color: hsl(0, 0%, 20%);
    --field-border-focus-color: hsl(0, 0%, 80%);
    --button-background-color: hsl(0, 0%, 30%);
    --button-background-hover-color: hsl(0, 0%, 40%);
    --button-background-active-color: hsl(0, 0%, 50%);
    --button-border-color: hsl(0, 0%, 50%);
    --select-background-color: hsl(0, 0%, 7%);
    --select-background-active-color: hsl(0, 0%, 20%);

    --nav-button-text-color: hsl(0, 0%, 65%);
    --nav-button-gradient-color-1: hsl(0, 0%, 100%, 25%);
    --nav-button-gradient-color-2: hsl(0, 0%, 100%, 5%);
    --nav-button-base-color: hsl(0, 0%, 20%);
    --nav-button-base-hover-color: hsl(0, 0%, 25%);
    --nav-button-prominent-color: hsl(0, 60%, 20%);
    --nav-button-prominent-hover-color: hsl(0, 60%, 25%);
    --nav-button-profile-color: hsl(60, 60%, 20%);
    --nav-button-profile-hover-color: hsl(60, 60%, 25%);
    --nav-button-source-color: hsl(240, 30%, 20%);
    --nav-button-source-hover-color: hsl(240, 30%, 25%);
    --nav-button-image-color: hsl(120, 30%, 20%);
    --nav-button-image-hover-color: hsl(120, 30%, 25%);

    --dialog-background-color: hsl(210, 5%, 15%, 95%);
    --dialog-form-background-color: hsl(210, 5%, 15%);

    --kbd-background-color: hsl(0, 0%, 25%);

    --top-message-outer-background-color: hsl(0, 0%, 30%);
    --top-message-normal-background-color: hsl(48, 50%, 30%);
    --top-message-maintenance-background-color: hsl(0, 100%, 15%);
    --top-message-border: black;

    --status-color-pending: hsl(240, 60%, 20%);
    --status-color-in-progress: hsl(60, 60%, 20%);
    --status-color-done: hsl(120, 60%, 20%);
    --status-color-failure: hsl(0, 60%, 20%);
}


/*	Main elements
................................... */

html, body {
    color: var(--text-color);
    font-family: var(--main-font);
    background-color: var(--outer-background-color);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#container {
    width: 1008px;
    margin: 30px auto 50px;
    border-radius: 8px;
    box-shadow: 0 0 3px var(--container-shadow-color);
	background-color: var(--background-color);
	border: 1px solid transparent;
	padding: 0 10px;
}

#content-container {
    padding: 12px;
    position: relative;
}


/*	Navigation bars
................................... */

div.nav_container {
    margin: 20px;
    position: relative;
    height: 40px;
}

ul.nav {
    position: absolute;
    overflow: auto;
    display: flex;
}
ul.nav_left {
    left: 0;
}
ul.nav_right {
    right: 0;
}

ul.nav > li {
    /* Don't word wrap */
    flex-shrink: 0;

    margin: 0 5px;
}

ul.nav > li > a,
ul.nav > li > form {
    background-color: var(--nav-button-base-color);
    display: block;
    /* The padding adds shadow around each button;
       it also expands the button's clickable area */
    padding: 1px 4px 4px 1px;
    border-radius: 10px;

    /* Styling the form like a link */
    margin: 0;
    width: auto;
    cursor: pointer;
}
ul.nav > li > :active {
    /* Shift position like a pressed button */
    padding: 3px 2px 2px 3px;
}

/* This is for the stuff within a button (background and text) */
ul.nav > li span,
ul.nav > li button {
    display: block;
    color: var(--nav-button-text-color);
    padding: 0.5em 1.4em;
    border-radius: 7px;
    background: linear-gradient(
      to bottom,
      var(--nav-button-gradient-color-1),
      var(--nav-button-gradient-color-2)
    );
    text-decoration: none;
    font-size: .9em;
    line-height: 1.4em;
    font-weight: bold;

    /* Style resetting for button */
    border: 0;
    font-family: inherit;
    cursor: inherit;
}

ul.nav > li > a:hover > span,
ul.nav > li > a:active > span,
ul.nav > li > form:hover > button,
ul.nav > li > form:active > button {
    background-color: var(--nav-button-base-hover-color);
}

ul.nav li.button_prominent a {
    background-color: var(--nav-button-prominent-color);
}
ul.nav li.button_prominent a:hover span,
ul.nav li.button_prominent a:active span {
    background-color: var(--nav-button-prominent-hover-color);
}

#nav_profile li a {
    background-color: var(--nav-button-profile-color);
}
#nav_profile li a:hover span,
#nav_profile li a:active span {
    background-color: var(--nav-button-profile-hover-color);
}


/*	Type
................................... */

h1, h2, h3, h4, h5, h6, div.tool-heading {
    font-family: var(--main-font);
    text-transform: uppercase;
}

p {
    font-size: 1.0em;
    line-height: 1.5em;
    margin: 0 0 0.9em 0;
    text-shadow: var(--text-shadow-color) 1px 1px 0;
}

/* This is kind of like <p> in that it stylistically functions to add
  some top/bottom margins. But this is more flexible than p; for example,
  p cannot contain div, but div can contain almost anything. */
div.line {
    margin: 0.5em 0;  /* top/bottom left/right */
}

div.narrow_column {
    width: 800px;
    margin: 0 auto;  /* top/bottom left/right */
}

div.page-section {
    margin: 20px 0;  /* top/bottom left/right */
    padding: 0;

    width: auto;
}

/* This can work similarly to h2 etc., while being more flexible. */
div.tool-heading {
    color: var(--heading-color-soft);
    font-size: 1.4em;
    font-weight: bold;
    padding: 5px 0;
    border-bottom: 1px solid var(--heading-underline-color-soft);
    margin-bottom: 5px;
}

h1{
    font-size: 2.2em;
    margin-bottom: 0.6em;
}

h2{
    font-size: 1.4em;
    margin-bottom: 1.0em;
}

h3{
    font-size: 1.2em;
    margin: 0 0 5px;
}

h4{
    font-size: 1.2em;
}

h5{
    font-size: 1.0em;
}

h6{
    font-size: 0.7em;
}

a {
    color: var(--link-color);
    text-decoration: none;
}
a:hover {
    color: var(--link-hover-color);
}
a.prominent {
    font-size: 1.2em;
}


hr.light {
    background-color: var(--faint-hr-color);
    border: none;
    height: 2px;
}

hr.narrow {
    margin: 2px 0;
}

dl {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
}
dt {
    display: block;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}
dd {
    display: block;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: 40px;
}
/* Nested lists have smaller top/bottom margins. */
:is(ul, ol, dir, menu, dl) dl {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

table.generic {
    border: 1px solid #999999;
    /* Firefox seems to make border widths inconsistent
     if border-collapse: collapse */
    border-collapse: separate;
    margin: 5px;
}
table.generic th,
table.generic td {
    border: 1px solid #999999;
    padding: 5px;
}

/* Styling to indicate keyboard keys */
kbd {
    font: inherit;    /* No monospaced font, just the usual font */
    font-size: 0.9em;
    line-height: 1.4em;
    padding: 0 2px;    /* 2px of horizontal padding */
    background-color: var(--kbd-background-color);

    border: 1px solid black;
    border-radius: 3px;
}

sub {
    vertical-align: sub;
    font-size: smaller;
}
sup {
    vertical-align: super;
    font-size: smaller;
}

.tooltip {
    cursor: help;
}


/*	Forms
................................... */

form {
    margin: 15px auto 20px;
    padding: 12px 0;
    width: 800px;
}

/* The element around the whole form field, containing the label, field, helptext, and errors. */
form p, .form_item_wrapper {
    padding: 3px 0;  /* vertical horizontal*/
    margin: 0;
    overflow: auto;  /* This allows the element to expand for multi-line labels and such */
}

/* We're slowly porting all <form> elements to not have padding, margin, etc.
 of their own, leaving that to an outer or inner div instead. This is a
 transitional class to use until all forms are like this. */
form.no-padding {
    margin: 0;
    padding: 0;
    width: auto;
}

label {
    font-size: 1.0em;
}

label.column_form_text_field {
    /* inline allows another element to sit to the right of
       this element, and block allows this element to have margins. */
    display: inline-block;
    /* Defining a set width allows all field labels to sit in one "column"
       in the form.  Then we can align the label text to the right side
       of that column. */
    text-align: right;
    width: 250px;

    /* Put the label at the correct vertical alignment (ugh)... */
    vertical-align: top;
    margin-top: 6px;
}

label.grid_checkbox {
    display: inline-block;
    width: 150px;
}


.field_wrapper {
    display: inline-block;
}

/* Checkbox field wrappers contain the checkbox and the label. */

.checkbox_field_wrapper {
    /* Indent by the same amount as a text field's label width */
    margin-left: 250px;
}
.grid_checkbox_field_wrapper {
    /* In an 800-px-wide form, this will create 4 columns of checkboxes. */
    display: inline-block;
    width: 190px;

    /* Separate rows of checkboxes a bit, so that multi-line labels
     * don't run so close to the label of the next row */
    margin: 3px 0;    /* top/bottom left/right */
}

input[type=text], input[type=number], input[type=email], input[type=url],
input[type=password], input[type=file], textarea, span.editable {
    border: 1px solid var(--field-border-color);
    display: inline-block;
    padding: 3px 5px 4px;    /* top left/right bottom */
    border-radius: 3px;
    
    font-size: 0.9em;
    color: var(--field-text-color);
    background-color: var(--field-background-color);
}

input[type=checkbox] {
    padding: 14px 0;
}

input[hidden] {
    /* Since a display was specified for various inputs above, we must
       specify that when such an input gets the hidden attribute, it
       shouldn't be displayed. */
    display: none;
}

/* Dropdown box */
select {
    min-width: 60px;
    margin: 5px 0;    /* top/bottom left/right */

    font-size: 0.9em;
}

button,
select {
    color: var(--field-text-color);
    border: 1px solid var(--button-border-color);
    border-radius: 4px;
    padding: 2px 5px;
}
button {
    background-color: var(--button-background-color);
}
select {
    background-color: var(--select-background-color);
}
button:hover {
    background-color: var(--button-background-hover-color);
}
select:hover {
    /* Defining a background-color here doesn't work well since it makes the
       options look weird, so we use a border color instead. */
    border-color: var(--field-border-focus-color);
}
button:active {
    background-color: var(--button-background-active-color);
}
select:active {
    background-color: var(--select-background-active-color);
}

input:focus,
textarea:focus,
span.editable:focus {
    outline: none;
    border: 1px solid var(--field-border-focus-color);
}

/* Multiline text field */
textarea {
    width: 300px;
    height: 8em;

    margin: 3px 0;    /* top/bottom left/right */
}
textarea.large {
    width: 400px;
    height: 16em;
}

/* TODO: Add the 'red' class to all of the site's standard-styled submit
    buttons, and then make the below rules apply only to 'red'. That way,
    the other submit button styles don't have to reset all of these
    rules. */
input[type=submit], button.submit,
input[type=submit].red, button.submit.red {
    height: 35px;
    display: inline;
    line-height: 34px;
    padding: 0 10px;
    margin-top: 4px;
    min-width: 150px;
    background-color: #ab292a;
    border-radius: 3px;
    border: 1px outset #ce3024;
    color: #f9f9f9;
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: bold;
    text-shadow: #5e98bd 0 -1px 0;
    text-align: center;
    cursor: pointer;
    font-family: var(--main-font);
}

input[type=submit]:active, button.submit:active,
input[type=submit].red:active, button.submit.red:active {
    line-height: 36px;  /* Intended effect is to make the button move a bit as you click it.  May not work the same in FF and Chrome though. */
    background-color: #bd302d;
    border: 1px inset #ce3024;
}

input[type=submit][disabled], button.submit[disabled],
input[type=submit][disabled].red, button.submit[disabled].red {
    line-height: 34px;
    background-color: #666666;
    color: #9f9f9f;
    border: 1px outset #888888;
    cursor: default;
}
/* Don't define a [disabled]:active style, so the disabled submit button doesn't change appearance when you click it */

input[type=submit].link {
    /* Make these input elements look like links. */
    background: none;
    color: var(--link-color);
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-shadow: none;

    min-width: inherit;
    height: inherit;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}


/* Wrap one or multiple submit buttons of a form. */

.submit_button_wrapper_column_form {
    /* Form where the labels are on the left column and fields are
     * on the right column.
     * Line this up with the fields... */
    margin-left: 254px;
}
.submit_button_wrapper_center {
    /* The buttons go in the center. */
    text-align: center;
}

/* Field errors.  "This field is required", etc. */
ul.errorlist {
    background-color: #fedae0;
    color: #a3181c;
    margin: 3px 0 3px 0;    /* top right bottom left */
    display: inline-block;
    border-radius: 4px;
}
ul.errorlist li {
    font-size: 0.8em;
    font-weight: bold;
    padding: 5px 5px 4px 5px;
    max-width: 250px;
}

.errorlist_wrapper {
    
}

.tutorial-message {
    /* Starts out hidden, and can be shown via Javascript
       when the user clicks a button. */
    display: none;
}
img.help-button {
    display: inline;
    cursor: pointer;
}


/* Special cases */

/* Table rows that can be clicked to toggle form values, like checkboxes.
   Used in the labelset form. */
.checkbox_row td.clickable_cell{
    cursor: pointer;
}
.checkbox_row.selected td.clickable_cell{
    background-color: #bbbbdd;
}
.checkbox_row.selected.disabled td.clickable_cell{
    cursor: default;
    background-color: #aaaaaa;
}


/*  pagination
....................................*/


div.pagination-links {
    display: flex;
}

/* Previous/Next page links. */
a.prev-next-page{
    /* Make these elements look roughly like buttons. */
    background: hsl(0, 0%, 80%);
    color: inherit;

    border-radius: 3px;
    padding: 0 3px;
    margin: 0 5px;
}


/*	footer
................................... */ 
#footer{
    background: url("../img/stripe.7f6764e9c26c.png") repeat-x center top;
    padding-top: 5px;
}

#footer p{
    font-size: 0.7em;
    margin-bottom: 0.5em;
}   

#footer p a{
	font-weight: bold;
}


/*	notifications
................................... */

#top{
    background-color: var(--top-message-outer-background-color);
    border-bottom: 1px solid var(--top-message-border);
}

ul.messages{
    font-size: 0.8em;
    font-weight: bold;
    width: 540px;
    margin: 0 auto;  /* vertical horizontal */
}

ul.messages li{
    background-color: var(--top-message-normal-background-color);
    border-radius: 20px;
    padding: 4px 20px;
    text-align: center;
}

div.maintenance_message {
    background-color: var(--top-message-maintenance-background-color);

    width: 540px;
    margin: 0 auto;  /* vertical horizontal */
    padding: 4px 20px;

    font-size: 0.9em;
}


/*	object list / detail pages
................................... */

/* A list of details (e.g. name, age...) */
ul.detail_list li {
    line-height: 1.8em;
}
ul.detail_list li ul{
    list-style: disc;
    padding-left: 2em;
}
/* Multiple lists of details in succession */
div.details ul {
    margin: 25px 0;    /* top/bottom left/right */
}
div.details ul li {
    line-height: 1.8em;
}

/* A list of objects (e.g. source 1, source 2...) */
ul.object_list li {
    line-height: 1.5em;
}

/* Table details
 * (label list page) */
table.detail_table {
    border: 1px solid #999999;
    border-collapse: separate;  /* Firefox seems to make border widths inconsistent if border-collapse: collapse */
}
table.detail_table th,
table.detail_table td {
    border: 1px solid #999999;
    padding: 5px;
}

table.detail_table_scroll {
    display: block;
    border-collapse: separate;  /* Firefox seems to make border widths inconsistent if border-collapse: collapse */
    max-height: 400px;
    overflow-y: scroll;
}
table.detail_table_scroll th,
table.detail_table_scroll td {
    border: 1px solid #999999;
    padding: 5px;
}


table.detail_table.horizontal {
    border: none;
    display: inline-block;
}
table.detail_table.horizontal th,
table.detail_table.horizontal td {
    border: none;
    padding: 3px 5px;  /* vertical horizontal */
}

/* Table details popup
 * (used in confusion matrix pop-ups) */
table.detail_table_popup {
    border: 1px solid #999999;
    border-collapse: separate;  /* Firefox seems to make border widths inconsistent if border-collapse: collapse */
    table-layout: fixed;
}
table.detail_table_popup th,
table.detail_table_popup td {
    border: 1px solid #999999;
    padding: 5px;
    white-space: nowrap;
}

table.detail_table_popup.horizontal {
    border: none;
    display: inline-block;
}
table.detail_table_popup.horizontal th,
table.detail_table_popup.horizontal td {
    border: none;
    padding: 3px 5px;  /* vertical horizontal */
}

/* Newsfeed messages may contain lists. Style these similarly to lists in
 * articles. */
table.newsfeed_table ul {
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 2em;
}
table.newsfeed_table ul li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}


/* thumbnails and thumbnail wrappers
................................... */

span.thumb_wrapper {
    display: inline-block;  /* Allow putting elements side by side + allow block properties like padding, width */
    text-align: center;  /* Horizontally center the element within */

    width: 158px;  /* 150px for the image, 4px+4px for the image border */
    padding: 11px;  /* Total width of 158px+11px+11px = 180px */

    /* Effective height of <max image height in row, including border>+11px+11px */
}

span.thumb_large_wrapper {
    display: inline-block;
    text-align: center;

    width: 300px;
    padding: 12px; /* Total width of 300px+12px+12px = 324px */

    /* Effective height of <max image height in row, including border>+12px+12px */
}

span.thumb_front_wrapper {
    display: inline-block;
    text-align: center;

    height: 230px;
    padding: 0px 0px 20px;

}

img.thumb {
    vertical-align: middle;
}

img.thumb_small {
    vertical-align: middle;  /* This works as long as the thumbnail isn't in a wrapper element... */
}


/* articles: blog posts, help dialogs, etc.
................................... */

div.article-body {
    line-height: 1.4em;
}

div.article-body ul {
    /* disc is the W3-standard default */
    list-style-type: disc;
    /* If the list item has multiple lines, this makes all the lines start
       at the same horizontal position, NOT counting the disc */
    list-style-position: outside;
    /* Indentation. This matches GitHub. For comparison, Wikipedia uses
       1.6em of left margin. */
    padding-left: 2em;
}
div.article-body ul li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

div.article-body h1, div.article-body h2,
div.article-body h3, div.article-body h4 {
    margin-top: 1em;
    margin-bottom: 1em;
}

div.article-body p {
    line-height: 1.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

div.article-body table {
    border: 1px solid #999999;
    /* Firefox seems to make border widths inconsistent
     if border-collapse: collapse */
    border-collapse: separate;
    margin: 5px;
}
div.article-body table th,
div.article-body table td {
    border: 1px solid #999999;
    padding: 5px;
}

div.article-body img {
    /* Add a border around images by default. In site articles, many
       of these images are site screenshots, whose backgrounds would
       blend in with the article background if there were no border. */
    border: 2px solid #ccc;
}
div.article-body img[alt$="icon"] {
    /* Do not add a border around images whose alt attribute ends with
       'icon'. In some cases we'll add a site icon in-line when explaining
       something. A border can cause confusion in this case, making people
       think the border is part of the icon.

       The reason we detect icons from alt text, rather than from CSS
       class, is that it's not always convenient to specify CSS classes
       when writing Markdown (this requires specifying the image using HTML
       rather than using Markdown syntax). */
    border: none;
}