/* set our custom font family using @font-face */

@font-face {
   font-family: champ;
   src: url("../fonts/CL.ttf") format("truetype");
}


* { margin:0;padding:0; }
body {	color: #eeeeee; 
	background: #fff url(/img/background.jpg) no-repeat top left; 
	height:100%;
	width:100%;
	display:table;
	vertical-align:middle;
	padding:0px;
	-moz-border-radius-topleft: 200px;
	-moz-border-radius-topright: 200px;
	-moz-border-radius-bottomright: 200px;
	-moz-border-radius-bottomleft: 200px;
	margin:0px;
	text-decoration:none;
	font-size:12px;
	text-transform:uppercase;
	font-weight:bold;
	border:0px solid transparent;
	text-align:center;
	
   	box-shadow: 0 -2px 20px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 15px 30px rgba(0,0,0,0.3);
   	-o-box-shadow: 0 -2px 20px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 15px 30px rgba(0,0,0,0.3);
   	-webkit-box-shadow: 0 -2px 20px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 15px 30px rgba(0,0,0,0.3);
  	-moz-box-shadow: 0 -2px 20px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 15px 30px rgba(0,0,0,0.3);

 }
a:hover {color:#CCC;}

a.button { 
	padding:6px;
	
	color:#FFF;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	margin:10px;text-decoration:none;
	font-size:12px;
	text-transform:uppercase;
	font-weight:bold;border:2px solid transparent;
	background: rgba(1,0,0,.25);
   	box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
  	-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	}
a.button:hover { border:2px solid #990080; }
h1, h2, h3, h4 { text-transform:uppercase;
	
				font-family: "Arabic Typesetting";
				text-shadow: #ffffff 2px 2px 1px;
				font-size: 24px;
				color: #000099;

 }
#container {
	background:#ffffff;
	height:100%;
	width:100%;
	display:table;
	vertical-align:middle;
	width:1020px;border:1px solid #dddddd;
	-moz-border-radius-topleft: 30px;
	-moz-border-radius-bottomright: 30px;
	-moz-border-radius-bottomleft: 30px;margin:20px auto;
	padding:5px;
	color:#ffffff;
   box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	}
#container2 {
	background:#ffffff;
	height:50px;
	width:100%;
	display:table;
	text-align:center;
	vertical-align:middle;
	width:1020px;border:0px solid #dddddd;
	padding:5px;
	color:#eeeeee;
	font-size: 3px;
	}
}
#header {}

#header h1 { 
	font-family:champ, arial, sans-serif;
	text-transform:uppercase;
	margin:-25px 3px 0 0;
	font-size:20px;
	color:#990080;
	display:block;
	float:left;
	width:200px;
	text-align:center; 
	}
#header p { 
	font-family:arial, sans-serif;
	color:#CCC;
	display:block;
	float:right;
	width:620px; 
	}

#nav { width:1020px;
	clear:both;
	border-bottom:0px dotted #660099;
	height:20px;
	padding:0px 0 0 0; 
	}
.nav ul {}
.nav li { list-style:none;
	
	display:block;
	float:right;
	border:1px solid #666;
	padding:6px;
	margin:-25px 3px 0 0;
	z-index:1500;
	color:#ffffff;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-bottom:0;
	background: rgba(0,0,0,0.25);
   	box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
  	-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);

 }
#nav li a { 
	display: block;
	 height: 50px;
	padding: 0 1px;
	margin: 0;
	-webkit-transition: 0.15s linear;
	-webkit-transition-property: -webkit-transform margin;
	-webkit-box-reflect: below 2px; -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25))); 
	}
.nav li:hover { margin-left: 9px; margin-right: 9px; z-index: 200;}
.nav li:hover a {   -webkit-transform-origin: center bottom;
	 -webkit-transform: scale(1.5); }
.nav li.nearby {
	margin-left: 6px; margin-right: 6px;
	z-index: 100;
}
 
#nav li.nearby a {
	-webkit-transform-origin: center bottom;
	-webkit-transform: scale(1.25);
}
  
#nav li span {
background: rgba(0,0,0,0.75);
position: absolute;
bottom: 80px;
margin: 0 auto;
display: none;
width: auto;
font-size: 11px;
font-weight: bold;
padding: 3px 6px;
-webkit-border-radius: 6px;
color: #fff;
}
#nav li:hover span {
display: block;
} 
		#dockContainer { position: fixed; top: 5px; height: 120px; padding: 10px 0 0; text-align: center; -webkit-border-radius: 6px; -moz-border-radius: 6px; width: 100%; line-height: 1; z-index: 100; }
		#dockWrapper { width: auto; display: inline-block; position: relative; border-bottom: solid 2px rgba(255,255,255,.35); line-height: 0; }
		#dockContainer2 { position: fixed; top: 5px; height: 120px; padding: 0px 0px 0px 100px; text-align: left; -webkit-border-radius: 6px; -moz-border-radius: 6px; width: 100%; line-height: 1; z-index: 100; }
		#dockWrapper2 { width: auto; display: inline-block; position: relative; border-bottom: solid 2px rgba(255,255,255,.35); line-height: 0; }
		#dockContainer3 { position: fixed; top: 5px; height: 150px; padding: -10px -10px 0px 0px; text-align: right; -webkit-border-radius: 6px; -moz-border-radius: 6px; width: 90%; line-height: 1; z-index: 100; }
		#dockWrapper3 { width: auto; display: inline-block; position: relative; border-bottom: solid 2px rgba(255,255,255,.35); line-height: 0; }


#content { 
	float:right;
	width:550px;
	padding:10px 0px 0 0;
	margin:20px 0px 0 0; 
	z-index:-100
	text-align:center;
	padding:0px;
	-moz-border-radius-topleft: 200px;
	-moz-border-radius-topright: 200px;
	-moz-border-radius-bottomright: 200px;
	-moz-border-radius-bottomleft: 200px;
	margin:0px;
	

 }
	}

#welcome { 
	border-bottom:1px dotted #dddddd;
	padding:-10px 0 20px 0; 
	}
#products {
	width:840px;
	padding:0px 0px 0 0;
	margin:-5px 0 0 0; 
			
}
.column { 
	float:right;
	width:206px;
	padding:10px 10px 10px 0; 
	}
.column img { 
	border:3px solid #333;
	margin:4px 0;
	opacity:0.5; 
	}
.column:hover img { opacity:1; }
.column p { font-size:11px;padding:4px 0; }
.column:last-of-type { padding:10px 0; }


#sidebar { 
	float:left;
	width:380px;
	height:150px;
	padding:10px 0 0 0; 
	z-index=2000;
	text-align:center;
	margin:0px 0px 0px 0;
	}

.sidepanel { 
	width:400px;
	border:0px dotted #666;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-topright: 50px;
	-moz-border-radius-bottomright: 50px;
	padding:5px;
	background: rgba(100,0,0,0.25);
   	box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
  	-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	z-index=2000;
	margin:0 0 8px 0;
	color:#CCC; 

	}
.sidepanel h4 {
				font-family: "Arabic Typesetting";
				text-shadow: #00dd00 2px 2px 1px;
				font-size: 22px;
				color: #ffffff;
}



#footer { 
	clear:both;
	width:1000px;
	height:175px;
	padding:10px 10px 10px 10px;
	text-align:left; 
	-moz-border-radius-bottomleft: 50px;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomright: 50px;
	background: rgba(0,0,0,0);
   	box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   	-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
  	-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
	z-index=2000;
	margin:0 0 8px 0;
	color:#000099; 
	}
#footer2 {
	
	width:1000px;
	height:75px;
	padding:10px 10px 10px 10px;
	text-align:center; 
	color:#000099;
}
#footer3 {
	clear:both;
	width:1000px;
	height:75px;
	padding:10px 10px 10px 10px;
	text-align:center; 
	font-size: 5%;
	color:#ffffff;
}