/**********************************/
/* Reset some of the WH styesheet */
/**********************************/

* {
}

body {
	font-family:sans-serif;
}

/***************************/
/* Device based page width */
/***************************/

@media screen and (max-width: 640px) {
	.chapter,
	.appendix {
		margin-left:1em;
		margin-right:2em;
		padding-bottom: 5em;
	}
}

@media screen and (min-width: 641px) and (max-width: 1072px) {
	.chapter,
	.appendix {
		margin-left:1em;
		margin-right:3em;
		padding-bottom: 5em;
	}
}

@media screen and (max-width: 640px) {
	h1 {
		padding-left:1em;
		margin-left:-1em;
		margin-right:-1rem;

	}
}


/******************************/
/* default color as variables */
/******************************/

:root {
	--main-color:#77A43B;
	--insert-background:whitesmoke; /* note, warning */
	--link-color:black;
	--hover-color:#AB5421;
	--normal-font:#3F3F3F;
	--normal-background:#FDFDFD;
	--accent-line:#BCBCBC;
	--warning-header:#ff5555;
	--caps-border:#408000;
	--term-match:blue;
	--match-background:#BFFFBC;
	--replace-color:#FD8A00;
	
	--intro-color:#77A43B;
	--panes-color:#DE5B17;
	--menus-color:#179ADE;
	--windows-color:#DEBF17;
	--project-color:#DE1737;
	--prefs-color:#0059B3;
	--howto-color:#B300B3;
	--appendices-color:#00B3B3;
	--support-border:solid 6px;
}


/*************************/
/* WH basic CSS settings */
/*************************/

/* WH ToC */

#wh-navigation {
	margin-right:3em;
}
#wh-toc a.wh-toc-selected {
	color:var(--normal-font) !important;
	border-bottom-width:0px !important;
	font-weight:bold;
	font-size: 1.1em;
}

#wh-toc a {
	font-style: normal;
}

/* WH content */

#wh-content {
    font-family: sans-serif;
	/*    font-size: 10pt; */
    background-color: var(--normal-background);
    line-height: 1.5;
    color:var(--normal-font);
    text-align:left;
    clip-path: padding-box;
}

#wh-content div.toc,
#wh-content header,
#wh-content footer
{
    display:none;
}

#wh-content .book  div.toc {
    display: block;
}

#wh-content .book .abstract-title,
#wh-content .book .list-of-figures,
#wh-content .book .list-of-tables,
#wh-content .book .toc-title {
    display:none;
}

#wh-content .book  h3.author {
    font-style:italic;
}
#wh-content .book  div.toc .toc-chapters,
#wh-content .book  div.toc .toc-appendices {
    display:flex;
    flex-wrap: wrap;
    padding:0;
    margin-bottom:20px;
}

#wh-content .book  div.toc .toc-panel {
    display:block;
    /*    height: 120px;*/

    position: relative;
    flex: 0 1 auto;

    width: 45%;

    border: 1px solid var(--accent-line);
    border-radius:3px;
    background:var(--normal-background);
    margin-right:3%;
    margin-top:30px;
    padding-bottom:20px;
}

#wh-content .book  div.toc h2 {
    font-size: 1.2em;
    color:var(--main-color);
    font-weight:bold;
    margin:.8rem 1rem 0 1rem;
}

#wh-content .book  div.toc .toc-panel ul {
    display:block;
    margin-top: 1rem;
    margin-right: 1em;
    padding-left: 1rem;
    text-align:left;
}

#wh-content .book  div.toc .toc-panel ul>li {
    display:inline;
}

#wh-content .book  div.toc .toc-panel li>span>a:after {
    content:", ";
}

#wh-content .book  div.toc .toc-panel li:last-of-type>span>a:after {
    content:".";
}

/* WH Header */

#wh-header {
    border-bottom-width: 1px;
    border-bottom-color: var(--accent-line);
    border-bottom-style: solid;
    background-color:var(--main-color);
    color:var(--normal-background);
}

#wh-header .logo {
    display:inline-block;
    vertical-align: middle;
}

#wh-header .title {
    display:inline;
	/*    font-size:18pt; */
	font-size:1.8em;
    font-family: sans-serif;
    font-weight:bold;
    vertical-align: middle;
}

#wh-header .title a {
    color:var(--normal-background);
    text-decoration:none;
}


/*************************************/
/* CSS for web manual visual effects */
/*************************************/

/*****************/
/* Global layout */
/*****************/

p,
pre,
ol,
dl,
ul,
table,
hr {
    margin: 1em 0;
}

hr {
    height: 1px;
    border-style: none;
    background-color: var(--accent-line);
}

blockquote {
    margin: 2em 4em;
}


/***********/
/* Headers */
/***********/

h1, h2, h3, h4, dt {
    color: #77A43B;
}

h1 {
    line-height: 1.13;
    margin-top : 0;
    padding-bottom: .3em;
    margin-bottom: 0;
    padding-left:3em;
    margin-left:-3em;
    margin-right:0em;
}

h2 {
    font-size:1.35em;
    font-style: normal;
    font-family: sans-serif;
    line-height: 1.2;
    margin: 0.8em 0;
    padding-top: 1em;
    border-bottom: 1px solid var(--accent-line);
}

h3 {
    font-size:1.17em;
    line-height: 1.28;
    margin: 0.85em 0
}

h4 {
    font-size:1.08em;
    line-height: 1.39;
    margin: 0.92em 0;
    font-style:italic;
    margin-top:1.5rem;
    margin-bottom:.2rem;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top: 0;
}


/*********/
/* Links */
/*********/

a {
	color: var(--panes-color);
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--panes-color);
}

a.ulink::after {
	content: " ↗️";
}

/* 
.toc a:link {
	text-decoration:none;
}


a.ulink:link {
    color:var(--caps-border);
	text-decoration-color: var(--caps-border);	
}

a.ulink:visited {
    color:var(--caps-border);
	text-decoration-color: var(--caps-border);	
}
 */


/*****************************************/
/* Visual differentiation of link target */
/*****************************************/

/* Menus, submenus and menu items */

section.chapter a[href^="chapter.menus.html#menus"] > span.guimenu::before,
section.chapter a[href^="chapter.menus.html#menus"] > span.guisubmenu::before,
section.chapter a[href^="chapter.menus.html#menus"] > span.guimenuitem::before {
	content: "> ";
}

/* <guilabel> for panes/windows/dialogs */

section.chapter p > a[href^="chapter.panes.html#panes"] > span.guilabel,
section.chapter p a[href^="chapter.windows.and.dialogs.html#dialogs"] > span.guilabel,
section.chapter p a[href^="chapter.windows.and.dialogs.html#windows"] > span.guilabel
 {
    font-family: sans-serif;
    font-size: 1em;
    padding: 0px 0px;
}


/**********/
/* Tables */
/**********/

.table-title {
    font-style:italic;
    color: var(--main-color);
    font-size : .9em;
    margin-bottom: .75em;
}


td,th {
    padding: .5em 1em;
}

.table[id*="app.shortcuts.lists.function.codes"] .table-contents {
	font-size:0.6em;
}

.table[id*="app.shortcuts.lists.function.codes"] table {
	width:100%;
}

/********/
/* Code */
/********/

pre.programlisting em.parameter {
    white-space:nowrap;
    display:inline-block;
}

pre.programlisting {
    overflow-x : auto;
    text-align:left;
	/*    padding: 1.2em 0.5em 0 1.5em; */
}

/*************/
/* Gui items */
/*************/

/* 
span.guimenu, span.guisubmenu, span.guimenuitem, span.guilabel {
	font-style: italic;
	font-family: monospace;
    font-size: 1.1em;
/* 
    padding: 0 .3rem;
    margin: 0 .2rem;
    color: var(--normal-font);
}
 */


span.guibutton {
    font-family:monospace;
	font-size: 1.2em;
    border: .1px solid var(--normal-font);
    border-radius:4px;
    padding: 0 .3rem;
    margin: 0 .2rem;
    background: var(--insert-background);
/*     color: var(--normal-font); */
}


/************************/
/* Chapters, appendices */
/************************/

.chapter,
.appendix {
    margin-left:3em;
    margin-right:6em;
    padding-bottom: 5em;

}


/********************************/
/* Notes, examples and warnings */
/********************************/

.note {
	/*    font-size: small; */
	font-size: 0.9em;
    color: var(--normal-font);
    background-color:var(--insert-background);
    border: 1px solid var(--accent-line);
    border-radius:5px;
    margin-bottom:1em;
    padding:0 1em;
}

.note h3 {
    display:inline-block;
    margin:.5em 0 0 0;
}

.example-title {
    font-style:italic;
    color: var(--main-color);
    font-size : .9em;
    margin-bottom: .75em;
}

.example-contents {
    border-style: solid;
    border-width: 1px;
    border-radius:3px;
    padding: 2px 1em;
    vertical-align: baseline;
    border-color:var(--main-color);
}

.warning {
	/*    font-size: small; */
	font-size: 0.9em;
    color: var(--normal-font);
    background: var(--insert-background);
    border: .1px solid var(--accent-line);
    border-radius:5px;
    margin:2em 0;
    padding:0 1em;

}

.warning h3 {
    display:inline-block;
    margin:.5em 0 0 0;
    color:var(--warning-header);
}


/***********/
/* Figures */
/***********/

.figure-title {
    font-style:italic;
    color: var(--main-color);
    font-size : .9em;
    margin-bottom: .75em;
}

.figure-contents img {
    max-width: 100%;
    height: auto;

}


/***********/
/* Keycaps */
/***********/

.keycap,
td>span.keycaps,
span.term>span.keycap {
    display:inline-block;
    font-size: .8rem;
    border: 1px solid var(--normal-font);
    border-radius:4px;
    margin: 0 .2rem;
    background: var(--insert-background);
    color: var(--normal-font);
	padding-left:.3rem;
	padding-right:1.2rem; 
}

section.section>p>span.keycap:last-of-type, 
p span.keycap:last-of-type, 
dd span.keycap:last-of-type, 
li.listitem span.keycap:last-of-type, 
span.term>span.keycap:last-of-type, 
div.example-contents span.keycap:last-of-type, 
div.example-contents > p:nth-child(8) > span:nth-child(2),
div.example-contents > p:nth-child(9) > span:nth-child(3),
div.example-contents > p:nth-child(11) > span:nth-child(2),
div.example-contents > p:nth-child(13) > span:nth-child(2),
div.example-contents > p:nth-child(13) > span:nth-child(4),
div.example-contents > p:nth-child(5) > span:nth-child(3),
p > span.keycap:last-child  {
    background: var(--main-color);
    color: var(--normal-background);
    border-color: var(--caps-border);
    padding: 0 .3rem;
} 

/*******************/
/* ToC side colors */
/*******************/

/* Introduction */
a[href="chapter.instant.start.guide.html"] ~ ul {
	border-left: var(--support-border) var(--intro-color);
	border-radius: 3px;
}

h2:has(a[href="chapter.instant.start.guide.html"]) ~ ul {
	border-right: var(--support-border) var(--intro-color);
	padding-right: 1em;
}


#chapter\.instant\.start\.guide {
	padding-right: 2em;
	border-right: var(--support-border) var(--intro-color);
	border-bottom: var(--support-border) var(--intro-color);
}

/* How to */

a[href="chapter.how.to.html"] ~ ul {
	border-left: var(--support-border) var(--howto-color);
	border-radius: 3px;
}

h2:has(a[href="chapter.how.to.html"]) ~ ul {
	border-right: var(--support-border) var(--howto-color);
	padding-right: 1em;
}
#chapter\.how\.to {
	padding-right: 2em;
	border-right: var(--support-border) var(--howto-color);
	border-bottom: var(--support-border) var(--howto-color);
}

/* Panes */
a[href="chapter.panes.html"] ~ ul {
	border-left: var(--support-border) var(--panes-color);
	border-radius: 3px;
}

h2:has(a[href="chapter.panes.html"]) ~ ul {
	border-right: var(--support-border) var(--panes-color);
	padding-right: 1em;
}

#chapter\.panes {
	padding-right: 2em;
	border-right: var(--support-border) var(--panes-color);
	border-bottom: var(--support-border) var(--panes-color);
}

/* Menus */
a[href="chapter.menus.html"] ~ ul {
	border-left: var(--support-border) var(--menus-color);
	border-radius: 3px;
}

h2:has(a[href="chapter.menus.html"]) ~ ul {
	border-right: var(--support-border) var(--menus-color);
	padding-right: 1em;
}
#chapter\.menus {
	padding-right: 2em;
	border-right: var(--support-border) var(--menus-color);
	border-bottom: var(--support-border) var(--menus-color);
}

/* Windows and dialogs */

a[href="chapter.windows.and.dialogs.html"] ~ ul {
	border-left: var(--support-border) var(--windows-color);
	border-radius: 3px;
}

h2:has(a[href="chapter.windows.and.dialogs.html"]) ~ ul {
	border-right: var(--support-border) var(--windows-color);
	padding-right: 1em;
}
#chapter\.windows\.and\.dialogs {
	padding-right: 2em;
	border-right: var(--support-border) var(--windows-color);
	border-bottom: var(--support-border) var(--windows-color);
}

/* Project folder */

a[href="chapter.project.folder.html"] ~ ul {
	border-left: var(--support-border) var(--project-color);
	border-radius: 3px;
}

h2:has(a[href="chapter.project.folder.html"]) ~ ul {
	border-right: var(--support-border) var(--project-color);
	padding-right: 1em;
}
#chapter\.project\.folder {
	padding-right: 2em;
	border-right: var(--support-border) var(--project-color);
	border-bottom: var(--support-border) var(--project-color);
}

/* Preferences */

a[href="chapter.dialogs.preferences.html"] ~ ul {
	border-left: var(--support-border) var(--prefs-color);
	border-radius: 3px;
}

h2:has(a[href="chapter.dialogs.preferences.html"]) ~ ul {
	border-right: var(--support-border) var(--prefs-color);
	padding-right: 1em;
}
#chapter\.dialogs\.preferences {
	padding-right: 2em;
	border-right: var(--support-border) var(--prefs-color);
	border-bottom: var(--support-border) var(--prefs-color);
}

/* Appendices */

a[href="chapter.appendices.html"] ~ ul {
	border-left: var(--support-border) var(--appendices-color);
	border-radius: 3px;
}

h2:has(a[href="chapter.appendices.html"]) ~ ul {
	border-right: var(--support-border) var(--appendices-color);
	padding-right: 1em;
}
#chapter\.appendices {
	padding-right: 2em;
	border-right: var(--support-border) var(--appendices-color);
	border-bottom: var(--support-border) var(--appendices-color);
}


/*****************************************/
/* Various font, colors and box settings */
/*****************************************/


/* 
code.filename {
	color:var(--main-color);
}
 */

.literal {
    font-weight: bold;
}

code,
tt,
kbd,
samp,
var,
pre {
    font-family: monospace;
    font-size: 1.3em;
}

kbd {
    font-weight: bold;
    border: 1px solid var(--main-color);
    border-radius: 3px;
    padding: 0.125em 0.25em;
}

samp {
    background-color: var(--insert-background);
    padding: 0.125em 0.25em;
}

var {
    font-style: italic;
}

abbr {
    font-weight: bold;
    text-decoration: none;
}

cite {
    font-style: italic;
}

dfn {
    font-style: italic;
    border-bottom: 1px dotted var(--main-color);
}

pre {
    white-space: pre;
    background-color: var(--insert-background);
    border: 1px dotted var(--main-color);
    padding: 0.5em;
    margin: 1.1em 0;
}

strong.userinput {    
    font-style: italic;    
}

/**********************/
/* List bullets, etc. */
/**********************/

ul {
    list-style-type: disc;
}

ul ul {
    list-style-type: square;
}

ul ul ul {
    list-style-type: circle;
}

ul ul ul ul {
    list-style-type: disc;
}

ul ul ul ul ul {
    list-style-type: square;
}

ul ul ul ul ul ul {
    list-style-type: circle;
}

ul ul ul ul ul ul ul {
    list-style-type: disc;
}

ol > li {
    list-style-image: none;
}

li {
    margin: 1em 0;
}

*[compact] > li,
.xmcompact > li {
    margin-top: 0;
    margin-bottom: 0;
}

dt {
    margin-top: 1em;
    margin-bottom: 0;
}

dt + dt {
    margin-top: 0;
}

dd {
    margin-top: 0;
    margin-bottom: 1em;
}

*[compact] > dt,
.xmcompact > dt {
    margin-top: 0;
}

*[compact] > dd,
.xmcompact > dd {
    margin-bottom: 0;
}


/***************************************/
/* CSS for "docbook" coded screenshots */
/***************************************/

/**************/
/* Status bar */
/**************/

/* Messages */

#panes\.statusbar\.messages > div.example-contents {
	background-color:var(--normal-background);	
}
																
#panes\.statusbar\.widgets > div.example-contents > p {
	background-color:var(--insert-background);
    border: 0.1px solid var(--normal-font) ;
	border-radius: 0px;
	text-align: left;
}

#panes\.statusbar\.messages > div.example-contents > p > .literal {
	background-color:var(--insert-background);
    border: 0.1px solid var(--normal-font) ;
    padding: 0.5em 5em 0.5em 1em;
	box-shadow: 0.5px 0.5px;
	font-size:1em;
}

/* Widget */

#panes\.statusbar\.widgets > div.example-contents {
	background-color:var(--normal-background);
}

#panes\.statusbar\.widgets > div.example-contents > p  {
	background-color:var(--insert-background);
    border: 0.1px solid var(--normal-font) ;
    padding: 0.5em 5em 0.5em 1em;
	box-shadow: 0.5px 0.5px;
	text-align: left;
}

#panes\.statusbar\.widgets > div.example-contents > p > .literal {
	font-size:1em;	
}

#panes\.statusbar\.widgets > div.example-contents > p > .literal > .token {
    border: 0.1px solid var(--normal-font) ;
    padding: 3px;	
}

/* widget with % */
#panes\.statusbar\.widgets\.percentage > div.example-contents {
	background-color:var(--normal-background);	
}

#panes\.statusbar\.widgets\.percentage > div.example-contents > p {
	background-color:var(--insert-background);
    border: 0.1px solid var(--normal-font) ;
    padding: 0.5em 5em 0.5em 1em;
	box-shadow: 0.5px 0.5px;
	text-align: left;
	font-size:1em;
}

#panes\.statusbar\.widgets\.percentage > div.example-contents > p > .literal {
		font-size:1em;
}

#panes\.statusbar\.widgets\.percentage > div.example-contents > p > .literal > .token {
    border: 0.1px solid var(--normal-font) ;
    padding: 3px;	
}


/******************/
/* Panes examples */
/******************/

/* General layout */

.programlisting,
.literallayout {
	background-color:var(--normal-background);
	font-weight: 100;
	font-size: 1em;	
	text-align:left;		

    border: 1px solid var(--accent-line) ;
    padding: 1em;
    border-radius: 5px;
}

/* Editor pane */

#panes\.editor\.default\.editor\.writing\.space > div.example-contents > pre {
	border-left: 10px solid lightgrey;
}

#panes\.editor\.default\.editor\.writing\.space > div.example-contents > pre > span:nth-child(1) {
	background-color:var(--match-background);
	font-weight:bold;	
}

#panes\.editor\.default\.editor\.writing\.space > div.example-contents > pre > span:nth-child(2) {
	font-weight:bold;	
}

#panes\.editor\.modified\.editor\.target\.field > div.example-contents > pre  {
}
#panes\.editor\.modified\.editor\.target\.field > div.example-contents > pre > span:nth-child(2) {
	float:left;
}

#panes\.editor\.modified\.editor\.target\.field > div.example-contents > pre > span:nth-child(4) {
	float:left;	
}


/* Fuzzy match pane */

#table\.pane\.matches > table,
#table\.pane\.matches > table > tbody > tr > td:nth-child(1) > div > table{
	width: 100%;
	border-collapse:separate !important;
	border: 0px !important;
}

#table\.pane\.matches > table td {
	border: 0px;
}

#table\.pane\.matches > table > tbody > tr {
	vertical-align: top;
}

#table\.pane\.matches > table > tbody > tr > td:nth-child(1) {
	border-right: 0px !important;
}

/** Editor side **/

#table\.pane\.matches > table > tbody > tr > td:nth-child(1) > div > table > tbody > tr > td,
#table\.pane\.matches > table > tbody > tr > td:nth-child(2) > div > table > tbody > tr > td {
	border: 1px solid lightgrey;
	border-left: 10px solid lightgrey;
	border-radius: 5px;
}

#table\.pane\.matches > table > tbody > tr > td:nth-child(1) > div > table > tbody > tr > td > pre > span:nth-child(1),
#table\.pane\.matches > table > tbody > tr > td:nth-child(1) > div > table > tbody > tr > td > pre > span:nth-child(2) {
	font-weight:bold;	
}

/** fuzzy pane side **/

#table\.pane\.matches > table > tbody > tr > td:nth-child(2) > div > table {
	width: 100%;
	border-collapse:separate !important;
	border: 0px !important;
}

#table\.pane\.matches > table > tbody > tr > td:nth-child(2) > div > table > tbody > tr > td > pre {
	border:0px;
}

#table\.pane\.matches > table > tbody > tr > td:nth-child(2) > div > table > tbody > tr > td > pre:nth-child(1) {
	font-weight:bold;
}

#table\.pane\.matches > table > tbody > tr > td:nth-child(2) > div > table > tbody > tr > td > pre:nth-child(1) > span {
	color:blue;
}

/** Explanations **/

#panes\.fuzzy\.matches > p:nth-child(7) > span:nth-child(2) > strong {
	color: blue;
}

#panes\.fuzzy\.matches > p:nth-child(7) > span:nth-child(3) > strong {
	color: green;
}

/* Glossary match */

#glossary\.matches > div.example-contents > pre {
	border-left: 10px solid lightgrey;
	border-radius: 5px;
}

#glossary\.matches .token {
	font-weight:bold;
}

#glossary\.matches > div.example-contents > pre > span:nth-child(2) {
	font-weight:100;	
}

#no\.source\.file\.display > div.example-contents > pre > span {
	font-weight:bold;
}

/* Search */
#search\.for\.doitsu > div.example-contents > pre > .token {
	color:var(--term-match);
	font-weight:bold;
}

#select\.second\.match > div.example-contents > pre > span.action {
	background-color:var(--match-background);
}

/* Replace */

#replace\.with\.allemand > div.example-contents > pre > span:nth-child(1) {
	color:var(--term-match);	
}

#replace\.with\.allemand > div.example-contents > pre > span:nth-child(2) {
	color:var(--replace-color);
}

/* Convert match numbers */

#convert\.match\.numbers > div.example-contents .token {
	font-weight:bold;	
}

/* Bridge two languages */

#bridge\.english\.and\.french\.with\.japanese > div.example-contents > pre > span:nth-child(1) {
	background-color:var(--match-background);
	font-weight:bold;
}

#bridge\.english\.and\.french\.with\.japanese > div.example-contents > pre > span:nth-child(2) {
	font-weight:bold;
}