/*
 * Copyright (c) 2017-2020 XMLmind Software. All rights reserved.
 *
 * This file is part of the XMLmind XML Editor project.
 * For conditions of distribution and use, see the accompanying legal.txt file.
 *
 * ``Semantic'' CSS styles adapted to editing XHTML 1.0, 1.1 or 5.0 
 * in XMLmind XML Editor.
 */

@import url(xhtml_base.imp);
@import url(xxe-config:common/css/xhtml_table.imp);

/* Do not report an error if the "MathML support" add-on 
   has not been installed. */
@import url(---mathml-config:xhtml5/mathml_support.imp);

/* Document metadata ====================================================== */

head {
    collapsible: yes;
    collapsed-content: text(xpath("html:title"),
                            font-weight, bold,
                            font-size, small,
                            color, #606040);
    collapsed-content-align: center;
    collapsed: no;
    margin-left: 20px;
}

head:before {
    display: marker;
    content: collapser();
}

/* Sections =============================================================== */

article {
    border: 1px solid #E0E0E0;
    border-radius: 0.5em;
    background-color: #FAFAFA;
    padding: 0.5em;
    margin: 1em 0;
}

aside {
    border: 1px solid #E0F0E0;
    border-radius: 0 0.5em 0.5em 0;
    background-color: #F0FFF0;
    padding: 0.5em;
    margin: 1em 0;
}

nav {
    border: 1px solid #D0D0EE;
    border-radius: 0.5em;
    background-color: #F0F0FF;
    padding: 0.5em;
    margin: 1em 0;
}

header,
footer {
    border: 2px solid;
    border-radius: 0.5em;
    border-right-color: #E0E8EE;
    border-left-color: #F4FAFF;
    background-color: #F4FAFF;
    padding: 0.5em;
}

header {
    border-top-color: #F4FAFF;
    border-bottom-color: #E0E8EE;
    margin-bottom: 1em;
}

footer {
    border-bottom-color: #F4FAFF;
    border-top-color: #E0E8EE;
    margin-top: 1em;
}

h1, 
h2, 
h3, 
h4, 
h5,
h6 {
    color: #206080;
}

hgroup {
    border-bottom: 2px solid #206080;
    background-color: #EDF7FC;
    margin: 1em 0;
}

hgroup > *:first-child {
    margin-top: 0;
}

hgroup > *:last-child {
    margin-bottom: 0;
}

address {
    margin: 1em 0;
}

article,
aside,
section {
    collapsible: yes;
    not-collapsible-head: 1;
}

article > h1:first-child:before,
article > h2:first-child:before,
article > h3:first-child:before,
article > h4:first-child:before,
article > h5:first-child:before,
article > h6:first-child:before,
article > hgroup:first-child > h1:first-child:before,
article > hgroup:first-child > h2:first-child:before,
article > hgroup:first-child > h3:first-child:before,
article > hgroup:first-child > h4:first-child:before,
article > hgroup:first-child > h5:first-child:before,
article > hgroup:first-child > h6:first-child:before,
aside > h1:first-child:before,
aside > h2:first-child:before,
aside > h3:first-child:before,
aside > h4:first-child:before,
aside > h5:first-child:before,
aside > h6:first-child:before,
aside > hgroup:first-child > h1:first-child:before,
aside > hgroup:first-child > h2:first-child:before,
aside > hgroup:first-child > h3:first-child:before,
aside > hgroup:first-child > h4:first-child:before,
aside > hgroup:first-child > h5:first-child:before,
aside > hgroup:first-child > h6:first-child:before,
section > h1:first-child:before,
section > h2:first-child:before,
section > h3:first-child:before,
section > h4:first-child:before,
section > h5:first-child:before,
section > h6:first-child:before,
section > hgroup:first-child > h1:first-child:before,
section > hgroup:first-child > h2:first-child:before,
section > hgroup:first-child > h3:first-child:before,
section > hgroup:first-child > h4:first-child:before,
section > hgroup:first-child > h5:first-child:before,
section > hgroup:first-child > h6:first-child:before { 
    content: collapser() " ";
}

/* Grouping content ======================================================= */

hr {
    border: 2px inset gray;
    margin-left: 0; /* Not auto. */
    margin-right: 0;
}

pre { 
    background-color: #F0F0F0;
    border: 1px solid #E0E0E0;
    padding: 0.25em;
}

/*
 * Useful for XHTML 1.0 Strict and XHTML 1.1 which have discarded
 * ol/@type (and ol/@start).
 */

ol[style*="decimal"] {
    list-style-type: decimal;
}

ol[style*="lower-alpha"],
ol[style*="lower-latin"] {
    list-style-type: lower-alpha;
}

ol[style*="upper-alpha"],
ol[style*="upper-latin"] {
    list-style-type: upper-alpha;
}

ol[style*="lower-roman"] {
    list-style-type: lower-roman;
}

ol[style*="upper-roman"] {
    list-style-type: upper-roman;
}

li {
    margin-top: 1em;
    margin-bottom: 1em;
}

dl {
    margin-left: 2ex;
}

dt {
    font-weight: bold; 
}

dd { 
    display: block;
    margin-bottom: 1em;
}

dd > *:first-child {
    margin-top: 0;
}

figcaption {
    font-style: italic;
    margin-left: 2em;
    margin-right: 2em;
}

figcaption:first-child {
    margin-bottom: 0.5em;
}

figcaption:last-child {
    margin-top: 0.5em;
}

/* Text-level semantics =================================================== */

q:before,
q:after {
    font-weight: bold;
    color: gray;
}

dfn {
    display: inline-block;
    padding: 1;
    border-bottom: dotted;
}

abbr, 
acronym { 
    font-weight: bold;
}

data[value]:after,
time[datetime]:after {
    display: inline;
    color: gray;
    font-size: smaller;
    font-style: normal;
    font-weight: normal;
}

data[value]:after {
    content: " [" attr(value) "]";
}

time[datetime]:after {
    content: " [" attr(datetime) "]";
}

var {
    font-family: monospace;
}

samp {
    background-color: #F0F0FF;
}

kbd {
    background-color: #E0FFE0;
}

a[name]:not([href]):after,
a[id]:not([href]):after { 
    color: gray;
    content: icon(right-target, 0); 
    vertical-align: text-top;
}

a[target="_blank"]:after {
    content: icon(new-window, 0); 
}

a[name][href="???"]:after,
a[id][href="???"]:after,
a[target][href="???"]:after,
a[rel][href="???"]:after,
a[href="???"]:after {
    content: icon(right-link, 0) "???";
    font-size: smaller;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
}

/* Embedded content ======================================================= */

img[width="0"][height="0"] {
    display: inline;
    content: "(hidden " image(attr(src), -32, -32, smooth) " )";
    font-size: small;
    color: gray;
}

picture {
    display: inline-block; 
    property-group: object-properties(#F0E0D0);
    collapsed: yes;
}

embed {
    display: inline-block; 
    property-group: object-properties(#F0E0F0);
    collapsed: yes;
}

object {
    display: inline-block; 
    property-group: object-properties(#F0F0E0);
    collapsed: yes;
}

iframe {
    display: inline-block; 
    property-group: object-properties(#E0F0E0);
    collapsed: yes;
}

video {
    display: inline-block; 
    property-group: object-properties(#E0E0F0);
    collapsed: yes;
}

audio {
    display: inline-block; 
    property-group: object-properties(#E0F0F0);
    collapsed: yes;
}

/* iframe and embed are empty elements */

audio > iframe,
object > iframe,
video > iframe,
audio > embed,
object > embed,
video > embed,
audio > object,
object > object,
video > object,
audio > video,
object > video,
video > video,
audio > audio,
object > audio,
video > audio {
      display: block;
}

param,
source,
track {
    display: block; 
    property-group: object-properties(#E0E0E0);
}

picture:before {
    property-group: object-before-properties(#F0E0D0); 
}

embed:before {
    property-group: object-before-properties(#F0E0F0); 
}

object:before {
    property-group: object-before-properties(#F0F0E0); 
}

iframe:before {
    property-group: object-before-properties(#E0F0E0); 
}

video:before {
    property-group: object-before-properties(#E0E0F0); 
}

audio:before {
    property-group: object-before-properties(#E0F0F0); 
}

param:before,
source:before,
track:before {
    property-group: object-before-properties(#E0E0E0); 
}

picture::attribute,
embed::attribute,
object::attribute,
iframe::attribute,
video::attribute,
audio::attribute,
param::attribute,
source::attribute,
track::attribute { 
    property-group: object-attribute-properties(); 
}

map {
    background-color: #E0E0E0;
}

area {
    background-color: inherit;
}

@import url(media.imp) media-player;

/* Forms ================================================================== */

select {
    display: inline-block; 
    property-group: object-properties(#E0E0E0);
    collapsed: yes;
    font: message-box;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

select:before {
    property-group: object-before-properties(#E0E0E0); 
}

select::attribute { 
    property-group: object-attribute-properties(); 
}

/* Interactive ============================================================ */

dialog,
details {
    margin: 1em 0 1em 1.5em;
}

summary {
    margin: 1em 0;
}

/* Scripting ============================================================== */

slot {
    display: block;
    border: 3px dotted gray;
    padding: 0.5em;
}

noscript {
    display: block;
    padding: 0.5em;
    background-image: icon(hatch2, #F0F0F0);
}

