/*
 * Stylesheet for the oddmuse wiki
 * $Id: wiki.css,v 1.18 2025/06/09 23:04:09 rolf Exp $
 * Starting point is the standard oddmuse stylesheet, with some
 * modification to meet the needs of the WG
 */

body {
    background:#ffffff;
    padding:2% 3%;
    max-width:1280px;
    margin:0 auto;
}

/* Positioning of the basic blocks
|| normal order is:
||   div.header, div.toc, div.content, div.footer
||
||  +-------------- body -----+-------+
||  |  div.header             |div.cal|
||  |                         +_______|
||  |  div.toc                        |
||  |                                 |
||  | +-----------------------------+ |
||  | |                             | |
||  | |        div.content          | |
||  | |                             | |
||  | +-----------------------------+ |
||  |                                 |
||  |  div.footer                     |
||  +---------------------------------+
*/

/* GotoBar in the header */
div.header span.gotobar { display:inline; }

/* Use vertical bars in the goto-bar, edit-bar,
 * hardcoded | are removed with version 1.480
 */
span.bar a {
	margin: 0; padding: 0;
	padding-left: 4px;
	border-left: 1px solid black;
}

/* The other content needs keep the space for the sidebar on the right */
div.content, div.rc, div.letter , div.diff, div.refer,
 div[class="journal collection"] {
	margin-right: 10%;
}

/* layout for the sidebar (currently deactivated) */
div.sidebar {
	/* haven't found a good solution yet, always collates with calender
	 * so let it vanish for now */
	display: none;
	float:right; width:15%; border: solid thin red;
}

div.footer {
	margin-top:3pt;
}
/*
 * horizontal rule of the footer separates from the part above
 * "clear:both" is needed to reset any multicolumn floating paragraph boxes
 */
div.footer hr { display:block; clear:both; }

div.diff { padding-left:5%; padding-right:5% }
div.old { background-color:#FFFFAF }
div.new { background-color:#CFFFCF}
div.refer { padding-left:5%; padding-right:5%; font-size:smaller; }
table.history { border-style:none; }
td.history { border-style:none; }
table.user { border-style:solid; border-width:thin; margin-left:5%; }
table.user tr td { border-style:solid; border-width:thin; padding:5px; }

img.logo {
    position:absolute; right:3%; top:-60pt;
/*    float: right;
    clear: right;*/
    border-style:none;
    background-color:#fff;
}

div.header img, div.footer img { border:0; padding:0; margin:0; }


/* **********************************************************************
 * Definitions for the calendar extension
 */
/* No explicit width for the box,
 * float automatically shrinks the width to the content */
div.cal { float:right; background-color:white; }
/* The calendar is included in a <pre> block, so it inherits from there */
div.cal pre {
  font-weight: bold;
  margin: 0; margin-left: 2em;
  background-color: white;
  border-style: solid; 
  border-color: blue; 
  border-top-width: 1px;
  border-left-width: 1px;
  border-bottom-width: 2px;
  border-right-width: 2px;
}
div.cal a.today { background-color:yellow; }

div.year div.month { float: left; }
div.year div.month pre { border-width: 1px; margin: 1ex; }

/*
 * **********************************************************************
 * Main content
 */

dt { font-weight:bold; }

img {
    border: none; 
    padding: 0;
    margin: 0;
}
img.smiley {
    border:none;
    padding:0;
    margin:0;
    background:#fff;
    color:#000;
}    
img.left { margin: 1ex; margin-left: 0.2ex; float: left; }
img.right { margin: 1ex; margin-right: 0.2ex; float: right; }

@media screen and (max-width: 599px) {
	img, img.left, img.right { max-width: 98%; }
}
p.editnote {
	border: thin solid; padding:1ex;
	width: 85ex;
	font-size:87%; background-color: #FFCF88
}

hr {
    border:none;
    color:black;
    background-color:#000;
    height:1px; 
    margin-top:2ex;
}

pre {
    border: 1px dashed #ec5800;
    padding: 0.5em;
    margin-left: 1em;
    margin-right: 1em;
    white-space: pre;
    background-color: #fdf4e0;
    color: black;
}

/* formatting of hyperlinks */
a {
    text-decoration:none;
    font-weight:bold;
}
a:hover {
    text-decoration:underline;
}

p a.definition {
    /* color:#666; */
    padding: 2px;
    margin-top: 5px;
    border-bottom: 2px solid #000000;
    text-decoration:none;
    display:block; 
}

/* General rules for headers */
h1, h1 a { color:#666; }
h2, h3, h4, h2 a, h3 a, h4 a { color:#EC5800; }
/* h1, h2, h3, h4 { font-size:medium; margin:4ex 0 1ex 0; padding:0; } */
h1, h2 { border-bottom: 2px solid #666; }
h3, h4 { border-bottom: 1px dashed #000; }

/* specific adjustments for headers inside the header-block of a page */
div.header h1 {
    margin-top:1ex;
    border-bottom: 2px solid #666;
}
/* Headers inside journal pages should be smaller especially the h1 titles */
div.journal h1 { font-size:141%; margin:3ex 0 1ex 0; border-bottom-width: 1px; }
div.journal h2, div.journal h3, div.journal h4 {
	font-size:medium;
	margin:4ex 0 1ex 0;
}

/*******************************************************\
*
* Styles for CONTENT and PREVIEW should be the same
* otherwise "preview" will be pointless, as it will
* show a different layout as the final content version.
*
\*******************************************************/
/* Use larger font-sizes on desktop screens */
@media screen and (min-width: 600px) {
	div.content, div.preview { font-size: 18px; }
	div.content pre, div.preview pre, div.content tt, div.preview tt { font-size: 16px; }
}

div.content h2, div.content h3, div.content h4,
div.preview h2, div.preview h3, div.preview h4 {
	margin-top:4ex;
	border-bottom-color:#EC5800;
}
/* Tables inside user's content */
div.content table, div.content tr, div.content td,
div.preview table, div.preview tr, div.preview td {
	border-color:#666;
	border-width: 1px;
}
/* Without "collapse" IE has still space between cells */
div.content table, div.preview table { border-collapse:collapse; border-spacing:0px; }

/* If paragraphs have less vertical space it looks better in most cases */
div.content p, div.preview p { margin-top: 0.7ex; margin-bottom: 0.7ex; }

/* increased line height (1.3 instead of the default 1.2) looks better */
div.content p, div.preview p, div.content dd, div.preview dd,
div.content li, div.preview li { line-height: 1.3em; }

/* Recent Changes ... */
div.rc h2 { border-bottom-color:#ec5800; }
div.rc hr { display:none; } /* Not really useful, but overlaps into calendar */
/* Keep the dates and the Entries closer together */
div.rc p { margin-bottom: 0.8ex; }
div.rc ul { margin-top: -0.5ex; }


/* **********************************************************************
 * Multicolumn layout for the printable index
 */
div.letter br { display: none; }
div.letter h2 {
	clear: both; padding-top: 2ex; border-bottom: solid 1px;
	font-size: medium; margin-top: 6pt; margin-bottom: 6pt;
}
/* Only the <a href=> anchors, but not the anchor for the index letter in h2
 * need display block.
 * (The direct child selector "div.letter > a" is not available in all browsers)
 */
div.letter a.local { display: block; width: 32%; float: left; }


/* **********************************************************************
 * definitions for the table of contents
 */
div.toc {
	width:70%;
	border:1px dotted #666;
	margin:1ex;
	padding:0;
	font-size:87%;
	/*font-family:Verdana,Arial;*/
}
div.toc h2 {
    margin-top:1ex; margin-bottom:0pt;
    padding-left:1ex;
    color:#666;
    border-bottom: 1px dotted #666;
}
div.toc a {
	font-weight:normal;
}


/* **********************************************************************
 * portrait support
 */
div.one, div.two {
	margin-top:1.5ex; margin-bottom:1.5ex;
	padding: 0.2ex; padding-left:1ex;
}
div.one { background-color:#ececec; }
img.portrait {
	float:left; clear:left; background-color:#fff;
	border:#999 1px solid; padding:4px; margin:0px;
}
/* li { margin-left:1em; }  No idea why this is needed */
div.portrait { float:left; clear:left; font-size:xx-small; padding-left:3px; }
div.portrait + p { min-height:70px; }
div.portrait img.portrait { float:none; margin-top:5px; margin-right:10px; }
div.portrait a { text-decoration:none; color:#999; }


/* **********************************************************************
 * Printing needs completly different settings
 */

@media print {
body { font:11pt "Neep", "Arial", sans-serif; }
a, a:link, a:visited { color:#000; text-decoration:none; font-style:oblique; font-weight:normal; }
h1 a, h2 a, h3 a, h4 a { font-style:normal; }
a.edit, div.footer, div.refer, form, span.gotobar, a.number span { display:none; }
a[class="url number"]:after, a[class="inter number"]:after { content:"[" attr(href) "]"; }
a[class="local number"]:after { content:"[" attr(title) "]"; }
img[smiley] { line-height: inherit; }
pre { border:0; font-size:10pt; }
}