body { background-color: #fdfbf0; background-image: url(../bilder/bg_baeume.gif); background-repeat: repeat; text-align: center; height: 90%; margin: 0; padding: 0; }
p { color: #92795e; font-size: 14px; font-family: georgia, serif; font-style: italic; }
h1 { color: #92795e; font-size: 20px; font-family: georgia, serif; font-weight: bold; font-style: italic; text-align: left; margin: 0 0 20px; }
td {  }

a:link { color: #d71e20; font-size: 14px; text-decoration: none; }

a:visited { color: #d71e20; text-decoration: none; }

a:hover { color: #92795e; text-decoration: none; }

a:active { color: #92795e; text-decoration: none; }
#inhalt { background-color: white; width: 760px; margin: 70px auto 0; border: solid 2px #dad3cd; }
/* UL TAG *
 * ------------ *
 * UL tag will serve as global container for the menu. 
 * NOTE: in the case of this menu, LI tags are unnecessary, so they won't be redefined.
 */

#navi ul{
 /* The tag is declared in relative position so that the future A tags will use UL as a marker for their own absolute coordinates
  * NOTE: the relative position is preferred to the absolute position so that the menu stays in the HTML flux
  */
  background: url(../bilder/menu_ohne.jpg) no-repeat; position:relative;

 /* markers are suppressed for the LI elements of the tag */
  width: 100%; height: 300px; list-style:none;
	
 /* Make sure that there is no space around the menu
  * NOTE: the padding and margins must be defined since we are using lists with markers.
  The different browsers use one or the other of the values to view the markers and make sure the elements are taken out.
  */
  padding: 0; margin: 0; }


/** A TAG **
 * ------------- *
 * The A tag will allow us to define the common attributes for each menu element
 */
li a{
 /* the tag is placed in absolute position so that our menu elements can be placed to the pixel within the UL tag.
  */
  position:absolute;
	
 /* Normally, the A tag is an "inline" tag. For this menu, we will change it to a block tag.
  */
  display:block;
	
 /* No matter what, all the A tags will have a basic height of 29px and a basic width os 80px
  * NOTE: This height depends on the background image that will be used.
  */
  text-decoration:none;
	
 /* To define typographic value for the tag's text */
  font: bold 9px Verdana, Arial, Helvetica, sans-serif; color:#000000; }


/** :hover PSEUDO CLASS **
 * ------------------------ *
 * The :hover pseudo-class will allow us to define the comom attributes for each A tag hovered onto by the user's mouse.
 * NOTE: IE understand the :hover pseudo-class only when it is applied to an A tag
 */
li a:hover{
 /* re redefine the font attributes  */
  color:#660000;
	
 /* To modify the height and width of the tag
  * NOTE: This height depends on the background image used.
  */
  width:30px;
  height:59px;
}

li a span { visibility: hidden; }
/** ONE ON ONE**
 * ---------------- *
 * Global modification of the tags being defined, we will now see the odd cases with the use of the unique identificators of classes.
 * NOTE: All of the following identificators are applied to A tags, they inherit all of the behaviors defined below for the A tag and for 
 the associated :hover pseudo-class
 */

#menu1{
  top: 112px;
  left: 34px;
  background: url(../bilder/menu_links_off.gif) no-repeat; width: 30px; height: 59px; }
#menu1:hover{
  background: url(../bilder/menu_links_on.gif) no-repeat;
}

#menu2{
  top: 175px;
  left: 114px;
  background: url(../bilder/menu_contact_off.gif) no-repeat; width: 24px; height: 86px; }
#menu2:hover{
  background: url(../bilder/menu_contact_on.gif) no-repeat;
}

#menu3{
  top: 162px;
  left: 162px;
  background: url(../bilder/menu_shop_off.gif) no-repeat; width: 66px; height: 36px; }
#menu3:hover{
  background: url(../bilder/menu_shop_on.gif) no-repeat;
}

#menu4{
  top: 90px;
  left: 233px;
  background: url(../bilder/menu_about_off.gif) no-repeat; width: 71px; height: 56px; }
#menu4:hover{
  background: url(../bilder/menu_about_on.gif) no-repeat;
}


#menu5{
  top: 38px;
  left: 267px;
  background: url(../bilder/menu_portfolio_off.gif) no-repeat; width: 125px; height: 38px; }
#menu5:hover{
  background: url(../bilder/menu_portfolio_on.gif) no-repeat;
}


#menu6{
  top: 220px;
  left: 394px;
  background: url(../bilder/enna_logo.gif) no-repeat; width: 300px; height: 34px; }
#menu6:hover{
  background: url(../bilder/enna_logo.gif) no-repeat;
}
#menu7{ 
	top: 38px;
	left: 460px;
	background: url(../bilder/frottee-vogel-button_off.gif) no-repeat; width: 262px; height: 200px; }
#menu7:hover{
  background: url(../bilder/frottee-vogel-button_on.gif) no-repeat;}

#galerie { position: relative; width: 530px; margin: 20px auto auto; }
#headline { position: relative; margin: 0; padding-right: 120px; padding-left: 120px; }
#hauptbereich { text-align: left; position: relative; padding-right: 120px; padding-left: 120px; }
#footer { color: #92795e; font-size: 14px; font-family: georgia, serif; font-style: italic; height: 50px; clear: both; margin-top: 40px; padding-top: 20px; }
.box { float:left; margin:6px; width:160px; height: 200px}
.box img { border:dashed 1px #92795E; padding:3px; width: 144px; height: 144px; margin-bottom: 12px; }
.box p { color:#92795E; font-family: Georgia, serif; font-size:14px; font-style:italic; text-align:left; border:0; margin:0;}
.hidden {visibility:hidden;}
.gestrichelt { margin-bottom: 12px; padding: 3px; border: dashed 1px #92795e; }
.float { float: right; }
/* shopattribute  */
 
.box p.price {color: #D71E20;}
.box select { border:dashed 1px #92795E; float:right; margin-right:12px;}
#formular { position: relative; width: 500px; }
td { color:#92795e; font-family: georgia, serif; font-size:14px; font-style:italic; text-align:left; vertical-align: top; border:0; margin: 0  }
input { border:dashed 1px #92795E; padding:2px; margin-bottom: 12px }
input:active, input:focus, input:hover { background-color: #fdfbd8; }
textarea { border:dashed 1px #92795E; color:#92795E; font-family: Georgia, serif; font-size:14px; font-style:italic; }
textarea:active, textarea:focus, textarea:hover { background-color: #fdfbd8; }