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

body {
	font-size: 115%;
	font-family: Arial, 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: 75%;
}
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;
}

#navigation ul {
	margin: 0;
	padding: 0 1em;
}
#navigation ul li {
	list-style: none;
    	margin: 0;
	padding: 0;
}

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

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