/*
 * Copyright (c) 2012-2013 Pixware SARL. 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, 0.83em,
                            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: 1.33em 0;
}

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

nav {
    border: 1px solid #D0D0EE;
    border-radius: 0.5em;
    background-color: #F0F0FF;
    padding: 0.5em;
    margin: 1.33em 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;
}

hgroup {
    border: 1px solid #E0E8EE;
    border-radius: 0.5em;
    background-color: #F4FAFF;
    padding: 0.5em;
    margin-bottom: 1em;
}

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

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,
article > header:first-child > h1:first-child:before,
article > header:first-child > h2:first-child:before,
article > header:first-child > h3:first-child:before,
article > header:first-child > h4:first-child:before,
article > header:first-child > h5:first-child:before,
article > header: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,
aside > header:first-child > h1:first-child:before,
aside > header:first-child > h2:first-child:before,
aside > header:first-child > h3:first-child:before,
aside > header:first-child > h4:first-child:before,
aside > header:first-child > h5:first-child:before,
aside > header: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,
section > header:first-child > h1:first-child:before,
section > header:first-child > h2:first-child:before,
section > header:first-child > h3:first-child:before,
section > header:first-child > h4:first-child:before,
section > header:first-child > h5:first-child:before,
section > header: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;
}

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;
}

abbr[title]:after,
acronym[title]:after {
    display: inline;
    content: " (" attr(title) ")";
    color: gray;
    font-size: smaller;
    font-style: normal;
    font-weight: normal;
}

time[datetime]:after {
    display: inline;
    content: " [" attr(datetime) "]";
    color: gray;
    font-size: smaller;
    font-style: normal;
    font-weight: normal;
}

var {
    font-family: monospace; 
}

samp {
    background-color: #F0F0FF;
}

kbd {
    background-color: #E0FFE0;
}

rt {
    color: #800080;
}

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

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

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