@charset "utf-8";
/* Created MJH - by Ashkal Graphics */

body   { background-color: #fff; background-repeat: no-repeat; margin: 0 auto; width: 1000px; height: 625px }

img {
	padding:5;
	border:10;
	margin:5;
	border:10;
}

/* Modifications by MJ Hassouna */
#wrapper {
	min-width: 1000px;
	height: 625px;
	}
#content {
	margin: 0 auto;
	}

#buttons  { display: inline-block; position: absolute; z-index: 1; top: 2.5em; left: 36%; -webkit-transition: top 1s; transition: top 1s }

#buttons a:hover img {
	position: relative;
	top: 2.2em;
		transition: top 1s;
		-webkit-transition: top 1s; /* Safari */
	left:0;
	}

/* end modifications */

#middle  { position: fixed; z-index: 2; pointer-events: none }

#midash {
	position: absolute;
	z-index: 2;
	pointer-events: none;
}

/* Modifications by MJ Hassouna */

#background2     { margin: 0 auto; position: fixed; z-index: 300; top: 0; left: 0; width: 2184px; height: 118px }

/* end modifications */

#logo   { position: absolute; z-index: 300; top: 40px; left: -35px; width: 250px }


#madeOn  { position: absolute; z-index: 6; top: 200px; left: -90px; width: 150px }

#sidebar {
	float: right;
	width: 280px;
}

#search { 
	position:absolute;
	top: 5px;
 	right: 270px;
	z-index:3;
	font-size:12px;
	font-family: Arial;
	color:#FFF;
	alignment-adjust:middle;
	overflow:auto;
	margin-bottom:0;
	border:none;
	vertical-align:middle;
}

#slider-left-but { 
	display: block; 
	width: 30px; 
	height: 30px; 
	border: none; 
	background: url("../gallery/menu/slider_left.png"); 
	margin-right: 10px; 
}

#slider-right-but { 
	display: block; 
	width: 30px; 
	height: 30px; 
	border: none; 
	background: url("../gallery/menu/slider_right.png"); 
}

#spoon {
	position: absolute;
	top: 120px;
 	left: 140px;
	width: 600px;
}

#pro_list {
	position: absolute;
	top: 240px;
 	right: 250px;
    width: 60px;
	}

#cenpic {
	position: absolute;
	top: 260px;
 	left: 410px;

}

#fcontact  { color: #000; font-size: 16px; font-family: Arial, Helvetica, sans-serif; margin-bottom: 0; position: absolute; z-index: 3; top: 220px; left: 420px; width: 400px; overflow: auto; vertical-align: middle; border: none; alignment-adjust: middle }

#fconash {
	position: absolute;
	top: 230px;
 	right: 160px;
	z-index: 3;
	font-size: 16px;
	font-family:"Arial Black", Gadget, sans-serif;	
	color: #DCDCDC;
	alignment-adjust: middle;
	overflow: auto;
	margin-bottom: 0;
	border: none;
	vertical-align: middle;
}

#femail {
	position: absolute;
	top: 280px;
 	left: 600px;
	z-index: 3;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	alignment-adjust: middle;
	overflow: auto;
	margin-bottom: 0;
	border: none;
	vertical-align: middle;
}

#fcomments {
	position: absolute;
	top: 340px;
 	left: 600px;
	z-index: 3;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	alignment-adjust: middle;
	overflow: auto;
	margin-bottom: 0;
	border: none;
	vertical-align: middle;
}

#fproducts {
	position: absolute;
	top: 230px;
 	right: 110px;
	width: auto;
}

#fitems {
	position: relative;
	top: 200px;
	left: 195px;
}

#fitems2 {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	top: 200px;
	left: 195px;
}

#fthanks {
	position: absolute;
	top: 240px;
 	left: 200px;
	z-index: 3;
	font-size: 26px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	alignment-adjust: middle;
	overflow: auto;
	margin-bottom: 0;
	border: none;
	vertical-align: middle;
}

#swiss   { position: absolute; z-index: 100; top: 200px; right: 1000px }
	
#uman {
	position: absolute;
	top: 210px;
 	left: 220px;
	}	

#uman2 {
	position: absolute;
	top: 330px;
 	right: 40px;
	}
	
#aboutus {
	position: absolute;
	top: 450px;
 	left: 180px;
	}	
	
#itemsall {
	position: absolute;
	top: 310px;
 	right: 40px;
	}		

#hanjour   { position: absolute; z-index: 101; top: 425px; left: -90px }	
		
#s_spices {
	position: absolute;
	top: 60px;
	left: 60px;
    }

#underlinemenu { color: #000; font-size: 9px; font-family: Arial, Helvetica, sans-serif; line-height: 14px; margin-bottom: 0; position: relative; z-index: 3; top: 300px; left: 20px; overflow: auto; vertical-align: middle; border: none; alignment-adjust: middle }

#underlinemenu ul{
padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: center; //set value to "left", "center", or "right"*/
}

#underlinemenu ul li{
display: inline;
}

#underlinemenu ul li a{
color: #000;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
border-bottom: 3px solid orange; /*bottom border is 3px*/
}

#underlinemenu ul li a:hover, #underlinemenu ul li a.selected {
border-bottom-color: black;
}

}

#sicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

#sicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

#sicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#sicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

#sicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

#sicons3 img:hover{ 
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

#buttons a img{
		opacity:0.8;
	}
	
	#buttons a img:hover{
		opacity:1;
	}
#arab { direction: rtl; }


#inhalt  { position: relative; top: 20px; left: 60px }
.iframe    { position: relative; top: 250px; left: 130px; width: 750px; height: 600px; overflow-x: hidden   }
.a { color: #000089; }
#bild { background-image: url("../gallery/Bildkontakt.jpg"); background-repeat: no-repeat; position: relative; top: 220px; left: 600px; width: 252px; height: 486px }
#mittig { position: relative; left: -30px; width: 800px; height: 600px }

.auto  { background: #ffffff; padding: 10px; position: relative; top: 240px; left: 200px; width: 730px; height: 600px; overflow: auto; border: solid 0px #000; overflow-x: hidden; }