/* ------- mjh: 20090129: der ganze body halt, also die ganze seite ------- */
body {
  font-family: verdana, arial, geneva, sans-serif;
  font-size: 1em;
  background-color: rgb(255,255,255);
  background-image:url(../bilder/hg.jpg);
  background-repeat:repeat-x; }

/* ------- mjh: 20090529: das hauptbild hingen, mit dem Verlauf ------- */
#info ul {
  position: absolute;
  top: 0px;
  left:auto;
  right:auto;
  margin: 0px;
  padding: 0px;
  width:994px; 
  height:570px; 
  background:#fff url(../bilder/page-hauptbild.jpg); 
  overflow:hidden;  }

#info li {
  list-style-type:none; 
  width:104px; 
  height:112px;
  position:absolute;}

/* ------- mjh: 20090529: die (zwei) links, die grösse usw ------- */
#info a {
  display:block; 
  width:170px; 
  height:0; 
  color:#000; 
  text-decoration:none; 
  padding-top:53px; 
  background:transparent; 
  overflow:hidden; 
  z-index:10;}

* html #info a {
  height:112px; 
  height:0; }


#info a#sinus {
  position:absolute; 
  left:96px; 
  top:56px; 
  background:url(../bilder/sinus_logo.png) no-repeat 2px 0;}

#info a#sinus:hover {background:url(../bilder/sinus_logo_on.png) no-repeat 2px 0;}


#info a#bildarchiv {
  position:absolute; 
  left:699px; 
  top:65px; 
  background:url(../bilder/archiv_off.gif) no-repeat 0px 0;}

#info a#bildarchiv:hover {background:url(../bilder/archiv_on.gif) no-repeat 0 0;}


/* ------- mjh: 20090129: link-verhalten ------- */

a:link{
  color: rgb(15,15,15);
  text-decoration: none}

a:visited{
  color:rgb(170,110,0);
  text-decoration: none}

a:hover{
  color:rgb(44,44,44);
  text-decoration: none}

a:active{
text-decoration: none}


.fixnavi{
  background-color: rgb(240,190,20);
  border-color: #c9453c;
  cursor: default;}


.subnavi{
  background-color: rgb(180,180,180);
  border-color: #c9453c;
  cursor: default;}


ul#navigation{
  position: absolute;
  font-size: 0.8em;
  margin-top:0; 
  margin-bottom:0; 
  list-style-type:none; 
  top: 316px;
  left: -28px;
  text-align: right;}

ul#navigation li{
  margin-bottom:5px;}

ul#navigation li a{ 
  display:block;
  width:80px;}

ul#navigation li a:hover{
  background:rgb(255,235,0)}

/* ------- mjh: 20090129: die kleinen thumbs beim startbild ------- */


/* //////////////////////////////////////////////////////////////////////////////////////////
////////// mjh: 20090131: die navigation rechts                               ///////
///////////////////////////////////////////////////////////////////////////////////////////// */

#textlinks {
  position: absolute;
  top: 114px;
  left: 846px;
  margin-top:0; 
  margin-bottom:0; 
  font-size: 0.8em;
  line-height: 1.6em;
  list-style-type:none;
  z-index:95;}

ul#textlinks li{
  margin-bottom:0px;}

ul#textlinks li a{ 
  display:block;
  width:73px;}

ul#textlinks li a:hover{
  background:rgb(175,210,230);}

/* //////////////////////////////////////////////////////////////////////////////////////////
////////// mjh: 20090131: TEXTfläche und texte                                  ///////
///////////////////////////////////////////////////////////////////////////////////////////// */

/* ------- mjh: 20090129: Textfläche, in der aller text ist  ------- */
#textfeld {
  position:absolute;
  width:857px; 
  height:420px; 
  top: 118px;  
  left:105px; 
  padding:0px; 
  margin: 0px; 
  background: none;}

#textfeld img {
  width:770px; 
  height:420px; 
  top: 118px;  
  left:105px; 
  padding:0px; 
  margin: 0px;  
  border-left: 1px dotted black;
  border-top: 1px dotted black;
  background: none;}

/* ------- mjh: 20090129: TEXTE  ------- */
#textstand{
  position: absolute;
  top: 120px;
  left: 118px;
  width: 740px;
  margin: 0px 0px 0px 0px;  
  font-size: 0.9em;}
  
h1 {
  font-size: 1.5em;
  text-transform: uppercase;
  color: rgb(240,190,50);
  text-decoration: none;
  margin-left: 2px;
  margin-top: 20px;
  line-height: 0.3em;}

h2 {
  font-size: 1.5em;
  text-transform: uppercase;
  color: rgb(180,180,180);
  text-decoration: none;
  margin-left: 170px;
  line-height: 0.3em;}

p{
  margin-top: 0px;
  margin-left: 0px;
  color: rgb(7,7,7);
  font-size: 1em;
  line-height: 1.2em;}

img.text_bild {  
  width: 90px; 
  height: 60px;
  margin: 4px;
  border:1px solid rgb(55,55,55); }

img.p131links { 
  border: 1px solid black;
  width:131px; 
  float: left; 
  margin: 4px 8px 2px 0px;}

img.p131rechts { 
  border:1px solid rgb(55,55,55);
  width:131px; 
  float: right; 
  margin: 4px 0px 2px 4px;}

img.p131rechts_randlos { 
  width:131px; 
  float: right; 
  margin: 4px 0px 2px 4px;}

img.p131none { 
  border:1px solid rgb(55,55,55);
  width:131px; 
  margin: 10px 11px 0px 0px;}


img.p310links { 
  border:1px solid rgb(55,55,55);
  width:310px; 
  float: left; 
  margin: 10px 11px 0px 1px;}

img.p310rechts { 
  border:1px solid rgb(55,55,55);
  width:310px; 
  float: right; 
  margin: 10px 2px 2px 6px;}

img.p220links { 
  border:1px solid rgb(55,55,55);
  width:220px; 
  float: left; 
  margin: 10px 11px 0px 1px;}

img.p220rechts { 
  border:1px solid rgb(55,55,55);
  width:220px; 
  float: right; 
  margin: 10px 2px 2px 6px;}

img.origrechts { 
  border:1px solid rgb(55,55,55);
  float: right; 
  margin: 10px 2px 2px 6px;}

img.origlinks { 
  border:1px solid rgb(55,55,55);
  float: left; 
  margin: 10px 2px 2px 6px;}

img.kleinrechts { 
  width: 96px;
  border:1px solid rgb(55,55,55);
  float: right; 
  margin: 10px 2px 2px 6px;}

.links {
  background-color: rgb(255,240,170);
  }

/* //////////////////////////////////////////////////////////////////////////////////////////
////////// mjh: 20081102: GANZ neu für bilder, die auch stehen bleiben auf click      ///////
///////////////////////////////////////////////////////////////////////////////////////////// */


/* ------- BACKGROUND ÄNDERN---- */
/* ------- mjh: 20090129: die hauptgallery, in der alles drin ist  ------- */
#gallery {
  position:absolute;
  width:847px; 
  height:420px; 
  top: 118px;  
  left:105px; 
  padding:0px; 
  margin: 0px; 
  background: none;}

/* ------- BACKGROUND ÄNDERN---- */
/* ------- mjh: 20090129: fläche, die festlegt, wo das START-Bild hinkommt, also die Fläche UNTER dem Bild, wo auch der TExt ist ---- */
#gallery b.default {
  position:absolute; 
  left:0px; 
  top:0px; 
  width:772px; 
  height:430px; 
  background-color: rgb(255,255,255);; 
  text-align:center;}

/* ------- mjh: 20090129: das effektive START-Bild  ---- */
#gallery b.default img {
  display:block; 
  width: 770px; 
  height: 400px; 
  margin:0 auto 0px auto; 
  border:1px solid black;}

/* ------- mjh: 20090129: der Text selbst unter dem START-Bild ---- */
#gallery b.default span {
  display:block; 
  color: rgb(232,189,20); 
  font-weight:bold; 
  font-size:1.0em; 
  width:770px; 
  margin:5px auto;}

/* ------- mjh: 20090129: das ist die Fläche, in der ALLE thumbs alle drin sind ---- */
#gallery ul {
  position:relative; 
  list-style:none; 
  padding:0; 
  margin:0; 
  width:70px; 
  float:right;}

/* ------- mjh: 20090129: damit werden die Abstände der thumbs gemacht ---- */
#gallery ul li {
  display:inline; 
  width:52px; 
  height:52px; 
  float:left; 
  margin: 0 0 0px 5px;}

/* ------- mjh: 20090129: das ist die fläche, auf welche die EINZELNEN kleinen thumbs kommen, also die Fläche unter den bildchen ------- */
#gallery ul li a {
  display:block; 
  width:72px; 
  height:38px; 
  text-decoration:none; 
  border:0px}

/* ------- mjh: 20090129: damit wird der Text unter den einzelnen thumbs ausgeblendet ---- */
#gallery ul li a span {
display:none;}

/* ------- mjh: 20090129: das ist das aussehen der kleinen thumbs, also der bilder ------- */
#gallery ul li a img {
  display:block; 
  width:72px; 
  height:38px; 
  border:1px solid rgb(55,55,55);}

/* ------- BACKGROUND ÄNDERN---- */
/* ------- mjh: 20090129: wenn man über die thumbs hovert, der hintergrund im untenliegenden feld ---- */
#gallery ul li a:hover {
  white-space:normal; 
  border: 1px dotted black;
  background:rgb(232,189,20);}

/* ------- mjh: 20090129: das ist die fläche, die festlegt, wo das bild hinkommt, wenn man auf ein thumb hovert 
und zugleich die schrift beinhaltet und die alte schrift dann verdeckt ------- */
#gallery ul li a:hover b {
  position:absolute; 
  left:-777px; 
  top:0; 
  width:772px; 
  height:430px; 
  text-align:center; 
  background: rgb(255,255,255);  
  z-index:20;}

/* ------- mjh: 20090129: SCHRIFT, unter dem Bild beim Hovern  ------- */
#gallery ul li a:hover span {
  display:block; 
  color: rgb(33,33,33); 
  font-weight:normal; 
  font-size:0.9em; 
  width:770px; 
  margin:5px auto;}

/* ------- mjh: 20090129: das BILD, wenn man auf die kleinen thumbs hovert ------- */
#gallery ul li a:hover img {
  width: 770px; 
  height: 400px; 
  margin:0px auto 0px auto; 
  border:1px solid black;}

/* ------- BACKGROUND ÄNDERN---- */
/* ------- mjh: 20090129: wenn man auf ein thumbs KLICKT, die Fläche darunter ---- */
#gallery ul li a:active, #gallery ul li a:focus {
  white-space:normal; 
  border: 1px dotted black; 
  background: none;}

/* ------- BACKGROUND ÄNDERN---- */
/* ------- mjh: 20090129: das ist die fläche UNTER dem bild, die festlegt, wo das bild hinkommt, wenn man auf ein thumb clickt  ------- */
#gallery ul li a:active b, #gallery ul li a:focus b {
  position:absolute; 
  left:-777px; 
  top:0px; 
  width:772px; 
  height:430px; 
  background-color: rgb(255,255,255);; 
  text-align: center;
  z-index:10;}

#gallery ul li a:active span, #gallery ul li a:focus span {
  display:block; 
  color: rgb(88,88,88); 
  font-weight:normal; 
  font-size:0.9em; 
  width:770px; 
  margin:5px auto;}

/* ------- mjh: 20090129: das BILD, das stehenbleibt, wenn man auf ein thumb clickt ------- */
#gallery ul li a:active img, #gallery ul li a:focus img{
  width: 770px; 
  height: 400px; 
  border:1px solid black;}