/* 
 * Homepage "Sara Reinmann", 11.2.07
 * Author: Ruben Andrist, rubenandrist-at-gmx.ch
 * Auftrag: http://www.sarareinmann.ch
 */

html body, html, body {
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  width: 640px;
  text-align: center;
}

#page{
  width: 
  height: 100%;
  width: 100%;
  text-align: center;
}

#header{
  width: 580px;
  height: 85px;
  background-image: url(images/Logo_Adresse.gif);
  background-repeat: no-repeat;
  margin: 30px;
}

#header img{
  cursor: pointer;
  border: 0;
  width: 580px;
  height: 85px;
}

/****************************************************************************
 *  The main area simply containts an <img> tag which displays the photo
 */

#main{
  margin-top: 0px;
  margin-left: 30px;
  width: 580px;
  height: 440px;
  /* HIDDEN FROM IE/MAC \*/
  background-repeat: no-repeat;
  overflow: hidden;
  /* END OF HIDDEN PART */
}

img#foto{
  width: 580px;
  height: 440px;
}

/****************************************************************************
 *  This contains the navigation bar with all its components
 */
#bar{
  margin-top: 16px;
  margin-left: 0px;
  width: 640px;
  height: 32px;
}

/*
 *  left/right are the classes for the left/right arrows
 */
div.left{ width: 12px; height: 13px; margin-top: 4px; cursor: pointer; float: left; background-image: url(images/links.gif); overflow: hidden; }
div.left:hover{ background-image: url(images/links_2.gif); }
div.right{width: 12px; height: 13px; margin-top: 4px; cursor: pointer; float: right;background-image: url(images/rechts.gif);overflow: hidden; }
div.right:hover{background-image: url(images/rechts_2.gif);}

/*
 *  The window contains the moving slider (navigation)
 */
div#window    {
    float: left;
    position:relative; margin-left: 5px;
    overflow:hidden;
    width:580px; height:25px; z-index:20;
}

/*
 *  The slider is the moving container inside the above window
 */
div#slider  {
    position:relative;
    left:0px; top:0px;
    height:30px;
    z-index:10;
}

/* active is the black marker for the current active picture */
#active{ 
	position: absolute; 
	width: 12px; height: 5px; 
	background: url(images/halb_punkt.gif); 
	background-repeat: no-repeat;
	overflow: hidden; 
}

/*
 *  The boxes are contained in this div and styled accordingly
 */
div#boxes{ position: absolute; left: 0px; top: 5px; width: 99999px; }

#boxes div{
  background: url(images/punkt.gif);
  background-repeat: no-repeat;
  margin-top: 1px;
  margin-right: 4px;
  margin-left: 1px;
  float: left;
  width: 12px;
  height: 12px;
  cursor: pointer;
  z-index:30;
  overflow: hidden;
}

div.listitem div.box{
  background: url(images/punkt.gif);
  background-repeat: no-repeat;	
}

#boxes div:hover{
  margin-top: 1px;
  width: 12px;
  height: 14px;
}

/* these are the available colors/greytones for the boxes 
div.c0{ background-color: #D6C1C1; }
div.c1{ background-color: #E2C68A; }
div.c2{ background-color: #BFC3A8; }
div.c3{ background-color: #97ABB2; }
div.c4{ background-color: #BFA290; }
div.c5{ background-color: #CFCE8B; }
div.c6{ background-color: #B7D2CF; }
div.c7{ background-color: #A29CB2; }
div.c8{ background-color: #A6B9D3; }
div.c9{ background-color: #D9D7BE; }

div.g0{ background-color: #AAAAAA; }
div.g1{ background-color: #666666; }
div.g2{ background-color: #999999; }
div.g3{ background-color: #777777; }
div.g4{ background-color: #BBBBBB; }
div.g5{ background-color: #888888; }
div.g6{ background-color: #AAAAAA; }
div.g7{ background-color: #777777; }
div.g8{ background-color: #BBBBBB; }
div.g9{ background-color: #888888; }
*/

#links {
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  width: 70px; height: 15px; 
  background-repeat: no-repeat;
  overflow: hidden;
}

#links img {
  float: right;
  width: 51px; height: 15px; border: 0px;
}