/*
All CSS for: https://piccolo2d.org/

@import "layout.css";
@import "color-logo.css";

*/

/******************************************************************************* 
https://piccolo2d.org/layout.css 
*******************************************************************************/

/**********************************************************
**** element defaults *************************************
**********************************************************/

body {
	font-size: 100%;
  font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
}

h1 {
	font-size: 160%;
}
h2 {
	font-size: 120%;
}
h3 {
	font-size: 110%;
	font-weight: bold;
}
ol {
	list-style-type: lower-alpha;
}

pre {
	margin: 0.5em;
	padding: 0.5em; 
	font-family: 'Courier New', Courier, monospace;
	font-size: 100%;
}
code {
	font-family : 'Courier New', Courier, monospace;
	font-size: 110%;
}

dt {
	font-weight: bold;
}

a img {
	border: 0;
}

/**********************************************************
**** special logical blocks *******************************
**********************************************************/

.preamble {
	font-style: italic;
}

p.image {
	font-style: italic;
	text-align: center;	
}

.background {
	position: relative; 
	z-index: 0;
}

.selected {
	/* make a link look like ordinary text to mark the currently active selection */
	color: black;
	text-decoration: none;
	font-weight: bold;
}

/**********************************************************
**** navigation & main area *******************************
**********************************************************/

#navigation {
/*  font-size: 0.91em; */
	float: left;
	width: 15em;
	margin: 0.0em 0;
	padding: 0.25em;
	position: relative;
	z-index: 10;
  
  /* a little less saturation than atom blue */
  background-color: #aecde3;
  border: 1px solid #69c;
}

#navigation ul {
	margin: 0;
	padding: 0 1em;
  font-size: 120%;
}

#navigation ul ul {
  padding-left: 1em;
  font-size: 90%;
  line-height: 130%;
}
#navigation ul li {
	list-style: none;
    	margin: 0;
	padding: 0;
}

#navigation .header {  
  margin: 0 0 2em 0;  
  padding: 0 1em;
}


#main {
	margin: 0;
	padding: 0 0.5em 0.1em 0.5em;
	margin-left: 16em;
	min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
	position: relative;
	z-index: 10;
}

#main-head {
	margin: 0 -0.5em 0.25em -0.5em;
	padding: 0.5em 0.5em 0.25em 0.5em;
	position: relative;
}

#main-head h1 {
  margin-top: 0; 
}

/**********************************************************
**** code snippets & toggling *****************************
**********************************************************/

/* Display code snippets in multiple, switcheable languages.
 Typical usage:

          <p class="toggle">
            <a id="jlink$$$" class="toggle selected"
            onmousedown="swapSections('csharp', 'java', 'clink', 'jlink');"
            href="javascript:void(0);">Java</a> | <a id="clink$$$"
            onmousedown="swapSections('java', 'csharp', 'jlink', 'clink');"
            href="javascript:void(0);">C#</a>
          </p>
          <div class="snippet" id="snippet$$$">
            <pre class="snippet java" id="java$$$">
...
</pre>
            <pre class="snippet csharp" id="csharp$$$">
...
</pre>
          </div>

*/

.snippet {
	margin: 0;
}
.snippet.java {
	position: absolute;
	visibility: visible;
}
.snippet.csharp {
	position: relative;
	visibility: hidden;
}

/* Typical toggle usage:
 <p class="toggle">
   <a id="jlink0" class="toggle selected"
   onmousedown="swapSections('csharp', 'java', 'clink', 'jlink');"
   href="javascript:void(0);">Java</a> | <a id="clink0"
   onmousedown="swapSections('java', 'csharp', 'jlink', 'clink');"
   href="javascript:void(0);">C#</a>
 </p>
*/
.toggle {
	margin: 0;
	padding: 0;
}
.toggle.selected {
	text-decoration: none;
	font-weight: normal;
}

/******************************************************************************* 
https://piccolo2d.org/color-logo.css 
*******************************************************************************/

/* 
 Color scheme based on the logo colors:
	atom blue: #8abee3
	atom grey: #b5b5b5
	text red:  #f11414
	text grey: #737373
*/

body {
	color: black;
	/* atom grey */
	background-color: #eeeeee;
}

a {
  text-decoration: none; 
}
a:hover {
  text-decoration: underline; 
}

em {
	color: #333;
  font-weight: bold;
}

.selected {
	/* make a link look like ordinary text to mark the currently active selection */
	color: black;
}

#main {
	/* a little less saturation than atom blue */
	background-color: #aecde3;
  /*background-color: #dddddd;*/
  border: 1px solid #69c;
}

#main a {
  text-decoration: underline; 
}

#main {
  line-height: 1.25em; 
}

#main-head {
	/* atom blue */	
  background-color: #8abee3;
  border-bottom: 1px solid #69c;
}

.snippet {
	/* a little less value than atom blue */
	background-color: #82b3d6;
}

table#impressions {
  clear: both;
  float: right;;  
}
table#impressions td {
  padding: 1em; 
}


.bugreport {  
  margin-bottom: 0;  
  position: relative;
  padding: 0 1em;
  top: 3em;
  text-align: right;
}

.bugreport a {
    
}

.validators {
  display: none;
}