/*
  CSS-Stylsheet zur Veröffentlichung von Bilderserien!
  ====================================================
  
  Dieses Stylsheet wurde hergestellt zur Vereinfachung der Veröffentlichung von Bilderserien.
  Für die Inhalte und Funktionalität werden keine Haftungen übernommen, aber auch keine Rechte beansprucht.
  Das Stylsheet kann also beliebig frei verteilt werden.
  
  Viel Spaß bei der Bearbeitung wünscht Martin Schneider
  
  "BILDERSERIEN v1.2"
  
  Designed for ::     www.fc-schlins.at       ::   kick it !

  Einfach nur die Farben anpassen und schon kanns losgehen !    
    
*/

/* **************************************************************************************  */
/* *****  Sämtliche Farbwerte sortiert nach Hintergrund-, Rahmen- und Schriftfarbe  *****  */
/* **************************************************************************************  */

body {
  background-color:#FFFFFF;
} 
 
#titel, #titel a, div#zurück a, div#vorig a, div#naechst a {
  background-color:#E0D7CA;
}

#titel a:hover, #titel1 a:hover, div#zurück a:hover, div#vorig a:hover, div#naechst a:hover, div#info {
  background-color:#BFAF98;
}

#titel1, #titel1 a {
  background-color:#C9BDA9;
}

#knopf {
   background-color:#452E1E;
}

div#ende, div#naechstende {
  background-color: #FF9900;
}

div#zurück a:hover, div#vorig a:hover, div#naechst a:hover, div#info, div#ende, div#naechstende {
  border-color: #452E1E;
}

#bildframe, #kopfframe, #start, #sekunden, #pause, #vorschau, div#zurück a, div#vorig a, div#naechst a {
  border-color: #452E1E;
}

#titel, #titel a, #titel1, #titel1 a {
  color:#452E1E;
}

#knopf, #titel a:hover, #titel1 a:hover, div#zurück a:hover, div#vorig a:hover, div#naechst a:hover, div#info {
  color:#EEF3E0;
}

#start, #sekunden, #pause, div#ueber, div#zurück, div#naechst, #datum, div#zurück a, div#vorig a, div#naechst a  {
  color: #452E1E;
}

div#ende, div#naechstende {
  color: #452E1E;
}


/* **************************************************  */
/* *****       Grundeinstellungen für Browser   *****  */
/* **************************************************  */

/* Grundwerte werden auf 0 gesetzt */

html, frame, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {
  margin: 0;
  padding: 0;
}

/* Hintergrund und Schriftgröße wird fixiert */

body {
  font-family : verdana,arial,helvetica;
  font-size : 101%;
}


/* **************************************************  */
/* *****       Die Übersicht der Bilderserien   *****  */
/* **************************************************  */

/* Kleine Bilder in der Übersichttabelle */

#zeile {
  display: block;
  width: 502px;
  height: 50px;  
  margin: 0px 0px 5px 20px;
  padding: 0px;
  visible: hidden;
}


#vorschau {
  display: block;
  width: 60px;
  height: 45px;
  margin: 0px;
  padding: 2px 0px 0px 0px;
  text-align: center;
  float:left;
  border-style: solid;
  border-width: 1px;
}


/* Titel und Mouseovereffekt der Bilderserien in der Übersichttabelle */

#titelzeile {
  display:block;
  width:440px;
  height:45px;
  margin: 0px;
  padding: 10px 0px 0px 0px;
  float:left;
}


#titel, #titel1 {
  position: absolute;
  z-index: 1;
  display: block;
  padding: 0px;
  width:440px;
  height:22px;
  font: 10px verdana, sans-serif;
  font-weight: bold;
  text-decoration:none;
}


#titel a, #titel a:hover, #titel1 a, #titel1 a:hover {
  position: absolute;
  z-index: 2;
  display: block;
  padding: 6px 0px 0px 20px;
  width:440px;
  height:22px;
  text-decoration:none;
}


/* Datumsformatierung in der Übersichttabelle */

#datum {
  position: relative;
  z-index: 3;
  float: right;
  display: block;
  width:80px;
  height:18px;
  padding: 5px 0px 0px 0px;
  font: 9px verdana, sans-serif;
}


/* **************************************************  */
/* *****     Die Kopfzeile der Bilderserien     *****  */
/* **************************************************  */


#kopfframe {
  display:block;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  width: 100%;
  height: 88px;
}

#start {
  width: 25px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  font-size: 9px;
}

#sekunden {
  width: 325px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  font-size: 9px;
}

#pause {
   width: 25px;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   font-size: 9px;
}


/*  Design der Knöpfe (Diashow) werden hier festgelegt */
#knopf {
   height:20px;
   width: 25px;
   font: 11px verdana, sans-serif;
   font-weight:bold;
   text-align:center;
}

/* Die Überschrift wird hier festgelegt */
div#ueber {
  top: -5px;
  font: 14px verdana, sans-serif;
  font-weight: bold;
  position: relative; 
}


/* Hyperlink zurück zur Übersicht wirden formatiert */
div#zurück {
  top: 4px;
  font: 12px verdana, sans-serif;
  font-weight: bold;
  width: 110px;
  position: relative; 
}


div#zurück a {
  display: block;
  border-style: solid;
  margin: 0px 0px 20px 0px; 
  border-top-width: 0px;
  border-right-width: 2px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  padding-right: 5px;
  padding-top: 2px; 
  padding-left: 7px; 
  padding-bottom: 2px;
  text-align: right;
  text-decoration: none;
}


div#zurück a:hover {
  border-right-style: dashed;
  border-right-width: 2px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}


/* **************************************************  */
/* *****    Die linke Spalte der Bilderserien   *****  */
/* **************************************************  */


/* die Grösse der Bilder in der linken Spalte werden festgelegt */
#kleinbild {
  float:left;
  width:91px;
  height:91px;
  margin: 2px 2px 2px 2px;
  padding: 0px;
}


/* **************************************************  */
/* *****   Die rechte Spalte der Bilderserien   *****  */
/* **************************************************  */


/* Hyperlinks "voriges" und "nächstes" werden formatiert */

#bildframe {
  display:block;
  border-left-width: 2px;
  border-left-style: solid;
  width: 100%;
  height: 100%;
}

div#vorig {
  left: 100px;
  top: 10px;
  font: 12px verdana, sans-serif;
  font-weight: bold;
  width: 110px;
  position: absolute; 
  float:left;
}


div#vorig a {
  display: block;
  border-style: solid;
  border-top-width: 0px;
  border-right-width: 2px;
  border-bottom-width: 1px;
  border-left-width: 0px;
  margin: 0px 0px 20px 0px; 
  padding-right: 5px;
  padding-top: 2px; 
  padding-left: 7px; 
  padding-bottom: 2px;
  text-align: right;
  text-decoration: none;
}


div#vorig a:hover {
  border-right-style: dashed;
  border-right-width: 2px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}



div#naechst {
  right: 100px;
  top: 10px;
  font: 12px verdana, sans-serif;
  font-weight: bold;
  width: 110px;
  position: absolute; 
  float:right;
}


div#naechst a {
  display: block;
  border-style: solid;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
  border-left-width: 2px;
  margin: 0px 0px 20px 0px; 
  padding-right: 5px;
  padding-top: 2px; 
  padding-left: 7px; 
  padding-bottom: 2px;
  text-align: left;
  text-decoration: none;
}


div#naechst a:hover {
  border-left-style: dashed;
  border-left-width: 2px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}



div#naechstende {
  display: block;
  margin: 0px 0px 20px 0px; 
  padding-right: 5px;
  padding-top: 2px; 
  padding-left: 7px; 
  padding-bottom: 2px;
  right: 100px;
  top: 10px;
  font: 12px verdana, sans-serif;
  font-weight: bold;
  width: 110px;
  position: absolute; 
  float:right;
  border-style: solid;
  border-top-width: 0px;
  border-right-width: 2px;
  border-bottom-width: 1px;
  border-left-width: 2px;
}




/* Die Infoleiste der Bilderserie wird formatiert */
div#info {
  margin: 10px 0 -40px 0;
  font: 18px verdana, sans-serif;
  height: 20px;
  border-left-style: dashed;
  border-left-width: 2px;
  border-right-style: dashed;
  border-right-width: 2px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  text-align: center;
}


div#ende {
  margin: 10px 0 -40px 0;
  font: 18px verdana, sans-serif;
  font-weight: bold;
  height: 20px;
  border-left-style: dashed;
  border-left-width: 2px;
  border-right-style: dashed;
  border-right-width: 2px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  text-align: center;
}


#mfg, #mfg a, #mfg a:hover {
  font-size: 9px;
  text-align: center;
  color: #96A999;
  text-decoration: none; 
}

#mfg a:hover {
  font-weight: bold; 
}