/*****************************************************************************/
/* modified: 2005-06-11 /// (c) 2005 Jane Bond /// http://faq.bubax.net/     */
/* contact by mail: janebond at bubax.net /// http://janebond.bubax.net/     */
/*****************************************************************************/



/****** basic settings override ******/
html, body {
  height:100%;
}
html body {
  padding:0;
}
body {
  position:relative;
}
/*****************************************************************************/


/****** basic container positioning ******/
/*** header ***/
#header {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  padding-bottom:0.5px;
  z-index:20;
}

#header #logo {
  position:absolute;
  bottom:0;
  left:0;
  width:17em;
  margin:0;
  text-align:right;
}

#header #logo img {
  margin-right:1em;
}



#header #switcher {
  display:block;
  position:absolute;
  left:0;
  bottom:-1.2em;
  width:17em;
  margin:0 0 -2px 0;
  padding:0;
  line-height:1.2em;
}
#header #switcher a {
  display:block;
  width:100%;
  margin:3px 0 0 0;
  padding:0;
  font-size:70%;
  font-weight:normal;
  text-align:center;
  text-decoration:none;
  background-color:#e4f3fe;
  color:#292c63;
  border-bottom:1px solid #ccc;
}
#header #switcher a:hover,
#header #switcher a:focus {
  background-color:#f5ffff;
  background-color:#7daaca;
  color:#d3e2ed;
  color:#000;
  color:#d3e2ed;
}


#header #text {
  font-size:80%;
  padding:0em 1em;
  text-align:center;
}
#header #text strong {
  display:block;
  margin-bottom:0.2em;
}


#header div {
  margin-left:17em;
}

/* Konqueror 3.1.5 doesn't know height:auto; therefore this
   height value has to be hidden: */
* html #header,
* html #header div {
  height:55px;
}
html>body #header,
html>body #header div {
  height:auto;
  min-height:55px;
}

#header div #breadcrumb {
  font-size:80%;
  height:1em;
  margin:1em 0 0 2px;
  padding:0.2em 2%;
  border-top:1px solid #999;
  /* This is for overlapping the Logo: */
  position:relative;
  z-index:1;
}
#header>div #breadcrumb {
  height:auto;
  min-height:1em;
}



/*** navigation ***/
#navigation {
  position:absolute;
  top:0;
  left:0;
  width:17em;
  margin:0;
  padding:9em 0 0 0;
}



/*** content ***/
#content {
/*
  Absolute positioning would cause block-level elements such as pre to expand
  horizontally in IE 6: IE interpretes width:100% as the viewport's width.
  Positioning #content with a left margin instead doesn't seem to cause any
  problems, anyway. // 20050224
  Additionally, in Konqueror 3.1.5 any floatet element inside absolutely
  positioned #content would be placed at left:0; top:0;--a real bad problem
  (compare .invisible) now solved! // 20050225
*/
/*
  position:absolute;
  top:0;
  left:17em;
*/
  padding:8.4em 1% 1% 1em;
  margin:0 1em 0 17em;
  border-left:1px solid black;
  z-index:10;
}
#content p {
  line-height:1.3em;
}
#content div p {
  line-height:1.2em;
}
/*****************************************************************************/



/****** container ids and classes ******/
/*** menu ***/
#menu {
  width:19em;
  margin:0;
  padding:0.1em 0 0 0;
  background-color:#fff;
  color:inherit;
  list-style-type:none;
  border-bottom:1px solid #999;
}

#menu ul {
  margin:0.2em 0 0.5em 0.2em;
  padding:0 0 0 1.5em;
  width:auto;
  border-top:1px solid #999;
  border-right:none;
  border-bottom:1px solid #999;
  border-left:1px solid #999;
  list-style-type:disc;
}

#menu ul ul {
  list-style-type:circle;
  margin:0.2em 0 0.2em 0.2em;
}

#menu li {
  margin:0 0 0 0;
  padding:0 0.1em 0.1em 0.1em;
  background-color:#fff;
  color:inherit;
  border-top:1px solid #999;
  border-right:none;
  border-left:1px solid #999;
  border-right:1px solid #999;
}

/* Tantek's hack */
#menu li {
  display:inline;
  width:100%;
  voice-family: "\"}\"";
  voice-family:inherit;
  display:block;
}
#menu>li {
  voice-family:inherit;
  display:block;
}



#menu li li {
  margin:0 0 0 0.3em;
  width:auto;
  border-style:none;
  display:list-item;
}
#menu li li ul {
  width:auto;
}
#menu li li li {
  width:auto;
}

#menu li ul {
  display:block;
}



/*** menu anchors ***/
#menu li a {
  width:100%;
  margin:0.1em;
  background-color:#d3e2ed;
  color:#292c63;
  padding:0.1em;
  text-decoration:none;
}
#menu li li a {
  font-weight:normal;
}

/* display:block hack for IE 5 */
#menu li a/* IE/Win < 5.5 doesn't see this */ {
  display:block;
  width:auto;
  /* any height value is necessary for IE 6 to render all the width clickable */
  height:1em;
}
/* reclaiming proper height for browsers */
#menu li>a {
  height:auto;
}



#menu li a:link {
  border-left:0.4em solid #90c1fd;
  padding-left:0.3em;

}

#menu li li a {
  background-color:#e4f3fe;
  color:inherit;
}

#menu li li li a {
  background-color:#e4f3fe;
  color:inherit;
}

#menu li a:visited {
  text-decoration:none;
  border-left:0.4em solid #b1e2fe;
  padding-left:0.3em;
}

#menu li a:hover,
#menu li a:focus {
  background-color:#292c63;
  background-color:#7daaca;
  color:#d3e2ed;
  text-decoration:none;
  border-left-color:#e4eeee;
}



/*** footer ***/
#footer {
  margin-top:1em;
  border-top:1px solid #999;
  border-bottom:1px solid #999;
}

#footer p {
  font-size:80%;
  white-space:nowrap;
  clear:left;
  padding-top:0.3em;
  margin:0;
}

#footer::after {
  content:" ";
  clear:both;
  display:block;
  margin-bottom:1em;
}



/*** accesskeys ***/
body a[accesskey]::after {
  content:"(accesskey: " attr(accesskey) ")";
  font-size:80%;
  margin:0 0 0 1em;
  padding:0 0.6em;
  background-color:#f5ffff;
  color:#292c63;
  border:1px dotted #000;
}
#menu a[accesskey]::after {
  float:right;
}
a[accesskey]:hover::after {
  background-color:#5c4f96;
  background-color:#3b6d91;
  color:#f5ffff;
  border-color:#fff;
}



/*** W3C buttons ***/
.w3cbutton {
  font-size:66%;
  list-style-type:none;
  margin:1em 0 1em 0!important;
  padding:0;
  text-align:left;
  width:30em;
  float:left;
}
.w3cbutton li {
  list-style-type:none;
  margin:0 1em 1em 0;
  padding:2px;
  float:left;
  width:13em;
  background-color:#fff;
  border:1px solid #999;
}
.w3cbutton a {
  display:block;
  /*float:left;*/
  height:100%;
  height:1.4em;
  font-weight:bold;
  margin:0;
  padding:0;
}
.w3cbutton a:link,
.w3cbutton a:visited,
.w3cbutton a:hover {
  text-decoration:none;
  background-color:#d3e2ed;
  /* A very nice W3C yellow would be background-color:#fc6; */
  color:#666;
}
.w3cbutton a:focus,
.w3cbutton a:hover,
.w3cbutton a:active {
  background-color:#c2d1dc;
  background-color:#7daaca;
  color:inherit;
}
.w3cbutton a:active {
  background-color:#d3e2ed;
}
.w3cbutton span.label {
  float:left;
  width:3.5em;
  height:1.2em;
  padding:0.1em 0.4em;
  background-color:#fff;
  background-color:#e4f3fe;
  color:#0c479d;
  text-align:center;
}
.w3cbutton a:focus span.label,
.w3cbutton a:hover span.label,
.w3cbutton a:active span.label {
  background-color:#c2d1dc;
}
.w3cbutton a:active span.label {
  background-color:#fff;
}
.w3cbutton span.spec {
  padding-left:0.6em;
  white-space:nowrap;
}
.w3cbutton span.spec::after {
  content:"\221A";
  margin-left:0.8em;
  color:#600;
}



/*** container classes ***/
.invisible {
  position:absolute;
  left:-10000px;
  width:0;
  height:0;
  overflow:hidden;
}
/* This is one of the incredible Konqueror's specials:
   position:absolute induces several flaws with any floated
   element inside #content if it is itself absolutely positioned.
   This affects #news and .info boxes as well as other elements
   (certain floating examples) in Konqueror ~< 3.3.
   Since #content is no longer absolutely positioned because of
   flaws in IE, the Safari spacer hack can be omitted. // 20050225
 */
/* First, resetting the values for modern browsers (IE doesn't catch this):
.invisible[class=invisible] {
  position:static;
}
  Second, giving the values back. Konqueror fails here:
.invisible[class=invisible] {
  position:absolute;
}
*/

/* Unhide the element for modern browsers: */
html>body .modern {
  display:inline;
  position:static;
}

.clear {
  clear:both;
}
/*****************************************************************************/



/****** classes and IDs ******/
/*** info and news blocks ***/
#content .timestamp {
  float:right;
}
#content #news .timestamp {
  font-size:100%;
  line-height:1em;
  margin:0 0 0.5em 0;
  padding:0;
  background:transparent;
  color:inherit;
  border-style:none;
}

#content #news,
#content .info {
  font-size:80%;
  float:right;
  width:15em;
  margin:3.6em 0 1em 1em;
  padding:0.4em;
  border:1px solid black;
  background-color:#f5ffff;
  color:inherit;
}

#content #news h2,
#content .info h2 {
  font-size:120%;
  margin:0;
  padding:0;
  text-decoration:none;
  float:left;
}

#content #news h3,
#content .info h3 {
  font-size:110%;
  float:none;
  margin:0.1em 0 0.5em 0;
  padding:0.2em 0 0.2em 0.3em;
  border-top:1px solid black;
  border-bottom:1px solid #999;
  background-color:#d3e2ed;
  color:inherit;
  text-decoration:none;
  clear:right;
}

#content #news p,
#content .info p {
  background-color:#e4f3fe;
  color:inherit;
  border-left:1px solid #ccd;
  border-right:1px solid #ccd;
  padding:0.4em;
  margin:0.3em 0 0 0;
}

#content .info h2 {
  float:none;
}

#content .info p strong {
  display:block;
  background-color:#e4f3fe;
  color:inherit;
  padding:0.4em;
  border-top:1px solid #999;
  border-bottom:1px solid #999;
}



/*** remarks ***/
.remark {
  margin:0 10% 0 10%;
  padding:0.5em 0.5em 0.5em 30px;
  border:1px solid #999;
  color:#333;
  background-color:#fff;
  background-image:url(/images/arrowe.gif);
  background-repeat:no-repeat;
  background-position:10px 1em;
}



/*** Glossary ***/
/* .glossary h4[id] would be the more compatible selector for
   proper browsers */
.glossary h4 {
  font-size:130%;
  padding:0.2em;
  background-color:#d3e2ed;
  border:1px solid #999;
}

#content #alphabet {
  margin:0 0 4em 0;
  padding:0;
}
#content #alphabet li {
  list-style-type:none;
  float:left;
  margin:0;
  padding:0;
}
#content #alphabet li a {
  display:block;
  width:1.2em;
  height:1.2em;
  margin:0 1px 0 0;
  padding:0.2em;
  text-align:center;
  border:1px solid #999;
  text-decoration:none;
  background-color:#d3e2ed;
}
#content #alphabet li a:hover,
#content #alphabet li a:focus {
  background:#333399;
  background-color:#7daaca;
  color:#eeeeff;
}
#a {
  clear:both;
}
/*****************************************************************************/



/****** basic element formatting ******/

html body #content pre {
  margin:1em 0 1em 0;
  padding:1em;
  overflow:auto;
}

/* IE/Win overlaps the last line of pre \*/
* html body #content pre {
  padding:1.5em 1em;
  overflow-y:hidden;
}
/* */

#content h2+pre {
  margin-top:2em;
}

#content code,#content kbd {
  padding:0 0.2em;
}

dl dt {
  font-size:120%;
  font-weight:bold;
  margin:2em 0 0 0;
  padding:0;
  border-bottom:1px solid #ccc;
}
dl dd dt {
  font-size:100%;
}
dl dt code,
dl dt kbd,
dl dt samp {
  margin:0;
  padding:0.2em 0.5em 0 0.5em!important;
  border-top:1px solid #ccc;
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
}
dl dd {
  margin:0.5em 0 0 2.5em;
  padding:0 0 0 0;
  border-bottom:1px solid #ccc;
  display:list-item;
  list-style-type:disc;
  list-style-image:url(/images/arrowe.gif);
}
dl dl {
  margin:0 0 1em 0;
}

address {
  font-weight:normal;
  font-style:normal;
  text-decoration:none;
}

#content p:first-letter {
  font-size:120%;
}

html>body span[lang="en"] {
  font-style:italic;
}
html>body #breadcrumb span[lang="en"] {
  font-style:normal;
}

var::before {
  content:"\ab";
}
var::after {
  content:"\bb";
}
pre var::before,
pre var::after,
code var::before,
code var::after,
kbd var::before,
kbd var::after,
samp var::before,
samp var::after {
  content:inherit;
}
/*****************************************************************************/



/****** form formatting ******/
/*** form formatting ***/
form {
  margin:1em 0 4em 0;
}

form label,form input {
  margin:0 1em 0 0;
}



/*** input formatting for guestbook and impressum ***/
form input#submit {
  border:1px dotted #292c63;
  background-color:#d3e2ed;
  color:#292c63;
  cursor:pointer;
}
form input#submit:hover,
form input#submit:focus {
  border:1px solid #292c63;
  background-color:#f0ffff;
  color:#181b52;
}

/* Konqueror 3.1.5 doesn't give focus from labels to their
   corresponding submit buttons; therefore, the following effects
   have to be hidden: */
form label[for = "submit"] {
  cursor:pointer;
}
form label[for = "submit"]:hover {
  background-color:#f0ffff;
  color:inherit;
}
form label[for = "submit"]:hover+input#submit {
  border:1px solid #292c63;
  background-color:#f0ffff;
  color:#181b52;
}
/*****************************************************************************/



/****** special links ******/
a img {
  border-style:none;
}

a.kurt {
  display:block;
  width:500px;
  height:70px;
  margin:1em auto 0 auto;
}
/*****************************************************************************/



/****** advanced CSS ******/
/*** title attribute ***/
html>body *[title] {
  border-bottom:1px dotted #99c;
  cursor:help;
  /* Konqueror 3.1.5 forgets the background color inside links: */
  background-color:inherit;
}

html>body img[title],
html>body .w3cbutton *[title] {
  border-bottom:none;
}

html>body a[title],
html>body a *[title] {
  cursor:pointer;
}



/*** own and foreign links ***/
a[href]::before {
  content:url("../images/int.gif");
  padding-right:5px;
}
a[href^="http:"]::after {
  content:url("../images/ext.gif");
  padding-right:1px;
}
a[href^="#"]::before {
  content:url("../images/int2.gif");
  padding-right:5px;
}

ul a[href]::before,
#header a[href]::before,
#footer a[href]::before,
#sample3d a[href]::before {
  content:"";
  padding-right:0;
}


a[href^="mailto:"]::before,
a[href^="http:"]::before,
#alphabet a[href^="#"]::before,
/*a[href^="http://bubax.net/"]::after,
a[href^="http://www.bubax.net/"]::after,
a[href^="http://janebond.bubax.net/"]::after,*/
#samplelist a[href^="http://janebond.bubax.net/"]::after,
a[href^="http://faq.bubax.net/"]::after,
a[href^="http://test.bubax.net/"]::after,
a[href^="http://jigsaw.w3.org/css-validator/validator"]::after,
a[href^="http://validator.w3.org/check"]::after,
a[href^="http://bobby.watchfire.com/"]::after,
a.kurt::after {
  content:"";
  padding-right:0;
}
/*****************************************************************************/



/****** print formatting ******/
/* to do: Damn! IE 5.x sees this at media screen also. *//*
@media print {
  span.begriff[title]::after, acronym[title]::after {
    content: ' [' attr(title) ']';
  }
  a[href]::after {
    content: ' [' attr(href) ']';
  }
  body {
    color:#000000;
  }
  #navigation {
    display:none;
  }
  #content {
    margin-left:1em!important;
  }
}
/*****************************************************************************/