/* -- Allgemeines -- */
body {
 background: url(http://www.masonic-library.org/picture_library/background.gif) #ffffff; /* Hier sollte man auch wenn man ein Bild als Hintergrund nicht vergessen die Hintergrundfarbe zu setzen. Es könnte nämlich sein dass man aus versehen für den Text die gleiche Farbe hat wie für den Hintergrund wobei die Leute mit ausgeschalteten Bildern nichts erkennen können. */
 color: black;
 margin: 0;
 padding-left: 25px; /* Ein wenig Abstand damit der Anschein eines Blattes auf der Wand immer erhalten bleibt */
 padding-right: 10px; /* Ein wenig Abstand damit der Anschein eines Blattes auf der Wand immer erhalten bleibt */
 min-width: 640px; /* Bei weniger als 640px Breite soll ein Scrollbalken erscheinen */
 font-size: 100.01%; /* umgeht den Font-Size-Bug im Safari, älteren Operas und IE */
 font-family: 'Lucida Grande',  'Lucida Sans Unicode', Verdana, Sans-Serif;
}

h1, h2, h3, h4 {
  font-weight:normal;
  margin:4px 0 4px 0px;
  color: #000000; /*#6699EE;*/
}

h1 { font-size:1.7em }
h2 { font-size:1.5em }
h3 { font-size:1.3em }
h4 { font-size:1.1em }

p {
  text-align: justify
}

a {
  color:#00f;
  text-decoration:none;
  border-bottom:1px dotted #aaa;
}

a:hover {
  border:none;
  color:#68f;
}

/* -- Layoutspezifisches -- */


#headercontainer {
  background: url(http://www.masonic-library.org/picture_library/background.gif) repeat-y repeat-x; /* Hier sollte man auch wenn man ein Bild als Hintergrund nicht vergessen die Hintergrundfarbe zu setzen. Es könnte nämlich sein dass man aus versehen für den Text die gleiche Farbe hat wie für den Hintergrund wobei die Leute mit ausgeschalteten Bildern nichts erkennen können. */
  width: 960px; /* Eine Begrenzung der Breite auf hoehstens 900px. Das machen wir um nicht zu lange Textbreiten zu erhalten welche dann schlecht zu lesen sind. Fuer den IE gibt es in ielte.css einen Workaround. */
  /*padding-left: 15px; /* Ein wenig Abstand damit der Anschein eines Blattes auf der Wand immer erhalten bleibt */
  /*padding-right: 15px; /* Ein wenig Abstand damit der Anschein eines Blattes auf der Wand immer erhalten bleibt */
  margin: auto; /* Hiermit zentrieren wir unsere Seite */
  border: 0px solid #aaa; /* Eine kleine optische Abgrenzung */
}


#shadowcontainer {
  background: url(http://www.masonic-library.org/picture_library/shadow.gif) repeat-y #ffffff; /* Hier sollte man auch wenn man ein Bild als Hintergrund nicht vergessen die Hintergrundfarbe zu setzen. Es könnte nämlich sein dass man aus versehen für den Text die gleiche Farbe hat wie für den Hintergrund wobei die Leute mit ausgeschalteten Bildern nichts erkennen können. */
  width: 955px; /* Eine Begrenzung der Breite auf hoehstens 900px. Das machen wir um nicht zu lange Textbreiten zu erhalten welche dann schlecht zu lesen sind. Fuer den IE gibt es in ielte.css einen Workaround. */
  /*height: 100%; */
  margin: auto; /* Hiermit zentrieren wir unsere Seite */
  /*padding-left: 15px; /* Ein wenig Abstand damit der Anschein eines Blattes auf der Wand immer erhalten bleibt */
  /*padding-right: 15px; /* Ein wenig Abstand damit der Anschein eines Blattes auf der Wand immer erhalten bleibt */
  border: 2px solid #FFFFFF; /* Eine kleine optische Abgrenzung */
}

#maincontainer { /* Ist dafuer gedacht dass die viele Formatierungen einfacher werden, und auch ein gemeinsammer Rand entstehen kann, der nicht ganz aussen am Fenster ist. */
  background: url(http://www.masonic-library.org/picture_library/Container.gif) repeat-y #ffffff; /* Hier sollte man auch wenn man ein Bild als Hintergrund nicht vergessen die Hintergrundfarbe zu setzen. Es könnte nämlich sein dass man aus versehen für den Text die gleiche Farbe hat wie für den Hintergrund wobei die Leute mit ausgeschalteten Bildern nichts erkennen können. */
  overflow: hidden;
  margin: auto; /* Hiermit zentrieren wir unsere Seite */
  font-size: 1em; /* Ein Kompromiss ueber den man sicherlich streiten kann, aber viele Leute empfinden die von Ihnen selbst eingestellte Textgröße für zu groß, wissen aber nicht wie man das ändert. */
  width: 885px; /* Eine Begrenzung der Breite auf hoehstens 900px. Das machen wir um nicht zu lange Textbreiten zu erhalten welche dann schlecht zu lesen sind. Fuer den IE gibt es in ielte.css einen Workaround. */
  padding-left: 15px; /* Ein wenig Abstand damit der Anschein eines Blattes auf der Wand immer erhalten bleibt */
  /*height: 100%; */
  border: 0px solid #aaa; /* Eine kleine optische Abgrenzung */
}


/* - Der Header - */
#header {
 background: url(images/headerbkg.gif) 0 0 repeat-x #6699CC; /* Das Bild mit der Blume hat einen Übergang zum Schwarzen das nutzen wir aus. Wir lassen es oben links beginnen und wiederholen es nicht. Dadurch dass die Hintergrundfarbe auch schwarz ist entsteht der Eindruck als ob das Bild unendlich lang wäre. */
 height: 80px; /* Das Blumenbild ist 64px hoch also wählen wir das auch als höhe für unseren Kopf. */
 padding: 0 0;
 text-align: left;
 line-height: 54px;
 font-family: Arial, sans-serif;
 font-size: 25px; /* Das Logo soll auch in unseren Kopf passen deswegen ist es ein wenig kleiner. Durch die Angabe der Textgröße in px verhindern wir im IE die Vergrößerung und zerstörung des Layouts durch den Benutzer. Der Opera vergrößert das Bild proportional mit also kann da auch nichts passieren. */
 overflow: hidden; /* Einzig der Mozilla könnte den Text unverhältnissmäßig zum Hintergrund verändern. Damit dann wenigstens das Menü benutzbar bleibt schneiden wir alles was herausragt ab. */
 letter-spacing: -1px; /* Wieder ein wenig Typografie damit das Logo besser aussieht. */
 margin: 0; /* Manche Browser haben das schon voreingestellt aber nicht alle, deshalb vereinheitlichen wir das. */
}

#headerleft {
  background: url(images/headerleft.gif) 0 0 no-repeat;
  height: 80px;
  width: 569px;
  float:left;
  padding: 0;
  margin: 0;
}

#headerright {
  background: url(images/headerright.gif) 0 0 no-repeat;
  height: 80px;
  width: 114px;
  float: right;
  padding: 0;
  margin: 0;
}

/* - Das HauptmenŸ - */
#navcontainer {
}

ul#navlist
{
  background: url(http://www.masonic-library.org/picture_library/Container.gif);
/*background: #fff;*/
/*  font-family: Verdana, Arial, sans-serif; */
  font-size: 14px;
  text-align: center;
  vertical-align: middle;

  margin-top: 0;
  margin-bottom: 0;
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 0;
  padding: 3px;
  white-space: nowrap;
  /* border-bottom: 1px dotted #ddd; /* Eine kleine optische Abgrenzung */

}

#navlist li
{
  display: inline;
  list-style-type: none;
}

#navlist a {
  padding: 3px 10px;
  border-bottom: none;
}

#navlist a:link, #navlist a:visited
{
color: #000000; /*#6699EE; */
background: url(http://www.masonic-library.org/picture_library/Container.gif);
/*background-color: #fff;														  */
text-decoration: none;
}

#navlist a:hover
{
color: #ff0000; /*#fff;	*/
background: url(http://www.masonic-library.org/picture_library/Container_2.gif);
/*background-color: #6699EE;													  */
text-decoration: none;
}

#navlist #current a:link, #navlist #current a:visited
{
color: #000000; /*#6699EE; */
background: url(http://www.masonic-library.org/picture_library/Container.gif);
/*background-color: #fff;*/
text-decoration: none;
font-weight:bold;
}

#navlist #current a:hover
{
color: #ff0000; /*#fff;*/
background: url(http://www.masonic-library.org/picture_library/Container_2.gif);
/*background-color: #6699EE;*/
text-decoration: none;
font-weight:bold;
}

/* - content - */
#content {
  width:850px;
  background: url(http://www.masonic-library.org/picture_library/Container.gif);
  margin: auto; /* Hiermit zentrieren wir unsere Seite */
  /*float:left;*/
  font-size:1em; 
  overflow:hidden;
  /*border-top:20px solid #fff;	
    border-left:20px solid;  #fff;
  border-right:20px solid #fff;
  border-bottom:20px solid #fff;*/
}
#content h1, h2, h3, h4 {
  margin-left: 0px;
}
#content p, #content li, #content div{
	color:#000;
}

#content ol, #content ul, #content dl {
	padding:0 0 0 40px;
	margin:12px 0;
}

#content td {
  font-size:0.8em;
  	color:#000;

}


/* - Der Sidebar - */
#sidebar {
  width:200px;
  float:right;
  color:#99f;
  line-height:1.5em;
  margin:20px 0 16px 0;
  overflow:hidden;
  border: 0px solid #aaa; /* Eine kleine optische Abgrenzung */
/*  border-right:12px solid #fff; */
}

#sidebar h1, #sidebar h2 {
  margin-left: 22px;
}

#sidebar .col {
	width:110px;
	float:left;
}

#sidebar a {
	display:block;
	padding:3px;
	border:none;
	color:#888;
}

#sidebar a:hover {
	color:#6699EE;
}

#sidebar p {
	font-size:1.2em;
	margin:6px 0;
}

#sidebar li {
  border-bottom:1px dotted #ddd;
  font-size:0.8em;

}

#sidebar ul ul {
	list-style-type:none;

}



/* - Der Footer - */
#footer {
 color:#777;
 background: url(http://www.masonic-library.org/picture_library/Container.gif);
 padding: 10px 20px;
 text-align: center;
 font-family: Arial, sans-serif;
 font-size: 0.6em; /* Das Logo soll auch in unseren Kopf passen deswegen ist es ein wenig kleiner. Durch die Angabe der Textgröße in px verhindern wir im IE die Vergrößerung und zerstörung des Layouts durch den Benutzer. Der Opera vergrößert das Bild proportional mit also kann da auch nichts passieren. */
 letter-spacing: 0px; /* Wieder ein wenig Typografie damit das Logo besser aussieht. */
 margin: 0; /* Manche Browser haben das schon voreingestellt aber nicht alle, deshalb vereinheitlichen wir das. */
}
#footer a {
 color: #00F; /* Die vorher eingestellte Farbe passt nicht um auch als Logofarbe zu dienen, deshalb wählen wir hier Weiß. */
 text-decoration: none;
}